/* ===================================================================================================================== Online-Proben – Stil B „Neues Erscheinungsbild“ (Nutzer 22.10.2026, ersetzt „Schlicht wie ein Amtsprogramm“). Die Vorgabe mit Farben, Schrift, Abständen und Regeln steht in DESIGN.md im Wurzelverzeichnis. Das Fachwerkzeug einer Überwachungsbehörde im Erscheinungsbild von Nuevo Solutions: dunkles Aktenpetrol als Kopfleiste, die beim Blättern stehen bleibt; weiße Arbeitsflächen mit leichter Tiefe auf hellem Grund. Schrift der Marke (lokal, OFL, Lizenztexte in fonts/, kein fremder Server): Barlow für Text, Barlow Condensed für Überschriften, IBM Plex Mono für Probennummern und Aktenzeichen. Die eine Signatur: der Stand einer Probe als Eingangsstempel. Feste Schriftskala in rem – bei gewöhnlicher Browserschrift 12 · 13 · 14 · 15 · 16 · 20 · 24 · 30 px (vorher 23 verschiedene Größen). In rem wirken die Schriftgröße des Browsers und die Einstellung „Schriftgröße“ des Kontos. Barrierefreiheit (Nutzer 30.10.2026): WCAG 2.2 AA für alle; die Einstellungen „Darstellung und Bedienung“ des Kontos stehen als Attribute am (web/darstellung.py) und schalten die Variablen unten um. Abstände im 4er-Raster. Ecken 8 px (Flächen), 6 px (Bedienelemente), 4 px (Marken, Stempel). Zeichen sind Inline-SVG (web/zeichen.py, `.zeichen`), nie Unicode-Symbole – die fehlen in der Schrift. ===================================================================================================================== */ @font-face { font-family: "Barlow"; font-weight: 400; font-display: swap; src: url(fonts/barlow-400.woff2) format("woff2"); } @font-face { font-family: "Barlow"; font-weight: 500; font-display: swap; src: url(fonts/barlow-500.woff2) format("woff2"); } @font-face { font-family: "Barlow"; font-weight: 600; font-display: swap; src: url(fonts/barlow-600.woff2) format("woff2"); } @font-face { font-family: "Barlow Condensed"; font-weight: 600; font-display: swap; src: url(fonts/barlow-condensed-600.woff2) format("woff2"); } @font-face { font-family: "Barlow Condensed"; font-weight: 700; font-display: swap; src: url(fonts/barlow-condensed-700.woff2) format("woff2"); } @font-face { font-family: "IBM Plex Mono"; font-weight: 400; font-display: swap; src: url(fonts/ibm-plex-mono-400.woff2) format("woff2"); } @font-face { font-family: "IBM Plex Mono"; font-weight: 500; font-display: swap; src: url(fonts/ibm-plex-mono-500.woff2) format("woff2"); } /* Zur Wahl unter „Darstellung und Bedienung“ (Barrierefreiheit, Nutzer 30.10.2026) – unverändert aus den Quellen, OFL 1.1, Lizenztexte in fonts/; der Browser lädt sie erst, wenn jemand sie wählt */ @font-face { font-family: "Atkinson Hyperlegible"; font-weight: 400; font-display: swap; src: url(fonts/atkinson-hyperlegible-400.ttf) format("truetype"); } @font-face { font-family: "Atkinson Hyperlegible"; font-weight: 500 700; font-display: swap; src: url(fonts/atkinson-hyperlegible-700.ttf) format("truetype"); } @font-face { font-family: "OpenDyslexic"; font-weight: 400; font-display: swap; src: url(fonts/opendyslexic-400.woff2) format("woff2"); } @font-face { font-family: "OpenDyslexic"; font-weight: 500 700; font-display: swap; src: url(fonts/opendyslexic-700.woff2) format("woff2"); } :root { /* Schale und Flächen */ --schale: #143b42; /* Kopfleiste – Aktenpetrol, dunkel (Weiß darauf 12 : 1) */ --schale-leise: #b9d3d6; /* Menüpunkte auf der Schale (7,7 : 1) */ --schale-akzent: #e3a29b; /* Siegelrot, aufgehellt – Strich unter dem aktiven Bereich */ --grund: #eef2f1; /* Arbeitsgrund */ --flaeche: #ffffff; /* Arbeitsflächen */ --flaeche-2: #f7f9f9; /* Unterfläche: Tabellenkopf, aufgeklappte Probe */ --flaeche-3: #e9efef; /* gedrückt, Zahlen an Reitern, Marken */ /* Schrift in drei Stufen und Linien */ --tinte: #13262a; --tinte-2: #3f5357; /* 8,1 : 1 */ --tinte-3: #5d6f73; /* leise, ≥ 4,6 : 1 auch auf dem Grund */ --linie: #e1e7e7; /* Trennlinie in Tabellen */ --linie-2: #c9d3d4; /* kräftigere Trennlinie, Kopf von Tabellen */ --feldrand: #758789; /* Rand von Feldern und Zweitknöpfen: 3,8 : 1 auf Weiß, 3,6 : 1 auf der Unterfläche */ /* Marke und Bedienung */ --akzent: #1f5a63; --akzent-tief: #163f46; --akzent-hell: #e1eded; --akzent-ring: rgb(31 90 99 / .28); --siegel: #b23b30; --lineal: #e6f0fa; --lineal-rand: #8fb3dc; /* Zeile im Blick (static/lineal.js) */ /* Stand einer Probe – jede Farbe ≥ 5 : 1 auf Weiß (nachgerechnet 22.10.2026); nie Farbe allein, immer Zeichen und Wort */ --st-offen: #1f6fb2; --st-bald: #8a5300; --st-ueber: #b0302a; --st-eingang: #0f6e55; --st-erledigt: #5d6f73; --st-aus: #46585b; --st-farbe: var(--st-offen); /* Rückmeldung: Erfolg, Hinweis, Fehler – Text 5,5 : 1 und mehr auf ihrer Fläche */ --ok: #2a6d47; --ok-flaeche: #e7f3ec; --ok-rand: #b9dcc6; --warn: #8a5300; --warn-flaeche: #fbf3e4; --warn-rand: #ecd3a3; --fehler: #a8322a; --fehler-flaeche: #fbeceb; --fehler-rand: #efc2be; --info-flaeche: #e8f1f8; --info-rand: #bdd5ea; --verdeckt: #5b4b8a; /* Tiefe: leichte Schatten nur für Flächen, Knöpfe und Felder haben Rand */ --schatten: 0 0 0 1px rgb(19 38 42 / .07), 0 1px 2px rgb(19 38 42 / .06), 0 3px 8px rgb(19 38 42 / .04); --schatten-hoch: 0 0 0 1px rgb(19 38 42 / .08), 0 8px 24px rgb(19 38 42 / .16); /* Schrift */ --schrift: "Barlow", "Segoe UI", system-ui, sans-serif; --titel: "Barlow Condensed", "Bahnschrift", "Arial Narrow", sans-serif; --mono: "IBM Plex Mono", "Cascadia Mono", Consolas, ui-monospace, monospace; --gr-mini: .75rem; --gr-meta: .8125rem; --gr-tabelle: .875rem; --gr-text: .9375rem; --gr-h3: 1rem; --gr-h2: 1.25rem; --gr-zahl: 1.5rem; --gr-h1: 1.875rem; /* 12 · 13 · 14 · 15 · 16 · 20 · 24 · 30 px bei 16 px Browserschrift */ /* Ecken, Bewegung, Kopfleiste */ --r-flaeche: 8px; --r-element: 6px; --r-marke: 4px; --ease: cubic-bezier(.23, 1, .32, 1); --kopf-hoehe: 56px; /* static/lineal.js misst nach, falls die Leiste doch umbricht */ /* Bisher feste Farben einzelner Bausteine – als Variablen, damit die Farbschemata sie umstellen (Barrierefreiheit) */ --auf-akzent: #fff; /* Schrift auf gefüllten Knöpfen, Zahlen und Marken */ --auswahl: #cfe1f5; /* markierter Text */ --schalter-aus: #768587; /* Schalterbahn „aus“: 3,8 : 1 auf Weiß (bis 30.10.2026 #a9b5b7 mit 2,1 : 1, WCAG 1.4.11) */ --zaehler-flaeche: #c4473b; --zaehler-text: #fff; /* „Fristen“ in der Kopfleiste: 4,9 : 1 */ --warn-text: #6e4200; /* fett in Hinweisen, Marke „Leitung“ */ --rolle-admin-flaeche: #ece6f6; --rolle-admin: #553a85; --hervorgehoben-rand: #b7d0d0; --zeile-offen: #fffaf0; --zeile-bearbeitet: #f2f8f4; --streifen-offen: #d39200; --streifen-bearbeitet: #3d8a56; --lineal-trenner: #b3cbe6; --erledigt-flaeche: #f6fbf8; --bestaetigt-flaeche: #f6faf7; --stufe-b: #c07a00; --kal-we: #fafcfb; --kal-fremd: #f3f6f5; --zs-linie: #a9b8b6; --zs-raster: #e5ecea; --zs-grundlinie: #c3cad3; --zs-treffer: #ecf4f3; --zs-erledigt: #c4cad1; --zs-erledigt-eingang: #7d8791; --norm-flaeche: #e3eef8; --norm-text: #1a4e8a; --norm-strich: #9dbbe0; --norm-flaeche-hover: #cfe0f3; --norm-text-hover: #123d6e; --nummer-flaeche: #e8f0ef; --fehler-blinken: #f0b4ad; --fehler-ruhig: #fbe3e0; /* Probennummer vergessen (Sammelkorb) */ --blatt: #fff; --blatt-tinte: #13262a; /* Papier – Brief, Vorlage, PDF-Seite: in jedem Farbschema weiß wie ausgedruckt */ /* Bedienung – die Einstellungen am stellen sie um (Abschnitt „Darstellung und Bedienung je Konto“) */ --fokus-breite: 2px; --fokus-abstand: 2px; --fokus-farbe: var(--akzent); --feld-fokus-breite: 0px; --ziel: 36px; --ziel-klein: 30px; --ziel-mini: 28px; --haken: 16px; /* Höhe der Knöpfe und Felder, Häkchen */ --ziel-gross: 0px; /* Untergrenze für Bausteine mit eigener Mindesthöhe: max(…, var(--ziel-gross)) */ --zeilen-hoehe: 1.5; --zeichen-abstand: normal; --wort-abstand: normal; --sprung-abstand: 16px; /* Sprungziele unter der Kopfleiste – mit stehenden Spaltenköpfen mehr (unten) */ /* Linienbilder für Zierrat aus CSS (Aufklapper, Menüpfeil, Warnzeile); Zeichen im Text sind Inline-SVG */ --ic-pfeil: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 3.5l4.5 4.5L6 12.5'/%3E%3C/svg%3E"); --ic-unten: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 6l4.5 4.5L12.5 6'/%3E%3C/svg%3E"); --ic-warn: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 2.3l6.4 11.2H1.6z'/%3E%3Cpath d='M8 6.6v3.3M8 11.7v.1'/%3E%3C/svg%3E"); --ic-info: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round'%3E%3Ccircle cx='8' cy='8' r='6.2'/%3E%3Cpath d='M8 7.4v4M8 4.9v.2'/%3E%3C/svg%3E"); --ic-haken-kreis: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='8' cy='8' r='6.2'/%3E%3Cpath d='M5.3 8.3l1.9 1.9 3.6-4'/%3E%3C/svg%3E"); --ic-lupe: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round'%3E%3Ccircle cx='7' cy='7' r='4.6'/%3E%3Cpath d='M10.4 10.4l3.4 3.4'/%3E%3C/svg%3E"); } /* --- Darstellung und Bedienung je Konto (Barrierefreiheit, Nutzer 30.10.2026) ------------------------------------------- Die Person stellt unter „Konto → Darstellung und Bedienung“ ein (web/darstellung.py); basis.html setzt nur, was von der Vorgabe abweicht, als Attribut an . Hier werden daraus Variablen – die Bausteine weiter unten lesen sie, keine Seite wird einzeln umgebaut. Was einen einzelnen Baustein betrifft (Kopfleiste mitlaufen, Verweise, Bewegung), steht in dessen Abschnitt. Jede Farbe hier ist nachgerechnet (tests_web/test_barrierefreiheit.py): Text ≥ 4,5 : 1, im hohen Kontrast ≥ 7 : 1, Ränder und Linien von Bedienelementen ≥ 3 : 1. */ :root[data-schrift="125"] { font-size: 125%; } :root[data-schrift="150"] { font-size: 150%; } :root[data-schrift="200"] { font-size: 200%; } /* Abstände: „sehr weit“ sind die Werte aus WCAG 1.4.12 (Zeichen 0,12 em, Wort 0,16 em) */ :root[data-abstand="weit"] { --zeilen-hoehe: 1.75; --zeichen-abstand: .05em; --wort-abstand: .1em; } :root[data-abstand="sehr-weit"] { --zeilen-hoehe: 2; --zeichen-abstand: .12em; --wort-abstand: .16em; } :root[data-schriftart="windows"] { --schrift: "Segoe UI", system-ui, sans-serif; } :root[data-schriftart="deutlich"] { --schrift: "Atkinson Hyperlegible", "Segoe UI", system-ui, sans-serif; --titel: var(--schrift); } :root[data-schriftart="betont"] { --schrift: "OpenDyslexic", "Segoe UI", system-ui, sans-serif; --titel: var(--schrift); } :root[data-ueberschriften="breit"] { --titel: var(--schrift); } :root[data-fokus="kraeftig"] { --fokus-breite: 4px; --fokus-abstand: 3px; --fokus-farbe: var(--tinte); --feld-fokus-breite: 3px; } :root[data-ziele="gross"] { --ziel: 44px; --ziel-klein: 44px; --ziel-mini: 44px; --ziel-gross: 44px; --haken: 22px; } :root[data-zahlen="ruhig"] { --zaehler-flaeche: var(--schale-leise); --zaehler-text: var(--schale); } /* Hell mit hohem Kontrast: Text ≥ 7 : 1, kräftigere Linien und Ränder */ :root[data-farben="kontrast"] { --schale: #0b2b30; --schale-leise: #fff; --tinte: #0b1416; --tinte-2: #1d2a2c; --tinte-3: #33464a; --linie: #8a9a9c; --linie-2: #5f7174; --feldrand: #3f5357; --akzent: #123f46; --akzent-tief: #0b2b30; --akzent-hell: #dcebeb; --akzent-ring: rgb(18 63 70 / .45); --lineal-rand: #0b4f87; --st-offen: #0b4f87; --st-bald: #5c3700; --st-ueber: #8a1f19; --st-eingang: #085040; --st-erledigt: #33464a; --st-aus: #283638; --ok: #1b4d31; --ok-rand: #1b4d31; --warn: #5c3700; --warn-rand: #5c3700; --fehler: #821f19; --fehler-rand: #821f19; --info-rand: #0b4f87; --warn-text: #5c3700; --zaehler-flaeche: #8a1f19; --schalter-aus: #4f6366; --hervorgehoben-rand: #123f46; --streifen-offen: #5c3700; --streifen-bearbeitet: #1b4d31; --lineal-trenner: #0b4f87; --stufe-b: #5c3700; --rolle-admin: #3d2763; --norm-text: #0b3d73; --norm-strich: #0b3d73; --norm-text-hover: #072a52; --zs-linie: #5f7174; --zs-grundlinie: #5f7174; --zs-erledigt: #8a9a9c; --zs-erledigt-eingang: #33464a; } /* Dunkel: helle Schrift auf dunklem Petrol. Dieselben Werte stehen für „Wie in Windows“ im Block darunter – zusammen ändern (der Test vergleicht beide). */ :root[data-farben="dunkel"] { color-scheme: dark; --schale: #0b1e22; --grund: #0f1a1c; --flaeche: #172427; --flaeche-2: #1d2c30; --flaeche-3: #26373b; --tinte: #e6eeee; --tinte-2: #c3d0d1; --tinte-3: #a7b8ba; --linie: #2c3d41; --linie-2: #3b4f53; --feldrand: #7d9497; --akzent: #7cc0c8; --akzent-tief: #a3d6dc; --akzent-hell: #1e3b40; --akzent-ring: rgb(124 192 200 / .35); --lineal: #1f3347; --lineal-rand: #4f79a8; --auf-akzent: #0b1416; --auswahl: #2d4c6b; --st-offen: #6fb1ea; --st-bald: #e0a54a; --st-ueber: #f39a91; --st-eingang: #5cc59e; --st-erledigt: #a7b8ba; --st-aus: #b7c4c6; --ok: #79d19f; --ok-flaeche: #15291e; --ok-rand: #2c5a3e; --warn: #e8b45c; --warn-flaeche: #2e2512; --warn-rand: #5c4a22; --fehler: #f39a91; --fehler-flaeche: #33191a; --fehler-rand: #6a3430; --info-flaeche: #152638; --info-rand: #2d4c6b; --schatten: 0 0 0 1px rgb(0 0 0 / .45), 0 1px 2px rgb(0 0 0 / .35), 0 3px 8px rgb(0 0 0 / .25); --schatten-hoch: 0 0 0 1px rgb(0 0 0 / .5), 0 8px 24px rgb(0 0 0 / .55); --schalter-aus: #7d9497; --warn-text: #e8b45c; --rolle-admin-flaeche: #2e2540; --rolle-admin: #c7b3f0; --hervorgehoben-rand: #2f5a60; --zeile-offen: #2a2412; --zeile-bearbeitet: #15291e; --lineal-trenner: #4f79a8; --erledigt-flaeche: #15291e; --bestaetigt-flaeche: #15291e; --stufe-b: #e0a54a; --kal-we: #1a282b; --kal-fremd: #142023; --zs-linie: #4b6064; --zs-raster: #24363a; --zs-grundlinie: #4b6064; --zs-treffer: #1e3b40; --zs-erledigt: #5d6f73; --zs-erledigt-eingang: #a7b8ba; --norm-flaeche: #152638; --norm-text: #8fc1ef; --norm-strich: #2d4c6b; --norm-flaeche-hover: #1f3a57; --norm-text-hover: #b5d7f5; --nummer-flaeche: #1e3b40; --fehler-blinken: #6a3430; --fehler-ruhig: #4a2421; } @media (prefers-color-scheme: dark) { :root[data-farben="windows"] { color-scheme: dark; --schale: #0b1e22; --grund: #0f1a1c; --flaeche: #172427; --flaeche-2: #1d2c30; --flaeche-3: #26373b; --tinte: #e6eeee; --tinte-2: #c3d0d1; --tinte-3: #a7b8ba; --linie: #2c3d41; --linie-2: #3b4f53; --feldrand: #7d9497; --akzent: #7cc0c8; --akzent-tief: #a3d6dc; --akzent-hell: #1e3b40; --akzent-ring: rgb(124 192 200 / .35); --lineal: #1f3347; --lineal-rand: #4f79a8; --auf-akzent: #0b1416; --auswahl: #2d4c6b; --st-offen: #6fb1ea; --st-bald: #e0a54a; --st-ueber: #f39a91; --st-eingang: #5cc59e; --st-erledigt: #a7b8ba; --st-aus: #b7c4c6; --ok: #79d19f; --ok-flaeche: #15291e; --ok-rand: #2c5a3e; --warn: #e8b45c; --warn-flaeche: #2e2512; --warn-rand: #5c4a22; --fehler: #f39a91; --fehler-flaeche: #33191a; --fehler-rand: #6a3430; --info-flaeche: #152638; --info-rand: #2d4c6b; --schatten: 0 0 0 1px rgb(0 0 0 / .45), 0 1px 2px rgb(0 0 0 / .35), 0 3px 8px rgb(0 0 0 / .25); --schatten-hoch: 0 0 0 1px rgb(0 0 0 / .5), 0 8px 24px rgb(0 0 0 / .55); --schalter-aus: #7d9497; --warn-text: #e8b45c; --rolle-admin-flaeche: #2e2540; --rolle-admin: #c7b3f0; --hervorgehoben-rand: #2f5a60; --zeile-offen: #2a2412; --zeile-bearbeitet: #15291e; --lineal-trenner: #4f79a8; --erledigt-flaeche: #15291e; --bestaetigt-flaeche: #15291e; --stufe-b: #e0a54a; --kal-we: #1a282b; --kal-fremd: #142023; --zs-linie: #4b6064; --zs-raster: #24363a; --zs-grundlinie: #4b6064; --zs-treffer: #1e3b40; --zs-erledigt: #5d6f73; --zs-erledigt-eingang: #a7b8ba; --norm-flaeche: #152638; --norm-text: #8fc1ef; --norm-strich: #2d4c6b; --norm-flaeche-hover: #1f3a57; --norm-text-hover: #b5d7f5; --nummer-flaeche: #1e3b40; --fehler-blinken: #6a3430; --fehler-ruhig: #4a2421; } } /* Getönter Hintergrund (Legasthenie, Blendung): ein Hauch Papierton, Text weiter ≥ 4,5 : 1 */ :root[data-hintergrund="getoent"] { --grund: #f4f1e9; --flaeche: #fefcf7; --flaeche-2: #faf7f0; --flaeche-3: #f1ede4; } :root[data-hintergrund="getoent"][data-farben="dunkel"] { --grund: #17150f; --flaeche: #211e18; --flaeche-2: #28241d; --flaeche-3: #322d25; } @media (prefers-color-scheme: dark) { :root[data-hintergrund="getoent"][data-farben="windows"] { --grund: #17150f; --flaeche: #211e18; --flaeche-2: #28241d; --flaeche-3: #322d25; } } /* Rot-Grün-Schwäche: Blau, Violett und Orange statt Rot und Grün – Zeichen und Wort bleiben, wie sie sind */ :root[data-rotgruen="an"] { --st-offen: #6a3fb5; --st-ueber: #a34700; --st-eingang: #1a5e96; --ok: #1a5e96; --ok-flaeche: #e6eff8; --ok-rand: #b3cde6; --fehler: #a34700; --fehler-flaeche: #fbeee4; --fehler-rand: #f0c9aa; --streifen-bearbeitet: #1a5e96; --zeile-bearbeitet: #eef4fa; --zaehler-flaeche: #a34700; } :root[data-rotgruen="an"][data-farben="kontrast"] { --st-offen: #4b2a85; --st-ueber: #7a3300; --st-eingang: #0a4a7d; --ok: #0a4a7d; --ok-rand: #0a4a7d; --fehler: #7a3300; --fehler-rand: #7a3300; --streifen-bearbeitet: #0a4a7d; --zaehler-flaeche: #7a3300; } :root[data-rotgruen="an"][data-farben="dunkel"] { --st-offen: #c7a8f0; --st-ueber: #f0a060; --st-eingang: #8fc1ef; --ok: #8fc1ef; --ok-flaeche: #152638; --ok-rand: #2d4c6b; --fehler: #f0a060; --fehler-flaeche: #33230f; --fehler-rand: #6a4a22; --streifen-bearbeitet: #8fc1ef; --zeile-bearbeitet: #152638; } @media (prefers-color-scheme: dark) { :root[data-rotgruen="an"][data-farben="windows"] { --st-offen: #c7a8f0; --st-ueber: #f0a060; --st-eingang: #8fc1ef; --ok: #8fc1ef; --ok-flaeche: #152638; --ok-rand: #2d4c6b; --fehler: #f0a060; --fehler-flaeche: #33230f; --fehler-rand: #6a4a22; --streifen-bearbeitet: #8fc1ef; --zeile-bearbeitet: #152638; } } /* --- Grundlage ------------------------------------------------------------------------------------------------------ */ * { box-sizing: border-box; } html { scroll-padding-top: calc(var(--kopf-hoehe) + var(--sprung-abstand)); } /* Sprungziele (#probe-…) nicht unter der Kopfleiste */ /* Läuft die Kopfleiste mit (Einstellung, starke Vergrößerung – siehe Kopfleiste), braucht es den Abstand nicht */ :root[data-kopfleiste="mitlaufen"], :root[data-kopf-hoch] { scroll-padding-top: 16px; } /* Mit stehenden Spaltenköpfen auch nicht unter ihnen (Etappe 8): ihre Höhe misst static/lineal.js, vorher gilt 2,25rem */ :root:has(table[data-lineal], table[data-kopf-steht]) { --sprung-abstand: calc(var(--tabellenkopf-hoehe, 2.25rem) + 8px); } body { margin: 0; font: 400 var(--gr-text)/var(--zeilen-hoehe) var(--schrift); background: var(--grund); color: var(--tinte); letter-spacing: var(--zeichen-abstand); word-spacing: var(--wort-abstand); font-variant-numeric: tabular-nums; -webkit-font-smoothing: antialiased; } a { color: var(--akzent); text-underline-offset: 2px; text-decoration-thickness: 1px; } a:hover { color: var(--akzent-tief); text-decoration-thickness: 2px; } ::selection { background: var(--auswahl); color: var(--tinte); } :focus-visible { outline: var(--fokus-breite) solid var(--fokus-farbe); outline-offset: var(--fokus-abstand); } /* Verweise überall unterstreichen (Einstellung „verweise“): auch in Menüs, Listen und Kacheln – nur Knöpfe nicht */ :root[data-verweise="ueberall"] a:not(.knopf, .knopf-link, .klein-knopf, .kopier-knopf, .knopf-zweit, .ga-knopf, .kachel, .akte-karte, .frist-kachel, .marke) { text-decoration-line: underline !important; } /* Vereinfachte Ansicht (Einstellung „ansicht“): Seltenes und Nebenspalten fallen weg (Klasse .selten in den Vorlagen) */ :root[data-ansicht="einfach"] .selten, :root[data-ansicht="einfach"] .katalog-tabelle :is(col, th, td):is(:nth-child(3), :nth-child(6), :nth-child(8)) { display: none !important; } /* Katalog: Branche, Kaufbeleg, Trefferqualität */ /* Was sonst nur im Titel stünde (Barrierefreiheit, Lücke 6): für Bildschirmleser immer da, sichtbar mit „Erklärungen: immer eingeblendet“ (Einstellung „erklaerungen“) */ .zusatz { position: absolute; width: 1px; height: 1px; margin: 0; padding: 0; border: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } :root[data-erklaerungen="immer"] .zusatz { position: static; width: auto; height: auto; overflow: visible; clip-path: none; white-space: normal; display: block; font-size: var(--gr-meta); font-weight: 400; color: var(--tinte-2); } h1, h2 { font-family: var(--titel); font-weight: 600; letter-spacing: .005em; line-height: 1.15; color: var(--tinte); text-wrap: balance; } h1 { font-size: var(--gr-h1); margin: 0 0 12px; } h2 { font-size: var(--gr-h2); margin: 0 0 8px; } h3 { font-size: var(--gr-h3); font-weight: 600; line-height: 1.3; margin: 20px 0 8px; } h2 .klein, h2 .anzahl, h1 .klein { font: 500 var(--gr-text)/1 var(--schrift); color: var(--tinte-3); margin-left: 4px; letter-spacing: 0; } :where(.inhalt) p { max-width: 105ch; text-wrap: pretty; } .klein { font-size: var(--gr-meta); color: var(--tinte-3); } .leise, .leise-text { color: var(--tinte-3); } .unsichtbar, .nur-vorlesen { position: absolute; width: 1px; height: 1px; margin: 0; padding: 0; border: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } .inline { display: inline; margin: 0; } .zusammen, .kennung, .mono-kurz { white-space: nowrap; } /* Probennummern brechen nie um (Punkt 83) */ /* Webadressen (Filter |webadresse, Etappe 8, 23.10.2026): Umbruch nur an den gesetzten Stellen nach „/“, „.“, „?“ … (und am Bindestrich der Adresse), nie Silbentrennung mitten im Namen. Passt ein Stück ohne solche Stelle nicht in die Spalte, endet es sauber mit „…“ – die ganze Adresse steht im Titel und im Verweis. Als Block in der Zeile trägt sie die Unterstreichung des Verweises selbst. */ .webadresse { display: inline-block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; vertical-align: top; overflow-wrap: normal; word-break: normal; hyphens: manual; } a > .webadresse { text-decoration: inherit; } .mono, .mono-kurz, .kennung, .aktenzeichen, .linkfeld { font-family: var(--mono); } .mono, .mono-kurz, .linkfeld { font-size: var(--gr-meta); } .mono { word-break: break-all; } img { max-width: 100%; } /* Zeichen als Inline-SVG (web/zeichen.py): Linien in der Textfarbe, 1em groß, sitzen auf der Grundlinie */ .zeichen { display: inline-block; flex: none; width: 1em; height: 1em; vertical-align: -.14em; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; overflow: visible; } /* Sprung zum Inhalt – erst mit der Tastatur sichtbar */ .sprunglink { position: absolute; left: 16px; top: -48px; z-index: 100; padding: 8px 14px; border-radius: var(--r-element); background: var(--flaeche); color: var(--akzent); font-weight: 600; box-shadow: var(--schatten-hoch); } .sprunglink:focus-visible { top: 8px; } /* --- Kopfleiste: dunkle Schale, bleibt beim Blättern stehen ------------------------------------------------------------ Bereiche (Nutzer 16.10.2026: Seltenes gebündelt unter „Verwaltung“), der aktive mit hellem Strich darunter. Ab 13 Zoll (1280 px) einzeilig; wird es doch eng, bricht das Menü rechts neben der Marke um und lineal.js zieht die Höhe nach. Mindesthöhe fest 56 px, nicht --kopf-hoehe: Die folgt der echten Höhe – als Mindesthöhe hielt sie eine Leiste, die einmal umbrach (etwa kurz vor dem Laden der Schrift), für immer doppelt hoch (gemessen 22.10.2026). */ .kopf { position: sticky; top: 0; z-index: 50; display: flex; align-items: center; gap: 8px 28px; min-height: 56px; padding: 0 32px; background: var(--schale); color: #fff; } /* Läuft beim Blättern mit (Einstellung „kopfleiste“, Barrierefreiheit 30.10.2026) – bei starker Vergrößerung immer (Abschnitt „Starke Vergrößerung“), ebenso wenn sie mehr als ein Viertel der Fensterhöhe nimmt (static/lineal.js) */ :root[data-kopfleiste="mitlaufen"] .kopf, :root[data-kopf-hoch] .kopf { position: static; } .marke { display: inline-flex; align-items: center; gap: 10px; font: 700 var(--gr-zahl)/1 var(--titel); color: #fff; text-decoration: none; white-space: nowrap; letter-spacing: .01em; } .marke:hover { color: #fff; text-decoration: none; } .marke svg { width: 24px; height: 24px; flex: none; } .marke svg circle { stroke: #e86b5e; } /* Siegel auf dunklem Grund heller, Haken weiß */ .marke svg rect { fill: #e86b5e; } .marke svg path { stroke: #fff; } .menue { display: flex; flex: 1 1 auto; justify-content: flex-end; align-items: center; flex-wrap: wrap; gap: 4px 18px; } .menue > a, .menue-mehr > summary, .kopf button.link { display: inline-flex; align-items: center; gap: 4px; color: var(--schale-leise); font-weight: 500; text-decoration: none; padding: 16px 0 13px; border-bottom: 3px solid transparent; white-space: nowrap; } .menue > a:hover, .menue-mehr > summary:hover, .kopf button.link:hover { color: #fff; text-decoration: none; } .menue > a[aria-current="page"], .menue-mehr.aktiv > summary { color: #fff; font-weight: 600; border-bottom-color: var(--schale-akzent); } .kopf :focus-visible { outline-color: #fff; } .zaehler { display: inline-block; min-width: 1.67em; padding: 0 6px; margin-left: 4px; border-radius: 999px; background: var(--zaehler-flaeche); color: var(--zaehler-text); font-size: var(--gr-mini); font-weight: 600; line-height: 1.67; text-align: center; } /* Ungelesene Benachrichtigungen (Nutzer 22.10.2026, Punkt 9): hell statt rot – rot bleibt „Fristen dringend“ */ .zaehler-neu { background: #fff; color: var(--schale); } .zaehler[hidden] { display: none; } .kopf-suche { position: relative; margin: 0; color: var(--tinte-3); } .kopf-suche::before { content: ""; position: absolute; left: 9px; top: 9px; width: 14px; height: 14px; pointer-events: none; background: currentColor; -webkit-mask: var(--ic-lupe) center / contain no-repeat; mask: var(--ic-lupe) center / contain no-repeat; } .kopf-suche input { width: 12rem; height: 32px; padding: 0 10px 0 30px; border: 0; border-radius: var(--r-element); background: var(--flaeche); color: var(--tinte); font-size: var(--gr-tabelle); } .kopf-suche input:focus-visible { box-shadow: 0 0 0 3px rgb(255 255 255 / .45); } .gebietswahl, .menue-mehr { position: relative; } .gebietswahl > summary { list-style: none; cursor: pointer; min-height: 32px; padding: 0 10px; display: flex; align-items: center; gap: 4px; border-radius: var(--r-element); background: rgb(255 255 255 / .1); color: #fff; font-size: var(--gr-tabelle); white-space: nowrap; max-width: 22rem; overflow: hidden; text-overflow: ellipsis; } .gebietswahl > summary:hover, .gebietswahl[open] > summary { background: rgb(255 255 255 / .18); } .gebietswahl > summary strong { font-weight: 600; } .menue-mehr > summary { list-style: none; cursor: pointer; } .gebietswahl > summary::-webkit-details-marker, .menue-mehr > summary::-webkit-details-marker { display: none; } .gebietswahl > summary::after, .menue-mehr > summary::after { content: ""; flex: none; width: 12px; height: 12px; margin-left: 2px; background: currentColor; opacity: .85; -webkit-mask: var(--ic-unten) center / contain no-repeat; mask: var(--ic-unten) center / contain no-repeat; } .gebietswahl-feld, .menue-mehr-feld { position: absolute; right: 0; top: calc(100% + 8px); z-index: 60; background: var(--flaeche); color: var(--tinte); border-radius: var(--r-flaeche); box-shadow: var(--schatten-hoch); } .gebietswahl-feld { width: min(30rem, 92vw); max-height: 72vh; overflow: auto; padding: 12px; } .menue-mehr-feld { display: grid; min-width: 14rem; padding: 6px; top: calc(100% + 2px); } .menue-mehr-feld a { padding: 7px 12px; border-radius: var(--r-element); color: var(--tinte); text-decoration: none; white-space: nowrap; } .menue-mehr-feld a:hover, .menue-mehr-feld a:focus-visible { background: var(--akzent-hell); outline-offset: -2px; } /* „Konto“ (Barrierefreiheit 30.10.2026): „Abmelden“ ist ein Knopf in einem Formular und sieht im Menü aus wie die Verweise */ .menue-mehr-feld form { margin: 0; } .menue-mehr-feld button.link { display: flex; width: 100%; padding: 7px 12px; border: 0; border-radius: var(--r-element); color: var(--tinte); font-weight: 400; white-space: nowrap; } .menue-mehr-feld button.link:hover, .menue-mehr-feld button.link:focus-visible { background: var(--akzent-hell); color: var(--tinte); outline-offset: -2px; } .menue-mehr-feld a, .menue-mehr-feld button.link { min-height: max(30px, var(--ziel-gross)); align-items: center; } .menue-mehr-feld a { display: flex; } .menue-mehr-feld a[aria-current="page"] { font-weight: 600; color: var(--akzent); } .menue-mehr-feld hr { border: 0; border-top: 1px solid var(--linie); margin: 4px 6px; } /* Bis 1500 px wird es mit allen Modulen eng: dichter und eine Stufe kleiner – gemessen einzeilig ab 1280 px mit Online-Kontrollen, Rückwärtssuche, Zähler und „Verwaltung“ (Rundgang 22.10.2026), seit dem Reiter „Akten“ (Nutzer 22.10.2026, Punkt 24) mit 10 px zwischen den Bereichen – mit 12 px brach die Leiste bei 1366 px um */ @media (max-width: 1500px) { .kopf { padding: 0 20px; gap: 8px 16px; } .menue { gap: 4px 10px; } .menue > a, .menue-mehr > summary, .kopf button.link { font-size: var(--gr-tabelle); } .kopf-suche input { width: 9.5rem; } .gebietswahl > summary { max-width: 12rem; } .marke { font-size: var(--gr-h2); } } /* Unter 1366 px noch eine Stufe kleiner: „Benachrichtigungen“ mit Zahl (Nutzer 22.10.2026, Punkt 9) ist gut 50 px breiter als „Nachrichten (n)“ – gemessen einzeilig ab 1280 px wie oben, mit beiden Zahlen (tests_web/test_benachrichtigungen.py). Für „Akten“ (Punkt 24) dazu engerer Rand und das Suchfeld in 13 px – es bleibt so breit, dass „Betrieb suchen…“ hineinpasst. */ @media (max-width: 1365px) { .kopf { padding: 0 12px; gap: 8px 10px; } .menue > a, .menue-mehr > summary, .kopf button.link { font-size: var(--gr-meta); } .kopf-suche input { width: 8.75rem; font-size: var(--gr-meta); } } /* --- Seite und Flächen ---------------------------------------------------------------------------------------------- */ /* Desktop statt Handy (Nutzer 12.10.2026): gearbeitet wird an 13 bis 23 Zoll – jede Seite nutzt die Breite wie der Katalog; „weit“ bleibt als gleichbedeutender Zusatz in den Vorlagen stehen. */ .inhalt { max-width: 1560px; margin: 0 auto; padding: 24px 32px 48px; } /* Tabellen fragen nach der Breite des Inhalts in rem (Abschnitt „Starke Vergrößerung“) – so zählt auch die Schriftgröße des Kontos. Feste und klebende Elemente bleiben am Fenster: Hinweis-Ecke, Meldungen und Dialoge stehen außerhalb. */ .inhalt { container: inhalt / inline-size; } .inhalt.weit { max-width: 1560px; } .fuss { text-align: center; color: var(--tinte-3); font-size: var(--gr-meta); padding: 8px 16px 32px; } /* Anbieterhinweis: leise, ohne Werbung – führt Testnutzer zur Homepage des Anbieters */ .fuss a { color: inherit; text-decoration-color: var(--linie-2); } .fuss a:hover { color: var(--akzent); text-decoration-color: currentColor; } .leitsatz { color: var(--tinte-2); margin: -4px 0 20px; max-width: 75ch; } /* je Seite höchstens ein Leitsatz */ .erlaeuterung { margin: -4px 0 20px; } /* Rückweg über dem Seitentitel: überall gleich klein, mit dem Pfeil aus web/zeichen.py statt „←“ als Text (Etappe 8, 23.10.2026); der Verweis heißt wie sein Ziel („alle Probenahmen“, „Akte …“) */ .zurueck { margin: 0 0 6px; font-size: var(--gr-meta); color: var(--tinte-3); } .zurueck .zeichen { margin-right: 4px; } /* im Text, nicht als Flexbox – sonst stünde der zweite Verweis tiefer */ .karte { background: var(--flaeche); border-radius: var(--r-flaeche); box-shadow: var(--schatten); padding: 16px 20px 20px; margin: 0 0 20px; } .karte.schmal { max-width: 440px; margin-inline: auto; } /* nur Anmelde- und Fehlerseiten */ .karte.hervorgehoben { background: var(--akzent-hell); box-shadow: inset 0 0 0 1px var(--hervorgehoben-rand); } .karte > h2:first-child, .karte > h1:first-child { margin-top: 0; } .karte:has(> .tabelle) { overflow-x: auto; } /* Spaltenköpfe langer Listen bleiben beim Blättern stehen (Nutzer 05.10.2026) – dafür ist die Karte kein Scrollbereich */ .karte:has(> table[data-lineal]), .karte:has(> table[data-kopf-steht]) { overflow: visible; } .abschnitt-kopf, .probe-kopf { display: flex; align-items: center; justify-content: space-between; gap: 8px 16px; flex-wrap: wrap; margin-bottom: 12px; } .abschnitt-kopf h2, .probe-kopf h2 { margin: 0; } .abschnitt-werkzeuge { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; } .nebeneinander { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 36rem), 1fr)); gap: 0 20px; align-items: start; } .nebeneinander > * { min-width: 0; } .spalten { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(340px, 100%), 1fr)); gap: 0 20px; align-items: start; } .spalten-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 0 20px; } .raster { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 0 16px; align-items: end; } .raster button, .raster .knopf-link { white-space: normal; max-width: 100%; } /* lange Knopftexte brechen in der Spalte um, statt über den Rand zu ragen */ .raster.oben { align-items: start; } .raster .feld-breit { grid-column: 1 / -1; } /* Dienststelle nicht abgeschnitten (Punkt 133) */ .raster.zwei-zu-eins { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); } .raster.eins-zu-zwei { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); } /* Kürzel | Dienststelle */ /* Formular in Gruppen (Konten, Etappe 8, Nutzer 23.10.2026): je Gruppe eine Überschrift und die Felder nebeneinander; die Gruppen nebeneinander, sobald jede 30rem breit sein kann. Keine Rahmen – Karten und Kästen werden nie geschachtelt. */ .formular-gruppen { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 30rem), 1fr)); gap: 8px 32px; } fieldset.formular-gruppe { margin: 4px 0 0; padding: 0; border: 0; min-width: 0; } fieldset.formular-gruppe > legend { padding: 0; font-size: var(--gr-h3); font-weight: 600; color: var(--tinte); } .formular-fuss { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 32px; margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--linie); } .formular-fuss button { margin: 0; } .drei { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 0 16px; } .werkzeugzeile { margin: 4px 0 16px; } /* Kacheln der Startseite (Punkt 128) */ .kacheln { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 16px; } .kachel { display: block; background: var(--flaeche); border-radius: var(--r-flaeche); box-shadow: var(--schatten); padding: 16px 20px; color: var(--tinte); text-decoration: none; } .kachel h2 { margin: 0 0 4px; } a.kachel:hover { color: var(--tinte); box-shadow: var(--schatten), 0 0 0 1px var(--akzent); } .kachel p { margin: 0; color: var(--tinte-2); } .kachel span { font-size: var(--gr-meta); color: var(--tinte-3); } .kachel span.dringend { display: inline-block; margin-top: 8px; color: var(--fehler); font-weight: 600; } .kachel.folgt { opacity: .65; } /* Kennzahlen (Gebietssuche, Prüfseite, Auswertung) */ .kennzahlen { margin-bottom: 20px; } .kennzahlen h2 { font-size: var(--gr-h1); margin: 0; } .kennzahlen p { margin: 0; } .trichter { display: flex; flex-wrap: wrap; gap: 8px 24px; margin: 16px 0 4px; } .trichter div { min-width: 90px; } .trichter dt { font-size: var(--gr-meta); color: var(--tinte-3); } .trichter dd { margin: 0; font: 600 var(--gr-zahl)/1.2 var(--titel); } .auswertung-zahlen { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin-bottom: 20px; } .auswertung-zahlen .kennzahl { background: var(--flaeche); border-radius: var(--r-flaeche); box-shadow: var(--schatten); padding: 12px 16px; } .auswertung-zahlen .kennzahl strong { display: block; font: 600 var(--gr-h1)/1.15 var(--titel); } .auswertung-zahlen .kennzahl span { font-size: var(--gr-meta); color: var(--tinte-3); } .auswertung-zahlen .kennzahl.warnend strong { color: var(--fehler); } /* --- Meldungen und Warnhinweise --------------------------------------------------------------------------------------- Gut sichtbar (unter „Schlicht“ gingen Warnungen unter): Fläche in der Farbe der Meldung, Zeichen davor, Text dunkel. .meldung = Satz der Seite (oben oder an seinem Platz), .warnzeile/.warnkasten = Hinweis im Inhalt, .warnung = kurz in einer Zelle, .lesehinweis = leiser Hinweis vor einer Tabelle. */ .meldung, .warnzeile, .warnkasten { position: relative; display: block; max-width: 1560px; margin: 0 0 16px; padding: 10px 14px 10px 40px; border-radius: var(--r-element); background: var(--info-flaeche); box-shadow: inset 0 0 0 1px var(--info-rand); color: var(--tinte); font-size: var(--gr-text); --ic: var(--ic-info); --zeichen-farbe: var(--st-offen); } .meldung::before, .warnzeile::before, .warnkasten::before { content: ""; position: absolute; left: 14px; top: 13px; width: 16px; height: 16px; background: var(--zeichen-farbe); -webkit-mask: var(--ic) center / contain no-repeat; mask: var(--ic) center / contain no-repeat; } .meldung.erfolg { background: var(--ok-flaeche); box-shadow: inset 0 0 0 1px var(--ok-rand); --ic: var(--ic-haken-kreis); --zeichen-farbe: var(--ok); } .meldung.fehler { background: var(--fehler-flaeche); box-shadow: inset 0 0 0 1px var(--fehler-rand); --ic: var(--ic-warn); --zeichen-farbe: var(--fehler); } .meldung.hinweis, .warnzeile, .warnkasten { background: var(--warn-flaeche); box-shadow: inset 0 0 0 1px var(--warn-rand); --ic: var(--ic-warn); --zeichen-farbe: var(--warn); } .meldung.klein, .warnzeile.klein { font-size: var(--gr-tabelle); padding-block: 8px; } .meldung.klein::before, .warnzeile.klein::before { top: 10px; } .warnzeile strong, .meldung.hinweis strong { color: var(--warn-text); } .meldung.fehler strong { color: var(--fehler); } .warnung { display: inline-flex; align-items: baseline; gap: 6px; color: var(--warn); font-weight: 600; } .warnung .zeichen { align-self: center; } .warnung.fehler { color: var(--fehler); } .lesehinweis { display: flex; align-items: baseline; gap: 6px; margin: 0 0 8px; font-size: var(--gr-meta); color: var(--tinte-2); } .lesehinweis .zeichen { align-self: center; } .hinweis-offen, .hinweis-fehlt { color: var(--warn); font-weight: 500; } .hintergrund-meldung { position: fixed; left: 50%; bottom: 16px; transform: translateX(-50%); z-index: 50; margin: 0; max-width: min(44rem, calc(100% - 32px)); display: flex; gap: 12px; align-items: center; flex-wrap: wrap; box-shadow: var(--schatten-hoch); } /* Hinweis auf neue Benachrichtigungen unten rechts (Nutzer 22.10.2026, Punkt 9; static/benachrichtigungen.js): weiße Fläche mit Schatten „hoch“, Glocke in Aktenpetrol, ein Klick führt zur Sache. Kommt 8 px von unten und blendet ein, geht schneller, als er kam; die Ecke selbst lässt Klicks durch. Bei reduzierter Bewegung ohne Weg (unten). */ .hinweis-ecke { position: fixed; right: 16px; bottom: 16px; z-index: 55; width: min(26rem, calc(100% - 32px)); pointer-events: none; } .hinweis-karte { pointer-events: auto; display: flex; align-items: flex-start; gap: 12px; padding: 12px 6px 12px 16px; border-radius: var(--r-flaeche); background: var(--flaeche); box-shadow: var(--schatten-hoch); color: var(--tinte); font-size: var(--gr-tabelle); opacity: 0; transform: translateY(8px); transition: opacity 200ms var(--ease), transform 200ms var(--ease); } .hinweis-karte.sichtbar { opacity: 1; transform: none; } .hinweis-karte.geht { opacity: 0; transform: translateY(4px); transition-duration: 150ms; } .hinweis-zeichen { flex: none; margin-top: 1px; color: var(--akzent); font-size: var(--gr-h2); line-height: 1; } .hinweis-inhalt { flex: 1 1 auto; min-width: 0; } .hinweis-inhalt p { margin: 0; } .hinweis-inhalt .hinweis-titel { margin-bottom: 2px; font-size: var(--gr-meta); font-weight: 600; color: var(--tinte-2); } .hinweis-inhalt a { overflow-wrap: anywhere; } .hinweis-inhalt ul { margin: 2px 0 0; padding-left: 18px; } .hinweis-inhalt li + li { margin-top: 2px; } button.hinweis-zu { flex: none; min-height: 0; width: 30px; height: 30px; margin: -4px 0 0; padding: 0; border: 0; background: none; color: var(--tinte-3); } button.hinweis-zu:hover { background: var(--flaeche-3); color: var(--tinte); } .leer-hinweis p { margin: 0; } .zeichenzaehler { margin: 4px 0 0; color: var(--tinte-3); } .zeichenzaehler.zu-lang { color: var(--fehler); font-weight: 600; } /* Lebenszeichen langer Läufe: „läuft seit … · letzte Meldung vor …“ (Nutzer 12.10.2026) */ .lebenszeichen { margin: 6px 0 0; } .lebenszeichen.still { color: var(--warn); } /* Abbrechen mit Rückfrage in der Seite (Nutzer 22.10.2026, Punkt 8; templates/_abbrechen.html): Der rote Zweitknopf öffnet die Frage darunter – kein Browser-Dialog; „… verwerfen“ ist endgültig und darum rot. Für sich unter dem Kopf eines Vorgangs steht die Frage auf einer eigenen Fläche, im Stand eines Laufs (einer Karte) auf der Unterfläche – Karten werden nie geschachtelt. */ details.abbrechen { margin: 0 0 20px; } .karte details.abbrechen { margin: 12px 0 0; } details.abbrechen > summary::-webkit-details-marker { display: none; } details.abbrechen[open] > summary { background: var(--fehler-flaeche); } .abbrechen-feld { max-width: 720px; margin-top: 8px; padding: 16px 20px; border-radius: var(--r-flaeche); background: var(--flaeche); box-shadow: var(--schatten); } .karte .abbrechen-feld { padding: 12px 16px; border-radius: var(--r-element); background: var(--flaeche-2); box-shadow: none; } .abbrechen-feld p { margin: 0 0 8px; } .abbrechen-feld p:last-child { margin-bottom: 0; } .abbrechen-knoepfe { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 8px; } /* --- Knöpfe ---------------------------------------------------------------------------------------------------------- Hauptknopf gefüllt in Aktenpetrol, Zweitknopf weiß mit Rand, leise Knöpfe nur Text. Zeigen dunkelt ab, Drücken gibt nach (98 %), Fokus mit Ring. Knopf heißt wie sein Ziel. Formularknöpfe so breit wie ihr Text (nur Anmeldekarten ganz). */ button, .knopf-link, a.knopf { display: inline-flex; align-items: center; justify-content: center; gap: 6px; width: auto; margin: 16px 0 0; padding: 0 16px; min-height: var(--ziel); border: 1px solid var(--akzent); border-radius: var(--r-element); background: var(--akzent); color: var(--auf-akzent); font: 600 var(--gr-text)/1.2 var(--schrift); text-decoration: none; cursor: pointer; white-space: nowrap; transition: transform 100ms var(--ease); } .knopf-link, a.knopf { margin: 0; } button:hover, .knopf-link:hover, a.knopf:hover { background: var(--akzent-tief); border-color: var(--akzent-tief); color: var(--auf-akzent); text-decoration: none; } button:active, .knopf-link:active, a.knopf:active { transform: scale(.98); } button:focus-visible, .knopf-link:focus-visible, a.knopf:focus-visible, .klein-knopf:focus-visible { outline: var(--fokus-breite) solid var(--fokus-farbe); outline-offset: var(--fokus-abstand); } /* Zweitknopf: klein, weiß, mit Rand */ .klein-knopf, .kopier-knopf, .knopf-zweit, .knopf-link.zweitrangig, .knopf-link-leise, .schalter { display: inline-flex; align-items: center; justify-content: center; gap: 6px; width: auto; margin: 0; padding: 0 12px; min-height: var(--ziel-klein); background: var(--flaeche); color: var(--tinte); border: 1px solid var(--feldrand); border-radius: var(--r-element); font: 500 var(--gr-tabelle)/1.2 var(--schrift); text-decoration: none; cursor: pointer; white-space: nowrap; } .klein-knopf:hover, .kopier-knopf:hover, .knopf-zweit:hover, .knopf-link.zweitrangig:hover, .knopf-link-leise:hover, .schalter:hover { background: var(--akzent-hell); border-color: var(--akzent); color: var(--akzent-tief); } .klein-knopf:active, .kopier-knopf:active, .knopf-zweit:active, .knopf-link.zweitrangig:active { transform: scale(.98); background: var(--flaeche-3); } .knopf-link.zweitrangig { color: var(--akzent); border-color: var(--akzent); font-weight: 600; min-height: var(--ziel); padding: 0 16px; font-size: var(--gr-text); } .knopf-link.zweitrangig { margin-left: 8px; } /* steht hinter einem anderen Knopf oder Satz */ .knopf-link-leise { border-color: transparent; background: none; color: var(--akzent); } .kopier-knopf { color: var(--akzent); } .kopier-knopf .zeichen-haken, .kopier-knopf.kopiert .zeichen-kopieren { display: none; } .kopier-knopf.kopiert .zeichen-haken { display: inline-block; } .kopier-knopf.kopiert { color: var(--ok); border-color: var(--ok); } /* Endgültige Wirkung (Löschen, Zurücksetzen): rot umrandet, beim Zeigen gefüllt */ button.gefahr, .klein-knopf.gefahr { background: var(--flaeche); color: var(--fehler); border-color: var(--fehler); } button.gefahr:hover, .klein-knopf.gefahr:hover { background: var(--fehler); border-color: var(--fehler); color: var(--auf-akzent); } /* Textknopf, der wie ein Verweis aussieht („rückgängig“, „Entscheidung zurücknehmen“) */ button.link { display: inline; min-height: 0; margin: 0; padding: 0; border: 0; border-radius: 0; background: none; color: var(--akzent); font: inherit; text-decoration: underline; text-underline-offset: 2px; cursor: pointer; white-space: normal; } button.link:hover { background: none; color: var(--akzent-tief); text-decoration-thickness: 2px; } button.link:active { transform: none; } .kopf button.link { display: inline-flex; text-decoration: none; } /* Gesperrte Knöpfe sehen gesperrt aus (Prüfung 15.10.2026, Punkt 55) */ button:disabled, input[type=submit]:disabled, .knopf[aria-disabled=true] { opacity: .5; cursor: not-allowed; transform: none; } /* Absendesperre (Punkte 18/19, static/absenden.js): „Bitte warten …“, während einer Nachlade-Anfrage gesperrt */ button[data-absendesperre], input[data-absendesperre] { cursor: progress; opacity: .7; } button.htmx-request, form.htmx-request button[type=submit], form.htmx-request input[type=submit] { pointer-events: none; opacity: .6; } .knopf-auto { min-width: 12rem; } .karte.schmal button[type=submit], .karte.schmal button:not([type]) { width: 100%; } /* Punkt 116 */ /* Schalter (Erinnerungsmail, Module) */ .schalter { gap: 8px; } .schalter-form { margin: 0; } .schalter-bahn { position: relative; width: 34px; height: 18px; border-radius: 9px; background: var(--schalter-aus); } .schalter-knopf { position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgb(0 0 0 / .25); transition: transform 150ms var(--ease); } .schalter.an .schalter-bahn { background: var(--st-eingang); } .schalter.an .schalter-knopf { transform: translateX(16px); } /* --- Felder ------------------------------------------------------------------------------------------------------------ Rand 3,8 : 1 (gut sichtbar), beim Fokus Rand in Aktenpetrol mit Ring; Beschriftung darüber, Häkchen vor ihrem Text. */ label { display: block; margin: 12px 0 4px; font-size: var(--gr-meta); font-weight: 600; color: var(--tinte-2); } input, select, textarea { width: 100%; min-height: var(--ziel); padding: 6px 10px; border: 1px solid var(--feldrand); border-radius: var(--r-element); background: var(--flaeche); color: var(--tinte); font: 400 var(--gr-text)/1.35 var(--schrift); } select { padding-right: 6px; } textarea { padding: 8px 10px; resize: vertical; line-height: 1.5; } input:hover, select:hover, textarea:hover { border-color: var(--tinte-2); } /* Fokus der Felder: Rand und Ring; „kräftig“ (Einstellung „fokus“) legt zusätzlich einen Rahmen in Textfarbe darum */ input:focus-visible, select:focus-visible, textarea:focus-visible { outline: var(--feld-fokus-breite) solid var(--fokus-farbe); outline-offset: 1px; border-color: var(--akzent); box-shadow: 0 0 0 3px var(--akzent-ring); } input[type=checkbox], input[type=radio] { width: var(--haken); height: var(--haken); min-height: 0; margin: 0; padding: 0; flex: none; accent-color: var(--akzent); } input[type=checkbox]:focus-visible, input[type=radio]:focus-visible { box-shadow: none; outline: var(--fokus-breite) solid var(--fokus-farbe); outline-offset: var(--fokus-abstand); } /* Feld mit Fehler (Barrierefreiheit 30.10.2026, static/absenden.js): Rand in der Fehlerfarbe, die Meldung steht am Feld */ [aria-invalid="true"]:is(input, select, textarea) { border-color: var(--fehler); box-shadow: inset 0 0 0 1px var(--fehler); } .feld-fehler { display: flex; align-items: baseline; gap: 6px; margin: 4px 0 0; color: var(--fehler); font-size: var(--gr-tabelle); font-weight: 600; } .feld-fehler .zeichen { align-self: center; } input[type=file] { min-height: 0; padding: 6px; border-style: dashed; } input[type=date] { width: auto; } input::placeholder, textarea::placeholder { color: var(--tinte-3); } .klein-auswahl { width: auto; min-height: var(--ziel-klein); padding: 2px 6px; font-size: var(--gr-tabelle); } label.wahl, label.auswahl { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin: 8px 0 0; font-weight: 400; font-size: var(--gr-text); color: var(--tinte); } label.wahl input.kurz { width: 12rem; flex: none; } .haken { display: flex; align-items: center; gap: 8px; padding-top: 24px; } .haken label { margin: 0; } .haken-zeile { border: 0; padding: 0; margin: 12px 0 0; display: flex; flex-wrap: wrap; gap: 6px 16px; align-items: center; } label.haken-zeile, .kandidaten label { display: flex; gap: 8px; align-items: baseline; font-weight: 400; } /* Punkt 115 */ .haken-inline { display: inline-flex; align-items: center; gap: 6px; margin: 0; font-weight: 500; font-size: var(--gr-tabelle); color: var(--tinte); } fieldset { border: 0; padding: 0; margin: 12px 0 0; min-width: 0; } legend { padding: 0; font-size: var(--gr-meta); font-weight: 600; color: var(--tinte-2); } .trenner { width: 1px; height: 20px; background: var(--linie-2); } /* Formulare untereinander, Optionsgruppen einheitlich gerahmt (04.10.2026) */ .formular { display: grid; gap: 2px; } .formular label { margin-top: 8px; } .formular .zwei { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 16px; } .formular fieldset, fieldset.art-wahl { border: 1px solid var(--linie-2); border-radius: var(--r-flaeche); padding: 8px 14px 12px; margin: 12px 0 0; } .formular legend, fieldset.art-wahl legend { font-size: var(--gr-tabelle); padding: 0 4px; } .formular button { justify-self: start; padding-inline: 24px; } /* Suchzeile auf Such- und Eingangsseiten */ .suchzeile { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: flex-end; } .suchzeile .feld { flex: 1 1 280px; } .suchzeile .feld.feld-kurz { flex: 0 1 20rem; } .suchzeile input { flex: 1; min-width: 0; } .suchzeile button { margin: 0; } .suchzeile .feld ~ button { align-self: flex-end; } .karte > .suchzeile { margin-bottom: 20px; } .eingang-suche { padding-block: 8px 16px; } .eingang-suche label { margin-top: 8px; } /* Aufklapper: Pfeil vor der Zeile, dreht beim Öffnen. Jede Zeile zum Aufklappen ist mindestens 24 px hoch (WCAG 2.5.8, Barrierefreiheit 30.10.2026 – vorher 22,5 px), der Text steht in der Mitte */ summary { min-height: max(24px, var(--ziel-gross)); align-content: center; } details.aufklapp, .weitere-filter { margin-top: 12px; } details.aufklapp > summary, .weitere-filter > summary, .nebenformular > summary, .warteschlange > summary, .bemerkung-an > summary { display: flex; align-items: center; gap: 6px; width: fit-content; list-style: none; cursor: pointer; color: var(--akzent); font-weight: 600; } details.aufklapp > summary::-webkit-details-marker, .weitere-filter > summary::-webkit-details-marker, .nebenformular > summary::-webkit-details-marker, .warteschlange > summary::-webkit-details-marker, .bemerkung-an > summary::-webkit-details-marker { display: none; } details.aufklapp > summary::before, .weitere-filter > summary::before, .nebenformular > summary::before, .warteschlange > summary::before, .bemerkung-an > summary::before { content: ""; flex: none; width: 14px; height: 14px; background: currentColor; transition: transform 150ms var(--ease); -webkit-mask: var(--ic-pfeil) center / contain no-repeat; mask: var(--ic-pfeil) center / contain no-repeat; } details[open].aufklapp > summary::before, .weitere-filter[open] > summary::before, .nebenformular[open] > summary::before, .warteschlange[open] > summary::before, .bemerkung-an[open] > summary::before { transform: rotate(90deg); } details.aufklapp > summary:hover, .weitere-filter > summary:hover { color: var(--akzent-tief); } details.aufklapp[open] > summary, .weitere-filter[open] > summary { margin-bottom: 8px; } .karte.aufklapp > summary { margin: 0; } .karte.aufklapp[open] > summary { margin-bottom: 12px; } .warteschlange summary h2 { display: inline; margin: 0; } /* --- Tabellen --------------------------------------------------------------------------------------------------------- */ .tabelle { width: 100%; border-collapse: separate; border-spacing: 0; font-size: var(--gr-tabelle); line-height: 1.4; } .tabelle th, .tabelle td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--linie); vertical-align: top; } .tabelle thead th { background: var(--flaeche-2); color: var(--tinte-2); font-size: var(--gr-meta); font-weight: 600; border-bottom-color: var(--linie-2); vertical-align: bottom; } .tabelle td.zahl, .tabelle th.zahl { text-align: right; } .tabelle tr.inaktiv td { color: var(--tinte-3); } .tabelle tr.gruppenkopf th { background: var(--flaeche-2); color: var(--tinte); font: 600 var(--gr-tabelle)/1.3 var(--schrift); padding-top: 14px; } /* Spaltenköpfe langer Listen bleiben unter der festen Kopfleiste stehen (Nutzer 05.10.2026) – Katalog, Akten, Probenahmen mit Lineal; die Proben eines Vorgangs ohne Lineal (data-kopf-steht, Etappe 8, 23.10.2026). Unter der Kopfleiste (z-index 50), nie darüber. */ table[data-lineal] > thead th, table[data-kopf-steht] > thead th { position: sticky; top: var(--kopf-hoehe); z-index: 2; box-shadow: 0 4px 6px -4px rgb(19 38 42 / .18); } :root:is([data-kopfleiste="mitlaufen"], [data-kopf-hoch]) :is(table[data-lineal], table[data-kopf-steht]) > thead th { position: static; } /* Lineal: die Zeile im Blick über alle Spalten (static/lineal.js) */ .tabelle tr.im-blick > td, .tabelle tr.im-blick > th { background: var(--lineal); box-shadow: inset 0 1px 0 var(--lineal-rand), inset 0 -1px 0 var(--lineal-rand); } /* Lange Listen der Gebietssuche (Nutzer 05.10.2026): offen und bearbeitet getrennt, Streifen am Zeilenanfang */ .tabelle tr.zeile-offen > td { background: var(--zeile-offen); } .tabelle tr.zeile-bearbeitet > td { background: var(--zeile-bearbeitet); } .tabelle tr.zeile-offen > td:first-child { box-shadow: inset 3px 0 0 var(--streifen-offen); } .tabelle tr.zeile-bearbeitet > td:first-child { box-shadow: inset 3px 0 0 var(--streifen-bearbeitet); } .tabelle tr.zeile-offen.im-blick > td, .tabelle tr.zeile-bearbeitet.im-blick > td { background: var(--lineal); } tr.verschoben td { background: var(--ok-flaeche); color: var(--tinte-3); font-size: var(--gr-tabelle); } .aktionen { display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; } .aktionen form { margin: 0; } /* In Tabellen bleibt die Knopfspalte eine Zelle (Punkt 114) */ td.aktionen { display: table-cell; text-align: right; white-space: nowrap; } td.aktionen > form, td.aktionen > span, td.aktionen > details { display: inline-block; } td.aktionen > * { margin: 2px 0 2px 6px; vertical-align: middle; } /* Knöpfe als Verweis bleiben inline-flex */ /* Feste Spaltenbreiten: ohne sie richtet sich die Tabelle nach dem längsten Produktnamen und wächst über den Rand */ .ergebnisse { table-layout: fixed; } .ergebnisse td, .ergebnisse th { overflow-wrap: break-word; hyphens: auto; } .ergebnisse td:first-child { padding-left: 14px; } .sp-betrieb { width: 20%; } .sp-ort { width: 13%; } .sp-ware { width: 15%; } .sp-beleg { width: 17%; } .sp-status { width: 14%; } .sp-rm { width: 21%; } .gekappt { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--linie); } /* --- Reiter ----------------------------------------------------------------------------------------------------------- */ .reiter { display: flex; gap: 4px; margin: 0 0 16px; border-bottom: 1px solid var(--linie-2); overflow-x: auto; } .reiter a { display: inline-flex; align-items: center; gap: 8px; padding: 10px 14px 9px; color: var(--tinte-2); font-weight: 500; text-decoration: none; border-bottom: 3px solid transparent; margin-bottom: -1px; white-space: nowrap; } .reiter a:hover { color: var(--tinte); background: var(--flaeche-2); } .reiter a.aktiv, .reiter a[aria-current="page"] { color: var(--tinte); font-weight: 600; border-bottom-color: var(--akzent); } .reiter a .zahl { min-width: 1.83em; padding: 0 7px; border-radius: 999px; background: var(--flaeche-3); color: var(--tinte-2); font-size: var(--gr-mini); font-weight: 600; line-height: 1.67; text-align: center; } .reiter a.aktiv .zahl { background: var(--akzent); color: var(--auf-akzent); } .unternavigation { display: flex; flex-wrap: wrap; gap: 4px 16px; margin: 0 0 12px; font-size: var(--gr-tabelle); } .unternavigation a[aria-current] { font-weight: 600; text-decoration: none; border-bottom: 2px solid var(--akzent); } /* --- Markierungen ----------------------------------------------------------------------------------------------------- Status mit Farbpunkt, Trefferqualität als drei Striche, Hinweise in der Hinweisfarbe mit Zeichen, Marken als kleine Etiketten. „Probe genommen“ fällt auf: fett und unterstrichen (Nutzer 22.10.2026, Punkt 6). */ .status-marke, .status { display: inline-flex; align-items: center; gap: 7px; font-weight: 500; color: var(--tinte-2); } .status-marke::before, .status::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; flex: none; align-self: flex-start; margin-top: calc(.75em - 4px); } /* auf Höhe der ersten Zeile, auch wenn das Wort umbricht */ .status-neu { color: var(--tinte-2); } .status-relevant { color: var(--ok); } .status-probe_genommen { color: var(--ok); } .status-marke.status-probe_genommen { font-weight: 700; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: .2em; } .status-verworfen { color: var(--tinte-3); } .status-zurueckgestellt { color: var(--st-offen); } .status.laeuft, .status.wartend { color: var(--st-offen); } .status.fertig { color: var(--ok); } .status.abgebrochen, .status.teilweise { color: var(--warn); } .status.fehler { color: var(--fehler); } .katalog-tabelle .status-marke { white-space: normal; hyphens: manual; } /* „Probe / genommen“, nie „genom-men“ */ /* Trefferqualität: drei Striche wie eine Empfangsanzeige – hoch ▮▮▮ · mittel ▮▮▯ · gering ▮▯▯ */ .guete { display: inline-flex; align-items: center; gap: 7px; color: var(--tinte-2); --g1: var(--tinte-2); --g2: var(--linie-2); --g3: var(--linie-2); } .guete::before { content: ""; width: 19px; height: 10px; flex: none; background: linear-gradient(to right, var(--g1) 0 5px, transparent 5px 7px, var(--g2) 7px 12px, transparent 12px 14px, var(--g3) 14px 19px); } .guete-hoch { --g1: var(--ok); --g2: var(--ok); --g3: var(--ok); } .guete-mittel { --g1: var(--tinte-2); --g2: var(--tinte-2); } .guete-niedrig, .guete-sehr-niedrig { color: var(--tinte-3); --g1: var(--warn); } .stufe { font-weight: 500; } .stufen-zeile { margin: 0 0 12px; font-weight: 600; } .stufe-marke { font-weight: 600; } /* Stufen der Kontrolle sind Text: „1 × Verstoß“ (Befund 37) */ .weg { display: inline-block; margin-top: 3px; color: var(--tinte-2); font-weight: 500; } /* im Katalog nach
, in der Akte im Satz */ .vorschlag { display: block; color: var(--tinte-3); border-bottom: 1px dotted var(--linie-2); width: fit-content; cursor: help; } /* Einordnung des Orts und der Zuständigkeit – prüfen, nicht verwerfen */ .auswaerts, .zust-unklar, .marke-fremd { display: inline-flex; align-items: center; gap: 4px; margin-top: 3px; color: var(--warn); font-weight: 600; } .auswaerts::before, .zust-unklar::before, .marke-fremd::before { content: ""; width: 13px; height: 13px; flex: none; background: currentColor; -webkit-mask: var(--ic-warn) center / contain no-repeat; mask: var(--ic-warn) center / contain no-repeat; } .korb-produkt .marke-fremd { display: flex; width: fit-content; margin-top: 4px; } .zust-hinweis { margin: 6px 0 12px; } .zust-hinweis ul { margin: 4px 0 0; padding-left: 18px; } .ortsteil { color: var(--tinte-3); } .marke-korrigiert, .marke-rueckwaerts { display: inline-block; margin-top: 3px; color: var(--tinte-3); font-size: var(--gr-meta); } /* Kleine Etiketten: Bezirk, Rolle, Test, Recht, Warengruppen-Zusatz */ .marke-bezirk, .marke-rolle, .marke-test, .marke-recht, .marke-maske { display: inline-block; margin: 2px 0; padding: 0 6px; border-radius: var(--r-marke); background: var(--flaeche-3); color: var(--tinte-2); font-size: var(--gr-meta); font-weight: 500; line-height: 1.55; white-space: nowrap; } .marke-rolle.admin { background: var(--rolle-admin-flaeche); color: var(--rolle-admin); } .marke-rolle.leitung { background: var(--warn-flaeche); color: var(--warn-text); } .marke-maske { margin-left: 4px; } .marke-verdeckt { display: inline-block; padding: 2px 8px; border-radius: var(--r-marke); background: var(--verdeckt); color: #fff; font: 600 var(--gr-meta)/1.2 var(--schrift); vertical-align: middle; } .marke-risiko, .marke-notloesung { display: inline-block; padding: 0 6px; border-radius: var(--r-marke); font-size: var(--gr-meta); font-weight: 500; line-height: 1.55; background: var(--warn-flaeche); color: var(--warn-text); } .marke-notloesung { background: var(--fehler-flaeche); color: var(--fehler); } .namensgleich, .weitere { margin-top: 4px; font-size: var(--gr-meta); color: var(--tinte-3); } .weitere summary { cursor: pointer; } .weitere ul { margin: 4px 0 0; padding-left: 16px; } /* --- Katalog ---------------------------------------------------------------------------------------------------------- */ .datenstand, .gebiet-hinweis { margin: -12px 0 12px; } .pruef-hinweis { margin: 12px 0 0; font-size: var(--gr-tabelle); } .pruef-hinweis.hervorgehoben { padding: 10px 14px; border-radius: var(--r-element); background: var(--akzent-hell); box-shadow: inset 0 0 0 1px var(--hervorgehoben-rand); font-size: var(--gr-text); } .karte.filter { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 16px; align-items: start; padding: 12px 20px 14px; } .karte.filter > .filter-raster { grid-column: 1 / -1; } .karte.filter > .weitere-filter { grid-column: 1; } .karte.filter > .filter-knoepfe { grid-column: 2; grid-row: 2; margin-top: 8px; } .filter-raster { display: flex; flex-wrap: wrap; gap: 0 16px; align-items: end; } .filter-raster > div, .filter-raster > fieldset { flex: 1 1 12rem; min-width: 0; } .filter-raster > .feld-breit { flex: 2 1 18rem; } .filter-raster > .feld-breit:has(#sortierung) { flex: 1 1 12rem; } .filter label { margin-top: 0; } .weitere-filter .filter-raster { margin-top: 8px; } .weitere-filter .filter-raster label { margin-top: 8px; } .relevanz-wahl { display: flex; gap: 4px 20px; flex-wrap: wrap; align-items: center; } .relevanz-wahl legend { width: 100%; margin-bottom: 2px; } .filter-knoepfe { display: flex; gap: 16px; align-items: center; margin-top: 12px; } #katalog-liste { padding: 0; overflow: visible; } .trefferzahl { margin: 0; padding: 14px 20px 12px; color: var(--tinte-2); } .trefferzahl strong { font: 600 var(--gr-h2)/1 var(--titel); color: var(--tinte); } #katalog-liste > .gebiet-hinweis, #katalog-liste > p:not(.trefferzahl), #katalog-liste > .seiten { margin: 12px 20px; } #katalog-liste > .pruef-hinweis { padding-bottom: 16px; } #katalog-liste.htmx-request { opacity: .55; transition: opacity 150ms; } /* sonst sieht ein Klick aus wie keiner */ /* Elf Spalten nebeneinander statt untereinander (Nutzer 09.10.2026), senkrechte Trennlinien auch im Kopf */ .katalog-tabelle th, .katalog-tabelle td { border-left: 1px solid var(--linie); hyphens: auto; overflow-wrap: break-word; } .katalog-tabelle th:first-child, .katalog-tabelle td:first-child { border-left: 0; padding-left: 20px; } .katalog-tabelle th { hyphens: manual; } /* „Trefferqualität“ nie „Trefferqu-alität“ (22.10.2026) */ .katalog-tabelle .sp-betrieb { width: 10%; } .katalog-tabelle .sp-web { width: 9%; } .katalog-tabelle .sp-branche { width: 7%; } .katalog-tabelle .sp-ort { width: 9%; } .katalog-tabelle .sp-ware { width: 8%; } .katalog-tabelle .sp-beleg { width: 10%; } .katalog-tabelle .sp-relevanz { width: 7.5%; } .katalog-tabelle .sp-guete { width: 7%; } .katalog-tabelle .sp-status { width: 6.5%; } .katalog-tabelle .sp-rm { width: 17%; } .katalog-tabelle .sp-aktion { width: 9%; } .katalog-tabelle td.klein, .katalog-tabelle td .klein { font-size: var(--gr-meta); color: var(--tinte-2); } .katalog-tabelle td:first-child strong a { color: var(--tinte); font-weight: 600; text-decoration: none; } .katalog-tabelle td:first-child strong a:hover { color: var(--akzent); text-decoration: underline; } .katalog-tabelle tr.im-blick > td:not(:first-child) { border-left-color: var(--lineal-trenner); } /* Trennlinien bleiben im Blau */ /* „Probe nehmen“: der klare Knopf der Zeile, Aktenpetrol umrandet */ a.klein-knopf.probe-knopf, button.klein-knopf.probe-knopf { min-height: max(32px, var(--ziel-klein)); padding: 0 12px; color: var(--akzent); border-color: var(--akzent); font-weight: 600; } .katalog-tabelle a.probe-knopf { width: 100%; } .seiten { display: flex; gap: 16px; justify-content: center; align-items: center; padding: 12px 0 16px; } .seiten a { display: inline-flex; align-items: center; gap: 4px; } .nachrangig-hinweis { margin: 12px 20px 0; } /* --- Entscheidungen im Katalog, in der Suche und der Akte (Grill 08.10.2026) ------------------------------------------ Vier gleich breite Knöpfe untereinander (Nutzer 09.10.2026) – als eine zusammenhängende, flache Knopfleiste. */ .rm-spalte { min-width: 210px; } .ergebnisse .rm-spalte { min-width: 0; } /* unter table-layout: fixed regelt die colgroup */ .rm { font-size: var(--gr-meta); } .rm p { margin: 0 0 4px; } .rm-programm { color: var(--tinte-3); } .rm-programm strong { color: var(--tinte); font-weight: 600; } .rm-vermerk strong { color: var(--warn); } .rm-stand { font-weight: 600; } .rm-stand.stand-arbeit, .rm-stand.stand-passt, .rm-stand.stand-hochstufen { color: var(--ok); } .rm-stand.stand-aussortieren, .rm-stand.stand-falsch { color: var(--fehler); } .rm-stand.stand-spaeter, .rm-stand.stand-unklar { color: var(--st-offen); } .rm-ok { display: inline-flex; align-items: center; gap: 4px; color: var(--ok); font-weight: 600; } .rm-knoepfe { display: grid; grid-template-columns: minmax(0, 12rem); width: fit-content; min-width: min(100%, 10rem); margin-top: 6px; border: 1px solid var(--feldrand); border-radius: var(--r-element); overflow: hidden; background: var(--flaeche); } .rm-knoepfe form { margin: 0; } .rm-knoepfe .klein-knopf { width: 100%; min-height: max(24px, var(--ziel-gross)); padding: 0 10px; border: 0; border-radius: 0; justify-content: flex-start; font-size: var(--gr-meta); box-shadow: inset 0 1px 0 var(--linie-2); } /* Trennstrich über jedem Knopf … */ .rm-knoepfe > .klein-knopf:first-child, .rm-knoepfe > :first-child > .klein-knopf { box-shadow: none; } /* … außer dem ersten */ .rm-knoepfe .klein-knopf:active { transform: none; background: var(--flaeche-3); } .rm-knoepfe .klein-knopf:focus-visible { outline-offset: -2px; } .rm-knoepfe .rm-arbeit { color: var(--tinte); font-weight: 600; } .rm-knoepfe .rm-arbeit:hover { background: var(--ok-flaeche); color: var(--ok); } .rm-knoepfe .rm-aussortieren { color: var(--fehler); } .rm-knoepfe .rm-aussortieren:hover { background: var(--fehler-flaeche); color: var(--fehler); } .rm-knoepfe .rm-spaeter:hover { background: var(--info-flaeche); color: var(--st-offen); } .rm-knoepfe .rm-korrektur { color: var(--tinte-2); } .rm-speichern { margin-top: 8px; } .rm-spalte > p.klein { margin: 6px 0 0; color: var(--tinte-3); } .rm-korrigieren { margin-top: 4px; } .rm-gruende { border: 0; padding: 0; margin: 4px 0 6px; display: grid; gap: 2px; } .rm-grund { display: flex; gap: 6px; align-items: baseline; margin: 0; font-weight: 400; cursor: pointer; color: var(--tinte); } .rm-nachtrag { display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: center; margin: 2px 0; } .rm-nachtrag label { display: inline-flex; align-items: center; gap: 6px; margin: 0; font-weight: 400; } .rm-nachtrag select { width: auto; min-height: max(26px, var(--ziel-gross)); padding: 0 4px; font-size: var(--gr-meta); } .rm-offen { background: var(--flaeche-2); border: 1px solid var(--linie-2); border-radius: var(--r-flaeche); padding: 8px 10px; } .rm-offen label { margin: 8px 0 2px; font-size: var(--gr-meta); } .rm-offen input, .rm-offen select, .rm-offen textarea { font-size: var(--gr-tabelle); } .rm-titel { font-weight: 600; } /* Zusatzfelder nur beim passenden Grund (ohne :has()-Unterstützung bleiben sie einfach sichtbar) */ .rm-offen:has(select[name=grund] option[value=andere_url]:not(:checked)) .feld-shopadresse, .rm-offen:has(select[name=grund] option[value=warengruppe]:not(:checked)) .feld-warengruppe { display: none; } .akte-verlauf { margin-top: 8px; } .akte-verlauf li.zurueckgenommen { text-decoration: line-through; color: var(--tinte-3); } .arbeitsstatus { display: flex; align-items: center; gap: 6px; margin: 0; } .eingang-kopf p { margin: 0; } .eingang-kopf a { margin-left: 4px; } /* --- Probenahme ------------------------------------------------------------------------------------------------------- */ #stand form { margin-top: 12px; } .stand-kopf { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; } .automatik-produkte { list-style: none; padding: 0; margin: 12px 0; } .automatik-produkte li { padding: 2px 0; } .automatik-produkte .ap-erhoben { color: var(--ok); } .automatik-produkte .ap-nicht_erhebbar, .automatik-produkte .ap-ersetzt { color: var(--tinte-3); } .korb-automatik { margin-bottom: 20px; } /* „Automatisch beproben“ über dem Sammelkorb (Nutzer 12.10.2026) */ .kopierzeile { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; } .kopierzeile .bk { white-space: nowrap; } /* Probennummern im Betreff nicht am Bindestrich trennen (26.10.2026) */ textarea.anschreiben { font: 400 var(--gr-tabelle)/1.55 var(--schrift); background: var(--flaeche-2); margin-top: 8px; } /* „In Outlook öffnen“ und Kopieren nebeneinander (Nutzer 22.10.2026, Punkt 23) */ .mail-knoepfe { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 12px 0 4px; } /* Vorgang (Nutzer 26.10.2026, „platzverschwendend“): links Wiedervorlage und Erinnerung untereinander, rechts das Anschreiben (.stapel in .nebeneinander); der Text der Briefe klappt unter „Text anzeigen“ auf */ details.brieftext { margin-top: 8px; } /* Nach dem Eingang (Nutzer 26.10.2026, web/nach_eingang.py): mehrere Herstellerbriefe in einer Karte, durch eine Linie getrennt */ .hersteller-brief + .hersteller-brief { border-top: 1px solid var(--linie); margin-top: 12px; padding-top: 12px; } /* Der Brief so, wie er in Outlook ankommt (brief_html, Nutzer 26.10.2026): weißes Blatt, Arial wie die Mail, die Probenangaben in fester Spalte (.bn = 170 px wie in der Mail). Die Mail trägt dieselben Werte eingebettet – hier kommen sie aus dem Stilblatt, denn die Seite verbietet eingebettete Formatierung (brief_html.ohne_stil) */ .brief-vorschau { max-height: 34rem; overflow: auto; padding: 14px 18px; border: 1px solid var(--linie); border-radius: var(--r-element); background: var(--blatt); } .brief-vorschau .brief, .brief-vorschau .brief td { font: 400 11pt/1.35 Arial, Helvetica, sans-serif; color: #000; } .brief-vorschau p.bz { margin: 0; overflow-wrap: anywhere; } .brief-vorschau table { width: auto; margin: 0; border-collapse: collapse; } .brief-vorschau table.bp { margin-left: 20px; } .brief-vorschau table.bp1 { margin-left: 12px; } .brief-vorschau td { padding: 0; border: 0; vertical-align: top; background: none; } .brief-vorschau td.bn { width: 170px; padding-right: 8px; } .brief-vorschau td.bl { padding-right: 8px; white-space: nowrap; } .brief-vorschau td.bw { overflow-wrap: anywhere; } .brief-vorschau .bk { white-space: nowrap; } .marke-verdeckt + .marke-verdeckt { margin-left: 4px; } .loeschen-form { margin-top: 8px; } /* Fall melden (Nutzer 28.10.2026, _fall_melden.html): wie „… löschen …“ eingeklappt, die Auswahl so breit wie ihr längster Text */ .fall-form { margin-top: 8px; } .fall-form select { width: auto; max-width: 100%; } .fall-form .knopf-auto { margin-top: 12px; } .probe-entfernen > summary { color: var(--fehler); } .probe-entfernen > summary:hover { color: var(--fehler); } /* Verdeckte Probenahme (01.10.2026): Deckadresse erst, wenn „verdeckt“ gewählt ist (Fable-Review 2) */ .art-wahl .art-deck { display: block; margin-top: 6px; } .art-wahl:not(:has(input[value="verdeckt"]:checked)) .art-deck { display: none; } .schritte { list-style: none; padding: 0; margin: 16px 0 0; display: grid; gap: 12px; } .schritte > li { background: var(--flaeche); border: 1px solid var(--linie-2); border-radius: var(--r-flaeche); padding: 10px 14px; } .schritte > li.erledigt { border-color: var(--ok-rand); background: var(--erledigt-flaeche); } .schritte h3 { margin: 0 0 6px; font-size: var(--gr-h3); } ul.klein.schritte { display: block; margin: 6px 0 0; padding-left: 18px; list-style: disc; } ul.klein.schritte > li { background: none; border: 0; padding: 1px 0; } .unterrichtung-liste { list-style: none; padding: 0; display: grid; gap: 6px; } .vorlagenwahl { list-style: none; padding: 0; display: grid; gap: 6px; } .vorlagenwahl li.passend { font-weight: 600; } /* --- Probenahme-Vorgang (Stil B, Nutzer 22.10.2026) ------------------------------------------------------------------- Kopf mit den Angaben in Spalten, darunter die Proben als Tabelle: eine Zeile je Probe, aufklappbar (static/proben.js). Signatur: der Stand der Probe als Eingangsstempel – Wort und Datum in einem Kasten in der Farbe des Stands. */ .vorgang-kopf h1 { display: flex; align-items: center; gap: 8px 12px; flex-wrap: wrap; } .aktenzeichen { font: 500 var(--gr-tabelle)/1 var(--mono); color: var(--tinte-2); background: var(--flaeche-3); padding: 5px 8px; border-radius: var(--r-marke); letter-spacing: 0; } /* Kopfbogen: die Angaben nebeneinander, durch Haarlinien getrennt; die Bearbeitung nimmt den Rest der Zeile */ dl.angaben { display: flex; flex-wrap: wrap; margin: 14px 0 20px; padding: 12px 0; background: var(--flaeche); border-radius: var(--r-flaeche); box-shadow: var(--schatten); } dl.angaben > div { flex: 0 1 auto; min-width: 0; padding: 2px 20px; box-shadow: -1px 0 0 var(--linie); } dl.angaben > div:first-child { box-shadow: none; } dl.angaben > .angabe-breit { flex: 1 1 18rem; } dl.angaben > .angabe-stand { max-width: 30rem; } dl.angaben dt { font-size: var(--gr-meta); color: var(--tinte-3); } dl.angaben dd { margin: 2px 0 0; font-weight: 500; } .vorgang-laeuft { display: inline-flex; align-items: center; gap: 6px; color: var(--st-offen); } .vorgang-laeuft strong { font-weight: 600; } .stand-schritt { display: block; font-size: var(--gr-meta); font-weight: 400; color: var(--tinte-2); } /* Fortschritt einer Probe (Auswertung, Alternative): sichtbar, mit „läuft seit …“ */ .fortschritt { display: flex; align-items: baseline; gap: 8px; margin: 4px 0 12px; padding: 8px 12px; border-radius: var(--r-element); background: var(--info-flaeche); box-shadow: inset 0 0 0 1px var(--info-rand); color: var(--tinte); font-size: var(--gr-tabelle); } .fortschritt > .zeichen { align-self: center; color: var(--st-offen); } .meldung-knopf { margin: 8px 0 0; } .meldung-knopf button { margin: 0; } /* Proben-Tabelle */ .karte.proben { padding: 16px 0 0; overflow: visible; } .proben > .abschnitt-kopf { padding: 0 20px; } .proben-tabelle { table-layout: fixed; } .proben-tabelle col.sp-auf { width: 48px; } .proben-tabelle col.sp-nr { width: 11rem; } .proben-tabelle col.sp-bild { width: 116px; } .proben-tabelle col.sp-stand { width: 11.5rem; } .proben-tabelle col.sp-hinweis { width: 17rem; } .proben-tabelle col.sp-aktion { width: 9.5rem; } .proben-tabelle thead th:first-child { padding-left: 20px; } .proben-tabelle .probe-zeile > td, .proben-tabelle .probe-zeile > th { vertical-align: middle; height: 88px; padding-block: 8px; cursor: pointer; } .proben-tabelle .probe-zeile > td:first-child { padding-left: 14px; } .proben-tabelle .probe-zeile:hover > * { background: var(--flaeche-2); } .proben-tabelle .kennung { font-size: var(--gr-tabelle); font-weight: 500; color: var(--tinte); } .proben-tabelle th.sp-nr { font-weight: 500; } .aufklapper { width: var(--ziel-mini); height: var(--ziel-mini); min-height: 0; margin: 0; padding: 0; background: none; border: 0; border-radius: var(--r-element); color: var(--tinte-2); font-size: var(--gr-h3); } .aufklapper .zeichen { transition: transform 150ms var(--ease); } .aufklapper:hover { background: var(--flaeche-3); border-color: transparent; color: var(--tinte); } .aufklapper[aria-expanded="true"] .zeichen { transform: rotate(90deg); } /* Vorschaubild 96 × 72 (Etappe 8, Nutzer 23.10.2026: 72 × 54 war zu klein) – auf dem Server verkleinert und darum scharf (probenahme.vorschau); ein Klick öffnet das Original in der Großansicht */ .sp-bild a { display: block; width: 96px; border-radius: 5px; cursor: zoom-in; } .sp-bild img { display: block; width: 96px; height: 72px; object-fit: contain; background: var(--flaeche-2); border-radius: 5px; box-shadow: inset 0 0 0 1px rgb(0 0 0 / .08); outline: 1px solid rgb(0 0 0 / .08); outline-offset: -1px; } .sp-bild a:hover img { outline-color: var(--akzent); } .produktname { display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-weight: 600; } .produktname.leise { font-weight: 400; font-style: italic; } .shop { display: block; font-size: var(--gr-meta); color: var(--tinte-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* Signatur: Eingangsstempel – Wort und Datum in einem Kasten in der Farbe des Stands */ .eingangsstempel { display: inline-grid; padding: 4px 9px 5px; border: 1.5px solid var(--st-farbe); border-radius: var(--r-marke); color: var(--st-farbe); line-height: 1.15; background: var(--flaeche); } .stempel-wort { display: inline-flex; align-items: center; gap: 5px; font: 700 var(--gr-meta)/1.15 var(--titel); letter-spacing: .07em; text-transform: uppercase; white-space: nowrap; } .stempel-wort .zeichen { width: 13px; height: 13px; } .stempel-datum { font: 500 var(--gr-mini)/1.2 var(--mono); margin-top: 2px; white-space: nowrap; } .sp-hinweis .warnung { display: flex; font-size: var(--gr-tabelle); } .sp-hinweis .warnung + .warnung { margin-top: 4px; } .warnung.laeuft { color: var(--st-offen); font-weight: 500; } a.protokoll-knopf { color: var(--akzent); border-color: var(--akzent); font-weight: 600; } /* Aufgeklappt: Unterfläche mit Strich in Aktenpetrol am Rand, zwei Spalten */ .proben-tabelle tbody.probe.offen > .probe-zeile > * { background: var(--flaeche-2); border-bottom-color: transparent; } .proben-tabelle tbody.probe.offen > .probe-zeile > td:first-child { box-shadow: inset 3px 0 0 var(--akzent); } .probe-mehr > td { padding: 4px 24px 24px 62px; background: var(--flaeche-2); border-bottom: 1px solid var(--linie-2); box-shadow: inset 3px 0 0 var(--akzent); cursor: auto; } .mehr-raster { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: 0 40px; } .mehr-spalte > h3:first-child { margin-top: 12px; } .probe-mehr h3 { margin: 20px 0 8px; font-size: var(--gr-tabelle); } .probe-mehr h3 .leise { font-weight: 400; } dl.angaben-liste { display: grid; grid-template-columns: 9rem minmax(0, 1fr); gap: 6px 12px; margin: 0; } dl.angaben-liste > div { display: contents; } dl.angaben-liste dt { font-size: var(--gr-meta); color: var(--tinte-3); padding-top: 1px; } dl.angaben-liste dd { margin: 0; } .eingang { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; } .eingang-stand { margin: 0; } .eingang .stand-knoepfe { justify-content: flex-start; } /* Eingang am Handy (Etappe 9): wer angenommen hat, Mängel, Notiz und Fotos der Ware – unter dem Stand, über die ganze Breite */ .eingang > .eingang-handy, .eingang > .eingangsfotos { flex-basis: 100%; } /* Gegenprobe (Nutzer 26.10.2026): unter dem Stand über die ganze Breite, wie die Angaben vom Handy */ .eingang > .gegenprobe, .eingang > details { flex-basis: 100%; } .gegenprobe { grid-template-columns: 6rem minmax(0, 1fr); } /* Ersatzware vom Händler (Nutzer 28.10.2026, web/ersatzware.py): Satz über die ganze Breite; im Formular die Wege untereinander, die Fotos als Vorschaubilder zum Anklicken, Nummer und Bestätigung nur beim zweiten Weg (ohne :has() bleiben sie sichtbar) */ .eingang > .ersatzware-angabe { flex-basis: 100%; display: flex; gap: 6px; align-items: baseline; margin: 0; color: var(--tinte-2); } .ersatzware-form fieldset { margin: 0 0 12px; } .ersatzware-weg .wahl { display: block; margin: 4px 0; } .ersatzware-foto { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; } .ersatzware-foto legend { width: 100%; } .ersatzware-foto .wahl { display: inline-flex; align-items: center; gap: 6px; } .ersatzware-foto img { width: 96px; height: 72px; object-fit: cover; border-radius: var(--r-marke); box-shadow: 0 0 0 1px var(--linie-2); } .ersatzware-neu { display: grid; gap: 8px; justify-items: start; margin: 4px 0 0; } .ersatzware-form:has(input[name=weg][value=neu]:not(:checked)) .ersatzware-neu { display: none; } /* Übersicht statt Produktseite (Fall Aachen 02.11.2026, web/produktwahl.py): die Produkte der Übersicht als Tabelle – Name, Webadresse und je Zeile „Dieses Produkt beproben“ (Zweitknopf wie „Probe nehmen“); nicht breiter als nötig */ .produktwahl { max-width: 72rem; margin: 0 0 16px; container: produktwahl / inline-size; } /* schmal: Karten (unten) */ .produktwahl-tabelle { table-layout: fixed; background: var(--flaeche); } .produktwahl-tabelle col.pw-adresse { width: 42%; } .produktwahl-tabelle col.pw-aktion { width: 14rem; } .produktwahl-tabelle td { vertical-align: middle; overflow-wrap: break-word; } .produktwahl-tabelle td.aktionen form, .produktwahl-tabelle td.aktionen button { margin: 0; } /* Der Knopf bleibt in seiner Spalte (Barrierefreiheit, WCAG 1.4.12): Mit breiterer Schrift (OpenDyslexic), großer Schrift oder weiten Abständen bricht sein Text um – vorher ragte er bei OpenDyslexic 85 px über die Tabelle hinaus */ .produktwahl-tabelle td.aktionen { white-space: normal; } .produktwahl-tabelle button.probe-knopf { max-width: 100%; padding-block: 4px; white-space: normal; text-align: center; line-height: 1.25; } /* Hersteller laut Kennzeichnung (Nutzer 26.10.2026, hersteller.py) */ .hersteller-anschrift { margin: 0 0 4px; } .hersteller-form .haken, .hersteller-form .zeile-knoepfe { grid-column: 1 / -1; padding-top: 8px; } .eingang-handy { grid-template-columns: 6rem minmax(0, 1fr); } ul.maengel { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; } ul.maengel .warnung { font-weight: 500; } .eingang-notiz { white-space: pre-wrap; } .bildleiste.eingangsfotos figure { width: 12.5rem; } .bildleiste.eingangsfotos img { max-height: 12.5rem; } .feldzeile { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 0 12px; } .feldzeile > div { flex: 0 1 22rem; min-width: 12rem; } .feldzeile button { margin: 0; } ul.unterlagen { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; } ul.unterlagen a { display: inline-flex; align-items: center; gap: 6px; font-weight: 500; color: var(--tinte-2); } ul.unterlagen a:hover { color: var(--akzent-tief); } ul.unterlagen .unterlage-haupt a { font-weight: 600; color: var(--akzent); } .einzelseiten { margin-top: 8px; } .einzelseiten > summary { font-size: var(--gr-tabelle); font-weight: 500; } .einzelseiten-liste { display: flex; flex-wrap: wrap; gap: 4px 12px; margin: 0; font-size: var(--gr-meta); } ul.auffaellig { margin: 0 0 8px; padding-left: 18px; font-size: var(--gr-meta); } /* Bilder ungeschnitten: Bildschirmfotos und Produktbilder getrennt, ein Klick öffnet die Großansicht */ .bildleiste { display: flex; flex-wrap: wrap; gap: 16px; align-items: flex-start; } .bildleiste figure { margin: 0; width: 15rem; } .bildleiste figure > a { display: block; border-radius: var(--r-element); background: var(--flaeche-3); box-shadow: var(--schatten); cursor: zoom-in; overflow: hidden; } .bildleiste figure > a:hover { box-shadow: var(--schatten), 0 0 0 2px var(--akzent); } .bildleiste img { display: block; width: 100%; height: auto; max-height: 22rem; object-fit: contain; } /* immer das ganze Bild */ .bildleiste.produktbilder figure { width: 12.5rem; } /* 10rem war zu klein (Etappe 8, 23.10.2026) */ .bildleiste.produktbilder img { max-height: 12.5rem; } .bildleiste figcaption { margin-top: 6px; font-size: var(--gr-meta); color: var(--tinte-2); overflow-wrap: anywhere; } /* Kennzeichnung */ .kennzeichnung { background: var(--flaeche); border-radius: var(--r-element); box-shadow: var(--schatten); overflow: hidden; } .kennzeichnung th { width: 34%; font-size: var(--gr-meta); color: var(--tinte-2); font-weight: 600; background: none; } .kennzeichnung thead th { width: auto; background: var(--flaeche-2); } .kennzeichnung td { white-space: pre-wrap; } .kennzeichnung tr:last-child > * { border-bottom: 0; } .kennzeichnung tr.leer td { color: var(--warn); } .kennzeichnung th .quelle { display: block; margin-top: 2px; font-weight: 400; color: var(--tinte-3); } .probe-mehr .warnzeile { font-size: var(--gr-tabelle); } .maske-zeile { margin: 6px 0 4px; } .mehr-fuss { display: flex; flex-wrap: wrap; gap: 8px 32px; align-items: flex-start; margin-top: 20px; padding-top: 12px; border-top: 1px solid var(--linie-2); } .mehr-fuss form { margin: 0; } .mehr-fuss details.aufklapp { margin-top: 4px; } .mehr-fuss details[open] { flex-basis: 100%; } /* Wiedervorlage des Vorgangs: Frist, Termin, „alle eingegangen“ */ .frist-angaben { margin-bottom: 4px; } .wv-sammel { margin-top: 12px; } .wv-sammel label { font-size: var(--gr-tabelle); font-weight: 500; color: var(--tinte); } .wiedervorlage .abschnitt-kopf .knopf-link-leise, .karte .abschnitt-kopf .knopf-zweit { margin: 0; } /* Mails des Händlers, Vermerke, Sendungen (Etappe 7, Nutzer 22./23.10.2026): Ablagefläche und Knopf nebeneinander, je Mail eine Zeile mit aufklappbarem Text; Vorschläge als Fläche in der Informationsfarbe, Stand einer Sendung als Status */ .mail-ablage { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; margin: 0 0 16px; } /* Die Ablagefläche flach (Nutzer 26.10.2026, weniger blättern): Zeichen, Text, Hinweis und Dateiwahl in einer Zeile */ .mail-ablage .ablage { flex: 1 1 30rem; flex-direction: row; flex-wrap: wrap; justify-content: center; gap: 4px 12px; margin: 0; padding: 12px 16px; } .mail-ablage .ablage input[type=file] { width: auto; max-width: 100%; } /* schmal: nie über die Fläche hinaus */ .mail-ablage button { margin: 0; } .ablage > .zeichen { width: 20px; height: 20px; color: var(--akzent); } .mail-tabelle { table-layout: fixed; } .mail-tabelle col.sp-datum { width: 7.5rem; } .mail-tabelle col.sp-absender { width: 17rem; } .mail-tabelle col.sp-anhaenge { width: 17rem; } .mail-tabelle col.sp-aktion { width: 15rem; } .mail-tabelle td { overflow-wrap: anywhere; } .mail-text > summary { cursor: pointer; font-weight: 600; color: var(--tinte); } .mail-text > summary:hover { color: var(--akzent-tief); } .mail-text[open] > summary { margin-bottom: 6px; } .mail-inhalt { max-height: 28rem; overflow: auto; padding: 10px 12px; border-radius: var(--r-element); background: var(--flaeche-2); white-space: pre-wrap; overflow-wrap: anywhere; font-size: var(--gr-tabelle); line-height: 1.5; } .anhang-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; } .vorschlaege h3 { margin: 0 0 8px; } .vorschlag-liste { list-style: none; margin: 0 0 16px; padding: 0; display: grid; gap: 8px; } .vorschlag-zeile { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; padding: 10px 12px; border-radius: var(--r-element); background: var(--info-flaeche); box-shadow: inset 0 0 0 1px var(--info-rand); } .vorschlag-text { flex: 1 1 18rem; min-width: 0; display: grid; gap: 2px; overflow-wrap: anywhere; } .vorschlag-text > span:first-child { font-weight: 600; color: var(--tinte); } .vorschlag-knoepfe { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 0; } .vorschlag-knoepfe select { width: auto; min-width: 11rem; min-height: max(30px, var(--ziel-gross)); padding-block: 3px; font-size: var(--gr-tabelle); } .vorschlag-knoepfe button, .vorschlag-knoepfe .knopf-link-leise { margin: 0; } .vermerk-form { margin: 0 0 12px; } .vermerk-form textarea { margin: 6px 0 8px; } .vermerk-form button { margin: 0; } .vermerk-text { white-space: pre-wrap; overflow-wrap: anywhere; } /* Vermerk mit Probenbezug (Nutzer 28.10.2026): Auswahl der Probe unter dem Feld, Probennummer als kleines Etikett */ .vermerk-bezug { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; margin: 0 0 8px; } .vermerk-bezug select { width: auto; max-width: 100%; min-width: 16rem; } .marke-probe { display: inline-block; margin-left: 6px; padding: 0 6px; border-radius: var(--r-marke); background: var(--flaeche-3); color: var(--tinte-2); font-size: var(--gr-meta); font-weight: 500; line-height: 1.55; white-space: nowrap; } a.marke-probe { color: var(--akzent); text-decoration: none; } a.marke-probe:hover { background: var(--akzent-hell); color: var(--akzent-tief); } .marke-probe .kennung { font-size: var(--gr-meta); } .marke-probe.geloescht { color: var(--tinte-3); } .probe-vermerk { display: block; margin-top: 2px; font-size: var(--gr-meta); color: var(--tinte-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .probe-vermerke { margin-top: 0; } /* Eigenen Vermerk zurückziehen (Nutzer 28.10.2026): durchgestrichen und leiser, darunter Datum, Kürzel und Grund */ .vermerk-liste li.zurueckgezogen s.vermerk-text { color: var(--tinte-3); text-decoration-color: var(--tinte-3); } .vermerk-zurueck { display: block; margin-top: 2px; } .vermerk-zurueckziehen { margin-top: 4px; } .vermerk-zurueckziehen > summary { font-size: var(--gr-meta); color: var(--tinte-3); } /* Termine in Outlook ändern und absagen (Nutzer 28.10.2026): Verweise mit Kalenderzeichen in der Meldung */ .termin-hinweis a { display: inline-flex; align-items: center; gap: 4px; margin-left: 8px; font-weight: 600; } .termin-hinweis a .zeichen { width: 14px; height: 14px; } .sendung-tabelle .kennung { font: 500 var(--gr-tabelle)/1.3 var(--mono); white-space: nowrap; } .status.sendung-zugestellt { color: var(--ok); } .status.sendung-unterwegs { color: var(--st-offen); } .status.sendung-problem { color: var(--fehler); } .status.sendung-angekuendigt, .status.sendung-unbekannt { color: var(--tinte-2); } /* Lieferungen (Grill „Listenreste B“, Nutzer 28.10.2026, web/lieferungen.py): Reiter im Bereich Probenahme, darin Stand (Alle · Problem · Überfällig) und „alle / meine Vorgänge“ in einer Zeile; dringende Zeilen mit Strich am Rand. In der Zeile einer Probe der Stand ihrer Sendung unter dem Eingangsstempel. */ .status.sendung-ohne { color: var(--tinte-2); } .lieferungen-filter { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 8px 24px; margin-bottom: 12px; border-bottom: 1px solid var(--linie-2); } .lieferungen-filter .lieferungen-reiter { margin: 0; border-bottom: 0; } .lieferungen-wer { display: flex; gap: 4px 14px; padding-bottom: 10px; font-size: var(--gr-tabelle); } .lieferungen-wer a { color: var(--tinte-2); text-decoration: none; padding-bottom: 2px; border-bottom: 2px solid transparent; } .lieferungen-wer a:hover { color: var(--tinte); } .lieferungen-wer a[aria-current] { color: var(--tinte); font-weight: 600; border-bottom-color: var(--akzent); } .lieferungen-tabelle .kennung { font: 500 var(--gr-tabelle)/1.3 var(--mono); white-space: nowrap; } .lieferungen-tabelle th[scope="row"] a.kennung { color: var(--akzent); } .lieferungen-tabelle tr.achtung > th { box-shadow: inset 3px 0 0 var(--st-ueber); } .lieferungen-tabelle td.aktionen { white-space: nowrap; text-align: right; } .lieferungen-tabelle .stand { font-size: var(--gr-meta); } .probe-sendung { display: flex; margin-top: 6px; font-size: var(--gr-meta); text-decoration: none; } .probe-sendung:hover { text-decoration: underline; } /* --- Großansicht der Bilder (static/grossansicht.js, Nutzer 22.10.2026, Punkt 15) --------------------------------------- Über der ganzen Seite, dunkler Grund; Kopf mit „Bild 3 von 9 – …“ und Werkzeugen, darunter die Fläche. */ :root:has(dialog.grossansicht[open]) { overflow: hidden; } dialog.grossansicht { width: 100vw; height: 100vh; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; background: #0c1c1f; color: #fff; overscroll-behavior: contain; } dialog.grossansicht[open] { display: grid; grid-template-rows: auto minmax(0, 1fr); animation: ga-auf 180ms var(--ease); } dialog.grossansicht::backdrop { background: rgb(9 22 25 / .6); } @keyframes ga-auf { from { opacity: 0; transform: scale(.985); } to { opacity: 1; transform: none; } } .ga-kopf { display: flex; align-items: center; justify-content: space-between; gap: 8px 24px; padding: 10px 16px 10px 24px; background: rgb(0 0 0 / .35); } .ga-titel { margin: 0; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .ga-werkzeuge { display: flex; align-items: center; gap: 6px; flex: none; } .ga-knopf { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 36px; min-width: 36px; margin: 0; padding: 0 10px; border-radius: var(--r-element); background: rgb(255 255 255 / .1); border: 1px solid rgb(255 255 255 / .22); color: #fff; font: 500 var(--gr-tabelle)/1.2 var(--schrift); text-decoration: none; } .ga-knopf:hover { background: rgb(255 255 255 / .2); border-color: rgb(255 255 255 / .4); color: #fff; } .ga-knopf .zeichen { width: 16px; height: 16px; } .ga-knopf:disabled { opacity: .4; } dialog.grossansicht :focus-visible { outline: 2px solid #fff; outline-offset: 2px; } .ga-mass { min-width: 4.2em; text-align: center; font: 500 var(--gr-meta)/1 var(--mono); color: rgb(255 255 255 / .8); } .ga-buehne { position: relative; overflow: hidden; cursor: zoom-in; touch-action: none; user-select: none; } .ga-buehne.vergroessert { cursor: zoom-out; } .ga-buehne.verschiebbar { cursor: grab; } .ga-buehne.zieht { cursor: grabbing; } .ga-bild { position: absolute; left: 0; top: 0; max-width: none; transform-origin: 0 0; background: #fff; box-shadow: 0 8px 32px rgb(0 0 0 / .45); } .ga-bild.weich { transition: transform 200ms var(--ease); } .ga-bild.wartet { opacity: 0; } .ga-laden, .ga-meldung { position: absolute; inset: auto 0 50% 0; margin: 0; text-align: center; color: rgb(255 255 255 / .85); } .ga-meldung a { color: #fff; } .ga-blaettern { position: absolute; top: 50%; translate: 0 -50%; width: 48px; height: 64px; min-height: 0; margin: 0; padding: 0; background: rgb(0 0 0 / .45); border: 1px solid rgb(255 255 255 / .2); color: #fff; font-size: 1.375rem; } .ga-blaettern:hover { background: rgb(0 0 0 / .7); border-color: rgb(255 255 255 / .45); } .ga-zurueck { left: 16px; } .ga-weiter { right: 16px; } .ga-blaettern:active, .ga-knopf:active { transform: none; scale: .97; } .ga-blaettern:active { translate: 0 -50%; } /* --- „Aus Liste wählen …“ (Nutzer 22.10.2026, Punkt 19) ------------------------------------------------------------ Gewähltes Produkt, Grund, Erläuterung und Knopf in einer Leiste am unteren Fensterrand. Sticky statt fest: Am Ende der Liste liegt sie unter der letzten Zeile; das fokussierte Element hält die Seite darüber (static/alternative.js). */ .wahl-tabelle tbody tr:has(input[name=kandidat]) { cursor: pointer; } .wahl-tabelle tbody tr:has(input[name=kandidat]:checked) > td { background: var(--akzent-hell); } .wahl-tabelle td label { display: inline; margin: 0; font-size: inherit; font-weight: 500; color: var(--tinte); cursor: pointer; } .wahl-tabelle td input[type=radio] { margin-top: 2px; } .wahl-leiste { position: sticky; bottom: 0; z-index: 3; display: flex; flex-wrap: wrap; align-items: flex-end; gap: 8px 16px; margin-top: 12px; padding: 12px 0; background: var(--flaeche); border-top: 1px solid var(--linie-2); box-shadow: 0 -8px 10px -10px rgb(19 38 42 / .35); } .wahl-anzeige { flex: 1 1 18rem; min-width: 0; margin: 0; align-self: center; overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .wahl-leiste .feld { flex: 0 1 15rem; min-width: 12rem; } .wahl-leiste .feld-breit { flex: 1 1 18rem; } .wahl-leiste label { margin-top: 0; } .wahl-leiste button { margin: 0; } :root:has(.wahl-leiste) { scroll-padding-bottom: 7rem; } /* --- Fristen und Wiedervorlage --------------------------------------------------------------------------------------- Stand = Zeichen UND Wort in der Farbe des Stands (Farbe nie allein); ausgeblieben zusätzlich schraffiert im Zeitstrahl. */ .st-offen { --st-farbe: var(--st-offen); } .st-bald { --st-farbe: var(--st-bald); } .st-ueber { --st-farbe: var(--st-ueber); } .st-eingang { --st-farbe: var(--st-eingang); } .st-erledigt { --st-farbe: var(--st-erledigt); } .st-aus { --st-farbe: var(--st-aus); } .stand { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; font-size: var(--gr-tabelle); white-space: nowrap; color: var(--st-farbe); } /* Zeichen des Stands überall aus web/zeichen.py (Inline-SVG, Etappe 8, 23.10.2026): in Legende und Kalender in der Farbe des Stands, das Wort daneben bleibt dunkel */ .ev-punkt { display: inline-flex; flex: none; color: var(--st-farbe); } .ev-punkt .zeichen { width: 15px; height: 15px; } .ev-punkt.ev-bestellt { --st-farbe: var(--tinte-3); } .fristen-kopf { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; gap: 8px 16px; } .fristen-kopf h1 { margin-bottom: 4px; } .fristen-werkzeuge { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; } .frist-kacheln { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; margin-bottom: 24px; } .frist-kachel { display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: 12px; align-items: center; padding: 12px 16px; background: var(--flaeche); border-radius: var(--r-flaeche); box-shadow: var(--schatten), inset 0 3px 0 var(--st-farbe); color: var(--tinte); text-decoration: none; } .frist-kachel > .zeichen { grid-row: span 2; width: 28px; height: 28px; color: var(--st-farbe); stroke-width: 1.6; } .frist-kachel strong { font: 600 var(--gr-h1)/1.1 var(--titel); color: var(--st-farbe); } .frist-kachel > span:last-child { font-size: var(--gr-meta); color: var(--tinte-2); } .frist-kachel.null { box-shadow: var(--schatten); } .frist-kachel.null > .zeichen, .frist-kachel.null strong { color: var(--tinte-3); } a.frist-kachel:hover { color: var(--tinte); box-shadow: var(--schatten), inset 0 3px 0 var(--st-farbe), 0 0 0 1px var(--st-farbe); } .frist-gruppe { margin-bottom: 24px; } .frist-gruppe > h2 { margin-bottom: 2px; } .frist-gruppe > p { margin: 0 0 8px; } .frist-karte { background: var(--flaeche); border-radius: var(--r-flaeche); box-shadow: var(--schatten), inset 3px 0 0 var(--st-farbe); padding: 12px 16px; margin: 8px 0; overflow-x: auto; } .frist-karte-kopf { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 16px; align-items: flex-start; } .frist-karte-kopf h3 { margin: 0; } .frist-karte-kopf p { margin: 2px 0 0; } .frist-datum { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; } .proben-liste td { padding: 6px 8px; vertical-align: middle; } .stand-knoepfe { display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; } .stand-knoepfe form, .sammel { margin: 0; } .sammel { margin-top: 8px; text-align: right; } .datum-form { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0; } .datum-form label { margin: 0; } .wv-aktionen { margin-top: 8px; } .wv-aktionen > .datum-form { margin: 8px 0; } .verlauf { list-style: none; padding: 0; margin: 8px 0 0; } .verlauf li { padding: 6px 0; border-bottom: 1px solid var(--linie); font-size: var(--gr-tabelle); } .frist-bald { color: var(--fehler); } .legende { display: flex; flex-wrap: wrap; gap: 4px 16px; list-style: none; padding: 0; margin: 6px 0 14px; font-size: var(--gr-meta); color: var(--tinte-2); } .legende li { display: inline-flex; align-items: center; gap: 5px; } .lg-balken { display: inline-block; width: 22px; height: 9px; border-radius: 3px; background: var(--st-farbe); } .lg-balken.st-aus { background: repeating-linear-gradient(45deg, var(--st-aus) 0 2px, var(--flaeche) 2px 5px); box-shadow: inset 0 0 0 1px var(--st-aus); } .lg-heute { display: inline-block; width: 2px; height: 15px; background: var(--tinte); } /* Monatskalender */ .kalender-kopf { display: flex; align-items: center; gap: 12px; } .kalender-kopf h2 { margin: 0; min-width: 9rem; text-align: center; } .kalender { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 1px; background: var(--linie); border-radius: var(--r-flaeche); box-shadow: var(--schatten); overflow: hidden; } .kal-wt { background: var(--flaeche-2); padding: 4px 8px; font-size: var(--gr-meta); font-weight: 600; color: var(--tinte-2); } .kal-tag { background: var(--flaeche); min-height: 6.4rem; padding: 4px 6px 6px; display: flex; flex-direction: column; gap: 3px; min-width: 0; } .kal-tag.we { background: var(--kal-we); } .kal-tag.fremd { background: var(--kal-fremd); } .kal-tag.fremd .kal-nr, .kal-tag.fremd .ev { opacity: .55; } .kal-nr { font-size: 0; color: var(--tinte-3); } .kal-nr strong, .kal-nr em { font-size: var(--gr-meta); } .kal-tag.heute { box-shadow: inset 0 0 0 2px var(--akzent); } .kal-tag.heute .kal-nr strong { color: var(--auf-akzent); background: var(--akzent); border-radius: 999px; padding: 0 6px; } .kal-nr em { margin-left: 4px; font-style: normal; color: var(--akzent); font-weight: 600; } .ev { display: flex; align-items: flex-start; gap: 4px; padding: 2px 5px; border-radius: var(--r-marke); font-size: var(--gr-meta); line-height: 1.25; color: var(--tinte); text-decoration: none; background: var(--flaeche-2); box-shadow: inset 2px 0 0 var(--st-farbe); min-width: 0; } .ev:hover { background: var(--akzent-hell); color: var(--tinte); } .ev .ev-punkt { margin-top: 2px; } .ev .ev-punkt .zeichen { width: 12px; height: 12px; } .ev-text { overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; word-break: break-word; } /* Zeitstrahl und Monatsbalken (SVG – Farben nur hier, Positionen im Markup) */ .zs-kopf { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 8px 16px; } .zs-kopf p { margin: 0; } .zs-filter { display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: center; margin: 0; } .zs-filter .haken-inline { margin: 0; font-weight: 400; font-size: var(--gr-meta); } .zs-rahmen { overflow-x: auto; } .zeitstrahl { display: block; width: 100%; min-width: 760px; height: auto; font-family: inherit; } .monatsbalken { display: block; width: 100%; min-width: 520px; height: auto; font-family: inherit; } .zs-monat { stroke: var(--zs-linie); stroke-width: 1; } .zs-monat-text { font-size: var(--gr-mini); font-weight: 600; fill: var(--tinte-3); } .zs-raster { stroke: var(--zs-raster); stroke-width: 1; } .zs-achse { font-size: var(--gr-mini); fill: var(--tinte-3); font-variant-numeric: tabular-nums; } .zs-grundlinie { stroke: var(--zs-grundlinie); stroke-width: 1; } .zs-trenner { stroke: var(--linie); stroke-width: 1; } .zs-gruppe { font-size: var(--gr-meta); font-weight: 600; fill: var(--tinte); } .zs-gruppe-zusatz { font-size: var(--gr-mini); fill: var(--tinte-3); } .zs-trefferflaeche { fill: transparent; } .zs-zeile:hover .zs-trefferflaeche, .zs-zeile:focus-visible .zs-trefferflaeche { fill: var(--zs-treffer); } .zs-label { font-size: var(--gr-mini); fill: var(--tinte); font-family: var(--mono); } .zs-stand { font-size: var(--gr-mini); fill: var(--tinte-3); } .zs-balken { fill: var(--st-farbe); stroke: var(--flaeche); stroke-width: 2; paint-order: stroke; } .st-aus .zs-balken { stroke: var(--st-aus); stroke-width: 1; } .st-erledigt .zs-balken { fill: var(--zs-erledigt); } .zs-verlaengerung { stroke: var(--st-ueber); stroke-width: 1; } .zs-frist { stroke: var(--tinte); stroke-width: 2; stroke-linecap: round; } .zs-eingang { fill: var(--st-eingang); stroke: var(--flaeche); stroke-width: 2; } .st-erledigt .zs-eingang { fill: var(--zs-erledigt-eingang); } /* Zeichen in der Grafik (web/zeichen.zeichen_im_bild): Linien wie .zeichen, die Farbe je Ort */ .bild-zeichen { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; overflow: visible; pointer-events: none; } .zs-stand-zeichen { color: var(--st-farbe); } .zs-eingang-haken { color: var(--flaeche); stroke-width: 2.6; } .zs-kreuz { color: var(--st-aus); stroke-width: 2.4; } .zs-heute { stroke: var(--tinte); stroke-width: 1.5; stroke-dasharray: 4 3; } .zs-heute-marke { fill: var(--tinte); } .zs-heute-text { font-size: 10px; font-weight: 700; fill: var(--flaeche); } .mb-raster { stroke: var(--zs-raster); stroke-width: 1; } .mb-basis { stroke: var(--zs-linie); stroke-width: 1; } .mb-treffer { fill: transparent; } .mb-saeule:hover .mb-treffer { fill: var(--zs-treffer); } .mb-balken { fill: var(--akzent); } .mb-wert { font-size: var(--gr-mini); font-weight: 600; fill: var(--tinte); font-variant-numeric: tabular-nums; } /* --- Sammelkorb (Probe nehmen) --------------------------------------------------------------------------------------- */ .korb-schritte { margin: 0 0 16px; padding-left: 20px; display: grid; gap: 8px; } .korb-schritte li::marker { color: var(--tinte-3); font-weight: 600; } .korb-ablage { border: 2px dashed var(--linie-2); border-radius: var(--r-flaeche); padding: 14px 16px; background: var(--flaeche-2); } .korb-ablage.aktiv { border-color: var(--akzent); background: var(--akzent-hell); } .korb-ablage p { margin: 0 0 8px; } .korb-eingabe { display: flex; gap: 8px; align-items: center; } .korb-eingabe input[type=text] { flex: 1; min-width: 0; } .korb-eingabe .klein-knopf { flex: none; min-height: max(36px, var(--ziel-gross)); padding: 0 14px; } .korb-hinweis { margin: 8px 0 0; min-height: 1.2em; } .korb-hinweis .klein-knopf, #zwischenablage-stand .klein-knopf { margin-right: 6px; } .korb-kopf { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 4px 16px; margin-bottom: 12px; } .korb-meldung { margin: 0 0 8px; font-weight: 600; font-size: var(--gr-tabelle); } .korb-meldung > .zeichen { margin-right: 6px; } /* Zeichen nach der Art (Etappe 8) */ .korb-meldung.erfolg { color: var(--ok); } .korb-meldung.fehler { color: var(--fehler); } .korb-meldung.hinweis { color: var(--warn); } .korb-rueckfrage { margin: 0 0 12px; } .korb-rueckfrage .korb-meldung { margin-bottom: 4px; } .korb-rueckfrage-liste { margin: 4px 0; padding-left: 18px; } .korb-tabelle td { vertical-align: top; } .korb-produkt { max-width: 34rem; } .korb-titel { display: block; font-weight: 600; } .korb-titel.leise { color: var(--tinte-3); font-weight: 400; font-style: italic; font-size: var(--gr-tabelle); } .korb-url { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 34rem; font-size: var(--gr-meta); } .korb-nummer { min-width: 13rem; } .korb-variante { min-width: 11rem; } .korb-menge input { width: 4.5rem; } .korb-nummer .nummer-feld { font-family: var(--mono); } .nr-stand, .menge-stand { display: block; min-height: 1.2em; margin-top: 3px; font-size: var(--gr-meta); } .menge-stand { white-space: nowrap; } .nr-mangel { display: inline-flex; align-items: center; gap: 4px; color: var(--fehler); } .korb-entfernen { min-height: max(30px, var(--ziel-gross)); padding: 0 10px; } .korb-fuss { margin-top: 14px; display: grid; gap: 10px; justify-items: start; } .korb-starten { min-height: max(40px, var(--ziel-gross)); padding-inline: 24px; margin: 0; max-width: 22rem; } .korb-leer { color: var(--tinte-3); margin: 4px 0 0; } .korb-verwerfen { margin-top: 8px; text-align: right; } .korb-offen { margin: 0; padding-left: 18px; } /* Auswahl „frei geworden“ unter den Nummernfeldern (Nummernpool, Nutzer 28.10.2026; static/nummernpool.js): ein Textknopf unter dem Feld, darunter klappt die Liste als weiße Fläche über dem Inhalt auf – je Nummer die Angaben leise darunter. Ohne Skript steht die Liste eingeklappt am Ende der Seite. */ .nummernpool-anker { position: relative; display: block; } button.nummernpool-knopf { margin-top: 3px; font-size: var(--gr-meta); } .nummernpool-anker > .nummernpool { position: absolute; left: 0; top: calc(100% + 4px); z-index: 30; width: max-content; min-width: 18rem; max-width: 34rem; max-height: 20rem; overflow: auto; padding: 6px; background: var(--flaeche); border-radius: var(--r-flaeche); box-shadow: var(--schatten-hoch); } .nummernpool-titel { margin: 2px 8px 6px; font-size: var(--gr-mini); font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--tinte-3); } .nummernpool-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; } button.nummernpool-wahl { display: grid; justify-items: start; gap: 2px; width: 100%; margin: 0; padding: 6px 8px; min-height: 0; border: 0; border-radius: var(--r-element); background: none; color: var(--tinte); font: 400 var(--gr-tabelle)/1.3 var(--schrift); text-align: left; white-space: normal; } button.nummernpool-wahl:hover, button.nummernpool-wahl:focus-visible { background: var(--akzent-hell); color: var(--tinte); border: 0; outline: none; box-shadow: inset 0 0 0 2px var(--akzent); } .nummernpool-wahl .kennung { font: 600 var(--gr-tabelle)/1.3 var(--mono); } .nummernpool-angaben { font-size: var(--gr-meta); color: var(--tinte-2); } .nummernpool-ablage { margin-top: 12px; } .nr-frei { display: block; color: var(--tinte-2); } /* Probennummer vergessen (Nutzer 22.10.2026, Punkt 2): Die Nummernzelle ist eine eigene, hell hinterlegte Fläche. Fehlt beim Start die Nummer, blinkt sie zweimal deutlich rot (eine Ebene hinter dem Feld, nur ihre Deckkraft ändert sich) und darunter steht groß „Bitte Probennummer eintragen“; bei reduzierter Bewegung bleibt sie rot, bis eine Nummer drinsteht. Dasselbe um das Textfeld auf „Neue Probenahme“ (.nummer-flaeche). */ /* Farben: --nummer-flaeche, --fehler-blinken und --fehler-ruhig bei den Variablen vorn (kleine Schrift ≥ 4,5 : 1) */ .korb-tabelle td.korb-nummer { background: var(--nummer-flaeche); } .korb-tabelle td.korb-nummer, .nummer-flaeche { position: relative; z-index: 0; } .korb-tabelle td.korb-nummer::before, .nummer-flaeche::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--fehler-blinken); opacity: 0; pointer-events: none; } .korb-tabelle td.korb-nummer.nummer-fehlt::before, .nummer-flaeche.nummer-fehlt::before { animation: nummer-blinken 1.2s ease-out both; } @keyframes nummer-blinken { 0%, 50%, 100% { opacity: 0; } 15%, 35%, 65%, 85% { opacity: 1; } } .nummer-flaeche { margin: 0 -8px; padding: 8px; border-radius: var(--r-element); } .nummer-flaeche textarea { display: block; } .nummer-feld[aria-invalid="true"], .nummer-flaeche textarea[aria-invalid="true"] { border-color: var(--fehler); box-shadow: inset 0 0 0 1px var(--fehler); } .nr-fehlt { display: block; color: var(--fehler); font-size: var(--gr-h3); font-weight: 600; line-height: 1.3; } .nr-fehlt:not(:empty) { margin-top: 6px; } .korb-nummer .nr-fehlt { width: 0; min-width: 100%; } /* bricht in der Spalte um, statt sie zu verbreitern */ .nr-fehlt-zeilen { font-size: var(--gr-tabelle); font-weight: 600; } button.unsichtbar { margin: 0; padding: 0; border: 0; min-height: 0; } .bezirk-hinweis { margin: 0 0 16px; padding: 10px 14px; border-radius: var(--r-element); background: var(--info-flaeche); box-shadow: inset 0 0 0 1px var(--info-rand); } /* --- Rückwärts-Probensuche im Reiter Probenahme (Nutzer 14.10.2026) ------------------------------------------------- Suchzeile mit „Liste hochladen“ daneben; die Dateiauswahl selbst ist unsichtbar, der Knopf ist ihre Beschriftung. */ .probensuche .suchzeile { margin-bottom: 6px; } .probensuche label.probenliste-knopf { align-self: flex-end; margin: 0; cursor: pointer; } .probensuche label.probenliste-knopf[aria-disabled="true"] { cursor: progress; opacity: .7; } /* Befund 27 */ .probensuche-aeltere { margin: 4px 0 0; } .probensuche-aeltere > summary { cursor: pointer; } .probenliste-form { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } .probensuche-tabelle tr.anforderung th { text-align: left; padding-top: 16px; } .probensuche-tabelle details.weitere > table { margin: 0; } /* Ruhiges Zeilenbild (Nutzer 15.10.2026): feste Spalten, jede Angebotszeile gleich hoch, der Knopf bricht nie um */ .probensuche-tabelle { table-layout: fixed; } .probensuche-tabelle col.sp-produkt { width: 42%; } .probensuche-tabelle col.sp-shop { width: 30%; } .probensuche-tabelle col.sp-ort { width: 16%; } .probensuche-tabelle col.sp-aktion { width: 12%; } .probensuche-tabelle tr.angebot > td { height: 4rem; } .probensuche-tabelle .zwei-zeilen { display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .probensuche-tabelle .eine-zeile { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .probensuche-tabelle .klein-knopf { white-space: nowrap; } .probensuche-tabelle td.weitere-zelle { padding: 0; } .probensuche-tabelle .weitere { margin: 0; font-size: inherit; color: inherit; } .probensuche-tabelle .weitere > summary { padding: 8px; font-size: var(--gr-meta); color: var(--tinte-3); } .probensuche-tabelle .weitere > table tr:last-child > td { border-bottom: 0; } .probensuche-listen { margin: 12px 0 0; } /* Stufe C (Nutzer 17.10.2026): die Stufe als Text unter dem Produkt; alle Zeilen einer geprüften Anforderung gleich hoch */ .probensuche-tabelle tr.angebot.mit-befund > td { height: 5.2rem; } .probensuche-tabelle .befund { margin-top: 2px; } .probensuche-tabelle tr.anforderung .pruefen-form { margin-left: 6px; } /* Dasselbe Produkt in mehreren Shops ist eine Zeile (Nutzer 17.10.2026), aufgeklappt je Shop eine Zeile */ .probensuche-tabelle td.gruppe-zelle { padding: 0; } .probensuche-tabelle details.gruppe > summary { display: grid; grid-template-columns: 42% 58%; align-items: center; min-height: 4rem; cursor: pointer; list-style: none; } .probensuche-tabelle details.gruppe > summary::-webkit-details-marker { display: none; } .probensuche-tabelle details.gruppe > summary > span { padding: 8px; min-width: 0; } .probensuche-tabelle tr.angebot.gruppe.mit-befund details.gruppe > summary { min-height: 5.2rem; } .probensuche-tabelle .gruppe-shops { display: inline-flex; align-items: center; gap: 4px; } .probensuche-tabelle .gruppe-shops::before { content: ""; width: 12px; height: 12px; flex: none; background: var(--tinte-3); transition: transform 150ms var(--ease); -webkit-mask: var(--ic-pfeil) center / contain no-repeat; mask: var(--ic-pfeil) center / contain no-repeat; } .probensuche-tabelle details.gruppe[open] .gruppe-shops::before { transform: rotate(90deg); } .probensuche-tabelle details.gruppe > table { margin: 0; } .probensuche-tabelle details.gruppe > table tr:last-child > td { border-bottom: 0; } .probensuche-tabelle details.groessen { margin: 2px 0 0; } .probensuche-tabelle details.groessen > summary { font-size: var(--gr-meta); color: var(--tinte-3); cursor: pointer; } .probensuche-tabelle details.groessen .groesse { display: flex; align-items: center; gap: 8px; margin-top: 4px; } .probensuche-tabelle details.groessen .groesse > a { flex: 1; min-width: 0; } /* --- Reiter Akten (Nutzer 22.10.2026, Punkt 24) ------------------------------------------------------------------------ Oben „Zuletzt geöffnet“ als Kacheln wie auf der Startseite, darunter die Liste in Spalten mit Filtern wie im Katalog. Farbe nur für Stände: Punkt und Wort in der Farbe des Stands, die offene Frist als Eingangsstempel. */ .akten-zuletzt { margin: 0 0 24px; } .akten-zuletzt > h2 { margin-bottom: 12px; } .akten-karten { display: grid; grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr)); gap: 12px; margin: 0; padding: 0; list-style: none; } .akte-karte { display: grid; grid-template-columns: minmax(0, 1fr); align-content: start; gap: 2px; height: 100%; padding: 12px 16px; background: var(--flaeche); border-radius: var(--r-flaeche); box-shadow: var(--schatten); color: var(--tinte); text-decoration: none; } /* minmax(0, …): lange Namen enden mit „…“ */ a.akte-karte:hover { color: var(--tinte); text-decoration: none; box-shadow: var(--schatten), 0 0 0 1px var(--akzent); } .akte-karte-name { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .akte-karte-ort { font-size: var(--gr-meta); color: var(--tinte-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .akte-karte .status-marke, .akte-karte-ruhe { margin-top: 6px; font-size: var(--gr-meta); } .akte-karte-ruhe { color: var(--tinte-3); } .akte-karte-mehr { color: var(--tinte-3); font-weight: 500; } .status-marke.akten-stand { color: var(--st-farbe); } .karte.filter > .akten-alle { grid-column: 1; grid-row: 2; align-self: center; margin-top: 8px; width: fit-content; } #akten-liste { padding: 0; overflow: visible; } #akten-liste > p:not(.trefferzahl), #akten-liste > .seiten { margin: 12px 20px; } #akten-liste > p.gebiet-hinweis { margin: -4px 20px 12px; } /* gehört zur Zahl darüber */ #akten-liste.htmx-request { opacity: .55; transition: opacity 150ms; } .akten-tabelle .sp-betrieb { width: 25%; } .akten-tabelle .sp-ort { width: 17%; } .akten-tabelle .sp-bezirk { width: 12%; } .akten-tabelle .sp-stand { width: 18%; } .akten-tabelle .sp-frist { width: 15%; } .akten-tabelle .sp-zuletzt { width: 13%; } .akten-tabelle th:first-child { padding-left: 20px; } .akten-tabelle tbody th { font-weight: 400; } .akte-betrieb a { font-weight: 600; color: var(--tinte); text-decoration: none; } .akte-betrieb a:hover { color: var(--akzent); text-decoration: underline; } .akte-web { display: block; margin-top: 2px; font-size: var(--gr-meta); color: var(--tinte-3); } .akte-bezirk-name { display: block; font-size: var(--gr-meta); color: var(--tinte-3); } .akten-tabelle td > .status-marke { display: flex; } .akten-tabelle td > .status-marke + .status-marke { margin-top: 2px; } /* --- Akte: Dokumente und Ablage ---------------------------------------------------------------------------------------- */ .dokumente details.fassung { display: inline-block; } .dokumente details.fassung > summary { list-style: none; } .dokumente details.fassung > summary::-webkit-details-marker { display: none; } .dokumente details.fassung form { display: flex; gap: 6px; margin-top: 4px; } .ablage { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 18px; margin: 8px 0; border: 2px dashed var(--linie-2); border-radius: var(--r-flaeche); background: var(--flaeche-2); cursor: pointer; text-align: center; font-weight: 400; font-size: var(--gr-text); color: var(--tinte); } .ablage.ueber { border-color: var(--akzent); background: var(--akzent-hell); } .ablage input[type=file] { max-width: 100%; border: 0; } .ablage .gewaehlt { color: var(--tinte); } .hochladen .zeile { display: flex; flex-wrap: wrap; gap: 0 16px; } .hochladen .zeile label { flex: 1 1 14rem; } /* Bemerkungen (Grill 09.10.2026) und Benachrichtigungen (Nutzer 22.10.2026, Punkt 9) */ .bemerkung-form { margin-bottom: 16px; } .bemerkung-form textarea { margin-top: 6px; } .bemerkung-an summary { cursor: pointer; font-size: var(--gr-tabelle); } .bemerkung-an-liste { display: grid; grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr)); gap: 2px 12px; margin: 6px 0; padding: 6px 0; border-top: 1px solid var(--linie); border-bottom: 1px solid var(--linie); } .bemerkung-an-liste label { display: flex; align-items: center; gap: 6px; font-weight: 400; margin: 0; color: var(--tinte); } .bemerkung-knopfzeile { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; margin: 6px 0 0; } .bemerkung-knopfzeile button { margin: 0; } .bemerkung { border-top: 1px solid var(--linie); padding: 8px 0; } .bemerkung p { margin: 0 0 2px; } .bemerkung-text { white-space: pre-wrap; overflow-wrap: anywhere; } .erwaehnen-liste { list-style: none; margin: 2px 0 0; padding: 4px; border-radius: var(--r-element); max-width: 22rem; background: var(--flaeche); box-shadow: var(--schatten-hoch); } .erwaehnen-liste button { display: block; width: 100%; min-height: 0; margin: 0; padding: 6px 8px; border: 0; border-radius: var(--r-marke); text-align: left; background: none; color: var(--tinte); font-weight: 400; } .erwaehnen-liste button:hover, .erwaehnen-liste button:focus-visible { background: var(--akzent-hell); color: var(--tinte); } .benachrichtigungen-liste .sp-zeit { width: 10.5rem; } .benachrichtigungen-liste .sp-art { width: 10.5rem; } /* „Erinnerung an Händler“ auf einer Zeile */ .benachrichtigungen-liste .sp-von { width: 14rem; } .benachrichtigungen-liste td { overflow-wrap: anywhere; } .benachrichtigungen-liste tr.ungelesen td { font-weight: 600; } .marke-neu { display: inline-block; margin-left: 6px; padding: 0 6px; border-radius: var(--r-marke); background: var(--akzent-hell); color: var(--akzent-tief); font-size: var(--gr-meta); font-weight: 600; line-height: 1.55; vertical-align: 1px; } /* --- Vorlagen-Editor und PDF-Formulare (01.10.2026) ---------------------------------------------------------------- */ .anleitung { background: var(--akzent-hell); border-radius: var(--r-flaeche); padding: 10px 16px; } .vorlagen-editor { display: grid; grid-template-columns: minmax(14rem, 18rem) 1fr; gap: 20px; align-items: start; margin-bottom: 20px; } .bausteinleiste { position: sticky; top: calc(var(--kopf-hoehe) + 12px); background: var(--flaeche); border-radius: var(--r-flaeche); box-shadow: var(--schatten); padding: 10px 12px; max-height: calc(100vh - var(--kopf-hoehe) - 24px); overflow-y: auto; } .bausteinleiste h3 { font-size: var(--gr-meta); margin: 12px 0 4px; color: var(--tinte-3); } .bausteinleiste .bausteine { display: flex; flex-wrap: wrap; gap: 6px; } /* Bausteine und Platzhalter sind Marken (4 px Ecken, DESIGN.md: Pillen nur für Zahlen) */ .baustein { display: inline-block; width: auto; min-height: 0; margin: 0; padding: 3px 9px; border-radius: var(--r-marke); font-size: var(--gr-meta); font-weight: 600; background: var(--info-flaeche); color: var(--akzent-tief); border: 1px solid var(--info-rand); cursor: grab; user-select: none; } .baustein:hover { background: var(--akzent-hell); color: var(--akzent-tief); border-color: var(--akzent); } .baustein[data-platzhalter] { cursor: pointer; } .baustein:active { cursor: grabbing; } .bausteinleiste .baustein.gewaehlt { outline: 3px solid var(--akzent); outline-offset: 1px; } .vorlage-seite .baustein.gesetzt { cursor: pointer; font-size: .9em; padding: 1px 7px; background: #fff3c4; color: #6b4b00; border-color: #e6c35c; } .vorlage-seite .baustein.gesetzt:hover { background: var(--fehler-flaeche); color: var(--fehler); border-color: var(--fehler); text-decoration: line-through; } .vorlage-hinweis { padding: 8px 12px; border-radius: var(--r-flaeche); background: var(--flaeche-3); margin-bottom: 10px; font-size: var(--gr-tabelle); } .vorlage-hinweis.bereit { background: var(--akzent-hell); } .vorlage-hinweis.erfolg { background: var(--ok-flaeche); } .vorlage-hinweis.fehler { background: var(--fehler-flaeche); color: var(--fehler); } .vorlage-seite { background: var(--blatt); color: var(--blatt-tinte); border-radius: var(--r-marke); box-shadow: 0 1px 6px rgb(0 0 0 / .08), 0 0 0 1px var(--linie); padding: 32px 40px; font-family: Calibri, Arial, sans-serif; line-height: 1.45; } .vorlage-teil { border-top: 1px dashed var(--linie-2); padding-top: 6px; margin-top: 10px; } .vorlage-teil:first-child { border-top: 0; margin-top: 0; } .vorlage-teil h4 { font-size: var(--gr-mini); text-transform: uppercase; letter-spacing: .05em; color: var(--tinte-3); margin: 0 0 4px; } .vorlage-seite p { margin: 0 0 6px; min-height: 1.2em; border-radius: 3px; } .vorlage-seite p.leer { min-height: 1.4em; background: repeating-linear-gradient(90deg, transparent 0 6px, #f1f4f8 6px 7px); } .vorlage-seite p.ziel { outline: 2px dashed var(--akzent); outline-offset: 2px; background: var(--akzent-hell); } .vorlage-seite p.mitte { text-align: center; } .vorlage-seite p.rechts { text-align: right; } .vorlage-seite p.block { text-align: justify; } .vorlage-seite p.ueberschrift { font-weight: 700; font-size: 1.1em; } .vorlage-seite .tab, .vorlage-seite .umbruch { white-space: pre; } .vorlage-tabelle { border-collapse: collapse; margin: 4px 0 10px; } .vorlage-tabelle td { border: 1px solid #e3e7ec; padding: 3px 8px; vertical-align: top; } /* Text einer Word-Vorlage bearbeiten (Nutzer 22.10.2026, Punkt 11): ein Feld je Absatz, so breit wie die Seite */ .vorlage-text-seite .absatz-feld { display: block; width: 100%; min-height: 0; margin: 0 0 6px; padding: 3px 6px; resize: vertical; field-sizing: content; font: inherit; line-height: 1.45; border: 1px dashed var(--linie-2); border-radius: var(--r-marke); background: var(--blatt); color: var(--blatt-tinte); } .vorlage-text-seite .absatz-feld:hover { border-color: var(--feldrand); } .vorlage-text-seite .absatz-feld:focus-visible { border-style: solid; border-color: var(--akzent); } .vorlage-text-seite .absatz-feld.ueberschrift { font-weight: 700; font-size: 1.1em; } .vorlage-text-seite .absatz-feld.mitte { text-align: center; } .vorlage-text-seite .absatz-feld.rechts { text-align: right; } .vorlage-text-seite .absatz-fest { margin: 0 0 6px; padding: 3px 6px; border-radius: var(--r-marke); background: var(--flaeche-3); color: var(--tinte-2); white-space: pre-wrap; min-height: 1.6em; } .vorlage-text-seite .vorlage-tabelle { width: 100%; } .vorlage-text-knoepfe { display: flex; align-items: center; gap: 16px; margin-top: 16px; } .vorlage-aktionen .zeile-knoepfe { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; } .vorlage-aktionen .zeile-knoepfe button { margin: 0; } .kontextwahl { display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: flex-end; margin-bottom: 16px; } .kontextwahl label { flex: 1 1 14rem; } .werte td:first-child { width: 34%; } .werte tr.fehlt td { background: var(--warn-flaeche); } .werte textarea, .werte input { margin: 0; } /* Texte des Programms (Nutzer 22.10.2026, Punkt 11): links der Text, rechts Platzhalter und Vorschau – nebeneinander, solange beide Platz haben */ .textvorlage { display: grid; grid-template-columns: minmax(0, 3fr) minmax(22rem, 2fr); gap: 20px; align-items: start; } .textvorlage > .karte, .textvorlage-seite > .karte { margin-bottom: 20px; } .textvorlage-teil + .textvorlage-teil { margin-top: 16px; } .textvorlage-teil label { display: block; } .textvorlage-teil textarea, .textvorlage-teil input { width: 100%; } .textvorlage-teil textarea { font: 400 var(--gr-tabelle)/1.55 var(--schrift); } .textvorlage-teil p.klein { margin: 4px 0 0; } .textvorlage-seite h3 { font-size: var(--gr-meta); margin: 12px 0 4px; color: var(--tinte-3); } .textvorlage-seite .bausteine { display: flex; flex-wrap: wrap; gap: 6px; } .textvorlage-vorschau { margin-top: 8px; } .textvorlage-vorschau h3 { margin-top: 12px; } .vorschau-titel { margin: 12px 0 4px; font-size: var(--gr-meta); font-weight: 600; color: var(--tinte-2); } .vorschau-text { white-space: pre-wrap; overflow-wrap: anywhere; font: 400 var(--gr-tabelle)/1.55 var(--schrift); background: var(--flaeche-2); border-radius: var(--r-element); padding: 10px 14px; max-height: 60vh; overflow-y: auto; } .textvorlagen-liste td:first-child { white-space: nowrap; } @media (max-width: 1100px) { .textvorlage { grid-template-columns: minmax(0, 1fr); } } .pdf-seite { position: relative; margin: 0 0 16px; border: 1px solid var(--linie-2); background: var(--blatt); cursor: crosshair; } .pdf-seite img { display: block; width: 100%; height: auto; user-select: none; } .pdf-seite .stempel { position: absolute; transform: translateY(-15%); white-space: nowrap; font-size: var(--gr-meta); cursor: pointer; } /* Stelle mit der Tastatur wählen (static/vorlage_pdf.js, Barrierefreiheit 30.10.2026): ein Kreis in Aktenpetrol */ .pdf-seite:focus-visible { outline: var(--fokus-breite) solid var(--fokus-farbe); outline-offset: 2px; } .pdf-marke { position: absolute; width: 20px; height: 20px; margin: -10px 0 0 -10px; border: 2px solid var(--akzent); border-radius: 50%; box-shadow: 0 0 0 2px var(--blatt); pointer-events: none; } /* --- Rechte, Verwaltung, Gebiet --------------------------------------------------------------------------------------- */ .rechte-tabelle .haken-zelle { text-align: center; } .rechte-tabelle input[type=checkbox] { width: 18px; height: 18px; } .gebiet-zeile { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; } .gebiet-zeile label { margin: 0; display: flex; gap: 6px; align-items: center; } .gebiet-zeile select, .gebiet-zeile input { width: auto; margin: 0; } .gebiet-zeile select[name=ortsteil_id] { width: 15rem; max-width: 100%; } /* Prüfung 15.10.2026, Punkt 73 */ .gebiet-zeile button { margin: 0; } .gebiet-zeile details { display: inline-block; } .gebiet-zeile details label { display: inline-flex; margin-right: 6px; } /* „Hausnummer von … bis …“ in einer Zeile */ .ortsteil-liste { margin: 4px 0 10px; padding-left: 18px; } .ortsteil-liste li { padding: 2px 0; } .ortsteil-gruppe { margin: 8px 0 0; } .nebenformular { margin-top: 12px; } /* Straßen eines Bezirks hausnummerngenau (Nutzer 22.10.2026, Punkt 10): je Straße eine Zeile PLZ | Straße | von | bis | Seite – so breit, wie ein Straßenname braucht, nicht die ganze Karte */ .strassen-zeilen { margin-top: 20px; } .strassen-zeilen > legend { font-size: var(--gr-h3); color: var(--tinte); } .strassen-zeilen > p { margin: 4px 0 8px; } .strassen-tabelle { max-width: 64rem; table-layout: fixed; } .strassen-tabelle td { padding: 4px 8px 4px 0; border-bottom: 0; vertical-align: middle; } .strassen-tabelle thead th { padding: 6px 8px 6px 0; background: none; } .strassen-tabelle .sp-plz { width: 7rem; } .strassen-tabelle .sp-nummer { width: 6rem; } .strassen-tabelle .sp-seite { width: 8.5rem; } .strassen-tabelle .sp-weg { width: 7rem; } .strassen-tabelle td.aktionen { text-align: left; } .strassen-tabelle td.aktionen > * { margin: 0; } .strassen-dazu { margin-top: 8px; } /* Straßenliste als Datei: Herunterladen, Datei wählen, Vorschau – nebeneinander */ .liste-werkzeuge { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; margin-top: 12px; } .liste-werkzeuge form { margin: 0; } .liste-werkzeuge form button { margin: 0; } .liste-vorschau { max-width: 72rem; } .liste-aenderungen h3 { margin-top: 16px; } /* Gebietswahl in der Kopfleiste (07.10.2026): Baum mit Suche, Knöpfe unten fest */ .gw-form { margin: 0; } .gw-suche { width: 100%; margin: 0 0 8px; } .gw-schnell { display: flex; flex-wrap: wrap; gap: 4px 16px; padding-bottom: 6px; margin-bottom: 6px; border-bottom: 1px solid var(--linie); } .gw-baum, .gw-baum ul { list-style: none; margin: 0; padding: 0; } .gw-baum ul { padding-left: 20px; } .gw-baum li { padding: 1px 0; } .gw-baum summary { cursor: pointer; } .gw-zeile { display: inline-flex; align-items: center; gap: 6px; margin: 0; font-weight: 400; font-size: var(--gr-tabelle); color: var(--tinte); cursor: pointer; } .gw-zahl, .gw-plz { font-size: var(--gr-meta); color: var(--tinte-3); } .gw-plz { margin-left: 4px; } .gw-zahl::before { content: "· "; } .gw-offen em { color: var(--tinte-3); } .gw-besonders { border-top: 1px solid var(--linie); margin-top: 6px; padding-top: 4px !important; } .gw-besonders + .gw-besonders { border-top: 0; margin-top: 0; padding-top: 1px !important; } .gw-knoepfe { display: flex; gap: 10px; justify-content: flex-end; margin-top: 10px; position: sticky; bottom: -12px; background: var(--flaeche); padding: 8px 0; } .gw-knoepfe button { margin: 0; } .gw-knoepfe .zweitrangig { background: var(--flaeche); color: var(--akzent); } .gw-knoepfe .zweitrangig:hover { background: var(--akzent-hell); color: var(--akzent-tief); } .gw-seite .gebietswahl-feld { position: static; box-shadow: var(--schatten); } .gw-titel { font-size: var(--gr-h3); margin: 20px 0 4px; } #formular .gw-baum-rahmen { border: 1px solid var(--linie-2); border-radius: var(--r-flaeche); padding: 10px 12px; max-height: 26rem; overflow: auto; } /* --- Probeneingang am Handy (Etappe 9, Nutzer 22./24.10.2026) -------------------------------------------------------- Verwaltung → Geräte: der Kopplungscode groß zum Abtippen (wie eine Probennummer in Plex Mono); „Nicht zugeordnet“ mit den Fotos des Pakets als Vorschaubild 96 × 72 (Großansicht) und „Zuordnen …“ mit den offenen Proben. */ dl.kopplung-angaben { display: flex; flex-wrap: wrap; gap: 12px 40px; margin: 12px 0 16px; } dl.kopplung-angaben dt { font-size: var(--gr-meta); color: var(--tinte-3); } dl.kopplung-angaben dd { margin: 2px 0 0; } .kopplung-code { font: 500 var(--gr-h1)/1.15 var(--mono); letter-spacing: .08em; color: var(--tinte); white-space: nowrap; } .kopplung-wert { font: 500 var(--gr-h2)/1.3 var(--mono); color: var(--tinte); } /* App aufs Diensthandy (29.10.2026): QR-Code links, die drei Schritte daneben; für die IT Prüfsummen in Plex Mono */ .app-qr { display: flex; flex-wrap: wrap; gap: 16px 24px; align-items: flex-start; } .app-qr-bild svg { display: block; width: 200px; height: auto; border: 1px solid var(--linie-2); border-radius: 5px; } .app-schritte { margin: 0 0 8px; padding-left: 1.4em; display: grid; gap: 6px; max-width: 34rem; } dl.it-angaben { gap: 8px 32px; } .it-wert { font: 400 var(--gr-meta)/1.4 var(--mono); overflow-wrap: anywhere; } .geraete-tabelle td { vertical-align: middle; } .pakete-tabelle td { vertical-align: middle; } .paket-fotos { white-space: nowrap; } .paket-fotos a, .zuordnen-tabelle .sp-bild img { display: inline-block; margin: 2px 6px 2px 0; border-radius: 5px; cursor: zoom-in; } .paket-fotos img, .zuordnen-tabelle .sp-bild img { display: block; width: 96px; height: 72px; object-fit: contain; background: var(--flaeche-2); border-radius: 5px; outline: 1px solid rgb(0 0 0 / .08); outline-offset: -1px; } .zuordnen-tabelle .sp-bild img { cursor: auto; } .paket-fotos a:hover img { outline-color: var(--akzent); } .pakete-tabelle details.verwerfen { text-align: left; white-space: normal; } .pakete-tabelle details.verwerfen form { display: grid; gap: 6px; min-width: 18rem; margin-top: 6px; } .pakete-tabelle details.verwerfen button { justify-self: start; margin: 0; } .bildleiste.paket-bilder figure { width: 12.5rem; } .bildleiste.paket-bilder img { max-height: 12.5rem; } .marke-passend { display: inline-flex; align-items: center; gap: 4px; margin-top: 4px; font-size: var(--gr-meta); font-weight: 600; color: var(--ok); } .zuordnen-tabelle td, .zuordnen-tabelle th { vertical-align: middle; } /* --- Online-Kontrolle (03.10.2026) ------------------------------------------------------------------------------------ Eine Liste: Feststellung = Kopf mit ausgeschriebener Stufe, Bezug, Text, Bildbeleg, ein Klick zum Bestätigen. */ .feststellung { background: var(--flaeche); border-radius: var(--r-flaeche); box-shadow: var(--schatten), inset 3px 0 0 var(--tinte-3); padding: 12px 16px; margin: 12px 0; } .feststellung.stufe-A { box-shadow: var(--schatten), inset 3px 0 0 var(--fehler); } .feststellung.stufe-B { box-shadow: var(--schatten), inset 3px 0 0 var(--stufe-b); } .feststellung.stufe-C { box-shadow: var(--schatten), inset 3px 0 0 var(--akzent); } .feststellung.durchsicht-verworfen { opacity: .65; } .feststellung.durchsicht-bestaetigt { background: var(--bestaetigt-flaeche); } .feststellung h3 { margin: 0; font-size: var(--gr-h3); } .feststellung .durchsicht { margin-top: 8px; } .feststellung .durchsicht form { margin-top: 10px; } .kontrolle-ueberblick .stufen-zeile { margin-bottom: 6px; } .offen-zahl { margin-left: 6px; color: var(--fehler); font-weight: 600; } h2.abschnitt { margin: 24px 0 6px; } h2.inline { display: inline; } .fs-kopf { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; } .fs-kopf h3 { flex: 1 1 14rem; margin: 0; font-size: var(--gr-h3); } .fs-status { font-size: var(--gr-meta); color: var(--tinte-3); } .fs-status.fs-offen { color: var(--fehler); font-weight: 600; } .fs-status.fs-bestaetigt { color: var(--ok); font-weight: 600; } .fs-bezug { margin: 4px 0 6px; font-size: var(--gr-tabelle); color: var(--tinte-3); } .fs-text { margin: 4px 0 8px; line-height: 1.5; } .fs-belege { display: flex; flex-wrap: wrap; gap: 10px; margin: 8px 0; } .fs-belege a { display: flex; flex-direction: column; gap: 4px; max-width: 22rem; text-decoration: none; border-radius: var(--r-element); padding: 4px; background: var(--flaeche); box-shadow: var(--schatten); } .fs-belege img { display: block; max-width: 100%; max-height: 13rem; object-fit: contain; object-position: left top; } .fs-belege span { font-size: var(--gr-meta); color: var(--tinte-3); } /* Markierte Ausschnitte über die volle Breite – sonst ist die markierte Stelle zu klein zum Lesen */ .fs-belege a.beleg-ausschnitt { flex: 1 1 100%; max-width: 100%; } .fs-belege a.beleg-ausschnitt img { max-height: 14rem; } .fs-aktionen { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 8px 16px; margin-top: 10px; padding-top: 10px; border-top: 1px dashed var(--linie-2); } .fs-aktionen button { margin: 0; } .fs-mehr { flex: 1 1 16rem; } .fs-mehr > summary { cursor: pointer; color: var(--akzent); font-size: var(--gr-tabelle); } .fs-mehr[open] > summary { margin-bottom: 4px; } .fs-geprueft a { white-space: nowrap; } .produkt-kurz h3 { margin: 0; font-size: var(--gr-h3); } .freigabe-karte button { padding-inline: 24px; } ul.kandidaten { list-style: none; padding: 0; max-height: 26rem; overflow: auto; border: 1px solid var(--linie-2); border-radius: var(--r-flaeche); } ul.kandidaten li { padding: 6px 12px; border-bottom: 1px solid var(--linie); } ul.kandidaten li:last-child { border-bottom: 0; } .pruefliste .ergebnis-fehlt td:nth-child(2) { color: var(--fehler); font-weight: 600; } .pruefliste .ergebnis-nicht_pruefbar td:nth-child(2), .pruefliste .ergebnis-befreit td:nth-child(2) { color: var(--tinte-3); } .rueckwaerts-funde { table-layout: fixed; } /* Spalten springen nicht (Punkt 123) */ .rueckwaerts-funde td form { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; } .rueckwaerts-funde td form button { margin: 0; } /* --- Rechtsgrundlagen als Verweis zur genauen Stelle (Nutzer 04.10.2026: „blau unterlegt“) ---------------------------- */ a.norm-link { padding: 0 4px; border-radius: var(--r-marke); background: var(--norm-flaeche); color: var(--norm-text); font-size: inherit; text-decoration: none; box-shadow: inset 0 -1px 0 var(--norm-strich); white-space: normal; } a.norm-link:hover, a.norm-link:focus-visible { background: var(--norm-flaeche-hover); color: var(--norm-text-hover); box-shadow: inset 0 -1px 0 var(--norm-text); } .normen-zeile, .normtext { margin: 0 0 10px; font-size: var(--gr-meta); color: var(--tinte-3); } button.normen-alle { font-size: var(--gr-tabelle); color: var(--norm-text); } /* --- Barrierefreiheit: Darstellung, Erklärung, Hinweise (Nutzer 30.10.2026) --------------------------------------------- Seite „Darstellung und Bedienung“ (web/darstellung.py): links die Schalter in Gruppen, rechts die Vorschau, die beim Blättern stehen bleibt. Erklärung zur Barrierefreiheit (web/barrierefreiheit.py). Hinweis vor dem Abmelden (static/sitzung.js), Stand auf Knopfdruck und Vorlesen (static/bedienung.js). */ .darstellung-seite { display: grid; grid-template-columns: minmax(0, 1fr) minmax(18rem, 24rem); gap: 20px; align-items: start; } .darstellung-formular { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 26rem), 1fr)); gap: 8px 40px; align-items: start; margin: 0; } /* die Gruppen nebeneinander, sobald jede 26rem breit sein kann */ .darstellung-formular > .formular-fuss { grid-column: 1 / -1; } .darstellung-gruppe { padding-bottom: 12px; } .darstellung-gruppe > h2 { margin-bottom: 0; } fieldset.einstellung { margin: 14px 0 0; } fieldset.einstellung > legend { font-size: var(--gr-text); font-weight: 600; color: var(--tinte); } .stufen { display: flex; flex-wrap: wrap; gap: 0 24px; } .stufen label.wahl { margin-top: 6px; } fieldset.einstellung > p.klein { margin: 4px 0 0; max-width: 75ch; } .kuerzel-tabelle { width: auto; margin-top: 8px; } .kuerzel-tabelle th, .kuerzel-tabelle td { padding: 4px 16px 4px 0; } kbd { display: inline-block; padding: 0 5px; border: 1px solid var(--feldrand); border-radius: var(--r-marke); background: var(--flaeche-2); color: var(--tinte); font: 500 var(--gr-meta)/1.5 var(--mono); } .darstellung-vorschau { position: sticky; top: calc(var(--kopf-hoehe) + 16px); } :root[data-kopfleiste="mitlaufen"] .darstellung-vorschau { top: 16px; } .darstellung-vorschau h3 { margin-top: 4px; } .vorschau-staende { display: flex; flex-wrap: wrap; gap: 4px 16px; } .vorschau-knoepfe { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; margin-top: 12px; } .vorschau-knoepfe button { margin: 0; } .vorschau-zuruecksetzen { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--linie); } .vorschau-zuruecksetzen button { margin: 0; } .erklaerung-liste { margin: 4px 0 0; padding-left: 18px; display: grid; gap: 4px; } dl.einschraenkungen { margin: 0; } dl.einschraenkungen dt { margin-top: 14px; font-weight: 600; } dl.einschraenkungen dt:first-child { margin-top: 0; } dl.einschraenkungen dd { margin: 2px 0 0; } dl.einschraenkungen dd p { margin: 0 0 4px; } /* Hinweis vor dem Abmelden: ein Fenster in der Mitte, die Seite dahinter bleibt sichtbar */ dialog.sitzung-hinweis { width: min(32rem, calc(100% - 32px)); padding: 20px 24px; border: 0; border-radius: var(--r-flaeche); background: var(--flaeche); color: var(--tinte); box-shadow: var(--schatten-hoch); } dialog.sitzung-hinweis::backdrop { background: rgb(9 22 25 / .35); } dialog.sitzung-hinweis h2 { margin: 0 0 8px; } dialog.sitzung-hinweis p { margin: 0 0 8px; } .sitzung-knoepfe { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; margin-top: 16px; } .sitzung-knoepfe button { margin: 0; } /* Stand aktualisieren (Einstellung „Nur auf Knopfdruck“) und Vorlesen */ .aktualisieren-zeile { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; margin: 0 0 8px; } .aktualisieren-zeile button { margin: 0; } .vorlesen-leiste { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 0 0 12px; } .vorlesen-leiste button { margin: 0; } /* --- Starke Vergrößerung (Umfluss, WCAG 1.4.10 und 2.4.11; Nutzer 30.10.2026) ---------------------------------------- Bei 100 % bleibt die Desktop-Ansicht, wie sie ist. Wer stark vergrößert, sieht auf 23 Zoll nur so viel wie auf einem Handy: Bei 400 % sind 1280 Pixel nur noch 320 breit und 256 hoch. Dann läuft die Kopfleiste mit (sie stünde sonst über dem halben Bildschirm), stehende Leisten und Spaltenköpfe ebenso, und alles rückt untereinander. Nur Tabellen, Kalender und Zeitstrahl bleiben zweidimensional – sie lassen sich in ihrer Fläche waagerecht verschieben. */ @media (max-width: 64em), (max-height: 32em) { .kopf { position: static; } :root { scroll-padding-top: 16px; } :is(table[data-lineal], table[data-kopf-steht]) > thead th { position: static; } .wahl-leiste, .bausteinleiste, .darstellung-vorschau { position: static; } .bausteinleiste { max-height: none; } } @media (max-width: 40em) { /* Geschlossene Aufklapper nehmen hier keinen Platz – sonst verbreiterte das stehende Menü die Seite */ .menue-mehr:not([open]) > .menue-mehr-feld, .gebietswahl:not([open]) > .gebietswahl-feld { display: none; } .menue-mehr[open], .gebietswahl[open] { flex: 1 1 100%; } .kopf { flex-wrap: wrap; gap: 4px 12px; padding: 8px 12px; } .menue { justify-content: flex-start; gap: 2px 14px; } .menue > a, .menue-mehr > summary, .kopf button.link { padding: 8px 0 6px; } .kopf-suche { flex: 1 1 100%; } .kopf-suche input { width: 100%; } .menue-mehr-feld, .gebietswahl-feld { position: static; width: auto; min-width: 0; max-width: 100%; margin-top: 4px; } .gebietswahl > summary { max-width: 100%; } .inhalt { padding: 16px 12px 32px; overflow-wrap: break-word; } .karte { padding: 12px 12px 16px; } /* Tabellen verschieben sich in ihrer Karte; was nur für Bildschirmleser da ist (absolut gesetzt), bleibt darin */ .karte, .karte.proben, #katalog-liste, #akten-liste, .karte:has(> table[data-lineal]), .karte:has(> table[data-kopf-steht]) { overflow-x: auto; position: relative; } .knopf-link.zweitrangig { margin-left: 0; max-width: 100%; } .proben > .abschnitt-kopf { padding: 0 12px; } .raster.zwei-zu-eins, .raster.eins-zu-zwei, .formular .zwei, .mehr-raster, .vorlagen-editor, .textvorlage, .karte.filter, .darstellung-seite, .spalten-2, .kacheln, .akten-karten { grid-template-columns: minmax(0, 1fr); } .karte.filter > .filter-knoepfe, .karte.filter > .akten-alle { grid-column: 1; grid-row: auto; } button, .knopf-link, a.knopf, .klein-knopf, .kopier-knopf, .knopf-zweit, .knopf-link-leise, td.aktionen { white-space: normal; } /* feste Breite statt min-width – die greift an Tabellen nicht; der Katalog (auch .ergebnisse) zuletzt */ .akten-tabelle, .ergebnisse, .probensuche-tabelle, .strassen-tabelle { width: 36rem; max-width: none; } .proben-tabelle, .mail-tabelle { width: 48rem; } .katalog-tabelle { width: 56rem; } .probe-mehr > td { padding: 4px 12px 16px 16px; } .nummernpool-anker > .nummernpool { position: static; width: auto; min-width: 0; max-width: 100%; } dl.angaben > div { flex: 1 1 100%; box-shadow: 0 -1px 0 var(--linie); padding-block: 6px; } dl.angaben > div:first-child { box-shadow: none; } } /* Breite des Inhalts statt Breite des Fensters (Integrationsstand 03.11.2026, WCAG 1.4.4 und 1.4.10): Die Mediaabfragen oben rechnen mit der Anfangsschrift des Browsers – die Schriftgröße des Kontos (data-schrift, bis 200 %) sehen sie nicht. Tabellen fragen deshalb den Inhalt (.inhalt) nach seiner Breite in rem; die wächst mit jeder Schriftgröße mit. Vorher fiel bei 400 % und bei 150/200 % Schrift die freie Spalte der Proben und der Mails auf 0 px, und die Seite blätterte waagerecht. Bei 100 % am Desktop (ab 1280 px) greift nichts davon. - Gestapelte Karten für Tabellen mit festen Spalten (Proben und Mails des Vorgangs, Produkte einer Übersicht): Jede Zeile wird eine Karte, der Spaltenkopf steht über dem Wert (data-spalte). Für Bildschirmleser bleibt es eine Tabelle (Chromium/Edge behalten Zeilen, Zellen und Köpfe – geprüft im Barrierebaum), die Köpfe sagt der Tabellenkopf; die sichtbaren Köpfe sind still ( / ""). - Mindestbreiten mit Umbruch für Tabellen mit Spalten in Prozent (Katalog, Akten, Lieferungen, Rückwärtssuche, Pakete): Die Spalten richten sich nach dem Inhalt – keine schmaler als ihr längstes Wort –, die Tabelle verschiebt sich in ihrer Fläche statt die Seite zu verbreitern. */ @container inhalt (max-width: 73.5rem) { .proben-tabelle, .proben-tabelle > tbody, .mail-tabelle, .mail-tabelle > tbody { display: block; } .proben-tabelle, .mail-tabelle { width: auto; } /* statt der festen Breite bei 40em (oben) */ :is(.proben-tabelle, .mail-tabelle) > colgroup { display: none; } :is(.proben-tabelle, .mail-tabelle) > thead { display: block; position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } :is(.proben-tabelle, .mail-tabelle) [data-spalte]::before { content: attr(data-spalte); content: attr(data-spalte) / ""; display: block; margin-bottom: 2px; font: 500 var(--gr-meta)/1.3 var(--schrift); color: var(--tinte-3); } /* Proben: links der Aufklapper, rechts untereinander Nummer, Bild, Produkt, Stand, Hinweis, Protokoll */ .proben-tabelle tbody.probe { border-bottom: 1px solid var(--linie-2); } .proben-tabelle .probe-zeile { display: grid; grid-template-columns: var(--ziel-mini) minmax(0, 1fr); gap: 8px 12px; padding: 12px 16px 14px 10px; cursor: pointer; } .proben-tabelle .probe-zeile > :is(td, th) { display: block; height: auto; padding: 0; border: 0; grid-column: 2; } .proben-tabelle .probe-zeile > td.sp-auf { grid-column: 1; grid-row: 1; padding: 0; } .proben-tabelle .probe-zeile > :is(.sp-bild, .sp-hinweis, .sp-aktion):empty { display: none; } .proben-tabelle .probe-zeile:hover, .proben-tabelle tbody.probe.offen > .probe-zeile { background: var(--flaeche-2); } .proben-tabelle tbody.probe.offen > .probe-zeile { box-shadow: inset 3px 0 0 var(--akzent); } .proben-tabelle tbody.probe.offen > .probe-zeile > td:first-child { box-shadow: none; } .proben-tabelle .probe-mehr { display: block; } .proben-tabelle .probe-mehr[hidden] { display: none; } .proben-tabelle .probe-mehr > td { display: block; padding: 4px 16px 20px 20px; border-bottom: 0; } .proben-tabelle .mehr-raster { grid-template-columns: minmax(0, 1fr); } /* Mails: Datum, Absender, Betreff mit Text, Anhänge, darunter die Knöpfe */ .mail-tabelle > tbody > tr { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; padding: 12px 0; border-bottom: 1px solid var(--linie); } .mail-tabelle > tbody > tr > td { display: block; padding: 0; border: 0; } .mail-tabelle td.aktionen { text-align: left; white-space: normal; } .mail-tabelle td.aktionen > * { margin: 0 8px 4px 0; } } /* Sehr schmal (400 %): in der aufgeklappten Probe die Beschriftung über den Wert statt daneben */ @container inhalt (max-width: 30rem) { .probe-mehr dl.angaben-liste { grid-template-columns: minmax(0, 1fr); row-gap: 0; } .probe-mehr dl.angaben-liste dd { margin-bottom: 8px; } } /* Produkte einer Übersicht in der aufgeklappten Probe: dieselbe Karte, sobald ihre eigene Fläche schmal wird */ @container produktwahl (max-width: 46rem) { .produktwahl-tabelle, .produktwahl-tabelle > tbody, .produktwahl-tabelle > tbody > tr { display: block; } .produktwahl-tabelle > colgroup { display: none; } .produktwahl-tabelle > thead { display: block; position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } .produktwahl-tabelle > tbody > tr { padding: 10px 12px 12px; border-bottom: 1px solid var(--linie); } .produktwahl-tabelle > tbody > tr > td { display: block; padding: 2px 0; border: 0; } .produktwahl-tabelle td.aktionen { padding-top: 6px; text-align: left; } .produktwahl-tabelle [data-spalte]::before { content: attr(data-spalte); content: attr(data-spalte) / ""; display: block; margin-bottom: 2px; font: 500 var(--gr-meta)/1.3 var(--schrift); color: var(--tinte-3); } } @container inhalt (max-width: 70rem) { :is(.katalog-tabelle, .akten-tabelle, .lieferungen-tabelle, .rueckwaerts-funde, .pakete-tabelle) { table-layout: auto; } /* table.… statt .…: gleiche Spezifität wie die Regeln für stehende Spaltenköpfe (oben), die sonst gewönnen */ :is(#katalog-liste, #akten-liste), .karte:has(> :is(table.lieferungen-tabelle, table.rueckwaerts-funde, table.pakete-tabelle)) { overflow-x: auto; position: relative; } :is(table.katalog-tabelle, table.akten-tabelle, table.lieferungen-tabelle) > thead th { position: static; } :is(.lieferungen-tabelle, .pakete-tabelle) td.aktionen { white-space: normal; } } /* --- Windows-Kontrastdesign (forced-colors, Barrierefreiheit 30.10.2026) ---------------------------------------------- Windows setzt seine Systemfarben ein und nimmt Schatten weg. Was nur aus Fläche oder Schatten bestand – Zeichen aus CSS-Masken, der Fokus der Felder, die Schalterbahn, Ränder von Karten und Marken –, bekommt hier Systemfarben und Ränder; sonst verschwände es. */ @media (forced-colors: active) { .meldung::before, .warnzeile::before, .warnkasten::before, .kopf-suche::before, .gebietswahl > summary::after, .menue-mehr > summary::after, details.aufklapp > summary::before, .weitere-filter > summary::before, .nebenformular > summary::before, .warteschlange > summary::before, .bemerkung-an > summary::before, .auswaerts::before, .zust-unklar::before, .marke-fremd::before, .status-marke::before, .status::before, .probensuche-tabelle .gruppe-shops::before { forced-color-adjust: none; background: CanvasText; } .guete::before { forced-color-adjust: none; } .guete { --g1: CanvasText; --g2: GrayText; --g3: GrayText; } .guete-hoch { --g1: CanvasText; --g2: CanvasText; --g3: CanvasText; } .guete-mittel { --g1: CanvasText; --g2: CanvasText; } input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 2px solid Highlight; outline-offset: 1px; } .karte, .kachel, .akte-karte, .frist-kachel, .frist-karte, .hinweis-karte, .menue-mehr-feld, .gebietswahl-feld, dl.angaben, .feststellung, .kennzeichnung, .fortschritt, .vorschlag-zeile, dialog.sitzung-hinweis { outline: 1px solid CanvasText; outline-offset: -1px; } .schalter-bahn { border: 1px solid CanvasText; } .schalter.an .schalter-bahn { forced-color-adjust: none; background: Highlight; } .schalter-knopf { forced-color-adjust: none; background: CanvasText; box-shadow: none; } .zaehler, .reiter a .zahl, .marke-bezirk, .marke-rolle, .marke-test, .marke-recht, .marke-maske, .marke-verdeckt, .marke-risiko, .marke-notloesung, .marke-probe, .marke-neu, .aktenzeichen, a.norm-link { border: 1px solid CanvasText; } .menue > a[aria-current="page"], .menue-mehr.aktiv > summary, .reiter a.aktiv, .reiter a[aria-current="page"] { border-bottom-color: Highlight; } .tabelle tr.im-blick > td, .tabelle tr.im-blick > th { outline: 1px solid Highlight; outline-offset: -1px; } } /* --- Druck und reduzierte Bewegung ------------------------------------------------------------------------------------ Reduzierte Bewegung wirkt, wenn Windows sie meldet – und für Konten mit „Bewegung: immer ruhig“ (Barrierefreiheit 30.10.2026, für Rechner, an denen die Einstellung von Windows gesperrt ist). Dieselben vier Regeln stehen darum zweimal. */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition-duration: 0ms !important; animation-duration: 0ms !important; } .hinweis-karte, .hinweis-karte.geht { transform: none; } /* der Hinweis erscheint und geht ohne Weg */ button:active, .knopf-link:active, a.knopf:active, .klein-knopf:active, .kopier-knopf:active, .knopf-zweit:active { transform: none; } /* Die fehlende Probennummer bleibt rot, bis eine drinsteht – statt zu blinken */ .korb-tabelle td.korb-nummer.nummer-fehlt::before, .nummer-flaeche.nummer-fehlt::before { animation: none !important; background: var(--fehler-ruhig); opacity: 1; } } :root[data-bewegung="ruhig"] *, :root[data-bewegung="ruhig"] *::before, :root[data-bewegung="ruhig"] *::after { transition-duration: 0ms !important; animation-duration: 0ms !important; } :root[data-bewegung="ruhig"] :is(.hinweis-karte, .hinweis-karte.geht) { transform: none; } :root[data-bewegung="ruhig"] :is(button, .knopf-link, a.knopf, .klein-knopf, .kopier-knopf, .knopf-zweit):active { transform: none; } :root[data-bewegung="ruhig"] :is(.korb-tabelle td.korb-nummer, .nummer-flaeche).nummer-fehlt::before { animation: none !important; background: var(--fehler-ruhig); opacity: 1; } @media print { body { background: #fff; } .kopf, .fuss, .reiter, .filter, .fristen-werkzeuge, .stand-knoepfe, .sammel, .zs-filter, .wv-aktionen form, .datum-form button, .rm-knoepfe, .sprunglink { display: none !important; } .karte, .frist-karte, .frist-kachel, .kachel { box-shadow: none; border: 1px solid #999; break-inside: avoid; } table[data-lineal] > thead th, table[data-kopf-steht] > thead th { position: static; } .zeitstrahl, .monatsbalken { min-width: 0; } .proben-tabelle .probe-mehr[hidden] { display: table-row !important; } /* gedruckt stehen alle Proben offen */ .aufklapper, .mehr-fuss { display: none !important; } }