/* ————— RHVÖ — Startseite: Hero-Video, Story-Kapitel, Flow-Sektionen ————— */

/* ————— 1 · HERO ————— */
/* Genau ein Viewport hoch: die Seite reagiert auf den ersten Scroll-Millimeter,
   statt den Besucher erst durch einen gepinnten Leerlauf zu schicken. */
.hero{height:100svh;background:var(--paper)}
.hero .stage{background:var(--paper-2)}

.hero-media{position:absolute;inset:0;overflow:hidden}
.hero-media video,.hero-media .hero-poster{position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:70% center}
.hero-poster{z-index:1}
#heroLoop{z-index:2;opacity:0}
#heroIntro{z-index:3}
.hero-media.kenburns .hero-poster{animation:kenburns 22s ease-in-out infinite alternate}
@keyframes kenburns{from{transform:scale(1)}to{transform:scale(1.06)}}

/* Auf breiten Schirmen liegt gar nichts mehr über dem Video: kein Verlauf oben,
   keiner unten. Der Hero endet als saubere Kante gegen das Papier der nächsten
   Sektion. Die Lesbarkeit trägt allein der Lichtsaum an der Headline.
   Die Ebene bleibt positioniert, weil das Hochformat sie weiter braucht. */
.hero-scrim{position:absolute;inset:0;z-index:4;pointer-events:none;display:none}

.hero-copy{position:absolute;inset:0;z-index:5;display:flex;align-items:center}
.hero-copy .wrap{width:100%}
/* Spalte umschließt den Text (fit-content), damit der Glas-Layer exakt so breit
   wird wie die Headline — bei jeder Viewport-Breite, ohne Media-Query. */
.hero-inner{position:relative;width:fit-content;max-width:100%;padding-top:6vh}

/* Nur noch ein Hauch Papier-Dunst hinter dem Textblock: er nimmt der Wiese die
   Unruhe, ohne als Fläche zu lesen. Die eigentliche Lesbarkeit macht der
   Lichtsaum unten. closest-side hält die Ellipse innerhalb der Box, der
   Verlauf läuft dadurch an jeder Breite garantiert auf null aus. */
.hero-inner::before{content:'';position:absolute;z-index:-1;pointer-events:none;
  top:-4.5rem;bottom:-4rem;left:-14vw;right:-8vw;
  background:radial-gradient(closest-side at 46% 50%,
    rgba(250,247,242,.14) 0%,rgba(250,247,242,.07) 58%,rgba(250,247,242,0) 100%)}

/* Lichtsaum statt Fläche: ein enger heller Halo direkt an den Glyphen hält die
   Headline auf jedem Videoinhalt lesbar. Nur die Headline trägt ihn — beim
   feineren Kursivsatz des Claims würde derselbe Schein die Buchstaben
   ausfransen lassen, statt sie zu tragen. */
.hero-inner h1{
  text-shadow:0 0 2px rgba(250,247,242,.7),0 1px 14px rgba(250,247,242,.38)}
.hero-inner .h1-sub{text-shadow:0 0 2px rgba(250,247,242,.75),0 1px 12px rgba(250,247,242,.45)}
/* Chip als echtes Glas: kaum Eigenfarbe, die Wirkung macht der Blur dahinter. */
.hero-chip{display:inline-flex;align-items:center;gap:.6rem;background:rgba(255,255,255,.16);
  -webkit-backdrop-filter:blur(14px) saturate(1.3);backdrop-filter:blur(14px) saturate(1.3);
  border:1px solid rgba(255,255,255,.42);border-radius:var(--radius-pill);
  padding:.45rem 1rem;margin-bottom:1.6rem}
.hero-chip .dot{width:7px;height:7px;border-radius:50%;background:var(--marine)}
.hero-chip span{font-size:.68rem;font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:var(--ink)}
/* 11.7em ≈ Breite des längsten Wortes („Rettungshundeverband“) in Source Serif 600.
   Die Headline bricht dadurch in jeder Breite an derselben Stelle um und läuft
   nie als Einzeile in den Hund hinein. */
.hero h1{font-size:var(--fs-h1);max-width:11.7em;font-weight:700}
.hero h1 .h1-line{display:block}
.hero h1 .h1-sub{font-size:.52em;color:var(--pine);margin-top:.35em;letter-spacing:0}
/* Ohne Lichtschein und in voller Tinte: der feine Kursivsatz franste mit dem
   Halo aus und verschwand neben der Headline. Scharf und dunkel trägt er sich
   auf der hellen Wiese selbst. */
.hero-claim{font-family:var(--serif);font-style:italic;font-weight:500;
  font-size:clamp(1.25rem,2.2vw,1.7rem);color:var(--ink);text-shadow:none;
  margin:1.5rem 0 2.4rem}
.hero-ctas{display:flex;gap:1rem;flex-wrap:wrap}

/* Derselbe Lichtsaum wie an der Headline: der Hinweis stand vorher in mittlerer
   Tinte auf der hellen, unruhigen Wiese und war kaum auszumachen. Volle Tinte
   plus enger Papier-Halo trägt ihn auf jedem Videoinhalt, ohne dass eine Fläche
   dahinter nötig wird. Die Haarlinie bekommt denselben Schein als box-shadow. */
.scroll-cue{position:absolute;bottom:2.6rem;left:50%;transform:translateX(-50%);z-index:5;
  display:flex;flex-direction:column;align-items:center;gap:.8rem;color:var(--ink)}
.scroll-cue small{font-size:.62rem;font-weight:600;letter-spacing:.3em;text-transform:uppercase;
  text-shadow:0 0 2px rgba(250,247,242,.8),0 1px 10px rgba(250,247,242,.5)}
.scroll-cue span{display:block;width:1px;height:52px;background:linear-gradient(var(--marine),transparent);
  box-shadow:0 0 5px rgba(250,247,242,.6);animation:cue 2.2s ease-in-out infinite}
@keyframes cue{0%,100%{transform:scaleY(.4);transform-origin:top}50%{transform:scaleY(1);transform-origin:top}}

/* ————— 2 · LEITSATZ ÜBER DEM VEREINSLOGO ————— */
/* Gleiches Papier wie der Hero-Auslauf: Hero, Leitsatz, Logo und Zahlen lesen
   sich als eine durchgehende Fläche. Der Leitsatz steht über dem Logo, ohne
   dessen Schriftzug oder Wappen zu überlagern — nichts kämpft um Lesbarkeit. */
.intro{position:relative;display:flex;align-items:center;background:var(--paper);
  padding:clamp(5rem,12vh,8rem) 0 clamp(4.5rem,11vh,7.5rem);overflow:hidden}
.intro .wrap{width:100%}
.intro-inner{position:relative;text-align:center}
.intro-copy{max-width:56rem;margin:0 auto}
.intro-copy h2{margin:1.4rem 0 1.6rem}
.intro-copy p{max-width:44rem;margin:0 auto;color:var(--ink-soft)}
/* Das große Vereinslogo als ruhiges Zentrum zwischen Leitsatz und Zahlen —
   volle Präsenz, aber minimal ins Papier gebettet statt aufgeklebt. */
.intro-emblem{width:min(540px,78vw);margin:clamp(2.4rem,5.5vh,3.8rem) auto clamp(2.2rem,5vh,3.4rem);
  pointer-events:none;user-select:none}
.intro-emblem img{width:100%;height:auto;opacity:.92;filter:saturate(.95)}
.stats{display:flex;justify-content:center;gap:clamp(2rem,6vw,5.5rem);flex-wrap:wrap}
.stat{text-align:center}
.stat-num{font-family:var(--serif);font-weight:600;font-size:clamp(2.6rem,5vw,4.2rem);
  color:var(--pine);line-height:1;display:inline-flex;align-items:baseline}
.stat-num .suffix{font-size:.45em;margin-left:.1em}
.stat-label{margin-top:.6rem;font-size:.72rem;font-weight:600;letter-spacing:.22em;
  text-transform:uppercase;color:var(--ink-soft)}

/* ————— 3 · STORY-KAPITEL (Canvas-Scrub) ————— */
.chapter{background:var(--paper-2)}
/* Alle drei Kapitel sind EINE durchgehende Kamerareise auf einer Bühne:
   340vh Wald + 340vh Trümmerfeld + 380vh Verbellen/Finale. */
#s12{height:1060vh}
/* Wie im Hero liegt auch hier kein Verlauf mehr über dem Bild: die Kapitel
   stehen als saubere, randlose Flächen. Die Texte tragen sich über ihre
   Glas-Chips selbst, dafür braucht es keinen weißen Saum. */
/* Poster liegt dauerhaft hinter dem Canvas: nie eine leere Fläche, solange die
   Frame-Sequenz noch lädt. Sobald gezeichnet wird, deckt der Canvas es vollständig ab. */
.chapter .stage .chapter-poster{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:1}
/* Hochformat: die Bühne ist eine durchgehende dunkle Fläche, weil der Canvas
   sie vollständig mit Bild füllt (scharfes Band + unscharfe Fassung ringsum).
   Das Poster überbrückt nur die Ladezeit und zeigt deshalb schon dieselbe
   Anmutung — formatfüllend, unscharf, abgedunkelt —, damit beim Umschalten auf
   den Canvas nichts springt. */
@media (max-width:768px),(max-aspect-ratio:1/1){
  .chapter .stage{background:#131624}
  .chapter .stage .chapter-poster{object-fit:cover;object-position:50% 50%;
    filter:blur(22px) brightness(.62) saturate(.9);transform:scale(1.14)}
  /* Bei reduzierter Bewegung wird kein Canvas gezeichnet — dann IST das Poster
     das Bild und muss scharf und vollständig zu sehen sein. Es rückt dafür in
     den Textfluss an den Anfang der Bühne, die Karten folgen darunter. */
  html.static .chapter .stage .chapter-poster{position:relative;inset:auto;
    height:auto;object-fit:contain;filter:none;transform:none;
    border-radius:14px;margin-bottom:1.4rem}
}
.chapter .stage canvas{z-index:2}

/* Kapitel-Karte (zentriert, am Kapitelanfang) */
.chapter-card{position:absolute;inset:0;z-index:4;display:flex;flex-direction:column;
  align-items:center;justify-content:center;text-align:center;pointer-events:none;opacity:0;padding:0 var(--gutter)}
.chapter-card .label{color:var(--ink)}
.chapter-card h3{font-size:clamp(1.9rem,3.6vw,3rem);margin-top:1.1rem;max-width:22ch;
  text-shadow:0 2px 24px rgba(250,247,242,.8)}
.chapter-card .card-chip{background:rgba(255,252,247,.88);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  border:1px solid var(--hairline);border-radius:var(--radius);padding:1.6rem 2.2rem 1.8rem;
  box-shadow:var(--shadow-soft)}
/* Der Waldclip ist deutlich unruhiger als die frühere Wiese und der Hund steht
   mittig. Die Titelkarte rückt deshalb nach oben in die ruhige Stammzone. */
#s12 .chapter-card{justify-content:flex-start;padding-top:13vh}

/* Captions in Frosted-Chips */
.caption{position:absolute;z-index:4;max-width:24rem;opacity:0;pointer-events:none}
.caption .chip{background:rgba(255,252,247,.88);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  border:1px solid var(--hairline);border-left:3px solid var(--pine);
  border-radius:14px;padding:1.15rem 1.4rem;box-shadow:var(--shadow-soft)}
.caption.accent .chip{border-left-color:var(--rot)}
.caption .chip p{font-family:var(--serif);font-size:clamp(1.05rem,1.6vw,1.35rem);line-height:1.45}
.caption .chip small{display:block;margin-top:.5rem;font-family:var(--sans);font-size:.68rem;
  font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-soft)}
.cap-left{left:6vw;top:24vh}
.cap-right{right:6vw;top:30vh;left:auto}
.cap-low{left:8vw;bottom:18vh;top:auto}

/* S3 — emotionales Finale */
.finale{position:absolute;inset:0;z-index:5;display:flex;flex-direction:column;align-items:center;
  justify-content:center;text-align:center;opacity:0;pointer-events:none;padding:0 var(--gutter)}
.finale::before{content:'';position:absolute;inset:0;
  background:radial-gradient(ellipse 70% 55% at 50% 52%,rgba(250,247,242,.92) 0%,rgba(250,247,242,.55) 55%,transparent 78%)}
.finale blockquote{position:relative;font-family:var(--serif);font-weight:500;font-style:italic;
  font-size:var(--fs-quote);line-height:1.3;max-width:26ch;color:var(--ink)}
.finale .finale-sub{position:relative;margin-top:1.4rem;font-size:.78rem;font-weight:600;
  letter-spacing:.26em;text-transform:uppercase;color:var(--ink-soft)}

/* ————— 4 · AKTUELLES ————— */
.news{background:var(--paper)}
.news-head{display:flex;align-items:flex-end;justify-content:space-between;gap:2rem;margin-bottom:3rem;flex-wrap:wrap}
.news-head h2{margin-top:1.2rem}
.news-badge{display:inline-flex;align-items:center;gap:.55rem;background:var(--pine-tint);color:var(--pine);
  font-size:.78rem;font-weight:600;padding:.5rem 1rem;border-radius:var(--radius-pill)}

/* Vorspann: Text links, hochformatiger Trainingsclip rechts.
   Der Clip startet stumm im Sichtbereich, lässt sich aber jederzeit anhalten. */
.news-lead{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(2rem,5vw,4rem);
  align-items:start;margin-bottom:clamp(3rem,7vh,4.6rem)}
.news-lead-copy p{color:var(--ink-soft);max-width:36rem}
.news-lead-copy p + p{margin-top:1.1rem}
.news-lead-copy .btn{margin-top:2rem}

.news-clip{margin:0}
.news-clip .clip-frame{position:relative;aspect-ratio:9/16;max-height:min(64vh,560px);
  margin-inline:auto;border-radius:var(--radius);overflow:hidden;background:var(--marine-ink);
  box-shadow:var(--shadow-card)}
.news-clip video{width:100%;height:100%;object-fit:cover;display:block}
.news-clip figcaption{margin-top:1rem;font-size:.85rem;line-height:1.5;color:var(--ink-soft);
  text-align:center;max-width:26rem;margin-inline:auto}

.clip-toggle{position:absolute;left:1rem;bottom:1rem;display:inline-flex;align-items:center;gap:.6rem;
  padding:.5rem .95rem .5rem .6rem;border:0;border-radius:var(--radius-pill);cursor:pointer;
  background:rgba(24,27,44,.62);color:#fff;font:inherit;font-size:.74rem;font-weight:600;
  letter-spacing:.1em;text-transform:uppercase;
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  transition:background .3s,transform .3s}
.clip-toggle:hover{background:rgba(24,27,44,.82);transform:translateY(-1px)}
.clip-icon{width:1.5rem;height:1.5rem;flex:none;border-radius:50%;background:rgba(255,255,255,.16);
  position:relative}
/* Play-Dreieck; im laufenden Zustand werden daraus zwei Pausenbalken. */
.clip-icon::before{content:'';position:absolute;top:50%;left:52%;transform:translate(-50%,-50%);
  width:0;height:0;border-style:solid;border-width:.34rem 0 .34rem .55rem;
  border-color:transparent transparent transparent #fff}
.clip-toggle[aria-pressed="true"] .clip-icon::before{left:50%;width:.16rem;height:.58rem;
  border:0;background:#fff;box-shadow:.26rem 0 0 #fff;transform:translate(-90%,-50%)}

.news-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.6rem}
.news-card .news-media{aspect-ratio:4/3;overflow:hidden}
.news-card .news-media img{width:100%;height:100%;object-fit:cover;transition:transform .6s cubic-bezier(.22,1,.36,1)}
.news-card:hover .news-media img{transform:scale(1.04)}
.news-body{padding:1.4rem 1.5rem 1.7rem}
.news-date{font-size:.72rem;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-soft)}
.news-body h3{font-size:1.25rem;margin:.55rem 0 .6rem;line-height:1.25}
.news-body p{font-size:.95rem;color:var(--ink-soft)}

/* ————— 5 · MISSION / VERBAND ————— */
.mission{background:var(--paper-2)}
.mission-row{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,6vw,5rem);align-items:center;
  padding:clamp(2.5rem,6vh,4.5rem) 0}
.mission-row .media{border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow-card);aspect-ratio:4/5;max-height:560px}
.mission-row .media img{width:100%;height:100%;object-fit:cover}
.mission-row.flip .media{order:2}
.mission-row .copy h2{margin:1.2rem 0 1.3rem}
.mission-row .copy p{color:var(--ink-soft)}
.mission-row .copy p + p{margin-top:1.1rem}
.mission-note{font-size:.9rem;line-height:1.6;padding-left:1rem;
  border-left:2px solid var(--hairline);margin-top:1.6rem}

/* Faktenleiste: lesbare Wertepaare statt dekorativer Badges */
.facts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.4rem 2rem;
  margin-top:2.2rem;padding-top:1.8rem;border-top:1px solid var(--hairline)}
.facts dt{font-size:.68rem;font-weight:600;letter-spacing:.18em;text-transform:uppercase;
  color:var(--ink-soft)}
.facts dd{margin:.35rem 0 0;font-size:1rem;font-weight:600;color:var(--ink)}
/* Verweis auf den Bundesverband: als Link erkennbar, ohne die Leiste zu dekorieren */
.fact-link{display:inline-flex;align-items:baseline;gap:.32rem;color:var(--marine);
  text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.24em;
  text-decoration-color:color-mix(in srgb,var(--marine) 32%,transparent);
  transition:color .25s ease,text-decoration-color .25s ease}
.fact-link:hover{color:var(--marine-deep);text-decoration-color:currentColor}
.fact-link .arrow{font-size:.78em;transition:transform .3s ease}
.fact-link:hover .arrow{transform:translate(2px,-2px)}

/* Ausbildungsweg: fünf Stationen, auf Desktop als durchgehende Linie */
.steps{list-style:none;display:grid;grid-template-columns:repeat(5,1fr);gap:1.6rem;
  margin:clamp(1rem,3vh,2rem) 0 0;padding:0;counter-reset:none}
.step{position:relative;padding-top:2.6rem}
/* Die Linie läuft über den Spaltenabstand hinweg (halbe Lücke je Seite),
   damit sie als eine durchgehende Achse und nicht als fünf Striche liest. */
.step::before{content:'';position:absolute;top:.45rem;left:-.8rem;right:-.8rem;height:1px;background:var(--hairline)}
.step:first-child::before{left:50%}
.step:last-child::before{right:50%}
.step::after{content:'';position:absolute;top:0;left:calc(50% - .45rem);width:.9rem;height:.9rem;
  border-radius:50%;background:var(--paper-2);box-shadow:inset 0 0 0 2px var(--marine)}
.step-no{display:block;font-family:var(--serif);font-size:.9rem;font-weight:600;
  letter-spacing:.1em;color:var(--marine);opacity:.65}
.step h3{font-size:1.05rem;margin:.35rem 0 .5rem;line-height:1.3}
.step p{font-size:.9rem;line-height:1.6;color:var(--ink-soft)}
.steps + .pull-quote{padding-top:clamp(2.5rem,6vh,4rem)}

/* Einladung zum Schnuppertraining, direkt unter den Stationen. Eine helle
   Karte statt einer zweiten Bühne: der Abschnitt hat mit Zitat und Vorstand
   schon genug Gewicht, hier soll nur der nächste Schritt sichtbar sein. */
.steps-cta{display:grid;grid-template-columns:1fr auto;gap:1.6rem 2.4rem;align-items:center;
  margin-top:clamp(2.5rem,6vh,3.6rem);padding:clamp(1.6rem,3.5vw,2.2rem) clamp(1.6rem,3.5vw,2.4rem);
  background:var(--white);border:1px solid var(--hairline);border-radius:var(--radius);
  box-shadow:var(--shadow-soft)}
.sct-copy h3{font-size:clamp(1.2rem,2.2vw,1.5rem);margin:0 0 .5rem}
.sct-copy p{font-size:.95rem;line-height:1.65;color:var(--ink-soft);max-width:34rem}
.sct-actions{display:flex;flex-direction:column;align-items:flex-start;gap:.7rem}
.sct-btns{display:flex;flex-wrap:wrap;gap:.6rem}
/* Gleiche Pillenmaße wie .btn-wa, nur in Marine — die beiden Knöpfe stehen
   nebeneinander und sollen als ein Paar lesen. */
.btn-mail{display:inline-flex;align-items:center;gap:.5rem;
  background:var(--marine-tint);color:var(--ink);font-weight:600;font-size:.83rem;letter-spacing:.02em;
  padding:.5rem 1rem;border:1px solid rgba(62,67,104,.35);border-radius:var(--radius-pill);
  transition:background .3s,border-color .3s,color .3s,transform .3s;will-change:transform}
.btn-mail:hover{background:rgba(62,67,104,.14);border-color:rgba(62,67,104,.6);color:var(--marine-deep)}
.btn-mail svg{width:18px;height:18px;flex:none;color:var(--marine)}
/* Adresszeile mit Kopierknopf, wie auf der Sponsorenseite */
.sct-mail{display:flex;align-items:center;gap:.5rem;max-width:100%;
  padding:.4rem .4rem .4rem .9rem;background:var(--paper-2);
  border:1px solid var(--hairline);border-radius:var(--radius-pill)}
.sct-mail-adr{font-size:.82rem;color:var(--ink-soft);word-break:break-all;user-select:all}
.sct-copy-btn{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;
  width:32px;height:32px;border-radius:50%;cursor:pointer;color:var(--ink-soft);
  background:var(--white);border:1px solid var(--hairline);
  transition:background .25s,border-color .25s,color .25s}
.sct-copy-btn svg{width:16px;height:16px}
.sct-copy-btn .cc-copy-ok{display:none}
.sct-copy-btn:hover{background:var(--marine-tint);border-color:transparent;color:var(--marine-deep)}
.sct-copy-btn.is-done{background:var(--marine);border-color:transparent;color:var(--white)}
.sct-copy-btn.is-done .cc-copy-ico{display:none}
.sct-copy-btn.is-done .cc-copy-ok{display:block}
.steps-cta + .pull-quote{padding-top:clamp(2.5rem,6vh,4rem)}

.badge-row{display:flex;gap:.8rem;margin-top:1.8rem;flex-wrap:wrap}
.badge{border:1px solid var(--hairline);background:var(--white);border-radius:var(--radius-pill);
  padding:.5rem 1.1rem;font-size:.78rem;font-weight:600;letter-spacing:.08em;transition:border-color .3s,color .3s}
a.badge:hover{border-color:var(--pine);color:var(--pine)}
.pull-quote{text-align:center;padding:clamp(3rem,8vh,5.5rem) 0;max-width:44rem;margin:0 auto}
.pull-quote blockquote{font-family:var(--serif);font-style:italic;font-weight:500;
  font-size:clamp(1.5rem,2.8vw,2.3rem);line-height:1.35;color:var(--pine)}
.pull-quote cite{display:block;margin-top:1.2rem;font-style:normal;font-size:.72rem;font-weight:600;
  letter-spacing:.24em;text-transform:uppercase;color:var(--ink-soft)}

/* ————— 6 · VORSTAND / KONTAKT ————— */
.team{background:var(--paper)}
.team-head{text-align:center;max-width:40rem;margin:0 auto 3.4rem}
.team-head h2{margin-top:1.2rem}
.team-head p{margin-top:1.1rem;color:var(--ink-soft)}

/* Vorstand: fünf hochformatige Fenster, drei oben, zwei mittig darunter.
   Das Raster hat sechs Spalten, jede Karte nimmt zwei — die letzte Reihe wird
   dadurch über die Spaltenstartpunkte zentriert, ohne Extra-Container. */
.board-grid{display:grid;grid-template-columns:repeat(6,1fr);
  gap:clamp(2.2rem,4vh,3rem) clamp(1.4rem,2.4vw,2.1rem);
  max-width:1080px;margin:0 auto}
.pcard{grid-column:span 2;width:100%;max-width:21rem;margin:0 auto;text-align:center}
.pcard:nth-child(4){grid-column:2/span 2}
.pcard:nth-child(5){grid-column:4/span 2}

/* Das Fenster selbst: ruhiger Rahmen, in dem später der Clip läuft. Solange
   keiner hinterlegt ist, steht das Monogramm darin — das liest sich als
   gestaltete Fläche, nicht als fehlendes Bild. */
.pcard-window{position:relative;aspect-ratio:4/5;overflow:hidden;
  border-radius:14px;border:1px solid var(--hairline);background:var(--paper-2);
  box-shadow:var(--shadow-soft);
  transition:transform .5s cubic-bezier(.22,1,.36,1),box-shadow .5s,border-color .5s}
.pcard:hover .pcard-window{transform:translateY(-5px);
  box-shadow:var(--shadow-card);border-color:rgba(62,67,104,.28)}
/* Video/Bild sitzen eingerückt in der Fläche, das Passepartout aus Papierbeige
   bleibt ringsum stehen — wie ein gerahmtes Foto, nicht randlos wie ein Poster. */
.pcard-window video,.pcard-window img{position:absolute;inset:10px;z-index:1;
  width:calc(100% - 20px);height:calc(100% - 20px);object-fit:cover;border-radius:8px}
/* Der Clip legt sich weich über das Monogramm, sobald er wirklich läuft */
.pcard-window video{opacity:0;transition:opacity .8s ease}
.pcard-window video.is-playing{opacity:1}
.pcard-mono{position:absolute;inset:0;display:grid;place-items:center;
  font-family:var(--serif);font-weight:600;font-size:clamp(2.4rem,4.6vw,3.2rem);
  letter-spacing:.08em;color:var(--marine);opacity:.2;
  background:radial-gradient(closest-side at 50% 44%,rgba(62,67,104,.09),transparent 72%)}
/* Feine Linie exakt auf der Kante des Bildes — schließt den Passepartout-Rand ab */
.pcard-window::after{content:'';position:absolute;inset:10px;z-index:2;
  border:1px solid rgba(62,67,104,.14);border-radius:8px;pointer-events:none}

.pcard-name{font-size:1.15rem;line-height:1.25;margin:1.25rem 0 .45rem}
.pcard-role{font-size:.68rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;
  color:var(--pine);line-height:1.5}
.pcard-mail{display:inline-block;margin-top:.7rem;font-size:.82rem;color:var(--ink-soft);
  overflow-wrap:anywhere;background-image:linear-gradient(var(--pine),var(--pine));
  background-size:0 1px;background-position:0 100%;background-repeat:no-repeat;
  transition:color .35s,background-size .45s cubic-bezier(.22,1,.36,1)}
.pcard-mail:hover{color:var(--pine);background-size:100% 1px}

/* ————— 7 · SPONSOREN ————— */
/* Statt eines kleinen, entsättigten Logos am Seitenrand bekommen die Sponsoren
   einen eigenen Bereich: helle Tafeln, das Logo groß und in Farbe, der Name
   darunter. Wer hier steht, ist auf den ersten Blick zu sehen — genau das ist
   das Argument, mit dem sich ein Sponsoring verkaufen lässt. */
.sponsors-home{background:var(--paper-2);overflow:hidden}
.sh-head{text-align:center;max-width:44rem;margin:0 auto}
.sh-head h2{margin-top:1.2rem}
.sh-lead{margin-top:1.1rem;color:var(--ink-soft);text-wrap:pretty}

.sh-band-wrap{margin-top:clamp(2.4rem,6vh,3.6rem)}
/* Die Tafeln dürfen sich beim Überfahren anheben, das Band darf aber niemals
   seitlich über den Schirm hinauswachsen: deshalb nur waagrecht abschneiden.
   `overflow:hidden` steht als Rückfall für Browser ohne `clip` davor. */
.sh-band{--sh-gap:clamp(.9rem,2vw,1.6rem);
  overflow:hidden;overflow-x:clip;overflow-y:visible;padding:.9rem 0}
.sh-marquee{display:flex;width:100%}
.sh-track{display:flex;flex-wrap:wrap;justify-content:center;align-items:stretch;
  gap:var(--sh-gap);width:100%;padding:0 var(--gutter)}

/* ——— Laufendes Band ———
   Hinter der Spur liegt eine zweite, gleiche Kopie. Beide wandern gemeinsam um
   exakt eine Spurbreite (50 % der Doppelspur) nach links und springen dann
   zurück — weil die Kopie dort beginnt, wo das Original endet, ist der Sprung
   unsichtbar. Die Laufzeit setzt js/main.js aus der gemessenen Breite, damit
   das Band bei zwanzig Logos nicht schneller läuft als bei fünf. */
.sh-band.is-running{
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent)}
.sh-band.is-running .sh-marquee{width:max-content;
  animation:sh-scroll var(--sh-dur,40s) linear infinite}
/* Die rechte Lücke gehört zur Spur, sonst kleben Kopie und Original aneinander */
.sh-band.is-running .sh-track{flex-wrap:nowrap;width:max-content;padding:0 var(--sh-gap) 0 0}
/* Wer ein Logo ansehen oder anklicken will, hält das Band mit dem Zeiger an */
.sh-band.is-running:hover .sh-marquee,
.sh-band.is-running:focus-within .sh-marquee{animation-play-state:paused}
@keyframes sh-scroll{from{transform:translate3d(0,0,0)}to{transform:translate3d(-50%,0,0)}}
@media (prefers-reduced-motion:reduce){.sh-band .sh-marquee{animation:none}}

.sh-plate{position:relative;flex:0 0 auto;width:clamp(13.5rem,20vw,16.5rem);min-height:10rem;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1.1rem;
  padding:1.9rem 1.6rem;background:var(--white);border:1px solid var(--hairline);
  border-radius:var(--radius);box-shadow:var(--shadow-soft);
  transition:transform .45s cubic-bezier(.22,1,.36,1),box-shadow .45s,border-color .45s}
.sh-plate:hover{transform:translateY(-5px);box-shadow:var(--shadow-card);border-color:rgba(62,67,104,.28)}
.sh-plate-logo{display:flex;align-items:center;justify-content:center;
  width:100%;height:clamp(50px,6vw,70px)}
.sh-plate-logo img{max-height:100%;max-width:100%;width:auto;object-fit:contain}
/* Das Logo trägt den Namen meist selbst — ihn darunter zu wiederholen sähe
   nach Beschriftung aus statt nach Marke. Er bleibt deshalb nur für
   Vorlesegeräte stehen, denn die Tafel ist ein Link und braucht einen Namen. */
.sh-plate .sh-plate-name{position:absolute;width:1px;height:1px;overflow:hidden;
  clip-path:inset(50%);white-space:nowrap}
/* Sponsor ohne Logo: dann trägt der Name die Tafel */
.sh-plate.is-textonly .sh-plate-name{position:static;width:auto;height:auto;clip-path:none;
  white-space:normal;font-family:var(--serif);font-size:1.3rem;font-weight:600;
  line-height:1.25;text-align:center;color:var(--ink);transition:color .35s}
.sh-plate.is-textonly:hover .sh-plate-name{color:var(--pine)}
/* Kleiner Hinweis in der Ecke, dass die Tafel zur Website des Sponsors führt */
.sh-plate-go{position:absolute;top:.85rem;right:1rem;font-size:.9rem;color:var(--pine);
  opacity:0;transform:translate(-3px,3px);transition:opacity .35s,transform .35s}
.sh-plate:hover .sh-plate-go{opacity:1;transform:none}

/* Ein einzelner Sponsor bekommt die ganze Bühne statt einer schmalen Kachel */
.sh-band.is-solo .sh-plate{width:min(23rem,100%);min-height:12.5rem;gap:1.4rem}
.sh-band.is-solo .sh-plate-logo{height:clamp(62px,7vw,88px)}

/* Freie Tafel: zeigt, dass hier noch Platz ist, und führt zur Sponsorenseite */
.sh-plate-ghost{background:transparent;box-shadow:none;border:1.5px dashed var(--hairline);
  gap:.5rem;color:var(--ink-soft);text-align:center}
.sh-plate-ghost:hover{background:transparent;box-shadow:none;border-color:var(--pine);color:var(--pine)}
.sh-plate-ghost strong{font-family:var(--serif);font-size:1.2rem;font-weight:600;line-height:1.2}
.sh-plate-ghost small{font-size:.82rem;line-height:1.5}

.sh-cta{display:flex;flex-direction:column;align-items:center;text-align:center;
  gap:1.6rem;margin-top:clamp(2.4rem,6vh,3.6rem)}
.sh-cta-line{font-size:clamp(1.6rem,3.2vw,2.5rem);font-weight:600;line-height:1.22;
  letter-spacing:-.01em;color:var(--ink);max-width:22ch}

/* ————— Responsive ————— */
/* 16:10-Laptops & Co. (breiter als 7:5, aber schmaler als das 16:9-Video):
   beim Cover-Crop fällt der Beschnitt komplett auf die leere Wiese rechts vom
   Hund — Balu rückt an den rechten Rand, die Headline läuft frei aus. */
@media (min-width:1201px) and (min-aspect-ratio:7/5){
  .hero-media video,.hero-media .hero-poster{object-position:0% center}
}
/* Tablet & schmale Laptops: Hier steht Balu am größten im Bild und damit genau
   hinter dem Text. Der Ausschnitt wandert nach rechts, sodass er neben der
   Headline sitzt statt dahinter — Bildwirkung bleibt, Text bleibt frei. */
@media (min-width:641px) and (max-width:1200px){
  .hero-media video,.hero-media .hero-poster{object-position:55% center}
}
@media (max-width:1080px){
  /* Vier Spalten, Karten zu zweit: die fünfte rückt in die Mitte */
  .board-grid{grid-template-columns:repeat(4,1fr)}
  .pcard:nth-child(4){grid-column:span 2}
  .pcard:nth-child(5){grid-column:2/span 2}
}
@media (max-width:1080px){
  /* Fünf Stationen nebeneinander werden hier zu schmal: zwei Reihen, die Linie
     entfällt, die Nummern bleiben als Ordnung erhalten. */
  .steps{grid-template-columns:repeat(3,1fr);gap:2rem 1.8rem}
  .step{padding-top:0}
  .step::before,.step::after{display:none}
}
@media (max-width:960px){
  .news-grid{grid-template-columns:1fr 1fr}
  .news-lead{grid-template-columns:1fr;gap:2.4rem}
  .news-clip{order:-1}
  .news-clip .clip-frame{max-height:min(60vh,520px);max-width:22rem}
  .mission-row{grid-template-columns:1fr}
  .mission-row.flip .media{order:0}
  .mission-row .media{aspect-ratio:16/10;max-height:none}
  /* Knöpfe unter den Text statt daneben, sobald die Karte zu schmal wird */
  .steps-cta{grid-template-columns:1fr}
}
@media (max-width:640px){
  .news-grid{grid-template-columns:1fr}
  .steps{grid-template-columns:1fr;gap:1.8rem}
  /* Untereinander statt nebeneinander, dafür breiter: das Logo bleibt groß */
  .sh-plate{width:min(17rem,76vw);min-height:9rem;padding:1.6rem 1.4rem}
  .sh-band.is-solo .sh-plate{width:min(19rem,84vw);min-height:10rem}
  .facts{grid-template-columns:1fr;gap:1.2rem}
  /* Am Handy tragen beide Knöpfe die volle Breite, die Adresszeile bricht
     dafür in die Ecken (Pillenform bei umbrechender Adresse ist unruhig). */
  .sct-btns{width:100%}
  .sct-btns .btn-wa,.sct-btns .btn-mail{flex:1 1 100%;justify-content:center}
  .sct-mail{width:100%;border-radius:var(--radius);padding:.5rem .5rem .5rem .9rem}
  /* Hochformat: ein Fenster pro Reihe, in der Breite begrenzt, damit die
     Karten nicht als Riesenkacheln über den ganzen Bildschirm laufen. */
  .board-grid{grid-template-columns:1fr;gap:2.8rem}
  .pcard,.pcard:nth-child(4),.pcard:nth-child(5){grid-column:auto;
    width:100%;max-width:20rem;margin:0 auto}
  .hero-inner{padding-top:0}
  /* 7.4vw hält „Rettungshundeverband“ auch auf 320px-Geräten einzeilig — die
     Headline bricht wie am Desktop sauber vor „Österreich“ statt zu trennen.
     hyphens bleibt als Notnagel für längere CMS-Texte aktiv. */
  .hero h1{font-size:clamp(1.45rem,7.4vw,2.4rem);font-weight:600;hyphens:auto;-webkit-hyphens:auto;overflow-wrap:break-word}

  /* ————— Hero im Hochformat: ein Bild, kein geteilter Schirm —————
     Vorher endete das Video auf halber Höhe in einer weißen Fläche, auf der der
     Text stand — der Hund war halbiert und die untere Hälfte leer. Jetzt läuft
     das Bild über den ganzen Schirm und der Text sitzt in einem tiefen
     Marine-Verlauf am Fuß. Balu bleibt vollständig sichtbar, die Fläche liest
     sich als eine Aufnahme statt als Bild mit weißem Kasten darunter. */
  .hero-media video,.hero-media .hero-poster{object-position:72% 8%}
  /* Oben nur ein Hauch, damit die helle Navigation auf jedem Frame sitzt; die
     Bildmitte bleibt frei; ab der hellen Wiese (~48%) baut sich der Verlauf auf
     und deckt, bevor die Headline beginnt. Marine statt Schwarz — dieselbe
     Farbfamilie wie der Footer. */
  .hero-scrim{display:block;background:
    linear-gradient(180deg,
      rgba(24,27,44,.44) 0%,rgba(24,27,44,.14) 13%,rgba(24,27,44,0) 27%,
      rgba(24,27,44,.34) 43%,rgba(24,27,44,.66) 56%,
      rgba(24,27,44,.86) 71%,rgba(24,27,44,.94) 85%,rgba(24,27,44,.96) 100%)}
  .hero-inner::before{display:none}
  /* Heller Satz auf dunklem Grund: der Lichtsaum von der hellen Fassung würde
     die Buchstaben hier nur ausfransen, es trägt ein weicher dunkler Schatten. */
  .hero-inner h1{color:var(--paper);text-shadow:0 1px 24px rgba(12,14,24,.5)}
  .hero h1 .h1-sub{color:rgba(250,247,242,.72);text-shadow:0 1px 18px rgba(12,14,24,.45)}
  .hero-claim{color:rgba(250,247,242,.88);margin:1.1rem 0 1.9rem;
    text-shadow:0 1px 20px rgba(12,14,24,.45)}
  /* Aus dem Glas-Chip wird eine schlichte Zeile: die Pille lief im Hochformat
     fast über die volle Breite und legte sich als Balken quer durchs Bild. */
  .hero-chip{background:none;border:0;padding:0;margin-bottom:1.1rem;gap:.6rem;
    -webkit-backdrop-filter:none;backdrop-filter:none}
  .hero-chip .dot{width:6px;height:6px;background:var(--paper);
    box-shadow:0 0 0 3px rgba(250,247,242,.13)}
  .hero-chip span{color:rgba(250,247,242,.8);font-size:.62rem;letter-spacing:.24em;
    text-shadow:0 1px 14px rgba(12,14,24,.55)}
  /* Auf dunklem Grund kehrt sich die Hierarchie um: Papier trägt die
     Hauptaktion, die zweite steht als klare helle Linie daneben. Marine auf
     Marine wäre hier fast unsichtbar. */
  .hero-ctas{gap:.7rem}
  .hero .btn{font-size:.72rem;letter-spacing:.11em}
  .hero .btn .arrow{width:1.95rem;height:1.95rem;font-size:.88rem}
  .hero .btn-primary{background:var(--paper);color:var(--marine-deep);
    box-shadow:0 16px 30px -18px rgba(0,0,0,.85)}
  .hero .btn-primary .arrow{background:rgba(34,38,60,.09);color:var(--marine-deep);
    box-shadow:inset 0 0 0 1px rgba(34,38,60,.18)}
  .hero .btn-ghost{background:rgba(250,247,242,.07);border-color:rgba(250,247,242,.4);
    color:var(--paper);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
  .hero .btn-ghost .arrow{box-shadow:inset 0 0 0 1px rgba(250,247,242,.42)}
  /* Balus Kopf sitzt im oberen Bilddrittel, der Text rückt an den Fuß —
     Gesicht bleibt frei. Der Fußabstand berücksichtigt die Home-Leiste. */
  .hero-copy{align-items:flex-end;padding-bottom:calc(5.5vh + env(safe-area-inset-bottom,0px))}
  /* Der Pfeil im „Unsere Mission“-Button übernimmt hier die Scroll-Einladung —
     die Cue würde sonst unter den Buttons liegen. */
  .scroll-cue{display:none}
  /* Am Fuß stehen im Hochformat Text und Schaltflächen. Das KI-Zeichen wandert
     deshalb unter die Kopfzeile, wo sonst nichts liegt. */
  .hero .ai-badge{top:calc(var(--nav-h-small) + .55rem);bottom:auto;height:20px}
  .intro-emblem{width:min(420px,90vw)}
}

/* ————— Kamerareise im Hochformat —————
   Derselbe Umbruchpunkt wie der Kino-Modus in js/main.js (max-width:768px):
   dort wird der Ausschnitt gesetzt, hier stehen die Texte dazu. Die Bühne ist
   jetzt vollflächig Bild, die Karten sitzen unter dem scharfen Band. Wo genau,
   rechnet das CSS aus `--band-b` — der Wert kommt vom Scrubber und passt sich
   jeder Bildschirmhöhe an, statt einen festen vh-Wert zu raten. */
@media (max-width:768px),(max-aspect-ratio:1/1){
  .caption,.cap-left,.cap-right,.cap-low{max-width:none;
    left:var(--gutter);right:var(--gutter);
    top:calc(var(--band-b,55vh) + 1.15rem);bottom:auto}
  /* Ohne Canvas gibt es kein Band — dann darf auch kein Platz dafür freibleiben */
  html.static #s12 .chapter-card,html.static .finale{padding-top:0}
  html.static .finale::before{display:none}
  /* Mit ID, damit die Desktop-Regel #s12 .chapter-card{padding-top:13vh}
     hier sicher überstimmt wird. */
  #s12 .chapter-card{justify-content:flex-start;
    padding-top:calc(var(--band-b,55vh) + 1.15rem)}
  /* Das Zitat steht ebenfalls unter dem Band. Auf der dunklen Fläche trägt es
     sich selbst, der helle Papier-Dunst dahinter würde nur stören. */
  .finale{justify-content:flex-start;padding-top:calc(var(--band-b,55vh) + 1.6rem)}
  /* Statt des hellen Papier-Dunstes am Desktop hier ein dunkler Hauch: das
     Zitat steht auf hellem Schutt, ohne ihn läuft die Schrift darin unter. */
  .finale::before{inset:var(--band-b,55vh) 0 0 0;
    background:radial-gradient(ellipse 82% 46% at 50% 26%,
      rgba(12,14,24,.62) 0%,rgba(12,14,24,.34) 55%,transparent 80%)}
  .finale blockquote{color:var(--paper);max-width:20ch;
    text-shadow:0 2px 20px rgba(12,14,24,.75)}
  .finale .finale-sub{color:rgba(250,247,242,.72);letter-spacing:.2em;
    text-shadow:0 1px 14px rgba(12,14,24,.7)}
  /* Auf dunklem Grund darf der Glas-Chip kompakter und heller sein: er ist
     jetzt eine leuchtende Fläche im Bild, kein Papier auf Papier. */
  .chapter-card .card-chip{padding:1.15rem 1.3rem 1.3rem;background:rgba(255,252,247,.94);
    box-shadow:0 24px 50px -22px rgba(12,14,24,.8)}
  .chapter-card h3{font-size:clamp(1.35rem,5.6vw,1.85rem);margin-top:.7rem;
    max-width:none;text-shadow:none}
  .caption .chip{padding:1rem 1.15rem;background:rgba(255,252,247,.94);
    box-shadow:0 24px 50px -22px rgba(12,14,24,.8)}
  .caption .chip p{font-size:clamp(1rem,4.3vw,1.2rem)}
  /* Im Hochformat zeichnet der Scrubber ein scharfes Band mit unscharfem Rand
     ringsum. Das Zeichen gehört auf das Bild selbst, nicht auf den Rand:
     `--band-b` ist die Unterkante des Bandes, gemessen von oben. */
  .chapter .ai-badge{bottom:calc(100% - var(--band-b,55vh) + .55rem);height:20px}
  /* Ohne Canvas gibt es kein Band. Dann ist das Poster das Bild und steht oben
     in der Bühne — dorthin muss auch das Zeichen, sonst rutscht es unter die
     Texte ans Ende der Spalte. */
  html.static .chapter .ai-badge{top:.75rem;bottom:auto}
}

/* ————— Reduced Motion / statischer Modus ————— */
html.static .stage canvas{display:none}
html.static .chapter .stage .chapter-poster{display:block}
html.static .chapter-card,html.static .caption,html.static .finale{opacity:1;position:relative;
  inset:auto;margin:1rem auto;max-width:36rem}
html.static .chapter{height:auto!important}
html.static .chapter .stage{position:relative;height:auto;min-height:60vh;display:flex;
  flex-direction:column;justify-content:center;padding:4rem 0}
html.static .scroll-cue span{animation:none}
html.static .hero-media video{display:none}

/* Sehr schmale Geräte: die Kopfzeile soll einzeilig bleiben */
@media (max-width:380px){
  .hero-chip span{font-size:.58rem;letter-spacing:.18em}
}

/* ————— Aktuelles aus dem CMS: Rich-Text in Karten + eigene Sektionen ————— */
.news-text{font-size:.95rem;color:var(--ink-soft)}
.news-text p{margin:.4rem 0}
.news-text ul,.news-text ol{margin:.5rem 0 .5rem 1.2rem}
.news-text a{color:var(--marine);text-decoration:underline}

.news-section .ns-inner{display:grid;gap:clamp(1.6rem,4vw,3.4rem);align-items:center}
.news-section .ns-inner.has-media{grid-template-columns:1.1fr .9fr}
.news-section h2{margin:.5rem 0 1rem}
.ns-text{font-size:var(--fs-body);color:var(--ink-soft);max-width:38rem}
.ns-text p{margin:.55rem 0}
.ns-text ul,.ns-text ol{margin:.6rem 0 .6rem 1.3rem}
.ns-media img{width:100%;border-radius:var(--radius);box-shadow:var(--shadow-card)}
@media (max-width:900px){.news-section .ns-inner.has-media{grid-template-columns:1fr}}

/* ————— HERO · STUDIO-FASSUNG (Testlauf 2026-08-09) —————
   Balu sitzt jetzt auf derselben Papierfläche, aus der die Seite besteht. Damit
   fällt der ganze Lesbarkeits-Apparat weg, den die Wiese gebraucht hat: kein
   Dunst hinter dem Text, kein Lichtsaum an den Buchstaben, kein Glas-Chip,
   keine Verläufe. Was bleibt, ist Typografie auf Papier — und der Hund als
   einzige Bewegung im Bild.

   Alles hier hängt an `body.hero-light`. Wird die Klasse in index.html
   entfernt, greift wieder die Wald-Fassung darüber, ohne dass eine Zeile
   gelöscht werden muss. */
body.hero-light .hero,
body.hero-light .hero .stage{background:var(--paper)}
/* Balu sitzt in der rechten Bildhälfte; der Ausschnitt hält ihn dort, damit die
   linke Hälfte für den Text frei bleibt. */
body.hero-light .hero-media video,
body.hero-light .hero-media .hero-poster{object-position:64% center}
body.hero-light .hero-scrim{display:none}
body.hero-light .hero-inner::before{display:none}
body.hero-light .hero-inner h1,
body.hero-light .hero-inner .h1-sub,
body.hero-light .hero-claim{text-shadow:none}
body.hero-light .hero-inner h1{color:var(--ink)}
body.hero-light .hero h1 .h1-sub{color:var(--marine)}
body.hero-light .hero-claim{color:var(--ink-soft)}

/* Aus der Glaspille wird eine schlichte Zeile. Auf ruhigem Papier ist ein
   Blur-Chip nur noch Dekoration — die Zeile trägt mehr. */
body.hero-light .hero-chip{background:none;border:0;padding:0;margin-bottom:1.7rem;
  -webkit-backdrop-filter:none;backdrop-filter:none}
body.hero-light .hero-chip span{color:var(--marine)}

/* Marine-Haarlinie als ruhiger Anker der Textspalte: die einzige Fläche, die
   im Hero Farbe trägt, und gleichzeitig die Kante, an der die Typo hängt. */
body.hero-light .hero-inner{padding-left:clamp(1.5rem,2.4vw,2.4rem);
  /* Die Textspalte endet, bevor sie Balu erreicht: er beginnt bei 53 % der
     Videobreite, die Spalte darf deshalb nie über das linke Bilddrittel
     hinauslaufen. Ohne diesen Deckel schiebt sich „Verband" hinter den Hund. */
  max-width:min(33rem,42vw)}
body.hero-light .hero h1{max-width:none;font-size:clamp(1.9rem,3.5vw,3.4rem);
  hyphens:none;-webkit-hyphens:none}
body.hero-light .hero-inner::after{content:'';position:absolute;left:0;
  top:.5rem;bottom:29%;width:2px;border-radius:1px;background:var(--marine)}

body.hero-light .scroll-cue{color:var(--marine)}
body.hero-light .scroll-cue span{background:linear-gradient(var(--marine),transparent)}

/* Hochformat: das Video wird eingepasst statt beschnitten. Weil sein
   Hintergrund exakt der Papierton der Seite ist, sieht man keine Videokante —
   Balu sitzt einfach unten auf der Seite, der Text steht darüber. */
@media (max-width:640px){
  /* Hochformat: das Video bekommt nur die untere Bildschirmhälfte und füllt sie
     formatfüllend. Eingepasst wäre der Streifen nur 219 px hoch und der Hund
     winzig; formatfüllend über die volle Höhe wäre er breiter als der Schirm.
     In einem 58-%-Fenster passt er dagegen genau hinein. Weil der Videogrund
     derselbe Papierton ist wie die Seite, sieht man die Fensterkante nicht. */
  body.hero-light .hero-media{top:auto;height:58%}
  body.hero-light .hero-media video,
  body.hero-light .hero-media .hero-poster{object-fit:cover;object-position:69% center;
    background:var(--paper)}
  body.hero-light .hero h1{font-size:clamp(1.5rem,6.6vw,2.2rem);hyphens:none;-webkit-hyphens:none}
  body.hero-light .hero-inner{max-width:none}
  body.hero-light .hero-scrim{display:none}
  body.hero-light .hero-inner h1{color:var(--ink);text-shadow:none}
  body.hero-light .hero h1 .h1-sub{color:var(--marine);text-shadow:none}
  body.hero-light .hero-claim{color:var(--ink-soft);text-shadow:none;margin:1rem 0 1.7rem}
  body.hero-light .hero-chip .dot{width:7px;height:7px;background:var(--marine);box-shadow:none}
  body.hero-light .hero-chip span{color:var(--marine);text-shadow:none}
  /* Text nach oben, Hund unten — sie teilen sich den Schirm ohne Überlappung. */
  body.hero-light .hero-copy{align-items:flex-start;padding-top:calc(var(--nav-h,72px) + 3vh);
    padding-bottom:0}
  body.hero-light .hero-inner::after{bottom:auto;height:calc(100% - 1rem)}
  /* Auf hellem Grund gilt wieder die normale Knopfhierarchie. */
  body.hero-light .hero .btn-primary{background:linear-gradient(150deg,var(--marine-bright) 0%,var(--marine) 55%,var(--marine-deep) 100%);
    color:#fff;box-shadow:var(--shadow-soft)}
  body.hero-light .hero .btn-primary .arrow{background:rgba(255,255,255,.16);color:#fff;box-shadow:none}
  body.hero-light .hero .btn-ghost{background:none;border-color:var(--hairline);color:var(--ink);
    -webkit-backdrop-filter:none;backdrop-filter:none}
  body.hero-light .hero .btn-ghost .arrow{box-shadow:inset 0 0 0 1px var(--hairline)}
}

/* ————— Tippgrößen auf Geräten ohne Mauszeiger —————
   Die E-Mail-Zeile der Vorstandskarten war 22px hoch — zu wenig zum sicheren
   Antippen. Sie wird zur eigenen Zeile mit Fingerhöhe und darf lange Adressen
   umbrechen, statt sie in eine zu enge Zeile zu quetschen. Mit Maus bleibt
   alles wie bisher. */
@media (hover:none){
  .pcard-mail{display:block;padding:.55rem .4rem;margin-top:.45rem;
    line-height:1.45;overflow-wrap:anywhere;background-image:none}
}