/* ===================================================================== 180KKE — festwerte.css Stand 11.09.2026 · Richtung "Werkstatt" (Entscheidung Thomas, 11.09.) Ersetzt die erste Fassung. Geändert: ruhiger, weniger Rahmen, mehr Luft, Farbe nur dort, wo sie etwas bedeutet. GELTUNGSBEREICH Die Grundregeln unten gelten nur innerhalb von .stil-b. Jede in Phase 4 umgestellte Maske bekommt diese Klasse an ihrem Container. Alte Masken bleiben unberührt. REGEL Nur diese Datei definiert Farben, Schriften, Abstände, Radien und Rahmen. bauteile.js und die Masken benutzen ausschließlich die Variablen von hier. Kein Hex-Wert, kein Pixel-Abstand woanders. WAS SICH SPÄTER ÄNDERN LÄSST Alles in dieser Datei — an einer Stelle, für die ganze App. Die Schalter unter "Bauweise" stellen ganze Erscheinungsbilder um: Rahmen an/aus, Ecken rund/kantig, dicht/luftig. Was NICHT hierüber geht, ist die Anordnung einer einzelnen Maske (welche Spalte wo steht) — das bleibt Handarbeit an der jeweiligen Maske. ===================================================================== */ /* ---------- Schrift-Dateien: Inter 4.1, lokal aus public/fonts/ ---------- Quelle: offizielle Veröffentlichung github.com/rsms/inter (v4.1), Lizenz SIL Open Font License 1.1 (public/fonts/Inter-LICENSE.txt). Keine Verbindung zu Google. */ @font-face { font-family: 'Inter'; font-style: normal; font-weight: 400; font-display: swap; src: url('../fonts/Inter-Regular.woff2') format('woff2'); } @font-face { font-family: 'Inter'; font-style: normal; font-weight: 500; font-display: swap; src: url('../fonts/Inter-Medium.woff2') format('woff2'); } @font-face { font-family: 'Inter'; font-style: normal; font-weight: 600; font-display: swap; src: url('../fonts/Inter-SemiBold.woff2') format('woff2'); } @font-face { font-family: 'Inter'; font-style: normal; font-weight: 700; font-display: swap; src: url('../fonts/Inter-Bold.woff2') format('woff2'); } /* ---------- Schrift-Dateien: IBM Plex Sans/Mono, lokal (Altbestand) ---------- Die Schrift der bestehenden Masken. Bis 11.09.2026 kam sie über einen Link zu Google; seitdem liegen genau dieselben Dateien lokal in public/fonts/ (Google Fonts ibmplexsans v23, ibmplexmono v20, gleiche Zeichenbereiche per unicode-range). Lizenz SIL OFL 1.1: public/fonts/IBMPlex-LICENSE.txt. Plex Sans entfällt, sobald keine Maske sie mehr nutzt (nach Phase 4). */ @font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 400; font-display: swap; src: url('../fonts/IBMPlexMono-400-cyrillic-ext.woff2') format('woff2'); unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F; } @font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 400; font-display: swap; src: url('../fonts/IBMPlexMono-400-cyrillic.woff2') format('woff2'); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; } @font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 400; font-display: swap; src: url('../fonts/IBMPlexMono-400-vietnamese.woff2') format('woff2'); unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB; } @font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 400; font-display: swap; src: url('../fonts/IBMPlexMono-400-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 400; font-display: swap; src: url('../fonts/IBMPlexMono-400-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* Plex Mono 500 seit 12.09.2026 (Werte in Zahlenfeldern halbfett) – dieselbe Quelle wie 400/600: Google Fonts ibmplexmono v20, einmalig heruntergeladen. */ @font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 500; font-display: swap; src: url('../fonts/IBMPlexMono-500-cyrillic-ext.woff2') format('woff2'); unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F; } @font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 500; font-display: swap; src: url('../fonts/IBMPlexMono-500-cyrillic.woff2') format('woff2'); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; } @font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 500; font-display: swap; src: url('../fonts/IBMPlexMono-500-vietnamese.woff2') format('woff2'); unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB; } @font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 500; font-display: swap; src: url('../fonts/IBMPlexMono-500-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 500; font-display: swap; src: url('../fonts/IBMPlexMono-500-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 600; font-display: swap; src: url('../fonts/IBMPlexMono-600-cyrillic-ext.woff2') format('woff2'); unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F; } @font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 600; font-display: swap; src: url('../fonts/IBMPlexMono-600-cyrillic.woff2') format('woff2'); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; } @font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 600; font-display: swap; src: url('../fonts/IBMPlexMono-600-vietnamese.woff2') format('woff2'); unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB; } @font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 600; font-display: swap; src: url('../fonts/IBMPlexMono-600-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 600; font-display: swap; src: url('../fonts/IBMPlexMono-600-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'IBM Plex Sans'; font-style: normal; font-weight: 400; font-display: swap; src: url('../fonts/IBMPlexSans-400-cyrillic-ext.woff2') format('woff2'); unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F; } @font-face { font-family: 'IBM Plex Sans'; font-style: normal; font-weight: 400; font-display: swap; src: url('../fonts/IBMPlexSans-400-cyrillic.woff2') format('woff2'); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; } @font-face { font-family: 'IBM Plex Sans'; font-style: normal; font-weight: 400; font-display: swap; src: url('../fonts/IBMPlexSans-400-greek.woff2') format('woff2'); unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF; } @font-face { font-family: 'IBM Plex Sans'; font-style: normal; font-weight: 400; font-display: swap; src: url('../fonts/IBMPlexSans-400-vietnamese.woff2') format('woff2'); unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB; } @font-face { font-family: 'IBM Plex Sans'; font-style: normal; font-weight: 400; font-display: swap; src: url('../fonts/IBMPlexSans-400-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'IBM Plex Sans'; font-style: normal; font-weight: 400; font-display: swap; src: url('../fonts/IBMPlexSans-400-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'IBM Plex Sans'; font-style: normal; font-weight: 500; font-display: swap; src: url('../fonts/IBMPlexSans-500-cyrillic-ext.woff2') format('woff2'); unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F; } @font-face { font-family: 'IBM Plex Sans'; font-style: normal; font-weight: 500; font-display: swap; src: url('../fonts/IBMPlexSans-500-cyrillic.woff2') format('woff2'); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; } @font-face { font-family: 'IBM Plex Sans'; font-style: normal; font-weight: 500; font-display: swap; src: url('../fonts/IBMPlexSans-500-greek.woff2') format('woff2'); unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF; } @font-face { font-family: 'IBM Plex Sans'; font-style: normal; font-weight: 500; font-display: swap; src: url('../fonts/IBMPlexSans-500-vietnamese.woff2') format('woff2'); unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB; } @font-face { font-family: 'IBM Plex Sans'; font-style: normal; font-weight: 500; font-display: swap; src: url('../fonts/IBMPlexSans-500-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'IBM Plex Sans'; font-style: normal; font-weight: 500; font-display: swap; src: url('../fonts/IBMPlexSans-500-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'IBM Plex Sans'; font-style: normal; font-weight: 600; font-display: swap; src: url('../fonts/IBMPlexSans-600-cyrillic-ext.woff2') format('woff2'); unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F; } @font-face { font-family: 'IBM Plex Sans'; font-style: normal; font-weight: 600; font-display: swap; src: url('../fonts/IBMPlexSans-600-cyrillic.woff2') format('woff2'); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; } @font-face { font-family: 'IBM Plex Sans'; font-style: normal; font-weight: 600; font-display: swap; src: url('../fonts/IBMPlexSans-600-greek.woff2') format('woff2'); unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF; } @font-face { font-family: 'IBM Plex Sans'; font-style: normal; font-weight: 600; font-display: swap; src: url('../fonts/IBMPlexSans-600-vietnamese.woff2') format('woff2'); unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB; } @font-face { font-family: 'IBM Plex Sans'; font-style: normal; font-weight: 600; font-display: swap; src: url('../fonts/IBMPlexSans-600-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'IBM Plex Sans'; font-style: normal; font-weight: 600; font-display: swap; src: url('../fonts/IBMPlexSans-600-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'IBM Plex Sans'; font-style: normal; font-weight: 700; font-display: swap; src: url('../fonts/IBMPlexSans-700-cyrillic-ext.woff2') format('woff2'); unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F; } @font-face { font-family: 'IBM Plex Sans'; font-style: normal; font-weight: 700; font-display: swap; src: url('../fonts/IBMPlexSans-700-cyrillic.woff2') format('woff2'); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; } @font-face { font-family: 'IBM Plex Sans'; font-style: normal; font-weight: 700; font-display: swap; src: url('../fonts/IBMPlexSans-700-greek.woff2') format('woff2'); unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF; } @font-face { font-family: 'IBM Plex Sans'; font-style: normal; font-weight: 700; font-display: swap; src: url('../fonts/IBMPlexSans-700-vietnamese.woff2') format('woff2'); unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB; } @font-face { font-family: 'IBM Plex Sans'; font-style: normal; font-weight: 700; font-display: swap; src: url('../fonts/IBMPlexSans-700-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'IBM Plex Sans'; font-style: normal; font-weight: 700; font-display: swap; src: url('../fonts/IBMPlexSans-700-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } :root { /* ---------- Schrift ---------- */ --schrift: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif; --schrift-mono: 'IBM Plex Mono', ui-monospace, monospace; --text-xs: 12px; /* Randnotizen */ --text-s: 12.5px; /* Bezeichnungen unter Zahlen, Nebentexte */ --text-m: 14px; /* Standard: Tabellen, Formulare, Knöpfe */ --text-l: 14px; /* Abschnittsüberschriften (fett, nicht größer) */ --text-xl: 25px; /* Kennzahlen */ --text-2xl: 25px; /* Seitentitel */ --gewicht-normal: 400; --gewicht-halb: 500; /* hervorgehobene Werte */ --gewicht-fett: 600; /* Überschriften, Summen */ --eng: -.025em; /* Laufweite großer Überschriften */ /* ---------- Farben: Text ---------- */ --tinte: #17211f; /* Haupttext, Überschriften */ --tinte-2: #5d6b67; /* Zweittext, Zeiten */ --tinte-3: #687572; /* Bezeichnungen, Platzhalter, Ruhiges. 4,5:1 gegen --grund (vorher #8b9895 = 2,8:1, auf großen Schirmen zu blass – 12.09.2026) */ /* ---------- Farben: Fläche ---------- */ --grund: #f7f8f7; /* Seitenhintergrund */ --flaeche: #ffffff; /* Eingabefelder, Dialoge */ --linie: #e8ebe9; /* Trennlinien in Listen und Tabellen */ --linie-2: #dde2df; /* Feldunterkanten, Knopfränder */ --linie-stark: var(--tinte); /* Abschnittskante, Summenstrich */ --band: #e7ecea; /* Titelband zwischen Kästchen (Angebot, 13.09.2026) */ --feld-auf-karte: #f3f6f5; /* Eingabefeld auf einer weißen Karte – sonst verschwände es auf ihr */ /* ---------- Farben: Signal ---------- Sparsam einsetzen. Teal markiert Aktives, nicht Hübsches. */ --signal: #0f8f6f; /* aktiv, läuft, Fokus */ --gut: #0f8f6f; --warn: #b8791a; --krit: #c4453f; --signal-hauch: #eef5f2; /* nur für Flächen, die wirklich Farbe brauchen */ --warn-hauch: #faf2e4; --krit-hauch: #fbeeed; /* ---------- Abstände ---------- */ --raum-1: 4px; --raum-2: 8px; --raum-3: 12px; --raum-4: 18px; --raum-5: 26px; --raum-6: 34px; /* zwischen Abschnitten */ --raum-7: 44px; /* zwischen Spalten */ /* ---------- Lesebreite ---------- Höchstbreite einer Arbeitsspalte (Angebot: die Positionen). Sie bestimmt die Mitte; Seitenspalten docken an, Kopf und Werkzeugleiste werden genau so breit wie der Block, der Rest ist Rand (13.09.2026). 87.5rem = rund 1400 px. */ --zeile-max: 87.5rem; /* ---------- Arbeitszeile (Angebot, Thomas 13.09.2026) ---------- Mindest- und Höchstmaße statt fester Spalten. Die Zeile bricht um, sobald die Mindestbreiten nicht mehr nebeneinander passen – die Schwelle folgt allein aus diesen Werten, sie steht nirgends als Zahl. cqi = Breite der Positionsliste (Container as-positionen), nicht des Fensters. Wer hier einen Wert ändert, ändert jede Breite mit. */ --bez-min: 28ch; /* Bezeichnung: nie schmaler (rund 30 Zeichen) */ --menge-breite: clamp(4.5em, 6.5cqi, 6.5em); /* Menge, wächst mit */ --einheit-breite: 5.5em; /* Einheit, fest: das Feld hat eine Vorschlagsliste, deren Pfeil Platz frisst – schmaler zeigt es nur noch „St" statt „Stk", und ein Klick in die Mitte trifft den Pfeil statt das Feld (gemessen 13.09.2026) */ --betrag-breite: 7em; /* EP: „99.999,99 €“ passt, Beträge fluchten */ --symbolknopf: 2.4em; /* Kopieren, Löschen */ --rechenfeld-min: 5.5em; /* EK, Multi, Zeit, Sätze */ --rechenfeld-max: 7.5em; --zeile-einzug: clamp(0em, 100cqi - 25em, 5.4em); /* Rechenreihe, Detail: am Handy 0 */ --zeile-knopfraum: clamp(0em, 100cqi - 30em, 2 * var(--symbolknopf) + 2 * var(--raum-2)); /* rechts in der Rechenreihe, damit ihr EP unter dem EP der Zeile steht; in einer schmalen Liste 0 – dort ist eine Feldspalte mehr wichtiger */ --zeile-hoehe: 1.45; --listen-zeile: 12px; /* Polsterung einer Listenzeile oben/unten */ /* ---------- Bauweise: die Schalter ---------- Hier wird das Erscheinungsbild umgestellt, nicht in den Bauteilen. */ --rand-staerke: 1px; --karte-rahmen: 0; /* 0 = rahmenlos (Werkstatt). auf var(--rand-staerke) setzen, wenn Blöcke wieder Kästen sein sollen */ --karte-flaeche: transparent; /* auf var(--flaeche) für Kartenoptik */ --karte-schatten: none; --feld-rahmen: 0; /* Werkstatt: nur Unterkante */ --feld-flaeche: var(--flaeche); /* Fläche eines Eingabefelds. Eine Maske setzt sie auf ihrer weißen Karte auf var(--feld-auf-karte) (13.09.2026) */ --feld-unterkante: var(--rand-staerke) solid var(--linie-2); --radius: 4px; /* Dialoge, Flächen */ --radius-karte: 8px; /* weiße Kästchen auf dem Grund (Positionen, Panels) */ --schatten-leicht: 0 1px 3px rgba(23, 33, 31, .07); /* hebt ein offenes Kästchen ab */ --radius-klein: 3px; /* Felder */ --radius-knopf: 999px; /* Werkstatt: Kapselform. 4px = kantig */ /* ---------- Bedienung ---------- */ --fokus: 2px solid var(--signal); --fokus-abstand: 2px; --ziel-min: 42px; /* Mindesthöhe für Finger */ } /* ===================================================================== Grundregeln — nur im Stil-Bereich ===================================================================== */ .stil-b { font-family: var(--schrift); font-size: var(--text-m); line-height: var(--zeile-hoehe); color: var(--tinte); background: var(--grund); } .stil-b h1 { font-size: var(--text-2xl); font-weight: var(--gewicht-fett); letter-spacing: var(--eng); } .stil-b h2 { font-size: var(--text-l); font-weight: var(--gewicht-fett); } /* Bedienelemente erben die Schrift nicht von selbst: der Browser gibt input, select, textarea und button eine eigene (Systemschrift, eigene Groesse). :where() haelt die Regel ohne Gewicht – sie schlaegt nur die Voreinstellung des Browsers, nie eine Regel der Bauteile oder einer Maske (Knopf halbfett, Zahlenfelder in Mono bleiben). */ :where(.stil-b) :where(input, select, textarea, button) { font: inherit; } /* Werte in Feldern halbfett (Sichtprüfung auf 3440 px, 12.09.2026: 400er Werte wirkten auf großen Schirmen zu blass). Gewicht 0,1,1: schlägt das font:inherit der Bauteil-Felder (.bt-eingabe), verliert gegen gezielte Regeln einer Maske (Titelfeld fett), die nach dieser Datei geladen werden. Platzhalter bleiben normal – ein leeres Feld soll nicht gefüllt aussehen. */ .stil-b input, .stil-b select, .stil-b textarea { font-weight: var(--gewicht-halb); } .stil-b input::placeholder, .stil-b textarea::placeholder { font-weight: var(--gewicht-normal); } /* Zahlen außerhalb von Feldern ebenso; ohne Gewicht, damit fette Summen fett bleiben. */ :where(.stil-b) :where(.zahl, .kennzahl) { font-weight: var(--gewicht-halb); } /* Zahlenspalten stehen immer gleich breit */ .stil-b .zahl, .stil-b td.zahl, .stil-b .kennzahl { font-variant-numeric: tabular-nums; } /* Sichtbarer Fokus, überall gleich */ .stil-b :focus-visible { outline: var(--fokus); outline-offset: var(--fokus-abstand); } @media (prefers-reduced-motion: reduce) { .stil-b *, .stil-b *::before, .stil-b *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; } }