/* ==========================================================================
   site-chrome.css – gemeinsamer Header (Logo, Hauptnav, Text-größer/Menü) und
   Footer (Links, Kontakt, Copyright) für alle Seiten außerhalb des Admin-Bereichs
   und des Anmeldesystems.

   Einbindung: NACH home.css bzw. kurs.css laden (site-header.php/site-footer.php
   selbst binden nichts ein, siehe dort).

   WICHTIG – Layout-Logik: Der Header hat DREI Zustände, die NICHT über feste
   Breakpoints (@media) entschieden werden, sondern von site-chrome.js anhand
   tatsächlich gemessener Breiten (Logo, Wortlaut, Nav, Buttons – bei aktueller
   "Text größer"-Skalierung). site-chrome.js setzt dafür die Klassen .is-compact
   bzw. .is-stacked auf #siteHead; ohne beide Klassen gilt der volle Zustand.
   Grund für diesen Ansatz: Bei fixen Breakpoints passte die Platzaufteilung bei
   bestimmten Fensterbreiten nicht (zu viele variable Faktoren: Textskalierung,
   Wortlautlänge, Logogröße).

   Skalierung ("Text größer"): läuft NICHT über rem/die --scale-Kette aus
   home.css (html { font-size: calc(16px * var(--scale)) }), weil kurs.css diese
   Kette nicht implementiert (eigener, noch offener Punkt für Kursseiten-Inhalte).
   Der Header skaliert stattdessen jede Schriftgröße direkt über
   calc(<Basiswert>px * var(--scale, 1)) – funktioniert dadurch identisch auf
   Startseite, Kurs- und Stammtisch-Seiten, unabhängig vom jeweiligen
   Seiten-Stylesheet. Das A1-Logo ist bewusst ausgenommen (Bildmarke, CI-Größe
   soll durch die Bedienungshilfe nicht verzerrt werden) – ändert seine Größe
   ausschließlich über den Scroll-Zustand (.is-scrolled, siehe unten).

   CSS-Variablen: home.css/kurs.css/site.css/admin.css verwenden seit der
   Vereinheitlichung (siehe PROJECT_A1Sa.md Abschnitt 6) durchgängig dasselbe
   Vokabular (--a1-font-serif/--a1-font-sans/--a1-black etc.). Die hier
   verbliebenen Literal-Fallbacks (z. B. var(--a1-black, #000000)) sind reine
   Absicherung für den Fall, dass künftig ein Stylesheet ohne dieses Vokabular
   eingebunden wird – keine Reaktion mehr auf zwei unterschiedliche Namen.
   ========================================================================== */

/* ---------- Sticky Footer (projektweit) ----------
   Body als Flex-Spalte über die volle Fensterhöhe, .site-main (siehe
   site-header.php/site-footer.php – umschließt bewusst als gemeinsame Klammer
   um ALLES zwischen Header und Footer, unabhängig davon, ob eine Seite ein
   <main> hat oder mehrere <section>-Geschwister direkt im Body) wächst über
   flex:1 in den verbleibenden Platz. Ohne diese Regel bleibt der Footer bei
   kurzen Seiten (z. B. /feedback/?step=danke) weit über dem unteren
   Fensterrand stehen, darunter bleibt Leerraum – sichtbar wird das nur, wenn
   der Seiteninhalt kürzer als die Fensterhöhe ist, betrifft aber jede
   aktuelle und künftige Seite mit wenig Inhalt, nicht nur die Danke-Seite.
   Bewusst NICHT über footer.site-foot { margin-top: auto } gelöst: das würde
   den bestehenden festen margin-top (siehe unten) auf normal langen Seiten
   auf 0 zurücksetzen (Auto-Margin verbraucht nur tatsächlich vorhandenen
   Leerraum). Die Wrapper-Lösung ändert an den bestehenden Seiten sonst
   nichts – .site-main hat kein eigenes CSS außer flex:1, jede Seite behält
   ihr bisheriges Layout innerhalb des Wrappers unverändert. */
body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}
.site-main {
  flex: 1 0 auto;
}

/* ---------- Header: Grundgerüst ---------- */
.site-head {
  /* Von nav.main-nav (gap) UND .wrap (column-gap) verwendet, damit der Abstand
     zwischen Menüpunkten und links/rechts vom Menü nie auseinanderläuft. */
  --nav-item-gap: 2rem;
  border-bottom: 1px solid var(--a1-light);
  position: sticky;   /* "sticky" ist bereits ein positionierter Wert (position !== static) –
                          dient zugleich als Bezugsrahmen für das absolut positionierte Logo,
                          kein zusätzliches position:relative nötig (würde sticky überschreiben). */
  top: 0;
  background: var(--a1-white);
  z-index: 20;
  /* Bezugsrahmen für das absolut positionierte Logo (siehe .site-logo-link unten). */
}
.site-head .wrap {
  display: grid;
  /* "text" bewusst NICHT mehr 1fr: sonst schluckt der Text die gesamte
     Restbreite und Nav+Buttons rutschen beide gemeinsam an den rechten Rand
     (sichtbar rechtsbündige statt zentrierte Nav). Jetzt ist "nav" die
     flexible Spalte – sie bekommt die komplette verbleibende Breite zwischen
     Text und Buttons und zentriert ihren Inhalt darin selbst (siehe
     justify-content:center bei nav.main-nav weiter unten). */
  grid-template-columns: auto 1fr auto;
  grid-template-areas: "text nav actions";
  align-items: center;
  column-gap: var(--nav-item-gap);   /* siehe --nav-item-gap in .site-head */
  row-gap: 0;               /* siehe Kommentar unten bei .site-head.is-compact .wrap */
  /* Explizit "none", nicht weggelassen: sonst rückt die allgemeinere Regel
     ".wrap { max-width: var(--container) }" aus home.css nach (1000–1440px
     je nach Seite), sobald diese spezifischere Regel fehlt. */
  max-width: none;
  height: 68px;
  margin: 0 auto;
  padding: 0 24px;
}

/* Nur zur Breitenmessung (site-chrome.js) – nie sichtbar, kein Platzverbrauch im
   echten Layout, kein Bestandteil der Tab-Reihenfolge.
   WICHTIG: position:fixed, NICHT absolute! Diese Kopie hat bewusst keine
   Breitenbegrenzung (misst die "natürliche" Breite ihrer Kinder). Mit
   position:absolute zählte sie trotzdem zum scrollbaren Seitenbereich, sobald
   sie breiter als der Viewport wurde – Folge: ab ca. 1120px Fensterbreite (wo
   ihre natürliche Breite die Fensterbreite übersteigt) erschien ein horizontaler
   Scrollbalken für die GESAMTE Seite. position:fixed positioniert relativ zum
   Viewport und wird vom Browser bewusst NICHT in die scrollbare Fläche
   eingerechnet – behebt das, ohne die Messung selbst zu beeinflussen. */
.site-head-measure {
  position: fixed;
  visibility: hidden;
  top: -9999px;
  left: 0;
  display: block;
  white-space: nowrap;
  pointer-events: none;
}
.site-head-measure .site-logo-link,
.site-head-measure .site-brand-text,
.site-head-measure nav.main-nav,
.site-head-measure .head-actions {
  position: static;
  display: inline-flex;
  visibility: visible;   /* innerhalb des versteckten Elternelements irrelevant, aber sauber */
}
/* Der Menü-Button ist im VOLLEN Zustand real unsichtbar (display:none, siehe
   .nav-toggle unten) – für die Messung wird er trotzdem immer als vorhanden
   gerechnet. Das macht die Schwelle "voll -> kompakt" minimal konservativer
   (ein paar Pixel früherer Wechsel, als real zwingend nötig), vermeidet dafür
   zuverlässig einen weiteren mölichen Rückkopplungseffekt zwischen den beiden
   Zuständen. */
.site-head-measure .nav-toggle {
  display: inline-flex;
}

/* ---------- Logo + Wortlaut ----------
   CI-Vorgabe: kein fusioniertes Logo+Wortmarke-Bild – a1-logo.jpg enthält
   ausschließlich das A1-Logo, "A1 Seniorenakademie" ist reiner Text.
   Logo ist im vollen UND kompakten Zustand aus dem normalen Zeilenfluss gelöst
   (position: absolute) – dadurch kann es unten aus der Zeile herausragen und
   über dem darunterliegenden Bild schweben, während Zeilenhöhe/Textposition
   unverändert bleiben. Nur im zweizeiligen Zustand (.is-stacked) wandert es
   zurück in den normalen Grid-Fluss (siehe dort). */
.site-logo-link {
  position: absolute;
  left: 8px;   /* fest, da .wrap kein max-width/Zentrierung mehr hat (siehe dort) */
  top: 13px;
  z-index: 5;
  line-height: 0;
}
.site-brand-logo {
  display: block;
  height: 110px;          /* Ausgangsgröße (ungescrollt): ragt bewusst unten heraus */
  width: auto;
  transition: height 0.2s ease;
  /* Geschrumpfte Logogröße als Variable, EINMAL hier definiert – wird an drei
     Stellen wiederverwendet: gescrollter Zustand (voll), kompakter Zustand, und
     jetzt zusätzlich als Zwischenstufe im zweizeiligen Zustand bei Platzmangel
     (.is-logo-small, siehe dort) statt einer weiteren eigenen Zahl. */
  --logo-shrunk-height: 42px;
}
/* Bewusst auf ".wrap" beschränkt (NICHT global) – die Messkopie für die
   Platzberechnung (.site-head-measure, liegt außerhalb von .wrap) bleibt dadurch
   IMMER bei der großen Logogröße (110px), unabhängig vom Scroll-Zustand. Vorher
   traf diese Regel auch die Messkopie: Sie wurde beim Scrollen kleiner (110px ->
   42px), wodurch der für den vollen Zustand berechnete Platzbedarf beim Scrollen
   plötzlich um 68px sank – Folge war ein Rückkopplungsfehler (voll <-> kompakt
   wechselte je nach Scroll-Zustand bei GLEICHER Fensterbreite hin und her, siehe
   PROJECT_A1Sa.md). Der real sichtbare Header (siehe .wrap-Selektor) wächst/
   schrumpft weiterhin ganz normal beim Scrollen – nur die Messung nicht mehr. */
.site-head.is-scrolled .wrap .site-brand-logo { height: var(--logo-shrunk-height); }
/* Im kompakten Zustand kein Wachsen/Schrumpfen mehr – fix auf die kleine Größe,
   damit die Platzberechnung (site-chrome.js) stabil bleibt und der Nutzer nicht
   durch ein springendes Logo irritiert wird, während sich das Fenster ohnehin
   schon im knappen Platzbereich befindet.
   WICHTIG: explizit auf ".wrap" beschränkt, NICHT nur ".site-head.is-…" – sonst
   träfe die Regel auch das Logo in der unsichtbaren Messkopie (.site-head-measure
   liegt außerhalb von .wrap) und würde einen Rückkopplungsfehler auslösen: Die
   Messkopie würde plötzlich die kompakte Größe zeigen, sobald der kompakte
   Zustand aktiv ist – wodurch die NÄCHSTE Berechnung fälschlich "passt wieder"
   ergäbe und sofort zurück in den vollen Zustand wechselte (ständiges Hin-und-Her). */
.site-head.is-compact .wrap .site-brand-logo,
.site-head.is-compact.is-scrolled .wrap .site-brand-logo {
  height: var(--logo-shrunk-height);
  transition: none;
}
/* Zweizeilig: eigene, größere Größe passend zur Höhe der zwei Textzeilen (statt
   der kleinen 42px aus dem kompakten Zustand) – ebenfalls fix, kein Wachsen/
   Schrumpfen, aus denselben Gründen wie oben. Bewusst als eigener Wert (nicht an
   die 42px gekoppelt), damit er unabhängig von der kompakten Größe angepasst
   werden kann. */
.site-head.is-stacked .wrap .site-brand-logo,
.site-head.is-stacked.is-scrolled .wrap .site-brand-logo {
  height: 84px;
  transition: none;
}
/* Zwischenstufe bei Platzmangel im zweizeiligen Zustand: statt direkt auszublenden,
   erst auf die bereits vorhandene "geschrumpfte" Größe wechseln (dieselbe wie im
   kompakten Zustand) – bessere Markenpräsenz als sofortiges Ausblenden, keine neue
   Zahl im Code. site-chrome.js setzt .is-logo-small, wenn 84px nicht mehr reicht,
   42px aber noch ausgeht. Reicht selbst das nicht, greift weiterhin .is-logo-hidden. */
.site-head.is-stacked.is-logo-small .wrap .site-brand-logo {
  height: var(--logo-shrunk-height);
}
.site-head.is-stacked.is-logo-small .wrap .site-logo-link {
  min-width: var(--logo-shrunk-height);  /* Logo ist quadratisch: Breite = Höhe */
}

.site-brand-text {
  grid-area: text;
  display: block;
  padding-left: 92px;   /* reserviert die Logoposition, damit der Text unabhängig vom Logo an seiner Stelle bleibt */
  text-decoration: none;
  font-weight: 700;
  /* calc()-Skalierung statt rem – siehe Erklärung oben im Dateikopf. */
  font-size: calc(22px * var(--scale, 1));
  /* Seit der CSS-Variablen-Vereinheitlichung (siehe PROJECT_A1Sa.md Abschnitt 6)
     heißt die Schriftvariable überall --a1-font-serif; der Literal-Fallback
     bleibt als reine Absicherung stehen (analog zu den übrigen defensiven
     Resets in dieser Datei), nicht mehr weil zwei unterschiedliche Namen
     existieren. */
  font-family: var(--a1-font-serif, Georgia, serif);
  /* --a1-black ist jetzt auch in kurs.css definiert; Literal-Fallback bleibt
     als Absicherung bestehen, falls eine Seite künftig ein Stylesheet ohne
     dieses Vokabular einbindet. */
  color: var(--a1-black, #000000);
  white-space: nowrap;
}
/* Nur der ECHTE Text rückt weiter nach rechts (Kollisionsgefahr mit dem Logo) –
   bewusst auf ".wrap" beschränkt, damit die Messkopie (außerhalb von .wrap)
   weiterhin mit 92px rechnet und sich dadurch KEINE der Breitenberechnungen
   ändert (nur die sichtbare Position verschiebt sich, um 20px). */
.wrap .site-brand-text {
  padding-left: 97px;
}

/* ---------- Nav ---------- */
nav.main-nav {
  grid-area: nav;
  display: flex;
  align-items: center;
  justify-content: center;  /* zentriert die Links innerhalb der jetzt flexiblen Nav-Spalte */
  gap: var(--nav-item-gap);  /* dieselbe Variable wie .wrap column-gap, siehe .site-head */
  flex-wrap: nowrap;   /* kein internes Umbrechen mehr nötig – der Zustandswechsel
                          (voll → kompakt) übernimmt diese Aufgabe jetzt vollständig */
  /* WICHTIG: position/top/left/right/flex-direction hier EXPLIZIT auf den
     Normalzustand zurückgesetzt. Grund: home.css enthält noch eine alte,
     ungenutzt geglaubte Regel (@media max-width:1024px), die nav.main-nav auf
     position:absolute + flex-direction:column setzt (Dropdown-Optik) – bei
     GLEICHER Selektor-Spezifität wie diese Regel hier gewinnt zwar "display"
     zuverlässig (da hier gesetzt), aber position/flex-direction NICHT, weil sie
     hier bisher gar nicht angefasst wurden und die alte Regel dafür unwiderlegt
     durchschlug. Ergebnis war: Nav erschien dauerhaft wie ein offenes Dropdown,
     unabhängig vom tatsächlich berechneten Zustand (voll/kompakt/zweizeilig).
     Echte Bereinigung der alten home.css-Regel steht weiterhin aus (siehe
     Aufräum-Punkt im Dateikopf) – dieser Reset macht die Kollision bis dahin
     unschädlich, unabhängig davon, ob die alte Regel entfernt wird oder nicht. */
  position: static;
  top: auto;
  left: auto;
  right: auto;
  flex-direction: row;
}
nav.main-nav a {
  text-decoration: none;
  font-weight: 600;
  font-size: calc(18px * var(--scale, 1));
  font-family: var(--a1-font-sans, inherit);
  color: var(--a1-dark);
  padding: 0.4rem 0;
  border-bottom: 3px solid transparent;
  white-space: nowrap;
}
nav.main-nav a:hover,
nav.main-nav a:focus-visible { border-color: var(--a1-red-4); }

/* ---------- Buttons ---------- */
.head-actions { grid-area: actions; display: flex; align-items: center; gap: 0.75rem; }

.text-toggle,
.nav-toggle {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 600;
  font-size: calc(16px * var(--scale, 1));
  font-family: var(--a1-font-sans, inherit);
  cursor: pointer;
  color: var(--a1-dark);
  white-space: nowrap;
  padding: 0.4rem 0.9rem;
}
.text-toggle {
  background: var(--a1-light);
  border: 1px solid var(--a1-gray);
  border-radius: 999px;
}
.text-toggle:hover,
.text-toggle:focus-visible { background: var(--a1-red-1); border-color: var(--a1-red-4); }

.nav-toggle {
  display: none;   /* wird erst in .is-compact/.is-stacked sichtbar, siehe unten */
  background: var(--a1-white);
  border: 1px solid var(--a1-gray);
}
.nav-toggle:hover,
.nav-toggle:focus-visible { border-color: var(--a1-red-4); color: var(--a1-red-4); }

/* ==========================================================================
   Zustand "kompakt" (.is-compact): Nav verschwindet ins Hamburger-Menü, Logo,
   Wortlaut und Buttons bleiben nebeneinander in einer Zeile (Logo verhält sich
   dabei weiterhin wie im vollen Zustand – wächst/schrumpft mit dem Scrollen).
   ========================================================================== */
.site-head.is-compact .wrap {
  grid-template-columns: 1fr auto;
  grid-template-areas: "text actions";
  /* WICHTIG: grid-template-rows/row-gap hier explizit zurückgesetzt. Grund:
     home.css enthält (enthielt) eine alte Regel (@media max-width:767px), die
     .site-head .wrap auf grid-template-rows:"auto auto" + row-gap:0.5rem setzte
     (zweizeiliges Mobil-Layout aus der Zeit vor unserem Umbau). Diese Regel hier
     überschrieb bisher nur grid-template-columns/-areas, nicht rows/row-gap –
     dadurch blieb die alte 2-Zeilen-Aufteilung unbemerkt aktiv und verschob
     Text/Buttons sichtbar nach oben (Symptom: "Titelmenü ab 767px nicht mehr
     vertikal mittig"). Dieser Reset macht die Kollision unschädlich, auch falls
     die alte Regel (siehe home-css-bereinigung.md, Block 3) irgendwo doch nicht
     vollständig entfernt wurde oder eine ähnliche Regel künftig wieder auftaucht. */
  grid-template-rows: 68px;
  row-gap: 0;
}
/* Alle folgenden Regeln explizit auf ".wrap" beschränkt (siehe Begründung beim
   Logo weiter oben) – betrifft hier zusätzlich die Nav: ohne diese Beschränkung
   würde "display: none" auch die Nav-Kopie in der Messhilfe treffen, ihre
   gemessene Breite würde auf 0 fallen, und die Platzberechnung hielte den vollen
   Zustand fälschlich für passend -> derselbe Rückkopplungsfehler wie beim Logo,
   diesmal an der kritischeren Stelle (das war die Hauptursache des Schaukelns).
   Breite: width:max-content statt left:0/right:0 (voller Breite) – die Box ist
   nur so breit wie der breiteste Menüpunkt und rechtsbündig unter dem
   Hamburger-Button ausgerichtet, statt über die volle Kopfzeilenbreite zu
   spannen. */
.site-head.is-compact .wrap nav.main-nav {
  display: none;
  position: absolute;
  right: 0;
  top: 100%;
  width: max-content;
  max-width: calc(100% - 48px);
  flex-direction: column;
  align-items: stretch;
  gap: 0;
  background: var(--a1-white);
  border: 1px solid var(--a1-light);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
  padding: 0.5rem 24px 1rem;
}
.site-head.is-compact .wrap nav.main-nav.is-open { display: flex; }
.site-head.is-compact .wrap nav.main-nav a { padding: 0.75rem 0; border-bottom: 1px solid var(--a1-light); }
.site-head.is-compact .wrap .nav-toggle { display: flex; }

/* ==========================================================================
   Zustand "zweizeilig" (.is-stacked): oben der Wortlaut, darunter die Buttons.
   Logo bekommt eine eigene, über BEIDE Zeilen reichende Grid-Spalte links –
   dafür zurück in den normalen Grid-Fluss (position: static statt absolute).
   ========================================================================== */
.site-head.is-stacked .wrap {
  height: auto;
  min-height: 84px;
  grid-template-columns: auto 1fr;
  grid-template-rows: auto auto;
  grid-template-areas:
    "logo text"
    "logo actions";
  row-gap: 2px;
  padding: 10px 16px;
}
/* Ab hier ebenfalls konsequent auf ".wrap" beschränkt – gleiche Begründung wie
   beim kompakten Zustand oben (schützt die Messkopie vor denselben Effekten). */
.site-head.is-stacked .wrap .site-logo-link {
  grid-area: logo;
  position: static;
  left: auto;
  top: auto;
  display: flex;
  align-items: center;
  /* Verhindert, dass das Logo bei sehr schmalen Displays (z. B. iPhone 12 mini)
     seitlich schmäler gequetscht wird und dadurch verzerrt erscheint. Grid-Spalten
     mit "auto" dürfen ihren Inhalt bei Platzmangel unter die eigentliche Breite
     zusammendrücken (anders als bei Flexbox reicht "flex-shrink" hier nicht, da
     .site-logo-link ein Grid-Element ist) – min-width erzwingt die tatsächliche
     Logobreite als Untergrenze. 84px, da das Logo quadratisch ist (Breite = Höhe
     bei width:auto/height:84px, siehe .site-brand-logo unten). */
  min-width: 84px;
}
.site-head.is-stacked .wrap .site-brand-text {
  padding-left: 0;
  align-self: end;
}
.site-head.is-stacked .wrap .head-actions {
  align-self: start;
  gap: 0.5rem;
}

/* ---------- Zusatzstufe: Logo ausblenden bei extrem schmalen Displays ----------
   Auch mit min-width (siehe oben) bleibt bei sehr schmalen Geräten (z. B. iPhone
   12 mini, ~375px) zu wenig Platz für Logo + Text/Buttons gleichzeitig – die
   Buttons wurden dabei seitlich aus dem sichtbaren Bereich gedrängt. site-chrome.js
   setzt hier zusätzlich .is-logo-hidden auf #siteHead (Berechnung analog zu
   voll/kompakt/zweizeilig: tatsächlich verfügbarer vs. benötigter Platz, kein
   fester Breakpoint), sobald selbst die zweizeilige Ansicht mit Logo nicht mehr
   ausgeht. Logo verschwindet dann komplett, Text/Buttons bekommen die volle Breite. */
.site-head.is-stacked.is-logo-hidden .wrap {
  grid-template-columns: 1fr;
  grid-template-areas:
    "text"
    "actions";
}
.site-head.is-stacked.is-logo-hidden .wrap .site-logo-link {
  display: none;
}

.site-head.is-stacked .wrap nav.main-nav {
  display: none;
  position: absolute;
  right: 0;
  top: 100%;
  width: max-content;
  max-width: calc(100% - 32px);
  flex-direction: column;
  align-items: stretch;
  gap: 0;
  background: var(--a1-white);
  border: 1px solid var(--a1-light);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
  padding: 0.5rem 16px 1rem;
}
.site-head.is-stacked .wrap nav.main-nav.is-open { display: flex; }
.site-head.is-stacked .wrap nav.main-nav a { padding: 0.75rem 0; border-bottom: 1px solid var(--a1-light); }
.site-head.is-stacked .wrap .nav-toggle { display: flex; }

/* ---------- Footer ---------- */
footer.site-foot {
  /* --a1-black ist seit der CSS-Variablen-Vereinheitlichung auch in kurs.css
     definiert (siehe PROJECT_A1Sa.md Abschnitt 6) – der Fehler, der hier zum
     unsichtbaren Footer auf Kurs-/Stammtisch-Seiten führte (ungültiger
     var()-Wert -> Regel verworfen -> weißer Text auf weißem Hintergrund), kann
     durch diese Variable nicht mehr auftreten. Der Literal-Fallback bleibt als
     reine Absicherung stehen, falls künftig ein Stylesheet ohne dieses
     Vokabular eingebunden wird. */
  background: var(--a1-black, #000000);
  color: var(--a1-white);
  margin-top: 48px;
  padding: 32px;
}
/* Echtes 2×2-Grid statt drei Zeilen: Links (Zeile 1, Spalte 1) neben Kontakt
   (Zeile 1, Spalte 2); Copyright darunter (Zeile 2, Spalte 2). Spalte 1/Zeile 2
   bleibt schlicht leer statt eines unsichtbaren Platzhalter-Elements im Markup –
   dadurch sind beide Spalten automatisch gleich hoch (Zeile 1 links/rechts auf
   derselben Grid-Zeile, Zeile 2 rechts bestimmt die zweite Zeilenhöhe). */
footer.site-foot .wrap {
  max-width: 1440px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto auto;
  row-gap: 0.4rem;
  column-gap: 2rem;
  align-items: center;
  font-size: 16px;   /* einheitliche Schriftgröße für Links UND Kontaktzeile – nur Copyright weicht bewusst ab (14px, siehe unten) */
}
footer.site-foot a { color: var(--a1-white); text-decoration: none; opacity: 0.85; }
footer.site-foot a:hover,
footer.site-foot a:focus-visible { opacity: 1; text-decoration: underline; }

footer.site-foot .foot-links {
  grid-column: 1;
  grid-row: 1;
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
  gap: 0.5rem;   /* von 0.75rem verkleinert – verschafft der Zeile mit Trennstrichen
                    genug zusätzliche Breite (4 Lücken × 4px = 16px), um auf Geräten
                    wie dem iPhone 12 Pro Max quer (~15px knapper Fehlbetrag) auch
                    im Zwei-Spalten-Layout ungebrochen mit Trennstrichen zu passen. */
  flex-wrap: wrap;
  justify-content: center;
}
/* Trennstriche zwischen Impressum/Datenschutz/A1.net (2×) – eigenes <li> statt
   CSS-Pseudo-Element (::after), damit es wie beim Kontakt-Trennstrich per
   aria-hidden bewusst vor Screenreadern verborgen werden kann. */
footer.site-foot .foot-sep { opacity: 0.5; }

/* Nur zur Breitenmessung (site-chrome.js) – exakte Kopie MIT Trennstrichen,
   nie sichtbar, nie umbrechend (flex-wrap:nowrap überschreibt die wrap-Regel
   oben), damit ihre natürliche (unumbrochene) Breite gemessen werden kann.
   font-size hier EXPLIZIT nötig: die Kopie liegt außerhalb von .wrap (bewusst,
   für unabhängige position:fixed-Positionierung) und erbt dadurch NICHT die
   font-size:16px, die .wrap für den echten Footer-Inhalt setzt – ohne diese
   Zeile fiel sie auf die Seiten-Grundschrift zurück (24px aus kurs.css/body),
   wodurch die gemessene Breite um 50% zu groß war und die Trennstriche viel zu
   früh ausgeblendet wurden. */
footer.site-foot .foot-links-measure {
  position: fixed;
  visibility: hidden;
  top: -9999px;
  left: 0;
  flex-wrap: nowrap;
  pointer-events: none;
  font-size: 16px;
}

/* Trennstriche ausgeblendet, sobald sie gemessen nicht mehr in die verfügbare
   Breite der Link-Zeile passen (site-chrome.js vergleicht .foot-links-measure
   gegen die tatsächlich verfügbare Breite und setzt diese Klasse) – KEIN fixer
   Breakpoint mehr, das Kriterium ist die tatsächlich benötigte Breite dieser
   Zeile. Ganzes <li> ausgeblendet (nicht nur der <span>), sonst bliebe ein
   leeres Listenelement mit eigenem Gap-Abstand stehen. */
footer.site-foot .foot-links.foot-links-no-sep li:has(.foot-sep) {
  display: none;
}

footer.site-foot .foot-contact { grid-column: 2; grid-row: 1; margin: 0; text-align: center; }
footer.site-foot .foot-contact span { margin: 0 0.5rem; opacity: 0.5; }
footer.site-foot .foot-copyright { grid-column: 2; grid-row: 2; margin: 0; opacity: 0.6; font-size: 14px; text-align: center; }

/* Schmale Displays: Vorbild a1seniorenakademie.at (eigene Reihenfolge, aber
   zentriert statt linksbündig) – Links auf einer Zeile (nicht einzeln
   untereinander, siehe flex-wrap oben), darunter Kontakt, darunter Copyright.
   Kein 2-Spalten-Grid mehr nötig, daher auch keine leere Zelle mehr relevant.
   Das Ein-/Ausblenden der Trennstriche selbst läuft nicht mehr über diesen
   Breakpoint, sondern klassenbasiert (siehe .foot-links-no-sep oben). */
@media (max-width: 767px) {
  footer.site-foot .wrap {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto;
    row-gap: 1.25rem;
  }
  footer.site-foot .foot-links { grid-column: 1; grid-row: 1; }
  footer.site-foot .foot-contact { grid-column: 1; grid-row: 2; }
  footer.site-foot .foot-copyright { grid-column: 1; grid-row: 3; }
}

/* ---------- KI-Bildkennzeichnung (Art. 50 AI Act, seit 2.8.2026) ---------- */
/* Bildunterschrift unter Hero-/Kartenbildern mit genug Platz (Veranstalter-Hero,
   Kursseiten-Hero, Premiumkurs-Karte). Keine CSS-Variable für Farbe/Abstand
   verwendet, da site-chrome.css auf Seiten mit unterschiedlichen :root-Quellen
   (webinar.css vs. home.css) läuft und nicht alle dort dieselben Variablen
   definieren (siehe PROJECT_A1Sa.md, "CSS-Variablen-Inkonsistenz"). */
.ki-hinweis {
  margin: 0.5rem 0 0;
  padding: 0 1.5rem;
  font-size: 0.95rem;
  color: var(--a1-dark);
  text-align: right;
}
/* Overlay-Badge für dichte Kartenraster ohne Platz für eine eigene Zeile
   (Webinar-Übersicht, Startseite "Nächste Termine"). Braucht ein
   position:relative-Elternelement um das Bild. */
.ki-badge {
  position: absolute;
  bottom: 0.6rem;
  right: 0.6rem;
  background: transparent;
  color: var(--a1-white);
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.85), 0 0 6px rgba(0, 0, 0, 0.6);
  font-size: 0.8rem;
  font-weight: 600;
  line-height: 1.2;
  padding: 0.3rem 0.55rem;
  max-width: calc(100% - 1.2rem);
}