/* ============================================================================
   Designsystem „Arbeitsfläche“ · af.css · Stand 04.09.2026 (Entwurf, nicht deployt)
   ----------------------------------------------------------------------------
   Grundlage: Entscheidung Jens 04.09.2026 – Mock-up A (Liste + fester Prüfbereich)
   + Zeilen-Knöpfe/Sammel-Freigabe aus B + „Freigeben & weiter“ aus C, ausgerollt
   auf das gesamte Portal.
   Regeln in Kurzform:
   1. Die Seite scrollt nicht – Bereiche scrollen. Aktionen stehen fest.
   2. Farbe trägt Bedeutung: Grün fertig · Amber prüfen · Rot Fehler/Frist ·
      Magenta Aktion/Link · sonst Grau. Keine Emojis, gezeichnete Symbole.
   3. Keine Karten mit Schatten. Haarlinien, Fläche, Dichte.
   4. Präfix af- für alles; nie eine nackte Klasse (Lehre ip-ui.css 19.07.2026).
   5. Ein Handy-Breakpoint: 700 px (Bestandsregel ip-mobile.css).
   ============================================================================ */

:root{
  /* Marke */
  --af-mag:#ca2f56; --af-mag-d:#a82747; --af-mag-w:#fbeef2;
  /* Neutrale mit leichtem Warmstich (zur Marke passend) */
  --af-ink:#2b2829; --af-grau:#5d595a; --af-mute:#8a8788; --af-mute2:#b5b0b1;
  --af-linie:#e6e1e2; --af-linie2:#f0edee; --af-bg:#f5f4f4; --af-bg2:#efeced; --af-fl:#fff;
  /* Bedeutung */
  --af-gruen:#2e9e5b; --af-gruen-t:#1f7a3d; --af-gruen-w:#e7f5ec;
  --af-amber:#c98a12; --af-amber-t:#8a5d06; --af-amber-w:#fdf3df;
  --af-rot:#c0392b;   --af-rot-t:#8e2a20;  --af-rot-w:#fbe9e7;
  --af-blau:#3d6f99;  --af-blau-w:#e8f0f7;
  /* Rahmen */
  --af-rail:120px; --af-sub:243px; --af-nav:363px; --af-kopf:52px; --af-leiste:44px;
  /* Schrift */
  --af-font:Lato,"Segoe UI",Helvetica,Arial,sans-serif;
  --af-fs:13px;      /* Arbeitsseiten (Listen, Postkorb, Werkzeuge) */
  --af-fs-lesen:14.5px; /* Leseseiten (Handbuch, Eigentümer) */
  /* Raster 4 px */
  --af-1:4px; --af-2:8px; --af-3:12px; --af-4:16px; --af-5:20px; --af-6:24px; --af-8:32px;
  --af-r:6px; --af-r2:8px;
  /* Ergänzt 05.09.2026 (Dunkelmodus): bisher feste Werte, jetzt Token – Lichtwerte unverändert */
  --af-mag-t:#ca2f56;      /* Magenta als TEXT/Link auf Fläche (dunkel: heller, damit lesbar) */
  --af-fl-ink:#fff;        /* Text auf --af-ink (aktive Chips/Filter, Toast) */
  --af-hover:#faf9f9; --af-hover2:#faf7f8; --af-hover3:#faf5f6; --af-fl2:#fbfafa;
  --af-mute3:#c9c4c5; --af-linie3:#d6d1d2; --af-pill-grau:#eeecec; --af-av-bg:#e9e6e7;
  --af-gelb:#d9b400; --af-gelb-t:#7a6400; --af-gelb-w:#fbf5d6;
  --af-gruen-l:#bfe3cc; --af-rot-l:#efb9b1; --af-rot-l2:#e6b3ad; --af-mag-l:#f0c9d4; --af-amber-l:#ecd7a6;
  --af-toast-rk:#f7c7d3; --af-schatten:rgba(0,0,0,.25);
  --af-sel-pfeil:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%238a8788' stroke-width='1.5'/%3E%3C/svg%3E");
}
html.af-pn-zu{--af-nav:var(--af-rail)}

/* ---------- Grund ---------- */
.af,.af *,.af *::before,.af *::after{box-sizing:border-box}
.af{font-family:var(--af-font);font-size:var(--af-fs);line-height:1.35;color:var(--af-ink);background:var(--af-bg);-webkit-font-smoothing:antialiased}
.af a{color:var(--af-mag-t);text-decoration:none}
.af a:hover{text-decoration:underline}
.af button,.af input,.af select,.af textarea{font:inherit;color:inherit}
.af b,.af strong{font-weight:700}
.af :focus-visible{outline:2px solid var(--af-mag);outline-offset:2px}
.af-num{font-variant-numeric:tabular-nums}
.af-mute{color:var(--af-mute)}
.af-klein{font-size:11.5px}
.af-nowrap{white-space:nowrap}
.af-trunc{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.af-vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

/* ---------- Typografie (Skala: 11 · 11.5 · 12.5 · 13 · 14 · 15 · 17 · 19 · 22 · 25) ---------- */
.af-h1{font-size:19px;font-weight:900;letter-spacing:-.2px;margin:0;text-wrap:balance}
.af-h1-gross{font-size:25px;font-weight:900;letter-spacing:-.5px;margin:0}
.af-h2{font-size:15px;font-weight:900;margin:0}
.af-tag{display:inline-block;font-size:10.5px;letter-spacing:.5px;text-transform:uppercase;color:var(--af-mute);font-weight:700}
.af-ctx{color:var(--af-grau);font-size:12.5px}
.af-ctx b{color:var(--af-ink)}
.af-lesen{font-size:var(--af-fs-lesen);line-height:1.55}
.af-lesen p{max-width:68ch;margin:0 0 var(--af-3)}
.af-lesen h1{font-size:25px;font-weight:900;letter-spacing:-.5px;margin:0 0 var(--af-2);text-wrap:balance}
.af-lesen h2{font-size:17px;font-weight:900;margin:var(--af-8) 0 var(--af-2);padding-bottom:var(--af-1);border-bottom:2px solid var(--af-ink)}
.af-lesen h3{font-size:14.5px;font-weight:900;margin:var(--af-5) 0 var(--af-1)}

/* ---------- Seitenrahmen (Menü bleibt „Weite“: Symbolleiste 120 + Untermenü 243) ---------- */
.af-kopfzeile{position:fixed;left:var(--af-nav);right:0;top:0;height:var(--af-kopf);background:var(--af-fl);border-bottom:1px solid var(--af-linie);display:flex;align-items:center;gap:var(--af-4);padding:0 var(--af-5);z-index:19}
.af-kopfzeile .af-logo{height:30px;width:auto}
.af-seite{position:fixed;left:var(--af-nav);right:0;top:var(--af-kopf);bottom:0;display:flex;flex-direction:column;min-width:0;background:var(--af-bg)}
/* Fluss-Variante: Seiten mit der bestehenden Kopfleiste (sn-bar / ip-head) machen den body zur
   Spalte in Bildschirmhöhe; die Kopfleiste bleibt im Fluss, .af-seite füllt den Rest. */
/* iPhone-Safari rechnet 100vh ohne Adressleiste: der body war hoeher als der Bildschirm, die ganze Seite rutschte hoch und die Leiste verschwand unter der Kopfzeile (Fund Jens 28.09.2026, Besichtigungsbogen). 100dvh = sichtbare Hoehe; aeltere Browser behalten 100vh. */
body.af-fluss{height:100vh;height:100dvh;display:flex;flex-direction:column;overflow:hidden}
body.af-fluss > .sn-bar,body.af-fluss > .ip-head{flex:0 0 auto}
body.af-fluss .af-seite{position:static;flex:1 1 auto;min-height:0}
.af-leiste{display:flex;align-items:center;gap:var(--af-4);padding:var(--af-2) 18px;border-bottom:1px solid var(--af-linie);background:var(--af-fl);flex:0 0 auto;min-height:var(--af-leiste)}
.af-leiste .af-h1 small{font-weight:600;color:var(--af-mute);font-size:12.5px;margin-left:6px}
.af-body{display:flex;flex:1 1 auto;min-height:0}
.af-scroll{flex:1 1 auto;overflow:auto;min-height:0}
.af-inhalt{padding:var(--af-3) 18px}
.af-akt{flex:0 0 auto;display:flex;align-items:center;gap:var(--af-2);padding:10px 18px;border-top:1px solid var(--af-linie);background:var(--af-fl)}
.af-akt .af-sp{flex:1}
.af-akt .af-hint{font-size:11.5px;color:var(--af-mute);white-space:nowrap}
@media(max-width:1560px){.af-akt .af-hint{display:none}}

/* Seitenmuster 1 · Geteilte Ansicht: Liste links (372 px), fester Bereich rechts.
   Die Breite kommt aus --af-liste-b, damit eine Seite sie je Konto setzen kann (Ziehgriff .af-griff,
   Wunsch Jens 04.09.2026: „die Linie weiter nach rechts ziehen, wenn man die Aufgaben besser sehen will“). */
.af-split{display:flex;flex:1 1 auto;min-height:0}
.af-liste{width:var(--af-liste-b,372px);flex:0 0 auto;border-right:1px solid var(--af-linie);background:var(--af-fl);overflow:auto;min-height:0}
/* Gespeicherte Breite darf ein schmaleres Fenster nicht sprengen (15.09.2026, Fall Aufgaben-Detail unsichtbar): am grossen Bildschirm gezogen, am kleinen blieb dem Arbeitsbereich fast nichts. Gleiche Grenze wie grenze() im Ziehgriff (60 %). */
@media(min-width:701px){.af-liste{max-width:60%}}
/* Liste einklappen (ep_af_liste_klapp() in af_css.php, Wunsch Jens 23.09.2026): Ist ein Vorgang gewählt,
   braucht der Arbeitsbereich die ganze Breite. Am Handy gilt weiter .af-mob-detail – dort ist der Knopf aus. */
@media(min-width:701px){.af-split.af-liste-zu>.af-liste,.af-split.af-liste-zu>.af-griff{display:none}}
.af-listeknopf{white-space:nowrap}
.af-detail{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;min-height:0}
/* Ziehgriff zwischen Liste und Arbeitsbereich (ep_af_griff() in af_css.php): 12 px Greiffläche auf der
   Linie, ohne Platz zu kosten (negative Ränder). Ein kleiner grauer Anfasser in der Mitte zeigt, dass man
   hier ziehen kann; beim Überfahren, Ziehen oder Fokus wird die ganze Linie magenta. */
.af-griff{flex:0 0 12px;margin-left:-6px;margin-right:-6px;cursor:col-resize;position:relative;z-index:3;background:transparent;touch-action:none;user-select:none;-webkit-user-select:none}
.af-griff::after{content:'';position:absolute;left:5px;top:0;bottom:0;width:2px;background:transparent;transition:background .12s}
.af-griff::before{content:'';position:absolute;left:3px;top:50%;width:6px;height:36px;margin-top:-18px;border-radius:3px;background:var(--af-mute3);transition:background .12s}
.af-griff:hover::after,.af-griff:focus-visible::after,.af-split.af-zieht .af-griff::after{background:var(--af-mag)}
.af-griff:hover::before,.af-griff:focus-visible::before,.af-split.af-zieht .af-griff::before{background:var(--af-mag)}
.af-griff:focus-visible{outline:none}
.af-split.af-zieht{cursor:col-resize}
.af-split.af-zieht .af-liste,.af-split.af-zieht .af-detail{user-select:none;pointer-events:none}
.af-gruppe{position:sticky;top:0;background:var(--af-hover);border-bottom:1px solid var(--af-linie2);padding:3px 14px;font-size:10.5px;letter-spacing:.6px;text-transform:uppercase;color:var(--af-mute);font-weight:800;z-index:2}
/* Einklappbare Gruppenköpfe (ep_af_gruppe() in af_css.php, Wunsch Jens 11.09.2026): Klick klappt die Zeilen
   darunter ein; der Pfeil zeigt den Zustand. Während einer Suche (html.af-gsuche) stehen alle Gruppen offen. */
.af-gruppe.af-gklapp{display:flex;align-items:center;gap:6px;padding:4px 14px 4px 11px;cursor:pointer;user-select:none;-webkit-user-select:none}
.af-gruppe.af-gklapp:hover{color:var(--af-grau)}
.af-gruppe.af-gklapp:focus-visible{outline:2px solid var(--af-mag);outline-offset:-2px}
.af-gpfeil{flex:0 0 auto;width:0;height:0;border-left:5px solid currentColor;border-top:4px solid transparent;border-bottom:4px solid transparent;transform:rotate(90deg);transition:transform .12s}
.af-gruppe.af-gzu .af-gpfeil{transform:none}
html:not(.af-gsuche) .af-zeile.af-gz{display:none!important}
.af-zeile{display:grid;grid-template-columns:12px 1fr;gap:0 var(--af-2);padding:6px 12px 6px 10px;border-bottom:1px solid var(--af-linie2);cursor:pointer;align-items:start;border-left:3px solid transparent;min-height:44px}
.af-zeile:hover{background:var(--af-hover2)}
.af-zeile.af-an{background:var(--af-mag-w);border-left-color:var(--af-mag)}
.af-zeile .af-dot{margin-top:4px}
.af-zeile .af-z1{font-weight:800;font-size:12.5px;display:flex;gap:6px;align-items:baseline;min-width:0}
.af-zeile .af-z1 > span:first-child{white-space:nowrap}
.af-zeile .af-z1 .af-adr{font-weight:400;color:var(--af-mute);font-size:11.5px;flex:1 1 auto;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.af-zeile .af-z1 .af-seit{font-size:11px;color:var(--af-mute);font-weight:600;margin-left:auto;white-space:nowrap}
.af-zeile .af-z1 .af-seit.af-ueber{color:var(--af-rot);font-weight:800}
.af-zeile .af-z2{display:flex;align-items:center;gap:6px;color:var(--af-grau);font-size:12px;margin-top:2px;min-width:0}
.af-zeile .af-z2 .af-tx{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1 1 auto}
.af-zeile .af-zakt{display:none;gap:2px;margin-left:4px}
.af-zeile.af-bereit:hover .af-zakt{display:inline-flex}  /* Zeilen-Knöpfe nur bei „bereit“ (aus B) */
/* ---------- Einzeilen-Form der Liste (.af-ez, seit 18.09.2026 – Entscheidung nach Mock-up „Aufgabenliste ruhiger“) ----------
   EINE Zeile mit festen Spalten: Symbol · Titel · Objekt · Zeit – das Auge läuft die Spalte hinunter wie in onOffice.
   Aufbau:  .af-zeile.af-ez > .af-ez-ico (Symbol der Art, trägt die Farbe der Einstufung: af-rot/af-amber/…)
                             > .af-ez-tz  (Titelzelle: .af-ez-t + Pillen + Zeilen-Knöpfe + Foto, wenn jemand ANDERES zuständig ist)
                             > .af-ez-o   (Objektnummer)   > .af-ez-f (Frist/„seit“, .af-ueber = rot)
                             > .af-ez-2   (zweite Zeile: Kontakt/Adresse, Agent – am Bildschirm nur bei .af-an, am Handy immer)
   Kopfzeile .af-ez-kopf mit denselben vier Spalten. Breite der dritten und vierten Spalte je Liste über --af-ez-o (Standard 46 px) und --af-ez-f (74 px), z. B.
   style="--af-ez-o:70px" an .af-liste-ez – sie muss nicht die Objektnummer tragen (Ideenschmiede: Ersparnis, Social Media: Plattformen). Die Liste bekommt .af-liste-ez (440 px Standard statt 372 –
   wer am Griff gezogen hat, behält seine Breite). Titel in normaler Schrift; fett ist nur die gewählte Zeile und
   eine überfällige Frist. Genutzt von /aufgaben/ und vom Postkorb – neue Listen nehmen diese Form, nicht .af-z1/.af-z2. */
@media(min-width:701px){.af-liste.af-liste-ez{width:var(--af-liste-b,440px)}}
.af-ez-kopf,.af-zeile.af-ez{display:grid;grid-template-columns:16px minmax(0,1fr) var(--af-ez-o,46px) var(--af-ez-f,74px);gap:0 8px;align-items:center}
.af-ez-kopf{padding:3px 12px;font-size:10px;letter-spacing:.5px;text-transform:uppercase;color:var(--af-mute);border-bottom:1px solid var(--af-linie2);background:var(--af-fl)}
.af-ez-kopf span:nth-child(3),.af-ez-kopf span:nth-child(4){text-align:right}
.af-zeile.af-ez{min-height:0;padding:6px 12px 6px 9px}
.af-ez .af-ez-ico{display:inline-flex;color:var(--af-mute)}
.af-ez .af-ez-ico > *{color:inherit}
.af-ez .af-ez-ico .pn-ico{width:15px;height:15px}
.af-ez .af-ez-ico .af-dot{margin-top:0}   /* statt eines Symbols darf hier auch ein Status-Punkt stehen (Bewerbungen) */
.af-ez .af-ez-ico.af-rot{color:var(--af-rot)}.af-ez .af-ez-ico.af-amber{color:var(--af-amber)}.af-ez .af-ez-ico.af-gruen{color:var(--af-gruen)}.af-ez .af-ez-ico.af-blau{color:var(--af-blau)}
.af-ez .af-ez-tz{display:flex;align-items:center;gap:6px;min-width:0}
.af-ez .af-ez-t{flex:0 1 auto;min-width:0;font-size:13px;font-weight:400;color:var(--af-ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.af .af-ez .af-ez-t a{color:inherit}
.af-ez.af-an .af-ez-t{font-weight:700}
.af-ez .af-ez-tz .af-pill{flex:0 0 auto;font-size:10.5px;padding:0 7px}
.af-ez .af-ez-tz .af-zakt{flex:0 0 auto}
.af-ez .af-ez-tz > .af-av{width:18px;height:18px;font-size:9px;margin-left:auto}
.af-ez .af-ez-o{font-size:12px;font-weight:700;color:var(--af-grau);text-align:right;white-space:nowrap;overflow:hidden;font-variant-numeric:tabular-nums}
.af-ez .af-ez-f{font-size:11.5px;color:var(--af-mute);text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums}
.af-ez .af-ez-f.af-ueber{color:var(--af-rot);font-weight:700}
.af-ez .af-ez-wv{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--af-amber);margin-right:5px;vertical-align:middle}
.af-ez .af-ez-2{grid-column:2 / -1;display:none;align-items:center;gap:6px;min-width:0;margin-top:3px;font-size:11.5px;color:var(--af-mute)}
.af-ez.af-an .af-ez-2{display:flex}
.af-ez .af-ez-2o{display:none;color:var(--af-grau);font-variant-numeric:tabular-nums}
.af-ez .af-ez-2k{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.af-ez .af-ez-2r{margin-left:auto;display:inline-flex;gap:4px;flex:0 0 auto}
.af-ez .af-ez-2 .af-av{width:18px;height:18px;font-size:9px}
.af-ez .af-ez-2 .af-pill{font-size:10.5px;padding:0 7px;flex:0 0 auto}
/* Liste ganz ohne Objektnummern (z. B. Eingangsrechnungen): die Objekt-Spalte entfällt, der Titel bekommt den Platz. */
.af-liste-ez.af-ez-kein-o .af-ez-kopf,.af-liste-ez.af-ez-kein-o .af-zeile.af-ez{grid-template-columns:16px minmax(0,1fr) var(--af-ez-f,74px)}
.af-liste-ez.af-ez-kein-o .af-ez-o,.af-liste-ez.af-ez-kein-o .af-ez-kopf span:nth-child(3){display:none}

/* Zwei-Spalten-Prüfbereich (Werte links, Dokument rechts) */
.af-grid2{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(300px,.9fr);gap:14px;align-items:start}
@media(max-width:1100px){.af-grid2{grid-template-columns:1fr}}
.af-box{background:var(--af-fl);border:1px solid var(--af-linie);border-radius:var(--af-r2)}
.af-box .af-bt{display:flex;align-items:center;gap:var(--af-2);padding:7px 10px;border-bottom:1px solid var(--af-linie2);font-size:11px;letter-spacing:.5px;text-transform:uppercase;color:var(--af-mute);font-weight:800}
.af-box .af-bt .af-r{margin-left:auto;text-transform:none;letter-spacing:0;font-weight:600}
.af-box .af-bi{max-height:300px;overflow:auto}
.af-meta{display:flex;gap:6px 22px;flex-wrap:wrap;padding:6px 0 8px;border-bottom:1px solid var(--af-linie)}
.af-meta .af-k{font-size:10.5px;letter-spacing:.5px;text-transform:uppercase;color:var(--af-mute);font-weight:700}
.af-meta .af-v{font-weight:700;font-size:12.5px;display:flex;align-items:center;gap:6px;margin-top:1px;white-space:nowrap}

/* Seitenmuster 2 · Tabelle über die volle Breite (dicht, Kopf klebt, Aktionen in der Zeile) */
.af-t{width:100%;border-collapse:collapse;background:var(--af-fl);font-size:12.5px}
.af-t th{position:sticky;top:0;background:var(--af-hover);z-index:2;text-align:left;font-size:10.5px;letter-spacing:.5px;text-transform:uppercase;color:var(--af-mute);font-weight:800;padding:6px var(--af-2);border-bottom:1px solid var(--af-linie);white-space:nowrap}
.af-t td{padding:6px var(--af-2);border-bottom:1px solid var(--af-linie2);vertical-align:middle}
.af-t tr.af-v{height:44px;cursor:pointer}
.af-t tr.af-v:hover td{background:var(--af-hover2)}
.af-t tr.af-v.af-an td{background:var(--af-mag-w)}
.af-t tr.af-v.af-an td:first-child{box-shadow:inset 3px 0 0 var(--af-mag)}
.af-t tr.af-gr td{background:var(--af-bg);padding:3px var(--af-2);font-size:10.5px;letter-spacing:.6px;text-transform:uppercase;color:var(--af-mute);font-weight:800;border-bottom:1px solid var(--af-linie)}
.af-t .af-o{font-weight:800;white-space:nowrap}
.af-t .af-o small,.af-t .af-vg small{display:block;font-weight:400;color:var(--af-mute);font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.af-t .af-vg{font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.af-t .af-num,.af-t td.af-zahl{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.af-t .af-akt-z{white-space:nowrap;text-align:right}
.af-t .af-akt-z .af-btn{padding:4px 7px;margin-left:2px}
.af-t tr.af-x td{background:var(--af-fl2);padding:0;border-bottom:2px solid var(--af-linie)}
.af-t .af-x-in{padding:10px 14px 10px 44px}
.af-t input[type=checkbox]{width:15px;height:15px;margin:0;accent-color:var(--af-mag)}
.af-tw{overflow-x:auto}  /* breite Tabellen schieben waagerecht, nie die Seite */

/* Werte-Tabelle (Feld · Erkannt · onOffice heute · Beleg) */
.af-wt{width:100%;border-collapse:collapse;font-size:12.5px;table-layout:fixed}
.af-wt th{text-align:left;font-size:10.5px;letter-spacing:.5px;text-transform:uppercase;color:var(--af-mute);font-weight:700;padding:5px var(--af-2);border-bottom:1px solid var(--af-linie)}
.af-wt td{padding:6px var(--af-2);border-bottom:1px solid var(--af-linie2);vertical-align:top;word-break:break-word}
.af-wt tr.af-klick{cursor:pointer}
.af-wt tr.af-klick:hover td{background:var(--af-hover3)}
.af-wt tr.af-an td{background:var(--af-mag-w)}
.af-wt td.af-f{font-weight:700}
.af-wt td.af-ist{color:var(--af-mute)}
.af-wt td.af-s{text-align:right;white-space:nowrap}
.af-wt td .af-z{display:block;font-size:10.5px;color:var(--af-mute);margin-top:2px;line-height:1.25}
.af-wt td .af-hin{display:block;font-size:11px;color:var(--af-rot);margin-top:2px}
.af-wt td .af-stift{opacity:0;color:var(--af-mag-t);font-size:11px;font-weight:700;margin-left:6px}
.af-wt tr:hover td .af-stift{opacity:1}
@media(max-width:700px){
  .af-wt tr{display:grid;grid-template-columns:1fr auto}.af-wt th{display:none}
  .af-wt td{border:0;padding:2px var(--af-2)}.af-wt td.af-f{grid-column:1/-1;padding-top:8px}
  .af-wt td.af-s{grid-column:2}.af-wt td.af-ist{grid-column:1/-1;border-bottom:1px solid var(--af-linie2);padding-bottom:8px}
}

/* Seitenmuster 3 · Fokus (ein Vorgang, Stapel als Leiste) */
.af-stapel{display:flex;align-items:center;gap:var(--af-2);padding:6px 14px;border-bottom:1px solid var(--af-linie);background:var(--af-fl);flex:0 0 auto;min-height:56px}
.af-stapel .af-zaehl{font-weight:900;font-size:15px;white-space:nowrap}
.af-stapel .af-zaehl small{font-weight:600;color:var(--af-mute);font-size:11.5px;display:block}
.af-chips-lauf{display:flex;gap:6px;overflow:hidden;flex:1 1 auto;min-width:0;padding:2px}
.af-chip{flex:0 0 auto;display:flex;align-items:center;gap:6px;border:1px solid var(--af-linie);border-radius:var(--af-r2);padding:4px 9px;font-size:11.5px;color:var(--af-grau);background:var(--af-fl);cursor:pointer;white-space:nowrap;border-left-width:3px}
.af-chip.af-rot{border-left-color:var(--af-rot)}.af-chip.af-amber{border-left-color:var(--af-amber)}.af-chip.af-grau{border-left-color:var(--af-mute2)}
.af-chip.af-an{background:var(--af-ink);color:var(--af-fl-ink);border-color:var(--af-ink)}

/* ---------- Filter-Chips (Text mit Zähler, aktiv = dunkle Pille) ---------- */
.af-filter{display:flex;gap:var(--af-1);flex-wrap:wrap}
.af-filter a,.af-filter button{padding:3px 10px;border-radius:999px;font-weight:700;font-size:12px;color:var(--af-grau);border:1px solid transparent;background:none;cursor:pointer;text-decoration:none}
.af-filter .af-an{background:var(--af-ink);color:var(--af-fl-ink)}
.af-filter .af-n{opacity:.7;margin-left:4px;font-variant-numeric:tabular-nums}
.af-suche{margin-left:auto;border:1px solid var(--af-linie);border-radius:999px;padding:5px 12px;font-size:12px;color:var(--af-mute);width:190px;background:var(--af-fl)}
@media(max-width:700px){.af-filter{flex-wrap:nowrap;overflow:auto;max-width:100%}.af-suche{display:none}}

/* ---------- Reiter (Unterreiter innerhalb einer Seite) ---------- */
.af-reiter{display:flex;gap:24px;border-bottom:1px solid var(--af-linie);padding:0 2px}
.af-reiter a,.af-reiter button{background:none;border:0;padding:8px 0 6px;font-weight:600;font-size:13px;color:var(--af-mute);cursor:pointer;box-shadow:inset 0 -2px 0 transparent;text-decoration:none}
.af-reiter .af-an{color:var(--af-ink);font-weight:700;box-shadow:inset 0 -2px 0 var(--af-mag)}

/* ---------- Status: Punkt · Pille · Prüfpunkte · Avatar ---------- */
.af-dot{display:inline-block;width:10px;height:10px;border-radius:50%;flex:0 0 auto;vertical-align:middle}
.af-dot.af-rot{background:var(--af-rot)}.af-dot.af-amber{background:var(--af-amber)}.af-dot.af-grau{background:var(--af-mute3)}.af-dot.af-gruen{background:var(--af-gruen)}.af-dot.af-blau{background:var(--af-blau)}
.af-dot.af-ring{background:var(--af-fl);border:2px solid var(--af-rot)}  /* angefordert / unterwegs */
/* P3 der zentralen Aufgabenliste (04.09.2026): Gelb = regulär. Rot bleibt kritisch, Amber = dringend, Grau = optional. */
.af-dot.af-gelb{background:var(--af-gelb)}.af-pill.af-gelb{background:var(--af-gelb-w);color:var(--af-gelb-t)}.af-pill.af-kontur.af-gelb{border-color:var(--af-gelb)}
.af-dot.af-klein{width:7px;height:7px}
.af-pill{display:inline-flex;align-items:center;gap:5px;border-radius:999px;padding:1px 8px;font-size:11px;font-weight:700;white-space:nowrap;border:1px solid transparent;line-height:1.5}
.af-pill.af-rot{background:var(--af-rot-w);color:var(--af-rot)}.af-pill.af-amber{background:var(--af-amber-w);color:var(--af-amber-t)}.af-pill.af-gruen{background:var(--af-gruen-w);color:var(--af-gruen-t)}
.af-pill.af-grau{background:var(--af-pill-grau);color:var(--af-grau)}.af-pill.af-blau{background:var(--af-blau-w);color:var(--af-blau)}.af-pill.af-mag{background:var(--af-mag-w);color:var(--af-mag-t)}
.af-pill.af-kontur{background:var(--af-fl)}.af-pill.af-kontur.af-rot{border-color:var(--af-rot)}.af-pill.af-kontur.af-gruen{border-color:var(--af-gruen)}.af-pill.af-kontur.af-amber{border-color:var(--af-amber)}
.af-av{display:inline-flex;width:22px;height:22px;border-radius:50%;background:var(--af-av-bg);color:var(--af-grau);font-size:10px;font-weight:800;align-items:center;justify-content:center;flex:0 0 auto}
.af-av.af-ag{background:var(--af-blau-w);color:var(--af-blau);border-radius:6px}  /* Agent = eckig, Mensch = rund */
.af-pruef{display:flex;gap:6px;flex-wrap:wrap}
.af-pruef span{display:inline-flex;align-items:center;gap:5px;font-size:11.5px;color:var(--af-grau)}
.af-pruef span::before{content:'';width:12px;height:12px;border-radius:50%;background:var(--af-gruen);flex:0 0 auto;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M3 6.2l2 2 4-4.4' fill='none' stroke='%23fff' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E")}
.af-pruef span.af-nein::before{background:var(--af-rot);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M6 3v3.4M6 8.6v.4' fill='none' stroke='%23fff' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E")}
.af-pruef span.af-offen::before{background:var(--af-fl);border:2px solid var(--af-mute2);background-image:none}
.af-schritte{display:flex;align-items:center;gap:0;font-size:11.5px;color:var(--af-mute)}   /* kompakter Stepper */
.af-schritte span{display:flex;align-items:center;gap:5px}
.af-schritte span::after{content:'';width:22px;height:1px;background:var(--af-linie);margin:0 6px}
.af-schritte span:last-child::after{display:none}
.af-schritte i{width:9px;height:9px;border-radius:50%;border:2px solid var(--af-mute2);display:inline-block}
.af-schritte .af-fertig{color:var(--af-grau)}.af-schritte .af-fertig i{background:var(--af-mag);border-color:var(--af-mag)}
.af-schritte .af-jetzt{color:var(--af-ink);font-weight:700}.af-schritte .af-jetzt i{border-color:var(--af-mag)}
.af-schritte .af-stopp i{background:var(--af-rot);border-color:var(--af-rot)}

/* ---------- Knöpfe ---------- */
.af-btn{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--af-linie);background:var(--af-fl);color:var(--af-ink);border-radius:var(--af-r);padding:6px 12px;font-weight:700;font-size:12.5px;line-height:1.3;white-space:nowrap;cursor:pointer;text-decoration:none;min-height:30px}
.af-btn:hover{border-color:var(--af-mute3);background:var(--af-hover);text-decoration:none}
.af-btn.af-prim{background:var(--af-mag);border-color:var(--af-mag);color:#fff}.af-btn.af-prim:hover{background:var(--af-mag-d)}
.af-btn.af-gruen{background:var(--af-gruen);border-color:var(--af-gruen);color:#fff}
.af-btn.af-ok{color:var(--af-gruen-t);border-color:var(--af-gruen-l);background:var(--af-gruen-w)}
.af-btn.af-leise{border-color:transparent;background:transparent;color:var(--af-grau)}.af-btn.af-leise:hover{background:var(--af-bg2)}
.af-btn.af-gefahr{color:var(--af-rot)}.af-btn.af-gefahr:hover{background:var(--af-rot-w);border-color:var(--af-rot-l2)}
.af-btn.af-klein{padding:3px 8px;font-size:11.5px;min-height:24px}
.af-btn.af-ico{padding:5px 7px}
.af-btn svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.af-btn[disabled]{opacity:.45;cursor:not-allowed}
.af-kbd{font:600 10.5px/1 var(--af-font);border:1px solid var(--af-linie3);border-bottom-width:2px;border-radius:4px;padding:2px 5px;background:var(--af-fl);color:var(--af-grau);margin-left:4px}
.af-link-knopf{background:none;border:0;padding:0;color:var(--af-mag-t);font-weight:700;cursor:pointer}

/* ---------- Formulare ---------- */
.af-feld{display:flex;flex-direction:column;gap:3px;min-width:0}
.af-feld label,.af-feld .af-lbl{font-size:10.5px;letter-spacing:.5px;text-transform:uppercase;color:var(--af-mute);font-weight:700}
.af-in,.af-sel,.af-ta{border:1px solid var(--af-linie);border-radius:var(--af-r);padding:6px 9px;font-size:12.5px;background:var(--af-fl);width:100%;min-height:32px;color:var(--af-ink)}
.af-in:focus,.af-sel:focus,.af-ta:focus{border-color:var(--af-mag);box-shadow:0 0 0 3px var(--af-mag-w);outline:0}
.af-in.af-fehler,.af-sel.af-fehler,.af-ta.af-fehler{border-color:var(--af-rot);box-shadow:0 0 0 3px var(--af-rot-w)}
.af-in.af-aktiv{border-color:var(--af-mag);box-shadow:0 0 0 3px var(--af-mag-w)}   /* Korrektur an Ort und Stelle */
.af-sel{appearance:none;padding-right:26px;background:var(--af-fl) var(--af-sel-pfeil) no-repeat right 9px center/9px}
.af-ta{min-height:72px;resize:vertical;line-height:1.4}
.af-feld .af-hilfe{font-size:11px;color:var(--af-mute)}
.af-feld .af-fehltext{font-size:11px;color:var(--af-rot);font-weight:700}
.af-form{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:10px 14px}
.af-form .af-voll{grid-column:1/-1}
.af-check{display:inline-flex;align-items:center;gap:7px;font-size:12.5px;cursor:pointer}
.af-check input{width:15px;height:15px;margin:0;accent-color:var(--af-mag)}
.af-korr{background:var(--af-mag-w);border:1px solid var(--af-mag-l);border-radius:var(--af-r);padding:8px 10px}
.af-korr .af-zeile-k{display:flex;gap:8px;align-items:center}
.af-korr .af-zitat{font-size:11.5px;color:var(--af-grau);margin-top:6px;border-left:2px solid var(--af-mag);padding-left:8px}

/* ---------- Hinweise · Bestätigung · Toast · Leer ---------- */
.af-hinweis{border-left:3px solid var(--af-amber);background:var(--af-amber-w);padding:8px 11px;border-radius:0 var(--af-r) var(--af-r) 0;font-size:12.5px}
.af-hinweis.af-rot{border-color:var(--af-rot);background:var(--af-rot-w)}
.af-hinweis.af-gruen{border-color:var(--af-gruen);background:var(--af-gruen-w)}
.af-hinweis.af-blau{border-color:var(--af-blau);background:var(--af-blau-w)}
/* Info-Punkt (Regel Jens 06.09.2026): Erklaer- und Hinweistexte stehen nicht offen auf der Seite,
   sondern hinter einem kleinen „i“. details/summary = kein JS, Tastatur und Handy. Helfer ep_af_info(). */
.af-i{display:inline-block;position:relative;vertical-align:middle;margin-left:6px}
.af-i>summary{list-style:none;display:inline-flex;align-items:center;justify-content:center;width:16px;height:16px;border-radius:50%;border:1px solid var(--af-mute);color:var(--af-mute);font:700 10px/1 var(--af-font);cursor:pointer;user-select:none}
.af-i>summary::-webkit-details-marker{display:none}
.af-i>summary:hover,.af-i[open]>summary{border-color:var(--af-mag);color:var(--af-mag-t)}
.af-i-box{position:absolute;z-index:40;top:22px;left:-8px;width:320px;max-width:calc(100vw - 40px);background:var(--af-fl);border:1px solid var(--af-linie);border-radius:var(--af-r2);box-shadow:0 10px 30px var(--af-schatten);padding:10px 12px;font:400 12px/1.5 var(--af-font);color:var(--af-grau);text-align:left;font-weight:400;white-space:normal}
.af-i.af-i-r .af-i-box{left:auto;right:-8px}
.af-i-box b{color:var(--af-ink)}
@media(max-width:700px){.af-i-box,.af-i.af-i-r .af-i-box{position:fixed;left:12px;right:12px;top:auto;width:auto;max-width:none;margin-top:6px}}
.af-banner{display:flex;gap:10px;align-items:center;background:var(--af-rot-w);border-bottom:1px solid var(--af-rot-l);color:var(--af-rot-t);padding:8px 18px;font-size:12.5px}
.af-banner .af-sp{flex:1}
.af-bestaet{display:flex;align-items:center;gap:10px;background:var(--af-gruen-w);border:1px solid var(--af-gruen-l);border-radius:var(--af-r2);padding:8px 12px;font-size:13px}
.af-bestaet b{color:var(--af-gruen-t)}.af-bestaet .af-sp{flex:1}
.af-toast{position:fixed;left:50%;bottom:64px;transform:translateX(-50%);background:var(--af-ink);color:var(--af-fl-ink);padding:10px 16px;border-radius:var(--af-r2);font-weight:700;font-size:13px;box-shadow:0 10px 30px var(--af-schatten);z-index:50;display:flex;gap:12px;align-items:center}
.af-toast .af-rk{color:var(--af-toast-rk);font-weight:800;cursor:pointer}
.af-leer{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:40px 20px;color:var(--af-grau);gap:8px}
.af-leer .af-gross{font-size:18px;font-weight:800;color:var(--af-ink)}
.af-leer svg{width:46px;height:46px;stroke:var(--af-gruen);fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}

/* ---------- Dokument (Blatt mit Fundstelle) ---------- */
.af-doc-leiste{display:flex;align-items:center;gap:6px;font-size:11.5px;color:var(--af-grau);padding:6px 10px;border-bottom:1px solid var(--af-linie2)}
.af-doc-leiste .af-btn{padding:2px 7px;min-height:22px}
.af-doc-leiste .af-r{margin-left:auto}
.af-doc-feld{height:264px;overflow:auto;padding:12px;background:var(--af-bg2)}
.af-blatt{background:#fff;border:1px solid #d9d4d5;box-shadow:0 1px 3px rgba(0,0,0,.08);padding:18px 20px;font-size:11px;color:#444;position:relative;max-width:420px;margin:0 auto}
.af-fund{position:absolute;border:2px solid var(--af-mag);border-radius:4px;box-shadow:0 0 0 4px rgba(202,47,86,.12)}
.af-fund .af-fund-tag{position:absolute;top:-10px;left:6px;background:var(--af-mag);color:#fff;font-size:9.5px;font-weight:800;padding:1px 6px;border-radius:3px;letter-spacing:.3px;white-space:nowrap}
.af-fund.af-leer-fund{border-style:dashed;border-color:var(--af-amber);box-shadow:none}.af-fund.af-leer-fund .af-fund-tag{background:var(--af-amber)}

/* ---------- Kennzahlen: Zeile statt Kacheln ---------- */
.af-kpi{display:flex;gap:var(--af-6);flex-wrap:wrap;padding:var(--af-2) 0;border-bottom:1px solid var(--af-linie)}
.af-kpi div{min-width:110px}
.af-kpi b{display:block;font-size:22px;font-weight:900;letter-spacing:-.3px;font-variant-numeric:tabular-nums;line-height:1.1}
.af-kpi span{font-size:11px;letter-spacing:.4px;text-transform:uppercase;color:var(--af-mute);font-weight:700}
.af-kpi .af-delta{font-size:11.5px;text-transform:none;letter-spacing:0;font-weight:700;margin-left:6px}
.af-kpi .af-delta.af-gut{color:var(--af-gruen-t)}.af-kpi .af-delta.af-schlecht{color:var(--af-rot)}

/* ---------- Handy (ein Breakpoint, wie ip-mobile.css) ---------- */
@media(max-width:700px){
  :root,html.af-pn-zu{--af-nav:0px}
  .af-kopfzeile{left:0;padding:0 14px}.af-seite{left:0}
  .af-leiste{padding:var(--af-2) 12px;gap:var(--af-2)}
  .af-liste{width:100%;border-right:0}
  .af-griff{display:none}   /* Handy: Liste und Detail stehen nacheinander, nichts zu ziehen */
  .af-ez-kopf{display:none}   /* Einzeilen-Form am Handy: zwei Zeilen, die Objektnummer wandert in Zeile 2 */
  .af-zeile.af-ez{grid-template-columns:16px minmax(0,1fr) auto;padding:8px 12px 8px 9px}
  .af-ez .af-ez-o{display:none}.af-ez .af-ez-2{display:flex}.af-ez .af-ez-2o{display:inline}.af-ez .af-ez-t{font-size:14px}
  body.af-mob-detail .af-liste,body.af-mob-detail .af-leiste{display:none}
  body:not(.af-mob-detail) .af-detail{display:none}
  .af-zurueck{display:inline-flex}
  .af-listeknopf{display:none}
  .af-akt{padding:8px 10px;gap:6px;flex-wrap:wrap}.af-akt .af-hint,.af-akt .af-sp{display:none}
  .af-akt .af-btn{flex:1 1 30%;justify-content:center;min-height:40px}.af-akt .af-btn.af-prim{flex-basis:100%}
  .af-t{display:none}.af-karten{display:block}   /* Tabelle → Karten */
  .af-karte{background:var(--af-fl);border-bottom:1px solid var(--af-linie);padding:8px 12px;display:grid;grid-template-columns:12px 1fr;gap:2px 8px}
  .af-karte .af-k1{font-weight:800;font-size:13px;display:flex;justify-content:space-between;gap:8px}
  .af-karte .af-k2,.af-karte .af-k3{grid-column:2;color:var(--af-grau);font-size:12px}
  .af-karte .af-k3{display:flex;gap:6px;align-items:center;margin-top:4px}.af-karte .af-k3 .af-sp{flex:1}
  .af-box .af-bt .af-r{display:none}
  .af-btn,.af-in,.af-sel{min-height:40px}   /* Tippflächen */
  .af-stapel .af-chips-lauf{display:none}
  .af-doc-feld{height:220px}
}
@media(min-width:701px){.af-karten{display:none}.af-zurueck{display:none}}
@media print{.af-kopfzeile,.af-akt,.af-leiste{display:none!important}.af-seite{position:static}}
@media(prefers-reduced-motion:reduce){.af *{transition:none!important;animation:none!important}}

/* Nachträge Welle 1 (04.09.2026, aus dem ersten Render des Postkorbs) */
.af [hidden]{display:none !important}                       /* hidden schlägt jede display-Klasse */
.af-leiste{flex-wrap:nowrap}
.af-leiste .af-h1,.af-filter a,.af-filter button{white-space:nowrap}
.af-leiste .af-h1{min-width:0;flex:0 1 auto;overflow:hidden;text-overflow:ellipsis}
@media(max-width:700px){.af-leiste{overflow:hidden}.af-filter{min-width:0}}
@media(max-width:700px){
  .af-leiste{flex-wrap:wrap;row-gap:6px}.af-leiste .af-h1{flex:1 1 100%}   /* Handy: Titel eigene Zeile, Knoepfe darunter statt abgeschnitten */
  body.af-fluss:has(.af-akt,.savebar,.result) .sn-fab{bottom:76px}            /* Such-Knopf ueber der festen Aktionsleiste */
}
.af-bestaet{margin-bottom:10px}

/* Nachträge Welle 3 (04.09.2026, GF-Seiten) */
/* Tabelle → Karten am Handy OHNE zweites Markup: .af-t-karten stapelt die Zeilen, jede Zelle mit
   data-l="…" zeigt ihr Label davor. Für Tabellen, die keine eigene Kartenansicht haben. */
@media(max-width:700px){
  .af-t.af-t-karten{display:block;width:100%}
  .af-t.af-t-karten thead{display:none}
  .af-t.af-t-karten tbody,.af-t.af-t-karten tr{display:block}
  .af-t.af-t-karten tr{border-bottom:1px solid var(--af-linie);padding:8px 12px;height:auto}
  .af-t.af-t-karten td{display:block;border:0;padding:1px 0;text-align:left}
  .af-t.af-t-karten td[data-l]::before{content:attr(data-l);font-size:10.5px;text-transform:uppercase;letter-spacing:.5px;color:var(--af-mute);font-weight:700;margin-right:6px}
  .af-t.af-t-karten td:empty{display:none}
  .af-t.af-t-karten td.af-akt-z,.af-t.af-t-karten td.af-num{text-align:left}
  .af-t.af-t-karten td.af-akt-z{padding-top:6px}
}
/* Leseseiten im festen Rahmen (Muster 4 auf GF-Seiten): Inhalt scrollt im Bereich, Kopf bleibt. */
.af-lesen-inhalt{padding:16px 24px 40px}
.af-abschnitt{margin:0 0 22px}
.af-abschnitt > h2{font-size:11px;letter-spacing:.6px;text-transform:uppercase;color:var(--af-mute);font-weight:800;margin:0 0 8px;padding-bottom:6px;border-bottom:1px solid var(--af-linie)}
.af-erkl{color:var(--af-grau);font-size:12.5px;line-height:1.5;margin:0 0 10px;max-width:78ch}
.af-erkl b{color:var(--af-ink)}
.af-box .af-bi.af-lesen-pad{padding:10px 14px}
.af-kpi{gap:var(--af-4) var(--af-8)}
.af-kpi div{min-width:120px}
.af-kpi b.af-leerwert{font-size:13px;font-weight:700;color:var(--af-mute2);font-style:italic;padding-top:5px}
.af-kpi .af-kz{display:block;font-size:11.5px;color:var(--af-mute);text-transform:none;letter-spacing:0;font-weight:400;margin-top:2px;max-width:220px;line-height:1.35}
.af-balken{background:var(--af-bg2);border-radius:4px;height:8px;overflow:hidden;min-width:80px}
.af-balken i{display:block;height:100%;background:var(--af-mag)}
.af-mono{font-family:ui-monospace,Consolas,monospace;font-size:12px}

/* Emojis in Bestandstexten: bleiben im Markup, sind auf internen Seiten nicht sichtbar (Grundsatz 3) */
.af-emo{display:none}

@media(max-width:700px){.af-t.af-t-karten{min-width:0 !important}.af-t.af-t-karten td{overflow-wrap:anywhere}}

/* ============================================================================
   DUNKELMODUS (05.09.2026, Wunsch Jens) – EIN Block, nur Token und Chrome.
   Schalter: html[data-thema="dunkel"], gesetzt von ep_af_css_link() (af_css.php) aus der
   Konto-Einstellung 'thema' (menue_zustand.json: hell · dunkel · system). Umschalten im Menü
   unter Konto → Darstellung. Gilt NUR für Seiten der Arbeitsfläche (body.af) – Altseiten ohne
   body.af bleiben hell, bis sie umgebaut sind (kein halbdunkles Flickwerk).
   Kontraste (WCAG AA) prüft /root/pruefstaende/dunkelmodus.php bei jedem Deploy dieser Datei.
   Eigentümer-Seiten (Kunden) bekommen keinen Schalter: dort wird das Attribut nie gesetzt.
   ============================================================================ */
html[data-thema="dunkel"] body.af{color-scheme:dark;
  --af-mag:#ca2f56; --af-mag-d:#b12a4c; --af-mag-w:#3a1f27; --af-mag-t:#f28aa6; --af-mag-l:#5a2a37;
  --af-ink:#f1eeef; --af-grau:#cfc9cb; --af-mute:#a7a1a3; --af-mute2:#7a7577; --af-mute3:#5a5557;
  --af-linie:#3a3637; --af-linie2:#2f2c2d; --af-linie3:#4a4547; --af-bg:#161415; --af-bg2:#1e1c1d; --af-fl:#232122;
  --af-fl-ink:#161415; --af-hover:#2a2728; --af-hover2:#2c2829; --af-hover3:#2e292b; --af-fl2:#272425;
  --af-pill-grau:#332f30; --af-av-bg:#3a3637;
  --af-gruen:#2e9e5b; --af-gruen-t:#7fd9a1; --af-gruen-w:#1b3325; --af-gruen-l:#2f5a3e;
  --af-amber:#c98a12; --af-amber-t:#f2c45e; --af-amber-w:#3a2d12; --af-amber-l:#5a4520;
  --af-rot:#ee6b5e; --af-rot-t:#f5a097; --af-rot-w:#3d1f1c; --af-rot-l:#5c2e29; --af-rot-l2:#5c2e29;
  --af-blau:#82b3de; --af-blau-w:#1c2a38;
  --af-gelb:#e3c21a; --af-gelb-t:#f0d75a; --af-gelb-w:#33300f;
  --af-toast-rk:#a82747; --af-schatten:rgba(0,0,0,.6);
  --af-sel-pfeil:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23a7a1a3' stroke-width='1.5'/%3E%3C/svg%3E");
  /* Alte ip-ui-Token (Einstellungen, ua_widget) folgen mit – eine Quelle, kein zweiter Block in ip-ui.css */
  --ip-ink:#f1eeef; --ip-text:#cfc9cb; --ip-muted:#a7a1a3; --ip-bg:#161415; --ip-surface:#232122;
  --ip-line:#3a3637; --ip-line-2:#4a4547; --ip-primary-wash:#3a1f27; --ip-dark:#0f0e0f;
  --ip-success-w:#1b3325; --ip-warning-w:#3a2d12; --ip-error-w:#3d1f1c; --ip-info-w:#1c2a38;
  --ip-peach:linear-gradient(150deg,#3a2a22,#33241d); --ip-sage:linear-gradient(150deg,#22301f,#1d2a1b);
  --ip-sand:linear-gradient(150deg,#332c1a,#2d2616); --ip-rose:linear-gradient(150deg,#3a2229,#331d24);
  --ip-sky:linear-gradient(150deg,#1e2a38,#1a2431);
  --sh-1:0 1px 2px rgba(0,0,0,.4); --sh-2:0 1px 2px rgba(0,0,0,.4),0 12px 34px rgba(0,0,0,.35); --sh-3:0 18px 44px rgba(0,0,0,.6);
  background:var(--af-bg);color:var(--af-ink);
}
/* Papier bleibt Papier: das Dokument-Blatt zeigt eine Seite, kein Bedienelement. */
html[data-thema="dunkel"] body.af .af-blatt{background:#fff;color:#444;border-color:#d9d4d5}
/* Kopfzeile (ip_admin_chrome / staff_nav) */
html[data-thema="dunkel"] body.af .ip-head,html[data-thema="dunkel"] body.af .sn-bar{background:var(--af-fl);border-bottom-color:var(--af-linie);color:var(--af-ink)}
html[data-thema="dunkel"] body.af .ip-head .ip-intern{color:var(--af-mute);border-color:var(--af-linie)}
html[data-thema="dunkel"] body.af .ip-head .ip-ttl{color:var(--af-ink)}
html[data-thema="dunkel"] body.af .ip-head .ip-sub,html[data-thema="dunkel"] body.af .ip-head .ip-meta,html[data-thema="dunkel"] body.af .ip-head .ip-gear{color:var(--af-mute)}
html[data-thema="dunkel"] body.af .ip-head .ip-meta a{color:var(--af-mag-t)}
html[data-thema="dunkel"] body.af .ip-head .ip-meta a.ip-refresh{background:var(--af-fl);color:var(--af-ink);border-color:var(--af-linie)}
html[data-thema="dunkel"] body.af .ip-head .ip-meta a.ip-refresh:hover{background:var(--af-hover);border-color:var(--af-mute3);color:var(--af-ink)}
html[data-thema="dunkel"] body.af .ip-head .ip-gear:hover{color:var(--af-mag-t);background:var(--af-hover)}
/* Das Logo (Magenta + Grau auf Transparenz) bekommt eine weiße Platte – die CI-Farben bleiben. */
html[data-thema="dunkel"] body.af .ip-head .ip-logo,html[data-thema="dunkel"] body.af .sn-logo,html[data-thema="dunkel"] body.af .af-kopfzeile .af-logo{background:#fff;padding:4px 8px;border-radius:6px}
/* „Intern“ unter dem Logo steht mit auf der weissen Platte – dort braucht es eine dunkle Schrift (11.09.2026) */
html[data-thema="dunkel"] body.af .sn-logo .sn-logo-sub{color:var(--af-mute3)}
/* Menü (portal_nav.php) – Symbolleiste, Untermenü, Klapp-Knopf, Zahl */
html[data-thema="dunkel"] body.af .pn-rail,html[data-thema="dunkel"] body.af .pn-sub{background:var(--af-fl)}
html[data-thema="dunkel"] body.af .pn-sub{border-left-color:var(--af-linie)}
html[data-thema="dunkel"] body.af .pn .pn-b,html[data-thema="dunkel"] body.af .pn .pn-p,html[data-thema="dunkel"] body.af .pn .pn-s-ttl{color:var(--af-ink)}
html[data-thema="dunkel"] body.af .pn .pn-b:hover,html[data-thema="dunkel"] body.af .pn .pn-p:hover{background:var(--af-hover);color:var(--af-ink)}
html[data-thema="dunkel"] body.af .pn .pn-b.on,html[data-thema="dunkel"] body.af .pn .pn-p.on{background:var(--af-mag-w);color:var(--af-ink)}
html[data-thema="dunkel"] body.af .pn-g,html[data-thema="dunkel"] body.af .pn-klapp{color:var(--af-mute)}
html[data-thema="dunkel"] body.af .pn-klapp:hover{background:var(--af-hover);color:var(--af-grau)}
html[data-thema="dunkel"] body.af .pn-stand{background:var(--af-mag-w);color:var(--af-mag-t)}
html[data-thema="dunkel"] body.af .pn-zahl{box-shadow:0 0 0 2px var(--af-fl)}
html.pn-zu[data-thema="dunkel"] body.af .pn-sub{box-shadow:6px 0 26px rgba(0,0,0,.55)}
/* Handy: Burger und ausgeklapptes Menü (ip-mobile.css) */
html[data-thema="dunkel"] body.af .ip-burger{background:var(--af-fl);color:var(--af-grau);border-color:var(--af-linie)}
html.ip-menu-auf[data-thema="dunkel"] body.af nav.pn{background:var(--af-fl);border-top-color:var(--af-linie)}
html.ip-menu-auf[data-thema="dunkel"] body.af nav.pn .pn-s-ttl,html.ip-menu-auf[data-thema="dunkel"] body.af nav.pn .pn-g{color:var(--af-mute)}
html.ip-menu-auf[data-thema="dunkel"] body.af nav.pn .pn-p{color:var(--af-ink)}
html.ip-menu-auf[data-thema="dunkel"] body.af nav.pn .pn-p.on{background:var(--af-mag-w);color:var(--af-ink)}
html[data-thema="dunkel"] body.af .ip-tab-wisch{background-image:linear-gradient(to right,var(--af-fl) 30%,rgba(35,33,34,0)),linear-gradient(to left,var(--af-fl) 30%,rgba(35,33,34,0)),linear-gradient(to right,rgba(0,0,0,.5),rgba(0,0,0,0)),linear-gradient(to left,rgba(0,0,0,.5),rgba(0,0,0,0))}
html[data-thema="dunkel"] body.af table.ip-tab-karten tr{background:var(--af-fl);border-color:var(--af-linie)}
/* Alte Karten (ip-ui.css) und die Ansicht-als-Leiste */
html[data-thema="dunkel"] body.af .card{background:var(--af-fl)}
html[data-thema="dunkel"] body.af .ip-table tr:hover td,html[data-thema="dunkel"] body.af .upload{background:var(--af-hover)}
html[data-thema="dunkel"] body.af #ep-ansicht{background:var(--af-fl);color:var(--af-grau)}
html[data-thema="dunkel"] body.af #ep-ansicht select{background:var(--af-fl);color:var(--af-ink);border-color:var(--af-linie)}
/* ÜBERGANG für Inline-Stile alter Seiten (style="background:#fff" …): greift nur im Dunkeln und nur
   auf die häufigsten festen Werte. Die dauerhafte Lösung ist die Token-Umstellung je Seite
   (/root/af_token.php) – diese Regeln fangen ab, was noch nicht umgestellt ist, damit keine weiße
   Kachel mit heller Schrift entsteht (gefunden im Render der Einstellungen, 05.09.2026). */
html[data-thema="dunkel"] body.af [style*="background:#fff"],html[data-thema="dunkel"] body.af [style*="background:#ffffff"],html[data-thema="dunkel"] body.af [style*="background-color:#fff"]{background-color:var(--af-fl)!important}
html[data-thema="dunkel"] body.af [style*="background:#faf9f9"],html[data-thema="dunkel"] body.af [style*="background:#f5f4f4"],html[data-thema="dunkel"] body.af [style*="background:#efeced"],html[data-thema="dunkel"] body.af [style*="background:#f2f2f2"],html[data-thema="dunkel"] body.af [style*="background:#f2f1f1"]{background-color:var(--af-bg2)!important}
html[data-thema="dunkel"] body.af [style*="background:#fdeef2"],html[data-thema="dunkel"] body.af [style*="background:#fbeef2"]{background-color:var(--af-mag-w)!important}
html[data-thema="dunkel"] body.af [style*="color:#2b2829"],html[data-thema="dunkel"] body.af [style*="color:#353233"]{color:var(--af-ink)!important}
html[data-thema="dunkel"] body.af [style*="color:#5d595a"]{color:var(--af-grau)!important}
html[data-thema="dunkel"] body.af [style*="color:#8a8788"],html[data-thema="dunkel"] body.af [style*="color:#8a8688"]{color:var(--af-mute)!important}
html[data-thema="dunkel"] body.af [style*="solid #e6e1e2"],html[data-thema="dunkel"] body.af [style*="border-color:#e6e1e2"]{border-color:var(--af-linie)!important}
/* Bilder und Diagramme nicht anfassen; Formularfelder folgen color-scheme. */