/* =========================================================================
   AFV theme styles
   Tokens taken from the DigiDuck design system export.
   Contrast note: #14A1B8 only reaches 3.08:1 on white and must not carry
   small text. #10798A (5.09:1) is used for text and button labels instead.
   ========================================================================= */

/* ---------- Fonts, self hosted, subset to the characters we need ---------- */
@font-face { font-family: 'Roboto'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('../fonts/roboto-400.woff2') format('woff2'); }
@font-face { font-family: 'Roboto'; font-style: normal; font-weight: 500; font-display: swap;
  src: url('../fonts/roboto-500.woff2') format('woff2'); }
@font-face { font-family: 'Roboto'; font-style: normal; font-weight: 700; font-display: swap;
  src: url('../fonts/roboto-700.woff2') format('woff2'); }
@font-face { font-family: 'Roboto'; font-style: normal; font-weight: 900; font-display: swap;
  src: url('../fonts/roboto-900.woff2') format('woff2'); }

/* ---------- Tokens ---------- */
:root {
  --sydney:       #14A1B8;
  --sydney-700:   #10798A;
  --sydney-200:   #A1D7E1;
  --sydney-50:    #F7FDFF;
  --anthrazit:    #293133;
  --gray-text:    #4D6368;
  --gray-line:    #E6ECED;
  --gray-bg:      #F4F6F7;
  --white:        #FFFFFF;
  --gruen:        #176B3A; /* was #1F8F4E (3.70:1 on #E8F6EE); 5.89:1 now - B3 */
  --gelb:         #8A5A00;
  --rot:          #C70D03;

  --font: 'Roboto', system-ui, -apple-system, 'Helvetica Neue', Arial, sans-serif;

  --container: 1320px;
  --r-lg: 24px;
  --r-md: 12px;
  --r-sm: 8px;
  --shadow: 0 0 40px rgba(20, 161, 184, .16);

  --space-1: 8px;
  --space-2: 16px;
  --space-3: 24px;
  --space-4: 32px;
  --space-5: 48px;
  --space-6: 72px;
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font);
  font-size: 17px;
  line-height: 1.65;
  color: var(--anthrazit);
  background: var(--white);
}
img { max-width: 100%; height: auto; }
a { color: var(--sydney-700); }
/* Focus: two rings. Petrol inside (box-shadow), white outside (outline).
   The two colours have 5.09:1 against each other, so on every surface at
   least one ring reaches 3:1 - white pages 5.09 (petrol), anthracite header
   and footer 13.28 (white), Titelflaeche 5.09 (white). No context
   rules needed. Covers inputs, textareas and the menu toggles as well.
   Audit B1, C4. */
a:focus-visible, button:focus-visible, select:focus-visible, input:focus-visible,
textarea:focus-visible, summary:focus-visible, [tabindex]:focus-visible {
  outline: 3px solid var(--white);
  outline-offset: 3px;
  box-shadow: 0 0 0 3px var(--sydney-700);
  border-radius: var(--r-sm);
}

/* B2, 21.09.2026: Die Ueberschriftengroessen stehen in rem statt in px, und
   jede Ueberschrift darf umbrechen.
   Gemessen an der echten Schriftdatei: Roboto 900 setzt "FAHRLEHRER-
   FACHSCHULE" auf 12.5894 em Vorschub, dazu 20 mal 0.04em Sperrung, macht
   13.3894 em. Bei der kleinsten h1-Stufe von 1.75rem = 28px sind das 374.9px.
   Ein 360px-Geraet hat nach dem Rand des Containers 320px Inhaltsbreite - das
   Wort stand also 54.9px ueber dem Viewport hinaus und hat die ganze Seite
   waagerecht scrollbar gemacht. Eine kleinere Schrift allein hilft nicht: bei
   1.75rem ist die untere Grenze schon erreicht.
   overflow-wrap: anywhere erlaubt den Bruch an jeder Stelle und ist die
   Garantie, dass nichts mehr hinauslaeuft; hyphens: auto sorgt dafuer, dass
   der Bruch in aller Regel an einer Silbengrenze mit Trennstrich passiert,
   weil das Dokument lang="de" traegt. Die Reihenfolge stimmt so: der Browser
   nimmt die Silbentrennung, wenn er eine findet, und den harten Bruch nur,
   wenn keine passt. */
h1, h2, h3, h4 {
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .04em;
  line-height: 1.15;
  margin: 0 0 var(--space-2);
}
/* NACHTRAG S2, 21.09.2026: Silbentrennung und der harte Bruch gelten nur
   noch auf dem Telefon. Dort sind sie notwendig - "FAHRLEHRERFACHSCHULE" ist
   als h1 374,9px breit und der Kasten 320px. Auf dem grossen Bildschirm
   braucht es beides nicht: dieselbe Ueberschrift ist bei 3rem 642,7px breit
   und hat 736px Platz. Dort stoert die automatische Trennung sogar, weil sie
   in einer Versalzeile einen Trennstrich erzeugt, wo keiner noetig ist.
   hyphens: manual ab 60em steht ausdruecklich da und nicht nur als
   Voreinstellung, damit die Absicht im Code lesbar ist. */
@media (max-width: 59.99em) {
  h1, h2, h3, h4 { overflow-wrap: anywhere; hyphens: auto; }
}
@media (min-width: 60em) {
  h1, h2, h3, h4 { hyphens: manual; }
}
h1 { font-size: clamp(1.75rem, 4.2vw, 3rem); }
h2 { font-size: clamp(1.375rem, 2.7vw, 2rem); margin-top: var(--space-5); }
h3 { font-size: clamp(1.125rem, 2vw, 1.5rem); margin-top: var(--space-4); }
h4 { font-size: 1.0625rem; margin-top: var(--space-3); letter-spacing: .03em; }
p, ul, ol { margin: 0 0 var(--space-2); }
ul, ol { padding-left: 1.3em; }
li { margin-bottom: 6px; }

.container { max-width: var(--container); margin: 0 auto; padding: 0 20px; }

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--white); color: var(--sydney-700);
  padding: 12px 20px; border-radius: 0 0 var(--r-sm) 0; font-weight: 700;
}
.skip-link:focus { left: 0; }

/* Text for screen readers only: link context ("Termin ansehen: ..."), the
   note "(öffnet in neuem Fenster)". Audit C1, C2. */
.afv-sr-only {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%);
  white-space: nowrap; border: 0;
}

/* ---------- Header ---------- */
.site-header { background: var(--anthrazit); color: var(--white); }
.site-header a { color: var(--white); text-decoration: none; }
.header-inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-3); padding-top: 14px; padding-bottom: 14px; flex-wrap: wrap;
}
.brand { display: flex; align-items: center; gap: 14px; }
.brand img { height: 40px; width: auto; display: block; }
.brand-text { display: flex; flex-direction: column; gap: 2px;
  border-left: 1px solid var(--gray-text); padding-left: 14px; }
.brand-name { font-weight: 900; font-size: 15px; letter-spacing: .06em;
  text-transform: uppercase; line-height: 1.1; }
.brand-sub { font-size: 12px; color: var(--sydney-200); text-transform: none;
  letter-spacing: 0; }

/* Only the top level of the navigation is a row. Without the child selector
   this also catches .nav-panel-list and turns the eight course links into a
   wrapping flex row with a 24px gap. */
.afv-menue > ul { display: flex; flex-wrap: wrap; gap: var(--space-3);
  list-style: none; margin: 0; padding: 0; align-items: center; }
.main-nav li { margin: 0; }
.main-nav a { font-size: 15px; font-weight: 500; padding: 6px 0; display: inline-block;
  border-bottom: 2px solid transparent; }
.main-nav a:hover { border-bottom-color: var(--sydney); }
.main-nav .current-menu-item > a,
.main-nav a[aria-current="page"],
.main-nav a[aria-current="true"] { border-bottom-color: var(--sydney); font-weight: 700; }

/* ---------- Hauptnavigation: Schaltfläche "Menü" unter 60em ----------
   Bis zum 21.09.2026 stand die ganze Liste unter 60em offen unter der
   Kopfzeile: fünf Punkte plus zwei Untermenüs, auf einem 360px-Gerät gut
   ein Drittel des ersten Bildschirms, bevor der Inhalt anfing.
   Jetzt steckt die Liste in einem <details>; das <summary> ist die
   Schaltfläche. Kein Skript nötig - die Kopfzeile bleibt skriptfrei.

   Der Pfeil ist Dekoration und benutzt dieselbe Schreibweise wie die
   Untermenüs: die zweite content-Deklaration hält das Zeichen aus dem
   zugänglichen Namen heraus, Browser ohne diese Schreibweise lassen sie
   fallen und behalten die erste. Kein Bild, keine Icon-Schrift.

   Farben: Schrift und Rahmen --white auf --anthrazit, 13,28:1 - für Text
   über den 4,5:1, für den Rahmen über den 3:1. Beim Zeigerkontakt kehrt sich
   das Paar um, --anthrazit auf --white, wieder 13,28:1. Der Fokusring der
   Grundregel greift ohne Zusatz; sein weißer Außenring erreicht auf
   --anthrazit 13,28:1.
   Zielgröße 2.75rem = 44px Höhe, über den 24px aus WCAG 2.2 (2.5.8).
   Ohne Versalien: der Gestaltungs-Skill behält Versalien den Überschriften
   vor, und "Menü" ist eine Beschriftung, keine Überschrift. */
.afv-menue > summary {
  display: inline-flex; align-items: center; gap: var(--space-1);
  min-height: 2.75rem; padding: 0 var(--space-3);
  font-size: 0.9375rem; font-weight: 700; color: var(--white);
  border: 0.125rem solid var(--white); border-radius: var(--r-md);
  cursor: pointer; list-style: none; user-select: none;
}
.afv-menue > summary::-webkit-details-marker { display: none; }
.afv-menue > summary::after { content: '▾'; content: '▾' / ''; font-size: 0.6875rem; }
.afv-menue[open] > summary::after { content: '▴'; content: '▴' / ''; }
.afv-menue > summary:hover { background: var(--white); color: var(--anthrazit); }

/* Ab 60em soll die Liste immer stehen, auch wenn das <details> zu ist. Das
   geht nur über ::details-content; @supports fängt Browser ab, die die
   Schreibweise nicht kennen. Dort bleibt die Schaltfläche "Menü" auch auf
   dem großen Bildschirm sichtbar - die Navigation ist dann einen Klick weit
   weg statt verschwunden. Das ist der Fehler, der niemanden aussperrt. */
@media (min-width: 60em) {
  @supports selector(::details-content) {
    .afv-menue > summary { display: none; }
    .afv-menue::details-content { content-visibility: visible; display: block; }
  }
}

/* ---------- Kursangebote / Über uns panels ----------
   Native <details> disclosure; the markup needs no script. assets/js/nav.js
   adds, when present: Escape closes and returns focus, focus or pointer
   outside closes, opening one panel closes the other. Without the script the
   native behaviour remains (panel stays open until toggled). Audit B8. */
.main-nav .has-panel { position: relative; }
.nav-panel > summary {
  font-size: 15px; font-weight: 500; padding: 6px 0; cursor: pointer;
  border-bottom: 2px solid transparent; list-style: none; user-select: none;
}
.nav-panel > summary::-webkit-details-marker { display: none; }
/* The arrow is decorative. The second content declaration uses the
   alternative-text syntax and keeps the glyph out of the accessible name;
   browsers without that syntax drop it and keep the first. Audit C3. */
.nav-panel > summary::after { content: '▾'; content: '▾' / ''; margin-left: 6px; font-size: 11px; }
.nav-panel[open] > summary::after { content: '▴'; content: '▴' / ''; }
.nav-panel > summary:hover,
.nav-panel[open] > summary { border-bottom-color: var(--sydney); }

.nav-panel-list {
  display: block;
  position: absolute; top: calc(100% + 10px); left: 0; z-index: 30;
  min-width: 264px; margin: 0; padding: var(--space-1); list-style: none;
  background: var(--white); border-radius: var(--r-md);
  box-shadow: 0 12px 32px rgba(41, 49, 51, .28);
}
.nav-panel-list li { margin: 0; }
.nav-panel-list a {
  display: block; padding: 7px 10px; border-radius: var(--r-sm);
  color: var(--anthrazit); font-size: 15px; font-weight: 500;
  line-height: 1.35; border-bottom: 0;
}
.nav-panel-list a:hover { background: var(--sydney-50); color: var(--sydney-700); }
.nav-panel-list a[aria-current="page"] { color: var(--sydney-700); font-weight: 700; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-block; font-weight: 700; font-size: 15px;
  letter-spacing: .04em; text-transform: uppercase;
  padding: 13px 24px; border-radius: var(--r-md);
  text-decoration: none; border: 2px solid transparent; cursor: pointer;
}
.btn-primary { background: var(--sydney-700); color: var(--white); }
.btn-primary:hover { background: #0c6270; }
.btn-outline { background: transparent; color: var(--white); border-color: var(--white); }
.btn-outline:hover { background: rgba(255,255,255,.12); }
.btn-quiet { background: var(--white); color: var(--sydney-700); border-color: var(--gray-line); }
.btn-quiet:hover { border-color: var(--sydney-700); }

/* ---------- Pille über der Überschrift ----------
   Seit dem 21.09.2026 (Durchgang gesamt-0921) gibt es im Theme keinen Hero
   mehr. Jede Seite beginnt mit der einfarbigen Titelfläche .afv-titel, auch
   die Startseite. Die Regeln .hero, .hero h1, .hero-sub, .hero-media-section,
   .hero-media, .hero-overlay, .hero-inner und .hero-actions sind deshalb
   entfallen; sie hatten danach keine Verwendung mehr, geprüft per grep über
   Theme und post_content. Geblieben ist .eyebrow: die Pille trägt auf der
   Startseite den Kicker. --anthrazit auf --sydney-200 ergibt 8,42:1. */
.eyebrow {
  display: inline-block; font-size: 13px; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--anthrazit); background: var(--sydney-200);
  padding: 6px 12px; border-radius: 999px; margin-bottom: var(--space-2);
}

/* ---------- Termine block ---------- */
.termine-block { margin-top: calc(var(--space-6) * -1); padding-bottom: var(--space-5); }
.termine-panel {
  background: var(--white); border-radius: var(--r-lg); box-shadow: var(--shadow);
  padding: var(--space-4);
}
.termine-head { display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--space-3); flex-wrap: wrap; margin-bottom: var(--space-3); }
.termine-head h2 { margin: 0; }

.termin-list { display: grid; gap: var(--space-2); list-style: none; margin: 0; padding: 0; }
/* Month heading between the lists on /termine/ (one list per month). */
.termin-monat { font-size: 20px; margin: var(--space-4) 0 var(--space-2); }
.termin-card {
  display: grid; grid-template-columns: 84px 1fr auto; gap: var(--space-3);
  align-items: center; margin: 0;
  border: 1px solid var(--gray-line); border-radius: var(--r-md);
  padding: var(--space-2) var(--space-3); background: var(--white);
}
.termin-card:hover { border-color: var(--sydney-200); background: var(--sydney-50); }
.termin-date {
  text-align: center; background: var(--sydney-50); border-radius: var(--r-sm);
  padding: 8px 4px; border: 1px solid var(--sydney-200);
}
.termin-date .d { display: block; font-size: 26px; font-weight: 900; line-height: 1; }
.termin-date .m { display: block; font-size: 13px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .06em; color: var(--sydney-700); }
.termin-date .y { display: block; font-size: 12px; color: var(--gray-text); }
.termin-body { min-width: 0; }
.termin-art { font-size: 12px; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--sydney-700); display: block; margin-bottom: 2px; }
.termin-title { font-size: 18px; font-weight: 700; margin: 0 0 4px;
  text-transform: none; letter-spacing: 0; line-height: 1.3; }
/* Link colour plus underline: petrol against the anthracite card text is
   only 2.6:1, so colour alone would not mark the link. Audit C8. */
.termin-title a { color: var(--sydney-700); text-decoration: underline;
  text-decoration-thickness: 1px; text-underline-offset: 3px; }
.termin-title a:hover { text-decoration-thickness: 2px; }
.termin-meta { font-size: 14px; color: var(--gray-text); margin: 0; }
.termin-side { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }

.status { font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  padding: 5px 10px; border-radius: 999px; white-space: nowrap; }
.status-frei { background: #E8F6EE; color: var(--gruen); }
.status-wenige-plaetze { background: #FFF4E0; color: var(--gelb); }
.status-ausgebucht { background: #FDECEB; color: var(--rot); }

.termin-empty {
  border: 1px dashed var(--sydney-200); border-radius: var(--r-md);
  padding: var(--space-4); text-align: center; color: var(--gray-text);
  background: var(--sydney-50);
}

/* ---------- Filter bar ---------- */
.filter-bar {
  background: var(--gray-bg); border-radius: var(--r-md);
  padding: var(--space-3); margin-bottom: var(--space-3);
}
.filter-row { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: flex-end; }
.filter-field { display: flex; flex-direction: column; gap: 4px; }
.filter-field label { font-size: 13px; font-weight: 700; letter-spacing: .04em;
  text-transform: uppercase; color: var(--gray-text); }
.filter-field select {
  font-family: var(--font); font-size: 16px; padding: 10px 12px;
  border: 1px solid var(--gray-text); border-radius: var(--r-sm); /* 5.87:1 on gray-bg - B7 */
  background: var(--white); color: var(--anthrazit); min-width: 220px;
}
.filter-actions { display: flex; gap: var(--space-1); align-items: center; }
.filter-result { font-size: 15px; color: var(--gray-text); margin: var(--space-2) 0 0; }

/* ---------- Content ---------- */
.page-content { padding: var(--space-5) 0 var(--space-6); }
.page-content .container > *:first-child { margin-top: 0; }
/* D1, 21.09.2026: Der Fließtext steht auf 66 Zeichen, die Raster laufen über
   die volle Containerbreite. Vorher begrenzte .entry alles auf 78ch; auf
   einem 1320px-Container sind das 745px von 1280px, also 58 Prozent. Damit
   waren auch die Kachelraster und der Bild-Text-Abschnitt der Startseite
   eingeschnürt: eine Kachel im Kursraster war 168px breit, eine Spalte in
   "Ein Beruf, der gebraucht wird" 349px. Gemessen mit der echten Schrift:
   Roboto 400 hat für die Ziffer 0 einen Vorschub von 1151 von 2048 Einheiten,
   1ch sind also 0.56201em, bei 17px Grundschrift 9.554px.
   66ch = 630.6px, 78ch = 745.2px.

   Die Regel arbeitet umgekehrt zu vorher: .entry selbst ist frei, und JEDES
   direkte Kind wird auf 66ch begrenzt. Was über die volle Breite laufen soll,
   wird darunter ausdrücklich wieder freigegeben. So bleibt ein neuer, hier
   nicht bedachter Block automatisch in der Textspalte - der ungefährlichere
   Fehler. Die zweite Ebene (.afv-section, .afv-angebot) ist mitgefasst, weil
   die Raster dort drin stecken. Eine max-width verkleinert nur; in einer
   schmalen Rasterzelle bleibt die Regel deshalb wirkungslos. */
.entry { max-width: none; }
.entry > *,
.entry .afv-section > *,
.entry .afv-angebot > * { max-width: 66ch; }
.entry .afv-section,
.entry .afv-kachel-reihe,
.entry .afv-kachelband,
.entry .afv-beruf,
.entry .afv-eckdaten { max-width: none; }
.entry a { color: var(--sydney-700); }

/* G6, 21.09.2026 (gestaltung-0921b): figure bekommt seinen Browser-Vorgabewert
   margin: 1em 40px genommen. Die 40px links und rechts sind nie gesetzt
   worden, haben aber auf /fahrlehrerfachschule/ und /fahrschule/ gewirkt:
   dort steht ein figure.afv-bild als direktes Kind von .entry, also ohne
   wp:group. Das Bild war damit 630,6px breit UND um 40px eingerueckt,
   waehrend der Text darueber und darunter an der Containerkante beginnt. Die
   senkrechten 1em bleiben als Abstand erhalten, jetzt aber aus der
   --space-Skala: --space-3 statt 17px.
   Die Bilder in einer Gruppe sind nicht betroffen, ihre Abstaende stehen
   weiter unten und gewinnen ueber die Spezifitaet. */
.entry figure { margin: var(--space-3) 0; }

/* D7, 21.09.2026: Listenpunkte in --sydney-700 (5,09:1 auf Weiß) und mehr
   Luft zwischen den Punkten. Die beiden bewusst dichteren Listen
   .afv-modulliste und .afv-anerkennungen behalten ihren engeren Abstand, ihre
   Regeln stehen weiter unten und gewinnen über die Reihenfolge. */
.entry li::marker { color: var(--sydney-700); }
.entry li { margin-bottom: var(--space-2); }

/* G8, 21.09.2026 (gestaltung-0921b): Eine Liste ab sieben Punkten geht auf
   den engeren Abstand --space-1 zurueck - denselben, den .afv-modulliste und
   .afv-anerkennungen schon von Hand gesetzt bekommen. Bisher hing dieser
   Abstand an einer Klasse im Inhalt; :has(> li:nth-child(7)) erkennt die
   Laenge stattdessen am Markup und braucht dafuer keine Inhaltsaenderung.
   Rechnung: ein einzeiliger Punkt ist 17px mal Zeilenhoehe 1,65 = 28,05px
   hoch, dazu --space-2 = 16px Abstand, zusammen 44,05px. Mit --space-1 sind
   es 36,05px, also 8px je Punkt weniger.
   Betroffen sind heute zwei Listen auf /fahrschule/ (acht und sieben
   Punkte). Die Laenge dieser Seite ist damit NICHT behoben: 77 Punkte in
   einer Bahn bleiben ein Inhaltsthema (ENDSTAND, offener Punkt 2). */
.entry ul:has(> li:nth-child(7)) > li,
.entry ol:has(> li:nth-child(7)) > li { margin-bottom: var(--space-1); }

/* Zitate im Inhalt. Das Leitbild-Zitat auf /ueber-uns/ steckt in einem
   wp:html-Block, hat also kein .wp-block-quote - der Elementselektor trifft
   beide Schreibweisen. Der petrolfarbene Balken macht das Zitat erkennbar,
   ohne Kursivschrift und ohne per CSS erzeugte Anfuehrungszeichen. Die
   Textfarbe ist --gray-text: 6.36:1 auf dem weissen Seitenhintergrund. */
.entry blockquote {
  margin: 2rem 0;
  padding: 0 0 0 1.5rem;
  border-left: 4px solid var(--sydney-700);
  color: var(--gray-text);
}
.entry blockquote > :first-child { margin-top: 0; }
.entry blockquote > :last-child { margin-bottom: 0; }

/* ---------- Titelfläche ----------
   Ersetzt den Bild-Hero auf allen Seiten, seit dem Durchgang gesamt-0921 auch
   auf der Startseite (template-parts/titelflaeche.php, front-page.php
   schreibt dasselbe Markup selbst). Einfarbig, so hoch wie ihr Inhalt, keine
   Mindesthöhe. Weiß auf --sydney-700 (#10798A): 5,09:1, damit über 4,5:1 für
   jede Textgröße. --sydney-200 käme dort nur auf 3,23:1 und trägt deshalb hier
   keinen Text. Fokusring: der weiße Außenring erreicht auf --sydney-700
   5,09:1, die Regel oben deckt die Fläche ohne Kontextregel ab. */
.afv-titel { background: var(--sydney-700); color: var(--white); padding: var(--space-5) 0; }
.afv-titel h1 { color: var(--white); margin: 0; max-width: 46rem; }
.afv-titel-kicker { font-size: 1rem; font-weight: 500; line-height: 1.4; margin: 0 0 var(--space-1); }
.afv-titel-unterzeile { font-size: 1.1875rem; line-height: 1.5; max-width: 62ch; margin: var(--space-2) 0 0; }

/* ---------- Einstieg mit Beitragsbild ----------
   Nur auf Seiten mit Beitragsbild (page.php). Bild links im natürlichen
   Seitenverhältnis, kein Zuschnitt; rechts der erste Absatz des Inhalts als
   Vorspann. Unter 56.25em (900px, derselbe Umbruch wie .afv-beruf) eine
   Spalte, Bild oben. Der Abstand nach unten ist klein gehalten: die
   Überschrift oder Gruppe, die dem Vorspann folgt, bringt ihren eigenen
   Abstand mit (h2 --space-5, .afv-angebot:first-child --space-4). */
.afv-einstieg { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-3); margin: 0 0 var(--space-3); }
.afv-einstieg-bild { margin: 0; }
.afv-einstieg-bild img { display: block; width: 100%; height: auto; border-radius: var(--r-lg); }
.afv-einstieg-text { max-width: 78ch; }
/* D2, 21.09.2026: Der Vorspann steht jetzt in 1.25rem und in --anthrazit
   (13,28:1 auf Weiß). Vorher 1.1875rem. */
.afv-einstieg-text p { font-size: 1.25rem; line-height: 1.55; color: var(--anthrazit); margin: 0 0 var(--space-2); }
.afv-einstieg-text p:last-child { margin-bottom: 0; }
/* Rückfall: Inhalt beginnt nicht mit einem Absatz, das Bild steht allein.
   Breite begrenzt, damit ein 3:2-Foto kein Banner über die volle Breite wird. */
.afv-einstieg-bild-allein { max-width: 40rem; margin: 0 0 var(--space-4); }
@media (min-width: 56.25em) {
  /* D2, 21.09.2026: Vorspann vertikal mittig zum Bild statt oben bündig. Auf
     /ueber-uns/ war die rechte Spalte deutlich kürzer als das Bild, unter dem
     Text stand eine große leere Fläche. */
  .afv-einstieg { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: var(--space-5); align-items: center; }
  .afv-einstieg-text { max-width: 34em; }
}

.breadcrumb { font-size: 14px; color: var(--gray-text); padding: var(--space-2) 0 0; }
.breadcrumb a { color: var(--sydney-700); }

/* G7, 21.09.2026 (gestaltung-0921b): Zeilenlaenge in den Vorlagen, die keinen
   .entry um ihren Text legen.
   404.php schreibt Ueberschrift und zwei Absaetze direkt in den .container;
   single-termin.php ebenso fuer die Abschnitte .termin-aktion,
   .termin-kontakt und .termin-zurueck. Diese Absaetze liefen ueber die volle
   Containerbreite von 1280px. Bei 1ch = 9,554px sind das 134 Zeichen je
   Zeile - die Leitplanke nennt 80 als obere Grenze, der Fliesstext des
   Themes steht auf 66.
   Die Regel fasst nur Text, nicht die Raster: .termin-list, .filter-bar und
   .afv-eckdaten bleiben ausgenommen, sie tragen ihre Breite selbst. */
.page-content > .container > h1,
.page-content > .container > p,
.termin-aktion > p,
.termin-kontakt > p,
.termin-kontakt > ul,
.termin-zurueck { max-width: 66ch; }

/* ---------- Footer ---------- */
.site-footer { background: var(--anthrazit); color: var(--white); margin-top: var(--space-6);
  padding: var(--space-5) 0 var(--space-3); }
.site-footer a { color: var(--sydney-200); }
.footer-grid { display: grid; gap: var(--space-4);
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.site-footer h2 { font-size: 14px; letter-spacing: .08em; margin: 0 0 var(--space-2); color: var(--white); }
.site-footer ul { list-style: none; margin: 0; padding: 0; }
.site-footer li { margin-bottom: 6px; }
.site-footer img { height: 44px; width: auto; margin-bottom: var(--space-2); }
.footer-note { border-top: 1px solid var(--gray-text); margin-top: var(--space-4);
  padding-top: var(--space-2); font-size: 13px; color: var(--sydney-200); }


/* ---------- Startseite: Schaltflächen in der Titelfläche, Einstiegsbild ----
   Der Bild-Hero mit Verlaufs-Overlay ist am 21.09.2026 entfallen. Er lag als
   200 bis 330 px hohe Leiste unter einer Abdeckung von 85 bis 95 Prozent: das
   Motiv war kaum zu erkennen, das Bild wurde trotzdem in voller Größe
   geladen. Jetzt trägt die Titelfläche den Text, das Foto steht ungeschnitten
   darunter.

   .afv-titel-aktionen ist eine neue Klasse, weil die bisherige .hero-actions
   zum Hero-Muster gehörte, das hier wegfällt; eine Umnutzung würde den Namen
   zur Lüge machen. Verhalten und Abstände sind dieselben.

   Die beiden Schaltflächen brauchen auf der Fläche eigene Regeln:
   .btn-primary trägt --sydney-700 als Fläche und wäre auf der ebenfalls
   petrolfarbenen Titelfläche unsichtbar. Sie wird deshalb umgekehrt - weiße
   Fläche, Beschriftung --sydney-700: 5,09:1 für die Schrift, und die weiße
   Fläche steht mit 5,09:1 gegen die Titelfläche, also über den 3:1 für
   Bedienelemente. Hover --sydney-200 mit --anthrazit: 8,42:1.
   .btn-outline behält weiße Schrift und weißen Rahmen, je 5,09:1. Ihr
   bisheriger Hover (weiß mit 12 Prozent Deckung) ergäbe auf der
   petrolfarbenen Fläche nur 4,08:1 und wird deshalb auf --anthrazit
   umgestellt: 13,28:1 für Schrift und Rahmen.

   .afv-startbild ist ebenfalls neu: .afv-einstieg-bild hängt am zweispaltigen
   Einstieg mit Beitragsbild, .afv-bild steckt in den Inhaltsabschnitten. Das
   Bild läuft über die volle Containerbreite und behält sein Seitenverhältnis;
   nichts wird zugeschnitten. */
.afv-titel-aktionen {
  display: flex; flex-wrap: wrap; gap: var(--space-2); margin: var(--space-4) 0 0;
}
.afv-titel .btn-primary { background: var(--white); color: var(--sydney-700); }
.afv-titel .btn-primary:hover { background: var(--sydney-200); color: var(--anthrazit); }
.afv-titel .btn-outline:hover { background: var(--anthrazit); }
/* NACHTRAG S1, 21.09.2026: Das Foto steht ab 60em links neben dem ersten
   Abschnitt "Wofuer interessieren Sie sich?"; rechts stehen die Ueberschrift
   und darunter die drei Kacheln gestapelt. Beide Spalten sind gleich breit,
   bei 1320px Fenster je 616px, der Abstand ist --space-5.
   Vorher lief das Foto ueber die volle Containerbreite und war bei 1280px
   Breite 853px hoch - fast der ganze erste Bildschirm unterhalb der
   Titelflaeche, ohne dass daneben etwas stand. Jetzt ist es 616px breit und
   auf 3/2 beschnitten, also 410,7px hoch, und traegt den Abschnitt neben
   sich. Unter 60em steht das Foto oben ueber die volle Breite, darunter die
   Ueberschrift, darunter die Kacheln untereinander.
   align-items: start, damit die Ueberschrift oben am Bild steht und nicht
   mittig neben ihm schwebt. */
.afv-startbild { margin: 0; }
.afv-startbild img {
  display: block; width: 100%; height: auto;
  aspect-ratio: 3 / 2; object-fit: cover; border-radius: var(--r-lg);
}
.afv-start-einstieg { display: grid; gap: var(--space-4); }
/* Der Abschnitt bringt als erster der Seite keine Trennlinie und keinen
   eigenen Innenabstand mit; beides kaeme sonst zwischen Bild und Ueberschrift
   zu liegen. Die Regel ersetzt die bisherige .front-sections-Fassung, die
   nach der Aufteilung auch den zweiten Abschnitt getroffen haette. */
.afv-start-einstieg .entry > .afv-section:first-child { border-top: 0; padding: 0; }
.afv-start-einstieg .afv-section > h2 { margin-top: 0; }
/* Die drei Kacheln stehen in der rechten Spalte untereinander, auf jeder
   Breite. Sie sind hier nicht das Raster, sondern die Liste neben dem Bild. */
.afv-start-einstieg .afv-kachel-reihe { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 60em) {
  .afv-start-einstieg {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    column-gap: var(--space-5);
    align-items: start;
  }
}

/* ---------- Front page sections ---------- */
.afv-section { padding: var(--space-6) 0; border-top: 1px solid var(--gray-line); }
/* NACHTRAG S1: ersetzt durch .afv-start-einstieg .entry > .afv-section:first-child
   weiter oben. Der zweite .entry der Startseite beginnt jetzt mit einem
   Abschnitt, der seine Trennlinie behalten soll - er folgt auf den
   Bild-Abschnitt und braucht die Kante. */
.afv-section > h2 { margin-top: 0; }

/* WordPress wraps the children of a wp:group in an extra
   .wp-block-group__inner-container. Without this the grids below would have
   exactly one item - that wrapper - and the tiles would stack inside it,
   left aligned. display:contents dissolves the wrapper so the tiles become
   direct grid items. It also stays correct if a future WordPress drops the
   wrapper, because the grid already sits on the outer element. */
.afv-kachel-reihe > .wp-block-group__inner-container,
.afv-kachelband > .wp-block-group__inner-container { display: contents; }

/* NACHTRAG S3, 21.09.2026: Die Kachelraster laufen jetzt wirklich ueber die
   volle Containerbreite.
   Bis heute taten sie das nur auf dem Papier. Zwar steht .afv-kachelband in
   der Freigabeliste mit max-width: none - aber das Raster steckt in einer
   wp:group, und deren .wp-block-group__inner-container faellt unter
   ".entry .afv-section > *" und damit unter die 66ch-Grenze. Die Kacheln
   konnten also gar nicht breiter werden als 630,6px. Bei vier Spalten
   ergab das 139,6px je Kachel und 89,6px Textbreite - schmaler als vor dem
   Durchgang gesamt-0921, wo es 168,3px waren. Der Wert 302px aus jenem
   Bericht war eine Rechnung ohne den Innencontainer und damit falsch.
   Jetzt wird der Innencontainer freigegeben, sobald ein Raster darin steckt,
   und die uebrigen Kinder bleiben einzeln auf 66ch begrenzt. Bei 1320px
   Fenster sind es vier Kacheln zu je 302,0px mit 252,0px Textbreite.
   Raster: eine Kachel je Zeile, ab 40em zwei, ab 64em vier. Damit entfaellt
   das waagerechte Schieben des Kachelbands mit scroll-snap; es hat auf dem
   Telefon ohnehin nicht gegriffen und war zwischen 700 und 1100px eine
   eigene, sonst nirgends vorkommende Bedienart. */
.entry .afv-section > .wp-block-group__inner-container:has(> .afv-kachel-reihe),
.entry .afv-section > .wp-block-group__inner-container:has(> .afv-kachelband) { max-width: none; }
.entry .afv-section > .wp-block-group__inner-container:has(> .afv-kachel-reihe) > *,
.entry .afv-section > .wp-block-group__inner-container:has(> .afv-kachelband) > * { max-width: 66ch; }
.entry .afv-section > .wp-block-group__inner-container > .afv-kachel-reihe,
.entry .afv-section > .wp-block-group__inner-container > .afv-kachelband { max-width: none; }

.afv-kachel-reihe { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-3); }
.afv-kachel {
  background: var(--white); border: 1px solid var(--gray-line);
  border-radius: var(--r-lg); padding: var(--space-3);
}
.afv-kachel h3 { margin-top: 0; font-size: 19px; }
.afv-kachel h3 a, .afv-kachel p a { color: var(--sydney-700); }
.afv-kachel p:last-child { margin-bottom: 0; }
/* D6, 21.09.2026: Die Überschrift der Kachel ist im Ruhezustand nicht
   unterstrichen - sie ist als Überschrift schon als Ziel erkennbar, und acht
   unterstrichene Zeilen nebeneinander sind unruhig. Bei Zeigerkontakt und bei
   Tastaturfokus kommt die Unterstreichung zurück, damit die Kachel nicht als
   reine Farbfläche auskommt. Die Links am Fuß der Kachel bleiben dauerhaft
   unterstrichen: sie stehen im Fließtext und müssen dort ohne Farbe
   erkennbar sein. Der Schatten beim Zeigerkontakt ist der eine vorhandene
   --shadow, ohne transition. */
.afv-kachel:hover { box-shadow: var(--shadow); }
.afv-kachel h3 a { text-decoration: none; }
.afv-kachel h3 a:hover, .afv-kachel h3 a:focus-visible { text-decoration: underline; }
.afv-kachel p a { text-decoration: underline; }

/* Das Kursraster ist seit dem Nachtrag S3 ein gewoehnliches Raster, kein
   waagerecht schiebbares Band mehr. Siehe Kommentar oben. */
.afv-kachelband { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-3); }
@media (min-width: 40em) {
  .afv-kachel-reihe, .afv-kachelband { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 64em) {
  .afv-kachel-reihe, .afv-kachelband { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
/* Ausnahme: die drei Kacheln neben dem Startseitenfoto bleiben gestapelt,
   siehe S1. Steht nach den Rasterregeln, damit die Reihenfolge entscheidet. */
.afv-start-einstieg .afv-kachel-reihe { grid-template-columns: minmax(0, 1fr); }
/* Die Ueberschrift einer Kachel darf brechen, auch ueber 60em.
   Rechnung: "FAHRLEHRERFACHSCHULE" ist in Roboto 900 bei 19px mit 0,04em
   Sperrung 254,4px breit. Vier Kacheln haben bei 1320px Fenster 252,0px
   Textbreite, bei 1024px nur 178,0px. Die Ueberschrift passt also in keiner
   Fensterbreite in eine Zeile. Ohne diese Regel liefe sie bei 1024px um
   52,4px ueber die Kachel hinaus. Es ist NUR overflow-wrap, nicht hyphens:
   der Bruch kommt ohne Trennstrich, S2 bleibt also gewahrt. */
.afv-kachel h3 { overflow-wrap: anywhere; }

.afv-beruf { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3) var(--space-5); align-items: center; }
.afv-beruf .afv-bild { grid-row: 1 / span 2; }
.afv-bild img { width: 100%; height: auto; display: block; border-radius: var(--r-lg); }

/* G1, 21.09.2026 (gestaltung-0921b): Das Raster des Abschnitts "Ein Beruf,
   der gebraucht wird" auf der Startseite hatte genau EIN Element.
   Der Grund ist derselbe, der am 21.09. schon zweimal auffiel: WordPress
   legt um die Kinder einer wp:group einen .wp-block-group__inner-container.
   Die Regel .afv-beruf setzt das Raster auf die Gruppe, die drei Kinder
   (Bild, Ueberschrift, Absatz) stecken aber eine Ebene tiefer. Das Raster
   1fr/1fr bekam also den Innencontainer als einziges Element, stellte ihn in
   die erste Spalte - und die zweite Spalte blieb leer.
   Gemessen bei 1360px Fenster: Container 1280px, column-gap --space-5 = 48px,
   je Spalte 616,0px. Das Bild stand auf 616,0px, rechts daneben standen
   616,0px Nichts, Ueberschrift und Absatz erst unter dem Bild. Darueber
   liegen die --space-6 = 72px Innenabstand von .afv-section unter der
   Trennlinie.
   display: contents loest den Innencontainer auf, genau wie bei
   .afv-kachel-reihe und .afv-kachelband weiter oben. Danach sind Bild,
   Ueberschrift und Absatz echte Rasterelemente: das Bild links ueber beide
   Zeilen (grid-row aus der Regel darueber), rechts die Ueberschrift, darunter
   der Absatz.
   Zusatz: .afv-bild ist hier ein <picture>, und ein picture ist von Haus aus
   display: inline. Als Rasterelement wird es zwar blockartig behandelt, als
   Nicht-Rasterelement unter 900px aber nicht - deshalb steht display: block
   ausdruecklich da. Es betrifft nur dieses eine Element im Theme. */
.afv-beruf > .wp-block-group__inner-container { display: contents; }
picture.afv-bild { display: block; }

.afv-anerkennungen ul { padding-left: 1.2em; }
.afv-anerkennungen li { margin-bottom: var(--space-1); }

.afv-kontakt-teaser { background: var(--gray-bg); border-radius: var(--r-lg);
  padding: var(--space-5) var(--space-4); border-top: 0; }
.afv-kontakt-teaser a { color: var(--sydney-700); }
.afv-cta a {
  display: inline-block; background: var(--sydney-700); color: var(--white);
  font-weight: 700; font-size: 15px; letter-spacing: .04em; text-transform: uppercase;
  padding: 13px 24px; border-radius: var(--r-md); text-decoration: none;
}
.afv-cta a:hover { background: #0c6270; color: var(--white); }

/* Scroll reveal. The .js class is set by the footer script, so without
   JavaScript nothing is ever hidden. Motion is dropped entirely when the
   visitor asks for reduced motion. */
@media (prefers-reduced-motion: no-preference) {
  .js .afv-reveal { opacity: 0; transform: translateY(18px);
    transition: opacity .55s ease, transform .55s ease; }
  .js .afv-reveal.is-visible { opacity: 1; transform: none; }
}


/* ---------- Contact page ---------- */
.afv-kontaktdaten p { font-size: 17px; }
.afv-kontaktdaten a, .afv-anfahrt a, .afv-anmeldung a { color: var(--sydney-700); }

/* Map: a local OpenStreetMap tile with a CSS marker on top. No iframe, no API,
   no key - nothing is fetched from a third party when the page loads. The
   marker is positioned in percent so it follows the image when it scales. */
.afv-karte { margin: var(--space-3) 0 0; }
.afv-karte-bild { position: relative; display: block; border-radius: var(--r-md); overflow: hidden; }
.afv-karte-bild img { width: 100%; height: auto; display: block; }
.afv-karte-punkt {
  position: absolute; left: 32.3%; top: 58.1%;
  width: 22px; height: 22px; margin: 0; border-radius: 50%;
  background: var(--sydney-700); border: 3px solid var(--white);
  box-shadow: 0 2px 8px rgba(41, 49, 51, .45);
  transform: translate(-50%, -50%);
}
.afv-karte figcaption {
  margin-top: var(--space-1); font-size: 13px; color: var(--gray-text);
}

.afv-anmeldung { background: var(--gray-bg); border-radius: var(--r-lg);
  padding: var(--space-4); border-top: 0; margin-top: var(--space-5); }
.afv-anmeldung h2 { margin-top: 0; }
.afv-vorbelegung {
  background: var(--white); border-left: 4px solid var(--sydney);
  border-radius: 0 var(--r-sm) var(--r-sm) 0; padding: var(--space-2);
}
.afv-kontaktwege { list-style: none; padding: 0; margin: 0; }
.afv-kontaktwege li { margin-bottom: var(--space-1); }
.afv-pflichthinweis { font-size: 15px; color: var(--gray-text); margin: 0 0 var(--space-2); }

/* Fluent Forms inside the registration box. The plugin defines its colours
   on :root; this block wins by specificity regardless of load order.
   Danger: #C70D03 = 5.56:1 on #F4F6F7, 6.02:1 on white (plugin default
   #f56c6c: 2.67:1). Border: #4D6368 = 5.87:1 / 6.36:1 (plugin #dadbdd:
   1.28:1). Focus: the plugin removes the outline; restored here with
   4.70:1 on the grey box. Audit B6, B7, C4. */
.afv-anmeldung .fluentform {
  --fluentform-danger: var(--rot);
  --fluentform-border-color: var(--gray-text);
}
.afv-anmeldung .fluentform .ff-el-form-control:focus-visible {
  outline: 3px solid var(--sydney-700);
  outline-offset: 2px;
  box-shadow: none;
}


/* ---------- Course date detail ---------- */
.breadcrumb { font-size: 14px; color: var(--gray-text); padding: var(--space-3) 0 0; }
.breadcrumb a { color: var(--sydney-700); }

.termin-head { margin-bottom: var(--space-4); }
.termin-head h1 { margin: var(--space-1) 0; }
.termin-art { color: var(--gray-text); margin: 0; }
.termin-status {
  display: inline-block; margin: 0; padding: 4px 12px; border-radius: 999px;
  font-size: 13px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
}
.termin-status.status-frei { background: #E8F5EE; color: var(--gruen); }
.termin-status.status-wenige-plaetze { background: #FDF3E0; color: var(--gelb); }
.termin-status.status-ausgebucht { background: #FBE9E8; color: var(--rot); }

.termin-eckdaten {
  display: grid; grid-template-columns: max-content 1fr; gap: var(--space-1) var(--space-3);
  margin: 0 0 var(--space-4); padding: var(--space-3);
  background: var(--gray-bg); border-radius: var(--r-lg);
}
.termin-eckdaten dt { font-weight: 700; color: var(--gray-text); }
.termin-eckdaten dd { margin: 0; }

.termin-inhalte { margin-bottom: var(--space-4); }
.termin-aktion { margin: var(--space-4) 0; }
.termin-hinweis {
  background: #FBE9E8; border-left: 4px solid var(--rot);
  border-radius: 0 var(--r-sm) var(--r-sm) 0; padding: var(--space-2); margin: 0;
}
.termin-hinweis a, .termin-zurueck a, .termin-kontakt a { color: var(--sydney-700); }
.termin-kontakt { margin-bottom: var(--space-4); }
.termin-kontakt h2 { font-size: 20px; }
.termin-zurueck { font-size: 15px; }

/* G9, 21.09.2026 (gestaltung-0921b): Abstand unter dem Status des
   Einzeltermins. Er ersetzt das margin-bottom des header.termin-head, der mit
   dem Entwurf von single-termin.php entfaellt: Ueberschrift und Kursart
   stehen jetzt in der Titelflaeche, der Status bleibt als einzelnes Element
   darunter stehen. --space-4 ist derselbe Wert, den .termin-head hatte, der
   Abstand zur Eckdaten-Karte aendert sich also nicht.
   Die Regel .termin-head weiter oben bleibt stehen: sie kostet nichts und
   traegt wieder, falls der Kopfbereich je zurueckkommt. */
.page-content > .container > .termin-status { margin: 0 0 var(--space-4); }


/* ---------- Draft notice on legal pages ---------- */
.afv-entwurfsvermerk {
  background: #FDF3E0; border-left: 4px solid var(--gelb);
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
  padding: var(--space-2); margin-bottom: var(--space-3);
}


/* ---------- Open items in draft legal texts ----------
   Two forms, because the markers appear both ways: as a paragraph of their own
   (a review question) and inline inside a clause (a gap in the wording). The
   inline ones are the dangerous kind: a gap sitting inside a clause reads like
   finished contract text if it is not marked. Both must be
   unmissable in a team review; nobody may take a placeholder for valid
   contract text. */
.afv-pruefmarker {
  background: #FDF3E0; border-left: 4px solid var(--gelb);
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
  padding: var(--space-2); margin: var(--space-2) 0;
  font-style: italic; color: #6B4400;
}
.afv-pruefmarker strong { font-style: normal; }
.afv-offen {
  background: #FDF3E0; color: #6B4400; font-style: italic;
  padding: 1px 5px; border-radius: var(--r-sm);
  box-shadow: inset 0 -2px 0 var(--gelb);
}


/* ---------- Course pages ---------- */
/* D5, 21.09.2026: Die Gruppen sind nicht mehr durch Haarlinien getrennt,
   sondern durch einen abwechselnden Hintergrund. Jede zweite Gruppe einer
   Seite liegt auf --gray-bg über die volle Containerbreite; der Rahmen von
   66ch gilt nur für den Text darin, nicht für die Fläche. Der Innenabstand
   --space-5 gilt für ALLE Gruppen, auch die ungefärbten - sonst würde die
   linke Textkante von Gruppe zu Gruppe springen.
   Die Überschrift gehört zur Gruppe: .afv-angebot > h2 hat margin-top 0, der
   Abstand darüber kommt aus dem Innenabstand der Gruppe und liegt damit
   innerhalb der Färbung. Vorher brachte h2 selbst --space-5 mit und hing
   optisch am vorhergehenden Abschnitt.
   :nth-child(even of .afv-angebot) zählt nur die Gruppen, nicht die übrigen
   Geschwister; mit :nth-of-type wäre jedes div mitgezählt worden und die
   Reihenfolge hinge am Seiteninhalt. Ein Browser, der die Schreibweise nicht
   kennt, lässt die Regel fallen: dann sind alle Gruppen weiß, nichts bricht.
   --anthrazit auf --gray-bg ergibt 12,25:1. */
.afv-angebot { padding: var(--space-5); }
/* Berichtigung vom 21.09.2026: Die Regel hiess bis heute .afv-angebot > h2
   und hat nie gegriffen. WordPress legt um die Kinder einer wp:group einen
   .wp-block-group__inner-container; die Ueberschrift ist also ein Enkel, kein
   Kind. Ergebnis: ueber der ersten Ueberschrift jeder Gruppe standen
   --space-5 aus dem Innenabstand PLUS --space-5 aus dem margin-top der h2,
   zusammen 96px statt der gemeinten 48px. Die neue Schreibweise trifft das
   erste Kind des Innencontainers, gleich welcher Art.

   G2, 21.09.2026 (gestaltung-0921b): Dieselbe Berichtigung gilt fuer JEDE
   Gruppe, nicht nur fuer .afv-angebot. Unberuecksichtigt geblieben waren
   .afv-section und alles, was darauf aufbaut - der Kontaktkasten
   .afv-kontakt-teaser, .afv-kontaktdaten und .afv-anfahrt auf /kontakt/,
   .afv-kursangebote, .afv-anerkennungen und .afv-zielgruppen auf der
   Startseite. Auch die Regel .afv-section > h2 weiter oben trifft nur ein
   direktes Kind und lief deshalb ins Leere.
   Gemessen: im Kontaktkasten standen ueber der Ueberschrift --space-5 = 48px
   Innenabstand PLUS --space-5 = 48px margin-top, zusammen 96px; in einer
   .afv-section --space-6 = 72px plus 48px, zusammen 120px. Betroffen waren
   die Startseite (dreimal 120px), /kontakt/ (120px und, ueber einem figure,
   72px + 17px) und der Kontaktkasten auf 31, 32, 33, 34, 35, 36 (je 96px).
   Der Abstand kommt jetzt ueberall allein aus dem Innenabstand der Gruppe. */
.entry .wp-block-group > .wp-block-group__inner-container > :first-child,
.afv-angebot > .wp-block-group__inner-container > :first-child { margin-top: 0; }
.entry > :nth-child(even of .afv-angebot) {
  background: var(--gray-bg); border-radius: var(--r-lg);
}

/* G3, 21.09.2026 (gestaltung-0921b): Zwei Kaesten hintereinander beruehren
   sich nicht mehr.
   Keine der Kastenregeln vergibt ein margin: .afv-angebot hat nur padding,
   .afv-kontakt-teaser ebenfalls. Zwei aufeinanderfolgende Gruppen stiessen
   deshalb mit 0px aneinander - gemessen 22 solcher Stoesse auf den Seiten 31,
   32, 33, 34, 35, 36, 89 und der Startseite. Wo eine gefaerbte auf eine
   weisse Gruppe traf, sah es aus wie eine abgeschnittene Flaeche; wo zwei
   gefaerbte aufeinandertrafen, verschmolzen sie zu einem Block.
   --space-3 = 24px ist der kleinste Wert der Skala, der die Kante sichtbar
   macht, ohne die Gruppen auseinanderzureissen; der Innenabstand der Kaesten
   betraegt --space-5 = 48px, der Aussenabstand bleibt also deutlich kleiner
   als der Innenabstand.
   Die Regel nennt die Kaesten einzeln und nicht .wp-block-group allgemein:
   die Abschnitte der Startseite sind ebenfalls Gruppen, tragen aber keine
   eigene Flaeche, sondern eine Trennlinie und --space-6 Innenabstand. Dort
   stossen keine Flaechen aneinander, und 24px zusaetzlich wuerden die Linie
   nur von ihrem Abschnitt abruecken. */
.entry > .afv-angebot + .afv-angebot,
.entry > .afv-angebot + .afv-kontakt-teaser,
.entry > .afv-kontakt-teaser + .afv-angebot { margin-top: var(--space-3); }

/* D3, 21.09.2026: Die Innenbreite des grauen Kastens folgt dem Inhalt.
   Ohne Bild und ohne Seitenspalte steht in einer Kursgruppe nur die
   Textspalte, 66ch breit. Der Kasten lief trotzdem ueber die vollen 1280px
   des Containers; rechts blieben 553px gefaerbte Flaeche ohne Inhalt stehen,
   und genau das war der Eindruck "rechte Haelfte leer". Jetzt ist der Kasten
   so breit wie sein Inhalt plus Innenabstand: 66ch = 630.6px plus zweimal
   --space-5 = 726.6px.
   Mit Bild oder mit Seitenspalte hat der Kasten etwas zu tragen und nimmt
   wieder die volle Breite.

   G4, 21.09.2026 (gestaltung-0921b): Die Bedingung wird von der einzelnen
   Gruppe auf die SEITE gehoben.
   D3 hat je Gruppe entschieden. Auf einer Seite, die beides hat, sprang die
   rechte Kante dadurch von Kasten zu Kasten: auf /berufskraftfahrer-lkw/
   stand der erste Kasten (mit Bild) auf 1280px, die beiden folgenden auf
   726,6px, der Kontaktkasten wieder auf 1280px - drei Kantenwechsel von je
   553,4px auf einer Seite. Dieselbe Folge auf 32 und 33.
   Jetzt entscheidet, ob die SEITE ueberhaupt einen zweispaltigen Kasten hat.
   Hat sie einen, stehen alle Kaesten auf der vollen Breite und die Kante
   laeuft durch; hat sie keinen, stehen alle auf 726,6px. Beides ueber
   :has() am .entry, also ohne eine Klasse im Inhalt.
   Ergebnis je Seite: 31, 32, 33 durchgehend 1280px; 89 durchgehend 726,6px;
   34, 35 und 36 durchgehend 821,3px (Inhaltsspalte neben der Seitenspalte).
   Damit die nun wieder vollbreiten Textkaesten rechts nicht leer stehen,
   wandert die Eckdaten-Karte in ihnen neben den Text - siehe G5. */
.entry .afv-angebot,
.entry > .afv-kontakt-teaser { max-width: calc(66ch + 2 * var(--space-5)); }
.entry:has(.afv-bild) .afv-angebot,
.entry:has(.afv-bild) > .afv-kontakt-teaser,
.afv-mit-seitenspalte .entry .afv-angebot,
.afv-mit-seitenspalte .entry > .afv-kontakt-teaser { max-width: none; }

/* D1, 21.09.2026: Bild-Text-Abschnitt.
   Steht ein figure.afv-bild als erstes Kind im Innencontainer einer Gruppe,
   wird die Gruppe ab 60em zweispaltig: das Bild in der einen Spalte, der
   ganze uebrige Inhalt in der anderen. Welche Seite das Bild bekommt, sagt
   die Zusatzklasse afv-bild-links oder afv-bild-rechts.

   Warum :has und nicht eine Klasse an der Gruppe: die Klasse muesste im
   post_content stehen und waere damit eine Inhaltsaenderung an jeder Gruppe,
   die je ein Bild bekommt. Kennt ein Browser :has nicht, faellt die ganze
   Regel weg und das Bild steht wie bisher ueber dem Text - kein Bruch.

   .afv-beruf ist ausgenommen: dort liegt auch ein .afv-bild als erstes Kind,
   die Spalten stehen aber schon in einer eigenen Regel weiter oben.

   Warum grid-row: 1 / span 20 und row-gap 0: das Bild soll neben dem
   gesamten Text stehen, nicht nur neben dessen erster Zeile. Ein Rasterfeld
   ueber 20 Zeilen deckt jede vorkommende Gruppe ab - die groesste hat neun
   Kinder. Leere Zeilen sind bei row-gap 0 null Pixel hoch, kosten also
   nichts. Die Abstaende zwischen den Textbloecken kommen wie bisher aus
   deren eigenen margins. */
.entry .afv-angebot .afv-bild { margin: 0 0 var(--space-3); }
.entry .afv-angebot .afv-bild img,
.entry .afv-kontaktdaten .afv-bild img {
  aspect-ratio: 3 / 2; object-fit: cover; width: 100%;
}
@media (min-width: 60em) {
  .entry .wp-block-group:not(.afv-beruf) > .wp-block-group__inner-container:has(> .afv-bild:first-child) {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    column-gap: var(--space-5);
    row-gap: 0;
    align-items: start;
    max-width: none;
  }
  .entry .wp-block-group:not(.afv-beruf) > .wp-block-group__inner-container:has(> .afv-bild:first-child) > * {
    grid-column: 2;
  }
  .entry .wp-block-group:not(.afv-beruf) > .wp-block-group__inner-container:has(> .afv-bild:first-child) > .afv-bild {
    grid-column: 1; grid-row: 1 / span 20; margin: 0;
  }
  .entry .wp-block-group:not(.afv-beruf) > .wp-block-group__inner-container:has(> .afv-bild:first-child) > .afv-bild + * {
    margin-top: 0;
  }
  /* Spiegelbild: das Bild rechts. Gleiche Spezifitaet, spaetere Stelle. */
  .entry .wp-block-group:not(.afv-beruf) > .wp-block-group__inner-container:has(> .afv-bild-rechts:first-child) > * {
    grid-column: 1;
  }
  .entry .wp-block-group:not(.afv-beruf) > .wp-block-group__inner-container:has(> .afv-bild-rechts:first-child) > .afv-bild {
    grid-column: 2; grid-row: 1 / span 20;
  }

  /* NACHTRAG N1, 21.09.2026, Freigabe Jens: Auf einer Seite MIT Seitenspalte
     bleibt der Bild-Abschnitt einspaltig. Das Bild steht ueber die volle
     Breite der Inhaltsspalte, der Text darunter.
     Grund: auf diesen Seiten stehen drei Dinge nebeneinander - Bild, Text
     und die Karte "Kursdaten". Die Textspalte war dadurch nur 406,4px breit,
     also 42,5 Zeichen; das ist keine Zeilenlaenge mehr, sondern eine
     Zeitungsspalte. Jetzt steht der Text auf 66ch = 630,6px und das Bild auf
     der vollen Innenbreite der Gruppe, 725,3px.
     Der Bild-Text-Wechsel afv-bild-links / afv-bild-rechts gilt damit nur
     noch auf Seiten ohne Seitenspalte. aspect-ratio 3/2 bleibt, die Regel
     dafuer steht ausserhalb dieses Blocks.
     Gleiche Spezifitaet wie die Regeln darueber, deshalb steht der Nachtrag
     hier am Ende des Blocks und nicht davor. */
  .afv-mit-seitenspalte .entry .wp-block-group > .wp-block-group__inner-container:has(> .afv-bild:first-child) {
    display: block;
  }
  .afv-mit-seitenspalte .entry .wp-block-group > .wp-block-group__inner-container:has(> .afv-bild:first-child) > * {
    max-width: 66ch;
  }
  .afv-mit-seitenspalte .entry .wp-block-group > .wp-block-group__inner-container:has(> .afv-bild:first-child) > .afv-bild {
    max-width: none; margin: 0 0 var(--space-3);
  }
}

/* G5, 21.09.2026 (gestaltung-0921b): In einem Kasten ohne Bild steht die
   Eckdaten-Karte ab 64em rechts neben dem Text statt darunter.
   Anlass ist G4: die Textkaesten auf 31, 32 und 33 stehen wieder auf der
   vollen Breite, und ohne diesen Zusatz blieben rechts neben der 630,6px
   breiten Textspalte 553,4px gefaerbte Flaeche leer - genau der Zustand, den
   D3 beheben wollte. Die Eckdaten sind der Inhalt, der dort hingehoert: eine
   Karte, die den Kurs in Zahlen zusammenfasst und neben dem Text gelesen
   wird, nicht hinter ihm.
   Es ist dasselbe Verhaeltnis wie bei der Seitenspalte "Kursdaten", nur eine
   Ebene tiefer und ohne Eingriff in den Inhalt: kein Block wird gehoben,
   die Karte bleibt im Fluss und wird nur anders gestellt. Die Vorlese- und
   Tastaturreihenfolge bleibt deshalb die des Quelltextes.
   Masse bei 1360px Fenster: Kasten 1280px, abzueglich zweimal --space-5
   Innenabstand bleiben 1184px; 2fr/1fr mit --space-5 Spaltenabstand ergibt
   757,3px fuer die Textspalte und 378,7px fuer die Karte. Der Text selbst
   bleibt darin auf 66ch = 630,6px: die 66ch-Grenze steht sonst auf dem
   Innencontainer, und der wird hier zum Raster und freigegeben. Ohne die
   Grenze auf den Rasterelementen liefe die Zeile auf 757,3px, das sind
   79,3 Zeichen - ueber den 66 des Themes und dicht an der Obergrenze 80 aus
   der Leitplanke. Die Zeilenlaenge aendert sich so also nicht.
   Die Karte steht bei 378,7px einspaltig, Begriff ueber Wert - genau wie in
   der Seitenspalte, wo sie 410,7px hat. Zweispaltig braeuchte allein die
   Begriffspalte 190px ("Dauer ohne Vorerfahrung").
   Der Umbruch liegt bei 64em, demselben Punkt wie die Seitenspalte: darunter
   steht die Karte wieder unter dem Text.
   Kennt ein Browser :has() nicht, faellt die Regel weg und die Karte steht
   wie bisher im Fluss - kein Bruch. */
@media (min-width: 64em) {
  .entry .afv-angebot > .wp-block-group__inner-container:has(> .afv-eckdaten):not(:has(> .afv-bild)) {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
    column-gap: var(--space-5);
    row-gap: 0;
    align-items: start;
    max-width: none;
  }
  .entry .afv-angebot > .wp-block-group__inner-container:has(> .afv-eckdaten):not(:has(> .afv-bild)) > * {
    grid-column: 1; max-width: 66ch;
  }
  .entry .afv-angebot > .wp-block-group__inner-container:has(> .afv-eckdaten):not(:has(> .afv-bild)) > .afv-eckdaten {
    grid-column: 2; grid-row: 1 / span 20; margin: 0;
    grid-template-columns: 1fr; gap: 0;
  }
  .entry .afv-angebot > .wp-block-group__inner-container:has(> .afv-eckdaten):not(:has(> .afv-bild)) > .afv-eckdaten dt {
    margin-top: var(--space-2);
  }
  .entry .afv-angebot > .wp-block-group__inner-container:has(> .afv-eckdaten):not(:has(> .afv-bild)) > .afv-eckdaten dt:first-child {
    margin-top: 0;
  }
  /* Auf einer Seite MIT Seitenspalte bleibt der Kasten einspaltig: dort
     steht die Karte "Kursdaten" bereits rechts, eine zweite Spalte im Kasten
     waere die dritte Bahn nebeneinander. Derselbe Grund wie bei Nachtrag N1. */
  .afv-mit-seitenspalte .entry .afv-angebot > .wp-block-group__inner-container:has(> .afv-eckdaten) {
    display: block;
  }
}

/* D2, 21.09.2026: Seitenspalte "Kursdaten".
   page.php hebt die Eckdaten, den Foerderungshinweis und die Aktionszeile aus
   dem Fluss und stellt sie rechts in ein aside. Der Umbruch liegt bei 64em
   und damit hoeher als der Bild-Umbruch: die Spalte nimmt ein Drittel der
   Breite, und darunter bliebe fuer den Inhalt zu wenig uebrig.
   Bei 1320px Fenster: Container 1280px, abzueglich --space-5 Spalte 48px
   bleiben 1232px, davon 2/3 = 821px Inhalt und 1/3 = 411px Seitenspalte.
   Die Eckdaten stehen in der Spalte einspaltig, Begriff ueber Wert: bei
   411px minus zweimal --space-4 bleiben 347px, und "Dauer ohne Vorerfahrung"
   allein ist in der Begriffspalte schon 190px breit. */
.afv-kursdaten {
  background: var(--gray-bg); border-radius: var(--r-lg);
  padding: var(--space-4); margin-top: var(--space-5);
}
.afv-kursdaten > h2 { margin: 0 0 var(--space-3); font-size: 1.25rem; }
.afv-kursdaten .afv-eckdaten {
  display: block; background: none; padding: 0; margin: 0; border-radius: 0;
}
.afv-kursdaten .afv-eckdaten dt { margin-top: var(--space-2); }
.afv-kursdaten .afv-eckdaten dt:first-child { margin-top: 0; }
.afv-kursdaten .afv-foerderung { margin: var(--space-3) 0 0; }
/* Die Aktionen stehen gestapelt und ueber die ganze Breite der Karte. Das
   Trennzeichen zwischen zwei Links ist Inhalt und bleibt stehen; es steht
   jetzt als Punkt zwischen den beiden Schaltflaechen und traegt mit
   --gray-text auf --gray-bg 5,87:1. */
/* NACHTRAG S4, 21.09.2026: Das Trennzeichen zwischen den beiden Links nimmt
   page.php aus der Ausgabe der Seitenspalte; die Faerbung, die es lesbar
   machen sollte, ist damit ueberfluessig. Der Abstand zwischen den
   gestapelten Schaltflaechen ist --space-3. */
.afv-kursdaten .afv-kursaktion {
  flex-direction: column; align-items: stretch; text-align: center;
  gap: var(--space-3); margin: var(--space-3) 0 0;
}
@media (min-width: 64em) {
  .afv-mit-seitenspalte {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
    column-gap: var(--space-5);
    align-items: start;
  }
  /* Klebt beim Scrollen mit Abstand unter dem oberen Rand. Die Kopfzeile
     scrollt mit, --space-3 ist also der Abstand zum Fensterrand. */
  .afv-kursdaten { position: sticky; top: var(--space-3); margin-top: 0; }
}

/* D4, 21.09.2026: Der Kontaktkasten am Fuss der Kursseiten ist ab 60em
   zweispaltig - links Text und Kontaktwege, rechts die Schaltflaeche,
   senkrecht mittig zum Text. Vorher stand die Schaltflaeche unter einem
   Block von drei kurzen Absaetzen, und rechts daneben blieb die halbe
   graue Flaeche leer. Keine neue Farbe, kein neues Markup. */
@media (min-width: 60em) {
  .entry .afv-kontakt-teaser > .wp-block-group__inner-container {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    column-gap: var(--space-5);
    align-items: start;
    max-width: none;
  }
  .entry .afv-kontakt-teaser > .wp-block-group__inner-container > * {
    grid-column: 1; max-width: 66ch;
  }
  .entry .afv-kontakt-teaser > .wp-block-group__inner-container > .afv-cta {
    grid-column: 2; grid-row: 1 / span 20; align-self: center; margin: 0;
  }
}

/* E1, 21.09.2026: Der Pfeil-Link am Fuss jeder Kachel im Kursraster.
   Eigene Klasse, weil die Kachel zwei Arten von Absatz kennt: den
   beschreibenden Satz und diesen einen Handlungslink. Der Pfeil steht per
   CSS da, nicht im Inhalt, und benutzt dieselbe Schreibweise wie die Pfeile
   der Navigation: die zweite content-Deklaration haelt ihn aus dem
   zugaenglichen Namen heraus, der Linktext bleibt "Mehr erfahren".
   --sydney-700 auf --white ergibt 5,09:1. */
.afv-kachel-mehr { margin-bottom: 0; }
.afv-kachel-mehr a::after { content: '\00a0\2192'; content: '\00a0\2192' / ''; }

/* D3, 21.09.2026: Die Eckdaten sind eine Karte. Radius --r-md statt --r-lg
   und Innenabstand --space-4 statt --space-3, damit sie sich von der
   Gruppenfläche darunter absetzt. dt in --gray-text auf --gray-bg: 5,87:1,
   dd erbt --anthrazit: 12,25:1. Unter 40em einspaltig, siehe unten. */
.afv-eckdaten {
  display: grid; grid-template-columns: max-content 1fr;
  gap: var(--space-1) var(--space-3); margin: 0 0 var(--space-3);
  padding: var(--space-4); background: var(--gray-bg); border-radius: var(--r-md);
}
.afv-eckdaten dt { font-weight: 700; color: var(--gray-text); }
.afv-eckdaten dd { margin: 0; }

/* Funding notice, output by the [afv_foerderung] shortcode. Deliberately set
   apart: it is a legally sensitive statement and must not blend into the copy. */
.afv-foerderung {
  background: var(--sydney-50); border: 1px solid var(--sydney-200);
  border-left: 4px solid var(--sydney-700);
  border-radius: 0 var(--r-md) var(--r-md) 0;
  padding: var(--space-3); margin: var(--space-3) 0;
}
.afv-foerderung-titel {
  margin: 0 0 var(--space-1); font-weight: 700; color: var(--sydney-700);
  font-size: 15px; letter-spacing: .03em; text-transform: uppercase;
}
.afv-foerderung p:last-child { margin-bottom: 0; }

/* Provider or accreditation notice on a course page - factual, set apart, but
   visually quieter than the funding box so the two do not compete. */
.afv-traegerhinweis {
  background: var(--gray-bg); border-left: 4px solid var(--gray-text);
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
  padding: var(--space-2); margin: var(--space-2) 0; font-size: 15px;
}

.afv-modulliste > li { margin-bottom: var(--space-1); }
/* D4, 21.09.2026: Die Aktionslinks am Fuß einer Gruppe sind Schaltflächen.
   Weiß auf --sydney-700 ergibt 5,09:1 für die Beschriftung; die Fläche steht
   mit 5,09:1 gegen den weißen Seitengrund und mit 4,70:1 gegen --gray-bg der
   gefärbten Gruppen, in beiden Fällen über den 3:1 für Bedienelemente. Hover
   --anthrazit mit weißer Schrift: 13,28:1, ohne transition.
   Der Fokusring der Grundregel greift ohne Zusatz: der innere Ring in
   --sydney-700 liegt außerhalb der Schaltfläche auf dem Seitengrund und
   erreicht dort 5,09:1.
   Zielgröße: --space-1 oben und unten plus 0.9375rem Schrift bei
   Zeilenhöhe 1.65 ergeben rund 41px, über den 24px aus WCAG 2.2.
   Kein text-transform: die Beschriftungen sind ganze Sätze, und Versalien
   sind in diesem Theme den Überschriften vorbehalten. Die Schaltfläche
   unterscheidet sich darin bewusst von .btn. */
.afv-kursaktion {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: var(--space-2); margin: var(--space-3) 0 0;
}
.afv-kursaktion a:not(.btn) {
  display: inline-block; font-size: 0.9375rem; font-weight: 700;
  padding: var(--space-1) var(--space-3); border-radius: var(--r-md);
  background: var(--sydney-700); color: var(--white); text-decoration: none;
}
.afv-kursaktion a:not(.btn):hover { background: var(--anthrazit); color: var(--white); }

/* ---------- Mobile ---------- */
/* B1, 21.09.2026: Der Umbruch der Navigation liegt bei 60em statt bei 900px,
   damit er mit der Schaltfläche "Menü" zusammenfällt. Zwischen 900px und
   960px galt sonst schon die Schaltfläche, aber noch das Zeilenlayout des
   Desktops. Geöffnet steht die Liste als Spalte unter der Kopfzeile: fünf
   nebeneinander umbrechende Punkte waren auf dem Telefon schwer zu treffen.
   Jeder Punkt ist 2.75rem hoch, das sind 44px und damit über den 24px aus
   WCAG 2.2. */
@media (max-width: 59.99em) {
  .header-inner { gap: var(--space-2); }
  .main-nav { flex-basis: 100%; }
  .afv-menue > ul { flex-direction: column; align-items: stretch;
    gap: var(--space-1); margin: var(--space-2) 0 var(--space-1); }
  .main-nav a { display: flex; align-items: center; min-height: 2.75rem; padding: 0; }
  .main-nav .has-panel { position: static; width: 100%; }
  .nav-panel > summary { display: flex; align-items: center; min-height: 2.75rem; padding: 0; }
  /* Accordion: the panel stays in the flow instead of floating over content. */
  .nav-panel-list {
    position: static; min-width: 0; width: 100%; margin: var(--space-1) 0 var(--space-2);
    background: rgba(255, 255, 255, .06); box-shadow: none;
    border-left: 2px solid var(--sydney);
    border-radius: 0 var(--r-sm) var(--r-sm) 0; padding: var(--space-1);
  }
  .nav-panel-list a { color: var(--white); padding: 0 var(--space-1); min-height: 2.75rem; }
  .nav-panel-list a:hover { background: rgba(255, 255, 255, .12); color: var(--white); }
  .nav-panel-list a[aria-current="page"] { color: var(--sydney-200); }
}
/* NACHTRAG S3: Die Zeile .afv-kachel-reihe entfaellt hier. Die Spaltenzahl
   der Kachelraster steht jetzt vollstaendig oben bei 40em und 64em; eine
   spaetere Regel mit gleicher Spezifitaet haette sie zwischen 640 und 900px
   wieder auf eine Spalte gezwungen. .afv-beruf bleibt unveraendert. */
@media (max-width: 900px) {
  .afv-beruf { grid-template-columns: 1fr; }
  .afv-beruf .afv-bild { grid-row: auto; }
}
/* D3, 21.09.2026: Die Eckdaten brechen bei 40em auf eine Spalte um, nicht
   erst bei 700px. Eigener Block, weil die übrigen Regeln unten an 700px
   hängen. Der Innenabstand geht dabei auf --space-3 zurück: --space-4 auf
   beiden Seiten kostet auf einem 360px-Gerät zu viel Zeilenbreite. */
@media (max-width: 40em) {
  .afv-eckdaten { grid-template-columns: 1fr; gap: 0 0; padding: var(--space-3); }
  .afv-eckdaten dt { margin-top: var(--space-2); }
}

/* B2, 21.09.2026: Die Titelfläche wird auf dem Telefon flacher und die
   Unterzeile eine Stufe kleiner. --space-5 oben und unten sind auf einem
   360px-Gerät 96px, die nur Farbe tragen; --space-4 sind 64px. Die Unterzeile
   stand in 1.1875rem und damit fast so groß wie der Fließtext darunter. */
@media (max-width: 59.99em) {
  .afv-titel { padding: var(--space-4) 0; }
  .afv-titel-unterzeile { font-size: 1rem; }
}

@media (max-width: 700px) {
  body { font-size: 16px; }
  .termin-eckdaten { grid-template-columns: 1fr; gap: 0 0; }
  .termin-eckdaten dt { margin-top: var(--space-2); }
  /* D5, 21.09.2026: Der Innenabstand der Gruppen geht auf dem Telefon
     zurück. --space-5 auf beiden Seiten ließe von 320px Inhaltsbreite nur
     224px übrig. */
  .afv-angebot { padding: var(--space-4) var(--space-2); }
  .afv-section { padding: var(--space-5) 0; }
  .afv-titel-aktionen .btn { width: 100%; text-align: center; }
  .termine-block { margin-top: calc(var(--space-5) * -1); }
  .termine-panel { padding: var(--space-3) var(--space-2); }
  .termin-card { grid-template-columns: 64px 1fr; gap: var(--space-2); }
  .termin-side { grid-column: 1 / -1; flex-direction: row; align-items: center;
    justify-content: space-between; }
  .termin-date .d { font-size: 22px; }
  .brand img { height: 32px; }
  .filter-field select { min-width: 0; width: 100%; }
  .filter-field { width: 100%; }
  /* NACHTRAG S3: die Zeile .afv-kachelband entfaellt, aus demselben Grund. */
}

/* =========================================================================
   K1 bis K7, 22.09.2026 (struktur-0922, Stand nach Nachtrag N1)
   Faktenkacheln, Nebenkasten, Textbild und Bild-Untergruppe auf
   /fahrschule/ und /fahrlehrerfachschule/. Anlass sind I1 und I2 aus
   afv-gestaltung-0921b/BEFUND.md: beide Seiten hatten keine einzige
   wp:group.afv-angebot und ihre Inhaltsbilder standen als figure ohne
   Gruppe. Beides ist jetzt Inhalt geworden; dieser Block ist die Stilseite.
   Kein neues Token, keine neue Farbe, kein neuer Radius, kein neuer
   Umbruchpunkt. Verwendet werden 60em und 64em, beide schon im Theme.
   ========================================================================= */

/* K1: Freigabe des Innencontainers - die Enkel-Regel.
   WordPress legt um die Kinder einer wp:group einen
   .wp-block-group__inner-container. Dieser Container ist das direkte Kind
   von .afv-angebot und faellt damit unter ".entry .afv-angebot > *" weiter
   oben, also unter 66ch = 630,6px. Ein Raster darin waere auf 630,6px
   eingeschnuert - derselbe Fall, der bei .afv-kachel-reihe und
   .afv-kachelband schon einmal auftrat (Zeilen 595 bis 600).
   Dieselbe Bauform wird hier wiederholt: Container frei, Kinder wieder auf
   66ch, und die vier neuen Muster ausdruecklich freigegeben.
   Die Freigabe haengt an :has() und greift nur, wo eines der vier neuen
   Muster wirklich im Kasten steckt. Die Kursseiten 31 bis 36 und 89 haben
   keines davon; ihre Kaesten bleiben unberuehrt. Kennt ein Browser :has()
   nicht, fallen alle Zeilen weg und der Kasten steht wie bisher auf 66ch -
   kein Bruch, nur kein Raster. */
.entry .afv-angebot > .wp-block-group__inner-container:has(> .afv-fakten),
.entry .afv-angebot > .wp-block-group__inner-container:has(> .afv-nebenkasten),
.entry .afv-angebot > .wp-block-group__inner-container:has(> .afv-bildblock),
.entry .afv-angebot > .wp-block-group__inner-container:has(> .afv-textbild) {
  max-width: none;
}
.entry .afv-angebot > .wp-block-group__inner-container:has(> .afv-fakten) > *,
.entry .afv-angebot > .wp-block-group__inner-container:has(> .afv-nebenkasten) > *,
.entry .afv-angebot > .wp-block-group__inner-container:has(> .afv-bildblock) > *,
.entry .afv-angebot > .wp-block-group__inner-container:has(> .afv-textbild) > * {
  max-width: 66ch;
}
/* Gleiche Spezifitaet wie die Zeile darueber, spaetere Stelle - deshalb
   gewinnt die Freigabe. */
.entry .afv-angebot > .wp-block-group__inner-container > .afv-fakten,
.entry .afv-angebot > .wp-block-group__inner-container > .afv-nebenkasten,
.entry .afv-angebot > .wp-block-group__inner-container > .afv-bildblock,
.entry .afv-angebot > .wp-block-group__inner-container > .afv-textbild {
  max-width: none;
}

/* K2: Das Kachelraster .afv-fakten.
   Eine Kachel je Zeile, ab 60em so viele nebeneinander, wie bei 20rem
   Mindestbreite hineinpassen. auto-fit statt fester Spaltenzahl, weil die
   Gruppe je nach Kurs zwei, drei oder sechs Kacheln traegt.

   Rechnung bei 1360px Fenster. Container 1280px, Kasten ueber die volle
   Breite (G4 greift, weil beide Seiten ein .afv-bild tragen), abzueglich
   zweimal --space-5 Innenabstand bleiben 1184px.
     4 Spuren braeuchten 4 x 320 + 3 x 32 = 1376px  > 1184  - passt nicht
     3 Spuren brauchen  3 x 320 + 2 x 32 = 1024px  <= 1184  - passt
   Also drei Spuren zu (1184 - 64) / 3 = 373,3px. Bei zwei Kacheln sind es
   (1184 - 32) / 2 = 576,0px, bei sechs Kacheln zwei Reihen zu drei.
   Bei 1024px: Kasten innen 888px, zwei Spuren zu 428,0px.
   Bei  960px: Kasten innen 824px, zwei Spuren zu 396,0px.

   Warum 20rem und nicht 16rem (Freigabe Jens, N1 Frage 1): mit 16rem = 256px
   passen bei 1184px vier Spuren zu 272,0px. Davon bleiben nach --space-3
   Innenabstand 224,0px und nach dem Listeneinzug von 1.3em = 22,1px noch
   201,9px, das sind 21,1 Zeichen - schmaler als jede Kachel, die das Theme
   heute hat (.afv-kachel auf der Startseite: 252,0px = 26,4 Zeichen). Mit
   20rem sind es 373,3px Kachel, 325,3px Text und in der Liste 303,2px =
   31,7 Zeichen.

   Der Spaltenabstand ist --space-4 = 32px, der Zeilenabstand --space-3 =
   24px - derselbe Wert, den .afv-kachel-reihe zwischen ihren Kacheln hat. */
.afv-fakten { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-3); }
/* Enkel-Regel wie bei .afv-kachel-reihe: der Innencontainer verschwindet aus
   dem Kasten, damit die Kacheln selbst die Rasterelemente sind. */
.afv-fakten > .wp-block-group__inner-container { display: contents; }
.afv-fakten, .afv-nebenkasten, .afv-bildblock, .afv-textbild { margin: var(--space-4) 0; }
@media (min-width: 60em) {
  .afv-fakten {
    grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
    column-gap: var(--space-4);
  }
}

/* K3: Die Kachel .afv-fakt.
   Die Flaeche ist der Gegensatz zum Kasten, in dem sie liegt: im weissen
   Kasten --gray-bg, im gefaerbten --white. So bleibt die Kachel in jedem
   Kurs als eigene Flaeche lesbar, ohne dass eine neue Farbe dazukommt.
   Kontrast --anthrazit gegen --gray-bg 12,25:1, gegen --white 13,28:1; die
   Listenpunkte tragen --sydney-700, das sind 4,70:1 auf --gray-bg und
   5,09:1 auf --white. Alles ueber 4,5:1.
   :nth-child(even of .afv-angebot) ist dieselbe Schreibweise, mit der D5 die
   Kaesten faerbt. Kennt ein Browser sie nicht, sind alle Kaesten weiss und
   alle Kacheln grau - das ist in sich stimmig und bricht nichts.
   margin: 0 steht ausdruecklich da: die Kachel ist ein Rasterelement, und
   kein fremder Blockabstand soll das Raster verschieben. */
.afv-fakt {
  margin: 0; padding: var(--space-3);
  background: var(--gray-bg); border-radius: var(--r-md);
}
.entry > :nth-child(even of .afv-angebot) .afv-fakt { background: var(--white); }
/* Die Ueberschrift der Kachel steht auf 19px wie .afv-kachel h3 auf der
   Startseite. Die Themagroesse waere bei 1280px 24px (h3) - in einer Kachel
   von 325,3px Textbreite waere das eine Versalzeile von 20,2 Zeichen und
   damit schwerer als die Liste darunter. Die Ueberschriftenebene im Markup
   aendert sich nicht, nur die Groesse.
   margin-top: 0 kommt schon aus G2 (erstes Kind eines Innencontainers); die
   Zeile steht hier trotzdem, damit die Kachel nicht von einer fremden Regel
   abhaengt.
   overflow-wrap: anywhere ist dieselbe Ausnahme wie bei .afv-kachel h3: ab
   60em steht hyphens auf manual, ein zu langes Wort wuerde sonst ueber die
   Kachel hinauslaufen statt umzubrechen. Heute laeuft kein Titel ueber -
   laengster Fall "FUEHRERSCHEINAUSBILDUNG" mit 22 Zeichen zu 12,53px =
   275,7px gegen 325,3px Textbreite. Die Regel ist die Zusage, dass das auch
   nach einer Textaenderung so bleibt. */
.afv-fakt h3, .afv-fakt h4 {
  margin-top: 0; font-size: 19px; overflow-wrap: anywhere;
}
/* Enger Zeilenabstand in der Kachel, --space-1 statt --space-2. Dieselbe
   Entscheidung wie G8, nur hier an der Kachel und nicht an der Laenge der
   Liste: in einer Kachel steht die Liste als Block und nicht als Fliesstext. */
.entry .afv-fakt li { margin-bottom: var(--space-1); }
.afv-fakt > .wp-block-group__inner-container > :last-child { margin-bottom: 0; }

/* K4: Der Nebenkasten .afv-nebenkasten.
   NACHTRAG N1.1, Freigabe Jens 22.09.2026: die Regel hiess bis eben
   .afv-abschluss und band die rechte Spalte an .afv-foerderung. Beides ist
   zu eng gewesen. Das Muster ist allgemeiner: links Text, rechts EIN Kasten,
   und welcher das ist, sagt der Inhalt. Die rechte Spalte nimmt deshalb das
   LETZTE Kind der Gruppe - heute ein Foerderungskasten oder ein
   .afv-traegerhinweis, moeglich ist auch eine .afv-eckdaten-Karte.
   Es ist Zeile fuer Zeile die Bauform von G5, nur eine Ebene tiefer: kein
   Block wird gehoben, die Reihenfolge im Quelltext bleibt und damit auch die
   Vorlese- und Tastaturreihenfolge. Dass der Kasten im Quelltext zuletzt
   steht und optisch oben rechts, ist dieselbe Verschiebung, die die
   Eckdaten-Karte in G5 schon macht.
   Masse bei 1360px Fenster: Gruppe 1184,0px, abzueglich --space-5
   Spaltenabstand bleiben 1136,0px; 2fr/1fr ergibt 757,3px fuer den Text und
   378,7px fuer den Kasten - dieselben Zahlen wie bei G5. Der Text bleibt
   darin auf 66ch = 630,6px; ohne die Grenze liefe die Zeile auf 79,3
   Zeichen und damit hart an die 80 aus der Leitplanke.
   Umbruchpunkt 64em wie bei G5 und der Seitenspalte; darunter steht der
   Kasten wieder unter dem Text.
   grid-row: 1 / span 20 bei row-gap 0 - derselbe Kunstgriff wie bei D1: der
   Kasten steht neben dem ganzen Text, nicht nur neben dessen erster Zeile.
   Die groesste Gruppe hat vier Kinder, 20 Zeilen decken jeden Fall. */
@media (min-width: 64em) {
  .entry .afv-nebenkasten > .wp-block-group__inner-container {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
    column-gap: var(--space-5);
    row-gap: 0;
    align-items: start;
  }
  .entry .afv-nebenkasten > .wp-block-group__inner-container > * {
    grid-column: 1; max-width: 66ch;
  }
  .entry .afv-nebenkasten > .wp-block-group__inner-container > :last-child {
    grid-column: 2; grid-row: 1 / span 20; max-width: none; margin: 0;
  }
  /* Vorbereitet, heute auf keiner der beiden Seiten im Einsatz: steht rechts
     eine Eckdaten-Karte, steht sie wie in der Seitenspalte einspaltig,
     Begriff ueber Wert. Zweispaltig braeuchte allein die Begriffspalte
     190px ("Dauer ohne Vorerfahrung") von 378,7px. */
  .entry .afv-nebenkasten > .wp-block-group__inner-container > .afv-eckdaten:last-child {
    grid-template-columns: 1fr; gap: 0;
  }
  .entry .afv-nebenkasten > .wp-block-group__inner-container > .afv-eckdaten:last-child dt {
    margin-top: var(--space-2);
  }
  .entry .afv-nebenkasten > .wp-block-group__inner-container > .afv-eckdaten:last-child dt:first-child {
    margin-top: 0;
  }
}

/* K5: Die Bild-Untergruppe .afv-bildblock.
   Steht das figure im Kurs VOR seinem Text - auf /fahrlehrerfachschule/ im
   Kasten "Fahrlehrerlaubnis Klasse A" gleich hinter der h2 -, kann es nicht
   erstes Kind des Kurskastens werden, ohne die Dokumentreihenfolge zu
   brechen. Es steht deshalb in einer eigenen Untergruppe, und dort ist es
   erstes Kind.
   Das Zweispalten-CSS von D1 greift damit ohne jede Aenderung: es sucht
   ".entry .wp-block-group:not(.afv-beruf) > .wp-block-group__inner-container
   :has(> .afv-bild:first-child)" und findet die Untergruppe genauso wie
   frueher den Kurskasten. Nachgeprueft in der Renderprobe.
   Die Klasse .afv-bildblock traegt deshalb nur zweierlei: den Aussenabstand
   (oben bei K2 zusammen mit den anderen Mustern) und die Breitenfreigabe in
   K1. Ueber :has() waeren beides Regeln mit sieben Klassen gewesen, die die
   Nullung des ersten Kindes aus G2 ueberstimmt haetten - deshalb die Klasse
   und kein Selektorkunststueck.
   Masse bei 1360px: Untergruppe 1184px, zwei Spalten zu 568,0px
   (59,5 Zeichen), Bild 568,0 x 378,7px bei aspect-ratio 3/2. */

/* K6: Textbild .afv-textbild.
   NACHTRAG N1.2, Freigabe Jens 22.09.2026. Steht im Quelltext erst der
   Einleitungsabsatz und dann das figure, ist D1 nicht anwendbar: es verlangt
   das figure als erstes Kind. Umgestellt wird nichts - stattdessen ein
   eigenes Muster, das die Quelltextfolge Absatz/Bild abbildet und sie ab
   60em nebeneinander stellt: links der Absatz, rechts das Bild.
   Zwei gleich breite Spalten statt 2fr/1fr, weil hier kein Text neben einem
   Kasten steht, sondern ein Absatz neben einem Bild; das ist dasselbe
   Verhaeltnis wie beim zweispaltigen Einstieg .afv-einstieg, und von dort
   kommt auch align-items: center.
   Das Bild bleibt ungeschnitten: die Regel weiter oben stellt Bilder in
   einer Gruppe auf aspect-ratio 3/2 mit object-fit: cover. Das Seitenformat
   bleibt, der Beschnitt geht weg. Die drei Originale sind 1536 x 1024 und
   damit schon genau 3:2 - sichtbar aendert das heute nichts, es ist die
   Zusage fuer das naechste Bild.
   Masse bei 1360px: Gruppe 1184,0px, zwei Spalten zu (1184 - 48) / 2 =
   568,0px, Absatz also 59,5 Zeichen, Bild 568,0 x 378,7px.
   Bei 960px: Gruppe 824,0px, Spalten zu 388,0px, Bild 388,0 x 258,7px.
   Unter 60em steht der Absatz ueber dem Bild, jeder ueber die volle Breite -
   das ergibt sich aus der Quelltextfolge, ohne eine eigene Regel. */
.entry .afv-textbild .afv-bild img { aspect-ratio: 3 / 2; object-fit: contain; }
@media (min-width: 60em) {
  .entry .afv-textbild > .wp-block-group__inner-container {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    column-gap: var(--space-5);
    row-gap: 0;
    align-items: center;
  }
  .entry .afv-textbild > .wp-block-group__inner-container > * { margin: 0; }
}

/* K7: Genau vier Kacheln stehen zwei mal zwei.
   NACHTRAG N1.4, Freigabe Jens 22.09.2026. auto-fit rechnet nur mit der
   Breite und weiss nichts von der Anzahl: bei 1184px und vier Kacheln
   ergaeben sich drei Spuren und damit eine Reihe zu drei und eine zu eins.
   Die Zusatzregel erkennt ueber :has(> ... > :nth-child(4):last-child)
   genau vier Kinder und stellt zwei Spalten zu (1184 - 32) / 2 = 576,0px;
   der Kacheltext steht dann auf 528,0px, die Liste auf 505,9px =
   52,9 Zeichen. Fuenf und sechs Kacheln bleiben bei auto-fit: sechs ergeben
   zwei Reihen zu drei, fuenf eine Reihe zu drei und eine zu zwei.
   Auf den beiden Seiten kommt heute keine Gruppe mit genau vier Kacheln vor;
   die Regel steht fuer Martins Kuerzung, die eine erzeugen kann. */
@media (min-width: 60em) {
  .afv-fakten:has(> .wp-block-group__inner-container > :nth-child(4):last-child) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* ---------- Landingpages und Schnell-Check (landingpages-1007) ----------
   Freigabe Jens 07.10.2026. Zwei QR-Zielseiten mit den Vorlagen
   vorlage-landingpage-lkw.php und vorlage-landingpage-flf.php. Bestehende
   Muster tragen die Seite: .afv-titel, .afv-anmeldung (Kasten mit
   Formular), .afv-foerderung, .afv-fakten/.afv-fakt, .afv-kursaktion,
   .afv-kontakt-teaser, .afv-section. Neu sind nur:
   - .afv-lp-einstieg: Text links, Check rechts. Es gibt kein Muster mit
     einem Formularkasten neben Fliesstext; .afv-nebenkasten hebt das LETZTE
     Kind einer wp:group und passt auf Template-Markup nicht. Umbruch 60em
     wie der Bild-Text-Abschnitt; darunter steht der Check unter dem Text.
     Bei 1360px: Container 1280px, zwei Spalten zu (1280 - 48) / 2 = 616px.
   - .afv-screener-*: Antwortknoepfe und Fortschritt des Checks.
   - .afv-lp-frage: Fragen als <details>, wie die Navigation ohne Skript.
   - .afv-cookie-einstellungen: Knopf im Fuss, sieht aus wie die Links dort.
   Kontraste: --anthrazit auf --white 13,28:1; Rahmen der Antwortknoepfe
   --gray-text auf --white 6,36:1 (Bedienelement, Soll 3:1);
   --gray-text auf --gray-bg 5,87:1; --sydney-700 auf --gray-bg 4,70:1;
   --sydney-200 auf --anthrazit (Fusslink) 8,42:1 laut Fussnote oben fuer
   den Kontrast --anthrazit/--sydney-200. Keine Animation, kein Uebergang. */
.afv-lp-einstieg { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-5); }
.afv-lp-einstieg .afv-anmeldung { margin-top: 0; }
.afv-lp-einstieg-text > * { max-width: 66ch; }
.afv-lp-vorspann { font-size: 1.25rem; line-height: 1.55; }
@media (min-width: 60em) {
  .afv-lp-einstieg { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; }
}
.afv-lp-abschnitt > * { max-width: 66ch; }
.afv-lp-abschnitt > .afv-fakten { max-width: none; }
.afv-lp-schritte li { margin-bottom: var(--space-1); }
.afv-lp-kontakt { margin-top: var(--space-5); }
.afv-lp-kontakt > h2 { margin-top: 0; }

.afv-lp-frage { border-top: 1px solid var(--gray-line); }
.afv-lp-frage:last-child { border-bottom: 1px solid var(--gray-line); }
.afv-lp-frage > summary {
  cursor: pointer; font-weight: 700; padding: var(--space-2) 0;
  min-height: 2.75rem;
}
.afv-lp-frage > p { margin: 0 0 var(--space-2); }

.afv-screener [hidden] { display: none !important; }
.afv-screener-stand { font-size: 0.9375rem; color: var(--gray-text); margin: 0 0 var(--space-1); }
.afv-screener-fragetext { font-size: 1.25rem; line-height: 1.4; font-weight: 700; margin: 0 0 var(--space-1); }
.afv-screener-fragetext:focus { outline: none; }
.afv-screener-fragetext:focus-visible { outline: 3px solid var(--sydney-700); outline-offset: 2px; box-shadow: none; }
.afv-screener-hilfe { font-size: 0.9375rem; color: var(--gray-text); }
.afv-screener-optionen { display: grid; gap: var(--space-1); margin: 0 0 var(--space-2); }
.afv-screener-option {
  display: block; width: 100%; min-height: 2.75rem; text-align: left;
  font: inherit; font-weight: 500; color: var(--anthrazit);
  background: var(--white); border: 2px solid var(--gray-text);
  border-radius: var(--r-md); padding: var(--space-1) var(--space-2); cursor: pointer;
}
.afv-screener-option:hover { border-color: var(--sydney-700); }
/* Die gewaehlte Antwort (nach "Eine Frage zurueck") ist nicht nur an der
   Farbe zu erkennen: Haken davor, aria-pressed fuer Screenreader. */
.afv-screener-option[aria-pressed="true"] { border-color: var(--sydney-700); background: var(--sydney-50); }
.afv-screener-option[aria-pressed="true"]::before { content: "\2713\00a0"; color: var(--sydney-700); font-weight: 700; }
.afv-screener-zurueck {
  background: none; border: 0; padding: var(--space-1) 0; min-height: 1.5rem;
  font: inherit; font-size: 0.9375rem; color: var(--sydney-700);
  text-decoration: underline; cursor: pointer;
}
.afv-screener-titel { margin-top: 0; }
.afv-screener-titel:focus { outline: none; }
.afv-screener-titel:focus-visible { outline: 3px solid var(--sydney-700); outline-offset: 2px; box-shadow: none; }
.afv-screener-hinweis {
  background: var(--white); border-left: 4px solid var(--sydney-700);
  border-radius: 0 var(--r-sm) var(--r-sm) 0; padding: var(--space-2);
}

.afv-cookie-einstellungen {
  background: none; border: 0; padding: 0; margin: 0; cursor: pointer;
  font: inherit; color: var(--sydney-200); text-decoration: underline;
}