/*
 * global.css – Grundstil des Themes. Zeichengleich zu website/src/styles/global.css der HTML-Fassung (Maßstab dist), nur ohne die
 * drei @import-Zeilen dort (Schriften → schriften.css, Tokens → tokens.css, eigene Handles). Handle ajm-global, lädt auf JEDER
 * Ansicht (PHP-Ansicht, Elementor-Dokument, Editor-Vorschau, WooCommerce) direkt nach tokens.css und vor allen übrigen Stylesheets.
 *
 * WARUM IM THEME UND NICHT NATIV (Begründung seit der Schlussabnahme Runde 1, schluss-vorgabe-r1-7; Werte unverändert):
 *  1. Reichweite: Die Regeln tragen auch Kopf mit Menü, Fuß, Warenkorb-Schublade, die Module (Katalog, Suche, Aktuelles,
 *     Formulare, Brotkrumen), die WooCommerce-Ansichten und alle PHP-Ansichten. Diese Teile baut das Theme, nicht Elementor
 *     (LIESMICH 8 „Was wohin gehört“: global.css gehört ins Theme); ein Elementor-Wert erreicht sie nicht.
 *  2. Nicht ausdrückbar: Elementor hat keine Felder für Element-Selektoren (html, body, *, h1–h4, p, a, img, dialog), für
 *     ::before/::after, ::selection, ::backdrop, ::placeholder, ::marker, :focus-visible, :active, Geschwister-Selektoren (> * + *),
 *     @media (prefers-reduced-motion) / (hover: hover) / (prefers-color-scheme), font-stretch, text-wrap und scroll-padding.
 *  3. Überschriften h1–h4 und Linkfarbe: Die Typografie der Website-Einstellungen (Kit) und die V4-Standardstile für h1–h4 und a
 *     bleiben bewusst leer (LIESMICH 6, Schritt 11): Das Kit schreibt „.elementor-kit-N h1 {…}“ (0,1,1) und überstimmte diese Regeln
 *     (0,0,1) auch in Kopf, Fuß und Modulen; font-stretch: 84 % und text-wrap: balance kennt es nicht. Klassen und lokale Stile der
 *     Dokumente tragen nur Abweichungen vom Tag (ELEMENTOR-PILOT.md Abschnitt 2) und gewinnen dort über die Rangfolge.
 *     GRENZE: Im Editor erscheinen diese Grundwerte nicht als Kit-Wert. Geändert werden sie hier – eine Änderung wirkt auf allen
 *     Seiten. Ob sie zusätzlich als Kit-Standardstil gepflegt werden sollen, entscheidet der Auftraggeber (docs/ELEMENTOR-KLASSEN.md,
 *     Abschnitt „Schlussabnahme Runde 1 – Gruppe ld-schrift“).
 *  Gleichnamige Klassen in Elementor-Dokumenten (btn, kicker, vorspann, textlink, hinweis, prosa, huelle …) sind globale Klassen
 *  (0,1,0 und höher, später geladen); das Rest-CSS schützt die Module gegen sie (docs/ELEMENTOR-UEBERSICHTEN.md, Block „Module“).
 */

/* Rechenmodell für alles, auch Pseudo-Elemente – Universal- und Pseudo-Selektor, nicht nativ (Kopf Punkt 2). */
*,
*::before,
*::after { box-sizing: border-box; }

/* Wurzel: Ankersprünge landen unter dem festen Kopf (scroll-padding-top mit --header-h); Elementor hat kein Feld für html,
   und Bewegung nur ohne prefers-reduced-motion (Kopf Punkt 2). */
html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 1.5rem);
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

/* Seitengrund für alle Ansichten (Hintergrund, Textfarbe, Fließtext-Schrift aus den Tokens). Die Body-Typografie des Kits bleibt
   leer (Kopf Punkt 3); body.ist-gesperrt ist ein Skriptzustand (site.ts/katalog.ts: offene Schublade bzw. Lichtkasten). */
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-text);
  font-size: var(--fs-m);
  line-height: 1.6;
  overflow-wrap: break-word; /* Überlange Wörter (z. B. „Migrant:innenjugendselbstorganisation“) brechen am Zeilenende statt über den Rand zu ragen; sonst keine Wirkung. */
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
body.ist-gesperrt { overflow: hidden; }

/* Medien: Block und nie breiter als der Behälter – Element-Selektoren, auch für Bilder der Module und PHP-Ansichten. */
img, svg, video, iframe { display: block; max-width: 100%; }
img { height: auto; }

/* Überschriften und Absätze über den Tag: Schrift, Breite (font-stretch), Zeilenhöhe, Laufweite, Größe, text-wrap. Nicht als
   Kit-Standardstil (Kopf Punkt 3: Kit leer, font-stretch und text-wrap nicht nativ); Abweichungen tragen Klassen und lokale Stile. */
h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-stretch: 84%;
  font-weight: 700;
  line-height: 1.06;
  letter-spacing: -0.012em;
  margin: 0;
  text-wrap: balance;
}
h1 { font-size: var(--fs-3xl); }
h2 { font-size: var(--fs-2xl); }
h3 { font-size: var(--fs-xl); line-height: 1.15; }
h4 { font-size: var(--fs-l); line-height: 1.2; }
p { margin: 0; text-wrap: pretty; }

/* Links: Farbe und Unterstreichung für Fließtext, Kopf, Fuß und Module; dickere Linie nur bei Zeigergeräten ((hover: hover),
   nicht nativ). Link-Typografie des Kits bleibt leer (Kopf Punkt 3). */
a { color: var(--akzent-text); text-underline-offset: 0.18em; text-decoration-thickness: 1px; }
@media (hover: hover) and (pointer: fine) { a:hover { text-decoration-thickness: 2px; } }

/* Fokusring für Tastaturbedienung – Pseudo-Klasse :focus-visible, nicht nativ. Auf tiefen Flächen helle Fokusfarbe über die
   Klassennamen; in Elementor-Dokumenten tragen die gleichnamigen Haken-Klassen den Namen (ELEMENTOR-KLASSEN 9.12). Elementor 4.3
   löscht den Ring an Links in Absatz- und Überschriften-Widgets (all: unset) – elementor-rest.css stellt ihn dort wieder her. */
:focus-visible {
  outline: 3px solid var(--fokus);
  outline-offset: 3px;
  border-radius: 4px;
}
/* Auf tiefen Flächen braucht der Fokusring eine helle Farbe */
.seitenkopf, .fuss, .hero, .medien, .karte, .weg, .kachel, .projekte, .termine, .fragen, .spenden, .insta-flaeche, .lichtkasten { --fokus: var(--fokus-auf-tief); }

/* Markierfarbe – Pseudo-Element ::selection, nicht nativ. */
::selection { background: var(--blau); color: var(--auf-akzent); }

/* Nur für Vorleseprogramme (.sr-only) und der Sprunglink des Theme-Kopfs (header.php); :focus und die Verschiebung sind Zustände,
   nicht nativ. Die Klasse sr-only in Elementor-Dokumenten nutzt diese Regel (ELEMENTOR-KLASSEN 9.12: keine eigene Regel nötig). */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip-link {
  position: absolute; left: 1rem; top: 1rem; z-index: 100; transform: translateY(-300%);
  background: var(--flaeche); color: var(--text); padding: 0.75rem 1rem;
  border-radius: var(--r-feld); box-shadow: var(--schatten);
}
.skip-link:focus { transform: none; }

/* Layout-Raster der PHP-Ansichten, Module, Kopf und Fuß (Geschwister-Selektor .stapel > * + * nicht nativ). */
/* Layout */
.huelle { width: min(100% - 2 * var(--rand), var(--breite)); margin-inline: auto; }
.huelle-schmal { width: min(100% - 2 * var(--rand), 58rem); margin-inline: auto; }
.abschnitt { padding-block: var(--abschnitt); }
.abschnitt-eng { padding-block: calc(var(--abschnitt) * 0.6); }
.stapel > * + * { margin-top: var(--stapel, 1rem); }

/* Dachzeile und Vorspann der PHP-Ansichten und Module (font-stretch nicht nativ); in Dokumenten gleichnamige globale Klassen. */
.kicker {
  font-family: var(--font-display);
  font-stretch: 100%;
  font-size: var(--fs-xs);
  font-weight: 650;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--akzent-text);
}
.vorspann { font-size: var(--fs-l); line-height: 1.5; color: var(--text-2); max-width: 46rem; }

/* Schaltflächen der Module, Formulare und PHP-Ansichten: :active, :hover nur bei Zeigergeräten, Farbschema (prefers-color-scheme
   und data-theme), [disabled]/[aria-disabled] – alles Zustände oder Medienabfragen, nicht nativ. In Dokumenten: globale Klasse btn,
   das Rest-CSS (Block „Module“) hält beide auseinander. */
/* Buttons: Pille, eine Zeile, Druckgefühl */
.btn {
  --btn-bg: var(--blau);
  --btn-fg: var(--auf-akzent);
  display: inline-flex; align-items: center; justify-content: center; gap: 0.55rem;
  min-height: 3rem; padding: 0.7rem 1.4rem;
  font: 650 var(--fs-s) / 1 var(--font-display);
  font-stretch: 100%;
  letter-spacing: 0.01em;
  white-space: nowrap;
  color: var(--btn-fg); background: var(--btn-bg);
  border: 1.5px solid transparent; border-radius: var(--r-pille);
  text-decoration: none; cursor: pointer;
  transition: transform 160ms var(--ease-out), background-color 180ms ease, border-color 180ms ease, color 180ms ease, box-shadow 180ms ease;
}
.btn:active { transform: scale(0.97); }
.btn svg { width: 1.15em; height: 1.15em; flex: none; }
@media (hover: hover) and (pointer: fine) {
  .btn:hover { background: var(--blau-hover); }
  .btn-tief:hover { background: var(--lapis-2); }
  .btn-sonne:hover { background: var(--sonne-hover); }
  .btn-linie:hover { background: var(--flaeche-2); border-color: var(--text); }
  .btn-hell:hover { background: #fff; }
}
.btn-tief { --btn-bg: var(--lapis); --btn-fg: #fff; }
:root[data-theme='dark'] .btn-tief { --btn-bg: var(--blau); --btn-fg: var(--auf-akzent); }
@media (prefers-color-scheme: dark) { :root:not([data-theme='light']) .btn-tief { --btn-bg: var(--blau); --btn-fg: var(--auf-akzent); } }
.btn-sonne { --btn-bg: var(--sonne); --btn-fg: var(--auf-sonne); }
.btn-linie { --btn-bg: transparent; --btn-fg: var(--text); border-color: var(--linie-stark); }
.btn-hell { --btn-bg: rgb(255 255 255 / 0.92); --btn-fg: var(--lapis); }
.btn-klein { min-height: 2.75rem; padding: 0.45rem 1rem; font-size: var(--fs-xs); }
.btn[hidden] { display: none; }
.btn[disabled], .btn[aria-disabled='true'] { opacity: 0.55; cursor: not-allowed; transform: none; }

/* Textlink mit Pfeil: Bewegung des Symbols beim Überfahren des Links (Eltern-Hover) und reduzierte Bewegung, nicht nativ. */
.textlink {
  display: inline-flex; align-items: center; gap: 0.4rem; min-height: 2.75rem;
  font: 650 var(--fs-s) / 1.2 var(--font-display); font-stretch: 100%;
  color: var(--akzent-text); text-decoration: none;
}
.textlink svg { width: 1.1em; height: 1.1em; transition: transform 200ms var(--ease-out); }
@media (hover: hover) and (pointer: fine) { .textlink:hover svg { transform: translateX(4px); } }

/* Schlagworte (Kategorien an Beiträgen, Katalog) aus PHP-Vorlagen und Skripten. */
/* Schlagworte */
.tag {
  display: inline-flex; align-items: center; min-height: 1.75rem; padding: 0.15rem 0.7rem;
  border-radius: var(--r-pille); background: var(--flaeche-2); color: var(--text);
  font-size: var(--fs-xs); font-weight: 600; text-decoration: none; white-space: nowrap;
}

/* Fließtext der PHP-Ansichten und Beiträge: Abstände über Geschwister-/Kind-Selektoren, ::marker, Tags im Text (h2, ul, blockquote,
   hr) – nicht nativ; prosa in Dokumenten ist eine globale Klasse, overflow-wrap kommt von hier (ELEMENTOR-KLASSEN 9.14). */
/* Fließtext aus den Inhaltsdateien */
.prosa { max-width: var(--breite-text); font-size: var(--fs-m); overflow-wrap: anywhere; }
.prosa > * + * { margin-top: 1.15em; }
.prosa h2 { font-size: var(--fs-xl); margin-top: 2.4em; }
.prosa h3 { font-size: var(--fs-l); margin-top: 2em; }
.prosa h2 + *, .prosa h3 + * { margin-top: 0.7em; }
.prosa > :first-child { margin-top: 0; }
.prosa ul, .prosa ol { padding-left: 1.25rem; }
.prosa li + li { margin-top: 0.45em; }
.prosa li::marker { color: var(--akzent-text); }
.prosa strong { font-weight: 700; }
.prosa blockquote {
  margin-inline: 0; padding: 1.25rem 1.5rem; border-radius: var(--r-karte);
  background: var(--flaeche-2); font-size: var(--fs-l); line-height: 1.45;
}
.prosa a { font-weight: 600; }
.prosa hr { border: 0; border-top: 1px solid var(--linie); margin-block: 2.5em; }

/* Felder der Suche, des Katalogs (Ausleihe) und der Formulare: ::placeholder, :focus-visible, :hover nur bei Zeigergeräten,
   [aria-invalid] – nicht nativ; die Felder baut das Theme bzw. WPForms, nicht Elementor. */
/* Formulare */
.feld { display: grid; gap: 0.45rem; }
.feld label { font-weight: 650; font-size: var(--fs-s); }
.feld .hilfe { font-size: var(--fs-xs); color: var(--text-2); }
.feld .fehlertext { font-size: var(--fs-xs); color: var(--fehler); font-weight: 600; min-height: 1.2em; }
.eingabe, .auswahl, textarea.eingabe {
  width: 100%; min-height: 3rem; padding: 0.7rem 0.9rem;
  font: inherit; color: var(--text); background: var(--flaeche);
  border: 1.5px solid var(--feld-rand); border-radius: var(--r-feld);
  transition: border-color 160ms ease, box-shadow 160ms ease;
}
.eingabe::placeholder { color: var(--text-2); opacity: 1; }
@media (hover: hover) and (pointer: fine) { .eingabe:hover, .auswahl:hover { border-color: var(--text-2); } }
.eingabe:focus-visible, .auswahl:focus-visible { outline: none; border-color: var(--fokus); box-shadow: 0 0 0 3px color-mix(in srgb, var(--fokus) 30%, transparent); }
.eingabe[aria-invalid='true'] { border-color: var(--fehler); }
textarea.eingabe { min-height: 9rem; resize: vertical; }

/* Hinweisband der Module (Termine, Shop-Vorschau, Platzhalter) – Markup aus dem Theme. */
/* Hinweisband für Platzhalter und Demo-Funktionen */
.hinweis {
  display: flex; gap: 0.75rem; align-items: flex-start;
  padding: 0.9rem 1.1rem; border-radius: var(--r-karte);
  background: var(--flaeche-2); color: var(--text); font-size: var(--fs-s);
}
.hinweis svg { width: 1.25rem; height: 1.25rem; flex: none; margin-top: 0.15rem; color: var(--akzent-text); }

/* Skriptzustände von site.ts (zeig-bereit, ist-da, kein-uebergang) mit reduzierter Bewegung – nicht nativ. */
/* Einblenden beim Scrollen: Inhalt ist ohne JS sichtbar */
/* Versteckt wird erst, wenn das Skript läuft, und nur unterhalb des ersten Bildschirms (siehe scripts/site.ts) */
.zeig-bereit [data-zeig]:not(.ist-da) { opacity: 0; transform: translateY(18px); }
.zeig-bereit [data-zeig].ist-da { transition: opacity 600ms var(--ease-out), transform 600ms var(--ease-out); transition-delay: calc(var(--i, 0) * 60ms); }
.kein-uebergang *, .kein-uebergang *::before, .kein-uebergang *::after { transition: none !important; }
@media (prefers-reduced-motion: reduce) {
  .zeig-bereit [data-zeig] { opacity: 1; transform: none; transition: none; }
  .textlink svg { transition: none; }
}

/* Dialoge (Galerie-Lichtkasten, Katalog, Warenkorb-Schublade): Element dialog und Pseudo-Element ::backdrop, nicht nativ. */
/* Dialoge */
dialog { color: var(--text); }
dialog::backdrop { background: rgb(4 16 27 / 0.55); backdrop-filter: blur(3px); }

/* Tabellen aus dem Shop-Modul (inc/65-shop.php, shop.ts) – Theme-Markup. */
/* Tabellen */
.tabelle { width: 100%; border-collapse: collapse; font-size: var(--fs-s); }
.tabelle th { text-align: left; font-weight: 650; color: var(--text-2); padding: 0.6rem 0.75rem; border-bottom: 1.5px solid var(--linie-stark); }
.tabelle td { padding: 0.75rem; border-bottom: 1px solid var(--linie); vertical-align: top; }