/* GS-LOTTE-FARBKONZEPT-SCHULLEITUNG - 2026-09-04 * Source: six voice messages from the headteacher, 04.09.2026 13:48-14:09, * transcribed in kunden/gem-lotte/transkriptionen/coding-anweisungen/ * 2026-09-04_gs-lotte-abnahme-04-09-2026_transkripte.md. Her repeated word * was "schmuddelig" (muddy/dirty-looking) - four times, about four * different places. Measured, the four places shared one root cause plus * one physical limit; both are documented below with before/after numbers. * Loads last (after startseite-korrekturen.css) so it wins the cascade * without touching the generated snapshot or any other override file. * * ROOT CAUSE 1 - one mix ratio was too light for its own fill colour. * overrides/rubric-colours.css derives every rubric's "-dark" tone from its * live master colour with `color-mix(in srgb, master 44%, #101828)`. That * looked fine on paper and on the pale "-soft" tone, but measured against * the rubric's own "-fill" tone (used as a solid background on tiles, * badges and the "Alles, was unsere Schule ausmacht" grid) it lands at * 3.78-3.98:1 for all five rubrics - under WCAG AA 4.5:1. This is what the * headteacher was looking at on the Projektgalerie tiles and the "September * 2026" month heading (calendar.css and overrides/mincal-theme.css both * read --gsl-rubric-aktuelles-dark directly). Lowering the ratio to 34% * keeps the same master hue and the same architecture, and clears 4.5:1 * dark-on-fill for every rubric with margin: * * rubric dark (new) on fill on white on soft on paper-rose * aktuelles #553134 4.55 11.20 7.48 9.27 * schulkonzept #304930 4.77 9.90 7.14 8.20 * schulgemeinschaft #1C4458 4.55 10.41 7.17 8.62 * betreuung #534720 5.03 9.17 6.95 7.59 * kontakt #573D30 4.84 9.93 7.19 8.22 * * A lower ratio also means less --gsl-rubric-*-master colour and more of * the near-black mix target in the result, which is why these dark tones * read as steadier, less muddy versions of the same hue rather than a * different, browner colour family. * * ROOT CAUSE 2 - the Startseite borrowed the Kontakt rubric's dark tone. * .gsl-akzent and the bold words inside the hero welcome line ("...unsere * GEMEINSCHAFT in ALT-LOTTE") read var(--gsl-rubric-kontakt-dark) as their * only fallback (overrides/startseite-korrekturen.css), and .gsl-stat__number * falls back the same way (homepage-source.css, --rubric-accent-dark). The * Startseite is not the Kontakt page, so it always used Kontakt's dark tone * out of context - and that tone exists to satisfy contrast on ORANGE * surfaces, not to represent "the brand orange" as text. This is the * "schmuddelig, das wirkt wie Ocker/Gelb" the headteacher named for the * Startseite numbers, and the same fallback painted GEMEINSCHAFT/ALTLOTTE. * Below, the Startseite gets its own accent instead of inheriting Kontakt's. * * PHYSICAL LIMIT - the vivid brand orange cannot be AA text on light blue. * She asked for exactly this pairing: "das schoene knallige Orange... fuer * die Buchstaben GEMEINSCHAFT und ALTLOTTE", set on --gsl-paper-cool * (#E2ECF5), the light-blue band the welcome line already sits on. Measured: * * #F29400 (brand orange) on #E2ECF5 (paper-cool) -> 1.95:1 FAIL * #F29400 on #FFFFFF (white) -> 2.33:1 FAIL * #F29400 on #004A99 (brand blue, for reference) -> 3.69:1 FAIL (AA-normal), PASS (AA-large only) * * This is not an implementation gap: two light, saturated colours cannot * reach a 4.5:1 luminance ratio against each other, in any colour space. * Reducing saturation at the same lightness barely moves the number (tested * down to zero chroma, contrast changed by 0.07); only lightness moves it. * Taken to the nearest pass at the SAME hue and chroma as the brand orange * (OKLCH H 66.17 deg, C 0.166, only L lowered from 0.747 to 0.53): * * #A95000 on #E2ECF5 (paper-cool) -> 4.58:1 PASS (margin 0.08) * * This is the closest approach to "knalliges Orange" that still passes AA * on the exact background she chose; it is visibly darker than the circle * icons, which is the trade-off the surface makes and not a design choice. * If the words move onto the blue hero image instead of the light-blue * band, the true brand orange becomes usable there at large/bold sizes * (3.69:1, AA-large) - that is a background/layout question for ARTD, not * decided here. */ :root { /* --- ROOT CAUSE 1: dark-on-fill contrast, corrected mix ratio --- */ /* ROOT CAUSE 3 - the mix target itself is cold, and that is what reads as brown. #101828 is a blue-black; mixing the warm master #DC624A into it pulls chroma out of the result, and the eye reads the low-chroma leftover as muddy brown rather than as red. The headteacher named exactly this surface: "Dieses sieht ja fast aus wie braun. Also da bitte dringlich 'n schoeneren Farbton aus dieser roetlichen Farbpalette auswaehlen" (N2). Fixed by stating the dark tone in OKLCH at the master's own hue (32.8 deg) with the chroma kept high (0.145) instead of mixing it away. Contrast is deliberately held identical to the previous value, so nothing that passed before starts failing: #553134 (alt, C 0.041) auf fill #F08C70 4.63 auf Weiss 11.20 #7A0B00 (neu, C 0.145) auf fill #F08C70 4.63 auf Weiss 11.20 Same numbers, same hue, three and a half times the chroma - the tile stops being brown and becomes a deep red without becoming louder. Only the aktuelles rubric is changed here; the other four were not part of her complaint and keep their derivation above. */ --gsl-rubric-aktuelles-dark: oklch(0.37 0.145 32.8); --gsl-rubric-aktuelles-strong: var(--gsl-rubric-aktuelles-dark); --gsl-rubric-aktuelles-action: var(--gsl-rubric-aktuelles-dark); --gsl-rubric-schulkonzept-dark: color-mix(in srgb, var(--gsl-rubric-schulkonzept-master) 34%, #101828); --gsl-rubric-schulkonzept-strong: var(--gsl-rubric-schulkonzept-dark); --gsl-rubric-schulkonzept-action: var(--gsl-rubric-schulkonzept-dark); --gsl-rubric-schulgemeinschaft-dark: color-mix(in srgb, var(--gsl-rubric-schulgemeinschaft-master) 34%, #101828); --gsl-rubric-schulgemeinschaft-strong: var(--gsl-rubric-schulgemeinschaft-dark); --gsl-rubric-schulgemeinschaft-action: var(--gsl-rubric-schulgemeinschaft-dark); --gsl-rubric-betreuung-dark: color-mix(in srgb, var(--gsl-rubric-betreuung-master) 34%, #101828); --gsl-rubric-betreuung-strong: var(--gsl-rubric-betreuung-dark); --gsl-rubric-betreuung-action: var(--gsl-rubric-betreuung-dark); --gsl-rubric-kontakt-dark: color-mix(in srgb, var(--gsl-rubric-kontakt-master) 34%, #101828); --gsl-rubric-kontakt-strong: var(--gsl-rubric-kontakt-dark); --gsl-rubric-kontakt-action: var(--gsl-rubric-kontakt-dark); --gsl-rubric-service-dark: var(--gsl-rubric-kontakt-dark); /* --- ROOT CAUSE 2 + PHYSICAL LIMIT: a dedicated Startseite accent, the closest AA-passing match to the requested vivid orange on the paper-cool band, see measurement above. Adjustable here, in one place, same way as every other --gsl-* token in this file chain. */ --gsl-startseite-akzent: #A95000; } /* Der Startseiten-Akzent muss den Umschalter unten mitmachen — Stefan am 04.09.2026: „so, dass wir es mit dem Styleswitcher unten justieren koennen". Ohne die beiden Bloecke hier bliebe #A95000 in jedem Modus gleich und faellt dann durch: auf dem dunklen Grund misst er nur 3,23:1 statt 4,5:1. Gleiche Farbfamilie, nur Helligkeit angepasst — gemessen 05.09.2026. */ [data-theme="dark"] { /* #D9822B auf --gsl-paper-cool #121921 = 6,05:1, auf --gsl-paper-warm #211A12 = 5,88:1. Beide bestehen AA mit Reserve. */ --gsl-startseite-akzent: #D9822B; } [data-high-contrast] { /* #7A3900 auf dem hellblauen Textband = 7,27:1, auf Weiss = 8,70:1. */ --gsl-startseite-akzent: #7A3900; } [data-high-contrast][data-theme="dark"] { /* #F0B267 auf #121921 = 9,50:1, auf #211A12 = 9,23:1. */ --gsl-startseite-akzent: #F0B267; } /* Startseite gets its own accent instead of silently inheriting Kontakt's dark tone (was: --rubric-accent-dark unset on rubric-startseite, falling back to --gsl-rubric-kontakt-dark inside .gsl-stat__number). */ body.rubric-startseite { --rubric-accent-dark: var(--gsl-startseite-akzent); } /* Highlighted words in the opening text band and in the welcome headline ("...GEMEINSCHAFT in ALT-LOTTE") - closest AA match to the requested vivid orange, see measurement above. Was --gsl-rubric-kontakt-dark. */ .gsl-akzent, .gsl-hero-a__headline strong, .gsl-hero-a__welcome strong { color: var(--gsl-startseite-akzent, #A95000); } /* ===================================================== "Alles, was unsere Schule ausmacht auf einen Blick" - colour reversal requested in nachricht 2: the vivid rubric colour becomes the tile background again, like the first draft. Dark-on-fill now clears AA for all five rubrics (see table above), so the same dark text stays legible. The generic `.gsl-tile { background: ... }` rule (specificity 0-1-0) is NOT what actually paints these six tiles. overrides/rubric-colours.css already carries a dedicated, four-class rule per rubric, `.rubric-startseite .gs-home-rubrics .gsl-tile.gsl-rubric-` (specificity 0-4-0), set to --gsl-rubric--surface - a 10% tint, almost white. That is the actual, measured background today (sampled #FCEFED on the Aktuelles tile) and the direct cause of "kein Kontrast, wirkt schmuddelig" for this section: the tile reads as barely-tinted white, not as its rubric colour. Matching that same selector shape here, at equal specificity and later in the cascade, is what actually reaches the tile; border-color is left alone; it already carries the rubric hue. The arrow badge moves to a plain paper circle so it keeps standing out against its now-vivid parent instead of disappearing into it (it used to differ from the tile only by shade, fill-on-surface). ===================================================== */ .rubric-startseite .gs-home-rubrics .gsl-tile.gsl-rubric-aktuelles { background: var(--gsl-rubric-aktuelles-fill); } .rubric-startseite .gs-home-rubrics .gsl-tile.gsl-rubric-schulkonzept { background: var(--gsl-rubric-schulkonzept-fill); } .rubric-startseite .gs-home-rubrics .gsl-tile.gsl-rubric-schulgemeinschaft { background: var(--gsl-rubric-schulgemeinschaft-fill); } .rubric-startseite .gs-home-rubrics .gsl-tile.gsl-rubric-betreuung { background: var(--gsl-rubric-betreuung-fill); } .rubric-startseite .gs-home-rubrics .gsl-tile:is(.gsl-rubric-kontakt, .gsl-rubric-service) { background: var(--gsl-rubric-kontakt-fill); } .gsl-tile__arrow { background: var(--gsl-paper); color: var(--gsl-rubric-dark, var(--gsl-blue)); } /* ===================================================== Project detail page background - "schwaches Rosa" instead of white (nachricht 6). --gsl-paper-rose already exists as the house's pale rose tone; ink on it measures 14.12:1, the (now corrected) aktuelles-dark heading colour 9.27:1 - both comfortably AA. ===================================================== */ .gsl-proj-detail-body { background: var(--gsl-paper-rose); } /* ===================================================== D2 - "Unsere Projekte und Aktionen" war der einzige Seitentitel dieser Groesse. Gemessen am 05.09.2026 bei 1440 px Fensterbreite: Projekte und Aktionen 80,8 px Erklaerung zur Barrierefreiheit 44,0 px Unsere naechsten Termine 36,0 px Die Schulleitung: "Ich find das grundsaetzlich allerdings sehr, sehr fett, so dick unsere Projekte und Aktion haben wir auf keiner anderen Seite" (N2). Der Titel geht deshalb auf die Groesse der uebrigen Seitentitel zurueck. Der Rahmen `gs-section-red` kommt im ganzen Mandanten nur auf dieser einen Seite vor, die Regel greift also nirgends sonst. ===================================================== */ .gs-section-red .min-header__title--h1 { font-size: clamp(2rem, 1.4rem + 1.6vw, 2.75rem); } /* ===================================================== F4 - Fussbereich: "FUER SIE VOR ORT" und "UNSERE ERREICHBARKEITEN" sollen "fett und groesser hervorgehoben" werden (N2). Sie standen auf 14 px in gedaempftem Grau (#4A4A5E auf #C2D4E5 = 5,69:1). Jetzt auf der Hausgroesse fs-md und in der vollen Hausschrift-Farbe: #1A1A2E auf #C2D4E5 = 11,24:1. Fett und Versalien bleiben unveraendert. Die Spaltentitel (SCHULLEITUNGSTEAM, VERWALTUNG, BETREUUNG) waren nicht gemeint und bleiben wie sie sind. ===================================================== */ .gsl-footer-contact__block-title { font-size: var(--gsl-fs-md); color: var(--gsl-ink); } /* ===================================================== F5 - "Schule gemeinsam mit Partnern gestalten koennte man ja auch in eine Zeile bekommen, weil jetzt sehr viel Platz nach links hin ist" (N2). Die Ueberschrift trug die allgemeine Lesebreite von 712 px in einem 1325 px breiten Block und brach deshalb mitten im Satz um. In diesem einen Abschnitt darf sie die volle Blockbreite nutzen; auf schmalen Bildschirmen bricht sie weiterhin von selbst um. ===================================================== */ .gsl-partners .min-header__title { max-width: none; } /* ===================================================== D5 - Projekttitel auf der Detailseite in Grossbuchstaben (N6). Nur im Kopfbereich der Projektdetailseite; die Seitentitel der uebrigen Seiten nutzen dieselbe Klasse .gsl-display und bleiben unveraendert. ===================================================== */ .gsl-proj-detail-hero .gsl-display { text-transform: uppercase; } /* ===================================================== D6 - Fotostrecke unter dem Artikel. Zu jeder Aktion liegen bis zu achtzehn Fotos am Datensatz; sichtbar war bisher nur das Kopfbild. Raster, Abstaende und Radien kommen aus den Haus-Tokens, keine eigenen Werte. Die Trefferflaeche ist die ganze Kachel, der Fokusring der des Hauses. ===================================================== */ .gsl-proj-fotos { margin-top: var(--gsl-space-8); } .gsl-proj-fotos__heading { font-size: var(--gsl-fs-md); font-weight: var(--gsl-fw-bold); color: var(--gsl-rubric-aktuelles-dark); margin: 0 0 var(--gsl-space-5); } .gsl-proj-fotos__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: var(--gsl-space-4); margin: 0; padding: 0; list-style: none; } .gsl-proj-fotos__link { display: block; border-radius: var(--gsl-radius-md); overflow: hidden; box-shadow: var(--gsl-shadow-sm); transition: transform var(--gsl-duration-fast) var(--gsl-ease-out); } .gsl-proj-fotos__link:hover, .gsl-proj-fotos__link:focus-visible { transform: translateY(-2px); } .gsl-proj-fotos__link:focus-visible { outline: 3px solid var(--gsl-rubric-aktuelles-dark); outline-offset: 2px; } .gsl-proj-fotos__img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; } @media (prefers-reduced-motion: reduce) { .gsl-proj-fotos__link { transition: none; } .gsl-proj-fotos__link:hover, .gsl-proj-fotos__link:focus-visible { transform: none; } } /* ===================================================== D3 - "Der Projekttitel wird beim Ueberfahren nicht unterstrichen" (N4, N6). Die Trefferflaeche bleibt ausdruecklich die ganze Kachel: ein Pfeil von knapp 40 px allein waere fuer Finger und Hilfsmittel zu klein. Als Rueckmeldung bleibt die Pfeilbewegung, dazu kommt ein leichtes Anheben der Kachel, damit das Ueberfahren ohne Unterstreichung spuerbar bleibt. ===================================================== */ .gsl-tile.gsl-proj:hover .gsl-proj__title { text-decoration: none; } .gsl-tile.gsl-proj { transition: transform var(--gsl-duration-fast) var(--gsl-ease-out), box-shadow var(--gsl-duration-fast) var(--gsl-ease-out); } .gsl-tile.gsl-proj:hover, .gsl-tile.gsl-proj:focus-visible { transform: translateY(-3px); box-shadow: var(--gsl-shadow-md, 0 8px 24px rgb(26 26 46 / 14%)); } @media (prefers-reduced-motion: reduce) { .gsl-tile.gsl-proj { transition: none; } .gsl-tile.gsl-proj:hover, .gsl-tile.gsl-proj:focus-visible { transform: none; } } /* ===================================================== "Alle Projekte und Aktionen" trug als einzige Stelle einen nackten Pfeil ohne Kreis -- die Schulleitung hat genau das benannt (N2). Der Pfeil sitzt jetzt im selben Kreis wie ueberall sonst. ===================================================== */ .gsl-proj-galerie__more-link { display: inline-flex; align-items: center; gap: var(--gsl-space-3); } .gsl-proj-galerie__more-arrow { display: inline-flex; align-items: center; justify-content: center; inline-size: 2.5rem; block-size: 2.5rem; flex: 0 0 auto; border-radius: var(--gsl-radius-full); background: var(--gsl-rubric-aktuelles-dark); color: var(--gsl-paper); transition: transform var(--gsl-duration-fast) var(--gsl-ease-out); } .gsl-proj-galerie__more-link:hover .gsl-proj-galerie__more-arrow, .gsl-proj-galerie__more-link:focus-visible .gsl-proj-galerie__more-arrow { transform: translateX(3px); } @media (prefers-reduced-motion: reduce) { .gsl-proj-galerie__more-arrow { transition: none; } .gsl-proj-galerie__more-link:hover .gsl-proj-galerie__more-arrow, .gsl-proj-galerie__more-link:focus-visible .gsl-proj-galerie__more-arrow { transform: none; } } /* ===================================================== E4 - "Wichtig ist, dass Sie schnellstmoeglich von dieser Seite aus auf unseren Terminkalender kommen ... aber auch da viel groesser, dass man darauf aufmerksam macht, und dann wirklich diese Pfeile auch wieder in den runden Kreis, dass wir da einheitlich verfahren vom Layout her" (N3). Der Weg stand bisher als 16-px-Textzeile mit Unterstrich da. Der Link traegt jetzt die Haus-Schaltflaeche `gsl-btn gsl-btn--proj` -- dieselbe wie der "Zurueck"-Knopf auf der Projektdetailseite. Das ist auch der von der Basis vorgesehene Weg: die Regel `body[class*="rubric-"] .gsl-main > .gsl-section a:not(.gsl-btn)` faerbt sonst JEDEN Link im Inhaltsbereich in die Seitenschriftfarbe und gewinnt gegen jede eigene Klassenregel. Ein erster Versuch mit eigener Farbe stand deshalb dunkelrot auf dunkelrot und war unsichtbar; `gsl-btn` ist die Ausnahme, die das Haus dafuer vorgesehen hat. Hier bleiben nur Groesse und der Pfeilkreis. ===================================================== */ .gsl-termine__calendar-cta { gap: var(--gsl-space-4); font-size: var(--gsl-fs-md); padding-inline: var(--gsl-space-5); /* Auf 390 px war der Knopf 421 px breit und schob die ganze Seite seitwaerts (gemessen 05.09.2026: scrollWidth 445 gegen clientWidth 390). Er darf deshalb nie breiter als sein Platz werden und umbricht dort in zwei Zeilen; der Pfeilkreis bleibt daneben stehen. */ max-inline-size: 100%; flex-wrap: wrap; text-align: start; } .gsl-termine__calendar-text { min-inline-size: 0; } .gsl-termine__calendar-arrow { display: inline-flex; align-items: center; justify-content: center; inline-size: 2.5rem; block-size: 2.5rem; flex: 0 0 auto; border-radius: var(--gsl-radius-full); background: rgb(255 255 255 / 18%); transition: transform var(--gsl-duration-fast) var(--gsl-ease-out); } .gsl-termine__calendar-cta:hover .gsl-termine__calendar-arrow, .gsl-termine__calendar-cta:focus-visible .gsl-termine__calendar-arrow { transform: translateX(3px); } @media (prefers-reduced-motion: reduce) { .gsl-termine__calendar-arrow { transition: none; } .gsl-termine__calendar-cta:hover .gsl-termine__calendar-arrow, .gsl-termine__calendar-cta:focus-visible .gsl-termine__calendar-arrow { transform: none; } } /* ===================================================== Lange deutsche Woerter schoben die Rechtsseiten auf dem Telefon seitwaerts. Gemessen am 05.09.2026 bei 390 px Fensterbreite: Impressum scrollWidth 487, seitlich scrollbar um 97 px Barrierefreiheit scrollWidth 402, seitlich scrollbar um 12 px Startseite scrollWidth 390, nicht scrollbar Ursache war kein Layoutfehler, sondern eine Ueberschrift: "Verbraucherstreitbeilegung" braucht in Ueberschriftgroesse 463 px und passte nicht in die 342 px breite Textspalte. Fliesstext und Ueberschriften duerfen lange Woerter jetzt umbrechen; die Seite traegt lang="de", also trennt der Browser an den richtigen Stellen. Kein Wort wird abgeschnitten, nichts wird kleiner -- es wird nur umgebrochen. ===================================================== */ .gsl-prose, .gsl-prose :is(h1, h2, h3, h4, p, li, dd, dt) { overflow-wrap: break-word; } .gsl-prose :is(h1, h2, h3, h4) { hyphens: auto; } /* ===================================================== Hauptnavigation etwas groesser. "Ich hab schon 'n recht grossen Bildschirm, aber immer noch recht klein ... deswegen einfach nur die Anregung, ob diese Woerter noch 'n bisschen von der Buchstabengroesse vergroessert werden koennten" (N1). Sie stand auf 14 px. 16 px ist zugleich die Groesse, ab der Text auf Telefonen nicht mehr automatisch gezoomt wird. Die Sperrung wird leicht zurueckgenommen, damit die fuenf Punkte in einer Zeile bleiben. ===================================================== */ .gsl-nav__link { font-size: 1rem; letter-spacing: 0.06em; }