:root{
  --paper:#F2F7FA;
  --card:#FFFFFF;
  --ink:#0B1E2A;
  --muted:#5C7385;

  --sea:#0E5C74;
  --deep:#0A2C44;
  --abyss:#061523;

  --gold:#B8863B;
  --gold-hi:#D9A85C;
  --gold-soft:#EBD3A4;

  --edge:rgba(11,30,42,.11);
  --edge-hi:rgba(184,134,59,.55);
  --glass:rgba(255,255,255,.72);

  --r-lg:26px; --r-md:18px; --r-sm:12px;
  --shadow:0 26px 55px -32px rgba(11,30,42,.42);
  --shadow-lift:0 38px 75px -34px rgba(11,30,42,.5), 0 0 0 1px var(--edge-hi);
  --glow:0 0 34px -10px rgba(184,134,59,.6);

  --display:"Bricolage Grotesque",system-ui,sans-serif;
  --body:"Source Serif 4",Georgia,serif;
  --mono:"IBM Plex Mono",ui-monospace,monospace;
  --pad:clamp(1.25rem,5vw,2.5rem); --maxw:1240px;
  --header-h:5.3rem; /* Hoehe der stickyen Kopfleiste, siehe header.site.
                        Gemessen nach Vergroesserung von Logo und Navigation. */
  --ease:cubic-bezier(.22,.61,.36,1);
}

/* Browser-Oberflaechen aus der Palette statt aus den Standardwerten */
::selection{background:var(--gold-soft);color:var(--abyss)}
html{scrollbar-color:var(--gold) rgba(11,30,42,.08);scrollbar-width:thin}
input,textarea,select{caret-color:var(--gold)}
a{text-underline-offset:.18em;text-decoration-thickness:from-font}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:6.5rem;background:var(--paper)}
body{
  margin:0;color:var(--ink);font-family:var(--body);
  font-size:clamp(1rem,.96rem + .25vw,1.09rem);line-height:1.65;font-weight:400;
  background:var(--paper);overflow-x:hidden;-webkit-font-smoothing:antialiased;
}
body::before{
  content:"";position:fixed;inset:0;z-index:-2;pointer-events:none;
  background:
    radial-gradient(110% 65% at 10% -8%, rgba(14,92,116,.13), transparent 62%),
    radial-gradient(85% 55% at 92% 4%, rgba(184,134,59,.10), transparent 62%);
}
img,video{max-width:100%;display:block}
a{color:inherit}
h1,h2,h3,h4,.mono,.btn,nav,label,.kicker{font-family:var(--display)}
h1,h2,h3{font-weight:800;line-height:1.05;letter-spacing:-.03em;margin:0}
h1{font-size:clamp(2.4rem,6vw,4.6rem)}
h2{font-size:clamp(1.9rem,4.2vw,3rem);color:var(--ink)}
h3{font-size:clamp(1.2rem,2.1vw,1.6rem);font-weight:700;letter-spacing:-.02em}
p{margin:0 0 1em}p:last-child{margin-bottom:0}
.mono{font-family:var(--mono);font-size:.67rem;letter-spacing:.18em;text-transform:uppercase;color:var(--muted)}
.wrap{max-width:var(--maxw);margin-inline:auto;padding-inline:var(--pad)}
section{padding:clamp(4rem,10vh,7rem) 0;position:relative}

/* Übergang ins tiefe Blau */
.deepfade{height:clamp(150px,20vh,260px);
  background:linear-gradient(180deg,var(--paper) 0%,#8FB6C9 38%,#1B5A78 74%,var(--deep) 100%)}
.dark{background:var(--deep);color:#E9F1F7}
.dark h2{color:#fff}
.dark h3{color:#fff}
.dark .mono{color:rgba(233,241,247,.65)}

/* ---------- Knöpfe ---------- */
.btn{
  display:inline-block;border:1px solid transparent;border-radius:999px;
  background:linear-gradient(135deg,var(--gold-hi),var(--gold));
  color:#1B1205;padding:.78rem 1.5rem;
  font-size:.73rem;letter-spacing:.12em;text-transform:uppercase;font-weight:600;
  text-decoration:none;cursor:pointer;
  box-shadow:0 12px 28px -16px rgba(184,134,59,.9);
  transition:transform .45s var(--ease),box-shadow .45s var(--ease),filter .45s var(--ease);
}
.btn:hover,.btn:focus-visible{transform:translateY(-2px);filter:brightness(1.06);
  box-shadow:0 20px 42px -16px rgba(184,134,59,.95), var(--glow)}
.btn.wait{background:rgba(11,30,42,.04);color:var(--muted);border-color:var(--edge);box-shadow:none}
.btn.wait:hover{color:var(--ink);border-color:var(--ink);background:transparent;box-shadow:none}
.btn.on-dark{background:rgba(255,255,255,.1);color:#fff;border-color:rgba(255,255,255,.45);
  backdrop-filter:blur(10px);box-shadow:none}
.btn.on-dark:hover{background:#fff;color:var(--ink);border-color:#fff}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px}

/* ---------- Kopfleiste ---------- */
header.site{position:sticky;top:0;z-index:60;padding-top:.85rem;background:transparent}
header .bar{
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding:.6rem .8rem .6rem 1.1rem;
  background:rgba(255,255,255,.68);backdrop-filter:blur(18px) saturate(1.5);
  -webkit-backdrop-filter:blur(18px) saturate(1.5);
  border:1px solid var(--edge);border-radius:999px;
  box-shadow:0 18px 40px -30px rgba(11,30,42,.6);
  transition:background .5s var(--ease),box-shadow .5s var(--ease);
}
header.scrolled .bar{background:rgba(255,255,255,.9);box-shadow:0 20px 46px -28px rgba(11,30,42,.5)}
.brand{display:flex;align-items:center;gap:.72rem;text-decoration:none;line-height:0}
.brand .mark{height:50px;width:auto}
.brand .wort{height:29px;width:auto}
@media(max-width:460px){.brand .wort{display:none}}
header nav{display:none;gap:1.35rem}
header nav a{font-size:.88rem;letter-spacing:.02em;text-decoration:none;color:var(--muted);
  transition:color .35s var(--ease);white-space:nowrap}
header nav a:hover{color:var(--gold)}
/* Waagerechte Leiste ab 1040px. Frueher lag die Grenze bei 1280 wegen Tagline
   und einem zweiten Knopf — beide sind seit August raus, und die drei
   laengsten Eintraege heissen jetzt kurz ("Reisen", "Tiere", "Guides").
   Massgeblich ist die englische Fassung, sie ist rund 40px breiter als die
   deutsche: gemessen brauchte sie bei 1280px einmal 1208 von 1210 verfuegbaren
   Pixeln. Zwischen 1040 und 1280 greift darum die kompakte Stufe unten. */
@media(min-width:1040px){header nav{display:flex}}

/* Kompakte Stufe: engere Abstaende, etwas kleinere Schrift und Logo. Ab 1280px
   gelten wieder die luftigen Ausgangswerte. Kleinster Wert ist .7rem (11.2px)
   am Verfuegbarkeit-Knopf — bewusst ueber der Lesbarkeitsgrenze von 11px.
   "header .bar .btn" statt ".btn", damit der Knopf im Klappmenue unberuehrt
   bleibt. */
@media(min-width:1040px) and (max-width:1279.98px){
  header .bar{gap:.7rem}
  header nav{gap:.9rem}
  header nav a{font-size:.8rem}
  .brand{gap:.55rem}
  .brand .mark{height:42px}
  .brand .wort{height:24px}
  .langswitch-btn{width:2.2rem;height:2.2rem}
  header .bar .btn{padding:.7rem 1rem;font-size:.7rem}
}

/* Unterhalb 1240px war die Pille randbuendig — die Leiste ist auf 1240px
   begrenzt, und darunter blieb kein Platz mehr daneben. Fiel kaum auf, solange
   dort nur die kurze Leiste stand; mit voller Navigation waere es sichtbar.
   Nur ab 1040px gesetzt, damit sich auf Telefon und Tablet nichts aendert. */
@media(min-width:1040px){header.site{padding-inline:1.25rem}}

/* Sprachumschalter: kleiner Knopf "DE" neben Verfuegbarkeit, oeffnet ein
   Mini-Menue mit den zwei Sprachversionen. Erscheint doppelt pro Seite
   (Kopfleiste + Klappmenue), daher rein klassenbasiert statt per id. */
.langswitch{position:relative}
.langswitch-btn{display:inline-flex;align-items:center;justify-content:center;
  width:2.5rem;height:2.5rem;border-radius:999px;border:1px solid var(--edge);
  background:transparent;color:var(--ink);font-size:.78rem;letter-spacing:.03em;
  cursor:pointer;transition:border-color .25s var(--ease),background .25s var(--ease)}
.langswitch-btn:hover{border-color:var(--gold-hi);background:rgba(184,134,59,.08)}
.langswitch-btn:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.langswitch-menu{position:absolute;top:calc(100% + .6rem);right:0;z-index:70;
  min-width:9.5rem;padding:.4rem;display:none;
  background:var(--card);border:1px solid var(--edge);border-radius:var(--r-md);
  box-shadow:var(--shadow)}
.langswitch.offen .langswitch-menu{display:block}
.langswitch-menu a{display:block;padding:.55rem .8rem;border-radius:var(--r-sm);
  color:var(--ink);text-decoration:none;font-size:.92rem;transition:background .2s var(--ease)}
.langswitch-menu a:hover{background:var(--paper)}
.langswitch-menu a[aria-current]{color:var(--gold);font-weight:600}
/* Im Klappmenue steht der Umschalter links ausgerichtet, nicht rechts. */
.mobilnav .langswitch-menu{left:0;right:auto}


/* ---------- Medien ---------- */
.media{position:relative;overflow:hidden;border-radius:var(--r-lg);
  background:linear-gradient(160deg,#DCE9F0,#B9CFDC);
  border:1px solid var(--edge);box-shadow:var(--shadow)}
.media img,.media video{width:100%;height:100%;object-fit:cover;
  transition:transform 1.1s var(--ease)}

/* Native Abspiel-Bedienung ausblenden. Ohne das legt Safari eine grosse
   Start-Schaltflaeche ueber das Standbild und Chrome blendet beim Zeigen
   eine Bild-in-Bild-Taste ein. Die Videos hier sind Bildmaterial, nicht
   abspielbare Inhalte — sie brauchen keine Bedienelemente. */
.media video{pointer-events:none}
/* Jede Regel einzeln: kennt ein Browser eines dieser Pseudoelemente nicht,
   verwirft er sonst die gesamte Selektorliste und damit auch die, die er
   kennt. */
.media video::-webkit-media-controls{display:none !important;-webkit-appearance:none}
.media video::-webkit-media-controls-enclosure{display:none !important}
.media video::-webkit-media-controls-panel{display:none !important}
.media video::-webkit-media-controls-play-button{display:none !important}
.media video::-webkit-media-controls-overlay-play-button{display:none !important;opacity:0}
.media video::-webkit-media-controls-start-playback-button{display:none !important;-webkit-appearance:none}
.media video::-internal-media-controls-overlay-cast-button{display:none !important}
.media:hover img,.media:hover video{transform:scale(1.04)}
.media .ph{position:absolute;inset:0;display:none;place-items:center;text-align:center;padding:1.2rem}
.media .ph .mono{color:var(--muted);line-height:1.9}
.media.missing img,.media.missing video{display:none}
.media.missing .ph{display:grid}
.media.missing{border-style:dashed}
.media .badge{position:absolute;left:.85rem;top:.85rem;z-index:2;
  background:rgba(255,255,255,.85);backdrop-filter:blur(10px);border:1px solid var(--edge);
  color:var(--gold);font-family:var(--mono);font-size:.6rem;letter-spacing:.14em;
  text-transform:uppercase;padding:.4rem .75rem;border-radius:999px}

/* ---------- Hero ---------- */
.hero{
  position:relative; overflow:hidden; color:#fff;
  /* Die Kopfleiste ist sticky und steht im Fluss: ihre Hoehe abziehen,
     sonst ragt der Hero unter die Falz und die Knoepfe verschwinden. */
  min-height:calc(100svh - var(--header-h));
  display:flex; align-items:flex-end;
}
.hero .bg{position:absolute;inset:0;z-index:0;border:0;border-radius:0;box-shadow:none}
.hero .bg video,.hero .bg img{width:100%;height:100%;object-fit:cover;object-position:center}
.hero .bg:hover video,.hero .bg:hover img{transform:none}

/* Verdunklung: traegt den Textkontrast und fuehrt ins Papierweiss der Folgesektion */
.hero::after{
  content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:
    linear-gradient(180deg,
      rgba(6,21,35,.58)  0%,
      rgba(6,21,35,.16) 30%,
      rgba(6,21,35,.72) 72%,
      rgba(6,21,35,.90) 92%,
      var(--paper)     100%),
    radial-gradient(120% 78% at 12% 82%, rgba(6,21,35,.42), transparent 62%);
}

/* Logo-Thema: die Wal-Kontur der Wortmarke, angeschnitten und fast unsichtbar */
.hero-sigil{
  position:absolute; z-index:1; right:-8%; bottom:14%;
  width:min(52vw,760px); height:auto;
  fill:var(--gold); opacity:.085;
  mix-blend-mode:screen; pointer-events:none;
}
@media(max-width:900px){.hero-sigil{display:none}}

.hero .inner{
  position:relative; z-index:2; width:100%;
  padding-block:clamp(3rem,7vh,6rem) clamp(3rem,7vh,5.5rem);
  padding-bottom:max(clamp(3rem,7vh,5.5rem), env(safe-area-inset-bottom));
}
.hero .mono{color:rgba(255,255,255,.8)}

.hero h1{
  /* Breiter und kleiner als zuvor: die Ueberschrift traegt jetzt einen
     ganzen Satz statt drei Woerter. Bei 15ch/5.25rem lief er ueber fuenf
     Zeilen und der Hero ragte unter die Falz. */
  max-width:26ch; margin:0;
  font-weight:800; letter-spacing:-.03em; line-height:1.04;
  font-size:clamp(1.95rem,4.1vw,3.15rem);
  text-wrap:balance; color:#fff;
  text-shadow:0 2px 30px rgba(4,16,28,.55);
}
.hero h1 span{
  display:block; margin-top:1.15rem;
  font-family:var(--body); font-weight:300;
  font-size:clamp(1.2rem,2.45vw,1.95rem);
  letter-spacing:-.005em; line-height:1.28;
  color:rgba(255,255,255,.88);
  text-wrap:balance; text-shadow:0 1px 18px rgba(4,16,28,.5);
}

.hero .lede{
  max-width:56ch; margin:2.4rem 0 0;
  font-size:clamp(1rem,1.15vw,1.11rem); line-height:1.72;
  color:rgba(255,255,255,.9);
  text-shadow:0 1px 16px rgba(4,16,28,.55);
}

.hero .cta{display:flex;flex-wrap:wrap;gap:.7rem;margin-top:2.6rem}

.hero-credit{
  position:absolute; z-index:2; right:var(--pad); bottom:1.6rem; margin:0;
  color:rgba(255,255,255,.66); font-size:.62rem;
}
@media(max-width:820px){.hero-credit{display:none}}

/* Der eine inszenierte Moment: das Bild setzt sich, der Text kommt zur Ruhe.
   Ausgangszustand ist sichtbar — ohne Animation fehlt nichts. */
@media(prefers-reduced-motion:no-preference){
  .hero h1,
  .hero h1 span,
  .hero .lede,
  .hero .cta{animation:hero-settle 1.15s cubic-bezier(.16,1,.3,1) backwards}
  .hero h1{animation-delay:.05s}
  .hero h1 span{animation-delay:.16s}
  .hero .lede{animation-delay:.26s}
  .hero .cta{animation-delay:.36s}
  .hero .bg{animation:hero-breathe 1.6s cubic-bezier(.16,1,.3,1) backwards}
}
@keyframes hero-settle{
  from{opacity:0; transform:translateY(1.15rem); filter:blur(7px)}
  to  {opacity:1; transform:none;               filter:blur(0)}
}
@keyframes hero-breathe{
  from{transform:scale(1.045); filter:saturate(.82)}
  to  {transform:none;         filter:saturate(1)}
}

/* ---------- Kennzahlenleiste ---------- */
.stripe{background:transparent;padding:0;margin-top:-3rem;position:relative;z-index:5}
/* 190px, nicht 150: bei 150 blieben zwischen 760 und 1050 Viewport-Breite
   fuenf Spalten stehen, in denen "4 Ausfahrten" und "2 Fachleute"
   abgeschnitten wurden. */
.stripe .grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));
  background:rgba(255,255,255,.82);backdrop-filter:blur(16px) saturate(1.4);
  -webkit-backdrop-filter:blur(16px) saturate(1.4);
  border:1px solid var(--edge);border-radius:var(--r-lg);box-shadow:var(--shadow);overflow:hidden}
.stripe .grid div{padding:1.35rem 1.3rem;border-right:1px solid var(--edge)}
.stripe .grid div:last-child{border-right:0}
.stripe b{display:block;font-family:var(--display);font-size:1.4rem;font-weight:700;
  letter-spacing:-.03em;color:var(--ink)}
.stripe span{font-family:var(--mono);font-size:.6rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--muted)}

.split{display:grid;gap:2.5rem}
@media(min-width:900px){.split{grid-template-columns:1fr 1fr;gap:4rem;align-items:start}}

/* ---------- Expeditionen ---------- */
.expedition{margin-top:3.4rem;padding-top:3rem;border-top:1px solid var(--edge)}
.expedition:first-of-type{border-top:0;padding-top:0;margin-top:2.6rem}
.exp-head{display:grid;gap:1.2rem}
@media(min-width:820px){.exp-head{grid-template-columns:1fr auto;align-items:end;gap:2.5rem}}
.kicker{display:inline-block;border-radius:999px;padding:.42rem .9rem;
  background:linear-gradient(135deg,rgba(217,168,92,.22),rgba(184,134,59,.10));
  border:1px solid var(--edge-hi);color:var(--gold);
  font-size:.58rem;letter-spacing:.17em;text-transform:uppercase;font-family:var(--mono)}
.exp-head h3{margin-top:1rem;font-size:clamp(1.55rem,2.9vw,2.15rem);font-weight:800}
.exp-head p{margin-top:.95rem;max-width:62ch;color:var(--muted)}
.whaleart{width:100%;max-width:230px;opacity:.85}
.whaleart path{fill:rgba(14,92,116,.5)}
.whaleart circle{fill:var(--gold)}

.exp-grid{display:grid;gap:1.3rem;margin-top:2rem}
@media(min-width:980px){.exp-grid{grid-template-columns:1.55fr 1fr;align-items:start}}
.yrs{display:grid;gap:1.3rem}
@media(min-width:560px){.yrs{grid-template-columns:1fr 1fr}}

.yr{display:flex;flex-direction:column;overflow:hidden;
  background:var(--glass);backdrop-filter:blur(14px) saturate(1.3);
  -webkit-backdrop-filter:blur(14px) saturate(1.3);
  border:1px solid var(--edge);border-radius:var(--r-lg);box-shadow:var(--shadow);
  transition:transform .5s var(--ease),box-shadow .5s var(--ease),border-color .5s var(--ease)}
.yr:hover{transform:translateY(-6px);box-shadow:var(--shadow-lift);border-color:var(--edge-hi)}
.yr > h4{margin:0;padding:.95rem 1.25rem;
  background:linear-gradient(135deg,var(--deep),#124760);
  border-bottom:1px solid var(--edge);
  font-size:1.2rem;font-weight:700;letter-spacing:-.02em;color:#fff;
  display:flex;align-items:baseline;justify-content:space-between;gap:.8rem}
.yr > h4 i{font-style:normal;font-family:var(--mono);font-size:.55rem;letter-spacing:.14em;
  text-transform:uppercase;color:rgba(255,255,255,.6);font-weight:400}
.yr .b{padding:1.25rem;display:flex;flex-direction:column;flex:1;background:rgba(255,255,255,.55)}
.lbl{font-family:var(--mono);font-size:.56rem;letter-spacing:.17em;text-transform:uppercase;
  color:var(--muted);margin:1.4rem 0 .4rem}
.lbl:first-child{margin-top:0}
.row{display:flex;align-items:center;justify-content:space-between;gap:.7rem;
  padding:.45rem 0;border-bottom:1px solid var(--edge)}
.row .d{font-family:var(--display);font-weight:600;font-size:.93rem;letter-spacing:-.01em;
  text-decoration:none;transition:color .35s var(--ease)}
.row a.d:hover,.row a.d:focus-visible{color:var(--gold)}
.row.voll .d{color:var(--muted);font-weight:400}
.chip{font-family:var(--mono);font-size:.52rem;letter-spacing:.11em;text-transform:uppercase;
  padding:.3rem .6rem;white-space:nowrap;border-radius:999px;border:1px solid transparent}
.chip.full{background:rgba(11,30,42,.06);color:var(--muted);border-color:var(--edge)}
.chip.few{background:linear-gradient(135deg,var(--gold-hi),var(--gold));color:#1B1205;
  box-shadow:0 6px 16px -8px rgba(184,134,59,.9)}
.chip.open{background:rgba(14,92,116,.10);color:var(--sea);border-color:rgba(14,92,116,.28)}
.prow{display:flex;justify-content:space-between;gap:.7rem;padding:.42rem 0;
  font-size:.9rem;color:var(--muted)}
.prow b{font-family:var(--display);font-weight:700;color:var(--ink)}
.prow.first{border-bottom:1px solid var(--edge);padding-bottom:.65rem}
.yr .btnwrap{margin-top:auto;padding-top:1.6rem}
.yr .btn{display:block;text-align:center}
.exp-media{margin:0;align-self:start;aspect-ratio:auto;background:#DCE9F0}
.exp-media img{width:100%;height:auto;object-fit:contain}
.exp-media:hover img{transform:none}

/* ---------- Vorteile ---------- */
.perks{display:grid;gap:1.1rem;margin-top:2.6rem}
@media(min-width:640px){.perks{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1040px){.perks{grid-template-columns:repeat(4,1fr)}}
.perks div{padding:1.7rem 1.4rem;border-radius:var(--r-md);
  background:var(--glass);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  border:1px solid var(--edge);box-shadow:var(--shadow);
  transition:transform .5s var(--ease),border-color .5s var(--ease),box-shadow .5s var(--ease)}
.perks div:hover{transform:translateY(-5px);border-color:var(--edge-hi);box-shadow:var(--shadow-lift)}
.perks .n{font-family:var(--mono);font-size:.62rem;letter-spacing:.16em;color:var(--gold)}
.perks h4{margin:.75rem 0 .6rem;font-size:1.03rem;font-weight:700;letter-spacing:-.02em;color:var(--ink)}
.perks p{font-size:.93rem;color:var(--muted)}

/* ---------- Hotelausstattung ----------
   Mehrspaltige Themenlisten. Bewusst keine Karten wie bei .perks: das
   sind Aufzaehlungen, keine gleichrangigen Verkaufsargumente. */
.ausstattung{display:grid;gap:1.9rem 2.6rem;margin-top:2.2rem}
@media(min-width:640px){.ausstattung{grid-template-columns:1fr 1fr}}
@media(min-width:1040px){.ausstattung{grid-template-columns:repeat(3,1fr)}}
.ausstattung h4{margin:0;font-family:var(--display);font-size:.74rem;
  letter-spacing:.16em;text-transform:uppercase;color:var(--gold);font-weight:600}
.ausstattung ul{margin:.85rem 0 0;padding-left:1.15em}
.ausstattung li{margin-top:.45rem;font-size:.92rem;color:var(--muted)}
.ausstattung li::marker{color:var(--gold)}

/* ---------- Bildstrecken ---------- */
.band{margin:2.6rem 0 0;aspect-ratio:21/9;border-radius:var(--r-lg)}
@media(max-width:700px){.band{aspect-ratio:16/10}}
.caption{margin-top:.85rem;color:var(--muted);opacity:.85}

/* "Wo Sie starten" am Ende des Reisen-Abschnitts. Das Strandbild laeuft im
   nativen Panoramaformat, damit nichts vom Berg abgeschnitten wird. Das
   Bootsbild bekommt bewusst kein festes Verhaeltnis: Es bestimmt seine Hoehe
   selbst, so passt jedes gelieferte Format ohne Beschnitt. */
.revier{margin-top:3.6rem;padding-top:2.8rem;border-top:1px solid var(--edge)}
.revier p{margin-top:1.1rem;max-width:62ch;color:var(--muted)}
.revier p.caption{margin-top:.85rem}
.revierband{margin:2.2rem 0 0;aspect-ratio:1002/414}
.photos,.gallery{display:grid;gap:1.1rem;margin-top:1.6rem;grid-template-columns:repeat(2,1fr)}

/* Bilder, die sich vergroessern lassen: Cursor als Hinweis, Fokusring fuer
   Tastaturbedienung (die Kacheln sind Divs mit tabindex, keine Buttons). */
[data-lightbox] .media{cursor:pointer}
[data-lightbox] .media:focus-visible{outline:2px solid var(--gold);outline-offset:3px}

/* Lightbox: dunkles Overlay, ein Bild mittig, Pfeile links/rechts, Zaehler
   unten. Kein Uebergang beim Oeffnen/Schliessen noetig, es geht nur ums
   Vergroessern, nicht um Bewegung. */
.lightbox{position:fixed;inset:0;z-index:80;display:grid;place-items:center;
  padding:clamp(1rem,5vw,3rem);background:rgba(6,21,35,.92);backdrop-filter:blur(6px)}
.lightbox[hidden]{display:none}
.lb-figure{margin:0;max-width:min(94vw,1100px);max-height:84vh}
.lb-img{display:block;max-width:100%;max-height:84vh;width:auto;height:auto;
  margin:0 auto;border-radius:var(--r-md);box-shadow:var(--shadow-lift)}
.lb-close,.lb-nav{position:absolute;width:2.8rem;height:2.8rem;border-radius:999px;
  border:1px solid rgba(255,255,255,.28);background:rgba(255,255,255,.12);
  backdrop-filter:blur(6px);color:#fff;font-size:1.5rem;line-height:1;
  display:grid;place-items:center;cursor:pointer;transition:background .2s var(--ease)}
.lb-close:hover,.lb-nav:hover{background:rgba(255,255,255,.24)}
.lb-close:focus-visible,.lb-nav:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.lb-close{top:1.1rem;right:1.1rem}
.lb-nav{top:50%;translate:0 -50%}
.lb-prev{left:1.1rem} .lb-next{right:1.1rem}
.lb-count{position:absolute;left:0;right:0;bottom:1rem;text-align:center;color:rgba(255,255,255,.72)}
.gallery figure,.photos figure{margin:0}
@media(min-width:880px){.photos{grid-template-columns:repeat(4,1fr)}
  .photos .media:first-child{grid-column:span 2;grid-row:span 2;aspect-ratio:auto;min-height:100%}}
@media(min-width:900px){.gallery{grid-template-columns:repeat(4,1fr)}
  .gallery .media:first-child{grid-column:span 2;grid-row:span 2;aspect-ratio:auto;min-height:100%}}
.photos .media{aspect-ratio:4/5}
.gallery .media{aspect-ratio:4/3}

.reels{display:flex;gap:1.1rem;margin-top:2.6rem;overflow-x:auto;padding:.3rem .3rem 1.2rem;
  scroll-snap-type:x mandatory;scrollbar-width:thin}
.reels .media{flex:0 0 clamp(200px,58vw,268px);aspect-ratio:9/16;scroll-snap-align:start}
.reels::-webkit-scrollbar{height:6px}
.reels::-webkit-scrollbar-thumb{background:rgba(184,134,59,.5);border-radius:999px}

/* ---------- Ablauf ---------- */
.steps{margin-top:2.6rem}
.steps > div{display:grid;grid-template-columns:auto 1fr;gap:.9rem 1.2rem;
  padding:1.5rem 1.4rem;margin-bottom:.8rem;border-radius:var(--r-md);
  background:rgba(255,255,255,.6);border:1px solid var(--edge);
  transition:background .5s var(--ease),border-color .5s var(--ease),transform .5s var(--ease)}
.steps > div:hover{background:#fff;border-color:var(--edge-hi);transform:translateX(4px);
  box-shadow:var(--shadow)}
@media(min-width:800px){.steps > div{grid-template-columns:5rem 16rem 1fr;gap:2rem;align-items:baseline}}
.steps .t{font-family:var(--mono);font-size:.71rem;color:var(--gold);letter-spacing:.12em}
.steps h3{grid-column:2/-1;font-size:1.13rem}
.steps p{grid-column:2/-1;color:var(--muted);font-size:.96em}
@media(min-width:800px){.steps h3,.steps p{grid-column:auto}}

/* Der Film steht jetzt als eigener Block unter der Schrittliste statt
   eingeklemmt in einer Tagesspalte — dadurch kann er deutlich groesser
   sein und im nativen Hochformat laufen, ohne beschnitten zu werden. */
.filmblock{margin-top:3.4rem;padding-top:2.6rem;border-top:1px solid var(--edge)}
.filmblock p{margin-top:.8rem;max-width:52ch;color:var(--muted)}
/* Groesse wie eingezeichnet: rund 512x453px bei 1280px Fensterbreite, also
   fast quadratisch statt im nativen Hochformat 648:1078. Das Video wird
   dafuer bewusst beschnitten (object-fit:cover, siehe .media). */
.filmgross{margin-top:1.8rem;width:clamp(18rem,40vw,32rem);aspect-ratio:512/453}

/* ---------- Team ---------- */
/* Zwei Einzelportraits nebeneinander statt einem Gruppenbild. Beide Fotos
   liegen nativ in leicht unterschiedlichen Hochformaten (0,63 und 0,75),
   deshalb gibt der Container ein gemeinsames 3:4 vor — sonst stuenden die
   Bildunterschriften auf verschiedenen Hoehen. Beschnitten wird oben und
   unten, die Gesichter sitzen mittig und bleiben unangetastet. */
.team-foto{display:grid;grid-template-columns:repeat(2,1fr);gap:1rem;align-items:start}
.team-foto .media{aspect-ratio:3/4}
.team-foto figcaption{margin-top:.9rem;font-size:.92rem}
@media(min-width:900px){
  .team-split{grid-template-columns:5fr 6fr}
  .team-split .team-foto{position:sticky;top:calc(var(--header-h) + 2rem)}
}
.team-foto figure{margin:0}
.pledge{margin-top:2.8rem;padding:2rem 1.9rem;border-radius:var(--r-lg);
  background:linear-gradient(135deg,rgba(217,168,92,.14),rgba(255,255,255,.75));
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border:1px solid var(--edge-hi);box-shadow:var(--shadow)}
.pledge h3{color:var(--gold)}
.pledge p{margin-top:1rem;max-width:70ch;color:var(--ink)}
.pledge p a{text-decoration:none;border-bottom:1px solid var(--gold-soft);color:var(--gold);
  transition:color .35s var(--ease)}
.pledge p a:hover{color:var(--gold-soft)}

/* ---------- Leistungen (inklusive) ----------
   Nur noch eine Spalte: "Nicht inklusive" wurde entfernt, die frueher
   zweispaltige Grid-Regel liesse ein einzelnes Kind sonst schmaler als
   den Textblock daneben wirken. */
.leistungen{display:grid;gap:1.6rem;margin-top:1.8rem;max-width:44ch}
.leistungen ul{margin:.9rem 0 0;padding-left:1.15em}
.leistungen li{margin-top:.5rem;font-size:.92rem;color:var(--muted)}
.leistungen li::marker{color:var(--gold)}

/* ---------- Eignung & Ausrüstung ---------- */
#eignung ul{margin:1.1rem 0 0;padding-left:1.15em}
#eignung li{margin-top:.55rem;color:var(--muted)}
#eignung li::marker{color:var(--gold)}

/* ---------- Formular (steht im dunklen Block) ---------- */
.form{display:grid;gap:1rem;margin-top:2rem;max-width:620px}
@media(min-width:600px){.duo{display:grid;grid-template-columns:1fr 1fr;gap:1rem}}
label{display:block;font-size:.62rem;letter-spacing:.16em;text-transform:uppercase;
  color:rgba(233,241,247,.7);margin-bottom:.45rem}
input,select,textarea{width:100%;background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.2);color:#fff;
  font-family:var(--body);font-size:1rem;padding:.85rem .95rem;border-radius:var(--r-sm);
  transition:border-color .4s var(--ease),background .4s var(--ease),box-shadow .4s var(--ease)}
select{font-family:var(--display);font-size:.92rem}
select option{color:var(--ink);background:#fff}
textarea{min-height:120px;resize:vertical}
input:focus,select:focus,textarea:focus{border-color:var(--gold-soft);outline:none;
  background:rgba(255,255,255,.13);box-shadow:0 0 0 4px rgba(217,168,92,.16)}
.check{display:flex;gap:.75rem;align-items:flex-start;font-size:.85rem;color:rgba(233,241,247,.75)}
.check input{width:auto;margin-top:.35rem;accent-color:var(--gold-hi)}
.contactline{margin-top:2.3rem;display:flex;flex-wrap:wrap;gap:1.4rem;
  font-family:var(--display);font-size:.95rem}
.contactline a{text-decoration:none;border-bottom:1px solid var(--gold-soft);padding-bottom:3px;
  transition:color .35s var(--ease)}
.contactline a:hover{color:var(--gold-soft)}
.contactline a.insta,.contactline a.tiktok{display:inline-flex;align-items:center;gap:.4em}
.insta-icon,.tiktok-icon{flex:none}

.note{border-left:1px solid var(--gold);padding:.3rem 0 .3rem 1.3rem;margin-top:2.2rem;
  font-size:.93em;color:var(--muted);max-width:72ch}
.dark .note{color:rgba(233,241,247,.75)}

/* ---------- Fuß ---------- */
footer{padding:3.5rem 0 4rem;color:rgba(233,241,247,.72);font-size:.86rem;
  background:var(--abyss)}
.fgrid{display:grid;gap:2rem}
@media(min-width:820px){.fgrid{grid-template-columns:1.5fr 1fr 1fr}}
footer h4{font-family:var(--display);font-size:.66rem;letter-spacing:.17em;text-transform:uppercase;
  margin:0 0 .9rem;color:#fff}
footer a{text-decoration:none;transition:color .35s var(--ease)}
footer a:hover{color:var(--gold-soft)}
footer ul{list-style:none;margin:0;padding:0}
footer li{padding:.22rem 0}
.footer-logo{height:130px;width:auto}
.legal{margin-top:2.6rem;padding-top:1.6rem;border-top:1px solid rgba(255,255,255,.12);
  font-size:.74rem;opacity:.7;line-height:1.95}

/* ---------- Einblenden ----------
   Drei Abstufungen in einer Grammatik: gleiche Kurve, gleiche Richtung.
   Ein identischer Auftritt fuer jeden Abschnitt wirkt mechanisch. */
.rv{opacity:0;transform:translateY(26px);filter:blur(6px);
  transition:opacity .9s var(--ease),transform .9s var(--ease),filter .9s var(--ease)}
.rv.in{opacity:1;transform:none;filter:none}

/* Grosse Aufnahmen kommen langsam zur Ruhe, statt nur aufzutauchen. */
.rv-plate .media img,.rv-plate .media video{transform:scale(1.04);
  transition:transform 1.2s var(--ease)}
.rv-plate.in .media img,.rv-plate.in .media video{transform:none}

/* Kinder treten nacheinander ein, 60 ms Versatz. */
.rv-stagger > *{opacity:0;transform:translateY(18px);
  transition:opacity .75s var(--ease),transform .75s var(--ease)}
.rv-stagger.in > *{opacity:1;transform:none}
.rv-stagger.in > :nth-child(2){transition-delay:.06s}
.rv-stagger.in > :nth-child(3){transition-delay:.12s}
.rv-stagger.in > :nth-child(4){transition-delay:.18s}
.rv-stagger.in > :nth-child(5){transition-delay:.24s}
.rv-stagger.in > :nth-child(6){transition-delay:.3s}

/* ---------- Hero: zwei Videoebenen fuer die Clipkette ----------
   Es blendet ausschliesslich die Deckkraft ueber. */
.hero .bg video{position:absolute;inset:0;opacity:0;
  transition:opacity .9s var(--ease)}
.hero .bg video.an{opacity:1}

/* ---------- Galerie-Reihe: ziehbar ---------- */
.reels{cursor:grab}
.reels.zieht{cursor:grabbing;scroll-snap-type:none;scroll-behavior:auto}
.reels.zieht .media{pointer-events:none}
.reels:focus-visible{outline:2px solid var(--gold);outline-offset:4px}

@media(prefers-reduced-motion:reduce){
  .rv{opacity:1;transform:none;filter:none;transition:none}
  .rv-plate .media img,.rv-plate .media video{transform:none;transition:none}
  .rv-stagger > *{opacity:1;transform:none;transition:none}
  .hero .bg video{transition:none}
  html{scroll-behavior:auto}
  *{transition-duration:.01ms !important;animation-duration:.01ms !important}
  .media:hover img,.media:hover video{transform:none}
}

/* ---------- Mobiles Menue ----------
   Die Desktop-Navigation ist unter 1040px unsichtbar (header nav{display:none}).
   Ohne dieses Menue gibt es auf Tablet und Telefon keinen Weg zu den
   Unterseiten ausser der Fusszeile. */
.navtoggle{display:inline-flex;flex-direction:column;justify-content:center;
  align-items:center;gap:4px;width:2.4rem;height:2.4rem;flex:0 0 auto;
  border:1px solid var(--edge);border-radius:999px;background:rgba(255,255,255,.65);
  cursor:pointer;padding:0}
.navtoggle span{display:block;width:1.1rem;height:1.5px;background:var(--ink);
  transition:transform .35s var(--ease),opacity .35s var(--ease)}
.navtoggle.offen span:nth-child(1){transform:translateY(5.5px) rotate(45deg)}
.navtoggle.offen span:nth-child(2){opacity:0}
.navtoggle.offen span:nth-child(3){transform:translateY(-5.5px) rotate(-45deg)}
@media(min-width:1040px){.navtoggle{display:none}}

.mobilnav{display:none;flex-direction:column;gap:.15rem;
  margin:.6rem var(--pad) 0;padding:.6rem;
  background:rgba(255,255,255,.97);backdrop-filter:blur(18px) saturate(1.4);
  -webkit-backdrop-filter:blur(18px) saturate(1.4);
  border:1px solid var(--edge);border-radius:var(--r-md);box-shadow:var(--shadow)}
.mobilnav.offen{display:flex}
.mobilnav a{padding:.75rem .95rem;border-radius:var(--r-sm);text-decoration:none;
  color:var(--ink);font-family:var(--display);font-size:.93rem;
  transition:background .3s var(--ease)}
.mobilnav a:hover{background:rgba(184,134,59,.08)}
.mobilnav .btn{margin-top:.5rem;text-align:center;color:#1B1205}
@media(min-width:1040px){.mobilnav{display:none !important}}

/* ---------- Teaser auf der Startseite ---------- */
.teaser-grid{display:grid;gap:1.4rem;margin-top:2rem}
@media(min-width:700px){.teaser-grid{grid-template-columns:1fr 1fr}}
.teaser{display:flex;flex-direction:column;overflow:hidden;border-radius:var(--r-lg);
  border:1px solid var(--edge);background:rgba(255,255,255,.6);box-shadow:var(--shadow);
  text-decoration:none;color:inherit;
  transition:transform .5s var(--ease),border-color .5s var(--ease),box-shadow .5s var(--ease)}
.teaser:hover{transform:translateY(-5px);border-color:var(--edge-hi);box-shadow:var(--shadow-lift)}
.teaser .media{border-radius:0;border:0;box-shadow:none;aspect-ratio:16/9;margin:0}
.teaser .txt{padding:1.4rem 1.5rem}
.teaser .txt .mono{color:var(--gold)}
.teaser h3{margin-top:.6rem;font-size:1.15rem}
.teaser p{margin-top:.6rem;color:var(--muted);font-size:.93rem}
.teaser .mehr{display:inline-block;margin-top:1rem;font-family:var(--display);
  font-size:.8rem;font-weight:700;color:var(--gold)}

/* Sonderprodukt: ueber volle Breite unter dem Raster, damit es sich absetzt
   statt als fuenfte Karte eine unausgeglichene Reihe zu erzeugen. */
.teaser-breit{margin-top:1.4rem;border-color:var(--edge-hi)}
@media(min-width:700px){
  .teaser-breit{display:grid;grid-template-columns:1fr 1.15fr;align-items:stretch}
  .teaser-breit .media{aspect-ratio:auto;height:100%;min-height:220px}
  .teaser-breit .txt{padding:2rem 2.2rem;align-self:center}
}

/* ---------- FAQ ---------- */
.faq{margin-top:2rem;display:flex;flex-direction:column;gap:.8rem}
.faq details{border:1px solid var(--edge);border-radius:var(--r-md);
  background:rgba(255,255,255,.6);overflow:hidden}
.faq summary{cursor:pointer;list-style:none;padding:1.2rem 1.4rem;
  font-family:var(--display);font-weight:700;font-size:1rem;letter-spacing:-.01em;
  display:flex;align-items:center;justify-content:space-between;gap:1rem}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-size:1.3rem;color:var(--gold);flex-shrink:0;
  transition:transform .3s var(--ease)}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details p{padding:0 1.4rem 1.3rem;margin:0;color:var(--muted);max-width:70ch}
.faq details a{color:var(--gold);text-decoration:none;border-bottom:1px solid var(--gold-soft)}
/* Gruppenueberschriften zwischen den Fragen. Ab der zweiten mit Abstand
   nach oben, damit die Bloecke sichtbar getrennt sind. */
.faq h3{font-size:1.05rem;margin:0;color:var(--ink)}
.faq h3 + details{margin-top:.1rem}
.faq h3:not(:first-child){margin-top:1.9rem}

/* ---------- Rechtstexte (Impressum, Datenschutz) ---------- */
/* Schmalere Spalte als sonst auf der Seite: das hier ist Fliesstext zum
   Lesen, keine Marketing-Flaeche. Ueberschriften-Rhythmus und Abstaende
   an die urspruenglich gelieferten Dateien angelehnt, Farben und
   Schriften kommen aber aus dem bestehenden Designsystem. */
.legal-doc{max-width:46rem;margin-inline:auto}
.legal-doc .back{display:inline-block;margin:0 0 2.5rem;color:var(--gold);
  text-decoration:none;font-family:var(--display);font-size:.9rem}
.legal-doc .back:hover{text-decoration:underline}
.legal-doc h1{font-size:clamp(1.9rem,4vw,2.6rem);line-height:1.15;
  margin:0 0 1.5rem;letter-spacing:-.02em}
.legal-doc h2{font-size:1.3rem;margin:2.6rem 0 .75rem;padding-top:1.6rem;
  border-top:1px solid var(--edge);letter-spacing:-.01em;font-weight:700}
.legal-doc h3{font-size:1.08rem;margin:1.6rem 0 .5rem}
.legal-doc p{margin:0 0 1em}
.legal-doc ul{margin:0 0 1em;padding-left:1.25rem}
.legal-doc li{margin-bottom:.4rem}
.legal-doc address{font-style:normal;margin:0 0 1em}
.legal-doc a{color:var(--gold)}
.legal-doc .intro{color:var(--muted);margin-bottom:2rem}
.legal-doc .meta{color:var(--muted);font-size:.9rem;margin-top:3rem}