/* Muss VOR allem stehen, was 'display' setzt: eine Klassenregel wie
   '.ueberlagerung{display:flex}' schlaegt sonst das hidden-Attribut, und das
   Element bleibt sichtbar. Genau das ist passiert - der Unterschriftsdialog
   stand auf der Uebersicht offen, und 'abbrechen' (das nur el.hidden setzt)
   konnte ihn nicht schliessen. Die ganze Oberflaeche schaltet ueber 'hidden'. */
[hidden]{display:none !important}

/* ==========================================================================
   ToDOguide - Guventa-Gestaltung
   Palette und Typografie nach dem Guventa-Design-System:
   Navy #0A0E27, Orange #ED7E1A, Helvetica, keine zweite Akzentfarbe.
   Rot und Gruen erscheinen ausschliesslich als Zustandsmarken (Rueckfrage,
   erledigt) - sie sind Information, keine Gestaltung.
   ========================================================================== */

:root{
  --navy:#0A0E27;
  --navy-2:#141936;
  --orange:#ED7E1A;
  --orange-hell:#FFEDD5;
  --text:#1e293b;
  --muted:#64748b;
  --linie:#e2e8f0;
  --offweiss:#fafbfc;
  --weiss:#ffffff;
  --dunkel-muted:#cbd5e1;
  --rot:#C1443A;
  --gruen:#2E7D5B;
  --schrift:"Helvetica Neue",Helvetica,Arial,sans-serif;
  --rand:22px;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{font-family:var(--schrift);font-size:14px;line-height:1.5;color:var(--text);
     background:var(--offweiss);-webkit-font-smoothing:antialiased}

/* --- Kopfzeile: Navy mit Orange-Akzentbalken, wie die Inhaltsseiten im PDF --- */
header{display:flex;align-items:center;gap:20px;background:var(--navy);color:var(--weiss);
       padding:11px var(--rand);border-bottom:4px solid var(--orange);flex-wrap:wrap}
.logo{color:var(--orange);font-size:20px;font-weight:700;letter-spacing:.8px;line-height:1}
.sub{font-size:11px;color:var(--dunkel-muted);margin-top:3px}
/* Umbrechen statt scrollen. Vorher lief die Leiste waagerecht ueber, und der
   Scrollbalken war ausgeblendet - es gab also keinen Hinweis darauf, dass es
   weitergeht. Gemessen: unterhalb von 1920px war 'Betrieb' auf KEINER Breite
   erreichbar, auf einem Telefon fehlten 8 von 11 Reitern. Ein Reiter, den man
   nicht findet, ist ein Reiter, den es nicht gibt.
   Umbrechen kostet eine Zeile Hoehe und macht jeden Reiter auf jeder Breite
   erreichbar - ohne zusaetzliches JavaScript. */
nav{display:flex;flex-wrap:wrap;gap:2px;margin-left:8px;min-width:0;
    align-content:flex-start;row-gap:4px}
.tab{background:transparent;border:0;color:var(--dunkel-muted);font:inherit;font-size:13px;
     padding:8px 13px;border-radius:4px;cursor:pointer;white-space:nowrap}
.tab:hover{background:var(--navy-2);color:var(--weiss)}
.tab.aktiv{background:var(--orange);color:var(--weiss);font-weight:700}
.badge{display:none;background:var(--weiss);color:var(--navy);border-radius:9px;padding:0 6px;
       font-size:11px;font-weight:700;margin-left:5px}
.badge.an{display:inline-block}
.timerbox{margin-left:auto;text-align:right}
.timer-titel{font-size:11px;color:var(--dunkel-muted);max-width:280px;overflow:hidden;
             text-overflow:ellipsis;white-space:nowrap}
.timer-uhr{font-size:21px;font-weight:700;color:var(--orange);font-variant-numeric:tabular-nums;
           line-height:1.2}
.konto{display:flex;align-items:center;gap:9px;margin-left:16px}
.konto .mini{color:var(--dunkel-muted)}

main{height:calc(100vh - 66px);overflow:hidden}
.ansicht{display:none;height:100%}
.ansicht.aktiv{display:flex}
.breit{padding:24px var(--rand) 40px;overflow:auto;width:100%}

/* --- Schrift --- */
h2{margin:0;font-size:21px;font-weight:700;color:var(--navy);letter-spacing:-.2px}
h3.abschnitt{margin:30px 0 12px;font-size:11px;font-weight:700;letter-spacing:1px;
             text-transform:uppercase;color:var(--muted)}
.hinweis{color:var(--muted);font-size:12px;margin:4px 0 0}
.mini{font-size:11px;color:var(--muted)}
.gruen{color:var(--gruen)}
.seitenkopf{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;
            flex-wrap:wrap;margin-bottom:20px}

/* --- Kacheln (Kennzahlen) --- */
.kacheln{display:grid;grid-template-columns:repeat(auto-fit,minmax(148px,1fr));gap:12px}
.kachel{background:var(--weiss);border:1px solid var(--linie);border-radius:6px;padding:14px 16px}
.kachel .zahl{font-size:28px;font-weight:700;color:var(--navy);line-height:1.1;
              font-variant-numeric:tabular-nums}
.kachel .beschriftung{font-size:11px;text-transform:uppercase;letter-spacing:.6px;
                      color:var(--muted);margin-top:5px}
.kachel.betont{background:var(--navy);border-color:var(--navy)}
.kachel.betont .zahl{color:var(--orange)}
.kachel.betont .beschriftung{color:var(--dunkel-muted)}
.kachel.leer .zahl{color:var(--muted)}

/* --- Karten (Abteilungen) - Muster der Stufen-Karte --- */
.karten{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:12px}
.abteilung{display:flex;align-items:center;gap:14px;background:var(--weiss);
           border:1px solid var(--linie);border-left:3px solid var(--orange);border-radius:6px;
           padding:14px 16px;cursor:pointer;text-align:left;width:100%;font:inherit}
.abteilung:hover{background:var(--offweiss)}
.abteilung.aktiv{border-color:var(--navy);border-left-color:var(--orange);
                 box-shadow:0 0 0 1px var(--navy)}
.abteilung .zahl{font-size:26px;font-weight:700;color:var(--orange);min-width:44px;
                 font-variant-numeric:tabular-nums}
.abteilung .name{font-weight:700;font-size:14px;color:var(--navy)}
.abteilung .meta{font-size:11px;color:var(--muted);margin-top:2px}
/* "ohne Abteilung" ist kein Filter, sondern das Gegenteil davon - die Karte
   sieht deshalb nicht aus wie ein Knopf und reagiert auf nichts. */
.abteilung.ruhend{cursor:default;border-left-color:var(--linie);opacity:.75}
.abteilung.ruhend:hover{background:var(--weiss)}
.abteilung.ruhend .zahl{color:var(--muted)}

/* Erster Tag: statt einer Wand aus Nullen drei benannte Schritte. */
.erststart{text-align:left;padding:20px 22px;background:var(--weiss);
           border:1px solid var(--linie);border-left:3px solid var(--orange);border-radius:6px;
           grid-column:1/-1}
.erststart b{display:block;color:var(--navy);font-size:14px;margin-bottom:12px}
.erststart .knopfreihe{margin-bottom:8px}

/* --- Tabellen: Navy-Kopf, wechselnde Zeilen --- */
.tabellenrahmen{overflow-x:auto;border:1px solid var(--linie);border-radius:6px;
                background:var(--weiss)}
table{width:100%;border-collapse:collapse;font-size:13px}
thead th{background:var(--navy);color:var(--weiss);text-align:left;padding:9px 12px;
         font-size:10px;text-transform:uppercase;letter-spacing:.7px;font-weight:700;
         white-space:nowrap}
tbody td{padding:10px 12px;border-bottom:1px solid var(--linie);vertical-align:middle}
tbody tr:nth-child(even){background:var(--offweiss)}
tbody tr.klickbar{cursor:pointer}
tbody tr.klickbar:hover{background:var(--orange-hell)}
td.r,th.r{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
tr.summe td{font-weight:700;background:var(--orange-hell);border-top:2px solid var(--orange)}
.vorgang{font-weight:700;color:var(--navy)}
.vorgang .kennung{font-weight:400;color:var(--muted);font-size:11px;margin-left:6px}

/* --- Zustandsmarken --- */
.marke{display:inline-block;padding:2px 8px;border-radius:3px;font-size:11px;font-weight:700;
       white-space:nowrap;border:1px solid transparent}
.marke.st-offen{color:var(--muted);border-color:var(--linie);background:var(--weiss)}
.marke.st-angefangen{color:var(--orange);border-color:var(--orange);background:var(--orange-hell)}
.marke.st-bearbeitet{color:var(--weiss);background:var(--navy)}
.marke.st-rueckfrage{color:var(--weiss);background:var(--rot)}
.marke.st-erledigt{color:var(--gruen);border-color:var(--gruen);background:var(--weiss)}
.marke.st-uebersprungen{color:var(--muted);border-color:var(--linie);background:var(--offweiss)}
.punkt{font-weight:700}
.st-offen{color:var(--muted)}
.st-angefangen{color:var(--orange)}
.st-bearbeitet{color:var(--navy)}
.st-rueckfrage{color:var(--rot)}
.st-erledigt{color:var(--gruen)}
.st-uebersprungen{color:#94a3b8}
.fehlt{color:var(--rot);font-weight:700}

/* --- Arbeitsansicht: drei Spalten --- */
.spalte{display:flex;flex-direction:column;min-width:0;border-right:1px solid var(--linie);
        background:var(--weiss)}
.spalte-links{width:330px;flex:none}
.spalte-mitte{flex:1}
.spalte-rechts{width:350px;flex:none;border-right:0;overflow:auto;padding:16px}
.spaltenkopf{display:flex;gap:8px;align-items:center;padding:10px 14px;
             border-bottom:1px solid var(--linie);background:var(--offweiss)}
.schalter{font-size:12px;color:var(--muted);display:flex;align-items:center;gap:5px;
          white-space:nowrap}
select,input[type=date],input[type=time],input[type=text],input[type=password],textarea{
  font:inherit;font-size:13px;color:var(--text);background:var(--weiss);
  border:1px solid var(--linie);border-radius:4px;padding:7px 9px}
select:focus,input:focus,textarea:focus{outline:0;border-color:var(--orange);
  box-shadow:0 0 0 3px var(--orange-hell)}
.liste{overflow:auto;flex:1}
.karte{padding:11px 14px;border-bottom:1px solid var(--linie);cursor:pointer;
       border-left:3px solid transparent}
.karte:hover{background:var(--offweiss)}
.karte.aktiv{background:var(--orange-hell);border-left-color:var(--orange)}
.karte .titel{font-weight:700;font-size:13px;margin-bottom:3px;color:var(--navy)}
.karte .zeile{display:flex;gap:9px;font-size:11px;color:var(--muted);flex-wrap:wrap}
.balken{height:3px;background:var(--linie);border-radius:2px;margin-top:7px;overflow:hidden}
.balken i{display:block;height:100%;background:var(--gruen)}

.baumkopf{padding:14px 18px;border-bottom:1px solid var(--linie)}
.baumkopf h3{margin:0;font-size:17px;color:var(--navy);font-weight:700}
.baumkopf .meta{font-size:12px;color:var(--muted);margin-top:4px}
.baumkopf .meta b{color:var(--orange)}
.baum{overflow:auto;flex:1;min-height:120px}
.knoten{display:flex;align-items:center;gap:9px;padding:7px 18px;cursor:pointer;font-size:13px;
        border-left:3px solid transparent}
.knoten:hover{background:var(--offweiss)}
.knoten.aktiv{background:var(--orange-hell);border-left-color:var(--orange)}
.knoten .kt{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.knoten .zeit{font-size:11px;color:var(--muted);font-variant-numeric:tabular-nums}
.knoten.gruppe .kt{font-weight:700}
.detail{border-top:1px solid var(--linie);padding:14px 18px;overflow:auto;height:44%;
        background:var(--offweiss)}
.detail h4,.wz h4{margin:16px 0 6px;font-size:10px;letter-spacing:1px;text-transform:uppercase;
                  color:var(--muted);font-weight:700}
.detail h4:first-child,.wz h4:first-child{margin-top:0}
.block{background:var(--weiss);border:1px solid var(--linie);border-radius:4px;padding:10px 12px;
       margin-bottom:8px;font-size:13px;white-space:pre-wrap}
.quelle{border-left:3px solid var(--orange)}
.quelle .qk{font-weight:700;font-size:12px;color:var(--navy)}
.quelle .auszug{margin-top:6px;padding-left:10px;border-left:2px solid var(--linie);
                color:#334155;font-style:italic}
.bem{border-left:3px solid var(--linie)}
.bem .wer{font-size:11px;color:var(--muted);margin-bottom:4px}

/* --- Schaltflaechen --- */
.knopf{display:inline-block;border:0;border-radius:4px;font:inherit;font-size:12px;
       font-weight:700;padding:8px 12px;cursor:pointer;text-decoration:none;text-align:center}
.knopf.orange{background:var(--orange);color:var(--weiss)}
.knopf.navy{background:var(--navy);color:var(--weiss)}
.knopf.rot{background:var(--rot);color:var(--weiss)}
.knopf.hell{background:var(--linie);color:var(--text)}
.knopf:hover{filter:brightness(1.07)}
.knopfreihe{display:flex;flex-wrap:wrap;gap:5px;margin-bottom:12px}
.knopfreihe .knopf{flex:1 1 auto}
.uhrbox{background:var(--navy);border-radius:6px;padding:11px 14px;display:flex;
        align-items:center;gap:12px}
.uhrbox .uhr{font-size:24px;font-weight:700;color:var(--orange);
             font-variant-numeric:tabular-nums;flex:1}
.kennzahl{display:flex;justify-content:space-between;font-size:12px;padding:4px 0;
          border-bottom:1px dotted var(--linie)}
.kennzahl b{font-variant-numeric:tabular-nums}
.kennzahlen{margin-top:12px}
textarea{width:100%;min-height:74px;resize:vertical}
#import-text{min-height:320px;font-family:ui-monospace,Menlo,Consolas,monospace;font-size:12px}
.breitfeld{flex:1;min-width:170px}
.zeitliste{max-height:150px;overflow:auto}
.formzeile{display:flex;gap:9px;align-items:center;flex-wrap:wrap;margin:10px 0}
.formzeile label{font-size:12px;color:var(--muted);display:flex;gap:6px;align-items:center}
.zeile-prio{display:flex;align-items:center;gap:10px;background:var(--weiss);
            border:1px solid var(--linie);border-left:3px solid var(--orange);border-radius:6px;
            padding:12px 14px;margin-bottom:8px;flex-wrap:wrap}
.zeile-prio .name{flex:1;min-width:220px;font-weight:700;font-size:13px;color:var(--navy)}
.toast{position:fixed;bottom:20px;left:50%;transform:translateX(-50%);background:var(--navy);
       color:var(--weiss);padding:10px 18px;border-radius:6px;font-size:13px;opacity:0;
       pointer-events:none;transition:opacity .2s;z-index:60}
.toast.an{opacity:1}
.leer{padding:28px;color:var(--muted);font-size:13px;text-align:center}

/* --- Rueckfrage aus der Vorrecherche --- */
.banner-rueckfrage{background:#fff1f0;border:1px solid var(--rot);border-left:5px solid var(--rot);
  border-radius:4px;padding:12px 14px;margin-bottom:10px;color:#7f1d1d;font-size:13px}
.banner-rueckfrage .frage{margin:7px 0;white-space:pre-wrap;color:var(--text)}
.banner-rueckfrage a{color:var(--rot);font-weight:700}

/* --- Anmeldeseite --- */
.anmeldeseite{display:flex;align-items:center;justify-content:center;min-height:100vh;
              background:var(--navy);font-family:var(--schrift)}
.anmeldung{background:var(--weiss);border-radius:8px;padding:30px 32px;width:360px;max-width:92vw;
           display:flex;flex-direction:column;gap:11px;border-top:4px solid var(--orange)}
.anmeldung .logo{font-size:22px}
.anmeldung .sub{color:var(--muted);font-size:12px;margin:0 0 10px}
.anmeldung label{font-size:11px;text-transform:uppercase;letter-spacing:.6px;color:var(--muted);
                 display:flex;flex-direction:column;gap:5px;font-weight:700}
.anmeldung input{font-size:15px;padding:10px;font-weight:400}
.anmeldung .mini{text-transform:none;letter-spacing:0;font-weight:400}
.anmeldung .knopf{padding:12px;font-size:14px;margin-top:8px}
.fehler{color:var(--rot);font-size:12px;min-height:17px}
.hinweis.klein{font-size:12px}

/* --- Kundensicht: ruhiger --- */
.kundensicht .spalte-links{width:300px}
.kundensicht .knoten .mini{display:none}

/* --- Einzug im Baum und Fortschrittsbreiten (CSP erlaubt keine Inline-Stile) --- */
.ez{display:inline-block;flex:none}

.ez0{width:8px}
.ez1{width:26px}
.ez2{width:44px}
.ez3{width:62px}
.ez4{width:80px}
.ez5{width:98px}
.ez6{width:116px}
.balken i.w0{width:0%}
.balken i.w5{width:5%}
.balken i.w10{width:10%}
.balken i.w15{width:15%}
.balken i.w20{width:20%}
.balken i.w25{width:25%}
.balken i.w30{width:30%}
.balken i.w35{width:35%}
.balken i.w40{width:40%}
.balken i.w45{width:45%}
.balken i.w50{width:50%}
.balken i.w55{width:55%}
.balken i.w60{width:60%}
.balken i.w65{width:65%}
.balken i.w70{width:70%}
.balken i.w75{width:75%}
.balken i.w80{width:80%}
.balken i.w85{width:85%}
.balken i.w90{width:90%}
.balken i.w95{width:95%}
.balken i.w100{width:100%}
.knopf.bg-offen{background:#64748b;color:#1e293b}
.knopf.bg-angefangen{background:#ED7E1A;color:#fff}
.knopf.bg-bearbeitet{background:#0A0E27;color:#fff}
.knopf.bg-rueckfrage{background:#C1443A;color:#fff}
.knopf.bg-erledigt{background:#2E7D5B;color:#fff}
.knopf.bg-uebersprungen{background:#94a3b8;color:#1e293b}

/* ==========================================================================
   Mobilansicht - Auftraege unterwegs abarbeiten.
   Eine Spalte, ein Schritt nach dem anderen, Bedienung im Daumenbereich.
   ========================================================================== */
.mobilkopf{display:none}
.aktionsleiste{display:none}

@media (max-width:820px){
  html,body{overscroll-behavior-y:none}
  body{font-size:15px}
  header{flex-wrap:wrap;gap:6px;padding:8px 12px;
         padding-top:calc(8px + env(safe-area-inset-top));border-bottom-width:3px}
  .marke{flex:1;min-width:0}
  .logo{font-size:17px}
  .sub{display:none}
  .konto{margin-left:0}
  .konto #wer{max-width:38vw;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  /* Auf schmalen Schirmen dasselbe: umbrechen, nicht wegschieben. Die Reiter
     bekommen gleiche Breite, damit die Zeilen nicht ausfransen. */
  nav{order:3;width:100%;margin-left:0;flex-wrap:wrap;row-gap:4px}
  nav .tab{flex:1 1 auto;min-width:calc(33.333% - 4px);text-align:center}
  nav::-webkit-scrollbar{display:none}
  .tab{padding:10px 14px;font-size:14px}
  .timerbox{text-align:right}
  .timer-uhr{font-size:18px}
  .timer-titel{max-width:36vw}

  main{height:auto;overflow:visible}
  .ansicht.aktiv{flex-direction:column;height:auto}
  .breit{padding:16px 14px 90px}
  .seitenkopf{gap:10px}
  .kacheln{grid-template-columns:repeat(2,1fr);gap:9px}
  .kachel{padding:12px}
  .kachel .zahl{font-size:24px}
  .karten{grid-template-columns:1fr}
  thead th{font-size:9px;padding:8px}
  tbody td{padding:11px 8px}

  .spalte{width:100%!important;border-right:0;border-bottom:0}
  .spalte-links,.spalte-mitte,.spalte-rechts{display:none}
  body.stufe-liste .spalte-links{display:flex}
  body.stufe-vorgang .spalte-mitte{display:flex}
  body.stufe-schritt .spalte-rechts{display:block}

  .mobilkopf{display:flex;align-items:center;gap:9px;position:sticky;top:0;z-index:20;
             background:var(--weiss);border-bottom:1px solid var(--linie);padding:7px 10px}
  body.stufe-liste .mobilkopf .zurueck{visibility:hidden}
  .mobilkopf .zurueck{border:0;background:var(--linie);color:var(--navy);font-size:22px;
                      line-height:1;width:40px;height:40px;border-radius:6px;cursor:pointer}
  .mobil-titel{flex:1;font-weight:700;font-size:15px;overflow:hidden;text-overflow:ellipsis;
               white-space:nowrap;color:var(--navy)}
  .mobil-uhr{font-variant-numeric:tabular-nums;font-weight:700;color:var(--orange);font-size:15px}

  /* Fingerfreundliche Ziele: mindestens 44 Punkt hoch */
  .karte{padding:14px}
  .karte .titel{font-size:15px}
  .knoten{padding:13px 12px;font-size:15px}
  .knoten .kt{white-space:normal}
  .knopf{padding:12px 14px;font-size:14px}
  .knopfreihe .knopf{flex:1 1 45%;min-height:46px}
  select,input[type=text],input[type=date],input[type=time],input[type=password],textarea{font-size:16px;padding:11px}
  /* 16px verhindert das Hineinzoomen von iOS beim Antippen */

  .liste,.baum{max-height:none;overflow:visible}
  .detail{height:auto;max-height:none}
  .spalte-rechts{padding:14px 12px 96px}
  .spalte-mitte{padding-bottom:96px}

  .aktionsleiste{display:flex;gap:8px;position:fixed;left:0;right:0;bottom:0;z-index:30;
                 background:var(--weiss);border-top:1px solid var(--linie);padding:8px 10px;
                 padding-bottom:calc(8px + env(safe-area-inset-bottom));
                 box-shadow:0 -2px 12px rgba(10,14,39,.08)}
  body.stufe-liste .aktionsleiste,body.stufe-vorgang .aktionsleiste{display:none}
  body.kundensicht .aktionsleiste{display:none}
  body:not(.stufe-schritt) .aktionsleiste,
  body:not([data-ansicht="aufgaben"]) .aktionsleiste{display:none}
  .knopf.gross{flex:1;min-height:50px;font-size:15px}
  .toast{bottom:calc(78px + env(safe-area-inset-bottom))}
}

/* --- Abteilungsverwaltung --- */
.verwaltung{background:var(--weiss);border:1px solid var(--linie);border-radius:6px;
            padding:14px 16px;margin-top:12px}
.verwaltung .formzeile{margin-top:0}
h3.abschnitt .knopf{margin-left:10px;text-transform:none;letter-spacing:0}
tr.ruhend td{color:var(--muted)}
tr.ruhend b{font-weight:400}

/* --- Dokumente --- */
.dokument{background:var(--weiss);border:1px solid var(--linie);border-left:3px solid var(--orange);
          border-radius:6px;padding:14px 16px;margin-bottom:10px}
.dokument .kopf{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.dokument .name{font-weight:700;font-size:15px;color:var(--navy)}
.dokument .art{font-size:11px;text-transform:uppercase;letter-spacing:.6px;color:var(--muted)}
.dokument .fassung{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:8px 0;
                   border-top:1px dotted var(--linie);font-size:13px;margin-top:8px}
.dokument .fassung .nr{font-weight:700;color:var(--orange);min-width:34px}
.dokument .pruefwert{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:11px;
                     color:var(--muted)}
.unterschrift{background:var(--orange-hell);border-radius:4px;padding:6px 10px;font-size:12px;
              margin-top:6px}
.unterschrift b{color:var(--navy)}
.dok-vorschau{background:var(--offweiss);border:1px solid var(--linie);border-radius:4px;
              padding:12px;margin-top:8px;white-space:pre-wrap;font-size:13px;max-height:320px;
              overflow:auto}

.ueberlagerung{position:fixed;inset:0;background:rgba(10,14,39,.55);display:flex;
               align-items:center;justify-content:center;z-index:80;padding:16px}
.unterschriftskasten{background:var(--weiss);border-radius:8px;border-top:4px solid var(--orange);
                     padding:22px 24px;max-width:660px;width:100%;max-height:92vh;overflow:auto;
                     position:relative}
/* Der Ausweg muss sichtbar sein, bevor man ihn sucht: der einzige Knopf lag
   bisher unter der Zeichenflaeche, und wer ihn nicht fand, sass fest. */
.dialog-zu{position:absolute;top:8px;right:10px;border:0;background:none;cursor:pointer;
           font-size:22px;line-height:1;color:var(--muted);padding:4px 8px}
.dialog-zu:hover{color:var(--navy)}
.unterschriftskasten h3{margin:0 0 6px;color:var(--navy);font-size:18px}
.feldzeile{display:flex;flex-direction:column;gap:5px;font-size:12px;color:var(--muted);
           margin:12px 0;font-weight:700}
.feldzeile input{font-weight:400;font-size:15px;padding:10px}
/* Branchenprofil und Notiz stehen in derselben Reihe wie die Stammdatenfelder.
   Ohne diese Zeile erbt nur <input> die Groesse: das Profil waere ein winziges
   Auswahlfeld, und die Notiz ein Schlitz, in dem man den eigenen Satz nicht
   mehr liest - dann bleibt beides ungenutzt und die Fristen weiter auf der
   Kommandozeile. */
.feldzeile select,.feldzeile textarea{font-weight:400;font-size:15px;padding:10px}
.feldzeile.weit{flex:1 1 100%}
.feldzeile.weit textarea{min-height:60px}
/* Ein Feld fuer ein Token, das trotzdem KEIN Passwortfeld ist: type="password"
   laedt den Browser dazu ein, den Wert zu speichern und mit dem angemeldeten
   Profil in die Cloud des Herstellers zu synchronisieren - der Hinweis im
   Zugangsdialog verspricht genau das Gegenteil. Verdeckt wird deshalb hier,
   in der Darstellung. Kann ein Browser text-security nicht, steht der Token
   lesbar auf dem Schirm; das ist der Blick des Nachbarn, nicht der Zugriff
   eines fremden Rechners - die kleinere der beiden Gefahren. */
.geheimfeld{-webkit-text-security:disc;text-security:disc;
            font-family:ui-monospace,Menlo,Consolas,monospace;letter-spacing:.08em}
.zeichenflaeche{width:100%;height:180px;border:1px dashed var(--linie);border-radius:4px;
                background:var(--weiss);touch-action:none;cursor:crosshair}
@media (max-width:820px){
  .unterschriftskasten{padding:16px}
  .dokument .fassung{align-items:flex-start;flex-direction:column;gap:6px}
}

/* --- Dokumentenverzeichnis --- */
h4.stapel{margin:18px 0 8px;font-size:13px;color:var(--navy);font-weight:700}
.registerzeile{display:flex;align-items:center;gap:10px;flex-wrap:wrap;background:var(--weiss);
               border:1px solid var(--linie);border-radius:4px;padding:9px 12px;margin-bottom:6px}
.registerzeile .name{font-weight:700;font-size:13px;color:var(--navy);min-width:230px;flex:1}
.registerzeile .mini{flex:2;min-width:180px}

/* ==========================================================================
   Auftragsaufnahme, Planung, Durchlauf, Bestand, Melden
   ========================================================================== */

/* --- Der Auftrag am Vorgang: Ziel, Ergebnisform, das Urteil darueber --- */
.auftrag{white-space:normal}
.auftrag .feld{display:flex;gap:10px;padding:5px 0;border-bottom:1px dotted var(--linie)}
.auftrag .feld:last-child{border-bottom:0}
.auftrag .feldname{flex:none;width:104px;font-size:11px;text-transform:uppercase;
                   letter-spacing:.6px;color:var(--muted);font-weight:700;padding-top:2px}
.auftrag .feldwert{flex:1;min-width:0;white-space:pre-wrap}
.auftrag .abnahme{color:var(--muted);font-size:12px;margin-top:8px}
.urteil{border-radius:4px;padding:10px 12px;margin-bottom:8px;font-size:13px}
.urteil.gesperrt{background:#fff1f0;border:1px solid var(--rot);border-left:5px solid var(--rot)}
.urteil.maengel{background:var(--orange-hell);border:1px solid var(--orange);
                border-left:5px solid var(--orange)}
.urteil b{color:var(--navy)}
.urteil .befund{margin-top:6px}
.urteil .rat{color:var(--muted);font-size:12px}

/* --- Warteschlangen (Aufnahme, Planung): eine Zeile je Vorgang --- */
.warteschlange{background:var(--weiss);border:1px solid var(--linie);
               border-left:3px solid var(--orange);border-radius:6px;padding:12px 14px;
               margin-bottom:8px}
.warteschlange.blockiert{border-left-color:var(--rot)}
.warteschlange .kopf{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.warteschlange .name{font-weight:700;font-size:14px;color:var(--navy)}
.warteschlange .text{white-space:pre-wrap;margin-top:7px;font-size:13px}
.warteschlange .knopfreihe{margin:10px 0 0}
.warteschlange .knopfreihe .knopf{flex:0 0 auto}
h2.abschnitt-h2{margin-top:34px}

/* --- Durchgehen: eine Karte, grosse Flaechen, Daumen unten --- */
.einspaltig{max-width:720px;margin:0 auto}
.dkarte{background:var(--weiss);border:1px solid var(--linie);border-top:4px solid var(--orange);
        border-radius:8px;padding:18px 20px}
.dkarte .kunde{font-size:11px;text-transform:uppercase;letter-spacing:.7px;color:var(--muted)}
.dkarte .titel{font-size:22px;font-weight:700;color:var(--navy);line-height:1.25;margin:4px 0 8px}
.dkarte .meta{display:flex;gap:9px;flex-wrap:wrap;font-size:12px;color:var(--muted);
              align-items:center}
.dkarte .beschreibung{margin-top:12px;white-space:pre-wrap;font-size:13px;color:#334155;
                      max-height:190px;overflow:auto}
.dkarte h4{margin:18px 0 7px;font-size:10px;letter-spacing:1px;text-transform:uppercase;
           color:var(--muted);font-weight:700}
.dwahl{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.dwahl .knopf{min-height:62px;font-size:14px;display:flex;flex-direction:column;
              align-items:center;justify-content:center;gap:3px;line-height:1.2}
.dwahl .taste{font-size:11px;font-weight:400;opacity:.75}
.dfuss{display:flex;gap:8px;margin-top:16px;flex-wrap:wrap}
.dfuss .knopf{flex:1 1 auto;min-height:44px}
.dfortschritt{display:flex;align-items:center;gap:10px;margin-bottom:12px}
.dfortschritt .zahl{font-size:26px;font-weight:700;color:var(--orange);
                    font-variant-numeric:tabular-nums}
.dfertig{background:var(--navy);color:var(--weiss);border-radius:8px;padding:24px;
         text-align:center}
.dfertig .zahl{font-size:34px;font-weight:700;color:var(--orange)}
.dfertig .knopf{margin-top:14px}

/* --- Bestand --- */
.facetten{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:12px}
.facette{background:var(--weiss);border:1px solid var(--linie);border-radius:14px;
         padding:5px 12px;font:inherit;font-size:12px;color:var(--text);cursor:pointer}
.facette:hover{border-color:var(--orange)}
.facette.aktiv{background:var(--navy);border-color:var(--navy);color:var(--weiss)}
.facette .n{color:var(--muted);margin-left:5px;font-variant-numeric:tabular-nums}
.facette.aktiv .n{color:var(--dunkel-muted)}
.beintrag{background:var(--weiss);border:1px solid var(--linie);border-left:3px solid var(--orange);
          border-radius:6px;padding:12px 14px;margin-bottom:8px}
.beintrag .kopf{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;cursor:pointer}
.beintrag .name{font-weight:700;font-size:14px;color:var(--navy);flex:1;min-width:180px}
.beintrag .stand{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:12px;
                 color:var(--orange);font-weight:700}
.beintrag .tiefe{border-top:1px dotted var(--linie);margin-top:10px;padding-top:10px}
.beintrag.ruhend{border-left-color:var(--linie);opacity:.7}

/* --- Dateien: Ansage anhoeren, Bild ansehen, Merkmale lesen --- */
.medien{margin:8px 0 2px;width:100%}
.medien audio{width:100%;max-width:420px}
.medien img{max-width:100%;max-height:360px;border:1px solid var(--linie);border-radius:4px}
.merkmale{font-size:11px;color:var(--muted)}

/* --- Melden --- */
.meldearten{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:6px;
            margin:12px 0}
.meldeart{display:flex;gap:8px;align-items:flex-start;background:var(--offweiss);
          border:1px solid var(--linie);border-radius:4px;padding:9px 11px;font-size:12px}
.meldeart b{color:var(--navy)}
.meldeart .beispiel{color:var(--muted);display:block;margin-top:2px}
.badge.sperre{background:var(--rot);color:var(--weiss)}

@media (max-width:820px){
  .auftrag .feld{flex-direction:column;gap:2px}
  .auftrag .feldname{width:auto}
  .dkarte{padding:16px 14px;border-radius:8px}
  .dkarte .titel{font-size:20px}
  .dwahl{grid-template-columns:1fr}
  .dwahl .knopf{min-height:56px;flex-direction:row;gap:8px}
  .warteschlange .knopfreihe .knopf{flex:1 1 45%}
  .einspaltig{max-width:none}
}