/* Oberflaeche des Alform-Cockpits.
 *
 * Herkunft
 * --------
 * Farben, Markenfarbe und Statusfarben stammen aus docs/demo/index.html --
 * dem Cockpit aus dem Verkaufsgespraech. Der Kunde soll dasselbe Produkt
 * wiedererkennen, deshalb ist die Farbtafel unveraendert uebernommen und
 * bleibt es auch. Aendere hier keine Farbwerte, ohne dass es ausdruecklich
 * verlangt wurde.
 *
 * Was in diesem Durchgang neu ist
 * -------------------------------
 * Abstaende, Radien, Schriftgroessen und Zustaende. Die Demo war fuer eine
 * Bildschirmuebertragung gebaut: eng, kleinteilig, viele Rahmen. Fuer
 * taegliches Arbeiten braucht es Luft, groessere Schrift und Flaechen
 * statt Rahmen. Der Charakter bleibt: dunkel, technisch, Alform-Rot als
 * Akzent.
 *
 * Regeln fuer alles, was hier dazukommt
 * -------------------------------------
 * 1. Abstaende ausschliesslich aus der Skala --sp-1 bis --sp-7.
 * 2. Radien ausschliesslich aus --r-panel, --r-ctl, --r-pill.
 * 3. Uebergaenge nur auf Farbe und Flaeche, 120 ms. Nichts bewegt sich,
 *    nichts aendert seine Groesse -- laufende Bewegung zieht den Blick ab.
 * 4. Jedes bedienbare Element hat einen sichtbaren Fokusring.
 * 5. Pro Ansicht traegt genau eine Aktion .primary. Der Rest ist ruhig.
 */

:root{
  /* ==========================================================
   * Grundfarben -- die Palette
   * ----------------------------------------------------------
   * Rohwerte, sonst nichts. Eine Ansicht benutzt hier NIE etwas
   * direkt; sie kennt nur die Rollenfarben weiter unten. Der Grund
   * ist das helle Thema: "Flaeche" heisst dort ein anderer Wert,
   * die Bedeutung bleibt dieselbe. Wer im Blatt eine Farbe direkt
   * schreibt, haengt sie an ein Thema.
   * ========================================================== */

  /* Dunkle Reihe */
  --c-ink-950:#101315;
  --c-ink-900:#171b1f;
  --c-ink-850:#1c2126;
  --c-ink-800:#22282e;
  --c-ink-700:#272d33;
  --c-ink-600:#343c44;
  --c-ink-500:#5f686f;               /* Rahmen an Bedienelementen, 3,1:1 */
  --c-ink-300:#7d8790;               /* 4,7:1 auf Panel -- vorher 3,5:1 */
  --c-ink-200:#8b959d;
  --c-ink-100:#b3bcc3;
  --c-ink-050:#dfe4e8;

  /* Helle Reihe -- warmes Off-White, keine kalten Graustufen.
     Papier, nicht Bildschirm. */
  --c-paper-050:#f7f5f1;
  --c-paper-000:#ffffff;
  --c-paper-200:#ded8cd;
  --c-paper-300:#c8c0b2;
  --c-paper-400:#98907f;             /* Rahmen an Bedienelementen, 3,0:1 */
  --c-slate-900:#1e2429;
  --c-slate-600:#4a5560;
  --c-slate-500:#5b6570;
  --c-slate-400:#66707b;

  /* Alform-Markenfarbe, ausgelesen aus assets/alform-logo-icon.png:
     #D01319 stellt 15,5 % der deckenden Pixel (Rest weiss), H358 S83% L45%.
     Auf hellem Grund traegt sie selbst (5,5:1 auf Weiss), auf dunklem
     braucht sie die aufgehellte Fassung. */
  --c-brand:#d01319;
  --c-brand-light:#ef5055;
  --c-brand-lighter:#f16267;
  --c-brand-dark:#8f0d11;

  /* Statusfarben, bewusst getrennt von der Markenfarbe. Je Thema ein
     eigener Wert: die dunklen Toene verschwinden auf Weiss, die hellen
     leuchten auf Schwarz. */
  --c-steel:#6f96a8;
  --c-steel-deep:#35657c;
  --c-ok:#63a173;
  --c-ok-deep:#1f7a45;
  --c-warn:#c19a4b;
  --c-warn-deep:#8a6410;

  /* Zeichnungsvergleich: Papier und Tusche. Themenunabhaengig -- eine
     Zeichnung ist auf Papier gedruckt, egal wie das Cockpit aussieht. */
  --c-drawing-paper:#f2f1ed;
  --c-drawing-ink:#1b1f23;
  --c-drawing-tag:#e6e9ec;

  /* Redline "wird entfernt" -- bewusst NICHT die Markenfarbe,
     damit Marke und Streichung nicht verwechselt werden */
  --c-mark:#c0198f;
  --c-mark-light:#e158b4;

  /* Durchscheinende Fassungen. Ausgeschrieben und nicht aus der Grundfarbe
     gerechnet: relative Farbangaben (rgb(from ...)) kennt nicht jeder
     Browser, und ohne Bauschritt faengt sie niemand ab. Ein stiller
     Ausfall hiesse: jede eingefaerbte Flaeche waere ploetzlich durchsichtig. */
  --c-brand-a13:rgba(208,19,25,.13);
  --c-brand-a09:rgba(208,19,25,.09);
  --c-brand-a55:rgba(208,19,25,.55);
  --c-brand-a45:rgba(208,19,25,.45);
  --c-ok-a13:rgba(99,161,115,.13);
  --c-ok-deep-a10:rgba(31,122,69,.10);
  --c-warn-a13:rgba(193,154,75,.13);
  --c-warn-deep-a10:rgba(138,100,16,.10);
  --c-steel-a12:rgba(111,150,168,.12);
  --c-steel-deep-a10:rgba(53,101,124,.10);
  --c-shadow-dark:rgba(0,0,0,.32);
  --c-shadow-dark-2:rgba(0,0,0,.30);
  --c-shadow-dark-3:rgba(0,0,0,.85);
  --c-shadow-light:rgba(31,29,26,.09);
  --c-shadow-light-2:rgba(31,29,26,.10);
  --c-shadow-light-3:rgba(31,29,26,.35);
  --c-veil-light:rgba(255,255,255,.035);
  --c-veil-dark:rgba(0,0,0,.035);

  /* ==========================================================
   * Masse, Schrift, Zeit -- ohne Thema, in beiden gleich
   * ========================================================== */

  --mono:"SFMono-Regular",Menlo,Consolas,"Liberation Mono",monospace;
  --sans:"Inter","Segoe UI",-apple-system,BlinkMacSystemFont,Roboto,Helvetica,Arial,sans-serif;

  /* --- Abstandsskala ---------------------------------------------------
   * Sieben Stufen, mehr braucht diese Oberflaeche nicht. Wer einen Wert
   * dazwischen vermisst, hat meistens die falsche Stufe gewaehlt. */
  --sp-1:4px;
  --sp-2:8px;
  --sp-3:12px;
  --sp-4:16px;
  --sp-5:24px;
  --sp-6:32px;
  --sp-7:48px;

  /* --- Radien ----------------------------------------------------------
   * Drei Groessen, an der Bauteilgroesse ausgerichtet: Flaechen weich,
   * Bedienelemente knapper, Etiketten rund. */
  --r-panel:8px;                   /* Panel, Karte, Kasten */
  --r-ctl:6px;                     /* Knopf, Eingabefeld, Navigationszeile */
  --r-pill:999px;                  /* Badge, Pille */

  --t:120ms;                       /* einzige Uebergangsdauer */
  --topbar-h:64px;                 /* Kopfleiste -- auch die Meldungen haengen daran */

  /* Themenunabhaengige Rollen */
  --paper:var(--c-drawing-paper);
  --ink:var(--c-drawing-ink);
  --ink-tag:var(--c-drawing-tag);
}

/* ==========================================================
 * Rollenfarben -- dunkles Thema
 * ----------------------------------------------------------
 * Die Vorgabe. Sie gilt auch fuer data-theme="system", solange das
 * Skript im <head> nicht dazugekommen ist -- ohne JavaScript bleibt
 * es also dunkel, und das ist der harmlosere der beiden Fehler.
 * ========================================================== */
:root,
:root[data-theme="dark"],
:root[data-theme="system"]{
  /* Sagt dem Browser, wie die Oberflaeche gemeint ist. Damit kommen
     Datumswaehler, Aufklappmenues und Rollbalken des Systems passend --
     sonst leuchtet mitten in der Ansicht ein weisser Kalender. */
  color-scheme:dark;

  --bg:var(--c-ink-950);           /* Flaeche */
  --panel:var(--c-ink-900);        /* Flaeche, erhoben */
  --panel-2:var(--c-ink-850);      /* Flaeche, eine Stufe hoeher */
  --panel-3:var(--c-ink-800);      /* Flaeche, ausgewaehlt */
  --line:var(--c-ink-700);         /* Linie */
  --line-2:var(--c-ink-600);       /* Linie, deutlicher */
  /* Rahmen an Bedienelementen. Eine eigene Rolle, weil ein Eingabefeld
     erkennbar sein MUSS (3:1), ein Tabellentrenner aber leise bleiben
     soll -- mit einem Wert fuer beides wird eines von beiden falsch. */
  --line-control:var(--c-ink-500);
  --text:var(--c-ink-050);         /* Text */
  --text-2:var(--c-ink-100);       /* Text, ruhiger */
  --muted:var(--c-ink-200);        /* Text, gedaempft */
  --dim:var(--c-ink-300);          /* Text, Nebenangabe */

  --accent:var(--c-brand);              /* Akzent, als Flaeche */
  --accent-2:var(--c-brand-light);      /* Akzent auf Flaeche, als Text */
  --accent-hover:var(--c-brand-lighter);
  --accent-pressed:var(--c-brand-dark);
  --on-accent:var(--c-paper-000);       /* Text auf der Akzentflaeche */
  --accent-soft:var(--c-brand-a13);
  --accent-line:var(--c-brand-a55);

  --danger:var(--c-brand);              /* Fehler -- dieselbe Farbe, */
  --danger-2:var(--c-brand-light);      /* eigene Rolle: Marke und Fehler */
  --danger-soft:var(--c-brand-a13);     /* koennen auseinandergehen */

  --ok:var(--c-ok);
  --ok-soft:var(--c-ok-a13);
  --warn:var(--c-warn);
  --warn-soft:var(--c-warn-a13);
  --steel:var(--c-steel);
  --steel-soft:var(--c-steel-a12);
  --mark:var(--c-mark);
  --mark-text:var(--c-mark-light);

  /* Schatten gehoert zum Thema: der harte schwarze Schlagschatten sieht
     auf hellem Grund nach Schmutz aus. */
  --shadow-1:0 1px 2px var(--c-shadow-dark);
  --shadow-2:0 2px 6px var(--c-shadow-dark-2),0 16px 40px -24px var(--c-shadow-dark-3);
  /* Aufhellung fuer die Zeile unter dem Mauszeiger. Als Bild und nicht
     als Farbe, damit sie sich ueber JEDEN Zeilenhintergrund legt --
     auch ueber die eingefaerbten Arbeitszeilen. */
  --hover-veil:linear-gradient(var(--c-veil-light),var(--c-veil-light));
  --focus:var(--c-brand-light);
}

/* ==========================================================
 * Rollenfarben -- helles Thema
 * ----------------------------------------------------------
 * Warmes Off-White als Grund, Weiss fuer alles Erhobene: dann liegt
 * das Panel VOR dem Hintergrund und nicht daneben. Statusfarben in
 * dunkleren Fassungen -- die Toene des dunklen Themas haben auf Weiss
 * keine 3:1 und waeren als Beschriftung unlesbar.
 * ========================================================== */
:root[data-theme="light"]{
  color-scheme:light;

  --bg:var(--c-paper-050);
  --panel:var(--c-paper-000);
  --panel-2:var(--c-paper-050);
  --panel-3:var(--c-paper-200);
  --line:var(--c-paper-200);
  --line-2:var(--c-paper-300);
  --line-control:var(--c-paper-400);
  --text:var(--c-slate-900);       /* 15,7:1 auf Weiss */
  --text-2:var(--c-slate-600);     /*  7,6:1 */
  --muted:var(--c-slate-500);      /*  5,9:1 */
  --dim:var(--c-slate-400);        /*  5,0:1 */

  /* Auf hellem Grund traegt die Markenfarbe selbst -- 5,5:1 auf Weiss,
     als Text wie als Flaeche mit weisser Schrift. */
  --accent:var(--c-brand);
  --accent-2:var(--c-brand);
  --accent-hover:var(--c-brand-dark);
  --accent-pressed:var(--c-brand-dark);
  --on-accent:var(--c-paper-000);
  --accent-soft:var(--c-brand-a09);
  --accent-line:var(--c-brand-a45);

  --danger:var(--c-brand);
  --danger-2:var(--c-brand);
  --danger-soft:var(--c-brand-a09);

  --ok:var(--c-ok-deep);
  --ok-soft:var(--c-ok-deep-a10);
  --warn:var(--c-warn-deep);
  --warn-soft:var(--c-warn-deep-a10);
  --steel:var(--c-steel-deep);
  --steel-soft:var(--c-steel-deep-a10);
  --mark:var(--c-mark);
  --mark-text:var(--c-mark);

  --shadow-1:0 1px 2px var(--c-shadow-light);
  --shadow-2:0 2px 6px var(--c-shadow-light-2),0 16px 40px -24px var(--c-shadow-light-3);
  /* Auf Weiss verdunkelt der Schleier, statt aufzuhellen. */
  --hover-veil:linear-gradient(var(--c-veil-dark),var(--c-veil-dark));
  --focus:var(--c-brand);
}
/* ==========================================================
 * Grundlagen
 * ========================================================== */

*{box-sizing:border-box}
/* Das hidden-Attribut muss gewinnen. Eine eigene display-Regel schlaegt
   sonst die des Browsers -- und die Einblendung stuende dauerhaft offen,
   ohne dass man ihr ansieht, warum. */
[hidden]{display:none !important}
html,body{height:100%}
body{
  margin:0;background:var(--bg);color:var(--text);
  font-family:var(--sans);font-size:14.5px;line-height:1.55;
  -webkit-font-smoothing:antialiased;
  /* Erblich: gilt fuer jede Rollflaeche der Seite. Der helle Systembalken
     ist auf dunklem Grund sonst das Auffaelligste am Bildschirm. */
  scrollbar-width:thin;scrollbar-color:var(--line-2) transparent;
}
button{font-family:inherit;font-size:inherit;color:inherit}

/* Groessenstufen. Der Sprung zwischen zwei Ebenen muss man sehen, ohne
   zu vergleichen -- sonst tragen die Ueberschriften keine Gliederung. */
h1,h2,h3,h4{margin:0;font-weight:600}
h1{font-size:26px;letter-spacing:-.01em}
h2{font-size:22px;letter-spacing:-.01em}
h3{font-size:17px;letter-spacing:.005em}
h4{font-size:15px;letter-spacing:.01em}

a{color:var(--accent-2);text-decoration:none}
a:hover{text-decoration:underline}
a.plain{color:inherit}

/* Fokus: EIN Ring fuer alles Bedienbare. Wer mit der Tastatur arbeitet,
   muss jederzeit sehen, wo er steht -- auch auf einem Knopf in der
   Markenfarbe, deshalb der aufgehellte Ton und ein Abstand zum Rand. */
:focus-visible{
  outline:2px solid var(--focus);
  outline-offset:2px;
}

/* Uebergaenge: nur Farbe und Flaeche. Keine Groesse, keine Bewegung. */
.btn,.nav a,.badge,.msg,.kpi,
input,select,textarea,
tbody tr,tbody tr>td{
  transition:
    background-color var(--t) ease,
    background-image var(--t) ease,
    border-color var(--t) ease,
    color var(--t) ease,
    box-shadow var(--t) ease;
}

/* ==========================================================
 * Geruest
 * ========================================================== */

.app{display:grid;grid-template-columns:240px 1fr;min-height:100vh}

.sidebar{
  background:var(--panel);border-right:1px solid var(--line);
  display:flex;flex-direction:column;position:sticky;top:0;height:100vh;
}
.brand{padding:var(--sp-5);border-bottom:1px solid var(--line)}
/* Das Logo von Alform ist eine QUADRATISCHE rote Kachel mit weisser
   Zeichnung -- es bringt seinen Untergrund mit und traegt deshalb auf
   hellem wie auf dunklem Thema. Der frueher noetige Filter (die alte
   Fassung war eine weisse Zeichnung auf Durchsichtigem und auf Weiss
   unsichtbar) ist damit ersatzlos entfallen.

   Hoehe UND Breite werden gesetzt: bei width:auto reserviert der
   Browser vor dem Laden keinen Platz, und das Seitenleistenmenue
   springt beim ersten Aufruf. Quadratisch heisst beide gleich. */
.brand .logo{display:block;height:40px;width:40px;margin-bottom:var(--sp-3);image-rendering:auto}
.brand .name{font-size:15px;font-weight:600;letter-spacing:.06em}
.brand .claim{
  margin-top:var(--sp-2);font-size:8.5px;line-height:1.75;color:var(--dim);
  letter-spacing:.19em;text-transform:uppercase;
}
.brand .sub{margin-top:var(--sp-2);font-size:12px;color:var(--dim);letter-spacing:.04em}

.nav{padding:var(--sp-3) var(--sp-3);display:flex;flex-direction:column;gap:var(--sp-1)}
/* Der aktive Eintrag ist keine Schachtel, sondern eine leicht angehobene
   Flaeche mit farbiger Kante links. Ein Rahmen ringsum wirkt wie ein
   Knopf, der gedrueckt bleibt. */
.nav a{
  display:flex;align-items:center;gap:var(--sp-3);width:100%;
  background:none;border:0;padding:var(--sp-2) var(--sp-3);cursor:pointer;
  color:var(--text-2);border-radius:var(--r-ctl);text-decoration:none;
}
.nav a:hover{background:var(--panel-2);color:var(--text);text-decoration:none}
.nav a.active{
  background:var(--panel-3);color:var(--text);
  box-shadow:inset 2px 0 0 var(--accent);
}
.nav a.active .num{color:var(--accent-2);border-color:var(--accent-line)}
.nav .num{
  font-family:var(--mono);font-size:10.5px;color:var(--dim);
  border:1px solid var(--line-2);border-radius:var(--r-ctl);
  width:20px;height:20px;display:grid;place-items:center;flex:none;
}
.nav .label{font-size:13.5px;letter-spacing:.02em}

.sidefoot{
  margin-top:auto;padding:var(--sp-4) var(--sp-5);
  border-top:1px solid var(--line);font-size:12px;color:var(--dim);
}
.sidefoot .row{display:flex;align-items:center;gap:var(--sp-2);margin-bottom:var(--sp-2)}
.sidefoot .row:last-child{margin-bottom:0}
.dot{width:6px;height:6px;border-radius:var(--r-pill);background:var(--ok);flex:none}
.dot.idle{background:var(--dim)}

.main{display:flex;flex-direction:column;min-width:0}
.topbar{
  position:sticky;top:0;z-index:20;background:var(--panel);border-bottom:1px solid var(--line);
  display:flex;align-items:center;gap:var(--sp-4);padding:0 var(--sp-6);height:var(--topbar-h);
}
.topbar .title{font-size:15px;font-weight:600;letter-spacing:.02em;white-space:nowrap}
.topbar .crumb{
  font-size:12.5px;color:var(--dim);font-family:var(--mono);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.topbar .spacer{flex:1}

.view{display:none;padding:var(--sp-6) var(--sp-6) var(--sp-7);max-width:1560px}
.view.active{display:block}

.viewhead{margin-bottom:var(--sp-5)}
.viewhead p{margin:var(--sp-2) 0 0;color:var(--muted);font-size:13.5px;max-width:78ch}

/* ==========================================================
 * Flaechen: Panel, Kennzahl, Kopfdaten
 * ========================================================== */

.panel{
  background:var(--panel);border:1px solid var(--line);border-radius:var(--r-panel);
  padding:var(--sp-5);box-shadow:var(--shadow-1);
}
.panel-h{
  display:flex;align-items:center;gap:var(--sp-3);margin:0 0 var(--sp-4);
  font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);font-weight:600;
}
.panel-h .rule{flex:1;height:1px;background:var(--line)}
/* Verweis in der Kapitelzeile ("alle", "Betrieb"). Er gehoert zur
   Beschriftung und nicht zum Inhalt -- in der Markenfarbe zoege er den
   Blick vom Eigentlichen ab. */
.panel-h a{color:var(--text-2)}
.panel-h a:hover{color:var(--accent-2)}

.kpis{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:var(--sp-4);margin-bottom:var(--sp-5);
}
.kpi{
  background:var(--panel);border:1px solid var(--line);border-radius:var(--r-panel);
  padding:var(--sp-4) var(--sp-5);box-shadow:var(--shadow-1);
}
.kpi .k{font-size:11.5px;letter-spacing:.09em;text-transform:uppercase;color:var(--muted)}
.kpi .v{font-family:var(--mono);font-size:26px;line-height:1.2;margin-top:var(--sp-2);letter-spacing:-.02em}
.kpi .n{font-size:12.5px;color:var(--dim);margin-top:var(--sp-1)}
.kpi .v.up{color:var(--ok)}
/* Zeitstempel als Kennzahl: dieselbe Zeile, aber eine Groesse kleiner --
   ein Datum in 26px liest sich wie ein Umsatz. */
.kpi .v.klein{font-size:17px;letter-spacing:0}

/* Eine Zeile unter dem Haupttext: die Begruendung der Bilderkennung und
   der Vermerk "nicht entfernbar" in der Freigabeliste. Kleiner, damit
   der Blick zuerst auf dem gefundenen Text bleibt. */
.klein{font-size:12px;line-height:1.35}

/* Kopfdaten eines Vorgangs.
 * Bewusst flex und nicht grid: bei ungerader Feldzahl bliebe im Raster
 * hinter dem letzten Feld ein leeres Fach stehen -- das sah aus wie ein
 * vergessener Wert. So verteilt sich die letzte Reihe auf die Breite.
 * Die Trennlinien liegen an den Feldern und ruecken per negativem
 * Aussenabstand aufeinander, damit sie nicht doppelt stehen. */
.det-head{
  display:flex;flex-wrap:wrap;background:var(--panel);
  border:1px solid var(--line);border-radius:var(--r-panel);
  overflow:hidden;margin-bottom:var(--sp-5);box-shadow:var(--shadow-1);
}
/* Nur die Felder selbst -- ohne den Kindselektor bekaemen auch die
   Beschriftung und der Wert darin einen Rahmen. */
.det-head > div{
  flex:1 1 180px;min-width:0;padding:var(--sp-3) var(--sp-4);
  border-left:1px solid var(--line);border-top:1px solid var(--line);
  margin:-1px 0 0 -1px;
}
.det-head .k{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.det-head .v{margin-top:var(--sp-1);font-size:14px}
.det-head .v.mono{font-family:var(--mono);font-size:13.5px}

/* ==========================================================
 * Tabellen -- die meistbenutzte Ansicht des Systems
 * ========================================================== */

/* Breite Tabellen scrollen in sich statt die Seite zu sprengen. */
.tablewrap{overflow-x:auto}

/* Eine Stufe unter dem Grundtext: eine Liste ist dicht, und die
   Zahlenspalten muessen nebeneinander passen. */
table{width:100%;border-collapse:collapse;font-size:13.5px}

/* Der Spaltenkopf ist eine Beschriftung, keine Zeile: klein, gesperrt,
   zurueckhaltend. Er soll die Spalte benennen und nicht mitlesen. */
th{
  text-align:left;padding:var(--sp-2);
  font-size:11px;font-weight:600;letter-spacing:.09em;text-transform:uppercase;
  color:var(--muted);
  border-bottom:1px solid var(--line-2);
}
/* Die Beschriftung darf umbrechen. Mit nowrap bestimmte die Kopfzeile die
   Spaltenbreite -- "Letzte Nachfassung" machte eine Spalte 175px breit
   fuer einen Inhalt von 12px, und die Tabelle passte nicht mehr auf den
   Bildschirm. */
td{
  padding:var(--sp-2);vertical-align:top;
  border-top:1px solid var(--line);              /* leiser als der Kopf */
}
tbody tr:first-child>td{border-top:0}
th.right,td.right{text-align:right}
/* Zahlen stehen rechts und in gleichbreiten Ziffern uebereinander --
   sonst laesst sich eine Spalte nicht ueberfliegen. */
td.right,td.mono,th.mono{font-variant-numeric:tabular-nums}
/* In Tabellen steht die Schreibmaschinenschrift fuer Nummern, Datum und
   Betraege. Die duerfen nicht umbrechen -- eine Vorgangsnummer ueber drei
   Zeilen liest niemand. Zu breit wird die Tabelle nicht: .tablewrap
   scrollt. */
/* Schreibmaschinenschrift traegt breiter als die Grundschrift. In einer
   Tabelle mit neun Spalten macht eine halbe Stufe den Unterschied
   zwischen "passt" und "scrollt". */
td.mono,th.mono{font-size:12.5px}
td.mono{white-space:nowrap}

/* Zeile unter dem Mauszeiger. Der Schleier legt sich ueber jede
   Einfaerbung, deshalb funktioniert er auch auf Arbeitszeilen. */
tbody tr:hover>td{background-image:var(--hover-veil)}
/* Klickbare Zeile: der Verweis in der Zeile hellt mit auf, damit man
   sieht, dass hier etwas dahinterliegt. */
tbody tr:hover>td a{color:var(--accent-hover)}

/* Arbeitszeile: dieser Vorgang wartet auf jemanden. */
tr.review>td{background-color:var(--warn-soft)}
tr.review>td:first-child{box-shadow:inset 2px 0 0 var(--warn)}
/* Betroffene Zeile: die, um die es in dieser Ansicht geht -- der
   gewaehlte Lieferant, die Zeile mit dem Befund. Stahlblau und nicht
   rot: es ist ein Hinweis, keine Stoerung. */
tr.hit>td{background-color:var(--steel-soft)}
/* Hinweiszeile unter einer Position: der Lieferant meldet eine Abweichung
   bei Material oder Toleranzen. Sie soll auffallen, ohne wie ein Fehler
   auszusehen -- die Position bleibt waehlbar. */
tr.warnrow>td{background-color:var(--warn-soft);border-top:0}
tr.hit>td:first-child{box-shadow:inset 2px 0 0 var(--steel)}
/* Stillgelegt: vorhanden, aber ausser Betrieb. */
tr.dimmed>td{color:var(--dim)}
tr.dimmed>td a{color:var(--muted)}

td .empty{text-align:left;padding:var(--sp-4) 0}

/* ==========================================================
 * Etiketten
 * ========================================================== */

.badge{
  display:inline-block;font-size:11.5px;font-weight:600;letter-spacing:.03em;
  padding:var(--sp-1) var(--sp-3);border-radius:var(--r-pill);
  border:1px solid var(--line-2);color:var(--muted);white-space:nowrap;line-height:1.35;
}
.badge.b-neu{border-color:var(--accent-line);color:var(--accent-2);background:var(--accent-soft)}
.badge.b-lauf{border-color:var(--steel);color:var(--steel);background:var(--steel-soft)}
.badge.b-ok{border-color:var(--ok);color:var(--ok);background:var(--ok-soft)}
.badge.b-warn{border-color:var(--warn);color:var(--warn);background:var(--warn-soft)}

/* Die Zeichnung in der Freigabeansicht. Das SVG bringt seine eigenen
 * Masse in Millimetern mit -- ohne diese Begrenzung sprengt ein A2-Blatt
 * die Spalte. Schwarzer Grund in BEIDEN Themen: so sieht die Zeichnung
 * im CAD-Betrachter aus, ihre Linien sind weiss, und die roten
 * Markierungen der Fundstellen fallen darauf auf. */
/* --- Seitenansicht fuer PDF und TIF ------------------------------------
   Das Bild traegt die Markierungen; sie liegen als Rechtecke darueber,
   in Bildpunkten der angezeigten Fassung. */
.blattflaeche{position:relative;display:inline-block;max-width:100%;line-height:0;}
.blattflaeche img{max-width:100%;height:auto;display:block;}
.seiten.zeichnend .blattflaeche{cursor:crosshair;}
.fundkasten{position:absolute;border:2px solid #c0392b;
  background:rgba(192,57,43,.14);pointer-events:none;}
/* Die Nummer INNEN und klein: aussen deckt sie auf einer engen
   Zeichnung den Nachbareintrag zu, und dann sieht man weniger statt
   mehr. */
.fundkasten .nr{position:absolute;top:0;left:0;font:600 .6rem/1 monospace;
  background:#c0392b;color:#fff;padding:1px 3px;border-radius:0 0 3px 0;}
.fundkasten.eigen{border-color:#2d7dd2;background:rgba(45,125,210,.16);pointer-events:auto;}
.fundkasten.entwurf{border-style:dashed;background:rgba(45,125,210,.08);}
.fundkasten.eigen{cursor:move;}
.kastengriff{position:absolute;right:-.45rem;bottom:-.45rem;width:.9rem;height:.9rem;
  background:#2d7dd2;border-radius:2px;cursor:nwse-resize;}
.kastenweg{position:absolute;top:-.7rem;right:-.7rem;width:1.4rem;height:1.4rem;
  border:0;border-radius:50%;background:#2d7dd2;color:#fff;cursor:pointer;
  font:700 .85rem/1 sans-serif;padding:0;}
.seitenwahl{display:flex;gap:var(--sp-1);flex-wrap:wrap;margin-bottom:var(--sp-2);}
.seite[hidden]{display:none;}
.zeichnung{background:#000;border:1px solid var(--line-2);border-radius:var(--r-2);padding:var(--sp-2);}
.zeichnung svg{width:100%;height:auto;max-height:75vh;display:block;margin:0 auto;}

/* Aufzaehlung in einer Tabellenzelle: der Bericht der
 * Metadaten-Bereinigung listet je Datei mehrere Eintraege, und die
 * Standard-Einrueckung einer Liste sprengt die Spalte. */
ul.tight{margin:0;padding-left:var(--sp-4);}
ul.tight>li{margin:0;line-height:1.5;}

.pill{
  font-family:var(--mono);font-size:11.5px;color:var(--dim);
  border:1px solid var(--line-2);border-radius:var(--r-pill);padding:0 var(--sp-2);
}

/* "Haengt an": der Grund, warum ein Vorgang gerade nicht weitergeht.
 * Bewusst grau und nicht rot -- das ist ein normaler Zustand im Ablauf,
 * kein Fehler. Ruhig, aber lesbar: wer die Liste ueberfliegt, muss den
 * Grund erfassen koennen, ohne die Zeile anzuklicken. */
.blocker{
  display:inline-block;font-size:12.5px;color:var(--text-2);
  background:var(--panel-3);border:1px solid var(--line-2);border-radius:var(--r-pill);
  padding:var(--sp-1) var(--sp-3);line-height:1.35;white-space:nowrap;
}

/* ==========================================================
 * Knoepfe
 * ========================================================== */

.btn{
  display:inline-flex;align-items:center;justify-content:center;
  white-space:nowrap;line-height:1.35;
  background:var(--panel-2);border:1px solid var(--line-control);color:var(--text-2);
  padding:var(--sp-2) var(--sp-4);cursor:pointer;
  border-radius:var(--r-ctl);font-size:13.5px;letter-spacing:.01em;
}
.btn:hover{background:var(--panel-3);color:var(--text);text-decoration:none}
.btn.sm{padding:var(--sp-1) var(--sp-3);font-size:12.5px}

/* Die Hauptaktion. Gefuellt in der Markenfarbe -- pro Ansicht genau
   einmal, sonst traegt sie nichts. */
.btn.primary{background:var(--accent);border-color:var(--accent);color:var(--on-accent);font-weight:600}
.btn.primary:hover{background:var(--accent-hover);color:var(--on-accent);box-shadow:0 0 0 3px var(--accent-soft)}
.btn.primary:active{background:var(--accent-pressed);border-color:var(--accent-pressed)}

.btn.ghost{background:none;border-color:transparent;color:var(--muted)}
.btn.ghost:hover{background:var(--panel-2);color:var(--text)}

/* "Hier stehst du gerade" -- fuer Reiterleisten. Dieselbe Sprache wie der
   aktive Eintrag in der Seitenleiste: angehobene Flaeche, farbige Kante,
   keine gefuellte Flaeche. Ein gefuellter Knopf sieht aus wie eine
   Aktion, und die Auswahl ist keine. */
.btn.current{
  background:var(--panel-3);border-color:var(--line-2);color:var(--text);
  box-shadow:inset 2px 0 0 var(--accent);
}
.btn.current:hover{background:var(--panel-3);color:var(--text)}

/* Gesperrter Knopf.
 * Er bleibt stehen und bleibt lesbar. Ein ausgeblendeter oder blasser
 * Knopf sagt nicht "hier fehlt etwas", er sagt gar nichts -- und genau
 * daran ist im Demo-Durchlauf ein Auftrag unbemerkt haengengeblieben.
 * Der gestrichelte Rahmen ist das Zeichen: vorgesehen, aber noch nicht
 * bereit. Warum, steht im title und daneben im Text. */
.btn:disabled{
  opacity:1;cursor:not-allowed;
  background:none;border-style:dashed;border-color:var(--line-control);
  color:var(--muted);box-shadow:none;
}
.btn:disabled:hover{background:none;color:var(--muted)}
/* Die gesperrte Hauptaktion behaelt ihre Kante in der Markenfarbe: man
   soll sehen, dass hier der eigentliche Schritt haengt. */
.btn.primary:disabled{border-color:var(--accent-line);color:var(--muted);font-weight:600}
.btn.primary:disabled:hover{background:none;box-shadow:none}

/* ==========================================================
 * Formulare
 * ========================================================== */

.field{margin-bottom:var(--sp-4)}
.field label{
  display:block;font-size:11px;letter-spacing:.09em;text-transform:uppercase;
  color:var(--muted);margin-bottom:var(--sp-2);
}
.field .hint{font-size:12.5px;color:var(--muted);margin-top:var(--sp-1)}
input[type=text],input[type=email],input[type=password],input[type=number],
input[type=date],input[type=file],input[type=search],select,textarea{
  width:100%;background:var(--panel-2);border:1px solid var(--line-control);color:var(--text);
  padding:var(--sp-2) var(--sp-3);font-family:var(--sans);font-size:14px;
  border-radius:var(--r-ctl);
}
input:focus,select:focus,textarea:focus{border-color:var(--accent-line)}
/* Der Knopf im Dateifeld gehoert dem Betriebssystem und kommt sonst hellgrau
   mitten in die dunkle Ansicht. Er bekommt dieselbe Form wie .btn. */
input[type=file]::file-selector-button{
  margin-right:var(--sp-3);padding:var(--sp-1) var(--sp-3);
  background:var(--panel-3);border:1px solid var(--line-2);border-radius:var(--r-ctl);
  color:var(--text-2);font-family:var(--sans);font-size:13px;cursor:pointer;
}
input[type=file]::file-selector-button:hover{color:var(--text)}
input.mono,textarea.mono{font-family:var(--mono);font-size:13px}
textarea{resize:vertical;min-height:80px}
input[type=checkbox],input[type=radio]{accent-color:var(--accent)}
/* Kontrollkaestchen mit Beschriftung: die Beschriftung gehoert zum
   Kaestchen, also steht sie daneben und nicht darueber. */
.chk{
  display:inline-flex;align-items:center;gap:var(--sp-2);cursor:pointer;
  font-size:13.5px;color:var(--text-2);letter-spacing:0;text-transform:none;
}
.chk input{width:auto;margin:0}

.formrow{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:var(--sp-4)}
.formactions{display:flex;align-items:center;gap:var(--sp-3);margin-top:var(--sp-4);flex-wrap:wrap}
.inline-form{display:inline}
/* --- Positionszeile ----------------------------------------------------
   Die Felder einer Position stehen NEBENEINANDER, nicht untereinander:
   sie sind zusammen eine Zeile der Tabelle, und gestapelt liest sich die
   Liste nicht mehr als Liste. Die Breite kommt aus dem size-Attribut,
   deshalb hier width:auto statt der globalen 100 Prozent. */
.posform{display:flex;flex-wrap:wrap;gap:var(--sp-1);align-items:center;}
.posform input,.posform select{width:auto;padding:2px var(--sp-2);font-size:13px;}
.posform .btn{flex:0 0 auto;}
.poszeile td{vertical-align:top;}
.posherkunft{display:flex;flex-wrap:wrap;gap:var(--sp-1);align-items:center;}

/* Die Lieferzeit am Angebot: zwei schmale Felder und ein Knopf in EINER
 * Zeile. Ohne feste Breite sprengen die Zahlenfelder die Kachel. */
.wochenform{
  display:flex;align-items:center;flex-wrap:wrap;
  gap:var(--sp-1) var(--sp-2);margin-top:var(--sp-2);
}
.wochenform input[type=number]{width:3.6em;padding:2px var(--sp-2);font-family:var(--mono);}

.filters{display:flex;flex-wrap:wrap;gap:var(--sp-3);align-items:flex-end;margin-bottom:var(--sp-5)}
.filters .field{margin-bottom:0;min-width:150px}
.filters .field.wide{min-width:230px}

/* ==========================================================
 * Meldungen und Hinweise
 * ========================================================== */

.flash{
  border-left:2px solid var(--ok);background:var(--ok-soft);border-radius:var(--r-panel);
  padding:var(--sp-3) var(--sp-4);font-size:13.5px;margin-bottom:var(--sp-4);
}
.flash.error{border-left-color:var(--danger);background:var(--danger-soft);color:var(--text)}
.flash.warn{border-left-color:var(--warn);background:var(--warn-soft)}

/* Hinweis neben einer Aktion -- meistens der Grund, warum der Knopf
 * daneben gesperrt ist. Er muss lesbar sein, ohne die Hauptaktion zu
 * ueberstrahlen: ruhige Flaeche, farbige Kante, normaler Text. */
.note{
  border-left:2px solid var(--accent);background:var(--panel-2);border-radius:var(--r-panel);
  padding:var(--sp-3) var(--sp-4);font-size:13.5px;color:var(--text-2);
  /* Der Hinweis steht mitten im Ablauf, oft direkt unter dem Knopf, den er
     erklaert. Ohne eigenen Abstand klebt er am Nachbarn. Benachbarte
     Abstaende fallen zusammen, doppelt wird es also nicht. */
  margin:var(--sp-4) 0;
}
.panel > .note:first-child{margin-top:0}
.panel > .note:last-child{margin-bottom:0}
.note.warnline{border-left-color:var(--warn)}
.note strong{color:var(--text)}

/* Warnbanner. Das Wichtigste auf der Seite: hier steht, dass das System
 * scharf ist oder dass ein Schluessel fehlt. Deshalb breite Kante,
 * viel Innenabstand und eine Ueberschrift, die man aus drei Metern
 * Entfernung liest. Wer hier spart, spart am falschen Ende. */
.banner{
  border:1px solid var(--warn);border-left:4px solid var(--warn);
  background:var(--warn-soft);border-radius:var(--r-panel);
  padding:var(--sp-4) var(--sp-5);margin-bottom:var(--sp-5);
  box-shadow:var(--shadow-2);
}
.banner.danger{border-color:var(--danger);background:var(--danger-soft)}
.banner .bt{
  font-size:13px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--warn);font-weight:700;
}
.banner.danger .bt{color:var(--danger-2)}
.banner p{margin:var(--sp-2) 0 0;font-size:13.5px;color:var(--text-2)}
.banner ul{margin:var(--sp-2) 0 0;padding-left:var(--sp-4);font-size:13.5px;color:var(--text-2)}
.banner li{margin-top:var(--sp-1)}

/* Leerzustand.
 * Jede Tabelle braucht einen Satz, was zu tun ist. Ein leerer Kasten
 * sieht sonst aus wie ein Fehler. Mittig und mit Luft -- damit er wie
 * eine Auskunft wirkt und nicht wie eine abgeschnittene Liste. */
.empty{padding:var(--sp-7) var(--sp-5);text-align:center;color:var(--muted);font-size:13.5px}
.empty .et{font-size:15px;color:var(--text-2);margin-bottom:var(--sp-2)}
.empty .eh{font-size:13.5px;color:var(--muted);max-width:56ch;margin:0 auto;line-height:1.6}

.pager{display:flex;align-items:center;gap:var(--sp-3);margin-top:var(--sp-4);font-size:12.5px;color:var(--muted)}
.pager .count{font-family:var(--mono)}

/* ==========================================================
 * Anmeldung
 * ========================================================== */

.login-wrap{min-height:100vh;display:grid;place-items:center;padding:var(--sp-5)}
.login{
  width:100%;max-width:380px;background:var(--panel);border:1px solid var(--line);
  border-radius:var(--r-panel);padding:var(--sp-6);box-shadow:var(--shadow-2);
}
.login .brandline{display:flex;align-items:center;gap:var(--sp-3);margin-bottom:var(--sp-5)}
.login .brandline img{height:38px;width:38px}
.login .brandline .name{font-size:15px;font-weight:600;letter-spacing:.06em}
.login .brandline .sub{font-size:11px;color:var(--dim);letter-spacing:.14em;text-transform:uppercase}

/* ==========================================================
 * Verlauf und Protokoll
 * ========================================================== */

.msglist{display:flex;flex-direction:column;gap:var(--sp-3)}
.msg{
  background:var(--panel-2);border:1px solid var(--line);border-left:2px solid var(--steel);
  border-radius:var(--r-panel);padding:var(--sp-3) var(--sp-4);
}
.msg.out{border-left-color:var(--accent)}
.msg .mh{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-3);flex-wrap:wrap}
.msg .who{font-size:13.5px;color:var(--text)}
.msg .ts{font-family:var(--mono);font-size:12px;color:var(--dim)}
.msg .subj{margin-top:var(--sp-1);font-size:13.5px;color:var(--text-2)}
.msg .mid{margin-top:var(--sp-1);font-family:var(--mono);font-size:11px;color:var(--dim);word-break:break-all}

.evlog{font-size:13px}
.evlog .ev{
  display:grid;grid-template-columns:150px 1fr;gap:var(--sp-3);
  padding:var(--sp-2) 0;border-bottom:1px solid var(--line);
}
.evlog .ev:last-child{border-bottom:0}
.evlog .ts{font-family:var(--mono);color:var(--dim);font-size:12px}
.evlog .et{color:var(--text-2);font-family:var(--mono);font-size:12.5px}
.evlog .ev.warning .et{color:var(--warn)}
.evlog .ev.error .et{color:var(--danger-2)}

/* ==========================================================
 * Zeichnungsvergleich (Original / neutralisiert)
 * ========================================================== */

.ba-wrap{display:grid;grid-template-columns:minmax(0,2.1fr) minmax(260px,1fr);gap:var(--sp-4);align-items:start}
.ba{
  position:relative;background:var(--paper);border:1px solid var(--line-2);
  border-radius:var(--r-panel);user-select:none;overflow:hidden;touch-action:none;
}
.ba-layer{position:absolute;inset:0}
.ba-layer svg{display:block;width:100%;height:100%}
.ba-after{clip-path:inset(0 0 0 var(--pos,50%))}
.ba-sizer{width:100%;display:block}
.ba-divider{
  position:absolute;top:0;bottom:0;left:var(--pos,50%);width:1px;background:var(--ink);cursor:ew-resize;
}
.ba-divider:after{
  content:"";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:26px;height:26px;border:1px solid var(--ink);background:var(--paper);border-radius:var(--r-pill);
}
.ba-grip{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);z-index:2;pointer-events:none;
  font-family:var(--mono);font-size:10px;color:var(--ink);
}
.ba-tag{
  position:absolute;top:var(--sp-2);font-family:var(--mono);font-size:10.5px;letter-spacing:.08em;
  background:var(--ink);color:var(--ink-tag);padding:var(--sp-1) var(--sp-2);border-radius:var(--r-ctl);z-index:3;
}
.ba-tag.l{left:var(--sp-2)}
.ba-tag.r{right:var(--sp-2)}
.slider-row{display:flex;align-items:center;gap:var(--sp-3);margin-top:var(--sp-3)}
input[type=range]{
  -webkit-appearance:none;appearance:none;background:var(--panel-2);
  height:4px;border:1px solid var(--line);border-radius:var(--r-pill);flex:1;
}
input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none;width:14px;height:20px;background:var(--accent);
  border:1px solid var(--accent-2);border-radius:var(--r-ctl);cursor:pointer;
}
input[type=range]::-moz-range-thumb{
  width:14px;height:20px;background:var(--accent);border:1px solid var(--accent-2);
  border-radius:var(--r-ctl);cursor:pointer;
}

/* ==========================================================
 * Kleinigkeiten
 * ========================================================== */

/* Nebeneinander, solange jede Spalte 380px bekommt -- sonst untereinander.
   Leere Spuren fallen weg (auto-fit), zwei Flaechen teilen sich die Breite
   also haelftig und drei zu Dritteln. */
.split2{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(380px,1fr));
  gap:var(--sp-5);align-items:start;
}
/* Im Raster stellt der Spaltabstand den Abstand her. Ein zusaetzlicher
   Aussenabstand am Kind verschiebt nur seine Spalte nach unten. */
.split2 > *{margin-top:0}
.stack{display:flex;flex-direction:column;gap:var(--sp-4)}
.lists{display:grid;gap:var(--sp-4);margin-top:var(--sp-5)}
.row-between{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-3);flex-wrap:wrap}
/* Abstand nach oben -- zwischen zwei Flaechen mehr als innerhalb einer. */
.mt{margin-top:var(--sp-4)}
.panel.mt,.split2.mt,.ba-wrap.mt,.kpis.mt{margin-top:var(--sp-5)}
.muted{color:var(--muted)}
.dimtext{color:var(--dim)}
.mono{font-family:var(--mono)}
.nowrap{white-space:nowrap}
.right{text-align:right}
.grow{flex:1}
/* Ablagepfade und Message-IDs: lieber umbrechen als die Spalte sprengen. */
.breakall{word-break:break-all}

pre{margin:0;white-space:pre-wrap;font-family:var(--mono);font-size:13px;color:var(--text-2)}

.varlist{display:flex;flex-wrap:wrap;gap:var(--sp-2);margin-top:var(--sp-2)}
.varlist code{
  font-family:var(--mono);font-size:12px;color:var(--text-2);
  background:var(--panel-2);border:1px solid var(--line);border-radius:var(--r-ctl);
  padding:var(--sp-1) var(--sp-2);
}

/* Sendemodus -- steht dauerhaft in der Seitenleiste und im Betrieb. */
.mode{display:inline-flex;align-items:center;gap:var(--sp-2);font-size:12.5px;font-family:var(--mono)}
.mode .dot{width:7px;height:7px}
/* Als Kennzahl steht der Sendemodus in der Groesse der anderen Kennzahlen.
   Er ist die wichtigste Angabe im Betrieb -- kleiner als "Empfaengersperre:
   aus" darf er nicht sein. */
.kpi .v .mode{font-size:inherit}
.kpi .v .mode .dot{width:10px;height:10px}
.mode.off .dot{background:var(--dim)}
.mode.draft .dot{background:var(--warn)}
.mode.live .dot{background:var(--ok)}

/* ==========================================================
 * Erscheinungsbild umschalten
 * ========================================================== */

/* Ein Feld mit drei Abteilen statt eines Schalters: "Auto" ist ein
   eigener Zustand und nicht die Mitte zwischen hell und dunkel. */
.thema{display:inline-flex;border:1px solid var(--line-control);border-radius:var(--r-ctl);overflow:hidden}
.thema-knopf{
  background:none;border:0;border-left:1px solid var(--line-control);
  padding:var(--sp-1) var(--sp-3);cursor:pointer;
  font-size:12px;letter-spacing:.02em;color:var(--muted);
}
.thema-knopf:first-child{border-left:0}
.thema-knopf:hover{background:var(--panel-2);color:var(--text)}
.thema-knopf.current{background:var(--panel-3);color:var(--text);font-weight:600}

/* ==========================================================
 * Meldungen
 * ========================================================== */

.meldungen{
  position:fixed;top:calc(var(--topbar-h) + var(--sp-4));right:var(--sp-5);z-index:60;
  display:flex;flex-direction:column;gap:var(--sp-2);
  width:min(420px,calc(100vw - 2 * var(--sp-5)));
  pointer-events:none;                 /* der Stapel selbst faengt nichts ab */
}
.meldungen .flash{pointer-events:auto}
.flash{
  display:flex;align-items:flex-start;gap:var(--sp-3);
  background:var(--panel);border:1px solid var(--line);border-left:3px solid var(--ok);
  border-radius:var(--r-panel);box-shadow:var(--shadow-2);
  padding:var(--sp-3) var(--sp-4);font-size:13.5px;color:var(--text-2);margin:0;
}
.flash.error{border-left-color:var(--danger);background:var(--danger-soft);color:var(--text)}
.flash.warn{border-left-color:var(--warn);background:var(--warn-soft)}
.flash.faellt{opacity:0}
.flash-zu{
  background:none;border:0;color:var(--dim);cursor:pointer;
  font-size:18px;line-height:1;padding:0 var(--sp-1);flex:none;
}
.flash-zu:hover{color:var(--text)}

/* ==========================================================
 * Ladezustand
 * ----------------------------------------------------------
 * Bewusst ohne Kreisel: in diesem Blatt bewegt sich nichts (siehe
 * Kopfkommentar). Der Knopf tritt zurueck, bekommt Auslassungspunkte
 * und nimmt keine Klicks mehr an -- das reicht, um "laeuft" von
 * "kaputt" zu unterscheiden.
 * ========================================================== */
.btn.laedt{color:var(--muted);cursor:progress;pointer-events:none}
.btn.laedt::after{content:" …"}

/* ==========================================================
 * Gewaehlte Zeile
 * ----------------------------------------------------------
 * Muss die Arbeitszeile und die Trefferzeile ueberschreiben: die sagen,
 * WAS die Zeile ist, diese sagt, WO man steht. Deshalb steht sie hier
 * unten und nicht bei den anderen Zeilenzustaenden.
 * ========================================================== */
tbody tr.gewaehlt>td{background-color:var(--panel-3)}
tbody tr.gewaehlt>td:first-child{box-shadow:inset 3px 0 0 var(--accent)}

/* ==========================================================
 * Einblendung (Tastenkuerzel)
 * ========================================================== */

.einblendung{
  position:fixed;inset:0;z-index:80;display:grid;place-items:center;
  background:var(--c-shadow-dark-3);padding:var(--sp-5);
}
.einblendung-kasten{
  background:var(--panel);border:1px solid var(--line);border-radius:var(--r-panel);
  box-shadow:var(--shadow-2);padding:var(--sp-5);width:min(520px,100%);
  max-height:calc(100vh - 2 * var(--sp-5));overflow:auto;
}
.einblendung-kasten p{margin:var(--sp-4) 0 0;font-size:12.5px}
.kuerzelliste{margin-top:var(--sp-4)}
.kuerzelliste td{border-top:0;padding:var(--sp-2) var(--sp-3) var(--sp-2) 0;vertical-align:middle}
.kuerzelliste td.taste{width:130px;white-space:nowrap}
kbd{
  font-family:var(--mono);font-size:12px;color:var(--text);
  background:var(--panel-2);border:1px solid var(--line-2);border-bottom-width:2px;
  border-radius:var(--r-ctl);padding:2px var(--sp-2);
}

/* ==========================================================
 * Arbeitsliste
 * ----------------------------------------------------------
 * Steht ganz oben und ist die einzige Flaeche, die man aus drei Metern
 * lesen koennen muss: die Zahl gross, die Sache daneben, der Grund
 * darunter. Dringendes traegt die Markenfarbe, Offenes nur eine ruhige
 * Kante -- waeren beide rot, waere keins von beiden dringend.
 * ========================================================== */

.aufgaben{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:var(--sp-2)}
.aufgabe a{
  display:flex;align-items:center;gap:var(--sp-4);
  padding:var(--sp-3) var(--sp-4);border-radius:var(--r-panel);
  background:var(--panel-2);border:1px solid var(--line);
  border-left:3px solid var(--line-2);color:inherit;text-decoration:none;
}
.aufgabe a:hover{background:var(--panel-3);text-decoration:none}
.aufgabe.dringend a{border-left-color:var(--accent)}
.aufgabe.offen a{border-left-color:var(--steel)}
.aufgabe .anzahl{
  font-size:22px;line-height:1;min-width:48px;text-align:right;
  color:var(--text);letter-spacing:-.02em;flex:none;
}
.aufgabe.dringend .anzahl{color:var(--accent-2)}
.aufgabe .was{display:block;font-size:14.5px;color:var(--text)}
.aufgabe .warum{display:block;font-size:12.5px;color:var(--muted);margin-top:2px}

/* ==========================================================
 * Sortierbare Spaltenkoepfe
 * ----------------------------------------------------------
 * Sortierbar muss man SEHEN, sonst probiert es niemand aus. Die Raute
 * steht ruhig da, bis man mit dem Zeiger darueber geht; die aktive
 * Spalte zeigt Richtung und traegt die Markenfarbe.
 * ========================================================== */
th.sortierbar{padding:0}
th.sortierbar a{
  display:flex;align-items:center;gap:var(--sp-1);
  padding:var(--sp-2);color:inherit;text-decoration:none;
}
th.sortierbar.right a{justify-content:flex-end}
th.sortierbar a:hover{color:var(--text);text-decoration:none}
th.sortierbar .pfeil{font-size:8px;color:var(--line-2)}
th.sortierbar a:hover .pfeil{color:var(--muted)}
th.sortiert a{color:var(--accent-2)}
th.sortiert .pfeil{font-size:9px;color:var(--accent-2)}

/* Lange Werte kuerzen, statt die Tabelle zu sprengen. Der volle Text
   steht im title -- abgeschnitten UND unauffindbar waere schlimmer als
   eine breite Spalte. */
td.kurz{max-width:14ch;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* Der Blockadegrund bricht um, statt abzuschneiden. "Liefter..." sagt
   nichts -- und der Grund, warum eine Zeile haengt, ist genau das, wofuer
   die Spalte da ist. Die Breite begrenzt trotzdem die Spalte. */
td .blocker{max-width:15ch;white-space:normal}

/* In der Tabelle traegt das Etikett weniger auf: es steht neben acht
   anderen Spalten und nicht allein auf einer Flaeche. */
table .badge{font-size:11px;padding:2px var(--sp-2);white-space:normal}

/* ==========================================================
 * Schmale Bildschirme
 * ----------------------------------------------------------
 * Unter 1400px rueckt der Rahmen zusammen, damit die Listen ihre
 * Spalten behalten. Lieber ein schmalerer Rand als eine Tabelle, die
 * zur Seite geschoben werden muss: der Rand traegt keine Information.
 * ========================================================== */
@media (max-width:1400px){
  .app{grid-template-columns:212px 1fr}
  .topbar{padding:0 var(--sp-5)}
  .view{padding:var(--sp-5) var(--sp-5) var(--sp-7)}
  .panel{padding:var(--sp-4)}
  .meldungen{right:var(--sp-4)}
  /* Zwei Flaechen nebeneinander heisst zwei halbe Tabellen. Untereinander
     bekommt jede die volle Breite -- und die Spalten passen wieder. */
  .split2{grid-template-columns:minmax(0,1fr)}
  /* Eine halbe Stufe kleiner. Auf einem 1280er Bildschirm ist die
     vollstaendige Zeile mehr wert als der letzte halbe Punkt Schriftgroesse. */
  table{font-size:13px}
  td.mono,th.mono{font-size:12px}
  /* Der Kundenname darf hier frueher abbrechen. Der volle Name steht im
     title; der Blockadegrund daneben laesst sich nicht abkuerzen, ohne
     seinen Zweck zu verlieren. */
  td.kurz{max-width:11ch}
}

/* ==========================================================
 * Suche
 * ========================================================== */

/* Das Feld in der Kopfleiste. Schmal, bis jemand hineinklickt -- es soll
   erreichbar sein, aber nicht die Ueberschrift verdraengen. */
.kopfsuche input{
  /* Durchsichtig statt gefuellt: eine graue Flaeche in der Kopfleiste
     liest sich wie ein gesperrtes Feld. Der Rahmen reicht. */
  width:180px;background:none;border:1px solid var(--line-control);
  color:var(--text);border-radius:var(--r-ctl);padding:var(--sp-1) var(--sp-3);
  font-family:var(--sans);font-size:13px;
}
.kopfsuche input:focus{width:280px;border-color:var(--accent-line)}

.treffer{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:var(--sp-1)}
.treffer a{
  display:block;padding:var(--sp-2) var(--sp-3);border-radius:var(--r-ctl);
  color:inherit;text-decoration:none;
}
.treffer a:hover{background:var(--panel-2);text-decoration:none}
.treffer .was{display:block;font-size:14px;color:var(--text)}
.treffer .wo{display:block;font-size:12.5px;color:var(--muted);margin-top:1px}
/* Die Fundstelle. Getoent statt farbig geschrieben: der Treffer bleibt
   lesbar, und die Stelle springt trotzdem ins Auge. */
mark{background:var(--accent-soft);color:inherit;border-radius:3px;padding:0 2px}

/* ==========================================================
 * Zeitleiste des Vorgangs
 * ----------------------------------------------------------
 * Eine Spalte mit durchgehender Linie. Erledigtes traegt einen
 * gefuellten Punkt, Offenes einen leeren -- und Offenes bleibt stehen,
 * damit man sieht, was noch kommt. Der blockierende Schritt ist der
 * einzige in der Markenfarbe: waeren es mehrere, waere keiner dringend.
 * ========================================================== */

.schritte{list-style:none;margin:0;padding:0}
.schritt{
  display:flex;align-items:baseline;gap:var(--sp-3);
  padding:var(--sp-2) 0 var(--sp-2) var(--sp-2);position:relative;
}
/* Die Linie zwischen den Punkten. Als Pseudoelement, damit sie beim
   letzten Schritt aufhoert und nicht ins Leere laeuft. */
.schritt:not(:last-child)::before{
  content:"";position:absolute;left:11px;top:20px;bottom:-4px;
  width:1px;background:var(--line-2);
}
.schritt .punkt{
  width:9px;height:9px;border-radius:var(--r-pill);flex:none;
  border:1px solid var(--line-control);background:var(--panel);
  margin-left:3px;position:relative;z-index:1;
}
.schritt.erledigt .punkt{background:var(--ok);border-color:var(--ok)}
.schritt.blockiert .punkt{background:var(--accent);border-color:var(--accent)}
.schritt .was{display:block;font-size:14px;color:var(--text)}
.schritt .warum{display:block;font-size:12.5px;color:var(--muted);margin-top:1px}
.schritt .wann{font-size:12px;color:var(--dim);white-space:nowrap;flex:none}

/* Noch nicht erreicht: sichtbar, aber zurueckgenommen. */
.schritt.offen .was{color:var(--muted)}
.schritt.offen .warum{color:var(--dim)}

/* Der Riegel. */
.schritt.blockiert .was{color:var(--accent-2);font-weight:600}
.schritt.blockiert .warum{color:var(--text-2)}

/* "Hier stehst du gerade" -- dieselbe Sprache wie in der Seitenleiste. */
.schritt.hier{
  background:var(--panel-2);border-radius:var(--r-ctl);
  box-shadow:inset 2px 0 0 var(--line-control);
}

/* ==========================================================
 * Papier
 * ----------------------------------------------------------
 * Jemand wird eine Liste ausdrucken oder als PDF sichern. Ohne
 * Druckstile kaeme der dunkle Grund mit aufs Blatt -- eine halbe
 * Tonerpatrone fuer eine Tabelle mit zehn Zeilen.
 *
 * Auf Papier gilt immer hell, unabhaengig vom eingestellten Thema: ein
 * Ausdruck ist kein Bildschirm, und schwarz auf weiss liest sich am
 * besten. Deshalb werden die Rollenfarben hier ueberschrieben und nicht
 * das Thema umgeschaltet -- so gilt es fuer beide.
 * ========================================================== */

.druckkopf{display:none}

@media print{
  :root,
  :root[data-theme="dark"],
  :root[data-theme="light"],
  :root[data-theme="system"]{
    color-scheme:light;
    --bg:#ffffff;
    --panel:#ffffff;
    --panel-2:#ffffff;
    --panel-3:#f2f2f2;
    --line:#b4b4b4;
    --line-2:#8c8c8c;
    --line-control:#8c8c8c;
    --text:#000000;
    --text-2:#1a1a1a;
    --muted:#3a3a3a;
    --dim:#4a4a4a;
    --accent:#000000;
    --accent-2:#000000;
    --on-accent:#ffffff;
    --accent-soft:transparent;
    --danger:#000000;
    --danger-2:#000000;
    --ok:#000000;
    --warn:#000000;
    --steel:#000000;
    --shadow-1:none;
    --shadow-2:none;
    --hover-veil:none;
  }

  /* A4, Hochformat als Vorgabe. Die breiten Listen liegen quer -- neun
     Spalten passen hochkant nicht, und eine abgeschnittene Tabelle ist
     kein Ausdruck. */
  @page{
    size:A4 portrait;
    margin:14mm;
    /* Seitenzahlen. Chrome setzt eigene und ignoriert das hier; wo es
       gelesen wird (WeasyPrint, Firefox teilweise), stimmt es. */
    @bottom-right{content:"Seite " counter(page) " von " counter(pages);}
  }
  @page quer{size:A4 landscape;}
  body[data-ansicht="angebote"] .view,
  body[data-ansicht="auftraege"] .view,
  body[data-ansicht="anfragen"] .view{page:quer;}

  /* Weg: alles, was man nicht anklicken kann, sobald es gedruckt ist. */
  .sidebar,
  .topbar,
  .kopfsuche,
  .thema,
  .filters,
  .pager,
  .meldungen,
  .einblendung,
  .btn,
  .formactions,
  .inline-form,
  .nodruck,
  form{display:none !important}

  /* Bleibt: Ueberschrift, Inhalt, Tabellen, Zeitleiste. */
  .app{display:block}
  .main{display:block}
  .view{display:block;padding:0;max-width:none}
  body{background:#fff;font-size:10.5pt}

  .druckkopf{
    display:flex;align-items:center;gap:var(--sp-4);
    border-bottom:1pt solid var(--line-2);padding-bottom:var(--sp-2);margin-bottom:var(--sp-4);
  }
  .druckkopf img{height:12mm;width:12mm}
  .druckkopf .dk-titel{font-size:14pt;font-weight:600}
  .druckkopf .dk-zeile{font-size:9pt;color:var(--muted);margin-top:2px}

  /* Flaechen werden zu Kaesten: auf Papier traegt kein Schatten. */
  .panel,.kpi,.det-head{
    border:1pt solid var(--line);box-shadow:none;break-inside:avoid;
    margin-bottom:var(--sp-3);
  }

  /* Die Kopfzeile wiederholt sich auf jeder Seite, und keine Zeile wird
     ueber den Umbruch gerissen. */
  thead{display:table-header-group}
  tr{break-inside:avoid;page-break-inside:avoid}
  td,th{border-color:var(--line)}

  /* Die Zieladresse hinter dem Text -- aber NUR bei fremden Zielen. Bei
     jedem Verweis in einer Tabelle waere das Blatt unlesbar, und
     "/angebote/17" hilft auf Papier ohnehin niemandem. */
  a[href^="http://"]::after,
  a[href^="https://"]::after,
  a[href^="mailto:"]::after{content:" (" attr(href) ")";font-size:8pt;color:var(--muted)}

  /* Die Zeitleiste ist der Grund, warum eine Detailansicht ueberhaupt
     ausgedruckt wird -- sie bleibt vollstaendig. */
  .zeitleiste{break-inside:auto}
  .schritt{break-inside:avoid}
}