/* Hallmark · page css · macrostructure: Workbench · theme: custom "ME+TE emerging solutions" * Reihenfolge: Reset → Typografie → Primitives → Buttons → Navigation → Sektionen → Zeichnung → Responsive → Bewegung * Keine Farbe und keine Schriftfamilie ohne Token. Kein transition-all. Layout nie per JS. */ /* ---------- Reset ---------- */ *,*::before,*::after{box-sizing:border-box} html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; /* Klebender Versatz = tatsaechliche Kopfhoehe + eine Luftstufe. --nav-h wird im Navigationsteil dieses Blattes gesetzt; kein Magic Number mehr, kein Ueberdecken. */ scroll-padding-top:calc(var(--nav-h) + var(--space-sm)); overflow-x:clip; /* clip, nicht hidden: sticky/fixed bleiben intakt */ background:var(--paper); } body{ margin:0; overflow-x:clip; background:var(--paper); color:var(--ink); font-family:var(--font-body); font-size:var(--text-body); line-height:1.6; font-synthesis-weight:none; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; } img,svg{max-width:100%;display:block} h1,h2,h3,h4,p,ul,ol,dl,figure,blockquote{margin:0} ul,ol{padding:0;list-style:none} button,input,select,textarea{font:inherit;color:inherit} a{color:inherit} /* ---------- Typografie ---------- */ h1,h2,h3{font-family:var(--font-display);font-weight:700;font-style:normal;line-height:1.04;letter-spacing:-0.022em;overflow-wrap:anywhere;min-width:0;text-wrap:balance} h1{font-size:var(--text-display);letter-spacing:-0.032em} h2{font-size:var(--text-h2);max-width:24ch} h3{font-size:var(--text-h3);line-height:1.25;letter-spacing:-0.012em} /* Zeilenlänge Fließtext: 60 ch bei 18 px Grundschrift. Gemessen ergeben 60 ch 660 px und damit 71–76 Zeichen je Zeile (EN/DE) — im Richtwert 60–80. Vorher 66 ch = 726 px = bis 84 Zeichen (EN) bzw. 87 (DE). */ p{max-width:60ch;text-wrap:pretty} strong,b{font-weight:600} .lede{font-size:var(--text-lede);color:var(--ink-soft);max-width:58ch;line-height:1.5;text-wrap:pretty} .meta{font-family:var(--font-mono);font-size:var(--text-meta);letter-spacing:0.08em;text-transform:uppercase;color:var(--ink-muted)} .rail{font-family:var(--font-mono);font-size:var(--text-meta);letter-spacing:0.1em;text-transform:uppercase;color:var(--accent);display:block;margin-bottom:var(--space-sm)} .small{font-size:var(--text-small)} .muted{color:var(--ink-soft)} a.link{color:var(--accent-deep);text-decoration:underline;text-underline-offset:2px;text-decoration-thickness:1px} a.link:hover{text-decoration-thickness:2px} /* Semantisch h2 (Sprung h1 -> h2 statt h1 -> h3), optisch eine Stufe kleiner. */ .h-sub{font-size:var(--text-h3);line-height:1.25;max-width:34ch;text-wrap:balance} /* Deutsche Fassung: echte Silbentrennung nur im Fließtext (nie in Beschriftungen, Knöpfen oder Navigation). Mindestwortlänge 8 Zeichen, mindestens 4 Zeichen vor und nach dem Trennstrich — verhindert sinnlose Trennungen kurzer Wörter. Verringert die ausgefranste rechte Kante und die Zeilenlängen-Spitzen. */ [lang="de"] p,[lang="de"] dd,[lang="de"] .prose li,[lang="de"] .files li span,[lang="de"] .verdict ol li{hyphens:auto;hyphenate-limit-chars:8 4 4} /* Rhythmus: Ueberschrift->Absatz mit demselben Abstand wie im Fliesstext (.prose > * + *), hebt die uneinheitlichen 6 px der Rechtsseiten auf, sobald die Inline-Werte dort entfallen. */ .h-sub + p{margin-top:var(--space-md)} /* ---------- Primitives ---------- */ .wrap{width:100%;max-width:var(--container);margin-inline:auto;padding-inline:var(--gutter)} .wrap-narrow{width:100%;max-width:var(--container-narrow);margin-inline:auto;padding-inline:var(--gutter)} .section{padding-block:clamp(var(--space-2xl),8.5vw,var(--space-4xl));border-top:1px solid var(--line)} .section:first-of-type{border-top:0} .stack>*+*{margin-top:var(--space-sm)} .stack-lg>*+*{margin-top:var(--space-md)} .stack-xl>*+*{margin-top:var(--space-xl)} .rule{height:1px;background:var(--line);border:0} .sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap} .skip{position:absolute;left:var(--space-sm);top:-64px;z-index:400;padding:var(--space-xs) var(--space-sm);background:var(--ink);color:var(--paper);border-radius:var(--radius-ui);text-decoration:none;transition:top var(--dur-1) var(--ease-out)} .skip:focus{top:var(--space-sm)} :focus-visible{outline:2px solid var(--focus);outline-offset:3px;border-radius:var(--radius)} /* ---------- Buttons ---------- */ .btn{ display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2xs); min-height:48px;max-width:100%;padding:12px var(--space-md);line-height:1.35;white-space:normal;text-align:center; font-family:var(--font-body);font-size:var(--text-small);font-weight:600; border:1px solid transparent;border-radius:var(--radius-ui);text-decoration:none; cursor:pointer;transition:background-color var(--dur-2) var(--ease-out),color var(--dur-2) var(--ease-out),border-color var(--dur-2) var(--ease-out),transform var(--dur-1) var(--ease-out); } .btn-primary{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)} .btn-primary:hover{background:var(--accent-deep);border-color:var(--accent-deep)} .btn-primary:active{transform:translateY(1px)} .btn-quiet{background:transparent;border-color:var(--line-strong);color:var(--ink)} .btn-quiet:hover{background:var(--paper-2);border-color:var(--ink)} .btn-quiet:active{transform:translateY(1px)} .btn[disabled],.btn[aria-disabled="true"]{opacity:.55;cursor:not-allowed} .btn[disabled]:hover,.btn[aria-disabled="true"]:hover{background:var(--paper-2);border-color:var(--line-strong);transform:none} .btn-row{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-xs)} .btn .arw{flex:none;font-family:var(--font-mono);font-size:.95em} /* Paired actions share a footprint; narrow layouts stack with aligned edges. */ .btn-row:has(> .btn + .btn){display:grid;grid-template-columns:repeat(2,minmax(0,1fr));max-width:36rem;align-items:stretch} .btn-row:has(> .btn + .btn) > .btn{width:100%;height:100%} @media(max-width:560px){ .btn-row:has(> .btn + .btn){grid-template-columns:minmax(0,1fr)} .btn-row > .btn,.form-foot > .btn,.assess-teaser > .btn{width:100%} } /* ---------- Navigation ---------- * Umbau Runde 1, Strang Header. Ordnung: Marke links, alles Weitere rechts. * Ein Mittel (--nav-row:48px) fuer jeden Tipp-Kasten (Navigationseintrag, CTA, Burger), * ein Mittel (--nav-h:72px) fuer die Kopfhoehe. Kein Layout per JS, keine neue Farbe, * keine neue Schrift. Die Typografie der Wortmarke ist fix (ARBEITSPLAN §3) und unberuehrt. * ------------------------------------------------------------------------------------ */ :root{ --nav-h:72px; /* Kopfhoehe, Bezug fuer scroll-padding-top */ --nav-row:48px; /* gemeinsame Kastenhoehe aller Bedienelemente der Kopfzeile */ /* Wortmarke: Titelform, Space Grotesk 400, 1.3rem (Kundementscheidung „Fassung 2"). Kapphoehe bei 1.3rem = 15 px (im Browser gemessen); die sichtbare Pruefreihe wird bewusst KLEINER gesetzt als die Kapphoehe (12 px), weil sie gegen die leichte Schrift sonst zu kraeftig wirkt. --mark-cap bleibt das Ausrichtungsziel (Kapphoehenmitte). */ --mark-cap:15px; /* Kapphoehe der Wortmarke bei 1.3rem/Gewicht 400 — im Browser gemessen */ --mark-bar:12px; /* sichtbare Pruefreihe = 2/3 der Elementhoehe */ --mark-icon-h:calc(var(--mark-bar) * 1.5); /* --- AIDLuna-Massstab (gemessen an aidluna-web/dist/_astro/analyse.DIFj-NBl.css) ---- Dort: .nav__link 15,5 px / Gewicht 500 / min-height 44 px, Liste gap 20 px, `.brand small` mono 13 px / .12em / Versalien / gedaempft. Beide neuen Werte bleiben AUS DER SKALA ABGELEITET (kein freier Wert): 15,5 px = ein halber Punkt unter --text-small, 20 px = --space-sm + --space-3xs. */ --nav-fs:calc(var(--text-small) - 0.5px); /* 15,5 px */ /* Abstand der Wege. AIDLuna-Massstab war 20 px (--space-sm + --space-3xs). Mit dem vereinheitlichten Kopf traegt JEDE Seite jetzt fuenf Hauptziele plus Sprachumschalter und Handlungsaufruf in einer Reihe (vorher je Seite zwei bis fuenf). Gemessen braucht die deutsche Reihe damit 1145 px, im Satzspiegel stehen 1116 px zur Verfuegung. Der Abstand faellt deshalb auf eine Skalenstufe zurueck (16 px = --space-sm, kein freier Wert); die Marke behaelt ihren Rand, der Umschaltpunkt bleibt bei 1221 px. */ --nav-gap:var(--space-sm); /* 16 px */ --nav-link-h:44px; /* Tippflaeche der Wege (AIDLuna) */ --mark-pos-fs:13px; /* Positionierungszeile der Marke */ } .nav{ position:sticky;top:0;z-index:var(--z-nav); /* AIDLuna: 90 % Papier + Weichzeichner (dort blur(8px)), darunter die Haarlinie. */ background:color-mix(in srgb,var(--paper) 90%,transparent); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); border-bottom:1px solid var(--line); } /* Rueckfall fuer Browser OHNE backdrop-filter: dann deckende Flaeche — sonst scheint der Seiteninhalt ungefiltert durch die 90-%-Flaeche und die Leiste verliert ihre Kante. */ @supports not ((backdrop-filter:blur(8px)) or (-webkit-backdrop-filter:blur(8px))){ .nav{background:var(--paper)} } /* Beim Scrollen legt sich ein Hauch Schatten unter die Leiste, damit sie als eigene Schicht ueber dem Inhalt liest statt als Trennlinie. Rein deklarativ (scroll-Timeline), ohne Layoutwirkung — kein CLS. Ohne Unterstuetzung bleibt der Zustand "gescrollt". */ @supports (animation-timeline: scroll()){ @media (prefers-reduced-motion:no-preference){ .nav{animation:nav-lift linear both;animation-timeline:scroll();animation-range:0 72px} @keyframes nav-lift{from{box-shadow:0 0 0 transparent}to{box-shadow:var(--shadow-1)}} } } @media (prefers-reduced-motion:reduce){ .nav{box-shadow:var(--shadow-1)} } .nav .bar{display:flex;align-items:center;justify-content:space-between;gap:var(--space-md);min-height:var(--nav-h)} .mark{ position:relative; /* Bezug fuer die Positionierungszeile */ display:flex;align-items:baseline;gap:var(--space-2xs);flex:none; text-decoration:none;line-height:1;padding-block:var(--space-xs); /* Trefferflaeche = 48 px */ /* Zusaetzlicher Boden: die Positionierungszeile liegt AUSSERHALB des Flusses in diesem Platz, damit sie die Breite des Markenblocks nicht veraendert (gemessen sonst 522 px statt 271 px ueber flex-basis:100%). */ padding-bottom:calc(var(--space-xs) + var(--mark-pos-fs)); } /* Wortmarke und Zusatz. ACHTUNG: Die frühere Festlegung „Kopfzeile ist die Typografie-Referenz, der Lockup wird angepasst" ist am 12.09. auf Kundenwunsch UMGEDREHT: die Kopfzeile folgt jetzt dem gewählten Logo-Lockup (Titelform, ein Farbton, leichter Schnitt). Die H1/H2-Typografie der Seiten ist davon nicht berührt. */ .mark strong{font-family:var(--font-display);font-size:1.3rem;font-weight:400;letter-spacing:0.01em} /* „Consulting" steht in derselben Schrift und Groesse wie der Name — wie im gewaehlten Logo-Lockup (Titelform, ein Farbton, leichter Schnitt). Vorher: IBM Plex Mono, Versalien, Akzentfarbe. Das war die zweite Farbe und die zweite Schrift im Markenblock und ließ Schwarz und Stahlblau auf hellem Grund wie ein Versehen wirken (Kundenhinweis). */ .mark > span{font-family:var(--font-display);font-size:1.3rem;font-weight:400;letter-spacing:0.01em;color:var(--ink-muted);margin-left:.22em} /* Das Plus im Namen traegt die Akzentfarbe (Kundenwahl 14.09.2026: „Variante 2 · M1 mit W2"). Eigene Regel, weil .mark > span nur DIREKTE Kinder trifft — das Plus sitzt in . */ .mark .mark-plus{color:var(--accent)} /* Positionierungszeile im Markenblock — AIDLuna-Massstab (`.brand small`): mono 13 px, letter-spacing .12em, Versalien, gedaempft, Gewicht 400. Der Wortlaut stammt aus dem og:title der jeweiligen Sprachfassung (keine neue Behauptung, keine Kennzahl). Sie sitzt aus dem Fluss genommen in der Bodenluft des Markenblocks: dadurch bleibt die Leiste in einer Zeile und die Wortmarke behaelt ihren Platz unveraendert. */ .mark small{ position:absolute;left:0;bottom:var(--space-xs); font-family:var(--font-mono);font-size:calc(var(--mark-pos-fs) - 1.5px);font-weight:400; letter-spacing:.04em;color:var(--ink-muted); white-space:nowrap;line-height:1; } /* B2-Bildmarke in Kopf- und Fußzeile (KRITERIEN §6, B2/BEGRUENDUNG §2). Geometrie unveraendert: viewBox -16 -16 112 96, 1u Freiraum rundum, Strichbreite und Abstand = u. Groesse ausschliesslich hier, keine neue Farbe, keine neue Schrift. Optisches Ziel (KRITERIEN §6.6): die Mitte der sichtbaren Pruefreihe sitzt auf der Kapphoehenmitte der einzeiligen Wortmarke "ME+TE", nicht auf der Mitte des zweizeiligen Textblocks. Die Flaeche ist im viewBox oben und unten gleich gepolstert, also ist die Elementmitte = Mitte der sichtbaren Striche. align-self:baseline legt die Unterkante auf die Schriftlinie; da das Element hoeher ist als die Kapphoehe (die 1u-Polsterung wird mitgerechnet), hebt translateY die Mitte auf die Kapphoehenmitte. Messbelege: tools-Bericht /pruefung. */ .mark-icon{ flex:none; height:var(--mark-icon-h); /* sichtbare Pruefreihe = 2/3 der Elementhoehe = 14 px = Kapphoehe */ width:auto; align-self:baseline; color:var(--ink); transform:translateY(calc((var(--mark-icon-h) - var(--mark-cap)) / 2)); /* Mitte auf Kapphoehenmitte */ } /* Die Fusszeile setzt fuer alle Links .foot a{align-items:center;min-height:44px}. Fuer die Marke muss die Zuordnung wie in der Kopfzeile baseline bleiben, sonst sitzt die Bildmarke gegenüber der Wortmarke tiefer (gemessen 4,78 px). min-height:44px bleibt unberuehrt. */ .foot a.mark{align-items:baseline;padding-block:0} /* Die frueher hier gesetzte Randspalte (margin-left:--space-lg) war ein zweiter Abstand neben dem gap der Leiste. Mit fuenf Hauptzielen auf jeder Seite kostet sie den fehlenden Platz; der Abstand der Leiste (.nav .bar gap:--space-md) bleibt als einziger Trennwert zwischen Marke und Wegen. */ .navlinks{display:flex;align-items:center;gap:var(--nav-gap);margin-left:0} /* Nur die Wege tragen den Hover-Zustand. Der CTA ist ein .btn und bleibt ein Knopf (48 px, kein Unterstrich) — vorher zog ihn .navlinks a auf 44 px und haengte ihm eine 2-px-Unterkante an, der wichtigste Weg sah aus wie ein Navigationseintrag. AIDLuna-Massstab: 15,5 px / Gewicht 500 / min-height 44 px / gap 20 px, Ruhefarbe gedaempft, beim Ueberfahren Tinte — OHNE Fuellflaeche (dort nur color-Wechsel). */ .navlinks a:not(.btn){ display:inline-flex;align-items:center;justify-content:center; min-height:var(--nav-link-h);min-width:var(--nav-link-h);padding-inline:0; border-radius:var(--radius-ui);font-size:var(--nav-fs);font-weight:500; text-decoration:none;white-space:nowrap;color:var(--ink-soft); transition:color var(--dur-2) var(--ease-out); } .navlinks a:not(.btn):hover{color:var(--ink)} /* Aktueller Abschnitt in der Akzentfarbe — rein deklarativ ueber das statische Attribut aria-current="page" (kein Skript, keine Messung im Browser). AIDLuna: `.nav__link[aria-current=page]{color:var(--accent)}`. */ .navlinks a[aria-current="page"]{color:var(--accent)} /* Zweite, LEISE Aktion: der Sprachumschalter. Traegt dieselben Knopfklassen wie der Handlungsaufruf (.btn .btn-quiet), damit die Rangfolge sichtbar ist — kraeftiger blauer Aufruf rechts, ruhiger umrandeter Umschalter davor. Nur Groesse/Schrift werden hier auf den Kopfzuschnitt gebracht; Rahmen und Hover kommen aus .btn-quiet. */ .nav .lang{ min-width:var(--nav-link-h);padding-inline:var(--space-sm); font-family:var(--font-mono);font-size:var(--text-meta);letter-spacing:.12em; } /* Menue-Ausloeser. EIN Weg auf allen zehn Seiten: in
— rein deklarativ, kein Skript. Der Ausloeser bleibt sichtbar (die Flaeche liegt darunter), also ist das Menue immer wieder schliessbar. Mindestens 48 x 48 px Trefferflaeche. */ .burger{ display:none;align-items:center;gap:var(--space-2xs); min-height:var(--nav-row);min-width:var(--nav-row);padding:0 var(--space-sm); background:transparent;border:1px solid var(--line-strong);border-radius:var(--radius-ui); cursor:pointer;font-size:var(--text-small);font-weight:600;color:var(--ink); transition:background-color var(--dur-2) var(--ease-out),border-color var(--dur-2) var(--ease-out); } .menu{display:none} .menu>.burger{display:inline-flex;list-style:none} .menu>.burger::-webkit-details-marker{display:none} .menu>.burger::marker{content:""} /* Schmale Geraete: die Wege wandern in den Ausloeser. */ @media (max-width:820px){ .menu{display:block} } /* Umschaltpunkt der Kopfzeile — EINE Wahrheit fuer beide Sprachen. Vorher stand die Leiste ab 821 px (EN) bzw. 1081 px (DE) als Reihe und lief dabei aus dem 1180-px-Satzspiegel heraus: gemessen de/index.html @1440 = 100 px Ueberbreite (bar.scrollWidth 1280 gegen clientWidth 1180), EN hatte nur 17 px Luft. Mit dem AIDLuna-Abstand (20 px) braucht die deutsche Reihe 1095 px; im Satzspiegel stehen abzueglich der Randspalte 1116 px zur Verfuegung (siehe padding-regel unten). Deshalb: die Reihe erscheint erst, wenn sie sicher passt (>= 1221 px), darunter uebernimmt das geprueftete
. Kein Ueberlauf, ein Mechanismus. Begruendung und Rohwerte im Bericht. */ @media (max-width:1220px){ .nav .navlinks{display:none} .nav .menu{display:block} } /* Der Kopf nutzt ab dem Umschaltpunkt eine um eine Stufe engere Randspalte als der Satzspiegel (.wrap: --gutter, hier bis 56 px). Nur so bleibt die deutsche Reihe in einer Zeile; die Marke ruecken damit 24 px nach aussen — bewusst, sichtbar gemeldet. */ @media (min-width:1221px){ .nav .bar{padding-inline:var(--space-lg);flex-wrap:wrap;row-gap:0} /* --nav-h waechst mit: html{scroll-padding-top} (Zeile 12) und die Mindesthoehe der Leiste haengen daran — der Sprungmarken-Versatz stimmt damit automatisch. */ :root{--nav-h:143px} .nav .nav-actions{display:flex;align-items:center;gap:var(--space-sm);margin-left:auto} /* Zweite Zeile: die Hauptziele linksbuendig unter der Haarlinie. */ .nav .navlinks{order:5;flex-basis:100%;justify-content:flex-start;gap:2.4rem;margin-left:0; border-top:1px solid var(--line);padding-top:var(--space-xs);padding-bottom:var(--space-2xs)} /* Fassung C: groessere Marke. Die Namen sind jetzt eine Ebene groesser, deshalb waechst auch die Bildmarke mit (20 px sichtbare Pruefreihe) und das Ausrichtungsziel --mark-cap auf die gemessene Kapphoehe der 1.9rem-Schrift. */ .nav .mark strong,.nav .mark > span{font-size:1.9rem} .nav .mark small{font-size:12px} /* WICHTIG: --mark-icon-h NICHT ueber --mark-bar steuern. --mark-icon-h ist auf :root als calc(var(--mark-bar) * 1.5) definiert und wird dort berechnet; ein spaeteres --mark-bar auf .nav erreicht diese Rechnung nicht (gemessen: Bildmarke blieb 18 px statt 30). Deshalb hier den Endwert direkt setzen. */ .nav{--mark-icon-h:30px;--mark-cap:22px} } .burger:hover{background:var(--paper-2);border-color:var(--ink)} .burger[aria-expanded="true"],.menu[open]>.burger{background:var(--paper-3);border-color:var(--ink)} .burger .bars{display:grid;gap:4px;width:18px} .burger .bars i{display:block;height:1.5px;background:currentColor} /* ---------- Geoeffnetes Menue: EINE Flaeche, EIN Auftritt ---------- * Auf allen elf Seiten derselbe Mechanismus (
+ ), * dieselbe Struktur (Blattkopf -> Hauptziele -> Sekundaergruppe | fester Fuss: Sprachsegment -> CTA). * Die Gliederung leisten Haarlinien (--line, dasselbe Motiv wie Bildmarke und Pruefmatrix), * die Abstaende ausschliesslich --space-*, die Typografie nur aus den Schrift- und * Textstufen-Token. Keine neue Farbe, keine neue Familie, kein Layout per JS. * * F-02: Das Panel ist jetzt eine Spalte aus ZWEI Bereichen — oben die scrollende * Linkliste (.drawer-in), unten der feste Panel-Fuss (.drawer-foot). Sprachumschalter * und Handlungsaufruf stehen damit bei JEDER Fensterhoehe im Bild, unabhaengig davon, * wie hoch die Linkliste ist; nur die Linkliste scrollt. Am oberen Rand des festen * Fusses liegt eine feine Verlaufskante (::before), die den abgeschnittenen naechsten * Eintrag andeutet — kein verstecktes Scrollen. Die Flaeche liegt unter der Leiste, * damit der Ausloeser sichtbar bleibt und man das Menue immer wieder schliessen kann. */ .drawer{ position:absolute;top:100%;left:0;right:0;z-index:1; background:var(--paper);border-top:1px solid var(--line);border-bottom:1px solid var(--line); box-shadow:var(--shadow-2); display:flex;flex-direction:column; /* Blattkopf/Links oben, Fuss unten */ max-height:calc(100vh - var(--nav-h)); max-height:calc(100dvh - var(--nav-h)); min-height:calc(100vh - var(--nav-h)); min-height:calc(100dvh - var(--nav-h)); overflow:hidden; /* der Fuss soll nie mitscrollen */ animation:drawer-in var(--dur-2) var(--ease-out) both; } /* Ruhiges Aufblenden, kurz, keine Feder, kein Bounce (220 ms, reine Deckkraft + 6 px Hub). */ @keyframes drawer-in{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}} @media (prefers-reduced-motion:reduce){.drawer{animation:none}} .drawer[hidden]{display:none} /* Scrollbereich: Blattkopf und Linkliste. min-height:0 erlaubt dem Flex-Kind, unter seine Inhaltshoehe zu schrumpfen — nur so greift der interne Lauf. */ .drawer .drawer-in{ display:grid;padding-block:var(--space-lg); flex:1 1 auto;min-height:0; /* nimmt den Rest, kann schrumpfen */ overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain; scrollbar-width:thin; } /* Fester Panel-Fuss AUSSERHALB des Scrollbereichs (robuster als position:sticky, weil er nie von Inhalt ueberlagert oder mitgescrollt werden kann). Traegt die Kante und die Verlaufsandeutung des Scrollens. */ .drawer-foot{ position:relative;flex:none; border-top:1px solid var(--line-strong);background:var(--paper); } /* Sichtbarer Scroll-Hinweis: feine Verlaufskante oberhalb des Fusses. Sie verdeckt den abgeschnittenen naechsten Eintrag nicht, sondern blendet ihn weich in die Papierflaeche aus — man sieht, dass unter der Kante noch etwas liegt. Rein dekorativ, keine Maus faengt sie ab. */ .drawer-foot::before{ content:"";position:absolute;left:0;right:0;bottom:100%;height:var(--space-lg); pointer-events:none; background:linear-gradient(to bottom,transparent,var(--paper)); } .drawer .drawer-foot-in{padding-block:var(--space-sm)} /* 1 · Marke oben — dieselbe Schreibweise wie im Kopf (ARBEITSPLAN §3), nur als Blattkopf ohne Verweis und vollstaendig: Bildmarke + Wortmarke (A12). A13: keine eigene Haarlinie mehr — die Trennung zum ersten Hauptziel leistet dessen border-top; vorher lagen zwei Linien mit leerem Band dazwischen. */ .drawer-brand{ align-items:baseline;gap:var(--space-2xs);flex-wrap:wrap; padding:0;margin:0 0 var(--space-lg) 0; } /* A12: der Kopf ist ein Lockup, kein Weg — kein Hover, kein Fokus. Die Wortmarke bleibt auch unter 560 px vollstaendig (dort blendet die Kopfzeile .mark span aus, um Platz zu sparen; im Panel ist Platz). Spezifitaet .drawer .drawer-brand span schlaegt .mark span, unabhaengig von der Reihenfolge im Blatt. */ .drawer .drawer-brand span{display:inline} /* 2 · Hauptziele — grosszuegige Typografie (Display-Schnitt, deutlich groesser als 18 px). */ .drawer-nav{margin:0} .drawer-main{display:grid} .drawer-main li{border-top:1px solid var(--line)} .drawer-main a{ display:grid;grid-template-columns:1fr auto;align-items:center;gap:var(--space-sm); min-height:64px;padding-block:var(--space-sm); font-family:var(--font-display);font-size:clamp(1.4rem,5.6vw,1.75rem);font-weight:700; letter-spacing:-.01em;line-height:1.12;text-decoration:none;color:var(--ink); transition:color var(--dur-2) var(--ease-out); } .drawer-main a::after{content:"\2192";font-family:var(--font-mono);font-size:.58em;font-weight:400;color:var(--line-strong);transition:color var(--dur-2) var(--ease-out)} .drawer-main a:hover,.drawer-main a:focus-visible{color:var(--accent-deep)} .drawer-main a:hover::after,.drawer-main a:focus-visible::after{color:var(--accent)} /* 3 · Abgesetzte Gruppe fuer Sekundaeres (Wissen, Rechtliches) mit Mono-Gruppenueberschrift. */ .drawer-group{ margin:var(--space-lg) 0 0;padding-bottom:var(--space-2xs); font-family:var(--font-mono);font-size:var(--text-meta);font-weight:400; letter-spacing:.14em;text-transform:uppercase;color:var(--ink-muted); } .drawer-sub{display:grid} .drawer-sub li{border-top:1px solid var(--line)} .drawer-sub a{ display:flex;align-items:center;min-height:48px;padding-block:var(--space-xs); font-size:var(--text-small);font-weight:600;text-decoration:none;color:var(--ink-soft); transition:color var(--dur-2) var(--ease-out); } .drawer-sub a:hover,.drawer-sub a:focus-visible{color:var(--ink)} /* 4 · Sprachumschalter als kleines Segment (zwei Felder, >= 44 px hoch). Steht jetzt im festen Panel-Fuss (.drawer-foot) — der Abstand nach oben ist der Innenabstand des Fusses, nicht mehr ein Rand des Segments. */ .drawer-lang{ display:inline-flex;justify-self:start;margin-top:0; border:1px solid var(--line-strong);border-radius:var(--radius-ui);overflow:hidden; } .drawer-lang a,.drawer-lang .is-current{ display:inline-flex;align-items:center;justify-content:center; min-height:44px;min-width:64px;padding-inline:var(--space-sm); font-family:var(--font-mono);font-size:var(--text-meta);letter-spacing:.1em;text-transform:uppercase; text-decoration:none;color:var(--ink-muted); } .drawer-lang a+a,.drawer-lang a+.is-current,.drawer-lang .is-current+a{border-left:1px solid var(--line-strong)} .drawer-lang a:hover,.drawer-lang a:focus-visible{color:var(--ink);background:var(--paper-2)} .drawer-lang .is-current{background:var(--paper-3);color:var(--ink)} /* 5 · Handlungsaufruf ueber die volle Breite, unten im festen Fuss. */ .drawer .drawer-cta{margin-top:var(--space-sm);width:100%;min-height:48px} /* ---------- Hero + Statuswerkbank ---------- */ .hero{padding-block:clamp(var(--space-xl),5.5vw,var(--space-3xl));border-bottom:1px solid var(--line)} .hero-grid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:clamp(var(--space-lg),5vw,var(--space-3xl));align-items:start} .hero h1{margin-block:var(--space-sm) var(--space-md);max-width:17ch} .hero .lede+p{margin-top:var(--space-md)} .hero-cta{margin-top:clamp(var(--space-md),3vw,var(--space-xl))} .hero-foot{margin-top:var(--space-lg);padding-top:var(--space-sm);border-top:1px solid var(--line);display:flex;flex-wrap:wrap;gap:var(--space-sm) var(--space-xl);align-items:center} .panel{background:var(--paper-2);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow-1);position:sticky;top:var(--space-3xl)} .panel-h{display:flex;align-items:baseline;justify-content:space-between;gap:var(--space-sm);padding:var(--space-sm) var(--space-md);border-bottom:1px solid var(--line)} .panel-h h2{font-family:var(--font-mono);font-size:var(--text-meta);font-weight:400;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-soft);margin:0;max-width:none} .milestones{margin:0} .milestones li{display:grid;grid-template-columns:92px 1fr;gap:var(--space-sm);padding:var(--space-sm) var(--space-md);border-bottom:1px solid var(--line);align-items:start} .milestones li:last-child{border-bottom:0} .milestones .when{font-family:var(--font-mono);font-size:var(--text-meta);letter-spacing:.04em;color:var(--ink-soft);white-space:nowrap;padding-top:var(--space-3xs)} .milestones .what{font-size:var(--text-small);line-height:1.5;position:relative; /* Platz für den von renderMilestones() nachgeladenen .state-Span dauerhaft reservieren: 1,5 x 12px (Zeilenhoehe) + --space-2xs (8px) = exakt die 26 px, die der Einschub sonst als Layoutschub erzeugt. Der Span wird ohne Layoutwirkung absolut in diesen Platz gesetzt. */ padding-bottom:calc(1.5 * var(--text-meta) + var(--space-2xs))} .milestones .what b{display:block;font-weight:600} .state{position:absolute;left:0;bottom:0;display:flex;align-items:center;gap:var(--space-2xs);font-family:var(--font-mono);font-size:var(--text-meta);line-height:1.5;text-transform:uppercase;letter-spacing:.08em;color:var(--ink-muted);margin-top:0} .state::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--line-strong);flex:none} li[data-status="inforce"] .state::before{background:var(--ok)} li[data-status="next"] .state::before{background:var(--accent)} li[data-status="inforce"] .state{color:var(--ok)} li[data-status="next"] .state{color:var(--accent-deep)} .panel-f{padding:var(--space-sm) var(--space-md);border-top:1px solid var(--line)} .panel-f p{font-size:var(--text-meta);font-family:var(--font-mono);color:var(--ink-muted);line-height:1.55;max-width:none} /* ---------- Prüfer ---------- */ .checker{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(var(--space-lg),4vw,var(--space-2xl));align-items:start} #questions{border-bottom:1px solid var(--line)} /* Frage für Frage: .q ist ein
und selbst das Raster aus Frage (legend) und Antwortkacheln (.seg). Ohne JavaScript bleiben ALLE Schritte sichtbar und bedienbar; ausgeblendet werden sie nur, wenn ein Skript im Kopf die Klasse has-anim gesetzt hat — also nur, wenn JavaScript läuft, und zwar vor dem ersten Rendern. Damit steht die Höhe des Abschnitts von Anfang an fest (kein Layoutsprung: Q1 trägt is-current schon im Markup). */ .q{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:var(--space-md);align-items:center;margin:0;min-width:0;padding-block:var(--space-md);border:0;border-top:1px solid var(--line)} .q--stack{grid-template-columns:minmax(0,1fr);align-items:start;gap:var(--space-sm)} .q .q-legend{display:block;float:none;margin:0;padding:0;max-width:52ch} .q .q-legend .qn{font-family:var(--font-mono);font-size:var(--text-meta);color:var(--accent);letter-spacing:.08em;display:block;margin-bottom:var(--space-2xs)} html.has-anim #questions .q[data-step]:not(.is-current){display:none} /* Hinweis zur bedingten Q4. Er steht IM vierten
, nicht mehr als eigene Zeile unter allen Fragen: damit erscheint er nur, wenn Frage 4 sichtbar ist, und verschwindet, sobald der Ablauf wieder zu Schritt 1–3 zurückkehrt. Es braucht dafür keine Zeile in app.js — die vorhandene Schrittregel oben blendet das ganze
samt Hinweis aus. */ .q-note{margin:0;max-width:60ch} .seg{display:inline-flex;flex-wrap:wrap;justify-self:start;max-width:100%;border:1px solid var(--line-strong);border-radius:var(--radius-ui);overflow:hidden;background:var(--paper)} .seg button{ min-height:48px;min-width:68px;padding:0 var(--space-sm);line-height:1;background:transparent;border:0; font-size:var(--text-small);font-weight:600;cursor:pointer;color:var(--ink-soft);white-space:nowrap; transition:background-color var(--dur-2) var(--ease-out),color var(--dur-2) var(--ease-out); } .seg button+button{border-left:1px solid var(--line-strong)} .seg button:hover{background:var(--paper-3);color:var(--ink)} .seg button[aria-pressed="true"]{background:var(--ink);color:var(--paper)} .verdict{border:1px solid var(--line);border-radius:var(--radius);background:var(--paper-2);padding:var(--space-md);position:sticky;top:var(--space-3xl)} .verdict h3{margin-bottom:var(--space-2xs)} .verdict-flag{display:inline-block;font-family:var(--font-mono);font-size:var(--text-meta);letter-spacing:.1em;text-transform:uppercase;padding:var(--space-2xs) var(--space-xs);border:1px solid var(--line-strong);border-radius:var(--radius-ui);background:var(--paper);color:var(--ink-soft);margin-bottom:var(--space-sm)} .verdict[data-verdict="in"] .verdict-flag{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)} .verdict[data-verdict="maybe"] .verdict-flag{background:var(--paper-3);border-color:var(--line-strong);color:var(--ink)} .verdict[data-verdict="out"] .verdict-flag{background:var(--paper);border-color:var(--ink);color:var(--ink)} .verdict p{font-size:var(--text-small);color:var(--ink-soft)} .verdict ol{counter-reset:v;margin-top:var(--space-sm);border-top:1px solid var(--line)} .verdict ol li{counter-increment:v;padding:var(--space-xs) 0;border-bottom:1px solid var(--line);font-size:var(--text-small);display:grid;grid-template-columns:24px 1fr;gap:var(--space-2xs);align-items:start} .verdict ol li::before{content:counter(v);font-family:var(--font-mono);font-size:var(--text-meta);color:var(--accent);padding-top:var(--space-3xs)} .verdict ol li:last-child{border-bottom:0} .verdict .reset{margin-top:var(--space-sm);background:none;border:1px solid var(--line-strong);border-radius:var(--radius-ui);min-height:48px;padding:0 var(--space-sm);font-size:var(--text-small);font-weight:600;cursor:pointer;transition:background-color var(--dur-2) var(--ease-out)} .verdict .reset:hover{background:var(--paper-3)} /* Fortschritt und leiser Rückweg des Frage-für-Frage-Ablaufs. Ohne JavaScript sind beide ausgeblendet — dann sind ohnehin alle Fragen sichtbar und ein Fortschritt wäre irreführend. */ .progress{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-sm);padding-block:var(--space-sm) 0} html:not(.has-anim) .progress{display:none} .progress-label{font-family:var(--font-mono);font-size:var(--text-meta);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-soft);margin:0;max-width:none} .progress-track{flex:1 1 110px;min-width:70px;height:2px;background:var(--line);border-radius:1px;overflow:hidden} .progress-fill{display:block;height:100%;width:100%;background:var(--accent);transform:scaleX(0);transform-origin:left center;transition:transform var(--dur-2) var(--ease-out)} .progress .back{margin-left:auto;min-height:44px;padding:0 var(--space-2xs);background:none;border:0;font-family:var(--font-mono);font-size:var(--text-meta);letter-spacing:.06em;text-transform:uppercase;color:var(--accent-deep);cursor:pointer;text-decoration:underline;text-underline-offset:3px} .progress .back:hover{color:var(--ink)} @media (prefers-reduced-motion:reduce){.progress-fill{transition:none}} /* ---------- Tabellen ---------- */ .table{width:100%;border-collapse:collapse;font-size:var(--text-small)} .table caption{text-align:left;font-family:var(--font-mono);font-size:var(--text-meta);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-muted);padding-bottom:var(--space-sm)} .table th,.table td{text-align:left;padding:var(--space-sm) var(--space-sm) var(--space-sm) 0;border-bottom:1px solid var(--line);vertical-align:top} .table th{font-weight:600;font-size:var(--text-meta);font-family:var(--font-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--ink-soft);border-bottom-color:var(--line-strong)} .table td:last-child,.table th:last-child{padding-right:0} .table .mono{font-family:var(--font-mono);font-size:var(--text-meta);color:var(--ink-soft);white-space:nowrap} .tag{display:inline-block;font-family:var(--font-mono);font-size:var(--text-meta);padding:var(--space-3xs) var(--space-2xs);border:1px solid var(--line-strong);border-radius:var(--radius);color:var(--ink-soft);white-space:nowrap} .table-wrap{overflow-x:auto;border-top:1px solid var(--line)} /* ---------- Zweispaltige Blöcke ---------- */ .cols{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(var(--space-md),4vw,var(--space-2xl))} .cols-3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(var(--space-md),3vw,var(--space-xl))} .fact{border-top:2px solid var(--ink);padding-top:var(--space-sm)} .fact dt{font-family:var(--font-display);font-size:1.5rem;font-weight:700;line-height:1.12;margin-bottom:var(--space-2xs);overflow-wrap:anywhere;hyphens:auto} .fact dd{font-size:var(--text-small);color:var(--ink-soft)} /* ---------- Dunkle Sektion (genau eine) ---------- */ .dark{background:var(--dark);color:var(--paper);border-top:0} .dark h2,.dark h3{color:var(--paper)} .dark .lede,.dark p{color:var(--dark-soft)} .dark .rail{color:var(--dark-soft)} .timeline{display:grid;gap:0;border-top:1px solid var(--hair-on-dark)} .timeline li{display:grid;grid-template-columns:110px minmax(0,1fr);gap:var(--space-md);padding-block:var(--space-md);border-bottom:1px solid var(--hair-on-dark);align-items:start} .timeline .t{font-family:var(--font-mono);font-size:var(--text-meta);letter-spacing:.06em;color:var(--paper);white-space:nowrap;padding-top:var(--space-3xs)} .timeline .d b{display:block;font-weight:600;color:var(--paper)} .timeline .d span{font-size:var(--text-small)} .dark .files{border-top:1px solid var(--hair-on-dark)} .dark .files li{border-bottom:1px solid var(--hair-on-dark)} .dark .files .small{color:var(--dark-soft)} /* ---------- Signatur-Animation ---------- */ .assess{margin:0} .assess-stage{ position:relative; aspect-ratio:1000 / 300; border:1px solid var(--line); background:var(--paper-2); border-radius:var(--radius); overflow:hidden; } .assess canvas{display:none;width:100%;height:100%} .has-anim .assess canvas{display:block} .assess-static{ position:absolute;inset:0; display:grid;grid-template-rows:repeat(2,1fr);gap:var(--space-lg); padding:var(--space-lg) var(--space-md);background:var(--paper-2); } .has-anim .assess-static{display:none} .assess-static i{ display:block; background-image:repeating-linear-gradient(90deg,var(--line-strong) 0 1px,transparent 1px calc(100% / 14)); } @media (min-width:620px){ .assess-static{padding-left:var(--space-3xl)} } .assess-cap{ display:flex;flex-wrap:wrap;gap:var(--space-sm) var(--space-xl); margin-top:var(--space-sm); font-family:var(--font-mono);font-size:var(--text-meta); letter-spacing:.06em;text-transform:uppercase;color:var(--ink-muted); } .assess-cap b{color:var(--ink);font-weight:500} @media (max-width:619px){ .assess-stage{aspect-ratio:1000 / 520} /* Antwortflächen des Prüfers: einzelne Kacheln mit Abstand statt durchgezogener Segmentleiste. Vorher zog sich die Leiste über die volle Breite (das .q-row-Raster stapelt schon ab 1040 px, das Element wurde auf volle Breite gestreckt), während Ja/Nein nur die linke Hälfte füllten — daneben eine leere umrahmte Fläche. Beim Umbruch von Q4 (vier Antworten) stand links ein überstehender Trennstrich und es fehlte die Trennung zwischen den Reihen. */ .seg{justify-self:stretch;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px; width:100%;border:0;border-radius:0;overflow:visible;background:none} .seg button{width:100%;min-width:0;border:1px solid var(--line-strong);border-radius:var(--radius-ui); background:var(--paper);padding:var(--space-2xs) var(--space-xs);white-space:normal;line-height:1.2} .seg button+button{border-left:1px solid var(--line-strong)} } @media (prefers-reduced-motion:reduce){ /* Die Animation zeigt dann ihr Standbild — kein Dauerlauf. */ .assess canvas{display:block} } /* ---------- Zeichnung ---------- */ .fig{border:1px solid var(--line);background:var(--paper-2);border-radius:var(--radius);padding:var(--space-md)} .fig-scroll{overflow-x:auto} .fig-scroll svg{min-width:0} .fig svg{width:100%;height:auto} .fig figcaption{margin-top:var(--space-sm);font-family:var(--font-mono);font-size:var(--text-meta);color:var(--ink-muted);line-height:1.6} .fig--dark{border-color:var(--hair-on-dark);background:transparent} .fig--dark figcaption{color:var(--dark-soft)} .ax-line{stroke:var(--hair-on-dark);stroke-width:1} .ax-line-strong{stroke:var(--dark-soft);stroke-width:1} .ax-tick{stroke:var(--dark-soft);stroke-width:1;stroke-dasharray:2 3} .ax-mk{fill:var(--paper)} .ax-mk-accent{fill:var(--accent)} .ax-lbl{font-family:var(--font-mono);font-size:12px;fill:var(--paper);letter-spacing:.04em} .ax-lbl-dim{font-family:var(--font-mono);font-size:12px;fill:var(--dark-soft);letter-spacing:.04em} .ax-num{font-family:var(--font-display);font-size:17px;font-weight:700;fill:var(--paper)} /* ---------- Nummerierte Phasen ---------- */ .phases{counter-reset:ph;display:grid;gap:0;border-top:1px solid var(--line)} .phases li{counter-increment:ph;display:grid;grid-template-columns:60px minmax(0,1fr);gap:var(--space-md);padding-block:var(--space-md);border-bottom:1px solid var(--line);align-items:start} .phases li::before{content:"0" counter(ph);font-family:var(--font-mono);font-size:var(--text-meta);color:var(--accent);padding-top:var(--space-3xs);letter-spacing:.06em} .phases h3{margin-bottom:var(--space-3xs)} /* ---------- Lieferliste ---------- */ .files{border-top:1px solid var(--line)} .files li{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:var(--space-md);padding:var(--space-sm) 0;border-bottom:1px solid var(--line);align-items:baseline} /* Fließtext der Lieferliste auf Lesemaß begrenzen: vorher lief er in einer 1068 px breiten Rasterzelle auf bis zu 106 Zeichen je Zeile (gemessen), jetzt 60 ch. Zwei Selektoren, weil der Text einmal direkt im Zellen-Span steht (18 px → 60 ch = 660 px) und einmal in einem inneren .small-Span (16 px → 60 ch = 600 px). */ .files li>span,.files li span.small{display:block;max-width:60ch} .files .file-purpose{font-size:var(--text-small);color:var(--ink-soft);text-align:right;max-width:22ch} .dark .files code{background:transparent;border-color:var(--hair-on-dark);color:var(--paper)} /* ---------- FAQ ---------- */ .faq details{border-bottom:1px solid var(--line)} .faq summary{ display:flex;align-items:center;justify-content:space-between;gap:var(--space-md); padding-block:var(--space-md);cursor:pointer;font-weight:600;font-size:1.05rem;list-style:none;line-height:1.35; } .faq summary::-webkit-details-marker{display:none} .faq summary::after{content:"+";font-family:var(--font-mono);font-size:1.15rem;color:var(--accent);flex:none;line-height:1} .faq details[open] summary::after{content:"–"} .faq details>div{padding-bottom:var(--space-md);max-width:60ch} .faq details>div p{color:var(--ink-soft)} /* ---------- Formular ---------- */ .form{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-md)} .field{display:grid;gap:var(--space-2xs)} .field.wide{grid-column:1/-1} .field label{font-size:var(--text-small);font-weight:600} .field .hint{font-size:var(--text-meta);color:var(--ink-muted);font-family:var(--font-mono);min-height:1lh;line-height:1.5} .field input,.field select,.field textarea{ width:100%;min-height:48px;padding:var(--space-xs);background:var(--paper); border:1px solid var(--line-control);border-radius:var(--radius-ui);font-size:var(--text-body); transition:background-color var(--dur-2) var(--ease-out),box-shadow var(--dur-2) var(--ease-out),border-color var(--dur-2) var(--ease-out); } .field textarea{min-height:132px;resize:vertical;line-height:1.5} .field input:hover,.field select:hover,.field textarea:hover{background:var(--paper-2)} .field input:focus,.field select:focus,.field textarea:focus{background:var(--paper)} /* Fehlerzustand: Rahmen + Textfarbe + Textmeldung. Fläche bleibt ruhig, damit der Akzent nicht flutet. */ .field[data-invalid="true"] input,.field[data-invalid="true"] textarea,.field[data-invalid="true"] select{border-color:var(--danger);box-shadow:inset 0 0 0 1px var(--danger)} .field[data-invalid="true"] label{color:var(--danger)} .field[data-invalid="true"] .hint{color:var(--danger)} .consent{display:grid;grid-template-columns:auto minmax(0,1fr);gap:var(--space-xs);align-items:start;font-size:var(--text-small);color:var(--ink-soft);padding-block:var(--space-2xs)} .consent input{width:24px;height:24px;min-height:0;margin:0;accent-color:var(--accent)} .consent label{cursor:pointer} .consent[data-invalid="true"] label{color:var(--danger)} .consent[data-invalid="true"] input{outline:2px solid var(--danger);outline-offset:3px} .form-foot{grid-column:1/-1;display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-md);padding-top:var(--space-xs)} .form-note{font-size:var(--text-meta);font-family:var(--font-mono);color:var(--ink-muted);max-width:48ch;line-height:1.6} .form-status{grid-column:1/-1;border:1px solid var(--line-strong);border-radius:var(--radius);padding:var(--space-sm) var(--space-md);font-size:var(--text-small);display:none} .form-status[data-state="ok"]{display:block;background:var(--paper-2);border-color:var(--ok)} .form-status[data-state="error"]{display:block;background:var(--paper-2);border-color:var(--danger);color:var(--danger)} .form-status[data-state="loading"]{display:block;background:var(--paper-2)} /* ---------- Footer ---------- Eine einzige Fußbauform für alle Seiten: Marke + Kurzbeschreibung, daneben zwei Navigationsspalten (Navigation als