/* ============================================================================= EmKater WWS - Oberflaeche Bewusst dicht gesetzt: die Anwender arbeiten mit Barcodescanner und Tastatur an langen Listen, nicht mit der Maus an Kacheln. Farben laufen ausschliesslich ueber die Merkmale (Custom Properties) unten. Es gibt genau zwei Saetze: Hellthema und Dunkelthema. - ohne Zutun: Hellthema - Systemeinstellung: @media (prefers-color-scheme: dark) - Handauswahl gewinnt: bzw. "dark" (setzt public/assets/theme.js) Der Dunkelsatz steht zweimal im Quelltext (einmal fuer die Handauswahl, einmal fuer die Systemeinstellung). Beide Bloecke muessen gleich sein - `php bin/kontrast-pruefung.php` prueft das mit und rechnet zusaetzlich alle Vordergrund-/Hintergrundpaare nach WCAG durch. ============================================================================= */ /* --- Hellthema (Vorgabe) --------------------------------------------------- */ :root { color-scheme: light; /* Marke und Signale */ --gruen: #5a9c00; /* Markenflaeche, immer mit --auf-gruen beschriftet */ --gruen-dunkel: #3f6d00; /* dunkles Gruen fuer Rahmen, Punkte UND Schrift */ --gruen-hover: #529000; /* Hoverflaeche der Primaertaste, traegt --auf-gruen */ --gruen-text: #3f6d00; /* gruene Schrift und Symbole */ --auf-gruen: #10190a; /* Schrift auf gruener Flaeche */ --rot: #c0392b; --rot-text: #b02a1c; --auf-rot: #ffffff; --gelb: #c07a00; --gelb-text: #8a5200; --auf-gelb: #1e1400; --blau: #2a6ebb; --blau-text: #1f5fa8; --auf-blau: #ffffff; /* Schrift */ --schrift: #1b1d1a; --schrift-hell: #5b6157; /* Hilfs- und Nebentexte */ /* Flaechen */ --flaeche: #ffffff; /* Karten, Tabellenkoerper, Eingaben */ --flaeche-alt: #eff3e9; /* Seitengrund, Nur-Lesen-Felder, flache Reiter */ --flaeche-hover: #e2e9d6; /* Zeilen- und Tastenhover */ --zebra: #f3f7ec; /* jede zweite Tabellenzeile */ --tabellenkopf: #eaefe1; /* Linien */ --linie: #dfe3d9; /* schmueckende Trennung */ --linie-hell: #ecefe7; --linie-stark: #848c7d; /* Rahmen von Bedienelementen, mind. 3:1 */ /* Eingabefelder */ --feld-flaeche: #ffffff; --platzhalter: #6c7367; --deaktiviert-flaeche: #eceee8; --deaktiviert-schrift: #5b6157; --fokus: #2f6a00; /* Fokusrahmen bei Tastaturbedienung */ /* Kopfzeile (in beiden Themen dunkel) */ --kopf: #1b1d1a; --kopf-schrift: #f4f6f1; --kopf-schrift-leise: #b8c0b1; --kopf-feld: #2a2e27; --kopf-feld-rand: #767f6f; --kopf-platzhalter: #a8b1a1; --kopf-hover: #33382f; /* Meldungen */ --erfolg-flaeche: #edf6e0; --erfolg-schrift: #2c5200; --hinweis-flaeche: #e6eff9; --hinweis-schrift: #14487f; --fehler-flaeche: #fbeae8; --fehler-schrift: #96241a; /* Trefferhervorhebung */ --mark-flaeche: #ffe680; --mark-schrift: #33290a; --mark-rand: #b07f00; /* Unterstrich, damit der Treffer nicht nur farbig ist */ /* --- Abstandsleiter ------------------------------------------------------- Sieben Stufen, sonst nichts. Wer einen Abstand braucht, nimmt die naechstliegende Stufe und erfindet keinen Zwischenwert. Begruendung und Zuordnung stehen in docs/GESTALTUNG.md. 0 2px Haaransatz: Zeile unter Zeile im selben Block 1 4px Beschriftung ueber Feld, Symbol an Text 2 8px Geschwister nebeneinander: Tasten, Marken, Felder 3 12px Innenrand kleiner Bausteine (Kennzahl, Suchleiste, Zelle) 4 16px Innenrand Karte, Abstand zwischen zwei Bausteinen 5 24px Abstand zwischen Abschnitten 6 32px Abstand zwischen grossen Bloecken, Leerzustaende */ --abstand-0: 2px; --abstand-1: 4px; --abstand-2: 8px; --abstand-3: 12px; --abstand-4: 16px; --abstand-5: 24px; --abstand-6: 32px; /* Innenrand der Inhaltsspalte. Steht als Merkmal, weil die Bereichsreiter sich mit einem negativen Rand genau darauf zurueckziehen (layout.css) - zwei getrennte Zahlen sind dort schon einmal auseinandergelaufen. */ --inhalt-y: var(--abstand-4); --inhalt-x: var(--abstand-5); /* --- Schriftleiter -------------------------------------------------------- Sieben Stufen mit fester Aufgabe. Andere Groessen gibt es nicht. Ausgenommen sind Zeichen, die nur in ihr Kaestchen passen muessen (Hilfemarke, Aufklappwinkel) - das ist Feinstellung, keine Rangfolge. */ --text-mini: 11px; /* Marke, Zaehler in der Marke, Kleinstzusatz */ --text-klein: 12px; /* Feldbeschriftung, Hilfstext, Nebenzeile */ --text-liste: 13px; /* Tabellen und dichte Listen */ --text-grund: 14px; /* Grundschrift */ --text-titel: 16px; /* Ueberschrift im Baustein (h2, h3) */ --text-gross: 20px; /* Seitentitel (h1) */ --text-zahl: 24px; /* Kennzahl, Kachelwert */ /* --- Rundung, Linie, Schatten -------------------------------------------- Je eine Entscheidung. Rundung: klein fuer Bedienelemente, gross fuer Behaelter, Pille fuer Marken. Linie: immer 1px; die Farbe traegt die Aussage, nicht die Staerke. Schatten: nur was ueber der Seite schwebt - Karten und Tabellen tragen eine Linie, keinen Schatten. */ --radius: 6px; --radius-gross: 10px; --radius-marke: 999px; --linie-breite: 1px; --kopfhoehe: 46px; --schatten: 0 1px 2px rgba(20, 30, 10, .06); --schatten-hoch: 0 6px 20px rgba(20, 30, 10, .14); --schriftfamilie: system-ui, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --mono: ui-monospace, "Cascadia Mono", Consolas, "Liberation Mono", monospace; } /* --- Dunkelthema, Handauswahl --------------------------------------------- */ :root[data-theme="dark"] { color-scheme: dark; --gruen: #72c000; --gruen-dunkel: #6fb800; --gruen-hover: #5fa300; --gruen-text: #9ada2b; --auf-gruen: #10190a; --rot: #e0574a; --rot-text: #ff9384; --auf-rot: #240906; --gelb: #e2a02c; --gelb-text: #f0b74a; --auf-gelb: #241800; --blau: #4f8fd8; --blau-text: #7fb7f0; --auf-blau: #06182b; --schrift: #e7eae2; --schrift-hell: #a6ad9d; --flaeche: #1e231c; --flaeche-alt: #171b15; --flaeche-hover: #30362c; --zebra: #262c24; --tabellenkopf: #262c23; --linie: #363c32; --linie-hell: #272c24; --linie-stark: #737c6c; --feld-flaeche: #141811; --platzhalter: #9aa291; --deaktiviert-flaeche: #22261f; --deaktiviert-schrift: #a6ad9d; --fokus: #8ed000; --kopf: #12150f; --kopf-schrift: #e7eae2; --kopf-schrift-leise: #a6ad9d; --kopf-feld: #22271f; --kopf-feld-rand: #6b7464; --kopf-platzhalter: #9aa291; --kopf-hover: #2a3026; --erfolg-flaeche: #1b2a10; --erfolg-schrift: #b7e06a; --hinweis-flaeche: #132436; --hinweis-schrift: #9ec9f2; --fehler-flaeche: #331714; --fehler-schrift: #ffa79a; --mark-flaeche: #5d4d00; --mark-schrift: #ffeda6; --mark-rand: #d9b400; --schatten: 0 1px 2px rgba(0, 0, 0, .5); --schatten-hoch: 0 6px 20px rgba(0, 0, 0, .6); } /* --- Dunkelthema, Systemeinstellung (nur ohne gegenteilige Handauswahl) ---- */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { color-scheme: dark; --gruen: #72c000; --gruen-dunkel: #6fb800; --gruen-hover: #5fa300; --gruen-text: #9ada2b; --auf-gruen: #10190a; --rot: #e0574a; --rot-text: #ff9384; --auf-rot: #240906; --gelb: #e2a02c; --gelb-text: #f0b74a; --auf-gelb: #241800; --blau: #4f8fd8; --blau-text: #7fb7f0; --auf-blau: #06182b; --schrift: #e7eae2; --schrift-hell: #a6ad9d; --flaeche: #1e231c; --flaeche-alt: #171b15; --flaeche-hover: #30362c; --zebra: #262c24; --tabellenkopf: #262c23; --linie: #363c32; --linie-hell: #272c24; --linie-stark: #737c6c; --feld-flaeche: #141811; --platzhalter: #9aa291; --deaktiviert-flaeche: #22261f; --deaktiviert-schrift: #a6ad9d; --fokus: #8ed000; --kopf: #12150f; --kopf-schrift: #e7eae2; --kopf-schrift-leise: #a6ad9d; --kopf-feld: #22271f; --kopf-feld-rand: #6b7464; --kopf-platzhalter: #9aa291; --kopf-hover: #2a3026; --erfolg-flaeche: #1b2a10; --erfolg-schrift: #b7e06a; --hinweis-flaeche: #132436; --hinweis-schrift: #9ec9f2; --fehler-flaeche: #331714; --fehler-schrift: #ffa79a; --mark-flaeche: #5d4d00; --mark-schrift: #ffeda6; --mark-rand: #d9b400; --schatten: 0 1px 2px rgba(0, 0, 0, .5); --schatten-hoch: 0 6px 20px rgba(0, 0, 0, .6); } } * { box-sizing: border-box; } html, body { margin: 0; padding: 0; font-family: var(--schriftfamilie); font-size: var(--text-grund); line-height: 1.45; color: var(--schrift); background: var(--flaeche-alt); -webkit-text-size-adjust: 100%; } a { color: var(--blau-text); text-decoration: none; } a:hover { text-decoration: underline; } /* Ein einziger, deutlich sichtbarer Fokusrahmen fuer die Tastaturbedienung. Zwei Ringe: aussen die Themafarbe, innen die Flaeche - so bleibt er auf hellem wie auf dunklem Grund erkennbar. */ :focus-visible { outline: 2px solid var(--fokus); outline-offset: 2px; border-radius: 2px; } .kopf :focus-visible { outline-color: var(--gruen); } ::selection { background: var(--gruen); color: var(--auf-gruen); } /* --- Kopfzeile ------------------------------------------------------------ */ .kopf { display: flex; align-items: center; gap: var(--abstand-4); min-height: var(--kopfhoehe); background: var(--kopf); color: var(--kopf-schrift); /* Die Hoehe bestimmt --kopfhoehe, nicht der Innenrand: an ihr haengen die klebenden Tabellenkoepfe und die Seitenspalte. */ padding: var(--abstand-1) var(--abstand-4); position: sticky; top: 0; z-index: 20; } .marke { display: flex; align-items: center; gap: var(--abstand-2); color: var(--kopf-schrift); } .marke:hover { text-decoration: none; } .marke-m { background: var(--gruen); color: var(--auf-gruen); font-weight: 800; width: 26px; height: 26px; display: grid; place-items: center; border-radius: var(--radius); } .marke-text { font-weight: 700; letter-spacing: -.02em; line-height: 1.1; } .marke-text small { display: block; font-weight: 500; font-size: var(--text-mini); color: var(--gruen); letter-spacing: .06em; } .schnellsuche { flex: 1; display: flex; gap: var(--abstand-2); max-width: 620px; } .schnellsuche input { flex: 1; padding: var(--abstand-2) var(--abstand-3); border: var(--linie-breite) solid var(--kopf-feld-rand); border-radius: var(--radius); background: var(--kopf-feld); color: var(--kopf-schrift); font-size: var(--text-grund); } .schnellsuche input::placeholder { color: var(--kopf-platzhalter); opacity: 1; } .schnellsuche input:focus { outline: 2px solid var(--gruen); outline-offset: 0; border-color: var(--gruen); } .schnellsuche button { padding: var(--abstand-2) var(--abstand-4); border: var(--linie-breite) solid var(--gruen); border-radius: var(--radius); background: var(--gruen); color: var(--auf-gruen); font-weight: 600; cursor: pointer; } .schnellsuche button:hover { background: var(--gruen-hover); border-color: var(--gruen-hover); } .kopf-rechts { display: flex; align-items: center; gap: var(--abstand-3); margin-left: auto; } .benutzer { text-align: right; line-height: 1.2; } .benutzer small { display: block; color: var(--kopf-schrift-leise); font-size: var(--text-mini); } .btn-schlicht { background: transparent; border: var(--linie-breite) solid var(--kopf-feld-rand); color: var(--kopf-schrift); padding: var(--abstand-2) var(--abstand-3); border-radius: var(--radius); cursor: pointer; font: inherit; } .btn-schlicht:hover { background: var(--kopf-hover); } /* Umschalter Hell/Dunkel. Wird von theme.js eingehaengt, wenn im Markup kein Element mit [data-thema-schalter] vorhanden ist. */ .thema-schalter { display: inline-flex; align-items: center; gap: var(--abstand-2); white-space: nowrap; } .thema-schalter .thema-zeichen { display: inline-flex; } .thema-schalter .sym { color: currentColor; width: 16px; height: 16px; vertical-align: 0; } .thema-schalter .thema-text { font-size: var(--text-klein); } /* Auf Seiten ohne Kopfzeile (Anmeldung, Fehlerseiten) legt theme.js den Schalter frei oben rechts ab - dort gelten die Seitenfarben, nicht die der dunklen Kopfzeile. */ .thema-schalter-frei { position: fixed; top: var(--abstand-3); right: var(--abstand-3); z-index: 40; background: var(--flaeche); border-color: var(--linie-stark); color: var(--schrift); box-shadow: var(--schatten); } .thema-schalter-frei:hover { background: var(--flaeche-hover); } @media (max-width: 760px) { .thema-schalter .thema-text { display: none; } } /* --- Rumpf / Navigation --------------------------------------------------- */ .rumpf { display: flex; align-items: flex-start; min-height: calc(100vh - var(--kopfhoehe)); } .navi { width: 232px; flex: 0 0 232px; background: var(--flaeche); border-right: var(--linie-breite) solid var(--linie); padding: var(--abstand-2) 0 var(--abstand-6); position: sticky; top: var(--kopfhoehe); max-height: calc(100vh - var(--kopfhoehe)); overflow-y: auto; } .navi details { border-bottom: var(--linie-breite) solid var(--linie-hell); } .navi summary { display: flex; align-items: center; gap: var(--abstand-2); padding: var(--abstand-2) var(--abstand-3); font-weight: 600; cursor: pointer; list-style: none; user-select: none; } .navi summary::-webkit-details-marker { display: none; } .navi summary::after { content: ""; width: 6px; height: 6px; margin-left: auto; border-right: 1.6px solid var(--schrift-hell); border-bottom: 1.6px solid var(--schrift-hell); transform: rotate(-45deg); transition: transform .15s ease; } .navi details[open] > summary::after { transform: rotate(45deg); } .navi summary:hover { background: var(--flaeche-hover); } .navi summary .navi-titel { flex: 1; min-width: 0; } .navi details[open] > summary { color: var(--gruen-text); } .navi ul { list-style: none; margin: 0; padding: 0 0 var(--abstand-2); } .navi li a { display: flex; align-items: center; gap: var(--abstand-2); /* Der linke Einzug richtet den Text an der Beschriftung der Gruppe aus (3px Streifen + 12px Rand + 17px Symbol + 8px Luecke) - Feinstellung. */ padding: var(--abstand-1) var(--abstand-3) var(--abstand-1) 40px; color: var(--schrift); border-left: 3px solid transparent; } .navi li a > span:first-child { flex: 1; min-width: 0; } .navi li a:hover { background: var(--flaeche-hover); text-decoration: none; } .navi li a.aktiv { border-left-color: var(--gruen-dunkel); background: var(--flaeche-hover); font-weight: 600; } .navi-start { display: flex; align-items: center; gap: var(--abstand-2); padding: var(--abstand-2) var(--abstand-3); font-weight: 600; color: var(--schrift); border-bottom: var(--linie-breite) solid var(--linie-hell); border-left: 3px solid transparent; } .navi-start:hover { background: var(--flaeche-hover); text-decoration: none; } .navi-start.aktiv { border-left-color: var(--gruen-dunkel); background: var(--flaeche-hover); } /* --- Symbole --------------------------------------------------------------- */ .sym { width: 1.15em; height: 1.15em; flex: 0 0 auto; vertical-align: -.2em; color: var(--schrift-hell); } .navi summary .sym, .navi-start .sym { width: 17px; height: 17px; } .navi details[open] > summary .sym, .navi-start.aktiv .sym { color: var(--gruen-text); } .seitenkopf h1 .sym { color: var(--gruen-text); width: 20px; height: 20px; margin-right: 6px; } .btn .sym { margin-right: 5px; color: inherit; } .kachel h3 .sym { margin-right: 5px; } .sym-in-feld { position: absolute; margin-left: var(--abstand-3); color: var(--kopf-platzhalter); pointer-events: none; width: 15px; height: 15px; align-self: center; } .schnellsuche { position: relative; align-items: stretch; } /* Linker Rand + Lupe + Luecke: der Text setzt hinter dem Symbol an. */ .schnellsuche input { padding-left: calc(var(--abstand-3) + 15px + var(--abstand-2)); } /* --- Marke: die kleine Zahl oder das kurze Wort neben einer Beschriftung --- Baustein "Marke". Traegt einen Zaehler (offene Vorgaenge) oder ein einzelnes Wort ("storniert"). Nie mehr als zwei Woerter - laenger gehoert es in den Fliesstext. Der Name der Klasse ist `.marker`; `.marke` ist etwas anderes, naemlich die Wortmarke in der Kopfzeile. */ .marker { display: inline-block; min-width: 19px; padding: 1px var(--abstand-2); border-radius: var(--radius-marke); background: var(--gruen); color: var(--auf-gruen); font-size: var(--text-mini); font-weight: 700; font-variant-numeric: tabular-nums; text-align: center; line-height: 1.45; } /* Vier Aussagen, mehr nicht: neutral zaehlt, gruen ist erledigt, gelb will angesehen werden, rot verlangt einen Eingriff. */ .marker-neutral { background: var(--linie); color: var(--schrift); } .marker-erfolg { background: var(--gruen); color: var(--auf-gruen); } .marker-warnung { background: var(--gelb); color: var(--auf-gelb); } .marker-fehler { background: var(--rot); color: var(--auf-rot); } .navi li a .marker { background: var(--linie); color: var(--schrift); } .navi li a.aktiv .marker, .navi summary .marker { background: var(--gruen); color: var(--auf-gruen); } .inhalt { flex: 1; padding: var(--inhalt-y) var(--inhalt-x) calc(2 * var(--abstand-6)); min-width: 0; } .inhalt-anonym { max-width: 380px; margin: 8vh auto; padding: 0 var(--abstand-4); } /* --- Seitenkopf ----------------------------------------------------------- * Baustein "Seitenkopf". Genau ein h1 je Seite, daneben die Zahl, die den Umfang nennt, rechts die Werkzeuge. Keine Erklaerzeile - die gehoert an den Baustein, ueber den sie etwas sagt. */ .seitenkopf { display: flex; align-items: center; gap: var(--abstand-3); flex-wrap: wrap; margin-bottom: var(--abstand-4); } .seitenkopf h1 { font-size: var(--text-gross); margin: 0; font-weight: 700; letter-spacing: -.01em; } .seitenkopf .zaehler { color: var(--schrift-hell); font-size: var(--text-liste); font-variant-numeric: tabular-nums; } .seitenkopf .werkzeuge { margin-left: auto; display: flex; gap: var(--abstand-2); flex-wrap: wrap; align-items: flex-end; } /* --- Meldungen ------------------------------------------------------------ * Vier Arten, mehr gibt es nicht: erfolg / hinweis / warnung / fehler. Die Art steht im Streifen links, nicht in einer Farbflaeche ueber die ganze Zeile. */ .meldung { padding: var(--abstand-3) var(--abstand-4); margin-bottom: var(--abstand-3); border-radius: var(--radius); border-left: 4px solid var(--linie-stark); background: var(--flaeche); color: var(--schrift); } .meldung-erfolg { border-color: var(--gruen-dunkel); background: var(--erfolg-flaeche); color: var(--erfolg-schrift); } .meldung-hinweis { border-color: var(--blau); background: var(--hinweis-flaeche); color: var(--hinweis-schrift); } .meldung-fehler { border-color: var(--rot); background: var(--fehler-flaeche); color: var(--fehler-schrift); } /* Warnung: etwas laeuft, ist aber noch nicht falsch. Bewusst ohne getoente Flaeche - fuer Gelb gibt es kein Flaechenpaar, das in beiden Themen sicher 4,5:1 traegt. Die Aussage steht im Streifen und in der Schriftfarbe; beide sind in bin/kontrast-pruefung.php als Paar hinterlegt. */ .meldung-warnung { border-color: var(--gelb); background: var(--flaeche); color: var(--gelb-text); } /* --- Karte ----------------------------------------------------------------- * Baustein "Karte". Ein Behaelter fuer einen Sachverhalt, der zusammengehoert: Stammdaten eines Kunden, ein Formular, eine Gruppe von Kennzahlen. Eine Linie, kein Schatten, keine Farbflaeche. Der Titel ist ein h2. Wann Karte, wann Tabelle: Karte fuer EINEN Gegenstand mit benannten Feldern, Tabelle fuer VIELE gleichartige Zeilen. Nie eine Karte je Listenzeile. */ .karte { background: var(--flaeche); border: var(--linie-breite) solid var(--linie); border-radius: var(--radius-gross); padding: var(--abstand-4); margin-bottom: var(--abstand-4); } .karte > h2 { margin: 0 0 var(--abstand-3); font-size: var(--text-titel); } /* Kartenkopf: Titel links, Werkzeuge rechts, eine Linie darunter. Fuer Karten, die eine eigene Bedienung tragen (Bearbeiten, Drucken, Aufklappen). */ .karte-kopf { display: flex; align-items: baseline; gap: var(--abstand-3); flex-wrap: wrap; margin: 0 0 var(--abstand-3); padding-bottom: var(--abstand-2); border-bottom: var(--linie-breite) solid var(--linie-hell); } .karte-kopf > h2, .karte-kopf > h3 { margin: 0; font-size: var(--text-titel); } .karte-kopf .werkzeuge { margin-left: auto; display: flex; gap: var(--abstand-2); flex-wrap: wrap; } /* Karte mit Kartenkopf braucht ueber dem Kopf keinen doppelten Abstand. */ .karte > .karte-kopf:first-child { margin-top: 0; } .feldgruppe { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: var(--abstand-3) var(--abstand-4); } .feld { display: flex; flex-direction: column; gap: var(--abstand-1); } .feld label { font-size: var(--text-klein); color: var(--schrift-hell); font-weight: 600; } .feld input, .feld select, .feld textarea { padding: var(--abstand-2) var(--abstand-3); border: var(--linie-breite) solid var(--linie-stark); border-radius: var(--radius); background: var(--feld-flaeche); color: var(--schrift); font: inherit; width: 100%; } .feld input:focus, .feld select:focus, .feld textarea:focus { outline: 2px solid var(--fokus); outline-offset: -1px; border-color: var(--fokus); } .feld textarea { min-height: 62px; resize: vertical; } .feld .fehler { color: var(--rot-text); font-size: var(--text-klein); } .feld input[readonly] { background: var(--flaeche-alt); color: var(--schrift-hell); } .feld-breit { grid-column: 1 / -1; } /* Eingabe direkt in einer Listenzeile. Wer zehn Kassendifferenzen erklaert, soll nicht zehnmal in eine eigene Maske und zurueck. Die Eingabe erbt das Aussehen der Formularfelder, bleibt aber flach in der Zeile. */ .zeilenform { display: flex; gap: var(--abstand-2); align-items: center; min-width: 22ch; } .zeilenform input { flex: 1 1 auto; min-width: 14ch; padding: var(--abstand-1) var(--abstand-2); border: var(--linie-breite) solid var(--linie-stark); border-radius: var(--radius); background: var(--feld-flaeche); color: var(--schrift); font: inherit; } .zeilenform input:focus { outline: 2px solid var(--fokus); outline-offset: -1px; border-color: var(--fokus); } .zeilenform .btn { flex: 0 0 auto; } /* Platzhalter sind Hinweise, kein Ersatz fuer die Beschriftung - sie duerfen trotzdem nicht verblassen. */ input::placeholder, textarea::placeholder { color: var(--platzhalter); opacity: 1; } /* Deaktivierte Bedienelemente bleiben lesbar, wirken aber flach. Zwei Eigenheiten der Browser muessen dafuer abgeraeumt werden: Chrome legt auf