/* Demo-CRM „Uferzeile" (moinki.de/demo) — Stylesheet des Admin-Panels (Plan: ui/DESIGN.md)
   Variablen-ROLLEN aus dem qisses-Original beibehalten, Werte = moinki-Marke:
   --nacht trägt jetzt Ostsee-Petrol, --licht trägt Sanddorn. */
@font-face{font-family:"Young Serif";src:url("fonts/young-serif-400.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap;}
@font-face{font-family:"Wix Madefor Text";src:url("fonts/wix-madefor-400.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap;}
@font-face{font-family:"Wix Madefor Text";src:url("fonts/wix-madefor-500.woff2") format("woff2");font-weight:500;font-style:normal;font-display:swap;}
@font-face{font-family:"Wix Madefor Text";src:url("fonts/wix-madefor-700.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap;}
@font-face{font-family:"Fragment Mono";src:url("fonts/fragment-mono-400.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap;}

:root {
  --putz:#F7F9F8; --karte:#FFFFFF; --nacht:#10394E; --fassade:#1A4A63; --fassade-hell:#235A76;
  --licht:#E97B25; --licht-weich:#FBE3CE; --licht-tief:#C05A11;
  --tinte:#16303B; --dunst:#5E7480; --dunst-hell:#93A7AE; --linie:#E1EAE8; --linie-stark:#C9D9D6;
  --laub:#2E7D5F; --laub-hell:#E2F1EA; --signal:#C64B33; --signal-hell:#F9E7E2;
  --himmel:#E7F0F4; --himmel-tinte:#2F6C8C;
  --gischt:#E3EDEC; --gischt-tief:#D3E2E0; --bodden:#3E6E86;
  --schatten:0 1px 2px rgba(16,57,78,0.06), 0 1px 1px rgba(16,57,78,0.04);
  --schatten-hoch:0 10px 30px rgba(16,57,78,0.11), 0 2px 6px rgba(16,57,78,0.07);
  --display:"Young Serif", Georgia, serif;
  --body:"Wix Madefor Text", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono:"Fragment Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --seite-b:232px; --radius:14px; --radius-k:9px;
  /* Alte Variablennamen, die das JS noch setzt (Meter-Farben) */
  --gruen:#2E7D5F; --gold:#E97B25; --gruen-dunkel:#10394E; --grau:#5E7480; --rot:#C64B33;
}

* { box-sizing:border-box; margin:0; }
html { -webkit-text-size-adjust:100%; background:var(--putz); }
body { background:var(--putz); color:var(--tinte); font:14.5px/1.5 var(--body);
       font-feature-settings:"ss01"; -webkit-font-smoothing:antialiased; }
:focus-visible { outline:2px solid var(--licht); outline-offset:2px; }
a { color:var(--tinte); text-decoration-thickness:1px; text-underline-offset:2px; }
.ikon { display:inline-flex; width:1.05em; height:1.05em; flex:none; }
.ikon svg { width:100%; height:100%; }
h1, h2, h3, .zahl, .kachel .zahl, .held-zahl, .hm-zahl, .bz-zahl { font-family:var(--display); }
.kicker, th, .formular label, .dlg-feld .df-label, .dlg-abschnitt h4, .hm-titel, .vl-alt h5, .stand,
.we-meta, .achse span, .balken .kappe, .gk-zeitraum, .zl-mini, .pille, .kanal, .ergebnis, .zahl-chip,
.abzeichen, .score-chip, .chip { font-family:var(--mono); }

/* ---------- Shell: Sidebar + Hauptbereich ---------- */
.app { display:grid; grid-template-columns:var(--seite-b) minmax(0,1fr); min-height:100vh; }
.seite { background:var(--nacht); color:#D9E5E4; position:sticky; top:0; height:100vh;
         display:flex; flex-direction:column; padding:1.35rem 0.9rem 1rem; overflow-y:auto;
         scrollbar-width:thin; scrollbar-color:var(--fassade-hell) transparent; }
.marke { display:flex; align-items:center; gap:0.7rem; padding:0 0.5rem 1.3rem; text-decoration:none; color:#fff; }
.marke-zeichen { width:34px; height:34px; border-radius:10px; background:var(--fassade);
                 display:grid; place-items:center; flex:none; position:relative; overflow:hidden; }
.marke-zeichen svg { width:22px; height:22px; }
.marke-name { font-family:var(--display); font-weight:700; font-size:1rem; letter-spacing:-0.01em; line-height:1.15; }
.marke-unter { font-family:var(--mono); font-size:0.62rem; color:var(--dunst-hell); letter-spacing:0.1em; text-transform:uppercase; margin-top:0.15rem; }
.nav-gruppe { margin-top:0.9rem; }
.nav-gruppe + .nav-gruppe { margin-top:1.3rem; }
.nav-titel { font-family:var(--mono); font-size:0.62rem; letter-spacing:0.14em; text-transform:uppercase;
             color:var(--dunst-hell); padding:0 0.75rem 0.45rem; }
#reiter { display:contents; }
#reiter button, #reiter a.chat-link { display:flex; align-items:center; gap:0.65rem; width:100%;
   border:0; background:transparent; color:#C3D5D6; font:inherit; font-size:0.9rem; font-weight:500;
   padding:0.52rem 0.75rem; border-radius:var(--radius-k); cursor:pointer; text-align:left;
   text-decoration:none; position:relative; transition:background 0.18s, color 0.18s;
   will-change:transform; }
#reiter button .ikon, #reiter a.chat-link .ikon { width:1.15em; height:1.15em; color:var(--dunst-hell); transition:color 0.18s; }
#reiter button:hover, #reiter a.chat-link:hover { background:var(--fassade); color:#fff; }
#reiter button:hover .ikon, #reiter a.chat-link:hover .ikon { color:#fff; }
#reiter button.aktiv { background:var(--fassade-hell); color:#fff; }
#reiter button.aktiv .ikon { color:var(--licht); }
#reiter button.aktiv::before { content:""; position:absolute; left:-0.9rem; top:0.55rem; bottom:0.55rem;
   width:3px; border-radius:0 3px 3px 0; background:var(--licht); }
#reiter button .txt, #reiter a.chat-link .txt { flex:1; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.abzeichen { background:var(--licht); color:var(--nacht); border-radius:100px; font-size:0.64rem;
             font-weight:500; min-width:1.25rem; height:1.25rem; line-height:1.25rem;
             padding:0 0.35rem; text-align:center; display:inline-block; }
.abzeichen[hidden] { display:none; }
.seite-fuss { margin-top:auto; padding:1.2rem 0.5rem 0; display:grid; gap:0.55rem; }
.status-zeile { display:flex; align-items:center; gap:0.5rem; font-size:0.76rem; color:#9FB6BB; }
.status-zeile .led { width:7px; height:7px; border-radius:50%; background:var(--laub); flex:none;
                     box-shadow:0 0 0 3px rgba(46,125,95,0.2); }
.status-zeile .led.licht { background:var(--licht); box-shadow:0 0 0 3px rgba(233,123,37,0.22); }
.demo-hinweis { font-family:var(--mono); font-size:0.62rem; line-height:1.5; color:var(--dunst-hell);
                border-top:1px solid rgba(255,255,255,0.08); padding-top:0.8rem; margin-top:0.3rem; }
.demo-hinweis b { color:#D9E5E4; font-weight:500; }

.haupt { min-width:0; }
.topbar { position:sticky; top:0; z-index:6; background:rgba(247,249,248,0.85); backdrop-filter:blur(10px);
          -webkit-backdrop-filter:blur(10px); border-bottom:1px solid var(--linie);
          display:flex; align-items:center; gap:1rem; padding:0.75rem 2rem; }
.topbar h1 { font-size:1.15rem; font-weight:700; letter-spacing:-0.015em; color:var(--tinte); }
.stand { color:var(--dunst); font-size:0.7rem; letter-spacing:0.02em; margin-left:auto; white-space:nowrap; }
.innen { max-width:1240px; margin:0 auto; padding:1.6rem 2rem 4rem; }
h2 { font-size:1.02rem; font-weight:700; letter-spacing:-0.012em; color:var(--tinte);
     margin:2.3rem 0 0.85rem; display:flex; flex-wrap:wrap; align-items:baseline; gap:0.5rem 0.7rem; }
h2 small { font-family:var(--body); font-weight:400; color:var(--dunst); font-size:0.8rem; letter-spacing:0; }
section[data-tab-inhalt] > h2:first-of-type { margin-top:0.2rem; }
.karte { background:var(--karte); border:1px solid var(--linie); border-radius:var(--radius);
         padding:1.15rem 1.25rem; box-shadow:var(--schatten); }
.kicker { font-size:0.66rem; letter-spacing:0.12em; text-transform:uppercase; color:var(--dunst); font-weight:500; }

/* ---------- Bühne „Uferzeile" (Signature): heller Küsten-Tag ---------- */
.buehne { background:linear-gradient(180deg, #F1F7F6 0%, var(--gischt) 62%, #DFEBE9 100%);
          color:var(--tinte); border-radius:18px; border:1px solid var(--gischt-tief);
          padding:1.4rem 1.6rem 1.2rem; position:relative; overflow:hidden;
          display:grid; grid-template-columns:minmax(0,1.5fr) minmax(280px,0.9fr); gap:1.5rem 2rem;
          box-shadow:0 20px 50px rgba(16,57,78,0.10); }
.buehne::before { content:""; position:absolute; inset:0; pointer-events:none;
   background:radial-gradient(70% 90% at 18% 0%, rgba(255,255,255,0.75), transparent 60%),
              radial-gradient(45% 55% at 92% 100%, rgba(62,110,134,0.10), transparent 70%); }
.buehne > * { position:relative; }
.buehne-links { display:flex; flex-direction:column; }
.buehne-links #haeuser { margin-top:auto; padding-top:0.6rem; }
.buehne-kopf { display:flex; align-items:baseline; justify-content:space-between; gap:1rem; flex-wrap:wrap; }
.buehne .kicker { color:var(--licht-tief); }
.buehne h2 { color:var(--tinte); margin:0.25rem 0 0; font-size:1.35rem; }
.buehne-legende { display:flex; gap:1rem; flex-wrap:wrap; font-family:var(--mono); font-size:0.64rem; color:var(--dunst); letter-spacing:0.04em; }
.buehne-legende span::before { content:""; display:inline-block; width:9px; height:9px; border-radius:2px; margin-right:0.4rem; vertical-align:-1px; }
.buehne-legende .l-an::before { background:var(--licht); box-shadow:0 0 6px rgba(233,123,37,0.55); }
.buehne-legende .l-kommt::before { background:var(--licht-weich); border:1px solid var(--licht); }
.buehne-legende .l-frei::before { background:var(--bodden); }
#haeuser { width:100%; }
#haeuser svg { width:100%; height:auto; display:block; overflow:visible; }
#haeuser .fenster { cursor:pointer; }
#haeuser .fenster.frei { cursor:default; }
#haeuser .fenster:hover .glas { stroke:var(--licht-tief); }
#haeuser .haus-label { font-family:var(--mono); font-size:11px; fill:var(--tinte); letter-spacing:0.06em; }
#haeuser .haus-sub { font-family:var(--mono); font-size:9.5px; fill:var(--dunst); letter-spacing:0.04em; }
#haeuser .we-label { font-family:var(--mono); font-size:8.5px; fill:var(--dunst); letter-spacing:0.03em; pointer-events:none; }
.tagesblatt { display:grid; gap:0.6rem; align-content:start; }
.tagesblatt .kicker { margin-bottom:0.2rem; }
.tb-zeile { display:flex; align-items:center; justify-content:space-between; gap:0.8rem;
            padding:0.55rem 0.85rem; border-radius:10px; background:rgba(255,255,255,0.72);
            border:1px solid rgba(16,57,78,0.08); cursor:pointer; transition:background 0.18s, border-color 0.18s; }
.tb-zeile:hover { background:#fff; border-color:rgba(16,57,78,0.18); }
.tb-zeile .tb-label { font-size:0.84rem; color:var(--tinte); }
.tb-zeile .tb-sub { font-family:var(--mono); font-size:0.62rem; color:var(--dunst); margin-top:0.05rem; }
.tb-zeile .bz-zahl { font-size:1.35rem; font-weight:400; letter-spacing:0; color:var(--nacht); font-variant-numeric:tabular-nums; }
.tb-zeile.warm .bz-zahl { color:var(--licht-tief); }
.tb-zeile.null { opacity:0.55; }

/* ---------- Kacheln / KPI ---------- */
.kacheln { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,150px),1fr)); gap:0.8rem; }
.kachel { background:var(--karte); border:1px solid var(--linie); border-radius:var(--radius);
          padding:0.95rem 1.05rem 0.9rem; box-shadow:var(--schatten); display:flex; flex-direction:column-reverse;
          justify-content:flex-end; gap:0.3rem; min-height:96px; transition:transform 0.18s, border-color 0.18s; }
.kachel:hover { border-color:var(--linie-stark); transform:translateY(-1px); }
.kachel .zahl { font-size:1.75rem; font-weight:700; letter-spacing:-0.025em; color:var(--tinte); line-height:1.05; font-variant-numeric:tabular-nums; }
.kachel .label { font-family:var(--mono); font-size:0.64rem; letter-spacing:0.08em; text-transform:uppercase; color:var(--dunst); }
.kachel .delta { font-size:0.72rem; font-weight:600; order:-1; }
.delta.gut { color:var(--laub); } .delta.schlecht { color:var(--signal); } .delta.neutral { color:var(--dunst); }

/* Auslastungs-Karte + Messbalken */
.held { display:grid; grid-template-columns:minmax(270px,1fr) 2.1fr; gap:0.8rem; margin-top:0.8rem; }
@media (max-width:900px) { .held { grid-template-columns:1fr; } }
.held .karte h3 { font-family:var(--mono) !important; font-size:0.66rem !important; letter-spacing:0.12em !important;
                  text-transform:uppercase; color:var(--dunst) !important; font-weight:500 !important; }
.held-zahl { font-size:3rem; font-weight:700; letter-spacing:-0.035em; color:var(--tinte); line-height:1; margin-top:0.55rem; }
.held-zahl small { font-size:1.1rem; font-weight:600; color:var(--dunst); letter-spacing:0; }
.meter { position:relative; height:10px; background:var(--putz); border-radius:100px; margin:0.8rem 0 0.35rem; overflow:visible; }
.meter .fuellung { position:absolute; left:0; top:0; bottom:0; background:var(--nacht) !important; border-radius:100px; min-width:4px; }
.meter .ziel { position:absolute; top:-5px; bottom:-5px; width:2px; background:var(--licht); border-radius:2px; }
.meter.klein { height:6px; margin:0.35rem 0 0.1rem; }
.meter.klein .fuellung { background:var(--fassade-hell) !important; }
.meter-zeile { margin-top:0.7rem; }
.meter-zeile .mz-kopf { display:flex; justify-content:space-between; font-size:0.8rem; color:var(--dunst); }
.meter-zeile .mz-kopf b { font-weight:600; color:var(--tinte); font-variant-numeric:tabular-nums; }
.ziel-text { font-size:0.76rem; color:var(--dunst); }
.ziel-text b { color:var(--licht-tief); }

/* ---------- Diagramme ---------- */
.diagramm { background:var(--karte); border:1px solid var(--linie); border-radius:var(--radius);
            padding:1.1rem 1.15rem 0.75rem; box-shadow:var(--schatten); }
.diagramm h3 { font-size:0.82rem; font-weight:600; color:var(--tinte); margin-bottom:0.8rem; letter-spacing:-0.005em; }
.plot { position:relative; height:150px; }
.balkenreihe { display:flex; align-items:flex-end; gap:4px; height:100%; position:relative; }
.balken { flex:1; display:flex; flex-direction:column; justify-content:flex-end; align-items:center; height:100%; cursor:default; }
.balken .fuellung { background:var(--fassade-hell); border-radius:4px 4px 2px 2px; min-height:2px; width:100%; max-width:28px;
                    transition:background 0.15s; transform-origin:bottom; }
.balken:hover .fuellung { background:var(--nacht); }
.balken.leer .fuellung { background:var(--linie); }
.balken .kappe { font-size:0.6rem; color:var(--dunst); margin-bottom:3px; white-space:nowrap; }
.ziellinie { position:absolute; left:0; right:0; height:0; border-top:1.5px dashed var(--licht-tief); }
.ziellinie span { position:absolute; right:0; top:-1.15rem; font-family:var(--mono); font-size:0.6rem; color:var(--licht-tief); letter-spacing:0.06em; }
.achse { display:flex; gap:4px; margin-top:0.4rem; }
.achse span { flex:1; font-size:0.58rem; color:var(--dunst); text-align:center; overflow:hidden; white-space:nowrap; letter-spacing:0.02em; }
.achse span.jetzt { font-weight:500; color:var(--tinte); }
#tooltip { position:fixed; pointer-events:none; background:var(--nacht); color:#fff; font-family:var(--mono);
           font-size:0.7rem; padding:0.45rem 0.65rem; border-radius:8px; display:none; z-index:20; box-shadow:var(--schatten-hoch); }
.zwei-diagramme { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr)); gap:0.8rem; }

/* ---------- Trichter ---------- */
.trichter { display:flex; gap:0.4rem; align-items:stretch; }
.trichter .kachel { flex:1; min-width:0; }
.trichter-pfeil { align-self:center; display:flex; flex-direction:column; align-items:center; gap:2px;
                  color:var(--dunst); font-family:var(--mono); font-size:0.64rem; line-height:1.3; flex:none; padding:0 0.2rem; text-align:center; }
.trichter-pfeil .ikon { color:var(--linie-stark); width:1.2em; height:1.2em; }
.trichter-pfeil b { color:var(--tinte); font-weight:500; }

/* ---------- Tabellen ---------- */
.spalten { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr)); gap:0.8rem; }
table { width:100%; border-collapse:separate; border-spacing:0; background:var(--karte); border:1px solid var(--linie);
        border-radius:var(--radius); overflow:hidden; font-size:0.85rem; }
th { text-align:left; font-size:0.62rem; text-transform:uppercase; letter-spacing:0.1em; color:var(--dunst);
     font-weight:500; padding:0.65rem 0.85rem; background:#F4F8F7; border-bottom:1px solid var(--linie); }
td { padding:0.62rem 0.85rem; border-top:1px solid var(--linie); vertical-align:top; }
tr:first-child td { border-top:0; }
td.zahl, th.zahl { text-align:right; font-variant-numeric:tabular-nums; }
td.zahl { font-family:var(--body); font-weight:500; }
.tabellenbox { overflow-x:auto; border-radius:var(--radius); box-shadow:var(--schatten); }
tr.klickbar { cursor:pointer; }
tr.klickbar:hover td { background:#F2F6F5; }
.kanal { display:inline-block; font-size:0.62rem; padding:0.18rem 0.55rem; border-radius:6px; letter-spacing:0.04em;
         border:1px solid var(--linie); background:#F4F8F7; color:var(--dunst); white-space:nowrap; }
.kanal.direkt { border-color:var(--licht); background:var(--licht-weich); color:var(--licht-tief); font-weight:500; }
.punkt { display:inline-block; width:7px; height:7px; border-radius:50%; margin-right:0.35rem; }
.punkt.gut { background:var(--laub); } .punkt.mittel { background:var(--licht); } .punkt.schlecht { background:var(--signal); }
.storniert td { color:var(--dunst-hell); text-decoration:line-through; }
.hinweis { color:var(--dunst); font-size:0.84rem; padding:0.8rem 0; max-width:78ch; }
.chips { display:flex; flex-wrap:wrap; gap:0.5rem; }
.chip { display:inline-flex; align-items:center; gap:0.45rem; background:var(--karte); border:1px solid var(--linie);
        border-radius:8px; padding:0.4rem 0.75rem; font-size:0.68rem; letter-spacing:0.03em; color:var(--tinte); text-decoration:none; }
.chip::before { content:''; width:7px; height:7px; border-radius:50%; flex:none; }
.chip.gut::before { background:var(--laub); box-shadow:0 0 0 3px var(--laub-hell); }
.chip.schlecht::before { background:var(--signal); box-shadow:0 0 0 3px var(--signal-hell); }
.warnung { background:var(--licht-weich); border:1px solid var(--licht); border-radius:10px; padding:0.7rem 1rem; font-size:0.85rem; margin-top:1rem; display:none; }

/* ---------- Formulare & Knöpfe ---------- */
.formular { background:var(--karte); border:1px solid var(--linie); border-radius:var(--radius); padding:1.25rem; display:grid; gap:1rem; box-shadow:var(--schatten); }
.formular label { display:block; font-size:0.64rem; font-weight:500; color:var(--dunst); text-transform:uppercase; letter-spacing:0.1em; margin-bottom:0.35rem; }
.formular label span { font-family:var(--body); letter-spacing:0; }
.formular input[type=text], .formular input[type=number], .formular input[type=date], .formular select, .formular textarea,
.we-formular input[type=text], .we-formular textarea, .v-aktionen input, .filterzeile input[type=text] {
  width:100%; border:1px solid var(--linie-stark); border-radius:var(--radius-k); padding:0.55rem 0.7rem; font:inherit; font-size:0.9rem;
  background:var(--karte); color:var(--tinte); transition:border-color 0.15s, box-shadow 0.15s; }
.formular input:focus, .formular select:focus, .formular textarea:focus, .we-formular input:focus, .we-formular textarea:focus,
.v-aktionen input:focus, .filterzeile input:focus { outline:0; border-color:var(--nacht); box-shadow:0 0 0 3px rgba(16,57,78,0.08); }
.formular textarea.code { font:12.5px/1.6 var(--mono); }
.formular fieldset { border:0; padding:0; margin:0; display:grid; gap:0.9rem; }
.formular fieldset + fieldset { border-top:1px solid var(--linie); padding-top:1.1rem; }
.formular legend { font-family:var(--display); font-weight:700; font-size:0.9rem; color:var(--tinte); margin-bottom:0.2rem; letter-spacing:-0.01em; }
.schalter { display:flex; align-items:center; gap:0.55rem; font-size:0.88rem; cursor:pointer; text-transform:none !important; letter-spacing:0 !important; color:var(--tinte) !important; font-weight:500 !important; font-family:var(--body) !important; }
.schalter input { width:1.05rem; height:1.05rem; accent-color:var(--nacht); }
.knopf { background:var(--nacht); color:#fff; border:0; border-radius:var(--radius-k); padding:0.62rem 1.25rem; font:inherit; font-size:0.88rem; font-weight:600;
         cursor:pointer; display:inline-flex; align-items:center; justify-content:center; gap:0.45rem; transition:background 0.15s, transform 0.15s, box-shadow 0.15s;
         box-shadow:0 1px 2px rgba(16,57,78,0.2); }
.knopf:hover { background:var(--fassade-hell); transform:translateY(-1px); box-shadow:0 4px 12px rgba(16,57,78,0.18); }
.knopf:active { transform:translateY(0); }
.knopf:disabled { opacity:0.5; cursor:default; transform:none; }
.knopf.klein { padding:0.45rem 0.95rem; font-size:0.82rem; }
.knopf-zweit { background:var(--karte); color:var(--tinte); border:1px solid var(--linie-stark); border-radius:var(--radius-k); padding:0.48rem 0.95rem; font:inherit; font-size:0.84rem; font-weight:500;
               cursor:pointer; display:inline-flex; align-items:center; justify-content:center; gap:0.45rem; transition:border-color 0.15s, background 0.15s; }
.knopf-zweit:hover { border-color:var(--nacht); background:#F4F8F7; }
.knopf-zweit:disabled { opacity:0.5; cursor:default; }
.speicher-status { font-size:0.84rem; margin-left:0.8rem; color:var(--dunst); }
.drei { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,200px),1fr)); gap:1rem; }
.filterzeile { display:flex; flex-wrap:wrap; gap:0.7rem; align-items:center; margin-bottom:0.8rem; }
.filterzeile input[type=text] { flex:1 1 230px; min-width:0; max-width:420px; width:auto; }

/* ---------- Telefon ---------- */
details.transkript summary { cursor:pointer; color:var(--himmel-tinte); font-size:0.8rem; }
details.transkript div { margin-top:0.5rem; display:grid; gap:0.3rem; max-width:520px; }
details.transkript p { font-size:0.82rem; padding:0.4rem 0.65rem; border-radius:10px; }
details.transkript p.gast { background:#EDF3F2; }
details.transkript p.assistentin { background:var(--licht-weich); }
details.transkript p b { color:var(--tinte); }
td audio { width:230px; max-width:60vw; height:32px; display:block; }
.ergebnis { display:inline-block; font-size:0.62rem; padding:0.18rem 0.55rem; border-radius:6px; letter-spacing:0.04em;
            border:1px solid var(--linie); background:#F4F8F7; color:var(--dunst); white-space:nowrap; }
.ergebnis.gebucht { border-color:var(--laub); background:var(--laub-hell); color:#1E6B50; font-weight:500; }
.ergebnis.fehler { border-color:var(--signal); color:var(--signal); }
.anruf-weg { border:1px solid var(--linie); background:var(--karte); color:var(--dunst); border-radius:8px; width:28px; height:28px; cursor:pointer;
             font:inherit; font-size:0.8rem; line-height:1; padding:0; transition:border-color 0.15s, color 0.15s; }
.anruf-weg:hover { border-color:var(--signal); color:var(--signal); }
.anrufe-mehr td { text-align:center; padding:0.6rem; }
#t-anrufe td:first-child { border-left:3px solid transparent; }
#t-anrufe tr.anruf-neu td:first-child { border-left-color:var(--licht); }
#t-anrufe tr.anruf-gehoert td:first-child { border-left-color:var(--linie-stark); }
#t-anrufe tr.anruf-erledigt td:first-child { border-left-color:var(--laub); }
tr.anruf-erledigt td { opacity:0.6; }
.anruf-status { margin-top:0.25rem; }
.pille.st-neu { background:var(--licht-weich); color:var(--licht-tief); }
.pille.st-gehoert { background:#EDF3F2; color:var(--dunst); }
.anruf-fertig { margin-right:0.45rem; }
.anruf-fertig:hover { border-color:var(--laub); color:var(--laub); }
#t-anrufe td:last-child { white-space:nowrap; }

/* ---------- Wissensdatenbank ---------- */
.wissen-knoepfe { display:flex; flex-wrap:wrap; gap:0.6rem; align-items:center; margin-top:0.8rem; }
.wissen-liste { display:grid; gap:0.7rem; margin-top:0.4rem; }
.wissen-eintrag { background:var(--karte); border:1px solid var(--linie); border-radius:var(--radius); padding:1rem 1.15rem; box-shadow:var(--schatten); transition:border-color 0.18s; }
.wissen-eintrag:hover { border-color:var(--linie-stark); }
.wissen-eintrag.aus { opacity:0.55; }
.we-kopf { display:flex; justify-content:space-between; gap:0.8rem; align-items:flex-start; }
.we-titel { font-family:var(--display); font-weight:700; color:var(--tinte); font-size:1rem; letter-spacing:-0.01em; }
.we-text { font-size:0.88rem; margin-top:0.35rem; white-space:pre-wrap; max-width:68ch; color:#2A3145; }
.we-stichwoerter { display:flex; flex-wrap:wrap; gap:0.35rem; margin-top:0.6rem; }
.we-stichwort { font-family:var(--mono); font-size:0.62rem; background:#EDF3F2; color:var(--dunst); border-radius:6px; padding:0.16rem 0.5rem; letter-spacing:0.03em; }
.we-aktionen { display:flex; gap:0.4rem; flex:none; align-items:center; flex-wrap:wrap; justify-content:flex-end; }
.we-aktionen button { border:1px solid var(--linie); background:var(--karte); color:var(--dunst); font:inherit; font-size:0.74rem; padding:0.25rem 0.7rem;
                      border-radius:7px; cursor:pointer; white-space:nowrap; transition:border-color 0.15s, color 0.15s; }
.we-aktionen button:hover { border-color:var(--nacht); color:var(--tinte); }
.we-aktionen button.rot:hover { border-color:var(--signal); color:var(--signal); }
.we-meta { font-size:0.62rem; color:var(--dunst-hell); margin-top:0.6rem; letter-spacing:0.03em; }
.we-formular { display:grid; gap:0.6rem; margin-top:0.3rem; }
#wn-text { min-height:4.6rem; }

/* ---------- Buchungs-Detailfenster ---------- */
dialog { border:0; border-radius:18px; padding:0; max-width:580px; width:calc(100vw - 2rem); margin:auto; max-height:calc(100vh - 3rem); max-height:calc(100dvh - 3rem);
         flex-direction:column; overflow:hidden; box-shadow:0 30px 80px rgba(16,57,78,0.4); background:var(--karte); color:var(--tinte); }
dialog[open] { display:flex; animation:dlg-auf 0.22s cubic-bezier(0.2,0.8,0.2,1); }
@keyframes dlg-auf { from { opacity:0; transform:translateY(14px) scale(0.985); } }
dialog::backdrop { background:rgba(11,42,58,0.55); backdrop-filter:blur(3px); }
.dlg-kopf { background:var(--nacht); color:#fff; padding:1.15rem 1.35rem; display:flex; justify-content:space-between; align-items:flex-start; gap:1rem; flex:none; }
.dlg-kopf h3 { font-size:1.2rem; font-weight:700; letter-spacing:-0.015em; }
.dlg-kopf .unter { font-family:var(--mono); font-size:0.68rem; color:#9FB6BB; margin-top:0.3rem; letter-spacing:0.03em; }
.dlg-schliessen { background:rgba(255,255,255,0.1); border:0; color:#fff; width:32px; height:32px; border-radius:9px; display:grid; place-items:center; cursor:pointer; flex:none; padding:0; transition:background 0.15s; }
.dlg-schliessen:hover { background:rgba(255,255,255,0.22); }
.dlg-schliessen .ikon { width:16px; height:16px; }
.dlg-inhalt { padding:1.15rem 1.35rem 1.35rem; overflow-y:auto; overscroll-behavior:contain; }
.dlg-gitter { display:grid; grid-template-columns:1fr 1fr; gap:0.75rem 1rem; margin-top:0.4rem; }
@media (max-width:480px) { .dlg-gitter { grid-template-columns:1fr; } }
.dlg-feld .df-label { font-size:0.6rem; text-transform:uppercase; letter-spacing:0.1em; color:var(--dunst); font-weight:500; }
.dlg-feld .df-wert { font-size:0.92rem; margin-top:0.12rem; overflow-wrap:anywhere; }
.dlg-abschnitt { border-top:1px solid var(--linie); margin-top:1.05rem; padding-top:0.95rem; }
.dlg-abschnitt h4 { font-size:0.62rem; text-transform:uppercase; letter-spacing:0.1em; color:var(--dunst); font-weight:500; margin-bottom:0.55rem; }
.kontakt-knoepfe { display:flex; flex-wrap:wrap; gap:0.5rem; }
.kontakt-knoepfe a { display:inline-flex; align-items:center; gap:0.4rem; text-decoration:none; border:1px solid var(--linie-stark); border-radius:var(--radius-k); padding:0.42rem 0.85rem; font-size:0.84rem; font-weight:500; color:var(--tinte); background:var(--karte); transition:border-color 0.15s, background 0.15s; }
.kontakt-knoepfe a:hover { border-color:var(--nacht); background:#F4F8F7; }
.zahl-chip { display:inline-block; font-size:0.62rem; padding:0.16rem 0.5rem; border-radius:6px; font-weight:500; letter-spacing:0.04em; }
.zahl-chip.ja { background:var(--laub-hell); color:#1E6B50; }
.zahl-chip.nein { background:var(--signal-hell); color:var(--signal); }
.zahl-chip.wart { background:var(--licht-weich); color:var(--licht-tief); }
.zahl-chip.matt { background:#EDF3F2; color:var(--dunst); }

/* ---------- Zahlungslinks ---------- */
.zl-felder { display:grid; grid-template-columns:13rem 1fr 9rem; gap:0.9rem; }
.zl-smoobu { display:grid; grid-template-columns:1fr 10rem 10rem 6rem; gap:0.9rem; padding-top:1rem; border-top:1px solid var(--linie); }
@media (max-width:760px) { .zl-felder, .zl-smoobu { grid-template-columns:1fr; } }
.zl-ergebnis { background:var(--laub-hell); border-radius:10px; padding:0.9rem 1rem; }
.zl-ergebnis .zl-link { font-weight:600; word-break:break-all; color:#1E6B50; font-family:var(--mono); font-size:0.82rem; }
.zl-knoepfe { display:flex; flex-wrap:wrap; gap:0.5rem; align-items:center; margin-top:0.7rem; }
.zl-knoepfe a { text-decoration:none; display:inline-flex; align-items:center; gap:0.35rem; }
.zl-mini { padding:0.3rem 0.7rem; font-size:0.7rem; border-radius:7px; letter-spacing:0.02em; }
td.zl-aktionen { white-space:nowrap; }
td.zl-aktionen .zl-mini + .zl-mini { margin-left:0.35rem; }
.vl-zahlung { margin-top:0.65rem; }
.vl-zahlung .zl-ergebnis { margin-top:0.4rem; font-size:0.88rem; }
.notizfeld { background:#F4F8F7; border:1px solid var(--linie); border-radius:10px; padding:0.6rem 0.8rem; font-size:0.84rem; white-space:pre-wrap; overflow-wrap:anywhere; }

/* ---------- Optimierung ---------- */
.kippschalter { display:inline-flex; align-items:center; gap:0.6rem; cursor:pointer; font-size:0.9rem; font-weight:500; }
.kippschalter input { display:none; }
.ks-bahn { width:42px; height:24px; background:var(--linie-stark); border-radius:100px; position:relative; transition:background 0.2s; flex:none; }
.ks-bahn::after { content:''; position:absolute; top:3px; left:3px; width:18px; height:18px; background:#fff; border-radius:50%; transition:left 0.2s cubic-bezier(0.2,0.8,0.2,1); box-shadow:0 1px 3px rgba(0,0,0,0.3); }
.kippschalter input:checked + .ks-bahn { background:var(--laub); }
.kippschalter input:checked + .ks-bahn::after { left:21px; }
.opt-kopfzeile { display:flex; flex-wrap:wrap; gap:0.9rem 1.6rem; align-items:center; justify-content:space-between; }
.dreher { display:inline-block; width:15px; height:15px; border:2px solid var(--nacht); border-top-color:transparent; border-radius:50%; animation:drehen 0.9s linear infinite; vertical-align:-3px; margin-right:0.4rem; }
@keyframes drehen { to { transform:rotate(360deg); } }
.score-chips { display:flex; flex-wrap:wrap; gap:0.5rem; margin-top:0.8rem; }
.score-chip { display:inline-flex; align-items:center; gap:0.45rem; border:1px solid var(--linie); background:#F4F8F7; border-radius:8px; padding:0.35rem 0.75rem; font-size:0.68rem; letter-spacing:0.03em; }
.score-chip b { font-variant-numeric:tabular-nums; font-weight:500; }
.vorschlag { background:var(--karte); border:1px solid var(--linie); border-left-width:3px; border-radius:var(--radius); padding:1.05rem 1.2rem; margin-top:0.75rem; box-shadow:var(--schatten); }
.vorschlag.prio-hoch { border-left-color:var(--signal); }
.vorschlag.prio-mittel { border-left-color:var(--licht); }
.vorschlag.prio-niedrig { border-left-color:var(--linie-stark); }
.vorschlag.fertig { opacity:0.8; }
.v-kopf { display:flex; flex-wrap:wrap; gap:0.4rem; align-items:center; margin-bottom:0.45rem; }
.v-kopf .titel { font-family:var(--display); font-weight:700; color:var(--tinte); font-size:1.02rem; flex:1 1 100%; margin-top:0.3rem; letter-spacing:-0.01em; }
.pille { display:inline-block; font-size:0.6rem; font-weight:500; padding:0.16rem 0.5rem; border-radius:6px; letter-spacing:0.06em; text-transform:uppercase; }
.pille.kat { background:#EDF3F2; color:var(--dunst); }
.pille.hoch { background:var(--signal-hell); color:var(--signal); }
.pille.mittel { background:var(--licht-weich); color:var(--licht-tief); }
.pille.niedrig { background:#EDF3F2; color:var(--dunst); }
.pille.machbar { background:var(--himmel); color:var(--himmel-tinte); }
.pille.status-erledigt { background:var(--laub-hell); color:#1E6B50; }
.pille.status-abgelehnt { background:#EDF3F2; color:var(--dunst); }
.pille.status-angenommen { background:var(--licht-weich); color:var(--licht-tief); }
.pille.status-fehlgeschlagen { background:var(--signal-hell); color:var(--signal); }
.pille.status-in_arbeit { background:var(--himmel); color:var(--himmel-tinte); }
.v-text { font-size:0.88rem; margin:0.25rem 0; color:#2A3145; }
.v-begruendung { font-size:0.8rem; color:var(--dunst); margin:0.3rem 0; }
.v-aktionen { display:flex; flex-wrap:wrap; gap:0.5rem; align-items:center; margin-top:0.75rem; }
.v-aktionen input { flex:1 1 260px; width:auto; font-size:0.84rem; padding:0.45rem 0.8rem; }
.v-ergebnis { margin-top:0.7rem; background:#F4F8F7; border:1px solid var(--linie); border-radius:10px; padding:0.65rem 0.85rem; font-size:0.83rem; white-space:pre-wrap; }
.v-ergebnis b { color:var(--tinte); }
details.altbericht { background:var(--karte); border:1px solid var(--linie); border-radius:var(--radius); padding:0.85rem 1.15rem; margin-top:0.7rem; box-shadow:var(--schatten); }
details.altbericht summary { cursor:pointer; display:flex; flex-wrap:wrap; gap:0.6rem; align-items:center; font-size:0.9rem; color:var(--tinte); }
details.altbericht summary b { font-weight:600; }

/* ---------- Heute & morgen / Im Haus ---------- */
.hm-gruppen { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr)); gap:0.8rem; }
.hm-titel { display:flex; align-items:center; gap:0.45rem; font-size:0.64rem; font-weight:500; text-transform:uppercase; letter-spacing:0.1em; color:var(--dunst); margin-bottom:0.55rem; }
.hm-zahl { background:var(--nacht); color:#fff; border-radius:6px; font-size:0.68rem; min-width:1.35rem; text-align:center; padding:0.1rem 0.4rem; font-weight:600; }
.hm-zahl.null { background:#EDF3F2; color:var(--dunst); }
.hm-pers { font-weight:400; letter-spacing:0; text-transform:none; font-family:var(--body); }
.hm-karten { display:grid; gap:0.6rem; align-content:start; }
.hm-karten .hinweis { padding:0.3rem 0; }
.gast-karte.anreise { border-left:3px solid var(--laub); }
.gast-karte.abreise { border-left:3px solid var(--licht); }
.gast-karten { display:grid; grid-template-columns:repeat(auto-fill,minmax(min(100%,250px),1fr)); gap:0.8rem; }
.gast-karte { background:var(--karte); border:1px solid var(--linie); border-radius:var(--radius); padding:0.9rem 1.05rem; box-shadow:var(--schatten); cursor:pointer; transition:border-color 0.18s, transform 0.18s, box-shadow 0.18s; }
.gast-karte:hover { border-color:var(--linie-stark); transform:translateY(-2px); box-shadow:var(--schatten-hoch); }
.gk-kopf { display:flex; justify-content:space-between; gap:0.6rem; align-items:baseline; }
.gk-kopf .name { font-family:var(--display); font-weight:700; color:var(--tinte); overflow-wrap:anywhere; font-size:0.98rem; letter-spacing:-0.01em; }
.gk-zimmer { font-size:0.82rem; margin-top:0.2rem; color:#2A3145; }
.gk-zeitraum { font-size:0.64rem; color:var(--dunst); margin-top:0.2rem; letter-spacing:0.03em; }
.gk-status { font-size:0.78rem; margin-top:0.4rem; color:var(--dunst); }
.gk-status b { color:var(--tinte); }
.gk-status.heute { color:var(--licht-tief); font-weight:600; }

/* ---------- Verlängerungs-Check ---------- */
.vl-waehler { display:flex; flex-wrap:wrap; gap:0.4rem; align-items:center; font-size:0.82rem; color:var(--dunst); }
.vl-waehler button { border:1px solid var(--linie-stark); background:var(--karte); color:var(--tinte); border-radius:7px; min-width:2.1rem; padding:0.3rem 0.5rem; font:inherit; font-size:0.82rem; cursor:pointer; transition:background 0.15s, border-color 0.15s; }
.vl-waehler button:hover { border-color:var(--nacht); }
.vl-waehler button.aktiv { background:var(--nacht); border-color:var(--nacht); color:#fff; font-weight:600; }
.vl-naechte { display:flex; flex-wrap:wrap; gap:0.35rem; margin-top:0.65rem; }
.vl-chip { flex:1 1 3.4rem; max-width:5.2rem; border:1px solid var(--linie); border-radius:8px; padding:0.32rem 0.2rem; font-family:var(--mono); font-size:0.62rem; text-align:center; background:var(--karte); color:var(--dunst); cursor:pointer; }
.vl-chip b { display:block; font-family:var(--body); font-size:0.78rem; color:var(--tinte); font-weight:600; }
.vl-chip.frei { border-color:#BFE4D2; background:var(--laub-hell); }
.vl-chip.belegt { border-color:#F1C7C3; background:var(--signal-hell); color:var(--signal); }
.vl-chip.belegt b { color:var(--signal); }
.vl-chip.gewaehlt { border-color:var(--nacht); box-shadow:inset 0 0 0 1px var(--nacht); }
.vl-status { display:flex; gap:0.5rem; align-items:flex-start; margin-top:0.7rem; padding:0.6rem 0.8rem; border-radius:10px; font-size:0.86rem; }
.vl-status .ikon { margin-top:0.15rem; }
.vl-status.gut { background:var(--laub-hell); color:#1E6B50; }
.vl-status.schlecht { background:var(--signal-hell); color:var(--signal); }
.vl-danach { font-size:0.8rem; color:var(--dunst); margin-top:0.5rem; }
.vl-danach b { color:var(--tinte); }
.vl-alt { margin-top:0.7rem; }
.vl-alt h5 { font-size:0.6rem; text-transform:uppercase; letter-spacing:0.1em; color:var(--dunst); margin-bottom:0.2rem; font-weight:500; }
.vl-alt-zeile { display:flex; justify-content:space-between; gap:0.6rem; font-size:0.84rem; padding:0.35rem 0; border-bottom:1px solid var(--linie); }
.vl-alt-zeile:last-child { border-bottom:0; }
.vl-alt-zeile b { color:var(--tinte); }
.vl-tipp { font-size:0.74rem; color:var(--dunst); margin-top:0.7rem; }

/* ---------- Texte-Karten (JS-generiert) ---------- */
#texte-liste > * { background:var(--karte); border:1px solid var(--linie); border-radius:var(--radius); padding:1rem 1.15rem; box-shadow:var(--schatten); }

/* ---------- Motion-Grundzustände ---------- */
.js .anim-rein { opacity:0; }
@media (prefers-reduced-motion:reduce) {
  .js .anim-rein { opacity:1 !important; transform:none !important; }
  *, *::before, *::after { animation-duration:0.001ms !important; transition-duration:0.001ms !important; }
}

/* ---------- Responsive ---------- */
@media (max-width:640px) { .achse span:nth-child(odd) { visibility:hidden; } }
@media (max-width:1100px) {
  :root { --seite-b:200px; }
  .buehne { grid-template-columns:1fr; }
}
@media (max-width:860px) {
  .app { grid-template-columns:1fr; }
  .seite { position:sticky; top:0; height:auto; z-index:7; padding:0.7rem 0.75rem 0.55rem; overflow:hidden; max-width:100vw;
           display:grid; grid-template-columns:1fr auto; gap:0.35rem 0.6rem; }
  .marke { padding:0 0 0.35rem; gap:0.55rem; }
  .marke-zeichen { width:28px; height:28px; border-radius:8px; }
  .marke-zeichen svg { width:18px; height:18px; }
  .marke-name { font-size:0.92rem; }
  .nav-titel, .seite-fuss, .demo-hinweis { display:none; }
  .nav-scroll { grid-column:1 / -1; display:flex; gap:0.3rem; overflow-x:auto; scrollbar-width:none; padding:0 0 0.2rem; min-width:0; }
  .nav-scroll::-webkit-scrollbar { display:none; }
  .nav-gruppe { display:contents; }
  #reiter button, #reiter a.chat-link { width:auto; flex:none; padding:0.42rem 0.75rem; font-size:0.82rem; gap:0.4rem; white-space:nowrap; border:1px solid rgba(255,255,255,0.08); }
  #reiter button.aktiv::before { display:none; }
  .mobil-demo { grid-column:2; align-self:center; font-family:var(--mono); font-size:0.56rem; letter-spacing:0.08em; text-transform:uppercase; color:var(--licht); display:block; }
  .topbar { padding:0.6rem 0.85rem; gap:0.6rem; }
  .topbar h1 { font-size:1rem; }
  .topbar .stand { display:none; }
  .topbar .knopf-zweit { margin-left:auto; }
  .innen { padding:1rem 0.85rem 3rem; }
  .buehne { padding:1.1rem 1rem 1rem; border-radius:14px; gap:1rem; }
  .buehne-links #haeuser { margin-top:0.6rem; }
  .buehne h2 { font-size:1.15rem; }
  .kacheln { grid-template-columns:repeat(2,1fr); gap:0.6rem; }
  .kachel { padding:0.8rem 0.85rem; min-height:84px; }
  .kachel .zahl { font-size:1.4rem; }
  .held-zahl { font-size:2.4rem; }
  table { font-size:0.8rem; }
  th { padding:0.5rem 0.6rem; }
  td { padding:0.5rem 0.6rem; }
  .trichter { flex-direction:column; gap:0.4rem; }
  .trichter-pfeil { flex-direction:row; justify-content:center; gap:0.45rem; padding:0.1rem 0; }
  .trichter-pfeil .ikon { transform:rotate(90deg); }
  .plot { height:120px; }
  .formular input[type=text], .formular input[type=number], .formular input[type=date], .formular select,
  .formular textarea, .filterzeile input[type=text], .v-aktionen input { font-size:16px; }
  .filterzeile input[type=text] { max-width:none; }
  dialog { width:calc(100vw - 1.2rem); max-height:calc(100vh - 1.6rem); max-height:calc(100dvh - 1.6rem); border-radius:14px; }
  .dlg-kopf { padding:0.9rem 1rem; }
  .dlg-inhalt { padding:0.9rem 1rem 1.1rem; }
  td audio { width:180px; }
}
@media (min-width:861px) { .mobil-demo { display:none; } .nav-scroll { display:contents; } }

/* ---------- moinki-Marke: Young Serif trägt nur Gewicht 400 ---------- */
h1, h2, h3, .diagramm h3, .topbar h1, .kachel .zahl, .held-zahl, .marke-name,
.we-titel, .v-kopf .titel, .gk-kopf .name, .dlg-kopf h3, .formular legend,
.buehne h2 { font-weight:400; letter-spacing:0; }
.hm-zahl { font-family:var(--mono); font-weight:400; }
.abzeichen { color:#fff; }
.buehne-legende { align-items:center; }

/* ---------- v2: Nachtwache + Logbuch (Plan: DESIGN.md v2) ---------- */
.nachtwache { position:relative; overflow:hidden; border-radius:18px; margin-bottom:1rem;
  background:linear-gradient(120deg, #0A2536 0%, #10394E 58%, #174B65 100%); color:#E6EFF1;
  display:grid; grid-template-columns:minmax(0,1.15fr) minmax(300px,0.95fr); gap:1.4rem 2.2rem;
  padding:1.5rem 1.7rem 1.4rem; box-shadow:0 24px 60px rgba(10,37,54,0.28), inset 0 1px 0 rgba(255,255,255,0.06); }
.nachtwache::before { content:""; position:absolute; inset:0; pointer-events:none; opacity:0.9;
  background:
    radial-gradient(1.5px 1.5px at 8% 18%, #fff 60%, transparent 61%),
    radial-gradient(1px 1px at 22% 62%, #fff 60%, transparent 61%),
    radial-gradient(1.3px 1.3px at 37% 12%, #fff 60%, transparent 61%),
    radial-gradient(1px 1px at 48% 40%, #fff 60%, transparent 61%),
    radial-gradient(1.4px 1.4px at 61% 22%, #fff 60%, transparent 61%),
    radial-gradient(1px 1px at 74% 70%, #fff 60%, transparent 61%),
    radial-gradient(1.2px 1.2px at 86% 14%, #fff 60%, transparent 61%),
    radial-gradient(1px 1px at 93% 48%, #fff 60%, transparent 61%),
    radial-gradient(1px 1px at 15% 84%, #fff 60%, transparent 61%),
    radial-gradient(1.2px 1.2px at 55% 88%, #fff 60%, transparent 61%); }
.nachtwache::after { content:""; position:absolute; left:0; right:0; bottom:0; height:38%; pointer-events:none;
  background:linear-gradient(180deg, transparent, rgba(233,123,37,0.10)); }
.nachtwache > * { position:relative; z-index:1; }
.nachtwache .nw-kicker { color:#9FB6BB; display:flex; align-items:center; gap:0.5rem; }
.nw-led { width:8px; height:8px; border-radius:50%; background:#E97B25; box-shadow:0 0 0 0 rgba(233,123,37,0.6); animation:nw-puls 2s ease-in-out infinite; }
@keyframes nw-puls { 0%,100% { box-shadow:0 0 0 0 rgba(233,123,37,0.6); } 55% { box-shadow:0 0 0 7px rgba(233,123,37,0); } }
.nachtwache h2 { color:#fff; font-size:1.55rem; line-height:1.2; margin:0.5rem 0 0.4rem; letter-spacing:-0.005em; max-width:24ch; }
.nw-sub { font-size:0.9rem; color:#B7CBD1; max-width:52ch; margin:0 0 1.15rem; }
.nw-zahlen { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:0.6rem; }
.nw-zahl { background:rgba(255,255,255,0.06); border:1px solid rgba(255,255,255,0.10); border-radius:12px; padding:0.75rem 0.85rem 0.7rem; }
.nw-zahl b { display:block; font-family:var(--display); font-weight:400; font-size:1.9rem; line-height:1; color:#fff; letter-spacing:-0.01em; font-variant-numeric:tabular-nums; white-space:nowrap; }
.nw-zahl span { display:block; font-family:var(--mono); font-size:0.6rem; letter-spacing:0.08em; text-transform:uppercase; color:#9FB6BB; margin-top:0.45rem; line-height:1.4; }
.nw-zahl.warm { background:rgba(233,123,37,0.14); border-color:rgba(233,123,37,0.35); }
.nw-zahl.warm b { color:#FFB877; }
.logbuch { display:flex; flex-direction:column; min-width:0; border-left:1px solid rgba(255,255,255,0.10); padding-left:1.6rem; }
.lb-live { font-family:var(--mono); font-size:0.58rem; letter-spacing:0.12em; text-transform:uppercase; color:#0A2536; background:#3FCFA6; border-radius:100px; padding:0.1rem 0.5rem; margin-left:0.2rem; }
.lb-liste { list-style:none; margin:0.7rem 0 0; padding:0; display:grid; gap:0.4rem; }
.lb-eintrag { display:grid; grid-template-columns:3.2rem minmax(0,1fr); gap:0.7rem; align-items:start; padding:0.5rem 0.65rem; border-radius:10px;
  background:rgba(255,255,255,0.04); border:1px solid rgba(255,255,255,0.06); cursor:pointer; transition:background 0.18s, border-color 0.18s; }
.lb-eintrag:hover { background:rgba(255,255,255,0.09); border-color:rgba(255,255,255,0.16); }
.lb-eintrag.neu { background:rgba(233,123,37,0.14); border-color:rgba(233,123,37,0.4); }
.lb-zeit { font-family:var(--mono); font-size:0.72rem; color:#9FB6BB; letter-spacing:0.04em; padding-top:0.12rem; font-variant-numeric:tabular-nums; }
.lb-text { font-size:0.84rem; line-height:1.4; color:#E6EFF1; overflow:hidden; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; }
.lb-text b { font-weight:600; color:#fff; }
.lb-text .lb-art { display:inline-block; font-family:var(--mono); font-size:0.58rem; letter-spacing:0.08em; text-transform:uppercase; border-radius:5px; padding:0.08rem 0.4rem; margin-right:0.4rem; vertical-align:1px; background:rgba(255,255,255,0.12); color:#D9E5E4; }
.lb-text .lb-art.geld { background:rgba(233,123,37,0.25); color:#FFB877; }
.lb-text .lb-art.tel { background:rgba(63,207,166,0.18); color:#8FE9CF; }
.lb-fuss { font-family:var(--mono); font-size:0.6rem; color:#7F98A0; letter-spacing:0.03em; margin:0.7rem 0 0; }
.nachtwache .kicker { letter-spacing:0.12em; }
@media (max-width:1100px) { .nw-zahlen { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:900px) {
  .nachtwache { grid-template-columns:1fr; gap:1.1rem; padding:1.2rem 1.15rem 1.1rem; }
  .logbuch { border-left:0; padding-left:0; border-top:1px solid rgba(255,255,255,0.10); padding-top:1rem; }
  .nachtwache h2 { font-size:1.3rem; }
  .nw-zahlen { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .nw-zahl b { font-size:1.6rem; }
  .lb-liste li:nth-child(n+6) { display:none; }
}
@media (prefers-reduced-motion:reduce) { .nw-led { animation:none; } }
.nw-woche { margin:0.9rem 0 0; font-family:var(--mono); font-size:0.66rem; letter-spacing:0.03em; color:#9FB6BB; line-height:1.6; }
.nw-woche span { display:inline-block; text-transform:uppercase; letter-spacing:0.1em; font-size:0.58rem; color:#7F98A0; margin-right:0.6rem; }
.nw-woche b { color:#FFB877; font-weight:400; }
/* Willkommens-Karte */
.willkommen { position:fixed; right:18px; bottom:18px; z-index:40; width:min(360px, calc(100vw - 36px)); background:var(--karte); color:var(--tinte);
  border:1px solid var(--linie-stark); border-radius:16px; padding:1.05rem 1.15rem 1.1rem; box-shadow:var(--schatten-hoch), 0 30px 70px rgba(16,57,78,0.22); }
.willkommen .kicker { color:var(--licht-tief); }
.willkommen p { font-size:0.88rem; line-height:1.5; margin:0.5rem 0 0; }
.willkommen .wk-tipp { color:var(--dunst); font-size:0.8rem; }
.wk-knoepfe { display:flex; flex-wrap:wrap; gap:0.5rem; margin-top:0.85rem; }
.wk-knoepfe .knopf { text-decoration:none; background:var(--licht); color:#14100B; }
.wk-knoepfe .knopf:hover { background:var(--licht-tief); color:#fff; }
.wk-zu { position:absolute; top:8px; right:8px; width:30px; height:30px; border:0; background:transparent; color:var(--dunst); font-size:1.3rem; line-height:1; cursor:pointer; border-radius:8px; }
.wk-zu:hover { background:var(--gischt); color:var(--tinte); }
@media (max-width:600px) { .willkommen { right:10px; left:10px; bottom:10px; width:auto; } .willkommen .wk-tipp { display:none; } .nachtwache h2 { font-size:1.15rem; } }