/* 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.

   Farbrollen (Karte 637, E3): Eine Farbe steht in den öffentlichen Stilblättern nur noch als `var(--farbe-…)`.
   Bis dahin trugen sie 139 rohe Werte an rund 500 Stellen, darunter neun Töne zwischen Tinte und Grau und sieben
   Beige. Wer einen neuen Ton braucht, sucht zuerst die Rolle hier; passt keine, ist das eine Frage für
   docs/Bausteine-zur-Entscheidung.md, kein Wert im Seiten-Stilblatt. Was begründet roh bleibt (Schatten, Schleier,
   Masken, dunkle Flächen, die Gutscheinkarte), steht gezählt im Wächter `website.tests_637.KeineRoheFarbeTests`.

   „auf: …“ in der Rolle nennt die Gründe, auf denen die Farbe als SCHRIFT stehen darf (Namen ohne `--farbe-`).
   Der Wächter `website.tests_637.KontrastDerRollenTests` rechnet jedes Paar: mindestens 4,5 : 1. Wer eine Farbe
   ändert oder einen Grund dazuschreibt, sieht dort sofort, ob es reicht. */
:root {
  --farbe-creme: #FAF9F6;          /* Seitengrund (heißt „Creme“, nicht „Ecru“); als Schrift auf: teal, footer */
  --farbe-weiss: #FFFFFF;          /* Karten, Felder; als Schrift auf: teal, teal-dunkel, teal-tief, terrakotta-dunkel, footer */
  --farbe-flaeche: #F4F1EA;        /* beige Fläche, Bildgrund (bis Karte 637 daneben #F1EEE8 unter Bildern und #F2EFE8) */
  --farbe-tinte: #1A1815;          /* Text, Wortmarke · auf: creme, weiss, flaeche, teal-hell, teal-flaeche */
  --farbe-text: #37342D;           /* Lesetext · auf: creme, weiss, flaeche, teal-flaeche (bis Karte 637 daneben #2C2A24, #3A362F, #3B3831, #2B2822) */
  --farbe-text-neben: #4A463F;     /* Satz unter dem Titel, Nebentext · auf: creme, weiss, flaeche */
  --farbe-muted: #6B665E;          /* leise Schrift, Kicker · auf: creme, weiss, flaeche, teal-flaeche — EIN Grau seit Karte 637 (E3): bis dahin
                                      #736D63 als Token (4,43 : 1 auf dem Bildgrund) und #6B665E als Zahl an 66 Stellen. Davor, bis 23.10.2026,
                                      #7C766B mit 4,28 : 1 und ein zweites Grau #8A8377 in elf Stilblättern (Werkbank 412) */
  --farbe-teal: #37656C;           /* Primärfarbe: Knöpfe, Links, Akzente · als Schrift auf: creme, weiss, flaeche */
  --farbe-teal-dunkel: #2B5158;    /* Petrol beim Darüberfahren · als Schrift auf: creme, weiss, flaeche */
  --farbe-teal-tief: #22403F;      /* Schrift auf Hellpetrol (Etikett, Wochentag-Feld, Zitatband) · auf: teal-hell, creme, weiss */
  --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, auf: creme, weiss (4,8 : 1 auf Creme);
                                         auf der beigen Fläche reicht es nicht (4,48 : 1) */
  --farbe-terrakotta-auf-dunkel: #BE7048; /* Terrakotta-Schrift auf dem Fußgrund, auf: footer — 4,51 : 1 (Werkbank 412) */
  --farbe-footer: #211C14;         /* Fußbereich: Grund. Derselbe warme Dunkelton trägt den Kopf von „Über uns“, die starke Linie über Spalten
                                      und die Schrift der Zitate, auf: creme, weiss, flaeche (die Zahl stand dort schon, Karte 637) */
  --farbe-footer-punkt: #5C4A34;   /* Fußbereich: Trennpunkte */
  --farbe-footer-text: #B7AF9F;    /* Fußbereich: Text, auf: footer. Derselbe Ton als kräftigerer Feldrand (Häkchen im Lehrgang, Umfrage beim
                                      Darüberfahren) und für die noch offenen Schritte im Buchungsfenster */
  --farbe-footer-label: #8B8470;   /* Fußbereich: Rubriken, auf: footer — 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-feldrand: #D8D3C9;       /* Rand von Feldern und stillen Knöpfen, Trennzeichen, gestrichelter Rahmen am Bildplatzhalter */
  --farbe-linie-leise: #EFECE5;    /* Linie in einer Karte, Brotkrume */

  --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 */

  /* Seitentitel in drei Stufen (Karte 637, E4; Inhaber 14.11.2026: „Ja, drei Stufen (62 · 50 · 40)“). Der Titel einer
     Seite (h1) hatte am Rechner neun Größen von 40 bis 68 px, sieben Zeilenhöhen und drei Laufweiten, jede aus dem
     Stilblatt ihrer Seite. Jetzt nennt eine Seite nur noch ihre Stufe; was die Stufe trägt, steht hier. Die Regeln
     dazu stehen bei der Grundregel für h1 und bei „Seitentitel im Kopf“. Wächter: website.tests_637.SeitentitelStufenTests. */
  --titel-buehne: 62px;          /* Bühne: Seiten mit eigenem Kopfbild (Startseite, Über uns, Teamevents, Teamevent-Seite, Gestaltungsauftrag, Gutschein, Vermietung, Lehrgang) */
  --titel-seite: 50px;           /* Seite: jede andere Seite (Übersichten, Kursseite, Kursleitung, Blogbeitrag, Meine Buchungen) — die Grundgröße des h1 */
  --titel-blatt: 40px;           /* Blatt: Rechtstexte, Werkseite */
  --titel-telefon: 38px;         /* Bühne und Seite am Telefon (unter 600 px) */
  --titel-blatt-telefon: 32px;   /* Blatt am Telefon */
  --titel-buehne-zeile: 1.05;    /* Zeilenhöhe der Bühne */
  --titel-seite-zeile: 1.1;      /* Zeilenhöhe der Seite */
  --titel-blatt-zeile: 1.12;     /* Zeilenhöhe des Blatts */
  --titel-laufweite: -0.02em;    /* Laufweite aller drei Stufen */

  /* Schriftstufen unterhalb des Seitentitels (Karte 637, E4b). Unter dem Titel wählte jede Seite ihre Schrift selbst:
     14 Formen für die Überschrift eines Bands, 12 für den Titel einer Karte, fünf Größen für den Satz unter dem Titel,
     über 30 Formen der Maschinenschrift. Jetzt nennt eine Regel nur noch die Stufe (`font-size: var(--bandtitel)`), und was
     die Stufe trägt, steht hier: je Stufe Größe, Zeilenhöhe, Laufweite und Gewicht. Ein Ort gibt weiter Abstand,
     Breite und Ausrichtung. Was keine dieser Rollen hat (Preise, Zahlen, Handschrift, Zitate, Formulare, Knöpfe, Menü,
     Fuß), behält seine Größe und steht mit Grund im Bestand des Wächters website.tests_637.SchriftstufenTests.
     Eine neue Stelle bekommt die Stufe ihrer Rolle; passt keine, ist das eine Frage, keine neue Zahl. */
  --bandtitel: 30px;                         /* Bandüberschrift: die h2 über einem Band der Seite, die Grundgröße des h2; Gewicht 800 */
  --bandtitel-telefon: 25px;                 /* Bandüberschrift am Telefon (unter 600 px) */
  --bandtitel-zeile: 1.1;                    /* Zeilenhöhe der Bandüberschrift und von „Band groß“ */
  --bandtitel-laufweite: -0.01em;            /* Laufweite der Bandüberschrift und des Kapitelkopfs */
  --bandtitel-gross: 40px;                   /* Band groß: die Überschrift über den Teamevent-Formaten, über der Anfrage einer Teamevent-Seite und am ersten Beitrag des Blogs (bis E4b 44 und 36 px); Gewicht 800 */
  --bandtitel-gross-telefon: 30px;           /* Band groß, solange das Band einspaltig steht (bis E4b 32 und 28 px) */
  --bandtitel-gross-laufweite: -0.015em;     /* Laufweite von „Band groß“ */
  --bandtitel-kapitel: 28px;                 /* Kapitelkopf der Kursseite: die h2 neben der Kapitelnummer (Karte 585, Inhaber 07.11.2026); Gewicht 800 */
  --bandtitel-kapitel-telefon: 24px;         /* Kapitelkopf am Telefon (unter 768 px) */
  --bandtitel-kapitel-zeile: 1.2;            /* Zeilenhöhe des Kapitelkopfs */
  --kartentitel: 20px;                  /* Kartentitel: Name und Kachel (Kursleitung, Kurskarte, Blogkarte, Modul), die Grundgröße des h3 */
  --kartentitel-gewicht: 800;           /* Gewicht des Kartentitels */
  --kartentitel-spalte: 18px;           /* Kartentitel einer Spalte (nummerierte Spalte, Werte, Schritte, Leistungen) */
  --kartentitel-spalte-gewicht: 700;    /* Gewicht des Kartentitels einer Spalte */
  --kartentitel-zeile: 1.2;             /* Zeilenhöhe beider Kartentitel; Laufweite 0 */
  --titelsatz: 18px;                    /* Satz unter dem Titel: die Zeilen unter dem h1 und unter „Band groß“; Farbe --farbe-text-neben, Gewicht 400 */
  --titelsatz-zeile: 1.55;              /* Zeilenhöhe des Satzes unter dem Titel */
  --lesetext: 16px;                     /* Lesetext Standard: Absätze in einem Band, Rechtstexte, Dank; Gewicht 400 */
  --lesetext-zeile: 1.6;                /* Zeilenhöhe des Lesetexts Standard (Rechtstexte bleiben als lange Lesestrecke bei 1,7) */
  --lesetext-kurs: 18px;                /* Lesetext der Kursseite: Kursbeschreibung, Vita der Kursleitung, Teamevent-Beschreibung, Geschichte auf „Über uns“ */
  --lesetext-kurs-zeile: 1.7;           /* Zeilenhöhe des Lesetexts der Kursseite */
  --lesetext-blog: 19px;                /* Lesetext des Blogs: Absätze und Listen eines Beitrags */
  --lesetext-blog-zeile: 1.75;          /* Zeilenhöhe des Lesetexts im Blog */
  --mono-kicker: 12px;                  /* Maschinenschrift Kicker: Versalien über einer Überschrift oder einem Abschnitt */
  --mono-kicker-laufweite: 0.12em;      /* Laufweite des Kickers */
  --mono-etikett: 11px;                 /* Maschinenschrift Etikett: Versalien an einer Angabe, einem Preis, einer Rubrik, einem Aufklapper */
  --mono-etikett-laufweite: 0.08em;     /* Laufweite des Etiketts */
  --mono-marke: 10px;                   /* Maschinenschrift Marke: Versalien am Bild (Altersgruppe, Warteliste, Bildangabe, Platzhalter); die kleinste Schrift der Website */
  --mono-marke-laufweite: 0.05em;       /* Laufweite der Marke */
  --mono-zeile: 12px;                   /* Maschinenschrift Mono-Zeile: gemischte Schreibung (Brotkrume, Standort, Stand, Zähler, Angaben) */
  --mono-zeile-laufweite: 0.04em;       /* Laufweite der Mono-Zeile */

  /* 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;

  /* Der Seitenrand: der Abstand jedes Bands zur Fensterkante (Karte 637, E1). 24 px am Telefon, 56 px ab 1024 px.
     Bis dahin stand die Zahl je Band; an vier Stellen stand am Telefon 20 oder 22 px, und der Kurs-Finder las
     diesen Namen schon, ohne dass es ihn gab. */
  --seiten-rand: 24px;

  /* Das Polster der Bänder (Karte 637, E6). Ein Band ist ein <section> direkt im Inhaltsblock (siehe „Trennlinie
     zwischen Bändern“). Es nimmt sein Polster von hier: oben, unten, seitlich der Seitenrand. Bis dahin trug jedes
     Band Zahlen: am Rechner oben zehn Werte (44 bis 88 px), unten neun (40 bis 80), am Telefon neun und dreizehn.
     Die Werte wechseln wie der Seitenrand bei 1024 px. Was abweicht, steht mit Grund im Wächter
     `website.tests_637.BandPolsterTests`; ein neues Band schreibt
     `padding: var(--band-oben) var(--seiten-rand) var(--band-unten)`. */
  --band-oben: 40px;    /* Polster über dem Inhalt eines Bands: 40 px am Telefon, 56 px ab 1024 px */
  --band-unten: 56px;   /* Polster unter dem Inhalt eines Bands: 56 px am Telefon, 64 px ab 1024 px (unten mehr als oben:
                           oben stehen schon die Linie und die kleine Zeile) */
  --band-weit: 48px;    /* die weite Spielart für Bühnen, oben UND unten gleich: 48 px am Telefon, 64 px ab 1024 px. Eine
                           Bühne ist ein Kopfband mit eigenem Bild oder ein Band auf eigener Fläche (dunkel, beige, petrol);
                           sie steht in ihrer Fläche wie in einem Rahmen, darum gleich viel oben und unten */

  /* Die Website ist hell, auch bei dunklem System: Rollbalken, Felder und Auswahllisten bleiben hell (Karte 637, B17). */
  color-scheme: light;
}
@media (min-width: 1024px) { :root { --seiten-rand: 56px; --band-oben: 56px; --band-unten: 64px; --band-weit: 64px; } }

* { box-sizing: border-box; }

/* ---- Formularelemente erben Schrift und Farbe (Karte 637, E1) ----
   Ein <button> und ein Feld erben die Schrift nicht von selbst: Ohne diese Regel stand „Lehrgang buchen“ in Arial
   (Chrome, Firefox) oder in der Systemschrift (Safari), der Pfeil-Knopf des Newsletters ebenso, und die Felder von
   „Meine Buchungen“ in reinem Schwarz statt Tinte. Seither setzt kein Knopf und kein Feld mehr eine Familie selbst.
   Die Auswahlliste ist eckig wie jedes Feld (Safari am iPhone rundete sie von sich aus, B7).
   Wächter: website.tests.FormularelementeErbenDieSchriftTests. */
button, input, select, textarea { font-family: inherit; color: inherit; }
select { border-radius: 0; }
/* Das Häkchen und der Auswahlpunkt des Browsers in Hausfarbe (F9). Ein eigenes Häkchen wäre ein Baustein. */
input[type="checkbox"], input[type="radio"] { accent-color: var(--farbe-teal); }

/* ---- 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; }
/* ---- Markieren in Hausfarbe (Karte 637, Teil C, Inhaber 14.11.2026) ----
   EINE Regel für jede Textauswahl der Website: Hellpetrol wie eine Lasur, die Schrift bleibt Tinte (10,6 : 1). Auf
   dunklem Grund (Fuß, `.grund-dunkel`) Petrol mit Creme. Bis dahin das Blau des Browsers, die einzige fremde Farbe. */
::selection { background: var(--farbe-teal-hell); color: var(--farbe-tinte); }
.fusszeile ::selection, .grund-dunkel ::selection { background: var(--farbe-teal); color: var(--farbe-creme); }

/* 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); }

/* ---- Rollsperre hinter einer Überlagerung (website/js/modalrahmen.js) ----
   Solange eine Überlagerung offen ist, rollt die Seite dahinter nicht mit. Steht hier und nicht mehr in buchung.css
   (Karte 637, Tester Z4): Den Rahmen lädt jede Seite, buchung.css nur die mit einem Buchungsfenster. Hinter der Suche
   und dem Filterblatt rollte die Seite deshalb auf 28 von 47 Seiten weiter. */
html.zf-modal-offen, html.zf-modal-offen body { overflow: hidden; }

/* ---- Der Schlusspunkt (`website/_schlusspunkt.html`, Karte 637, Teil C; ein Versuch im Blog, Nachschau 15.02.2027) ----
   Der Punkt des Hauses als Schlusszeichen nach dem letzten Block eines Textes: 28 px (die Marke erlaubt die Fassung
   mit Pinselkante erst ab 24 px), in der Farbe der Schrift, an der linken Textkante. Form, Farbe und Größe kommen aus
   der Marke (die Spielart `schluss` in marke.css); hier steht nur, dass er frei steht. Der Verwender gibt den Abstand. */
.schlusspunkt { display: block; color: var(--farbe-tinte); }

/* ---- 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;
  /* Ein Wort oder eine Adresse, die breiter ist als ihre Spalte, bricht um, statt die Seite breiter zu machen (Karte 637,
     live gefunden am 15.11.2026: In den AGB steht „www.zeichenfabrik.at/rechtliches/kinderschutzrichtlinie.“ ausgeschrieben,
     55 Zeichen ohne Trennstelle; die Seite war am Telefon 36 px zu breit). Vererbt sich auf jeden Text. Gebrochen wird
     nur, was sonst hinausragte; die Breite von Spalten und Rastern ändert die Regel nicht. */
  overflow-wrap: break-word;
  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; }
/* Ein Wort, das breiter ist als die Spalte, bricht um, statt die Seite breiter zu machen (Karte 637, B1: „Allgemeine
   Geschäftsbedingungen“ ragte bei 320 px 43 px hinaus). Getrennt wird nur ein Wort ab 16 Zeichen und nur mit
   mindestens 7 Zeichen vor und nach dem Strich („Geschäfts-bedingungen“); alles Kürzere wandert wie bisher als
   Ganzes in die nächste Zeile. `overflow-wrap` ist das Netz für Wörter, die keine Trennstelle haben. */
h1, h2, h3 {
  font-family: var(--schrift-haupt); font-weight: 800; line-height: 1.1; margin: 0 0 0.5em;
  overflow-wrap: break-word;
  -webkit-hyphens: auto; hyphens: auto;
  hyphenate-limit-chars: 16 7 7;
  -webkit-hyphenate-limit-before: 7; -webkit-hyphenate-limit-after: 7;
}
/* Der Titel einer Seite ist ohne weiteres Zutun die Stufe „Seite“ (Karte 637, E4): 38 px am Telefon, 50 px ab 600 px
   (unten bei „Responsive“). Bis dahin gab die Grundregel jedem h1 ab 600 px 62 px, die keine gestaltete Seite wollte;
   sie griff nur, wo eine Seite den Titel vergessen hatte („Meine Buchungen“, „Vertrag widerrufen“). Die Stufen
   „Bühne“ und „Blatt“ nennt die Vorlage am h1: `.seitentitel-kopf--gross`, `.seitentitel-kopf--blatt`. */
h1 { font-size: var(--titel-telefon); line-height: var(--titel-seite-zeile); letter-spacing: var(--titel-laufweite); }
/* Unter dem Titel gilt dasselbe (Karte 637, E4b): Ein h2 ist ohne weiteres Zutun die Bandüberschrift (25 px am
   Telefon, 30 px ab 600 px, unten bei „Responsive“), ein h3 der Kartentitel. Eine Seite gibt beiden keine eigene
   Größe; was eine andere Stufe ist („Band groß“, Kapitelkopf, Kartentitel einer Spalte), liest deren Token. */
h2 { font-size: var(--bandtitel-telefon); line-height: var(--bandtitel-zeile); letter-spacing: var(--bandtitel-laufweite); }
h3 { font-size: var(--kartentitel); line-height: var(--kartentitel-zeile); }
/* 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; }

/* ---- Der Kicker: EINE Deklaration für drei Namen (Karte 637, E2) ----
   Die Mono-Zeile in Versalien über einer Überschrift oder einem Abschnitt. Die Vorlagen tragen drei Namen, und die
   bleiben: `.kicker` (über Titeln und Text), `.detail-label` (der Abschnittskopf einer Seite und eines Formulars:
   Kursseite, Dozent*innen, FAQ, Verträge, Kontakt, Kursberatung, Kurs vorschlagen, Startangaben; bis Karte 571 in
   kursdetail.css) und `.abschnitt-kicker` (im Baustein „Abschnitt unter dem Kopf“, Karte 633). Bis Karte 637 standen
   dieselben sechs Deklarationen an drei Stellen dieser Datei. Wer den Kicker ändert, ändert ihn hier, für alle drei.
   Wächter: website.tests_637.EinKickerEineDeklarationTests. */
.kicker, .detail-label, .abschnitt-kicker {
  font-family: var(--schrift-mono);
  font-size: var(--mono-kicker);
  letter-spacing: var(--mono-kicker-laufweite);
  text-transform: uppercase;
  color: var(--farbe-muted);
  margin: 0 0 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: var(--farbe-teal-tief); }
/* Auf der dunklen Wand (Werkwand der Startseite, Werkbank 409): die leise Schrift des Fußbereichs. */
.kicker--auf-dunkel { color: var(--farbe-footer-label); }
/* ---- 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` in der einen Deklaration oben).
   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: var(--bandtitel-kapitel); font-weight: 800; letter-spacing: var(--bandtitel-laufweite); line-height: var(--bandtitel-kapitel-zeile); }
@media (max-width: 767px) { .kapitelkopf h2 { font-size: var(--bandtitel-kapitel-telefon); } }

/* ---- 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;
  /* Zeilenhöhe fest: Ohne sie erbte der Link 1,5 vom Dokument und war 54 px hoch, der <button> nahm die Vorgabe des
     Browsers und war 51 px hoch (Karte 637, F2). */
  line-height: 1.5;
  padding: 14px 24px;
  border-radius: 2px;
  border: 1px solid transparent;
  cursor: pointer;
  transition: filter 0.15s ease;
}
.btn-primary { background: var(--farbe-teal); color: var(--farbe-weiss); }
.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 var(--farbe-linie-leise);
  font-family: var(--schrift-mono);
  font-size: var(--mono-zeile);
  letter-spacing: var(--mono-zeile-laufweite);
  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; }
/* Der handgezeichnete Haken (`website/_haken.html`): Wie beim Pfeil darf der Strich über den Rahmen der Zeichnung
   hinaus. Bis Karte 637 (E2) als style-Attribut in der Teilvorlage. */
.haken-svg { overflow: visible; }
/* Spielart „zurück“ (Karte 637, E2): Der Pfeil steht VOR dem Text und zeigt nach links („← Zurück zu allen
   Beiträgen“ am Ende eines Blogbeitrags). Derselbe Pfeil (`website/_pfeil.html`), gespiegelt; bis dahin trug die
   Vorlage eine eigene, kleinere Kopie der Zeichnung mit `style="transform:scaleX(-1)"`. */
.link-pfeil--zurueck .pfeil-hand { transform: scaleX(-1); margin-left: 0; margin-right: 7px; }

/* ---- 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: var(--farbe-teal-tief);
  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: var(--mono-kicker); letter-spacing: var(--mono-kicker-laufweite);
  text-transform: uppercase; color: var(--farbe-teal-tief);
}
.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: var(--farbe-muted); }
.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: var(--farbe-muted); }
.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: var(--farbe-muted); 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 var(--farbe-feldrand);
  padding: 8px 12px;
  font-family: var(--schrift-mono);
  font-size: 12px;
  color: var(--farbe-muted);
  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);
}
/* Unter 350 px 26 px und weniger Abstand zur Nummer: „Gestaltungsaufträge“ war bei 320 px rechts 8 px abgeschnitten
   (Karte 637, Tester Z10). */
@media (max-width: 349px) { .menue-liste:not(.menue-liste--klein) a { font-size: 26px; gap: 12px; } }
.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: var(--farbe-muted);
}
.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; }
/* Der Schleier hinter einer Überlagerung: EINE Regel für die Suche und für die Fenster von Buchung, Lehrgang und
   Gutschein (Karte 637, E2; bis dahin wortgleich hier und als `.buchung-backdrop` in buchung.css). Die zwei Namen
   bleiben, weil die Vorlagen sie tragen. Zwei Schleier sind bewusst andere und stehen bei ihrem Fenster: die
   Besuchermeldung (heller, blendet ein, liegt über allem) und der Kurs-Finder (Petrol mit Unschärfe, kursuebersicht.css).
   Wächter: website.tests_637.EineQuelleTests. */
.such-backdrop, .buchung-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: var(--farbe-muted); 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: var(--mono-zeile); letter-spacing: var(--mono-zeile-laufweite); 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: var(--farbe-flaeche); }
.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: var(--farbe-muted); }
.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: var(--farbe-creme);
  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: var(--farbe-muted);
  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: var(--mono-etikett); letter-spacing: var(--mono-etikett-laufweite);
  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: var(--farbe-tinte);
  line-height: 1.1; letter-spacing: -0.01em; max-width: 15ch;
}
.besuchermeldung-text { margin: 14px 0 0; font-size: var(--lesetext); line-height: var(--lesetext-zeile); color: var(--farbe-text-neben); 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: var(--farbe-weiss); 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: var(--farbe-teal); --bm-akzent-dunkel: var(--farbe-teal-dunkel); }
.besuchermeldung-panel--terrakotta { --bm-akzent: var(--farbe-terrakotta); --bm-akzent-dunkel: var(--farbe-terrakotta-dunkel); }
.besuchermeldung-panel--tief { --bm-akzent: var(--farbe-teal-tief); --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;
  /* 16 px, nicht weniger: Darunter zoomt Safari am iPhone beim Antippen (Karte 637, F6; Handbuch #formularschrift). */
  font-size: 16px;
}
.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; }
/* Das Kolophon (Karte 637, Teil C, Inhaber 14.11.2026): ein leiser Absatz unter den Rechtslinks, womit die Seite gesetzt
   ist und wo eine Hand war. Schrift und Farbe wie die Rubriken des Fußes (4,54 : 1 auf dem Fußgrund). */
.fuss-kolophon { margin: 20px 0 0; max-width: 68ch; font-size: 12px; line-height: 1.6; color: var(--farbe-footer-label); }
.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: var(--farbe-flaeche);
  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: var(--mono-marke);
  letter-spacing: var(--mono-marke-laufweite);
  text-transform: uppercase;
  color: var(--farbe-muted);
  background: var(--farbe-creme);
  padding: 4px 8px;
  border: 1px dashed var(--farbe-feldrand);
}

/* ---- 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: var(--mono-marke);
  letter-spacing: var(--mono-marke-laufweite);
  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; drei Stufen seit Karte 637, E4): EINE Quelle
   für den Titel einer Seite. Größe, Zeilenhöhe und Laufweite kommen aus den Tokens `--titel-…` in :root; ein Ort
   gibt dem Titel nur noch Abstand, Breite und Ausrichtung. Die Stufen:
   - SEITE (jedes h1 ohne Klasse): 38 px am Telefon, 50 px ab 600 px, Zeilenhöhe 1,1. Das ist die Grundregel für h1.
     Steht der Titel in einem Kopf mit zwei Spalten neben dem Bild (Kurs- und Dozent*innen-Seite, Karte 576), trägt
     er `.seitentitel-kopf`: ab 1024 px gleitet die Schrift von 38 px (bei rund 1100) bis 50 px (bei 1440), damit der
     Titel bei 1100 px nicht anders umbricht als bei 1440.
   - BÜHNE (`.seitentitel-kopf--gross`, Seiten mit eigenem Kopfbild): 62 px, Zeilenhöhe 1,05. So groß, dass der Anker
     der Startseite „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 (62 ab rund 1270).
     Wächter: website.tests (SatzendeTests), der die 8,95 gegen die gemessene Breite hält. Jede Bühne gleitet wie die
     Startseite: Auf jeder Breite ist der Titel überall gleich groß.
   - BLATT (`.seitentitel-kopf--blatt`, Rechtstexte und Werkseite): 32 px am Telefon, 40 px ab 600 px, Zeilenhöhe 1,12.
   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: var(--titel-telefon); }
@media (min-width: 600px) { .seitentitel-kopf { font-size: var(--titel-seite); } }
@media (min-width: 1024px) { .seitentitel-kopf { font-size: clamp(var(--titel-telefon), calc(3.38vw + 1.3px), var(--titel-seite)); } }
.seitentitel-kopf--gross { font-size: min(var(--titel-telefon), calc((100vw - 48px) / 8.95)); line-height: var(--titel-buehne-zeile); }
@media (min-width: 600px) { .seitentitel-kopf--gross { font-size: min(var(--titel-buehne), calc((100vw - 48px) / 8.95)); } }
@media (min-width: 1024px) { .seitentitel-kopf--gross { font-size: clamp(44px, calc((52.5vw - 112px) / 8.95), var(--titel-buehne)); } }
.seitentitel-kopf--blatt { font-size: var(--titel-blatt-telefon); line-height: var(--titel-blatt-zeile); }
@media (min-width: 600px) { .seitentitel-kopf--blatt { font-size: var(--titel-blatt); } }
.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: var(--farbe-teal-tief); border: 1px solid var(--farbe-teal-tief); 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); } }
/* ---- Kopf der Übersichtsseiten (Baustein, Karte 637, E2) ----
   Kicker, Titel, ein Satz darunter, wahlweise eine Knopfzeile: der Kopf jeder Seite ohne eigenes Kopfbild
   (Kursübersicht, Lehrgänge, Dozent*innen, Blog, FAQ, Kontakt, Kursberatung, Privatunterricht, Geld zurück, Warteliste,
   Ähnliche Kurse, Kurs-Finder, Gerade auf Instagram, 404 und 500, Umfrage, Vertrag und Mappe, Kurs vorschlagen,
   Startangaben). Bis dahin stand er in kursuebersicht.css, und 28 Vorlagen luden das ganze Blatt der Kursübersicht,
   viele nur für diesen Kopf; lehrgang.css trug eine Kopie ohne die Zeile mit 50 px, deshalb stand „Lehrgänge“ als
   einzige Übersichtsseite in 62 px (der Grundregel für h1 bis E4). Der Seitenrand kommt aus dem Token.
   Wächter: website.tests_637.EineQuelleTests. */
/* Polster (Karte 637, E6): oben die Stufe der Bänder; unten knapper (32 px, ab 1024 px 40 px), weil das Band darunter
   gleich mit seiner Linie anschließt. Das untere Maß ist das des Kopfs, benannt im Wächter `BandPolsterTests`. */
.uebersicht-hero { padding: var(--band-oben) var(--seiten-rand) 32px; }
.uebersicht-hero h1 { max-width: 16em; }   /* nur die Breite; die Schrift ist die Stufe „Seite“ (Grundregel für h1, Karte 637, E4) */
.uebersicht-byline { margin: 20px 0 0; font-size: var(--titelsatz); line-height: var(--titelsatz-zeile); color: var(--farbe-text-neben); max-width: 34em; }
@media (min-width: 1024px) { .uebersicht-hero { padding: var(--band-oben) var(--seiten-rand) 40px; } }
/* SPIELART MIT REGISTER (Blog, Werkbank 357, Fassung 16.10.2026): Die Register stehen IM Kopf auf
   seiner Unterlinie — deshalb ohne unteren Innenabstand. Nach den Breitenregeln, damit sie gilt. */
.uebersicht-hero.uebersicht-hero--mit-register { padding-bottom: 0; }
/* SPIELART MIT STRICH JE ZEILE (Ergebnis des Kurs-Finders: „Du bist eher der Typ …“): Bricht der Name um, bekommt
   jede Zeile ihren eigenen Tuschestrich (tusche.js); dann braucht der Titel etwas mehr Zeilenluft, damit der Strich
   der oberen Zeile nicht an der unteren klebt. Nur schmal: Auf großen Schirmen bleibt der Name einzeilig. Bis Karte
   637 (E2) in einem <style>-Block der Vorlage, dort ohne Spielart für jeden Kopf der Seite. */
@media (max-width: 700px) { .uebersicht-hero--strich-je-zeile h1 { line-height: 1.24; } }
/* Die Knopfzeile unter dem Kopf, auch mit zwei Knöpfen (Fehlerseiten, Fall 254): Abstand zwischen ihnen, auch wenn sie
   am Telefon untereinander rutschen. Bis Karte 633 (13.11.2026) als `.warteliste-aktion` (warteliste.css) und
   `.umfrage-aktion` (umfrage.css) zweimal da. */
.uebersicht-aktion { margin-top: 28px; display: flex; flex-wrap: wrap; gap: 12px; }

/* ---- 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`. */
/* Polster (Karte 637, E6): seitlich der Seitenrand; oben und unten das eigene, entschiedene Maß des Bausteins
   (40/64 px, ab 1024 px 48/72 px), nicht die Stufen der Bänder. Benannt im Wächter `BandPolsterTests`. */
.abschnitt { padding: 40px var(--seiten-rand) 64px; }
@media (min-width: 1024px) { .abschnitt { padding: 48px var(--seiten-rand) 72px; } }
/* `.abschnitt-kicker` steht seit Karte 637 (E2) in der einen Deklaration des Kickers (oben, „Der Kicker“). */
.abschnitt h2 { margin: 0 0 24px; }
.abschnitt-text p { margin: 0 0 22px; font-size: var(--lesetext); line-height: var(--lesetext-zeile); color: var(--farbe-text); 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: var(--kartentitel); line-height: var(--kartentitel-zeile); letter-spacing: 0; 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; }
/* Der Titel des Danks ist kein Seitentitel, auch wo er als h1 steht (Dank auf eigener Seite): ein Baustein, ein Bild,
   darum ohne die Laufweite der Stufen (Karte 637, E4). */
.danke-titel { margin: 0 0 10px; font-size: 24px; font-weight: 800; line-height: 1.25; letter-spacing: 0; }
.danke--seite .danke-titel { font-size: 30px; }
.danke-text p { margin: 0 0 12px; max-width: 40em; font-size: var(--lesetext); line-height: var(--lesetext-zeile); color: var(--farbe-text-neben); }
.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). */
/* Polster (Karte 637, E6): seitlich der Seitenrand; oben und unten das eigene Maß des Danks (Karte 632). */
.danke-seite { padding: 64px var(--seiten-rand) 48px; }
@media (min-width: 1024px) { .danke-seite { padding: 84px var(--seiten-rand) 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: var(--farbe-muted); 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: var(--kartentitel); }
.leitung-vorgestellt-seit {
  margin: 0; font-family: var(--schrift-mono); font-size: var(--mono-kicker); letter-spacing: var(--mono-kicker-laufweite); text-transform: uppercase;
  color: var(--farbe-muted);
  /* „Lehrgangsleitung“ ist ein Wort von 138 px; neben dem Porträt bleiben bei 320 px nur 106 px (Karte 637, B4). */
  overflow-wrap: break-word; -webkit-hyphens: auto; hyphens: auto;
}
.leitung-vorgestellt-text { grid-area: text; max-width: 34em; }
.leitung-vorgestellt-intro { margin: 0 0 12px; font-size: var(--titelsatz); line-height: var(--titelsatz-zeile); color: var(--farbe-text); }
.leitung-vorgestellt-vita { margin: 0 0 18px; font-size: var(--lesetext); line-height: var(--lesetext-zeile); color: var(--farbe-text-neben); }
.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: var(--farbe-weiss);
  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: var(--farbe-teal-tief);
  font-family: var(--schrift-mono);
  font-size: var(--mono-marke);
  letter-spacing: var(--mono-marke-laufweite);
  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: var(--mono-marke);
  letter-spacing: var(--mono-marke-laufweite);
  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: var(--mono-etikett);
  letter-spacing: var(--mono-etikett-laufweite);
  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: var(--mono-zeile); letter-spacing: var(--mono-zeile-laufweite); 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 { margin-bottom: 4px; }
.kurs-karte-inhalt h3 a { text-decoration: none; }
.kurs-dozent { color: var(--farbe-muted); margin-bottom: 12px; font-size: 14px; }
.kurs-anriss { color: var(--farbe-muted); 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 var(--farbe-linie-leise); 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. ---- */
/* Polster (Karte 637, E6): oben die Stufe; unten knapp wie ein Kopf (28 px, ab 760 px 32 px). Seitlich stehen ab
   760 px schon 56 px, nicht erst ab 1024 px wie beim Token: Das bleibt, bis die Umbruchstellen entschieden sind (S10). */
.rechtstext-kopf { padding: var(--band-oben) var(--seiten-rand) 28px; }
.rechtstext-kopf h1 { margin: 0; }   /* die Schrift ist die Stufe „Blatt“ (`.seitentitel-kopf--blatt`; bis Karte 637, E4 hier 34 und 46 px) */
.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: var(--schrift-mono); font-size: var(--mono-zeile); letter-spacing: var(--mono-zeile-laufweite); color: var(--farbe-muted); }
@media (min-width: 760px) {
  .rechtstext-kopf { padding: var(--band-oben) 56px 32px; }
}

/* Polster aus den Stufen (Karte 637, E6; bis dahin 40/64 px, ab 760 px 48/72 px). Seitlich ab 760 px 56 px, siehe Kopf. */
.rechtstext { padding: var(--band-oben) var(--seiten-rand) var(--band-unten); }
@media (min-width: 760px) { .rechtstext { padding: var(--band-oben) 56px var(--band-unten); } }
.rechtstext-inhalt { max-width: 760px; }
.rechtstext-inhalt :is(h2, h3) {
  font-family: var(--schrift-mono);
  font-size: var(--mono-kicker);
  font-weight: 400;
  letter-spacing: var(--mono-kicker-laufweite);
  text-transform: uppercase;
  color: var(--farbe-teal);
  margin: 0 0 10px;
}
.rechtstext-inhalt p { font-size: var(--lesetext); line-height: 1.7; color: var(--farbe-text); 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 var(--farbe-rand); 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: var(--titel-seite); }
  h2 { font-size: var(--bandtitel); }
}
@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 var(--farbe-footer); 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: var(--kartentitel-spalte); font-weight: var(--kartentitel-spalte-gewicht); line-height: var(--kartentitel-zeile); }
/* Der Text einer Spalte. Derselbe Text steht in den Leistungsfeldern des Gestaltungsauftrags (`.ga-leistung`, ein
   gerahmtes Raster statt der Strich-Spalte); bis Karte 637 (E2) dort wortgleich als `.ga-leistung p`. */
.nummern-spalte .spalte-text, .ga-leistung .spalte-text { margin: 0; font-size: 14px; line-height: 1.55; color: var(--farbe-muted); }
/* 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 var(--farbe-footer); 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: var(--farbe-muted); }

/* ---- 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 var(--farbe-footer);
  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; } }
/* ---- Druck (Karte 637, B6) ----
   Gedruckt wird der Inhalt, nicht die Bedienung: ohne Kopfzeile, Fuß, feste Leisten, Überlagerungen und Cookie-Hinweis,
   auf weißem Grund. Bis dahin druckte jede Seite „Suche“ und „Menü“, den dunklen Fuß mit dem Newsletter-Feld und auf
   Kursseiten die Leiste „Jetzt buchen“. Was beim Rollen einblendet, steht im Druck von Anfang an da.
   Wächter: website.tests.DruckOhneBedienungTests. */
@media print {
  .kopfzeile, .fusszeile, .cookie-hinweis, .mobile-bottom-bar, .lernpfad-leiste, .menue-overlay, .such-overlay,
  .buchung-overlay, .besuchermeldung-overlay, .halteknopf, .breadcrumb { display: none !important; }
  body { display: block; background: var(--farbe-weiss); padding-bottom: 0 !important; }
  .zf-reveal { opacity: 1 !important; transform: none !important; }
  .uebersicht-filter, .detail-sidebar, .faq-themen { position: static !important; }
  .rechtstext-inhalt a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 0.85em; overflow-wrap: anywhere; }
}
/* 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). Sontag unter 1280 px seit Karte 637 (B3) ebenfalls ohne negativen Rand rechts: Er machte die 404-Seite in jeder Breite 24 px breiter. 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 0 -40px auto; } }
@media (min-width: 1280px) {
  .seite-404:not(.seite-404--mit-kursen) { min-height: 720px; }
  /* 150 px über dem Kopf: Ausnahme vom Polster der Bänder (Karte 637, E6), die Zeichnung steht daneben. */
  .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 var(--farbe-feldrand);   /* 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: var(--farbe-teal-tief); border-color: var(--farbe-teal-tief); }
.blaetter-knopf--teal:hover { border-color: #152B2A; background: rgba(250, 249, 246, .35); }

/* ---- Bildergalerie (Baustein, Karte 637, E2; Skript website/js/lightbox.js) ----
   Antippen einer Kachel zeigt das volle Bild über der Seite: dunkler Grund, das Bild auf einem Blatt, darunter eine
   Leiste mit den Angaben links und dem Zähler („3 / 12“) rechts, oben rechts das Schließen-Kreuz, links und rechts die
   Blätter-Knöpfe des Hauses. Verwender: die Impressionen und die Werkproben der Kursseite, die Werkproben der
   Dozent*innen-Seite. Was sie unterscheidet, steht im Markup (`data-lightbox…`), nicht im Stil.
   Bis dahin zweimal gebaut, Block für Block wortgleich: `.werk-lightbox-*` in dozenten_detail.css und
   `.impression-lightbox-*` in kursdetail.css („Muster wie Dozenten-Werkproben“). Das Skript war schon seit 06.10.2026
   eines. In der Leiste stehen zwei Arten von Angaben: eine Zeile (`.lightbox-caption`, Kursseite) oder drei Stufen
   (`.lightbox-titel`, `-zuschreibung`, `-meta`: Titel, wer es gemacht hat, Technik und Maß; Dozent*innen-Seite).
   Wächter: website.tests_637.EineQuelleTests. */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 950;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px;
  background: rgba(20, 18, 15, 0.84);
  animation: lightboxGrund 0.2s ease;
}
.lightbox[hidden] { display: none; }
@keyframes lightboxGrund { from { opacity: 0; } to { opacity: 1; } }
.lightbox-schliessen {
  position: fixed;
  top: 22px; right: 26px; width: 44px; height: 44px;
  border: 1px solid rgba(255, 255, 255, 0.35);
  background: rgba(0, 0, 0, 0.25);
  color: var(--farbe-weiss);
  font-size: 26px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.lightbox-schliessen:hover { background: rgba(0, 0, 0, 0.55); }
/* Weiterschalten: die Blätter-Knöpfe des Hauses, 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; }
.lightbox-panel {
  display: flex;
  flex-direction: column;
  background: var(--farbe-creme);
  max-width: min(1000px, 90vw);
  max-height: 88vh;
  box-shadow: 0 30px 80px -20px rgba(0, 0, 0, 0.6);
  animation: lightboxBlatt 0.22s ease;
}
@keyframes lightboxBlatt { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.lightbox-bild { background: #0d1413; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.lightbox-bild img { display: block; max-width: 100%; max-height: 70vh; object-fit: contain; }
.lightbox-leiste {
  padding: 16px 22px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  border-top: 1px solid var(--farbe-rand);
}
.lightbox-caption { font-size: 15px; line-height: 1.35; color: var(--farbe-tinte); }
.lightbox-titel { font-size: 18px; font-weight: 800; line-height: 1.2; }
/* Die Zuschreibung („Name · Jahr") steht direkt unter dem Titel, wo man sie erwartet -- in Petrol,
   damit sie sich von der grauen Fußnote darunter abhebt. Zwei Stufen statt einer Zeile: Wer das
   Werk gemacht hat, ist etwas anderes als Technik, Maß und Reprofoto. */
.lightbox-zuschreibung {
  font-family: var(--schrift-mono);
  font-size: 13px;
  letter-spacing: 0.02em;
  color: var(--farbe-teal);
  margin-top: 5px;
}
.lightbox-meta {
  font-family: var(--schrift-mono);
  font-size: 12px;
  letter-spacing: 0.03em;
  color: var(--farbe-muted);
  margin-top: 4px;
}
.lightbox-pos { font-family: var(--schrift-mono); font-size: 12px; color: var(--farbe-muted); white-space: nowrap; }

/* ---- 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: var(--farbe-weiss); 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: var(--mono-etikett); letter-spacing: var(--mono-etikett-laufweite);
  text-transform: uppercase; color: var(--farbe-muted);
}
.stimme blockquote { margin: 0; font-weight: 500; color: var(--farbe-footer); text-wrap: pretty; }
.stimme-unterschrift {
  margin: 20px 0 0; display: flex; align-items: center; gap: 11px;
  font-size: 13px; line-height: 1.4; color: var(--farbe-muted);
}
.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. */
/* Polster (Karte 637, E6): seitlich der Seitenrand. Oben und unten so hoch wie eine Leiste (24 px, ab 1024 px 26/28 px),
   nicht wie ein Band: benannte Ausnahme im Wächter `BandPolsterTests`. */
.logoleiste {
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: 24px var(--seiten-rand);
  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: var(--mono-etikett);
  letter-spacing: var(--mono-etikett-laufweite);
  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 var(--seiten-rand) 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: var(--farbe-text); }
.wegtafel-fakt { margin: 10px 0 0; font-size: 13px; color: var(--farbe-muted); 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;
}