/* -------------------------------------------------------------------------
   ezh.n1x.tech - im Stil von n1x.tech.

   Unveraendert uebernommen vom InnoCigs-Leitstand: dieselben Tokens,
   dieselbe Schrift, dieselben Griffe. Das ist Absicht - zwei Leitstaende
   nebeneinander, die sich verschieden anfassen, sind zwei Bedienungen.
   Wer hier etwas am Aussehen aendert, aendert es dort mit.
   ------------------------------------------------------------------------- */@font-face{font-family:'Space Grotesk';font-style:normal;font-weight:400 700;
  font-display:swap;src:url(/static/spacegrotesk.woff2) format('woff2')}

:root{
  --bg:#0a0b0d; --flaeche:#111316; --flaeche2:#14171b; --rand:#1e2126;
  --rand-hell:#2b2f36; --txt:#e9ecef; --dim:#8b929c; --akzent:#3ecfb2;
  --mono:ui-monospace,Consolas,monospace;
  --warn:#e0a33e; --rot:#e06c6c; --gut:#3ecfb2; --blau:#6ba8e0;
  color-scheme:dark;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg);color:var(--txt);
  font-family:'Space Grotesk',system-ui,-apple-system,Segoe UI,sans-serif;
  -webkit-font-smoothing:antialiased;line-height:1.6}
a{text-decoration:none;color:var(--akzent)}

h1{margin:0;font-weight:600;letter-spacing:-.025em;font-size:1.5rem;line-height:1.12}
.akz{color:var(--akzent)}
.hell{color:#fff}
h2{margin:0 0 10px;font-size:1.06rem;font-weight:600;letter-spacing:-.01em}
/* Zwischenueberschriften sprechen die Mono-Sprache der Startseite. */
h3{margin:20px 0 8px;font-family:var(--mono);font-size:10px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--dim);font-weight:400}

/* ---- Geruest ---- */
.kopf{position:sticky;top:0;z-index:40;background:rgba(10,11,13,.93);
  backdrop-filter:blur(10px);border-bottom:1px solid var(--rand);padding:16px 24px 0}
.kopfzeile{display:flex;align-items:baseline;gap:16px;flex-wrap:wrap;
  max-width:1400px;margin:0 auto}
.reiter{display:flex;gap:4px;max-width:1400px;margin:14px auto 0;overflow-x:auto}
.reiter button{background:none;border:0;border-bottom:1px solid transparent;
  color:var(--dim);padding:9px 15px;font:inherit;font-size:.92rem;cursor:pointer;
  white-space:nowrap;border-radius:8px 8px 0 0;transition:color .2s ease}
.reiter button:hover{color:var(--txt);background:var(--flaeche)}
.reiter button.aktiv{color:var(--akzent);border-bottom-color:var(--akzent)}
main{max-width:1400px;margin:0 auto;padding:26px 24px 84px}
.blatt{display:none}
.blatt.aktiv{display:block}

/* Unterreiter im Blatt „Artikel". Bewusst ANDERS als die Leiste oben: zwei
   gleich aussehende Reihen uebereinander liest man als eine kaputte. Oben
   Text mit Unterstrich, hier Pillen in einer Wanne - das sagt „darin" statt
   „daneben". */
.unterreiter{display:flex;gap:6px;margin:0 0 18px;padding:5px;overflow-x:auto;
  background:var(--flaeche);border:1px solid var(--rand);border-radius:12px}
.unterreiter button{background:none;border:0;color:var(--dim);
  padding:9px 16px;font:inherit;font-size:.92rem;cursor:pointer;
  white-space:nowrap;border-radius:8px;
  transition:color .2s ease,background .2s ease}
.unterreiter button:hover{color:var(--txt);background:var(--flaeche2)}
.unterreiter button.aktiv{color:var(--akzent);background:var(--flaeche2)}
/* Die Zahl neben dem Namen. Sie steht da, damit man beim Wechseln schon
   weiss, wie voll die Stufe ist, in die man wechselt. */
.unterreiter .zaehler{margin-left:8px;font-size:.82rem;
  font-variant-numeric:tabular-nums;color:var(--dim);opacity:.85}
.unterreiter button.aktiv .zaehler{color:var(--akzent)}
.unterblatt{display:none}
.unterblatt.aktiv{display:block}

/* Eine Kachel, die auf etwas hinweist, statt nur zu zaehlen. Nur wenn die
   Zahl groesser als null ist - eine dauerhaft gelbe Null gewoehnt man sich
   in zwei Tagen ab. */
.karte.kachel.mahnt{border-color:rgba(224,163,62,.35)}
.karte.kachel.mahnt .gross{color:var(--warn)}

/* Der Name des Dienstes neben dem Zeichen. Bewusst leiser als die Marke
   links: „inno." ist das Haus, „InnoCigs Manager" nur die Auskunft, was
   darin passiert. */
.werktitel{font-size:.95rem;color:var(--dim);letter-spacing:-.01em}

/* Die beiden Schnittstellen-Marken. Sie sagen ready / at work / not working
   und nichts sonst; das WARUM steht im Titel und in der Info-Tafel. */
.marke.schnitt{align-self:center}
.marke.schnitt.ready{color:var(--gut);border-color:rgba(62,207,178,.35);
  background:rgba(62,207,178,.07)}
.marke.schnitt.arbeit{color:var(--warn);border-color:rgba(224,163,62,.35);
  background:rgba(224,163,62,.09)}
.marke.schnitt.tot{color:var(--rot);border-color:rgba(224,108,108,.35);
  background:rgba(224,108,108,.1)}

/* Info-Knopf statt Dauerbeschallung. Der Punkt oben rechts traegt die
   Mahnstufe - er ist der einzige Rest, den die Zahlungsampel in der Kopfzeile
   behalten hat. */
.infoknopf{position:relative;width:30px;height:30px;padding:0;border-radius:50%;
  border:1px solid var(--rand-hell);background:var(--flaeche);color:var(--dim);
  font-family:var(--mono);font-size:13px;line-height:1;cursor:pointer;
  align-self:center;transition:color .2s ease,border-color .2s ease;
  /* Die Grundregel fuer `button` weiter oben setzt `display:inline-flex` mit
     `gap:8px`, aber KEIN justify-content - in einem 30 px breiten Kreis klebte
     das „i" damit am linken Rand, 10,4 px aus der Mitte. Bei einem normalen
     Knopf faellt das nicht auf, weil er sich um seinen Text legt. */
  justify-content:center;gap:0}
.infoknopf:hover{color:var(--txt);border-color:var(--akzent)}
.infoknopf .punkt{position:absolute;top:-2px;right:-2px;width:9px;height:9px;
  border-radius:50%;border:2px solid var(--bg);display:none}
.infoknopf .punkt.ok{display:block;background:var(--gut)}
.infoknopf .punkt.warn{display:block;background:var(--warn)}
.infoknopf .punkt.rot{display:block;background:var(--rot);
  animation:mahnblink 1.4s ease-in-out infinite}

.infotafel{display:none;position:fixed;top:64px;right:24px;z-index:60;width:min(430px,92vw);
  background:var(--flaeche);border:1px solid var(--rand-hell);border-radius:14px;
  padding:18px 20px;box-shadow:0 18px 40px rgba(0,0,0,.55)}
.infotafel.auf{display:flex;flex-direction:column;max-height:calc(100vh - 88px)}
/* Nur die Meldungen scrollen - Kopfzeile und Fuss der Tafel bleiben stehen,
   sonst sucht man den Knopf „gelesen" hinter sechs Ausfaellen. */
#infoMeldungen{overflow-y:auto;min-height:0}
.infotafel .reihe{gap:10px}

/* Vier Kacheln nebeneinander, solange der Platz reicht - und darunter das
   uebliche Umbrechen. `auto-fit` allein haette bei fuenf Kacheln mal vier und
   mal drei ergeben; bei genau vier ist die Zeile jetzt immer ganz. */
.raster.vier{grid-template-columns:repeat(auto-fit,minmax(230px,1fr))}

/* Der Auswahlbalken ueber der Tabelle. Klebt beim Blaettern oben fest: wer
   200 Artikel angehakt hat, soll den Knopf nicht suchen muessen. */
.auswahlbalken{position:sticky;top:96px;z-index:30;display:flex;align-items:center;
  gap:12px;margin-bottom:16px;padding:12px 18px;border-radius:12px;
  background:color-mix(in srgb,var(--akzent) 12%,var(--flaeche));
  border:1px solid rgba(62,207,178,.35)}
.auswahlbalken b{font-variant-numeric:tabular-nums;font-size:1.05rem}
td.haken,th.haken{width:34px;padding-right:0}
td.haken input,th.haken input{cursor:pointer;margin:0}

/* In der schmalen Info-Tafel bricht der Zahlungsstreifen um statt sich zu
   strecken - dort ist er eine Auskunft und kein Aushang. */
.infotafel .zahlstreifen{flex-direction:column;align-items:flex-start;gap:6px;
  padding:13px 15px;margin:14px 0 0}

/* Ein Werkzeug in der Liste. Bewusst schlicht: die Karte waechst mit jeder
   Datei im Ordner, und zehn verschachtelte Kaesten darin wuerden das nicht
   ueberstehen. */
.werkzeug{padding:14px 0;border-top:1px solid var(--rand)}
.werkzeug:first-child{border-top:0;padding-top:4px}
.werkzeug .feld{min-width:170px}

/* Kurze Rueckmeldung nach dem Schieben. Geht von selbst wieder. */
.kurzmeldung{position:fixed;left:50%;bottom:28px;transform:translate(-50%,14px);
  z-index:90;padding:12px 20px;border-radius:11px;font-size:.9rem;
  background:var(--flaeche2);border:1px solid var(--rand-hell);
  opacity:0;pointer-events:none;transition:opacity .2s ease,transform .2s ease}
.kurzmeldung.auf{opacity:1;transform:translate(-50%,0)}
.kurzmeldung.gut{color:var(--gut);border-color:rgba(62,207,178,.4)}
.kurzmeldung.fehler{color:var(--rot);border-color:rgba(224,108,108,.4)}
.kurzmeldung.warnung{color:var(--warn);border-color:rgba(224,163,62,.4)}

/* ---- Bausteine ---- */
.karte{background:var(--flaeche);border:1px solid var(--rand);border-radius:14px;
  padding:24px;margin-bottom:16px;
  transition:border-color .2s ease,background .2s ease}
.raster{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
/* Nur die Kennzahlkacheln heben sich beim Ueberfahren - bei Formularkarten
   waere die Bewegung beim Tippen bloss unruhig. */
.raster > .karte.kachel:hover{border-color:var(--rand-hell);background:var(--flaeche2);
  transform:translateY(-2px)}
.leise{color:var(--dim);font-size:.9rem}
.zahl{font-variant-numeric:tabular-nums}
.gross{font-size:2rem;font-weight:600;letter-spacing:-.03em;line-height:1.15}
.reihe{display:flex;gap:11px;flex-wrap:wrap;align-items:center}
.reihe.eng{gap:7px}
.wachsend{flex:1;min-width:0}

button,.knopf{background:var(--flaeche);border:1px solid var(--rand);color:var(--txt);
  padding:10px 16px;border-radius:10px;font:inherit;font-size:.9rem;cursor:pointer;
  display:inline-flex;align-items:center;gap:8px;text-decoration:none;
  transition:border-color .2s ease,background .2s ease,transform .2s ease,color .2s ease}
button:hover,.knopf:hover{border-color:rgba(62,207,178,.45);background:var(--flaeche2);
  transform:translateY(-1px);color:var(--txt)}
button:focus-visible,.knopf:focus-visible{outline:2px solid var(--akzent);outline-offset:3px}
button:disabled{opacity:.4;cursor:default;transform:none;
  border-color:var(--rand);color:var(--dim)}
button.haupt{border-color:rgba(62,207,178,.35);color:var(--akzent)}
button.haupt:hover{border-color:var(--akzent);background:rgba(62,207,178,.07)}
button.gefahr{border-color:rgba(224,108,108,.4);color:var(--rot)}
button.gefahr:hover{border-color:var(--rot);background:rgba(224,108,108,.08)}
button.klein{padding:6px 11px;font-size:.82rem}

input,select,textarea{background:var(--bg);border:1px solid var(--rand);color:var(--txt);
  padding:9px 12px;border-radius:10px;font:inherit;font-size:.9rem;width:100%;
  transition:border-color .2s ease}
input:focus,select:focus,textarea:focus{outline:0;border-color:var(--akzent)}
input.fehlerhaft{border-color:var(--rot)}
input::placeholder{color:#5a616b}
/* Beschriftungen im selben Mono-Versalsatz wie die Marker der Startseite. */
label{display:block;font-family:var(--mono);font-size:10px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--dim);margin-bottom:5px}
.feld{margin-bottom:12px}
.felder{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}
textarea{min-height:90px;font-family:var(--mono);font-size:.78rem;resize:vertical}

.marke{font-family:var(--mono);font-size:10px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--dim);border:1px solid var(--rand-hell);
  border-radius:5px;padding:3px 7px;white-space:nowrap;display:inline-block}
.marke.ok{color:var(--akzent);border-color:rgba(62,207,178,.35)}
.marke.rot{color:var(--rot);border-color:rgba(224,108,108,.35)}
.marke.warn{color:var(--warn);border-color:rgba(224,163,62,.35)}
.marke.blau{color:var(--blau);border-color:rgba(107,168,224,.35)}

/* Die Zahlungsampel in der Kopfzeile. Sie steht auf jedem Blatt und traegt die
   naechste faellige Rechnung: gruen solange nicht gemahnt wird, gelb ab der
   ersten Mahnung, rot und blinkend ab der zweiten.

   Das Blinken ist der Farbe absichtlich nachgeordnet - wer die Seite nebenbei
   offen hat, sieht die Bewegung im Augenwinkel; wer davorsitzt, liest die
   Farbe. Deshalb blinkt die Marke ganz, statt nur die Schrift zu wechseln. */
.marke.ampel{cursor:pointer;background:none;
  font-family:var(--mono);font-size:10px;letter-spacing:.14em}
.marke.ampel:hover{transform:none;background:var(--flaeche2)}
.marke.ampel.ok{background:rgba(62,207,178,.07)}
.marke.ampel.warn{background:rgba(224,163,62,.09)}
.marke.ampel.rot{background:rgba(224,108,108,.1)}
.marke.blinkt{animation:mahnblink 1.4s ease-in-out infinite}
@keyframes mahnblink{
  0%,100%{border-color:rgba(224,108,108,.35);background:rgba(224,108,108,.1)}
  50%{border-color:var(--rot);background:rgba(224,108,108,.34);color:#fff}
}

.hinweis{font-size:.9rem;border-radius:10px;padding:12px 15px;margin:12px 0;
  background:var(--flaeche2);border:1px solid var(--rand-hell)}
.hinweis.warn{color:var(--warn);border-color:rgba(224,163,62,.3);
  background:rgba(224,163,62,.05)}
.hinweis.fehler{color:var(--rot);border-color:rgba(224,108,108,.3);
  background:rgba(224,108,108,.05)}
.hinweis.gut{color:var(--akzent);border-color:rgba(62,207,178,.3);
  background:rgba(62,207,178,.05)}
.hinweis ul{margin:7px 0 0;padding-left:18px}
.hinweis li{margin:3px 0}

table{width:100%;border-collapse:collapse;font-size:.88rem}
th{text-align:left;font-family:var(--mono);font-size:10px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--dim);font-weight:400;
  padding:8px 12px 9px 0;border-bottom:1px solid var(--rand-hell);
  white-space:nowrap;position:sticky;top:0;background:var(--flaeche)}
th.klickbar{cursor:pointer;user-select:none;transition:color .2s ease}
th.klickbar:hover{color:var(--akzent)}
td{padding:9px 12px 9px 0;border-bottom:1px solid var(--rand);vertical-align:top}
td.r,th.r{text-align:right}
tr.klickbar{cursor:pointer;transition:background .15s ease}
tr.klickbar:hover td{background:var(--flaeche2)}
.tabellenrahmen{overflow-x:auto;max-height:70vh;overflow-y:auto}
/* Voll: kein inneres Scrollfenster. Wer "500 Artikel" waehlt, will sie am
   Stueck sehen und die SEITE scrollen, nicht ein 70vh-Kaestchen. Nur die
   Querachse bleibt scrollbar, damit breite Tabellen auf schmalen Schirmen nicht
   ueberlaufen; die sticky-Kopfzeile ist dann still, das ist gewollt. */
.tabellenrahmen.voll{max-height:none;overflow-y:visible}
.tabellenrahmen.voll th{position:static}
code,.mono{font-family:var(--mono);font-size:.82rem}
pre{background:var(--bg);border:1px solid var(--rand);border-radius:10px;padding:14px;
  overflow:auto;max-height:60vh;font-size:.76rem;line-height:1.5;margin:0;
  font-family:var(--mono)}

/* ---- Besonderes ---- */
.schalter{display:inline-flex;align-items:center;gap:9px;cursor:pointer;
  font-size:.9rem}
.schalter input{width:auto;margin:0;accent-color:var(--akzent)}
.balken{height:5px;border-radius:99px;background:var(--bg);overflow:hidden;
  margin-top:8px;border:1px solid var(--rand)}
.balken i{display:block;height:100%;background:var(--akzent);transition:width .3s}

/* Der Modus-Streifen. Absichtlich laut: wer hier bestellt, gibt Geld aus. */
.modus{border-radius:14px;padding:16px 20px;margin-bottom:16px;
  display:flex;align-items:center;gap:16px;flex-wrap:wrap;
  border:1px solid var(--rand-hell);background:var(--flaeche)}
.modus.test{border-color:rgba(107,168,224,.3)}
.modus.echt{border-color:rgba(224,108,108,.5);background:rgba(224,108,108,.06)}
.modus b{font-family:var(--mono);font-size:11px;letter-spacing:.16em;
  text-transform:uppercase;font-weight:400}
.modus.echt b{color:var(--rot)}
.modus.test b{color:var(--blau)}

.blaettern{display:flex;gap:9px;align-items:center;justify-content:center;
  margin-top:18px;flex-wrap:wrap}

/* ---- Rechnungen und Mahnstufen ----
   Die einzige Stelle der Oberflaeche, die von sich aus laut werden darf. Eine
   Rechnung, die auf die Deadline der 2. Mahnung zulaeuft, kostet mehr als jeder
   Preisfehler im Katalog - sie muss ins Auge springen, ohne dass man ein Blatt
   dafuer aufschlaegt.

   Fuenf Farben fuer sechs Staende: offen (ruhig), bald (blau), ueberfaellig
   (gelb), 1. und 2. Mahnung (orange bis rot), Deadline ueberschritten (rot, und
   als einzige mit Puls). */
.stufe0{--ton:#3ecfb2} .stufe1{--ton:#6ba8e0} .stufe2{--ton:#e0a33e}
.stufe3{--ton:#e08b3e} .stufe4{--ton:#e06c6c} .stufe5{--ton:#ff4d4d}

.zahlstreifen{border-radius:14px;padding:16px 20px;margin-bottom:16px;
  display:flex;align-items:center;gap:16px;flex-wrap:wrap;
  border:1px solid color-mix(in srgb,var(--ton) 45%,transparent);
  background:color-mix(in srgb,var(--ton) 7%,var(--flaeche))}
.zahlstreifen b{font-family:var(--mono);font-size:11px;letter-spacing:.16em;
  text-transform:uppercase;font-weight:400;color:var(--ton)}
.zahlstreifen.stufe5{border-color:var(--ton);animation:puls 2.4s ease-in-out infinite}
@keyframes puls{0%,100%{box-shadow:0 0 0 0 rgba(255,77,77,.32)}
  50%{box-shadow:0 0 0 7px rgba(255,77,77,0)}}

/* Eine Rechnung. Der linke Rand traegt die Farbe des Standes - beim
   Ueberfliegen sieht man die Lage, bevor man ein Wort gelesen hat. */
.rechnung{border-left:3px solid var(--ton)}
.rechnung .betrag{font-size:1.5rem;font-weight:600;letter-spacing:-.02em;
  font-variant-numeric:tabular-nums}
.rechnung .kopfreihe{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap}
.marke.stand{color:var(--ton);border-color:color-mix(in srgb,var(--ton) 45%,transparent);
  background:color-mix(in srgb,var(--ton) 9%,transparent)}

/* Die Mahnleiter. ZWEI Balken, weil es zwei Fristen sind:
   oben dick die Zahlungsfrist (Beleg -> zahlbar bis), in der Mitte die vier
   Daten, unten duenn die Mahnleiter (zahlbar bis -> Deadline). Der untere
   faengt erst an zu laufen, wenn der obere voll ist - deshalb steht er UNTER
   den Daten und nicht daneben. */
.leiter{margin:18px 0 4px;position:relative}
.leiterkopf{display:flex;align-items:baseline;gap:10px;margin-bottom:6px}
.leiterkopf .was{font-family:var(--mono);font-size:9.5px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--dim)}
.leiterkopf .leise{font-size:.78rem}
/* Ist die Regelzeit um, steht der Balken voll - und bleibt gelb, egal wie
   weit die Mahnung schon ist. Das Eskalieren erzaehlt der duenne darunter. */
.leiterbahn.frist.voll i{background:var(--warn)}
/* Der duenne. Solange er auf null steht, bleibt er grau und still - eine
   Frist, die noch nicht laeuft, soll auch nicht so aussehen. */
.mahnbahn{height:3px;border-radius:99px;background:var(--bg);margin-top:11px;
  border:1px solid var(--rand);overflow:hidden}
.mahnbahn i{display:block;height:100%;background:var(--ton);width:0;
  transition:width .4s ease}
.mahntext{margin-top:6px;font-size:.75rem;color:var(--dim)}
.mahnbahn.laeuft + .mahntext{color:var(--ton)}
.leiterbahn{height:6px;border-radius:99px;background:var(--bg);
  border:1px solid var(--rand);position:relative;overflow:hidden}
.leiterbahn i{display:block;height:100%;background:var(--ton);
  transition:width .4s ease}
.leitermarken{display:flex;margin-top:9px;gap:6px}
.leitermarke{flex:1;min-width:0;border-top:1px solid var(--rand-hell);padding-top:7px}
/* Erreichte Stufen bekommen Farbe, kuenftige bleiben grau - der Blick soll
   auf dem haengenbleiben, was schon passiert ist. */
.leitermarke.erreicht{border-top-color:var(--ton)}
.leitermarke .was{font-family:var(--mono);font-size:9.5px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--dim);display:block}
.leitermarke.erreicht .was{color:var(--ton)}
.leitermarke .wann{display:block;font-size:.82rem;font-variant-numeric:tabular-nums;
  line-height:1.35}
.leitermarke .rest{display:block;font-size:.75rem;color:var(--dim);line-height:1.35}

.rechnung .fuss{display:flex;gap:14px;flex-wrap:wrap;align-items:center;
  margin-top:16px;padding-top:14px;border-top:1px solid var(--rand)}
.pdf{color:var(--akzent)}

/* Ein Paket. Bewusst ruhiger als eine Rechnung: hier ist nichts zu bezahlen
   und nichts zu versaeumen - es ist eine Auskunft, keine Frist. Der blaue
   Streifen links haelt es trotzdem von den grauen Karten daneben getrennt. */
.paket{border-left:3px solid var(--blau);margin-bottom:14px}
.paket .kopfreihe{display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  margin-bottom:12px}
.paket .nummer{font-size:1.05rem;letter-spacing:-.01em}
.paket .tabellenrahmen{max-height:none}
.paket .hinweis{margin:0}
.paket .fuss{display:flex;gap:14px;flex-wrap:wrap;align-items:center;
  margin-top:12px;padding-top:11px;border-top:1px solid var(--rand)}

.schleier{position:fixed;inset:0;background:rgba(6,7,9,.8);z-index:80;
  display:none;align-items:flex-start;justify-content:center;
  padding:44px 18px;overflow:auto;backdrop-filter:blur(3px)}
.schleier.auf{display:flex}
.fenster{background:var(--flaeche);border:1px solid var(--rand-hell);
  border-radius:14px;padding:24px;max-width:900px;width:100%}
.fenster .kopfzeile{justify-content:space-between;display:flex;align-items:center;
  margin-bottom:14px}

.positionen td{padding:6px 10px 6px 0}
.positionen input{padding:6px 10px}

/* ---- Trichter auf der Übersicht ----
   Drei Balken, jeder am groessten (dem Katalog) gemessen. Er sagt in einem
   Blick, wie viel von der fremden Liste schon aufbereitet und verkaufsfertig
   ist - die eigentliche Tagesfrage. */
.trichter{margin-top:10px}
.trichterzeile{padding:14px 0;border-top:1px solid var(--rand)}
.trichterzeile:first-child{border-top:0;padding-top:6px}
.trichterzeile.klickbar{cursor:pointer}
.trichterzeile.klickbar:hover .trichtername{color:var(--txt)}
.trichterkopf{display:flex;align-items:baseline;gap:12px;margin-bottom:9px}
.trichtername{font-family:var(--mono);font-size:10px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--dim);transition:color .2s ease}
.trichterzahl{font-size:1.45rem;font-weight:600;letter-spacing:-.02em;
  font-variant-numeric:tabular-nums}
.trichterzahl .leise{font-size:.82rem;font-weight:400;margin-left:2px}
.trichterbahn{height:13px;border-radius:99px;background:var(--bg);
  border:1px solid var(--rand);overflow:hidden}
.trichterbahn i{display:block;height:100%;border-radius:99px;transition:width .5s ease}

/* ---- Eine Bestellung ----
   Wie ein Paket ruhig gehalten, aber mit dem Statusbalken der Mahnleiter (die
   .leiter-Bausteine oben). Der linke Streifen wandert von blau (unterwegs) auf
   gruen (empfangen), wenn der Lauf durch ist. */
.bestellung{--ton:var(--akzent);border-left:3px solid var(--blau);margin-bottom:14px}
.bestellung.stufe4{border-left-color:var(--akzent)}
.bestellung .kopfreihe{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.bestellung .nummer{font-size:1.05rem;letter-spacing:-.01em}
.bestellung .leiter{margin:14px 0 4px}
.bestellung .fuss{display:flex;gap:14px;flex-wrap:wrap;align-items:center;
  margin-top:14px;padding-top:12px;border-top:1px solid var(--rand)}

/* Aufklappbares im Artikelfenster: die rohe Datenliste des Lieferanten, der
   Lieferumfang und das Original-JSON. Alle drei sind Auskuenfte, die man
   selten braucht - aber wenn man sie braucht, dann sofort. Deshalb an Ort und
   Stelle und eingeklappt, statt auf einem eigenen Blatt.

   `<details>` bringt seinen eigenen Marker mit; der wird abgeschaltet und
   durch ein Dreieck ersetzt, das sich mitdreht - sonst sieht die Zeile in
   Chrome anders aus als in Firefox. */
details{border:1px solid var(--rand);border-radius:10px;padding:10px 12px;
  margin-top:10px;background:var(--flaeche)}
details[open]{background:var(--flaeche2)}
details > summary{list-style:none;cursor:pointer;font-family:var(--mono);
  font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--dim);
  display:flex;align-items:center;gap:8px;user-select:none}
details > summary::-webkit-details-marker{display:none}
details > summary::before{content:"▸";font-size:11px;letter-spacing:0;
  transition:transform .15s ease;display:inline-block}
details[open] > summary::before{transform:rotate(90deg)}
details > summary:hover{color:var(--txt)}
details table{margin-top:10px}

/* ---- Übersicht: Lageleiste, Geld, Ware, Läufe ----
   Alles auf diesem Blatt liest sich, nichts wird angefasst - deshalb sind es
   Zeilen und Punkte statt Formularkarten. Jede Zeile fuehrt aber dorthin, wo
   man etwas tun kann; das `klickbar` traegt die Hand. */
.lage{display:flex;flex-wrap:wrap;gap:10px;margin:0 0 16px}
.lagechip{display:flex;align-items:center;gap:9px;padding:8px 14px;
  border:1px solid var(--rand);border-radius:99px;background:var(--flaeche);
  transition:border-color .2s ease,background .2s ease}
.lagechip.klickbar{cursor:pointer}
.lagechip.klickbar:hover{border-color:var(--rand-hell);background:var(--flaeche2)}
.lagechip b{font-family:var(--mono);font-size:10px;letter-spacing:.14em;
  text-transform:uppercase;font-weight:400}
.lagechip .leise{font-size:.82rem}
/* Der Punkt traegt die Lage - er ist dieselbe Sprache wie der Punkt am
   Info-Knopf, nur groesser. */
.lagepunkt{width:8px;height:8px;border-radius:50%;background:var(--dim);
  flex:none}
.gut > .lagepunkt,.lagepunkt.gut{background:var(--gut)}
.arbeit > .lagepunkt,.lagepunkt.arbeit{background:var(--warn)}
.tot > .lagepunkt,.lagepunkt.tot{background:var(--rot)}
.lagechip.tot{border-color:rgba(224,108,108,.35);background:rgba(224,108,108,.07)}
.lagechip.arbeit{border-color:rgba(224,163,62,.3)}

/* Zwei Karten nebeneinander, solange der Platz reicht. Enger als `.raster`
   allein, damit aus zwei Karten nicht bei 800 px drei Spalten werden. */
.raster.zwei{grid-template-columns:repeat(auto-fit,minmax(340px,1fr));
  align-items:start}

/* Geld: oben die Summe, darunter die naechsten Rechnungen mit ihren zwei
   Balken. Dieselbe Bauart wie die Rechnungskarte, nur schmaler. */
.geldkopf{margin:14px 0 4px}
.geldkopf.klickbar,.geldzeile.klickbar,.paar.klickbar,.laufzeile.klickbar,
.mehr.klickbar{cursor:pointer}
.geldzeile{border-top:1px solid var(--rand);padding:13px 0 11px;
  border-left:2px solid var(--ton);padding-left:12px;margin-top:2px;
  transition:background .15s ease}
.geldzeile:hover{background:var(--flaeche2)}
.geldzeile .marke.stand{font-size:9px}
.geldzeile .leise{font-size:.78rem;margin-top:7px}
.geldzeile .leiterbahn{margin-top:9px}
.geldzeile .mahnbahn{margin-top:5px}
.mehr{margin-top:12px;font-size:.82rem}
.mehr:hover{color:var(--txt)}

/* Drei Zahlen untereinander - dieselbe Bauart wie eine Kachel, nur ohne
   Kasten drumherum, weil sie schon in einem steht. */
.paarliste{margin-top:14px}
.paar{padding:11px 0;border-top:1px solid var(--rand);
  transition:background .15s ease}
.paar:first-child{border-top:0;padding-top:4px}
.paar:hover{background:var(--flaeche2)}
.paar .gross{font-size:1.5rem}

.laufliste{margin-top:14px}
.laufzeile{display:flex;align-items:center;gap:10px;padding:10px 0;
  border-top:1px solid var(--rand);transition:background .15s ease}
.laufzeile:first-child{border-top:0}
.laufzeile:hover{background:var(--flaeche2)}
.laufzeile b{font-family:var(--mono);font-size:10px;letter-spacing:.14em;
  text-transform:uppercase;font-weight:400}
.laufzeile .leise{font-size:.78rem;font-variant-numeric:tabular-nums}

/* ---- Meldungen hinter dem Info-Knopf ----
   Eine Meldung ist eine Zeile mit Rand in ihrer Farbe. Mehr braucht es nicht:
   es stehen selten mehr als drei da, und wenn doch, ist die Reihenfolge die
   Rangfolge (Ausfall vor Frist vor Neuigkeit). */
.infotafel .meldung{border-left:2px solid var(--rand-hell);padding:9px 0 9px 12px;
  margin-top:10px;transition:background .15s ease}
.infotafel .meldung.klickbar{cursor:pointer}
.infotafel .meldung:hover{background:var(--flaeche2)}
.infotafel .meldung b{font-size:.92rem;font-weight:600}
.infotafel .meldung .leise{font-size:.82rem}
.infotafel .meldung.fehler{border-left-color:var(--rot)}
.infotafel .meldung.warn{border-left-color:var(--warn)}
.infotafel .meldung.info{border-left-color:var(--blau)}
.infotafel .meldung.abgehakt{opacity:.45}
.meldungkopf{display:flex;align-items:center;gap:8px}
.meldungkopf button{padding:2px 8px;font-size:.75rem}
/* Ein Knopf, der nicht nach Knopf schreit - fuer das Abhaken und fuer den
   Schalter „gelesene zeigen". Beides sind Nebenwege. */
button.still{border-color:transparent;color:var(--dim);background:none}
button.still:hover{color:var(--txt);border-color:var(--rand)}
.ruhig{color:var(--dim);font-size:.88rem;padding:12px 0 4px}
.infofuss{margin-top:16px;padding-top:12px;border-top:1px solid var(--rand);
  gap:8px}
.infofuss .leise{font-size:.78rem}
.infoknopf .punkt.blau{display:block;background:var(--blau)}

/* Fussmarke wie auf allen eigenen Seiten. */
.fussmarke{position:fixed;left:14px;bottom:11px;font-family:var(--mono);
  font-size:10px;letter-spacing:.1em;pointer-events:none;z-index:50}
.fussmarke a{color:#5a616b;text-decoration:none;pointer-events:auto;
  transition:color .2s ease}
.fussmarke a:hover{color:var(--akzent)}

/* Wer Bewegung abbestellt hat, bekommt auch kein Blinken und keinen Puls -
   die Farbe sagt dasselbe. `transition` allein reichte dafuer nicht, seit es
   hier Animationen gibt. */
@media (prefers-reduced-motion:reduce){
  *{transition:none!important;animation:none!important}
}
@media (max-width:640px){
  main{padding:18px 14px 74px}
  .kopf{padding:14px 14px 0}
  .karte{padding:18px 16px}
  .gross{font-size:1.7rem}
}