/* ============================================================
   Grenzgang Wollmar 2027 — Prototyp v2
   Helle Grundstimmung, dunkle Abschnitte als Kontrast.
   ============================================================ */

:root{
  /* helle Welt */
  --paper:#EFEADF;
  --paper-2:#E4DCCB;
  --sand:#E6DCC6;
  --ink:#16241C;
  --ink-soft:#5F6E62;

  /* dunkle Welt */
  --night:#0E1A14;
  --forest:#16261D;
  --cream:#F0EADD;
  --cream-soft:#9CAB9F;

  --gold:#C08A0C;
  --gold-lit:#E8B32A;
  --gold-dark:#8E6606;
  --stone-c:#9C8B6B;

  --f-display:"Fraunces",Georgia,"Times New Roman",serif;
  --f-text:"Karla","Helvetica Neue",Arial,sans-serif;
  --f-mono:"JetBrains Mono",ui-monospace,Consolas,monospace;

  --hero-grund:#16302B;
  --gut:clamp(20px,4vw,40px);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--f-text);
  font-weight:400;font-size:17px;line-height:1.65;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{max-width:100%;height:auto;display:block}
::selection{background:var(--gold);color:#fff}

.skip{position:absolute;left:-9999px;top:0;z-index:200;
  background:var(--gold);color:#fff;padding:12px 18px;font-weight:700}
.skip:focus{left:12px;top:12px}

/* Hinweis, dass dies ein Entwurf ist und keine Seite des Vereins */
.draftbar{
  position:fixed;left:0;right:0;top:0;z-index:90;margin:0;
  background:#3A2E14;color:#EFE2C0;
  font-family:var(--f-mono);font-size:11px;line-height:1.5;letter-spacing:.04em;
  text-align:center;padding:8px 16px;
}

:focus-visible{outline:2px solid var(--gold);outline-offset:3px;border-radius:3px}

.wrap{max-width:1120px;margin:0 auto;padding:0 var(--gut)}

/* ---------- Abschnittsfarben ---------- */
.act{position:relative}
.act.light{background:var(--paper);color:var(--ink)}
.act.sand {background:var(--sand); color:var(--ink)}
.act.dark {background:var(--night);color:var(--cream)}
.act.light,.act.sand,.act.dark{padding:clamp(76px,10vh,140px) 0}
.act-hero{padding:0}

/* Waldkante: erscheint am oberen Rand jedes dunklen Abschnitts */
.act.dark::before,.act.dark::after{
  content:"";position:absolute;left:0;right:0;height:26px;z-index:2;
  background:var(--night);
  -webkit-mask:var(--treeline) repeat-x bottom/160px 26px;
          mask:var(--treeline) repeat-x bottom/160px 26px;
}
.act.dark::before{top:-25px}
.act.dark::after{bottom:-25px;transform:scaleY(-1)}
.act.act-hero::before,.act.act-hero::after{display:none}
:root{
  --treeline:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='26' viewBox='0 0 160 26'%3E%3Cpath d='M0 26V18l6-12 6 12 8-4 6-12 6 12 8 3 6-9 6 9 8-4 6-10 6 10 8 3 6-9 6 9 8-4 6-8 6 8 8 5 6-8 6 8 8-3 6-9 6 9 8 4v8z' fill='%23000'/%3E%3C/svg%3E");
}

/* ---------- Typografie ---------- */
h1,h2,h3{margin:0;font-weight:500;text-wrap:balance}
h1{font-family:var(--f-display);font-weight:500;
  font-size:clamp(42px,7.8vw,94px);line-height:1.0;letter-spacing:-.022em;
  font-variation-settings:"SOFT" 20,"WONK" 1}
h1 em{font-style:italic;color:var(--gold-lit)}
h2{font-family:var(--f-display);font-weight:500;
  font-size:clamp(30px,4.6vw,54px);line-height:1.1;letter-spacing:-.018em;margin-bottom:18px;
  font-variation-settings:"SOFT" 20,"WONK" 1}
h2 em{font-style:italic;color:var(--gold)}
.dark h2 em{color:var(--gold-lit)}
h3{font-family:var(--f-text);font-weight:700;font-size:16.5px;letter-spacing:.02em;margin:30px 0 10px}
p{margin:14px 0;max-width:66ch}
.lead{font-size:clamp(18px,1.9vw,21px);line-height:1.58;max-width:60ch;color:var(--ink-soft);font-weight:400}
.dark .lead{color:var(--cream-soft)}
.lead em{font-style:italic;color:var(--ink)}
.dark .lead em{color:var(--cream)}
strong{font-weight:700}

.label,.eyebrow{
  font-family:var(--f-mono);font-weight:500;font-size:11px;letter-spacing:.22em;text-transform:uppercase;
  color:var(--gold);margin:0 0 14px;
}
.dark .label,.eyebrow{color:var(--gold-lit)}
.label.chip{display:inline-block;background:var(--gold);color:#fff;padding:6px 11px;margin-bottom:0}
.caption{
  font-family:var(--f-mono);font-size:12.5px;line-height:1.6;color:var(--ink-soft);
  max-width:64ch;margin-top:22px;
}
.dark .caption{color:var(--cream-soft)}
figcaption{
  font-family:var(--f-mono);font-size:12px;line-height:1.55;color:var(--ink-soft);margin-top:10px;
}
.dark figcaption{color:var(--cream-soft)}

/* ---------- Kopfleiste ---------- */
.topbar{
  position:fixed;left:0;right:0;top:var(--draft-h,32px);z-index:80;
  display:flex;align-items:center;gap:28px;padding:16px var(--gut);
  color:var(--cream);
  transition:background-color .3s,color .3s,padding .3s,box-shadow .3s;
}
.topbar.solid{
  background:rgba(239,234,223,.9);backdrop-filter:blur(10px);
  color:var(--ink);box-shadow:0 1px 0 rgba(22,36,28,.10);
  padding-top:11px;padding-bottom:11px;
}
.brand{display:flex;align-items:center;gap:11px;color:inherit;text-decoration:none;margin-right:auto}
.brand-mark{width:24px;height:30px;color:var(--gold-lit);flex:none}
.topbar.solid .brand-mark{color:var(--gold)}
.brand-txt{font-family:var(--f-display);font-size:15px;line-height:1.05}
.brand-txt em{font-style:italic;color:var(--gold-lit)}
.topbar.solid .brand-txt em{color:var(--gold)}
.topnav{display:flex;gap:26px}
.topnav a{
  font-family:var(--f-mono);font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;
  color:inherit;opacity:.72;text-decoration:none;padding:4px 0;border-bottom:1px solid transparent;
}
.topnav a:hover{opacity:1;border-bottom-color:var(--gold-lit)}
.topcta{
  font-family:var(--f-mono);font-size:12px;letter-spacing:.12em;font-weight:500;
  background:var(--gold);color:#fff;text-decoration:none;padding:9px 16px;border-radius:999px;
}
.topcta:hover{background:var(--gold-dark)}
@media(max-width:860px){.topnav{display:none}}

/* ---------- Datumsscheibe ---------- */
.disc{
  position:fixed;right:clamp(14px,3vw,34px);bottom:clamp(14px,3vw,34px);z-index:70;
  width:112px;height:112px;border-radius:50%;
  background:var(--gold);color:#fff;text-decoration:none;
  display:grid;place-items:center;text-align:center;
  box-shadow:0 14px 34px rgba(22,36,28,.28);
  opacity:0;transform:scale(.7);pointer-events:none;visibility:hidden;
  transition:opacity .4s,transform .4s,box-shadow .3s,visibility 0s .4s;
}
.disc.on{opacity:1;transform:scale(1);pointer-events:auto;visibility:visible;
  transition:opacity .4s,transform .4s,box-shadow .3s,visibility 0s}
.disc:hover{box-shadow:0 0 0 8px rgba(184,134,27,.18),0 14px 34px rgba(22,36,28,.28)}
.disc-in{font-family:var(--f-mono);font-size:12px;line-height:1.5}
.disc-in b{display:block;font-weight:500}
.disc-in i{display:block;font-style:normal;font-size:10px;letter-spacing:.16em;
  text-transform:uppercase;opacity:.8}
@media(max-width:560px){.draftbar{font-size:10px;padding:7px 10px;letter-spacing:.02em}}
@media(max-width:640px){.disc{width:86px;height:86px}.disc-in{font-size:10px}.disc-in i{font-size:8.5px}}

/* ============ 1 ANKUNFT ============ */
/* Erst ein Textbild auf farbigem Grund, dann steigen drei Ebenen ins Bild.
   Die vorderste wird dabei immer praesenter und schiebt sich ueber die hinteren.
   .act.dark schlaegt .act-hero, deshalb ueberall .act.act-hero schreiben. */
.act.act-hero{height:380svh;min-height:1850px; background:var(--hero-grund);padding:0}
.act.act-hero .hero-stage{position:sticky;top:0;height:100svh;min-height:520px;overflow:hidden}

.hero-ground{position:absolute;inset:0;
  background:linear-gradient(180deg,#16302B 0%,#193831 52%,#142C26 100%)}

.hero-layers{position:absolute;inset:0}
.hz{position:absolute;left:-6%;width:112%;max-width:none;
  top:-20%;height:166%;object-fit:cover;object-position:center 58%;
  will-change:transform,opacity;transform:translate3d(0,100vh,0)}

.hero-scrim{
  position:absolute;inset:0;z-index:4;pointer-events:none;opacity:0;
  background:linear-gradient(180deg,rgba(5,13,10,.34) 0%,rgba(5,13,10,.10) 30%,rgba(5,13,10,.94) 100%);
}
/* Der Schluss: die Landschaft laeuft ins Schwarze und uebergibt an den naechsten Abschnitt */
.hero-nacht{position:absolute;inset:0;z-index:7;pointer-events:none;opacity:0;
  background:#050D0A;will-change:opacity}

/* Das Textbild */
.hero-title{
  position:absolute;left:0;right:0;top:50%;transform:translateY(-50%);z-index:5;
  padding:0 var(--gut);text-align:center;color:var(--cream);
  will-change:opacity;
}
.hero-kicker{
  margin:0 0 clamp(16px,2.4vh,30px);font-family:var(--f-mono);
  font-size:clamp(10px,1.05vw,12px);letter-spacing:.24em;text-transform:uppercase;
  color:#9FB6A6;
}
.hero-name{
  font-family:var(--f-display);font-weight:500;
  font-size:clamp(38px,8.6vw,132px);line-height:.94;letter-spacing:-.028em;
  font-variation-settings:"SOFT" 20,"WONK" 1;
  text-shadow:none;
}
.hero-name span{display:block}
.hero-name .hn-2{color:#8DA694;font-style:italic;letter-spacing:-.02em}
.hero-claim{
  margin:clamp(18px,2.8vh,34px) 0 0;color:var(--gold-lit);
  font-family:var(--f-display);font-style:italic;font-weight:500;
  font-size:clamp(17px,2.5vw,34px);letter-spacing:.005em;
}

/* Termin und Countdown, kommen mit der Landschaft */
/* Eigener Verlauf unter dem Text, sonst steht helles Grau auf hellem Feld */
.hero-copy::before{
  content:"";position:absolute;left:calc(50% - 50vw);right:calc(50% - 50vw);
  bottom:-40vh;top:-120px;z-index:-1;
  background:linear-gradient(180deg,rgba(5,13,10,0) 0%,rgba(5,13,10,.62) 38%,rgba(5,13,10,.84) 100%);
  pointer-events:none;
}
.hero-copy{
  position:absolute;left:0;right:0;bottom:clamp(52px,9vh,110px);z-index:6;
  padding:0 var(--gut);max-width:1120px;margin:0 auto;color:var(--cream);
  opacity:0;will-change:opacity;
}
.hero-sub{margin:0;font-size:clamp(16px,1.8vw,20px);color:#DCE4DB;max-width:42ch;
  text-shadow:0 2px 18px rgba(0,0,0,.75)}
.hero-meta{font-family:var(--f-mono);font-size:12px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--gold-lit);margin:22px 0 0;
  text-shadow:0 2px 14px rgba(0,0,0,.75)}

/* Pflichtkennzeichnung nach Art. 50 KI-VO. Bleibt lesbar, wird nicht weggedimmt. */
.ki-hinweis{
  position:absolute;right:var(--gut);top:clamp(104px,14vh,140px);z-index:8;margin:0;
  font-family:var(--f-mono);font-size:11px;font-weight:500;letter-spacing:.12em;
  text-transform:uppercase;color:rgba(240,234,221,.86);
  text-shadow:0 1px 10px rgba(0,0,0,.9);
  opacity:0;will-change:opacity;pointer-events:none;
}
@media(max-width:900px){.ki-hinweis{top:clamp(96px,13vh,124px);font-size:10px}}

/* Der Hero endet als Huegelkante auf hellem Grund */
.hero-kante{position:relative;z-index:3;margin-top:-1px;line-height:0;background:var(--paper)}
.hero-kante svg{display:block;width:100%;height:clamp(26px,3.4vh,46px)}
.hero-kante path{fill:#050D0A}

@media(max-width:640px){
  .act.act-hero{height:310svh;min-height:1380px}
  .act.act-hero .hero-stage{height:100svh;min-height:480px}
  .hero-name{font-size:clamp(34px,11.5vw,64px)}
}
@media(prefers-reduced-motion:reduce){
  .act.act-hero{height:auto;min-height:0}
  .act.act-hero .hero-stage{position:relative;height:100svh}
  .hz{transform:none}
  /* Ohne Bewegung stehen Titel und Termin gleichzeitig auf der Landschaft.
     Der Titel rueckt nach oben, der Grund wird kraeftiger. */
  .hero-title{position:absolute;top:clamp(140px,22%,26%);transform:none;text-align:left;
    max-width:1120px;margin:0 auto;padding-left:clamp(28px,6vw,90px)}
  .hero-name{font-size:clamp(34px,5.6vw,78px)}
  .hero-claim{font-size:clamp(16px,2vw,26px)}
  .hero-scrim{background:linear-gradient(180deg,rgba(5,13,10,.80) 0%,rgba(5,13,10,.42) 46%,rgba(5,13,10,.88) 100%)}
  .hero-copy::before{display:none}
}

/* ============ 2 DIE ROUTE ============ */
.route{
  position:relative;margin:clamp(40px,7vh,80px) auto 0;
  max-width:1120px;height:2280px;color:var(--gold);
  overflow-x:clip;
}
.route-svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.route-ghost{opacity:.20}
#routePath{opacity:1}
.route-dots{position:absolute;inset:0;pointer-events:none}
.route-dots i{
  position:absolute;width:13px;height:13px;margin:-6.5px 0 0 -6.5px;
  border-radius:50%;background:var(--paper);border:3px solid var(--gold);
  opacity:0;transform:scale(.5);
  transition:opacity .45s ease,transform .45s cubic-bezier(.2,.9,.3,1);
}
.route-dots i.on{opacity:1;transform:scale(1)}
.route-dots i.end{background:var(--gold)}
.route::after{           /* Startpunkt oben */
  content:"";position:absolute;left:50%;top:-7px;width:14px;height:14px;
  margin-left:-7px;border-radius:50%;background:var(--gold);
}
.stop-end .stop-name{color:var(--gold)}

.stops{list-style:none;margin:0;padding:0;position:absolute;inset:0}
.stop{
  position:absolute;top:var(--y);--ab:clamp(30px,4.2vw,58px);
  opacity:0;transition:opacity .6s ease,transform .6s cubic-bezier(.2,.8,.3,1);
}
.stop[data-side="right"]{left:calc(var(--px,50%) + var(--ab));
  width:calc(100% - var(--px,50%) - var(--ab));transform:translate(26px,10px)}
.stop[data-side="left"] {right:calc(100% - var(--px,50%) + var(--ab));
  width:calc(var(--px,50%) - var(--ab));text-align:right;transform:translate(-26px,10px)}
.stop.on{opacity:1;transform:translate(0,0)}
.stop-name{
  display:block;font-family:var(--f-display);font-weight:500;
  font-size:clamp(28px,4.4vw,52px);line-height:1.02;letter-spacing:-.01em;color:var(--ink);
}
.stop-end .stop-name{color:var(--gold)}
.stop-end::before{background:var(--gold)}

@media(max-width:720px){
  /* Die Linie bleibt im eigenen Koordinatenraum, sonst wandern die Punkte
     von ihr weg und die Seite bekommt horizontalen Ueberlauf.
     Die Hoehe bleibt wie am Desktop: die --y-Werte sind absolut, eine
     niedrigere Bühne wirft die letzte Station unten heraus. */
  .route{padding:0 14px}
  .stop,.stop[data-side="left"],.stop[data-side="right"]{
    left:14px;right:auto;width:calc(var(--px,50%) - 26px);
    text-align:left;transform:translate(14px,8px);
  }
  .stop.on{transform:none}
  .stop-name{font-size:clamp(20px,6vw,28px);letter-spacing:0}
}

/* ---------- Drehkarte: Hintergruende des Grenzgangs ----------
   Beide Seiten liegen uebereinander, die Hoehe des Rahmens setzt das Skript
   auf die gerade sichtbare Seite. Ohne das kippt der Rahmen auf 0. */
.dreh{
  position:relative;margin-top:clamp(48px,7vw,80px);
  perspective:2200px;
  transition:height .55s cubic-bezier(.2,.8,.3,1);
}
.dreh-innen{
  position:relative;width:100%;height:100%;
  transform-style:preserve-3d;
  transition:transform .8s cubic-bezier(.3,.9,.25,1);
}
.dreh.um .dreh-innen{transform:rotateY(180deg)}
.dreh-seite{
  position:absolute;inset:0 0 auto 0;
  -webkit-backface-visibility:hidden;backface-visibility:hidden;
  border-radius:6px;padding:clamp(28px,4.4vw,56px);
}
.dreh-vorn{
  background:var(--forest);color:var(--cream);
  display:flex;flex-direction:column;align-items:flex-start;
  min-height:clamp(300px,34vw,420px);justify-content:center;
  box-shadow:0 18px 44px rgba(22,36,28,.16);
}
.dreh-vorn .label{color:var(--gold-lit)}
.dreh-vorn h3{
  font-family:var(--f-display);font-weight:500;
  font-size:clamp(30px,4.2vw,50px);line-height:1.08;letter-spacing:-.018em;
  font-variation-settings:"SOFT" 20,"WONK" 1;margin:0;max-width:16ch;
}
.dreh-teaser{margin:18px 0 0;color:#C3CFC4;max-width:52ch;font-size:clamp(16px,1.5vw,18px)}
.dreh-hinten{
  transform:rotateY(180deg);
  background:var(--sand);color:var(--ink);
  border:1px solid rgba(22,36,28,.14);
}
.dreh-kopf{
  display:flex;align-items:center;justify-content:space-between;gap:20px;
  flex-wrap:wrap;margin-bottom:clamp(18px,2.4vw,28px);
}
.dreh-kopf .label{margin:0}
.dreh-text{
  display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,3.4vw,52px);
}
.dreh-text p{margin:0 0 16px;font-size:16px;line-height:1.72}
.dreh-fig{margin:22px 0 0}
.dreh-fig img{border:1px solid rgba(22,36,28,.16);border-radius:3px}

.dreh-knopf{
  display:inline-flex;align-items:center;gap:9px;border:0;cursor:pointer;
  font-family:var(--f-mono);
}
.dreh-knopf svg{width:16px;height:16px;flex:none}
.dreh-zu{margin-top:0}

@media(max-width:760px){
  .dreh-text{grid-template-columns:1fr;gap:0}
  .dreh-vorn{min-height:260px}
}
@media(prefers-reduced-motion:reduce){
  .dreh,.dreh-innen{transition:none}
  /* Ohne Drehung muss auch die Rueckseite ihre eigene Drehung ablegen,
     sonst steht ihr Text spiegelverkehrt. */
  .dreh.um .dreh-innen,.dreh-hinten{transform:none}
  .dreh-seite{-webkit-backface-visibility:visible;backface-visibility:visible}
  .dreh.um .dreh-vorn{visibility:hidden}
  .dreh:not(.um) .dreh-hinten{visibility:hidden}
}

/* ============ 3 DIE STEINE ============ */
.stones-head{
  display:grid;grid-template-columns:1.35fr .65fr;gap:clamp(28px,5vw,64px);
  align-items:end;
}
.stone-photo{margin:0;position:relative;text-align:center}
.stone-photo img{
  width:auto;max-height:340px;margin:0 auto;
  filter:drop-shadow(0 24px 26px rgba(22,36,28,.30));
}
.stone-photo figcaption{text-align:center;margin-top:16px}
.stone-photo::after{            /* Boden, in dem der Stein steckt */
  content:"";position:absolute;left:50%;bottom:52px;
  width:190px;height:16px;margin-left:-95px;border-radius:50%;
  background:radial-gradient(ellipse,rgba(22,36,28,.22),transparent 70%);
  z-index:-1;
}
@media(max-width:760px){.stones-head{grid-template-columns:1fr}}

.stones{
  list-style:none;margin:clamp(44px,6vw,68px) 0 0;padding:0;
  display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:22px;
}
.stone{perspective:900px}
.stone-btn{
  display:block;width:100%;position:relative;
  background:none;border:0;padding:0;cursor:pointer;text-align:left;font:inherit;color:inherit;
  transform-style:preserve-3d;transition:transform .65s cubic-bezier(.3,.8,.3,1);
}
.stone.flip .stone-btn{transform:rotateX(-168deg)}
.stone-face,.stone-under{
  min-height:236px;padding:26px 26px 74px;
  backface-visibility:hidden;-webkit-backface-visibility:hidden;
  display:flex;flex-direction:column;justify-content:space-between;
  border-radius:4px 4px 2px 2px;
}
.stone-face{
  position:relative;
  background:linear-gradient(168deg,#D6CBAC 0%,#BCAF8D 54%,#9E9070 100%);
  color:#2C2718;
  box-shadow:inset 0 2px 0 rgba(255,255,255,.42),0 12px 26px rgba(22,36,28,.18);
}
.stone-year{font-family:var(--f-display);font-size:46px;line-height:1}
.stone-mark{font-family:var(--f-mono);font-size:13px;letter-spacing:.28em;
  padding-top:14px;border-top:1px solid rgba(44,39,24,.3)}
.stone-under{
  position:absolute;inset:0;transform:rotateX(180deg);
  justify-content:flex-start;gap:16px;
  background:#2E2A1E;border:1px solid rgba(156,139,107,.35);color:var(--cream);
}
.stone-h{font-family:var(--f-mono);font-size:11px;letter-spacing:.22em;
  text-transform:uppercase;color:#C4B48E}
.stone-t{font-size:15.5px;line-height:1.55}
.stone-btn:focus-visible{outline:2px solid var(--gold);outline-offset:5px}
.stone-cue,.stone-back{
  position:absolute;right:20px;bottom:20px;
  font-family:var(--f-mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  padding:8px 14px 8px 30px;border-radius:999px;
}
.stone-cue{background:#4A422C;color:#EDE4CB;box-shadow:0 2px 0 rgba(0,0,0,.22)}
.stone-back{background:var(--gold);color:#fff;box-shadow:0 2px 0 var(--gold-dark)}
.stone-cue::before,.stone-back::before{
  content:"";position:absolute;left:13px;top:50%;width:9px;height:9px;margin-top:-4.5px;
  border:1.5px solid currentColor;border-radius:50%;border-top-color:transparent;
}
.stone-btn:hover .stone-cue{background:#5A5136}

/* ============ 4 DIE BURSCHEN ============ */
.burschen-grid{
  display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(28px,5vw,64px);
  align-items:start;margin-top:34px;
}
.burschen-media{display:flex;flex-direction:column;gap:22px}
.burschen-media figure{margin:0}
.burschen-media img{border:1px solid rgba(240,234,221,.14)}
.fig-flag{max-width:200px}
.ticks{list-style:none;margin:12px 0 0;padding:0;max-width:60ch}
.ticks li{position:relative;padding-left:26px;margin:11px 0}
.ticks li::before{content:"";position:absolute;left:0;top:.66em;width:12px;height:1px;background:var(--gold-lit)}
@media(max-width:760px){.burschen-grid{grid-template-columns:1fr}}

/* ============ 5 VIER TAGE ============ */
.days{list-style:none;margin:44px 0 0;padding:0}
.day{
  display:grid;grid-template-columns:96px 1fr;gap:clamp(18px,3vw,40px);
  padding:30px 0;border-top:1px solid rgba(22,36,28,.14);align-items:start;
}
.day:last-child{border-bottom:1px solid rgba(22,36,28,.14)}
.day-no{font-family:var(--f-display);font-size:clamp(30px,4vw,46px);line-height:1;color:var(--gold)}
.day h3{margin-top:0}
.day p{margin:8px 0 0}
.day-signs{display:flex;flex-wrap:wrap;gap:9px;margin-top:16px}
.mini{
  font-family:var(--f-mono);font-size:11px;letter-spacing:.08em;
  background:rgba(184,134,27,.12);color:var(--gold-dark);
  border:1px solid rgba(184,134,27,.32);border-radius:999px;padding:5px 12px;
}

/* ============ 6 DER FESTZUG ============ */
.act-peak{position:relative;min-height:200svh;background:#0B1611}
.peak-stage{position:sticky;top:0;height:100svh;overflow:hidden}
.peak-img{position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:center 32%}
.peak-day{opacity:0;will-change:opacity}
.peak-veil{position:absolute;inset:0;opacity:1;will-change:opacity;
  background:linear-gradient(180deg,rgba(11,22,17,.76) 0%,rgba(11,22,17,.14) 42%,rgba(11,22,17,.6) 100%)}
.peak-copy{
  position:absolute;left:0;right:0;bottom:0;color:var(--cream);
  padding:clamp(70px,12vh,150px) var(--gut) clamp(52px,9vh,104px) clamp(28px,6vw,90px);
  max-width:1200px;margin:0 auto;
  background:linear-gradient(180deg,rgba(9,18,14,0),rgba(9,18,14,.6) 44%,rgba(9,18,14,.9) 100%);
}
.peak-h{font-size:clamp(38px,7vw,88px);line-height:1;margin:18px 0 0;
  text-shadow:0 4px 30px rgba(0,0,0,.55)}
.peak-h em{color:var(--gold-lit)}
.peak-sub{font-size:clamp(16px,1.8vw,19px);max-width:42ch;margin-top:20px;
  text-shadow:0 2px 18px rgba(0,0,0,.7)}

/* ---------- Ohne Text traegt das Bild allein, der Schleier darf leichter sein ---------- */
.peak-veil{background:linear-gradient(180deg,rgba(11,22,17,.62) 0%,rgba(11,22,17,.08) 44%,rgba(11,22,17,.5) 100%)}

/* ============ DER VEREIN ============ */
.kacheln{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:clamp(14px,1.6vw,20px);margin-top:clamp(34px,5vw,54px);
}
.kachel{
  display:flex;flex-direction:column;align-items:flex-start;gap:10px;
  background:var(--paper);border:1px solid rgba(22,36,28,.16);border-radius:5px;
  padding:clamp(20px,2.4vw,28px);text-align:left;cursor:pointer;
  font-family:inherit;color:var(--ink);
  box-shadow:0 2px 0 rgba(22,36,28,.12);
  transition:transform .16s,box-shadow .16s,border-color .2s,background-color .2s;
}
.kachel:hover{transform:translateY(-2px);box-shadow:0 8px 20px rgba(22,36,28,.13);
  border-color:rgba(192,138,12,.55)}
.kachel[aria-expanded="true"]{
  background:var(--forest);border-color:var(--forest);color:var(--cream);
  transform:none;box-shadow:0 2px 0 rgba(22,36,28,.2);
}
.kachel-nr{font-family:var(--f-mono);font-size:11px;letter-spacing:.2em;color:var(--gold)}
.kachel[aria-expanded="true"] .kachel-nr{color:var(--gold-lit)}
.kachel-titel{font-family:var(--f-display);font-weight:500;font-size:clamp(20px,2.1vw,26px);
  line-height:1.12;font-variation-settings:"SOFT" 20,"WONK" 1}
.kachel-mehr{
  margin-top:auto;display:inline-flex;align-items:center;gap:7px;
  font-family:var(--f-mono);font-size:11.5px;letter-spacing:.08em;color:var(--ink-soft);
}
.kachel[aria-expanded="true"] .kachel-mehr{color:var(--cream-soft)}
.kachel-mehr svg{width:13px;height:13px;transition:transform .25s}
.kachel[aria-expanded="true"] .kachel-mehr svg{transform:rotate(45deg)}

.tafel{
  margin-top:clamp(14px,1.6vw,20px);background:var(--paper);
  border:1px solid rgba(22,36,28,.18);border-radius:5px;
  box-shadow:0 10px 30px rgba(22,36,28,.09);
  padding:clamp(24px,3.4vw,46px);
}
.tafel[hidden]{display:none}
.tafel h3{
  font-family:var(--f-display);font-weight:500;font-size:clamp(24px,3vw,36px);
  line-height:1.12;letter-spacing:-.012em;font-variation-settings:"SOFT" 20,"WONK" 1;
  margin:0 0 clamp(18px,2.2vw,26px);
}
.tafel-text{columns:2;column-gap:clamp(28px,3.6vw,56px)}
.tafel-text > *{break-inside:avoid-column}
.tafel-text p{margin:0 0 14px;font-size:15.5px;line-height:1.7;max-width:none}
.tafel-text h4{
  font-family:var(--f-text);font-weight:700;font-size:14px;letter-spacing:.04em;
  margin:22px 0 8px;color:var(--gold-dark);
}
.tafel-text h4:first-child{margin-top:0}
.tafel-text ul{margin:0 0 14px;padding-left:0;list-style:none}
.tafel-text li{font-size:15.5px;line-height:1.7;margin-bottom:4px}
.tafel-text li b{font-weight:700}
.tafel-jahr{
  display:grid;grid-template-columns:auto 1fr;gap:6px 16px;margin:0 0 14px;
  font-size:15.5px;line-height:1.6;
}
.tafel-jahr dt{font-family:var(--f-mono);font-size:12.5px;color:var(--gold-dark);padding-top:3px}
.tafel-jahr dd{margin:0}
.tafel-zu{margin-top:clamp(22px,2.6vw,32px)}
@media(max-width:820px){.tafel-text{columns:1}}

/* ============ 7 KOMMT VORBEI ============ */
.endgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:20px;margin-top:44px}
.endcard{
  background:#fff;border:1px solid rgba(22,36,28,.12);
  padding:28px 26px 30px;display:flex;flex-direction:column;
  box-shadow:0 2px 10px rgba(22,36,28,.05);
}
.endcard p{max-width:none}
.endcard-date{background:var(--sand);border-color:rgba(184,134,27,.34)}
.ec-label{font-family:var(--f-mono);font-size:10.5px;letter-spacing:.22em;
  text-transform:uppercase;color:var(--gold);margin:0 0 16px}
.ec-big{font-family:var(--f-display);font-size:31px;line-height:1.08;margin:0}
.ec-year{font-family:var(--f-display);font-size:56px;line-height:1;margin:2px 0 0;color:var(--gold)}
.ec-note{font-size:14px;color:var(--ink-soft);margin-top:16px}
.btn{
  align-self:flex-start;margin-top:22px;display:inline-block;
  background:var(--gold);color:#fff;
  font-family:var(--f-mono);font-size:12.5px;letter-spacing:.06em;font-weight:500;
  text-decoration:none;padding:12px 20px;border-radius:3px;
  box-shadow:0 3px 0 var(--gold-dark);
  transition:transform .12s,box-shadow .12s,background-color .2s;
}
.btn:hover{background:#A97914}
.btn:active{transform:translateY(3px);box-shadow:0 0 0 var(--gold-dark)}

.archive{margin-top:clamp(56px,8vw,92px)}
.archive-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:16px;margin-top:18px}
.archive-row figure{margin:0}
.archive-row img{aspect-ratio:4/3;object-fit:cover;
  border:1px solid rgba(22,36,28,.12);opacity:.92;transition:opacity .3s}
.archive-row figure:hover img{opacity:1}

/* ---------- Fuß ---------- */
.foot{background:var(--paper-2);padding:46px 0;border-top:1px solid rgba(22,36,28,.12)}
.foot-in{display:flex;flex-wrap:wrap;gap:20px 34px;align-items:baseline}
.foot-brand{font-family:var(--f-display);font-size:18px;margin:0;margin-right:auto}
.foot-nav{display:flex;flex-wrap:wrap;gap:20px}
.foot-nav a{font-family:var(--f-mono);font-size:11.5px;color:var(--ink-soft);
  text-decoration:none;border-bottom:1px solid transparent}
.foot-nav a:hover{color:var(--ink);border-bottom-color:var(--gold)}
.foot-note{flex-basis:100%;font-family:var(--f-mono);font-size:11px;
  color:var(--ink-soft);opacity:.75;margin:0}

/* ---------- Einblenden ---------- */
.rv{opacity:0;transform:translateY(16px);
  transition:opacity .7s ease,transform .7s cubic-bezier(.2,.8,.3,1)}
.rv.on{opacity:1;transform:none}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important}
  .rv{opacity:1;transform:none}
  .stop,.stop[data-side="left"],.stop[data-side="right"]{opacity:1;transform:none}
  .hz{transform:none!important}
  .peak-day{opacity:1}
  .peak-veil{opacity:.45}
  #routePath{stroke-dashoffset:0!important}
}