/* ————— 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)}}

/* Keine Nebelwand mehr: oben ein Hauch für die Nav, unten der Auslauf ins
   Papier — er verbindet den Hero nahtlos mit der Logo-Sektion darunter.
   Die Lesbarkeit selbst macht der Glas-Layer (.hero-inner::before). */
.hero-scrim{position:absolute;inset:0;z-index:4;pointer-events:none;
  background:
    linear-gradient(92deg,rgba(250,247,242,.30) 0%,rgba(250,247,242,.08) 28%,rgba(250,247,242,0) 48%),
    linear-gradient(180deg,rgba(250,247,242,0) 74%,rgba(250,247,242,.55) 92%,var(--paper) 100%)}

.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}

/* Lesbarkeits-Layer: ein leiser Papier-Dunst exakt hinter dem Textblock.
   closest-side hält die Ellipse sicher innerhalb der Box, dadurch läuft der
   Verlauf an jeder Viewport-Breite garantiert auf null aus — keine Kante,
   kein Nebelband, das Video bleibt überall sichtbar. */
.hero-inner::before{content:'';position:absolute;z-index:-1;pointer-events:none;
  top:-4.5rem;bottom:-4rem;left:-18vw;right:-10vw;
  background:radial-gradient(closest-side at 46% 50%,
    rgba(250,247,242,.42) 0%,rgba(250,247,242,.26) 55%,rgba(250,247,242,0) 100%)}
.hero-chip{display:inline-flex;align-items:center;gap:.6rem;background:rgba(255,255,255,.7);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  border:1px solid var(--hairline);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-soft)}
/* 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}
.hero h1 .h1-line{display:block}
.hero h1 .h1-sub{font-size:.52em;color:var(--pine);margin-top:.35em;letter-spacing:0}
.hero-claim{font-family:var(--serif);font-style:italic;font-weight:500;
  font-size:clamp(1.25rem,2.2vw,1.7rem);color:var(--ink-soft);margin:1.5rem 0 2.4rem}
.hero-ctas{display:flex;gap:1rem;flex-wrap:wrap}

.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-soft)}
.scroll-cue small{font-size:.62rem;font-weight:600;letter-spacing:.3em;text-transform:uppercase}
.scroll-cue span{display:block;width:1px;height:52px;background:linear-gradient(var(--pine),transparent);
  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)}
#s1,#s2{height:340vh}
#s3{height:380vh}
.chapter .stage::before,.chapter .stage::after{content:'';position:absolute;left:0;right:0;height:9vh;z-index:3;pointer-events:none}
.chapter .stage::before{top:0;background:linear-gradient(var(--paper),transparent)}
.chapter .stage::after{bottom:0;background:linear-gradient(transparent,var(--paper))}
/* 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}
.chapter .stage canvas{z-index:2}
#s3 .stage .chapter-poster{object-position:42% center}

/* 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,.78);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  border:1px solid var(--hairline);border-radius:var(--radius);padding:1.6rem 2.2rem 1.8rem;
  box-shadow:var(--shadow-soft)}

/* 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,.78);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  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)}
.news-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.6rem}
.news-card .news-media{aspect-ratio:16/10;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)}
.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 · TEAM / 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-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.6rem;max-width:1080px;margin:0 auto}
.contact-card{padding:2rem 1.9rem 2.1rem;display:flex;flex-direction:column;gap:.4rem}
.contact-role{font-size:.7rem;font-weight:700;letter-spacing:.22em;text-transform:uppercase;color:var(--pine)}
.contact-card h3{font-size:1.35rem;margin:.3rem 0 .2rem}
.contact-card .phone{color:var(--ink-soft);font-size:.98rem}
.contact-actions{display:flex;gap:.7rem;margin-top:1.3rem;flex-wrap:wrap}
.btn-small{font-size:.7rem;padding:.62rem 1.15rem;gap:.6rem}
.contact-card.insta .ig-handle{color:var(--ink-soft);font-size:.98rem}

/* ————— 7 · SPONSOR-TEASER ————— */
.sponsor-teaser{background:var(--paper-2);overflow:hidden}
.sponsor-teaser .wrap{display:flex;align-items:center;justify-content:space-between;gap:2.5rem;flex-wrap:wrap}
.sponsor-teaser .st-copy{max-width:34rem}
.sponsor-teaser h2{font-size:clamp(1.7rem,3.2vw,2.6rem);font-style:italic;margin-bottom:1.6rem}
.st-partner{display:flex;flex-direction:column;gap:.9rem;align-items:flex-start}
.st-partner .label{font-size:.62rem}
.st-partner img{height:34px;width:auto;opacity:.8;filter:grayscale(1);transition:filter .4s,opacity .4s}
.st-partner a:hover img{filter:grayscale(0);opacity:1}

/* ————— Responsive ————— */
/* 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:960px){
  .news-grid{grid-template-columns:1fr 1fr}
  .team-grid{grid-template-columns:1fr}
  .mission-row{grid-template-columns:1fr}
  .mission-row.flip .media{order:0}
  .mission-row .media{aspect-ratio:16/10;max-height:none}
}
@media (max-width:640px){
  .news-grid{grid-template-columns:1fr}
  .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);hyphens:auto;-webkit-hyphens:auto;overflow-wrap:break-word}
  /* Hochformat: Balu rückt in den sichtbaren Ausschnitt, bleibt oben frei
     sichtbar, und unten läuft das Bild weich ins Papier aus — dort steht der
     Text auf ruhigem Grund, und der Auslauf ist zugleich der nahtlose
     Übergang zur Logo-Sektion. */
  .hero-media video,.hero-media .hero-poster{object-position:78% center}
  .hero-scrim{background:
    linear-gradient(180deg,rgba(250,247,242,.32) 0%,rgba(250,247,242,0) 22%),
    linear-gradient(180deg,transparent 36%,rgba(250,247,242,.40) 60%,rgba(250,247,242,.84) 86%,var(--paper) 100%)}
  .hero-inner::before{top:-2.5rem;bottom:-2.5rem;left:-12vw;right:-12vw;
    background:radial-gradient(closest-side at 50% 55%,
      rgba(250,247,242,.40) 0%,rgba(250,247,242,.22) 58%,rgba(250,247,242,0) 100%)}
  /* Hochformat: Balus Kopf sitzt zwangsläufig im oberen Bilddrittel. Der Text
     rückt darunter — Gesicht bleibt frei. */
  .hero-copy{align-items:flex-end;padding-bottom:7vh}
  /* Der Pfeil im „Unsere Mission“-Button übernimmt hier die Scroll-Einladung —
     die Cue würde sonst unter den Buttons liegen. */
  .scroll-cue{display:none}
  .caption{max-width:min(21rem,86vw)}
  .cap-left{left:4vw;top:16vh}
  .cap-right{right:4vw;top:auto;bottom:30vh}
  .cap-low{left:4vw;bottom:14vh}
  .intro-emblem{width:min(420px,90vw)}
}

/* ————— 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}