/* Mallorca Bootcharter, Raster 26.10.2026. Drei Textfarben je Bühne, ein Akzent. */
@font-face{font-family:"Outfit";font-style:normal;font-weight:100 900;font-display:swap;src:url(/fonts/outfit-latin.woff2?v=60a0335a) format("woff2");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:"Outfit";font-style:normal;font-weight:100 900;font-display:swap;src:url(/fonts/outfit-latin-ext.woff2?v=60a0335a) format("woff2");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:"Figtree";font-style:normal;font-weight:300 900;font-display:swap;src:url(/fonts/figtree-latin.woff2?v=60a0335a) format("woff2");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:"Figtree";font-style:normal;font-weight:300 900;font-display:swap;src:url(/fonts/figtree-latin-ext.woff2?v=60a0335a) format("woff2");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}

:root{
  /* Farben helle Bühne */
  --papier:#FBF7F1; --weiss:#FFFFFF; --navy:#01008A; --tinte:#22256A; --dunst:#5E619A;
  --linie:rgba(94,97,154,.25); --pink:#FF1494; --pink-weich:rgba(255,20,148,.10);
  /* dunkle Bühne */
  --tiefsee:#0A0B48; --tiefsee-flaeche:#15175C; --t1:#FBF7F1; --t2:#CFCFEB; --t3:#9496C8;
  /* Tonleiter 11 Stufen */
  --s13:13px; --s15:15px; --s17:17px; --s19:19px; --s22:22px; --s28:28px; --s36:36px; --s46:46px; --s58:58px; --s72:72px; --s96:96px;
  /* Abstände 8 Stufen */
  --a4:4px; --a8:8px; --a12:12px; --a20:20px; --a32:32px; --a48:48px; --a80:80px; --a128:128px;
  --rand:20px; --abschnitt:var(--a80); --radius:14px; --radius-k:8px;
  --kopf:64px;
  --h1:var(--s46); --h2:var(--s36); --preis:var(--s28);
}
@media (min-width:900px){:root{--rand:48px; --abschnitt:var(--a128); --h1:var(--s72); --h2:var(--s46); --preis:var(--s36); --kopf:76px}}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth}
html.lenis{height:auto} .lenis.lenis-smooth{scroll-behavior:auto}
body{margin:0;background:var(--papier);color:var(--tinte);font-family:"Figtree",system-ui,-apple-system,"Segoe UI",sans-serif;font-size:var(--s17);line-height:1.55;font-weight:400;overflow-x:hidden}
img,video,svg{max-width:100%;display:block}
img{height:auto}
a{color:inherit;text-decoration:none}
button{font:inherit}
h1,h2,h3,.zahl{font-family:"Outfit","Figtree",sans-serif;color:var(--navy);margin:0;letter-spacing:-.015em;line-height:1.05;font-weight:600;font-variant-numeric:tabular-nums}
h1{font-size:var(--h1);font-weight:700;letter-spacing:-.025em}
h2{font-size:var(--h2)}
h3{font-size:var(--s22);line-height:1.2}
p{margin:0}
.lead{font-size:var(--s19);line-height:1.5;max-width:34em}
.klein{font-size:var(--s15);color:var(--dunst)}
.mini{font-size:var(--s13);color:var(--dunst)}
.etikett{display:inline-flex;align-items:center;gap:8px;font-size:var(--s13);font-weight:600;color:var(--navy);background:var(--weiss);border:1px solid var(--linie);border-radius:999px;padding:5px 12px;line-height:1}
.etikett.pink{background:var(--pink);color:var(--weiss);border-color:var(--pink)}
.etikett.navy{background:var(--navy);color:var(--papier);border-color:var(--navy)}
.hinweis{color:var(--dunst)}

.rahmen{width:100%;max-width:1240px;margin:0 auto;padding-left:var(--rand);padding-right:var(--rand)}
section{position:relative;padding-top:var(--abschnitt);padding-bottom:var(--abschnitt)}
.kopfzeile{display:flex;flex-direction:column;gap:var(--a12);margin-bottom:var(--a32)}
.kopfzeile .ueber{font-size:var(--s15);font-weight:600;color:var(--dunst);letter-spacing:.02em}
@media (min-width:900px){.kopfzeile{margin-bottom:var(--a48)}}

/* Knöpfe */
.knopf{display:inline-flex;align-items:center;justify-content:center;gap:12px;min-height:48px;padding:0 20px;border-radius:999px;font-weight:600;font-size:var(--s17);background:var(--navy);color:var(--papier);border:1.5px solid var(--navy);cursor:pointer;transition:transform .25s ease,box-shadow .25s ease,background .25s ease;will-change:transform;position:relative;overflow:hidden;white-space:nowrap}
.knopf::after{content:"";position:absolute;left:0;right:0;top:0;height:50%;background:linear-gradient(rgba(255,255,255,.14),rgba(255,255,255,0));pointer-events:none}
.knopf:hover{box-shadow:0 10px 24px -12px rgba(1,0,138,.5)}
.knopf.zweit{background:transparent;color:var(--navy)}
.knopf.zweit:hover{background:var(--weiss)}
.knopf.pink{background:var(--pink);border-color:var(--pink);color:var(--weiss)}
.knopf svg{width:20px;height:20px;flex:none}
.knopf:focus-visible,a:focus-visible,button:focus-visible{outline:3px solid var(--pink);outline-offset:3px}

/* Kacheln */
.kachel{position:relative;background:var(--weiss);border:1px solid var(--linie);border-radius:var(--radius);overflow:hidden;transition:transform .35s cubic-bezier(.2,.8,.2,1),box-shadow .35s ease,border-color .35s ease;--mx:50%;--my:50%}
.kachel::before{content:"";position:absolute;inset:0;background:radial-gradient(420px circle at var(--mx) var(--my),var(--pink-weich),transparent 60%);opacity:0;transition:opacity .35s ease;pointer-events:none;z-index:1}
@media (hover:hover) and (pointer:fine){
  .kachel:hover{transform:translateY(-4px);box-shadow:0 24px 40px -24px rgba(1,0,138,.35);border-color:rgba(255,20,148,.45)}
  .kachel:hover::before{opacity:1}
}

/* Kopf */
.kopf{position:fixed;top:0;left:0;right:0;height:var(--kopf);z-index:50;display:flex;align-items:center;transition:background .3s ease,box-shadow .3s ease,backdrop-filter .3s ease}
.kopf.fest{background:rgba(251,247,241,.88);backdrop-filter:saturate(1.3) blur(10px);box-shadow:0 1px 0 var(--linie)}
.kopf .rahmen{display:flex;align-items:center;justify-content:space-between;gap:var(--a20)}
.marke{display:flex;align-items:center;gap:12px;height:40px}
.marke svg{height:32px;width:auto}
.menue{display:none;gap:var(--a20);font-size:var(--s15);font-weight:600;color:var(--navy)}
.menue a{position:relative;padding:8px 0}
.menue a::after{content:"";position:absolute;left:0;right:100%;bottom:0;height:2px;background:var(--pink);transition:right .3s ease}
.menue a:hover::after{right:0}
@media (min-width:900px){.menue{display:flex}.kopf .handy{display:none}}
.kopf .rechts{display:flex;align-items:center;gap:var(--a12)}
.kopf .handy{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:12px;background:transparent;border:1px solid var(--linie);color:var(--navy);cursor:pointer}
.kopf .wa-kopf{display:inline-flex;align-items:center;gap:8px;font-weight:600;font-size:var(--s15);color:var(--navy);min-height:44px;padding:0 12px;border-radius:999px;border:1px solid var(--linie);background:var(--weiss)}
.kopf .wa-kopf svg{width:18px;height:18px}

/* Menü-Karte Handy */
.menue-karte{position:fixed;inset:auto 0 0 0;z-index:60;background:var(--papier);border-radius:20px 20px 0 0;padding:var(--a20) var(--rand) calc(var(--a20) + env(safe-area-inset-bottom));transform:translateY(105%);transition:transform .35s cubic-bezier(.2,.8,.2,1);box-shadow:0 -20px 50px -30px rgba(1,0,138,.4)}
.menue-karte.offen{transform:none}
.menue-karte .raster{display:grid;grid-template-columns:1fr 1fr;gap:var(--a8);margin-top:var(--a12)}
.menue-karte a.feld{display:flex;flex-direction:column;gap:4px;padding:12px;border-radius:12px;background:var(--weiss);border:1px solid var(--linie);color:var(--navy);font-weight:600;font-size:var(--s15)}
.menue-karte a.feld span{font-weight:400;color:var(--dunst);font-size:var(--s13)}
.menue-karte .zu{position:absolute;right:var(--rand);top:14px;width:40px;height:40px;border-radius:50%;border:1px solid var(--linie);background:var(--weiss);color:var(--navy);display:grid;place-items:center;cursor:pointer}
.schleier{position:fixed;inset:0;background:rgba(10,11,72,.35);z-index:55;opacity:0;pointer-events:none;transition:opacity .3s}
.schleier.offen{opacity:1;pointer-events:auto}

/* Kielwasser-Route */
.route{position:absolute;left:0;top:0;width:100%;height:100%;pointer-events:none;z-index:2;overflow:visible}
.route path{fill:none;stroke-linecap:round;stroke-linejoin:round}
.route .schaum{stroke:#fff;stroke-width:7;opacity:.6}
.route .linie{stroke:var(--navy);stroke-width:1.5;opacity:.55}
.marker{position:absolute;width:26px;height:26px;z-index:3;pointer-events:none;transform:translate(-50%,-50%)}
.marker svg{width:100%;height:100%;filter:drop-shadow(0 2px 4px rgba(1,0,138,.25))}
@media (prefers-reduced-motion:reduce){.marker{display:none}}

/* WhatsApp schwebend / Leiste */
.wa-schwebt{position:fixed;right:20px;bottom:20px;z-index:45;width:60px;height:60px;border-radius:50%;background:var(--pink);color:#fff;display:none;place-items:center;box-shadow:0 14px 30px -12px rgba(255,20,148,.6);will-change:transform}
.wa-schwebt svg{width:28px;height:28px}
@media (min-width:900px){.wa-schwebt{display:grid}}
.leiste{position:fixed;left:0;right:0;bottom:0;z-index:45;display:flex;gap:12px;padding:12px var(--rand) calc(12px + env(safe-area-inset-bottom));background:rgba(251,247,241,.92);backdrop-filter:blur(10px);box-shadow:0 -1px 0 var(--linie)}
.leiste .knopf{flex:1}
.leiste .rund{flex:none;width:48px;height:48px;border-radius:50%;background:var(--pink);color:#fff;display:grid;place-items:center}
.leiste .rund svg{width:24px;height:24px}
@media (min-width:900px){.leiste{display:none}}
body{padding-bottom:84px}
@media (min-width:900px){body{padding-bottom:0}}

/* Hero */
.hero{padding-top:calc(var(--kopf) + var(--a20));padding-bottom:var(--a48);min-height:100svh;display:flex;flex-direction:column;justify-content:flex-start}
.hero .bild{position:relative;border-radius:var(--radius);overflow:hidden;aspect-ratio:4/5;background:var(--tiefsee)}
.hero .bild img{width:100%;height:100%;object-fit:cover}
.hero .text{padding-top:var(--a32);display:flex;flex-direction:column;gap:var(--a20)}
.hero .text h1{text-wrap:balance}
.hero .knoepfe{display:flex;flex-wrap:wrap;gap:var(--a12)}
.vertrauen{display:flex;gap:var(--a8);overflow-x:auto;scrollbar-width:none;padding:var(--a4) 0;margin:0 calc(var(--rand) * -1);padding-left:var(--rand);padding-right:var(--rand);scroll-snap-type:x proximity}
.vertrauen::-webkit-scrollbar{display:none}
.vertrauen .stein{flex:none;display:flex;align-items:center;gap:12px;background:var(--weiss);border:1px solid var(--linie);border-radius:12px;padding:12px 12px;scroll-snap-align:start;min-height:56px}
.vertrauen .stein .zahl{font-size:var(--s28);line-height:1}
.vertrauen .stein .zahl.pink{color:var(--pink)}
.vertrauen .stein .was{font-size:var(--s13);color:var(--dunst);line-height:1.2;max-width:11em}
@media (min-width:900px){
  .hero{padding-top:var(--kopf);padding-bottom:0;min-height:100svh;flex-direction:row;align-items:stretch}
  .hero .rahmen{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:var(--a48);align-items:center;padding-right:0;max-width:none;padding-left:max(var(--rand),calc((100vw - 1240px)/2 + var(--rand)))}
  .hero .text{padding-top:0;order:1;gap:var(--a32);padding-bottom:var(--a48)}
  .hero .bild{order:2;aspect-ratio:auto;height:calc(100svh - var(--kopf));border-radius:var(--radius) 0 0 var(--radius)}
  .vertrauen{margin:0;padding-left:0;padding-right:0;flex-wrap:wrap;overflow:visible}
}

/* Flotte */
.flotte .raster{display:grid;grid-template-columns:1fr 1fr;gap:var(--a8)}
.boot{display:flex;flex-direction:column;color:inherit}
.boot .foto{aspect-ratio:4/3;background:var(--tiefsee-flaeche);overflow:hidden;position:relative}
.boot .foto img{width:100%;height:100%;object-fit:cover;transition:transform .6s cubic-bezier(.2,.8,.2,1)}
@media (hover:hover){.boot:hover .foto img{transform:scale(1.04)}}
.boot .foto .etikett{position:absolute;left:10px;top:10px;z-index:2}
.boot .inhalt{padding:12px 12px 12px;display:flex;flex-direction:column;gap:8px;position:relative;z-index:2}
.boot .name{font-family:"Outfit",sans-serif;font-weight:700;color:var(--navy);font-size:var(--s19);line-height:1.15}
.boot .modell{font-size:var(--s13);color:var(--dunst)}
.boot .daten{display:flex;flex-wrap:wrap;gap:4px 12px;font-size:var(--s13);color:var(--dunst)}
.boot .preis{display:flex;align-items:baseline;gap:8px;margin-top:4px}
.boot .preis .zahl{font-size:var(--s22);color:var(--navy)}
.boot .preis .was{font-size:var(--s13);color:var(--dunst)}
.boot .saison{display:none;gap:8px;font-size:var(--s13);color:var(--dunst);margin-top:4px}
.boot .saison b{color:var(--navy);font-weight:600}
.boot.gross{grid-column:1/-1}
.boot.gross .foto{aspect-ratio:16/10}
@media (min-width:700px){
  .flotte .raster{grid-template-columns:repeat(3,1fr);gap:var(--a20)}
  .boot .inhalt{padding:20px 20px 20px;gap:8px}
  .boot .name{font-size:var(--s22)}
  .boot .preis .zahl{font-size:var(--s28)}
  .boot .saison{display:flex}
  .boot.gross .foto{aspect-ratio:21/9}
}
.flotte .fuss{margin-top:var(--a20);display:flex;flex-direction:column;gap:var(--a8)}
@media (min-width:900px){.flotte .fuss{flex-direction:row;justify-content:space-between;align-items:center;margin-top:var(--a32)}}

/* Ihr Tag */
.tag .stationen{display:flex;flex-direction:column;gap:var(--a48);position:relative}
.tag .station{display:flex;flex-direction:column;gap:var(--a12);position:relative}
.tag .station .zeit{font-family:"Outfit",sans-serif;font-weight:700;font-size:var(--s28);color:var(--navy);line-height:1}
.tag .station .foto{border-radius:var(--radius);overflow:hidden;aspect-ratio:4/5;max-width:420px}
.tag .station .foto img{width:100%;height:100%;object-fit:cover}
.tag .station .fotos{display:grid;grid-template-columns:1fr 1fr 1fr;gap:var(--a8)}
.tag .station .fotos .foto{aspect-ratio:3/4}
.laufzeile{overflow:hidden;white-space:nowrap;margin:var(--a12) 0;mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.laufzeile .band{display:inline-flex;gap:var(--a32);font-family:"Outfit",sans-serif;font-weight:600;font-size:var(--s28);color:var(--navy);will-change:transform}
.laufzeile .band span{display:inline-flex;align-items:center;gap:var(--a32)}
.laufzeile .band i{width:8px;height:8px;border-radius:50%;background:var(--pink);display:inline-block;font-style:normal}
@media (min-width:900px){
  .tag .stationen{padding-left:0;gap:var(--a80)}
  .tag .station{display:grid;grid-template-columns:1fr 1fr;gap:var(--a48);align-items:center}
  .tag .station:nth-child(even) .text{order:2}
  .tag .station .foto{max-width:none}
  .laufzeile .band{font-size:var(--s46)}
}

/* Dunkle Bühne Fjord */
.fjord{background:var(--tiefsee);color:var(--t2);border-radius:28px;margin:0 8px}
.fjord h2,.fjord h3,.fjord .zahl{color:var(--t1)}
.fjord .klein,.fjord .mini,.fjord .hinweis{color:var(--t3)}
.fjord .bild{border-radius:var(--radius);overflow:hidden;aspect-ratio:16/10}
.fjord .bild img{width:100%;height:100%;object-fit:cover}
.fjord .preisblock{display:flex;flex-direction:column;gap:var(--a4)}
.fjord .preisblock .zahl{font-size:var(--s58);color:var(--pink);line-height:1}
.fjord .etikett{background:transparent;color:var(--t1);border-color:rgba(251,247,241,.3)}
.fjord .wisch{display:flex;gap:var(--a8);overflow-x:auto;scrollbar-width:none;margin:0 calc(var(--rand) * -1);padding:0 var(--rand);scroll-snap-type:x mandatory}
.fjord .wisch::-webkit-scrollbar{display:none}
.fjord .wisch .foto{flex:none;width:68%;aspect-ratio:4/5;border-radius:var(--radius);overflow:hidden;scroll-snap-align:start}
.fjord .wisch .foto img{width:100%;height:100%;object-fit:cover}
.fjord .fakten{display:grid;grid-template-columns:1fr 1fr;gap:var(--a12) var(--a20);font-size:var(--s15)}
.fjord .fakten b{display:block;color:var(--t1);font-weight:600}
.fjord .knopf{background:var(--t1);border-color:var(--t1);color:var(--navy)}
@media (min-width:900px){
  .fjord{margin:0 var(--a20)}
  .fjord .rahmen{display:grid;grid-template-columns:1.1fr .9fr;gap:var(--a48);align-items:center}
  .fjord .preisblock .zahl{font-size:var(--s96)}
  .fjord .wisch{margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr 1fr;overflow:visible}
  .fjord .wisch .foto{width:auto}
}

/* Stefan und Sabrina */
.wir .inhalt{display:flex;flex-direction:column;gap:var(--a20)}
.wir .foto{border-radius:var(--radius);overflow:hidden;aspect-ratio:4/3}
.wir .foto img{width:100%;height:100%;object-fit:cover}
.wir .bewertung{display:flex;align-items:center;gap:var(--a12)}
.wir .bewertung .zahl{font-size:var(--s46);color:var(--pink);line-height:1}
.wir .bewertung .was{font-size:var(--s15);color:var(--dunst);line-height:1.3}
.wir .zitate{display:flex;gap:var(--a8);overflow-x:auto;scrollbar-width:none;margin:0 calc(var(--rand) * -1);padding:0 var(--rand)}
.wir .zitate::-webkit-scrollbar{display:none}
.wir .zitat{flex:none;width:78%;padding:20px;display:flex;flex-direction:column;gap:12px;min-height:120px}
.wir .zitat .sterne{color:var(--pink);letter-spacing:2px;font-size:var(--s15)}
.wir .zitat .status{font-size:var(--s13);color:var(--dunst);font-style:italic}
@media (min-width:900px){
  .wir .rahmen{display:grid;grid-template-columns:1fr 1fr;gap:var(--a48);align-items:start}
  .wir .zitate{margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr 1fr;overflow:visible;grid-column:1/-1}
  .wir .zitat{width:auto}
}

/* Ablauf */
.ablauf .schritte{display:grid;gap:var(--a8)}
.ablauf .schritt{padding:20px;display:flex;gap:12px;align-items:flex-start}
.ablauf .schritt .nr{font-family:"Outfit",sans-serif;font-weight:700;font-size:var(--s28);color:var(--pink);line-height:1;min-width:1.4em}
.ablauf .schritt h3{font-size:var(--s19);margin-bottom:4px}
.ablauf .buero{margin-top:var(--a32);display:grid;grid-template-columns:1fr;gap:var(--a20);align-items:center}
.ablauf .buero .foto{border-radius:var(--radius);overflow:hidden;aspect-ratio:4/5;max-width:420px}
.ablauf .buero .foto img{width:100%;height:100%;object-fit:cover}
@media (min-width:900px){.ablauf .schritte{grid-template-columns:1fr 1fr 1fr;gap:var(--a20)}.ablauf .buero{grid-template-columns:1fr 1fr;gap:var(--a48);margin-top:var(--a80)}}

/* Anfrage */
.anfrage .rahmen{display:flex;flex-direction:column;gap:var(--a32)}
.formular{display:grid;gap:var(--a12);padding:20px;background:var(--weiss);border:1px solid var(--linie);border-radius:var(--radius)}
.formular label{display:flex;flex-direction:column;gap:8px;font-size:var(--s15);font-weight:600;color:var(--navy)}
.formular input,.formular select,.formular textarea{font:inherit;font-size:17px;padding:12px 12px;border:1px solid var(--linie);border-radius:10px;background:var(--papier);color:var(--tinte);min-height:48px}
.formular textarea{min-height:96px;resize:vertical}
.formular .zwei{display:grid;grid-template-columns:1fr 1fr;gap:var(--a12)}
.formular .wahl{display:flex;gap:8px;flex-wrap:wrap}
.formular .wahl label{flex-direction:row;align-items:center;gap:8px;font-weight:500;padding:12px 12px;border:1px solid var(--linie);border-radius:999px;background:var(--papier);cursor:pointer;min-height:44px}
.formular .wahl input{min-height:0;padding:0;accent-color:var(--pink)}
.anfrage .wa-box{display:flex;flex-direction:column;gap:var(--a12);padding:20px;border-radius:var(--radius);background:var(--navy);color:var(--papier)}
.anfrage .wa-box h3{color:var(--papier)}
.anfrage .wa-box .klein{color:var(--t2)}
.anfrage .wa-box .knopf{background:var(--pink);border-color:var(--pink);align-self:flex-start}
@media (min-width:900px){.anfrage .rahmen{display:grid;grid-template-columns:1.2fr .8fr;gap:var(--a48);align-items:start}.formular{padding:32px;gap:var(--a20)}.anfrage .wa-box{padding:32px}}

/* Weitere Wege */
.wege .raster{display:grid;grid-template-columns:1fr 1fr;gap:var(--a8)}
.wege .weg{padding:20px;display:flex;flex-direction:column;gap:8px;min-height:120px;color:inherit}
.wege .weg h3{font-size:var(--s19)}
.wege .weg .klein{font-size:var(--s13)}
.wege .weg .pfeil{margin-top:auto;color:var(--pink);font-weight:600;font-size:var(--s15)}
@media (min-width:900px){.wege .raster{grid-template-columns:repeat(4,1fr);gap:var(--a20)}.wege .weg{padding:20px;min-height:160px}}

/* Fuß */
footer{padding:var(--a48) 0 var(--a32);border-top:1px solid var(--linie);font-size:var(--s15);color:var(--dunst)}
footer .rahmen{display:flex;flex-direction:column;gap:var(--a20)}
footer .spalten{display:grid;grid-template-columns:1fr 1fr;gap:var(--a20)}
footer .spalten b{display:block;color:var(--navy);font-weight:600;margin-bottom:8px}
footer .spalten a{display:block;padding:4px 0}
footer .bau{padding-top:var(--a20);border-top:1px solid var(--linie);font-size:var(--s13)}
footer .bau a{color:var(--navy);font-weight:600}
@media (min-width:900px){footer .spalten{grid-template-columns:2fr 1fr 1fr 1fr}}

/* Bewegung */
.wort{display:inline-block;color:var(--dunst);transition:color .4s ease}
.wort.an{color:var(--navy)}
@media (prefers-reduced-motion:reduce){
  .wort{color:var(--navy)}
  .kachel,.knopf,.boot .foto img{transition:none}
  html{scroll-behavior:auto}
}

/* Ergänzungen: Abschnitte, die in head.css noch fehlten. Nur Leiterwerte. */
.springen{position:absolute;left:-999px;top:var(--a8);background:var(--navy);color:var(--papier);padding:var(--a8) var(--a12);border-radius:var(--radius-k);z-index:100}
.springen:focus{left:var(--a8)}

/* Saisonschalter */
.saison{display:flex;flex-direction:column;gap:var(--a8);margin-bottom:var(--a20)}
.schalter{display:inline-flex;gap:var(--a4);padding:var(--a4);background:var(--weiss);border:1px solid var(--linie);border-radius:999px;align-self:flex-start}
.schalter button{border:0;background:transparent;color:var(--dunst);font-weight:600;font-size:var(--s15);padding:0 var(--a12);min-height:40px;border-radius:999px;cursor:pointer;transition:background .25s,color .25s}
.schalter button.an{background:var(--navy);color:var(--papier)}
@media (min-width:900px){.saison{flex-direction:row;align-items:center;gap:var(--a20);margin-bottom:var(--a32)}}

/* Skipper */
.skipper .rahmen{display:flex;flex-direction:column;gap:var(--a32)}
.skipper .foto{border-radius:var(--radius);overflow:hidden;aspect-ratio:4/5;max-width:480px}
.skipper .foto img{width:100%;height:100%;object-fit:cover}
.skipper .wege{display:grid;gap:var(--a8)}
.skipper .weg{padding:var(--a20);display:flex;flex-direction:column;gap:var(--a8)}
.skipper .weg .knopf{align-self:flex-start;margin-top:var(--a4)}
.beispiel{display:flex;flex-direction:column;gap:var(--a4);padding:var(--a12);background:var(--papier);border-radius:var(--radius-k);margin-top:var(--a4)}
.beispiel .zahl{font-size:var(--s28);line-height:1}
@media (min-width:900px){.skipper .rahmen{display:grid;grid-template-columns:2fr 3fr;gap:var(--a48);align-items:center}.skipper .wege{grid-template-columns:1fr 1fr;gap:var(--a20)}.skipper .foto{max-width:none}}

/* Ihr Tag: zweite Stationenliste ohne Kopf */
.tag .laufzeile{margin:var(--a32) 0}
@media (min-width:900px){.tag .laufzeile{margin:var(--a48) 0}}
.tag .station .text{display:flex;flex-direction:column;gap:var(--a8)}
.tag .station .text .knopf{align-self:flex-start;margin-top:var(--a8)}

/* Fjord Fakten als dl */
.fjord dl{margin:0}
.fjord .fakten div{display:flex;flex-direction:column;gap:var(--a4)}
.fjord .knoepfe{display:flex;flex-wrap:wrap;gap:var(--a12);align-items:center}
.fjord .text{display:flex;flex-direction:column;gap:var(--a20)}
.fjord .links{display:flex;flex-direction:column;gap:var(--a12)}
.fjord .wisch .foto{position:relative}

/* Fragen */
.fragen{margin-top:var(--a32);display:flex;flex-direction:column;gap:var(--a8)}
.fragen h3{margin-bottom:var(--a4)}
.fragen details{background:var(--weiss);border:1px solid var(--linie);border-radius:var(--radius-k);padding:0 var(--a20)}
.fragen summary{cursor:pointer;font-weight:600;color:var(--navy);padding:var(--a12) 0;list-style:none;display:flex;justify-content:space-between;gap:var(--a12);align-items:center}
.fragen summary::-webkit-details-marker{display:none}
.fragen summary::after{content:"+";font-family:"Outfit",sans-serif;font-size:var(--s22);color:var(--pink);line-height:1;flex:none}
.fragen details[open] summary::after{content:"−"}
.fragen details p{padding:0 0 var(--a12);color:var(--tinte)}
@media (min-width:900px){.fragen{margin-top:var(--a48);max-width:860px}}

/* Weitere Wege */
.wege-abschnitt .wege.raster{display:grid;grid-template-columns:1fr 1fr;gap:var(--a8)}
.wege-abschnitt .weg{padding:var(--a20);display:flex;flex-direction:column;gap:var(--a8);min-height:140px;color:inherit}
.wege-abschnitt .weg .pfeil{margin-top:auto;color:var(--pink);font-weight:600;font-size:var(--s15);display:inline-flex;align-items:center;gap:var(--a4)}
.wege-abschnitt .weg .pfeil svg{width:16px;height:16px}
@media (min-width:900px){.wege-abschnitt .wege.raster{grid-template-columns:repeat(4,1fr);gap:var(--a20)}.wege-abschnitt .weg{padding:var(--a32);min-height:180px}}

/* Fuß Adresse */
footer .spalten > div{display:flex;flex-direction:column;gap:var(--a4)}

/* Kleine Icons in Knöpfen und Pfeil */
.knopf svg{width:18px;height:18px}
.wa-kopf svg{width:18px;height:18px}

/* Formular darf nie breiter werden als der Rahmen */
.formular{min-width:0}
.formular > *{min-width:0}
.formular .zwei > label{min-width:0}
.formular input,.formular select,.formular textarea{width:100%;min-width:0;max-width:100%}
.anfrage .rahmen > *{min-width:0}

.hero .bild picture{display:block;width:100%;height:100%}

/* Bootskarte kompakt am Handy */
.boot .name em{font-style:normal;font-weight:500;color:var(--dunst);font-size:var(--s15);display:block;letter-spacing:0}
.boot .kurz{display:none;font-size:var(--s15);color:var(--tinte)}
.boot .preis .zahl{white-space:nowrap}
.boot .foto .etikett.nur-gross{display:none}
@media (min-width:700px){.boot .kurz{display:block}.boot .foto .etikett.nur-gross{display:inline-flex}.boot .name em{display:inline;font-size:inherit;color:var(--navy);font-weight:700}}

body{position:relative}
.route{height:auto}
@media (min-width:900px){.kopf .handy{display:none}}

.flotte .fuss .knopf{flex:none}
@media (min-width:900px){.tag .station .foto{aspect-ratio:5/4}.tag .station .fotos .foto{aspect-ratio:3/4}}

/* Handy kompakter: Fotos 4:3 statt 4:5, Modellzeile nur am Desktop */
@media (max-width:899px){
  .skipper .foto,.tag .station .foto,.ablauf .buero .foto{aspect-ratio:4/3;max-width:none}
  .boot .modell{display:none}
}
.boot .preis .was{white-space:nowrap}
/* Safari gibt einem SVG ohne feste Größe im Flex-Knopf keine Fläche */
.kopf .handy svg{width:22px;height:22px;display:block}
.menue-karte .zu svg{width:20px;height:20px;display:block}
.route .schaum{stroke:#fff;stroke-width:8;opacity:.9}
.route .linie{stroke:var(--navy);stroke-width:2;opacity:.6}

.marker{width:36px;height:18px}
.marker svg{filter:drop-shadow(0 2px 5px rgba(1,0,138,.35))}
@media (max-width:899px){.marker{width:24px;height:12px}}
/* Handy: Abschnitte dichter, 48 statt 80, sonst klaffen zwischen den Blöcken 160 px Leere */
@media (max-width:899px){
  :root{--abschnitt:var(--a48)}
  .tag .stationen{gap:var(--a48)}
  /* Blur hinter Kopf und Leiste kostet auf dem iPhone beim Scrollen Bilder pro Sekunde, deckend reicht */
  .kopf.fest{backdrop-filter:none;-webkit-backdrop-filter:none;background:rgba(251,247,241,.97)}
  .leiste{backdrop-filter:none;-webkit-backdrop-filter:none;background:rgba(251,247,241,.97)}
}
.marker svg{filter:none}
.marker{will-change:transform}
.route path{will-change:stroke-dashoffset}
/* Laufzeile als CSS-Animation, Breite und Dauer setzt script.js */
@keyframes lauf{to{transform:translate3d(var(--lauf,-50%),0,0)}}
.laufzeile .band{animation:lauf var(--lauf-dauer,40s) linear infinite}
@media (prefers-reduced-motion:reduce){.laufzeile .band{animation:none}}
/* Handy: die Route ist dort eine senkrechte Gerade. Statt den riesigen SVG-Pfad je Bild neu zu zeichnen (Repaint),
   wächst ein schmaler Strich per transform (nur Compositor). Der SVG-Pfad bleibt unsichtbar als Bahn für das Boot. */
.route-strich{display:none;position:absolute;left:11px;top:0;width:2px;height:0;background:var(--navy);opacity:.6;transform-origin:50% 0;transform:scaleY(0);will-change:transform;box-shadow:0 0 0 3px rgba(255,255,255,.9);z-index:2;pointer-events:none;border-radius:2px}
@media (max-width:899px){.route-strich{display:block}.route path{opacity:0}}


/* Runde 2 (26.10.2026, Grafikdesign-Chef): drei Grundtöne im Wechsel, Kacheln nur für Boote und Formular,
   alles andere wird Zeile mit Linie. Lädt nach head.css und head2.css und überschreibt gezielt. */
:root{--hauch:#F1F1FA}

/* A. Hintergrund-Rhythmus: Papier, Hauch, Weiß, Papier, Tiefsee, Weiß, Papier, Hauch, Weiß, Papier */
.flotte,.anfrage{background:var(--hauch)}
.skipper,.wir,.wege-abschnitt{background:var(--weiss)}
.fjord{border-radius:0;margin:0}
@media (min-width:900px){.fjord{margin:0}}
footer{background:var(--papier)}

/* C. Kachelregeln: Grund trägt, kein Rand, kein Schatten in Ruhe */
.kachel{border:0;box-shadow:none}
.boot .inhalt{padding:12px;gap:6px}
.boot .daten{gap:4px 10px}
.boot .daten span+span::before{content:"·";margin-right:10px;color:var(--linie)}
.boot .preis .was{font-size:var(--s13)}
.boot .saison{display:none}
@media (min-width:700px){
  .boot .inhalt{padding:20px;gap:8px}
  .boot .saison{display:flex;margin-top:0}
}
.saison .schalter{border:0}
.flotte .fuss{margin-top:var(--a20)}
.flotte .fuss .klein{max-width:34em}

/* Hero: eine Vertrauenszeile statt vier Steine */
.hero .vertrauen{display:flex;flex-wrap:wrap;align-items:center;gap:var(--a8) var(--a12);margin:0;padding:0;overflow:visible;scroll-snap-type:none}
.hero .vertrauen .etikett{font-size:var(--s15);padding:8px 14px;gap:6px}
.hero .vertrauen .etikett .zahl{color:inherit;font-size:var(--s15);font-weight:700}
.hero .vertrauen .was{font-size:var(--s15);color:var(--dunst);line-height:1.3}

/* Skipper: freie Zahl, ein Knopf, ein Satz mit Textlink */
.skipper .text{display:flex;flex-direction:column;gap:var(--a12)}
.skipper .text .kopfzeile{margin-bottom:var(--a8)}
.skipper .preiszeile{display:flex;align-items:baseline;gap:var(--a12);flex-wrap:wrap}
.skipper .preiszeile .zahl{font-size:var(--s28);line-height:1;white-space:nowrap}
.skipper .preiszeile .satz{font-size:var(--s17);color:var(--tinte);max-width:28em}
.skipper .text .knopf{align-self:flex-start;margin-top:var(--a8)}
.skipper .schein{margin-top:var(--a12);padding-top:var(--a12);border-top:1px solid var(--linie);font-size:var(--s15);color:var(--dunst);max-width:34em}
.skipper .schein a{color:var(--navy);font-weight:600;white-space:nowrap;display:inline-flex;align-items:center;gap:4px}
.skipper .schein a svg{width:16px;height:16px}
@media (min-width:900px){.skipper .preiszeile .zahl{font-size:var(--s36)}}

/* Fjord: volle Breite, vier Fakten */
.fjord .fakten{grid-template-columns:1fr 1fr}
@media (min-width:900px){.fjord .fakten{grid-template-columns:repeat(4,1fr)}}

/* Wir: Foto zuerst am Handy, keine Zitate */
.wir .rahmen{display:flex;flex-direction:column;gap:var(--a20)}
@media (min-width:900px){.wir .rahmen{display:grid;grid-template-columns:1fr 1fr;gap:var(--a48);align-items:center}.wir .foto{order:2}.wir .inhalt{order:1}}

/* Ablauf: vier Zeilen mit Linie, Desktop vier Spalten */
.ablauf .schritte{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:0}
.ablauf .schritt{padding:var(--a12) 0;display:flex;gap:var(--a12);align-items:flex-start;border-top:1px solid var(--linie);background:transparent;border-radius:0}
.ablauf .schritt:last-child{border-bottom:1px solid var(--linie)}
.ablauf .schritt .nr{font-size:var(--s28);min-width:1.4em}
.ablauf .schritt h3{font-size:var(--s19);margin-bottom:2px}
.ablauf .schritt .klein{font-size:var(--s15)}
@media (min-width:900px){
  .ablauf .schritte{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--a32)}
  .ablauf .schritt{flex-direction:column;gap:var(--a8);padding:var(--a20) 0 0;border-bottom:0}
  .ablauf .schritt:last-child{border-bottom:0}
  .ablauf .schritt .nr{font-size:var(--s36)}
}

/* Fragen: Liste mit Linie, Plus in Navy */
.fragen{gap:0;margin-top:var(--a48)}
.fragen h3{margin-bottom:var(--a8)}
.fragen details{background:transparent;border:0;border-top:1px solid var(--linie);border-radius:0;padding:0}
.fragen details:last-of-type{border-bottom:1px solid var(--linie)}
.fragen summary{padding:var(--a12) 0;font-size:var(--s17)}
.fragen summary::after{color:var(--navy)}
.fragen details p{padding:0 0 var(--a12);max-width:34em}

/* Formular: Karte nur Felder, Schalter statt Pillen, Felder Weiß mit Linie */
.anfrage .rahmen{gap:var(--a20)}
.anfrage .kopfzeile{margin-bottom:0}
.anfrage .wa-zeile{font-size:var(--s15);color:var(--dunst)}
.anfrage .wa-zeile a{color:var(--navy);font-weight:600;white-space:nowrap;display:inline-flex;align-items:center;gap:4px}
.anfrage .wa-zeile a svg{width:16px;height:16px}
.formular{border:0;padding:var(--a20);gap:var(--a12)}
.formular input,.formular select,.formular textarea{background:var(--weiss);border:1px solid var(--linie)}
.formular input:focus,.formular select:focus,.formular textarea:focus{outline:2px solid var(--navy);outline-offset:0;border-color:var(--navy)}
.formular .zwei.einspaltig,.formular .zwei.schalterpaar{grid-template-columns:1fr}
.formular .feldgruppe{display:flex;flex-direction:column;gap:8px;min-width:0}
.formular .feldgruppe .label{font-size:var(--s15);font-weight:600;color:var(--navy)}
.formular .schalter.wahl{display:flex;gap:var(--a4);padding:var(--a4);background:var(--papier);border:1px solid var(--linie);border-radius:999px;align-self:stretch}
.formular .schalter.wahl label{flex:1;flex-direction:row;justify-content:center;align-items:center;gap:0;padding:0 var(--a12);min-height:40px;border:0;border-radius:999px;background:transparent;font-weight:600;font-size:var(--s15);color:var(--dunst);cursor:pointer;position:relative}
.formular .schalter.wahl input{position:absolute;opacity:0;width:1px;height:1px;margin:0}
.formular .schalter.wahl label:has(input:checked){background:var(--navy);color:var(--papier)}
.formular .schalter.wahl label:has(input:focus-visible){outline:3px solid var(--pink);outline-offset:2px}
.anfrage .wa-box{display:none}
@media (min-width:900px){
  .anfrage .rahmen{display:grid;grid-template-columns:1.2fr .8fr;gap:var(--a32) var(--a48);align-items:start}
  .anfrage .kopfzeile{grid-column:1/-1}
  .anfrage .wa-zeile{display:none}
  .formular{padding:var(--a32);gap:var(--a20)}
  .formular .zwei.einspaltig,.formular .zwei.schalterpaar{grid-template-columns:1fr 1fr}
  .anfrage .wa-box{display:flex;padding:var(--a32)}
}

/* Wege: vier Zeilen mit Linie, Desktop vier Spalten ohne Rahmen */
.wege-abschnitt .wege.liste{display:flex;flex-direction:column;gap:0}
.wege-abschnitt .weg{display:flex;flex-direction:row;align-items:center;justify-content:space-between;gap:var(--a12);padding:var(--a12) 0;min-height:0;border-top:1px solid var(--linie);background:transparent;border-radius:0;color:inherit}
.wege-abschnitt .weg:last-child{border-bottom:1px solid var(--linie)}
.wege-abschnitt .weg h3{font-size:var(--s19);margin-bottom:2px}
.wege-abschnitt .weg .klein{font-size:var(--s15)}
.wege-abschnitt .weg .pfeil{margin:0;color:var(--navy);flex:none;display:inline-flex}
.wege-abschnitt .weg .pfeil svg{width:20px;height:20px;transition:transform .25s ease}
.wege-abschnitt .weg:hover .pfeil svg{transform:translateX(4px)}
@media (min-width:900px){
  .wege-abschnitt .wege.liste{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--a32)}
  .wege-abschnitt .weg{flex-direction:column;align-items:flex-start;padding:var(--a20) 0 0;border-bottom:0}
  .wege-abschnitt .weg:last-child{border-bottom:0}
  .wege-abschnitt .weg .pfeil{margin-top:var(--a8)}
}

/* Fuß: Papier mit Linie oben (steht nach dem weißen Wege-Band) */
footer{border-top:1px solid var(--linie)}

/* Hero am Handy: Luft zwischen Vertrauenszeile und Bild */
@media (max-width:899px){.hero .text{padding-bottom:var(--a20)}}

/* WhatsApp: ein fester Eingang je Gerät. Handy = untere Leiste, Desktop = Kopf. Der schwebende Knopf fällt weg,
   der Magnet-Effekt wandert auf den Kopf-Knopf. Dazu kommen nur noch die Knöpfe mit Kontext (Skipper, Peanuts, Bucht, Anfrage). */
.wa-schwebt{display:none}
@media (min-width:900px){.wa-schwebt{display:none}}
@media (max-width:899px){.kopf .wa-kopf{display:none}}
.kopf .wa-kopf{will-change:transform}
.formular label .optional{font-weight:400;color:var(--dunst);font-size:var(--s13);margin-left:6px}

/* Zitate: Text ohne Kachel, Wischleiste am Handy, drei Spalten am Desktop (echte Google-Bewertungen, Oktober 2026) */
.wir .zitate{display:flex;gap:var(--a20);overflow-x:auto;scrollbar-width:none;margin:var(--a12) calc(var(--rand) * -1) 0;padding:0 var(--rand);scroll-snap-type:x proximity}
.wir .zitate::-webkit-scrollbar{display:none}
.wir .zitat{flex:none;width:84%;margin:0;padding:var(--a20) 0 0;border-top:2px solid var(--pink);display:flex;flex-direction:column;gap:var(--a12);scroll-snap-align:start;min-height:0;background:transparent;border-radius:0}
.wir .zitat p{font-size:var(--s17);line-height:1.5;color:var(--tinte)}
.wir .zitat .quelle{color:var(--dunst)}
@media (min-width:900px){
  .wir .rahmen{grid-template-columns:1fr 1fr;row-gap:var(--a48)}
  .wir .zitate{order:3;grid-column:1/-1;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr 1fr;gap:var(--a32);overflow:visible}
  .wir .zitat{width:auto}
  .wir .zitat p{font-size:var(--s19)}
}


/* Wischleisten: Einrasten an der Innenkante, nicht an der Bildschirmkante */
.wir .zitate,.fjord .wisch{scroll-padding-left:var(--rand);scroll-padding-right:var(--rand)}

/* Hero-Video: füllt den Rahmen wie vorher das Foto */
.hero .bild video{width:100%;height:100%;object-fit:cover;display:block;background:var(--tiefsee)}


/* Handy: Hochformat-Fotos im 4:3-Rahmen oben anschneiden, nicht am Kopf (Igor, 26.10. 21:18) */
@media (max-width:899px){.skipper .foto img{object-position:50% 10%}.ablauf .buero .foto img{object-position:50% 25%}.tag .station .foto img{object-position:50% 35%}}

/* Hero, Runde 3 (26.10.2026): Video als volle Bühne, Papierblatt schiebt sich von unten links darüber,
   pinker Preis-Aufkleber auf der Blattecke, 4,9 als Zahl neben den Knöpfen. Beschluss Grafikdesign-Chef und Motion-Chef. */
@media (min-width:900px){:root{--kopf:80px}}

/* Alte Hero-Regeln aus head.css neutralisieren */
.hero{padding:0;min-height:100svh;display:flex;flex-direction:column;position:relative;background:var(--papier);overflow:visible}   /* flex: Blatt füllt bis zur Hero-Unterkante, kein Rand schlägt durch */
.hero .rahmen{display:block;grid-template-columns:none;max-width:none;padding:0}

/* Bühne: Poster unten, Video darüber (blendet ein, sobald es läuft), oben ein kurzer Schleier nur für den Kopf */
.hero .buehne{position:absolute;inset:0;overflow:hidden;background:var(--tiefsee);z-index:0}   /* füllt den ganzen Hero, rechts vom Blatt bleibt Wasser bis zur Laufzeile */
.hero .buehne picture,.hero .buehne .poster,.hero .buehne video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.hero .buehne video{opacity:0;transition:opacity .4s ease}
.hero .buehne video.laeuft{opacity:1}
.hero .kopfschleier{position:absolute;left:0;top:0;width:100%;height:160px;background:linear-gradient(180deg,rgba(10,11,72,.5),rgba(10,11,72,0));pointer-events:none}

/* Blatt: linksbündig am Viewport, Radius 28 nur oben rechts, kein Rand, kein Schatten. Es wird unter der Falz zur Seite. */
.hero .blatt{position:relative;z-index:1;flex:1;margin-top:45svh;margin-right:20px;background:var(--papier);border-radius:0 28px 0 0;padding:var(--a32) var(--a20) var(--a32) var(--a20)}
.hero .blatt .innen{display:flex;flex-direction:column;gap:var(--a20)}
/* Wortmarke als erste Zeile des Blatts (Stefan, 27.10.: der Name muss sichtbar sein; Navy statt Rosa, Fläche bleibt Pink) */
.hero .blatt .wortmarke{font-family:"Outfit","Figtree",sans-serif;font-weight:800;text-transform:uppercase;letter-spacing:.02em;font-size:var(--s22);line-height:1.1;color:var(--navy);margin:0 0 calc(var(--a12) - var(--a20))}
.hero .blatt .fakten{margin-top:calc(var(--a12) - var(--a20))}
.hero .blatt .ueber{display:none;font-size:var(--s15);font-weight:600;color:var(--dunst);letter-spacing:.02em}
.hero .blatt h1{font-size:var(--h1);line-height:1.02;text-wrap:balance}
.hero .blatt .lead{font-size:var(--s15);line-height:1.5;color:var(--tinte);max-width:34em}
.hero .blatt .reihe{display:flex;align-items:center;gap:var(--a12);flex-wrap:nowrap}
.hero .blatt .reihe .knopf{gap:8px}
.hero .blatt .nur-gross{display:none}
.hero .blatt .beweis{display:flex;align-items:center;gap:var(--a8);color:var(--dunst);font-size:var(--s13);line-height:1.2;margin-left:auto;flex:none}
.hero .blatt .reihe .knopf{flex:none}
.hero .blatt .reihe .knopf svg{display:none}
.hero .blatt .beweis .was{max-width:7.5em}
.hero .blatt .beweis .zahl{font-size:var(--s28);color:var(--navy);line-height:1;font-weight:700}


/* Aufkleber: Pinkfläche, Radius 14, Drehung minus 4 Grad, Mitte auf der Blattoberkante */
.hero .aufkleber{position:absolute;right:20px;top:0;transform:translateY(-50%) rotate(-4deg);z-index:2;background:var(--pink);color:#fff;border-radius:14px;padding:12px 16px;display:flex;flex-direction:column;align-items:flex-start;gap:4px;line-height:1;text-decoration:none;transition:transform .2s ease;will-change:transform}
.hero .aufkleber .zahl{color:#fff;font-size:var(--s28);font-weight:700;white-space:nowrap}
.hero .aufkleber .was{font-size:var(--s13);font-weight:600;color:var(--tiefsee)}
@media (hover:hover){.hero .aufkleber:hover{transform:translateY(-50%) rotate(0deg) scale(1.04)}}

/* Kopf über dem Video: transparent, Logo und Menü in Papier; fest und hell, sobald die Blattkante ihn berührt (script.js) */
.kopf{transition:background .2s ease,box-shadow .2s ease}
.kopf .marke{transition:opacity .2s ease}
.kopf:not(.fest) .marke{opacity:0;pointer-events:none}   /* die Wortmarke steht groß auf dem Blatt, das kleine Logo kommt mit dem hellen Kopf */
.kopf:not(.fest) .marke svg path{fill:var(--t1)}
.kopf:not(.fest) .menue{color:var(--t1)}
.kopf:not(.fest) .menue a::after{background:var(--t1)}
.kopf:not(.fest) .wa-kopf{background:transparent;color:var(--t1);border-color:rgba(251,247,241,.45)}
.kopf:not(.fest) .handy{color:var(--t1);border-color:rgba(251,247,241,.45)}
.kopf.fest{background:var(--papier);backdrop-filter:none;-webkit-backdrop-filter:none;box-shadow:0 1px 0 var(--linie)}

/* Laufzeile als Naht: 56 px, Papier, Outfit 22 Dunst, Punkte Dunst (Pink-Budget im Hero: Aufkleber und Marker) */
.hero + .laufzeile{height:56px;display:flex;align-items:center;margin:0;background:var(--papier);border-bottom:1px solid var(--linie)}
.hero + .laufzeile .band{font-size:var(--s22);color:var(--dunst);gap:var(--a48)}
.hero + .laufzeile .band span{gap:var(--a48)}
.hero + .laufzeile .band i{width:6px;height:6px;background:var(--dunst)}

/* Desktop */
@media (min-width:900px){
  .hero .blatt{margin-top:44svh;margin-right:0;width:calc(max(var(--rand), (100% - 1240px) / 2 + var(--rand)) + 752px);padding:var(--a48) var(--a48) var(--a48) max(var(--rand), calc((100vw - 1240px) / 2 + var(--rand)))}
  .hero .blatt .innen{gap:var(--a20);max-width:704px}
  .hero .blatt .wortmarke{font-size:var(--s36);letter-spacing:.04em;margin:0}
  .hero .blatt .lead{margin-top:0;font-size:var(--s17)}
  .hero .blatt .reihe{margin-top:var(--a12);gap:var(--a12);flex-wrap:wrap}
  .hero .blatt .nur-gross{display:inline-flex}
  .hero .blatt .reihe .knopf svg{display:block}
  .hero .blatt .beweis .was{max-width:none}
  .hero .blatt .beweis{margin-left:auto;font-size:var(--s15);gap:var(--a12)}
  .hero .blatt .beweis .zahl{font-size:var(--s46)}
  .hero .blatt .fakten{margin-top:calc(var(--a12) - var(--a20))}
  .hero .aufkleber{right:0;top:0;transform:translate(50%,-50%) rotate(-4deg);padding:16px 20px}
  .hero .aufkleber .zahl{font-size:var(--s36)}
  @media (hover:hover){.hero .aufkleber:hover{transform:translate(50%,-50%) rotate(0deg) scale(1.04)}}
  .hero .buehne picture,.hero .buehne .poster,.hero .buehne video{height:130%}   /* Reserve für die Parallaxe (30 % nach unten) */
  .hero + .laufzeile{height:64px}
  .hero + .laufzeile .band{font-size:var(--s28)}
}
/* Knöpfe: Füllung Navy zu Tiefsee, Pfeil 4 px nach rechts, Glanz einmal von links nach rechts */
.knopf svg{transition:transform .15s ease}
.knopf:hover svg{transform:translateX(4px)}
.knopf:not(.zweit):hover{background:var(--tiefsee);border-color:var(--tiefsee)}
.knopf::before{content:"";position:absolute;top:0;bottom:0;left:-40%;width:30%;background:linear-gradient(90deg,transparent,rgba(251,247,241,.18),transparent);transform:skewX(-20deg);opacity:0;pointer-events:none}
@media (hover:hover){.knopf:not(.zweit):hover::before{animation:glanz .5s ease forwards}}
@keyframes glanz{from{left:-40%;opacity:1}to{left:120%;opacity:1}}
.knopf.zweit:hover{background:var(--weiss);border-color:var(--navy)}

@media (prefers-reduced-motion:reduce){.hero .buehne video{display:none}.hero .aufkleber{transition:none}}

.hero .wort{display:inline-block;color:inherit;transition:none}

/* iPhone: Kopf und Bühne reichen bis unter die Statusleiste, der Inhalt des Kopfs bleibt darunter */
.kopf{padding-top:env(safe-area-inset-top);height:calc(var(--kopf) + env(safe-area-inset-top))}
.hero .buehne{top:calc(-1 * env(safe-area-inset-top))}
.hero .kopfschleier{height:calc(160px + env(safe-area-inset-top))}


/* Bootsseiten (28.10.2026): Kopf mit Galerie, Preistafel, Fakten und Ausstattung. Nur Leiterwerte. */
.unterseite .bootkopf{padding-top:calc(var(--kopf) + var(--a32));padding-bottom:var(--a48)}
.brot{display:flex;flex-wrap:wrap;gap:var(--a8);font-size:var(--s13);color:var(--dunst);margin-bottom:var(--a20)}
.brot a:hover{color:var(--navy)}
.brot span::before{content:"›";margin-right:var(--a8);color:var(--linie)}
.bootkopf .kopfzeile{margin-bottom:var(--a20)}
.bootkopf .reihe{display:flex;flex-wrap:wrap;gap:var(--a12);align-items:center;margin-bottom:var(--a32)}
.stempel{display:inline-flex;flex-direction:column;align-items:flex-start;gap:0;background:var(--pink);color:var(--weiss);border-radius:var(--radius);padding:var(--a8) var(--a12);transform:rotate(-3deg);line-height:1;box-shadow:0 10px 24px -14px rgba(255,20,148,.6);transition:transform .2s ease}
.stempel:hover{transform:rotate(0) scale(1.03)}
.stempel .zahl{color:var(--weiss);font-size:var(--s28);font-weight:700}
.stempel .was{font-size:var(--s13);font-weight:600;opacity:.95;margin-top:2px}

/* Galerie: ein großes Bild, darunter ein Streifen zum Wischen */
.galerie{display:flex;flex-direction:column;gap:var(--a8)}
.galerie .gross{aspect-ratio:4/3;border-radius:var(--radius);overflow:hidden;background:var(--hauch)}
.galerie .gross img{width:100%;height:100%;object-fit:cover}
.galerie .streifen{display:flex;gap:var(--a8);overflow-x:auto;scrollbar-width:none;margin:0 calc(var(--rand) * -1);padding:0 var(--rand);scroll-snap-type:x mandatory;scroll-padding-left:var(--rand);scroll-padding-right:var(--rand)}
.galerie .streifen::-webkit-scrollbar{display:none}
.galerie .streifen .foto{flex:none;width:72%;aspect-ratio:4/3;border-radius:var(--radius);overflow:hidden;scroll-snap-align:start;background:var(--hauch)}
.galerie .streifen .foto.hoch{width:54%;aspect-ratio:3/4}
.galerie .streifen .foto img{width:100%;height:100%;object-fit:cover;transition:transform .6s cubic-bezier(.2,.8,.2,1)}
.galerie .streifen .foto:hover img{transform:scale(1.03)}
/* Clip-Kacheln (28.10.2026): Video füllt die Kachel wie ein Foto, kleines Zeichen unten links */
.galerie .streifen .foto{position:relative}
.galerie .streifen .foto video{display:block;width:100%;height:100%;object-fit:cover;background:var(--hauch)}
.galerie .streifen .foto .zeichen{position:absolute;left:var(--a8);bottom:var(--a8);background:var(--navy);color:var(--weiss);font-size:var(--s13);font-weight:600;line-height:1;padding:var(--a8) var(--a12);border-radius:999px;pointer-events:none}
@media (min-width:900px){
  .unterseite .bootkopf{padding-top:calc(var(--kopf) + var(--a48));padding-bottom:var(--a80)}
  .bootkopf .reihe{margin-bottom:var(--a48)}
  .galerie .gross{aspect-ratio:16/9}
  .galerie .streifen .foto{width:30%;aspect-ratio:4/3}
  .galerie .streifen .foto.hoch{width:22%}
}

/* Preise: Tafel aus Zeilen mit Linie, keine Kacheln */
.preise{background:var(--weiss)}
.preise .tafel{display:flex;flex-direction:column;border-top:1px solid var(--linie)}
.preise .zeile{display:flex;justify-content:space-between;align-items:center;gap:var(--a20);padding:var(--a12) 0;border-bottom:1px solid var(--linie)}
.preise .zeile .was{display:flex;flex-direction:column;gap:2px;font-weight:600;color:var(--navy);font-size:var(--s17)}
.preise .zeile .was small{font-size:var(--s13);font-weight:400;color:var(--dunst);line-height:1.35}
.preise .zeile .zahl{font-size:var(--preis);white-space:nowrap;line-height:1}
.preise .zeile .zahl.klein2{font-size:var(--s22);font-weight:600}
.preise .beispiel{margin-top:var(--a20);max-width:34em}
.preise .saison{margin-bottom:var(--a20)}
@media (min-width:900px){
  .preise .rahmen{display:grid;grid-template-columns:5fr 6fr;gap:var(--a20) var(--a80);align-items:start}
  .preise .kopfzeile{grid-column:1;margin-bottom:var(--a12)}
  .preise .saison{grid-column:1;margin-bottom:0}
  .preise .beispiel{grid-column:1;margin-top:var(--a12)}
  .preise .tafel{grid-column:2;grid-row:1 / span 3}
  .preise .zeile{padding:var(--a20) 0}
}

/* An Bord */
.ausstattung{background:var(--hauch)}
.fakten-raster{display:grid;grid-template-columns:repeat(2,1fr);gap:0 var(--a20);margin:0 0 var(--a32)}
.fakten-raster div{display:flex;flex-direction:column;gap:2px;padding:var(--a12) 0;border-top:1px solid var(--linie)}
.fakten-raster b{font-size:var(--s13);color:var(--dunst);font-weight:600}
.fakten-raster span{font-family:"Outfit","Figtree",sans-serif;font-size:var(--s22);color:var(--navy);font-weight:600;line-height:1.15;font-variant-numeric:tabular-nums}
.ausstattung .liste{display:grid;gap:var(--a8) var(--a20);list-style:none;margin:0;padding:0;font-size:var(--s17);color:var(--tinte)}
.ausstattung .liste li{position:relative;padding-left:22px}
.ausstattung .liste li::before{content:"";position:absolute;left:0;top:.55em;width:9px;height:9px;border-radius:50%;background:var(--navy);opacity:.7}
.ausstattung .extras{margin-top:var(--a32);max-width:40em}
.ausstattung .extras b{color:var(--navy)}
@media (min-width:900px){
  .fakten-raster{grid-template-columns:repeat(4,1fr);margin-bottom:var(--a48)}
  .fakten-raster div{padding:var(--a20) 0}
  .ausstattung .liste{grid-template-columns:repeat(3,1fr)}
}

/* Skipper kompakt: nur Text, kein Foto, auf Papier */
.skipper.kompakt{background:var(--papier)}
.skipper.kompakt .rahmen{display:block}
.skipper.kompakt .text{max-width:760px}

/* Fragen ohne Schritte, dünner */
.unterseite .ablauf{background:var(--weiss)}
.unterseite .ablauf .fragen{margin-top:0}

/* Andere Boote: Dreierraster, Fjord nicht breit */
.flotte.andere .raster .boot{grid-column:auto}

/* Unterseiten allgemein (28.10.2026): Seitenkopf wie Bootskopf, Tabellen, Rechtstexte */
.unterseite .seitenkopf{padding-top:calc(var(--kopf) + var(--a32));padding-bottom:var(--a48)}
.seitenkopf .kopfzeile{margin-bottom:var(--a20)}
.seitenkopf .reihe{display:flex;flex-wrap:wrap;gap:var(--a12);align-items:center;margin-bottom:var(--a32)}
.seitenkopf .galerie .gross{aspect-ratio:3/2}
@media (min-width:900px){
  .unterseite .seitenkopf{padding-top:calc(var(--kopf) + var(--a48));padding-bottom:var(--a80)}
  .seitenkopf .reihe{margin-bottom:var(--a48)}
  .seitenkopf .galerie .gross{aspect-ratio:21/9}
}
.vergleich,.termine{background:var(--weiss)}
.tabelle{overflow-x:auto;margin:0 calc(var(--rand) * -1);padding:0 var(--rand);scrollbar-width:thin}
.tabelle table{border-collapse:collapse;width:100%;min-width:720px;font-size:var(--s15);font-variant-numeric:tabular-nums}
.tabelle th,.tabelle td{text-align:left;padding:var(--a12) var(--a12) var(--a12) 0;border-bottom:1px solid var(--linie);vertical-align:top;color:var(--tinte)}
.tabelle thead th{font-size:var(--s13);font-weight:600;color:var(--dunst);border-bottom:1px solid var(--navy)}
.tabelle tbody th{font-weight:600;color:var(--navy)}
.tabelle tbody th small{display:block;font-size:var(--s13);font-weight:400;color:var(--dunst)}
.tabelle tbody th a:hover{text-decoration:underline}
.tabelle td b{color:var(--navy);font-family:"Outfit","Figtree",sans-serif;font-size:var(--s17)}
.termine .tabelle table{min-width:640px}
.termine .tabelle tbody th{vertical-align:top}
.kursinhalt .drei{display:grid;gap:var(--a32)}
.kursinhalt .drei h3{margin-bottom:var(--a8)}
.kursinhalt .drei p{color:var(--tinte)}
@media (min-width:900px){.kursinhalt .drei{grid-template-columns:repeat(3,1fr);gap:var(--a48)}}
.unterseite .schritte{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.unterseite .schritt{padding:var(--a12) 0;display:flex;gap:var(--a12);align-items:flex-start;border-top:1px solid var(--linie)}
.unterseite .schritt:last-child{border-bottom:1px solid var(--linie)}
.unterseite .schritt .nr{font-family:"Outfit",sans-serif;font-weight:700;color:var(--pink);font-size:var(--s28);min-width:1.4em;line-height:1.1}
.unterseite .schritt h3{font-size:var(--s19);margin-bottom:2px}
.unterseite .schritt .klein{font-size:var(--s15);max-width:40em}
@media (min-width:900px){.unterseite .schritt{padding:var(--a20) 0;gap:var(--a20)}.unterseite .schritt .nr{font-size:var(--s36)}}
.deckplan{max-width:760px;background:var(--weiss);border-radius:var(--radius);padding:var(--a12);margin-top:var(--a8)}
.recht .text{max-width:760px;display:flex;flex-direction:column;gap:var(--a12)}
.recht .text h2{font-size:var(--s22);margin-top:var(--a20)}
.recht .text p{color:var(--tinte)}
.recht .text a{color:var(--navy);text-decoration:underline;text-decoration-color:var(--linie);text-underline-offset:3px}
.recht .text .liste{display:flex;flex-direction:column;gap:var(--a8);list-style:none;margin:0;padding:0}
.recht .text .liste li{position:relative;padding-left:22px}
.recht .text .liste li::before{content:"";position:absolute;left:0;top:.55em;width:9px;height:9px;border-radius:50%;background:var(--navy);opacity:.7}
.skipper.kompakt .text > p{max-width:34em;color:var(--tinte)}

/* Lange deutsche Wörter in Überschriften am Handy trennen statt überlaufen */
.unterseite h1,.unterseite h2,.recht .text{hyphens:auto;-webkit-hyphens:auto;overflow-wrap:break-word}
@media (min-width:900px){.unterseite h1,.unterseite h2{hyphens:manual;-webkit-hyphens:manual}}

/* Anfrageformular mit echtem Versand (28.10.2026): Honeypot unsichtbar, Hinweis bei Fehlern, Danke-Block, Turnstile-Feld */
.formular .firma{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}
.formular{position:relative}
.formular .hinweis{color:var(--pink);font-weight:600}
.formular .danke{display:flex;flex-direction:column;gap:var(--a12);padding:var(--a12) 0}
.formular .danke h3{font-size:var(--s22)}
.formular .danke p{color:var(--tinte)}
.formular .cf-turnstile{min-height:65px}
.formular .knopf[disabled]{opacity:.6;cursor:wait}

/* Leuchtkasten (28.10.2026): Galeriefoto oder Clip groß über der Seite, Pfeile, Zähler, Esc schließt */
.galerie .klickbar{cursor:zoom-in}
.galerie .klickbar:focus-visible{outline:3px solid var(--pink);outline-offset:2px}
.leuchtkasten{position:fixed;inset:0;z-index:1000;display:none;align-items:center;justify-content:center;padding:var(--a48) var(--a12);background:rgba(10,11,72,.94)}
.leuchtkasten.offen{display:flex}
.leuchtkasten figure{margin:0;max-width:100%;max-height:100%;display:flex;align-items:center;justify-content:center}
.leuchtkasten img,.leuchtkasten video{display:block;max-width:100%;max-height:calc(100dvh - 96px);width:auto;height:auto;object-fit:contain;border-radius:var(--radius);box-shadow:0 30px 80px -30px rgba(0,0,0,.7);background:#000}
.leuchtkasten .zu,.leuchtkasten .pfeil{position:absolute;width:44px;height:44px;border:0;border-radius:999px;background:var(--weiss);color:var(--navy);display:flex;align-items:center;justify-content:center;cursor:pointer;padding:0;box-shadow:0 10px 24px -12px rgba(0,0,0,.5)}
.leuchtkasten .zu:hover,.leuchtkasten .pfeil:hover{background:var(--pink);color:var(--weiss)}
.leuchtkasten .zu{top:var(--a12);right:var(--a12)}
.leuchtkasten .pfeil{top:50%;transform:translateY(-50%)}
.leuchtkasten .zurueck{left:var(--a12)}
.leuchtkasten .zurueck svg{transform:rotate(180deg)}
.leuchtkasten .vor{right:var(--a12)}
.leuchtkasten .zaehler{position:absolute;bottom:var(--a12);left:50%;transform:translateX(-50%);margin:0;color:var(--weiss);font-size:var(--s13);font-variant-numeric:tabular-nums}
html.kasten-offen{overflow:hidden}
@media (min-width:900px){.leuchtkasten{padding:var(--a48) var(--a80)}.leuchtkasten .zu{top:var(--a20);right:var(--a20)}.leuchtkasten .zurueck{left:var(--a20)}.leuchtkasten .vor{right:var(--a20)}}

/* Blog (29.10.2026): Artikel mit Lesespalte, Kopfbild, Fotos im Text, Übersichtskarten */
.artikel .seitenkopf .kopfzeile{max-width:760px}
.artikel-kopf{margin:0;border-radius:var(--radius);overflow:hidden;background:var(--hauch)}
.artikel-kopf img{display:block;width:100%;height:auto}
.artikel-kopf.quadrat{max-width:640px}
@media (min-width:900px){.artikel-kopf:not(.quadrat){max-width:1000px}}
.artikel-text{background:var(--weiss)}
.artikel-text .text{max-width:720px;display:flex;flex-direction:column;gap:var(--a12)}
.artikel-text .text p{color:var(--tinte);font-size:var(--s17);line-height:1.6}
.artikel-text .text h2{font-size:var(--s28);margin-top:var(--a32)}
.artikel-text .text h2:first-child{margin-top:0}
.artikel-text .text h3{font-size:var(--s19);margin-top:var(--a12)}
.artikel-text .liste{display:flex;flex-direction:column;gap:var(--a8);list-style:none;margin:0;padding:0;font-size:var(--s17);color:var(--tinte);line-height:1.5}
.artikel-text .liste li{position:relative;padding-left:22px}
.artikel-text .liste li::before{content:"";position:absolute;left:0;top:.6em;width:9px;height:9px;border-radius:50%;background:var(--pink)}
.artikel-text .liste b{color:var(--navy)}
.artikel-foto{margin:var(--a20) 0;border-radius:var(--radius);overflow:hidden;max-width:420px}
.artikel-foto img{display:block;width:100%;height:auto}
.artikel-cta .reihe{display:flex;flex-wrap:wrap;gap:var(--a12);margin-top:var(--a20)}
.artikel-cta .weiter{display:flex;flex-direction:column;gap:var(--a8);margin-top:var(--a48)}
.blograster{display:grid;gap:var(--a20)}
.blogkarte{display:flex;flex-direction:column;background:var(--weiss);border:1px solid var(--linie);border-radius:var(--radius);overflow:hidden;transition:transform .25s ease,box-shadow .25s ease}
.blogkarte:hover{transform:translateY(-4px);box-shadow:0 20px 40px -24px rgba(10,11,72,.35)}
.blogkarte .foto{aspect-ratio:4/3;overflow:hidden;background:var(--hauch)}
.blogkarte .foto img{width:100%;height:100%;object-fit:cover;transition:transform .6s cubic-bezier(.2,.8,.2,1)}
.blogkarte:hover .foto img{transform:scale(1.04)}
.blogkarte .inhalt{display:flex;flex-direction:column;gap:var(--a8);padding:var(--a20)}
.blogkarte h2{font-size:var(--s22)}
@media (min-width:900px){.blograster{grid-template-columns:repeat(3,1fr)}}
.artikel-cta .weiterlink{display:flex;justify-content:space-between;align-items:center;gap:var(--a12);padding:var(--a12) 0;border-top:1px solid var(--linie);font-weight:600;color:var(--navy);font-size:var(--s17)}
.artikel-cta .weiterlink:last-child{border-bottom:1px solid var(--linie)}
.artikel-cta .weiterlink .pfeil{color:var(--pink);flex:none;display:inline-flex}
.artikel-cta .weiterlink .pfeil svg{width:18px;height:18px}
.artikel-cta .weiterlink:hover{color:var(--pink)}

/* Sprachwahl im Kopf (29.10.2026): DE · EN · ES, die eigene Sprache ohne Link. Ausgeschrieben in Menükarte und Fuß (.sprachen-liste). */
.kopf .sprachen{display:flex;align-items:center;gap:var(--a4);font-size:var(--s13);font-weight:600;letter-spacing:.04em}
.kopf .sprachen a,.kopf .sprachen b{display:inline-flex;align-items:center;justify-content:center;min-width:34px;height:34px;padding:0 var(--a8);border-radius:999px;color:var(--navy);text-decoration:none;border:1px solid transparent;transition:border-color .2s,background .2s}
.kopf .sprachen b{border-color:var(--linie);background:var(--weiss)}
.kopf .sprachen a:hover{border-color:var(--linie)}
.kopf:not(.fest) .sprachen a,.kopf:not(.fest) .sprachen b{color:var(--t1)}
.kopf:not(.fest) .sprachen b{background:rgba(251,247,241,.12);border-color:rgba(251,247,241,.45)}
.kopf:not(.fest) .sprachen a:hover{border-color:rgba(251,247,241,.45)}
.sprachen-liste a{color:inherit;text-decoration:underline;text-underline-offset:3px}
.sprachen-liste b{font-weight:600}

/* Verfügbarkeitskalender auf den Bootsseiten (29.10.2026) */
.anfrage .kalender{grid-column:1 / -1;display:flex;flex-direction:column;gap:var(--a12);padding:var(--a20);background:var(--weiss);border:1px solid var(--linie);border-radius:var(--radius)}
.kalender .kal-kopf{display:flex;align-items:flex-end;justify-content:space-between;gap:var(--a12)}
.kalender .kal-kopf h3{font-size:var(--s22)}
.kalender .kal-nav{display:flex;gap:var(--a4);flex:none}
.kalender .kal-nav button{width:40px;height:40px;border-radius:10px;border:1px solid var(--linie);background:var(--papier);color:var(--navy);cursor:pointer;display:inline-flex;align-items:center;justify-content:center}
.kalender .kal-nav button svg{width:18px;height:18px}
.kalender .kal-nav .zurueck svg{transform:rotate(180deg)}
.kalender .kal-nav button:disabled{opacity:.35;cursor:default}
.kalender .monate{display:grid;grid-template-columns:1fr;gap:var(--a20)}
@media (min-width:700px){.kalender .monate{grid-template-columns:1fr 1fr;gap:var(--a32)}}
@media (max-width:699px){.kalender .monate .monat:nth-child(2){display:none}}
.kalender .monat{max-width:372px}
.kalender .monat .titel{font-family:"Outfit",sans-serif;font-weight:600;color:var(--navy);font-size:var(--s17);margin-bottom:var(--a8)}
.kalender .raster{display:grid;grid-template-columns:repeat(7,1fr);gap:var(--a4)}
.kalender .raster .wt{font-size:var(--s13);color:var(--dunst);text-align:center;padding:var(--a4) 0}
.kalender .raster .tag{display:flex;align-items:center;justify-content:center;aspect-ratio:1;border-radius:8px;font-size:var(--s15);font-variant-numeric:tabular-nums;border:1px solid transparent;background:var(--papier);color:var(--tinte);font:inherit;font-size:var(--s15)}
.kalender .raster button.tag{cursor:pointer}
.kalender .raster .frei{background:#E6F7EC;color:#0B5B2B;border-color:#CDEFD9}
.kalender .raster button.frei:hover{background:#CDEFD9}
.kalender .raster .halb{background:linear-gradient(135deg,#E6F7EC 50%,#FFE3F1 50%);color:#0B5B2B;border-color:#CDEFD9}
.kalender .raster .halb.vormittag{background:linear-gradient(135deg,#FFE3F1 50%,#E6F7EC 50%)}
.kalender .raster .belegt{background:#FFE3F1;color:#9A0A5A;text-decoration:line-through;border-color:#FFC9E4}
.kalender .raster .aus,.kalender .raster .vergangen{color:var(--dunst);opacity:.45}
.kalender .raster .tag.gewaehlt,.kalender .raster button.tag.gewaehlt:hover{outline:2px solid var(--navy);outline-offset:1px;font-weight:700;background:var(--navy);color:var(--papier)}
.kalender .raster .tag.dazwischen,.kalender .raster button.tag.dazwischen:hover{background:rgba(10,11,72,.14);color:var(--navy);border-radius:0}
.kalender .legende{display:flex;gap:var(--a12) var(--a20);flex-wrap:wrap}
.kalender .legende i{display:inline-block;width:12px;height:12px;border-radius:3px;vertical-align:-1px;margin-right:6px;border:1px solid var(--linie)}
.kalender .legende .frei{background:#E6F7EC}.kalender .legende .halb{background:linear-gradient(135deg,#E6F7EC 50%,#FFE3F1 50%)}.kalender .legende .belegt{background:#FFE3F1}.kalender .legende .aus{background:var(--papier);opacity:.6}
.kalender .gewaehlt-hinweis{color:var(--navy);font-weight:600}
/* 30.10.2026: Galerien der C46 und SR36 auf der Wochencharter-Seite */
.ausstattung .galerie{margin:0 0 var(--a32)}