/* Zeichenfabrik -- gemeinsame Basis (Header/Footer/Buttons/Dialoge) für alle Website-Seiten.
   Design-Tokens aus dem Claude-Design-Prototyp extrahiert (siehe Plan „Website-Integration —
   Startseite").

   Die Schrift-Deklarationen stehen NICHT hier, sondern in schriften.css -- sie werden auch vom
   Handbuch und von der Verwaltung gebraucht. Diese Datei setzt die Schriften also voraus; das
   Template lädt schriften.css davor. */

/* Die Rolle steht neben jeder Farbe — die Stilseite der Verwaltung (/dashboard/stil/) liest sie
   von hier (Werkbank 285). Wer eine Farbe dazunimmt, schreibt ihre Rolle dazu. */
:root {
  --farbe-creme: #FAF9F6;          /* Seitengrund (heißt „Creme“, nicht „Ecru“) */
  --farbe-tinte: #1A1815;          /* Text, Wortmarke */
  --farbe-teal: #37656C;           /* Primärfarbe: Knöpfe, Links, Akzente */
  --farbe-teal-hell: #B1CED2;      /* Technik-Etikett, Fläche des Zitatbands, Wochentag-Feld */
  --farbe-teal-flaeche: rgba(177, 206, 210, 0.35); /* gewählte Terminzeile, Fläche der Kurszeilen */
  --farbe-terrakotta: #BC6B41;     /* Knappheit („nur noch 1–3 Plätze“), Handschrift */
  --farbe-terrakotta-dunkel: #A9592F; /* Handschrift auf Hellteal („Gewusst?“): 3,0 : 1 statt 2,4 : 1 — Mittelton, Inhaber 23.10.2026 (#9A4F2B mit 3,6 : 1 war ihm zu dunkel).
                                         Seit Werkbank 412 auch jede Terrakotta-SCHRIFT auf hellem Grund (4,8 : 1 auf Creme) */
  --farbe-terrakotta-auf-dunkel: #BE7048; /* Terrakotta-Schrift auf dem Fußgrund: 4,51 : 1 (Werkbank 412) */
  --farbe-footer: #211C14;         /* Fußbereich: Grund */
  --farbe-footer-punkt: #5C4A34;   /* Fußbereich: Trennpunkte */
  --farbe-footer-text: #B7AF9F;    /* Fußbereich: Text */
  --farbe-footer-label: #8B8470;   /* Fußbereich: Rubriken — 4,54 : 1 auf dem Fußgrund (bis 23.10.2026 #8A836F, 4,48; Werkbank 412) */
  --farbe-rand: #E4E0D8;           /* Linien, Kartenrahmen */
  --trenner: 1px solid var(--farbe-rand); /* die Linie zwischen zwei Bändern (Karte 634) */
  --farbe-muted: #736D63;          /* leise Schrift, Kicker — ≥ 4,5 : 1 auf Creme, Kasten und Weiß (bis 23.10.2026 #7C766B mit 4,28 : 1, dazu ein
                                      zweites Grau #8A8377 als Zahl in elf Stilblättern; Werkbank 412) */

  --schrift-haupt: "Hanken Grotesk", system-ui, sans-serif;   /* Haupt: Text und Überschriften */
  --schrift-mono: "JetBrains Mono", ui-monospace, monospace;   /* Mono: Kicker, Daten, Etiketten */
  --schrift-hand: "Caveat", cursive;                           /* Hand: sparsam */

  /* Höhe des klebenden Kopfs samt Unterkante (Werkbank 288: 72 px + 1 px). EINE Zahl für alles,
     was unter dem Kopf klebt oder dorthin springt (Kursübersicht-Filter, FAQ-Themen, seit 06.11.2026
     auch „Dein Termin“ der Kursseite, die bis dahin 78 px fest trug) — bis 07.10.2026 stand „61px“
     fest an zwei Stellen. Wächter: `config.tests.SprungzielUnterDemKopfTests`. */
  --kopf-hoehe: 73px;
}

* { box-sizing: border-box; }

/* ---- Sprungziele unter dem klebenden Kopf (Tester F1, Karte 576, 06.11.2026) ----
   EINE Regel für jede Sprungmarke der Website: Inhaltsverzeichnis der Kursseite, FAQ, Rechtstexte, Dozent*innen,
   Monate der Kursübersicht, Teamevents. Bis dahin stand der Abstand sechsmal einzeln je Seite (mit 70, 90, 96 px
   und zweimal `--kopf-hoehe`), und die Kursseite hatte keinen: Ihre Abschnitte verschwanden unter dem Kopf.
   `scroll-padding` am Dokument gilt für Anker, `scrollIntoView` und den Tastaturfokus gleich. Wer UNTER dem Kopf
   noch etwas Klebendes hat (der Filterkasten der Kursübersicht), gibt nur DIESEN Teil als `scroll-margin-top` dazu,
   nie den Kopf noch einmal. Wächter: `config.tests.SprungzielUnterDemKopfTests`. */
html { scroll-padding-top: calc(var(--kopf-hoehe) + 16px); }

/* ---- Der Fokus in Hausfarbe (Feinjustierung 07.10.2026, Bilder 2, 3, 6) ----
   EINE Regel für jedes bedienbare Element der Website. Bis dahin hatten nur einzelne Kacheln
   (Werk, Impression, Termin) einen Petrol-Umriss; alles andere zeigte den blauen Rahmen des
   Browsers — am auffälligsten am Schließen-„ד des Buchungsfensters und am Logo im Menü, die
   der gemeinsame Überlagerungs-Rahmen (modalrahmen.js) beim Öffnen fokussiert.
   `:focus-visible`, nicht `:focus`: Der Browser zeigt den Umriss nur, wo er der Bedienung hilft
   (Tastatur, Fokus per Programm nach einer Tastatur-Eingabe) — ein Mausklick lässt ihn weg.
   Die Tastaturbedienung bleibt also, wie sie war, nur in Petrol statt Blau. */
:focus-visible { outline: 2px solid var(--farbe-teal); outline-offset: 2px; }
/* Ein Behälter, der nur per Programm den Fokus bekommt (`tabindex="-1"`, etwa das Fenster
   selbst, wenn es nichts Bedienbares enthält), trägt keinen Rahmen ums Ganze. */
[tabindex="-1"]:focus-visible { outline: none; }
/* Auf dem dunklen Grund der Fußzeile trägt Petrol nicht — dort das helle Petrol. */
.fusszeile :focus-visible { outline-color: var(--farbe-teal-hell); }
/* Jede andere dunkle Fläche trägt .grund-dunkel und bekommt denselben hellen Umriss (Werkbank 375). */
.grund-dunkel :focus-visible { outline-color: var(--farbe-teal-hell); }

/* ---- Bot-Schutz (Item 16) ---- */
/* Honeypot: für Menschen unsichtbar (weit außerhalb des Bildschirms), aber für Bots im DOM. */
.bot-honeypot { position: absolute; left: -9999px; top: -9999px; width: 1px; height: 1px; overflow: hidden; }
/* ALTCHA-Widget an das Formular-Layout anpassen (etwas Abstand nach oben). Die Breite setzt das
   Widget selbst über seine Variable `--altcha-max-width` (Vorgabe 260px); ein `max-width` von
   außen kommt nicht an. 320px trägt „Sicherheitsprüfung läuft …" und „… erledigt" in einer Zeile,
   am Telefon nimmt das Kästchen die Spalte (Sammelauftrag C, 11.11.2026). */
altcha-widget { display: block; margin: 4px 0 18px; --altcha-max-width: 320px; --altcha-border-width: 1px; }
body {
  margin: 0;
  background: var(--farbe-creme);
  color: var(--farbe-tinte);
  font-family: var(--schrift-haupt);
  line-height: 1.5;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
main { flex: 1 0 auto; }
h1, h2, h3 { font-family: var(--schrift-haupt); font-weight: 800; line-height: 1.1; margin: 0 0 0.5em; }
h1 { font-size: 38px; }
h2 { font-size: 25px; }
h3 { font-size: 20px; }
/* Eine Überschrift nur für die Vorlesehilfe (Befund 92, 06.10.2026): Listen von Karten (Kurse,
   Teamevent-Werte) standen direkt unter der h1, ihre Karten tragen h3 — ein Bildschirmleser fand
   die Ebene dazwischen nicht. Die Liste bekommt eine h2, die man nicht sieht. */
.nur-vorlesen {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
p { margin: 0 0 1em; }
a { color: inherit; }
/* TEXTLINKS — EINE Regel für die ganze Website (Inhaber 16.10.2026, Werkbank 360): der Text bleibt
   in seiner Farbe, eine zarte Linie in Hellpetrol zeigt den Link, beim Darüberfahren wird sie
   Petrol. Gilt für jeden Link ohne eigene Klasse (Fließtexte, Dozent*in auf der Kursseite, Profile,
   Rechtstexte, Blog) und für `a.textlink` (ein Link mit eigener Klasse, der wie ein Textlink
   aussehen soll). ⚠️ Die Linie selbst schaltet die Regel NICHT ein: Wo ein Baustein den
   Unterstrich abschaltet (Knopf, Karte, Menü, Fußzeile, Weg mit Pfeil), bleibt er aus. Keine
   eigenen Linkfarben in Inhaltsbereichen — Wächter `website.tests.EineLinkregelTests`. */
a:not([class]), a.textlink {
  text-decoration-color: var(--farbe-teal-hell); text-decoration-thickness: 1px;
  text-underline-offset: 4px; transition: text-decoration-color .15s ease;
}
a.textlink { text-decoration-line: underline; }
a:not([class]):hover, a.textlink:hover { text-decoration-color: var(--farbe-teal); }
img { max-width: 100%; display: block; }

.kicker {
  font-family: var(--schrift-mono);
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--farbe-muted);
  margin-bottom: 12px;  /* vor Fließtext fest 12 px; vor einer Überschrift 0 (unten, Karte 634) */
}
.kicker--zentriert { text-align: center; }
/* Auf hellen Farbflächen (Zitatband, „Mitmachen“, Teamevent-Anfrage): der Kicker im Schriftton
   der Fläche statt im leisen Grau. EINE Stelle seit Werkbank 407 (vorher je Seite). */
.kicker--dunkel { color: #22403F; }
/* Auf der dunklen Wand (Werkwand der Startseite, Werkbank 409): die leise Schrift des Fußbereichs. */
.kicker--auf-dunkel { color: var(--farbe-footer-label); }
/* Der Abschnittskopf einer Seite (Kursseite, Dozent*innen, FAQ, Verträge) und eines Formulars
   (Kontakt, Kursberatung, Kurs vorschlagen, Startangaben). Bis Karte 571 in kursdetail.css: Kontakt
   und Kursberatung laden die nicht, dort stand „Nachricht senden“ 16 px in Tinte; dazu das alte
   Grau #7C766B statt des Tokens. */
.detail-label {
  font-family: var(--schrift-mono);
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--farbe-muted);
  margin: 0 0 12px;
}
/* ---- Kicker über der Überschrift (Karte 634, Inhaber 13.11.2026) ----
   Kicker und Überschrift sind EIN Paar. Der Abstand gehört der Überschrift: 0.25em IHRER Schriftgröße. Damit wächst er
   mit der Stufe (h1 rund 13–16 px, h2 rund 8 px, h3 5–8 px) und schrumpft am Telefon mit, ohne zweite Regel. Der
   Kicker hat davor keinen Abstand. Steht ein Kicker vor Fließtext oder einer Liste (ein Etikett, kein Titel), liegt
   er fest 12 px darüber (`margin-bottom` von `.kicker`, `.detail-label`, `.abschnitt-kicker`).
   Bis dahin neun Abstände von 6 bis 24 px aus rund 20 Regeln, gegen die Hierarchie: Die h1 hatte fast überall den
   kleinsten (8 px), zwei h2 den größten (24 px). `main` davor, damit eine Ortsregel wie `.lehrgang-sektion h2
   { margin: 0 0 22px; }` den Abstand nicht wegnimmt; ein Ort setzt weder den Abstand unter dem Kicker noch über der
   Überschrift (Wächter `website.tests.EinKickerAbstandTests`). */
main :is(.kicker, .detail-label, .abschnitt-kicker):has(+ :is(h1, h2, h3)) { margin-bottom: 0; }
main :is(.kicker, .detail-label, .abschnitt-kicker) + :is(h1, h2, h3) { margin-top: 0.25em; }
.zentriert { text-align: center; }
/* Der Kapitelkopf (`website/_kapitelkopf.html`, Karte 585, Inhaber 07.11.2026): feine Linie, Nummer des
   Inhaltsverzeichnisses (`.menue-nr`), Name als h2. Der Ort gibt nur den Abstand zum nächsten Kapitel. */
.kapitelkopf {
  display: flex; align-items: baseline; gap: 18px;
  border-top: 1px solid var(--farbe-rand); padding-top: 26px; margin: 0 0 22px;
}
/* Der erste Kopf trennt von nichts (Inhaber 07.11.2026): keine Linie, kein Polster darüber. */
.kapitelkopf--erster { border-top: 0; padding-top: 0; }
.kapitelkopf h2 { margin: 0; font-size: 28px; font-weight: 800; letter-spacing: -0.01em; line-height: 1.2; }
@media (max-width: 767px) { .kapitelkopf h2 { font-size: 24px; } }

/* ---- Trennlinie zwischen Bändern (Karte 634, Inhaber 13.11.2026) ----
   EINE Regel für jede öffentliche Seite. Ein Band ist ein `<section>` direkt im Inhaltsblock (`main`). Zwischen
   zwei Bändern steht GENAU EINE Linie, gezogen vom unteren Band an seiner Oberkante. Das erste Band trägt keine (die
   Kopfzeile trennt schon), das letzte keine unten (die Tuschekante des Fußes schließt die Seite). Ein Band, das selbst
   trennt, trägt in der Vorlage `.band-trennt-selbst`: eine Fläche mit eigener Farbe (dunkel, beige, petrol) oder eine
   Leiste mit eigenen Linien (Eckdaten, Logos). An ihm zieht die Regel keine Linie, weder davor noch danach.
   Bis 13.11.2026 zog jedes Band seine Linie selbst, rund 30 Regeln in 13 Stilblättern; unter dem Kopf der
   Formularseiten und der FAQ standen dadurch zwei Linien (der „dicke Trenner“), auf sechs Seiten eine vor dem Fuß.
   Kein anderes Stilblatt gibt einem Band eine Linie: Wächter `config.tests.NurDieQuelleGestaltetTests`
   (`test_der_trenner_steht_nur_in_der_quelle`, `test_ein_band_mit_flaeche_trennt_selbst`). */
main > section:not(.band-trennt-selbst) + section:not(.band-trennt-selbst) { border-top: var(--trenner); }
/* Auch eine Leiste mit eigenen Linien endet als letztes Band ohne Linie vor dem Fuß. */
main > section:last-of-type { border-bottom-width: 0; }

/* ---- Buttons ---- */
.btn {
  display: inline-block;
  font-family: var(--schrift-haupt);
  font-weight: 600;
  font-size: 16px;
  text-align: center;
  text-decoration: none;
  padding: 14px 24px;
  border-radius: 2px;
  border: 1px solid transparent;
  cursor: pointer;
  transition: filter 0.15s ease;
}
.btn-primary { background: var(--farbe-teal); color: #fff; }
.btn-sekundaer { background: transparent; color: var(--farbe-tinte); border-color: var(--farbe-teal); }
/* Auf dunklem Grund (Anfrage-Block der Teamevent-Format-Seite, Werkbank 375): hell statt Petrol. */
.btn-hell { background: var(--farbe-teal-hell); color: var(--farbe-tinte); }
.btn-klein { padding: 8px 16px; font-size: 14px; }
.btn-block { display: block; width: 100%; margin-top: 16px; }
.btn:not([disabled]):hover { filter: brightness(1.12); }
/* Der stille Knopf der Website: ein Absenden, das wie ein leiser Textlink aussieht („Entfernen“ im
   Gutscheinkauf, „Neu beginnen“ beim Kursvorschlag). Steht allein, nie mit `.btn`. Bis Karte 565,
   E8 (N7) hieß er `.gutschein-entfernen` und stand zweimal da, in buchung.css und gutschein.css. */
.btn-still {
  border: 0; background: none; padding: 0; cursor: pointer;
  font: inherit; font-size: 13px; letter-spacing: 0;
  color: var(--farbe-muted); text-decoration: underline;
}
.btn-still:hover { color: var(--farbe-terrakotta); }
.btn[disabled] { cursor: default; opacity: 0.92; }

.breadcrumb {
  padding: 16px 24px;
  border-bottom: 1px solid #EFECE5;
  font-family: var(--schrift-mono);
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--farbe-muted);
}
.breadcrumb a { text-decoration: none; color: var(--farbe-muted); }
.breadcrumb-trenner { margin: 0 8px; }
.breadcrumb-aktuell { color: var(--farbe-teal); }
@media (min-width: 1024px) { .breadcrumb { padding: 16px 56px; } }
/* Der Baustein „Brotkrume“ (`website/_brotkrume.html`, Karte 576, E2). Am Telefon steht nur der Weg
   zurück, „← Kurse“ (der vorletzte Eintrag, `.breadcrumb-zurueck`), statt zwei Zeilen mit dem Titel,
   der gleich darunter groß steht (Inhaber 06.11.2026, K3). Die Tippfläche wächst nach oben und unten
   in das Polster, die Zeile bleibt gleich hoch. */
.breadcrumb-pfeil { display: none; }
@media (max-width: 767px) {
  .breadcrumb > :not(.breadcrumb-zurueck) { display: none; }
  .breadcrumb-zurueck { display: inline-block; padding: 12px 12px 12px 0; margin: -12px 0; }
  .breadcrumb-pfeil { display: inline; }
}

.link-pfeil {
  color: var(--farbe-teal);
  font-weight: 600;
  font-size: 14px;
  text-decoration: none;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
}
.pfeil-hand { display: inline-block; margin-left: 7px; overflow: visible; flex-shrink: 0; }

/* ---- Wochentag-Feld (EINE Quelle, Werkbank 373): der Wochentag des ersten Kurstags im hellpetrol
   Quadrat. Verwender: Terminzeile der Kursseite, Lernpfad des Lehrgangs, Kurszeilen. Bis 17.10.2026
   zweimal gebaut (46 px in kursdetail.css, 44 px in lehrgang.css). Der Text kommt aus `|wochentag`
   bzw. config.datum.wochentag_kurz. ---- */
.wochentag-feld {
  width: 46px; height: 46px; flex: 0 0 auto;
  background: var(--farbe-teal-hell); color: #22403F;
  display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 15px;
}
/* Ausgegraut: ein abgewähltes oder gesperrtes Modul im Lernpfad des Lehrgangs. */
.lernpfad-zeile--wahl.abgewaehlt .wochentag-feld,
.lernpfad-zeile--gesperrt .wochentag-feld { background: #DAD5CC; color: #8C877D; }
@media (max-width: 520px) { .wochentag-feld { width: 42px; height: 42px; font-size: 14px; } }

/* ---- Kurszeilen (Baustein website/_kurszeilen.html, Werkbank 373): kurze Liste buchbarer Termine
   auf heller Petrolfläche, ohne Bild; die ganze Zeile ist der Link. ---- */
.kurszeilen { background: var(--farbe-teal-flaeche); padding: 26px 30px 12px; }
.kurszeilen-etikett {
  margin: 0 0 6px; font-family: var(--schrift-mono); font-size: 12px; letter-spacing: .12em;
  text-transform: uppercase; color: #22403F;
}
.kurszeile { display: flex; align-items: center; gap: 18px; padding: 16px 0; min-height: 44px; text-decoration: none; color: var(--farbe-tinte); }
.kurszeile + .kurszeile { border-top: 1px solid rgba(55, 101, 108, 0.18); }
.kurszeile-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.kurszeile-titel { font-weight: 700; font-size: 17px; line-height: 1.25; }
.kurszeile-sub { font-size: 13px; color: #6B665E; }
.kurszeile-weg { flex: 0 0 auto; display: inline-flex; align-items: center; font-weight: 700; font-size: 14px; color: var(--farbe-teal); white-space: nowrap; }
.kurszeile:hover .kurszeile-titel { color: var(--farbe-teal); }
@media (max-width: 520px) {
  .kurszeilen { padding: 22px 24px 8px; }
  .kurszeile { gap: 14px; padding: 14px 0; }
  .kurszeile-titel { font-size: 16px; }
  .kurszeile-weg-text { display: none; }   /* Telefon: nur der Pfeil */
  .kurszeile-weg .pfeil-hand { margin-left: 0; }
}
/* Kursliste (Karte 507, Versuch): Spielart der Zeile ohne Petrolfläche, Spalten statt einer Reihe.
   Die Lage des Platz-Etiketts ist Nachbarschaft; seine Größe kommt aus der Quelle (.karte-plaetze-knapp).
   relative statt static: Der Klebestreifen braucht ein positioniertes Blatt. */
.kurszeile--liste, .kurszeile--liste + .kurszeile--liste { border-top: 0; border-bottom: 1px solid var(--farbe-rand); }
.kurszeile--liste {
  display: grid; align-items: center; gap: 4px 18px;
  grid-template-columns: 46px minmax(0, 1fr) 180px 190px 72px auto;
}
.kurszeile-termin, .kurszeile-umfang { font-size: 13px; color: #6B665E; }
.kurszeile-umfang { display: block; }
.kurszeile-preis { font-weight: 700; text-align: right; white-space: nowrap; }
.kurszeile-hinweis { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
.kurszeile-hinweis .karte-warteliste, .kurszeile-hinweis .karte-plaetze { position: relative; top: auto; right: auto; white-space: nowrap; }
/* Unter 900 px bliebe dem Titel in sechs Spalten zu wenig (gemessen: 138 px bei 800 px Breite). */
@media (max-width: 900px) {
  .kurszeile--liste {
    column-gap: 6px;   /* Datum und Preis stehen wie ein Satz nebeneinander; die erste Spalte trägt den Rest des Abstands */
    grid-template-columns: 54px auto minmax(0, 1fr) auto;
    grid-template-areas: "tag text text weg" "tag termin preis weg" "tag hinweis hinweis weg";
  }
  .kurszeile--liste .wochentag-feld { grid-area: tag; align-self: start; }
  .kurszeile--liste .kurszeile-text { grid-area: text; }
  .kurszeile--liste .kurszeile-termin { grid-area: termin; }
  .kurszeile--liste .kurszeile-preis { grid-area: preis; font-weight: 400; font-size: 13px; color: #6B665E; text-align: left; }
  /* Nur vor einem Preis: Ohne ihn (kein Einstieg, Karte 552) hinge der Punkt in der Luft. */
  .kurszeile--liste .kurszeile-preis:not(:empty)::before { content: "· "; }
  .kurszeile--liste .kurszeile-termin { white-space: nowrap; }
  .kurszeile--liste .kurszeile-hinweis { grid-area: hinweis; }
  .kurszeile--liste .kurszeile-hinweis .karte-plaetze { margin-top: 8px; }   /* der Streifen ragt nach oben */
  .kurszeile--liste .kurszeile-weg { grid-area: weg; margin-left: 8px; }
  .kurszeile-umfang { display: none; }
}

/* ---- Kopfzeile ---- */
.kopfzeile {
  position: sticky;
  top: 0;
  z-index: 20;
  background: rgba(250, 249, 246, 0.9);
  backdrop-filter: blur(6px);
  border-bottom: 1px solid var(--farbe-rand);
}
.kopfzeile-inner {
  /* Feste Höhe (Spezifikation Logo 2026, Abschnitt 7): Die Scroll-Animation bewegt nur Lage,
     Größe und Deckkraft — der Kopf selbst wächst und schrumpft NIE. Scrollen gilt für Google
     nicht als Eingabe; jede Verschiebung dabei zählte voll in den CLS. */
  height: 72px;
  padding: 0 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.logo-link { display: block; color: var(--farbe-tinte); line-height: 0; }

/* Die Marke (Wortmarke, Punkte, Scroll-Animation) steht in marke/static/marke/marke.css und
   kommt über {% marke_stil %} in den Kopf — dieselbe Quelle wie in der Verwaltung. */
.kopf-aktionen { display: flex; align-items: center; gap: 14px; }
.btn-suche {
  background: none;
  border: 1px solid #D8D3C9;
  padding: 8px 12px;
  font-family: var(--schrift-mono);
  font-size: 12px;
  color: #6B665E;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
  transition: filter 0.15s ease;
}
.btn-suche:hover { filter: brightness(1.12); }
/* MENÜ-Button (Guide: Mono-Label + Hamburger, 1px Rand) -- auf Desktop UND Mobil sichtbar,
   die Inline-Navigation im Header ist zugunsten des Fullscreen-Overlays entfallen. */
.btn-menu {
  background: none;
  border: 1px solid var(--farbe-rand);
  padding: 8px 12px;
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--schrift-mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--farbe-tinte);
  cursor: pointer;
  transition: filter 0.15s ease;
}
.btn-menu:hover { filter: brightness(1.12); }
.kopf-cta { display: none; padding: 9px 18px; font-size: 14px; }
.icon { width: 18px; height: 18px; flex-shrink: 0; }
.btn-suche .icon { width: 14px; height: 14px; }
.btn-menu .icon { width: 16px; height: 16px; }
@media (min-width: 1024px) {
  .kopf-cta { display: inline-block; }
  .kopfzeile-inner { padding: 0 40px; }
}
/* Schmale Viewports (Guide): Button-Labels „Menü"/„Suche" ausblenden, Icons bleiben. */
@media (max-width: 639px) {
  /* ⚠️ NUR OPTISCH (Werkbank 412): display:none nahm Suche und Menü am Telefon auch den Namen für
     Vorlesehilfen — PageSpeed: „Buttons haben keinen zugänglichen Namen“. Dieselben Regeln wie .nur-vorlesen. */
  .btn-menu-label, .btn-suche span {
    position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden;
    clip: rect(0 0 0 0); white-space: nowrap; border: 0;
  }
}

/* ---- Fullscreen-Menü (Lehrgang-Guide, Abschnitt 1) ----
   Ohne JS öffnet der Anker #menue das Overlay (:target); menue.js nutzt stattdessen .offen.
   z-index unterhalb des Such-Overlays (900), damit die Suche AUS dem Menü heraus aufgeht. */
.menue-overlay {
  display: none;
  position: fixed;
  inset: 0;
  /* 850: ÜBER dem Cookie-Hinweis (800), unter der Suche (900) — sonst verdeckte der Hinweis
     beim ersten Besuch „Gutschein kaufen" im Menüfuß (Befund 133, 06.10.2026). */
  z-index: 850;
  background: var(--farbe-creme);
  flex-direction: column;
  overflow-y: auto;
}
.menue-overlay:target, .menue-overlay.offen { display: flex; animation: zfMenueEin 0.22s ease; }
body.menue-offen { overflow: hidden; }
@keyframes zfMenueEin {
  0% { opacity: 0; }
  100% { opacity: 1; }
}
.menue-kopf {
  display: flex;
  align-items: center;
  justify-content: space-between;
  /* Gleich hoch wie der Kopf der Seite, damit das Menü an derselben Stelle aufgeht. */
  height: 72px;
  padding: 0 24px;
  border-bottom: 1px solid var(--farbe-rand);
  flex-shrink: 0;
}
.menue-schliessen-x { font-size: 18px; line-height: 1; }
.menue-schliessen:hover { color: var(--farbe-terrakotta); filter: none; border-color: var(--farbe-terrakotta); }
.menue-liste {
  display: flex;
  flex-direction: column;
  justify-content: center;
  flex-grow: 1;
  padding: 40px 24px;
  gap: 6px;
}
.menue-liste a {
  display: flex;
  align-items: baseline;
  gap: 18px;
  text-decoration: none;
  font-size: clamp(30px, 5.2vw, 56px);
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--farbe-tinte);
}
.menue-liste a:hover { color: var(--farbe-terrakotta); }
.menue-liste a.aktiv { color: var(--farbe-teal); }
.menue-nr {
  font-family: var(--schrift-mono);
  font-size: 13px;
  font-weight: 400;
  letter-spacing: 0.08em;
  color: var(--farbe-muted);
}
.menue-fuss {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  padding: 22px 24px 28px;
  border-top: 1px solid var(--farbe-rand);
  flex-shrink: 0;
}
.menue-fuss-meta {
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
  font-family: var(--schrift-mono);
  font-size: 12px;
  letter-spacing: 0.06em;
  color: #6B665E;
}
.menue-fuss-meta a { color: var(--farbe-teal); text-decoration: none; }
.menue-hand { font-family: var(--schrift-hand); font-size: 24px; color: var(--farbe-terrakotta); }
@media (min-width: 1024px) {
  .menue-kopf { padding: 0 40px; }
  .menue-liste { padding: 48px 56px; }
  .menue-fuss { padding: 24px 56px 32px; }
}
/* Der Baustein „Nummerierte Liste“ (`website/_menue_liste.html`, Nummern aus
   `website.nummerierte_liste`): das Menü oben, die Spielart „klein“ als Inhaltsverzeichnis in einer
   Seite (Kursseite, Karte 576, E1). Dieselbe Nummer, dieselbe Folge, derselbe Hover; nur kleiner
   und ohne die Fläche des Menüs: 18 px fett (Telefon 17), Tippfläche rund 38 px. Keine Punktlinie
   (das Menü hat keine). `.menue-zusatz`: die eine Angabe nach „·“, leise. Steht nach der
   1024-px-Stufe des Menüs, damit sie dort nicht dessen Polster bekommt. */
.menue-liste--klein { flex-grow: 0; justify-content: flex-start; padding: 0; gap: 0; }
.menue-liste--klein a {
  font-size: 17px;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: 0;
  padding: 8px 0;
}
@media (min-width: 600px) { .menue-liste--klein a { font-size: 18px; } }
.menue-zusatz { font-weight: 400; color: var(--farbe-muted); }

/* ---- Suchpanel (Header) -- fixiertes, oben angedocktes Panel + Backdrop, kein zentriertes
   Modal (exakt wie im Design-Prototyp: eine Art "Spotlight"-Suche, keine <dialog>-Zentrierung,
   daher als einfaches Overlay per hidden-Attribut, gleiches Muster wie das mobile Menü). ---- */
.such-overlay[hidden] { display: none; }
.such-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(20, 18, 15, 0.5);
  z-index: 900;
}
.such-panel {
  position: fixed;
  top: 0; left: 0; right: 0;
  background: var(--farbe-creme);
  z-index: 901;
  box-shadow: 0 20px 50px -20px rgba(0, 0, 0, 0.4);
  max-height: 80vh;
  display: flex;
  flex-direction: column;
}
.such-panel-kopf { max-width: 900px; width: 100%; margin: 0 auto; padding: 28px 24px 8px; }
.such-eingabe-zeile {
  display: flex;
  align-items: center;
  gap: 14px;
  border-bottom: 2px solid var(--farbe-tinte);
  padding-bottom: 12px;
}
.such-eingabe-feld {
  flex: 1;
  min-width: 0;
  border: none;
  outline: none;
  background: none;
  font-family: var(--schrift-haupt);
  font-size: 20px;
  font-weight: 600;
  color: var(--farbe-tinte);
}
.such-schliessen { background: none; border: none; font-size: 26px; line-height: 1; cursor: pointer; color: #6B665E; transition: color 0.15s ease; }
.such-schliessen:hover { color: var(--farbe-tinte); }
.such-panel-liste { overflow-y: auto; max-width: 900px; width: 100%; margin: 0 auto; padding: 0 24px 28px; }
@media (min-width: 700px) {
  .such-panel-kopf, .such-panel-liste { padding-left: 32px; padding-right: 32px; }
  .such-eingabe-feld { font-size: 24px; }
}

.such-ergebnisse { margin-top: 0; }
.such-anzahl { font-family: var(--schrift-mono); font-size: 12px; letter-spacing: 0.05em; color: var(--farbe-muted); padding: 12px 0 4px; margin: 0; }
.such-keine { color: var(--farbe-muted); font-size: 14px; margin: 12px 0 0; }
.such-liste { list-style: none; margin: 0; padding: 0; }
.such-treffer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  text-decoration: none;
  padding: 16px 4px;
  border-bottom: 1px solid var(--farbe-rand);
}
.such-treffer:hover { background: #F1EEE8; }
.such-info { display: flex; flex-direction: column; gap: 2px; }
.such-titel { font-weight: 700; font-size: 17px; color: var(--farbe-tinte); }
.such-meta { font-size: 13px; color: #6B665E; }
.such-preis { font-weight: 700; font-size: 15px; color: var(--farbe-teal); white-space: nowrap; }

/* ---- Besuchermeldung -- site-weites Popup (Kanäle), analog zu .such-overlay/.buchung-overlay
   aufgebaut, aber mit höherem z-index, da es über allem anderen liegen soll. Gestaltung 1:1 aus
   der Design-Vorlage (Karte #FAF9F6, 5px-Akzentbalken links, Mono-Eyebrow, optionaler Button).
   Die Akzentfarbe kommt je Panel aus --bm-akzent (siehe Akzent-Klassen unten). ---- */
@keyframes bmBackdrop { from { opacity: 0; } to { opacity: 1; } }
@keyframes bmPop {
  from { opacity: 0; transform: translate(-50%, calc(-50% + 14px)) scale(.98); }
  to   { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}
.besuchermeldung-overlay[hidden] { display: none; }
.besuchermeldung-backdrop {
  position: fixed; inset: 0; background: rgba(20, 18, 15, 0.42); z-index: 950;
  animation: bmBackdrop 0.2s ease;
}
.besuchermeldung-panel {
  position: fixed;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 520px; max-width: calc(100vw - 40px);
  background: #FAF9F6;
  box-shadow: 0 40px 90px -32px rgba(20, 18, 15, 0.55);
  overflow: hidden;
  z-index: 951;
  animation: bmPop 0.26s cubic-bezier(.2, .8, .2, 1);
}
.besuchermeldung-panel[hidden] { display: none; }
.besuchermeldung-akzentbalken {
  position: absolute; left: 0; top: 0; bottom: 0; width: 5px; background: var(--bm-akzent);
}
.besuchermeldung-schliessen {
  position: absolute;
  top: 16px; right: 16px;
  width: 34px; height: 34px;
  display: flex; align-items: center; justify-content: center;
  background: none;
  border: 1px solid var(--farbe-rand);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  color: #6B665E;
  transition: border-color 0.15s ease, color 0.15s ease;
}
.besuchermeldung-schliessen:hover { border-color: var(--farbe-tinte); color: var(--farbe-tinte); }
.besuchermeldung-pad { padding: 30px 34px 32px; max-height: 85vh; overflow-y: auto; }
.besuchermeldung-eyebrow {
  display: flex; align-items: center; gap: 9px; margin: 0 0 14px;
  font-family: var(--schrift-mono); font-size: 11px; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--bm-akzent);
}
.besuchermeldung-punkt { width: 8px; height: 8px; background: var(--bm-akzent); flex: 0 0 auto; }
.besuchermeldung-titel {
  margin: 0; font-size: 28px; font-weight: 800; color: #1A1815;
  line-height: 1.1; letter-spacing: -0.01em; max-width: 15ch;
}
.besuchermeldung-text { margin: 14px 0 0; font-size: 16px; line-height: 1.6; color: #4a463f; max-width: 42ch; }
.besuchermeldung-text p:last-child { margin-bottom: 0; }
.besuchermeldung-text a {
  color: var(--bm-akzent); font-weight: 600;
  text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 2px;
}
.besuchermeldung-button-zeile { margin-top: 22px; }
.besuchermeldung-button {
  display: inline-flex; align-items: center; gap: 9px; text-decoration: none;
  background: var(--bm-akzent); color: #fff; font-weight: 600; font-size: 15px;
  padding: 12px 22px; transition: background 0.15s ease;
}
.besuchermeldung-button:hover { background: var(--bm-akzent-dunkel); }
.besuchermeldung-pfeil { font-family: var(--schrift-mono); }
.besuchermeldung-panel--petrol { --bm-akzent: #37656C; --bm-akzent-dunkel: #2B5158; }
.besuchermeldung-panel--terrakotta { --bm-akzent: #BC6B41; --bm-akzent-dunkel: #A45733; }
.besuchermeldung-panel--tief { --bm-akzent: #22403F; --bm-akzent-dunkel: #152B2A; }
@media (max-width: 560px) {
  .besuchermeldung-pad { padding: 26px 24px 28px; }
}

/* ---- Cookie-Hinweis -- schmale Info-Leiste am unteren Rand (KEIN Consent-Banner: es gibt nur
   technisch notwendige Cookies, also nichts zum Zustimmen/Ablehnen). Einmal "Verstanden" klicken
   setzt das Cookie hide-zeichenfabrik-cookie-notice (1 Jahr, cookie_hinweis.js), danach rendert
   die Leiste serverseitig gar nicht mehr (cookie_tags.py). z-index unter dem Such-Overlay (900),
   aber über dem normalen Seiteninhalt. ---- */
/* ⚠️ WAS UNTEN KLEBT, STEHT ÜBER DEM HINWEIS (Inhaber 06.10.2026, Befund 133: „Alles über die
   Quellen"). Beim ersten Besuch verdeckte der Hinweis am Telefon die Leiste mit „Jetzt buchen" auf
   jeder Kursseite und „Lehrgang buchen". Solange er steht, misst cookie_hinweis.js seine Höhe in
   `--unten-belegt`; jede klebende Fußleiste rückt um genau diesen Wert hinauf
   (`bottom: var(--unten-belegt, 0px)` — Kursseite, Lehrgang). Ohne Hinweis ist der Wert 0. */
.cookie-hinweis {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  padding: 12px 24px;
  background: var(--farbe-footer);
  color: var(--farbe-footer-text);
  border-top: 1px solid var(--farbe-footer-punkt);
}
.cookie-hinweis-text {
  margin: 0;
  font-size: 13px;
  line-height: 1.5;
}
.cookie-hinweis-text a {
  color: var(--farbe-teal-hell);
  text-decoration: underline;
}
.cookie-hinweis-schliessen {
  flex-shrink: 0;
  padding: 8px 18px;
  border: 1px solid var(--farbe-teal-hell);
  border-radius: 2px;
  background: transparent;
  color: var(--farbe-creme);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}
.cookie-hinweis-schliessen:hover {
  background: var(--farbe-teal-hell);
  color: var(--farbe-footer);
}
@media (max-width: 640px) {
  .cookie-hinweis { flex-direction: column; gap: 10px; text-align: center; padding: 14px 18px; }
}

/* ---- Fußzeile ---- */
.fusszeile { color: var(--farbe-footer-text); position: relative; z-index: 2; }
/* position/z-index (Werkbank 408): Der Fuß samt Tuschekante liegt VOR den Illustrationen — die
   Kante ist durchsichtig, also stehen die Figuren mit den Füßen in der Tusche. */
/* Die Kante „Pinselhorizont“ (15.10.2026): Höhe mitwachsend, Handy 64 px, ab 1440 px 130 px —
   nie unter 56 px, sonst zerfällt die Tusche zu Krümeln. Breite 100 %, die Datei schneidet
   rechts ab statt zu verzerren. Ihre Farbe ist fest #211C14 = --farbe-footer. */
.papierkante { display: block; width: 100%; height: clamp(64px, 9vw, 130px); margin: 0 0 -1px; pointer-events: none; }
.fusszeile-inner { background: var(--farbe-footer); padding: 32px 24px 40px; }
.fuss-reihe {
  display: flex;
  flex-wrap: wrap;
  gap: 28px 32px;
  padding-bottom: 28px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.14);
  margin-bottom: 22px;
}
.fuss-marke { flex: 1 1 260px; min-width: 220px; }
.fuss-logo { display: block; color: var(--farbe-creme); line-height: 0; margin-bottom: 16px; }
.fuss-tagline { margin: 0 0 14px; font-size: 14px; line-height: 1.6; max-width: 24em; }
.fuss-handschrift { font-family: var(--schrift-hand); color: var(--farbe-terrakotta-auf-dunkel); font-size: 22px; margin: 0; }
.fuss-label {
  font-family: var(--schrift-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--farbe-footer-label);
  /* Kopfhöhe an das größere Logo der Marken-Spalte angleichen (34px Logo + 16px Abstand), damit
     die jeweils erste Inhaltszeile -- Tagline, Adresse, „FAQ" -- über alle Spalten auf einer Linie
     liegt (keine Sprünge). Der Label-Text sitzt unten im Kopf, also nah an seinem Inhalt. */
  min-height: 34px;
  margin-bottom: 16px;
  display: flex;
  align-items: flex-end;
}
.fuss-standort { flex: 0 1 170px; min-width: 150px; }
/* Nur die Adresse, NICHT die Kicker-Zeile: früher traf ".fuss-standort p" auch die
   <p class="fuss-label">-Überschrift und blähte sie auf 14px auf, wodurch "STANDORT WIEN"
   größer wirkte als "SERVICE"/"NEWSLETTER". Die Adresse hat jetzt eine eigene Klasse. */
.fuss-standort-adresse { margin: 0; font-size: 14px; line-height: 1.6; }
.fuss-service { flex: 0 1 170px; min-width: 150px; display: flex; flex-direction: column; gap: 9px; }
/* In der Flex-Spalte kommt zwischen Label und erstem Link zusätzlich das 9px-gap dazu -- die
   Label-Untermarge entsprechend kürzen, damit „FAQ" auf derselben Linie wie Tagline/Adresse sitzt. */
.fuss-service .fuss-label { margin-bottom: 7px; }
.fuss-service a { text-decoration: none; font-size: 14px; transition: color 0.15s ease; }
.fuss-service a:hover { color: #EFE9DE; }
.fuss-newsletter { flex: 1 1 240px; min-width: 220px; }
.newsletter-form { display: flex; gap: 0; }
.newsletter-form input {
  flex: 1;
  min-width: 0;
  background: #2C261C;
  border: 1px solid #4A4234;
  color: #EFE9DE;
  padding: 10px 12px;
  font-family: var(--schrift-haupt);
  font-size: 14px;
}
.newsletter-form button {
  background: var(--farbe-teal-hell);
  color: var(--farbe-footer);
  border: none;
  font-weight: 700;
  padding: 0 16px;
  cursor: pointer;
  transition: filter 0.15s ease;
}
.newsletter-form button:hover { filter: brightness(1.12); }
.newsletter-rueckmeldung { margin: 8px 0 0; font-size: 13px; line-height: 1.4; color: var(--farbe-teal-hell); }
/* Hinweis unter dem Anmeldefeld: kleiner und ruhiger als die Rueckmeldung darunter --
   er soll lesbar sein, aber nicht mit dem Feld um Aufmerksamkeit ringen (31.07.2026). */
.newsletter-hinweis { margin: 8px 0 0; font-size: 12px; line-height: 1.5; opacity: .75; }
.newsletter-hinweis a { text-decoration: underline; }
.newsletter-rueckmeldung.ist-fehler { color: #E4A79A; }
.fuss-zeile {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 12px;
  font-size: 13px;
  color: var(--farbe-footer-label);
}
/* Umbruch zwischen, nie in den Links (Werkbank 455: „Vertrag widerrufen“ brach am Telefon in sich). */
.fuss-links { display: flex; flex-wrap: wrap; gap: 8px 20px; }
.fuss-links a { text-decoration: none; color: var(--farbe-footer-label); white-space: nowrap; }
/* „Vertrag widerrufen“ (§ 13a FAGG): nur der Farbton hebt ihn ab — #B1CED2 auf dem Fuß 10,2 : 1. */
.fuss-links a.fuss-link-widerruf { color: var(--farbe-teal-hell); }

/* ---- Der Tuschestrich unter markierten Wörtern (Werkbank 361, 16.10.2026) ----
   EINE Quelle für jede Unterstreichung der Website: `{% tusche %}` (website/templatetags/
   tusche_tags.py) gibt das Wort aus, `website/js/tusche.js` legt einen echten, gescannten
   Pinselstrich des Inhabers darunter (die Striche: marke/static/marke/tuschestriche/). Er folgt
   der Linie, die der Punkt und die Kante über der Fußzeile vorgeben.

   Die Wortgruppe bleibt beisammen (inline-block, wie die alten Linien) — keine Überschrift bricht
   anders als vorher; ist sie breiter als die Zeile, bricht sie in sich um, und tusche.js gibt
   jeder Zeile ihren eigenen Strich.

   GESTRECKT (`{% tusche … strecken=True %}`, allein der Kopf der Startseite, 07.11.2026): tusche.js
   zieht den Strich auf die volle Breite der Stelle, in der Zieldicke; die Maske unten streckt mit
   (100% 100%), hier braucht es dafür nichts Eigenes.

   Die ALTE LINIE ist der Ersatz — ohne JavaScript und unter 20 px Schrift —, an derselben Stelle
   wie das frühere SVG. Farbe = --farbe-terrakotta (#BC6B41); in einer data-URI ist keine
   CSS-Variable möglich. Solange das Skript arbeitet (`tusche-wartet` an <html>, basis.html), ist
   sie versteckt, damit nichts aufblitzt; sobald der Tuschestrich steht (`hat-tusche`), bleibt sie es. */
.tusche { position: relative; display: inline-block; }
.tusche::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -0.1em; height: 0.34em; pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 12' preserveAspectRatio='none' overflow='visible'%3E%3Cpath d='M2 6 C 25 2, 55 10, 98 5 M4 10 C 32 8, 62 12, 96 8' fill='none' stroke='%23BC6B41' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat 0 0 / 100% 100%;
}
.tusche-wartet .tusche::after, .tusche.hat-tusche::after { display: none; }

/* Die Striche liegen im umgebenden Block (h1, p, blockquote …) — hinter der Schrift. */
.tusche-traeger { position: relative; isolation: isolate; }
.tusche-strich {
  position: absolute; z-index: -1; pointer-events: none;
  background: var(--strich-farbe, var(--farbe-terrakotta));
  -webkit-mask: var(--strich) 0 0 / 100% 100% no-repeat;
          mask: var(--strich) 0 0 / 100% 100% no-repeat;
}
/* „Strich zieht sich“ (Inhaber 16.10.2026): beim ersten Sichtbarwerden in 0,7 s von links nach
   rechts — NUR am Kopf der Startseite (`{% tusche … ziehen=True %}`, tusche.js setzt dann
   `--zieht`); überall sonst steht der Strich still, sonst nutzt sich der Effekt ab. Bei
   „Bewegung reduzieren“ steht auch er sofort. */
@media (prefers-reduced-motion: no-preference) {
  .tusche-strich--zieht { clip-path: inset(0 100% 0 0); transition: clip-path 0.7s cubic-bezier(0.3, 0.6, 0.2, 1); }
  .tusche-strich--zieht.ist-gezogen { clip-path: inset(0 0 0 0); }
}

/* ---- Bildausschnitt (Werkbank 357 Blog, 377 Kurs) ----
   Wo eine Kachel oder ein Kopf ein Bild zuschneidet (object-fit: cover), sagt das Feld
   „Ausschnitt“ (config.bilder.BildAusschnitt), welcher Teil stehen bleibt. Die Lage steht NUR
   hier: Ein Verwender, der selbst eine object-position setzt, wöge schwerer als die Klasse.
   Oben = Köpfe im oberen Drittel (mittig verlor die Mona Lisa den Kopf). */
.ausschnitt--oben { object-position: 50% 25%; }
.ausschnitt--mitte { object-position: 50% 50%; }
.ausschnitt--unten { object-position: 50% 85%; }

/* ---- Bild-Platzhalter (seitenübergreifend: Kurskacheln, Hero-Bilder, Dozentenportraits) ----
   Wiederkehrendes "Bild fehlt noch"-Muster: schraffierter Hintergrund + gestrichelt umrandetes
   Mono-Label, exakt aus dem Prototyp übernommen. */
.bild-platzhalter, .kurs-karte-bild, .hero-bild-platzhalter, .detail-hero-bild,
.dozent-zeile-bild, .dozent-hero-bild, .dozent-portraet-wrap, .kontakt-karte-platzhalter,
.formattafel-bild, .teamevent-kopf-bild, .format-kopf-bild {
  background-color: rgb(241, 238, 232);
  background-image: repeating-linear-gradient(
    45deg, rgba(0, 0, 0, 0.043) 0, rgba(0, 0, 0, 0.043) 8px,
    transparent 8px, transparent 16px
  );
  display: flex;
  align-items: center;
  justify-content: center;
}
.bild-platzhalter-label {
  position: relative;
  font-family: var(--schrift-mono);
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--farbe-muted);
  background: var(--farbe-creme);
  padding: 4px 8px;
  border: 1px dashed #CFC9BD;
}

/* ---- Bildunterschrift (Baustein `website/_bildangabe.html`, seitenübergreifend) ----
   Nie Pflicht -- wird an jeder Einsatzstelle nur gerendert, wenn die zugehörige Caption gesetzt ist.
   ZWEI LAGEN, EINE QUELLE (Inhaber 07.11.2026: „Kleine Bilder vertragen keine Caption im Bild, das muss
   man zB unterhalb angeben.“):
   - IM Bild (`.bild-caption`, Vorgabe): senkrechter Text rechts im Bild im dunklen Chip, exakt aus dem
     Prototyp (Startseiten-Hero). Für GROSSE Bilder: Bildwechsel der Start- und Kursseite, Kopf von
     Lehrgang, Dozent*in, Teamevent und Mietraum (gemessen 07.11.2026: nie unter 390 px breit).
   - UNTER dem Bild (`.bild-caption--unter`): waagrecht, ohne Chip, gedeckt. Für KLEINE Bilder.
   DIE REGEL „KLEIN“: Ein Bild, das auf IRGENDEINER Breite schmaler als rund 320 px angezeigt wird, trägt
   seine Angabe darunter. Gemessen 07.11.2026 (1440 / 1100 / 768 / 390 px): Kursleitung vorgestellt
   240 / 240 / 240 / 150, Karte der Kursleitung 314 / 229 / 348 / 163, Zeile der Dozent*innen-Liste
   300 / 300 / 300 / 340. Die Angabe unter dem Bild steht AUSSERHALB des Bildbehälters (er schneidet mit
   overflow und Seitenverhältnis) und vom ersten Rendern an im HTML -- kein Layout-Sprung. Der Ort gibt nur
   Abstand (margin), nie Schrift oder Farbe. Wächter: website.tests.BildangabeLageTests. */
.bild-caption {
  position: absolute;
  top: 50%; right: 14px;
  transform: translateY(-50%) rotate(180deg);
  writing-mode: vertical-rl;
  font-family: var(--schrift-mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  /* Dezenter halbtransparenter Chip: bringt den Kontrast selbst mit, damit die Caption auf
     hellen wie dunklen Bildern lesbar bleibt (Bilder werden frei hochgeladen). */
  color: rgba(255, 255, 255, 0.95);
  background: rgba(20, 18, 15, 0.42);
  padding: 10px 4px;
  border-radius: 20px;
  pointer-events: none;
}
/* Ohne Unterschrift kein leerer Chip — auch, wenn der Bildwechsel zu einem Bild ohne Text kommt. */
.bild-caption:empty { display: none; }
/* Lage „unter“: hebt Chip, Drehung und Lage im Bild auf; Schrift (Mono, 10 px, Versalien) bleibt die des Bausteins.
   Der Abstand zum Bild gehört zum Baustein (die Angabe gehört zum Bild), der Abstand danach dem Ort. */
.bild-caption--unter {
  position: static;
  display: block;
  transform: none;
  writing-mode: horizontal-tb;
  margin-top: 8px;
  padding: 0;
  border-radius: 0;
  background: none;
  color: var(--farbe-muted);
  letter-spacing: 0.1em;
  line-height: 1.5;
}

/* ---- Bildwechsel (Baustein website/_bildwechsel.html, seit Fall 250 auf Start- UND Kursseite):
   nur das aktive Bild ist sichtbar; hero_crossfade.js wandert im Takt durch. Ohne JavaScript
   bleibt das erste (server-seitig aktive) Bild stehen. Die Überblendung nur ohne
   Bewegungs-Dämpfung -- gleiches Muster wie Reveal und Bild-Zoom. Lage und Größe gibt der
   Behälter der Seite vor (img absolut, object-fit: cover). */
.hero-crossfade { opacity: 0; }
.hero-crossfade.aktiv { opacity: 1; }
@media (prefers-reduced-motion: no-preference) {
  .hero-crossfade { transition: opacity 1.2s ease; }
}
/* Der Halteknopf im Bildwechsel: unten links im Bild, über dem Rahmen der Startseite. */
.hero-crossfade ~ .halteknopf { left: 16px; bottom: 16px; z-index: 2; }

/* ---- Seitentitel im Kopf (Karte 572 E3, 06.11.2026; Karte 576 G2): EINE Regel für die große
   Überschrift im Kopf einer Seite. Die Schrift gleitet mit der Breite, damit der Titel bei 1100 px
   nicht anders umbricht als bei 1440. Zwei Stufen:
   - Grundstufe (Kurs- und Dozent*innen-Seite, ab Karte 576): 38 px am Telefon, 50 px ab 600 px,
     ab 1024 px gleitend von 38 px (bei rund 1100) bis 50 px (bei 1440).
   - `--gross` (Startseite): so groß, dass der Anker „dich neu versuchst.“ genau in die Textspalte
     passt — 8,95 em ist seine Breite in der Hausschrift (8,85 em, `marke.tusche.breite_em`) plus
     1 % Luft; 48 px bzw. 112 px sind die Polster des Kopfs, 52,5vw die Textspalte (1,05 von 2 fr).
     Telefon bis 38 px (bei 360 px 34,9), ab 1024 px 44 bis 62 px. Wächter: website.tests
     (SatzendeTests), der die 8,95 gegen die gemessene Breite hält.
   Eine Zeile `.seitentitel-zeile` bricht nie um und steht für sich: So rutscht ein kurzes Ende nie
   in die erste Zeile, und die Überschrift ist auf jeder Breite gleich hoch (CLS 0). */
.seitentitel-kopf { font-size: 38px; }
@media (min-width: 600px) { .seitentitel-kopf { font-size: 50px; } }
@media (min-width: 1024px) { .seitentitel-kopf { font-size: clamp(38px, calc(3.38vw + 1.3px), 50px); } }
.seitentitel-kopf--gross { font-size: min(38px, calc((100vw - 48px) / 8.95)); }
@media (min-width: 600px) { .seitentitel-kopf--gross { font-size: min(62px, calc((100vw - 48px) / 8.95)); } }
@media (min-width: 1024px) { .seitentitel-kopf--gross { font-size: clamp(44px, calc((52.5vw - 112px) / 8.95), 62px); } }
.seitentitel-zeile { display: block; white-space: nowrap; }
/* Der weiche Wechsel des Satzendes (hero_crossfade.js): altes Ende samt Strich blendet in 0,4 s aus,
   das neue ein, beides innerhalb der Bildüberblendung (1,2 s); danach zieht sich der Strich neu
   (`tusche:neu`, tusche.js). Der Strich blendet über eine Animation aus, damit sein eigener
   Übergang (das Ziehen, clip-path) unberührt bleibt. Bei „Bewegung reduzieren“ wechselt nichts. */
@media (prefers-reduced-motion: no-preference) {
  .seitentitel-kopf [data-satzende-ziel] { transition: opacity 0.4s ease; }
}
.seitentitel-kopf.satzende-aus [data-satzende-ziel] { opacity: 0; }
.seitentitel-kopf.satzende-aus .tusche-strich { animation: satzende-aus 0.4s ease forwards; }
@keyframes satzende-aus { to { opacity: 0; } }

/* ---- Halteknopf (Baustein, Karte 572 E2 / Karte 476 E2, 06.11.2026): „Wechsel anhalten“ für alles,
   was von selbst weiterschaltet (WCAG 2.2.2) — Zitatband der Startseite und Bildwechsel (Startseite,
   Kursseite). Bis dahin `.zitatband-halt` nur in startseite.css. Unsichtbar bis zum Tastaturfokus;
   steht mit `hidden` im Markup, bis das Skript wirklich läuft (ohne Skript und bei „Bewegung
   reduzieren“ gibt es nichts anzuhalten). Tippfläche 44 px wie die Blätter-Knöpfe. Den Text setzt
   das Skript („Wechsel anhalten“ / „Wechsel fortsetzen“). Die LAGE gibt der Ort (left/bottom). */
.halteknopf {
  position: absolute; min-height: 44px; min-width: 44px;
  font-family: var(--schrift-mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase;
  background: var(--farbe-creme); color: #22403F; border: 1px solid #22403F; padding: 6px 12px;
  cursor: pointer; opacity: 0; pointer-events: none;
}
.halteknopf:focus-visible { opacity: 1; pointer-events: auto; }

/* ---- Kurskachel (seitenübergreifend: Startseite, Kursübersicht, „Weitere Kurse") ---- */
/* Das Kachel-Raster: EINE Stelle für jede Reihe von Kurskacheln — Startseite, Kursübersicht, „Weitere
   Kurse“, Dozent*innen-Seite, Kurs-Finder, „Ähnliche Kurse“ (Werkbank 374, Inhaber 17.10.2026). Bis
   dahin dreimal definiert, auf der Startseite mit vier Spalten: Die Kachel wurde ~290 statt 427 px
   breit, der Preishinweis brach um, „Details →“ saß schief. */
.kurs-karten { display: grid; gap: 24px; grid-template-columns: 1fr; }
@media (min-width: 768px) { .kurs-karten { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .kurs-karten { grid-template-columns: repeat(3, 1fr); } }
/* ---- Abschnitt unter dem Kopf (Baustein, Karte 633, 13.11.2026) ----
   Ein Abschnitt unter dem Kopf der Übersichtsseiten: Kicker, Überschrift, Text, darin frei Kachelreihen oder die
   Nummerierte Spalte. Verwender: Geld zurück, Gerade auf Instagram, Ähnliche Kurse (Warteliste, „Ähnliche Kurse
   wie …“, 404), Privatunterricht. Bis dahin borgten sie `.warteliste-alternativen` aus warteliste.css, den Kicker als
   `.ergebnis-anzahl` aus kursuebersicht.css bzw. `.aehnliche-kurse-kicker` (gleiche Werte) oder `.detail-label`, den
   Text als `.about-team-text` aus about.css. Der Kicker spricht wie die Hauskicker (`.kicker`, `.detail-label`): Mono
   12 px in Versalien, 0.12em (Main 13.11.2026; bis dahin als `.ergebnis-anzahl` in gemischter Schreibung, 0.05em). Wächter
   `config.tests.NurDieQuelleGestaltetTests.test_der_abschnitt_steht_nur_in_der_quelle`, `website.tests.EinAbschnittTests`. */
.abschnitt { padding: 40px 24px 64px; }
@media (min-width: 1024px) { .abschnitt { padding: 48px 56px 72px; } }
.abschnitt-kicker {
  font-family: var(--schrift-mono); font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--farbe-muted); margin: 0 0 12px;
}
.abschnitt h2 { margin: 0 0 24px; }
.abschnitt-text p { margin: 0 0 22px; font-size: 16px; line-height: 1.65; color: #37342d; max-width: 32em; }
/* Zwei Teile in einem Abschnitt (Karte 634, Inhaber 13.11.2026): Was inhaltlich zusammengehört (auf „Geld zurück“
   „Warum wir das tun“ und das Kleingedruckte „Gut zu wissen“), steht als zweites `<div>` im selben Abschnitt statt als
   eigenes Band, sonst zieht die Trennlinie zwischen Bändern eine Linie dazwischen. Der Abstand der Teile steht hier. */
.abschnitt > div + div { margin-top: 48px; }
/* Ähnliche Kurse, Spielart „spalte“ (Main 06.11.2026): IN einem Abschnitt der Kursseite, ohne eigenes Polster, die
   Überschrift so groß wie der Name unter „Wer dich anleitet“; die 30 px einer eigenen Seite überragten dort alles. */
.aehnliche-kurse--spalte h2 { font-size: 20px; margin: 0 0 18px; }

/* ---- Dank nach dem Absenden (Baustein, Karte 632, 13.11.2026: `{% danke %}`, website/_danke.html) ----
   EIN Dank für jedes Formular der Website: Haken an der Kante, Titel 24 px (eigene Seite 30 px), Text 16 px bis
   40em, höchstens ein Weg mit Pfeil. Werte vom Vorbild Kontakt. Bis dahin fünf Bauarten (`.kontakt-danke`,
   `.ga-anfrage-danke`, `.miet-anfrage-danke`, `.teamevent-danke`, Kopf der Übersichtsseiten). Der Haken ist zugleich
   der des Buchungsfensters (dort zentriert, bis Karte 632 in buchung.css). Wächter `website.tests.EinDankTests`,
   `config.tests.NurDieQuelleGestaltetTests.test_der_dank_steht_nur_in_der_quelle`. */
.bestaetigung-icon {
  width: 56px; height: 56px; border-radius: 50%;
  background: var(--farbe-teal-hell);
  display: flex; align-items: center; justify-content: center;
  font-size: 26px; color: var(--farbe-teal);
  margin: 8px auto 18px;
}
.danke { display: flex; flex-direction: column; align-items: flex-start; padding: 12px 0; }
.danke .bestaetigung-icon { margin: 8px 0 18px; }
.danke-titel { margin: 0 0 10px; font-size: 24px; font-weight: 800; line-height: 1.25; }
.danke--seite .danke-titel { font-size: 30px; }
.danke-text p { margin: 0 0 12px; max-width: 40em; font-size: 16px; line-height: 1.6; color: #4A463F; }
.danke-weg { margin-top: 12px; min-height: 44px; }
/* Die eigene Danke-Seite: nur die Lage. Folgt ihr etwas (Warteliste: ähnliche Kurse), trennt sie die Trennlinie
   zwischen Bändern (oben in dieser Datei; bis Karte 634 `.danke-seite:not(:last-child)` mit eigener Linie). */
.danke-seite { padding: 64px 24px 48px; }
@media (min-width: 1024px) { .danke-seite { padding: 84px 56px 56px; } }
/* Die Karte der Kursleitung (Baustein `_dozent_karte.html`, Werkbank 411): Startseite und „Gerade auf
   Instagram“. Bis 23.10.2026 stand sie nur in startseite.css. */
/* Am Telefon zwei nebeneinander (Karte 572, E8, Inhaber 06.11.2026): Die Karten standen einzeln
   untereinander, vier Porträts kosteten 1.270 px; nebeneinander bei 390 px je 163 px breit. NUR das Raster
   ändert sich, nie `.dozent-karte` — die Karte bleibt überall dieselbe. Verwender: Startseite, /ig. */
.dozenten-karten { display: grid; gap: 24px 16px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 768px) { .dozenten-karten { column-gap: 24px; } }
@media (min-width: 1024px) { .dozenten-karten { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.dozent-karte { text-align: left; }
/* Der Abstand Porträt → Name (12 px) steht am Namen, nicht am Porträt: So steht die Bildangabe (lage „unter“)
   8 px unter dem Bild, und ohne Angabe bleibt alles wie vorher. */
.dozent-karte h3 { font-size: 17px; margin: 12px 0 3px; }
.dozent-portraet-wrap {
  position: relative;
  display: block;
  aspect-ratio: 3 / 4;
  border: 1px solid var(--farbe-rand);
  overflow: hidden;
}
.dozent-portraet { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.dozent-schwerpunkte { color: #6B665E; font-size: 13px; margin: 0; }

/* ---- Die Werkprobe (`website/_werkprobe.html`, Karte 576 E6, Inhaber 06.11.2026, Gestalt B) ----
   Ein Werk der Kursleitung GANZ, im eigenen Format, mit feiner Linie; Titel und Werkangaben DARUNTER. Keine Fläche,
   kein Schatten, kein Klebestreifen — nie aufgeklebt („eine eigene, professionelle und überzeugende Bildsprache“).
   Antippen öffnet die Lightbox. Die Kachel der Dozent*innen-Seite (`.werk-kachel`) ist ein anderer Baustein. */
.werkprobe {
  display: flex; flex-direction: column; align-items: stretch; gap: 10px;
  width: 100%; margin: 0; padding: 0; border: 0; background: none; box-shadow: none;
  text-align: left; font: inherit; color: inherit; cursor: zoom-in;
}
/* `height: auto` gehört zu den Attributen width/height (CLS, CLAUDE.md): sonst würde das Attribut die echte Höhe. */
.werkprobe-bild { display: block; width: 100%; height: auto; border: 1px solid var(--farbe-rand); }
.werkprobe-beschriftung { display: block; }
.werkprobe-titel { display: block; font-size: 15px; font-weight: 700; line-height: 1.35; color: var(--farbe-tinte); }
.werkprobe-angaben { display: block; font-size: 13px; line-height: 1.45; color: var(--farbe-muted); }
/* Spielart „klein“ (Karte 585, Inhaber 07.11.2026: „zu kleinteilig“): in „Kursleitung vorgestellt“ 112 px hoch, im
   eigenen Seitenverhältnis, ohne Beschriftung (die zeigt die Lightbox). */
.werkprobe--klein { width: auto; }
.werkprobe--klein .werkprobe-bild { width: auto; height: 112px; }

/* ---- Kursleitung vorgestellt (`website/_leitung_vorgestellt.html`, Karte 585, Inhaber 07.11.2026) ----
   Telefon: Porträt 150 px neben Name und „seit“ (bis 07.11.2026 104 px; Inhaber: „etwas zu klein“), der Text darunter über die volle Breite. Ab 768 px: Porträt 240 px
   links, Kopf und Text rechts. Das Porträt ist das Bild der Karte der Kursleitung (`.dozent-portraet-wrap`). Der Ort
   gibt nur Abstand und Breite. */
.leitung-vorgestellt {
  display: grid; grid-template-columns: 150px minmax(0, 1fr); grid-template-areas: "bild kopf" "text text";
  column-gap: 16px; row-gap: 18px; align-items: center;
}
.leitung-vorgestellt--ohne-bild { grid-template-columns: minmax(0, 1fr); grid-template-areas: "kopf" "text"; }
.leitung-vorgestellt-bild { grid-area: bild; }
.leitung-vorgestellt-kopf { grid-area: kopf; }
.leitung-vorgestellt-name { margin: 0 0 6px; font-size: 20px; }
.leitung-vorgestellt-seit {
  margin: 0; font-family: var(--schrift-mono); font-size: 12px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--farbe-muted);
}
.leitung-vorgestellt-text { grid-area: text; max-width: 34em; }
.leitung-vorgestellt-intro { margin: 0 0 12px; font-size: 18px; line-height: 1.6; color: #37342D; }
.leitung-vorgestellt-vita { margin: 0 0 18px; font-size: 16px; line-height: 1.65; color: #4A463F; }
.leitung-vorgestellt-werke { display: flex; flex-wrap: wrap; gap: 12px; margin: 0 0 18px; }
.leitung-vorgestellt-weg { display: inline-block; }
@media (min-width: 768px) {
  .leitung-vorgestellt {
    grid-template-columns: 240px minmax(0, 1fr); grid-template-areas: "bild kopf" "bild text";
    grid-template-rows: auto 1fr; column-gap: 40px; row-gap: 14px; align-items: start;
  }
  .leitung-vorgestellt--ohne-bild { grid-template-columns: minmax(0, 1fr); grid-template-areas: "kopf" "text"; }
  .leitung-vorgestellt-kopf { padding-top: 2px; }
}
.kurs-karte {
  background: #fff;
  border: 1px solid var(--farbe-rand);
  display: flex;
  flex-direction: column;
  height: 100%;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.kurs-karte:hover { transform: translateY(-4px); box-shadow: 0 16px 34px -14px rgba(0, 0, 0, 0.28); }
.kurs-karte-bild {
  position: relative;
  aspect-ratio: 4 / 3;
  border-bottom: 1px solid var(--farbe-rand);
  text-decoration: none;
  overflow: hidden;                       /* Rahmen für den Bild-Zoom unten */
}
.kurs-karte-bild img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* GLOBALES MUSTER · Bild-Zoom auf Karten (Design-Handoff 22.07.2026).
   Ausgelöst vom Hover auf der GANZEN Karte, nicht nur auf dem Bild -- Lift (oben) und Zoom
   laufen dadurch synchron. Gilt für jede Kurskarte auf jeder Seite: Der Baustein
   _kurskarte.html ist an sechs Stellen eingebunden, die Regel steht deshalb hier in basis.css
   und nicht in einer Seiten-Datei. Auf Touch-Geräten neutral (reines :hover). */
@media (prefers-reduced-motion: no-preference) {
  .kurs-karte-bild img { transition: transform 0.55s cubic-bezier(0.2, 0.7, 0.3, 1); }
  .kurs-karte:hover .kurs-karte-bild img { transform: scale(1.06); }
  /* Die Format-Tafel der Teamevents (Werkbank 375) zoomt ebenso, ohne Lift — sie hat keinen Rahmen. */
  .formattafel-bild img { transition: transform 0.55s cubic-bezier(0.2, 0.7, 0.3, 1); }
  .formattafel:hover .formattafel-bild img { transform: scale(1.06); }
}

/* GLOBALES MUSTER · Reveal-on-scroll (Design-Handoff 22.07.2026).
   Sektionen faden beim Hereinscrollen einmalig von unten ein -- auf ALLEN Seiten, gesteuert von
   website/js/reveal.js. Die Klasse „zf-reveal" setzt das Skript selbst; ohne JavaScript bleibt
   alles sichtbar. Bei reduzierter Bewegung greift die Regel gar nicht erst.
   (Am selben Tag einmal zurückgenommen: threshold 0.12 ließ sehr hohe Sektionen dauerhaft
   unsichtbar -- Erklärung und Absicherungen stehen in reveal.js.) */
@media (prefers-reduced-motion: no-preference) {
  .zf-reveal {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.7s cubic-bezier(0.2, 0.7, 0.3, 1),
                transform 0.7s cubic-bezier(0.2, 0.7, 0.3, 1);
  }
  .zf-reveal.in { opacity: 1; transform: none; }
}
.badge {
  position: absolute;
  top: 12px; left: 12px;
  background: var(--farbe-teal-hell);
  color: #22403F;
  font-family: var(--schrift-mono);
  font-size: 10px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 3px 8px;
}
/* Gemeinsame Basis für Alters- und Status-Label (Position, Schrift, Größe). Die FARBEN
   unterscheiden sich bewusst (Style-Guide): Altersgruppe = Creme-Outline, Status = Sand. */
.karte-alter, .karte-warteliste, .karte-plaetze {
  position: absolute;
  font-family: var(--schrift-mono);
  font-size: 10px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 3px 8px;
  border: 1px solid transparent;
}
/* Altersgruppe: ruhiges creme-braunes Outline-Label (unter dem Technik-Badge, links). */
.karte-alter {
  top: 38px; left: 12px;
  background: rgba(250, 249, 246, 0.94);
  color: #6A5B45;
  border-color: #D8CDB8;
}
/* Warteliste-Status: gefülltes Sand-Label (auf Höhe des Technik-Badges, rechts). Style-Guide:
   Status = Sand -- NICHT die Altersgruppen-Farbe (Creme-Outline). */
.karte-warteliste {
  top: 12px; right: 12px;
  background: #E7D3BE;
  color: #6A5B45;
  border-color: #E7D3BE;
}
/* Restplätze als Zettel (Werkbank 409, Design-Übergabe 22.10.2026, vom Inhaber freigegeben): dieselbe
   Stelle wie das Warteliste-Label (die Zustände schließen einander aus), aber kein Etikett, sondern
   ein schräg aufgeklebter Zettel in Handschrift — „nur noch 3 Plätze“, die Zahl in Terrakotta.
   „Warteliste“ bleibt Etikett (Inhaber 22.10.2026). Der Streifen ist der Baustein `.klebestreifen`. */
.karte-plaetze { top: 16px; right: 12px; }
.karte-plaetze-knapp {
  font-family: var(--schrift-hand); font-size: 22px; font-weight: 600; line-height: 1;
  letter-spacing: 0; text-transform: none;
  padding: 8px 12px 6px;
  background: var(--farbe-creme); color: var(--farbe-tinte);
  border: 0; border-radius: 1px;
  transform: rotate(3.5deg);
  box-shadow: 0 1px 1px rgba(26, 24, 21, .12), 0 3px 8px rgba(26, 24, 21, .10);
  --band-breite: 46px; --band-r: -5deg;
}
.karte-plaetze-knapp em { font-style: normal; color: var(--farbe-terrakotta-dunkel); }
@media (min-width: 768px) {
  .karte-plaetze-knapp { font-size: 25px; padding: 9px 14px 7px; }
}
.badge-inline {
  position: static;
  display: inline-block;
  margin-bottom: 12px;
  font-size: 11px;
  letter-spacing: 0.08em;
  padding: 4px 10px;
}
.kurs-karte-inhalt { padding: 18px 18px 20px; display: flex; flex-direction: column; gap: 9px; flex: 1; }
.kurs-standort { font-family: var(--schrift-mono); font-size: 11px; letter-spacing: 0.05em; color: var(--farbe-muted); margin-bottom: 4px; }
/* „läuft seit 27. Okt.“ als Ganzes in eigener Zeile (Karte 552): In der Reihe brach es am Telefon und bei
   vier Spalten mitten in der Angabe, oder der Trennpunkt hing am Zeilenende. */
.kurs-standort-laeuft { display: block; white-space: nowrap; }
.kurs-karte-inhalt h3 { font-size: 19px; margin-bottom: 4px; }
.kurs-karte-inhalt h3 a { text-decoration: none; }
.kurs-dozent { color: #6B665E; margin-bottom: 12px; font-size: 14px; }
.kurs-anriss { color: #6B665E; font-size: 14px; margin: 0 0 12px; }
.kurs-karte-fuss { margin-top: auto; display: flex; justify-content: space-between; align-items: center; border-top: 1px solid #EFECE5; padding-top: 14px; }
.kurs-preis { font-weight: 700; font-size: 18px; margin: 0; }
/* Die Richtung unter dem Kachelpreis („netto, zzgl. 20 % USt") -- dieselbe Stimme wie
   .sidebar-preis-hinweis auf der Detailseite, nur ohne deren Abstand nach oben. */
.kurs-preis-hinweis { font-size: 12px; color: var(--farbe-muted); margin: 2px 0 0; }

/* ---- Rechtstext-Seiten (Impressum, AGB, Datenschutzerklärung) -- linksbündig wie alle anderen
   Seiten, kein zentrierter Textblock. ---- */
.rechtstext-kopf { padding: 40px 24px 28px; }
.rechtstext-kopf h1 { margin: 0; font-size: 34px; line-height: 1.05; font-weight: 800; letter-spacing: -0.02em; }
.rechtstext-untertitel { margin: 16px 0 0; font-size: 14px; color: var(--farbe-muted); max-width: 44em; }
/* Der Stand kommt aus der veroeffentlichten Fassung (website/views + rechtstext.html).
   Mono und kleiner als der Untertitel: Es ist eine Angabe zum Dokument, kein Satz darin --
   dieselbe Rolle wie die Stand-Zeile im PDF der Beilage. */
.rechtstext-stand { margin: 10px 0 0; font-family: 'JetBrains Mono', monospace; font-size: 12px; letter-spacing: .04em; color: #A9A296; }
@media (min-width: 760px) {
  .rechtstext-kopf { padding: 56px 56px 32px; }
  .rechtstext-kopf h1 { font-size: 46px; line-height: 1.03; }
}

.rechtstext { padding: 40px 24px 64px; }
@media (min-width: 760px) { .rechtstext { padding: 48px 56px 72px; } }
.rechtstext-inhalt { max-width: 760px; }
.rechtstext-inhalt :is(h2, h3) {
  font-family: var(--schrift-mono);
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--farbe-teal);
  margin: 0 0 10px;
}
.rechtstext-inhalt p { font-size: 16px; line-height: 1.7; color: #37342d; margin: 0 0 30px; }
/* Hinweis auf das Muster-Widerrufsformular als PDF -- steht unter dem AGB-Text, nicht
   darin (siehe rechtstext.html). Abgesetzt, damit es nicht wie ein Teil des Rechtstexts
   aussieht. */
.rechtstext-formular-hinweis { max-width: 760px; margin: 40px 0 0; padding-top: 20px;
  border-top: 1px solid #E4E0D8; font-size: 15px; color: var(--farbe-muted); }

/* ---- Responsive (Design-Briefing: <768 mobil · 768-1024 Tablet · >1024 Desktop;
   Überschriften-Größen selbst wechseln laut Prototyp aber schon bei 600px) ---- */
@media (min-width: 600px) {
  h1 { font-size: 62px; }
  h2 { font-size: 30px; }
}
@media (min-width: 1024px) {
  .fusszeile-inner { padding: 46px 56px 44px; }
}

/* Pflichthaken-Feedback (Abnahme R2 J1): sichtbare Inline-Meldung, wenn der Zustimmungs-Haken
   fehlt -- ersetzt die auf Mobil oft unsichtbare native Fehlerblase. */
.pflichthaken-fehler {
  margin: 6px 0 0;
  color: var(--farbe-terrakotta);
  font-size: 14px;
  font-weight: 600;
}
.pflichthaken--fehlt { outline: 2px solid var(--farbe-terrakotta); outline-offset: 4px; border-radius: 2px; }

/* Bot-Schutz ohne stummen Blocker (Fall 202): Hält die Sicherheitsprüfung das Absenden an, sagt
   diese Zeile über dem Knopf, was passiert (website/js/botschutz.js). Eine Auskunft, kein
   Fehler -- deshalb in der Tinte, nicht in Terrakotta; nur die zweite Stufe (fehlgeschlagen)
   ist ein Fehler und wird es durch ihren Wortlaut. */
.botschutz-hinweis {
  margin: 12px 0;
  color: var(--farbe-teal);
  font-size: 15px;
  font-weight: 600;
}

/* ---- Nummerierte Spalte (gemeinsames Bauteil) ----
   Genutzt auf der Lehrgangsseite („So funktioniert ein Lehrgang") und den Teamevent-Seiten; die
   Startseite („So läuft ein Kurs ab") bis Karte 572, E1 (06.11.2026). EIN Ort für Strichstärke, Nummer und Abstände -- Werte aus der Design-Vorlage. */
.nummern-spalte { border-top: 2px solid #211C14; padding-top: 16px; }
.nummern-spalte .spalte-nummer { font-family: var(--schrift-mono); color: var(--farbe-teal); font-size: 13px; font-weight: 600; margin: 0 0 10px; }
.nummern-spalte .spalte-titel { margin: 0 0 8px; font-size: 18px; font-weight: 700; line-height: 1.25; }
.nummern-spalte .spalte-text { margin: 0; font-size: 14px; line-height: 1.55; color: #6B665E; }
/* Die Reihe nummerierter Spalten: Lehrgang, Teamevents (Werte, „So läuft's
   ab“, Ablauf der Format-Seite mit drei bis fünf Schritten). Ab 768 px so viele gleich breite Spalten,
   wie Schritte da sind. Bis Werkbank 375 (18.10.2026) in startseite.css mit fest vier Spalten. */
/* Als Liste (`ol`) setzt die Reihe ihre Einrückung und Zählung selbst zurück — die Nummer trägt die
   Spalte (seit Karte 572 E4; bis dahin tat es jeder Verwender mit `ol` selbst). */
.weg-schritte { display: grid; gap: 28px; margin-top: 40px; grid-template-columns: minmax(0, 1fr); padding: 0; list-style: none; }
@media (min-width: 768px) {
  .weg-schritte { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); }
  /* Mehr als fünf Schritte (der Graffiti-Ablauf hat sieben) brechen in Reihen zu vier um, statt
     zu schmalen Streifen zu werden. Die Teamevent-Prüfung des Skills verlangt drei bis fünf. */
  .weg-schritte:has(> :nth-child(6)) { grid-auto-flow: row; grid-template-columns: repeat(4, minmax(0, 1fr)); row-gap: 40px; }
}

/* ---- Faktenband (Karte 572, E6, 06.11.2026; bis dahin `.about-fakten*` nur in about.css) ----
   Die Zahlen, die das System rechnet (`website/_faktenband.html`, `website/faktenband.py`): je Feld der
   Strich der Nummerierten Spalte, die Zahl groß, das Etikett darunter. So viele Spalten wie Felder (ohne
   genug Umfragen fehlt die Zufriedenheit, dann sind es drei) — solange jedes Feld mindestens rund 150 px
   hat; das misst der Baustein an seiner EIGENEN Breite (Container), nicht am Fenster: Auf „Über uns“
   steht er über die ganze Seite, auf der Startseite in einer halben Spalte. Darunter zwei Spalten. */
.faktenband { container-type: inline-size; }
.faktenband-felder { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; margin: 0; }
@container (min-width: 480px) {
  .faktenband-felder:not(:has(> :nth-child(4))) { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); }
}
@container (min-width: 720px) {
  .faktenband-felder { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); }
}
.faktenband-feld { border-top: 2px solid #211C14; padding-top: 16px; }
.faktenband-zahl { font-size: 40px; font-weight: 800; letter-spacing: -.02em; line-height: 1; }
.faktenband-label { margin: 8px 0 0; font-size: 14px; color: #6B665E; }

/* ---- Reihe der Wege (Karte 572, E5, 06.11.2026) ----
   Wege mit Pfeil nebeneinander, je Weg der Strich der Nummerierten Spalte darüber, der Name in der Größe
   eines Spaltentitels, der Pfeil der Website rechts (`website/_wege_reihe.html`). Erster Verwender: der
   Einstieg nach Interesse der Startseite. Am Telefon zwei Spalten, jede Zeile mindestens 52 px hoch
   (Tippfläche); ab 768 px so viele Spalten zu mindestens 220 px, wie die Breite trägt (bei 1440 fünf, bei 1100 vier).
   EINE Reihe je Abschnitt: Zwei Reihen untereinander lassen in der ersten ein Loch, sobald ihre Zahl nicht
   aufgeht (fünf Sparten in zwei Spalten, Nachtrag 06.11.2026) — die Wege laufen in einem Raster durch. */
.wege-reihe { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 16px; margin: 0; padding: 0; list-style: none; }
@media (min-width: 768px) {
  .wege-reihe { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 8px 28px; }
}
.wege-reihe-weg {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  min-height: 52px; padding: 12px 0; border-top: 2px solid #211C14;
  color: var(--farbe-tinte); font-size: 17px; font-weight: 700; line-height: 1.25; text-decoration: none;
}
.wege-reihe-weg:hover { color: var(--farbe-teal); }
.wege-reihe-weg .pfeil-hand { margin-left: 0; color: var(--farbe-teal); }

/* ---- Illustrationen als Schmuck (Werkbank 408, Design-Übergabe 22.10.2026) ----
   Sechs Figuren an sechs festen Orten, Markup aus EINER Stelle (website/_illustration.html),
   immer als letztes Kind eines Containers mit .hat-illu. Hier steht nur, was alle gemeinsam
   haben; Größe und Lage jeder Figur stehen im Stilblatt ihrer Seite (about.css, kundenbereich.css,
   kontakt.css, dozenten.css, warteliste.css, teamevent.css).
   Bis 1279 px stehen sie gestapelt unter dem Inhalt, rechtsbündig; ab 1280 px absolut daneben
   (zwischen 1024 und 1279 liefen Sontag und Steinberg in Überschriften). height:auto ist Pflicht,
   weil das Bild width/height trägt (CLS) — sonst würde das Attribut zur echten Höhe.
   ⚠️ Die gestapelten Abstände der Figuren stehen in @media (max-width: 1279px): Ein Abstand, der
   auch am Desktop gilt, verschiebt die absolut gesetzte Figur um genau diesen Betrag. */
.hat-illu { position: relative; }
.zf-illu {
  display: block;
  height: auto;
  max-width: none;
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
}
@media (min-width: 1280px) {
  .zf-illu { position: absolute; z-index: 1; margin: 0; }
}
@media print { .zf-illu { display: none !important; } }
/* Lage von Sontag (404, Werkbank 408) und Ritter (Geld zurück, Werkbank 414). Bis Karte 633 in warteliste.css; beide
   Seiten haben kein eigenes Stilblatt. Sontag: ab 1280 neben der Überschrift; mit Kursvorschlägen (tote Adresse unter
   /kurse/…) in jeder Breite gestapelt unter den Kacheln (Inhaber 22.10.2026). Ritter: bis 1109 px gestapelt und
   kleiner, ohne negativen Rand rechts (machte die Seite 24 px breiter, Inhaber 04.11.2026); ab 1110 px neben dem
   Text, der bis rund 745 px reicht; die Breite wächst mit dem Fenster, damit er den Text nie überdeckt. */
@media (max-width: 1279px) { .zf-illu--sontag { width: min(86vw, 440px); margin: 40px -24px -40px auto; } }
@media (min-width: 1280px) {
  .seite-404:not(.seite-404--mit-kursen) { min-height: 720px; }
  .seite-404:not(.seite-404--mit-kursen) .uebersicht-hero { padding-top: 150px; }
  .seite-404:not(.seite-404--mit-kursen) .zf-illu--sontag { width: min(640px, calc(100vw - 800px)); right: 42px; bottom: -87px; }
  .seite-404--mit-kursen .zf-illu--sontag { position: static; width: 440px; margin: 40px 42px -87px auto; }
}
@media (max-width: 1109px) { .zf-illu--ritter { width: min(60vw, 240px); margin: 8px 0 -40px auto; } }
@media (min-width: 1110px) and (max-width: 1279px) {
  .seite-geld-zurueck .zf-illu--ritter { position: absolute; z-index: 1; margin: 0; width: 340px; right: 24px; bottom: -2px; }
}
@media (min-width: 1280px) {
  .seite-geld-zurueck .zf-illu--ritter { width: min(460px, calc(100vw - 1000px)); right: 56px; bottom: -2px; }
}

/* ---- Blätter-Knöpfe ‹ › (website/_blaetter_knoepfe.html) ----
   EIN Baustein für jedes Weiterschalten der Website (Inhaber 22.10.2026: „achte bitte, dass diese
   Knöpfe Hausmuster sind, falls wir irgendwann irgendwo wieder etwas weiterschalten“): die Stimmen
   auf „Über uns“ (vorher .about-stimmen-pfeil), die Werkwand und das Zitatband der Startseite und
   die beiden Lightboxen (vorher je 48 px mit Zeichen ‹ ›). Der Behälter .blaetter-knoepfe stellt sie
   nebeneinander; die Lage bestimmt der Verwender. --hell für dunkle Flächen, --teal für die helle
   Türkis-Fläche (Zitatband). 44 px seit 22.10.2026 (Inhaber; vorher 38).
   Wächter: website.tests.EinWeiterschaltenTests — kein eigener Pfeil, kein eigenes ‹ ›. */
.blaetter-knoepfe { display: flex; gap: 14px; }
.blaetter-knopf {
  display: flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; background: none; border: 1px solid #D8D3C9;   /* 44 seit 22.10.2026 (Inhaber; vorher 38) */
  cursor: pointer; color: var(--farbe-tinte); transition: border-color .15s ease, color .15s ease;
}
.blaetter-knopf:hover { border-color: var(--farbe-teal); color: var(--farbe-teal); }
.blaetter-knopf--hell { color: var(--farbe-creme); border-color: var(--farbe-footer-label); background: rgba(33, 28, 20, .72); }
.blaetter-knopf--hell:hover { border-color: var(--farbe-creme); color: var(--farbe-creme); }
.blaetter-knopf--teal { color: #152B2A; border-color: #22403F; }
.blaetter-knopf--teal:hover { border-color: #152B2A; background: rgba(250, 249, 246, .35); }
/* Lage in den Lightboxen (lightbox.js): links und rechts am Rand, das Bild dazwischen. Der Behälter
   lässt Klicks durch, damit das Band über dem Bild nicht zur Sperre wird. */
.lightbox-blaettern { position: fixed; left: 20px; right: 20px; top: 50%; transform: translateY(-50%);
  justify-content: space-between; pointer-events: none; z-index: 1; }
.lightbox-blaettern > * { pointer-events: auto; }

/* ---- Stimme (website/_stimme.html, Karte 458, 29.10.2026) ----
   EIN Baustein für jede Stimme der Website, in zwei Größen: groß (weiß, leicht gedreht, mit
   Schatten — die erste Stimme der Kursseite, die Stimme des Lehrgangs) und klein (weiß mit Rand —
   die weiteren Stimmen der Kursseite im Aufklapper, das Raster auf „Über uns“). Bis dahin drei
   Bauarten in drei Stilblättern (.testimonial-karte, .lehrgang-testimonial, .about-stimme) mit
   ZWEI Unterschriften (13 px grau gegen 14 px fett dunkel, Design-Befund 29.10.2026): Stehen große
   und kleine Karte untereinander, sähe man es sofort. Die Unterschrift steht jetzt einmal hier.
   Von außen kommt nur die Nachbarschaft (Abstand, Breite im Raster). Wächter:
   website.tests_stimmen.EineStimmeTests. */
.stimme { margin: 0; position: relative; background: #fff; display: flex; flex-direction: column; }
/* Die Regel darüber ist ein Klassenwähler und schlägt [hidden] { display: none } — ohne diese Zeile
   stünden auf „Über uns“ alle Stimmen untereinander (gefunden 20.07.2026). */
.stimme[hidden] { display: none; }
/* Das Zeichen kommt aus dem Stilblatt, nicht aus dem Text (Werkbank 412): Schmuck, kein Inhalt. */
.stimme-zeichen::before { content: "„"; }
.stimme-zeichen {
  font-family: var(--schrift-hand); line-height: .4; color: var(--farbe-teal-hell);
  pointer-events: none; user-select: none;
}
.stimme-etikett {
  margin: 0 0 14px;
  font-family: var(--schrift-mono); font-size: 11px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--farbe-muted);
}
.stimme blockquote { margin: 0; font-weight: 500; color: #211C14; text-wrap: pretty; }
.stimme-unterschrift {
  margin: 20px 0 0; display: flex; align-items: center; gap: 11px;
  font-size: 13px; line-height: 1.4; color: #6B665E;
}
.stimme-unterschrift::before { content: ""; width: 28px; height: 2px; background: var(--farbe-terrakotta); flex: 0 0 auto; }
.stimme--gross {
  padding: 34px 40px 32px; max-width: 39em; transform: rotate(-0.6deg);
  box-shadow: 0 24px 60px -20px rgba(20, 15, 10, 0.32), 0 6px 18px -8px rgba(20, 15, 10, 0.14);
}
/* ⚠️ DAS ZEICHEN STEHT IM FLUSS, ÜBER DEM ETIKETT (Karte 458, E1, 29.10.2026): Bis dahin lag es
   absolut in der Ecke (top 14, left 30) — über dem Etikett „Stimme aus dem Kurs“, das seit E2 dort
   steht; das „ lief mitten durch das Wort (im Bild gesehen, 1440 px). Jetzt wie die kleine Karte:
   Zeichen, darunter Etikett, darunter das Zitat. Ein Baustein, dieselbe Reihenfolge in beiden Größen. */
.stimme--gross .stimme-zeichen { font-size: 74px; margin: 0 0 26px -4px; }
.stimme--gross blockquote { font-size: 20px; line-height: 1.5; }
.stimme--klein { border: 1px solid var(--farbe-rand); padding: 30px 28px 26px; }
.stimme--klein .stimme-zeichen { font-size: 56px; margin-bottom: 20px; }
/* flex: drückt die Unterschrift im Raster nach unten (Karten gleicher Höhe auf „Über uns“). */
.stimme--klein blockquote { font-size: 17px; line-height: 1.6; flex: 1 1 auto; }

/* ---- Logo-Leiste (teamevent/_logoleiste.html) ----
   Teamevent-Übersicht, Format-Seite und Startseite („Mit uns arbeiten“) — bis Werkbank 409 in
   teamevent/css/formate.css, das die Startseite nicht lädt. Eine Leiste mit eigenen Linien: Als Band trägt sie
   `.band-trennt-selbst` (Karte 634), die Trennlinie zwischen Bändern zieht neben ihr keine zweite. */
.logoleiste {
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: 24px;
  border-top: 1px solid var(--farbe-rand);
  border-bottom: 1px solid var(--farbe-rand);
}
.logoleiste-etikett {
  margin: 0;
  font-family: var(--schrift-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  line-height: 1.5;
  text-transform: uppercase;
  color: var(--farbe-muted);
}
.logoleiste-fenster { container-type: inline-size; display: flex; overflow: hidden; min-width: 0; }
.logoleiste-logos { flex: 0 0 auto; display: flex; margin: 0; padding: 0; list-style: none; }
/* Sechs Logos füllen das Fenster (am Telefon drei) — die Breite kommt vom Fenster, nicht vom Logo. */
.logoleiste-logos li { flex: 0 0 auto; width: calc(100cqw / 3); padding: 0 12px; }
.logoleiste-logos img {
  display: block;
  width: 100%;
  height: 40px;                         /* height-Attribut am Bild nur zusammen mit dieser Höhe */
  object-fit: contain;
  filter: grayscale(1);
  opacity: 0.7;
}
/* Das Laufband: beide Listen wandern um ihre eigene Breite, drei Sekunden je Logo. */
.logoleiste-fenster--laeuft {
  -webkit-mask-image: linear-gradient(to right, transparent, #000 5%, #000 95%, transparent);
  mask-image: linear-gradient(to right, transparent, #000 5%, #000 95%, transparent);
}
.logoleiste-fenster--laeuft .logoleiste-logos { animation: logoleiste-lauf calc(var(--anzahl, 12) * 3s) linear infinite; }
.logoleiste-fenster--laeuft:hover .logoleiste-logos,
.logoleiste-fenster--laeuft:focus .logoleiste-logos { animation-play-state: paused; }
@keyframes logoleiste-lauf { to { transform: translateX(-100%); } }
@media (prefers-reduced-motion: reduce) {
  .logoleiste-fenster--laeuft { overflow-x: auto; -webkit-mask-image: none; mask-image: none; }
  .logoleiste-fenster--laeuft .logoleiste-logos { animation: none; }
  .logoleiste-fenster--laeuft .logoleiste-logos[aria-hidden="true"] { display: none; }
}
@media (min-width: 1024px) {
  .logoleiste { flex-direction: row; align-items: center; gap: 48px; padding: 26px 56px 28px; }
  .logoleiste-etikett { flex: 0 0 150px; }
  .logoleiste-fenster { flex: 1; }
  .logoleiste-logos li { width: calc(100cqw / 6); padding: 0 18px; }
}

/* ---- Wegtafel (website/_wegtafel.html, Werkbank 409) ----
   Ein Weg zu einem Angebot: Bild (eines oder ein Mosaik aus drei), Kicker, Titel, ein Satz, eine
   Faktenzeile, der Weg mit Pfeil. Die Spalten stellt der Verwender (.wegtafeln der Startseite). */
.wegtafel { display: flex; flex-direction: column; min-width: 0; }
.wegtafel-bild { display: grid; gap: 6px; aspect-ratio: 3 / 2; margin-bottom: 16px; overflow: hidden; }
.wegtafel-bild img { display: block; width: 100%; height: 100%; min-height: 0; object-fit: cover; }
.wegtafel-bild--mosaik { grid-template-columns: 2fr 1fr; grid-template-rows: repeat(2, minmax(0, 1fr)); }
.wegtafel-bild--mosaik img:first-child { grid-row: 1 / 3; }
.wegtafel-titel { margin: 0; font-size: 26px; line-height: 1.15; letter-spacing: -0.015em; }
.wegtafel-text { margin: 10px 0 0; max-width: 60ch; font-size: 16px; line-height: 1.55; color: #3A362F; }
.wegtafel-fakt { margin: 10px 0 0; font-size: 13px; color: #6B665E; font-variant-numeric: tabular-nums; }
.wegtafel .link-pfeil { align-self: flex-start; display: inline-flex; align-items: center; min-height: 44px; margin-top: 8px; }
@media (min-width: 1024px) {
  .wegtafel-bild { gap: 8px; margin-bottom: 22px; }
  .wegtafel-titel { font-size: 32px; }
  .wegtafel-text { margin-top: 12px; font-size: 18px; }
  .wegtafel-fakt { margin-top: 14px; font-size: 14px; }
  .wegtafel .link-pfeil { margin-top: 12px; }
}

/* ---- Klebestreifen (Werkbank 409) ----
   Ein Streifen Papierklebeband oben mittig über einem Blatt oder Zettel: die Werkwand der Startseite
   und der Restplätze-Zettel der Kurskarte. EINE Quelle für Form und Farben; das Element selbst muss
   positioniert sein (beide Verwender sind es). Größe und Neigung als Maßangabe: --band-breite,
   --band-hoehe, --band-r. Farben: Beige (ohne Zusatz), --terrakotta, --hellteal.
   Wächter: website.tests.EinKlebestreifenTests. */
.klebestreifen::before {
  content: ""; position: absolute; z-index: 2;
  width: var(--band-breite, 44px); height: var(--band-hoehe, 15px);
  left: 50%; top: calc(var(--band-hoehe, 15px) / -2); margin-left: calc(var(--band-breite, 44px) / -2);
  background: rgba(214, 206, 190, .9);
  transform: rotate(var(--band-r, -4deg));
}
.klebestreifen--terrakotta::before { background: rgba(188, 107, 65, .88); }
.klebestreifen--hellteal::before { background: rgba(177, 206, 210, .92); }

/* Das Hinweisband der Vorschau — „noch nicht öffentlich“, nur für das Personal sichtbar.
   EIN Baustein seit 24.10.2026 (Werkbank 414): Bis dahin standen zwei gleiche Kopien in
   kursdetail.css und lehrgang.css („getrennt geladen, deshalb eine Kopie“); die Seite „Wir stehen
   zu unseren Kursen“ hätte die dritte gebraucht. Benutzt von Kursseite, Lehrgang, Geld-zurück-Seite. */
.vorschau-banner {
  background: #E7D3BE;
  color: #7A4D22;
  font-family: var(--schrift-mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-align: center;
  padding: 8px 16px;
}