/* ==========================================================================
   MENTIVA — Design System
   1. Tokens        2. Reset/Base     3. Typografie
   4. Layout        5. Buttons/Chips  6. Navigation
   7. Media/Bento   8. Komponenten    9. Sektionen
   10. Animationen  11. Footer        12. Responsive
   ========================================================================== */

/* 1. TOKENS ------------------------------------------------------------- */
:root{
  /* Farbe */
  --bg:            #FFFFFF;
  --bg-2:          #F4F4F4;
  --surface:       #FFFFFF;
  --ink:           #0D0D0D;
  --ink-2:         #474747;
  --ink-3:         #878787;
  --accent:        #2E3D22;
  --accent-2:      #5C7440;
  --accent-soft:   #E6EBDD;
  --on-dark:       #F7F7F7;
  --on-dark-2:     rgba(247,247,247,.62);
  --line:          rgba(13,13,13,.10);
  --line-2:        rgba(13,13,13,.16);
  --line-dark:     rgba(247,247,247,.16);

  /* Radien */
  /* Weniger rund als bisher, aber nicht eckig — im Bereich der Referenzen
     (Cuberto und Clay 18 px, Framer 15/20 px, Figma 16/24 px). */
  --r-xl: 1.375rem;
  --r-lg: 1rem;
  --r-md: 0.75rem;
  --r-sm: 0.5rem;
  --r-pill: 62.4375rem;

  /* Raster */
  /* Kein enger Deckel mehr: der Inhalt waechst mit dem Fenster, wie in den
     Referenzen. Der hohe Wert bremst nur auf sehr breiten Monitoren, damit
     die Seite dort nicht ins Uferlose laeuft. */
  --wrap: 2560px;
  --pad: clamp(1.25rem, 4.2vw, 4.5rem);
  --gap: clamp(0.75rem, 1.2vw, 1.25rem);
  --sec: clamp(5.625rem, 11vw, 12.5rem);

  /* Typo-Skala (fluid) */
  --fs-mega:    clamp(3rem, 9.6vw, 11rem);
  --fs-display: clamp(2.6rem, 7vw, 6.6rem);
  --fs-h1:      clamp(2.2rem, 5.2vw, 5rem);
  --fs-h2:      clamp(1.9rem, 3.9vw, 3.6rem);
  --fs-h3:      clamp(1.35rem, 2.1vw, 2.05rem);
  --fs-h4:      clamp(1.1rem, 1.35vw, 1.35rem);
  --fs-lead:    clamp(1.05rem, 1.55vw, 1.45rem);
  --fs-body:    clamp(1rem, 1.02vw, 1.09rem);
  --fs-sm:      clamp(.88rem, .92vw, .96rem);
  --fs-xs:      .72rem;

  /* Motion */
  --ease: cubic-bezier(.16,1,.3,1);
  --ease-2: cubic-bezier(.6,.05,.1,1);
  /* Weicher Anfang, sehr sanftes Ende — die Hauskurve von pechschwarz,
     hier fuer Linien und Listen, die gleiten sollen. */
  --ease-slick: cubic-bezier(.24,.43,.15,.97);

  --shadow-sm: 0 1px 2px rgba(13,13,13,.04), 0 0.5rem 1.5rem -0.75rem rgba(13,13,13,.12);
  --shadow-lg: 0 2px 0.25rem rgba(13,13,13,.04), 0 1.875rem 4.375rem -1.875rem rgba(13,13,13,.30);

  --nav-h: 4.75rem;
}

/* 2. RESET / BASE ------------------------------------------------------- */
*,*::before,*::after{ box-sizing:border-box; }
/* Kein scroll-behavior:smooth mehr: das gedaempfte Scrollen am Ende der
   main.js uebernimmt auch die Sprungmarken. Beides zugleich wuerde sich
   gegenseitig ueberschreiben. Ohne Skript springen Anker wie ueblich. */
html{ -webkit-text-size-adjust:100%; }
body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:"Inter Tight","Inter",-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  font-size:var(--fs-body);
  line-height:1.55;
  font-feature-settings:"ss01","cv05","liga","kern";
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
body.is-locked{ overflow:hidden; }
img,svg,video{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer; }
input,textarea,select{ font:inherit; color:inherit; }
::selection{ background:var(--accent); color:#fff; }
:focus-visible{ outline:2px solid var(--accent-2); outline-offset:0.1875rem; border-radius:0.25rem; }

/* Grain-Overlay über der ganzen Seite — filmische Textur */
body::after{
  content:""; position:fixed; inset:0; z-index:9998; pointer-events:none;
  opacity:.08; mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.35'/%3E%3C/svg%3E");
}

/* 3. TYPOGRAFIE --------------------------------------------------------- */
h1,h2,h3,h4{ margin:0; font-weight:500; letter-spacing:-.035em; line-height:1.02; text-wrap:balance; }
h1{ font-size:var(--fs-h1); }
h2{ font-size:var(--fs-h2); }
h3{ font-size:var(--fs-h3); letter-spacing:-.025em; line-height:1.12; }
h4{ font-size:var(--fs-h4); letter-spacing:-.015em; line-height:1.25; }
p{ margin:0; text-wrap:pretty; }
.display{ font-size:var(--fs-display); letter-spacing:-.042em; line-height:.96; }
.mega{ font-size:var(--fs-mega); letter-spacing:-.05em; line-height:.86; font-weight:500; }
.lead{ font-size:var(--fs-lead); line-height:1.4; color:var(--ink-2); letter-spacing:-.015em; }
.small{ font-size:var(--fs-sm); }
.muted{ color:var(--ink-2); }
.muted-3{ color:var(--ink-3); }
.serif{ font-family:"Instrument Serif","Iowan Old Style",Georgia,serif; font-style:italic; font-weight:400; letter-spacing:-.02em; }
.tnum{ font-variant-numeric:tabular-nums; }
.max-40{ max-width:40ch; } .max-50{ max-width:50ch; } .max-60{ max-width:60ch; } .max-70{ max-width:70ch; }
.mt-1{ margin-top:.75rem; } .mt-2{ margin-top:1.5rem; } .mt-3{ margin-top:2.4rem; } .mt-4{ margin-top:clamp(2.125rem,4.5vw,4.5rem); }

.eyebrow{
  display:inline-flex; align-items:center; gap:.6em;
  font-size:var(--fs-xs); text-transform:uppercase; letter-spacing:.16em;
  font-weight:500; color:var(--ink-2);
}
.eyebrow::before{
  content:""; width:0.375rem; height:0.375rem; border-radius:50%; background:var(--accent-2); flex:none;
}
.eyebrow--pill{
  padding:.62em 1.15em; border-radius:var(--r-pill);
  background:rgba(13,13,13,.05); border:1px solid var(--line); color:var(--ink-2);
}
.eyebrow--pill::before{ display:none; }
.on-dark .eyebrow, .sec--dark .eyebrow, .hero .eyebrow, .band .eyebrow, .cta .eyebrow,
.split__half .eyebrow, .card--overlay .eyebrow, .card--dark .eyebrow,
.subhead .eyebrow{ color:var(--on-dark-2); }
.on-dark .eyebrow--pill, .sec--dark .eyebrow--pill, .hero .eyebrow--pill, .band .eyebrow--pill,
.cta .eyebrow--pill{ background:rgba(247,247,247,.07); border-color:var(--line-dark); }
.hero .eyebrow::before, .band .eyebrow::before, .cta .eyebrow::before,
.split__half .eyebrow::before, .card--overlay .eyebrow::before, .card--dark .eyebrow::before,
.subhead .eyebrow::before{ background:#9BB07E; }

/* Zweifarbige Statement-Headline (scroll-getriggert eingefärbt) */
.statement{ font-size:var(--fs-h2); letter-spacing:-.035em; line-height:1.14; font-weight:500; }
.statement .w{ color:rgba(13,13,13,.20); transition:color .5s var(--ease); }
.statement .w.on{ color:var(--ink); }
.sec--dark .statement .w, .band .statement .w, .cta .statement .w{ color:rgba(247,247,247,.24); }
.sec--dark .statement .w.on, .band .statement .w.on, .cta .statement .w.on{ color:var(--on-dark); }

/* 4. LAYOUT ------------------------------------------------------------- */
.wrap{ width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:var(--pad); }
.wrap--narrow{ max-width:70rem; }
.sec{ padding-block:var(--sec); position:relative; }
.sec--tight{ padding-block:clamp(3.75rem,6vw,6.875rem); }
.sec--dark{ background:var(--ink); color:var(--on-dark); }
.sec--dark .lead,.sec--dark .muted{ color:var(--on-dark-2); }
.sec--tone{ background:var(--bg-2); }
.sec-head{ display:flex; flex-wrap:wrap; align-items:end; justify-content:space-between; gap:clamp(1.25rem,3vw,3.75rem); margin-bottom:clamp(2.125rem,4.5vw,4.5rem); }
.sec-head__main{ flex:1 1 28.75rem; max-width:51.25rem; }
.sec-head__main h2, .sec-head__main h1{ max-width:15ch; }
.sec-head__aside{ flex:0 1 27.5rem; max-width:44ch; }
.grid{ display:grid; gap:var(--gap); }
.rule{ height:1px; background:var(--line); border:0; margin:0; }
.sec--dark .rule{ background:var(--line-dark); }
.stack-sm > * + *{ margin-top:.75rem; }
.stack   > * + *{ margin-top:1.25rem; }
.stack-lg> * + *{ margin-top:2rem; }
.two-col{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:clamp(1.75rem,5vw,5.625rem); }
.two-col--aside{ grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr); }

/* 5. BUTTONS / CHIPS ---------------------------------------------------- */
.btn{
  --bg-btn:var(--ink); --fg-btn:var(--on-dark);
  position:relative; display:inline-flex; align-items:center; gap:.85em;
  /* Eine Groesse fuer jeden Knopf der Seite — auch in der Navigation.
     Konturen sind Innenschatten statt Rahmen, damit ein Kontur-Knopf nicht
     zwei Pixel hoeher wird als ein gefuellter. */
  height:2.875rem; padding:0 0.4375rem 0 1.45em;
  background:var(--bg-btn); color:var(--fg-btn);
  border-radius:var(--r-pill); font-size:.9rem; font-weight:500; letter-spacing:-.01em;
  white-space:nowrap;
  transition:background .45s var(--ease), color .45s var(--ease), box-shadow .45s var(--ease);
}
/* Der Knopf faerbt sich schlicht um; die Bewegung tragen die Pfeile. */
.btn:hover{ background:var(--accent); color:var(--on-dark); }
.btn__ico{
  width:2rem; height:2rem; flex:none; border-radius:50%;
  background:var(--fg-btn); color:var(--bg-btn);
  display:grid; place-items:center; overflow:hidden;
  transition:background .4s var(--ease), color .4s var(--ease);
}
/* Eine ganze Umdrehung beim Ueberfahren — dasselbe Zeichen fuer jeden
   Pfeil auf der Seite, egal ob Knopf, Verweis oder Kachel. */
.btn__ico svg{ width:.85em; height:.85em; transition:transform .7s var(--ease); }
.btn:hover .btn__ico svg{ transform:rotate(360deg); }
.btn:hover .btn__ico{ color:var(--accent); }
.btn--ghost{ --bg-btn:transparent; --fg-btn:var(--ink); box-shadow:inset 0 0 0 1px var(--line-2); }
.btn--ghost:hover{ color:var(--on-dark); box-shadow:none; }
.btn--ghost .btn__ico{ background:var(--ink); color:var(--bg); }
.btn--ghost:hover .btn__ico{ background:var(--bg); color:var(--accent); }
.btn--light{ --bg-btn:var(--bg); --fg-btn:var(--ink); }
.btn--light:hover{ color:var(--on-dark); }
.btn--light:hover .btn__ico{ background:var(--bg); color:var(--accent); }
.btn--outline-light{ --bg-btn:transparent; --fg-btn:var(--on-dark); box-shadow:inset 0 0 0 1px rgba(247,247,247,.32); }
.btn--outline-light:hover{ box-shadow:none; }
.btn--outline-light .btn__ico{ background:var(--on-dark); color:var(--ink); }
/* .btn--sm hat bewusst dieselbe Groesse wie jeder andere Knopf. */
.btn-row{ display:flex; flex-wrap:wrap; gap:.7rem; align-items:center; }

.link-arrow{
  display:inline-flex; align-items:center; gap:.55em; font-size:var(--fs-sm); font-weight:500;
  padding-bottom:.25em; border-bottom:1px solid var(--line-2);
  transition:gap .4s var(--ease), border-color .4s var(--ease), color .3s;
}
.link-arrow svg{ width:.85em; height:.85em; transition:transform .7s var(--ease); }
.link-arrow:hover{ border-color:var(--accent); color:var(--accent); }
.link-arrow:hover svg{ transform:rotate(360deg); }
.sec--dark .link-arrow{ border-color:var(--line-dark); }
.sec--dark .link-arrow:hover{ color:var(--on-dark); border-color:var(--on-dark); }

.tags{ display:flex; flex-wrap:wrap; gap:.4rem; }
.tag{
  font-size:.74rem; letter-spacing:.01em; padding:.42em .85em; border-radius:var(--r-pill);
  border:1px solid var(--line); color:var(--ink-2); background:var(--pille);
  transition:background .35s var(--ease), color .35s var(--ease), border-color .35s var(--ease);
}
.sec--dark .tag{ border-color:var(--line-dark); color:var(--on-dark-2); background:rgba(247,247,247,.04); }

/* 6. NAVIGATION --------------------------------------------------------- */
.nav{
  position:fixed; inset:0 0 auto 0; z-index:1000;
  padding:0.875rem var(--pad) 0;
  transition:transform .55s var(--ease), opacity .35s;
}
.nav.is-hidden{ transform:translateY(-118%); }
.nav__inner{
  max-width:var(--wrap); margin-inline:auto;
  display:flex; align-items:center; justify-content:space-between; gap:1.5rem;
  padding:0.5625rem 0.5625rem 0.5625rem 1.375rem; border-radius:var(--r-pill);
  background:rgba(247,247,247,.66); border:1px solid transparent;
  backdrop-filter:blur(1rem) saturate(1.4); -webkit-backdrop-filter:blur(1rem) saturate(1.4);
  transition:background .5s var(--ease), border-color .5s var(--ease), box-shadow .5s var(--ease), color .5s;
}
.nav.is-stuck .nav__inner{ background:rgba(247,247,247,.84); border-color:var(--line); }
/* Etwas deckender, damit die Navigation auch dann lesbar bleibt, wenn
   die Kante des Bühnen-Kreises genau unter ihr durchläuft. */
.nav.is-over-dark .nav__inner{ background:rgba(13,13,13,.55); border-color:var(--line-dark); color:var(--on-dark); }
.brand{ display:flex; align-items:center; gap:.6rem; font-weight:600; letter-spacing:-.02em; font-size:1.02rem; }
.brand img{ width:1.625rem; height:auto; display:block; }
.brand__name{ letter-spacing:.03em; font-weight:600; }
.nav__links{ display:flex; align-items:center; gap:.15rem; }
.nav__link{
  position:relative; padding:.55em .95em; border-radius:var(--r-pill);
  font-size:.9rem; letter-spacing:-.01em; color:inherit; opacity:.72;
  transition:opacity .3s, background .3s;
}
.nav__link:hover{ opacity:1; background:rgba(13,13,13,.06); }
.nav.is-over-dark .nav__link:hover{ background:rgba(247,247,247,.10); }
.nav__link.is-active{ opacity:1; font-weight:500; }
.nav__link.is-active::after{
  content:""; position:absolute; left:50%; bottom:.3em; width:0.25rem; height:0.25rem; margin-left:-2px;
  border-radius:50%; background:var(--accent-2);
}
.nav__actions{ display:flex; align-items:center; gap:.5rem; }
.nav-toggle{ display:none; width:2.75rem; height:2.75rem; border-radius:50%; place-items:center; background:var(--ink); color:var(--bg); }
.nav-toggle span{ display:block; width:1rem; height:1.5px; background:currentColor; transition:transform .4s var(--ease), opacity .3s; }
.nav-toggle span + span{ margin-top:0.25rem; }
.nav-toggle.is-open span:first-child{ transform:translateY(0.1719rem) rotate(45deg); }
.nav-toggle.is-open span:last-child{ transform:translateY(-0.1719rem) rotate(-45deg); }

.menu{
  position:fixed; inset:0; z-index:999; background:var(--ink); color:var(--on-dark);
  padding:calc(var(--nav-h) + 2.5rem) var(--pad) 2.5rem;
  display:flex; flex-direction:column; justify-content:space-between; gap:2rem;
  clip-path:inset(0 0 100% 0); transition:clip-path .8s var(--ease), visibility 0s .8s; visibility:hidden;
}
.menu.is-open{ clip-path:inset(0 0 0 0); visibility:visible; transition:clip-path .8s var(--ease), visibility 0s 0s; }
.menu__list{ list-style:none; margin:0; padding:0; }
.menu__list li{ overflow:hidden; }
.menu__list a{
  display:block; padding:.1em 0; font-size:clamp(1.9rem,7.4vw,3.4rem); letter-spacing:-.04em; line-height:1.14;
  transform:translateY(105%); transition:transform .7s var(--ease), opacity .4s; opacity:.85;
}
.menu.is-open .menu__list a{ transform:translateY(0); }
.menu__list a:hover{ opacity:1; }
.menu__foot{ display:flex; flex-wrap:wrap; gap:1rem 2rem; justify-content:space-between; align-items:end; color:var(--on-dark-2); font-size:var(--fs-sm); }

/* Scroll-Fortschritt */
.progress{ position:fixed; top:0; left:0; height:2px; z-index:1001; background:var(--accent-2); width:0; }

/* 7. MEDIA / BENTO ------------------------------------------------------ */
.media{
  position:relative; overflow:hidden; border-radius:var(--r-lg); background:var(--bg-2); isolation:isolate;
}
.media img{ width:100%; height:100%; object-fit:cover; transition:transform 1.2s var(--ease); }
.media--zoom:hover img, .card:hover .media--zoom img{ transform:scale(1.055); }
.media--shade::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(180deg,rgba(13,13,13,0) 42%,rgba(13,13,13,.62) 100%);
}
.ar-16-9{ aspect-ratio:16/9; } .ar-4-3{ aspect-ratio:4/3; } .ar-3-2{ aspect-ratio:3/2; }
.ar-1-1{ aspect-ratio:1/1; } .ar-3-4{ aspect-ratio:3/4; } .ar-4-5{ aspect-ratio:4/5; } .ar-21-9{ aspect-ratio:21/9; }
.media__cap{
  position:absolute; left:clamp(1rem,2vw,1.75rem); right:clamp(1rem,2vw,1.75rem); bottom:clamp(1rem,2vw,1.625rem);
  z-index:2; color:var(--on-dark); display:flex; align-items:end; justify-content:space-between; gap:1rem;
}
.media__label{
  position:absolute; z-index:2; top:clamp(0.875rem,1.6vw,1.375rem); left:clamp(0.875rem,1.6vw,1.375rem);
  font-size:var(--fs-xs); text-transform:uppercase; letter-spacing:.14em; color:var(--on-dark);
  background:rgba(13,13,13,.38); backdrop-filter:blur(0.5rem); padding:.5em .9em; border-radius:var(--r-pill);
  border:1px solid var(--line-dark);
}

.bento{ display:grid; grid-template-columns:repeat(12,1fr); gap:var(--gap); }
.b-3{ grid-column:span 3; } .b-4{ grid-column:span 4; } .b-5{ grid-column:span 5; }
.b-6{ grid-column:span 6; } .b-7{ grid-column:span 7; } .b-8{ grid-column:span 8; }
.b-9{ grid-column:span 9; } .b-12{ grid-column:span 12; }

.card{
  position:relative; display:flex; flex-direction:column; overflow:hidden;
  background:var(--bg-2); border-radius:var(--r-lg); border:1px solid transparent;
  transition:background-color .5s var(--ease);
}
.card--pad{ padding:clamp(1.375rem,2.2vw,2.375rem); }
.card--dark{ background:var(--ink); color:var(--on-dark); border-color:transparent; }
.card--dark .muted{ color:var(--on-dark-2); }
.card--dark .tag{ border-color:var(--line-dark); color:var(--on-dark-2); background:rgba(247,247,247,.04); }
.card--tone{ background:var(--bg-2); }
.card--link:not(.card--dark):not(.card--overlay):hover{ background:color-mix(in oklab, var(--bg-2), var(--ink) 4.5%); }
.card__body{ padding:clamp(1.25rem,2vw,2rem); display:flex; flex-direction:column; gap:.75rem; flex:1; }
.card__foot{ margin-top:auto; padding-top:1.4rem; }
.card--overlay{ min-height:clamp(18.75rem,34vw,30rem); justify-content:flex-end; color:var(--on-dark); border:0; isolation:isolate; }
.card--overlay > img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:-2; transition:transform 1.2s var(--ease); }
.card--overlay::before{
  content:""; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(180deg,rgba(13,13,13,.05) 30%,rgba(13,13,13,.80) 100%);
}
.card--overlay:hover > img{ transform:scale(1.05); }
/* Der Body darf hier nicht wachsen — sonst hebelt er das Ausrichten
   nach unten aus und laeuft in das Label am oberen Kartenrand. */
.card--overlay .card__body{ padding:clamp(1.5rem,2.4vw,2.5rem); flex:0 0 auto; }

/* 8. KOMPONENTEN -------------------------------------------------------- */

/* Zahlen / Stats */
.stats{ display:grid; grid-template-columns:repeat(auto-fit,minmax(11.875rem,1fr)); gap:var(--gap); }
.stat{ padding:clamp(1.25rem,2vw,2.125rem) 0; border-top:1px solid var(--line); }
.sec--dark .stat{ border-color:var(--line-dark); }
.stat__num{ font-size:clamp(2.6rem,5.2vw,4.6rem); letter-spacing:-.05em; line-height:.92; font-weight:500; display:flex; align-items:baseline; gap:.04em; font-variant-numeric:tabular-nums; }
.stat__num .suffix{ font-size:.44em; letter-spacing:-.02em; }
.stat__label{ margin-top:.7rem; font-size:var(--fs-sm); color:var(--ink-2); max-width:26ch; }
.sec--dark .stat__label{ color:var(--on-dark-2); }

/* Zeilenliste (Was uns unterscheidet) */
.rows{ border-top:1px solid var(--line); }
.sec--dark .rows{ border-color:var(--line-dark); }
.row{
  display:grid; grid-template-columns:4rem minmax(0,26ch) 1fr; gap:clamp(1rem,3vw,3rem); align-items:baseline;
  padding:clamp(1.375rem,2.4vw,2.375rem) 0; border-bottom:1px solid var(--line);
  position:relative;
}
.sec--dark .row{ border-color:var(--line-dark); }
.row::before{
  content:""; position:absolute; left:0; bottom:-1px; height:1px; width:0; background:var(--accent-2);
  transition:width .8s var(--ease);
}
.row:hover::before{ width:100%; }
.row__idx{ font-size:var(--fs-sm); color:var(--ink-3); font-variant-numeric:tabular-nums; }
.row__label{ font-size:var(--fs-h3); letter-spacing:-.025em; line-height:1.1; }
.row__text{ color:var(--ink-2); max-width:56ch; }
.sec--dark .row__text{ color:var(--on-dark-2); }

/* Akkordeon */
.acc{ border-top:1px solid var(--line); }
.sec--dark .acc{ border-color:var(--line-dark); }
.acc__item{ border-bottom:1px solid var(--line); }
.sec--dark .acc__item{ border-color:var(--line-dark); }
.acc__btn{
  width:100%; display:flex; align-items:center; justify-content:space-between; gap:2rem; text-align:left;
  padding:clamp(1.125rem,1.9vw,1.75rem) 0; font-size:clamp(1.02rem,1.45vw,1.32rem); letter-spacing:-.02em; font-weight:500;
  transition:color .3s, opacity .45s var(--ease);
}
.acc__btn:hover{ color:var(--accent); }
.sec--dark .acc__btn:hover{ color:var(--on-dark); opacity:.75; }
.acc__ico{ position:relative; width:2.125rem; height:2.125rem; flex:none; border-radius:50%; border:1px solid var(--line-2); transition:background .4s var(--ease), border-color .4s, transform .5s var(--ease); }
.sec--dark .acc__ico{ border-color:var(--line-dark); }
.acc__ico::before,.acc__ico::after{ content:""; position:absolute; inset:50% 30%; height:1.5px; margin-top:-.75px; background:currentColor; transition:transform .45s var(--ease), opacity .3s; }
.acc__ico::after{ transform:rotate(90deg); }
.acc__item.is-open .acc__ico{ background:var(--accent); border-color:var(--accent); color:#fff; transform:rotate(90deg); }
.acc__item.is-open .acc__ico::after{ opacity:0; }
.acc__panel{ display:grid; grid-template-rows:0fr; transition:grid-template-rows .6s var(--ease); }
.acc__item.is-open .acc__panel{ grid-template-rows:1fr; }
.acc__inner{ overflow:hidden; }
.acc__inner > div{ padding-bottom:clamp(1.125rem,2vw,1.875rem); max-width:74ch; color:var(--ink-2); }
.sec--dark .acc__inner > div{ color:var(--on-dark-2); }

/* Prozess / Steps */
.steps{ display:grid; gap:var(--gap); grid-template-columns:repeat(auto-fit,minmax(14.375rem,1fr)); }
.step{
  position:relative; padding:clamp(1.375rem,2.2vw,2.125rem); border-radius:var(--r-lg);
  background:var(--bg-2); border:1px solid transparent; overflow:hidden;
  transition:background .5s var(--ease), color .5s;
}
.sec--dark .step{ background:rgba(247,247,247,.04); border-color:var(--line-dark); }
.step:hover{ background:color-mix(in oklab, var(--bg-2), var(--ink) 4.5%); }
.sec--dark .step:hover{ background:rgba(247,247,247,.07); }
.step__n{ font-size:var(--fs-sm); color:var(--accent-2); font-variant-numeric:tabular-nums; letter-spacing:.08em; }
.step h4{ margin-top:1.6rem; }
.step p{ margin-top:.55rem; color:var(--ink-2); font-size:var(--fs-sm); }
.sec--dark .step p{ color:var(--on-dark-2); }

/* Horizontale Schiene */
.rail{
  display:grid; grid-auto-flow:column; grid-auto-columns:minmax(16.125rem,20.75rem); gap:var(--gap);
  overflow-x:auto; scroll-snap-type:x mandatory; padding-bottom:0.875rem;
  scrollbar-width:thin; scrollbar-color:var(--line-2) transparent;
}
.rail > *{ scroll-snap-align:start; }
.rail::-webkit-scrollbar{ height:0.25rem; }
.rail::-webkit-scrollbar-thumb{ background:var(--line-2); border-radius:6.1875rem; }
.rail-ctrl{ display:flex; gap:.5rem; }
.rail-btn{
  width:2.75rem; height:2.75rem; border-radius:50%; border:1px solid var(--line-2); display:grid; place-items:center;
  transition:background .35s var(--ease), color .35s, border-color .35s, transform .35s;
}
.rail-btn svg{ width:0.875rem; height:0.875rem; }
.rail-btn:hover{ background:var(--ink); color:var(--bg); border-color:var(--ink); }
.rail-btn:disabled{ opacity:.28; pointer-events:none; }
.sec--dark .rail-btn{ border-color:var(--line-dark); }
.sec--dark .rail-btn:hover{ background:var(--bg); color:var(--ink); }

/* Zitat */
.quote{ font-size:clamp(1.4rem,2.9vw,2.5rem); letter-spacing:-.03em; line-height:1.18; font-weight:500; text-wrap:balance; }
.quote__meta{ display:flex; align-items:center; gap:1rem; margin-top:clamp(1.5rem,3vw,2.75rem); }
.quote__ava{ width:3.625rem; height:3.625rem; border-radius:50%; overflow:hidden; flex:none; background:var(--bg-2); }
.quote__ava img{ width:100%; height:100%; object-fit:cover; }

/* Marquee */
.marquee{ overflow:hidden; -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent); mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent); }
.marquee__track{ display:flex; width:max-content; gap:clamp(2.5rem,6vw,6.875rem); animation:marquee 46s linear infinite; }
.marquee:hover .marquee__track{ animation-play-state:paused; }
.marquee svg{ height:clamp(2.125rem,3.2vw,2.75rem); width:auto; color:var(--ink); opacity:.62; transition:opacity .4s; flex:none; }
.marquee svg:hover{ opacity:1; }
.sec--dark .marquee svg{ color:var(--on-dark); }
@keyframes marquee{ to{ transform:translateX(-50%); } }

/* Formular */
.form{ display:grid; gap:var(--gap); grid-template-columns:repeat(2,1fr); }
.field{ display:flex; flex-direction:column; gap:.5rem; }
.field--full{ grid-column:1/-1; }
.field label{ font-size:var(--fs-sm); color:var(--ink-2); letter-spacing:-.01em; }
.sec--dark .field label{ color:var(--on-dark-2); }
.field input,.field textarea,.field select{
  width:100%; padding:.95em 1.15em; border-radius:var(--r-md);
  background:var(--surface); border:1px solid var(--line); transition:border-color .3s, box-shadow .3s, background .3s;
}
.field textarea{ min-height:8.75rem; resize:vertical; }
.field input:focus,.field textarea:focus,.field select:focus{ outline:none; border-color:var(--accent-2); box-shadow:0 0 0 0.25rem rgba(92,116,64,.14); }
.sec--dark .field input,.sec--dark .field textarea,.sec--dark .field select{ background:rgba(247,247,247,.05); border-color:var(--line-dark); color:var(--on-dark); }
.check{ display:flex; gap:.8rem; align-items:flex-start; font-size:var(--fs-sm); color:var(--ink-2); }
.sec--dark .check{ color:var(--on-dark-2); }
.check input{
  -webkit-appearance:none; appearance:none; margin:.12em 0 0; flex:none;
  width:1.25rem; height:1.25rem; border-radius:0.375rem; cursor:pointer;
  display:grid; place-items:center;
  background:var(--bg); border:1px solid var(--line-2);
  transition:background .25s var(--ease), border-color .25s var(--ease);
}
.check input::after{
  content:""; width:0.625rem; height:0.3125rem; margin-top:-2px;
  border:solid var(--bg); border-width:0 0 1.7px 1.7px;
  transform:rotate(-45deg) scale(0); transition:transform .3s var(--ease);
}
.check input:checked{ background:var(--ink); border-color:var(--ink); }
.check input:checked::after{ transform:rotate(-45deg) scale(1); }
.check input:focus-visible{ outline:2px solid var(--accent-2); outline-offset:2px; }
.sec--dark .check input{ background:transparent; border-color:rgba(247,247,247,.36); }
.sec--dark .check input:checked{ background:var(--on-dark); border-color:var(--on-dark); }
.sec--dark .check input::after{ border-color:var(--ink); }
.check a{ text-decoration:underline; text-underline-offset:0.1875rem; }
.form-note{ font-size:var(--fs-sm); color:var(--ink-3); }
.form-msg{ font-size:var(--fs-sm); color:var(--accent-2); min-height:1.4em; }

/* Statushinweis */
.status{
  display:flex; flex-wrap:wrap; align-items:center; gap:1rem 1.5rem; justify-content:space-between;
  padding:clamp(1.125rem,1.8vw,1.625rem) clamp(1.25rem,2vw,1.875rem); border-radius:var(--r-lg);
  background:rgba(247,247,247,.07); border:1px solid var(--line-dark);
}
/* Nur der Punkt und der umschliessende Satz duerfen Flex-Elemente sein.
   Steht Auszeichnung wie <strong> direkt darin, bekaeme sie denselben
   Abstand und der Satz klaffte auseinander. */
.status__main{ display:flex; align-items:center; gap:.9rem; }
.status__main > span:not(.status__dot){ display:block; }
.status__dot{ width:0.5625rem; height:0.5625rem; border-radius:50%; background:#8DBF63; flex:none; position:relative; }
.status__dot::after{ content:""; position:absolute; inset:-0.375rem; border-radius:50%; border:1px solid #8DBF63; opacity:.5; animation:pulse 2.4s var(--ease) infinite; }
@keyframes pulse{ 0%{ transform:scale(.6); opacity:.7; } 100%{ transform:scale(1.5); opacity:0; } }

/* Budget-Balken */
.bars{ display:flex; flex-direction:column; gap:clamp(1rem,1.8vw,1.5rem); }
.bar__head{ display:flex; justify-content:space-between; align-items:baseline; gap:1rem; margin-bottom:.55rem; }
.bar__track{ height:0.625rem; border-radius:6.1875rem; background:rgba(247,247,247,.10); overflow:hidden; }
/* display:block ist hier zwingend — als <span> waere das Element inline
   und wuerde width/height ignorieren; der Balken bliebe unsichtbar. */
.bar__fill{ display:block; height:100%; border-radius:6.1875rem; background:var(--accent-2); width:0; transition:width 1.5s var(--ease); }
.bar__fill--2{ background:#9BB07E; } .bar__fill--3{ background:rgba(247,247,247,.42); }
.bar__val{ font-variant-numeric:tabular-nums; font-size:var(--fs-sm); color:var(--on-dark-2); }

/* Wirkungs-Slider */
.impact__val{ font-size:clamp(3rem,7vw,6rem); letter-spacing:-.05em; line-height:.9; font-weight:500; font-variant-numeric:tabular-nums; }
.impact input[type=range]{ -webkit-appearance:none; appearance:none; width:100%; height:2px; background:var(--line-dark); border-radius:6.1875rem; margin:0; }
.impact input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none; width:1.625rem; height:1.625rem; border-radius:50%; background:var(--bg); cursor:grab;
  border:0.375rem solid var(--accent-2); transition:transform .3s var(--ease);
}
.impact input[type=range]::-webkit-slider-thumb:active{ transform:scale(1.12); cursor:grabbing; }
.impact input[type=range]::-moz-range-thumb{ width:1.25rem; height:1.25rem; border-radius:50%; background:var(--bg); border:0.375rem solid var(--accent-2); cursor:grab; }
/* Die Mindesthoehen fuer Titel und Erlaeuterung setzt das Skript: es
   vermisst alle Stufen und haelt die groesste fest (siehe main.js). */
.impact [data-impact-label]{ line-height:1.12; }
.impact [data-impact-detail]{ line-height:1.6; }
.impact__scale{ display:flex; justify-content:space-between; font-size:var(--fs-xs); color:var(--on-dark-2); letter-spacing:.08em; margin-top:1rem; }

/* Downloads */
.dl-list{ display:grid; gap:0; border-top:1px solid var(--line); }
.sec--dark .dl-list{ border-color:var(--line-dark); }
.dl{
  display:flex; align-items:center; justify-content:space-between; gap:1.5rem;
  padding:clamp(1rem,1.7vw,1.5rem) 0; border-bottom:1px solid var(--line);
  transition:color .3s, opacity .5s var(--ease);
}
.dl > span:first-child, .dl__meta{ transition:transform .6s var(--ease-slick); }
.sec--dark .dl{ border-color:var(--line-dark); }
.dl:hover{ color:var(--accent); }
.dl:hover > span:first-child{ transform:translateX(.8rem); }
.dl:hover .dl__meta{ transform:translateX(-.35rem); }
.sec--dark .dl:hover{ color:var(--on-dark); }
.dl__meta{ font-size:var(--fs-sm); color:var(--ink-3); display:flex; align-items:center; gap:1rem; }
.sec--dark .dl__meta{ color:var(--on-dark-2); }

/* Hinweisbox */
.note{
  padding:clamp(1.125rem,1.8vw,1.625rem); border-radius:var(--r-md);
  background:var(--accent-soft); border:1px solid rgba(46,61,34,.14); color:var(--accent);
  font-size:var(--fs-sm); line-height:1.5;
}
.sec--dark .note{ background:rgba(247,247,247,.06); border-color:var(--line-dark); color:var(--on-dark-2); }

.sticky{ position:sticky; top:calc(var(--nav-h) + 1.875rem); }

/* 9. SEKTIONEN ---------------------------------------------------------- */

/* Hero */
.hero{ position:relative; min-height:100svh; display:flex; flex-direction:column; justify-content:flex-end; overflow:hidden; color:var(--on-dark); padding-bottom:clamp(2rem,4vw,4rem); isolation:isolate; }
.hero__bg{ position:absolute; inset:0; z-index:-2; overflow:hidden; }
.hero__bg img{ width:100%; height:118%; object-fit:cover; will-change:transform; }
.hero::before{
  content:""; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(180deg,rgba(13,13,13,.48) 0%,rgba(13,13,13,.14) 40%,rgba(13,13,13,.80) 100%);
}
.hero__inner{ width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:var(--pad); }
.hero__title{ max-width:23ch; }
.hero__meta{ display:flex; flex-wrap:wrap; align-items:end; justify-content:space-between; gap:clamp(1.25rem,3vw,3.125rem); margin-top:clamp(1.75rem,3.5vw,3.25rem); }
.hero__sub{ max-width:54ch; color:rgba(247,247,247,.84); }
.hero--page{ min-height:clamp(36.25rem,76svh,55rem); }
.scroll-hint{ display:inline-flex; align-items:center; gap:.7rem; font-size:var(--fs-xs); letter-spacing:.16em; text-transform:uppercase; color:rgba(247,247,247,.6); }
.scroll-hint__line{ width:2.75rem; height:1px; background:rgba(247,247,247,.3); position:relative; overflow:hidden; }
.scroll-hint__line::after{ content:""; position:absolute; inset:0; background:var(--on-dark); animation:sweep 2.6s var(--ease) infinite; }
@keyframes sweep{ 0%{ transform:translateX(-100%); } 60%,100%{ transform:translateX(100%); } }

/* Full-Bleed-Bildband */
.band{ position:relative; min-height:clamp(28.75rem,74svh,55rem); display:grid; align-items:end; overflow:hidden; color:var(--on-dark); isolation:isolate; }
.band__bg{ position:absolute; inset:0; z-index:-2; overflow:hidden; }
.band__bg img{ width:100%; height:125%; object-fit:cover; will-change:transform; }
.band::before{ content:""; position:absolute; inset:0; z-index:-1; background:linear-gradient(180deg,rgba(13,13,13,.28),rgba(13,13,13,.82)); }
.band__inner{ width:100%; max-width:var(--wrap); margin-inline:auto; padding:clamp(2.5rem,6vw,6.875rem) var(--pad); }

/* Grosse Ordnungszahl ueber einer Abschnittsueberschrift (Programm-Seite) */
.pillar__big{
  display:block; font-size:clamp(3rem,6vw,6rem); line-height:.85; letter-spacing:-.055em;
  font-weight:500; color:rgba(13,13,13,.26); margin-bottom:clamp(0.875rem,1.6vw,1.625rem);
}
.sec--dark .pillar__big{ color:rgba(247,247,247,.28); }
html.ist-dunkel .pillar__big{ color:rgba(255,255,255,.26); }

/* Zwei-Wege-Split */
.split{ display:grid; grid-template-columns:1fr 1fr; min-height:clamp(26.25rem,60svh,42.5rem); }
.split__half{ position:relative; display:flex; flex-direction:column; justify-content:flex-end; padding:clamp(1.75rem,3.4vw,4rem); overflow:hidden; color:var(--on-dark); isolation:isolate; }
.split__half > img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:-2; transition:transform 1.4s var(--ease); }
.split__half::before{ content:""; position:absolute; inset:0; z-index:-1; background:linear-gradient(180deg,rgba(13,13,13,.18),rgba(13,13,13,.84)); transition:background .6s; }
.split__half:hover > img{ transform:scale(1.06); }
.split__half:hover::before{ background:linear-gradient(180deg,rgba(46,61,34,.30),rgba(13,13,13,.88)); }

/* Kennzahl-Kacheln */
.kpi{ display:grid; grid-template-columns:repeat(auto-fit,minmax(13.75rem,1fr)); gap:var(--gap); }
.kpi__item{ padding:clamp(1.375rem,2.4vw,2.5rem); border-radius:var(--r-lg); background:rgba(247,247,247,.05); border:1px solid var(--line-dark); }
.kpi__num{ font-size:clamp(2.4rem,4.4vw,3.8rem); letter-spacing:-.05em; line-height:.95; font-variant-numeric:tabular-nums; }

/* Personen */
.people{ display:grid; grid-template-columns:repeat(auto-fit,minmax(16.875rem,1fr)); gap:var(--gap); }
.person__media{ border-radius:var(--r-lg); overflow:hidden; background:var(--bg-2); aspect-ratio:4/5; }
.person__media img{ width:100%; height:100%; object-fit:cover; transition:transform 1.2s var(--ease), filter .8s; filter:grayscale(1) contrast(1.03); }
.person:hover .person__media img{ transform:scale(1.05); filter:grayscale(0); }
.person__name{ margin-top:1.3rem; font-size:var(--fs-h4); letter-spacing:-.02em; }
.person__role{ color:var(--ink-3); font-size:var(--fs-sm); margin-top:.2rem; }
.person__text{ margin-top:.9rem; color:var(--ink-2); font-size:var(--fs-sm); }
.sec--dark .person__text{ color:var(--on-dark-2); }

/* CTA-Abschluss */
.cta{ position:relative; overflow:hidden; color:var(--on-dark); text-align:center; padding-block:clamp(5.625rem,13vw,11.875rem); isolation:isolate; }
.cta__bg{ position:absolute; inset:0; z-index:-2; }
.cta__bg img{ width:100%; height:112%; object-fit:cover; will-change:transform; }
.cta::before{ content:""; position:absolute; inset:0; z-index:-1; background:linear-gradient(180deg,rgba(13,13,13,.52),rgba(13,13,13,.90)); }
.cta .btn-row{ justify-content:center; margin-top:clamp(1.75rem,3.4vw,3rem); }
.cta .lead{ margin-inline:auto; }

/* 10. ANIMATIONEN ------------------------------------------------------- */
/* Die Einblendungen haengen an der Klasse .js, die das Skript selbst setzt.
   Ohne JavaScript bleibt damit alles sichtbar statt dauerhaft unsichtbar. */
/* Kurzer Weg, weiches Ende und eine leichte Unschaerfe, die sich beim
   Ankommen aufloest (Chronicle, Framer). Bilder ("scale", "clip") bleiben
   scharf — auf grossen Flaechen kostet die Unschaerfe nur Leistung. */
.js [data-reveal]{ opacity:0; transform:translateY(1.375rem); filter:blur(0.375rem);
  transition:opacity .8s var(--ease), transform 1s var(--ease), filter .8s var(--ease); transition-delay:var(--d,0ms); }
.js [data-reveal].is-in{ opacity:1; transform:none; filter:none; }
/* Nach dem Auftritt setzt das Skript .is-fertig: dann gilt keine Staffelung
   mehr, und Hover-Zustaende (Flaechenwechsel, Abdunkeln der Nachbarn)
   reagieren sofort. */
.js [data-reveal].is-fertig{
  transition:opacity .5s var(--ease), transform .8s var(--ease), filter .6s var(--ease),
    background-color .5s var(--ease), border-color .5s var(--ease), color .4s var(--ease);
  transition-delay:0ms;
}
.js [data-reveal="fade"]{ transform:none; }
.js [data-reveal="scale"]{ transform:scale(.96); filter:none; }
.js [data-reveal="left"]{ transform:translateX(-1.375rem); }
.js [data-reveal="clip"]{ opacity:1; clip-path:inset(0 0 100% 0); transform:none; filter:none; transition:clip-path 1.2s var(--ease); transition-delay:var(--d,0ms); }
.js [data-reveal="clip"].is-in{ clip-path:inset(0 0 0 0); }

/* Der Innenabstand faengt die Unterlaengen auf — ohne ihn schneidet
   overflow:hidden das g und das p der ersten Zeile ab. */
.line{ display:block; overflow:hidden; padding-bottom:.14em; margin-bottom:-.14em; }
.js .line > span{ display:block; transform:translateY(115%); transition:transform 1.05s var(--ease); transition-delay:var(--d,0ms); }
.is-in .line > span, .line.is-in > span{ transform:translateY(0); }

/* Sicherheitsnetz (pechschwarz): meldet das Skript nicht binnen drei
   Sekunden, dass es die Einblendungen uebernommen hat, wird alles sichtbar. */
.js:not(.reveal-ok) [data-reveal], .js:not(.reveal-ok) .line > span{ animation:notfall 0s 3s forwards; }
@keyframes notfall{ to{ opacity:1; transform:none; filter:none; clip-path:none; } }

/* Zeilenweise Ueberschriften (pechschwarz): das Skript legt jedes Wort in
   .zw und gibt ihm die Verzoegerung seiner Zeile. So steigt Zeile um Zeile
   aus der Maske. Seitlicher Innenabstand, damit kursive Serifen nicht an
   der Maske abbrechen; unten Luft fuer die Unterlaengen. */
.zw{ display:inline-block; overflow:hidden; vertical-align:top; padding:0 .06em .16em; margin:0 -.06em -.16em; }
.js .zeilen .zw > span{ display:block; transform:translateY(112%); transition:transform 1.05s var(--ease); transition-delay:var(--zd,0ms); }
.zeilen.is-in .zw > span{ transform:none; }

/* Haarlinien, die sich beim Eintreten von links ziehen (pechschwarz).
   Die eigentliche Kante wird durchsichtig, die Linie ist ein Pseudoelement. */
.js .linie{ position:relative; border-top-color:transparent !important; }
.js .linie::after{
  content:""; position:absolute; left:0; right:0; top:-1px; height:1px; pointer-events:none;
  background:var(--line); transform:scaleX(0); transform-origin:left center;
  transition:transform 1.4s var(--ease-slick) var(--ld,0ms);
}
.js .linie.is-gezogen::after{ transform:none; }
.sec--dark .linie::after{ background:var(--line-dark); }

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important; }
  [data-reveal]{ opacity:1 !important; transform:none !important; clip-path:none !important; filter:none !important; }
  .line > span, .js .line > span, .js .zeilen .zw > span{ transform:none !important; }
  .js .linie::after, .js .linie-unten::after{ transform:none !important; }
}

/* 11. FOOTER ------------------------------------------------------------ */
.footer{ background:var(--ink); color:var(--on-dark); padding-top:clamp(3.75rem,7vw,6.875rem); }
.footer__top{ display:grid; grid-template-columns:minmax(0,1.5fr) repeat(3,minmax(0,1fr)); gap:clamp(1.75rem,4vw,3.75rem); padding-bottom:clamp(3.125rem,6vw,5.625rem); }
.footer__brand{ display:flex; align-items:center; gap:.7rem; font-size:1.15rem; font-weight:600; letter-spacing:-.02em; }
.footer__brand img{ width:1.875rem; height:auto; display:block; }
.footer__claim{ margin-top:1.5rem; font-size:var(--fs-h4); letter-spacing:-.02em; max-width:22ch; }
.footer__desc{ margin-top:1.1rem; color:var(--on-dark-2); font-size:var(--fs-sm); max-width:44ch; }
.footer__col h4{ font-size:var(--fs-xs); text-transform:uppercase; letter-spacing:.16em; color:var(--on-dark-2); font-weight:500; }
.footer__col ul{ list-style:none; margin:1.5rem 0 0; padding:0; display:grid; gap:.75rem; }
.footer__col a{ font-size:var(--fs-sm); opacity:.82; transition:opacity .4s var(--ease); display:inline-block; }
.footer__col a:hover{ opacity:1; }
.footer__mega{ padding-block:clamp(1.625rem,3.4vw,3.375rem); border-top:1px solid var(--line-dark); overflow:hidden; }
/* Groesse kommt von [data-fit] — das Skript rechnet sie auf die Containerbreite. */
.footer__mega span{ letter-spacing:-.055em; line-height:.85; font-weight:500; opacity:.20; }
.footer__bottom{
  display:flex; flex-wrap:wrap; gap:.8rem 2rem; justify-content:space-between; align-items:center;
  padding-block:clamp(1.25rem,2vw,1.875rem); border-top:1px solid var(--line-dark);
  font-size:var(--fs-sm); color:var(--on-dark-2);
}
.footer__legal{ display:flex; flex-wrap:wrap; gap:1.5rem; }
.footer__legal a:hover{ color:var(--on-dark); }

/* Rechtsseiten */
.legal{ padding-top:calc(var(--nav-h) + clamp(3.75rem,8vw,7.5rem)); }
.legal h2{ font-size:var(--fs-h3); margin-top:clamp(2.125rem,4vw,3.75rem); }
.legal h3{ font-size:var(--fs-h4); margin-top:2rem; }
.legal p, .legal li{ color:var(--ink-2); max-width:76ch; margin-top:.9rem; }
.legal ul{ padding-left:1.2rem; }

/* 12. RESPONSIVE -------------------------------------------------------- */
@media (max-width:1180px){
  .footer__top{ grid-template-columns:1fr 1fr; }
  .row{ grid-template-columns:3rem 1fr; }
  .row__text{ grid-column:2; }
  .two-col,.two-col--aside{ grid-template-columns:1fr; }
}
@media (max-width:1024px){
  :root{ --nav-h:4.125rem; }
  .nav__links{ display:none; }
  .nav-toggle{ display:grid; }
  .b-3,.b-4,.b-5{ grid-column:span 6; }
  .b-7,.b-8,.b-9{ grid-column:span 12; }
  .form{ grid-template-columns:1fr; }
  .sec-head{ align-items:start; }
}
@media (max-width:760px){
  .b-3,.b-4,.b-5,.b-6,.b-7,.b-8,.b-9{ grid-column:span 12; }
  .split{ grid-template-columns:1fr; }
  /* Zweispaltig statt einer endlosen Linkliste: Marke oben ueber die volle
     Breite, darunter Seiten und Transparenz nebeneinander, Kontakt darunter
     (die E-Mail-Adresse braucht die ganze Zeile). */
  .footer__top{ grid-template-columns:repeat(2,minmax(0,1fr)); column-gap:1.25rem; }
  .footer__top > :first-child, .footer__top > .footer__col:last-child{ grid-column:1 / -1; }
  .row{ grid-template-columns:1fr; gap:.5rem; }
  .row__idx{ display:none; }
  .hero__meta{ flex-direction:column; align-items:start; }
  .quote__meta{ flex-wrap:wrap; }
  .stat__num{ font-size:clamp(2.4rem,13vw,3.4rem); }
  .status{ flex-direction:column; align-items:start; }
}

/* ==========================================================================
   13. BÜHNE — grosse Formate, Ebenen, Bewegung
   Ab hier stehen die Bausteine, die der Startseite ihre Wirkung geben.
   Sie sind bewusst allgemein gehalten, damit die übrigen Seiten
   dasselbe Vokabular übernehmen können.
   ========================================================================== */

/* Grössere Typo-Bühne ---------------------------------------------------- */
:root{
  --fs-display: clamp(2.9rem, 7.6vw, 7.6rem);
  --fs-h2:      clamp(2rem, 4.3vw, 4.2rem);
  --r-xl: 1.375rem;
}

/* Intro-Vorhang ---------------------------------------------------------- */
/* Rein per CSS animiert — ohne JavaScript verschwindet er trotzdem. */
.intro{
  position:fixed; inset:0; z-index:9999; background:var(--ink); color:var(--on-dark);
  display:grid; place-items:center; overflow:hidden;
  animation:introOut 1.5s var(--ease) forwards;
}
.intro__inner{ display:flex; align-items:center; gap:.75rem; opacity:0; animation:introIn .8s var(--ease) .08s forwards; }
.intro__inner img{ width:clamp(1.875rem,4vw,2.75rem); height:auto; display:block; }
.intro__inner span{ font-size:clamp(1.3rem,3.4vw,2.2rem); font-weight:600; letter-spacing:.05em; }
.intro__bar{ position:absolute; left:0; bottom:0; height:2px; width:0; background:var(--accent-2); animation:introBar 1.1s var(--ease) forwards; }
@keyframes introIn{ from{ opacity:0; transform:translateY(0.875rem); } to{ opacity:1; transform:none; } }
@keyframes introBar{ to{ width:100%; } }
@keyframes introOut{
  0%,62%{ clip-path:inset(0 0 0 0); visibility:visible; }
  99%{ visibility:visible; }
  100%{ clip-path:inset(0 0 100% 0); visibility:hidden; }
}

/* Hero v2 ---------------------------------------------------------------- */
.hero--stage{ background:var(--bg); padding-bottom:0; min-height:100svh; display:block; }
.hero--stage::before{ display:none; }

.hero__frame{
  position:relative; height:100svh; min-height:37.5rem; overflow:hidden; isolation:isolate;
  border-radius:0 0 var(--r-xl) var(--r-xl);
}
.hero__frame::after{
  content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:
    linear-gradient(180deg, rgba(13,13,13,.72) 0%, rgba(13,13,13,.10) 34%, rgba(13,13,13,.20) 58%, rgba(13,13,13,.88) 100%),
    radial-gradient(120% 80% at 78% 18%, rgba(155,176,126,.16), transparent 60%);
}
.hero__frame .hero__bg{ position:absolute; inset:0; z-index:0; }
.hero__frame .hero__bg img{ width:100%; height:118%; object-fit:cover; }

.hero__stage{
  position:absolute; z-index:3; inset:auto 0 0 0;
  padding:0 var(--pad) clamp(1.875rem,4vw,3.75rem);
}
.hero__stage-inner{ max-width:var(--wrap); margin-inline:auto; }
.hero--stage .hero__title{ max-width:20ch; }
.hero--stage .hero__sub{ max-width:46ch; }

/* Schwebende Kennzahl-Karten über dem Bild */
.hero__badges{
  position:absolute; z-index:3; right:var(--pad); bottom:clamp(12.5rem, 27vh, 20.625rem);
  display:grid; gap:0.625rem; width:min(19.375rem, 30vw);
}
.glass{
  padding:clamp(1rem,1.4vw,1.375rem) clamp(1.125rem,1.6vw,1.5rem); border-radius:var(--r-md);
  background:rgba(13,13,13,.34); border:1px solid rgba(247,247,247,.20); color:var(--on-dark);
  backdrop-filter:blur(1rem) saturate(1.35); -webkit-backdrop-filter:blur(1rem) saturate(1.35);
  transition:opacity .9s var(--ease), transform 1s var(--ease), background .4s;
  transition-delay:var(--d,0ms);
}
.js .glass{ opacity:0; transform:translateY(1.25rem); }
.js .is-ready .glass, .is-ready .glass{ opacity:1; transform:none; }
.glass strong{ display:block; font-size:clamp(1.5rem,2.4vw,2.3rem); font-weight:500; letter-spacing:-.045em; line-height:1; font-variant-numeric:tabular-nums; }
.glass span{ display:block; margin-top:.55rem; font-size:var(--fs-sm); line-height:1.35; color:rgba(247,247,247,.72); }

/* Kennzahlen-Leiste direkt unter dem Hero ---------------------------------- */
.ticker{ border-bottom:1px solid var(--line); --tick-pad:clamp(1rem,2vw,2.125rem); }
.ticker__inner{
  display:grid; grid-template-columns:repeat(4,minmax(0,1fr));
  /* Jede Spalte bekommt denselben Einzug. Damit die erste und die letzte
     Spalte trotzdem auf dem Seitenraster sitzen, wird das Raster um genau
     diesen Betrag nach aussen gezogen — sonst stuende Spalte 1 buendig
     und alle uebrigen eingerueckt. */
  margin-inline:calc(-1 * var(--tick-pad));
}
.ticker__item{
  padding:clamp(1.625rem,3vw,2.875rem) var(--tick-pad);
  border-left:1px solid var(--line);
}
.ticker__item:first-child{ border-left:0; }
.ticker__n{
  font-size:clamp(2.1rem,3.9vw,3.6rem); letter-spacing:-.05em; line-height:1; font-weight:500;
  font-variant-numeric:tabular-nums; display:flex; align-items:baseline; gap:.05em;
}
.ticker__n .suffix{ font-size:.44em; letter-spacing:-.02em; }
.ticker__l{ margin-top:.75rem; font-size:var(--fs-sm); color:var(--ink-2); max-width:24ch; }
.ticker__head{ display:flex; flex-wrap:wrap; gap:1rem; justify-content:space-between; align-items:baseline; padding-top:clamp(1.75rem,3.4vw,3.375rem); }

/* Runder Pfeilknopf auf Karten -------------------------------------------- */
.card__go{
  position:absolute; z-index:3; top:clamp(0.875rem,1.3vw,1.25rem); right:clamp(0.875rem,1.3vw,1.25rem);
  width:clamp(2.5rem,3vw,3.125rem); height:clamp(2.5rem,3vw,3.125rem); border-radius:50%;
  display:grid; place-items:center; background:var(--surface); color:var(--ink);
  transition:transform .55s var(--ease), background .4s var(--ease), color .4s var(--ease);
}
.card__go svg{ width:0.9375rem; height:0.9375rem; transition:transform .7s var(--ease); }
.card:hover .card__go, a.card:hover .card__go{ background:var(--accent); color:var(--on-dark); }
.card:hover .card__go svg, a.card:hover .card__go svg{ transform:rotate(360deg); }
.card--dark .card__go{ background:rgba(247,247,247,.12); color:var(--on-dark); border:1px solid var(--line-dark); }

.row[data-preview]{ cursor:default; }
.row[data-preview] .row__label{ transition:transform .6s var(--ease), opacity .4s; }
.row[data-preview]:hover .row__label{ transform:translateX(clamp(0.375rem,.8vw,0.875rem)); }
.rows[data-preview-group]:hover .row:not(:hover) .row__label,
.rows[data-preview-group]:hover .row:not(:hover) .row__text{ opacity:.45; }
.rows[data-preview-group] .row__label,
.rows[data-preview-group] .row__text{ transition:opacity .45s var(--ease), transform .6s var(--ease); }

/* Fortschrittsanzeige unter horizontalen Schienen -------------------------- */
.rail-progress{
  display:flex; align-items:center; gap:clamp(0.875rem,1.6vw,1.625rem);
  margin-top:clamp(1.25rem,2.2vw,2.125rem); font-size:var(--fs-sm);
  color:var(--ink-3); font-variant-numeric:tabular-nums;
}
.rail-progress__track{ position:relative; flex:1; height:1px; background:var(--line-2); }
.rail-progress__thumb{
  position:absolute; top:0; left:0; height:1px; width:25%; background:var(--ink);
  transition:transform .35s var(--ease), width .35s var(--ease);
}
.sec--dark .rail-progress{ color:var(--on-dark-2); }
.sec--dark .rail-progress__track{ background:var(--line-dark); }
.sec--dark .rail-progress__thumb{ background:var(--on-dark); }

/* Zwei-Wege-Split, grösser ------------------------------------------------- */
.split--stage{ gap:1px; background:var(--line); min-height:clamp(28.75rem,68svh,47.5rem); }
.split--stage .split__half{ padding:clamp(1.875rem,3.8vw,4.5rem); }
.split--stage .split__half h2{ font-size:clamp(1.9rem,3.2vw,3.1rem); max-width:15ch; }
.split__go{
  position:absolute; top:clamp(1.5rem,2.6vw,2.875rem); right:clamp(1.5rem,2.6vw,2.875rem); z-index:2;
  width:clamp(2.875rem,3.4vw,3.625rem); height:clamp(2.875rem,3.4vw,3.625rem); border-radius:50%;
  display:grid; place-items:center; border:1px solid rgba(247,247,247,.3); color:var(--on-dark);
  transition:transform .55s var(--ease), background .4s, color .4s, border-color .4s;
}
.split__half:hover .split__go{ background:var(--on-dark); color:var(--ink); transform:rotate(-45deg); border-color:transparent; }

/* Zitat, grosse Bühne ------------------------------------------------------ */
.quote--stage{ font-size:clamp(1.6rem,3.4vw,3.1rem); line-height:1.14; letter-spacing:-.035em; }
/* Bewusst ohne dekoratives Anführungszeichen: im Deutschen sitzt das
   öffnende Zeichen auf der Grundlinie, ein freistehendes oben wirkt falsch.
   Die Zeichen stehen stattdessen im Text selbst. */
.quote--stage{ text-indent:-.42em; }

/* Sektionslabel zweizeilig, mit Marke -------------------------------------- */
.eyebrow--stack{ align-items:flex-start; line-height:1.5; }
.eyebrow--stack::before{ margin-top:.55em; }

/* Responsive Ergänzungen --------------------------------------------------- */
@media (max-width:1180px){
  .hero__badges{ width:min(16.875rem,34vw); bottom:clamp(14.375rem,30vh,21.25rem); }
}
@media (max-width:1024px){
  .hero__badges{ display:none; }
  .ticker__inner{ grid-template-columns:repeat(2,minmax(0,1fr)); margin-inline:0; }
  .ticker__item{ border-left:0; padding-inline:0; border-top:1px solid var(--line); }
  .ticker__item:nth-child(-n+2){ border-top:0; }
  .split--stage{ min-height:0; }
}
@media (max-width:760px){
  .hero__frame{ border-radius:0 0 1.125rem 1.125rem; }
  /* Die Kennzahlen bleiben zweispaltig — vier Zahlen untereinander waeren
     ein halber Bildschirm fuer vier Ziffern. */
  .ticker__item{ padding-block:clamp(1.25rem,5vw,1.75rem); }
  .pillar__big{ font-size:clamp(2.4rem,14vw,3.4rem); }
}

/* Auf Containerbreite gerechnete Wortmarken. Die Schriftgroesse setzt das
   Skript, damit sie unabhaengig von der Namenslaenge exakt passt. */
[data-fit]{ display:inline-block; white-space:nowrap; font-size:clamp(2rem,10vw,11rem); }

/* Hero-Fusszeile: Text links, Kennzahlen rechts ---------------------------- */
.hero--stage .hero__meta{ align-items:flex-end; gap:clamp(1.5rem,3vw,4rem); }
.hero__meta-left{ flex:1 1 28.75rem; min-width:0; }
.hero--stage .hero__sub{ max-width:42ch; }
.hero__meta-right{ display:flex; flex-direction:column; align-items:flex-end; gap:clamp(0.875rem,1.6vw,1.375rem); }
.hero__badges{ position:static; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:0.625rem; width:min(32.5rem,40vw); }
.hero--stage .hero__title{ max-width:none; }

@media (max-width:1180px){
  .hero__badges{ width:min(27.5rem,46vw); }
}
@media (max-width:1024px){
  .hero__badges{ display:none; }
  .hero__meta-right{ align-items:flex-start; }
}

/* Manifest-Absätze etwas unter der Überschriftengrösse halten — sonst
   wird der lange Einstiegstext zur achtzeiligen Wand. Kurze Statements
   im Bildband dürfen die volle Grösse behalten. */
.statement{ font-size:clamp(1.7rem, 3.5vw, 3.4rem); }
.band .statement, .cta .statement{ font-size:var(--fs-h2); }

/* Überschriften dürfen mit der grösseren Typo-Skala breiter laufen --------- */
.sec-head__main h2, .sec-head__main h1{ max-width:18ch; }

/* Zeilenliste über die volle Breite: Label mittig, Erläuterung rechts
   bündig — dadurch entsteht kein Loch mehr in der rechten Hälfte. */
.row{ grid-template-columns:4.5rem minmax(0,1fr) minmax(0,42ch); align-items:start; }
.row__label{ padding-top:.1em; }
.row__text{ max-width:none; }
@media (max-width:1180px){
  .row{ grid-template-columns:3.5rem minmax(0,1fr) minmax(0,34ch); }
}
@media (max-width:900px){
  .row{ grid-template-columns:3rem minmax(0,1fr); }
  .row__text{ grid-column:2; max-width:56ch; }
}
@media (max-width:760px){
  .row{ grid-template-columns:1fr; }
  .row__text{ grid-column:1; }
}

/* Hero auf kleinen Geräten: kein absolutes Übereinander, sondern ein
   Fluss von oben nach unten. */
@media (max-width:860px){
  .hero__frame{ display:flex; flex-direction:column; height:100svh; }
  .hero__stage{ position:static; margin-top:auto; padding-top:clamp(1.5rem,5vw,2.5rem); }
  .hero--stage .hero__meta{ flex-direction:column; align-items:flex-start; gap:clamp(1rem,3vw,1.625rem); }
  .hero__meta-right{ width:100%; align-items:flex-start; }
  .hero--stage .hero__sub{ max-width:none; }
}

/* ==========================================================================
   14. LEDE — Einstiegsblock unter dem Hero
   Kleines Label links, grosser zweifarbiger Absatz rechts, darunter
   Fliesstext und Handlungsaufforderung.
   ========================================================================== */
/* Die Teilung folgt der Referenz: das Label haelt die linke Bildschirm-
   haelfte, der Textblock beginnt etwa bei 42 % und laeuft bis zum rechten
   Rand des Satzspiegels. */
.lede{
  display:grid; grid-template-columns:minmax(0,.72fr) minmax(0,1fr);
  gap:clamp(1.25rem,4vw,5rem); align-items:start;
}
.lede__label{
  display:flex; align-items:flex-start; gap:.7em;
  font-size:var(--fs-xs); text-transform:uppercase; letter-spacing:.15em;
  font-weight:500; color:var(--ink-2); line-height:1.55;
}
.lede__label svg{ width:0.6875rem; height:0.6875rem; flex:none; margin-top:.35em; color:var(--ink-3); }
.lede__lead{
  font-size:clamp(1.3rem, 2.35vw, 2.2rem); line-height:1.28; letter-spacing:-.025em;
  font-weight:400; color:var(--ink); text-wrap:pretty;
}
.lede__lead .dim{ color:var(--ink-3); }
.lede__text{
  margin-top:clamp(1.125rem,2.1vw,1.875rem); max-width:64ch;
  font-size:var(--fs-sm); line-height:1.6; color:var(--ink-2);
}
.lede .btn-row{ margin-top:clamp(1.5rem,2.8vw,2.5rem); }
.sec--dark .lede__lead{ color:var(--on-dark); }
.sec--dark .lede__lead .dim, .sec--dark .lede__text{ color:var(--on-dark-2); }

@media (max-width:900px){
  .lede{ grid-template-columns:1fr; gap:clamp(1.125rem,3vw,1.75rem); }
  .lede__label{ line-height:1.4; }
  .lede__label br{ display:none; }
}

/* ==========================================================================
   15. PANELS — aufklappender Bild-Filmstreifen
   Drei Bildtafeln nebeneinander; die aktive öffnet sich und gibt ihren
   Text frei, die übrigen bleiben als schmale Streifen mit stehendem
   Titel. Auf Touch-Geräten werden daraus normale, gestapelte Karten.
   ========================================================================== */
.panels{
  display:flex; gap:clamp(0.5rem,.9vw,0.875rem);
  height:clamp(23.75rem,44vw,36.25rem);
}
.panel{
  position:relative; flex:1 1 0; min-width:0; overflow:hidden; isolation:isolate;
  border-radius:var(--r-lg); color:var(--on-dark);
  transition:flex-grow .95s var(--ease);
}
.panel.is-active{ flex-grow:4.5; }
.panel > img{
  position:absolute; inset:0; z-index:-2; width:100%; height:100%; object-fit:cover;
  transition:transform 1.6s var(--ease), filter .9s var(--ease);
  filter:grayscale(.55) contrast(1.04);
}
.panel.is-active > img{ filter:grayscale(0); transform:scale(1.03); }
.panel::before{
  content:""; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(180deg, rgba(13,13,13,.20) 0%, rgba(13,13,13,.50) 55%, rgba(13,13,13,.88) 100%);
  transition:background .7s var(--ease);
}
.panel.is-active::before{
  background:linear-gradient(180deg, rgba(13,13,13,.06) 0%, rgba(13,13,13,.30) 45%, rgba(13,13,13,.86) 100%);
}
.panel__n{
  position:absolute; z-index:2; top:clamp(1.25rem,2.2vw,2.125rem); left:clamp(1.375rem,2.3vw,2.375rem);
  font-size:var(--fs-xs); letter-spacing:.16em; color:rgba(247,247,247,.72); font-variant-numeric:tabular-nums;
}

/* Stehender Titel im geschlossenen Zustand */
.panel__label{
  position:absolute; z-index:2; left:clamp(1.25rem,2.2vw,2.125rem); bottom:clamp(1.375rem,2.4vw,2.375rem);
  writing-mode:vertical-rl; transform:rotate(180deg);
  font-size:clamp(1rem,1.25vw,1.28rem); letter-spacing:-.02em; font-weight:500; white-space:nowrap;
  /* Erscheint erst, wenn die Tafel ihre Breite erreicht hat — sonst
     fährt die Schrift während der Animation sichtbar mit. */
  opacity:1; transition:opacity .4s var(--ease) .5s;
}
.panel.is-active .panel__label{ opacity:0; transition:opacity .16s var(--ease) 0s; }

/* Offener Zustand */
.panel__body{
  position:absolute; z-index:2; left:0; right:auto; bottom:0;
  width:clamp(18.75rem, 46vw, 42.5rem);
  padding:clamp(1.375rem,2.3vw,2.375rem);
  /* Beim Schliessen sofort weg, beim Öffnen erst am Ende der
     Breitenanimation herein — dadurch steht die Schrift beim Einblenden. */
  opacity:0; transform:translateY(0.625rem); pointer-events:none;
  transition:opacity .2s var(--ease) 0s, transform .2s var(--ease) 0s;
}
.panel.is-active .panel__body{
  opacity:1; transform:none;
  transition:opacity .45s var(--ease) .52s, transform .6s var(--ease) .52s;
}
.panel__body h3{ font-size:clamp(1.4rem,2.1vw,2.05rem); max-width:16ch; }
.panel__body p{ margin-top:.9rem; max-width:44ch; color:rgba(247,247,247,.78); font-size:var(--fs-sm); line-height:1.55; }
.panel__body .link-arrow{ margin-top:1.5rem; border-color:rgba(247,247,247,.32); }
.panel__body .link-arrow:hover{ color:var(--on-dark); border-color:var(--on-dark); }

.panels__foot{
  display:flex; flex-wrap:wrap; gap:.8rem 2.5rem; justify-content:space-between;
  margin-top:clamp(1.25rem,2.2vw,2rem);
}

@media (max-width:900px), (pointer:coarse){
  /* Ohne Hover wird der Filmstreifen zur Wischleiste: Tafel an Tafel, die
     naechste lugt am Rand hervor. Die Tafel, die vorn steht, ist farbig,
     die Nachbarn bleiben gedaempft — dasselbe Zeichen wie am Desktop beim
     Ueberfahren. Welche vorn steht, setzt das Skript (Wischleisten). */
  .panels{
    display:flex; height:auto; gap:.75rem;
    overflow-x:auto; overscroll-behavior-x:contain; scroll-snap-type:x mandatory;
    margin-inline:calc(-1 * var(--pad)); padding-inline:var(--pad); scroll-padding-inline:var(--pad);
    scrollbar-width:none;
  }
  .panels::-webkit-scrollbar{ display:none; }
  .panel, .panel.is-active{
    flex:0 0 min(84%, 27rem); min-height:clamp(27rem, 118vw, 32rem);
    display:flex; flex-direction:column; scroll-snap-align:start; transition:none;
  }
  .panel__label{ display:none; }
  /* Oben Luft fuer die Ordnungszahl — sonst stoesst ein langer Text an sie */
  .panel__body, .panel.is-active .panel__body{
    position:relative; width:auto; margin-top:auto; padding-top:4.5rem;
    opacity:1; transform:none; pointer-events:auto; transition:none;
  }
  .panel::before, .panel.is-active::before{
    background:linear-gradient(180deg, rgba(13,13,13,.14) 0%, rgba(13,13,13,.36) 36%, rgba(13,13,13,.90) 100%);
  }
}

/* ==========================================================================
   16. ABSPANN — Sektionskopf mittig, Zitatkarte, Bildkacheln, Outro
   Vokabular aus den Referenzen: mittig gesetzte Sektionsköpfe, ruhige
   Zitatkarten, Bildkacheln mit heller Pille, und ein Schluss, dessen
   Bild in den Footer übergeht.
   ========================================================================== */

/* Mittiger Sektionskopf */
.sec-head--center{ flex-direction:column; align-items:center; text-align:center; }
.sec-head--center .sec-head__main{ flex:none; max-width:none; }
.sec-head--center .sec-head__main h2{ max-width:20ch; margin-inline:auto; }
.sec-head--center .sec-head__aside{ flex:none; max-width:54ch; }

/* Bildkachel mit heller Pille (Referenz: Reise-Kacheln) */
.tile{
  position:relative; display:flex; flex-direction:column; justify-content:flex-end;
  min-height:clamp(23.75rem,38vw,35rem); border-radius:var(--r-lg); overflow:hidden;
  isolation:isolate; color:var(--on-dark); padding:clamp(1.5rem,2.6vw,2.75rem);
}
.tile > img{
  position:absolute; inset:0; z-index:-2; width:100%; height:100%; object-fit:cover;
  transition:transform 1.5s var(--ease);
}
.tile::before{
  content:""; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(180deg, rgba(13,13,13,.12) 26%, rgba(13,13,13,.82) 100%);
  transition:background .6s var(--ease);
}
.tile:hover > img{ transform:scale(1.05); }
.tile:hover::before{ background:linear-gradient(180deg, rgba(46,61,34,.22) 20%, rgba(13,13,13,.88) 100%); }
.tile__foot{ display:flex; align-items:flex-end; justify-content:space-between; gap:1.5rem; }
.tile__foot h3{ font-size:clamp(1.35rem,2.2vw,2.05rem); max-width:15ch; }
.tile p{ margin-top:.9rem; max-width:40ch; color:rgba(247,247,247,.80); font-size:var(--fs-sm); }
.tile__pill{
  flex:none; display:inline-flex; align-items:center; gap:.85em;
  height:2.875rem; padding:0 0.4375rem 0 1.45em; border-radius:var(--r-pill);
  background:var(--bg); color:var(--ink); font-size:.9rem; font-weight:500; letter-spacing:-.01em; white-space:nowrap;
  transition:background .4s var(--ease), color .4s var(--ease);
}
.tile__pill span{
  width:2rem; height:2rem; border-radius:50%; background:var(--ink); color:var(--bg);
  display:grid; place-items:center; transition:background .4s, color .4s, transform .5s var(--ease);
}
.tile__pill span svg{ width:.85em; height:.85em; transition:transform .7s var(--ease); }
.tile:hover .tile__pill{ background:var(--accent); color:var(--on-dark); }
.tile:hover .tile__pill span{ background:var(--on-dark); color:var(--accent); }
.tile:hover .tile__pill span svg{ transform:rotate(360deg); }

/* Logo-Band mit Haarlinien */
.logos{ border-block:1px solid var(--line); padding-block:clamp(1.625rem,3vw,2.75rem); }

@media (max-width:760px){
  .tile{ min-height:clamp(20rem,64vw,26.25rem); }
  .tile__foot{ flex-direction:column; align-items:flex-start; gap:1.2rem; }
}

/* ==========================================================================
   18. BANNER — vollbreite Schlusskachel mit Lauftext
   ========================================================================== */
.outro{ padding-block:clamp(2.875rem,6vw,6rem) clamp(0.75rem,1.4vw,1.625rem); }
.banner{
  position:relative; isolation:isolate; overflow:hidden;
  margin-inline:clamp(0.75rem,1.4vw,1.625rem);
  border-radius:var(--r-xl);
  padding:clamp(7.5rem,15vw,15rem) clamp(1.5rem,4vw,4.5rem) clamp(3.5rem,7vw,7.5rem);
  text-align:center; color:var(--on-dark);
  background:var(--ink);
}
/* Bild plus Ink-Verlauf statt eigenem Farbverlauf — dieselbe Bauweise wie
   Hero, Bildkacheln und Filmstreifen. */
.banner__bg{ position:absolute; z-index:-2; inset:0; overflow:hidden; }
.banner__bg img{ width:100%; height:118%; object-fit:cover; will-change:transform; }
.banner::before{
  content:""; position:absolute; z-index:-1; inset:0;
  background:linear-gradient(180deg,
    rgba(13,13,13,.34) 0%, rgba(13,13,13,.58) 38%, rgba(13,13,13,.90) 100%);
}
/* Lauftext im oberen Bereich der Kachel */
.banner__ticker{
  position:absolute; z-index:-1; left:0; right:0; top:clamp(1.625rem,3.6vw,4rem);
  overflow:hidden; pointer-events:none; user-select:none;
}
.banner__track{
  display:flex; width:max-content; gap:0;
  animation:marquee 44s linear infinite;
}
.banner__track span{
  display:block; white-space:nowrap; padding-right:.55em;
  font-size:clamp(2.4rem,6.4vw,7rem); line-height:1.05; font-weight:500;
  letter-spacing:-.045em;
  color:transparent; -webkit-text-stroke:1.2px rgba(247,247,247,.34);
}
/* ch bezieht sich auf die Fliesstextgroesse — fuer die Display-Zeile
   waere das viel zu schmal, deshalb eine echte Breite. */
.banner__inner{ position:relative; max-width:min(100%, 56.25rem); margin-inline:auto; }
.banner h2{ margin-top:clamp(1.25rem,2.4vw,2.375rem); }
.banner .lead{ margin-inline:auto; color:rgba(247,247,247,.78); }
.banner .btn-row{ justify-content:center; margin-top:clamp(1.75rem,3.4vw,3rem); }
.banner .eyebrow--pill{ background:rgba(247,247,247,.10); border-color:var(--line-dark); color:var(--on-dark); }

@media (max-width:760px){
  .voice{ grid-template-columns:1fr; }
  .voice__media{ min-height:clamp(12.5rem,48vw,17.5rem); }
  .banner{ padding-top:clamp(5.625rem,26vw,9.375rem); }
  .tile{ min-height:clamp(20rem,64vw,26.25rem); }
  .tile__foot{ flex-direction:column; align-items:flex-start; gap:1.2rem; }
}
/* ==========================================================================
   19. BÜHNE — scrollgetriebene Sequenz
   Ein hoher Abschnitt, in dem ein Element am Viewport klebt. Der Browser
   scrollt normal weiter; der Fortschritt treibt die Sequenz. Der Wert wird
   im Skript gedämpft nachgeführt — dadurch läuft die Bewegung nach einem
   Radschritt aus, statt stufig zu springen.
   ========================================================================== */
.stage{ position:relative; height:360vh; background:var(--bg); }
.stage__sticky{
  position:sticky; top:0; height:100svh; overflow:hidden;
  isolation:isolate; background:var(--bg);
}

/* Zwei Kreise: der dunkle kommt, der helle löst ihn am Schluss ab. */
.stage__circle{
  position:absolute; z-index:0; left:50%; top:50%;
  width:150vmax; height:150vmax; margin:-75vmax 0 0 -75vmax;
  border-radius:50%; transform:scale(0); will-change:transform;
}
.stage__circle--in{ background:var(--ink); }
.stage__circle--out{ background:var(--bg); }

/* Wanderndes Textband. Der Differenz-Blendmodus kehrt die Schrift
   automatisch um, sobald ein Kreis darunter liegt. */
.stage__band{
  position:absolute; z-index:1; left:0; right:0; top:50%;
  transform:translateY(-50%); overflow:hidden;
  pointer-events:none; user-select:none; mix-blend-mode:difference;
}
.stage__band-inner{ display:flex; width:max-content; will-change:transform; }
.stage__band-inner span{
  display:block; white-space:nowrap; padding-right:.35em; color:#fff;
  font-size:clamp(3rem,13vw,15rem); line-height:1.04;
  font-weight:500; letter-spacing:-.05em;
}

.stage__top{ position:absolute; z-index:2; top:calc(var(--nav-h) + clamp(1.5rem,5vh,3.75rem)); left:var(--pad); }
.stage__logos{
  position:absolute; z-index:2; left:0; right:0; bottom:clamp(4.375rem,13vh,8.125rem);
  display:flex; justify-content:center; align-items:center; flex-wrap:wrap;
  gap:clamp(1.5rem,4.5vw,4.5rem); padding-inline:var(--pad);
}
.stage__logos svg{ height:clamp(1.625rem,2.4vw,2.25rem); width:auto; color:var(--ink); opacity:.5; }

/* Zitat — blendet nicht ein, sondern entwickelt sich: erst der Strich,
   dann Wort für Wort aus der Maske. Differenz-Blend, damit es sich am
   Schluss von selbst ins Dunkle kehrt, wenn der helle Kreis kommt. */
.stage__quote{
  position:absolute; z-index:2; margin:0; left:50%; top:50%;
  width:min(100%, 65rem); padding-inline:var(--pad);
  transform:translate(-50%,-50%); text-align:center;
  color:#fff; mix-blend-mode:difference;
}
/* Der Punkt liegt bewusst NEBEN der gestreckten Linie, nicht in ihr:
   sonst quetscht ihn dasselbe scaleX zur Ellipse und schiebt ihn auf
   r² statt r — er bliebe sichtbar hinter der Spitze zurück. */
.stage__rule{
  display:block; position:relative; height:1px;
  margin-bottom:clamp(1.875rem,4vw,3.75rem);
}
.stage__rule-line{
  position:absolute; inset:0; background:currentColor; opacity:.5;
  transform:scaleX(0); transform-origin:left center;
}
.stage__dot{
  position:absolute; top:50%; left:0; width:0.5625rem; height:0.5625rem;
  border-radius:50%; background:currentColor;
  transform:translate(-50%,-50%);
}
.stage__quote blockquote{
  margin:0; font-size:clamp(1.4rem,3.1vw,2.8rem); line-height:1.24;
  letter-spacing:-.03em; font-weight:400;
}
.qw{ display:inline-block; overflow:hidden; vertical-align:top; padding-bottom:.16em; margin-bottom:-.16em; }
.qw > span{ display:block; transform:translateY(110%); will-change:transform; }
.stage__quote figcaption{ margin-top:clamp(1.625rem,3.2vw,3rem); font-size:var(--fs-sm); }
.stage__quote figcaption strong{ display:block; font-weight:500; }
.stage__quote figcaption span{ color:#A8A8A2; }

/* Fortschritt und Hinweis kehren sich mit derselben Technik um */
.stage__meta{
  position:absolute; z-index:2; right:var(--pad); bottom:clamp(1.5rem,4vh,2.75rem);
  display:flex; align-items:center; gap:.9rem; mix-blend-mode:difference; color:#8E8E8A;
  font-size:var(--fs-xs); letter-spacing:.14em; text-transform:uppercase;
  font-variant-numeric:tabular-nums;
}
.stage__meta-track{ width:clamp(3.75rem,9vw,8.75rem); height:1px; background:currentColor; opacity:.4; position:relative; }
.stage__meta-track span{ position:absolute; inset:0 auto 0 0; background:currentColor; width:0; }
.stage__note{
  position:absolute; z-index:2; left:var(--pad); bottom:clamp(1.5rem,4vh,2.75rem);
  max-width:46ch; font-size:var(--fs-xs); mix-blend-mode:difference; color:#8E8E8A;
}

/* Ohne JavaScript bleibt alles sichtbar */
.js .stage__quote, .js .stage__note{ opacity:0; }

@media (prefers-reduced-motion:reduce){
  /* Ohne Bewegung: ein ganz normaler dunkler Abschnitt. Auf dem Handy
     laeuft die Buehne dagegen wie am Desktop (Abschnitt 43). */
  .stage{ height:auto; }
  .stage__sticky{
    position:static; height:auto; overflow:hidden;
    background:var(--ink); color:var(--on-dark);
    padding-block:clamp(4.375rem,13vw,8.125rem);
    display:flex; flex-direction:column;
  }
  .stage__top{ order:1; } .stage__band{ order:2; }
  .stage__logos{ order:3; } .stage__quote{ order:4; } .stage__note{ order:5; }
  .stage__circle{ display:none; }
  .stage__band{
    position:static; transform:none; mix-blend-mode:normal;
    margin-block:clamp(1.625rem,6vw,3rem);
  }
  .stage__band-inner{ animation:marquee 42s linear infinite; }
  .stage__band-inner span{ font-size:clamp(2.1rem,11vw,4.2rem); color:var(--on-dark); }
  .stage__top, .stage__logos, .stage__quote, .stage__note{
    position:static; transform:none; opacity:1 !important; width:auto;
    padding-inline:var(--pad); text-align:left;
  }
  .stage__quote, .stage__note{ mix-blend-mode:normal; color:var(--on-dark); }
  .stage__quote figcaption span, .stage__note{ color:var(--on-dark-2); }
  .stage__rule-line{ transform:none !important; }
  .stage__dot{ left:100% !important; }
  .qw > span{ transform:none !important; }
  .stage__top{ margin-bottom:clamp(1.25rem,4vw,2rem); }
  .stage__logos{ justify-content:flex-start; margin-top:clamp(1.625rem,6vw,2.75rem); }
  .stage__logos svg{ color:var(--on-dark); opacity:.6; }
  .stage__quote{ margin-top:clamp(2.125rem,7vw,3.75rem); }
  .stage__note{ margin-top:clamp(1.5rem,5vw,2.5rem); max-width:none; }
  .stage__meta{ display:none; }
}

/* ==========================================================================
   20. UNTERSEITEN — kompakter Auftakt, Sprungleiste, Streichliste, Zeitstrahl
   Gleiches System wie die Startseite, andere Architektur: Der Auftakt ist
   kurz statt bildschirmfuellend, weil der Besucher mit einer Absicht kommt.
   ========================================================================== */

/* Kompakter Seitenauftakt -------------------------------------------------- */
.subhead{
  position:relative; isolation:isolate; overflow:hidden;
  background:var(--ink); color:var(--on-dark);
  padding:calc(var(--nav-h) + clamp(4rem,9vh,7.5rem)) 0 clamp(2.875rem,6vh,5.25rem);
  border-radius:0 0 var(--r-xl) var(--r-xl);
}
.subhead__bg{ position:absolute; z-index:-2; inset:0; overflow:hidden; }
.subhead__bg img{ width:100%; height:118%; object-fit:cover; will-change:transform; }
.subhead::before{
  content:""; position:absolute; z-index:-1; inset:0;
  background:linear-gradient(180deg, rgba(13,13,13,.66) 0%, rgba(13,13,13,.40) 46%, rgba(13,13,13,.88) 100%);
}
.subhead__grid{
  display:grid; grid-template-columns:minmax(0,1.3fr) minmax(0,.7fr);
  gap:clamp(1.625rem,4vw,4.375rem); align-items:end;
}
.subhead h1{ font-size:clamp(2.3rem,5.4vw,5rem); letter-spacing:-.04em; line-height:1.02; max-width:15ch; }
.subhead__sub{ margin-top:clamp(1.125rem,2.2vw,2rem); max-width:46ch; color:rgba(247,247,247,.82); }

/* Sprungleiste ------------------------------------------------------------- */
.jump{
  position:sticky; top:calc(var(--nav-h) + 0.625rem); z-index:20;
  padding-top:clamp(1.125rem,2vw,1.875rem);
  transition:opacity .4s var(--ease), transform .5s var(--ease);
}
/* Ab dem Schlussbanner hat die Leiste ihren Zweck erfuellt */
.jump.is-gone{ opacity:0; transform:translateY(-0.625rem); pointer-events:none; }
/* Beim Lesen (Runterscrollen) faehrt sie aus dem Weg und kommt zurueck,
   sobald man wieder nach oben scrollt — sonst liegt sie staendig ueber
   den Ueberschriften. */
.jump.is-weg{ opacity:0; transform:translateY(-130%); pointer-events:none; }
.jump__inner{
  display:flex; gap:.25rem; width:max-content; max-width:100%; margin-inline:auto;
  padding:0.4375rem; border-radius:var(--r-pill); overflow-x:auto;
  background:rgba(255,255,255,.90); border:1px solid var(--line);
  backdrop-filter:blur(1rem) saturate(1.4); -webkit-backdrop-filter:blur(1rem) saturate(1.4);
  scrollbar-width:none;
}
.jump__inner::-webkit-scrollbar{ display:none; }
.jump a{
  padding:.55em 1.05em; border-radius:var(--r-pill); white-space:nowrap;
  font-size:var(--fs-sm); color:var(--ink-2);
  transition:background .35s var(--ease), color .35s var(--ease);
}
.jump a:hover{ background:rgba(13,13,13,.06); color:var(--ink); }
.jump a.is-current{ background:var(--ink); color:var(--bg); }
/* Ueber dunklen Abschnitten dreht die Leiste um — sonst schwebt ein heller
   Fleck ueber dem Inhalt und sieht nach Fehler aus. */
.jump.is-over-dark .jump__inner{ background:rgba(13,13,13,.80); border-color:var(--line-dark); }
.jump.is-over-dark a{ color:var(--on-dark-2); }
.jump.is-over-dark a:hover{ background:rgba(247,247,247,.12); color:var(--on-dark); }
.jump.is-over-dark a.is-current{ background:var(--on-dark); color:var(--ink); }

/* Einordnungsliste — jede Zeile zieht einen Strich und hebt sich heran.
   Kein Durchstreichen: Es geht nicht darum, etwas zu entwerten, sondern
   darum, es einzuordnen. -------------------------------------------------- */
.nots{ display:grid; gap:clamp(1rem,2.2vw,2.125rem); }
.nots__item{
  display:grid; grid-template-columns:clamp(1.75rem,3.4vw,3.625rem) minmax(0,1fr);
  gap:clamp(0.875rem,2vw,1.875rem); align-items:baseline;
  font-size:clamp(1.2rem,2.6vw,2.3rem); letter-spacing:-.03em; line-height:1.24;
  font-weight:400; color:rgba(247,247,247,.72);
  transition:color .7s var(--ease), transform .9s var(--ease), opacity .7s var(--ease);
}
.nots__item::before{
  content:""; display:block; position:relative; top:-.36em;
  height:2px; width:100%; background:currentColor; opacity:.55;
  transform:scaleX(0); transform-origin:left center;
  transition:transform .8s var(--ease);
}
.js .nots__item{ opacity:0; transform:translateY(1rem); color:rgba(247,247,247,.34); }
.js .nots__item.is-on{ opacity:1; transform:none; color:rgba(247,247,247,.78); }
.js .nots__item.is-on::before{ transform:scaleX(1); }

/* Zeitstrahl mit mitwachsender Linie --------------------------------------- */
.tl{ --tl-col:clamp(1.875rem,4vw,3.5rem); position:relative; list-style:none; margin:0; padding:0; }
.tl__rail{
  position:absolute; z-index:0; top:0; bottom:0;
  left:calc(var(--tl-col) / 2 - 1px); width:2px; background:var(--line); overflow:hidden;
}
.sec--dark .tl__rail{ background:var(--line-dark); }
.tl__rail i{ display:block; width:100%; height:0; background:var(--ink); }
.sec--dark .tl__rail i{ background:var(--on-dark); }
/* Dasselbe dreispaltige Raster wie die Zeilenlisten der uebrigen Seiten:
   Marke, Titel, Erlaeuterung rechts buendig. */
.tl__item{
  position:relative; display:grid;
  grid-template-columns:var(--tl-col) minmax(0,1fr) minmax(0,42ch);
  gap:clamp(1rem,2.4vw,2.625rem); align-items:start;
  padding-block:clamp(1.5rem,3.2vw,3.25rem); border-top:1px solid var(--line);
}
.sec--dark .tl__item{ border-color:var(--line-dark); }
.tl__item:first-child{ border-top:0; }
.tl__marker{ position:relative; }
.tl__marker::before{
  content:""; position:absolute; z-index:2; left:50%; top:.5em;
  width:0.8125rem; height:0.8125rem; margin-left:-0.4062rem; border-radius:50%;
  background:var(--bg); border:2px solid var(--line-2);
  transition:background .45s var(--ease), border-color .45s var(--ease), transform .45s var(--ease);
}
.sec--dark .tl__marker::before{ background:var(--ink); border-color:var(--line-dark); }
.tl__item.is-on .tl__marker::before{ background:var(--ink); border-color:var(--ink); transform:scale(1.18); }
.sec--dark .tl__item.is-on .tl__marker::before{ background:var(--on-dark); border-color:var(--on-dark); }
.tl__head{ display:flex; flex-direction:column; gap:.55rem; }
.tl__n{ font-size:var(--fs-sm); letter-spacing:.1em; color:var(--ink-3); font-variant-numeric:tabular-nums; }
.sec--dark .tl__n{ color:var(--on-dark-2); }
.tl__item h3{ font-size:clamp(1.2rem,2vw,1.9rem); }
.tl__item p{ margin:0; color:var(--ink-2); padding-top:.15em;  max-width:64ch;}
.sec--dark .tl__item p{ color:var(--on-dark-2); }

@media (max-width:1180px){
  .tl__item{ grid-template-columns:var(--tl-col) minmax(0,1fr) minmax(0,34ch); }
}
@media (max-width:900px){
  .tl__item{ grid-template-columns:var(--tl-col) minmax(0,1fr); }
  .tl__item p{ grid-column:2; padding-top:.7rem; }
  .subhead__grid{ grid-template-columns:1fr; align-items:start; }
  .jump{ top:calc(var(--nav-h) + 0.375rem); }
  .jump__inner{ margin-inline:0; }
}

/* ==========================================================================
   21. MOSAIK — Kacheln unterschiedlicher Groesse, die zusammen exakt ein
   Rechteck ergeben. Feste Platzierung statt Auto-Flow, damit keine Luecke
   entsteht und der Block als eine Flaeche liest.
   ========================================================================== */
/*  Zeilenwechsel wie in der Referenz: schmal | breit, darunter breit |
    schmal, darunter wieder schmal | breit. Drei Zeilen, sechs Kacheln.  */
.mosaic{ display:grid; grid-template-columns:repeat(12,1fr); gap:var(--gap); }
.m-a{ grid-column:1 / 6;  }
.m-b{ grid-column:6 / 13; }
.m-c{ grid-column:1 / 8;  }
.m-d{ grid-column:8 / 13; }
.m-e{ grid-column:1 / 6;  }
.m-f{ grid-column:6 / 13; }

@media (max-width:900px){
  .mosaic{ grid-template-columns:1fr; }
  .mosaic > *{ grid-column:1 / -1; }
}

/* ==========================================================================
   22. SWEEP — riesiger Satz, der sich beim Scrollen zeilenweise auffuellt.
   Die Fuellkante ist ein Farbverlauf, der auf die Schrift beschnitten wird;
   das ergibt einen weichen Uebergang statt harter Wortspruenge.
   ========================================================================== */
/* Linksbuendig und gross gesetzt: der Satz soll die Flaeche tragen, nicht
   in der Mitte schweben. Die Fuellkante ist ein Farbverlauf auf die Schrift. */
.sweep{ text-align:left; }
.sweep__l{
  --p:100%;
  display:block;
  font-size:clamp(2.2rem,9vw,9.5rem); line-height:1.06;
  letter-spacing:-.05em; font-weight:500;
  /* Luft fuer die Unterlaengen: ohne sie schneidet die auf die Schrift
     beschnittene Fuellflaeche das g und das p unten ab. */
  padding-bottom:.10em; margin-bottom:-.06em;
  background-image:linear-gradient(90deg,
    var(--ink) 0%, var(--ink) var(--p),
    var(--sweep-aus) calc(var(--p) + 7%), var(--sweep-aus) 100%);
  -webkit-background-clip:text; background-clip:text;
  color:transparent; -webkit-text-fill-color:transparent;
}
/* -7 % statt 0: die weiche Fuellkante ist sieben Prozent breit. Stuende
   der Startwert auf 0, laege ihre linke Haelfte schon im Bild und die
   erste Zeile waere von Anfang an angetoent. */
.js .sweep__l{ --p:-7%; }
.sweep__note{
  margin-top:clamp(1.25rem,2.6vw,2.5rem);
  font-size:var(--fs-sm); color:var(--ink-3);
}

@media (prefers-reduced-motion:reduce){ .js .sweep__l{ --p:100%; } }

/* ==========================================================================
   23. KOLLEKTIONEN — grosses Bild links, rechts Titel, Text, Pillen und
   eine Fusszeile. Die Eintraege sind durch Haarlinien getrennt und
   fluchten am unteren Rand.
   ========================================================================== */
.colls{ border-top:1px solid var(--line); }
.coll{
  display:grid; grid-template-columns:minmax(0,.44fr) minmax(0,1fr);
  gap:clamp(1.5rem,4vw,5rem);
  padding-block:clamp(1.75rem,3.6vw,3.75rem);
  border-bottom:1px solid var(--line);
}
.coll__media{
  position:relative; display:block; overflow:hidden; isolation:isolate;
  border-radius:var(--r-lg); background:var(--bg-2); aspect-ratio:5/4;
}
/* Fuellt den ganzen von Haarlinien begrenzten Bereich statt eines festen
   Seitenverhaeltnisses — fuer Zeilen mit viel Text daneben. */
.coll--fuellt .coll__media{
  aspect-ratio:auto; align-self:stretch; height:100%;
  min-height:clamp(18.75rem,34vw,35rem);
}
.coll__media img{ width:100%; height:100%; object-fit:cover; transition:transform 1.4s var(--ease); }
.coll__media::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(180deg, rgba(13,13,13,0) 55%, rgba(13,13,13,.62) 100%);
}
.coll:hover .coll__media img{ transform:scale(1.05); }
.coll__go{
  position:absolute; z-index:2; left:clamp(1rem,1.8vw,1.625rem); bottom:clamp(1rem,1.8vw,1.625rem);
  display:inline-flex; align-items:center; gap:.6em;
  font-size:var(--fs-sm); font-weight:500; color:var(--on-dark);
}
.coll__go span{
  width:1.9em; height:1.9em; border-radius:50%; display:grid; place-items:center;
  border:1px solid rgba(247,247,247,.5);
  transition:background .4s var(--ease), color .4s var(--ease), transform .5s var(--ease);
}
.coll__go span svg{ width:.8em; height:.8em; }
.coll:hover .coll__go span{ background:var(--on-dark); color:var(--ink); }
.coll__go span svg{ transition:transform .7s var(--ease); }
.coll:hover .coll__go span svg{ transform:rotate(360deg); }

.coll__body{ display:flex; flex-direction:column; padding-top:clamp(0.25rem,.6vw,0.75rem); }
.coll__body h3, .coll__body h2{ font-size:clamp(1.5rem,2.7vw,2.5rem); letter-spacing:-.03em; }
.coll__body > p{ margin-top:clamp(0.75rem,1.4vw,1.375rem); max-width:52ch; color:var(--ink-2); }
.coll__body .tags{ margin-top:clamp(1.125rem,2vw,1.875rem); }
.coll__foot{
  margin-top:auto; padding-top:clamp(1.875rem,4vw,4rem);
  display:flex; flex-wrap:wrap; align-items:baseline; justify-content:space-between; gap:1rem 2rem;
}
.coll__label{ display:block; font-size:var(--fs-xs); text-transform:uppercase; letter-spacing:.14em; color:var(--ink-3); }
.coll__value{ display:block; margin-top:.5rem; font-size:clamp(1.05rem,1.5vw,1.4rem); letter-spacing:-.02em; }

@media (max-width:900px){
  .coll{ grid-template-columns:1fr; gap:clamp(1.25rem,4vw,2rem); }
  .coll__media{ aspect-ratio:16/10; }
  .coll__foot{ padding-top:clamp(1.25rem,4vw,2rem); }
}

/* Pillen auf dem Bild — im Filmstreifen ueber der Ueberschrift ------------- */
.panel__body .tags{ margin-bottom:clamp(0.875rem,1.6vw,1.375rem); }
.panel__body .tag{
  background:rgba(247,247,247,.14); border-color:rgba(247,247,247,.28);
  color:var(--on-dark);
  backdrop-filter:blur(0.5rem); -webkit-backdrop-filter:blur(0.5rem);
}

/* ==========================================================================
   24. BREITE BILDSCHIRME
   Der Inhalt waechst mit dem Fenster (siehe --wrap). Damit dabei nicht
   einzelne Bausteine ins Leere laufen, bekommt Fliesstext ein Lesemass
   und die bildgetragenen Teile mehr Hoehe. Alle Regeln hier sind reine
   Obergrenzen — an schmalen Fenstern aendert sich dadurch nichts.
   ========================================================================== */

/* Lesemass. Nur <p>, damit keine Layout-Container getroffen werden, die
   dieselben Hilfsklassen tragen. */
p.lead, p.muted, p.small{ max-width:74ch; }
.note{ max-width:78ch; }
.person__name, .person__role, .person__text{ max-width:44ch; }
.lede__lead{ max-width:64ch; }

/* Mittig gesetzte Absaetze duerfen ihr Zentrum behalten. */
.cta p.lead, .banner p.lead, .outro p.lead{ margin-inline:auto; }

/* Portraits: auto-fill legt so viele gleich breite Spuren an, wie bei der
   Mindestbreite hineinpassen — und laesst leere Spuren stehen. Ohne das
   blaehen zwei Gruenderbilder auf einem breiten Schirm zu 1100 x 1400 Pixel
   auf. Unter 1200px bleibt die bisherige Aufteilung unveraendert. */
@media (min-width:1200px){
  .people{ grid-template-columns:repeat(auto-fill, minmax(30rem, 1fr)); }
}

@media (min-width:1600px){
  /* Die Schriftskala war nach oben gedeckelt: ab etwa 1600px waechst sie
     nicht mehr mit, wodurch die grossen Zeilen auf breiten Schirmen
     verhaeltnismaessig klein wirken. Die Deckel greifen erst oberhalb
     dieser Breite — darunter aendert sich nichts. */
  :root{
    --fs-mega:    clamp(3rem, 9.6vw, 15rem);
    --fs-display: clamp(2.9rem, 7.6vw, 10rem);
    --fs-h1:      clamp(2.2rem, 5.2vw, 6.6rem);
    --fs-h2:      clamp(2rem, 4.3vw, 5.4rem);
  }
  .sweep__l{ font-size:clamp(2rem, 8.2vw, 11rem); }

  /* Kollektionen: etwas mehr Bild und ein breiterer Absatz — sonst bleibt
     die rechte Haelfte der Zeile leer. */
  .coll{ grid-template-columns:minmax(0,.52fr) minmax(0,1fr); }
  .coll__body > p{ max-width:60ch; }

  /* Filmstreifen: sonst wird aus den Tafeln ein flacher Streifen. */
  .panels{ height:clamp(35rem, 30vw, 47.5rem); }

  /* Der Einstiegsblock bleibt bewusst zweispaltig — Label links, darunter
     gestapelt Satz, Fliesstext und Knopf, so wie in der Referenz. Nur die
     Zeilenlaenge des grossen Satzes ist begrenzt (siehe .lede__lead oben). */
}

/* ==========================================================================
   25. DUNKELMODUS DER GANZEN SEITE
   Beim Ueberschreiten eines Punktes kippt nicht ein Abschnitt, sondern das
   ganze Dokument. Moeglich wird das dadurch, dass saemtliche Farben aus den
   Variablen von Abschnitt 1 kommen: getauscht werden nur die Werte.

   Damit der Wechsel nicht hart springt, sind die Farbvariablen per
   @property als <color> registriert. Nur registrierte Eigenschaften lassen
   sich ueberblenden — dadurch genuegt ein einziger Uebergang auf :root und
   jedes Element auf der Seite wandert mit, ohne eigene Regel.
   ========================================================================== */
@property --bg         { syntax:'<color>'; inherits:true; initial-value:#FFFFFF; }
@property --bg-2       { syntax:'<color>'; inherits:true; initial-value:#F4F4F4; }
@property --surface    { syntax:'<color>'; inherits:true; initial-value:#FFFFFF; }
@property --ink        { syntax:'<color>'; inherits:true; initial-value:#0D0D0D; }
@property --ink-2      { syntax:'<color>'; inherits:true; initial-value:#474747; }
@property --ink-3      { syntax:'<color>'; inherits:true; initial-value:#878787; }
@property --line       { syntax:'<color>'; inherits:true; initial-value:rgba(13,13,13,.10); }
@property --line-2     { syntax:'<color>'; inherits:true; initial-value:rgba(13,13,13,.16); }
@property --accent     { syntax:'<color>'; inherits:true; initial-value:#2E3D22; }
@property --accent-2   { syntax:'<color>'; inherits:true; initial-value:#5C7440; }
@property --accent-soft{ syntax:'<color>'; inherits:true; initial-value:#E6EBDD; }
@property --sweep-aus { syntax:'<color>'; inherits:true; initial-value:rgba(13,13,13,.20); }
@property --pille     { syntax:'<color>'; inherits:true; initial-value:rgba(255,255,255,.60); }

:root{
  transition:
    --bg .75s var(--ease), --bg-2 .75s var(--ease), --surface .75s var(--ease),
    --ink .75s var(--ease), --ink-2 .75s var(--ease), --ink-3 .75s var(--ease),
    --line .75s var(--ease), --line-2 .75s var(--ease),
    --accent .75s var(--ease), --accent-2 .75s var(--ease), --accent-soft .75s var(--ease),
    --sweep-aus .75s var(--ease), --pille .75s var(--ease);
}

/* Reine Markierung fuer das Skript: der Bereich, in dem das Dokument dunkel
   wird. Traegt selbst keine Darstellung — nur eine messbare Ausdehnung. */
.nacht{ position:relative; }

html.ist-dunkel{
  /* Bewusst neutral: kein Gruenstich in den Flaechen. Gruen bleibt dem
     Akzent vorbehalten (Punkt vor den Labels, aktive Zustaende). */
  --bg:            #0A0A0A;
  --bg-2:          #121212;
  --surface:       #141414;
  --ink:           #F7F7F7;
  --ink-2:         rgba(247,247,247,.72);
  --ink-3:         rgba(247,247,247,.48);
  --line:          rgba(255,255,255,.13);
  --line-2:        rgba(255,255,255,.22);
  --accent:        #9BB07E;
  --accent-2:      #9BB07E;
  --accent-soft:   rgba(155,176,126,.15);
  --sweep-aus:     rgba(255,255,255,.22);
  --pille:         rgba(255,255,255,.06);
  --shadow-sm:     0 1px 2px rgba(0,0,0,.30);
  --shadow-lg:     0 1.875rem 4.375rem -1.875rem rgba(0,0,0,.65);
}
/* Der Hintergrund des Dokuments selbst liegt nicht auf einer Variablen, die
   ein Element traegt — deshalb hier ausdruecklich. */
html{ background:var(--bg); }

/* Die Konturzeile des Drifts und die Fuellkante des grossen Satzes sind mit
   festen Werten gezeichnet; sie brauchen ihr dunkles Gegenstueck. */
html.ist-dunkel .drift__row--kontur span{ -webkit-text-stroke-color:rgba(255,255,255,.34); }

/* Die Sprungleiste liegt ueber allem und muss den Grund mitnehmen. */
html.ist-dunkel .jump__inner{ background:rgba(13,13,13,.80); }

/* ==========================================================================
   26. DRIFT — zwei bildschirmfuellende Zeilen, die beim Scrollen gegen-
   laeufig wandern: die obere nach links, die untere nach rechts. Der
   Inhalt jeder Zeile steht dreifach im Markup, damit an den Raendern
   keine Luecke entsteht.
   ========================================================================== */
.drift{
  overflow:hidden; padding-block:clamp(3.75rem,8vw,8.75rem);
  /* Weiche Kanten: die Zeilen laufen aus, statt am Rand abgeschnitten zu wirken */
  -webkit-mask-image:linear-gradient(90deg, transparent 0, #000 5%, #000 95%, transparent 100%);
          mask-image:linear-gradient(90deg, transparent 0, #000 5%, #000 95%, transparent 100%);
}
.drift__kopf{
  display:flex; flex-wrap:wrap; justify-content:space-between; gap:1rem 2rem;
  padding-inline:var(--pad); margin-bottom:clamp(1.5rem,3vw,3.125rem);
}
.drift__row{
  display:flex; align-items:baseline; gap:clamp(1.25rem,2.6vw,3.375rem);
  white-space:nowrap; width:max-content; will-change:transform;
}
.drift__row + .drift__row{ margin-top:clamp(0.25rem,.6vw,0.875rem); }
.drift__row span{
  font-size:clamp(2.6rem,10vw,11rem); line-height:1.02;
  letter-spacing:-.055em; font-weight:500;
}
/* Die untere Zeile als Kontur. Enge Laufweite laesst die Buchstaben
   ineinanderlaufen — bei gefuellter Schrift faellt das nicht auf, bei einer
   Kontur kreuzen sich dann sichtbar die Striche. Deshalb hier weiter. */
.drift__row--kontur span{
  color:transparent;
  letter-spacing:.005em;
  -webkit-text-stroke:1.3px rgba(13,13,13,.34);
  paint-order:stroke fill;
}
@media (max-width:760px){
  .drift__row--kontur span{ -webkit-text-stroke-width:1px; }
}
@media (prefers-reduced-motion:reduce){
  .drift__row{ transform:none !important; }
}

/* ==========================================================================
   27. KACHEL — der Kasten der Unterseite „Für Schüler". Aufbau wie die
   Tafeln des Filmstreifens: Ordnungszahl oben, unten Pillen, Titel, Text
   und bei Bedarf ein Verweis. Heisst bewusst .kachel und nicht .tile —
   .tile ist die Bildkachel der Startseite (Abschnitt 16).
   ========================================================================== */
.kachel{
  position:relative; display:flex; flex-direction:column;
  min-height:clamp(17.5rem,23vw,25rem);
  padding:clamp(1.375rem,2.2vw,2.5rem);
  border-radius:var(--r-lg);
  /* Getoente Flaeche statt weisser Karte mit Rand und Schatten — wie die
     Kacheln bei Clay und Figma. Die Tiefe kommt allein aus dem Farbton,
     beim Ueberfahren wird die Flaeche einen Hauch dunkler statt zu schweben. */
  background:var(--bg-2);
  border:1px solid transparent;
  color:var(--ink);
  overflow:hidden; isolation:isolate;
  transition:background-color .5s var(--ease), opacity .5s var(--ease);
}
.kachel:hover{ background:color-mix(in oklab, var(--bg-2), var(--ink) 4.5%); }
/* Im Dunkelmodus traegt eine sehr leise Kante die Flaeche, wie bei Framer. */
html.ist-dunkel .kachel{ border-color:rgba(255,255,255,.06); }

.kachel__n{
  display:block; padding-bottom:clamp(2.5rem,5vw,5.625rem);
  font-size:var(--fs-xs); letter-spacing:.18em;
  font-weight:500; color:var(--ink-3); font-variant-numeric:tabular-nums;
}
.kachel__body{ margin-top:auto; }
/* Fusszeile am unteren Rand, davor die Haarlinie — wie in der Referenz. */
.kachel__foot{
  margin-top:clamp(1.25rem,2.2vw,2.125rem); padding-top:clamp(0.875rem,1.5vw,1.375rem);
  border-top:1px solid var(--line);
  display:flex; align-items:center; gap:1rem;
  font-size:var(--fs-xs); letter-spacing:.14em; text-transform:uppercase;
  color:var(--ink-3);
}
.kachel__wert{
  margin-left:auto; display:inline-flex; align-items:center; gap:.6em;
  color:var(--ink-2);
}
.kachel__wert--link{ color:var(--ink); }
.kachel__wert svg{ width:0.8125rem; height:0.8125rem; transition:transform .7s var(--ease); }
.kachel:hover .kachel__wert--link svg{ transform:rotate(360deg); }
.kachel__body .tags{ margin-bottom:clamp(0.875rem,1.5vw,1.375rem); }
.kachel h3{
  font-size:clamp(1.35rem,2.1vw,2.05rem); letter-spacing:-.03em; line-height:1.06;
}
.kachel p{
  margin-top:clamp(0.625rem,1vw,1rem); color:var(--ink-2);
  font-size:var(--fs-sm); line-height:1.55; max-width:46ch;
}

@media (max-width:900px){
  .kachel{ min-height:0; }
}

/* ==========================================================================
   28. WEGE — die beiden Bewerbungswege als Kachelpaar. Sie benutzen
   dieselbe Kachel wie das Mosaik, damit die Seite eine Kastensprache hat.
   ========================================================================== */
.wege{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--gap); }
@media (max-width:900px){ .wege{ grid-template-columns:1fr; } }

/* ==========================================================================
   29. FAKTEN — schmale Leiste mit den harten Angaben, wie das Schild neben
   einem Ausstellungsstueck.
   ========================================================================== */
.fakten{
  display:grid; grid-template-columns:repeat(4,minmax(0,1fr));
  margin-top:clamp(1.75rem,3.4vw,3.75rem); border-top:1px solid var(--line);
}
.fakt{
  padding:clamp(1.125rem,2vw,2.125rem) clamp(0.875rem,1.6vw,1.75rem); border-left:1px solid var(--line);
  transition:background .45s var(--ease), opacity .5s var(--ease);
}
.fakt:hover{ background:var(--bg-2); }
.fakt:first-child{ border-left:0; padding-left:0; }
.fakt__k{ font-size:var(--fs-xs); letter-spacing:.15em; text-transform:uppercase; color:var(--ink-3); }
.fakt__v{ margin-top:.55rem; font-size:clamp(1.05rem,1.6vw,1.5rem); letter-spacing:-.025em; line-height:1.15; }
@media (max-width:900px){
  .fakten{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .fakt{ border-left:0; border-top:1px solid var(--line); padding-inline:0; }
  .fakt:nth-child(2n){ padding-left:clamp(0.875rem,4vw,1.75rem); border-left:1px solid var(--line); }
}

/* ==========================================================================
   30. NUMMERIERTES AKKORDEON — Ordnungszahl vor jeder Frage.
   ========================================================================== */
.acc--nummern{ counter-reset:faq; }
.acc--nummern .acc__item{ counter-increment:faq; }
.acc--nummern .acc__btn::before{
  content:counter(faq, decimal-leading-zero);
  flex:none; width:3em;
  font-size:var(--fs-xs); letter-spacing:.14em; font-weight:500;
  color:var(--ink-3);
}
.acc--nummern .acc__btn{ justify-content:flex-start; gap:clamp(0.75rem,1.6vw,1.75rem); }
.acc--nummern .acc__ico{ margin-left:auto; }

/* ==========================================================================
   31. BUEHNE — bildfuellender Auftritt mitten auf der Seite: ein Bild ueber
   die volle Breite mit einer Zeile darauf, der Text folgt darunter.
   ========================================================================== */
.buehne{
  position:relative; overflow:hidden; isolation:isolate;
  height:clamp(27.5rem,88svh,62.5rem);
  background:var(--bg-2);
}
.buehne img{
  position:absolute; inset:0; width:100%; height:118%;
  object-fit:cover; will-change:transform;
}
.buehne::after{
  content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(180deg, rgba(13,13,13,.44) 0%, rgba(13,13,13,.16) 45%, rgba(13,13,13,.60) 100%);
}
/* Kein Grid auf dem Absatz selbst: dessen Textteile wuerden sonst zu
   eigenen Rasterzellen und damit zu eigenen Zeilen. Zentriert wird der
   Block, umgebrochen wird darin ganz normal. */
.buehne__zeile{
  position:absolute; z-index:2; left:50%; top:50%;
  transform:translate(-50%,-50%);
  width:min(20ch, calc(100% - 2 * var(--pad)));
  text-align:center;
  font-size:clamp(2.3rem,6.6vw,6.6rem); line-height:1.04;
  letter-spacing:-.04em; font-weight:500;
  /* Fest hell: die Zeile liegt immer auf einem abgedunkelten Bild und
     darf im Dunkelmodus nicht mitkippen. */
  color:#F7F7F7;
}

/* Der Textblock unter der Buehne: Ueberschrift links, Erlaeuterung rechts. */
.nachbild{
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(1.5rem,4vw,5.625rem); align-items:start;
}
.nachbild h2{ max-width:16ch; }
.nachbild p{ color:var(--ink-2); max-width:52ch; }
@media (max-width:900px){
  .nachbild{ grid-template-columns:1fr; gap:clamp(1rem,3vw,1.625rem); }
}

/* Hervorgehobene Kachel — fuer den Punkt, auf den es besonders ankommt. */
.kachel--betont{ background:var(--accent-soft); border-color:transparent; }
.kachel--betont:hover{ background:color-mix(in oklab, var(--accent-soft), var(--ink) 5%); }
.kachel--betont .kachel__foot{ border-top-color:rgba(13,13,13,.12); }
html.ist-dunkel .kachel--betont .kachel__foot{ border-top-color:rgba(255,255,255,.16); }

/* ==========================================================================
   32. FORMULARKARTE — das Anfrageformular in einer runden Flaeche statt frei
   auf dem dunklen Grund. Eingabefelder als Pillen, passend zu den Knoepfen.
   ========================================================================== */
.formkarte{
  padding:clamp(1.375rem,2.8vw,3rem);
  border-radius:var(--r-xl);
  background:var(--bg);
}
/* Felder als leise getoente Flaechen ohne Rand (wie bei Figma) */
.formkarte .field input, .formkarte .field textarea{ background:var(--bg-2); border-color:transparent; }
.formkarte .field input:focus, .formkarte .field textarea:focus{ background:var(--bg); border-color:var(--ink-3); box-shadow:none; }
.sec--dark .formkarte{ background:rgba(247,247,247,.04); border:1px solid var(--line-dark); }
.sec--dark .formkarte .field input, .sec--dark .formkarte .field textarea{ background:rgba(247,247,247,.05); border-color:var(--line-dark); }
.sec--dark .formkarte .field input:focus, .sec--dark .formkarte .field textarea:focus{ background:rgba(247,247,247,.08); border-color:rgba(247,247,247,.4); }
.formkarte .field input{ border-radius:var(--r-pill); padding:.95em 1.4em; }
.formkarte .field textarea{ border-radius:var(--r-lg); padding:1.05em 1.4em; }
.formkarte .field label{ padding-left:.2em; }
/* Das Feld ist eine Flex-Spalte und wuerde den Knopf auf volle Breite
   ziehen — er soll aber so breit sein wie sein Inhalt. */
.formkarte .field > .btn{ align-self:flex-start; }
@media (max-width:760px){ .formkarte .form{ grid-template-columns:1fr; } }

/* ==========================================================================
   33. BRIEF — die Gruendungsgeschichte als Brief der Gruender: links ein
   grosser Satz in der Serifenschrift, der beim Lesen stehen bleibt, rechts
   der Text, am Ende die Unterschrift hinter einer Haarlinie.
   ========================================================================== */
.brief{
  display:grid; grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);
  gap:clamp(1.75rem,5vw,6.875rem); align-items:start;
}
.brief__zitat{
  position:sticky; top:calc(var(--nav-h) + 3rem);
  /* Gross gesetzt in der Hausschrift, zweifarbig wie der Einstieg: die
     Aussage in voller Farbe, die Fortsetzung zurueckgenommen. */
  font-weight:500;
  font-size:clamp(2rem,3.9vw,3.9rem); line-height:1.06; letter-spacing:-.04em;
  color:var(--ink); max-width:13ch;
}
/* Ein kurzer Strich statt eines Anfuehrungszeichens — im Deutschen saesse
   das untere Zeichen sonst frei ueber der Zeile. */
.brief__zitat::before{
  content:""; display:block; width:3.5rem; height:2px;
  background:var(--accent-2); margin-bottom:clamp(1.125rem,2vw,1.875rem);
}
.brief__text p{ color:var(--ink-2); max-width:58ch; }
.brief__text p + p{ margin-top:1.1em; }
.brief__text p:first-child{
  font-size:var(--fs-lead); line-height:1.45; letter-spacing:-.015em; color:var(--ink);
}
.brief__gruss{
  margin-top:clamp(2rem,3.6vw,3.5rem); padding-top:clamp(1.125rem,2vw,1.75rem);
  border-top:1px solid var(--line); max-width:58ch;
  display:flex; flex-wrap:wrap; align-items:baseline; justify-content:space-between; gap:.6rem 2rem;
}
.brief__namen{
  font-weight:500; font-size:clamp(1.05rem,1.3vw,1.25rem); letter-spacing:-.02em; color:var(--ink);
}
.brief__ort{ font-size:var(--fs-xs); letter-spacing:.14em; text-transform:uppercase; color:var(--ink-3); }
@media (max-width:900px){
  .brief{ grid-template-columns:1fr; }
  .brief__zitat{ position:static; max-width:none; }
}

/* ==========================================================================
   34. GRUENDER — die beiden Gruender als Doppelseite: grosses Portraet,
   daneben Name, Zustaendigkeit und Werdegang. Der zweite Eintrag ist
   gespiegelt, damit die Seite nicht in einer Spalte haengen bleibt.
   ========================================================================== */
.gruender{ display:grid; gap:clamp(4rem,9vw,10rem); }
.gruender__eintrag{
  display:grid; grid-template-columns:minmax(0,5fr) minmax(0,7fr);
  gap:clamp(1.75rem,5vw,6.875rem); align-items:end;
}
.gruender__eintrag--gespiegelt{ grid-template-columns:minmax(0,7fr) minmax(0,5fr); }
.gruender__eintrag--gespiegelt .gruender__bild{ order:2; }
.gruender__bild{
  position:relative; overflow:hidden; isolation:isolate;
  border-radius:var(--r-xl); aspect-ratio:4/5; background:var(--bg-2);
}
.gruender__bild img{
  width:100%; height:100%; object-fit:cover;
  filter:grayscale(1) contrast(1.03);
  transition:filter .9s var(--ease), transform 1.4s var(--ease);
}
.gruender__eintrag:hover .gruender__bild img{ filter:grayscale(0); transform:scale(1.03); }
.gruender__name{
  margin-top:clamp(1rem,1.8vw,1.625rem);
  font-size:clamp(2.4rem,5.4vw,5.4rem); line-height:.98; letter-spacing:-.045em; font-weight:500;
}
.gruender__aufgabe{
  margin-top:clamp(0.875rem,1.6vw,1.5rem);
  font-weight:400; font-size:clamp(1.15rem,1.6vw,1.5rem); line-height:1.3; letter-spacing:-.02em; color:var(--ink-2);
}
.gruender__text{ margin-top:clamp(1rem,1.8vw,1.625rem); color:var(--ink-2); max-width:52ch; }
.gruender__fuss{
  margin-top:clamp(1.5rem,2.8vw,2.75rem); padding-top:clamp(0.875rem,1.5vw,1.375rem);
  border-top:1px solid var(--line); max-width:52ch;
  display:flex; flex-wrap:wrap; justify-content:space-between; gap:.6rem 2rem;
  font-size:var(--fs-xs); letter-spacing:.14em; text-transform:uppercase; color:var(--ink-3);
}
@media (max-width:900px){
  .gruender__eintrag, .gruender__eintrag--gespiegelt{ grid-template-columns:1fr; align-items:start; }
  .gruender__eintrag--gespiegelt .gruender__bild{ order:0; }
  .gruender__bild{ max-width:32.5rem; }
}

/* Beirat: Rolle als Kapitaelchen, der Text hinter einer Haarlinie, der
   offene Platz als eigene gestrichelte Karte. */
.person__role{ font-size:var(--fs-xs); letter-spacing:.14em; text-transform:uppercase; margin-top:.5rem; }
.person__text{ margin-top:1rem; padding-top:1rem; border-top:1px solid var(--line); }
.person--offen .person__media{
  display:grid; place-items:center;
  background:transparent; border:1px dashed var(--line-2);
}
.person--offen .person__media span{
  padding:1.5rem; text-align:center; font-size:var(--fs-sm); color:var(--ink-3);
}
.person--offen .link-arrow{ margin-top:1rem; }

/* Der Beirat steht in drei ruhigen Spalten mit quadratischen Portraets —
   die Gruender haben ihre eigene Doppelseite, hier soll nichts mit ihr
   konkurrieren. Diese Regel ersetzt die Breitbild-Regel aus Abschnitt 24
   (Spuren ab 480 px), die fuer zwei grosse Portraets gedacht war und drei
   Karten in zwei riesige Spalten mit Umbruch zwang. */
.people{ grid-template-columns:repeat(3,minmax(0,1fr)); max-width:100rem; }
.person__media{ aspect-ratio:1/1; }
@media (max-width:900px){ .people{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:560px){ .people{ grid-template-columns:1fr; } }

/* ==========================================================================
   35. GRUNDSAETZE — vier Saetze, auf die sich der Verein festlegt. Gross
   gesetzt und durch Haarlinien getrennt; die Farben kommen aus den
   Variablen, damit der Block im Dunkelmodus der Seite mitkippt.
   ========================================================================== */
.grundsaetze{
  display:grid; grid-template-columns:repeat(2,minmax(0,1fr));
  border-top:1px solid var(--line);
}
.grundsatz{
  padding:clamp(1.75rem,3.4vw,4rem) clamp(0px,2vw,2.5rem) clamp(1.75rem,3.4vw,4rem) 0;
  border-bottom:1px solid var(--line);
}
.grundsatz:nth-child(2n){ padding-left:clamp(1.25rem,3.4vw,4rem); border-left:1px solid var(--line); }
.grundsatz__k{
  display:flex; gap:1rem;
  font-size:var(--fs-xs); letter-spacing:.14em; text-transform:uppercase; color:var(--ink-3);
}
.grundsatz__satz{
  margin-top:clamp(1.125rem,2.2vw,2.125rem);
  font-size:clamp(1.7rem,3.3vw,3.1rem); line-height:1.04; letter-spacing:-.035em; font-weight:500;
  max-width:15ch;
}
.grundsatz__satz + p{ margin-top:clamp(0.75rem,1.3vw,1.25rem); color:var(--ink-2); max-width:44ch; }
@media (max-width:760px){
  .grundsaetze{ grid-template-columns:1fr; }
  .grundsatz, .grundsatz:nth-child(2n){ padding-left:0; padding-right:0; border-left:0; }
}

/* ==========================================================================
   36. DOKUMENTE — die Unterlagen als Kacheln statt als Liste. Was noch
   nicht vorliegt, steht gestrichelt und ist kein Verweis.
   ========================================================================== */
.dokumente{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--gap); }
.dok{
  position:relative; display:flex; flex-direction:column;
  min-height:clamp(12.5rem,16vw,16.25rem);
  padding:clamp(1.25rem,2vw,2rem);
  border-radius:var(--r-lg);
  background:var(--bg-2); border:1px solid transparent;
  color:var(--ink);
  transition:background-color .5s var(--ease), opacity .5s var(--ease);
}
a.dok:hover{ background:color-mix(in oklab, var(--bg-2), var(--ink) 4.5%); }
html.ist-dunkel .dok:not(.dok--bald){ border-color:rgba(255,255,255,.06); }
.dok__kopf{ display:flex; align-items:center; justify-content:space-between; gap:1rem; }
.dok__pfeil{
  width:2.5rem; height:2.5rem; flex:none; border-radius:50%;
  display:grid; place-items:center; background:var(--bg); border:1px solid transparent;
  transition:background .45s var(--ease), color .45s var(--ease), border-color .45s var(--ease);
}
.dok__pfeil svg{ width:0.875rem; height:0.875rem; transition:transform .7s var(--ease); }
a.dok:hover .dok__pfeil{ background:var(--ink); color:var(--bg); border-color:var(--ink); }
a.dok:hover .dok__pfeil svg{ transform:rotate(360deg); }
.dok__titel{
  margin-top:auto; padding-top:clamp(1.75rem,3vw,3rem);
  font-size:clamp(1.2rem,1.6vw,1.5rem); letter-spacing:-.025em; line-height:1.15;
}
.dok__text{ margin-top:.45rem; font-size:var(--fs-sm); color:var(--ink-2); }
.dok--bald{ background:transparent; border-color:var(--line-2); border-style:dashed; }
.dok--bald .dok__titel, .dok--bald .dok__text{ color:var(--ink-3); }
@media (max-width:1024px){ .dokumente{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:640px){ .dokumente{ grid-template-columns:1fr; } }

/* ==========================================================================
   37. FEINSCHLIFF NACH DEN REFERENZEN
   Aus den sieben Designsystemen im Ordner referenzen/ uebernommen und neu
   gebaut, nicht kopiert:
   - Pillen in getoenten Flaechen als ausgefuellte Chips (Clay)
   - Text-Roll in Navigation, Sprungleiste und Fusszeile (Cuberto, Clay)
   - Passepartout: der Rahmen schrumpft, das Bild waechst (Cuberto)
   - Nachbarn treten beim Ueberfahren zurueck (Polestar, Framer, pechschwarz)
   ========================================================================== */
.kachel .tag, .dok .tag{ background:transparent; border-color:var(--line-2); }
/* Auf getoenten Abschnitten kehrt sich das Verhaeltnis um: helle Flaeche. */
.sec--tone .kachel, .sec--tone .dok, .sec--tone .step,
.sec--tone .card:not(.card--dark):not(.card--overlay){ background:var(--bg); }

/* Text-Roll: das Skript legt das Wort in .rolle. Die Kopie darunter ist ein
   Textschatten und wird deshalb von Screenreadern nicht doppelt gelesen.
   Hoehe gleich Zeilenhoehe, damit sich die Knoepfe nicht veraendern. */
.rolle{ --lh:1.55em; display:inline-block; overflow:hidden; vertical-align:top; height:var(--lh); line-height:var(--lh); }
.rolle > span{ display:block; text-shadow:0 var(--lh) currentColor; transition:transform .65s var(--ease); }

.person, .ticker__item, .grundsatz{ transition:opacity .5s var(--ease), filter .6s var(--ease); }

@media (any-hover:hover){
  a:hover > .rolle > span{ transform:translateY(calc(-1 * var(--lh))); }

  .coll__media, .person__media, .gruender__bild{ transition:transform 1.2s var(--ease); }
  .coll:hover .coll__media, .person:hover .person__media,
  .gruender__eintrag:hover .gruender__bild{ transform:scale(.985); }

  .nav__links:has(.nav__link:hover) .nav__link:not(:hover){ opacity:.42; }
  .footer__col ul:has(a:hover) a:not(:hover){ opacity:.4; }
  .wege:has(.kachel:hover) .kachel:not(:hover),
  .mosaic:has(.kachel:hover) .kachel:not(:hover),
  .bento:has(> .kachel:hover) > .kachel:not(:hover),
  .dokumente:has(a.dok:hover) .dok:not(:hover),
  .people:has(.person:hover) .person:not(:hover),
  .fakten:has(.fakt:hover) .fakt:not(:hover),
  .ticker__inner:has(.ticker__item:hover) .ticker__item:not(:hover),
  .dl-list:has(a.dl:hover) a.dl:not(:hover){ opacity:.5; }
  .acc:has(.acc__btn:hover) .acc__btn:not(:hover){ opacity:.45; }
  /* Im Nachtmodus der Ueber-uns-Seite: die uebrigen Grundsaetze werden
     zusaetzlich unscharf — der Fokus-Effekt von Framer. */
  .grundsaetze:has(.grundsatz:hover) .grundsatz:not(:hover){ opacity:.38; filter:blur(1.5px); }
}

/* ==========================================================================
   38. ZWEITE RUNDE — Einstieg der Unterseiten, Mosaik, Formular, Linien
   ========================================================================== */

/* Einstieg der Unterseiten: dieselben Bausteine wie auf der Startseite, aber
   eine eigene Anordnung — die Aussage laeuft ueber zwei Drittel der Breite,
   darunter stehen hinter einer Haarlinie Label, Erlaeuterung und Knopf in
   einer Zeile (Aufbau wie bei Polestar und Figma). */
.lede--seite{ display:block; }
.lede--seite .lede__lead{
  font-size:clamp(1.55rem,3vw,2.9rem); line-height:1.14; letter-spacing:-.032em;
  max-width:34ch;
}
.lede--seite .lede__fuss{
  display:grid; grid-template-columns:minmax(0,.72fr) minmax(0,1fr) auto;
  gap:clamp(1.25rem,4vw,5rem); align-items:start;
  margin-top:clamp(2.25rem,4.6vw,4.75rem); padding-top:clamp(1.25rem,2.2vw,2rem);
  border-top:1px solid var(--line);
}
.lede--seite .lede__text{ margin-top:0; max-width:58ch; }
.lede--seite .btn-row{ margin-top:0; }
@media (max-width:900px){
  .lede--seite .lede__fuss{ grid-template-columns:1fr; gap:clamp(0.875rem,3vw,1.375rem); }
}

/* Mosaik (Fuer Schueler): gleiche Anordnung, insgesamt kleiner */
.mosaic .kachel{ min-height:clamp(13.125rem,15.5vw,17.5rem); padding:clamp(1.25rem,1.8vw,1.875rem); }
.mosaic .kachel__n{ padding-bottom:clamp(1.125rem,2.2vw,2.375rem); }
.mosaic .kachel h3{ font-size:clamp(1.15rem,1.55vw,1.55rem); }
.mosaic .kachel p{ font-size:.9rem; }
.mosaic .kachel__body .tags{ margin-bottom:clamp(0.625rem,1vw,0.875rem); }
.mosaic .kachel__foot{ margin-top:clamp(1rem,1.6vw,1.5rem); padding-top:clamp(0.75rem,1.2vw,1rem); }

/* Verweis auf den Katalogbildern: dieselbe Pille wie jeder helle Knopf */
.coll__go{
  height:2.875rem; padding:0 0.4375rem 0 1.45em; gap:.85em; border-radius:var(--r-pill);
  background:var(--bg); color:var(--ink); font-size:.9rem; letter-spacing:-.01em; white-space:nowrap;
  transition:background .45s var(--ease), color .45s var(--ease);
}
.coll__go span{ width:2rem; height:2rem; border:0; background:var(--ink); color:var(--bg); }
.coll__go span svg{ width:.85em; height:.85em; }
.coll:hover .coll__go{ background:var(--accent); color:var(--on-dark); }
.coll:hover .coll__go span{ background:var(--bg); color:var(--accent); }

/* Zeichnende Linien auch an der Unterkante (FAQ, Zeilen, Listen) */
.js .linie-unten{ position:relative; border-bottom-color:transparent !important; }
.js .linie-unten::after{
  content:""; position:absolute; left:0; right:0; bottom:-1px; height:1px; pointer-events:none;
  background:var(--line); transform:scaleX(0); transform-origin:left center;
  transition:transform 1.4s var(--ease-slick) var(--ld,0ms);
}
.js .linie-unten.is-gezogen::after{ transform:none; }
.sec--dark .linie-unten::after{ background:var(--line-dark); }
/* Die gruene Hover-Linie der Zeilen liegt ueber der gezeichneten */
.js .row.linie-unten::before{ z-index:1; }

/* Ueber uns: Fortsetzung des grossen Satzes zurueckgenommen */
.brief__zitat .dim{ color:var(--ink-3); }

/* Formular: Auswahl als Pillen, Hinweise, Absendezeile */
.field__label{ font-size:var(--fs-sm); color:var(--ink-2); letter-spacing:-.01em; }
.field__opt{ margin-left:.35em; color:var(--ink-3); }
.wahl{ display:flex; flex-wrap:wrap; gap:.5rem; }
.wahl label{ position:relative; cursor:pointer; }
.wahl input{ position:absolute; inset:0; margin:0; opacity:0; cursor:pointer; }
.wahl span{
  display:inline-block; padding:.66em 1.15em; border-radius:var(--r-pill);
  border:1px solid var(--line-2); font-size:var(--fs-sm); color:var(--ink-2);
  transition:background .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease);
}
.wahl label:hover span{ border-color:var(--ink-3); color:var(--ink); }
.wahl input:checked + span{ background:var(--ink); border-color:var(--ink); color:var(--bg); }
.wahl input:focus-visible + span{ outline:2px solid var(--accent-2); outline-offset:2px; }
.form__senden{ flex-direction:row; flex-wrap:wrap; align-items:center; gap:1rem 1.6rem; }
.form__senden .form-msg{ flex:1 1 16.25rem; margin:0; }
.form-msg[data-art="fehler"]{ color:#B4532F; }
.sec--dark .form-msg{ color:#9BB07E; }
.sec--dark .form-msg[data-art="fehler"]{ color:#E3A084; }
.form.is-sendet button[type=submit]{ opacity:.6; pointer-events:none; }
/* Falle fuer Formular-Roboter: fuer Menschen unsichtbar */
.honig{ position:absolute !important; left:-624.9375rem !important; width:1px; height:1px; opacity:0; }

/* Kontakt (Fuer Foerderer) */
.kontakt__wege{ margin:clamp(1.75rem,3.4vw,3.25rem) 0 0; border-top:1px solid var(--line); max-width:46ch; }
.kontakt__wege > div{
  display:flex; flex-wrap:wrap; justify-content:space-between; gap:.4rem 1rem;
  padding:clamp(0.875rem,1.4vw,1.25rem) 0; border-bottom:1px solid var(--line);
}
.kontakt__wege dt{ font-size:var(--fs-xs); letter-spacing:.14em; text-transform:uppercase; color:var(--ink-3); }
.kontakt__wege dd{ margin:0; font-size:var(--fs-sm); }
.kontakt__wege a{ text-decoration:underline; text-underline-offset:0.1875rem; text-decoration-color:var(--line-2); transition:text-decoration-color .3s; }
.kontakt__wege a:hover{ text-decoration-color:currentColor; }
/* Die Feldregel der Formularkarte (Pille, getoent, volle Breite) darf das
   Kontrollkaestchen nicht treffen — es bleibt ein kleines Quadrat. */
.formkarte .field .check input{ width:1.25rem; height:1.25rem; padding:0; border-radius:0.375rem; background:var(--bg); border-color:var(--line-2); }
.formkarte .field .check input:checked{ background:var(--ink); border-color:var(--ink); }
.sec--dark .formkarte .field .check input{ background:transparent; border-color:rgba(247,247,247,.36); }
.sec--dark .formkarte .field .check input:checked{ background:var(--on-dark); border-color:var(--on-dark); }

/* ==========================================================================
   39. BILDHERO — "Ueber uns": ein Bild ueber den ganzen Schirm, in der Mitte
   ein kurzer Satz in der Serifenschrift, das hervorgehobene Wort kursiv
   (Aufbau nach der Referenz Double Play). Am Fuss Status und Verweis.
   ========================================================================== */
.bildhero{
  position:relative; isolation:isolate; overflow:hidden;
  height:100svh; min-height:37.5rem;
  display:grid; place-items:center; padding-inline:var(--pad);
  color:#F7F7F7; background:#0D0D0D;
  border-radius:0 0 var(--r-xl) var(--r-xl);
}
.bildhero__bg{ position:absolute; z-index:-2; inset:0; overflow:hidden; }
.bildhero__bg img{ width:100%; height:118%; object-fit:cover; will-change:transform; }
/* Leise Abdunklung: oben fuer die Navigation, in der Mitte fuer den Satz,
   unten fuer die Fusszeile — das Bild selbst bleibt sichtbar. */
.bildhero::before{
  content:""; position:absolute; z-index:-1; inset:0; pointer-events:none;
  background:
    radial-gradient(55% 45% at 50% 52%, rgba(0,0,0,.32), transparent 72%),
    linear-gradient(180deg, rgba(0,0,0,.48) 0%, rgba(0,0,0,.06) 26%, rgba(0,0,0,.08) 64%, rgba(0,0,0,.58) 100%);
}
.bildhero__titel{
  margin:0; text-align:center; max-width:none;
  font-family:"Instrument Serif","Iowan Old Style",Georgia,serif;
  font-weight:400; font-style:normal;
  font-size:clamp(3.2rem, 7.4vw, 7.4rem); line-height:.9; letter-spacing:-.025em;
}
.bildhero__titel .serif{ font-style:italic; letter-spacing:-.03em; }
/* Die Zeilenmaske darf weder Umlautpunkte noch kursive Ueberhaenge kappen */
.bildhero__titel .line{ padding-top:.14em; margin-top:-.14em; }
.bildhero__fuss{
  position:absolute; left:0; right:0; bottom:0;
  padding:0 var(--pad) clamp(1.4rem, 3vw, 2.75rem);
  display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:.8rem 2rem;
  font-size:var(--fs-sm); color:rgba(247,247,247,.8);
}
.bildhero__fuss .scroll-hint{ color:rgba(247,247,247,.72); }

/* ==========================================================================
   40. DIE SEITE WAECHST IM GANZEN
   Saemtliche Masse stehen in rem. Bis 1440 px Fensterbreite ist 1 rem =
   16 px — dort sieht alles aus wie gestaltet. Darueber waechst die
   Grundgroesse mit: bis 1920 px im vollen Verhaeltnis, danach halb so
   schnell, ab 25 px nicht mehr (etwa 2560 px). Schrift, Abstaende,
   Textspalten, Knoepfe und Radien wachsen dadurch gemeinsam, und die
   Komposition bleibt auf grossen Schirmen dieselbe — statt dass kleine
   Textbloecke in einer riesigen Flaeche stehen. Oberhalb von 2560 px haelt
   --wrap den Inhalt zusammen.
   ========================================================================== */
@media (min-width:1441px){
  html{ font-size:min(calc(100vw / 90), calc(21.333px + (100vw - 1920px) / 180), 25px); }
}

/* ==========================================================================
   41. GRENZEN FUER BREITE, ABER NIEDRIGE FENSTER UND KLEINE HANDYS
   ========================================================================== */
/* Der Startseiten- und Programm-Hero hat eine feste Hoehe (100svh). Waechst
   die Seite auf breiten Schirmen mit, darf der Inhalt trotzdem nicht aus
   dieser Hoehe laufen — Titel und Einleitung richten sich deshalb auch
   nach der Fensterhoehe. Bei 1440 x 900 greift keine der beiden Grenzen. */
.hero--stage .hero__title{ font-size:min(var(--fs-display), 12.5svh); }
.hero--stage .hero__sub{ font-size:min(var(--fs-lead), 2.9svh); }

/* Ausgeglichener Umbruch: kein einzelnes Wort allein in der letzten Zeile */
.brief__zitat, .bildhero__titel{ text-wrap:balance; }

/* Auf Handys hat die Leiste nur Platz fuer Marke und Menue — der Knopf
   steht im Menue und auf jeder Seite ohnehin noch einmal. */
@media (max-width:560px){
  .nav__actions .btn{ display:none; }
}

/* Startseiten- und Programm-Hero: der Inhalt steht unten im Fluss statt
   absolut positioniert. Der Rahmen ist mindestens fensterhoch; nur wenn
   der Inhalt auf breiten, aber niedrigen Fenstern mehr Platz braucht, wird
   er hoeher. Unter 861 px gilt der eigene Handy-Aufbau aus Abschnitt 13. */
@media (min-width:861px){
  .hero__frame{ display:flex; flex-direction:column; height:auto; min-height:max(100svh, 37.5rem); }
  .hero__stage{ position:relative; inset:auto; margin-top:auto; padding-top:clamp(1.75rem, 3.4vw, 3.25rem); }
}

/* ==========================================================================
   42. VIERTE RUNDE
   ========================================================================== */
/* Der Fliesstext in den Heros tritt zurueck — die Ueberschrift fuehrt */
.hero--stage .hero__sub, .subhead__sub{ font-size:min(clamp(1rem, 1.2vw, 1.2rem), 2.4svh); line-height:1.5; }

/* Ueber uns: Titel in der Hausschrift, das mittlere Wort wie auf den
   anderen Seiten kursiv in der Serifenschrift */
.bildhero__titel{
  font-family:inherit; font-weight:500;
  font-size:clamp(2.6rem, 5.8vw, 5.8rem); line-height:1; letter-spacing:-.04em;
}
.bildhero__titel .serif{ font-family:"Instrument Serif","Iowan Old Style",Georgia,serif; font-weight:400; letter-spacing:-.02em; }

/* Buehne: Luft fuer die Unterlaengen im Laufband (g, p) */
.stage__band-inner span{ padding-block:.04em .2em; }

/* ==========================================================================
   43. HANDY
   Nach dem Vorbild der Referenzen wird fuer kleine Schirme nichts
   abgeschaltet, sondern umgebaut: Reihen, die am Desktop nebeneinander
   stehen, werden zu Wischleisten mit Standanzeige statt zu endlosen
   Stapeln; Kennzahlen, Dokumente und Fusszeile bleiben zweispaltig; die
   Buehne der Startseite laeuft auch hier scrollgetrieben.
   ========================================================================== */

/* Keine grauen Tipp-Flaechen auf iOS und Android */
html{ -webkit-tap-highlight-color:transparent; }

/* Kennzahlen zweispaltig — die rechte Spalte bekommt ihre Trennlinie */
@media (max-width:1024px){
  .ticker__item:nth-child(2n){ padding-left:clamp(1rem,4.5vw,2rem); border-left:1px solid var(--line); }
}

/* Startseiten- und Programm-Hero: der Inhalt bestimmt die Hoehe, mindestens
   fensterhoch — so kann die Zeile ueber dem Titel nie unter die Navigation
   laufen. Die Abdunklung reicht weiter nach oben, weil der Text hier mehr
   als die untere Bildhaelfte fuellt. */
@media (max-width:860px){
  .hero__frame{ height:auto; min-height:100svh; padding-top:calc(var(--nav-h) + 1.75rem); }
  .hero__frame::after{
    background:
      linear-gradient(180deg, rgba(13,13,13,.66) 0%, rgba(13,13,13,.30) 24%, rgba(13,13,13,.46) 50%, rgba(13,13,13,.90) 100%),
      radial-gradient(120% 80% at 78% 18%, rgba(155,176,126,.14), transparent 60%);
  }
}

/* Zwei Knoepfe untereinander gleich breit — der Pfeil sitzt dann in beiden
   am selben Rand, statt eine Treppe zu bilden. */
@media (max-width:560px){
  .hero .btn-row, .banner .btn-row{ display:grid; grid-template-columns:max-content; }
  .banner .btn-row{ justify-content:center; }
  .hero .btn-row .btn, .banner .btn-row .btn{ justify-content:space-between; }
}

/* Wischleisten: Kriterien (Fuer Schueler) und Beirat (Ueber uns). Der
   Filmstreifen der Startseite steht in Abschnitt 15. Die Leiste reicht bis
   an den Bildschirmrand, eingerastet wird am Satzspiegel. */
@media (max-width:900px){
  .mosaic{
    display:flex; gap:.75rem;
    overflow-x:auto; overscroll-behavior-x:contain; scroll-snap-type:x mandatory;
    margin-inline:calc(-1 * var(--pad)); padding-inline:var(--pad); scroll-padding-inline:var(--pad);
    scrollbar-width:none;
  }
  .mosaic > *{ flex:0 0 min(80%, 22rem); scroll-snap-align:start; }
  .mosaic .kachel{ min-height:18rem; }
}
@media (max-width:760px){
  .people{
    display:flex; max-width:none; gap:.875rem;
    overflow-x:auto; overscroll-behavior-x:contain; scroll-snap-type:x mandatory;
    margin-inline:calc(-1 * var(--pad)); padding-inline:var(--pad); scroll-padding-inline:var(--pad);
    scrollbar-width:none;
  }
  .people > *{ flex:0 0 min(78%, 20rem); scroll-snap-align:start; }
}
.mosaic::-webkit-scrollbar, .people::-webkit-scrollbar{ display:none; }

/* Die Tafel, die vorn steht, fuehrt; die Nachbarn treten zurueck — wie das
   Abdunkeln beim Ueberfahren am Desktop. Erst nach dem Einblenden, damit
   das Einblenden selbst nicht uebersprungen wird. */
.mosaic.is-wisch > .kachel.is-in:not(.is-vorn),
.people.is-wisch > .person.is-in:not(.is-vorn){ opacity:.5; }

/* Standanzeige unter jeder Wischleiste: Nummer, mitlaufender Balken, Anzahl */
.wisch-stand{
  display:none; align-items:center; gap:.875rem; margin-top:1.125rem;
  font-size:var(--fs-xs); letter-spacing:.14em; font-variant-numeric:tabular-nums; color:var(--ink-3);
}
.is-wisch + .wisch-stand{ display:flex; }
.wisch-stand__n{ color:var(--ink); }
.wisch-stand__spur{ position:relative; flex:1; height:1px; background:var(--line-2); overflow:hidden; }
.wisch-stand__spur i{
  position:absolute; top:0; bottom:0; left:0; width:33%; background:var(--ink);
  transition:transform .45s var(--ease), width .45s var(--ease);
}

/* Dokumente: zwei kompakte Spalten statt sechs hoher Karten untereinander */
@media (max-width:640px){
  .dokumente{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:.625rem; }
  .dok{ min-height:10.75rem; padding:1rem 1rem 1.125rem; }
  .dok__pfeil{ width:2.125rem; height:2.125rem; }
  .dok__titel{ padding-top:1.5rem; font-size:1.05rem; }
  .dok__text{ font-size:.8rem; line-height:1.4; }
}

/* Bild neben viel Text (Lehrkraefte): untereinander ein ruhiges Querformat
   statt eines bildschirmhohen Hochformats. */
@media (max-width:900px){
  .coll--fuellt .coll__media{ aspect-ratio:4/3; height:auto; min-height:0; align-self:auto; }
  .coll--fuellt .coll__media img{ object-position:50% 40%; }
}

/* Buehne auf dem Handy: dieselbe Sequenz, nur auf das Hochformat gesetzt.
   Die Hoehe folgt dem grossen Viewport (lvh), damit unten kein heller
   Streifen bleibt, wenn die Adressleiste einfaehrt. */
@media (max-width:900px){
  .stage{ height:300vh; }
  .stage__sticky{ height:100vh; height:100lvh; }
  .stage__band-inner span{ font-size:clamp(3.25rem, 17vw, 7rem); }
  .stage__top{ top:calc(var(--nav-h) + 1.75rem); }
  .stage__logos{
    display:grid; grid-template-columns:repeat(2, max-content); justify-content:center;
    gap:.75rem 1.5rem; bottom:clamp(5.5rem, 14vh, 7.5rem);
  }
  .stage__logos svg{ height:2.25rem; }
  .stage__quote blockquote{ font-size:clamp(1.3rem, 5.6vw, 1.9rem); }
  .stage__rule{ margin-bottom:1.75rem; }
  .stage__quote figcaption{ margin-top:1.5rem; }
  .stage__meta{ bottom:1.25rem; }
}
@media (min-width:600px) and (max-width:900px){
  .stage__logos{ grid-template-columns:repeat(3, max-content); }
}

/* Menue-Knopf: das Raster wuerde die beiden Striche auf die volle Hoehe
   verteilen (22 px Abstand) — dann kreuzen sie sich beim Oeffnen nicht zum
   X, sondern bilden einen Winkel. Zusammengeschoben stimmt beides. */
.nav-toggle{ align-content:center; transition:background .4s var(--ease), color .4s var(--ease), transform .3s var(--ease); }
/* Ueber dunklem Grund (Hero, Bilder, offenes Menue) ein heller Kreis statt
   Dunkel auf Dunkel — wie der Pillenknopf bei pechschwarz. */
.nav.is-over-dark .nav-toggle{ background:var(--on-dark); color:var(--ink); }

/* Menue: groessere Eintraege, die aktuelle Seite mit dem gruenen Punkt,
   darunter die beiden Handlungsaufforderungen — die in der Leiste auf dem
   Handy keinen Platz haben (siehe Abschnitt 41). */
.menu__list a{ font-size:clamp(2.1rem, 9.4vw, 3.4rem); }
.menu__list a.is-active{ opacity:1; }
.menu__list a.is-active::after{
  content:""; display:inline-block; width:.16em; height:.16em; margin-left:.22em; vertical-align:.38em;
  border-radius:50%; background:#9BB07E;
}
.menu__cta{
  margin-top:auto; display:flex; flex-wrap:wrap; gap:.7rem;
  opacity:0; transform:translateY(1rem);
  transition:opacity .4s var(--ease), transform .6s var(--ease);
}
.menu.is-open .menu__cta{ opacity:1; transform:none; transition:opacity .7s var(--ease) .42s, transform .9s var(--ease) .42s; }
@media (max-width:560px){
  .menu__cta{ display:grid; grid-template-columns:max-content; }
  .menu__cta .btn{ justify-content:space-between; }
}

/* Druck-Rueckmeldung auf Touch-Geraeten: Knoepfe und Pillen geben beim
   Antippen spuerbar nach (das Skript haengt dafuer den Beruehrungs-Listener
   an, ohne den iOS kein :active zeigt). */
@media (hover:none){
  .btn{ transition:background .45s var(--ease), color .45s var(--ease), box-shadow .45s var(--ease), transform .3s var(--ease); }
  .btn:active{ transform:scale(.96); }
  .tile__pill, .coll__go{ transition:background .45s var(--ease), color .45s var(--ease), transform .3s var(--ease); }
  .tile:active .tile__pill, .coll__media:active .coll__go{ transform:scale(.96); }
  .dok__pfeil{ transition:background .45s var(--ease), color .45s var(--ease), transform .3s var(--ease); }
  a.dok:active .dok__pfeil{ transform:scale(.9); background:var(--ink); color:var(--bg); }
}

/* ==========================================================================
   44. UNTERLAGEN, BEIRAT
   Zwei Dokumentkacheln nebeneinander statt drei — und der Beirat in Farbe.
   ========================================================================== */
/* Zwei Unterlagen-Kacheln ueber die volle Breite. Mit einem Deckel von 62rem
   klebten sie in der linken Haelfte, waehrend rechts daneben nichts stand —
   und die Kacheln waren fuer ihren kurzen Inhalt viel zu hoch. */
.dokumente--zwei{ grid-template-columns:repeat(2,minmax(0,1fr)); }
.dokumente--zwei .dok{ min-height:11rem; }
.dokumente--zwei .dok__titel{ padding-top:clamp(1.5rem,2.4vw,2.25rem); }
/* Auf dem Handy untereinander: die beiden Bogen-Kacheln tragen laengere
   Beschreibungen als die kurzen Transparenz-Kacheln und wuerden nebeneinander
   auf vier Woerter je Zeile zusammenschnurren. */
@media (max-width:640px){
  .dokumente--zwei{ grid-template-columns:1fr; }
  .dokumente--zwei .dok{ min-height:0; }
}


/* Das Attribut hidden muss die display-Regel eines Bausteins schlagen —
   sonst bleibt ein per hidden abgeschalteter Block (Schullogos in der
   Buehne) sichtbar, weil .stage__logos ein eigenes display setzt. */
[hidden]{ display:none !important; }

/* Auswege unter dem Formular, wenn sich kein E-Mail-Programm oeffnet */
.form-hilfe{ display:flex; flex-wrap:wrap; gap:.75rem 1.5rem; margin-top:.9rem; flex-basis:100%; }
.form-hilfe .link-arrow{ cursor:pointer; }

/* Bildhero „Ueber uns" auf dem Handy: das Foto ist quer, die beiden Gesichter
   sitzen an seinen Raendern. Ein mittiger Ausschnitt zeigte nur den Tisch —
   deshalb ruecken wir den Ausschnitt nach links auf die zugewandte Person. */
@media (max-width:760px){
  .bildhero__bg img{ object-position:30% 50%; }
}

/* Der Beirat wird in Farbe gezeigt. Die Gruenderportraets behalten ihre
   Entfaerbung als gestalterisches Mittel (farbig beim Ueberfahren); bei den
   Beiratsbildern wirkte das Grau wie ein Platzhalter. */
.people .person__media img{ filter:none; }

/* ==========================================================================
   45. HANDY — NACHLESE
   ========================================================================== */

/* Klebende Seitenspalte nur, solange es wirklich zwei Spalten gibt. Ab dem
   Umbruch auf eine Spalte (Abschnitt 12, ab 1180 px) stuende die Ueberschrift
   sonst fest ueber den Fragen und wuerde sie beim Scrollen ueberdecken —
   genau das passierte im FAQ-Bereich von „Fuer Schueler". */
@media (max-width:1180px){
  .sticky{ position:static; }
}

/* Tippflaechen. Auf dem Handy trifft der Finger nichts, was nur so hoch ist
   wie seine Schrift — Faustregel sind rund 44 px. Die Flaechen wachsen nach
   innen (Innenabstand), das Aussehen bleibt unveraendert. */
@media (max-width:760px){
  .brand{ min-height:2.75rem; }
  .link-arrow{ padding-block:.55em .3em; }
  .scroll-hint{ padding-block:.75rem; }
  .kachel__wert{ padding-block:.5rem; }
  .footer__col a, .footer__legal a{ padding-block:.45rem; }
  .footer__col ul{ gap:.5rem; }
}

/* Der Regler des Wirkungsrechners war nur zwei Pixel hoch — genau die Linie,
   die man sieht. Jetzt ist die Trefferflaeche 44 px hoch, die Linie wird als
   Hintergrundbild in der Mitte gezeichnet und sieht unveraendert aus. */
.impact input[type=range]{
  height:2.75rem; background:transparent;
  background-image:linear-gradient(var(--line-dark), var(--line-dark));
  background-size:100% 2px; background-position:center; background-repeat:no-repeat;
  touch-action:pan-y;
}
.impact input[type=range]::-moz-range-track{ background:transparent; height:2px; }

/* Der Betrag neben dem Balken darf nicht umbrechen — „2.400 € · 27" und in
   der naechsten Zeile ein einsames Prozentzeichen las sich wie ein Fehler. */
.bar__val{ white-space:nowrap; }