/* Farbwelt „Weiterbildungen Online", Fassung Nachtblau und Gold (final 13.08.2026).
   Farbwerte und Logo-Paket: siehe README im Logo-Paket der Vertriebsmarke.

   Diese Datei laden NUR die öffentlichen, WBO-gebrandeten Seiten über das
   Include templates/public/_wbo_kopf.html, immer NACH portal.css:
   Landingpages /p/<code> und /b/<code>, Zugangsseite /zugang,
   Registrierungsseite /partner-werden samt Danke-Seite.
   Der interne Bereich (Träger, Netzwerk, Partner nach Anmeldung) lädt sie
   nicht. Er sieht trotzdem gleich aus: portal.css trägt seit dem 14.08.2026
   selbst die WBO-Palette. Der frühere Satz an dieser Stelle, der interne
   Bereich behalte „die SkillSprinters-Farben aus portal.css", stimmt seitdem
   nicht mehr und ist am 28.08.2026 bei der Markenprüfung des Kanals
   aufgefallen; gemessen ist in portal.css kein Farbwert der Trägermarke mehr
   enthalten. Was hier übrig bleibt, sind die Overrides der öffentlichen
   Seiten, vor allem die .held-Regeln der Landingpages. */

:root {
  /* WBO-Palette */
  --wbo-nachtblau: #0E2A47;      /* Primär: Headlines, Flächen, Buttons */
  --wbo-nachtblau-tief: #0A1F36; /* Hover auf Nachtblau */
  --wbo-gold: #C9A227;           /* Akzente, Linien */
  --wbo-dunkelgold: #B08D2F;     /* goldene Schrift auf hellem Grund */
  --wbo-sand: #F4EFE6;           /* helle Flächen */
  --wbo-sand-linie: #E5D4A3;     /* Linien auf und um Sandflächen */
  --wbo-dunkel: #0E1826;         /* dunkle Kopf- und Fußflächen */
  --wbo-creme: #F2ECE0;          /* Schrift auf dunklem Grund */
  --wbo-gold-dunkel: #D4AF37;    /* Gold auf dunklem Grund */

  /* Die Akzentvariablen aus portal.css auf die WBO-Welt umgelenkt. Alles,
     was var(--orange), var(--blau) und Co. benutzt, folgt automatisch. */
  --orange: var(--wbo-nachtblau);
  --orange-dark: var(--wbo-nachtblau-tief);
  --orange-light: var(--wbo-sand);
  --blau: var(--wbo-gold);
  --blau-dark: var(--wbo-dunkelgold);
  --blau-light: var(--wbo-sand);
  --dark: var(--wbo-dunkel);
}

/* Kopf: die dunkle Fläche trägt Gold statt Orange. */
.kopf .marke span { color: var(--wbo-gold-dunkel); }

/* Trägerzeile: die AZAV-Pflichtangabe bleibt kontraststark lesbar,
   deshalb Nachtblau statt Goldschrift auf der hellen Fläche. */
.traegerzeile { border-bottom-color: var(--wbo-sand-linie); }
.traegerzeile strong { color: var(--wbo-nachtblau); }

/* Sandflächen bekommen eine goldgetönte Linie statt der alten Pastellränder. */
.karte.hell { border-color: var(--wbo-sand-linie); }
.karte.blau { border-color: var(--wbo-sand-linie); }
.hinweis.info { color: var(--wbo-nachtblau); border-color: var(--wbo-sand-linie); }

/* Zweiter Knopf: Gold mit Nachtblau-Schrift statt Türkis mit Weiß,
   weil weiße Schrift auf Gold zu wenig Kontrast hat. */
.knopf.blau { background: var(--wbo-gold); color: var(--wbo-nachtblau); }
.knopf.blau:hover { background: var(--wbo-dunkelgold); }

/* Auf der dunklen Heldfläche wäre ein Nachtblau-Knopf unsichtbar: dort ist
   der erste Knopf Gold, der zweite eine Kontur in Creme und Gold. */
.held .knopf { background: var(--wbo-gold-dunkel); color: var(--wbo-nachtblau); }
.held .knopf:hover { background: var(--wbo-gold); }
.held .knopf.blau { background: transparent; color: var(--wbo-creme);
  box-shadow: inset 0 0 0 1px var(--wbo-gold-dunkel); }
.held .knopf.blau:hover { background: rgba(212, 175, 55, .16); }

/* Zustandschip „Zulassung läuft" in den Produkttabellen. */
.zustand.neu { background: var(--wbo-sand); color: var(--wbo-nachtblau);
  box-shadow: inset 0 0 0 1px var(--wbo-sand-linie); }

/* Fuß: dunkle Fläche mit Goldlinie, Schrift Creme, der Träger in Gold.
   Die Trägerkennung steht hier und muss sichtbar bleiben (AZAV-Auflage). */
/* Schrift im Fuß durchgehend weiß (Jens 29.08.2026), gleiche Begründung wie
   in portal.css: Im Fuß ist nichts hervorzuheben, weder der Trägername noch
   Impressum oder Datenschutz. Die goldene Kante oben bleibt, sie trennt den
   Fuß von der Seite und ist keine Schrift. */
.fuss { background: var(--wbo-dunkel); border-top: 3px solid var(--wbo-gold);
  color: #fff; }
.fuss strong { color: #fff; }
.fuss a { color: #fff; }

/* ==========================================================================
   Zugangsschwelle: das Schloss unter / und die Codeseite /zugang
   ==========================================================================
   Beide Seiten sind der erste Eindruck des Vertriebskanals und dürfen deshalb
   nicht nach dem Träger aussehen. Sie tragen die Marke der aufgerufenen
   Adresse, und welche das ist, entscheiden die Daten und nicht diese Datei:
   hier steht kein einziger Dateiname und kein Markenname.

   Alles hängt an der Körperklasse `schlossseite`. Ohne sie greift keine dieser
   Regeln, damit die übrigen öffentlichen Seiten unberührt bleiben.
   `info.html` bringt gleichnamige Klassen in einem eigenen Style-Block mit und
   lädt diese Datei gar nicht erst, deshalb kollidiert dort nichts.

   Die Flächen sind bewusst hell. Ein fremdes Netzwerklogo kommt als genau eine
   Datei, und die ist fast immer für hellen Grund gezeichnet; auf einer dunklen
   Leiste wäre sie im Zweifel unlesbar und das Schloss unbrauchbar. */

body.schlossseite {
  background: var(--wbo-sand);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
body.schlossseite > main { flex: 1 0 auto; }

/* Kopf: helle Fläche, Goldkante nach oben. Es ist dieselbe Linie, die den Fuß
   der übrigen Kanalseiten trägt, und sie bindet die Schwelle sichtbar an die
   Marke, ohne dass dafür eine Fläche oder ein Schriftzug nötig wäre. */
.schlossseite .schlosskopf {
  background: #fff;
  border-top: 3px solid var(--wbo-gold);
  border-bottom: 1px solid var(--wbo-sand-linie);
  padding: 22px 24px;
  text-align: center;
}
.schlossseite .schlosskopf img.logo {
  display: block;
  height: 42px;
  width: auto;
  max-width: min(280px, 72vw);
  margin: 0 auto;
}
/* Der Schriftzug ist der Rückfall, wenn die hinterlegte Logodatei fehlt. Er
   steht von Anfang an im Quelltext und wird erst sichtbar, wenn das Bild nicht
   lädt: ein kaputtes Bild wäre als erster Eindruck schlimmer als kein Bild. */
.schlossseite .schlosskopf .wortmarke { display: none; }
.schlossseite .schlosskopf .wortmarke.zeigen {
  display: block;
  font-weight: 700;
  font-size: 20px;
  letter-spacing: .2px;
  color: var(--wbo-nachtblau);
}

.schlossseite .inhalt { max-width: 780px; padding-top: 34px; }

/* Vorspann. Er sagt, worum es geht, bevor die Seite etwas verlangt, und
   entfällt auf Adressen mit `zugang_nackt`. */
.schlossseite .vorspann { max-width: 660px; margin: 0 auto; text-align: center; }
.schlossseite .vorspann h1 {
  margin: 0 0 12px;
  font-size: 30px;
  line-height: 1.22;
  letter-spacing: -.4px;
  color: var(--wbo-nachtblau);
}
.schlossseite .vorspann .lead {
  margin: 0 auto;
  max-width: 600px;
  font-size: 16px;
  color: var(--g700);
}
.schlossseite .punkte {
  list-style: none;
  padding: 0;
  margin: 28px auto 0;
  max-width: 660px;
  display: grid;
  /* Zwei feste Spalten statt einer automatischen Aufteilung: die vier Punkte
     ergeben so einen geschlossenen Block. Automatisch gesetzt fielen drei in
     die erste Zeile und einer blieb als Waise darunter stehen. */
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}
.schlossseite .punkte li {
  background: #fff;
  border: 1px solid var(--wbo-sand-linie);
  border-radius: 10px;
  padding: 15px 16px;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--g700);
  text-align: left;
}
.schlossseite .punkte li b {
  display: block;
  margin-bottom: 4px;
  font-size: 14.5px;
  color: var(--wbo-nachtblau);
}
/* Ein goldener Strich statt eines Aufzählungszeichens: er wiederholt die
   Kante des Kopfes und hält die vier Kacheln ohne Farbfläche zusammen. */
.schlossseite .punkte li b:before {
  content: "";
  display: block;
  width: 26px;
  height: 2px;
  margin-bottom: 9px;
  background: var(--wbo-gold);
}

/* Die Codekarte. Sie ist die einzige Stelle, an der die Seite etwas verlangt,
   und deshalb das schwerste Element der Seite. */
.schlossseite .schlosskarte {
  max-width: 460px;
  margin: 32px auto 0;
  padding: 26px 26px 28px;
  background: #fff;
  border: 1px solid var(--wbo-sand-linie);
  border-top: 3px solid var(--wbo-gold);
  border-radius: 14px;
  box-shadow: 0 14px 34px rgba(14, 42, 71, .10);
}
/* Ohne Vorspann steht die Karte allein. Dann rückt sie tiefer ins Bild, damit
   auf den ersten Blick klar ist, dass es hier nichts anderes zu tun gibt. */
.schlossseite .schlosskarte.nurschloss { margin-top: 74px; }
.schlossseite .schlosskarte h1,
.schlossseite .schlosskarte h2 {
  margin: 0 0 8px;
  font-size: 21px;
  text-align: center;
  color: var(--wbo-nachtblau);
}
.schlossseite .schlosskarte .lead {
  margin: 0 0 20px;
  font-size: 14.5px;
  text-align: center;
  color: var(--g700);
}
.schlossseite .schlosskarte label {
  text-align: center;
  font-size: 11.5px;
  letter-spacing: .6px;
  text-transform: uppercase;
  color: var(--g500);
}
/* Das Codefeld ist die Aufgabe der Seite: groß, mittig, mit gesperrter
   Schrift, weil ein Code Zeichen für Zeichen gelesen und abgetippt wird. */
.schlossseite #kennung,
.schlossseite #code {
  padding: 13px 14px;
  border: 1.5px solid var(--g300);
  border-radius: 10px;
  font-size: 20px;
  font-weight: 600;
  text-align: center;
  letter-spacing: .08em;
  color: var(--wbo-nachtblau);
}
.schlossseite #kennung::placeholder,
.schlossseite #code::placeholder {
  font-weight: 400;
  letter-spacing: .04em;
  color: #B4B4B4;
}
.schlossseite #kennung:focus,
.schlossseite #code:focus {
  border-color: var(--wbo-gold);
  outline: 3px solid rgba(201, 162, 39, .32);
  outline-offset: 0;
}
.schlossseite .schlosskarte .knopf {
  display: block;
  width: 100%;
  margin-top: 4px;
  padding: 13px 20px;
  border-radius: 10px;
  font-size: 15.5px;
}
.schlossseite .schlosskarte .klein { text-align: center; }
/* Ein Fehler an der Schwelle muss auffallen. Sonst tippt jemand denselben
   falschen Code ein zweites Mal und hält die Seite für kaputt. */
.schlossseite .hinweis.error {
  border-left: 4px solid var(--rot);
  font-weight: 500;
  text-align: left;
}

.schlossseite .ohnecode {
  max-width: 460px;
  margin: 20px auto 0;
  text-align: center;
  font-size: 13.5px;
  color: var(--g500);
}

/* Fuß: nur eine Haarlinie, keine dunkle Fläche. Was hier steht, sind
   Pflichtangaben und die Sachangabe zum Träger, kein Absender. */
.schlossseite .schlossfuss {
  margin-top: 36px;
  padding: 30px 20px 44px;
  border-top: 1px solid var(--wbo-sand-linie);
  text-align: center;
  font-size: 12.5px;
  line-height: 1.75;
  color: var(--g500);
}
.schlossseite .schlossfuss strong { font-weight: 600; color: var(--g700); }
.schlossseite .schlossfuss a { color: var(--g700); }
.schlossseite .schlossfuss a:hover { color: var(--wbo-nachtblau); }

@media (max-width: 640px) {
  .schlossseite .schlosskopf { padding: 16px; }
  .schlossseite .schlosskopf img.logo { height: 34px; }
  .schlossseite .inhalt { max-width: none; padding: 26px 14px 40px; }
  .schlossseite .vorspann h1 { font-size: 24px; }
  .schlossseite .punkte { grid-template-columns: 1fr; }
  .schlossseite .schlosskarte {
    margin-top: 24px;
    padding: 20px 18px 22px;
    border-radius: 12px;
  }
  .schlossseite .schlosskarte.nurschloss { margin-top: 36px; }
}

/* ==========================================================================
   Landingpages auf dem Handy (29.08.2026)
   ==========================================================================
   Alles hier hängt an der Körperklasse `landingpage`. Ohne sie greift keine
   dieser Regeln. Das ist kein Schmuck: Diese Datei laden auch das
   Zugangsschloss, die Bewerbungsseite und die Pflichtseiten, und
   `partner_werden.html` trägt dieselbe `.partnerzeile`. Ein ungebundener
   Selektor veränderte still auch jene Seiten.

   Der Anlass ist eine Messung, keine Vermutung. Sichtbare Höhe auf einem
   iPhone 14 mit Safari-Leiste: 664 Pixel. Die erste Handlungsaufforderung
   begann auf der Seite für Arbeitsuchende bei 708 Pixeln, auf einem
   Galaxy S9+ bei 815, auf der Seite für Unternehmen bei 906 und 1.039. Auf
   dem ersten Bildschirm stand also kein Knopf, dafür 218 Pixel Partnerzeile
   mit zwei Knöpfen für fremde Zielgruppen, ein Drittel der sichtbaren
   Fläche. */

/* Zwei Schalter für denselben Inhalt in zwei Fassungen. Voreingestellt ist
   die breite Fassung; was `nur-schmal` trägt, erscheint erst unter der
   Schwelle. Ein Browser ohne Media-Query-Auswertung sieht damit die Tabelle
   und nicht beide Fassungen übereinander. */
.landingpage .nur-schmal { display: none; }

/* Zur Kontrastfrage in der Produkttabelle steht hier bewusst nichts mehr.
   Die Beschreibungen tragen `.klein`, und `.klein` stand in portal.css auf
   `--g500`, also 4,29 zu 1 gegen ein Soll von 4,5. Gehoben wurde das am
   29.08.2026 an der Wurzel: `.klein` steht dort jetzt auf `--g700` und damit
   bei über 7 zu 1. Eine zweite Regel an dieser Stelle wäre derselbe Wert an
   zwei Orten und liefe beim nächsten Wechsel auseinander. Die Kartenfassung
   weiter unten benutzt `.klein` ohnehin nicht.

   Was hier NICHT hilft, ist eine Farbe im style-Attribut: Die schlägt jede
   Regel. Genau deshalb ist sie aus beiden Vorlagen gestrichen. */

/* Der zweite Weg im Heldbereich. Er führt seit dem 29.08.2026 ans Telefon
   des Vertriebspartners statt ein zweites Mal auf dasselbe Formular. Als
   Textverweis, nicht als Knopf: Zwei gleich aussehende Knöpfe mit demselben
   Ziel waren genau das Problem. Die 44 Pixel sind die Untergrenze für ein
   Tapziel. */
.landingpage .held .ruf {
  color: var(--wbo-creme);
  font-size: 15px;
  text-decoration: underline;
  text-underline-offset: 3px;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 2px;
}
.landingpage .held .ruf:hover { color: var(--wbo-gold-dunkel); }

/* Die beiden Kontaktwege des Vertriebspartners, zweimal auf der Seite.

   Gemessen am 29.08.2026 unter iPhone 14: In der Karte „Direkt sprechen"
   standen Rufnummer und Mailadresse 6,3 Pixel auseinander bei 23,25 Pixel
   Zeilenhöhe, in der Partnerzeile 0 Pixel. Eine Trefferfläche von 44 Pixeln
   hätte den jeweiligen Nachbarn um rund 21 Pixel überlappt, und weil der im
   Dokument spätere Verweis gewinnt, hätte ein Tipp auf die untere Hälfte der
   Rufnummer das Mailprogramm geöffnet. Deshalb nimmt `bedienbarkeit.css`
   `tel:` und `mailto:` im Fließtext aus, und deshalb steht die Lösung hier:
   In der Karte sind es jetzt Knöpfe, in der Partnerzeile bekommt jeder Weg
   auf schmalen Schirmen seine eigene Zeile. */
.landingpage .kontaktknoepfe {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
}
/* Eine lange Mailadresse darf die Karte nicht sprengen, die Rufnummer darf
   dafür nie umbrechen: Eine über zwei Zeilen gebrochene Nummer ist zweimal
   15 Pixel hoch und damit wieder kein Ziel. */
.landingpage .kontaktknoepfe .knopf { max-width: 100%; overflow-wrap: anywhere; }
.landingpage .kontaktknoepfe .knopf[href^="tel:"] { white-space: nowrap; }
.landingpage .partnerzeile .kontaktzeile .ruf a { white-space: nowrap; }

/* Der Einwandblock direkt hinter dem Heldbereich. Er trägt die beiden Sätze,
   die den Nullpreis und die Aussicht auf Arbeit einordnen, und muss deshalb
   ohne Klick lesbar sein. Die Sandfläche hebt ihn vom Fließtext ab, ohne ihn
   wie eine Werbebox aussehen zu lassen. */
.landingpage .einwand {
  background: var(--wbo-sand);
  border-bottom: 1px solid var(--wbo-sand-linie);
  max-width: none;
  padding-top: 24px;
  padding-bottom: 24px;
}
.landingpage .einwand > h2,
.landingpage .einwand > p { max-width: 1000px; margin-left: auto; margin-right: auto; }
.landingpage .einwand > h2 { margin-top: 0; }
.landingpage .einwand > p:last-child { margin-bottom: 0; }

/* Die Kartenfassung der Produkttabelle. Sichtbar wird sie erst unter der
   Schwelle, die Regel dafür steht weiter unten. */
.landingpage .kursliste { list-style: none; padding: 0; margin: 0; gap: 12px; }
.landingpage .kursliste li {
  background: #fff;
  border: 1px solid var(--g300);
  border-left: 3px solid var(--wbo-gold);
  border-radius: var(--radius);
  padding: 14px 16px;
}
.landingpage .kursliste h3 { margin: 0 0 4px; font-size: 16px; color: var(--wbo-nachtblau); }
.landingpage .kursliste .umfang {
  margin: 0 0 8px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--g700);
}
.landingpage .kursliste p { margin: 0; font-size: 14px; line-height: 1.5; }

/* Ein Formularfehler wird am betroffenen Feld sichtbar, nicht nur als Satz
   über dem Formular. `fehlerfelder` kommt aus `public_bp` und kennt zwei
   Werte: `ansprechpartner` und `kontakt`, wobei `kontakt` das Paar aus
   E-Mail und Telefon meint. Eines von beiden genügt, deshalb ist keines der
   beiden für sich genommen falsch und die Markierung sitzt an der Reihe. */
.landingpage .feld.fehlt input,
.landingpage .feldreihe.fehlt input { border-color: var(--rot); }
.landingpage .feld.fehlt input:focus,
.landingpage .feldreihe.fehlt input:focus { outline-color: var(--rot); }
/* #B91C1C statt var(--rot): Das hellere #DC2626 kommt auf Weiß nur auf
   4,53 zu 1 und liegt damit haarscharf am Soll. Hier sind es 6,54. */
.landingpage .feldfehler {
  margin: 4px 0 0;
  font-size: 13px;
  line-height: 1.4;
  color: #B91C1C;
}
/* Steht der Hinweis nicht IM Feld, sondern hinter dem Feldpaar aus E-Mail und
   Telefon, trägt das letzte Feld darüber schon seinen eigenen Abstand. Ohne
   diese Korrektur klaffte dort eine doppelte Lücke. Umgekehrt darf der
   negative Abstand nie für den Hinweis im Feld selbst gelten: Dort schob er
   den Satz in den unteren Rand des Eingabefeldes hinein. */
.landingpage .feldreihe + .feldfehler { margin: -6px 0 14px; }

/* Die klebende Handlungsleiste. Zwischen erster Aufforderung und Formular
   lagen 2.805 Pixel ohne eine einzige Gelegenheit zu handeln. Voreingestellt
   ist sie unsichtbar: ohne Javascript und auf breiten Schirmen gibt es sie
   nicht. */
.landingpage .klebeleiste { display: none; }

/* ==========================================================================
   Kursübersicht als Aufklappbaum (29.08.2026)
   ==========================================================================
   Zwei Ebenen aus <details> und <summary>: außen der Bereich, innen der
   einzelne Kurs. Jede Regel hängt an `.landingpage`, wie der ganze Abschnitt
   darüber. Ohne diese Bindung griffen die Regeln auch auf das Zugangsschloss,
   auf die Bewerbungsseite und auf die Pflichtseiten, und dort steht mit
   `.kleingedrucktes` bereits ein zweites <details> mit ganz anderer Aufgabe.

   Farben ausschließlich aus der Palette ganz oben. Hier wird keine erfunden.

   Zur Schwellenfrage, bevor sie jemand verschiebt: Diese Datei schaltet die
   Handy-Fassung bei 700 Pixeln, `bedienbarkeit.css` bei 640. Zwischen 641 und
   700 gilt also der Handy-Block hier, aber keine Regel aus
   `bedienbarkeit.css`, insbesondere nicht deren `min-height: 44px`. Für den
   Baum ist das folgenlos, weil die Innenabstände hier schon über 44 Pixel
   tragen. Gemessen am 29.08.2026 in Chromium an der ausgelieferten Seite
   /b/<code> mit sechs Maßnahmen in zwei Ebenen, bei 660 Pixel Breite: die
   NIEDRIGSTE der sieben Aufklappzeilen misst 77,8 Pixel, die höchste 127,7,
   und keine davon zieht eine Regel aus `bedienbarkeit.css`. Am Rechner bei
   1200 Pixeln, wo Name und Anzahl in einer Zeile stehen, sind es 45,6 bis
   67,5 Pixel. Wer eine der beiden Schwellen verschiebt oder an den
   Innenabständen dreht, misst diese Werte neu. */

/* ⚠ Die Breite, die hier zählt, ist die der SPALTE, nicht die des Fensters
   (29.08.2026, gemeldet von Jens: „auf der seite überlagert das formular links
   den bereich auf dem desktop").

   Gemessen an der ausgelieferten Seite /p/<code> bei 1440 Pixeln Fensterbreite:
   Der Zweispalter gibt jeder Spalte 468 Pixel. Die tiefste Kurszeile braucht
   aber 506 Pixel, nämlich 10 für das Aufklappzeichen, zweimal 12 Abstand,
   187 für das längste Wort des Kursnamens („Digitalisierungsmanager") und
   285 für den Umfang, der `white-space: nowrap` trägt. Weil die Spur dieses
   Rasters `auto` ist und `auto` nach unten die Mindestbreite des Inhalts
   annimmt, wuchs die Spur auf 567 Pixel und ragte 99 Pixel nach rechts aus der
   Spalte heraus, quer über die Formularkarte. Das Formular lag nur deshalb
   obenauf, weil es später im Dokument steht.

   Die Regeln, die genau das verhindern, gab es längst, sie hingen nur an
   `@media (max-width: 700px)`, also am Fenster. Auf dem Rechner ist das Fenster
   breit und die Spalte trotzdem schmal, deshalb griffen sie nie. Sie hängen
   jetzt zusätzlich an `@container`, siehe unten.

   `minmax(0, 1fr)` ist der Riegel darunter: Eine Spur dieses Rasters darf nie
   breiter werden als die Spalte, die sie trägt, auch dann nicht, wenn eines
   Tages ein längerer Kursname aus der Datenbank kommt. */
.landingpage .kursbaum {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 10px;
  container-type: inline-size;
  container-name: kursbaum;
}

/* Die Bereichszeile liegt auf der Sandfläche und trägt links die goldene
   Kante. Es ist dieselbe Linie, die Kopf, Fuß und Klebeleiste des Kanals
   tragen, und sie kommt hier ohne eine zweite Farbe aus. */
.landingpage .kursbaum .bereich {
  background: var(--wbo-sand);
  border: 1px solid var(--wbo-sand-linie);
  border-left: 3px solid var(--wbo-gold);
  border-radius: var(--radius);
}
/* Der Kurs ist eine eigene Karte in der Sandfläche. Weiß, weil damit die
   zweite Ebene ohne eine weitere Farbe erkennbar wird. */
.landingpage .kursbaum .kurs {
  background: #fff;
  border: 1px solid var(--g300);
  border-radius: 10px;
}
.landingpage .kursbaum .inhalt-bereich {
  display: grid;
  /* Derselbe Riegel wie beim äußeren Raster, aus demselben Grund. */
  grid-template-columns: minmax(0, 1fr);
  gap: 8px;
  padding: 0 14px 14px;
}

/* Die Aufklappzeile. Das `display: flex` hier ist die Ursache dafür, dass das
   Aufklappzeichen weiter unten selbst gezeichnet werden muss. */
.landingpage .kursbaum summary {
  display: flex;
  align-items: center;
  gap: 12px;
  cursor: pointer;
  list-style: none;
}
.landingpage .kursbaum .bereich > summary { padding: 14px 16px; }
.landingpage .kursbaum .kurs > summary { padding: 12px 14px; }
.landingpage .kursbaum summary:hover .titel { text-decoration: underline; }

/* Das Aufklappzeichen, selbst gezeichnet (29.08.2026, im Browser gemessen).

   `display: flex` auf einem <summary> nimmt ihm den Marker des Browsers:
   `list-style-type` steht danach zwar weiter auf `disclosure-closed`, gemessen
   wurde aber `::before { content: none }` und kein einziges gezeichnetes
   Zeichen. Ohne die Regel hier sähe niemand, dass die Zeile etwas aufklappt.

   Die beiden Ausblendregeln bleiben trotzdem stehen, sie kosten nichts und
   decken die Fälle ab, in denen der Marker doch gezeichnet würde:
   `list-style: none` allein blendet ihn in Safari nicht aus, dafür braucht es
   `::-webkit-details-marker`, und `::marker` ist der Weg für alles Übrige.
   Ohne sie stünden im Zweifel zwei Zeichen nebeneinander. */
.landingpage .kursbaum summary::-webkit-details-marker { display: none; }
.landingpage .kursbaum summary::marker { content: ""; }

.landingpage .kursbaum summary::before {
  content: "";
  flex: 0 0 auto;
  /* `* { box-sizing: border-box }` aus portal.css erfasst Pseudoelemente
     nicht. Ohne diese Zeile sind es 10 Pixel statt 8, und die Spalte des
     Zeichens rechnet sich unten falsch. Gemessen: 8 Pixel Inhalt plus zweimal
     2 Pixel Rahmen ergaben 10 Pixel Zeilenhöhe. */
  box-sizing: border-box;
  width: 10px;
  height: 10px;
  /* Der Winkel sitzt auf der ERSTEN Zeile des Namens und nicht in der Mitte
     der Zeile. Auf 390 Pixeln bricht ein Kursname über zwei Zeilen um; mit
     `center` stand das Zeichen dann auf halber Höhe zwischen ihnen und sah
     aus, als gehöre es nicht dazu (Sichtprobe 29.08.2026). Die 6 Pixel sind
     die halbe Differenz zwischen Zeilenhöhe und Zeichen: (22,1 minus 10) / 2
     bei der Bereichszeile, (21,6 minus 10) / 2 bei der Kurszeile. */
  align-self: flex-start;
  margin-top: 6px;
  border-right: 2px solid var(--wbo-nachtblau);
  border-bottom: 2px solid var(--wbo-nachtblau);
  /* Zu: der Winkel zeigt nach rechts. */
  transform: rotate(-45deg);
  transition: transform .15s ease-out;
}
/* Offen: er zeigt nach unten, auf den Inhalt, den er freigegeben hat. */
.landingpage .kursbaum details[open] > summary::before { transform: rotate(45deg); }

/* Die Überschriften stehen in der Aufklappzeile und dürfen deshalb keine
   eigenen Abstände mitbringen; portal.css gibt h3 und h4 sonst 20 Pixel nach
   oben und 8 nach unten, und die Zeile wäre dreißig Pixel zu hoch. */
/* `flex: 1 1 0` und nicht das voreingestellte `0 1 auto`: Beim Umbruch auf
   schmalen Schirmen rechnet der Browser mit der Wunschbreite eines
   Flex-Elements, und die ist bei `auto` die Breite des ungebrochenen Textes.
   Ein langer Kursname passte damit nie neben das Aufklappzeichen, also rutschte
   er in eine eigene Zeile und das Zeichen stand allein ÜBER dem Namen.
   Gemessen am 29.08.2026 bei 390 Pixeln: Zeile 126,4 Pixel hoch, der Name
   begann 22 Pixel unter dem Zeichen. Mit der Wunschbreite 0 bleibt der Name
   neben dem Zeichen und bricht in sich um. */
/* `min-width: 0` und `overflow-wrap: anywhere` seit dem 29.08.2026: Ohne sie
   ist die Mindestbreite eines Flex-Elements die Breite seines längsten Wortes.
   Gemessen 187 Pixel für „Digitalisierungsmanager"; ein längerer Name aus der
   Datenbank schöbe die Zeile erneut aus der 468 Pixel breiten Spalte heraus.
   `anywhere` und nicht `break-word`, weil nur `anywhere` auch die berechnete
   Mindestbreite senkt und damit genau die Ursache trifft. Im Normalfall wird
   nie im Wort gebrochen: Nach dem Umbruch des Umfangs stehen dem Namen 384
   Pixel zur Verfügung, gemessen am 29.08.2026. */
.landingpage .kursbaum .titel {
  flex: 1 1 0;
  min-width: 0;
  overflow-wrap: anywhere;
  margin: 0;
  color: var(--wbo-nachtblau);
}
.landingpage .kursbaum .bereich > summary .titel { font-size: 17px; line-height: 1.3; }
.landingpage .kursbaum .kurs > summary .titel { font-size: 16px; line-height: 1.35; }
/* Der Zustandschip steht IM Titel. Die eigene Zeilenhöhe hält ihn flacher als
   die Titelzeile, sonst wächst die Zeile um den Chip statt um die Schrift.
   Seine Farben stehen weiter oben bei `.zustand.neu`. */
.landingpage .kursbaum .titel .zustand {
  margin-left: 8px;
  vertical-align: middle;
  line-height: 1.25;
}

/* Anzahl und Umfang stehen rechts und bleiben Beiwerk: kleiner, aber in
   --g700. Selbst nachgerechnet nach der WCAG-Formel: #505050 kommt auf der
   Sandfläche auf 7,04 zu 1 und auf Weiß auf 8,06. --g500 wäre auf Sand 3,75
   und damit unter dem Soll von 4,5 für normalen Text, genau der Fehler, den
   portal.css am 29.08.2026 abgelegt hat. */
.landingpage .kursbaum .zahl,
.landingpage .kursbaum .umfang {
  flex: 0 0 auto;
  margin-left: auto;
  font-size: 13px;
  line-height: 1.4;
  font-weight: 600;
  color: var(--g700);
  white-space: nowrap;
}

/* Der Kurstext rückt um die Spalte des Aufklappzeichens ein, also um 10 Pixel
   Zeichen plus 12 Pixel Abstand, und steht damit unter dem Kursnamen statt
   unter dem Zeichen. Auf schmalen Schirmen fällt die Einrückung wieder weg,
   siehe den Handy-Block. */
.landingpage .kursbaum .inhalt-kurs { padding: 0 14px 14px 36px; }
.landingpage .kursbaum .inhalt-kurs p { margin: 0 0 8px; font-size: 14px; line-height: 1.55; }
.landingpage .kursbaum .inhalt-kurs p:last-child { margin-bottom: 0; }
/* Die zweite Zeitform ist eine Fußnote zum Kurs und kein zweiter Absatz. */
.landingpage .kursbaum .variante {
  border-left: 2px solid var(--wbo-sand-linie);
  padding-left: 10px;
  font-size: 13.5px;
  color: var(--g700);
}

/* ==========================================================================
   Der Umfang bricht nach der Breite der Spalte um (29.08.2026)
   ==========================================================================
   Das ist die Reparatur der oben beschriebenen Überlagerung. Die Zeile eines
   Kurses trägt links den Namen und rechts den Umfang, und der Umfang darf
   nicht umbrechen, weil „Vollzeit · 16 Wochen · 33,75 Stunden je Woche" sonst
   mitten in einer Zahl bricht. Gemessen braucht er 285 Pixel, der Name
   mindestens 187, zusammen mit Zeichen, Abständen und Innenabständen 506.
   Die Spalte hat 468. Also gehört der Umfang unter den Namen.

   `@container` und nicht `@media`: Gefragt wird die Breite des Baums, also die
   der Spalte, in der er steht. Genau diese Verwechslung war der Fehler. Der
   Baum ist dafür oben zum Behälter erklärt.

   Die Schwelle 700 ist die Breite, unterhalb derer die Zeile nicht mehr sicher
   auf eine Zeile passt, mit Reserve für längere Angaben aus der Datenbank
   (gerechnet nötig sind 566, gemessene Spaltenbreiten auf dem Rechner 418 bis
   468). Sie trifft damit heute jede Breite dieser Seiten und ist trotzdem als
   Bedingung richtig formuliert: Wird der Zweispalter eines Tages breiter,
   rückt der Umfang von selbst wieder neben den Namen.

   Die Anzahl im Bereichskopf bleibt bewusst NICHT hier. Sie ist kurz
   (gemessen 112 Pixel für „4 Weiterbildungen", Zeile insgesamt 314 von 432
   verfügbaren) und steht auf dem Rechner weiter rechts in derselben Zeile.
   Für das Handy regelt sie der Block bei 700 Pixeln Fensterbreite weiter
   unten, unverändert. */
@container kursbaum (max-width: 700px) {
  .landingpage .kursbaum .kurs > summary { flex-wrap: wrap; }
  .landingpage .kursbaum summary .umfang {
    flex-basis: 100%;
    /* 22 Pixel sind die Spalte des Aufklappzeichens, 10 plus 12 Abstand.
       Damit steht der Umfang unter dem Namen und nicht unter dem Zeichen. */
    margin-left: 22px;
    margin-top: 2px;
    white-space: normal;
  }
}

/* Der Fokusrahmen (29.08.2026).

   Vorher gab es in portal.css, wbo.css und bedienbarkeit.css zusammen genau
   eine Fokusregel, und die galt nur Eingabefeldern: `input:focus` mit
   `outline: 2px solid var(--blau)`, also Gold. Selbst nachgerechnet nach der
   WCAG-Formel, Soll 3,0 zu 1 für Bedienelemente nach 1.4.11: Gold #C9A227
   kommt auf Weiß auf 2,42 zu 1, auf der Sandfläche auf 2,11 und auf dem
   Seitengrund auf 2,33, verfehlt das Soll also auf jedem Grund dieser Seite.
   Nachtblau #0E2A47 liegt bei 14,57 auf Weiß, 12,73 auf Sand und 14,07 auf
   dem Seitengrund. Im Browser gemessen wurde rgb(14, 42, 71) bei 3 Pixeln.

   `:focus-visible` und nicht `:focus`: Ein Mausklick auf die Zeile soll keinen
   Rahmen hinterlassen, eine Fahrt mit der Tabulatortaste muss ihn zeigen.
   Der Radius greift nur hier, die Zeile selbst hat keinen. */
.landingpage .kursbaum summary:focus-visible {
  outline: 3px solid var(--wbo-nachtblau);
  outline-offset: 2px;
  border-radius: 8px;
}

@media (max-width: 700px) {
  /* Die Partnerzeile behält, was der Kern des Kanals ist, nämlich die
     Kontaktwege des Vertriebspartners. Die beiden Knöpfe für fremde
     Zielgruppen entfallen hier und stehen dafür im Fuß. */
  .landingpage .kopfknoepfe { display: none; }
  .landingpage .partnerzeile { padding: 8px 16px; line-height: 1.45; }
  /* Rufnummer und Mailadresse je auf eine eigene Zeile, jede mit ihren
     44 Pixeln. Nebeneinander lagen sie 0 Pixel auseinander, und die größere
     Fläche der einen fing die Tipps der anderen ab. Der Mittelpunkt zwischen
     beiden entfällt hier, er trennt nur in der einzeiligen Fassung. */
  .landingpage .partnerzeile .kontaktzeile .ruf,
  .landingpage .partnerzeile .kontaktzeile .post { display: block; }
  .landingpage .partnerzeile .kontaktzeile .trenner { display: none; }
  /* Die Anrede kostet auf dem Handy eine eigene Zeile und sagt nichts, was
     „Telefon" und eine Mailadresse nicht selbst sagen. Zwei treffbare
     Kontaktwege brauchen 92 Pixel statt der früheren 35; diese Zeile ist der
     Platz, mit dem sie bezahlt werden. Am Rechner bleibt sie stehen. */
  .landingpage .partnerzeile .kontaktzeile .anrede { display: none; }
  .landingpage .partnerzeile .kontaktzeile a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }
  /* Vier Pixel Luft zwischen den beiden Flächen. Ohne sie grenzen sie exakt
     aneinander, und ein Tipp einen Pixel neben der Grenze öffnet den
     Nachbarn. Überlappen dürfen sie ohnehin nie. */
  .landingpage .partnerzeile .kontaktzeile .ruf { margin-bottom: 4px; }
  /* Ohne hinterlegte Kontaktwege bliebe hier ein leerer Streifen stehen, denn
     die Knöpfe daneben sind auf dem Handy ohnehin weg. Die Klasse setzt die
     Vorlage, nicht diese Datei: Ob etwas drinsteht, weiß nur sie. */
  .landingpage .partnerzeile.leer { display: none; }

  /* Der Heldbereich rückt zusammen. Jede Zeile, die hier wegfällt, hebt den
     Knopf um ihre Höhe. Die Werte sind gegen die Seite für Unternehmen
     gerechnet, sie ist die längere von beiden: Ihre Überschrift läuft über
     drei Zeilen und der Absatz nennt Artikel 4 der KI-Verordnung im Wortlaut,
     den die Hausregeln verlangen. Gekürzt wird deshalb am Satzbild und nicht
     am Satz. Unter 15,5 Pixel geht die Schrift nicht, die Zielgruppe ist
     altersgemischt. */
  .landingpage .held { padding: 20px 18px 18px; }
  .landingpage .held h1 { font-size: 24px; margin-bottom: 9px; }
  .landingpage .held p { font-size: 15.5px; line-height: 1.45; margin-bottom: 12px; }
  .landingpage .held .chips { margin-bottom: 0; }
  .landingpage .held .chips span { padding: 4px 11px; font-size: 12.5px; margin: 0 6px 6px 0; }
  /* Vier Merkmale ergaben auf 390 Pixel Breite vier Zeilen, und die vierte
     wurde vom Rand abgeschnitten. Zwei sagen auf dem ersten Bildschirm
     dasselbe. */
  .landingpage .held .chips span:nth-child(n+3) { display: none; }
  .landingpage .held .knoepfe { margin-top: 16px; gap: 6px 14px; }
  .landingpage .held .knopf { width: 100%; text-align: center; padding: 13px 20px; }

  /* Tabelle raus, Karten rein. */
  .landingpage .nur-breit { display: none; }
  .landingpage .nur-schmal { display: inline; }
  .landingpage ul.kursliste.nur-schmal { display: grid; }

  .landingpage .einwand { padding-left: 18px; padding-right: 18px; }
  .landingpage .abschnitt { padding: 24px 18px; }

  .landingpage .klebeleiste {
    display: block;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 40;
    padding: 9px 14px calc(9px + env(safe-area-inset-bottom, 0px));
    background: #fff;
    border-top: 3px solid var(--wbo-gold);
    box-shadow: 0 -8px 22px rgba(14, 42, 71, .16);
    /* Sie fährt aus dem Bild, solange sie nicht gebraucht wird. `display`
       bleibt dabei unangetastet, sonst gibt es keinen Übergang. */
    transform: translateY(110%);
    transition: transform .18s ease-out;
  }
  .landingpage .klebeleiste.zeigen { transform: translateY(0); }
  .landingpage .klebeleiste p {
    margin: 0 0 6px;
    font-size: 13px;
    line-height: 1.35;
    color: var(--g700);
    text-align: center;
  }
  .landingpage .klebeleiste .knopf {
    display: block;
    width: 100%;
    text-align: center;
    min-height: 48px;
    padding: 13px 20px;
  }
  /* Solange die Leiste steht, endet die Seite höher, sonst verdeckt sie den
     Fuß mit der Trägerangabe. */
  .landingpage.mit-klebeleiste { padding-bottom: 96px; }

  /* Der Aufklappbaum auf schmalen Schirmen. Gemessen am 29.08.2026 bei
     390 Pixel Breite: Die Anzahl rechts nahm dem Bereichsnamen so viel Platz,
     dass er auf drei Zeilen umbrach. Sie gehört deshalb unter den Namen.

     `flex-wrap` und nicht `flex-direction: column`: Bei einer Spalte stünde
     auch das Aufklappzeichen über dem Namen statt daneben. Damit das beim
     Umbruch nicht doch passiert, trägt `.titel` weiter oben `flex: 1 1 0`,
     die Begründung steht dort.

     Die 22 Pixel sind die Spalte des Zeichens, 10 Pixel Zeichen plus 12 Pixel
     Abstand. Damit steht die Anzahl unter dem Namen und nicht unter dem
     Zeichen.

     ⚠ Hier steht seit dem 29.08.2026 nur noch die ANZAHL im Bereichskopf.
     Der Umfang der Kurszeile brauchte dieselbe Behandlung (gemessen blieben
     dem Kursnamen neben „Vollzeit · 16 Wochen" nur 132 Pixel, weniger als ein
     Wort), er hängt dafür aber an der Behälterabfrage weiter oben. Grund: Er
     wird auch auf dem Rechner gebraucht, wo das Fenster breit und die Spalte
     trotzdem schmal ist. Auf dem Handy greift die Abfrage genauso, die
     Behälterbreite ist dort 354 Pixel bei 390 Pixeln Fensterbreite. Die
     Wirkung auf schmalen Schirmen ist damit unverändert, nachgemessen am
     29.08.2026 an beiden Seiten. */
  .landingpage .kursbaum .bereich > summary { flex-wrap: wrap; }
  .landingpage .kursbaum summary .zahl {
    flex-basis: 100%;
    margin-left: 22px;
    margin-top: 2px;
    /* Die Werte kommen aus der Datenbank und dürfen in einer eigenen Zeile
       umbrechen, statt die Karte zu sprengen. */
    white-space: normal;
  }
  /* Auf 390 Pixel ist die Einrückung des Kurstextes bares Geld. */
  .landingpage .kursbaum .inhalt-kurs { padding-left: 14px; }
}

/* ==========================================================================
   Drucken (29.08.2026)
   ==========================================================================
   Ohne diese Regel druckt der Aufklappbaum leer: Was zugeklappt ist, steht
   nicht auf dem Papier, und das ist bei einer Kursübersicht der ganze Inhalt.

   `display: block !important` auf die Kinder wirkt NICHT. Der Browser
   versteckt den Inhalt eines geschlossenen <details> nicht über `display`,
   sondern über das Pseudoelement `::details-content` mit
   `content-visibility: hidden`, und dagegen kommt keine `display`-Regel an.
   Gegenprobe am 29.08.2026 in Chromium, dieselbe Seite, nur diese eine Zeile
   ausgetauscht: Mit `display: block !important` blieb der Baum im Druck bei
   231,7 Pixeln und 22 Wörtern, also exakt beim Bildschirmstand. Mit
   `content-visibility` sind es 451,8 Pixel und 71 Wörter.

   Zweiter Browser als Gegenprobe, weil `::details-content` jung ist: Firefox
   kommt am selben Tag auf 452,2 Pixel und dieselben 71 Wörter. Die Regel ist
   also keine Chromium-Eigenheit.

   An der ausgelieferten Seite mit sechs Maßnahmen, alle sechs Kurse
   zugeklappt: am Bildschirm 478,8 Pixel und 77 Wörter, im Druck 1.083,3
   Pixel und 269 Wörter. Im wirklich erzeugten PDF stehen die
   Kursbeschreibungen.

   Derselbe Defekt lag bis zum 29.08.2026 in portal.css in der Druckregel für
   `.kleingedrucktes`. Er ist dort im selben Zug repariert, die Begründung
   steht daneben. */
@media print {
  .landingpage .kursbaum details::details-content {
    content-visibility: visible !important;
  }
  /* Auf Papier klappt nichts auf. Das Winkelzeichen wäre dort ein Fleck ohne
     Aussage, seine Drehung sagt gedruckt nichts mehr. */
  .landingpage .kursbaum summary::before { display: none; }
}

/* Wer im Betriebssystem weniger Bewegung eingestellt hat, bekommt den Wechsel
   des Aufklappzeichens ohne Übergang. Die Drehung selbst bleibt, sie ist die
   Information; nur der Weg dorthin wird nicht mehr animiert. */
@media (prefers-reduced-motion: reduce) {
  .landingpage .kursbaum summary::before { transition: none; }
}