/* Verwaltung BSP – Stufe 1. Markenpalette (Marcel, 05.10.2026):
   #0AD598 Mint (nur als Fläche mit dunkler Schrift), #E6FBF5 helles Mint, #001717 Petrol/Schrift, #FAFAFA Hintergrund.
   Rot nur für Fehler. Kein JavaScript, keine externen Quellen. */

@font-face{font-family:"Onest";src:url("/fonts/onest-latin-400-normal.woff2") format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Onest";src:url("/fonts/onest-latin-500-normal.woff2") format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:"Onest";src:url("/fonts/onest-latin-700-normal.woff2") format("woff2");font-weight:600 700;font-display:swap}
@font-face{font-family:"Gabarito";src:url("/fonts/gabarito-latin-700-normal.woff2") format("woff2");font-weight:700;font-display:swap}

:root{
  --breite:1200px; --rand:24px; /* Seitenbreite 1200 px Inhalt, links und rechts bündig (Marcel 08.10.2026) */
  --mint:#0AD598; --mint-hell:#E6FBF5; --petrol:#001717; --grund:#FAFAFA; --weiss:#FFFFFF;
  --linie:#D5E3DF; --leise:#3A4F4F;
  --fehler:#B42318; --fehler-hell:#FEF3F2;
  color-scheme:light;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--grund);color:var(--petrol);font:15px/1.5 "Onest",system-ui,-apple-system,"Segoe UI",sans-serif;overflow-wrap:anywhere}
h1,h2,h3{font-family:"Gabarito","Onest",system-ui,sans-serif;margin:0;letter-spacing:-.01em;line-height:1.2}
h1{font-size:26px}
h2{font-size:17px}
h3{font-size:15px}
a{color:var(--petrol)}
:focus-visible{outline:3px solid var(--petrol);outline-offset:2px}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:-999px;top:0;background:var(--petrol);color:#fff;padding:8px 12px;z-index:10}
.skip:focus{left:8px}

.probe{background:var(--petrol);color:#fff;font-size:12px;text-align:center;padding:6px 16px}
header.kopfzeile{background:var(--weiss);border-bottom:1px solid var(--linie)}
/* Kopfzeile (nexusOS, Marcel 09.10.2026): Schriftzug links, Navigation in der Mitte, rechts Nachrichten und Konto */
.kopf{max-width:calc(var(--breite) + 2 * var(--rand));margin:0 auto;padding:10px var(--rand);display:grid;grid-template-columns:1fr auto 1fr;grid-template-areas:"marke nav rechts";align-items:center;gap:12px 20px}
.kopf>.marke{grid-area:marke;justify-self:start}
.kopf>nav.haupt{grid-area:nav}
.kopf-rechts{grid-area:rechts;justify-self:end;display:flex;align-items:center;gap:12px;min-width:0}
.kopf-rechts .wer{margin-left:0}
/* Schriftzug: „nexus“ kräftig und eng, „OS“ weit gesperrt auf Mint (nur vorhandene Schrift Gabarito) */
.marke{display:inline-flex;align-items:center;gap:6px;text-decoration:none;color:var(--petrol);line-height:1;margin:0}
.marke-nexus{font:700 24px/1 "Gabarito","Onest",system-ui,sans-serif;letter-spacing:-.045em}
.marke-os{font:700 11px/1 "Gabarito","Onest",system-ui,sans-serif;letter-spacing:.2em;padding:5px 4px 5px 7px;border-radius:6px;color:var(--petrol);background:linear-gradient(135deg,var(--mint),var(--mint-hell));box-shadow:inset 0 0 0 1px rgba(0,23,23,.08)}
a.marke:hover .marke-nexus{text-decoration:underline;text-decoration-color:var(--mint);text-decoration-thickness:3px;text-underline-offset:5px}
.marke-gross{margin-bottom:18px}
.marke-gross .marke-nexus{font-size:32px}
.marke-gross .marke-os{font-size:13px;padding:6px 5px 6px 8px}
nav.haupt ul{list-style:none;margin:0;padding:0;display:flex;gap:4px}
nav.haupt a{display:block;padding:8px 14px;border-radius:8px;text-decoration:none;font-weight:500}
nav.haupt a[aria-current=page]{background:var(--mint)}
nav.haupt a:hover{background:var(--mint-hell)}
nav.haupt a[aria-current=page]:hover{background:var(--mint)}
.wer{margin-left:auto;font-size:13px;color:var(--leise);display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.wer form{margin:0}
.linkknopf{background:none;border:0;padding:0;font:inherit;color:var(--petrol);text-decoration:underline;cursor:pointer}

main{max-width:calc(var(--breite) + 2 * var(--rand));margin:0 auto;padding:24px var(--rand) 48px}
.schmal{} /* früher 1040 px; jetzt alle Seiten gleich breit */
.unterzeile{color:var(--leise);margin:6px 0 20px}
/* Dashboard-Kopf mit Knopf „Synchronisieren“ rechts (08.10.2026) */
.seitenkopf{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;flex-wrap:wrap}
.sync{display:flex;flex-direction:column;align-items:flex-end;gap:4px;margin:0}
.sync small{font-size:12px}
.sync-knopf[disabled]{opacity:.7;cursor:progress}
.dreht{animation:dreht 1s linear infinite}
@keyframes dreht{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.dreht{animation:none}}
@media (max-width:420px){.sync{align-items:flex-start;margin-bottom:12px}}
.kopfreihe{display:flex;justify-content:space-between;align-items:flex-end;gap:12px;flex-wrap:wrap;margin-bottom:16px}

/* Meldungen */
.meldung{border-radius:10px;padding:10px 14px;margin:0 0 16px;border:1px solid var(--mint);background:var(--mint-hell)}
.meldung.fehler{border-color:var(--fehler);background:var(--fehler-hell);color:var(--fehler)}
.meldung ul{margin:4px 0 0;padding-left:18px}
.feldfehler{color:var(--fehler);font-size:13px;margin-top:4px}

/* Heute */
.zahlen{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:28px}
/* Überblick-Ringe (08.10.2026): Ring zeigt den Anteil, Zahl in der Mitte, nicht klickbar */
.zahl{background:var(--weiss);border:1px solid var(--linie);border-radius:20px;padding:16px 18px;display:flex;align-items:center;gap:16px;--c:var(--petrol)}
.zahl.z-ich{--c:var(--mint);background:linear-gradient(135deg,var(--mint-hell),var(--weiss) 70%)}
.zahl.z-partner{--c:#7FD9BC}
.ring{flex:none;width:76px;height:76px;display:grid;place-items:center}
.ring svg{grid-area:1/1;width:100%;height:100%}
.ring circle{fill:var(--weiss);stroke-width:8}
.ring .ring-grund{stroke:#E7EFED}
.ring .ring-wert{fill:none;stroke:var(--c)}
.ring b{grid-area:1/1;position:relative;font:700 24px/1 "Gabarito",system-ui,sans-serif;color:var(--petrol)}
.zahl-text{display:flex;flex-direction:column;gap:2px;min-width:0}
.zahl-text strong{font-size:15px}
.zahl-text small{font-size:12px;color:var(--leise)}
@media (max-width:860px){.zahl{flex-direction:column;text-align:center;padding:14px 6px;gap:8px;border-radius:16px}.zahl-text small{display:none}}
.raster{display:grid;grid-template-columns:minmax(0,1.7fr) minmax(0,1fr);gap:16px;align-items:start}
.karte{background:var(--weiss);border:1px solid var(--linie);border-radius:12px;overflow:hidden}
.karte>h2,.karte>header{padding:14px 16px;border-bottom:1px solid var(--linie);display:flex;justify-content:space-between;align-items:center;gap:8px;flex-wrap:wrap}
.karte>h2 small,.karte>header small{font:500 12px "Onest",system-ui,sans-serif;color:var(--leise)}
.karte .inhalt{padding:14px 16px}
.leer{padding:16px;color:var(--leise);margin:0}

ol.liste,ul.liste{list-style:none;margin:0;padding:0}
.liste li{border-top:1px solid var(--linie)}
.liste li.mit-knopf{display:flex;align-items:center;gap:8px;padding-right:12px}
.liste li.mit-knopf>a.zeile{flex:1;min-width:0}
.liste li.mit-knopf form{margin:0}
.t-abschliessen{background:var(--petrol);color:#fff;border:1px dashed #fff}
.standmarke+.grund{margin-left:4px}
.liste li:first-child{border-top:0}
.liste a.zeile{display:grid;grid-template-columns:auto 1fr auto;gap:4px 12px;padding:12px 16px;text-decoration:none;align-items:center}
.liste a.zeile:hover{background:var(--mint-hell)}
.ort{font-weight:600}
.was{grid-column:2;font-size:13px;color:var(--leise)}
.seit{grid-row:1 / span 2;grid-column:3;font-size:12px;color:var(--leise);text-align:right;white-space:nowrap}
.tag{grid-row:1 / span 2;font-size:11px;font-weight:600;padding:3px 8px;border-radius:6px;white-space:nowrap;min-width:122px;text-align:center;display:inline-block}
.t-ueberfaellig{background:var(--petrol);color:#fff}
.t-antwort{background:var(--mint);color:var(--petrol)}
.t-neu{background:var(--mint-hell);color:var(--petrol);border:1px solid var(--mint)}
.t-erinnerung{background:var(--weiss);color:var(--petrol);border:1px dashed var(--petrol)}
.t-heute{background:var(--grund);color:var(--petrol);border:1px solid var(--linie)}
.t-rueckläufer{background:var(--fehler);color:#fff}
/* Mails zum Prüfen auf dem Dashboard (09.10.2026): Stift = Entwurf wartet, rot umrandet = Versand prüfen */
.t-mail-entwurf{background:var(--weiss);color:var(--petrol);border:1px solid var(--petrol)}
.t-mail-entwurf::before{content:"✎ "}
.t-mail-fehler,.t-mail-unklar{background:var(--fehler-hell);color:var(--fehler);border:1px solid var(--fehler)}
.eigentuemer-hinweis{margin:12px 0 0}
.marke-rot{font-size:11px;font-weight:700;background:var(--fehler-hell);color:var(--fehler);border:1px solid var(--fehler);border-radius:5px;padding:0 5px;white-space:nowrap;display:inline-block}
.chip{font-size:11px;border:1px solid var(--linie);border-radius:5px;padding:0 5px;margin-left:6px;color:var(--leise);font-weight:500;white-space:nowrap;display:inline-block}
.chip.abgelehnt{text-decoration:line-through}
.chip.passt{border-color:var(--mint);background:var(--mint-hell);color:var(--petrol)}
.chip.offen{border-style:dashed;text-decoration:none}
.radios{display:flex;flex-wrap:wrap;gap:8px 18px;margin:0 0 10px}
.radios label{display:inline-flex;align-items:center;gap:6px;font-size:14px;min-height:40px;cursor:pointer}
.radios input{width:20px;height:20px;accent-color:var(--petrol);margin:0}
.notiz-form textarea{width:100%;min-height:80px;margin:0 0 10px}
.notiz-form .knopf{margin-top:2px}
ul.notizliste{list-style:none;margin:14px 0 0;padding:0}
.notizliste .notiz{position:relative;padding:10px 60px 10px 0;border-top:1px solid var(--linie)}
.notizliste .notiz .text{white-space:pre-wrap;font-size:14px;margin-top:4px}
.notizliste .notiz>.x-klein{position:absolute;top:10px;right:0}
.notiz-edit{position:absolute;top:8px;right:26px}
.notiz-edit>summary{list-style:none;cursor:pointer;width:26px;height:26px;display:grid;place-items:center;border-radius:6px;color:var(--petrol)}
.notiz-edit>summary::-webkit-details-marker{display:none}
.notiz-edit[open]{position:static;margin-top:8px}
.notiz-edit[open]>summary{width:auto;justify-items:start}
.notiz-edit form textarea{width:100%;min-height:80px;margin:6px 0 8px}
ol.schritte{list-style:none;margin:12px 0 0;padding:0;display:grid;gap:6px}
ol.schritte li{display:flex;align-items:center;gap:10px;font-size:14px;color:var(--leise)}
ol.schritte li.an{color:var(--petrol)}
.schritt-haken{width:22px;height:22px;border-radius:50%;border:2px solid #9FB3AE;display:inline-grid;place-items:center;font-weight:700;font-size:13px}
ol.schritte li.an .schritt-haken{background:var(--mint);border-color:var(--mint);color:var(--petrol)}
.weg-form{display:flex;gap:8px;align-items:center;margin-top:6px;flex-wrap:wrap}
.weg-form select{min-height:36px}
.hinweis-schlaf{font-size:11px;font-weight:600;border:1px dotted var(--petrol);border-radius:5px;padding:0 5px;white-space:nowrap;display:inline-block}
/* Heute: Jetzt dran als Karten (08.10.2026) */
.dran+.dran{margin-top:28px}
.abschnitt{font-size:18px;margin:8px 0 12px;display:flex;align-items:baseline;gap:8px}
.abschnitt small{font:500 13px "Onest",system-ui,sans-serif;color:var(--leise)}
ol.kacheln{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:12px}
.kachel{background:var(--weiss);border:1px solid var(--linie);border-radius:12px;display:flex;flex-direction:column;min-width:0}
.kachel:hover{border-color:var(--petrol)}
.kachel-link{display:flex;flex-direction:column;gap:8px;padding:14px 16px;text-decoration:none;flex:1;border-radius:12px}
.kachel-kopf{display:flex;justify-content:space-between;align-items:center;gap:8px}
.kachel .tag{min-width:0}
.kachel-marken{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.geplant{display:inline-flex;align-items:center;gap:4px;font-size:11px;font-weight:600;padding:3px 8px;border-radius:6px;background:var(--petrol);color:#fff;white-space:nowrap}
/* Erinnerung (Glocke) wie die Uhr; fällig = rot, die Karte bleibt unter „Eingeplant“ (Marcel 09.10.2026) */
.geplant.rot{background:var(--fehler)}
.alles-erledigt{margin:0 0 20px;color:var(--petrol);font-weight:600}
.kachel .ort{font-size:16px}
.kachel .was{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.kachel-fuss{padding:0 16px 14px;margin:0}
.status{margin-top:16px;font-size:13px;color:var(--leise);display:flex;gap:16px;flex-wrap:wrap}

/* Flächenliste */
.filter{display:grid;grid-template-columns:minmax(0,2fr) repeat(5,minmax(0,1fr)) auto;gap:8px;align-items:end;margin-bottom:16px}
.filter label{display:block;font-size:12px;color:var(--leise);margin-bottom:2px}
.liste .zeile.flaeche{grid-template-columns:minmax(0,1fr) auto}
.liste .zeile.flaeche .was{grid-column:1}
.liste .zeile.flaeche .seit{grid-column:2}
.standmarke{font-size:11px;font-weight:600;padding:2px 7px;border-radius:6px;border:1px solid var(--linie);background:var(--grund);white-space:nowrap;display:inline-block}
.standmarke.s-neu{background:var(--mint-hell);border-color:var(--mint)}
.standmarke.s-abgeschlossen{background:var(--mint);border-color:var(--mint)}
.standmarke.s-abgelehnt{background:var(--weiss);border-style:dashed}

/* Formulare */
input[type=text],input[type=search],input[type=email],input[type=tel],input[type=date],input[type=datetime-local],input[type=password],input[type=number],input[type=file],select,textarea{
  width:100%;font:inherit;color:var(--petrol);background:var(--weiss);border:1px solid #8FA5A0;border-radius:8px;padding:8px 10px;min-height:40px}
textarea{min-height:84px;resize:vertical}
input[aria-invalid=true],select[aria-invalid=true],textarea[aria-invalid=true]{border-color:var(--fehler)}
.feld{margin-bottom:12px}
.feld>label,.feld>span.label,fieldset legend{display:block;font-weight:600;font-size:14px;margin-bottom:4px}
.feld small{display:block;color:var(--leise);font-size:12px}
fieldset{border:0;padding:0;margin:0 0 12px}
.knopf{display:inline-flex;align-items:center;justify-content:center;gap:6px;font:600 14px "Onest",system-ui,sans-serif;color:var(--petrol);background:var(--mint);border:1px solid var(--mint);border-radius:8px;padding:8px 16px;min-height:40px;cursor:pointer;text-decoration:none;white-space:nowrap}
.knopf:hover{background:#08BF88;border-color:#08BF88}
.knopf.zweit{background:var(--weiss);border-color:var(--petrol)}
.knopf.zweit:hover{background:var(--mint-hell)}
.knopf.klein{min-height:32px;padding:4px 10px;font-size:13px}
.zeilefeld{display:flex;gap:8px;flex-wrap:wrap;align-items:flex-end}
.zeilefeld>.feld{flex:1 1 160px;margin-bottom:0}
.raster2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.check{display:flex;gap:8px;align-items:center;margin:4px 0}
.check input{width:18px;height:18px}

details{border-top:1px solid var(--linie)}
details>summary{cursor:pointer;padding:10px 0;font-weight:600;list-style-position:inside}
details[open]>summary{margin-bottom:6px}

/* Flächenseite */
.flaechekopf{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:12px;align-items:start;margin-bottom:16px}
.lagezeile{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-top:8px;font-size:14px}
.spalten{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:16px;align-items:start}
.stapel{display:grid;gap:16px}
.produkt{border-top:1px solid var(--linie);padding:12px 16px}
.produkt:first-child{border-top:0}
.produktkopf{display:flex;justify-content:space-between;align-items:center;gap:8px;flex-wrap:wrap}
.ergebnis{font-size:12px;font-weight:600;padding:2px 8px;border-radius:6px;border:1px solid var(--linie);white-space:nowrap}
.ergebnis.e-passt,.ergebnis.e-abgeschlossen{background:var(--mint);border-color:var(--mint)}
.ergebnis.e-offen{background:var(--mint-hell);border-color:var(--mint)}
.ergebnis.e-abgelehnt{background:var(--weiss);border:1px dashed var(--petrol)}
.absagebox{margin-top:8px;padding:8px 10px;background:var(--grund);border:1px solid var(--linie);border-radius:8px;font-size:14px}
.absagebox.alt{opacity:.8}
.knopfreihe{display:flex;gap:6px;flex-wrap:wrap;margin-top:8px}
.knopfreihe form{margin:0}

table.werte{width:100%;border-collapse:collapse;font-size:14px}
table.werte th,table.werte td{text-align:left;padding:8px 6px;border-top:1px solid var(--linie);vertical-align:top}
table.werte thead th{border-top:0;font-size:12px;color:var(--leise);font-weight:600}
table.werte td.unbekannt{color:var(--leise);font-style:italic}
.abweichung{white-space:nowrap;display:inline-block;font-size:11px;font-weight:600;border:1px solid var(--petrol);border-radius:5px;padding:0 4px;margin-left:4px;font-style:normal}

dl.daten{margin:0;display:grid;grid-template-columns:auto minmax(0,1fr);gap:6px 12px;font-size:14px}
dl.daten dt{color:var(--leise)}
dl.daten dd{margin:0}
dl.daten dd.mehrzeilig{white-space:pre-line}
.nichtanrufen{display:inline-block;font-size:11px;font-weight:700;border:1px solid var(--petrol);border-radius:5px;padding:0 5px;margin-left:6px}

ol.verlauf{list-style:none;margin:0;padding:0}
ol.verlauf li{padding:10px 16px;border-top:1px solid var(--linie);font-size:14px}
ol.verlauf li:first-child{border-top:0}
.verlaufkopf{display:flex;gap:8px;flex-wrap:wrap;font-size:12px;color:var(--leise);margin-bottom:2px}
.verlaufkopf b{color:var(--petrol)}
.verlauf .text{white-space:pre-line}

ul.dateien{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:10px}
ul.dateien a{display:block;text-decoration:none;font-size:12px}
ul.dateien img{width:100%;height:100px;object-fit:cover;border-radius:8px;border:1px solid var(--linie);display:block;background:var(--grund)}
.dateisymbol{height:100px;border-radius:8px;border:1px solid var(--linie);display:grid;place-items:center;background:var(--grund);font-weight:700}

/* Board */
.board{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px;align-items:start}
.spalte{background:var(--weiss);border:1px solid var(--linie);border-radius:12px;overflow:hidden}
.spalte>h2{font-size:15px;padding:12px 12px;border-bottom:1px solid var(--linie);display:flex;justify-content:space-between}
.spalte>h2 span{font-family:"Onest",system-ui,sans-serif;font-size:13px;font-weight:600;background:var(--mint-hell);border-radius:6px;padding:0 6px}
.spalte ol{list-style:none;margin:0;padding:8px;display:grid;gap:8px}
.bkarte{display:block;border:1px solid var(--linie);border-radius:10px;padding:10px;text-decoration:none;background:var(--weiss)}
.bkarte:hover{border-color:var(--petrol);background:var(--mint-hell)}
.bkarte .ort{display:block;font-size:14px}
.bkarte .meta{font-size:12px;color:var(--leise);display:block;margin-top:2px}
.bkarte .chips{margin-top:6px;display:flex;flex-wrap:wrap;gap:4px}
.bkarte .chip{margin-left:0}
.bkarte .fuss{margin-top:6px;font-size:12px;display:flex;justify-content:space-between;gap:6px;flex-wrap:wrap}
.zusammen{margin-top:16px;font-size:14px;display:flex;gap:16px;flex-wrap:wrap}

/* Anmeldung */
.anmeldung{max-width:420px;margin:48px auto;padding:0 16px}
.anmeldung .karte .inhalt{padding:20px}
.qr{background:#fff;padding:12px;border:1px solid var(--linie);border-radius:8px;display:inline-block}
.qr svg{display:block;width:200px;height:200px}
.geheim{font-family:ui-monospace,Menlo,monospace;font-size:14px;background:var(--grund);border:1px solid var(--linie);border-radius:6px;padding:6px 8px;display:block;word-break:break-all}
.codes{font-family:ui-monospace,Menlo,monospace;columns:2;padding-left:18px}

@media (max-width:1100px){
  .board{grid-template-columns:repeat(3,minmax(0,1fr))}
  .filter{grid-template-columns:repeat(3,minmax(0,1fr))}
  .filter .suche{grid-column:1 / -1}
}
@media (max-width:860px){
  .spalten{grid-template-columns:1fr}
}
@media (max-width:760px){
  :root{--rand:16px}
  .raster{grid-template-columns:1fr}
  .kopf{grid-template-columns:1fr auto;grid-template-areas:"marke post" "wer wer" "nav nav";gap:8px 10px}
  .kopf-rechts{display:contents}
  .kopf-rechts details.post{grid-area:post;justify-self:end}
  .kopf-rechts .wer{grid-area:wer}
  nav.haupt ul{justify-content:space-between}
  nav.haupt a{padding:8px 12px}
  .wer{font-size:12px}
  .board{grid-template-columns:1fr}
  .filter{grid-template-columns:repeat(2,minmax(0,1fr))}
  .raster2{grid-template-columns:1fr}
  .flaechekopf{grid-template-columns:1fr}
  h1{font-size:23px}
}
@media (max-width:420px){
  .zahlen{gap:8px}
  .ring{width:64px;height:64px}
  .ring b{font-size:20px}
  .liste a.zeile{grid-template-columns:1fr auto}
  .liste a.zeile .tag{grid-row:auto;grid-column:1 / -1;justify-self:start;min-width:0}
  .liste a.zeile .was{grid-column:1}
  .liste a.zeile .seit{grid-row:auto;grid-column:2}
  .filter{grid-template-columns:1fr}
  table.werte{font-size:13px}
  table.werte th,table.werte td{padding:6px 4px}
}

/* Hilfsklassen (statt Inline-Styles, wegen CSP) */
.hinweistext{font-size:13px;color:var(--leise)}
.oben{margin-top:16px}
.anmeldung.breit{max-width:520px}

/* Klärliste, Vorschläge, Abgleich (Schritt 3/4) */
.zaehler{display:inline-block;min-width:20px;margin-left:4px;padding:0 6px;border-radius:10px;background:var(--petrol);color:#fff;font-size:12px;text-align:center}
nav.haupt a[aria-current=page] .zaehler{background:var(--petrol)}
.band{border:1px solid var(--fehler);background:var(--fehler-hell);color:var(--fehler);border-radius:10px;padding:10px 14px;margin:0 0 16px;font-weight:600}
.klaer li{padding:12px 16px;border-top:1px solid var(--linie);list-style:none}
.klaer li:first-child{border-top:0}
.klaer ul{margin:0;padding:0}
.klaer .titel{font-weight:600}
.klaer .hinweistext{margin:4px 0 8px}
.klaer form{margin:0}
.klaer .aktionen{display:flex;gap:8px;flex-wrap:wrap;align-items:flex-end}
.klaer .aktionen .feld{margin:0;flex:1 1 220px}
.vorschlag{border-top:1px solid var(--linie);padding:12px 16px}
.vorschlag:first-of-type{border-top:0}
.vorschlag .marke-v{display:inline-block;font-size:11px;font-weight:700;border:1px dashed var(--petrol);border-radius:5px;padding:0 5px;margin-right:6px}
.beleg{font-size:13px;color:var(--leise);border-left:3px solid var(--linie);padding-left:8px;margin:6px 0;white-space:pre-line}
.verlauf details{border-top:0}
.verlauf details>summary{padding:2px 0;font-weight:500}

/* Letzter Stand, Mails (05.10.2026) */
.achtung{background:var(--petrol);color:#fff;border-radius:8px;padding:8px 12px;margin:0 0 12px;font-weight:600}
.zusammenfassung{white-space:pre-line;font-size:15px;background:var(--mint-hell);border:1px solid var(--mint);border-radius:8px;padding:10px 12px}
details.mail{border:1px solid var(--linie);border-radius:8px;padding:0 10px;background:var(--weiss)}
details.mail>summary{padding:8px 0;font-weight:400}
details.mail .vorschau{display:block;white-space:pre-line;color:var(--leise);font-size:13px;margin-top:4px}
.mailtext{white-space:pre-wrap;font-size:14px;border-left:3px solid var(--mint);padding:4px 0 4px 10px;margin:6px 0 10px}
details.zitat{border-top:1px dashed var(--linie)}
details.zitat .mailtext{border-left-color:var(--linie);color:var(--leise)}
.vorschlag-schritt{border:1px dashed var(--petrol);border-radius:8px;padding:8px 10px;margin:8px 0}
.altnotizen{margin:0 16px 12px}
.altnotizen .text{white-space:pre-line;font-size:13px;color:var(--leise);border-top:1px solid var(--linie);padding:8px 0}
.kurzzeile{display:block;font-size:12px;color:var(--leise);margin-top:4px}
.aktivitaet{border:1px solid var(--petrol);border-radius:8px;padding:6px 10px;background:var(--weiss)}
.aktivitaet .text{white-space:pre-line}

/* Board als Abschluss-Pipeline (07.10.2026) */
.board.pipeline{grid-template-columns:repeat(4,minmax(0,1fr))}
.spalte.erfolg{background:var(--mint-hell);border-color:var(--mint)}
.spalte.erfolg>h2{background:var(--mint);border-bottom-color:var(--mint);font-size:16px}
.spalte.erfolg>h2 span{background:var(--weiss)}
.spalte.erfolg .leer{color:var(--petrol);font-weight:600}
.unterschrieben{display:inline-block;margin-top:6px;font-size:12px;font-weight:700;background:var(--mint);border-radius:6px;padding:1px 7px}
@media (max-width:1100px){.board.pipeline{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:760px){.board.pipeline{grid-template-columns:1fr}}

/* Detailansicht einer Fläche (Marcel, 07.10.2026): viel Weißraum, wenige Linien, große Klickflächen.
   Links Letzter Stand · To-do · Erinnerung · Stand · Historie; rechts Kontaktdaten · Verträge · Bilder. */
.zurueck{margin:0 0 10px;font-size:14px}
.zurueck a{text-decoration:none;color:var(--leise)}
.zurueck a:hover{color:var(--petrol);text-decoration:underline}
.fkopf{margin-bottom:24px}
.fkopf h1{font-size:30px}
.fkopf-unter{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin:10px 0 0;color:var(--leise);font-size:14px}
.detail{display:grid;grid-template-columns:minmax(0,1.65fr) minmax(0,1fr);gap:24px;align-items:start}
.detail-links,.detail-rechts{display:grid;gap:20px;align-content:start}
.dk{background:var(--weiss);border:1px solid var(--linie);border-radius:16px;padding:22px 24px}
.dk>h2{font-size:18px;margin:0 0 14px;display:flex;align-items:baseline;gap:8px}
.dk>h2 small{font:500 13px "Onest",system-ui,sans-serif;color:var(--leise)}
.leise{color:var(--leise)}
.klein{font-size:13px}
.oben-klein{margin-top:10px}
.dk p{margin:0}
.feld-label{display:block;font-weight:600;font-size:14px;margin:0 0 6px}

/* Letzter Stand: hervorgehoben */
.dk.ls{background:var(--mint-hell);border-color:var(--mint);border-width:1px 1px 1px 6px}
.ls-text{font-size:17px;line-height:1.5;white-space:pre-line}
.ls-meta{font-size:13px;color:var(--leise);margin-top:8px!important}
.ls-meta.ls-kopf{margin:0 0 6px!important}
.ls-zitat{white-space:pre-line;font-size:14px;color:var(--leise);border-left:3px solid var(--mint);padding-left:10px;margin-top:8px!important}
.ls-danach{margin-top:12px!important;padding-top:12px;border-top:1px solid rgba(0,23,23,.12);font-size:14px}
.ls-hinweis{margin-top:14px!important;font-size:13px;font-weight:600}
.ls-alt{white-space:pre-line;font-size:14px;color:var(--leise)}
.ls-zug{margin-top:16px!important;font-size:14px;display:flex;gap:8px;flex-wrap:wrap;align-items:center}
details.leise-details{border-top:0;margin-top:10px}
details.leise-details>summary{font-weight:500;font-size:14px;color:var(--leise);padding:4px 0}

/* To-do */
ul.todos{list-style:none;margin:0 0 12px;padding:0}
ul.todos li{display:flex;align-items:center;gap:12px;padding:8px 0;border-top:1px solid var(--linie)}
ul.todos li:first-child{border-top:0}
ul.todos form{margin:0;display:flex}
.haken{width:26px;height:26px;flex:0 0 26px;border-radius:50%;border:2px solid var(--petrol);background:var(--weiss);cursor:pointer;padding:0;display:inline-grid;place-items:center;font:700 14px "Onest",system-ui,sans-serif;color:var(--petrol)}
.haken:hover{background:var(--mint-hell)}
.haken.an{background:var(--mint);border-color:var(--mint)}
.todo-text{flex:1;font-size:15px}
ul.todos.fertig .todo-text{text-decoration:line-through;color:var(--leise)}
ul.todos.fertig small{color:var(--leise);font-size:12px}
.neu-zeile{display:flex;gap:8px}
.neu-zeile input{flex:1}

/* Erinnerung */
.erinnerung-aktiv{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;border:1px solid var(--linie);border-radius:12px;padding:12px 14px;margin-bottom:6px}
.erinnerung-aktiv.faellig{border-color:var(--petrol);border-width:2px}
.erinnerung-aktiv p{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.erinnerung-aktiv form{margin:0}
.erinnerung-text{font-size:15px}
.marke-dunkel{background:var(--petrol);color:#fff;font-size:11px;font-weight:700;border-radius:6px;padding:1px 7px}
details.erinnerung-stellen{border-top:0;margin-top:8px}
details.erinnerung-stellen>summary{font-weight:600;font-size:14px;padding:6px 0}
.schnellwahl{display:flex;gap:8px;flex-wrap:wrap}
.chip-knopf{font:600 14px "Onest",system-ui,sans-serif;color:var(--petrol);background:var(--weiss);border:1px solid var(--petrol);border-radius:999px;padding:8px 16px;min-height:40px;cursor:pointer}
.chip-knopf:hover{background:var(--mint-hell)}

/* Stand-Chips */
.stand-chips{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 12px;padding:0;list-style:none}
.stand-chip{font:500 14px "Onest",system-ui,sans-serif;color:var(--petrol);background:var(--grund);border:1px solid var(--linie);border-radius:999px;padding:8px 16px;min-height:40px;display:inline-flex;align-items:center;gap:5px}
button.stand-chip{cursor:pointer}
a.stand-chip{text-decoration:none;cursor:pointer}
button.stand-chip:hover:not(:disabled),a.stand-chip:hover{border-color:var(--petrol);background:var(--mint-hell)}
.stand-chip.aktiv{background:var(--mint);border-color:var(--mint);font-weight:700}
button.stand-chip:disabled{cursor:default}
button.stand-chip:disabled:not(.aktiv){color:#5E7272;border-style:dashed}

/* Historie als Zeitleiste */
.notiz-form{display:grid;gap:8px;justify-items:start;margin-bottom:18px}
.notiz-form textarea{min-height:64px}
ol.zeitleiste{list-style:none;margin:0;padding:0}
.zl-tag h3{font-size:13px;font-family:"Onest",system-ui,sans-serif;font-weight:600;color:var(--leise);margin:18px 0 6px}
.zl-tag:first-child h3{margin-top:0}
.zl-eintrag{position:relative;padding:6px 0 12px 22px;border-left:2px solid var(--linie);margin-left:5px;font-size:14px}
.zl-eintrag::before{content:"";position:absolute;left:-7px;top:10px;width:12px;height:12px;border-radius:50%;background:var(--weiss);border:2px solid var(--linie)}
.zl-eintrag.zl-stand::before{background:var(--mint);border-color:var(--mint)}
.zl-eintrag.zl-aufgabe::before,.zl-eintrag.zl-schritt::before{border-color:var(--petrol)}
.zl-eintrag.zl-notiz::before{background:var(--petrol);border-color:var(--petrol)}
.zl-kopf{display:flex;gap:8px;flex-wrap:wrap;font-size:12px;color:var(--leise);margin-bottom:2px}
.zl-kopf b{color:var(--petrol)}
.zl-eintrag .text{white-space:pre-line}
.zl-eintrag details{border-top:0}
.zl-eintrag details>summary{padding:2px 0;font-weight:500}
.zl-eintrag details.mail{margin-top:2px}
#historie .altnotizen{margin:12px 0 0}

/* Kontaktdaten */
.kontakt-name{font-size:17px;font-weight:600}
.kontakt-weitere{margin-top:16px;padding-top:16px;border-top:1px solid var(--linie)}
dl.kontakt-daten{margin:10px 0 0;display:grid;grid-template-columns:auto minmax(0,1fr);gap:6px 14px;font-size:14px}
dl.kontakt-daten dt{color:var(--leise)}
dl.kontakt-daten dd{margin:0}
.kontakt-ort{margin-top:16px!important;padding-top:14px;border-top:1px solid var(--linie);font-size:14px}

/* Verträge: zwei feste Plätze */
ul.plaetze{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.platz{display:grid;grid-template-columns:auto minmax(0,1fr);gap:4px 12px;align-items:start;border:1px dashed #8FA5A0;border-radius:12px;padding:12px 14px}
.platz.da{border:1px solid var(--mint);background:var(--mint-hell)}
.platz-symbol{width:28px;height:28px;border-radius:8px;border:1px dashed #8FA5A0;display:grid;place-items:center;font-weight:700}
.platz.da .platz-symbol{background:var(--mint);border:0}
.platz-text{display:flex;flex-direction:column;gap:2px;font-size:14px}
.platz-text b{font-size:15px}
.platz-text small{color:var(--leise);font-size:12px}
.platz-link{font-weight:600}
.platz-text .unterschrieben{align-self:flex-start}
.platz details.hochladen{grid-column:2}
details.hochladen{border-top:0}
details.hochladen>summary{font-weight:500;font-size:13px;padding:4px 0;color:var(--leise)}
details.hochladen form{display:grid;gap:8px;justify-items:start;margin-top:6px}

/* Bilder */
ul.bilder{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
ul.bilder a{display:block}
ul.bilder img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:10px;display:block;background:var(--grund)}
ul.bilder a:hover img{outline:2px solid var(--petrol);outline-offset:1px}
ul.dateiliste{list-style:none;margin:6px 0 0;padding:0;font-size:14px;display:grid;gap:4px}
ul.dateiliste small{color:var(--leise)}
#bilder details.hochladen{margin-top:10px}

/* Mehr zur Fläche */
details.dk.mehr{padding:14px 24px}
details.dk.mehr>summary{font-weight:600;font-size:15px;padding:4px 0}
details.dk.mehr[open] dl{margin-top:10px}

@media (max-width:900px){
  /* Mobil untereinander: erst das Wichtigste, Kontaktdaten/Verträge/Bilder vor der langen Historie */
  .detail{display:flex;flex-direction:column;gap:16px}
  .detail-links,.detail-rechts{display:contents}
  #letzter-stand{order:1}#todo{order:2}#erinnerung{order:3}#stand{order:4}#notizen{order:4}#kontakt{order:5}#vertraege{order:6}#bilder{order:7}#historie{order:8}#mehr{order:9}
  .dk{padding:18px 16px;border-radius:14px}
  .fkopf h1{font-size:24px}
}
@media (max-width:420px){
  .neu-zeile{flex-direction:column}
  .stand-chip{padding:8px 13px}
  ul.bilder{grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* Kontaktdaten bearbeiten (Marcel, 07.10.2026): Stift oben rechts, Formular an Ort und Stelle */
.kontaktkarte{position:relative}
.kontaktkarte>h2{padding-right:48px}
details.kontakt-edit{border-top:0}
details.kontakt-edit>summary.stift{position:absolute;top:16px;right:16px;width:40px;height:40px;border-radius:50%;display:grid;place-items:center;list-style:none;cursor:pointer;padding:0;color:var(--petrol);border:1px solid var(--linie);background:var(--weiss)}
details.kontakt-edit>summary.stift::-webkit-details-marker{display:none}
details.kontakt-edit>summary.stift:hover{background:var(--mint-hell);border-color:var(--petrol)}
details.kontakt-edit[open]>summary.stift{background:var(--mint);border-color:var(--mint)}
.kontaktkarte:has(details.kontakt-edit[open]) .kontakt-anzeige{display:none}
.kontakt-form{display:grid;gap:2px}
.kontakt-form .feld{margin-bottom:12px}
.kontakt-form label{font-weight:600;font-size:14px}
.kf-zeile{display:grid;grid-template-columns:96px minmax(0,1fr);gap:10px}
.schalter{display:flex;gap:12px;align-items:flex-start;margin:4px 0 16px;cursor:pointer}
.schalter input{appearance:none;-webkit-appearance:none;flex:0 0 46px;width:46px;height:28px;border-radius:999px;background:#C9D6D2;position:relative;margin:0;cursor:pointer;transition:background .15s}
.schalter input::after{content:"";position:absolute;top:3px;left:3px;width:22px;height:22px;border-radius:50%;background:var(--weiss);box-shadow:0 1px 2px rgba(0,23,23,.3);transition:left .15s}
.schalter input:checked{background:var(--petrol)}
.schalter input:checked::after{left:21px}
.schalter-text{display:flex;flex-direction:column;font-weight:600;font-size:14px}
.schalter-text small{font-weight:400;color:var(--leise);font-size:12px}
.kontakt-form .knopfreihe{margin-top:0}
@media (prefers-reduced-motion:reduce){.schalter input,.schalter input::after{transition:none}}

/* Bilder entfernen (Marcel, 07.10.2026): X beim Überfahren/Fokus, auf Touch-Geräten immer leicht sichtbar */
ul.bilder li.bild{position:relative}
.bild-x{position:absolute;top:6px;right:6px;width:28px;height:28px;border-radius:50%;display:grid;place-items:center;background:rgba(255,255,255,.95);color:var(--petrol);box-shadow:0 1px 3px rgba(0,23,23,.35);opacity:0;transition:opacity .12s;text-decoration:none}
li.bild:hover .bild-x,.bild-x:focus-visible,li.bild:focus-within .bild-x{opacity:1}
.bild-x:hover{background:var(--weiss);outline:2px solid var(--petrol)}
@media (hover:none){.bild-x{opacity:.85;width:32px;height:32px}}
.rueckfrage{display:none;position:fixed;inset:0;z-index:50;background:rgba(0,23,23,.42);align-items:center;justify-content:center;padding:16px}
.rueckfrage:target{display:flex}
.rueckfrage-box{background:var(--weiss);border-radius:18px;padding:22px 22px 18px;width:min(340px,100%);text-align:center;box-shadow:0 18px 50px rgba(0,23,23,.3)}
.rueckfrage-box img{width:96px;height:96px;object-fit:cover;border-radius:12px;margin:0 auto 12px;display:block}
.rueckfrage-titel{font:700 18px "Gabarito","Onest",system-ui,sans-serif;margin:0 0 4px!important}
.rueckfrage-knoepfe{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:16px}
.rueckfrage-knoepfe form{margin:0;display:grid}
.rueckfrage-knoepfe .knopf{width:100%}
.knopf.dunkel{background:var(--petrol);border-color:var(--petrol);color:#fff}
.knopf.dunkel:hover{background:#0B3333;border-color:#0B3333}
.rueckgaengig{display:flex;justify-content:space-between;align-items:center;gap:8px;background:var(--mint-hell);border:1px solid var(--mint);border-radius:10px;padding:8px 12px;margin:0 0 12px;font-size:14px}
@media (prefers-reduced-motion:reduce){.bild-x{transition:none}}

/* Archiv (Marcel, 07.10.2026) */
.archiv-leise{margin:4px 0 0;text-align:right;font-size:13px}
.archiv-leise a{color:var(--leise)}
.archiv-band{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;margin-top:14px;padding:10px 14px;border:1px dashed var(--petrol);border-radius:12px;background:var(--weiss);font-size:14px}
.archiv-band form{margin:0}
.archivliste li{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:12px 16px}
.archivliste form{margin:0}
.archiv-zeile{display:flex;flex-direction:column;gap:2px}
.archiv-zeile .ort{text-decoration:none}
@media (max-width:900px){.archiv-leise{order:10}}
/* Spezifität: ul.bilder a / ul.bilder img würden X und Vorschau sonst überschreiben */
ul.bilder a.bild-x{display:grid}
ul.bilder .rueckfrage-box img{width:96px;height:96px;aspect-ratio:auto;border-radius:12px}
.dk .oben-klein{margin-top:10px}

/* Großansicht der Bilder (Marcel 09.10.2026): ohne JavaScript per :target. Klick neben das Bild oder × schließt,
   ‹ › blättern. Das große Bild lädt erst, wenn die Ansicht offen ist (loading="lazy" im verborgenen Block). */
.bildgross{display:none;position:fixed;inset:0;z-index:60;background:rgba(0,12,12,.92);color:#fff;padding:64px 76px 20px;align-items:center;justify-content:center}
.bildgross:target{display:flex}
body:has(.bildgross:target){overflow:hidden}
.bildgross-hinter{position:absolute;inset:0;cursor:zoom-out}
.bildgross-rahmen{position:relative;margin:0;display:flex;flex-direction:column;align-items:center;gap:10px;max-width:100%;max-height:100%;min-width:0;pointer-events:none}
.bildgross-rahmen img,.bildgross-rahmen figcaption{pointer-events:auto}
.bildgross-rahmen img{display:block;max-width:100%;max-height:calc(100vh - 150px);max-height:calc(100dvh - 150px);width:auto;height:auto;object-fit:contain;border-radius:8px;background:#0B2626}
.bildgross-rahmen figcaption{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:2px 14px;max-width:min(760px,100%);font-size:14px;text-align:center}
.bildgross-name{opacity:.92}
.bildgross-zahl{opacity:.7;white-space:nowrap}
.bildgross a{color:#fff}
.bildgross figcaption a{display:inline-flex;align-items:center;min-height:44px;padding:0 6px;font-weight:600}
.bildgross-zu,.bildgross-blaettern{position:absolute;display:grid;place-items:center;border-radius:50%;background:rgba(255,255,255,.16);text-decoration:none}
.bildgross-zu{top:12px;right:12px;width:48px;height:48px}
.bildgross-blaettern{top:50%;margin-top:-28px;width:56px;height:56px}
.bildgross-vor{left:12px}
.bildgross-nach{right:12px}
.bildgross-zu:hover,.bildgross-blaettern:hover{background:rgba(255,255,255,.3)}
.bildgross :focus-visible{outline-color:#fff}
@media (max-width:640px){
  .bildgross{padding:68px 10px 88px}
  .bildgross-rahmen img{max-height:calc(100vh - 230px);max-height:calc(100dvh - 230px)}
  .bildgross-blaettern{top:auto;bottom:16px;margin-top:0}
  .bildgross-vor{left:16px}
  .bildgross-nach{right:16px}
}

/* Verträge & Dokumente (Marcel, 07.10.2026): zwei Plätze mit grünem Haken, Rückfrage, ein Ablagefeld */
.kennung{font:500 13px "Onest",system-ui,sans-serif;color:var(--leise);letter-spacing:.02em;white-space:nowrap;vertical-align:middle}
h1 .kennung{font-size:14px;margin-left:6px}
ul.slots{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.slot{display:grid;grid-template-columns:28px minmax(0,1fr);gap:12px;align-items:start;padding:10px 0;border-top:1px solid var(--linie)}
.slot:first-child{border-top:0;padding-top:2px}
.slot-haken{width:26px;height:26px;border-radius:50%;border:2px solid #9FB3AE;display:grid;place-items:center;margin-top:1px}
.slot.da .slot-haken{background:var(--mint);border-color:var(--mint);color:var(--petrol)}
.slot-text{display:flex;flex-direction:column;gap:2px;font-size:14px}
.slot-titel{font-weight:600;font-size:15px}
.slot-meta{font-size:13px}
.slot-text .unterschrieben{align-self:flex-start}
.frage{margin-top:12px;padding:12px 14px;border:1px solid var(--petrol);border-radius:12px;background:var(--weiss)}
.frage>p{margin:0 0 10px!important;font-weight:600;font-size:14px}
.frage-datei{display:block;font-weight:400;font-size:13px;margin-bottom:2px}
.frage .schnellwahl{margin:0}
.frage .chip-knopf{font-size:13px;padding:6px 12px;min-height:36px}
.unterkopf{font:600 13px "Onest",system-ui,sans-serif;color:var(--leise);margin:16px 0 6px}
.ablage{display:grid;gap:8px;justify-items:stretch;margin-top:16px}
.ablage .knopf{justify-self:start}
.dropzone{position:relative;display:block;border:2px dashed #8FA5A0;border-radius:14px;background:var(--grund);padding:18px 14px;text-align:center;cursor:pointer;transition:background .12s,border-color .12s}
.dropzone:hover,.dropzone:has(input:focus-visible){border-color:var(--petrol);background:var(--mint-hell)}
.dropzone:has(input:focus-visible){outline:3px solid var(--petrol);outline-offset:2px}
.dropzone input{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer;font-size:0}
.dz-text,.dz-gewaehlt{display:flex;flex-direction:column;align-items:center;gap:4px;font-size:14px;pointer-events:none}
.dz-text small,.dz-gewaehlt small{color:var(--leise);font-size:12px}
.dz-gewaehlt{display:none}
.dropzone:has(input:valid){border-style:solid;border-color:var(--mint);background:var(--mint-hell)}
.dropzone:has(input:valid) .dz-text{display:none}
.dropzone:has(input:valid) .dz-gewaehlt{display:flex}
.bild-ohne-vorschau{aspect-ratio:1;border-radius:10px;background:var(--grund);border:1px solid var(--linie);display:flex!important;flex-direction:column;align-items:center;justify-content:center;text-decoration:none;font-weight:700}
.bild-ohne-vorschau small{font-weight:400;color:var(--leise);font-size:11px}
@media (prefers-reduced-motion:reduce){.dropzone{transition:none}}
/* Ergebnis der Ablage je Datei, Dateinamen (Marcel, 07.10.2026) */
ul.ablage-ergebnis{list-style:none;margin:0 0 14px;padding:10px 12px;border:1px solid var(--mint);background:var(--mint-hell);border-radius:12px;display:grid;gap:4px;font-size:13px}
.ablage-ergebnis li{display:flex;gap:6px;flex-wrap:wrap;align-items:baseline}
.ae-zeichen{width:16px;font-weight:700;text-align:center}
.ae-name{font-weight:600;overflow-wrap:anywhere}
.ablage-ergebnis .ae-fragen,.ablage-ergebnis .ae-fehler{font-weight:600}
.ablage-ergebnis .ae-fehler .ae-was{color:var(--fehler)}
.slot-datei{font-size:13px;overflow-wrap:anywhere}
ul.dateiliste.aeltere li{display:flex;flex-wrap:wrap;gap:4px 8px;align-items:baseline}
ul.dateiliste.aeltere form{margin:0}
.linkknopf.klein{font-size:12px}
/* X zum Löschen in Listen und an Plätzen (wie bei Bildern): Desktop beim Überfahren/Fokus, Touch immer leicht sichtbar */
.mit-x{position:relative}
.x-klein{display:inline-grid;place-items:center;width:26px;height:26px;border-radius:50%;color:var(--petrol);text-decoration:none;opacity:0;transition:opacity .12s;vertical-align:middle;margin-left:4px}
.mit-x:hover .x-klein,.x-klein:focus-visible,.mit-x:focus-within .x-klein{opacity:1}
.x-klein:hover{background:var(--grund);outline:1px solid var(--petrol)}
.slot.mit-x>.x-klein,.frage.mit-x>.x-klein{position:absolute;top:6px;right:0}
.frage.mit-x>.x-klein{top:8px;right:8px}
.slot.mit-x .slot-text{padding-right:28px}
@media (hover:none){.x-klein{opacity:.75;width:32px;height:32px}}
@media (prefers-reduced-motion:reduce){.x-klein{transition:none}}
/* Historie zugeklappt (Marcel 07.10.2026), Stil wie „Mehr zur Fläche“ */
details.dk.klapp{padding:14px 24px}
details.dk.klapp>summary{font-weight:600;font-size:15px;padding:4px 0;display:flex;align-items:baseline;gap:8px;list-style:none;cursor:pointer}
details.dk.klapp>summary::-webkit-details-marker{display:none}
details.dk.klapp>summary::before{content:"▸";font-size:15px;color:var(--petrol);transition:transform .12s;display:inline-block}
details.dk.klapp[open]>summary::before{transform:rotate(90deg)}
details.dk.klapp>summary small{font:500 13px "Onest",system-ui,sans-serif;color:var(--leise)}
.klapp-titel{font:700 18px "Gabarito","Onest",system-ui,sans-serif}
details.dk.klapp[open]>summary{margin-bottom:14px}
@media (max-width:900px){details.dk.klapp{padding:14px 16px}}
@media (prefers-reduced-motion:reduce){details.dk.klapp>summary::before{transition:none}}

/* Schritt 2 (09.10.2026): Briefsymbol in der Kopfzeile (details/summary, ohne JavaScript) */
details.post{position:relative;border-top:0;margin-left:auto}
details.post + .wer{margin-left:0}
details.post>summary{list-style:none;padding:0;margin:0}
details.post>summary::-webkit-details-marker{display:none}
.post-knopf{position:relative;display:grid;place-items:center;width:42px;height:42px;border-radius:10px;cursor:pointer}
.post-knopf:hover,details.post[open]>.post-knopf{background:var(--mint-hell)}
.post-zahl{position:absolute;top:2px;right:0;min-width:20px;height:20px;padding:0 5px;border-radius:10px;background:var(--fehler);color:#fff;font:700 12px/20px "Onest",system-ui,sans-serif;text-align:center}
.post-liste{position:absolute;right:0;top:calc(100% + 6px);z-index:40;width:min(360px,calc(100vw - 32px));background:var(--weiss);border:1px solid var(--linie);border-radius:14px;box-shadow:0 14px 40px rgba(0,23,23,.18);padding:12px}
.post-titel{font:700 15px "Gabarito","Onest",system-ui,sans-serif;margin:2px 6px 8px}
.post-liste ul{list-style:none;margin:0;padding:0;max-height:min(60vh,420px);overflow-y:auto}
.post-liste a{display:grid;grid-template-columns:1fr auto;gap:0 10px;padding:9px 8px;border-radius:10px;text-decoration:none}
.post-liste a:hover,.post-liste a:focus-visible{background:var(--mint-hell)}
.post-name{font-weight:600}
.post-ort{grid-column:1;font-size:13px;color:var(--leise)}
.post-liste time{grid-column:2;grid-row:1 / span 2;align-self:center;font-size:13px;color:var(--leise);white-space:nowrap}
.post-leer{margin:4px 6px 6px;color:var(--leise)}
@media (max-width:760px){details.post{margin-left:auto}.post-liste{right:-8px}}

/* Abschnitt „Nachrichten“ als Unterhaltung */
.nachrichten{display:grid;gap:12px}
.nachrichten>h2{margin-bottom:2px}
.nachricht details{border:1px solid var(--linie);border-radius:14px;padding:0 14px;background:var(--weiss)}
.nachricht details>summary{list-style:none;padding:10px 0;font-weight:400}
.nachricht details>summary::-webkit-details-marker{display:none}
.nachricht.n-eigentuemer details{background:var(--mint-hell);border-color:var(--mint);margin-right:8%}
.nachricht.n-uns details{margin-left:8%}
.nachricht.n-dritte details{background:var(--grund);margin-right:8%}
.nachricht.n-rueck details{background:var(--fehler-hell);border-color:var(--fehler);margin-right:8%}
.nachricht.n-neu details{border-width:2px}
.n-kopf{display:flex;gap:8px;align-items:baseline;flex-wrap:wrap;font-size:14px}
.n-kopf small{color:var(--leise)}
.n-zeit{margin-left:auto;color:var(--leise);font-size:13px}
.n-betreff{display:block;font-size:14px;margin-top:2px}
.nachricht .vorschau{display:block;white-space:pre-line;color:var(--leise);font-size:13px;margin-top:4px}
.marke-neu{font-size:11px;font-weight:700;background:var(--petrol);color:#fff;border-radius:5px;padding:0 6px}
.n-anhaenge{list-style:none;margin:0 0 10px;padding:0;display:flex;flex-wrap:wrap;gap:6px}
.n-anhaenge a{display:inline-flex;gap:4px;align-items:center;font-size:13px;border:1px solid var(--linie);border-radius:8px;padding:3px 8px;background:var(--weiss);text-decoration:none}
.n-anhaenge a:hover{border-color:var(--petrol)}
.aeltere-mails{display:grid;gap:8px}
.aeltere-mails .feld-label{margin:6px 0 0;color:var(--leise);font-weight:500}
.geplant-band{display:flex;gap:10px;align-items:center;flex-wrap:wrap;border:1px solid var(--petrol);border-radius:12px;padding:10px 12px;background:var(--weiss)}
.geplant-band span{flex:1 1 220px}
.geplant-band form{margin:0}
.band p{margin:0}
.band.klein{font-size:13px;font-weight:500;margin:8px 0 0;text-align:left}
details.antworten{border:1px solid var(--petrol);border-radius:14px;padding:0 14px;background:var(--weiss)}
details.antworten>summary{padding:12px 0;font-weight:700}
details.antworten[open]{padding-bottom:14px}
.antwort-form{display:grid;gap:12px}
.antwort-form .feld{margin:0}
.antwort-form textarea{min-height:200px}
.antwort-form select,.antwort-form input[type=text],.antwort-form textarea{width:100%}
.anhang-liste{list-style:none;margin:0;padding:0;display:grid;gap:6px;font-size:14px}
.anhang-liste li{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
details.anhang-dazu,details.verwerfen{border-top:0}
details.anhang-dazu>summary,details.verwerfen>summary{font-weight:500;font-size:14px;color:var(--leise);padding:2px 0}
details.anhang-dazu[open]{display:grid;gap:6px}
.pruefhinweis{font-size:13px;color:var(--leise);border-left:3px solid var(--mint);padding-left:8px}
.antwort-knoepfe{display:flex;gap:8px;flex-wrap:wrap}
.planen-zeile{display:flex;gap:8px;align-items:flex-end;flex-wrap:wrap}
.planen-zeile .feld{flex:0 1 240px}
.rueckfrage-box.breit{width:min(520px,100%);text-align:left}
.rueckfrage-box.breit .rueckfrage-titel{text-align:left}
.rueckfrage-vorschau{white-space:pre-wrap;font-size:13px;max-height:30vh;overflow-y:auto;border:1px solid var(--linie);border-radius:10px;padding:8px 10px;margin-top:10px;background:var(--grund)}
@media (max-width:900px){#nachrichten{order:1}.nachricht.n-eigentuemer details,.nachricht.n-dritte details,.nachricht.n-rueck details{margin-right:0}.nachricht.n-uns details{margin-left:0}}
.schalterliste{margin:8px 0;padding-left:18px;display:grid;gap:6px}
.n-original{margin:0 0 10px;font-size:13px}
/* „Erledigt, keine Antwort nötig“ (Marcel 09.10.2026): ruhiger Knopf auf der Karte und unter der neuesten Mail */
.knopf.erledigt-knopf{border-color:var(--linie);font-weight:500;white-space:normal;text-align:center}
.knopf.erledigt-knopf:hover{border-color:var(--petrol)}
.erledigt-zeile{margin:-4px 0 0}

/* Einstellungen: „Wer darf in die App?“ (09.10.2026) */
.benutzerliste{list-style:none;margin:12px 0;padding:0}
.benutzerliste li{display:flex;flex-wrap:wrap;align-items:center;gap:6px 14px;padding:10px 0;border-top:1px solid var(--linie)}
.benutzerliste li:first-child{border-top:0}
.benutzerliste li.gesperrt .b-wer{opacity:.7}
.benutzerliste .b-wer{flex:1 1 260px;min-width:0}
.benutzerliste .b-wer .leise{display:block;font-size:13px}
.benutzerliste .b-rolle{flex:0 0 auto}
.benutzerliste .b-knoepfe{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px}
.benutzerliste .b-knoepfe form{margin:0}
.b-mehr summary,.b-neu summary{cursor:pointer;text-decoration:underline}
.b-mehr form{margin-top:6px}
.b-neu{margin-top:10px}
.b-neu form{margin-top:10px}
.weitere-flaechen{margin-top:14px;padding-top:12px;border-top:1px solid var(--linie);font-size:14px}
.weitere-flaechen p{margin:0 0 4px}
.weitere-flaechen ul{margin:0;padding-left:18px}
.weitere-flaechen li{margin:2px 0}
.benutzerliste details.b-mehr{border-top:0}
.benutzerliste details.b-mehr>summary{padding:0}
/* Erzeugtes Passwort (einmalige Anzeige, Auftrag Nach-Review-1b) */
.pw-anzeige{margin:8px 0 14px}
.pw-anzeige code{display:block;font-family:ui-monospace,Menlo,monospace;font-size:clamp(17px,4.6vw,24px);letter-spacing:.06em;background:var(--weiss);border:2px solid var(--petrol);border-radius:10px;padding:12px 14px;user-select:all}
.pw-anzeige code span{display:inline-block;white-space:nowrap}
.pw-hinweise{margin:0 0 16px;padding-left:20px}
.pw-hinweise li{margin:4px 0}
.b-zweifaktor{font-size:12px;color:var(--leise)}
.b-mehr .b-aktionen{display:flex;flex-direction:column;gap:8px;margin-top:6px}
.b-mehr .b-aktionen form{margin:0}