/* stil.css · Oberflaeche des CRM (Abschnitt 3).
   Farben aus der Website gemessen: 03_BUSINESS/KI-Betriebssystem/Projekte/Website/Fertige-Website/stil.css
   (Zeilen 22–35 hell, 134–146 dunkel, Stand 30.09.2026). Kontraste dort nach WCAG AA geprueft.
   Welt: folgt dem System, umschaltbar ueber data-theme="hell" / "dunkel" am <html>. */

@font-face{font-family:"Instrument Serif";src:url("schriften/InstrumentSerif-normal-400.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Instrument Sans";src:url("schriften/InstrumentSans-normal-400-700.woff2") format("woff2");font-weight:400 700;font-style:normal;font-display:swap}

:root{
  --grund:#F5F6F8; --hell:#17202E; --leise:rgba(23,32,46,.68); --stumm:#647186;
  --orange:#FF6A00; --orange-hell:#FF9A3D; --orange-weich:rgba(255,106,0,.12); --auf-orange:#2A1404;
  --gruen:#1FA463; --gruen-weich:rgba(31,164,99,.14);
  --gelb:#E0A200;  --gelb-weich:rgba(224,162,0,.14);
  --rot:#E5342B;   --rot-weich:rgba(229,52,43,.12);
  --glas-a:rgba(255,255,255,.84); --glas-b:rgba(238,241,246,.64); --glas-rand:rgba(255,255,255,.92);
  --glas-kante:#fff; --linie:rgba(23,32,46,.10); --innen:rgba(23,32,46,.035);
  --feld-grund:#fff; --feld-rand:rgba(23,32,46,.12);
  --leise-a:#FFFFFF; --leise-b:#F1F3F6;
  --wurf:0 10px 22px -10px rgba(23,32,46,.3);
  --akzent-text:var(--orange);
  --serif:"Instrument Serif",Georgia,"Times New Roman",serif;
  --sans:"Instrument Sans",-apple-system,"Helvetica Neue",Arial,sans-serif;
  color-scheme:light;
}
:root[data-theme="dunkel"]{
  --grund:#0E0A07; --hell:#F4EDE4; --leise:rgba(244,237,228,.66); --stumm:rgba(244,237,228,.49);
  --orange:#F0862F; --orange-hell:#FFB070; --orange-weich:rgba(240,134,47,.16); --auf-orange:#2A1404;
  --gruen:#63B57C; --gruen-weich:rgba(99,181,124,.16);
  --gelb:#E0B03F;  --gelb-weich:rgba(224,176,63,.16);
  --rot:#D9584B;   --rot-weich:rgba(217,88,75,.16);
  --glas-a:rgba(62,46,35,.52); --glas-b:rgba(24,16,12,.60); --glas-rand:rgba(255,226,196,.13);
  --glas-kante:rgba(255,232,206,.22); --linie:rgba(244,237,228,.12); --innen:rgba(255,236,214,.055);
  --feld-grund:rgba(255,236,214,.06); --feld-rand:rgba(255,226,196,.16);
  --leise-a:rgba(255,236,214,.10); --leise-b:rgba(255,236,214,.05);
  --wurf:0 18px 40px -20px rgba(0,0,0,.8);
  --akzent-text:var(--orange-hell);
  color-scheme:dark;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="hell"]){
    --grund:#0E0A07; --hell:#F4EDE4; --leise:rgba(244,237,228,.66); --stumm:rgba(244,237,228,.49);
    --orange:#F0862F; --orange-hell:#FFB070; --orange-weich:rgba(240,134,47,.16);
    --gruen:#63B57C; --gruen-weich:rgba(99,181,124,.16);
    --gelb:#E0B03F;  --gelb-weich:rgba(224,176,63,.16);
    --rot:#D9584B;   --rot-weich:rgba(217,88,75,.16);
    --glas-a:rgba(62,46,35,.52); --glas-b:rgba(24,16,12,.60); --glas-rand:rgba(255,226,196,.13);
    --glas-kante:rgba(255,232,206,.22); --linie:rgba(244,237,228,.12); --innen:rgba(255,236,214,.055);
    --feld-grund:rgba(255,236,214,.06); --feld-rand:rgba(255,226,196,.16);
    --leise-a:rgba(255,236,214,.10); --leise-b:rgba(255,236,214,.05);
    --wurf:0 18px 40px -20px rgba(0,0,0,.8);
    --akzent-text:var(--orange-hell);
    color-scheme:dark;
  }
}

*{box-sizing:border-box}
html,body{margin:0}
body{background:var(--grund);color:var(--hell);font:15px/1.45 var(--sans);min-height:100vh}
h1,h2,h3{font-family:var(--serif);font-weight:400;margin:0 0 .5em;letter-spacing:.005em}
h2{font-size:1.45rem}
a{color:var(--akzent-text)}
kbd{font:600 .72em/1 var(--sans);border:1px solid var(--linie);border-bottom-width:2px;border-radius:5px;padding:.15em .4em;margin-right:.35em;color:var(--leise);background:var(--innen)}
.stumm{color:var(--stumm)}
[hidden]{display:none!important}

/* ── Kopf ── */
.kopf{position:sticky;top:0;z-index:5;display:flex;align-items:center;gap:1.2rem;padding:.7rem 1.4rem;
  background:color-mix(in srgb,var(--grund) 88%,transparent);backdrop-filter:blur(12px);border-bottom:1px solid var(--linie)}
.marke{font:1.7rem/1 var(--serif)}
.beispiel{font:600 .7rem/1 var(--sans);text-transform:uppercase;letter-spacing:.08em;background:var(--gelb-weich);color:var(--hell);border:1px solid var(--gelb);border-radius:99px;padding:.3em .7em;vertical-align:middle;margin-left:.4rem}
.reiter{display:flex;gap:.3rem}
.reiter button{background:none;border:0;color:var(--leise);font:500 1rem var(--sans);padding:.45rem .8rem;border-radius:9px;cursor:pointer}
.reiter button.an{color:var(--hell);background:var(--orange-weich);box-shadow:inset 0 -2px 0 var(--orange)}
.kopf-zahl{margin-left:auto;color:var(--leise);font-variant-numeric:tabular-nums}
.kopf-zahl{display:flex;align-items:center}
.kopf-zahl b{color:var(--hell)}

main{padding:1.2rem 1.4rem 4rem;max-width:1500px;margin:0 auto}
.ansicht{display:none}
.ansicht.an{display:block}

/* ── Flaechen und Knoepfe ── */
.glas{background:linear-gradient(145deg,var(--glas-a),var(--glas-b));border:1px solid var(--glas-rand);border-radius:16px;
  box-shadow:inset 0 1px 0 var(--glas-kante),var(--wurf);padding:1.1rem 1.25rem;margin-bottom:1rem}
button{font:inherit;cursor:pointer}
button.haupt{background:linear-gradient(180deg,var(--orange-hell),var(--orange));color:var(--auf-orange);border:1px solid rgba(255,106,0,.55);
  border-radius:11px;padding:.6rem 1.1rem;font-weight:600;box-shadow:inset 0 1px 0 rgba(255,255,255,.38),0 6px 14px -6px rgba(255,106,0,.55)}
button.haupt kbd{color:var(--auf-orange);border-color:rgba(42,20,4,.3);background:rgba(255,255,255,.25)}
button.haupt:disabled{opacity:.45;cursor:not-allowed}
button.gross{font-size:1.15rem;padding:.85rem 1.5rem}
button.leise,.stufe1 button,.stufe2 button,.passt button,.chips button,.skala button{
  background:linear-gradient(180deg,var(--leise-a),var(--leise-b));color:var(--hell);border:1px solid var(--linie);border-radius:10px;padding:.5rem .8rem}
button.klein{padding:.3rem .6rem;font-size:.9rem}
button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:2px solid var(--orange);outline-offset:2px}
input,select,textarea{font:inherit;color:var(--hell);background:var(--feld-grund);border:1px solid var(--feld-rand);border-radius:9px;padding:.45rem .6rem;width:100%}
label{display:flex;flex-direction:column;gap:.25rem;font-size:.88rem;color:var(--leise)}
label.haken{flex-direction:row;align-items:center;gap:.5rem;flex-wrap:wrap}
label.haken input{width:auto}
.etikett{font-size:.88rem;color:var(--leise)}
.hinweis{font-size:.8rem;color:var(--akzent-text)}
.knoepfe{display:flex;gap:.6rem;justify-content:flex-end;margin-top:1rem}
/* In Dialogen steht der Bestaetigen-Knopf im Quelltext zuerst (Enter loest den ersten aus), rechts angezeigt */
.dialog .knoepfe{flex-direction:row-reverse;justify-content:flex-start}

/* ── Fragezeichen-Hilfen (Rons Abnahme Abschnitt 3): ein Satz beim Drueberfahren, per Klick oder Tastatur ── */
/* N7 (Ronny, 04.10.2026): kleiner und grauer, damit sie im Hintergrund bleiben; beim Drueberfahren wie vorher */
.hilfe{display:inline-flex;align-items:center;justify-content:center;width:.95rem;height:.95rem;border-radius:50%;border:1px solid var(--linie);
  color:var(--stumm);background:none;opacity:.75;font:600 .62rem/1 var(--sans);letter-spacing:0;text-transform:none;cursor:help;vertical-align:middle;
  margin-left:.25rem;user-select:none;flex:none;align-self:center}
.hilfe:hover,.hilfe.an{border-color:var(--orange);color:var(--hell);background:var(--orange-weich);opacity:1}
.hilfe:focus-visible{outline:2px solid var(--orange);outline-offset:2px}
.blase{position:fixed;inset:auto;margin:0;border:0;max-width:340px;width:max-content;background:var(--hell);color:var(--grund);padding:.6rem .8rem;border-radius:10px;
  box-shadow:var(--wurf);font:400 .88rem/1.4 var(--sans);white-space:pre-line;pointer-events:none;overflow:visible}
.hinweis-feld{border:1px solid var(--gelb);background:var(--gelb-weich);border-radius:10px;padding:.6rem .8rem;margin-bottom:.8rem}
.hinweis-feld .etikett{color:var(--hell);font-weight:600}
.vorlesen{margin:.35rem 0 .5rem;font-size:.95rem}
.hinweis-kasten{border-left:4px solid var(--gruen);background:var(--gruen-weich);border-radius:10px;padding:.6rem .9rem;margin-bottom:1rem}

/* ── Uebersicht (hiess bis zur Abnahme "Heute") ── */
.titel{font-size:2rem;margin:.1rem 0 .9rem}
.titel .stumm{font:400 1rem var(--sans);margin-left:.5rem}
.kacheln{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem;margin-bottom:1rem}
.kachel .zahl{font:2.6rem/1 var(--serif);font-variant-numeric:tabular-nums}
.kachel .ziel{color:var(--stumm);font-size:1rem}
.kachel .name{color:var(--leise);font-size:.9rem;margin-bottom:.4rem}
.balken{height:6px;background:var(--innen);border-radius:9px;margin-top:.7rem;overflow:hidden}
.balken i{display:block;height:100%;background:linear-gradient(90deg,var(--orange-hell),var(--orange))}
.start{display:flex;align-items:end;gap:1.2rem;margin:.4rem 0 1.2rem}
.feld-kurz{max-width:260px}
.zwei{display:grid;grid-template-columns:1.25fr 1fr;gap:1rem;align-items:start}
.zeilen{list-style:none;margin:0;padding:0}
.zeilen li{display:grid;grid-template-columns:5.5rem 1fr auto;gap:.8rem;padding:.5rem .2rem;border-top:1px solid var(--linie);cursor:pointer}
.zeilen li:first-child{border-top:0}
.zeilen li.spaeter{opacity:.55}
.zeilen .zeit{font-variant-numeric:tabular-nums;color:var(--leise)}
.zeilen .grund{color:var(--stumm);font-size:.85rem}
.warnung{border-left:4px solid var(--rot);background:var(--rot-weich);border-radius:10px;padding:.6rem .9rem;margin-bottom:.6rem}

/* ── Anrufen ── */
.band{display:flex;align-items:center;gap:1rem;padding:.7rem 1rem;border-radius:12px;background:var(--gruen-weich);border:1px solid var(--gruen);margin-bottom:1rem}
.band.korrektur{background:var(--gelb-weich);border-color:var(--gelb)}
.band .text{flex:1}
.anruf{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:1rem;align-items:start}
.karte h2{font-size:2rem;margin-bottom:.15rem}
.karte .unter{color:var(--leise);margin-bottom:.9rem}
.nummer{display:block;font:600 2.1rem/1.1 var(--sans);letter-spacing:.02em;color:var(--hell);text-decoration:none;font-variant-numeric:tabular-nums;margin:.2rem 0 .8rem}
.nummer:hover{color:var(--akzent-text)}
.merkmale{display:flex;flex-wrap:wrap;gap:.4rem;margin-bottom:.9rem}
.marke-klein{font-size:.8rem;border-radius:99px;padding:.2em .7em;border:1px solid var(--linie);background:var(--innen)}
.ampel-gruen{border-color:var(--gruen);background:var(--gruen-weich)}
.ampel-gelb{border-color:var(--gelb);background:var(--gelb-weich)}
.ampel-rot{border-color:var(--rot);background:var(--rot-weich)}
.block{border-top:1px solid var(--linie);padding:.6rem 0}
.block .etikett{display:block;font-size:.78rem;text-transform:uppercase;letter-spacing:.06em;color:var(--stumm);margin-bottom:.15rem}
.person{font-size:1.1rem}
.person a{font-variant-numeric:tabular-nums}
.verlauf{list-style:none;margin:0;padding:0;font-size:.9rem;max-height:260px;overflow:auto}
.verlauf li{padding:.35rem 0;border-top:1px dashed var(--linie)}
.verlauf li.alt{text-decoration:line-through;opacity:.5}
.verlauf .zeit{color:var(--stumm);font-variant-numeric:tabular-nums;margin-right:.5rem}
.kopfzeile-erf{display:flex;justify-content:space-between;align-items:center}
.stufe1{display:grid;grid-template-columns:repeat(3,1fr);gap:.6rem;margin-bottom:.8rem}
.stufe1 button{font-size:1.1rem;padding:.9rem .6rem;font-weight:600}
.stufe1 button.an{border-color:var(--orange);background:var(--orange-weich);box-shadow:inset 0 0 0 1px var(--orange)}
.stufe2{display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:.8rem;min-height:2.6rem}
.stufe2 button{font-weight:600}
.stufe2 button.stark{border-color:var(--orange);background:var(--orange-weich)}
.stufe2 button.gefahr{border-color:var(--rot)}
.stufe2 .gruppe{display:flex;gap:.3rem;align-items:center;flex-wrap:wrap}
.stufe2 .gruppe > span{color:var(--leise);font-size:.88rem;margin-right:.2rem}
.passt{display:flex;flex-wrap:wrap;gap:.4rem;align-items:center;font-size:.9rem;padding-bottom:.8rem;border-bottom:1px solid var(--linie)}
.passt button{padding:.3rem .6rem}
.extras summary{cursor:pointer;padding:.6rem 0;color:var(--leise)}
.extras-raster{display:grid;grid-template-columns:1fr 1fr;gap:.7rem}
.breit{grid-column:1/-1}
.skala,.chips{display:flex;flex-wrap:wrap;gap:.3rem;margin-top:.25rem}
.skala button{width:2.4rem;padding:.35rem 0;font-variant-numeric:tabular-nums}
.chips button{padding:.3rem .6rem;font-size:.88rem}
.skala button.an,.chips button.an{border-color:var(--orange);background:var(--orange-weich)}
.leer{text-align:center;padding:3rem}

/* ── Leads ── */
.filter{display:flex;flex-wrap:wrap;gap:.6rem;align-items:center}
.filter input[type=search]{flex:2 1 280px;width:auto}
.filter select{flex:1 1 140px;width:auto}
.leads-raster{grid-template-columns:minmax(0,1.7fr) minmax(330px,1fr)}
.tabelle-rahmen{overflow:auto;max-height:72vh;padding:0}
.tabelle{width:100%;border-collapse:collapse;font-size:.9rem}
.tabelle th{position:sticky;top:0;z-index:1;background:var(--grund);text-align:left;font-weight:600;color:var(--leise);padding:.6rem .6rem;border-bottom:1px solid var(--linie)}
.tabelle td{padding:.45rem .6rem;border-bottom:1px solid var(--linie);white-space:nowrap}
.tabelle td:nth-child(2){max-width:18rem;overflow:hidden;text-overflow:ellipsis}
.tabelle td:nth-child(4){max-width:12rem;overflow:hidden;text-overflow:ellipsis}
.klein-text{font-size:.8rem;overflow:hidden;text-overflow:ellipsis}
.tabelle tbody tr{cursor:pointer}
.tabelle tbody tr:hover,.tabelle tbody tr.an{background:var(--orange-weich)}
#l-mehr{padding:0 .7rem}
/* N7 (Ronnys Freigabe am Bild, 04.10.2026): Zeilenfarbe je Stand, zarte Flaeche plus Kante links. Ausgewaehlt/Hover bleibt orange */
.tabelle tbody tr.st-unterwegs{background:color-mix(in srgb,var(--gruen) 6%,transparent)}
.tabelle tbody tr.st-unterwegs td:first-child{box-shadow:inset 3px 0 0 color-mix(in srgb,var(--gruen) 45%,transparent)}
.tabelle tbody tr.st-kunde{background:var(--gruen-weich)}
.tabelle tbody tr.st-kunde td:first-child{box-shadow:inset 3px 0 0 var(--gruen)}
.tabelle tbody tr.st-kunde td:nth-child(4){font-weight:600}
.tabelle tbody tr.st-ruht{color:var(--stumm)}
.tabelle tbody tr.st-raus{color:var(--stumm);background:color-mix(in srgb,var(--rot) 7%,transparent)}
.tabelle tbody tr.st-raus td:first-child{box-shadow:inset 3px 0 0 color-mix(in srgb,var(--rot) 45%,transparent)}
.tabelle tbody tr.st-ruht .stumm,.tabelle tbody tr.st-raus .stumm{color:inherit}
.tabelle tbody tr:hover,.tabelle tbody tr.an{background:var(--orange-weich)}
.tabelle th .sortieren{background:none;border:0;padding:0;color:inherit;font-weight:inherit;text-align:left}
.tabelle th .sortieren:hover,.tabelle th[aria-sort="ascending"] .sortieren,.tabelle th[aria-sort="descending"] .sortieren{color:var(--hell)}
.tabelle th .sortieren::after{content:"\200B\2195";margin-left:.3rem;opacity:.35;font-size:.8em}
.tabelle th[aria-sort="ascending"] .sortieren::after{content:"\200B\25B2";opacity:1;color:var(--orange)}
.tabelle th[aria-sort="descending"] .sortieren::after{content:"\200B\25BC";opacity:1;color:var(--orange)}

/* ── Trichter und Zahlen (Abschnitt 5) ── */
.frage{border-left:4px solid var(--gelb);background:linear-gradient(145deg,var(--gelb-weich),var(--glas-b))}
.zeilen li.ohne-klick{cursor:default}
.zeilen.schmal li{grid-template-columns:1fr auto;cursor:default}
.trichter{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1rem;align-items:start}
.trichter .spalte h2{font-size:1.25rem;display:flex;align-items:center;gap:.4rem}
.trichter .anzahl{font:600 .85rem var(--sans);color:var(--stumm);margin-left:auto}
.tkarte{border:1px solid var(--linie);background:var(--innen);border-radius:12px;padding:.7rem .8rem;margin-top:.6rem}
.tkarte .name{font-weight:600;cursor:pointer}
.tkarte .name:hover{color:var(--akzent-text)}
.tkarte .zeile{font-size:.86rem;color:var(--leise);margin-top:.2rem}
.tkarte .zeile.vorbei{color:var(--hell);font-weight:600}
.tkarte .zeile.alt{color:var(--stumm)}
.tkarte .knoepfe{justify-content:flex-start;flex-wrap:wrap;margin-top:.6rem;gap:.4rem}
.knoepfe.links{justify-content:flex-start;flex-wrap:wrap}
.zahlen-kopf{display:flex;align-items:end;gap:1rem;margin-bottom:.9rem}
.zahlen-kopf .titel{margin:0 .6rem 0 0}
.kacheln.sieben{grid-template-columns:repeat(7,minmax(0,1fr))}
.kacheln.sieben .zahl{font-size:2rem}
.kacheln.sieben .name{white-space:nowrap}
.tabelle-rahmen.flach{max-height:none;box-shadow:none;border:0;background:none;margin:0}
.tabelle.zeile td,.tabelle.zeile th{text-align:center;padding:.35rem .45rem;position:static}
.tabelle.zeile td.ziel,.tabelle.zeile th.ziel{color:var(--stumm);background:var(--innen)}
.tabelle.zeile td.fehlt{color:var(--rot)}
.tabelle td.zahl,.tabelle th.zahl{text-align:right;font-variant-numeric:tabular-nums}
#z-quoten td:first-child{white-space:normal}
.ziele-raster{display:grid;grid-template-columns:1fr 1fr;gap:.7rem}
.ziele-raster .knoepfe{grid-column:1/-1;margin-top:0}
fieldset.wahl.umbruch{flex-wrap:wrap;gap:.5rem 1.2rem}
.dialog .unter{color:var(--leise);margin:-.2rem 0 .8rem}
.karte > .knoepfe{flex-wrap:wrap;align-items:center}
.karte > .knoepfe > span{display:inline-flex;align-items:center}
.karte > .knoepfe button{white-space:nowrap}
.vorschlag{border-left:4px solid var(--gelb);background:var(--gelb-weich);border-radius:10px;padding:.6rem .9rem;margin:.6rem 0}
.von-hand{margin-top:.4rem;font:13px ui-monospace,Menlo,monospace}
.unsichtbar{position:fixed;left:-999px;top:0;width:10px;height:10px;opacity:0}
.band .knoepfe-band{display:flex;gap:.5rem;flex-wrap:wrap}

/* ── Datenschutz (Abschnitt 6) ── */
.liste-schlicht{list-style:none;margin:0;padding:0}
.liste-schlicht li{padding:.35rem 0;border-top:1px solid var(--linie)}
.liste-schlicht li:first-child{border-top:0}
#ds-vorschlag td:first-child,#ds-vorschlag th:first-child{width:2rem}
#ds-vorschlag input,#ds-alle,#ds-art14 select{width:auto}
#ds-art14 .knoepfe{margin-top:0;gap:.4rem;align-items:center}
#ds-vorschlag tbody tr,#ds-art14 tbody tr,#ds-sperrliste tbody tr{cursor:default}
#ds-vorschlag tbody tr:hover,#ds-sperrliste tbody tr:hover{background:none}
#ds-art14 tbody tr:hover{background:var(--orange-weich)}
.tage-rot{color:var(--rot);font-weight:600}
.tage-gelb{color:var(--gelb);font-weight:600}
.warnung button{margin-left:.6rem}
#ds-form textarea{resize:vertical}

/* ── Nacharbeiten N3 und N4: Verlangen, Abteilungen, Gespraechshilfe, Einstellungen ── */
.karte .verlangen{font-size:1.05rem}
.karte .frage-zentrale{color:var(--leise);font-size:.95rem;margin-top:.15rem}
.karte .abteilung{font-variant-numeric:tabular-nums;margin-top:.15rem}
.karte .abteilung a{font-weight:600}
/* Ganz unten, gut lesbar beim Waehlen: Schrift wie die Karte, nie breiter als die Karte, kein eigener Rollbalken */
.gespraechshilfe{margin-top:.4rem;max-width:100%;overflow:visible;overflow-wrap:anywhere}
.gespraechshilfe h3{font-size:1.35rem;margin:.1rem 0 .5rem}
.gespraechshilfe .vorbereitung{border:1px solid var(--linie);background:var(--innen);border-radius:10px;padding:.6rem .8rem;margin-bottom:.6rem}
.gespraechshilfe .vorbereitung .etikett{display:block;font-size:.78rem;text-transform:uppercase;letter-spacing:.06em;color:var(--stumm);margin-bottom:.25rem}
.gespraechshilfe .vorbereitung-text{white-space:pre-line}
.gespraechshilfe .vorbereitung p{margin:0}
.spickzettel{border:1px solid var(--linie);border-radius:10px;padding:0 .8rem}
.spickzettel summary{cursor:pointer;padding:.6rem 0;font-weight:600}
.spickzettel[open] summary{border-bottom:1px solid var(--linie);margin-bottom:.4rem}
.spickzettel-text{padding-bottom:.4rem}
.spickzettel-text h4{font:600 1rem/1.3 var(--sans);margin:.8rem 0 .25rem}
.spickzettel-text p{margin:.35rem 0}
.spickzettel-text ul,.spickzettel-text ol{margin:.2rem 0 .4rem;padding-left:1.3rem}
.spickzettel-text li{margin:.15rem 0}
.einstellungen{max-width:980px}
.e-raster{display:grid;gap:.8rem}
.e-raster textarea{resize:vertical;font:14px/1.5 ui-monospace,Menlo,monospace}
.e-raster .knoepfe{margin-top:0}

/* ── Import und Dialoge ── */
.import-raster,.dialog-raster{display:grid;grid-template-columns:1fr 1fr;gap:.8rem}
.bericht{white-space:pre-wrap;background:var(--innen);border:1px solid var(--linie);border-radius:10px;padding:.9rem;font:13px/1.5 ui-monospace,Menlo,monospace}
dialog.dialog{color:var(--hell);max-width:620px;width:92vw;padding:1.4rem;margin:auto;max-height:92vh;overflow:auto}
dialog::backdrop{background:rgba(14,10,7,.45);backdrop-filter:blur(3px)}
fieldset.wahl{border:1px solid var(--linie);border-radius:10px;display:flex;gap:1.2rem}
fieldset.wahl label{flex-direction:row;align-items:center;gap:.4rem}
fieldset.wahl input{width:auto}

.meldung{position:fixed;bottom:1.2rem;left:50%;transform:translateX(-50%);background:var(--hell);color:var(--grund);padding:.7rem 1.1rem;border-radius:10px;box-shadow:var(--wurf);z-index:20;max-width:80vw}
.meldung.fehler{background:var(--rot);color:#fff}

@media (max-width:980px){
  .anruf,.zwei,.leads-raster,.trichter{grid-template-columns:1fr}
  .kacheln,.kacheln.sieben{grid-template-columns:repeat(2,1fr)}
  .kopf{flex-wrap:wrap}
}

/* ── Nacharbeit N6a: mehrere Nutzer (Servermodus) ── */
.kopf-zahl,.ich,#abmelden{white-space:nowrap}
#problem-knopf{font-weight:700;min-width:2.1rem}
:root[data-modus="server"] .kopf{flex-wrap:wrap;row-gap:.4rem}
.tabelle th.zahl{text-align:right}
.ich{font-weight:600;border:1px solid var(--linie);border-radius:99px;padding:.15em .6em;background:var(--innen)}
.anmeldung{position:fixed;inset:0;z-index:30;display:flex;align-items:center;justify-content:center;padding:1.5rem;background:var(--grund);overflow:auto}
.anmelde-kasten{width:min(460px,100%);display:flex;flex-direction:column;gap:.8rem}
.anmelde-kasten .marke{margin-bottom:.2rem}
.anmelde-kasten .knoepfe{justify-content:flex-start}
.schritte{margin:0;padding-left:1.2rem;display:flex;flex-direction:column;gap:.9rem}
.schritte li{display:flex;flex-direction:column;gap:.5rem}
.qr-feld{display:flex;align-items:center;gap:1rem;flex-wrap:wrap}
.qr-feld img{width:180px;height:180px;background:#fff;border-radius:8px;image-rendering:pixelated}
.qr-feld code{font:15px/1.6 ui-monospace,Menlo,monospace;max-width:13rem;overflow-wrap:normal}
.schritte p{margin:0}
.belegt-hinweis{font-weight:600}
.kuerzel{font-weight:600;color:var(--akzent-text)}
.nu-raster{display:grid;grid-template-columns:8rem 1fr 12rem auto;gap:.8rem;align-items:end}
.tabelle tr.summe td{font-weight:600;border-top:2px solid var(--linie)}
.tabelle td.zahl{text-align:right;font-variant-numeric:tabular-nums}
@media (max-width:700px){ .nu-raster{grid-template-columns:1fr} }