/* Grounder v2 - grounder.info
   ---------------------------------------------------------------------------
   Zweite Fassung der Startseite. Liegt neben styles.css, ersetzt sie nicht.
   Nur index.html haengt daran.

   Haltung      Die App ist der Held, nicht das Stockfoto. Schirmbilder stehen
                gross und in echten Rahmen, Fotografie kommt genau einmal vor.
   Grund        Weiss. Ein kuehler heller Ton fuer abgesetzte Baender, ein
                Gruenblock am Schluss. Kein dunkles Thema.
   Marke        Die Stadion-Silhouetten sind das Hausmaterial. Sie liegen als
                Strichtextur hinter dem Kopfbereich und laufen im Album durch.
   Farbe        Ein Akzent, das dunkle Rasengruen: Hauptknopf, Wortzeichen,
                freigeschaltete Albumkarten, Schlussblock.
   Schrift      Zwei Familien. Big Shoulders Display fuer Schlagzeile,
                Abschnittstitel und Zahlen, Archivo fuer alles andere.
   Radien       6px auf allem. Ausgenommen sind vollflaechige Baender (0) und
                der Handyrahmen, der die Form eines echten Geraets hat.
   Handys       Alle Geraete haben dasselbe Seitenverhaeltnis (9 : 19,5) und
                denselben schwarzen Rahmen. Die Schirmbilder kommen aus
                verschiedenen Geraeten und stehen deshalb mit `contain` drin.
   Bewegung     Ein geordneter Auftritt beim Laden, das laufende Album, Druck
                auf Knoepfen. Kein Einblenden pro Abschnitt.
   --------------------------------------------------------------------------- */

:root {
  --papier:   #FFFFFF;
  --papier-2: #F5F6F3;

  --tinte:    #0E1210;
  --tinte-2:  #4A534A;
  --tinte-3:  #666F65;

  --linie:    rgba(14, 18, 16, 0.13);
  --linie-hi: rgba(14, 18, 16, 0.24);

  --rasen:      #16783A;
  --rasen-tief: #0F5C2C;
  --rasen-dunkel: #0C3F21;
  --rasen-hauch: rgba(22, 120, 58, 0.08);
  --auf-rasen:  #FFFFFF;

  --auf-foto:   #FFFFFF;
  --auf-foto-2: rgba(255, 255, 255, 0.8);

  --fs-held:   clamp(2.75rem, 5.4vw, 4.875rem);
  --fs-h2:     clamp(2.125rem, 4.1vw, 3.375rem);
  --fs-h3:     clamp(1.125rem, 1.4vw, 1.375rem);
  --fs-zahl:   clamp(2.375rem, 4.6vw, 3.625rem);
  --fs-lead:   clamp(1.0625rem, 1.3vw, 1.25rem);
  --fs-body:   1.0625rem;
  --fs-small:  0.9375rem;
  --fs-mini:   0.8125rem;

  --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px;
  --s-5: 24px; --s-6: 32px; --s-7: 40px; --s-8: 56px;
  --s-9: 72px; --s-10: 96px; --s-11: 128px; --s-12: 168px;

  --r: 6px;
  --shell: 1100px;
  --wide: 1320px;
  --kopf: 68px;

  --sb: 0px;
}

/* --------------------------------------------------------------------------
   Grundlagen
   -------------------------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--kopf) + var(--s-5));
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--papier);
  color: var(--tinte);
  font-family: 'Archivo', 'Archivo Narrow', 'Segoe UI', Helvetica, Arial, sans-serif;
  font-size: var(--fs-body);
  font-variation-settings: 'wdth' 100, 'wght' 400;
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img, svg { max-width: 100%; display: block; }
img { height: auto; }
a { color: inherit; }

::selection { background: var(--rasen); color: var(--auf-rasen); }

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

.shell {
  width: 100%;
  max-width: var(--shell);
  margin-inline: auto;
  padding-inline: var(--s-5);
}
.shell-wide { max-width: var(--wide); }
.shell-eng  { max-width: 760px; }

.abschnitt { padding-block: clamp(var(--s-10), 8vw, var(--s-11)); }
.abschnitt-knapp { padding-block: clamp(var(--s-8), 6vw, var(--s-10)); }
.abschnitt-sanft { background: var(--papier-2); }

.nur-lesen {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap; border: 0;
}

/* --------------------------------------------------------------------------
   Typografie
   -------------------------------------------------------------------------- */

/* Zwei Familien mit klarem Abstand: Big Shoulders Display traegt die grossen
   Ueberschriften und die Zahlen, Archivo den Rest. */
h1, h2 {
  margin: 0;
  font-family: 'Big Shoulders Display', 'Archivo', 'Arial Narrow', sans-serif;
  font-weight: 800;
  font-variation-settings: normal;
  letter-spacing: 0;
  line-height: 0.92;
  text-wrap: balance;
}
h1 { font-size: var(--fs-held); text-wrap: pretty; }
h2 { font-size: var(--fs-h2); }
h3 {
  margin: 0;
  font-size: var(--fs-h3);
  font-variation-settings: 'wdth' 96, 'wght' 700;
  letter-spacing: -0.008em;
  line-height: 1.22;
  text-wrap: balance;
}

p { margin: 0; max-width: 62ch; }
p + p { margin-top: var(--s-4); }

.lead {
  font-size: var(--fs-lead);
  color: var(--tinte-2);
  line-height: 1.5;
  max-width: 46ch;
}

.kopfblock { max-width: 42ch; margin-bottom: var(--s-8); }
.kopfblock-breit { max-width: 640px; }
.kopfblock .lead { margin-top: var(--s-4); }

/* --------------------------------------------------------------------------
   Knoepfe
   -------------------------------------------------------------------------- */

.knopf {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 0 var(--s-6);
  border: 1px solid transparent;
  border-radius: var(--r);
  font: inherit;
  font-size: var(--fs-small);
  font-variation-settings: 'wdth' 96, 'wght' 650;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color .18s ease, border-color .18s ease,
              color .18s ease, transform .1s ease;
}
.knopf:active { transform: translateY(1px); }

.knopf-voll {
  background: var(--rasen);
  color: var(--auf-rasen);
  border-color: var(--rasen);
}
.knopf-voll:hover { background: var(--rasen-tief); border-color: var(--rasen-tief); }

.knopf-leer {
  background: transparent;
  color: var(--tinte);
  border-color: var(--linie-hi);
}
.knopf-leer:hover { border-color: var(--tinte); background: var(--papier-2); }

.knopf-klein { min-height: 38px; padding: 0 var(--s-4); font-size: var(--fs-mini); }

.aktionen { display: flex; flex-wrap: wrap; gap: var(--s-3); }

/* Store-Knoepfe */
.laden {
  display: inline-flex;
  align-items: center;
  gap: var(--s-3);
  min-height: 54px;
  padding: 0 var(--s-5);
  border-radius: var(--r);
  background: var(--tinte);
  color: #FFFFFF;
  text-decoration: none;
  transition: background-color .18s ease, transform .1s ease;
}
.laden:hover { background: #202622; }
.laden:active { transform: translateY(1px); }
.laden svg { width: 22px; height: 22px; fill: currentColor; flex: 0 0 auto; }
.laden b {
  display: block;
  font-size: 1rem;
  font-variation-settings: 'wdth' 94, 'wght' 700;
  line-height: 1.15;
  letter-spacing: -0.005em;
}
.laden small {
  display: block;
  font-size: 0.6875rem;
  line-height: 1.1;
  opacity: 0.72;
}

.auf-gruen .laden { background: #FFFFFF; color: var(--tinte); }
.auf-gruen .laden:hover { background: #EDF2EC; }

.verweis {
  color: var(--tinte);
  text-decoration: none;
  background-image: linear-gradient(var(--rasen), var(--rasen));
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 100% 1px;
  padding-bottom: 2px;
  transition: background-size .22s ease;
}
.verweis:hover { background-size: 100% 2px; }

/* --------------------------------------------------------------------------
   Kopfzeile
   -------------------------------------------------------------------------- */

.kopfzeile {
  position: sticky;
  top: 0;
  z-index: 40;
  height: var(--kopf);
  display: flex;
  align-items: center;
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(14px) saturate(150%);
  -webkit-backdrop-filter: blur(14px) saturate(150%);
  border-bottom: 1px solid transparent;
  transition: border-color .25s ease;
}
.kopfzeile[data-gescrollt] { border-bottom-color: var(--linie); }
.kopfzeile > .shell { display: flex; align-items: center; gap: var(--s-6); }

.wortzeichen img { border-radius: 22%; }
.wortzeichen {
  display: inline-flex;
  align-items: center;
  gap: var(--s-3);
  font-variation-settings: 'wdth' 84, 'wght' 800;
  font-size: 1.125rem;
  letter-spacing: -0.015em;
  text-decoration: none;
  color: var(--tinte);
}

.hauptnavi {
  display: flex;
  align-items: center;
  gap: var(--s-5);
  margin-inline-start: auto;
  font-size: var(--fs-small);
}
.hauptnavi a {
  color: var(--tinte-2);
  text-decoration: none;
  white-space: nowrap;
  transition: color .16s ease;
}
.hauptnavi a:hover { color: var(--tinte); }

.kopf-aktionen { display: flex; align-items: center; gap: var(--s-3); }

@media (max-width: 1080px) { .hauptnavi { gap: var(--s-4); font-size: var(--fs-mini); } }
@media (max-width: 880px) {
  .hauptnavi { display: none; }
  .kopf-aktionen { margin-inline-start: auto; }
}

/* --------------------------------------------------------------------------
   Kopfbereich. Weiss, Silhouetten als Strichtextur, das Geraet rechts.
   -------------------------------------------------------------------------- */

.held {
  position: relative;
  overflow: hidden;
  padding-block: clamp(var(--s-9), 7vw, var(--s-11)) clamp(var(--s-9), 7vw, var(--s-10));
}

/* Die beiden Silhouettenreihen laufen gegenlaeufig durch. Jede Reihe ist
   horizontal nahtlos gebaut, deshalb genuegt ein Versatz um genau eine
   Kachelbreite. Verschoben wird per transform, damit die Grafikkarte das
   uebernimmt. */
.held-textur {
  position: absolute;
  inset: 0 0 auto 0;
  height: 470px;
  overflow: hidden;
  pointer-events: none;
  --kachel: 1456px;
  --reihe: 200px;
  mask-image: linear-gradient(to bottom, #000 0%, #000 62%, transparent 100%);
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 62%, transparent 100%);
}
.held-spur {
  position: absolute;
  left: 0;
  width: 300%;
  height: var(--reihe);
  opacity: 0.1;
  background-repeat: repeat-x;
  background-position: left top;
  background-size: var(--kachel) auto;
  will-change: transform;
}
.held-spur-1 {
  top: 0;
  background-image: url('assets/brand/silhouetten-reihe-1.webp');
  animation: spur-links 120s linear infinite;
}
.held-spur-2 {
  top: var(--reihe);
  background-image: url('assets/brand/silhouetten-reihe-2.webp');
  animation: spur-rechts 150s linear infinite;
}

@keyframes spur-links {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(calc(var(--kachel) * -1), 0, 0); }
}
@keyframes spur-rechts {
  from { transform: translate3d(calc(var(--kachel) * -1), 0, 0); }
  to   { transform: translate3d(0, 0, 0); }
}

/* Weisser Schleier ueber der linken Haelfte: die Schlagzeile steht auf
   sauberem Papier, die Silhouetten bleiben rechts hinter dem Geraet sichtbar. */
.held::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(to right,
    #FFFFFF 0%, rgba(255, 255, 255, 0.94) 32%, rgba(255, 255, 255, 0) 62%);
}

.held-inhalt {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr);
  align-items: center;
  gap: clamp(var(--s-7), 5vw, var(--s-10));
}

.held-text h1 { max-width: 13ch; }
.held-text .lead { margin-top: var(--s-5); max-width: 40ch; }
.held-laden { display: flex; flex-wrap: wrap; gap: var(--s-3); margin-top: var(--s-7); }
.held-notiz { margin-top: var(--s-4); font-size: var(--fs-mini); color: var(--tinte-3); }

.held-geraet { display: flex; justify-content: center; }
.held-geraet .handy { width: clamp(190px, 24vw, 312px); }

@media (max-width: 760px) {
  .held-inhalt { grid-template-columns: 1fr; gap: var(--s-8); }
  .held-text { max-width: none; }
  .held-geraet { justify-content: flex-start; }
  .held-geraet .handy { width: min(280px, 72vw); }
  /* Schmaler Schirm: die Textur liegt sonst hinter der Schlagzeile. Sie
     rutscht deshalb ans untere Ende, hinter das Geraet, und der Schleier
     laeuft von oben nach unten statt von links nach rechts. */
  .held::after {
    background: linear-gradient(to bottom,
      #FFFFFF 0%, rgba(255, 255, 255, 0.94) 36%, rgba(255, 255, 255, 0) 62%);
  }
  .held-textur {
    inset: auto 0 0 0;
    height: 248px;
    --kachel: 880px;
    --reihe: 121px;
    mask-image: linear-gradient(to top, #000 0%, #000 55%, transparent 100%);
    -webkit-mask-image: linear-gradient(to top, #000 0%, #000 55%, transparent 100%);
  }
}

/* --------------------------------------------------------------------------
   Zahlenreihe
   -------------------------------------------------------------------------- */

.zahlen {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid var(--linie);
  border-bottom: 1px solid var(--linie);
}
.zahlen > div {
  padding: var(--s-7) var(--s-5);
  border-inline-start: 1px solid var(--linie);
}
.zahlen > div:first-child { border-inline-start: 0; padding-inline-start: 0; }
.zahlen b {
  display: block;
  font-family: 'Big Shoulders Display', 'Archivo', 'Arial Narrow', sans-serif;
  font-size: var(--fs-zahl);
  font-weight: 800;
  font-variation-settings: normal;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0;
  line-height: 0.92;
}
.zahlen span {
  display: block;
  margin-top: var(--s-3);
  font-size: var(--fs-small);
  color: var(--tinte-2);
  max-width: 22ch;
}

@media (max-width: 760px) {
  .zahlen { grid-template-columns: repeat(2, 1fr); }
  .zahlen > div { padding-block: var(--s-6); }
  .zahlen > div:nth-child(odd) { border-inline-start: 0; padding-inline-start: 0; }
  .zahlen > div:nth-child(n+3) { border-top: 1px solid var(--linie); }
}

/* --------------------------------------------------------------------------
   Geteilter Abschnitt: Geraet und Text
   -------------------------------------------------------------------------- */

.geteilt {
  display: grid;
  grid-template-columns: minmax(0, 0.82fr) minmax(0, 1fr);
  align-items: center;
  gap: clamp(var(--s-8), 6vw, var(--s-11));
}
.geteilt-gedreht { grid-template-columns: minmax(0, 1fr) minmax(0, 0.82fr); }
.geteilt-gedreht .geteilt-geraet { order: 2; }

.geteilt-geraet { display: flex; justify-content: center; }
.geteilt-geraet .handy { width: min(300px, 74vw); }

.geteilt-text h2 { max-width: 16ch; }
.geteilt-text .lead { margin-top: var(--s-4); }

.punkte {
  margin-top: var(--s-7);
  display: grid;
  gap: var(--s-5);
  max-width: 48ch;
}
.punkte > div { border-top: 1px solid var(--linie); padding-top: var(--s-3); }
.punkte b {
  display: block;
  font-variation-settings: 'wdth' 94, 'wght' 700;
  font-size: var(--fs-small);
}
.punkte span {
  display: block;
  margin-top: var(--s-2);
  font-size: var(--fs-small);
  color: var(--tinte-2);
}

.preis {
  margin-top: var(--s-7);
  padding: var(--s-5) var(--s-6);
  border: 1px solid var(--linie);
  border-radius: var(--r);
  max-width: 46ch;
}
.preis b {
  display: block;
  font-family: 'Big Shoulders Display', 'Archivo', 'Arial Narrow', sans-serif;
  font-size: 1.75rem;
  font-weight: 800;
  font-variation-settings: normal;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.preis span { display: block; margin-top: var(--s-2); font-size: var(--fs-small); color: var(--tinte-2); }

@media (max-width: 880px) {
  .geteilt, .geteilt-gedreht { grid-template-columns: 1fr; gap: var(--s-8); }
  .geteilt-gedreht .geteilt-geraet { order: 0; }
  .geteilt-text h2 { max-width: none; }
  .geteilt-geraet { justify-content: flex-start; }
  .geteilt-geraet .handy { width: min(260px, 62vw); }
}

/* --------------------------------------------------------------------------
   Handyrahmen. Ein Seitenverhaeltnis fuer alle Geraete, schmale schwarze
   Kante, zwei Tasten, flacher Glasreflex.
   -------------------------------------------------------------------------- */

.handy {
  position: relative;
  padding: 4px;
  border-radius: 38px;
  background:
    linear-gradient(152deg,
      #4A4E4D 0%, #16191A 9%, #0A0C0C 28%,
      #1C2021 52%, #0A0C0C 74%, #15181A 88%, #434746 100%);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.12),
    0 2px 4px rgba(14, 18, 16, 0.2),
    0 28px 48px -26px rgba(14, 18, 16, 0.5),
    0 70px 100px -70px rgba(14, 18, 16, 0.55);
}
.handy::before,
.handy::after {
  content: '';
  position: absolute;
  width: 2px;
  background: linear-gradient(#3C4140, #0E1112);
}
.handy::before { inset-inline-end: -2px; top: 26%; height: 10%; border-radius: 0 2px 2px 0; }
.handy::after  { inset-inline-start: -2px; top: 21%; height: 14%; border-radius: 2px 0 0 2px; }

.handy-schirm {
  position: relative;
  aspect-ratio: 9 / 19.5;
  border-radius: 34px;
  overflow: hidden;
  background: #0B0D0C;
}
/* `contain` statt `cover`: die Aufnahmen kommen aus verschiedenen Geraeten und
   sind unterschiedlich hoch. Beschnitt wuerde Bedienelemente am Rand kappen.
   Der schmale Rest bleibt schwarz und geht im Rahmen auf. */
.handy-schirm img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.handy-schirm::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(128deg,
    rgba(255, 255, 255, 0.08) 0%,
    rgba(255, 255, 255, 0.03) 16%,
    rgba(255, 255, 255, 0) 34%);
}

/* --------------------------------------------------------------------------
   Geraetereihe, seitlich scrollbar
   -------------------------------------------------------------------------- */

.reihe {
  display: flex;
  gap: var(--s-6);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding-block: var(--s-4) var(--s-8);
  padding-inline: max(var(--s-5), calc((100vw - var(--sb) - var(--wide)) / 2 + var(--s-5)));
  scrollbar-width: thin;
  scrollbar-color: var(--linie-hi) transparent;
}
.reihe::-webkit-scrollbar { height: 6px; }
.reihe::-webkit-scrollbar-thumb { background: var(--linie-hi); border-radius: 999px; }

.reihe figure {
  flex: 0 0 auto;
  width: 244px;
  margin: 0;
  scroll-snap-align: start;
}
.reihe figcaption { margin-top: var(--s-5); }
.reihe figcaption b {
  display: block;
  font-variation-settings: 'wdth' 94, 'wght' 700;
  font-size: var(--fs-small);
}
.reihe figcaption span {
  display: block;
  margin-top: var(--s-2);
  font-size: var(--fs-mini);
  color: var(--tinte-2);
  line-height: 1.5;
}

/* --------------------------------------------------------------------------
   Album: laufende Reihe aus Stadion-Silhouetten
   -------------------------------------------------------------------------- */

.album {
  margin-top: var(--s-8);
  overflow: hidden;
  mask-image: linear-gradient(to right, transparent, #000 7%, #000 93%, transparent);
  -webkit-mask-image: linear-gradient(to right, transparent, #000 7%, #000 93%, transparent);
}
.album-spur {
  display: flex;
  gap: var(--s-4);
  width: max-content;
  animation: album-lauf 64s linear infinite;
}
.album:hover .album-spur,
.album:focus-within .album-spur { animation-play-state: paused; }

@keyframes album-lauf {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-50%, 0, 0); }
}

.kartei {
  flex: 0 0 auto;
  width: 190px;
  padding: var(--s-4) var(--s-4) var(--s-3);
  background: var(--papier);
  border: 1px solid var(--linie);
  border-top: 2px solid var(--rasen);
  border-radius: var(--r);
  box-shadow: 0 8px 20px -16px rgba(14, 18, 16, 0.55);
}
.kartei img {
  width: 100%;
  aspect-ratio: 408 / 226;
  object-fit: contain;
}
.kartei span {
  display: block;
  margin-top: var(--s-3);
  font-size: var(--fs-mini);
  font-variation-settings: 'wdth' 92, 'wght' 600;
  color: var(--tinte-2);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.kartei-offen {
  border-top-color: var(--linie);
  background: transparent;
  box-shadow: none;
}
.kartei-offen img { opacity: 0.16; }
.kartei-offen span { color: var(--tinte-3); }

.abzeichen {
  margin-top: var(--s-9);
  padding-top: var(--s-6);
  border-top: 1px solid var(--linie);
}
.abzeichen-titel { margin-bottom: var(--s-6); }
.abzeichen-raster {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--s-5);
}
.abzeichen b {
  display: block;
  font-variation-settings: 'wdth' 94, 'wght' 700;
  font-size: var(--fs-small);
}
.abzeichen span {
  display: block;
  margin-top: var(--s-2);
  font-size: var(--fs-small);
  color: var(--tinte-2);
}
@media (max-width: 820px) { .abzeichen-raster { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .abzeichen-raster { grid-template-columns: 1fr; gap: var(--s-4); } }

/* --------------------------------------------------------------------------
   Das eine Foto der Seite (Klasse .fotoband, nicht .band: den Namen
   brauchen die Formularseiten fuer ihren eigenen Kopf)
   -------------------------------------------------------------------------- */

.fotoband {
  position: relative;
  min-height: clamp(380px, 46vw, 520px);
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  isolation: isolate;
  color: var(--auf-foto);
}
.fotoband > img {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.fotoband::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(to top, rgba(8, 12, 14, 0.88) 2%, rgba(8, 12, 14, 0.12) 66%);
}
.fotoband > .shell {
  position: relative;
  z-index: 2;
  padding-block: clamp(var(--s-8), 6vw, var(--s-10));
}
.fotoband h2 { max-width: 17ch; }

/* --------------------------------------------------------------------------
   Ablauf als Zeitschiene
   -------------------------------------------------------------------------- */

.schiene {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s-7);
}
.schiene > div > img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--r);
  margin-bottom: var(--s-5);
}
.schiene h3 { border-top: 2px solid var(--linie-hi); padding-top: var(--s-4); }
.schiene p { margin-top: var(--s-3); font-size: var(--fs-small); color: var(--tinte-2); }

@media (max-width: 760px) { .schiene { grid-template-columns: 1fr; gap: var(--s-6); } }

/* --------------------------------------------------------------------------
   Fragen
   -------------------------------------------------------------------------- */

.fragen {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 var(--s-8);
  align-content: start;
}
.fragen details { border-top: 1px solid var(--linie); }
.fragen summary {
  list-style: none;
  cursor: pointer;
  padding-block: var(--s-5);
  padding-inline-end: var(--s-6);
  position: relative;
  font-variation-settings: 'wdth' 94, 'wght' 650;
  font-size: 1.0625rem;
}
.fragen summary::-webkit-details-marker { display: none; }
.fragen summary::after {
  content: '';
  position: absolute;
  inset-inline-end: 0; top: 50%;
  width: 12px; height: 2px;
  background: var(--tinte-2);
  transform: translateY(-50%);
}
.fragen summary::before {
  content: '';
  position: absolute;
  inset-inline-end: 5px; top: 50%;
  width: 2px; height: 12px;
  background: var(--tinte-2);
  transform: translateY(-50%);
  transition: opacity .18s ease;
}
.fragen details[open] summary::before { opacity: 0; }
.fragen details p {
  padding-bottom: var(--s-5);
  font-size: var(--fs-small);
  color: var(--tinte-2);
  max-width: 52ch;
}

@media (max-width: 820px) { .fragen { grid-template-columns: 1fr; } }

/* --------------------------------------------------------------------------
   Mitmachen
   -------------------------------------------------------------------------- */

.mitmachen {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  gap: clamp(var(--s-7), 6vw, var(--s-10));
}
.mitmachen h2 { max-width: 20ch; }
.mitmachen-text p { margin-top: var(--s-5); color: var(--tinte-2); }

.mitmachen-liste { display: grid; gap: var(--s-4); align-content: center; }
.mitmachen-liste a {
  display: block;
  border-top: 1px solid var(--linie);
  padding-top: var(--s-4);
  text-decoration: none;
}
.mitmachen-liste b {
  display: block;
  font-variation-settings: 'wdth' 94, 'wght' 700;
  font-size: var(--fs-small);
  transition: color .16s ease;
}
.mitmachen-liste span {
  display: block;
  margin-top: var(--s-1);
  font-size: var(--fs-mini);
  color: var(--tinte-2);
}
.mitmachen-liste a:hover b { color: var(--rasen); }

@media (max-width: 880px) { .mitmachen { grid-template-columns: 1fr; } }

/* --------------------------------------------------------------------------
   Schlussblock in Markenfarbe
   -------------------------------------------------------------------------- */

.gruen {
  background: var(--rasen-dunkel);
  color: #FFFFFF;
  padding-block: clamp(var(--s-9), 7vw, var(--s-11));
  text-align: center;
}
.gruen h2 { max-width: 17ch; margin-inline: auto; }
.gruen .lead { margin-top: var(--s-4); margin-inline: auto; color: rgba(255, 255, 255, 0.8); }
.gruen .held-laden { justify-content: center; margin-top: var(--s-7); }
.gruen .held-notiz { color: rgba(255, 255, 255, 0.68); }

/* --------------------------------------------------------------------------
   Fusszeile
   -------------------------------------------------------------------------- */

.fusszeile {
  border-top: 1px solid var(--linie);
  padding-block: var(--s-9) var(--s-7);
  font-size: var(--fs-small);
}
.fusszeile > .shell:first-child {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) repeat(2, minmax(0, 1fr));
  gap: var(--s-8);
}
.fusszeile p { margin-top: var(--s-4); color: var(--tinte-2); max-width: 34ch; }
.fusszeile h3 {
  font-size: var(--fs-mini);
  font-variation-settings: 'wdth' 96, 'wght' 700;
  color: var(--tinte-3);
  letter-spacing: 0.02em;
}
.fusszeile nav { display: grid; gap: var(--s-3); margin-top: var(--s-4); }
.fusszeile nav a { color: var(--tinte-2); text-decoration: none; }
.fusszeile nav a:hover { color: var(--tinte); }

.fusszeile .fuss-zeile {
  max-width: none;
  margin-top: var(--s-9);
  padding-top: var(--s-5);
  border-top: 1px solid var(--linie);
  color: var(--tinte-3);
  font-size: var(--fs-mini);
}

@media (max-width: 820px) {
  .fusszeile > .shell:first-child { grid-template-columns: 1fr 1fr; }
  .fusszeile > .shell:first-child > :first-child { grid-column: span 2; }
}

/* --------------------------------------------------------------------------
   Bewegung
   -------------------------------------------------------------------------- */

.auftritt > * { animation: auftritt .78s cubic-bezier(.22, .68, .3, 1) backwards; }
.auftritt > *:nth-child(1) { animation-delay: .08s; }
.auftritt > *:nth-child(2) { animation-delay: .18s; }
.auftritt > *:nth-child(3) { animation-delay: .28s; }
.auftritt > *:nth-child(4) { animation-delay: .36s; }

@keyframes auftritt {
  from { opacity: 0; transform: translate3d(0, 18px, 0); }
  to   { opacity: 1; transform: translate3d(0, 0, 0); }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .auftritt > * { animation: none; }
  .album-spur { animation: none; }
  .held-spur { animation: none; }
  .album { overflow-x: auto; mask-image: none; -webkit-mask-image: none; }
  .knopf, .laden { transition: none; }
  .knopf:active, .laden:active { transform: none; }
}

/* --------------------------------------------------------------------------
   Fragen-Seite. Eigene Seite, damit lange Suchanfragen und Antwortmaschinen
   eine Anlaufstelle haben. Die Antworten stehen offen im Markup, nicht in
   einem Aufklapper: was zugeklappt ist, wird seltener zitiert.
   -------------------------------------------------------------------------- */

.fa-seite { padding-bottom: clamp(var(--s-10), 8vw, var(--s-12)); }

.fa-kopf {
  position: relative;
  overflow: hidden;
  padding-block: clamp(var(--s-9), 7vw, var(--s-11)) clamp(var(--s-8), 5vw, var(--s-9));
}
.fa-textur {
  position: absolute;
  inset: 0 0 auto 0;
  height: 330px;
  overflow: hidden;
  pointer-events: none;
  --kachel: 1456px;
  --reihe: 200px;
  mask-image: linear-gradient(to bottom, #000 0%, #000 55%, transparent 100%);
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 55%, transparent 100%);
}
.fa-kopf::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(to right,
    #FFFFFF 0%, rgba(255, 255, 255, 0.94) 40%, rgba(255, 255, 255, 0.2) 78%);
}
.fa-kopf-inhalt { position: relative; z-index: 2; }
.fa-kopf-inhalt h1 { max-width: 15ch; }
.fa-kopf-inhalt .lead { margin-top: var(--s-5); }

.fa-raster {
  display: grid;
  grid-template-columns: minmax(0, 0.42fr) minmax(0, 1fr);
  gap: clamp(var(--s-8), 6vw, var(--s-11));
  align-items: start;
}

.fa-navi { position: sticky; top: calc(var(--kopf) + var(--s-6)); }
.fa-navi h2 {
  font-size: var(--fs-mini);
  font-family: 'Archivo', sans-serif;
  font-variation-settings: 'wdth' 96, 'wght' 700;
  letter-spacing: 0.02em;
  color: var(--tinte-3);
  margin-bottom: var(--s-4);
}
.fa-navi-liste { display: grid; }
.fa-navi-liste a {
  border-top: 1px solid var(--linie);
  padding-block: var(--s-3);
  font-size: var(--fs-small);
  color: var(--tinte-2);
  text-decoration: none;
  transition: color .16s ease;
}
.fa-navi-liste a:hover { color: var(--rasen); }
.fa-navi .knopf { margin-top: var(--s-6); }

.fa-inhalt { display: grid; gap: clamp(var(--s-9), 6vw, var(--s-10)); }

.fa-block > h2 {
  padding-bottom: var(--s-4);
  border-bottom: 2px solid var(--tinte);
  margin-bottom: var(--s-7);
}
.fa-eintrag + .fa-eintrag {
  margin-top: var(--s-6);
  padding-top: var(--s-6);
  border-top: 1px solid var(--linie);
}
.fa-eintrag h3 { margin-bottom: var(--s-3); max-width: 40ch; }
.fa-eintrag p { color: var(--tinte-2); max-width: 68ch; }

.fa-schluss p { color: var(--tinte-2); }
.fa-schluss .aktionen { margin-top: var(--s-6); }

@media (max-width: 900px) {
  .fa-raster { grid-template-columns: 1fr; gap: var(--s-8); }
  .fa-navi { position: static; }
  .fa-navi-liste { grid-template-columns: repeat(2, 1fr); gap: 0 var(--s-5); }
  .fa-textur { height: 220px; --kachel: 880px; --reihe: 121px; }
  .fa-kopf::after {
    background: linear-gradient(to bottom,
      rgba(255, 255, 255, 0.4) 0%, rgba(255, 255, 255, 0.92) 55%, #FFFFFF 100%);
  }
}
@media (max-width: 520px) {
  .fa-navi-liste { grid-template-columns: 1fr; }
}

.fragen-mehr { margin-top: var(--s-6); font-size: var(--fs-small); }