/* Aus dem Prototyp herausgelöst am 15.09.2026. Einzige Quelle für die Seitengestaltung — der Prototyp unter handoff/prototyp/ bleibt die Grundlage für Struktur und Copy, nicht mehr für das CSS. */ /* Schriften liegen auf dem eigenen Server: kein Drittanbieter-Request, keine Einwilligung nötig. Beide unter SIL Open Font License, siehe assets/fonts/LIZENZ.md. Ersatzschrift ist Arial — bewusst kein Futura-Nachbau, damit ein fehlendes Laden sofort auffällt. */ @font-face{font-family:'Jost';src:url('/assets/fonts/jost-variable.woff2') format('woff2'); font-weight:100 900;font-style:normal;font-display:swap} @font-face{font-family:'Josefin Sans';src:url('/assets/fonts/josefinsans-variable.woff2') format('woff2'); font-weight:100 700;font-style:normal;font-display:swap} :root{ --blau:#151F28; --weiss:#FFFFFF; --eis:#D7E1EA; --tuerkis:#8FC8CC; /* Derselbe Farbton, abgedunkelt — keine fünfte Farbe. Türkis selbst trägt auf Weiß nur 1,9:1 und auf Eisblau noch weniger. Dieser Ton hält 6,0:1 auf Weiß und 4,5:1 auf Eisblau, siehe tokens.css und marke.md. */ --tuerkis-dunkel:#336C70; --set:'Jost',Arial,sans-serif; --lauf:'Josefin Sans',Arial,sans-serif; --rand:clamp(22px,6vw,110px); /* INHALTSDECKEL · 20.09.2026. Gemessen bei 2560 px: Die Schrift war NICHT zu breit — kein einziger Textblock über 1000 px trug mehr als 90 Zeichen. Kaputt war die KOMPOSITION. Im Fragenband standen die fünf Fragen ganz links und die Antwort ganz rechts, dazwischen 750 px Nichts; die beiden Hälften eines Dialogs hatten keinen Bezug mehr zueinander. Der Deckel greift erst ab 1560 px. Darunter ändert sich nichts — bei 1440 px ist jede Messung identisch zu vorher. `--seitenrand` statt eines Wrappers: Die Sektion bleibt randlos, ihr Hintergrund läuft weiter über die volle Breite. Nur der Inhalt wird gefasst, indem der seitliche Abstand wächst. Dieselbe Technik wie `--ak-max` im Kapazitäts-Check, nur seitenweit statt für eine Seite. */ --deckel:1560px; --seitenrand:max(var(--rand),(100% - var(--deckel)) / 2); /* KEINE KÖRNUNG MEHR · 21.09.2026, §9.62. Hier stand bis zum 19.09.2026 ein gerechnetes feTurbulence-Rauschen, danach Theres' eigene Camera-Raw-Kachel (§9.51). Beides ist auf Ansage entfernt: keine Korntextur mehr, auf keiner Fläche. Wer sie zurückholen will, holt sie aus §9.47/§9.51 — nicht aus dem Gedächtnis. */ /* Fokusring. Standard ist der helle Grund. Wer eine dunkle Fläche setzt, schreibt --fokus-farbe:var(--tuerkis) in dieselbe Regel — auf Eisblau trägt Türkis nur 1,4:1, auf Dunkelblau 9,0:1. Siehe tokens.css. Kein zusammengesetztes --fokus: ein var() in einem Custom Property wird bei der Deklaration aufgelöst, die Umkehrung käme nie an. */ --fokus-farbe:var(--blau); --fokus-breite:2px; --fokus-abstand:3px; /* Eigenes Material, selbst gehostet. Vorher lagen hier drei Unsplash-Texturen und weiter unten zwei Porträts von theresheinrich.com — beides externe Anfragen bei jedem Aufruf und damit derselbe Einwilligungsfall, den das Self-Hosting der Schriften vermeiden sollte. Herkunft und Auswahl: assets/bilder/HERKUNFT.md */ /* NUR NOCH SEITENKÖPFE · 21.09.2026, §9.62. Bis dahin standen hier sieben Flächen: drei unter Sektionen (`--stein`, `--sand`, `--wasser`) und vier unter Seitenköpfen. Die drei Sektionsflächen sind auf Ansage weg — eine Sektion trägt jetzt Farbe, kein Bild. Ein Bild im Hintergrund hat nur noch, wer ein SEITENKOPF ist. Wer eine Sektionstextur zurückholen will, tut das nicht mit einer neuen Variablen hier, sondern liest erst §9.62: Der Grund war nicht technisch. */ /* Die vierte kam am 18.09.2026 dazu, für /ueber-mich allein (§9.38). Dort lag bis zum 21.09.2026 eine Eisblume — als Eiskristall gelesen und auf Ansage durch Stein ersetzt (§9.62). Der Granit ist die Vorlage der abgelösten Sektionsfläche „Drei Erkenntnisse", entsättigt: feines Korn statt Richtung, damit er sich vom Gletscherfels der übrigen Köpfe unterscheidet. Gemessen unter der Kopfdeckung: Streuung 4,75 gegen 4,50 der Eisblume — er trägt eher mehr Struktur als weniger. CC0, also ohne Nennungspflicht — anders als die Eisblume, die CC BY-SA 3.0 war und Weitergabe unter gleicher Lizenz verlangte. */ /* PORTRÄTS IM SEITENKOPF · 21.09.2026 · auf Ansage. Individuals und Unternehmen tragen statt einer Struktur ein Bild von Theres. Beide sind aus dem eigenen Archiv zugeschnitten (2333×3500 quer (3500×2333 → 1800×1200, Seitenverhältnis 1,50). BEIDE ZEIGEN THERES RECHTS AUF FREIER WAND. Das ist die Bedingung für die Teilung: Im Spaltenzuschnitt wird nur seitlich beschnitten, senkrecht steht das Bild vollständig — der Kopf kann gar nicht abgeschnitten werden. Zwei Vorgänger liegen hier begraben (§9.63): enge Porträts, auf Kopfbandmaß zurechtgerechnet und dann totgedunkelt. Wer hier ein Bild tauscht, nimmt ein QUERFORMAT mit Platz links. */ /* SECHS KOPFBILDER ENTFERNT · 21.09.2026 · auf Ansage. Hier standen `--kopf-a` bis `--kopf-d`: vier Strukturaufnahmen von Wikimedia Commons (Gletscher, Sandrippel, Wasser, Granit), die die Seitenköpfe von /agb, /datenschutz, /impressum, /journal, /ueber-mich und der Newsletter-Antwortseite trugen. Alle sechs Köpfe tragen jetzt `.kopf-flach`, also die glatte Markenfläche. Die zugehörigen Regeln `.kopf-stein`, `.kopf-sand`, `.kopf-wasser` und `.kopf-granit` sind mit entfallen. DAS IST KEINE KOSMETIK: Das Impressum sagt seit heute „Fremde Bilder werden nicht genutzt." Wer hier eine dieser Variablen wieder einsetzt, macht diesen Satz falsch und muss den Bildnachweis in `resources/views/recht/impressum.blade.php` wieder aufbauen. Die vier Dateien liegen noch unter `public/assets/bilder/`. Sie werden nicht mehr ausgeliefert; löschen kann man sie, das Entpacken auf dem Server tut es aber nicht von allein. Die Porträts (`--kopf-p1` ff.) sind eigene Aufnahmen und bleiben. */ --kopf-p1:url('/assets/bilder/kopf-theres-individuals.jpg'); /* 926111 */ --kopf-p2:url('/assets/bilder/kopf-theres-unternehmen.jpg'); /* 92622222 */ } *{box-sizing:border-box;margin:0;padding:0} /* scroll-padding-top, damit Anker nicht hinter der fixierten Kopfleiste landen. Gemessen ist sie 50 px hoch (375) und 68 px (1440); der Wert liegt darüber, damit das Ziel nicht an der Leiste klebt. Steht hier einmal für ALLE Anker — #erstgespraech, #newsletter, #oben und jeden künftigen. Vorher sprang jeder davon so, dass die ersten Zeilen des Ziels verdeckt waren. */ /* --kopfhoehe ist die Höhe des FESTEN Kopfes (`header.fest`, `padding:9px`): 39 px auf dem Telefon, 56 px ab 1024 px. Nachgemessen am 19.09.2026 in Chromium bei 375/768/1024/1440/2560 px. Sie muss auf den Pixel stimmen. Vorher stand hier `clamp(62px,6vw,84px)` — bis zu 28 px MEHR als der Kopf hoch ist. Die Seite hielt beim Ankersprung also zu früh an, und zwischen Kopf und Zielsektion blitzte die Sektion darüber hervor: bei `#erstgespraech` das Eisblau des Newsletters, als heller Balken quer über die Breite. Genau der „weiße Balken oben", der gemeldet wurde. WER AM KOPF DIE POLSTERUNG ÄNDERT, ändert diese zwei Werte mit. Die Kopplung ist nicht automatisch — sie ist gemessen. */ :root{--kopfhoehe:39px} @media (min-width:1024px){:root{--kopfhoehe:56px}} html{scroll-behavior:smooth;scroll-padding-top:var(--kopfhoehe)} body{font-family:var(--lauf);color:var(--blau);background:var(--weiss);-webkit-font-smoothing:antialiased;font-size:17px;line-height:1.6} /* height:auto ist hier keine Kosmetik: Die Bilder tragen width- und height-Attribute, damit der Browser den Platz vor dem Laden kennt und die Seite nicht springt. Ohne height:auto benutzt er aber genau diese Attributhöhe als CSS-Höhe — dann greift kein aspect-ratio mehr, und das Headerbild stand 1380 px hoch in einer 562 px breiten Spalte. */ img{max-width:100%;height:auto;display:block} a{color:inherit} /* Fokus zentral, einmal. Die Farbe wird hier zusammengesetzt und nicht im Token — nur so kommt die Umkehrung aus einer dunklen Fläche an. */ :focus-visible{outline:var(--fokus-breite) solid var(--fokus-farbe); outline-offset:var(--fokus-abstand)} /* Die Leiste ist am 16.09.2026 leiser gestellt worden: Sie wirkte groß und nahm dem Header Luft. Alle Maße einen Schritt kleiner, die Hausnummer 68 px hoch ist damit 52 px — und im festen Zustand 44 px. Der Wert bestimmt zugleich scroll-padding-top weiter oben. */ header{--fokus-farbe:var(--tuerkis);position:fixed;top:0;left:0;right:0;z-index:60;display:flex;align-items:center;justify-content:space-between;padding:13px var(--seitenrand);transition:background .3s ease,padding .3s ease} header.fest{background:rgba(21,31,40,.96);padding:9px var(--seitenrand)} .wortmarke{font-family:var(--set);font-weight:600;font-size:13px;letter-spacing:.2em;color:#fff;text-decoration:none;text-transform:uppercase} nav{display:flex;align-items:center;gap:26px} nav a{font-family:var(--set);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.82);text-decoration:none;padding:5px 0;border-bottom:1px solid transparent} nav a:hover,nav a:focus-visible{color:#fff;border-bottom-color:var(--tuerkis)} nav a.knopf{background:var(--tuerkis);color:var(--blau);border:0;padding:9px 17px;font-weight:600;letter-spacing:.14em} nav a.knopf:hover{background:#fff} /* ---------- DIE BILDMARKE ---------------------------------------- Ein Symbol im Seitengerüst, überall per geholt. Sie nimmt über currentColor die Farbe an, die an ihrer Stelle gilt — im Kopf und im Fuß also Weiß, ohne zweite Datei. Das Seitenverhältnis steht fest bei 1,76 : 1 und wird nie verändert: Strecken und Stauchen verbietet das Handbuch, und `height` allein lässt die Breite proportional folgen. */ /* DIE FÜLLUNG FÜR JEDE VERWENDUNG DER BILDMARKE. Seit `fill="currentColor"` aus dem Symbol heraus ist (damit der Fuß sie gegen eine Kontur tauschen kann), muss sie hier gesetzt werden — und zwar für ALLE Verwendungen, nicht nur für `.baum`. Am 19.09.2026 einmal übersehen: `.dl-marke` im Dialogfeld und `.ew-marke` im Einwilligungsfenster tragen die Klasse `.baum` nicht und waren dadurch unsichtbar. Der `:has()`-Teil fängt jede künftige Verwendung mit ab; die drei Klassen davor sind die Sicherung für Maschinen ohne `:has()`. */ .baum,.dl-marke,.ew-marke,svg:has(> use[href="#baum"]){fill:currentColor;stroke:none} .baum{display:block;aspect-ratio:657.4/373.6;width:auto;color:inherit; transition:fill .22s ease,stroke-width .22s ease} .baum-gross{height:clamp(54px,6vw,84px)} /* Der Fuß ist die einzige Stelle, an der die Seite mittig wird. Das bricht die Linksbündigkeit, die sonst überall gilt — bewusst: Ein Fuß ist keine Lesestrecke, sondern ein Schlussschild, und ein Zeichen in der Mitte liest sich als Siegel statt als Listenanfang. */ .fussmarke{display:block;width:max-content;margin:0 auto clamp(40px,5vw,60px); color:#fff;text-decoration:none;transition:color .2s} /* DAS LOGO BEIM ÜBERFAHREN · 19.09.2026 Vorher wurde es türkis, das war nicht gewollt. Jetzt kehrt es sich um: Fläche weg, feine weiße Kontur, Mitte durchsichtig. DAS IST EINE ÜBERSTIMMTE MARKENREGEL. `THERES_CD_CLAUDE_V2/rules/03_LOGO_COLOR_TYPE.md` führt „Glow / Schatten / Outline" unter „Nicht erlaubt" auf. Die Entscheidung dagegen ist am 19.09.2026 ausdrücklich getroffen worden, nachdem vier Konturstärken nebeneinander geprüft wurden; gewählt ist die mittlere. Wer die Regel dort nachträgt, findet hier die Umsetzung — und wer sie zurückdreht, nimmt diese vier Zeilen wieder heraus. Strichstärke 3 in Nutzereinheiten: Der Rahmen ist 657 breit und wird mit rund 148 px dargestellt, das ergibt eine Linie von etwa 0,7 px. Kräftiger wirkte plump, feiner franst bei kleiner Darstellung aus. */ .fussmarke:hover .baum,.fussmarke:focus-visible .baum{ fill:none;stroke:currentColor;stroke-width:3} .burger{display:none;background:none;border:0;color:#fff;font-family:var(--set);font-size:12px;letter-spacing:.16em;cursor:pointer;text-transform:uppercase} section{padding:clamp(64px,9vw,120px) var(--seitenrand);position:relative} .dunkel{background:var(--blau);color:var(--weiss);--fokus-farbe:var(--tuerkis)} /* Die Abschlusssektion „Der nächste Schritt". Sie trug seit 17.09.2026 eine Wassertextur (§9.30) — nicht als Zier, sondern als Abgrenzung nach unten: Sektion und Fuß sind beide solides Dunkelblau und liefen ohne Kante ineinander. Am 21.09.2026 ist die Textur auf Ansage weg (§9.62). Die Aufgabe bleibt, deshalb steht die Kante jetzt als Linie da. Eine Haarlinie in 14 % Weiß ist die leiseste Fassung, die den Übergang noch markiert — gemessen an derselben Stelle, an der vorher die Textur saß. DIE KLASSE BLEIBT, obwohl sie keine Textur mehr trägt: `.dunkel` und `.dunkel-wasser` stehen zusammen im Markup, und `.dunkel` liefert Rubrikfarbe, Zwischenüberschriften und das hellere Feld. Wer hier aufräumt, räumt im Markup mit auf. */ .dunkel-wasser{background:var(--blau); color:var(--weiss);--fokus-farbe:var(--tuerkis); border-bottom:1px solid rgba(255,255,255,.14)} .eis{background:var(--eis)} /* Volle Bildhöhe, seit dem 16.09.2026. Die Sektion soll sich wie das Fragenband einmal ganz ins Bild setzen und einen Zwischenstopp machen, statt im Vorbeiscrollen zu verschwinden. Der Inhalt steht dafür mittig statt oben. */ /* DIE DREI TEXTURSEKTIONEN TRAGEN SEIT DEM 21.09.2026 KEIN BILD MEHR (§9.62). Was blieb, ist die Farbe, die vorher als Deckung darüberlag: Dunkelblau bei `.txt-stein` (Deckung .93 → .96 sind gerundet #151F28), Eisblau bei `.txt-sand` und `.txt-wasser` (.88 bis .94 auf #D7E1EA). Gerendert ändert sich damit nur die Struktur, nicht der Ton. DIE NAMEN BLEIBEN, und das ist Absicht: `.txt-stein` trägt die volle Bildschirmhöhe und die senkrechte Mitte, `.txt-sand` und `.txt-wasser` färben die `.feld`-Kästen darin. Ein Umbenennen berührte vier Dateien und brächte nichts. */ .txt-stein{background:var(--blau);color:var(--weiss);--fokus-farbe:var(--tuerkis); min-height:100svh;display:flex;flex-direction:column;justify-content:center} .txt-sand{background:var(--eis)} /* WEISS, nicht Eisblau · 21.09.2026 · auf Ansage. `.txt-wasser` trägt allein „Was mich trägt" auf /ueber-mich, und davor steht die Qualifikation auf `.eis`. Beide waren dieselbe Farbe, und die zwei Sektionen liefen ohne Kante ineinander. */ .txt-wasser{background:var(--weiss)} /* Der Bildband ist am 17.09.2026 entfernt worden, siehe §9.29. Er war nach dem Tausch der Flächen die einzige warme Stelle der Seite. */ /* `margin-right:-.26em` · 22.09.2026 nachgemessen, und der Grund ist fein: Sperrsatz setzt den Abstand AUCH hinter den letzten Buchstaben einer Zeile. Bei „ALLGEMEINE GESCHÄFTSBEDINGUNGEN" im Kopf von /agb reichte genau dieser eine unsichtbare Abstand, um die Zeile um 3 px über die Fensterkante zu schieben — bei 320 px gemessen, 301 gegen 276 px verfügbar. Das negative Maß nimmt ihn wieder heraus; sichtbar ändert sich nichts, weil dort ohnehin kein Buchstabe mehr steht. */ .rubrik{font-family:var(--set);font-size:11px;letter-spacing:.26em;text-transform:uppercase;opacity:.6;margin-bottom:22px;margin-right:-.26em} .dunkel .rubrik,.txt-stein .rubrik{color:var(--tuerkis);opacity:1} /* Zeilenhöhe 1,20 ist gesetzt und wird nirgends lokal überschrieben — sonst stoßen die Umlautpunkte von Ä Ö Ü in die Zeile darüber. Das negative Tracking auf h1 ist geprüft und freigegeben, siehe tokens.css. */ /* Der Mobilgrad ist aus der Wortbreite gerechnet, nicht geschätzt: bei 375 px stehen 330 px zur Verfügung, die breiteste feste Zeile braucht bei 38 px aber 375 px und bricht dadurch ein zweites Mal um. 33 px ist der größte Grad, bei dem alle festen Zeilen halten. Überlange Einzelwörter bekommen stattdessen ein ­. */ /* Höchstgrad am 16.09.2026 von 78 auf 60 px zurückgenommen. Der Grund ist nicht Geschmack, sondern eine Kopplung: Der Textblock im Header nahm bei 1440 × 900 gemessene 445 px ein, also die halbe Bildhöhe — und weil die Deckung überall dort tragen muss, wo Text steht, musste sie ab 42 % der Höhe dunkel sein. Jeder Millimeter, den der Block kleiner wird, ist ein Millimeter, den das Foto offen bleiben darf. Der Mobilgrad bleibt unangetastet; er ist aus der Wortbreite bei 375 px gerechnet und nicht geschätzt. */ h1{font-family:var(--set);font-weight:700;font-size:clamp(32px,4.8vw,60px);line-height:1.20;text-transform:uppercase;letter-spacing:-.012em} h2{font-family:var(--set);font-weight:700;font-size:clamp(23px,4vw,48px);line-height:1.20;text-transform:uppercase;margin-bottom:24px} h3{font-family:var(--set);font-weight:600;font-size:20px;margin-bottom:10px} h4{font-family:var(--set);font-size:11px;letter-spacing:.2em;text-transform:uppercase;opacity:.65;margin-bottom:12px} .dunkel h4,.txt-stein h4{color:var(--tuerkis);opacity:1} p{max-width:64ch;margin-bottom:16px} .vorspann{font-size:clamp(18px,2vw,22px);line-height:1.48;max-width:56ch} .klein{font-size:15px;line-height:1.55} .mini{font-size:13px;line-height:1.5;opacity:.7} .balken{width:70px;height:4px;background:var(--tuerkis);margin:26px 0 30px} .knopf{display:inline-block;font-family:var(--set);font-size:12.5px;letter-spacing:.18em;text-transform:uppercase;font-weight:600;background:var(--tuerkis);color:var(--blau);padding:16px 30px;text-decoration:none;border:1px solid var(--tuerkis);transition:background .2s,color .2s} .knopf:hover{background:transparent;color:var(--tuerkis)} .knopf.hell{background:var(--blau);color:#fff;border-color:var(--blau)} .knopf.hell:hover{background:transparent;color:var(--blau)} .knopf.linie{background:transparent;color:inherit;border-color:currentColor} /* HEADER · dunkel und vollflächig, wie in der Referenzfassung. Der Verlauf ist unverändert von dort übernommen: oben .62 für die Kopfleiste, in der Mitte nur .22 — dort bleibt das Bild hell und offen, daher die Weißwirkung — unten .88 für Überschrift, Text und Knopf. Zwei Ableitungen desselben Fotos, damit die schmale Fassung nicht das Breitbild laden muss. */ .hero{--fokus-farbe:var(--tuerkis);min-height:100svh;display:flex;flex-direction:column; /* Mehr Fußabstand als vorher (44–76 px): Der Textblock klebte sonst am unteren Rand, und die Sektion wirkte nach unten schwer. Jetzt sitzt er höher im Fenster, mit Luft darunter. */ justify-content:flex-end;color:#fff;padding-bottom:clamp(72px,10vh,132px); background:var(--blau) url('/assets/bilder/theres-header-hoch.jpg') center 18% / cover no-repeat} @media (min-width:700px){ .hero{background-image:url('/assets/bilder/theres-header-quer.jpg');background-position:center 24%} } /* Der Textblock ist am 16.09.2026 zusammengerückt, und zwar aus einem Grund, der nichts mit Typografie zu tun hat: Er begann bei 31 % der Höhe, also musste die Deckung schon ab 30 % tragen — und damit lag sie über Theres' Gesicht. Jeder Pixel, den der Block tiefer anfängt, ist ein Pixel, den das Bild oben offen bleiben darf. Zusammen rund 90 px: Der Block beginnt jetzt bei rund 41 %, das Gesicht liegt frei. */ .hero .balken{margin:14px 0 16px} .hero-tun{margin-top:18px;display:flex;gap:14px;flex-wrap:wrap} /* Der Verlauf der Referenzfassung (.62 / .22 bei 42 % / .88) war für ein dunkleres Foto gerechnet. Diese Aufnahme ist im Textband hell — gemessen stand die Überschrift dort bei 1,90:1 und die türkise Rubrik bei 1,17:1. Die Mitte bleibt offen, damit das Bild seine Helligkeit behält; gefasst wird erst ab dem Band, in dem wirklich Text steht. */ /* Zwei Lagen statt einer, seit dem 16.09.2026. Vorher lief eine einzige senkrechte Deckung von oben nach unten durch und war schon bei 33 % der Höhe auf 0,70 — quer über Theres' Gesicht. Jetzt trägt die senkrechte Lage erst ab der Rubrik, also ab rund 38 %, und darüber bleibt das Bild fast offen. Die zweite, waagerechte Lage dunkelt zusätzlich die LINKE Hälfte ab, wo der Text steht; nach rechts läuft sie aus. Theres sitzt seit der neuen Ableitung bei 65 % der Breite, also genau dort, wo beide Lagen am dünnsten sind. Die Werte sind am gerenderten Bild gemessen, nicht geschätzt. */ .hero::after{content:"";position:absolute;inset:0; background: /* Die waagerechte Lage trägt seit dem 17.09.2026 den Text fast allein — sie ist links kräftig und fällt nach rechts früh ab. Nur dadurch darf die senkrechte Lage darunter so spät kommen, dass Theres in voller Höhe offen bleibt. */ linear-gradient(90deg,rgba(21,31,40,.80) 0%,rgba(21,31,40,.76) 30%, rgba(21,31,40,.44) 50%,rgba(21,31,40,.14) 66%,rgba(21,31,40,.02) 80%, rgba(21,31,40,0) 100%), /* Die senkrechte Lage, am 17.09.2026 neu gezeichnet. Vorher stieg sie von 0,24 auf 0,55 in vier Prozentpunkten — das ist eine Stufe und keine Kurve, und auf der gleichmäßigen Studiowand sieht man sie als Kante. Der Prototyp V2 macht es besser: Er steigt über 24 Punkte gleichmäßig an und ist bei 41 % der Höhe fertig. Übernommen ist von dort die FORM, nicht die Menge: viele Stützen, zwischen zwei benachbarten nie mehr als 0,10 Unterschied, und der Anstieg ist bei 42 % beendet — weit vor der Hälfte. Danach kriecht die Deckung nur noch von 0,58 auf 0,66. Dass sie mit 0,66 statt 0,86 auskommt, liegt an der zweiten Lage darüber: Die dunkelt die linke Hälfte ab, wo der Text steht. Genau deshalb darf diese hier flach bleiben — und Theres, die rechts sitzt, bleibt offen. */ linear-gradient(180deg,rgba(21,31,40,.46) 0%,rgba(21,31,40,.24) 4%, rgba(21,31,40,.12) 9%,rgba(21,31,40,.06) 16%,rgba(21,31,40,.05) 30%, rgba(21,31,40,.07) 40%,rgba(21,31,40,.11) 46%,rgba(21,31,40,.17) 52%, rgba(21,31,40,.25) 58%,rgba(21,31,40,.34) 64%,rgba(21,31,40,.43) 70%, rgba(21,31,40,.50) 76%,rgba(21,31,40,.54) 84%,rgba(21,31,40,.56) 100%)} @media (max-width:699px){ /* Schmal steht der Textblock höher im Bild und braucht früher Deckung; außerdem läuft der Text über die volle Breite, die waagerechte Lage darf deshalb nicht nach rechts auslaufen. */ .hero::after{background: linear-gradient(180deg,rgba(21,31,40,.60) 0%,rgba(21,31,40,.34) 5%, rgba(21,31,40,.18) 10%,rgba(21,31,40,.10) 16%,rgba(21,31,40,.09) 22%, rgba(21,31,40,.14) 26%,rgba(21,31,40,.24) 30%,rgba(21,31,40,.38) 34%, rgba(21,31,40,.54) 38%,rgba(21,31,40,.70) 42%,rgba(21,31,40,.82) 46%, rgba(21,31,40,.88) 50%,rgba(21,31,40,.92) 100%)} } .hero .rubrik{color:var(--tuerkis);opacity:1;margin-bottom:16px} .hero>*{position:relative;z-index:2} /* 58ch statt 44ch: Derselbe Satz steht damit auf zwei statt auf drei Zeilen, und der Block beginnt 32 px tiefer. Die Satzbreite bleibt unter den 64ch der allgemeinen Regel. */ .hero p{max-width:58ch;font-size:clamp(16px,1.45vw,18px);margin-top:16px} .zwei{display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,4vw,64px);align-items:start} /* 10.3 — Eine Überschrift, die IN einer der zwei Spalten steht, hat nur die halbe Breite, während der Grad mit dem Fenster weiterwächst. Genau dort brachen „EIN BRIEF ZUM RUNTERKOMMEN." und „DER NEWSLETTER KOMMT SCHON JEDEN DONNERSTAG." zusätzlich um, zwischen 900 und 1280 px. Gemessen statt geschätzt: die längste Zeile der ersten braucht 11,4 px Breite je Punkt Schriftgrad. Die halbe Spalte ist bei 1024 px 430 px breit und trägt damit 37 px, bei 1280 px 47 px, bei 1600 px 57 px. Diese Kurve bleibt überall darunter. Überschriften ÜBER dem Raster sind nicht betroffen — sie stehen über die volle Breite. */ .zwei h2{font-size:clamp(23px,3.2vw,46px)} .drei{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(22px,2.6vw,38px)} .feld{background:rgba(21,31,40,.05);padding:30px} .dunkel .feld,.txt-stein .feld{background:rgba(255,255,255,.07)} .eis .feld,.txt-sand .feld,.txt-wasser .feld{background:rgba(255,255,255,.66)} .fragen{list-style:none;margin:0;max-width:56ch} .fragen li{font-family:var(--set);font-size:clamp(16px,1.75vw,19px);line-height:1.35;padding:14px 0 14px 26px;border-bottom:1px solid rgba(21,31,40,.14);position:relative} .fragen li::before{content:"";position:absolute;left:0;top:23px;width:13px;height:1px;background:var(--tuerkis)} .fragen li:last-child{border-bottom:0} .treppe{border-top:1px solid rgba(21,31,40,.2)} .stufe{display:grid;grid-template-columns:1fr auto;gap:18px;align-items:baseline;padding:20px 0;border-bottom:1px solid rgba(21,31,40,.14)} .stufe:last-child{border-bottom:0} .stufe .nm{font-family:var(--set);font-size:19px} .stufe .bs{font-size:14.5px;opacity:.72;grid-column:1/2;margin-top:3px} .stufe .pr{font-family:var(--set);font-size:17px;color:#3d5766;white-space:nowrap} /* ZEILEN OHNE BESCHREIBUNG · 21.09.2026. Im Split auf der Startseite stehen seit heute nur noch die Produktnamen — keine `.bs`, kein Preis. Der Pfeil in `a.stufe::after` sitzt aber fest auf `grid-row:2` und riss damit eine LEERE zweite Rasterzeile auf: gemessen 109 px Zeilenhöhe gegen 115 px bei einer Zeile MIT Beschreibung. Der Pfeil gehört dann in die erste Zeile. */ a.stufe:not(:has(.bs))::after{grid-row:1;align-self:center} /* ---------- DIE TREPPENZEILE KLAPPT AUF · 18.09.2026 ---------------- MINIMALER EINGRIFF, mit Absicht. Die Treppe auf /unternehmen bleibt wie sie war: dieselbe Spalte, dieselbe Anordnung, dieselben Klassen. Aus `` ist `
` geworden, dessen `` die Zeile SELBST ist. Darunter klappt ein kurzer Faktenblock auf. Warum nicht `.klapp` wie auf /individuals: Die Treppe steht in der halben Spalte einer `.zwei`. `.klapp` braucht die volle Breite, und dafür hätte die Sektion umgebaut werden müssen. Das Bauteil hat sich der Seite anzupassen, nicht umgekehrt. */ .aufk{border-bottom:1px solid rgba(21,31,40,.14)} .aufk:last-child{border-bottom:0} .aufk > summary.stufe{border-bottom:0;cursor:pointer;list-style:none; padding-right:26px;position:relative;transition:padding-left .18s ease} .aufk > summary::-webkit-details-marker{display:none} .aufk > summary:hover{padding-left:8px} .aufk > summary:hover .nm{color:var(--tuerkis-dunkel)} .aufk > summary:focus-visible{outline:2px solid var(--blau);outline-offset:2px} /* Dasselbe Zeichen wie auf /individuals — zwei Haarlinien, eine dreht weg. */ .aufk > summary::before,.aufk > summary::after{content:"";position:absolute; right:0;top:29px;width:13px;height:1px;background:var(--blau); transition:transform .24s cubic-bezier(.22,.61,.36,1),opacity .24s ease} .aufk > summary::after{transform:rotate(90deg)} .aufk[open] > summary::after{transform:rotate(0)} .aufk[open] > summary::before{opacity:0} .aufk[open] > summary .nm{color:var(--tuerkis-dunkel)} /* Der Block darunter steht in derselben schmalen Spalte — deshalb kurz, weiß abgesetzt gegen das Eisblau der Sektion, damit das Auge sieht, was zusammengehört. */ .aufk-inhalt{background:#fff;padding:20px 22px 22px;margin:0 0 20px} .aufk-inhalt p{font-size:15px;line-height:1.55;margin:0;max-width:52ch} /* Zwei Absätze im Aufklappteil seit dem 21.09.2026: Die Fließtexte der Bausteine sind auf Ansage länger geworden, drei davon haben einen zweiten, kürzeren Absatz. `.aufk-inhalt p` steht auf `margin:0` — ohne diese Zeile klebten sie aneinander. */ .aufk-inhalt p + p{margin-top:14px} .aufk-inhalt p + ul{margin-top:12px} .aufk-inhalt ul{list-style:none;margin:0} .aufk-inhalt li{font-size:15px;line-height:1.5;padding:9px 0 9px 20px; position:relative;border-top:1px solid rgba(21,31,40,.12)} .aufk-inhalt li::before{content:"";position:absolute;left:0;top:18px; width:11px;height:1px;background:var(--tuerkis-dunkel)} .aufk-inhalt b{font-family:var(--set);font-weight:600} .ek{border-top:2px solid var(--tuerkis);padding-top:20px} .ek .zn{font-family:var(--set);font-size:12px;letter-spacing:.2em;color:var(--tuerkis);margin-bottom:14px} .ek .kopf{font-family:var(--set);font-size:clamp(22px,2.4vw,28px);font-weight:600;line-height:1.14;margin-bottom:12px} .stimme{border-left:3px solid var(--tuerkis);padding-left:24px;max-width:60ch} .stimme p{font-size:17px;line-height:1.55} .stimme .wer{font-family:var(--set);font-size:11.5px;letter-spacing:.2em;text-transform:uppercase;opacity:.6;margin-top:12px} /* ---------- REFERENZEN · die eigene Leiste · 9.27 -------------------- Bis zum 17.09.2026 hingen die vier Namen als 13-px-Zeile mit 72 % Deckung am unteren Rand der Stimmen-Sektion — linksbündig, klein, wie eine Fußnote. Das war verkehrt herum: Die vier Namen sind das EINZIGE in diesem Bereich, das man nachprüfen kann. Ein Zitat von „Tatjana, 34" muss man glauben, „Sparkasse Bodensee" kann man nachschlagen. Das Überprüfbare war das Leiseste. Jetzt eine eigene Leiste über die ganze Breite, zwischen zwei Haarlinien, mit den Namen gleichmäßig verteilt. `space-between` statt linksbündig: Die Leiste soll die Breite tragen und nicht an einer Kante kleben — sie ist neben dem Fuß die zweite Stelle der Seite, die nicht linksbündig gesetzt ist, und das ist hier Absicht. WENN LOGOS KOMMEN: Jede Zeile ist ein eigenes Element in einer Flex-Reihe. Aus `Name` wird ``, die Höhe setzt `.ref-zeile > *{max-height:…}`, und die Verteilung bleibt wie sie ist. Am Raster muss dafür nichts geändert werden. */ /* Der Innenabstand lag bis zum 18.09.2026 auf clamp(30px,4vw,54px) und damit auf dem Maß der Textfassung. Mit Logos, die ein Drittel größer stehen, wurde die Leiste dadurch zu einem eigenen Block statt einer Zeile. Das Maß, das hier wegfällt, steht jetzt in den Logos. */ /* Seit dem 18.09.2026 dunkelblau, auf Ansage (§9.47). Der Balken steht jetzt direkt unter dem Header; auf Weiß liefen die Logos dort mit 68 % Deckung als graue Zeile mit, statt gesehen zu werden. Auf Dunkelblau stehen sie weiß und tragen. Die Haarlinien entfallen — eine Fläche braucht keine Kante. */ /* ---------- DIE REFERENZLEISTE LÄUFT · 21.09.2026 · §9.66 ----------- Aus vier Logos sind sechs geworden. Nebeneinander gestellt brauchten sie gemessen rund 1020 px plus Abstände — bei 1440 px Fensterbreite und 220 px Polsterung passt das knapp, bei 1024 px nicht mehr, und schmal stünden sie in drei Reihen übereinander. Statt sie kleiner zu machen, läuft die Reihe jetzt. Das Band trägt die sechs ZWEIMAL und wird um genau seine halbe Breite verschoben — dadurch ist der Übergang nahtlos, ohne dass irgendwo gerechnet oder gemessen werden muss. `overflow:hidden` an der Leiste, nicht am Band: Das Band ist breiter als die Seite, und ohne den Deckel liefe die ganze Seite waagerecht über. Das ist der Punkt, an dem so etwas üblicherweise kaputtgeht. */ .ref{padding:clamp(28px,3.2vw,44px) 0;background:var(--blau);overflow:hidden} /* `max-width:none` ist hier die Bedingung, nicht Kosmetik: Die Zeile ist ein

, und der Grundsatz deckelt jeden Absatz bei 64 Zeichen. Ohne die Zeile endete die Verteilung bei 600 px — die Namen standen wieder links, nur mit größeren Lücken. */ /* KEIN `padding-left` AN DIESEM ELEMENT. Bis zum 21.09.2026 stand hier `padding-left:var(--rand)` als linker Anlauf — und genau das war der Ruckler, den man alle 46 Sekunden sah. Warum: `translateX(-50%)` rechnet mit der EIGENEN Breite des Bandes, und die ist Polster + Reihe + Reihe. Die Hälfte davon ist Polster/2 + Reihe — also um ein halbes Polster MEHR, als ein nahtloser Durchlauf braucht. Am 21.09.2026 bei 1440 px gemessen: Band 2313,4 px, halbe Breite 1156,7 px, eine Reihe 1113,5 px. Sprung: 43,2 px. Das ist die Hälfte von 86,4 px, und 86,4 px sind 6 vw von 1440. MERKSATZ: Bei einem Laufband mit `translateX(-50%)` darf am verschobenen Element NICHTS liegen, was Breite macht — kein Polster, kein Rahmen, keine Lücke. Alles davon gehört in die Reihen, und die Reihen müssen exakt gleich breit sein. */ .ref-lauf{display:flex;width:max-content; animation:ref-zieht 46s linear infinite} /* Die Reihe bricht NICHT mehr um (`nowrap`): Ein Laufband mit Umbruch ist kein Laufband. Der rechte Innenabstand ist derselbe Wert wie der Abstand dazwischen — sonst klafft an der Naht eine Lücke von doppelter oder halber Breite, je nachdem. */ /* Das Polster liegt LINKS und an BEIDEN Reihen — nicht rechts und nicht am Band. Beide Reihen sind dadurch exakt gleich breit, die halbe Bandbreite ist genau eine Reihe, und die Naht sitzt. Es ist zugleich der linke Anlauf beim ersten Durchlauf und der Abstand an der Naht bei jedem weiteren. Derselbe Wert wie die Lücke dazwischen: So ist der Rhythmus über die ganze Länge gleich — vorher war der Anlauf `--rand` (bis 110 px) und die Lücke bis 76 px. */ .ref-zeile{display:flex;align-items:center;flex-wrap:nowrap; gap:clamp(34px,4.6vw,76px);padding-left:clamp(34px,4.6vw,76px); margin:0;max-width:none} @keyframes ref-zieht{from{transform:translateX(0)}to{transform:translateX(-50%)}} /* Unter dem Zeiger hält das Band an. Wer ein Logo lesen will, soll es lesen können — und es ist die einzige ehrliche Antwort auf die Frage, warum etwas wegläuft, das man gerade anschaut. */ @media (hover:hover){ .ref:hover .ref-lauf{animation-play-state:paused} } /* REDUZIERTE BEWEGUNG: Das Band steht still. Dann steht die erste Reihe da und die zweite läuft rechts aus dem Bild — sichtbar sind die sechs Logos einmal, und genau darauf kommt es an. Kein Informations- verlust, die Regel des Hauses bleibt gewahrt. */ @media (prefers-reduced-motion:reduce){ .ref-lauf{animation:none} } /* Etwas größer und etwas weniger zurückgenommen als vorher (13 px auf 72 %). Sie dürfen gelesen werden. */ .ref-zeile > *{font-family:var(--set);font-size:clamp(13px,1.05vw,15.5px); letter-spacing:.16em;text-transform:uppercase;color:#fff;opacity:.78;white-space:nowrap} /* ---------- REFERENZEN · die Logos · 18.09.2026 ---------------------- §9.27 hatte den Platz freigehalten und `` vorgeschlagen. Es ist keins geworden, und der Grund ist die Farbe: Die vier Dateien kommen in vier fremden Rot- und Blautönen (Sparkasse #ee0000, DBVC #cb3b2a und #1e408f, IOBC in sechs Tönen, #Fortschritt als rotes PNG). Auf der weißen Leiste wären das vier laute Fremdkörper nebeneinander. Deshalb liegt jedes Logo als MASKE und nicht als Bild: Die Datei gibt nur ihre Form her, die Farbe kommt aus `background-color`. Das hat drei Folgen, und alle drei sind der Grund für diesen Weg: 1. Eine einzige Regel färbt alle vier. „Einheitlich dunkelblau" ist nicht viermal nachgestellt, sondern eine Stelle. 2. Es geht auch beim PNG. Für #Fortschritt gibt es keinen Vektor, und ein rotes PNG lässt sich anders nicht umfärben. 3. Die Dateien unter `_orig_*` bleiben unangetastet. Umgefärbt wird erst beim Zeichnen, nicht auf der Platte. Die Maske nimmt den Alphakanal. Bei allen vier Dateien ist das richtig: Das Sparkassen-S ist eine Aussparung im Quadrat und bleibt eine; in der IOBC-Datei stehen zwar weiße Flächen im Stylesheet, sie werden aber von keinem Element benutzt. OHNE CSS steht der Name da, wo das Logo stand — er bleibt im Markup und wird nur weggeschoben. Vorlesende Programme lesen ihn ebenfalls. `.ref-zeile .ref-logo` statt `.ref-logo`: Die Regel darüber ist `.ref-zeile > *` und damit gleich spezifisch. Gleichstand entscheidet die Reihenfolge, und darauf soll sich hier nichts verlassen müssen. */ /* ACHTUNG, EINMAL HINEINGELAUFEN: `tokens.css` wird NICHT ausgeliefert. Das Seitengerüst lädt allein diese Datei. Die Token `--blau-18`, `--blau-45`, `--blau-70`, `--blau-05` und `--blau-10` stehen nur in tokens.css und lösen hier zu NICHTS auf — und eine Deklaration mit einem leeren var() wird stillschweigend verworfen. Am 18.09.2026 fehlten dadurch sechs Haarlinien, ohne dass irgendwo ein Fehler stand. In dieser Datei werden die Werte deshalb ausgeschrieben. */ .ref-zeile .ref-logo{ display:block; /* --v ist das Seitenverhältnis der zugeschnittenen Datei, --h die gewünschte Höhe. Breite ist daraus gerechnet, nie geschätzt. */ height:var(--h);width:calc(var(--h) * var(--v)); background-color:#fff; -webkit-mask:var(--src) center/contain no-repeat; mask:var(--src) center/contain no-repeat; /* Weiß auf Dunkelblau, 90 %. Der Kommentar unten stammt von der hellen Fassung und gilt sinngemäß weiter: eine Form trägt schwerer als eine Zeile Versalien. 68 % statt der 78 % der Textfassung. Eine Form trägt schwerer als eine Zeile Versalien; bei gleicher Deckung stünden die Logos lauter da als die Namen vorher. Am gerenderten Bild gemessen, nicht gerechnet: #151F28 auf Weiß bei .68 kommt als #5f666c heraus und trägt 5,83:1 — über den 4,5, die kleiner Text braucht, und damit auch für eine Wortmarke ausreichend. */ opacity:.9; /* Der Name bleibt im Markup und wird nur aus dem Kasten geschoben. */ text-indent:-200vw;overflow:hidden;white-space:nowrap; transition:opacity .3s ease, transform .3s cubic-bezier(.22,.61,.36,1); } /* Die vier Dateien. Die Höhen sind nicht gleich, und das ist der Punkt: Gleiche Kastenhöhe hieße hier ungleiche Schriftgröße, weil in jedem Logo etwas anderes im Kasten steht — #Fortschritt ist reine Versalie, DBVC hat eine Bildmarke über den Buchstaben, IOBC steht neben einer Kugel, die dreimal so hoch ist wie seine Buchstaben. Ausgeglichen ist deshalb die VERSALHÖHE der Wortmarke, nicht der Kasten. Am 18.09.2026 alle vier um ein Drittel angehoben — auf Ansage. Die Verhältnisse untereinander sind dabei unverändert geblieben; jede Höhe ist mit 1,333 multipliziert und dann auf halbe Pixel gerundet. Wer eine einzelne Größe nachzieht, zieht die anderen drei mit, sonst fällt der Ausgleich der Versalhöhen wieder auseinander. */ .ref-zeile .fortschritt{--src:url(../logo/referenzen/fortschritt.png); --v:8.122;--h:clamp(18px,1.73vw,24.5px)} .ref-zeile .sparkasse{--src:url(../logo/referenzen/sparkasse-bodensee.svg); --v:2.280;--h:clamp(44px,4.25vw,61px)} .ref-zeile .dbvc{--src:url(../logo/referenzen/dbvc.svg); --v:4.183;--h:clamp(22px,2vw,28.5px)} /* DREI NEUE, 21.09.2026 (§9.66). IOBC ist aus der Leiste heraus — es steht weiterhin als Mitgliedschaft auf /ueber-mich. Zwei davon folgen dem Ausgleich der Versalhöhe oben: Bei #Fortschritt misst die Wortmarke 62 % der Dateihöhe, bei 24,5 px Kasten also 15,2 px Versalhöhe. Darauf sind Odgers und T4M gerechnet. MENTAL HEALTH FIRST AID KANN DAS NICHT. Gemessen belegt dort die Blüte 42 % der Höhe, die Wortmarke „MENTAL HEALTH" nur 9 %. Auf dieselbe Versalhöhe gebracht wäre der Kasten 167 px hoch — dreimal so hoch wie alles andere. Eine gestapelte Marke wird deshalb OPTISCH eingepasst, nicht gerechnet: Sie bekommt die Höhe der Sparkasse, der zweiten gestapelten Marke in der Reihe. */ /* GERECHNET, NICHT GESCHÄTZT. #Fortschritt trägt bei 24,5 px Kasten eine Versalhöhe von 15,2 px (die Wortmarke misst 62 % der Dateihöhe, die Datei hat oben und unten Luft). Odgers und T4M sind darauf gebracht: ihre Dateien sind auf den Inhalt beschnitten, die Wortmarke misst darin 72,9 % bzw. 63,5 %. Odgers 15,2 / 0,729 = 20,8 px T4M 15,2 / 0,635 = 23,9 px Odgers steht einen Hauch höher als gerechnet: Die Schrift ist dünn und wirkt bei gleicher Versalhöhe kleiner als die fetten Nachbarn. Das ist eine optische Korrektur und als solche hier vermerkt. */ .ref-zeile .odgers{--src:url(../logo/referenzen/odgers.png); --v:5.424;--h:clamp(16px,1.6vw,22.5px)} .ref-zeile .t4m{--src:url(../logo/referenzen/t4m.png); --v:2.968;--h:clamp(17px,1.7vw,24px)} .ref-zeile .mhfa{--src:url(../logo/referenzen/mhfa.png); --v:1.075;--h:clamp(44px,4.25vw,61px)} /* Unter dem Zeiger: ein Gimmick, mehr nicht. Drei Pixel Hub und der Rest der Deckung. Kein Farbwechsel — die Leiste soll einheitlich bleiben, auch während man darüberfährt. `hover:hover` schließt Tippgeräte aus. Dort bleibt ein :hover sonst nach der Berührung stehen, und dann steht ein Logo höher als die anderen, ohne dass jemand darauf zeigt. */ @media (hover:hover){ .ref-zeile .ref-logo:hover{opacity:1;transform:translateY(-3px)} } /* Der Hub ist Bewegung, die Deckung ist es nicht. Bei reduzierter Bewegung bleibt deshalb die Deckung und der Hub fällt weg — die Rückmeldung geht nicht verloren, sie wird nur still. */ @media (prefers-reduced-motion:reduce){ .ref-zeile .ref-logo{transition:opacity .3s ease} .ref-zeile .ref-logo:hover{transform:none} } /* ---------- QUELLENANGABE · 21.09.2026 ------------------------------ Für Zahlen, die jemand nachschlagen können soll. Leise, aber nicht unlesbar: 55 % Weiß auf Dunkelblau ergibt gemessen 5,89 : 1 — über den 4,5, die Kleintext braucht. 45 % wären 4,41 und damit zu wenig; der Wert ist die Grenze, nicht der Geschmack. Auf hellem Grund derselbe Abstand zur Schrift: #5b646b trägt auf Eisblau 5,4 : 1. Nicht verlinkt — auf Ansage. */ /* SEIT DEM 21.09.2026 NIRGENDS BENUTZT. Die einzige Quellenzeile stand im Unternehmens-Split und ist dort auf Ansage weggefallen; die beiden Quellen stehen jetzt im Satz. Die Regel bleibt stehen, weil A1/A5 in LIVEGANG.md offen sind und eine Quellenzeile zurückkommen kann. Wer sie endgültig streicht, streicht auch die Zeile darunter. */ .quelle{font-size:12px;line-height:1.45;margin-top:10px; color:#5b646b;max-width:52ch} .dunkel .quelle,.halb.dunkel .quelle,.txt-stein .quelle{color:rgba(255,255,255,.55)} .nlform{display:flex;gap:12px;flex-wrap:wrap;margin-top:22px} .nlform input{flex:1 1 260px;background:rgba(255,255,255,.7);border:1px solid rgba(21,31,40,.3);color:var(--blau);padding:15px 16px;font-family:var(--lauf);font-size:16px} .nlform input:focus{outline:2px solid var(--blau);outline-offset:2px} /* ---------- „SO LÄUFT DIE ZUSAMMENARBEIT" MIT BILD · 21.09.2026 ----- 0,62 zu 1: Das Bild bekommt weniger Platz als die Schritte, denn es belegt, es erklärt nicht. Bei 1440 px sind das 415 px Bild gegen 670 px Schritte — in 670 px stehen zwei Schrittkarten nebeneinander bequem, in 605 px wurden sie eng. `align-items:start`, nicht `stretch`: Das Bild soll seine eigene Proportion behalten (4:5) und nicht auf die Höhe der Schrittspalte gezogen werden. Wächst der Text, wächst das Bild nicht mit. */ .zusammenarbeit{display:grid;grid-template-columns:minmax(0,.62fr) minmax(0,1fr); gap:clamp(26px,3.6vw,60px);align-items:start;margin-top:clamp(26px,3.2vw,42px)} /* Die Schritte stehen auf der MITTE des Bildes, nicht an seiner Oberkante. Oben ausgerichtet blieben bei 1440 px gemessen 280 px Leere unter der vierten Karte — das Buch sagt „lieber zu wenig Weißraum als zu viel", und eine Spalte, die auf halber Höhe aufhört, sieht nach Fehler aus statt nach Absicht. */ .zusammenarbeit .schritte{grid-template-columns:repeat(2,1fr);margin-top:0; align-self:center} .za-bild{margin:0;aspect-ratio:4/5;overflow:hidden;background:var(--blau)} /* `object-position` senkrecht auf 18 %: Der Zuschnitt setzt die Augen auf 0,33 der Bildhöhe; wird der Rahmen flacher als 4:5, wandert der Kopf sonst aus dem Bild. */ .za-bild img{width:100%;height:100%;object-fit:cover;object-position:center 18%} /* Schmal steht das Bild oben und die Schritte darunter — in einer Spalte von 190 px ist ein Porträt ein Briefmarkenbild. Die Schwelle ist 880 px, dieselbe, bei der `.schritte` ohnehin auf zwei Spalten geht. */ @media (max-width:880px){ .zusammenarbeit{grid-template-columns:1fr;gap:clamp(24px,5vw,38px)} .za-bild{aspect-ratio:3/2} .za-bild img{object-position:center 22%} } .schritte{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;margin-top:12px} /* Zwei Spalten für die vier Phasen auf /unternehmen (§9.65): längere Texte brauchen Zeilenlänge, nicht Spaltenzahl. Der Zeilenabstand zwischen den zwei Reihen ist größer als der seitliche — sonst liest sich das Raster als eine Fläche statt als zwei Reihen. */ .schritte.phasen{grid-template-columns:repeat(2,1fr); column-gap:clamp(28px,4vw,72px);row-gap:clamp(30px,3.4vw,46px); margin-top:clamp(24px,3vw,38px)} @media (max-width:880px){.schritte.phasen{grid-template-columns:1fr}} .schritt{border-top:1px solid rgba(21,31,40,.24);padding-top:16px} /* #4d6373 stand hier bis zum 17.09.2026 und trug auf dem Eisblau gemessene 4,0 bis 4,4:1 — unter den 4,5, die kleiner Text braucht. Das lag nicht an der Textur, es war vorher schon so; die neue, kontrastreichere Fläche hat es nur sichtbar gemacht. #3d5766 steht an zwei vergleichbaren Stellen in dieser Datei bereits. */ .schritt .zn{font-family:var(--set);font-size:12px;letter-spacing:.2em;color:#3d5766;margin-bottom:8px} .schritt .tt{font-family:var(--set);font-size:17px;font-weight:600;margin-bottom:6px} /* ---------- DER PORTRÄTRAHMEN · 18.09.2026 --------------------------- Er hat auf der Startseite schon einmal gestanden (§9.34, damals `.uebung-rahmen`) und ist mit der Atemsektion ausgebaut worden. Die Rechnung dahinter war die Arbeit, nicht das CSS — sie steht in §9.36 und gilt unverändert. Warum nicht `object-position`: Das verschiebt nur, es vergrößert nicht. Ein Gesicht, das zu klein im Bild steht, wird durch Verschieben nicht größer — und genau das war der Befund auf /ueber-mich. Drei Werte kommen von außen, je Bild einzeln: --zoom Breite des Bildes, als Vielfaches der Rahmenbreite --oben Versatz nach oben, in Prozent der RAHMENhöhe --links Versatz nach links, in Prozent der RAHMENbreite Sie stehen im Markup und nicht hier, weil sie zum Bild gehören und nicht zur Komponente. */ /* Gedeckelt am 18.09.2026. Ohne Deckel füllte der Rahmen die halbe Seite: 605 × 756 bei 1440, während die Textspalte daneben nach rund 290 px zu Ende war. Das Porträt erschlug den Text, und die Sektion wurde fast 1000 px hoch. Der Deckel holt zugleich die SCHÄRFE zurück, und das ist der eigentliche Grund. Die Rechnung: Der Rahmen zeigt das Bild um --zoom vergrößert, hier 1,62. Bei 605 px Rahmen waren das 980 Bildpixel aus einer 1000-px-Datei — auf einem Retina-Schirm also 1960 aus 1000, fast das Doppelte. Bei 420 px Rahmen sind es 680, auf Retina 1360 aus 1000. Sichtbar schärfer, ohne eine größere Datei. MERKSATZ: Ein Zoom im Rahmen kostet Auflösung zweimal — einmal durch die Vergrößerung, einmal durch die Pixeldichte des Schirms. Wer --zoom erhöht, muss den Rahmen kleiner machen, sonst wird das Bild weich. Beides hängt zusammen und wird zusammen gerechnet. `margin-left:auto` hält die rechte Kante dort, wo sie war: auf dem Seitenrand, bündig mit allem darüber und darunter. */ .portraet{position:relative;overflow:hidden;aspect-ratio:4/5; width:100%;max-width:420px;margin-left:auto} .portraet img{position:absolute;top:var(--oben,0);left:var(--links,0); width:calc(var(--zoom,1) * 100%);height:auto; /* Die Grundregel `img{max-width:100%}` kappt jede Vergrößerung über die Rahmenbreite hinaus. Ohne diese Zeile ist --zoom wirkungslos: Das Bild sieht aus wie vorher, nur der Code nicht. Hat beim ersten Bau zwanzig Minuten gekostet (§9.34). */ max-width:none} .uebung{counter-reset:sch;max-width:58ch} .uebung li{list-style:none;counter-increment:sch;position:relative;padding:0 0 18px 50px;font-size:16px;line-height:1.5} .uebung li::before{content:counter(sch);position:absolute;left:0;top:-2px;width:32px;height:32px;border:1px solid var(--blau);display:flex;align-items:center;justify-content:center;font-family:var(--set);font-size:13.5px} footer{--fokus-farbe:var(--tuerkis);background:var(--blau);color:rgba(255,255,255,.72);padding:64px var(--seitenrand) 40px;font-size:14px} footer a{color:rgba(255,255,255,.72);text-decoration:none} footer a:hover{color:#fff} /* Seiten links, die zwei Netzwerke rechts, auf einer Linie. Bei zu wenig Platz rutschen sie untereinander, dann bleibt links. */ .fnav{display:flex;flex-wrap:wrap;justify-content:space-between; align-items:baseline;gap:18px clamp(28px,4vw,60px);margin-bottom:32px} .fzeile{display:flex;flex-wrap:wrap;gap:26px;margin-bottom:0;font-family:var(--set);font-size:12px;letter-spacing:.16em;text-transform:uppercase} .fsozial{opacity:.7} .frecht{display:flex;flex-wrap:wrap;gap:20px;font-size:12.5px;opacity:.65;border-top:1px solid rgba(255,255,255,.16);padding-top:22px} @media (max-width:880px){ .zwei,.drei{grid-template-columns:1fr} .schritte{grid-template-columns:1fr 1fr} nav{display:none} nav.offen{display:flex;flex-direction:column;align-items:flex-start;gap:16px;position:absolute;top:100%;left:0;right:0;background:var(--blau);padding:24px var(--rand) 30px} .burger{display:block} header{background:rgba(21,31,40,.96)} } /* Der Universalselektor erfasst KEINE Pseudoelemente. Ohne ::before und ::after liefe der Zug unter dem Schalter auch bei reduzierter Bewegung weiter — die Regel lautet aber „ohne Ausnahme". Gemessen am 15.09.2026: transition-duration stand dort trotz der Regel auf 0,18 s. */ @media (prefers-reduced-motion:reduce){ *,*::before,*::after{transition:none!important;animation:none!important;scroll-behavior:auto} } /* ===== ERGÄNZT FÜR DIE UNTERSEITEN — Rest der Datei unverändert ===== */ .seite{display:none} .seite.an{display:block} a.stufe{text-decoration:none;color:inherit;transition:padding-left .18s ease} a.stufe .nm{transition:color .18s ease} a.stufe:hover .nm,a.stufe:focus-visible .nm{color:#3d5766} a.stufe:hover{padding-left:8px} a.stufe::after{content:"›";font-family:var(--set);font-size:20px;color:var(--tuerkis); grid-column:2;grid-row:2;justify-self:end;line-height:1;opacity:0;transition:opacity .18s} a.stufe:hover::after,a.stufe:focus-visible::after{opacity:1} a.feld{text-decoration:none;color:inherit;display:block;transition:background .2s} .dunkel a.feld:hover,.dunkel a.feld:focus-visible{background:rgba(255,255,255,.13)} a.feld .mehr{font-family:var(--set);font-size:11px;letter-spacing:.18em;text-transform:uppercase; color:var(--tuerkis);display:inline-block;margin-top:14px} .weiterlink{font-family:var(--set);font-size:12px;letter-spacing:.16em;text-transform:uppercase; color:inherit;text-decoration:none;border-bottom:1px solid var(--tuerkis);padding-bottom:3px; display:inline-block;margin-top:24px} .protobar{position:fixed;left:0;bottom:0;z-index:90;background:var(--blau);color:var(--tuerkis); font-family:var(--set);font-size:11.5px;letter-spacing:.1em;padding:9px 15px; border-top:1px solid var(--tuerkis);border-right:1px solid var(--tuerkis)} .protobar b{color:#fff;font-weight:500} .platzhalter{min-height:62vh;display:flex;flex-direction:column;justify-content:center} .platzhalter .bau{font-family:var(--set);font-size:11px;letter-spacing:.2em;text-transform:uppercase; color:var(--tuerkis);border:1px solid var(--tuerkis);padding:7px 13px;display:inline-block; margin-bottom:26px;align-self:flex-start} .bloecke{list-style:none;margin-top:10px;max-width:56ch} .bloecke li{padding:12px 0 12px 26px;border-bottom:1px solid rgba(255,255,255,.16);position:relative;font-size:15.5px} .bloecke li::before{content:"";position:absolute;left:0;top:21px;width:13px;height:1px;background:var(--tuerkis)} .seitenkopf{--fokus-farbe:var(--tuerkis);color:#fff;background-size:cover;background-position:center; padding:clamp(128px,17vw,205px) var(--seitenrand) clamp(50px,7vw,86px);position:relative} /* Der Gletscherfels läuft 15 Punkte leichter als die anderen zwei — auf Ansage. Er trägt die meisten Seitenköpfe, und dort darf die Struktur am deutlichsten stehen. Was das für die Lesbarkeit heißt, ist unten in §9.28 gemessen. */ /* Die drei Köpfe sind am 17.09.2026 einzeln nachgestellt worden, auf Ansage und nach Augenmaß am Gerenderten (§9.29). Unternehmen: der Gletscherfels stand zu laut. Von .82 auf .88 — das nimmt rund ein Drittel der sichtbaren Struktur heraus. Journal: rund ein Fünftel weniger, von .86 auf .89. Individuals: die Deckung BLEIBT — dort war nicht die Struktur zu stark, sondern das Bild oben zu hell. Dafür liegt eine dritte Lage darüber, die nur die obere Hälfte abdunkelt und bei 58 % ausläuft. Eine gleichmäßig stärkere Deckung hätte auch die untere Hälfte erschlagen, wo die Rippel gerade gut stehen. */ /* Am 18.09.2026 noch einmal zurückgenommen, auf Ansage: rund die HÄLFTE der sichtbaren Struktur raus. Die Rechnung dahinter ist einfach und lohnt sich zu merken: Was von einer Textur übrig bleibt, ist proportional zu (1 − Deckung). Bei 0,88 sind das 12 %, die Hälfte davon sind 6 % — also 0,94. Nicht „0,88 halbieren", sondern den REST halbieren. Bei Individuals liegt zusätzlich die obere Lage mit 0,42 darüber. Zusammen ergeben 0,42 und 0,84 eine wirksame Deckung von 0,907; für die Hälfte des Rests muss die untere auf 0,92. */ /* ---------- EIN FEHLER, DER SEIT DEM ERSTEN TAG DRINSTAND · 18.09.2026 `.seitenkopf` setzt `background-size:cover` und `background-position: center`. Die vier Regeln hier stehen SPÄTER und benutzen die Kurzform `background:` — und eine Kurzform setzt jede Eigenschaft ihrer Familie zurück, die sie nicht selbst nennt. Größe fiel damit auf `auto`, Wiederholung auf `repeat`, Position auf `0% 0%`. Folge: Jede Kopffläche stand in ihrer natürlichen Pixelgröße oben links und KACHELTE. Auf Bildschirmen, die breiter sind als die Datei, lief eine sichtbare Naht durch den Kopf — im Journal bei 1700 px, auf /ueber-mich schon bei 1000. Gemeldet als „da ist ein Schnitt". MERKSATZ: Eine Kurzform überschreibt nicht nur, was sie sagt, sondern auch alles, was sie verschweigt. Wer `background:` schreibt, hat `background-size` mitgeschrieben — auf `auto`. Deshalb steht Größe und Position jetzt IN der Kurzform, je Lage einzeln (`center/cover`). Das kann keine spätere Regel mehr kippen und ist an Ort und Stelle zu lesen. */ /* Granit · nur /ueber-mich · §9.38, Bild getauscht am 21.09.2026 (§9.62). Hier lag eine Eisblume. Sie wurde als Eiskristall oder Tannenzweig gelesen — als Gegenstand also, nicht als Fläche — und ist auf Ansage durch Stein ersetzt. Deckung unverändert .94 → .96, dieselbe wie `kopf-stein`, und die Regel aus §9.28/§9.38 gilt weiter: Unter schwerer Deckung überlebt nicht der große Tonumfang, sondern das FEINE KORN. Der Granit hat beides; gemessen ergibt er unter dieser Deckung Streuung 4,75 gegen 4,50 der Eisblume und 4,83 des Gletscherfelses — er steht also zwischen beiden und braucht keine eigene Ausnahme. */ /* ---------- SEITENKOPF ALS TEILUNG · 21.09.2026 · §9.64 ------------- VORGESCHICHTE, ZWEI FEHLSCHLÄGE TIEF. §9.36: Porträt als Hintergrund unter 94 % Deckung — ein unsichtbarer Mensch. §9.63: derselbe Fehler noch einmal, nur mit gerechnetem Zuschnitt. Die Messwerte stimmten alle, das Bild war trotzdem unbrauchbar: eine hochskalierte Nahaufnahme, so weit abgedunkelt, dass von Theres nichts blieb. DER FEHLER WAR NICHT DER VERLAUF, SONDERN DIE ÜBERLAGERUNG. Ein Foto auf heller Wand und weiße Schrift wollen denselben Platz. Solange beide übereinanderliegen, verliert eines — meistens das Foto. Also liegen sie jetzt NEBENEINANDER. Links Dunkelblau mit dem Text, rechts das Foto, dazwischen eine harte Kante. Das Foto behält seine helle Wand, der Text seinen dunklen Grund, und nichts wird abgedunkelt. Das Buch nennt für Print genau das: große Bildflächen, harte Kanten, bewusste Asymmetrie — 1 zu 0,82 statt halbe-halbe. DIE BILDER SIND QUERFORMAT (3500 × 2333) mit Theres rechts und freier Wand links. Im Spaltenzuschnitt wird nur waagerecht beschnitten, nie senkrecht: Der Kopf kann bauartbedingt nicht abgeschnitten werden. */ .kopf-teil{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.82fr); padding:0;background:var(--blau);align-items:stretch;overflow:hidden} .kopf-teil .kt-text{ padding:clamp(120px,15vw,190px) clamp(28px,4vw,72px) clamp(52px,7vw,88px) max(var(--rand),(100vw - var(--deckel)) / 2)} /* `center` senkrecht, nicht `top`: Das Bild ist breiter als die Spalte (rund 1,16 : 1), wird also an der HÖHE ausgerichtet und nur seitlich beschnitten — der Kopf kann nicht abgeschnitten werden. WAAGERECHT AUF 50 %, und das ist ein Zuschnitt, keine Verschiebung: Gemeldet war „Theres steht sehr weit rechts", gemessen stand ihr Schwerpunkt bei 68 bis 70 % der Spalte. `background-position` allein reichte nicht — bei 1,50 : 1 gegen 1,16 : 1 bleiben nur 191 px Spielraum, gebraucht wurden 71 davon, und der Rand wäre auf null gelaufen. Stattdessen sind in der Bilddatei links 19 % leere Wand abgeschnitten. Die Datei ist damit 1,21 : 1, Theres sitzt bei 58 %, und es bleibt nach beiden Seiten Luft. */ /* DIE ÜBERSCHRIFT IST AUF DIE SPALTE GERECHNET, nicht geschätzt. Die Textspalte misst bei 1440 px 791 px, davon gehen 182 px Polsterung ab — 609 px bleiben. In der Grundgröße von 60 px braucht „DU WÄHLST DIE TIEFE." gemessen 655 px und bräche um; „WIRTSCHAFTSFAKTOR." läuft bei 1024 px sogar aus der Spalte heraus. 52 px statt 60 px lösen beides: längste Zeile dann 515 px bei 1440 px und 385 px bei 1024 px. Der Deckel von 15ch fällt weg, er passte zur vollen Breite und nicht zur Spalte. */ .kopf-teil .kt-text h1{max-width:none;font-size:clamp(30px,3.8vw,52px)} .kopf-teil .kt-bild{background:var(--kopf-p) 50% center / cover no-repeat; min-height:clamp(340px,40vw,560px);position:relative} /* Die feste Kopfleiste ist oben DURCHSICHTIG und hat weiße Schrift. Über der hellen Wand wäre sie unlesbar. Ein kurzer dunkler Anlauf allein über dem Bild löst das, ohne das Foto anzufassen: Bei 14 % ist er weg, und Theres beginnt erst darunter. */ .kopf-teil .kt-bild::after{content:"";position:absolute;inset:0;pointer-events:none; background:linear-gradient(180deg,rgba(21,31,40,.62) 0%,rgba(21,31,40,.22) 8%, rgba(21,31,40,0) 16%)} /* Schmal wird gestapelt, nicht gestaucht: erst das Bild, dann der Text. Zwei Spalten unter 820 px hießen eine Textspalte von 190 px — darin steht keine Überschrift dieser Größe. */ @media (max-width:820px){ .kopf-teil{grid-template-columns:1fr} .kopf-teil .kt-bild{order:-1;min-height:min(74vw,430px);background-position:62% center} .kopf-teil .kt-text{padding:clamp(34px,7vw,56px) var(--rand) clamp(46px,8vw,74px)} } /* KOPF OHNE BILD · 21.09.2026 · auf Ansage. Alle sechs Seitenköpfe mit Struktur tragen jetzt diese Fläche: /ueber-mich, /journal, /impressum, /agb, /datenschutz und die Newsletter-Antwortseite. Kein Verlauf mehr: Er war dazu da, ein Bild zu dämpfen, und ohne Bild dämpft er nichts. Die vier Strukturaufnahmen sind damit vollständig aus der Seite heraus — Begründung und Folgen stehen oben bei den Variablen. Die Porträtköpfe von /individuals und /unternehmen (`.kopf-teil`) sind eigene Aufnahmen und davon nicht berührt. */ .kopf-flach{background:var(--blau)} .seitenkopf .rubrik{color:var(--tuerkis);opacity:1} /* `overflow-wrap:anywhere` · 22.09.2026 nachgemessen: Bei 320 px lief der Kopf auf /agb um 3 px waagerecht über — „ALLGEMEINE GESCHÄFTSBEDINGUNGEN." ist ein Wort, das schmaler als sein Kasten nicht wird. Es betrifft jede lange Überschrift, nicht nur diese, also steht die Regel an `h1` und nicht an einer Seite. */ .seitenkopf h1{max-width:15ch;overflow-wrap:anywhere} /* Eine Überschrift, die auf EINER Zeile stehen soll · 21.09.2026. Der Deckel von 15ch darüber bricht „DU WÄHLST DIE TIEFE." nach dem zweiten Wort. Kein `white-space:nowrap`: Die Zeile braucht bei 375 px gemessen rund 352 px und hat 331 px — dort MUSS sie umbrechen, sonst läuft die Seite waagerecht über, und waagerechter Überlauf ist auf dieser Seite die härtere Regel. */ .seitenkopf h1.h1-breit{max-width:none} /* Die Newsletter-Antwortseite besteht nur aus diesem Kopf und dem Fuß. Darunter stand bis zum 19.09.2026 eine weiße Sektion mit einem Werbeblock — heller Balken zwischen zwei dunklen Flächen, und inhaltlich fehl am Platz auf einer Quittung. Die Wege in die Seite trägt der Fuß. Der Kopf bekommt dafür etwas mehr Luft nach unten, damit die Seite nicht abgeschnitten wirkt, wo vorher noch etwas kam. */ .nl-kopf{padding-bottom:clamp(64px,7vw,104px)} .nl-was{max-width:46ch;margin:22px 0 0;color:rgba(255,255,255,.82)} .nl-was a{color:#fff} .seitenkopf p{max-width:48ch;color:rgba(255,255,255,.87);margin-top:22px;font-size:clamp(17px,1.8vw,20px)} /* Einleitung über den vier Formatkacheln · /individuals · 21.09.2026. Zwei Absätze im Vorspanngrad. Der Abstand zwischen ihnen ist größer als eine Zeilenhöhe (18 px auf 1,48 Zeilen), damit sie als zwei Gedanken lesbar bleiben und nicht als ein langer Block — der erste beschreibt den Zustand, der zweite das Angebot. Kein eigenes max-width: `.vorspann` bringt 56ch mit, und das ist die Satzbreite, die auf dieser Seite überall gilt. */ /* Eine Stufe kleiner als `.vorspann` (18–22 px), auf Ansage vom 21.09.2026: Der Block ist vier bis fünf Zeilen lang und stand im Vorspanngrad zu nah an der Überschrift. 16–18,5 px ist der Schritt dazwischen — größer als Fließtext (17 px fest), kleiner als Vorspann. Die Satzbreite wächst dabei mit: 56ch bei kleinerer Schrift ist dieselbe Zeilenlänge in Zeichen, aber weniger Fläche. */ .formate-einleitung{margin-top:clamp(18px,2vw,26px)} .formate-einleitung .vorspann{font-size:clamp(16px,1.55vw,18.5px);line-height:1.55} .formate-einleitung p + p{margin-top:clamp(14px,1.4vw,20px)} .preisband{font-family:var(--set);font-size:13px;letter-spacing:.18em;text-transform:uppercase; color:var(--tuerkis);margin-top:28px;padding-top:18px;border-top:1px solid rgba(255,255,255,.24);display:inline-block} .zurueck{font-family:var(--set);font-size:11px;letter-spacing:.2em;text-transform:uppercase; color:rgba(255,255,255,.6);text-decoration:none;display:inline-block;margin-bottom:20px} .zurueck:hover{color:var(--tuerkis)} a.feld:hover,a.feld:focus-visible{background:rgba(21,31,40,.10)} .eis a.feld:hover,.txt-sand a.feld:hover,.txt-wasser a.feld:hover, .eis a.feld:focus-visible,.txt-sand a.feld:focus-visible,.txt-wasser a.feld:focus-visible{background:rgba(255,255,255,.92)} .eis a.feld .mehr,.txt-sand a.feld .mehr,.txt-wasser a.feld .mehr{color:#3d5766} .merkzeile{font-family:var(--set);font-size:12px;letter-spacing:.14em;text-transform:uppercase; opacity:.6;margin-bottom:10px} .paar{display:grid;grid-template-columns:1fr 1fr;gap:clamp(18px,2.4vw,30px)} /* ---------- AUFKLAPPKACHELN · §9.40 · 18.09.2026 -------------------- Die vier Formate auf /individuals führten bis heute auf vier eigene Seiten. Der Inhalt steht jetzt in der Kachel selbst. Gebaut auf

/ und NICHT auf einem eigenen Skript. Damit macht der Browser das Auf und Zu: ohne JavaScript, mit Tastatur, mit Vorlesegerät, und der Inhalt steht auch zugeklappt im Dokument. Die Hausregel „an der Bewegungsschicht hängt keine Information" ist hier gar nicht erst berührt — es gibt keine. `.klapp` liegt IM Raster `.paar`: zwei Kacheln nebeneinander, solange sie zu sind. Eine offene nimmt die ganze Breite (`grid-column:1/-1`), weil ihr Inhalt selbst wieder in zwei Spalten steht — in einer halben Spalte stünden dort Wortschlangen. */ /* FARBFÜHRUNG · korrigiert am 18.09.2026 nach Sichtprüfung. Gemeldet: „immer ein und dieselbe Farbe, die das Auge nicht leitet." Stimmte: Kachel grau, Inhalt grau, die Kästen darin ein HELLERES Grau auf Grau — drei Ebenen, die alle gleich aussahen, und Türkis kam nur als Strichlein in einer Liste vor. Jetzt führen vier Flächen, alle aus der Palette, keine fünfte Farbe: zu hellgrau ruhig, alle gleich Kopf auf DUNKELBLAU „hier bist du", der Einstieg ins Feld Inhalt WEISS der Lesegrund, hell und ruhig Kästen EISBLAU die Nebensachen, sichtbar abgesetzt Dazu die Rubriken in --tuerkis-dunkel: „Der Akzent markiert, führt oder unterstreicht" (Buch S17). Auf Weiß trägt er 5,97:1. */ .klapp{background:rgba(21,31,40,.05);transition:background .22s ease} .klapp[open]{grid-column:1/-1;background:#fff; outline:1px solid rgba(21,31,40,.14);outline-offset:-1px} .klapp[open] > summary{background:var(--blau);color:#fff} .klapp[open] > summary .merkzeile{color:var(--tuerkis)} .klapp[open] > summary .klein{color:rgba(255,255,255,.82)} .klapp[open] > summary::before,.klapp[open] > summary::after{background:#fff} .klapp[open] > summary:hover{background:#1c2833} /* `list-style:none` UND `::-webkit-details-marker` — WebKit hört nur auf das Pseudoelement, Chromium nur auf die Liste. Ohne beides steht das Dreieck des Browsers vor der Kachel. */ /* STILLGELEGTE KACHELN · 21.09.2026 · §9.68. Die vier Kacheln auf /individuals klappen nicht mehr auf. Aus ist `.klapp-kopf` geworden — dieselbe Fläche, dieselbe Typografie, aber ohne Zeigefinger, ohne Plus-Zeichen und ohne Hover-Wechsel. Der Kopf bekommt deshalb das volle rechte Polster zurück: Die 64 px waren Platz für das Plus, das es nicht mehr gibt. */ .klapp summary,.klapp .klapp-kopf{list-style:none;padding:30px;position:relative; padding-right:64px;transition:background .2s ease} .klapp summary{cursor:pointer} .klapp .klapp-kopf{cursor:default;padding-right:30px} .klapp summary::-webkit-details-marker{display:none} .klapp summary:hover{background:rgba(21,31,40,.05)} .klapp summary:focus-visible{outline:var(--fokus-staerke,2px) solid var(--fokus-farbe); outline-offset:-3px} .klapp summary h3,.klapp .klapp-kopf h3{font-family:var(--set);font-size:clamp(19px,2vw,23px); font-weight:600;line-height:1.2;margin-bottom:10px} /* ZEILENLÄNGEN · korrigiert am 18.09.2026 nach Sichtprüfung. Gemeldet: „Zeilensprünge, die nicht hinhauen." Gemessen war es das: Der Vorspann lief über ~90 Zeichen je Zeile (der Grundsatz deckelt bei 64, aber 64 ist das MAXIMUM für Fließtext, nicht das Maß für einen herausgestellten Satz). Und `.kt` stand auf 24ch — daraus wurde „Vier Schichten. Der Atem als / roter Faden.", ein Waisenkind in der zweiten Zeile. `text-wrap:balance` verteilt die Zeilen gleichmäßig, statt die letzte verhungern zu lassen. Wo der Browser es nicht kann, bleibt es beim normalen Umbruch — kein Verlust. */ .klapp summary .klein,.klapp .klapp-kopf .klein{margin-bottom:0;max-width:46ch;text-wrap:pretty} /* Das Zeichen: ein Kreuz, das sich zum Minus dreht. Zwei Haarlinien, kein Zeichensatzglyph — ein „+" aus der Schrift sitzt je nach Schnitt anders auf der Grundlinie und lässt sich nicht sauber drehen. */ .klapp summary::before,.klapp summary::after{content:"";position:absolute; right:30px;top:38px;width:15px;height:1px;background:var(--blau); transition:transform .26s cubic-bezier(.22,.61,.36,1),opacity .26s ease} .klapp summary::after{transform:rotate(90deg)} .klapp[open] summary::after{transform:rotate(0deg)} .klapp[open] summary::before{opacity:0} .klapp-inhalt{padding:26px 30px 34px} /* Die Kästen im Aufklappteil lagen als helleres Grau auf grauem Grund und waren als eigene Ebene nicht zu erkennen. Auf dem jetzt weißen Grund trägt Eisblau. */ .klapp-inhalt .feld{background:var(--eis)} .klapp-inhalt > .vorspann{max-width:34ch;margin-bottom:4px;text-wrap:balance} /* Jeder frühere Abschnitt der alten Seite wird hier ein Teil mit einer Haarlinie darüber. Die alten Sektionsflächen (.eis, .dunkel, .txt-sand, .txt-stein) sind dabei weggefallen: Eine randlose Fläche innerhalb einer Kachel ist keine Sektion mehr, sie wäre ein Kasten im Kasten. */ .klapp-teil{margin-top:clamp(26px,3vw,40px);padding-top:clamp(22px,2.6vw,32px); border-top:1px solid rgba(21,31,40,.18)} .klapp-teil > .rubrik{margin-bottom:10px;color:var(--tuerkis-dunkel);opacity:1} /* `.kt` statt eines nackten h4: `.feld h4` ist eine Nachfahrenregel und damit spezifischer als eine Klasse allein — die Überschriften in den Kästen darunter sollen davon unberührt bleiben. */ .klapp-inhalt h4.kt{font-family:var(--set);font-size:clamp(20px,2.2vw,26px); font-weight:600;line-height:1.18;text-transform:none;letter-spacing:normal; margin-bottom:20px;max-width:30ch;text-wrap:balance} .klapp-inhalt .zwei{gap:clamp(20px,2.6vw,36px)} /* Fließtext im Aufklappteil auf ein lesbares Maß. 64ch ist die Obergrenze des Grundsatzes; in einer zweispaltigen Kachel ist 54 das Maß, bei dem das Auge den Zeilenanfang noch findet. */ .klapp-inhalt p.klein{max-width:54ch} .klapp-inhalt .schritte{margin-top:0} @media (max-width:880px){ /* `.paar` ist dort ohnehin einspaltig; die offene Kachel braucht die Spannregel dann nicht mehr. */ .klapp[open]{grid-column:auto} .klapp summary{padding:24px;padding-right:56px} .klapp summary::before,.klapp summary::after{right:24px;top:32px} .klapp-inhalt{padding:0 24px 28px} } @media (max-width:880px){.paar{grid-template-columns:1fr}} /* ---------- FRAGENBAND · Übergang vom Hero ins Angebot ---------- Weißer Grund mit Absicht: er bricht die dunkle Strecke zwischen Hero und Erkenntnissen, und die Markergeste braucht hellen Grund — auf Eisblau wäre Türkis fast unsichtbar, auf Weiß liegt es wie Markerfarbe auf Papier. Die Fragen sind gemischt gesetzt, während die Seite sonst Versalien verwendet. Das ist kein Ausrutscher: es sind Sätze, die jemand abends eintippt, keine Überschriften. Bewegung: Ohne JavaScript und bei prefers-reduced-motion stehen alle fünf Fragen sofort vollständig da. Der Endzustand ist mit und ohne Bewegung identisch — die Bewegung zeigt nur den Aufbau und trägt keine Information. */ /* Die Fragen laufen bewusst über die volle Satzbreite und stehen auf großen Ansichten je einzeilig: fünf Zeilen untereinander lesen sich als fünf Stimmen. Bei zu schmalem Maß bricht jede auf drei Zeilen um, und aus fünf Fragen werden fünfzehn Zeilen — dann trägt der Rhythmus die Aussage nicht mehr. Der Grad ist deshalb aus der längsten Frage gerechnet. */ /* Der Grund ist nicht mehr durchgehend weiß, seit dem 16.09.2026. Darüber steht der dunkelblaue Header, darunter die dunkle Sektion der drei Erkenntnisse — an beiden Kanten stieß Dunkelblau ohne Übergang auf Weiß. Statt eines Schattens, den die Verbotsliste als Tiefenersatz ausschließt, steht hier eine Fläche: erst ein kurzer dunkler Anlauf, dann Eisblau, dann Weiß. Drei Stufen statt einer, und alle drei sind Markenfarben. Das löst zugleich den zweiten Einwand: Die Sektion war zu massiv weiß. Jetzt tragen die oberen 30 und die unteren 22 vh Farbe, weiß bleibt das Band in der Mitte, in dem die Fragen laufen. */ /* OBERKANTE, 19.09.2026 nachgemessen. Der Verlauf begann bei 45 % Deckung, der Hero darüber ist voll dunkel: An der Nahtstelle sprang die Helligkeit von 30 auf 136 — 106 Stufen auf einen Pixel, als sichtbarer Strich quer über die Breite. Gemeldet als „Strich durch die Körnung"; die Körnung war unbeteiligt, sie lag auf beiden Seiten gleich — und ist seit dem 21.09.2026 ohnehin weg (§9.62). Der Verlauf bleibt: Die Nahtstelle gäbe es auch ohne sie. Jetzt beginnt der Verlauf fast deckend und läuft über die doppelte Strecke aus. Unten gilt dasselbe, dort grenzt `.txt-stein` an. Dazu mehr Luft oben: Die Rubrik stand vorher mitten im Verlauf, solange der noch dunkel war. */ .fragenband{padding:clamp(124px,15vw,210px) var(--seitenrand) clamp(76px,10vw,140px); background: linear-gradient(180deg,rgba(21,31,40,.94) 0,rgba(21,31,40,0) 6.5vh), linear-gradient(0deg,rgba(21,31,40,.90) 0,rgba(21,31,40,0) 5.5vh), linear-gradient(180deg,var(--eis) 0,rgba(215,225,234,0) 30vh), linear-gradient(0deg,var(--eis) 0,rgba(215,225,234,0) 22vh), var(--weiss)} .fb-liste{list-style:none;margin:clamp(26px,3.4vw,44px) 0 0;max-width:none} .fb-liste li{font-family:var(--set);font-size:clamp(20px,2.45vw,32px);line-height:1.3; padding:clamp(12px,1.35vw,17px) 0;max-width:none} .fb-schluss{margin:clamp(32px,4vw,54px) 0 0;font-family:var(--set); font-size:clamp(20px,2.45vw,32px);line-height:1.3;max-width:none} /* Die Markergeste. Sie liegt ÜBER dem Wort und bleibt halbtransparent — wie echte Markerfarbe auf Gedrucktem. Höchstens eine Geste pro Seite, immer auf einem Wort, das die Seite selbst verhandelt. Die Lage ist für gemischten Satz nachgerechnet, weil der Printwert für Futura-Versalien bei Zeilenhöhe 1,20 gilt. Für diese Zeile: Grundlinie bei rund 77 % der Box, x-Höhe ab rund 39 %. Der Zug deckt 58 bis 90 %, also das untere Drittel der Buchstaben und etwas darunter. Diese Zahl ist heikel. Ein Zug quer durch die Wortmitte ist im Handbuch eine eigene, gegenteilige Geste: Durchstreichen verneint ein Wort, Unterstreichen betont es. Sitzt der Zug zu hoch, sagt die Seite das Gegenteil dessen, was im Satz steht. */ .mark-wort{position:relative;display:inline-block} .mark{position:absolute;left:-4%;top:58%;width:110%;height:32%; overflow:visible;z-index:2;pointer-events:none} .mark path{fill:var(--tuerkis);opacity:.72} /* ---------- FRAGENBAND · Der Dialog · 9.16 -------------------------- Dritte Fassung dieser Sektion. Erst blendeten die fünf Fragen nacheinander auf (§9.2), dann liefen sie als Rolle durch die Mitte (§9.13) — beide zeigten Fragen ohne Antwort. Jetzt steht links die vollständige Liste, die aktive Frage dunkel, und rechts bleibt eine Fläche stehen, die ihre Antwort dazu wechselt. Nach der Vorlage von mobbin.com/mcp, dort aber andersherum: Links steht der Index, rechts scrollt der Inhalt. Hier ist es gedreht. Alles ab `.dialog-an` hängt an einer Klasse, die erst bewegung.js setzt. Ohne JavaScript, bei reduzierter Bewegung und unter 881 px stehen fünf gewöhnliche Frage-Antwort-Paare untereinander — und das ist zugleich die Form, die für Suche und Antwortmaschinen die richtige ist. */ .dl-frage{font-family:var(--set);font-size:clamp(22px,2.4vw,28px);font-weight:600; line-height:1.14;margin:0 0 12px;max-width:34ch} .dl-antwort{font-size:clamp(17px,1.35vw,20px);line-height:1.62;max-width:52ch; margin:0 0 clamp(34px,4vw,56px)} .dl-antwort:last-child{margin-bottom:0} @media (min-width:881px){ .dialog-an .dl-bahn{position:relative} /* 57 zu 43. Die Fläche rechts stößt an den Seitenrand und kann dorthin nicht weiter; der Fragensatz ist bei 34 Zeichen abgeschnitten und füllte seine Spalte nicht aus. Die Fläche wächst deshalb nach links in den leeren Streifen, ohne dass sich am Fragenbereich etwas ändert: Der Satz bleibt 612 px breit, die Fläche geht auf 524. */ /* 21.09.2026 · §9.67 · KEIN HALTEN MEHR. Hier stand bis heute `position:sticky;top:0;height:100svh` samt einer Bahn von 3,4 Fensterhöhen darüber: Die Bühne klebte im Bild, und der Scrollweg schaltete die Fragen durch. Wer nur weiterlesen wollte, kam fünf Fragen lang nicht weg — die Sektion nahm einem die Entscheidung ab, wie lange man bleibt. Jetzt ist es ein gewöhnliches Zweispaltenraster in normaler Höhe. Umgeschaltet wird beim Zeigen (bewegung.js). Damit fällt auch die Sonderbehandlung der Rubrik weg: Sie musste in die Bühne wandern, um während des Haltens im Bild zu bleiben, und steht jetzt wieder da, wo das Markup sie hinstellt. Das obere Polster der Sektion kommt aus demselben Grund zurück. */ /* EINE FENSTERHÖHE, 21.09.2026 nachgezogen. Ohne das Halten maß die Sektion nur noch 741 px — zwischen zwei Nachbarn, die exakt eine Fensterhöhe füllen (`.txt-stein` und der Split), saß sie damit sichtbar zusammengekniffen. Der Verlauf machte es doppelt schlimm, und das ist der eigentliche Grund für diese Regel: Seine Stufen sind in `vh` gerechnet, nicht in Prozent der Sektion — oben 30 vh Eisblau, unten 22 vh. In einer Sektion von 741 px bei 950 px Fensterhöhe waren das 494 px von 741, also zwei Drittel. Vom „weißen Band in der Mitte, in dem die Fragen laufen" blieben 247 px. Bei einer Fensterhöhe stimmt das Verhältnis wieder: 52 vh Farbe, 48 vh Weiß — genau wie gezeichnet. `min-height` und nicht `height`: Wächst der Inhalt, wächst die Sektion mit, statt ihn zu stauchen. Und weil der Inhalt jetzt weniger hoch ist als die Sektion, wird er mittig gesetzt. */ .dialog-an .fragenband{min-height:100svh; display:flex;flex-direction:column;justify-content:center} .dialog-an .dl-halt{display:grid;grid-template-columns:minmax(0,57fr) minmax(0,43fr); gap:clamp(24px,3.4vw,62px);align-items:center} .dialog-an .dl-lauf{display:flex;flex-direction:column; gap:clamp(13px,1.7vh,21px)} /* `cursor:pointer`, weil die Frage seit dem 21.09.2026 etwas tut. Ein Zeiger, der sich nicht ändert, ist die häufigste Art, eine Schaltfläche zu verstecken. */ .dialog-an .dl-frage{margin:0;max-width:34ch;position:relative; padding-left:clamp(18px,2vw,30px);will-change:opacity;cursor:pointer} /* Etwas Luft zwischen Ring und Schrift: Der Ring liegt sonst auf der türkisen Kante links und den Markerzügen auf. */ .dialog-an .dl-frage:focus-visible{outline-offset:3px} /* Die Markergeste auf den Zuständen. Je Zustand und je Zeile ein eigener Zug — der entsteht im Skript, weil erst dort feststeht, wo die Wörter umbrechen und wo die Grundlinie liegt. Der Zug liegt ÜBER dem Wort und bleibt halbtransparent, wie echte Markerfarbe auf Gedrucktem. Gezogen wird er von links: clip-path schneidet ihn frei, --zug läuft von 0 auf 100. Rückwärts läuft dasselbe zurück. */ .dialog-an .zug-wort{position:relative} .dialog-an .zug{position:absolute;z-index:2;pointer-events:none;overflow:visible; clip-path:inset(0 calc(100% - var(--zug,0) * 1%) 0 0)} .dialog-an .zug path{fill:var(--tuerkis)} /* Die türkise Kante an der aktiven Frage: gezogen, überall gleich stark, sie hört auf. */ .dialog-an .dl-frage::before{content:"";position:absolute;left:0;top:0;bottom:0; width:2px;background:var(--tuerkis-dunkel); transform:scaleY(var(--kante,0));transform-origin:center} .dialog-an .dl-buehne{position:relative} /* DUNKELBLAU, nicht Eisblau: Links steht die Frage des Besuchers auf der hellen Seite, rechts die Antwort auf der dunklen. Der Sprecherwechsel ist damit gesetzt und nicht bezeichnet — mit dem Mittel, das die Marke ohnehin hat, ihren zwei Gründen. Auf Eisblau war die Fläche nur ein anderes Weiß und blieb anonym. */ .dialog-an .dl-blatt{--pol:clamp(24px,2.4vw,38px);--kopf:34px; position:relative;width:100%;background:var(--blau);color:var(--weiss); --fokus-farbe:var(--tuerkis);padding:var(--pol)} /* Die Bildmarke als Absenderzeichen, klein und oben links. Das Handbuch nennt genau diese Rolle: „sehr klein als Absender". Sie ist kein Icon — ein Icon stünde für eine Funktion, diese hier für eine Person. Weiß, wie überall auf Dunkelblau. */ .dialog-an .dl-marke{display:block;position:absolute; top:var(--pol);left:var(--pol);height:18px;width:auto; aspect-ratio:657.4/373.6;color:var(--weiss)} /* Die Haarlinie, dieselbe wie über den vier Schritten bei „So läuft die Zusammenarbeit": 1 px auf 24 %, hier in Weiß. Sie sitzt an der FLÄCHE, nicht an der Antwort — läge sie an der Antwort, gäbe es sie fünfmal übereinander, und beim Überblenden stünden kurz zwei halb gedeckte Linien aufeinander. */ .dialog-an .dl-blatt::before{content:"";position:absolute; top:calc(var(--pol) + var(--kopf));left:var(--pol);right:var(--pol); height:1px;background:rgba(255,255,255,.24)} /* Eine Stufe kleiner: Die Antwort ist ein Beistück, kein Fließtext über die Seitenbreite. Bei 18,5 px stehen in der Spalte noch rund 53 Zeichen je Zeile. */ .dialog-an .dl-antwort{font-size:clamp(16px,1.2vw,18.5px);line-height:1.6} /* Jede Antwort füllt das Innere der Fläche und setzt ihren Satz darin senkrecht mittig. Die Fläche ist so hoch wie die LÄNGSTE Antwort; ohne das Zentrieren klebte eine kurze oben und ließ darunter einen leeren Streifen stehen, der bei jedem Wechsel anders hoch war. Linksbündig bleibt der Satz — Flatterrand auf beiden Seiten liest sich schlechter, und die Seite ist überall linksbündig gesetzt. */ .dialog-an .dl-antwort{position:absolute;margin:0;max-width:none; top:calc(var(--pol) + var(--kopf) + 22px);right:var(--pol); bottom:var(--pol);left:var(--pol); display:flex;flex-direction:column;justify-content:center} } /* ---------- ÜBUNG · Die Atemanleitung · 9.19 ------------------------- Nach dem Dribbble-Entwurf „Sleep app exploration": ein Kreis, der mit dem Atem wächst, ein Ring als Fortschritt der Phase, das Phasenwort in der Mitte. Übernommen ist die MECHANIK, nicht der Look — dort ist es eine violette Leuchtkugel mit Schein und Unschärfe, und beides steht auf der Verbotsliste. Übersetzt: Der Ring ist derselbe Zug wie überall — harte Kante, überall gleich breit, er hört auf. Die Fläche darunter ist flaches Eisblau. Die Anleitung steht auf einer dunkelblauen Platte in einer sonst hellen Sektion: Türkis trägt auf Weiß nur 1,9:1, auf Dunkelblau 9,0:1 — der Ring wäre auf dem hellen Grund kaum zu sehen. Alles ab `.at-an` hängt an einer Klasse, die erst seite.js setzt. Ohne JavaScript stehen die drei Schritte allein da, und es fehlt nichts: Sie sind die Übung. */ .at-bogen{display:none} /* Die Platte erscheint erst auf Druck. Vorher steht dort das Porträt — und später das Kurzvideo — und die Anleitung ist eine Zeile darunter, kein Apparat, der die Sektion beherrscht. */ .at-an .at-bogen.offen{display:block;background:var(--blau);color:var(--weiss); --fokus-farbe:var(--tuerkis);padding:clamp(26px,3vw,42px);margin-top:16px} .at-knopf{display:none} .at-an .at-knopf{display:flex;justify-content:flex-start;margin-top:16px} .at-an .at-bogen.offen .at-runden{margin-top:clamp(20px,2.4vw,30px)} .at-buehne{position:relative;aspect-ratio:1;width:100%;max-width:300px;margin:0 auto} .at-buehne svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible} /* Die Spur, auf der der Zug läuft — so zurückhaltend wie die Haarlinie über den vier Schritten im Ablauf. */ .at-spur{fill:none;stroke:rgba(255,255,255,.24);stroke-width:2} /* butt statt round: Der Zug hört auf, er läuft nicht aus. */ .at-zug{fill:none;stroke:var(--tuerkis);stroke-width:4;stroke-linecap:butt; transform:rotate(-90deg);transform-origin:50% 50%} .at-flaeche{fill:rgba(215,225,234,.12);transform-origin:50% 50%} .at-mitte{position:absolute;inset:0;display:flex;flex-direction:column; align-items:center;justify-content:center;gap:10px;text-align:center} .at-phase{font-family:var(--set);font-weight:600;font-size:clamp(12px,1.3vw,15px); letter-spacing:.24em;text-transform:uppercase;color:var(--tuerkis);margin:0;max-width:none} .at-zahl{font-family:var(--set);font-weight:400;font-size:clamp(40px,5vw,62px); line-height:1;margin:0;max-width:none;font-variant-numeric:tabular-nums} .at-hinweis{font-family:var(--lauf);font-size:13.5px;opacity:.72;margin:0;max-width:22ch} /* Die Runden: drei Züge in derselben Sprache. */ .at-runden{display:flex;gap:10px;justify-content:center;margin-top:clamp(20px,2.4vw,30px)} .at-runde{width:34px;height:3px;background:rgba(255,255,255,.22)} .at-runde.voll{background:var(--tuerkis)} .at-knopf{margin-top:clamp(20px,2.4vw,30px);display:flex;justify-content:center} /* Für Vorleseprogramme, nicht fürs Auge. */ .at-status{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)} /* ---------- ANGEBOT · Der Split · 9.11 ------------------------------- Vierte Fassung. Die drei davor sind an derselben Stelle gescheitert: Wer von oben hereinscrollte, sah kein Bedienelement. Umschalter zu generisch, Gabelung zu schwer, Wahlleiste mit vorangestellter Frage. Hier ist der Eingriff ins Corporate Design der Punkt: Die Seite wechselt sonst von Sektion zu Sektion zwischen hell und dunkel — ein stehendes Kachelmuster von oben nach unten. In dieser einen Sektion kippt es um 90 Grad: Eisblau und Dunkelblau stehen NEBENeinander. Zwei gleich gebaute Objekte, spiegelbildlich eingefärbt, lesen sich sofort als Alternativen — und die Seite hat diese Form sonst nirgends. Kein Bild in den Hälften, und das ist eine Entscheidung: Theres steht schon im Header und in der Übung. Ein drittes und viertes Mal im selben Bildschirm wäre zu viel, und unter der Deckung, die weißer Text braucht, wäre von der Aufnahme ohnehin nur Textur übrig. */ /* Kein eigener Grund und kein Abstand: Die Sektion IST der Split. Ein weißer Streifen darüber trennte die dunkle Sektion davor von den zwei Hälften — an einer Stelle, an der nichts zu trennen war. */ .angebot{padding:0;background:none} /* Ohne JavaScript: zwei volle Bänder untereinander, alles sichtbar, keine Knöpfe. Nichts hinter einem Klick, auch nicht für Suchmaschinen. */ .split{display:flex;flex-wrap:wrap;align-items:stretch} .halb{flex:1 1 100%;min-width:0;position:relative; display:flex;flex-direction:column; /* Oben zusätzlich der Platz für die Sektionsüberschrift, in BEIDEN Hälften gleich — sonst begännen die zwei Titel auf verschiedener Höhe, und im geöffneten Zustand liefe der linke durch die Zeile. */ padding:calc(clamp(34px,3.6vw,58px) + var(--marke,0px)) clamp(24px,3vw,52px) clamp(34px,3.6vw,58px); /* Volle Bildhöhe wie bei den Erkenntnissen: Die Sektion setzt sich einmal ganz ins Bild. Der Titelblock steht dafür mittig — oben bliebe unter dem Griff eine leere Fläche, und die beiden Objekte sähen aus, als fehlte in ihnen etwas. */ min-height:100svh;justify-content:center; /* Der Titelgrad kommt aus der Breite DIESER Hälfte, nicht aus der des Fensters. Deshalb wächst er beim Öffnen mit seiner Spalte mit und bleibt in der schmal gewordenen Hälfte vollständig lesbar — ohne dass irgendwo eine zweite Größe gepflegt werden müsste. */ container-type:inline-size} .halb-titel{font-family:var(--set);font-weight:700;line-height:1.20;text-transform:uppercase; font-size:clamp(26px,7.2cqw,60px);letter-spacing:-.012em;margin:0 0 14px} /* 36ch, damit die längere der beiden Zeilen — „Die teuersten Ausfälle stehen im Büro." — in der geöffneten wie in der ruhenden Hälfte auf einer Zeile steht. Bei 24ch brach sie um, und die zwei Objekte waren dadurch verschieden hoch, obwohl sie gleichwertig sein sollen. */ .halb-sub{font-family:var(--set);font-size:clamp(15px,2.1cqw,22px);line-height:1.32; max-width:36ch;margin:0 0 18px} .halb-fakten{display:flex;flex-wrap:wrap;gap:8px 20px;margin:0;max-width:none; font-family:var(--set);font-size:11.5px;letter-spacing:.2em;text-transform:uppercase} .halb.eis .halb-fakten{color:var(--tuerkis-dunkel)} .halb.dunkel .halb-fakten{color:var(--tuerkis)} .halb.eis .weiterlink{border-bottom-color:var(--tuerkis-dunkel)} .halb-inhalt{margin-top:clamp(28px,3.2vw,46px)} /* Der Griff. Er entsteht erst im Skript — ohne JavaScript gibt es keinen und braucht es keinen. Die Plakette trägt die Farbe der ANDEREN Hälfte: So zeigt jede Hälfte im Ruhezustand, dass es eine zweite gibt. */ .halb-griff{-webkit-appearance:none;appearance:none;border:0;border-radius:0;cursor:pointer; display:flex;align-items:center;justify-content:space-between;gap:16px; /* Nicht über die ganze Hälfte: Eine Plakette mit Maß liest sich als Gegenstand, eine Fläche über die volle Breite als Streifen. */ width:100%;max-width:min(100%,400px); margin-top:clamp(24px,2.8vw,36px);min-height:64px;padding:0 22px; font-family:var(--set);font-weight:600;font-size:12.5px;letter-spacing:.18em; text-transform:uppercase;text-align:left} /* Jede Plakette trägt den Grund der anderen Hälfte — das ist die ganze Regel. Vorher war die rechte türkis; damit hatte das Paar drei Farben statt zwei, und Türkis kam an einer Stelle vor, an der es nichts markiert. Türkis bleibt der Markergeste und den Akzenten. */ .halb.eis .halb-griff{background:var(--blau);color:var(--weiss)} .halb.dunkel .halb-griff{background:var(--eis);color:var(--blau)} .halb-griff .spitze{font-size:22px;line-height:1;display:inline-block} /* Erst wenn das Skript gelaufen ist, wird aus den zwei Bändern ein Paar nebeneinander — und erst dann ist Inhalt hinter einem Griff. */ .split-an .split{flex-wrap:nowrap} .split-an .halb{flex:1 1 0} .split-an .halb[data-offen="true"]{flex-grow:2.4} .split-an .halb-inhalt[hidden]{display:none} .split-an .halb[data-offen="true"] .halb-griff{display:none} /* Im Ruhezustand ist die ganze Hälfte anfassbar, nicht nur der Griff. Die Tastatur bedient den Griff, die Maus die Fläche. */ .split-an .halb[data-offen="false"]{cursor:pointer} /* Das Wichtigste an der geschlossenen Hälfte: Sie bleibt ein vollständiges Objekt, kein Reststreifen. Genau daran ist die Referenzfassung gemessen worden — die geschlossene Seite behält dort ihr Gesicht. Hier heißt das: Titel, Zeile, Fakten und Griff bleiben am oberen Rand stehen und wandern beim Lesen der geöffneten Seite mit. Der Abstand oben ist derselbe wie beim Ankersprung, damit nichts unter der Kopfleiste verschwindet. */ .split-an .halb[data-offen="false"] .halb-kopf{position:sticky; top:clamp(80px,7vw,108px)} /* Sobald eine Hälfte offen ist, rücken beide Blöcke nach oben. Mittig stünde der Inhalt der geöffneten Hälfte in einer sehr hohen Spalte, und der Griff der geschlossenen klebte auf halber Höhe fest. */ .split:has(.halb[data-offen="true"]) .halb{justify-content:flex-start} /* Die Sektionsüberschrift. Sie gehört zum Split, nicht zu einer seiner Hälften: Sie liegt über beiden und hängt am Rahmen, nicht an der hellen Fläche. Der Platz dafür wird oben in BEIDEN Hälften freigehalten (--marke). Vorher lag die Zeile nur absolut über der linken Hälfte — im geöffneten Zustand rutschte der Titel nach oben und lief durch sie hindurch. Gemessen am 16.09.2026: „INDIVIDUALS" stand bei 127 bis 208 px, die Zeile bei 165 bis 183 px. */ .split{--marke:2.6rem;position:relative} .split-marke{position:absolute;z-index:2;margin:0;max-width:none; top:clamp(34px,3.6vw,58px);left:clamp(24px,3vw,52px);right:clamp(24px,3vw,52px); font-family:var(--set);font-size:11px;letter-spacing:.26em;text-transform:uppercase; color:var(--tuerkis-dunkel)} @media (max-width:880px){ /* Schmal bleibt es bei zwei Bändern untereinander: Zwei Spalten, von denen eine auf ein Viertel schrumpft, sind bei 375 px 90 px breit — dort steht kein Wort mehr. */ .split-an .split{flex-wrap:wrap} .split-an .halb{flex:1 1 100%} .split-an .halb[data-offen="true"]{flex-grow:1} .halb-titel{font-size:clamp(30px,9cqw,44px)} /* Schmal stehen die Hälften untereinander. Zweimal volle Bildhöhe wären zwei Bildschirme, in denen noch nichts gewählt ist — jede Hälfte bekommt deshalb knapp drei Viertel und bleibt trotzdem das Einzige, was im Bild steht. */ .halb{min-height:72svh} } /* ---------- BEWEGUNGSSCHICHT · 9.10 --------------------------------- Gehört zu assets/js/bewegung.js. Alles hier hängt an einer Klasse oder einem Element, das erst dieses Skript setzt — ohne JavaScript und bei reduzierter Bewegung greift keine einzige dieser Regeln. Es wird hier nichts versteckt: Der Ausgangszustand jeder Bewegung wird im Skript gesetzt und dort wieder aufgelöst. Hier steht nur, was Bewegung überhaupt erst möglich macht — Masken, Kanten, Ursprungspunkte. Das Tempo steht im Skript. */ /* Die Maske, hinter der eine Überschriftenzeile hervorläuft. Oben 0,14 em Luft, per negativem Außenabstand wieder eingezogen: sonst schneidet overflow bei Zeilenhöhe 1,20 die Umlautpunkte von Ä Ö Ü ab. Unten bleibt die Kante hart — dort kommt die Zeile ja heraus. */ .bw-maske{display:block;overflow:hidden;padding-top:.14em;margin-top:-.14em} .bw-zeile{display:block} /* Die gezogene Oberkante der drei Erkenntnisse. Die echte Rahmenlinie wird vom Skript durchsichtig gestellt, diese hier wird gezogen. */ .ek{position:relative} .bw-kante{position:absolute;left:0;right:0;top:-2px;height:2px;background:var(--tuerkis); transform:scaleX(0);transform-origin:left center;display:block} /* Die Wahlleiste zieht sich von links auf; der Zug wird ab hier von GSAP gefahren, nicht mehr vom Übergang im CSS. Zwei Systeme auf derselben Eigenschaft ergeben ein Ruckeln. */ .bw-wahl .wahl{transform-origin:left center} .bw-wahl .wahl-zug{transition:none} /* Haptik auf den Stufen. Der Versatz nach rechts kommt jetzt aus dem Skript und bewegt Name und Preis getrennt — der Innenabstand hier würde die ganze Zeile ein zweites Mal schieben. */ .bw-haptik a.stufe{position:relative;transition:none} .bw-haptik a.stufe:hover{padding-left:0} .bw-haptik a.stufe::before{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px; background:var(--tuerkis);transform:scaleX(var(--kante,0));transform-origin:left center;z-index:1} .bw-haptik .stufe .nm,.bw-haptik .stufe .pr{display:inline-block} /* ====================================================================== ERGÄNZT FÜR DIE RECHTSSEITEN — 17.09.2026 Impressum, Datenschutz und AGB sind das Gegenteil der übrigen Seiten: keine Strecke mit Bildern und Wechseln, sondern eine durchlaufende Lesespalte, die jemand im Zweifel ausdruckt. Sie bekommen deshalb genau vier Dinge und sonst nichts von der Startseite. Die Überschriften laufen hier kleiner als sonst. `h2` geht auf der Startseite bis 48 px — das trägt eine Zeile, die einmal vorkommt. Zwölf Paragraphenüberschriften in dieser Größe wären ein Register, kein Text. 26 px ist der Grad, bei dem die Gliederung noch sofort sichtbar ist und die Seite trotzdem eine Lesestrecke bleibt. ====================================================================== */ /* `overflow-wrap:anywhere` · 21.09.2026 nachgemessen: Bei 320 px lief /impressum um 18 px waagerecht über. Schuld war ein Textknoten, kein Element — ein einzelnes zu langes Wort in den Rechtstexten, das bei dieser Breite nicht mehr in die Spalte passt. Auf einer Seite, die überwiegend fremde Begriffe, Paragrafen und Adressen enthält, ist das kein Einzelfall, deshalb steht die Regel am Container und nicht am einzelnen Absatz. `anywhere` und nicht `break-word`: Nur `anywhere` zieht auch die Mindestbreite der Spalte mit herunter. */ .recht{max-width:68ch;overflow-wrap:anywhere} .recht h2{font-size:clamp(19px,1.9vw,26px);margin:clamp(40px,4vw,58px) 0 18px} .recht h2:first-child{margin-top:0} .recht h3{margin:28px 0 8px} /* Listen im Rechtstext. Sonst führt die Seite keine — `.fragen` und `.bloecke` sind Bauteile mit eigener Gestalt und haben die Punkte abgestellt. Hier sind es wirklich Aufzählungen, und sie brauchen dieselbe Zeilenführung wie der Absatz daneben. */ .recht ul,.recht ol{max-width:64ch;margin:0 0 16px;padding-left:1.35em} .recht li{margin-bottom:8px} .recht li:last-child{margin-bottom:0} /* Die Anschriftenblöcke — Diensteanbieterin, Verantwortliche, Hoster. Eine Anschrift ist keine Prosa: Sie wird gelesen, indem man sie abschreibt. Deshalb zeilenweise statt im Fließtext. */ .anschrift{font-style:normal;margin-bottom:16px;line-height:1.65} /* Eine fehlende Pflichtangabe soll auffallen, nicht verschwinden. Ohne diesen Kasten wäre eine leere Zeile im Impressum von einer gesetzten nicht zu unterscheiden — und genau das ist der Fehler, der erst nach dem Livegang auffällt. Kein Türkis: Türkis ist die Markergeste und bedeutet Betonung, nicht Mangel. */ .fehlt{display:inline-block;font-family:var(--set);font-size:12px; letter-spacing:.14em;text-transform:uppercase; border:1px dashed rgba(21,31,40,.45);padding:3px 9px; background:rgba(21,31,40,.05)} .dunkel .fehlt,.txt-stein .fehlt{border-color:rgba(255,255,255,.5); background:rgba(255,255,255,.08)} /* Sprungmarken über den AGB. Zwölf Abschnitte ohne Übersicht sind eine Zumutung für jemanden, der genau einen davon sucht — die Widerrufs- belehrung etwa. Das ist eine Navigation, kein Schmuck: schlicht, zweispaltig, ab Handybreite einspaltig. */ .rechtnav{list-style:none;margin:0;padding:16px 0 0;max-width:34ch; border-top:1px solid rgba(21,31,40,.2)} .rechtnav li{margin-bottom:8px} .rechtnav a{font-size:14.5px;line-height:1.35;display:inline-block} /* Gestapelt am Handy: dann ist die Liste ein Inhaltsverzeichnis über dem Text und braucht einen Abschluss nach unten. */ @media (max-width:1099px){ .rechtnav{margin-bottom:clamp(36px,5vw,56px);max-width:64ch; border-bottom:1px solid rgba(21,31,40,.2);padding-bottom:16px} } /* Ausfüllzeilen im Muster-Widerrufsformular. Vorher standen dort Reihen aus Unterstrichen. Das sah gedruckt richtig aus und war im Browser ein Fehler: 47 Unterstriche sind für den Umbruch EIN Wort, und bei 375 px schob dieses Wort die ganze Seite um 106 px nach rechts. Gemessen, nicht vermutet. Eine Linie ist hier ohnehin das ehrlichere Mittel: Sie ist eine Fläche zum Schreiben und kein Zeichen, das eine Vorleserin als „Unterstrich Unterstrich Unterstrich" aufsagt. */ .formzeile{display:block;border-bottom:1px solid rgba(21,31,40,.34); height:1.55em;margin:2px 0 14px;max-width:34ch} /* Zweispaltig ab 1100 px: Text links, Sprungmarken rechts. Einspaltig sah die Seite bei 1440 px so aus, dass die rechte Hälfte leer blieb — Punkt 6 des Prüfrasters fragt, ob die leere Fläche eine Entscheidung ist oder Restplatz. Sie war Restplatz. Drei Dokumente mit zusammen 32 Abschnitten brauchen ohnehin eine Übersicht; sie gehört dorthin, wo Platz ist. Die Marken stehen im Quelltext VOR dem Text. Damit stehen sie am Handy oben, wo sie nützen, und beim Tabben kommen sie zuerst — die Reihenfolge im Quelltext ist die Lesereihenfolge, das Raster verschiebt nur das Bild. `align-self:start` ist die Bedingung dafür, dass `sticky` überhaupt greift: Ohne sie zieht das Raster die Spalte auf volle Zeilenhöhe, das Element ist dann so hoch wie sein Rahmen, und ein sticky-Element hält nur so lange, wie sein Rahmen höher ist als es selbst. */ .rechtseite{display:grid;grid-template-columns:minmax(0,68ch) minmax(0,1fr); gap:clamp(36px,5vw,84px);align-items:start} .rechtseite .recht{grid-column:1;grid-row:1} .rechtaside{grid-column:2;grid-row:1;align-self:start;position:sticky;top:86px} @media (max-width:1099px){ .rechtseite{display:block} .rechtaside{position:static} } /* ---------- NEWSLETTER-FORMULAR · 9.23 ------------------------------ Das Feld stand schon, es tat nur nichts. Dazugekommen sind drei Dinge: der Knopf als Knopf, die Antwort nach dem Absenden und der Honigtopf. */ /* `.knopf` war bisher immer ein . Als