/* AyInnovate · Raum und Raster
   Ebenen: Platte (0) · Feld hinten (1) · Inhalt (2) · Feld vorn (3)
           · Inversion (4) · Kopf (40) · helle Fassung (41) */

main { display: contents; }

/* Die schwarze Platte des Abschlusses. Sie ist eine eigene Ebene unter dem Feld,
   damit die Balken auf ihr stehen statt hinter ihr zu verschwinden. Sie ist
   doppelt so hoch wie der Bildschirm und wird von der Kante nur verschoben —
   verschieben kostet kein Layout, ein wanderndes `top` je Bild schon. */
.platte {
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  bottom: -100%;
  z-index: 0;
  background: var(--tiefschwarz);
  pointer-events: none;
  transform: translateY(var(--kante));
  will-change: transform;
}

/* Kopf */
.kopf {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 40;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.1rem var(--rand);
  pointer-events: none;
}
.kopf > * { pointer-events: auto; }

.marke {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  text-decoration: none;
  color: var(--tiefschwarz);
}
.marke__zeichen { height: 1.7rem; width: auto; display: block; }
.marke__punkt { fill: var(--signal); }
.marke__wort {
  font-weight: 500;
  font-size: 1.0625rem;
  letter-spacing: -0.02em;
}
.marke__kategorie { color: var(--grau); font-size: var(--mini); }

/* Helle Fassung von Kopf und Zähler — beschnitten auf genau die Fläche der
   Platte. Kein Umschaltpunkt: die Kante der Platte ist die Kante der Farbe. */
.hell {
  position: fixed;
  inset: 0;
  z-index: 41;
  pointer-events: none;
  clip-path: inset(var(--kante) 0 0 0);
}
.hell .kopf,
.hell .zaehler { position: absolute; }
.hell .marke { color: var(--papier); }
.hell .marke__kategorie,
.hell .zaehler { color: var(--grau-invers); }

/* Ohne Rastlagen (html.snap-frei, Abschnitte über Bildschirmhöhe) schwebt kein
   Chrome über dem lesenden Scroll: der Kopf steht am Seitenanfang und scrollt
   mit; Zähler und helle Fassung entfallen — es gibt keine Rastlage, die sie
   anzeigen könnten. Die Klasse setzt js/motor.js. */
html.snap-frei .kopf { position: absolute; }
html.snap-frei .zaehler,
html.snap-frei .hell { display: none; }

/* Abschnitte */
.abschnitt {
  position: relative;
  z-index: 2;
  min-height: 100vh;
  min-height: 100svh;
  display: grid;
  align-content: center;
  /* Die Untergrenzen decken die festen Ebenen: oben der Kopf (≈69 px), unten
     der Zähler (≈37 px). Auch auf flachen Fenstern beginnt kein Satz unter
     dem Kopf und endet keiner unter dem Zähler. */
  padding: max(12vh, 80px) var(--rand) max(12vh, 48px);
  /* Pflicht-Einrasten je Abschnitt — nie Halt im Leeren.
     snap-stop bleibt »normal«, damit Ankersprünge (Knöpfe) durchlaufen. */
  scroll-snap-align: start;
}
.abschnitt--anfang { padding-top: max(20vh, 80px); }

.innen { width: 100%; max-width: 1360px; margin-inline: auto; }

/* Inversion — der Abschluss steht auf der Platte. Satzzeichen, nicht Modus.
   Die Fläche liefert .platte; hier steht nur der Satz über dem Feld. */
.abschnitt--inversion {
  z-index: 4;
  color: var(--papier);
  /* Aussage oben, Fuß unten — der Abschluss steht auf der Grundlinie der Seite. */
  align-content: space-between;
  /* Nur ein Mindestabstand in der Rinne des Rasters — den Rest verteilt
     space-between. So bleibt der Abschluss auch mit Knopf ein Bildschirm. */
  row-gap: 24px;
  padding-top: clamp(106px, 14vh, 190px);
}

/* Fuß */
.fuss { width: 100%; max-width: 1360px; margin-inline: auto; }
.fuss__zeilen {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 2.5rem;
  justify-content: space-between;
  border-top: 1px solid var(--hairline);
  padding-top: 1.4rem;
  margin-top: min(2.4rem, 5vh);
  font-size: var(--mini);
}
.fuss__zeilen p { max-width: none; }
.abschnitt--inversion .fuss__zeilen { border-top-color: var(--hairline-invers); }
.abschnitt--inversion .fuss__zeilen .grau { color: var(--grau-invers); }

/* Zähler unten links */
.zaehler {
  position: fixed;
  left: var(--rand);
  bottom: 1.1rem;
  z-index: 40;
  font-size: var(--mini);
  color: var(--grau);
  pointer-events: none;
}

/* Scrollhinweis unten rechts, nur am Anfang */
.scrollhinweis {
  position: absolute;
  right: var(--rand);
  bottom: 1.1rem;
  font-size: var(--mini);
  color: var(--grau);
}
html.gescrollt .scrollhinweis { opacity: 0; transition: opacity 0.25s; }

@media (max-width: 760px) {
  .abschnitt { padding-block: max(10vh, 80px) max(10vh, 48px); }
  /* Der Abschluss behält den Abstand unter dem festen Kopf. */
  .abschnitt--inversion { padding-top: max(14vh, 108px); }
  .marke__kategorie { display: none; }
}