/* Fahrschul-Kalkulator — F3a Darstellung Identität: deutsche Verkehrs-/Schilderwelt. Verkehrsblau + Signalgelb, Ampel-Grün/Rot, kühles Papierweiß. Oswald (Schilder) sparsam, Inter für UI. */ @font-face { font-family:'Oswald'; font-style:normal; font-weight:500; font-display:swap; src:url('fonts/oswald-500.woff2') format('woff2'); } @font-face { font-family:'Oswald'; font-style:normal; font-weight:600; font-display:swap; src:url('fonts/oswald-600.woff2') format('woff2'); } @font-face { font-family:'Oswald'; font-style:normal; font-weight:700; font-display:swap; src:url('fonts/oswald-700.woff2') format('woff2'); } @font-face { font-family:'IBM Plex Sans'; font-style:normal; font-weight:400; font-display:swap; src:url('fonts/ibm-plex-sans-400.woff2') format('woff2'); } @font-face { font-family:'IBM Plex Sans'; font-style:normal; font-weight:500; font-display:swap; src:url('fonts/ibm-plex-sans-500.woff2') format('woff2'); } @font-face { font-family:'IBM Plex Sans'; font-style:normal; font-weight:600; font-display:swap; src:url('fonts/ibm-plex-sans-600.woff2') format('woff2'); } @font-face { font-family:'IBM Plex Sans'; font-style:normal; font-weight:700; font-display:swap; src:url('fonts/ibm-plex-sans-700.woff2') format('woff2'); } :root { --ink: #14181F; --ink-weich: #4A525E; --papier: #EEF1F4; --karte: #FFFFFF; --linie: #D3DAE2; --linie-satt: #B7C1CC; --blau: #0B4DA2; /* Verkehrsblau (RAL 5017) */ --blau-tief: #08346D; --blau-hell: #E7EFF9; /* Themen-flippende Text-Tokens (Dark-Werte in theme.css): --auf-blau für Text auf SOLIDEN blauen Flächen (Buttons/Chips), --text-blau für blauen Fließtext auf Seiten-/Kartenhintergrund. Hell = bisherige Werte. */ --auf-blau: #FFFFFF; --text-blau: #08346D; --gelb: #F7B500; /* Signalgelb (RAL 1023) */ --gelb-tief: #C88E00; /* Ampel-Grün. ⚠️ #1F8A4C traegt auf Weiss nur 4,38:1, gefordert sind 4,5 - als FLAECHE ist das gleichgueltig, als Textfarbe (.mix-summe, .fk-erfolg-icon) nicht. Zwei Stufen dunkler bringen 4,66:1 und sind mit blossem Auge nicht zu unterscheiden. Entscheidung des Betreibers vom 28.08.2026: die Marke traegt den dunkleren Ton, statt an zwei Stellen einen zweiten Gruenton zu fuehren. */ --gruen: #1E8549; --rot: #C42B1C; /* Ampel-Rot */ /* Warnton fuer Hinweise, die KEIN Fehler sind (B103): --gelb-tief traegt auf Weiss nur rund 2,8:1 und ist als Text zu blass. Dieser Ton kommt auf 5,9:1. */ --warn-ink: #8A5206; /* Befund B47: WCAG 2.1 verlangt mindestens 24x24 px fuer Klickziele. Gemessen wurden 39 zu kleine Kaestchen ueber sieben Werkzeuge, von 13x13 bis 17x17. Eine Zahl an EINER Stelle - die Werkzeug-Stylesheets ziehen sie hier. */ --tippziel: 24px; /* Befund B125: 24 px ist die WCAG-Untergrenze (2.5.8, Stufe AA) und gilt fuer Kaestchen und Auswahlknoepfe. Fuer eine SCHALTFLAECHE ist sie zu wenig: am 31.08.2026 wurden 42 verschiedene unter 44 px gemessen, die kleinste 29 px. 44 px ist der Wert, auf den das Projekt seine Eingabefelder (min-height oben), den Fusszeilen-Link und den Hell-/Dunkel-Schalter laengst gesetzt hat - er stand nur an drei Stellen als nackte Zahl statt an einer als Name. */ --tippziel-hand: 44px; --rot-hell: #FBEDEB; --radius: 10px; --radius-gr: 16px; /* Der Kopf ist eine eigene, gerundete Karte auf dem Papier - kein randloser Streifen mehr. Er darf etwas breiter sein als der Inhalt darunter: so rahmt das Bedien-Chrom den Arbeitsbereich, statt mit ihm zu fluchten. */ --radius-kopf: 20px; --kopf-breite: 1200px; --kopf-rand: 1rem; /* Marke und Untertitel bekommen feste Hoehen. Sonst haengt die Hoehe des Kopfes daran, WELCHES Werkzeug man ansieht: das Dashboard trug die volle Wortmarke (3,1rem), die Werkzeuge das Schild (2,4rem), und der Untertitel brach mal ein-, mal zweizeilig um. Gemessen am 20.08.2026: 281,7px im Dashboard gegen 270,5px im Finanzplan. */ --kopf-marke: 2.6rem; /* Die volle Wortmarke sitzt in der Kontrollzeile und ist dort Bedien-Chrom, nicht Held: gross genug zum Lesen, klein genug, dass die Zeile 48px bleibt. */ --kopf-marke-voll: 2.5rem; /* Titel und Untertitel bilden zusammen den Wortblock. Seine Hoehe wird NICHT geschaetzt, sondern aus genau den Werten gerechnet, die ihn erzeugen - sonst laufen Zahl und Wirklichkeit beim naechsten Schriftgroessen-Wechsel auseinander. Das Dashboard traegt statt eines sichtbaren Titels die volle Wortmarke und eine versteckte Ueberschrift; ohne diese Mindesthoehe war sein Kopf 33,4px flacher als der eines Werkzeugs. */ --kopf-titel: 1.9rem; --kopf-titel-zeile: 1.1; --kopf-claim-zeilen: 2; --kopf-claim-zeile: 1.45; --kopf-claim-luft: .3rem; --kopf-worte: calc( var(--kopf-titel) * var(--kopf-titel-zeile) + var(--kopf-claim-luft) + var(--kopf-claim-zeilen) * var(--kopf-claim-zeile) * 1rem ); --schatten: 0 1px 2px rgba(20,24,31,.06), 0 6px 20px rgba(20,24,31,.06); --breite: 1080px; --display: 'Oswald', 'Arial Narrow', system-ui, sans-serif; --body: 'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', sans-serif; /* Kräftige Easing-Kurven (nach Emil Kowalski) — die eingebauten sind zu schwach. */ --ease-out: cubic-bezier(0.23, 1, 0.32, 1); /* Der Schatten am Rand eines quer laufenden Bereichs (siehe .querlauf). Im dunklen Design kippt er in theme.css auf Weiss - ein schwarzer Schatten auf #0E1116 ist kein Hinweis, sondern nichts. */ --querlauf-schatten: rgba(20,24,31,.30); } * { box-sizing: border-box; } /* [hidden] muss auch gegen Klassen mit display-Wert greifen (JS-Umschalter). */ [hidden] { display: none !important; } html { scroll-behavior: smooth; } body { margin: 0; font-family: var(--body); color: var(--ink); background: var(--papier); line-height: 1.5; -webkit-font-smoothing: antialiased; } .skip { position: absolute; left: -999px; top: 0; /* --papier statt #fff: --ink kippt im Dark-Theme auf einen hellen Wert (die Box wäre sonst heller Text auf hellem Grund). --papier kippt gegenläufig und bleibt so in beiden Themes lesbar. */ /* 80, nicht 20: der Skip-Link ueberlappt den Kopf (gemessen: Skip 0-43px, Kopf 16-205px) und lag bisher nur deshalb obenauf, WEIL der Kopf keine eigene Ebene beanspruchte. Seit er das tut, braucht der Skip-Link eine hoehere - sonst verschwindet er dahinter, und zwar unbemerkt: sichtbar wird er nur bei Tastaturbedienung. */ background: var(--ink); color: var(--papier); padding: .6rem 1rem; z-index: 80; border-radius: 0 0 var(--radius) 0; } .skip:focus { left: 0; } /* ================= Weicher Uebergang zwischen zwei Seiten ================= Beim Klick auf eine Kachel laedt der Browser weiterhin eine neue Seite - er blendet jetzt aber ueber, statt weiss zu blitzen. Der Kopf traegt einen eigenen Namen und wird deshalb von der einen Seite auf die andere UEBERFUEHRT: er sieht aus, als bliebe er stehen, waehrend darunter der Inhalt wechselt. Genau das war der Wunsch ("der Inhalt des Fensters veraendert sich einfach nur") - ohne eine Einzelseiten-Anwendung bauen zu muessen, die jedes der dreizehn Werkzeug-Skripte neu anstossen muesste. Browser ohne Unterstuetzung ignorieren beide Regeln und laden wie bisher. */ @view-transition { navigation: auto; } ::view-transition-old(root), ::view-transition-new(root) { animation-duration: .22s; } @media (prefers-reduced-motion: reduce) { /* Wer weniger Bewegung will, bekommt keinen Uebergang - auch keinen weichen. */ ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; } } /* ---- Kopf ---- */ .kopf { /* Eigene Band-Farben, keine allgemeinen Blautoene: die drehen im dunklen Design ins Helle, und weisse Schrift darauf war nicht mehr lesbar (siehe theme.css). Der Rueckfall gilt fuer den Fall, dass theme.css einmal nicht mitgeladen wird. */ background: linear-gradient(120deg, var(--band-von, #08346D), var(--band-bis, #0B4DA2)); color: #fff; border-bottom: 4px solid var(--gelb); /* Gerundete Karte statt randlosem Streifen. KEIN overflow:hidden - darin haengt die Menue-Liste, die absichtlich unten aus dem Kopf herausragt. */ /* ⚠️ width:100% IST NICHT UEBERFLUESSIG. Auf den Werkzeugseiten steht der Kopf in einem Block-Container und fuellt ihn von selbst. Auf den Rechtstext-Seiten (seit 30.08.2026) haengt er direkt in Astras .hfeed.site - und die ist ein FLEX-Container mit column-Richtung. Darin ist er ein Flex-Item mit flex:0 1 auto und schrumpft auf seine INHALTSBREITE: gemessen 483 px statt 1168, mittig, mit riesigen Auto-Raendern. Der Betreiber nannte es "krass gedrungen", und er hatte recht. Dieselbe Ursache wie bei der 244-px-Karte des Gruendungs-Leitfadens (B32): ein auto-zentriertes Kind eines Flex- oder Grid-Containers streckt sich nicht von selbst. Das max-width darunter begrenzt weiterhin nach oben. */ width: 100%; max-width: min(var(--kopf-breite), calc(100% - 2 * var(--kopf-rand))); margin: var(--kopf-rand) auto 0; border-radius: var(--radius-kopf); box-shadow: 0 10px 30px rgba(8, 52, 109, .18); /* Eigener Name fuer den Seitenuebergang: der Kopf wird von der einen Seite auf die andere ueberfuehrt statt aus- und wieder eingeblendet - er sieht aus, als bliebe er stehen, waehrend der Inhalt darunter wechselt. Die Erklaerung steht bewusst hier IM Regelblock des Kopfes und nicht als eigene .kopf-Regel weiter oben: KopfbandKontrastTest greift sich den ersten .kopf-Block und haette sonst den falschen geprueft. */ view-transition-name: fk-kopf; /* Eigene Ebene fuer den ganzen Kopf. Der view-transition-name eine Zeile darueber erzeugt einen Stacking-Kontext - und darin war die Menue-Tafel mit ihrem z-index:60 eingesperrt: die 60 galt nur INNERHALB des Kopfes. Jeder Inhalt, der im Markup spaeter kommt und selbst eine Ebene aufmacht (sticky, position:relative, eine Animation mit transform), lag darueber und deckte das aufgeklappte Menue zu. Das war Befund A der neunten Durchsicht mit seinen vier Fundstellen - ein Fehler, nicht vier. Im Browser gemessen: 1032 von 2736 Punkten der Tafel verdeckt, mit dieser Ebene 0. Die Ordnung insgesamt: Grund (-1) < Inhalt < Kopf (60) < Skip-Link (80) < Theme-Schalter (9999). EbenenordnungTest haelt sie fest. */ position: relative; z-index: 60; } /* Auf dem Band gilt die Bandfarbe, nicht die Textfarbe der Seite. Die Schutzregel gegen Astras Element-Regeln (weiter unten, ".formular :where(h1,...)") greift auch hier hinein, weil der Kopf INNERHALB der Werkzeug-Wurzel liegt - und .wortmarke-text erklaerte selbst nie eine Farbe. Im hellen Design stand die Ueberschrift damit in #14181F auf #08346D: 1,4:1, die Grenze liegt bei 4,5:1. Zweimal vom Nutzer gemeldet, zweimal blieb die Suite gruen, weil sie nur die Farbe des Bandes prueft und die der Schrift annimmt (siehe KopfSchriftfarbeTest). Zwei Klassen, nicht eine: die Schutzregel steht spaeter in der Datei und haette bei gleicher Spezifitaet gewonnen. Der Kopf traegt immer beide Klassen, damit haengt das Ergebnis nicht mehr an der Reihenfolge der Zeilen. */ .kopf.werkzeug-kopf :where(h1, h2, h3, h4, legend, label) { color: #fff; } /* Und die Abstaende gehoeren uns auch. Astra gibt Absaetzen im Inhaltsbereich einen unteren Abstand ueber einen Selektor aus Klasse UND Element - der schlaegt eine einzelne Klasse, also auch .kopf-claim. Live schob das den Untertitel um 25,6px nach unten. Weil das nur bei den WERKZEUGEN ueber die reservierte Hoehe hinausging (das Dashboard hat statt des Titels die Wortmarke und blieb darunter), war der Kopf live 279,2px gegen 253,6px hoch - genau der Unterschied, der weg sollte. In der oertlichen Vorschau war davon nichts zu sehen: dort laeuft kein Astra. Deshalb misst abnahme-kopf-live.mjs jetzt zusaetzlich an der echten Seite. */ .kopf.werkzeug-kopf :where(p, h1, h2, h3, h4, ul, ol) { margin-block-end: 0; } /* Und die Unterstriche auch. Aus demselben Grund: Astra unterstreicht Links im Inhaltsbereich mit Klasse UND Element und schlaegt damit .kopf-abmelden und .kopf-zurueck, die beide text-decoration:none erklaeren. Live sah der Abmelden-Knopf deshalb aus wie ein Fliesstext-Link. Beim Ueberfahren gibt es weiterhin eine Rueckmeldung - ueber Flaeche und Rand, nicht ueber einen Strich. DREI Klassen: Astras Regel ist ".ast-single-post .entry-content a" und zaehlt damit zwei Klassen UND ein Element (201). Zwei Klassen (200) reichten nicht - der erste Anlauf war deployt und der Strich stand weiter da. Bei 201 gegen 201 haette die Reihenfolge der Dateien entschieden; darauf soll sich nichts verlassen muessen. */ .kopf.werkzeug-kopf .kopf-inner :where(a) { text-decoration: none; } /* Screenreader-Text: visuell versteckt, fuer Screenreader und Tab-Fokus weiter da (Standard-Clip-Technik). Steht hier statt in dashboard.css, weil der gemeinsame Kopf ihn braucht - die versteckte Seitenueberschrift des Dashboards. */ .visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /* Die Textspalte im Kopf muss mit der Textspalte der Seite fluchten. Die Karte ist um --kopf-rand eingerueckt, also wird genau dieser Betrag von Breite und Innenabstand wieder abgezogen - sonst stehen Kopf und Inhalt um 16px versetzt. Aufgefallen ist es nicht beim Hinsehen, sondern dem Abnahmeskript: unter 1232px war der Kopf sogar schmaler als der Inhalt darunter. */ .kopf-inner { max-width: calc(var(--breite) - 2 * var(--kopf-rand)); margin: 0 auto; padding: 1.25rem calc(1.5rem - var(--kopf-rand)) 1.15rem; } /* Die Identitaet ist das ZWEITE Band: nur noch Titel und Untertitel, die Marke steht oben in der Kontrollzeile. Die feste Mindesthoehe haelt alle Werkzeuge auf derselben Hoehe, unabhaengig davon, ob der Untertitel ein- oder zweizeilig umbricht. */ .kopf-identitaet { display: block; } .kopf-worte { min-width: 0; min-height: var(--kopf-worte); } /* Die Marke steht auf einer Achse mit Menue und Hell/Dunkel-Schalter und ist zugleich der Weg zurueck aufs Dashboard. Ein zweiter Textlink daneben ("Zum Dashboard") waere derselbe Weg ein zweites Mal - das Klickziel ist mit 44px hoch genug fuer den Finger, und der Name des Ziels steht im aria-label. */ .wortmarke { display: flex; align-items: center; gap: .7rem; margin-right: auto; min-height: 44px; color: inherit; text-decoration: none; border-radius: 10px; transition: opacity .16s var(--ease-out); } a.wortmarke:hover { opacity: .82; } a.wortmarke:focus-visible { outline: 2px solid var(--gelb); outline-offset: 4px; } .wortmarke-schild { width: var(--kopf-marke); height: var(--kopf-marke); display: none; place-items: center; background: none; border: 0; box-shadow: none; padding: 0; } .wortmarke-schild svg { width: 100%; height: 100%; display: block; } .wortmarke-voll { display: block; } .wortmarke-voll svg { height: var(--kopf-marke-voll); width: auto; display: block; } /* Schmal: nur das Rad. Der zweizeilige Schriftzug daneben kostet dort die halbe Zeilenbreite, und den Namen traegt die Seite ohnehin im Titel. */ @media (max-width: 600px) { .wortmarke-voll { display: none; } .wortmarke-schild { display: grid; } } .wortmarke-text { font-family: var(--display); font-weight: 600; font-size: var(--kopf-titel); letter-spacing: .06em; text-transform: uppercase; /* Ist ein

(Seitenüberschrift für Screenreader und Gliederung) - die Browser-Vorgaben für Rand und Größe müssen deshalb neutralisiert werden. */ margin: 0; line-height: var(--kopf-titel-zeile); } /* Der Untertitel bekommt ZWEI Zeilen Platz reserviert, auch wenn nur eine kommt. Vorher brach er je Werkzeug ein- oder zweizeilig um und verschob damit die Hoehe des ganzen Kopfes. 74ch statt 46ch, damit auch der laengste Untertitel (Kalkulator, 130 Zeichen) auf dem Schreibtisch mit zwei Zeilen auskommt. Nicht abgeschnitten: lieber ein Kopf, der auf schmalen Geraeten einmal waechst, als versteckter Text. */ .kopf-claim { margin: var(--kopf-claim-luft) 0 0; max-width: 74ch; color: #D6E3F5; font-size: 1rem; line-height: var(--kopf-claim-zeile); min-height: calc(var(--kopf-claim-zeilen) * var(--kopf-claim-zeile) * 1em); } /* ================= Kontrollzeile: Marke, Menue, Hell/Dunkel ================= Alles, was BEDIENT wird, steht auf einer Achse; darunter steht, WO man ist. Vorher waren es vier Zeilen untereinander - Rueckweg, Marke, Titel, Untertitel - plus ein Abmelden-Knopf ganz unten ohne Bezug. Das Abmelden sitzt jetzt im Menue: es ist der einzige Weg, der etwas beendet, und gehoert weder neben die Wege, die man dauernd nimmt, noch als eigener Knopf ins Bild. Der eigene Rueckweg-Link ist entfallen - die Marke ist der Rueckweg, so wie ueberall im Web. */ .kopf-leiste { display: flex; align-items: center; gap: 1rem; min-height: 48px; margin-bottom: .9rem; } .kopf-navi { display: flex; align-items: center; gap: .5rem; margin-left: auto; } .kopf-menue { position: relative; } .kopf-menue-knopf { display: inline-flex; align-items: center; gap: .5rem; min-height: 44px; padding: .35rem .8rem; border: 1px solid rgba(255,255,255,.45); border-radius: 10px; color: #fff; font-size: .95rem; font-weight: 600; cursor: pointer; list-style: none; /* Dreieck des weg */ transition: background-color .16s var(--ease-out), border-color .16s var(--ease-out); } .kopf-menue-knopf::-webkit-details-marker { display: none; } .kopf-menue-knopf:hover { background: rgba(255,255,255,.12); border-color: #fff; } .kopf-menue-knopf:focus-visible { outline: 2px solid var(--gelb); outline-offset: 3px; } /* Drei Striche, aus einem Element und zwei Schatten - kein Bild, keine Schriftart. */ .kopf-menue-strich, .kopf-menue-strich::before, .kopf-menue-strich::after { display: block; width: 18px; height: 2px; background: currentColor; border-radius: 2px; } .kopf-menue-strich { position: relative; } .kopf-menue-strich::before, .kopf-menue-strich::after { content: ""; position: absolute; left: 0; } .kopf-menue-strich::before { top: -6px; } .kopf-menue-strich::after { top: 6px; } /* Die Menue-Tafel. Zwoelf Eintraege in einer Spalte waren ein Inhaltsverzeichnis ohne Kapitel - man liest sie jedes Mal von vorn, weil nichts sagt, wo man aufhoeren kann zu suchen. Jetzt vier Gruppen, nach der Arbeit benannt, auf dem Schreibtisch zweispaltig; das Dashboard steht als Startpunkt darueber, das Abmelden hinter einer Trennlinie darunter. Die Gruppen kommen aus dem Werkzeugverzeichnis, nicht aus der Vorlage. */ .kopf-menue-tafel { position: absolute; right: 0; top: calc(100% + .55rem); z-index: 60; width: min(36rem, calc(100vw - 2.5rem)); padding: .5rem; /* Der Kopf faerbt seinen Text weiss - die Tafel steht auf hellem Grund und muss ihre Farbe deshalb selbst erklaeren, sonst steht Weiss auf Weiss. */ color: var(--ink); background: var(--karte); border: 1px solid var(--linie); border-radius: 14px; box-shadow: 0 18px 44px rgba(8,52,109,.24); /* Kein Aufklappen aus dem Nichts: die Tafel faehrt aus dem Knopf heraus, an dem sie haengt (emil-design-eng: transform-origin gehoert an den Ausloeser). */ transform-origin: top right; animation: kopf-menue-auf 160ms var(--ease-out); } @keyframes kopf-menue-auf { from { opacity: 0; transform: scale(.97) translateY(-4px); } to { opacity: 1; transform: none; } } @media (prefers-reduced-motion: reduce) { .kopf-menue-tafel { animation: none; } } .kopf-menue-gruppen { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 .6rem; } @media (max-width: 640px) { .kopf-menue-tafel { width: min(20rem, calc(100vw - 2.5rem)); } .kopf-menue-gruppen { grid-template-columns: 1fr; } } .kopf-menue-gruppe-name { margin: .7rem .7rem .1rem; font-family: var(--display); font-size: .72rem; font-weight: 600; text-transform: uppercase; letter-spacing: .08em; color: var(--ink-weich); } .kopf-menue-liste { list-style: none; margin: 0; padding: 0; } .kopf-menue-liste a { display: flex; align-items: center; min-height: 40px; padding: .35rem .7rem; border-radius: 8px; color: var(--ink); text-decoration: none; font-size: .95rem; } /* Der Startpunkt steht ueber den Gruppen und traegt mehr Gewicht - er ist der Ort, von dem aus alles andere erreichbar ist. */ .kopf-menue-start a { min-height: 44px; font-weight: 600; } /* ---- Rueckweg im Kopf (nur Rechtstext-Seiten, seit 30.08.2026) ------------- ⚠️ WOZU EIN KNOPF, WO DIE MARKE SCHON ZURUECKFUEHRT. Auf einer Werkzeugseite waere er doppelt - dort ist die Marke der Weg aufs Dashboard, und genau deshalb steht in _kopf.php, dass ein zweiter Textlink derselbe Weg ein zweites Mal waere. Auf einer Rechtstextseite ist die Lage anders: dorthin kommt man aus dem Fuss einer beliebigen Seite, und wer abgemeldet liest, hat gar kein Dashboard - fuer den fuehrt er zur Startseite. Weisser Rand auf dunklem Band, wie der Menue-Knopf daneben: er ist eine Nebenhandlung und soll neben ihm nicht lauter sein. */ .kopf-zurueck { display: inline-flex; align-items: center; gap: .4rem; min-height: 44px; padding: 0 14px; border: 1px solid rgba(255,255,255,.45); border-radius: 999px; color: #fff; text-decoration: none; font-size: .92rem; font-weight: 500; /* Bricht nie um: der Pfeil ist ein eigenes Flex-Kind und bliebe sonst allein stehen, waehrend der Text darunter rutscht (B117). */ white-space: nowrap; transition: background-color .16s ease, border-color .16s ease; } .kopf-zurueck:hover, .kopf-zurueck:focus-visible { background: rgba(255,255,255,.14); border-color: #fff; color: #fff; } .kopf-zurueck:focus-visible { outline: 2px solid var(--gelb); outline-offset: 2px; } .kopf-zurueck-pfeil { transition: transform .16s ease; } @media (prefers-reduced-motion: no-preference) { .kopf-zurueck:hover .kopf-zurueck-pfeil { transform: translateX(-3px); } } @media (max-width: 560px) { /* Sichtbar bleibt nur das Ziel ("Dashboard"), der Vorspann geht. Der zugaengliche Name steht im aria-label und bleibt vollstaendig - und weil der sichtbare Rest darin vorkommt, ist WCAG 2.5.3 (Label in Name) weiter erfuellt. */ .kopf-zurueck-lang { display: none; } .kopf-zurueck { padding: 0 12px; font-size: .86rem; } } .kopf-menue-liste a:hover { background: var(--blau-hell); } .kopf-menue-liste a:focus-visible { outline: 2px solid var(--blau); outline-offset: -2px; } /* Wo man gerade ist, steht fett und mit gelber Kante - nicht nur in einer anderen Farbe: Farbe allein traegt keine Auskunft. */ .kopf-menue-liste a.ist-hier { font-weight: 700; box-shadow: inset 3px 0 0 var(--gelb); } /* ---- Das Schloss am Menuepunkt (Befund B42) ---------------------------------- Das Dashboard trug an jeder Kachel ein Schloss, das Menue daneben fuehrte dieselben Werkzeuge ohne jedes Zeichen. Wer kein Abo hatte, klickte sich der Reihe nach durch elf Eintraege, die alle auf derselben Kaufseite endeten. Der Eintrag bleibt ein Link und bleibt lesbar - er FUEHRT ja irgendwohin. Gedaempft, aber nicht ausgegraut: --ink-weich haelt den Kontrast ueber 4.5:1, waehrend ein echtes Grau (etwa var(--linie)) den Text unter die Schwelle druecken wuerde. Das Schloss traegt die Auskunft, nicht die Farbe - Farbe allein traegt keine, dieselbe Regel wie bei .ist-hier darueber. */ .kopf-menue-liste a.ist-gesperrt { color: var(--ink-weich); } .kopf-menue-schloss { margin-left: auto; padding-left: .6rem; display: inline-flex; align-items: center; flex: none; } .kopf-menue-schloss svg { width: 15px; height: 15px; display: block; } /* Der Platz fuer den Hell-/Dunkel-Schalter. Er steht auch ohne JavaScript im Dokument, damit die Zeile nicht springt, wenn der Schalter nachtraeglich dazukommt. */ .kopf-theme-platz { display: inline-flex; align-items: center; } /* Abmelden: der letzte Eintrag der Menue-Tafel, hinter einer Trennlinie. Es ist der einzige Weg, der etwas beendet. Als eigener Knopf im Kopf stand er staendig im Bild, ohne je gebraucht zu werden; neben dem Menue waere er ein Fehlklick-Kandidat. Eine Ebene tiefer und optisch abgesetzt ist beides geloest. Kein Rot: hier geht nichts verloren, man kommt jederzeit wieder herein. */ .kopf-menue-fuss { margin-top: .5rem; padding-top: .45rem; border-top: 1px solid var(--linie); } .kopf-abmelden { display: flex; align-items: center; min-height: 44px; padding: .35rem .7rem; border-radius: 8px; color: var(--ink-weich); font-size: .95rem; font-weight: 600; text-decoration: none; transition: background-color .16s var(--ease-out), color .16s var(--ease-out); } .kopf-abmelden:hover { background: var(--rot-hell); color: var(--rot); } .kopf-abmelden:focus-visible { outline: 2px solid var(--blau); outline-offset: -2px; } @media print { .kopf-leiste, .kopf-abmelden { display: none !important; } } /* ---- Hülle ---- */ .huelle { max-width: var(--breite); margin: 0 auto; padding: 1.75rem 1.5rem 3rem; display: grid; gap: 1.5rem; } /* Ohne das hier laufen breite Inhalte auf schmalen Bildschirmen aus der Seite heraus: Grid-Kinder haben von Haus aus min-width:auto und wachsen damit auf die Breite ihres sperrigsten Inhalts (etwa einer Tabelle), statt zu schrumpfen. Am 16.08.2026 an Finanzplan, Businessplan und Angebot gemessen: 574, 615 und 509 Pixel bei 390 Pixeln Bildschirm - auf jedem Handy, nicht nur auf dem iPhone. */ .huelle > * { min-width: 0; } /* Dasselbe fuer die verschachtelten Raster in den drei betroffenen Werkzeugen. Nur Container-Elemente, damit Knoepfe und Felder ihre gewollte Mindestbreite behalten. :where() haelt die Spezifitaet bei 0, eigene Regeln gewinnen also weiterhin. */ :where(.fk-finanzplan, .fk-businessplan, .fk-angebot) :where(div, section, form, fieldset, article, ul, li) { min-width: 0; } /* Dieselbe Klasse Fehler, andere Ursache: Browser geben jedem fieldset von sich aus min-width:min-content mit. */ fieldset { min-width: 0; } /* ---- Querlauf: der sichtbare Hinweis, dass rechts noch etwas steht (B35, B38) ---- Sechs Tabellen im System stecken in einem eigenen Scroll-Rahmen. Das ist die richtige Bauweise - die Seite bleibt schmal, statt quer zu laufen - und der Bericht lobt sie ausdruecklich. Nur SAH man es nicht: kein Balken, kein Schatten, keine Andeutung. Auf dem Bildschirm sah es aus, als waere die letzte Spalte abgeschnitten (Mitgliederverwaltung: 1.192 px Tabelle in 1.032 px Rahmen, am 26.08.2026 im Browser gemessen). Der Hinweis kommt ohne JavaScript aus. Vier Hintergrundbilder in einer Lage: zwei "Deckel" in der Farbe des Untergrunds, die MIT DEM INHALT wandern (background-attachment: local), und darunter zwei Schatten, die am Rahmen kleben (scroll). Steht der Inhalt am Anfang, liegt der linke Deckel genau auf dem linken Schatten und loescht ihn; scrollt man los, wandert der Deckel weg und der Schatten wird sichtbar. Passt die Tabelle ganz hinein, decken beide Deckel beide Schatten ab - dann erscheint gar nichts. Der Hinweis kann also nicht luegen. ⚠️ --querlauf-grund MUSS die Farbe sein, auf der der Rahmen steht. Sitzt er in einer Karte, ist das --karte; steht er frei auf der Seite, --papier. Eine falsche Farbe hinterliesse einen dauerhaft sichtbaren Streifen am Rand - deshalb steht sie an jeder Fundstelle ausdruecklich daneben. */ .querlauf { --querlauf-grund: var(--papier); overflow-x: auto; -webkit-overflow-scrolling: touch; max-width: 100%; min-width: 0; background: linear-gradient(to right, var(--querlauf-grund) 40%, transparent) 0 0, linear-gradient(to left, var(--querlauf-grund) 40%, transparent) 100% 0, linear-gradient(to right, var(--querlauf-schatten), transparent) 0 0, linear-gradient(to left, var(--querlauf-schatten), transparent) 100% 0; background-repeat: no-repeat; background-size: 44px 100%, 44px 100%, 18px 100%, 18px 100%; background-attachment: local, local, scroll, scroll; } /* Ein Scroll-Rahmen muss auch mit der Tastatur erreichbar sein - sonst kommt an die rechten Spalten nur heran, wer eine Maus hat. Firefox und Chrome geben scrollbaren Bereichen den Fokus inzwischen von selbst; tabindex="0" im Markup macht es verlaesslich, und der Rahmen zeigt dann, dass er gemeint ist. */ .querlauf:focus-visible { outline: 2px solid var(--blau); outline-offset: 2px; border-radius: 4px; } @media print { /* Auf Papier gibt es kein Scrollen - und ein gedruckter Schattenstreifen waere ein grauer Balken quer durch die Tabelle. */ .querlauf { overflow: visible; background: none; } } /* ---- Hinweisboxen ---- */ .hinweis { padding: .9rem 1.1rem; border-radius: var(--radius); border: 1px solid var(--linie); background: var(--karte); } .hinweis-warn { border-color: var(--rot); background: var(--rot-hell); color: #7f1a10; } /* ================= Ergebnis-Tafel ================= */ .tafel { background: linear-gradient(160deg, var(--blau-tief), var(--blau)); color: #fff; border-radius: var(--radius-gr); padding: 1.5rem; box-shadow: var(--schatten); border: 1px solid var(--blau-tief); /* Ein ruhiger Einblend-Moment beim Berechnen (nur beim ersten Render). */ opacity: 1; transform: none; transition: opacity 420ms var(--ease-out), transform 420ms var(--ease-out); } @starting-style { .tafel { opacity: 0; transform: translateY(14px) scale(0.988); } } .tafel-kopf { display: flex; align-items: center; justify-content: flex-end; margin-bottom: 1rem; } /* Ampel (Signature) */ .ampel { display: inline-flex; flex-direction: column; gap: 5px; background: #10151c; padding: 6px; border-radius: 8px; border: 2px solid #05070b; } .ampel-licht { width: 15px; height: 15px; border-radius: 50%; background: #2a2f38; box-shadow: inset 0 0 3px rgba(0,0,0,.6); } .ampel-warnung .ampel-rot { background: var(--rot); box-shadow: 0 0 10px 1px rgba(196,43,28,.9); } .ampel-frei .ampel-gruen { background: var(--gruen); box-shadow: 0 0 10px 1px rgba(31,138,76,.9); } .tafel-lead { margin: 0 0 1.2rem; max-width: 60ch; font-size: 1.05rem; color: #DCE8F7; } .tafel-haupt { display: grid; grid-template-columns: minmax(220px, 300px) 1fr; gap: 1.5rem; align-items: stretch; } /* Kernzahl als Verkehrsschild */ .schild { background: var(--blau); border: 5px solid #fff; border-radius: var(--radius-gr); box-shadow: inset 0 0 0 3px var(--blau), 0 6px 22px rgba(0,0,0,.28); display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 1.4rem 1rem; min-height: 190px; } .schild-zahl { font-family: var(--display); font-weight: 700; font-size: clamp(3.4rem, 9vw, 5rem); line-height: .95; color: #fff; font-variant-numeric: tabular-nums; } .schild-label { font-family: var(--display); text-transform: uppercase; letter-spacing: .12em; font-size: .95rem; margin-top: .5rem; color: #EAF2FD; } .tafel-kennzahlen { display: grid; grid-template-columns: repeat(2, 1fr); gap: .7rem; } .kennzahl { background: rgba(255,255,255,.09); border: 1px solid rgba(255,255,255,.16); border-radius: var(--radius); padding: .8rem .9rem; display: flex; flex-direction: column; gap: .15rem; } .kennzahl-wert { font-weight: 700; font-size: 1.35rem; font-variant-numeric: tabular-nums; color: #fff; } .kennzahl-label { font-size: .82rem; color: #C6D8EF; } .kapazitaet-warnung, .kapazitaet-ok { display: flex; align-items: baseline; gap: .6rem; margin: 1.1rem 0 0; padding: .75rem 1rem; border-radius: var(--radius); font-size: .95rem; } .kapazitaet-warnung::before, .kapazitaet-ok::before { content: ''; flex: 0 0 auto; width: .65rem; height: .65rem; border-radius: 50%; transform: translateY(.1rem); } .kapazitaet-warnung { background: var(--rot-hell); color: #7f1a10; } .kapazitaet-warnung::before { background: var(--rot); box-shadow: 0 0 8px rgba(196,43,28,.7); } .kapazitaet-ok { background: rgba(31,138,76,.16); color: #d7f2e2; } .kapazitaet-ok::before { background: var(--gruen); box-shadow: 0 0 8px rgba(31,138,76,.7); } .tafel-block { margin-top: 1.4rem; } .tafel-block h3 { font-family: var(--display); text-transform: uppercase; letter-spacing: .08em; font-size: 1rem; margin: 0 0 .7rem; color: #EAF2FD; } .block-notiz { color: #A9C1E0; font-weight: 400; text-transform: none; letter-spacing: 0; font-size: .82rem; } /* Kopf der Steuer-Aufschlüsselung: Überschrift links, Steuerjahr-Badge rechts. */ .steuer-block-kopf { display: flex; align-items: center; justify-content: space-between; gap: .6rem; flex-wrap: wrap; } /* Dezente Badge "Steuerwerte-Stand JJJJ" — Aktualitätssignal. Tokens flippen über Hell/Dunkel/Druck (siehe theme.css), daher überall lesbar. */ .steuerstand-chip { display: inline-flex; align-items: center; gap: .3rem; background: var(--blau-hell); color: var(--text-blau); font-size: .74rem; font-weight: 600; letter-spacing: .01em; padding: .2rem .55rem; border-radius: 999px; white-space: nowrap; } /* Balken je Klasse */ .balken { display: grid; gap: .5rem; } .balken-zeile { display: grid; grid-template-columns: 3rem 1fr 3.5rem; align-items: center; gap: .7rem; } .balken-name { font-family: var(--display); font-weight: 600; font-size: 1.05rem; } .balken-bahn { background: rgba(255,255,255,.14); border-radius: 999px; height: 14px; overflow: hidden; } .balken-fuell { display: block; height: 100%; background: var(--gelb); border-radius: 999px; transform-origin: left center; transition: transform 640ms var(--ease-out); } /* Balken wächst beim ersten Render aus 0 (GPU-freundlich via scaleX, kein Layout). */ @starting-style { .balken-fuell { transform: scaleX(0); } } .balken-wert { text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; } /* Steuer-Tabelle */ .steuer-tabelle { width: 100%; border-collapse: collapse; font-size: .95rem; } .steuer-tabelle th, .steuer-tabelle td { padding: .5rem .2rem; border-bottom: 1px solid rgba(255,255,255,.14); text-align: left; } .steuer-tabelle td { text-align: right; font-variant-numeric: tabular-nums; } .steuer-tabelle th { font-weight: 500; color: #DCE8F7; } .disclaimer { margin: 1.5rem 0 0; padding: .9rem 1rem; border-radius: var(--radius); background: rgba(255,255,255,.06); border: 1px dashed rgba(255,255,255,.28); font-size: .85rem; color: #D3E1F2; } .disclaimer strong { color: var(--gelb); } /* ================= Formular ================= */ .formular { display: grid; gap: 1.5rem; } .abschnitt { background: var(--karte); border: 1px solid var(--linie-satt); border-radius: var(--radius-gr); padding: 1.4rem 1.5rem 1.5rem; } .abschnitt-kopf { margin-bottom: 1.2rem; } .abschnitt-titel { display: flex; align-items: center; gap: .7rem; } /* ===================== Abschnittsleiste am Handy (B48) ===================== * * Gemessen bei 390 px: der Kalkulator ist zwoelf Bildschirme lang. Die Leiste * laeuft oben mit und bringt einen mit einem Griff in jeden Abschnitt. * * Gebaut wird sie von abschnittsleiste.js aus den vorhandenen Abschnittskoepfen; * ohne Skript existiert sie nicht. Deshalb steht hier nur ihre Gestalt. */ .fk-abschnittsleiste { position: sticky; top: 0; z-index: 5; margin: 0 0 1rem; /* ⚠️ Ohne diese zwei Zeilen wuchs die Leiste mit ihrem Inhalt statt zu scrollen: als Kind eines Grid-/Flex-Elternteils behaelt sie `min-width: auto`, und dann ist der laengste Eintrag die Mindestbreite. Bei 390 px gemessen war das Dokument 808 px breit - die ganze SEITE lief quer, und zwar erst durch diese Leiste. Dieselbe Falle wie beim Angebot-Ueberlauf und beim Reglerblock. */ min-width: 0; max-width: 100%; /* Der Grund muss decken: darunter scrollt der Inhalt durch. */ background: var(--papier); border-bottom: 1px solid var(--linie); } .fk-abschnittsleiste[hidden] { display: none; } .fk-abschnittsleiste-liste { display: flex; gap: .25rem; margin: 0; padding: 0; list-style: none; /* Das waagerechte Scrollen samt Randhinweis kommt aus .querlauf (vom Skript mitgegeben) - im Haus gibt es dafuer genau eine Stelle. */ --querlauf-grund: var(--papier); scrollbar-width: thin; min-width: 0; } /* Der Selektor nennt die Leiste mit, weil das Theme seine Links unterstreicht und bei gleicher Spezifitaet gewinnt: im Bild standen unter dem aktiven Eintrag zwei Linien uebereinander - Astras Unterstrich und unsere gelbe Kante. */ .fk-abschnittsleiste .fk-abschnittsleiste-eintrag { display: flex; align-items: center; gap: .4rem; /* 44 px Mindesthoehe: ein Ziel, das man mit dem Daumen trifft. */ min-height: 44px; padding: 0 .7rem; white-space: nowrap; text-decoration: none; color: var(--ink-weich); font-family: var(--display); font-size: .9rem; border-bottom: 3px solid transparent; } .fk-abschnittsleiste-nr { display: grid; place-items: center; width: 1.5rem; height: 1.5rem; border-radius: 5px; background: var(--blau-hell); color: var(--text-blau); font-size: .8rem; font-weight: 700; font-variant-numeric: tabular-nums; } .fk-abschnittsleiste .fk-abschnittsleiste-eintrag[aria-current] { color: var(--ink); border-bottom-color: var(--gelb); } .fk-abschnittsleiste .fk-abschnittsleiste-eintrag[aria-current] .fk-abschnittsleiste-nr { background: var(--blau); color: var(--auf-blau); } .fk-abschnittsleiste .fk-abschnittsleiste-eintrag:focus-visible { outline: 2px solid var(--blau); outline-offset: -3px; } /* Der Sprung soll nicht unter der Leiste landen. */ .abschnitt { scroll-margin-top: 56px; } .schritt { flex: 0 0 auto; font-family: var(--display); font-weight: 700; font-size: 1.1rem; line-height: 1; color: var(--auf-blau); background: var(--blau); border-radius: 7px; width: 2rem; height: 2rem; display: grid; place-items: center; font-variant-numeric: tabular-nums; } .abschnitt-kopf h2 { font-family: var(--display); font-weight: 600; font-size: 1.4rem; margin: 0; letter-spacing: .01em; padding-bottom: .25rem; border-bottom: 3px solid var(--gelb); } /* ===================== Die Ueberschriften-Ordnung (B50) ===================== * * Am 28.08.2026 im Browser gemessen: die Werkzeuge trugen NEUN verschiedene * h2-Gestalten und ACHT h3-Gestalten. Der Bericht hatte vier gezaehlt - sichtbar * wurden die uebrigen erst, als nicht die CSS-Klasse, sondern die BERECHNETE * Gestalt gemessen wurde (Farbe, Groesse, Versalien, Rahmen). Eine Klasse sagt, * was jemand gemeint hat; die berechnete Gestalt sagt, was der Leser sieht. * * Es gibt genau DREI Rollen, und sie unterscheiden sich zuerst ueber die GROESSE - * nicht ueber Farbe, Versalien und Rahmen zugleich: * * Stufe 1 Abschnitt einer Arbeitsfolge, nummeriert .abschnitt-kopf h2 (oben) * 1.4rem, blaues Kaestchen davor, gelbe Kante 3px * Stufe 2 Abschnitt ohne Nummer .fk-abschnitt * 1.25rem, Markenblau, gelbe Kante 2px * Stufe 3 Gruppe innerhalb eines Abschnitts .gruppe-titel * 1.05rem, gedaempft, ohne Kante * * WOZU KEINE VERSALIEN MEHR. Fuenf der neun Gestalten hatten sie, vier nicht - * ohne erkennbare Regel. Sie tragen hier auch nichts bei: die Groesse trennt die * Stufen bereits, und Abschnittsnamen wie "Rentabilitaet (3 Jahre)" sind in * Versalien schlechter zu lesen. Im Kopfband und auf Knoepfen bleiben sie. * * ⚠️ NEUE UEBERSCHRIFT? Eine dieser drei Klassen nehmen, keine vierte Gestalt in * ein Werkzeug-Stylesheet schreiben. Genau so sind die neun entstanden - * UeberschriftenordnungTest haelt das fest. */ .fk-abschnitt { display: inline-block; font-family: var(--display); font-weight: 600; font-size: 1.25rem; line-height: 1.25; margin: 0 0 .8rem; padding-bottom: .35rem; letter-spacing: .01em; /* ⚠️ NICHT --text-blau, obwohl das zuerst hier stand. Gemessen am 28.08.2026: die Farbe kam nicht an. Die Gegenregel unten (".formular :where(h1,h2,...)") hat dieselbe Spezifitaet und steht spaeter - sie gewinnt. Sie ist auch die wichtigere: ohne sie faerbt Astra die Ueberschriften mit einer Farbe, die im dunklen Design nicht mitkippt (Kontrast 1,17). Statt sie zu ueberstimmen, traegt Stufe 2 dieselbe Textfarbe wie Stufe 1. Die Stufen trennen sich ueber GROESSE und Kantenstaerke - ein Signal genuegt. */ color: var(--ink); border-bottom: 2px solid var(--gelb); } /** * Dieselbe Stufe, aber als Kopf eines Aufklappers (Businessplan-Kapitel, FAQ). * * WOZU EINE VARIANTE UND KEINE VIERTE GESTALT: Die gelbe Kante ist die Marke des * ABSCHNITTS. Auf einer klickbaren Zeile, die sich auf- und zuklappt, sitzt sie * falsch - sie sieht aus wie eine Trennung, wo gerade keine ist. Groesse und * Schrift bleiben deshalb gleich, nur Kante und Farbe weichen ab. Wer eine * Ausnahme braucht, nimmt diese - und macht keine neue auf. */ .fk-abschnitt--klapp { color: var(--ink); border-bottom: 0; margin: 0; padding-bottom: 0; } /* ---- Textfarbe gegen das WordPress-Theme absichern ---- Astra faerbt Ueberschriften und Formular-Beschriftungen global (--ast-global-color-2, ein dunkles Blaugrau). Diese Farbe kippt beim Umschalten auf das dunkle Design NICHT mit und landet dann bei Kontrast 1.17 — unlesbar. Frueher stand die Gegenregel nur auf `.abschnitt-kopf h2`; jede Ueberschrift ausserhalb dieses einen Bausteins (Cockpit, „Meine Kalkulationen", Regler-Beschriftungen) fiel wieder zurueck. Deshalb hier einmal fuer alle Wurzeln, die das Plugin selbst rendert. */ .formular, .dashboard, .gruendung, .faq, .fk-finanzplan, .fk-businessplan, .fk-angebot, .fk-stammdaten, .fk-aushang, .fk-preiswidget, .fk-preisrechner, .fk-anschaffung, .fk-webseite, .fk-vergleich, .mitglieder, .steuerwerte { color: var(--ink); } /** * Unser Papier gilt fuer die ganze Seite, nicht nur fuer unseren Kasten. * * body traegt --papier, aber das WordPress-Theme malt seinen eigenen, weissen Grund * ueber eine Klasse darueber und gewinnt. Live standen unsere weissen Karten damit auf * weissem Grund und hoben sich nur ueber ihren duennen Rand ab; oertlich, ohne Theme, * sah alles richtig aus. * * Der Grund kommt als eigene, festsitzende Flaeche HINTER dem Inhalt (z-index:-1). * Kein Theme-Klassenname im Selektor, kein !important - das ueberlebt den Umzug weg * von WordPress unveraendert. Bewusst kein box-shadow/clip-path-Trick: clip-path * schneidet auch die Menue-Liste ab, die absichtlich aus dem Kopf herausragt. * * OHNE .fk-preisrechner: der laeuft eingebettet auf fremden Websites. Dort waere ein * bildschirmfuellender Hintergrund ein Uebergriff. (Im Embed fehlt der Wrapper zwar * ohnehin - aber darauf soll sich das hier nicht verlassen muessen.) */ .formular::before, .dashboard::before, .gruendung::before, .faq::before, .fk-finanzplan::before, .fk-businessplan::before, .fk-angebot::before, .fk-stammdaten::before, .fk-aushang::before, .fk-preiswidget::before, .fk-anschaffung::before, .fk-webseite::before, /* Nachgetragen mit Befund B29: diese drei fehlten und standen deshalb als einzige Werkzeuge auf WEISSEM statt auf grauem Grund - der Bruch im Rahmen, den der Bericht am Kalkulationsvergleich beschreibt. */ .fk-vergleich::before, .mitglieder::before, .steuerwerte::before, /* Nachgetragen mit Befund B42 - die vierte Auslassung DERSELBEN Liste. Die Kaufseite stand als einzige Seite des Mitgliederbereichs auf Weiss, und zwar fuer jedes Konto ohne Abo, also fuer genau die Leute, denen etwas verkauft werden soll. Seither leitet GrundflaecheWaechterTest diese Aufzaehlung aus den Vorlagen ab, statt sie zu glauben: eine Liste, die vier Mal jemanden vergessen hat, ist keine Liste mehr, sondern eine Fehlerquelle mit Semikolon. */ .kaufen-seite::before { content: ""; position: fixed; inset: 0; z-index: -1; background: var(--papier); pointer-events: none; } @media print { /* Auf Papier ist der Grund weiss - und eine festsitzende Flaeche wuerde sonst auf jeder Seite mitgedruckt. */ .formular::before, .dashboard::before, .gruendung::before, .faq::before, .fk-finanzplan::before, .fk-businessplan::before, .fk-angebot::before, .fk-stammdaten::before, .fk-aushang::before, .fk-preiswidget::before, .fk-anschaffung::before, .fk-webseite::before, .fk-vergleich::before, .mitglieder::before, .steuerwerte::before, .kaufen-seite::before { display: none; } } /* :where() haelt die Spezifitaet bei einer Klasse — stark genug gegen Astras Element-Regeln, schwach genug, dass eigene Titelfarben (etwa die blauen Kartentitel im Finanzplan oder helle Schrift auf blauem Grund) weiter gewinnen. */ .formular :where(h1, h2, h3, h4, legend, label), .dashboard :where(h1, h2, h3, h4, legend, label), .gruendung :where(h1, h2, h3, h4, legend, label), .faq :where(h1, h2, h3, h4, legend, label), .fk-finanzplan :where(h1, h2, h3, h4, legend, label), .fk-businessplan :where(h1, h2, h3, h4, legend, label), .fk-angebot :where(h1, h2, h3, h4, legend, label), .fk-stammdaten :where(h1, h2, h3, h4, legend, label), .fk-aushang :where(h1, h2, h3, h4, legend, label), .fk-preiswidget :where(h1, h2, h3, h4, legend, label), .fk-preisrechner :where(h1, h2, h3, h4, legend, label), .fk-anschaffung :where(h1, h2, h3, h4, legend, label), .fk-webseite :where(h1, h2, h3, h4, legend, label), .fk-vergleich :where(h1, h2, h3, h4, legend, label), .mitglieder :where(h1, h2, h3, h4, legend, label), .steuerwerte :where(h1, h2, h3, h4, legend, label), /* Befund B42: auch hier fehlte die Kaufseite. Ohne diese Zeile faerbt Astra die Zwischenueberschriften und die Beschriftungen der Rechtsform-Wahl - und zwar nur live, nicht in der oertlichen Vorschau, wo gar kein Theme laeuft. */ .kaufen-seite :where(h1, h2, h3, h4, legend, label) { color: var(--ink); } .abschnitt-hilfe { margin: .5rem 0 0; color: var(--ink-weich); font-size: .9rem; max-width: 62ch; } /* Der Text hat seine Farbe, seine LINKS hatten keine - und erbten damit Astras Blau (#046BD2). Das kippt im dunklen Design nicht mit: gemessen 3,29:1 auf dunklem Kartengrund, gefordert 4,5:1. Betroffen waren Angebot und Preisuebersicht, beide ueber dieselbe Klasse; deshalb steht die Regel hier und nicht zweimal daneben. ⚠️ ZWEI KLASSEN UND ZWEI ELEMENTE. Astras ".ast-single-post .entry-content a" zaehlt 0,2,1 - bei zwei gleichen Klassenzahlen entscheidet die Zahl der Elemente, also gewinnt 0,2,2. Eine Regel mit nur einer Klasse ("​.abschnitt-hilfe a") verlöre, und zwar NUR LIVE: oertlich laeuft kein Astra, dort saehe alles richtig aus. */ /* ⚠️ FLIESSTEXT-LINKS ALLGEMEIN, NICHT NUR IN EINER KLASSE. Hier stand bis zum 30.08.2026 nur `.huelle p.abschnitt-hilfe a` - und der Link "Vertrag kündigen" im Profil steht in einem

ohne Klasse. Er behielt damit Astras #046BD2 und kam im Dunkelmodus auf 3,3:1. Gefunden hat es der Dunkelmodus-Durchgang des axe-Riegels, am Tag seines Einbaus. `:not([class])` ist Absicht: wer eine eigene Klasse traegt, bringt seine Farbe selbst mit - sonst faerbte diese Regel auch Knoepfe um, die als gebaut sind. */ .huelle p a:not([class]), .huelle p.abschnitt-hilfe a { color: var(--text-blau); } .zeilen { display: grid; gap: .8rem; } .zeilen-karten { gap: 1.1rem; } .zeile { display: flex; flex-wrap: wrap; align-items: flex-end; gap: .7rem; padding: .3rem 0; } /* Traegt ein Feld der Zeile einen Hinweis, richten sich alle oben aus (Befund K 2). flex-end haelt die Eingaben in einer Reihe, solange unter ihnen nichts steht - genau das ist der Zweck, wenn eine Beschriftung zweizeilig umbricht. Sobald ein Nachbarfeld aber einen Hinweis traegt, ist es hoeher, und flex-end schiebt die uebrigen Eingaben um dessen Hoehe nach unten: im Profil gemessen 52 px zwischen "Rechtsform" (mit Hinweis) und "Registereintrag" (ohne). Dieselbe Fehlerklasse gab es im Finanzplan (D 1/4/5) und im Preisrechner (F); die Regel greift nur in Zeilen, die den Hinweis wirklich haben. */ .zeile:has(> .feld > .fk-hinweis) { align-items: flex-start; } .zeile-klasse { flex-direction: column; align-items: stretch; background: var(--blau-hell); border: 1px solid var(--linie); border-radius: var(--radius); padding: .9rem 1rem 1rem; } /* Fahrzeugzeile: drei klar getrennte Untergruppen statt flacher Feldreihe. */ .zeile-fahrzeug { flex-direction: column; align-items: stretch; background: var(--blau-hell); border: 1px solid var(--linie); border-radius: var(--radius); padding: .9rem 1rem 1rem; gap: 0; } .fahrzeug-gruppe + .fahrzeug-gruppe { margin-top: .9rem; padding-top: .9rem; border-top: 1px solid var(--linie); } /* Fruehere Sonderregel: die Gruppentitel der Fahrzeugzeile waren .95rem statt 1.05rem. Dieselbe Rolle, zwei Groessen - im Browser gemessen als zwei getrennte Gestalten (B50). Der Abstand bleibt, die Groesse kommt aus .gruppe-titel. */ .fahrzeug-gruppe .gruppe-titel { margin: 0 0 .5rem; } .zeile-fahrzeug .zeile-weg { align-self: flex-end; margin-top: .6rem; } /* Fahrlehrer-Zeile als sauberes Raster: das Sachbezug-Feld trägt einen Hilfetext () und ist dadurch höher; mit dem flex-end der .zeile verschob das die übrigen Felder vertikal. Grid + align-items:start hält alle Felder oben-bündig, der Hilfetext hängt frei unten. */ .zeile-fahrlehrer { display: grid; grid-template-columns: minmax(0,2fr) minmax(0,1.4fr) minmax(0,1fr) minmax(0,1.3fr) minmax(0,1.5fr) auto; align-items: start; column-gap: .8rem; row-gap: .7rem; } .zeile-fahrlehrer .feld { flex: initial; } .zeile-fahrlehrer .zeile-weg { align-self: start; margin-top: 1.55rem; } @media (max-width: 760px) { .zeile-fahrlehrer { grid-template-columns: 1fr 1fr; } .zeile-fahrlehrer .zeile-weg { grid-column: 1 / -1; justify-self: end; margin-top: 0; } } @media (max-width: 460px) { .zeile-fahrlehrer { grid-template-columns: 1fr; } } .feld { display: flex; flex-direction: column; gap: .25rem; flex: 1 1 8rem; min-width: 0; } /* Kurzerklaerung unter einem Eingabefeld (per aria-describedby verknuepft). */ .feld-hilfe { margin: 0; color: var(--ink-weich); font-size: .84rem; line-height: 1.45; max-width: 52ch; } .feld-breit { flex: 2 1 12rem; } .feld-klein { flex: 0 1 6rem; } /* „Festgehalt (€/Monat)" braucht mehr Platz als ein Zahlenfeld; ohne diese Breite quetschte die Auswahl, waehrend das kurze Betragsfeld daneben Platz verschenkte. */ .feld-verguetung { flex: 1 1 13rem; } .feld label { font-size: .8rem; font-weight: 500; color: var(--ink-weich); display: flex; flex-direction: column; gap: .3rem; } /* Ein Label, das seine Eingabe NICHT umschliesst, ist kein Stapel aus Beschriftung und Feld, sondern nur Text - und dann darf nichts darin eine eigene Zeile bekommen. Sonst rutscht das Pflicht-Sternchen unter die Beschriftung, statt dahinter zu stehen (Befund K 1: im Profil an vier Feldern gemessen, jeweils 24 px tiefer). */ .feld > label:not(:has(input, select, textarea)) { display: block; } /* Im Klassen-Raster kleben die Eingaben an der Feld-Unterkante, damit sie in einer Reihe bündig bleiben, auch wenn ein Label (z. B. „Lehrmaterial Einnahme € (je Anmeldung)") zweizeilig umbricht. */ .klasse-grid .feld > label { flex: 1 1 auto; } .klasse-grid .feld > label > input, .klasse-grid .feld > label > select { margin-top: auto; } /* Kalkulationen-Liste: klare Abstände zwischen den Zeilen und den Buttons (Feedback: Laden/Löschen standen zu dicht aneinander). */ .kalk-liste { list-style: none; margin: 0 0 1rem; padding: 0; display: flex; flex-direction: column; gap: .55rem; } .kalk-zeile { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem .55rem; } .kalk-zeile .kalk-name { font-weight: 600; } /* Datum schiebt die beiden Buttons ans rechte Ende der Zeile. */ .kalk-zeile .kalk-datum { color: var(--ink-weich); font-size: .9rem; margin-right: auto; } /* Kompakte Aktions-Buttons in der Kalkulationen-Liste (Laden/Löschen). */ .kalk-zeile .rechnen { padding: .38rem .85rem; font-size: .8rem; letter-spacing: .03em; } /* Befund B127: "Laden" und "Löschen" standen 9 px auseinander - gleich gross, gleich geformt, nur die Schrift des einen rot. Acht Pixel sind das Minimum, das Material und Apple fuer BENACHBARTE Klickziele nennen; fuer ein Paar aus harmloser und unwiderruflicher Handlung ist das wenig. Der Fehlgriff kostet dank der Rueckfrage am Knopf keine Kalkulation, aber einen Schreck. Gemessen am 31.08.2026 im Browser, nicht im CSS gerechnet: 9 px. */ .kalk-zeile .rechnen-gefahr { margin-inline-start: .9rem; } input[type="text"], input[type="tel"], input[type="email"], input[type="url"], input[type="date"], select { font-family: var(--body); font-size: 1rem; /* 16px: verhindert iOS-Auto-Zoom beim Fokus */ color: var(--ink); background: var(--karte); border: 1.5px solid var(--linie-satt); border-radius: 8px; padding: .5rem .6rem; width: 100%; /* Tippziel: die Felder kamen auf 41 px, drei zu wenig. Auf dem Handy trifft ein Finger daneben, und das gilt fuer jedes Formular der Anwendung (am 20.08.2026 auf 375 px nachgemessen). min-height statt height, damit ein Feld mit groesserer Schrift weiter waechst. */ min-height: 44px; transition: border-color .12s var(--ease-out), box-shadow .12s var(--ease-out); } input[type="text"]:focus, input[type="tel"]:focus, input[type="email"]:focus, input[type="url"]:focus, input[type="date"]:focus, /* Befund B133: das Einbettungsfeld der Preisuebersicht (.pw-embed-textarea) bekam beim Fokus zwar einen blauen Rand, aber nicht den Ring - es fehlte schlicht in dieser Liste. Ein Feld, das anders auf den Fokus antwortet als alle anderen Felder daneben, ist der Fall, den WCAG 2.4.7 meint. */ textarea:focus, select:focus { outline: none; border-color: var(--blau); /* color-mix statt hartkodiertem rgba(11,77,162,...): folgt --blau durchs Dark-Theme, sonst wäre der Fokus-Ring im Dark-Theme kaum sichtbar. */ box-shadow: 0 0 0 3px color-mix(in srgb, var(--blau) 18%, transparent); } input[inputmode="decimal"], input[inputmode="numeric"] { font-variant-numeric: tabular-nums; } /* * Befund B124: Ein Feld sagt durch seine Breite, wie viel hineingehoert. * * Gemessen am 31.08.2026: das Feld fuer den Gewerbesteuer-Hebesatz war 982 px breit * fuer die Eingabe "400" - rund fuenfundzwanzigmal so breit wie sein Inhalt. Dieselbe * Fehlerklasse wie B37, wo das Steuerjahr-Feld 852 px fuer vier Ziffern mass. * * ⚠️ EINE REGEL, KEINE LISTE. Vorher stand die Breite je Feld im Markup (oder gar * nicht); 24 Felder allein im Kalkulator lagen ueber der Grenze. Der Massstab steht * hier an EINER Stelle und wird von der Eingabeart abgeleitet, nicht vom Ort: * numeric = Stueckzahl, Jahr, Anzahl Monate -> schmal * decimal = Geldbetrag -> mittel * [data-mass="prozent"|"anzahl"] -> schmal, obwohl decimal * (Prozentsaetze und Stueckzahlen brauchen ein Komma und heissen deshalb * decimal - an der Breite aendert das nichts.) * * ⚠️ MAX-WIDTH, NICHT WIDTH. width:auto haette jedes Feld auf seine size-Vorgabe * (~20 Zeichen) gesetzt und damit auch die Felder VERKLEINERT, die in einer engen * Rasterzelle stehen und dort buendig abschliessen sollen. max-width kann nur * schrumpfen, wo zu viel Platz ist - im Raster aendert sich nichts. */ :root { --feld-schmal: 8rem; --feld-mittel: 14rem; } input[inputmode="numeric"] { max-width: var(--feld-schmal); } input[inputmode="decimal"] { max-width: var(--feld-mittel); } /* ⚠️ NACH der decimal-Regel und nicht davor: beide Selektoren wiegen gleich schwer (ein Typ, ein Attribut), es entscheidet also die Reihenfolge. Stuenden sie umgekehrt, waere jedes Prozentfeld wieder mittelbreit - und die Regel saehe trotzdem richtig aus. */ input[data-mass="prozent"], input[data-mass="anzahl"] { max-width: var(--feld-schmal); } .feld.hat-fehler input, .feld.hat-fehler select { border-color: var(--rot); background: var(--rot-hell); } .feld-fehler { margin: 0; color: var(--rot); font-size: .78rem; font-weight: 500; } .klasse-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: .7rem .9rem; } .klasse-grid .feld { flex: initial; } /* Traegt ein Feld des Rasters einen Hilfetext, richten sich alle oben aus statt zu strecken (Befund F, 23. August). Die Regel oben - Label waechst, Eingabe klebt per margin-top:auto an der Unterkante - haelt Eingaben genau dann in einer Reihe, wenn unter ihnen nichts steht. Sobald ein Nachbarfeld einen Hilfetext hat, ist die Rasterzeile so hoch wie dieses Feld, das Label des Nachbarn waechst mit, und seine Eingabe rutscht um die Hoehe des fremden Hilfetexts nach unten: gemessen 43 px zwischen "Übungsstunde € / Std" und "Übungsstunden voreingestellt", genau das gemeldete "Beschriftung oben, Feld erst darunter". Ohne Strecken greift margin-top:auto nicht mehr, die Eingaben stehen direkt unter ihrer Beschriftung und sind wieder buendig. Nachgemessen bei 1280, 769 und 375 px: keine schiefe Zeile mehr, kein waagerechtes Scrollen; ohne die Regel kehren die 43 px zurueck. Rasterzeilen ohne Hilfetext behalten das bisherige Verhalten. */ .klasse-grid:has(.feld-hilfe) { align-items: start; } .sonderfahrten { display: flex; gap: .7rem 1.1rem; flex-wrap: wrap; align-items: flex-end; margin: .9rem 0 0; padding: .6rem .9rem .8rem; border: 1px solid var(--linie); border-radius: var(--radius); background: var(--karte); } .sonderfahrten .feld-klein { flex: 0 0 5.5rem; } .sf-zeile { display: flex; gap: .6rem; align-items: flex-end; flex: 1 1 15rem; } /* Befund B103: Kennzeichnung und Mindestzahl-Hinweis der Pflicht-Sonderfahrten. Die Pille ist dieselbe Formensprache wie .an-pflicht im Angebot - dort trug sie das Wort schon, hier fehlte es. */ .sf-pflicht { display: inline-block; margin-inline-start: .45rem; padding: .05rem .45rem; border: 1px solid var(--linie-satt, var(--linie)); border-radius: 999px; font-family: var(--display); font-size: .62rem; font-weight: 500; letter-spacing: .03em; color: var(--ink-weich); white-space: nowrap; } /* Ein Hinweis, kein Fehler: gedeckte Warnfarbe statt Rot, denn beim Aufstieg aus einer Vorbesitzklasse sind kleinere Zahlen richtig. */ .feld-pflicht { margin: .2rem 0 0; color: var(--warn-ink); font-size: .74rem; font-weight: 500; line-height: 1.35; } /* Ein sichtbarer Hinweis nimmt die ganze Reihe seines Typs; das Preisfeld rutscht darunter. Die Spalte des Anzahl-Feldes ist rund 88 px breit - der Satz braeche dort auf fuenf Zeilen. Ohne flex-wrap auf der Reihe bliebe die 100 % wirkungslos: in einer nowrap-Reihe wird sie wieder zusammengedrueckt (gemessen 139 px statt der vollen Breite). Am 26.08.2026 bei 390 und bei 1280 px nachgemessen. */ .sf-zeile { flex-wrap: wrap; } .sonderfahrten .feld-klein:has(.feld-pflicht:not([hidden])) { flex-basis: 100%; } .sonderfahrten legend { font-family: var(--display); text-transform: uppercase; letter-spacing: .08em; font-size: .74rem; color: var(--ink-weich); padding: 0 .3rem; } /* Zeilen-Buttons */ .zeile-weg { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; background: transparent; border: 1px solid transparent; color: var(--ink-weich); /* 44 statt 34 Pixel. Der Knopf LOESCHT eine Zeile - ein zu kleines Tippziel ist hier nicht nur unbequem, ein Fehlgriff kostet eine Eingabe. Damit waechst auch der Kreis, der beim Ueberfahren erscheint; das Zeichen selbst bleibt gleich gross. */ width: 44px; height: 44px; border-radius: 999px; font-size: 1.35rem; line-height: 1; cursor: pointer; transition: color .15s var(--ease-out), background-color .15s var(--ease-out); } .zeile-weg:hover { color: var(--rot); background: var(--rot-hell); } .zeile-weg-karte { width: auto; align-self: flex-end; margin-top: .8rem; padding: .3rem .7rem; border-radius: 8px; font-size: .85rem; font-weight: 500; color: var(--ink-weich); transition: color .15s var(--ease-out), background-color .15s var(--ease-out); } .zeile-weg-karte:hover { color: var(--rot); background: var(--rot-hell); } .zeile-plus { margin-top: 1rem; background: var(--blau-hell); color: var(--text-blau); border: 1.5px dashed var(--blau); border-radius: 8px; padding: .55rem 1rem; font-weight: 600; font-size: .9rem; /* Tippziel, wie bei den uebrigen Knoepfen: kam auf 40 px. Er steht in jeder Positionsliste, also neunmal allein im Finanzplan. */ min-height: 44px; cursor: pointer; } /* color-mix statt hartkodiertem Hellblau: bleibt im Dark-Theme ein dezenter Blau-Tupfer statt eines grellen hellen Flecks. */ .zeile-plus:hover { background: color-mix(in srgb, var(--blau) 18%, var(--blau-hell)); } .kosten-gruppe { margin-top: 1.1rem; } .kosten-gruppe:first-of-type { margin-top: .4rem; } .gruppe-titel { font-family: var(--display); font-size: 1.05rem; font-weight: 600; color: var(--ink-weich); margin: 0 0 .5rem; } /* Anmeldemix */ .mix-zeilen { display: flex; flex-wrap: wrap; gap: 1rem; } .mix-zeile { display: flex; align-items: center; gap: .7rem; background: var(--blau-hell); border: 1px solid var(--linie); border-radius: 999px; padding: .35rem .5rem .35rem 1rem; } .mix-name { font-family: var(--display); font-weight: 600; font-size: 1.1rem; } .mix-input { position: relative; display: flex; align-items: center; } .mix-input input { width: 5rem; padding-right: 1.7rem; text-align: right; } .mix-einheit { position: absolute; right: .6rem; color: var(--ink-weich); font-size: .85rem; pointer-events: none; } .mix-summe { margin: 1rem 0 0; font-weight: 600; font-size: .95rem; } .mix-summe.mix-ok { color: var(--gruen); } .mix-summe.mix-falsch { color: var(--rot); } /* Steuer-Bereich */ .steuer-felder { margin-top: 1rem; display: grid; gap: 1rem; } .feld-gruppe { display: flex; flex-wrap: wrap; gap: .9rem 1.1rem; align-items: flex-end; } .rechtsform-block { padding-top: .3rem; } .privatkosten-rechner { margin-top: 1rem; border: 1px solid var(--linie); border-radius: var(--radius); padding: .6rem 1rem 1rem; background: var(--blau-hell); } .privatkosten-rechner .kosten-gruppe:first-of-type { margin-top: .6rem; } /* ---- Aufklapper (Befund B34) ---- Drei

stehen im Kalkulator wenige Zeilen auseinander, und nur EINES davon hatte eine Regel: .privatkosten-rechner. Die beiden anderen tragen im Markup ein .schritt-Kaestchen vor dem Text - und .schritt ist ein Block (display:grid, feste 2rem). In einem mit dem voreingestellten display:list-item bricht dieser Block die Zeile auf: Dreieck, Kaestchen und Text standen UNTEREINANDER, der Kopf war 80 statt 34 Pixel hoch. Kein Sonderfall der beiden Bloecke also, sondern eine fehlende Regel - deshalb steht sie hier fuer alle drei und nicht zweimal daneben. Das Muster ist das des Finanzplans (.fp-kat-titel/.fp-kat-name in finanzplan.css): eine Flex-Zeile, eigener Pfeil statt des Systemdreiecks, Mindesthoehe 44px als Tippziel. Der Pfeil dreht sich beim Aufklappen. */ .privatkosten-rechner > summary, .rechtsform-vergleich > summary, .preis-rueckrechner > summary { display: flex; align-items: center; gap: .65rem; min-height: 44px; padding: .3rem 0; cursor: pointer; list-style: none; font-family: var(--display); font-weight: 600; color: var(--text-blau); transition: color 160ms var(--ease-out); } .privatkosten-rechner > summary::-webkit-details-marker, .rechtsform-vergleich > summary::-webkit-details-marker, .preis-rueckrechner > summary::-webkit-details-marker { display: none; } .privatkosten-rechner > summary::before, .rechtsform-vergleich > summary::before, .preis-rueckrechner > summary::before { content: ""; flex: none; width: .5rem; height: .5rem; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); opacity: .55; transition: transform 200ms var(--ease-out); } .privatkosten-rechner[open] > summary::before, .rechtsform-vergleich[open] > summary::before, .preis-rueckrechner[open] > summary::before { transform: rotate(-135deg); } .privatkosten-rechner > summary:hover, .rechtsform-vergleich > summary:hover, .preis-rueckrechner > summary:hover { color: var(--blau); } .schalter { display: inline-flex; align-items: center; gap: .5rem; font-size: .9rem; color: var(--ink); cursor: pointer; padding: .4rem 0; } .schalter input { width: 1.05rem; height: 1.05rem; accent-color: var(--blau); } .gf-profil { margin: .4rem 0 0; border: 1px solid var(--linie); border-radius: var(--radius); padding: .8rem 1rem 1rem; background: var(--karte); } .gf-profil legend { font-family: var(--display); text-transform: uppercase; letter-spacing: .06em; font-size: .78rem; color: var(--ink-weich); padding: 0 .35rem; } /* Nur für Screenreader. Das !important ist hier kein Notnagel, sondern der Punkt der Klasse: sie wird auf Elemente gesetzt, die anderswo bereits ihre eigene Grösse bekommen haben, und muss diese Regeln schlagen — egal welche Spezifität die hat. Konkret geschehen: der per JS versteckte Vorschau-Knopf im Angebot behielt aus „.fk-aktionen .rechnen{width:100%}" seine volle Breite, lag absolut positioniert 65px eingerückt und zog die Seite auf Handys 65px in die Breite. */ .visuell-versteckt { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; border: 0 !important; overflow: hidden !important; clip: rect(0 0 0 0) !important; white-space: nowrap !important; } /* Sichtbarer Tastatur-Fokus für alle Bedienelemente */ .zeile-plus:focus-visible, .zeile-weg:focus-visible, .rechnen:focus-visible, .schalter input:focus-visible { outline: 3px solid var(--blau); outline-offset: 2px; } .tafel .rechnen:focus-visible { outline-color: #fff; } /* Aktion */ /* * Befund B112 - und beim Nachmessen war er groesser als gemeldet. * * Gemeldet war: die mitlaufende Leiste verdeckt den Entfernen-Knopf der Zeile darunter * um 22 px (axe, target-size). Gemessen am 31.08.2026 bei 1440 px kam heraus, dass die * Leiste 1.032 px BREIT ist, davon 748 px unsichtbar - und dass genau diese * durchsichtige Flaeche ganz oben im Stapel liegt: `elementsFromPoint` lieferte bei * x=500, 800 und 940 nicht das Eingabefeld darunter, sondern `div.aktion`. Ein Klick * auf ein Feld, das zufaellig in dieser 49 px hohen Bahn liegt, ging also ins Leere. * Das trifft beim Scrollen jede Zeile einmal und ist schwerer als die 22 px. * * ⚠️ DER VORSCHLAG IM BERICHT LOEST NUR DIE HAELFTE. Er nahm an, es treffe die LETZTE * Zeile der Klassenliste; deshalb "padding-bottom in Hoehe der Leiste". Der verdeckte * Knopf lag aber im ERSTEN Abschnitt - die Leiste schwebt beim Scrollen ueber allem. * Das padding steht trotzdem unten: es sorgt dafuer, dass das ENDE des Formulars nicht * unter der Leiste endet. Was es nicht kann, ist die Ueberdeckung unterwegs aufheben. * * pointer-events raeumt die durchsichtige Flaeche aus dem Weg, ohne am Verhalten der * Leiste etwas zu aendern: die Pille selbst bleibt klickbar, alles daneben ist wieder * durchlaessig. */ .aktion { position: sticky; bottom: 1rem; display: flex; justify-content: flex-end; pointer-events: none; } .aktion > * { pointer-events: auto; } .formular { padding-bottom: calc(3rem + 1rem); } .rechnen { display: inline-flex; align-items: center; justify-content: center; gap: .55rem; font-family: var(--display); text-transform: uppercase; letter-spacing: .05em; font-size: 1.05rem; font-weight: 600; color: var(--ink); background: var(--gelb); border: none; border-radius: 11px; padding: .85rem 1.9rem; /* Tippziel: 44px ist die Untergrenze, unter der Finger danebentreffen. Der Knopf kam auf 41px - nah dran, aber eben darunter, und das gilt fuer JEDEN Knopf der Anwendung. min-height statt height, damit ein Knopf mit Umbruch weiter waechst (am 20.08.2026 im Browser nachgemessen, auf 375px und auf 1265px). */ min-height: 44px; cursor: pointer; box-shadow: 0 1px 2px rgba(20,24,31,.14), 0 10px 22px -6px rgba(200,142,0,.5); transition: transform 160ms var(--ease-out), box-shadow 160ms var(--ease-out), background-color 160ms var(--ease-out); } .rechnen:hover { background: #ffbf14; transform: translateY(-2px); box-shadow: 0 2px 4px rgba(20,24,31,.16), 0 16px 30px -8px rgba(200,142,0,.6); } .rechnen:active { transform: translateY(0) scale(.985); box-shadow: 0 1px 2px rgba(20,24,31,.18); } /* --------------------------------------------------------------------------- Befund B26: drei Stufen statt einer Farbe. Gelb ist die Farbe fuer "hier druecken". Sie lag aber ueberall gleich stark: .rechnen-sekundaer STAND schon im Markup - an Speichern, Laden, Loeschen, Zuruecksetzen, Rechtsform-Vergleich und Preis-Rueckrechnung - hatte aber keine einzige CSS-Regel. Sechs Knoepfe sahen deshalb aus wie die Hauptaktion, und im Kalkulator war "Loeschen" genauso einladend wie "Laden". Die Stufen: .rechnen gelb, gefuellt die EINE Hauptaktion je Bildschirm .rechnen .rechnen-sekundaer umrandet, blau Nebenaktionen .rechnen .rechnen-gefahr umrandet, rot Loeschen (zusaetzlich mit Rueckfrage) Alle drei erben Groesse, Tippziel (min-height 44px), Schrift und Fokus von .rechnen - eine Nebenaktion wird leiser, nicht kleiner. Wer sie kleiner machte, handelte sich B47 an einer neuen Stelle ein. --------------------------------------------------------------------------- */ .rechnen-sekundaer, .rechnen-gefahr { color: var(--text-blau); background: var(--karte); border: 1.5px solid var(--linie-satt); box-shadow: none; font-size: .95rem; } .rechnen-sekundaer:hover { background: var(--blau-hell); border-color: var(--blau); box-shadow: none; } .rechnen-gefahr { color: var(--rot); } .rechnen-gefahr:hover { background: var(--rot-hell); border-color: var(--rot); box-shadow: none; } /* Der Pfeil gehoert zur Hauptaktion: er zeigt nach vorn, und eine Nebenaktion fuehrt nicht weiter. */ .rechnen-sekundaer .rechnen-pfeil, .rechnen-gefahr .rechnen-pfeil { display: none; } .rechnen-pfeil { flex: 0 0 auto; transition: transform 200ms var(--ease-out); } .rechnen:hover .rechnen-pfeil { transform: translateX(4px); } @media (hover: none) { .rechnen:hover .rechnen-pfeil { transform: none; } } /* Fuß */ .fuss { max-width: var(--breite); margin: 0 auto; padding: 1.5rem; color: var(--ink-weich); font-size: .82rem; } /* ---- Responsiv ---- */ @media (max-width: 860px) { .klasse-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 720px) { /* Kleinere Ueberschrift auf schmalen Geraeten - ueber das Token, damit die gerechnete Hoehe des Wortblocks mitgeht statt stehenzubleiben. */ :root { --kopf-titel: 1.5rem; --kopf-claim-zeilen: 0; /* Zwei Titelzeilen sind reserviert: "Fahrzeugkosten-Vergleich" bricht auf einem Telefon um, "Finanzplan" nicht - ohne die Reserve waeren die Koepfe wieder verschieden hoch (gemessen: 197px gegen 209,7px bei 375px Breite). */ --kopf-worte: calc(2 * var(--kopf-titel) * var(--kopf-titel-zeile)); } /* Auf dem Telefon faellt der Untertitel weg. Zwei Gruende, beide gemessen: er brach dort auf drei bis vier Zeilen um und machte den Kopf damit je Werkzeug verschieden hoch (294,5px bis 312,9px bei 375px Breite) - genau das, was nicht sein soll -, und ein Kopf von 313px frisst die Haelfte eines Telefonbildschirms. Abschneiden waere die Alternative gewesen; versteckter Text ist schlechter als kein Text. Der Titel allein sagt auf dem kleinen Bild genug. */ .kopf-claim { display: none; } .kopf-inner { padding: 1rem calc(1.5rem - var(--kopf-rand)) .9rem; } .tafel-haupt { grid-template-columns: 1fr; } .tafel-kennzahlen { grid-template-columns: 1fr 1fr; } /* Touch-Targets ≥ 44px */ .zeile-weg { width: 2.75rem; height: 2.75rem; } .zeile-plus { padding: .7rem 1.1rem; } /* CTA als volle, gut erreichbare Leiste statt schwebender Pille über den Feldern */ .aktion { bottom: 0; margin: .5rem -1.5rem -3rem; padding: .75rem 1.5rem calc(.75rem + env(safe-area-inset-bottom, 0px)); background: color-mix(in srgb, var(--papier) 90%, transparent); backdrop-filter: blur(8px); border-top: 1px solid var(--linie-satt); } .rechnen { width: 100%; } } @media (max-width: 480px) { .tafel-kennzahlen { grid-template-columns: 1fr; } .klasse-grid { grid-template-columns: 1fr; } } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } * { transition: none !important; } } .vergleich { margin: 1.5rem 0; } .vergleich-ruecklage { text-align: center; margin: 0 0 1rem; font-size: .9rem; color: var(--ink-weich); } .vergleich-gitter { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; } @media (max-width: 640px) { .vergleich-gitter { grid-template-columns: 1fr; } } .vergleich-spalte { border: 1px solid var(--linie); border-radius: var(--radius-gr); padding: 1rem 1.1rem; background: var(--karte); } .vergleich-spalte-titel { margin: 0 0 .5rem; font-family: var(--display); } .vergleich-kern { display: flex; flex-direction: column; align-items: flex-start; margin: .25rem 0 .75rem; } .vergleich-kern-zahl { font-size: 2rem; font-weight: 700; line-height: 1; } .vergleich-kern-label { font-size: .85rem; color: var(--ink-weich); } .vergleich-liste div { display: flex; justify-content: space-between; gap: 1rem; padding: .2rem 0; border-bottom: 1px dashed var(--linie); } .vergleich-liste dt { color: var(--ink-weich); } .vergleich-liste dd { margin: 0; font-variant-numeric: tabular-nums; } .vergleich-summe dt, .vergleich-summe dd { font-weight: 700; } .vergleich-fuss { font-size: .8rem; color: #7a8494; margin-top: .75rem; } .preis { margin: 1.5rem 0; } .preis-titel { font-family: var(--display); } .preis-status { font-weight: 700; padding: .5rem .75rem; border-radius: var(--radius-gr); } .preis-bedarf { background: #fff6e6; } .preis-ok { background: #e9f7ec; } .preis-klasse { border: 1px solid var(--linie); border-radius: var(--radius-gr); padding: 1rem 1.1rem; margin: .75rem 0; background: var(--karte); } .preis-selbstkosten { color: var(--ink-weich); } /* Der siebte Scrollrahmen des Hauses - gefunden hat ihn der Waechter zu B35, nicht der Bericht. Scrollen und Randhinweis kommen aus .querlauf; die Tabelle steht in .preis-klasse, also traegt der Deckel --karte. */ .preis-tabelle { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; display: block; --querlauf-grund: var(--karte); } .preis-tabelle th, .preis-tabelle td { text-align: right; padding: .3rem .5rem; border-bottom: 1px solid var(--linie); } .preis-tabelle th:first-child, .preis-tabelle td:first-child { text-align: left; } .preis-tabelle .unter-selbstkosten { background: #fdecec; } .warn-tag { font-size: .75rem; color: #b02a2a; border: 1px solid #e0a3a3; border-radius: 4px; padding: 0 .25rem; } .preis-fuss { font-size: .8rem; color: var(--ink-weich); margin-top: .5rem; } /* Aufklappbare Begriffsklaerung (Preis-Rueckrechnung) */ .begriffe { margin: .75rem 0; border: 1px solid var(--linie); border-radius: var(--radius-gr); background: var(--karte); } .begriffe > summary { list-style: none; cursor: pointer; padding: .6rem .85rem; min-height: 44px; display: flex; align-items: center; gap: .6rem; font-weight: 600; color: var(--ink); transition: color 160ms ease-out; } .begriffe > summary::-webkit-details-marker { display: none; } .begriffe > summary::before { content: ""; flex: none; width: .5rem; height: .5rem; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); opacity: .55; transition: transform 200ms ease-out; } .begriffe[open] > summary::before { transform: rotate(-135deg); } .begriffe > summary:hover { color: var(--blau); } .begriffe-liste { margin: 0; padding: 0 .85rem .85rem; display: grid; gap: .15rem; font-size: .9rem; } .begriffe-liste dt { font-weight: 600; color: var(--ink); margin-top: .5rem; } .begriffe-liste dd { margin: 0; color: var(--ink-weich); line-height: 1.55; max-width: 68ch; } @media (prefers-reduced-motion: reduce) { .begriffe > summary, .begriffe > summary::before { transition: none; } } /* ---- Politur: einheitliche Fokus-Sichtbarkeit, Druck-Feedback, Reduced-Motion ---- */ /* Befund B47: Untergrenze fuer JEDES Kaestchen und jeden Auswahlknopf der Anwendung. Bewusst min-width/min-height statt width/height: eine Mindestgroesse setzt sich auch gegen ein spezifischeres width:1.1rem in einem Werkzeug-Stylesheet durch, ohne dass hier jede einzelne Fundstelle aufgezaehlt werden muesste. Wer spaeter ein Werkzeug hinzufuegt, bekommt die Groesse geschenkt statt sie zu vergessen. */ input[type="checkbox"], input[type="radio"] { min-width: var(--tippziel); min-height: var(--tippziel); } /* Befund B125: dieselbe Ueberlegung fuer SCHALTFLAECHEN. Am 31.08.2026 gemessen: 42 verschiedene unter 44 px, bei 390 px Breite die kleinste mit 29 px. Kein WCAG-Verstoss (die Stufe AA verlangt 24 px, und die erfuellen alle) - aber eine Abweichung vom eigenen Massstab, und am Telefon trifft man 29 px spuerbar schlechter als 44. ⚠️ EINE REGEL STATT 42 EINZELFIXES. Die Knoepfe liegen in acht Werkzeugen und tragen acht verschiedene Klassen (.bp-beispiel, .pw-embed-kopieren, .ws-zeile-hinzufuegen, .wiw-tab, ...). Wer sie einzeln nachzieht, vergisst den naechsten - so ist die Luecke ueberhaupt entstanden. ⚠️ #wpadminbar BLEIBT AUSSEN VOR. Die Adminleiste gehoert WordPress, ein Mitglied sieht sie nie, und ihre Knoepfe auf 44 px zu ziehen wuerde die Leiste zerlegen. Das :not() mit der Id gibt der Regel zugleich das Gewicht, das sie braucht, um sich gegen ein spezifischeres height in einem Werkzeug-Stylesheet zu behaupten. */ button:not(#wpadminbar *) { min-height: var(--tippziel-hand); } /* Befund B133 und B125, beide am selben fremden Element: Astras Nach-oben-Knopf. Er gehoert dem Theme, steht aber auf JEDER Werkzeugseite, ist mit tabindex="0" tastaturerreichbar - und zeigte weder beim Fokus etwas an noch mass er mehr als 32 x 32 px. Ein fremdes Element auf unserer Seite ist unsere Seite. ⚠️ Astra setzt beides an ".ast-scroll-top-icon" selbst; die eigene Fokusregel weiter unten greift ueber [tabindex] nur mit zwei Klassen Gewicht und verliert. Deshalb hier namentlich - und nicht mit !important, das bliebe unauffindbar. */ .ast-scroll-top-icon, #ast-scroll-top { min-width: var(--tippziel-hand); min-height: var(--tippziel-hand); } .ast-scroll-top-icon:focus, .ast-scroll-top-icon:focus-visible, #ast-scroll-top:focus, #ast-scroll-top:focus-visible { outline: 3px solid var(--blau); outline-offset: 2px; } /* Sichtbarer Fokus-Ring für Tastatur-Nutzer auf allen interaktiven Elementen, die noch keinen eigenen haben (Inputs/Selects behalten ihren Ring oben). */ a:focus-visible, button:focus-visible, summary:focus-visible, input[type="checkbox"]:focus-visible, input[type="radio"]:focus-visible, /* Befund B133: das Farbfeld der Fahrschul-Homepage ("Akzentfarbe auswaehlen") fiel durch jedes Raster - es ist kein Textfeld, also greift die Regel oben nicht, und input[type="color"] stand hier nicht. Am 31.08.2026 nachgemessen: beim Fokus aenderte sich an ihm NICHTS, obwohl der Browser es als tastaturfokussiert fuehrt. */ input[type="color"]:focus-visible, [tabindex]:focus-visible { outline: 2px solid var(--blau); outline-offset: 2px; border-radius: 3px; } /* Taktiles Druck-Feedback für Buttons (nur mit präzisem Zeiger). */ @media (hover: hover) and (pointer: fine) { .rechnen:active, .zeile-plus:active, .gr-weiter:active, .gr-zurueck:active, .gr-abschliessen:active, .gr-speichern-button:active, .gr-laden-button:active, .gr-pdf-knopf:active { transform: translateY(1px); } } /* Bewegungsreduktion respektieren (Animationen/Transitions herunterfahren). */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; } } /* Druck/Bildschirm-Sichtbarkeit (PDF-Export) */ .nur-druck { display: none; } @media print { /* Eingabe, Panels, Chrome & Button ausblenden */ #formular, .vergleich-panel, .preis-panel, .kein-druck, .fuss, header.kopf { display: none !important; } .nur-druck { display: block !important; } body { background: #fff; color: #000; font-size: 11pt; } /* Wrapper-Rand zuruecksetzen, Seitenrand kommt als Padding auf der .tafel (nur der Kalkulator nutzt .tafel), damit @page margin:0 die Browser-Kopf/Fusszeile unterdruecken kann, ohne dass der Inhalt am Blattrand klebt. Per :has(.tafel) exakt auf den Kalkulator gescoped -> andere Tools (z. B. Gruendungs-Leitfaden) unberuehrt. */ .huelle:has(.tafel) { padding: 0; max-width: none; } .tafel { box-shadow: none; border: 0; padding: 16mm; } .tafel-block, .annahmen-tabelle, .schild { break-inside: avoid; } .druck-kopf { margin-bottom: 12pt; border-bottom: 1.5pt solid #000; padding-bottom: 6pt; } .druck-kopf h2 { font-size: 18pt; margin: 0; } .druck-unter { color: #333; margin: 2pt 0 0; } .annahmen-tabelle { width: 100%; border-collapse: collapse; margin: 4pt 0 10pt; } .annahmen-tabelle th, .annahmen-tabelle td { text-align: left; vertical-align: top; padding: 2pt 8pt 2pt 0; border-bottom: 0.5pt solid #ccc; } /* margin:0 unterdrueckt die Browser-Kopf/Fusszeile; Seitenrand kommt als .tafel-Padding (Feedback R6). Global unschaedlich: alle 6 Tool-Stylesheets (inkl. Gruendungs-Leitfaden seit Feedback R7) setzen ihr eigenes @page{margin:0} + eigenes Padding (laden spaeter, gewinnen). */ @page { size: A4; margin: 0; } } /* Was-wäre-wenn — Live-Cockpit */ .cockpit-panel .cockpit-ergebnis { display: flex; align-items: baseline; gap: .5rem; flex-wrap: wrap; margin: .75rem 0; } .cockpit-panel .cockpit-zahl { font-size: 2rem; font-variant-numeric: tabular-nums; } .cockpit-panel .cockpit-ampel { width: .9rem; height: .9rem; border-radius: 50%; background: #bbb; display: inline-block; } .cockpit-panel .cockpit-ampel[data-stufe="gruen"] { background: #2e9e4f; } .cockpit-panel .cockpit-ampel[data-stufe="gelb"] { background: #e5b700; } .cockpit-panel .cockpit-ampel[data-stufe="rot"] { background: #d33; } /* ================= Dark-Theme Nachzug (B5) ================= Gelb/Grün/Rot (--gelb/--gruen/--rot) sind bewusst themenkonstante Signalfarben (siehe theme.css) und kippen NICHT mit. Wo sie als Text direkt auf dunklem --karte/--papier-Grund stehen, reicht ihr Kontrast im Dark-Theme nicht für AA (rot ~3:1, gruen ~3.9:1) -> aufgehellte Text-Varianten. Beim Gelb-Button kippt zusätzlich --ink auf einen hellen Wert, dadurch würde der Button-Text auf dem (konstant) gelben Grund unlesbar -> Text bleibt hier fest dunkel. */ @media screen and (prefers-color-scheme: dark) { /* :where() hält die Spezifität von .rechnen bei (0,1,0), damit spezifischere Regeln aus den Werkzeug-Stylesheets weiterhin gewinnen. Der Anlass war der blaue Dashboard-Override .db-laden .rechnen{color:#fff} - den gibt es seit B26 nicht mehr, die niedrige Spezifität ist trotzdem richtig. */ :where(:root:not([data-theme="light"])) .rechnen { color: #14181F; } /* B26: die umrandeten Stufen behalten ihre eigene Schriftfarbe - die Regel darueber gilt der GEFUELLTEN Hauptaktion. */ :where(:root:not([data-theme="light"])) .rechnen-sekundaer { color: var(--blau); } :where(:root:not([data-theme="light"])) .rechnen-gefahr { color: #F3A79B; } :root:not([data-theme="light"]) .hinweis-warn { color: #F3A79B; } :root:not([data-theme="light"]) .kapazitaet-warnung { color: #F3A79B; } :root:not([data-theme="light"]) .feld-fehler { color: #F3A79B; } :root:not([data-theme="light"]) .feld-pflicht { color: #E2B26A; } :root:not([data-theme="light"]) .mix-summe.mix-ok { color: #7EE0A6; } :root:not([data-theme="light"]) .mix-summe.mix-falsch { color: #F3A79B; } :root:not([data-theme="light"]) .zeile-weg:hover, :root:not([data-theme="light"]) .zeile-weg-karte:hover { color: #F3A79B; } :root:not([data-theme="light"]) .preis-bedarf { background: rgba(247,181,0,.16); } :root:not([data-theme="light"]) .preis-ok { background: rgba(31,138,76,.18); } :root:not([data-theme="light"]) .preis-tabelle .unter-selbstkosten { background: rgba(196,43,28,.18); } :root:not([data-theme="light"]) .warn-tag { color: #F3A79B; border-color: rgba(196,43,28,.5); } :root:not([data-theme="light"]) .fk-erfolg { color: #7EE0A6; } :root:not([data-theme="light"]) .fk-fehler { color: #F3A79B; } } :where(:root[data-theme="dark"]) .rechnen { color: #14181F; } :where(:root[data-theme="dark"]) .rechnen-sekundaer { color: var(--blau); } :where(:root[data-theme="dark"]) .rechnen-gefahr { color: #F3A79B; } :root[data-theme="dark"] .hinweis-warn { color: #F3A79B; } :root[data-theme="dark"] .kapazitaet-warnung { color: #F3A79B; } :root[data-theme="dark"] .feld-fehler { color: #F3A79B; } :root[data-theme="dark"] .feld-pflicht { color: #E2B26A; } :root[data-theme="dark"] .mix-summe.mix-ok { color: #7EE0A6; } :root[data-theme="dark"] .mix-summe.mix-falsch { color: #F3A79B; } :root[data-theme="dark"] .zeile-weg:hover, :root[data-theme="dark"] .zeile-weg-karte:hover { color: #F3A79B; } :root[data-theme="dark"] .preis-bedarf { background: rgba(247,181,0,.16); } :root[data-theme="dark"] .preis-ok { background: rgba(31,138,76,.18); } :root[data-theme="dark"] .preis-tabelle .unter-selbstkosten { background: rgba(196,43,28,.18); } :root[data-theme="dark"] .warn-tag { color: #F3A79B; border-color: rgba(196,43,28,.5); } :root[data-theme="dark"] .fk-erfolg { color: #7EE0A6; } :root[data-theme="dark"] .fk-fehler { color: #F3A79B; } .cockpit-panel .cockpit-regler { display: grid; gap: .75rem; margin: 1rem 0; } .cockpit-panel .cockpit-regler label { display: grid; gap: .25rem; } .cockpit-panel .cockpit-regler input[type="range"] { width: 100%; } .cockpit-panel .cockpit-referenz { font-variant-numeric: tabular-nums; } /* ================= Stammdaten (Profil) ================= Nutzt die geteilten Formular-Bausteine .abschnitt/.zeilen/.zeile/.feld/ .feld-klein/.feld-breit/.aktion-Ersatz/.rechnen (Muster: preiswidget.css). Nur profileigene Bausteine stehen hier. */ .fk-formular { max-width: 46rem; } /* Schmalere Eingaben als im dichten Kalkulator-Raster: Adressdaten lesen sich in einer engeren Spalte leichter (kein full-bleed Input). */ .fk-feld input { max-width: 28rem; } .fk-feld input[type="url"] { max-width: 34rem; } /* * ⚠️ UND DIESE ZWEI ZEILEN GLEICH HINTERHER. `.fk-feld input` wiegt genau so viel * wie `input[inputmode="numeric"]` (je eine Klasse plus ein Element bzw. ein * Attribut plus ein Element) - es entscheidet also die Reihenfolge, und diese Regel * steht 600 Zeilen weiter unten. Genau daran ist B124 beim ersten Anlauf haengen * geblieben: die Regel oben war richtig und wirkte in zehn Werkzeugen, aber im * Angebot und im Fahrzeugkosten-Vergleich blieben zwoelf Felder bei 448 px. Gemessen * hat es der Riegel, gesehen haette man es im Quelltext nicht. */ .fk-feld input[inputmode="numeric"], .fk-feld input[data-mass="prozent"], .fk-feld input[data-mass="anzahl"] { max-width: var(--feld-schmal); } .fk-feld input[inputmode="decimal"]:not([data-mass]) { max-width: var(--feld-mittel); } .fk-hinweis { margin: .35rem 0 0; max-width: 62ch; color: var(--ink-weich); font-size: .9rem; } .fk-pflicht { color: var(--blau); font-weight: 700; } .fk-erfolg { display: flex; align-items: center; gap: .55rem; margin: 0 0 1.5rem; padding: .8rem 1.1rem; border-radius: var(--radius); border: 1.5px solid var(--gruen); background: color-mix(in srgb, var(--gruen) 12%, var(--karte)); color: #145c33; font-weight: 600; } .fk-erfolg-icon { flex: 0 0 auto; color: var(--gruen); } .fk-fehler { margin: 0 0 1.5rem; padding: .9rem 1.1rem; border-radius: var(--radius); border: 1.5px solid var(--rot); background: var(--rot-hell); color: #7f1a10; } .fk-fehler p { margin: 0 0 .4rem; font-weight: 600; } .fk-fehler ul { margin: 0; padding-left: 1.2rem; } .fk-fehler li { margin: .15rem 0; } .fk-aktionen { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; margin-top: .5rem; } .fk-legende { margin: 0; color: var(--ink-weich); font-size: .85rem; } @media (max-width: 560px) { .fk-aktionen { flex-direction: column-reverse; align-items: stretch; } .fk-aktionen .rechnen { width: 100%; } .fk-feld input { max-width: none; } } /* Schnellstart-Block (Klassen-Vorlagen) */ .schnellstart { margin: 0 0 1.2rem; padding: 1rem 1.1rem; border: 1px solid var(--linie); border-radius: var(--radius); background: var(--blau-hell); } .schnellstart-titel { margin: 0 0 .2rem; font-family: var(--display); font-weight: 600; color: var(--text-blau); } .schnellstart-hilfe { margin: 0 0 .8rem; font-size: .86rem; color: var(--ink-weich); } .schnellstart-kacheln { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: .9rem; } .schnellstart-kachel { display: inline-flex; align-items: center; gap: .4rem; cursor: pointer; padding: .35rem .6rem; border: 1px solid var(--linie-satt); border-radius: 999px; background: var(--karte); font-size: .84rem; } .schnellstart-kachel input { margin: 0; } /* Auf Touch-Geraeten die Trefferflaeche auf die empfohlenen 44px anheben: die Klassen stehen dicht nebeneinander, 33px provozierten Fehltipps. Mit Maus bleiben die Pillen kompakt. */ @media (pointer: coarse) { .schnellstart-kachel { min-height: 44px; padding-inline: .75rem; } } .schnellstart-knopf { align-self: flex-start; } /* Was-wäre-wenn: Reiter-Umschalter Cockpit / Szenarien */ .wiw-reiter { display: inline-flex; gap: 2px; margin: 0 0 .9rem; padding: 3px; background: var(--papier); border: 1px solid var(--linie); border-radius: 999px; } .wiw-tab { border: 0; background: transparent; padding: .4rem 1.1rem; border-radius: 999px; font: inherit; font-weight: 600; color: var(--ink-weich); cursor: pointer; } .wiw-tab.ist-aktiv { background: var(--blau); color: var(--auf-blau); } .wiw-tab:focus-visible { outline: 2px solid var(--blau); outline-offset: 2px; } /* Szenarien: drei Spalten nebeneinander */ .szenarien-hinweis { color: var(--ink-weich); margin: 0 0 1rem; } .szenarien-spalten { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; } @media (max-width: 720px) { .szenarien-spalten { grid-template-columns: 1fr; } } .szenario-spalte { border: 1px solid var(--linie); border-radius: var(--radius); padding: 1rem 1.1rem; background: var(--karte); display: flex; flex-direction: column; gap: .5rem; } .szenario-spalte.ist-referenz { border-color: var(--blau); box-shadow: inset 0 0 0 1px var(--blau); } .szenario-titel { margin: 0; font-size: 1.05rem; } .szenario-ergebnis { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; } .szenario-zahl { font-family: var(--display); font-weight: 700; font-size: 1.55rem; } .szenario-einheit { font-size: .76rem; color: var(--ink-weich); } .szenario-referenz { font-size: .8rem; color: var(--ink-weich); margin: 0; } .szenario-regler { display: grid; gap: .55rem; } .szenario-regler label { display: grid; gap: .2rem; font-size: .85rem; } .szenario-regler input[type="range"] { width: 100%; } .szenario-status { min-height: 1em; } /* ---- Konto löschen (seit 26.08.2026) -------------------------------------- Bewusst ohne Signalfarbe und ohne Rahmen: Rot zieht den Blick an, und dieser Klick soll gerade NICHT aus Versehen passieren. Die Bremse ist die Eingabe der eigenen Adresse, nicht die Optik. Der Knopf ist deshalb ein Linienknopf, kein gefüllter - er steht am Ende der Seite und darf dort ruhig sein. */ .konto-loeschen .fk-loesch-formular { margin-top: .9rem; } .konto-loeschen input[type="email"] { max-width: 26rem; } .fk-loesch-knopf { font: inherit; padding: .55rem .9rem; cursor: pointer; border: 1px solid var(--rot); border-radius: .4rem; background: transparent; color: var(--rot); } .fk-loesch-knopf:hover { background: var(--rot); color: #fff; } .fk-loesch-knopf:focus-visible { outline: 2px solid var(--rot); outline-offset: 2px; } .fk-loesch-meldung { margin: 0 0 .8rem; padding: .6rem .8rem; border-radius: .3rem; border-left: 4px solid var(--gruen); background: var(--blau-hell); } .fk-loesch-meldung-fehler { border-left-color: var(--rot); background: var(--rot-hell); } /* Dark-Theme: dieselbe Begründung wie bei .mv-meldung - die hellen Flächentoken tragen auf dunklem Grund nicht, der farbige Rand bleibt der Träger der Aussage. --rot als TEXTfarbe reicht dort ebenfalls nicht (gemessen 3,34:1), deshalb die aufgehellte Variante wie bei .hinweis-warn und .feld-fehler. */ @media screen and (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .fk-loesch-meldung { background: transparent; } :root:not([data-theme="light"]) .fk-loesch-meldung-fehler { background: transparent; } :root:not([data-theme="light"]) .fk-loesch-knopf { border-color: #F3A79B; color: #F3A79B; } :root:not([data-theme="light"]) .fk-loesch-knopf:hover { background: #F3A79B; color: #14181F; } } :root[data-theme="dark"] .fk-loesch-meldung { background: transparent; } :root[data-theme="dark"] .fk-loesch-meldung-fehler { background: transparent; } :root[data-theme="dark"] .fk-loesch-knopf { border-color: #F3A79B; color: #F3A79B; } :root[data-theme="dark"] .fk-loesch-knopf:hover { background: #F3A79B; color: #14181F; }