/* =========================================================
   Jurock · ruhige Ebene
   Petrona (Display) + Hanken Grotesk (Text), lokal
   Farbsystem: Papier · Kiefer · ein Akzent (Fuchs)
   ========================================================= */

@font-face{font-family:'Petrona';src:url(../assets/fonts/petrona-latin.woff2) format('woff2');font-weight:100 900;font-style:normal;font-display:swap}
@font-face{font-family:'Petrona';src:url(../assets/fonts/petrona-italic-latin.woff2) format('woff2');font-weight:100 900;font-style:italic;font-display:swap}
@font-face{font-family:'Hanken Grotesk';src:url(../assets/fonts/hanken-latin.woff2) format('woff2');font-weight:100 900;font-style:normal;font-display:swap}

:root{
  --paper:#F5F0E7;
  --paper-2:#ECE5D8;
  --ink:#1B2621;
  --ink-soft:#56615B;
  --pine:#213A30;
  --pine-2:#2B463A;
  --fox:#B05A2B;
  --fox-deep:#924720;
  --fox-soft:#E9CDB2;
  --sage:var(--ink-soft);
  --havel:var(--pine);
  --line:rgba(27,38,33,.13);

  --serif:'Petrona', Georgia, 'Times New Roman', serif;
  --sans:'Hanken Grotesk', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --shadow:0 1px 2px rgba(27,38,33,.04), 0 18px 50px -24px rgba(27,38,33,.28);
}

body{font-size:clamp(16px,.5vw + 14px,18px);line-height:1.7;letter-spacing:.003em;font-feature-settings:"kern","liga"}

/* ---------- Typografie ---------- */
h1,h2,h3{font-family:var(--serif);font-variation-settings:normal;font-feature-settings:"kern","liga","lnum"}
h2{font-weight:300;font-size:clamp(2.15rem,4.4vw,3.9rem);line-height:1.06;letter-spacing:-.025em;text-wrap:balance}
h3{font-weight:400;letter-spacing:-.01em}
h2 em,h1 em{font-style:italic;font-weight:300;color:var(--fox)}
.section-head__lead,.room__text p,.person p,.card p,.focus__list p,.step p,.faq__list details p{text-wrap:pretty}
.eyebrow{font-size:.72rem;font-weight:600;letter-spacing:.24em;margin-bottom:1.4rem}
.eyebrow::before{width:32px}

/* Überschriften gleiten beim Erscheinen sanft herein */
h2{transition:transform 1.3s var(--ease-out),opacity 1.3s var(--ease-out),filter 1.3s var(--ease-out)}
.js h2:not(.is-drawn){opacity:0;transform:translateY(.4em);filter:blur(6px)}

/* ---------- Header ---------- */
.brand__text b{font-family:var(--serif);font-weight:400;font-size:1.55rem;letter-spacing:-.015em}
.brand__text small{font-size:.62rem;letter-spacing:.2em}
.site-header.is-hidden{box-shadow:none}
.nav a:not(.btn){font-weight:500}
@media (max-width:920px){.nav a:not(.btn){font-weight:300;font-size:2.1rem;letter-spacing:-.02em}}

/* ---------- Buttons ---------- */
.btn{font-weight:600;letter-spacing:.02em}
.btn--fox{box-shadow:0 14px 34px -16px rgba(176,90,43,.75)}

/* ---------- Hero: schlicht ---------- */
.hero__title{font-weight:300;font-size:clamp(3.2rem,8.2vw,8rem);line-height:.96;letter-spacing:-.04em;margin-bottom:2.2rem}
.hero__title em{font-weight:300;color:var(--fox-soft)}
.hero .eyebrow{margin-bottom:1.6rem}
.hero__shade{background:
  linear-gradient(180deg,rgba(16,26,21,.5) 0%,rgba(16,26,21,0) 24%),
  linear-gradient(0deg,rgba(16,26,21,.78) 0%,rgba(16,26,21,.3) 40%,rgba(16,26,21,0) 64%)}

/* ---------- Intro ---------- */
.intro__statement{font-weight:300;letter-spacing:-.022em;line-height:1.22;text-wrap:pretty}
.intro__statement .w{opacity:.16;transition:opacity .6s var(--ease),color .6s var(--ease)}
.intro__statement .w.hi.on{font-style:italic;color:var(--fox)}
.intro__facts{margin-top:clamp(56px,7vw,96px)}
.fact__num{font-family:var(--serif);font-weight:300;color:var(--pine);font-feature-settings:"lnum"}

/* ---------- Team ---------- */
.person h3{font-weight:300;letter-spacing:-.02em}
.person__meta{color:var(--fox);letter-spacing:.18em;font-size:.72rem}
.tags li{background:transparent;color:var(--ink-soft)}

/* ---------- Angebot ---------- */
.card{background:#FAF7F1}
.card--feature{background:var(--pine);color:var(--paper);border-color:var(--pine)}
.card--feature h3{color:var(--paper)}
.card h3{font-size:clamp(1.5rem,2vw,1.8rem)}
.card::before{display:none}
.card__icon{border-radius:50%;background:transparent;border:1px solid var(--line)}
.card--feature .card__icon{border-color:rgba(245,240,231,.2);background:transparent}
.focus__list li>span{font-family:var(--serif);font-style:italic;font-weight:300}
.price__amount b{font-weight:300}
.price::before{opacity:.6}
.marquee__track li{font-weight:300}
.marquee__track li::after{width:5px;height:5px;opacity:.6}

/* ---------- Raum ---------- */
.compare__handle svg{max-width:none}
.hint{color:var(--ink-soft)!important;font-weight:500}
.hint svg{color:var(--fox)}

/* ---------- Ablauf ---------- */
.step{background:#FAF7F1}
.step__num{font-weight:300}

/* ---------- Atempause: im Kiefer-Ton statt eigener Farbe ---------- */
.breathe{background:var(--pine)}
.breathe h2 em{color:var(--fox-soft)}
.breathe__circle{background:radial-gradient(circle at 35% 30%,rgba(255,255,255,.32),rgba(233,205,178,.2) 50%,rgba(176,90,43,.28));box-shadow:0 0 70px rgba(233,205,178,.22), inset 0 0 40px rgba(255,255,255,.1)}
.breathe__circle span{font-weight:300}

/* ---------- FAQ / Kontakt ---------- */
.faq__list summary{font-weight:400}
.contact h2{font-weight:300}
.contact__mail{font-weight:300}
.booker__step legend{font-weight:300}
.day b{font-weight:300}

/* =========================================================
   Fuchs & Hase · Scroll-Story
   Raster: Text oben · Himmel (Sonne/Mond) · Bühne unten
   → nichts überlagert sich, nichts ragt aus dem Bild
   ========================================================= */
.duo{position:relative;height:420vh;background:var(--paper)}
.duo__sticky{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;display:grid;grid-template-rows:auto minmax(0,1fr) auto;isolation:isolate;color:var(--ink);transition:color 1s var(--ease)}

.duo__sky{position:absolute;inset:0;z-index:-1;background:var(--paper)}
.duo__sky i{position:absolute;inset:0;opacity:0;will-change:opacity}
.duo__dusk{background:linear-gradient(180deg,#E9D3BC 0%,#F0E2D0 55%,var(--paper) 100%)}
.duo__night{background:linear-gradient(180deg,#14241D 0%,var(--pine) 62%,var(--pine-2) 100%)}

/* Texte */
.duo__caps{display:grid;padding:calc(var(--header-h) + clamp(14px,3vh,40px)) var(--gutter) 0;text-align:center}
.duo__cap{grid-area:1/1;align-self:start;margin:0 auto;width:100%;max-width:880px;opacity:0;transform:translateY(14px);filter:blur(4px);transition:opacity .7s var(--ease-out),transform .9s var(--ease-out),filter .7s var(--ease-out);pointer-events:none}
.duo__cap.is-on{opacity:1;transform:none;filter:none;pointer-events:auto}
.duo__cap.is-past{transform:translateY(-14px)}
.duo__cap small{display:block;font-family:var(--sans);font-size:.7rem;font-weight:600;letter-spacing:.24em;text-transform:uppercase;color:var(--fox);margin-bottom:.9rem;transition:color 1s}
.duo__cap p{margin:0 auto;max-width:15em;font-family:var(--serif);font-weight:300;font-size:clamp(1.65rem,3.4vw,3.1rem);line-height:1.12;letter-spacing:-.025em;text-wrap:balance}
.duo__cap em{font-style:italic;color:var(--fox);transition:color 1s}
.duo__hint{display:inline-flex;align-items:center;gap:10px;margin-top:1.3rem;font-size:.72rem;font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:var(--ink-soft);transition:opacity .5s}
.duo__hint::after{content:"";width:1px;height:26px;background:currentColor;transform-origin:top;animation:hintLine 2.2s var(--ease) infinite}
@keyframes hintLine{0%{transform:scaleY(0)}50%{transform:scaleY(1);transform-origin:top}51%{transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}
.duo.is-moving .duo__hint{opacity:0}
.duo__cta{display:inline-flex;align-items:center;gap:.6em;margin-top:1.4rem;padding:.8em 1.4em;border-radius:999px;border:1px solid rgba(245,240,231,.4);color:var(--paper);text-decoration:none;font-weight:600;font-size:.9rem;letter-spacing:.02em;white-space:nowrap;transition:background .3s,border-color .3s}
.duo__cta svg{width:1.1em;height:1.1em}
.duo__cta:hover{background:rgba(245,240,231,.1);border-color:var(--paper)}

.duo.is-night .duo__sticky{color:var(--paper)}
.duo.is-night .duo__cap small{color:var(--fox-soft)}
.duo.is-night .duo__cap em{color:var(--fox-soft)}
.duo.is-night .duo__hint{color:rgba(245,240,231,.6)}

/* Himmel: Sonne geht unter, Mond geht auf, alles im selben Band */
.duo__band{position:relative;min-height:0;display:grid;place-items:center}
.duo__orb{position:relative;height:min(62%,150px);aspect-ratio:1}
.duo__orb i{position:absolute;inset:0;border-radius:50%;will-change:transform,opacity}
.duo__sun{background:radial-gradient(circle at 40% 35%,#F6E6D2,#E9C7A6 70%);box-shadow:0 0 90px 20px rgba(233,199,166,.45)}
.duo__moon{opacity:0;background:var(--paper);-webkit-mask:radial-gradient(circle at 74% 30%,transparent 45%,#000 46%);mask:radial-gradient(circle at 74% 30%,transparent 45%,#000 46%);transform:scale(.62) rotate(-18deg);filter:drop-shadow(0 0 22px rgba(245,240,231,.4))}
.duo__stars{position:absolute;inset:6% 4%;opacity:0;will-change:opacity}
.duo__stars i{position:absolute;left:var(--x);top:var(--y);width:3px;height:3px;border-radius:50%;background:var(--paper);box-shadow:0 0 6px rgba(245,240,231,.8)}
.duo__stars i:nth-child(3n){width:2px;height:2px;opacity:.7}

/* Bühne */
.duo__floor{position:relative;display:flex;justify-content:center;padding-bottom:max(30px,env(safe-area-inset-bottom))}
.duo__floor::before{content:"";position:absolute;left:-10%;right:-10%;bottom:0;height:46%;border-radius:50% 50% 0 0/100% 100% 0 0;background:var(--paper-2);opacity:calc(1 - var(--night,0));pointer-events:none}
.duo__stage{position:relative;height:min(50vh,calc(92vw / 1.55));aspect-ratio:1116/720}
.duo__canvas{position:absolute;inset:0;width:100%;height:100%;
  -webkit-mask:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent),linear-gradient(180deg,transparent,#000 9%);-webkit-mask-composite:source-in;
  mask:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent),linear-gradient(180deg,transparent,#000 9%);mask-composite:intersect}
.duo__shadow{position:absolute;left:22%;right:22%;bottom:1.5%;height:7%;border-radius:50%;background:radial-gradient(closest-side,rgba(27,38,33,.22),transparent);opacity:var(--shadow,0)}

.duo__progress{position:absolute;left:0;right:0;bottom:0;height:2px;background:rgba(27,38,33,.08)}
.duo__progress span{position:absolute;inset:0;background:var(--fox);transform:scaleX(0);transform-origin:left;will-change:transform}
.duo.is-night .duo__progress{background:rgba(245,240,231,.12)}

/* Handy: Bühne randlos, eigener (enger) Bildausschnitt → Tiere groß und vollständig */
@media (max-width:760px){
  .duo{height:380vh}
  .duo__stage{width:100vw;height:auto;max-height:46svh;aspect-ratio:880/720}
  .duo__canvas{-webkit-mask:linear-gradient(180deg,transparent,#000 9%);mask:linear-gradient(180deg,transparent,#000 9%)}
  .duo__orb{height:min(58%,104px)}
  .duo__cap p{font-size:clamp(1.55rem,7vw,2.1rem)}
}
@media (max-width:760px) and (max-height:700px){
  .duo__caps{padding-top:calc(var(--header-h) + 6px)}
  .duo__cap small{margin-bottom:.5rem}
  .duo__cap p{font-size:1.45rem}
}
@media (max-height:520px) and (orientation:landscape){
  .duo__caps{padding-top:14px}
  .duo__cap p{font-size:1.3rem}
  .duo__cap small{margin-bottom:.3rem}
  .duo__hint{display:none}
  .duo__stage{height:52svh}
}

/* ---------- Handy allgemein ---------- */
@media (max-width:640px){
  .hero__content{padding-top:112px}
  .hero__title{font-size:clamp(2.9rem,14vw,3.8rem);margin-bottom:1.6rem}
  .hero__media{top:30%}
  .hero__scroll{display:none}
  .intro__statement{font-size:clamp(1.6rem,7vw,2.1rem)}
  h2{font-size:clamp(2rem,9.2vw,2.6rem)}
  .person h3{font-size:2.1rem}
  .price{border-radius:var(--r)}
  .marquee__track li{font-size:1.6rem}
  .grain{animation:none}
  .reel{scroll-padding-inline:var(--gutter)}
  .clip{height:min(440px,62svh)}
  .footer__row{flex-direction:column;align-items:flex-start;gap:16px}
}

@media (prefers-reduced-motion:reduce){
  .js h2:not(.is-drawn){opacity:1;transform:none}
  .duo__cap{filter:none}
}

/* Kopfzeile auf schmalen Handys einzeilig */
@media (max-width:420px){
  .brand{gap:10px}
  .brand__mark{width:34px;height:34px}
  .brand__text b{font-size:1.4rem}
  .brand__text small{font-size:.56rem;letter-spacing:.14em;white-space:nowrap}
}

/* Preis-Kasten: Lichtkreis bleibt im Kasten (sonst ragt er mobil 90px aus dem Bild) */
@media (max-width:920px){.price{position:relative}}

/* Schritt-/FAQ-Einblendung vertikal statt seitlich: kein kurzzeitiger Überlauf auf dem Handy */
@keyframes stepIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

@media (max-width:640px){.hero .eyebrow{font-size:.64rem;letter-spacing:.16em}.hero .eyebrow::before{display:none}}
.site-header.is-hidden .btn{box-shadow:none}