/* Seit 14.08.2026 trägt das ganze Portal die Farbwelt „Weiterbildungen Online" (Nachtblau und Gold), auch der eingeloggte Bereich. Die Werte sind identisch mit wbo.css; wbo.css bleibt als Override der öffentlichen Seiten bestehen (dort inzwischen weitgehend redundant, aber die .held-Regeln der Landingpages leben nur dort). Wer Farben ändert, ändert beide Dateien. */ :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 */ /* Historische Namen aus dem SkillSprinters-Design, auf die WBO-Welt umgelenkt. Selektoren unten und Inline-Styles in Templates nutzen weiter diese Namen. */ --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); --g900: #333333; --g700: #505050; --g500: #7A7A7A; --g300: #D1D5DB; --g100: #F3F4F6; --bg: #FAFBFC; --gruen: #16A34A; --rot: #DC2626; --radius: 12px; --schrift: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; } * { box-sizing: border-box; } body { margin: 0; font-family: var(--schrift); font-size: 15px; line-height: 1.55; color: var(--g900); background: var(--bg); } /* Verweisfarbe Nachtblau statt Dunkelgold (29.08.2026). Gold auf hellem Grund war die schlechteste Stelle der ganzen Landingpage: die Rufnummer des Vertriebspartners kam auf der Sandfläche auf 2,74 zu 1, auf Weiß auf 3,14, auf dem Seitengrund auf 3,03 (gemessen nach WCAG-Formel). Auf einem Handy im Freien verschwindet das, und die Zielgruppe ist altersgemischt. Mit Nachtblau sind es 12,73 bis 14,57. Das Gold bleibt die Marke des Kanals, es trägt weiter Linien, Chips, Haken und Flächen. Es trägt nur keinen Fließtext mehr. Erkennbar bleiben Verweise über die Unterstreichung, die der Browser von sich aus setzt, nicht über die Farbe allein. Auf dunklem Grund gilt das Gegenteil, dort ist Gold richtig und lesbar: `.fuss a` und `.kopf nav a` haben eigene Regeln mit höherer Spezifität und bleiben davon unberührt. */ a { color: var(--wbo-nachtblau); } /* --- Kopf --- */ .kopf { background: var(--dark); color: #fff; padding: 0 24px; display: flex; align-items: center; gap: 28px; flex-wrap: wrap; min-height: 60px; } .kopf .marke { font-weight: 700; font-size: 17px; letter-spacing: .2px; } .kopf .marke span { color: var(--wbo-gold-dunkel); } /* Eingeloggter Bereich: WBO-Logo in der dunklen Leiste (Fassung wbo-logo-dunkel.svg, die Nachtblau-Fassung wäre auf dem Dunkelgrund unleserlich). */ .kopf .marke.mit-logo { display: flex; align-items: center; gap: 12px; } /* Ein Drittel größer auf dem Rechner (Jens 29.08.2026): 30 mal 1,33 sind 40. Auf schmalen Schirmen bleibt es bei 30, dort ist die Kopfleiste ohnehin eng und die Marke steht neben der Navigation. Die Mindesthöhe der Leiste wächst deshalb mit, sonst schöbe das größere Bild die Navigation um. */ .kopf .marke.mit-logo img { height: 30px; display: block; } @media (min-width: 700px) { .kopf .marke.mit-logo img { height: 40px; } .kopf { min-height: 70px; } } .kopf nav { display: flex; gap: 4px; flex-wrap: wrap; margin-left: auto; } .kopf nav a { color: var(--wbo-creme); text-decoration: none; padding: 8px 12px; border-radius: 8px; font-size: 14px; white-space: nowrap; } .kopf nav a:hover { background: rgba(255,255,255,.1); color: #fff; } .kopf nav a.aktiv { background: var(--wbo-gold-dunkel); color: var(--wbo-nachtblau); font-weight: 600; } .kopf .ich { font-size: 13px; color: rgba(242, 236, 224, .72); } .traegerzeile { background: var(--blau-light); border-bottom: 1px solid var(--wbo-sand-linie); padding: 7px 24px; font-size: 12.5px; color: var(--g700); } /* Die AZAV-Pflichtangabe bleibt kontraststark lesbar, deshalb Nachtblau statt Goldschrift auf der hellen Fläche. */ .traegerzeile strong { color: var(--wbo-nachtblau); } .inhalt { max-width: 1180px; margin: 0 auto; padding: 26px 24px 70px; } h1 { font-size: 25px; margin: 0 0 6px; letter-spacing: -.3px; } h2 { font-size: 18px; margin: 30px 0 12px; } h3 { font-size: 15px; margin: 20px 0 8px; } .lead { color: var(--g700); margin: 0 0 22px; max-width: 760px; } /* --- Karten --- */ .karte { background: #fff; border: 1px solid var(--g300); border-radius: var(--radius); padding: 20px; margin-bottom: 18px; } .karte h2 { margin-top: 0; } .karte.hell { background: var(--orange-light); border-color: var(--wbo-sand-linie); } .karte.blau { background: var(--blau-light); border-color: var(--wbo-sand-linie); } .raster { display: grid; gap: 16px; } .raster.k2 { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); } .raster.k3 { grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); } .raster.k4 { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); } .kennzahl { background: #fff; border: 1px solid var(--g300); border-radius: var(--radius); padding: 16px 18px; } .kennzahl .wert { font-size: 26px; font-weight: 700; color: var(--dark); line-height: 1.2; } .kennzahl .label { font-size: 12.5px; color: var(--g500); text-transform: uppercase; letter-spacing: .4px; } .kennzahl.akzent { border-left: 4px solid var(--orange); } .kennzahl.gruen .wert { color: var(--gruen); } /* --- Tabellen --- */ table { width: 100%; border-collapse: collapse; font-size: 14px; } th { text-align: left; background: var(--g100); color: var(--g700); font-size: 12px; text-transform: uppercase; letter-spacing: .4px; padding: 9px 10px; border-bottom: 1px solid var(--g300); } td { padding: 10px; border-bottom: 1px solid var(--g100); vertical-align: top; } tr:last-child td { border-bottom: none; } tbody tr:hover { background: #FCFCFD; } td.zahl, th.zahl { text-align: right; white-space: nowrap; } .tabellenrahmen { background: #fff; border: 1px solid var(--g300); border-radius: var(--radius); overflow-x: auto; } /* --- Marken und Zustände --- */ .marke-chip, .zustand { display: inline-block; padding: 3px 9px; border-radius: 999px; font-size: 11.5px; font-weight: 600; white-space: nowrap; } .zustand.neu { background: var(--wbo-sand); color: var(--wbo-nachtblau); box-shadow: inset 0 0 0 1px var(--wbo-sand-linie); } .zustand.laufend { background: var(--blau-light); color: var(--blau-dark); } .zustand.gut { background: #DCFCE7; color: #166534; } .zustand.aus { background: var(--g100); color: var(--g700); } .zustand.rot { background: #FEE2E2; color: #991B1B; } .beispiel { background: #EDE9FE; color: #5B21B6; } .balken { height: 6px; background: var(--g100); border-radius: 999px; overflow: hidden; min-width: 90px; } .balken > div { height: 100%; background: var(--orange); } /* --- Formulare --- */ label { display: block; font-size: 13px; font-weight: 600; color: var(--g700); margin-bottom: 4px; } input[type=text], input[type=email], input[type=password], input[type=number], input[type=date], input[type=tel], select, textarea { width: 100%; padding: 9px 11px; border: 1px solid var(--g300); border-radius: 8px; font-size: 14.5px; font-family: inherit; background: #fff; } input:focus, select:focus, textarea:focus { outline: 2px solid var(--blau); outline-offset: 0; border-color: var(--blau); } textarea { min-height: 90px; resize: vertical; } .feld { margin-bottom: 14px; } .feldreihe { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); } .kasten-klein { max-width: 440px; } /* WBO-Logo über dem Anmeldeformular (helle Fläche, deshalb die Nachtblau-Fassung weiterbildungen-online-logo.svg). */ .anmeldelogo { display: block; width: 260px; max-width: 90%; height: auto; margin: 2px auto 20px; } .pruefbox { display: flex; gap: 9px; align-items: flex-start; margin-bottom: 14px; } .pruefbox input { margin-top: 3px; width: auto; } .pruefbox label { font-weight: 400; font-size: 14px; margin: 0; } .knopf { display: inline-block; background: var(--orange); color: #fff; border: none; padding: 10px 20px; border-radius: 10px; font-size: 14.5px; font-weight: 600; cursor: pointer; text-decoration: none; font-family: inherit; } .knopf:hover { background: var(--orange-dark); } .knopf.zweit { background: #fff; color: var(--g700); border: 1px solid var(--g300); } .knopf.zweit:hover { background: var(--g100); } /* Zweiter Knopf: Gold mit Nachtblau-Schrift, 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); } /* ⚠ Die Farbe gehört hier zwingend dazu (29.08.2026). `.klein` weiter unten in dieser Datei setzt `color: var(--g500)` und hat dieselbe Spezifität wie `.knopf`; weil es später steht, gewann es und färbte jeden kleinen Knopf grau. Gemessen auf der Landingpage: Knopf „Ansehen", rgb(122,122,122) auf Nachtblau, Kontrast 3,40 zu 1. Im Portal tragen 22 Stellen `class="knopf klein"`; 17 davon standen auf Nachtblau oder Rot und waren betroffen, die schlechteste mit 1,13 zu 1 der rote Knopf „Entfernen" unter /admin/partnerangebote. Die übrigen fünf tragen zusätzlich `.zweit` und blieben richtig. Aufgelöst wird das hier und nicht durch Umschreiben von `.klein`, weil `.klein` an vielen Stellen richtig ist. Die zweite Zeile ist die Gegenprobe zur ersten: `.knopf.zweit` steht über dieser Regel und würde von ihr überschrieben, ein heller Knopf bekäme weiße Schrift auf weißem Grund. Drei Klassen schlagen zwei, damit bleibt es bei der dunklen Schrift. Betrifft die beiden Kopfknöpfe beider Landingpages und die Konditionenknöpfe unter „Mein Team". */ .knopf.klein { padding: 6px 12px; font-size: 13px; border-radius: 8px; color: #fff; } .knopf.klein.zweit { color: var(--g700); } .knopf.rot { background: var(--rot); } /* --- Hinweise --- */ .hinweis { padding: 12px 15px; border-radius: 10px; margin-bottom: 14px; font-size: 14px; } .hinweis.ok { background: #DCFCE7; color: #14532D; border: 1px solid #86EFAC; } .hinweis.error { background: #FEE2E2; color: #7F1D1D; border: 1px solid #FCA5A5; } .hinweis.info { background: var(--blau-light); color: var(--wbo-nachtblau); border: 1px solid var(--wbo-sand-linie); } .hinweis.warn { background: #FEF3C7; color: #78350F; border: 1px solid #FDE68A; } .kopierfeld { display: flex; gap: 8px; align-items: center; } .kopierfeld input { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 13.5px; } /* --g700 statt --g500 (29.08.2026). #7A7A7A erreicht auf keinem der hellen Gründe des Portals das Soll von 4,5 zu 1: auf Weiß 4,29, auf dem Seitengrund 4,14, auf der Sandfläche 3,75 (gemessen). Mit #505050 sind es 8,06, 7,78 und 7,04, und das Grau bleibt sichtbar leichter als der Fließtext in #333333. Betrifft unter anderem die Kursbeschreibungen in der Produkttabelle, die Karte „Sie sind berufstätig?" und das Kleingedruckte. --g500 selbst bleibt unverändert, es trägt weiter Nichttext. */ .klein { font-size: 12.5px; color: var(--g700); } .mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; } .rechts { text-align: right; } .mitte { text-align: center; } .nowrap { white-space: nowrap; } /* Fuß: dunkle Fläche mit Goldlinie, Schrift Creme, der Träger in Gold. Die Trägerkennung steht hier und muss sichtbar bleiben (AZAV-Auflage). */ .fuss { background: var(--wbo-dunkel); border-top: 3px solid var(--wbo-gold); margin-top: 40px; padding: 18px 24px; font-size: 12.5px; color: #fff; text-align: center; } /* Alles im Fuß in Weiß (Jens 29.08.2026). Vorher trug der Fließtext Creme und Name wie Verweise Gold. Es gibt nichts hervorzuheben: Der Fuß nennt den Träger und führt zu Impressum und Datenschutz, und keine dieser Angaben ist wichtiger als die andere. Weiß auf der dunklen Fläche ergibt 17,9 zu 1. Die Verweise bleiben trotzdem als solche erkennbar, weil hier nirgends die Unterstreichung entfernt wird. Wer das ändert, nimmt ihnen das letzte Merkmal, an dem man sie noch von Fließtext unterscheidet. */ .fuss strong { color: #fff; } .fuss a { color: #fff; } .kachelliste { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); } .kachel { background: #fff; border: 1px solid var(--g300); border-radius: var(--radius); padding: 18px; display: flex; flex-direction: column; } .kachel h3 { margin-top: 0; } .kachel .fuellen { flex: 1; } @media (max-width: 640px) { .kopf { padding: 10px 16px; } .kopf nav { margin-left: 0; width: 100%; } .inhalt { padding: 18px 14px 50px; } } /* Fußnotenblock am Seitenende. Windelschmidt am 26.08.2026: das Kleingedruckte ist wichtig, gehört aber nicht in den Lesefluss, sondern nach unten und zum Aufklappen. Details/summary statt eigenem Javascript, damit der Text auch ohne Skripte und beim Drucken lesbar bleibt. */ .kleingedrucktes { border: 1px solid var(--g300); border-radius: 10px; padding: 10px 14px; background: #FBFAF8; } .kleingedrucktes > summary { cursor: pointer; font-size: 14px; padding: 2px 0; } .kleingedrucktes > summary::marker { color: var(--g500); } .kleingedrucktes p:last-child { margin-bottom: 0; } /* Gedruckt wird immer alles gezeigt, sonst fehlen die Pflichthinweise. ⚠ Repariert am 29.08.2026. Die Regel stand seit dem 26.08. hier und hat nie gewirkt. Zwei Fehler in vier Zeilen: 1. `display: block !important` auf die Kinder hebt ein geschlossenes
nicht auf. Der Browser versteckt dessen Inhalt nicht über `display`, sondern über das Pseudoelement `::details-content` mit `content-visibility: hidden`. Dagegen kommt keine `display`-Regel an, auch keine mit `!important`. 2. `display: none` auf das `summary` nahm zusätzlich die Überschrift des Blocks weg. Das ist genau die eine Zeile, die vorher noch gedruckt wurde. Gemessen am 29.08.2026 in Chromium an der ausgelieferten Seite /b/, geschlossenes
: am Bildschirm 4 Wörter und 47,7 Pixel, im Druck 0 Wörter und 22 Pixel. Die Pflichthinweise standen damit auf keinem einzigen Ausdruck. Nach der Reparatur im Druck 84 Wörter und 337,1 Pixel, der Bildschirm unverändert bei 4 Wörtern und 47,7 Pixeln. In Firefox am selben Tag gegengeprüft, weil `::details-content` jung ist: dasselbe Ergebnis, also keine Chromium-Eigenheit. Der Beleg ist ein echtes PDF und keine Rechnung im Baum: dieselbe Seite zweimal nach A4 gedruckt und mit `pdftotext` zurückgelesen. Mit der alten Fassung 455 Wörter, ohne die Überschrift des Blocks und ohne einen einzigen Satz daraus. Mit dieser Fassung 539 Wörter, Überschrift und Text vollständig, darunter der Satz „Die Angaben zu Dauer und Umfang beziehen sich auf die zugelassene Maßnahme". Beide Male drei Seiten. Dieselbe Ursache und dieselbe Reparatur trägt der Aufklappbaum der Landingpages, siehe den Druckabschnitt am Ende von wbo.css. */ @media print { .kleingedrucktes::details-content { content-visibility: visible !important; } }