@import url("/assets/fonts/fonts.css");

:root{
  --sea:#00a7b6; --sea-d:#008a97; --deep:#0b4652; --lagoon:#4cc6d1; --mint:#e3f6f8;
  --ink:#222222; --muted:#5e6b6e; --line:#e1e1e1;
  --sand:#f8f8f8; --sand-2:#e1e1e1; --white:#fff;
  --sun:#f6b73c; --sun-d:#e59d17; --coral:#ef7b5a;
  --r:18px; --r-lg:28px; --shadow:0 12px 40px rgba(11,70,82,.12); --shadow-s:0 4px 16px rgba(11,70,82,.08);
  --wrap:1220px; --head:78px; --band-h:32px;
  --f-h:"Lato",Arial,Helvetica,sans-serif; --f-b:"Lato",Arial,Helvetica,sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;font-family:var(--f-b);font-size:17px;line-height:1.65;color:var(--ink);background:var(--white);-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{max-width:100%;height:auto;display:block}
a{color:var(--sea);text-decoration-thickness:1px;text-underline-offset:3px}
a:hover{color:var(--sea-d)}
h1,h2,h3,h4{font-family:var(--f-h);font-weight:700;line-height:1.15;color:var(--deep);margin:0 0 .55em;letter-spacing:-.01em}
h1{font-weight:900}
h1{font-size:clamp(2.2rem,4.6vw,4rem)}
h2{font-size:clamp(1.7rem,3vw,2.6rem)}
h3{font-size:1.3rem}
p{margin:0 0 1em}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 22px}
.narrow{max-width:820px}
.center{text-align:center}
.muted{color:var(--muted)}
.small{font-size:.88rem}
.skip{position:absolute;left:-999px;top:0;background:#fff;padding:8px 14px;z-index:100}
.skip:focus{left:10px}
/* Das Vorschau-Band.
   Karl am 03.11.2026 am Telefon: die Seite sehe "ziemlich schrecklich"
   aus. Das Erste, was man dort sieht, war das hier: das Band steht
   ueber der Kopfzeile, auf dem Telefon braucht sein Satz zwei bis drei
   Zeilen, und die Kopfzeile stand trotzdem auf `top:32px`. Das Logo lag
   damit halb unter dem Band, auf JEDER Seite.
   Jetzt steht das Band fest oben, die Kopfzeile genau darunter, und wie
   hoch es ist, misst site.js (--band-h) statt es zu raten. */
.staging{position:fixed;top:0;left:0;right:0;z-index:70;background:var(--coral);color:#fff;text-align:center;font-size:.85rem;line-height:1.3;padding:5px 10px}
.ic{width:1.15em;height:1.15em;flex:none;vertical-align:-.18em}
.eyebrow{display:inline-flex;align-items:center;gap:.45em;font-size:.82rem;letter-spacing:.14em;text-transform:uppercase;font-weight:600;color:var(--sea);margin:0 0 .9em}

/* Buttons */
.btn{--bg:var(--sea);--fg:#fff;display:inline-flex;align-items:center;justify-content:center;gap:.5em;padding:.78em 1.45em;border-radius:999px;border:0;background:var(--bg);color:var(--fg);font:600 1rem/1.2 var(--f-b);text-decoration:none;cursor:pointer;transition:transform .2s,box-shadow .2s,background .2s;white-space:nowrap}
.btn:hover{transform:translateY(-2px);box-shadow:0 10px 24px rgba(11,70,82,.18);color:var(--fg)}
.btn-sun{--bg:linear-gradient(135deg,#ffd06b,#f6b73c 55%,#f0a526);--fg:#2a2210;background:var(--bg)}
.btn-light{--bg:rgba(255,255,255,.92);--fg:var(--deep)}
.btn-ghost{--bg:transparent;--fg:var(--sea);box-shadow:inset 0 0 0 1.5px currentColor}
.btn-ghost:hover{--fg:var(--sea-d)}
.btn-danger{--bg:#c64b3a}
.btn-sm{padding:.55em 1.05em;font-size:.92rem}
.btn-lg{padding:.95em 1.8em;font-size:1.06rem}
.btn-block{display:flex;width:100%}
.btn[aria-disabled=true]{opacity:.45;pointer-events:none}
.btn-row{display:flex;flex-wrap:wrap;gap:12px}
.btn-row.center{justify-content:center}

/* Glass boxes */
/* Milchige Flaechen: EIN Wert, ueberall derselbe.
   Vorher standen fuenf verschiedene im Stil: .glass .26, .hero-card .26,
   .hero-full .hero-card .34, .hero-page/.hero-tour .hero-card .16 und
   .chip-glass .85. Karl am 02.11.2026: "diese milchige boxen zb. sind
   immer wieder anders von der transparenz und nicht gleich - das muss
   immer gleich sein und so dass man den text lesen kann und dennoch eine
   transparenz gegeben ist". .62 ist der Kompromiss: das Bild bleibt zu
   sehen, der Text steht ohne Muehe davor. */
:root{--glass-bg:rgba(255,255,255,.62);--glass-bg-dark:rgba(0,40,50,.52);--glass-blur:blur(8px) saturate(1.2);--glass-line:rgba(255,255,255,.75)}
.glass{background:var(--glass-bg);backdrop-filter:var(--glass-blur);-webkit-backdrop-filter:var(--glass-blur);border:1px solid var(--glass-line);border-radius:var(--r-lg);box-shadow:0 20px 60px rgba(8,50,60,.18)}
.glass-solid{background:#fff;border-radius:var(--r-lg);box-shadow:var(--shadow);padding:30px;border:1px solid var(--line)}

/* Header

   Karl am 03.11.2026: "der header zittert noch beim scrollen der
   einzelnen touren". Der Grund war nicht die Position, sondern der
   backdrop-filter: die Kopfzeile stand mit blur(14px), auf Tourseiten
   mit blur(16px) saturate(1.5) und ab Zeile 535 noch einmal mit
   blur(10px) ueber dem Bild, das sich beim Scrollen bewegt (Parallax).
   Der Browser muss dann jedes Einzelbild neu weichzeichnen, und genau
   das sieht man als Zittern.

   Gemessen: die Kopfzeile liegt seit Zeile 535 ohnehin auf
   rgba(0,167,182,.94) Markenfarbe. Bei 94 Prozent Deckkraft ist von
   einer Weichzeichnung nichts zu sehen - sie kostete also
   Rechenarbeit und brachte nichts. Sie ist jetzt ganz weg, die Farbe
   deckt voll, und die Kopfzeile bekommt mit translateZ(0) ihre eigene
   Ebene, damit sie beim Scrollen nicht neu gezeichnet wird. */
/* Karl am 03.11.2026, mit Film vom Bildschirm: "zittert immer noch im
   header", auf dem Macbook, in Safari. Aus dem Film herausgerechnet:
   in einzelnen Bildern fehlt der Kopfzeile ihre Farbe und das
   Herobild steht an ihrer Stelle - die Schrift der Kopfzeile ist
   dabei noch da. Es wackelt also nichts, es liegt fuer je ein Bild
   etwas falsch uebereinander.

   Warum: das Herobild lag auf z-index:-2, also HINTER dem Hintergrund
   seines eigenen Abschnitts, und bewegt sich seit dem 03.11.2026
   scrollgebunden im Compositor. Die Kopfzeile hatte mit translateZ(0)
   ebenfalls eine eigene Ebene. Zwei Ebenen, eine davon negativ
   gestapelt: welche von beiden oben liegt, rechnet Safari bei jedem
   Bild neu aus, und manchmal faellt es anders aus. Negative
   Stapelwerte sind hier jetzt weg (jede Ebene liegt ueber Null,
   Reihenfolge wie im Markup), und die Kopfzeile braucht keine eigene
   Ebene mehr: ihr backdrop-filter ist seit heute frueh fort, sie
   deckt voll. */
.site-header{position:sticky;top:0;z-index:50;height:var(--head);background:rgba(255,255,255,.94);border-bottom:1px solid rgba(11,70,82,.06);transition:box-shadow .3s}
.has-hero .site-header.is-over{position:fixed;left:0;right:0;top:0;background:rgba(255,255,255,.86);border-color:rgba(255,255,255,.6)}
.has-band .site-header,.has-band .has-hero .site-header.is-over{top:var(--band-h,32px)}
.has-band{padding-top:var(--band-h,32px)}
.has-band .hero-inner{padding-top:calc(var(--head) + var(--band-h,32px) + 20px)}
.site-header.scrolled{box-shadow:0 6px 24px rgba(11,70,82,.08)}
.hdr{height:100%;display:flex;align-items:center;gap:26px}
.brand{display:flex;align-items:center;gap:10px;flex:none}
.brand-mark{width:44px;height:44px}
.brand-word{width:170px;height:auto}
.brand-white{display:none}
.nav{display:flex;gap:4px;margin-left:auto}
.nav a{color:var(--ink);text-decoration:none;font-weight:700;padding:8px 13px;border-radius:999px;font-size:.98rem;transition:background .2s}
.nav a:hover{background:rgba(0,167,182,.1)}
.hdr-tools{display:flex;align-items:center;gap:10px}
.langs{position:relative}
.langs summary{list-style:none;display:flex;align-items:center;gap:5px;cursor:pointer;font-weight:600;font-size:.9rem;padding:8px 10px;border-radius:999px;color:var(--ink)}
.langs summary::-webkit-details-marker{display:none}
.langs-menu{position:absolute;right:0;top:calc(100% + 8px);background:#fff;border-radius:14px;box-shadow:var(--shadow);padding:8px;min-width:160px;display:grid}
.langs-menu a{padding:8px 12px;border-radius:9px;text-decoration:none;color:var(--ink)}
.langs-menu a:hover,.langs-menu a[aria-current]{background:var(--mint)}
.burger{display:none;background:none;border:0;padding:8px;cursor:pointer;color:var(--ink)}
.burger .ic{width:28px;height:28px}
.drawer{position:fixed;inset:0;z-index:70;background:linear-gradient(160deg,#0b4652,#00a7b6);color:#fff;padding:90px 28px 30px;display:flex;flex-direction:column;gap:26px;overflow:auto}
.drawer[hidden]{display:none}
.drawer nav{display:grid;gap:4px}
.drawer nav a{color:#fff;font-family:var(--f-h);font-size:1.7rem;text-decoration:none;padding:6px 0}
.drawer-langs{display:flex;gap:10px}
.drawer-langs a{color:#fff;border:1px solid rgba(255,255,255,.4);border-radius:999px;padding:6px 14px;text-decoration:none}
.drawer-langs a[aria-current]{background:#fff;color:var(--deep)}
body.menu-open{overflow:hidden}
body.menu-open .site-header{position:fixed;left:0;right:0;z-index:80;background:transparent;box-shadow:none;border:0}
body.menu-open .site-header .brand-white{display:block}body.menu-open .site-header .brand-teal{display:none}
body.menu-open .burger{color:#fff}

/* Hero */
.hero{position:relative;overflow:hidden;color:var(--ink);isolation:isolate}
.hero-full{min-height:100svh;display:flex;align-items:flex-end}
.hero-tour{min-height:78svh;display:flex;align-items:flex-end}
.hero-page{min-height:62svh;display:flex;align-items:flex-end}
/* Karl am 03.11.2026: "ich habe das gefuehl das das videao aif der
   startseite vergoessert ist" und "es zittert, ist glaube auch
   vergoessert und unscharf deswegen".

   Er hat recht, und es ist Rechnung, kein Gefuehl: damit sich eine
   Ebene ueberhaupt bewegen kann, ohne dass oben oder unten eine Kante
   sichtbar wird, muss sie hoeher sein als ihr Ausschnitt. Sie stand
   auf inset:-16%, war also 32 Prozent hoeher, und `object-fit:cover`
   vergroessert das Bild entsprechend auf das 1,32-fache. Bei einem
   Video sieht man das sofort als Unschaerfe.

   Jetzt 10 Prozent oben und unten, also das 1,20-fache, und die
   Bewegung entsprechend von 13 auf 7 Prozent zurueck (7% von 120% =
   8,4% des Ausschnitts, bleibt unter den 10% Rand). Weniger Weg heisst
   auch weniger Zittern. */
.hero-media,.band-media{position:absolute;inset:-10% 0;z-index:0;will-change:transform;backface-visibility:hidden;transform:translate3d(0,0,0)}
/* Wo der Browser scrollgebundene Bewegung selbst kann, laeuft sie im
   Compositor und haengt der Seite nicht mehr ein Bild hinterher. Das
   war die Ursache des Zitterns. Javascript ruehrt die Ebenen dann
   nicht mehr an (`css-parallax` an <html>). */
@supports (animation-timeline: view()){
  .css-parallax .hero-media,.css-parallax .band-media{
    animation:its-parallax linear both;animation-timeline:view();animation-range:cover 0% cover 100%}
  @keyframes its-parallax{from{transform:translate3d(0,-7%,0)}to{transform:translate3d(0,7%,0)}}
}
.hero-media img,.band-media img{width:100%;height:100%;object-fit:cover}
/* Video oder Bild, je nach Schirm. Siehe die Begruendung im Markup
   von tour.php (03.11.2026). */
.nur-klein{display:none}
@media (max-width:800px){.nur-gross{display:none!important}.nur-klein{display:block}}
/* Drei Reihen zum Wischen statt vierzehn Karten untereinander. */
.reihe{margin-bottom:26px}
.reihe>h2{display:flex;align-items:baseline;gap:8px;font-size:1.25rem;margin-bottom:12px}
.reihe>h2 small{font-weight:400;font-size:.85rem;color:#777}
.hero-shade{position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(0,40,50,.28) 0%,rgba(0,0,0,0) 26%,rgba(0,0,0,0) 60%,rgba(0,30,40,.18) 100%)}
.hero-inner{position:relative;z-index:2;width:100%;padding-top:calc(var(--head) + 30px);padding-bottom:64px}
.hero-card{max-width:640px;padding:36px 38px 32px;background:var(--glass-bg);backdrop-filter:var(--glass-blur);-webkit-backdrop-filter:var(--glass-blur)}
.hero-card h1{margin-bottom:.35em}
.hero-card h1 em{font-style:normal;color:var(--sea)}
.lead{font-size:1.16rem;color:#2d4847}
.hero-rating{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:18px 0 0;font-size:.95rem}
.crumbs{font-size:.85rem;color:var(--muted);margin-bottom:10px}
.crumbs a{color:var(--muted);text-decoration:none}
.scroll-cue{position:absolute;z-index:2;left:50%;bottom:22px;width:28px;height:44px;margin-left:-14px;border:2px solid rgba(255,255,255,.85);border-radius:20px}
.scroll-cue span{position:absolute;left:50%;top:8px;width:4px;height:8px;margin-left:-2px;background:#fff;border-radius:2px;animation:cue 1.8s infinite}
@keyframes cue{0%{opacity:0;transform:translateY(0)}40%{opacity:1}100%{opacity:0;transform:translateY(14px)}}

/* Stars */
.stars{display:inline-flex;gap:2px;vertical-align:-3px}
.stars svg{width:17px;height:17px}
.stars .on{fill:var(--sun)}
.stars .off{fill:#d9e2df}

/* Trust strip */
.trust{background:var(--white);border-bottom:1px solid var(--line)}
.trust-row{display:grid;grid-template-columns:repeat(5,1fr);gap:18px;padding-top:26px;padding-bottom:26px}
.trust-row>div{display:grid;grid-template-columns:auto 1fr;column-gap:12px;align-items:start;font-size:.9rem;line-height:1.35}
.trust-row .ic{grid-row:span 2;width:30px;height:30px;color:var(--sea);background:var(--mint);border-radius:50%;padding:6px}
.trust-row strong{font-weight:600;color:var(--deep)}
.trust-row span{color:var(--muted)}

/* Sections */
.section{padding:clamp(60px,8vw,110px) 0}
.section-sand{background:var(--sand)}
.page-top{padding-top:calc(var(--head) + 10px)}
.no-hero .page-top{padding-top:60px}
.sec-head{text-align:center;max-width:760px;margin:0 auto clamp(30px,4vw,54px)}
.sec-head p{color:var(--muted);font-size:1.08rem}
.split{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(30px,5vw,70px);align-items:center}
.split-img{grid-template-columns:.9fr 1.1fr}

/* Tour cards */
.tgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:28px}
.tcard{background:#fff;border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--shadow-s);display:flex;flex-direction:column;transition:transform .35s,box-shadow .35s;height:100%}
.tcard:hover{transform:translateY(-6px);box-shadow:var(--shadow)}
.tcard-img{position:relative;display:block;aspect-ratio:4/3;overflow:hidden}
.tcard-img img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s cubic-bezier(.2,.7,.2,1)}
.tcard:hover .tcard-img img{transform:scale(1.06)}
.chip{display:inline-flex;align-items:center;gap:6px;padding:6px 12px;border-radius:999px;font-size:.83rem;font-weight:700;background:var(--mint);color:var(--deep);border:0;cursor:pointer;font-family:inherit}
.chip-glass{position:absolute;left:14px;bottom:14px;background:var(--glass-bg);backdrop-filter:var(--glass-blur);-webkit-backdrop-filter:var(--glass-blur)}
.tcard-body{padding:20px 22px 22px;display:flex;flex-direction:column;flex:1}
.tcard-body h3{margin:.25em 0 .35em;font-size:1.35rem}
.tcard-body h3 a{color:var(--deep);text-decoration:none}
.tcard-body p{color:var(--muted);font-size:.97rem;flex:1}
.tcard-rate{font-size:.85rem;color:var(--muted);display:flex;align-items:center;gap:6px}
.tcard-foot{display:flex;align-items:center;justify-content:space-between;gap:10px;border-top:1px solid var(--line);padding-top:14px;margin-top:4px}
.price{font-weight:700;font-size:1.3rem;color:var(--deep);line-height:1.1}
.price small{font-weight:400;font-size:.78rem;color:var(--muted)}
.filter-chips{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-bottom:34px}
.filter-chips .chip{padding:9px 18px;font-size:.95rem;background:#fff;box-shadow:inset 0 0 0 1px var(--line)}
.filter-chips .chip.is-on{background:var(--sea);color:#fff;box-shadow:none}
.tgrid-item[hidden]{display:none}

/* Bands with parallax */
.band,.cta-band{position:relative;overflow:hidden;min-height:78svh;display:flex;align-items:center;isolation:isolate}
.band-inner{position:relative;z-index:2;width:100%;padding:90px 22px}
.band-right .band-inner{display:flex;justify-content:flex-end}
.quote-card{max-width:620px;padding:36px 38px;background:rgba(255,255,255,.26)}
.quote-card blockquote{font-family:var(--f-h);font-style:italic;font-weight:400;font-size:clamp(1.3rem,2.2vw,1.75rem);line-height:1.35;color:var(--deep);margin:0 0 18px}
.quote-card figcaption{color:var(--muted);margin-bottom:18px}
.quote-avatar{width:82px;height:82px;border-radius:50%;overflow:hidden;margin-bottom:16px;border:3px solid #fff;box-shadow:var(--shadow-s)}
.quote-avatar img{width:100%;height:100%;object-fit:cover}
.band-card{max-width:520px;padding:34px 36px;background:rgba(255,255,255,.28)}
.cta-band{min-height:64svh;text-align:center;color:#fff}
.cta-band::after{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(0,60,70,.25),rgba(0,60,70,.55))}
.cta-inner{position:relative;z-index:2;max-width:760px}
.cta-inner h2{color:#fff;font-size:clamp(2rem,4vw,3.2rem);text-shadow:0 2px 20px rgba(0,0,0,.25)}
.cta-inner p{font-size:1.15rem;text-shadow:0 1px 12px rgba(0,0,0,.3)}

/* Ticks */
.ticks{list-style:none;padding:0;margin:0 0 20px;display:grid;gap:8px}
.ticks li{display:flex;gap:10px;align-items:flex-start}
.ticks .ic{color:var(--sea);margin-top:.28em}
.ticks-x .ic{color:#b9867d}
.ticks.big li{font-size:1.1rem}
.dots{padding-left:1.1em;margin:0}
.dots li{margin-bottom:6px}
.dots li::marker{color:var(--sun-d)}

/* Why */
.why-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
.why-item{background:#f4fbfc;border:1px solid #e3f1f3;border-radius:var(--r-lg);padding:30px}
.why-ic{display:inline-flex;width:52px;height:52px;border-radius:16px;background:#fff;align-items:center;justify-content:center;color:var(--sea);margin-bottom:14px;box-shadow:var(--shadow-s)}
.why-ic .ic{width:26px;height:26px}
.why-item p{color:var(--muted);margin:0}

/* Reviews */
.rslider{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(300px,1fr);gap:22px;overflow-x:auto;scroll-snap-type:x mandatory;padding:6px 4px 26px;scrollbar-width:thin}
.rslider>*{scroll-snap-align:start}
.rgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:22px}
.rcard{background:#fff;border-radius:var(--r);padding:24px;margin:0;box-shadow:var(--shadow-s);border:1px solid var(--line);display:flex;flex-direction:column;gap:12px}
.rcard blockquote{margin:0;font-size:.98rem;color:#2c4644;flex:1}
.rcard figcaption{font-size:.88rem;color:var(--muted)}
.rcard figcaption strong{color:var(--deep)}
.reviews-sec{background:linear-gradient(180deg,#fff,#f4fbfc)}

/* Articles */
.agrid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
.acard{background:#fff;border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--shadow-s)}
.acard-img{display:block;aspect-ratio:16/10;overflow:hidden}
.acard-img img{width:100%;height:100%;object-fit:cover;transition:transform 1s}
.acard:hover .acard-img img{transform:scale(1.05)}
.acard-body{padding:20px 22px}
.acard-body h3 a{text-decoration:none;color:var(--deep)}
.acard-body p{color:var(--muted);font-size:.95rem;margin:0}

/* Facts bar */
.facts{background:var(--sea);color:#fff}
.facts-row{display:flex;flex-wrap:wrap;gap:10px 28px;padding-top:16px;padding-bottom:16px;font-size:.95rem}
.facts-row span{display:inline-flex;align-items:center;gap:8px}
.facts-row .ic{color:#fff3c4}

/* Tour layout */
.tour-layout{display:grid;grid-template-columns:minmax(0,1fr) 400px;gap:clamp(30px,4vw,60px);padding-top:50px;padding-bottom:80px;align-items:start}
.tour-main,.tour-aside{min-width:0}
.tour-aside{position:static}
.block{margin:0 0 50px}
.prose{font-size:1.06rem}
.prose h2{margin-top:1.4em}
.prose h3{margin-top:1.2em}
.prose ul{padding-left:1.2em}
.prose li{margin-bottom:.35em}
.intro p:first-child{font-size:1.2rem;color:#2d4847}
.hl-grid{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:1fr 1fr;gap:12px}
.hl-grid li{display:flex;gap:12px;align-items:flex-start;background:var(--sand);padding:14px 16px;border-radius:14px}
.hl-grid .ic{color:var(--sun-d);width:22px;height:22px;margin-top:2px}
.mosaic{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:150px;gap:10px;border-radius:var(--r-lg);overflow:hidden}
.mosaic a{display:block;overflow:hidden;position:relative}
.mosaic img{width:100%;height:100%;object-fit:cover;transition:transform .8s}
.mosaic a:hover img{transform:scale(1.06)}
.mosaic .m0{grid-column:span 2;grid-row:span 2}
.mosaic .m3{grid-column:span 2}
.timeline{list-style:none;padding:0;margin:0;counter-reset:s;position:relative}
.timeline::before{content:"";position:absolute;left:19px;top:8px;bottom:8px;width:2px;background:linear-gradient(var(--lagoon),var(--sun))}
.timeline li{position:relative;padding:0 0 22px 60px;counter-increment:s}
.timeline li::before{content:counter(s);position:absolute;left:0;top:0;width:40px;height:40px;border-radius:50%;background:#fff;border:2px solid var(--lagoon);color:var(--deep);font-weight:700;display:flex;align-items:center;justify-content:center}
.timeline h3{font-size:1.15rem;margin:.35em 0 .25em;font-family:var(--f-b);font-weight:600}
.timeline p{margin:0;color:#3d5856}
.incl{display:grid;grid-template-columns:1fr 1fr;gap:34px}
.incl h2{font-size:1.45rem}
.ptable{width:100%;border-collapse:collapse;background:#fff;border-radius:var(--r);overflow:hidden;box-shadow:var(--shadow-s);margin-bottom:12px}
.ptable th,.ptable td{padding:13px 18px;text-align:left;border-bottom:1px solid var(--line)}
.ptable th{background:var(--mint);font-weight:600;color:var(--deep);font-size:.92rem}
.faq details{border-bottom:1px solid var(--line);padding:4px 0}
.faq summary{cursor:pointer;list-style:none;padding:14px 36px 14px 0;font-weight:600;color:var(--deep);position:relative}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:6px;top:10px;font-size:1.5rem;color:var(--sea);transition:transform .2s}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details>div{padding:0 0 16px;color:#3d5856}

/* Booking widget */
.bookbox{background:#fff;border-radius:var(--r-lg);box-shadow:0 18px 60px rgba(11,70,82,.16);border:1px solid var(--line);overflow:hidden}
.bookbox-head{padding:20px 24px;background:linear-gradient(135deg,#e3f6f8,#fff8e6);display:flex;flex-direction:column;gap:2px}
.bookbox-head .muted{font-size:.88rem}
.bw{padding:18px 24px 22px}
.bw-step{margin-bottom:18px}
.bw-label{display:flex;align-items:center;gap:8px;font-weight:600;font-size:.92rem;color:var(--deep);margin-bottom:8px}
.cal{user-select:none}
.cal-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:6px;font-weight:600}
.cal-head button{background:var(--sand);border:0;width:34px;height:34px;border-radius:50%;cursor:pointer;font-size:1.1rem;color:var(--deep)}
.cal-head button:disabled{opacity:.3;cursor:default}
.cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:4px;text-align:center}
.cal-grid .dow{font-size:.72rem;color:var(--muted);text-transform:uppercase;padding:4px 0}
.cal-grid button{aspect-ratio:1;border:0;border-radius:10px;background:transparent;font:700 .92rem var(--f-b);color:#b8c6c3;cursor:default}
.cal-grid button.open{background:var(--mint);color:var(--deep);cursor:pointer}
.cal-grid button.open:hover{background:#c9eef2}
.cal-grid button.full{color:#d49a8b;text-decoration:line-through}
.cal-grid button.sel{background:var(--sea);color:#fff}
.cal-loading{opacity:.5}
.times{display:flex;flex-wrap:wrap;gap:8px}
.times button{border:1px solid var(--line);background:#fff;border-radius:999px;padding:7px 14px;font:700 .92rem var(--f-b);cursor:pointer;color:var(--ink)}
.times button.sel{background:var(--sea);border-color:var(--sea);color:#fff}
.stepper{display:grid;grid-template-columns:1fr 36px 40px 36px;align-items:center;gap:6px;margin-bottom:8px}
.stepper button{width:36px;height:36px;border-radius:50%;border:1px solid var(--line);background:#fff;cursor:pointer;color:var(--deep);display:flex;align-items:center;justify-content:center}
.stepper output{text-align:center;font-weight:700;font-size:1.05rem}
.ages{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.ages label{font-size:.82rem;color:var(--muted)}
.ages select{width:100%}
.extras label{display:flex;gap:10px;align-items:flex-start;padding:10px 12px;border:1px solid var(--line);border-radius:12px;margin-bottom:8px;cursor:pointer;font-size:.92rem}
.extras label small{display:block;color:var(--muted)}
.extras .x-price{margin-left:auto;font-weight:600;white-space:nowrap}
.extras select{margin:0 0 0 auto;width:auto;padding:6px 10px}
.extras label>span:not(.x-price){flex:1}
.bw-sum{background:var(--sand);border-radius:14px;padding:12px 14px;margin:6px 0 14px;font-size:.92rem}
.bw-sum:empty{display:none}
.bw-sum table{width:100%;border-collapse:collapse}
.bw-sum td{padding:3px 0}
.bw-sum td:last-child{text-align:right;white-space:nowrap}
.bw-sum .tot td{font-weight:700;font-size:1.1rem;color:var(--deep);border-top:1px solid var(--sand-2);padding-top:8px}
.bw-sum .err{color:#b44a38}
.bw-note{font-size:.82rem;color:var(--muted);text-align:center;margin:12px 0 0;display:flex;gap:4px;justify-content:center;align-items:center;flex-wrap:wrap}
.ask-wa{display:flex;align-items:center;justify-content:center;gap:8px;margin-top:14px;font-weight:700;text-decoration:none}
.mobile-book{display:none}

/* Forms */
.form label{display:block;font-size:.9rem;font-weight:700;color:var(--deep);margin-bottom:14px}
input,select,textarea{width:100%;font:inherit;font-size:1rem;padding:12px 14px;border:1px solid #d5e1dd;border-radius:12px;background:#fff;color:var(--ink);margin-top:5px}
input[type=checkbox],input[type=radio]{width:auto;margin:3px 0 0;accent-color:var(--sea);flex:none}
input:focus,select:focus,textarea:focus{outline:2px solid rgba(0,167,182,.35);border-color:var(--sea)}
.form .check{display:flex;gap:10px;align-items:flex-start;font-weight:400}
.form .check input{width:auto;margin-top:4px}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
fieldset{border:0;padding:0;margin:0 0 22px}
legend{display:flex;align-items:center;gap:8px;font-family:var(--f-h);font-size:1.35rem;color:var(--deep);margin-bottom:12px}
.hp{position:absolute;left:-9999px}
.alert{background:#fdebe6;color:#8a3324;padding:12px 16px;border-radius:12px}
.alert.ok{background:var(--mint);color:var(--deep)}

/* Checkout */
.steps{list-style:none;display:flex;gap:10px;padding:0;margin:0 0 30px;counter-reset:st;flex-wrap:wrap}
.steps li{counter-increment:st;display:flex;align-items:center;gap:8px;color:var(--muted);font-weight:700}
.steps li::before{content:counter(st);width:28px;height:28px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;background:var(--sand);font-size:.85rem}
.steps li.on{color:var(--deep)}.steps li.on::before{background:var(--sun)}
.steps li.done::before{background:var(--sea);color:#fff}
.steps li+li::after{content:none}
.co-grid{display:grid;grid-template-columns:minmax(0,1fr) 380px;gap:40px;align-items:start}
.co-sum{position:sticky;top:calc(var(--head) + 18px)}
.co-sum .co-img{border-radius:14px;aspect-ratio:16/10;object-fit:cover;width:100%;margin-bottom:14px}
.co-sum h2{font-size:1.4rem}
.co-facts{list-style:none;padding:0;margin:0 0 14px;display:grid;gap:6px;font-size:.95rem}
.co-facts li{display:flex;gap:8px;align-items:center}
.co-facts .ic{color:var(--sea)}
.co-lines{width:100%;border-collapse:collapse;font-size:.93rem;margin-bottom:10px}
.co-lines td{padding:5px 0;border-bottom:1px dashed var(--line)}
.co-lines td:last-child{text-align:right}
.co-lines .tot td{font-weight:700;font-size:1.12rem;border:0;padding-top:10px;color:var(--deep)}
.big-ic{width:84px;height:84px;margin:0 auto 20px;border-radius:50%;background:var(--sand);display:flex;align-items:center;justify-content:center;color:var(--sea)}
.big-ic.ok{background:var(--sea);color:#fff}
.big-ic .ic{width:44px;height:44px}
.left{text-align:left}

/* About */
.portrait{position:relative;border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--shadow);aspect-ratio:4/5}
.portrait img{width:100%;height:100%;object-fit:cover}
.since{position:absolute;right:18px;bottom:18px;background:var(--sun);color:#2a2210;font-weight:700;padding:10px 16px;border-radius:999px}
.stats-band{background:linear-gradient(135deg,#008a97,#00a7b6);color:#fff}
.stats-row{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;padding-top:50px;padding-bottom:50px;text-align:center}
.stats-row strong{display:block;font-family:var(--f-h);font-size:3rem;font-weight:900;color:#fff}
.team{display:grid;grid-template-columns:repeat(6,1fr);gap:18px}
.member{text-align:center;display:flex;flex-direction:column;align-items:center;gap:2px;font-size:.92rem;color:var(--muted)}
.member strong{color:var(--deep);font-size:1.05rem}
.avatar{width:84px;height:84px;border-radius:50%;background:linear-gradient(135deg,var(--lagoon),var(--sun));color:#fff;font-family:var(--f-h);font-size:2rem;display:flex;align-items:center;justify-content:center;margin-bottom:10px}

/* Contact */
.contact-cards{display:grid;gap:12px;margin:24px 0}
.ccard{display:flex;align-items:center;gap:14px;padding:16px 18px;border-radius:16px;background:var(--sand);text-decoration:none;color:var(--ink)}
.ccard .ic{width:30px;height:30px;color:var(--sea)}
.ccard small{display:block;color:var(--muted)}

/* Article */
.article-layout{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:50px;padding-top:56px;padding-bottom:70px;align-items:start}
.article-aside{position:sticky;top:calc(var(--head) + 18px)}
.mini-tour{display:flex;gap:12px;align-items:center;text-decoration:none;color:var(--ink);margin-bottom:12px}
.mini-tour img{width:72px;height:56px;object-fit:cover;border-radius:10px}
.mini-tour small{display:block;color:var(--muted)}
.byline{color:var(--muted);font-size:.9rem;border-top:1px solid var(--line);padding-top:16px;margin-top:30px}
.promise h3{display:flex;gap:8px;align-items:center}

/* Footer */
.site-footer{background:#00a7b6;color:#eafafc;position:relative}
.flag-rays{height:6px;background:linear-gradient(90deg,#003f87 0 20%,#fcd856 20% 40%,#d62828 40% 60%,#fff 60% 80%,#007a3d 80%)}
.foot{display:grid;grid-template-columns:1.4fr 1fr 1fr 1.1fr;gap:40px;padding-top:60px;padding-bottom:40px}
.foot h3{color:#fff;font-family:var(--f-b);font-size:.95rem;letter-spacing:.12em;text-transform:uppercase;font-weight:600}
.foot ul{list-style:none;padding:0;margin:0;display:grid;gap:7px}
.foot a{color:#fff;text-decoration:none}
.foot a:hover{color:#fff3c4;text-decoration:underline}
.foot-brand img{margin-bottom:16px}
.foot-brand p{font-size:.95rem}
.contact-list li{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.pay-note{font-size:.85rem;margin-top:14px;display:flex;gap:6px;align-items:center}
.foot-bottom{display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px;padding-top:18px;padding-bottom:26px;border-top:1px solid rgba(255,255,255,.3);font-size:.85rem}
.foot-bottom a{color:#fff}
/* Der Bot-Knopf unten rechts. Nicht mehr WhatsApp-gruen: er fuehrt
   nicht nach WhatsApp, sondern in die Auswahl (Karl, 03.11.2026). */
.bot-float{position:fixed;right:18px;bottom:18px;z-index:40;width:56px;height:56px;border-radius:50%;border:0;padding:0;cursor:pointer;background:var(--sea);color:#fff;display:flex;align-items:center;justify-content:center;box-shadow:0 10px 30px rgba(0,0,0,.25)}
.bot-float:hover{background:var(--sea-d)}
.bot-float .ic{width:28px;height:28px}
.bot-dialog{max-width:520px;width:calc(100% - 32px);max-height:88vh;border:0;border-radius:var(--r-lg);padding:26px;box-shadow:0 30px 80px rgba(0,0,0,.3)}
.bot-dialog::backdrop{background:rgba(5,25,30,.55)}
.bot-dialog h2{margin:0 0 6px;font-size:1.35rem}
.bot-dialog .cbox{margin-top:0}

/* Lightbox */
.lb{position:fixed;inset:0;z-index:90;background:rgba(5,25,30,.92);display:flex;align-items:center;justify-content:center;padding:30px}
.lb img{max-height:88vh;width:auto;border-radius:12px}
.lb button{position:absolute;background:rgba(255,255,255,.14);border:0;color:#fff;width:48px;height:48px;border-radius:50%;font-size:1.6rem;cursor:pointer}
.lb .lb-x{top:18px;right:18px}.lb .lb-p{left:18px;top:50%}.lb .lb-n{right:18px;top:50%}

/* Reveal */
.reveal{opacity:0;transform:translateY(24px);transition:opacity .9s ease,transform .9s cubic-bezier(.2,.7,.2,1)}
.reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;transition:none}.hero-media,.band-media{transform:none!important}html{scroll-behavior:auto}}

/* RTL */
[dir=rtl] .band-right .band-inner{justify-content:flex-start}
[dir=rtl] .timeline li{padding:0 60px 22px 0}
[dir=rtl] .timeline li::before{left:auto;right:0}
[dir=rtl] .timeline::before{left:auto;right:19px}
[dir=rtl] .bot-float{right:auto;left:18px}

/* Responsive */
@media (max-width:1100px){
  .nav{display:none}.burger{display:block}.hdr-tools{margin-left:auto}
  .tgrid,.agrid,.why-grid{grid-template-columns:1fr 1fr}
  .trust-row{grid-template-columns:repeat(3,1fr)}
  .tour-layout,.co-grid,.article-layout{grid-template-columns:1fr}

  /* Buchung nach oben. Karl am 03.11.2026: "bei den touren erscheint
     die bestellung und der kalender erst am ende, das ist schlecht
     fuer die conversion". Am Telefon fiel die rechte Spalte hinter
     den ganzen Artikel, und das sind auf einer Tourseite mehrere
     Bildschirmlaengen: Hoehepunkte, Bildergalerie, Karte, Planer,
     Ablauf, Preise, Bewertungen. Wer buchen will, soll nicht suchen.

     Mit `order` steht der Buchungskasten jetzt direkt unter den
     Fakten, also nach Bild, Titel und Preis. Die Leiste unten
     (.mobile-book) bleibt, sie fuehrt zurueck, wenn man weit
     gescrollt hat. */
  .tour-aside{order:-1}
  .tour-aside,.co-sum,.article-aside{position:static}
  .team{grid-template-columns:repeat(3,1fr)}
  .foot{grid-template-columns:1fr 1fr}
}
@media (max-width:720px){
  .scroll-cue{display:none}
  body{font-size:16px}
  :root{--head:66px}
  .brand-word{width:132px}.brand-mark{width:36px;height:36px}
  .hdr-cta{display:none}
  .tgrid,.agrid,.why-grid,.split,.split-img,.incl,.hl-grid,.row2,.stats-row{grid-template-columns:1fr}
  .stats-row{grid-template-columns:1fr 1fr}
  .trust-row{grid-template-columns:1fr 1fr}
  .hero-card,.quote-card,.band-card{padding:26px 22px}
  .hero-inner{padding-bottom:34px}

  /* Karl am 03.11.2026, am Telefon gesehen: "die milchboxen verdecken
     ueberall die videos im header". Stimmt: die Karte steht unten im
     Hero, aber bei 390px Breite braucht eine Ueberschrift in
     clamp(2.2rem, 4.6vw, 4rem) drei bis vier Zeilen, dazu Brotkrumen,
     Vorspann und Bewertung. Damit war vom Video kaum mehr etwas zu
     sehen.

     Deshalb am Telefon: kleinere Ueberschrift, engerer Rand, der
     Vorspann hoechstens drei Zeilen, und die Brotkrumen weg. Sie
     stehen im Markup fuer Google weiter drin, nur sichtbar sind sie
     nicht mehr: auf einer Tourseite weiss der Gast, wo er ist. Die
     Karte deckt damit rund ein Drittel statt zwei Drittel. */
  /* Die Faktenzeile stand in Markenfarbe direkt unter der ebenfalls
     farbigen Kopfzeile und ging am Telefon, wo sie fuenf Zeilen hoch
     ist, optisch in ihr auf. Deshalb hier hell mit Linie darueber. */
  .facts{background:var(--sand,#fff8e6);color:var(--ink);border-bottom:1px solid var(--line)}
  .facts-row{gap:8px 18px;font-size:.9rem;padding-top:12px;padding-bottom:12px}
  .facts-row .ic{color:var(--sea)}
  .facts-row a{color:var(--sea-d)}

  :root{--band-h:50px}   /* das Vorschau-Band braucht am Telefon zwei Zeilen */

  /* Das Bild oben steht fuer sich, die Karte darunter.
     Karl am 03.11.2026: "die milchboxen sind immer noch zu gross und
     ich denke die sollten einfach unter die videos wenn es mal wieder
     welche mobil gibt". Genau so: am Telefon ist der Hero kein
     Bildschirm voll mehr, auf den eine halbdurchsichtige Karte gelegt
     wird, sondern ein Bild in voller Breite und darunter, auf weissem
     Grund, Titel, Vorspann und Bewertung. Das Bild bleibt ganz zu
     sehen, der Text ist ohne Schein lesbar, und die Seite faengt
     sofort mit dem an, wovon sie lebt. */
  .hero,.hero-full,.hero-tour,.hero-page{min-height:0;display:block;overflow:visible}
  .hero-media{position:relative;inset:auto;height:44svh;min-height:240px;z-index:0;transform:none!important;animation:none!important;will-change:auto}
  .hero-shade{display:none}
  .hero-inner{padding-top:16px;padding-bottom:4px}
  .hero-card{max-width:none;background:#fff;border:0;box-shadow:none;padding:16px 0 0;backdrop-filter:none;-webkit-backdrop-filter:none;border-radius:0}
  .has-band .hero-inner{padding-top:16px}
  .hero-page .hero-card,.hero-tour .hero-card,.hero-full .hero-card{background:#fff}
  .hero-page .glass .lead,.hero-tour .glass .lead,.hero-page .glass h1,.hero-tour .glass h1{text-shadow:none}
  .hero-card{padding:20px 18px}
  .hero-card h1{font-size:clamp(1.6rem,6.4vw,2.2rem);line-height:1.15}
  .hero-card .crumbs{display:none}
  .hero-card .lead{font-size:.97rem}
  .hero-card .hero-rating{font-size:.9rem;margin-top:8px}
  .band,.cta-band{min-height:auto}
  .band-inner{padding:70px 16px}
  .mosaic{grid-template-columns:1fr 1fr;grid-auto-rows:120px}
  .mosaic .m3{grid-column:span 1}
  .mobile-book{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:45;background:#fff;box-shadow:0 -6px 24px rgba(0,0,0,.1);padding:12px 18px calc(12px + env(safe-area-inset-bottom));align-items:center;justify-content:space-between}
  .page-tour .bot-float{bottom:86px}
  .foot{grid-template-columns:1fr}
  .team{grid-template-columns:repeat(2,1fr)}
  .glass-solid{padding:22px}

  /* Drei Kleinigkeiten vom Telefon, 03.11.2026:
     der Bot-Knopf legte sich ueber den Text am rechten Rand, der
     Fliesstext stand zu luftig, und die Filterknoepfe der Tourenliste
     standen einzeln untereinander statt nebeneinander. */
  .bot-float{width:48px;height:48px;right:12px}
  .bot-float .ic{width:24px;height:24px}
  .prose{font-size:1rem;line-height:1.6}
  .prose p{margin:0 0 .9em}
  .filter-chips{display:flex;flex-wrap:wrap;justify-content:center;gap:8px}
  .filter-chips .chip{padding:8px 14px;font-size:.88rem;flex:0 1 auto}

  /* ------------------------------------------------------------------
     Die Tourseite am Telefon: falten, faerben, wischen.

     Karl am 03.11.2026: "so ist jede Seite wirklich sehr, sehr lang
     geworden ... vielleicht sollte man auch eigene Bereiche nicht alle
     untereinander, sondern vielleicht seitlich auch verschiebbar machen
     ... ob man die Abschnitte nicht besser durch farbliche Boxen
     unterteilt".

     Gemessen vorher: 20.309 Pixel, 24 Bildschirme.

     Drei Mittel, und jedes an der Stelle, an die es gehoert:
      1. FALTEN, wo es um Text geht (Ablauf, Leistungen, Preise, Fragen,
         der lange Text). Nichts verschwindet, es ist nur zu.
      2. WISCHEN, wo gleichartige Dinge nebeneinander liegen und keines
         wichtiger ist: Bilder, Bewertungen, weitere Touren. NICHT bei
         Listen, dort uebersieht man, was rechts aus dem Bild laeuft.
      3. FARBIGE BAENDER, damit man sieht, wo ein Thema aufhoert.
     ------------------------------------------------------------------ */

  /* 1. Falten, ohne Javascript */
  .falt-schalter{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
  .falt-inhalt{max-height:340px;overflow:hidden;-webkit-mask-image:linear-gradient(#000 62%,transparent);mask-image:linear-gradient(#000 62%,transparent)}
  .falt-schalter:checked ~ .falt-inhalt{max-height:none;-webkit-mask-image:none;mask-image:none}
  .falt-mehr{display:inline-flex;justify-self:start;align-self:start;width:-moz-fit-content;width:fit-content;align-items:center;gap:6px;margin-top:12px;padding:9px 18px;border-radius:999px;background:var(--mint);color:var(--deep);font-weight:700;font-size:.9rem;cursor:pointer;-webkit-tap-highlight-color:transparent}
  .falt-mehr::after{content:"";width:8px;height:8px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg) translateY(-2px)}
  .falt-schalter:checked ~ .falt-mehr::after{transform:rotate(225deg) translateY(-2px)}
  .falt-auf{display:none}
  .falt-schalter:checked ~ .falt-mehr .falt-zu{display:none}
  .falt-schalter:checked ~ .falt-mehr .falt-auf{display:inline}

  /* 2. Farbige Baender statt einer weissen Bahn */
  .tour-main>.block{padding:20px 16px;border-radius:18px;margin-bottom:16px}
  .tour-main>.block:nth-of-type(odd){background:var(--sand)}
  .tour-main>.block>h2{margin-top:0}

  /* 3. Wischen, wo es passt */
  /* Gewischt wird nur, wo es im Markup steht (.karussell), und bei der
     Bildergalerie einer Tour. NICHT auf der Tourenliste und nicht auf
     der Bewertungsseite: dort IST das Raster der Inhalt, und was rechts
     aus dem Bild laeuft, sieht niemand. */
  .mosaic,.karussell{display:flex;gap:12px;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scrollbar-width:none;padding-bottom:4px;border-radius:0}
  .mosaic::-webkit-scrollbar,.karussell::-webkit-scrollbar{display:none}
  .mosaic>a,.karussell>*{flex:0 0 84%;scroll-snap-align:center;min-width:0}
  .mosaic>a{height:230px;border-radius:14px;grid-column:auto;grid-row:auto}
  /* In der Wischleiste sind alle Karten so hoch wie die hoechste. Eine
     lange Bewertung machte damit aus einer vierzeiligen Karte einen
     Meter Weiss. Gesehen im Bild am 03.11.2026: deshalb sitzen die
     Karten oben und der Text endet nach sieben Zeilen. Die ganze
     Bewertung steht weiter auf der Bewertungsseite. */
  .karussell>*{align-self:start}
  .rcard blockquote{display:-webkit-box;-webkit-line-clamp:7;-webkit-box-orient:vertical;overflow:hidden}
  .mosaic .m0,.mosaic .m3{grid-column:auto;grid-row:auto}

  /* Die Zeile zum Springen */
  .sprung{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;padding:10px 16px;background:#fff;border-bottom:1px solid var(--line);position:sticky;top:calc(var(--head) + var(--band-h,0px));z-index:30}
  .sprung::-webkit-scrollbar{display:none}
  .sprung a{flex:0 0 auto;padding:7px 14px;border-radius:999px;background:var(--mint);color:var(--deep);text-decoration:none;font-weight:700;font-size:.85rem;white-space:nowrap}
  .block[id]{scroll-margin-top:calc(var(--head) + var(--band-h,0px) + 60px)}
}

/* Ab Tablet aufwaerts ist nichts zugeklappt und nichts gewischt: der
   Schalter wird nicht gezeigt, die Begrenzung ist aufgehoben, und die
   Sprungzeile gibt es nicht. Karl: "desktop dagegen super", daran wird
   nichts geaendert. */
@media (min-width:721px){
  .falt-schalter,.falt-mehr,.sprung{display:none}
  .falt-inhalt{max-height:none;-webkit-mask-image:none;mask-image:none}
}

/* Karl am 03.11.2026: "der gelbe hintergrund stoert mich, gleichens
   bei beaches". Die Karte stand in einem cremefarbenen Kasten
   (linear-gradient nach #fff8e6) mit 24px Rand. Beides weg, die Karte
   steht jetzt frei. */
.route-map{display:block;background:none;padding:0;text-align:center}
.route-map img{margin:0 auto;width:100%;height:auto}

.bg-video{width:100%;height:100%;object-fit:cover;display:block;background:#bfe6ec}

.dd{position:relative}
.dd>a{display:inline-flex;align-items:center;gap:5px}
.caret{width:7px;height:7px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg) translateY(-2px);opacity:.6}
.dd-menu{position:absolute;left:0;top:100%;margin-top:6px;background:#fff;border-radius:18px;box-shadow:0 24px 60px rgba(11,70,82,.18);padding:18px;display:none;gap:6px 26px;min-width:280px;z-index:60;border:1px solid var(--line)}
.dd-menu.dd-2{grid-template-columns:1fr 1fr;min-width:560px}
.dd-right{left:auto;right:-120px}
.dd:hover .dd-menu,.dd:focus-within .dd-menu{display:grid}
.dd-menu::before{content:"";position:absolute;left:0;right:0;top:-10px;height:10px}
.dd-menu strong{display:block;font-size:.78rem;text-transform:uppercase;letter-spacing:.1em;color:var(--sea);margin:2px 0 6px}
.dd-menu a{display:block;padding:6px 10px;border-radius:10px;color:var(--ink);text-decoration:none;font-size:.95rem;font-weight:400}
.dd-menu a:hover{background:var(--mint)}
.dd-foot{grid-column:1/-1;display:flex;gap:6px;border-top:1px solid var(--line);padding-top:10px;margin-top:6px}
.dd-foot a{display:inline-flex;gap:6px;align-items:center;color:var(--sea);font-weight:700}
.drawer details summary{font-family:var(--f-h);font-size:1.7rem;cursor:pointer;list-style:none;padding:6px 0}
.drawer details div{display:grid;padding:4px 0 10px 12px}
.drawer details div a{font-size:1.05rem;padding:5px 0;color:#eafafc;text-decoration:none}
.socials{font-size:.9rem;line-height:1.8}
.videos{display:grid;grid-template-columns:1fr 1fr;gap:22px;margin-bottom:34px}
.vcard{margin:0}
.vcard video{width:100%;border-radius:var(--r-lg);box-shadow:var(--shadow-s);background:#000;aspect-ratio:16/9}
.vcard figcaption{font-size:.92rem;color:var(--muted);margin-top:8px}
.gallery{columns:4 240px;column-gap:12px}
.gallery a{display:block;margin-bottom:12px;break-inside:avoid;border-radius:14px;overflow:hidden}
.gallery a[hidden]{display:none}
.gallery img{width:100%;height:auto;transition:transform .6s}
.gallery a:hover img{transform:scale(1.04)}
.smap{display:grid;grid-template-columns:repeat(3,1fr);gap:30px}
.smap ul{padding-left:1.1em}
.platforms{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin:14px 0 0}
.pf{display:inline-flex;align-items:center;gap:10px;background:#fff;border:1px solid var(--line);border-radius:999px;padding:8px 16px 8px 8px;text-decoration:none;color:var(--ink);font-size:.93rem;box-shadow:var(--shadow-s)}
.pf-logo{width:30px;height:30px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;color:#fff;font-weight:900}
.pf-g{background:#4285f4}.pf-ta{background:#34e0a1;color:#000}
.hero-card .platforms{justify-content:flex-start}
.audio-card{display:flex;gap:16px;align-items:center;background:var(--sand);border-radius:var(--r);padding:18px;margin:20px 0}
.audio-card audio{flex:1;min-width:200px}
.docs{display:flex;flex-wrap:wrap;gap:10px}
@media (max-width:1100px){.videos,.smap{grid-template-columns:1fr}}

.agrid-4{grid-template-columns:repeat(4,1fr)}
.acard{display:flex;flex-direction:column;border:1px solid var(--line)}
.acard[hidden]{display:none}
.acard-body{display:flex;flex-direction:column;flex:1}
.acard-body p{flex:1}
.acard-cat{flex:0!important;font-size:.78rem;text-transform:uppercase;letter-spacing:.12em;color:var(--sea);font-weight:700;margin:0 0 6px!important}
.acard-body h3{font-size:1.2rem}
.acard-more{display:inline-flex;align-items:center;gap:6px;margin-top:14px;font-weight:700;text-decoration:none}
.btn-sea{--bg:var(--sea);--fg:#fff}
@media (max-width:1100px){.agrid-4{grid-template-columns:1fr 1fr}}
@media (max-width:720px){.agrid-4{grid-template-columns:1fr}}

.glass .lead,.glass p,.glass figcaption{color:#1d2a2c}
.glass h1,.glass h2,.glass blockquote,.glass .lead,.glass p,.glass li{text-shadow:0 0 14px rgba(255,255,255,.9),0 0 3px rgba(255,255,255,.7)}
.intro-sec .split{grid-template-columns:.7fr 1.3fr}
.intro-portrait{width:min(360px,80%);aspect-ratio:1;border-radius:50%;overflow:hidden;margin:0 auto;box-shadow:var(--shadow);border:6px solid #fff;position:relative}
.intro-portrait img{width:100%;height:100%;object-fit:cover}
.certs{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin:18px 0}
.certs a{display:block;border-radius:14px;overflow:hidden;aspect-ratio:4/3;box-shadow:var(--shadow-s)}
.certs img{width:100%;height:100%;object-fit:cover}
@media (min-width:721px){.facts-row a{color:#fff}}
@media (max-width:720px){.intro-sec .split{grid-template-columns:1fr}.certs{grid-template-columns:1fr 1fr}}

.social-icons{display:flex;gap:10px;margin-top:18px}
.social-icons a{width:40px;height:40px;border-radius:50%;background:rgba(255,255,255,.18);display:flex;align-items:center;justify-content:center;color:#fff;transition:background .2s}
.social-icons a:hover{background:rgba(255,255,255,.32)}
.social-icons svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.foot .more{font-weight:700}
.foot .contact-list{margin-bottom:16px}
.foot-bottom .ic{vertical-align:-.2em}
.foot .btn-sun,.foot .btn-sun:hover{color:#2a2210;text-decoration:none}

/* Panorama bands */
.pano{position:relative;overflow:hidden;min-height:92svh;display:flex;align-items:flex-end;isolation:isolate;color:#fff}
.pano::after{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(0,0,0,0) 45%,rgba(0,35,45,.5) 100%)}
.pano-inner{position:relative;z-index:2;width:100%;padding:0 22px 64px;display:flex;align-items:flex-end;justify-content:space-between;gap:24px;flex-wrap:wrap}
.pano h2{color:#fff;font-size:clamp(2.4rem,6vw,5.2rem);font-weight:900;line-height:1;margin:0;text-shadow:0 4px 30px rgba(0,0,0,.35);max-width:900px}
.pano .pano-kicker{display:block;font-size:.85rem;letter-spacing:.2em;text-transform:uppercase;font-weight:700;margin-bottom:12px;text-shadow:0 1px 10px rgba(0,0,0,.4)}
.pano .glass{max-width:420px;padding:22px 24px}
.pano .glass p{color:#10262a;margin:0 0 12px}
/* Picture strip */
.strip{display:grid;grid-auto-flow:column;grid-auto-columns:min(78vw,900px);gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;padding:0 22px 20px;scrollbar-width:thin}
.strip a{scroll-snap-align:center;display:block;height:min(62vh,560px);border-radius:24px;overflow:hidden;position:relative}
.strip img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s}
.strip a:hover img{transform:scale(1.04)}
.strip span{position:absolute;left:18px;bottom:16px;color:#fff;font-weight:900;font-size:1.4rem;text-shadow:0 2px 16px rgba(0,0,0,.5)}
@media (max-width:720px){.pano{min-height:72svh}.pano-inner{padding-bottom:36px}.strip a{height:48vh}}

/* Header in brand colour with white text and logo */
.site-header,.site-header.scrolled,.has-hero .site-header.is-over{background:#00a7b6;border-color:rgba(255,255,255,.15)}
.site-header.scrolled{box-shadow:0 6px 24px rgba(0,60,70,.18)}
.site-header .brand-white{display:block}
.site-header .brand-teal{display:none}
.site-header .nav>a,.site-header .dd>a,.site-header .langs summary,.site-header .burger{color:#fff}
.site-header .nav>a:hover,.site-header .dd>a:hover,.site-header .dd:hover>a{background:rgba(255,255,255,.16)}
.site-header .dd-menu a,.site-header .langs-menu a{color:var(--ink)}
.pano .glass{background:var(--glass-bg-dark);border-color:rgba(255,255,255,.35)}
.pano .glass p{color:#fff;text-shadow:0 1px 8px rgba(0,0,0,.4)}

.map-wrap{position:relative;max-width:560px;margin:0 auto}
.spot{position:absolute;width:12px;height:12px;margin:-6px 0 0 -6px;border-radius:50%;background:#ff3d7f;box-shadow:0 0 0 2px #fff;cursor:pointer;animation:spotPulse 6s infinite}
.spot::after{content:"";position:absolute;inset:-3px;border-radius:50%;border:2px solid #ff3d7f;animation:spotRing 6s infinite;animation-delay:inherit}
.spot em{position:absolute;left:50%;bottom:calc(100% + 10px);transform:translateX(-50%);background:var(--deep);color:#fff;font-style:normal;font-size:.8rem;font-weight:700;white-space:nowrap;padding:5px 10px;border-radius:8px;opacity:0;pointer-events:none;transition:opacity .2s}
.spot:hover em,.spot:focus em{opacity:1}
/* Die Punkte auf der Karte: ein ruhiger Herzschlag, kein Blinken.
   Karl am 03.11.2026: "die punkte auf der karte die aufkommen sind zu
   schnell und machen einen hektisch". Vorher lief der Takt in 2,2
   Sekunden durch, mit 0,35 Sekunden Versatz, und der Ring wuchs auf
   das Dreifache. Jetzt dauert eine Runde 6 Sekunden, die Bewegung
   passiert in der ersten Viertelrunde und danach ist Ruhe, der Ring
   waechst flacher, und der Versatz von 0,9 Sekunden ueber acht Punkte
   (tour.php) sorgt dafuer, dass nicht die halbe Karte gleichzeitig
   pulsiert. Wer Bewegung abgeschaltet hat, sieht gar keine. */
@keyframes spotPulse{0%{transform:scale(1)}8%{transform:scale(1.16)}20%,100%{transform:scale(1)}}
@keyframes spotRing{0%{transform:scale(1);opacity:.7}25%,100%{transform:scale(2.2);opacity:0}}
@media (prefers-reduced-motion:reduce){.spot,.spot::after{animation:none}}
.pf-own{background:#fff;overflow:hidden}.pf-own img{width:30px;height:30px}

.marquee{overflow:hidden;width:100%;mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);-webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.marquee-track{display:flex;gap:14px;width:max-content;animation:marquee 140s linear infinite}
.marquee:hover .marquee-track{animation-play-state:paused}
.marquee a{flex:none;height:min(42vh,380px);aspect-ratio:3/2;border-radius:20px;overflow:hidden;display:block}
.marquee img{width:100%;height:100%;object-fit:cover;transition:transform .8s}
.marquee a:hover img{transform:scale(1.05)}
@keyframes marquee{from{transform:translateX(0)}to{transform:translateX(calc(-50% - 7px))}}
@media (prefers-reduced-motion:reduce){.marquee-track{animation:none}.marquee{overflow-x:auto}}
@media (max-width:720px){.marquee a{height:30vh}.marquee-track{animation-duration:90s}}

.fee-chip{border:0;background:#fff3d6;color:#7a5a10;font:700 .72rem/1 var(--f-b);padding:5px 9px;border-radius:999px;cursor:pointer;vertical-align:middle;margin-left:6px}
.fee-note{display:flex;gap:14px;background:#fff8e6;border:1px solid #f3e1b4;border-radius:var(--r);padding:18px 20px;margin:0 0 40px}
.fee-note .ic{color:var(--sun-d);width:26px;height:26px;flex:none}
.fee-note p{margin:4px 0 12px;color:var(--muted)}
.fee-dialog{max-width:760px;width:calc(100% - 32px);max-height:85vh;border:0;border-radius:var(--r-lg);padding:30px;box-shadow:0 30px 80px rgba(0,0,0,.3)}
.fee-dialog::backdrop{background:rgba(5,25,30,.55)}
.fee-dialog table{width:100%;border-collapse:collapse;font-size:.95rem}
.fee-dialog td,.fee-dialog th{border-bottom:1px solid var(--line);padding:8px 6px;text-align:left}
.fee-x{position:sticky;top:0;float:right;border:0;background:var(--sand);width:38px;height:38px;border-radius:50%;font-size:1.4rem;cursor:pointer}
/* Route planner */
.planner h2 svg{width:26px;height:26px;vertical-align:-4px;color:var(--sea)}
.pl-grid{display:grid;grid-template-columns:1.25fr 1fr;gap:24px;align-items:start;margin-top:14px}
.pl-start{display:block;font-weight:700;margin-bottom:12px}
.pl-start select{display:block;width:100%;margin-top:6px;padding:10px 12px;border:1px solid var(--line);border-radius:12px;font:inherit;background:#fff}
.pl-stops{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.pl-stop{display:flex;align-items:center;gap:8px;padding:10px 12px;border:1px solid var(--line);border-radius:12px;background:#fff;cursor:pointer;transition:border-color .2s,background .2s}
.pl-stop input,.pl-lunch input{width:18px;height:18px;flex:none;accent-color:var(--sea);margin:0}
.pl-stop span{flex:1;font-weight:600;font-size:.95rem;line-height:1.2}
.pl-stop small{color:#777;white-space:nowrap}
.pl-stop:has(input:checked){border-color:var(--sea);background:var(--mint)}
.pl-lunch{display:flex;align-items:center;gap:8px;margin-top:12px;font-weight:600}
.pl-out{position:sticky;top:90px;padding:24px}
.pl-bar{position:relative;height:14px;border-radius:99px;background:#eef3f4;margin:4px 0 18px}
.pl-bar i{position:absolute;left:0;top:0;bottom:0;border-radius:99px;background:var(--sea);transition:width .35s,background .35s}
.pl-bar b{position:absolute;top:-5px;bottom:-5px;width:3px;margin-left:-1px;background:var(--deep);border-radius:2px}
.planner[data-state=tight] .pl-bar i{background:var(--sun)}
.planner[data-state=over] .pl-bar i{background:var(--coral)}
.pl-out table{width:100%;border-collapse:collapse;margin-bottom:10px}
.pl-out td{padding:6px 0;border-bottom:1px solid var(--line)}
.pl-out td:last-child{text-align:right;font-weight:700}
.pl-out tr.tot td{font-size:1.1rem;border-bottom:0}
.pl-verdict{font-weight:700;padding:10px 12px;border-radius:12px;background:var(--mint);color:var(--deep)}
.planner[data-state=tight] .pl-verdict{background:#fff4dc}
.planner[data-state=over] .pl-verdict{background:#fde8e2;color:#8a2f17}
.spot.is-on{background:var(--sea);animation:none;transform:scale(1.5)}
.spot.is-on::after{border-color:var(--sea)}
.spot.is-on em{opacity:1;font-size:.7rem;padding:3px 7px;background:var(--sea)}
@media (max-width:900px){.pl-grid{grid-template-columns:1fr}.pl-out{position:static}}
@media (max-width:520px){.pl-stops{grid-template-columns:1fr}}
/* planner v2: photo stop or stay */
.pl-stops{grid-template-columns:1fr}
.pl-stop{justify-content:space-between;cursor:default;gap:12px;padding:8px 10px 8px 14px}
.pl-n{flex:1;font-weight:600;line-height:1.25}
.pl-n small{display:block;font-weight:400;font-size:.8rem;color:#777;margin-top:2px;white-space:normal}
/* Das kleine i hinter einem Halt fuehrt zum Artikel ueber den Ort.
   Es sitzt in der Zeile des Namens, nimmt aber keine Breite weg
   (der Name darf weiter umbrechen), und hat genug Rand, dass ein
   Finger es trifft, ohne den Halt daneben zu erwischen. */
.pl-mehr{display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;margin:-6px 0 -6px 5px;vertical-align:-7px;border-radius:50%;color:var(--sea);opacity:.75}
.pl-mehr:hover,.pl-mehr:focus-visible{opacity:1;background:var(--mint)}
.pl-mehr .ic{width:17px;height:17px}
/* Der Hinweis unter dem Ortsnamen darf umbrechen. `.pl-stop small`
   steht auf white-space:nowrap, das ist fuer die Zeitangabe in den
   Knoepfen gedacht und galt bis zum 03.11.2026 auch hier: "Wild and
   beautiful, not always good for swimming" stand damit in einer
   Zeile von 632px, und die ganze Seite liess sich am Telefon
   seitwaerts schieben (gemessen: Fenster 390px, Dokument 669px). */
.pl-seg{display:flex;gap:6px;flex:none}
.pl-seg button{display:inline-flex;align-items:center;gap:5px;border:1px solid var(--line);background:#f8f8f8;color:var(--ink,#222);border-radius:10px;padding:7px 10px;font:inherit;font-size:.85rem;font-weight:600;cursor:pointer;white-space:nowrap;transition:background .2s,border-color .2s,color .2s}
.pl-seg button svg{width:15px;height:15px}
.pl-seg button small{font-weight:400;color:#777}
.pl-seg button:hover{border-color:var(--sea)}
.pl-seg button.is-on{background:var(--sea);border-color:var(--sea);color:#fff}
.pl-seg button.is-on small{color:#e6fbfd}
.pl-stop.is-on{border-color:var(--sea);background:var(--mint)}
@media (max-width:520px){.pl-stop{flex-wrap:wrap}.pl-seg{width:100%}.pl-seg button{flex:1;justify-content:center}}
.pl-grid{grid-template-columns:1fr}
.pl-out{position:sticky;top:auto;bottom:12px;z-index:5;box-shadow:0 -6px 30px rgba(11,70,82,.12)}
.pl-out table{margin-bottom:6px}
.pl-grid>div{min-width:0}
.pl-seg{flex-wrap:wrap;justify-content:flex-end}
.pl-stop{flex-wrap:wrap}
.pl-out{padding:14px 18px;border-radius:18px}
.pl-out .pl-bar{margin:2px 0 10px;height:10px}
.pl-nums{display:flex;flex-wrap:wrap;gap:6px 18px;font-size:.92rem}
.pl-nums b{white-space:nowrap}
.pl-nums .tot{margin-left:auto;font-size:1.05rem}
.pl-out .pl-verdict{margin:10px 0 0;padding:8px 12px;font-size:.92rem}
.pl-out .small{margin:8px 0 0}
.pl-foot{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.pl-foot p{flex:1;min-width:220px;margin:0}

/* Routenkarte rechts neben dem Tagesplaner

   Erster Versuch am 03.11.2026 war falsch: die Karte bekam eine Spalte
   INNERHALB der Hauptspalte. Die Tourseite hat aber schon eine rechte
   Spalte von 400px fuer die Buchung, also blieben fuer Planer und
   Karte zusammen nur rund 770px. Die Stopp-Zeilen passten nicht mehr
   in ihre Spalte, liefen darueber hinaus und legten sich ueber die
   Karte, und die Karte selbst war zu klein zum Lesen. Karl: "bitte
   wirklich rechts, muss auch nicht mitwandern, ist unlserlich weil zu
   klein".

   Es gilt jetzt: der Planer zieht sich auf breiten Fenstern ueber die
   Buchungsspalte hinweg auf die volle Breite (negativer Rand rechts,
   genau 400px plus der Abstand des Seitenrasters). Das geht, weil die
   Buchungsspalte weit oben endet und neben dem Planer ohnehin nichts
   mehr steht. Damit hat der Planer rund 780px und die Karte rund
   380px, also lesbar.

   Nicht klebend (sticky): Karl braucht es nicht, und ein mitwanderndes
   Bild neben einer langen Liste springt beim Scrollen.

   Unter 1100px Fensterbreite bleibt alles untereinander und die Karte
   steht oben drueber, am Telefon sowieso. */
.pl-cols{display:grid;grid-template-columns:1fr;gap:clamp(16px,2.2vw,30px);align-items:start;margin-top:14px}
.pl-main{min-width:0}
.pl-karte{min-width:0;order:-1}
.pl-karte h3{margin:0 0 10px;font-size:1.1rem}
.pl-karte .map-wrap{max-width:420px}
@media (min-width:1100px){
  .planner{margin-right:calc(-400px - clamp(30px,4vw,60px))}
  .pl-cols{grid-template-columns:minmax(0,1fr) minmax(300px,400px)}
  .pl-karte{order:0}
  .pl-karte .map-wrap{max-width:100%}
}
.pl-karte p{margin:8px 0 0}
/* Die Stopp-Liste lief am Telefon ueber den rechten Rand hinaus, und
   zwar die ganze Seite mit: gemessen am 03.11.2026 bei 390px
   Fensterbreite war eine Zeile 658px breit und das Dokument 680px.
   Grund: ein Rasterfeld ist von sich aus mindestens so breit wie sein
   Inhalt (min-width:auto), und die Knopftexte stehen auf
   white-space:nowrap. Also duerfen die Felder schrumpfen, und auf
   schmalen Schirmen darf der Knopftext umbrechen. */
.pl-stop,.pl-n,.pl-seg{min-width:0}
@media (max-width:520px){.pl-seg button{white-space:normal}}

/* Der Hinweis, dass der Planer nichts verlangt

   Karl am 03.11.2026: "beim tag planen noch ein hinweis das es keine
   pflicht ist, sondern eine option zum spielen aber auch zum
   uebernehmen bei der buchung, ggf. muss man es garnicht beachten und
   der tourguide entscheiodet oder man entscheidt am tourtag - ist
   wichtig". Steht deshalb ueber dem Planer und nicht im Kleingedruckten
   darunter. */
.foot-wa{display:inline-flex;align-items:center;gap:5px;margin-left:8px;padding:2px 9px;border-radius:999px;background:rgba(255,255,255,.14);font-size:.85rem;font-weight:700;white-space:nowrap}
.foot-wa svg{width:15px;height:15px}
.pl-optional{margin:10px 0 0;padding:12px 15px;border-radius:14px;background:var(--mint);color:var(--deep);font-size:.95rem;line-height:1.5}
.audio-card audio{width:100%}
.press-text{margin-top:12px}
.press-text summary{cursor:pointer;font-weight:700;color:var(--sea-d)}
.press-text .prose{margin-top:10px;font-size:.95rem}
.press-text h3{font-size:1.1rem}
/* vehicles page */
.veh-table{width:100%;border-collapse:collapse;margin:10px 0 26px}
.veh-table th{text-align:left;font-size:.85rem;text-transform:uppercase;letter-spacing:.04em;color:#777;padding:8px 10px;border-bottom:2px solid var(--line)}
.veh-table td{padding:10px;border-bottom:1px solid var(--line);vertical-align:middle}
.veh-cell{display:flex;align-items:center;gap:12px;font-weight:600}
.veh-ico{width:78px;height:auto;flex:none;margin:0!important;border-radius:0!important;box-shadow:none!important}
.veh-fig{display:flex;gap:18px;align-items:center;flex-wrap:wrap;margin:6px 0 18px;padding:18px 22px;background:var(--mint);border-radius:var(--r)}
.veh-sym{width:min(260px,60%);height:auto;margin:0!important;border-radius:0!important;box-shadow:none!important}
.veh-photo{flex:1;min-width:220px;max-width:360px;height:auto;border-radius:14px!important;margin:0!important}
@media (max-width:560px){.veh-table th:nth-child(3),.veh-table td:nth-child(3){display:none}.veh-ico{width:56px}}
/* planned route in checkout */
.co-plan{background:var(--mint);border-radius:var(--r);padding:20px 22px;margin:0 0 24px}
.co-plan h3{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:0 0 12px;font-size:1.15rem}
.co-plan h3 svg{width:22px;height:22px;color:var(--sea)}
.co-plan h3 small{font-weight:400;font-size:.85rem;color:#666;margin-left:auto}
.co-plan ol{margin:0;padding:0;list-style:none;counter-reset:st}
.co-plan li{counter-increment:st;display:grid;grid-template-columns:28px 1fr auto auto;gap:10px;align-items:center;padding:8px 0;border-bottom:1px solid rgba(0,120,130,.15)}
.co-plan li::before{content:counter(st);width:24px;height:24px;border-radius:50%;background:var(--sea);color:#fff;font-size:.78rem;font-weight:700;display:grid;place-items:center}
.co-plan li .n{font-weight:600}
.co-plan li .m{font-size:.85rem;color:#555;display:inline-flex;align-items:center;gap:4px}
.co-plan li .m svg{width:14px;height:14px}
.co-plan li .d{font-weight:700;white-space:nowrap;min-width:70px;text-align:right}
.co-plan-sum{display:flex;flex-wrap:wrap;gap:6px 18px;margin:12px 0 8px}
.co-plan-sum .tot{margin-left:auto;font-size:1.05rem}
.co-plan-note{margin:6px 0 4px;font-weight:600;color:var(--deep)}
@media (max-width:560px){.co-plan li{grid-template-columns:28px 1fr auto}.co-plan li .m{grid-column:2;grid-row:2}}
.planner[data-state=extra] .pl-bar i{background:var(--sun)}
.planner[data-state=extra] .pl-verdict{background:#fff4dc}
/* pickup search */
.pk{position:relative}
.pk input{width:100%}
.pk-list{position:absolute;left:0;right:0;top:calc(100% + 4px);z-index:30;margin:0;padding:6px;list-style:none;background:#fff;border:1px solid var(--line);border-radius:14px;box-shadow:0 14px 40px rgba(11,70,82,.16);max-height:380px;overflow:auto;overscroll-behavior:contain}
.pk-list li{padding:9px 12px;border-radius:10px;cursor:pointer;line-height:1.25}
.pk-list li strong{display:block;font-weight:600;font-size:.95rem}
.pk-list li small{display:block;color:#777;font-size:.8rem;margin-top:2px}
.pk-list li.on,.pk-list li:hover{background:var(--mint)}
.pk-list li.pk-sp strong{color:var(--sea-d)}
.pk-list li.pk-none{cursor:default;color:#777;font-size:.9rem}
.pk-list li.pk-none:hover{background:none}
.pk-hint{margin:6px 0 12px}
.pk-list li.pk-info{cursor:default;background:var(--mint);color:var(--deep);font-size:.9rem;margin-bottom:4px}
.pk-list li.pk-head{cursor:default;font-size:.75rem;text-transform:uppercase;letter-spacing:.05em;color:#888;padding:8px 12px 2px}
.pk-list li.pk-info:hover,.pk-list li.pk-head:hover{background:var(--mint)}
.pk-list li.pk-head:hover{background:none}
/* longer menu labels (es/it): keep one line */
.nav a,.nav .dd>a{white-space:nowrap}
@media (max-width:1320px){.nav a{padding:8px 10px;font-size:.93rem}.nav{gap:2px}}
/* home page video band */
.clips{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.clip{position:relative;margin:0;border-radius:var(--r);overflow:hidden;aspect-ratio:16/9;background:#dfeff1;box-shadow:var(--shadow-s)}
.clip video{width:100%;height:100%;object-fit:cover;display:block}
.clip-link{position:absolute;inset:0;z-index:3}
.clip figcaption{position:absolute;left:10px;bottom:10px;background:rgba(0,0,0,.45);color:#fff;font-size:.8rem;font-weight:700;padding:4px 10px;border-radius:99px;backdrop-filter:blur(4px)}
@media (max-width:900px){.clips{grid-template-columns:1fr 1fr;gap:10px}}
.hero-tour .hero-media video{width:100%;height:100%;object-fit:cover}
/* hero boxes: same look on every page (home sits on a bright video, sub pages on photos) */
.hero-full .hero-card{background:var(--glass-bg)}
.hero-page .hero-card,.hero-tour .hero-card{background:var(--glass-bg);backdrop-filter:var(--glass-blur);-webkit-backdrop-filter:var(--glass-blur)}
.hero-page .glass .lead,.hero-tour .glass .lead,.hero-page .glass h1,.hero-tour .glass h1{text-shadow:0 0 10px rgba(255,255,255,.75),0 0 2px rgba(255,255,255,.6)}
/* contact box: three ways */
.cbox-q{font-weight:700;color:var(--deep);margin:0 0 10px}
.cbox-ways{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.cbox-ways>input{position:absolute;opacity:0;pointer-events:none}
.cbox-ways>label{display:flex;align-items:center;justify-content:center;gap:6px;padding:11px 8px;border-radius:12px;background:var(--sand);cursor:pointer;font-weight:700;font-size:.92rem;color:var(--deep);text-align:center}
.cbox-ways>label .ic{width:20px;height:20px}
.cbox-ways>input:checked+label{background:var(--sea);color:#fff}
.cbox-ways>input:focus-visible+label{outline:2px solid var(--sea);outline-offset:2px}
.cbox-panel{grid-column:1/-1;margin-top:10px;display:none}
.cbox[data-way=whatsapp] [data-for=whatsapp]{display:grid;gap:10px}
.cbox[data-way=email] .cbox-form,.cbox[data-way=web] .cbox-form,.cbox:not([data-way]) .cbox-form{display:block}
.cbox[data-way=email] .cb-only-web,.cbox[data-way=web] .cb-only-email{display:none}
.cb-points{list-style:none;padding:0;margin:20px 0;display:grid;gap:10px}
.cb-points li{display:flex;gap:10px;align-items:flex-start}
.cb-points .ic{width:22px;height:22px;color:var(--sea);flex:none}
.ask-more{display:block;text-align:center;margin-top:8px;font-size:.9rem;color:var(--muted)}
/* private conversation */
/* Der Gespraechsverlauf rollt in sich, nicht die ganze Seite: so
   bleibt das Schreibfeld sichtbar und die neueste Nachricht steht
   beim Laden schon da (site.js setzt scrollTop). */
.thread{display:grid;gap:12px;margin:24px 0;max-height:min(62vh,560px);overflow-y:auto;overscroll-behavior:contain;padding-right:8px}
.msg{max-width:80%;padding:12px 16px;border-radius:16px;background:var(--sand)}
.msg-team{background:var(--mint)}
.msg-guest{margin-left:auto}
.msg-who{font-size:.8rem;color:var(--muted);margin-bottom:4px}
/* review form */
.stars{border:0;padding:0;margin:0 0 14px;display:flex;flex-direction:row-reverse;justify-content:flex-end;gap:4px}
.stars legend{font-weight:700;color:var(--deep);margin-bottom:4px;font-size:.9rem}
.stars input{position:absolute;opacity:0}
.stars label{font-size:2rem;color:#d5d9d6;cursor:pointer;margin:0;line-height:1}
.stars input:checked~label,.stars label:hover,.stars label:hover~label{color:#f2b33d}
.rv-choice{border:0;padding:0;margin:0 0 14px}
.rv-choice legend{font-weight:700;color:var(--deep);margin-bottom:6px;font-size:.9rem}
.rv-choice .check{margin-bottom:6px}
@media(max-width:560px){.cbox-ways>label{flex-direction:column;font-size:.82rem}.msg{max-width:100%}}
.form .stars label{display:inline;margin:0}
.cb-split{align-items:start}

/* Blaetterei unter langen Listen (Bewertungen).
   Eine Reihe, mittig, am Telefon mit kleineren Feldern; die Zahlen
   sind gross genug zum Tippen (44px sind die Mindestgroesse, die
   Apple fuer Finger nennt). */
.blaettern{display:flex;align-items:center;justify-content:center;gap:10px;flex-wrap:wrap;margin:34px 0 6px}
.blaettern a,.blaettern span{font-size:.95rem;line-height:1}
.blaettern .bl-pfeil{display:inline-flex;align-items:center;min-height:44px;padding:0 16px;border:1px solid var(--line);border-radius:999px;background:#fff;color:var(--deep);text-decoration:none;font-weight:700}
.blaettern .bl-pfeil:hover{background:var(--sand)}
.blaettern .bl-aus{opacity:.35;pointer-events:none}
.blaettern .bl-zahlen{display:inline-flex;align-items:center;gap:4px}
.blaettern .bl-zahlen a,.blaettern .bl-hier{display:inline-flex;align-items:center;justify-content:center;min-width:44px;min-height:44px;border-radius:999px;text-decoration:none;color:var(--deep)}
.blaettern .bl-zahlen a:hover{background:var(--sand)}
.blaettern .bl-hier{background:var(--sea);color:#fff;font-weight:700}
.blaettern .bl-luecke{opacity:.5;padding:0 2px}
@media(max-width:560px){.blaettern{gap:6px}.blaettern .bl-pfeil{padding:0 12px;font-size:.88rem}.blaettern .bl-zahlen a,.blaettern .bl-hier{min-width:40px}}

/* Die Liste der Ortsartikel unter einer Tour. Zwei Spalten, wo Platz
   ist, eine am Telefon; die Zeilen sind hoch genug zum Tippen. */
.ortliste{list-style:none;margin:14px 0 0;padding:0;display:grid;grid-template-columns:1fr;gap:2px}
.ortliste li{margin:0}
.ortliste a{display:block;padding:10px 0;border-bottom:1px solid var(--line);color:var(--deep);text-decoration:none;line-height:1.35}
.ortliste a:hover{color:var(--sea)}
@media(min-width:900px){.ortliste{grid-template-columns:1fr 1fr;column-gap:26px}}

/* Die Fotoseite am Telefon.
   Vorher lagen sieben Videos untereinander (2.800 px) und die Galerie
   einspaltig (13.300 px), zusammen siebzehn Bildschirme nur Bilder.
   Jetzt wischt man die Videos seitlich durch - Karl am 03.11.2026:
   "die zukunft mobile funktioniert nicht nur vertikal durch scrollen
   sondern gerade auch horizontal durch wischen" - und die Galerie
   steht zweispaltig, so wie man Bilder am Telefon gewohnt ist. */
@media(max-width:700px){
  .videos{display:flex;gap:12px;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scrollbar-width:none;padding-bottom:4px;margin-bottom:26px}
  .videos::-webkit-scrollbar{display:none}
  .vcard{flex:0 0 84%;scroll-snap-align:center;min-width:0}
  .gallery{columns:2 140px;column-gap:8px}
  .gallery a{margin-bottom:8px;border-radius:10px}
}