/* Kontor – modernes App-Layout. Schrift Inter liegt auf dem eigenen Server (keine externen Dienste). */
@font-face {
  font-family: "Inter";
  src: url("fonts/inter-latin-wght-normal.woff2") format("woff2-variations");
  font-weight: 100 900; font-style: normal; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Inter";
  src: url("fonts/inter-latin-ext-wght-normal.woff2") format("woff2-variations");
  font-weight: 100 900; font-style: normal; font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  --hinter: #f2f4f6;
  --flaeche: #ffffff;
  --flaeche-2: #f7f9fa;
  --tinte: #0f1b22;
  --grau: #5b6b76;
  --grau-2: #8795a0;
  --linie: #e3e8ec;
  --watt: #145c6a;
  --watt-dunkel: #0e4652;
  --watt-hell: #e2eff1;
  --leiste: #0f2a33;
  --leiste-text: #b9ccd2;
  --mappe: #e7c96f;
  --mappe-dunkel: #c9a94f;
  --fehler: #b42318; --fehler-hell: #fdecea;
  --info-hell: #e6f0f7;
  --ok: #2f7a4a; --ok-hell: #e4f3ea;
  --serie1: #1b6f9e;   /* Glückstadt   – Palette geprüft (Farbsehschwäche, Kontrast) */
  --serie2: #b07d12;   /* Heiligenstedten */
  --serie3: #a7b3bb;   /* Lager (neutral) */
  --spur: #e8edf0;
  --kritisch: #b42318; --kritisch-hell: #fdecea;
  --ernst: #b54708;    --ernst-hell: #fff1e3;
  --warnung: #8a6d00;  --warnung-hell: #fdf6d8;
  --gut: #2f7a4a;      --gut-hell: #e4f3ea;
  --schrift: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --r: 14px; --r-klein: 9px;
  --leistenbreite: 248px;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root {
    --hinter: #0c1418; --flaeche: #131e24; --flaeche-2: #18252c; --tinte: #e6edf0; --grau: #9cb0ba; --grau-2: #73868f;
    --linie: #243238; --watt: #5fb3c2; --watt-dunkel: #8ccbd6; --watt-hell: #173039;
    --leiste: #091519; --leiste-text: #9fb4bb; --mappe: #c9a94f; --mappe-dunkel: #a88d3f;
    --fehler: #ff8a7a; --fehler-hell: #3a1d1a; --info-hell: #16283a; --ok: #7cc996; --ok-hell: #173022;
    --serie1: #3d99d1; --serie2: #b58c24; --serie3: #56666f; --spur: #22313a;
    --kritisch: #ff8a7a; --kritisch-hell: #3a1d1a; --ernst: #f5a35c; --ernst-hell: #3a2614;
    --warnung: #e2c34a; --warnung-hell: #332b10; --gut: #7cc996; --gut-hell: #173022;
    color-scheme: dark;
  }
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--hinter); color: var(--tinte); font: 15px/1.55 var(--schrift);
  font-feature-settings: "cv11", "ss01"; -webkit-font-smoothing: antialiased; }
h1, h2, h3, legend { font-weight: 650; letter-spacing: -0.02em; }
h1 { font-size: 1.75rem; line-height: 1.2; margin: 0 0 0.35rem; }
h2 { font-size: 1.05rem; margin: 2rem 0 0.75rem; }
h3 { font-size: 0.95rem; }
a { color: var(--watt); text-underline-offset: 2px; }
a:hover { color: var(--watt-dunkel); }
:focus-visible { outline: 2px solid var(--watt); outline-offset: 2px; border-radius: 6px; }
code { font-size: 0.92em; background: var(--flaeche-2); padding: 0.1em 0.35em; border-radius: 5px; }
.ico { width: 20px; height: 20px; flex: none; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- App-Rahmen: Seitenleiste + Inhalt ---------- */
.leiste { position: fixed; inset: 0 auto 0 0; width: var(--leistenbreite); background: var(--leiste); color: var(--leiste-text);
  display: flex; flex-direction: column; padding: 1.25rem 0.85rem; gap: 1.5rem; z-index: 10; }
.marke { display: inline-flex; align-items: center; gap: 0.6rem; font-weight: 700; font-size: 1.02rem; letter-spacing: -0.01em;
  color: #fff; text-decoration: none; padding: 0.25rem 0.6rem; }
.marke-logo { width: 40px; height: auto; flex: none; }
.marke-text { display: grid; line-height: 1.2; }
.marke-text small { font-size: 0.6rem; font-weight: 600; color: var(--mappe); letter-spacing: 0.06em; text-transform: uppercase; margin-top: 0.15rem; white-space: nowrap; }
.leiste-nav, .leiste-fuss { display: grid; gap: 2px; }
.leiste-fuss { margin-top: auto; border-top: 1px solid rgba(255,255,255,0.08); padding-top: 0.9rem; }
.leiste-nav a, .leiste-fuss a, .leiste-knopf, .geplant-eintrag {
  display: flex; align-items: center; gap: 0.75rem; padding: 0.6rem 0.7rem; border-radius: 10px; color: var(--leiste-text);
  text-decoration: none; font: inherit; font-weight: 500; background: none; border: 0; width: 100%; cursor: pointer; text-align: left; position: relative; }
.leiste-nav a:hover, .leiste-fuss a:hover, .leiste-knopf:hover { background: rgba(255,255,255,0.06); color: #fff; }
.leiste a[aria-current="page"] { background: rgba(255,255,255,0.09); color: #fff; }
.leiste a[aria-current="page"]::before { content: ""; position: absolute; left: -0.85rem; top: 8px; bottom: 8px; width: 3px; border-radius: 0 3px 3px 0; background: var(--mappe); }
.geplant-eintrag { cursor: default; opacity: 0.45; }
.geplant-eintrag em { margin-left: auto; font-style: normal; font-size: 0.72rem; border: 1px solid currentColor; border-radius: 99px; padding: 0 0.45rem; }
.leiste-fuss form { margin: 0; }
.mit-leiste .seite { margin-left: var(--leistenbreite); }
.tabbar { display: none; }

.seite { max-width: calc(1180px + var(--leistenbreite)); padding: 2rem clamp(1rem, 3.5vw, 2.75rem) 4rem; }
.mit-leiste .seite { max-width: 1180px; }
.schmal { max-width: 560px; }
.unterzeile { color: var(--grau); margin: 0 0 1.75rem; max-width: 70ch; }
.leise { color: var(--grau); font-size: 0.88rem; }
.zurueck { margin: 0 0 0.4rem; font-size: 0.85rem; }
.zurueck a { color: var(--grau); text-decoration: none; }
.zurueck a::before { content: "‹ "; }
.zurueck a:hover { color: var(--watt); }
.pflicht { color: var(--fehler); margin-left: 0.15em; }

/* ---------- Meldungen ---------- */
.meldung { padding: 0.75rem 1rem; border-radius: var(--r-klein); margin: 0 0 1.5rem; max-width: 72ch; border: 1px solid transparent; }
.meldung-fehler { background: var(--fehler-hell); color: var(--fehler); border-color: color-mix(in srgb, var(--fehler) 25%, transparent); }
.meldung-info { background: var(--info-hell); }
.meldung-ok { background: var(--ok-hell); color: var(--ok); }

/* ---------- Formulare ---------- */
.stapel { display: grid; gap: 1rem; margin: 1.5rem 0; }
label { display: grid; gap: 0.35rem; align-content: start; font-size: 0.85rem; font-weight: 600; color: var(--tinte); }
label small { font-weight: 400; color: var(--grau); font-size: 0.78rem; }
input, select, textarea { font: inherit; font-weight: 400; color: var(--tinte); background: var(--flaeche); border: 1px solid var(--linie);
  border-radius: var(--r-klein); padding: 0.55rem 0.75rem; width: 100%; min-height: 2.6rem; transition: border-color .15s, box-shadow .15s; }
input:hover, select:hover { border-color: var(--grau-2); }
input:focus, select:focus { border-color: var(--watt); outline: none; box-shadow: 0 0 0 3px var(--watt-hell); }
input:user-invalid { border-color: var(--fehler); }
.code-feld { font-size: 1.5rem; letter-spacing: 0.3em; text-align: center; font-variant-numeric: tabular-nums; }
.reihe { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 0.9rem; align-items: start; }
.reihe .schmal-feld { max-width: 170px; }
.reihe.adresse { grid-template-columns: 2fr minmax(90px, 0.6fr) 1.4fr; }
.haken { display: flex; align-items: center; gap: 0.55rem; font-weight: 400; cursor: pointer; font-size: 0.9rem; }
.haken input { width: 1.1rem; height: 1.1rem; min-height: 0; accent-color: var(--watt); margin: 0; }
.haken-gruppe { display: flex; flex-wrap: wrap; gap: 0.6rem 1.5rem; margin-top: 0.4rem; }
.formular { display: grid; gap: 1.25rem; }
.block { border: 1px solid var(--linie); border-radius: var(--r); background: var(--flaeche); padding: 1.25rem 1.35rem 1.45rem; margin: 0; display: grid; gap: 0.9rem; min-width: 0; }
.block legend { font-size: 1rem; padding: 0 0.45rem; margin-left: -0.45rem; }
.person-felder { display: grid; gap: 0.9rem; }
.person[data-zweite].zu .person-felder { display: none; }
.person[data-zweite].gleiche-adresse .adresse { display: none; }
.absenden { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }

/* ---------- Knöpfe ---------- */
.knopf { display: inline-flex; align-items: center; justify-content: center; gap: 0.4rem; font: inherit; font-weight: 600; cursor: pointer; text-decoration: none;
  background: var(--watt); color: #fff; border: 1px solid var(--watt); border-radius: var(--r-klein); padding: 0.55rem 1.1rem; min-height: 2.6rem; transition: background .15s; }
.knopf:hover { background: var(--watt-dunkel); border-color: var(--watt-dunkel); color: #fff; }
@media (prefers-color-scheme: dark) { .knopf, .knopf:hover { color: #071317; } }
.knopf.gross { padding: 0.75rem 1.4rem; font-size: 1rem; }
.knopf.klein { padding: 0.25rem 0.6rem; min-height: 0; font-size: 0.82rem; }
.knopf.zweitrangig { background: var(--flaeche); color: var(--tinte); border-color: var(--linie); }
.knopf.zweitrangig:hover { background: var(--flaeche-2); border-color: var(--grau-2); }
.knopf.gefahr { color: var(--fehler); }
.knopf.gefahr:hover { background: var(--fehler-hell); border-color: var(--fehler); }
.aktionen { display: flex; flex-wrap: wrap; gap: 0.6rem; }
.aktionen form { margin: 0; }
button.link { background: none; border: 0; padding: 0; font: inherit; color: var(--grau); cursor: pointer; }

/* ---------- Anmeldung ---------- */
.eingang { background: radial-gradient(1200px 600px at 10% -10%, #17414d 0%, transparent 60%), var(--leiste); }
.eingang-rahmen { min-height: 100vh; display: grid; place-items: center; padding: 2rem 1rem; }
.eingang-rahmen > .meldung { position: fixed; top: 1rem; left: 50%; transform: translateX(-50%); width: min(420px, calc(100% - 2rem)); z-index: 2; }
.eingang-karte { width: min(400px, 100%); background: var(--flaeche); border-radius: 18px; padding: 2.25rem 2rem; box-shadow: 0 24px 60px rgba(0,0,0,0.35); }
.eingang-marke { display: grid; justify-items: center; gap: 0.6rem; margin: 0 0 1.6rem; padding-bottom: 1.4rem; border-bottom: 1px solid var(--linie); }
.eingang-marke .logo { width: 180px; }
.eingang-marke span { font-size: 0.74rem; font-weight: 650; letter-spacing: 0.1em; text-transform: uppercase; color: var(--grau); }
.eingang-karte h1 { font-size: 1.45rem; }

/* ---------- Startseite ---------- */
.begruessung { font-size: 2rem; }
.module { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); gap: 1rem; }
.modul-link { display: grid; grid-template-columns: auto 1fr; gap: 1rem; align-items: start; height: 100%; padding: 1.25rem; background: var(--flaeche);
  border: 1px solid var(--linie); border-radius: var(--r); color: var(--tinte); text-decoration: none; transition: border-color .15s, transform .15s; }
a.modul-link:hover { border-color: var(--watt); color: var(--tinte); transform: translateY(-1px); }
.modul-kuerzel { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; background: var(--watt-hell); color: var(--watt); }
.modul-kuerzel .ico { width: 22px; height: 22px; }
.modul-geplant .modul-link { background: transparent; border-style: dashed; }
.modul-geplant .modul-kuerzel { background: var(--spur); color: var(--grau); }
.modul-text { display: grid; gap: 0.25rem; }
.modul-text strong { font-size: 1.02rem; }
.modul-text span { color: var(--grau); font-size: 0.9rem; }
.geplant { font-style: normal; font-size: 0.75rem; color: var(--grau); }

/* ---------- Unterlagenassistent ---------- */
.faelle { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1rem; margin-bottom: 2rem; }
.fall { display: grid; gap: 0.4rem; padding: 1.4rem; background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--r); text-decoration: none; color: var(--tinte); }
.fall strong { font-size: 1.3rem; color: var(--watt); letter-spacing: -0.02em; }
.fall span { color: var(--grau); }
.fall:hover { border-color: var(--watt); }
.datenschutz { max-width: 70ch; }
.ergebnis { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 2rem; align-items: start; margin: 1.5rem 0 2rem; }
.akte { position: relative; background: var(--mappe); border-radius: 0 12px 12px 12px; padding: 1.75rem 1.5rem 1.5rem; margin-top: 2rem; color: #2e2610; box-shadow: inset 0 -5px 0 var(--mappe-dunkel); }
.akte-reiter { position: absolute; top: -2rem; left: 0; margin: 0; max-width: 85%; padding: 0.35rem 1.1rem 0.4rem; background: var(--mappe); border-radius: 10px 10px 0 0; font-weight: 650; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.akte .leise { color: #5b4d24; }
.baum { list-style: none; margin: 0 0 1.5rem; padding: 1rem 1.1rem; background: #fffdf6; border-radius: 8px; font-size: 0.9rem; color: #2a2a2a; overflow-x: auto; }
.baum-ordner { font-weight: 600; margin-top: 0.6rem; }
.baum-ordner:first-child { margin-top: 0; }
.baum-ordner::before { content: "▸ "; color: #9a7d2b; }
.baum-datei { padding-left: 1.3rem; overflow-wrap: anywhere; }
.akte .knopf { background: var(--leiste); border-color: var(--leiste); color: #fff; }
.akte .knopf.erledigt { background: transparent; color: #3d3214; border-color: #3d3214; pointer-events: none; }
.offen h2 { margin-top: 0; }
.offen-liste { padding-left: 1.2rem; margin: 0 0 1rem; }
.technik { margin-top: 1rem; font-size: 0.85rem; color: var(--grau); }

/* ---------- Tabellen ---------- */
.zeilenkopf { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: 1.25rem; }
.zeilenkopf h1 { margin: 0; }
.tabelle-rahmen { overflow-x: auto; border: 1px solid var(--linie); border-radius: var(--r); background: var(--flaeche); }
.tabelle { width: 100%; border-collapse: collapse; font-size: 0.9rem; }
.tabelle th, .tabelle td { text-align: left; padding: 0.7rem 0.9rem; border-bottom: 1px solid var(--linie); white-space: nowrap; }
.tabelle th { font-weight: 600; font-size: 0.78rem; color: var(--grau); background: var(--flaeche-2); position: sticky; top: 0; }
.tabelle tr:last-child td { border-bottom: 0; }
.tabelle tbody tr:hover td { background: var(--flaeche-2); }
.tabelle tr.gesperrt td { color: var(--grau); text-decoration: line-through; }
.tabelle tr.gesperrt td:last-child { text-decoration: none; }
.tabelle .zahl { text-align: right; font-variant-numeric: tabular-nums; }
.zugangsdaten { display: grid; grid-template-columns: max-content 1fr; gap: 0.5rem 1rem; background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--r); padding: 1rem 1.25rem; }
.zugangsdaten dt { color: var(--grau); }
.zugangsdaten dd { margin: 0; font-weight: 600; }
.zugangsdaten code { font-size: 1.1rem; }
.schritte { padding-left: 1.3rem; display: grid; gap: 0.9rem; }
.qr { display: block; margin: 0.75rem 0; background: #fff; padding: 6px; border-radius: 8px; border: 1px solid var(--linie); }
.schluessel { word-break: break-all; }
.konto-links { display: flex; gap: 1.5rem; flex-wrap: wrap; }

/* ===================== ProVend ===================== */
.pv-kopf { display: flex; align-items: end; justify-content: space-between; gap: 1rem 2rem; flex-wrap: wrap; margin-bottom: 0.25rem; }
.pv-kopf h1 { margin: 0; }
.pv-reiter { display: inline-flex; gap: 2px; padding: 3px; background: var(--spur); border-radius: 11px; flex-wrap: wrap; }
.pv-reiter a { padding: 0.4rem 0.85rem; border-radius: 8px; color: var(--grau); text-decoration: none; font-weight: 550; font-size: 0.88rem; }
.pv-reiter a:hover { color: var(--tinte); }
.pv-reiter a[aria-current="page"] { background: var(--flaeche); color: var(--tinte); box-shadow: 0 1px 2px rgba(15,27,34,0.08); }
.pv-stand { display: inline-flex; align-items: center; gap: 0.45rem; color: var(--grau); font-size: 0.8rem; margin: 0.5rem 0 1.5rem; }
.pv-stand::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--gut); box-shadow: 0 0 0 3px var(--gut-hell); }
.pv-stand-alt { color: var(--ernst); font-weight: 600; }
.pv-stand-alt::before { background: var(--ernst); box-shadow: 0 0 0 3px var(--ernst-hell); }

/* Kennzahl-Kacheln (klickbar = Unterkacheln) */
.pv-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; margin-bottom: 1rem; }
.pv-kpi { position: relative; display: grid; gap: 0.35rem; align-content: start; padding: 1.1rem 1.2rem 1.15rem; background: var(--flaeche); border: 1px solid var(--linie);
  border-radius: var(--r); color: var(--tinte); text-decoration: none; transition: border-color .15s, transform .15s; min-width: 0; }
a.pv-kpi:hover { border-color: var(--watt); color: var(--tinte); transform: translateY(-1px); }
a.pv-kpi::after { content: "›"; position: absolute; top: 0.85rem; right: 1rem; color: var(--grau-2); font-size: 1.2rem; line-height: 1; }
.pv-kpi-titel { font-size: 0.8rem; font-weight: 600; color: var(--grau); }
.pv-kpi-wert { font-size: 1.85rem; font-weight: 700; letter-spacing: -0.03em; line-height: 1.15; font-variant-numeric: tabular-nums; }
.pv-kpi-wert small { font-size: 0.95rem; font-weight: 500; color: var(--grau); letter-spacing: 0; }
.pv-kpi-zeile { font-size: 0.82rem; color: var(--grau); }
.pv-kpi-warn .pv-kpi-wert { color: var(--ernst); }
.pv-chip { white-space: nowrap; display: inline-flex; align-items: center; gap: 0.25rem; width: fit-content; padding: 0.1rem 0.5rem; border-radius: 99px; font-size: 0.76rem; font-weight: 650; font-variant-numeric: tabular-nums; }
.pv-chip-plus { background: var(--gut-hell); color: var(--gut); }
.pv-chip-minus { background: var(--kritisch-hell); color: var(--kritisch); }
.pv-funke { width: 100%; height: 34px; display: block; margin-top: 0.15rem; }
.pv-funke .linie { fill: none; stroke: var(--serie1); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.pv-funke .flaeche { fill: color-mix(in srgb, var(--serie1) 14%, transparent); }
.pv-leiste { display: block; width: 100%; height: 8px; margin-top: 0.2rem; }
.spur { fill: var(--spur); }
.serie1 { fill: var(--serie1); background: var(--serie1); }
.serie2 { fill: var(--serie2); background: var(--serie2); }
.serie3 { fill: var(--serie3); background: var(--serie3); }

/* Karten */
.pv-raster { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 1rem; margin-bottom: 1rem; }
.pv-raster-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; margin-bottom: 1rem; }
.pv-karte { background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--r); padding: 1.1rem 1.25rem 1.2rem; min-width: 0; }
.pv-karte-kopf { display: flex; justify-content: space-between; align-items: baseline; gap: 0.75rem; flex-wrap: wrap; margin-bottom: 0.6rem; }
.pv-karte-kopf h2 { margin: 0; font-size: 0.98rem; display: flex; align-items: center; gap: 0.5rem; }
.pv-karte-kopf a { font-size: 0.82rem; font-weight: 600; text-decoration: none; }
.pv-legende { list-style: none; display: flex; gap: 1rem; margin: 0; padding: 0; font-size: 0.8rem; color: var(--grau); flex-wrap: wrap; }
.pv-punkt { display: inline-block; width: 9px; height: 9px; border-radius: 3px; margin-right: 0.4rem; }

/* Diagramm */
.pv-svg { width: 100%; height: auto; display: block; }
.pv-svg .gitter { stroke: var(--linie); stroke-width: 1; }
.pv-svg .achse { stroke: var(--linie); stroke-width: 1; }
.pv-svg .skala { fill: var(--grau); font-size: 11px; font-family: var(--schrift); }
.pv-svg .treffer { fill: transparent; }
.pv-svg .zukunft { fill: var(--spur); }
.pv-balken:hover .treffer, .pv-balken:focus .treffer { fill: var(--watt-hell); }
.pv-balken:focus { outline: none; }
.pv-tabellenansicht { margin-top: 0.6rem; font-size: 0.85rem; }
.pv-tabellenansicht summary { cursor: pointer; color: var(--watt); font-weight: 550; }
.pv-tabellenansicht .tabelle-rahmen { margin-top: 0.6rem; }

/* Listen mit Balken */
.pv-liste { list-style: none; margin: 0; padding: 0; display: grid; }
.pv-liste li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0.15rem 0.75rem; padding: 0.55rem 0; border-bottom: 1px solid var(--linie); align-items: center; }
.pv-liste li:last-child { border-bottom: 0; }
.pv-liste .name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; }
.pv-liste .wert { font-variant-numeric: tabular-nums; font-weight: 600; text-align: right; }
.pv-liste .neben { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0.75rem; align-items: center; font-size: 0.78rem; color: var(--grau); }
.pv-liste .neben svg { height: 6px; width: 100%; }
.pv-liste.nummern { counter-reset: rang; }
.pv-liste.nummern li { grid-template-columns: 1.6rem minmax(0, 1fr) auto; counter-increment: rang; }
.pv-liste.nummern li::before { content: counter(rang); color: var(--grau-2); font-size: 0.8rem; font-variant-numeric: tabular-nums; }
.pv-liste.nummern .neben { grid-column: 2 / -1; }
.pv-leer { color: var(--grau); font-size: 0.88rem; margin: 0.5rem 0 0; }

/* Status */
.pv-status { display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.12rem 0.55rem; border-radius: 99px; font-size: 0.75rem; font-weight: 650; white-space: nowrap; }
.pv-status::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.pv-status-minus, .pv-status-leer { background: var(--kritisch-hell); color: var(--kritisch); }
.pv-status-nachbestellen { background: var(--ernst-hell); color: var(--ernst); }
.pv-status-knapp { background: var(--warnung-hell); color: var(--warnung); }
.pv-status-ok { background: var(--spur); color: var(--grau); }
.pv-negativ { color: var(--kritisch); font-weight: 650; }
.pv-status-zelle small { display: block; color: var(--grau); margin: 2px 0 0 0.2rem; white-space: nowrap; font-size: 0.75rem; }

/* Bestand */
.pv-werkzeug { display: flex; gap: 1rem; justify-content: space-between; align-items: center; flex-wrap: wrap; margin-bottom: 1rem; }
.pv-umschalter { display: inline-flex; gap: 2px; padding: 3px; background: var(--spur); border-radius: 11px; }
.pv-umschalter a { padding: 0.38rem 0.85rem; border-radius: 8px; color: var(--grau); text-decoration: none; font-weight: 550; font-size: 0.88rem; }
.pv-umschalter a[aria-current="true"] { background: var(--flaeche); color: var(--tinte); box-shadow: 0 1px 2px rgba(15,27,34,0.08); }
.pv-umschalter b { font-weight: 650; margin-left: 0.25rem; color: var(--grau-2); }
.pv-umschalter a[aria-current="true"] b { color: var(--ernst); }
.pv-suche input { min-width: 240px; border-radius: 10px; padding-left: 2.2rem;
  background: var(--flaeche) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238795a0' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='6.5'/%3E%3Cpath d='M16 16l4 4'/%3E%3C/svg%3E") no-repeat 0.7rem center / 16px; }
.pv-tabelle td:first-child { white-space: normal; min-width: 11rem; font-weight: 500; }
.pv-tabelle th, .pv-tabelle td { padding: 0.6rem 0.7rem; }
.pv-verteilung { width: 100px; }
.pv-verteilung svg { width: 100px; height: 8px; display: block; }
.pv-fuss { margin-top: 0.9rem; max-width: 80ch; }

/* Umsatz – Standorte */
.pv-orte { list-style: none; padding: 0; margin: 0; display: grid; gap: 1rem; }
.pv-orte li { display: grid; gap: 0.3rem; }
.pv-ort-name { font-weight: 600; font-size: 0.9rem; }
.pv-ort-wert { font-size: 1.35rem; font-weight: 700; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.pv-ort-wert small { font-size: 0.8rem; font-weight: 500; color: var(--grau); letter-spacing: 0; }

/* Mobil */
@media (max-width: 1100px) {
  .pv-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pv-raster { grid-template-columns: 1fr; }
}
@media (max-width: 900px) {
  .leiste { display: none; }
  .mit-leiste .seite { margin-left: 0; padding-bottom: 6rem; }
  .tabbar { display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 10; background: color-mix(in srgb, var(--flaeche) 92%, transparent);
    backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-top: 1px solid var(--linie); padding: 0.35rem 0.25rem calc(0.35rem + env(safe-area-inset-bottom)); }
  .tabbar a { flex: 1; display: grid; justify-items: center; gap: 0.15rem; padding: 0.35rem 0; color: var(--grau); text-decoration: none; font-size: 0.68rem; font-weight: 600; }
  .tabbar a[aria-current="page"] { color: var(--watt); }
  .tabbar .ico { width: 22px; height: 22px; }
}
@media (max-width: 720px) {
  h1 { font-size: 1.45rem; }
  .begruessung { font-size: 1.6rem; }
  .ergebnis, .pv-raster-2 { grid-template-columns: 1fr; }
  .reihe.adresse { grid-template-columns: 1fr; }
  .reihe .schmal-feld { max-width: none; }
  .pv-kpis { gap: 0.6rem; }
  .pv-kpi { padding: 0.9rem 0.95rem; }
  .pv-kpi-wert { font-size: 1.45rem; }
  .pv-reiter { width: 100%; }
  .pv-reiter a { flex: 1; text-align: center; padding: 0.4rem 0.4rem; }
  .pv-suche, .pv-suche input { width: 100%; min-width: 0; }
  .pv-verteilung { display: none; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }
section.pv-karte + .pv-raster, section.pv-karte + .pv-raster-2 { margin-top: 1rem; }
.pv-kpis.sechs { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.pv-aktionen { display: flex; gap: 0.6rem; flex-wrap: wrap; margin: -0.5rem 0 1.25rem; }
.pv-status-gut { background: var(--gut-hell); color: var(--gut); }
.pv-upload { display: grid; grid-template-columns: 1fr 1fr; gap: 0.6rem; }
.pv-upload-knopf { cursor: pointer; text-align: center; font-size: 0.95rem; }
.pv-dateiliste { list-style: none; margin: 0; padding: 0.6rem 0.8rem; background: var(--flaeche-2); border-radius: var(--r-klein); font-size: 0.85rem; display: grid; gap: 0.2rem; }
.pv-gruende { border: 0; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 0.45rem; }
.pv-grund { display: inline-flex; font-weight: 500; cursor: pointer; }
.pv-grund input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.pv-grund span { padding: 0.4rem 0.8rem; border: 1px solid var(--linie); border-radius: 99px; font-size: 0.85rem; background: var(--flaeche); }
.pv-grund input:checked + span { background: var(--watt); border-color: var(--watt); color: #fff; }
.pv-grund input:focus-visible + span { outline: 2px solid var(--watt); outline-offset: 2px; }
@media (max-width: 1100px) { .pv-kpis.sechs { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.pv-dateiliste[hidden] { display: none; }
@media (max-width: 720px) {
  .pv-reiter { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .pv-reiter::-webkit-scrollbar { display: none; }
  .pv-reiter a { flex: 0 0 auto; padding: 0.4rem 0.75rem; }
  .pv-upload-knopf { font-size: 0.9rem; padding: 0.7rem 0.6rem; }
}
.pv-vergleich { font-size: 0.8rem; color: var(--grau); display: flex; align-items: center; gap: 0.4rem; flex-wrap: wrap; }

/* ---------- Logos (HBI, DBI, ProVend) ---------- */
.logo { display: block; flex: none; }
.logo img { display: block; width: 100%; height: auto; }
.mobil-kopf { display: none; }
.modul-link { grid-template-columns: auto 1fr auto; }
.modul-marke { align-self: start; padding-top: 0.15rem; }
.modul-geplant .modul-marke { opacity: 0.5; }
.zeichen-dbi { width: 22px; }
.zeichen-pv { width: 25px; }
.zeichen-hbi { width: 28px; }
.marken-titel { display: flex; align-items: center; gap: 0.9rem; }
.kopf-logo-pv { width: 44px; }
.marken-zeile { display: block; font-size: 0.7rem; font-weight: 650; letter-spacing: 0.1em; text-transform: uppercase; color: var(--grau); margin-bottom: 0.1rem; }
.marken-kopf { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; }
.dbi-marke { display: inline-flex; align-items: center; gap: 0.55rem; flex: none; margin-top: 0.3rem; }
.dbi-zeichen { width: 30px; }
.dbi-schrift { width: 112px; }
.leer-logo { width: 150px; margin: 0.5rem 0 1.25rem; }
@media (max-width: 900px) {
  .mobil-kopf { display: inline-flex; align-items: center; gap: 0.55rem; margin: 0 0 1.1rem; color: var(--tinte); text-decoration: none; font-weight: 650; font-size: 0.95rem; }
  .mobil-kopf .logo { width: 30px; }
}
@media (max-width: 720px) {
  .dbi-schrift { display: none; }
  .dbi-zeichen { width: 26px; }
  .kopf-logo-pv { width: 36px; }
}

/* ---------- Startseite (ohne Seitenleiste): drei Bereiche ---------- */
.landing { min-height: 100vh; background: radial-gradient(1100px 620px at 12% -12%, #1b4a57 0%, transparent 62%),
  radial-gradient(900px 520px at 100% 110%, #1a3a44 0%, transparent 60%), var(--leiste); color: #fff; }
.landing-kopf { display: flex; justify-content: space-between; align-items: center; gap: 1rem; max-width: 1180px; margin: 0 auto;
  padding: 1.1rem clamp(1rem, 3.5vw, 2.75rem) 0; }
.landing-marke { display: inline-flex; align-items: center; gap: 0.6rem; color: #fff; text-decoration: none; font-weight: 700; font-size: 1.05rem; }
.landing-marke img { width: 38px; height: auto; }
.landing-konto { display: flex; align-items: center; gap: 0.25rem; }
.landing-konto form { margin: 0; }
.landing-konto a, .landing-konto button { display: inline-flex; align-items: center; gap: 0.45rem; padding: 0.45rem 0.75rem; border-radius: 10px;
  color: rgba(255,255,255,0.75); text-decoration: none; font: inherit; font-size: 0.88rem; font-weight: 550; background: none; border: 0; cursor: pointer; }
.landing-konto a:hover, .landing-konto button:hover { background: rgba(255,255,255,0.08); color: #fff; }
.landing-konto .ico { width: 18px; height: 18px; }
.landing-seite { margin: 0 auto; max-width: 1180px; padding-top: clamp(2rem, 7vh, 4.5rem); }
.landing .begruessung { color: #fff; font-size: clamp(1.8rem, 3.2vw, 2.4rem); }
.landing .unterzeile { color: rgba(255,255,255,0.65); margin-bottom: 2rem; }
.landing .meldung { color: var(--tinte); }
.bereiche { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; }
.bereich { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 0.7rem; height: 100%;
  min-height: 360px; padding: 2.25rem 1.75rem 1.4rem; background: var(--flaeche); border-radius: 22px; color: var(--tinte); text-decoration: none;
  overflow: hidden; box-shadow: 0 18px 50px rgba(0, 0, 0, 0.28); transition: transform .18s, box-shadow .18s; }
.bereich::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 5px; background: var(--akzent-bereich, var(--watt)); }
.bereich:hover { transform: translateY(-4px); box-shadow: 0 26px 60px rgba(0, 0, 0, 0.38); color: var(--tinte); }
.bereich-dbi { --akzent-bereich: #1e2a78; }
.bereich-hbi { --akzent-bereich: #b38d53; }
.bereich-provend { --akzent-bereich: #b78a2d; }
@media (prefers-color-scheme: dark) { .bereich-dbi { --akzent-bereich: #6f7fe0; } }
.bereich-lockup { flex: 1; display: grid; place-items: center; min-height: 170px; width: 100%; }
.lockup-gross img { width: auto; max-width: 100%; }
.lockup-hbi-gross img { height: 150px; }
.lockup-pv-gross img { height: 150px; }
.dbi-marke.kachel { flex-direction: column; gap: 0.9rem; margin: 0; }
.dbi-marke.kachel .dbi-zeichen { width: 78px; }
.dbi-marke.kachel .dbi-schrift { width: 170px; display: block; }
.bereich-name { font-size: 1.2rem; font-weight: 650; letter-spacing: -0.02em; }
.bereich-text { color: var(--grau); font-size: 0.92rem; max-width: 30ch; }
.bereich-fuss { display: inline-flex; align-items: center; gap: 0.2rem; margin-top: 0.6rem; padding: 0.55rem 1.1rem; border-radius: 99px;
  font-weight: 650; font-size: 0.9rem; color: #fff; background: var(--akzent-bereich, var(--watt)); }
.bereich-fuss .ico { width: 16px; height: 16px; transition: transform .15s; }
.bereich:hover .bereich-fuss .ico { transform: translateX(3px); }
.landing .module { margin-top: 0.5rem; }

/* Bereichsseite */
.bereich-seitenkopf { display: flex; align-items: center; gap: 1.5rem; margin-bottom: 1.25rem; }
.bereich-seitenkopf h1 { margin: 0 0 0.25rem; }
.bereich-seitenkopf .unterzeile { margin: 0; }
.bereich-lockup { flex: none; }
.lockup-hbi { width: 150px; }
.lockup-pv { width: 120px; }
.dbi-marke.gross { flex-direction: column; align-items: flex-start; gap: 0.5rem; margin: 0; }
.dbi-marke.gross .dbi-zeichen { width: 48px; }
.dbi-marke.gross .dbi-schrift { width: 130px; display: block; }

/* Seitenleiste: Bereichs-Überschriften */
.leiste-gruppe { margin: 0.9rem 0 0.2rem; padding: 0 0.7rem; }
.leiste-gruppe a { display: block; padding: 0.2rem 0; font-size: 0.68rem; font-weight: 650; letter-spacing: 0.09em; text-transform: uppercase;
  color: rgba(255,255,255,0.45); text-decoration: none; }
.leiste-gruppe a:hover, .leiste .leiste-gruppe a[aria-current="page"] { color: var(--mappe); background: none; }
.leiste .leiste-gruppe a[aria-current="page"]::before { display: none; }
.leiste .leiste-nav { overflow-y: auto; }

/* Tabbar: Bereichslogos */
.tab-logo { width: 22px; height: 22px; display: grid; place-items: center; }
.tab-logo img { max-width: 22px; max-height: 22px; width: auto; height: auto; }
.tabbar a:not([aria-current="page"]) .tab-logo { opacity: 0.75; }

/* Benutzer: Freigaben */
.freigaben { border: 1px solid var(--linie); border-radius: var(--r); padding: 1rem 1.1rem 1.1rem; margin: 0.5rem 0; }
.freigaben legend { padding: 0 0.4rem; font-size: 1rem; }
.freigabe-gruppe { display: grid; gap: 0.45rem; margin-top: 0.9rem; }
.freigabe-titel { margin: 0; font-size: 0.75rem; font-weight: 650; letter-spacing: 0.08em; text-transform: uppercase; color: var(--grau); }

@media (max-width: 1100px) {
  .bereiche { grid-template-columns: 1fr; }
  .bereich { min-height: 0; }
}
@media (max-width: 720px) {
  .bereich { padding: 1.2rem 1.2rem 1rem; gap: 0.75rem; }
  .bereich-logo { height: 48px; }
  .bereich-zeichen, .bereich-zeichen img { height: 44px; }
  .bereich-dbi .bereich-zeichen, .bereich-dbi .bereich-zeichen img { height: 38px; }
  .bereich-seitenkopf { flex-direction: column; align-items: flex-start; gap: 0.9rem; }
  .lockup-hbi { width: 120px; } .lockup-pv { width: 96px; }
}

/* ---------- EP-Auswertung ---------- */
.gut { fill: var(--gut); }
.ep-marke { fill: var(--tinte); opacity: 0.55; }
.ep-kpi-haupt { border-color: color-mix(in srgb, var(--watt) 45%, var(--linie)); background: linear-gradient(180deg, var(--watt-hell), var(--flaeche) 70%); }
.ep-kpi-haupt .pv-kpi-wert { color: var(--watt); }
.ep-hinweis { margin: 1rem 0 0; padding: 0.75rem 1rem; border-radius: var(--r-klein); background: var(--info-hell); font-size: 0.92rem; }
.ep-hinweis-ok { background: var(--gut-hell); }
.ep-abschnitt { font-size: 1.1rem; margin: 2rem 0 0.8rem; }
.ep-makler { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 1rem; margin-bottom: 1rem; }
.ep-karte { display: grid; gap: 0.85rem; align-content: start; }
.ep-karte-ok { border-color: color-mix(in srgb, var(--gut) 55%, var(--linie)); }
.ep-karte-weg { opacity: 0.6; }
.ep-karte-kopf { display: flex; justify-content: space-between; align-items: flex-start; gap: 0.75rem; }
.ep-karte-kopf h3 { margin: 0; font-size: 1.05rem; }
.ep-status { font-size: 0.78rem; color: var(--grau); }
.ep-badge { flex: none; font-size: 0.75rem; font-weight: 650; padding: 0.2rem 0.6rem; border-radius: 99px; background: var(--spur); color: var(--grau); }
.ep-badge-ok { background: var(--gut-hell); color: var(--gut); }
.ep-kriterium { display: grid; gap: 0.3rem; }
.ep-kriterium-kopf { display: flex; justify-content: space-between; align-items: baseline; gap: 0.5rem; }
.ep-kriterium-titel { font-size: 0.82rem; font-weight: 600; color: var(--grau); }
.ep-kriterium-wert { font-weight: 650; font-variant-numeric: tabular-nums; font-size: 0.92rem; white-space: nowrap; }
.ep-kriterium-wert small { color: var(--grau); font-weight: 500; }
.ep-meter { width: 100%; height: 8px; display: block; }
.ep-kriterium-fuss { font-size: 0.78rem; color: var(--grau); display: flex; flex-wrap: wrap; gap: 0 0.4rem; }
.ep-kriterium-fuss strong { color: var(--tinte); }
.ep-haken { color: var(--gut); font-weight: 650; }
.ep-haken::before { content: "✓ "; }
.ep-delta { color: var(--gut); font-weight: 600; }
.ep-delta-minus { color: var(--ernst); }
.ep-karte-fuss { margin: 0; padding-top: 0.7rem; border-top: 1px solid var(--linie); font-size: 0.82rem; color: var(--grau); }
.ep-gut { color: var(--gut); }
.ep-nib { margin-bottom: 1rem; }
.ep-ziele .neben svg { width: 100%; height: 6px; }
.ep-fussnote { font-size: 0.78rem; margin: 0.6rem 0 0; }
.pv-svg .ep-spaeter { opacity: 0.45; }
.pv-svg .ep-wert { font-weight: 600; fill: var(--tinte); }
.ep-aktiv { margin-bottom: 1rem; }
.ep-tabelle td:not(:first-child), .ep-tabelle th:not(:first-child) { text-align: right; font-variant-numeric: tabular-nums; }
.ep-regeln { margin: 0 0 2rem; padding: 0.9rem 1.1rem; border: 1px solid var(--linie); border-radius: var(--r); background: var(--flaeche); font-size: 0.88rem; }
.ep-regeln summary { cursor: pointer; font-weight: 650; }
.ep-regeln ul { margin: 0.6rem 0 0; padding-left: 1.2rem; color: var(--grau); display: grid; gap: 0.35rem; }

/* ---------- Seitenleiste je Bereich ---------- */
.leiste-bereich { display: flex; align-items: center; gap: 0.7rem; margin: -0.4rem 0 0; padding: 0.75rem 0.7rem; border-radius: 12px;
  background: rgba(255,255,255,0.05); color: #fff; text-decoration: none; }
.leiste-bereich img { width: 30px; height: 30px; object-fit: contain; flex: none; }
.leiste-bereich span { display: grid; font-weight: 650; font-size: 0.92rem; line-height: 1.25; }
.leiste-bereich small { font-size: 0.66rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--mappe); }
.leiste-bereich:hover { background: rgba(255,255,255,0.09); }
p.leiste-gruppe { margin: 1.1rem 0 0.25rem; padding: 0 0.7rem; font-size: 0.66rem; font-weight: 650; letter-spacing: 0.09em; text-transform: uppercase;
  color: rgba(255,255,255,0.4); }
.leiste-nav a.leiste-wechsel { font-size: 0.88rem; color: rgba(255,255,255,0.6); }
.leiste-wechsel img { width: 20px; height: 20px; object-fit: contain; flex: none; opacity: 0.85; }
.dash-kopf { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; margin: 1.75rem 0 0.5rem; }
.dash-kopf h2 { margin: 0; font-size: 1.1rem; }
.dash-kopf a { font-size: 0.88rem; font-weight: 600; text-decoration: none; }
.dash-raster { margin-top: 1rem; }
.dash-makler li { grid-template-columns: minmax(0, 1fr) auto; }
a.pv-kpi.ep-kpi-haupt:hover { color: var(--tinte); }
.mobil-kopf em { font-style: normal; font-size: 0.72rem; font-weight: 650; padding: 0.1rem 0.5rem; border-radius: 99px; background: var(--watt-hell); color: var(--watt); }
@media (min-width: 901px) { .pv-reiter { display: none; } }
@media (max-width: 1100px) { .bereiche { grid-template-columns: 1fr; } .bereich { min-height: 0; } }
@media (max-width: 720px) {
  .landing-konto span { display: none; }
  .bereich { padding: 1.75rem 1.25rem 1.2rem; }
  .bereich-lockup { min-height: 120px; }
  .lockup-hbi-gross img, .lockup-pv-gross img { height: 110px; }
  .dbi-marke.kachel .dbi-zeichen { width: 60px; }
  .dbi-marke.kachel .dbi-schrift { width: 140px; display: block; }
}

/* Startseite am Handy: kompakte Kacheln (Zeichen links, Text rechts, Pfeil) */
.bereich-mini { display: none; }
.bereich-wort { display: grid; gap: 0.7rem; justify-items: center; }
@media (max-width: 720px) {
  .landing-seite { padding-top: 1.5rem; }
  .landing .begruessung { font-size: 1.6rem; }
  .landing .unterzeile { margin-bottom: 1.1rem; }
  .bereiche { gap: 0.75rem; }
  .bereich { flex-direction: row; align-items: center; text-align: left; gap: 0.9rem; min-height: 0;
    padding: 0.95rem 1rem 0.95rem 1.1rem; border-radius: 16px; box-shadow: 0 10px 26px rgba(0, 0, 0, 0.25); }
  .bereich::before { inset: 0 auto 0 0; width: 4px; height: auto; }
  .bereich-lockup { display: none; }
  .bereich-mini { display: grid; place-items: center; width: 48px; height: 48px; flex: none; }
  .bereich-mini .logo img { width: 44px; height: 44px; object-fit: contain; }
  .bereich-dbi .bereich-mini .logo img { width: 38px; height: 38px; }
  .bereich-wort { justify-items: start; gap: 0.15rem; flex: 1; min-width: 0; }
  .bereich-name { font-size: 1rem; }
  .bereich-text { font-size: 0.8rem; line-height: 1.35; }
  .bereich-fuss { margin: 0; padding: 0; width: 32px; height: 32px; justify-content: center; font-size: 0; flex: none; border-radius: 50%; }
  .bereich-fuss .ico { width: 18px; height: 18px; }
}