/* ========================================================================== tokens.css — verbindliche Gestaltungsgrundlage (SPEC 9.1.1, D-1 bis D-13) Alle Gestaltungswerte des Vorhabens liegen an dieser einen Stelle (D-1). Kein Element bekommt je einen eigenen Schriftgrad, Abstand oder Farbwert; braucht etwas eine Sonderbehandlung, entsteht hier eine neue benannte Rolle (D-3). Die Werte sind wörtlich aus 9.1.1 übernommen und weder nachgerechnet noch gerundet — die dortigen Messwerte mussten zweimal berichtigt werden, und jede stille Rundung hier hebt das wieder auf. ⚠️ Die Tokennamen sind deutsch. Das ist die in B-33 ausdrücklich vermerkte Ausnahme von der Sprachregelung: Sie sind keine Bezeichner im Programmcode, sondern die gemeinsame Sprache zwischen SPEC und Stylesheet. Diese Datei gestaltet nichts. Sie erklärt Werte; die Regeln, die sie anwenden, stehen seit S-6 in seite.css. ========================================================================== */ /* -------------------------------------------------------------------------- 1 · Schriften — selbst gehostet (W-10, M-9) ⚠️ Warum die @font-face-Regeln hier stehen und nicht in seite.css: Sie sind keine gestaltenden Regeln, sondern Schriftbeschreibungen — Schnitt, Gewicht, Ladeverhalten, Dateiname. Sie gehören damit zu den Werten und nicht zu deren Anwendung, und die Prüfung aus S-5 nimmt genau diesen abgesetzten Abschnitt in dieser Datei aus. Nebenbei ist die Reihenfolge gesichert: @font-face steht vor :root. ⚠️ Berichtigt am 07.09.2026 mit S-6. Hier stand bis dahin eine Begründung gegen ein zweites Stylesheet überhaupt: Es zwänge das Prüfskript zu einer Ausnahmeliste, und es koste einen zweiten Abruf im Ladepfad (W-7). Beides trägt nicht. Die Ausnahme aus S-5 ist über den vollständigen Pfad dieser einen Datei gezogen und wächst nicht mit; und gestaltende Regeln können weder hierher — die Prüfung bricht darauf ab — noch in die Vorlagen, für die es keine Ausnahme gibt. Der zweite Abruf ist der Preis dafür und in der Zeile S-6 des Anhangs C so entschieden; beide Dateien sind klein und kommen von derselben Domäne. Vier Schnitte (Q-130, Anhang C S-4): 400, 500 und 700 aufrecht sowie 400 kursiv. 700 kursiv entfällt — er kommt im Ist-Zustand genau einmal vor, und K-21 hebt genau diese Stelle auf. Die Dateien entstehen reproduzierbar aus assets/schriften/ über tools/schriften-beschneiden.py; die Lizenz liegt daneben in static/schriften/OFL.txt und wird mit ausgeliefert (M-9). Kein Abruf an eine fremde Domäne (W-10, B-27). -------------------------------------------------------------------------- */ @font-face { font-family: "Poppins"; font-style: normal; font-weight: 400; font-display: swap; src: url("../schriften/poppins-400.48b413880fd5.woff2") format("woff2"); } @font-face { font-family: "Poppins"; font-style: normal; font-weight: 500; font-display: swap; src: url("../schriften/poppins-500.3c2eb48d2fbf.woff2") format("woff2"); } @font-face { font-family: "Poppins"; font-style: normal; font-weight: 700; font-display: swap; src: url("../schriften/poppins-700.59ce83cded5a.woff2") format("woff2"); } @font-face { font-family: "Poppins"; font-style: italic; font-weight: 400; font-display: swap; src: url("../schriften/poppins-400-kursiv.91a610547509.woff2") format("woff2"); } /* -------------------------------------------------------------------------- 2 · Tokens -------------------------------------------------------------------------- */ :root { /* Farben (9.1.1, „Rollennamen für Farben, Schrift und Linien") */ --farbe-akzent: #2B7481; --farbe-kopfleiste-grund: #F0F0F0; --farbe-trennlinie: #C2C2C2; --farbe-text: #000000; --farbe-text-invers: #FFFFFF; --farbe-pfeil: #6E6E6E; /* ⚠️ Wertgleich mit --farbe-text-invers, aber eine andere Funktion (K-14). D-3 verlangt die Trennung: Eine Textrolle als Flächenfarbe zu verwenden wäre der erste Schritt zurück in den Wix-Zustand. */ --farbe-grund: #FFFFFF; /* Hero-Abdunklung (K-10, K-26). Der Verlauf selbst gehört zu S-7; die Werte stehen hier, weil sie in 9.1.1 stehen. ⚠️ --deckkraft-hero-abdunklung-stark ersetzt die frühere Rolle --deckkraft-hero-bild: „Bild bei 55 % über Schwarz" ist nicht dasselbe wie „schwarze Schicht mit 55 %". 0,55 ist der kleinste Alphawert der Schicht, der die 4,5:1 aus WCAG 2.1 SC 1.4.3 hält (K-26). */ --farbe-hero-abdunklung: #000000; --deckkraft-hero-abdunklung-stark: 0.55; --deckkraft-hero-abdunklung-schwach: 0.15; /* Farbstopps des Hero-Verlaufs (9.1.1, K-10). Ein Verlauf braucht je Stopp **eine** Farbe mit Alphawert; die Zusammensetzung unmittelbar in seite.css wäre ein harter Farbwert und würde von der Prüfung aus D-2 zu Recht gemeldet. Zusammengesetzt wird deshalb hier, aus den beiden Rollen darüber — es entsteht kein neuer Wert. */ --farbe-hero-verlauf-stark: color-mix( in srgb, var(--farbe-hero-abdunklung) calc(var(--deckkraft-hero-abdunklung-stark) * 100%), transparent ); --farbe-hero-verlauf-schwach: color-mix( in srgb, var(--farbe-hero-abdunklung) calc(var(--deckkraft-hero-abdunklung-schwach) * 100%), transparent ); /* Kennzeichnung KI-erzeugter Bilder (K-25a bis K-25g, 6.5). Der Bildbaustein setzt sie seit S-8 von selbst, sobald das Bildverzeichnis für ein Motiv `ki_erzeugt` führt (M-10). ⚠️ --deckkraft-kennzeichnung ist der Startwert aus K-25c. Hält die Messung nach K-25d die 4,5:1 bei diesem Wert nicht, ist zuerst K-25c zu ändern und dann zu bauen — nicht umgekehrt (AC-4). Die Laufweite steht bewusst in em: Sie gehört zum Schriftgrad, nicht zur Seite. ⚠️ Berichtigt am 10.09.2026: Hier stand, die Kennzeichnung bekomme keinen eigenen Schriftgrad und nehme --fs-klein. K-25c ist seither überholt — bei 16 px stand sie fast so groß wie der Hero-Absatz und war damit auffälliger, als K-25d es zulässt. Der Grad steht jetzt als eigene Rolle --fs-kennzeichnung bei den Schriftgraden. */ --deckkraft-kennzeichnung: 0.6; --laufweite-kennzeichnung: 0.08em; /* Eckschleier (K-25f). Er macht den Kontrast unabhängig davon, was der Beschnitt aus M-11 gerade unten rechts stehen lässt — Himmel oder Fassade. Maße in rem, damit er mit der Grundschrift mitwächst: Er soll genau den Text abdecken, den er schützt (D-4). Die Farbe ist --farbe-hero-abdunklung, es entsteht kein neuer Farbwert. ⚠️ 0,58 seit v0.93 der SPEC, angehoben von 0,45: Seit dem Tausch der Schichtfolge (K-25e) trägt der Verlauf nichts mehr zur Schrift bei, und der Schleier allein hält den Kontrast — bei 0,45 blieben auf dem Desktop 3,73:1. Der Wert steht in 9.1.1; verbindlich ist die Messung aus K-25d, nicht die Zahl. Gehoben wurde der Schleier und nicht --deckkraft-kennzeichnung: Eine hellere Schrift liefe gegen K-25d. ⚠️ 0,64 seit v0.104, angehoben von 0,58: Mit der zweiten Breitenebene und der berichtigten Textbreite bricht der Hero-Absatz in sechs statt fünf Zeilen um; der Bereich wächst, der Bildausschnitt verschiebt sich, und hinter der Kennzeichnung steht eine hellere Stelle des Motivs — bei 1200 px blieben 4,29:1. Ursache ist die Geometrie, nicht der Wert; mit 16 px stünden dort dieselben 4,29:1. Der kleinste tragende Wert wäre 0,61 gewesen. ⚠️ **Die sechste Zeile hat es nie gegeben** *(13.09.2026)*. Sie war ein Fehler des Umbruchmodells in tools/kontrast-pruefen.py, das den Absatz allein an Leerzeichen zerlegte und die Bruchstelle nach einem Bindestrich übersah (UAX #14); der Browser zeigt fünf, und K-19 nennt ebenfalls fünf. **Die Begründung der Anhebung ist damit hinfällig, der Wert bleibt:** Er steht in 9.1.1, und verbindlich ist nach K-25f ohnehin die Messung und nicht die Zahl. Gemessen hält jetzt auch 0,55 noch gerade die Grenze (Desktop 4,50:1); mit 0,64 stehen dort 5,28:1. Eine Senkung wäre eine Änderung der SPEC und ist gemeldet, nicht hier vorgenommen (AC-4). */ --breite-eckschleier: 15rem; --hoehe-eckschleier: 5rem; --deckkraft-eckschleier: 0.64; /* Hinweisblock (K-21). --linie-staerke ist mit 1 px als Akzentkante unsichtbar, und --linie-staerke-fokus mit einer zweiten Bedeutung zu belegen schließt D-3 aus. Die Fläche ist wertgleich mit der Kopfleiste: „leicht abgesetzt" ist genau das, was #F0F0F0 gegen Weiß leistet — in K-27 als Kante zu schwach, als Fläche richtig. Eigene Rolle, weil eine Kopfleistenfarbe als Hinweisfläche zwei Bedeutungen trüge. */ --linie-staerke-hinweis: var(--raum-1); --farbe-hinweis-grund: var(--farbe-kopfleiste-grund); --abstand-hinweis-x: var(--raum-4); --abstand-hinweis-y: var(--raum-3); /* Drehung des Chevrons am geöffneten Akkordeon-Eintrag (9.1.1, S-7). Eigene Rolle, weil die Prüfung aus D-2 `rotate` nicht erfasst und der Wert sonst als einziger Gestaltungswert frei im Stylesheet stünde. */ --drehung-pfeil-offen: 180deg; /* Fläche und Beschriftung des Knopfes (K-5, K-6). Sie verweisen auf vorhandene Rollen, statt sie zu wiederholen: K-6 beschreibt nur den Hover, der Ruhezustand stand bis v0.85 nirgends. ⚠️ Berichtigt am 10.09.2026 (9.1.1). Hier stand Schwarz mit weißem Text, abgeleitet aus K-6 („Text bleibt weiß"), weil der Ruhezustand nirgends belegt war. Die Messung an der alten Seite widerlegt die Ableitung: **weißer Grund, schwarzer Text**. Der Hover-Zustand bleibt unverändert — Petrol mit weißem Text, ausdrücklich bestätigt; damit wechselt beim Überfahren jetzt auch die Textfarbe, Weiß auf Petrol hält 5,36:1. ⚠️ Für die Beschriftung beim Überfahren führt 9.1.1 **keine eigene Rolle**; seite.css nimmt dort --farbe-text-invers, die Rolle, die das Kapitel für Text auf dunklem Grund führt. Eine neue Rolle wäre nach AC-4 erst in der SPEC anzulegen. */ --farbe-knopf-grund: var(--farbe-grund); --farbe-knopf-text: var(--farbe-text); --farbe-knopf-grund-hover: var(--farbe-akzent); /* Fokusanzeige (K-9, B-24). Petrol auf hellem Grund misst 5,36:1 auf Weiß und 4,70:1 auf der Kopfleiste; auf der Petrol-Fußzeile und im Hero ist Weiß zwingend, nicht wahlweise — Petrol auf Petrol ergibt 1,0:1. */ --farbe-fokus: var(--farbe-akzent); --farbe-fokus-invers: var(--farbe-text-invers); /* Linien. 1 px nach der Messgenauigkeit in 9.1.1; die Fokusanzeige ist dicker, weil sie bei 1 px von einer Trennlinie nicht zu unterscheiden wäre. */ --linie-staerke: 1px; --linie-staerke-fokus: 3px; /* Schrift. Der Ersatzstapel trägt die swap-Phase — keine fremde Domäne. */ --schrift-familie: "Poppins", system-ui, sans-serif; --gewicht-normal: 400; --gewicht-halbfett: 500; --gewicht-fett: 700; /* Zeilenhöhen. 1.2 für alle Überschriften einschließlich der Akkordeon-Titelzeile (K-18); deren gemessene 1,8 wird nicht übernommen, die Höhe der Zeile hält die Mindesthöhe. */ --zeilenhoehe-ueberschrift: 1.2; --zeilenhoehe-fliesstext: 1.6; /* Schriftgrade (9.1.1, „Schriftgrade als clamp()"). Ankerbreiten aller clamp()-Ausdrücke sind 320 px und 1200 px; jeder Mittelterm behält einen rem-Anteil (D-10). Endwerte aus der Liste in D-5 — 16/18/20/25/28/37/48 px —, seit dem 13.09.2026 ungerundet am Original gemessen. */ --fs-hero: clamp(1.5625rem, 1.0398rem + 2.6136vw, 3rem); --fs-abschnittstitel: clamp(1.5625rem, 1.2898rem + 1.3636vw, 2.3125rem); /* Akkordeon-Titelzeile, fest bei Gewicht 500. ⚠️ **Zweite Änderung am 13.09.2026, und sie nimmt die erste zurück** (9.1.1, K-22). Die Zeile stand am Morgen auf 20 px, ging auf die gemessenen 22 px und steht seit dem zweiten Sichtabgleich wieder auf 20 px: Mit 22 px brach die Titelzeile des zweiten Eintrags erneut um — genau der Umbruch, wegen dessen das Akkordeon zuvor auf --breite-akkordeon verbreitert worden war. Der Abstand zum Inhalt beträgt mit dessen 18 px weiterhin zwei Stufen im Gewicht und zwei Pixel im Grad; die Gliederung trägt damit das Gewicht, wie K-22 es ursprünglich vorsah. 20 px liegen auf der Stufung aus D-5. */ --fs-panel-titel: 1.25rem; /* ⚠️ Am 13.09.2026 von 20 auf 18 px gesenkt (9.1.1). Die Rundung auf 20 war zu grob: Gemessen sind im Hero 18,22 px, und im Vergleich wirkte der Fließtext überall zu groß — auch in den Rechtstexten, wo er den ohnehin dichten Text unnötig streckte. 18 steht seit der Neufassung von D-5 in der Liste. */ --fs-fliesstext: clamp(1rem, 0.9545rem + 0.2273vw, 1.125rem); --fs-klein: 1rem; /* Fließtext der Fußzeile, 20 px (9.1.1, neu am 13.09.2026). Der allgemeine Fließtext ist am selben Tag auf 18 px gesenkt worden; in der Fußzeile sind 20 px gemessen, und dort gehören sie hin. Eine eigene Rolle statt einer Ausnahme, weil beide Grade nebeneinander bestehen — die Fußzeile läuft damit nicht mehr auf --fs-fliesstext mit. Fest und nicht flüssig, wie die übrigen gemessenen Fußzeilengrade daneben. */ --fs-fusstext: 1.25rem; /* Rechte Fußzeilenüberschrift, gemessen 28 px (9.1.1, neu am 10.09.2026). Die alte Seite führt in der Fußzeile zwei verschiedene Überschriftengrade — 37 px links, 28 px rechts —, und der Unterschied trägt dort die Hierarchie. 28 steht seit der Neufassung von D-5 in der Liste; bis dahin war der Wert auf 31 gerundet. ⚠️ Am 13.09.2026 von 31 auf die gemessenen 28 px gesenkt. */ --fs-nebentitel: 1.75rem; /* E-Mail-Adresse in der Fußzeile, gemessen 26 px (9.1.1, neu am 10.09.2026). Sie ist der auffälligste Text der Fußzeile, und das ist Absicht: der einzige Kontaktweg der Seite (W-13). Auf der Skala gerundet 25 px. */ --fs-kontaktzeile: 1.5625rem; /* Grad der KI-Kennzeichnung (9.1.1, neu am 10.09.2026; K-25c). Bisher lief sie auf dem kleinen Grad mit: Bei 16 px war die Kennzeichnung fast so groß wie der Hero-Absatz. ⚠️ Dieser Grad ist die **einzige** Ausnahme unterhalb der Liste aus D-5 (neu gefasst am 13.09.2026). Die frühere Begründung — die nächste Stufe der Skala nach unten — entfällt mit dem Faktor; der Wert bleibt, weil er gemessen wurde. Die Kennzeichnung ist keine Leseschrift, sondern eine rechtliche Angabe, die nach K-25d absichtlich zurückhaltend steht. ⚠️ Mit ihr ändert sich das gemessene Rechteck — die Prüfung nach K-25d ist zu wiederholen, und die Maske des Eckschleiers rechnet denselben Grad (K-25f). */ --fs-kennzeichnung: 0.8rem; /* Breiten (D-6). --breite-inhalt begrenzt die Abschnitte, --breite-text jeden Fließtext (K-19) und zusätzlich das Akkordeon (K-22). ⚠️ --breite-text von 70ch auf 58ch berichtigt am 10.09.2026: ch misst die Vorbreite der Ziffer Null, nicht ein Durchschnittszeichen. 70ch ergaben in Poppins bei 20 px 879 px und damit rund 85 gesetzte Zeichen; 58ch ergeben rund 729 px und damit tatsächlich etwa 70 Zeichen. Die alte Seite misst an derselben Stelle 709,7 px. */ --breite-inhalt: 1200px; --breite-text: 58ch; /* Breite des Hero-Absatzes, rund 712 px bei 18 px Schrift (9.1.1, neu am 13.09.2026). Gemessen sind im Original 709,7 px. **Eigene Rolle statt --breite-text**, weil der Hero-Absatz sich sichtbar vom Titel absetzen muss: Der längste Titelsatz misst rund 550 px, und mit der auf 70 Zeichen begrenzten Fließtextbreite bliebe bei 18 px kaum ein Unterschied — im Original sind es rund 160 px. Die Zeile trägt damit etwa 76 Zeichen; K-19 bleibt davon unberührt, siehe dort. ⚠️ **Am 13.09.2026 von 63 auf 61 Zeichen verengt, rund 690 px** (9.1.1). Bei 63 Zeichen blieb die längste Zeile nur zwölf Pixel unter der Spaltenbreite; ein einzelnes kurzes Wort stand dadurch allein am rechten Rand, und der Satzspiegel franste sichtbar aus. Bewusst weder auf die gemessenen 709,7 px des Originals noch auf die 700, bei denen es sich gerade löst — mit zweieinhalb Pixeln Abstand käme der Fall bei jeder Textänderung zurück. ⚠️ --breite-hero-verlauf liest diese Rolle mit: Wer sie ändert, verschiebt die Rampe des Hero-Verlaufs und muss nach K-26 neu messen. */ --breite-hero-text: 61ch; /* Breite des Textblocks in der linken Fußzeilenspalte, rund 503 px bei 20 px Schrift (9.1.1, neu am 13.09.2026). Am Original gemessen; die Spalte selbst ist mit 651,7 px breiter, der Text darin steht schmaler. Ohne eigene Breite füllte er die ganze Spalte. Die Rolle begrenzt deshalb den Text, nicht die Spalte — an der Spaltenbreite hängt der Umbruch der Fußzeile (Q-137), und der soll sich nicht mitverschieben. */ --breite-fuss-text: 40ch; /* Breite des Akkordeons, 800 px (9.1.1, neu am 13.09.2026). Bisher hing es an --breite-text — mit dem Ergebnis, dass die Titelzeile des zweiten Eintrags umbrach. **Eine Titelzeile ist kein Fließtext**, und die Begrenzung aus K-19 hat dort nichts zu suchen; mit dem Fließtext auf 18 px wäre es zudem noch schmaler geworden. Der Auftraggeber hat 70 px mehr verlangt, also einen Kopf von 750 px; 50 rem ergeben 752 px bei 24 px Innenabstand je Seite — zwei Pixel mehr, dafür ein glatter Wert, der mit der Grundschrift wächst. */ --breite-akkordeon: 50rem; /* Feste Breite der Nummer in der Akkordeon-Titelzeile, 24 px (9.1.1, neu am 13.09.2026). Ohne sie beginnt der Titeltext bei jedem Eintrag anders — gemessen zwischen 42 und 47 px —, weil die Ziffern in einer Proportionalschrift verschieden breit sind. Mit fester Breite beginnen alle Titel an derselben Stelle, und der Inhalt richtet sich mit **einem** Wert daran aus statt mit sieben. Die Nummer wird dafür ein eigenes Element; der Text selbst ändert sich nicht, nur seine Auszeichnung (B-16). */ --breite-nummer: var(--raum-4); /* Strecke, über die der Hero-Verlauf vom schwachen auf den starken Wert ansteigt: genau das, was rechts neben der Textspalte übrig bleibt (K-10). Gemessen wird sie vom rechten Rand des Verlaufskastens aus; wo sie endet, ist der Verlauf voll stark und bleibt es nach links. Auf schmalen Breiten wird der Ausdruck negativ und auf 0 gekappt — der Hero ist dann gleichmäßig stark abgedunkelt, was dort richtig ist, weil der Text die volle Breite einnimmt. Der Verlauf verschwindet also von selbst, ohne festen Umbruchpunkt (W-8, D-10). ⚠️ Neu gebildet am 10.09.2026, der bisherige Ausdruck ist verworfen (9.1.1, K-10). Er lautete `100% - var(--breite-text) - 2 * var(--abstand-rand)` und maß die Strecke damit von der **Fensterkante**: Er nahm an, die Textspalte beginne einen Seitenrand hinter dem linken Fensterrand. Sie sitzt aber im mittig begrenzten Randcontainer (D-6) und rückt seit dem 10.09.2026 noch einmal um --abstand-block-x nach rechts. Die rechte Kante der Spalte lag damit im schwachen Teil des Verlaufs; über einem weißen Untergrund blieben bei 1920 px 3,04:1 statt der 4,5:1 aus K-26. Dass am heutigen Motiv hinter dem Text kein Weiß steht, ist ein Zufall dieses Bildes und keine Eigenschaft der Lösung. Der neue Ausdruck liest die linke Kante der Textspalte aus denselben drei Rollen, aus denen der Randcontainer sie in seite.css aufbaut, und zählt die Textbreite dazu: linke Kante = (100% - Kastenbreite) / 2 + --abstand-rand + --abstand-block-x Kastenbreite = min(100%, --breite-inhalt) Strecke = 100% - linke Kante - --breite-hero-text ⚠️ Berichtigt am 13.09.2026 mit SPEC v0.111: Hier stand --breite-text, obwohl der Hero-Absatz seit v0.110 mit --breite-hero-text eine eigene Breite hat. Die Rampe endete dadurch 56 px vor der rechten Kante des Absatzes, und über diesen letzten fünf Zeichen blieben über weißem Untergrund 4,10:1. Derselbe Mangel wie am 10.09.2026, nur kleiner — dort lag der Ausdruck 396 px daneben. Wer die Breite des Absatzes ändert, muss diesen Ausdruck mitziehen. ⚠️ **Berichtigt am 14.09.2026 mit SPEC v0.127:** Die Kastenbreite lautete `--breite-inhalt + 2 * --abstand-rand`, weil der Randcontainer den Seitenrand außen aufschlug. Er liegt seither innerhalb der Sektion, und die Kastenbreite ist --breite-inhalt allein. Ohne das Mitziehen hätte die Rampenkante 32 px neben der Textspalte gestanden — derselbe Mangel wie am 10.09. und am 13.09.2026, nur noch kleiner. Der Ausdruck nennt die Kastenbreite wörtlich; wer sie ändert, muss ihn mitziehen. zusammengefasst zu der Form unten. Damit endet die Strecke genau an der **rechten** Kante der Textspalte: Über der ganzen Spalte liegt die volle Abdunklung aus --deckkraft-hero-abdunklung-stark, und erst rechts davon läuft sie auf den schwachen Wert aus, wo das Gebäude sichtbar bleiben soll. Genau diese Zusage trägt die Untergrenze aus K-26. Hingenommen wird, dass --breite-text in ch bemisst und die Verlaufskante deshalb während der swap-Phase leicht springt; eine Textlage ist davon nicht betroffen. Die Prozentangaben beziehen sich auf den Verlaufskasten .hero-verlauf, der den Hero-Bereich voll deckt — sie sind die Fensterbreite. */ --breite-hero-verlauf: max( 0px, calc( (100% + min(100%, var(--breite-inhalt))) / 2 - var(--abstand-rand) - var(--abstand-block-x) - var(--breite-hero-text) ) ); /* Höhen — ⚠️ ausnahmslos als Mindesthöhe zu verwenden, nie als feste Höhe (D-7). Kopfleiste, Hero und unterer Footer bleiben bei den gemessenen Werten und kommen bewusst nicht von der Rohskala: Sie sind gemessene Gestaltungsentscheidungen, keine Rhythmuswerte. */ --hoehe-kopfleiste: 100px; --hoehe-hero: 550px; --hoehe-fuss-schmal: 90px; --hoehe-ziel-min: 3rem; /* Höhe des Logos in der Kopfleiste. 9.1.1 misst die Leiste, nicht das Logo; bei 3,4 : 1 ergibt das 218 px Breite und oben wie unten Luft in der 100-px-Leiste. Bewusst nicht über --hoehe-ziel-min gelöst — diese Rolle meint die Trefferfläche bedienbarer Ziele (D-3). ⚠️ Von 64 auf 80 px berichtigt am 10.09.2026: Die 64 px waren eine Setzung, weil 9.1.1 die Leiste maß und nicht das Logo. Gemessen sind 80,6 px. Der Wert steht als eigene Länge und nicht auf der Rohskala — die führt zwischen 64 und 96 px keine Stufe. ⚠️ Die gelieferte Datei hat ein anderes Seitenverhältnis als die alte Wortmarke — 3,4 : 1 gegen 3,88 : 1 —, unser Logo wird bei 80 px Höhe also 272 px breit statt 313. Das ist eine Eigenschaft der Datei (Q-140), keine der Rolle. */ --hoehe-logo: 5rem; /* Kantenlänge der Symbole **im Textfluss**: Briefumschlag (K-20). ⚠️ Am 13.09.2026 von rem auf em umgestellt (9.1.1) — die Entscheidung vom 07.09.2026 ist damit umgedreht. Damals war ein fester Wert gewählt worden, damit der Briefumschlag in Kopfleiste und Fußzeile nicht verschieden groß steht; beide Texte waren gleich groß. Inzwischen sind es 16 gegen 25 px, und genau der Fall ist eingetreten — nur andersherum: Das feste Symbol wirkte neben der großen Adresse zu klein. Symbole, die mit dem Text eine Zeile bilden, wachsen mit ihm; Faktor 1,5 hält die Kopfleiste bei ihren bisherigen 24 px, in der Fußzeile ergeben sich rund 37 px. */ --groesse-symbol: 1.5em; /* Kantenlänge der Symbole, die **nicht** Teil des Textflusses sind: Chevron am Akkordeon, Doppelpfeil am Knopf (9.1.1, neu am 13.09.2026). Sie gehören zur Bedienung, nicht zur Zeile — der Chevron zeigt an, dass sich etwas öffnet, der Doppelpfeil gehört zum Knopf. Dass sie neben Text unterschiedlicher Größe stehen, ist unerheblich; sie sollen überall gleich groß sein, damit man sie als dieselbe Sache erkennt. 24 px, unverändert gegenüber der bisherigen festen Größe. */ --groesse-symbol-fest: 1.5rem; /* ⚠️ Ausnahme: Die gemessenen 100 px der Akkordeonzeile wurden bewusst zum Strecken der Seite gesetzt (K-22) und sind der einzige Messwert der SPEC, der nicht übernommen wird — 64 px Mindesthöhe, wirksam 72 px. */ --hoehe-akkordeonzeile: var(--raum-8); /* Abstände — Rohskala, Basis 4 px (D-11). ⚠️ Kein Element greift direkt darauf zu; Elemente benutzen ausschließlich die Rollen darunter. */ --raum-1: 0.25rem; --raum-2: 0.5rem; --raum-3: 1rem; --raum-4: 1.5rem; --raum-5: 2rem; --raum-6: 2.5rem; --raum-7: 3rem; --raum-8: 4rem; --raum-9: 6rem; /* Abstände — Rollen. Nur diese werden verwendet (D-11). Flüssig sind allein die Abschnittsabstände und der Seitenrand; die kleinen Innenabstände bleiben fest, weil ein mitschrumpfender Knopf die Trefferfläche aus K-5 unterschreitet (D-12). */ --abstand-knopf-y: var(--raum-2); --abstand-knopf-x: var(--raum-4); --abstand-akkordeon-y: var(--raum-4); --abstand-akkordeon-x: var(--raum-4); /* Einzug des Akkordeoninhalts (9.1.1, neu am 10.09.2026), damit er auf Höhe der Textkante der Titelzeile beginnt und nicht auf der Kante der Nummer. Alle Nummern sind einstellig; der Eintrag ohne Nummer bekommt den Einzug mit — der Preis einer Rolle statt einer Ausnahme. ⚠️ Am 13.09.2026 von 16 auf 24 px angehoben und damit gleichlautend mit der Breite der Nummer (--breite-nummer, siehe unten bei den Breiten): Der Inhalt beginnt genau dort, wo der Titeltext hinter der Nummer beginnt. Die frühere Herleitung aus der Breite von „1. " traf nur den ersten Eintrag. */ --einzug-panel-inhalt: var(--raum-4); --abstand-titel-inhalt: var(--raum-5); /* Abstand zwischen Hero-Absatz und Knopf, 40 px (9.1.1, neu am 13.09.2026). Am Original gemessen; dort stand bisher die Voreinstellung des Browsers mit 18 px. ⚠️ Der dritte Fall, in dem eine fehlende Angabe als Voreinstellung durchlief, ohne dass die Prüfung nach D-2 sie hätte finden können: Sie meldet harte Werte, nicht fehlende. */ --abstand-hero-knopf: var(--raum-6); /* Abstand zwischen Abschnittsüberschrift und Akkordeon, 48 px (9.1.1, neu am 13.09.2026). ⚠️ **Am 13.09.2026 von 64 auf 48 px gesenkt** — der Widerspruch zu K-17, den die vorige Fassung hier noch als gemeldet führte, ist mit v0.113 entschieden: Mit 64 px oben und 64 px unten schwebte die Überschrift wieder zwischen zwei gleichen Abständen, genau dem Zustand, den K-17 abschaffen will; dessen 32 px wirkten im Nachbau zu gedrängt. K-17 bleibt in seiner Absicht gültig, nur sein unterer Wert ist auf 48 px angehoben. Mit 48 gegen 64 px bleibt der Unterschied deutlich. */ --abstand-titel-akkordeon: var(--raum-7); --abstand-rand: clamp(1rem, 0.64rem + 1.82vw, 2rem); --abstand-abschnitt-oben: clamp(2rem, 1.27rem + 3.64vw, 4rem); --abstand-abschnitt-unten: clamp(2rem, 1.27rem + 3.64vw, 4rem); /* ⚠️ **Am 14.09.2026 von 64 auf 16 px gesenkt** (--raum-3). Der Abstand zwischen den Fußzeilenspalten und der Trennlinie darüber war am Nachbau mit 64 px gemessen und zu groß. Nur scheinbar unsymmetrisch gegenüber den 32 px unter der Linie (--abstand-copyright): Oberhalb kommt zu den 16 px noch der Raum hinzu, den die Spalten am unteren Ende selbst mitbringen. */ --abstand-fuss-trennlinie: var(--raum-3); /* Abstand **unter** der Fußzeilen-Trennlinie, 32 px (9.1.1, neu am 10.09.2026). Bis dahin wurde dort --abstand-fuss-trennlinie ein zweites Mal verwendet, was bei deren damaligen 64 px zusammen 128 px ergab und die Copyright-Zeile zu hoch stellte; jene Rolle ist der Abstand **zur** Linie, nicht auf beiden Seiten. Hergeleitet aus dem Original: 90 px Balkenhöhe, mittig gesetzte Zeile, 16 px Schrift bei Faktor 1,6. */ --abstand-copyright: var(--raum-5); --abstand-hero-y: clamp(2rem, 1.27rem + 3.64vw, 4rem); /* Einzug des Inhaltsblocks innerhalb der Sektion (9.1.1, neu am 10.09.2026, D-6) — die zweite Breitenebene, die im Nachbau fehlte. Als **Einzug** formuliert und nicht als zweite Breite, weil er auf schmalen Geräten auf null laufen muss; dort hält --abstand-rand den Rand nach K-15, und die alte Seite setzt dort ebenfalls keinen zweiten Einzug. ⚠️ Die Kopfleiste bekommt ihn nicht — sie nutzt die volle Sektionsbreite. ⚠️ **Am 14.09.2026 von 100 auf 68 px gesenkt** (9.1.1, SPEC v0.127). Der Randcontainer schlug den Seitenrand außen auf --breite-inhalt auf, statt ihn innen abzuziehen; jede Sektion maß dadurch 1264 statt 1200 px. Mit dem Rand innerhalb der Sektion (.inhaltsbreite in seite.css) tragen --abstand-rand und dieser Einzug zusammen wieder die gemessenen 100 px des linken Außenabstands der Abschnittsüberschrift, und der Inhaltsblock misst wieder 1000 px. Am sichtbaren Ergebnis ändert sich damit nichts — gesenkt wird die Rolle, nicht der Abstand. Die Ankerbreiten bleiben 320 und 1200 px (W-8, D-10). ⚠️ **Mittelterm am 14.09.2026 auf vier Stellen nachgezogen** (9.1.1, SPEC v0.128). Auf zwei Stellen gerundet ergab der Einzug bei 1200 px 67,96 statt 68,00 px; der Inhaltsblock verfehlte seine 1000 px um 0,08 px. Unsichtbar, aber die Zahl soll treffen, was sie treffen soll. */ --abstand-block-x: clamp(0rem, -1.5455rem + 7.7273vw, 4.25rem); /* Abstand zwischen den Spalten der vollen Fußzeile und, nach dem Umbruch, zwischen den beiden Blöcken (K-11, Q-137). Fest, nicht flüssig: Der Wert entscheidet zugleich, bei welcher Breite die Spalten umbrechen. */ --abstand-fuss-spalten: var(--raum-8); /* Abstand zwischen einem eingebetteten Symbol und dem Text daneben (Briefumschlag, Doppelpfeil). Fester Wert, kein Wortabstand — sonst stünde er in Kopfleiste und Fußzeile verschieden. */ --abstand-symbol-text: var(--raum-2); /* Abstand der Hover-Unterstreichung zur Grundlinie (K-7). Ohne ihn schneidet die Linie durch die Unterlängen von info@optimizeyourhome.de. Die Stärke ist --linie-staerke; eine zweite Linienstärke wäre ein zweiter Ort für denselben Wert (D-1). */ --abstand-unterstreichung: var(--raum-1); /* Abstand der Fokusanzeige zum Element (K-9). Ohne ihn klebt der Umriss auf dem Knopf (K-5, kein Radius) an dessen Hover-Fläche (K-6). */ --abstand-fokus: var(--raum-1); /* Bewegung. Weg, um den der Doppelpfeil beim Überfahren nach rechts wandert (K-8), und die Dauer aller Übergänge. Ohne diese Rolle entstünden in S-6 und S-7 zwei verschiedene Dauern, und die Prüfung aus D-2 erfasst Zeitwerte nicht. Die Abschaltung bei reduzierter Bewegung regelt D-8. */ --weg-pfeil-hover: var(--raum-1); --dauer-uebergang: 150ms; }