/* ============================================================================
   Stilbibliothek Collabo, Katalog in stil.html (Stand 08.09.2026)
   ----------------------------------------------------------------------------
   Abgeleitet aus Entwurf D ("Zusammengefuehrt", von Pipo am 04.09.2026 gewaehlt).
   Diese Datei ist der erste Traeger der gemeinsamen Stilvorlage: zuerst beweist
   sie sich im Dashboard, danach ziehen CRM, Korni BI und WaWi nach. Darum steht
   ALLES Gestalterische als Token oben und nichts als fester Wert weiter unten.
   Wer die Datei in eine andere App uebernimmt, tauscht nur die Tokengruppen.

   Die Tokengruppen, in dieser Reihenfolge:
     1. Flaechen und Linien   Seitengrund, Karte, Haarlinie, Schatten
     2. Schrift und Text      Textfarbe, gedaempfte Textfarbe, Schriftfamilien
     3. Akzent                eine Aktionsfarbe fuer Links, aktive Zustaende, Fokus
     4. Ampel                 gut, warnung, kritisch, neutral (Zustaende, nie Firmen)
     5. Firmen                je Firma ein kraeftiger Ton (Punkt, Schrift im Chip),
                              ein heller Chipgrund und ein Kachelton mit 11 %
                              Deckkraft ueber Weiss (Pipos Nachschaerfung 04.09.).
                              "allgemein" ist die neutrale Firma fuer alles ohne
                              Zuordnung (UEBERGREIFEND, MAMPFOMETER).
     6. Radien                Karte, Kachel, kleines Element, Pille
     7. Abstaende             eine Stufenleiter, damit Abstaende nicht geraten werden
     8. Schriftgroessen       eine Stufenleiter, auch auf grossen Bildschirmen
     9. Zeilen und Spalten    Trefferflaeche und fluchtende Merkmale; ab 2200 px
                              und 1300 px Hoehe etwas breitere Merkmalsspalten

   Hausregeln, die hier eingebaut sind: heller Grund, weisse Karten, Haarlinie
   statt Schatten, Ziffern in Tabellenbreite, keine Bewegung als Traeger von
   Bedeutung, sichtbarer Fokus, nichts scrollt innerhalb einer Karte.
   ========================================================================== */

/* ---------------------------------------------------------------------------
   1. TOKEN
   ------------------------------------------------------------------------ */
:root{
  /* 1. Flaechen und Linien */
  --weiss:#FFFFFF;
  --bg:#F5F7FB;
  --card:var(--weiss);
  --line:#E4E8F0;
  --line-stark:#D3D9E4;
  --schatten:rgba(20,26,34,.10);

  /* 2. Schrift und Text */
  --text:#141A22;
  --muted:#697283;        /* 4,5:1 auch auf dem Seitengrund, nicht nur auf Weiss */
  --muted-stark:#636B7B;  /* Grau fuer Text AUF getoenten Kacheln, 4,55:1 im schlechtesten Fall */
  --f-head:"Plus Jakarta Sans","Segoe UI",system-ui,sans-serif;
  --f-body:"Source Sans 3","Segoe UI",system-ui,sans-serif;
  --f-mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;

  /* 3. Akzent */
  --accent:#2F6FED;       /* Flaeche: Knopf, Avatar, Punkt */
  --accent-bg:#E8F0FE;
  --accent-dunkel:#255FD8;
  --accent-text:#2B65D8;  /* Text auf Weiss, auf accent-bg und auf jedem Firmenton */

  /* 4. Ampel: Zustandsfarben. Sie gehoeren NIE einer Firma, sonst liest man
        eine gruene Firma als guten Zustand. */
  --good:#1A9E5C;         /* Punkte und Balken */
  --warn:#E29B12;
  --crit:#D6453D;
  --good-text:#147B48;    /* dieselben Zustaende als Text, 4,5:1 auf Weiss, auf dem
                             Seitengrund UND auf jedem 11-Prozent-Firmenton */
  --warn-text:#90620C;
  --crit-text:#C13A33;
  --neutral:#8A93A6;
  --neutral-bg:#EDF0F5;
  --crit-bg:#FBE9E8;

  /* 5. Firmen. Je Firma: Ton, Chipgrund, Kachelton (11 %) und Zeigeton (18 %).
        Der Zeigeton vertieft den eigenen Ton, statt ins Graue zu kippen. */
  --korni:#127D58;        --korni-bg:#E3F5EC;
  --wurst:#1D5FBF;        --wurst-bg:#E5EEFC;
  --collabo:#6B3FD4;      --collabo-bg:#EEE8FD;
  --privat:#96650B;       --privat-bg:#FCF1DC;
  --allgemein:#656D7E;    --allgemein-bg:#EDF0F5;
  --ton-alpha:.11;        --ton-zeig:.18;
  --t-korni:rgba(18,128,90,.11);      --h-korni:rgba(18,128,90,.18);
  --t-wurst:rgba(29,95,191,.11);      --h-wurst:rgba(29,95,191,.18);
  --t-collabo:rgba(107,63,212,.11);   --h-collabo:rgba(107,63,212,.18);
  --t-privat:rgba(150,101,11,.11);    --h-privat:rgba(150,101,11,.18);
  --t-allgemein:rgba(101,109,126,.11);--h-allgemein:rgba(101,109,126,.18);

  /* 6. Radien */
  --r:14px;    /* Karte */
  --rk:10px;   /* Kachel */
  --rs:9px;    /* kleines Element, Menue */
  --rp:999px;  /* Pille und Chip */

  /* 7. Abstaende. Abstand kommt aus dem Raster, nie aus Einzelmargins. */
  --a1:4px; --a2:6px; --a3:8px; --a4:10px; --a5:14px; --a6:18px; --a7:26px;

  /* 8. Schriftgroessen */
  --s11:11px; --s12:12px; --s13:13px; --s15:15px; --s17:17px; --s24:24px; --s32:32px;

  /* 9. Zeilenhoehe der Vorgangszeilen und die Spaltenbreiten ihrer Merkmale.
     Als Token, damit alle Vorgangslisten samt Aufklappern fluchten. Drei
     Symbolflaechen samt zwei Abstaenden reichen fuer die Aktionen, der Titel
     bekommt den Rest. */
  --zeile-h:34px; --sp-meta:112px; --sp-frist:118px;
  --sp-akt:calc(3 * var(--zeile-h) + 2 * var(--a2));
}

/* Stufe 4a: eine Schriftstufe ab Desktop, ohne mehr Randabstand.
   Die 2200px-Regel unten aendert nur Breiten, skaliert also nicht doppelt. */
@media (min-width:1000px){
  :root{
    --s11:12px; --s12:13px; --s13:14px; --s15:17px; --s17:19px; --s24:27px; --s32:35px;
  }
}

/* Auf Pipos 1440p-Bildschirmen bekommen die Merkmalsspalten mehr Breite,
   ohne ueber groessere Schrift oder Abstaende zusaetzliche Hoehe zu kosten. */
@media (min-width:2200px) and (min-height:1300px){
  /* Die Schrift bleibt auf der Desktopstufe ab 1000px. Nur die waagerechten
     Merkmalsspalten werden breiter, weil das keinen zusaetzlichen Platz in
     der Hoehe kostet. */
  :root{
    --sp-meta:116px; --sp-frist:120px;
  }
  .ind{padding:1px 0}
  .knopf{padding:1px 10px;font-size:var(--s12)}
  .knopf.symbol{padding:1px 6px}
}

/* ---------------------------------------------------------------------------
   2. GRUNDLAGEN UND TYPOGRAFIE
   ------------------------------------------------------------------------ */
*{box-sizing:border-box}
body,h1,h2,h3,p,ul,ol,li,figure{margin:0;padding:0}
ul,ol{list-style:none}
[hidden]{display:none !important}
body{
  background:var(--bg);color:var(--text);
  font:400 var(--s15)/1.45 var(--f-body);
  /* Ziffern in Tabellenbreite: Zahlen in Listen und Karten sollen untereinander
     stehen, auch wenn sich der Wert beim naechsten Lauf aendert. */
  font-variant-numeric:tabular-nums;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,b,strong,.knopf{font-family:var(--f-head);font-weight:600}
button,input,select{font:inherit;color:inherit}
button{background:none;border:0;cursor:pointer}
a{color:var(--accent-text)}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:6px}
.mut{color:var(--muted)}
.s11{font-size:var(--s11)} .s12{font-size:var(--s12)} .s13{font-size:var(--s13)}
.c-warn{color:var(--warn-text)} .c-crit{color:var(--crit-text)}

/* Symbolvorrat: ein einziges SVG oben im Dokument, alles andere referenziert.
   Strichstaerke zentral, damit alle Symbole gleich schwer wirken. */
.sprite{position:absolute;width:0;height:0;overflow:hidden}
.ic{width:16px;height:16px;flex:none;fill:none;stroke:currentColor;stroke-width:1.75;
  stroke-linecap:round;stroke-linejoin:round}
.ic.gross{width:18px;height:18px}

/* Zustandsampel mit fuenf Zustaenden. Die Firmenpunkte in Filter und Mailkopf
   kennzeichnen nur die Zugehoerigkeit, niemals den Zustand einer Quelle. */
.d{width:8px;height:8px;border-radius:50%;flex:none;background:var(--neutral);display:inline-block}
.d.good{background:var(--good)} .d.warn{background:var(--warn)}
.d.crit{background:var(--crit)} .d.info{background:var(--accent)}
.d.korni{background:var(--korni)} .d.wurst{background:var(--wurst)}
.d.collabo{background:var(--collabo)} .d.privat{background:var(--privat)}
.d.allgemein{background:var(--allgemein)}

/* ---------------------------------------------------------------------------
   3. LAYOUT
   ------------------------------------------------------------------------ */
/* Grundgeruest: feste Spalte links, Rest fuer den Inhalt. */
.app{display:grid;grid-template-columns:240px minmax(0,1fr);min-height:100vh}

.leiste{display:grid;grid-template-rows:auto minmax(0,1fr) auto;gap:var(--a5);
  padding:var(--a6) var(--a5);background:var(--card);border-right:1px solid var(--line);
  position:sticky;top:0;height:100vh}
.marke{display:flex;align-items:center;gap:9px;font-family:var(--f-head);font-weight:700;font-size:var(--s17)}
.marke .zeichen{width:30px;height:30px;border-radius:9px;background:var(--accent-bg);color:var(--accent);
  display:grid;place-items:center}
.nav{display:grid;gap:var(--a1);align-content:start}
.gruppe{display:grid;gap:var(--a1)}
.abschnitt{font-size:var(--s12);color:var(--muted);letter-spacing:.04em;text-transform:uppercase;
  padding:var(--a3) var(--a3) 2px}
.reiter{display:grid;grid-template-columns:18px minmax(0,1fr) auto;align-items:center;gap:9px;
  padding:7px 9px;border-radius:var(--rs);text-align:left;font-size:var(--s15);color:var(--text)}
button.reiter:hover{background:var(--bg)}
.reiter.an{background:var(--accent-bg);color:var(--accent-text);font-weight:600}
.inhaber{display:grid;grid-template-columns:minmax(0,1fr);align-items:center;
  padding-top:var(--a4);border-top:1px solid var(--line)}

/* Die Hauptspalte waechst mit den Karten und dem nur bei Fehlern sichtbaren
   Band. Feste Rasterzeilen wuerden fuer das verborgene Band Platz reservieren. */
.haupt{display:flex;flex-direction:column;gap:var(--a3);
  padding:0 var(--a6) var(--a1);min-width:0;min-height:100vh}
.ansicht{flex:1 1 auto;display:flex;flex-direction:column;gap:var(--a3);min-width:0}
.raster{flex:1 1 auto}
.kopf,.gruss,.banner{flex:none}

/* Gleiche Randspalten halten Datum und Uhr auf jedem Schreibtisch in der
   Mitte. Beide duerfen schrumpfen: Kontingente brechen dann um, statt die
   Mitte zu verschieben oder aus dem Fenster zu ragen. */
.kopf{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);
  align-items:center;gap:var(--a4);padding:var(--a3) 0 var(--a3);border-bottom:1px solid var(--line)}
/* Der vierte Platz existiert nur auf Wissen. Ohne ihn gilt unveraendert das
   Dreierschema, auch Apps bekommen dadurch weder eine Leerspalte noch Abstand. */
.kopf.mit-suche{grid-template-columns:minmax(0,2fr) auto minmax(0,1fr) minmax(0,1fr)}
.kopf-l h1{font-size:var(--s17)}
.kopf-zeit{min-width:0;text-align:center}
.kopf-r{display:flex;align-items:center;justify-content:flex-end;gap:var(--a3);flex-wrap:wrap;min-width:0}

/* Anrede und Firmenfilter teilen sich eine Zeile, weil beide nur zum Haupt-
   Desktop gehoeren. Auf schmalen Fenstern darf die ganze Filtergruppe und
   darin jede Pille umbrechen; alle Firmen bleiben so erreichbar. */
.gruss{display:flex;align-items:center;gap:var(--a1) var(--a4);flex-wrap:wrap}
.gruss h2{font-size:var(--s24);line-height:1.15}
.gruss .chips{justify-content:flex-start;min-width:0}

/* Zwoelf Spalten, weil sich auch die drei gleichen Drittel daraus teilen lassen.
   Die Zeilen sind bewusst "auto" und keine fr-Anteile: bei fr-Zeilen rechnet der
   Browser die hoechste Karte mit der Summe der Faktoren hoch, und die Seite waere
   auf 16:9 hundert Pixel zu hoch (Lehre aus Entwurf D). Mit auto nimmt jede Zeile,
   was ihr Inhalt braucht. Aufklapper verlaengern die Seite, nichts scrollt innen. */
.raster{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--a4);
  grid-template-rows:auto auto auto;align-content:start;align-items:start}
.c4{grid-column:span 4} .c3{grid-column:span 3}

/* ---------------------------------------------------------------------------
   4. KOMPONENTEN
   ------------------------------------------------------------------------ */

/* --- Karte. Weiss, eine Haarlinie, kein Schatten: Ruhe entsteht ueber Kanten,
       nicht ueber Tiefe. --- */
.karte{background:var(--card);border:1px solid var(--line);border-radius:var(--r);
  padding:var(--a5);display:grid;grid-template-rows:auto minmax(0,1fr);gap:var(--a2);
  min-width:0;align-content:start}
.karte-kopf{display:flex;align-items:center;justify-content:space-between;gap:var(--a5)}
.karte-kopf h2{display:flex;align-items:center;gap:var(--a3);font-size:var(--s15)}
.karte-kopf .unter{font-size:var(--s12);color:var(--muted);text-align:right}
.karte-fuss{display:flex;align-items:center;gap:var(--a5);flex-wrap:wrap;
  border-top:1px solid var(--line);padding-top:var(--a2)}

/* --- Plakette: die Zahl im Kartentitel. Sie zaehlt immer genau die Zeilen,
       die diese Karte auch anzeigt (Codex A3). --- */
.plakette{font-size:var(--s12);line-height:1.35;background:var(--accent-bg);color:var(--accent-text);
  border-radius:var(--rp);padding:1px 8px;font-family:var(--f-body);font-weight:400}

/* --- Kachel: jeder Listeneintrag ist eine eigene Flaeche, keine Trennlinie.
       Der Firmenton braucht eine Flaeche, sonst ist er nicht lesbar. --- */
.kachel{border-radius:var(--rk);padding:6px var(--a5);
  transition:background-color .12s ease,background-image .12s ease}
.liste{display:grid;align-content:start;gap:var(--a2)}

/* --- Chip: das Firmenkaertchen. Getoenter Grund, dunklere Schrift derselben Farbe. --- */
.chip{font-size:var(--s12);line-height:1.35;border-radius:var(--rp);padding:2px 9px;
  justify-self:start;white-space:nowrap;display:inline-block}
.chip.korni{background:var(--korni-bg);color:var(--korni)}
.chip.wurst{background:var(--wurst-bg);color:var(--wurst)}
.chip.collabo{background:var(--collabo-bg);color:var(--collabo)}
.chip.privat{background:var(--privat-bg);color:var(--privat)}
.chip.allgemein{background:var(--allgemein-bg);color:var(--allgemein)}

/* --- Pille: Firmenfilter bei der Anrede und Kontingente im gemeinsamen Kopf. --- */
.pille{display:inline-flex;align-items:center;gap:7px;font-size:var(--s13);color:var(--text);
  background:var(--card);border:1px solid var(--line);border-radius:var(--rp);padding:4px 11px;
  white-space:nowrap;transition:background .12s ease,border-color .12s ease}
.pille:hover{background:var(--bg);border-color:var(--line-stark)}
.pille.an{background:var(--accent-bg);border-color:var(--accent-bg);color:var(--accent-text);font-weight:600}
.pille .zahl-chip{font-size:var(--s12);color:var(--muted);background:var(--bg);border-radius:var(--rp);
  padding:1px 7px;font-family:var(--f-body);font-weight:400}
.pille.an .zahl-chip{background:var(--weiss);color:var(--accent-text)}
.chips{display:flex;align-items:center;justify-content:center;gap:var(--a2);flex-wrap:wrap}
/* Umbruch allein reicht nicht: die Gruppe muss auch schrumpfen duerfen,
   sonst bleibt der zusaetzliche Stand-Chip auf dem Handy ausserhalb. */
.ampel{display:flex;justify-content:flex-end;gap:var(--a2);flex:0 1 auto;flex-wrap:wrap;min-width:0}
.ampel .pille{font-size:var(--s12);padding:var(--a1) var(--a3);cursor:default}

/* --- Schweregrad: der senkrechte Strich links an der Vorgangszeile. --- */
.mark{width:3px;align-self:stretch;min-height:16px;border-radius:2px;background:var(--neutral)}
.mark.crit{background:var(--crit)} .mark.warn{background:var(--warn)} .mark.info{background:var(--accent)}

/* --- Vorgangszeile. Feste Spalten, damit Chip, Quelle, Frist und Knoepfe ueber
       alle vier Listen fluchten. --- */
.zeilen{display:grid;gap:var(--a2);align-content:start}
.zeile{display:grid;
  grid-template-columns:3px minmax(0,1fr) var(--sp-meta) var(--sp-frist) var(--sp-akt);
  align-items:center;gap:var(--a4);padding-top:4px;padding-bottom:4px;min-height:var(--zeile-h)}
.zeile-t{line-height:1.2;overflow-wrap:anywhere;display:flex;align-items:baseline;
  gap:var(--a2);flex-wrap:wrap;font-size:var(--s13)}
.zeile-meta{display:grid;gap:0;align-content:center;justify-items:start;min-width:0;
  line-height:1.1;font-size:var(--s11)}
.zeile-meta .chip{font-size:inherit;line-height:1.3;padding:0 7px}
.zeile-meta .quelle{font-size:inherit;gap:4px}
.zeile-meta .quelle .ic{width:12px;height:12px}
.zeile-meta .listenname{font-size:inherit}
.quelle{display:flex;align-items:center;gap:var(--a2);font-size:var(--s13);color:var(--muted);white-space:nowrap}
.listenname{font-size:var(--s12);color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.frist{font-size:var(--s12);color:var(--muted);line-height:1.2}
.frist.crit{color:var(--crit-text)} .frist.warn{color:var(--warn-text)}
.aktionen{display:flex;align-items:center;justify-content:flex-end;gap:var(--a2);flex-wrap:wrap}

/* --- Knoepfe: fuehrend, normal, leise, gefaehrlich, Symbol und gesperrt.
       Beenden bleibt leise und wird erst beim Ueberfahren rot.
       Blau nur fuer Aktionen mit Folgen, weiss fuer Navigation und Anzeigen;
       hoechstens ein blauer Knopf je Kachel, auch bei offenem Kontextfeld. --- */
.knopf{display:inline-flex;align-items:center;gap:5px;font-size:var(--s13);line-height:1.25;
  padding:2px 11px;border:1px solid var(--line);border-radius:var(--rp);background:var(--card);
  white-space:nowrap;transition:background .12s ease,border-color .12s ease,color .12s ease}
a.knopf{color:var(--text);text-decoration:none}
.knopf:hover{background:var(--bg);border-color:var(--line-stark)}
.knopf.pri{background:var(--accent);border-color:var(--accent);color:var(--weiss)}
.knopf.pri:hover{background:var(--accent-dunkel)}
.knopf.leise{border-color:transparent;color:var(--muted)}
.knopf.leise:hover{border-color:var(--line);color:var(--text)}
.knopf.gefahr{border-color:transparent;color:var(--muted)}
.knopf.gefahr:hover{border-color:var(--crit);color:var(--crit-text);background:var(--crit-bg)}
/* Das Bild bleibt so klein wie das Info-Zeichen; die ganze Zeilenhoehe wird
   zum Ziel fuer die Maus, damit die Symbole 34 px Platz bieten (--zeile-h),
   am Handy 40 px. Nur diese Symbolaktionen haben eine Mindesthoehe; ein
   gewoehnlicher Textknopf kommt am PC auf rund 22 px (Codex A-148, Befund 7). */
.knopf.symbol{padding:2px 6px;color:var(--muted);justify-content:center;
  min-width:var(--zeile-h);min-height:var(--zeile-h)}
/* Der armierte Haken (erster Tipp, 18.09.2026): blau wie eine fuehrende
   Aktion, aber weiter ein Symbolknopf. Er ist der einzige blaue in der Reihe,
   darum bleibt sie ruhig, und der naechste Tipp hakt wirklich ab. */
.knopf.symbol.armiert{color:var(--accent-text);border-color:var(--accent-bg);
  background:var(--accent-bg)}
.knopf[disabled]{opacity:.5;cursor:default}
/* Selten gebrauchte Herkunft tritt zurueck, ohne aus der Tab-Reihenfolge zu
   fallen. Der Fokus in der Zeile macht sie genauso sichtbar wie die Maus. */
.zeile [data-info],.mailzeile [data-info]{opacity:0}
.zeile:hover [data-info],.zeile:focus-within [data-info],
.mailzeile:hover [data-info],.mailzeile:focus-within [data-info]{opacity:1}
.verweis{display:inline-flex;align-items:center;gap:5px;font-size:var(--s13);color:var(--accent-text);
  border-radius:6px;padding:1px 4px;text-decoration:none;transition:background .12s ease}
.verweis:hover{background:var(--accent-bg)}
a.aus,.knopf.aus{pointer-events:none;color:var(--muted);border-color:var(--line);background:var(--bg)}

/* --- Aufklapper: verlaengert die Seite, statt innen zu scrollen (Codex A4). --- */
.aufklapper{display:flex;align-items:center;gap:7px;font-size:var(--s13);color:var(--muted);
  padding:2px 6px;border-radius:6px}
.aufklapper:hover{background:var(--bg)}
.aufklapper[disabled]{opacity:.5;cursor:default}
.aufklapper .chev{transition:transform .15s ease}
.aufklapper[aria-expanded="true"] .chev{transform:rotate(180deg)}
.aufklapp-inhalt{display:grid;gap:var(--a2);padding-top:var(--a2)}

/* --- "N vermutlich ohne Antwortbedarf" am Fuss der beiden Warte-Spalten
       (Bauplan I7). Eine duenne Linie trennt den leisen
       Knopf. Das Urteil sortiert nur, darum tritt es auch optisch zurueck. --- */
.ohne-bedarf{padding-top:var(--a2);border-top:1px solid var(--line)}
.ohne-bedarf .aufklapper{padding:2px 4px;font-size:var(--s12)}
.ohne-bedarf .liste{grid-template-columns:minmax(0,1fr)}

/* --- Info-Kaestchen (Codex B3). Es erklaert die Herkunft einer Zeile und sonst
       nichts. Es liegt absolut im Dokument, damit es beim Scrollen mitwandert. --- */
.infobox{position:absolute;z-index:30;width:340px;max-width:calc(100vw - 24px);
  background:var(--card);border:1px solid var(--line-stark);border-radius:var(--rk);
  padding:var(--a5);box-shadow:0 10px 26px var(--schatten);display:grid;gap:var(--a2);font-size:var(--s13)}
.infobox h3{font-size:var(--s13);display:flex;align-items:center;justify-content:space-between;gap:var(--a3)}
.infobox dl{display:grid;grid-template-columns:auto minmax(0,1fr);gap:3px var(--a4);font-size:var(--s12)}
.infobox dt{color:var(--muted)}
.infobox dd{margin:0}
.infobox .schluessel{font-family:var(--f-mono);font-size:var(--s11);color:var(--muted);
  word-break:break-all;border-top:1px solid var(--line);padding-top:var(--a2)}

/* --- Hinweis unten mittig (Toast): bestaetigt eine Aktion, ohne den Blick zu
       verlieren. Immer derselbe Kasten, sonst ueberlagern sich mehrere. --- */
.hinweis{position:fixed;left:50%;bottom:22px;transform:translate(-50%,14px);background:var(--text);
  color:var(--weiss);font-size:var(--s13);border-radius:var(--rp);padding:9px 18px;opacity:0;
  pointer-events:none;transition:opacity .18s ease,transform .18s ease;z-index:40;max-width:90vw}
.hinweis.an{opacity:1;transform:translate(-50%,0)}
.hinweis.mit-aktion{pointer-events:auto;display:flex;align-items:center;gap:var(--a4)}
.hinweis.mit-aktion .knopf{border-color:var(--weiss);background:var(--weiss);color:var(--text)}

/* --- Indikatorzeile und Lampe in den Bereichskarten. Gleiche Zeilenform ueberall,
       damit die vier Karten als eine Reihe gelesen werden. --- */
.ind-liste{display:grid;align-content:start;gap:1px}
.ind{display:grid;grid-template-columns:8px minmax(0,1fr) auto;align-items:center;gap:9px;
  font-size:var(--s13);line-height:1.3;padding:1px 0}
.ind b{font-weight:600}
.ind .unter{display:block;font-size:var(--s12);color:var(--muted)}
.lampe{align-items:start}
.lampe .d{margin-top:6px}
.gesperrt{font-size:var(--s12);line-height:1.25;color:var(--muted);background:var(--bg);
  border-radius:var(--rk);padding:4px var(--a3)}
.gross{font-size:var(--s17);font-family:var(--f-head);font-weight:600;line-height:1.25}
.w400{font-weight:400}
/* Der letzte Block jeder Bereichskarte sitzt immer unten, sonst haengt der Link
   bei der einen Karte am Listenende und bei der anderen am Kartenrand. */
.bereich{grid-template-rows:auto auto minmax(0,1fr) auto;align-self:stretch}
.bereich>:last-child{grid-row:4;align-self:end}

/* --- Tagesueberschrift in Listen (Termine, Mails). --- */
.tag-kopf{font-size:var(--s12);line-height:1.2;color:var(--muted);padding:2px 0 0}
.spalten3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--a5)}
.spalten3>div+div{border-left:1px solid var(--line);padding-left:var(--a5)}
.spalten3>div{display:grid;grid-template-rows:auto minmax(0,1fr) auto;gap:var(--a2);min-width:0}

/* --- Mailzeile und Terminzeile. --- */
.mailzeile{display:grid;gap:1px}
.mail-kopf{display:flex;align-items:center;gap:7px;min-width:0;font-size:var(--s13);line-height:1.2}
.mail-kopf .name{min-width:0;overflow-wrap:anywhere}
.mailzeile .alter{margin-left:auto;font-size:var(--s12);color:var(--muted);white-space:nowrap}
/* Einzeiliger Betreff am PC haelt Mailkarten kompakt. Der volle Titel bleibt
   in der Infobox lesbar; auf dem Handy darf der Betreff vollstaendig umbrechen. */
.mailzeile .betreff{line-height:1.25;font-size:var(--s12);color:var(--muted);overflow-wrap:anywhere;
  display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden}
.mail-fuss{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:var(--a3);align-items:center}
.mailzeile .aktionen{justify-content:flex-end;flex-wrap:nowrap}
/* "in Gmail" ist der Zweitweg neben "Anzeigen" (der Hub ist der Hauptweg):
   derselbe Knopf, nur kleiner, damit die schmale Mailspalte nicht ueberlaeuft. */
.mailzeile .knopf.zweitweg{font-size:var(--s11);padding:2px 6px}
.art-marke{font-size:var(--s11);color:var(--muted);background:var(--bg);border-radius:var(--rp);padding:1px 7px}


/* --- Spalte in einer breiten Karte: Kopf, Liste, Link am Fuss. Die drei
       Spalten der Dringlichkeit halten so dieselbe Grundlinie. --- */
.c12{grid-column:span 12}
.spalte{display:grid;grid-auto-rows:auto;grid-template-rows:auto minmax(0,1fr) auto;
  gap:var(--a1);min-width:0;border-radius:var(--rk)}
.spalte.alt{grid-template-rows:auto auto minmax(0,1fr) auto;padding:var(--a2)}
.spalte-kopf{display:flex;align-items:center;justify-content:space-between;gap:var(--a3);min-height:22px}
.spalte-kopf h3{display:flex;align-items:center;gap:var(--a2);font-size:var(--s13)}
.leerzeile{padding:1px 0 2px var(--a5)}
.zeilen .tag-kopf+.zeile,.zeilen .tag-kopf+.kachel{margin-top:-4px}

/* Die obere Reihe waechst bei Rueckfragen und Quellenfehlern weiterhin mit.
   Ihre normale Hoehe entsteht aus kuerzerem Inhalt, ohne innere Scrollflaeche. */
.haupt-drittel{align-self:stretch;grid-template-rows:none;align-content:start}
.haupt-drittel .karte-kopf{flex-wrap:nowrap;align-items:flex-start}
.haupt-drittel .karte-kopf h2{min-width:0}
.haupt-drittel.karte .karte-kopf .verweis{flex:none;color:var(--accent-text)}
#wartungHauptStand .wartung-standzeile{line-height:1.25}
#wartungHauptStand .wartung-zeit{margin-right:var(--a3)}
#wartungHauptStand .wartung-gesamt,
#wartungHauptStand .wartung-lage,
#wartungHauptStand .wartung-zahlen{display:inline;padding:0;font:inherit}
#wartungHauptStand .wartung-lage .d{display:inline-block;margin-right:var(--a2)}
#wartungHauptLage,#wartungHauptLage .wartung-sitzung-akt{justify-content:flex-end;min-width:0;padding-top:0}
#wartungHauptLage .bestaetigung{flex-wrap:wrap;white-space:normal;max-width:100%;justify-content:flex-end}
#wartungHauptLage .knopf{max-width:100%;white-space:normal}
.sitzungen-kurz{display:flex;align-items:center;gap:var(--a3)}
@media (min-width:1000px){
  .haupt-drittel{padding-block:var(--a3);gap:var(--a1)}
}

/* Der Hinweis wohnt jetzt in einer Karte. Ein zweiter Rahmen wuerde denselben
   Inhalt doppelt einfassen; Text, Teile und Handgriff behalten ihre Bauteile. */
.hinweise{display:grid;gap:var(--a2)}
.hinweis-zeile{display:grid;grid-template-columns:8px minmax(0,1fr) auto;align-items:center;
  gap:var(--a3);font-size:var(--s13);line-height:1.25;padding:1px 0}
.hinweis-zeile .teile{display:block;font-size:var(--s12);color:var(--muted)}
/* Im Drittel sitzt der Knopf unter dem Text, damit der Hinweis lesbar bleibt. */
.hinweise .hinweis-zeile{grid-template-columns:var(--a3) minmax(0,1fr)}
.hinweise .hinweis-zeile>:nth-child(3){grid-column:2;justify-self:start}
.hinweise .hinweis-punkte{grid-column:1/-1}
/* Eine Hinweiszeile aus einer alten Quelle tritt zurueck, ohne unlesbar zu werden. */
.hinweis-zeile.alt-zeile{color:var(--muted-stark)}
.hinweis-zeile.alt-zeile .teile{color:var(--muted-stark)}
.hinweis-punkte{grid-column:2/4;display:grid;gap:2px;font-size:var(--s12);color:var(--muted);
  padding:var(--a1) 0 var(--a2) 0}
.hinweis-punkte li{display:grid;grid-template-columns:auto minmax(0,1fr);gap:var(--a2)}

/* --- Zustand der Technik steckt jetzt in der Kopfzeile neben "geprueft". --- */
.geprueft{display:inline-flex;align-items:center;gap:6px;font-size:var(--s12);color:var(--muted);
  white-space:nowrap}
.geprueft.warn{color:var(--warn-text)} .geprueft.crit{color:var(--crit-text)}

/* --- Kursblock der Privat-Karte. Reine Anzeige, der Alarm bleibt in der App. --- */
.kurs{display:grid;gap:var(--a2)}
.kurs-kopf{display:flex;align-items:baseline;gap:var(--a3);flex-wrap:wrap}
.kurs-eur{font-size:var(--s32);line-height:1.05;font-family:var(--f-head);font-weight:700}
.kurs-usd{font-size:var(--s13);color:var(--muted)}

/* --- Gemeinsame Kachelform fuer Werkzeuge und Wartung (S5, G7).
       Seit Pipos 3A vom 19.09.2026 hat JEDE Kachel dieselbe Zeilenfolge:
       Titel, drei Zeilen Beschreibung, Modellzeile, Standzeile, Fuss. Vorher
       war eine Kachel genau so hoch, wie ihr Text lang war, und nebeneinander
       stehende Gruppen fransten aus: /noshow trug vier Zeilen Beschreibung,
       die laufende Sitzung schob ein Beenden ueber den Start, und der
       Laptop-Kachel fehlte die Standzeile ganz.
       Reserviert wird ueber Zeilenhoehen statt fester Pixel, weil Schrift
       und Abstaende Token sind und ab 1000 px eine Stufe groesser werden;
       eine Pixelzahl hier liefe dieser Stufe hinterher. --- */
.hilfszeile{padding-bottom:var(--a2)}
.kacheln{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:var(--a3);
  align-content:start;align-items:stretch}
.knopfkachel{display:flex;flex-direction:column;gap:var(--a1);min-width:0;
  overflow-wrap:anywhere;border-radius:var(--rk);padding:var(--a3) var(--a5);
  background-color:var(--card);background-image:linear-gradient(var(--t-allgemein),var(--t-allgemein))}
.kachel-t{font-family:var(--f-head);font-weight:600;font-size:var(--s13);line-height:1.25}
/* Die Beschreibung: hoechstens drei Zeilen, und die drei Zeilen stehen auch
   einem Einzeiler zu. Die Auslassung allein deckelte nur den langen Text, das
   min-height allein liesse den langen Text weiterlaufen; erst beides zusammen
   ergibt eine feste Hoehe. Die Auslassung ist dabei die Notbremse und kein
   Netz: kurz halten die Texte die 110-Zeichen-Grenze fuer den angezeigten
   Text (samt Vorsatz) in knoepfe.yaml, die test_knopfdienst.py an der echten
   Tabelle prueft; gemessen bei 1401 px (Codex A-246, Befund 1). */
.knopfkachel>.kachel-b{line-height:1.45;min-height:calc(3 * 1.45 * var(--s12));
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
/* Modellzeile und Standzeile sind je genau eine Zeile hoch. Beide brechen
   nicht um, sondern enden mit einer Auslassung: der laengste Standtext
   ("Kontingent niedrig, Reset TT.MM. HH:MM") passt bei Pipos Breiten in eine
   Zeile und verliert erst in der schmalsten Vier-Spalten-Lage die Uhrzeit,
   waehrend die Erinnerung selbst stehen bleibt. Ein Umbruch dort waere eine
   Kachel, die beim Kontingentvermerk waechst. */
.knopfkachel>.modell{font-size:var(--s11);color:var(--muted);line-height:1.45;
  min-height:calc(1.45 * var(--s11));white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* Der leere Halter traegt keinen Text: die Laptop-Kachel zeigt bewusst keinen
   Sitzungszustand ("bereit" waere dort eine Zusage des VPS fuer eine Arbeit
   am Laptop), soll aber dieselbe Hoehe haben wie ihre Nachbarn. */
.knopfkachel>.wstand,.knopfkachel>.wstand-platz{font-size:var(--s12);line-height:1.45;
  min-height:calc(1.45 * var(--s12));white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* Ein Verweis "#knopf=<name>" springt zur Kachel und hebt sie vier Sekunden
   hervor (Schritt F, 19.09.2026). Gestartet wird dabei nichts: die Marke ist
   nur der Wegweiser fuer das Auge. Kein Rand und keine Groessenaenderung,
   damit die Nachbarkacheln nicht verrutschen. */
.knopfkachel.angesteuert{background:var(--accent-bg);box-shadow:0 0 0 2px var(--accent)}
/* Der Fuss ist EINE Reihe (Pipo 3A, 19.09.2026): "beenden" schmal links,
   "Sitzung starten" fuellt den Rest. Gestapelt machte ein zusaetzliches
   Beenden genau die laufende Kachel hoeher als ihre Nachbarn. Kein Umbruch
   (nowrap): eine zweite Zeile waere die Hoehe zurueck, die hier verschwinden
   soll. Ohne Beenden fuellt der Start die Reihe allein, ebenso die
   Laptop-Marke. */
.knopfkachel>.aktionen{flex-direction:row;flex-wrap:nowrap;align-items:stretch;
  justify-content:flex-start;margin-top:auto;padding-top:var(--a2);
  border-top:1px solid var(--line)}
.knopfkachel>.aktionen>.knopf{flex:1 1 auto;min-width:0;justify-content:center}
/* Feste, schmale Breite fuer das Beenden, in em statt Pixel: es traegt immer
   dasselbe eine Wort, und es soll in jeder Kachel dieselbe Spalte belegen,
   unabhaengig davon, wie lang der Text des Startknopfs daneben gerade ist
   ("Sitzung starten", "startet", "wird beendet"). */
.knopfkachel>.aktionen>.knopf.gefahr{flex:0 0 auto;width:6.4em}
/* Rueckfrage und Kontext duerfen die schmale Kachel verlaengern, aber nie
   ihre Nachbarn verdraengen. Das ist die bewusste Ausnahme von der gleichen
   Hoehe: beide sind eine offene Frage an den Menschen, der gerade davor
   sitzt, keine Dauerhoehe. Dauerhaft Platz dafuer zu reservieren hiesse, in
   jeder Kachel ein leeres Eingabefeld mitzuschleppen. Der Aktionsbereich
   bleibt fuer die bestehenden Rueckfrage- und Fokuswege derselbe Knoten;
   die Rueckfrage ersetzt seine Knoepfe und darf dabei umbrechen. */
.knopfkachel .bestaetigung{flex-wrap:wrap;white-space:normal;max-width:100%}
/* Die Rueckfrage steht anstelle der Knoepfe und bekommt deshalb deren Platz:
   ohne flex:1 sasse sie in der nowrap-Reihe zusammengedrueckt links. */
.knopfkachel>.aktionen>.bestaetigung{flex:1 1 auto;min-width:0}
.knopfkachel .kontext-feld{min-width:0}
.knopfkachel .kontext-akt>.knopf{max-width:100%;white-space:normal}
/* Die eigene Ansicht gibt der App die bisherige Rahmenhoehe und den uebrigen
   Platz unter dem gemeinsamen Kopf. Verborgene App-Flaechen kosten keinen
   Platz, bleiben aber geladen. Hinweis und leise Aktionen duerfen umbrechen. */
#view-app{min-height:82vh}
.app-rahmen-leiste{display:flex;align-items:center;flex-wrap:wrap;gap:var(--a3) var(--a4);min-width:0}
.app-rahmen-leiste p{flex:1 1 auto;min-width:0}
.app-rahmen-aktionen{display:flex;align-items:center;justify-content:flex-end;
  flex-wrap:wrap;gap:var(--a4);min-width:0}
.app-rahmen-flaeche{flex:1 1 auto;display:grid;min-height:0;min-width:0}
.app-rahmen{width:100%;height:100%;min-height:68vh;border:1px solid var(--line);
  border-radius:var(--rk);background:var(--bg);display:block}

/* Die drei Arbeitsbereiche teilen die Breite; die Sitzungen bleiben als
   eigene Rasterzeile darunter. Schrumpfbare Spalten halten lange Texte im Bild. */
.knopfgruppen{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--a4);align-content:start}
.knopfgruppe{min-width:0}
.knopfgruppe .kacheln{grid-template-columns:minmax(0,1fr)}

/* --- Kontext vor dem Start eines Werkzeugs (Pipos I1 vom 06.09.2026).
       Dieselbe Sprache wie das Wissens-Formular: Karte mit Rahmen, graue
       Beschriftung ueber dem Feld, Knopfreihe darunter. Es steht direkt unter
       den Kachelaktionen, damit sichtbar bleibt, zu WELCHEM Werkzeug
       der Text gehoert. --- */
.kontext-feld{display:grid;gap:var(--a1);margin-top:var(--a2);padding:var(--a3);
  background:var(--card);border:1px solid var(--line);border-radius:var(--rk)}
.kontext-feld label{font-size:var(--s12);color:var(--muted)}
.kontext-feld textarea{width:100%;font-size:var(--s13);line-height:1.4;padding:5px 10px;
  border:1px solid var(--line);border-radius:var(--rs);background:var(--card);
  color:var(--text);resize:vertical;font-family:var(--f-body)}
/* Der Zaehler steht rechts unter dem Feld, wo das Auge nach dem Tippen ohnehin
   hinfaellt. Rot erst, wenn die Grenze wirklich ueberschritten ist. */
.kontext-zaehler{justify-self:end}
.kontext-zaehler.zuviel{color:var(--crit-text)}
.kontext-akt{display:flex;align-items:center;gap:var(--a3);flex-wrap:wrap;padding-top:var(--a1)}

/* --- Laptop-Kachel (Kassenbuch, 18.09.2026). Die Marke steht dort, wo sonst
       der Startknopf steht, sieht aber bewusst nicht wie er aus: sie startet
       nichts, sie klappt den Stand auf. Das Feld darunter borgt sich die Form
       des Kontextfeldes, damit die Kachel nicht zwei Sprachen spricht. --- */
.marke-laptop{border-style:dashed;color:var(--muted)}
.lokal-feld{display:grid;gap:var(--a1);margin-top:var(--a2);padding:var(--a3);
  background:var(--card);border:1px solid var(--line);border-radius:var(--rk);min-width:0}
.lokal-feld>.knopf{justify-self:start;max-width:100%}
.lokal-satz{display:flex;align-items:center;gap:var(--a3);flex-wrap:wrap;min-width:0}
.lokal-startsatz{font-family:var(--f-mono);font-size:var(--s13);
  padding:2px var(--a1);border-radius:var(--rs);background:var(--bg);
  overflow-wrap:anywhere;min-width:0}

/* --- Wissen verwendet die Karten und Aufklapper der anderen Schreibtische.
       Nur der Kopfplatz und die Anordnung der Titelzeile brauchen eigene Regeln. --- */
.wissen-kopf-r{display:flex;align-items:center;justify-content:flex-end;gap:var(--a4);flex-wrap:wrap;min-width:0}
.wissen-suche{display:flex;align-items:center;min-width:0}
.wissen-suche input{width:100%;min-width:0;font-size:var(--s13);line-height:1.25;
  padding:var(--a1) var(--a4);border:1px solid var(--line);border-radius:var(--rp);
  background:var(--card);color:var(--text)}
.wissen-suche input::placeholder{color:var(--muted)}
/* Ein alter Stand faerbt den Text der Kopfzeile; die Regel muss die
   Standardfarbe von .karte-kopf .unter schlagen, darum diese Schreibweise.
   In einer grauen Karte gewinnt das Grau: dort ist ohnehin nichts frisch, und
   eine einzelne Warnfarbe im grauen Block widersprach Codex A-67, Befund 3. */
.karte-kopf .unter.c-warn{color:var(--warn-text)}
.karte.alt .karte-kopf .unter.c-warn{color:var(--muted-stark)}
/* Themenpillen bleiben linksbuendig ueber die volle Rasterbreite, damit
   mehrere Themen dieselbe gemeinsame Navigation wie Firmenfilter nutzen. */
#wissenRaster>.wissen-themen{justify-content:flex-start;grid-column:1/-1;grid-row:auto}
/* Eine ganze Titelzeile ist ein Aufklapper. Der Obsidian-Link hat sein eigenes
   Ziel; die letzte Spalte gibt dem Pfeil dieselbe Trefferflaeche wie den
   Zeilenaktionen. Der native Marker entfaellt zugunsten des gemeinsamen Symbols. */
.wissen-karte>.karte-kopf{flex-wrap:wrap}
.wissen-karte h2{min-width:0;overflow-wrap:anywhere}
.wissen-zeile{min-width:0}
.wissen-zeilenkopf{display:grid;grid-template-columns:minmax(0,1fr) auto var(--zeile-h);
  gap:var(--a2);color:var(--text);text-align:left;list-style:none;cursor:pointer}
.wissen-zeilenkopf::-webkit-details-marker{display:none}
.karte.alt .wissen-zeilenkopf{color:var(--muted-stark)}
.wissen-zeilentext{display:flex;align-items:center;gap:var(--a3);flex-wrap:wrap;min-width:0}
.wissen-titel{font-weight:600;overflow-wrap:anywhere}
.wissen-herkunft{display:flex;align-items:center;gap:var(--a3);flex-wrap:wrap;
  font-size:var(--s12);color:var(--muted-stark);min-width:0;overflow-wrap:anywhere}
.wissen-pfeil{grid-column:3;display:grid;place-items:center;
  min-width:var(--zeile-h);min-height:var(--zeile-h)}
.wissen-notiz-link{color:var(--muted-stark);font-size:var(--s12)}
.wissen-notiz-link:hover{background:var(--bg);color:var(--text)}
.wissen-zeile .wissen-text{padding:var(--a2) var(--a2) var(--a4)}

/* Text einer Kachel. Listen und Zitate kommen aus der Notiz, darum bekommen sie
   ihre Aufzaehlungszeichen zurueck (die Grundregel nimmt sie allen Listen). */
.wissen-text{font-size:var(--s13);line-height:1.45;display:grid;gap:var(--a2)}
.wissen-text p,.wissen-text li{overflow-wrap:anywhere}
.wissen-text ul{list-style:disc;padding-left:var(--a6);display:grid;gap:2px}
.wissen-text ol{list-style:decimal;padding-left:var(--a6);display:grid;gap:2px}
.wissen-text li{display:list-item}
.wissen-text blockquote{margin:0;padding-left:var(--a4);border-left:3px solid var(--line-stark);
  color:var(--muted-stark)}
.wissen-text code{font-family:var(--f-mono);font-size:var(--s12);background:var(--bg);
  border-radius:6px;padding:0 4px}
/* Ein Codezaun aus der Notiz. Lange Zeilen brechen um, statt in der Kachel zu
   scrollen (Bauregel 5: in einer Kachel scrollt nichts); das Kaertchen des
   einzelnen Code-Laufs waere hier doppelt, darum bekommt es innen keinen
   eigenen Grund. */
.wissen-text pre{margin:0;min-width:0}
.wissen-code{font-family:var(--f-mono);font-size:var(--s12);line-height:1.45;
  background:var(--bg);border-radius:var(--rk);padding:var(--a3) var(--a4);
  white-space:pre-wrap;overflow-wrap:anywhere}
.wissen-code code{background:none;border-radius:0;padding:0;font-size:inherit}
/* Wikilinks oeffnen Obsidian auf dem Geraet; ohne gueltiges Ziel bleibt
   die Auszeichnung als Text stehen. Der Browser ruft dafuer keinen Server. */
.wissen-text .wiki{color:var(--accent-text);border-bottom:1px dotted var(--accent-text);text-decoration:none}
.wissen-text a.wiki:hover,.wissen-text a.wiki:focus-visible{border-bottom-style:solid}

/* Der Entwurf ersetzt den leisen Verweis im Kartenfuss. Die volle Breite
   bleibt nutzbar, auch wenn ein Suchergebnis daneben keinen Titel mehr zeigt. */
.wissen-form{width:100%;min-width:0;display:grid;gap:var(--a1);max-width:760px;background:var(--card);
  border:1px solid var(--line);border-radius:var(--rk);padding:var(--a5)}
.wissen-form label{font-size:var(--s12);color:var(--muted)}
.wissen-form input,.wissen-form textarea,.wissen-form select{width:100%;font-size:var(--s13);
  line-height:1.4;padding:5px 10px;border:1px solid var(--line);border-radius:var(--rs);
  background:var(--card);color:var(--text)}
.wissen-form textarea{resize:vertical;font-family:var(--f-body)}
.wissen-form label+*{margin-bottom:var(--a3)}
.wissen-form-akt{display:flex;align-items:center;gap:var(--a3);padding-top:var(--a1)}
/* Der Kategoriename bleibt ein kompaktes Formular unter den Karten. */
.wissen-form-kat{display:flex;align-items:center;gap:var(--a3);flex-wrap:wrap;max-width:none;
  padding:var(--a2) var(--a4)}
.wissen-form-kat label{white-space:nowrap}
.wissen-form-kat input{width:auto;min-width:210px}
.wissen-form-kat .wissen-form-akt{padding-top:0}

/* --- Wartungs-Desktop. Er zeigt Zustaende, keine Zahlenreihen: darum
       ueberall dieselbe Zeilenform wie in den Bereichskarten des
       Haupt-Desktops (Punkt, Name, Wert) und dieselben Aufklapper. Neu sind
       nur die Detailliste, die Protokollzeile und der groessere Punkt der
       Gesamtlage. --- */
.wartung-kopf-r{display:flex;align-items:center;justify-content:flex-end;gap:var(--a4);flex-wrap:wrap}
/* Derselbe S4-Block steht hier im vollen Kartenkopf: links die Gesamtlage,
   rechts Stand und Handgriff. Das normale Kartenpolster haelt den Knopf vom
   Rand weg, schrumpfbare Spalten lassen auch die Stop-Rueckfrage umbrechen. */
.wartung-kopf>.karte-kopf{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,auto);
  align-items:start;gap:var(--a2) var(--a5)}
.wartung-kopf .wartung-gesamt{grid-column:1;grid-row:2;min-width:0;overflow-wrap:anywhere}
.wartung-kopf .wartung-sitzung-akt{grid-column:2;grid-row:2;min-width:0;
  justify-content:flex-end;padding-top:0}
.wartung-kopf .bestaetigung{flex-wrap:wrap;white-space:normal;max-width:100%}
.wartung-kopf .wartung-sitzung-akt .knopf{max-width:100%;white-space:normal}
.wartung-gesamt{display:grid;gap:2px;padding-bottom:var(--a1)}
.wartung-lage{display:flex;align-items:center;gap:var(--a3);font-family:var(--f-head);
  font-weight:600;font-size:var(--s17);line-height:1.25}
/* Der Punkt der Gesamtlage ist groesser als der einer Zeile: er gilt fuer die
   ganze Seite und soll aus drei Metern Abstand lesbar sein. */
.wartung-lage .d.gross{width:12px;height:12px}
/* Block statt Flex: als Flex-Behaelter fiele das Leerzeichen hinter dem Komma
   weg, und dort stuende "1 rot,12 gelb". */
.wartung-zahlen{display:block}
.wartung-zahlen .mut{font-weight:400}
.wartung-knoepfe{padding-top:var(--a2)}
/* Kein Gegengift mehr noetig: die Platzierung der 2199er Stufe ist seit
   05.09.2026 auf ".zeile .aktionen" begrenzt, greift also gar nicht erst in
   die Knopfkachel. Der volle Kachelfuss kommt gemeinsam aus
   ".knopfkachel>.aktionen", damit Wartung dieselbe Form wie Werkzeuge nutzt. */
.wartung-nie{padding-top:var(--a1)}

/* Gleich hohe Karten je Rasterzeile (Pipo, 05.09.2026): eine Karte mit sieben
   Zeilen neben einer mit zweien laesst die Reihe ausfransen. Nur dieses Raster
   dehnt, die anderen Schreibtische behalten ihr align-items:start aus .raster;
   ohne den Vorsatz wuerden auch die Karten des Haupt-Desktops gestreckt. */
#wartungRaster{align-items:stretch}

/* Bereichskarte: Punkt im Titel, Zeilen darunter, Link ins Zielsystem rechts
   im Kopf. Der Link ist nur ein Pfeil; seine Beschriftung steht im aria-label,
   weil in der Kopfzeile kein Platz fuer einen zweiten Text ist.
   Die Karte ist hier eine Spalte statt eines Rasters: die Zeilenliste soll den
   uebrigen Platz schlucken, damit der Aufklapper darunter in allen Karten der
   Reihe auf einer Linie steht. */
.wartung-bereich{display:flex;flex-direction:column}
.wartung-bereich>.ind-liste{flex:1 1 auto}
.wartung-mehr{margin-top:auto;padding-top:var(--a2)}
.wartung-mehr .aufklapper{padding:0 4px;font-size:var(--s12)}
.wartung-bereich .karte-kopf h2{gap:var(--a3);min-width:0}
.wartung-bereich .karte-kopf h2 span{overflow-wrap:anywhere}
.wartung-bereich .verweis{flex:none}
.wartung-zeile{padding:2px 0}
.wartung-mitte{display:grid;gap:1px;min-width:0}
/* Name und, wenn die Zeile ein Ziel hat, ein kleiner Pfeil daneben. */
.wartung-zeilenkopf{display:flex;align-items:center;gap:var(--a2);min-width:0}
.wartung-zeilenkopf>span{overflow-wrap:anywhere}
a.wartung-zeilenlink{flex:none;padding:0 2px}
.wartung-mitte .aufklapper{justify-self:start;padding:0 4px;font-size:var(--s12)}
/* Eine dokumentierte Luecke ist kein Befund: gedaempfter Text und ein Wort
   davor, damit niemand sie fuer eine neue Stoerung haelt. Die Zeile bleibt
   lesbar (--muted haelt 4,5:1), sie tritt nur zurueck. */
.wartung-bekannt .wartung-zeilenkopf>span,.wartung-bekannt b{color:var(--muted);font-weight:400}
.art-marke.bekannt{color:var(--muted);background:var(--bg)}
/* "Was zu tun ist": ein eigener Kasten mit Ueberschrift, keine weitere
   Detailzeile. Er steht ueber den Details, weil die Handlung vor der Messung
   kommt, und hebt sich vom Kartengrund ab, damit man ihn im Aufklapper findet. */
.wartung-empfehlung{display:grid;gap:1px;background:var(--bg);border-radius:var(--rk);
  padding:var(--a3) var(--a4);font-size:var(--s12);line-height:1.4}
.wartung-empfehlung-t{font-family:var(--f-head);font-weight:600;color:var(--muted)}
.wartung-empfehlung p{overflow-wrap:anywhere}
/* Der Sitzungsknopf im Protokoll. Linksbuendig statt des rechtsbuendigen
   .aktionen: er steht am Ende eines Fliesstextes, nicht am Rand einer Zeile. */
.wartung-sitzung-akt{justify-content:flex-start;gap:var(--a3);padding-top:var(--a1)}
.wartung-sitzung-akt .wstand{color:var(--muted)}
.wartung-sitzung-akt .wstand.laeuft{color:var(--good-text)}
.wartung-sitzung-akt .wstand.gesperrt{color:var(--warn-text)}
/* Kontingent-Vermerk (Erinnerung statt Sperre, 13.09.2026): gelb wie die
   Ampel, auf Kacheln wie in den Wartungskaesten. Der Knopf daneben bleibt an. */
.wstand.warnung{color:var(--warn-text)}
.karte.alt .wartung-sitzung-akt .wstand{color:var(--muted-stark)}

/* Detailliste eines Aufklappers: zwei Spalten, Bezeichnung grau, Wert normal.
   Dieselbe Form wie im Info-Kaestchen, damit man sie nicht neu lesen muss. */
.wartung-details{display:grid;grid-template-columns:auto minmax(0,1fr);gap:2px var(--a4);
  font-size:var(--s12);line-height:1.35}
.wartung-details dt{color:var(--muted)}
.wartung-details dd{margin:0;overflow-wrap:anywhere}
.karte.alt .wartung-details dt,.karte.alt .wartung-details dd{color:var(--muted-stark)}
/* Zeilen einer nicht lesbaren Quelle: sie stehen als Anschauung da, aber
   nichts daran laesst sich mehr bedienen. inert nimmt sie aus Tastatur und
   Vorleser heraus, der Zeiger wird hier zusaetzlich abgestellt (aeltere
   Browser kennen inert nicht). */
[inert]{pointer-events:none;cursor:default}

/* Protokoll: eine Zeile je Ereignis, vier Spalten (Zeit, Bereich, Text,
   Chevron). Zeilen mit Details sind Knoepfe, damit die Tastatur sie oeffnet;
   Zeilen ohne Details bleiben Text (kein Bedienelement ohne Wirkung, A7). */
.wartung-prot-inhalt{display:grid;gap:var(--a3);align-content:start}
.wartung-chips{justify-content:flex-start}
.wartung-prot{display:grid;gap:1px;align-content:start}
.wartung-prot-zeile{display:grid;grid-template-columns:8px minmax(0,1fr);gap:9px;
  align-items:start;padding:1px 0}
.wartung-prot-zeile>.d{margin-top:7px}
.wartung-prot-knopf{display:grid;grid-template-columns:190px 150px minmax(0,1fr) auto;
  gap:var(--a4);align-items:baseline;width:100%;text-align:left;font-size:var(--s13);
  line-height:1.3;padding:2px var(--a3) 2px 0;border-radius:var(--rs)}
button.wartung-prot-knopf:hover{background:var(--bg)}
.wartung-prot-knopf .chev{transition:transform .15s ease;align-self:center}
.wartung-prot-knopf[aria-expanded="true"] .chev{transform:rotate(180deg)}
.wartung-zeit{font-size:var(--s12);color:var(--muted);white-space:nowrap}
.wartung-prot-bereich{font-size:var(--s12);color:var(--muted);overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
.wartung-prot-text{overflow-wrap:anywhere;display:flex;align-items:baseline;gap:var(--a3);
  flex-wrap:wrap}
/* Ein offenes Ereignis traegt seine Marke im Text, nicht in einer eigenen
   Spalte: sonst stuende bei 60 abgeschlossenen Zeilen eine leere Spalte da. */
.art-marke.offen{color:var(--warn-text);background:var(--bg)}
.wartung-prot-zeile .aufklapp-inhalt{grid-column:2;padding-bottom:var(--a2)}
.wartung-prot-details{margin:0;font-family:var(--f-mono);font-size:var(--s12);line-height:1.45;
  background:var(--bg);border-radius:var(--rk);padding:var(--a3) var(--a4);
  white-space:pre-wrap;overflow-wrap:anywhere}
.karte.alt .wartung-prot-text,.karte.alt .wartung-zeit,
.karte.alt .wartung-prot-bereich,.karte.alt .wartung-lage{color:var(--muted-stark)}

/* --- Rueckfrage direkt in der Zeile: sie ersetzt die Knoepfe, statt ein
       Fenster ueber die Seite zu legen. --- */
.bestaetigung{display:flex;align-items:center;gap:var(--a2);font-size:var(--s12);
  color:var(--text);white-space:nowrap}
/* Die Symbolspalte ist schmaler als der Rueckfragetext. Die Frage darf die
   Zeile verlaengern, damit Ja und Nein weder Nachbarspalten noch Titel ueberdecken. */
.zeile .bestaetigung{flex-wrap:wrap;white-space:normal;max-width:100%}
.erledigt-marke{font-size:var(--s12);color:var(--good-text);white-space:nowrap}

/* --- Firmenton. Er liegt als eigene Ebene ueber dem Weiss der Karte, nicht als
       Farbe dahinter: sonst mischt sich der Seitengrund ein und derselbe Ton
       kippt je nach Ort. --- */
.f-korni,.f-wurst,.f-collabo,.f-privat,.f-allgemein{background-color:var(--card)}
.f-korni{background-image:linear-gradient(var(--t-korni),var(--t-korni))}
.f-wurst{background-image:linear-gradient(var(--t-wurst),var(--t-wurst))}
.f-collabo{background-image:linear-gradient(var(--t-collabo),var(--t-collabo))}
.f-privat{background-image:linear-gradient(var(--t-privat),var(--t-privat))}
.f-allgemein{background-image:linear-gradient(var(--t-allgemein),var(--t-allgemein))}
/* Der Zeigeton vertieft den eigenen Ton: ein grauer Hover wuerde die
   Firmenzuordnung ausgerechnet dort loeschen, wo der Zeiger gerade steht. */
.kachel.f-korni:hover{background-image:linear-gradient(var(--h-korni),var(--h-korni))}
.kachel.f-wurst:hover{background-image:linear-gradient(var(--h-wurst),var(--h-wurst))}
.kachel.f-collabo:hover{background-image:linear-gradient(var(--h-collabo),var(--h-collabo))}
.kachel.f-privat:hover{background-image:linear-gradient(var(--h-privat),var(--h-privat))}
.kachel.f-allgemein:hover{background-image:linear-gradient(var(--h-allgemein),var(--h-allgemein))}

/* ---------------------------------------------------------------------------
   5. ZUSTAENDE
   ------------------------------------------------------------------------ */
/* Quelle nicht lesbar (quelle_ok false): grauer Kasten mit Stand und Grund, der
   Inhalt tritt zurueck. Nie ein gruener Anschein auf alten Zahlen (Bauregel 3). */
.stand-hinweis{font-size:var(--s12);line-height:1.3;color:var(--muted);background:var(--bg);
  border:1px solid var(--line);border-radius:var(--rk);padding:var(--a2) var(--a4)}
.karte.alt,.spalte.alt{background-image:linear-gradient(var(--t-allgemein),var(--t-allgemein))}
.karte.alt{background-color:var(--card)}
/* Inhalt eines nicht vertrauenswuerdigen Blocks: grau, aber lesbar. Ueberschrift
   und Standhinweis behalten die volle Textfarbe, sonst sucht man den Grund. */
.karte.alt .zeile-t,.karte.alt .betreff,.karte.alt .ind,.karte.alt .mail-kopf,
.karte.alt .tag-kopf,.karte.alt .gesperrt,.karte.alt .kurs,
.spalte.alt .zeile-t,.spalte.alt .tag-kopf,.spalte.alt .leerzeile{color:var(--muted-stark)}
.karte.alt .d,.karte.alt .mark,.spalte.alt .d,.spalte.alt .mark{background:var(--neutral)}
.karte.alt .kachel,.spalte.alt .kachel{background-image:linear-gradient(var(--t-allgemein),var(--t-allgemein))}
.karte.alt .chip,.spalte.alt .chip{background:var(--neutral-bg);color:var(--muted-stark)}
/* Auf der getoenten Karte reicht --muted nicht mehr (4,21:1 auf #EEEFF1):
   dort bekommt auch der uebrige graue Text den staerkeren Ton, 4,66:1
   (Codex A-74, Befund 15). */
.karte.alt .mut,.spalte.alt .mut{color:var(--muted-stark)}
.karte.alt .plakette,.spalte.alt .plakette{background:var(--neutral-bg);color:var(--muted-stark)}
.karte.alt .frist,.karte.alt .c-warn,.karte.alt .c-crit,
.karte.alt .verweis,.karte.alt b,.karte.alt .quelle,.karte.alt .listenname,.karte.alt .alter,
.spalte.alt .frist,.spalte.alt .verweis,.spalte.alt b,.spalte.alt .quelle,.spalte.alt .listenname{color:var(--muted-stark)}
/* Kontingent-Pillen ohne frische Messung: grau, mit Stand daneben. */
.ampel.alt .d{background:var(--neutral)}
/* Einzelwert nicht messbar: Text statt erfundener Null. */
.unmessbar{color:var(--muted)}

/* Aktion abgeschickt, aber die Datei wird nur alle fuenf Minuten neu geschrieben:
   die Kachel zeigt bis dahin den gewollten Zustand, sichtbar abgesetzt. */
.wartet,.wartet .betreff,.wartet .mail-kopf,.wartet .zeile-t{color:var(--muted-stark)}
.wartet .d,.wartet .mark{background:var(--neutral)}

/* Schmales Band, wenn die Daten nicht mehr erreichbar sind. */
.banner{font-size:var(--s13);color:var(--crit-text);background:var(--crit-bg);border:1px solid var(--crit);
  border-radius:var(--rk);padding:var(--a2) var(--a5)}

/* ---------------------------------------------------------------------------
   6. RESPONSIVE
   ------------------------------------------------------------------------ */
/* Unter 2200 px sind die drei Spalten der Dringlichkeit zu schmal fuer eine
   Spur: die feste Merkmalsspalte, die Frist und drei Bedienelemente lassen dem
   Titel dort nur noch ein paar Pixel. Darum stapelt die Zeile hier: Titel,
   Frist, Merkmalsblock untereinander, die Knoepfe bleiben rechts. Der
   Merkmalsblock wird dabei waagerecht, sonst waere die Zeile fuenf Zeilen hoch. */
@media (max-width:2199px){
  .zeile{grid-template-columns:3px minmax(0,1fr) var(--sp-akt);align-items:start}
  .mark{grid-row:1/4}
  .zeile-t{grid-column:2;grid-row:1}
  .zeile-frist{grid-column:2;grid-row:2}
  .zeile-meta{grid-column:2;grid-row:3;display:flex;flex-wrap:wrap;align-items:center;
    gap:2px var(--a4)}
  /* Nur die Knopfreihe DER VORGANGSZEILE wandert in die dritte Spur. Ohne den
     Vorsatz ".zeile" traf die Regel jedes ".aktionen" der Seite: in der
     Knopfkachel (Werkzeuge, Wartung) und in der Mailkachel entstand dadurch
     eine dritte Spalte, die es dort nicht gibt, und der Inhalt hing aus der
     Kachel heraus (gemessen auf 1920 px). */
  .zeile .aktionen{grid-column:3;grid-row:1/4;justify-content:flex-end}
}
@media (max-width:1400px){
  /* Zeit und Bereich brauchen hier weniger Platz, damit dem Text der
     Protokollzeile mehr als eine Handbreit bleibt. */
  .wartung-prot-knopf{grid-template-columns:170px 120px minmax(0,1fr) auto;gap:var(--a3)}
  .chips{grid-column:1;grid-row:2;justify-content:flex-start}
  .spalten3{grid-template-columns:minmax(0,1fr)}
  .spalten3>div+div{border-left:0;border-top:1px solid var(--line);padding-left:0;padding-top:var(--a4)}
}
/* Unter 1000 px stapelt alles: die Seitenleiste wird zur schmalen Kopfreihe.
   Der gemeinsame Kopf folgt seiner Lesereihenfolge Titel, Zeit, Kontingente,
   damit auch auf dem Handy jede Angabe vollstaendig erreichbar bleibt. */
@media (max-width:1000px){
  .app{grid-template-columns:minmax(0,1fr)}
  /* Die Seitenleiste wird eine Kopfreihe aus zwei Zeilen: oben Marke und
     Inhaber nebeneinander, darunter Schreibtische und Apps. Vorher standen Marke,
     Navigation und Inhaber untereinander und kosteten 200 px, bevor der erste
     Vorgang zu sehen war (gemessen 05.09.2026 auf 430 px). */
  .leiste{position:static;height:auto;border-right:0;border-bottom:1px solid var(--line);
    grid-template-columns:minmax(0,1fr) auto;grid-template-rows:auto auto;
    gap:var(--a3) var(--a4);padding:var(--a3) var(--a5)}
  .marke{grid-column:1;grid-row:1;font-size:var(--s15)}
  /* Der Inhaber sitzt neben der Marke, wo die Zeile ohnehin leer ist. Seine
     Trennlinie faellt weg: sie waere hier eine zweite Linie direkt ueber der
     Unterkante der Kopfreihe. */
  .inhaber{grid-column:2;grid-row:1;justify-self:end;border-top:0;padding-top:0;
    grid-template-columns:auto;gap:0;text-align:right}
  .nav{grid-column:1/-1;grid-row:2;grid-template-columns:minmax(0,1fr);gap:var(--a2)}
  .kacheln{grid-template-columns:minmax(0,1fr)}
  .gruppe{grid-column:1/-1}
  .abschnitt{grid-column:1/-1}
  /* Schreibtische und Apps nutzen dieselbe umbrechende Pillenleiste. Jeder
     Eintrag nimmt nur seine eigene Breite, hoechstens die des Fensters. */
  .desk-leiste{display:flex;flex-wrap:wrap;gap:var(--a2)}
  .desk-leiste .reiter{display:inline-flex;align-items:center;gap:7px;flex:0 0 auto;
    min-height:40px;max-width:100%;padding:6px 13px;border:1px solid var(--line);border-radius:var(--rp);
    background:var(--card)}
  .desk-leiste .reiter.an{background:var(--accent-bg);border-color:var(--accent-bg)}
  /* "Desktops" bleibt fuer den Vorleser benannt; "Apps" bleibt auch im Bild,
     damit die zweite Pillenleiste als eigene Gruppe erkennbar ist. */
  #abschnittDesk{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);
    white-space:nowrap;padding:0}
  .haupt{padding:0 var(--a5) var(--a5)}
  .kopf,.kopf.mit-suche{grid-template-columns:minmax(0,1fr);gap:var(--a3);
    padding:var(--a3) 0 var(--a3)}
  .kopf-zeit{text-align:left}
  .kopf-r{justify-content:flex-start}
  .chips{grid-column:1;grid-row:auto;justify-content:flex-start}
  .ampel{justify-content:flex-start}
  .karte-kopf,.spalte-kopf{flex-wrap:wrap}
  .karte-kopf .unter{text-align:left}
  .raster{grid-template-columns:minmax(0,1fr);grid-template-rows:none}
  .raster>*{grid-column:1/-1}
  /* Die Vorgangszeile stapelt in EINER Spur, in der Reihenfolge, in der man
     sie mit dem Daumen liest: woher (Firma, Quelle, Liste), was, wann, dann
     die Knoepfe. Vorher lagen Frist und Merkmalsblock beide in Reihe 3 und
     ueberdruckten sich Buchstabe auf Buchstabe (gemessen 05.09.2026, 430 px). */
  .zeile{grid-template-columns:3px minmax(0,1fr);gap:2px var(--a4)}
  .mark{grid-row:1/5}
  /* Auch hier gilt die Platzierung nur der Vorgangszeile: eine Knopf- oder
     Mailkachel hat keine zweite Spalte und keine vierte Reihe, sie bekaeme
     sonst leere Reihen ueber ihren Knoepfen. */
  .zeile-t,.zeile-meta,.zeile-frist,.zeile .aktionen{grid-column:2}
  .zeile-meta{grid-row:1}
  .zeile-t{grid-row:2}
  .zeile-frist{grid-row:3}
  .zeile .aktionen{grid-row:4;justify-content:flex-start;flex-wrap:wrap}
  .zeilen{grid-auto-rows:auto}
  /* Die Listen sind Raster mit einer impliziten Spalte; ohne minmax(0,1fr)
     waechst die Spalte auf den breitesten Inhalt und schiebt die Karte aus
     dem Fenster, statt den Inhalt umbrechen zu lassen. */
  .liste,.zeilen{grid-template-columns:minmax(0,1fr)}
  /* Mailkachel einspaltig: Betreff auf eigener Zeile, Knopfreihe darunter.
     Mit "minmax(0,1fr) auto" blieb vom Betreff auf 430 px nur "Re:..." uebrig,
     und die nicht umbrechende Knopfreihe schob die Kachel 38 px aus dem
     Fenster (gemessen 05.09.2026). */
  .mail-fuss{grid-template-columns:minmax(0,1fr);gap:var(--a2)}
  .mail-kopf{flex-wrap:wrap}
  /* Kein Abschneiden auf dem Handy: die Seite ist hier ohnehin eine Spalte und
     darf laenger werden (Bauregel 5), ein zweizeiliger Betreff kostet weniger
     als ein unlesbarer. */
  .mailzeile .betreff{display:block;-webkit-line-clamp:none;overflow:visible;
    font-size:var(--s13)}
  .mailzeile .aktionen{justify-content:flex-start;flex-wrap:wrap}
  .mailzeile .knopf.zweitweg{font-size:var(--s12)}
  /* Hinweiszeile: der Link rueckt unter den Text, sonst bleiben fuer beide
     nur ein paar Pixel nebeneinander. */
  .hinweis-zeile{grid-template-columns:8px minmax(0,1fr);row-gap:var(--a1);
    padding:var(--a2) 0}
  .hinweis-zeile>:nth-child(3){grid-column:2;justify-self:start}
  .hinweis-punkte{grid-column:2/-1}
  /* Fingerbreite statt Mausbreite: jedes Bedienelement wird mindestens 40 px
     hoch. Auf dem PC bleiben die kompakten Knoepfe, dort zielt eine Maus. */
  .knopf,.pille,.reiter,.aufklapper,
  .verweis,.wartung-prot-knopf,
  .wissen-suche input,.wissen-form input,.wissen-form select{min-height:40px}
  .knopf{padding-top:6px;padding-bottom:6px}
  /* Alle drei Symbole brauchen auch waagerecht Fingerbreite. Die Hoehe steht
     hier erneut, weil die Symbolregel spezifischer ist als die Knopfregel. */
  .knopf.symbol{min-width:40px;min-height:40px;justify-content:center}
  /* Auf dem Handy gibt es kein Ueberfahren: Herkunft bleibt immer erreichbar. */
  .zeile [data-info],.mailzeile [data-info]{opacity:1}
  .infobox{width:min(340px,calc(100vw - 24px))}
  /* Wartung auf dem Handy: die Protokollzeile stapelt, sonst bliebe fuer den
     Text eine Spalte von wenigen Pixeln. Die Bereichskarten stehen schon
     durch die Rasterregel einspaltig. */
  .wartung-prot-knopf{grid-template-columns:minmax(0,1fr) auto;gap:2px var(--a4)}
  .wartung-zeit,.wartung-prot-bereich{grid-column:1}
  .wartung-prot-text{grid-column:1}
  .wartung-prot-knopf .chev{grid-column:2;grid-row:1/4}
  /* Kopf und Werkzeuge behalten ihre eigenen Karten. Im schmalen Kopf stehen
     Stand, Gesamtlage und Handgriff untereinander, damit kein Text hinausraegt. */
  .wartung-kopf>.karte-kopf{grid-template-columns:minmax(0,1fr)}
  .wartung-kopf .wartung-gesamt,.wartung-kopf .wartung-sitzung-akt{grid-column:1;grid-row:auto}
  .wartung-kopf .wartung-kopf-r,.wartung-kopf .wartung-sitzung-akt{justify-content:flex-start}
  /* Apps auf dem Handy: der Rahmen bekommt mehr Hoehe, weil der Hub
     hier einspaltig rendert und eine niedrigere Flaeche nur zwei Zeilen zeigte. */
  #view-app{min-height:85vh}
  .app-rahmen{min-height:72vh}
  .app-rahmen-aktionen{justify-content:flex-start}
  /* Die Suche bekommt eine volle Kopfzeile. Titel und Herkunft duerfen
     umbrechen, der Link steht darunter und der Pfeil bleibt fingerbreit. */
  .wissen-kopf-r{justify-content:flex-start;width:100%}
  .wissen-suche{width:100%}
  .wissen-zeilenkopf{grid-template-columns:minmax(0,1fr) auto}
  .wissen-zeilenkopf>.wissen-notiz-link{grid-column:1;grid-row:2;justify-self:start}
  .wissen-pfeil{grid-column:2;grid-row:1/3;min-width:40px;min-height:40px}
  .wissen-form{max-width:none}
  .wissen-form-kat input{min-width:0;flex:1 1 auto}
}

/* ---------------------------------------------------------------------------
   7. BEWEGUNG
   ------------------------------------------------------------------------ */
/* Keine Animation traegt hier Bedeutung, also darf jede weg. */
@media (prefers-reduced-motion:reduce){
  *{transition:none !important;animation:none !important;scroll-behavior:auto !important}
}

/* Build overview uses the existing cards and wraps steps instead of scrolling inside. */
.bau-einstieg{display:grid;gap:var(--a2);padding:var(--a3) 0}
.bau-karte{display:grid;gap:var(--a4);min-width:0}
.bau-titel{font-size:var(--s17);line-height:1.3}
.bau-karte p,.bau-karte h2,.bau-karte h3{overflow-wrap:anywhere}
.bau-kurz{color:var(--muted-stark);line-height:1.45}
.bau-fortschritt strong{font-size:var(--s24);line-height:1.2}
.bau-fortschritt{display:flex;align-items:baseline;gap:var(--a3);flex-wrap:wrap}
.bau-schritte{display:flex;flex-wrap:wrap;gap:var(--a3);padding-top:var(--a2)}
.bau-schritt{position:relative;display:flex;align-items:center;justify-content:center;
  min-width:44px;min-height:44px;padding:var(--a3);border:1px solid var(--line-stark);
  border-radius:var(--rs);background:var(--neutral-bg);color:var(--muted-stark);font-weight:700}
.bau-schritt.bau-in-Arbeit{background:var(--accent-bg);color:var(--accent-text);border-color:var(--accent)}
.bau-schritt.bau-live{background:var(--korni-bg);color:var(--good-text);border-color:var(--good)}
/* Ueberholt heisst gestrichen, nicht kaputt. Darum ein rotes Kreuz UEBER dem
   Buchstaben und ein gestrichelter Rand, aber KEINE rote Flaeche: Rot als
   Grund liest sich in diesem Dashboard ueberall als Alarm. */
.bau-schritt.bau-ueberholt{border-style:dashed;color:var(--text)}
.bau-buchstabe{position:relative;z-index:1}
.bau-kreuz{position:absolute;left:4px;top:4px;width:calc(100% - 8px);height:calc(100% - 8px);
  color:var(--crit-text);stroke-width:1.5;pointer-events:none}
.bau-karte.alt .bau-kreuz{color:var(--muted-stark)}
.bau-schritt[aria-expanded="true"]{outline:2px solid var(--text);outline-offset:2px}
.bau-schritt:focus-visible{outline:3px solid var(--accent);outline-offset:3px}
.bau-haken{width:12px;height:12px;margin-left:var(--a1)}
.bau-detail{display:grid;gap:var(--a3);border-top:1px solid var(--line);padding-top:var(--a5)}
.bau-detail[hidden]{display:none}
.bau-absatz{line-height:1.5}
.bau-karte.alt .bau-schritt{background:var(--neutral-bg);color:var(--muted-stark);border-color:var(--line-stark)}
@media(max-width:1000px){#bauRaster>.bau-karte{grid-column:1/-1}}

/* Schritt H: gleich breite Quellen mit eigenen Hoehen. Die Tagesfelder
   bleiben untereinander, damit jede Quelle von oben nach unten lesbar ist. */
.dring-baender{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  align-items:start;gap:var(--a5);min-width:0}
.dring-baender>.spalte+.spalte{border-left:1px solid var(--line);padding-left:var(--a5)}
.band-felder{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--a5)}
.band-felder>.zeilen{min-width:0;grid-template-columns:minmax(0,1fr)}
#karte-dring .spalte-kopf{flex-wrap:wrap}
#karte-dring .zeile{--sp-akt:calc(2 * var(--zeile-h) + var(--a2));
  grid-template-columns:3px minmax(0,1fr) var(--sp-akt);align-items:start}
#karte-dring .mark{grid-row:1/4}
/* Wrapped titles need room for the font's ascenders and descenders, including
   the last line; the compact 1.2 line height can overflow vertically. */
#karte-dring .zeile-t{grid-column:2;grid-row:1;min-width:0;
  line-height:1.4;white-space:normal;overflow-wrap:anywhere}
#karte-dring .zeile-frist{grid-column:2;grid-row:2}
#karte-dring .zeile-meta{grid-column:2;grid-row:3;display:flex;flex-wrap:wrap;
  align-items:center;gap:2px var(--a4)}
#karte-dring .zeile .aktionen{grid-column:3;grid-row:1/4;justify-content:flex-end}
/* Confirmation text needs more than the two icon slots. Give only the open
   confirmation its own row; keep every row's title and metadata tracks fixed. */
#karte-dring .zeile .aktionen:has(.bestaetigung){grid-column:2/-1;grid-row:4;
  min-width:0;justify-content:flex-start}
#karte-dring .zeile .bestaetigung{min-width:0;overflow-wrap:anywhere}
#karte-dring .zeile .bestaetigung .knopf{min-width:0;max-width:100%;white-space:normal;
  overflow-wrap:anywhere}
@media (max-width:999px){
  .dring-baender{grid-template-columns:minmax(0,1fr)}
  .dring-baender>.spalte+.spalte{border-left:0;padding-left:0;
    border-top:1px solid var(--line);padding-top:var(--a4)}
  #karte-dring .zeile{grid-template-columns:3px minmax(0,1fr);gap:2px var(--a4)}
  #karte-dring .mark{grid-row:1/5}
  #karte-dring .zeile-meta{grid-column:2;grid-row:1}
  #karte-dring .zeile-t{grid-column:2;grid-row:2}
  #karte-dring .zeile-frist{grid-column:2;grid-row:3}
  #karte-dring .zeile .aktionen{grid-column:2;grid-row:4;justify-content:flex-start}
}

/* Die Firmenbloecke erben genau die Toene der Bereichskarten (.f-*).
   Vier schmale Spalten brauchen gekuerzte Absender und getrennte Aktionen. */
.mail-bloecke{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--a3)}
.mail-block{min-width:0;padding:var(--a3);border-radius:var(--rk)}
/* Jede Mail ist seit dem 18.09.2026 eine eigene Kachel wie eine Aufgabenzeile
   (Pipo nach einer Woche Nutzung): eigener Grund aus .kachel und .f-<firma>,
   runde Ecken, Abstand aus .liste. Die frueheren background:transparent und
   border-bottom sind weg; mit ihnen liefen zwei Mails optisch ineinander, und
   bei langen Listen traf der Haken die falsche.
   Seit dem 19.09.2026 ist der Block selbst wieder weiss (Pipo 1A/2A): Block
   und Kachel trugen denselben Firmenverlauf (.f-<firma>, Zeile 764 ff.), also
   loeschte der Block seine eigene Mail-Kachel optisch aus. Die Klasse
   f-<firma> bleibt am Block (JS und Tests haengen daran), nur ihre Flaeche
   wirkt hier nicht mehr. Der Farbbalken links an der Mailkachel faellt mit
   weg: an der runden Kachelecke sah er wie eine halboffene Klammer aus, statt
   wie ein Rand zu wirken. Bei den Aufgabenzeilen bleibt ihr Balken (.mark),
   dort zeigt er den Schweregrad, den eine Mail gar nicht hat. */
.mail-block{background-image:none}
.mail-block .mailzeile{padding:var(--a2) var(--a4)}
.mail-block .mail-kopf{flex-wrap:nowrap}
.mail-block .name{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mail-block .mail-fuss{grid-template-columns:minmax(0,1fr) auto}
.mail-block .aktionen{flex-wrap:nowrap;justify-content:flex-end}
.mail-marken{display:flex;flex-wrap:wrap;gap:var(--a2);font-size:var(--s11)}
.mail-postfach,.mail-wichtig{border:1px solid currentColor;border-radius:4px;padding:1px 4px}
.mail-wichtig{font-weight:700}
/* Die Quittung ist seit dem 19.09.2026 eine Kachel AN DER STELLE der Mail und
   keine Zeile mehr unten am Block. Sie behaelt darum Kopf, Betreff und Fuss
   der Mailkachel und damit deren Hoehe: nichts unter ihr rutscht, solange das
   Rueckgaengig-Fenster laeuft. Gedaempft wird nur die Farbe, denn die Mail ist
   erledigt, der Rueckweg aber noch offen. */
.mail-quittung .mail-kopf,.mail-quittung .betreff{color:var(--muted)}
.mail-quittung .mail-marken{font-size:var(--s12);color:var(--muted-stark);font-weight:600}
/* Gleiche Hoehe heisst gleiche Knopfhoehe (Codex A-247, Befund 2): der Fuss
   der Mailkachel misst 34 px, weil die drei Symbolknoepfe eine Mindesthoehe
   tragen. Der Textknopf "Rückgängig" kam ohne sie auf 23,5 px, die Quittung
   war also gut 10 px niedriger als die Mail, die Liste rutschte beim Abhaken
   doch, und Pipos zweiter Tipp traf die falsche Mail. Gemessen am 19.09.2026
   bei 1920 px: Mailkachel 81,05 px, Quittung 70,55 px. */
.mail-quittung .aktionen>.knopf{min-height:var(--zeile-h)}
/* Die Regel oben ist spezifischer als die Fingerbreite-Regel des Handy-Blocks
   (dort .knopf{min-height:40px}) und wuerde den Knopf auch dort auf 34 px
   druecken, waehrend die Mailkachel ihre 40 px behaelt. Darum steht die Hoehe
   hier erneut, wie schon bei .knopf.symbol; weil dieser Block NACH dem
   Handy-Block steht, gewinnt er bei gleicher Spezifitaet. */
@media (max-width:1000px){
  .mail-quittung .aktionen>.knopf{min-height:40px}
}
/* Waehrend das Postfach antwortet (zwei bis sechs Sekunden) bleibt die Kachel
   stehen und zeigt gedaempft "wird verschoben", statt zu verschwinden: Pipo
   tippt in dieser Zeit die naechste Mail an, und eine rutschende Liste hat
   seinen Tipp bis zum 19.09.2026 auf die falsche Mail gelenkt. */
.mail-block .mailzeile.wird-verschoben{opacity:.6}
.mailzeile.wird-verschoben .mail-marken{color:var(--muted-stark);font-style:italic}
/* --- Auswahlmodus je Firmenblock (Schritt B, Pipo 19.09.2026) -----------
   Der Knopf "Auswählen" sitzt rechts neben der Blockueberschrift; die
   Kopfzeile darf auf dem Handy umbrechen, sonst draengt sie den Firmennamen
   aus der schmalen Spalte. */
.mail-blockkopf{display:flex;flex-wrap:wrap;align-items:center;
  justify-content:space-between;gap:var(--a2)}
/* Im Auswahlmodus steht das Kaestchen links neben der ganzen Kachel: eigene
   Spalte, und alles andere rueckt in die zweite. Die Kachel behaelt dabei
   ihre Hoehe, damit die Liste beim Umschalten nicht springt. */
.mail-block .mailzeile.mit-haken{display:grid;grid-template-columns:auto minmax(0,1fr);
  column-gap:var(--a3);align-items:start}
.mail-block .mailzeile.mit-haken>*{grid-column:2;min-width:0}
/* Das Kaestchen bleibt in der ERSTEN Zeile neben dem Absender. Ein
   grid-row:1/-1 ueber die ganze Kachel waere hier eine Falle: -1 zaehlt vom
   Ende des EXPLIZITEN Rasters, und das hat nur eine Zeile, also stuende das
   Kaestchen doch wieder in Zeile eins, nur mit unklarer Ausrichtung. */
.mail-block .mailzeile.mit-haken>.mail-haken{grid-column:1;grid-row:1;align-self:center}
.mail-haken{width:20px;height:20px;margin:0;accent-color:var(--accent);flex:none}
/* Die Leiste unten im Block bleibt beim Scrollen am unteren Rand stehen: bei
   zehn Mails stuende sie sonst ausserhalb des Bildes, und Pipo muesste nach
   jedem Haken zurueckscrollen. */
.mail-auswahl-leiste{display:flex;flex-wrap:wrap;align-items:center;gap:var(--a2);
  margin-top:var(--a3);padding:var(--a2);border-radius:var(--rs);
  background:var(--card);position:sticky;bottom:var(--a2)}
.mail-auswahl-zahl{font-size:var(--s12);color:var(--muted-stark);margin-right:auto}
.mail-fehler{font-size:var(--s12);color:var(--muted-stark);overflow-wrap:anywhere}
.mail-zaehler{margin-top:var(--a3)}
@media(min-width:1000px){.mail-bloecke{grid-template-columns:repeat(4,minmax(0,1fr))}}

/* Der Ranghinweis bleibt in der Bandkopfzeile auch auf dem Handy lesbar. */
.rang-hinweis{font-size:var(--s12);line-height:1.3;color:var(--muted);min-width:0;overflow-wrap:anywhere}

/* Die Nebenseiten folgen genau der 1000-Pixel-Grenze, unabhaengig von den
   Zwischenstufen des Hauptseitenrasters. Zusatzzeilen nutzen die volle Breite. */
#wissenRaster{grid-template-columns:minmax(0,1fr)}
#wissenRaster>.wissen-karte{grid-column:auto}
#wissenRaster>.c12{grid-column:1/-1}
@media(min-width:1000px){
  #wissenRaster{grid-template-columns:repeat(3,minmax(0,1fr))}
  /* Die Werkzeuge gehen erst ab 1400 px auf vier Spalten (Pipo 3A,
     19.09.2026). Vier Spalten schon ab 1000 px waeren rund 190 px je Kachel,
     und dort passt kein Knopftext mehr hin; dazwischen stehen sie zu zweit. */
  .knopfgruppen{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(min-width:1400px){
  .knopfgruppen{grid-template-columns:repeat(4,minmax(0,1fr))}
}

/* Der Routinen-Knopf ist breiter als der fruehere Pfeil. Sein Kartenkopf
   darf deshalb auch zwischen Handy- und Desktopbreite auf zwei Zeilen gehen. */
.wartung-bereich[data-wartung-bereich="routinen"]>.karte-kopf{flex-wrap:wrap}

/* Genau bei 1000 Pixeln bleibt die obere Reihe dreispaltig; die bestehende
   Mobilregel fuer die anderen Karten wird dadurch nicht veraendert. */
@media (width:1000px){
  #raster{grid-template-columns:repeat(12,minmax(0,1fr))}
  #raster>.haupt-drittel{grid-column:span 4}
}

/* ---------------------------------------------------------------------------
   8. BAUTEILE FUER LISTEN UND FORMULARE (Design-Linie Schritt A, 20.09.2026)
   ----------------------------------------------------------------------------
   Dazugekommen fuer die Wurstkutsche-WaWi: Tabelle, Eingabefeld, Zahlenfeld,
   Meldung im Inhalt, Zustandsmarke und der kleine Zeilenknopf. Der Katalog
   kannte bis heute keines davon, und die WaWi hat sie deshalb viermal selbst
   gebaut. Sie stehen bewusst unten in der Datei: so aendert keine Zeile hier
   ein bestehendes Bauteil, und bei gleicher Spezifitaet gewinnen diese Regeln
   ihre eigenen Handy-Stufen gegen die allgemeinen weiter oben.
   Jeder Wert kommt aus den Tokens von Abschnitt 1; neue Tokens gibt es keine.
   ------------------------------------------------------------------------ */

/* --- Tabelle. Haarlinie zwischen den Zeilen, kein Rahmen aussen: die Karte
       fasst den Inhalt schon ein, ein zweiter Rahmen waere eine Doppelung.
       Die Kopfzeile ist gedaempft und in Grossbuchstaben wie die Abschnitts-
       marke der Seitenleiste, damit sie als Beschriftung gelesen wird und
       nicht als erste Datenzeile. --- */
table.tabelle{width:100%;max-width:100%;min-width:0;border-collapse:collapse}
.tabelle th{font-family:var(--f-head);font-weight:600;font-size:var(--s12);color:var(--muted);
  letter-spacing:.04em;text-transform:uppercase;text-align:left;line-height:1.3;
  vertical-align:bottom;padding:var(--a2) var(--a3)}
.tabelle td{font-size:var(--s13);line-height:1.35;text-align:left;vertical-align:top;
  padding:var(--a3);
  /* Lange Werte (Schluessel, Namen ohne Leerzeichen) brechen um, statt die
     Spalte aufzublaehen und die Tabelle aus der Karte zu schieben. Bewusst
     NICHT am th: eine mitten im Wort umgebrochene Ueberschrift kostet mehr
     Lesbarkeit, als die schmalere Spalte einbringt. */
  overflow-wrap:anywhere}
.tabelle thead th{border-bottom:1px solid var(--line)}
/* Die Linie steht ZWISCHEN den Zeilen: ueber der ersten waere sie eine
   zweite Kante direkt unter der Kopfzeile. */
.tabelle tbody tr+tr>td{border-top:1px solid var(--line)}
.tabelle tbody tr:hover{background:var(--bg)}
/* Zahlen rechts und in Tabellenbreite, damit sich Spalten vergleichen lassen
   und der Wert beim naechsten Lauf an derselben Stelle steht. */
.tabelle td.zahl,.tabelle th.zahl{text-align:right;font-variant-numeric:tabular-nums}

/* --- Eingabefeld. Beschriftung oben, Feld darunter ueber die volle Breite.
       Nebeneinander stehende Beschriftungen wuerden auf dem Handy entweder
       umbrechen oder das Feld auf Daumenbreite zusammendruecken. --- */
label.feld{display:block;min-width:0}
.feld-name{display:block;font-family:var(--f-head);font-weight:600;font-size:var(--s13);
  line-height:1.3;padding-bottom:var(--a1)}
/* Die Mindesthoehe ist die Zeilenhoehe: dieselbe Trefferflaeche wie bei den
   Symbolaktionen, damit Feld und Knopf in einer Zeile fluchten. */
.feld>input,.feld>select,.feld>textarea{display:block;width:100%;min-width:0;
  min-height:var(--zeile-h);font-size:var(--s15);line-height:1.35;padding:var(--a2) var(--a4);
  border:1px solid var(--line);border-radius:var(--rs);background:var(--card);color:var(--text)}
.feld>textarea{resize:vertical;font-family:var(--f-body)}
.feld>input::placeholder,.feld>textarea::placeholder{color:var(--muted)}
/* Hilfe erklaert, Fehler widerspricht: beide klein unter dem Feld, wo der
   Blick nach dem Tippen ohnehin hinfaellt. Der Fehler traegt die Ampelfarbe
   als TEXT, nicht als Flaeche; eine rote Flaeche am Feld waere ein Alarm. */
.feld-hilfe{display:block;font-size:var(--s12);color:var(--muted);line-height:1.35;padding-top:var(--a1)}
.feld-fehler{display:block;font-size:var(--s12);color:var(--crit-text);line-height:1.35;padding-top:var(--a1)}

/* Formular: ein Raster mit einer Abstandsstufe, keine Einzelmargins. */
.formular{display:grid;gap:var(--a5);align-content:start;min-width:0}
.formular-zeile{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));
  gap:var(--a5);align-items:start;min-width:0}
/* Knopfzeile rechts, durch eine Haarlinie vom letzten Feld getrennt.
   Hoechstens ein blauer Knopf, wie ueberall. */
.formular-fuss{display:flex;align-items:center;justify-content:flex-end;gap:var(--a3);
  flex-wrap:wrap;padding-top:var(--a2);border-top:1px solid var(--line)}

/* --- Zahlenfeld: eine Kennzahl gross in der Karte, Beschriftung klein
       darueber, Einordnung klein darunter. Die Beschriftung steht oben, weil
       man sonst erst die Zahl liest und danach sucht, wovon sie handelt. --- */
.zahlwert{display:grid;gap:2px;align-content:start;min-width:0}
.zahlwert-name{font-size:var(--s12);color:var(--muted);line-height:1.3}
.zahlwert-wert{font-family:var(--f-head);font-weight:600;font-size:var(--s24);line-height:1.15;
  font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.zahlwert-unter{font-size:var(--s12);color:var(--muted);line-height:1.3}
.zahlwerte{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--a5);min-width:0}

/* --- Meldung im Inhalt. Bewusst NICHT der Toast .hinweis: der bestaetigt
       unten am Fensterrand eine Aktion und verschwindet wieder, die Meldung
       steht im Text und bleibt stehen. Beide unter einem Namen waeren beim
       Umzug der WaWi genau die Kollision, die diese Trennung verhindert. --- */
.meldung{display:grid;gap:var(--a1);min-width:0;overflow-wrap:anywhere;
  background:var(--neutral-bg);border-left:3px solid var(--neutral);border-radius:var(--rs);
  padding:var(--a4) var(--a5);font-size:var(--s13);line-height:1.4;color:var(--text)}
.meldung>strong{font-family:var(--f-head);font-weight:600;color:inherit}
/* Fuer gut und warn gibt es keinen bg-Token. color-mix rechnet an Ort und
   Stelle denselben 11-Prozent-Ton ueber Weiss aus, den die Firmenkacheln als
   fertige t-Tokens tragen; das ist kein neuer Token, sondern dieselbe Regel. */
.meldung.gut{background:color-mix(in srgb,var(--good) 11%,white);
  border-left-color:var(--good);color:var(--good-text)}
.meldung.warn{background:color-mix(in srgb,var(--warn) 11%,white);
  border-left-color:var(--warn);color:var(--warn-text)}
.meldung.krit{background:var(--crit-bg);border-left-color:var(--crit);color:var(--crit-text)}

/* --- Zustandsmarke: die Pillenform des Firmenchips, aber fuer Zustaende.
       Die Trennung ist Absicht und steht schon bei den Tokens: eine gruene
       Firma waere sonst ein guter Zustand. Eine Zustandsampel gehoert nie
       einer Firma. --- */
.zustand{display:inline-block;font-size:var(--s12);line-height:1.35;border-radius:var(--rp);
  padding:2px 9px;white-space:nowrap;justify-self:start;
  background:var(--neutral-bg);color:var(--muted-stark)}
.zustand.ok{background:color-mix(in srgb,var(--good) 11%,white);color:var(--good-text)}
.zustand.luecke{background:color-mix(in srgb,var(--warn) 11%,white);color:var(--warn-text)}
/* Eine Annahme ist kein Urteil: neutraler Grund, grauer Text. Einen Token
   --neutral-text gibt es nicht, und --neutral selbst waere als Text zu hell;
   --muted-stark ist der dafuer gebaute lesbare Grauton auf getoentem Grund. */
.zustand.annahme{background:var(--neutral-bg);color:var(--muted-stark)}
.zustand.fehler{background:var(--crit-bg);color:var(--crit-text)}

/* --- Kleiner Zeilenknopf. Er ersetzt die Eigenbauten der WaWi und bleibt ein
       gewoehnlicher weisser Knopf, nur mit kleinerer Schrift und einer festen
       niedrigen Hoehe: Zeilenhoehe abzueglich ihres Innenabstands, damit eine
       Tabellenzeile durch ihre Knoepfe nicht hoeher wird. --- */
.knopf.klein{font-size:var(--s12);padding:0 var(--a3);
  min-height:calc(var(--zeile-h) - 2 * var(--a1))}

/* Unter 1000 px gilt Fingerbreite statt Mausbreite, wie bei den Knoepfen
   oben: Eingabeelemente und der kleine Knopf werden 40 px hoch, und mehr-
   spaltige Raster stapeln. */
@media (max-width:1000px){
  .feld>input,.feld>select,.feld>textarea{min-height:40px}
  .knopf.klein{min-height:40px}
  .formular-zeile{grid-template-columns:minmax(0,1fr)}
  .zahlwerte{grid-template-columns:minmax(0,1fr)}
}

/* Unter 640 px wird jede Tabellenzeile zu einer beschrifteten Karte. Das ist
   das bewaehrte rtable-Muster aus CRM und Hub (seit 23.07.2026): waagerecht
   scrollen muesste hier sonst jede Tabelle, und in einer Karte scrollt
   nichts. Die Grenze liegt bei 640 px und nicht bei 1000 px, weil eine
   schmale Tabelle auf einem kleinen Laptop noch als Tabelle lesbar ist. */
@media (max-width:639px){
  /* Die Kopfzeile faellt ganz weg, wie im CRM und im Hub. Sie nur
     wegzuklippen brachte nichts: das abgeschnittene th stand weiter 81 px
     rechts ausserhalb des Fensters (gemessen 20.09.2026 bei 390 px). Die
     Beschriftung jeder Zelle kommt stattdessen aus ihrem data-label und wird
     ueber ::before auch vorgelesen. */
  .tabelle thead{display:none}
  .tabelle,.tabelle tbody,.tabelle tr,.tabelle td{display:block;width:100%}
  .tabelle tr{border:1px solid var(--line);border-radius:var(--rk);
    background:var(--card);padding:var(--a2) var(--a4)}
  .tabelle tbody tr+tr{margin-top:var(--a3)}
  /* flex-wrap ist hier Pflicht (Lehre vom 07.08.2026, gemessen an der WaWi):
     ohne Umbruch schiebt Flexbox zu breiten Inhalt AUS der Karte heraus,
     statt ihn umzubrechen, und mit der rechtsbuendigen Aktionszelle landet er
     dann neben der Karte. column-gap und row-gap stehen getrennt, weil ein
     gemeinsames gap die umgebrochene Zeile zusaetzlich auseinanderreisst. */
  .tabelle tbody tr+tr>td{border-top:0}
  .tabelle tbody td{display:flex;flex-wrap:wrap;justify-content:space-between;
    align-items:baseline;column-gap:var(--a5);row-gap:var(--a1);
    padding:var(--a2) 0;text-align:left}
  .tabelle tbody td+td{border-top:1px solid var(--line)}
  .tabelle td::before{content:attr(data-label);color:var(--muted);font-size:var(--s12);flex:none}
  /* Ohne Kopfzeile gebaute Tabellen: schlichter Block, linksbuendig. */
  .tabelle td:not([data-label]){display:block;text-align:left}
  .tabelle td:not([data-label])::before{content:none}
  /* Die Aktionszelle traegt ein leeres data-label: keine Beschriftung, alles
     rechts. Ihre Aktionen stehen in EINEM .aktionen, sonst wird beim Umbruch
     jedes einzelne Element zu einem eigenen Flex-Teil. */
  .tabelle td[data-label=""]{justify-content:flex-end}
  .tabelle td[data-label=""]::before{content:none}
  /* Eine bearbeitbare Zelle stellt die Beschriftung ueber das Feld. Bewusst
     "> input" (direktes Kind): versteckte Felder einer Aktionszelle sollen
     die Zelle nicht umbauen. */
  .tabelle td:has(> input){flex-direction:column;align-items:stretch}
  .tabelle td.zahl{text-align:right}
}