/* ============================================================================= Unity Xcape — Stylesheet der gesamten Website (Baukasten K1) Eine Datei, kein Framework, keine externe Verbindung. Marke: Blau #2C7DCE → Violett #7B4397, Display-Schrift Rigelstar. Aufbau dieser Datei: 01 Schriften 10 Kachel-Raster (Bento) 02 Token 11 Spiel-Panels 03 Basis 12 Foto und Text 04 Typografie 13 Ablauf und Schritte 05 Raster und Sektionen 14 Vergleich 06 Knoepfe 15 Listen 07 Kopfleiste 16 Tabellen 07b Menue-Varianten 1-5 (?menue=1..5 in der Adresse) 08 Hero und Kennzahlen 17 FAQ 09 Karten 18 Kaesten und Hinweise 19 CTA-Band 20 Passt dazu 21 Fusszeile 22 Sticky-CTA 23 Fliesstext 24 Bewegung 25 Mobil 26 Druck Welcher Baustein wofuer da ist, steht in BAUKASTEN.md. ============================================================================= */ /* == 01 Schriften ========================================================== Selbst gehostet aus assets/schriften/. Keine Google Fonts, keine CDN. Rigelstar hat nur einen Schnitt und ist ausschliesslich fuer h1/h2 gedacht. */ /* WOFF2 zuerst, OTF als Rueckfall. Dieselbe Schrift, 39 % kleiner — OTF ist unkomprimiert, WOFF2 ist das Webformat. Jeder Browser, den diese Seite bedient, kann WOFF2; der zweite Eintrag ist nur fuer den Fall, dass doch einmal ein sehr alter danebensteht. ⚠ Rigelstar hat 240 Zeichen und KEIN ß, keine deutschen Anfuehrungs- zeichen „ ‚ , kein … · ° €. Das faellt nur deshalb nicht auf, weil die Schrift ausschliesslich mit text-transform:uppercase eingesetzt wird — dabei wird ß zu SS. Wer Rigelstar irgendwo OHNE uppercase setzt, muss vorher pruefen, ob der Text eines dieser Zeichen traegt. */ @font-face{font-family:'Rigelstar'; src:url('schriften/rigelstar.woff2') format('woff2'), url('schriften/rigelstar.otf') format('opentype'); font-weight:400;font-style:normal;font-display:swap} @font-face{font-family:'Roboto';src:url('schriften/roboto-400.woff2') format('woff2'); font-weight:400;font-style:normal;font-display:swap} @font-face{font-family:'Roboto';src:url('schriften/roboto-500.woff2') format('woff2'); font-weight:500;font-style:normal;font-display:swap} @font-face{font-family:'Roboto';src:url('schriften/roboto-700.woff2') format('woff2'); font-weight:700;font-style:normal;font-display:swap} @font-face{font-family:'Roboto Condensed';src:url('schriften/roboto-condensed-700.woff2') format('woff2'); font-weight:700;font-style:normal;font-display:swap} /* == 02 Token ============================================================== Die deutschen Namen sind die gueltigen. Die kurzen Zweitnamen (--bg, --muted, --container …) existieren, damit direkt aus dem K1-Entwurf kopierte Regeln weiterlaufen. Beide zeigen auf denselben Wert. */ :root{ /* Marke */ --blau:#2C7DCE; --violett:#7B4397; --verlauf:linear-gradient(135deg,#2C7DCE 0%,#7B4397 100%); --verlauf-text:linear-gradient(90deg,#2C7DCE 0%,#7B4397 100%); --blau-hell:#8CC0F2; --gruen:#16A34A; /* Flaechen hell */ --grund:#FFFFFF; --grund-alt:#F6F7FB; --karte:#FFFFFF; --linie:#E4E7F0; /* Flaechen dunkel */ --dunkel:#12131A; --dunkel-alt:#1B1D28; --dunkel-linie:#2C2F3D; /* Text */ --text:#15171F; --text-weich:#4A4E5E; --text-leise:#6E7385; --text-hell:#FFFFFF; --text-hell-weich:#B9BDCC; --text-hell-leise:#8B8FA3; /* Raster */ --breite:1240px; --schmal:760px; --lese:660px; --rand:clamp(20px,5vw,32px); --abstand-sektion:clamp(60px,8vw,108px); --kopfhoehe:96px; --radius:14px; --radius-gross:20px; --schatten:0 1px 2px rgba(21,23,31,.04),0 10px 30px rgba(21,23,31,.06); --schatten-hoch:0 18px 40px rgba(44,125,206,.15); /* Zweitnamen aus dem K1-Entwurf */ --bg:var(--grund); --bg-alt:var(--grund-alt); --muted:var(--text-weich); --container:var(--breite); } /* == 03 Basis ============================================================== */ *,*::before,*::after{box-sizing:border-box} /* KEIN scroll-behavior:smooth hier — gemessen am 27.08.2026: Mit smooth kam von zehn Radstoessen zu je 120 Bildpunkten nur gut ein Drittel des Weges an (503 statt 1200), und zwar in unregelmaessigen Spruengen von 22 bis 73 Punkten. Grund: Jeder Radstoss startet eine eigene Sanft-Animation und bricht die vorige ab. Die Seite bleibt hinter dem Rad zurueck — das ist das Ruckeln, das der Betreiber gemeldet hat. Ohne smooth: exakt 1200 Punkte, jeder Schritt gleich. Sanft gesprungen wird trotzdem, aber nur bei Ankerlinks, und das erledigt ux.js gezielt fuer diese Links. */ html{-webkit-text-size-adjust:100%} /* Der Sticky-Balken liegt fest am unteren Rand. Ohne diesen Platz verdeckte er die letzte Zeile der Fusszeile. */ body{padding-bottom:84px} body{ margin:0;background:var(--grund);color:var(--text); font-family:'Roboto',-apple-system,'Segoe UI',sans-serif; font-size:17px;line-height:1.65;-webkit-font-smoothing:antialiased; overflow-x:hidden; /* Lange URLs im Rechtstext brechen um, statt aus der Spalte zu laufen */ overflow-wrap:break-word; } img{max-width:100%;height:auto;display:block} svg{display:block} a{color:var(--blau);text-decoration:none} a:hover{text-decoration:underline} :focus-visible{outline:3px solid var(--blau);outline-offset:3px;border-radius:4px} /* Sprungziele nicht unter die klebende Kopfleiste rutschen lassen */ :where([id]){scroll-margin-top:calc(var(--kopfhoehe) + 24px)} .nur-screenreader{position:absolute;width:1px;height:1px;overflow:hidden; clip:rect(0 0 0 0);white-space:nowrap} /* Sprunglink zum Inhalt — erst sichtbar, wenn er den Fokus bekommt */ .zum-inhalt{position:absolute;left:-9999px;top:0;z-index:200;background:var(--verlauf); color:#fff;padding:12px 22px;border-radius:0 0 10px 0; font-family:'Roboto Condensed',sans-serif;font-weight:700;text-transform:uppercase; letter-spacing:.06em;font-size:14px} .zum-inhalt:focus{left:0;text-decoration:none} /* == 04 Typografie ========================================================= h1/h2 Rigelstar in Grossbuchstaben, h3/h4 Roboto Condensed 700 in Grossbuchstaben, alles andere Roboto. Silbentrennung erst ab 14 Zeichen, damit kurze Woerter heil bleiben und lange nicht ueberlaufen. */ h1,h2,h3,h4{margin:0;text-wrap:balance;overflow-wrap:break-word} h1,h2{font-family:'Rigelstar','Roboto Condensed',sans-serif;font-weight:400; text-transform:uppercase;line-height:1.06;letter-spacing:.01em; hyphens:auto;hyphenate-limit-chars:14 6 5; -webkit-hyphenate-limit-before:6;-webkit-hyphenate-limit-after:5} h1{font-size:clamp(29px,6.4vw,60px)} h2{font-size:clamp(24px,4.4vw,42px);line-height:1.12} h3{font-family:'Roboto Condensed',sans-serif;font-weight:700;font-size:clamp(19px,2.1vw,23px); line-height:1.25;text-transform:uppercase;letter-spacing:.02em} h4{font-family:'Roboto Condensed',sans-serif;font-weight:700;font-size:14px; text-transform:uppercase;letter-spacing:.09em;color:var(--blau);line-height:1.3} p{margin:0 0 1.1em} strong{font-weight:700} /* Lange Fliesstext-Ueberschriften (Datenschutz, Impressum, AGB) bleiben gemischt */ .bahn-schmal > h3,.text-block h3{text-transform:none;letter-spacing:0; font-size:clamp(18px,2vw,21px)} /* Auszeichnung im Verlauf. padding-block ist die Malflaeche, nicht Abstand: Der Hintergrund wird nur im Rahmenkasten gemalt und dann auf die Glyphen beschnitten; bei Rigelstar ragen Ü Ö Ä 0.19 em darueber hinaus und wurden ohne Polster durchsichtig — „im BÜRO" stand als „im BURO" da (gemessen 31.08.2026, betraf 2 der 32 Auszeichnungen im Bestand). Bei einem INLINE-Element kostet vertikales Polster nichts: Zeilenhoehe und Umbruch rechnen es nicht mit, es vergroessert nur die Malflaeche. Genau deshalb steht hier kein Ausgleich, anders als bei h2 in Abschnitt 04b. ⚠ Wer .verlauf einem Block-Element gibt, macht daraus echten Abstand. */ .verlauf{background:var(--verlauf-text);-webkit-background-clip:text;background-clip:text; -webkit-text-fill-color:transparent;color:var(--blau);padding-block:.3em} /* Kicker über der Ueberschrift. .augenbraue ist der Bestandsname, .kicker der aus dem Entwurf — beide sehen gleich aus, .kicker bringt den Strich mit. */ .augenbraue,.kicker{font-family:'Roboto Condensed',sans-serif;font-weight:700; text-transform:uppercase;letter-spacing:.16em;font-size:13px;color:var(--blau); line-height:1.4} .augenbraue{display:block;margin:0 0 14px} .kicker{display:inline-flex;align-items:center;gap:10px} .kicker::before{content:"";width:24px;height:2px;background:var(--verlauf);border-radius:2px} /* Abstand zur folgenden Ueberschrift — mit :where() ohne Spezifitaet, damit die Flex-Abstaende in .kopf/.section-kopf davon unberuehrt bleiben. */ :where(.kicker) + :where(h1,h2,h3){margin-top:14px} .kicker.hell,.hero .augenbraue,.sektion-dunkel .augenbraue,.band .augenbraue{color:var(--blau-hell)} .vorspann{font-size:clamp(17px,2vw,20px);line-height:1.6;color:var(--text-weich);max-width:62ch} .klein{font-size:15px;color:var(--text-leise)} /* Lesespalte: mehrere Absaetze mit gleichmaessigem Abstand */ .lese{display:flex;flex-direction:column;gap:18px;max-width:var(--lese)} .lese p{margin:0;font-size:16.5px;line-height:1.78;color:var(--text-weich)} /* == 04b Glanz auf Ueberschriften ========================================== Kommentar vom 27.08.2026: „Füge bei den Überschriften einen glanz effekt ein wenn man drüber geht beim hover." Kommentar vom 31.08.2026: „bitte nur einen glanz über die schrift und nicht dieser punkte der durchwandert." Kommentar vom 31.08.2026: „also der effekt heir ist kacke bitte raus nehemn und nur einen glanz der innerhalb der schrift läuft" Drei Sackgassen liegen hinter dieser Fassung. Alle drei bleiben hier beschrieben, damit sie niemand ein viertes Mal betritt. ── SACKGASSE 1: background-clip:text, erster Anlauf (27.08.2026) ───────── Ein heller Streifen lief durch die Buchstaben — genau das, was jetzt gewuenscht ist. Er frass aber die Umlautpunkte: „MÜNCHEN" wurde beim Zeigen zu „MUNCHEN". Die damalige Erklaerung: beschnitten werde auf die Zeilenbox, und nur eine Zeilenhoehe ab etwa 1.4 helfe — die haette jeden Umbruch verschoben. Daraufhin galt background-clip:text als verbrannt. Die Beobachtung stimmte, der Schluss daraus war falsch (siehe unten). ── SACKGASSE 2: Lichtschein HINTER dem Text (bis 31.08.2026) ───────────── Ein weicher radialer Schein wanderte mit z-index:-1 hinter den Buchstaben durch. Technisch unangreifbar, weil die Glyphen gar nicht angefasst wurden — aber der Betreiber sah einen Punkt durchs Bild wandern, waehrend die Schrift selbst stumpf blieb. ── SACKGASSE 3: Deckschicht UEBER dem Text (mix-blend-mode, 31.08.2026) ── Ein ::after ueber der ganzen Zeilenbox, das je nach Umgebung mit screen oder multiply gegen den Untergrund rechnete. Die Umlaute blieben heil, aber sichtbar war ein Balken ueber der Zeile, kein Glanz in der Schrift — das ist das „kacke" aus dem Kommentar. Dazu ein zweiter, harter Fehler: die Schicht waehlte ihren Blendmodus nach der SEKTION. In dunklen Sektionen stehen aber helle Kaesten (.kachel ist weiss, .callout ist #F6F7FB); dort wurde aus dem Glanz ein blauer Balken mit harten Kanten. Nachgewiesen auf ueber-uns, kick-off-event-planen, sommerfest-firma-planen, teamevent-ideen. ── WARUM SACKGASSE 1 KEINE WAR ─────────────────────────────────────────── background-clip:text beschneidet den Hintergrund auf die Glyphen; die Umlautpunkte gehoeren dazu. Gemalt wird der Hintergrund aber nur im RAHMENKASTEN des Elements. Bei einer Zeilenhoehe knapp ueber 1 ist der Rahmenkasten kuerzer, als die Glyphen hoch sind; was oben herausragt, bekommt gar keine Farbe und wird durchsichtig. Prozente bei background-size aendern die GROESSE des Verlaufs, nicht die FLAECHE, auf der ueberhaupt gemalt wird — deshalb halfen 100 %, 300 % und gar keine Angabe gleich wenig. Die Zeilenhoehe war nie die einzige Stellschraube: ein Polster oben tut dasselbe, ohne den Umbruch anzufassen. Nachgemessen am 31.08.2026, zweimal unabhaengig: Canvas-TextMetrics (actualBoundingBoxAscent gegen fontBoundingBoxAscent plus halbe Schulter) und ein Pixelvergleich der gerasterten Zeile gegen dieselbe Zeile ohne Beschnitt: h2, Rigelstar, Zeilenhoehe 1.12 Ü Ö Ä ragen 0.178 em (bei 42 px) bis 0.190 em (bei 24 px) nach oben heraus .spiel-panel h3, Rigelstar, 1.25 0.094 em h3, Roboto Condensed, 1.25 ragt nicht heraus, 0.077 em Luft h3 gemischt gesetzt (Abschnitt 4) ragt nicht heraus, 0.220 em Luft Alles andere bleibt drin: ß wird durch uppercase zu SS, „ und " sitzen tiefer als das Ü, das ! ebenso, und nach UNTEN ragt in keiner Groesse etwas heraus. Im Pixelvergleich fehlten ohne Polster in den obersten Bildzeilen alle Punkte, mit Polster 0,00 % der Tinte. Daher die beiden Zahlen unten: .3em Polster ist das 1,6-fache des schlimmsten gemessenen Falles und traegt damit auch eine spaetere Schriftgroesse; und das Polster sitzt nur OBEN, weil unten nichts herausragt. Das halbiert den Ausgleich: nur margin-top muss angefasst werden, jede Regel mit einem unteren Abstand (.karte h3, .text-block h2 …) bleibt unberuehrt. ── WAS JETZT PASSIERT ──────────────────────────────────────────────────── Der Hintergrund der Ueberschrift ist ein Verlauf, der ueberall genau currentColor ist und nur in einem schmalen Band nach var(--blau-hell) aufhellt. Er wird auf die Glyphen beschnitten, die Fuellfarbe der Schrift wird durchsichtig. Damit steht die Schrift in ihrer normalen Farbe da, und beim Zeigen laeuft das Band einmal INNERHALB der Buchstaben durch. Nichts liegt ueber der Zeile, nichts wandert dahinter. Weil die Grundfarbe currentColor ist, stimmt sie in jeder Umgebung von selbst: dunkle Schrift auf hellem Papier, weisse Schrift in .sektion-dunkel, im .hero, im .band, im .cta, im .spiel-panel — und ebenso die dunkle Schrift einer .kachel, die in einer dunklen Sektion steht. DIESE FASSUNG UNTERSCHEIDET NICHT MEHR NACH UMGEBUNG. Es gibt keinen Blendmodus mehr, der den Untergrund treffen koennte, also auch keinen Fall, in dem ein heller Kasten in einer dunklen Sektion die falsche Rechnung bekommt. Der Sonderfall .cta faellt damit weg, die Regelblocks fuer dunkle Umgebungen ebenso. Das Band ist var(--blau-hell) #8CC0F2, relative Helligkeit 0.497. Gegen die Textfarbe #15171F (0.007) ist es 9,6-mal heller — das ist der Glanz auf hellem Grund. Gegen weisse Schrift ist es 1,9-mal dunkler und deutlich blau — das ist der Glanz auf dunklem Grund, denn heller als Weiss geht nicht. Ein weisser Bandkern statt des blauen waere auf weisser Schrift unsichtbar und auf weissem Papier ein Loch im Buchstaben; beides geprueft und verworfen. ── AUSZEICHNUNGEN IN DER ZEILE ─────────────────────────────────────────── traegt selbst background-clip:text (Abschnitt 04). Der Hintergrund des Kindes liegt ueber dem der Ueberschrift, also behaelt die Auszeichnung ihren Blau-Violett-Verlauf und das Band laeuft an ihr vorbei. Das ist die bewusste Wahl unter dreien: Nimmt man ihr den eigenen Hintergrund, faellt sie fuer 0,9 s auf die Grundfarbe der Ueberschrift zurueck — die Farbe der Seite blinkt weg. Gibt man ihr ein eigenes Band, so richtet sich das an IHREM Kasten aus, nicht am Kasten der Ueberschrift, und laeuft damit zeitversetzt zum ersten. Ein Band, das die farbige Stelle auslaesst, ist von den drei Moeglichkeiten die einzige, die nicht nach Fehler aussieht. hat eine eigene, leisere Farbe und bekommt seine Fuellfarbe zurueck; sonst wuerde es beim Zeigen die Farbe der Ueberschrift annehmen. ── VIER FESTLEGUNGEN, die man leicht wieder kaputtmacht ────────────────── 1. Das Band wandert ueber background-position, nicht ueber transform. Verschoebe man die Flaeche selbst, liefe sie aus der Ueberschrift heraus. 2. Die Grundfarbe des Verlaufs ist currentColor, kein fester Wert. Sonst springt die Schrift beim Zeigen auf eine falsche Farbe — und genau das war der Grund, warum die Vorfassung nach Umgebung unterscheiden musste. 3. Durchsichtig wird -webkit-text-fill-color, NICHT color. color muss stehen bleiben, weil currentColor daraus kommt. 4. Hintergrund und Beschnitt entstehen erst beim Zeigen. Dauerhaft auf Text beschnitten zwingt jede Ueberschrift den Browser, sie als Maske zu rastern; das kostet an jeder der 859 Ueberschriften dieser Website etwas, ohne dass jemand hinsieht. ── DAS POLSTER UND SEIN AUSGLEICH ──────────────────────────────────────── padding-top vergroessert den Rahmenkasten nach oben, margin-top zieht ihn um denselben Betrag zurueck. Text und alles darunter stehen exakt wie vorher; nachgemessen auf allen 42 Seiten und 859 Ueberschriften, groesste Bewegung beim Zeigen 0,00 px. Drei Umgebungen setzen den oberen Abstand selbst und wuerden den Ausgleich ueberschreiben oder von ihm ueberschrieben; dort steht er noch einmal: .kopf/.section-kopf/.hero-text margin:0 auf alle Kinder (Abschnitt 05) .band h2 margin:0 auto (Abschnitt 19) .text-block h2 ein clamp-Wert (Abschnitt 23) ⚠ Wer den clamp-Wert in Abschnitt 23 aendert, muss ihn hier mitziehen. CSS kann einen fremden Abstand nicht addieren, nur ersetzen — deshalb steht der Wert zweimal da, und deshalb steht diese Warnung hier. NICHT in dieser Liste steht :where(.kicker) + :where(h1,h2,h3) aus Abschnitt 04. Die Regel sieht so aus, als setze sie 14 px vor jede Ueberschrift hinter einem Kicker — sie tut es nirgends. Weil beide Teile in :where() stehen, hat sie Spezifitaet 0-0-0 und verliert gegen h1,h2,h3,h4{margin:0} (0-0-1) zwei Zeilen darueber. Gemessen: der obere Abstand hinter einem Kicker ist auf allen Seiten 0 px. Ein Ausgleich fuer diese 14 px wuerde die Zeile beim Zeigen also um genau 14 px nach unten werfen — genau das ist beim Messen passiert, bevor diese Zeile hier stand. (hover:hover) haelt Beruehrbildschirme heraus — dort gibt es kein Zeigen, der Glanz wuerde beim Antippen zufaellig zuschlagen. Wer keine Bewegung will, bekommt ueber die zweite Bedingung gar keine Regel; am Ende von Abschnitt 25 wird zusaetzlich pauschal jede Animation gedrosselt. */ @media (hover:hover) and (prefers-reduced-motion:no-preference){ /* 03.09.2026 — h1 kam dazu. Der Betreiber meint mit „den Ueberschriften" ausdruecklich auch die Zeile ganz oben im Hero. Sie steht in Rigelstar wie h2, also gilt fuer sie dieselbe Rechnung und dasselbe Polster. */ h1:hover,h2:hover,h3:hover{ background-image:linear-gradient(102deg, currentColor 43%,var(--blau-hell) 50%,currentColor 57%); background-size:300% 100%;background-repeat:no-repeat; -webkit-background-clip:text;background-clip:text; -webkit-text-fill-color:transparent; animation:kopf-glanz .9s linear; } /* Bei background-size 300 % liegt die helle Mitte des Bandes bei Position 100 % eine halbe Kastenbreite LINKS neben dem Kasten und bei 0 % eine halbe rechts daneben. 100 % nach 0 % zieht sie also einmal von links nach rechts hindurch; davor und danach steht sie ausserhalb. linear, nicht ease-out: Die Ueberschrift steht links im Kasten, ihr Text fuellt selten mehr als die halbe Breite. Mit ease-out war das Band nach 200 ms ueber den Buchstaben durch und trudelte den Rest der Zeit ueber leerem Papier aus, wo es niemand sieht. */ @keyframes kopf-glanz{ from{background-position:100% 0} to {background-position:0% 0} } /* Malflaeche fuer die Umlautpunkte — Messung und Begruendung oben. Nur Rigelstar braucht sie: jedes h2, und von den h3 nur das im .spiel-panel, weil dort ebenfalls Rigelstar steht. Wer Rigelstar einer weiteren Ueberschrift gibt, traegt sie hier ein. */ /* h1 hat mit 1.06 die engste Zeilenhoehe von allen und braucht das Polster erst recht — bei clamp(29px,6.4vw,60px) ragen Ue Oe Ae bis 0.19 em heraus, .3em traegt das mit Reserve. Kein unteres Polster, unten ragt nichts. */ h1:hover,h2:hover,.spiel-panel h3:hover{padding-top:.3em;margin-top:-.3em} /* Ausgleich in den Umgebungen mit eigenem oberen Abstand */ :is(.kopf,.section-kopf,.hero-text) > h2:hover{margin-top:-.3em} .band h2:hover{margin-top:-.3em} .text-block h2:hover{margin-top:calc(clamp(44px,5vw,64px) - .3em)} /* .hero-text h1 traegt margin-top:20px (Abschnitt 08) — CSS kann fremde Abstaende nicht addieren, also steht der Wert hier noch einmal. */ .hero-text h1:hover{margin-top:calc(20px - .3em)} /* Die leise Auszeichnung behaelt ihre eigene Farbe, siehe oben */ h1:hover .klein,h2:hover .klein,h3:hover .klein{-webkit-text-fill-color:currentColor} } /* == 05 Raster und Sektionen =============================================== */ .bahn,.wrap{width:min(var(--breite),100% - var(--rand)*2);margin-inline:auto} .bahn-schmal{width:min(var(--schmal),100% - var(--rand)*2);margin-inline:auto} /* Rasterspalten duerfen schmaler werden als ihr laengstes Wort. Ohne diese Regel sprengt ein Wort wie "Dienstagnachmittag" auf dem Handy die ganze Spalte — Grid-Spuren sind sonst mindestens so breit wie ihr min-content. */ .zweispalt > *,.zweispalt-schmal > *,.karten > *,.kachel-raster > *,.grid-2 > *, .spiele-grid > *,.vergleich > *,.vergleich-grid > *,.szenario-grid > *, .kapazitaet-grid > *,.anpassung-grid > *,.vorbed-grid > *,.raetsel-reihe > *, .schritte > *,.passt-dazu > *,.fuss-raster > *,.schritt-inhalt, .check-zeile p,.vergleich-punkt p,.live-hinweis p,.spiel-panel .fakten > div{min-width:0} section{position:relative} .sektion{padding-block:var(--abstand-sektion)} .sektion-eng{padding-block:clamp(40px,6vw,72px)} .sektion-alt{background:var(--grund-alt)} .sektion-dunkel{background:var(--dunkel);color:var(--text-hell-weich)} .sektion-dunkel h1,.sektion-dunkel h2,.sektion-dunkel h3{color:var(--text-hell)} .sektion-dunkel h4{color:var(--text-hell-leise)} .sektion-dunkel .vorspann,.sektion-dunkel .lese p{color:var(--text-hell-weich)} .sektion-dunkel a{color:var(--blau-hell)} /* Helle Kaesten in einer dunklen Sektion behalten die dunklen Textfarben. Die vier Regeln darueber gelten fuer die ganze Sektion — auch fuer Kaesten, die ihre eigene helle Flaeche mitbringen. Dort steht dann Weiss auf Weiss. Gemessen am 31.08.2026 ueber alle 42 Seiten (Kontrast nach WCAG gegen den tatsaechlichen Untergrund, nicht nach Augenmass): 9 x h3 in .kachel und in .vergleich, Kontrast 1.00:1 — voellig unsichtbar (kick-off-event-planen, sommerfest-firma-planen, ueber-uns, it-sicherheit-schulung-mitarbeiter) 1 x h3 im .callout 1.07:1 und der Link darin 1.79:1 (teamevent-ideen) 8 x Absatz im .hinweis 1.75:1 4 x Listenpunkt .haken li im .vergleich 1.87:1 1 x h4 in der .info-box 2.99:1 Deshalb steht hier nicht nur die Ueberschrift, sondern alles, was Farbe erbt oder von der dunklen Sektion ausdruecklich gesetzt wird. In die Liste gehoert jeder Baustein mit eigener HELLER Flaeche. ⚠ Nicht hinein gehoeren: .karte und .vorlage (haben in dunklen Sektionen schon ihre eigene dunkle Fassung), .kachel-zahl (alle Kinder setzen ihre Farbe selbst, .akzent ist ausserdem dunkel), .vorbed-box und .cta-zeile (keine eigene helle Flaeche), .vergleich-spalte.ux (nur ein Hauch Blau ueber durchsichtig, in einer dunklen Sektion also dunkel). .vergleich steht als Container in der Liste, nicht seine Kinder: So bleibt diese Regel bei Spezifitaet 0-2-1 und die spaetere Sonderfarbe .vergleich .gut h3 (Abschnitt 14) gewinnt weiterhin ueber die Reihenfolge. Wer .schritte hier eintraegt, muss dasselbe fuer .schritte h3 bedenken. */ .sektion-dunkel :is(.kachel,.callout,.hinweis,.info-box,.vergleich){color:var(--text)} .sektion-dunkel :is(.kachel,.callout,.hinweis,.info-box,.vergleich) :is(h1,h2,h3){color:var(--text)} .sektion-dunkel :is(.kachel,.callout,.hinweis,.info-box,.vergleich) h4{color:var(--blau)} .sektion-dunkel :is(.kachel,.callout,.hinweis,.info-box,.vergleich) a{color:var(--blau)} .sektion-dunkel :is(.kachel,.callout,.hinweis,.info-box,.vergleich) .haken li{color:var(--text-weich)} .zentriert{text-align:center} .zentriert .vorspann{margin-inline:auto} /* Sektionskopf: Kicker + Ueberschrift + Vorspann als eine Einheit */ .kopf,.section-kopf{display:flex;flex-direction:column;gap:16px;max-width:700px; margin-bottom:clamp(32px,4.5vw,56px)} .kopf > *,.section-kopf > *{margin:0} .kopf.zentriert,.section-kopf.zentriert{margin-inline:auto;align-items:center} .section-kopf.breit,.kopf.breit{max-width:840px} /* == 06 Knoepfe ============================================================ .knopf ist der Bestandsname, .btn der aus dem Entwurf. Gleiches Aussehen. */ .knopf,.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px; border-radius:999px;font-family:'Roboto Condensed',sans-serif;font-weight:700; text-transform:uppercase;letter-spacing:.03em;font-size:14.5px;line-height:1.2; border:0;cursor:pointer;white-space:nowrap;text-align:center; transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease,background .25s ease} .knopf,.btn-primary{padding:15px 28px;background:var(--verlauf);color:#fff; box-shadow:0 4px 18px rgba(44,125,206,.28)} .knopf:hover,.btn-primary:hover{transform:translateY(-2px);color:#fff;text-decoration:none; box-shadow:0 10px 24px rgba(44,125,206,.4),0 20px 46px rgba(123,67,151,.26)} .knopf-leise,.btn-sek{padding:13px 26px;background:transparent;border:2px solid var(--linie); color:var(--blau);box-shadow:none} .knopf-leise:hover,.btn-sek:hover{border-color:var(--blau);color:var(--blau); background:rgba(44,125,206,.06);box-shadow:none;transform:translateY(-2px)} .knopf-leise.hell,.btn-sek.hell,.hero .knopf-leise,.sektion-dunkel .knopf-leise, .band .knopf-leise{border-color:rgba(255,255,255,.28);color:#fff} .knopf-leise.hell:hover,.btn-sek.hell:hover,.hero .knopf-leise:hover, .sektion-dunkel .knopf-leise:hover,.band .knopf-leise:hover{ border-color:#fff;color:#fff;background:rgba(255,255,255,.1)} .knopf-klein{padding:11px 20px;font-size:13.5px} .knopf svg,.btn svg{width:18px;height:18px;flex:0 0 auto} .knopf-reihe,.hero-cta{display:flex;flex-wrap:wrap;gap:14px;margin-top:30px} .zentriert .knopf-reihe,.zentriert .hero-cta{justify-content:center} /* Textlink mit Pfeil, der beim Ueberfahren wandert */ .mehr,.karte-mehr{display:inline-flex;align-items:center;gap:8px; font-family:'Roboto Condensed',sans-serif;font-weight:700;text-transform:uppercase; letter-spacing:.05em;font-size:13px;color:var(--blau); transition:color .2s ease} .mehr:hover,.karte-mehr:hover{color:var(--violett);text-decoration:none} .mehr svg,.karte-mehr svg{width:16px;height:16px;transition:transform .2s ease} .mehr:hover svg,.karte-mehr:hover svg{transform:translateX(4px)} /* == 07 Kopfleiste ========================================================= 96px hoch, klebt oben, milchig hinterlegt. Die Navigation liefert bauen.py als