:root{
  --gruen:#BED62E; --tief:#4F7212; --tiefer:#3B5A0B; --papier:#F5F7F0; --weiss:#fff;
  --ink:#131A14; --schrift:#1F2A21; --grau:#5A6A5D; --leise:#8A968C; --linie:#DCE3D6;
  --rot:#B3261E; --rot-h:#FBEAE8; --gelb:#B26A00; --gelb-h:#FFF4DF; --blau:#1D5FA6; --blau-h:#E7F0FA;
  --r:14px;
}
*{box-sizing:border-box}
html,body{margin:0;background:var(--papier);color:var(--schrift);font:16px/1.45 Inter,system-ui,sans-serif;-webkit-font-smoothing:antialiased}
h1,h2,h3,.sora{font-family:Sora,Inter,sans-serif;letter-spacing:-.01em}
h1{font-size:22px;margin:0 0 4px}
h2{font-family:Inter,sans-serif;margin:26px 0 10px;color:var(--grau);font-weight:600;text-transform:uppercase;letter-spacing:.06em;font-size:12.5px}
a{color:var(--tief)}
button{font:inherit;cursor:pointer}
.kopf{background:var(--weiss);border-bottom:1px solid var(--linie);position:sticky;top:0;z-index:5}
.kopf .in{max-width:1140px;margin:0 auto;padding:10px 16px;display:flex;align-items:center;gap:14px}
.kopf img{height:34px;display:block}
.kopf nav{margin-left:auto;display:flex;gap:4px}
.kopf nav a{text-decoration:none;color:var(--grau);font-weight:500;padding:8px 12px;border-radius:999px;font-size:15px;display:flex;gap:6px;align-items:center}
.kopf nav a.aktiv{background:var(--papier);color:var(--ink)}
.badge{background:var(--rot);color:#fff;font-size:12px;font-weight:600;border-radius:999px;padding:1px 7px;min-width:20px;text-align:center}
.badge.null{background:var(--linie);color:var(--grau)}
main{max-width:1140px;margin:0 auto;padding:18px 20px 80px}
.seite{display:grid;grid-template-columns:1fr;gap:0 24px}
.seite .links,.seite .rechts{display:contents}
.seite .status{order:0}.seite .felder{order:1}.seite .aktionen{order:2}.seite .verlaufbox{order:3}
.fertig{background:#EEF5D6;border:1px solid #CFE08A;border-radius:var(--r);padding:14px 16px;margin-bottom:12px}
.fertig .fz{font-family:Sora;font-weight:600;font-size:16px;color:var(--tiefer);margin-bottom:8px}
.fertig ul{margin:0 0 10px;padding-left:20px}
.fertig li{margin:3px 0}
.fertig p{margin:0;color:var(--grau);font-size:14.5px}
@media (min-width:900px){
  .seite{grid-template-columns:minmax(0,1.5fr) minmax(320px,1fr);align-items:start}
  .seite .links,.seite .rechts{display:block}
  .seite .rechts{position:sticky;top:70px}
  .seite .aktionen{position:static;background:none;padding:0;margin:0 0 12px}
  .seite .aktionen .in{box-shadow:none}
  main .karte{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1.4fr) auto 90px;align-items:center;gap:6px 22px;padding:13px 18px}
  main .karte .z1,main .karte .z2{display:contents}
  .karte .vorgang{order:2}.karte .pill{order:3;justify-self:end}.karte .wann{order:4;text-align:right}
}
.hallo{display:flex;align-items:baseline;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:6px}
.hallo p{margin:0;color:var(--grau)}
.karte{background:var(--weiss);border:1px solid var(--linie);border-radius:var(--r);padding:14px 16px;margin-bottom:10px;display:block;text-decoration:none;color:inherit;position:relative;transition:box-shadow .15s}
a.karte:hover{box-shadow:0 2px 10px rgba(19,26,20,.08)}
.karte .z1{display:flex;justify-content:space-between;gap:10px;align-items:flex-start}
.karte .name{font-family:Sora;font-weight:600;font-size:16.5px;color:var(--ink)}
.karte .ort{color:var(--grau);font-size:14.5px;margin-top:1px}
.karte .wann{color:var(--leise);font-size:13px;white-space:nowrap}
.karte .z2{display:flex;justify-content:space-between;align-items:center;margin-top:10px;gap:10px;flex-wrap:wrap}
.karte .vorgang{font-size:13.5px;color:var(--grau)}
.pill{display:inline-flex;align-items:center;gap:6px;font-size:13.5px;font-weight:600;border-radius:999px;padding:4px 11px;white-space:nowrap}
.pill::before{content:"";width:8px;height:8px;border-radius:50%;background:currentColor}
.p-rot{background:var(--rot-h);color:var(--rot)}
.p-gelb{background:var(--gelb-h);color:var(--gelb)}
.p-blau{background:var(--blau-h);color:var(--blau)}
.p-gruen{background:#EEF5D6;color:var(--tiefer)}
.p-grau{background:var(--papier);color:var(--grau)}
.karte.ruhig{opacity:.78}
.karte.ruhig .name{font-weight:500}
.leer{color:var(--leise);text-align:center;padding:26px 10px;border:1px dashed var(--linie);border-radius:var(--r)}
.zurueck{display:inline-flex;gap:6px;align-items:center;text-decoration:none;color:var(--grau);font-size:14.5px;margin-bottom:12px}
.titel{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;flex-wrap:wrap}
.titel .meta{color:var(--grau);font-size:14.5px}
.box{background:var(--weiss);border:1px solid var(--linie);border-radius:var(--r);overflow:hidden;margin-bottom:12px}
.box.rot{border-color:#EFC6C2;background:#FFFCFB}
.box .kopfz{padding:12px 16px 4px;font-family:Sora;font-weight:600;font-size:15px;display:flex;gap:8px;align-items:center}
.box.rot .kopfz{color:var(--rot)}
.feld{display:grid;grid-template-columns:150px 1fr auto;gap:6px 14px;padding:11px 16px;border-top:1px solid var(--linie);align-items:center}
.kopfz+.feld{border-top:0}
.feld .l{color:var(--grau);font-size:14px}
.feld .w{font-weight:500;overflow-wrap:anywhere}
.feld .w.fehlt{color:var(--rot);font-weight:600}
.feld .stift{background:none;border:0;color:var(--leise);padding:4px 6px;border-radius:8px;font-size:13.5px}
.feld .stift:hover{background:var(--papier);color:var(--tief)}
.ed{display:flex;flex-direction:column;gap:10px}
.ed input,.ed select,textarea{font:inherit;padding:10px 12px;border:1.5px solid var(--linie);border-radius:10px;width:100%;background:#fff;color:var(--ink)}
.ed input:focus,textarea:focus{outline:0;border-color:var(--tief)}
.merk{display:flex;gap:8px;flex-wrap:wrap}
.merk label{display:flex;gap:7px;align-items:center;font-size:14px;white-space:nowrap;border:1.5px solid var(--linie);border-radius:999px;padding:6px 12px;background:#fff;cursor:pointer}
.merk label:has(input:checked){border-color:var(--tief);background:#EEF5D6}
.merk input{margin:0}
.merk small{color:var(--leise)}
.reihe{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.btn{border:0;border-radius:11px;padding:11px 16px;font-weight:600;font-size:15px;display:inline-flex;align-items:center;gap:8px;line-height:1.1;text-decoration:none}
.btn.p{background:var(--gruen);color:var(--ink)}
.btn.p:hover{background:#B0C92A}
.btn.s{background:var(--weiss);color:var(--schrift);border:1.5px solid var(--linie)}
.btn.s:hover{border-color:var(--leise)}
.btn.g{background:none;color:var(--grau);padding:9px 10px}
.btn:disabled{opacity:.5;cursor:not-allowed}
.aktionen{position:sticky;bottom:0;background:linear-gradient(to top,var(--papier) 70%,transparent);padding:14px 0 16px;margin-top:8px}
.aktionen .in{background:var(--weiss);border:1px solid var(--linie);border-radius:var(--r);padding:14px 16px;box-shadow:0 6px 24px rgba(19,26,20,.08)}
.aktionen p{margin:0 0 10px;color:var(--grau);font-size:14.5px}
.fotos{display:flex;gap:8px;flex-wrap:wrap;padding:10px 16px 14px}
.foto{width:92px;height:72px;border-radius:9px;background:linear-gradient(135deg,#e6ebdd,#cfd8c4);display:flex;align-items:flex-end;padding:6px;font-size:11.5px;color:var(--grau);border:1px solid var(--linie)}
.upload{width:92px;height:72px;border-radius:9px;border:1.5px dashed var(--leise);display:flex;align-items:center;justify-content:center;flex-direction:column;font-size:12.5px;color:var(--grau);cursor:pointer;background:#fff;text-align:center;padding:4px}
.upload:hover{border-color:var(--tief);color:var(--tief)}
.verlauf{list-style:none;margin:0;padding:4px 16px 12px}
.verlauf li{display:grid;grid-template-columns:34px 1fr;gap:10px;padding:9px 0;border-top:1px solid var(--linie)}
.verlauf li:first-child{border-top:0}
.verlauf .wer{width:30px;height:30px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:14px;background:var(--papier);font-weight:600}
.verlauf .wer.du{background:var(--gruen)}
.verlauf .wer.bot{background:#E7F0FA}
.verlauf .t{font-size:14.5px}
.verlauf .t small{display:block;color:var(--leise);font-size:12.5px;margin-top:1px}
.hinweis{background:var(--blau-h);color:var(--blau);border-radius:11px;padding:10px 14px;font-size:14.5px;margin:0 0 12px}
.stamm .kopfz small{color:var(--leise);font-weight:400;font-family:Inter;font-size:13px}
.toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%) translateY(20px);background:var(--ink);color:#fff;padding:11px 16px;border-radius:12px;font-size:14.5px;opacity:0;transition:.25s;pointer-events:none;max-width:90vw;z-index:9}
.toast.an{opacity:1;transform:translateX(-50%)}
@media (max-width:560px){
  .pill{white-space:normal;max-width:100%;text-align:left}
  .pill::before{flex:0 0 8px}
  .feld{grid-template-columns:1fr auto;grid-template-areas:"l s" "w s"}
  .feld .l{grid-area:l}.feld .w{grid-area:w}.feld .stift{grid-area:s}
  .kopf nav a span.txt{display:none}
  h1{font-size:20px}
}

/* ---------- Ergänzungen für das Plugin (Entwurf war reines JS, hier echte Formulare) ---------- */
.nurklein{display:none}
.kopf nav a.abmelden{color:var(--leise)}
.zurueck span{font-size:18px;line-height:1}
.titel .pill{margin-top:6px}
.abstand{height:14px}
/* Feld mit Bearbeitung: <details> statt JS-Umschalter, funktioniert ohne Skript */
details.feld{display:block;padding:0}
details.feld>summary{list-style:none;display:grid;grid-template-columns:150px 1fr auto;gap:6px 14px;padding:11px 16px;align-items:center;cursor:pointer}
details.feld>summary::-webkit-details-marker{display:none}
details.feld>summary:hover .stift{background:var(--papier);color:var(--tief)}
details.feld[open]{background:#FAFBF6}
details.feld[open]>summary .stift{color:var(--tief)}
.feld .stift.eintragen{color:var(--tief);font-weight:600;border:1.5px solid #CFE08A;background:#fff;border-radius:999px;padding:5px 11px}
details.feld>summary:hover .stift.eintragen{background:#EEF5D6}
details.feld>.ed{padding:2px 16px 14px}
.feld>.l,.feld>.w{display:block}
.feld .l small,.feld .l .hilfe{color:var(--leise);font-weight:400}
.feld .w .format{display:block;color:var(--rot);font-size:13px;font-weight:500}
.feld .w .leise{color:var(--leise);font-weight:400}
.feld form.inline{display:contents}
.merk-hinweis{color:var(--leise);font-size:13.5px}
html:not(.js) .nurjs{display:none}
/* Upload: echtes Formular, Dateiwahl sichtbar */
.upload{width:auto;height:auto;min-width:200px;flex:1 1 200px;align-items:stretch;justify-content:flex-start;gap:8px;padding:12px;cursor:default;text-align:left;font-size:13.5px}
.upload:hover{color:var(--grau)}
.upload .ut{font-weight:600;color:var(--schrift);font-size:14px;display:flex;gap:6px;align-items:center}
.upload input[type=file]{font:inherit;font-size:13px;max-width:100%;color:var(--grau)}
.upload select{font:inherit;font-size:13.5px;padding:6px 8px;border:1.5px solid var(--linie);border-radius:8px;background:#fff;color:var(--ink);max-width:100%}
.upload .btn{align-self:flex-start;padding:8px 12px;font-size:14px}
.upload small{color:var(--leise)}
.foto{width:auto;min-width:92px;max-width:220px;height:auto;min-height:56px;align-items:flex-start;flex-direction:column;justify-content:flex-end;gap:2px;overflow-wrap:anywhere}
.foto b{font-weight:600;color:var(--schrift);font-size:12.5px}
/* Statuskasten Rückfrage */
.box.gelb{border-color:#F3D9A6;background:#FFFCF5}
.box.gelb .kopfz{color:var(--gelb)}
.box .inhalt{padding:4px 16px 14px;overflow-wrap:anywhere}
.box .inhalt .sonder{margin:10px 0 0;color:var(--gelb);font-size:14px;font-weight:500}
.verlauf .t{overflow-wrap:anywhere}
/* Meldung: serverseitig gerendert, steht oben im Inhalt (keine Überlappung mit der Aktionsleiste) */
.toast.fest{position:static;transform:none;opacity:1;pointer-events:auto;display:block;width:max-content;max-width:100%;margin:0 0 16px}
.toast.fehler{background:var(--rot)}
.hinweis.rot{background:var(--rot-h);color:var(--rot)}
.fehlertext{color:var(--rot);font-size:14.5px;margin:0 0 12px}
.oktext{color:var(--tiefer);font-size:14.5px;margin:0 0 12px}
/* Anmeldung */
.login{max-width:400px;margin:48px auto 0;background:var(--weiss);border:1px solid var(--linie);border-radius:var(--r);padding:28px 26px}
.login img{height:40px;display:block;margin:0 0 20px}
.login h1{font-size:20px;margin-bottom:14px}
.formfeld{display:block;margin:0 0 12px}
.formfeld span{display:block;font-size:14px;color:var(--grau);margin-bottom:4px}
.formfeld input,.formfeld select{font:inherit;padding:10px 12px;border:1.5px solid var(--linie);border-radius:10px;width:100%;background:#fff;color:var(--ink)}
.formfeld input:focus{outline:0;border-color:var(--tief)}
.checkzeile{display:flex;gap:8px;align-items:center;font-size:14.5px;color:var(--grau);margin:4px 0 16px}
.checkzeile input{margin:0;width:16px;height:16px}
.box .inhalt .formfeld:last-child{margin-bottom:0}
details.korrektur{margin-top:10px}
details.korrektur summary{cursor:pointer;color:var(--grau);font-size:14.5px}
details.korrektur .ed{margin-top:10px}
.aktionen form{margin:0}
.aktionen .reihe form{display:contents}
.fehlerseite{max-width:560px;margin:40px auto;text-align:center}
.fehlerseite p{color:var(--grau)}
@media (max-width:560px){
  details.feld>summary{grid-template-columns:1fr auto;grid-template-areas:"l s" "w s"}
  .kopf nav a .nurklein{display:inline}
  .kopf nav a{padding:8px 10px}
  .login{margin:16px auto 0;padding:22px 18px}
}
/* Kein seitliches Scrollen auf dem Handy: lange Beschriftungen dürfen umbrechen, Spalten nicht wachsen */
.seite .felder,.seite .status,.seite .aktionen,.seite .verlaufbox,.seite .links,.seite .rechts{min-width:0}
.merk label{flex:0 0 auto;max-width:100%}
.merk label small{white-space:normal;min-width:0}
.fotos{min-width:0}