/* Funkenart Cockpit — hell, editorial, reduziert */
:root{
  --bg:#f7f7f5; --panel:#ffffff; --panel2:#f2f2ef;
  --line:#e7e7e3; --line2:#d8d8d2; --hair:#ececea;
  --text:#191a1c; --muted:#6f7378; --dim:#9a9ea3;
  --accent:#e8590c; --accentDark:#c74a08; --accentSoft:#fdf0e7;
  --green:#1e7d43; --greenSoft:#eaf5ee;
  --red:#c92a2a; --redSoft:#fbeeee;
  --blue:#1864ab; --violet:#6741d9;
  --r:8px; --rs:4px;
}

/* ========================================================================== */
/* UI-Runde 2 · ruhig, freundlich, flach und gut lesbar                       */
/* ========================================================================== */
:root{
  --ui-bg:#f7f7f5;
  --ui-soft:#fbf8f5;
  --ui-warm:#fff3eb;
  --ui-line:#e6e3df;
  --ui-text:#1b1b1d;
  --ui-muted:#6f737b;
  --ui-orange:#eb5a1f;
}
body{background:var(--ui-bg)!important;color:var(--ui-text)}
/* Dezenter i-Hinweis mit Tooltip beim Drüberfahren */
.fa-i{display:inline-flex;align-items:center;justify-content:center;width:15px;height:15px;border-radius:50%;border:1px solid #c8ccd0;color:#9a9ea3;font-size:10px;font-style:normal;font-weight:600;line-height:1;cursor:help;position:relative;vertical-align:middle;flex:none;text-transform:none;letter-spacing:normal}
.fa-i:hover,.fa-i:focus{border-color:var(--accent);color:var(--accent);outline:none}
.fa-i .fa-tip{display:none;position:absolute;bottom:calc(100% + 8px);left:50%;transform:translateX(-50%);width:min(260px,70vw);background:#191a1c;color:#fff;font-size:12.5px;font-weight:400;font-style:normal;text-transform:none;letter-spacing:.01em;line-height:1.5;text-align:left;padding:9px 12px;border-radius:8px;z-index:30;box-shadow:0 8px 24px rgba(0,0,0,.2)}
.fa-i .fa-tip::after{content:"";position:absolute;top:100%;left:50%;transform:translateX(-50%);border:5px solid transparent;border-top-color:#191a1c}
.fa-i:hover .fa-tip,.fa-i:focus .fa-tip{display:block}
.content{max-width:1480px!important;padding:38px 44px 80px!important}
.card,.dsek,.kpi,.knstreifen,.knews,.vgneu{box-shadow:none!important;border-color:var(--ui-line)!important}
.lmut,.muted,.sub,.hintline,.obnote,.vorb-sub,.knews p,.knews-sub,.vgz-meta,.vgz-beschr{
  font-size:14px!important;line-height:1.55!important;color:var(--ui-muted)!important
}
.dashsub{font-size:15px;line-height:1.5;color:var(--ui-muted)}
/* Leerer Start: noch kein Kunde */
.dashstart{max-width:680px}
.dashstart-karte{background:var(--panel);border:1px solid var(--hair);border-radius:var(--r);padding:40px 40px 36px}
.dashstart-karte h2{font-size:22px;letter-spacing:-.02em;margin:0 0 12px}
.dashstart-karte p{font-size:15.5px;line-height:1.6;color:var(--muted);margin:0 0 26px;max-width:52ch}
.dashstart-akt{display:flex;gap:12px;flex-wrap:wrap}
.dashstart-weg{list-style:none;display:flex;flex-wrap:wrap;align-items:center;gap:10px 20px;margin:26px 2px 0;padding:0}
.dashstart-weg li{display:flex;align-items:center;gap:9px;font-size:13.5px;font-weight:600;color:var(--muted)}
.dashstart-weg .dsw-nr{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;border-radius:50%;background:var(--accentSoft);color:var(--accentDark);font-size:12px;font-weight:700}
.dashstart-weg li+li::before{content:"→";color:var(--dim);margin-right:11px;font-weight:400}
@media(max-width:560px){.dashstart-karte{padding:28px 22px}.dashstart-weg{gap:10px 14px}}
.head{margin-bottom:28px!important}.head h1{font-size:30px!important;letter-spacing:-.035em}
.btn{min-height:40px;border-radius:8px;font-weight:650;box-shadow:none!important}
.btn.primary{background:#1b1b1d;border-color:#1b1b1d;color:#fff}
.btn.primary:hover{background:#000;border-color:#000}
.btn.ghost{background:transparent;color:#52565d}

/* Admin-Startseite: keine gequetschten Innen-Scroller und keine Doppelung */
.kpis.zwei{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;margin:0 0 28px}
.kpis.zwei .kpi{min-height:92px;padding:20px 22px;border-radius:12px;background:#fff}
.kpi-txt b{font-size:16px}.kpi-txt>span{font-size:14px;line-height:1.45;margin-top:4px}
.dashgrid{gap:22px!important}
.dashgrid .dsek{
  height:auto!important;min-height:0!important;max-height:none!important;overflow:visible!important;padding:24px 24px 22px;border-radius:12px;background:#fff
}
.dashgrid>.dk-h-kompakt,.dashgrid>.dk-h-standard,.dashgrid>.dk-h-gross{padding:0!important;background:transparent!important;border:0!important}
.dsek-titel{position:static!important;display:flex;align-items:center;flex-wrap:wrap;gap:7px 14px;margin:0 0 18px!important;padding:0!important;background:none!important;font-size:17px}
.dsek-titel .mehr{font-size:13.5px!important;font-weight:550!important;white-space:nowrap}
.dsek-titel .mehr:first-of-type{margin-left:auto}
.hbfilter{margin:0 0 14px!important;gap:8px}.hbfilter button{min-height:34px;padding:6px 12px}
.dashgrid .hbzeile,.dashgrid .heutezeile,.dashgrid .terminzeile,.dashgrid .action,.dashgrid .aktzeile{
  min-height:52px!important;height:auto!important;padding:10px 0!important;overflow:visible!important
}
.hbzeile{grid-template-columns:minmax(0,1fr) auto!important;gap:10px 18px!important}
.hbzeile .hbmain{min-width:0}.hbzeile .hbmain b{white-space:normal;line-height:1.35}
.hbzeile .hbactions{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:8px}
.terminzeile{grid-template-columns:76px 52px minmax(0,1fr)!important;gap:8px 12px!important}
.terminquelle{display:none!important}.termintitel{white-space:normal!important;line-height:1.35}
.projlist{display:grid;gap:0}.proj{min-height:68px!important;height:auto!important;grid-template-columns:minmax(190px,1.2fr) minmax(150px,.9fr) auto!important;gap:18px!important;padding:12px 0!important}
.proj .pname{min-width:0}.proj .pname>.sub{display:block;white-space:normal;margin-top:4px}
.proj .ppct{display:flex;align-items:center;justify-content:flex-end;gap:8px;min-width:138px;white-space:nowrap}
.proj .hbchip{max-width:none;white-space:nowrap}
.kompaktreihe{gap:12px!important}.kompaktwert{min-height:84px!important;padding:16px!important;border-radius:9px!important}
.notizzeile{min-height:44px!important;padding:8px 0!important}.notiztext{line-height:1.45}

/* Kundenakte: ruhigere Leseflächen, wichtige Inhalte statt Systemhinweise */
.ptabs{gap:28px}.ptabs a{font-size:14.5px}
.tabs2{gap:26px}.tabs2 a{font-size:14px}
.rsec,.kicker{font-size:11px;line-height:1.3;letter-spacing:.12em;text-transform:uppercase;font-weight:750;color:#8b8e94}
.vorb-zeile{min-height:74px;padding:16px 0;gap:15px}.vorb-txt b{font-size:15px}.vorb-sub{margin-top:4px}
.vorb-fortschritt{margin:10px 0 18px}.vorb-balken span{background:var(--ui-orange)}

/* Vorgang erstellen: klare Wahl statt abgeschnittener Mini-Cards */
.vgneu{margin:20px 0 26px!important;padding:30px!important;border-radius:12px!important;background:#fff!important}
.vgneu-head{display:block;margin-bottom:18px}
.vgneu-head h3{font-size:20px;margin:5px 0 6px}.vgneu-head p{font-size:14px;line-height:1.5;color:var(--ui-muted);margin:0;max-width:640px}
/* Klare Trennung zwischen „Aktuelle Vorgänge" und „Neuer Vorgang" */
.vgneu-trenner{margin-top:0;padding-top:24px;border-top:1px solid var(--hair)}
#anforderungen #vg-offen{padding-bottom:26px}
.vg-news-link{display:grid;grid-template-columns:42px 1fr auto;align-items:center;gap:12px;padding:14px 16px;border:1px solid #ffd3bd;border-radius:10px;background:var(--ui-warm);color:var(--ui-text);text-decoration:none}
.vg-news-link small{display:block;margin-top:3px;color:var(--ui-muted);font-size:13px}.vg-news-link:hover{border-color:var(--ui-orange)}
.vgtypen{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:10px!important;margin:0 0 18px!important}
.vgtypkarte{position:relative;display:flex!important;align-items:flex-start;gap:12px;min-width:0!important;min-height:96px!important;padding:15px!important;border:1px solid var(--ui-line)!important;border-radius:10px!important;background:#fff!important;cursor:pointer}
.vgtypkarte input{position:absolute;opacity:0;pointer-events:none}.vgtypkarte.an{border-color:var(--ui-orange)!important;background:#fff8f3!important;box-shadow:inset 0 0 0 1px var(--ui-orange)!important}
.vgtypkarte.an:after{content:'✓';position:absolute;right:10px;top:9px;color:var(--ui-orange);font-size:14px;font-weight:800}
.vgtyp-icon{display:grid;place-items:center;flex:0 0 36px;width:36px;height:36px;border-radius:9px;background:#f4f2ef;color:var(--ui-orange);font-weight:800;font-size:16px}
.vgtyp-copy{display:block;min-width:0;padding-right:10px}.vgtyp-copy .obkarte-titel{font-size:14.5px;line-height:1.3}.vgtyp-copy .obkarte-sub{display:block;margin-top:5px;font-size:13px;line-height:1.4;color:var(--ui-muted)}
.vg-vorlage-details{margin:0 0 22px;border-bottom:1px solid var(--ui-line);padding:0 0 18px}.vg-vorlage-details summary{cursor:pointer;color:#555a61;font-size:14px;font-weight:650}.vg-vorlage-details .obfeld{margin-top:12px}
.vg-mail-option{margin:20px 0;padding:15px 17px;border:1px solid #f0d8ca;border-radius:10px;background:var(--ui-soft)}
.vg-mail-option .check{display:flex;gap:11px;align-items:flex-start}.vg-mail-option small{display:block;margin-top:4px;font-size:13px;line-height:1.45;color:var(--ui-muted)}
.vgliste{margin-top:18px}.vgzeile summary{min-height:62px;padding:14px 16px;gap:12px}.vgz-body{padding:18px 18px 22px!important}

/* E-Mail: Editor und tatsächliche Vorschau nebeneinander */
.mail-editor-grid{display:grid;grid-template-columns:minmax(420px,.9fr) minmax(440px,1.1fr);gap:24px;align-items:start}
.mail-editor{max-width:none!important}.mailpreview{position:sticky;top:24px;border:1px solid var(--ui-line);border-radius:12px;background:#fff;overflow:hidden}
.mailpreview-kopf{display:flex;align-items:flex-start;justify-content:space-between;gap:20px;padding:18px 20px;border-bottom:1px solid var(--ui-line);background:#faf9f7}
.mailpreview-kopf b{display:block;margin-top:4px;font-size:16px}.mailpreview-kopf>span{font-size:13px;color:var(--ui-muted);text-align:right}
.mailpreview-body{padding:25px 28px 8px;min-height:150px;white-space:normal;font-size:15px;line-height:1.6;color:#29292c}
.mailpreview-signatur{padding:0 28px 26px;overflow:auto}.mailpreview-signatur table{max-width:100%}

/* Portal: volle Breite, verlässliche Abstände, keine grauen Glow-Flächen */
.kdash-haupt{max-width:1240px!important;padding:42px 52px 90px!important}
.kdash-haupt>.card,.kdash-haupt .card,.knstreifen,.knews{border-radius:12px!important;background:#fff!important;box-shadow:none!important}
.kdash-haupt .ktitel{font-size:30px;letter-spacing:-.035em;margin-bottom:6px}
.kngrid{display:grid!important;grid-template-columns:1fr!important;gap:22px!important;align-items:stretch}
.kngrid .knews,.kngrid .knews:only-child,.knews{width:100%!important;max-width:none!important;margin:0!important}
.knews{padding:24px 26px!important}.knews h2,.knews h3{margin-bottom:8px}.knstreifen{padding:18px 20px!important;margin-bottom:18px!important}
.kportal .lmut,.kportal .muted,.kportal .sub,.kportal .hintline{font-size:14px!important;line-height:1.55!important}

/* Kunden-Vorgang: eine Hauptaktion, Abschluss bewusst sekundär */
.vgk-card{max-width:880px!important;padding:30px!important}.vgk-card textarea{font-size:15px;line-height:1.55}
.vgk-erledigt{display:flex!important;align-items:center;justify-content:space-between;gap:24px;margin-top:24px!important;padding:20px 0 0!important;border-top:1px solid var(--ui-line)}
.vgk-erledigt>div{min-width:0}.vgk-erledigt b{font-size:15px}.vgk-erledigt p{margin:5px 0 0;font-size:13.5px;line-height:1.45;color:var(--ui-muted)}
.vgk-erledigt .btn{flex:0 0 auto;background:#fff;border-color:#aaa;color:#333}

/* Vertrag & Zahlung: klare Preislogik und zentrale Dokumentablage */
.abobereich{margin-top:22px}.abo-portal-card{padding:28px!important}.abo-portal-head{display:flex;justify-content:space-between;align-items:flex-start;gap:20px;margin-bottom:22px}.abo-portal-head h3{margin:4px 0 0;font-size:24px}
.abo-portal-grid{display:grid;grid-template-columns:minmax(180px,.5fr) minmax(300px,1fr);gap:0;padding:20px 24px;border:1px solid var(--ui-line);border-radius:11px;background:#fcfbf9;align-items:stretch}
.abo-portal-preis{display:flex;flex-direction:column;justify-content:center;padding:2px 30px 2px 0;border-right:1px solid var(--ui-line)}
.abo-portal-preis span,.abo-portal-preis small{display:block;color:var(--ui-muted);font-size:13.5px}.abo-portal-preis b{display:block;margin:6px 0 2px;font-size:29px;letter-spacing:-.03em;line-height:1}
.abo-preisaufschluesselung{margin:0;padding-left:30px;align-self:center}.abo-preisaufschluesselung div{display:flex;justify-content:space-between;gap:20px;padding:7px 0;font-size:14px}.abo-preisaufschluesselung dt{color:var(--ui-muted)}.abo-preisaufschluesselung dd{margin:0;font-weight:600;font-variant-numeric:tabular-nums}.abo-preisaufschluesselung .gesamt{margin-top:5px;padding-top:12px;border-top:1px solid var(--ui-line);font-size:15px}.abo-preisaufschluesselung .gesamt dd{font-weight:700}
.abo-portal-meta{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin:20px 0}.abo-portal-meta span{font-size:14px;line-height:1.45}.abo-portal-meta b{display:block;margin-bottom:4px;font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:#8b8e94}
.abo-leistungen{margin-top:16px}details.abo-leistungen summary{color:var(--muted);font-weight:500}.abo-portal-actions{margin:18px 0 0;display:flex;flex-wrap:wrap;gap:10px}
.abo-verw-liste{display:flex;flex-direction:column;gap:10px;margin-top:12px}
.ksheet .abo-verw-liste .btn,.abo-verw-liste .btn{display:flex;align-items:center;justify-content:space-between;gap:14px;width:100%;text-align:left;padding:14px 16px;height:auto}
.abo-verw-txt{display:flex;flex-direction:column;gap:3px;min-width:0;text-align:left;align-items:flex-start}
.abo-verw-txt b{font-weight:600;font-size:15px}
.abo-verw-txt span{font-size:13px;line-height:1.45;color:var(--ui-muted);white-space:normal}
.abo-verw-pfeil{flex:0 0 auto;font-size:20px;color:var(--ui-muted);line-height:1}
.abo-verw-zeile{display:flex;align-items:flex-start;gap:12px;padding:14px 16px;border:1px solid var(--ui-line);border-radius:11px}
.abo-verw-zeile.ok{border-color:#bfe3cb;background:#f3faf5}
.abo-verw-zeile b{display:block;font-weight:600;font-size:15px;margin-bottom:3px}
.abo-verw-zeile span{font-size:13px;line-height:1.45;color:var(--ui-muted)}
.abo-verw-nummer{display:flex;align-items:stretch;gap:10px}
.abo-verw-nummer > .btn,.abo-verw-nummer > .abo-verw-zeile{flex:1 1 auto}
.abo-verw-step{flex:0 0 auto;width:24px;height:24px;margin-top:16px;border-radius:50%;background:var(--text,#1a1a1a);color:#fff;font-size:13px;font-weight:650;display:flex;align-items:center;justify-content:center}
.vgk-links{display:flex;flex-wrap:wrap;gap:12px;margin:12px 0}
.vgk-linktile{display:flex;flex-direction:column;align-items:flex-start;gap:4px;text-align:left;
  padding:12px 16px;min-width:220px;flex:1 1 220px;border-radius:10px;border:1px solid var(--ui-line-strong,#c8c8c8);
  background:#fff;color:var(--ui-text,#222);text-decoration:none;cursor:pointer;transition:.13s}
.vgk-linktile:hover{border-color:var(--accent)}
.vgk-linktile.primary{background:#fff}
.vgk-linktile.primary b{color:var(--ui-text,#222)}
.vgk-linktile b{font-weight:650;font-size:15px}
.vgk-linktile small{font-size:12.5px;line-height:1.4;font-weight:400;color:var(--ui-muted,#6b6b6b)}
.vgk-linktile.primary small{color:var(--ui-muted,#6b6b6b)}
.vgk-lead{font-size:15.5px;line-height:1.62;color:var(--text);margin:14px 0 2px}
.vgk-entwurf{display:inline-flex;align-items:center;gap:7px;color:var(--text);font-weight:600;
  text-decoration:none;border-bottom:1px solid var(--accent);padding-bottom:2px;line-height:1.35}
.vgk-entwurf:hover{color:var(--accent)}
.vgk-entwurf .vgk-pfeil{color:var(--accent);font-weight:400}
.vgk-entwurf-video{display:inline-flex;align-items:center;gap:7px;color:var(--muted);
  font-weight:500;text-decoration:none}
.vgk-entwurf-video:hover{color:var(--text)}
.vgk-feedback{border-top:1px solid var(--hair);margin-top:22px;padding-top:20px}
.vgk-feedback .vgk-entscheidung{margin-top:0}
.vgk-infoaktion{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.vgk-infoaktion #info-frage{width:100%}
.kverlauf-zeile .kverlauf-status{align-self:center;font-size:12.5px;font-weight:600;white-space:nowrap}
.kverlauf-status.fertig{color:var(--muted)}
.kverlauf-status.arbeit{color:var(--accent)}
.vgkommentar-datei{display:block;margin:10px 0 0;font-size:13px;color:var(--muted)}
.vgkommentar-datei input{display:block;margin-bottom:4px;font-size:13px}
.vgkomm-anhaenge{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}
.vgkomm-bild img{max-width:180px;max-height:180px;border-radius:10px;display:block;object-fit:cover}
.vgkomm-datei{display:inline-flex;align-items:center;gap:6px;font-size:13px;padding:6px 10px;background:rgba(0,0,0,.06);border-radius:8px;text-decoration:none;color:inherit}
.vgkomm-datei:hover{background:rgba(0,0,0,.1)}
.vonkunde .vgkomm-datei{background:rgba(255,255,255,.22);color:#fff}
.vgbulk{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin:0 0 14px;padding:10px 14px;background:var(--accentSoft);border-radius:10px}
.vgbulk-zahl{font-size:13.5px;font-weight:600}
.vgbulk-akt{display:flex;gap:8px;margin-left:auto}
.vgz-checkwrap{display:inline-flex;align-items:center;margin-right:2px}
.vgz-check{width:16px;height:16px;cursor:pointer;accent-color:var(--accent)}
.vgz-erledigtform{display:inline-flex;align-items:center;gap:10px}
.vgz-erledigtmail{font-size:12.5px;display:inline-flex;align-items:center;gap:5px;white-space:nowrap;color:var(--muted)}
.vgz-erledigtmail input{accent-color:var(--accent)}
/* Dokumente-Tab: Vorschau, Mehrfachauswahl, Sammel-Download */
.dokbar{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin:10px 0 4px}
.dokbar-all{display:inline-flex;align-items:center;gap:7px;font-size:13.5px;color:var(--muted);cursor:pointer}
.dokbar-all input{accent-color:var(--accent)}
.dokbar-akt{display:flex;align-items:center;gap:10px;margin-left:auto}
.dokbar-zahl{font-size:13px;font-weight:600}
.dokgruppe{display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:10px;margin-top:6px}
.dokfile{display:flex;align-items:center;gap:11px;padding:9px 11px;border:1px solid var(--line);border-radius:10px;background:var(--panel);min-width:0}
.dokfile:hover{border-color:#cbbfa8}
.dokcheck{width:16px;height:16px;flex:none;cursor:pointer;accent-color:var(--accent)}
.dokthumb{flex:none;width:44px;height:44px;border-radius:8px;border:1px solid var(--line);background:#f4f2ef center/cover no-repeat;cursor:pointer;display:grid;place-items:center;padding:0;overflow:hidden}
.dokthumb span{font-size:10.5px;font-weight:700;color:var(--muted)}
.dokfile-info{min-width:0;flex:1;display:flex;flex-direction:column;gap:2px}
.dokfile-name{font-size:13.5px;font-weight:600;color:var(--text);text-decoration:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;cursor:pointer}
.dokfile-name:hover{color:var(--accent)}
.dokfile-meta{font-size:12px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dokfile-dl{flex:none;width:30px;height:30px;display:grid;place-items:center;border-radius:7px;color:var(--muted);text-decoration:none;font-size:16px}
.dokfile-dl:hover{background:var(--panel2);color:var(--text)}
/* Ansichts-Umschalter Dokumente: Liste vs. Kacheln (Galerie) */
.dok-viewsel{display:inline-flex;gap:2px;border:1px solid var(--line);border-radius:9px;padding:2px;background:var(--panel)}
.dok-viewbtn{border:0;background:transparent;color:var(--dim);width:31px;height:28px;border-radius:7px;cursor:pointer;display:grid;place-items:center;font-size:15px;line-height:1}
.dok-viewbtn:hover{color:var(--text)}
.dok-viewbtn.aktiv{background:var(--accentSoft);color:var(--accent)}
/* Liste: eine Spalte, kompakte Zeilen */
.dokfiles[data-ansicht="liste"] .dokgruppe{grid-template-columns:1fr;gap:0;margin-top:4px}
.dokfiles[data-ansicht="liste"] .dokfile{border:0;border-bottom:1px solid var(--hair);border-radius:0;background:transparent;padding:7px 4px}
.dokfiles[data-ansicht="liste"] .dokfile:hover{background:var(--panel2)}
.dokfiles[data-ansicht="liste"] .dokthumb{width:32px;height:32px}
/* Kacheln: Galerie mit großen Vorschaubildern */
.dokfiles[data-ansicht="kacheln"] .dokgruppe{grid-template-columns:repeat(auto-fill,minmax(172px,1fr));gap:14px}
.dokfiles[data-ansicht="kacheln"] .dokfile{flex-direction:column;align-items:stretch;position:relative;padding:0;gap:0}
.dokfiles[data-ansicht="kacheln"] .dokthumb{width:100%;height:124px;border:0;border-bottom:1px solid var(--line);border-radius:10px 10px 0 0}
.dokfiles[data-ansicht="kacheln"] .dokfile-info{padding:9px 11px 11px}
.dokfiles[data-ansicht="kacheln"] .dokfile-name{white-space:normal;line-height:1.3}
.dokfiles[data-ansicht="kacheln"] .dokcheck{position:absolute;top:8px;left:8px;z-index:3;width:17px;height:17px;accent-color:var(--accent);background:#fff;border-radius:4px;box-shadow:0 0 0 3px #fff,0 1px 3px rgba(0,0,0,.15)}
.dokfiles[data-ansicht="kacheln"] .dokfile-dl{position:absolute;top:7px;right:40px;z-index:3;background:rgba(255,255,255,.94);box-shadow:0 1px 4px rgba(0,0,0,.14)}
.dokfiles[data-ansicht="kacheln"] .kdatei-menu{position:absolute;top:7px;right:7px;z-index:3}
.dokfiles[data-ansicht="kacheln"] .kdatei-menu>summary{width:30px;height:30px;display:grid;place-items:center;background:rgba(255,255,255,.94);border-radius:7px;box-shadow:0 1px 4px rgba(0,0,0,.14)}
.dok-lb{position:fixed;inset:0;z-index:9999;background:rgba(0,0,0,.86);display:flex;align-items:center;justify-content:center}
.dok-lb img{max-width:92vw;max-height:88vh;border-radius:6px;box-shadow:0 10px 40px rgba(0,0,0,.5)}
.dok-lb button{position:absolute;background:rgba(255,255,255,.12);color:#fff;border:0;border-radius:50%;width:44px;height:44px;font-size:24px;line-height:1;cursor:pointer;display:grid;place-items:center}
.dok-lb .dok-lb-zu{top:20px;right:24px}
.dok-lb .dok-lb-prev{left:24px;top:50%;transform:translateY(-50%)}
.dok-lb .dok-lb-next{right:24px;top:50%;transform:translateY(-50%)}
.dok-lb button:hover{background:rgba(255,255,255,.25)}
.vgart{margin:16px 0 6px}
.vgart>.oblabel{display:block;margin:0 0 9px;font-size:13px;font-weight:600;color:var(--muted)}
/* Absichts-Kacheln beim Anlegen: ruhig, gleichmäßig, Icon mit Luft zum Titel */
.vgabsicht{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:2px 0 0}
.vgabsichtkarte{gap:0;padding:16px 16px 15px}
.vgabsichtkarte .vgtyp-icon{width:30px;height:30px;font-size:14px;border-radius:8px;margin-bottom:13px}
.vgabsichtkarte .obkarte-titel{font-size:15px}
.vgabsichtkarte .vgtyp-copy{padding-right:0}
.vgabsichtkarte .vgtyp-copy .obkarte-sub{margin-top:4px}
.vgabsichtkarte.an .obkarte-titel::after{content:""}
@media (max-width:720px){.vgabsicht{grid-template-columns:1fr}}
.vgk-feedback .vgk-frage{font-size:14.5px;font-weight:650;margin:0 0 12px;color:var(--text)}
.linkliste{display:flex;flex-direction:column}
.linkrow{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:12px 0;border-top:1px solid var(--hair,#eee)}
.linkliste .linkrow:first-child{border-top:0}
.linkrow-text{min-width:0}
.linkrow-text b{display:block;font-weight:600;font-size:14.5px}
.linkrow-url{display:block;font-size:13px;color:var(--ui-muted,#6b6b6b);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:520px}
.linkrow-akt{flex:0 0 auto;display:flex;gap:8px;align-items:center}
.projektzahlung-betrag .pr-hinweis{display:block;margin-top:6px;font-size:12.5px;color:var(--ui-muted)}
.projektzahlung-betrag .btn.klein{margin-top:8px}
.portal-rechnungen .projektzahlung-row{margin-bottom:10px}
.abo-umstell-hinweis{margin:16px 0 0;font-size:13.5px;line-height:1.55;color:var(--ui-muted)}
.portal-zahlung-docs{padding:28px!important;margin-bottom:22px}.projektzahlung-row{display:flex;justify-content:space-between;gap:30px;padding:20px;border:1px solid #f1d6c7;background:#fff9f5;border-radius:11px}.projektzahlung-row>div>b,.projektzahlung-row small{display:block}.projektzahlung-row>div>b{margin:5px 0}.projektzahlung-row small{font-size:13.5px;color:var(--ui-muted)}.projektzahlung-betrag{text-align:right}.projektzahlung-betrag>b{font-size:20px}
.portal-dokumente{margin-top:16px;border-top:1px solid var(--ui-line)}.portal-dokument-row{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:15px 2px;border-bottom:1px solid var(--ui-line);color:var(--ui-text);text-decoration:none}.portal-dokument-row small{display:block;margin-top:3px;color:var(--ui-muted);font-size:13px}.portal-dokument-row>span:last-child{color:var(--ui-orange);font-weight:650;font-size:14px}

@media(max-width:1050px){
  .content{padding:30px 28px 70px!important}.vgneu-head,.mail-editor-grid{grid-template-columns:1fr}.mailpreview{position:static}.vgtypen{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .kdash-haupt{padding:34px 30px 80px!important}.abo-portal-meta{grid-template-columns:1fr 1fr}.projektzahlung-row{flex-direction:column}.projektzahlung-betrag{text-align:left}
}
@media(max-width:720px){
  .content{padding:24px 18px 60px!important}.kpis.zwei{grid-template-columns:1fr}.vgtypen{grid-template-columns:1fr!important}.vgneu{padding:20px!important}
  .kdash-haupt{padding:26px 18px 70px!important}.abo-portal-grid{grid-template-columns:1fr;gap:0}.abo-portal-preis{border-right:0;border-bottom:1px solid var(--ui-line);padding:0 0 15px}.abo-preisaufschluesselung{padding:15px 0 0}.abo-portal-meta{grid-template-columns:1fr}.vgk-erledigt{align-items:stretch;flex-direction:column}.vgk-erledigt .btn{width:100%}
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  background:var(--bg);color:var(--text);line-height:1.55;-webkit-font-smoothing:antialiased;min-height:100vh}
a{color:var(--accentDark);text-decoration:none}
::selection{background:var(--accentSoft)}

/* ---------- Shell ---------- */
.shell{display:grid;grid-template-columns:232px 1fr;min-height:100vh}
.sidebar{position:sticky;top:0;height:100vh;display:flex;flex-direction:column;gap:6px;
  background:var(--panel);border-right:1px solid var(--line);padding:26px 16px 20px}
.sblogo{display:flex;justify-content:center;padding:0 10px 24px}
.sblogo img{width:140px;height:auto;display:block}
.sbnav{display:flex;flex-direction:column;gap:2px}
.navlink{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:var(--rs);
  font-size:14px;font-weight:600;color:var(--muted);transition:.12s}
.navlink .ni{width:18px;text-align:center;font-size:14px;opacity:.85}
.navlink:hover{background:var(--panel2);color:var(--text)}
.navlink.active{background:var(--accentSoft);color:var(--accentDark)}
.navlink .navlabel{flex:1;min-width:0}
.navpunkt{flex:none;width:7px;height:7px;border-radius:50%;background:var(--accent)}
.sbspacer{flex:1}
.sbfoot{border-top:1px solid var(--hair);padding-top:14px;display:flex;flex-direction:column;gap:8px}
.who{font-size:12px;color:var(--dim);padding:0 12px;word-break:break-all}
.content{min-width:0;padding:32px 40px 90px;max-width:1240px}
/* (alte Mobil-Regel entfernt, Etappe 1 nutzt das Overlay-Menü unten) */

/* ---------- Kopf & Grundelemente ---------- */
.head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin-bottom:24px;flex-wrap:wrap}
.head h1{margin:0;font-size:26px;letter-spacing:-.5px;font-weight:650;display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.head-actions{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.back{display:inline-block;font-size:13px;color:var(--muted);margin-bottom:6px}
.back:hover{color:var(--accentDark)}
.muted{color:var(--muted)}
.spacer{flex:1}
.empty{padding:26px;text-align:center;color:var(--dim);font-size:14px}

.btn{display:inline-flex;align-items:center;gap:8px;background:var(--panel);border:1px solid var(--line2);
  color:var(--text);border-radius:var(--rs);padding:9px 16px;font-family:inherit;font-size:13.5px;font-weight:600;cursor:pointer;transition:.13s}
.btn:hover{border-color:var(--text)}
.btn.primary{background:var(--text);border-color:var(--text);color:#fff}
.btn.primary:hover{background:#000}
.btn.ghost{background:transparent;border-color:transparent;color:var(--muted)}
.btn.ghost:hover{color:var(--text);background:var(--panel2)}
.btn.danger{background:transparent;border-color:transparent;color:var(--red)}
.btn.danger:hover{background:var(--redSoft)}

.card{background:var(--panel);border:1px solid var(--hair);border-radius:var(--r);padding:24px 26px;margin-bottom:18px}
.card h3{margin:0 0 16px;font-size:11px;text-transform:uppercase;letter-spacing:1.4px;color:var(--dim);font-weight:800}
.techcard>h3{font-size:18px;text-transform:none;letter-spacing:-.01em;color:var(--text);font-weight:600;margin:0 0 16px}
.techsep{border:0;border-top:1px solid var(--line);margin:22px 0 18px}
.techlabel{font-size:12px;font-weight:600;color:var(--dim);letter-spacing:.02em;margin:26px 0 12px}
.techcard>.hgruppe:first-of-type .techlabel:first-child,.techcard>label+.hgruppe .techlabel{margin-top:20px}
.kcred{display:flex;flex-direction:column;gap:8px;margin:0 0 14px}
.kcred-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.kcred-label{font-size:12px;color:var(--dim);min-width:104px}
.kcred-val{font-size:14px;color:var(--text);font-weight:500}
.pwanf-form{display:inline;margin:0}
.pwanf-link{background:none;border:0;padding:0;margin-left:8px;color:var(--accent);font:inherit;font-size:13px;cursor:pointer}
.pwanf-link:hover{color:var(--accentDark);text-decoration:underline}
.pwcell{display:inline-flex;align-items:center;gap:8px;flex-wrap:wrap}
.pwshow{background:none;border:0;padding:0;color:var(--accent);font:inherit;font-size:13px;cursor:pointer}
.pwshow:hover{color:var(--accentDark);text-decoration:underline}
.pwauth{display:inline-flex;align-items:center;gap:8px;flex-wrap:wrap}
.pwauth .pwauth-i{width:150px;padding:6px 9px}
.pwauth-go{background:none;border:0;padding:0;color:var(--accent);font:inherit;font-size:13px;cursor:pointer}
.pwauth-go:hover{color:var(--accentDark);text-decoration:underline}
.kcopy{background:none;border:0;padding:0;margin-left:10px;color:var(--dim);font:inherit;font-size:12px;cursor:pointer}
.kcopy:hover{color:var(--accent)}
.cols{display:grid;grid-template-columns:1fr 1fr;gap:18px;align-items:start}
@media(max-width:880px){.cols{grid-template-columns:1fr}}

.pill{display:inline-block;font-size:11px;font-weight:700;letter-spacing:.3px;border-radius:3px;padding:3px 9px;
  color:var(--c,#6a7382);background:color-mix(in srgb, var(--c,#6a7382) 12%, white);border:1px solid color-mix(in srgb, var(--c,#6a7382) 30%, white)}
.box{border-radius:var(--rs);padding:12px 15px;margin:14px 0;font-size:14px}
.box.warn{background:var(--redSoft);border:1px solid #eec7c7;color:var(--red)}
.box.ok{background:var(--greenSoft);border:1px solid #c4e2cf;color:var(--green);font-weight:600}
.geloescht-hinweis{display:flex;align-items:center;flex-wrap:wrap;gap:4px;margin:0 0 14px}

/* ---------- Tabellen ---------- */
table.grid{width:100%;border-collapse:separate;border-spacing:0;background:var(--panel);
  border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
table.grid thead th{text-align:left;font-size:10.5px;text-transform:uppercase;letter-spacing:1.2px;color:var(--dim);
  padding:12px 18px;border-bottom:1px solid var(--line);font-weight:800}
table.grid td{padding:14px 18px;border-bottom:1px solid var(--hair);font-size:14px;vertical-align:middle}
table.grid tbody tr{cursor:pointer;transition:.1s}
table.grid tbody tr:hover{background:var(--panel2)}
table.grid tbody tr:last-child td{border-bottom:none}
.sub{font-size:12px;color:var(--dim);margin-top:1px}
.due{color:var(--red);font-weight:700}

/* ---------- Formulare ---------- */
.search input,.editform input,.editform select,.editform textarea{background:var(--panel);border:1px solid var(--line2);
  border-radius:var(--rs);padding:9px 12px;font-size:14px;color:var(--text);font-family:inherit;transition:.13s;width:100%}
.search input{width:220px}
.search input:focus,.editform input:focus,.editform select:focus,.editform textarea:focus{outline:none;border-color:var(--text)}
.editform label{display:block;font-size:12.5px;font-weight:600;color:var(--muted);margin:0 0 14px}
.editform label input,.editform label select,.editform label textarea{margin-top:6px;display:block}
.editform label.check{display:flex;align-items:center;gap:10px;color:var(--text);font-weight:500;cursor:pointer}
.editform label.check input{width:17px;height:17px;accent-color:var(--accent);margin:0}
.formbar{display:flex;align-items:center;gap:12px;margin-top:6px}
.lmut{font-weight:400;color:var(--dim);font-size:12px}
.savestate{font-size:12.5px;color:var(--dim);margin-left:8px}

/* ---------- Login / Setup ---------- */
.auth{max-width:400px;margin:12vh auto 0;background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:38px 36px}
.auth h1{margin:0 0 8px;font-size:21px;letter-spacing:-.3px}
.auth .logo{width:160px;margin:0 0 26px;display:block}
.auth label{display:block;font-size:12.5px;font-weight:600;color:var(--muted);margin:0 0 14px}
.auth input{width:100%;background:var(--panel);border:1px solid var(--line2);border-radius:var(--rs);padding:10px 12px;
  font-size:14px;color:var(--text);margin-top:6px}
.auth input:focus{outline:none;border-color:var(--text)}
.auth .btn{width:100%;justify-content:center;margin-top:6px}

/* ---------- Akte ---------- */
.frow{display:flex;gap:14px;padding:10px 0;border-bottom:1px solid var(--hair);font-size:14px}
.frow:last-child{border-bottom:none}
.fk{flex:none;width:150px;color:var(--dim);font-weight:600;font-size:13px}
.fv{flex:1;min-width:0}
.fa{flex:none;margin-left:auto;text-align:right;font-size:13px;align-self:center}
/* Aktionsmenü: rechts nur „mehr", beim Hover/Fokus klappt das Popover mit allen Aktionen auf. */
.fa-menu{position:relative;display:inline-block}
.fa-trigger{background:none;border:0;padding:4px 6px;color:var(--dim);font:inherit;font-size:13px;cursor:pointer;white-space:nowrap}
.fa-menu:hover .fa-trigger,.fa-menu:focus-within .fa-trigger{color:var(--accent)}
/* Unsichtbare Brücke über die Lücke zwischen „mehr" und dem Menü, nur während es offen ist —
   so reißt der Hover beim Rüberfahren nicht ab. */
.fa-menu::after{content:"";position:absolute;top:100%;right:0;width:190px;height:10px;display:none}
.fa-menu:hover::after,.fa-menu:focus-within::after{display:block}
.fa-pop{visibility:hidden;opacity:0;transition:opacity .12s ease,visibility .12s;transition-delay:.25s;position:absolute;right:0;top:calc(100% + 8px);z-index:40;background:#fff;border:1px solid var(--hair);border-radius:10px;box-shadow:0 10px 30px rgba(0,0,0,.15);padding:5px;min-width:185px;text-align:left}
.fa-menu:hover .fa-pop,.fa-menu:focus-within .fa-pop{visibility:visible;opacity:1;transition-delay:0s}
.fa-pop .fa-z{margin:0}
.fa-pop form{display:block;margin:0}
.fa-pop a,.fa-pop .fa-b{display:block;width:100%;text-align:left;padding:7px 11px;border-radius:7px;white-space:nowrap;font:inherit;font-size:13px;text-decoration:none;cursor:pointer}
.fa-pop .fa-b{background:none;border:0}
.fa-pop a:hover,.fa-pop .fa-b:hover{background:#f6f3ef}
.fv .re-kopf{display:block}
.fv .re-betrag{margin-left:12px;color:var(--text)}
.fv .re-meta{display:block;margin-top:2px;color:var(--dim);font-size:12.5px}
.fv .re-tag{display:inline-block;margin-left:10px;font-size:11px;font-weight:600;border-radius:4px;padding:1px 8px;vertical-align:1px}
.fv .re-tag.bezahlt{color:#1e7d43;background:#e6f4ea}
.fv .re-tag.offen{color:var(--accentDark);background:var(--accentSoft)}
.fv .re-tag.storniert{color:var(--dim);background:#f0efec}
.fa-mehr{display:block;margin-top:2px}
.fa-mehr>summary{cursor:pointer;list-style:none;user-select:none;font-size:0}
.fa-mehr>summary::-webkit-details-marker{display:none}
.fa-mehr>summary::after{content:"mehr ▾";font-size:13px;color:var(--dim)}
.fa-mehr[open]>summary::after{content:"weniger ▴"}
.fa-mehr-inhalt{margin-top:4px}
.rechnungen-liste>summary.rsec-toggle{cursor:pointer;list-style:none;user-select:none}
.rechnungen-liste>summary.rsec-toggle::-webkit-details-marker{display:none}
.rechnungen-liste>summary.rsec-toggle::after{content:"  ▾";color:var(--dim)}
.rechnungen-liste[open]>summary.rsec-toggle::after{content:"  ▴"}
.notes{white-space:pre-wrap;font-size:14px}
.syslinks{display:flex;gap:8px;flex-wrap:wrap}
.syslink{display:inline-flex;align-items:center;gap:8px;background:var(--panel);border:1px solid var(--line2);
  border-radius:var(--rs);padding:8px 13px;font-size:13px;font-weight:600;color:var(--text);transition:.12s}
.syslink:hover{border-color:var(--text)}
.syslink img{width:15px;height:15px;display:block}

/* ---------- Tabs (editorial: Unterstrich statt Boxen) ---------- */
.tabs{display:flex;gap:22px;margin:0 0 22px;flex-wrap:wrap}
.tab{padding:0 2px 12px;font-size:14px;font-weight:600;color:var(--muted);border-bottom:2px solid transparent;margin-bottom:-1px;transition:.12s}
.tab:hover{color:var(--text)}
.tab.active{color:var(--text);border-bottom-color:var(--accent)}

.hintline{margin:-6px 0 18px;font-size:13px;color:var(--dim)}
.tfield{padding:14px 0;border-bottom:1px solid var(--hair)}
.tfield:last-child{border-bottom:none}
.tlabel{font-size:13.5px;font-weight:700;margin-bottom:9px}
.tfield input[type=text],.tfield input[type=date],.tfield textarea{display:block;width:100%;background:var(--panel);
  border:1px solid var(--line2);border-radius:var(--rs);padding:9px 12px;font-size:14px;color:var(--text);font-family:inherit}
.tfield input:focus,.tfield textarea:focus{outline:none;border-color:var(--text)}

.optrow{display:flex;gap:8px;flex-wrap:wrap}
.opt{position:relative;display:inline-flex;align-items:center;background:var(--panel);border:1px solid var(--line2);
  border-radius:var(--rs);padding:7px 14px;font-size:13px;cursor:pointer;transition:.12s;user-select:none;line-height:1.25;color:var(--text);font-weight:500}
.opt:hover{border-color:var(--text)}
.opt input{position:absolute;opacity:0;width:1px;height:1px;pointer-events:none}
.opt:has(input:checked){background:var(--text);border-color:var(--text);color:#fff;font-weight:600}
.editform label.opt{display:inline-flex;margin:0;color:var(--text);font-weight:500}
.editform label.opt:has(input:checked){color:#fff;font-weight:600}

.fnote{background:var(--accentSoft);border-left:3px solid var(--accent);border-radius:0 var(--rs) var(--rs) 0;
  padding:11px 14px;font-size:13.5px;color:var(--accentDark);margin:14px 0}
.fhead{font-size:15px;font-weight:800;letter-spacing:-.2px;margin:26px 0 2px;padding-top:18px;border-top:1px solid var(--line)}

/* ---------- Checklisten ---------- */
.todolist{display:flex;flex-direction:column}
.todo{display:flex;align-items:center;gap:13px;background:var(--panel);border-bottom:1px solid var(--hair);
  padding:12px 4px;cursor:pointer;transition:.12s;user-select:none}
.editform label.todo{display:flex;margin:0;color:var(--text);font-weight:500}
.todo:last-child{border-bottom:none}
.todo:hover{background:var(--panel2)}
.todo input{position:absolute;opacity:0;width:1px;height:1px;pointer-events:none}
.todo .tbox{flex:none;width:20px;height:20px;border-radius:var(--rs);border:1.5px solid var(--line2);background:var(--panel);
  display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:900;color:#fff;transition:.12s}
.todo .ttext{flex:1;font-size:14px;font-weight:500}
.todo .tlink{flex:none;font-size:12px;font-weight:700;color:var(--accentDark);border:1px solid var(--line2);
  border-radius:var(--rs);padding:4px 11px;transition:.12s;background:var(--panel)}
.todo .tlink:hover{border-color:var(--accent);background:var(--accentSoft)}
.todo.done .tbox{background:var(--green);border-color:var(--green)}
.todo.done .tbox::before{content:"✓"}
.todo.done .ttext{color:var(--dim);text-decoration:line-through}

/* ---------- Phasen ---------- */
.card.phase{margin-bottom:14px}
.phasehead{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:8px}
.phasehead h3{margin:0;font-size:15px;color:var(--text);text-transform:none;letter-spacing:-.2px;font-weight:800}
.phaseprog{flex:none;font-size:12px;font-weight:800;color:var(--muted);border:1px solid var(--line2);border-radius:3px;padding:3px 10px}
.phaseprog.full{color:#fff;background:var(--green);border-color:var(--green)}

/* ---------- Dashboard ---------- */
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px;margin-bottom:20px}
.kpi{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:20px 22px}

/* Pipeline-Leiste */
.pipe{display:flex;gap:0;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;background:var(--panel)}
.pipeseg{flex:1;padding:14px 16px;border-right:1px solid var(--hair);transition:.12s;color:var(--text)}
.pipeseg:last-child{border-right:none}
.pipeseg:hover{background:var(--panel2)}
.pipeseg .pv{font-size:22px;font-weight:800;letter-spacing:-.5px}
.pipeseg .pl{font-size:10.5px;color:var(--muted);font-weight:700;text-transform:uppercase;letter-spacing:.8px;margin-top:1px}
.pipeseg .pdot{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--c,#999);margin-right:6px;vertical-align:1px}
@media(max-width:900px){.pipe{flex-wrap:wrap}.pipeseg{min-width:33%}}

.actions{display:flex;flex-direction:column}
.action{display:flex;align-items:center;gap:14px;border-bottom:1px solid var(--hair);padding:13px 4px;color:var(--text);transition:.1s}
.action:last-child{border-bottom:none}
.action:hover{background:var(--panel2)}
.adate{flex:none;width:158px;font-size:12.5px;font-weight:700;color:var(--muted)}
.adate.due{color:var(--red)}
.abadge{flex:none;font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.7px;
  border-radius:3px;padding:3px 9px;color:#fff;width:92px;text-align:center}
.abadge.abr{background:var(--accent)}
.abadge.fup{background:var(--violet)}
.abadge.kick{background:var(--blue)}
.aname{font-weight:700;font-size:14px}
.atext{flex:1;color:var(--muted);font-size:13px}
.aics{flex:none;font-size:12px;font-weight:700;color:var(--accentDark);border:1px solid var(--line2);
  border-radius:var(--rs);padding:4px 11px;transition:.12s;background:var(--panel)}
.aics:hover{border-color:var(--accent);background:var(--accentSoft)}

/* Quicklinks mit echten Favicons */
.quick{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:10px}
.qtile{display:flex;align-items:center;gap:9px;background:var(--panel);border:1px solid var(--line2);
  border-radius:var(--rs);padding:8px 11px;transition:.12s;color:var(--text);min-width:0}
.qtile:hover{border-color:var(--text)}
/* Favicon ohne grauen Kasten: das Icon steht frei */
.qi{flex:none;width:20px;height:20px;display:flex;align-items:center;justify-content:center;overflow:hidden}
.qi img{width:18px;height:18px;display:block;border-radius:4px}
/* Garantiertes Symbol: Monogramm liegt als Grundschicht darunter, das Favicon deckt es ab, wenn es lädt */
.favimg{position:relative;display:inline-flex;width:18px;height:18px;flex:none;align-items:center;justify-content:center;overflow:hidden;border-radius:4px}
.favimg-mono{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:700;color:#8a8378;background:#eee9e2;line-height:1}
.favimg img{position:relative;z-index:1;width:18px;height:18px;display:block;border-radius:4px}
.qn{font-size:13px;font-weight:600;line-height:1.25;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* Kalender-Knopf */
.icsbtn{display:inline-block;font-size:11px;font-weight:700;color:var(--accentDark);border:1px solid var(--line2);
  background:var(--panel);border-radius:3px;padding:2px 9px;margin-left:8px;vertical-align:1px;transition:.12s}
.icsbtn:hover{border-color:var(--accent);background:var(--accentSoft)}

/* ---------- Ausgaben ---------- */
.sumbar{display:flex;gap:14px;flex-wrap:wrap;margin-top:16px}
.sumbox{flex:1;min-width:180px;background:var(--panel);border:1px solid var(--hair);border-radius:var(--r);padding:16px 20px;box-shadow:var(--schatten1)}
.sumbox .sv{font-size:22px;font-weight:700;letter-spacing:-.5px}
.sumbox .sl{font-size:10.5px;color:var(--muted);font-weight:600;text-transform:uppercase;letter-spacing:.8px;margin-top:2px}
.rowactions{display:flex;gap:8px;justify-content:flex-end}
.tablecard .tbl .rowactions form{margin:0}
/* Aktionszelle bleibt echte Tabellenzelle. Ein td mit display:flex streckt sich nicht auf die
   volle Zeilenhöhe, wenn eine Nachbarzelle zweizeilig ist, dadurch bleibt beim Hover unten ein
   heller Rest. Als table-cell füllt der Zeilen-Hover die Zelle komplett. */
.tablecard .tbl td.rowactions{display:table-cell;vertical-align:middle;text-align:right;white-space:nowrap;min-width:200px}
.tablecard .tbl td.rowactions form{display:inline-block}
.tablecard .tbl td.rowactions .btn,.tablecard .tbl td.rowactions .mini,.tablecard .tbl td.rowactions form,.tablecard .tbl td.rowactions .sticky-x{margin-left:6px}
#neue-rechnung .check{align-items:flex-start}
#neue-rechnung .check span{display:flex;flex-direction:column;gap:2px}
#neue-rechnung .check small{color:var(--muted);font-size:12.5px;line-height:1.45}
.mini{font-size:12px;font-weight:700;color:var(--muted);background:var(--panel);border:1px solid var(--line2);
  border-radius:3px;padding:4px 11px;transition:.11s;cursor:pointer}
.mini:hover{color:var(--text);border-color:var(--text)}
.mini.del:hover{color:var(--red);border-color:var(--red)}

/* Aktionszeilen als Zeilen mit echten Links */
.action{cursor:default}
.aname{color:var(--text)}
.aname:hover{color:var(--accentDark);text-decoration:underline}
.cardhead{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:4px}
.cardhead h3{margin-bottom:0}

/* Dashboard-Raster + Projekte + Termine */
/* Alte Dashboard-Grid-Generation (1.4fr/Pipe) entfernt — es gilt das 12-Spalten-Raster weiter unten */
.adate.today{color:var(--accentDark)}
.projlist{display:flex;flex-direction:column}
.proj{display:flex;align-items:center;gap:14px;padding:12px 4px;border-bottom:1px solid var(--hair);color:var(--text)}
.proj:last-child{border-bottom:none}
.proj:hover{background:var(--panel2)}
.pname{flex:none;width:40%;font-weight:700;font-size:14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pbar{flex:1;height:7px;background:var(--panel2);border:1px solid var(--line);border-radius:4px;overflow:hidden}
.pbar i{display:block;height:100%;background:var(--accent)}
.ppct{flex:none;font-size:12px;font-weight:700;color:var(--muted);width:56px;text-align:right}

/* Schmale Dashboard-Spalte: Pipeline umbrechen, Projekte nicht abschneiden */
.dashgrid .pipe{flex-wrap:wrap}
.dashgrid .pipeseg{flex:1 1 45%;min-width:45%}
.dashgrid .card{overflow:hidden}
.proj{min-width:0}
.pname{width:38%}
.ppct{width:48px}

/* Notizen: Post-its */
.stickygrid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.sticky{position:relative;border-radius:2px;padding:14px 14px 12px;min-height:84px;font-size:13.5px;line-height:1.5;
  box-shadow:0 4px 10px rgba(20,20,20,.09), 0 1px 2px rgba(20,20,20,.08)}
.sticky.c0{background:#fff8c4}
.sticky.c1{background:#d9f0ff}
.sticky.c2{background:#e2f7e5}
.sticky.c3{background:#ffe4ec}
.sticky-text{outline:none;white-space:pre-wrap;word-break:break-word}
.sticky-x{position:absolute;top:4px;right:6px;border:none;background:none;font-size:15px;color:rgba(0,0,0,.35);
  cursor:pointer;padding:2px 5px;border-radius:4px}
.sticky-x:hover{color:var(--red);background:rgba(0,0,0,.05)}
.stickyadd input{width:100%;margin-top:10px;background:var(--panel);border:1px dashed var(--line2);border-radius:var(--rs);
  padding:9px 12px;font-size:13.5px;color:var(--text)}
.stickyadd input:focus{outline:none;border-color:var(--accent);border-style:solid}
/* Notizzettel oben auf der Startseite: im Cockpit-Stil, anklickbar zum Bearbeiten, wächst beim Fokus. */
.sticky-wall{display:flex;flex-wrap:wrap;gap:14px;margin:0 0 26px}
.sticky-wall[hidden]{display:none}
.sticky-note{position:relative;background:var(--panel);color:var(--text);font-size:14px;line-height:1.55;
  padding:15px 17px 14px;border-radius:var(--r);width:236px;border:1px solid var(--line);
  box-shadow:0 4px 16px rgba(20,20,25,.06);transition:box-shadow .15s,transform .15s}
.sticky-note:focus-within{box-shadow:0 10px 28px rgba(20,20,25,.12)}
.sticky-tools{position:absolute;top:8px;right:9px;display:none;gap:4px}
.sticky-note:hover .sticky-tools,.sticky-note:focus-within .sticky-tools{display:flex}
.sticky-tools button{width:22px;height:22px;padding:0;border:0;border-radius:50%;background:var(--panel2);color:var(--dim);
  font-size:14px;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .12s,color .12s}
.sticky-task:hover{background:var(--accentSoft);color:var(--accentDark)}
.sticky-del:hover{background:var(--redSoft);color:var(--red)}
.sticky-text{outline:none;white-space:pre-wrap;overflow-wrap:anywhere;max-height:132px;overflow:hidden;cursor:text}
.sticky-note:focus-within .sticky-text{max-height:none}
.sticky-text:empty::before{content:"Notiz…";color:var(--dim)}
@media (max-width:640px){.sticky-note{width:100%}}

/* Aufgaben */
.tickbox{width:20px;height:20px;border-radius:var(--rs);border:1.5px solid var(--line2);background:var(--panel);
  cursor:pointer;flex:none;transition:.12s;padding:0}
.tickbox:hover{border-color:var(--green);background:var(--greenSoft)}
.tickbox.on{background:var(--green);border-color:var(--green);color:#fff}
.tickbox.on::before{content:"✓";font-size:12px;font-weight:900;color:#fff}
.abadge.man{background:#495057}
.aname.strike{text-decoration:line-through;color:var(--muted)}
.taskform{display:grid;grid-template-columns:1fr 160px 220px auto;gap:10px;align-items:center}
.taskform input,.taskform select{background:var(--panel);border:1px solid var(--line2);border-radius:var(--rs);padding:9px 12px;font-size:14px;color:var(--text);font-family:inherit}
.taskform input:focus,.taskform select:focus{outline:none;border-color:var(--text)}
@media(max-width:900px){.taskform{grid-template-columns:1fr}}

/* Vorlagen */
.sniptext{white-space:pre-wrap;font-family:inherit;font-size:13.5px;background:var(--panel2);border:1px solid var(--hair);
  border-radius:var(--rs);padding:14px 16px;margin:0;color:var(--text);line-height:1.6}

/* Dokumente */
.doctype{flex:none;font-size:10px;font-weight:800;letter-spacing:.5px;background:var(--panel2);border:1px solid var(--line2);
  border-radius:3px;padding:4px 8px;color:var(--muted);width:56px;text-align:center}
.upzone{position:relative;border:1.5px dashed var(--line2);border-radius:var(--r);padding:34px 20px;text-align:center;
  color:var(--muted);font-size:14px;transition:.15s;cursor:pointer}
.upzone.over{border-color:var(--accent);background:var(--accentSoft);color:var(--accentDark)}
.upzone input{position:absolute;inset:0;opacity:0;cursor:pointer}

/* Status direkt in der Liste wechseln */
.statussel{appearance:none;-webkit-appearance:none;border:1px solid color-mix(in srgb, var(--c,#888) 35%, white);
  background:color-mix(in srgb, var(--c,#888) 10%, white);color:color-mix(in srgb, var(--c,#888) 85%, black);
  font-size:12px;font-weight:700;border-radius:3px;padding:4px 22px 4px 9px;cursor:pointer;font-family:inherit;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='5'%3E%3Cpath d='M0 0l4 5 4-5z' fill='%23666'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 7px center}
.statussel:focus{outline:none;border-color:var(--text)}

/* Dashboard-Begrüßung */
.dashsub{margin:4px 0 0;font-size:14.5px;color:var(--muted);line-height:1.45}
.head h1{position:relative}

/* Kundenportal (Kundensicht) */
body.kportal{background:var(--bg)}
.kwrap{max-width:760px;margin:0 auto;padding:34px 22px 60px}
.khead{display:flex;align-items:center;gap:14px;margin:0 auto 26px;width:min(920px,calc(100% - 32px));max-width:920px}
.khead img{width:152px;height:auto;display:block}
.khead-logo{display:inline-flex;align-items:center}
.ktitel{font-size:26px;letter-spacing:-.5px;margin:0 0 4px;font-weight:600}
.kanliegen-kopf .ktitel,.nachrichten-kontakt .nachrichten-kopf h2{font-size:18px;letter-spacing:-.01em;font-weight:600}
/* Kunden-Einstellungen: klare Hierarchie Seitentitel > Abschnitt > Karten-Titel */
.keinst-sek{font-size:18px;font-weight:700;letter-spacing:-.01em;color:var(--text);margin:34px 0 14px}
.keinstcard h3.kh3o,.keinstcard .kh3o{font-size:15.5px;font-weight:600}
.ksub{margin:0 0 24px;color:var(--muted);font-size:14.5px}
.kfoot{margin-top:34px;text-align:center;font-size:12.5px;color:var(--dim)}
.kphasen{display:flex;flex-direction:column}
.kphase{display:flex;align-items:center;gap:14px;padding:9px 0;border-bottom:1px solid var(--hair)}
.kphase:last-child{border-bottom:none}
.kpname{flex:none;width:42%;font-size:13.5px;font-weight:600}
.kppct{flex:none;width:44px;text-align:right;font-size:12px;font-weight:700;color:var(--green)}

/* Kundenportal Feinschliff */
.kwrap{max-width:960px}
.kgrid{display:grid;grid-template-columns:1.35fr 1fr;gap:16px;align-items:start}
@media(max-width:800px){.kgrid{grid-template-columns:1fr}}
.khighlight,.card.khighlight{border:1px solid #efc9a8;background:#fffdfa}
.knfeedzeile{display:flex;gap:12px;padding:9px 0;border-bottom:1px solid var(--hair);font-size:13.5px;align-items:baseline}
.knfeedzeile:last-child{border-bottom:none}
.kndatum{flex:none;width:86px;font-size:12px;font-weight:700;color:var(--muted)}
.kntext{flex:1}
.kopen{color:var(--accentDark);font-weight:800;font-size:11px;text-transform:uppercase;letter-spacing:.5px}
.kdone{color:var(--green);font-weight:800;font-size:11px;text-transform:uppercase;letter-spacing:.5px}
.kwgrid{display:grid;grid-template-columns:1fr 2fr auto;gap:8px}
.kwgrid input{background:var(--panel);border:1px solid var(--line2);border-radius:var(--rs);padding:9px 12px;font-size:14px;font-family:inherit}
.kwgrid input:focus{outline:none;border-color:var(--text)}
@media(max-width:700px){.kwgrid{grid-template-columns:1fr}}
.knote{width:100%;background:var(--panel);border:1px solid var(--line2);border-radius:var(--rs);padding:9px 12px;font-size:14px;font-family:inherit}
.knote:focus{outline:none;border-color:var(--text)}
.kcontact .btn{margin:0 8px 8px 0}

/* Portal-Tab: Steuerung links, Live-Vorschau rechts */
.ptabgrid{display:grid;grid-template-columns:1fr 1fr;gap:20px;align-items:start}
@media(max-width:1100px){.ptabgrid{grid-template-columns:1fr}}
.pvcol{position:sticky;top:84px}
.pvframe{background:var(--panel);border:1px solid var(--line2);border-radius:10px;overflow:hidden;
  box-shadow:0 10px 40px rgba(20,20,20,.10)}
.pvbar{display:flex;align-items:center;gap:6px;background:var(--panel2);border-bottom:1px solid var(--line);padding:9px 12px}
.pvbar span{width:10px;height:10px;border-radius:50%;background:var(--line2)}
.pvbar span:nth-child(1){background:#f28b82}.pvbar span:nth-child(2){background:#fdd663}.pvbar span:nth-child(3){background:#81c995}
.pvurl{flex:1;text-align:center;font-size:11.5px;color:var(--dim);background:var(--panel);border:1px solid var(--hair);
  border-radius:6px;padding:3px 10px;margin-left:6px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pvframe iframe{width:100%;height:calc(100vh - 210px);min-height:520px;border:none;display:block;background:#f7f7f5}
.zrow{display:flex;gap:12px;align-items:flex-end}
.featgrid{display:grid;grid-template-columns:1fr 1fr;gap:4px 16px}
.kbadge{font-size:10px;background:var(--accentSoft);color:var(--accentDark);border:1px solid #f1d4bd;
  border-radius:10px;padding:2px 9px;letter-spacing:.3px;vertical-align:2px}
.kbadge.done{background:var(--greenSoft);color:var(--green);border-color:#c4e2cf}

/* Kundenbereich: Etappen-Leiste + Anleitungen + mehr Breite */
.kwrap{max-width:1100px}
.kstepper{padding:24px 26px 20px;margin-bottom:20px}
.ksteps{display:flex;margin-bottom:16px}
.kstep{flex:1;display:flex;flex-direction:column;align-items:center;gap:9px;position:relative;text-align:center}
.kstep::before{content:'';position:absolute;top:14px;right:50%;width:100%;height:2px;background:var(--line2)}
.kstep:first-child::before{display:none}
.kstep.done::before,.kstep.now::before{background:var(--accent)}
.kdot{width:29px;height:29px;border-radius:50%;border:2px solid var(--line2);background:var(--panel);
  display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;color:var(--dim);position:relative;z-index:1}
.kstep.done .kdot{background:var(--accent);border-color:var(--accent);color:#fff}
.kstep.now .kdot{border-color:var(--accent);color:var(--accentDark);box-shadow:0 0 0 4px var(--accentSoft)}
.ksname{font-size:12px;font-weight:600;color:var(--dim);max-width:120px;line-height:1.3}
.kstep.now .ksname{color:var(--text)}
.kstep.done .ksname{color:var(--muted)}
.ksnow{margin:0;text-align:center;color:var(--muted);font-size:13.5px}
.kguide{border-top:1px solid var(--hair);padding:10px 0 6px}
.kguide summary{cursor:pointer;font-weight:600;font-size:13px;color:var(--accentDark)}
.kguide summary::marker{color:var(--dim)}
.kguide ol{margin:10px 0 4px;padding-left:20px;font-size:13px;color:var(--muted);line-height:1.6}
.kguide li{margin-bottom:4px}
@media(max-width:720px){
  .ksteps{flex-wrap:wrap;gap:12px 0}
  .kstep{flex:0 0 33%}
  .kstep::before{display:none}
}

/* ============================================================
   Etappe 1: Mobile Navigation, responsive Listen, neue Bereiche
   ============================================================ */

/* --- Mobile Topbar + Overlay-Menü --- */
.mobilebar{display:none;align-items:center;gap:14px;background:var(--panel);
  border-bottom:1px solid var(--line);padding:10px 16px;position:sticky;top:0;z-index:40}
.mobilebar .mlogo img{height:26px;display:block}
.mburger{display:flex;flex-direction:column;gap:4px;background:none;border:none;padding:8px;cursor:pointer}
.mburger span{width:20px;height:2px;background:var(--text);border-radius:2px}
.mnav{position:fixed;inset:0 auto 0 0;width:280px;max-width:85vw;background:var(--panel);z-index:60;
  transform:translateX(-100%);transition:transform .18s ease;display:flex;flex-direction:column;
  padding:18px 14px;overflow-y:auto;box-shadow:0 0 40px rgba(0,0,0,.15)}
.mnav-head{display:flex;align-items:center;justify-content:space-between;padding:0 8px 16px}
.mnav-head img{height:26px}
.mclose{background:none;border:none;font-size:26px;line-height:1;color:var(--muted);cursor:pointer;padding:4px 10px}
.mnav-foot{margin-top:auto;padding:16px 10px 4px;border-top:1px solid var(--line);display:flex;flex-direction:column;gap:10px}
.mnav-dim{position:fixed;inset:0;background:rgba(20,20,20,.35);z-index:50;opacity:0;pointer-events:none;transition:opacity .18s}
body.nav-open .mnav{transform:none}
body.nav-open .mnav-dim{opacity:1;pointer-events:auto}
.mnav .navlink{padding:12px 12px;font-size:15px}
.navsep{height:1px;background:var(--hair);margin:10px 8px}

/* --- Responsive Grundgerüst --- */
@media(max-width:900px){
  .shell{display:block}
  .sidebar{display:none}
  .mobilebar{display:flex}
  .content{padding:18px 16px 90px}
  .head{flex-wrap:wrap;gap:10px}
  .head h1{font-size:24px}
  .cols{grid-template-columns:1fr !important}
  .dashgrid{grid-template-columns:1fr !important}
  .kgrid{grid-template-columns:1fr !important}
  .ptabgrid{grid-template-columns:1fr}
  .pvcol{position:static}
  .tabs{overflow-x:auto;white-space:nowrap;scrollbar-width:none}
  .quick{grid-template-columns:repeat(4,1fr) !important}
}

/* --- Tabellen werden mobil zu Karten --- */
@media(max-width:760px){
  .tbl.responsive thead{display:none}
  .tbl.responsive, .tbl.responsive tbody, .tbl.responsive tr, .tbl.responsive td{display:block;width:100%}
  .tbl.responsive tr{border:1px solid var(--line);border-radius:8px;margin-bottom:12px;padding:12px 14px;background:var(--panel)}
  .tbl.responsive td{border:none;padding:6px 0;display:flex;align-items:center;gap:10px}
  .tbl.responsive td[data-l]:not([data-l=""])::before{content:attr(data-l);flex:0 0 112px;
    font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--dim)}
  .tbl.responsive td.rowactions{display:flex;justify-content:flex-start;flex-wrap:wrap;white-space:normal;text-align:left;min-width:0}
}

/* --- Neu-anlegen-Menü --- */
.neumenu{position:relative}
.neumenu summary{list-style:none;cursor:pointer}
.neumenu summary::-webkit-details-marker{display:none}
.neumenu-list{position:absolute;right:0;top:calc(100% + 6px);background:var(--panel);border:1px solid var(--line2);
  border-radius:8px;box-shadow:0 12px 34px rgba(20,20,20,.14);min-width:200px;padding:6px;z-index:30}
.neumenu-list a{display:block;padding:9px 12px;border-radius:5px;font-size:14px;font-weight:500;color:var(--text)}
.neumenu-list a:hover{background:var(--panel2)}

/* --- Anfragen-Pipeline --- */
.cellinput{border:1px solid transparent;background:transparent;border-radius:5px;padding:6px 8px;
  font:inherit;font-size:13.5px;color:var(--text);width:100%;max-width:170px;transition:.12s}
.cellinput:hover{border-color:var(--line2)}
.cellinput:focus{border-color:var(--accent);background:var(--panel);outline:none}
.cellinput.saved,.statussel.saved{box-shadow:0 0 0 2px var(--greenSoft);border-color:var(--green)}
.cellinput.failed,.statussel.failed{box-shadow:0 0 0 2px var(--redSoft);border-color:var(--red)}
.mini.gruen{color:var(--green);border-color:#c4e2cf}
.mini.gruen:hover{background:var(--greenSoft)}

/* --- Akte: Inline-Felder --- */
.afield{border:1px solid transparent;background:transparent;border-radius:5px;padding:5px 8px;
  font:inherit;font-size:14px;color:var(--text);width:100%;transition:.12s}
.afield:hover{border-color:var(--line2)}
.afield:focus{border-color:var(--accent);background:var(--panel);outline:none}
.savestate{font-size:11.5px;font-weight:500;color:var(--dim);letter-spacing:.02em;margin-left:10px;text-transform:none}

/* --- Projekte / Abos / gemeinsame Listen --- */
.tablecard{padding:6px 6px}
.tbl{width:100%;border-collapse:collapse}
.tbl th{font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--dim);
  text-align:left;padding:12px 14px;border-bottom:1px solid var(--line)}
.tbl td{padding:12px 14px;border-bottom:1px solid var(--hair);font-size:14px;vertical-align:middle}
.tbl tr:last-child td{border-bottom:none}
.tbl tr:hover td{background:var(--panel2)}
.rowlink{color:var(--text)}
.rowlink:hover{color:var(--accentDark)}
.tbl .sub,.proj .sub{display:block;font-size:12px;color:var(--dim);font-weight:400;margin-top:1px}
.progwrap{display:flex;align-items:center;gap:10px;min-width:130px}
.prog{flex:1;height:6px;background:var(--panel2);border-radius:3px;overflow:hidden}
.prog i{display:block;height:100%;background:var(--accent);border-radius:3px}
.progtxt{font-size:12px;color:var(--muted);white-space:nowrap}
.warntxt{color:var(--red);font-weight:600}
.mehr{font-size:12px;font-weight:500;color:var(--accentDark);float:right;letter-spacing:0;text-transform:none}

/* --- Aktivitäten --- */
.chips{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:16px}
.chip{font-size:12.5px;font-weight:600;color:var(--muted);border:1px solid var(--line2);
  border-radius:10px;padding:5px 14px;transition:.12s}
.chip:hover{border-color:var(--accent);color:var(--accentDark)}
.chip.active{background:var(--accentSoft);border-color:var(--accent);color:var(--accentDark)}
.aktrow{display:flex;align-items:baseline;gap:14px;padding:10px 6px;border-bottom:1px solid var(--hair);font-size:13.5px}
.aktrow:last-child{border-bottom:none}
.aktzeit{flex:0 0 84px;color:var(--dim);font-size:12.5px;font-variant-numeric:tabular-nums}
.akttyp{flex:0 0 76px;font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--accentDark);font-weight:700}
.akttext{color:var(--text)}

/* --- Kalender --- */
.kaltag{margin-bottom:6px}
.kaltag-head{font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--dim);
  font-weight:700;padding:14px 6px 8px;border-bottom:1px solid var(--line)}
.kalrow{display:flex;align-items:baseline;gap:14px;padding:11px 6px;border-bottom:1px solid var(--hair);
  font-size:14px;color:var(--text)}
a.kalrow:hover{background:var(--panel2)}
.kalzeit{flex:0 0 46px;font-variant-numeric:tabular-nums;color:var(--accentDark);font-weight:600;font-size:13px}
.kaltext{flex:1}
.kalquelle{font-size:11.5px;color:var(--dim)}

/* --- Dashboard-Ergänzungen --- */
.minikpis{display:flex;gap:26px;padding:4px 2px}
.minikpis b{display:block;font-size:22px;font-weight:700;letter-spacing:-.01em}
.minikpis span{font-size:11.5px;color:var(--dim);letter-spacing:.03em}

/* Mobil-Menü: Links untereinander (Basisregel ist row für die schmale Desktop-Leiste) */
.mnav .sbnav{flex-direction:column;align-items:stretch}
.mnav .navlink{width:100%}

/* Bestandskunden-Portal: Website ist online */
.klive{display:flex;flex-direction:column;gap:10px;margin-bottom:20px;padding:24px 26px}
.klive-status{display:flex;align-items:center;gap:8px;font-size:11.5px;font-weight:700;
  letter-spacing:.08em;text-transform:uppercase;color:var(--green)}
.kpunkt{flex:none;width:6px;height:6px;border-radius:50%;background:var(--green);animation:kpuls 2.6s ease-in-out infinite}
@keyframes kpuls{0%,100%{box-shadow:0 0 0 0 rgba(30,125,67,.3)}50%{box-shadow:0 0 0 3px rgba(30,125,67,0)}}
.klive-titel{font-size:22px;font-weight:700;letter-spacing:-.01em}
.klive-domain{font-weight:400;color:var(--muted);font-size:16px;margin-left:8px}
.klive-btns{display:flex;gap:10px;flex-wrap:wrap;margin-top:4px}
/* Hinweis: die frühere .ksub-Regel hier zwang jede Seitenbeschreibung in Versalien.
   Beschreibungen sind ganze Sätze und nutzen die normale .ksub-Regel (muted, 14,5px) weiter oben. */

/* Pakete-Pflege in den Einstellungen */
/* Umbruchfähig: die Zeile bleibt im Kartenrahmen, statt bei 1280 px rechts hinauszulaufen */
.paketzeile{display:flex;align-items:center;gap:10px;padding:7px 0;border-bottom:1px solid var(--hair);font-size:13.5px;color:var(--muted);flex-wrap:wrap}
.paketzeile:last-child{border-bottom:none}
.paketzeile input{border:1px solid var(--line2);border-radius:5px;padding:7px 10px;font:inherit;font-size:13.5px;min-width:0}
.paketzeile input[name="beschreibung"]{flex:1;min-width:180px}
.profilzeile{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:12.5px;color:var(--dim);margin:4px 0 10px}

/* Geführtes Onboarding */
.obdots{display:flex;gap:8px;margin:0 0 16px}
.obdot{width:32px;height:32px;border-radius:50%;border:1.5px solid var(--line2);display:flex;align-items:center;
  justify-content:center;font-size:13px;font-weight:600;color:var(--dim);background:var(--panel)}
.obdot.now{border-color:var(--accent);color:var(--accentDark);box-shadow:0 0 0 4px var(--accentSoft)}
.obdot.done{background:var(--accent);border-color:var(--accent);color:#fff}
.obfeld{display:block;margin-bottom:14px}
.oblabel{display:block;font-size:13px;font-weight:600;color:var(--muted);margin-bottom:5px}
.obfeld input[type=text],.obfeld input:not([type]),.obfeld textarea{width:100%;border:1px solid var(--line2);
  border-radius:6px;padding:10px 12px;font:inherit;font-size:14px}
/* Textfelder starten kompakt und wachsen beim Tippen von selbst mit (field-sizing).
   Ältere Browser ohne field-sizing behalten die rows-Höhe und können manuell aufziehen. */
.obfeld textarea{field-sizing:content;min-height:44px;resize:vertical;line-height:1.5}
.obfeld input:focus,.obfeld textarea:focus{border-color:var(--text);outline:none}

/* Upload-Fortschritt */
.upzeile{display:flex;align-items:center;gap:10px;padding:8px 2px;font-size:13px;border-bottom:1px solid var(--hair)}
.upname{flex:0 1 40%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.upbar{flex:1;height:6px;background:var(--panel2);border-radius:3px;overflow:hidden}
.upbar i{display:block;height:100%;width:0;background:var(--accent);transition:width .15s}
.upzeile.fertig .upbar i{background:var(--green)}
.upzeile.fehler .upbar i{background:var(--red)}
.upstat{flex:0 0 auto;font-size:12px;color:var(--muted)}

/* Datei-Galerie im Portal-Tab */
.gbulk{display:flex;align-items:center;gap:10px;padding:4px 0 12px;font-size:13px;border-bottom:1px solid var(--hair);margin-bottom:12px}
.gbulk select{border:1px solid var(--line2);border-radius:5px;padding:6px 9px;font:inherit;font-size:12.5px}
.galerie{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px}
.gitem{position:relative;border:1px solid var(--line);border-radius:8px;overflow:hidden;background:var(--panel)}
.gcheck{position:absolute;top:6px;left:6px;z-index:2;background:rgba(255,255,255,.9);border-radius:4px;padding:3px 5px}
.gitem form{position:absolute;top:6px;right:6px;z-index:2}
.gthumb{display:block;height:96px;background:var(--panel2);display:flex;align-items:center;justify-content:center}
.gthumb img{width:100%;height:100%;object-fit:cover}
.gdoc{font-size:12px;font-weight:700;color:var(--dim);letter-spacing:.08em}
.gmeta{padding:8px 10px;display:flex;flex-direction:column;gap:4px}
.gname{font-size:12px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ginfo{font-size:11px;color:var(--dim)}
.gmeta .dkat{border:1px solid var(--line2);border-radius:4px;padding:4px 6px;font-size:11.5px;font-family:inherit}

/* Portal-Tab-Aktionen + Admin-als-Kunde-Banner */
.ptabaktionen{display:flex;gap:10px;margin:0 0 16px;flex-wrap:wrap;align-items:center}
.adminbanner{background:#1a1b1e;color:#fff;font-size:12.5px;padding:9px 16px;border-radius:6px;margin-bottom:14px}
.adminbanner a{color:#ffb38a;font-weight:600}

/* ============================================================
   Bestandskunden-Portal v2: Hierarchie, Hero, Sammel-Anfragen
   ============================================================ */
.khallo{font-size:13px;color:var(--muted);margin-right:6px}

/* Hero: die eine Hauptinformation der Seite */
.khero{background:var(--panel);border:1px solid var(--line);border-radius:10px;
  padding:38px 40px;margin:4px 0 24px;box-shadow:0 14px 44px rgba(20,20,20,.06)}
.khero-status{display:flex;align-items:center;gap:8px;font-size:11.5px;font-weight:700;
  letter-spacing:.08em;text-transform:uppercase;color:var(--green);margin-bottom:10px}
/* Neutraler Stand ohne hinterlegte Domain: grau, kein grüner „live"-Puls */
.khero-status-neutral{color:var(--muted)}
.khero-status-neutral .kpunkt{background:var(--muted);animation:none}
.kh1{font-size:clamp(26px,4vw,36px);font-weight:600;letter-spacing:-.015em;line-height:1.1;margin:0}
.khero-domain{font-size:16px;color:var(--muted);margin-top:6px}
.khero-btns{display:flex;gap:12px;flex-wrap:wrap;margin-top:22px}
.btn.gross{padding:12px 22px;font-size:15px}

/* Modul-Typografie: große Überschriften statt Versal-Zeilen */
.kmodul{background:var(--panel);border:1px solid var(--line);border-radius:10px;
  padding:26px 28px;margin-bottom:20px}
.kh2{font-size:21px;font-weight:650;letter-spacing:-.01em;margin:0 0 6px}
.kh3{font-size:15px;font-weight:700;margin:18px 0 10px}
.card h3.kh3o,.kh3o{font-size:19px;font-weight:600;letter-spacing:-.01em;text-transform:none;color:var(--text);line-height:1.3}
.ksubtext{color:var(--muted);font-size:15px;line-height:1.5;margin:0 0 16px;max-width:60ch}
.hoststatus{font-size:13px;font-weight:700;color:var(--green)}
.kansprech{margin-top:14px;padding-top:12px;border-top:1px solid var(--hair);font-size:13.5px;font-weight:600}
.kgrid.breit{grid-template-columns:1.6fr 1fr}

/* Anfrage-Dialog */
.anfdialog{border:1px solid var(--line2);border-radius:10px;padding:20px;margin-top:14px;background:var(--bg)}
.anffeld{display:grid;grid-template-columns:1fr 1.4fr;gap:12px}
.anfdialog label{display:block;font-size:12.5px;font-weight:600;color:var(--muted);margin-bottom:12px}
.anfdialog input,.anfdialog select,.anfdialog textarea{display:block;width:100%;margin-top:5px;
  border:1px solid var(--line2);border-radius:6px;padding:10px 12px;font:inherit;font-size:14px;background:var(--panel)}
.anfdialog textarea{resize:vertical}
.anfdialog input:focus,.anfdialog select:focus,.anfdialog textarea:focus{border-color:var(--text);outline:none}
.anfcheck{display:flex !important;align-items:center;gap:8px;font-weight:500 !important;cursor:pointer}
.anfcheck input{width:auto !important;margin:0 !important;display:inline-block !important}
.anfupload{margin-bottom:20px}
#anf-dateien{display:flex;flex-direction:column;gap:10px}
#anf-dateien:not(:empty){margin-top:12px}
.upzone.klein{padding:14px}
/* Datei-Vorschau im Änderungswunsch nutzt die Onboarding-Optik (.updatei). */
#anf-dateien .updatei-thumb{cursor:zoom-in}
#anf-dateien .anf-del{flex:none;align-self:flex-start}
.anfdialog-bar{display:flex;gap:10px;align-items:center;margin-top:4px}

/* Sammlung: ruhiger weißer Bereich, jeder Änderungswunsch als eigene kompakte Karte */
.anfsammlung{margin-top:18px}
.anfsammlung .ksubtext{margin-bottom:16px}
#anf-punkte{display:flex;flex-direction:column;gap:10px}
.anfpunkt{position:relative;overflow:hidden;display:flex;align-items:flex-start;gap:14px;
  padding:14px 16px;background:var(--panel);border:1px solid var(--hair);border-radius:10px;box-shadow:var(--schatten1)}
.anfpunkt[data-status="fertig"]{opacity:.55}
.anfpunkt .upbar{position:absolute;left:0;right:0;bottom:0;height:3px;background:var(--panel2);border-radius:0}
.anfpunkt .upbar i{display:block;height:100%;background:var(--accent)}
.anfmain{flex:1;min-width:0;display:flex;flex-direction:column;gap:5px}
.anfwunschnr{font-size:12px;font-weight:600;color:var(--muted);text-transform:uppercase;letter-spacing:.4px}
.anfvorschau{font-size:14.5px;color:var(--text);line-height:1.45;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.anfchips{display:flex;flex-wrap:wrap;gap:6px;margin-top:2px}
.anfchip{font-size:11.5px;color:var(--muted);background:var(--panel2);border-radius:6px;padding:2px 9px}
.anfpunkt-aktionen{display:flex;flex-direction:column;gap:6px;flex:0 0 auto}
.anffehler{display:block;font-size:12.5px;color:var(--red)}
.anf-mehrzeile{appearance:none;background:none;border:0;cursor:pointer;font:inherit;font-size:14px;
  font-weight:500;color:var(--accentDark);padding:14px 2px 0;display:flex;align-items:center;gap:8px;width:100%}
.anf-mehrzeile::before{content:"+";font-size:16px;font-weight:600;line-height:1}
.anf-mehrzeile:hover{text-decoration:underline}
.anfsammlung-bar{display:flex;gap:10px;align-items:center;margin-top:20px;justify-content:flex-end}
.anf-erfolg{background:var(--greenSoft);border:1px solid #c4e2cf;color:var(--green);
  border-radius:8px;padding:12px 16px;font-weight:600;font-size:14px;margin-bottom:14px}

/* Anfragen-Statusliste */
.anfliste{margin-top:4px}
.anfrow{border-bottom:1px solid var(--hair)}
.anfrow:last-child{border-bottom:none}
.anfrow.fertig{opacity:.6}
.anfsummary{display:flex;align-items:center;gap:14px;padding:12px 4px;cursor:pointer;list-style:none}
.anfsummary::-webkit-details-marker{display:none}
.anfsummary::after{content:"›";flex:0 0 auto;color:var(--dim);font-size:18px;transition:transform .15s}
.anfrow[open] .anfsummary::after{transform:rotate(90deg)}
.anfmain{flex:1;min-width:0}
.anftitel{display:block;font-size:14px;font-weight:600}
.anfmeta{display:block;font-size:12px;color:var(--dim);margin-top:2px}
/* Kategorie über dem Titel: der Kunde sieht sofort, worum es bei dem Punkt geht */
.anfkat{display:block;font-size:11px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;margin-bottom:3px;color:var(--muted)}
.anfkat.k-aenderung{color:#b5700a}
.anfkat.k-problem{color:#b3402a}
.anfkat.k-anliegen{color:#6f7378}
.anfdringend{color:var(--red);font-weight:600}
.anf-ledpunkt{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--accent);margin-right:7px;vertical-align:middle}
.anfstatus{flex:0 0 auto;font-size:11px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;
  border-radius:10px;padding:4px 12px;background:var(--panel2);color:var(--muted)}
.anfstatus.s-arbeit{background:#e7f0fa;color:#1864ab}
.anfstatus.s-antwort{background:#fdf3e0;color:#b5810a}
.anfstatus.s-fertig{background:var(--greenSoft);color:var(--green)}
.anfbody{padding:4px 4px 16px}
.anfvoll{font-size:13.5px;color:var(--muted);margin:0 0 10px;white-space:pre-wrap}

/* Dialog-Hinweis je nach Abo (inkludiert / Zusatzleistung / kein Abo): dezent, keine Box */
.anf-abohinweis{margin:0 0 18px;font-size:14px;color:var(--muted);line-height:1.55}

/* Bisherige Anliegen: eine ruhige, aufklappbare Sektion weit unten */
/* Abgeschlossenes liegt hinter einer eigenen Karte, damit die laufenden Punkte führen */
.anfsektion{padding-top:8px}
.anfsektion>summary{list-style:none;cursor:pointer;font-size:18px;font-weight:700;letter-spacing:-.01em;color:var(--text);padding:12px 0;display:flex;align-items:center;gap:8px}
.anfsektion>summary::-webkit-details-marker{display:none}
.anfsektion>summary::after{content:"›";color:var(--dim);font-size:20px;transition:transform .15s}
.anfsektion[open]>summary::after{transform:rotate(90deg)}

/* Nachrichten-Faden zwischen Kunde und Raoul */
.wfaden{display:flex;flex-direction:column;gap:8px;margin:2px 0 12px}
.wbubble{max-width:82%;padding:9px 13px;border-radius:10px;font-size:13.5px;line-height:1.5}
.wbubble.fremd{align-self:flex-start;background:var(--panel2);border-bottom-left-radius:4px}
.wbubble.eigen{align-self:flex-end;background:var(--accentSoft);border-bottom-right-radius:4px}
.wbtext{margin:0;white-space:pre-wrap}
.wbmeta{display:block;font-size:11px;color:var(--dim);margin-top:4px}
.wbubble.angebot{max-width:100%;align-self:stretch;background:#fff;border:1px solid var(--line);border-radius:10px}
.wangebot-kopf{display:flex;align-items:center;gap:10px;margin-bottom:2px}
.wangebot-preis{font-size:17px;font-weight:800;color:var(--text)}
.wangebot-offen,.wangebot-ja,.wangebot-nein{font-size:11px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;border-radius:8px;padding:3px 9px}
.wangebot-offen{background:#fdf3e0;color:#b5810a}
.wangebot-ja{background:var(--greenSoft);color:var(--green)}
.wangebot-nein{background:var(--panel2);color:var(--muted)}
.wangebot-aktion{display:flex;gap:8px;margin-top:10px;flex-wrap:wrap}
.wangebot-aktion .btn{flex:1;min-width:140px}

/* Dateien am Wunsch */
.wdateien{display:flex;flex-wrap:wrap;gap:12px;margin:2px 0 12px}
.wdatei-bild{margin:0;display:flex;flex-direction:column;gap:5px;max-width:120px}
.wdatei-bild img{width:72px;height:72px;object-fit:cover;border-radius:8px;border:1px solid var(--line);display:block}
.wdatei-file{margin:0;display:flex;flex-direction:column;gap:5px;max-width:160px}
.wdatei-file a{font-size:12.5px;padding:8px 12px;background:var(--panel2);border-radius:8px;color:var(--muted);text-decoration:none}
.wdatei-cap{font-size:12px;line-height:1.35;color:var(--muted)}

/* Antwortfeld des Kunden */
.wantwort{margin-top:6px}
.wantwort-text{width:100%;min-height:52px;padding:10px 12px;border:1px solid var(--line);border-radius:10px;font:inherit;font-size:13.5px;resize:vertical}
.wantwort-bar{display:flex;justify-content:flex-end;margin-top:8px}

/* Admin-Seite: Wunschblock mit Werkzeugen */
.wunschliste{display:flex;flex-direction:column;gap:16px}
.wunschblock{border:1px solid var(--line);border-radius:10px;padding:14px 16px}
.wunschblock.neu{border-color:var(--accent);box-shadow:0 0 0 3px var(--accentSoft)}
.wunschkopf{display:flex;align-items:flex-start;gap:12px;flex-wrap:wrap;margin-bottom:10px}
.wunschtitel{flex:1;min-width:180px;font-size:14px;line-height:1.5}
.wunschtitel.strike{text-decoration:line-through;opacity:.6}
.wunschwerk{margin-top:8px;border-top:1px solid var(--hair);padding-top:10px}
.wunschwerk>summary{cursor:pointer;font-size:13px;font-weight:600;color:var(--accentDark);list-style:none}
.wunschwerk>summary::-webkit-details-marker{display:none}
.wwform{margin-top:10px}
.wwform textarea,.wwform input{font:inherit}
.wwform textarea{width:100%;padding:9px 12px;border:1px solid var(--line);border-radius:10px;font-size:13.5px;resize:vertical}
.wwbar{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:8px;flex-wrap:wrap}
.wwbar .check{font-size:12.5px;color:var(--muted)}
.wwangebot{border-top:1px dashed var(--hair);padding-top:12px;margin-top:12px}
.wwzeile{display:flex;gap:8px;flex-wrap:wrap}
.wwzeile input{padding:9px 12px;border:1px solid var(--line);border-radius:10px;font-size:13.5px}

@media(max-width:760px){
  .khero{padding:26px 22px}
  .khero-btns .btn{flex:1;text-align:center}
  .kgrid.breit{grid-template-columns:1fr}
  .anffeld{grid-template-columns:1fr}
  .kmodul{padding:20px 18px}
  .anfrow{flex-wrap:wrap}
  .anfstatus{margin-left:auto}
}

/* Anliegen-Auswahl: Karten statt Formular-Einstieg */
.anlwahl{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:10px;margin-top:4px}
.anlkarte{display:flex;align-items:center;gap:10px;background:var(--panel);border:1px solid var(--line2);
  border-radius:9px;padding:14px 16px;font:inherit;font-size:13.5px;font-weight:600;color:var(--text);
  cursor:pointer;text-align:left;transition:.12s}
.anlkarte:hover{border-color:var(--accent);box-shadow:0 4px 16px rgba(232,89,12,.08)}
.anlicon{font-size:17px;color:var(--accentDark);flex:0 0 auto}
.anfschritt{display:flex;align-items:center;gap:9px;font-size:13px;font-weight:700;margin:2px 0 10px}
.anfschritt .mini{margin-left:6px}
.anfnr{width:20px;height:20px;border-radius:50%;background:var(--accentSoft);color:var(--accentDark);
  display:inline-flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;flex:0 0 auto}
.anfnr.hell{background:rgba(255,255,255,.25);color:#fff;margin-right:6px}
.anf-badge{display:inline-block;background:var(--accentSoft);color:var(--accentDark);border:1px solid #f1d4bd;
  border-radius:10px;padding:5px 14px;font-size:12.5px;font-weight:700;margin-bottom:12px}

/* Nutzer-Menü im Kundenportal */
.usermenu{position:relative}
.usermenu summary{list-style:none;cursor:pointer;font-size:13.5px;font-weight:600;color:var(--text);
  padding:8px 12px;border:1px solid var(--line2);border-radius:6px;background:var(--panel)}
.usermenu summary::-webkit-details-marker{display:none}
.usermenu .caret{font-size:10px;color:var(--dim)}
.usermenu-list{position:absolute;right:0;top:calc(100% + 6px);background:var(--panel);border:1px solid var(--line2);
  border-radius:8px;box-shadow:0 12px 34px rgba(20,20,20,.14);min-width:170px;padding:6px;z-index:40}
.usermenu-list a{display:block;padding:9px 12px;border-radius:5px;font-size:13.5px;font-weight:500;color:var(--text)}
.usermenu-list a:hover{background:var(--panel2)}

/* Kontakt persönlicher */
.kperson{display:flex;align-items:center;gap:12px;margin:2px 0 12px}
.kavatar{width:42px;height:42px;border-radius:50%;background:var(--accentSoft);color:var(--accentDark);
  display:flex;align-items:center;justify-content:center;font-weight:700;font-size:14px;flex:0 0 auto}
.kbtns{display:flex;flex-direction:column;gap:8px}
.kbtns .btn{text-align:center}
.hostbtns{display:flex;gap:8px;flex-wrap:wrap}

@media(max-width:760px){
  .anlwahl{grid-template-columns:1fr 1fr}
  .anfdialog-bar,.anfsammlung-bar{flex-wrap:wrap}
  .anfdialog-bar .btn,.anfsammlung-bar .btn{flex:1 1 100%;text-align:center}
}
[hidden]{display:none !important}

/* ---------- Portalverwaltung (Tabs) ---------- */
.ptabs{display:flex;align-items:center;gap:4px;flex-wrap:wrap;margin:14px 0 18px;border-bottom:1px solid var(--line2);padding-bottom:0}
.ptab{padding:8px 13px;font-size:13.5px;color:var(--muted);text-decoration:none;border-bottom:2px solid transparent;margin-bottom:-1px;white-space:nowrap}
.ptab:hover{color:var(--text)}
.ptab.active{color:var(--text);font-weight:600;border-bottom-color:var(--accent)}
.ptabs .savestate{margin-left:auto;padding-bottom:8px}
.pfakten{display:flex;flex-direction:column}
.pfakt{display:flex;flex-wrap:wrap;gap:4px 14px;padding:9px 0;border-bottom:1px solid var(--line2);font-size:13.5px}
.pfakt:last-child{border-bottom:none}
.pfk{width:170px;flex:none;color:var(--muted)}
.pfv{flex:1;min-width:170px;overflow-wrap:anywhere}
.pakt{display:flex;flex-wrap:wrap;gap:8px}
.warnliste{margin:0;padding-left:18px;font-size:13.5px;color:#8a5a00}
.warnliste li{margin:4px 0}

/* Portalprofile */
.profgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:12px}
.profkarte{border:1px solid var(--line2);border-radius:10px;padding:14px 16px;background:var(--panel2)}
.profkarte.aktiv{border-color:var(--accent)}
.profkopf{display:flex;align-items:center;justify-content:space-between;gap:8px}
.profchips{display:flex;flex-wrap:wrap;gap:4px;margin-bottom:10px;min-height:20px}
.profchip{font-size:11.5px;background:var(--panel);border:1px solid var(--line2);border-radius:99px;padding:2px 8px;color:var(--muted)}
.proffuss{display:flex;gap:6px}
.diffbox{margin-top:16px;border:1px solid var(--line2);border-radius:10px;padding:14px 16px;background:var(--panel2)}
.diffkopf{font-weight:600;font-size:13.5px;margin-bottom:8px}
.diffplus,.diffminus{display:inline-block;font-size:13px;border-radius:6px;padding:3px 8px;margin:0 6px 6px 0}
.diffplus{background:#e7f3ea;color:#1e7d43}
.diffminus{background:#fbeae6;color:#b3402a}
.profedit{border-bottom:1px solid var(--line2);padding:10px 0}
.profedit:last-child{border-bottom:none}
.profedit summary{cursor:pointer;font-size:14px}

.pcols{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;align-items:start}
.pcols > .card{min-width:0}
.pcols .actions{overflow-wrap:anywhere;word-break:break-word}
@media (max-width: 1150px){ .pcols{grid-template-columns:1fr} }

/* Modulliste */
.modliste{display:flex;flex-direction:column}
.modrow{display:flex;align-items:center;gap:12px;padding:11px 4px;border-bottom:1px solid var(--line2)}
.modrow:last-child{border-bottom:none}
.modrow.ziehend{opacity:.4}
.modgriff{cursor:grab;color:var(--muted);letter-spacing:-2px;font-size:15px;user-select:none;flex:none}
.modinfo{flex:1;min-width:0}
.modname{font-weight:600;font-size:14px}
.modzustand{font-size:12.5px;color:var(--text);opacity:.75;margin-top:1px}
.modbed{font-size:12px;color:var(--muted);margin-top:1px}
.switch{position:relative;display:inline-block;width:40px;height:23px;flex:none}
.switch input{opacity:0;width:0;height:0}
.switch span{position:absolute;inset:0;border-radius:99px;background:var(--line);transition:background .15s;cursor:pointer}
.switch span:before{content:"";position:absolute;width:17px;height:17px;border-radius:50%;background:#fff;top:3px;left:3px;transition:transform .15s;box-shadow:0 1px 2px rgba(0,0,0,.25)}
.switch input:checked+span{background:#1e7d43}
.switch input:checked+span:before{transform:translateX(17px)}
.switch input:disabled+span{opacity:.5;cursor:default}
.switch.klein{width:34px;height:20px}
.switch.klein span:before{width:14px;height:14px}
.switch.klein input:checked+span:before{transform:translateX(14px)}

/* Schnellzugriff-Verwaltung */
.lliste{display:flex;flex-direction:column;gap:6px}
.lrow{display:flex;align-items:center;gap:6px}
.lrow.ziehend{opacity:.4}
.lrow input{margin:0;padding:7px 9px;font-size:13px}
.licon{width:44px;flex:none;text-align:center}
.lname{width:140px;flex:none}
.lurl{flex:1;min-width:80px}
.lkat{width:100px;flex:none}
.lneu{margin:0;font-size:12px;white-space:nowrap;flex:none}

/* Hosting-Tab */
.hlabel{display:block;margin-top:18px;font-size:13px;font-weight:600;color:var(--text)}
.hlabel input,.hlabel textarea,.hlabel select{margin-top:7px;display:block;width:100%;max-width:560px;border:1px solid var(--line2);border-radius:9px;padding:9px 11px;font-size:14px;font-weight:400;background:#fff;color:var(--text);transition:border-color .12s}
.hlabel input:hover,.hlabel textarea:hover,.hlabel select:hover{border-color:#cbbfa8}
.hlabel input:focus,.hlabel textarea:focus,.hlabel select:focus{border-color:var(--accent);outline:none}
.hlabel .lmut{display:block;margin:3px 0 0;font-weight:400;color:var(--muted);font-size:12.5px}
.hwp{margin-top:18px}
.hwp>summary{cursor:pointer;font-size:13px;font-weight:600;color:var(--dim);list-style:none;padding:3px 0;display:inline-flex;align-items:center;gap:6px}
.hwp>summary::-webkit-details-marker{display:none}
.hwp>summary::before{content:"▸";font-size:11px;transition:transform .15s ease}
.hwp>summary:hover{color:var(--text)}
.hwp[open]>summary{color:var(--text);margin-bottom:2px}
.hwp[open]>summary::before{transform:rotate(90deg)}
.hwp .hlabel{margin-top:8px}
.fbadge{font-size:10.5px;font-weight:600;letter-spacing:.4px;text-transform:uppercase;border-radius:4px;padding:2px 6px;vertical-align:1px}
.fbadge.kunde{background:#e7f3ea;color:#1e7d43}
.fbadge.intern{background:#eceef1;color:#5a6472}
.fdot{display:inline-block;width:7px;height:7px;border-radius:50%;margin-right:7px;vertical-align:1px;flex:none}
.fdot.kunde{background:#3f9e6a}
.fdot.intern{background:var(--dim)}
.hinp{border:1px solid var(--line2);border-radius:9px;padding:9px 11px;font-size:14px;background:#fff;color:var(--text);transition:border-color .12s}
.hinp:hover{border-color:#cbbfa8}
.hinp:focus{border-color:var(--accent);outline:none}
.emailrow{border:1px solid var(--line);border-radius:10px;padding:10px 12px;margin-bottom:8px}
.emailrow-kopf{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.emailrow-akt{margin-left:auto;display:inline-flex;gap:8px}
.emailpw{display:flex;align-items:center;gap:10px;margin-top:9px}
.emailpw .lmut{flex:none;min-width:70px}
.emailpw input{flex:1;max-width:340px}
.emailfrei{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:14px}
.emailadd{display:flex;gap:8px;flex-wrap:wrap}
.emailadd input{flex:1;min-width:130px}
.kmailrow{padding:11px 0;border-bottom:1px solid var(--hair)}
.kmailrow:last-child{border-bottom:0}
.kpw{display:flex;align-items:center;gap:8px;margin-top:7px;flex-wrap:wrap}
.kpw-label{font-size:12.5px;color:var(--muted);min-width:66px}
.kpw-wert{font-family:var(--font-mono,ui-monospace,monospace);font-size:13.5px;letter-spacing:.02em}
.hgruppe[hidden]{display:none}
.typchip{font-size:11px;font-weight:600;background:var(--panel2);border:1px solid var(--line2);border-radius:4px;padding:1px 6px;color:var(--muted);white-space:nowrap}

/* Vorschau */
.prevbar{display:flex;align-items:center;gap:6px;margin-bottom:10px}
.prevgr.aktiv{background:var(--text);color:#fff;border-color:var(--text)}
.prevrahmen{background:var(--panel2);border:1px solid var(--line2);border-radius:10px;padding:16px;display:flex;justify-content:center}
#previframe{height:78vh;border:1px solid var(--line);border-radius:8px;background:#fff;max-width:100%;transition:width .25s}

@media (max-width: 760px){
  .ptabs{overflow-x:auto;flex-wrap:nowrap;padding-bottom:0;-webkit-overflow-scrolling:touch}
  .ptabs .savestate{display:none}
  .pfakt{flex-direction:column;gap:2px}
  .pfk{width:auto}
  .profgrid{grid-template-columns:1fr}
  .lrow{flex-wrap:wrap}
  .lname,.lurl,.lkat{width:100%;flex:1 1 100%}
  .prevrahmen{padding:8px}
}

/* ---------- Bestandskunden-Ansicht v4: kompakter Hero, ruhige Nebenspalte ---------- */
.khero.kompakt{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:26px 30px;margin-bottom:22px}
.khero.kompakt .kh1{font-size:24px;margin:4px 0 2px}
.khero.kompakt .khero-domain{font-size:13.5px;margin:0}
.khero-cta{flex:none}
.kruhig .card{border:none;background:transparent;box-shadow:none;border-radius:0;padding:20px 4px;border-top:1px solid var(--line2)}
.kruhig .card:first-child{border-top:none;padding-top:6px}
.kfoto{width:56px;height:56px;border-radius:50%;object-fit:cover;flex:none;display:block}
/* Auf der Kontaktkarte darf das Foto größer stehen und etwas Luft um den Kopf behalten */
.kfoto.gross{width:96px;height:96px;border-radius:16px;object-fit:cover;object-position:center top;background:var(--panel2)}
.kperson{display:flex;align-items:center;gap:16px;margin:2px 0 16px}
.kperson-name{font-weight:600;font-size:16px}
.kperson-sub{display:block;font-size:14px;color:var(--muted);margin-top:3px;line-height:1.45}
.kcontact .kbtns .btn{justify-content:center}

/* Drei Auswahlzeilen */
.anlwahl{display:flex;flex-direction:column;gap:10px;margin:16px 0}
.anlzeile{display:flex;align-items:center;gap:14px;width:100%;text-align:left;background:var(--panel);border:1px solid var(--line2);border-radius:10px;padding:16px 18px;cursor:pointer;font:inherit;transition:border-color .12s, transform .12s}
.anlzeile:hover{border-color:var(--text);transform:translateY(-1px)}
.anlzeile .anlicon{width:40px;height:40px;border-radius:10px;background:var(--panel2);border:1px solid var(--line2);display:flex;align-items:center;justify-content:center;font-size:17px;flex:none}
.anltexte{display:flex;flex-direction:column;gap:2px;min-width:0}
.anltitel{font-weight:600;font-size:15px}
.anlsub{font-size:14px;color:var(--muted);line-height:1.4}
.anlpfeil{margin-left:auto;font-size:22px;color:var(--muted);flex:none}

/* Schrittanzeige */
.anfsteps{display:flex;gap:18px;margin:16px 0 14px;flex-wrap:wrap}
.anfstep{display:flex;align-items:center;gap:7px;font-size:13px;color:var(--muted)}
.anfstep i{font-style:normal;width:21px;height:21px;border-radius:50%;border:1px solid var(--line);display:flex;align-items:center;justify-content:center;font-size:11.5px}
.anfstep.aktiv{color:var(--text);font-weight:600}
.anfstep.aktiv i{background:var(--accent);color:#fff;border-color:var(--accent)}
.anfstep.fertig{color:var(--text)}
.anfstep.fertig i{background:var(--panel2);color:var(--text);border-color:var(--line2)}
.anfstep.fertig i:before{content:"✓"}
.anfstep.fertig i span{display:none}
.anfzwei{display:grid;grid-template-columns:1fr 1fr;gap:0 14px}
.anfkopf{display:flex;align-items:center;gap:10px;margin-bottom:4px;font-size:15px}
.anfdialog [data-arten][hidden]{display:none}

@media (max-width: 760px){
  .khero.kompakt{flex-direction:column;align-items:flex-start;padding:20px}
  .khero-cta{width:100%;text-align:center}
  .anfzwei{grid-template-columns:1fr}
  .anlzeile{padding:14px}
}

/* ---------- Bestandskunden v5: Hero mit Website-Vorschau, gestapeltes Layout ---------- */
.khead.gross{padding:26px 0 8px;margin-bottom:10px}
.khead.gross img{height:40px}
.khero5{display:flex;align-items:center;gap:44px;background:var(--panel);border:1px solid var(--hair);border-radius:10px;padding:38px 42px;margin:14px 0 34px;box-shadow:0 1px 3px rgba(20,20,18,.04)}
.khero5 .kherolinks{flex:1;min-width:0}
/* Mit Screenshot: Text und Bild als Gruppe zusammenrücken, nicht auseinanderziehen */
.khero5.mit-bild{justify-content:center}
.khero5.mit-bild .kherolinks{flex:0 1 480px}
.khero5 .kh1{font-size:30px;margin:8px 0 4px;letter-spacing:-.4px}
.khero5 .khero-domain{font-size:14px;color:var(--muted);margin:0 0 18px}
.khero5 .khero-btns{margin:0}
.kshotframe{flex:none;width:min(440px,48%);display:block;border:1px solid var(--line2);border-radius:10px;overflow:hidden;background:#fff;box-shadow:0 10px 30px rgba(20,20,18,.10);text-decoration:none;transition:transform .15s, box-shadow .15s}
.kshotframe:hover{transform:translateY(-2px);box-shadow:0 14px 36px rgba(20,20,18,.14)}
.kshotkopf{display:flex;align-items:center;gap:5px;background:var(--panel2);border-bottom:1px solid var(--hair);padding:8px 12px}
.kshotkopf i{width:9px;height:9px;border-radius:50%;background:var(--line2);display:block}
.kshoturl{margin-left:8px;font-size:11px;color:var(--dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.kshotframe img{display:block;width:100%;aspect-ratio:1280/860;object-fit:cover;object-position:top}
.khaupt{margin:0 0 10px}
.khaupt .kmodul{background:transparent;border:none;padding:0}
/* Direkter Kontakt als eigene Karte mit klarer Luft darüber, kein Trennstrich */
.kservice{display:block}
.kcontact{margin-top:32px}
.anfsteps-mobil{display:none;font-size:13.5px;font-weight:600;margin:14px 0 10px}
.anfstep i{position:relative}
.anfstep.fertig i span{display:none}

/* Kontakt-Dialog / Bottom-Sheet */
.ksheet-dim{position:fixed;inset:0;background:rgba(20,20,18,.45);opacity:0;pointer-events:none;transition:opacity .2s;z-index:60}
.ksheet{position:fixed;left:50%;bottom:auto;top:50%;transform:translate(-50%,-46%);opacity:0;pointer-events:none;transition:opacity .2s, transform .2s;z-index:61;background:var(--panel);border:1px solid var(--hair);border-radius:10px;box-shadow:0 24px 60px rgba(20,20,18,.22);padding:22px;width:min(380px,calc(100vw - 32px));display:flex;flex-direction:column;gap:9px}
.ksheet .btn{justify-content:center;text-align:center}
/* Das Abo-Verwalten-Sheet trägt viel Inhalt (Vertrag + Verwalten) und wirkt schmal
   zu lang. Breiter dargestellt sitzen die Vertragswerte auf einer Zeile. */
.ksheet.psheet{width:min(540px,calc(100vw - 32px))}
.ksheet-griff{display:none}
body.rsheet-offen .ksheet-dim{opacity:1;pointer-events:auto}
body.rsheet-offen .ksheet.rsheet{opacity:1;pointer-events:auto;transform:translate(-50%,-50%)}

/* Kontaktwege stehen direkt auf der Karte, untereinander und gleich breit */
.kcontact-row{display:flex;gap:28px;align-items:center;justify-content:space-between}
.kcontact-row .kperson{flex:1;margin:0}
.kkontaktwege{display:flex;flex-direction:column;gap:8px;width:280px;flex:none}
.kkontaktwege .btn{justify-content:center;text-align:center;width:100%;margin:0}
@media (max-width:640px){.kcontact-row{flex-direction:column;align-items:stretch;gap:16px}.kkontaktwege{width:auto}}

@media (max-width: 760px){
  .khead.gross img{height:32px}
  .khero5{flex-direction:column;align-items:stretch;gap:22px;padding:24px 20px;margin-bottom:24px}
  /* In der Spalten-Anordnung darf der Textblock nicht auf 480px Höhe aufgeblasen werden
     (die 480px-Basis gilt nur für die Breite im Nebeneinander auf großen Schirmen). */
  .khero5.mit-bild .kherolinks{flex:0 1 auto}
  .kshotframe{width:100%}
  .khero5 .khero-btns .btn{display:block;text-align:center}
  .kcontact{margin-top:24px}
  .anfsteps{display:none}
  .anfsteps-mobil{display:block}
  .ksheet{top:auto;bottom:0;left:0;right:0;width:100%;transform:translateY(12px);border-radius:10px 10px 0 0;padding:14px 18px calc(20px + env(safe-area-inset-bottom))}
  body.sheet-offen .ksheet:not(.rsheet),body.rsheet-offen .ksheet.rsheet{transform:translateY(0)}
  .ksheet-griff{display:block;width:42px;height:4px;border-radius:2px;background:var(--line2);margin:2px auto 8px}
}

/* ---------- Kundenportal v6: warmer Grundton, persönlicher Header ---------- */
body.kportal{background:#faf7f3}
.kportal .card{border-color:#efe9e1}
.previewbanner{background:#fdf0e7;border:1px solid #f3d9c4;color:#8a4a12;border-radius:10px;padding:10px 16px;font-size:13.5px;margin:12px 0}
/* Dezenter Hinweis-Toast statt nativem Browser-Popup (Vorschau-Modus) */
.fa-toast{position:fixed;top:16px;left:50%;transform:translateX(-50%) translateY(-8px);
  background:var(--text);color:#fff;font-size:13.5px;padding:10px 18px;border-radius:8px;
  box-shadow:0 6px 24px rgba(25,26,28,.2);opacity:0;pointer-events:none;transition:opacity .2s,transform .2s;z-index:9999}
.fa-toast.an{opacity:1;transform:translateX(-50%) translateY(0)}
.fa-toast.fehler{background:var(--red)}
.fa-toast{display:inline-flex;align-items:center;gap:14px;pointer-events:auto}
.fa-toast-btn{background:none;border:0;color:#ffc08a;font-weight:700;font-size:13.5px;cursor:pointer;padding:2px 4px}
.fa-toast-btn:hover{color:#fff;text-decoration:underline}
/* Name der Ansicht wird neben dem Knopf getippt, nicht in einem Systemdialog */
.ansichtname-zeile{display:inline-flex;align-items:center;gap:6px;margin-left:8px}
.ansichtname-zeile input{height:var(--feldh);padding:0 10px;border:1px solid var(--line2);border-radius:var(--rs);
  font:inherit;font-size:13.5px;max-width:180px}
.ansichtname-zeile input:focus{outline:none;border-color:var(--accent)}
.khead.gross{align-items:center;gap:16px}
.khead.gross img{height:44px}
.kgruss{text-align:right}
.kgruss-zeile{font-weight:650;font-size:16px;letter-spacing:-.2px}
.kgruss-sub{font-size:12.5px;color:var(--muted)}
/* Keine farbige Fläche hinter dem Website-Screenshot: der Hero bleibt neutral weiß,
   damit nichts mit den Farben der Kundenwebsite kollidiert */
.khero5{background:var(--panel);border:1px solid var(--hair);box-shadow:0 1px 3px rgba(20,20,18,.04)}
.kshotframe{border:1px solid #e8ddcf;border-radius:10px;box-shadow:0 14px 34px rgba(60,40,20,.14)}
.kshotframe img{aspect-ratio:1280/860}

/* Placeholder dezent, nie wie Inhalt */
.kportal ::placeholder{font-size:13px;font-weight:400;color:#b3aca2;opacity:1}

/* Schrittzeile statt Prozess-Kreise */
.anfschrittzeile{font-size:13px;font-weight:600;color:var(--accent);margin:16px 0 10px;letter-spacing:.2px}
.anfsteps,.anfsteps-mobil{display:none !important}

/* Prüf-Ansicht */
.anfreview-box{background:var(--panel);border:1px solid #efe9e1;border-radius:10px;padding:16px 18px;margin:10px 0 14px}
.anfreview-box .frow{display:flex;gap:14px;padding:7px 0;border-bottom:1px solid #f2ede6;font-size:13.5px}
.anfreview-box .frow:last-child{border-bottom:none}
.anfreview-box .fk{width:130px;flex:none;color:var(--muted)}
.anfreview-box .fv{flex:1;min-width:0;white-space:pre-wrap;overflow-wrap:anywhere}

/* Erfolgszustand */
.anf-erfolg{background:#eef7f0;border:1px solid #cfe7d6;border-radius:10px;padding:26px 28px;margin:14px 0}
.anf-erfolg-titel{margin:0 0 8px;font-size:20px;color:#1e5c35}
.anf-erfolg p{margin:0 0 10px;color:#2c4a37}
.anf-erfolg-meta{font-size:13px;color:#4e6a58 !important;margin-bottom:16px !important}
/* Kurze Rückmeldung nach einer Antwort oder Freigabe im Faden; als Fehler dezent rot */
.anf-erfolg.kurz{padding:16px 20px}
.anf-erfolg.fehler{background:#fdf1ee;border-color:#e6c4bb;color:#8a3b28}
.anf-erfolg.fehler p{color:#8a3b28}

@media (max-width: 760px){
  .khead.gross{flex-wrap:wrap}
  .khead.gross img{height:34px}
  .kgruss{text-align:left;order:3;width:100%;margin-top:4px}
  .anfreview-box .frow{flex-direction:column;gap:2px}
  .anfreview-box .fk{width:auto}
}

/* ---------- Cockpit-Designsystem: Navigation, Dashboard, Sektionen ---------- */
.navgruppe{font-size:10.5px;font-weight:650;letter-spacing:.9px;text-transform:uppercase;color:var(--dim);margin:18px 12px 6px}
.sbnav .navgruppe:first-child{margin-top:6px}
svg.ni{width:17px;height:17px;flex:none;color:var(--dim)}
.navlink{display:flex;align-items:center;gap:10px}
.navlink.active svg.ni,.navlink:hover svg.ni{color:var(--accent)}

/* Offene Sektionen statt Boxen-Raster: weicher Schatten, mehr Luft */
.dsek{background:var(--panel);border:1px solid var(--hair);border-radius:10px;padding:22px 24px;margin-bottom:22px;box-shadow:var(--schatten1)}
.dsek-titel{font-size:15px;font-weight:600;margin:0 0 14px;display:flex;align-items:center;gap:10px;letter-spacing:-.1px}
.dsek-titel .mehr{margin-left:auto;font-size:12.5px;font-weight:500;color:var(--muted)}
.dashgrid5{display:grid;grid-template-columns:1.55fr 1fr;gap:22px;align-items:start}
.dashgrid5 .dsek:last-child{margin-bottom:0}

/* Kennzahlen im Kopf: Karten mit Icon-Badge, weichem Schatten, ruhiger Schrift */
.kpis{display:flex;gap:16px;flex-wrap:wrap;margin:2px 0 26px}
.kpi{flex:1;min-width:190px;background:var(--panel);border:1px solid var(--hair);border-radius:10px;padding:16px 18px;text-decoration:none;color:inherit;display:flex;align-items:center;gap:14px;box-shadow:var(--schatten1);transition:box-shadow .14s ease,transform .14s ease}
a.kpi:hover{box-shadow:var(--schatten2);transform:translateY(-1px)}
.kpi-ico{position:relative;flex:0 0 auto;width:34px;height:34px;border-radius:9px;background:var(--accentSoft);color:var(--accent);display:flex;align-items:center;justify-content:center}
.kpi-ico .ni{width:17px;height:17px}
/* Orange LED am Icon: auf den ersten Blick sichtbar, wenn Handlungsbedarf besteht */
.kpi-led{position:absolute;top:-3px;right:-3px;width:11px;height:11px;border-radius:50%;background:var(--accent);border:2px solid var(--panel);animation:hbpuls 1.6s ease-in-out infinite}
.kpi-txt{display:flex;flex-direction:column;gap:2px;min-width:0}
.kpi-txt b{font-size:15px;font-weight:600;letter-spacing:-.1px;color:var(--text);text-transform:none}
.kpi-txt > span{font-size:13.5px;font-weight:400;color:var(--muted);text-transform:none;letter-spacing:0;line-height:1.4}

/* Einheitliche Kennzahlen-Karte (Finanzen, Zahlungen, Abos): Icon-Badge + Wert + Label */
.statleiste{display:flex;gap:16px;flex-wrap:wrap;margin:2px 0 22px}
.statkarte{flex:1;min-width:190px;background:var(--panel);border:1px solid var(--hair);border-radius:10px;padding:12px 15px;box-shadow:var(--schatten1);display:flex;align-items:center;gap:12px;text-decoration:none;color:inherit}
a.statkarte{transition:box-shadow .14s ease,transform .14s ease}
a.statkarte:hover{box-shadow:var(--schatten2);transform:translateY(-1px)}
.statkarte-txt{display:flex;flex-direction:column;gap:1px;min-width:0}
.stat-wert{font-size:17px;font-weight:700;letter-spacing:-.3px;line-height:1.2;color:var(--text);font-variant-numeric:tabular-nums}
.azeit{color:var(--muted);font-size:12px;font-weight:400;margin-left:2px}
.stat-label{font-size:13.5px;color:var(--muted);line-height:1.35}
.statkarte.good .stat-wert{color:var(--green)}
.statkarte.good .kpi-ico{background:var(--greenSoft);color:var(--green)}
.statkarte.warn .kpi-ico{background:var(--redSoft);color:var(--red)}
.statkarte.warn .stat-wert{color:var(--red)}

/* Heute-Liste */
.heutezeile{display:flex;align-items:center;gap:12px;padding:9px 0;border-bottom:1px solid var(--hair);font-size:13.5px}
.heutezeile:last-child{border-bottom:none}
.hzeit{width:58px;flex:none;font-weight:600;font-variant-numeric:tabular-nums;color:var(--muted)}
.htitel{flex:1;min-width:0}

/* Handlungsbedarf */
.hbcount{font-size:11.5px;background:var(--accentSoft);color:var(--accentDark);border-radius:99px;padding:2px 9px;font-weight:650}
.hbzeile{display:flex;align-items:center;gap:14px;padding:13px 0;border-bottom:1px solid var(--hair)}
.hbzeile:first-of-type{padding-top:6px}
.hbzeile:last-child{border-bottom:none;padding-bottom:4px}
.hbzeile.kritisch::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--accent);flex:none;animation:hbpuls 1.6s ease-in-out infinite}
@keyframes hbpuls{0%,100%{opacity:1}50%{opacity:.35}}
.hbmain{flex:1;min-width:0;display:flex;flex-direction:column;gap:4px;color:inherit;text-decoration:none}
a.hbmain:hover .hbwas{text-decoration:underline;text-underline-offset:2px}
.hbwas{font-size:13.5px;font-weight:550;line-height:1.45}
.hbwer{font-weight:400;color:var(--muted)}
.hbwarum{font-size:12.5px;color:var(--muted);display:flex;align-items:center;gap:9px;flex-wrap:wrap;line-height:1.4}
.hbchip{flex:none;font-size:11px;font-weight:600;padding:2px 9px;border-radius:999px;white-space:nowrap}
/* „Bei mir" = mein Fokus (Orange-Akzent), „Beim Kunden" = wartet (neutral). Kein Blau. */
.hbchip.beimir{background:var(--accentSoft);color:var(--accentDark)}
.hbchip.wartet{background:var(--panel2);color:var(--muted)}
.hbaktionen{flex:none;display:flex;align-items:center;gap:6px}

/* ---------- Zentrale Kommunikation (?p=komm) ---------- */
.kommliste{display:flex;flex-direction:column}
.kommzeile{display:flex;align-items:center;gap:14px;padding:13px 4px;border-bottom:1px solid var(--hair);color:inherit;text-decoration:none;min-height:44px}
.kommzeile:last-child{border-bottom:none}
.kommzeile:hover{background:var(--panel2)}
.kommzeile.erledigt{opacity:.55}
.kommled{width:8px;height:8px;border-radius:50%;background:var(--accent);flex:none}
.kommkunde{flex:none;width:190px;min-width:0;font-weight:600;font-size:13.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.kommtyp{flex:none;font-size:11px;font-weight:600;color:var(--muted);background:var(--panel2);padding:2px 9px;border-radius:999px;white-space:nowrap}
.kommtitel{flex:1;min-width:0;font-size:13.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.kommdatum{flex:none;font-size:12.5px;color:var(--dim);white-space:nowrap}
@media (max-width:720px){
  .kommzeile{flex-wrap:wrap;gap:8px}
  .kommkunde{width:auto}
  .kommtitel{flex:1 1 100%;order:5;white-space:normal}
}

/* Direkt angesprungener Vorgang bekommt kurz einen ruhigen Fokus-Rahmen */
.vgzeile.vg-fokus{outline:2px solid var(--accent);outline-offset:2px;border-radius:var(--rs);animation:vgfokus 2.4s ease forwards}
@keyframes vgfokus{0%,70%{outline-color:var(--accent)}100%{outline-color:transparent}}

/* Kompaktwerte Vertrieb / Kunden */
.kompaktreihe{display:flex;gap:8px;flex-wrap:wrap}
.kompaktwert{flex:1;min-width:90px;text-align:center;background:var(--panel2);border:0;border-radius:10px;padding:12px 8px;text-decoration:none;color:inherit;transition:background .12s}
.kompaktwert:hover{background:#eeeae1}
.kompaktwert b{display:block;font-size:24px;font-weight:700;letter-spacing:-.5px;line-height:1.15}
.kompaktwert span{font-size:11px;color:var(--muted)}

/* Schnellnotiz */
.notizzeile{display:flex;align-items:center;gap:8px;padding:7px 0;border-bottom:1px solid var(--hair);font-size:13.5px}
.notizzeile:last-child{border-bottom:none}
.notiztext{flex:1;min-width:0;outline:none;border-radius:4px;padding:2px 4px}
.notiztext:focus{background:var(--panel2)}

/* Schnellzugriffe gruppiert */
.quickgruppe{margin-bottom:14px}
.quickgruppe:last-child{margin-bottom:0}
.quickgruppe-titel{font-size:11px;font-weight:650;letter-spacing:.7px;text-transform:uppercase;color:var(--dim);margin-bottom:8px}

/* Leerezustände */
.leerzustand{display:flex;flex-direction:column;align-items:center;text-align:center;padding:28px 16px;color:var(--muted)}
.leerzustand svg{width:34px;height:34px;color:var(--dim);margin-bottom:10px}
.leerzustand b{color:var(--text);font-size:14.5px;margin-bottom:3px}
.leerzustand p{margin:0 0 14px;font-size:13px;max-width:40ch}

/* Aufgaben: Prio, Optionen, Filterleiste */
.priohoch{width:8px;height:8px;border-radius:50%;background:var(--accent);flex:none}
.taskmehr{margin-top:10px}
.taskmehr summary{cursor:pointer;font-size:13px;color:var(--muted)}
.taskmehr-felder{display:grid;grid-template-columns:200px 1fr;gap:14px;margin-top:10px}
.filterleiste{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin:0 0 14px}
.suchform input{padding:7px 12px;font-size:13px;width:200px}
.chips .chip b{font-weight:650;margin-left:3px}

/* Kalender: Terminarten, Wochenraster, Terminformular */
.terminart{font-size:10.5px;font-weight:650;border-radius:4px;padding:1.5px 6px;letter-spacing:.3px;white-space:nowrap;background:var(--panel2);border:1px solid var(--hair);color:var(--muted)}
.terminart.a-setting{background:#e8f0fa;border-color:#c8dcf2;color:#1a5da8}
.terminart.a-closing{background:var(--accentSoft);border-color:#f3d9c4;color:var(--accentDark)}
.terminart.a-aufgabe{background:var(--panel2)}
.chipsep{width:1px;height:18px;background:var(--line2);margin:0 4px;align-self:center}
.wochenraster{display:grid;grid-template-columns:repeat(7,1fr);gap:8px}
.wochentag{background:var(--panel2);border:1px solid var(--hair);border-radius:10px;padding:8px;min-height:120px}
.wochentag.heute{border-color:var(--accent);background:#fffaf5}
.wochentag-kopf{font-size:11.5px;color:var(--muted);margin-bottom:8px}
.wochentag-kopf b{color:var(--text)}
.wochenitem{display:block;font-size:11.5px;background:var(--panel);border:1px solid var(--hair);border-radius:7px;padding:5px 7px;margin-bottom:5px;text-decoration:none;color:inherit;overflow-wrap:anywhere}
.wochenitem.t-aufgabe{opacity:.8}
.terminform summary{list-style:none}
.terminform summary::-webkit-details-marker{display:none}
.terminform{position:relative}
.terminfelder{position:absolute;right:0;top:calc(100% + 8px);z-index:40;background:var(--panel);border:1px solid var(--line2);border-radius:10px;box-shadow:0 18px 44px rgba(20,20,18,.16);padding:18px;width:min(560px,calc(100vw - 48px))}
.terminzeit{display:grid;grid-template-columns:1fr 120px 120px;gap:14px}
.kalzeit{min-width:44px}

/* Kontextmenü in Tabellen */
.kontextmenu{position:relative;display:inline-block}
.kontextmenu summary{list-style:none;cursor:pointer;padding:3px 9px;border:1px solid var(--line2);border-radius:7px;font-size:14px;line-height:1}
.kontextmenu summary::-webkit-details-marker{display:none}
.kontextmenu-list{position:absolute;right:0;top:calc(100% + 4px);z-index:30;background:var(--panel);border:1px solid var(--line2);border-radius:10px;box-shadow:0 12px 30px rgba(20,20,18,.14);min-width:170px;padding:5px;display:flex;flex-direction:column}
.kontextmenu-list a,.kontextmenu-list button{text-align:left;padding:7px 10px;border-radius:7px;font-size:13px;text-decoration:none;color:inherit;background:none;border:none;cursor:pointer;width:100%}
.kontextmenu-list a:hover,.kontextmenu-list button:hover{background:var(--panel2)}
.warnhinweis{color:#8a5a00;font-size:12.5px}
.konzeptkarte{display:flex;align-items:center;gap:18px;justify-content:space-between}

@media (max-width: 1150px){
  .dashgrid5{grid-template-columns:1fr}
  .wochenraster{grid-template-columns:repeat(2,1fr)}
}
@media (max-width: 760px){
  .kpis{gap:8px}
  .kpi{min-width:calc(50% - 8px)}
  .wochenraster{grid-template-columns:1fr}
  .taskmehr-felder{grid-template-columns:1fr}
  .terminzeit{grid-template-columns:1fr}
  .terminfelder{position:fixed;left:12px;right:12px;top:70px;width:auto}
  .heutezeile{flex-wrap:wrap}
}

/* ---------- Rückruf-Sheet + Wunsch-Badge (v7) ---------- */
/* Rückruf-Dialog nach neuem Leitfaden: ruhige Rechteck-Chips statt breiter Pillen,
   Auswahl schwarz, dezente Rundung. */
.rchips{display:flex;flex-wrap:wrap;gap:7px;margin:0 0 10px}
.rchip{font:inherit;font-size:13.5px;padding:9px 14px;border:1px solid var(--line2);border-radius:8px;background:var(--panel);cursor:pointer;transition:border-color .12s,background .12s}
.rchip:hover{border-color:var(--text)}
.rchip.aktiv{background:var(--text);color:#fff;border-color:var(--text)}
.rnummer{font-size:16px;font-weight:650;letter-spacing:.2px;margin:0 0 14px;padding:11px 14px;background:var(--panel2);border:1px solid var(--hair);border-radius:8px}
.rsheet .kh3o{font-size:17px}
.rsheet label{display:block;font-size:13.5px;margin:0 0 10px}
.rsheet input{width:100%;margin-top:4px}
.anf-badge{display:inline-block;font-size:12.5px;font-weight:650;background:var(--accentSoft);color:var(--accentDark);border:1px solid #f3d9c4;border-radius:99px;padding:4px 12px;margin:0 0 12px}
.anffehler{color:#b3402a;font-size:12.5px;min-height:16px;margin:4px 0}

/* KPI-Farbvarianten: Grün nur für Einnahmen/positiv, warmes Orange für Hinweise, Rot für beendet */
.kpi.gruen b{color:#1e7d43}
.kpi.warnung b{color:#b5810a}
.kpi.rot b{color:#b3402a}

/* Abo-Sheets (Zahlungsweise / Kündigung) */
body.wsheet-offen .ksheet-dim,body.qsheet-offen .ksheet-dim{opacity:1;pointer-events:auto}
body.wsheet-offen .ksheet.wsheet,body.qsheet-offen .ksheet.qsheet{opacity:1;pointer-events:auto;transform:translate(-50%,-50%)}
.wsheet .frow,.qsheet .frow,.rsheet .frow{display:flex;gap:12px;padding:6px 0;font-size:13.5px}
.wsheet .fk,.qsheet .fk{width:150px;flex:none;color:var(--muted)}
@media (max-width: 760px){
  body.wsheet-offen .ksheet.wsheet,body.qsheet-offen .ksheet.qsheet{transform:translateY(0)}
}

/* Abo-Karte: Leistungsliste im Aufklapper */
.kleistungen{margin:8px 0 4px;padding-left:18px;font-size:13px}
.kleistungen li{margin:3px 0}

/* Zugangsschritte im Kundenportal */
.zschritt{border-top:1px solid #f2ede6;padding:12px 0}
.zschritt:first-of-type{border-top:none}
.zkopf{display:flex;align-items:center;justify-content:space-between;gap:10px}
.zanleitung{margin:8px 0 4px;padding-left:20px;font-size:13px}
.zanleitung li{margin:4px 0}
.zaktionen{display:flex;gap:8px;flex-wrap:wrap;margin-top:8px}
.btn.klein{padding:7px 13px;font-size:13px}
.zhilfefeld{display:flex;gap:8px;margin-top:8px}
.zhilfefeld input{flex:1}
.zdanke{margin:8px 0 0}

/* Abo als eigener Portalbereich */
.abobereich{margin:0 0 22px}
/* Paketname und Status stehen nebeneinander, nicht untereinander */
.abokopf{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:2px 0 10px}
.abopreis{font-size:20px;font-weight:650;letter-spacing:-.3px;white-space:nowrap}
.abostatus{display:inline-block;font-size:11.5px;font-weight:650;border-radius:99px;padding:3px 10px}
/* Eine Textgröße für die Fließzeilen der Abo-Karte, kein Wechsel zwischen drei Grautönen */
.abo-zeile{margin:0 0 14px;font-size:14px;color:var(--muted)}
.abo-start{margin:0 0 12px;font-size:14.5px}
/* Die Summe als Aufstellung: der Kunde sieht sofort, was abgebucht wird */
.abo-summe{margin:0;display:flex;flex-direction:column;gap:7px;padding:14px 16px;
  background:var(--panel2);border-radius:var(--r)}
.abo-summe > div{display:flex;justify-content:space-between;align-items:baseline;gap:16px}
.abo-summe dt{margin:0;font-size:13.5px;color:var(--muted)}
.abo-summe dd{margin:0;font-size:13.5px;font-variant-numeric:tabular-nums}
.abo-summe-gesamt{padding-top:8px;border-top:1px solid var(--line)}
.abo-summe-gesamt dt{color:var(--text);font-weight:600}
.abo-summe-gesamt dd{font-size:16px;font-weight:700;letter-spacing:-.01em}
/* Ein Satz zum Zahlungszustand, überall gleiche Größe */
.abo-zahlzeile{margin:14px 0 0;font-size:14px;line-height:1.5;color:var(--text)}
.abo-zahlzeile.ok{color:var(--muted)}
/* Im Lastschrift-Dialog steht die Summe vor der IBAN, nicht im Kleingedruckten */
.mandat-summe{margin:0 0 10px;padding:11px 13px;background:var(--panel2);border-radius:var(--r);font-size:14px;line-height:1.5}
.mandat-summe .lmut{display:block;margin-top:2px;font-size:12.5px}
.abostatus.aktiv{background:#e7f3ea;color:#1e7d43}
.abostatus.probe{background:#fdf3e0;color:#8a5a00}
.abostatus.endet{background:#fbeae6;color:#b3402a}
.kuendlink{color:var(--muted);font-size:13px;text-decoration:underline}
body.psheet-offen .ksheet-dim{opacity:1;pointer-events:auto}
body.psheet-offen .ksheet.psheet{opacity:1;pointer-events:auto;transform:translate(-50%,-50%)}
body.msheet-offen .ksheet-dim{opacity:1;pointer-events:auto}
body.msheet-offen .ksheet.msheet{opacity:1;pointer-events:auto;transform:translate(-50%,-50%)}
@media (max-width: 760px){
  body.psheet-offen .ksheet.psheet,body.msheet-offen .ksheet.msheet{transform:translateY(0)}
  .abokopf{flex-direction:column;gap:6px}
}
/* IBAN-Formular im Lastschrift-Sheet */
.mlabel{font-size:12.5px;font-weight:600;color:var(--muted);margin:6px 0 2px}
.minput{width:100%;padding:10px 12px;border:1px solid var(--hair);border-radius:9px;font-size:15px;background:var(--panel);color:var(--text)}
.minput:focus{outline:none;border-color:var(--accent)}
#mandat-iban{letter-spacing:.4px;font-variant-numeric:tabular-nums}
.mcheck{display:flex;gap:9px;align-items:flex-start;margin:12px 0 0;font-size:12.5px;line-height:1.45;color:var(--muted)}
.mcheck input{margin-top:2px;flex:0 0 auto}
.mfehler{color:#b3402a;font-size:13px;margin:8px 0 0}

/* Fokus nur bei echter Tastaturbedienung sichtbar */
.kportal :focus{outline:none}
.kportal a:focus-visible,.kportal button:focus-visible,.kportal summary:focus-visible{outline:1px solid var(--line2);outline-offset:2px}
.kportal input:focus-visible,.kportal textarea:focus-visible,.kportal select:focus-visible{outline:none;border-color:var(--text)}

/* Abo-Bestätigen-Dialog: liegt im Fluss der Karte, nichts ragt aus dem Bild */
.aboform{display:block;margin-top:4px}
.aboform summary{list-style:none;display:inline-block;cursor:pointer}
.aboform summary::-webkit-details-marker{display:none}
.aboform-felder{margin-top:12px;background:var(--panel2);border:1px solid var(--line2);border-radius:10px;padding:16px 18px;max-width:640px}

/* Pflichtangaben im Onboarding */
.obpflicht{color:var(--accent);font-weight:700}

/* ---------- Akte: lokale Abschnittsleiste + aufklappbare Portal-Abschnitte ---------- */
.tabs{overflow-x:auto;-webkit-overflow-scrolling:touch;flex-wrap:nowrap;scrollbar-width:none}
.tabs::-webkit-scrollbar{display:none}
.tabs .tab{white-space:nowrap}
.pabschnitt{border:1px solid var(--line);border-radius:10px;background:var(--card);margin:0 0 12px}
.pabschnitt>summary{list-style:none;cursor:pointer;padding:14px 18px;display:flex;align-items:center}
.pabschnitt>summary::-webkit-details-marker{display:none}
.pabschnitt>summary h2{margin:0;font-size:15.5px;font-weight:650}
.pabschnitt>summary::after{content:"›";margin-left:auto;color:var(--muted);font-size:18px;transform:rotate(90deg);transition:transform .15s}
.pabschnitt[open]>summary::after{transform:rotate(-90deg)}
.pabschnitt-inhalt{padding:0 18px 16px}
.pabschnitt-inhalt>.card{border:none;padding:0;background:transparent;box-shadow:none}
.pfakten.blick{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:2px 18px}

/* ---------- Info-Symbole: klein, tastaturbedienbar, nie abgeschnitten ---------- */
.obinfo{display:inline-flex;align-items:center;justify-content:center;width:17px;height:17px;border-radius:50%;
  border:1px solid var(--muted);color:var(--muted);background:transparent;font-size:11px;font-style:italic;
  font-family:Georgia,serif;cursor:pointer;margin-left:6px;vertical-align:1px;line-height:1}
.obinfo:hover,.obinfo:focus-visible{border-color:var(--accent);color:var(--accent)}
.obinfo-pop{display:block;margin:8px 0 4px;padding:10px 12px;background:#f6f1ea;border:1px solid #e8ddcf;
  border-radius:10px;font-size:13px;line-height:1.5;color:var(--text);max-width:560px}
.obinfo-pop[hidden]{display:none}

/* ---------- Onboarding: ruhig, geführt, mobil ---------- */
.obkopf{margin:22px 0 0}
.obstatuszeile{display:flex;align-items:center;gap:12px;margin:16px 0 10px;flex-wrap:wrap}
.obbalken{flex:0 0 160px;height:6px;border-radius:3px;background:#eee5d9;overflow:hidden}
.obbalken span{display:block;height:100%;background:var(--accent);border-radius:3px;transition:width .3s}
.oblegende{font-size:13px;color:var(--muted)}
.obsave{margin-left:auto}
.obcard{margin-top:10px}
.obnote{margin:2px 0 14px;line-height:1.55;max-width:640px}
.obfeld{display:block;margin:0 0 14px}
.obcheckzeile{display:flex;align-items:center;gap:10px;font-size:14.5px}
.obcheckzeile input{width:18px;height:18px;accent-color:var(--accent)}
.obwillkommen{margin-top:18px;padding:26px 26px 24px}
.obhilfe{margin:14px 0 30px}
.obdatei{display:flex;align-items:center;gap:8px;padding:6px 10px;background:#f8f4ee;border-radius:8px;font-size:13px}
.obdatei-name{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.obdateien{display:flex;flex-direction:column;gap:6px;margin:0 0 10px}
.obupload-knopf{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.obrepeat-karte{border:1px solid var(--line);border-radius:10px;padding:14px 14px 8px;margin:0 0 10px;background:#fdfbf8}
.obrepeat-akt{display:flex;gap:6px;justify-content:flex-end;margin:2px 0 6px}
.obrepeat-liste{margin:4px 0 10px}
.obref{padding:14px;margin:0 0 12px}
.obref-hint{font-size:13px;color:var(--muted);margin:10px 0 0;line-height:1.5}
.obref-kopf{display:flex;align-items:center;justify-content:space-between;gap:10px}
.obrefbilder{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 10px}
.obrefbild{width:104px;border-radius:8px;overflow:hidden;border:2px solid transparent;background:#f2ede5}
.obrefbild.haupt{border-color:var(--accent)}
.obrefbild img{width:100%;height:72px;object-fit:cover;display:block}
.obrefbild-akt{display:flex;gap:4px;padding:4px;justify-content:center;flex-wrap:wrap}
.obref-neu>summary{list-style:none;display:inline-block;cursor:pointer}
.obref-neu>summary::-webkit-details-marker{display:none}
@media (max-width:640px){
  .obstatuszeile{gap:8px}
  .obsave{margin-left:0;width:100%}
  .obbalken{flex:1 1 100%}
  .obwillkommen{padding:20px 16px}
  .obdots{overflow-x:auto;flex-wrap:nowrap;padding-bottom:4px}
  .pabschnitt>summary{padding:12px 14px}
  .pabschnitt-inhalt{padding:0 14px 14px}
  .pfakten.blick{grid-template-columns:1fr}
}

/* ================= Onboarding v2: breit, warm, geführt ================= */
body.kportal .obshell{max-width:1160px;margin:0 auto}
.obtestleiste{background:#2a2622;color:#e8ddcf;font-size:12.5px;letter-spacing:.02em;text-align:center;padding:7px 14px;border-radius:0 0 10px 10px;margin:0 0 6px}

/* Kopf: Schrittzeile, breiter Balken, Abschnittsband */
.obkopf{margin:26px 0 0}
.obkopf-zeile{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap}
.obschritt{font-weight:650;font-size:15px}
.obrest{color:var(--muted);font-size:13.5px}
.obsave{margin-left:auto;color:var(--muted);font-size:12.5px}
.obbalken.breit{height:7px;border-radius:4px;background:#ece4d7;overflow:hidden;margin:10px 0 12px}
.obbalken.breit span{display:block;height:100%;background:var(--accent);border-radius:4px;transition:width .3s}
.obband{display:flex;gap:8px;flex-wrap:wrap}
.obgruppe{display:inline-flex;align-items:center;gap:6px;padding:6px 13px;border-radius:999px;font-size:13px;
  color:var(--muted);text-decoration:none;border:1px solid #e6ddcd;background:#fbf8f3}
.obgruppe.now{color:#fff;background:#2a2622;border-color:#2a2622;font-weight:600}
.obgruppe.done{color:#1e7d43;border-color:#cfe5d6}
.obghaken{font-size:11px}

/* Hauptfläche: Karte + ruhige Begleitfläche */
.obhaupt{margin:18px 0 8px}
.obhaupt.mit-seite{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:22px;align-items:start}
.obcard{padding:30px 34px 24px}
.obtitel{margin:0 0 6px;font-size:22px;letter-spacing:-.01em}
.obhint{margin:0 0 22px;color:var(--muted);max-width:640px;line-height:1.55}
.obformbar{margin-top:22px}
.obseite{display:flex;flex-direction:column;gap:14px;position:sticky;top:18px}
.obseite-karte{background:#fbf7f0;border:1px solid #eee3d2;border-radius:10px;padding:18px 20px;font-size:13.5px;line-height:1.55}
.obseite-karte p{margin:6px 0}
.obseite-titel{font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin-bottom:2px}
.obseite-paket{font-weight:700;font-size:16px}
.obseite-klein{color:var(--muted);font-size:12.5px}
.obzaehler{background:#fff;border:1px solid #eadfcd;border-radius:10px;padding:10px 12px;font-size:13.5px;margin:10px 0}
.obzaehler.mobil{display:none}

/* Startschritt */
.obstart{margin-top:22px;padding:38px 42px 34px}
.obstart-text{max-width:620px;line-height:1.6;color:#4a4540;margin:0 0 16px}
.obstart-meta{max-width:620px;line-height:1.55;font-size:13.5px;color:var(--muted);margin:14px 0 22px;padding-top:14px;border-top:1px solid var(--hair)}
.obstart-vorteile{display:flex;gap:18px;flex-wrap:wrap;margin:0 0 22px}
.obvorteil{display:flex;align-items:center;gap:8px;font-size:14px;color:#4a4540}
.obvicon{display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;border-radius:50%;
  background:#f4ead9;color:#8a5a1e;font-size:13px}
.obstart-fakten{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:10px 24px;
  border-top:1px solid #efe6d6;border-bottom:1px solid #efe6d6;padding:16px 0;margin:0 0 24px}
.obfakt{display:flex;flex-direction:column;gap:2px}
.obfk{font-size:11.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.obfv{font-weight:600;font-size:14.5px}
.obstart-btn{padding:12px 26px;font-size:15px}

/* Felder */
.obfeld{display:block;margin:0 0 18px}
.oblabel{display:block;font-weight:600;font-size:14.5px;margin:0 0 6px}
.obpflicht{color:var(--accent);font-weight:700}
.obvorbefuellt{display:inline-block;font-size:12px;color:#8a7a5e;background:#f6efe2;border-radius:6px;padding:2px 8px;margin:0 0 6px}
.obnote{color:#4a4540;line-height:1.55;margin:2px 0 14px;max-width:640px}
.obnote.klein{font-size:13px;color:var(--muted);margin:2px 0 10px}
.obbereich{margin-top:22px}
.obfolge{background:#f7f2e9;border-left:3px solid var(--accent);border-radius:0 10px 10px 0;
  padding:12px 16px;margin:0 0 16px;font-size:14px;line-height:1.55;max-width:680px}
.obcheckzeile{display:flex;align-items:center;gap:10px;font-size:14.5px}
.obcheckzeile input{width:18px;height:18px;accent-color:var(--accent)}

/* Auswahlkarten (Seiten, Funktionen, Wirkung) */
.obkarten{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:10px}
.obkarte{position:relative;display:flex;flex-direction:column;gap:4px;padding:13px 14px 12px;border:1.5px solid #e8e0d1;
  border-radius:10px;background:#fdfbf7;cursor:pointer;transition:border-color .12s, background .12s}
.obkarte:hover{border-color:#cbbfa8}
.obkarte.an{border-color:var(--accent);background:#fdf6ee;box-shadow:0 0 0 1px var(--accent) inset}
.obkarte input{position:absolute;opacity:0;pointer-events:none}
.obkarte-titel{font-weight:650;font-size:14px}
.obkarte.an .obkarte-titel::after{content:" ✓";color:var(--accent)}
.obkarte-sub{font-size:12.5px;color:var(--muted);line-height:1.45}
.obkarte-badge{font-size:11.5px;margin-top:4px;color:#8a7a5e}
.obkarte-badge.drin{color:#1e7d43}
.obkarte.fest{cursor:default;background:#f6f2ea;border-style:dashed}
.obfest{font-size:11.5px;color:#1e7d43;font-weight:600;margin-top:4px}

/* Limit-Dialoge */
.oblimit{background:#fff;border:1.5px solid var(--accent);border-radius:10px;padding:16px 18px;margin:12px 0 0;max-width:560px}
.oblimit p{margin:6px 0 12px;font-size:13.5px;color:#4a4540}

/* Info-Popover / Bottom-Sheet */
.obinfo{display:inline-flex;align-items:center;justify-content:center;width:17px;height:17px;border-radius:50%;
  border:1px solid #c9bda6;color:#8a7a5e;background:transparent;font-size:11px;font-style:italic;
  font-family:Georgia,serif;cursor:pointer;margin-left:6px;vertical-align:1px;line-height:1}
.obinfo:hover,.obinfo:focus-visible{border-color:var(--accent);color:var(--accent)}
.obpop{position:absolute;z-index:80;max-width:360px;background:#fffdf9;border:1px solid #eadfcd;border-radius:10px;
  box-shadow:0 12px 32px rgba(60,45,20,.14);padding:16px 38px 14px 18px;font-size:13.5px;line-height:1.55}
.obpop b{display:block;margin:0 0 4px;font-size:14px}
.obpop p{margin:0}
.obpop-zu{position:absolute;top:8px;right:8px;width:26px;height:26px;border:none;background:transparent;
  color:var(--muted);font-size:17px;cursor:pointer;border-radius:50%}
.obpop-zu:hover{background:#f2ead9}
.obpop.sheet{position:fixed;left:0;right:0;bottom:0;top:auto;max-width:none;border-radius:18px 18px 0 0;
  padding:20px 46px 26px 20px;font-size:15px;box-shadow:0 -10px 40px rgba(60,45,20,.22)}
.obpop.sheet .obpop-zu{top:12px;right:12px;width:34px;height:34px;font-size:20px}

/* Upload-Arbeitsbereich */
.upblock{border:1px solid #ece5d9;border-radius:12px;padding:18px 20px;background:#fff;margin:0 0 20px;box-shadow:0 1px 3px rgba(30,25,15,.05)}
.upblock.voll{border-color:#d7e6d5;background:#fcfdfb}
.upblock-kopf{display:flex;align-items:flex-start;gap:12px}
.upblock-icon{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:11px;
  background:var(--accentSoft);color:var(--accentDark);font-size:17px;flex-shrink:0}
.upblock.voll .upblock-icon{background:#e4f0e1;color:#1e7d43}
/* Einwilligung dezent unten in der Card, mit feiner Trennlinie darüber */
.upblock-consent{display:flex;align-items:flex-start;gap:11px;margin:14px 0 0;padding:12px 0 0;border-top:1px solid #f0e8d9;font-size:13px;color:var(--muted);line-height:1.5;cursor:pointer}
.upblock-consent input{margin-top:2px;flex:none;width:17px;height:17px}
.upblock-consent span{flex:1;min-width:0;text-wrap:pretty}
.upblock-mitte{flex:1;min-width:0}
.upblock-titel{font-weight:650;font-size:14.5px}
.upblock-erkl{display:block;font-size:12.5px;color:var(--muted);margin-top:2px;line-height:1.45}
.upblock-status{font-size:12.5px;color:#1e7d43;white-space:nowrap}
.updrop{margin-top:12px;border:1.5px dashed #d8cbb2;border-radius:10px;padding:22px 16px;text-align:center;
  cursor:pointer;color:var(--muted);font-size:13.5px;transition:border-color .12s, background .12s}
.updrop:hover,.updrop:focus-visible,.updrop.drag{border-color:var(--accent);background:#fdf6ee;color:#4a4540}
.updrop.klein{padding:14px 12px}
.updateien{display:flex;flex-direction:column;gap:8px;margin:12px 0 0}
.updatei{display:flex;align-items:center;gap:12px;background:#fff;border:1px solid #f0e8d9;border-radius:10px;padding:8px 10px}
.updatei-thumb{width:44px;height:44px;object-fit:cover;border-radius:8px;background:#f2ede5}
.updatei-icon{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:8px;background:#f2ede5}
.updatei-mitte{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
.updatei-name{font-size:13.5px;font-weight:550;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.updatei-meta{font-size:11.5px;color:var(--muted)}
.upqueue{display:flex;flex-direction:column;gap:6px;margin-top:8px}
.upzeile{display:flex;align-items:center;gap:10px;font-size:12.5px;color:var(--muted);background:#fbf7f0;border-radius:8px;padding:6px 10px}
.upz-name{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.upzeile.fertig{color:#1e7d43}
.upzeile.fehler{color:#b3402a}

/* Zentrale „Bilder und Dateien": Uploadbereiche, Dateiliste, Sammel- und Einzelbearbeitung */
.ufa-logocard .upblock-erkl,.ufa-fotocard .upblock-erkl{display:block;font-size:13px;color:var(--muted);line-height:1.5;margin:4px 0 2px;max-width:640px}
.ufa-logoliste{display:flex;flex-direction:column;gap:8px;margin:12px 0 4px}
/* Einwilligung zweistufig */
.ufa-consent{margin-top:14px;display:flex;flex-direction:column;gap:9px}
.ufa-consent-q,.ufa-consent-c{display:flex;gap:9px;align-items:flex-start;font-size:13px;color:var(--text);line-height:1.45;cursor:pointer}
.ufa-consent-q input,.ufa-consent-c input{width:17px;height:17px;accent-color:var(--accent);margin:1px 0 0;flex:none}
.ufa-consent-c{margin-left:26px;color:var(--muted)}
/* Dateiliste */
.ufa-liste{margin-top:20px}
.ufa-vsum{background:var(--accentSoft);border:1px solid #f1cfae;border-radius:10px;padding:10px 14px;font-size:13.5px;color:var(--accentDark);margin:0 0 12px}
.ufa-listkopf{display:flex;align-items:center;margin:0 2px 10px}
.ufa-alle{display:inline-flex;align-items:center;gap:9px;font-size:13px;color:var(--muted);cursor:pointer;user-select:none}
.ufa-alle input{width:17px;height:17px;accent-color:var(--accent);margin:0}
.ufa-grid{display:flex;flex-direction:column;gap:8px}
.ufa-leer-hinweis{font-size:13px;color:var(--muted);margin:4px 2px 0}
/* Eine Dateizeile */
/* Festes Karten-Grid: Checkbox | Thumbnail | Body(2 Zeilen). Gleiche Ausrichtung in jeder
   Karte, unabhängig vom Thumbnail. Logo-Zeilen haben eine eigene Struktur (siehe unten). */
/* ============================================================
   Dateikarte: ein festes Raster, alle Karten identisch.
   Spalten: Auswahl 24 · Vorschau 72 · Inhalt 1fr · Löschen 24
   ============================================================ */
.ufa-row{background:#fff;border:1px solid var(--hair);border-radius:10px;padding:14px;transition:border-color .12s,background .12s}
.ufa-row:not(.ufa-logorow){display:grid;grid-template-columns:24px 72px minmax(0,1fr) 24px;column-gap:12px;row-gap:12px;align-items:start}
.ufa-row:has(.ufa-check:checked){background:#fdf7ee;border-color:#ecd9b8}
.ufa-sel{grid-column:1;grid-row:1 / span 2;align-self:start;justify-self:center;height:72px;display:flex;align-items:center;justify-content:center;margin:0}
.ufa-check{width:18px;height:18px;accent-color:var(--accent);margin:0;cursor:pointer}
.ufa-thumb{grid-column:2;grid-row:1 / span 2;align-self:start;width:72px;height:72px;border-radius:8px;background:#f2ede5;overflow:hidden;display:flex;align-items:center;justify-content:center}
.ufa-thumb-img{width:100%;height:100%;object-fit:cover;cursor:zoom-in;transition:opacity .12s}
.ufa-thumb-img:hover{opacity:.9}
.ufa-thumb-img:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.ufa-thumb-doc{width:100%;height:100%;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;color:var(--muted);text-decoration:none}
/* Kopfzeile: Name (ellipsis) links, Typ und Größe rechts, Papierkorb in eigener Spalte */
.ufa-line1{grid-column:3;grid-row:1;display:flex;align-items:baseline;gap:10px;min-width:0;height:22px}
.ufa-name{font-size:13.5px;font-weight:600;line-height:22px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0;flex:1}
.ufa-meta{font-size:11.5px;color:var(--muted);line-height:22px;flex:none;white-space:nowrap}
.ufa-del{grid-column:4;grid-row:1;align-self:center;justify-self:center;display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;color:var(--muted);background:none;border:0;border-radius:7px;cursor:pointer}
.ufa-del:hover{color:var(--red);background:#fbeee9}
/* Zeile 2: Kategorie (40 %) und Beschreibung (60 %) im selben Raster, feste 48-px-Felder */
.ufa-felder2{grid-column:3 / 5;grid-row:2;display:grid;grid-template-columns:minmax(240px,40%) minmax(0,60%);column-gap:16px;row-gap:12px;align-items:start}
.ufa-felder2 .ufa-f{display:flex;flex-direction:column;gap:6px;margin:0;padding:0;min-width:0}
.ufa-felder2 .ufa-katfeld{grid-column:1;grid-row:1}
.ufa-felder2 .ufa-grow{grid-column:2;grid-row:1}
.ufa-felder2 .ufa-refwrap{grid-column:1 / -1;grid-row:2}
.ufa-flabel{font-size:11.5px;font-weight:600;color:var(--muted);line-height:18px;height:18px;margin:0;padding:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block}
.ufa-flabel .oboptional{font-weight:500;color:var(--dim);margin-left:5px}
/* Chip, Referenz-Select und Beschreibungsfeld: exakt identische Box (48 px, bündig oben und unten) */
.ufa-felder2 .ufa-katchip,.ufa-felder2 .ufa-ref,.ufa-felder2 .ufa-beschr{
  box-sizing:border-box;width:100%;height:48px;min-height:48px;margin:0;
  border:1px solid var(--line2);border-radius:9px;background:#fff;font:inherit;font-size:13.5px;color:var(--text)}
.ufa-felder2 .ufa-katchip{padding:0 34px 0 14px;line-height:46px}
.ufa-felder2 .ufa-beschr{padding:0 14px}
.ufa-beschrzeile{position:relative;display:flex;margin:0}
.ufa-beschrzeile .ufa-beschr{flex:1 1 auto;padding-right:82px}
.ufa-ok{position:absolute;right:10px;top:50%;transform:translateY(-50%);font-size:11px;font-weight:600;color:#1e7d43;background:#fff;padding:0 3px;pointer-events:none}
.btn.klein{padding:7px 14px;font-size:13px}
/* Bestandskunden-Assistent: geführte Schritt-Kette in der Konditionen-Karte */
.assistent{list-style:none;margin:8px 0 0;padding:0}
.as-schritt{display:flex;align-items:flex-start;gap:11px;padding:10px 2px;border-top:1px solid var(--hair)}
.as-schritt:first-child{border-top:0}
.as-ico{flex:none;width:22px;height:22px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;line-height:1;margin-top:1px}
.as-ok .as-ico{background:#e7f4ec;color:#1e7d43}
.as-offen .as-ico{background:#fdeede;color:var(--accentDark)}
.as-warten .as-ico{background:#eef0f2;color:var(--muted)}
.as-txt{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
.as-txt b{font-size:13.5px;font-weight:600;color:var(--text)}
.as-offen .as-txt b{color:var(--accentDark)}
.as-txt span{font-size:12.5px;color:var(--muted);line-height:1.45}
.as-akt{flex:none;align-self:center}
@media(max-width:640px){
  /* Mobil: schmalere Vorschau, Kategorie und Beschreibung untereinander */
  .ufa-row:not(.ufa-logorow){grid-template-columns:24px 56px minmax(0,1fr) 24px;column-gap:10px}
  .ufa-thumb{width:56px;height:56px}
  .ufa-sel{height:56px}
  .ufa-felder2{grid-template-columns:1fr}
  .ufa-felder2 .ufa-katfeld,.ufa-felder2 .ufa-grow,.ufa-felder2 .ufa-refwrap{grid-column:1;grid-row:auto}
}
/* Logo-Zeile (eigene Struktur mit .ufa-body) */
.ufa-logorow{display:flex;align-items:center;gap:12px}
.ufa-logorow .ufa-thumb{flex:none}
.ufa-logorow .ufa-body{flex:1;min-width:0;display:flex;flex-direction:column;gap:4px}
.ufa-logorow .ufa-line1{display:flex;align-items:center;gap:8px;min-width:0}
.ufa-logorow .ufa-tools{flex:none}
.ufa-varwrap{display:flex;flex-direction:column;gap:4px;margin-top:2px}
.ufa-varwrap select{font-size:13px;max-width:280px}
/* Sammel-Leiste: schlanke Aktionszeile, kein zweites Formular */
.ufa-bulk{position:sticky;top:8px;z-index:5;display:flex;flex-wrap:wrap;align-items:center;gap:9px 10px;
  background:#faf6ef;border:1px solid #ecdfcd;border-radius:10px;padding:9px 12px;margin:0 0 10px}
.ufa-bulk-n{flex:none;font-size:13px;color:var(--muted)}
.ufa-bulk-n b{font-size:13px;font-weight:600;color:var(--text)}
.ufa-bulk-kat{flex:0 0 auto;min-width:172px;font-size:13px}
.ufa-bulk-ref{flex:0 1 190px;font-size:13px}
.ufa-bulk-beschr{flex:1 1 190px;min-width:150px;font-size:13px}
.ufa-bulk-clear{flex:none;background:none;border:0;margin-left:auto;padding:4px 4px;font:inherit;font-size:12.5px;color:var(--muted);cursor:pointer;text-decoration:underline;text-underline-offset:2px}
.ufa-bulk-clear:hover{color:var(--text)}
/* „So geht’s"-Karte */
.ufa-sogeht .ufa-schritte{margin:6px 0 0;padding-left:20px;font-size:13.5px;color:var(--text);line-height:1.7}
.ufa-sogeht-fuss{font-size:12.5px;color:var(--muted);margin:12px 0 0}
/* Erweiterte Bild-Lightbox */
.lbx-img{max-width:92vw;max-height:82vh;object-fit:contain;border-radius:8px;box-shadow:0 20px 60px rgba(0,0,0,.4)}
.lbx-fig{margin:0;display:flex;flex-direction:column;align-items:center;gap:12px;max-width:92vw}
.lbx-cap{display:flex;gap:12px;align-items:center;color:rgba(255,255,255,.9);font-size:13px}
.lbx-name{font-weight:500}
.lbx-zaehler{color:rgba(255,255,255,.6)}
.lbx-zu{position:fixed;top:18px;right:22px;width:42px;height:42px;border:0;border-radius:50%;background:rgba(255,255,255,.14);color:#fff;font-size:26px;line-height:1;cursor:pointer;z-index:301}
.lbx-nav{position:fixed;top:50%;transform:translateY(-50%);width:48px;height:48px;border:0;border-radius:50%;background:rgba(255,255,255,.14);color:#fff;font-size:30px;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;z-index:301}
.lbx-zu:hover,.lbx-nav:hover{background:rgba(255,255,255,.26)}
.lbx-prev{left:20px}.lbx-next{right:20px}
body.lbx-offen{overflow:hidden}
@media(max-width:640px){
  .ufa-row{flex-wrap:wrap;gap:10px}
  .ufa-sel{padding-top:0}
  .ufa-thumb{width:52px;height:52px}
  .ufa-tools{order:3;width:100%;justify-content:flex-end;border-top:1px solid var(--hair);padding-top:8px;margin-top:2px}
  .ufa-bulk{position:static}
  .ufa-bulk-kat,.ufa-bulk-ref,.ufa-bulk-beschr{flex:1 1 100%}
  .ufa-bulk-clear{margin-left:0}
  .lbx-nav{width:40px;height:40px;font-size:26px}.lbx-prev{left:8px}.lbx-next{right:8px}
}

/* Cookie-Banner-Beispiel */
.obcookie-demo{position:relative;max-width:520px;border:1px solid #e8e0d1;border-radius:10px;overflow:hidden;background:#fff;margin:6px 0 4px}
.obcookie-browser{display:flex;align-items:center;gap:10px;background:#f2ede4;padding:8px 14px}
.obcookie-punkte i{display:inline-block;width:8px;height:8px;border-radius:50%;background:#d8cbb2;margin-right:4px}
.obcookie-url{font-size:11.5px;color:var(--muted);background:#fff;border-radius:6px;padding:2px 12px}
.obcookie-body{padding:16px 16px 14px;background:linear-gradient(180deg,#faf7f2, #f4efe6)}
.obcookie-zeile{height:10px;border-radius:5px;background:#e9e1d2;margin:0 0 8px}
.obcookie-zeile.kurz{width:60%}
.obcookie-banner{background:#fff;border-radius:10px;box-shadow:0 8px 22px rgba(60,45,20,.12);padding:14px 16px;margin-top:14px}
.obcookie-banner b{font-size:13px}
.obcookie-banner p{font-size:11.5px;color:var(--muted);margin:4px 0 10px;line-height:1.5}
.obcookie-btns{display:flex;gap:6px;flex-wrap:wrap}
.obcookie-btns span{font-size:11px;border-radius:7px;padding:5px 10px}
.obcookie-btns .cb1{background:#2a2622;color:#fff}
.obcookie-btns .cb2{border:1px solid #d8cbb2}
.obcookie-btns .cb3{color:var(--muted)}
.obcookie-label{position:absolute;top:8px;right:10px;font-size:10.5px;letter-spacing:.05em;text-transform:uppercase;
  color:#8a7a5e;background:#f6efe2;border-radius:6px;padding:2px 8px}

/* Wunsch-Adressen */
.obmail-karte{background:#fdfbf7}
.obmail-adresse{display:flex;align-items:center;gap:8px;margin:0 0 10px}
.obmail-at{font-weight:600;color:var(--muted);font-size:14px}

/* Hilfe + Sheet */
.obhilfe2{display:flex;align-items:center;gap:12px;border-top:1px solid #f0e8d9;margin-top:22px;padding-top:16px;
  color:var(--muted);font-size:13.5px}
.btn.klein{padding:6px 14px;font-size:13px}
.obsheet{position:fixed;inset:0;background:rgba(40,32,20,.35);z-index:90;display:flex;align-items:center;justify-content:center;padding:18px}
.obsheet[hidden]{display:none}
.obsheet-box{background:#fffdf9;border-radius:10px;max-width:480px;width:100%;padding:20px 22px;box-shadow:0 18px 50px rgba(60,45,20,.25)}
.obsheet-kopf{display:flex;align-items:center;justify-content:space-between;margin:0 0 10px}
.obsheet-zu{border:none;background:transparent;font-size:20px;color:var(--muted);cursor:pointer;width:32px;height:32px;border-radius:50%}
.obsheet-zu:hover{background:#f2ead9}

/* Referenz-Form */
.obref-form{background:#fdfbf7;border:1px solid #eee3d2;border-radius:10px;padding:16px 18px;margin-top:10px}

/* Geräte-Vorschau (Testmodus) */
.obtestgeraete{display:flex;gap:22px;overflow-x:auto;padding:4px 0 20px}
.obtestgeraet-titel{font-size:12.5px;color:var(--muted);margin:0 0 6px}
.obtestgeraet iframe{border:1px solid var(--line);border-radius:10px;background:#fff}

/* Mobil */
@media (max-width:900px){
  .obhaupt.mit-seite{grid-template-columns:1fr}
  .obseite{position:static}
  .obzaehler.mobil{display:block}
}
@media (max-width:640px){
  .obcard{padding:20px 16px 18px}
  .obstart{padding:24px 18px 22px}
  .obkarten{grid-template-columns:1fr}
  .obband{overflow-x:auto;flex-wrap:nowrap;padding-bottom:4px;scrollbar-width:none}
  .obband::-webkit-scrollbar{display:none}
  .obgruppe{white-space:nowrap}
  .obkopf-zeile .obsave{width:100%;margin-left:0}
  .obformbar .btn.primary{width:100%;text-align:center;order:-1}
  .obformbar{flex-wrap:wrap;gap:10px}
  .obsheet{align-items:flex-end;padding:0}
  .obsheet-box{border-radius:18px 18px 0 0;max-width:none}
  .obstart-fakten{grid-template-columns:1fr 1fr}
}

/* ---------- Portal v3: Statuskomponente, Portalnutzer, Kampagnen, Anleitungen ---------- */
.kstatuskomp{margin:0 0 16px;padding:0 0 16px;border-bottom:1px solid #f0e8d9}
.kstatus-titel{margin:0 0 4px;font-size:19px;letter-spacing:-.01em}
.kstatus-text{margin:0;color:#4a4540;line-height:1.55;max-width:640px}
.kstatus-ruhe{margin:8px 0 0;color:#1e7d43;font-size:13.5px;font-weight:550}
.kstatus-handeln{margin:8px 0 0;color:#b3402a;font-size:13.5px;font-weight:550}
.pnzeile{display:flex;flex-direction:column;gap:6px;border:1px solid var(--line);border-radius:10px;padding:12px 14px;margin:0 0 10px;background:#fdfbf8}
.pnwer{display:flex;flex-direction:column}
.pnfakten{display:flex;gap:10px;flex-wrap:wrap;align-items:center;font-size:12.5px}
.pnakt{display:flex;gap:4px;flex-wrap:wrap}
.kampkarte{border:1px solid var(--line);border-radius:10px;padding:14px 16px;margin:0 0 10px;background:#fdfbf8}
.kampkopf{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}
.anlkarte{border:1px solid #eee3d2;border-radius:10px;padding:14px 16px;margin:0 0 10px;background:#fefcf9}
.anlkopf{display:flex;align-items:baseline;justify-content:space-between;gap:10px}
.anltext{margin:4px 0 10px;font-size:13.5px;color:#4a4540;line-height:1.5}
.ppunkt{display:inline-block;width:9px;height:9px;border-radius:50%;flex-shrink:0;margin-right:4px}
.kpis.drei{grid-template-columns:repeat(3,1fr)}
.kpis.drei .kpi{min-height:74px}
.kpis.drei .kpi b{font-size:16px}
.kpis.vier{grid-template-columns:repeat(4,1fr)}
.kpis.vier .kpi{min-height:86px;display:flex;flex-direction:column;justify-content:center}
.schnelldetails>summary{list-style:none;cursor:pointer}
.schnelldetails>summary::-webkit-details-marker{display:none}
.terminzelle{display:flex;align-items:center;gap:6px;flex-wrap:nowrap;white-space:nowrap}
.zeilenmenu{position:relative;display:inline-block}
.zeilenmenu>summary{list-style:none;cursor:pointer;padding:4px 9px;border:1px solid var(--line);border-radius:8px;font-weight:700}
.zeilenmenu>summary::-webkit-details-marker{display:none}
.zeilenmenu-liste{position:absolute;right:0;top:calc(100% + 4px);z-index:90;background:#fff;border:1px solid var(--line);border-radius:10px;
  box-shadow:0 10px 26px rgba(30,25,15,.14);min-width:190px;z-index:30;display:flex;flex-direction:column;padding:6px;
  text-align:left} /* nicht die Rechtsbündigkeit der Aktions-Zelle erben: Menüeinträge stehen einheitlich links */
.zeilenmenu-liste a{padding:8px 12px;border-radius:7px;font-size:13.5px;text-decoration:none;color:var(--text)}
.zeilenmenu-liste a:hover{background:#f6f1e8}
tr.zeilenlink{cursor:pointer}
tr.zeilenlink:hover{background:#faf6ef}
.tbl.responsive td{vertical-align:middle}
.tbl .cellinput{height:32px}
.tbl .mini,.tbl .btn.klein{height:30px;display:inline-flex;align-items:center}
@media (max-width:760px){
  .kpis.drei,.kpis.vier{grid-template-columns:1fr}
}
.anlrolle{margin:2px 0 8px;font-size:13.5px}
.anladresse{display:flex;align-items:center;gap:10px;flex-wrap:wrap;background:#fff;border:1px solid #eadfcd;border-radius:10px;padding:10px 12px;margin:0 0 10px}
.anladresse code{font-size:15px;font-weight:650;letter-spacing:.01em}

/* ---------- Kontakte: einheitliche Tabelle, Termin-Dialog, Pipeline ---------- */
.kontaktfilter{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 10px}
.kontaktfilter .suchfeld{flex:1;min-width:200px;max-width:340px}
.tbl.kontakte td{vertical-align:middle;height:58px;padding-top:8px;padding-bottom:8px;cursor:default}
.tbl.kontakte tr.zeilenlink td{cursor:pointer}
.tbl.kontakte td.zellsteuer, .tbl.kontakte td.rowactions{cursor:default}
.tbl.kontakte .betriebname{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;line-height:1.3}
.tbl.kontakte .sub{display:block;font-size:12px;color:var(--muted);margin-top:1px}
.tbl.kontakte .rowactions{text-align:right;white-space:nowrap;width:1%}
.tbl.kontakte .rowactions .btn.klein{height:30px}
.tbl.kontakte td, .tbl.kontakte th{border-bottom:1px solid var(--line)}
.tbl.kontakte select.statussel{height:32px}
.terminknopf{display:inline-block;border:1px solid transparent;background:transparent;text-align:left;font:inherit;
  padding:4px 8px;border-radius:8px;cursor:pointer;line-height:1.35;white-space:nowrap}
.terminknopf:hover{border-color:var(--line);background:#faf6ef}
.terminknopf i{color:var(--accent);font-style:normal;font-weight:550}
.terminwert{font-size:12.5px;color:var(--muted);white-space:nowrap}
.pipeline{display:grid;grid-template-columns:repeat(7,minmax(170px,1fr));gap:10px;overflow-x:auto;align-items:start}
.pipespalte{background:#f6f1e8;border-radius:10px;padding:10px;min-height:180px}
.pipespalte.ziel{outline:2px dashed var(--accent);outline-offset:-4px}
.pipetitel{font-size:12px;letter-spacing:.05em;text-transform:uppercase;color:var(--muted);margin:0 0 8px;padding:0 2px}
.pipekarten{display:flex;flex-direction:column;gap:8px}
.pipekarte{background:#fff;border:1px solid var(--line);border-radius:10px;padding:10px 12px;cursor:grab;display:flex;flex-direction:column;gap:2px}
.pipekarte.zieht{opacity:.5}
.pipename{font-weight:600;font-size:13.5px;text-decoration:none;color:var(--text)}
.pipesub{font-size:12px;color:var(--muted)}
.pipetermin{font-size:11.5px;color:#7a5ea8}
@media (max-width:900px){
  .pipeline{grid-template-columns:repeat(7,220px)}
}
.tbl.kontakte td.aktzelle{text-align:right;width:1%;white-space:nowrap;cursor:default}
.aktionszeile{display:inline-flex;gap:6px;align-items:center;justify-content:flex-end}
.tbl.kontakte td[data-l="Hinweis"]{max-width:180px;overflow:hidden;text-overflow:ellipsis;font-size:12.5px;color:var(--muted)}

/* ================= Onboarding v3 ================= */
/* Durchgehende Prozesslinie statt Buttonband */
.obprozess{display:flex;align-items:flex-start;margin-top:16px}
@media (max-width:640px){
}

/* Ruhige Hinweise statt orangefarbener Folgeboxen */
/* Bedingte Infobox hängt eng an ihrer Frage darüber, mit klarem Abstand nach unten */
.obhinweis{background:#faf9f6;border-left:2px solid var(--line2);border-radius:0 8px 8px 0;
  padding:11px 15px;font-size:13.5px;line-height:1.55;color:#4a4636;margin:-6px 0 18px}
.obhinweis .obinfo{margin-left:6px}

/* Vorbefüllt-Hinweis dezent */
.obvorbefuellt{display:block;font-size:11.5px;color:var(--dim);background:none;border-radius:0;padding:0;margin:2px 0 4px}

/* Auswahlkarten: Titel und Erklärung klar getrennt */
.obkarte-titel{display:block;margin-bottom:3px}
.obkarte-sub{display:block}
.obfeld.ruhig .obkarte{background:#fbfaf7;border-style:solid;border-color:var(--hair)}

/* Halbe Felder (PLZ / Ort) */
.editform .obfeld.obhalb{display:inline-block;vertical-align:top;width:calc(50% - 7px)}
.editform .obfeld.obhalb.h1{margin-right:10px}
@media (max-width:560px){.editform .obfeld.obhalb{display:block;width:100%;margin-right:0}}

/* Upload-Blöcke: heller, Line-Icons, gefüllter Zustand sichtbar */
.upblock{background:var(--panel);border-color:var(--line)}
.upblock-icon{background:#f4f2ec;color:#6b6553;border-radius:9px}
.upblock-icon svg{width:20px;height:20px}
.upblock-status{color:var(--dim)}
.upblock.voll{border-color:#cfe5d6;background:#fdfffd}
.upblock.voll .upblock-icon{background:var(--greenSoft);color:var(--green)}
.upblock.voll .upblock-status{color:var(--green);font-weight:550}
.updrop{background:var(--panel);border-color:var(--line2);color:var(--muted)}
.updrop:hover,.updrop:focus-visible,.updrop.drag{background:#fbfaf7;border-color:#2a2622;color:var(--text)}

/* Info-Popover kompakter */
.obpop{max-width:320px;font-size:13.5px;border-radius:10px}
.obpop b{font-size:13.5px}

/* Cookie-Beispiel kleiner und ruhiger */
.obcookie-demo{max-width:420px;transform:none}

/* Fragen sammeln */
.obfragen-zahl{font-size:12.5px;color:var(--muted);margin-left:8px}
.obfrage-gruppe{font-size:12px;letter-spacing:.04em;text-transform:uppercase;color:var(--dim);margin:12px 0 4px}
.obfrage-item{border:1px solid var(--line);border-radius:8px;padding:10px 12px;margin:6px 0;background:var(--panel)}
.obfrage-item textarea{width:100%;border:0;padding:0;background:none;resize:vertical;font:inherit;font-size:13.5px;line-height:1.5}
.obfrage-item textarea:focus{outline:none}
.obfrage-akt{display:flex;gap:6px;justify-content:flex-end;margin-top:6px}

/* Zusammenfassung */
.obzus{display:flex;flex-direction:column;gap:8px;margin:8px 0 2px}
.obzus-karte{border:1px solid var(--line);border-radius:8px;padding:11px 14px;background:var(--panel)}
.obzus-karte.offen{border-color:#ecd9b8;background:#fffdf8}
.obzus-kopf{display:flex;align-items:center;gap:10px}
.obzus-kopf b{font-size:14px}
.obzus-status{flex:1;font-size:12.5px;color:var(--muted)}
.obzus-karte.offen .obzus-status{color:var(--accentDark)}
.obzus-werte{margin-top:8px;display:flex;flex-direction:column;gap:3px}
.obzus-wert{font-size:12.5px;color:var(--text);display:flex;gap:8px}
.obzus-wert span{color:var(--dim);min-width:170px;flex:none}
.obzus-tags{display:flex;flex-wrap:wrap;gap:6px}
.obzus-tag{border:1px solid var(--line2);border-radius:6px;padding:3px 9px;font-size:12.5px;background:#fbfaf7}
@media (max-width:560px){.obzus-wert{flex-direction:column;gap:0}.obzus-wert span{min-width:0}}


/* ================= Designsystem 2026 ================= */
:root{
  --blue:#3567a8; --blueSoft:#eef3f9;
  --amber:#b06718; --amberSoft:#faf3ea;
  --ok:#2e7d4f; --okSoft:#eef6f0;
  --feldh:36px; --r:10px; --rs:6px;
  --schatten1:0 1px 2px rgba(25,26,28,.05);
  --schatten2:0 8px 28px rgba(25,26,28,.10);
}

/* Statuschips: Punkt + Beschriftung, heller neutraler Grund, feine Umrandung */
.chip{display:inline-flex;align-items:center;gap:7px;height:24px;padding:0 10px;border-radius:6px;
  font-size:12px;font-weight:600;letter-spacing:.01em;color:var(--text);
  background:#fcfcfb;border:1px solid var(--line)}
.chip i{width:7px;height:7px;border-radius:50%;background:#5c636e;flex:none}
.chip.t-neutral i{background:#5c636e}
.chip.t-blau i{background:var(--blue)}
.chip.t-orange i{background:var(--amber)}
.chip.t-gruen i{background:var(--ok)}
.chip.t-rot i{background:var(--red)}
.chip.t-grau i{background:#b4b8bd}
.chip.t-grau{color:var(--muted)}

/* Pillen im Bestand: ruhiger (kein satter Farbfond mehr) */
.pill{font-weight:600;letter-spacing:.01em;border-radius:6px;
  color:var(--text);background:#fcfcfb;border:1px solid var(--line);padding:3px 9px 3px 20px;position:relative}
.pill::before{content:"";position:absolute;left:8px;top:50%;transform:translateY(-50%);
  width:7px;height:7px;border-radius:50%;background:var(--c,#5c636e)}

/* Status-Selects: neutraler Rahmen, farbiger Punkt, einheitliche Höhe */
.statussel{height:32px;background:var(--panel);border:1px solid var(--line2);border-radius:var(--rs);
  color:var(--text);font-size:13px;font-weight:550;padding:0 26px 0 24px;
  background-image:radial-gradient(circle 3.5px at 13px 50%, var(--c,#5c636e) 99%, transparent),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'><path d='M1 1l4 4 4-4' fill='none' stroke='%236f7378' stroke-width='1.6' stroke-linecap='round'/></svg>");
  background-repeat:no-repeat;background-position:left center, right 9px center}
.statussel:hover{border-color:var(--text)}

/* Einheitliche Höhen für Felder und Buttons */
.btn{height:var(--feldh);padding:0 16px;border-radius:var(--rs);font-size:13.5px}
.btn.klein{height:30px;padding:0 12px;font-size:12.5px}
.mini{height:28px;display:inline-flex;align-items:center;justify-content:center;line-height:1;
  border-radius:6px;padding:0 10px}
.editform input:not([type=checkbox]):not([type=radio]),.editform select{height:var(--feldh)}
.card{border-radius:var(--r);box-shadow:var(--schatten1)}

/* Toolbar über Übersichten */
.toolbar{display:flex;align-items:center;gap:10px;margin:0 0 14px;flex-wrap:wrap}
.suchfeld{position:relative;flex:0 1 320px;min-width:220px}
.suchfeld svg{position:absolute;left:11px;top:50%;transform:translateY(-50%);width:15px;height:15px;color:var(--dim);pointer-events:none}
.suchfeld input{width:100%;height:var(--feldh);padding:0 12px 0 34px;border:1px solid var(--line2);border-radius:var(--rs);
  background:var(--panel);font-size:13.5px}
.suchfeld input:focus{outline:none;border-color:var(--text)}
.toolbtn{height:var(--feldh);display:inline-flex;align-items:center;gap:7px;padding:0 13px;border:1px solid var(--line2);
  border-radius:var(--rs);background:var(--panel);font-size:13px;font-weight:550;color:var(--text);cursor:pointer;text-decoration:none}
.toolbtn:hover{border-color:var(--text)}
.toolbtn .anz{min-width:18px;height:18px;border-radius:9px;background:var(--text);color:#fff;font-size:11px;
  display:inline-flex;align-items:center;justify-content:center;padding:0 5px}
.toolbtn svg{width:14px;height:14px;color:var(--dim)}
.ansichtswahl{display:inline-flex;border:1px solid var(--line2);border-radius:var(--rs);overflow:hidden;height:var(--feldh)}
.ansichtswahl a{display:inline-flex;align-items:center;padding:0 14px;font-size:13px;font-weight:550;color:var(--muted);text-decoration:none}
.ansichtswahl a.an{background:var(--panel2);color:var(--text);font-weight:650}
.ansichtswahl a:not(.an):hover{background:var(--hair);color:var(--text)}

/* Einheitliche Auswahlfelder (Dropdowns) im Cockpit-Stil, statt nacktem Browser-Select */
.selfeld{appearance:none;-webkit-appearance:none;height:var(--feldh);
  padding:0 34px 0 12px;font:inherit;font-size:14px;color:var(--text);line-height:1;cursor:pointer;
  background:var(--panel) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 4.5l3.5 3.5 3.5-3.5' stroke='%23888' stroke-width='1.4' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 11px center;
  border:1px solid var(--line2);border-radius:var(--rs)}
.selfeld:hover{border-color:var(--line)}
.selfeld:focus{outline:none;border-color:var(--accent)}
.katwahl{display:inline-flex;align-items:center;gap:10px;font-size:14px;color:var(--text)}

/* Filterpanel */
.filterpanel{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--schatten2);
  padding:18px 20px;margin:0 0 14px}
.filterpanel .frei{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:12px}
.filterpanel label{display:block;font-size:11.5px;font-weight:600;letter-spacing:.03em;color:var(--dim);margin-bottom:4px;text-transform:uppercase}
.filterpanel select,.filterpanel input{width:100%;height:34px;border:1px solid var(--line2);border-radius:6px;background:var(--panel);font-size:13px;padding:0 9px}
.filterfuss{display:flex;gap:8px;align-items:center;margin-top:14px;flex-wrap:wrap}
.filterchips{display:flex;gap:6px;flex-wrap:wrap;margin:0 0 12px}
.fchip{display:inline-flex;align-items:center;gap:6px;height:26px;padding:0 6px 0 10px;border-radius:6px;
  background:var(--panel2);border:1px solid var(--line);font-size:12.5px;font-weight:550}
.fchip button{border:0;background:none;cursor:pointer;color:var(--dim);font-size:14px;line-height:1;padding:2px}
.fchip button:hover{color:var(--text)}

/* Tabellenqualität: gleiche Zeilenhöhe, volle Trennlinien, ruhiger Hover */
.tbl.glatt th{border-bottom:1px solid var(--line2)}
.tbl.glatt td{height:56px;padding-top:0;padding-bottom:0;border-bottom:1px solid var(--hair)}
.tbl.glatt tr:last-child td{border-bottom:1px solid transparent}
.tbl.glatt tr.zeilenlink{cursor:pointer}
.tbl.glatt tr.zeilenlink:hover td{background:#fafaf8}
.tbl .zelle2{display:block;font-size:12px;color:var(--dim);margin-top:1px}
.terminlink{display:inline-flex;align-items:center;gap:6px;font-size:13px;color:var(--muted);text-decoration:none;border-radius:6px;padding:4px 6px;margin:-4px -6px}
.terminlink:hover{color:var(--text);background:var(--panel2)}
.terminlink svg{width:13.5px;height:13.5px;color:var(--dim)}
.terminlink.gesetzt{color:var(--text)}

/* Drei-Punkte-Menü */
.dreipunkt{width:30px;height:30px;border-radius:6px;border:1px solid transparent;background:none;cursor:pointer;
  color:var(--dim);font-size:17px;line-height:1;display:inline-flex;align-items:center;justify-content:center}
.dreipunkt:hover{border-color:var(--line2);color:var(--text);background:var(--panel)}

/* KPI-Cards symmetrisch */
.kpis.reihe{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.kpis.reihe .kpi{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:18px 20px 16px;
  display:flex;flex-direction:column;justify-content:flex-end;min-height:104px;box-shadow:var(--schatten1)}
.kpis.reihe .kpi b{font-size:26px;font-weight:650;letter-spacing:-.015em;line-height:1.15}
.kpis.reihe .kpi span{font-size:12.5px;color:var(--muted);margin-top:4px}
.kpis.reihe .kpi .sub2{font-size:12px;color:var(--dim);margin-top:1px}
.kpis.reihe .kpi.gruenakzent b{color:var(--ok)}
@media (max-width:900px){.kpis.reihe{grid-template-columns:repeat(2,1fr)}}

/* Dialogkarte (Bestätigungen, Löschdialog) */
.dialograhmen{position:fixed;inset:0;background:rgba(20,20,18,.42);z-index:120;display:flex;align-items:center;justify-content:center;padding:18px}
.dialogkarte{background:var(--panel);border-radius:10px;box-shadow:var(--schatten2);max-width:560px;width:100%;max-height:88vh;overflow:auto;padding:24px 26px}
.dialogkarte h2{margin:0 0 6px;font-size:18px}

/* Notizen */
.notizliste{display:flex;flex-direction:column;gap:10px;margin-top:18px}
.notiz{border:1px solid var(--line);border-radius:8px;padding:11px 14px;background:#fffdf9}
.notiz.angeheftet{border-color:#e7d9bd;background:#fffaf0}
.notiz-text{font-size:13.5px;line-height:1.55;white-space:pre-wrap}
.notiz-meta{display:flex;gap:10px;align-items:center;font-size:11.5px;color:var(--dim);margin-top:7px}
.notiz-meta .spacer{flex:1}
.notiz-meta button{border:0;background:none;color:var(--dim);cursor:pointer;font-size:11.5px;padding:2px 4px;border-radius:4px}
.notiz-meta button:hover{color:var(--text);background:var(--panel2)}
.notizneu textarea{width:100%;border:1px solid var(--line2);border-radius:8px;padding:8px 12px;font:inherit;font-size:13.5px;resize:vertical;min-height:42px;height:44px}

/* Gespräche: Abschnitte, Statusleiste, Fortschritt */
.gstatusleiste{display:flex;align-items:center;gap:10px;margin:0 0 10px}
.gfortschritt{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 14px}
details.gabschnitt{padding:0;overflow:hidden}
details.gabschnitt summary{cursor:pointer;list-style:none;display:flex;align-items:center;gap:10px;
  padding:16px 22px;font-weight:650;font-size:14.5px}
details.gabschnitt summary::-webkit-details-marker{display:none}
details.gabschnitt summary .lmut{margin-left:auto;font-weight:500}
details.gabschnitt summary::after{content:"›";color:var(--dim);font-size:18px;transform:rotate(90deg);transition:transform .15s}
details.gabschnitt[open] summary::after{transform:rotate(-90deg)}
details.gabschnitt .gfelder{padding:2px 22px 20px;border-top:1px solid var(--hair)}
.gnr{width:22px;height:22px;border-radius:50%;border:1.5px solid var(--line2);display:inline-flex;
  align-items:center;justify-content:center;font-size:11.5px;color:var(--muted);flex:none}
details.gabschnitt[open] .gnr{border-color:#2a2622;color:#191a1c}

/* Zusammenfassungs-Editor */
.zfabschnitt{padding:16px 20px}
.zfabschnitt.aus{opacity:.55}
.zfkopf{display:flex;align-items:center;gap:14px;margin-bottom:8px;flex-wrap:wrap}
.zftitel{flex:1;min-width:200px;border:0;font-weight:650;font-size:15px;background:none;padding:4px 0}
.zftitel:focus{outline:none;border-bottom:1px solid var(--text)}
.zfabschnitt textarea{width:100%;border:1px solid var(--line2);border-radius:8px;padding:10px 12px;font:inherit;font-size:13.5px;line-height:1.6;resize:vertical}
.zfleiste{position:sticky;bottom:0;background:var(--bg);padding:12px 0;border-top:1px solid var(--line)}

/* Kundendashboard: linke Navigation */
/* Portal-Grundgerüst wie das Cockpit: weiße Menüspalte volle Höhe, heller Inhaltsbereich */
.kdash{display:grid;grid-template-columns:236px 1fr;gap:0;max-width:none;margin:0;align-items:stretch;min-height:100vh}
/* min-width:0: Grid-Kinder dürfen schrumpfen, sonst zwingt die nowrap-Navigation
   die ganze Seite auf Mobilgeräten in die Breite (949-px-Befund aus dem Audit) */
.kdash-seite{position:sticky;top:0;height:100vh;background:var(--panel);border-right:1px solid var(--line);
  padding:26px 16px 20px;display:flex;flex-direction:column;box-sizing:border-box;min-width:0}
.kdash-seite .knavi{max-width:100%}
.kmbar{display:flex;align-items:center;justify-content:center}
.kmburger{display:none}
.kmpanel{display:flex;flex-direction:column;flex:1;min-height:0;margin-top:0}
.kdash-seite .knavi-konto{margin-top:auto}
.knavi{display:flex;flex-direction:column;gap:2px;background:transparent;border:0;border-radius:0;padding:0}
.knavi-punkt{display:block;padding:9px 13px;border-radius:8px;font-size:13.5px;font-weight:550;color:var(--muted);text-decoration:none}
.knavi-punkt:hover{background:var(--panel2);color:var(--text)}
.knavi-punkt.an{background:var(--accentSoft);color:var(--accentDark);font-weight:600}
.kdash-haupt{min-width:0}
@media (max-width:860px){
  .kdash{grid-template-columns:1fr;gap:0;min-height:0}
  .kdash-seite{position:sticky;top:0;z-index:30;height:auto;flex-direction:column;border-right:0;
    border-bottom:1px solid var(--line);padding:10px 16px;background:var(--panel)}
  /* Kopfzeile: Logo links, Menü-Knopf rechts */
  .kmbar{justify-content:space-between;width:100%}
  .knavi-logo{display:flex;justify-content:flex-start;padding:2px 0}
  .knavi-logo img{height:30px}
  .kmburger{display:inline-flex;flex-direction:column;justify-content:center;gap:5px;
    width:44px;height:40px;padding:0 10px;align-items:flex-end;background:transparent;border:0;cursor:pointer;-webkit-tap-highlight-color:transparent}
  .kmburger-l{display:block;width:22px;height:2px;border-radius:2px;background:var(--text);transition:transform .2s,opacity .2s}
  .kdash-seite.offen .kmburger-l:nth-child(1){transform:translateY(7px) rotate(45deg)}
  .kdash-seite.offen .kmburger-l:nth-child(2){opacity:0}
  .kdash-seite.offen .kmburger-l:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
  /* Klapp-Panel: senkrechte Liste, kein Scroll-Streifen */
  .kmpanel{display:none;flex-direction:column;margin-top:10px}
  .kdash-seite.offen .kmpanel{display:flex}
  .knavi{flex-direction:column;overflow:visible;gap:2px}
  .knavi-punkt{white-space:normal;padding:12px 12px;font-size:15px;border-radius:10px}
  .kdash-seite .knavi-konto{display:flex;flex-direction:column;margin-top:10px;padding-top:10px;border-top:1px solid var(--hair)}
  .knavi-konto a{padding:11px 12px;font-size:14px}
  .kdash-haupt{padding:22px 16px 64px}
}
/* Sauberes Aufklapp-Element für Formulare (z. B. Datei-Upload): der Knopf öffnet
   ein normal fließendes Formular darunter, ohne die fragile Dropdown-Mechanik. */
.kaufklapp{display:block}
.kaufklapp>summary{display:inline-flex;align-items:center;cursor:pointer;list-style:none}
.kaufklapp>summary::-webkit-details-marker{display:none}
.kaufklapp>summary::marker{content:""}
.kaufklapp[open]>summary{margin-bottom:2px}
/* Mobile Feinschliff: ruhigere Überschriften, Formulare voll nutzbar, kein doppeltes Padding.
   Kernidee gegen den „doppelten Abstand": der Seitenrand-Container wird schmal, das Card-Padding
   bleibt moderat — zusammen ergibt das einen ruhigen Abstand statt zweier addierter Ränder. */
@media (max-width:640px){
  .kdash-haupt .ktitel,.kdash-haupt .kgruss2-zeile{font-size:24px;letter-spacing:-.4px}
  .kdash-haupt{padding:18px 13px 60px}
  .kwrap{padding:20px 13px 48px}
  .kportal .card,.card,.vlcard,.obcard{padding:18px 15px}
  .obcard{padding:18px 15px 16px}
  .obseite-karte{padding:14px 15px}
  .kupload-form,.kaufklapp>form{max-width:100%!important}
  .kupload-form input[type=file]{width:100%}
  .editform .obfeld input,.editform .obfeld select,.editform .obfeld textarea{font-size:16px}
  /* Zusammengehörige Blöcke direkt aneinander: kein extra Kasten-Abstand für Einwilligung */
  .obcard .obconsent{margin:2px 0 16px}
  /* Vorlauf-/Onboarding-Überschriften auf Mobil ruhiger */
  .vlcard .kh1{font-size:26px;line-height:1.15;letter-spacing:-.02em}
  .obcard .obtitel{font-size:21px}
}

/* Dashboard: Terminkarte mit festem Raster, keine ineinanderlaufenden Spalten */
.terminzeile{display:grid;grid-template-columns:110px 1fr auto;gap:10px;align-items:baseline;
  padding:9px 0;border-bottom:1px solid var(--hair)}
.terminzeile:last-child{border-bottom:none}
.terminwann{font-size:12.5px;color:var(--muted);font-weight:600;white-space:nowrap}
.terminwann.heute{color:var(--text)}
.termintitel{font-size:13.5px;font-weight:550;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.terminquelle{font-size:11.5px;color:var(--dim);white-space:nowrap}

/* Linkes Menü: aktiver Zustand schlanker, präzise Ausrichtung */
.nav a.active{background:var(--accentSoft);box-shadow:none;color:var(--accentDark);font-weight:650;border-radius:8px}
.navgruppe{font-size:10px;letter-spacing:.12em;color:var(--dim);margin:16px 12px 6px}

/* Kompakte Leerzustände im Dashboard: eine ruhige Zeile statt großer leerer Karte */
.leerzeile{margin:2px 0 0;padding:6px 0;font-size:13px}

/* ================= Visuelle Sanierung 2026 ================= */
/* Einheitliches Raster: gleiche Ausrichtung und Abstände auf allen internen Seiten */
.content{max-width:1240px}
.head{margin-bottom:24px}
.head h1{font-size:24px;letter-spacing:-.015em}
/* Dashboard-Begrüßung: groß, aber leicht statt fett (sevDesk-Anmutung) */
.head-dash{margin-bottom:28px;align-items:flex-start}
.head-dash h1{font-size:30px;font-weight:600;letter-spacing:-.6px;color:var(--text)}
.head-dash .dashsub{font-size:14px;margin-top:7px}
.toolbar{margin-bottom:22px}
.card{margin-bottom:22px;padding:22px 24px}
.dsek{margin-bottom:24px}

/* Bereichs-Tabs: dezente Unterstreichung statt Rahmen-Buttons */
.subtabs{display:flex;gap:2px;border-bottom:1px solid var(--line);margin-bottom:18px;flex-wrap:wrap}
.subtab{padding:9px 14px 11px;font-size:13.5px;font-weight:550;color:var(--muted);position:relative}
.subtab:hover{color:var(--text)}
.subtab.active{color:var(--text);font-weight:650}
.subtab.active::after{content:"";position:absolute;left:12px;right:12px;bottom:-1px;height:2px;background:var(--text);border-radius:1px}
/* Projekt-Bereich: seitliche Navigation links, Inhalt rechts (mobil: Auswahlfeld) */
.projektlayout{display:grid;grid-template-columns:210px minmax(0,1fr);gap:24px;align-items:start}
.projektnav{display:flex;flex-direction:column;gap:2px;position:sticky;top:16px}
.projektnav-item{display:block;padding:9px 12px;border-radius:8px;font-size:13.5px;color:var(--muted);text-decoration:none;transition:background .12s,color .12s}
.projektnav-item:hover{background:var(--panel2);color:var(--text)}
.projektnav-item.active{background:#fdf0e3;color:var(--accentDark);font-weight:600}
.projektnav-select{display:none}
.projektinhalt{min-width:0;margin-top:20px}
.projektsubnav{display:flex;gap:20px;flex-wrap:wrap;align-items:center}
.projektsubnav{margin-top:-12px}
.projektsubnav-item{font-size:13px;color:var(--muted);text-decoration:none;padding:2px 0 4px;border-bottom:1px solid transparent;transition:color .12s}
.projektsubnav-item:hover{color:var(--text)}
.projektsubnav-item.active{color:var(--text);font-weight:500;border-bottom-color:var(--accent)}
.vorb-doklink{color:inherit;text-decoration:none;border-bottom:1px dotted var(--line2)}
.vorb-doklink:hover{color:var(--accent);border-bottom-color:var(--accent)}
/* Checkliste-Vorlage-Editor in den Einstellungen */
.cvl-abschnitt{border:1px solid var(--line);border-radius:12px;padding:12px 14px;margin-bottom:12px}
.cvl-abkopf{display:flex;align-items:center;gap:8px;margin-bottom:4px}
.cvl-abtitel{flex:1;font-weight:650;font-size:15px;border:1px solid transparent;background:transparent;border-radius:8px;padding:6px 8px;color:var(--text)}
.cvl-abtitel:hover{background:var(--panel2)}
.cvl-abtitel:focus{background:var(--panel);border-color:var(--line2);outline:none}
.cvl-punkt{display:flex;align-items:center;gap:9px;padding:1px 0}
.cvl-dot{width:5px;height:5px;border-radius:50%;background:var(--accent);opacity:.5;flex:none}
.cvl-titel,.cvl-url{border:1px solid transparent;background:transparent;border-radius:8px;padding:7px 8px;transition:background .12s,border-color .12s}
.cvl-titel{flex:2;min-width:120px;font-size:14px;color:var(--text)}
.cvl-url{flex:1;min-width:100px;font-size:13px;color:var(--muted)}
.cvl-titel:hover,.cvl-url:hover{background:var(--panel2)}
.cvl-titel:focus,.cvl-url:focus{background:var(--panel);border-color:var(--line2);outline:none}
.cvl-akt{display:flex;gap:2px;flex:none;opacity:0;transition:opacity .12s}
.cvl-punkt:hover .cvl-akt,.cvl-punkt:focus-within .cvl-akt{opacity:1}
.cvl-mini{border:0;background:transparent;color:var(--dim);width:26px;height:26px;border-radius:6px;cursor:pointer;font-size:14px;line-height:1}
.cvl-mini:hover{color:var(--text);background:var(--panel2)}
.cvl-mini.del:hover{color:var(--red);background:var(--redSoft)}
.cvl-mini[disabled]{opacity:.3;cursor:default}
.cvl-abdel{width:auto;padding:0 8px;font-size:12px;opacity:0}
.cvl-abschnitt:hover .cvl-abdel{opacity:1}
.cvl-add{border:0;background:transparent;color:var(--accent);font-weight:600;font-size:13px;padding:7px 8px 2px;cursor:pointer}
.cvl-add:hover{color:var(--accentDark)}
.cvl-abadd{border:0;background:transparent;color:var(--accent);font-weight:600;font-size:14px;padding:8px 2px;cursor:pointer;margin-top:4px}
.cvl-abadd:hover{color:var(--accentDark)}
@media(max-width:860px){
  .projektlayout{grid-template-columns:1fr;gap:14px}
  .projektnav{display:none}
  .projektnav-select{display:block;width:100%;font-size:14px;padding:10px 12px;border:1px solid var(--line2);border-radius:9px;background:#fff;color:var(--text)}
}

/* Tabellen: feste Zeilenhöhe, echte vertikale Mitte, ruhige Köpfe */
.tbl th{font-size:11px;letter-spacing:.07em;color:var(--dim);font-weight:650;padding:14px 14px}
.tbl.glatt td{height:64px;padding:8px 14px;vertical-align:middle}
.tbl.glatt tr:hover td{background:#fafaf8}
.tbl .firmenname{font-size:14.5px;font-weight:600;line-height:1.3}
.tbl .zelle2{margin-top:4px;line-height:1.3}

/* Phase- und Status-Selects: schlank, nicht wie Formularfelder */
.statussel{height:34px;font-size:13px;max-width:210px;width:100%}
.tbl .statussel{min-width:150px}

/* Termin in der Tabelle: lesbarer Inhalt statt Button-Kasten */
.terminlink{border:1px solid transparent;background:none;font:inherit;cursor:pointer;
  display:inline-flex;align-items:center;gap:8px;padding:6px 8px;margin:-6px -8px;border-radius:7px;
  font-size:13px;color:var(--muted);line-height:1.35;text-align:left}
.terminlink.gesetzt{color:var(--text)}
.terminlink:hover{border-color:var(--line2);background:var(--panel)}
.terminlink svg{width:14px;height:14px;color:var(--dim);flex:none}
.terminlink .tzwei{display:flex;flex-direction:column}
.terminlink .tzwei em{font-style:normal;font-size:12px;color:var(--dim)}
.terminlink.planen{border:1px solid var(--line2);background:var(--panel);color:var(--muted);
  margin:0;padding:0 12px;height:30px;font-size:12.5px;font-weight:550}
.terminlink.planen:hover{border-color:var(--text);color:var(--text)}

/* Nächster Schritt: ruhiger dunkler Link, Orange nur beim Hover */
.schrittlink{color:var(--text);font-weight:550;text-decoration:none;font-size:13.5px}
.schrittlink::after{content:" ›";color:var(--dim)}
.schrittlink:hover{color:var(--accentDark)}
.schrittlink.neutral{color:var(--muted);font-weight:450}
.schrittlink.neutral::after{content:""}

/* Aktionsbuttons in Tabellen: eine Höhe, eine Mindestbreite */
.btn.klein{height:34px;min-width:104px;justify-content:center}
.dreipunkt{width:34px;height:34px}

/* Hinweis-Spalte: einzeilig mit Ellipsis */
.tbl.kontakte td[data-l="Hinweis"]{max-width:150px;font-size:12.5px;color:var(--muted);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* Spaltenkontrolle Kontakte */
.tbl.kontakte th:nth-child(1){width:24%}
.tbl.kontakte th:nth-child(2){width:19%}
.tbl.kontakte th:nth-child(3){width:10%}
.tbl.kontakte th:nth-child(4){width:17%}
.tbl.kontakte th:nth-child(5){width:15%}

/* Filterchips: kleiner und ruhiger */
.chips{gap:6px}
.chip:not(.t-neutral):not(.t-blau):not(.t-orange):not(.t-gruen):not(.t-rot):not(.t-grau){
  height:30px;padding:0 11px;font-size:12.5px;font-weight:550;border-radius:7px;color:var(--muted)}
.chips .chip.active{background:var(--accentSoft);color:var(--accentDark);border-color:var(--accent);font-weight:650}
.chips .chip:not(.active):hover{border-color:var(--text);color:var(--text)}

/* KPI-Cards: harmonische Zahlen, ruhige Flächen */
.kpis.reihe .kpi{min-height:96px;padding:16px 20px 14px}
.kpis.reihe .kpi b{font-size:22px}
.kpis.reihe .kpi span{font-size:12px}

/* Dashboard-Raster: 12 Spalten, konfigurierbar */
.dashgrid{display:grid;grid-template-columns:repeat(12,1fr);gap:20px;align-items:start}
.dashgrid > *{min-width:0}
.dk-breit{grid-column:span 8}
.dk-seite{grid-column:span 4}
.dk-halb{grid-column:span 6}
.dk-voll{grid-column:span 12}
.dk-klein{grid-column:span 4}
@media (max-width:1000px){.dashgrid > *{grid-column:span 12 !important}}

/* Terminkarte: vier feste Spalten — Tag · Zeit · Titel · Quelle */
.terminzeile{grid-template-columns:64px 46px 1fr auto;gap:8px;align-items:baseline;padding:10px 0}
.terminwann{font-size:12.5px}
.terminwann.heute{color:var(--text)}
.terminwann.heute::before{content:"";display:inline-block;width:6px;height:6px;border-radius:50%;
  background:var(--accent);margin-right:5px;vertical-align:1px}
.terminzeit{font-size:12.5px;color:var(--muted);font-variant-numeric:tabular-nums}
.termintitel{white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;line-height:1.35}
.heutezeile .hz-titel{font-weight:600}

/* Dashboard-Bearbeitungsmodus */
body.dash-edit .dashgrid .dsek{outline:2px dashed var(--line2);outline-offset:2px;cursor:grab}
body.dash-edit .dashgrid .dsek.zieht{opacity:.5}
.dashwerkzeug{display:none;gap:6px;position:absolute;top:10px;right:12px}
body.dash-edit .dashwerkzeug{display:flex}
.dashgrid .dsek{position:relative}
.dashwerkzeug button{width:26px;height:26px;border:1px solid var(--line2);border-radius:6px;background:var(--panel);
  cursor:pointer;font-size:12px;color:var(--muted);line-height:1}
.dashwerkzeug button:hover{border-color:var(--text);color:var(--text)}
.dashleiste{display:flex;gap:8px;align-items:center}

/* Aktivitätsliste: kompakt mit Icon */
.aktzeile{display:flex;align-items:center;gap:10px;padding:8px 0;border-bottom:1px solid var(--hair);font-size:13px}
.aktzeile:last-child{border-bottom:none}
.aktzeile .ai{width:26px;height:26px;border-radius:7px;background:var(--panel2);display:inline-flex;
  align-items:center;justify-content:center;flex:none;color:var(--dim)}
.aktzeile .ai svg{width:13px;height:13px}
.aktzeile .at{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.aktzeile .aw{font-size:11.5px;color:var(--dim);white-space:nowrap}
.aktzeile a.ak{font-size:12px;white-space:nowrap}

/* Kundenportale-Übersicht */
.portalzeile-status{font-size:12.5px;color:var(--muted)}

/* Feinschliff Kontakttabelle: Selects lesbar, Aktionsspalte innerhalb der Karte */
.tbl.glatt td{padding:8px 10px}
.tbl th{padding:14px 10px}
.tbl .statussel{min-width:0;max-width:100%;font-size:12.5px;padding-right:22px}
.tbl.kontakte th:nth-child(2){width:21%}
.tbl.kontakte th:nth-child(3){width:8%}
.tbl.kontakte th:nth-child(6){width:11%}
.btn.klein{min-width:96px}
.aktionszeile{gap:4px}
.tablecard{padding:6px 10px}
.tbl.kontakte td[data-l="Hinweis"]{max-width:120px}

/* Dashboard: Hauptbereich 7, Seitenkarten 5 Spalten — mehr Luft für Termine */
.dk-breit{grid-column:span 7}
.dk-seite{grid-column:span 5}
.terminzeile{grid-template-columns:70px 44px 1fr auto}
.terminquelle{font-size:11px;max-width:92px;overflow:hidden;text-overflow:ellipsis}

/* Abo-Tabelle: eine verbindliche Spaltenaufteilung, Beträge einzeilig, Selects lesbar */
.betrag{white-space:nowrap;font-weight:550}
.tbl.abos th:nth-child(1){width:18%}
.tbl.abos th:nth-child(2){width:9%}
.tbl.abos th:nth-child(3){width:9%}
.tbl.abos th:nth-child(4){width:12%}
.tbl.abos th:nth-child(5){width:14%}
.tbl.abos th:nth-child(6){width:13%}
.tbl.abos th:nth-child(7){width:14%}
.tbl.abos th:nth-child(8){width:6%}
.tbl.abos .statussel{width:100%}
.tbl.abos td{white-space:nowrap}
.tbl.abos td:first-child{white-space:normal}

/* Spaltenbreiten verbindlich machen */
@media (min-width:761px){
  .tbl.abos,.tbl.kontakte{table-layout:fixed}
  .tbl.abos td,.tbl.kontakte td{overflow:hidden}
  .tbl.abos td:nth-child(9),.tbl.kontakte td:last-child{overflow:visible}
}
/* Mobil: leere Zellen der Kartenliste ausblenden */
@media (max-width:760px){
  .tbl.responsive td:empty{display:none}
  .toolbar .btn.primary{flex:1}
}

/* Korrektur: Aktionsspalte bekommt echte Breite, nichts ragt mehr aus der Karte */
.tbl.kontakte th:nth-child(1){width:20%}
.tbl.kontakte th:nth-child(2){width:17%}
.tbl.kontakte th:nth-child(3){width:7%}
.tbl.kontakte th:nth-child(4){width:15%}
.tbl.kontakte th:nth-child(5){width:13%}
.tbl.kontakte th:nth-child(6){width:11%}
.tbl.kontakte th.thaktion{width:17%}
.aktzelle{text-align:right}
.aktionszeile{justify-content:flex-end;flex-wrap:nowrap}

/* Kontakttabelle ohne Interesse-Spalte + bearbeitbarer Hinweis */
.tbl.kontakte.schmal th:nth-child(1){width:23%}
.tbl.kontakte.schmal th:nth-child(2){width:18%}
.tbl.kontakte.schmal th:nth-child(3){width:20%}
.tbl.kontakte.schmal th:nth-child(4){width:14%}
.tbl.kontakte.schmal th:nth-child(5){width:14%}
.tbl.kontakte.schmal th.thaktion{width:11%}
/* Hinweis wird direkt in der Zeile getippt: sieht aus wie Text, wird beim Fokus zum Feld */
.hinweisfeld{border:1px solid transparent;background:none;font:inherit;font-size:12.5px;color:var(--muted);
  padding:5px 7px;margin:-5px -7px;border-radius:6px;width:calc(100% + 14px);max-width:220px;
  text-overflow:ellipsis;transition:border-color .12s, background .12s}
/* Ein abgeleiteter Stand ist Information und bleibt sichtbar,
   die Einladung „Hinweis hinzufügen" erscheint erst beim Überfahren */
.hinweisfeld::placeholder{color:transparent}
.hinweisfeld.hatstand::placeholder{color:var(--muted)}
tr:hover .hinweisfeld::placeholder{color:var(--dim)}
tr:hover .hinweisfeld{border-color:var(--line)}
.hinweisfeld:focus{outline:none;border-color:var(--accent);background:var(--panel);color:var(--text)}
.hinweisfeld:focus::placeholder{color:var(--dim)}
.hinweisfeld.gesichert{border-color:var(--green);background:var(--greenSoft)}
.hinweisfeld.fehlge{border-color:var(--red);background:var(--redSoft)}

/* Aktueller Stand + Status-ändern-Dialog */
.standraster{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:16px 28px;align-items:start}
.standfeld{display:flex;flex-direction:column;gap:4px;min-width:0}
.standk{font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--dim);font-weight:600}
.standw{font-size:13.5px;line-height:1.45;min-width:0;overflow-wrap:anywhere;word-break:break-word}
.standlink{color:var(--accentDark);font-weight:600;text-decoration:none}
.standlink:hover{text-decoration:underline}
/* Offene Kundenaufgaben inline aufklappbar an der Kennzahl */
.standtasks summary{cursor:pointer;color:var(--accentDark);font-weight:600;list-style:none}
.standtasks summary::-webkit-details-marker{display:none}
.standtasks summary::before{content:"\25B8";margin-right:6px;font-size:11px;display:inline-block;transition:transform .15s}
.standtasks[open] summary::before{transform:rotate(90deg)}
.standtasks ul{margin:8px 0 6px;padding-left:2px;list-style:none;display:flex;flex-direction:column;gap:5px}
.standtasks li{font-size:13px;line-height:1.4;font-weight:400;color:var(--text);display:flex;align-items:flex-start;gap:8px}
.standtask-txt{flex:1;min-width:0}
.standtasks li form{margin:0;flex:none}
.standtask-del{border:0;background:none;color:var(--dim);cursor:pointer;font-size:15px;line-height:1;padding:0 2px;border-radius:4px}
.standtask-del:hover{color:var(--red)}
.standtasks .standlink{font-size:12.5px}
/* Stammdaten-Karte der Übersicht: links Hauptdaten in Reihe, rechts Nebendaten + Rechnungsadresse.
   Auf schmalen Screens einspaltig. Eingaben füllen die volle Feldbreite, nie abgeschnitten. */
.stammdaten-card .frow{align-items:center;min-height:44px}
.stammdaten-card .fv{min-width:0}
.stammdaten-card .afield{width:100%}
.stammdaten-card .feldpaar{display:flex;gap:10px}
.stammdaten-card .feldpaar .afield{flex:1;width:auto;min-width:0}
.stammcols{display:grid;grid-template-columns:1fr 1fr;gap:0 40px;align-items:start}
@media(max-width:760px){.stammcols{grid-template-columns:1fr;gap:0}}
.stammspalte{min-width:0}
.stammspalte .fk{width:150px}
#reblock{margin-top:2px}
.stammwarn{margin:4px 0 16px;padding:9px 13px;border-radius:8px;background:var(--accentSoft);border:1px solid var(--accent);color:var(--accentDark);font-size:13px;font-weight:600}
/* Status ändern: zentrierter Inhaltsbereich mit gruppierter Phasenwahl */
.swwrap{max-width:820px;margin:0 auto}
.swgruppe{margin:0 0 18px}
.swgtitel{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--dim);font-weight:650;margin:0 0 8px}
.swopts{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.editform label.swopt,.swopt{display:flex;align-items:center;gap:10px;border:1px solid var(--line2);border-radius:9px;
  background:var(--panel);padding:13px 16px;cursor:pointer;position:relative;margin:0}
.swopt input{position:absolute;opacity:0;pointer-events:none}
.swopt .swname{font-size:14px;font-weight:600;letter-spacing:-.1px}
.swopt::before{content:"";width:8px;height:8px;border-radius:50%;border:1.5px solid var(--line2);flex:0 0 auto;transition:background .12s,border-color .12s}
.swopt:hover{border-color:var(--text)}
.swopt:has(input:checked){border-color:#2a2622;background:#fbfaf7;box-shadow:inset 0 0 0 1px #2a2622}
.swopt:has(input:checked)::before{background:#2a2622;border-color:#2a2622}
.swjetzt{margin-left:auto;font-size:11px;font-weight:600;color:var(--dim);border:1px solid var(--hair);border-radius:99px;padding:2px 9px;background:var(--panel2)}
.swgruppe.leise{margin-top:26px;padding-top:16px;border-top:1px solid var(--hair)}
.swgruppe.leise .swopt{background:var(--panel2);border-color:var(--hair)}
.swgruppe.leise .swopt .swname{font-weight:500;color:var(--muted)}
.swgruppe.leise .swopt:hover{border-color:var(--muted)}
.swgruppe.leise .swopt:has(input:checked){border-color:#2a2622;box-shadow:inset 0 0 0 1px #2a2622;background:#fbfaf7}
.swgruppe.leise .swopt:has(input:checked) .swname{color:var(--text);font-weight:600}
.card.swzusatz{margin:0 0 14px;padding:16px 18px}
.swfolgen{background:var(--panel2);border:1px solid var(--hair);border-radius:9px;padding:13px 16px;margin:4px 0 0;font-size:13px}
.swfolgen b{font-size:12px;letter-spacing:.05em;text-transform:uppercase;color:var(--dim)}
.swfolgen ul{margin:6px 0 0 17px;padding:0}
.swfolgen li{margin:2px 0;color:var(--muted)}
.swleiste{margin-top:18px}
.swabbruch{font-size:13.5px;color:var(--muted);text-decoration:none;padding:9px 2px}
.swabbruch:hover{color:var(--text);text-decoration:underline}
@media (max-width:560px){.swopts{grid-template-columns:1fr}}

/* Konzept: Präsentations-Karte */
.card.zfpraesi{display:flex;align-items:center;gap:18px;justify-content:space-between;background:linear-gradient(180deg,#fffdf9,#fff)}
.card.zfpraesi .btn{white-space:nowrap;flex:0 0 auto}
@media (max-width:640px){.card.zfpraesi{flex-direction:column;align-items:flex-start}}

/* Konzept: Bausteine-Auswahl */
.zfbausteine{display:flex;gap:14px;align-items:flex-end;flex-wrap:wrap}
.zfbausteine label{display:flex;flex-direction:column;gap:5px;font-size:12.5px;font-weight:600;color:var(--muted);min-width:240px}
.zfbausteine select{background:var(--panel);border:1px solid var(--line2);border-radius:var(--rs);padding:9px 12px;font-size:14px;color:var(--text);font-family:inherit;font-weight:400}
.zfbausteine .btn{margin-bottom:1px}

/* Konzept: PDF-Versionsliste */
.zfversionen{display:flex;flex-direction:column}
.zfversion{display:flex;align-items:flex-start;gap:14px;padding:11px 0;border-bottom:1px solid var(--hair)}
.zfversion:last-child{border-bottom:none;padding-bottom:2px}
.zfv-mitte{flex:1;min-width:0;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.zfv-titel{font-weight:600;font-size:13.5px}
.zfv-meta{font-size:12.5px;color:var(--muted);width:100%}
.zfversion .aktionszeile{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end}

/* Gefahrenbereich */
.card.gefahr{border-color:#eed4cf}
.gefahrzeilen{display:flex;flex-direction:column}
.gefahrzeile{display:flex;align-items:center;gap:14px;padding:12px 0;border-bottom:1px solid var(--hair)}
.gefahrzeile:last-child{border-bottom:none}
.gefahrzeile > div{flex:1;min-width:0}
.gefahrzeile b{display:block;font-size:13.5px}
.gefahrzeile span{display:block;font-size:12.5px;color:var(--muted);margin-top:1px}
.phasenform select:disabled{opacity:.5}

/* Portal-Sidebar: Logo oben, Konto unten */
.knavi-logo{display:flex;justify-content:center;padding:8px 13px 18px}
.knavi-logo img{height:42px;display:block}
.knavi-konto{margin-top:14px;padding-top:12px;border-top:1px solid var(--hair);display:flex;flex-direction:column;gap:2px}
.knavi-konto-titel{font-size:10.5px;letter-spacing:.09em;text-transform:uppercase;color:var(--dim);font-weight:650;padding:0 13px 5px}
.knavi-konto a{padding:7px 13px;border-radius:8px;font-size:12.5px;color:var(--dim);text-decoration:none}
.knavi-konto a:hover{background:var(--panel2);color:var(--text)}
/* Logo und Konto bleiben auf Mobil sichtbar: Logo in der Kopfzeile, Konto im Klapp-Menü (siehe .kmpanel) */

/* Startseiten-Begrüßung im Kundenportal */
.kgruss2{margin:6px 0 18px}
.kgruss2-zeile{font-size:30px;font-weight:600;letter-spacing:-.5px;margin:0}
.kgruss2-sub{margin:3px 0 0;color:var(--muted);font-size:14px}

/* ================= Onboarding-Typografie: ruhige Hierarchie, klare Abstände ================= */
/* Eingabewerte nie fett — sie erbten bisher das Gewicht des Labels über font:inherit */
.obfeld input,.obfeld input:not([type]),.obfeld textarea,.obfeld select{font-weight:400;padding:10px 12px;font-size:14px}
.editform label.obfeld{font-weight:400}
.obcard .obtitel{font-size:20px;letter-spacing:-.3px;margin:0 0 6px}
.obcard .obhint{margin:0 0 24px;color:var(--muted);line-height:1.6;max-width:640px}
.editform .obfeld{margin:0 0 22px}
.oblabel{font-size:13.5px;font-weight:600;color:var(--text);margin:0 0 5px}
.obpflicht{font-size:12px;font-weight:600;color:var(--accent);margin-left:1px}
.obvorbefuellt{font-size:11px;color:var(--dim);font-weight:400;margin:2px 0 6px}
.obnote.klein{font-size:12.5px;color:var(--dim);margin:3px 0 10px}
.obcard .rsec{margin:26px 0 12px}
.obcard .optrow{margin-top:4px}

/* Schrittanzeige: erledigt = Haken, aktuell = klar markiert, offen = neutral */
.obprozess{margin-top:18px}

/* ================= Kontakttabelle ruhiger: eine Aktion je Zeile, klare Spalten ================= */
/* Name darf auf zwei Zeilen umbrechen, erst danach wird gekürzt — die Zeilen sind hoch genug */
.tbl .firmenname{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;white-space:normal;overflow:hidden;text-overflow:ellipsis;max-width:none}
.tbl.kontakte .zelle2{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tbl.kontakte .aktzelle .btn.klein{min-width:0;white-space:nowrap}
@media (min-width:761px){
  .tbl.kontakte.schmal th:nth-child(1){width:25%}
  .tbl.kontakte.schmal th:nth-child(2){width:20%}
  .tbl.kontakte.schmal th:nth-child(3){width:16%}
  .tbl.kontakte.schmal th:nth-child(4){width:13%}
  .tbl.kontakte.schmal th:nth-child(5){width:14%}
  .tbl.kontakte.schmal th:nth-child(6){width:12%}
  .tbl.kontakte:not(.schmal) th:nth-child(1){width:23%}
  .tbl.kontakte:not(.schmal) th:nth-child(2){width:15%}
  .tbl.kontakte:not(.schmal) th:nth-child(3){width:11%}
  .tbl.kontakte:not(.schmal) th:nth-child(4){width:14%}
  .tbl.kontakte:not(.schmal) th:nth-child(5){width:13%}
  .tbl.kontakte:not(.schmal) th:nth-child(6){width:12%}
  .tbl.kontakte:not(.schmal) th:nth-child(7){width:12%}
}

/* Portal-Tab: Sichtbarkeitsraster Startseite/Menü */
.sichtraster{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:4px 18px}
.sichtraster .check{margin:0;font-size:13.5px}

/* ================= Feinschliff-Runde A (12.07.): Dashboard-Raster, Onboarding-Karten, Abschlussseite ================= */

/* A1: Dashboard — Karten gleicher Zeilen exakt gleich hoch, einheitliche Abstände, ruhige Kopfleiste */
.dashgrid{align-items:stretch}
.dashgrid > .card{height:100%;display:flex;flex-direction:column;margin:0}
.dashgrid > .card > .actions,.dashgrid > .card > .dashliste{flex:1}
.dash-kopfleiste .btn,.dash-kopfleiste summary.btn{height:36px;display:inline-flex;align-items:center;padding:0 14px;font-size:13px}

/* A7/A9: Auswahlkarten ruhiger — weniger Rundung, dezente Auswahl, gleiche Höhen, klare Hierarchie */
.obkarten{align-items:stretch}
.obkarte{border-radius:8px;border:1px solid var(--line);background:var(--panel);padding:14px 15px 13px;height:100%;transition:border-color .12s,background .12s}
.obkarte:hover{border-color:#cbbfa8;box-shadow:none}
.obkarte.an{border-color:var(--accent);background:#fffaf4;box-shadow:none}
.obkarte-titel{font-weight:600;font-size:14px;line-height:1.3}
.obkarte.an .obkarte-titel::after{content:" ✓";color:var(--accent);font-weight:700}
.obkarte-sub{font-size:12.5px;font-weight:400;color:var(--muted);line-height:1.45;margin-top:2px}
.obkarte input:focus-visible + .obkarte-titel{outline:2px solid var(--accent)}

/* A7: automatisch enthaltene Seiten dezent orange als „bereits drin" */
.obkarte.fest{border:1px solid #f0dcc4;border-style:solid;background:#fdf8f1;cursor:default}
.obkarte.fest .obkarte-titel{color:#8a5a1e}
.obfest{display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:650;letter-spacing:.04em;
  color:#b35c14;background:#f9ecd9;border-radius:99px;padding:2.5px 9px;margin-top:6px}
.obfest::before{content:"✓"}

/* A6: Beispieltexte ruhig und untergeordnet */
.obnote,.obnote.klein{font-weight:400}
.obnote b{font-weight:600}

/* A9: deutlich mehr Luft zwischen Kartengruppen und Folgefragen */

.obfeld[data-seitenwahl] + .obfeld,.obkarten + .obfeld{margin-top:26px}
.obcard .obfeld .obkarten{margin-top:6px}

/* A10: Upload-Blöcke einheitlich, Status als ruhiges Chip in der Kopfzeile */
.upblock{border-radius:10px;padding:16px 18px 14px}
.upblock-kopf{align-items:center}
.upblock-status{font-size:11.5px;font-weight:600;color:var(--dim);background:var(--panel2);
  border:1px solid var(--hair);border-radius:99px;padding:3px 10px;white-space:nowrap;flex:0 0 auto}
.upblock.voll .upblock-status{color:var(--green);background:var(--greenSoft);border-color:#cfe5d6}
.upblock-beispiele{display:block;font-size:11.5px;color:var(--dim);margin-top:2px}
.updrop{border-radius:8px}
.obrefs{margin-bottom:30px}
.obref-neu > summary.btn{display:inline-flex;align-items:center;height:38px;padding:0 18px;font-size:13.5px;
  border:1px solid var(--line2);background:var(--panel);border-radius:8px}
.obref-neu[open] > summary.btn{border-color:var(--accent);color:var(--accentDark)}

/* A10: Seitenleiste „Gut zu wissen" — breiter, ruhig lesbar.
   Nur ab 901px zweispaltig, damit die Mobil-Umstellung (max-width:900px) nicht überschrieben wird. */
@media (min-width:901px){.obhaupt.mit-seite{grid-template-columns:minmax(0,1fr) 300px}}
.obseite-karte{padding:18px 20px}
.obseite-karte p{font-size:13px;line-height:1.6;color:#4a4540}
.obseite-klein{line-height:1.55}

/* A5: Schrittanzeige — klare Zustände, feine Linien, Serif-Ziffern */

/* A11: E-Mail-Auswahl-Chips */
.obmailchips{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.obmailchip{border:1px solid var(--line2);background:var(--panel);border-radius:99px;padding:5px 12px;
  font-size:12.5px;cursor:pointer;font-family:inherit;color:var(--muted)}
.obmailchip:hover{border-color:var(--text);color:var(--text)}
.obmailchip.an{border-color:var(--accent);background:#fffaf4;color:var(--accentDark);font-weight:600}
.obmailchip.an::after{content:" ✓"}

/* A13: Abschlussseite — neutrale Flächen, klare Status, einheitliche Bearbeiten-Aktionen */
.obzus{display:flex;flex-direction:column;gap:10px}
.obzus-karte{background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:14px 16px}
.obzus-karte.offen{background:var(--panel);border-color:var(--line)}
.obzus-kopf{display:flex;align-items:center;gap:10px}
.obzus-kopf b{font-size:14px;flex:1;min-width:0}
/* Status als ruhiger Text statt Pille — Farben nur als Textakzent */
.obzus-chip{font-size:12px;font-weight:650;white-space:nowrap}
.obzus-chip.voll{color:var(--green)}
.obzus-chip.auf{color:var(--accentDark)}
.obzus-chip.frei{color:var(--dim);font-weight:500}
.obzus-edit{min-width:92px;text-align:center}
.obzus-wert{display:flex;gap:10px;font-size:12.5px;padding:3px 0;color:var(--text)}
.obzus-wert span{flex:0 0 190px;color:var(--dim)}
.obzus-werte{margin-top:8px;border-top:1px solid var(--hair);padding-top:8px}
.obzus-hinweis{border-radius:10px;padding:13px 16px;margin-top:16px;font-size:13.5px;border:1px solid var(--line)}
.obzus-hinweis.fertig{background:var(--greenSoft);border-color:#cfe5d6;color:var(--green)}
.obzus-hinweis.offen{background:var(--panel2);border-color:#ecdcbe;color:#7a5200}

/* A14: Konto-Bereich — nur noch Abmelden, klar abgesetzt */
.knavi-abmelden{color:var(--dim);font-size:12.5px}
.knavi-konto{border-top:1px solid var(--hair);margin-top:18px;padding-top:10px}

/* ================= Paket B: Schalter, Zugangskarten, Anforderungen ================= */
.schalterliste{display:flex;flex-direction:column}
.schalterzeile{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:9px 2px;
  border-bottom:1px solid var(--hair);cursor:pointer;font-size:13.5px;margin:0}
.schalterzeile:last-child{border-bottom:none}
.schalter{appearance:none;width:38px;height:22px;border-radius:99px;background:var(--line2);position:relative;
  cursor:pointer;transition:background .15s;flex:0 0 auto;margin:0}
.schalter::after{content:"";position:absolute;top:3px;left:3px;width:16px;height:16px;border-radius:50%;
  background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.25);transition:left .15s}
.schalter:checked{background:var(--accent)}
.schalter:checked::after{left:19px}

.zaliste{display:flex;flex-direction:column;gap:10px}
.zakarte{border:1px solid var(--line);border-radius:10px;padding:13px 15px;background:var(--panel)}
.zakopf{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.zakopf b{font-size:14px}
.zatext{font-size:13px;color:var(--muted);margin-top:5px}
.zanachricht{font-size:13px;background:var(--panel2);border-radius:8px;padding:8px 11px;margin-top:8px}
.zaakt{display:flex;gap:8px;align-items:center;margin-top:10px}
.zaakt select{font-size:12.5px;padding:6px 26px 6px 10px}
.zaneu > summary{list-style:none;cursor:pointer}
.zaneu > summary::-webkit-details-marker{display:none}

.kanforderungen{display:flex;flex-direction:column;gap:10px}
.kanforderung{border:1px solid #f0dcc4;background:#fffaf2;border-radius:10px;padding:13px 15px}
.kanf-mitte b{font-size:14.5px}
.kanf-text{display:block;font-size:13.5px;color:#4a4540;margin-top:3px;line-height:1.55}
.kanf-akt{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-top:10px}
.zahilfe > summary{list-style:none;cursor:pointer;display:inline-flex}
.zahilfe > summary::-webkit-details-marker{display:none}
.obantworten{border:1px solid var(--line);border-radius:9px;margin:0 0 8px;background:var(--panel)}
.obantworten > summary{padding:10px 14px;cursor:pointer;font-weight:600;font-size:13.5px;list-style:none}
.obantworten > summary::-webkit-details-marker{display:none}
.obantworten .obzus-werte{padding:0 14px 12px;margin-top:0}

/* ================= A16: Kundenportal ruhiger und hochwertiger ================= */
.kdash{gap:26px}
.kdash-haupt > .card{border-radius:10px}



/* ================= Dashboard-Raster (verbindlich, 12 Spalten, feste Höhen) — überschreibt alle früheren dashgrid/dk-Regeln ================= */

/* Kopfleiste rechts über dem Raster */
.dashkopf{display:flex;justify-content:flex-end;align-items:center;gap:10px;margin:0 0 16px}
.dashkopf .toolbtn,.dashkopf .btn,.dashkopf summary.toolbtn{height:40px;display:inline-flex;align-items:center;
  padding:0 16px;font-size:13px;border-radius:8px;line-height:1}
.dashkopf .zeilenmenu{position:relative}
.dashkopf .zeilenmenu-liste{position:absolute;right:0;top:44px;z-index:20;background:var(--panel);
  border:1px solid var(--line);border-radius:8px;box-shadow:0 12px 28px rgba(20,20,18,.12);padding:6px;min-width:220px}
.dashkopf .zeilenmenu-liste a{display:block;padding:8px 10px;border-radius:6px;font-size:13px;color:var(--text)}
.dashkopf .zeilenmenu-liste a:hover{background:var(--panel2)}

/* Statuszeile (drei KPI-Kacheln) bündig über dem Raster: 3 × 4 Spalten, Höhe Kompakt */
.kpis.drei{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin:2px 0 20px}
.kpis.drei .kpi{gap:14px;padding:16px 18px;border:1px solid var(--hair);border-radius:10px;background:var(--panel)}
.kpis.drei .kpi .kpi-txt b{font-size:15px;font-weight:600;letter-spacing:-.1px;color:var(--text)}
.kpis.drei .kpi .kpi-txt > span{font-size:13.5px;font-weight:400;color:var(--muted);text-transform:none;letter-spacing:0;line-height:1.4}

/* Das Raster */
.dashgrid{display:grid;grid-template-columns:repeat(12,1fr);gap:20px;align-items:start;margin:0}
.dashgrid > *{min-width:0}
.dk-4{grid-column:span 4}
.dk-6{grid-column:span 6}
.dk-8{grid-column:span 8}
.dk-12{grid-column:span 12}

/* Feste Kartenhöhen mit internem Scroll — Karten einer Zeile teilen sich dieselbe Höhenklasse */
.dashgrid .dsek{position:relative;height:168px;margin:0;padding:20px;overflow-y:auto;overflow-x:hidden;
  background:var(--panel);border:1px solid var(--line);border-radius:10px;box-shadow:none;display:block}
.dk-h-kompakt .dsek{height:104px}
.dk-h-standard .dsek{height:168px}
.dk-h-gross .dsek{height:248px}
.dashgrid .dsek::-webkit-scrollbar{width:6px}
.dashgrid .dsek::-webkit-scrollbar-thumb{background:var(--line2);border-radius:3px}
.dashgrid .dsek::-webkit-scrollbar-track{background:transparent}

/* Titel bleibt beim internen Scrollen oben stehen.
   Wichtig: negative Ränder + eigenes Padding, damit er die Innenabstands-Zone der Karte
   VOLL abdeckt — sonst scrollen die Zeilen sichtbar über und hinter den Kopf. */
.dashgrid .dsek-titel{position:sticky;top:-20px;z-index:2;background:var(--panel);
  margin:-20px -20px 10px;padding:20px 20px 8px;border-radius:10px 10px 0 0;
  display:flex;align-items:baseline;gap:8px;font-size:15px;font-weight:600;letter-spacing:-.1px}
.dashgrid .dsek-titel .mehr,.dashgrid .dsek-titel .hbcount{margin-left:auto;font-size:13px;font-weight:400;color:var(--muted)}
.dashgrid .dsek-titel .hbcount{margin-left:8px;min-width:20px;height:20px;padding:0 6px;border-radius:10px;
  background:var(--panel2);color:var(--muted);display:inline-flex;align-items:center;justify-content:center;font-size:12px}

/* Listenzeilen: einheitliche Höhe, Trenner statt Abstand */
.dashgrid .heutezeile,.dashgrid .terminzeile,.dashgrid .hbzeile,.dashgrid .aktzeile,
.dashgrid .proj,.dashgrid .action,.dashgrid .notizzeile{min-height:44px;padding:0;
  border-bottom:1px solid var(--hair);margin:0}
.dashgrid .heutezeile,.dashgrid .hbzeile,.dashgrid .aktzeile,.dashgrid .proj,
.dashgrid .action,.dashgrid .notizzeile{display:flex;align-items:center;gap:12px}
.dashgrid .heutezeile:last-child,.dashgrid .terminzeile:last-child,.dashgrid .hbzeile:last-child,
.dashgrid .aktzeile:last-child,.dashgrid .proj:last-child,.dashgrid .action:last-child,
.dashgrid .notizzeile:last-child{border-bottom:none}
.dashgrid .projlist,.dashgrid .actions,.dashgrid #notizliste{display:flex;flex-direction:column}
.dashgrid .leerzeile,.dashgrid .lmut.leerzeile{padding:2px 0 0;font-size:13px;color:var(--muted)}
.dashgrid .kompaktreihe{display:flex;gap:8px;flex-wrap:wrap;margin:0}
.dashgrid .stickyadd{margin:0 0 14px}

/* Sekundärtexte einheitlich */
.dashgrid .lmut,.dashgrid .terminquelle,.dashgrid .htyp{font-size:13px;font-weight:400;color:var(--muted)}

/* Bearbeitungsmodus: Werkzeuge, Drag-Zustand */
.dashgrid .dsek{scroll-padding-top:40px}
body.dash-edit .dashgrid .dsek{outline:2px dashed var(--line2);outline-offset:-2px;cursor:grab}
body.dash-edit .dashgrid .dsek.zieht{opacity:.5}
/* Zweite Werkzeug-Generation komplett entfernt (float/sticky zerriss die Kartenköpfe) — es gilt die absolute Version */

/* Responsive: Tablet 2 Spalten (Reihen gleich hoch), Mobil 1 Spalte ohne erzwungene Höhe */
@media (max-width:1000px){
  .dashgrid{grid-template-columns:repeat(2,1fr) !important;align-items:stretch}
  .dashgrid > *{grid-column:span 1 !important}
  .dashgrid .dsek{height:100%;min-height:168px;overflow-y:auto}
  .dk-h-kompakt .dsek{min-height:120px}
  .dk-h-gross .dsek{min-height:220px}
  .kpis.drei{grid-template-columns:repeat(3,1fr)}
}
@media (max-width:640px){
  .dashgrid{grid-template-columns:1fr !important}
  .dashgrid > *{grid-column:span 1 !important}
  .dashgrid .dsek{height:auto;min-height:0;overflow:visible}
  .dashgrid .dsek-titel{position:static}
  .kpis.drei{grid-template-columns:1fr}
  .kpis.drei .kpi{height:auto;min-height:74px}
}

/* ================= Onboarding: verbindliches Typografie- und Abstandssystem (überschreibt frühere Regeln) ================= */

/* Seitenüberschrift */
.obcard .obtitel{font-size:24px;line-height:1.25;font-weight:680;letter-spacing:-.01em;margin:0 0 8px;color:var(--text)}
/* Subline unter der Seitenüberschrift */
.obcard .obhint{font-size:16px;line-height:1.55;font-weight:400;color:var(--muted);max-width:680px;margin:0 0 30px}
/* Abschnittsüberschrift innerhalb einer Seite — klar als Sektion, nicht wie ein Feldlabel */
.obcard .obbereich,.obcard .rsec.obbereich{font-size:18px;line-height:1.35;font-weight:600;color:var(--text);
  text-transform:none;letter-spacing:0;margin:32px 0 14px;padding:0;border:none}
.obcard form > .obfeld-wrap:first-child .obbereich{margin-top:8px}
/* Feldlabel oder Frage */
.obcard .oblabel{display:block;font-size:14px;line-height:1.4;font-weight:600;color:var(--text);margin:0 0 8px}
/* Hilfetext und Beispiele — nie fett, dezent, begrenzte Breite */
.obcard .obnote{font-size:14px;line-height:1.55;font-weight:400;color:var(--muted);max-width:680px;margin:0 0 14px}
.obcard .obnote.klein{font-size:14px;color:var(--muted);margin:0 0 12px}
.obcard .obnote b,.obcard .obnote strong{font-weight:600}
/* Eingabefelder und Auswahl — einheitliche Höhe, keine fetten Werte */
.obcard .obfeld{margin:0 0 26px}
.obcard .obfeld input[type=text],.obcard .obfeld input:not([type]),.obcard .obfeld textarea,.obcard .obfeld select{
  font-size:14px;font-weight:400;line-height:1.4;padding:10px 12px;border:1px solid var(--line2);border-radius:8px;width:100%}
.obcard .obfeld textarea{field-sizing:content;min-height:44px;resize:vertical}
.obcard .obfeld .optrow{display:flex;flex-wrap:wrap;gap:8px}
/* Beispieltext unter „Deine Leistungen" (Punkt 4): note_ueber dezent, Abstand zum Button */
.obcard .obfeld .obnote{margin:8px 0 18px}

/* Fortschrittsanzeige (Stepper) — besucht/aktuell/kommend klar unterscheidbar */
.obprozess{display:flex;align-items:flex-start;margin-top:18px}
.obpz{flex:1;display:flex;flex-direction:column;align-items:center;gap:7px;text-decoration:none;position:relative;min-width:0}
.obpz::before{content:"";position:absolute;top:13px;right:50%;width:100%;height:2px;background:#e2ddd2}
.obpz:first-child::before{display:none}
/* Verbindungslinie: durchlaufen + aktuell dunkel, zukünftig hell */
.obpz.vorbei::before,.obpz.now::before{background:#2a2622}
.obpz.kommend::before{background:#e2ddd2}
.obpz-dot{width:26px;height:26px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  font-size:13px;font-weight:600;box-shadow:none;position:relative;z-index:1}
/* kommend: neutraler heller Kreis, dezente Zahl */
.obpz.kommend .obpz-dot{background:var(--panel);border:2px solid #d8d3c8;color:#a49d8e}
.obpz.kommend .obpz-name{color:#a49d8e;font-weight:400}
/* besucht: dunkler Kreis, weiße Zahl oder Haken, dunklere Beschriftung */
.obpz.vorbei .obpz-dot{background:#2a2622;border:2px solid #2a2622;color:#fff}
.obpz.vorbei .obpz-name{color:var(--text);font-weight:500}
/* aktuell: voll dunkler Kreis, weiße Zahl, Beschriftung hervorgehoben */
.obpz.now .obpz-dot{background:#2a2622;border:2px solid #2a2622;color:#fff}
.obpz.now .obpz-name{color:var(--text);font-weight:650}
/* abgeschlossen (Haken) */
.obpz.done .obpz-dot{background:#2a2622;border:2px solid #2a2622;color:#fff}
.obpz-name{font-size:12.5px;color:var(--muted);max-width:100%;text-align:center;line-height:1.25}
@media (max-width:560px){
  .obpz-name{font-size:11px;hyphens:auto;overflow-wrap:break-word}
}
.obbalken.breit{height:6px;border-radius:3px;background:#ece4d7;overflow:hidden;margin:12px 0 14px}
.obbalken.breit span{display:block;height:100%;background:var(--accent);border-radius:3px;transition:width .3s}

/* Stil und Design entzerren (Punkt 7): Cards ruhig, klare Abstände */
.obcard .obkarten{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:12px;margin:12px 0 36px}
.obcard .obkarte{display:flex;flex-direction:column;gap:4px;padding:14px 15px;border:1px solid var(--line);border-radius:8px;
  background:var(--panel);min-height:76px;transition:border-color .12s,background .12s}
.obcard .obkarte:hover{border-color:#cbbfa8;box-shadow:none}
.obcard .obkarte.an{border-color:var(--accent);background:#fffaf4;box-shadow:none}
.obcard .obkarte-titel{font-size:15px;font-weight:600;line-height:1.3}
.obcard .obkarte-sub{font-size:13.5px;font-weight:400;color:var(--muted);line-height:1.45}
.obcard .obkarte.an .obkarte-titel::after{content:" ✓";color:var(--accent)}

/* Abschlussseite entzerren (Punkt 8/9) */
.obcard .obzus{display:flex;flex-direction:column;gap:14px;margin:14px 0 28px}
.obcard .obzus-karte{border:1px solid var(--line);border-radius:8px;padding:16px 18px;background:var(--panel)}
.obcard .obzus-kopf{display:flex;align-items:center;gap:10px;margin:0}
.obcard .obzus-kopf b{font-size:15px;font-weight:600}
.obcard .obzus-edit{margin-left:auto}
.obcard .obzus-chip{font-size:12px;padding:2px 9px;border-radius:11px}
.obcard .obzus-werte{margin-top:10px;display:flex;flex-direction:column;gap:6px}
.obcard .obzus-wert{display:flex;gap:10px;font-size:13.5px;line-height:1.5}
.obcard .obzus-wert span{color:var(--muted);min-width:120px;flex:none}
.obcard .obzus-hinweis{margin:20px 0 8px;padding:14px 16px;border-radius:8px;line-height:1.55;font-size:14px}
.obcard .obzus-hinweis.offen{background:#fdf3e8;border:1px solid #f0dcc0}
.obcard .obzus-hinweis.fertig{background:#eef7f0;border:1px solid #cfe8d6}

/* Onboarding Punkt 10: Zwischenstand-Bestätigung + professionelle Pflichtfeld-Markierung.
   Nur die tatsächlichen Eingaben/Auswahlen werden markiert, nie der ganze Fragenblock. */
.obfeld-wrap{display:contents}
.ob-zwstatus{margin-left:12px;font-size:13px;color:#1e7d43;font-weight:500}
.obcard .ob-pflicht-ziel{scroll-margin-top:80px}
.obcard .ob-ist-offen>input:not([type="hidden"]),.obcard .ob-ist-offen>textarea,
.obcard .ob-ist-offen>select{border-color:#dfa85e;background:#fffdf9}
.obcard .ob-ist-offen .opt,.obcard .ob-ist-offen .obkarte{
  border-color:#dfa85e;background:#fffdf9}
.obcard .ob-ist-offen.obcheckzeile{border-color:#dfa85e;background:#fffdf9}

/* Onboarding Punkt 11: „Noch zu erledigen" — geführte, komplett klickbare Zeilen */
.kaufgaben{display:flex;flex-direction:column;gap:10px;margin-top:4px}
.kaufgabe{display:flex;align-items:center;gap:16px;padding:18px 20px;border:1px solid var(--line);border-radius:10px;
  background:var(--panel);text-decoration:none;color:inherit;transition:border-color .12s,background .12s;min-height:64px}
a.kaufgabe:hover{border-color:var(--accent);background:#fffaf4}
.kaufgabe-mitte{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
.kaufgabe-titel{font-size:14px;font-weight:600;line-height:1.35;color:var(--text)}
.kaufgabe-erkl{font-size:13px;font-weight:400;line-height:1.5;color:var(--muted)}
.kaufgabe-aktion{flex:none;display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:600;color:var(--accent);white-space:nowrap}
.kaufgabe-pfeil{font-size:15px;transition:transform .12s}
a.kaufgabe:hover .kaufgabe-pfeil{transform:translateX(3px)}
@media (max-width:640px){
  .kaufgabe{flex-direction:column;align-items:flex-start;gap:10px}
  .kaufgabe-aktion{align-self:flex-end}
}

/* ================= Etappe 1: Onboarding-Feinschliff ================= */

/* Stepper in Orange: durchlaufen + aktuell orange, kommend hell — kein separater Balken mehr */
.obprozess{margin-top:22px}
.obpz.vorbei::before,.obpz.now::before{background:var(--accent)}
.obpz.vorbei .obpz-dot,.obpz.now .obpz-dot,.obpz.done .obpz-dot{background:var(--accent);border-color:var(--accent);color:#fff}
.obpz.now .obpz-dot{width:30px;height:30px;font-size:14px}
.obpz.now::before{top:15px}
.obpz.now + .obpz::before{top:15px}
.obpz.vorbei .obpz-name{color:var(--text);font-weight:500}
.obpz.now .obpz-name{color:var(--text);font-weight:650}
.obpz.kommend .obpz-name{color:#a49d8e;font-weight:400}

/* HTML-Hilfetexte (Beispiele, Leitfragen) */
.obnote-html{max-width:680px;margin:0 0 16px}
.obnote-html .obnote{margin:0 0 8px}
.obbeispiel{max-width:680px;margin:2px 0 0}
.obbeispiel>summary{cursor:pointer;color:var(--muted);font-weight:500;font-size:13px;width:fit-content;text-decoration:underline;text-underline-offset:2px;list-style:none}
.obbeispiel>summary::-webkit-details-marker{display:none}
.obbeispiel>summary:hover{color:var(--text)}
.obbeispiel-box{margin:10px 0 0;padding:4px 16px 8px;border:1px solid #efe7d8;border-radius:10px;background:#faf6ef}
.obbeispiel-titel{margin:10px 0 2px;font-size:11.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:#a79f8f}
.obbeispiel-item{border-top:1px solid #ece3d2}
.obbeispiel-item>summary{cursor:pointer;padding:11px 2px;font-size:14px;font-weight:600;color:#2c2925;list-style:none;display:flex;align-items:center;gap:9px}
.obbeispiel-item>summary::-webkit-details-marker{display:none}
.obbeispiel-item>summary::before{content:"\203a";color:#b9ac93;font-weight:700;font-size:16px;line-height:1;transition:transform .15s}
.obbeispiel-item[open]>summary::before{transform:rotate(90deg)}
.obbeispiel-detail{padding:0 0 13px 17px}
.obbeispiel-detail p{display:flex;align-items:flex-start;gap:12px;margin:0 0 7px;font-size:13px;line-height:1.5;color:#6b6459}
.obbeispiel-detail p:last-child{margin-bottom:0}
.obbeispiel-detail b{flex:none;width:96px;color:#2c2925;font-weight:600;font-size:12px;padding-top:1px}
.obbeispiel-detail.breit b{width:132px}
.obbeispiel-box{background:var(--panel2);border-radius:8px;padding:12px 16px;margin:0 0 12px;max-width:640px}
.obbeispiel{line-height:1.6;margin:0;font-size:14px;color:var(--muted)}
.obbeispiel + .obbeispiel{margin-top:4px}
.obbeispiel b{font-weight:650;color:var(--text);margin-right:6px}
.obfragenliste{margin:0 0 12px;padding-left:18px;max-width:680px;color:var(--muted);font-size:14px;line-height:1.6}
.obfragenliste li{margin:0 0 2px}

/* Hilfetext direkt unter dem Feld (z. B. Gestaltungs-No-Gos) */
.obcard label.obfeld:has(+ .obnote.klein){margin-bottom:8px}
.obcard label.obfeld + .obnote.klein{margin:0 0 26px}

/* Abschnittsüberschrift → erste Frage kompakter (Domain und Hosting) */
.obcard .obbereich{margin:32px 0 16px}

/* Abschluss: Warnhinweis mit Luft zum nächsten Bereich */
.obcard .obzus-hinweis{margin:20px 0 32px}

/* Datei-Beschreibungen im Upload-Block */
.updatei-beschrzeile{display:flex;align-items:center;gap:8px;margin-top:6px}
.updatei-beschr{flex:1;min-width:0;font-size:13px;padding:7px 10px;border:1px solid var(--hair);border-radius:7px;background:var(--panel)}
.updatei-beschr:focus{outline:none;border-color:var(--accent)}
.updatei-beschr::placeholder{color:#b3aa99;font-size:12.5px}
.updatei-beschr-ok{flex:none;font-size:12px;color:#1e7d43;white-space:nowrap}
.updatei{align-items:flex-start}
.updatei .updatei-mitte{flex:1;min-width:0}

/* ================= Etappe 2: Portalvorgänge ================= */
.vgkopf{display:flex;align-items:center;gap:12px;margin:0 0 10px}
.vgkopf h3{margin:0;flex:1}
/* .hintline bringt -6px Eigenabstand mit (für den Einsatz nach h3) — nach der Kopfzeile mit Button neutralisieren */
.vgkopf + .hintline{margin-top:0}
.vgbadge{display:inline-flex;align-items:center;padding:2px 9px;border-radius:10px;font-size:11.5px;font-weight:600;white-space:nowrap}
.vgbadge.grau{background:#f0efec;color:#8a857c}
.vgbadge.neutral{background:#f0efec;color:#5d584f}
.vgbadge.blau{background:#e8eff7;color:#2c5a86}
.vgbadge.orange{background:#fdf0e3;color:#b5700a}
.vgbadge.gruen{background:#e9f5ec;color:#1e7d43}
.vgbadge.rot{background:#fbeae6;color:#b3402a}
.vgliste{display:flex;flex-direction:column;gap:10px;margin-top:10px}
.vgzeile{border:1px solid var(--line);border-radius:10px;background:var(--panel)}
.vgzeile summary{display:flex;align-items:center;gap:12px;padding:16px 18px;cursor:pointer;list-style:none;min-height:44px;flex-wrap:wrap}
.vgzeile summary::-webkit-details-marker{display:none}
.vgzeile[open]{border-color:var(--line2)}
/* Kategorie eines Vorgangs: sagt auf einen Blick, worum es geht.
   Gedeckte Töne je Art, damit die Zeile ruhig bleibt und der Status führt. */
.vgz-kat{display:inline-flex;align-items:center;gap:6px;flex:none;min-width:158px;
  font-size:11.5px;font-weight:600;letter-spacing:.01em;color:var(--muted)}
.vgz-kat::after{content:"";flex:none;width:5px;height:5px;border-radius:50%;background:currentColor;opacity:.5;order:-1;margin-right:1px}
.vgz-kat.k-freigabe{color:#6741d9}
.vgz-kat.k-frage{color:#2c5a86}
.vgz-kat.k-aenderung{color:#b5700a}
.vgz-kat.k-problem{color:#b3402a}
.vgz-kat.k-anliegen,.vgz-kat.k-sonstiges{color:#6f7378}
.vgz-kat.k-zugang,.vgz-kat.k-datei,.vgz-kat.k-info{color:#5d584f}
.vgz-led{flex:none;width:7px;height:7px;border-radius:50%;background:var(--accent);order:-2;animation:hbpuls 1.6s ease-in-out infinite}
.vgz-titel{font-size:14.5px;font-weight:600;flex:1;min-width:180px}
.vgz-meta{font-size:12px;color:var(--dim);white-space:nowrap}
.vgz-body{padding:0 18px 16px;border-top:1px solid var(--hair);margin-top:0;padding-top:14px}
.vgz-beschr{margin:0 0 10px;max-width:680px;line-height:1.55}
.vgz-antwort{background:var(--panel2);border-radius:8px;padding:12px 14px;margin:10px 0}
.vgz-antwort b{font-size:12.5px;color:var(--muted)}
.vgz-antwort p{margin:4px 0 0;line-height:1.55}
.vgz-aktionen{display:flex;gap:8px;flex-wrap:wrap;margin-top:20px;padding-top:16px;border-top:1px solid var(--hair);align-items:center}
.vgz-statusform{display:inline-flex}
/* Preis-Angebot im Verlauf: der Betrag führt, die Entscheidung steht daneben */
.vgkangebot{border:1px solid var(--line);border-radius:var(--r);padding:12px 14px;background:var(--panel)}
.vgkangebot-kopf{display:flex;align-items:center;gap:10px;margin:6px 0 4px}
.vgkangebot-preis{font-size:17px;font-weight:700;letter-spacing:-.01em}
.vgz-angebotform{margin:10px 0 0}
.vgz-angebotform summary{display:inline-flex;width:auto;list-style:none}
.vgz-angebotform summary::-webkit-details-marker{display:none}
.vgz-angebothinweis{margin:10px 0 0;font-size:12.5px}
.vgzeile.neu>summary{background:var(--accentSoft)}

/* Filter: wer ist am Zug. Ruhige Reiter, kein Formular-Look. */
.vgfilter{display:flex;gap:4px;flex-wrap:wrap;margin:0 0 4px;padding:0 0 12px;border-bottom:1px solid var(--hair)}
.vgfilter-btn{appearance:none;border:0;background:none;cursor:pointer;padding:6px 11px;border-radius:8px;
  font:inherit;font-size:13px;font-weight:500;color:var(--muted);display:inline-flex;align-items:center;gap:6px;
  transition:background .12s ease,color .12s ease}
.vgfilter-btn:hover{background:var(--panel2);color:var(--text)}
.vgfilter-btn.an{background:var(--accentSoft);color:var(--accentDark);font-weight:600}
.vgfilter-zahl{font-size:11.5px;font-weight:600;opacity:.65}
.vgsek-erledigt{margin-top:24px;padding-top:20px;border-top:1px solid var(--hair)}
.vgfreigabe-ok{color:#1e7d43;font-weight:500;margin:10px 0}
.vgfreigabe-warn{color:#b5700a;font-weight:500;margin:10px 0}
.vgneu{border:1px solid var(--line);border-radius:10px;padding:18px;margin:12px 0;background:var(--panel2)}
.vgtypen{grid-template-columns:repeat(auto-fill,minmax(200px,1fr));margin:8px 0 16px}
.vgtypkarte{cursor:pointer}
.vgkommentar-form{margin-top:18px;padding-top:16px;border-top:1px solid var(--hair)}
.vgkommentar-form textarea{width:100%;margin-bottom:10px;padding:11px 13px;border:1px solid var(--line2);border-radius:8px;font-size:14px;min-height:60px;font-family:inherit}

/* Kommentarverlauf: ruhige Zeilen, keine Chatblasen */
.vgkommentare{margin-top:14px;border-top:1px solid var(--hair)}
.vgkommentar{padding:12px 0;border-bottom:1px solid var(--hair)}
.vgkommentar:last-child{border-bottom:none}
.vgkommentar-kopf{display:flex;gap:10px;align-items:baseline;margin-bottom:3px}
.vgkommentar-kopf b{font-size:13px}
.vgkommentar-text{font-size:14px;line-height:1.55;color:var(--text)}
.vgkommentar.vonadmin .vgkommentar-kopf b{color:var(--accent)}

/* Kundenseite eines Vorgangs */
.vgk-card{max-width:720px;margin:20px auto}
.vgk-typ{font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.vgk-titel{font-size:26px;font-weight:680;line-height:1.25;margin:4px 0 10px;letter-spacing:-.01em}
.vgk-beschr{font-size:15px;line-height:1.55;color:var(--muted);max-width:680px;margin:0 0 10px}
.vgk-katlabel{display:block;font-size:13px;font-weight:600;margin:16px 0 6px;color:var(--text)}
.vgk-katsel{display:block;width:100%;max-width:320px;padding:10px 12px;border:1px solid var(--line2);border-radius:8px;background:var(--panel);font-size:14px;font-family:inherit;color:var(--text)}
.vgk-upsektion{margin-top:48px}
.vgk-verlaufantwort{margin-top:16px}
.vgk-card .updatei .del{flex:none;align-self:flex-start;margin-top:2px}
.updatei-kat{display:block;margin-top:8px;max-width:230px;padding:7px 10px;border:1px solid var(--line2);border-radius:7px;background:var(--panel);font-size:13px;font-family:inherit;color:var(--text)}
.vgk-gruppen{margin-top:32px}
.vgk-katgruppe{margin:0 0 32px}
.vgk-katgruppe:last-child{margin-bottom:0}
.vgk-katkopf{font-size:12.5px;font-weight:650;letter-spacing:.03em;text-transform:uppercase;color:var(--muted);margin:0 0 14px}
.vgk-card .updatei{padding:16px 18px}
.vgk-komm{margin:24px 0 0;padding-bottom:40px;border-bottom:1px solid var(--ui-line)}
.vgk-komm-kopf{font-size:12px;font-weight:650;letter-spacing:.04em;text-transform:uppercase;color:var(--muted);margin:0 0 14px}
.vgk-komm .vgkommentare{display:flex;flex-direction:column;gap:12px;margin:0;border:none}
.vgk-komm .vgkommentar{max-width:80%;padding:9px 14px;border:none;border-radius:16px;margin:0}
.vgk-komm .vgkommentar.vonadmin{align-self:flex-start;background:#f0eee8;border-bottom-left-radius:5px}
.vgk-komm .vgkommentar.vonkunde{align-self:flex-end;background:var(--accent);border-bottom-right-radius:5px}
.vgk-komm .vgkommentar-kopf{margin-bottom:3px;gap:8px}
.vgk-komm .vgkommentar-kopf b{font-size:12.5px!important;font-weight:600}
.vgk-komm .vgkommentar-kopf .lmut{font-size:11px!important;font-weight:400!important;opacity:1;color:#9c968a!important}
.vgk-komm .vgkommentar.vonadmin .vgkommentar-kopf b{color:#3a352c!important}
.vgk-komm .vgkommentar.vonkunde .vgkommentar-kopf b{color:#ffffff!important}
.vgk-komm .vgkommentar.vonkunde .vgkommentar-kopf .lmut{color:#ffffff!important}
.vgk-komm .vgkommentar.vonkunde .vgkommentar-text{color:#ffffff!important}
.vgk-komm .vgkommentar-text{font-size:14px;line-height:1.5}
.vgk-komm .vgk-verlaufantwort{margin:16px 0 0;display:flex;gap:8px;align-items:flex-end}
.vgk-komm .vgk-verlaufantwort textarea{flex:1;margin:0;padding:11px 14px;border:1px solid var(--line2);border-radius:12px;resize:none;min-height:46px;font-size:14px;font-family:inherit;background:#fff}
.vgk-komm .vgk-verlaufantwort .btn{flex:none;margin:0}
.vgk-hinweis{background:var(--panel2);border:0;border-radius:8px;padding:12px 16px;font-size:14px;line-height:1.5;margin:0 0 14px;color:var(--text)}
.vgk-anleitung{background:var(--panel2);border-radius:8px;padding:12px 14px;margin:0 0 12px}
.vgk-entscheidung{display:flex;gap:10px;flex-wrap:wrap;margin:16px 0}
.vgk-bestaetigung,.vgk-wunschform{border-top:1px solid var(--hair);padding-top:14px;margin-top:6px}

/* Startseiten-Block: Typ-Zeile + Status rechts */
.kaufgabe-typ{font-size:11.5px;letter-spacing:.05em;text-transform:uppercase;color:var(--dim)}
.kaufgabe-status{flex:none;font-size:12.5px;color:var(--muted);white-space:nowrap}

/* ================= Etappe 3: Projektstatus, Neuigkeiten, Videos ================= */

/* Projektstatus-Karte im Portal */
.pstatus{padding:24px}
.pst-eyebrow{display:block;font-size:11px;letter-spacing:.12em;text-transform:uppercase;font-weight:750;color:#8b8e94;margin-bottom:6px}
.pst-titel{font-size:19px;font-weight:700;line-height:1.3;margin:0 0 8px;letter-spacing:-.01em}
.pst-subline{font-size:15px;line-height:1.55;color:var(--muted);max-width:680px;margin:0 0 4px}
.pstinfo{display:inline-flex;align-items:center;justify-content:center;width:17px;height:17px;border-radius:50%;
  border:1px solid var(--line2);background:var(--panel);color:var(--muted);font-size:11px;font-style:italic;
  font-weight:600;cursor:pointer;margin-left:4px;vertical-align:1px}
.pstinfo:hover{border-color:var(--accent);color:var(--accent)}
.pstinfo-text{display:block;font-size:13.5px;line-height:1.55;color:var(--muted);background:var(--panel2);
  border-radius:8px;padding:10px 14px;margin-top:8px;max-width:640px}
.pst-hinweis{background:#fffaf4;border:1px solid #f0dcc0;border-radius:8px;padding:10px 14px;
  font-size:14px;line-height:1.5;margin:10px 0 0;max-width:680px}

/* Timeline: horizontal auf Desktop, dünn und präzise */
.pst-leiste{display:flex;align-items:flex-start;margin:22px 0 14px}
.pst-schritt{flex:1;display:flex;flex-direction:column;align-items:center;gap:7px;position:relative;min-width:0}
.pst-schritt::before{content:"";position:absolute;top:9px;right:50%;width:100%;height:2px;background:#e8e3d9}
.pst-schritt:first-child::before{display:none}
.pst-schritt.fertig::before,.pst-schritt.jetzt::before{background:var(--accent)}
.pst-punkt{width:19px;height:19px;border-radius:50%;background:var(--panel);border:2px solid #d8d3c8;
  display:flex;align-items:center;justify-content:center;font-size:10px;color:#fff;flex:none;position:relative;z-index:1}
.pst-schritt.fertig .pst-punkt{background:var(--accent);border-color:var(--accent)}
.pst-schritt.jetzt .pst-punkt{background:var(--accent);border-color:var(--accent);width:23px;height:23px;margin-top:-2px}
.pst-name{font-size:12px;line-height:1.35;color:#a49d8e;text-align:center;padding:0 4px;hyphens:auto}
.pst-schritt.fertig .pst-name{color:var(--text);font-weight:500}
.pst-schritt.jetzt .pst-name{color:var(--text);font-weight:650}
.pst-naechster{font-size:13.5px;color:var(--muted);margin:0}
.pst-naechster::before{content:"→ ";color:var(--accent)}

/* Mobil: vertikale Darstellung */
@media (max-width:640px){
  .pst-leiste{flex-direction:column;align-items:stretch;gap:0}
  .pst-schritt{flex-direction:row;align-items:center;gap:12px;padding:7px 0}
  .pst-schritt::before{top:auto;bottom:50%;left:9px;right:auto;width:2px;height:100%}
  .pst-name{text-align:left;white-space:normal}
}

/* Backend: Phasen-Optionen im Portal-Tab */
.pst-optionen{display:flex;flex-direction:column;gap:8px;max-width:520px}
.pst-option{display:flex;flex-direction:column;gap:1px;padding:11px 14px;border:1px solid var(--line);
  border-radius:9px;cursor:pointer;transition:border-color .12s,background .12s}
.pst-option:hover{border-color:#cbbfa8}
.pst-option.an{border-color:var(--accent);background:#fffaf4}
.pst-option input{position:absolute;opacity:0;pointer-events:none}
.pst-option-name{font-size:14px;font-weight:600}
.pst-option.an .pst-option-name::after{content:" ✓";color:var(--accent)}
.pst-option-sub{font-size:12.5px;color:var(--muted)}

/* Drei klare Hauptphasen: Textblock und Auswahlstatus bleiben sauber getrennt. */
.pst-optionen{max-width:680px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.pst-option.pst-option-neu{position:relative;display:grid;grid-template-columns:minmax(0,1fr) 24px;align-items:center;gap:14px;min-height:92px;padding:16px 17px;background:#fff}
.pst-option.pst-option-neu.an{border-color:var(--ui-orange);background:#fff8f4}
.pst-option-kopie{display:grid;gap:5px;min-width:0}
.pst-option.pst-option-neu .pst-option-name{font-size:15px;font-weight:700;line-height:1.25}
.pst-option.pst-option-neu .pst-option-name::after{content:none!important}
.pst-option.pst-option-neu .pst-option-sub{font-size:13px;line-height:1.45;color:var(--ui-muted)}
.pst-option-check{display:grid;place-items:center;width:23px;height:23px;border:1px solid var(--ui-line-strong);border-radius:50%;color:transparent;font-size:13px;font-weight:800}
.pst-option.an .pst-option-check{border-color:var(--ui-orange);background:var(--ui-orange);color:#fff}
@media(max-width:760px){.pst-optionen{grid-template-columns:1fr}.pst-option.pst-option-neu{min-height:76px}}

/* Neuigkeiten im Portal */
.knews{max-width:720px}
.knews-bild{width:100%;max-height:260px;object-fit:cover;border-radius:8px;margin:0 0 12px}
.knews-datum{font-size:11.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.card h3.knews-titel,.knews-titel{font-size:18px;font-weight:650;margin:4px 0 6px;line-height:1.3;text-transform:none;letter-spacing:-.01em;color:var(--text)}
.knews-einleitung{font-size:14.5px;color:var(--muted);line-height:1.55;margin:0}
.knews-inhalt{font-size:14px;line-height:1.6;margin-top:10px;max-width:680px}
/* Startseiten-Streifen: eine schlanke, voll breite und komplett klickbare Zeile */
.knstreifen{display:flex;align-items:center;gap:14px;background:var(--panel);border:1px solid var(--line);
  border-radius:10px;padding:12px 18px;margin-bottom:18px;color:var(--text);transition:.13s}
.knstreifen:hover{border-color:var(--line2);box-shadow:0 3px 14px rgba(25,26,28,.05)}
.knstreifen-bild{flex:none;width:52px;height:52px;object-fit:cover;border-radius:8px}
.knpunkt-neu{display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--accent);
  margin-right:7px;vertical-align:1px;animation:hbpuls 1.6s ease-in-out infinite}
.knstreifen-text{min-width:0;display:flex;flex-direction:column;gap:1px}
.knstreifen-text b{font-size:15px;font-weight:650;letter-spacing:-.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.knstreifen-pfeil{margin-left:auto;flex:none;font-size:13px;font-weight:600;color:var(--accentDark)}
/* Neuigkeiten-Seite: 2er-Raster, ein einzelner Beitrag nimmt die volle Breite */
.kngrid{display:grid;grid-template-columns:1fr 1fr;gap:18px;align-items:start}
.kngrid .knews{max-width:none;margin:0}
.kngrid .knews:only-child{grid-column:1 / -1;max-width:760px}
@media (max-width:900px){.kngrid{grid-template-columns:1fr}}

/* Videos */
.kvideo{padding:4px 0}
.kvideo + .kvideo{border-top:1px solid var(--hair);margin-top:12px;padding-top:14px}
.kvideo-embed{position:relative;padding-bottom:56.25%;height:0;border-radius:8px;overflow:hidden;margin-top:10px;background:#f0efec}
.kvideo-embed iframe{position:absolute;inset:0;width:100%;height:100%}

/* ================= Etappe 4: Dateien, Website & E-Mail, Login ================= */

/* Login-Seiten: Logo und Card mittig */
.auth{max-width:400px;margin-left:auto;margin-right:auto;text-align:left;background:var(--panel);
  border:1px solid var(--line);border-radius:10px;padding:32px 30px 26px}
.auth .logo{display:block;margin:0 auto 22px;height:44px}
.auth h1{text-align:center;font-size:21px;margin:0 0 6px}
.auth > p.muted{text-align:center}
.auth .btn{width:100%;justify-content:center;margin-top:4px}
.auth p:last-child{text-align:center}

/* Dateiseite im Portal */
.kdatei-gruppe{margin:0 0 26px}
.kdatei-katkopf{font-size:18px;font-weight:600;line-height:1.35;margin:0 0 2px}
.kdatei-katkopf .lmut{font-size:13px;font-weight:400}
.kdatei-katsub{font-size:13.5px;color:var(--muted);margin:0 0 10px}
.kdateien-raster{display:flex;flex-direction:column;gap:10px}
.kdatei{display:flex;align-items:flex-start;gap:14px;padding:14px 16px;background:var(--panel);
  border:1px solid var(--line);border-radius:10px}
.kdatei:has(.kdatei-check:checked){background:var(--accentSoft);border-color:#f1cfae}
.kdatei-sel{flex:none;padding-top:22px}
.kdatei-sel.leer{width:18px}
.kdatei-check{width:18px;height:18px;accent-color:var(--accent);margin:0;cursor:pointer}
.kdatei-selbar{position:sticky;top:8px;z-index:5;display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  background:#fbfaf8;border:1px solid var(--line);border-radius:10px;padding:10px 14px;margin:0 0 14px;
  box-shadow:0 4px 14px rgba(40,30,15,.06);font-size:14px}
.kdatei-del{cursor:pointer}
.kdatei-thumb{width:64px;height:64px;object-fit:cover;border-radius:8px;flex:none;background:var(--panel2)}
.kdatei-icon{width:64px;height:64px;display:flex;align-items:center;justify-content:center;font-size:24px;
  background:var(--panel2);border-radius:8px;flex:none}
.kdatei-mitte{flex:1;min-width:0}
.kdatei-name{display:block;font-weight:600;font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.kdatei-meta{display:block;font-size:12px;color:var(--dim);margin:2px 0 4px}
.kdatei-menu{position:relative;flex:none}
.kdatei-menu summary{list-style:none;cursor:pointer;width:32px;height:32px;display:flex;align-items:center;
  justify-content:center;border:1px solid var(--line);border-radius:8px;font-size:16px;color:var(--muted)}
.kdatei-menu summary::-webkit-details-marker{display:none}
.kdatei-menu .zeilenmenu-liste{position:absolute;right:0;top:38px;z-index:30;background:var(--panel);
  border:1px solid var(--line);border-radius:8px;box-shadow:0 12px 28px rgba(20,20,18,.12);padding:6px;min-width:220px}
.kdatei-menu .zeilenmenu-liste a{display:block;padding:8px 10px;border-radius:6px;font-size:13px;color:var(--text)}
.kdatei-menu .zeilenmenu-liste a:hover{background:var(--panel2)}
.kdatei-menu .zeilenmenu-liste a.rot{color:#b3402a}

/* Serverdaten mit Kopieren-Buttons */
.ksrv{display:flex;flex-direction:column}
.ksrv-zeile{display:flex;align-items:center;gap:12px;padding:10px 0;border-bottom:1px solid var(--hair);min-height:44px}
.ksrv-zeile:last-child{border-bottom:none}
.ksrv-label{flex:0 0 220px;font-size:13px;color:var(--muted)}
.ksrv-wert{flex:1;font-size:14px;font-weight:600;font-variant-numeric:tabular-nums;overflow:hidden;text-overflow:ellipsis}
@media (max-width:640px){
  .ksrv-zeile{flex-wrap:wrap}
  .ksrv-label{flex:1 1 100%}
}

/* ================= Etappe 5: Projekt-Tab und Portal-Tab ================= */

/* Kompakte Statusleiste: vier gleichmäßige Spalten */
.pstat-leiste{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;padding:20px 24px}
.pstat-label{display:block;font-size:11.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin-bottom:4px}
.pstat-wert{font-size:14.5px;font-weight:600}
@media (max-width:900px){.pstat-leiste{grid-template-columns:repeat(2,1fr)}}

/* Projektinformationen: ruhige aufklappbare Sektionen */
.pinfo-sektion{border:1px solid var(--line);border-radius:10px;background:var(--panel);margin:0 0 10px}
.pinfo-sektion summary{display:flex;align-items:center;gap:12px;padding:14px 18px;cursor:pointer;list-style:none;min-height:48px}
.pinfo-sektion summary::-webkit-details-marker{display:none}
.pinfo-sektion summary b{font-size:15px;flex:1}
.pinfo-sektion.intern{background:#fbf9f5}
.pinfo-inhalt{padding:2px 18px 16px;border-top:1px solid var(--hair)}
.pinfo-feld{padding:10px 0;border-bottom:1px solid var(--hair)}
.pinfo-feld:last-child{border-bottom:none}
.pinfo-label{display:block;font-size:12px;color:var(--muted);margin-bottom:2px}
.pinfo-wert{font-size:14px;line-height:1.55}
.pinfo-liste{margin:4px 0 0;padding-left:18px;font-size:14px;line-height:1.6}

/* Aktuell relevant */
.prelevant{display:flex;flex-direction:column}
.prelevant-zeile{display:flex;align-items:center;gap:14px;padding:12px 0;border-bottom:1px solid var(--hair);min-height:56px}
.prelevant-zeile:last-child{border-bottom:none}
.prelevant-mitte{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
.prelevant-mitte b{font-size:14px}
.prelevant-leer{padding:14px 20px}
.pdatei-hinweis{display:flex;align-items:center;gap:14px;padding:14px 20px}
.pdatei-hinweis span{flex:1;font-size:14px}

/* Checkliste */
.chk-abschnitt{border:1px solid var(--line);border-radius:10px;background:var(--panel);margin:0 0 10px}
.chk-abschnitt summary{display:flex;align-items:center;gap:12px;padding:13px 18px;cursor:pointer;list-style:none}
.chk-abschnitt summary::-webkit-details-marker{display:none}
.chk-abschnitt summary b{font-size:15px;flex:1}
.chk-abschnitt-akt{display:inline-flex}
.chk-punkte{padding:4px 18px 14px;border-top:1px solid var(--hair)}
.chk-punkt{display:flex;align-items:center;gap:10px;padding:8px 0;border-bottom:1px solid var(--hair);min-height:44px}
.chk-punkt:last-of-type{border-bottom:none}
.chk-titel{flex:1;font-size:14px}
.chk-titel.strike{text-decoration:line-through;color:var(--dim)}
.chk-akt{display:inline-flex;gap:4px;align-items:center}
.chk-neu{margin-top:10px}

/* ================= Etappe 6: Einstellungen-Shell, Tabellen, Menüs ================= */

/* Einstellungen: interne Navigation links, ein Bereich rechts */
.setshell{display:grid;grid-template-columns:232px 1fr;gap:32px;align-items:start}
.setnav{position:sticky;top:18px}
.setnav-gruppe{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--dim);margin:18px 0 6px;padding:0 10px}
.setnav-gruppe:first-child{margin-top:0}
.setnav-punkt{display:block;padding:8px 10px;border-radius:8px;font-size:14px;color:var(--text);margin:0 0 1px}
.setnav-punkt:hover{background:var(--panel2)}
.setnav-punkt.an{font-weight:650;color:var(--text);background:#f3efe7}
.setbereich-titel{font-size:18px;font-weight:650;margin:0 0 14px}
.setinhalt{min-width:0;max-width:860px}
@media (max-width:900px){
  .setshell{grid-template-columns:1fr;gap:16px}
  .setnav{position:static;display:flex;flex-wrap:wrap;gap:6px}
  .setnav-gruppe{flex:1 1 100%;margin:8px 0 2px}
  .setnav-punkt{padding:7px 12px;border:1px solid var(--line);border-radius:10px;font-size:13px}
  .setnav-punkt.an{box-shadow:none;border-color:var(--accent)}
}

/* Drei-Punkte-Menüs in Tabellen: einheitlich, nicht abgeschnitten */
.tbl .kdatei-menu summary{width:34px;height:34px}
.tbl .aktzelle{position:relative;width:52px}
.menutrenn{height:1px;background:var(--hair);margin:6px 4px}
.zeilenmenu-liste a.rot,.zeilenmenu-liste .rot{color:#b3402a}
.zeilenmenu-liste button.menupunkt{display:block;width:100%;text-align:left;padding:8px 12px;font-size:13.5px;color:var(--text);border:none;
  background:none;font-size:13px;color:var(--text);cursor:pointer;border-radius:6px}
.zeilenmenu-liste button.menupunkt:hover{background:#f6f1e8;border-color:transparent}

/* Kontakt- und Portaltabellen: ruhige, gleich hohe Zeilen */
.tbl.kontakte td,.tbl.portale td{vertical-align:middle;height:68px}
.tbl.kontakte .firmenname,.tbl.portale .firmenname{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;
  font-weight:600;color:var(--text);text-decoration:none;
  white-space:normal;overflow:hidden;text-overflow:ellipsis;max-width:none;overflow-wrap:anywhere}
a.firmenname:hover{color:var(--accent)}
.tbl.kontakte .schrittlink{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tbl.kontakte .hinweisfeld{display:block;max-width:200px}
.tbl.portale td[data-l="Offene Aktionen"] a{font-weight:500}

/* Neuigkeiten: Kundenauswahl als Chips, editform-Labelregeln bewusst überschrieben */
.nwkunden{display:flex;flex-wrap:wrap;gap:8px;max-width:680px}
.editform label.nwkunde{position:relative;display:inline-flex;align-items:center;margin:0;padding:7px 14px;
  background:var(--panel);border:1px solid var(--line2);border-radius:var(--rs);font-size:13px;font-weight:500;
  color:var(--text);cursor:pointer;user-select:none;line-height:1.25;transition:.12s}
.editform label.nwkunde:hover{border-color:var(--text)}
.editform label.nwkunde input{position:absolute;opacity:0;width:1px;height:1px;margin:0;pointer-events:none}
.editform label.nwkunde.an{background:var(--text);border-color:var(--text);color:#fff;font-weight:600}
.nwziel-anzeige b{font-weight:600;color:var(--text)}

/* Zugangs-Vorgang: Hilfe deutlich vom Erledigt-Schritt getrennt */
.vgk-hilfe{margin-top:34px;padding-top:22px;border-top:1px solid var(--line)}
.vgk-hilfe .oblabel{font-size:14px}

/* Kurzanleitungen im Portal: ruhige Blockkarte statt der Backend-Flexzeile */
.kanlkarte{display:block;border:1px solid var(--line2);border-radius:10px;padding:18px 20px;margin:0 0 12px;background:var(--panel)}
.kanlkarte .anlkopf{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;margin:0 0 6px}
.kanlkarte .anlkopf b{font-size:15.5px}
.kanlkarte .anltext{margin:0 0 10px;line-height:1.55;color:var(--muted);max-width:640px}
.kanlkarte .anlrolle{margin:0 0 10px;font-size:13.5px}
.kanlkarte .anladresse{display:flex;align-items:center;gap:10px;flex-wrap:wrap;background:var(--panel2);
  border:1px solid var(--line);border-radius:8px;padding:10px 12px;margin:0 0 10px;max-width:520px}
.kanlkarte .anladresse code{font-size:13.5px}
.kanlkarte .kguide{margin:0 0 4px}

/* Konzept-Zusammenfassung: Editor als auf- und zuklappbarer Bereich */
.zfeditor{border:1px solid var(--line2);border-radius:var(--r);background:var(--panel);margin:0 0 14px}
.zfeditor > summary{list-style:none;cursor:pointer;display:flex;align-items:baseline;gap:12px;padding:16px 20px;user-select:none}
.zfeditor > summary::-webkit-details-marker{display:none}
.zfeditor > summary::before{content:"▸";color:var(--muted);transition:transform .15s;align-self:center}
.zfeditor[open] > summary::before{transform:rotate(90deg)}
.zfeditor > summary b{font-size:15.5px}
.zfeditor > summary .lmut{font-size:12.5px}
.zfeditor-inhalt{padding:0 20px 18px}
.zfeditor-inhalt .card{border:1px solid var(--line);box-shadow:none}

/* Website in Arbeit: neutraler Status statt Live-Gruen */
.klive-status.inarbeit{color:var(--muted)}
.klive-status.inarbeit .kpunkt{background:var(--accent);animation:none}

/* Einheitliche Erledigt-Aktion auf jeder Aufgaben-Seite */
.vgk-erledigt{margin-top:26px;padding-top:20px;border-top:1px solid var(--line)}

/* Status-Chip im Akte-Kopf ist direkt klickbar */
.chiplink{text-decoration:none;cursor:pointer;display:inline-flex;align-items:center;vertical-align:middle}
.chiplink:hover .chip{border-color:var(--text)}
.head .savestate{display:block;margin-top:4px;font-size:12.5px;color:var(--muted)}

/* Onboarding-Band: Zwischenfortschritt fließt anteilig in das nächste Segment */
.obpz.teil::before{background:linear-gradient(90deg, var(--accent), var(--accent) calc(var(--obf, 0%) - 12%), #e2ddd2 var(--obf, 0%))}

/* Neuigkeiten: Kundenauswahl als ruhige Liste, scrollt bei vielen Kunden */
.nwkliste{display:flex;flex-direction:column;max-width:420px;max-height:264px;overflow-y:auto;
  border:1px solid var(--line2);border-radius:var(--rs);background:var(--panel);margin:0 0 4px}
.editform label.nwkzeile{display:flex;align-items:center;gap:10px;margin:0;padding:9px 12px;font-size:13.5px;font-weight:500;
  color:var(--text);cursor:pointer;border-bottom:1px solid var(--hair)}
.editform label.nwkzeile:last-child{border-bottom:none}
.editform label.nwkzeile:hover{background:var(--panel2)}
.editform label.nwkzeile input{width:16px;height:16px;margin:0;display:inline-block;accent-color:var(--accent)}

/* Onboarding-Stepper: ein Farbsystem — Akzent für vorbei, aktiv und fertig */
.obpz-dot{font-size:13px;font-weight:600}
.obpz.vorbei::before,.obpz.now::before,.obpz.done::before{background:var(--accent)}
.obpz.vorbei .obpz-dot,.obpz.done .obpz-dot{background:var(--accent);border:2px solid var(--accent);color:#fff}
.obpz.now .obpz-dot{background:var(--accent);border:2px solid var(--accent);color:#fff}

/* Onboarding: Fragen klarer getrennt, Kartentitel führen, Uploads aufgeräumt */
.obfeld-wrap{margin:0 0 30px}
.obfeld-wrap:last-child{margin-bottom:0}
.oblabel{font-size:15px;color:var(--text);margin:0 0 8px}
.obkarte-titel{color:var(--text);font-weight:650;font-size:14.5px}
.obkarte-sub{color:var(--muted);font-size:12.5px}
.updateien{display:grid;gap:10px;margin-top:12px}
.updatei{padding:12px 14px;gap:14px;align-items:flex-start}
.updatei-thumb{width:64px;height:64px;border-radius:8px;flex:none}
.updatei-icon{width:64px;height:64px;display:flex;align-items:center;justify-content:center;font-size:24px;
  background:var(--panel2);border:1px solid var(--line);border-radius:8px;flex:none}
.updatei-mitte{flex:1;min-width:0;display:flex;flex-direction:column;gap:6px}
.updatei-name{font-weight:600;font-size:13.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.updatei-beschr{width:100%;border:1px solid var(--line2);border-radius:6px;padding:8px 10px;font:inherit;font-size:13px}
.updatei-beschr:focus{outline:none;border-color:var(--text)}

/* Speicherverwaltung: Vorschau-Spalte und Auswahl-Leiste */
.spw-leiste{display:flex;align-items:center;gap:12px;margin:0 0 12px}
.spwtbl .spw-check{width:34px}
.spwtbl .spw-check input{width:16px;height:16px;accent-color:var(--accent)}
.spw-vorschau{width:56px}
.spw-vorschau img{width:44px;height:44px;object-fit:cover;border-radius:6px;display:block}
.spw-icon{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:6px;
  background:var(--panel2);border:1px solid var(--line);font-size:10px;font-weight:700;color:var(--muted)}

.card.khighlight{border-color:#efc9a8}

/* Vorgangs-Badge: Raoul ist am Zug — deutlich sichtbar mit Puls */
.vgbadge.dran{background:transparent;color:var(--text);border:none;display:inline-flex;align-items:center;gap:6px;font-weight:600;padding-left:0;padding-right:0}
.vgbadge.dran::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--accent);animation:none}

/* Zahlungs-Statuszentrale: Ampelkette */
.rk-kacheln{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:10px}
.rk-kachel{display:flex;flex-direction:column;gap:3px;text-align:left;padding:14px 16px;border:1px solid var(--hair);border-radius:12px;background:#fff;cursor:pointer;text-decoration:none;color:inherit;font:inherit;transition:border-color .12s,background .12s}
.rk-kachel:hover{border-color:var(--accent);background:#fffaf5}
.rk-kachel b{font-weight:600}
.rk-kachel span{font-size:.85rem;line-height:1.35}
.rk-kachel.rk-fertig{cursor:default;background:#faf9f7}
.rk-kachel.rk-fertig:hover{border-color:var(--hair);background:#faf9f7}
@media(max-width:640px){.rk-kacheln{grid-template-columns:1fr}}
.zst{display:flex;flex-direction:column}
.zst-zeile{display:flex;align-items:flex-start;gap:12px;padding:13px 2px;border-bottom:1px solid var(--hair)}
.zst-zeile:last-child{border-bottom:none}
.zst-punkt{width:10px;height:10px;border-radius:50%;flex:none;align-self:flex-start;margin-top:6px}
.zst-punkt.gruen{background:#1e7d43}
.zst-punkt.orange{background:var(--accent)}
.zst-punkt.rot{background:#b3402a}
.zst-punkt.grau{background:#d8d3c8}
.zst-label{flex:none;min-width:220px;font-weight:600;font-size:13.5px}
.zst-wert{flex:1;font-size:13.5px;color:var(--text)}
.zst-aktion{flex:none;margin-left:auto;padding-left:20px;font-size:13px;text-align:right;white-space:nowrap}
.zst-aktion form{display:inline;margin:0}
.zst-aktion a,.zst-aktion button{font-size:13px}

/* Kalender: Löschen neben der Zeile */
.kalrow-wrap{display:flex;align-items:center;gap:8px}
.kalrow-wrap .kalrow{flex:1;min-width:0}
.kaldel{flex:none}

/* Spaltengriffe: unsichtbar, Cursor zeigt die Funktion; Doppelklick setzt zurück */
.colgrip{position:absolute;top:0;right:-4px;width:9px;height:100%;cursor:col-resize;user-select:none;z-index:2}
.colgrip:hover{background:linear-gradient(to right, transparent 3px, var(--accent) 3px, var(--accent) 5px, transparent 5px)}

/* Globale Suche: Overlay mittig oben, Treffer als Liste mit Typ-Kennung */
.sbsuche{display:flex;align-items:center;justify-content:space-between;gap:8px;margin:0 0 14px;
  padding:7px 11px;background:transparent;border:1px solid var(--hair);border-radius:var(--rs);
  font:inherit;font-size:13px;color:var(--dim);cursor:pointer;transition:.12s;width:100%;text-align:left}
.sbsuche:hover{border-color:var(--line2);color:var(--muted);background:var(--panel)}
.sbsuche kbd{font:inherit;font-size:10.5px;color:var(--dim);border:0;padding:0;opacity:.8}
.such-dim{position:fixed;inset:0;background:rgba(25,26,28,.35);z-index:200;display:flex;
  align-items:flex-start;justify-content:center;padding:12vh 16px 0}
.such-panel{width:100%;max-width:580px;background:var(--panel);border:1px solid var(--line2);
  border-radius:10px;box-shadow:0 24px 60px rgba(25,26,28,.22);overflow:hidden}
#such-eingabe{width:100%;border:0;outline:0;font:inherit;font-size:16px;padding:16px 20px;
  background:transparent;color:var(--text)}
.such-liste{max-height:52vh;overflow-y:auto;border-top:1px solid var(--hair)}
.such-liste:empty{border-top:0}
.such-zeile{display:flex;align-items:center;gap:12px;padding:10px 20px;color:var(--text)}
.such-zeile.aktiv{background:var(--accentSoft)}
.such-typ{flex:none;width:86px;font-size:11px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;
  color:var(--dim)}
.such-zeile.aktiv .such-typ{color:var(--accentDark)}
.such-text{min-width:0;display:flex;flex-direction:column}
.such-text b{font-weight:600;font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.such-text small{font-size:12px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.such-leer{margin:0;padding:16px 20px;font-size:13.5px;color:var(--muted)}


/* Am Zug: eine Ampel je Kundenbeziehung — direkt klickbar zur Akte */
.az-legende{display:flex;gap:16px;margin:0 0 10px;font-size:11.5px;color:var(--muted)}
.az-legende > span{display:inline-flex;align-items:center;gap:6px}
.az-zeile{display:flex;align-items:center;gap:10px;min-height:44px;border-bottom:1px solid var(--hair);color:inherit}
.az-zeile:last-child{border-bottom:none}
.az-zeile:hover .az-name{color:var(--accentDark)}
.az-punkt{flex:none;width:9px;height:9px;border-radius:50%}
.az-du{background:var(--accent);animation:hbpuls 1.6s ease-in-out infinite}
.az-kunde{background:#b8bcc2}
.az-ruht{background:#1e7d43}
.az-name{font-weight:600;font-size:13.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:38%}
.az-text{font-size:12.5px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0;flex:1}
.az-seit{flex:none;font-size:11.5px;color:var(--dim);font-variant-numeric:tabular-nums}

/* Dashboard-Terminkarte: Quelle weglassen, damit der Titel Platz hat (Quelle steht im Kalender) */
.dashgrid .terminquelle{display:none}
.dashgrid .terminzeile{grid-template-columns:64px 42px 1fr}

/* Seitenstruktur-Planer: Zeilen mit Pfeilen, Status-Select und Entfernen */
.pseite-liste{display:flex;flex-direction:column}
.pseite-zeile{display:flex;align-items:center;gap:10px;min-height:46px;border-bottom:1px solid var(--hair)}
.pseite-zeile:last-child{border-bottom:none}
.pseite-zeile.unter{padding-left:26px}
.pseite-move{display:flex;gap:2px}
.pseite-move .pfeil{width:24px;height:24px;border:1px solid var(--line);border-radius:6px;background:var(--panel);
  cursor:pointer;font-size:11px;color:var(--muted);line-height:1;padding:0}
.pseite-move .pfeil:hover:not(:disabled){border-color:var(--text);color:var(--text)}
.pseite-move .pfeil:disabled{opacity:.3;cursor:default}
.pseite-titel{font-weight:600;font-size:14px;min-width:0;flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pseite-typ{flex:none;font-size:11.5px;color:var(--dim)}
.pseite-status .statussel{font-size:12.5px}
.pseite-neu{display:flex;gap:8px;margin-top:14px;flex-wrap:wrap}
.pseite-neu input[name=titel]{flex:1;min-width:200px}
/* Portal: Seitenliste rein informativ */
.kseite-zeile{display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:40px;border-bottom:1px solid var(--hair)}
.kseite-zeile:last-child{border-bottom:none}
.kseite-zeile.unter{padding-left:22px}
.kseite-titel{font-size:14px;font-weight:550;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* Website-Vorschau in der Akte: kompaktes Bild links, Verwaltung rechts */
.shotzeile{display:flex;gap:20px;align-items:flex-start;flex-wrap:wrap}
.shotbild{flex:none;width:min(300px,100%)}
.shotbild img{display:block;width:100%;aspect-ratio:1280/860;object-fit:cover;object-position:top;
  border:1px solid var(--line);border-radius:8px}
.shotleer{display:flex;align-items:center;justify-content:center;aspect-ratio:1280/860;
  border:1px dashed var(--line2);border-radius:8px;color:var(--dim);font-size:13px}
.shotinfo{flex:1;min-width:240px}
.shotbtns{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}

/* Spalten-Menü über jeder Tabelle: dezenter Text-Knopf, Checkbox-Liste im schwebenden Menü */
.colwahl-leiste{display:flex;justify-content:flex-end;margin:0 0 2px}
.colwahl > summary{list-style:none;cursor:pointer;font-size:11.5px;color:var(--dim);padding:2px 6px;border-radius:6px}
.colwahl > summary::-webkit-details-marker{display:none}
.colwahl > summary:hover{color:var(--muted);background:var(--panel2)}
.colwahl-liste{min-width:180px;padding:8px 4px}
.colwahl-zeile{display:flex;align-items:center;gap:8px;padding:5px 10px;font-size:13px;cursor:pointer;border-radius:6px}
.colwahl-zeile:hover{background:var(--panel2)}
.colwahl-zeile input{accent-color:var(--accent)}
@media (max-width:760px){.colwahl-leiste{display:none}}

/* Kanal-Hinweis im Kommunikation-Tab: eine ruhige Zeile unter den Subtabs */
.kanalhinweis{margin:-6px 0 14px;font-size:12.5px;color:var(--dim)}

/* Portal moderner: weichere Karten, mehr Luft, ruhige Trennlinien statt harter Rahmen */
.kdash{gap:34px}
.kdash-haupt .card{border-color:var(--hair);box-shadow:0 1px 3px rgba(25,26,28,.04);margin-bottom:18px}
.kdash-haupt .card:last-child{margin-bottom:0}
.knavi-punkt{padding:10px 14px}
.knstreifen{border-color:var(--hair);box-shadow:0 1px 3px rgba(25,26,28,.04)}

/* Oranger Punkt an Tabs und Unterbereichen: neue Kundenaktivität, die Raoul noch nicht gesehen hat */
.tabpunkt{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--accent);
  vertical-align:2px;margin-left:3px;animation:hbpuls 1.6s ease-in-out infinite}
/* Punkt für neue Kundenreaktion in der Kontakte-Liste: sauber neben dem Namen. */
.kkontakt-zelle{display:flex;align-items:center;gap:7px}
.kkontakt-zelle .tabpunkt{margin:0;flex:none;vertical-align:baseline}


/* Portal auf voller Breite: der zentrierte Wrapper greift nur noch ohne kdash (Login, Onboarding) */
body.kportal:has(.kdash) .kwrap{max-width:none;padding:0;margin:0}
body.kportal:has(.kdash) .kfoot{display:none}
.kdash-haupt{padding:32px 40px 90px;max-width:1080px}
.kzurueck{display:inline-block;font-size:13px;color:var(--muted);margin:0 0 10px;text-decoration:none}
.kzurueck:hover{color:var(--accentDark)}


/* Optionale Onboarding-Fragen dezent kennzeichnen, Pflichtfragen stehen ohne Sternchen da */
.oboptional{font-size:11.5px;font-weight:500;color:var(--dim);margin-left:5px;text-transform:none;letter-spacing:0}
.oboffen{font-size:11.5px;font-weight:600;color:var(--accentDark);margin-left:6px;text-transform:none;letter-spacing:0}
/* Erklärungen unter einem Feld rücken näher an ihre Box */
.obcard .obfeld + .obnote.klein, .obcard textarea + .obnote.klein{margin-top:-8px}
.obcard .obfeld-wrap .obnote.klein{margin-top:2px;margin-bottom:16px}
/* Persönlicher Hinweis von Raoul in einem Onboarding-Schritt */
.obraoul{display:flex;gap:10px;align-items:flex-start;background:var(--accentSoft);border-radius:10px;
  padding:12px 16px;margin:0 0 16px;font-size:14px;line-height:1.5}
.obraoul b{font-weight:650}


/* Datei-Eingaben: der Auswahlknopf sitzt mittig im Feld */
.kportal input[type=file], .editform input[type=file]{display:flex;align-items:center;padding:9px 12px;line-height:1.4}
.kportal input[type=file]::file-selector-button, .editform input[type=file]::file-selector-button{
  margin:0 10px 0 0;padding:6px 12px;border:1px solid var(--line2);border-radius:7px;background:var(--panel);
  font:inherit;font-size:13px;font-weight:600;color:var(--text);cursor:pointer}
/* Freigabe-Entscheidung: eine klare Frage, ruhige Formulare darunter */
.vgk-frage{font-size:14.5px;font-weight:650;margin:18px 0 8px}
.vgk-entscheidung .btn{min-height:42px}

/* Leiste in der Kommunikation: der Kunde weiß noch nichts von den neuen Punkten */
.komminfo-leiste{display:flex;align-items:center;gap:14px;justify-content:space-between;flex-wrap:wrap;
  background:var(--accentSoft);border-radius:10px;padding:12px 16px;margin:0 0 16px;font-size:14px}

/* Großansicht für Bild-Vorschauen */
.lbx-klick{cursor:zoom-in}
.lbx-dim{position:fixed;inset:0;background:rgba(20,19,17,.82);z-index:300;display:flex;
  align-items:center;justify-content:center;padding:24px;cursor:zoom-out}
.lbx-dim img{max-width:92vw;max-height:92vh;border-radius:8px;box-shadow:0 20px 60px rgba(0,0,0,.4)}


/* Portal-Startseite: eine Hierarchie — die Begrüßung führt, alle Sektions-Headlines sind gleichwertig */
.kdash-haupt .kh1{font-size:19px;font-weight:700;letter-spacing:-.01em;line-height:1.3}

/* Seitenbaum: Ast-Zeichen für Unterseiten */
.pseite-ast{color:var(--dim);font-size:12px;flex:none;margin-right:2px}
.pseite-neu select[name=eltern_id]{max-width:220px}

/* Website-Anfragen: Einbau-Code und Anfrage-Karten */
.wcode{background:var(--panel2);border:1px solid var(--line);border-radius:8px;padding:12px 14px;
  font-size:12px;line-height:1.55;overflow-x:auto;white-space:pre;margin:0 0 8px}
.wanfrage{border-top:1px solid var(--line);padding:12px 0}
.wanfrage-kopf{display:flex;gap:10px;align-items:baseline;flex-wrap:wrap}
.wanfrage-betreff{font-weight:600;margin-top:6px}
.wanfrage-text{margin-top:4px;font-size:14px;line-height:1.55;white-space:normal;word-break:break-word}
.wanfrage-portal .wanfrage-kopf .muted{margin-left:auto}

/* Onboarding: individuelle Fragen von Raoul als ruhiger Block im ersten Schritt */
.obzusatz{margin:6px 0 10px;padding:18px 20px 8px;background:var(--panel2);border:1px solid var(--line);border-radius:10px}
.obzusatz-titel{font-size:18px;font-weight:600;line-height:1.3;letter-spacing:-.01em}
.obzusatz-note{margin:4px 0 16px;color:var(--muted);font-size:13.5px;line-height:1.5}
.obzfrage{margin:0 0 18px}
.obzfrage-titel{display:block;font-size:15px;font-weight:600;line-height:1.4;margin-bottom:2px}
.obzfrage-text{margin:0 0 8px;color:var(--muted);font-size:13.5px;line-height:1.5}
.obzfrage textarea{width:100%}

/* Anforderung anlegen: Platzierungswahl bei Fragen */
.vgplatz{display:flex;flex-direction:column;gap:6px;margin-top:4px}
.vgplatz .check{margin:0}
.vgplatz .lmut{font-weight:400}

/* Aufgaben: Titel springt direkt zum Anliegen */
.aufgabe-ziel{color:inherit;text-decoration:none;border-bottom:1px solid transparent}
.aufgabe-ziel:hover{color:var(--accentDark);border-bottom-color:var(--accent)}

/* Dashboard-Anpassen: Werkzeuge als kompakte Gruppe oben rechts über dem Kartenkopf */
.dashwerkzeug{top:-12px;right:14px;background:var(--panel);border:1px solid var(--line);border-radius:8px;padding:3px;box-shadow:0 6px 18px rgba(26,26,26,.10);z-index:5}
.dashwerkzeug button{border:none;background:transparent}
.dashwerkzeug button:hover{background:var(--accentSoft);color:var(--accentDark);border:none}

/* ---------- Onboarding vorbereiten (Akte-Tab) ---------- */
.vorb-intro{color:var(--muted);font-size:14px;margin:0 0 16px;max-width:640px}
.vorb-fortschritt{display:flex;align-items:center;gap:12px;margin:2px 0 16px}
.vorb-balken{flex:1;height:6px;background:var(--panel2);border-radius:999px;overflow:hidden}
.vorb-balken span{display:block;height:100%;background:var(--accent);border-radius:999px;transition:width .3s}
.vorb-fzahl{font-size:13px;color:var(--muted);white-space:nowrap}
.vorb-liste{display:flex;flex-direction:column}
.vorb-zeile{display:flex;align-items:flex-start;gap:12px;padding:13px 0;border-top:1px solid var(--hair)}
.vorb-zeile:first-child{border-top:none}
.vorb-zeile.leise{opacity:.85}
.vorb-dot{width:10px;height:10px;border-radius:50%;flex:none;margin-top:5px}
.vorb-dot.ok{background:#2f9e44}
.vorb-dot.offen{background:var(--accent)}
.vorb-dot.aus{background:#cfcfcd}
.vorb-txt{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.vorb-txt b{font-weight:600;font-size:14.5px}
.vorb-sub{font-size:12.5px;color:var(--muted);line-height:1.4}
.vorb-akt{flex:none;display:flex;align-items:center;min-height:24px}
.vorb-fertig{font-size:12.5px;color:#2f9e44;font-weight:600}
.vorb-link{font-size:13px;color:var(--accentDark);white-space:nowrap}
.vorb-link:hover{text-decoration:underline}
.vorb-up{margin:0}
.vorb-uplink{display:inline-block;font-size:13px;font-weight:600;color:var(--accentDark);cursor:pointer;white-space:nowrap}
.vorb-uplink:hover{text-decoration:underline}
.vorb-uplink input[type=file]{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
.vorb-einstell{display:flex;align-items:center;gap:12px;padding:14px 0 2px;margin-top:8px;border-top:1px solid var(--hair)}
.vorb-einstell .vorb-txt b{font-weight:600;font-size:14px}
.vorb-feld{border:1px solid var(--line2);border-radius:var(--rs);padding:6px 9px;font:inherit;font-size:13px;background:var(--panel)}
input.vorb-feld{width:230px;max-width:46vw}
textarea.vorb-feld{width:100%;resize:vertical}
.vorb-feld:focus{outline:none;border-color:var(--accent)}
.vorb-switch{position:relative;display:inline-block;width:40px;height:24px;flex:none;cursor:pointer}
.vorb-switch input{position:absolute;opacity:0;width:100%;height:100%;margin:0;cursor:pointer}
.vorb-track{position:absolute;inset:0;background:#d7d7d5;border-radius:999px;transition:background .15s}
.vorb-track::after{content:"";position:absolute;top:2px;left:2px;width:20px;height:20px;background:#fff;border-radius:50%;box-shadow:0 1px 2px rgba(0,0,0,.25);transition:transform .15s}
.vorb-switch input:checked + .vorb-track{background:var(--accent)}
.vorb-switch input:checked + .vorb-track::after{transform:translateX(16px)}
.vorb-hinweis{display:block;margin-top:18px;padding-top:16px;border-top:1px solid var(--hair)}
.vorb-hinweis .oblabel{display:block;margin-bottom:6px}
.vorb-ok{display:inline-block;margin-top:5px;font-size:12.5px;color:#2f9e44}
.vorb-abschluss{border-color:var(--line2)}
.vorb-abschluss.ok{border-color:#bfe3c6;background:#f6fbf7}
.vorb-abtext{font-size:14px;color:var(--text);margin:2px 0 14px;max-width:620px}
.vorb-abbtn{display:flex;gap:10px;flex-wrap:wrap}
.vorb-abbtn .btn[disabled]{opacity:.5;cursor:not-allowed}

/* ---------- Verträge und Nachweise ---------- */
.nw-sub{margin:0 0 14px;font-size:13px}
.nw-leer{padding:14px 0;font-size:13.5px}
.nw-liste{display:flex;flex-direction:column}
.nw-zeile{display:flex;align-items:flex-start;gap:12px;padding:12px 0;border-top:1px solid var(--hair)}
.nw-zeile:first-child{border-top:none}
.nw-icon{flex:none;width:44px;height:44px;border-radius:8px;background:var(--accentSoft);color:var(--accentDark);display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;letter-spacing:.02em}
.nw-mitte{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.nw-name{font-weight:600;font-size:14.5px}
.nw-meta{font-size:12.5px;color:var(--muted)}
.nw-notiz{font-size:12.5px;color:var(--dim);font-style:italic}
.nw-form{margin-top:10px;max-width:460px}
.nw-neu summary{cursor:pointer}

/* ---------- Onboarding-Vorlauf (Kundenseite) ---------- */
.vlshell{max-width:720px;margin:0 auto}

/* Kompakter Fortschritt: „Schritt X von 6" mit ruhiger Fortschrittslinie */
.vlprog{margin:6px 0 20px}
.vlprog-kopf{display:flex;align-items:baseline;gap:8px;font-size:13px;margin:0 0 8px}
.vlprog-kopf b{font-weight:650;color:var(--text)}
.vlprog-kopf span{color:var(--muted)}
.vlprog-kopf span::before{content:"·";margin-right:8px;color:var(--dim)}
.vlprog-line{display:flex;gap:5px}
.vlseg{flex:1;height:4px;border-radius:2px;background:var(--line2);display:block;transition:background .13s}
.vlseg.ok{background:var(--accent)}
a.vlseg.ok:hover{background:var(--accentDark)}
.vlseg.aktiv{background:var(--text)}
a.vlstep:hover{border-color:var(--line2)}
.vlcard{padding:28px 30px}
.vlcard .kh1{margin:0 0 12px}
.vltext{color:var(--muted);font-size:15px;line-height:1.6;margin:0 0 26px;max-width:600px}
.vlbetrag{font-size:30px;font-weight:700;letter-spacing:-.01em}
.vlbetrag-block{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;margin:0 0 14px}
.vlfaellig{font-size:14px;color:var(--muted);font-weight:600}
.vlfaellig.ueber{color:var(--red)}

/* Feste Aktionszeile: Zurück links, Hauptaktion rechts */
.vlaktionen{margin-top:22px;display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap}
.vlaktionen .vlzurueck{padding-left:10px}
.vlaktionen .vlneben{margin-left:auto}
.vlaktionen .btn{min-height:44px}

/* Eindeutige Erfolgsbestätigung */
.vlerfolg{display:flex;gap:12px;align-items:flex-start;background:var(--greenSoft);border:1px solid #c4e2cf;border-radius:var(--r);padding:14px 16px;margin:0 0 16px}
.vlerfolg-icon{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;border-radius:50%;background:var(--green);color:#fff;font-size:13px;font-weight:700;flex:none;margin-top:1px}
.vlerfolg-titel{display:block;font-size:15px;font-weight:650;color:var(--text);margin:0 0 3px}
.vlerfolg-zeile{font-size:14px;line-height:1.55;color:#2f5c3c}
.vlerfolg-zeile b{color:#234a2e}

/* Warteseite (Lastschrift: Raoul meldet sich) */
.vlwarte{background:#fdf7ec;border:1px solid #ecdcb8;border-radius:var(--r);padding:14px 16px;margin:0 0 16px;font-size:14.5px;line-height:1.6;color:#7a5c1e}
.vlwarte b{display:block;color:#5f4713;margin-bottom:3px}

/* Zusammenfassung auf der Geschafft-Seite */
.vlliste{margin:0 0 18px;padding:0 0 0 20px;font-size:14.5px;line-height:1.75;color:var(--muted)}
.vlform{margin:0}
.vlfeld{display:block;margin:0 0 4px}
.vllabel{display:block;font-size:13.5px;color:var(--muted);margin-bottom:6px}
.vlfeld input{width:100%;max-width:420px;border:1px solid var(--line2);border-radius:var(--rs);padding:10px 12px;font:inherit;font-size:15px}
.vlfeld input:focus{outline:none;border-color:var(--accent)}
.vlcheck{display:flex;gap:12px;align-items:flex-start;margin:18px 0 0;font-size:14.5px;line-height:1.5;cursor:pointer;padding:15px 17px;border:1px solid var(--ui-line);border-radius:11px;background:#fff}
.vlcheck:hover{border-color:var(--ui-line-strong)}
.vlcheck input{margin-top:2px;width:18px;height:18px;flex:none;accent-color:var(--accent)}
.vlcheck b{display:block;color:var(--ui-text);font-size:14px;margin-bottom:2px}
.vlcheck>span{color:var(--ui-muted)}
.vlbestaetigt{background:#f6fbf7;border:1px solid #bfe3c6;border-radius:8px;padding:12px 14px;margin:18px 0 0;font-size:14px;color:#256b34}
.vlfehler{background:#fdecea;border:1px solid #f5c2bd;border-radius:8px;padding:11px 14px;margin:0 0 16px;font-size:14px;color:#a12b1c}
/* Dokumentanzeige */
.vldok{margin:0 0 8px}
.vldok-embed{display:block;width:100%;height:clamp(520px,70vh,760px);border:1px solid var(--hair);border-radius:8px;background:var(--panel2)}
.vldok-fuss{display:flex;gap:16px;margin-top:8px;font-size:13.5px}
.vldok-block{border:1px solid var(--hair);border-radius:10px;padding:16px 18px;margin:28px 0 24px}
.vldok-kopf{font-weight:600;font-size:14.5px;margin:0 0 10px}
.vlmandat{font-size:13px;line-height:1.65;color:var(--muted);margin:0}
.vlmandat b{color:var(--text);font-weight:600}
.vlmandat-recht{font-size:12.5px;line-height:1.6;color:var(--muted);margin:14px 0 0;padding-top:14px;border-top:1px solid var(--hair)}
.vldok-datei{border:1px dashed var(--line2);border-radius:10px;padding:20px;text-align:center}
.vldok-name{display:block;font-weight:600;margin-bottom:4px}
.vldok-fehlt{background:var(--panel2);border-radius:8px;padding:16px;color:var(--muted);font-size:14px}
/* Zahlweise */
.vlwahl{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.vloption{position:relative;display:block;border:1px solid var(--hair);border-radius:12px;padding:18px 18px 20px;cursor:pointer;transition:border-color .12s}
.vloption:hover{border-color:var(--line2)}
.vloption input{position:absolute;opacity:0}
.vloption.gewaehlt,.vloption:has(input:checked){border-color:var(--accent);box-shadow:none}
.vlopt-titel{display:block;font-weight:650;font-size:15px;margin-bottom:2px}
.vlopt-sub{display:block;font-size:13px;color:var(--muted);line-height:1.45;margin-top:10px}
.vlopt-preis{display:block;font-size:21px;font-weight:700;letter-spacing:-.01em;margin:2px 0 0}
.vlopt-einheit{display:block;font-size:13px;color:var(--muted);margin:1px 0 4px}
.vlopt-spar{display:inline-block;font-size:12.5px;font-weight:600;color:var(--accentDark);margin-top:10px}
.vlopt-tag{position:absolute;top:16px;right:16px;font-size:10.5px;font-weight:650;text-transform:uppercase;letter-spacing:.05em;color:var(--accentDark)}

/* Kompakte Dokumentzeile in Bestätigungsansichten */
.vldok-zeile{display:flex;align-items:center;justify-content:space-between;gap:12px;border:1px solid var(--hair);border-radius:var(--r);padding:11px 14px;margin:0 0 10px;font-size:14px}
.vldok-zeile>span:first-child{font-weight:600}
.vldok-zeile-links{display:flex;gap:14px;font-size:13.5px;white-space:nowrap}

/* Dokument + Häkchen als flache Einheit (kein card-in-card): Titel/Links in einer Zeile,
   kurze Erklärung, Häkchen direkt darunter. Mehrere Einheiten trennt eine feine Linie. */
.vldok-e{margin:18px 0 0}
.vldok-e + .vldok-e{border-top:1px solid var(--ui-line);margin-top:22px;padding-top:22px}
.vldok-e-kopf{display:flex;align-items:baseline;justify-content:space-between;gap:16px;flex-wrap:wrap}
.vldok-e-kopf b{font-size:15px;color:var(--ui-text)}
.vldok-e-links{display:flex;gap:16px;font-size:13.5px;white-space:nowrap}
.vldok-e-fehlt{font-size:13px;color:var(--ui-muted)}
.vldok-e-erkl{font-size:13.5px;color:var(--ui-muted);line-height:1.55;margin:4px 0 0}
.vlcheck.flach{border:none;background:none;padding:0;margin:14px 0 0}
.vlcheck.flach:hover{border:none}

/* Ein durchgehender, hochwertiger Onboarding-Rahmen */
.khead-logo{display:inline-flex;align-items:center;border-radius:8px}
.khead-logo:focus-visible{outline:2px solid var(--accent);outline-offset:5px}
.vleyebrow{display:block;margin:0 0 8px;color:var(--accentDark);font-size:12px;font-weight:750;letter-spacing:.08em;text-transform:uppercase}
.vllead{font-size:18px;line-height:1.5;margin:0 0 20px;max-width:600px}
.vlintro-schritte{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:0 0 20px}
.vlintro-schritte>div{min-height:100px;padding:15px;border:1px solid var(--hair);border-radius:10px;background:#fdfaf6;display:flex;flex-direction:column;gap:9px}
.vlintro-schritte b{width:25px;height:25px;border-radius:50%;display:grid;place-items:center;background:var(--accentSoft);color:var(--accentDark);font-size:12px}
.vlintro-schritte span{font-size:13.5px;line-height:1.45;font-weight:600}
.vlpaket{border:1px solid var(--hair);border-radius:12px;background:#fdfaf6;padding:14px 16px;margin:0 0 16px}
.vlpaket-kopf{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
.vlpaket-label{font-size:12.5px;color:var(--muted)}
.vlpaket-name{font-size:14.5px;font-weight:650;letter-spacing:-.01em}
.vlpaket h3{margin:0 0 7px;font-size:16px}
.vlleistungen{margin:8px 0 0;padding-left:19px;color:var(--muted);font-size:13.5px;line-height:1.7}
/* Leistungen als ruhiges Accordion: per Klick erweiterbar, kein langer Block */
.vlleist{margin-top:12px;border-top:1px solid var(--hair);padding-top:2px}
.vlleist>summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:8px;padding:10px 2px 8px;font-size:14px;font-weight:600;color:var(--text)}
.vlleist>summary::-webkit-details-marker{display:none}
.vlleist>summary::marker{content:""}
.vlleist>summary::after{content:"";width:7px;height:7px;border-right:2px solid var(--muted);border-bottom:2px solid var(--muted);transform:rotate(45deg);margin-left:auto;transition:transform .18s}
.vlleist[open]>summary::after{transform:rotate(-135deg)}
.vlleist-zahl{font-size:12px;font-weight:650;color:var(--muted);background:var(--panel2,#f2ede5);border-radius:999px;padding:1px 9px}
.vlleist .vlleistungen{margin:0 0 10px}
.vlpreis{margin:12px 0 2px}
/* Anzahlung: saubere Aufstellung, Label links, Betrag rechts, Summe abgesetzt */
.vlpreis-anzahlung{display:flex;flex-direction:column;max-width:440px;margin:16px 0 4px}
.vlpreis-anzahlung > div{display:flex;justify-content:space-between;align-items:baseline;gap:20px;padding:9px 0;font-size:14.5px}
.vlpreis-anzahlung dt{color:var(--ui-muted);margin:0}
.vlpreis-anzahlung dd{margin:0;font-variant-numeric:tabular-nums;color:var(--ui-text)}
.vlpreis-anzahlung .vlpreis-summe{border-top:1px solid var(--ui-line);margin-top:4px;padding-top:13px}
.vlpreis-anzahlung .vlpreis-summe dt{color:var(--ui-text);font-weight:600}
.vlpreis-anzahlung .vlpreis-summe dd{font-size:19px;font-weight:700}
.vlpreis-brutto{font-size:27px;font-weight:750;letter-spacing:-.02em;line-height:1.05;color:var(--text)}
.vlpreis-einheit{font-size:14px;font-weight:600;color:var(--muted);letter-spacing:0}
.vlpreis-netto{margin-top:4px;font-size:12.5px;color:var(--muted)}
.vlnote-klein{margin:2px 0 18px;font-size:13px;color:var(--muted);line-height:1.5}
.vlnote-mitte{text-align:center;margin-top:14px}
.vlhinweis{background:#fdf7ec;border:1px solid #ecdcb8;color:#70551f;border-radius:10px;padding:13px 15px;margin:0 0 16px;font-size:14px;line-height:1.55}
.vlhinweis b{color:#4f3b12}.vlzahl-meta,.vlstatus{font-size:13px;color:var(--muted)}
.vlzahl-rechts{display:flex;align-items:center;justify-content:flex-end;gap:9px;flex-wrap:wrap}
.vlzahl-rechts form{display:inline-flex}.vlzahl-cta{box-shadow:0 5px 14px rgba(20,20,18,.15)}
.vlbetrag-block>span:first-child{display:flex;flex-direction:column;gap:2px}.vlbetrag-block small{font-size:12px;color:var(--muted);font-weight:600}
.kfoot-hilfe{display:flex;justify-content:center;align-items:center;gap:8px}.kfoot-hilfe a{font-weight:650}
.hbfilter{display:flex;gap:6px;flex-wrap:wrap;margin:0 0 10px}
.hbfilter button{border:1px solid var(--line2);background:var(--panel);color:var(--muted);border-radius:8px;padding:6px 12px;font:inherit;font-size:12px;font-weight:650;cursor:pointer}
.hbfilter button.an{background:var(--text);border-color:var(--text);color:#fff}
.komm-veroeffentlichungen{margin-top:16px}.komm-veroeffentlichungen>summary{cursor:pointer;list-style:none;display:flex;align-items:baseline;gap:8px}
.komm-veroeffentlichungen>summary::-webkit-details-marker{display:none}.komm-veroeffentlichungen>summary::after{content:"+";margin-left:auto;color:var(--muted);font-size:20px}
.komm-veroeffentlichungen[open]>summary::after{content:"−"}.komm-veroeffentlichungen-inhalt{margin-top:16px}.komm-veroeffentlichungen-inhalt>.card{box-shadow:none}
.vgfuer[hidden]{display:none!important}
.preisinfo{display:block;margin-top:5px;color:var(--muted);font-size:12.5px;line-height:1.4}.preisinfo b{color:var(--text)}

@media (max-width:560px){
  .vlcard{padding:22px 18px}
  .vlwahl{grid-template-columns:1fr}
  .vldok-embed{height:58vh;min-height:380px}
  .vlaktionen{flex-direction:row}
  .vlaktionen .btn.primary{flex:1;justify-content:center}
  .vldok-zeile{flex-direction:column;align-items:flex-start;gap:6px}
  .vlintro-schritte{grid-template-columns:1fr}.vlintro-schritte>div{min-height:0;flex-direction:row;align-items:center}
  .vlzahl-rechts{width:100%;align-items:stretch;flex-direction:column}.vlzahl-rechts form,.vlzahl-rechts .btn{width:100%;justify-content:center}
}

/* Kundenakte: eine hochwertige, eindeutig führende Konditionen-Oberfläche */
.konditionen-card{border-top:3px solid var(--text)}
.konditionen-card .rsec{font-size:12px;letter-spacing:.07em;text-transform:uppercase;color:var(--muted)}
.konditionen-card .frow{align-items:center;min-height:50px}
.konditionen-card .fk{width:240px;color:var(--muted);font-weight:550}
.konditionen-card .fv{min-width:0}
.konditionen-card .pfield{display:block;width:100%;max-width:520px;border:1px solid var(--line2);border-radius:8px;
  padding:9px 11px;background:var(--panel);color:var(--text);font:inherit;font-size:14px;transition:border-color .12s,box-shadow .12s}
.konditionen-card textarea.pfield{resize:vertical;line-height:1.5}
.konditionen-card .pfield:focus{outline:none;border-color:var(--text);box-shadow:0 0 0 3px rgba(25,25,25,.06)}
@media(max-width:680px){
  .konditionen-card .frow{display:block}
  .konditionen-card .fk{width:auto;margin-bottom:6px}
  .konditionen-card .pfield{max-width:none;min-height:44px}
}

/* ---------- Anzahlung (Onboarding-Tab) ---------- */
.anza-felder{display:flex;gap:14px;flex-wrap:wrap;margin:0 0 14px}
.anza-felder .obfeld{flex:1;min-width:160px;margin:0}
.anza-felder input{width:100%;border:1px solid var(--line2);border-radius:var(--rs);padding:9px 11px;font:inherit}
.anza-felder input:focus{outline:none;border-color:var(--accent)}
.anza-kopf{display:flex;align-items:center;gap:12px;margin:2px 0 2px}
.anza-betrag{font-size:26px;font-weight:700;letter-spacing:-.01em}
/* Status als ruhige Textzeile statt Pille */
.anza-status{font-size:13px;font-weight:650;white-space:nowrap}
.anza-status.anza-ok{color:#256b34}
.anza-status.anza-warn{color:var(--accentDark)}
.anza-status.anza-bad{color:#a12b1c}
.betr-mailblock{margin-top:14px}
.betr-mailblock>summary{list-style:none;display:inline-flex;cursor:pointer}
/* Mailvorschau im Aktivierungs-Formular NICHT sticky (überlappte sonst den Text darunter) */
.betr-aktivieren-form .mailpreview{position:static;margin:14px 0}
.betr-aktivieren-form .mcheck{max-width:680px}
/* Sicherheits-Rückfrage vor der Betreuungs-Aktivierung */
.betr-confirm{margin-top:12px;padding:16px 18px;border:1px solid var(--accent);border-left:3px solid var(--accent);border-radius:10px;background:var(--accentSoft)}
.betr-confirm>b{display:block;margin-bottom:6px;font-size:15px;color:var(--text)}
.betr-confirm>p{margin:0 0 12px;font-size:13.5px;line-height:1.55;color:var(--text);max-width:640px}
/* Checkboxen durchgehend in Markenfarbe statt Browser-Blau */
input[type="checkbox"],input[type="radio"]{accent-color:var(--accent)}
/* Vorschau der Anstups-E-Mail im Antwortformular */
.vg-anstups{margin:14px 0 4px;padding:16px 18px;border:1px solid var(--line);border-radius:10px;background:#fbfaf8;font-size:13.5px;line-height:1.55;max-width:640px}
.vg-anstups-titel{color:var(--muted);font-size:12px;letter-spacing:.03em;text-transform:uppercase;margin-bottom:9px}
.vg-anstups-betreff{font-weight:650;color:var(--text)}
.vg-anstups-text{color:var(--text);margin:4px 0 7px}
.vg-anstups-fuss{color:var(--muted);font-size:12.5px}
.vgkommentar-form label.check{display:flex;align-items:center;gap:10px}
/* Portal-Phasenvorschau: aktuelle Kundensicht klar mit Punkt markiert, entzerrt */
.portal-phasen{display:grid;gap:10px}
.portal-phase{border:1px solid var(--line);border-radius:10px;padding:13px 16px;background:#fff}
.portal-phase.aktiv{border-color:var(--accent);background:var(--ui-soft)}
.portal-phase-kopf{display:flex;align-items:center;gap:9px}
.portal-phase-kopf b{font-size:15px;color:var(--text)}
.portal-phase-dot{width:9px;height:9px;border-radius:50%;background:var(--line2);flex:none}
.portal-phase.aktiv .portal-phase-dot{background:var(--accent)}
.portal-phase-badge{margin-left:auto;font-size:11.5px;font-weight:650;color:var(--accent);background:#fff;border:1px solid var(--accent);border-radius:20px;padding:2px 10px;white-space:nowrap}
.portal-phase-menu{margin:7px 0 0;font-size:13px;color:var(--muted);line-height:1.55}
.portal-phase:not(.aktiv) .portal-phase-menu{color:var(--dim)}
.betr-mailblock>summary::-webkit-details-marker{display:none}
.betr-mailblock[open]>summary{margin-bottom:4px}
.anza-chip.anza-info{background:#eaf1fb;color:#2b5fa1}
.anza-chip.anza-neutral{background:var(--panel2);color:var(--muted)}
.anza-meta{margin:0 0 14px;font-size:13.5px}
.anza-link{display:flex;gap:8px;align-items:center;margin:0 0 4px}
.anza-linkfeld{flex:1;min-width:0;border:1px solid var(--line2);border-radius:var(--rs);padding:9px 11px;font:inherit;font-size:13px;background:var(--panel2);color:var(--muted)}
.anza-linksub{margin:0 0 14px;font-size:12.5px}
.anza-linkform{margin:0 0 14px}
.anza-aktionen{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.anza-aktionen form{margin:0}
.anza-entf{color:var(--muted)}
.anza-entf:hover{color:#a12b1c}

/* ---------- Zentrale Stelle „Jetzt wichtig" im Kundenportal ---------- */
.jw-karte{padding:18px 20px;margin:0 0 18px}
.jw-karte .kh3o{margin:0 0 10px}
.jw-zeile{display:flex;align-items:center;gap:12px;padding:10px 0;border-bottom:1px solid var(--hair);color:inherit;text-decoration:none;min-height:44px}
.jw-zeile:last-child{border-bottom:none;padding-bottom:2px}
a.jw-zeile:hover .jw-titel{text-decoration:underline;text-underline-offset:2px}
.jw-chip{flex:none;font-size:10.5px;font-weight:650;text-transform:uppercase;letter-spacing:.03em;padding:2.5px 8px;border-radius:var(--rs);white-space:nowrap}
.jw-chip.jw-handeln{background:var(--accentSoft);color:var(--accentDark)}
/* Ungelesen ist ein Aufmerksamkeits-Akzent (Orange), kein Erfolgszustand */
.jw-chip.jw-neu{background:var(--accentSoft);color:var(--accentDark)}
.jw-chip.jw-krit{background:var(--redSoft);color:var(--red)}
.jw-titel{flex:1;min-width:0;font-size:14px;font-weight:400;color:var(--text);line-height:1.4}
.jw-aktion{flex:none;font-size:13px;font-weight:600;color:var(--text);white-space:nowrap}
@media (max-width:560px){
  .jw-zeile{flex-wrap:wrap;gap:8px}
  .jw-titel{flex:1 1 100%;order:3}
  .jw-aktion{margin-left:auto}
}

/* Anzahlungs-Erinnerung im Kundenportal */
.kanza-streifen{display:flex;align-items:center;gap:16px;justify-content:space-between;background:var(--panel);border:1px solid var(--hair);border-left:3px solid var(--accent);border-radius:var(--r);padding:15px 20px;margin:0 0 18px}
.kanza-streifen.ueber{border-left-color:#c0392b}
.kanza-txt{display:flex;align-items:flex-start;gap:10px;min-width:0}
.kanza-led{width:9px;height:9px;border-radius:50%;background:var(--accent);margin-top:6px;flex:none}
.kanza-streifen.ueber .kanza-led{background:#c0392b}
.kanza-txt b{font-weight:600;display:block}
.kanza-sub{display:block;font-size:13.5px;color:var(--muted);margin-top:2px}
.kanza-btn{white-space:nowrap;flex:none}
.kanza-aktionen{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end}
@media (max-width:560px){.kanza-streifen{flex-direction:column;align-items:stretch}}

/* ---------- Betreuung-Aktivierung (Onboarding-Tab) ---------- */
.betr-uebersicht{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--hair);border:1px solid var(--hair);border-radius:10px;overflow:hidden;margin:2px 0 4px}
.betr-u{display:flex;flex-direction:column;gap:2px;background:var(--panel);padding:12px 14px}
.betr-uk{font-size:12px;color:var(--muted);text-transform:uppercase;letter-spacing:.03em}
.betr-uv{font-size:15px;font-weight:600}
.betr-warn{font-size:13px;color:var(--accentDark);background:var(--accentSoft);border-radius:8px;padding:10px 12px;margin:12px 0 0}
.betr-form{margin:0}
.betr-zeile{display:flex;align-items:flex-start;gap:9px;font-size:14px;padding:6px 0}
.betr-dot{width:9px;height:9px;border-radius:50%;flex:none;margin-top:5px}
.betr-dot.ok{background:#2f9e44}
.betr-dot.offen{background:var(--accent)}
.betr-sevdesk{margin-top:6px;border-top:1px solid var(--hair);padding-top:10px}
.betr-sevdaten{font-size:12.5px;color:var(--muted);background:var(--panel2);border-radius:8px;padding:9px 12px;margin:6px 0 0}
@media (max-width:560px){.betr-uebersicht{grid-template-columns:1fr}}

/* ---------- Testmodus ---------- */
.testmodus{border-style:dashed;border-color:var(--line2)}
.testmodus.an{border-style:solid;border-color:#bfe3c6;background:#f6fbf7}
.testmodus-btns{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-top:4px}
.testmodus-btns form{margin:0}

/* ========================================================================== */
/* UI-FINALRUNDE 2026-07-19: ruhig, hochwertig, konsistent                    */
/* Dieser Block ist die verbindliche visuelle Ebene für Cockpit und Portal.   */
/* ========================================================================== */

:root{
  --ui-bg:#f7f7f5;--ui-panel:#fff;--ui-line:#e5e5e1;--ui-line-strong:#d8d8d2;
  --ui-text:#1d1d1b;--ui-muted:#6f716f;--ui-soft:#f2f2ef;--ui-orange:#ed5a17;
}
body,.app,.kportal{background:var(--ui-bg);color:var(--ui-text)}
.card,.dsek,.obcard,.vlcard{background:var(--ui-panel);border-color:var(--ui-line);box-shadow:0 1px 2px rgba(25,25,22,.035)}
.muted,.lmut,.sub,.obhint,.obkarte-sub,.obseite-klein,.kperson-sub{color:var(--ui-muted);font-size:max(13.5px,1em);line-height:1.55}
.btn,.mini,.toolbtn{box-shadow:none!important}
.btn.primary{background:var(--ui-text);border-color:var(--ui-text);color:#fff}
.btn.primary:hover{background:#30302d;border-color:#30302d}
.btn.ghost{background:transparent;color:var(--ui-muted)}

/* Durchgehendes Vertrags- und Zahlungs-Onboarding */
.vlshell{max-width:1120px}
.vlcard{padding:34px 36px;border-radius:12px}
.vlcard .kh1{font-size:clamp(30px,3.2vw,42px);line-height:1.12;letter-spacing:-.035em;margin-bottom:12px}
.vllead{font-size:18px;line-height:1.5;margin:0 0 10px}
.vltext,.vlintro-text{font-size:15.5px;line-height:1.65;max-width:720px;color:var(--ui-muted)}
.vlprog{margin-bottom:20px}.vlprog-kopf{font-size:14px}.vlprog-line{gap:7px}
.vlseg{height:4px;background:#dfdfda}.vlseg.ok{background:var(--ui-orange)}.vlseg.aktiv{background:var(--ui-text)}
.vldok.vldok-kompakt{display:flex;align-items:center;justify-content:space-between;gap:28px;padding:20px 22px;margin:22px 0;border:1px solid var(--ui-line);border-radius:10px;background:#fff}
.vldok-kompakt>div:first-child{display:flex;flex-direction:column;gap:4px;min-width:0}
.vldok-art{font-size:11px;text-transform:uppercase;letter-spacing:.08em;color:var(--ui-muted)}
.vldok-kompakt .vldok-name{font-size:15px;margin:0}.vldok-kompakt small{font-size:13.5px;line-height:1.5;color:var(--ui-muted)}
.vldok-kompakt .vldok-fuss{display:flex;align-items:center;gap:16px;margin:0;flex:none}
.vldok-block{padding:20px 22px;border-color:var(--ui-line);background:#fff}
.vldok-erklaerung{font-size:14px;line-height:1.6;color:var(--ui-muted);margin:0 0 12px}
/* .vlcheck-hinweis (Pfeil-Box) abgelöst durch die saubere .vlcheck-Box, kein Pfeil mehr */
.vlcheck-hinweis{margin:18px 0 0}
.vlhinweis,.vlhinweis-neutral{display:flex;gap:5px;flex-wrap:wrap;background:var(--ui-soft);border:1px solid var(--ui-line);color:var(--ui-text);padding:14px 16px}
.vlhinweis b{color:var(--ui-text)}
.vlpreis-brutto{color:var(--ui-text)}
.vlbetrag-block{align-items:baseline}.vlbetrag-block small,.vlfaellig{font-size:14px!important;font-weight:600!important;color:var(--ui-text)!important}
.vlzahl-cta{box-shadow:none!important}.vlmandat{font-size:13.5px;line-height:1.65;color:var(--ui-muted)}
.vlaktionen{margin-top:28px;padding-top:18px;border-top:1px solid var(--ui-line)}

/* Inhaltliches Onboarding: mehr Luft, klare Auswahl, keine Senf-Pills */
.oblayout{gap:24px}.obcard{padding:30px 32px;border-radius:12px}
.obcard .obtitel{font-size:28px;letter-spacing:-.025em}.obcard .obhint{font-size:15.5px;line-height:1.65;max-width:740px}
.obcard .obbereich,.obcard .rsec.obbereich{font-size:20px;margin-top:40px}
/* Bereiche klar trennen: feine Linie über jeder Überschrift außer der ersten */
.obcard .obfeld-wrap .obbereich{border-top:1px solid var(--line);padding-top:34px;margin-top:34px}
.obcard form > .obfeld-wrap:first-of-type .obbereich{border-top:0;padding-top:0;margin-top:8px}
/* Pflicht-Einwilligung: als bewusster Bestätigungskasten statt beiläufiger Haken */
/* Einwilligung gehört optisch zur Team-Foto-Card darüber: dicht angebunden, feiner Akzent
   statt orphaner Kasten, Checkbox sauber ausgerichtet. */
.obcard .obconsent{align-items:flex-start;gap:11px;padding:12px 14px;border:1px solid var(--hair);border-radius:10px;background:var(--ui-soft);margin:-14px 0 26px;max-width:680px;line-height:1.5;font-size:13.5px;color:var(--muted)}
.obcard .obconsent input{margin-top:1px;flex:none;width:17px;height:17px}
.obcard .obfeld{margin-bottom:25px}.obcard .obfeld>label,.obcard .oblabel{font-size:15px;line-height:1.45}
.obcard .obfeld>.upblock-consent,.obcard .upblock-consent span{font-size:13px;font-weight:400;line-height:1.45;color:var(--muted)}
.obcard input,.obcard textarea,.obcard select{font-size:15px;line-height:1.5}
.obcard .obkarten{gap:12px;margin-bottom:34px}
.obcard .obkarte{padding:16px 17px;border:1px solid var(--ui-line);background:#fff;border-radius:9px;min-height:106px}
.obcard .obkarte:hover{border-color:var(--ui-line-strong);background:#fafaf8}
.obcard .obkarte.an{border-color:var(--ui-orange);background:#fff8f4;box-shadow:none}
.obkarte.an .obkarte-titel::after,.obcard .obkarte.an .obkarte-titel::after{content:""!important}
.obcard .obkarte-titel{font-size:15px}.obcard .obkarte-sub{font-size:13.5px;line-height:1.55}
.obseite{gap:14px}.obseite-karte{background:#fff;border:1px solid var(--ui-line);padding:18px 19px}
.obseite-titel{color:var(--ui-muted)}
.obzus-hinweis,.upzeile{border-radius:7px!important;background:var(--ui-soft)!important;color:var(--ui-muted)!important;border-color:var(--ui-line)!important}
.obzus-chip{background:transparent!important;border:none!important;padding:0!important}
.obzus-hinweis{border:1px solid var(--ui-line)!important}
.upblock{border-color:var(--ui-line);background:#fff}.updrop{border-color:var(--ui-line-strong);background:#fafaf8}
.updrop:hover,.updrop.drag{border-color:var(--ui-orange);background:#fff8f4}
.upzeile{display:grid!important;grid-template-columns:48px minmax(0,1fr) auto;gap:10px;padding:9px!important;margin-top:7px}
.upz-preview{display:block;width:48px;height:38px;object-fit:cover;border-radius:6px;border:1px solid var(--ui-line);background:#fff}
.upz-datei{display:grid;place-items:center;width:48px;height:38px;border:1px solid var(--ui-line);border-radius:6px;background:#fff;font-size:10px}
.upzeile.fertig{color:#277a45!important;background:#f3f8f4!important}.upzeile.fehler{color:#a33b2d!important;background:#fff5f3!important}

/* Kundenportal */
.kdash,.kmain{gap:24px}.kdash>.card,.kmain>.card{margin-bottom:22px}
.kcontact{overflow:hidden}.kcontact-row{align-items:center;gap:32px}.kperson{min-width:0}
.kkontaktwege{display:flex;flex-direction:row;flex-wrap:nowrap;gap:10px;width:auto;flex:none;justify-content:flex-end;align-items:center}
@media (max-width:600px){.kkontaktwege{flex-wrap:wrap}.kkontaktwege .btn{flex:1 1 140px}}
.kkontaktwege .btn{margin:0;width:auto;flex:0 0 auto;padding:10px 18px;white-space:nowrap;justify-content:center;background:#fff;border-color:var(--ui-line-strong);color:var(--ui-text)}
.kkontaktwege .btn:hover{border-color:var(--ui-orange);color:var(--ui-orange)}
/* Primäraktion bleibt schwarz — nur ein starker Button, der Rückruf ist sekundär */
.kkontaktwege .btn.primary{background:var(--text);border-color:var(--text);color:#fff}
.kkontaktwege .btn.primary:hover{background:#000;border-color:#000;color:#fff}
.portal-zahlung-docs,.abo-portal{padding:26px 28px}.projektzahlung-row{background:#fff;border:1px solid var(--ui-line);border-left:3px solid var(--ui-orange)}
.portal-dokumente{border-top-color:var(--ui-line)}.portal-dokument-row{padding:16px 2px}.portal-dokument-row>span:last-child{color:var(--ui-orange)}
.portal-dokument-offen{color:var(--ui-muted);cursor:default}.portal-dokument-offen>span:last-child{color:var(--ui-muted);font-weight:500}
.jw-chip,.status,.chip,.hbchip{border-radius:6px!important}
.jw-gelesen{background:#f1f1ef!important;color:var(--ui-muted)!important}
.komm-portal>.card,.komm-portal .card{margin-bottom:22px}

/* Admin-Dashboard: frei anordenbar, keine gequetschten Scrollkästen */
.kpis.drei{gap:22px;margin-bottom:24px}.kpis.drei .kpi{padding:18px 20px;border-radius:11px}
.dashgrid{column-gap:24px!important;row-gap:24px!important;grid-auto-rows:auto!important;grid-auto-flow:row dense!important;align-items:stretch!important}
.dashgrid>[data-karte]{align-self:stretch;min-width:0;display:flex}
.dashgrid>[data-karte]>.dsek{width:100%}
.dashgrid .dsek{height:auto!important;min-height:150px;overflow:visible!important;padding:24px;border-radius:11px}
.dashgrid .dk-h-kompakt .dsek,.dk-h-kompakt .dsek{min-height:120px}
.dashgrid .dk-h-standard .dsek,.dk-h-standard .dsek{min-height:190px}
.dashgrid .dk-h-gross .dsek,.dk-h-gross .dsek{min-height:280px}
.dashgrid .dsek-titel{position:static!important;margin:0 0 14px!important;padding:0 0 12px!important;border-bottom:1px solid var(--ui-line);background:transparent!important}
.dashgrid .hbzeile,.dashgrid .heutezeile,.dashgrid .terminzeile,.dashgrid .action,.dashgrid .aktzeile,.dashgrid .proj{min-height:0;padding:12px 0;align-items:center}
.hbmain{min-width:0}.hbwas{font-size:14.5px;line-height:1.4}.hbwarum{font-size:13.5px;line-height:1.45;margin-top:4px}
.hbaktionen{display:flex;align-items:center;justify-content:center;gap:7px;flex:none}.hbaktionen form{margin:0}.hb-loeschen .mini{width:30px;padding:0;font-size:18px;color:var(--ui-muted)}
.dashkopf{order:9;margin:18px 0 0;justify-content:flex-end}.dashkopf .toolbtn,.dashkopf .btn{height:34px;padding:0 12px;font-size:12.5px;color:var(--ui-muted);background:transparent}
.portal-ereignis{display:grid;grid-template-columns:8px minmax(0,1fr) auto;gap:12px;align-items:start;padding:12px 0;border-top:1px solid var(--ui-line);color:var(--ui-text);text-decoration:none;font-size:14px;line-height:1.45;font-weight:500}
.portal-ereignis:first-of-type{margin-top:12px}.portal-ereignis:hover{color:var(--ui-orange)}
.vlopt-spar{color:#b64f1c;background:none;padding:0}
.quickgruppe{margin-top:18px}.quickgruppe:first-child{margin-top:0}.quickgruppe-titel{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--ui-muted);margin-bottom:9px}
.quick{display:grid!important;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px!important}
.qtile{display:flex!important;align-items:center;gap:9px;min-height:42px;padding:8px 11px!important;border:1px solid var(--ui-line)!important;border-radius:9px!important;background:#fff!important;box-shadow:none!important}
.qtile:hover{border-color:var(--ui-orange)!important;transform:none!important}.qtile .qi{width:20px;height:20px}.qtile .qn{font-size:13px;font-weight:600}

/* Aufgaben und Kommunikation: Status zuerst, Aktionen eindeutig */
.kommzeile{display:grid;gap:14px;padding:15px 10px;font-size:14px;border-color:var(--ui-line)}
.komm-vorgang{grid-template-columns:8px minmax(150px,1.1fr) auto minmax(180px,2fr) auto auto}
.komm-mitteilung{grid-template-columns:minmax(150px,1.1fr) auto minmax(180px,2fr) auto auto}
.kommneu{display:grid;place-items:center}
.kommzeile:hover{background:#fafaf8}.kommzeile .status{justify-self:end}
.vgtyp-grid{gap:12px}.vgtyp-card{border-color:var(--ui-line)!important;background:#fff!important;border-radius:10px!important}
.vgtyp-card.an{border-color:var(--ui-orange)!important;background:#fff8f4!important}
.hb-loeschen{display:inline-flex}

/* Das Foto ist bewusst näher als die Ganzkörperaufnahme, ohne Kopf oder Arme abzuschneiden. */
.kfoto.gross{width:96px!important;height:116px!important;object-fit:cover!important;object-position:center 28%!important;background:#f2f2f0!important}
.kperson{align-items:center!important}

/* Einheitliches natives Uploadfeld: Dateiname und Schaltfläche dürfen nie abgeschnitten werden. */
input[type="file"]{display:block;width:100%;max-width:100%;min-width:0;box-sizing:border-box;padding:8px;border:1px solid var(--ui-line-strong);border-radius:8px;background:#fff;font-size:14px;line-height:1.35;overflow:visible!important;white-space:normal}
input[type="file"]::file-selector-button{margin:-2px 12px -2px -2px;padding:8px 12px;border:1px solid var(--ui-line-strong);border-radius:7px;background:#fff;color:var(--ui-text);font:inherit;font-weight:650;cursor:pointer}

/* Zentrale Konditionen: Leistungen sind sichtbar als kundenspezifische Quelle */
.konditionen-card{border-top:1px solid var(--ui-line);padding:28px 30px}
.konditionen-card .hintline{font-size:14.5px;line-height:1.6;max-width:780px}
.konditionen-card .rsec{margin:32px 0 8px;font-size:13px;color:var(--ui-text);font-weight:700}
.konditionen-card .frow{min-height:58px}.konditionen-card .fk{font-size:14px}.konditionen-card .pfield{font-size:14.5px;background:#fff;border-color:var(--ui-line-strong);box-shadow:none}

@media(max-width:900px){
  .kkontaktwege{width:100%;grid-template-columns:1fr}.kcontact-row{align-items:stretch}
  .kommzeile{grid-template-columns:1fr auto}.kommzeile>*{min-width:0}
  .vldok.vldok-kompakt{align-items:flex-start;flex-direction:column}.vldok-kompakt .vldok-fuss{width:100%}
}
@media(max-width:640px){
  .vlcard,.obcard{padding:23px 19px}.vlcheck-hinweis::before{display:none}
  .vlaktionen{align-items:stretch}.vlaktionen>*{max-width:100%}.vlaktionen .btn{justify-content:center}
  .upzeile{grid-template-columns:42px minmax(0,1fr)}.upz-status{grid-column:2}.upz-preview,.upz-datei{width:42px;height:36px}
  .dashgrid{gap:16px!important}.dashgrid .dsek{padding:20px;min-height:0!important}
}

/* Paketvorlagen: globale Basis klar von kundenspezifischen Daten trennen */
.paketkarte{margin:0 0 18px;padding:22px 24px;border:1px solid var(--ui-line);border-radius:11px;background:#fff}
/* Einklappbare Paketbereiche in den Einstellungen */
.paketgruppe{margin:14px 0 0;border:1px solid var(--hair);border-radius:10px;background:var(--panel)}
.paketgruppe>summary{cursor:pointer;list-style:none;padding:13px 16px;font-weight:650;font-size:14px;display:flex;align-items:center;gap:8px}
.paketgruppe>summary::before{content:"›";display:inline-block;transition:transform .15s;color:var(--dim)}
.paketgruppe[open]>summary::before{transform:rotate(90deg)}
.paketgruppe>summary::-webkit-details-marker{display:none}
.paketgruppe .paketkarte{margin:0 14px 14px}
/* Leistungen als einzelne Zeilen: Editor in Einstellungen und Kundenakte */
.leist-rows{display:flex;flex-direction:column;gap:1px;margin:8px 0 12px}
.leist-row{display:flex;align-items:center;gap:9px;padding:2px 0;border-bottom:1px solid transparent;transition:border-color .12s}
.leist-row:hover{border-bottom-color:var(--hair)}
.leist-row::before{content:"";flex:none;width:5px;height:5px;border-radius:50%;background:var(--accent);opacity:.5}
.leist-editor .leist-row input,.leist-editor-form .leist-row input{flex:1;min-width:0;white-space:normal;font-size:14px;color:var(--text);
  border:1px solid transparent;border-radius:8px;background:transparent;padding:8px 9px;transition:background .12s,border-color .12s}
.leist-row input:hover{background:var(--panel2)}
.leist-row input:focus{background:var(--panel);border-color:var(--line2);outline:none}
.leist-tools{display:flex;gap:2px;flex:none;opacity:0;transition:opacity .12s}
.leist-row:hover .leist-tools,.leist-row:focus-within .leist-tools{opacity:1}
.leist-tools .mini{border:0;background:transparent;color:var(--dim);width:27px;height:27px;font-size:15px;padding:0}
.leist-tools .mini:hover{color:var(--text);background:var(--panel2)}
.leist-tools .mini.del:hover{color:var(--red);background:var(--redSoft)}
.leist-add{align-self:flex-start;border:0;background:transparent;color:var(--accent);font-weight:600;font-size:13px;padding:8px 2px 2px}
.leist-add:hover{color:var(--accentDark);background:transparent}
.paketkarte-abo{padding:26px 28px}.paketkarte-kopf{display:grid;grid-template-columns:minmax(220px,1.2fr) repeat(3,minmax(135px,.6fr));gap:16px;align-items:end}
.paketkarte label{display:grid;gap:7px;font-size:13px;font-weight:650;color:var(--ui-muted)}
.paketkarte input,.paketkarte textarea{width:100%;min-width:0;padding:10px 12px;border:1px solid var(--ui-line-strong);border-radius:8px;background:#fff;color:var(--ui-text);font:inherit;font-size:14px;line-height:1.5}
.paketkarte input:focus,.paketkarte textarea:focus{outline:none;border-color:var(--ui-text)}
.paketname input{font-size:17px;font-weight:700}.paketpreis{display:flex;align-items:center;gap:7px;white-space:nowrap}.paketpreis input{min-width:90px}
.paketbeschreibung,.paketleistungen{margin-top:18px}.paketleistungen>span{display:flex;align-items:baseline;gap:8px}.paketleistungen small{font-weight:500;color:var(--ui-muted)}
.paketleistungen textarea{min-height:154px;resize:vertical}.pakethinweis{margin:12px 0 0;max-width:820px;font-size:13.5px;line-height:1.55;color:var(--ui-muted)}
.paketkarte-fuss{display:flex;justify-content:flex-end;margin-top:18px;padding-top:16px;border-top:1px solid var(--ui-line)}

/* Persönlicher Kontakt: ruhige Querkarte, Bild zeigt eine echte Situation statt Portrait-Zoom */
.kcontact{padding:27px 30px!important}.kcontact>.kh3o{margin:5px 0 20px}.kcontact-row{display:flex;align-items:center;justify-content:space-between;gap:28px;min-width:0}
.kperson{display:flex;align-items:center;gap:18px;min-width:0}.kfoto.gross{width:116px;height:116px;flex:none;border-radius:12px;object-fit:cover;object-position:center 22%;background:var(--ui-soft)}
.kperson-name{display:block;margin-bottom:4px;font-size:16px}.kperson-sub{display:block;max-width:390px;font-size:14px!important;line-height:1.55!important}
.kkontaktwege{width:auto;max-width:none;justify-content:flex-end}

/* Offene Handlungen stehen im Portal oben; reine Infos sehen bewusst anders aus */
.portal-aktionskarte{border-left:3px solid var(--ui-orange)!important}.portal-infokarte{border-left:3px solid var(--ui-line-strong)!important}
.portal-aktionskarte .kh3o,.portal-infokarte .kh3o{margin:5px 0 4px}.portal-aktionskarte .hintline,.portal-infokarte .hintline{margin:0 0 14px}
.kaufgabe-info .kaufgabe-typ{color:var(--ui-muted)}.kaufgabe-info .kaufgabe-aktion{color:var(--ui-text)}

/* Vorgangsdetail: Upload bleibt lesbar und genau eine Aktion schließt den Schritt ab */
.vgk-card{width:min(920px,calc(100% - 32px));max-width:920px!important;padding:34px 36px!important;overflow:visible}
.vgk-antwort{margin-top:22px;padding-top:22px;border-top:1px solid var(--ui-line)}.vgk-card .obfeld{min-width:0}.vgk-card input[type="file"]{display:block;width:100%;max-width:100%;min-width:0;padding:9px;border:1px solid var(--ui-line-strong);border-radius:8px;background:#fff;font-size:14px;overflow:visible!important;white-space:normal}
.vgk-upload small{display:block;margin-top:6px;font-size:12.5px;line-height:1.45;color:var(--ui-muted)}
.vgk-card .updatei,.vgk-card .updatei,.vgk-card .dateizeile{max-width:100%;min-width:0;overflow-wrap:anywhere}
.vgk-erledigt .btn{background:var(--ui-text);border-color:var(--ui-text);color:#fff}

/* Abo vor Livegang: neutraler Zustand statt Senfgelb und ohne übergroßen Betrag */
.abo-portal-grid{background:#fff}.abo-portal-preis b{font-size:25px!important;letter-spacing:-.025em!important}.abostatus.probe,.abostatus.wartet{background:var(--ui-soft)!important;color:var(--ui-text)!important;border:1px solid var(--ui-line-strong)}
.abo-startinfo{display:grid;gap:4px;margin:18px 0 2px;padding:15px 17px;border-left:3px solid var(--ui-orange);background:var(--ui-soft);font-size:14px;line-height:1.5}
.abo-startinfo b{font-size:14.5px}.abo-startinfo span{color:var(--ui-muted)}.abo-rechnungshinweis{margin:15px 0 2px;font-size:14px;line-height:1.5;color:var(--ui-muted)}
.abo-portal-meta{padding-top:18px;border-top:1px solid var(--ui-line)}

@media(max-width:1080px){
  .paketkarte-kopf{grid-template-columns:1fr 1fr}
}
@media(max-width:720px){
  .paketkarte,.paketkarte-abo{padding:20px}.paketkarte-kopf{grid-template-columns:1fr}.kcontact{padding:23px 20px!important}.kcontact-row{grid-template-columns:1fr}.kperson{align-items:flex-start}.kfoto.gross{width:108px;height:78px}.kkontaktwege{grid-template-columns:1fr}.vgk-card{width:calc(100% - 20px);padding:25px 20px!important}
}

/* Kontaktbild: echte Arbeitssituation im Querformat (Laptop + Telefon), kein Portrait-Zoom.
   Der Ausschnitt ist bereits passend zugeschnitten, das Bild füllt den Rahmen ohne Skalierung. */
.kfotorahmen{flex:none;width:176px;height:132px;border-radius:14px;overflow:hidden;background:#f2f2f0;display:block}
.kfotorahmen .kfoto.gross{width:100%!important;height:100%!important;object-fit:cover!important;object-position:center center!important;transform:none;border-radius:0!important}

/* Klarer Systemzustand statt Status-Pillen und stillem Seitenwechsel */
.aktion-meldung{margin:0 0 18px;border-radius:10px;padding:16px 18px;font-size:14px;line-height:1.5}
.betr-aktivieren-form{display:flex;align-items:center;gap:14px;flex-wrap:wrap}.betr-aktivieren-status{font-size:13px;color:var(--ui-muted);line-height:1.4;max-width:520px}
.abo-status-text{font-size:13px;color:var(--ui-muted);font-weight:650}.abo-status-text.aktiv{color:#267747}.abo-status-text.endet{color:#a34430}
.kperson{align-items:center!important}

/* Kommunikation: Neuigkeiten zuerst; jeder Bereich erhält sichtbar eigenen Raum */
.komm-portal-stack{display:grid;gap:32px;margin-top:24px}
.komm-portal-stack>.card,.komm-portal-stack .khaupt,.komm-portal-stack .knews{margin:0!important}
.nachrichten-bereich{display:grid;gap:16px;padding:26px 28px;border:1px solid var(--ui-line);border-radius:12px;background:#fff}
.nachrichten-kopf{display:grid;gap:5px}.nachrichten-kopf h2{margin:0;font-size:21px;letter-spacing:-.015em}.nachrichten-kopf .kicker{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--ui-muted)}
.komm-news{display:grid;gap:18px}.komm-news .kngrid{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:16px!important}.komm-news .knews,.komm-news .knews:only-child{grid-column:auto!important;max-width:none!important;height:100%;padding:20px!important}
.komm-anliegen{padding:0!important;border:0!important;box-shadow:none!important}.nachrichten-kontakt{margin-top:4px}

/* Arbeitskorb: kleine, mittig ausgerichtete Sofort-Löschaktion */
.hb-loeschen .mini{display:grid!important;place-items:center!important;width:26px!important;height:26px!important;min-height:26px!important;padding:0!important;border-radius:7px!important;font-size:14px!important;line-height:1!important;color:var(--ui-muted)!important}
.hbzeile{position:relative}.hbmain{padding-right:2px}.hbzeile:hover{background:#fafaf8}.hb-loeschen .mini:hover{border-color:var(--ui-orange)!important;color:var(--ui-orange)!important;background:#fff!important}
.terminzeit{text-align:center;font-variant-numeric:tabular-nums}
.tablecard .aktionszeile{display:flex;justify-content:flex-end;align-items:center;gap:8px;flex-wrap:nowrap}.tablecard .aktionszeile form{margin:0}.tablecard .aktionszeile .btn,.tablecard .aktionszeile .mini{white-space:nowrap;min-height:36px;display:inline-flex;align-items:center;justify-content:center;padding:0 11px;line-height:1.2}

@media(max-width:720px){
  .kfotorahmen{width:148px;height:111px}
  .komm-portal-stack{gap:22px;margin-top:20px}
  .nachrichten-bereich{padding:22px 18px}.komm-news .kngrid{grid-template-columns:1fr!important}
}

/* Onboarding-Hinweise: bearbeitbare Zeilen */
.obh-liste{display:flex;flex-direction:column;gap:8px}
.obh-zeile{display:flex;align-items:center;gap:8px}
.obh-zeile .obh-schritt{flex:none;font-size:12.5px;font-weight:650;color:var(--dim);min-width:120px}
.obh-zeile input[name=text]{flex:1;min-width:0}

/* Einmaliger Mehrnutzer-Hinweis im Portal */
.kmehrnutzer{display:flex;align-items:center;justify-content:space-between;gap:14px;margin:0 0 14px;padding:11px 14px;border:1px solid var(--hair);border-radius:9px;background:var(--panel2);font-size:13px;color:var(--muted)}
.kmehrnutzer .mini{flex:none}

/* Portal-Upload: Status je Datei, lange Namen umbrechen */
.kupload-queue{display:flex;flex-direction:column;gap:6px;margin:0 0 10px}
.kupz{display:flex;align-items:center;gap:10px;font-size:13px;padding:7px 10px;border:1px solid var(--hair);border-radius:8px;background:var(--panel2)}
.kupz-name{flex:1;min-width:0;overflow-wrap:anywhere}
.kupz-stat{flex:none;color:var(--muted);font-variant-numeric:tabular-nums}
.kupz.fertig .kupz-stat{color:var(--green)}
.kupz.fehler{border-color:#e7b9ae;background:#fdf1ee}
.kupz.fehler .kupz-stat{color:#a12b1c}
.updatei-name{overflow-wrap:anywhere}
.kdatei .kdatei-name{overflow-wrap:anywhere}

/* Nachrichten-Karten: Kopfzeile mit Abstand, Lesestatus als ruhiger Akzent */
.knews-meta{display:flex;align-items:center;gap:10px}
.knews-art{font-size:11px;font-weight:650;letter-spacing:.06em;text-transform:uppercase;color:var(--dim)}
.knews-lesestatus{font-size:11.5px;font-weight:650}
.knews-lesestatus.ungelesen{color:var(--accentDark)}
.knews-lesestatus.ungelesen::before{content:"";display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--accent);margin-right:5px;vertical-align:1px}
.knews-lesestatus.gelesen{color:var(--dim);font-weight:500}

/* Rechnungen-Sektion im Portal */
.portal-rechnungen-liste{display:flex;flex-direction:column;border:1px solid var(--hair);border-radius:10px;overflow:hidden}
.portal-rechnung-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:13px 15px;border-bottom:1px solid var(--hair);text-decoration:none;color:var(--text)}
.portal-rechnung-row:last-child{border-bottom:none}
.portal-rechnung-row:hover{background:var(--panel2)}
.portal-rechnung-row .pr-name{display:flex;flex-direction:column;gap:2px;min-width:0}
.portal-rechnung-row .pr-name small{color:var(--muted);font-size:12.5px}
.portal-rechnung-row .pr-aktion{flex:none;font-size:13px;color:var(--accentDark);font-weight:600}
.portal-rechnung-row.offen{cursor:default}
.portal-rechnung-row.offen .pr-aktion{color:var(--dim);font-weight:500}
.portal-rechnung-row.istoffen{border-left:3px solid var(--accent);padding-left:12px}
.portal-rechnung-row.istoffen .pr-name small b{color:var(--text)}
.portal-rechnung-row.istoffen .pr-aktion{flex:none;display:flex;align-items:center;gap:12px;flex-wrap:wrap;justify-content:flex-end}
.pr-offen-tag{display:inline-block;margin-left:6px;font-size:11.5px;font-weight:600;color:var(--accentDark);background:var(--accentSoft);border-radius:4px;padding:1px 7px}
/* Lastschrift-Rechnung: ruhig, kein Handlungsbedarf — wird automatisch eingezogen. */
.portal-rechnung-row.istlastschrift{border-left:3px solid #2e7d43;padding-left:12px}
.portal-rechnung-row.istlastschrift .pr-name small b{color:var(--text)}
.pr-last-tag{display:inline-block;margin-left:6px;font-size:11.5px;font-weight:600;color:#1e7d43;background:#e8f3ec;border-radius:4px;padding:1px 7px}
.portal-rechnungen-mehr>summary{cursor:pointer;list-style:none;padding:11px 4px;font-size:13.5px;font-weight:600;color:var(--accentDark)}
.portal-rechnungen-mehr>summary::-webkit-details-marker{display:none}
.portal-rechnungen-mehr .portal-rechnungen-liste{margin-top:6px}
/* Jahres-Spar-Hinweis im Wechsel-Dialog */
.abo-sparhinweis{background:var(--accentSoft);border-radius:9px;padding:11px 13px;margin:0 0 12px;font-size:13.5px;line-height:1.5}
.abo-sparhinweis b{color:var(--accentDark);display:block}
.abo-sparhinweis span{color:var(--muted)}

/* ===== Datei-Auswahlfelder überall robust: Button nie unten abgeschnitten ===== */
.kportal input[type=file], .editform input[type=file], .vgk-card input[type="file"],
input[type="file"]:not(.obupload-input):not([hidden]){
  display:block; overflow:visible; box-sizing:border-box;
  min-height:46px; height:auto; line-height:1.7; padding:8px 12px; white-space:normal;
}
.kportal input[type=file]::file-selector-button, .editform input[type=file]::file-selector-button,
input[type="file"]::file-selector-button{ margin:0 12px 0 0; vertical-align:middle }

/* Consent-Zeile: Text IMMER rechts neben der Checkbox, auch im Onboarding (.obcard überschreibt sonst auf block) */
.upblock-consent{display:flex!important;align-items:flex-start;gap:11px}
.upblock-consent > span{flex:1 1 auto;min-width:0;text-wrap:pretty}

/* Zeilenmenü: alle Einträge (Links, Buttons, Form-Buttons) exakt gleich ausgerichtet */
.zeilenmenu-liste > a, .zeilenmenu-liste > button.menupunkt, .zeilenmenu-liste > form > button.menupunkt{
  display:block;width:100%;box-sizing:border-box;padding:8px 12px!important;text-align:left;margin:0;border-radius:7px}
.zeilenmenu-liste > form{margin:0;padding:0;border:0;background:none}

/* === Leistungen-Schritt: drei ruhige Bereiche, progressive Offenlegung === */
.obsekten{display:flex;flex-direction:column;gap:12px}
.obsek{border:1px solid var(--hair);border-radius:12px;background:var(--panel);overflow:hidden;transition:box-shadow .15s,border-color .15s}
/* Aktiver (offener) Bereich dezent hervorgehoben: nur ein feiner orangener Rahmen, kein Ring */
.obsek[open]{border-color:#e6c3a3}
.obsek-kopf{display:flex;align-items:center;gap:14px;padding:16px 18px;cursor:pointer;list-style:none;user-select:none}
.obsek-kopf::-webkit-details-marker{display:none}
.obsek-kopf:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
.obsek-txt{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.obsek-titel{font-size:15.5px;font-weight:650;color:var(--text)}
.obsek-desc{font-size:13px;color:var(--muted);line-height:1.45}
.obsek-badge{flex:none;font-size:11.5px;font-weight:600;color:var(--green);background:var(--greenSoft);border-radius:20px;padding:3px 11px}
.obsek-chev{flex:none;width:19px;height:19px;color:var(--dim);transition:transform .18s}
.obsek[open]>.obsek-kopf .obsek-chev{transform:rotate(180deg)}
.obsek[open]>.obsek-kopf{border-bottom:1px solid var(--hair)}
.obsek-body{padding:18px}
.obsek-body>.obfeld-wrap:last-child>.obfeld,.obsek-body>.obfeld-wrap:last-child>.upfold{margin-bottom:0}
/* Weiter-Führung ans Ende des Bereichs, klar aber nicht die dunkle Hauptaktion */
.obsek-weiter{display:flex;justify-content:flex-end;margin-top:20px;padding-top:16px;border-top:1px solid var(--hair)}
.obsek-weiterbtn{background:transparent;border:1px solid var(--line2);color:var(--accentDark);border-radius:8px;padding:9px 18px;font-size:13.5px;font-weight:600;cursor:pointer;display:inline-flex;align-items:center;gap:8px}
.obsek-weiterbtn::after{content:"\2192";font-weight:600}
.obsek-weiterbtn:hover{background:var(--accentSoft);border-color:#e6c3a3}

/* Hinzufügen-Aktion je Bereich: klar sichtbar, aber nicht die dunkle Hauptaktion */
.obaddbtn{width:100%;justify-content:center;margin-top:20px;background:transparent;border:1px solid var(--line2);color:var(--accentDark);font-weight:600}
.obaddbtn:hover{background:var(--accentSoft);border-color:#e6c3a3}

/* Leistungskarten: einzeln zusammenklappbar, Entfernen dezent */
.obrepeat-kopf{display:flex;align-items:center;justify-content:space-between;gap:10px}
.obrepeat-name{font-size:14.5px;font-weight:600;color:var(--text);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.obrepeat-edit{flex:none;background:none;border:none;padding:4px 2px;font-size:13px;font-weight:600;color:var(--accentDark);cursor:pointer}
.obrepeat-edit:hover{text-decoration:underline}
.obrepeat-karte:not(.zu) .obrepeat-edit{display:none}
.obrepeat-karte:not(.zu) .obrepeat-name{color:var(--muted);font-size:13px;font-weight:600;text-transform:uppercase;letter-spacing:.04em}
.obrepeat-body{margin-top:14px}
.obrepeat-karte{padding:16px}
.obrepeat-karte.zu{padding:12px 16px}
.obrepeat-karte.zu .obrepeat-body{display:none}
/* Aktionen logisch am Kartenende: Entfernen dezent links, Fertig als klare Aktion rechts */
.obrepeat-akt{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:16px;padding-top:14px;border-top:1px solid var(--hair)}
.obrepeat-weg{background:none;border:none;padding:0;font-size:12.5px;color:var(--muted);text-decoration:underline;cursor:pointer}
.obrepeat-weg:hover{color:var(--red)}
.obrepeat-fertig{flex:none;background:var(--panel);color:var(--text);border:1px solid var(--line2);border-radius:8px;padding:9px 20px;font-size:13.5px;font-weight:600;cursor:pointer}
.obrepeat-fertig:hover{border-color:var(--text);background:var(--panel2)}
.obrepeat-karte .obfeld-haupt{margin-bottom:12px}
.obrepeat-karte .obfeld-haupt input{font-weight:600}

/* Optionale Unterlagen: dezente Zeile, Uploadfläche erst nach Klick, flacher */
.upfold{padding:0;background:#fbfaf8;border:1px solid var(--hair);border-radius:10px;box-shadow:none;margin:0 0 18px}
.upfold.voll{background:#fcfdfb;border-color:#cfe5d6}
.upfold-kopf{display:flex;align-items:center;gap:11px;padding:13px 15px;cursor:pointer;list-style:none;color:var(--muted);font-size:13.5px}
.upfold-kopf::-webkit-details-marker{display:none}
.upfold-kopf:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
.upfold-icon{flex:none;display:inline-flex;color:var(--dim)}
.upfold-icon svg{width:18px;height:18px}
.upfold-titel{flex:1;min-width:0;line-height:1.4}
.upfold-zahl{display:inline-block;margin-left:4px;font-size:12px;font-weight:600;color:var(--green)}
.upfold[open]>.upfold-kopf .obsek-chev{transform:rotate(180deg)}
.upfold-body{padding:2px 15px 14px}
.upfold .updrop.flach{margin-top:6px;padding:15px 14px;border-width:1px}

@media (max-width:560px){
  .obsek-kopf{padding:14px;gap:10px}
  .obsek-body{padding:14px}
  .obsek-titel{font-size:15px}
  .upfold-body{padding:2px 12px 12px}
}

/* Letzte API-Fehler: lesbare Blöcke statt einer zerquetschten Statusspalte */
.apilog{min-width:0}
.apilog-zeile{padding:10px 0;border-top:1px solid var(--hair)}
.apilog-zeile:first-child{border-top:0}
.apilog-kopf{display:flex;justify-content:space-between;gap:10px;font-size:12px;color:var(--muted)}
.apilog-status{color:var(--red);font-weight:600;flex:none}
.apilog-aktion{margin-top:3px;font-size:12.5px;color:var(--text);overflow-wrap:anywhere}
.apilog-antwort{margin-top:5px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:11px;line-height:1.5;color:var(--muted);background:var(--panel2);border-radius:6px;padding:8px 10px;white-space:normal;overflow-wrap:anywhere;max-height:120px;overflow:auto}

/* Auswahlfelder dürfen den Text unten NIE abschneiden.
   Ursache war eine feste Höhe (36px) plus 10px Innenabstand oben/unten: es blieben nur ~16px
   für eine ~18px hohe Textzeile. Lösung: keine feste Höhe, sondern Mindesthöhe + Padding,
   das die Zeile vollständig aufnimmt. Gilt für alle Auswahlfelder in Portal und Cockpit. */
select,.editform select,.obfeld select,.obcard select,.zrow select,.zaakt select,.gbulk select{
  height:auto;min-height:var(--feldh);line-height:1.3;padding-top:6px;padding-bottom:6px;
}

/* ===== Abschlussseite: Status, fehlende Angaben, Übersicht-Akkordeon, Fragen ===== */
.obcard .obabstatus{border:1px solid var(--line);border-radius:10px;padding:16px 18px;margin:6px 0 4px}
.obcard .obabstatus b{font-size:16px;font-weight:600;display:block}
.obcard .obabstatus p{margin:5px 0 0;font-size:13.5px;line-height:1.55;color:var(--muted)}
.obcard .obabstatus.offen{background:#fdf6ec;border-color:#f0dcc0}
.obcard .obabstatus.offen b{color:var(--accentDark)}
.obcard .obabstatus.fertig{background:#eef7f0;border-color:#cfe8d6}
.obcard .obabstatus.fertig b{color:var(--green)}

.obabfehlt{display:flex;flex-direction:column;gap:8px;margin:10px 0 2px}
.obabf-zeile{display:flex;align-items:center;gap:12px;border:1px solid var(--line);border-radius:9px;
  padding:12px 14px;background:var(--panel);text-decoration:none;color:inherit;transition:border-color .12s,background .12s}
.obabf-zeile:hover{border-color:var(--line2);background:#fcfaf7}
.obabf-name{flex:1;min-width:0;font-size:14px;font-weight:600}
.obabf-zahl{font-size:12.5px;font-weight:650;color:var(--accentDark);white-space:nowrap}
.obabf-cta{font-size:13px;font-weight:600;color:var(--accentDark);white-space:nowrap}

/* Übersicht als Akkordeon: Kopf ist ein Button über die volle Breite */
.obcard .obzus-kopf{display:flex;align-items:center;gap:10px;width:100%;margin:0;
  background:none;border:0;padding:0;cursor:pointer;text-align:left;font:inherit}
.obcard .obzus-titel{flex:1;min-width:0;font-size:15px;font-weight:600;color:var(--text)}
.obzus-pfeil{flex:none;width:9px;height:9px;border-right:2px solid var(--dim);border-bottom:2px solid var(--dim);
  transform:rotate(45deg);transition:transform .15s;margin:-3px 2px 0 4px}
.obzus-karte.aufgeklappt .obzus-pfeil{transform:rotate(225deg);margin-top:3px}
.obcard .obzus-inhalt{margin-top:12px}
.obcard .obzus-inhalt .obzus-werte{margin-top:0;border-top:1px solid var(--hair);padding-top:10px}
.obcard .obzus-inhalt .obzus-edit{display:inline-flex;align-items:center;justify-content:center;
  line-height:1;margin-top:10px}
.obzus-karte.offen .obzus-titel{color:var(--accentDark)}

/* Offene Fragen einzeln */
.obfragen{display:flex;flex-direction:column;gap:10px}
.obcard .obfrage-item{border:1px solid var(--line);border-radius:9px;padding:12px 14px;background:var(--panel);margin:0}
.obfrage-kopf{display:flex;align-items:center;gap:10px;justify-content:space-between}
.obfrage-bereich{font-size:12px;letter-spacing:.03em;text-transform:uppercase;color:var(--dim);font-weight:600}
.obfrage-akt{display:flex;gap:8px;flex:none}
.obfrage-text{margin:8px 0 0;font-size:14px;line-height:1.55;color:var(--text)}
.obcard .obfrage-editor{margin-top:10px}
.obcard .obfrage-editor textarea{width:100%;border:1px solid var(--line2);border-radius:8px;padding:10px 12px;
  font:inherit;font-size:14px;line-height:1.5;resize:vertical}
.obfrage-akt2{display:flex;gap:8px;justify-content:flex-end;margin-top:8px}
.obfrage-edit.mini,.obfrage-del.mini{background:none;border:0;cursor:pointer;font:inherit;font-size:13px;padding:2px 4px;color:var(--muted)}
.obfrage-edit.mini:hover{color:var(--accent)}
.obfrage-del.mini{color:var(--dim)}
.obfrage-del.mini:hover{color:#b23}

/* Sammelleiste: Speicherstatus + Gruppenhinweis; neutraler Rechtshinweis unter dem Upload */
.ufa-bulk-status{font-size:12.5px;color:var(--muted);min-height:1em;transition:color .12s}
.ufa-bulk-status.an{color:var(--muted)}
.ufa-bulk-status.ok{color:#1e7d43}
.ufa-bulk-status.fehler{color:#b23}
.ufa-bulk-n b{font-weight:600}
.ufa-rechtshinweis{margin:10px 0 0;font-size:12.5px;color:var(--dim);line-height:1.5}

/* Frisch hochgeladene Datei kurz sanft hervorheben (kein Auto-Haken mehr) */
@keyframes ufaFrisch{0%{background:#fff6ec}100%{background:transparent}}
.ufa-row.ufa-frisch{animation:ufaFrisch 2.2s ease-out}

/* Formathinweis unter dem Upload */
.upformate{margin:8px 0 0;font-size:12.5px;color:var(--dim);line-height:1.5}

/* Galerie: Kategorie-Gruppen + Galeriekopf */
#ufa-grid.ufa-grid{display:block}
/* Jede Kategorie ist ein eigener Block. Der Trennstrich sitzt oben und trennt die Kategorie
   nach oben ab; darunter Kopf, dann „Alle auswählen", dann die Dateien. */
.ufa-gruppe{margin:0;padding-top:16px;border-top:1px solid var(--line)}
.ufa-gruppe:first-child{border-top:0;padding-top:0}
.ufa-gruppe + .ufa-gruppe{margin-top:16px}
/* Kompakte Kopfzeile: Titel + Zähler links, „Alle auswählen" rechts in derselben Zeile */
.ufa-gruppe-kopf{display:flex;align-items:center;justify-content:flex-start;gap:8px;margin:0 2px 8px}
.ufa-gruppe-kopf .ufa-grpsel{margin-left:auto}
.ufa-gruppe-titel{font-size:13.5px;font-weight:650;color:var(--text);min-width:0}
.ufa-gruppe-zahl{font-size:12px;color:var(--muted);font-weight:500}
.ufa-gruppe-zahl::before{content:"· "}
/* „Alle auswählen" je Kategorie, Checkbox exakt über der Checkbox-Spalte der Zeilen */
.ufa-grpsel{flex:none;display:inline-flex;align-items:center;gap:7px;margin:0;padding:0;font-size:12.5px;color:var(--muted);cursor:pointer;white-space:nowrap}
.ufa-grpsel input{width:17px;height:17px;accent-color:var(--accent);margin:0}
.ufa-grpsel[hidden]{display:none}
/* Sammelbearbeitung je Kategorie: kompakt, keine große Farbfläche, keine zweite „Auswahl aufheben" */
.ufa-grpbulk{margin:0 0 9px;padding:9px 11px;border:1px solid var(--line);border-radius:9px;background:var(--panel2,#f6f3ee)}
.ufa-grpbulk .gb-kopf{font-size:12.5px;font-weight:600;color:var(--text);margin:0 0 7px}
.ufa-grpbulk .gb-felder{display:grid;grid-template-columns:38% 1fr;gap:7px 10px}
.ufa-grpbulk .gb-ref{grid-column:1 / -1}
.ufa-grpbulk select,.ufa-grpbulk input{font-size:13px;width:100%}
.ufa-grpbulk .gb-hint{margin:7px 0 0;font-size:12px;color:var(--muted)}
@media(max-width:640px){ .ufa-grpbulk .gb-felder{grid-template-columns:1fr} }
.ufa-gruppe-cards{display:flex;flex-direction:column;gap:8px}
.ufa-galeriekopf{display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:0 2px 10px;margin:0 0 14px;border-bottom:1px solid var(--hair)}
.ufa-gk-titel{font-size:14px;font-weight:600;color:var(--text)}
.ufa-gk-zahl{color:var(--muted);font-weight:500;margin-left:5px}

/* Kunde schließt sein Anliegen selbst ab */
.wantwort-bar{gap:10px;flex-wrap:wrap}
.wantwort-bar .spacer{flex:1 1 auto}
.wa-erledigt{white-space:nowrap}
.wa-erledigt.confirm{color:var(--green);border-color:var(--green)}
@media(max-width:520px){.wantwort-bar .spacer{display:none}.wantwort-bar{justify-content:space-between}}

/* „Nicht hochgeladen": fehlgeschlagene Uploads getrennt, dezent rot, lesbare Buttons */
.upfehlerbox{margin:10px 0 0}
.upfehler-kopf{font-size:13px;font-weight:600;color:#a3372b;margin:0 2px 8px}
.upfehler-liste{display:flex;flex-direction:column;gap:8px}
.upfail{display:flex;gap:12px;align-items:flex-start;background:#fdf4f2;border:1px solid #f0d2cc;border-radius:11px;padding:11px 13px}
.upfail-thumb{flex:none;width:44px;height:44px;border-radius:8px;object-fit:cover;background:#f2ede5}
.upfail-doc{flex:none;width:44px;height:44px;border-radius:8px;background:#f3e3df;display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:700;color:#a3372b}
.upfail-body{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.upfail-name{font-size:13px;font-weight:600;color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.upfail-grund{font-size:13px;font-weight:600;color:#a3372b}
.upfail-hinweis{font-size:12.5px;color:var(--muted);line-height:1.45}
.upfail-akt{display:flex;gap:8px;flex-wrap:wrap;margin-top:6px}
.upfail-akt .btn.klein{padding:5px 12px;font-size:12.5px}

/* Rechte Infoboxen: SO FUNKTIONIERT'S mit Titel+Satz je Schritt, DAS KANNST DU HOCHLADEN */
.obseite .obseite-karte + .obseite-karte{margin-top:16px}
.ufa-schritte{counter-reset:us;list-style:none;margin:8px 0 0;padding:0;display:flex;flex-direction:column;gap:12px}
.ufa-schritte li{counter-increment:us;position:relative;padding-left:30px}
.ufa-schritte li::before{content:counter(us);position:absolute;left:0;top:1px;width:21px;height:21px;border-radius:50%;
  background:var(--panel2,#f3efe8);color:var(--muted);font-size:12px;font-weight:600;display:flex;align-items:center;justify-content:center}
.ufa-schritte li b{display:block;font-size:13px;font-weight:600;color:var(--text)}
.ufa-schritte li span{display:block;font-size:12.5px;color:var(--muted);line-height:1.5;margin-top:1px}
.ufa-kann-gruppe{margin:2px 0 10px}
.ufa-kann-gruppe b{font-size:12.5px;font-weight:600;color:var(--text)}
.ufa-kann-gruppe ul{margin:4px 0 0;padding-left:16px;font-size:12.5px;color:var(--muted);line-height:1.65}

/* Etappe 5: rechte Infospalte startet exakt auf Höhe der Hauptkarte (alle Onboarding-Seiten) */
.obhaupt.mit-seite{align-items:start}
.obhaupt.mit-seite > .obcard{margin-top:0}
.obhaupt.mit-seite > .obseite{margin-top:0}
.obseite{gap:16px}

/* Kategorie-Combobox: Chip + Popover mit Beschreibungen */
/* Kategorie-Chip: immer einzeilig, langer Name wird mit Ellipsis gekürzt (Tooltip via title) */
.ufa-katchip{position:relative;width:100%;max-width:100%;text-align:left;display:block;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  min-height:var(--feldh);padding:7px 30px 7px 12px;border:1px solid var(--line2);border-radius:9px;background:#fff;
  font:inherit;font-size:13.5px;line-height:1.5;color:var(--text);cursor:pointer}
.ufa-katchip::after{content:"";position:absolute;right:12px;top:50%;width:7px;height:7px;border-right:2px solid var(--dim);border-bottom:2px solid var(--dim);transform:translateY(-70%) rotate(45deg)}
.ufa-katchip:hover{border-color:var(--dim)}
.ufa-katchip.leer{color:var(--muted)}
.ufa-katpop{position:absolute;z-index:60;min-width:250px;max-width:340px;background:#fff;border:1px solid var(--line2);
  border-radius:11px;box-shadow:0 12px 34px rgba(40,30,15,.16);padding:6px;max-height:60vh;overflow:auto}
.ufa-katopt{display:block;width:100%;text-align:left;background:none;border:0;border-radius:8px;padding:9px 11px;cursor:pointer;font:inherit}
.ufa-katopt:hover{background:#faf6ef}
.ufa-katopt.an{background:#fdf6ec}
.ufa-katopt-l{display:block;font-size:13.5px;font-weight:600;color:var(--text)}
.ufa-katopt-d{display:block;font-size:12px;color:var(--muted);line-height:1.4;margin-top:1px}

/* Datei-Seite entschlackt: Galeriekopf mit „Alle" links, Hilfe-Akkordeon, „Weitere Dateien" */
.ufa-galeriekopf{display:flex;align-items:center;gap:10px}
.ufa-galeriekopf .ufa-alle{display:flex;align-items:center;gap:7px;margin:0;padding:0 4px 0 2px;font-size:12.5px;color:var(--muted);cursor:pointer;white-space:nowrap}
.ufa-galeriekopf .ufa-alle input{width:18px;height:18px;accent-color:var(--accent);margin:0}
.ufa-mehr,.ufa-mehr-ende{display:inline-flex;align-items:center;gap:7px;background:none;border:1px solid var(--line2);border-radius:9px;
  padding:7px 13px;font:inherit;font-size:13px;color:var(--text);cursor:pointer;white-space:nowrap}
.ufa-mehr:hover,.ufa-mehr-ende:hover{border-color:var(--dim);background:#fcfaf7}
.ufa-mehr-ende{width:100%;justify-content:center;margin-top:14px;border-style:dashed;color:var(--muted)}
.upformzeile{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:8px 0 0}
.upformzeile .upformate{margin:0;font-size:12.5px;color:var(--dim)}
.upformate-det{font-size:12.5px}
.upformate-det summary{cursor:pointer;color:var(--accent);font-size:12.5px;list-style:none}
.upformate-det summary::-webkit-details-marker{display:none}
.upformate-det[open] summary{margin-bottom:5px}
.upformate-det p{margin:0;font-size:12px;color:var(--muted);line-height:1.6}
/* Hilfe-Akkordeon rechts */
.ufa-hilfe-acc{border-top:1px solid var(--hair)}
.ufa-hilfe-acc:first-of-type{border-top:0;margin-top:6px}
.ufa-hilfe-kopf{display:flex;align-items:center;justify-content:space-between;gap:10px;width:100%;background:none;border:0;
  padding:11px 0;font:inherit;font-size:13px;font-weight:600;color:var(--text);text-align:left;cursor:pointer}
.ufa-hilfe-pfeil{flex:none;width:8px;height:8px;border-right:2px solid var(--dim);border-bottom:2px solid var(--dim);transform:rotate(45deg);margin-top:-3px;transition:transform .15s}
.ufa-hilfe-kopf[aria-expanded="true"] .ufa-hilfe-pfeil{transform:rotate(225deg);margin-top:2px}
.ufa-hilfe-inhalt{padding:0 0 12px}
.ufa-hilfe-inhalt p{margin:0 0 8px;font-size:12.5px;color:var(--muted);line-height:1.55}
.ufa-hilfe-schritte{margin:0;padding-left:18px;font-size:12.5px;color:var(--text);line-height:1.7}
.ufa-hilfe-liste{margin:0 0 8px;padding-left:16px;font-size:12.5px;color:var(--muted);line-height:1.65}
.ufa-hilfe-fuss{font-size:12.5px;color:var(--muted);font-style:italic}

/* Zwei Phasen: hochladen (oben) / zuordnen (unten). Nur ein sichtbarer Uploadweg. */
.ufa-zuordnen{margin:28px 0 12px}
.ufa-zu-titel{font-size:17px;font-weight:600;margin:0;color:var(--text)}
.ufa-zu-sub{margin:3px 0 0;font-size:13px;color:var(--muted);line-height:1.5}
.ufa-galeriekopf{position:sticky;top:8px;z-index:6;background:#fff}
.ufa-gk-zahl-wrap{font-size:12.5px;color:var(--muted)}
.ufa-gk-zahl{font-weight:600;color:var(--text)}
.ufa-sticky-add{display:inline-flex;align-items:center;gap:7px;background:none;border:1px solid var(--line2);border-radius:9px;
  padding:6px 12px;font:inherit;font-size:12.5px;color:var(--text);cursor:pointer}
.ufa-sticky-add:hover{border-color:var(--dim);background:#fcfaf7}
.ufa-sticky-add.versteckt{display:none}
.ufa-bulk{position:static}
.upformate-det summary{color:var(--muted);font-weight:400}
.upformate-det summary:hover{color:var(--text)}

/* Benachrichtigungs-Einstellungen */
.digest-zeiten{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}
.digest-zeit{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--line2);border-radius:9px;padding:7px 12px;font-size:13px;cursor:pointer;color:var(--text)}
.digest-zeit.an{border-color:var(--accent);background:#fdf6ec}
.digest-zeit input{accent-color:var(--accent);margin:0}
.digest-url{display:block;margin-top:8px;font-size:11.5px;color:var(--muted);background:var(--panel2,#f5f2ec);border:1px solid var(--hair);border-radius:8px;padding:9px 11px;word-break:break-all}

/* Testkopie-Leiste: unmissverständlicher, abgeschlossener Sandkasten (oben, volle Breite) */
.testkopiebar{position:sticky;top:0;z-index:60;display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  background:#1a1b1e;color:#fff;font-size:13px;padding:9px 18px}
.testkopiebar .tkpunkt{width:8px;height:8px;border-radius:50%;background:#f0a24b;flex:0 0 auto;
  box-shadow:0 0 0 3px rgba(240,162,75,.25)}
.testkopiebar .tktext{flex:1 1 auto;min-width:220px}
.testkopiebar .tktext b{font-weight:650}
.testkopiebar .tkakt{display:flex;gap:8px;flex:0 0 auto}
.testkopiebar .tkakt a{color:#fff;font-weight:600;border:1px solid rgba(255,255,255,.28);
  border-radius:6px;padding:4px 11px;font-size:12.5px;white-space:nowrap}
.testkopiebar .tkakt a:hover{background:rgba(255,255,255,.12)}

/* Datei-Umbau: Gesamtzahl in der „Dateien zuordnen"-Überschrift + zweite Uploadfläche unten */
.ufa-zu-titel .ufa-zu-zahl{font-size:13px;font-weight:500;color:var(--muted);margin-left:8px}
.ufa-untenupload{margin-top:22px}
.updrop-unten{min-height:118px;display:flex;align-items:center;justify-content:center;text-align:center;
  border:2px dashed var(--line2);border-radius:12px;padding:22px;cursor:pointer;transition:border-color .12s,background .12s}
.updrop-unten:hover{border-color:var(--dim);background:#fcfaf7}
.updrop-unten.drag{border-color:var(--accent);background:var(--accentSoft)}
.updrop-unten .updrop-text{font-size:13px;color:var(--muted)}
.updrop-unten .updrop-text b{display:block;font-size:14.5px;font-weight:600;color:var(--text);margin-bottom:3px}

/* Kopf „Dateien zuordnen": Text links, dauerhaft sichtbarer Button „Dateien hinzufügen" rechts */
.ufa-zu-kopf{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;flex-wrap:wrap}
.ufa-zu-text{min-width:0}
.ufa-add-fix{flex:none;display:inline-flex;align-items:center;gap:7px;background:none;border:1px solid var(--line2);border-radius:9px;
  padding:8px 14px;font:inherit;font-size:13px;color:var(--text);cursor:pointer;white-space:nowrap;margin-top:2px}
.ufa-add-fix:hover{border-color:var(--dim);background:#fcfaf7}
@media(max-width:640px){ .ufa-add-fix{width:100%;justify-content:center} }

/* Autosave-Status im Onboarding-Kopf: dezent, verschiebt das Layout nicht, blinkt nicht */
.obsave{transition:color .2s}
.obsave.warten{color:var(--muted)}
.obsave.ok{color:var(--green)}
.obsave.fehler{color:var(--red)}
.obsave.offline{color:var(--accentDark)}
/* Kundenakte: dezentes Label über den Ansprechpartner-Feldern */
.oblabel-mut{display:block;font-size:12.5px;font-weight:600;color:var(--muted);margin:2px 0 4px}

/* ---- Feinschliff „Dateien zuordnen" ---- */
/* „Noch nicht zugeordnet": eine ruhige Zeile mit sehr dezent warmem Hintergrund, Karten bleiben weiß */
.ufa-offen-gruppe > .ufa-gruppe-kopf{background:#fdf8f1;border:1px solid #f1e4d1;border-radius:9px;padding:9px 12px;margin:0 2px}
.ufa-offen-gruppe .ufa-gruppe-titel{display:inline-flex;align-items:center;gap:8px}
.ufa-grp-hint{margin:7px 2px 12px;padding:0 12px;font-size:12px;color:var(--dim)}
.ufa-punkt{width:7px;height:7px;border-radius:50%;background:#e2952f;flex:none}
/* Nicht zugeordnete Datei: Kategoriefeld als nächste Aktion (warme Kontur), Karte bleibt weiß */
.ufa-row.offen{background:#fff}
.ufa-row.offen:has(.ufa-check:checked){background:#fdf7ee}
.ufa-row.offen .ufa-katchip.leer{border-color:#e6c39a;color:var(--accentDark)}
.ufa-katchip:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
/* Hilfe-Box: Formate nach Typ */
.ufa-hilfe-formate{margin:4px 0 0;display:grid;grid-template-columns:auto 1fr;gap:5px 12px;font-size:12.5px}
.ufa-hilfe-formate dt{font-weight:600;color:var(--text)}
.ufa-hilfe-formate dd{margin:0;color:var(--muted);line-height:1.45}
/* Fehlerbereich kompakter: kleineres Thumbnail, Aktionen kompakt, weniger Fläche */
.upfail{align-items:center;padding:9px 11px;gap:11px}
.upfail-thumb,.upfail-doc{width:40px;height:40px}
.upfail-akt{margin-top:5px;gap:8px}
.upfail-akt .btn.klein{padding:4px 11px;font-size:12.5px}

/* --- Kontaktkarte „Du brauchst persönliche Hilfe?": Aktionswege konsolidiert ---
   Über mehrere Runden waren die Regeln für .kkontaktwege widersprüchlich geworden
   (Zeile/Spalte, wirkungslose grid-Regeln, mobile Regel wurde von einer späteren
   Basisregel überschrieben). Diese Regeln stehen am Dateiende und gewinnen. */
.kkontaktwege .btn{min-height:46px;align-items:center}
@media (max-width:640px){
  .kcontact-row{flex-direction:column;align-items:stretch;gap:16px}
  .kkontaktwege{flex-direction:column;flex-wrap:nowrap;width:100%;gap:10px;justify-content:flex-start}
  .kkontaktwege .btn{flex:none;width:100%}
}

/* --- Kontakte-Tabelle mobil: horizontal scrollen statt gestapelter „Label: Wert"-Karten ---
   Raouls Wunsch: die Tabelle bleibt eine Tabelle und wird seitlich gescrollt. Die Namensspalte
   bleibt dabei stehen, damit man immer sieht, um welchen Kontakt es geht. */
@media (max-width:760px){
  .ktbl-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
  #kontakttabelle{min-width:660px}
  #kontakttabelle thead th:first-child,
  #kontakttabelle td[data-l="Kontakt"]{position:sticky;left:0;z-index:2;background:var(--panel)}
  #kontakttabelle thead th:first-child{z-index:3}
}

/* --- Geführte „Nächste Schritte"-Karte auf der Akte-Übersicht --- */
.ns-karte .rsec{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.ns-weg{font-weight:500;font-size:12.5px;color:var(--ui-muted);text-transform:none;letter-spacing:0}
.ns-liste{display:flex;flex-direction:column;margin-top:4px}
.ns-zeile{display:flex;align-items:center;gap:14px;padding:11px 2px;border-top:1px solid var(--hair)}
.ns-zeile:first-child{border-top:none}
.ns-num{flex:0 0 auto;width:25px;height:25px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:12.5px;font-weight:600;background:var(--ui-soft);color:var(--ui-muted)}
.ns-txt{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:2px}
.ns-txt b{font-weight:600;font-size:14.5px;line-height:1.3}
.ns-sub{font-size:13px;color:var(--ui-muted);line-height:1.45}
.ns-akt{flex:0 0 auto}
.ns-warten{font-size:12.5px;color:#3b6bb0;font-weight:600;white-space:nowrap}
.ns-zeile.ok .ns-num{background:rgba(30,125,67,.13);color:#1e7d43}
.ns-zeile.ok .ns-txt b{color:var(--ui-muted);font-weight:500}
.ns-zeile.akt .ns-num{background:var(--ui-orange);color:#fff}
.ns-zeile.akt .ns-txt b{color:var(--ui-text)}
.ns-zeile.todo{opacity:.5}
.ns-zeile.todo .ns-num{background:transparent;border:1px solid var(--hair);color:var(--ui-muted)}
.ns-fertig{margin:8px 0 0;color:var(--ui-muted);font-size:14px}
@media (max-width:600px){
  .ns-zeile{flex-wrap:wrap;gap:8px 12px}
  .ns-akt{flex:1 1 100%;margin-left:39px}
  .ns-akt .btn{width:100%;text-align:center}
}

/* Onboarding: angelegte Referenz gleich hinterlegt wie eine angelegte Leistung (.obrepeat-karte).
   Höhere Spezifität (.obref.card) + Dateiende, weil sonst eine spätere .card-Sammelregel den
   Hintergrund wieder auf Weiß zieht. */
.obref.card{background:#fdfbf8}

/* Portal-Rechnung: Status („Offen"/„Überfällig"/„Bezahlt") auf eine eigene Zeile über dem
   Button (sonst klebt „Offen" am „Jetzt online bezahlen") und farblich markiert, damit der
   Kunde eine offene Zahlung sofort sieht. */
.projektzahlung-betrag .status{display:block;font-weight:650;margin-bottom:2px}
.projektzahlung-betrag .status.warn{color:var(--accentDark)}
.projektzahlung-betrag .status.bad{color:var(--red)}
.projektzahlung-betrag .status.ok{color:var(--green)}

/* Abschluss-Übersicht: EINE Liste (die doppelte „Das fehlt noch"-Liste ist entfernt). Ein offener
   Bereich ist ein direkter Sprung-Link. Bereichsname und Status stehen als zusammengehörige
   Information links, die Aktion ist rechts klar davon getrennt. */
.obcard .obzus-sprung{display:flex;align-items:center;gap:16px;text-decoration:none}
.obcard .obzus-sprung.offen{border-color:var(--ui-line);background:#fff}
.obcard .obzus-sprung .obzus-info{display:flex;flex-direction:column;align-items:flex-start;gap:3px;flex:1;min-width:0}
.obcard .obzus-sprung .obzus-titel{min-width:0;color:var(--ui-text)}
.obcard .obzus-fehlend{font-size:12.5px;line-height:1.4;font-weight:500;color:#9a673b}
.obcard .obzus-cta{font-size:13px;font-weight:600;color:var(--accentDark);white-space:nowrap;
  margin-left:auto;padding-left:18px;border-left:1px solid var(--ui-line)}
.obcard .obzus-sprung:hover{border-color:#d8c8b6;background:#fdfcfb}
@media (max-width:600px){
  .obcard .obzus-sprung{align-items:flex-start;flex-wrap:wrap}
  .obcard .obzus-sprung .obzus-info{flex:1 1 100%}
  .obcard .obzus-cta{margin-left:0;padding-left:0;border-left:0}
}

/* ---------- Detailansicht eines Kunden-Anliegens (richtung = kunde) ---------- */
.vgk-detail{padding:18px 18px 20px!important}
.vgk-metakopf{display:flex;align-items:center;flex-wrap:wrap;gap:7px;font-size:12.5px;color:var(--muted)}
.vgk-metakopf .vgk-art{font-weight:650;color:var(--text)}
.vgk-metakopf .vgk-metasep{color:var(--dim)}
.vgk-betreff{margin:9px 0 0;font-size:19px;line-height:1.3;font-weight:650;letter-spacing:-.01em;color:var(--text)}
.vgk-status{display:inline-flex;align-items:center;gap:8px;margin:9px 0 0;font-size:13px;font-weight:600;color:var(--muted)}
.vgk-statusdot{width:8px;height:8px;border-radius:50%;background:var(--dim);flex:none}
.vgk-statusdot.dran{background:var(--accent)}
.vgk-statusdot.orange{background:#e08a10}
.vgk-statusdot.blau{background:#3b74ad}
.vgk-statusdot.gruen{background:#2f9e56}
.vgk-nachricht{margin:18px 0 0;padding:15px 17px;background:var(--panel2);border:1px solid var(--hair);border-radius:11px}
.vgk-blocklabel{display:block;font-size:11.5px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);margin:0 0 7px}
.vgk-nachrichttext{font-size:15px;line-height:1.6;color:var(--text)}
.vgk-detailliste{display:grid;grid-template-columns:auto 1fr;gap:9px 22px;margin:12px 0 0;padding:14px 17px;border:1px solid var(--hair);border-radius:11px}
.vgk-detailpaar{display:contents}
.vgk-detailpaar dt{font-size:13px;font-weight:600;color:var(--muted)}
.vgk-detailpaar dd{margin:0;font-size:14px;color:var(--text);overflow-wrap:anywhere}
.vgk-antwortbereich{margin:22px 0 0;padding:22px 0 0;border-top:1px solid var(--line2)}
.vgk-antwort-titel{margin:0 0 12px;font-size:15.5px;font-weight:650;color:var(--text)}
.vgk-antwortform textarea{width:100%}
.vgk-mailopt{margin:13px 0 0}
.vgk-mailhint{margin:8px 0 0;font-size:13px;line-height:1.5;color:var(--muted);max-width:620px}
.vgk-antwort-bar{margin:16px 0 0;display:flex;flex-wrap:wrap;gap:10px}
.vgk-angebot{margin:16px 0 0}
.vgk-angebot>summary{display:inline-flex;cursor:pointer;list-style:none}
.vgk-angebot>summary::-webkit-details-marker{display:none}
.vgk-angebothinweis{margin:16px 0 0}
.vgk-verwaltung{margin:20px 0 0;padding:16px 0 0;border-top:1px solid var(--hair);display:flex;align-items:flex-end;justify-content:space-between;flex-wrap:wrap;gap:14px}
.vgk-statuswahl{display:flex;flex-direction:column}
.vgk-statuswahl .oblabel{margin:0 0 5px}
.vgk-verwaltung-rechts{display:flex;align-items:center;gap:8px}
.vgk-mehr>summary{padding:6px 11px}
/* Vorschau-Schritt der Kunden-Antwort */
.vgk-vorschau-block{margin:0 0 18px}
.vgk-vorschau-antwort{margin:7px 0 0;padding:14px 16px;background:var(--panel2);border:1px solid var(--hair);border-radius:10px;font-size:15px;line-height:1.6;color:var(--text)}
.vgk-sendbar{display:flex;flex-wrap:wrap;gap:10px}
.vgk-editcard{max-width:640px}
@media (max-width:640px){
  .vgk-betreff{font-size:17.5px}
  .vgk-detailliste{grid-template-columns:1fr;gap:2px 0}
  .vgk-detailpaar{display:block;margin:0 0 8px}
  .vgk-detailpaar dt{margin:0 0 1px}
  .vgk-verwaltung{flex-direction:column;align-items:stretch}
  .vgk-statuswahl .statussel{max-width:none;width:100%}
  .vgk-verwaltung-rechts{justify-content:space-between}
  .vgk-antwort-bar .btn,.vgk-sendbar .btn{flex:1 1 auto}
}

/* ============================================================= */
/* Startseite: ruhig und clean — helles Off-White, klare weiße     */
/* Karten mit feiner Kante und weichem Schatten. Kein Verlauf,      */
/* kein Glas-Blur, keine harten Akzentkanten.                       */
/* ============================================================= */
body{ background:#fafaf9!important; }
.card,.dsek,.obcard,.vlcard,.kpi{
  background:#ffffff!important;
  border:1px solid rgba(25,26,28,.05)!important;
  box-shadow:0 1px 2px rgba(25,26,28,.03), 0 12px 32px -16px rgba(25,26,28,.13)!important;
  -webkit-backdrop-filter:none!important;
  backdrop-filter:none!important;
}
/* Aktiver Menüpunkt: nur weiche Hintergrund-Hervorhebung, kein Balken */
.navlink.active{
  background:var(--accentSoft)!important;
  color:var(--accentDark)!important;
  box-shadow:none!important;
}
/* „Heute wichtig"-Zähler dezent */
.hbcount{background:var(--accent)!important;color:#fff!important}
/* Aufgaben-Nav: dezenter Zähler der offenen wichtigen Punkte */
.navbadge{flex:none;min-width:18px;height:18px;padding:0 6px;border-radius:9px;background:var(--accentSoft);
  color:var(--accentDark);font-size:11px;font-weight:700;display:inline-flex;align-items:center;justify-content:center;line-height:1}

/* „Heute wichtig"-Zeile: links Aufgabe + voller Kundenname, rechts die Meta ruhig ausgerichtet.
   Der Name wird nur gezeigt, wenn der Kunde am Zug ist; ist Raoul dran, steht dort nichts. */
.hbzeile{display:flex!important;align-items:center;gap:14px}
.hbmain{flex:1 1 auto;min-width:0}
.hbwholine{margin-top:2px;font-size:12.5px;line-height:1.35}
.hbwho{color:var(--text);font-weight:600;white-space:normal;overflow-wrap:anywhere}
.hbmeta{flex:0 1 auto;max-width:42%;text-align:right;color:var(--muted);font-size:12.5px;line-height:1.4;overflow-wrap:anywhere}
.hbaktionen{flex:none}
@media(max-width:640px){
  .hbmeta{order:3;flex-basis:100%;max-width:none;text-align:left;margin-top:2px}
  .hbzeile{flex-wrap:wrap}
}
/* Laufende Projekte: Name statt „Du/Ich"; Kunde am Zug → Name, sonst nichts */
.proj .ppct{flex-wrap:wrap;justify-content:flex-end}
.proj .ppct .hbwho{color:var(--muted);font-weight:600}

/* ---------- Kundenportal: gleicher ruhiger Look wie das Cockpit ---------- */
body.kportal{background:#fafaf9!important}
.kportal .card,.kportal .knews,.kportal .knstreifen,.kportal .kstepper,.kportal .obcard,.kdash-haupt .card{
  box-shadow:0 1px 2px rgba(25,26,28,.03), 0 12px 32px -16px rgba(25,26,28,.13)!important;
}
.kportal .card:not(.khighlight),.kportal .knews,.kportal .knstreifen,.kportal .kstepper,.kportal .obcard,.kdash-haupt .card:not(.khighlight){
  background:#ffffff!important;
  border:1px solid rgba(25,26,28,.05)!important;
}
/* Portal-Logo dezent größer */
.knavi-logo img{height:52px}
@media(max-width:900px){ .knavi-logo img{height:36px} }

/* Kontakte: Trefferzahl in der Toolbar + „Alle zurücksetzen" bei aktiven Filter-Chips */
.ktreffer{font-size:12.5px;color:var(--muted);white-space:nowrap}
.fchip-reset{display:inline-flex;align-items:center;font-size:12px;font-weight:600;color:var(--accentDark);text-decoration:none;padding:0 4px}
.fchip-reset:hover{text-decoration:underline}