/* ============================================================================= Thema next learning ----------------------------------------------------------------------------- Angelegt am 22.09.2026 für den Hub der next learning GmbH. Achter Hub nach tkohns, WAXTUM500, Simplex, Hochler, Vije und Einmal erklärt. ES KOMMT NACH `hub.css` UND ÜBERSCHREIBT NUR, WAS ES NENNT. Wie die Themen davor: ein Farb- und Schriftwechsel, kein zweites Regelwerk. DIE FARBEN SIND AM 22.09.2026 AUF next-learning.de GEMESSEN und nicht aus dem CD-Blatt abgeschrieben. Beides deckt sich bei den Farben, bei der Schrift nicht: * `#078298` ist das helle Petrol. Auf der Website trägt es jeden Knopf, in 33 berechneten Stilen. Es steht im CD-Blatt und auf dem Bildschirm, also ist es gesichert. Hier trägt es die HANDLUNG: Knöpfe, Fortschritt, aktive Zeilen, Verweise. * `#296c7a` ist das dunkle Petrol. Auf der Website ist es die Fläche des Kopfbereichs, `section.held.dunkel`. Hier ist es der RAHMEN, also vor allem die Kopfleiste. Damit sieht der Hub oben aus wie die Website oben. * `#040922` ist das Blauschwarz des Fließtextes, mit 174 Vorkommen der häufigste Farbwert der ganzen Seite. Hier ist es `--text` und die Farbe der Überschriften. DIE ÜBERSCHRIFTEN STEHEN NICHT IN DER MARKENFARBE, anders als bei Hochler. Auf next-learning.de sind die Überschriften Blauschwarz, die Farbe steckt in Flächen und Knöpfen. Der Wiedererkennungswert liegt dort nicht in der Farbe der Zeile, sondern in ihrer Schrift, und die ist schmal. Wer hier Petrol einsetzte, baute eine Seite, die es so nicht gibt. DIE SCHRIFT IST SAIRA UND NICHT SOURCE SANS. Das CD-Blatt „Vorläufige Hinweise zu Farbe und Schrift" nennt Source Sans für Texte. Auf der Website läuft seit Langem Saira, sie liefert die Schnitte sogar selbst aus, unter `/nl/schriften/`. **Was läuft, gilt.** Das Blatt heißt nicht umsonst vorläufig, und es steht ohne Datum da. DREI DATEIEN, ZWEI HERKÜNFTE: * `saira-latin.woff2` ist die veränderliche Fassung von Google Fonts, ein Schnitt von 100 bis 900. Die Website hat nur 400 danebenliegen und lässt den Browser fetten; im Hub steht an hundert Stellen `font-weight: 600`, und eine gerechnete Fettung sieht dort nach gerechneter Fettung aus. * `sairacondensed-latin-600.woff2` und `-700` kommen von next-learning.de selbst. Sie sind die Schnitte, die dort die Überschriften tragen. Geladen wird zur Laufzeit von niemandem: die drei Dateien liegen neben dem Hub. Ein Lernender soll seine Adresse nicht an einen Dritten schicken müssen, nur weil er eine Überschrift liest. ========================================================================== */ @font-face { font-family: "Saira"; font-style: normal; font-weight: 100 900; font-display: swap; src: url("/saira-latin.woff2") format("woff2"); } @font-face { font-family: "Saira Condensed"; font-style: normal; font-weight: 600; font-display: swap; src: url("/sairacondensed-latin-600.woff2") format("woff2"); } @font-face { font-family: "Saira Condensed"; font-style: normal; font-weight: 700; font-display: swap; src: url("/sairacondensed-latin-700.woff2") format("woff2"); } :root { /* Die Marke, mit der Herkunft im Namen. */ --nl-petrol: #078298; /* die Knöpfe auf next-learning.de */ --nl-petrol-tief: #296C7A; /* die Fläche des Kopfbereichs */ --nl-nacht: #040922; /* der Fließtext, häufigster Wert der Seite */ /* Die Rollen im Hub. `--akzent` und `--navy` sind im Fundament zwei Töne für dieselbe Sache, Handlung; beide bekommen das helle Petrol. `--navy-tief` trägt die Kopfleiste und bekommt deshalb den Ton, der auf der Website oben steht. */ --akzent: var(--nl-petrol); --navy: var(--nl-petrol); --navy-tief: var(--nl-petrol-tief); --karmesin: var(--nl-petrol-tief); /* Die Flächen. Die Werte sind die hellen Petroltöne von next-learning.de: `#F2F7F8` sind dort die abgesetzten Abschnitte, `#E2EFF1` die Kästen darin, `#DCE6E8` die Linien. Das Fundament hat an dieser Stelle einen Blaustich, der neben Petrol als zweite Farbe gelesen wird. **Die Reihenfolge ist die des Fundaments: `--flaeche` ist die hellste der drei, dann `--sand`, dann `--sand-tief`.** Die erste Fassung hatte sie umgedreht und `--flaeche` den kräftigsten Ton gegeben. Das ist der Hintergrund des ganzen Rumpfes, und ein satter Petrolton auf dieser Fläche drückt jede leise Zeile darauf unter das Lesbare. */ --flaeche: #F2F7F8; --sand: #EAF2F4; --sand-tief: #E2EFF1; --linie: #DCE6E8; --text: var(--nl-nacht); --leise: #4A5560; /* **`--leise-2` ist dunkler als der Grauton der Website, mit Absicht.** Dort steht `#9AA3AD`, und auf Weiß sind das 2,56 zu 1. Die Website trägt diesen Ton in ruhigen Zeilen mit 17 Pixeln; im Hub tragen ihn die Gruppentitel der Seitenleiste mit 10 Pixeln, die Mailadresse im Fuß und „Leiste einklappen". Am 22.09.2026 im Prüfstand über alle Textknoten gerechnet, nicht geschätzt. `#646E78` liegt in derselben Familie und kommt auf 4,9 zu 1, und auf der hellsten Fläche des Rumpfes noch auf 4,75. Das Fundament hat hier `#8494A8` und damit 3,08: auch das ist zu wenig, aber es ist nicht die Baustelle dieses Themas. */ --leise-2: #646E78; /* **`--gruen` bleibt, wie das Fundament es hat**, obwohl ein Grün mit Blaustich neben Petrol nah an der Marke steht. Der Grund ist nicht Geschmack: dasselbe Grün liegt an zwölf Stellen roh im Regelwerk, als `#1B7A4B`, `#2E7D5B` und `#5FD19A`. Wer nur die Variable dreht, hat danach zwei Grüns statt eines, und das ist schlechter als ein Grün, das etwas nah an Petrol liegt. **Gehört beim nächsten Aufräumen im Fundament zusammengezogen**, dann ist es hier eine Zeile. */ --schrift: "Saira", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; --schrift-titel: "Saira Condensed", "Saira", "Arial Narrow", sans-serif; } /* Saira Condensed läuft deutlich schmaler als Literata und wirkt bei gleicher Größe kleiner. Deshalb ein Stück mehr Größe als im Fundament und ein fester Schnitt: eine kondensierte Groteske ohne Fettung liest sich als Beschriftung und nicht als Überschrift. */ .blatt h1, .blatt h2, .blatt h3, .kachel .titel, .modulkopf h1 { color: var(--nl-nacht); font-weight: 700; letter-spacing: -.005em; line-height: 1.16; } .blatt h1, .modulkopf h1 { font-size: 2.15rem; } .blatt h2 { font-size: 1.6rem; } /* RUNDE KNÖPFE GAB ES HIER, UND SIE SIND WIEDER RAUS. Auf next-learning.de liegt jeder Knopf auf `border-radius: 40px`, und als Markenmerkmal ist das auffälliger als jede Farbe. Im Hub trägt es nicht: das Fundament setzt die Rundung an **28 Stellen einzeln**, mit acht verschiedenen Werten von 8 bis 50 Prozent, und keine davon steht an einer Variablen, die ein Thema drehen könnte. Am 22.09.2026 ausgezählt, nachdem die erste Fassung im Prüfstand drei Knöpfe rund und den vierten eckig gemacht hatte. Alles zu erwischen hieße, dreißig Fundamentregeln nachzubauen, und dann ist das Thema kein Farbwechsel mehr, sondern ein zweites Regelwerk. Halb gerundet sieht schlechter aus als gar nicht. **Wenn das je kommen soll, gehört es ins Fundament an eine Variable `--knopfrundung`**, nicht hierher. */ /* ============================================================================= WAS KEIN THEMA ERREICHT ----------------------------------------------------------------------------- Im Fundament stehen an einigen Stellen Blautöne roh im Regelwerk, ohne Variable davor. Ein Farbwechsel läuft an ihnen vorbei, und übrig bleibt ein Petrolhub mit blauen Knöpfen, sobald die Maus darüber steht. Am 22.09.2026 mit einer Suche über alle sechsstelligen Hexwerte gefunden, nicht im Vorbeigehen. **Dieselben Zeilen stehen bei WAXTUM500, Simplex und Vije noch blau drin.** Das ist ein Befund für das nächste Aufräumen im Fundament und wird hier nicht miterledigt. ========================================================================== */ /* Drei gefüllte Knöpfe fahren beim Überfahren nach `#16304f`, einem dunklen Navy: die Anmeldung, der Quizknopf und der Knopf der Unterlagenzeile. */ .anmeldung button:hover, .quizknopf:hover, .uknopf:hover, .rumpf .uknopf:hover { background: #05687A; border-color: #05687A; } /* Der zweitrangige Knopf der Unterlagenzeile fährt ins Blaugraue. */ .uknopf.zweitrangig:hover, .rumpf .uknopf.zweitrangig:hover { border-color: #BFDADF; background: #F2F7F8; } /* Das Namenszeichen oben rechts ist ein blauer Verlauf. Es steht neben der Kopfleiste und ist damit die auffälligste dieser Stellen. */ .avatar { background: linear-gradient(140deg, #0A93AB, #205A66); } /* JEDE ZWEITE KACHEL WÄRE FAST EINFARBIG. Das Fundament mischt den zweiten Deckel aus `--akzent` und `--navy`, und beide tragen hier dasselbe Petrol. Die zweite Kachel bekommt deshalb den Weg ins Blauschwarz, so wie ihn die Website zwischen Kopfbereich und Text geht: hell, tief, Graphit. */ .kachel:nth-child(2n) .deckel { background: linear-gradient(140deg, #296C7A, #0E2430); } /* JEDE DRITTE KACHEL TRÄGT IM FUNDAMENT EIN BLAUGRAU, roh in `hub.css`. Bei tkohns fällt das nicht auf, dort ist alles blau. In einem Petrolhub steht es als Fremdkörper zwischen zwei Petrolkacheln. Hier das Blauschwarz der Marke, aufgehellt, damit die Wand einen dritten Ton hat und nicht nur zwei. */ .kachel:nth-child(3n) .deckel { background: linear-gradient(140deg, #3A4256, #171B2E); } /* Im Dunkeln dieselbe Regel wie bei Simplex und Hochler: die Flächen drehen, die Markenfarben bleiben. Die drei Töne stehen oben in einer schlichten `:root`-Regel und damit später als der Dunkelblock des Fundaments, sie überleben ihn also von allein. Was nicht von allein überlebt, steht hier. */ @media (prefers-color-scheme: dark) { :root { --grund: #11161A; --papier: #192026; --flaeche: #0E1317; --sand: #1F282E; --sand-tief: #263138; --linie: #2C373E; --text: #E8EDEF; --leise: #A3B0B6; --leise-2: #829097; /* **Das Petrol wird im Dunkeln aufgehellt, und zwar hier.** Das Fundament tut dasselbe mit seinem Blau (`--navy: #7FA9D4`), aber dieses Thema steht später in der Datei und würde es sonst zurückdrehen. `#078298` auf `#11161A` ergibt 4,0 zu 1, das trägt eine Fläche und keine Zeile; `#2BA3BC` ergibt 6,2. Gerechnet, nicht geschätzt. Zwei Regeln des Fundaments hängen daran: der gefüllte Knopf und der Knopf der Unterlagenzeile tragen im Dunkeln DUNKLE Schrift, weil sie ein helles `--navy` erwarten. Ohne diese zwei Zeilen stünde dunkle Schrift auf dunklem Petrol. */ --navy: #2BA3BC; --akzent: #2BA3BC; /* Die Kopfleiste bleibt das dunkle Petrol. Nachts ist sie damit etwas heller als der Rumpf, und das ist richtig: sie ist der Rahmen. */ --navy-tief: var(--nl-petrol-tief); } /* **Der Wegweiser im Kurskopf trägt weiße Schrift auf hellem Grund**, und das ist im Dunkeln zu wenig: `#FFF` auf `#2BA3BC` sind 2,97 zu 1, im Browser gemessen. Das Fundament hat dieselbe Stelle bei `.knopf.voll`, `.uknopf` und `.quizknopf` längst gelöst, indem es dort im Dunkeln die Schrift dunkel setzt; `.kurskopf .kweiter` ist bei dieser Runde offenbar übersehen worden. **Der Fehler ist nicht von diesem Thema und steht in jedem Hub.** Bei tkohns ist `--akzent` im Dunkeln `#5C93D6`, weiß darauf sind 3,25 zu 1. Er gehört ins Fundament und nicht hierher, aber solange er dort steht, wird er hier abgefangen: `#0E1317` auf `#2BA3BC` sind 6,4 zu 1. */ .kurskopf .kweiter { color: #0E1317; } /* Die Gegenstücke zu den rohen Blautönen oben, für den dunklen Stand. */ .anmeldung button:hover, .quizknopf:hover, .uknopf:hover, .rumpf .uknopf:hover { background: #7FC9D8; border-color: #7FC9D8; } .uknopf.zweitrangig:hover, .rumpf .uknopf.zweitrangig:hover { background: #1C2A30; border-color: #3E5760; } .uzeile { background: #151F24; border-color: #2A383E; } .avatar { background: linear-gradient(140deg, #2BA3BC, #14545F); } /* Das Blauschwarz der Überschriften ist auf dunklem Grund nicht mehr zu lesen, es ist der dunkle Grund. Im Dunkeln übernimmt das Petrol die Zeile, aufgehellt und entsättigt, so wie das Fundament es mit seinem Blau auch macht. */ .blatt h1, .blatt h2, .blatt h3, .kachel .titel, .modulkopf h1 { color: #7FC9D8; } /* Die Kacheldeckel des Fundaments sind im Dunkeln roh blau. Ohne diese drei Zeilen wäre der Hub nachts blau und tagsüber petrol. */ .kachel .deckel { background: linear-gradient(140deg, #0A6377, #05323D); } .kachel:nth-child(2n) .deckel { background: linear-gradient(140deg, #296C7A, #11313B); } .kachel:nth-child(3n) .deckel { background: linear-gradient(140deg, #333B4E, #14182A); } }