/* ============================================================================= Thema Hochler ----------------------------------------------------------------------------- Angelegt am 08.09.2026 für den Kundenhub von Kevin Hochler, Hochler Marketing, Leipzig. Vierter Hub nach tkohns, WAXTUM500 und Simplex. ES KOMMT NACH `hub.css` UND ÜBERSCHREIBT NUR, WAS ES NENNT. Wie bei den beiden Themen davor: ein Farb- und Schriftwechsel, kein zweites Regelwerk. HOCHLER FÜHRT EINE FARBE UND NICHT DREI. Das ist der Unterschied zu Simplex und der eigentliche Bauentscheid dieser Datei. Wo Simplex drei Farben auf drei Rollen verteilen konnte, gibt es hier ein Rot in zwei Tiefen, und alles Übrige sind Grautöne. DIE BEIDEN ROTS SIND GEMESSEN UND NICHT GESCHÄTZT: * `#8E0000` steht in `Rotton` im Austauschordner, von Kevin selbst am 02.09.2026 abgelegt, mit CMYK, HEX und RGB. Das ist seine Ansage, welches Rot gilt, und deshalb trägt es hier den Rahmen: die Kopfleiste und das dunkle Ende der Verläufe. * `#C71616` ist am 08.09.2026 auf hochler.de aus den berechneten Stilen ausgelesen worden, es ist die Farbe seiner Knöpfe. Deshalb trägt es hier die Handlung: Knöpfe, Fortschritt, aktive Zeilen. DASS DIE BEIDEN NICHT DASSELBE ROT SIND, IST KEIN FEHLER IM ABGLEICH. Die Dateien im Austauschordner zeigen drei weitere Rots: das Logo von 2020 trägt `#C01018`, der Schriftzug von 2018 `#C81010`, der Skizzenstil rund um `#A81010`. Kevins Marke ist über die Jahre gewandert. Führend ist die jüngste und ausdrückliche Angabe, also `#8E0000`, und die Website liefert den helleren Ton dazu. **Bei Gelegenheit gehört das mit Kevin bestätigt**, entschieden ist es hier nur für den Hub. WAS DAS GRÜN HIER SOLL. `--gruen` bleibt das Grün des Fundaments. In einem roten Hub liegt es nahe, auch das Geschaffte rot zu färben, und genau das wäre der Fehler: Rot ist die Farbe der Marke und steht auf jedem zweiten Element. Eine Farbe, die alles bedeutet, meldet nichts mehr. Das Häkchen am fertigen Modul braucht einen Ton, den die Marke nicht schon besetzt. DIE ÜBERSCHRIFTEN VERLIEREN DIE SERIFEN. `hochler.de` läuft durchgehend in Roboto, es gibt dort keine Serifenschrift. Literata, die Titelschrift des Fundaments, wäre hier ein fremder Gast. **Die Schrift ist Inter und nicht Roboto**, denn Roboto liegt nicht neben dem Hub, und geladen wird von Google nichts: ein Lernender soll seine Adresse nicht an einen Dritten schicken müssen, nur weil er eine Überschrift liest. Inter und Roboto sind beides neutrale Grotesken, der Abstand zwischen ihnen ist klein. Der Abstand zu Literata ist es nicht. Sobald `roboto-latin-400/700.woff2` daneben liegt, sind es hier zwei Zeilen. ========================================================================== */ :root { /* Die Marke, mit der Herkunft im Namen. */ --hochler-rot: #8E0000; /* Kevins Angabe vom 02.09.2026 */ --hochler-rot-hell: #C71616; /* die Knöpfe auf hochler.de */ /* Die Rollen im Hub. `--akzent` und `--navy` sind im Fundament zwei Töne für dieselbe Sache, Handlung. Beide bekommen das hellere Rot, damit die Verläufe von der Handlung in den Rahmen laufen und nicht umgekehrt. */ --akzent: var(--hochler-rot-hell); --navy: var(--hochler-rot-hell); --navy-tief: var(--hochler-rot); --karmesin: var(--hochler-rot); /* Die Flächen verlieren den Blaustich des Fundaments. Die Werte sind die Grautöne von hochler.de: `#F8FAFC` sind dort die abgesetzten Abschnitte, `#181D27` der Fließtext im Dunkeln, `#666` der laufende Text. */ --sand: #F4F5F7; --sand-tief: #EBEDF0; --flaeche: #F8FAFC; --linie: #E3E5E9; --text: #181D27; --leise: #5F6672; --leise-2: #949AA5; --schrift-titel: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; } /* Die Überschriften stehen im tiefen Rot, so wie die Wortmarke. Inter läuft breiter als Literata und wirkt bei gleicher Größe größer, deshalb ein Stück weniger Größe und ein festerer Schnitt: eine Groteske ohne Fettung liest sich als Fließtext und nicht als Überschrift. */ .blatt h1, .blatt h2, .blatt h3, .kachel .titel, .modulkopf h1 { color: var(--hochler-rot); font-weight: 700; letter-spacing: -.011em; line-height: 1.18; } .blatt h1, .modulkopf h1 { font-size: 1.95rem; } .blatt h2 { font-size: 1.45rem; } /* JEDE ZWEITE KACHEL WAR EINFARBIG, und das ist die Folge davon, dass Hochler nur eine Farbe führt. Das Fundament mischt die zweite Kachel aus `--akzent` und `--navy`, und beide tragen hier dasselbe Rot: aus dem Verlauf wird eine Fläche. Am 08.09.2026 im Prüfstand gesehen und nicht gerechnet. Die zweite Kachel bekommt deshalb den tiefen Ton, damit die Wand einen Wechsel hat: hell, tief, Graphit. */ .kachel:nth-child(2n) .deckel { background: linear-gradient(140deg, #8E0000, #520000); } /* JEDE DRITTE KACHEL TRUG EIN BLAUGRAU, und zwar roh im Fundament, an `hub.css` Zeile 1546. Bei tkohns fällt das nicht auf, dort ist alles blau. In einem roten Hub steht es als Fremdkörper zwischen zwei roten Kacheln. Hier ein ruhiges Graphit, das zu den Grautönen von hochler.de gehört. **Derselbe Fehler steht bei WAXTUM500 und Simplex noch drin**, das ist ein Befund für die nächste Runde und wird hier nicht miterledigt. */ .kachel:nth-child(3n) .deckel { background: linear-gradient(140deg, #5B5F66, #26292E); } /* Im Dunkeln dieselbe Regel wie bei Simplex: die Flächen drehen, die Markenfarben bleiben. Die beiden Rots 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: #14171C; --papier: #1C2026; --flaeche: #101317; --sand: #242830; --sand-tief: #2C313A; --linie: #313640; --text: #E9EBEF; --leise: #A6ADB8; --leise-2: #868D99; } /* `#8E0000` ist auf dunklem Grund fast schwarz, eine Überschrift darin wäre nicht zu lesen. Dieselbe Marke, aufgehellt und entsättigt, so wie das Fundament es mit seinem Blau und seinem Grün auch macht. */ .blatt h1, .blatt h2, .blatt h3, .kachel .titel, .modulkopf h1 { color: #F2A19B; } /* Die beiden Kacheldeckel des Fundaments sind im Dunkeln roh blau, `hub.css` Zeile 1059 und 1060. Ohne diese drei Zeilen wäre der Hub nachts blau und tagsüber rot. */ .kachel .deckel { background: linear-gradient(140deg, #7E1212, #4A0000); } .kachel:nth-child(2n) .deckel { background: linear-gradient(140deg, #C71616, #7E1212); } .kachel:nth-child(3n) .deckel { background: linear-gradient(140deg, #4A4E55, #1E2126); } }