/* tastemaker · macrostructure: Long-Scroll Narrative ohne CTA-Block · mood: fest aus Mockup, kein Seed · page: index + Gerüst aller zehn Seiten * arc: hook(Kernzeile Text|Foto) -> proof(Zähler) -> map(Ablaufblock, Blasen) -> sort(Gabelung, Karten) -> [Fotoband] -> how(drei Schritte Text|Bild, Bildseite und Fläche wechseln) -> answer(Fragen und Antworten) -> trust(Gründer, Gründererfahrung) -> [Kundenreferenzen, verborgen] -> close(Fußzeile) * nav: eine Zeile, sticky, volle Breite · hero: Text links, Foto rechts, linksbündig · footer: Papier (Messe-Fassung 10.09.2026, vorher dunkles Band) · Trennung: Flächenwechsel, 4px Akzentband, Fotoband, weiche Verläufe card→grund * palette: 53 Token aus docs/los3-shell.html (warm, 10.09.2026; vorher 44 aus los4-shell), Grundfläche --paper · contrast: check_contrast.py 10.09.2026, Tabelle in webseite-struktur.md * critique: ausstehend — Gerüst ohne Inhalt; Bewertung erst mit Texten und Fotos */ /* ========================================================================== Los3 — Stilvorlage der Webseite -------------------------------------------------------------------------- Gilt für alle zehn Seiten (06.09.2026: vier Schrittseiten gestrichen; 07.09.2026: kontakt.html dazu). Benutzt ausschliesslich Variablen aus css/tokens.css. Keine Farbe, die dort nicht steht. Kontrast: die Tabelle steht in docs/webseite-struktur.md, Kontrastregeln. Kurz (neu gemessen 10.09.2026 auf der warmen Palette): Text nur in --ink (17,12 auf Papier) und --ink-2 (10,87). --muted trägt nie Text, nur Kanten (4,89 auf Weiß). Verweise in --accent (5,26 auf Papier, 5,68 auf Weiß) — auf der neuen Grundfläche reicht die Schiefer-Tinte selbst, --accent-press bleibt der gedrückte Zustand. --schiefer nur für große Ziffern und Flächen (3,48 auf Papier), --ocker-ink für Hinweise (4,65 auf Papier, 5,02 auf Weiß) — nicht auf --wash und nicht auf --ocker-tint, dort fällt er unter 4,5. Inhalt: 1 Maße, Schriftskala, Grundfläche 2 Zurücksetzung und Grundlagen 3 Sprungmarke 4 Kopfzeile (bleibt stehen, volle Breite) 5 Breite, Blöcke, Flächen, Überschriften 6 Platzhalter — sehen aus wie das fertige Element 7 Zählmodus für Platzhalter (body.zeige-todos) 8 Knöpfe 9 Startseite: Kernzeile mit Foto, Zähler, Ablaufblock, Gabelung 10 Fotoband 11 Bildabschnitt: die drei Schritte, Text|Bild im Wechsel 11a Fragen und Antworten (Blasen, natives details) 12 Gründer und Gründererfahrung 13 Preiskarten 14 Angabenliste der rechtlichen Seiten 15 Fußzeile 15a Kontaktblase 16 Bildvergrößerung (natives dialog, js/vergroesserung.js) 17 Schmale Bildschirme 18 Pfadseiten: eigene Bausteine — Seitenkopf mit Motivbild, Wer wir sind, Karussell, Vergleich, Gegenüberstellung, Großer Knopf, Kontaktwege, Formulare, Blatt, Aufwandsrechner, Bereichstrennung 19 Unterseiten: dritte Bauweise 19a Rechtstext (Datenschutzerklärung, 10.09.2026) 19b Einwilligung: der Streifen unten (js/einwilligung.js, 10.09.2026) 20 Bewegung und Zeiger (08.09.2026): Übergänge, Druck, Einblenden beim Wechsel, Bildvergrößerung, Hover nur mit Maus, prefers-reduced-motion; 20a Einblenden beim Laden, Versatz, Aufdecken am Scrollen (fest seit 08.09.2026, vorher Probe hinter Klassen) ========================================================================== */ /* --- 1 Maße, Schriftskala, Grundfläche ----------------------------------- tokens.css hat bewusst keine Schriftgrössen: die Skala für die Webseite ist eine eigene Entscheidung und wird hier getroffen, nicht dort. Fließtext ist 17px und nicht 16px. Die Leitpersona ist 46 und liest abends auf dem Telefon. Nur die Kernzeile und die Zählerzahl skalieren mit der Breite; alles andere bleibt fest. Grundfläche: --paper (#F8F6F2), seit 10.09.2026. Bis dahin --accent-line, im alten Farbsatz ein helles Blau (#C7DAFF); im neuen wäre daraus ein kühles Blaugrau (#C9D1DC) geworden — genau das, was die Designvorgabe ausschließt ("kein Blau, kein kühles Grau", und "Papier, nicht Weiß, nicht Grau" als Grund). Damit trägt der Grund auch die Verweise in --accent (5,26) statt in --accent-press. */ :root{ --fs-1:13px; /* Beschriftungen, Fußzeile */ --fs-2:15px; /* Kopfzeile, Nebentext */ --fs-3:17px; /* Fließtext */ --fs-4:21px; /* Vorspann, Zwischenüberschrift */ --fs-5:27px; /* Blocküberschrift */ --fs-6:36px; /* Seitenüberschrift, Schrittüberschrift */ --fs-7:clamp(36px,5.2vw,56px); /* Kernzeile und h1 der Unterseiten */ --fs-zahl:clamp(56px,8vw,96px); /* Große Einzelzahl im Rechner */ --fs-kennzahl:clamp(36px,4.2vw,54px); /* Zahl in der Kennzahlenkachel — drei nebeneinander, deshalb kleiner */ --breite:1100px; /* Satzspiegel der Seite */ /* Textbreiten (Kian 07.09.2026): Text nutzt die Fläche — Überschriften, Vorspann, Absätze in Blättern, Antworten und der Zählertext laufen über die volle Innenbreite (--breite abzüglich Rand, 1052px), nicht mehr in einer 62ch-Spalte im linken Drittel. --spalte bleibt nur für lange Fließtexte (Datenschutz, AGB: Klasse .spalte), 75 Zeichen je Zeile, weil ein Volltext bei 120 Zeichen je Zeile nicht mehr lesbar ist. Bewusst schmal bleiben außerdem: die Kernzeile neben K1 (460px, das Foto trägt), die Textspalten neben Bildern (Bildabschnitt, Karussell, Wer wir sind, Gründer, betrieb-Kopf neben M2) und der Zähler mit seinen zwei Hälften. */ --spalte:75ch; /* nur lange Fließtexte (.spalte) */ --rand:24px; /* Seitenrand, schmal wie breit */ --kopf-hoehe:64px; /* unter 640px: 52px */ /* Rollenvariablen (Liste in webseite-struktur.md, Kontrastregeln): Token aus tokens.css bekommen hier den Namen ihrer Aufgabe auf der Webseite. --kante ist --muted in der Rolle Kante — wer den Textton --muted meint, ändert damit nicht die Kanten (06.09.2026). */ --grund:var(--paper); --verweis:var(--accent); --verweis-druck:var(--ink); --kante:var(--muted); } /* --- 2 Zurücksetzung und Grundlagen ------------------------------------- */ *{box-sizing:border-box;margin:0;padding:0} html{-webkit-text-size-adjust:100%} /* 100dvh statt 100vh: auf dem Telefon springt die Höhe sonst, wenn die Adressleiste ein- und ausfährt. Befund aus anti_slop_scan.py. */ body{ background:var(--grund); color:var(--ink); font-family:var(--sans); font-size:var(--fs-3); line-height:1.55; /* Designvorgabe: Fließtext 16–19px, Zeilenhöhe 1,55 (10.09.2026; vorher 1,6) */ letter-spacing:-.011em; -webkit-font-smoothing:antialiased; min-height:100dvh; display:flex; flex-direction:column; } /* Die Kopfzeile bleibt stehen. scroll-padding auf html rückt alles, was der Browser in den Bildschirm rollt, um ihre Höhe nach unten — Anker ebenso wie ein per Tastatur fokussierter Verweis, der sonst unter dem Kopf landet (Befund interface-review 05.09.2026). */ html{scroll-padding-top:calc(var(--kopf-hoehe) + 24px)} a{color:var(--verweis);text-decoration-thickness:1px;text-underline-offset:2px} :focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:4px} /* In der Kontrastdarstellung des Betriebssystems gilt dessen Farbe. */ @media (forced-colors:active){ :focus-visible{outline-color:Highlight} } .mono{font-family:var(--mono);letter-spacing:0} /* --- 3 Sprungmarke ------------------------------------------------------- Erster Tabulatorschritt auf jeder Seite. Unsichtbar, bis er den Fokus hat — dann sichtbar, über der Kopfzeile. */ .sprung{ position:fixed;left:var(--rand);top:8px;z-index:20; padding:9px 14px;border-radius:var(--r-sm); background:var(--accent);color:#fff; font-size:var(--fs-2);font-weight:600;text-decoration:none; transform:translateY(-200%); } .sprung:focus{transform:translateY(0)} .sprung:hover{color:#fff} /* --- 4 Kopfzeile (bleibt stehen, volle Breite) --------------------------- Aus NOTIZEN.md, Hero: "Die Navigation ist viel zu groß." Also eine Zeile, 64px hoch, 15px Schrift, keine Untermenüs, kein Ankündigungsbalken. Sie bleibt beim Scrollen stehen (Entscheidung 05.09.2026) und nutzt die volle Breite wie in hero-kopf.png: Wortmarke und Verweise am linken Rand, Kontakt und Knopf am rechten. Unter 900px ohne die fünf Seitenverweise (06.09.2026; sie stehen in der Fußzeile), unter 640px 52px hoch, eine Zeile (Abschnitt 17). */ /* Material statt Fläche (Kian 09.09.2026, Fassung "Glas" aus /variant): Weiß mit 72 % Deckung und Unschärfe, der Inhalt scheint beim Scrollen durch. Die 1px-Linie darunter weicht einer weichen Scrollkante (Abschnitt 20a, Punkt 4), die erst erscheint, wenn Inhalt unter dem Kopf liegt. Unter prefers-reduced-transparency und prefers-contrast: more wieder deckend mit Linie (Abschnitt 20b, Ende). Weiß mit Deckkraft ist keine neue Farbe. */ .kopf{ position:sticky;top:0;z-index:10; /* Papier mit 80 % Deckung (Designvorgabe 10.09.2026; vorher Weiß 72 %). */ background:rgba(248,246,242,.8);border-bottom:1px solid transparent; -webkit-backdrop-filter:blur(20px) saturate(180%); backdrop-filter:blur(20px) saturate(180%); } .kopf-innen{ padding:0 var(--rand); min-height:var(--kopf-hoehe); display:flex;align-items:center;gap:28px; } /* Die Wortmarke ist seit 10.09.2026 das Signet als SVG (bilder/logo/, Designvorgabe: "Logo links als SVG 24 px hoch"), nicht mehr Text mit farbiger 3. Schutzraum: rundum mindestens die Höhe der 3 — der Abstand zu den Verweisen (gap 28px in .kopf-innen) hält ihn ein. */ .wortmarke{display:flex;align-items:center;flex:none;text-decoration:none} .wortmarke .logo{display:block;height:24px;width:auto} /* "Los" und "4" stehen in einem Element, damit der Flex-Abstand nur zwischen Logo und Wortmarke wirkt — nie zwischen Los und 4. */ .kopf-wege{display:flex;align-items:center;gap:22px;flex-wrap:wrap} /* padding-block 10px: die Klickfläche wird 40px hoch, ohne dass die Zeile wächst — WCAG 2.5.8 verlangt 24px, auf Touch sind 40 besser. */ .kopf-wege a{ display:inline-block;padding-block:10px; font-size:var(--fs-2);font-weight:550;color:var(--ink-2);text-decoration:none; } .kopf-rechts{margin-inline-start:auto;display:flex;align-items:center;gap:16px} .kopf-kontakt{display:flex;align-items:center;gap:16px} .kontakt{ display:inline-block;padding-block:10px; font-size:var(--fs-2);font-weight:550;color:var(--ink-2);text-decoration:none; white-space:nowrap; } /* Gleiches Verhalten wie die Verweise links: beim Überfahren dunkel und unterstrichen. Der Knopf hat seinen eigenen Zustand. */ /* --- 5 Breite, Blöcke, Flächen, Überschriften ---------------------------- Aus NOTIZEN.md, Manufactum: "Ruhe. Viel Weißraum." Alles linksbündig (Entscheidung 05.09.2026), alle Blöcke schließen auf --breite ab. Themenblöcke trennt eine harte Kante: Flächenwechsel (Grundfläche ↔ --card) plus 4px-Akzentband (.band); vor dem Bildabschnitt das Fotoband. Verläufe ohne Band nur zwischen den drei Schritten. */ .breite{max-width:var(--breite);margin:0 auto;padding:0 var(--rand)} .spalte{max-width:var(--spalte)} /* nur lange Fließtexte, siehe Abschnitt 1 */ main{flex:1 0 auto} .block{padding-block:88px} .block-gross{padding-block:120px} .block-eng{padding-block:56px} .flaeche-hell{background:var(--card)} /* Kanten zwischen den Themenblöcken (Regel 05.09.2026): HARTE KANTE heißt Flächenwechsel PLUS Akzentband — überall dort, wo ein Thema endet und ein neues beginnt: Kopf zu Kopfbereich, Kopfbereich zu Zähler, Zähler zu Ablaufblock, Ablaufblock zu Gabelung, letzter Schritt zu Fragen und Antworten, Fragen zu "Wer dahintersteht". Das Band sitzt an der Oberkante des folgenden Blocks. VERLAUF heißt kein Band — nur innerhalb des Bildabschnitts zwischen den drei Schritten (Abschnitt 11), weil die ein zusammenhängender Ablauf sind und ineinander übergehen. Alles andere sind getrennte Themen. */ .band{border-top:4px solid var(--accent)} /* h2 und h3 teilen die Stufe 36px / 650 (Entscheidung 05.09.2026, Befund interface-review): die Schrittüberschriften sind h3 und stehen auf 36, also darf die h2 darüber nicht kleiner sein. Der Unterschied kommt aus Stellung und Abstand — die h2 steht allein über ihrem Block, die h3 in der Zweispaltigkeit. Keine neue Größenstufe; die Skala bleibt geschlossen. */ /* Die h1 jeder Unterseite steht in der Kernzeilengröße (Entscheidung 05.09.2026), damit sie über der h2 (36) liegt; auf der Startseite ist die Kernzeile diese h1. Keine neue Stufe, die Skala bleibt geschlossen. */ /* Laufweite seit 10.09.2026 nach der Designvorgabe: "Schwer, eng, warm" — große Überschriften -4,5 %, mittlere -3,5 %, kleine -2 %. Vorher -3,2 / -2,5 / -1,8. Gewicht 700 statt 650, die Vorgabe sagt Bold. */ h1{font-size:var(--fs-7);line-height:1.12;font-weight:700;letter-spacing:-.045em;text-wrap:balance} h2{font-size:var(--fs-6);line-height:1.15;font-weight:700;letter-spacing:-.035em} h3{font-size:var(--fs-4);line-height:1.3;font-weight:650;letter-spacing:-.02em} h1 + .vorspann, h2 + .vorspann{margin-top:16px} .vorspann{font-size:var(--fs-4);line-height:1.5;color:var(--ink-2)} p + p{margin-top:14px} /* Hervorgehobenes Wort in einer Überschrift: die Verben im Bildabschnitt, in den Blasen des Ablaufblocks und in den Tafeln der Karussells (Schrittseiten gestrichen 06.09.2026). */ .wort-akzent{color:var(--accent)} /* --- 6 Platzhalter — sehen aus wie das fertige Element ------------------- Entscheidung 05.09.2026 (webseite-struktur.md, Platzhalter): kein Warnhinweis. Texte kursiv in späterer Größe und Farbe, Bildflächen als neutrale Fläche ohne Rahmen und Beschriftung, Knöpfe in --accent. Auffindbar über data-todo im Markup und den Zählmodus (Abschnitt 7). */ .platz{font-style:italic;color:var(--ink-2)} /* Bildfläche im späteren Zuschnitt. --card auf der Grundfläche, --line auf hellen Flächen, damit sie sich vom Grund abhebt und nichts behauptet. */ .platz-bild{ aspect-ratio:16/10; background:var(--card); border-radius:var(--r-md); } .flaeche-hell .platz-bild{background:var(--line)} /* Echtes Bild in der Fläche (07.09.2026, die fünf Motivbilder): füllt den Zuschnitt der Fläche, wird beschnitten statt verzerrt, erbt die Rundung. Die Fläche darunter bleibt, bis das Bild geladen ist. */ .platz-bild img{display:block;width:100%;height:100%;object-fit:cover;border-radius:inherit} /* Systembilder — Ausschnitte aus dem Mockup — schweben (Entscheidung 05.09.2026): eigene Fläche mit Rundung, Schatten und heller Kante (--edge), damit der Ausschnitt wie eine echte Oberfläche wirkt und nicht wie ein flaches Bild. Gilt nicht für Stockfotos. Der Öffnen-Knopf für die Vergrößerung liegt unsichtbar über der Fläche; ohne JavaScript bleibt er hidden, und mit echtem Bild ist der Öffner ein Verweis auf die Bilddatei. */ .systembild{position:relative;box-shadow:var(--edge),var(--sh-2)} .systembild img{display:block;width:100%;height:100%;object-fit:cover;border-radius:inherit} .systembild-oeffnen{ position:absolute;inset:0;width:100%;height:100%; padding:0;background:transparent;border:0;border-radius:inherit; color:inherit;font:inherit;cursor:zoom-in; } /* --- 7 Zählmodus für Platzhalter ----------------------------------------- Klasse zeige-todos am , im Browser-Inspektor gesetzt: jeder Platzhalter bekommt einen gestrichelten Umriss in --warn, Bildflächen zeigen ihre Beschriftung aus data-todo, unten rechts steht die Zahl. --warn ist hier nur Umriss, kein Text — als Text fällt es auf der Grundfläche durch (4,39). */ .zeige-todos{counter-reset:todos} .zeige-todos [data-todo]{ outline:2px dashed var(--warn);outline-offset:3px; counter-increment:todos; } .zeige-todos .platz-bild{position:relative} .zeige-todos .platz-bild::after{ content:attr(data-todo); position:absolute;left:12px;right:12px;bottom:12px; padding:6px 9px;border-radius:6px; background:var(--card);color:var(--warn); font:600 13px/1.4 var(--mono);letter-spacing:0; } /* Kundenreferenzen: im Markup, verborgen bis zum ersten echten Kunden (webseite-struktur.md, Sozialbeweis). Nur im Zählmodus sichtbar, damit der Platzhalter mitzählt — ein verborgenes Element zählt sonst nicht. */ .zeige-todos .referenzen[hidden]{display:block} .zeige-todos::after{ content:"Platzhalter auf dieser Seite: " counter(todos); position:fixed;right:16px;bottom:16px;z-index:30; padding:10px 14px;border-radius:var(--r-sm); background:var(--dark);color:var(--dark-ink); font:600 14px/1.2 var(--mono);letter-spacing:0; box-shadow:var(--sh-2); } /* --- 8 Knöpfe ------------------------------------------------------------ Aus NOTIZEN.md, Hilti: "Eine einzige starke Farbe [...] gibt Halt, sonst ist alles ruhig." Der Knopf ist immer --accent, auch als Platzhalter. */ /* Pille seit 10.09.2026 (Designvorgabe: "Eckenradius voll"); vorher --r-sm. Primär Schiefer-Tinte mit Weiß, sekundär Weiß mit Kante --line-2 — beides aus tokens.css, hier steht nur die Form. */ .knopf{ display:inline-block; padding:11px 20px;border-radius:999px; font-size:var(--fs-2);font-weight:600;line-height:1.2; text-decoration:none;white-space:nowrap; border:1px solid transparent; } .knopf-akzent{background:var(--accent);color:#fff;box-shadow:var(--sh-accent)} .knopf-ruhig{background:var(--card);border-color:var(--line-2);color:var(--ink)} /* --- 9 Startseite: Kernzeile mit Foto, Zähler, drei Schritte, Gabelung --- Aus NOTIZEN.md, Hero: "Steht groß [...], bevor irgendetwas anderes kommt." Und Strauss: "Das Foto trägt die Seite, nicht die Schrift." Zwei Zeilen Text links in einer Spalte von höchstens 460px, das Foto (Bildplatz K1) rechts daneben bis an den Bildschirmrand — links gerundet, rechts bündig, 360 bis 620px hoch. Der linke Rand des Textes liegt auf der Satzbreite wie alle anderen Blöcke. Kein Text über dem Bild; läge welcher darauf, käme eine abdunkelnde Schicht dazwischen (Kontrastregeln). */ .kernzeile-block{padding-block:48px} .kern-raster{ display:grid;grid-template-columns:minmax(0,460px) minmax(0,1fr);gap:56px; align-items:center; padding-inline-start:max(var(--rand),calc((100% - var(--breite)) / 2 + var(--rand))); } .platz-bild-kern{ aspect-ratio:auto;height:clamp(360px,44vw,620px); border-radius:var(--r-lg) 0 0 var(--r-lg); } /* Die kleine Zeile in normaler Schreibung, nicht in Versalien: eine Versalien-Zeile über jeder Überschrift ist das Standardmuster, das wir nicht wollen. */ .kernzeile-klein{ font-size:var(--fs-4);font-weight:500;color:var(--ink-2); letter-spacing:-.01em;margin-bottom:18px; } /* 1,12 statt 1,06: die Kernzeile läuft über vier bis fünf Zeilen, und ab drei Zeilen braucht auch eine Überschrift Luft (Befund interface-review). */ .kernzeile{ font-size:var(--fs-7);line-height:1.12;font-weight:700;letter-spacing:-.045em; text-wrap:balance; } /* Kennzahlen (13.09.2026, Kian; ersetzt den Ausschreibungszähler mit seinen zwei Bereichen). Derselbe Block auf drei Seiten: drei Kacheln nebeneinander, in jeder die Zahl groß und darunter der Satz, den sie anfängt. Keine Rahmen, keine Karten — Trennung über Weißraum (Manufactum, Hilti: trocken). Die Kacheln sind gleich hoch, damit die Quellenkürzel auf einer Linie unten stehen; wo keins steht, bleibt die Zeile leer. Die Zahlen sind normale Inhalte (Kian 07.09.2026): nicht kursiv, keine Marke "Beispielzahl" — die Quelle steht bei der Zahl in docs/texte.md. Tabellenziffern, weil die Zahl hochläuft (js/zahlen.js) und das Layout dabei nicht springen darf. */ .zahl{ color:var(--schiefer); /* Schiefer für große Ziffern (Designvorgabe; 3,6:1 reicht ab 24px fett) */ font-size:var(--fs-zahl);line-height:1;font-weight:650;letter-spacing:-.04em; font-variant-numeric:tabular-nums; } .kennzahl-kacheln{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:32px 40px;margin:0;padding:0;list-style:none} .kennzahl-kachel{display:flex;flex-direction:column;gap:12px;min-width:0} .kennzahl-kachel .zahl{font-size:var(--fs-kennzahl);white-space:nowrap} .kennzahl-satz{font-size:var(--fs-3);line-height:1.5;color:var(--ink-2);margin:0} /* Das Quellenkürzel unten in der Kachel, rechts (Kian): klein, gedämpft, --muted auf --card 4,89 und auf --paper 4,53. */ .kennzahl-quelle{margin:auto 0 0;align-self:flex-end;font-size:var(--fs-1);color:var(--muted);letter-spacing:.02em} /* Die Zeile unter dem Block, woher die Zahlen stammen (GM-18). */ .kennzahl-herkunft{margin-top:32px;font-size:var(--fs-1);color:var(--muted);max-width:var(--spalte)} /* --- Der Ablaufblock, Fassung "Blasen" (entschieden 05.09.2026 über /variant) ---------------------------------------------------------------- Links drei Blasen mit Symbol und Name — die Auswahl —, gestaffelt, sie ragen 32 bis 88px in die Bildfläche; rechts das Systembild des gewählten Schritts. Auf der Grundfläche: Kanten in --muted (3,24), Flächen --card. Die Auswahl sind Verweise auf die Bild-Anker; js/ablauf.js macht daraus Reiter. Gewählt = Kreis invertiert (--ink, weißes Symbol), Name 650, Unterlinie in --accent — drei Merkmale, keines nur Farbe. Kein Wechsel beim Überfahren; hover ändert nur die Kante. Symbole: Lucide über Iconify, lokal, als Sprite per ; einfarbig. */ /* Das Sprite zeichnet nichts; display:none würde in älteren WebKits die -Bezüge leeren, deshalb nur aus dem Fluss nehmen. */ .sym-sprite{position:absolute;width:0;height:0;overflow:hidden} .ablauf-blasen{ display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr); align-items:center;margin-top:36px; } .ablauf-wahl{ list-style:none;margin:0;padding:0; display:flex;flex-direction:column;gap:14px;align-items:flex-end; position:relative;z-index:1;margin-inline-end:-72px; } /* Drei Blasen seit 08.09.2026: Kurve nach innen und zurück — 40, −16, 28. */ .ablauf-wahl li:nth-child(1){margin-inline-end:40px} .ablauf-wahl li:nth-child(2){margin-inline-end:-16px} .ablauf-wahl li:nth-child(3){margin-inline-end:28px} .ablauf-schritt{ display:inline-flex;align-items:center;gap:10px; padding:8px 20px 8px 8px;border-radius:999px; background:var(--card);border:1px solid var(--kante);box-shadow:var(--sh-2); color:var(--ink);text-decoration:none; font-size:var(--fs-3);font-weight:600;line-height:1.3;letter-spacing:-.015em; } .ablauf-schritt .ablauf-name{text-decoration:underline;text-decoration-color:transparent;text-decoration-thickness:2px;text-underline-offset:5px} .ablauf-schritt[aria-selected="true"]{border-color:var(--accent);box-shadow:var(--sh-2),inset 0 0 0 1px var(--accent)} .ablauf-schritt[aria-selected="true"] .ablauf-symbol{background:var(--ink);color:#fff} .ablauf-schritt[aria-selected="true"] .ablauf-name{font-weight:650;text-decoration-color:var(--accent)} .ablauf-symbol{ display:grid;place-items:center;flex:none; width:36px;height:36px;border-radius:50%; background:var(--wash);color:var(--ink-2); } .ablauf-symbol svg{width:20px;height:20px;display:block} /* Bilder: ohne JavaScript alle untereinander mit Beschriftung; mit JavaScript nur das gewählte, die Beschriftung entfällt (der gewählte Schritt steht in der Auswahl). */ .ablauf-bilder{display:grid;gap:16px} .ablauf-bild{margin:0} .ablauf-bild[hidden]{display:none} .ablauf-bild .systembild{aspect-ratio:16/10} .ablauf-bildtext{margin-top:8px;font-size:var(--fs-2);color:var(--ink-2)} .ablauf-js .ablauf-bildtext{display:none} /* Die Gabelung auf eigener heller Fläche, harte Kante zum Ablaufblock darüber (getrenntes Thema). Ein Erklärungssatz, dann zwei gleich große Karten in --accent mit weißem Text — Fassung "Satt", entschieden am 05.09.2026 über /variant: die Gabelung ist der visuell wichtigste Punkt der Seite und darf wie zwei große Knöpfe lesen. Kontraste: Weiß auf --accent 5,27, Platzhalter --dark-ink 4,65, --ink darauf nur 3,46 (nicht verwenden). Keine Kante, die Füllung trägt (5,27 gegen die weiße Fläche). Fokusring in --ink, weil er außen auf Weiß liegt. Beim Überfahren --accent-press wie der Knopf. Einer der höchstens zwei Kartenblöcke der Seite: hier ist die Karte eine Wahl. */ /* Die Regeln zielen auf h2 und p, nicht auf .platz: nach dem Übertragen aus texte.md trägt der Satz die Klasse nicht mehr (07.09.2026). */ .gabelung-kopf h2 + p{margin-top:12px} .gabelung-kopf p{font-size:var(--fs-4);line-height:1.45} .gabelung{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:28px} .gabel-feld{ display:flex;flex-direction:column;gap:16px; padding:32px; background:var(--accent);border:1px solid transparent;border-radius:var(--r-lg); box-shadow:var(--sh-2); color:#fff;text-decoration:none; } .gabel-feld:focus-visible{outline-color:var(--ink)} /* Je Karte ein Satz (ST-10, ST-11; seit 07.09.2026 ohne die Zeile darunter) und "Weiter". */ .gabel-feld .satz{font-size:var(--fs-4);line-height:1.35;font-weight:600;letter-spacing:-.015em} .gabel-feld .weiter{ margin-top:auto;padding-top:6px; font-size:var(--fs-2);font-weight:600;color:#fff; text-decoration:underline;text-underline-offset:3px; } /* --- 10 Fotoband --------------------------------------------------------- Ein schmales Bild über die volle Breite zwischen zwei Blöcken, als Alternative zum farbigen Balken (Bildplatz B1). Rein schmückend: bleibt auch mit echtem Foto aria-hidden und ohne Alternativtext. */ /* Füllung --faint statt --card oder --line: das Band grenzt oben an die Grundfläche und unten an --card, und nur --faint hebt sich von beiden ab (1,8 / 2,3). Mit echtem Foto entfällt die Frage. */ .bildband{ display:block; aspect-ratio:auto;height:clamp(160px,22vw,260px); border-radius:0; background:var(--faint); } /* --- 11 Bildabschnitt: die drei Schritte, Text|Bild im Wechsel ------------ Drei Blöcke mit Rhythmus (seit 08.09.2026 drei statt vier, Prüfen ist in Finden aufgegangen): Schritt 1 und 3 Text links, Bild rechts, auf der Grundfläche; Schritt 2 Bild links, Text rechts, auf --card mit weichem Verlauf an der Oberkante (erlaubter Verlauf zwischen benachbarten Tönen). Die Flächen sind gegenüber der Vierer-Fassung gedreht, damit der letzte Schritt auf der Grundfläche endet und die harte Kante zum weißen Fragen-Block bleibt. Auf schmalen Bildschirmen untereinander, immer Text zuerst — die Reihenfolge im Markup ist Text, dann Bild; nur order dreht. Alle drei Überschriften gleich groß und gleich fett, das Verb in --accent. Die frühere Staffelung zwischen den Schritten war ein Fehler (05.09.2026). Alle Bildflächen gleicher Zuschnitt und gleiche Breite. */ .schritte{background:var(--grund);padding-bottom:0} /* Die drei Schritte gehen ineinander über (Regel 05.09.2026): jede Kante zwischen zwei Schritten ist ein Verlauf über 160px an der Oberkante des folgenden Schritts — 1→2 von der Grundfläche zu --card, 2→3 zurück zur Grundfläche. Schritt 1 beginnt hart nach dem Fotoband; nach Schritt 3 folgen "Fragen und Antworten" mit harter Kante. Das sind die einzigen Verläufe der Seite. */ .schritt{padding-block:80px} /* Messe-Fassung (10.09.2026): kein Verlauf mehr zwischen den Schritten — die Designvorgabe erlaubt Verläufe nur im Seitenhintergrund. Der Flächenwechsel bleibt (2 auf --card, 1 und 3 auf dem Grund), die Kante ist hart. Die Verlaufsfassung liegt im Zweig main. */ .schritt:nth-of-type(even){background:var(--card)} .schritt:nth-of-type(odd):not(:first-of-type){background:var(--grund)} /* Bildflächen: auf der Grundfläche in --card, auf --card in --line — sonst verschwindet ein Platzhalter weiß auf weiß. */ .schritte .platz-bild{background:var(--card)} .schritt:nth-of-type(even) .platz-bild{background:var(--line)} .schritt-zwei{ display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:48px; align-items:center; } .bild-links .schritt-text{order:2} /* Auf der Startseite sind die Schrittüberschriften h3 (unter der h2 des Bildabschnitts), auf den Pfadseiten h2 (direkt unter der h1) — gleiche Stufe 36/650, keine Lücke in der Gliederung. */ .schritt-text h2, .schritt-text h3{font-size:var(--fs-6);font-weight:650;letter-spacing:-.025em;line-height:1.15} .schritt-text p{margin-top:16px} /* Die Überschriften sind keine Verweise (Entscheidung 05.09.2026); die Schrittseiten sind gestrichen (06.09.2026), die Erklärung je Schritt steht in den Karussells der Pfadseiten. */ /* --- 11a Fragen und Antworten (Blasen, natives details) ------------------- Kurzer Bereich vor "Wer dahintersteht" (Entscheidung 05.09.2026), auf --card mit Band. Jede Frage eine Blase wie im Ablaufblock: weiß, Kante --muted (4,57 auf --card), Schatten --sh-2, Rundung 999px. Natives
: ohne JavaScript lesbar, Tastatur und Zustand kommen vom Browser. Geöffnet dieselben drei Merkmale wie der gewählte Schritt im Ablaufblock — Kante und innerer Ring in --accent, Winkel gedreht —, keines nur Farbe. Der Winkel ist aus zwei Kanten gezeichnet (wie die Kontaktblase), kein Symbol. Die Antwort steht darunter in der Textspalte. Der ausführliche Teil steht auf faq.html. */ /* Alle Blasen gleich groß und über die volle Breite ihres Behälters (Kian 06.09.2026: eine Breite, die an der Länge der Frage hängt, ist derselbe Fehler wie ungleiche Eingabefelder). Der Winkel steht rechts außen, die Frage beginnt --rand innen — auf faq.html, wo die Blasen bis zur Blattkante reichen, liegt sie damit auf der Textachse. In einem Blatt füllen die Blasen dessen Innenbreite; auf der Startseite die Satzbreite. */ .fragen{display:flex;flex-direction:column;gap:12px;margin-top:28px} /* Anordnung (Kian 06.09.2026, Kurve neu 09.09.2026): links versetzt in einem Bogen, der oben und unten bündig anliegt und in der Mitte am weitesten einrückt — symmetrisch, gleich für drei, vier oder acht Blasen. Der Einzug hängt am Abstand zum näheren Ende: 0px an den Enden, dann 40, 72, 96px (nth-child von vorn und nth-last-child von hinten zusammen). Drei Blasen: 0, 40, 0. Vier: 0, 40, 40, 0. Acht: 0, 40, 72, 96, 96, 72, 40, 0. Bis 09.09.2026 war es ein Zickzack 0, 48, 16 von vorn, den man nicht als Kurve las. Rechts schließen alle bündig ab; die Blasen sind damit unterschiedlich breit bei bündigem rechten Rand: benannte Ausnahme der Breitenregel (webseite-struktur.md). Unter 640px 0, 16, 28, 36px. */ .frage{margin-inline-start:0} .frage:nth-child(n+2):nth-last-child(n+2){margin-inline-start:40px} .frage:nth-child(n+3):nth-last-child(n+3){margin-inline-start:72px} .frage:nth-child(n+4):nth-last-child(n+4){margin-inline-start:96px} .frage summary{ list-style:none;cursor:pointer; display:flex;align-items:center;gap:14px; padding:12px var(--rand) 12px calc(var(--rand) - 1px);border-radius:999px; background:var(--card);border:1px solid var(--kante);box-shadow:var(--sh-2); font-size:var(--fs-3);font-weight:600;line-height:1.3;letter-spacing:-.015em; color:var(--ink); } .frage summary::-webkit-details-marker{display:none} /* Winkel: zu = zeigt nach unten (die Antwort klappt nach unten auf), offen = nach oben. */ .frage summary::after{ content:"";flex:none;width:8px;height:8px;margin-inline-start:auto; border-right:2px solid currentColor;border-bottom:2px solid currentColor; transform:translateY(-3px) rotate(45deg); } .frage[open] summary{border-color:var(--accent);box-shadow:var(--sh-2),inset 0 0 0 1px var(--accent)} .frage[open] summary::after{transform:translateY(3px) rotate(-135deg)} .frage .antwort{padding:14px var(--rand) 6px} .fragen-mehr{margin-top:28px} /* --- 12 Gründer und Gründererfahrung -------------------------------------- Aus sprachregeln.md: "Der Inhaber vertraut Personen." Die drei Gründer, Gruppenbild G1 (3:2) links, Text rechts (seit 07.09.2026 statt des Porträts P1; gleiches Raster wie "Wer wir sind" auf den Pfadseiten) — auf der Grundfläche mit Band, seit davor der FAQ-Block auf --card steht (05.09.2026). Gründerfotos zeigen Gesichter, Stockfotos nicht (Fotoregeln in webseite-struktur.md). Darunter die Gründererfahrung mit sichtbarer Kennzeichnung — Erfahrung der Gründer aus ihrer Inhaberzeit, keine Kundenreferenz. Die Kundenreferenzen sind ein eigener, verborgener Abschnitt (Abschnitt 7, Zählmodus). */ .gruender-einzel{ display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:32px 48px; align-items:start;margin-top:28px; } .gruender-erfahrung{margin-top:28px} /* Die Kennzeichnung als Gründererfahrung in Ocker-Tinte (4,9:1 auf Weiß): "Ocker ist der Claim — Hinweise, Markierungen" (Designvorgabe). */ .kennzeichen{font-size:var(--fs-2);font-weight:600;color:var(--ocker-ink)} /* --- 13 Preiskarten ------------------------------------------------------ Zwei bis drei Karten nebeneinander, auf schmalen Bildschirmen untereinander. Kein Bezahlvorgang, keine Kartenlogos, keine Eingabefelder. Der zweite erlaubte Kartenblock: hier ist die Karte eine Wahl. */ /* MESSE-FASSUNG (10.09.2026): Die Preiskarten und der Zeitraum-Umschalter (weiter unten, .zeitraum*) stehen auf keiner Seite dieses Zweigs mehr — preise.html ist raus und der Preisabschnitt auf selbst.html auch. Die Regeln bleiben trotzdem stehen: nach der Messe kommt die Preisfassung zurück, und eine gelöschte Stilvorlage müsste man neu schreiben statt eine Seite wieder einzuhängen. Wer hier aufräumt, prüft vorher den Zweig preise. */ .preis-karten{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;margin-top:32px} .preis-karte{ display:flex;flex-direction:column;gap:14px; padding:28px; background:var(--card);border:1px solid var(--kante);border-radius:var(--r-lg); box-shadow:var(--sh-2); } .preis-karte .knopf{margin-top:auto;text-align:center} .netto{margin-top:20px;font-size:var(--fs-2);color:var(--ink-2)} /* --- 14 Angabenliste der rechtlichen Seiten ------------------------------ Impressum: Feld links, Wert rechts. Wo der Wert fehlt, steht ein kursiver Platzhalter — nie eine erfundene Nummer. Seit 10.09.2026 dazu: der Hinweis unter der Liste (warum Register und Steuernummer fehlen), die Liste der Profile und die vier Hinweisabschnitte mit h3. Alle drei stehen auf Lesebreite, damit die Absätze im Blatt nicht über die ganze Breite laufen. */ .angaben{display:grid;grid-template-columns:230px minmax(0,1fr);gap:14px 28px;margin-top:28px} .angaben dt{font-weight:600;color:var(--ink-2)} .angaben dd{margin:0} /* Der Hinweis zur Gründung: abgesetzt, aber nicht als Warnung. */ .angaben-hinweis{margin-top:28px;padding-top:20px;border-top:1px solid var(--line);max-width:var(--spalte);color:var(--ink-2)} /* Die Profile, für die dasselbe Impressum gilt: eine Zeile je Netzwerk. */ .profile{list-style:none;display:grid;gap:10px;margin-top:18px} /* Die Hinweise im Impressum: Überschrift und Absatz, enger gestaffelt als im Rechtstext, weil es je Abschnitt nur einen Absatz gibt. Eigene Klasse statt .blatt-text h3, damit ein h3 in einem anderen Blatt nicht mitgestaltet wird. */ .hinweise h3{margin-top:32px;font-weight:650} .hinweise h3:first-of-type{margin-top:0} .hinweise h3 + p{margin-top:12px;max-width:var(--spalte)} /* --- 15 Fußzeile --------------------------------------------------------- Aus NOTIZEN.md: Hilti "Die Fußzeile wirkt seriös", Blåkläder "rau, echt, dunkel". Bis 09.09.2026 ein dunkles Band am Ende einer hellen Seite; seit der Messe-Fassung Papier mit der Wortmarke samt Claim (Begründung an .fuss weiter unten). Trägt alle fünf Seitenverweise, weil die Kopfzeile sie unter 900px nicht zeigt — dort ist die Fußzeile der einzige Weg zu den Seiten. Die kursive Zeile #kontakt wird zum überschriebenen Kontaktblock, sobald die Nummern da sind — statt einer Kontaktseite (05.09.2026). Sozialverweise sichtbar in der Fußzeile (06.09.2026), Ziele bis zur Veröffentlichung als TODO. Kein Newsletter, keine Sprachauswahl, kein Cookie-Hinweis. Es gibt kein Tracking, also braucht es keinen. */ /* Messe-Fassung (10.09.2026): die Fußzeile ist Papier (Fläche 2), nicht mehr dunkel. Die Designvorgabe lässt beides zu ("Papier oder Braunschwarz, eines von beiden") und will höchstens ein dunkles Element je Bildschirmhöhe. Papier aus zwei Gründen: Die Weiß-Fassung der Wortmarke für dunklen Grund fehlt (die Datei "weiss" des Gestalters ist die dunkle Marke auf weißem Rechteck), und ohne dunkle Fläche kann die Wortmarke mit Claim hier stehen — der einzige Ort des Claims (sprachregeln.md). Die dunkle Fußzeile liegt im Zweig main. Oberkante --line, damit der Wechsel vom Grund (Papier) auf Fläche 2 sichtbar bleibt. */ .fuss{background:var(--surface-2);color:var(--ink);border-top:1px solid var(--line)} .fuss-innen{ max-width:var(--breite);margin:0 auto;padding:56px var(--rand); display:flex;flex-wrap:wrap;gap:32px;align-items:flex-start; justify-content:space-between; } /* Wortmarke mit Claim über der Firmenzeile. Die Vorgabe nennt 140px Breite als Untergrenze für die Fassung mit Claim; das Seitenverhältnis der Datei ist 1,647, also braucht sie 86px Höhe. 88px, damit sie mit 145px sicher darüber liegt (72px hätten nur 118px ergeben, der Claim war Matsch — gemessen 10.09.2026). Zwischenlösung: die Datei ist aus dem SVG des Gestalters abgeleitet (docs/bildquellen/HERKUNFT.md). */ .fuss-marke{display:grid;gap:16px;justify-items:start} .fuss-marke img{display:block;height:88px;width:auto} .fuss-firma{font-size:var(--fs-2);line-height:1.6;color:var(--ink-2)} .fuss-firma b{display:block;color:var(--ink);font-size:var(--fs-3);font-weight:600} .fuss-wege{display:flex;flex-wrap:wrap;gap:4px 28px;list-style:none} .fuss-wege a, /* Der Knopf "Datenschutzeinstellungen" steht in derselben Liste und muss genauso aussehen. .wie-verweis erbt nur font:inherit, das ist der Fließtext (17px) — ohne diese Zeile stünde er größer als seine Nachbarn (gemessen 10.09.2026). */ .fuss-wege .wie-verweis{ display:inline-block;padding-block:8px; color:var(--ink-2);font-size:var(--fs-2);text-decoration:none; } /* Sozialverweise (06.09.2026, wie bei HERO): sichtbar, mit Symbol und Namen — LinkedIn, Instagram, Facebook. Symbol 18px in currentColor aus dem Sprite im Fuß (Lucide über Iconify, lokal in docs/bildquellen/symbole/iconify/). Ziele bis zur Veröffentlichung #todo-sozial. */ .fuss-sozial{flex:1 1 100%;display:flex;flex-wrap:wrap;gap:4px 28px;list-style:none} .fuss-sozial a{display:inline-flex;align-items:center;gap:8px;padding-block:8px;color:var(--ink-2);font-size:var(--fs-2);text-decoration:none} .fuss-sozial .sym{width:18px;height:18px;flex:none} /* Auf Papier trägt --accent den Fokusring mit 5,26 (bis 09.09.2026 stand hier --accent-dark, weil das Band dunkel war). */ .fuss :focus-visible{outline-color:var(--accent)} @media (forced-colors:active){ .fuss :focus-visible{outline-color:Highlight} } /* Der Kontaktblock der Fußzeile (.fuss-offen mit Nummer und Adresse) ist am 13.09.2026 entfallen (Kian): Telefon, WhatsApp und E-Mail stehen auf der Kontaktseite, im Kontaktformular und in der Kontaktblase. Damit ist auch der Anker #kontakt weg. Die Seitenverweise bleiben — unter 900px zeigt die Kopfzeile sie nicht, und dann ist die Fußzeile der einzige Weg. */ /* --- 15a Kontaktblase ---------------------------------------------------- Unten rechts, auf allen Seiten: ein Aufklapper mit Telefon, E-Mail und WhatsApp. Natives
— kein Skript, Tastatur und Zustand kommen vom Browser. Kein Chat mit Eingabefeld, kein Fremdanbieter: bei uns sitzt niemand am Chat, und ein Chat ohne Antwort ist schlechter als keiner. Auf schmalen Bildschirmen steht sie im Fluss vor der Fußzeile und verdeckt nichts (Entscheidung 05.09.2026). */ .kontaktblase{position:fixed;right:24px;bottom:24px;z-index:9;max-width:calc(100vw - 48px)} .kontaktblase summary{ list-style:none;cursor:pointer; display:inline-flex;align-items:center;gap:10px; padding:11px 18px;border-radius:999px; background:rgba(255,255,255,.76);border:1px solid var(--kante);box-shadow:var(--sh-2); -webkit-backdrop-filter:blur(16px) saturate(160%); backdrop-filter:blur(16px) saturate(160%); font-size:var(--fs-2);font-weight:600;color:var(--ink); } .kontaktblase summary::-webkit-details-marker{display:none} /* Winkel aus zwei Kanten eines Quadrats: zu = zeigt nach oben (aufklappen), offen = nach unten. Kein Symbolbild. */ .kontaktblase summary::after{ content:"";width:8px;height:8px; border-right:2px solid currentColor;border-bottom:2px solid currentColor; transform:translateY(3px) rotate(-135deg); } .kontaktblase[open] summary::after{transform:translateY(-3px) rotate(45deg)} /* Blase und Klappe sind schwebendes Material wie die Kopfzeile (09.09.2026). */ .kontaktblase-innen{ position:absolute;right:0;bottom:calc(100% + 10px);min-width:240px; padding:14px 14px 12px; background:rgba(255,255,255,.76);border:1px solid var(--kante);border-radius:var(--r-lg); -webkit-backdrop-filter:blur(16px) saturate(160%); backdrop-filter:blur(16px) saturate(160%); box-shadow:var(--sh-3); } .kontaktblase-innen ul{list-style:none;display:grid;gap:4px} .kontaktblase-innen li a{ display:block;padding:9px 10px;border-radius:var(--r-sm); color:var(--ink);text-decoration:none;font-size:var(--fs-3);font-weight:600; } .kontaktblase-innen p{margin:8px 10px 0;font-size:var(--fs-2)} /* --- 16 Bildvergrößerung ------------------------------------------------- Ein Klick auf ein Systembild öffnet es groß über der Seite, der Rest wird abgedunkelt. Natives : Fokusfalle, Escape und die Sperre des Hintergrunds kommen vom Browser, nicht von uns. Pfeilknöpfe wie in hero-referenz.png: rund, Chevron, gedämpfter Grund, links und rechts außerhalb der Bildfläche. Zählung als Text, kein Punkte-Streifen. Öffnen und Schließen blenden ein und aus (Abschnitt 20, 08.09.2026); seit 09.09.2026 materialisiert der Dialog aus Unschärfe (Fassung "Glas" aus /variant, Kian). Backdrop: --dark mit 70 % Deckung und Unschärfe 14px — die Seite bleibt als Material sichtbar, dieselbe Farbe, kein neuer Ton. Seit 10.09.2026 ist --dark Braunschwarz (#2A0807, rgb 42 8 7) statt Nachtblau; über weißem Inhalt mischt sich daraus #6A5251, darauf trägt die weiße Bildunterschrift 7,15. Unter prefers-reduced-transparency 80 % ohne Unschärfe. Das ist das eine dunkle Element, das die Designvorgabe je Bildschirmhöhe zulässt — es liegt über allem anderen. */ .vergroesserung{ margin:0;padding:0;border:0;background:transparent; width:100vw;height:100dvh;max-width:100vw;max-height:100dvh; color:var(--dark-ink); } .vergroesserung::backdrop{ background:rgba(42,8,7,.7); -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px); } .vg-innen{position:fixed;inset:0;display:grid;place-items:center;padding:72px 96px} .vg-bild{margin:0;width:min(1100px,100%)} .vg-flaeche{ aspect-ratio:16/10;overflow:hidden; background:var(--card);border-radius:var(--r-md); box-shadow:var(--edge),var(--sh-3); } .vg-flaeche img{display:block;width:100%;height:100%;object-fit:contain} .vg-text{margin-top:14px;font-size:var(--fs-2);color:var(--dark-ink);font-style:italic} .vg-text:empty{display:none} .vg-zaehler{ position:fixed;left:50%;bottom:24px;transform:translateX(-50%); font-size:var(--fs-2);font-weight:600;font-variant-numeric:tabular-nums; color:var(--dark-ink); } .vg-knopf{ position:fixed;width:48px;height:48px;border-radius:50%; display:grid;place-items:center;padding:0; background:var(--wash);border:1px solid var(--line-2);color:var(--ink-2); cursor:pointer;font:inherit; } .vg-zurueck{left:24px;top:50%;transform:translateY(-50%)} .vg-weiter{right:24px;top:50%;transform:translateY(-50%)} .vg-schliessen{top:24px;right:24px;font-size:26px;line-height:1} /* Chevrons aus zwei Kanten eines Quadrats — kein Symbolbild. */ .vg-zurueck::before,.vg-weiter::before{ content:"";width:11px;height:11px; border-left:2px solid currentColor;border-bottom:2px solid currentColor; } .vg-zurueck::before{transform:translate(2px,0) rotate(45deg)} .vg-weiter::before{transform:translate(-2px,0) rotate(-135deg)} /* Auf dem dunklen Grund trägt --accent als Fokusring nur 2,3; --accent-dark 7,56. */ .vergroesserung :focus-visible{outline-color:var(--accent-dark)} @media (forced-colors:active){ .vergroesserung :focus-visible{outline-color:Highlight} } @media (max-width:640px){ .vg-innen{padding:64px 16px 88px} .vg-knopf{width:44px;height:44px} .vg-zurueck{left:16px;top:auto;bottom:20px;transform:none} .vg-weiter{right:16px;top:auto;bottom:20px;transform:none} .vg-schliessen{top:12px;right:12px} .vg-zaehler{bottom:32px} } /* --- 18 Pfadseiten: eigene Bausteine (06.09.2026) ------------------------- selbst.html und betrieb.html sehen nicht aus wie die Startseite (Regel in webseite-struktur.md, "Die Pfadseiten"). Gleich bleiben Token, Skala, --breite, Kopfzeile, Kontaktblase, Fußzeile. Bausteine: Seitenkopf mit Motivbild, Wer wir sind, Karussell (js/blaettern.js), Vergleich als Werkzeugfläche (ohne Skript, 07.09.2026), Gegenüberstellung Du | Los3, Großer Knopf, Kontaktwege, Formulare, Aufwandsrechner mit Ergebnisfeld (js/aufwand.js). Alles dokumentiert im Style-Lock, Abschnitt Pfad-Bausteine. Ebenen (entschieden 06.09.2026 über /variant, Fassung "Durchlaufend"; Regel in webseite-struktur.md, "Die Ebenen der Pfadseiten"): beide Seiten liegen auf EINEM Verlauf über den ganzen Hauptbereich. Bis 10.09.2026 lief er von Weiß bis fast --dark mit dunklen Bereichen (.dunkel) und heller Schrift darauf (.auf-dunkel); diese Fassung liegt im Zweig main. Seit der Messe-Fassung läuft er nur von Weiß nach Papier, und es bleiben zwei Ebenen: der Grund trägt alles Offene (Seitenkopf, Karussell, Zahl, Fragen, Abschluss), Blätter (.blatt-text, weiß mit --sh-1) und Werkzeugflächen (.werkzeug) heben Textbereiche und Rechner ab. Tinte steht überall auf Weiß bis Papier (--ink auf --paper 15,5) — kein Mittelton, keine Kontrastprüfung über den Verlauf mehr nötig. Keine Akzentmarken, keine Bänder, keine Navigation, kein Inhaltsverzeichnis. */ /* Messe-Fassung (10.09.2026): der Verlauf der Pfadseiten geht nur noch von Weiß nach Papier — der einzige Verlauf, den die Designvorgabe zulässt ("Verläufe nur im Seitenhintergrund, weiß nach Papier, nirgends sonst"). Der frühere Lauf bis fast --dark, die dunklen Bereiche (.dunkel) und die hellen Schriften darauf (.auf-dunkel) sind weg: "Dunkel ist Akzent, nie Fläche". .pfad-grund trägt ueber-uns.html (vorher .verlauf). */ .pfad,.pfad-grund{background:linear-gradient(180deg,var(--card) 0,var(--paper) 100%)} /* Kantenregel (Kian 06.09.2026): Flächen — Blätter, Werkzeugflächen, die Reiterzeile des Karussells, Motivbilder und alle Fotos, die für sich stehen — ragen um --ausdehnung über die Textachse hinaus und schließen links und rechts auf der Blattkante ab; ihr Inhalt bleibt auf der Textachse. Inhalt ohne Fläche (Bilder im Raster neben Text wie G1 und die Karussell-Bilder, Tabellen, die Tafel des Karussells, Text) endet an der Textachse, --rand innerhalb der Kante. --ausdehnung ist der Seitenrand; unter 640px liegen die Flächen damit am Bildschirmrand, die Reiter bleiben dort ohne Überstand. */ .pfad{--ausdehnung:var(--rand)} .pfad-abschnitt{padding-block:64px} .pfad-kopf{padding-block:56px 64px} /* Bildplatzhalter auf dem Verlauf: --card wäre oben unsichtbar, --line-2 hebt sich von Weiß und --accent-tint ab; Systembilder behalten Weiß mit Kante und Schatten. */ .pfad .platz-bild:not(.systembild),.pfad-grund .platz-bild:not(.systembild){background:var(--line-2)} /* Seitenkopf: h1 in Kernzeilengröße; auf selbst.html darunter das Motivbild M1 über die Satzbreite, auf betrieb.html rechts daneben M2 (4:3). */ .pfad-kopf .vorspann{margin-top:16px} .pfad-kopf-zwei{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:48px;align-items:center} .platz-bild-breit{aspect-ratio:21/9;border-radius:var(--r-lg);margin-top:40px} .platz-bild-quer{aspect-ratio:4/3;border-radius:var(--r-lg)} /* Motivbilder sind Flächen, nicht Inhalt (Kian 06.09.2026: ein Foto 21:9, das an der Textachse endet, sieht aus wie zu klein geraten; die Wirkung kommt aus der Fläche). M1 ragt beidseitig bis zur Blattkante, M2 im Kopfraster nach rechts; unter 900px steht M2 unter dem Text und ragt beidseitig. Bilder im Raster neben Text — G1, die Karussell-Bilder — bleiben an der Textachse. */ .pfad .platz-bild-breit,.unterseite .platz-bild-breit{margin-inline:calc(-1 * var(--ausdehnung))} .pfad-kopf-zwei .platz-bild-quer{margin-inline-end:calc(-1 * var(--ausdehnung))} /* Motivbild als eigener Bereich zwischen zwei Bereichen (M3 auf ueber-uns.html, 06.09.2026): 64px vom Text darüber, 48px zum Blatt darunter. */ .motiv{padding-block:0 24px} .motiv .platz-bild-breit{margin-top:0} /* Wer wir sind: Gruppenbild G1 (3:2) links, Text rechts. */ .wir{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:32px 48px;align-items:start;margin-top:28px} .platz-bild-gruppe{aspect-ratio:3/2;border-radius:var(--r-lg)} /* Karussell der drei Schritte, zwei Ebenen (07.09.2026): Reiter wählen den Schritt (Reiter-Muster wie im Ablaufblock), darunter je Schritt eine Tafel — Bild groß links, Text rechts. Je Schritt vier Einheiten .karussell-bild in .karussell-bilder: je ein Bild (16:10) mit seinem eigenen Text (.bild-text) und seiner eigenen Aufteilung "Das übernimmt Los3" / "Das bleibt bei dir" (.aufteilung, seit 07.09.2026 je Bild statt je Schritt), beides wechselt mit dem Bild. Rechts stehen übereinander: der Schrittname (.karussell-titel, je Schritt), der Text zum Bild und die Aufteilung (je Bild). Die runden Pfeilknöpfe außen (hero-referenz.png) blättern innerhalb des Schritts, die Zählung nennt "Bild 2 von 4". Ohne JavaScript: alle Tafeln untereinander, in jeder Tafel Schrittname, dann alle vier Bilder mit ihrem Text und ihrer Aufteilung darunter; Knöpfe und Zählung bleiben hidden, die Reiter sind Anker. Die Klasse karussell-js setzt das Skript. Die Bildhöhe ist fest, damit beim Blättern nichts springt; die Breite der Bildspalte folgt aus ihr (16:10), so bleibt jedes Bild unbeschnitten. */ .karussell{margin-top:28px;--karussell-bild-hoehe:clamp(220px,25.5vw,330px)} /* Reiter: drei gleich breite Blasen in einer Zeile (08.09.2026, vorher vier), die wie Blätter und Werkzeuge um --ausdehnung über die Textachse hinausragt und auf der Blattkante abschließt (Kian 06.09.2026). Je Schritt dasselbe Lucide-Symbol wie im Ablaufblock der Startseite (Sprite im HTML, docs/bildquellen/HERKUNFT.md). Seit 09.09.2026 (Kian) in Los3-Blau: alle Reiter --accent mit weißer Schrift (5,3:1), Kreis weiß mit Symbol --accent; der gewählte Reiter --accent-press (Weiß darauf 7,8:1), Kreis umgekehrt --accent mit weißem Symbol (5,3:1), Gewicht 650 — drei Merkmale, keines nur Farbe. Bis dahin weiße Pillen, gewählt --ink. Unter 640px eine Spalte ohne Überstand; die Zweispalten-Stufe bei 1150px entfiel mit dem vierten Reiter. */ .karussell-reiter{list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-inline:calc(-1 * var(--ausdehnung))} .karussell-reiter a{ display:flex;align-items:center;justify-content:center;gap:10px; min-height:48px;padding:6px 16px 6px 6px;border-radius:999px; background:var(--accent);border:1px solid var(--accent); color:#fff;text-decoration:none; font-size:var(--fs-2);font-weight:600;line-height:1.3; } /* Gewählt: dunkleres Blau, Kreis umgekehrt, Gewicht — nicht nur Farbe. */ .karussell-reiter a[aria-selected="true"]{background:var(--accent-press);border-color:var(--accent-press);color:#fff;font-weight:650} .reiter-symbol{display:grid;place-items:center;flex:none;width:34px;height:34px;border-radius:50%;background:#fff;color:var(--accent)} .reiter-symbol svg{width:18px;height:18px;display:block} .karussell-reiter a[aria-selected="true"] .reiter-symbol{background:var(--accent);color:#fff} .reiter-name{text-wrap:balance} /* Ohne Skript: alle Tafeln untereinander, je Tafel Bild links, Text rechts. Mit Skript (karussell-js) wird die Bühne ein Raster aus vier Spalten — Knopf | Bild | Knopf | Text —, die sichtbare Tafel löst sich in ihre Teile auf (display:contents), damit die Pfeilknöpfe links und rechts außen an der Bildfläche stehen (hero-referenz.png). Die Bildfläche hat eine feste Höhe, damit beim Blättern nichts springt; die Knöpfe sitzen auf ihrer halben Höhe. Die Zählung steht unter dem Bild. */ .karussell-buehne{margin-top:24px;display:grid;gap:48px} .karussell-tafeln{display:grid;gap:48px} /* Ohne Skript eine Spalte: Schrittname, dann die vier Einheiten. */ .karussell-tafel{display:grid;gap:20px;align-items:start} .karussell-titel{font-size:var(--fs-6);font-weight:650;letter-spacing:-.025em;line-height:1.15} /* Die Einheiten eines Schritts: ohne Skript alle untereinander, je Einheit das Bild (16:10), darunter sein Text und seine Aufteilung; mit Skript eine sichtbar. */ .karussell-bilder{display:grid;gap:32px} .karussell-bild{display:grid;gap:12px} .karussell-bild[hidden]{display:none} .aufteilung{display:grid;grid-template-columns:1fr 1fr;gap:16px 24px;margin-top:22px} .aufteilung-titel{font-size:var(--fs-2);font-weight:600} .aufteilung p + p{margin-top:6px} .blaettern-steuerung{display:flex;align-items:center;gap:16px;margin-top:16px} .blaettern-zaehler{font-size:var(--fs-2);color:var(--ink-2);font-variant-numeric:tabular-nums} .blaettern-zaehler[hidden]{display:none} /* Bildspalte = Bildhöhe mal 1,6 (16:10), der Text bekommt den Rest. */ .karussell-js .karussell-buehne{grid-template-columns:48px calc(var(--karussell-bild-hoehe) * 1.6) 48px minmax(0,1fr);gap:12px 20px;align-items:start} .karussell-js .karussell-tafeln, .karussell-js .blaettern-steuerung{display:contents} /* Die Tafel behält ihre Box (Rolle tabpanel bleibt im Baum) und spannt als Unterraster über Bild-, Knopf- und Textspalte; der rechte Pfeilknopf sitzt in der Spalte zwischen Bild und Text. Drei Zeilen: Schrittname, Text zum Bild, Aufteilung zum Bild — das Bild spannt über alle drei; die letzte Zeile ist 1fr, damit die drei Textteile oben dicht stehen und der Rest der Bildhöhe unten bleibt. Behälter und Einheit lösen sich auf (display:contents), damit Bild und Text der sichtbaren Einheit ihre Zellen belegen. */ .karussell-js .karussell-tafel{grid-column:2 / 5;grid-row:1;display:grid;grid-template-columns:subgrid;grid-template-rows:auto auto 1fr;gap:0 20px;align-items:start} .karussell-js .karussell-titel{grid-column:3;grid-row:1} .karussell-js .karussell-bilder, .karussell-js .karussell-bild{display:contents} .karussell-js .karussell-bild[hidden]{display:none} .karussell-js .karussell-bild .systembild{grid-column:1;grid-row:1 / 4} .karussell-js .bild-text{grid-column:3;grid-row:2;margin-top:14px} .karussell-js .karussell-bild .aufteilung{grid-column:3;grid-row:3} .karussell-js .blaettern-zurueck{grid-column:1;grid-row:1} .karussell-js .blaettern-weiter{grid-column:3;grid-row:1} .karussell-js .blaettern-knopf{margin-top:calc(var(--karussell-bild-hoehe) / 2 - 24px)} /* Die Zählung hängt am Bild, nicht an der Tafel: in derselben Zelle wie die Tafel, um die Bildhöhe nach unten gerückt. Sonst rutscht sie unter den Text, wenn der länger ist als das Bild (mit echten Texten 07.09.2026). */ .karussell-js .blaettern-zaehler{grid-column:2;grid-row:1;align-self:start;margin-top:calc(var(--karussell-bild-hoehe) + 12px)} /* Ausgeblendete Tafeln bleiben ausgeblendet — auch gegen die Mobilregel .karussell-js .karussell-tafel{display:grid}. */ .karussell-tafel[hidden], .karussell-js .karussell-tafel[hidden]{display:none} .blaettern-knopf{ width:48px;height:48px;border-radius:50%; display:grid;place-items:center;padding:0; background:var(--wash);border:1px solid var(--kante);color:var(--ink-2); cursor:pointer;font:inherit; } .blaettern-knopf:disabled{opacity:.4;cursor:default} .blaettern-knopf[hidden]{display:none} /* Chevrons aus zwei Kanten eines Quadrats — kein Symbolbild. */ .blaettern-knopf::before{content:"";width:11px;height:11px;border-left:2px solid currentColor;border-bottom:2px solid currentColor} .blaettern-zurueck::before{transform:translate(2px,0) rotate(45deg)} .blaettern-weiter::before{transform:translate(-2px,0) rotate(-135deg)} /* Werkzeugflächen sind weiße Karten mit Schatten, weißer Innenkante (--edge) und Rundung — flach, ohne Verlauf (Designvorgabe 10.09.2026; vorher --card → --wash und im dunklen Bereich --dark-elev). Gilt für die beiden Rechner. */ /* Die Werkzeugfläche ragt wie ein Blatt um --ausdehnung über die Textachse hinaus und schließt auf der Blattkante ab; seitlich --ausdehnung innen, so bleiben Felder und Zahl auf der Textachse (Kian 06.09.2026). */ .werkzeug{margin:28px calc(-1 * var(--ausdehnung)) 0;padding:32px var(--ausdehnung);background:var(--card);border-radius:var(--r-lg);box-shadow:var(--edge),var(--sh-2)} /* Zwei Rechner (13.09.2026): auf selbst.html eine Eingabe, auf betrieb.html zwei. Zahlenfelder brauchen keine Spaltenbreite — sie bleiben schmal, damit die Eingabe nicht wie ein Textfeld aussieht. Bis 13.09.2026 drei Felder über die volle Breite (.rechner .felder). */ .rechner-kosten .felder{grid-template-columns:minmax(0,340px)} .rechner-aufwand .felder{grid-template-columns:repeat(2,minmax(0,260px))} /* Ergebniszeile: die Zahl groß, Einheit und Text daneben auf der Grundlinie; die Zahl bricht nicht um. Auf betrieb.html stehen drei solche Zeilen untereinander (.ergebnis-drei), deshalb dort eine Stufe kleiner. */ .ergebnis-zeile{display:flex;align-items:baseline;flex-wrap:wrap;gap:0 12px;margin:0} .ergebnis-zeile + .ergebnis-zeile{margin-top:14px} .ergebnis-zeile[hidden]{display:none} .ergebnis-wort{font-size:var(--fs-4);line-height:1.4} .rechner-wert{font-size:var(--fs-zahl);font-weight:650;letter-spacing:-.04em;line-height:1;font-variant-numeric:tabular-nums;white-space:nowrap} .ergebnis-drei .rechner-wert{font-size:clamp(34px,4.4vw,56px)} .einheit{font-size:var(--fs-4);font-weight:600} .einheit[hidden]{display:none} /* Der feste Satz unter dem Ergebnis (SE-52, BE-43): er ändert sich mit der Eingabe nicht und steht deshalb ruhiger als die Zeilen darüber. */ .rechner-schluss{margin-top:24px;font-size:var(--fs-3);line-height:1.5;color:var(--ink-2)} .werkzeug .knopf-gross{margin-top:32px} /* Formularhinweis bei ungültiger Eingabe (negativ oder keine Zahl): das Skript setzt aria-invalid und blendet den Hinweis ein; die Kante wird --bad (3,21 auf dem Grund, 4,53 auf Weiß) — Farbe und Text zusammen. */ .feld-hinweis{margin-top:6px;font-size:var(--fs-2)} .feld-hinweis[hidden]{display:none} .feld input[aria-invalid="true"]{border-color:var(--bad)} /* Gegenüberstellung Du | Los3 (Wer entscheidet), neu gebaut 07.09.2026 (Kian: Spalten zu nah, Zeilen eingerückt, kein ruhiger Rhythmus): eine Tabelle mit zwei gleich breiten Spalten über die Innenbreite des Blatts, dazwischen ein Steg von 64px (--steg, unter 900px 24px); die Spaltenköpfe "Du" und "Los3" in --fs-4 650 mit einer Linie in --kante darunter (4,57 auf Weiß), jede Zeile durch eine Haarlinie in --line getrennt und 24px Luft oben und unten; Zeile 1 links neben Zeile 1 rechts auf gleicher Grundlinie, jede Zelle bündig an der linken Kante ihrer Spalte. Die Linien sind Struktur der Tabelle, keine Themen-Trennung — benannte Ausnahme der Regel "Trennung über Abstand, nicht über Linien" (style-lock). Die Spaltenköpfe bleiben programmatisch zugeordnet (th scope=col, Befund better-interface 06.09.2026). */ .gegenueber{--steg:64px;margin-top:28px;width:100%;border-collapse:collapse;table-layout:fixed} .gegenueber th, .gegenueber td{width:50%;text-align:start;vertical-align:baseline;padding:24px 0;font-weight:inherit} .gegenueber th:first-child, .gegenueber td:first-child{padding-inline-end:calc(var(--steg) / 2)} .gegenueber th + th, .gegenueber td + td{padding-inline-start:calc(var(--steg) / 2)} .gegenueber td{font-size:var(--fs-4);line-height:1.45} .gegenueber tbody tr + tr td{border-top:1px solid var(--line)} .gegenueber th{padding-block:0 12px;font-size:var(--fs-4);font-weight:650;letter-spacing:-.018em;color:var(--ink);border-bottom:1px solid var(--kante)} /* Großer Knopf: das Ziel der Seite, deutlich größer als der Kopfknopf. */ .knopf-gross{padding:20px 40px;border-radius:999px;font-size:var(--fs-4);font-weight:650;line-height:1.2;box-shadow:var(--sh-accent),var(--sh-2)} .abschluss{padding-block:96px 88px} .abschluss-satz{font-size:var(--fs-6);font-weight:700;letter-spacing:-.035em;line-height:1.15} .abschluss .knopf-gross{margin-top:32px} /* Kontaktwege: die Zeile mit den Knöpfen — im Kontaktformular die zwei Wahlknöpfe der Wegewahl (16a), auf danke.html, danke-nachricht.html und der Fehlerseite der Weg zurück. Der ruhige Knopf trägt eine Kante in --muted, weil --line-2 gegen beide Flächen nicht trüge. Bis 13.09.2026 stand hier "Anrufen in --accent, WhatsApp ruhig" — der erste sah gewählt aus, ohne es zu sein (Kian). */ .kontaktwege{display:flex;flex-wrap:wrap;gap:12px;margin-top:24px} .kontaktwege .knopf-ruhig{border-color:var(--kante)} /* Formulare: Beschriftung über dem Feld, Felder weiß mit Kante --muted (3,24 auf dem Grund, 4,56 auf Weiß). Kein Platzhaltertext im Feld — der sähe aus wie ein Vorgabewert. Ziele: warteliste.php und kontakt.php. Pflichtfelder tragen ein rotes Sternchen in der Beschriftung (Kian, 13.09.2026): --bad, 5,34 auf Weiß; für Vorlesesoftware zählt required, das Sternchen ist aria-hidden. Auf warteliste.html stehen die Felder untereinander (.felder-einspaltig), höchstens 560px breit — ein Feld über die ganze Seite sähe falsch aus. */ .formular{margin-top:28px} .felder{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px 20px} .felder-einspaltig{grid-template-columns:minmax(0,560px)} .feld label{display:block;font-size:var(--fs-2);font-weight:600;margin-bottom:6px} .pflicht{color:var(--bad);margin-inline-start:2px} .feld{min-width:0} .feld input, .feld textarea, .feld select{ width:100%;min-width:0;padding:12px 14px; background:var(--card);border:1px solid var(--kante);border-radius:var(--r-sm); font:inherit;color:var(--ink); } /* Auswahlfelder der Warteliste (Mitarbeiter, Ausschreibungen im Jahr): der Pfeil des Browsers bleibt, die Höhe gleicht dem Eingabefeld. */ .feld select{appearance:auto;line-height:1.35} /* Die zwei Häkchen der Warteliste unter den Feldern: Kenntnisnahme (Pflicht) und E-Mail-Info (freiwillig), je ein .feld-schalter wie im Einwilligungsstreifen, aber als Satz in normaler Schwere. */ .haekchen{margin-top:20px;display:grid;gap:12px;max-width:var(--spalte)} .haekchen .feld-schalter{align-items:start} .haekchen .feld-schalter input{margin-top:3px} .haekchen .feld-schalter label{font-weight:400;line-height:1.5} /* Der Satz über den Feldern der Warteliste (WL-03). */ .warteliste > p{margin-bottom:20px;max-width:var(--spalte)} /* --- 16a Wegewahl im Kontaktformular (Kian 11.09.2026; grau, ohne Vorauswahl und auf fünf Seiten seit 13.09.2026) ---------------------------- Zwei Radioknöpfe — Anrufen, WhatsApp schreiben —, deren Beschriftungen wie Knöpfe aussehen: beide gleich, weiß mit Kante --line-2, keiner vorgewählt. Der gewählte wird grau (--wash, Kante --ink-2; --ink darauf 16,1) und zeigt darunter den Verweis — die Nummer als tel:, dieselbe Nummer als wa.me. Bis 13.09.2026 war "Anrufen" vorgewählt und der gewählte blau: er sah gewählt aus, ohne es zu sein (Kian). E-Mail steht nicht mehr zur Wahl; die Adresse steht in der Kontaktblase, im Impressum und auf kontakt.html in einem eigenen Blatt. Die eigentlichen Eingabefelder liegen unter .visuell-versteckt: sie sind für die Maus unsichtbar, aber mit der Tastatur erreichbar (clip, nicht display:none). Deshalb trägt die Beschriftung den Fokusring. Das Umschalten der Angabe darunter läuft über :has() ohne Skript. Wo :has() fehlt, stehen beide Angaben untereinander — länger, aber nichts fehlt. */ .kontaktwahl{border:0;padding:0;margin:0;min-width:0} .kontaktwahl .knopf{background:var(--card);border-color:var(--line-2);color:var(--ink);cursor:pointer} .kontaktwahl input:checked + .knopf{background:var(--wash);border-color:var(--ink-2);color:var(--ink)} .kontaktwahl input:focus-visible + .knopf{outline:2px solid var(--accent);outline-offset:2px} @media (forced-colors:active){ .kontaktwahl input:focus-visible + .knopf{outline-color:Highlight} .kontaktwahl input:checked + .knopf{forced-color-adjust:none;background:Highlight;color:HighlightText} } .kontakt-angabe{margin-top:24px} .kontakt-wert{margin-top:6px;font-size:var(--fs-4);font-weight:600} .kontakt-wert a{color:var(--verweis)} @supports selector(:has(*)){ .kontakt-angabe{display:none} .kontaktwahl:has(#weg-telefon:checked) #angabe-telefon, .kontaktwahl:has(#weg-whatsapp:checked) #angabe-whatsapp{display:block} } /* Die Wertzeile der Kontaktblase: die Angabe steht unter ihrer Beschriftung, damit Telefon und WhatsApp in einem Eintrag Platz haben (11.09.2026). */ .kontaktblase-innen .wert{display:block;font-weight:500;color:var(--ink-2)} /* Kontaktformular: das Nachrichtenfeld über alle Spalten, in der Höhe ziehbar (07.09.2026; seit 13.09.2026 auf fünf Seiten). */ .feld textarea{min-height:150px;resize:vertical;line-height:1.5} .feld-breit{grid-column:1 / -1} button.knopf{font-family:inherit;cursor:pointer} .formular .knopf{margin-top:20px} .formular-hinweis{margin-top:12px;font-size:var(--fs-2)} /* Die dunklen Bereiche (.dunkel: Vergleich, Rechner, Abschluss auf --dark) und die helle Schrift auf dem dunklen Teil des Verlaufs (.auf-dunkel: Fragen der Pfadseiten) sind seit der Messe-Fassung (10.09.2026) weg — "Dunkel ist Akzent, nie Fläche" (Designvorgabe). Die Regeln liegen im Zweig main. Die Token --dark* bleiben in tokens.css für die Vergrößerung (Backdrop) und den Platzhalterzähler. */ /* Blätter (.blatt-text): weiße Karten (--r-lg, --sh-1) für die Textbereiche; der Inhalt behält die Achse der Seite, weil das Blatt seitlich genau den Seitenrand als Innenabstand trägt. Abstände: 40px innen oben und unten, 24px außen — von Text zu Text bleiben so 128px wie zwischen zwei offenen Bereichen (64 + 24 + 40 bzw. 40 + 24 + 24 + 40), zwischen zwei Blättern liegen 48px Grund. Vor der Fußzeile 64px außen. Die Sonderabstände zu den dunklen Bereichen (.dunkel + .blatt-text und umgekehrt) sind mit den dunklen Bereichen entfallen (10.09.2026). Keine Regel .blatt-text + .blatt-text{padding-top:0}: die ließ im Harness die Blätter ineinanderlaufen (Befund Kian 06.09.2026). */ .blatt-text{padding-block:24px} .blatt-text > .breite{background:var(--card);border-radius:var(--r-lg);box-shadow:var(--edge),var(--sh-1);padding:40px var(--rand)} .pfad > .blatt-text:last-child{padding-bottom:64px} /* Aufwandsrechner (betrieb.html): zwei Felder in der Werkzeugfläche, das Ergebnisfeld als flache Tafel in --accent-tint (Schiefer-Hintergrund; bis 09.09.2026 ein Verlauf im dunklen Bereich): Kosten heute und der große Knopf. Keine Ersparnis, keine Preisempfehlung (Messe-Fassung 10.09.2026 — die liegt im Zweig main). */ .ergebnisfeld{ margin-top:28px;padding:32px; background:var(--accent-tint);border-radius:var(--r-lg); display:grid;grid-template-columns:minmax(0,1fr) auto;gap:24px 40px;align-items:end; } /* --- 19 Unterseiten: dritte Bauweise (06.09.2026) ------------------------- faq.html, ueber-uns.html, kontakt.html, impressum.html, datenschutz.html, agb.html, danke.html: der Grund (--paper) als Fläche, der Inhalt in weißen Flächen darauf — Blatt (.blatt-text, Abschnitt 18) für Text und die Blasen (11a). Ausnahme ueber-uns.html: sie trägt den Verlauf der Pfadseiten (.pfad-grund), siehe unten. Kein Verlauf (braucht Länge, ein Impressum hat sie nicht), keine Bänder (trennen Themen, die diese Seiten nicht haben), keine dunklen Bereiche. h1 in Kernzeilengröße auf dem Grund (Tinte 17,12), Vorspann --ink-2 (10,87). Kantenregel wie auf den Pfadseiten: Blatt und Preiskarten bis zur Blattkante, Text auf der Textachse; die Blasen behalten wie auf der Startseite ihre eigene Breite an der Textachse — sie sind Bedienelemente, keine Flächen. Rhythmus: Kopf 56/40, Flächen 24 außen, Hauptbereich unten 40 — so liegen 64px zwischen Kopftext und erster Fläche und 64px zwischen letzter Fläche und Fußzeile. Regel in webseite-struktur.md, "Die Unterseiten — dritte Bauweise". */ .unterseite{--ausdehnung:var(--rand);padding-bottom:40px} .seitenkopf{padding-block:56px 40px} .unterseite-abschnitt{padding-block:24px} .fragen-gruppe{padding-block:32px} /* Bildplatzhalter auf dem weißen Blatt: --line, wie auf den hellen Flächen der Startseite. */ .unterseite .blatt-text .platz-bild{background:var(--line)} /* Über uns (06.09.2026): der Verlauf der Pfadseiten (.verlauf) statt des Grunds — die Seite ist lang genug. Kopf und "Warum es Los3 gibt" offen im hellen Teil, "Wer wir sind" und Vision, Mission, Ziel als Blätter (die drei in einem Blatt nebeneinander), "Was wir wollen" als dunkler Bereich mit dem Absichtssatz in Überschriftengröße, "Ein Weg, uns zu erreichen" als Blatt. Mittel aus der Regel: Abstandsrhythmus, wechselnde Breiten (.spalte, drei Spalten, .mittel), Tiefe nur an den Blättern. */ /* Vision, Mission, Werte (13.09.2026, Kian): zwei Zeilen statt drei Spalten. Vision und Mission nebeneinander, die Werte darunter über die ganze Breite — vier Sätze mit Stichwort machten die dritte Spalte mehr als doppelt so hoch wie die anderen (187px, 187px, 440px bei 1280px). Die vier Sätze stehen im selben Zweispaltenraster, damit sie auf denselben Achsen sitzen wie Vision und Mission darüber. */ .leitbild{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:44px 40px;align-items:start} .leitbild h2 + p{margin-top:14px} .leitbild-werte{grid-column:1 / -1} .leitbild-werte .werte-liste{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px 40px;margin-top:14px} .leitbild-werte .werte-liste p{margin:0} /* Zeilenhöhe 1,4 statt 1,2 (Befund interface-review 07.09.2026): der Satz läuft über vier Zeilen, auf dem Telefon über zehn; drei und mehr Zeilen brauchen mindestens 1,4. */ .absicht{font-size:var(--fs-6);font-weight:650;letter-spacing:-.025em;line-height:1.4;margin-top:24px} /* Die zwei Sätze unter der Absicht (UE-16, UE-17; 13.09.2026): Fließtextgröße auf Lesebreite, damit die Absicht die Stufe darüber behält. */ .absicht-folge{margin-top:20px;max-width:var(--spalte)} /* Der Schlusssatz (UE-17) in derselben Größe und im selben Gewicht wie die Absicht (Kian, 13.09.2026) — er ist der Satz, auf den der Abschnitt zuläuft, und stand bis dahin als kleiner Untersatz darunter. Mehr Luft nach oben als .absicht, weil davor Fließtext steht und keine Überschrift. */ .absicht-schluss{margin-top:32px} /* Fragen auf faq.html bis zur Blattkante (Kantenregel für Blasen in einer Zeile, 06.09.2026); auf schmalen Bildschirmen eingerückt. */ .unterseite .fragen{margin-inline:calc(-1 * var(--ausdehnung))} /* Preiskarten bis zur Blattkante, innen seitlich --ausdehnung: der Text der ersten Karte steht auf der Textachse. Stufenname in --fs-5, der Preis in --fs-6 — die Zahl ist der Punkt der Karte. Die Karte setzt ihre Abstände über gap, deshalb kein zusätzlicher Absatzabstand. */ .unterseite .preis-karten{margin:0 calc(-1 * var(--ausdehnung))} .unterseite .preis-karte{padding:28px var(--ausdehnung)} .preis-karte h2{font-size:var(--fs-5);line-height:1.2;letter-spacing:-.02em} .preis-karte .preis{font-size:var(--fs-6);font-weight:650;letter-spacing:-.025em;line-height:1.1} .preis-karte p + p{margin-top:0} /* Drei Stufen, sichtbar verschieden (Kian 06.09.2026): jede Karte trägt eine Marke in eigener Farbe aus den vorhandenen Token — Stufe 1 --accent-tint mit --accent-press (6,78), Stufe 2 --accent mit Weiß (5,27), Stufe 3 --ink mit Weiß (18,2) —, hell, mittel, dunkel, wie die Preise steigen. Die Marke trägt die Grenze in Angeboten im Jahr. Der Preis steht als Betrag in --fs-6 mit der Einheit daneben auf der Grundlinie (wie die Zahl im Rechner), Platz für zwei bis vier Stellen. Der Umfang als Liste mit Punkt in --ink-2, fünf bis sieben Zeilen, die höheren Stufen zeigen mehr. */ .stufe-marke{align-self:flex-start;padding:6px 12px;border-radius:999px;font-size:var(--fs-2);font-weight:600;line-height:1.3} .stufe-1 .stufe-marke{background:var(--accent-tint);color:var(--accent-press)} .stufe-2 .stufe-marke{background:var(--accent);color:#fff} .stufe-3 .stufe-marke{background:var(--ink);color:#fff} .preis-karte .preis{display:flex;align-items:baseline;flex-wrap:wrap;gap:0 10px} .umfang{list-style:none;display:grid;gap:8px;margin-block:6px} .umfang li{display:flex;gap:12px;align-items:flex-start} .umfang li::before{content:"";flex:none;width:6px;height:6px;border-radius:50%;background:var(--ink-2);margin-top:.6em} /* Der Knopf heißt "Paket [Name] kostenlos testen" (Kian 06.09.2026, vorher "Auswählen"); der Name ist ein Platzhalter im Knopf und erbt dessen Weiß. */ .knopf .platz{color:inherit} /* Hinweis zur Kündigung ganz unten in der Karte, je Zeitraum einer. */ .preis-karte .hinweis{font-size:var(--fs-2);color:var(--ink-2)} /* Umschalter monatlich / jährlich (Kian 06.09.2026): zwei native Radioknöpfe, visuell versteckt, aber fokussierbar — Tab erreicht den gewählten, Pfeiltasten wechseln, Rolle und Zustand liefert der Browser. Die Beschriftungen bilden den sichtbaren Schalter. Gewählt heißt: Fläche --ink mit weißer Schrift, Gewicht 650 und ein gefüllter Punkt vor dem Wort — drei Merkmale, keines nur Farbe. Der Fokusring liegt auf der Beschriftung. Alle Beträge stehen im HTML; :has() blendet je Auswahl die Zeilen und den Hinweis des anderen Zeitraums aus. Ohne :has() (alte Browser) stehen beide Beträge mit ihrer Einheit da — lesbar, nur nicht umschaltbar. */ .visuell-versteckt{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0} .zeitraum{border:0;padding:0;margin:0 0 28px} .zeitraum-titel{padding:0;margin-bottom:10px;font-size:var(--fs-2);font-weight:600;color:var(--ink-2)} .zeitraum-wahl{position:relative;display:inline-flex;padding:4px;border-radius:999px;background:var(--card);border:1px solid var(--kante);box-shadow:var(--sh-2)} .zeitraum-wahl label{display:inline-flex;align-items:center;gap:8px;padding:8px 16px;border-radius:999px;font-size:var(--fs-2);font-weight:600;line-height:1.3;color:var(--ink);cursor:pointer} .zeitraum-wahl label::before{content:"";flex:none;width:10px;height:10px;border-radius:50%;border:2px solid currentColor} .zeitraum-wahl input:checked + label{background:var(--ink);color:#fff;font-weight:650} .zeitraum-wahl input:checked + label::before{background:#fff;border-color:#fff;box-shadow:inset 0 0 0 2px var(--ink)} .zeitraum-wahl input:focus-visible + label{outline:2px solid var(--accent);outline-offset:2px} @media (forced-colors:active){ .zeitraum-wahl input:focus-visible + label{outline-color:Highlight} } .preisliste:has(#zeitraum-jahr:checked) .nur-monat, .preisliste:has(#zeitraum-monat:checked) .nur-jahr{display:none} /* Der Vorteil der jährlichen Abrechnung, sichtbar ohne Skript (Kian 07.09.2026, wie Aboanbieter es machen): eine kleine Marke in der Beschriftung "Jährlich" (PR-03, --accent-tint mit --accent-press, 6,78 — auch auf der gewählten dunklen Beschriftung lesbar) und neben dem Jahresbetrag durchgestrichen, was zwölf Monate einzeln kosten würden (PR-n-STATT), in --ink-2 auf der Grundlinie des Betrags. */ .zeitraum-vorteil{padding:2px 8px;border-radius:999px;background:var(--accent-tint);color:var(--accent-press);font-size:var(--fs-1);font-weight:600;line-height:1.3;letter-spacing:0} .preis-statt{font-size:var(--fs-3);font-weight:500;letter-spacing:-.011em;color:var(--ink-2);text-decoration-thickness:1px} /* --- 19a Rechtstext (10.09.2026) ------------------------------------------ Die Datenschutzerklärung auf datenschutz.html: ein einziger langer Text in einem weißen Blatt, auf Lesebreite (.spalte, 75ch). Er kommt wörtlich aus docs/recht/ und bringt eine Gliederung mit, die es sonst nirgends gibt — h2 für die fünf Abschnitte, h3 für die Themen, h4 innerhalb (nur hier). Deshalb eine eigene Staffelung: kleiner als auf den anderen Seiten, weil 24 Überschriften in einem Blatt sonst die Seite zerhacken. Abstand oben trennt, Abstand unten bindet die Überschrift an ihren Text. */ .rechtstext > *:first-child{margin-top:0} .rechtstext h2{ margin-top:56px;margin-bottom:20px; font-size:var(--fs-5);font-weight:650;letter-spacing:-.02em;line-height:1.2; padding-top:24px;border-top:1px solid var(--line); } .rechtstext h3{margin-top:36px;margin-bottom:12px;font-size:var(--fs-4);font-weight:650;letter-spacing:-.018em;line-height:1.3} .rechtstext h4{margin-top:24px;margin-bottom:10px;font-size:var(--fs-3);font-weight:650;letter-spacing:-.011em;line-height:1.35} .rechtstext p{margin-top:14px} .rechtstext ul{margin-top:14px;padding-inline-start:22px} .rechtstext li{margin-top:6px} /* Adressen und Netzadressen brechen im Blatt, statt es zu sprengen. */ .rechtstext a{overflow-wrap:anywhere} /* --- 19b Einwilligung (10.09.2026, Kian) ---------------------------------- Der Streifen unten, in dem über Analyse und Werbung entschieden wird. Eigene Lösung, kein Fremddienst; Verhalten in js/einwilligung.js, Regel in webseite-struktur.md, Abschnitt "Einwilligung". Kein Modal und keine Abdunklung: Die Datenschutzerklärung muss daneben lesbar bleiben, sonst verweist der Streifen auf etwas, das er selbst verdeckt. Er liegt über allem anderen (60; Kontaktblase 9 und 30, Sprung 20, Kopf 10) und schiebt die Kontaktblase weg, statt sie zu überlagern. **Ablehnen und Annehmen sind gleich.** Gleiche Größe, gleiche Fläche, gleiche Schrift, nebeneinander, in der Reihenfolge Ablehnen zuerst. Ein blaues Annehmen neben einem blassen Ablehnen wäre keine freie Wahl. Beide tragen .knopf-wahl: weiße Fläche, Kante --ink-2, Tinte (18,22 auf Weiß). "Einstellungen" ist ein Verweis, kein dritter Knopf — er entscheidet nichts, er klappt nur auf. */ .einwilligung{ position:fixed;left:0;right:0;bottom:0;z-index:60; background:var(--card);border-top:1px solid var(--line-2); box-shadow:0 -2px 3px rgba(9,25,60,.05), 0 -14px 34px rgba(9,25,60,.1); } .einwilligung-innen{ max-width:var(--breite);margin-inline:auto; padding:20px var(--rand) 22px; } .einwilligung-titel{font-size:var(--fs-4);font-weight:650;letter-spacing:-.018em;line-height:1.3} .einwilligung-satz{margin-top:8px;max-width:var(--spalte)} .einwilligung-knoepfe{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin-top:18px} .knopf-wahl{background:var(--card);border-color:var(--ink-2);color:var(--ink);min-width:148px;text-align:center} .einwilligung-mehr{ padding:0;border:0;background:none;cursor:pointer; font:inherit;font-size:var(--fs-2);font-weight:600;color:var(--verweis); text-decoration:underline;text-underline-offset:3px; } .einwilligung-fuss{margin-top:14px;font-size:var(--fs-2);color:var(--ink-2)} /* Die zwei Dienste: Kästchen, Bezeichnung, darunter ein Satz, was er tut. Beide stehen aus; nichts ist vorangekreuzt. */ .einwilligung-dienste{margin-top:18px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 32px;max-width:var(--spalte)} /* Eigene display-Regeln schlagen das hidden-Attribut des Browsers (gleiche Spezifität, Autor gewinnt) — beide Stellen brauchen deshalb ihr eigenes [hidden], wie .ablauf-bild und .karussell-tafel weiter oben. Ohne das stünden Schalter und "Auswahl speichern" immer offen (gemessen und behoben 10.09.2026). */ .einwilligung-dienste[hidden]{display:none} .einwilligung-knoepfe .knopf[hidden]{display:none} .feld-schalter{display:grid;grid-template-columns:auto minmax(0,1fr);gap:2px 10px;align-items:center} .feld-schalter input{width:18px;height:18px;margin:0;accent-color:var(--accent)} .feld-schalter label{font-size:var(--fs-2);font-weight:600;color:var(--ink)} .feld-schalter .feld-hinweis{grid-column:2;margin-top:0;color:var(--ink-2)} /* Solange der Streifen steht, weicht die Kontaktblase — beide sitzen unten. */ body.einwilligung-offen .kontaktblase{display:none} /* Der Verweis in der Fußzeile ist ein Knopf, weil er nichts navigiert; er sieht aus wie seine Nachbarn und wird erst mit Skript sichtbar. */ .wie-verweis{ padding:0;border:0;background:none;cursor:pointer; font:inherit;color:inherit;text-decoration:none; } /* --- 17 Schmale Bildschirme ---------------------------------------------- Keine feste Pixelbreite darf brechen. Die Leitpersona liest abends auf dem Telefon; das ist der Regelfall, nicht der Sonderfall. */ @media (max-width:900px){ /* Kopfzeile: die fünf Seitenverweise entfallen unter 900px (Entscheidung 06.09.2026; vorher 640px, aus der Zeit mit vier Verweisen). Gemessen: zwischen 640 und 880px brach die Zeile sonst um, der Kopf wurde 110px hoch. Die Fußzeile trägt alle fünf Verweise. */ .kopf-wege{display:none} .kern-raster{grid-template-columns:1fr;gap:28px;padding-inline:var(--rand)} .platz-bild-kern{height:auto;aspect-ratio:4/3;border-radius:var(--r-md)} .gabelung{grid-template-columns:1fr} .preis-karten{grid-template-columns:1fr} .angaben{grid-template-columns:1fr;gap:4px 0} .angaben dd{margin-bottom:14px} /* Ablaufblock: Blasen über dem Bild, ohne Verschränkung. */ .ablauf-blasen{grid-template-columns:1fr;gap:24px} .ablauf-wahl{margin-inline-end:0;align-items:flex-start} .ablauf-wahl li:nth-child(n){margin-inline-end:0} .schritt-zwei{grid-template-columns:1fr;gap:24px} .bild-links .schritt-text{order:0} /* Text zuerst, auch bei Bild-links */ .gruender-einzel{grid-template-columns:1fr} .gruender-einzel .platz-bild{max-width:520px} /* Pfadseiten — die Feinarbeit für schmale Bildschirme kommt später für die ganze Webseite; hier nur: nichts bricht. */ .pfad-kopf-zwei,.wir,.karussell-tafel,.aufteilung, .ergebnisfeld,.felder,.rechner-kosten .felder,.rechner-aufwand .felder, .kennzahl-kacheln, .leitbild,.leitbild-werte .werte-liste{grid-template-columns:1fr} /* M2 steht jetzt unter dem Text und ragt wie M1 beidseitig zur Blattkante. */ .pfad-kopf-zwei .platz-bild-quer{margin-inline:calc(-1 * var(--ausdehnung))} .wir .platz-bild{max-width:520px} /* Karussell: Tafel wieder als eigenes Raster (Bild über Text); Knöpfe und Zählung in einer Zeile direkt über dem Bild, unter den Reitern — dort stehen sie im DOM, und unter dem Text wären sie 300px vom Bild weg. */ .karussell-js .karussell-buehne{display:flex;flex-direction:column;gap:16px} .karussell-js .karussell-tafeln{display:grid} .karussell-js .karussell-tafel{display:grid;grid-column:auto;grid-row:auto;grid-template-columns:1fr;grid-template-rows:none;gap:20px} /* Eine Spalte in Leserichtung: Schrittname, Bild, Text zum Bild, Aufteilung. */ .karussell-js .karussell-titel, .karussell-js .karussell-bild .systembild, .karussell-js .bild-text, .karussell-js .karussell-bild .aufteilung{grid-column:auto;grid-row:auto} .karussell-js .bild-text{margin-top:0} .karussell-js .karussell-bild .aufteilung{margin-top:0} .karussell-js .blaettern-steuerung{display:flex;margin-top:0} .karussell-js .blaettern-knopf{margin-top:0} .gegenueber{--steg:24px} .abschluss{padding-block:80px 64px} } @media (max-width:640px){ :root{--rand:18px;--fs-6:29px;--fs-5:23px;--fs-4:19px;--kopf-hoehe:52px} .block{padding-block:56px} .block-gross{padding-block:72px} .block-eng{padding-block:40px} .kernzeile-block{padding-block:40px 32px} .schritt{padding-block:48px} .pfad-abschnitt{padding-block:44px} /* Unterseiten: Kopf 40/28; die Preiskarten bleiben wie die Reiter am Seitenrand eingerückt, nicht am Bildschirmrand. */ .seitenkopf{padding-block:40px 28px} /* Rechtstext: die Staffelung rückt zusammen, sonst nimmt jede der 24 Überschriften einen halben Bildschirm ein. */ .rechtstext h2{margin-top:40px;padding-top:20px} .rechtstext h3{margin-top:28px} /* Einwilligung auf dem Telefon: Der Streifen darf den Bildschirm nicht zustellen — gemessen 10.09.2026 waren es 582 von 812px, drei Viertel. Also kleinere Schrift, engere Abstände, die zwei Dienste untereinander und Ablehnen/Annehmen nebeneinander in einer Zeile (gleich breit, gleich hoch, wie am großen Bildschirm); "Auswahl speichern" darunter über die volle Breite, weil es zur Feinauswahl gehört. Als letzte Sicherung scrollt der Inhalt ab 72 % der Fensterhöhe, statt den Streifen wachsen zu lassen. */ .einwilligung-innen{padding:16px var(--rand) 18px;max-height:72dvh;overflow-y:auto} .einwilligung-titel{font-size:var(--fs-3)} .einwilligung-satz{margin-top:6px;font-size:var(--fs-2)} .einwilligung-knoepfe{gap:8px;margin-top:14px} .einwilligung-knoepfe .knopf-wahl{flex:1 1 0;min-width:0;padding-inline:10px} .einwilligung-knoepfe .knopf-wahl:nth-of-type(3){flex:1 0 100%} .einwilligung-dienste{grid-template-columns:1fr;margin-top:14px;gap:10px} .einwilligung-fuss{margin-top:10px;font-size:var(--fs-1)} .einwilligung-mehr{flex:1 0 100%;font-size:var(--fs-1)} .unterseite .preis-karten{margin-inline:0} .unterseite .preis-karte{padding:22px 18px} .unterseite .fragen{margin-inline:0} /* Blätter: innen 24px, außen 16px; nach Band und vor Fußzeile 44px. */ .blatt-text{padding-block:16px} .blatt-text > .breite{padding-block:24px} .pfad > .blatt-text:last-child{padding-bottom:44px} /* Flächen am Bildschirmrand ohne Rundung: eine abgeschnittene Rundung ist schlechter als keine (Kian 06.09.2026). */ .blatt-text > .breite,.werkzeug,.pfad .platz-bild-breit,.unterseite .platz-bild-breit,.pfad-kopf-zwei .platz-bild-quer{border-radius:0} .frage:nth-child(n+2):nth-last-child(n+2){margin-inline-start:16px} .frage:nth-child(n+3):nth-last-child(n+3){margin-inline-start:28px} .frage:nth-child(n+4):nth-last-child(n+4){margin-inline-start:36px} .werkzeug{padding:22px var(--ausdehnung)} .ergebnisfeld{padding:22px} .karussell-reiter{grid-template-columns:1fr;margin-inline:0} /* Umschalter der Preise: die Marke "Zwei Monate geschenkt" passt unter 640px nicht neben "Jährlich" in die Zeile — sie rückt in der Beschriftung in eine zweite Zeile unter das Wort (07.09.2026). */ .zeitraum-wahl label{flex-wrap:wrap} .zeitraum-vorteil{flex-basis:100%;margin-inline-start:18px} .knopf-gross{display:block;text-align:center} .kennzahl-kacheln{gap:28px} /* Kontaktblase im Fluss vor der Fußzeile, verdeckt nichts. */ .kontaktblase{position:static;max-width:none;margin:0 var(--rand) 40px} .kontaktblase-innen{position:static;margin-top:10px;min-width:0} /* Kopfzeile unter 640px: 52px, eine Zeile — Wortmarke, Kontakt, Anmelden, Knopf. Die Seitenverweise sind schon ab 900px ausgeblendet (oben). Unter etwa 340px darf sie umbrechen. */ .kopf-innen{gap:8px;flex-wrap:wrap;padding-block:6px} .wortmarke{gap:8px} .logo-platz{width:24px;height:24px;border-radius:6px} .kopf-rechts{gap:8px} .kopf-kontakt{gap:8px} .kontakt{font-size:14px;padding-block:8px} .kopf-rechts .knopf{padding:9px 10px;font-size:14px} .fuss-innen{padding-block:44px;gap:24px} } /* --- 20 Bewegung und Zeiger (08.09.2026) --------------------------------- Erste Bewegung der Webseite, nach emil-design-eng auf Kians Ansage vom 07.09.2026, seit Texte und Systembilder stehen. An Bedienelementen und Zustandswechseln; seit 08.09.2026 dazu das Einblenden beim Laden, der Versatz bei Blasen und Reitern und das Aufdecken am Scrollen (Abschnitt 20a; Regel in webseite-struktur.md, "Bewegung"). Werte ausschließlich aus tokens.css: --ease (0.19, 1, 0.22, 1) ist die starke Ausklingkurve für Druck, Ein- und Austritt; für Farbwechsel das eingebaute ease; --t-1 (180 ms) für Druck, Farben und Wechsel, --t-2 (300 ms) für die Bildvergrößerung, deren Schließen kürzer ist (--t-1) als das Öffnen. Nur benannte Eigenschaften, nie "all"; bewegt werden transform und opacity, Farben und Kanten wechseln weich; Schatten nur an der Gabelung (unten). Nichts erscheint aus dem Nichts: Anfang immer 0,97. Hover-Zustände, die Fläche oder Kante ändern, gelten nur mit Mauszeiger ((hover: hover) and (pointer: fine)): auf dem Telefon bliebe der Zustand nach dem Tippen kleben. Die Sprungmarke bleibt ohne Bewegung — sie kommt per Tastatur, und Tastaturauslösung wird nie animiert. Unter prefers-reduced-motion fällt jede Ortsveränderung weg (Druck, Skalierung, Winkel), Farbe und Deckkraft bleiben. Ganz unten, nach der Probe, damit die Regel zuletzt gilt. */ /* Farbe, Kante, Fläche wechseln weich. */ a,.kopf-wege a,.kontakt,.fuss-wege a,.fuss-sozial a,.wortmarke{transition:color var(--t-1) ease} .kontaktblase-innen li a{transition:background-color var(--t-1) ease,color var(--t-1) ease} .feld input,.feld textarea,.feld select{transition:border-color var(--t-1) ease} .ablauf-schritt{transition:border-color var(--t-1) ease,color var(--t-1) ease,transform var(--t-1) var(--ease)} .ablauf-schritt .ablauf-name{transition:text-decoration-color var(--t-1) ease} .ablauf-symbol,.reiter-symbol{transition:background-color var(--t-1) ease,color var(--t-1) ease} .karussell-reiter a{transition:background-color var(--t-1) ease,border-color var(--t-1) ease,color var(--t-1) ease,transform var(--t-1) var(--ease)} .frage summary,.kontaktblase summary{transition:background-color var(--t-1) ease,border-color var(--t-1) ease,transform var(--t-1) var(--ease)} .zeitraum-wahl label{transition:background-color var(--t-1) ease,color var(--t-1) ease,transform var(--t-1) var(--ease)} .zeitraum-wahl label::before{transition:background-color var(--t-1) ease,border-color var(--t-1) ease} .blaettern-knopf{transition:background-color var(--t-1) ease,color var(--t-1) ease,opacity var(--t-1) ease,transform var(--t-1) var(--ease)} .vg-knopf{transition:background-color var(--t-1) ease,color var(--t-1) ease} .knopf{transition:background-color var(--t-1) ease,border-color var(--t-1) ease,color var(--t-1) ease,transform var(--t-1) var(--ease)} /* Der Einwilligungsstreifen fährt beim Erscheinen von unten herein, 300 ms. Er ist kein Bereich des Hauptteils und trägt deshalb nicht das Einblenden aus Abschnitt 20a (10.09.2026). */ @keyframes einwilligung-herein{from{opacity:0;translate:0 100%}to{opacity:1;translate:none}} .einwilligung:not([hidden]){animation:einwilligung-herein var(--t-2) var(--ease) both} /* Gabelung: Schatten --sh-2 → --sh-3 bleibt mit Übergang (Kian 08.09.2026): zwei Elemente auf einer Seite, der wichtigste Klick der Startseite. audit_motion.py meldet den Schatten-Übergang (Zeichenleistung) — hier bewusst hingenommen; die inneren Ringe an Blasen, Reitern und Umschalter springen dagegen, nur ihre Kanten wechseln weich. */ .gabel-feld{transition:background-color var(--t-1) ease,box-shadow var(--t-1) ease,transform var(--t-1) var(--ease)} /* Druck: jede drückbare Fläche bestätigt ihn mit derselben Skalierung — 0,97 überall (Designvorgabe 10.09.2026: "gedrückt 97 %"; bis dahin 0,97 am Knopf und 0,98 an Blasen, Reitern, Pfeilen, Karten und Umschalter). Die Pfeilknöpfe der Bildvergrößerung sitzen über transform an ihrem Ort und bekommen keinen Druck, nur das X. */ .knopf:active{transform:scale(.97)} .blaettern-knopf:not(:disabled):active,.vg-schliessen:active,.ablauf-schritt:active,.karussell-reiter a:active,.frage summary:active,.kontaktblase summary:active,.zeitraum-wahl label:active,.kontaktwahl .knopf:active,.gabel-feld:active{transform:scale(.97)} .knopf-wahl:active{transform:scale(.97)} /* Wechsel blenden ein statt zu springen: die gewählte Einheit des Karussells (Bild, Text, Aufteilung), das Bild im Ablaufblock, die Beträge des gewählten Zeitraums auf den Preiskarten, die Zeilen im Ergebnisfeld der Rechner, die erst mit einem Wert erscheinen (13.09.2026). @starting-style greift beim Wechsel von display:none, ohne Skript; wo kein Skript läuft, wechselt nichts, und nichts blendet. */ .karussell-js .karussell-bild .systembild,.karussell-js .bild-text,.karussell-js .karussell-bild .aufteilung, .ablauf-js .ablauf-bild,.preisliste .nur-monat,.preisliste .nur-jahr, .ergebnis-wechsel{transition:opacity var(--t-1) var(--ease)} @starting-style{ .karussell-js .karussell-bild .systembild,.karussell-js .bild-text,.karussell-js .karussell-bild .aufteilung, .ablauf-js .ablauf-bild,.preisliste .nur-monat,.preisliste .nur-jahr, .ergebnis-wechsel{opacity:0} } /* Bildvergrößerung: materialisiert aus 0,97, Deckkraft 0 und Unschärfe 8px in --t-2 (apple-design: Unschärfe und Größe zusammen, damit die Fläche als Material ankommt, nicht als bloßes Blenden — Fassung "Glas", Kian 09.09.2026), der Hintergrund dunkelt mit; schließt in --t-1 (Austritt kürzer als Eintritt). Ursprung bleibt die Mitte — ein Modal hängt an keinem Auslöser (der Ursprung am geklickten Bild war Teil der Fassung "Tief", nicht gewählt). display und overlay wechseln erst am Ende (allow-discrete), sonst gäbe es keinen Austritt. will-change nur, solange der Dialog offen ist. */ .vergroesserung{opacity:1;transform:none;filter:blur(0);transition:opacity var(--t-2) var(--ease),transform var(--t-2) var(--ease),filter var(--t-2) var(--ease),display var(--t-2) allow-discrete,overlay var(--t-2) allow-discrete} .vergroesserung[open]{will-change:transform,opacity,filter} .vergroesserung:not([open]){opacity:0;transform:scale(.97);filter:blur(8px);transition-duration:var(--t-1)} .vergroesserung::backdrop{transition:background-color var(--t-2) var(--ease),display var(--t-2) allow-discrete,overlay var(--t-2) allow-discrete} .vergroesserung:not([open])::backdrop{background:rgba(42,8,7,0);transition-duration:var(--t-1)} @starting-style{ .vergroesserung[open]{opacity:0;transform:scale(.97);filter:blur(8px)} .vergroesserung[open]::backdrop{background:rgba(42,8,7,0)} } /* Hover nur mit Mauszeiger. Die Regeln standen bis 08.09.2026 bei ihren Elementen und sind hier gesammelt, damit die Bedingung einmal steht. */ @media (hover: hover) and (pointer: fine){ a:hover{color:var(--verweis-druck)} .wortmarke:hover{color:var(--ink)} .kopf-wege a:hover{color:var(--ink);text-decoration:underline} .kontakt:hover{color:var(--ink);text-decoration:underline} .systembild-oeffnen:hover{box-shadow:inset 0 0 0 2px var(--accent-line)} .knopf-akzent:hover{background:var(--accent-press);color:#fff} .knopf-ruhig:hover{border-color:var(--ink-2);color:var(--ink)} .ablauf-schritt:hover{border-color:var(--ink-2);color:var(--ink)} /* Karte beim Zeigen 4px nach oben, zweite Schattenebene ein (Designvorgabe "Tiefe und Bewegung", 10.09.2026). */ .gabel-feld:hover{background:var(--accent-press);box-shadow:var(--sh-3);color:#fff;transform:translateY(-4px)} .gabel-feld:hover .weiter{color:#fff} /* Fragen-Blasen werden leicht dunkler wie die Knöpfe (Kian 09.09.2026); die Kante wechselt nur bei geschlossenen, offene behalten --accent. */ .frage summary:hover{background:var(--wash)} .frage:not([open]) summary:hover{border-color:var(--ink-2)} /* Beide Wahlknöpfe hellen gleich auf — kein Unterschied zwischen Ablehnen und Annehmen, auch nicht beim Zeigen. */ .knopf-wahl:hover{background:var(--wash)} .einwilligung-mehr:hover{color:var(--ink)} .fuss-wege .wie-verweis:hover{color:var(--accent);text-decoration:underline} .fuss-wege a:hover{color:var(--accent);text-decoration:underline} .fuss-sozial a:hover{color:var(--accent);text-decoration:underline} .kontaktblase summary:hover{border-color:var(--ink-2)} .kontaktblase-innen li a:hover{background:var(--wash);color:var(--ink)} .vg-knopf:hover{color:var(--ink);background:var(--card)} /* Reiter: dunkleres Blau, Schrift bleibt weiß. Bis 09.09.2026 wurde die Schrift hier --ink — auf dem gewählten, dunklen Reiter unlesbar (Kian). */ .karussell-reiter a:hover{background:var(--accent-press);border-color:var(--accent-press);color:#fff} .blaettern-knopf:hover{color:var(--ink);background:var(--card)} .kontaktwege .knopf-ruhig:hover{border-color:var(--ink-2)} .kontaktwahl .knopf:hover{border-color:var(--ink-2)} .feld input:hover,.feld textarea:hover{border-color:var(--ink-2)} /* Nur der nicht gewählte Zeitraum hellt auf; der gewählte ist --ink mit weißer Schrift und würde mit --wash unlesbar (dieselbe Falle). */ .zeitraum-wahl input:not(:checked) + label:hover{background:var(--wash)} } /* --- 20a Einblenden beim Laden, Versatz, Aufdecken am Scrollen ------------- Bis 08.09.2026 in webseite-struktur.md ausgeschlossen und nur als Probe hinter Klassen an ; nach dem Ansehen von Kian am 08.09.2026 fest in die Seite genommen (Regel "Bewegung" dort, mit Datum). Seit 09.09.2026 langsamer — Kian: man sah sie kaum — und um das Einfliegen in 20b ergänzt. 1 und 2 spielen beim Laden ab, 3 hängt an der Lage des Elements im Fenster und braucht scroll-driven animations (Chrome, Edge, Safari 26; Firefox zeigt das Bild dann einfach). Unter prefers-reduced-motion bleibt nur ein Überblenden der Bereiche (unten). Die hochlaufenden Kennzahlen macht js/zahlen.js; es liest --t-4 aus. Kurven nach apple-design (09.09.2026, Kian): kritisch gedämpft, kein Überschwingen — --ease, nie --e-spring, weil hier nichts einer Geste folgt und Überschwingen ohne Schwung falsch wirkt. */ :root{--t-4:1s} /* die lange Zeit der Webseite — nicht in tokens.css, das ist das Mockup */ @keyframes einblenden{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}} @keyframes erscheinen{from{opacity:0}to{opacity:1}} @keyframes aufsteigen{from{opacity:.35;transform:translateY(32px)}to{opacity:1;transform:none}} @keyframes freilegen{from{clip-path:inset(0 0 35% 0)}to{clip-path:inset(0)}} /* 1 Einblenden beim Laden: jeder Bereich des Hauptteils steigt 12px auf und wird deckend, 1 s (--t-4); die ersten vier um 100 ms versetzt (der längste Versatz bleibt so in den 300 ms, die audit_motion.py zulässt). */ main > *{animation:einblenden var(--t-4) var(--ease) both} main > :nth-child(2){animation-delay:100ms} main > :nth-child(3){animation-delay:200ms} main > :nth-child(4){animation-delay:300ms} /* 2 Versatz: die Blasen des Ablaufblocks, die Blasen der Fragen und die Reiter des Karussells erscheinen nacheinander, je 90 ms später, 600 ms (--t-3). Mit scroll-driven animations kommt in 20b das Einfliegen als zweite Animation dazu. */ :is(.ablauf-wahl li,.fragen .frage,.karussell-reiter li){animation:einblenden var(--t-3) var(--ease) both;animation-delay:calc((var(--n,1) - 1) * 90ms)} .ablauf-wahl li:nth-child(1),.fragen .frage:nth-child(1),.karussell-reiter li:nth-child(1){--n:1} .ablauf-wahl li:nth-child(2),.fragen .frage:nth-child(2),.karussell-reiter li:nth-child(2){--n:2} .ablauf-wahl li:nth-child(3),.fragen .frage:nth-child(3),.karussell-reiter li:nth-child(3){--n:3} .fragen .frage:nth-child(4){--n:4} .fragen .frage:nth-child(5){--n:5} .fragen .frage:nth-child(6){--n:6} .fragen .frage:nth-child(7){--n:7} .fragen .frage:nth-child(8){--n:8} /* 3 Am Scrollen: die drei Systembilder im Bildabschnitt der Startseite steigen beim Hereinscrollen 32px auf und werden deckend; das Fotoband B1 und das Motivbild M3 (Über uns) werden von unten freigelegt. Gebunden an die Lage im Fenster (view()), über den ganzen Eintritt (0 bis 100 Prozent; bis 09.09.2026: 5 bis 60). */ .schritt .systembild{animation-name:aufsteigen;animation-timing-function:linear;animation-fill-mode:both;animation-duration:auto;animation-timeline:view();animation-range:entry 0% entry 100%} :is(.bildband,.motiv .platz-bild){animation-name:freilegen;animation-timing-function:linear;animation-fill-mode:both;animation-duration:auto;animation-timeline:view();animation-range:entry 0% entry 100%} /* 4 Scrollkante der Kopfzeile (09.09.2026, Fassung "Glas"): statt der 1px-Linie ein weicher Schatten unter dem Kopf, der mit den ersten 64px Scrollweg erscheint — nur dort, wo Inhalt unter dem Kopf liegt (apple-design: Scrollkante, kein harter Teiler). Der Schattenton ist der der Token (rgba 42,8,7 — bis 10.09.2026 der kühle Ton 9,25,60). Ohne scroll-driven animations steht er halb. */ .kopf::after{ content:"";position:absolute;left:0;right:0;top:100%;height:20px; background:linear-gradient(rgba(42,8,7,.10),rgba(42,8,7,0)); pointer-events:none;opacity:.5; } @supports (animation-timeline: scroll()){ .kopf::after{opacity:1;animation:kante-zeigen linear both;animation-timeline:scroll();animation-range:0 64px} } @keyframes kante-zeigen{from{opacity:0}to{opacity:1}} /* --- 20b Einfliegen am Scrollen (09.09.2026, Kian) ------------------------- Blätter und Blasen kommen beim Hereinscrollen von der Seite: 80px Weg, Deckkraft 0 → 1, Kurve linear — am Scrollen gebunden verteilt linear den Weg gleichmäßig über die Strecke; --ease hatte ihn im ersten Fünftel erledigt, und man sah ihn kaum (Kian, 09.09.2026 abends: zweite Runde, vorher 64px, --ease und cover 0–20 %). Blätter: die weißen Textblätter der Pfad- und Unterseiten (.blatt-text > .breite), die Werkzeugflächen Vergleich und Rechner (.werkzeug), die drei Preiskarten, die zwei Gabelungsfelder. Blasen: Ablaufblock, Fragen (Startseite, Pfadseiten, FAQ), Karussell- Reiter. Seite: ungerade von links, gerade von rechts; von dreien in einer Reihe das mittlere 40px von unten; die Ablauf-Blasen alle von links, weil sie links vor dem Bild stehen; die Gabelungsfelder von außen nach innen. Gebunden an die Lage im Fenster: view(), cover 0% → cover 40%. Fertig, wenn das Element zwei Fünftel der Fensterhöhe weit drin ist — so ist der Weg auch für eine 60px-Blase lang genug zum Sehen, und alles erreicht sein Ziel, weil unter jedem Element noch die Fußzeile kommt (416px breit, 501px schmal; das letzte Blatt liegt damit bei über 50 %). Beim Zurückscrollen denselben Weg zurück (apple-design: ein Weg hin und zurück). Was beim Laden schon im Fenster steht, ist am Ziel und blendet nur mit seinem Bereich ein. Bewegt wird translate (die Eigenschaft), damit das Drücken (transform: scale an Gabelung, Reitern) daneben weitergeht; am Ziel translate:none, damit kein Stapelkontext bleibt. Die Blasen tragen ihr Einblenden aus 20a als zweite Animation — deren Deckkraft gewinnt (sie steht zuletzt), also fliegen Blasen deckend, Blätter blenden mit. main bekommt overflow-x:clip, damit ein Blatt von rechts auf dem Telefon keinen Rollbereich aufmacht; clip bildet keinen Scroll-Container, alles andere bleibt. Ohne scroll-driven animations (Firefox) steht alles still — @supports. */ @keyframes einflug-links{from{opacity:0;translate:-80px 0}to{opacity:1;translate:none}} @keyframes einflug-rechts{from{opacity:0;translate:80px 0}to{opacity:1;translate:none}} @keyframes einflug-unten{from{opacity:0;translate:0 48px}to{opacity:1;translate:none}} @supports (animation-timeline: view()){ main{overflow-x:clip} /* Die Strecke steht als Länge, nicht als Prozentsatz (Kian 11.09.2026). "cover 40 %" heißt: 40 Prozent aus Elementhöhe PLUS Fensterhöhe. Bei einem normalen Blatt sind das rund 500px Scrollweg — bei dem einen langen Blatt der Datenschutzerklärung (rund 12.000px) waren es über 5.000px, und so lange stand es halbdurchsichtig und verschoben da und verschwamm oben mit dem Grund. Mit einer festen Länge verhält sich ein hohes Blatt wie ein niedriges: nach 480px Scrollweg steht es. */ :is(.blatt-text > .breite,.werkzeug,.preis-karte,.gabel-feld){--flug:einflug-links;animation-name:var(--flug);animation-duration:auto;animation-timing-function:linear;animation-fill-mode:both;animation-timeline:view();animation-range:cover 0 cover 480px} :is(.ablauf-wahl li,.fragen .frage,.karussell-reiter li){--flug:einflug-links;animation-name:var(--flug),einblenden;animation-duration:auto,var(--t-3);animation-timing-function:linear,var(--ease);animation-fill-mode:both,both;animation-delay:0s,calc((var(--n,1) - 1) * 90ms);animation-timeline:view(),auto;animation-range:cover 0 cover 480px,normal} main > .blatt-text:nth-child(even) > .breite,main > :nth-child(even) .werkzeug,.gabel-feld:nth-child(2),.fragen .frage:nth-child(even),.preis-karte:nth-child(3),.karussell-reiter li:nth-child(3){--flug:einflug-rechts} .preis-karte:nth-child(2),.karussell-reiter li:nth-child(2){--flug:einflug-unten} } /* Weniger Bewegung: keine Ortsveränderung, Farbe und Deckkraft bleiben. Die Bereiche blenden beim Laden nur noch über (apple-design: Überblenden statt nichts), alles andere aus 20a und 20b steht. */ @media (prefers-reduced-motion: reduce){ .knopf:active,.blaettern-knopf:not(:disabled):active,.vg-schliessen:active,.ablauf-schritt:active,.karussell-reiter a:active,.frage summary:active,.kontaktblase summary:active,.zeitraum-wahl label:active,.gabel-feld:active{transform:none} .vergroesserung,.vergroesserung:not([open]){transform:none} @starting-style{ .vergroesserung[open]{transform:none} } .frage summary::after,.kontaktblase summary::after{transition:none} .einwilligung:not([hidden]){animation:erscheinen var(--t-2) ease both} main > :nth-child(n){animation:erscheinen var(--t-3) ease both} :is(.ablauf-wahl li,.fragen .frage,.karussell-reiter li,.schritt .systembild,.bildband,.motiv .platz-bild,.blatt-text > .breite,.werkzeug,.preis-karte,.gabel-feld){animation:none} .vergroesserung,.vergroesserung:not([open]){filter:none} @starting-style{ .vergroesserung[open]{filter:none} } } /* Material zurücknehmen, wenn das System es will (apple-design, Abschnitt 14): ohne Durchsicht werden Kopfzeile, Kontaktblase und Dialoghintergrund wieder deckend mit Linie; bei mehr Kontrast dazu eine Kante in --ink-2. */ @media (prefers-reduced-transparency: reduce){ .kopf{background:var(--paper);border-bottom-color:var(--line);-webkit-backdrop-filter:none;backdrop-filter:none} .kopf::after{display:none} .kontaktblase summary,.kontaktblase-innen{background:var(--card);-webkit-backdrop-filter:none;backdrop-filter:none} .vergroesserung::backdrop{background:rgba(42,8,7,.85);-webkit-backdrop-filter:none;backdrop-filter:none} } @media (prefers-contrast: more){ .kopf{background:var(--card);border-bottom-color:var(--ink-2);-webkit-backdrop-filter:none;backdrop-filter:none} .kopf::after{display:none} .kontaktblase summary,.kontaktblase-innen{background:var(--card);border-color:var(--ink-2);-webkit-backdrop-filter:none;backdrop-filter:none} }