/* Projekt-Deckblatt über der Grundlinie (design-system/ bleibt unverändert).

   1 · Breite: Der Standardcontainer (76 rem) ist für sieben Navigationspunkte
       mit langen Labeln knapp. 94 rem (1504 px) geben dem Kopf Luft auf
       großen Monitoren; unterhalb von 1552 px Breite ändert sich nichts, die
       Leselängen der Textspalten begrenzt weiterhin --measure-prose.

   2 · Navigationsabstände unter 80 rem: ohne sie brechen die Label in zwei
       Zeilen; zwischen 68 und 75 rem weicht der Kopf-Knopf in die Schublade.

   3 · Besuchte Knöpfe: die Grundlinie färbt a:visited dunkel – das gilt auch
       für verlinkte Buttons und macht gefüllte Knöpfe unleserlich. Hier wird
       je Variante die beabsichtigte Schriftfarbe für besuchte Links gesetzt.

   4 · Brotkrumen im blauen Kopf-Band: bündig zum Inhalt, ohne eigene Farbspur;
       Abstand zur Überschrift wie im Rest der Grundlinie eine ganze Stufe
       (sp-5) statt einer halben.

   5 · Alert-Abstand: Alerts standen randlos an der nächsten Sektion.

   6 · Vereinslogo: helle, wie ein Knopf gerundete Fläche, doppelt so hoch wie
       die Kopfzeile, bündig am Kopfbeginn, ragt unten in den Intro-Bereich;
       ab 8 px Scrolltiefe schrumpft es in die Kopfzeile und die Fläche wird
       durchsichtig (Kopf-Weichzeichnung bleibt intakt). Fußzeile: Duo-Ton
       über CSS-Variablen im Inline-SVG.

   7 · Gleichmäßige Navigationsabstände: das Dropdown-Zeichen verlässt den
       Fluss und sitzt mittig im Zwischenraum zweier Punkte – die Distanz
       zwischen den Texten ist dadurch überall gleich.

   8 · Partnerlogo auf der PPA-Standortkarte der Startseite: entfallen
       (auf Wunsch wieder entfernt).

   9 · PPA-Wortmark zusätzlich rechts im Kennzahlen-Band der Startseite.

   10 · Hinweisleiste der Startseite: Text im Container, linksbündig hinter
        dem Kopf-Logo, Hero unberührt.

   11 · Abbildungen in Raster-Spalten beginnen auf gleicher Höhe wie die
        Nebenspalte (kein Fließtext-Randmaß oben).

   12 · Aufeinanderfolgende helle Sektionen teilen sich einen oberen Abstand
        – kein doppeltes 192-er-Polster mehr.

   13 · Mobil (unter 34 rem): Kopf-Logo auf höchstens 125 px verkleinert.

   14 · Mobil: Das Ankündigungsband (.notice) läuft als Laufband durch – der
        Text bricht nie um und läuft unter dem Kopf-Logo durch, die Bandhöhe
        ist dieselbe wie auf dem Desktop. Mit dem Finger lässt es sich
        endlos nach links und rechts schieben (in beide Richtungen, mit
        Nachschwung); beim Berühren pausiert es und läuft kurz danach
        automatisch weiter. Tastatur: Pfeiltasten, wenn das Band fokussiert
        ist (assets/js/projekt.js).

   15 · Mobil: Das Partnerlogo im Kennzahlen-Band steht linksbündig unter den
        Zahlen und rückt 4 px deutlicher von ihnen ab.

   16 · Mobil: Das Datum der Eventkarte bleibt der schmale Kalender des
        Desktops (kein 100-%-Balken).

   17 · Mobil: Die Fußzeile nutzt zwei Spalten, soweit der Platz reicht; die
        beiden Anlagenadressen stehen nebeneinander.

   18 · Mobil: Auf der Eventkarte steht der Kalender oben – seine Kante
        schließt mit dem Veranstaltungstitel ab (Grundlinie: mittig).

   19 · Startseiten-Karte „Ein Beitrag, zwei Anlagen“: zwei Fächer im
        Verhältnis 2 zu 1 – links Beitrags-Tafel mit Hinweis, rechts die
        blaue Aufruf-Box mit Einleitungstext und beiden Knöpfen (gefüllt und
        Geist). Unter 60 rem rutscht die Box unter die Tafel.

   20 · Startseiten-Teaser „Termine & News“: Der Link „Alle Termine & News“
        liegt am Ende des Blocks – auf dem Smartphone führt er unter den
        letzten News-Karten weiter. Ab 55 rem steht er wieder rechts neben
        der Überschrift. */

:root {
  --container-max: 94rem;

  /* Logodurchmesser ungerollt (fließend 152–200 px) und in der Kopfzeile
     liegend (56 px, passt in die minimale Kopfhöhe von 60 px) */
  --logo-d: clamp(9.5rem, 8rem + 6vw, 12.5rem);
  --logo-fit: 3.5rem;
}

@media (width < 80rem) {
  .nav__list {
    gap: 0.125rem;
  }

  .nav__link {
    padding-inline: 0.45rem;
    white-space: nowrap;
  }
}

@media (width < 75rem) {
  .site-header__inner > .btn {
    display: none;
  }
}

/* Besuchte Buttons behalten ihre Variante (a:visited der Grundlinie aushebeln) */
.btn--fill:visited {
  color: var(--on-primary);
}

.btn--fill:visited:hover {
  color: var(--on-primary);
}

.btn--outline:visited {
  color: var(--primary);
}

.btn--outline:visited:hover {
  color: var(--on-primary-soft);
}

.btn--ghost:visited {
  color: var(--primary);
}

.btn--ghost:visited:hover {
  color: var(--on-primary-soft);
}

.btn--accent:visited {
  color: var(--on-accent);
}

.btn--inverse:visited {
  color: var(--btn-inverse-ink);
}

.btn--inverse:visited:hover {
  color: var(--btn-inverse-ink-hover);
}

.btn--outline-inverse:visited {
  color: var(--inverse-ink);
}

.btn--outline-inverse:visited:hover {
  color: var(--inverse-ink);
}

/* Brotkrumen im Kopf-Band */
.band .breadcrumb {
  margin-block-end: var(--sp-5);
}

.band .breadcrumb a {
  color: var(--inverse-muted);
}

.band .breadcrumb a:hover {
  color: var(--inverse-ink);
}

.band .breadcrumb [aria-current="page"] {
  color: var(--inverse-ink);
}

/* Abstand, wenn ein Alert direkt über dem nächsten Inhalt steht */
.alert + * {
  margin-block-start: var(--sp-5);
}

/* --------------------------------------------------------------------------
   Vereinslogo (Punkt 6): groß – doppelt so groß wie die Kopfzeile hoch – und
   ragt nach unten in den Intro-Bereich; ab 8 px Scrolltiefe setzt das
   Designsystem-JS .is-scrolled, dann schrumpft das Rund in die Kopfzeile
   hinein. Das Bild bleibt dabei oben verankert und ragt nie über den
   Seitenrand hinaus. Die Negativ-Randmaß-Kontruktion hält die Kopfzeilenhöhe
   konstant: Sie lässt nur --logo-fit (56 px) in der Zeile zählen.
   -------------------------------------------------------------------------- */
.site-header .brand {
  gap: 0;
}

.site-header .brand__mark {
  inline-size: var(--logo-d);
  block-size: var(--logo-d);
  border-radius: var(--radius-xl);
  background-color: var(--surface);
  padding: 5.5%;
  /* Negativ-Randmaß hält die Kopfzeilenhöhe konstant (nur --logo-fit zählt
     in der Zeile); der Rand oben schiebt das Logo bündig an den Kopfbeginn */
  margin-block-end: calc(var(--logo-fit) - var(--logo-d));
  margin-block-start: calc(var(--logo-fit) - var(--header-h));
  position: relative;
  z-index: 1;
  transition:
    inline-size var(--dur-3) var(--ease-out),
    block-size var(--dur-3) var(--ease-out),
    margin-block-end var(--dur-3) var(--ease-out),
    margin-block-start var(--dur-3) var(--ease-out),
    background-color var(--dur-3) var(--ease-out);
}

/* Gescrollt: Rund passt wieder in die Kopfzeile, Flächenfarbe weg – der
   transparente Kopf mit Weichzeichnung bleibt unberührt */
.site-header.is-scrolled {
  --logo-d: var(--logo-fit);
}

.site-header.is-scrolled .brand__mark {
  margin-block-start: 0;
  background-color: transparent;
}

/* Kopf-Band der Unterseiten: weil das Logo groß in den Intro-Bereich ragt,
   beginnt sein Inhalt erst unterhalb des Rund – der Aufschlag bleibt auch
   nach dem Schrumpfen stehen und verhindert ein Springen beim Scrollen. */
main > .band:has(> .container > .breadcrumb) {
  padding-block-start: calc(var(--logo-d) - 3.5rem + var(--sp-4));
}

/* Fußzeile: Duo-Ton direkt über die Füllungen des Inline-SVGs.
   Gewünscht: dunkle Parts --ink, blaue Parts --ink-muted. Der Fußzeilen-
   Farbkontext .band-token dreht diese Tokens auf die hellen Gegenstücke
   (inverse-ink / inverse-muted) – so bleibt die Zuordnung wörtlich und
   trotzdem kontraststark (13.9:1 und 11.4:1 auf brand-800). */
.site-footer .brand {
  gap: 0;
  margin-block-end: var(--sp-3);

  --logo-duo-dunkel: var(--ink);
  --logo-duo-blau: var(--ink-muted);
}

.site-footer .brand__mark {
  inline-size: 8rem;
  block-size: 8rem;
}

/* --------------------------------------------------------------------------
   Gleichmäßige Navigationsabstände (Punkt 7): Der Chevron wird aus dem
   Flex-Fluss genommen und mittig in den Zwischenraum --nav-gap gesetzt.
   Übrigens: Die Grundlinien-Regel für den offenen Zustand (rotate) muss
   hier mit translateY wiederholt werden, sonst springt der Chevron hoch.
   -------------------------------------------------------------------------- */
.nav__item.has-children > .nav__link {
  position: relative;
}

.nav__item.has-children .nav__caret {
  position: absolute;
  inset-block-start: 50%;
  inset-inline-end: calc(var(--nav-gap) / 2 - 0.25rem);
  inline-size: 0.5rem;
  block-size: 0.5rem;
  transform: translateY(-50%);
}

.nav__item.has-children[data-open="true"] > .nav__link .nav__caret {
  transform: translateY(-50%) rotate(180deg);
}

@media (width < 80rem) {
  .nav__item.has-children .nav__caret {
    inset-inline-end: -0.15625rem;
    inline-size: 0.4375rem;
    block-size: 0.4375rem;
  }
}

/* --------------------------------------------------------------------------
    Punkt 8 ist entfallen: Das Partnerlogo auf der PPA-Standortkarte wurde
    auf Wunsch wieder entfernt (HTML und CSS). Die Nummer bleibt stehen,
    damit die Zählung der Punkte unverändert auffindbar bleibt.
   -------------------------------------------------------------------------- */

/* --------------------------------------------------------------------------
   Punkt 9: PPA-Wortmark im Kennzahlen-Band der Startseite – rechts neben
   den Zahlen, auf dem dunklen Band braucht die weiße Wortmark keine eigene
   Fläche. Bei schmalem Raum bricht sie unter die Zahlen.
   -------------------------------------------------------------------------- */
.kennzahlen-mit-partner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  column-gap: var(--sp-6);
  row-gap: var(--sp-5);
}

.kennzahlen-mit-partner .stats {
  flex: 1 1 24rem;
}

.kennzahlen__partner {
  flex: none;
  margin-inline-start: auto;
}

.kennzahlen__partner img {
  inline-size: clamp(8rem, 18vw, 11rem);
  block-size: auto;
  background-color: transparent;
}

/* --------------------------------------------------------------------------
   Punkt 10: Hinweisleiste (.notice) der Startseite. Die blaue Fläche bleibt
   randlos, der Text steht im unsichtbaren .container (maximale
   Seitenbreite) und ist linksbündig. Er beginnt gleich hinter dem großen
   Kopf-Logo: Die Textspalte ist um die Logobreite plus Luft eingerückt.
   Unter 34 rem nutzt der Text die volle Breite und läuft als Laufband unter
   dem Logo durch – siehe Punkt 14. Der Hero bleibt von alldem unberührt.
   -------------------------------------------------------------------------- */
.notice {
  display: block;
}

.notice > .container {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2) var(--sp-4);
  align-items: center;
  text-align: start;
  padding-inline-start: calc(var(--container-pad) + var(--logo-d) + var(--sp-6));
}

/* Zu schmal für die Spalte neben dem Logo: der Text nutzt die volle Breite
   und läuft (Punkt 14) als Laufband unter dem Logo durch. */
@media (width < 34rem) {
  .notice > .container {
    padding-inline-start: var(--container-pad);
    padding-block-start: 0;
  }
}

/* --------------------------------------------------------------------------
   Punkt 11: Abbildungen in Raster-Spalten (z. B. „So findest du uns“): Das
   Grundlinie-Randmaß oben am figure dient dem Fließtext und schiebt das Bild
   unter den Inhalt der Nebenspalte. Im Raster beginnt es auf gleicher Höhe.
   -------------------------------------------------------------------------- */
.grid > figure {
  margin-block-start: 0;
}

/* --------------------------------------------------------------------------
   Punkt 12: Einheitlicher Bereichsrhythmus. Treffen zwei helle Sektionen
   aufeinander, addierten sich deren Innenabstände (96 + 96 = 192). Nach
   einer hellen Sektion startet die nächste ohne eigenen oberen Abstand –
   es bleibt überall bei einem 96er-Takt. Dunkle Bänder behalten ihren
   etwas größeren Abstand, das ist der Rhythmus des Design-Systems.
   -------------------------------------------------------------------------- */
main > .section:not(.band) + .section:not(.band) {
  padding-block-start: 0;
}

/* --------------------------------------------------------------------------
   Punkt 13: Kopf-Logo mobil. Auf schmalen Geräten (unter 34 rem) ist das
   große Rund zu wuchtig – es bleibt bei höchstens 125 px stehen. Alle
   Abhängigen (Negativ-Randmaß, Band-Aufschlag, Hinweisleiste) rechnen über
   --logo-d automatisch mit.
   -------------------------------------------------------------------------- */
@media (width < 34rem) {
  :root {
    --logo-d: 7.8125rem; /* 125 px */
  }
}

/* --------------------------------------------------------------------------
   Punkt 14: Ankündigungsband als Laufband (mobil). Der Text soll nie
   umbrechen, die Bandhöhe ist dieselbe wie auf dem Desktop und das Band
   läuft unter dem Kopf-Logo durch. Mit dem Finger (oder der Maus) lässt es
   sich endlos nach links und rechts schieben – in beide Richtungen ohne
   Ende und ohne Sprung. Getragen wird der Track von einer endlosen
   Kommazahl-Position in assets/js/projekt.js (translateX, modulo der
   Schleifeneinheit, mit Nachschwung); natives Scrollend würde dieses
   Umkehren nie mitmachen, deshalb hier overflow: hidden und touch-action.
   Im HTML liegt eine zweite, aria-hidden Kopie (.notice__copy) hinter dem
   Inhalt; zusammen mit dem Schlussabstand ist die halbe Trackbreite genau
   eine Wiederholungseinheit. Auf dem Desktop ist der Track
   display:contents und die Kopie ausgeblendet – dort gilt Punkt 10
   unverändert.
   -------------------------------------------------------------------------- */
.notice__track {
  display: contents;
}

.notice__copy {
  display: none;
}

@media (width < 34rem) {
  .notice {
    overflow: hidden;
  }

  .notice > .container {
    display: block;
    overflow: hidden;
    padding-inline-start: var(--container-pad);
    /* Waagerecht schiebt allein das JS (endlose Position), senkrecht darf
       die Seite ganz normal weiterscrollen */
    touch-action: pan-y;
  }

  .notice__track {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-4);
    padding-inline-end: calc(var(--sp-4) + var(--sp-6));
    white-space: nowrap;
    will-change: transform;
  }

  .notice__copy {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-4);
    margin-inline-start: var(--sp-6);
  }
}

 /* Reduced Motion: kein automatischer Durchlauf – der Text darf wieder
    umbrechen; von Hand scrollen ist weiter möglich, wo der Platz reicht. */
@media (width < 34rem) and (prefers-reduced-motion: reduce) {
  .notice__track {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-2) var(--sp-4);
    padding-inline-end: 0;
    white-space: normal;
  }

  .notice__copy {
    display: none;
  }
}

/* --------------------------------------------------------------------------
   Punkt 15: Partnerlogo im Kennzahlen-Band (mobil). Bricht es unter die
   Zahlen, steht es linksbündig; der Reihenabstand wächst um 4 px, damit die
   Wortmark nicht direkt an den Kennzahlen klebt.
   -------------------------------------------------------------------------- */
@media (width < 48rem) {
  .kennzahlen-mit-partner {
    row-gap: calc(var(--sp-5) + 4px);
  }

  .kennzahlen__partner {
    margin-inline-start: 0;
  }
}

/* --------------------------------------------------------------------------
   Punkt 16: Eventkarte mobil. Die Grundlinie macht das Datumsfeld unter
   30 rem zu einem 100-%-Balken; gewünscht bleibt der schmale Kalender wie
   auf dem Desktop – das Raster bleibt zweispaltig (Datum links, Text rechts).
   -------------------------------------------------------------------------- */
@media (width < 30rem) {
  .event {
    grid-template-columns: auto 1fr;
  }

  .event__date {
    inline-size: 4.25rem;
  }
}

/* --------------------------------------------------------------------------
   Punkt 17: Fußzeile mobil. Unter 34 rem reichen zwei Spalten für die
   Linkgruppen; die Marke mit den Anlagenadressen bleibt volle Breite. Dank
   auto-fit bleibt es auf sehr schmalen Geräten (unter etwa 18 rem) bei einer
   Spalte – zwei Spalten gibt es nur, wo platzmäßig möglich. In der Marken-
   spalte stehen die beiden Anlagenadressen nebeneinander (zwei halbe
   Spalten, das Rund darüber volle Breite).
   -------------------------------------------------------------------------- */
@media (width < 34rem) {
  .site-footer__grid {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 10rem), 1fr));
    gap: var(--sp-7) var(--sp-5);
  }

  .site-footer__grid > :first-child {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: var(--sp-4);
  }

  .site-footer__grid > :first-child .brand {
    grid-column: 1 / -1;
  }
}

/* --------------------------------------------------------------------------
   Punkt 18: Eventkarte mobil. Der Kalender steht oben, seine Oberkante
   schließt mit dem Veranstaltungstitel ab. Die Grundlinie stellt ihn
   mittig – das rutscht auf dem schmalen Bildschirm auseinander, sobald
   der Text zwei oder drei Zeilen braucht.
   -------------------------------------------------------------------------- */
@media (width < 34rem) {
  .event {
    align-items: start;
  }
}

/* --------------------------------------------------------------------------
   Punkt 19: Startseiten-Karte „Ein Beitrag, zwei Anlagen“. Die Karte teilt
   sich in zwei Fächer: links Beitrags-Tafel und Hinweis, rechts die blaue
   Aufruf-Box. Die Box ist ein dunkles Band und braucht keine eigene
   Dunkelform – .band-token dreht die Tokens für Titel, Text und Knöpfe.

   Randbild: die Box schiebt sich über das Polster der weißen Karte und geht
   randbündig in sie über. Am Desktop oben, rechts und unten – deshalb bleibt
   sie links ohne Rundung. Unter 60 rem links, rechts und unten – deshalb
   oben ohne Rundung. Die rechte Spur ist so breit wie die dritte Karte der
   News-Reihe darüber: (Kartenbreite – Kartenpolster – zwei Rasterabstände)
   geteilt durch drei. Damit deckt sich ihre linke Kante mit der Kante der
   dritten Nachrichtenkarte.
   -------------------------------------------------------------------------- */
.card--split {
  display: grid;

  /* Unter 60 rem steht die Box unter der Tafel: mehr Abstand als der
     Karteninnenabstand, sonst klebt der blaue Block am Hinweistext. */
  row-gap: var(--sp-6);

  /* Die Box reicht bis an die Kartenecke; der Überstand wird beschnitten. */
  overflow: clip;
}

.cta-box {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  padding: var(--sp-6);

  /* Mobil: randbündig am linken, rechten und unteren Kartenrand. */
  margin-inline: calc(var(--card-pad) * -1);
  margin-block-end: calc(var(--card-pad) * -1);
  border-radius: 0 0 var(--radius-lg) var(--radius-lg);

  /* .band-token dreht keine Tonfläche: der Hover-Chip des Geisterknopfes wäre
     sonst hell. Hier bekommt die Box ihre dunklen Gegenstücke. */
  --primary-soft: rgb(255 255 255 / 0.12);
  --on-primary-soft: var(--inverse-ink);
}

@media (width >= 60rem) {
  .card--split {
    grid-template-columns: 1fr
      calc((100% - var(--card-pad) - 2 * var(--gap-grid)) / 3);
    column-gap: var(--sp-7);
    align-items: stretch;
  }

  /* Desktop: randbündig am oberen, rechten und unteren Kartenrand. */
  .cta-box {
    margin-inline-start: 0;
    margin-block-start: calc(var(--card-pad) * -1);
    border-radius: 0 var(--radius-lg) var(--radius-lg) 0;

    /* Titel der Box und Titel der Tafel beginnen auf einer Höhe. */
    padding-block-start: var(--card-pad);
  }

  /* In der schmalen Spur bekommen die Knöpfe eigene Zeilen. Der Knopftext
     darf umbrechen, damit er in keiner Breite über die Box ragt. */
  .cta-box .card__foot {
    flex-direction: column;
    align-items: stretch;
    padding-block-start: var(--sp-4);
  }

  .cta-box .btn {
    white-space: normal;
    line-height: 1.15;
  }
}

/* --------------------------------------------------------------------------
   Punkt 20: Startseiten-Teaser „Termine & News“. Der Link „Alle Termine &
   News“ liegt im HTML am Ende des Blocks; auf dem Smartphone führt er damit
   unter den letzten News-Karten weiter, statt die Kartenliste zu unter-
   brechen. Ab 55 rem holt ihn das Raster des Containers zurück in die
   Kopfzeile (rechts neben die Überschrift, unten bündig wie zuvor).

   Kopfzeilen-Abstand: ohne Raster käme er aus dem Randmaß des Kopfs. Da der
   Knopf in derselben Zeile sitzt und diese Zeile sonst so hoch würde wie
   Kopf plus Randmaß, liegt das Randmaß (sp-7) hier am Terminraster.
   -------------------------------------------------------------------------- */
.termine-teaser__more {
  margin-block-start: var(--sp-6);
}

@media (width >= 55rem) {
  .termine-teaser {
    display: grid;
    grid-template-columns: 1fr auto;
    column-gap: var(--sp-4);
  }

  .termine-teaser > .section__head {
    grid-column: 1;
    grid-row: 1;
    margin-block-end: 0;
  }

  .termine-teaser > .section__head + .grid {
    margin-block-start: var(--sp-7);
  }

  .termine-teaser > .grid {
    grid-column: 1 / -1;
  }

  .termine-teaser__more {
    grid-column: 2;
    grid-row: 1;
    justify-self: start;
    align-self: end;
    margin-block-start: 0;
  }
}