/* Oberfläche des Verwaltungspanels (Neuaufbau 04.10.2026, siehe BRIEF.md).
 *
 * Aufbau: Seitenleiste (Rechner) bzw. untere Leiste (Handy), darin die Bereiche
 * Heute, Kunden, Seiten, Server, Buchhaltung, Website-Check, Konto.
 * Kein JavaScript (CSP script-src 'none'): Menüs sind Links und <details>.
 *
 * Hinweis: 'unsafe-inline' bleibt vorerst in der CSP. Einzelne Ansichten nutzen
 * style-Attribute direkt am Element; die müssten erst in Klassen wandern.
 */
:root{
  color-scheme:dark;
  --ground:#0F1419;--surface:#161C23;--surface-2:#1C242D;--line:#242E38;
  --ink:#E6EDF3;--ink-2:#AAB7C4;--ink-3:#8493A1;
  --signal:#E8A33D;--ok:#4EAE7B;--warn:#D9A441;--fehl:#E07A7A;
  --f-d:'Archivo',ui-sans-serif,system-ui,sans-serif;
  --f-b:'IBM Plex Sans',ui-sans-serif,system-ui,sans-serif;
  --f-m:'IBM Plex Mono',ui-monospace,Menlo,monospace;
  --r:10px;--leiste:236px;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--ground);color:var(--ink);font-family:var(--f-b);
  font-size:15px;line-height:1.6;-webkit-font-smoothing:antialiased;overflow-wrap:break-word}
/* Kurze Angaben (Groesse, Zustand, Zahlen) nie mitten im Wort umbrechen; sehr lange Zeichenketten duerfen es. */
th,.nowrap,td.mono{white-space:nowrap}
td.mono{overflow-wrap:normal}
.lang{overflow-wrap:anywhere}
.wrap{max-width:1040px;margin-inline:auto;padding-inline:24px}
a{color:var(--signal)}
h1,h2,h3{font-family:var(--f-d);font-weight:600;letter-spacing:-.015em;margin:0}
h1{font-size:1.45rem;line-height:1.25}
h2{font-size:1.02rem;margin-bottom:12px}
h3{font-size:.95rem}
code{font-family:var(--f-m);font-size:.86em;color:var(--ink-2)}

/* ── Rahmen: Seitenleiste + Inhalt ─────────────────────────────────────── */
.app{display:grid;grid-template-columns:var(--leiste) minmax(0,1fr);min-height:100vh}
.seitenleiste{position:sticky;top:0;height:100vh;overflow-y:auto;background:var(--surface);
  border-right:1px solid var(--line);padding:18px 12px 14px;display:flex;flex-direction:column;gap:2px}
.marke{display:flex;align-items:center;gap:10px;padding:4px 12px 18px;font:600 1.05rem/1.2 var(--f-d);
  color:var(--ink);text-decoration:none}
.marke small{display:block;font:400 .74rem/1.3 var(--f-b);color:var(--ink-3)}
.dot{width:10px;height:10px;border-radius:50%;flex:none}
.dot.ok{background:var(--ok);box-shadow:0 0 0 3px color-mix(in srgb,var(--ok) 22%,transparent)}
.dot.warn{background:var(--warn);box-shadow:0 0 0 3px color-mix(in srgb,var(--warn) 22%,transparent)}
.dot.fehl{background:var(--fehl);box-shadow:0 0 0 3px color-mix(in srgb,var(--fehl) 22%,transparent)}
.nav{display:flex;flex-direction:column;gap:2px}
.nav a,.nav button.alslink{display:flex;align-items:center;justify-content:space-between;gap:8px;width:100%;
  min-height:44px;padding:0 12px;border-radius:8px;color:var(--ink-2);text-decoration:none;font-size:.95rem;
  transition:background-color .15s,color .15s}
.nav a:hover,.nav button.alslink:hover{background:var(--surface-2);color:var(--ink);text-decoration:none}
.nav a[aria-current=page]{background:var(--surface-2);color:var(--ink);font-weight:600;box-shadow:inset 3px 0 0 var(--signal)}
.nav .trenner{height:1px;background:var(--line);margin:8px 6px}
.nav .unten{margin-top:auto}
.badge{min-width:22px;padding:1px 7px;border-radius:999px;background:var(--signal);color:#20170A;
  font:700 .72rem/1.5 var(--f-m);text-align:center;font-variant-numeric:tabular-nums}
.badge.still{background:var(--surface-2);color:var(--ink-2);border:1px solid var(--line)}
.inhalt{min-width:0}
main{padding-block:28px 64px}
.mobilkopf,.unterleiste{display:none}

/* ── Seitenkopf und Unterreiter ────────────────────────────────────────── */
.seitenkopf{display:flex;align-items:baseline;justify-content:space-between;gap:8px 16px;flex-wrap:wrap;margin:0 0 6px}
.seitenkopf+.untertitel{margin:0 0 20px;color:var(--ink-3);font-size:.9rem}
.unterreiter{display:flex;gap:2px;margin:14px 0 24px;border-bottom:1px solid var(--line);overflow-x:auto;overflow-y:hidden;
  scrollbar-width:none}
.unterreiter::-webkit-scrollbar{display:none}
.unterreiter a{display:inline-flex;align-items:center;gap:8px;white-space:nowrap;min-height:44px;padding:0 14px;
  color:var(--ink-2);text-decoration:none;border-bottom:2px solid transparent;margin-bottom:-1px}
.unterreiter a:hover{color:var(--ink)}
.unterreiter a[aria-current=page]{color:var(--ink);border-bottom-color:var(--signal);font-weight:600}

/* ── Karten und Kacheln ────────────────────────────────────────────────── */
.karten{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:12px;margin-bottom:22px}
.kachel{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:14px 16px;
  transition:border-color .15s}
.kachel:hover{border-color:var(--ink-3)}
.kachel .z{font-family:var(--f-m);font-size:1.7rem;line-height:1.1;font-variant-numeric:tabular-nums}
.kachel .b{font-size:.76rem;color:var(--ink-3);margin-top:5px;text-transform:uppercase;letter-spacing:.07em;font-family:var(--f-m)}
.kachel.ok .z{color:var(--ok)} .kachel.warn .z{color:var(--warn)} .kachel.fehl .z{color:var(--fehl)}
.block{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:20px 22px;margin-bottom:18px}
.block h2{display:flex;align-items:baseline;gap:10px}
.aus{background:var(--ground);border:1px solid var(--line);border-radius:7px;padding:14px 15px;
  font-family:var(--f-m);font-size:.79rem;line-height:1.7;white-space:pre-wrap;word-break:break-word;
  max-height:420px;overflow:auto;margin:0}
.aus .ok{color:var(--ok)} .aus .warn{color:var(--warn)} .aus .fehl{color:var(--fehl)} .aus .normal{color:var(--ink-2)}

/* ── Startseite "Heute" ────────────────────────────────────────────────── */
.ampel{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:6px 18px;align-items:center;
  background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:22px 24px;margin-bottom:16px;
  border-left-width:4px}
.ampel.ok{border-left-color:var(--ok)} .ampel.warn{border-left-color:var(--warn)} .ampel.fehl{border-left-color:var(--fehl)}
.ampel .dot{width:18px;height:18px}
.ampel h1{font-size:1.5rem}
.ampel .stand{color:var(--ink-3);font-size:.85rem;margin:2px 0 0}
.ampel form{margin:0}
.ampel+.karten{margin-top:0}
.massnahmen{margin:-4px 0 16px}
.aufgaben{display:grid;gap:10px;margin:0 0 22px;padding:0;list-style:none}
.aufgabe{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:2px 16px;align-items:center;min-height:64px;
  padding:14px 18px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);
  color:var(--ink);text-decoration:none;transition:border-color .15s,background-color .15s}
.aufgabe:hover{border-color:var(--ink-3);background:var(--surface-2)}
.aufgabe strong{font-weight:600}
.aufgabe .was{color:var(--ink-3);font-size:.86rem}
.aufgabe .zahl{font:600 1.5rem/1 var(--f-m);color:var(--signal);font-variant-numeric:tabular-nums}
.aufgabe.fehl{border-left:3px solid var(--fehl)} .aufgabe.fehl .zahl{color:var(--fehl)}
.aufgabe.warn{border-left:3px solid var(--warn)}
.alles-gut{display:flex;gap:14px;align-items:center;padding:18px 20px;border-radius:var(--r);margin:0 0 22px;
  background:color-mix(in srgb,var(--ok) 10%,var(--surface));border:1px solid color-mix(in srgb,var(--ok) 32%,transparent)}
.abschnitt{margin:26px 0 10px;font:600 .74rem/1 var(--f-m);letter-spacing:.09em;text-transform:uppercase;color:var(--ink-3)}
.schnell{display:flex;flex-wrap:wrap;gap:9px;margin:0 0 6px}

/* ── Tabellen ──────────────────────────────────────────────────────────── */
table{width:100%;border-collapse:collapse;font-size:.9rem}
th,td{text-align:left;padding:10px 12px;border-bottom:1px solid var(--line);vertical-align:top}
th{font-family:var(--f-m);font-size:.71rem;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3);font-weight:400}
td.mono{font-family:var(--f-m);font-size:.84rem;color:var(--ink-2)}
tr:last-child td{border-bottom:0}
tbody tr{transition:background-color .12s}
tbody tr:hover{background:color-mix(in srgb,var(--surface-2) 70%,transparent)}

/* ── Knöpfe und Felder ─────────────────────────────────────────────────── */
form.inline{display:inline}
button.alslink{font:inherit;border:0;border-radius:0;padding:0;background:none;color:var(--signal);cursor:pointer;
  text-decoration:none;display:inline;min-height:0}
button.alslink:hover{text-decoration:underline}
button,.btn{font:600 .87rem/1 var(--f-b);border:1px solid var(--line);border-radius:8px;padding:10px 15px;
  background:var(--surface-2);color:var(--ink);cursor:pointer;text-decoration:none;display:inline-flex;
  align-items:center;gap:7px;min-height:44px;
  transition:background-color .15s,border-color .15s,transform .12s}
button:not([disabled]):hover,.btn:hover{background:var(--line);border-color:var(--ink-3)}
button:not([disabled]):active,.btn:active{transform:translateY(1px)}
button.haupt,.btn.haupt{background:var(--signal);border-color:var(--signal);color:#20170A}
button.haupt:hover,.btn.haupt:hover{background:#F2B355;border-color:#F2B355}
button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,a:focus-visible,summary:focus-visible{
  outline:2px solid var(--signal);outline-offset:2px;border-radius:6px}
button[disabled]{opacity:.5;cursor:not-allowed}
.knopfreihe{display:flex;flex-wrap:wrap;gap:9px}
.knopfreihe button{white-space:nowrap}
.gefahr-btn{color:var(--fehl);border-color:color-mix(in srgb,var(--fehl) 38%,var(--line))}
button.gefahr-btn:not([disabled]):hover{background:color-mix(in srgb,var(--fehl) 14%,var(--surface-2));border-color:var(--fehl);color:#F2A0A0}
input[type=text],input[type=password],input[type=date],input[type=email],input[type=number],textarea,select{
  font:400 .9rem/1.5 var(--f-b);background:var(--ground);color:var(--ink);border:1px solid var(--line);
  border-radius:8px;padding:10px 12px;width:100%;min-height:44px}
input[type=checkbox]{width:18px;height:18px;accent-color:var(--signal);vertical-align:-3px;margin-right:6px}
/* Kaestchen mit Beschriftung: die ganze Zeile ist die Klickflaeche (mindestens 44 px) */
label:has(>input[type=checkbox]){display:inline-flex;align-items:center;gap:8px;min-height:44px;padding-right:10px;cursor:pointer}
label:has(>input[type=checkbox])>input{margin:0}
textarea{line-height:1.55;resize:vertical;min-height:6em;font-family:var(--f-b)}
input[type=date]::-webkit-calendar-picker-indicator{filter:invert(.8)}
.feldreihe{display:flex;gap:9px;flex-wrap:wrap;align-items:end}
.feld{display:grid;gap:5px;min-width:200px;flex:1}
.feld label{font-size:.82rem;color:var(--ink-3)}

/* ── Meldungen ─────────────────────────────────────────────────────────── */
.meldung{border-radius:8px;padding:12px 15px;margin-bottom:18px;font-size:.9rem}
.meldung.fehler{background:color-mix(in srgb,var(--fehl) 12%,var(--surface));border:1px solid color-mix(in srgb,var(--fehl) 35%,transparent);color:var(--ink)}
.meldung.ok{background:color-mix(in srgb,var(--ok) 12%,var(--surface));border:1px solid color-mix(in srgb,var(--ok) 35%,transparent);color:var(--ink)}
.meldung.info{background:var(--surface);border:1px solid var(--line);color:var(--ink-2)}
.hinweis{font-size:.83rem;color:var(--ink-3);margin-top:10px}
.gefahr{border-left:2px solid var(--signal);padding-left:13px;margin-top:14px;font-size:.85rem;color:var(--ink-2)}
.ergebnis{margin:12px 0}
.ergebnis h3{font-family:var(--f-d);font-weight:600;font-size:.95rem;margin:0 0 8px;color:var(--ink-2)}

/* ── Anmeldung ─────────────────────────────────────────────────────────── */
.anmeldung{max-width:360px;margin:16vh auto 0}
.anmeldung .block{padding:26px}
.anmeldung h1{margin-bottom:6px}
.anmeldung p{color:var(--ink-3);font-size:.88rem;margin:0 0 20px}
.anmeldung .feld{margin-bottom:16px}
.anmeldung button{width:100%;justify-content:center}

/* ── Fortschritt eines Hintergrundlaufs ────────────────────────────────── */
.balken{height:8px;background:var(--surface-2);border:1px solid var(--line);border-radius:6px;overflow:hidden;margin:4px 0 10px}
.balken>i{display:block;height:100%;background:var(--signal);border-radius:6px;transition:width .4s linear}
.balken.fertig>i{background:var(--ok)}
.balken.gescheitert>i{background:var(--fehl)}
.balken.unbestimmt>i{width:32%;animation:wandern 1.5s ease-in-out infinite}
@keyframes wandern{from{margin-left:-32%}to{margin-left:100%}}
@media(prefers-reduced-motion:reduce){
  .balken.unbestimmt>i{animation:none;width:100%;opacity:.45}
  *{transition:none!important}
}
.schritte{display:flex;gap:10px;align-items:baseline;flex-wrap:wrap;font-size:.85rem;color:var(--ink-2)}
.schritte .jetzt{font-family:var(--f-m);color:var(--ink)}

/* ── Reiter der Zustandsseite (ohne JavaScript: Radio-Knöpfe + Labels) ─── */
.ztabs{position:relative}
.ztabs>input.zt-r{position:absolute;opacity:0;pointer-events:none}
.zt-leiste{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 12px}
.zt-leiste label{cursor:pointer;padding:10px 13px;min-height:44px;display:inline-flex;align-items:center;
  border:1px solid var(--line);border-radius:8px;font-size:.85rem;color:var(--ink-2);background:var(--surface-2)}
.zt-leiste label:hover{border-color:var(--ink-3)}
.zt-leiste label.warn::after{content:" \25CF";color:var(--warn)}
.zt-leiste label.fehl::after{content:" \25CF";color:var(--fehl)}
.zt-p{display:none}

/* ── Bis 900 px: Seitenleiste weg, obere Marke + untere Leiste ─────────── */
@media(max-width:900px){
  .app{display:block}
  .seitenleiste{display:none}
  .wrap{padding-inline:16px}
  main{padding-block:18px 110px}
  .mobilkopf{display:flex;align-items:center;gap:10px;padding:12px 16px;background:var(--surface);
    border-bottom:1px solid var(--line);font:600 1rem var(--f-d)}
  .mobilkopf .rechts{margin-left:auto;font:400 .8rem var(--f-b);color:var(--ink-3)}
  .unterleiste{display:grid;grid-template-columns:repeat(5,1fr);position:fixed;left:0;right:0;bottom:0;z-index:20;
    background:var(--surface);border-top:1px solid var(--line);padding-bottom:env(safe-area-inset-bottom,0px)}
  .unterleiste>a,.unterleiste summary{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;
    min-height:58px;padding:6px 2px;font-size:.74rem;color:var(--ink-2);text-decoration:none;list-style:none;cursor:pointer;
    position:relative}
  .unterleiste summary::-webkit-details-marker{display:none}
  .unterleiste a[aria-current=page],.unterleiste details.aktiv>summary{color:var(--ink);box-shadow:inset 0 3px 0 var(--signal)}
  .unterleiste .badge{position:absolute;top:4px;left:calc(50% + 6px);min-width:18px;font-size:.66rem;padding:0 5px}
  .unterleiste details{position:relative}
  .unterleiste details[open]>summary{color:var(--ink);background:var(--surface-2)}
  .mehr-liste{position:absolute;right:0;bottom:100%;min-width:220px;background:var(--surface-2);
    border:1px solid var(--line);border-radius:10px 10px 0 0;padding:6px;box-shadow:0 -8px 24px rgba(0,0,0,.4)}
  .mehr-liste a,.mehr-liste button.alslink{display:flex;align-items:center;min-height:48px;padding:0 14px;border-radius:8px;
    color:var(--ink);text-decoration:none;width:100%;font-size:.95rem}
  .mehr-liste a:hover,.mehr-liste a[aria-current=page]{background:var(--line)}
  .ampel{grid-template-columns:auto minmax(0,1fr);padding:18px}
  .ampel form{grid-column:1 / -1}
  .ampel form button{width:100%;justify-content:center}
  .app.heute .mobilkopf{display:none}
  table{display:block;max-width:100%;overflow-x:auto}
  .block{padding:16px}
  .feld{min-width:0}
}
@media(max-width:620px){.feldreihe{flex-direction:column;align-items:stretch}.karten{grid-template-columns:repeat(2,1fr)}}

/* ── Handy: Tabellenzeilen stapeln (Beschriftung aus data-label, siehe lib/tabellen.php) ── */
@media(max-width:720px){
  table,tbody,tr,td{display:block;width:100%}
  thead,tr:has(>th){display:none}
  tr{padding:12px 0;border-bottom:1px solid var(--line)}
  tr:last-child{border-bottom:0}
  td{display:flex;gap:12px;align-items:baseline;justify-content:space-between;border:0;padding:4px 0;text-align:right!important}
  td::before{content:attr(data-label);flex:0 0 38%;max-width:38%;text-align:left;color:var(--ink-3);
    font:400 .72rem/1.4 var(--f-m);letter-spacing:.06em;text-transform:uppercase}
  td[data-label=""]::before{display:none}
  td>form,td>.knopfreihe{margin-left:auto}
  td:first-child{justify-content:flex-start;text-align:left!important;font-weight:600;font-size:1rem}
  td:first-child::before{display:none}
  td:empty{display:none}
  td a{display:inline-flex;align-items:center;min-height:44px}
}

/* ── Aufklappbares: Erklaerung und "Mehr"-Knoepfe ── */
.erklaerung{margin:0 0 14px;font-size:.88rem;color:var(--ink-2)}
.erklaerung summary{cursor:pointer;min-height:44px;display:flex;align-items:center;color:var(--ink-3)}
.erklaerung p{margin:0 0 6px;padding:10px 14px;border:1px solid var(--line);border-radius:10px;background:var(--surface)}
.mehr-knoepfe summary{list-style:none;cursor:pointer}
.mehr-knoepfe summary::-webkit-details-marker{display:none}
.mehr-knoepfe[open]{flex-basis:100%}
.mehr-knoepfe .knopfreihe{margin-top:8px}

/* Sprunglink fuer Tastatur und Vorleseprogramme: erst beim Fokus sichtbar */
.skip{position:absolute;left:-999px;top:8px;z-index:50;background:var(--signal);color:#20170A;padding:10px 16px;border-radius:8px;font-weight:600;text-decoration:none}
.skip:focus{left:8px}

/* ── Seiten verwalten: eine Karte je Seite statt enger Tabelle ── */
.sitekarten{display:grid;gap:12px}
.sitekarte{border:1px solid var(--line);border-radius:var(--r);padding:14px 16px;background:var(--surface-2)}
.sitekarte.pausiert{border-left:3px solid var(--warn)}
.sitekopf{display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px;margin-bottom:10px}
.sitename{font:600 1rem var(--f-b)}
.sitemb{margin-left:auto;color:var(--ink-3);font:.84rem var(--f-m)}
.gefahrenzone{margin-top:10px}
.gefahrenzone summary{cursor:pointer;min-height:44px;display:flex;align-items:center;color:var(--ink-3);font-size:.88rem}
.gefahrenfelder{display:flex;flex-wrap:wrap;gap:10px 18px;align-items:center;padding:10px 0 2px}
.gefahrenfelder input[type=text]{width:min(100%,280px)}

/* Filter-Chips (z. B. Rechnungen: offen, bezahlt ...) */
.chips{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 16px}
.chips a{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 14px;border:1px solid var(--line);
  border-radius:999px;color:var(--ink-2);text-decoration:none;background:var(--surface)}
.chips a:hover{border-color:var(--ink-3);color:var(--ink)}
.chips a[aria-current=page]{border-color:var(--signal);color:var(--ink);font-weight:600}
a.kachel{display:block}

/* ── Statuspillen (lib/ui.php): Werte auf einen Blick statt "a · b · c" ── */
.pillen{display:flex;flex-wrap:wrap;gap:8px;margin:8px 0 16px}
.pille{display:inline-flex;align-items:center;gap:6px;min-height:28px;padding:3px 12px;border-radius:999px;
  font:600 .82rem/1.3 var(--f-b);border:1px solid transparent;white-space:nowrap;background:var(--surface-2);color:var(--ink-2)}
.pille .pl{font-weight:400;opacity:.85}
.pille.gruen{background:color-mix(in srgb,var(--ok) 16%,transparent);color:#7fd1a3;border-color:color-mix(in srgb,var(--ok) 35%,transparent)}
.pille.rot{background:color-mix(in srgb,var(--fehl) 16%,transparent);color:#f0a0a0;border-color:color-mix(in srgb,var(--fehl) 40%,transparent)}
.pille.orange{background:color-mix(in srgb,var(--warn) 16%,transparent);color:#e8c068;border-color:color-mix(in srgb,var(--warn) 38%,transparent)}
.pille.blau{background:color-mix(in srgb,#5b9bd5 16%,transparent);color:#9cc4ec;border-color:color-mix(in srgb,#5b9bd5 38%,transparent)}
.pille.grau{background:var(--surface-2);color:var(--ink-2);border-color:var(--line)}

/* ── Rechnungen im Kundenprofil: eine Karte je Rechnung, Aktionen darunter ── */
.rechnungen{display:grid;gap:12px;margin:8px 0 12px}
.rechnung{border:1px solid var(--line);border-radius:var(--r);padding:14px 16px;background:var(--surface-2)}
.rkopf{display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px}
.rkopf code{font-size:.95rem;color:var(--ink)}
.rbetrag{margin-left:auto;font:600 1.1rem var(--f-m);font-variant-numeric:tabular-nums;white-space:nowrap}
.rmeta{margin:6px 0 10px;color:var(--ink-3);font-size:.88rem}
.raktionen{display:flex;flex-wrap:wrap;gap:8px 14px;align-items:center}
.raktionen form.inline{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.raktionen input[type=date]{width:auto;min-width:9.5rem}
/* Abstand zwischen Formularzeilen und vor dem Absendeknopf */
.feldreihe+.feldreihe,.feldreihe+button{margin-top:12px}

/* Aufklapp-Pfeil auch dort, wo die Zusammenfassung ein Flex-Element ist (sonst verschwindet das Standard-Zeichen) */
.erklaerung summary::before,.gefahrenzone summary::before{content:"\25B8";display:inline-block;margin-right:8px;transition:transform .15s}
.erklaerung[open]>summary::before,.gefahrenzone[open]>summary::before{transform:rotate(90deg)}
/* Leerzustand: freundlicher Kasten statt einer kleinen grauen Zeile */
.leer{padding:22px 24px;border:1px dashed var(--line);border-radius:var(--r);color:var(--ink-2);background:var(--surface)}
.leer strong{color:var(--ink)}

/* Start-Anfragen: Angaben als Raster */
.angaben{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:10px 24px;margin:10px 0 6px}
.angaben dt{color:var(--ink-3);font-size:.78rem;text-transform:uppercase;letter-spacing:.06em;font-family:var(--f-m)}
.angaben dd{margin:2px 0 0;color:var(--ink)}
.nachricht{white-space:pre-line;margin:8px 0;padding:12px 14px;border-left:3px solid var(--line);background:var(--surface);border-radius:0 8px 8px 0;color:var(--ink-2)}

/* Assistent "Website einrichten": Fortschritt und Pruefliste */
.stepper{list-style:none;display:flex;flex-wrap:wrap;gap:6px 18px;margin:6px 0 16px;padding:0;font-size:.9rem;color:var(--ink-2)}
.stepper li{display:flex;align-items:center;gap:8px}
.stepper .nr{display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;border-radius:50%;border:1px solid var(--line);background:var(--surface-2);font-family:var(--f-m);font-size:.8rem}
.stepper .getan{color:var(--ink)}
.stepper .getan .nr{background:var(--ok);border-color:var(--ok);color:var(--surface)}
.stepper .jetzt{color:var(--ink);font-weight:600}
.stepper .jetzt .nr{background:var(--signal);border-color:var(--signal);color:var(--surface)}
.pruefliste{display:flex;flex-direction:column;gap:8px;margin:8px 0}
.pruefzeile{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;padding:10px 12px;border:1px solid var(--line);border-radius:8px;background:var(--surface)}
.pruefzeile .hinweis{margin:2px 0 0}
.kundentext{white-space:pre-wrap;word-break:break-word;background:var(--surface-2);border:1px solid var(--line);border-radius:8px;padding:12px;font-size:.88rem;line-height:1.5;margin:6px 0 10px}
@media (max-width:720px){.pruefzeile{flex-direction:column}}
@media (max-width:720px){
  .stepper{gap:6px 10px}
  .stepper li:not(.jetzt){font-size:0}
  .stepper li:not(.jetzt) .nr{font-size:.8rem}
}
.schrittzeile{margin:-6px 0 12px;color:var(--ink-2);font-size:.9rem}
.kundentext{user-select:all}
@media (min-width:721px){.schrittzeile{display:none}}
@media (max-width:480px){.knopfreihe button,.knopfreihe .btn{white-space:normal;flex:1 1 100%}}

/* Heute: Zuletzt passiert */
.verlauf{display:flex;flex-direction:column;gap:6px;margin:6px 0}
.vzeile{border:1px solid var(--line);border-radius:8px;background:var(--surface)}
.vzeile>summary{display:flex;flex-wrap:wrap;align-items:center;gap:8px 10px;padding:10px 12px;cursor:pointer;list-style:none}
.vzeile>summary::-webkit-details-marker{display:none}
.vzeile .vmeta{margin-left:auto;color:var(--ink-2);font-size:.85rem}
.vzeile.fehl{border-color:var(--fehl)}
.vzeile .aus{margin:0;border-radius:0 0 8px 8px;max-height:260px;overflow:auto}

/* Heute: die eine Hauptaktion ganz oben */
.topaktion{display:flex;justify-content:flex-end;margin:0 0 14px}
.btn.gross{padding:12px 20px;font-size:1rem;font-weight:600}
@media (max-width:720px){.topaktion .btn{width:100%;text-align:center}}

/* Heute: Besucher, 7-Tage-Skala ueber die ganze Breite */
.besucherkopf{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 12px;margin-bottom:10px}
.besucherkopf .pillen{margin:0}
button.klein{padding:5px 12px;font-size:.85rem}
.skala7{display:flex;align-items:stretch;gap:clamp(6px,2vw,22px);height:170px;margin:6px 0 14px}
.skala7 .tag{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;min-width:0}
.skala7 .wert{font-family:var(--f-m);font-size:.85rem;color:var(--ink-2);margin-bottom:4px}
.skala7 .saeule{display:block;width:100%;background:var(--ok);border-radius:4px 4px 0 0;min-height:3px}
.skala7 .name{margin-top:6px;font-size:.78rem;color:var(--ink-3);white-space:nowrap}
.mehr-besucher>summary{cursor:pointer;color:var(--ink-2)}
@media (max-width:480px){.skala7 .name{font-size:.68rem}.skala7{height:140px}}

/* lange Pillen (z. B. Sicherungsstand) brechen um statt die Seite zu verbreitern */
.pille{max-width:100%;white-space:normal;overflow-wrap:anywhere}

/* Mobiler Kopf: Marke und Status fuehren zur Startseite Heute */
.mobilmarke{display:flex;align-items:center;gap:10px;color:inherit;text-decoration:none;min-height:44px}
.mobilkopf a.rechts{color:var(--ink-3);text-decoration:none}