/* Action Items – Oberfläche
   Farben und Abstände wie im abgestimmten Entwurf. Bewusst ohne externe
   Schriften, damit die Anwendung ohne Zugriff auf fremde Server auskommt. */

:root{
  --grund:#F2F3F1; --flaeche:#FFFFFF; --flaeche2:#F8F9F7; --tief:#E9EBE7;
  --text:#151A1B; --text2:#3E4749; --text3:#6B7679; --linie:#D6DAD5; --linie2:#E4E7E2;
  --akzent:#115E63; --akzent-hell:#DCEBEA; --akzent-dunkel:#0C4A4E; --auf-akzent:#FFFFFF;
  --ocker:#8A5A15; --ocker-hell:#F4E7D2;
  --rot:#A03A2C; --rot-hell:#F6DFDA;
  --gruen:#2C6449; --gruen-hell:#DDEBE2;
  --schatten:0 1px 2px rgba(21,26,27,.06),0 12px 32px -12px rgba(21,26,27,.18);
  --schrift:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --schrift-titel:"Archivo","Segoe UI",system-ui,-apple-system,Roboto,Arial,sans-serif;
  --schrift-zahl:ui-monospace,SFMono-Regular,"SF Mono","Cascadia Mono",Consolas,"Liberation Mono",monospace;
}
@media (prefers-color-scheme: dark){
  :root{
    --grund:#101415; --flaeche:#171D1E; --flaeche2:#1C2324; --tief:#0B0F10;
    --text:#E9EDEC; --text2:#B4BDBC; --text3:#7E8A89; --linie:#2A3234; --linie2:#232A2B;
    --akzent:#4FB3B4; --akzent-hell:#123033; --akzent-dunkel:#8AD3D2; --auf-akzent:#08191A;
    --ocker:#D3A05A; --ocker-hell:#302516;
    --rot:#E0806F; --rot-hell:#331B17;
    --gruen:#71B892; --gruen-hell:#13291F;
    --schatten:0 1px 2px rgba(0,0,0,.4),0 14px 34px -14px rgba(0,0,0,.7);
  }
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;background:var(--grund);color:var(--text);font-family:var(--schrift);
  font-size:15px;line-height:1.5;-webkit-font-smoothing:antialiased;
  display:flex;flex-direction:column;
}
button,input,select,textarea{font:inherit;color:inherit}
a{color:var(--akzent-dunkel)}
:focus-visible{outline:2px solid var(--akzent);outline-offset:1px;border-radius:2px}
h1,h2,h3{font-family:var(--schrift-titel);margin:0;letter-spacing:-.01em;text-wrap:balance}
h1{font-size:1.6rem;font-weight:700}
h2{font-size:1.15rem;font-weight:600}
h3{font-size:1rem;font-weight:600}
code{font-family:var(--schrift-zahl);font-size:.88em;background:var(--tief);padding:1px 5px;border-radius:3px}
.zahl,.frist,.nr,time{font-family:var(--schrift-zahl);font-variant-numeric:tabular-nums}
.fueller{flex:1}
.leisetext{font-size:.79rem;color:var(--text3)}
.lauftext{color:var(--text2);max-width:70ch;margin:0 0 14px}
.augenbraue{font-family:var(--schrift-zahl);font-size:.68rem;letter-spacing:.13em;
  text-transform:uppercase;color:var(--text3);margin:0}
.fehlertext{background:var(--rot-hell);color:var(--rot);padding:9px 13px;border-radius:3px;
  margin:0 0 14px;font-size:.88rem}
.rechts{text-align:right}
.still{opacity:.5}

/* ---------- Kopf- und Fußleiste ---------- */
.appbar{display:flex;align-items:center;gap:14px;padding:9px 18px;background:var(--flaeche);
  border-bottom:1px solid var(--linie);flex-wrap:wrap}
.marke{display:flex;align-items:center;gap:9px;font-family:var(--schrift-titel);font-weight:700;
  font-size:.95rem;text-decoration:none;color:var(--text);white-space:nowrap}
.marke i{width:7px;height:18px;background:var(--akzent);display:block;border-radius:1px}
.hauptnav{display:flex;gap:2px;flex-wrap:wrap}
.hauptnav a{font-size:.85rem;color:var(--text3);padding:5px 11px;border-radius:3px;text-decoration:none}
.hauptnav a:hover{color:var(--text)}
.hauptnav a.on{color:var(--akzent-dunkel);background:var(--akzent-hell);font-weight:500}
a.wer,.wer{display:flex;align-items:center;gap:8px;font-size:.82rem;color:var(--text2);text-decoration:none}
a.wer:hover .wer-text{color:var(--text)}
.wer-text{display:flex;flex-direction:column;line-height:1.2}
.wer-text small{color:var(--text3);font-size:.7rem}
.av{width:26px;height:26px;border-radius:50%;background:var(--akzent-hell);color:var(--akzent-dunkel);
  display:grid;place-items:center;font-size:.68rem;font-weight:600;font-family:var(--schrift-zahl);flex:none}
.appfuss{display:flex;gap:14px;padding:10px 18px;border-top:1px solid var(--linie);
  background:var(--flaeche);color:var(--text3);font-size:.75rem;flex-wrap:wrap}
.inhalt{flex:1;min-height:0;display:flex;flex-direction:column}
/* Nur die Listenansicht (body.voll) füllt den Bildschirm und scrollt innen.
   Alle anderen Seiten scrollen ganz normal als Seite. */
body.voll .inhalt{overflow:hidden}
body:not(.voll){height:auto;min-height:100%}
body:not(.voll) .mitte,
body:not(.voll) .mitte-schmal{overflow:visible}

.hinweis{padding:9px 18px;font-size:.85rem;border-bottom:1px solid var(--linie)}
.hinweis.ok{background:var(--akzent-hell);color:var(--akzent-dunkel)}
.hinweis.warnung{background:var(--ocker-hell);color:var(--ocker)}

/* ---------- Knöpfe und Felder ---------- */
.btn{display:inline-block;background:var(--akzent);color:var(--auf-akzent);border:0;border-radius:3px;
  padding:7px 14px;font-size:.83rem;font-weight:500;cursor:pointer;text-decoration:none;white-space:nowrap}
.btn:hover{filter:brightness(1.08)}
.btn.geist{background:none;color:var(--text2);border:1px solid var(--linie)}
.btn.geist:hover{background:var(--tief);filter:none}
.btn.gefahr{background:none;color:var(--rot);border:1px solid var(--linie)}
.btn.klein{padding:4px 9px;font-size:.76rem}
.btn:disabled{opacity:.45;cursor:not-allowed}
.eingabe{width:100%;border:1px solid var(--linie);border-radius:3px;padding:6px 9px;
  font-size:.85rem;background:var(--flaeche)}
.eingabe:focus{border-color:var(--akzent)}
textarea.eingabe{resize:vertical;line-height:1.45}
.eingabe.schmal{width:auto;min-width:130px;padding:4px 7px;font-size:.8rem}
.feld{display:flex;flex-direction:column;gap:4px}
.feld label{font-family:var(--schrift-zahl);font-size:.67rem;letter-spacing:.08em;
  text-transform:uppercase;color:var(--text3)}
.feld2{display:grid;grid-template-columns:1fr 1fr;gap:13px}
.formfuss{display:flex;gap:8px;align-items:center;padding-top:4px}
.inlineform{display:inline-flex;gap:5px;align-items:center;margin:0}

/* ---------- Flächen ---------- */
.mitte{max-width:1000px;width:100%;margin:0 auto;padding:26px 20px 60px;display:flex;
  flex-direction:column;gap:22px;overflow-y:auto}
.mitte-schmal{max-width:560px;width:100%;margin:0 auto;padding:36px 20px 60px;display:flex;
  flex-direction:column;gap:18px;overflow-y:auto}
.karte{background:var(--flaeche);border:1px solid var(--linie);border-radius:4px;padding:18px 20px}
.formular{display:flex;flex-direction:column;gap:13px}
.block{display:flex;flex-direction:column;gap:12px}

/* ---------- Tabellen ---------- */
.tabellenrahmen{overflow-x:auto}
.tabelle{width:100%;border-collapse:collapse;font-size:.86rem;background:var(--flaeche);
  border:1px solid var(--linie);border-radius:4px}
.tabelle th{text-align:left;font-family:var(--schrift-zahl);font-weight:500;font-size:.66rem;
  letter-spacing:.11em;text-transform:uppercase;color:var(--text3);
  padding:9px 12px;border-bottom:1px solid var(--linie);white-space:nowrap}
.tabelle td{padding:9px 12px;border-bottom:1px solid var(--linie2);vertical-align:middle;color:var(--text2)}
.tabelle tbody tr:last-child td{border-bottom:0}
.tabelle td.zahl,.tabelle th.zahl{font-family:var(--schrift-zahl);font-variant-numeric:tabular-nums}
.tabelle.klein{font-size:.79rem}
.tabelle.klein td,.tabelle.klein th{padding:6px 9px}
.leer{padding:34px 18px;text-align:center;color:var(--text3);font-size:.86rem}

/* ---------- Steuerleiste und Kennzahlen ---------- */
.steuerleiste{display:flex;align-items:center;gap:12px;padding:10px 18px;background:var(--flaeche);
  border-bottom:1px solid var(--linie);flex-wrap:wrap}
.projektwahl{display:flex;gap:6px;align-items:center;margin:0}
.auswahl{border:1px solid var(--linie);border-radius:3px;padding:5px 9px;font-size:.85rem;
  background:var(--flaeche2);max-width:280px}
.sichten{display:flex;gap:2px}
.sichten a{font-size:.83rem;color:var(--text3);padding:5px 11px;border-radius:3px;text-decoration:none}
.sichten a.on{color:var(--akzent-dunkel);background:var(--akzent-hell);font-weight:500}

.kennzahlen{display:grid;grid-template-columns:repeat(5,1fr);gap:1px;background:var(--linie);
  border-bottom:1px solid var(--linie)}
.kachel{background:var(--flaeche);padding:11px 18px;display:flex;flex-direction:column;gap:1px;
  text-decoration:none;color:inherit}
.kachel:hover{background:var(--flaeche2)}
.kachel.an{background:var(--akzent-hell)}
.kachel b{font-family:var(--schrift-titel);font-size:1.4rem;font-weight:600;line-height:1.15;
  font-variant-numeric:tabular-nums}
.kachel span{font-size:.71rem;color:var(--text3)}
.kachel.alarm b{color:var(--rot)}
.kachel.wartet b{color:var(--ocker)}

.filterleiste{display:flex;align-items:center;gap:7px;padding:9px 18px;background:var(--flaeche2);
  border-bottom:1px solid var(--linie);font-size:.79rem;flex-wrap:wrap;margin:0}
.chip{border:1px solid var(--linie);border-radius:99px;padding:3px 11px;color:var(--text2);
  background:var(--flaeche);text-decoration:none;white-space:nowrap}
.chip:hover{border-color:var(--text3)}
.chip.on{background:var(--akzent-hell);border-color:transparent;color:var(--akzent-dunkel);font-weight:500}
.filter{border:1px solid var(--linie);border-radius:99px;padding:3px 8px;font-size:.79rem;
  background:var(--flaeche);color:var(--text2)}
.suche{border:1px solid var(--linie);border-radius:3px;padding:4px 10px;background:var(--flaeche);
  min-width:200px;font-size:.79rem}

/* ---------- Liste ---------- */
.spalten{display:flex;flex:1;min-height:0}
.liste{flex:1;overflow-y:auto;min-height:0;background:var(--flaeche)}
/* Solange die Tafel offen ist, tritt die Liste zurück */
.spalten.abgeblendet{filter:blur(3px) saturate(.7);pointer-events:none;user-select:none}
@media (prefers-reduced-motion: reduce){.spalten.abgeblendet{filter:saturate(.7)}}

.zeilehuelle{position:relative}
.abhaken{position:absolute;left:12px;top:9px;z-index:2;margin:0}
.abhaken button{width:22px;height:22px;border:1px solid var(--linie);border-radius:4px;
  background:var(--flaeche);color:transparent;font-size:.8rem;line-height:1;cursor:pointer;
  display:grid;place-items:center;padding:0}
.abhaken button:hover{border-color:var(--akzent);color:var(--text3)}
.abhaken button.an{background:var(--akzent);border-color:var(--akzent);color:var(--auf-akzent)}
.abhaken button.an:hover{color:var(--auf-akzent);filter:brightness(1.1)}

.zeile{display:grid;grid-template-columns:56px minmax(0,1fr) 108px 124px 88px 132px;gap:12px;
  padding:10px 18px 10px 43px;border-bottom:1px solid var(--linie2);font-size:.82rem;
  align-items:start;border-left:3px solid transparent;text-decoration:none;color:inherit}
.zeile:hover{background:var(--flaeche2)}
.zeile.kopf{position:sticky;top:0;z-index:3;padding-top:8px;padding-bottom:8px;padding-left:43px;
  font-family:var(--schrift-zahl);font-size:.64rem;letter-spacing:.11em;text-transform:uppercase;
  color:var(--text3);background:var(--flaeche2);border-bottom:1px solid var(--linie)}
.zeile.kopf:hover{background:var(--flaeche2)}
.zeile.kopf a{color:inherit;text-decoration:none}
.zeile.kopf a:hover{color:var(--text)}
.zeile.gewaehlt,.zeile.gewaehlt:hover{background:var(--akzent-hell)}
.zeile.p-hoch{border-left-color:var(--rot)}
.zeile.p-mittel{border-left-color:var(--ocker)}
.zeile .nr{color:var(--text3);font-size:.74rem;padding-top:1px}
.zeile .merker{color:var(--ocker);font-size:.68rem}
.zeile .titel{min-width:0}
.zeile .titel .t{color:var(--text);font-weight:500;line-height:1.34;overflow-wrap:anywhere}
.zeile .unter{display:block;color:var(--text3);font-size:.72rem;margin-top:2px;line-height:1.35;
  overflow-wrap:anywhere}
.zeile .zelle{color:var(--text2);font-size:.78rem;overflow-wrap:anywhere}
.zeile.fertig .t{text-decoration:line-through;text-decoration-color:var(--linie);color:var(--text3)}
.frist{font-size:.75rem;color:var(--text2)}
.frist.ueber{color:var(--rot);font-weight:600}
.frist.bald{color:var(--ocker);font-weight:600}
.liegt{color:var(--rot);font-size:.68rem;font-family:var(--schrift-zahl);white-space:nowrap;
  display:inline-block;margin-top:3px}
.ueberschritten{color:var(--rot);font-weight:600;font-size:.74rem;font-family:var(--schrift-zahl)}

.mrk{display:inline-flex;align-items:center;gap:5px;border-radius:99px;padding:2px 9px;
  font-size:.7rem;font-weight:500;white-space:nowrap}
.mrk::before{content:"";width:5px;height:5px;border-radius:50%;background:currentColor;flex:none}
.mrk.offen{background:var(--tief);color:var(--text2)}
.mrk.in_arbeit{background:var(--akzent-hell);color:var(--akzent-dunkel)}
.mrk.wartet{background:var(--ocker-hell);color:var(--ocker)}
.mrk.erledigt{background:var(--gruen-hell);color:var(--gruen)}

/* ---------- Tafel: der Vorgang über der Liste ---------- */
.ueberlagerung{position:fixed;inset:0;z-index:60;display:flex;align-items:center;justify-content:center;
  padding:26px}
.hintergrund{position:absolute;inset:0;background:rgba(16,20,21,.45);
  -webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}
.tafel{position:relative;display:flex;flex-direction:column;width:min(1060px,100%);
  max-height:min(900px,calc(100vh - 52px));background:var(--flaeche);border:1px solid var(--linie);
  border-radius:6px;box-shadow:var(--schatten);overflow:hidden}

.tafelkopf{position:relative;padding:16px 22px 14px;border-bottom:1px solid var(--linie);
  display:flex;flex-direction:column;gap:10px;background:var(--flaeche2)}
.tafelkopf .reihe{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.merkerfahne{font-size:.7rem;font-weight:500;color:var(--ocker);background:var(--ocker-hell);
  border-radius:99px;padding:2px 9px}
.schliessen{color:var(--text3);text-decoration:none;font-size:1.2rem;line-height:1;padding:2px 6px;
  border-radius:3px}
.schliessen:hover{color:var(--text);background:var(--tief)}
/* Das Titelfeld wächst mit dem Titel, wo der Browser das kann (field-sizing).
   Sonst bekommt es auf schmalen Bildschirmen von vornherein zwei Zeilen Platz –
   dort brechen lange Titel sonst um und werden abgeschnitten. */
.titelfeld{width:100%;font-family:var(--schrift-titel);font-size:1.35rem;font-weight:700;
  line-height:1.25;letter-spacing:-.015em;border:1px solid transparent;background:none;
  border-radius:3px;padding:5px 8px;margin:-5px -8px;resize:vertical;color:var(--text);
  field-sizing:content;min-height:calc(1.25em + 12px);overflow:hidden}
.titelfeld:hover{border-color:var(--linie);background:var(--flaeche)}
.titelfeld:focus{border-color:var(--akzent);background:var(--flaeche)}
.titelfeld.statisch{margin:0;padding:0;border:0}

/* Schnellzeile: was man beim Draufschauen braucht */
.tafelform{margin:0;border-bottom:1px solid var(--linie);background:var(--flaeche)}
.schnellzeile{display:flex;flex-wrap:wrap;gap:14px 18px;padding:14px 22px;align-items:flex-start}
.schnellfeld{display:flex;flex-direction:column;gap:5px;min-width:132px}
.schnellfeld.breit{flex:1 1 260px;min-width:240px}
.schnellfeld.mittel{flex:1 1 180px;min-width:170px}
.schnellfeld.knopf{justify-content:flex-end;min-width:0;padding-top:19px}
.schnellfeld > label{font-family:var(--schrift-zahl);font-size:.65rem;letter-spacing:.09em;
  text-transform:uppercase;color:var(--text3)}
.schnellfeld .eingabe{min-width:126px}

.weitere{border-top:1px solid var(--linie2)}
.weitere summary{cursor:pointer;padding:9px 22px;font-size:.79rem;color:var(--text3);
  list-style:none;display:flex;align-items:center;gap:7px}
.weitere summary::-webkit-details-marker{display:none}
.weitere summary::before{content:"▸";font-size:.75rem;color:var(--text3)}
.weitere[open] summary::before{content:"▾"}
.weitere summary:hover{color:var(--text2);background:var(--flaeche2)}
.weitere .felder{padding:4px 22px 16px}

.felder{display:grid;grid-template-columns:104px minmax(0,1fr);gap:10px 12px;font-size:.85rem;
  align-items:start;margin:0}
.felder dt{color:var(--text3);font-family:var(--schrift-zahl);font-size:.67rem;letter-spacing:.06em;
  text-transform:uppercase;padding-top:8px}
.felder dd{margin:0;color:var(--text2);min-width:0}
.felder dd .eingabe{max-width:440px}
.fest{display:inline-block;padding-top:6px;font-size:.85rem}
.fest.klein{font-size:.78rem}
.personen{display:flex;flex-wrap:wrap;gap:5px}
.pmarke{border:1px solid var(--linie);background:var(--flaeche);border-radius:99px;padding:3px 10px;
  font-size:.78rem;cursor:pointer;color:var(--text3);display:inline-flex;align-items:center;gap:6px}
.pmarke input{margin:0;width:13px;height:13px}
.pmarke.an{background:var(--akzent-hell);border-color:transparent;color:var(--akzent-dunkel);font-weight:500}

/* Verlauf über die volle Breite */
.verlaufbereich{flex:1;min-height:0;overflow-y:auto;padding:16px 22px 20px;background:var(--flaeche2);
  display:flex;flex-direction:column;gap:14px}
.verlaufkopf{font-family:var(--schrift-zahl);font-size:.66rem;letter-spacing:.12em;
  text-transform:uppercase;color:var(--text3)}
.verlaufliste{display:flex;flex-direction:column}
.ereignis{display:grid;grid-template-columns:12px minmax(0,1fr);gap:11px;padding-bottom:14px;position:relative}
.ereignis:not(:last-child)::after{content:"";position:absolute;left:5px;top:12px;bottom:0;width:1px;background:var(--linie)}
.ereignis i{width:7px;height:7px;border-radius:50%;background:var(--linie);margin:5px 0 0 2px;display:block;z-index:1}
.ereignis.neu i{background:var(--akzent)}
.ereignis time{font-size:.72rem;color:var(--text3)}
.ereignis .von{font-size:.7rem;color:var(--text3)}
.ereignis p{font-size:.85rem;color:var(--text2);line-height:1.55;margin:3px 0 0;overflow-wrap:anywhere;
  max-width:88ch}
/* Was das Programm selbst festgehalten hat, tritt zurück */
.ereignis.system i{background:none;border:1px solid var(--text3)}
.ereignis.system p{font-size:.79rem;color:var(--text3);border-left:2px solid var(--linie);
  padding-left:9px;margin-left:-1px}
.entfernen{background:none;border:0;color:var(--text3);cursor:pointer;font-size:.7rem;padding:0;
  margin-top:3px;text-decoration:underline}
.entfernen:hover{color:var(--rot)}
.neuereintrag{display:flex;flex-direction:column;gap:8px;padding:12px;border:1px solid var(--linie);
  border-radius:4px;background:var(--flaeche)}
.neuereintrag textarea{border:1px solid var(--linie);border-radius:3px;padding:8px 10px;font-size:.85rem;
  background:var(--flaeche);resize:vertical}
.neuereintrag .reihe{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
/* Der Hinweis neben den Knöpfen verschwindet, sobald es eng wird – die Knöpfe
   selbst haben Vorrang. */
.neuereintrag .reihe .leisetext{font-size:.72rem}
@media (max-width:1080px){ .neuereintrag .reihe .fueller,
                           .neuereintrag .reihe .leisetext{display:none} }

.tafelfuss{display:flex;align-items:center;gap:10px;padding:12px 22px;border-top:1px solid var(--linie);
  background:var(--flaeche);flex-wrap:wrap}

/* ---------- Neuer Vorgang ---------- */
.formular.breit{max-width:720px}
body.voll .mitte{flex:1;min-height:0}

/* ---------- Stammdaten und Import ---------- */
.marken{display:flex;flex-wrap:wrap;gap:6px}
.marke{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--linie);
  background:var(--flaeche2);border-radius:99px;padding:3px 9px;font-size:.79rem}
.marke em{font-style:normal;color:var(--text3);font-size:.7rem;font-family:var(--schrift-zahl)}
.marke.klein{font-size:.7rem;padding:1px 8px}
.marke button{background:none;border:0;color:var(--text3);cursor:pointer;font-size:.85rem;padding:0 2px}
.marke button:hover{color:var(--rot)}
.zufuegen{display:flex;gap:7px;flex-wrap:wrap;align-items:center;margin:0}
.zufuegen .eingabe{width:auto;min-width:190px}
.blatt{border:1px solid var(--linie);border-radius:4px;padding:13px 15px;display:flex;
  flex-direction:column;gap:9px;background:var(--flaeche2)}
.blattkopf{display:flex;align-items:center;gap:10px;flex-wrap:wrap}

/* ---------- Schmale Bildschirme ---------- */
@media (max-width:1080px){
  .zeile{grid-template-columns:52px minmax(0,1fr) 96px 100px 78px 116px;gap:9px}
  .ueberlagerung{padding:14px}
  .tafel{max-height:calc(100vh - 28px)}
}
@media (max-width:860px){
  .kennzahlen{grid-template-columns:repeat(3,1fr)}
  .ueberlagerung{padding:0}
  .tafel{width:100%;max-height:100vh;border:0;border-radius:0}
  .tafelkopf{padding-right:52px}
  .tafelkopf .reihe .fueller{display:none}
  .schliessen{position:absolute;top:12px;right:14px}
  .schnellzeile{padding:12px 16px;gap:12px}
  .schnellfeld,.schnellfeld.breit,.schnellfeld.mittel{flex:1 1 100%;min-width:0}
  .schnellfeld.knopf{padding-top:2px}
  .weitere summary,.weitere .felder{padding-left:16px;padding-right:16px}
  .felder{grid-template-columns:92px minmax(0,1fr)}
  .verlaufbereich{padding:14px 16px 18px}
  .zeile{grid-template-columns:50px minmax(0,1fr) 112px;gap:8px}
  .zeile .s-bereich,.zeile .s-faellig{display:none}
  .feld2{grid-template-columns:1fr}
  .suche{min-width:0;flex:1}
  /* Auf schmalen Geräten scrollt die Seite als Ganzes, nicht die Liste für sich –
     sonst legt sich die Fußzeile über die letzten Zeilen. */
  html,body{height:auto}
  body{min-height:100%}
  body.voll .inhalt{overflow:visible}
  .spalten{display:block;min-height:0}
  .liste{overflow:visible}
}
@media print{
  .appbar,.appfuss,.filterleiste,.steuerleiste,.neuereintrag,.tafelfuss,.schliessen{display:none}
  .spalten.abgeblendet{filter:none}
  .hintergrund{display:none}
  .ueberlagerung{position:static;padding:0}
  .tafel{width:100%;max-height:none;border:0;box-shadow:none}
  .verlaufbereich{overflow:visible}
  .weitere .felder{display:grid}
  body{background:#fff}
}

.pwahl summary{list-style:none;cursor:pointer;color:var(--text3)}
.pwahl summary::-webkit-details-marker{display:none}
.pwahl summary:hover{border-color:var(--text3);color:var(--text2)}
.pwahl[open] summary{background:var(--tief)}
.pwahl-liste{margin-top:6px;padding:8px;border:1px solid var(--linie);border-radius:3px;
  background:var(--flaeche);max-height:200px;overflow-y:auto}

/* ---------- Bilder ---------- */
/* Zurückhaltend in der Liste, groß erst auf Klick – im Sinne der Besprechung
   am geteilten Bildschirm. */
.bildreihe{display:flex;flex-wrap:wrap;gap:7px;margin-top:8px}
.bildmarke{display:block;width:96px;height:72px;border:1px solid var(--linie);border-radius:3px;
  overflow:hidden;background:var(--tief);flex:none}
.bildmarke img{width:100%;height:100%;object-fit:cover;display:block}
.bildmarke:hover{border-color:var(--akzent)}
.bildzahl{color:var(--text3);font-size:.66rem;font-family:var(--schrift-zahl)}

.bildwahl{display:inline-flex;align-items:center;gap:9px;border:1px solid var(--linie);
  border-radius:3px;padding:4px 10px;font-size:.79rem;color:var(--text3);cursor:pointer;
  background:var(--flaeche)}
.bildwahl > span{font-family:var(--schrift-zahl);font-size:.65rem;letter-spacing:.09em;
  text-transform:uppercase}
.bildwahl input{max-width:210px;font-size:.75rem;color:var(--text2)}
.bildwahl input::file-selector-button{font:inherit;font-size:.75rem;border:1px solid var(--linie);
  border-radius:3px;background:var(--flaeche2);color:var(--text2);padding:3px 9px;margin-right:8px;
  cursor:pointer}
.bildwahl input::file-selector-button:hover{background:var(--tief)}

.bildschau{display:none}
.bildschau:target{display:flex;position:fixed;inset:0;z-index:90;align-items:center;
  justify-content:center;padding:20px}
.bildschau-zu{position:absolute;inset:0;background:rgba(8,12,13,.86)}
.bildschau figure{position:relative;margin:0;display:flex;flex-direction:column;gap:10px;
  max-width:min(1400px,100%);max-height:100%}
.bildschau img{max-width:100%;max-height:calc(100vh - 110px);object-fit:contain;border-radius:4px;
  background:#000;display:block;margin:0 auto}
.bildschau figcaption{display:flex;align-items:center;gap:9px;flex-wrap:wrap;color:#dfe5e4;
  font-size:.78rem;background:rgba(20,26,27,.9);border-radius:4px;padding:8px 12px}
.bildschau figcaption .btn.geist{color:#dfe5e4;border-color:rgba(223,229,228,.35)}
.bildschau figcaption .btn.geist:hover{background:rgba(255,255,255,.12)}
.bildschau figcaption .btn.gefahr{color:#f0a091;border-color:rgba(240,160,145,.4)}

@media (max-width:860px){
  /* Auf dem Telefon zählt, dass alle drei Knöpfe erreichbar bleiben. */
  .tafelfuss .fueller{flex-basis:100%}
  .titelfeld{min-height:calc(2.5em + 12px)}
  .bildmarke{width:78px;height:60px}
  .bildwahl{width:100%}
  .bildwahl input{max-width:none;flex:1}
  .bildschau:target{padding:8px}
}
@media print{
  .bildschau{display:none !important}
  .bildmarke{width:150px;height:112px}
}

/* ---------- Durchgang der Besprechung ---------- */
.taktinfo{font-family:var(--schrift-zahl);font-size:.68rem;color:var(--text3);
  border:1px solid var(--linie);border-radius:99px;padding:3px 10px;white-space:nowrap}

.durchgesprochen{border-top:1px solid var(--linie);background:var(--flaeche2)}
.durchgesprochen summary{cursor:pointer;padding:10px 18px;font-family:var(--schrift-zahl);
  font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;color:var(--text3);
  list-style:none;display:flex;align-items:center;gap:8px}
.durchgesprochen summary::-webkit-details-marker{display:none}
.durchgesprochen summary::before{content:"▸";font-size:.75rem}
.durchgesprochen[open] summary::before{content:"▾"}
.durchgesprochen summary:hover{color:var(--text2);background:var(--tief)}
.durchgesprochen summary .leisetext{text-transform:none;letter-spacing:0;font-family:var(--schrift)}
.durchgang .zeile{opacity:.62}
.durchgang .zeile:hover{opacity:1}
.durchgang .zeile .t{text-decoration:line-through;text-decoration-color:var(--linie)}
.durchgangfuss{display:flex;align-items:center;gap:10px;padding:11px 18px;flex-wrap:wrap;margin:0}

@media (max-width:860px){
  .zeile{padding-left:40px}
  .zeile.kopf{padding-left:40px}
  .abhaken{left:9px}
}

/* ---------- Stammdaten ---------- */
.seitenkopf{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.eingabe.klein{width:auto;min-width:104px;max-width:170px}
.eingabe.winzig{width:72px;min-width:0;text-align:right}
.tabelle td .eingabe{min-width:0}
/* Fuß der bearbeitbaren Listen: einmal speichern für die ganze Tabelle */
.listenfuss{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:12px 0 0}
.listenfuss .eingabe{width:auto;min-width:170px}

.speicherleiste{position:sticky;bottom:0;display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  padding:12px 16px;margin-top:8px;background:var(--flaeche);border:1px solid var(--linie);
  border-radius:4px;box-shadow:var(--schatten)}
.btn.gross{padding:9px 20px;font-size:.9rem}
.stammform{display:flex;flex-direction:column;gap:30px}

/* ---------- Projekte als Karten ---------- */
.karten{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:14px}
.projektkarte{position:relative;background:var(--flaeche);border:1px solid var(--linie);
  border-radius:5px;padding:16px 18px;display:flex;flex-direction:column;gap:2px}
.projektkarte:hover{border-color:var(--akzent);box-shadow:var(--schatten)}
.projektkarte.ruht{opacity:.62}
.projektkarte.ruht:hover{opacity:1}
/* Die ganze Karte ist ein Link – der liegt als Fläche darunter, damit die
   Verweise im Fuß trotzdem anklickbar bleiben (Links lassen sich nicht schachteln). */
.kartenflaeche{position:absolute;inset:0;border-radius:5px}
.kartenflaeche:focus-visible{outline:2px solid var(--akzent);outline-offset:2px}
.pk-kopf{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-bottom:4px}
.pk-nr{font-family:var(--schrift-zahl);font-size:.72rem;color:var(--text3);letter-spacing:.08em}
.projektkarte h2{font-size:1rem;font-weight:600;line-height:1.3;margin:0}
.pk-unter{margin:2px 0 12px;color:var(--text3);font-size:.79rem;min-height:1.2em;
  display:flex;align-items:center;gap:7px;flex-wrap:wrap}
.pk-kategorie{border:1px solid var(--linie);border-radius:99px;padding:1px 8px;font-size:.7rem}
.pk-daten{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px 12px;margin:0 0 4px;
  font-size:.78rem}
.pk-daten dt{color:var(--text3);font-family:var(--schrift-zahl);font-size:.64rem;
  letter-spacing:.08em;text-transform:uppercase}
.pk-daten dd{margin:0;font-variant-numeric:tabular-nums;color:var(--text)}
.pk-daten dd.warnzahl{color:var(--rot);font-weight:600}
.pk-fuss{position:relative;display:flex;gap:14px;margin-top:auto;padding-top:12px;
  border-top:1px solid var(--linie2)}
.marke.laufend{background:var(--akzent-hell);color:var(--akzent-dunkel);border-color:transparent}
.marke.abgeschlossen{background:var(--tief);color:var(--text3);border-color:transparent}

/* ---------- Erinnerung per E-Mail ---------- */
/* Ein Haken mit Erklärung darunter – die Erklärung gehört zur Entscheidung,
   nicht in eine Fußnote. */
.schalter{display:flex;align-items:flex-start;gap:11px;cursor:pointer;padding:2px 0}
.schalter input{width:17px;height:17px;margin:2px 0 0;accent-color:var(--akzent);flex:none}
.schalter span{display:flex;flex-direction:column;gap:1px}
.schalter b{font-weight:600}
.schalter small{color:var(--text3);font-size:.78rem;line-height:1.4}
.feld small{color:var(--text3);font-size:.75rem;line-height:1.4;margin-top:3px}

.mailstand{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--linie);
  border:1px solid var(--linie);border-radius:4px;overflow:hidden;margin:0 0 18px}
.mailstand .kachel b{font-size:1.25rem}

.mailkarte{border:1px solid var(--linie);border-radius:4px;background:var(--flaeche);margin:0 0 7px}
.mailkarte summary{display:flex;align-items:center;gap:9px;flex-wrap:wrap;padding:9px 13px;
  cursor:pointer;list-style:none;font-size:.87rem}
.mailkarte summary::-webkit-details-marker{display:none}
.mailkarte summary::before{content:"›";color:var(--text3);transition:transform .12s;display:inline-block}
.mailkarte[open] summary::before{transform:rotate(90deg)}
.mailkarte summary:hover{background:var(--flaeche2)}
.mailtext{border-top:1px solid var(--linie2);padding:11px 13px}
.mailtext .betreff{font-weight:600;font-size:.87rem;margin-bottom:7px}
.mailtext pre{margin:0;white-space:pre-wrap;word-break:break-word;font-family:var(--schrift-zahl);
  font-size:.78rem;line-height:1.55;color:var(--text2);background:var(--flaeche2);
  border:1px solid var(--linie2);border-radius:3px;padding:11px 13px;overflow-x:auto}
.warnzahl{color:var(--rot)}
/* Mit der Spalte für die Adresse wird die Stammdatentabelle eng. Ohne
   Mindestbreiten quetscht der Browser Name und Adresse auf ein Zeichen
   zusammen; der Rahmen darf stattdessen seitlich scrollen. */
.tabelle td .eingabe.name{min-width:150px}
.tabelle td .eingabe.adresse{min-width:180px}
code.breit{display:block;padding:9px 12px;word-break:break-all;line-height:1.6}

@media (max-width:860px){
  .mailstand{grid-template-columns:repeat(2,1fr)}
  /* Die Knopfreihe darf umbrechen, sonst steht „Jetzt verschicken" außerhalb der Karte. */
  .formfuss{flex-wrap:wrap}
  .formfuss .fueller{flex-basis:100%}
}

/* ---------- Ausdruck der offenen Punkte ----------
   Eine Seite, die fürs Papier gesetzt ist. Am Bildschirm sieht man dasselbe
   Blatt, damit vor dem Drucken klar ist, was herauskommt. */
.druckleiste{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:12px 22px;
  border-bottom:1px solid var(--linie);background:var(--flaeche)}
.druckleiste .projektwahl{display:flex;align-items:center;gap:8px}
.druckleiste .leisetext{font-size:.75rem}

.blattseite{background:var(--flaeche);color:var(--text);margin:22px auto;padding:20mm 15mm;
  width:210mm;max-width:calc(100% - 28px);box-shadow:var(--schatten);border:1px solid var(--linie)}

.blattkopf2{display:flex;align-items:flex-start;gap:20px;padding-bottom:12px;margin-bottom:14px;
  border-bottom:2px solid var(--text)}
.blattkopf2 h1{font-size:1.35rem;line-height:1.2}
.blattkopf2 .unterzeile{margin:3px 0 0;color:var(--text3);font-size:.82rem}
.blattkopf-rechts{margin-left:auto;text-align:right;flex:none}
.blatttitel{font-family:var(--schrift-titel);font-size:1rem;font-weight:600}
.blattkopf-rechts .zahl{font-size:.75rem;color:var(--text2);line-height:1.5}

.blatt-tabelle{width:100%;border-collapse:collapse;font-size:.8rem}
.blatt-tabelle thead th{text-align:left;font-family:var(--schrift-zahl);font-size:.6rem;
  letter-spacing:.07em;text-transform:uppercase;color:var(--text3);font-weight:400;
  padding:0 12px 6px 0;border-bottom:1px solid var(--linie)}
/* Ein Punkt ist ein <tbody> – so bleibt er beim Drucken auf einem Blatt zusammen. */
.blatt-tabelle tbody.posten{break-inside:avoid;page-break-inside:avoid}
/* Ein Punkt sind zwei Zeilen: oben Titel und die Spalten, darunter über die
   ganze Breite Beschreibung und Verlauf. Die Trennlinie gehört deshalb an die
   letzte Zeile des <tbody>, nicht an jede Zeile. */
.blatt-tabelle td{vertical-align:top;padding:2px 12px 2px 0;border:0}
.blatt-tabelle tbody.posten > tr:first-child > td{padding-top:9px}
.blatt-tabelle tbody.posten > tr:last-child > td{padding-bottom:9px;
  border-bottom:1px solid var(--linie2)}
.blatt-tabelle tbody.posten > tr.p-breitzeile > td{padding-right:0}
.blatt-tabelle .s-nr{width:56px;white-space:nowrap;color:var(--text3);font-size:.75rem}
.blatt-tabelle .s-bereich{width:68px}
.blatt-tabelle .s-wer{width:112px}
.blatt-tabelle .s-status{width:84px}
.blatt-tabelle .s-frist{width:62px;white-space:nowrap;padding-right:0}
.p-titel{font-weight:600;line-height:1.35}
.p-merker{font-size:.68rem;font-weight:400;border:1px solid var(--ocker);color:var(--ocker);
  border-radius:99px;padding:0 6px;margin-left:6px;white-space:nowrap}
.p-beschreibung{color:var(--text2);font-size:.76rem;margin-top:3px}
.p-verlauf{list-style:none;margin:5px 0 0;padding:0 0 0 10px;border-left:2px solid var(--linie);
  display:flex;flex-direction:column;gap:3px}
.p-verlauf li{display:flex;gap:8px;font-size:.75rem;color:var(--text2);line-height:1.45}
.p-verlauf time{flex:none;font-family:var(--schrift-zahl);font-size:.7rem;color:var(--text3);
  width:52px;font-variant-numeric:tabular-nums}
.p-verlauf.leer{font-size:.72rem;color:var(--text3);border-left-color:var(--linie2);padding:1px 0 1px 10px}
.p-wartet,.p-liegt{font-size:.68rem;color:var(--text3);margin-top:2px;line-height:1.3}
.p-ueber{font-size:.68rem;color:var(--rot);font-weight:600;margin-top:2px}

.blattfuss{display:flex;gap:12px;margin-top:16px;padding-top:8px;border-top:1px solid var(--linie);
  font-size:.68rem;color:var(--text3)}

/* Ausdrücklich nur am Bildschirm: ein A4-Blatt ist im Druck rund 700 px breit
   und würde sonst als „schmaler Bildschirm" gelten – dann fehlten auf dem
   Papier die Spalten Bereich und Status. */
@media screen and (max-width:860px){
  .blattseite{padding:16px 14px;margin:12px auto;width:auto}
  .blatt-tabelle .s-bereich,.blatt-tabelle .s-status{display:none}
  .blattkopf2{flex-direction:column;gap:8px}
  .blattkopf-rechts{margin-left:0;text-align:left}
}

@media print{
  @page{size:A4 portrait;margin:14mm 12mm}
  .druckleiste{display:none}
  /* Auf Papier immer Schwarz auf Weiß, unabhängig von der Einstellung des Geräts */
  .blattseite{margin:0;padding:0;width:auto;max-width:none;box-shadow:none;border:0;
    background:#fff;color:#000}
  .blattseite h1,.blattseite .p-titel{color:#000}
  .blattkopf2{border-bottom-color:#000}
  .blatt-tabelle{font-size:8.6pt}
  .blatt-tabelle thead th{color:#444;border-bottom-color:#999}
  .blatt-tabelle thead{display:table-header-group}   /* Kopfzeile auf jedem Blatt */
  .blatt-tabelle td{border-bottom-color:#ccc}
  .blatt-tabelle .s-nr,.p-beschreibung,.p-verlauf li{color:#333}
  .p-verlauf{border-left-color:#bbb}
  .p-verlauf time,.p-wartet,.p-liegt,.blattkopf2 .unterzeile,.blattfuss{color:#666}
  .p-ueber{color:#000;font-weight:700}
  .p-merker{border-color:#666;color:#333}
  .blattfuss{border-top-color:#999}
}