/* GFW Stuttgart · Web-Entwürfe · gemeinsame Bausteine.
   Jede Variante setzt nur die Farb- und Formvariablen und ihr eigenes Layout. */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--grund); color: var(--text); font: 400 14px/1.45 var(--schrift, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif); font-variant-numeric: tabular-nums; }
h1, h2, h3, h4 { margin: 0; line-height: 1.25; text-wrap: balance; }
p { margin: 0; }
a { color: var(--akzent); text-decoration: none; }
a:hover { text-decoration: underline; }
small { color: var(--text-2); font-size: 12px; }
button, select, input, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--akzent); outline-offset: 2px; border-radius: 3px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.ic { width: 16px; height: 16px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; vertical-align: -3px; }

/* Knöpfe */
.knopf { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; padding: 0 12px; border: 1px solid var(--linie-stark, var(--linie)); border-radius: var(--radius-klein); background: var(--flaeche); color: var(--text); cursor: pointer; white-space: nowrap; transition: background .15s, border-color .15s; }
.knopf:hover { background: var(--flaeche-2); text-decoration: none; }
.knopf--haupt { background: var(--akzent); border-color: var(--akzent); color: var(--akzent-text); font-weight: 600; }
.knopf--haupt:hover { background: var(--akzent-tief, var(--akzent)); }
.knopf--leise { border-color: transparent; background: transparent; color: var(--akzent); }
.knopf--leise:hover { background: var(--akzent-weich); }
.knopf:disabled { opacity: .45; cursor: not-allowed; }
.knopf--klein { min-height: 26px; padding: 0 8px; font-size: 12px; }
.knopf--klein .ic { width: 14px; height: 14px; }
.knopf--icon { width: 28px; min-height: 28px; padding: 0; justify-content: center; color: var(--text-2); }
.knopf--icon .ic { width: 15px; height: 15px; }
.knopf--ok:hover { background: var(--gruen-weich); border-color: var(--gruen); color: var(--gruen); }

/* Nachweis-Tabelle (P3b): Zeichen statt Textpillen */
/* Feste Spalten, damit die Tabellen der Arbeitsschritte bündig untereinander stehen. */
.tab--nachweise { table-layout: fixed; min-width: 760px; }
.tab--nachweise th:nth-child(2) { width: 112px; }
.tab--nachweise th:nth-child(3), .tab--nachweise th:nth-child(4) { width: 84px; }
.tab--nachweise th:nth-child(5) { width: 96px; }
.tab--nachweise th:nth-child(6) { width: 178px; }
/* Wenig Platz (schmale Akte): Spalten frei verteilen statt seitlich scrollen, damit „Prüfung“ sichtbar bleibt. */
.block--nachweise .tab-rahmen { container-type: inline-size; }
@container (max-width: 759px) {
  .block--nachweise .tab--nachweise { table-layout: auto; min-width: 0; }
  .block--nachweise .tab--nachweise th:nth-child(n) { width: auto; }
  .block--nachweise .tab--nachweise .nw-ic { display: none; }
  .block--nachweise .tab--nachweise th, .block--nachweise .tab--nachweise td { padding-left: 5px; padding-right: 5px; }
  .block--nachweise .tab--nachweise .pruef-zelle > .st { min-width: 0; }
  .block--nachweise .tab--nachweise td:nth-child(2) { white-space: normal; }
}
.tab--nachweise td { vertical-align: middle; }
.tab--nachweise td:nth-child(2) { white-space: nowrap; }
.tab--nachweise td small { display: block; margin-top: 1px; }
.nw-zelle { display: flex; align-items: center; gap: 10px; }
.nw-ic { display: grid; place-items: center; width: 30px; height: 30px; flex: none; border-radius: 8px; background: var(--flaeche-2); color: var(--text-2); }
.nw-ic--fehlt { background: var(--rot-weich); color: var(--rot); }
.st { display: inline-flex; align-items: center; gap: 4px; font-size: 12.5px; white-space: nowrap; color: var(--text-2); }
.st .ic { width: 15px; height: 15px; }
.st--ok { color: var(--gruen); }
.st--warten { color: var(--gelb); }
.st--info, .st--kalt { color: var(--info); }
.st--fehler { color: var(--rot); font-weight: 600; }
.st--kalt { font-weight: 600; }
.pruef-zelle { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.pruef-zelle > .st { min-width: 84px; }
.nacharbeit summary { list-style: none; }
.nacharbeit summary::-webkit-details-marker { display: none; }
.nacharbeit summary:hover, .nacharbeit[open] summary { background: var(--rot-weich); border-color: var(--rot); color: var(--rot); }
.nacharbeit[open] { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; }
.nacharbeit-feld { display: flex; gap: 4px; }
.nacharbeit-feld { flex-wrap: wrap; }
.nacharbeit-feld input { width: 150px; min-height: 28px; font-size: 13px; }
select, input, textarea { min-height: 32px; padding: 4px 8px; border: 1px solid var(--linie-stark, var(--linie)); border-radius: var(--radius-klein); background: var(--flaeche); }
textarea { width: 100%; resize: vertical; line-height: 1.5; padding: 8px 10px; }

/* Ampel */
.ampeln { display: inline-flex; flex-wrap: wrap; gap: 4px 10px; }
.ampel { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; font-size: 12.5px; }
.ampel i { width: 10px; height: 10px; border-radius: 50%; flex: none; box-shadow: inset 0 0 0 1px rgba(0,0,0,.18); }
.ampel--rot i { background: var(--rot); }
.ampel--gelb i { background: var(--gelb-punkt); }
.ampel--gruen i { background: var(--gruen); }
.ampel-art { font-weight: 600; }
.ampel-text { color: var(--text-2); }
.ampel--rot .ampel-text { color: var(--rot); }
.ampel--gelb .ampel-text { color: var(--gelb); }

/* Marken: Frist, Rechnung, Zahlung, Einsatz, Nachweise, Rückgabe */
.frist, .za, .re, .es, .nw, .rg { display: inline-flex; flex-direction: column; gap: 1px; line-height: 1.25; font-size: 12.5px; }
.frist b, .za b, .re b { font-weight: 600; }
.frist span, .za span, .re span { color: var(--text-2); font-size: 12px; }
.frist--ueberfaellig b { color: var(--rot); }
.frist--bald b { color: var(--gelb); }
.frist--fehlt b { color: var(--rot); }
.frist--fehlt b::before { content: "– "; }
.frist--erledigt b { color: var(--gruen); }
.frist--ok b { color: var(--text-2); font-weight: 500; }
.re--nicht { color: var(--text-2); }
.za--offen b { color: var(--text); }
.za--teilweise b { color: var(--gelb); }
.za--bezahlt b { color: var(--gruen); }
.za--pruefen b { color: var(--info); }
.za--keine b { color: var(--text-2); font-weight: 400; }
.es { color: var(--text-2); }
.es--offen { color: var(--rot); font-weight: 600; }
.es--frei { color: var(--info); font-weight: 600; }
.es--unbestaetigt { color: var(--gelb); font-weight: 600; }
.es--teil { color: var(--gelb); }
.es--fertig { color: var(--gruen); }
.nw--luecke { color: var(--rot); font-weight: 600; }
.nw--pruefen { color: var(--gelb); }
.nw--ok { color: var(--gruen); }
.rg--zurueckgelesen { color: var(--gruen); }
.rg--teilfehler { color: var(--rot); font-weight: 600; }
.rg--bereit, .rg--uebertragen { color: var(--info); }
.rg--entwurf, .rg--keine { color: var(--text-2); }
.up, .pr { display: inline-block; padding: 1px 7px; border-radius: 999px; font-size: 12px; white-space: nowrap; background: var(--flaeche-2); color: var(--text-2); }
.up--gesendet, .pr--geprueft { background: var(--gruen-weich); color: var(--gruen); }
.up--fehler, .pr--fehlt { background: var(--rot-weich); color: var(--rot); font-weight: 600; }
.up--wartend, .pr--offen { background: var(--gelb-weich); color: var(--gelb); }
.pr--nacharbeit { background: var(--rot-weich); color: var(--rot); }
.warn-text { color: var(--rot); }
.warn-text .ic { margin-right: 4px; }
.ok-text { color: var(--gruen); display: flex; gap: 6px; align-items: center; }
.kalt { color: var(--info); font-weight: 600; }
.kalt .ic { width: 13px; height: 13px; margin-right: 2px; }
.chip { display: inline-block; margin: 2px 4px 2px 0; padding: 1px 8px; border: 1px solid var(--linie); border-radius: 999px; font-size: 12px; background: var(--flaeche); }
.geaendert { color: var(--gelb); }
.leer { color: var(--text-2); padding: 8px 0; }
.hilfe { color: var(--text-2); font-size: 12.5px; }

/* eSASS-Abrufhinweis */
.abruf { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--text-2); }
.abruf--fehler { color: var(--rot); }

/* Blöcke im Auftrag */
.block { padding: var(--block-pad, 16px); background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--radius); }
.block + .block { margin-top: var(--block-abstand, 12px); }
.block h3 { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 8px; font-size: 15px; margin-bottom: 10px; }
.block h3 .ic { align-self: center; color: var(--text-2); }
.block h3 small { font-weight: 400; }
.block h4 { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; font-size: 13.5px; margin: 14px 0 6px; }
.block h4:first-of-type { margin-top: 0; }
.block--grok { background: var(--grok-grund, var(--flaeche)); }
.langtext { white-space: pre-wrap; font-size: 14px; line-height: 1.55; padding: 10px 12px; background: var(--flaeche-2); border-radius: var(--radius-klein); max-width: 75ch; }
.notizen { list-style: none; margin: 8px 0 0; padding: 0; font-size: 13px; }
.notizen li { padding: 3px 0; }
.notizen time { color: var(--text-2); margin-right: 8px; }
.kv { display: grid; grid-template-columns: minmax(120px, max-content) 1fr; gap: 5px 14px; margin: 10px 0 0; font-size: 13px; }
.kv dt { color: var(--text-2); }
.kv dd { margin: 0; }
.kv--summe { margin-top: 8px; padding-top: 8px; border-top: 1px dashed var(--linie); }
.widerspruch, .hindernisse { list-style: none; margin: 10px 0 0; padding: 0; font-size: 13px; }
.widerspruch li, .hindernisse li { display: flex; gap: 6px; padding: 4px 0; }
.widerspruch li .ic { color: var(--gelb); margin-top: 2px; }
.hindernisse li .ic { color: var(--rot); margin-top: 2px; }
.dateien { list-style: none; margin: 0; padding: 0; }
.dateien li { display: flex; flex-wrap: wrap; gap: 4px 10px; padding: 6px 0; border-top: 1px solid var(--linie); font-size: 13px; }
.dateien li:first-child { border-top: 0; }
.dateien a { display: inline-flex; gap: 6px; align-items: center; font-weight: 500; }
.dateien span { color: var(--text-2); }
.aktionen { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-top: 12px; }
.freigabe-text { padding: 10px 12px; background: var(--gruen-weich); border-radius: var(--radius-klein); }
.freigabe-text + .ok-text { margin-top: 8px; }

/* Tabellen */
.tab-rahmen { overflow-x: auto; }
.tab { width: 100%; border-collapse: collapse; font-size: 13px; }
.tab caption { text-align: left; font-weight: 600; padding: 12px 0 6px; font-size: 13px; }
.tab th { text-align: left; font-weight: 600; font-size: 12px; color: var(--text-2); padding: 6px 8px; border-bottom: 1px solid var(--linie-stark, var(--linie)); white-space: nowrap; }
.tab td { padding: 7px 8px; border-bottom: 1px solid var(--linie); vertical-align: top; }
.tab td a { display: inline-flex; gap: 5px; align-items: center; }
.tab .zahl { text-align: right; white-space: nowrap; }
/* Ruhiger als eine ganz gefärbte Zeile: ein Randstreifen links, die Zeichen tragen den Rest. */
.zeile--fehlt td:first-child { box-shadow: inset 3px 0 var(--rot); }
.zeile--fehler td:first-child { box-shadow: inset 3px 0 var(--gelb-punkt); }
abbr[title] { text-decoration: none; font-size: 10.5px; font-weight: 700; color: var(--text-2); border: 1px solid var(--linie-stark, var(--linie)); border-radius: 3px; padding: 0 3px; margin-left: 4px; }

/* Zeitstrahl */
.einsatz-verlauf + .einsatz-verlauf { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--linie); }
.zeitstrahl { list-style: none; margin: 6px 0 0; padding: 0 0 0 14px; border-left: 2px solid var(--linie); font-size: 13px; }
.zeitstrahl li { display: grid; grid-template-columns: 92px 1fr auto; gap: 10px; padding: 3px 0; position: relative; }
.zeitstrahl li::before { content: ""; position: absolute; left: -19px; top: 9px; width: 8px; height: 8px; border-radius: 50%; background: var(--flaeche); border: 2px solid var(--text-2); }
.zeitstrahl time { color: var(--text-2); }
.quelle { font-size: 11px; font-weight: 600; letter-spacing: .02em; padding: 0 6px; border-radius: 3px; background: var(--flaeche-2); color: var(--text-2); align-self: start; }
.quelle--paj { background: var(--info-weich); color: var(--info); }

/* Rückgabe-Stufen */
.stufen { display: flex; list-style: none; margin: 0 0 10px; padding: 0; counter-reset: s; }
.stufen li { flex: 1; position: relative; padding: 22px 4px 0; font-size: 12.5px; text-align: center; color: var(--text-2); }
.stufen li::before { content: ""; position: absolute; top: 6px; left: 50%; width: 12px; height: 12px; margin-left: -6px; border-radius: 50%; border: 2px solid var(--linie-stark, var(--linie)); background: var(--flaeche); z-index: 1; }
.stufen li::after { content: ""; position: absolute; top: 11px; left: -50%; width: 100%; height: 2px; background: var(--linie); }
.stufen li:first-child::after { display: none; }
.stufen li.erreicht { color: var(--text); }
.stufen li.erreicht::before { background: var(--gruen); border-color: var(--gruen); }
.stufen li.erreicht::after { background: var(--gruen); }
.stufen li.jetzt { font-weight: 700; }
.stufen li.fehler { color: var(--rot); font-weight: 700; }
.stufen li.fehler::before { background: var(--rot); border-color: var(--rot); }
.versuche { margin: 8px 0 0; padding-left: 18px; font-size: 12.5px; color: var(--text-2); }

/* Abrechnung */
.abr-kopf { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 10px; padding: 10px 12px; background: var(--flaeche-2); border-radius: var(--radius-klein); }
.abr-kopf > div { display: flex; flex-direction: column; gap: 2px; }
.re-form { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-top: 12px; padding: 12px; border: 1px dashed var(--linie-stark, var(--linie)); border-radius: var(--radius-klein); }
.re-form p { flex-basis: 100%; }
.re-form label { display: inline-flex; gap: 6px; align-items: center; font-size: 13px; }
.re-form input { width: 140px; }

/* Unterkunft */
.uk { display: inline-flex; align-items: center; gap: 5px; padding: 3px 8px; border: 1px solid var(--linie); border-radius: var(--radius-klein); background: var(--flaeche); font-size: 12.5px; cursor: pointer; white-space: nowrap; }
.uk--vorschlaege { color: var(--akzent); border-color: currentColor; font-weight: 600; }
.uk--gebucht { color: var(--gruen); }
.uk--keiner { color: var(--text-2); border-style: dashed; }
.uk-liste { list-style: none; margin: 10px 0 0; padding: 0; }
.uk-liste > li { padding: 12px 0; border-top: 1px solid var(--linie); }
.uk-liste .knopf { margin-top: 8px; }

/* Handlungsbedarf */
.hb { list-style: none; margin: 0; padding: 0; }
.hb-eintrag { display: grid; grid-template-columns: minmax(150px, 220px) 1fr auto; gap: 4px 12px; padding: 8px 10px; border-bottom: 1px solid var(--linie); font-size: 13px; align-items: start; }
.hb-art { display: flex; gap: 6px; font-weight: 600; }
.hb--hoch .hb-art { color: var(--rot); }
.hb--mittel .hb-art { color: var(--gelb); }
.hb--info .hb-art { color: var(--text-2); }
.hb-meta { display: flex; gap: 10px; color: var(--text-2); font-size: 12px; white-space: nowrap; }
.hb-meta a { font-weight: 600; }

/* Zuteilen */
.zuteilen { display: inline-flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 8px; }

/* Karte */
.karte { margin: 0; }
.karte > svg { width: 100%; height: auto; display: block; border-radius: var(--radius-klein); border: 1px solid var(--linie); }
.karte-grund { fill: var(--karte-grund, var(--flaeche-2)); }
.karte-raster { stroke: var(--linie); stroke-width: 1; }
.karte-haus { fill: var(--text); }
.karte-eigen circle { fill: var(--akzent); stroke: var(--flaeche); stroke-width: 2; }
.karte-eigen text { fill: var(--akzent-text); font: 700 10px var(--schrift, system-ui); text-anchor: middle; }
.karte-esass { fill: var(--flaeche); stroke: var(--gelb); stroke-width: 2.5; }
.karte-mass { stroke: var(--text-2); stroke-width: 2; }
.karte-masstext { fill: var(--text-2); font: 10px var(--schrift, system-ui); }
.karte figcaption { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-top: 6px; font-size: 12px; color: var(--text-2); }
.karte figcaption span { display: inline-flex; align-items: center; gap: 5px; }
.lg { display: inline-block; width: 10px; height: 10px; }
.lg--haus { background: var(--text); border-radius: 2px; }
.lg--eigen { background: var(--akzent); border-radius: 50%; }
.lg--esass { border: 2px solid var(--gelb); transform: rotate(45deg); }
.karte-hinweis { font-style: italic; }

/* Detailfall-Leiste */
.demo { position: fixed; right: 16px; bottom: 16px; z-index: 50; width: min(390px, calc(100vw - 32px)); max-height: calc(100vh - 32px); overflow: auto; background: var(--demo-grund, var(--flaeche)); color: var(--demo-text, var(--text)); border: 1px solid var(--linie-stark, var(--linie)); border-radius: var(--radius); box-shadow: 0 10px 30px -8px rgba(15, 23, 42, .35), 0 2px 6px rgba(15, 23, 42, .12); font-size: 13px; }
.demo-kopf { display: grid; grid-template-columns: auto 1fr; gap: 2px 8px; width: 100%; padding: 10px 12px; border: 0; background: transparent; text-align: left; cursor: pointer; }
.demo-kopf .ic { grid-row: span 2; margin-top: 2px; color: var(--akzent); }
.demo-zahl { grid-column: 2; color: var(--text-2); font-size: 12px; }
.demo--zu .demo-kopf { padding-bottom: 10px; }
.demo-liste { list-style: none; margin: 0; padding: 0 8px; border-top: 1px solid var(--linie); }
.demo-liste li { display: grid; grid-template-columns: 44px 1fr auto; gap: 8px; align-items: center; padding: 6px 4px; border-bottom: 1px solid var(--linie); color: var(--text-2); }
.demo-liste li.fertig { color: var(--text); }
.demo-liste li.jetzt { color: var(--text); background: var(--akzent-weich); border-radius: var(--radius-klein); }
.demo-marke { font-size: 11px; font-weight: 700; text-align: center; padding: 2px 0; border-radius: 3px; border: 1px solid var(--linie-stark, var(--linie)); }
.demo--sim .demo-marke { border-style: dashed; }
.fertig .demo-marke { border-color: var(--gruen); color: var(--gruen); }
.demo-text small { display: block; color: var(--akzent); font-size: 12px; margin-top: 2px; }
.demo-liste .knopf { min-height: 28px; padding: 0 10px; font-size: 12.5px; }
.demo-fuss { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 8px 12px; color: var(--text-2); font-size: 12px; }

/* Rückmeldung */
.toast { position: fixed; left: 50%; bottom: 20px; z-index: 60; max-width: min(560px, calc(100vw - 32px)); padding: 10px 16px; border-radius: var(--radius-klein); background: var(--text); color: var(--grund); font-size: 13px; box-shadow: 0 8px 24px -6px rgba(0,0,0,.35); transform: translate(-50%, 140%); opacity: 0; transition: transform .22s cubic-bezier(.2,.8,.2,1), opacity .22s; pointer-events: none; }
.toast--an { transform: translate(-50%, 0); opacity: 1; }

/* Seitenleiste für Unterkunft und ähnliche Paneele */
.seitenpanel { position: fixed; top: 0; right: 0; bottom: 0; z-index: 40; width: min(420px, 100vw); padding: 20px; overflow: auto; background: var(--flaeche); border-left: 1px solid var(--linie-stark, var(--linie)); box-shadow: -12px 0 32px -12px rgba(15,23,42,.25); }
.seitenpanel .schliessen { position: absolute; top: 12px; right: 12px; }
.seitenpanel h3 { display: flex; gap: 8px; align-items: center; font-size: 16px; margin: 0 40px 12px 0; }

@media (max-width: 760px) {
  .hb-eintrag { grid-template-columns: 1fr; }
  .kv { grid-template-columns: 1fr; gap: 0 0; }
  .kv dt { margin-top: 6px; }
  .zeitstrahl li { grid-template-columns: 1fr auto; }
  .zeitstrahl time { grid-column: 1 / -1; }
  .demo { right: 8px; left: 8px; bottom: 8px; width: auto; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }

.frist--storniert b { color: var(--rot); text-decoration: line-through; }

/* Konflikt zwischen Handy und Büro (P3c) */
.konflikt { margin-bottom: 14px; padding: 12px 14px; border: 1px solid #f2b8b2; border-radius: var(--radius); background: var(--rot-weich); }
.konflikt-kopf { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; color: var(--rot); }
.konflikt-kopf small { flex-basis: 100%; }
.konflikt-tab { margin-top: 10px; background: var(--flaeche); }
.konflikt-tab thead th .ic { margin-right: 4px; }
.konflikt-tab tbody th { width: 130px; border-bottom: 1px solid var(--linie); color: var(--text-2); }
.zusammen summary { list-style: none; }
.zusammen summary::-webkit-details-marker { display: none; }
.zusammen[open] { flex-basis: 100%; }
.zusammen-form { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); align-items: end; gap: 8px; margin-top: 8px; }
.zusammen-form label { display: grid; gap: 4px; font-size: 12.5px; color: var(--text-2); }
.zusammen-form input, .zusammen-form select { color: var(--text); }

/* Grubenfoto: Begründung direkt am Foto (Büro) */
.gruben { display: grid; gap: 4px; margin-top: 8px; max-width: 34rem; }
.gruben-text { white-space: pre-line; margin: 0; }
.gruben .knopf { justify-self: start; }