/* ==========================================================================
   PVBB - Design-Grundlage
   Farben, Schriften, Abstaende, Grundgeruest.

   Diese Datei enthaelt keine einzige Gestaltung eines konkreten Bausteins.
   Alles, was hier steht, ist die gemeinsame Grundlage - Bausteine liegen in
   bausteine.css. Fuer WordPress wird aus dem :root-Block spaeter die
   theme.json des Themes erzeugt.
   ========================================================================== */

/* Die Schriften bindet WordPress ueber theme.json ein
   (siehe werkzeuge/theme_bauen.py). */

/* --------------------------------------------------------------------------
   1. Farben

   Vorgabe des Verbands:  Blau  RGB 17/43/78   = #112B4E
                          Gruen RGB 203/211/23 = #CBD317

   Wichtig zum Gruen: Auf Weiss erreicht es nur ein Kontrastverhaeltnis von
   1,63:1 und ist damit als Textfarbe unbrauchbar (WCAG AA verlangt 4,5:1).
   Auf dem Verbandsblau dagegen kommt es auf 8,71:1. Daraus die Regel:

       Gruen nur als Flaeche, Linie oder Text AUF Blau - niemals als Text
       auf Weiss. Fuer gruenen Text auf hellem Grund gibt es --akzent-dunkel
       (#6B7200, 5,21:1 auf Weiss).

   Der spaeter geplante Wechsel der Akzentfarbe auf Rot ist eine Aenderung an
   den drei --akzent-Werten. Nichts anderes im Projekt nennt eine Akzentfarbe
   beim Namen.
   -------------------------------------------------------------------------- */

:root {
  /* Hauptfarbe und Abstufungen */
  --blau-900: #0a1c34;
  --blau-800: #112b4e; /* Hauptfarbe */
  --blau-700: #1b3e6c;
  --blau-600: #2b5488;
  --blau-400: #6183ac;
  --blau-300: #8fa6c2;
  --blau-100: #dce4ee;
  --blau-50: #f1f5f9;

  /* Akzentfarbe */
  --akzent: #cbd317; /* Flaechen, Linien, Text auf Blau */
  --akzent-hell: #e3e97a; /* zurueckhaltende Flaechen */
  --akzent-dunkel: #6b7200; /* Text auf hellem Grund */

  /* Die Farbe, die ein Verweis beim Ueberfahren annimmt (zb/26).
     EINE Stelle - wer den Eindruck aendern will, aendert diese Zeile.

     Bis 1.5.51 war es --blau-600. Der Unterschied zum Ruhezustand betrug
     1,40:1 und war bei kleiner Schrift nicht zu erkennen; der Auftraggeber
     hat es am 14.08.2026 gemeldet und nachgerechnet bestaetigt bekommen.
     Innerhalb der Blaustufen gibt es keinen Ausweg: Was deutlich genug waere
     (--blau-400), faellt mit 3,92:1 durch WCAG AA.

     --akzent-dunkel schafft beides - 5,21:1 auf Weiss, 2,07:1 Unterschied zum
     Ruhezustand. Und es ist kein neuer Ton, sondern die Verbandsfarbe: Die
     Fusszeile faerbt ihre Verweise beim Ueberfahren seit jeher gruen
     (dort --akzent, weil der Grund dunkel ist). Diese Entscheidung fuehrt ein
     vorhandenes Muster zu Ende, statt eines zu erfinden.

     Wechselt die Akzentfarbe spaeter auf Rot (LIESMICH.md), wandert der
     Hover-Ton von selbst mit. */
  --verweis-hover: var(--akzent-dunkel);

  /* Neutrale Toene */
  --weiss: #ffffff;
  --papier: #f7f8fa;
  --linie: #e2e6ec;
  --linie-kraeftig: #c8d0da;
  --text: #1a2433; /* 15,6:1 auf Weiss */
  --text-leise: #5a6675; /* 5,85:1 auf Weiss */
  --text-invers: #ffffff;

  /* Bedeutungsfarben, aus der Palette abgeleitet */
  --erfolg: #2f6b3f;
  --hinweis-grund: var(--blau-50);

  /* ------------------------------------------------------------------------
     2. Schrift

     Poppins fuer Ueberschriften (Vorgabe des Verbands), Inter fuer Fliesstext.
     Inter ist eigens fuer Bildschirmlesbarkeit entworfen und traegt laengere
     Absaetze besser als Poppins, das in kleinen Graden schnell breit wirkt.
     Beide liegen lokal - siehe werkzeuge/schriften_holen.py.
     ------------------------------------------------------------------------ */
  --schrift-ueberschrift: "Poppins", "Segoe UI", system-ui, sans-serif;
  --schrift-text: "Inter", "Segoe UI", system-ui, sans-serif;

  /* Groessen wachsen stufenlos mit der Fensterbreite mit (clamp), damit es
     keine Sprunge an Umbruchpunkten gibt. */
  /* Einzige Ausnahme: --gr-xxs waechst NICHT mit (kein clamp). Sie sitzt in
     einem 60x60-px-Kasten fester Groesse (Datumsquadrat, zb/05) - bei
     grossen Fenstern wuerde eine wachsende Schrift die dort gemessenen
     Abstaende wieder auffressen. Wer sie spaeter woanders einsetzt, misst
     neu, ob das dort noch gilt. */
  --gr-xxs: 0.6875rem; /* 11 px, fest (zb/05: Dauer-Marke im Datumsquadrat) */
  --gr-xs: clamp(0.75rem, 0.73rem + 0.1vw, 0.8125rem);
  --gr-s: clamp(0.8125rem, 0.79rem + 0.12vw, 0.875rem);
  --gr-m: clamp(1rem, 0.97rem + 0.15vw, 1.0625rem);
  --gr-l: clamp(1.0625rem, 1.02rem + 0.25vw, 1.1875rem);
  --gr-menue: clamp(0.9375rem, 0.9rem + 0.18vw, 1.0625rem);
  --gr-h4: clamp(1.125rem, 1.06rem + 0.32vw, 1.3125rem);
  --gr-h3: clamp(1.3125rem, 1.18rem + 0.62vw, 1.625rem);
  --gr-h2: clamp(1.5rem, 1.24rem + 1.15vw, 2.125rem);
  --gr-h1: clamp(1.875rem, 1.42rem + 2vw, 2.875rem);
  --gr-hero: clamp(2.125rem, 1.4rem + 3.2vw, 3.75rem);

  --zeile-eng: 1.15;
  --zeile-mittel: 1.4;
  --zeile-weit: 1.65;

  /* ------------------------------------------------------------------------
     3. Abstaende, Radien, Schatten
     ------------------------------------------------------------------------ */
  --raum-1: 0.25rem;
  --raum-2: 0.5rem;
  --raum-3: 0.75rem;
  --raum-4: 1rem;
  --raum-5: 1.5rem;
  --raum-6: 2rem;
  --raum-7: 2.5rem;
  --raum-8: 3rem;
  --raum-9: 4rem;
  --raum-10: 5rem;
  --raum-11: 6.5rem;

  /* Abstand zwischen zwei Seitenabschnitten */
  --abschnitt: clamp(3rem, 2rem + 5vw, 6rem);

  --rund-s: 4px;
  --rund-m: 8px;
  --rund-l: 14px;
  --rund-xl: 22px;
  --rund-voll: 999px;

  --schatten-s: 0 1px 2px rgb(17 43 78 / 0.06), 0 1px 3px rgb(17 43 78 / 0.08);
  --schatten-m: 0 2px 4px rgb(17 43 78 / 0.05), 0 6px 16px rgb(17 43 78 / 0.09);
  --schatten-l: 0 4px 8px rgb(17 43 78 / 0.05), 0 16px 36px rgb(17 43 78 / 0.12);

  /* ------------------------------------------------------------------------
     4. Breiten
     ------------------------------------------------------------------------ */
  --breite-text: 44rem; /* angenehme Zeilenlaenge fuer Fliesstext */
  --breite-inhalt: 75rem; /* Standardbreite eines Abschnitts */
  --breite-weit: 84rem;
  --rand: clamp(1rem, 0.4rem + 2.6vw, 2.5rem);

  --uebergang: 160ms ease;
}

/* --------------------------------------------------------------------------
   5. Grundlagen
   -------------------------------------------------------------------------- */

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

/* nu/42: projektweit, nicht nur fuer den Mehr-Knopf. Das Browser-Stylesheet
   liefert [hidden] { display: none } mit der niedrigsten Prioritaet, die es
   gibt - jede eigene Regel, die an demselben Element ein "display" setzt
   (etwa .schalter { display: inline-flex }), hebt sie auf. Der Knopf blieb
   deshalb trotz gesetztem hidden-Attribut sichtbar (Ticket nu/42, Teil A).
   !important stellt hier keinen Notbehelf dar, sondern die Prioritaet her,
   die das Browser-Stylesheet ohnehin haben sollte. */
[hidden] {
  display: none !important;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 6rem; /* Sprungziele nicht unter die Kopfzeile schieben */
}

body {
  margin: 0;
  background: var(--weiss);
  color: var(--text);
  font-family: var(--schrift-text);
  font-size: var(--gr-m);
  line-height: var(--zeile-weit);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1,
h2,
h3,
h4,
h5 {
  margin: 0 0 var(--raum-4);
  font-family: var(--schrift-ueberschrift);
  font-weight: 600;
  line-height: var(--zeile-eng);
  color: var(--blau-800);
  letter-spacing: -0.015em;
  text-wrap: balance; /* verhindert einzelne Woerter in der letzten Zeile */

  /* nu/52: Ein Wort, das breiter ist als seine Zeile, wird umgebrochen
     statt abgeschnitten.

     DER ANLASS war "Veranstaltungskalender" in der Terminuebersicht - 22
     Zeichen ohne Trennmoeglichkeit, in Ueberschriftgroesse, auf einem
     schmalen Schirm. Die Ueberschrift heisst jetzt kuerzer, aber das loest
     nur DIESEN Fall: Ein langer Vereinsname in einer Ueberschrift trifft
     dasselbe, und der kommt redaktionell jederzeit dazu.

     WARUM "break-word" UND NICHT "break-all": break-all zerlegt jedes Wort,
     sobald die Zeile voll ist - auch kurze, die bequem in die naechste
     gepasst haetten. break-word greift ausschliesslich dann, wenn ein Wort
     ALLEIN nicht in seine Zeile passt. Es ist also kein neues Umbruch-
     verhalten, sondern ein Notausgang.

     Gemessen, nicht angenommen: Die drei Vorschauseiten sind vor und nach
     dieser Regel bildpunktgenau verglichen worden, bei 1400 und bei 520 px -
     kein einziger Farbwert weicht ab (bildvergleich.py). Die Regel aendert
     also nichts an dem, was heute schon passt. */
  overflow-wrap: break-word;
}

h1 {
  font-size: var(--gr-h1);
  font-weight: 700;
}
h2 {
  font-size: var(--gr-h2);
  font-weight: 700;
}
h3 {
  font-size: var(--gr-h3);
}
h4 {
  font-size: var(--gr-h4);
}

p,
ul,
ol {
  margin: 0 0 var(--raum-4);
}

p {
  text-wrap: pretty;
}

ul,
ol {
  padding-left: 1.3em;
}

li {
  margin-bottom: var(--raum-2);
}

li::marker {
  color: var(--blau-400);
}

a {
  color: var(--blau-700);
  text-underline-offset: 0.18em;
  text-decoration-thickness: 1px;
  transition: color var(--uebergang);
}

a:hover {
  color: var(--verweis-hover);
}

/* Zwei Ausnahmen, vom Auftraggeber ausdruecklich verlangt (zb/26):
   „Mindestens groessere Ueberschriften und aufleuchtende Boxen sind
   auszunehmen."

   1. UEBERSCHRIFTEN. Sie sind durch Groesse und Gewicht ohnehin als Verweis
      erkennbar; ein Farbwechsel ins Gruene waere dort ein Ereignis statt einer
      Ruecksicht. Bewusst ueber h1/h2/h3 statt ueber einzelne Bausteine - so
      gilt es auch fuer Ueberschriften, die es heute noch nicht gibt.
   2. AUFLEUCHTENDE BOXEN. Wo die ganze Flaeche das Signal traegt (Spielorte in
      der Seitenspalte, Termineintraege), braucht der Text keins. Der
      Auftraggeber zu den Spielorten: „genuegt aber das Aufleuchten der
      Eintragsbox".

   Die uebrigen Faelle regeln sich von selbst, weil sie eigene, spezifischere
   Regeln haben: Kopfzeilenmenue, Fusszeile, Knoepfe, Meldungsueberschriften
   und der Termintitel. Nachgesehen, nicht angenommen. */
h1 a:hover,
h2 a:hover,
h3 a:hover,
h4 a:hover {
  color: var(--blau-600);
}

.ortszeile:hover,
.ortszeile:focus-visible {
  color: inherit;
}

strong {
  font-weight: 600;
  color: var(--blau-800);
}

small {
  font-size: var(--gr-s);
}

img,
svg,
video {
  max-width: 100%;
  height: auto;
}

hr {
  height: 1px;
  margin: var(--raum-7) 0;
  border: 0;
  background: var(--linie);
}

figure {
  margin: 0;
}

figcaption {
  margin-top: var(--raum-2);
  font-size: var(--gr-s);
  color: var(--text-leise);
}

/* Sichtbarer, kraeftiger Fokusrahmen - Grundlage der Tastaturbedienung.

   ZWEI FARBEN, NICHT EINE (nu/35, 07.09.2026). --blau-600 erreicht auf hellem
   Grund 7,03 bis 7,70:1 und ist dort richtig - auf den dunklen Flaechen aber
   nur 1,84:1 (Verbandsblau) und 2,22:1 (tiefes Blau). WCAG 2.2 verlangt 3:1
   fuer die Sichtbarkeit eines Fokusindikators (1.4.11 Non-text Contrast,
   2.4.11 Focus Appearance). Es war also ein echter Verstoss, und er traf
   jeden Tastaturnutzer auf jeder Seite.

   DER AUFTRAGGEBER HAT DIE FARBE GEWAEHLT, an einer gerenderten Vorlage
   (werkzeuge/fokusrahmenentwurf.py, fuenf Varianten auf beiden Untergruenden).
   Seine Vorgabe war "moeglichst nicht zu drastisch hell"; --blau-300 ist die
   zurueckhaltendste Variante, die 3:1 sicher ueberschreitet - 5,68:1 auf
   Verbandsblau, 6,84:1 auf tiefem Blau. Gerechnet mit kontraste_pruefen.py,
   das beide Kombinationen seither dauerhaft prueft.

   WARUM EINE VARIABLE UND KEINE ZWEITE REGEL: Der Rahmen liegt wegen
   outline-offset AUSSERHALB des Elements - er erscheint also auf dem Grund
   DAHINTER, nicht auf dem Element selbst. Massgeblich ist damit der
   umgebende Bereich, nicht das fokussierte Ding. Eine geerbte Variable am
   Container trifft genau das; eine Regel je Element traefe es nicht.

   DESHALB STEHEN UNTEN NUR BEHAELTER, KEINE BEDIENELEMENTE. Ein dunkler
   Knopf auf weissem Grund (.knopf--haupt) behaelt --blau-600, denn sein
   Rahmen liegt auf Weiss. Steht derselbe Knopf im Aufmacher, erbt er von
   dort die helle Farbe - von selbst, ohne eigene Regel. */
:root {
  --fokus: var(--blau-600);
}

.hero,
.fusszeile,
.abschnitt--blau,
.is-style-pvbb-karte-blau,
.spaltenblock--teaser,
.karte-info {
  --fokus: var(--blau-300);
}

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

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

/* Sprungmarke zum Inhalt, erscheint beim ersten Tabulatorschritt */
.sprungmarke {
  position: absolute;
  left: var(--raum-4);
  top: -100%;
  z-index: 100;
  padding: var(--raum-3) var(--raum-5);
  background: var(--blau-800);
  color: var(--text-invers);
  border-radius: 0 0 var(--rund-m) var(--rund-m);
  font-weight: 600;
  text-decoration: none;
  transition: top var(--uebergang);
}

.sprungmarke:focus {
  top: 0;
  color: var(--text-invers);
}

/* --------------------------------------------------------------------------
   6. Layout-Geruest
   -------------------------------------------------------------------------- */

.huelle {
  width: min(100% - 2 * var(--rand), var(--breite-inhalt));
  margin-inline: auto;
}

.huelle--weit {
  width: min(100% - 2 * var(--rand), var(--breite-weit));
}

.huelle--text {
  width: min(100% - 2 * var(--rand), var(--breite-text));
}

.abschnitt {
  padding-block: var(--abschnitt);
}

.abschnitt--eng {
  padding-block: calc(var(--abschnitt) * 0.6);
}

.abschnitt--papier {
  background: var(--papier);
}

.abschnitt--blau {
  background: var(--blau-800);
  color: var(--text-invers);
}

.abschnitt--blau h2,
.abschnitt--blau h3,
.abschnitt--blau h4 {
  color: var(--text-invers);
}

.abschnitt--blau a {
  color: var(--akzent);
}

/* Hauptblock und Seitenspalte (HB | SB der Navigationsskizze).
   Auf schmalen Geraeten stehen beide untereinander - die Seitenspalte
   rutscht dabei unter den Hauptblock. */
.gespann {
  display: grid;
  gap: var(--raum-8);
  align-items: start;
}

@media (min-width: 62rem) {
  .gespann {
    grid-template-columns: minmax(0, 1fr) 20.5rem;
    gap: var(--raum-9);
  }

  .gespann__spalte {
    position: sticky;
    top: 6rem;
  }
}

/* Gleichmaessiges Raster fuer Karten */
.raster {
  display: grid;
  gap: var(--raum-5);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
}

.raster--zwei {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr));
}

.raster--eng {
  gap: var(--raum-4);
}

/* --------------------------------------------------------------------------
   7. Wiederkehrende Textbausteine
   -------------------------------------------------------------------------- */

.augenbraue,
.is-style-pvbb-augenbraue {
  display: block;
  margin-bottom: var(--raum-3);
  font-family: var(--schrift-ueberschrift);
  font-size: var(--gr-s);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--blau-600);
  /* Seit Ticket va/16 rendert pvbb_render_augenbraue() (inc/render.php) ein
     <a> statt eines <p> - "Gestaltung wie bisher" aus dem Ticket heisst hier:
     keine Unterstreichung einfuehren, die die bisherige reine Textausgabe
     nicht hatte. Der gruene Hover (--verweis-hover, zb/26) braucht daneben
     keine eigene Regel: die globale "a:hover" unten gewinnt bereits durch
     hoehere Spezifitaet gegen diese blosse Klasse (dasselbe Zusammenspiel wie
     bei .weiterlink). Seit Ticket va/18 gilt das AUCH fuer home.html und die
     beiden Archivvorlagen (archive-pvbb_verein.html, archive-pvbb_termin.html)
     - sie setzen seither denselben Block ein. Fuer die uebrigen, weiterhin
     als <p> ausgegebenen Augenbrauen (die thematischen Abschnitte der
     Startseite: hero, aktuelles, angebot, vereine, warum-pickleball,
     zeitstrahl, ...) ist die Zeile weiterhin ohne Wirkung. */
  text-decoration: none;
}

/* Ticket va/19: die optionale ZWEITE Stufe ("Mitgliedsvereine · Spielorte",
   siehe pvbb_render_augenbraue(), inc/render.php). Nur DORT steht
   ".augenbraue" an einem umschliessenden <span> statt am <a> selbst - im
   weit ueberwiegenden Regelfall (ohne zweite Stufe) bleibt es beim blossen
   <a class="…augenbraue">, unveraendert seit va/16, und diese beiden Regeln
   greifen dort nicht (kein <a> ALS NACHFAHRE von ".augenbraue", sondern
   SELBST ".augenbraue").

   Ohne diese Regeln gaebe der verschachtelte <a> seine eigene Verweisfarbe
   aus der globalen "a { color: … }"-Regel oben aus (blau-700, ein
   Elementselektor auf dem <a> selbst) statt der von ".augenbraue" nur
   GEERBTEN Farbe (blau-600) - ein Elternselektor gewinnt gegen eine
   Nachfahren-Regel nicht durch Vererbung, das war der Grund, warum
   ".augenbraue" bis hierher IMMER direkt am <a> stehen musste (siehe
   Kommentar oben). "color: inherit" macht daraus wieder blau-600. Die
   ":hover"-Regel steht bewusst DANEBEN, nicht nur "color: inherit" plus
   Verlass auf die globale "a:hover" weiter oben: Beide haetten dieselbe
   Spezifitaet (eine Klasse + ein Element), und bei einem Gleichstand
   entscheidet die Reihenfolge im Stylesheet - eine Annahme, die dieses
   Projekt lieber vermeidet als sich auf sie zu verlassen (VERFAHREN.md,
   Erkenntnis 11). Mit der eigenen Regel gewinnt der gruene Hover aus zb/26
   unabhaengig davon, wo im Stylesheet sie steht.

   Ticket va/22: Bei Einzelvereins-/Einzelterminseiten ist die zweite Stufe
   STATT eines <span> ebenfalls ein <a> ("Aktuelles · Veranstaltungen"). Ein
   reiner Nachfahren-Selektor ("a" unter ".augenbraue", kein ":first-child"
   o.ae.) trifft dabei automatisch auf BEIDE <a>-Elemente - keine neue Regel
   noetig. Mit hoverprobe.py nachgemessen, nicht nur aus dem Selektor
   gefolgert (VERFAHREN.md, Erkenntnis 11). */
.augenbraue a {
  color: inherit;
  text-decoration: none;
}
.augenbraue a:hover {
  color: var(--verweis-hover);
}

/* Folgt die Augenbraue unmittelbar auf die Brotkrumen-Navigation, bekommt sie
   zusaetzlich Abstand nach oben - beide sollen als getrennte Funktionen
   lesbar sein, nicht als ein Block wirken (Ticket va/04). Der
   Nachbarschafts-Selektor trifft NUR diesen Fall: Jede andere Stelle, an der
   die Augenbraue ohne vorausgehende Brotkrumen steht (archive-pvbb_termin.html,
   home.html, archive-pvbb_verein.html, ...), behaelt ihren bisherigen Abstand
   unveraendert bei - gemessen mit einer eigenen Regressionsprobe, siehe
   Ticket. Der Wert ist ein Schritt der bestehenden Abstandsskala (--raum-5),
   kein Einzelfall an dieser Stelle.

   Seit Ticket va/16 OHNE PRAKTISCHE WIRKUNG MEHR: Die Brotkrumen sind aus den
   Vorlagen genommen (werkzeuge/vorlagen_schreiben.py), stehen also in keiner
   Vorlage mehr unmittelbar vor der Augenbraue. Bewusst stehen gelassen, nicht
   geloescht - dieselbe "abklemmen, nicht loeschen"-Begruendung wie beim
   PHP-Code des Brotkrumen-Blocks (va/16): Der Selektor greift von selbst
   wieder, sollten beide je wieder nebeneinander eingesetzt werden. */
.brotkrumen + .augenbraue,
.brotkrumen + .is-style-pvbb-augenbraue {
  margin-top: var(--raum-5);
}

/* Auf allen dunklen Flaechen. Die Grundfarbe der Augenbraue ist ein
   mittleres Blau - auf dunkelblauem Grund waere sie praktisch unsichtbar. */
.abschnitt--blau .augenbraue,
.hero .augenbraue,
.aufruf .augenbraue,
.karte--blau .augenbraue,
.spaltenblock--teaser .augenbraue {
  color: var(--akzent);
}

.vorspann,
.is-style-pvbb-vorspann {
  max-width: 42rem;
  font-size: var(--gr-l);
  line-height: var(--zeile-weit);
  color: var(--text-leise);
}

.abschnitt--blau .vorspann {
  color: var(--blau-100);
}

.abschnitt-kopf {
  margin-bottom: var(--raum-7);
}

/* Kurzer Akzentstrich unter einer Ueberschrift */
.strich::after,
.is-style-pvbb-strich::after {
  content: "";
  display: block;
  width: 3.5rem;
  height: 4px;
  margin-top: var(--raum-4);
  background: var(--akzent);
  border-radius: var(--rund-voll);
}

/* --------------------------------------------------------------------------
   8. Bewegung nur, wenn erwuenscht

   Wer im Betriebssystem "Bewegung reduzieren" eingestellt hat - etwa wegen
   Migraene oder Schwindel - bekommt eine ruhige Seite.
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

@media print {
  .kopfzeile,
  .fusszeile,
  .gespann__spalte,
  .sprungmarke {
    display: none;
  }

  body {
    color: #000;
  }
}