/* traveldoc.ch – Nachbau des Wix-Designs. Masse in Design-Pixeln: Desktop 1440 (--d), Mobil 320 (--u). */
@font-face { font-family: 'Barlow'; src: url(/assets/fonts/barlow-400-latin.woff2) format('woff2'); font-weight: 400; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Barlow'; src: url(/assets/fonts/barlow-400-latin-ext.woff2) format('woff2'); font-weight: 400; font-display: swap; unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Barlow'; src: url(/assets/fonts/barlow-400-italic-latin.woff2) format('woff2'); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: 'Barlow'; src: url(/assets/fonts/barlow-700-latin.woff2) format('woff2'); font-weight: 700; font-display: swap; }
@font-face { font-family: 'Questrial'; src: url(/assets/fonts/questrial-400-latin.woff2) format('woff2'); font-weight: 400; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Questrial'; src: url(/assets/fonts/questrial-400-latin-ext.woff2) format('woff2'); font-weight: 400; font-display: swap; unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1E9F, U+20A0-20AB, U+2C60-2C7F, U+A720-A7FF; }
:root { --petrol: #026079; --gruen: #386E6E; --hellblau: #B0D8E6; --graublau: #C0D7DE; --senf: #DDAC47; --rahmen: #8F7A73; --linie: #81B0BC;
  --d: min(1px, 100cqw / 1440); --u: min(1.4px, 100cqw / 320); }
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; background: #fff; color: var(--petrol); font-family: Barlow, Arial, sans-serif; container-type: inline-size; overflow-x: clip; -webkit-font-smoothing: antialiased; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
button { font: inherit; color: inherit; }
.vh, .skip:not(:focus) { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip:focus { position: fixed; z-index: 300; left: 8px; top: 8px; background: #fff; padding: 8px 14px; }
:focus-visible { outline: 2px solid var(--senf); outline-offset: 2px; }

/* Kopf */
.kopf { position: sticky; top: 0; z-index: 50; height: calc(112 * var(--d)); margin-bottom: calc(-112 * var(--d)); transition: transform .4s ease; pointer-events: none; }
.kopf.weg { transform: translateY(-100%); }
.kopf-in { position: relative; width: calc(1440 * var(--d)); height: 100%; margin: 0 auto; }
.leiste { pointer-events: auto; position: absolute; left: calc(40 * var(--d)); top: calc(19 * var(--d)); width: calc(1360 * var(--d)); height: calc(79 * var(--d)); background: #fff; }
.logo { position: absolute; left: calc(10 * var(--d)); top: calc(9 * var(--d)); width: calc(179 * var(--d)); }
.logo img { width: 100%; height: auto; }
.menue { position: absolute; right: calc(40 * var(--d)); top: calc(23 * var(--d)); display: flex; }
.menue a { padding: 0 calc(15 * var(--d)); font: 400 calc(18 * var(--d)) / calc(32 * var(--d)) Barlow, sans-serif; color: var(--petrol); text-decoration: none; transition: color .4s; white-space: nowrap; }
.menue a:hover, .menue a[aria-current] { color: var(--gruen); opacity: .85; }
.burger { display: none; }
.mmenue[hidden] { display: none; }

/* Flächen, Buttons, Links */
.sx.blau { background: var(--hellblau); }
.fl { background: var(--bg); pointer-events: none; }
.sx.clip { overflow: clip; }
.oben > img { object-position: 50% 22%; }
.btn { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; padding: 0 calc(10 * var(--d)); background: var(--senf); color: var(--petrol); border: 1px solid var(--rahmen); border-radius: 0;
  font: 400 calc(18 * var(--d)) / 1 Barlow, sans-serif; text-decoration: none; text-align: center; white-space: nowrap; cursor: pointer; transition: border-color .4s, background-color .4s, color .4s; }
.btn:hover { background: var(--petrol); border-color: var(--petrol); color: #fff; }
.textlink { position: relative; display: flex; align-items: center; justify-content: space-between; height: 100%; color: var(--petrol); text-decoration: none; font: 400 calc(18 * var(--d)) / 1 Barlow, sans-serif; border-bottom: 2px solid var(--petrol); padding-bottom: calc(4 * var(--d)); }
.textlink span { position: absolute; right: calc(-19 * var(--d)); top: calc(3 * var(--d)); width: calc(15 * var(--d)); }
.textlink span img { width: 100%; transform: rotate(-90deg); }
.textlink:hover { color: var(--gruen); }
.pfeil-btn { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; background: var(--petrol); }
.pfeil-btn img { width: 30%; height: auto; }
.linie { margin: 0; border: 0; border-top: 1px solid var(--linie); height: 0; }
.rt li > p { margin: 0; }
.rt a { text-decoration: none; }
.rt a:hover { text-decoration: underline; }
.rt .font_8 a[href^="mailto"], .recht-text a { text-decoration: underline; }
.adr p { margin: 0; font-size: calc(18 * var(--d)); line-height: 1.55; }
.recht p { margin: 0; font-size: calc(15 * var(--d)); line-height: 1.4; }
a.fl { pointer-events: auto; background: none; font-size: calc(15 * var(--d)); line-height: 1.4; text-decoration: none; }
a.fl:hover { text-decoration: underline; }
.themen { background: var(--hellblau); padding: 0 calc(80 * var(--d)) calc(28 * var(--d)); }
.fuss-themen { margin: 0 auto; max-width: calc(1280 * var(--d)); display: flex; flex-wrap: wrap; gap: 6px 22px; justify-content: center; font-size: calc(15 * var(--d)); }
.fuss-themen a { text-decoration: none; } .fuss-themen a:hover { text-decoration: underline; }
.nach-oben { display: none; }

/* Karte (Zwei-Klick) */
.karte { position: relative; background: var(--graublau); overflow: hidden; }
.karte iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.karte-laden { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; border: 0; background: var(--graublau); cursor: pointer; color: var(--petrol); font: 400 calc(18 * var(--d)) Barlow, sans-serif; }
.karte-laden::before { content: ''; width: 28px; height: 28px; border-radius: 50% 50% 50% 0; background: var(--petrol); transform: rotate(-45deg); margin-bottom: 6px; }
.karte-laden small { font-size: calc(13 * var(--d)); opacity: .8; }

/* Formular */
.formular { color: var(--petrol); padding: calc(20 * var(--d)) calc(27 * var(--d)); }
.f-zeile { display: flex; gap: calc(21 * var(--d)); }
.f-vor { width: calc(243 * var(--d)); } .f-nach { width: calc(201 * var(--d)); }
.formular .feld { margin-bottom: calc(13 * var(--d)); }
.formular label { display: block; margin: 0 0 calc(4 * var(--d)); font: 400 calc(15 * var(--d)) / calc(21 * var(--d)) Barlow, sans-serif; padding-left: 2px; }
.formular input, .formular textarea { display: block; width: 100%; height: calc(56 * var(--d)); padding: 0 calc(10 * var(--d)); background: #fff; border: 0; border-bottom: 1px solid var(--petrol); border-radius: 0; color: var(--petrol); font: 400 calc(16 * var(--d)) Barlow, sans-serif; outline: none; }
.formular textarea { height: calc(98 * var(--d)); padding-top: calc(10 * var(--d)); resize: vertical; }
.formular input:focus, .formular textarea:focus { border-bottom-width: 2px; }
.formular .fehlt { border-bottom: 2px solid #c0392b; }
.formular .hp { position: absolute; left: -9999px; }
.formular button[type=submit] { width: calc(465 * var(--d)); height: calc(60 * var(--d)); margin-top: calc(13 * var(--d)); }
.formular .status { margin: calc(10 * var(--d)) 0 0; min-height: 1em; font-size: calc(18 * var(--d)); }
.form-aus { font-size: calc(18 * var(--d)); }

/* Neue Inhaltsseiten */
.ip-band { background: var(--hellblau); padding: calc(160 * var(--d)) 0 calc(60 * var(--d)); text-align: center; }
.ip-in { width: min(calc(1200 * var(--d)), 100% - 40px); margin: 0 auto; }
.kruemel { font-size: calc(15 * var(--d)); display: flex; gap: 8px; justify-content: center; }
.kruemel a { text-decoration: none; } .kruemel a:hover { text-decoration: underline; }
.ip-band h1 { margin: calc(18 * var(--d)) 0 0; font: 400 calc(48 * var(--d)) / 1.15 Questrial, sans-serif; }
.ip-lead { max-width: calc(820 * var(--d)); margin: calc(20 * var(--d)) auto 0; font-size: calc(20 * var(--d)); line-height: 1.6; }
.ip { padding: calc(70 * var(--d)) 0 calc(90 * var(--d)); }
.ip-raster { display: grid; grid-template-columns: minmax(0, 1fr) calc(420 * var(--d)); gap: calc(80 * var(--d)); align-items: start; }
.ip-raster:not(:has(.ip-bild)) { grid-template-columns: minmax(0, 820px); justify-content: center; }
.ip-text { font-size: calc(18 * var(--d)); line-height: 1.6; }
.ip-text h2 { margin: calc(40 * var(--d)) 0 calc(10 * var(--d)); font: 400 calc(32 * var(--d)) / 1.25 Questrial, sans-serif; }
.ip-text section:first-child h2 { margin-top: 0; }
.ip-text p { margin: 0 0 calc(14 * var(--d)); }
.ip-text ul { margin: 0 0 calc(14 * var(--d)); padding-left: 1.2em; }
.ip-text a:not(.btn) { text-decoration: underline; }
.ip-faq details { border-bottom: 1px solid var(--linie); padding: calc(14 * var(--d)) 0; }
.ip-faq summary { cursor: pointer; font: 400 calc(21 * var(--d)) / 1.35 Questrial, sans-serif; }
.ip-faq details div { padding-top: calc(10 * var(--d)); }
.ip-cta { display: flex; align-items: center; gap: calc(30 * var(--d)); margin: calc(40 * var(--d)) 0 !important; }
.ip-cta .btn { display: inline-flex; width: auto; height: calc(60 * var(--d)); padding: 0 calc(36 * var(--d)); }
.ip-cta .textlink { height: auto; border: 0; text-decoration: underline; }
.ip-quellen h2 { font-size: calc(22 * var(--d)) !important; }
.ip-quellen { font-size: calc(15 * var(--d)); }
.ip-stand { font-size: calc(15 * var(--d)); opacity: .8; }
.ip-bild { margin: 0; position: sticky; top: calc(130 * var(--d)); }
.ip-bild img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .kopf { transition: none; } }
.ip-verwandt ul { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.ip-verwandt a { display: inline-block; padding: 6px 14px; border: 1px solid var(--linie); text-decoration: none !important; font-size: .9em; }
.ip-verwandt a:hover { background: var(--hellblau); }

/* ---------- Sektionen nach Messung ---------- */
.sx { position: relative; min-height: calc(var(--h) * var(--d)); overflow: clip; }
.st { position: relative; z-index: 1; width: calc(1440 * var(--d)); min-height: inherit; margin: 0 auto; display: grid; grid-template-columns: 100%; }
.sp { grid-area: 1 / 1; display: flex; flex-direction: column; align-items: flex-start; min-width: 0; pointer-events: none; }
.it { flex: none; position: relative; pointer-events: auto;
  margin-left: calc(var(--x) * var(--d) - var(--bl, 0) * (100cqw - 1440 * var(--d)) / 2);
  width: calc(var(--w) * var(--d) + (var(--bl, 0) + var(--br, 0)) * (100cqw - 1440 * var(--d)) / 2);
  margin-top: calc(var(--t) * var(--d)); }
.ho { height: calc(var(--hh) * var(--d)); }
.ho > img, .ho > a:not(.btn), .ho > a > img, .ho > svg, .ho > div:not(.fs-soz) { display: block; width: 100%; height: 100%; }
.ho > img, .ho > a > img { object-fit: contain; }
.bildfl > img, .bildfl > a > img { object-fit: cover; }
.rr > img { border-radius: 0 calc(12 * var(--d)) calc(12 * var(--d)) 0; }
.rl > img { border-radius: calc(12 * var(--d)) 0 0 calc(12 * var(--d)); }

/* ---------- Rich Text (aus Wix übernommen) ---------- */
.rt { font-family: Barlow, Arial, sans-serif; overflow-wrap: break-word; }
.rt > * { margin: 0; }
.rt p, .rt li { line-height: 1.4; }
.rt h1, .rt h2, .rt h3 { font-family: Questrial, sans-serif; font-weight: 400; line-height: normal; margin: 0; }
.rt [style*="--fs"] { font-size: calc(var(--fs) * var(--d)); }
.rt .font_7, .rt .font_8, .rt .font_9 { font-family: Barlow, Arial, sans-serif; line-height: 1.4; }
.rt .font_0, .rt .font_2, .rt .font_3 { font-family: Questrial, sans-serif; font-weight: 400; line-height: normal; }
.rt ul { padding-left: 1.6em; margin: 0; }
.rt a { text-decoration: none; }
.rt a:hover { text-decoration: underline; }
.recht-text a { text-decoration: underline; }
.recht-text ul { padding-left: 1.8em; }


@media (min-width: 1000px) { .nd { display: none !important; } }
@media (max-width: 999px) {
  .nm { display: none !important; }
  .kopf { position: relative; height: calc(68 * var(--u)); margin-bottom: 0; pointer-events: auto; }
  .kopf.weg { transform: none; }
  .kopf-in { width: 100%; }
  .leiste { left: 0; top: 0; width: 100%; height: calc(64 * var(--u)); }
  .logo { left: calc(8 * var(--u) + (100cqw - 320 * var(--u)) / 2); top: calc(9 * var(--u)); width: calc(150 * var(--u)); }
  .menue { display: none; }
  .burger { display: block; position: absolute; right: calc(16 * var(--u) + (100cqw - 320 * var(--u)) / 2); top: calc(14 * var(--u)); width: calc(36 * var(--u)); height: calc(36 * var(--u)); padding: calc(9 * var(--u)) calc(6 * var(--u)); border: 0; background: none; cursor: pointer; }
  .burger span { display: block; height: 2px; background: var(--petrol); margin-top: calc(6 * var(--u)); }
  .burger span:first-child { margin-top: 0; }
  .mmenue { position: fixed; inset: 0; z-index: 100; background: var(--hellblau); overflow-y: auto; }
  .mm-zu { position: absolute; right: calc(14 * var(--u)); top: calc(14 * var(--u)); width: calc(40 * var(--u)); height: calc(40 * var(--u)); border: 0; background: none; cursor: pointer; }
  .mm-zu span { position: absolute; left: calc(8 * var(--u)); top: 50%; width: calc(24 * var(--u)); height: 2px; background: var(--petrol); transform: rotate(45deg); }
  .mm-zu span + span { transform: rotate(-45deg); }
  .mmenue nav { display: flex; flex-direction: column; padding: calc(130 * var(--u)) calc(30 * var(--u)) 40px; }
  .mmenue nav a { font: 400 calc(22 * var(--u)) / calc(56 * var(--u)) Barlow, sans-serif; color: var(--petrol); text-decoration: none; }
  .mmenue nav a[aria-current] { opacity: .7; }
  html.menue-offen { overflow: hidden; }
  .sx { min-height: calc(var(--hm) * var(--u)); }
  .st { width: calc(320 * var(--u)); }
  .sp { grid-area: var(--gm) / 1; }
  .it { margin-left: calc(var(--xm) * var(--u) - var(--blm, 0) * (100cqw - 320 * var(--u)) / 2);
    width: calc(var(--wm) * var(--u) + (var(--blm, 0) + var(--brm, 0)) * (100cqw - 320 * var(--u)) / 2);
    margin-top: calc(var(--tm) * var(--u)); }
  .ho { height: calc(var(--hhm) * var(--u)); }
  .rt [style*="--fs"] { font-size: calc(var(--fs) * .85 * var(--u)); }
  .rt [style*="--fm"] { font-size: calc(var(--fm) * var(--u)); }
  .rt [style*="--fm"] [style*="--fs"] { font-size: inherit; }
  .rt { overflow-wrap: break-word; }
  .recht-text { font-size: calc(12 * var(--u)); }
  .btn { font-size: calc(16 * var(--u)); }
  .textlink { font-size: calc(16 * var(--u)); }
  .textlink span { right: calc(-14 * var(--u)); width: calc(8 * var(--u)); }
  .adr p { font-size: calc(16 * var(--u)); }
  .recht p, a.fl { font-size: calc(14 * var(--u)); }
  .themen { padding: 0 20px 24px; }
  .fuss-themen { font-size: calc(14 * var(--u)); justify-content: flex-start; }
  .karte-laden { font-size: calc(16 * var(--u)); } .karte-laden small { font-size: calc(12 * var(--u)); }
  .formular { padding: calc(10 * var(--u)) calc(20 * var(--u)); }
  .f-zeile { flex-direction: column; gap: 0; }
  .f-vor, .f-nach { width: 100%; }
  .formular .feld { margin-bottom: calc(10 * var(--u)); }
  .formular label { font-size: calc(15 * var(--u)); line-height: calc(21 * var(--u)); margin-bottom: calc(4 * var(--u)); }
  .formular input { height: calc(56 * var(--u)); font-size: calc(16 * var(--u)); }
  .formular textarea { height: calc(98 * var(--u)); font-size: calc(16 * var(--u)); }
  .formular button[type=submit] { width: calc(151 * var(--u)); height: calc(50 * var(--u)); margin-top: calc(18 * var(--u)); }
  .formular .status { font-size: calc(16 * var(--u)); }
  .ip-band { padding: calc(30 * var(--u)) 0 calc(30 * var(--u)); }
  .kruemel { font-size: calc(13 * var(--u)); }
  .ip-band h1 { font-size: calc(28 * var(--u)); }
  .ip-lead { font-size: calc(17 * var(--u)); }
  .ip { padding: calc(30 * var(--u)) 0 calc(40 * var(--u)); }
  .ip-raster, .ip-raster:not(:has(.ip-bild)) { grid-template-columns: 1fr; gap: 30px; }
  .ip-text { font-size: calc(16 * var(--u)); }
  .ip-text h2 { font-size: calc(24 * var(--u)); margin-top: calc(30 * var(--u)); }
  .ip-faq summary { font-size: calc(18 * var(--u)); }
  .ip-cta { flex-wrap: wrap; gap: 16px; }
  .ip-cta .btn { height: calc(50 * var(--u)); padding: 0 calc(24 * var(--u)); }
  .ip-quellen, .ip-stand { font-size: calc(14 * var(--u)); }
  .ip-bild { position: static; } .ip-bild img { aspect-ratio: 4 / 3; }
  .nach-oben:not([hidden]) { display: flex; position: fixed; z-index: 40; right: 16px; bottom: 16px; width: 44px; height: 44px; align-items: center; justify-content: center; background: var(--petrol); color: #fff; opacity: 0; transition: opacity .5s; }
  .nach-oben.zeigen { opacity: 1; }
  .nach-oben svg { width: 24px; height: 24px; }
}