/* ===================================================================
enerson.tech — Oberflaeche "Schaltplan"
Leitgedanke
Ein Elektrobetrieb liest den ganzen Tag Schemata. Also liest sich
auch diese Oberflaeche wie eines: ein ruhiges Raster traegt die
Flaeche, Platten sitzen darauf und sind mit einer Klemme an der
linken Kante angeschlossen. Haarlinien statt Kaesten.
Die eine Regel, die alles zusammenhaelt
Was BESCHREIBT, laeuft in der Grotesk. Was IDENTIFIZIERT oder
MISST — Nummern, Codes, Betraege, Datum, Kuerzel — laeuft in der
Schreibmaschinenschrift mit gleichbreiten Ziffern. Dieser Kontrast
wird mit jeder zusaetzlichen Datenzeile staerker, statt zu ermueden.
Farbe
Blau ist die Leitung: alles Bedienbare, Verknuepfte, Aktive.
Rot ist ausschliesslich der Fehler und der negative Betrag.
Vorher war beides rot — in einer Anwendung mit Minusbetraegen in
der Rechnung ist das eine Verwechslung, die Geld kosten kann.
Warum das Raster grob ist
Ein 8px-Raster liegt auf Windows-Arbeitsplaetzen mit 125 %- oder
150 %-Skalierung auf gebrochenen Geraetepixeln und flimmert beim
Rollen. 48px sind gross genug, dass das nicht auffaellt.
Keine Abhaengigkeiten: Systemschriften, CSS-Verlaeufe, sonst nichts.
=================================================================== */
:root{
color-scheme:light;
/* Papier mit einem Hauch Blau — kuehler als Weiss, aber nicht kalt */
--bg:#e9edf1;
--panel:#ffffff;
--ink:#0e151b;
--ink-2:#33414d;
/* 5.9:1 auf Weiss. Der alte Wert lag bei 4.5:1 und trug
10.5px-Versalien — formal bestanden, praktisch zu blass. */
--muted:#5c6874;
--line:#b6c2cd;
--line-soft:#dde4ea;
/* Klemmenblau. Fuehrt, verknuepft, markiert das Aktive. */
--accent:#0f52c8;
--accent-soft:#e4ecfb;
/* Muss auf --accent-soft lesbar sein, nicht auf --accent. 8.9:1. */
--accent-ink:#0a3a91;
--ok:#0a6f3f; --ok-soft:#dcf1e6;
--warn:#8a5300; --warn-soft:#fbedd6;
--bad:#b8172c; --bad-soft:#fbe0e3;
--radius:3px;
/* Bleibt eine Border-Kurzschreibweise: wird als border:var(--rail)
benutzt. Die Klemmenbreite steht getrennt in --klemme. */
--rail:1px solid var(--line);
--klemme:3px;
--schrift:-apple-system,BlinkMacSystemFont,"Segoe UI Variable Text","Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
--mono:ui-monospace,"SF Mono",SFMono-Regular,Menlo,"Cascadia Mono",Consolas,"Liberation Mono",monospace;
/* nur intern */
--raster:#c9d4de;
--platte:0 1px 2px rgba(14,21,27,.05);
--senke:inset 0 1px 2px rgba(14,21,27,.09);
--bg2:var(--bg);
/* Gerüst (Runde 1, Entwurf B): Tokens der Anmeldemaske «Schaltplan 2.0»
und die Abbildung des Fenstergerüsts darauf. Die alten Namen bleiben,
damit alle Inhaltsregeln weiter greifen. */
--band:#f1f3f8; /* zweite, leicht abgesetzte Fläche (Menüband, Spaltenköpfe) */
--feld:#ffffff;
--feldrand:#7d8798; /* 3.63:1 auf Weiss — der Feldrand der Anmeldung */
--knopf:#0f52c8;
--knopf-ink:#ffffff;
--grid:rgba(15,82,200,.070);
--grid-fine:rgba(15,82,200,.032);
--titel:var(--knopf);
--titel-ink:var(--knopf-ink);
--register:var(--bg);
--baum-aktiv:var(--accent-soft);
--markiert:var(--accent-soft);
--markiert-ink:var(--accent-ink);
--status-ink:var(--accent-ink);
/* Masse: Zeilen 18 px wie im Original (Entscheid Ivi 16.09.2026), Schieber 16–28 */
--zeile:18px;
--schriftgrad:12px;
--h-titel:26px;
--h-register:28px;
--h-band:90px;
--h-vorgabe:32px;
--h-status:22px;
--b-baum:168px; /* Vorlage ca. 160 px; 8 px mehr, damit «Service-Rapporte F6» ungekürzt steht */
/* 0.35.0 (C6): Bereichsfarben des Verteilers — Klemmenblau / Kupfer / Gruenspan / Violett. Nur an Ader, Schiene,
Klemme und Balken; Text traegt NIE die Bereichsfarbe (dataviz-Regel, F). GEMESSEN 19.09.2026 (mess/kontrast.py)
auf Weiss: 6.86 / 5.32 / 4.01 / 6.30 — alle >= 3:1 fuer Linien; Zeit laege als Text unter 4.5:1, wird nie Text.
Leiste unten (Handy) ist das Firmenband: Nachtblau der Startseite, hautunabhaengig; --l-* sind die
Bereichsfarben AUF Nachtblau (7.05 / 8.70 / 9.57 / 7.98), --leiste-ink 10.5:1, Weiss 15.5:1. */
--f-auftrag:#0f52c8; --f-service:#b8470a; --f-zeit:#0a8f7c; --f-cloud:#7a3fc4;
--leiste:#16214c; --leiste-ink:#c9d3ff; --leiste-hell:#ffffff;
--l-auftrag:#7fb0ff; --l-service:#ffb084; --l-zeit:#5ee0c9; --l-cloud:#c6adff; --l-start:#9fb0e6;
--vt-fira:"Fira Sans",var(--schrift);
--vt-text:"Manrope",var(--schrift);
/* 0.35.1 (S2): bisher fest kodierte Farben als Variablen — die Klassisch-Werte sind die bisherigen Pixel. Die
Haeute Fokus/Nachtblau und beide Dunkelsaetze setzen sie um; der Druckblock setzt sie zurueck (G4-Regel). */
--sammel:#1d4ed8;
--zustand-entwurf:#b26a00; --zustand-aktiv:#1a56c4; --zustand-bezahlt:#1a7f37; --zustand-storniert:#b3261e; --zustand-import:#666;
--schleier:rgba(8,13,18,.5); --schleier-stark:rgba(8,13,18,.66);
--schatten:0 12px 28px -12px rgba(0,0,0,.35); --schatten-hinweis:0 12px 28px -12px rgba(0,0,0,.45);
--schatten-gross:0 18px 56px rgba(0,0,0,.42); --schatten-schicht:-8px 0 20px rgba(0,0,0,.16); --schatten-blatt:0 -12px 40px rgba(8,13,18,.28);
--rollrand:rgba(0,0,0,.16);
--titel-rand:rgba(255,255,255,.55); --titel-rand-hover:rgba(255,255,255,.8); --titel-fuell-hover:rgba(255,255,255,.14);
--titel-konto-rand:rgba(255,255,255,.45); --titel-konto-fuell:rgba(255,255,255,.12); --titel-konto-fuell-hover:rgba(255,255,255,.2);
--titel-pfeil:rgba(255,255,255,.75); --titel-ring:rgba(255,255,255,.7); --titel-zeichen-bg:#fff; --titel-zeichen-ink:var(--knopf);
/* Tokens der Haeute (Fokus/Nachtblau) — in Klassisch ohne eigene Wirkung */
--zebra:var(--panel); --hover:var(--band); --chip:var(--band); --glas:transparent; --glas-rand:var(--line-soft);
--glow:none; --glow-farbe:var(--accent); --klemme-farbe:var(--accent); --schrift-titel:var(--schrift);
}
/* Dunkel: gleiche Geometrie, gedrehte Leuchtdichte. Einmal definiert,
zweimal angewandt — ueber die Systemeinstellung und ueber den
Schalter. Die ausdrueckliche Wahl gewinnt in BEIDE Richtungen. */
@media (prefers-color-scheme: dark){
:root:not([data-theme="hell"]){
color-scheme:dark;
--bg:#0c1116; --panel:#151d25; --ink:#e2eaf2; --ink-2:#b0bfcc;
--muted:#8d9caa; --line:#2e3b47; --line-soft:#202a34;
--accent:#5aa2ff; --accent-soft:#14294a; --accent-ink:#b9d5ff;
--ok:#41d18d; --ok-soft:#0e2a20;
--warn:#e2a640; --warn-soft:#2f2314;
--bad:#ff6b7a; --bad-soft:#341620;
--raster:#1c2732;
--platte:0 1px 2px rgba(0,0,0,.5);
--senke:inset 0 1px 2px rgba(0,0,0,.45);
/* Gerüst dunkel: Werte aus Entwurf B, Markierungen gedämpft nach Entwurf C */
--band:#10151f; --feld:#0d1119; --feldrand:#62718c; --knopf:#1450d0; --knopf-ink:#ffffff;
--grid:rgba(120,168,255,.085); --grid-fine:rgba(120,168,255,.038);
--markiert:#2d4a70; --markiert-ink:#eef3fa; --baum-aktiv:#1d3557; --status-ink:#b9d5ff;
/* 0.35.0 (C6): Bereichsfarben dunkel (Satz aus Entwurf F; auf #151d25 4.59 / 4.70 / 5.37 / 4.75) */
--f-auftrag:#3d84e8; --f-service:#c96f2e; --f-zeit:#25a381; --f-cloud:#9a6ef0;
/* 0.35.1 (S2): Zustandsfarben mit >= 4.5:1 auf --panel (vorher #1a56c4 2.57, #b3261e 2.60, #1d4ed8 2.54, #666 2.96) */
--sammel:#b9d5ff; --zustand-entwurf:#e2a640; --zustand-aktiv:#b9d5ff; --zustand-bezahlt:#41d18d; --zustand-storniert:#ff6b7a; --zustand-import:#8d9caa;
}
}
:root[data-theme="dunkel"]{
color-scheme:dark;
--bg:#0c1116; --panel:#151d25; --ink:#e2eaf2; --ink-2:#b0bfcc;
--muted:#8d9caa; --line:#2e3b47; --line-soft:#202a34;
--accent:#5aa2ff; --accent-soft:#14294a; --accent-ink:#b9d5ff;
--ok:#41d18d; --ok-soft:#0e2a20;
--warn:#e2a640; --warn-soft:#2f2314;
--bad:#ff6b7a; --bad-soft:#341620;
--raster:#1c2732;
--platte:0 1px 2px rgba(0,0,0,.5);
--senke:inset 0 1px 2px rgba(0,0,0,.45);
/* Gerüst dunkel: Werte aus Entwurf B, Markierungen gedämpft nach Entwurf C */
--band:#10151f; --feld:#0d1119; --feldrand:#62718c; --knopf:#1450d0; --knopf-ink:#ffffff;
--grid:rgba(120,168,255,.085); --grid-fine:rgba(120,168,255,.038);
--markiert:#2d4a70; --markiert-ink:#eef3fa; --baum-aktiv:#1d3557; --status-ink:#b9d5ff;
/* 0.35.0 (C6): Bereichsfarben dunkel (Satz aus Entwurf F; auf #151d25 4.59 / 4.70 / 5.37 / 4.75) */
--f-auftrag:#3d84e8; --f-service:#c96f2e; --f-zeit:#25a381; --f-cloud:#9a6ef0;
/* 0.35.1 (S2): Zustandsfarben mit >= 4.5:1 auf --panel (vorher #1a56c4 2.57, #b3261e 2.60, #1d4ed8 2.54, #666 2.96) */
--sammel:#b9d5ff; --zustand-entwurf:#e2a640; --zustand-aktiv:#b9d5ff; --zustand-bezahlt:#41d18d; --zustand-storniert:#ff6b7a; --zustand-import:#8d9caa;
}
/* ====================================================================
HAUT JE KONTO (0.35.1, S1/S3/S4, 19.09.2026) — Klassisch / Fokus / Nachtblau
html[data-haut="fokus"|"nachtblau"]; Klassisch = KEIN Attribut, darum greift
hier nichts und Klassisch bleibt pixelgleich (Regel). Die Wahl haengt am
Konto (core.app_user.haut, POST /api/ich/haut) und als Vorab in localStorage
enerson.haut, das ein 1-Zeilen-Skript im VOR dem Stylesheet liest —
so faerbt sich die Seite nie erst nach /api/ich um.
Fokus (Entwurf C): Weiss, Haarlinien, EIN Akzent Firmenblau, Manrope,
Menueband als flache Textknoepfe mit Piktogramm und Tastenmarke; hell und
dunkel (Fokus-Grau) — der Modusknopf gilt wie in Klassisch.
Nachtblau (Entwurf A): die Buehne der Startseite (Glow oben rechts, Raster),
Glas an Titelleiste/Band/Menues, Firmenblau mit Leuchten an Fokus/aktiv,
Fira Sans fuer Titel. IMMER dunkel — data-theme hat dort keine Wirkung
(E-S1-1: «Hell» im Modusknopf wechselt zur Haut Klassisch hell).
Massregeln (18-px-Zeilen, Baum, Tasten, Handy-Leiste) sind in allen drei
gleich; die Leiste unten bleibt Nachtblau (Firmenband, --leiste*).
Strukturregeln der Haeute stehen als Block HAUT-REGELN vor dem Handy-Block
(gleiche Spezifitaet ueber :where(), darum gewinnen die Handy-Regeln danach
weiter) — alles unter @media screen, der Druck sieht nur Klassisch hell.
Kontraste GEMESSEN 19.09.2026 (mess/kontrast-0351.py und b/kontrast-*.out):
Fokus muted 5.36 (Zebra 4.79, Chip 4.75), Feldrand #868b93 3.43, Klemme
#2670ed auf #dfeafc 3.74; Fokus dunkel Feldrand #767b85 3.57, Klemme #5aa2ff
4.60; Nachtblau muted 7.44 (Glas 6.30, markiert 5.00), Feldrand #5b6a92 3.52,
Knopfrand α.38 3.50, Weiss auf Knopf #2670ed 4.54, Bereichsadern 5.09–5.96.
==================================================================== */
:root[data-haut="fokus"]{
color-scheme:light;
--bg:#f4f4f5; --panel:#ffffff; --ink:#1b1d21; --ink-2:#44484f; --muted:#666b73;
--line:#dcdee2; --line-soft:#ececee;
--accent:#2670ed; --accent-soft:#eaf1fd; --accent-ink:#1a56c2;
--ok:#137a45; --ok-soft:#e6f4ec; --warn:#8a5300; --warn-soft:#fbf1df; --bad:#c1202f; --bad-soft:#fbe4e6;
--radius:6px; --rail:1px solid var(--line-soft); --platte:none; --senke:none; --raster:transparent;
--schrift:"Manrope",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
--band:#ffffff; --feld:#f3f4f6; --feldrand:#868b93; --knopf:#2670ed; --knopf-ink:#ffffff;
--grid:transparent; --grid-fine:transparent;
--titel:#ffffff; --titel-ink:var(--ink); --register:#ffffff; --baum-aktiv:var(--accent-soft);
--markiert:#dfeafc; --markiert-ink:#0f3f8f; --status-ink:var(--muted);
--zebra:#f2f2f3; --hover:#eef0f3; --chip:#f0f1f3; --glas-rand:var(--line-soft); --klemme-farbe:#2670ed;
--schatten:0 14px 36px -10px rgba(20,22,28,.22); --schatten-hinweis:0 14px 36px -10px rgba(20,22,28,.28);
--schatten-gross:0 24px 60px -18px rgba(20,22,28,.35); --schleier:rgba(20,22,28,.4); --schleier-stark:rgba(20,22,28,.55);
--rollrand:rgba(0,0,0,.08);
--sammel:var(--accent-ink); --zustand-entwurf:#8a5300; --zustand-aktiv:#1a56c2; --zustand-bezahlt:#137a45;
--zustand-storniert:#c1202f; --zustand-import:#666b73;
--titel-rand:var(--line); --titel-rand-hover:var(--line); --titel-fuell-hover:var(--hover);
--titel-konto-rand:transparent; --titel-konto-fuell:var(--chip); --titel-konto-fuell-hover:var(--hover);
--titel-pfeil:var(--muted); --titel-ring:var(--panel); --titel-zeichen-bg:var(--accent); --titel-zeichen-ink:#ffffff;
--h-titel:36px; --h-register:30px; --h-band:62px; --h-vorgabe:34px; --h-status:24px; --b-baum:184px;
}
/* Fokus dunkel: neutrales Grau, gleiche Geometrie — Systemwahl und Schalter wie in Klassisch */
@media (prefers-color-scheme: dark){
:root[data-haut="fokus"]:not([data-theme="hell"]){
color-scheme:dark;
--bg:#121316; --panel:#191a1d; --ink:#e8e9ec; --ink-2:#c3c6cc; --muted:#9ca0a8; --line:#2f3136; --line-soft:#26282c;
--accent:#2670ed; --accent-soft:#1b2a47; --accent-ink:#a9c8ff;
--ok:#41d18d; --ok-soft:#0e2a20; --warn:#e2a640; --warn-soft:#2f2314; --bad:#ff6b7a; --bad-soft:#341620;
--band:#191a1d; --feld:#24262a; --feldrand:#767b85; --knopf:#2670ed; --knopf-ink:#ffffff;
--titel:#191a1d; --titel-ink:#e8e9ec; --register:#191a1d;
--baum-aktiv:#1b2a47; --markiert:#22365c; --markiert-ink:#e8eefb; --status-ink:#9ca0a8;
--zebra:#1e1f23; --hover:#26282d; --chip:#26282d; --klemme-farbe:#5aa2ff;
--schatten:0 14px 36px -10px rgba(0,0,0,.6); --schatten-hinweis:0 14px 36px -10px rgba(0,0,0,.6);
--schatten-gross:0 24px 60px -18px rgba(0,0,0,.7); --schleier:rgba(0,0,0,.5); --schleier-stark:rgba(0,0,0,.66);
--rollrand:rgba(0,0,0,.4);
--sammel:#a9c8ff; --zustand-entwurf:#e2a640; --zustand-aktiv:#a9c8ff; --zustand-bezahlt:#41d18d;
--zustand-storniert:#ff6b7a; --zustand-import:#9ca0a8;
--titel-zeichen-bg:#2670ed;
--f-auftrag:#3d84e8; --f-service:#c96f2e; --f-zeit:#25a381; --f-cloud:#9a6ef0;
}
}
:root[data-haut="fokus"][data-theme="dunkel"]{
color-scheme:dark;
--bg:#121316; --panel:#191a1d; --ink:#e8e9ec; --ink-2:#c3c6cc; --muted:#9ca0a8; --line:#2f3136; --line-soft:#26282c;
--accent:#2670ed; --accent-soft:#1b2a47; --accent-ink:#a9c8ff;
--ok:#41d18d; --ok-soft:#0e2a20; --warn:#e2a640; --warn-soft:#2f2314; --bad:#ff6b7a; --bad-soft:#341620;
--band:#191a1d; --feld:#24262a; --feldrand:#767b85; --knopf:#2670ed; --knopf-ink:#ffffff;
--titel:#191a1d; --titel-ink:#e8e9ec; --register:#191a1d;
--baum-aktiv:#1b2a47; --markiert:#22365c; --markiert-ink:#e8eefb; --status-ink:#9ca0a8;
--zebra:#1e1f23; --hover:#26282d; --chip:#26282d; --klemme-farbe:#5aa2ff;
--schatten:0 14px 36px -10px rgba(0,0,0,.6); --schatten-hinweis:0 14px 36px -10px rgba(0,0,0,.6);
--schatten-gross:0 24px 60px -18px rgba(0,0,0,.7); --schleier:rgba(0,0,0,.5); --schleier-stark:rgba(0,0,0,.66);
--rollrand:rgba(0,0,0,.4);
--sammel:#a9c8ff; --zustand-entwurf:#e2a640; --zustand-aktiv:#a9c8ff; --zustand-bezahlt:#41d18d;
--zustand-storniert:#ff6b7a; --zustand-import:#9ca0a8;
--titel-zeichen-bg:#2670ed;
--f-auftrag:#3d84e8; --f-service:#c96f2e; --f-zeit:#25a381; --f-cloud:#9a6ef0;
}
/* Die Masse der Handy- und Touch-Regeln wiederholen: der Satz oben ist spezifischer als :root im Handy-Block. */
@media (max-width:900px){ :root[data-haut="fokus"]{--h-titel:40px;--h-register:0px} }
@media (pointer:coarse) and (min-width:901px){ :root[data-haut="fokus"]{--h-titel:40px;--h-register:36px} }
/* Nachtblau: immer dunkel, unabhaengig von data-theme (steht NACH beiden Dunkelsaetzen, gleiche Spezifitaet → gewinnt). */
:root[data-haut="nachtblau"],:root[data-haut="nachtblau"][data-theme="hell"],:root[data-haut="nachtblau"][data-theme="dunkel"]{
color-scheme:dark;
--bg:#05070f; --bg2:#0b0a25; --panel:#0b1024; --band:#101838; --register:#070b1b; --feld:#080c1e; --feldrand:#5b6a92;
--ink:#e6e9f2; --ink-2:#bcc4d6; --muted:#98a3ba; --line:#243260; --line-soft:#1a2448;
--raster:rgba(255,255,255,.028);
--accent:#2670ed; --accent-soft:#16214c; --accent-ink:#a6c8ff; --knopf:#2670ed; --knopf-ink:#ffffff;
--titel:#0b0a25; --titel-ink:#ffffff; --baum-aktiv:#16214c; --markiert:#1c2f68; --markiert-ink:#f2f6ff; --status-ink:#a6c8ff;
--ok:#7fd8a6; --ok-soft:#0d2a1e; --warn:#f0b957; --warn-soft:#2e2312; --bad:#ffb0b0; --bad-soft:#341620;
--grid:rgba(58,140,255,.07); --grid-fine:rgba(58,140,255,.035);
--radius:6px; --rail:1px solid var(--line);
--platte:0 1px 2px rgba(0,0,0,.55),inset 0 1px 0 rgba(255,255,255,.04); --senke:inset 0 1px 2px rgba(0,0,0,.5);
--schrift:"Manrope",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
--schrift-titel:"Fira Sans",-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
--zebra:#0c1229; --hover:#131c3f; --chip:rgba(255,255,255,.07);
--glas:rgba(255,255,255,.04); --glas-rand:rgba(255,255,255,.12); --glow-farbe:#3a8cff; --klemme-farbe:#3a8cff;
--glow:0 0 0 1px rgba(58,140,255,.55),0 0 14px rgba(58,140,255,.45);
--schatten:0 24px 60px rgba(0,0,0,.6),inset 0 1px 0 rgba(255,255,255,.06); --schatten-hinweis:0 24px 60px rgba(0,0,0,.6);
--schatten-gross:0 24px 70px rgba(0,0,0,.7); --schatten-schicht:-8px 0 24px rgba(0,0,0,.6); --schatten-blatt:0 -12px 40px rgba(0,0,0,.6);
--schleier:rgba(5,7,15,.6); --schleier-stark:rgba(5,7,15,.74); --rollrand:rgba(0,0,0,.45);
--sammel:#a6c8ff; --zustand-entwurf:#f0b957; --zustand-aktiv:#a6c8ff; --zustand-bezahlt:#7fd8a6;
--zustand-storniert:#ffb0b0; --zustand-import:#98a3ba;
--titel-rand:rgba(255,255,255,.38); --titel-rand-hover:rgba(58,140,255,.8); --titel-fuell-hover:rgba(58,140,255,.22);
--titel-konto-rand:rgba(255,255,255,.38); --titel-konto-fuell:rgba(255,255,255,.07); --titel-konto-fuell-hover:rgba(58,140,255,.22);
--titel-pfeil:rgba(255,255,255,.75); --titel-ring:#0b0a25; --titel-zeichen-bg:#2670ed; --titel-zeichen-ink:#ffffff;
/* Bereichsfarben: der dunkle Satz (5.09 / 5.20 / 5.96 / 5.26 auf --panel) — --l-* (Leiste) bleiben */
--f-auftrag:#3d84e8; --f-service:#c96f2e; --f-zeit:#25a381; --f-cloud:#9a6ef0;
}
*,*::before,*::after{box-sizing:border-box}
html{background:var(--bg)}
body{
margin:0;
color:var(--ink);
font:400 13.5px/1.5 var(--schrift);
-webkit-font-smoothing:antialiased;
background-color:var(--bg);
/* Millimeterpapier, grob genug fuer skalierte Bildschirme */
background-image:
linear-gradient(var(--raster) 1px,transparent 1px),
linear-gradient(90deg,var(--raster) 1px,transparent 1px);
background-size:48px 48px,48px 48px;
background-position:-1px -1px;
}
:focus-visible{
outline:none;
/* Doppelring: eine einzelne Linie geht auf dem Raster unter */
box-shadow:0 0 0 3px var(--accent-soft),0 0 0 1px var(--accent);
border-radius:var(--radius);
}
::selection{background:var(--accent-soft);color:var(--accent-ink)}
/* Kopf, Reiterzeile und Fusszeile: seit Runde 1 (0.32.0) Teil des Gerüsts, siehe Block GERÜST unten. */
/* ------------------------------------------- Kennzahlenband */
.cards{
display:grid;gap:10px;margin-bottom:18px;
grid-template-columns:repeat(auto-fit,minmax(168px,1fr));
}
.card{
position:relative;
background:var(--panel);
border:var(--rail);
border-radius:var(--radius);
padding:12px 14px 11px 15px;
box-shadow:var(--platte);
overflow:hidden;
}
.card::before{
content:"";position:absolute;left:0;top:0;bottom:0;
width:var(--klemme);background:var(--accent);opacity:.85;
}
.card .k{
color:var(--muted);
font:600 10px/1.3 var(--mono);
letter-spacing:.09em;text-transform:uppercase;
margin-bottom:5px;
}
.card .v{
font:600 31px/1.05 var(--mono);
font-variant-numeric:tabular-nums slashed-zero;
letter-spacing:-.02em;
color:var(--ink);
}
/* Skalenband wie an einem Messinstrument — statisch, kostet nichts */
.card::after{
content:"";position:absolute;left:15px;right:14px;bottom:0;height:3px;
background:repeating-linear-gradient(90deg,var(--line) 0 1px,transparent 1px 7px);
opacity:.9;
}
.card{background:linear-gradient(180deg,var(--panel),var(--panel) 62%,var(--bg))}
/* ---------------------------------------------------- Flaechen */
.panel{
position:relative;
background:var(--panel);
border:var(--rail);
border-radius:var(--radius);
box-shadow:var(--platte);
overflow:auto; /* traegt die klebenden Spaltenkoepfe */
}
/* Anschlussmarken an den Ecken, innenliegend */
.panel::before,.panel::after{
content:"";position:absolute;width:9px;height:9px;pointer-events:none;z-index:3;
}
.panel::before{top:0;left:0;border-top:2px solid var(--accent);border-left:2px solid var(--accent)}
.panel::after{bottom:0;right:0;border-bottom:2px solid var(--line);border-right:2px solid var(--line)}
.tools{
display:flex;flex-wrap:wrap;align-items:center;gap:9px;
padding:11px 14px;
border-bottom:var(--rail); /* genau EINE Linie, keine doppelte */
background:var(--panel);
font-size:12.5px;
}
.tools > .spacer{margin-left:auto}
.tools strong{font-weight:650}
/* ----------------------------------------------------- Eingabefelder */
input,select,textarea{
font:400 13px/1.3 var(--schrift);
color:var(--ink);
background:var(--bg);
border:1px solid var(--line);
border-radius:var(--radius);
padding:6px 9px;
box-shadow:var(--senke); /* eingelassen */
}
input[type=search]{min-width:230px}
textarea{line-height:1.45}
input:focus,select:focus,textarea:focus{
border-color:var(--accent);
box-shadow:0 0 0 3px var(--accent-soft);
outline:none;
}
label{color:var(--muted);font-size:12px}
/* -------------------------------------------------- Schaltflaechen */
button{
font:500 13px/1.3 var(--schrift);
color:var(--ink);
background:var(--panel);
border:1px solid var(--line);
border-radius:var(--radius);
padding:6px 12px;
cursor:pointer;
box-shadow:var(--platte); /* erhaben — Gegenstueck zum Feld */
transition:background-color .1s linear,border-color .1s linear;
}
button:hover{background:var(--bg);border-color:var(--accent)}
button.haupt{
background:var(--accent);border-color:var(--accent);
color:var(--knopf-ink);font-weight:600;
}
button.haupt:hover{background:var(--accent-ink);border-color:var(--accent-ink)}
button:disabled{opacity:.5;cursor:default;box-shadow:none}
.modus{display:inline-flex;border:var(--rail);border-radius:var(--radius);overflow:hidden}
.modus button{border:0;border-radius:0;box-shadow:none;background:var(--panel)}
.modus button + button{border-left:var(--rail)}
.modus button.on{background:var(--accent-soft);color:var(--accent-ink);font-weight:600}
/* ------------------------------------------------------ Tabellen
Waagerechte Haarlinien, KEINE senkrechten. Ein Vollgitter ueber
fuenfzehn Spalten und hunderte Zeilen ist optisch laut und rendert
Zehntausende Kanten. Die Spalten trennt die Ausrichtung. */
table{width:100%;border-collapse:collapse;font-size:13px}
th{
position:sticky;top:0;z-index:2;
text-align:left;
padding:10px 14px;
background:var(--panel);
color:var(--muted);
font:600 10px/1.3 var(--mono);
letter-spacing:.09em;text-transform:uppercase;
white-space:nowrap;
border-bottom:1.5px solid var(--ink);
}
td{
padding:9px 14px;
border-bottom:1px solid var(--line-soft);
vertical-align:top;
white-space:nowrap;
}
td.wrap,td[data-wrap]{white-space:normal}
tr:last-child td{border-bottom:0}
/* Anleuchten von links statt flaechig einfaerben */
tbody tr{transition:background-color .09s linear}
tbody tr:hover td{background:linear-gradient(90deg,var(--accent-soft),transparent 62%)}
tbody tr:hover td:first-child{box-shadow:inset var(--klemme) 0 0 0 var(--accent)}
/* Alles Messbare in gleichbreiten Ziffern mit geschlitzter Null */
.num,td.num,th.num{
text-align:right;
font-family:var(--mono);
font-variant-numeric:tabular-nums slashed-zero;
white-space:nowrap;
}
th.num{text-align:right}
/* Negative Betraege sind rot — beide Haken, damit keiner durchfaellt */
td.num.neg,td.num[data-vz="minus"]{color:var(--bad)}
/* --------------------------------------------------------- Kleinteile */
.muted{color:var(--muted)}
.mono{font-family:var(--mono);font-variant-numeric:tabular-nums slashed-zero}
/* Status ist immer eine Lampe, nie nur farbiger Text */
.pill{
display:inline-flex;align-items:center;gap:5px;
padding:2px 8px;
border-radius:var(--radius);
font:600 11px/1.5 var(--mono);
letter-spacing:.02em;
border:1px solid var(--line);
background:var(--bg);
color:var(--ink-2);
}
.pill::before{
content:"";width:5px;height:5px;border-radius:50%;
background:currentColor;flex:0 0 auto;
}
.pill.blocker{background:var(--bad-soft);color:var(--bad);border-color:var(--bad)}
.pill.warning{background:var(--warn-soft);color:var(--warn);border-color:var(--warn)}
.pill.info{background:var(--accent-soft);color:var(--accent-ink);border-color:var(--accent)}
.pill.gut{background:var(--ok-soft);color:var(--ok);border-color:var(--ok)}
.st-lampe{
display:inline-block;width:7px;height:7px;border-radius:50%;
background:var(--ok);box-shadow:0 0 0 2px var(--ok-soft);
}
.empty{
padding:48px 20px;text-align:center;color:var(--muted);font-size:13.5px;
}
.empty::before{
content:"";display:block;width:34px;height:34px;margin:0 auto 12px;
border:1px solid var(--line);border-radius:var(--radius);
background:var(--bg);box-shadow:var(--senke);
}
a,.clickable{
color:var(--accent-ink);text-decoration:none;cursor:pointer;
box-shadow:inset 0 -1px 0 var(--accent);
transition:background-color .1s linear;
}
a:hover,.clickable:hover{background:var(--accent-soft)}
td a{color:var(--accent-ink)}
.bar{height:6px;background:var(--accent);border-radius:0;min-width:2px}
.eintrag{padding:9px 0;border-bottom:1px solid var(--line-soft)}
.abzuege{color:var(--muted);font-size:12px}
/* Ablegezone fuer Dateien */
.ablage{
display:flex;align-items:center;justify-content:center;gap:10px;
margin:14px;padding:26px 18px;
border:1.5px dashed var(--line);
border-radius:var(--radius);
color:var(--muted);font-size:13px;
background:var(--bg);
}
.ablage.bereit{border-color:var(--accent);background:var(--accent-soft);color:var(--accent-ink)}
.ablage-zeichen{
font:400 20px/1 var(--mono);color:var(--accent);
}
.ablage-knopf{padding:5px 11px}
/* Ein einziger, zurueckhaltender Auftritt beim Laden. Mehr braucht
ein Werkzeug nicht, das man acht Stunden am Tag benutzt. */
@media (prefers-reduced-motion: no-preference){
#content > *{animation:auf .2s ease both}
}
@keyframes auf{from{opacity:0;transform:translateY(3px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion: reduce){*{transition:none !important;animation:none !important}}
@media (max-width:760px){
.cards{grid-template-columns:repeat(auto-fit,minmax(130px,1fr))}
.card .v{font-size:23px}
}
@media print{
body{background:#fff}
.tools,.ablage,.vs-hinter{display:none}
.panel{border:0;box-shadow:none}
}
/* -------------------------------------------------------- Kontomenue
Alles, was den eigenen Zugang betrifft, an EINER Stelle: Fassung,
Erscheinungsbild, Ansicht, Sicherheit, Abmelden. Vorher standen hier
elf Schaltflaechen nebeneinander — das war eine Werkzeugleiste, kein
Kopf. Ein Menue, das man kennt, schlaegt elf, die man suchen muss. */
.konto{position:relative}
.konto-knopf{
display:inline-flex;align-items:center;gap:9px;
padding:6px 11px 6px 9px;
background:var(--panel);border:1px solid var(--line);
border-radius:var(--radius);box-shadow:var(--platte);
cursor:pointer;font:500 12.5px/1.3 var(--schrift);color:var(--ink);
}
.konto-knopf:hover{border-color:var(--accent);background:var(--bg)}
.konto-knopf .zeichen{
width:22px;height:22px;border-radius:50%;
background:var(--accent);color:var(--knopf-ink);
font:600 10.5px/22px var(--mono);text-align:center;flex:0 0 auto;
}
.konto-knopf .pfeil{color:var(--muted);font-size:10px;margin-left:1px}
.konto-knopf .neu{
width:7px;height:7px;border-radius:50%;background:var(--warn);
box-shadow:0 0 0 3px var(--warn-soft);flex:0 0 auto;
}
.konto-menu{
position:absolute;right:0;top:calc(100% + 9px);z-index:60;
width:292px;padding:6px;
background:var(--panel);border:1px solid var(--line);
border-radius:var(--radius);
box-shadow:var(--schatten),0 0 0 1px var(--line-soft);
text-align:left;
}
.konto-menu[hidden]{display:none}
.konto-kopf{padding:9px 10px 10px;border-bottom:1px solid var(--line-soft)}
.konto-kopf .n{font-weight:650;font-size:13.5px;color:var(--ink)}
.konto-kopf .konto-rolle-satz{margin-top:3px;white-space:normal;line-height:1.3}
.konto-kopf .r{
color:var(--muted);font:500 10.5px/1.5 var(--mono);
letter-spacing:.07em;text-transform:uppercase;
}
.konto-abschnitt{padding:9px 10px 4px}
.konto-abschnitt > .t{
color:var(--muted);font:600 9.5px/1.4 var(--mono);
letter-spacing:.11em;text-transform:uppercase;margin-bottom:6px;
}
.konto-wahl{display:flex;flex-wrap:wrap;gap:4px}
.konto-wahl button{
padding:4px 9px;font-size:11.5px;font-weight:500;
border:1px solid var(--line);border-radius:var(--radius);
background:var(--panel);box-shadow:none;color:var(--ink-2);
}
.konto-wahl button:hover{border-color:var(--accent);background:var(--bg)}
.konto-wahl button.on{
background:var(--accent-soft);border-color:var(--accent);
color:var(--accent-ink);font-weight:650;
}
.konto-eintrag{
display:flex;align-items:center;gap:9px;width:100%;
padding:8px 10px;border:0;border-radius:var(--radius);
background:none;box-shadow:none;text-align:left;
font:500 12.5px/1.3 var(--schrift);color:var(--ink);cursor:pointer;
}
.konto-eintrag:hover{background:var(--accent-soft);color:var(--accent-ink)}
.konto-eintrag .k{
color:var(--muted);font:500 10.5px/1 var(--mono);margin-left:auto;
}
/* 0.37.0 (S2): Sprache im Kontomenü — Symbol wie die Piktogramme (Strich in currentColor), darunter drei Einträge mit
Fähnchen 20×14 (CH 14×14, die Symbole bringen ihre Füllung mit) und Name; der gewählte trägt ✓ in der Kürzelspalte. */
.konto-eintrag svg.ik{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;flex:none}
.konto-eintrag svg.fl{width:20px;height:14px;flex:none;border-radius:2px;box-shadow:0 0 0 1px var(--line-soft)}
.konto-eintrag svg.fl.quadrat{width:14px}
.konto-eintrag.konto-sprache.on{font-weight:650}
.konto-sprache-kopf,.konto-sprache-kopf:hover{cursor:default;background:none;color:var(--muted)}
.konto-trenner{height:1px;background:var(--line-soft);margin:5px 2px}
.konto-fassung{
display:flex;align-items:center;gap:8px;
padding:8px 10px;border-radius:var(--radius);
font:500 11.5px/1.4 var(--mono);color:var(--muted);
}
.konto-fassung.veraltet{
background:var(--warn-soft);color:var(--warn);cursor:pointer;
font-weight:650;
}
.konto-fassung.veraltet:hover{filter:brightness(.97)}
/* Die vier Zusatz-Erscheinungsbilder (Werkstatt, Bauplan, Tagwerk, Schalttafel)
sind mit Runde 1 (0.32.0, Entscheid Ivi 16.09.2026) entfallen. Es bleibt
«Schaltplan» hell und dunkel; ein gemerkter Schlüssel enerson.stil wird ignoriert. */
/* ====================================================================
STARTSEITE (Übersicht) — 0.35.0 «Verteiler» (Entwurf G + vier Stuecke aus F,
Ivi 19.09.2026: «G als Geruest plus vier Stuecke aus F, mach alles»).
Die Uebersicht ist der Verteiler des Betriebs: ein Beschriftungsstreifen
«Heute» mit KLEMMEN (gefuellt = etwas liegt an und ist ein Knopf; offener
Ring = nichts liegt an, kein Knopf), darunter die SAMMELSCHIENE (4 px,
Verlauf der vier Bereichsfarben) und vier ABGAENGE Auftrag / Service /
Zeit / Cloud, an deren Ader die Kennzahlen als Klemmen haengen. Keine
Kaesten, keine Schatten, keine Versalien, keine Mittelpunkt-Ketten (Skill
frontend-design); Farbe nur an Ader, Schiene, Klemme, Balken — Text in
Tinte. Schriften: Fira Sans 700 und Manrope (variabel 400–600) aus
/static/fonts (@font-face der Anmeldemaske weiter unten, kein base64);
die Buchungsliste bleibt in der Systemschrift.
Die fruehere Fassung (fuenf Karten .st-feld, Zustandstabelle data-zustand,
dringendstes() ohne Aufrufer) ist mit 0.35.0 entfallen.
==================================================================== */
.mono{font-family:var(--mono);font-variant-numeric:tabular-nums}
/* Ein Element traegt seinen Bereich in data-b; daraus --b (Ader/Klemme) und --l (Farbe auf der Nachtblau-Leiste). */
[data-b="auftrag"]{--b:var(--f-auftrag);--l:var(--l-auftrag)}
[data-b="service"]{--b:var(--f-service);--l:var(--l-service)}
[data-b="zeit"]{--b:var(--f-zeit);--l:var(--l-zeit)}
[data-b="cloud"]{--b:var(--f-cloud);--l:var(--l-cloud)}
[data-b="start"]{--b:var(--accent);--l:var(--l-start)}
.vt{padding:2px 0 0;font-family:var(--vt-text);color:var(--ink)}
/* Knoepfe im Cockpit sind Text auf der Flaeche — keine Platte, kein Rahmen (die Ader ist der Rahmen). */
.vt button{font:inherit;color:inherit;background:none;border:0;box-shadow:none;padding:0;text-align:left;cursor:pointer;border-radius:0;transition:none}
.vt button:hover{background:none;border-color:transparent}
/* Beschriftungsstreifen: Wochentag (Fira 700), Datum, Kalenderwoche — als getrennte Angaben, keine Mittelpunkte. */
.vt-streifen{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 26px;padding:6px 12px 12px 2px;
border-bottom:1px solid var(--line-soft);margin-bottom:18px}
.vt-tag{display:flex;align-items:baseline;gap:12px;white-space:nowrap}
.vt-tag b{font:700 19px/1.2 var(--vt-fira);color:var(--ink);letter-spacing:-.005em}
.vt-tag span{font:500 13px/1.2 var(--vt-text);color:var(--ink-2);font-variant-numeric:tabular-nums}
.vt-tag span + span{color:var(--muted)}
/* Klemmen (F): 13-px-Punkt in Bereichsfarbe mit 2-px-Ring = gefuellt (Knopf); Ring in --muted = leer (5.9:1 hell,
6.05:1 dunkel; --line haette 1.81:1). Warnfaelle (Frist, ohne Erfassung) im Warnton der Anwendung. */
.vt-hinweise{display:flex;flex-wrap:wrap;gap:6px 22px;margin-left:auto;font:500 13px/1.3 var(--vt-text)}
.vt-heute{display:inline-flex;align-items:center;gap:8px;padding:2px 0;color:var(--ink);font:inherit;font-variant-numeric:tabular-nums}
.vt-heute i{width:13px;height:13px;border-radius:50%;background:var(--b);box-shadow:0 0 0 2px var(--panel);flex:none}
.vt-heute b{font:700 15px/1 var(--vt-fira);color:var(--ink)}
.vt-heute.warn,.vt-heute.warn b{color:var(--warn)}
.vt-heute.leer{color:var(--muted);cursor:default}
.vt-heute.leer i{background:none;border:2px solid var(--muted);box-shadow:none}
button.vt-heute:hover > span{text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--b)}
button.vt-heute:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
/* Die Sammelschiene ist die Oberkante der Abgaenge (4 px, je Segment in Bereichsfarbe); die Ader (3 px) faellt
links aus dem Segment; Kennzahlen haengen als Klemmen daran. Kein Kasten, kein Radius, kein Schatten. */
.vt-abgaenge{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));margin:0 0 6px}
.vt-abgaenge[data-n="3"]{grid-template-columns:repeat(3,minmax(0,1fr))}
.vt-abgaenge[data-n="2"]{grid-template-columns:repeat(2,minmax(0,1fr))}
.vt-abgaenge[data-n="1"]{grid-template-columns:minmax(0,1fr)}
.vt-abgang{border-top:4px solid var(--b);border-left:3px solid var(--b);padding:10px 18px 14px 16px;min-width:0;
display:flex;flex-direction:column;gap:14px}
.vt-abgang h3{margin:0;font:700 15px/1.2 var(--vt-fira);color:var(--ink);letter-spacing:.005em}
.vt-abgang h3 .vt-titel{font:inherit;color:inherit}
.vt-abgang h3 button.vt-titel:hover{text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--b)}
.vt-abgang h3 button.vt-titel:focus-visible{outline:2px solid var(--b);outline-offset:3px}
.vt-abgang h3 small{display:block;font:500 11.5px/1.3 var(--vt-text);color:var(--muted);margin-top:2px;letter-spacing:0}
/* Klemme: Zahl + Wort; ein Querstrich verbindet mit der Ader. Leitzahl (hero) 44 px, Zweitzahl 26 px, klein 22 px. */
.vt-klemme{position:relative;display:block;width:100%;min-width:0;margin:0;color:var(--ink);font-family:var(--vt-text)}
.vt-klemme::before{content:"";position:absolute;left:-16px;top:.72em;width:10px;height:3px;background:var(--b)}
.vt-klemme b{display:block;font:700 26px/1.05 var(--vt-fira);color:var(--ink);font-variant-numeric:proportional-nums;letter-spacing:-.01em}
.vt-klemme b small{font:700 15px/1 var(--vt-fira);color:var(--ink-2);margin-left:3px}
.vt-klemme > .w{display:block;font:500 13px/1.35 var(--vt-text);color:var(--ink-2);margin-top:2px}
.vt-klemme > em{display:block;font:500 11.5px/1.35 var(--vt-text);font-style:normal;color:var(--muted);margin-top:1px}
.vt-klemme.hero b{font-size:44px;line-height:1;letter-spacing:-.02em}
.vt-klemme.hero::before{top:.5em}
.vt-klemme.hero > .w{font-size:14px;margin-top:4px;color:var(--ink)}
.vt-klemme.hero > em{font-size:12px}
.vt-klemme.klein b{font-size:22px}
.vt-klemme.warn b{color:var(--warn)}
.vt-klemme.vt-wort > .w{font-size:13.5px;color:var(--ink)}
button.vt-klemme:hover > .w{text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--b)}
button.vt-klemme:focus-visible{outline:2px solid var(--b);outline-offset:4px}
/* Verlaufsbalken: nur, wo eine Reihe vom Server kommt (C5). Balken <= 24 px, 2-px-Luecke, juengster betont,
Minus (Korrekturen) rot unter der Nulllinie. */
.vt-spark{display:block;width:100%;max-width:220px;height:34px;margin-top:8px;overflow:visible}
.vt-spark path{fill:var(--b);opacity:.42}
.vt-spark .jetzt{opacity:1}
.vt-spark .neg{fill:var(--bad);opacity:.9}
.vt-spark .null{stroke:var(--line);stroke-width:1}
.vt-klemme > .vt-achse{display:flex;justify-content:space-between;max-width:220px;font:400 10.5px/1.2 var(--vt-text);color:var(--muted);margin-top:2px}
.vt-klemme > .vt-legende{display:block;font:500 11px/1.3 var(--vt-text);color:var(--muted);margin-top:4px}
/* Zweitzahlen paarweise, wenn Platz ist */
.vt-paar{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.vt-paar .vt-klemme + .vt-klemme::before{display:none}
.vt-paar .vt-klemme:nth-child(2n+3)::before{display:block}
/* Liste an der Leitung (F): die juengsten Rapporte ohne Unterschrift — Nr., Betreff oder Objekt, Datum; 20-px-Zeilen. */
.vt-liste{display:block}
.vt-liste > span{display:block;font:500 13px/1.35 var(--vt-text);color:var(--ink-2);margin-bottom:3px}
.vt-liste button{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:8px;width:100%;height:20px;line-height:20px;
font:400 12px/20px var(--vt-text);color:var(--ink-2);align-items:center}
.vt-liste button .nr{font-weight:600;color:var(--ink);font-variant-numeric:tabular-nums}
.vt-liste button .tx{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.vt-liste button .dt{color:var(--muted);font-variant-numeric:tabular-nums}
.vt-liste button:hover .tx{text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--b)}
.vt-liste button.alle{display:block;height:auto;margin-top:4px;font:500 12px/1.4 var(--vt-text);color:var(--accent)}
.vt-liste button.alle:hover{text-decoration:underline;text-underline-offset:3px}
.vt-liste button:focus-visible{outline:2px solid var(--b);outline-offset:1px}
/* Buchungsliste darunter: Aufbau wie bisher (Klick → Zeiten), Titel in Satzschreibweise; Zeilen wie jedes Grid
(--zeile, 18 px) — GEMESSEN 19.09.2026: vorher 38.5 px ueber die allgemeine td-Regel (padding 9px 14px). */
.st-block{margin-top:24px}
.st-block h3{font:600 13px/1.3 var(--vt-text);letter-spacing:0;text-transform:none;color:var(--ink-2);margin:0 0 8px}
.st-block table{font-size:var(--schriftgrad);font-family:var(--schrift)}
.st-block th{height:var(--zeile);padding:0 8px;font:400 var(--schriftgrad)/1 var(--schrift);letter-spacing:0;text-transform:none;
background:var(--band);color:var(--ink-2);border-bottom:1px solid var(--line)}
.st-block td{height:var(--zeile);padding:0 8px;line-height:1.1;vertical-align:middle;border-bottom:1px solid var(--line-soft)}
.st-block tbody tr:hover td{background:var(--band)}
/* Schmaler Arbeitsplatz / iPad quer (1024): zwei Abgaenge je Reihe */
@media (max-width:1180px){
.vt-abgaenge,.vt-abgaenge[data-n="3"]{grid-template-columns:repeat(2,minmax(0,1fr))}
.vt-abgang:nth-child(n+3){margin-top:10px}
}
/* Handy und iPad hoch: das Schema kippt — Steigleitung links (4 px), Abgaenge nach rechts (3 px) */
@media (max-width:900px){
.vt-streifen{gap:6px 16px;padding:4px 8px 10px 2px;margin-bottom:14px}
.vt-hinweise{margin-left:0;gap:4px 16px}
.vt-abgaenge,.vt-abgaenge[data-n="3"],.vt-abgaenge[data-n="2"]{grid-template-columns:minmax(0,1fr);border-left:4px solid var(--line);margin-left:0}
.vt-abgang{border-top:3px solid var(--b);border-left:4px solid var(--b);margin:0 0 0 -4px;padding:8px 8px 14px 14px;gap:10px}
.vt-abgang:nth-child(n+3){margin-top:0}
.vt-abgang + .vt-abgang{margin-top:10px}
.vt-klemme::before{left:-14px}
.vt-klemme.hero b{font-size:38px}
.st-block table{font-size:12.5px}
}
/* iPad hoch (701–900): zwei je Reihe, ohne Steigleitung — die Hoehe ist im Hochformat der knappe Faktor (E6) */
@media (min-width:701px) and (max-width:900px){
.vt-abgaenge,.vt-abgaenge[data-n="3"],.vt-abgaenge[data-n="2"]{grid-template-columns:repeat(2,minmax(0,1fr));border-left:0;gap:12px 20px}
.vt-abgang,.vt-abgang + .vt-abgang{margin:0}
}
/* Telefon: Klemmen untereinander, volle Breite, › nur an gefuellten (F) */
@media (max-width:700px){
.vt-hinweise{flex-direction:column;align-items:stretch;gap:0;width:100%}
.vt-heute{position:relative;width:100%;min-height:34px;padding:5px 26px 5px 0}
button.vt-heute::after{content:"\203A";position:absolute;right:6px;top:50%;transform:translateY(-50%);font-size:18px;line-height:1;color:var(--muted)}
}
/* ------------------------------------------------- Planeraustausch
Die Datei des Planers nennt bei Katalogpositionen nur die Artikelnummer.
Ob eine Zeile erledigt ist, muss darum auf einen Blick sichtbar sein —
nicht in einer Spalte weit rechts, sondern an der Zeile selbst. */
.sia-kopf{display:flex;gap:26px;flex-wrap:wrap;align-items:flex-start;
padding:14px 16px;border-bottom:var(--rail)}
.sia-objekt{font:650 17px/1.25 var(--schrift)}
.sia-kopf-block{min-width:190px}
.sia-marke{font:600 10.5px/1.4 var(--mono);letter-spacing:.06em;
text-transform:uppercase;color:var(--muted);
border-left:var(--klemme) solid var(--accent);padding-left:7px;margin-bottom:3px}
.sia-stand{display:flex;gap:20px;flex-wrap:wrap;align-items:baseline;
padding:9px 16px;border-bottom:var(--rail);font-size:13px}
.sia-stand .sia-summe{margin-left:auto;font:700 15px/1 var(--schrift);
font-variant-numeric:tabular-nums}
.sia-hinweis{margin:0;padding:10px 16px;font-size:12.5px;line-height:1.5;
background:var(--warn-soft);color:var(--warn);border-bottom:var(--rail)}
.sia-rollbereich{overflow-x:auto}
.sia-tabelle{min-width:760px}
.sia-tabelle tr.sia-gruppe td{background:var(--bg);font-weight:650;
padding-top:9px;border-top:var(--rail)}
.sia-tabelle tr.sia-gruppe .mono{color:var(--muted);margin-right:9px}
.sia-tabelle tr.sia-offen td:first-child{box-shadow:inset var(--klemme) 0 0 var(--bad)}
.sia-flag{font:600 10.5px/1.6 var(--mono);padding:0 5px;border-radius:3px;
background:var(--line-soft);color:var(--muted);white-space:nowrap}
.sia-flag.bad{background:var(--bad);color:var(--knopf-ink)}
.sia-flag.warn{background:var(--warn);color:var(--knopf-ink)}
.sia-preis{width:88px;text-align:right;font:inherit;
font-variant-numeric:tabular-nums}
.sia-ok{padding:2px 8px;font-size:12px;border:1px solid var(--line);
background:transparent;color:inherit;border-radius:6px;cursor:pointer}
.sia-ok:hover{border-color:var(--accent)}
.sia-kandzelle{background:var(--bg);padding:10px 16px}
.sia-kandliste{display:flex;flex-direction:column;gap:6px}
.sia-kand{display:flex;gap:14px;align-items:center;flex-wrap:wrap;
padding:7px 10px;background:var(--panel);border:var(--rail);border-radius:7px}
.sia-kand-text{flex:1;min-width:200px;font-weight:600}
.sia-kand-zahlen{display:flex;gap:14px;flex-wrap:wrap;font-size:12.5px;
font-variant-numeric:tabular-nums}
.sia-kand button{padding:4px 11px;border:1px solid var(--line);
background:transparent;color:inherit;border-radius:7px;font:inherit;
font-size:12.5px;cursor:pointer}
.sia-kand button:hover{border-color:var(--accent);color:var(--accent)}
/* ------------------------------------------------------- Offerten
Der Editor ist EINE Seite: Kopf oben, das Zeilengitter als Baum, unten
links die Erfassung, unten rechts der Summenblock. NPK-Zeilen aus der
Planerdatei sind grau: Text und Nummer sind geschuetzt, nur Menge, Preis
und Montageart lassen sich aendern. Die markierte Zeile traegt die
Klemme links — dort greifen Alt+Pfeiltasten und „einfuegen nach". */
.off-kopfzeile{display:flex;gap:16px;align-items:flex-start;flex-wrap:wrap;
padding:14px 16px 10px;border-bottom:var(--rail)}
.off-titel{font:650 17px/1.3 var(--schrift)}
.off-schalter{margin-left:auto;display:flex;gap:6px}
.off-kopf{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
gap:14px 22px;padding:12px 16px;border-bottom:var(--rail)}
.off-block label{display:block;margin-bottom:7px}
.off-wert{color:var(--ink);font-size:13px;padding:3px 0}
.off-gitter{overflow:auto;max-height:62vh}
.off-tabelle th{position:sticky;top:0;z-index:1}
.off-tabelle td{vertical-align:top;white-space:normal}
.off-tabelle tr.off-glied td{background:var(--bg);font-weight:650;border-top:var(--rail)}
.off-tabelle tr.off-npk td{color:var(--muted)}
.off-tabelle tr.off-npk .off-txt{color:var(--ink-2)}
.off-tabelle tr.off-text td{font-style:italic}
.off-tabelle tr.off-mark td:first-child{box-shadow:inset var(--klemme) 0 0 var(--accent)}
.off-tabelle tr.off-mark td{background:var(--accent-soft)}
.off-tabelle tr:hover td{cursor:default}
.off-bez{min-width:260px;max-width:520px}
.off-ma{min-width:150px;max-width:260px;font-size:12.5px}
.off-akt{white-space:nowrap;text-align:right}
.off-klapp{padding:0 5px;border:0;background:transparent;color:var(--accent);
font-size:13px;cursor:pointer;line-height:1;box-shadow:none}
.off-mini{padding:1px 6px;font-size:12px;line-height:1.4;border:1px solid var(--line);
background:transparent;color:inherit;border-radius:4px;cursor:pointer;margin-left:2px;box-shadow:none}
.off-mini:hover{border-color:var(--accent);color:var(--accent)}
.off-zahl{width:84px;text-align:right;font-variant-numeric:tabular-nums;padding:3px 6px}
.off-eh{width:52px;padding:3px 6px}
.off-ohne{color:var(--bad)}
.off-unten{display:grid;grid-template-columns:1fr minmax(280px,360px);gap:16px;
padding:12px 16px;border-top:var(--rail);align-items:start}
.off-erf{display:grid;grid-template-columns:200px 1fr 300px;gap:8px;align-items:end;margin-bottom:6px}
.off-erf2{display:grid;grid-template-columns:100px 70px 110px 1fr 200px auto;gap:8px;align-items:end}
.off-erf label,.off-erf2 label{display:block}
.off-vs{margin-top:8px;padding:8px 10px;background:var(--bg);border:var(--rail);border-radius:6px;
display:flex;flex-direction:column;gap:6px}
.off-summen{padding:10px 12px;background:var(--bg);border:var(--rail);border-radius:6px;
font-variant-numeric:tabular-nums}
.off-sz{display:flex;justify-content:space-between;gap:12px;padding:3px 0}
.off-sz-fett{font-weight:700;border-top:1px solid var(--line);margin-top:4px;padding-top:6px;font-size:14px}
.off-textfeld{margin-bottom:14px}
/* Runde 3 (0.24.2): Sammelposition blau wie im bisherigen Programm, Details eingerueckt; Herleitung. */
.off-tabelle tr.off-sammel td{color:var(--sammel)}
.off-tabelle tr.off-sammel .off-txt{color:var(--sammel);font-weight:600}
.off-tabelle tr.off-detail td{color:var(--muted);font-size:12.5px;background:color-mix(in srgb,var(--bg) 60%,transparent)}
.off-stueck{border-collapse:collapse;margin-top:4px;font-size:11.5px}.off-stueck th,.off-stueck td{padding:2px 6px;border-bottom:1px solid var(--line)}
.off-herl{font-size:11px;color:var(--muted);font-family:var(--mono,monospace);white-space:normal;margin-top:2px}
.off-herl-knopf{font-size:10.5px;color:var(--accent);cursor:pointer;margin-left:4px}
.off-vs-preis{display:flex;gap:14px;flex-wrap:wrap;align-items:baseline}
.off-vs-preis label{display:inline-flex;gap:5px;align-items:baseline;cursor:pointer}
.off-vs-klar{font-size:12.5px}
.off-vs-fehl{color:var(--bad);font-size:12.5px}
.off-wahl{width:16px;height:16px;margin:0}
/* Steiger-Tarif (0.24.0): links der Suchbaum, rechts Liste oder Position. */
.stg{display:grid;grid-template-columns:minmax(240px,300px) minmax(0,1fr);gap:0;align-items:start}
/* I14 (0.33.1): dvh — mit eingeblendeter Safari-Leiste lag das Baumende sonst hinter der Statuszeile (D10); vh als Rückfall. */
.stg-baum{border-right:var(--rail);padding:8px 0;max-height:calc(100vh - 220px);max-height:calc(100dvh - 220px);overflow:auto;font-size:12.5px}
.stg-baum div.stg-k{padding:4px 10px;cursor:pointer;display:flex;gap:6px;align-items:baseline;white-space:nowrap}
.stg-baum div.stg-k:hover{background:var(--bg)}
.stg-baum div.stg-k.on{background:var(--accent-soft);color:var(--accent-ink);font-weight:600}
.stg-baum .stg-e2{padding-left:24px}
.stg-baum .stg-e3{padding-left:40px;color:var(--muted)}
.stg-baum .stg-n{margin-left:auto;color:var(--muted);font-variant-numeric:tabular-nums;font-weight:400}
.stg-baum .stg-pf{width:14px;display:inline-block;color:var(--muted)}
.stg-inhalt{min-width:0}
.stg-quelle{font-size:10.5px;color:var(--muted);border:1px solid var(--line);border-radius:4px;padding:0 4px;margin-left:6px;vertical-align:middle}
.stg-grau{color:var(--muted)}
.stg-kopf{padding:16px 14px 6px;display:flex;gap:14px;align-items:flex-start}
@media (max-width:900px){ .stg{grid-template-columns:1fr} .stg-baum{border-right:0;border-bottom:var(--rail);max-height:260px} }
@media (max-width:1100px){
.off-erf,.off-erf2{grid-template-columns:repeat(3,1fr)}
.off-unten{grid-template-columns:1fr}
}
/* ------------------------------------------------------ Belegvorschau
Der Browser bringt seinen eigenen PDF-Betrachter mit. Wir laden dafuer
keine Bibliothek und bauen keinen nach — der Rahmen zeigt unmittelbar
auf den Endpunkt, die Sitzung faehrt im Keks mit. */
.vs-hinter{position:fixed;inset:0;z-index:200;background:var(--schleier-stark);
display:flex;flex-direction:column;padding:min(4vh,32px) min(4vw,32px);
animation:vs-auf .13s ease-out}
@keyframes vs-auf{from{opacity:0}to{opacity:1}}
.vs-fenster{flex:1;min-height:0;display:flex;flex-direction:column;
background:var(--panel);border:var(--rail);border-radius:10px;
overflow:hidden;box-shadow:var(--schatten-gross)}
.vs-leiste{display:flex;align-items:center;gap:8px;flex-wrap:wrap;
padding:9px 12px;border-bottom:var(--rail)}
.vs-titel{font-weight:650;margin-right:auto;white-space:nowrap;
overflow:hidden;text-overflow:ellipsis;max-width:100%}
.vs-marke{font:500 11px/1.5 var(--mono);color:var(--muted);
border-left:var(--klemme) solid var(--accent);padding-left:7px}
.vs-leiste a,.vs-leiste button{padding:5px 11px;border:1px solid var(--line);
background:transparent;color:inherit;border-radius:7px;font:inherit;
font-size:13px;text-decoration:none;cursor:pointer;white-space:nowrap}
.vs-leiste a:hover,.vs-leiste button:hover{border-color:var(--accent)}
.vs-leiste button.zu{font-weight:600}
.vs-rahmen{flex:1;min-height:0;width:100%;border:0;background:var(--bg)}
/* ------------------------------------------------------ Artikelbilder
80-px-Vorschauen aus dem Artikelkatalog (Fassung 0.22.0). In Listen klein
neben der Nummer, in der Detailansicht in Originalgroesse, in der
Lightbox dreifach — mehr gibt die Quelle nicht her. Kein Bild: das ![]()
entfernt sich selbst (onerror), es bleibt kein Platzhalter stehen. */
.abild{height:30px;width:auto;max-width:44px;vertical-align:middle;margin-right:6px;
border-radius:3px;background:#fff;object-fit:contain;cursor:zoom-in;
border:1px solid var(--line)}
.abild-gross{height:80px;max-width:120px;margin:0;flex:none}
/* 0.38.0 (Runde 20): ein ![]()
ohne src wartet auf die Sammelabfrage (abildLaden) — bis dahin unsichtbar,
damit kein Rahmen ohne Bild aufblitzt. Das Layout springt beim Eintreffen wie bisher: ohne src ist das Bild 2 px breit
(Rahmen), mit einem 66×80-Bild 26.75 px (GEMESSEN 23.09.2026, Gegenlesen Runde 20) — keine Verschlechterung. */
.abild:not([src]){visibility:hidden}
/* I15 (0.33.0): abildMarke() setzt hinter die Nummer im Positionsgitter ein Strich-Symbol (eigenes SVG «i-bild»),
das nur am Handy (≤ 900 px, Regel im Handy-Block) sichtbar ist — dort ist die Miniatur seit K2 ausgeblendet und
der Bauführer (bild.sehen, kein artikel.lesen → keine Hilfespalte) hatte keinen Weg mehr zum Bild (Gegenlesen r6).
Das ![]()
bleibt am Handy als unsichtbares 1-px-Bild im Dokument, damit sein onerror weiterhin «kein Bild» meldet
und die Marke mitnimmt (abildWeg); display:none liesse ein loading=lazy-Bild nie laden. */
.abild-mark{display:none}
.lb-fenster{margin:auto;width:min(92vw,520px);display:flex;flex-direction:column;
background:var(--panel);border:var(--rail);border-radius:10px;overflow:hidden;
box-shadow:var(--schatten-gross)}
.lb-bild{display:flex;align-items:center;justify-content:center;padding:18px;
background:#fff;min-height:200px}
.lb-bild img{height:240px;width:auto;max-width:100%;object-fit:contain}
.lb-fuss{padding:8px 12px;font-size:11.5px;border-top:var(--rail)}
@media (max-width:560px){
.vs-hinter{padding:0}
.vs-fenster{border-radius:0;border:0}
.vs-titel{font-size:14px}
}
/* ====================================================================
ANMELDEMASKE «M — zweigeteilt» (0.34.2, Ivis Wahl 17.09.2026)
Vorlage: Startseite-Entwuerfe/M-geteilt.html (CSS/Struktur 1:1, nur mit
dem Praefix an- und auf die IDs der bisherigen Maske gelegt). Dunkel wie
die Startseite und UNABHAENGIG vom Hell/Dunkel-Modus der Anwendung: die
Maske bringt ihre eigenen --an-*-Tokens mit, einen Modusknopf gibt es
nicht mehr. Die Anwendung selbst bleibt hell (Papier).
Schriften: dieselben Dateien wie die Startseite (/static/fonts, CSP
font-src 'self'). Manrope ist eine VARIABLE Schrift (fvar/gvar in der
woff2, GEMESSEN 17.09.2026; die «600»-Datei ist byte-gleich mit der
«400»-Datei) — darum EINE Regel mit font-weight 400 600, sonst rendern
Kicker und Knoepfe in Regular.
==================================================================== */
/* 0.37.0 (S14/S15b): Subsets mit Latin Extended-A (č ć š ž đ) unter denselben Dateinamen — ?f=0370 macht den Cache-Schlüssel
neu, sonst zeigte ein Browser mit der gecachten 0.36er-Datei bis zur Revalidierung (≈ 10 h) die Ersatzschrift. */
@font-face{font-family:"Fira Sans";font-style:normal;font-weight:700;font-display:swap;src:url('/static/fonts/FiraSans-700.woff2?f=0370') format('woff2')}
@font-face{font-family:"Manrope";font-style:normal;font-weight:400 600;font-display:swap;src:url('/static/fonts/Manrope-400.woff2?f=0370') format('woff2')}
/* Ohne diese Regel ueberstimmt .an-feld{display:block} das hidden-Attribut
von #l_codezeile. Gilt fuer die ganze Anwendung — sie setzt hidden sonst
nur am Kontomenue und am Datei-Eingabefeld, beide ohnehin unsichtbar. */
[hidden]{display:none !important}
/* Solange die Maske steht, fuellt die Buehne den Bildschirm: Kopf und
Fusszeile der Anwendung weg (Block GERÜST), Platte ohne Rahmen, dunkler
Grund auch hinter dem Ueberrollen. Die Klasse setzt anmeldeMaske();
render(), passwortMaske() und einrichtungNoetig() nehmen sie weg. */
body.an-anmeldung{background:#05070f;background-image:none}
html:has(body.an-anmeldung){background:#05070f}
body.an-anmeldung #vorgabe .tools{display:none}
body.an-anmeldung main{min-height:100dvh;padding:0;display:block}
body.an-anmeldung main > .panel{background:none;border:0;box-shadow:none;overflow:visible;width:100%;padding:0;margin:0}
body.an-anmeldung main > .panel::before,
body.an-anmeldung main > .panel::after{display:none}
body.an-anmeldung #content{padding:0}
/* Kein Einblenden (#content > *{animation:auf}): die dunkle Buehne soll nicht aus dem hellen Grund auftauchen.
GEMESSEN 17.09.2026 im Harness: mit der Animation blieb das Bild je nach Zeitpunkt bei ~10 % Deckkraft haengen. */
#content > .an-buehne{animation:none}
/* ---------- Tokens (identisch mit der Startseite) ---------- */
.an-buehne{
--an-bg-master:#05070f; --an-bg-primary:#0b0a25; --an-bg-secondary:#16214c;
--an-accent:#2670ed; --an-accent-glow:#3a8cff; --an-accent-text:#5a9dff;
--an-link:#a6c8ff; --an-muted:#bcc4d2; --an-placeholder:#b8c0ce;
--an-text:#e6e9f2; --an-text-2:#aab3c2; --an-text-muted:#9aa3b2;
--an-glass-bg:rgba(255,255,255,.04); --an-glass-border:rgba(255,255,255,.08);
--an-feld-bg:rgba(255,255,255,.05); --an-feld-border:rgba(255,255,255,.14);
--an-bad:#ffb0b0; --an-bad-border:rgba(255,120,120,.38); --an-bad-bg:rgba(255,90,90,.08);
--an-ok:#7fd8a6;
--an-heading:"Fira Sans",sans-serif; --an-body:"Manrope",sans-serif;
--an-x:clamp(20px,5vw,80px); --an-container:1280px; --an-radius:12px;
position:relative; min-height:100dvh; display:flex; flex-direction:column;
background:var(--an-bg-master); color:var(--an-text);
font-family:var(--an-body); font-size:16px; line-height:1.6;
-webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
overflow-x:clip; text-align:left;
}
.an-buehne *,.an-buehne *::before,.an-buehne *::after{box-sizing:border-box}
.an-buehne a{color:inherit; text-decoration:none; box-shadow:none; background:none}
.an-buehne a:hover{background:none}
.an-buehne img,.an-buehne svg{display:block; max-width:100%}
.an-buehne img{height:auto}
.an-buehne button{font:inherit; color:inherit; background:none; border:0; cursor:pointer; box-shadow:none; padding:0; border-radius:0}
.an-buehne button:hover{background:none; border-color:transparent}
.an-buehne :focus-visible{outline:3px solid var(--an-accent-glow); outline-offset:3px; border-radius:6px; box-shadow:none}
.an-buehne p,.an-buehne h1,.an-buehne h2{margin:0}
.an-ext::after{content:"\2197"; font-size:.85em; margin-left:.3em; opacity:.8}
/* ---------- Buehne: Glow wie der Hero der Startseite ---------- */
.an-main{position:relative; flex:1 1 auto; display:flex; isolation:isolate; overflow:hidden}
.an-main::before{content:""; position:absolute; inset:0; z-index:-2; background:
radial-gradient(760px 560px at 92% 16%,rgba(58,140,255,.34),transparent 62%),
radial-gradient(1100px 700px at 80% 40%,rgba(38,112,237,.22),transparent 68%),
radial-gradient(700px 420px at 10% 100%,rgba(22,33,76,.9),transparent 70%),
linear-gradient(180deg,var(--an-bg-master) 0%,var(--an-bg-primary) 100%)}
.an-main::after{content:""; position:absolute; inset:0; z-index:-1; opacity:.35;
background-image:linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px);
background-size:64px 64px;
mask-image:radial-gradient(ellipse at 70% 40%,#000 20%,transparent 75%);
-webkit-mask-image:radial-gradient(ellipse at 70% 40%,#000 20%,transparent 75%)}
.an-container{width:100%; max-width:var(--an-container); margin:0 auto; padding:clamp(1.25rem,4vh,3rem) var(--an-x);
display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,440px); align-items:center; justify-content:space-between; gap:clamp(2rem,6vw,6rem)}
/* ---------- Linke Haelfte: Marke wie die Startseite ---------- */
.an-marke{max-width:58ch}
/* Logo auf weisser Platte — mit Praefix, sonst gewinnt der Reset .an-buehne a{background:none}
(GEMESSEN 17.09.2026 in der Live-Probe: Platte fehlte) */
.an-buehne .an-marke-logo,.an-buehne .an-marke-logo:hover{display:flex; width:max-content; align-items:center; padding:.5rem .85rem; border-radius:8px; background:#fff;
box-shadow:0 1px 0 rgba(255,255,255,.25),0 6px 20px rgba(0,0,0,.45); margin-bottom:2.25rem}
.an-marke-logo img{height:48px; width:auto}
.an-kicker{display:inline-block; font-size:.8125rem; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:var(--an-accent-text); margin-bottom:1rem}
.an-marke h1{font-family:var(--an-heading); font-weight:700; font-size:clamp(2.25rem,4.2vw,3.4rem); letter-spacing:-.02em; line-height:1.1; color:#fff; margin-bottom:1.25rem}
.an-lead{font-size:clamp(1rem,1.4vw,1.1875rem); line-height:1.65; color:var(--an-text-2); max-width:46ch}
/* ---------- Rechte Haelfte: Glas-Karte ---------- */
.an-karte-spalte{display:flex; flex-direction:column; align-items:stretch; gap:1.25rem; width:100%; max-width:440px; justify-self:end}
.an-klein-logo{display:none}
.an-karte{position:relative; background:var(--an-glass-bg); border:1px solid var(--an-glass-border); border-radius:var(--an-radius);
backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); padding:2rem;
box-shadow:0 24px 60px rgba(0,0,0,.45),inset 0 1px 0 rgba(255,255,255,.06)}
.an-karte::before{content:""; position:absolute; left:1.25rem; right:1.25rem; top:0; height:1px;
background:linear-gradient(90deg,transparent,rgba(58,140,255,.55),transparent); pointer-events:none}
.an-karte-kopf{display:flex; align-items:baseline; justify-content:space-between; gap:1rem; margin-bottom:1.5rem}
.an-karte h2{font-family:var(--an-heading); font-weight:700; font-size:1.75rem; letter-spacing:-.015em; line-height:1.1; color:#fff}
.an-karte h2 i{font-style:normal; color:var(--an-accent-glow)}
.an-schritt{font-size:.75rem; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:var(--an-muted); white-space:nowrap}
.an-buehne .an-karte-text{color:var(--an-muted); font-size:.9375rem; line-height:1.5; margin:0 0 1.125rem}
/* Meldung: ruhig, ein Rahmen, keine Icons. Bleibt IMMER im Baum (aria-live);
leer ist sie unsichtbar. */
.an-msg{display:none; border:1px solid var(--an-glass-border); background:rgba(255,255,255,.03); border-radius:8px;
padding:.75rem .9rem; font-size:.9375rem; line-height:1.45; margin:0 0 1.125rem; color:var(--an-text)}
.an-msg:not(:empty){display:block}
.an-msg--bad{border-color:var(--an-bad-border); background:var(--an-bad-bg); color:var(--an-bad)}
.an-msg--info{border-color:rgba(58,140,255,.35); background:rgba(58,140,255,.08); color:var(--an-text)}
.an-msg--wartet{color:var(--an-muted); border-color:transparent; background:none; padding-top:0; padding-bottom:0}
.an-msg p+p{margin-top:.25rem; color:var(--an-muted); font-size:.875rem}
.an-buehne .an-feld{display:block; margin-bottom:1.125rem; color:var(--an-text); font-size:1rem}
.an-lrow{display:flex; align-items:baseline; justify-content:space-between; gap:.75rem; margin-bottom:.4rem; min-height:1.3rem}
.an-buehne .an-lbl{font-size:.8125rem; font-weight:600; letter-spacing:.02em; color:var(--an-muted)}
.an-buehne .an-lrow a,.an-buehne .an-vergessen{font-size:.8125rem; font-weight:600; color:var(--an-link); border-bottom:1px solid transparent; line-height:1.3}
.an-buehne .an-lrow a:hover,.an-buehne .an-vergessen:hover{border-bottom-color:var(--an-accent-glow)}
.an-klemme{position:relative; display:flex; align-items:center}
/* Die Feldregeln der Anwendung (Senke, Rand, --bg) ausdruecklich zuruecknehmen */
.an-klemme input,.an-klemme input:focus,.an-klemme textarea,.an-klemme textarea:focus{
width:100%; height:44px; margin:0; padding:0 .875rem; font:inherit; font-size:1rem; color:var(--an-text);
background:var(--an-feld-bg); border:1px solid var(--an-feld-border); border-radius:6px; outline:none; box-shadow:none;
transition:border-color .15s,box-shadow .15s,background-color .15s; -webkit-appearance:none; appearance:none;
}
.an-klemme textarea,.an-klemme textarea:focus{height:auto; min-height:64px; padding:.55rem .875rem; line-height:1.45; resize:vertical}
.an-klemme input::placeholder,.an-klemme textarea::placeholder{color:var(--an-placeholder)}
.an-klemme input:focus,.an-klemme textarea:focus{border-color:var(--an-accent-glow); background:rgba(255,255,255,.06); box-shadow:0 0 0 3px rgba(58,140,255,.28)}
.an-klemme input[aria-invalid="true"]{border-color:rgba(255,120,120,.7); box-shadow:0 0 0 3px rgba(255,90,90,.18)}
.an-klemme input:focus-visible,.an-klemme textarea:focus-visible{outline:0}
.an-buehne .an-nebenknopf{position:absolute; right:.375rem; top:50%; transform:translateY(-50%); height:32px; min-width:44px; padding:0 .625rem;
font-size:.8125rem; font-weight:600; color:var(--an-link); border-radius:5px; background:rgba(58,140,255,.08); white-space:nowrap}
.an-buehne .an-nebenknopf:hover{background:rgba(58,140,255,.16); color:#fff}
.an-klemme input.an-hat-knopf{padding-right:5.5rem}
.an-klemme input[type="password"]{font-family:var(--an-body)}
/* Schritt 2: der Name steht fest — Punkt links, «aendern» rechts (wie .fest im Entwurf), das Feld
bleibt ein Eingabefeld (readOnly), damit Passwort-Manager Name und Passwort zusammen sehen. */
.an-feld.an-fest .an-klemme::before{content:""; position:absolute; left:.875rem; top:50%; transform:translateY(-50%);
width:7px; height:7px; border-radius:50%; background:var(--an-accent-glow); box-shadow:0 0 8px rgba(58,140,255,.8); pointer-events:none}
.an-feld.an-fest .an-klemme input,.an-feld.an-fest .an-klemme input:focus{
background:rgba(255,255,255,.025); border-color:var(--an-glass-border); box-shadow:none;
font-weight:600; padding-left:calc(.875rem + 7px + .6rem); text-overflow:ellipsis}
.an-feld.an-fest .an-klemme input[aria-invalid="true"]{border-color:rgba(255,120,120,.7)}
.an-feld.an-fest .an-klemme:has(input[aria-invalid="true"])::before{background:var(--an-bad)}
/* Code: sechs Ziffern, breit gesetzt */
.an-klemme input#l_code{font-size:1.375rem; letter-spacing:.32em; text-align:center; font-weight:600; font-variant-numeric:tabular-nums;
padding-left:calc(.875rem + .32em); text-transform:uppercase}
.an-buehne .an-hinweis{display:block; margin:.5rem 0 0; font-size:.8125rem; line-height:1.45; color:var(--an-muted)}
/* 0.35.2 (K1): Text nur fuer Screenreader (Hinweis am Passkey-Knopf) — gleiche Klemm-Technik wie .an-s1 .an-feld--pw */
.an-sr{position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip-path:inset(50%); white-space:nowrap; border:0}
/* Schritt 1: der Knopf «aendern» ist hidden — kein Platz dafuer freihalten */
.an-form.an-s1 #l_user{padding-right:.875rem}
.an-hinweis code{font-family:ui-monospace,Menlo,Consolas,monospace; font-size:.8125rem; color:var(--an-text); background:rgba(255,255,255,.06); padding:.05rem .3rem; border-radius:4px}
/* ---------- Knoepfe (wie «Anmelden» der Startseite) ---------- */
.an-buehne .an-btn{display:inline-flex; align-items:center; justify-content:center; gap:.5rem; width:100%; font-family:var(--an-body); font-size:.9375rem;
font-weight:600; line-height:1; letter-spacing:.01em; padding:.8125rem 1.75rem; border-radius:6px; border:1px solid transparent;
white-space:nowrap; min-height:48px; color:var(--an-text); background:none;
transition:background-color .15s ease-out,border-color .15s ease-out,color .15s ease-out,transform .15s ease-out,box-shadow .15s ease-out}
.an-buehne .an-btn:active{transform:translateY(1px)}
.an-btn svg{width:16px; height:16px; flex:none}
.an-buehne .an-btn-primary,.an-buehne .an-btn-primary:hover{background:linear-gradient(135deg,var(--an-accent) 0%,#1a5fd4 100%); border-color:var(--an-accent); color:#fff;
box-shadow:0 4px 20px rgba(38,112,237,.35),inset 0 1px 0 rgba(255,255,255,.15)}
.an-buehne .an-btn-primary:hover{background:linear-gradient(135deg,var(--an-accent) 0%,#1e64dc 100%); border-color:var(--an-accent-glow);
box-shadow:0 6px 28px rgba(38,112,237,.5),inset 0 1px 0 rgba(255,255,255,.2); transform:translateY(-1px)}
.an-buehne .an-btn-glas,.an-buehne .an-btn-glas:hover{background:rgba(255,255,255,.04); border-color:rgba(255,255,255,.16); color:var(--an-text); margin-top:.75rem}
.an-buehne .an-btn-glas:hover{background:rgba(255,255,255,.08); border-color:rgba(255,255,255,.28)}
.an-btn-glas svg{color:var(--an-accent-glow)}
.an-trenner{display:flex; align-items:center; gap:.75rem; margin:1rem 0 0; font-size:.75rem; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:var(--an-muted)}
.an-trenner::before,.an-trenner::after{content:""; flex:1; height:1px; background:var(--an-glass-border)}
/* ---------- Formular als Raster, wie seit 13.09.2026: «Passwort vergessen?» steht im DOM HINTER dem
Anmeldeknopf (Tab: Passwort → Anzeigen → Anmelden → Link) und wird per Grid in die Beschriftungszeile
des Passwortfelds gehoben. ---------- */
.an-form{display:grid; grid-template-columns:1fr; position:relative}
.an-form #l_msg{grid-row:1; grid-column:1}
.an-form .an-feld--user{grid-row:2; grid-column:1}
.an-form .an-feld--pw{grid-row:3; grid-column:1}
.an-form #l_codezeile{grid-row:4; grid-column:1}
.an-form #l_go{grid-row:5; grid-column:1}
.an-form .an-vergessen{grid-row:3; grid-column:1; justify-self:end; align-self:start; margin-top:.05rem}
.an-form #an_passkeyblock{grid-row:6; grid-column:1}
/* Zwei Schritte (A3, 0.34.0): Schritt 1 (.an-s1) zeigt nur den Anmeldenamen; Passwortfeld und «Passwort
vergessen?» bleiben im DOM und im selben Formular (Passwort-Manager sehen username + current-password
zusammen), sind aber nur visuell verborgen — NICHT display:none. Tastatur/Screenreader: tabIndex=-1 und
aria-hidden (JS, anSchritt). Der Passkey-Block ist ein Knopf, kein Feld — er darf hidden sein. */
.an-form.an-s1 .an-feld--pw,.an-form.an-s1 .an-vergessen{
position:absolute; width:1px; height:1px; min-width:0; min-height:0; margin:0; padding:0; overflow:hidden;
clip-path:inset(50%); opacity:0; pointer-events:none;
}
.an-form.an-s1 .an-feld--pw input,.an-form.an-s1 .an-feld--pw .an-nebenknopf{width:1px; min-width:0; height:1px; padding:0}
/* Zweite Stufe offen: der Passkey-Knopf tritt zurueck (wie im Entwurf, Zustand «code») */
.an-form.an-code #an_passkeyblock{display:none}
/* Z1 (0.34.3, Ivi 17.09.2026): die zweite Stufe ist ein EIGENER Schritt 3 — nur das Code-Feld ist zu sehen.
Mit drei sichtbaren Feldern fuellten Passwort-Manager den Einmalcode ins Passwortfeld oder das Passwort in den
Code. Name und Passwort bleiben im selben