/* =====================================================================================
   UI-Umbau 11.11.2026 (Mobbin-Prüfung, Robert: „setz alles um … meine eigene DNA beibehalten“)
   Wird nach dash.css geladen und zusätzlich in jede Talqio-Seite im Dashboard gehängt (lib/talqio.js),
   damit beide Bauarten dieselbe Schrift, dieselben Abstände und dasselbe Gerüst haben.
   DNA bleibt: dunkel, Archivo + Geist, ein Akzent, Seitenleiste, Karten mit Zeilen, weiße Schalter.
   Robert-Regel: Fließtext 16 px, wichtiger Text ab 14 px, nur Hinweise und Unterzeilen 12–13 px.
   ===================================================================================== */

/* ---------- B1: Hinweise lesbar (vorher 3,6 : 1, jetzt 5,2 : 1) ---------- */
:root{--faint:#8A8883}
html[data-theme=hell]{--faint:#6E6C66}

/* ---------- B1: Schrift-Skala ---------- */
body{font-size:16px;line-height:1.55}
h1{font-size:28px;line-height:1.18;letter-spacing:-.015em}
h2{font-size:16px}
.lead{margin-top:8px;font-size:16px;line-height:1.55}
.small{font-size:13px}
.btn{height:40px;padding:0 18px;font-size:15px}
.btn.ghost,.btn.small{height:36px;padding:0 15px;font-size:14px}
.icon-btn{width:36px;height:36px}
.icon-btn svg{width:17px;height:17px}
.link{font-size:14px}
label span,.fld>span,.field span{margin-bottom:8px;font-size:14px}
.fld>small,.fld .hint{font-size:13px;line-height:1.5}
input[type=text],input[type=email],input[type=password],input[type=date],input[type=url],input[type=number],input[type=search],input[type=tel],input[type=time],input:not([type]),select{height:42px;padding:0 12px;font-size:16px}
textarea{padding:10px 12px;font-size:16px}
select{padding-right:32px;background-position:calc(100% - 16px) 50%,calc(100% - 12px) 50%} /* Pfeil mittig, auch bei 56 px am Handy (12.11.) */

/* Abschnittstitel in Satzschreibung statt kleiner Versalien (die wirkten wie Eyebrows) */
.set{margin-top:32px}
.set-title{margin:0 0 12px;font:600 16px/1.3 "Geist",system-ui,sans-serif;letter-spacing:0;text-transform:none;color:var(--h)}
.set-title small{margin-left:8px;font-size:13.5px;font-weight:400}
.set-sub{margin-bottom:16px;font-size:14px;line-height:1.55}
.box{padding:20px;border-radius:16px}
.box.rows{padding:0}
.r{min-height:60px;padding:14px 20px;gap:18px}
.r-main b{font-size:15px}
.r-main span{margin-top:3px;font-size:13.5px;line-height:1.5}
.r-ic{width:34px;height:34px;border-radius:9px}
.r-ic svg{width:17px;height:17px}
.notice{padding:14px 16px;font-size:14.5px;line-height:1.55}
.hint{font-size:14px;line-height:1.55}
.tag{padding:4px 8px;font-size:12px}
.k{font-size:12.5px}
.status{font-size:14px}
.pills button,.pills a{height:32px;padding:0 14px;font-size:14px}
.save-state{font-size:13.5px}
.mono{font-size:13.5px}
.mini{font-size:14px}
.mini.big{font-size:15px}
.who b{font-size:15px}
.who .mail,.who .note{font-size:13px}
.seen,.use{font-size:14px}
.msg{font-size:13px}
.leer b{font-size:17px}
.leer p{font-size:15px}
.toast{font-size:15px}
.copy input{font-size:14px}
.kachel span{font-size:13.5px}
.bar-name,.bar-row b,.tr-stufe b,.tr-stufe span:first-child,.tr-name{font-size:14px}
.tr-stufe small{font-size:13px}
.af span{font-size:13.5px}
.af p{font-size:15px}
.farbe b{font-size:14px}
.farbe span{font-size:13px}
.wunsch-text{font-size:15px}
.wunsch-ziel{font-size:13.5px}
.imp-sek b{font-size:14px}
.imp-sek span,.imp-sek i{font-size:13px}
.zahlung{font-size:14px}
.kz .k{font-size:12.5px}
.wg-zahl{font-size:13.5px}
.mini-tabelle{font-size:14px}
.mini-tabelle .mono{font-size:13px}
.ff b,.type-main b,.opt b,.logo-row b,.day b,.bk-when b,.bk-who b,.setup-head b{font-size:15px}
.ff span,.type-main span,.type-main small,.opt span,.logo-row small,.bk-when span,.bk-who span,.setup-head span{font-size:13.5px}
.times,.closed{font-size:14px}
.ki-ergebnis p{font-size:15px}
.um-start-zahlen span{font-size:13.5px}
.um-start-fuss{font-size:14px}
.preview-card>p,.brand-pv p{font-size:14px}
.steps p,.app-steps li{font-size:14px}
.demo-cap{font-size:13.5px}
.code pre{font-size:13px}
.tip{font-size:13px}
.pfade code{font-size:13px}
.avv-text{font-size:14.5px}
.ps-aend-liste li{font-size:13.5px}
.ps-verlauf-t{font-size:13px}
.ps-log summary{font-size:15px}
.ps-log li{font-size:14px}
.ps-mt .muted{font-size:13px}
.mail-dlg-kopf span{font-size:13px}
.kunde-akt .btn{height:36px}
.side-mail{font-size:13px}
.side-foot .link{font-size:14px}
.side-item .badge{font-size:12px}
/* „Kunde“ / „Eigenes Projekt“ über dem Namen: Satzschreibung, keine Versalien */
.side-site span{font-size:12.5px;font-weight:500;text-transform:none;letter-spacing:0}
.side-site b{font-size:14px}

/* ---------- B3: ein Seitengerüst. Überschrift überall an derselben Stelle, schmale Seiten bleiben links bündig ---------- */
.page,.page.wide{max-width:1180px;padding:44px 44px 104px}
.page:not(.wide)>*{max-width:880px}
.page:not(.wide)>.ps-zugriff,.page:not(.wide)>.ps-aenderung{max-width:880px}
.head{margin-bottom:30px}
.head h1{font-size:28px}

@media (max-width:860px){
  .page,.page.wide{padding:24px 16px 96px}
  .page:not(.wide)>*{max-width:none}
  h1,.head h1{font-size:26px}
  .head{margin-bottom:22px}
  .r{padding:14px 16px}
  .box{padding:16px}
  .box.rows{padding:0}
}

/* ---------- A3: Seitenleiste scrollt bei wenig Höhe, Konto-Zeile unten statt Nachrichten + Mail + Abmelden ---------- */
.side{min-height:0}
.side-nav{flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:var(--n4) transparent;margin:0 -4px;padding:0 4px}
.side-nav::-webkit-scrollbar{width:6px}
.side-nav::-webkit-scrollbar-thumb{background:var(--n4);border-radius:3px}
.side-foot{margin-top:10px;padding:10px 0 0;border-top:1px solid var(--line)}
.side-konto{display:flex;align-items:center;gap:10px;min-width:0;padding:4px 4px 0 6px}
.side-ava{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;flex:none;background:var(--n3);box-shadow:inset 0 0 0 1px var(--line2);color:var(--h);font:600 13px/1 "Geist",system-ui,sans-serif}
.side-konto .side-mail{flex:1;min-width:0;color:var(--muted)}
.side-konto .icon-btn{flex:none;color:var(--muted)}
.side-konto .icon-btn:hover{color:var(--h);background:var(--n3)}
.side-item .badge.on{min-width:20px;height:20px;line-height:20px;font-size:12px;font-weight:700}
.kopf-glocke{display:none}
/* Abschnitt „Kunden & Termine“ in der Leiste: Satzschreibung, leise */
.side-gruppe{margin:18px 11px 6px;font-size:13px;font-weight:500;letter-spacing:0;color:var(--faint)}

/* ---------- B4: Handy-Kopf voll deckend, Logo links, Eingang mit Zähler rechts ---------- */
@media (max-width:860px){
  .side{height:56px;padding:0 8px 0 16px;flex-wrap:nowrap;justify-content:space-between;background:var(--n1);backdrop-filter:none;-webkit-backdrop-filter:none}
  .side .wordmark{margin:0}
  .side-site{display:none}
  .kopf-glocke{position:relative;display:grid;place-items:center;width:44px;height:44px;border-radius:12px;color:var(--muted)}
  .kopf-glocke svg{width:23px;height:23px;stroke:currentColor}
  .kopf-glocke .badge.on{position:absolute;top:5px;right:3px;min-width:19px;height:19px;padding:0 5px;border-radius:999px;background:var(--o);color:var(--on);font-size:11.5px;font-weight:700;line-height:19px;text-align:center}
  .kopf-glocke:active{background:var(--n3)}
}

/* ---------- C7: Handy-Menü in Gruppen, Mitte-Knopf markiert, wenn die Seite nicht unten in der Leiste liegt ---------- */
@media (max-width:860px){
  .menue-gruppe+.menue-gruppe{margin-top:16px}
  .menue-gt{display:block;margin:0 2px 8px;color:var(--muted);font:500 13px/1.3 "Geist",system-ui,sans-serif}
  .menue-item span:not(.badge){max-width:100%;text-align:center;overflow-wrap:anywhere;hyphens:manual;line-height:1.2}
  .menue-item{min-height:80px;font-size:13.5px}
  .leiste-menue.hier{box-shadow:0 0 0 6px var(--n2),0 0 0 8px var(--h),0 12px 24px -8px rgba(0,0,0,.6)}
  .leiste-item{font-size:12px}
}

/* ---------- C1/C2: Website-Karte auf Start, Status-Pille, Fenster „Was geht online?“ ---------- */
.ws{display:flex;align-items:center;justify-content:space-between;gap:20px 28px;padding:22px 24px}
.ws-info{min-width:0;flex:1}
.ws-titel{display:flex;align-items:center;flex-wrap:wrap;gap:10px 12px}
.ws-titel b{color:var(--h);font:600 19px/1.25 "Archivo",system-ui,sans-serif;letter-spacing:-.01em}
.ws-zeile{margin-top:6px;color:var(--muted);font-size:14.5px;line-height:1.55}
.ws-zeile a{color:var(--h);text-decoration:none;border-bottom:1px solid var(--line2)}
.ws-zeile a svg{width:13px;height:13px;stroke:currentColor;vertical-align:-1px}
.ws-zeile a:hover{border-color:var(--h)}
.ws-aend{margin-top:8px;color:var(--body);font-size:14.5px}
.ws-aend .link{font-size:14.5px;text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--line2)}
.ws-aend-seite{margin:-14px 0 24px}
.ws-knoepfe{display:flex;align-items:center;gap:10px;flex:none}
.pille{display:inline-flex;align-items:center;gap:7px;height:26px;padding:0 11px;border-radius:999px;background:var(--n3);box-shadow:inset 0 0 0 1px var(--line);color:var(--h);font-size:13px;font-weight:500;white-space:nowrap}
.pille i{width:7px;height:7px;border-radius:50%;background:var(--faint);flex:none}
.pille.live i{background:var(--ok)}
.pille.warten i{background:var(--o)}
.pille.neu i{background:transparent;box-shadow:inset 0 0 0 1.5px var(--muted)}
.ws-dlg{width:min(600px,calc(100vw - 32px))}
.ws-dlg .ws-dlg-liste{margin:16px 18px 0;border-radius:12px;background:var(--n3);border:1px solid var(--line);max-height:46dvh;overflow:auto}
.ws-dlg .ws-dlg-liste .r-ic{background:var(--n4)}
.ws-dlg-hinweis{margin:14px 18px 16px;color:var(--muted);font-size:14px;line-height:1.55}
.ws-dlg .mail-dlg-kopf .icon-btn{font-size:15px}
/* Nächste Schritte: erledigt = weißer Haken (Orange bleibt dem einen Hauptknopf) */
.naechste .step{min-height:64px;padding:12px 20px;gap:14px}
.naechste .step .tick{width:22px;height:22px;box-shadow:inset 0 0 0 1.5px var(--line2)}
.step.done .tick{background:var(--h);box-shadow:none}
.step.done .tick svg{stroke:var(--n1)}
.naechste .r-main span{font-size:13.5px}
@media (max-width:860px){
  .ws{flex-direction:column;align-items:stretch;padding:18px}
  .ws-knoepfe{flex-direction:column-reverse;align-items:stretch}
  .ws-knoepfe .btn{width:100%}
  .naechste .step{flex-wrap:wrap;padding:14px 16px}
  .naechste .step .r-main{flex:1 1 200px}
  .naechste .step .r-ctl{width:100%;padding-left:36px}
  .naechste .step .r-ctl .btn{width:100%}
}
.ws-set{margin-bottom:22px}
/* D9 auf Start: Monate ohne Daten als gestrichelte Linie statt dunkler Balken */
.um-start-balken span.leer i{height:0!important;border-top:1.5px dashed var(--line2);background:none}
.um-start-balken span.jetzt i{background:var(--h)}

/* ---------- C4: Admin-Kundenliste als Tabelle, „Zu tun“ oben, Filter mit Zahl, Formulare im Fenster ---------- */
.set-kopf{display:flex;align-items:center;justify-content:space-between;gap:12px 16px;flex-wrap:wrap;margin-bottom:12px}
.set-kopf .set-title{margin:0}
.ktab-filter{display:inline-flex}
.ktab-filter i{font-style:normal;color:var(--faint);margin-left:4px}
.ktab-filter .on i{color:inherit;opacity:.7}
.ktab{position:relative;grid-template-columns:minmax(0,2.2fr) minmax(0,1.1fr) minmax(0,1fr) minmax(0,.8fr) minmax(0,.8fr) minmax(0,1.1fr) 150px;gap:16px;align-items:center;padding:16px 20px;border-top:1px solid var(--line)}
.ktab[hidden]{display:none}
.ktab:hover{background:var(--hov)}
.ktab-kopf{padding:12px 20px;border-top:0;color:var(--muted);font-size:13px;font-weight:500}
.ktab-kopf:hover{background:none}
.ktab .k{display:none}
.ktab .kz{gap:2px;color:var(--h);font-size:14.5px}
.kz-unter{color:var(--faint);font-size:13px}
.kunde-link{color:var(--h);text-decoration:none}
.kunde-link::after{content:"";position:absolute;inset:0;z-index:0}
.kunde-link b{font-size:15.5px;font-weight:600}
.ktab .kunde-akt,.ktab .kz a{position:relative;z-index:1}
.ktab .kz a.kz-zahl{color:var(--h);font-weight:500;text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--line2)}
.punkt-wort{display:inline-flex;align-items:center;gap:7px;color:var(--h);font-size:14.5px}
.punkt-wort i{width:7px;height:7px;border-radius:50%;background:var(--faint);flex:none}
.punkt-wort.gut i{background:var(--ok)}
.punkt-wort.wartet i{background:transparent;box-shadow:inset 0 0 0 1.5px var(--muted)}
.punkt-wort.aus i{background:#E5484D}
.zu-tun .tun.zahlung .r-ic{color:#E5484D}
.aufklapp>summary{display:flex;align-items:baseline;gap:8px;cursor:pointer;list-style:none}
.aufklapp>summary::-webkit-details-marker{display:none}
.aufklapp>summary::before{content:"›";display:inline-block;color:var(--muted);transition:transform .15s}
.aufklapp[open]>summary::before{transform:rotate(90deg)}
.form-dlg{width:min(640px,calc(100vw - 32px))}
.form-dlg .mail-dlg-kopf b{font:600 18px/1.25 "Archivo",system-ui,sans-serif}
.form-dlg-inhalt{padding:4px 20px 22px;max-height:calc(100dvh - 140px);overflow:auto}
.form-dlg .invite-form{grid-template-columns:1fr 1fr}
@media (max-width:1100px){.ktab{grid-template-columns:minmax(0,2fr) minmax(0,1fr) minmax(0,1fr) minmax(0,1fr) minmax(0,1fr) 150px}.ktab>.kz:nth-child(4),.ktab-kopf>span:nth-child(4){display:none}}
@media (max-width:0px){.ktab{grid-template-columns:none}.ktab>.kz:nth-child(3),.ktab>.kz:nth-child(4),.ktab-kopf>span:nth-child(3),.ktab-kopf>span:nth-child(4){display:none}}
@media (max-width:860px){
  .ktab{grid-template-columns:1fr 1fr;padding:16px}
  .ktab-kopf{display:none}
  .ktab .k{display:block}
  .ktab>.kz:nth-child(3),.ktab>.kz:nth-child(4){display:flex}
  .ktab .who{grid-column:1 / -1}
  .ktab .kunde-akt{grid-column:1 / -1}
  .form-dlg .invite-form{grid-template-columns:1fr}
  .set-kopf .ktab-filter{max-width:100%;overflow-x:auto}
}

/* ---------- C3: Eingang (Reiter, Filter, Nachrichten-Zeilen), A1: Wunsch-Aktionen ---------- */
.eg-leiste{display:flex;align-items:center;justify-content:space-between;gap:12px 16px;flex-wrap:wrap;margin:-6px 0 20px}
.seg{display:inline-flex;padding:4px;border-radius:999px;background:var(--n2);box-shadow:inset 0 0 0 1px var(--line)}
.seg a{display:inline-flex;align-items:center;gap:6px;height:34px;padding:0 16px;border-radius:999px;color:var(--muted);font-size:14.5px;font-weight:500;text-decoration:none}
.seg a.on{background:var(--n4);color:var(--h)}
.seg i,.eg-filter i{font-style:normal;color:var(--faint)}
.seg a.on i{color:var(--muted)}
.eg-filter{display:inline-flex;flex-wrap:wrap}
.eg-filter a{display:inline-flex;align-items:center;gap:5px;text-decoration:none}
.eg-kunde{margin:-8px 0 18px;color:var(--muted);font-size:14.5px}
.eg-kunde a{color:var(--h)}
.eg-zeile .r-main b{font-weight:500}
.eg-zeile.ungelesen .r-main b{font-weight:600}
.eg-zeile:not(.ungelesen) .r-main b{color:var(--body)}
.eg-neu{width:8px;height:8px;border-radius:50%;background:var(--o);flex:none}
.eg-wuensche .wg summary{padding:16px 20px}
.eg-wuensche .wunsch{padding:16px 20px 20px;border-top:0}
.wunsch .actions{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:14px}
.erledigt-form{display:flex;align-items:center;gap:8px;flex:1 1 360px;min-width:0}
.erledigt-form input{height:36px;font-size:15px}
@media (max-width:860px){
  .eg-leiste{flex-direction:column;align-items:stretch}
  .eg-filter{flex-wrap:nowrap;overflow-x:auto;max-width:100%}
  .wunsch .actions{flex-direction:column;align-items:stretch}
  .erledigt-form{flex-direction:column;align-items:stretch;flex-basis:auto;width:100%}
  .erledigt-form input,.erledigt-form .btn,.wunsch .actions>.btn{width:100%}
}

/* ---------- C9: Kunde verwalten mit Statuszeile und Reitern ---------- */
.status-zeile{display:inline-flex;flex-wrap:wrap;align-items:center;gap:4px 10px;color:var(--body);font-size:15px}
.status-zeile a{color:var(--h)}
.status-zeile .zahlung{font-size:15px}
.sz-trenn{color:var(--faint)}
.punkt-wort.leise{color:var(--body)}
.reiter-leiste{display:flex;width:max-content;max-width:100%;overflow-x:auto;margin:0 0 26px;scrollbar-width:none}
.reiter-leiste::-webkit-scrollbar{display:none}
.reiter-teil>.set:first-child,.reiter-teil>.notice:first-child,.reiter-teil>form:first-child{margin-top:0}
.reiter-teil .kacheln{margin-top:0}
.fakten .r{min-height:52px}
.fakten .r-main{display:flex;align-items:baseline;justify-content:space-between;gap:16px}
.fakten .r-main b{font-weight:400;color:var(--muted);font-size:14.5px}
.fakten .r-main span{margin:0;color:var(--h);font-size:15px;text-align:right}
@media (max-width:860px){.reiter-leiste{width:auto}}
/* A6: Zurück-Link mit sichtbarem Pfeil, in einer Zeile */
.back{display:inline-flex;align-items:center;gap:6px;margin:0 0 18px -4px;padding:6px 10px 6px 4px;border:0;border-radius:9px;background:none;box-shadow:none;color:var(--muted);font-size:14.5px;font-weight:500;text-decoration:none;white-space:nowrap}
.back svg{width:17px;height:17px;flex:none;stroke:currentColor;fill:none}
.back:hover{color:var(--h);background:var(--n3)}
.reiter-leiste a{flex:none;white-space:nowrap}
/* D11: KI-Kosten pro Kunde */
.ki-k-zahl b{color:var(--h);font-size:15.5px;font-weight:600;font-variant-numeric:tabular-nums}
.ki-verlauf{height:110px}

/* ---------- D12: Mitteilungen mit Live-Vorschau und Empfänger-Auswahl ---------- */
.mt-zwei{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:28px;align-items:start}
.mt-zwei>.set{margin-top:0}
.mt-vorschau{position:sticky;top:24px}
.mt-vorschau-t{margin:0 0 12px;color:var(--h);font-size:16px;font-weight:600}
.mt-karte{width:100%;max-height:none;padding:26px 24px 22px;border-radius:20px;background:var(--n2);box-shadow:0 0 0 1px var(--line2)}
.mt-karte .ps-dialog-ic{color:var(--o)}
.mt-karte h2{margin:0;color:var(--h);font:600 20px/1.25 "Archivo",system-ui,sans-serif}
.mt-karte .ps-dialog-von{margin:14px 0 4px;color:var(--faint);font-size:13px;font-weight:500;text-transform:none;letter-spacing:0}
.mt-karte .ps-dialog-text{margin:12px 0 20px;color:var(--body);font-size:15px;line-height:1.6;overflow-wrap:anywhere}
.mt-karte .ps-dialog-text p{margin:0 0 10px}
.mt-karte .btn{width:100%;pointer-events:none}
.mt-gruppen{display:inline-flex;flex-wrap:wrap;margin-top:2px}
.mt-gruppen i{font-style:normal;color:var(--faint);margin-left:3px}
.mt-einzeln{margin-top:12px}
.mt-zahl{margin:12px 0 0;color:var(--muted);font-size:14px}
.ps-dialog-von{text-transform:none;letter-spacing:0;font-size:13px;font-weight:500}
@media (max-width:1000px){.mt-zwei{grid-template-columns:minmax(0,1fr)}.mt-vorschau{position:static}}
[hidden]{display:none!important}

/* ---------- A4 + C8: Editor am Handy (Auswahlfeld schrumpft, Knöpfe beschriftet), leiser Link zu Robert ---------- */
.ed-bar select.ed-seiten{min-width:0;height:38px;font-size:16px}
.ed-frag{margin:18px 0 4px;padding-top:14px;border-top:1px solid var(--line)}
.ed-frag .link{color:var(--muted);font-size:14px;font-weight:500;text-align:left}
.ed-frag .link:hover{color:var(--h)}
@media (max-width:900px){
  .ed .ed-bar{gap:8px;padding:8px 10px}
  .ed .ed-bar select.ed-seiten{flex:1 1 calc(100% - 52px);width:auto;min-width:0;max-width:none}
  .ed .ed-bar .btn{height:38px;padding:0 12px;font-size:14px}
  .ed .ed-bar .ed-wunsch-knopf,.ed .ed-bar a.btn.ghost,.ed .ed-bar>.btn:last-child{flex:1 1 0;min-width:0;padding:0 8px}
  .ed .ed-bar .btn.ghost span{display:none}
  .ed .ed-bar .ed-wunsch-knopf::after{content:"Robert fragen"}
  .ed .ed-bar a.btn.ghost::after{content:"Ansehen"}
  /* Seite in voller Höhe, Bearbeiten als Blatt von unten: ohne Auswahl nur eine schmale Zeile */
  .ed{grid-template-columns:minmax(0,1fr)}
  .ed-main{grid-template-columns:minmax(0,1fr)}
  .ed-bar{min-width:0}
  .ed-panel:has(.ed-auswahl[hidden]){max-height:none;overflow:hidden;padding:12px 16px}
  .ed-panel:has(.ed-auswahl[hidden]) .ed-leer p,.ed-panel:has(.ed-auswahl[hidden]) .ed-meta{display:none}
  .ed-panel:has(.ed-auswahl[hidden]) .ed-leer b{font-size:14.5px;font-weight:500;color:var(--muted)}
  .ed-panel{max-height:50vh;border-radius:16px 16px 0 0;box-shadow:0 -12px 30px -18px rgba(0,0,0,.6)}
}
/* B2 im Editor: Orange nur für „Veröffentlichen“, Aktionen im Panel weiß */
.ed-panel .btn:not(.ghost):not(.danger){background:var(--inv);color:var(--inv-t)}
.ed-panel .btn:not(.ghost):not(.danger):hover{background:var(--h);opacity:.9}

/* ---------- C10: Einstellungen als Übersicht mit Wert rechts ---------- */
.ew-wert{display:inline-flex;align-items:center;gap:8px;max-width:300px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--muted);font-size:14.5px}
.ew-wert .swatch{margin:0}
.r .r-ctl .ew-wert+.r-go{margin-left:6px}
.team-felder .fld{margin:0}
.team-felder .fld>span{margin-bottom:6px}
@media (max-width:860px){.ew-wert{max-width:140px}}
@media (max-width:860px){
  a.r:has(.ew-wert),.r:has(>.r-ctl>.mini){flex-wrap:nowrap}
  a.r:has(.ew-wert) .r-main,.r:has(>.r-ctl>.mini) .r-main{flex:1 1 0}
  a.r:has(.ew-wert) .r-ctl,.r:has(>.r-ctl>.mini) .r-ctl{margin-left:0!important}
  a.r:has(.ew-wert) .r-main span{display:none}
}

/* ---------- D1: Support mit drei Türen ---------- */
.tueren{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin:0 0 8px}
.tuer{display:flex;flex-direction:column;align-items:flex-start;gap:6px;min-height:172px;padding:20px;border-radius:16px;background:var(--n2);border:1px solid var(--line);color:inherit;text-align:left;cursor:pointer;transition:border-color .12s,background .12s}
.tuer:hover{border-color:var(--line2);background:color-mix(in srgb,var(--n2) 85%,var(--n3))}
.tuer-ic{display:grid;place-items:center;width:38px;height:38px;margin-bottom:6px;border-radius:10px;background:var(--n3);box-shadow:inset 0 0 0 1px var(--line);color:var(--h)}
.tuer-ic svg{width:19px;height:19px;stroke:currentColor}
.tuer b{color:var(--h);font:600 17px/1.3 "Archivo",system-ui,sans-serif;letter-spacing:-.01em}
.tuer>span:not(.tuer-ic):not(.tuer-los){color:var(--muted);font-size:14.5px;line-height:1.5}
.tuer-los{display:inline-flex;align-items:center;gap:4px;margin-top:auto;padding-top:10px;color:var(--h);font-size:14.5px;font-weight:500}
.tuer-los svg{width:15px;height:15px;stroke:currentColor}
.tuer-notfall{margin:14px 0 0;color:var(--muted);font-size:14.5px}
.tuer-notfall .link{font-size:14.5px;text-decoration:underline;text-underline-offset:3px}
.form-dlg .ps-buchung{min-height:420px}
@media (max-width:860px){.tueren{grid-template-columns:minmax(0,1fr)}.tuer{min-height:0}}

/* ---------- D2/A12: Kundenstimmen, Knöpfe auf einer Linie, Freigabe weiß statt orange ---------- */
.st-karte .st-akt .btn{margin:0;height:36px}
.st-karte .st-akt .btn.small:not(.ghost){background:var(--inv);color:var(--inv-t)}
.st-wartet .st-karte{border-color:var(--line2)}
/* D5: Blog */
.bl-upsell{display:flex;align-items:flex-start;gap:10px;margin:18px 0 0;color:var(--muted);font-size:14.5px;line-height:1.55;max-width:70ch}
.bl-upsell svg{width:18px;height:18px;flex:none;margin-top:2px;stroke:currentColor}
.bl-mehr{margin-top:22px}
.bl-mehr>.set{margin-top:14px}
/* D4: Markenordner */
.aa{display:inline-grid;place-items:center;width:48px;height:48px;margin-right:12px;border-radius:12px;background:var(--n3);box-shadow:inset 0 0 0 1px var(--line);color:var(--h);font-size:22px;font-weight:600;vertical-align:middle}
.aa-name{vertical-align:middle}
.logo-probe{display:inline-grid;place-items:center;min-width:140px;height:64px;padding:10px 16px;border-radius:12px;background:#F4F3F0;box-shadow:inset 0 0 0 1px var(--line)}
.logo-probe img{display:block;max-height:44px;max-width:220px}

/* ---------- A5: Links & Button am Handy (Talqio-Seite im Dashboard): Adresse oben, Link-Name in voller Breite, Kopieren darunter ---------- */
@media (max-width:860px){
  .linkrow{display:grid!important;grid-template-columns:minmax(0,1fr);gap:8px;width:100%}
  .linkrow .prefix{white-space:normal;overflow-wrap:anywhere;font-size:14px;color:var(--muted)}
  .linkrow input{width:100%!important;min-width:0}
  .linkrow .btn{width:100%;margin:0}
}
/* B2/D10: Gibt es im leeren Zustand schon einen Hauptknopf, wird der gleiche Knopf oben leise */
main:has(.leer .btn:not(.ghost)) .head .btn:not(.ghost){background:var(--n3);color:var(--h);box-shadow:inset 0 0 0 1px var(--line)}
@media (max-width:860px){.zu-tun .r{flex-wrap:nowrap}.zu-tun .r-ctl{margin-left:0!important}.zu-tun .r-ic{display:none}}

/* =====================================================================================
   Abstände und Kontraste (Robert, 11.11.2026: „die Abstände schaden dem Gesamteindruck“)
   Raster 4 px, L = 24 px (eine Fließtext-Zeile). Kopf → Inhalt 40, Abschnitt → Abschnitt 48 (2 L),
   Titel → Karte 14, in Karten 24. Karten heben sich etwas klarer vom Hintergrund ab, Linien sichtbarer.
   ===================================================================================== */
:root{--n2:#151517;--n3:#1D1D20;--n4:#26262A;--line:rgba(244,243,240,.10);--line2:rgba(244,243,240,.18)}
.head{margin-bottom:40px;gap:24px}
.head .lead{margin-top:10px;max-width:64ch}
.set,.zwei>.set{margin-top:48px}
.set-title{margin-bottom:14px}
.set-title small{margin-left:10px}
.set-sub{margin:-4px 0 18px}
.box{padding:24px}
.box.rows{padding:0}
.r{min-height:64px;padding:16px 24px;gap:20px}
.r-main span{margin-top:4px}
.r-ic{margin-right:2px}
.zwei{gap:0 24px}
.kacheln{gap:16px;margin:0}
.kacheln+.set,.kacheln+.zwei>.set,.kacheln+.naechste{margin-top:48px}
.ws-set+.kacheln{margin-top:0}
.kachel{padding:20px 22px 18px;border-radius:16px}
.kachel b{font-size:30px;line-height:1.1}
.kachel span{display:block;margin-top:8px;line-height:1.45}
.notice{margin-bottom:24px}
.leer{padding:40px 24px}
.leer b{margin-bottom:6px}
.leer .btn{margin-top:18px}
.set-foot{margin-top:20px}
.fld+.set-foot{margin-top:20px}
/* Felder nebeneinander (zwei Spalten) bleiben auf einer Linie: kein zusätzlicher Abstand nur für das rechte Feld */
.pills{gap:2px}
/* Talqio-Seiten: Kontaktzeilen, Kacheln und Leisten mit gleicher Luft */
.ko-zeile{padding:14px 20px!important;min-height:64px}
.seiten-tabs{margin-bottom:28px}
.eg-leiste{margin:-8px 0 32px}
.reiter-leiste{margin:-4px 0 36px}
.tueren{gap:16px}
.ws{padding:24px 28px}
.st-liste{gap:12px}
.st-karte{padding:14px}
.wg summary{padding:18px 22px}
.ktab{padding:18px 24px}
.ktab-kopf{padding:14px 24px}
.mt-zwei{gap:32px}
@media (max-width:860px){
  .head{margin-bottom:28px;gap:16px}
  .set,.zwei>.set,.kacheln+.set,.kacheln+.zwei>.set,.kacheln+.naechste{margin-top:40px}
  .box{padding:18px}
  .box.rows{padding:0}
  .r{min-height:60px;padding:14px 16px;gap:14px}
  .kacheln{gap:12px}
  .kachel{padding:16px 16px 14px}
  .kachel b{font-size:26px}
  .ws{padding:20px}
  .ktab{padding:16px}
  .eg-leiste{margin:-4px 0 24px}
  .reiter-leiste{margin:0 0 28px}
}
.ws-set{margin-bottom:24px}
.bl-upsell,.st-fuss{margin-top:28px}
.r-main b{overflow-wrap:break-word;hyphens:manual}
@media (max-width:860px){
  /* drei Kacheln: die dritte über die volle Breite statt allein in der Ecke */
  .kacheln>.kachel:last-child:nth-child(odd){grid-column:1 / -1}
  /* Support-Türen als kompakte Zeilen */
  .tuer{display:grid;grid-template-columns:40px minmax(0,1fr) 20px;column-gap:14px;row-gap:2px;align-items:center;min-height:0;padding:16px}
  .tuer-ic{grid-row:1 / 3;margin:0}
  .tuer b{grid-column:2;font-size:16px}
  .tuer>span:not(.tuer-ic):not(.tuer-los){grid-column:2;font-size:14px}
  .tuer-los{grid-column:3;grid-row:1 / 3;margin:0;padding:0;font-size:0;color:var(--muted)}
  .tuer-los svg{width:18px;height:18px}
  .tueren{gap:10px}
}

/* ---------- Abstände Runde 2 (Robert, 11.11.2026: „hier ist der Abstand viel zu gering … jede Seite“) ----------
   Gemessen auf allen Seiten und Unterseiten (Dashboard, Admin, Talqio im Dashboard), Lücken unter 20 px zwischen Karten behoben */
.notice{margin-top:0}
.notice+*,.notice+section.set,.notice+.set{margin-top:32px!important}
.head+.notice,.head+.notice.ok,.head+.notice.warn{margin-top:0}
.box+.box,section.box+section.box{margin-top:16px}
.box+.btn,.box+.link,.box+button.link{margin-top:16px}
.wg-liste{gap:12px}
p.hint,.hint:not(label .hint){margin-top:12px}
.set-title+.box,.set-title+.box.rows{margin-top:0}
h2.set-title{margin-bottom:14px}
.pills+details,.pills+.notice{margin-top:16px}
.cal-bar{margin-bottom:20px}
.notice.warn+.ps-bereiche{margin-top:18px}
.ko-v-notiz{margin-top:12px}
.ps-dialog-von{margin-top:16px}
.box+.box,section.box+section.box,.box.push-box+.box{margin-top:16px!important}
.ko-v-kopf+.ko-v-notiz,.ko-v-notiz{margin-top:14px!important}
details.slot-tag+details.slot-tag{margin-top:8px}

/* ---------- UI-Feinschliff Runde 2 ---------- */
/* B2 systematisch: Orange nur für den großen Hauptknopf einer Seite. Kleine Aktionsknöpfe (Speichern in Zeilen, Einladen, Hinzufügen …) weiß */
.btn.small:not(.ghost):not(.danger){background:var(--inv);color:var(--inv-t);box-shadow:none}
.btn.small:not(.ghost):not(.danger):hover{background:var(--h);opacity:.9}
.btn.small:not(.ghost):not(.danger) svg{stroke:currentColor}
/* Speichern-Leiste: ruhige, deckende Leiste statt Verlauf über dem Inhalt */
.sticky-foot{margin:28px -44px -104px;padding:16px 44px calc(16px + env(safe-area-inset-bottom));background:var(--n1);border-top:1px solid var(--line);z-index:5}
@media (max-width:860px){.sticky-foot{margin:24px -16px -96px;padding:14px 16px calc(14px + var(--leiste-unten,0px))}}
/* Diagramme: schlanke Säulen statt Blöcke */
.um-start-balken i,.ki-verlauf i{width:100%;max-width:40px;justify-self:center;border-radius:6px 6px 2px 2px}
.ki-verlauf{height:96px}
.ki-verlauf span.jetzt i{background:var(--h)}
/* Website-Seite: Knöpfe und Status in einer Zeile */
@media (min-width:861px){.head-act{flex-wrap:nowrap}}
/* Talqio-Seiten im Dashboard (z. B. Kalender verbinden): kein Talqio-Logo, Robert will Talqio vorerst nicht beim Namen nennen */
.card .wordmark:not(:has(.logo)),.center .wordmark:not(:has(.logo)){display:none}
@media (min-width:861px){
  .head{flex-wrap:wrap;align-items:flex-end}
  .head>div:first-child{flex:1 1 440px;min-width:0}
  .head>.head-act{flex:0 0 auto}
}
/* Handy: Umschalter-Pillen bleiben eine Zeile und scrollen seitlich, statt in der Pille umzubrechen */
@media (max-width:860px){
  .pills:not(.login-form .pills){flex-wrap:nowrap;overflow-x:auto;max-width:100%;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .pills:not(.login-form .pills)::-webkit-scrollbar{display:none}
  .pills>*{flex:none}
  .pills button,.pills a{padding:0 12px}
}

/* ---------- Linie, Symbole, Überstand (Robert, 11.11.2026: „alles in einer Linie, Icons richtig in den Kästchen, nichts übersteht“) ---------- */
/* Knöpfe und Felder nebeneinander: gemeinsame Mitte, kein zusätzlicher Rand oben */
:is(.r-ctl,.actions,.form-knoepfe,.set-foot,.head-act,.kunde-akt,.ws-knoepfe,.bl-knoepfe,.st-akt,.erledigt-form,.inline-form,.copy,.linkrow,.tq-zeile,.kopier-zeile){align-items:center}
:is(.r-ctl,.actions,.form-knoepfe,.set-foot,.head-act,.kunde-akt,.ws-knoepfe,.bl-knoepfe,.st-akt,.erledigt-form,.inline-form,.copy,.linkrow)>:is(.btn,button,a,input,select,form,label){margin-top:0;margin-bottom:0}
/* Feld + Knopf in einer Zeile (auch auf Talqio-Seiten): Knopf so hoch wie das Feld, mittig */
:is(div,form,span,p,label):has(>input:not([type=checkbox]):not([type=radio]):not([type=hidden])+:is(.btn,button)){align-items:center}
:is(div,form,span,p,label):has(>input:not([type=checkbox]):not([type=radio]):not([type=hidden])+:is(.btn,button))>:is(.btn,button){margin-top:0;margin-bottom:0}
.wunsch .actions{align-items:center}
.wunsch .actions>.btn,.erledigt-form>*{margin:0!important}
.erledigt-form input{height:36px}
/* Team einladen: Knopf unten bündig mit dem letzten Feld */
.r.team-neu{align-items:flex-end}
.r.team-neu .r-ctl{padding-bottom:3px}
/* Symbole mittig in ihren Kästchen */
.logo-chip,.r-ic,.tuer-ic,.side-ava,.ps-dialog-ic,.leer-ic{display:inline-grid;place-items:center}
.logo-chip>svg,.logo-chip>img,.r-ic>svg,.tuer-ic>svg,.ps-dialog-ic>svg{display:block;margin:0}
/* Keine Versalien-Etiketten (wirken wie Eyebrows): Satzschreibung, leise */
main h3.sub,main .sub,main h2.aw-zwischen,main .pv-tag,main .ed-sek-kopf span,main .kz .k{text-transform:none;letter-spacing:0}
main h3.sub,main .sub{font-size:14px;font-weight:600;color:var(--muted)}
main .pv-tag{font-size:13px;font-weight:600}
main h2.aw-zwischen{font-size:18px}
/* 12.11.2026 (C9): Größe und Farbe des Kopfs „Abschnitt / Hero“ stehen jetzt in editor.css (Titel oben, Auswahl darunter) */
.ed-sek-kopf span{text-transform:none;letter-spacing:0}
.seite-akt{align-items:center}
.seite-akt>*{margin-top:0!important;margin-bottom:0!important}
/* Knöpfe neben einem Eingabefeld: gleiche Höhe wie das Feld */
:is(div,form,span,p,label):has(>input:not([type=checkbox]):not([type=radio]):not([type=hidden])+:is(.btn,button))>:is(.btn,button):not(.icon-btn){height:42px}
:is(div,form,span,p,label):has(>input:not([type=checkbox]):not([type=radio]):not([type=hidden])+:is(.btn,button))>.icon-btn{width:42px;height:42px;flex:none}
.logo-chip{display:inline-flex!important;align-items:center!important;justify-content:center!important}
input[type=file]{max-width:100%;min-width:0}
@media (max-width:860px){
  /* Zeilen mit Umschalter oder Feld: Bedienung in voller Breite unter dem Text, nichts ragt aus der Karte */
  .r:has(>.r-ctl .pills),form.r{flex-wrap:wrap}
  .r-ctl:has(.pills){flex:1 1 100%;min-width:0;max-width:100%;margin-left:0!important}
  .r-ctl .pills{max-width:100%}
  form.r .r-main{flex:1 1 100%}
  form.r .r-ctl{flex:1 1 100%;margin-left:0!important}
  form.r .r-ctl .btn{width:100%}
  form.r input{max-width:none!important}
}
/* Leadmagnet-Quiz (11.11.2026): Hinweis an der Stufe mit dem größten Absprung */
.tr-hinweis{display:block;margin-top:3px;font-style:normal;font-size:12px;font-weight:600;color:#E5484D}
.quiz-auswertung .kacheln{margin-bottom:16px}
/* Leadmagnet-Quiz: Lead-Liste (11.11.2026) */
.ql{align-items:flex-start}
.ql-punkte{flex:none;display:grid;place-items:center;width:44px;height:44px;border-radius:50%;font-weight:600;font-size:15px;color:var(--h);box-shadow:inset 0 0 0 2.5px var(--c);font-variant-numeric:tabular-nums}
.ql .r-main a{color:inherit;text-decoration:underline;text-decoration-color:rgba(244,243,240,.3);text-underline-offset:3px}
.ql .r-main{min-width:0}
.ql .r-main b{overflow-wrap:anywhere}
.ql .r-ctl{align-self:center}
.ql-antw{margin-top:8px}
.ql-antw summary{cursor:pointer;width:max-content;font-size:14px;font-weight:500;color:var(--muted);list-style:none}
.ql-antw summary::-webkit-details-marker{display:none}
.ql-antw summary::after{content:"›";display:inline-block;margin-left:6px;transition:transform .2s}
.ql-antw[open] summary::after{transform:rotate(90deg)}
.ql-antw p{margin-top:8px;font-size:14px;line-height:1.5;color:var(--body)}
.ql-antw p b{display:block;font-size:12px;font-weight:600;color:var(--faint)}

/* =====================================================================================
   UI-Fundament nach der Prüfung vom 12.11.2026 (Robert: „Mach alles“), Punkte C1–C18 und D4.
   Schrift in drei Stufen (Regel vom 11.11.): Text, Knöpfe, Menü und Feldnamen 16 px · Hinweise und Unterzeilen 14 px ·
   Zähler, Schilder und Diagramm-Achsen 12 px. Am Handy nie unter 14 px (außer diesen Hinweisen), Felder 56 px hoch,
   Tippflächen 44 px, Pillen 40 px. Orange nur für die eine Hauptaktion, Gewähltes und Aktives weiß.
   Gilt auch auf den Talqio-Seiten im Dashboard (diese Datei hängt dort mit drin). Talqio-eigene Bausteine (Kontaktzeilen,
   Kalender, Umsatz …) bleiben in Talqios konto.css.
   ===================================================================================== */
:root{--fs-text:16px;--fs-klein:14px;--fs-mini:12px}

/* ---------- D4: Schriften nur einmal laden. Adresse relativ zu dieser Datei (/ds/assets/fonts/…), also dieselbe wie beim Vorladen.
   Gleiche Angaben wie in dash.css und Talqios konto.css: die spätere Regel gewinnt, die Datei unter /assets/fonts/ wird nicht mehr geholt ---------- */
@font-face{font-family:"Archivo";src:url(fonts/Archivo-latin.woff2) format("woff2");font-weight:400 900;font-stretch:62% 125%;font-display:swap}
@font-face{font-family:"Geist";src:url(fonts/Geist-latin.woff2) format("woff2");font-weight:400 600;font-display:swap}

/* ---------- C1: Stufe Text 16 px. Inhalte überall, Menü, Knöpfe, Pillen und Links nur am Desktop (am Handy haben sie eigene Größen ab 14 px) ---------- */
.r-main b,label span,.fld>span,.field span,.check,.check span,.mini,.mini.big,.notice,.notice:has(.btn),.leer p,.status,.ew-wert,
.who b,.kunde-link b,.kz,.ktab .kz,.punkt-wort,.zahlung,.status-zeile,.status-zeile .zahlung,.fakten .r-main b,.fakten .r-main span,
.wg-name b,.wunsch-text,.seen,.use,.bar-name,.bar-row b,.tr-stufe b,.tr-stufe span:first-child,.tr-name,.af p,.farbe b,.imp-sek b,
.ff b,.type-main b,.opt b,.segment-opt b,.logo-row b,.day b,.bk-when b,.bk-who b,.setup-head b,.times,.closed,.ki-ergebnis p,.steps p,.app-steps li,
.avv-text,.ps-anfrage,.ps-bereich b,.ps-alle b,.ps-auf summary,.ps-aend-kopf,.ps-aend-notiz,.ps-log summary,.ps-mt b,.ps-mt div,
.ws-zeile,.ws-aend,.eg-kunde,.ki-k-zahl b,.mail-dlg-kopf b,.mini-tabelle,.ql-antw summary,.ql-antw p,.copy input,
.ps-dialog-text,.mt-karte .ps-dialog-text,.bl-upsell,.side-site b,.r-main label span,.r-main .fld>span{font-size:var(--fs-text)}
/* Spans im Titel einer Zeile erben die Titelgröße (.r-main span gilt sonst auch für sie) */
.r-main b span:not(.tag):not(.badge){font-size:inherit}
.avv-text h3,.avv-text h4,.avv-text h5{font-size:var(--fs-text);line-height:1.5;letter-spacing:0}
/* „Was genau?“ ohne den Innenabstand des Browsers, sonst steht er eingerückt, sobald er in die nächste Zeile rutscht */
.ws-aend .link{padding-inline:0}
.avv-text h3{margin-top:28px}
@media (min-width:861px){
  .side-item,.btn,.btn.ghost,.btn.small,.card .btn,.login-form .pills button,.pills button,.pills a,.seg a,.seiten-tabs a,
  .link,.side-foot .link,.back,.ws-aend .link,.tuer-notfall .link,.tuer>span:not(.tuer-ic):not(.tuer-los),.tuer-los{font-size:var(--fs-text)}
  /* Talqio-Seiten: Knopfreihen mit eigener Größe, sonst stünden 14-px- und 16-px-Knöpfe in einer Reihe (Ghost-Knöpfe sind jetzt 16 px) */
  .ko-aktionen .btn,.ko-schnell .btn,.ko-wv-knoepfe .btn,.mail-knoepfe .btn,.kf-wahl .btn,.tf-angebot .btn,.dlg .dlg-knoepfe .btn,.ob-fuss .btn{font-size:var(--fs-text)}
  .side-item{line-height:1.5}
  /* längere Namen in der 240-px-Leiste laufen mit … aus, statt seitlich zu scrollen */
  .side-item>span:not(.badge){min-width:0;overflow:hidden;text-overflow:ellipsis}
  .side-nav{overflow-x:hidden}
}
/* ---------- C1: Stufe Hinweis 14 px (Unterzeilen, Feld-Hinweise, Tabellenkopf, Bildunterschriften, Code) ---------- */
.set-title small,.r-main span,.fld>small,.fld .hint,.small,.k,.kz .k,.kz-unter,.ktab-kopf,.who .mail,.who .note,.wg-name span,.wg-zahl,
.kachel span,.side-gruppe,.side-mail,.side-ava,.af span,.farbe span,.imp-sek span,.imp-sek i,.wunsch-ziel,
.ff span,.type-main span,.type-main small,.opt span,.segment-opt span,.logo-row small,.bk-when span,.bk-who span,.bk-who summary,.setup-head span,
.tr-stufe small,.msg,.save-state,.mono,.code pre,.pfade code,.ki-md,.code-feld,.mini-tabelle th,.mini-tabelle .mono,.tip,.demo-cap,.pille,
.ps-aend-liste li,.ps-log summary span,.ps-mt .muted,.ps-bereich small,.mail-dlg-kopf span,.ps-dialog-von,.mt-karte .ps-dialog-von,
.um-start-zahlen span,.pv-tag,main .pv-tag,.pv-open,.ql-antw p b,main .app-hinweis,.upload-zeile input[type=file],.naechste .r-main span,.side-site span{font-size:var(--fs-klein)}
/* Tabellenkopf der Kundenliste einzeilig („Besucher 30 T.“ brach bei 14 px in der schmalen Spalte um) */
.ktab-kopf>span{white-space:nowrap}
/* Schilder in Zeilen-Titeln bleiben klein (.r-main span hätte sie sonst mit angehoben) */
.tag,.r-main .tag{font-size:var(--fs-mini)}
/* ---------- C1: Stufe 12 px für Achsen und Zähler (vorher 9,5 bis 11,5 px) ---------- */
.saeulen-achse,.um-start-balken em,.bk-who details i,main .app-baut{font-size:var(--fs-mini)}

/* ---------- C9: keine Eyebrows. „Bisherige Zugriffe“ und Vertrags-Abschnitte in Satzschreibung ohne Sperrung ---------- */
.ps-verlauf-t{font-size:var(--fs-klein);font-weight:600;text-transform:none;letter-spacing:0;color:var(--muted)}
/* Fenster „Was geht online?“: Titel oben, Anzahl darunter statt kleiner grauer Zeile über der Überschrift */
.ws-dlg .mail-dlg-kopf>div{display:grid;gap:2px}
.ws-dlg .mail-dlg-kopf span{color:var(--h);font:600 18px/1.33 "Archivo",system-ui,sans-serif;letter-spacing:-.01em}
.ws-dlg .mail-dlg-kopf b{color:var(--muted);font-size:var(--fs-klein);font-weight:400}

/* ---------- C3: Orange nur für die eine Hauptaktion ---------- */
/* Gewählte Optionen weiß umrandet, wie die weißen Schalter (Robert, 07.11.2026) */
.opt.on,.segment-opt.on,.font-opt.on,.icon-grid .ic.on{box-shadow:inset 0 0 0 1.5px var(--h)}
.tool.on{border-color:var(--h)}
.ko-zahl.on{border-color:var(--h);box-shadow:inset 0 0 0 1px var(--h)}
.seiten-tabs a.on::after{background:var(--h)}
/* Statistik: heute weiß. Achtung, die Säulen setzen --h als Höhe im style-Attribut, darum hier --inv statt --h (das war auch der Grund, warum Hover sie unsichtbar machte) */
.saeulen i:last-child,.saeulen i:hover{background:var(--inv)}
/* Zweite Aktionen als Ghost-Knopf: Aufnahme im Blog, Landingpage bauen (KI), Veröffentlichen neben der Speichern-Leiste, Call planen neben Call starten */
.bl-rec [data-zustand="start"] .btn:not(.ghost),.btn[data-lp-los]:not(.ghost),main:has(.sticky-foot .btn:not(.ghost)) .head .btn:not(.ghost),
main:has(.call-knoepfe .btn:not(.ghost)) .plan-fuss .btn:not(.ghost){background:var(--n3);color:var(--h);box-shadow:inset 0 0 0 1px var(--line);font-weight:500}
.bl-rec [data-zustand="start"] .btn:not(.ghost):hover,.btn[data-lp-los]:not(.ghost):hover,main:has(.sticky-foot .btn:not(.ghost)) .head .btn:not(.ghost):hover,
main:has(.call-knoepfe .btn:not(.ghost)) .plan-fuss .btn:not(.ghost):hover{background:var(--n4);box-shadow:inset 0 0 0 1px var(--line2)}
/* Kalender verbinden: drei gleichwertige Anbieter als ruhige Zeilen mit Logo statt drei oranger Knöpfe */
.btn.kal-wahl:not(.aus){justify-content:flex-start;height:56px;padding:0 18px;border-radius:14px;background:var(--n3);color:var(--h);box-shadow:inset 0 0 0 1px var(--line);font-weight:500}
.btn.kal-wahl:not(.aus):hover{background:var(--n4);box-shadow:inset 0 0 0 1px var(--line2)}
/* Vorschau der Mitteilung: Knopf weiß, das echte Fenster beim Kunden bleibt orange */
.mt-karte .btn{background:var(--inv);color:var(--inv-t)}
/* Als App aufs Handy: Schrittnummern ruhig statt drei oranger Punkte (Stil kommt aus app.js, darum mit main davor) */
main .app-schritte li::before{background:var(--n3);color:var(--h);box-shadow:inset 0 0 0 1px var(--line2)}

/* ---------- Admin, Kunde verwalten (Markup in support.js, 12.11.2026): schon geschickte Änderung, „Neue Fassung schicken“ erst aufgeklappt.
   Ruhige Zeile wie ein Link mit Pfeil, kein Orange, Abstand vor dem Formular ---------- */
.ps-schicken-neu>summary{display:block;padding:10px 0;color:var(--h);font-size:var(--fs-text);font-weight:500;line-height:1.5;cursor:pointer;list-style:none}
.ps-schicken-neu>summary::-webkit-details-marker{display:none}
.ps-schicken-neu>summary::after{content:"›";display:inline-block;margin-left:8px;color:var(--muted);font-size:20px;line-height:1;vertical-align:-1px;transition:transform .15s}
.ps-schicken-neu[open]>summary::after{transform:rotate(90deg)}
.ps-schicken-neu>summary:hover::after{color:var(--h)}
.ps-schicken-neu>form{margin-top:12px}

/* ---------- Login (Markup in index.js, 12.11.2026): Fehlerhinweis ohne Skript mit Luft zum Text darüber, Bestätigung „Schau in dein Postfach“
   mit dem Knopf im Abstand Text → Knopf (1 Zeile) und so hoch wie der Knopf im Formular ---------- */
.card .notice{margin-top:20px}
.card .notice+*{margin-top:24px!important}
#login-gesendet .btn{height:40px;margin-top:24px}

/* ---------- C13: Suchfeld mit Symbol, Text beginnt rechts neben der Lupe (Zeile 26 oben hatte Talqios 38 px überschrieben) ---------- */
.ko-suche input{padding-left:40px}

/* ---------- C10: Paket im Fenster „Neuer Kunde“ (und Talqio-Bereich bei „Neues Projekt“) über die volle Breite, jede Option gleich breit ---------- */
.form-dlg .invite-form .fld:has(>.pills),.form-dlg .invite-form .fld:has(>input[name=site]){grid-column:1 / -1}
.form-dlg .invite-form .fld>.pills{display:flex;width:100%}
.form-dlg .invite-form .fld>.pills>button{flex:1 1 0;min-width:0;justify-content:center}
@media (max-width:560px){
  /* am Handy passen „Onepager · ab 250 €“ und „Website · ab 350 €“ nicht nebeneinander: untereinander, ganz lesbar */
  .form-dlg .invite-form .fld>.pills{flex-direction:column;gap:4px;overflow:visible;border-radius:18px}
  .form-dlg .invite-form .fld>.pills>button{flex:none;width:100%;height:44px;border-radius:14px}
}

/* ---------- Felder: Farbwähler so hoch wie das Hex-Feld daneben, Datei-Feld als ruhiges Feld statt nacktem Browser-Knopf ---------- */
input[type=color]{width:42px;height:42px;border-radius:10px}
input[type=file]{min-height:42px;padding:5px 12px 5px 5px;border-radius:10px;background:var(--in);border:1px dashed var(--line2);color:var(--muted);font:400 14px/1.4 "Geist",system-ui,sans-serif;cursor:pointer}
input[type=file]::file-selector-button{height:30px;margin-right:12px;padding:0 14px;border:0;border-radius:999px;background:var(--n3);box-shadow:inset 0 0 0 1px var(--line2);color:var(--h);font:500 16px/1 "Geist",system-ui,sans-serif;cursor:pointer}

/* ---------- C16: Liste in der Seitenleiste läuft unten weich aus, solange noch Punkte darunter liegen ---------- */
@property --leiste-rest{syntax:"<length>";inherits:false;initial-value:0px}
@keyframes leiste-rest{0%,85%{--leiste-rest:72px}100%{--leiste-rest:0px}}
@media (min-width:861px){
  /* ohne Scroll-Zeitleiste (ältere Browser): Verlauf fest, unten Luft in derselben Höhe, damit der letzte Punkt am Ende ganz zu sehen ist */
  .side-nav{padding-bottom:72px;-webkit-mask-image:linear-gradient(to bottom,#000 calc(100% - 72px),transparent);mask-image:linear-gradient(to bottom,#000 calc(100% - 72px),transparent)}
  @supports (animation-timeline:scroll()){
    .side-nav{padding-bottom:8px;-webkit-mask-image:linear-gradient(to bottom,#000 calc(100% - var(--leiste-rest)),transparent);mask-image:linear-gradient(to bottom,#000 calc(100% - var(--leiste-rest)),transparent);animation:leiste-rest linear both;animation-timeline:scroll(self)}
  }
}

/* ---------- Handy (bis 860 px) ---------- */
@keyframes menue-rest{0%,85%{opacity:1}100%{opacity:0}}
@media (max-width:860px){
  /* C2: Felder mindestens 56 px hoch (so hoch wie die Knöpfe), Schrift 16 px, sonst zoomt iOS. min-height statt height:
     wirkt auch gegen flex:1 in Spalten-Formularen, das Feld wird nie mehr flach gedrückt (Erledigt-Feld im Eingang war 21 px) */
  input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=hidden]):not([type=file]):not([type=color]):not(.bl-titel),select{min-height:56px;font-size:var(--fs-text)}
  textarea,textarea.code-feld{font-size:var(--fs-text)}
  input.bl-titel{min-height:56px}
  .erledigt-form input,.ki-schnell input{flex:none}
  input[type=color]{width:56px;height:56px;border-radius:12px}
  input[type=file]{min-height:56px;padding:6px 12px 6px 6px}
  input[type=file]::file-selector-button{height:42px}
  /* Knopf direkt neben einem Feld: so hoch wie das Feld */
  :is(div,form,span,p,label):has(>input:not([type=checkbox]):not([type=radio]):not([type=hidden])+:is(.btn,button))>:is(.btn,button):not(.icon-btn){height:56px}
  :is(div,form,span,p,label):has(>input:not([type=checkbox]):not([type=radio]):not([type=hidden])+:is(.btn,button))>.icon-btn{width:56px;height:56px}

  /* C4: Tippflächen mindestens 44 px, Pillen und Reiter 40 px */
  .btn,.btn.ghost,.btn.small{min-height:44px}
  .icon-btn{width:44px;height:44px}
  .pills button,.pills a,.seg a{height:40px}
  .login-form .pills button{height:44px}
  .back{min-height:44px}
  .side .wordmark{padding-block:11px;margin-block:-11px}
  .check{min-height:44px;align-items:center}
  .check input{margin-top:0;width:20px;height:20px}
  .aufklapp>summary{min-height:44px;align-items:center}
  .dot{width:44px;height:44px}
  /* Textlinks: unsichtbarer Innenabstand oben und unten, die Zeile verschiebt sich nicht */
  .ws-zeile a,.ws-aend .link,main p a:not(.btn),.eg-kunde a,.status-zeile a,.notice a:not(.btn),.r-main span a{padding-block:12px;margin-block:-12px}
  .card .wordmark{padding-block:10px;margin-block:-10px}
  /* Schalter: unsichtbar größere Tippfläche (44 px), sichtbar bleibt der kleine Schalter */
  .sw::after{content:"";position:absolute;inset:-12px -5px}
  /* aufklappbare Zeilen: ganze Zeile 44 px hoch */
  .ps-auf>summary,details.set>summary.set-title{display:flex;align-items:center;min-height:44px}
  .ws-zeile a{border-bottom:0;text-decoration:underline;text-decoration-color:var(--line2);text-underline-offset:4px}

  /* C3: in der Leiste und im Menü ist das Gewählte weiß, Orange bleibt nur der Menü-Knopf in der Mitte (Roberts DNA, 11.11.) */
  .leiste-item.on::after{background:var(--h)}
  .menue-item.on svg{color:var(--h)}

  /* C5: Beschriftung der Leiste 14 px. Mitte 80 statt 88 px, damit „Kalender“, „Kontakte“, „Statistik“ ganz stehen */
  .leiste{grid-template-columns:1fr 1fr 80px 1fr 1fr;padding-inline:4px}
  .leiste-item,.menue-item,.menue-gt{font-size:var(--fs-klein)}

  /* C6: Menü. Dahinter deckend, nichts von der Seite scheint durch. Unten ein weicher Verlauf über der letzten Kachelreihe,
     solange noch etwas darunter liegt (Scroll-Zeitleiste, ohne sie bleibt es wie bisher). bottom:-16px = Innenabstand des Menüs,
     sonst klebt der Verlauf 16 px über der Kante und darunter scheint die Kachel ungedeckt durch. Abmelden als ganze Zeile */
  .menue-bg,html.leiste-zieht .menue-bg{background:var(--n1)}
  .menue::after{content:"";position:sticky;bottom:-16px;z-index:2;display:block;height:56px;margin:-56px -16px 0;background:linear-gradient(to bottom,transparent,var(--n2) 85%);pointer-events:none;opacity:0}
  @supports (animation-timeline:scroll()){
    .menue::after{animation:menue-rest linear both;animation-timeline:scroll(nearest block)}
  }
  .menue-fuss{display:grid;gap:10px;justify-content:stretch}
  .menue-wer{display:grid;justify-items:stretch;gap:10px;margin:0;text-align:left}
  .menue-wer>span{font-size:var(--fs-klein);color:var(--faint)}
  .menue-wer .link,.menue-reset{display:flex;align-items:center;justify-content:center;width:100%;min-height:48px;border-radius:14px;background:var(--n3);box-shadow:inset 0 0 0 1px var(--line);color:var(--h);font-size:var(--fs-text);font-weight:500}
  /* Zieh-Hinweis nur beim ersten Mal: leiste.js setzt html.menue-kennt, sobald das Menü einmal offen war */
  html.menue-kennt .menue-hinweis{display:none}

  /* C11: Admin-Kundenliste in zwei Zeilen: Name und Status, Kontakt und Zahlung. Der Rest steht auf der Kundenseite, die ganze Zeile ist der Link */
  .ktab:not(.ktab-kopf){grid-template-columns:minmax(0,1fr) auto;column-gap:14px;row-gap:2px;align-items:center;padding:14px 16px}
  .ktab:not(.ktab-kopf)>.who{grid-column:1;grid-row:1 / span 2;min-width:0}
  .ktab:not(.ktab-kopf)>.kz:nth-child(2){grid-column:2;grid-row:1;justify-self:end}
  .ktab:not(.ktab-kopf)>.kz:nth-child(6){grid-column:2;grid-row:2;justify-self:end}
  .ktab:not(.ktab-kopf)>.kz:nth-child(3),.ktab:not(.ktab-kopf)>.kz:nth-child(4),.ktab:not(.ktab-kopf)>.kz:nth-child(5),.ktab:not(.ktab-kopf)>.kunde-akt{display:none}
  .ktab:not(.ktab-kopf) .k,.ktab:not(.ktab-kopf) .kz-unter,.ktab:not(.ktab-kopf) .who .mail+.mail{display:none}
  .ktab:not(.ktab-kopf) .who .mail{margin-top:2px}
  .ktab:not(.ktab-kopf) .punkt-wort,.ktab:not(.ktab-kopf) .zahlung{font-size:var(--fs-klein);white-space:nowrap}
  /* eigene Projekte stehen am Handy im Menü (Gruppe „Deine Projekte“) und unten in der Leiste, nicht noch einmal groß im Hauptbereich */
  .kunden-liste:has(.kunde.projekt){display:none}

  /* C12: AVV ohne zweite Scrollbox. Vertrag läuft normal mit, Zustimmen bleibt unten erreichbar und hat die volle Breite */
  .page.avv{padding-bottom:16px}
  .avv-text{max-height:none;overflow:visible;padding:18px}
  .avv form{position:sticky;bottom:0;z-index:5;margin:0 -16px;padding:14px 16px calc(16px + env(safe-area-inset-bottom));background:var(--n1)}
  .avv form::before{content:"";position:absolute;left:0;right:0;bottom:100%;height:48px;background:linear-gradient(to bottom,transparent,var(--n1));pointer-events:none}
  .avv form .check{margin-top:0}
  .avv form .btn{width:100%;margin-top:12px}
  .avv>.btn{position:sticky;bottom:calc(16px + env(safe-area-inset-bottom));z-index:5;display:flex;width:100%}
  /* schwebender Knopf: darunter deckend, nach oben weich auslaufend (Regel Mobil-CTA), kein Blur über scrollendem Text (Safari) */
  .avv:has(>.btn)::after{content:"";position:fixed;left:0;right:0;bottom:0;z-index:4;height:calc(112px + env(safe-area-inset-bottom));background:linear-gradient(to bottom,transparent,var(--n1) 45%);pointer-events:none}
}

/* Typo-Feinschliff (Skill typografie, 12.11.2026): nur Zeilenabstände aufs 4-px-Raster und die Zeilenlänge im Vertrag.
   Schriften, Farben, Größen-Reihenfolge und Layout bleiben. Text 16/24, Hinweise 14/20, Titel 16/20, H1 28/36 (Handy 26/32) */
body{line-height:1.5}
.lead,.notice,.ws-zeile,.ws-aend,.ps-anfrage,.ps-aend-notiz,.ps-mt div,.tuer>span:not(.tuer-ic):not(.tuer-los),.avv-text,.bl-upsell,
.ps-dialog-text,.mt-karte .ps-dialog-text,.ql-antw p,.r-main b{line-height:1.5}
.r-main>span,.set-sub,.hint,.fld>small,.fld .hint,.ws-dlg-hinweis,.kachel span{line-height:1.43}
.set-title{line-height:1.25}
h1,.head h1{line-height:36px}
.card h1{line-height:32px}
.avv-text h2{line-height:1.2}
.avv-text h3,.avv-text h4,.avv-text h5{line-height:1.25}
/* Vertrag: rund 68 Zeichen pro Zeile statt bis zu 116 (Geist: 1ch ≈ 1,4 Zeichen) */
.avv>.lead,.avv-text p,.avv-text li{max-width:48ch}
@media (max-width:860px){h1,.head h1{line-height:32px}}