/* ---------- Reveal Opt-in Hidden-States (nur wenn JS+fx aktiv) ---------- */
.js-ready body.fx [data-reveal]{opacity:0}

/* Hero-Entrance als CSS statt GSAP: startet beim Parsen (kein JS-/Font-Gate),
   damit das LCP-Element (hero__lead) sofort paintet. Start bei opacity:.1 (nicht 0),
   sonst ignoriert Chrome den Paint und das LCP wird bis zum Ende der Einblendung
   verzoegert. Werte 1:1 aus dem frueheren hero-reveal.js (yPercent 40 / blur 8px /
   Dauer 0.5/0.85/0.6s / Delays 0/0.08/0.2/0.7/0.82s / power3.out). */
@keyframes fxHeroRise{from{opacity:.1;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}
@keyframes fxHeroLine{from{opacity:.1;transform:translateY(40%);filter:blur(8px)}to{opacity:1;transform:translateY(0);filter:blur(0)}}
.js-ready body.fx .hero.fx-hero .hero__kicker{animation:fxHeroRise .5s cubic-bezier(.22,.61,.36,1) 0s both}
.js-ready body.fx .hero.fx-hero .hero__lead{animation:fxHeroRise .6s cubic-bezier(.22,.61,.36,1) .7s both}
.js-ready body.fx .hero.fx-hero .hero__ctas{animation:fxHeroRise .6s cubic-bezier(.22,.61,.36,1) .82s both}
.js-ready body.fx .hero.fx-hero .hero__title .hero__line{display:block;animation:fxHeroLine .85s cubic-bezier(.22,.61,.36,1) both}
.js-ready body.fx .hero.fx-hero .hero__title .hero__line:nth-child(1){animation-delay:.08s}
.js-ready body.fx .hero.fx-hero .hero__title .hero__line:nth-child(2){animation-delay:.2s}
@media (prefers-reduced-motion:reduce){
  .js-ready body.fx [data-reveal],
  .js-ready body.fx .hero.fx-hero :is(.hero__kicker,.hero__title,.hero__lead,.hero__ctas),
  .js-ready body.fx .hero.fx-hero .hero__title .hero__line{opacity:1;animation:none;transform:none;filter:none}
}

/* ---------- Seiten-Uebergang (slideUp-Vorhang) ---------- */
.curtain{position:fixed;inset:0;z-index:1000;background:var(--c-menu-bg);transform:translateY(-100%);pointer-events:none;will-change:transform}
.js-ready.pt-enter .curtain{transform:translateY(0)} /* bei Ankunft sofort decken -> kein Aufblitzen */
@media (prefers-reduced-motion:reduce){.curtain{display:none}}

/* ---------- Header ---------- */
.site-header{position:fixed;inset:0 0 auto 0;z-index:100;display:flex;align-items:center;
  justify-content:space-between;gap:1rem;padding:1.1rem var(--container-pad);
  background:color-mix(in srgb,var(--c-sand) 92%,transparent);
  border-bottom:1px solid transparent;transition:padding var(--transition),border-color var(--transition)}
.site-header.is-scrolled{padding-block:.7rem;border-color:var(--c-line)}
/* Frost nur auf Desktop: auf Mobile wuerde backdrop-filter den Header zum Containing-Block
   des position:fixed-Menues machen (Menue dann auf Header-Groesse statt Viewport). */
@media (min-width:769px){.site-header{backdrop-filter:blur(8px)}}
.site-header__brand{font-family:var(--font-display);font-size:1.05rem;letter-spacing:.01em;color:var(--c-ink);text-decoration:none}
.site-header>.site-header__brand{white-space:nowrap}
.site-nav{display:flex;gap:1.6rem;align-items:center}
.site-nav a{font-family:var(--font-label);font-size:.82rem;letter-spacing:.08em;text-transform:uppercase;
  color:var(--c-ink);text-decoration:none}
.site-nav a.btn--primary{color:var(--c-cream)}
.btn{font-family:var(--font-label);font-size:.82rem;letter-spacing:.08em;text-transform:uppercase;
  padding:.85rem 1.5rem;border-radius:var(--radius);text-decoration:none;display:inline-block;transition:background var(--transition),color var(--transition)}
.btn--primary{background:var(--c-forest);color:var(--c-cream)}
.btn--primary:hover{background:var(--c-forest-soft)}
.btn--ghost{border:1px solid var(--c-ink);color:var(--c-ink)}
/* Ghost-CTA ueber dem dunklen Burg-Hero hell, sonst unsichtbar */
.hero--home .btn--ghost{border-color:var(--c-cream);color:var(--c-cream)}
[data-nav-toggle]{display:none}
@media (max-width:768px){
  /* Slide-in + Scale wie Referenz. Off-canvas links wird von html{overflow-x:hidden} geclippt. */
  .site-nav{position:fixed;inset:0;flex-direction:column;justify-content:center;gap:2.2rem;
    background:var(--c-menu-bg);
    transform:translateX(-100%) scale(.7);transform-origin:left center;
    opacity:0;visibility:hidden;pointer-events:none;
    transition:transform .55s cubic-bezier(.22,1,.36,1),opacity .4s ease,visibility .55s;
    z-index:110}
  .site-nav.is-open{transform:translateX(0) scale(1);opacity:1;visibility:visible;pointer-events:auto}
  .site-nav a{color:var(--c-menu-text)}
  .site-nav a.btn--primary{background:var(--c-menu-text);color:var(--c-menu-bg)}
  [data-nav-toggle]{display:block;position:relative;z-index:120;font-family:var(--font-label);text-transform:uppercase;font-size:.8rem}
  .site-header.is-menu-open [data-nav-toggle]{color:var(--c-menu-text)}
}

/* ---------- Hero (Burg, full-bleed) ---------- */
.hero{position:relative;min-height:100svh;display:grid;align-items:end;overflow:hidden;isolation:isolate}
.hero--home::before{content:"";position:absolute;inset:-12% 0;z-index:-2;
  background:center top/cover no-repeat;transform:translateY(var(--py,0));
  background-image:url('/assets/img/burg-hero.jpg'); /* Fallback fuer Browser ohne image-set/AVIF */
  background-image:image-set(url('/assets/img/burg-hero.avif') type('image/avif'),url('/assets/img/burg-hero.jpg') type('image/jpeg'))}
@media (max-width:768px){.hero--home::before{
  background-image:url('/assets/img/burg-hero-m.jpg');
  background-image:image-set(url('/assets/img/burg-hero-m.avif') type('image/avif'),url('/assets/img/burg-hero-m.jpg') type('image/jpeg'))}}
.hero::after{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(180deg,rgba(20,28,20,.28),rgba(20,28,20,.10) 40%,rgba(20,28,20,.55))}
.hero__inner{padding:0 var(--container-pad) clamp(3rem,9vh,7rem);max-width:60rem}
.hero__kicker{color:var(--c-cream);margin-bottom:1.2rem}
.hero__title{color:var(--c-cream);font-size:clamp(2.2rem,9vw,6.5rem);font-weight:300;letter-spacing:-.03em}
.hero__lead{color:var(--c-cream);font-size:var(--fs-md);max-width:34rem;margin-top:1.4rem;opacity:.94}
.hero__ctas{display:flex;gap:1rem;flex-wrap:wrap;margin-top:2rem}
.hero__vertical{position:absolute;right:1.4rem;top:50%;transform:translateY(-50%);writing-mode:vertical-rl;
  font-family:var(--font-display);letter-spacing:.35em;text-transform:uppercase;color:var(--c-cream);opacity:.92;font-size:.95rem;
  text-shadow:0 1px 18px rgba(18,26,18,.6),0 0 2px rgba(18,26,18,.4)}

/* Sekundaerer Hero (Innenseiten, ohne Burg-BG) */
.hero--page{min-height:62svh;background:var(--c-sand-deep)}
.hero--page::after{display:none}
.hero--page .hero__kicker,.hero--page .hero__title,.hero--page .hero__lead{color:var(--c-ink)}
/* Desktop: Inhalt vertikal zentriert + Top-Abstand frei vom fixen Header (sonst oben abgeschnitten);
   Subpage-Titel kleiner als Home-Hero. Mobile bleibt unveraendert. */
@media (min-width:769px){
  .hero--page{align-items:center;min-height:68svh}
  .hero--page .hero__title{font-size:clamp(2.4rem,4.6vw,3.8rem)}
  .hero--page .hero__inner{padding-top:clamp(6.5rem,12vh,8.5rem);padding-bottom:clamp(2.5rem,6vh,4rem)}
}

/* ---------- Generische Sektion ---------- */
.section{padding-block:clamp(4rem,12vh,var(--sp-20))}
.section--center{text-align:center}
.section__head{max-width:46rem;margin-inline:auto}
.section__head .label{margin-bottom:1.4rem}
/* Lesbare, mittig sitzende Fliesstext-Spalte */
.measure{max-width:52rem;margin-inline:auto}
/* Desktop zentriert (Mobile bleibt unveraendert); Ueberschriften behalten volle Containerbreite */
@media (min-width:769px){
  .section--center-dt{text-align:center}
  .section--center-dt .focus-card{text-align:left}
  .section--center-dt img{margin-inline:auto}
}

/* ---------- content_in: 3-Bild-Reihe (links / Martin Mitte / rechts) ---------- */
.heritage{padding-block:clamp(4rem,12vh,var(--sp-20));text-align:center;overflow:hidden}
.heritage__headlines{margin-top:1.2rem;display:grid;gap:.3rem;justify-items:center}
.heritage__hl{margin:0}
/* Ruhe-Layout (auch No-JS/reduced-motion): Seiten kleiner & oben, Mitte groesser & tiefer */
.heritage__images{display:flex;gap:clamp(.6rem,2vw,1.75rem);justify-content:center;align-items:flex-start;
  margin-top:clamp(2rem,7vh,4.5rem)}
.heritage__img{position:relative;z-index:1;margin:0;width:24%;max-width:18rem}
.heritage__img img{width:100%;aspect-ratio:3/4;object-fit:cover;border-radius:var(--radius)}
picture{display:contents} /* <picture>-Wrapper erzeugt keine eigene Box -> img-Layout identisch */
.heritage__img--mid{z-index:2;width:32%;max-width:24rem;transform:translateY(2.4rem)}
.heritage__img--mid img{aspect-ratio:4/5}
/* gepinnte cinematische Sequenz (Klasse von heritage-pin.js gesetzt) — Desktop + Mobile */
.heritage--pin{min-height:100svh;display:grid;align-content:center;padding-block:0}
.heritage--pin .heritage__hl{grid-area:1/1}

/* ---------- Schwerpunkte-Teaser ---------- */
.focus-grid{display:grid;gap:clamp(1.5rem,4vw,3rem);grid-template-columns:repeat(auto-fit,minmax(15rem,1fr));margin-top:3rem}
.focus-card{border-top:1px solid var(--c-line);padding-top:1.2rem}
.focus-card h3{margin-bottom:.6rem}

/* ---------- Listen (Mitgliedschaften etc.) ---------- */
.stack-list{list-style:none;padding:0}
.stack-list li{border-top:1px solid var(--c-line);padding-block:.9rem}

/* ---------- FAQ ---------- */
.faq{margin-top:clamp(2rem,5vh,3rem)}
.faq__item{border-top:1px solid var(--c-line);padding-block:1.4rem}
.faq__item h3{font-size:var(--fs-md);margin-bottom:.5rem}

/* ---------- Footer ---------- */
.site-footer{margin-top:auto;background:var(--c-forest);color:var(--c-cream);padding-block:clamp(3rem,8vh,5rem)}
.site-footer a{color:var(--c-cream)}
.site-footer__grid{display:grid;gap:2rem;grid-template-columns:repeat(auto-fit,minmax(13rem,1fr))}
.site-footer address{font-style:normal}
.site-footer__legal{margin-top:2.5rem;font-size:var(--fs-sm);opacity:.8;display:flex;gap:1.5rem;flex-wrap:wrap}