/* =============================================================================
   Derigo Intranet — gemeinsame Bausteine (Paket H, 13.10.2026)

   Klassen aus dem freigegebenen Entwurf (Entwuerfe/FACTORY_2026-10-13/entwurf.css), Maße OpenAI
   (07-Skills/app-bausatz/references/openai-masse-2026-10-12.md). Lädt als letzte Datei.
   PHP-Helfer dazu in lib/seite.php (zustand_marke, baustein_reiter, baustein_zeile,
   baustein_meldung, panel_anfang/panel_ende, baustein_icon).
   ============================================================================= */

/* ---------- Text ---------- */
.titel-gross{font:600 20px/26px var(--font);margin:0;color:var(--schwarz)}
.abschnitt-titel{font:600 16px/24px var(--font);margin:0;color:var(--schwarz)}
.label{font:600 14px/20px var(--font);color:var(--schwarz)}
.leise{color:var(--text-2)}
.zahlen{font-variant-numeric:tabular-nums}
.pfad{display:flex;align-items:center;gap:4px;font-size:14px;color:var(--text-2);margin:0 0 12px}
.pfad a{color:var(--text-2);text-decoration:none}
.pfad a:hover{color:var(--schwarz)}
.pfad .icn{width:16px;height:16px}

/* ---------- Anordnung ---------- */
.knopfreihe{display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.knopfreihe.rechts{justify-content:flex-end}
.knopfreihe>button,.knopfreihe>.btn,.knopfreihe>.knopf,.knopfreihe>form>button{margin-top:0}
.stapel{display:flex;flex-direction:column;gap:8px}
.seite-stapel{display:flex;flex-direction:column;gap:16px}
.raster{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:24px;align-items:start}
.zwei{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media(max-width:900px){.raster{grid-template-columns:minmax(0,1fr)}}
@media(max-width:600px){.zwei{grid-template-columns:1fr}}

/* ---------- Karte mit Kopf / Körper / Fuß (Karte ohne eigenen Innenrand) ---------- */
.karte:has(>.karte-kopf),.karte:has(>.koerper),.karte:has(>.liste-innen){padding:0}
.karte .koerper{padding:16px}
.karte .koerper+.koerper{border-top:1px solid var(--linie-2)}
.karte-kopf{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:12px 16px;border-bottom:1px solid var(--linie-2);min-height:52px}
.karte-kopf .abschnitt-titel{display:flex;align-items:center;gap:8px}
.karte-kopf .abschnitt-titel .icn{width:18px;height:18px;color:var(--text-2)}
.karte-kopf .rechts{margin-left:auto;display:flex;gap:8px;align-items:center}
.karte-fuss{display:flex;align-items:center;flex-wrap:wrap;gap:12px;padding:12px 16px;border-top:1px solid var(--linie);background:#FBFBFA;border-radius:0 0 var(--radius-karte) var(--radius-karte)}
.karte-fuss .rechts{margin-left:auto;display:flex;gap:12px;align-items:center}
.karte-kopf button,.karte-kopf .btn,.karte-fuss button,.karte-fuss .btn{margin-top:0}

/* ---------- Leseansicht: Angaben ---------- */
.angaben{display:grid;grid-template-columns:160px minmax(0,1fr);margin:0}
.angaben dt,.angaben dd{padding:10px 0;border-bottom:1px solid var(--linie-2);margin:0}
.angaben dt{color:var(--text-2)}
.angaben dd{color:var(--schwarz)}
.angaben dt:last-of-type,.angaben dd:last-of-type{border-bottom:0}
@media(max-width:600px){.angaben{grid-template-columns:120px minmax(0,1fr)}}

/* ---------- Formularfeld mit Hilfe (Label → Hilfe 4 · Hilfe → Feld 8 · Feldgruppen 24) ---------- */
.feld{margin-bottom:24px}
.feld>label,.feld>.label{display:block;margin:0 0 8px}
.feld>label:has(+.hilfe){margin-bottom:4px}
.feld .hilfe{font-size:12px;line-height:16px;color:var(--text-2);margin:0 0 8px}
.feld>input+.hilfe,.feld>select+.hilfe,.feld>textarea+.hilfe{margin:4px 0 0}

/* ---------- Zustandsmarke: immer Text + Farbe (zu prüfen, freigegeben, abgelehnt, storniert, übergeben, Bestätigung fehlt, aktiv) ---------- */
.z:not(th):not(td){display:inline-flex;align-items:center;gap:6px;height:22px;padding:0 8px;border-radius:var(--radius-marke);font:600 12px/18px var(--font);
  white-space:nowrap;background:var(--linie-2);color:var(--text-2);vertical-align:middle}
.z:not(th):not(td)::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor;flex:none}
.z-gelb{background:#FFF4CF!important;color:var(--gelb-text)!important}
.z-gruen{background:var(--gruen-bg)!important;color:var(--gruen)!important}
.z-rot{background:var(--rot-bg)!important;color:var(--rot)!important}
.z-grau{background:var(--linie-2)!important;color:var(--text-2)!important}
.z-ueber{background:#fff!important;color:var(--text)!important;box-shadow:inset 0 0 0 1px var(--feld-rand)}
.marke-klein{display:inline-flex;align-items:center;gap:4px;height:22px;padding:0 8px;border-radius:var(--radius-marke);border:1px solid var(--linie);
  font:500 12px/18px var(--font);color:var(--text-2);background:#fff;white-space:nowrap}
.marke-klein .icn{width:13px;height:13px}

/* ---------- Meldung (Erfolg/Fehler) und Hinweise mit Farbe ---------- */
.meldung,.hinweis.gelb,.hinweis.rot,.hinweis.gruen,.hinweis.grau{display:flex;gap:12px;align-items:flex-start}
.meldung>.icn,.hinweis.gelb>.icn,.hinweis.rot>.icn,.hinweis.gruen>.icn,.hinweis.grau>.icn{width:20px;height:20px;flex:none;vertical-align:0}
.meldung b,.hinweis.gelb b,.hinweis.rot b,.hinweis.gruen b,.hinweis.grau b{display:block;font-weight:600}
.meldung>div,.hinweis.gelb>div,.hinweis.rot>div,.hinweis.gruen>div,.hinweis.grau>div{flex:1;min-width:0}
.meldung .rechts,.hinweis .rechts{margin-left:auto;align-self:center}
.meldung .rechts>*,.hinweis .rechts>*{margin-top:0}
.hinweis.gelb{background:var(--gelb-bg);border-color:var(--gelb-linie);color:var(--text)}
.hinweis.gelb>.icn{color:var(--gelb-text)}
.hinweis.rot{background:var(--rot-bg);border-color:var(--rot-linie);color:var(--text)}
.hinweis.rot>.icn{color:var(--rot)}
.hinweis.gruen{background:var(--gruen-bg);border-color:var(--gruen-linie);color:var(--text)}
.hinweis.gruen>.icn{color:var(--gruen)}
.hinweis.grau{background:#FBFBFA;border-color:var(--linie);color:var(--text)}
.hinweis.grau>.icn{color:var(--text-2)}

/* ---------- Reiter mit Zähler (Regeln in app.css .reiter), Zeile mit Knöpfen rechts ---------- */
.reiterzeile{display:flex;align-items:flex-end;gap:16px;flex-wrap:wrap;border-bottom:1px solid var(--linie);margin-bottom:16px}
.reiterzeile .reiter{border-bottom:0;margin:0;flex:1}
.reiterzeile .knopfreihe{padding-bottom:10px}

/* ---------- Arbeitsliste: Tabellenzeile (Person · Art · Zeitraum · Grund · Aktion) ---------- */
table.arbeitsliste td.name{font-weight:600;color:var(--schwarz)}
table.arbeitsliste td .unter,table.arbeitsliste td small{display:block;font-size:12px;line-height:16px;color:var(--text-2);margin-top:2px;font-weight:400}
table.arbeitsliste td.aktion{text-align:right;white-space:nowrap;width:1%}
table.arbeitsliste td.aktion>*{margin-top:0}
table.arbeitsliste td.knapp{white-space:nowrap}
table.arbeitsliste tr.gruppe td{background:#FBFBFA;font:600 12px/16px var(--font);color:var(--text-2);padding-top:8px;padding-bottom:8px}

/* ---------- Arbeitsliste: Listenzeile (Handy, Leute im Zeitraum) ---------- */
.liste{background:#fff;border:1px solid var(--linie);border-radius:var(--radius-karte);overflow:hidden}
.karte>.liste-innen{border:0}
.liste .zeile{display:flex;align-items:center;gap:12px;padding:12px 16px;border-bottom:1px solid var(--linie-2);min-height:56px;text-decoration:none;color:inherit}
.liste .zeile:last-child{border-bottom:0}
a.zeile:hover{background:#FBFBFA}
.liste .zeile .txt{flex:1;min-width:0}
.liste .zeile .txt b{display:block;font-weight:600;color:var(--schwarz)}
.liste .zeile .txt small{display:block;font-size:12px;line-height:16px;color:var(--text-2);margin-top:2px}
.liste .zeile .txt .oben{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:2px}
.liste .zeile .ende{display:flex;flex-direction:column;align-items:flex-end;gap:4px}
.liste .zeile .pfeil{width:18px;height:18px;color:var(--text-3)}
.gruppe-titel{font:600 12px/16px var(--font);color:var(--text-2);margin:24px 0 8px}
.gruppe-titel:first-child{margin-top:0}

/* ---------- Datei / Anhang ---------- */
.datei{display:flex;align-items:center;gap:12px;padding:12px 0;border-bottom:1px solid var(--linie-2)}
.datei:last-child{border-bottom:0}
.datei .sym{width:36px;height:44px;border-radius:var(--radius-mini);background:var(--linie-2);display:grid;place-items:center;flex:none;color:var(--text-2)}
.datei .sym .icn{width:18px;height:18px}
.datei .txt{flex:1;min-width:0}
.datei .txt b{display:block;font-weight:500;color:var(--schwarz);overflow-wrap:anywhere}
.datei .txt small{display:block;font-size:12px;line-height:16px;color:var(--text-2)}

/* ---------- Runder Symbolknopf (Schließen, Hilfe) ---------- */
.rund{display:inline-grid;place-items:center;width:32px;height:32px;min-height:32px;padding:0;margin:0;border:0;border-radius:50%;background:transparent;color:var(--text-2);cursor:pointer}
.rund:hover{background:var(--hg);color:var(--schwarz)}
.rund .icn{width:20px;height:20px}

/* ---------- Seitenpanel rechts (öffnen/schließen, Esc, Fokus: marke/bedienung.js) ---------- */
.panel-schleier{position:fixed;inset:0;background:rgb(17 17 17/.38);z-index:60}
.panel{position:fixed;top:0;right:0;bottom:0;width:min(460px,100vw);background:#fff;box-shadow:0 12px 32px rgb(17 17 17/.16),0 2px 6px rgb(17 17 17/.08);
  display:flex;flex-direction:column;z-index:61;margin:0}
.panel[hidden],.panel-schleier[hidden]{display:none}
.panel-kopf{display:flex;align-items:center;gap:12px;min-height:57px;padding:12px 16px 12px 24px;border-bottom:1px solid var(--linie)}
.panel-kopf h2{font:600 16px/24px var(--font);color:var(--schwarz);margin:0;border:0;padding:0}
.panel-kopf .rund{margin-left:auto}
.panel-inhalt{padding:24px;overflow:auto;flex:1}
.panel-inhalt>:first-child{margin-top:0}
.panel-fuss{display:flex;gap:12px;align-items:center;flex-wrap:wrap;padding:12px 24px;border-top:1px solid var(--linie)}
.panel-fuss .rechts{margin-left:auto;display:flex;gap:12px}
.panel-fuss button,.panel-fuss .btn{margin-top:0}
html.panel-offen{overflow:hidden}
@media(max-width:600px){.panel-kopf{padding-left:16px}.panel-inhalt{padding:16px}.panel-fuss{padding:12px 16px}}

/* ---------- Leerzustand (403/404, leere Listen) ---------- */
.leerzustand{max-width:520px;margin:48px auto;text-align:center}
.leerzustand>.icn{width:40px;height:40px;color:var(--text-3);margin-bottom:12px}
.leerzustand h2{font:600 16px/24px var(--font);margin:0 0 4px}
.leerzustand p{color:var(--text-2);margin:0 0 16px}
.leerzustand .knopfreihe{justify-content:center}

/* ---------- Fingerziele für Bausteine ---------- */
@media (max-width:760px),(pointer:coarse){
  .rund{width:44px;height:44px;min-height:44px}
  .liste .zeile{min-height:64px}
}

/* ---------- Bestandsseiten: verstreute Inline-Schriftgrößen auf die Rollen ziehen (Bausatz §10: eine Schicht am Ende).
   .88rem/.9rem/… → Grundtext 14/20, .8rem/11px → Hinweis 12/16. Vertragsdokument (.wv) bleibt in pt. ---------- */
main [style*="font-size:.88rem"]:not(.wv *),main [style*="font-size:.9rem"]:not(.wv *),main [style*="font-size:.85rem"]:not(.wv *),
main [style*="font-size:.92rem"]:not(.wv *),main [style*="font-size:.95rem"]:not(.wv *),main [style*="font-size:13px"]:not(.wv *),
main [style*="font-size:15px"]:not(.wv *){font-size:14px!important;line-height:20px}
main [style*="font-size:.8rem"]:not(.wv *),main [style*="font-size:11px"]:not(.wv *){font-size:12px!important;line-height:16px}