@font-face{font-family:"Bricolage Grotesque";font-weight:800;font-display:swap;src:url(fonts/bricolage-grotesque-latin-800-normal.woff2) format("woff2")}
@font-face{font-family:"Instrument Sans";font-weight:400;font-display:swap;src:url(fonts/instrument-sans-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:"Instrument Sans";font-weight:600;font-display:swap;src:url(fonts/instrument-sans-latin-600-normal.woff2) format("woff2")}

:root{
  --ink:#1D1D1F;--ink-2:#424245;--leise:#86868B;--linie:rgba(0,0,0,.08);--linie-2:rgba(0,0,0,.05);
  --bg:#F5F5F7;--karte:#FFFFFF;--feld:#F2F2F7;--feld-hover:#EBEBF0;
  --violett:#4B3BFF;--violett-2:#6A5CFF;--gelb:#FFD60A;--rot:#FF3B30;--gruen:#34C759;--orange:#FF9500;
  --k:#4B3BFF;--k-text:#fff;
  --f-display:"Bricolage Grotesque","Arial Narrow",system-ui,sans-serif;
  --f-body:"Instrument Sans",-apple-system,BlinkMacSystemFont,"SF Pro Text",system-ui,sans-serif;
  --r-gross:22px;--r:14px;--r-klein:10px;
  --schatten:0 0 0 .5px rgba(0,0,0,.04),0 2px 6px rgba(0,0,0,.04),0 12px 32px rgba(0,0,0,.05);
  --schatten-hoch:0 0 0 .5px rgba(0,0,0,.05),0 6px 16px rgba(0,0,0,.08),0 24px 60px rgba(0,0,0,.10);
  --ease:cubic-bezier(.2,.8,.2,1);
  --seite:264px;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%;background:var(--bg);scroll-behavior:smooth;scroll-padding-top:90px}
html:has(body.ohne-menue){background:#0B0A10}
body{margin:0;background:var(--bg);color:var(--ink);font:16px/1.5 var(--f-body);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
a{color:var(--violett);text-decoration:none}
a:hover{text-decoration:underline}
h1,h2,h3{margin:0;letter-spacing:-.02em;line-height:1.1}
h1{font:800 clamp(30px,3.6vw,40px)/1.05 var(--f-display);letter-spacing:-.03em}
h2{font:800 21px/1.2 var(--f-display)}
.leise{color:var(--leise)}
small{color:var(--leise);font-weight:400}
.icon{width:20px;height:20px;flex:none}
button{font-family:inherit}
::selection{background:rgba(75,59,255,.18)}

/* ---------- Layout: Seitenleiste wie macOS ---------- */
.mit-menue .inhalt{margin-left:var(--seite);max-width:calc(1180px + var(--seite));padding:36px 44px 120px;animation:rein .45s var(--ease) both}
.seitenleiste{position:fixed;inset:0 auto 0 0;width:var(--seite);display:flex;flex-direction:column;gap:6px;padding:22px 14px 14px;background:rgba(250,250,252,.78);backdrop-filter:saturate(180%) blur(24px);-webkit-backdrop-filter:saturate(180%) blur(24px);border-right:1px solid var(--linie);z-index:20}
.sl-logo{padding:2px 10px 18px}
.sl-logo img{height:36px;display:block}
.sl-nav,.sl-kunden{display:grid;gap:2px}
.sl-nav a,.sl-kunden a{display:flex;align-items:center;gap:11px;padding:8px 10px;border-radius:10px;color:var(--ink-2);font-weight:600;font-size:15px;text-decoration:none;transition:background .15s}
.sl-nav a:hover,.sl-kunden a:hover{background:rgba(0,0,0,.045)}
.sl-nav a.aktiv,.sl-kunden a.aktiv{background:rgba(75,59,255,.10);color:var(--violett)}
.sl-nav .icon{color:var(--leise)}
.sl-nav a.aktiv .icon{color:var(--violett)}
.badge{margin-left:auto;background:var(--rot);color:#fff;font:600 12px/1 var(--f-body);padding:4px 7px;border-radius:999px}
.sl-titel{display:flex;align-items:center;justify-content:space-between;margin:18px 10px 4px;font:600 12px var(--f-body);color:var(--leise);text-transform:uppercase;letter-spacing:.06em}
.sl-plus{display:grid;place-items:center;width:26px;height:26px;border-radius:8px;color:var(--leise)}
.sl-plus:hover{background:rgba(0,0,0,.05);color:var(--ink)}
.sl-plus .icon{width:16px;height:16px}
.sl-kunden{overflow:auto;flex:1;align-content:start;margin:0 -4px;padding:0 4px}
.sl-kunden span:last-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sl-kunden a.pausiert{opacity:.5}
.sl-fuss{display:flex;align-items:center;gap:10px;padding:10px;border-top:1px solid var(--linie);margin-top:6px}
.sl-fuss a{color:var(--leise);display:grid;place-items:center;width:30px;height:30px;border-radius:8px;margin-left:auto}
.sl-fuss a:hover{background:rgba(0,0,0,.05);color:var(--ink)}
.sl-user{font-size:14px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.avatar{flex:none;display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:linear-gradient(135deg,var(--violett),#9B5CFF);color:#fff;font:800 12px var(--f-display)}
.mobil-kopf,.tabbar{display:none}

/* ---------- Anmelden / Einrichtung ---------- */
body.ohne-menue{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:24px 16px;background:radial-gradient(1200px 600px at 20% -10%,rgba(75,59,255,.35),transparent 60%),radial-gradient(900px 500px at 110% 110%,rgba(255,214,10,.16),transparent 60%),#0B0A10}
.ohne-menue .inhalt{width:100%}
.karte.schmal{max-width:420px;margin:0 auto;padding:36px 30px;border-radius:28px;box-shadow:0 30px 80px rgba(0,0,0,.45);animation:auftauchen .6s var(--ease) both}
.login-logo{width:230px;display:block;margin:0 auto 26px}
.ohne-menue h1{text-align:center;font-size:28px}
.ohne-menue .karte>p.leise{text-align:center;margin:6px 0 0}
.ohne-menue .formular .knopf{justify-self:stretch;padding:15px}
.ohne-menue .toast{position:static;transform:none;max-width:420px;margin:0 auto 14px}

/* ---------- Grundbausteine ---------- */
.karte{background:var(--karte);border-radius:var(--r-gross);box-shadow:var(--schatten);padding:24px;min-width:0}
.karte.mittel{max-width:760px}
.karte.leer{text-align:center;padding:56px;color:var(--leise)}
.karten-kopf{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:6px;flex-wrap:wrap}
.karten-kopf h2{display:flex;align-items:center;gap:8px}
h2.abschnitt{margin:44px 0 16px;font-size:24px}

.knopf{display:inline-flex;align-items:center;justify-content:center;gap:8px;background:var(--violett);background:linear-gradient(180deg,var(--violett-2),var(--violett));color:#fff;border:0;border-radius:999px;padding:11px 20px;font:600 15px var(--f-body);text-decoration:none!important;cursor:pointer;box-shadow:0 1px 2px rgba(75,59,255,.3),0 6px 16px rgba(75,59,255,.22),inset 0 1px 0 rgba(255,255,255,.18);transition:transform .15s var(--ease),box-shadow .2s,filter .2s;white-space:nowrap}
.knopf:hover{filter:brightness(1.06);box-shadow:0 2px 4px rgba(75,59,255,.3),0 10px 24px rgba(75,59,255,.28)}
.knopf:active{transform:scale(.97)}
.knopf:disabled{opacity:.6;cursor:default}
.knopf.zweit{background:rgba(0,0,0,.055);color:var(--ink);box-shadow:none}
.knopf.zweit:hover{background:rgba(0,0,0,.085);filter:none}
.knopf.klein{padding:7px 14px;font-size:14px}
.knopf.voll{width:100%;margin-top:12px}
.knopf.gefahr{background:rgba(255,59,48,.1);color:var(--rot);box-shadow:none}
.knopf.gefahr:hover{background:rgba(255,59,48,.16);filter:none}
.knopf.ok{background:var(--gruen);box-shadow:none}
.link-knopf{border:0;background:none;color:var(--leise);cursor:pointer;font:600 14px var(--f-body);padding:6px 4px}
.link-knopf:hover{color:var(--rot)}
.zurueck{display:inline-flex;align-items:center;gap:4px;margin-bottom:14px;color:var(--violett);font-weight:600;font-size:15px}
.marke{display:inline-block;background:var(--gelb);color:var(--ink);font:600 12px var(--f-body);padding:4px 10px;border-radius:999px;vertical-align:middle;letter-spacing:0}
.chip{display:inline-flex;align-items:center;font:600 12px/1 var(--f-body);padding:6px 10px;border-radius:999px;background:var(--feld);color:var(--ink-2);white-space:nowrap}
.chip.st-idee{color:var(--leise)}
.chip.st-entwurf{background:rgba(75,59,255,.1);color:#3A2BD0}
.chip.st-freigabe{background:rgba(255,149,0,.14);color:#B25E00}
.chip.st-geplant{background:rgba(52,199,89,.15);color:#1E7B37}
.chip.st-gepostet{background:var(--ink);color:#fff}
.punkt{display:inline-block;width:9px;height:9px;border-radius:50%;background:var(--k);margin-right:6px}
.balken{display:block;height:6px;border-radius:999px;background:rgba(0,0,0,.07);overflow:hidden;flex:1}
.balken>span{display:block;height:100%;background:var(--violett);border-radius:inherit;transition:width .6s var(--ease)}
.ok{color:#1E7B37}.fehlt{color:#C25E00}
.leer{color:var(--leise);padding:10px 0}
.fehler{background:rgba(255,59,48,.08);color:#C9241A;border-radius:12px;padding:11px 14px;margin:12px 0;font-weight:600;font-size:14px}

/* Toast statt Hinweis-Balken */
.toast{position:fixed;top:18px;left:50%;transform:translateX(-50%);z-index:60;background:rgba(29,29,31,.92);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);color:#fff;padding:12px 20px;border-radius:999px;font-weight:600;font-size:15px;box-shadow:0 10px 30px rgba(0,0,0,.25);animation:toast 3.6s var(--ease) both;max-width:calc(100vw - 32px);text-align:center}
.mit-menue .toast{left:calc(50% + var(--seite) / 2)}

/* ⓘ und Popup */
.info{display:inline-grid;place-items:center;width:18px;height:18px;border-radius:50%;border:1.5px solid currentColor;background:none;color:var(--leise);font:700 11px/1 Georgia,serif;font-style:italic;cursor:pointer;padding:0;vertical-align:middle;margin-left:6px;transition:all .15s;flex:none}
.info:hover{color:var(--violett);background:rgba(75,59,255,.08);transform:scale(1.1)}
.dialog{border:0;padding:0;border-radius:24px;width:min(480px,calc(100vw - 32px));box-shadow:var(--schatten-hoch);color:var(--ink)}
.dialog::backdrop{background:rgba(20,18,30,.35);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.dialog[open]{animation:auftauchen .35s var(--ease) both}
.dialog-zu{position:absolute;top:14px;right:14px;width:32px;height:32px;border-radius:50%;border:0;background:var(--feld);color:var(--ink-2);font-size:14px;cursor:pointer}
.dialog-zu:hover{background:var(--feld-hover)}
.dialog-inhalt{padding:28px 28px 26px}
.dialog-inhalt h2{font-size:24px;padding-right:40px;margin-bottom:10px}
.dialog-inhalt p{margin:0 0 4px;color:var(--ink-2);line-height:1.55}
.tipps{margin-top:16px;background:linear-gradient(180deg,rgba(255,214,10,.16),rgba(255,214,10,.08));border-radius:16px;padding:14px 16px}
.tipps b{font-size:14px}
.tipps ul{margin:8px 0 0;padding-left:18px;display:grid;gap:6px;font-size:15px;color:var(--ink-2)}

/* ---------- Übersicht ---------- */
.titelzeile{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;margin-bottom:26px;flex-wrap:wrap}
.titelzeile p{margin:0 0 6px;font-weight:600;text-transform:uppercase;font-size:13px;letter-spacing:.05em}
.widgets{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:18px}
.widget{background:var(--karte);border-radius:20px;box-shadow:var(--schatten);padding:18px 18px 16px;display:grid;gap:4px;color:var(--ink);text-decoration:none!important;transition:transform .2s var(--ease),box-shadow .2s;animation:rein .5s var(--ease) both}
.widget:nth-child(2){animation-delay:.04s}.widget:nth-child(3){animation-delay:.08s}.widget:nth-child(4){animation-delay:.12s}
a.widget:hover{transform:translateY(-2px);box-shadow:var(--schatten-hoch)}
.w-zahl{font:800 34px/1 var(--f-display);letter-spacing:-.03em}
.w-zahl small{font:800 20px var(--f-display);color:var(--leise)}
.w-text{color:var(--leise);font-size:14px;font-weight:600}
.widget .balken{margin-top:6px}
.widget.achtung .w-zahl{color:var(--orange)}
.profil-hinweis{display:flex;align-items:center;gap:14px;background:var(--karte);box-shadow:var(--schatten);border-radius:16px;padding:14px 18px;margin:0 0 18px;color:var(--ink)!important;text-decoration:none!important;font-size:15px}
.profil-hinweis b{color:var(--violett)}
.paket-hinweis{background:linear-gradient(90deg,rgba(75,59,255,.10),rgba(155,92,255,.08))}
.kunden-raster{display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:14px}
.kunden-karte{position:relative;display:flex;align-items:center;gap:14px;background:var(--karte);border-radius:20px;box-shadow:var(--schatten);padding:16px;color:var(--ink);text-decoration:none!important;transition:transform .2s var(--ease),box-shadow .2s;min-width:0;overflow:hidden}
.kunden-karte::after{content:"";position:absolute;inset:auto 0 0 0;height:3px;background:var(--k)}
.kunden-karte:hover{transform:translateY(-3px);box-shadow:var(--schatten-hoch)}
.kunden-karte.inaktiv{opacity:.55}
.kk-text{display:grid;min-width:0}
.kk-text b{font-size:17px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.kk-text small{font-size:13px}
.kunden-karte .marke{margin-left:auto}

/* Kachel (Logo oder Initialen) */
.kuerzel{flex:none;display:grid;place-items:center;width:48px;height:48px;border-radius:13px;background:var(--k);color:#fff;font:800 17px var(--f-display);letter-spacing:-.02em;overflow:hidden}
.kuerzel img{object-fit:contain;display:block}
.kuerzel.logo-kachel.hell{box-shadow:inset 0 0 0 1px var(--linie)}
.kuerzel.mini{width:26px;height:26px;border-radius:8px;font-size:11px}
.kuerzel.gross{width:76px;height:76px;font-size:28px;border-radius:20px;box-shadow:var(--schatten)}
.kuerzel.riesig{width:132px;height:132px;font-size:44px;border-radius:30px;box-shadow:var(--schatten-hoch)}

/* Posting-Listen */
h3.tag{font:600 12px var(--f-body);color:var(--leise);text-transform:uppercase;letter-spacing:.07em;margin:20px 0 6px;padding-left:4px}
h3.tag.heute{color:var(--violett)}
.pliste{display:grid;gap:2px}
.pzeile{display:flex;align-items:center;gap:14px;padding:8px;border-radius:14px;color:var(--ink);text-decoration:none!important;transition:background .15s;min-width:0}
.pzeile:hover{background:var(--feld)}
.pzeile.erledigt{opacity:.55}
.thumb{flex:none;width:54px;height:54px;border-radius:12px;overflow:hidden;background:var(--feld);display:block;box-shadow:inset 0 0 0 .5px rgba(0,0,0,.06)}
.thumb img,.thumb video{width:100%;height:100%;object-fit:cover;display:block}
.leer-thumb{background:linear-gradient(135deg,#EDEDF2,#F7F7FA)}
.pz-text{display:grid;min-width:0;flex:1}
.pz-text b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:16px}
.pz-text small{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:13px}
.pz-rechts{display:flex;align-items:center;gap:12px;flex:none}
.zeit{font:600 15px var(--f-body);font-variant-numeric:tabular-nums}
.zeit.faellig{color:var(--rot)}
.erledigt-block{margin-top:16px}
.erledigt-block summary{cursor:pointer;color:var(--leise);font-weight:600;list-style:none}

/* ---------- Kunden-Dashboard ---------- */


.kanal-reihe{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.kanal{display:inline-flex;align-items:center;gap:7px;padding:5px 12px 5px 5px;border-radius:999px;background:var(--karte);box-shadow:var(--schatten);color:var(--ink);font-size:14px;font-weight:600;text-decoration:none!important;transition:transform .15s var(--ease)}
.kanal:hover{transform:translateY(-1px)}
.kopf-aktionen{display:flex;gap:8px;flex-wrap:wrap}
.kopf-aktionen form{margin:0}






.fortschritt{display:grid;grid-template-columns:110px 1fr auto;gap:10px;align-items:center;margin-top:10px;font-size:14px}









.eckdaten{display:grid;grid-template-columns:auto 1fr;gap:8px 16px;margin:0;font-size:15px}
.eckdaten dt{color:var(--leise)}
.eckdaten dd{margin:0;overflow-wrap:anywhere}
.dosdonts p{margin:14px 0 0;font-size:14px;color:var(--ink-2)}
.dosdonts b{display:block;font-size:11px;text-transform:uppercase;letter-spacing:.07em;margin-bottom:2px}
.notiz{margin:12px 0 0;color:var(--ink-2)}
.kundenfarbe .balken>span{background:var(--k)}
.kundenfarbe .knopf.klein:not(.zweit){background:var(--k);color:var(--k-text);box-shadow:0 6px 16px color-mix(in srgb,var(--k) 30%,transparent)}

/* ---------- Einstellungsseite (Kundenprofil) ---------- */
.seitenkopf{margin-bottom:8px}
.sk-zeile{display:flex;justify-content:space-between;align-items:center;gap:20px}
.sk-zeile p{margin:8px 0 0;max-width:560px}
.ring{position:relative;flex:none;width:76px;height:76px;border-radius:50%;background:conic-gradient(var(--violett) calc(var(--p) * 1%),rgba(0,0,0,.07) 0);display:grid;place-items:center}
.ring::before{content:"";position:absolute;inset:7px;border-radius:50%;background:var(--bg)}
.ring span{position:relative;font:800 18px var(--f-display)}
.ring .info{position:absolute;right:-6px;top:-4px;background:var(--bg);margin:0}
.einstellungen{max-width:860px}
.abschnitt-leiste{position:sticky;top:0;z-index:12;margin:6px -24px 0;padding:12px 24px 14px;background:linear-gradient(var(--bg) 78%,rgba(245,245,247,0))}
.abschnitt-nav{display:flex;gap:4px;overflow-x:auto;padding:5px;margin:0;border-radius:999px;background:#fff;backdrop-filter:saturate(180%) blur(20px);-webkit-backdrop-filter:saturate(180%) blur(20px);box-shadow:var(--schatten);width:max-content;max-width:100%;scrollbar-width:none}
.abschnitt-nav::-webkit-scrollbar{display:none}
.abschnitt-nav a{padding:7px 14px;border-radius:999px;color:var(--ink-2);font-weight:600;font-size:14px;white-space:nowrap;text-decoration:none!important;transition:background .15s,color .15s}
.abschnitt-nav a:hover{background:var(--feld)}
.abschnitt-nav a.aktiv{background:var(--k);color:var(--k-text)}
.gruppe{margin-top:30px;scroll-margin-top:90px;animation:rein .5s var(--ease) both}
.g-kopf{display:flex;align-items:center;gap:10px;margin:0 0 10px 6px;flex-wrap:wrap}
.g-kopf h2{font-size:20px}
.g-kopf small{flex-basis:100%;margin-left:42px;margin-top:-6px;font-size:13px}
.g-icon{display:grid;place-items:center;width:32px;height:32px;border-radius:9px;background:var(--g);color:#fff;box-shadow:0 2px 6px color-mix(in srgb,var(--g) 40%,transparent)}
.g-icon .icon{width:18px;height:18px}
.g-karte{background:var(--karte);border-radius:var(--r-gross);box-shadow:var(--schatten);overflow:hidden}
.zeile{display:grid;grid-template-columns:200px minmax(0,1fr);gap:16px;align-items:center;padding:12px 18px;min-height:58px;position:relative}
.zeile+.zeile::before,.logo-feld+.zeile::before,.wochenplan+.zeile::before,.zeile+.wochenplan::before{content:"";position:absolute;top:0;left:18px;right:0;height:1px;background:var(--linie-2)}
.z-label{display:flex;align-items:center;flex-wrap:wrap;gap:0 8px;font-weight:600;font-size:15px;color:var(--ink)}
.z-label .info{margin-left:0}
.z-label small{flex-basis:100%;font-size:12px}
.z-feld{min-width:0}
.zeile.versteckt{display:none}
.zeile.neu-da{animation:rein .4s var(--ease) both}
.formular{display:grid;gap:14px}
.einstellungen.formular{display:block}
.formular label{display:grid;gap:6px;align-content:start;font-weight:600;font-size:14px}
.formular input:not([type=radio]):not([type=color]):not([type=checkbox]):not([type=range]):not([type=file]),.formular textarea,.formular select{width:100%;font:16px var(--f-body);padding:11px 14px;border:0;border-radius:12px;background:var(--feld);color:var(--ink);transition:background .15s,box-shadow .15s;appearance:none;-webkit-appearance:none}
.formular input:hover,.formular textarea:hover,.formular select:hover{background:var(--feld-hover)}
.formular input:focus,.formular textarea:focus,.formular select:focus{outline:none;background:#fff;box-shadow:0 0 0 4px color-mix(in srgb,var(--k) 22%,transparent),0 0 0 1.5px var(--k)}
.formular textarea{resize:vertical;line-height:1.45}
.formular input::placeholder,.formular textarea::placeholder{color:#AEAEB2}
.formular fieldset{border:0;border-radius:16px;background:var(--feld);padding:16px;display:grid;gap:14px;margin:0}
.formular legend{font:800 16px var(--f-display);padding:0;margin-bottom:8px;float:left;width:100%}
.formular details summary{cursor:pointer;color:var(--leise);font-size:14px}
.formular details[open]{display:grid;gap:12px}
.formular .knopf{justify-self:start}

/* Segment-Steuerung wie iOS */
.segment{display:inline-flex;flex-wrap:wrap;gap:3px;padding:3px;border-radius:12px;background:var(--feld)}
.segment.wrap{display:flex;background:none;padding:0;gap:6px}
.segment label{display:block;font-weight:600;cursor:pointer;position:relative}
.segment input{position:absolute;opacity:0;pointer-events:none}
.segment span{display:block;padding:7px 14px;border-radius:9px;font-size:14px;color:var(--ink-2);user-select:none;transition:all .2s var(--ease)}
.segment label:hover span{color:var(--ink)}
.segment input:checked+span{background:#fff;color:var(--ink);box-shadow:0 1px 2px rgba(0,0,0,.08),0 3px 8px rgba(0,0,0,.06)}
.segment.wrap span{background:var(--feld);border-radius:999px;padding:8px 15px}
.kundenfarbe .segment input:checked+span{background:var(--k);color:var(--k-text);box-shadow:0 4px 12px color-mix(in srgb,var(--k) 30%,transparent)}
.segment input:focus-visible+span{outline:3px solid color-mix(in srgb,var(--k) 40%,transparent)}
.chips{display:flex;flex-wrap:wrap;gap:6px}
.chip-knopf{display:inline-flex;align-items:center;gap:6px;border:0;background:var(--feld);border-radius:999px;padding:7px 13px;font:600 14px var(--f-body);color:var(--ink-2);cursor:pointer;transition:all .15s}
.chip-knopf:hover{background:var(--feld-hover);color:var(--ink);transform:translateY(-1px)}
.chip-knopf.mit-icon{padding-left:5px}
.haken{display:flex!important;flex-direction:row;align-items:center;gap:8px;font-weight:400!important;font-size:14px!important;color:var(--leise)}
.haken input{width:18px;height:18px;accent-color:var(--rot);margin:0}

/* Kanal-Symbole */
.k-icon{flex:none;display:inline-grid;place-items:center;width:28px;height:28px;border-radius:8px;font:800 12px/1 var(--f-display);letter-spacing:-.02em;box-shadow:inset 0 0 0 .5px rgba(0,0,0,.08)}
.k-icon.klein{width:22px;height:22px;border-radius:7px;font-size:10px}
.kanal-zeile .z-label{gap:10px}

/* Logo-Feld */
.logo-feld{display:grid;grid-template-columns:auto 1fr;gap:28px;align-items:center;padding:22px 18px;position:relative}
.logo-vorschau{display:grid;place-items:center;padding:14px;border-radius:34px;background:repeating-conic-gradient(#F2F2F7 0 25%,#fff 0 50%) 0 0/14px 14px}
.logo-steuer{display:grid;gap:12px;justify-items:start}
.datei-knopf{position:relative;display:inline-flex!important;align-items:center;background:var(--feld);border-radius:999px;padding:9px 16px;font-weight:600;cursor:pointer;transition:background .15s}
.datei-knopf:hover{background:var(--feld-hover)}
.datei-knopf input{position:absolute;inset:0;opacity:0;cursor:pointer}
.logo-status{font-size:13px;min-height:18px}
.logo-status.ok{color:#1E7B37}.logo-status.fehler-text{color:var(--rot)}
.regler{display:flex!important;align-items:center;gap:12px;width:100%;max-width:340px;color:var(--leise)}
.regler input{flex:1;accent-color:var(--k)}
input[type=range]{height:4px}

/* Farbfelder */
.farbfeld{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.swatch{width:32px;height:32px;border-radius:50%;border:0;background:var(--f);cursor:pointer;box-shadow:inset 0 0 0 1px rgba(0,0,0,.08);transition:transform .15s var(--ease)}
.swatch:hover{transform:scale(1.12)}
.swatch.an{box-shadow:0 0 0 2px #fff,0 0 0 4px var(--f)}
input[type=color]{width:36px;height:36px;border:0;border-radius:50%;padding:0;background:conic-gradient(red,yellow,lime,aqua,blue,magenta,red);cursor:pointer;overflow:hidden}
input[type=color]::-webkit-color-swatch-wrapper{padding:3px}
input[type=color]::-webkit-color-swatch{border:0;border-radius:50%}
input[type=color]::-moz-color-swatch{border:0;border-radius:50%}
.formular .farbfeld input.hex{width:118px;font-family:ui-monospace,"SF Mono",Menlo,monospace;text-transform:uppercase;letter-spacing:.04em}
.formular input.hex.falsch{box-shadow:0 0 0 1.5px var(--rot)!important}
.markenfarben{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.mf{display:inline-flex;align-items:center;gap:2px;background:var(--feld);border-radius:999px;padding:4px 4px 4px 5px}
.mf input[type=color]{width:28px;height:28px;background:none}
.formular .mf input.hex{width:86px;padding:6px 6px!important;background:transparent!important;font-family:ui-monospace,"SF Mono",Menlo,monospace;font-size:13px!important;text-transform:uppercase;box-shadow:none!important}
.weg-mini,.slot-weg{border:0;background:none;color:var(--leise);cursor:pointer;width:24px;height:24px;border-radius:50%;font-size:11px;display:grid;place-items:center}
.weg-mini:hover,.slot-weg:hover{background:rgba(255,59,48,.12);color:var(--rot)}

/* Wochenplaner */
.verteiler{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.stepper{display:inline-flex;align-items:center;background:var(--feld);border-radius:12px;padding:3px}
.stepper button{flex:none;width:38px;height:38px;border:0;border-radius:9px;background:#fff;font:600 20px/1 var(--f-body);cursor:pointer;color:var(--ink);box-shadow:0 1px 2px rgba(0,0,0,.08)}
.stepper button:active{transform:scale(.94)}
.formular .stepper input{width:64px;text-align:center;background:transparent!important;font:800 20px var(--f-display)!important;padding:6px!important;box-shadow:none!important;-moz-appearance:textfield}
.stepper input::-webkit-outer-spin-button,.stepper input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.wochenplan{display:grid;gap:6px;padding:6px 12px 12px;position:relative}
.tag-zeile{display:grid;grid-template-columns:58px minmax(0,1fr) 34px;gap:12px;align-items:center;padding:6px;border-radius:16px;transition:background .2s}
.tag-zeile.aktiv{background:color-mix(in srgb,var(--k) 7%,#fff)}
.tag-knopf{width:58px;height:44px;border-radius:12px;border:0;background:var(--feld);font:800 16px var(--f-display);cursor:pointer;color:var(--ink-2);transition:all .2s var(--ease)}
.tag-knopf:hover{background:var(--feld-hover)}
.tag-zeile.aktiv .tag-knopf{background:var(--k);color:var(--k-text);box-shadow:0 4px 12px color-mix(in srgb,var(--k) 35%,transparent)}
.slots{display:flex;flex-wrap:wrap;gap:6px;align-items:center;min-width:0}
.slot{display:inline-flex;align-items:center;gap:0;background:#fff;border-radius:10px;padding:2px 3px 2px 2px;box-shadow:0 0 0 1px color-mix(in srgb,var(--k) 35%,transparent),0 1px 2px rgba(0,0,0,.05);animation:plopp .3s var(--ease) both}
.formular .slot input{background:transparent!important;padding:6px 6px!important;width:auto;font-size:15px!important;font-variant-numeric:tabular-nums;box-shadow:none!important}
.slot-plus{width:32px;height:32px;border-radius:10px;border:1.5px dashed rgba(0,0,0,.15);background:transparent;cursor:pointer;font:600 17px var(--f-body);color:var(--leise);transition:all .15s}
.slot-plus:hover{border-color:var(--k);color:var(--k);border-style:solid}
.tag-zeile:not(.aktiv) .slot-plus{opacity:.45}
.tag-anzahl{font:800 15px var(--f-display);text-align:right;color:var(--k)}
.wochenplan.zuviel .tag-anzahl{color:var(--rot)}
.hinweisbox{margin:4px 18px 18px;border:1.5px dashed rgba(0,0,0,.14);border-radius:14px;padding:12px 14px;font-size:14px;color:var(--ink-2);display:grid;gap:2px}
.hinweisbox b{font-size:12px;text-transform:uppercase;letter-spacing:.06em;color:var(--leise)}

/* Speicherleiste unten */
.speicherleiste{position:sticky;bottom:16px;z-index:15;display:flex;align-items:center;gap:10px;margin-top:28px;padding:10px 10px 10px 20px;border-radius:999px;background:rgba(255,255,255,.94);backdrop-filter:saturate(180%) blur(24px);-webkit-backdrop-filter:saturate(180%) blur(24px);box-shadow:var(--schatten-hoch)}
.sl-status{margin-right:auto;font-size:14px;font-weight:600;color:var(--leise);display:flex;align-items:center;gap:8px}
.sl-status::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--gruen)}
.speicherleiste.dirty .sl-status{color:var(--ink)}
.speicherleiste.dirty .sl-status::before{background:var(--orange);animation:puls 1.4s infinite}

/* ---------- Posting ---------- */
.kunde-zeile{margin:0 0 6px;font-weight:600;color:var(--leise)}
.posting-kopf{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;margin-bottom:24px;flex-wrap:wrap}
.posting-kopf>div:first-child{flex:1;min-width:240px}
.termin-zeile{display:flex;align-items:center;gap:8px;margin:12px 0 0;flex-wrap:wrap}
.posting-raster{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:16px;align-items:start}
.posting-raster h2{display:flex;align-items:center;gap:8px;margin-bottom:12px}
h3.medien-gruppe{font:600 12px var(--f-body);color:var(--leise);text-transform:uppercase;letter-spacing:.07em;margin:18px 0 8px}
.medien-raster{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px}
.medium{margin:0;background:var(--feld);border-radius:16px;overflow:hidden;transition:transform .2s var(--ease),box-shadow .2s}
.medium:hover{transform:translateY(-2px);box-shadow:var(--schatten)}
.medium img,.medium video{display:block;width:100%;aspect-ratio:4/5;object-fit:cover;background:#111}
.medium figcaption{display:flex;align-items:center;gap:4px;padding:6px;font-size:13px;flex-wrap:wrap}
.medium .nr{font-weight:600;color:var(--leise);min-width:18px}
.medium .mini{font-weight:600;font-size:13px;margin-right:auto}
.mini-aktionen{display:flex;gap:2px;margin:0}
.mini-aktionen button{border:0;background:#fff;border-radius:8px;padding:4px 8px;font:600 12px var(--f-body);cursor:pointer;color:var(--ink)}
.mini-aktionen button:disabled{opacity:.3;cursor:default}
.mini-aktionen button.weg:hover{background:rgba(255,59,48,.12);color:var(--rot)}
.upload{display:grid;gap:10px;margin-top:16px}
.ablage{position:relative;display:block;border:1.5px dashed rgba(0,0,0,.15);border-radius:16px;padding:24px;text-align:center;cursor:pointer;transition:all .2s;font-weight:400}
.ablage:hover,.ablage.drueber{border-color:var(--violett);background:rgba(75,59,255,.04)}
.ablage input{position:absolute;inset:0;opacity:0;cursor:pointer;width:100%}
.upload .knopf{justify-self:start}
.zum-posten{position:sticky;top:20px}
.kopierfeld{background:var(--feld);border-radius:16px;margin-bottom:12px;overflow:hidden}
.kf-kopf{display:flex;align-items:center;gap:6px;padding:10px 10px 0 14px}
.kf-kopf button.knopf{margin-left:auto}
.kopierfeld pre{margin:0;padding:10px 14px 14px;white-space:pre-wrap;word-break:break-word;font:15px/1.55 var(--f-body);max-height:380px;overflow:auto;color:var(--ink-2)}
.hinweise{border:1.5px dashed rgba(0,0,0,.14);border-radius:16px;padding:12px 14px;font-size:14px;color:var(--ink-2)}
.hinweise b{font-size:12px;text-transform:uppercase;letter-spacing:.06em;color:var(--leise)}
.hinweise p{margin:4px 0 0}
.knopfzeile{display:flex;gap:10px;flex-wrap:wrap}
.loeschen-form{margin-top:24px;padding-top:16px;border-top:1px solid var(--linie)}
.zwei{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.drei{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
small.zaehler.zuviel{color:var(--rot);font-weight:600}
.schritte{padding-left:20px;display:grid;gap:8px}
.paket{margin-bottom:16px}

/* ---------- Animationen ---------- */
@keyframes rein{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@keyframes auf{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@keyframes auftauchen{from{opacity:0;transform:scale(.96) translateY(8px)}to{opacity:1;transform:none}}
@keyframes plopp{from{opacity:0;transform:scale(.85)}to{opacity:1;transform:none}}
@keyframes puls{50%{opacity:.35}}
@keyframes toast{0%{opacity:0;transform:translate(-50%,-14px)}8%,85%{opacity:1;transform:translate(-50%,0)}100%{opacity:0;transform:translate(-50%,-10px);visibility:hidden}}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}

/* ---------- Tablet und Handy ---------- */
@media (max-width:1100px){
  .widgets{grid-template-columns:repeat(2,1fr)}
  
}
@media (max-width:860px){
  :root{--seite:0px}
  .seitenleiste{display:none}
  .mit-menue .inhalt{margin-left:0;padding:16px 16px calc(96px + env(safe-area-inset-bottom))}
  .mobil-kopf{display:flex;align-items:center;justify-content:space-between;position:sticky;top:0;z-index:20;padding:12px 16px;background:rgba(245,245,247,.82);backdrop-filter:saturate(180%) blur(20px);-webkit-backdrop-filter:saturate(180%) blur(20px);border-bottom:1px solid var(--linie-2)}
  .mobil-kopf img{height:30px;display:block}
  .tabbar{display:grid;grid-template-columns:repeat(4,1fr);position:fixed;left:0;right:0;bottom:0;z-index:30;padding:6px 8px calc(6px + env(safe-area-inset-bottom));background:rgba(250,250,252,.88);backdrop-filter:saturate(180%) blur(24px);-webkit-backdrop-filter:saturate(180%) blur(24px);border-top:1px solid var(--linie)}
  .tabbar a{display:grid;justify-items:center;gap:2px;padding:6px 0;color:var(--leise);font-size:11px;font-weight:600;text-decoration:none!important}
  .tabbar a.aktiv{color:var(--violett)}
  .tabbar .icon{width:24px;height:24px}
  .toast,.mit-menue .toast{left:50%;top:auto;bottom:calc(84px + env(safe-area-inset-bottom))}
  .zeile{grid-template-columns:1fr;gap:8px;padding:12px 14px}
  .logo-feld{grid-template-columns:1fr;justify-items:center;text-align:center}
  .logo-steuer{justify-items:center}
  .kuerzel.riesig{width:112px;height:112px}
  .posting-raster,.zwei,.drei{grid-template-columns:1fr}
  .zum-posten{position:static}
  .pz-rechts .chip{display:none}
  .tag-zeile{grid-template-columns:48px minmax(0,1fr) 28px;gap:8px}
  .tag-knopf{width:48px}
  .wochenplan{padding:6px 8px 10px}
  .abschnitt-leiste{top:54px;margin:0 -16px;padding:10px 16px 12px}
  .gruppe{scroll-margin-top:130px}
  .speicherleiste{bottom:calc(76px + env(safe-area-inset-bottom));padding-left:16px}
  .speicherleiste .knopf.zweit{display:none}
  .titelzeile .knopf{width:100%}
  .sk-zeile{align-items:flex-start}
  .ring{width:60px;height:60px}
  .ring span{font-size:15px}
  .hinweisbox{margin:4px 12px 14px}
}
@media (max-width:420px){.widgets{gap:10px}.w-zahl{font-size:28px}.widget{padding:14px}}
/* Farb- und Schriftrollen, Styleguide-Dateien */
.stapel{display:grid;gap:10px;width:100%}
.formular .mf select.rolle,.formular .sf select.rolle{width:auto;padding:6px 26px 6px 10px;font-size:13px;font-weight:600;border-radius:999px;background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%2386868B' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat right 10px center;color:var(--ink-2)}
.mf{padding-right:4px}
.mf select.rolle{margin-left:2px}
.schriftliste{display:grid;gap:8px}
.schriftliste .chip-knopf,.markenfarben .chip-knopf{justify-self:start}



.sg-ablage{display:grid;place-items:center;text-align:center;border:1.5px dashed rgba(0,0,0,.16);border-radius:16px;padding:18px 14px;cursor:pointer;transition:all .2s var(--ease);position:relative}
.sg-ablage:hover,.sg-ablage.drueber{border-color:var(--k);background:color-mix(in srgb,var(--k) 6%,transparent)}
.sg-ablage.laedt{opacity:.7;pointer-events:none}
.sg-ablage input{position:absolute;inset:0;opacity:0;cursor:pointer}
.sg-ablage span{font-size:15px;color:var(--ink-2)}
.sg-ablage small{display:block;font-size:12.5px;margin-top:2px}



.sg-datei{display:flex;align-items:center;gap:12px;background:var(--feld);border-radius:14px;padding:8px 8px 8px 8px;animation:auf .35s var(--ease) both}
.sg-vorschau{width:46px;height:46px;flex:none;border-radius:10px;overflow:hidden;background:#fff;display:grid;place-items:center;box-shadow:inset 0 0 0 1px rgba(0,0,0,.06)}
.sg-vorschau img{width:100%;height:100%;object-fit:cover}
.sg-vorschau.pdf{background:#FF3B30}
.sg-vorschau.pdf span{color:#fff;font:800 12px var(--f-body);letter-spacing:.04em}
.sg-text{flex:1;min-width:0;display:grid}
.sg-text a{color:var(--ink);font-weight:600;font-size:14.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sg-text small{font-size:12px}
.sg-knopf{border:0;background:#fff;color:var(--ink-2);cursor:pointer;width:32px;height:32px;border-radius:50%;font-size:13px;display:grid;place-items:center;flex:none}
.sg-knopf:hover{color:var(--k)}
.sg-knopf.sg-weg:hover{background:rgba(255,59,48,.12);color:var(--rot)}
.toast.fehler{background:rgba(215,0,21,.94)}
p.klein{font-size:14px;margin:0}
/* Ring als Knopf + Profil-Check */
button.ring{border:0;cursor:pointer;padding:0;font:inherit;color:var(--ink);transition:transform .2s var(--ease)}
button.ring:hover{transform:scale(1.05)}
.kundenfarbe .ring,.einstellungen .ring{background:conic-gradient(var(--k) calc(var(--p) * 1%),rgba(0,0,0,.07) 0)}
.ring-badge{position:absolute;top:-4px;right:-6px;min-width:24px;height:24px;padding:0 6px;border-radius:999px;background:var(--orange);color:#fff;font:700 12px/24px var(--f-body);font-style:normal;box-shadow:0 0 0 3px var(--bg)}
.ring.klein{width:58px;height:58px}.ring.klein::before{inset:6px;background:#fff}.ring.klein span{font-size:13.5px}
.check-dialog{width:min(560px,calc(100vw - 24px));max-height:min(86vh,820px)}
.check-dialog .dialog-inhalt{overflow:auto;max-height:inherit}
.check-kopf{display:flex;gap:16px;align-items:center;margin-bottom:16px;padding-right:36px}
.check-kopf h2{margin:0 0 2px;font-size:22px}
.check-kopf p{font-size:14px}
.checkliste{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.checkliste li{display:flex;align-items:flex-start;gap:12px;padding:12px 12px;border-radius:14px;background:var(--feld)}
.checkliste li.ck-ok{background:none;padding:6px 12px}
.ck-punkt{flex:none;width:22px;height:22px;border-radius:50%;margin-top:1px;display:grid;place-items:center;font-size:12px;font-weight:800;color:#fff}
.ck-fehlt .ck-punkt{background:var(--orange)}.ck-fehlt .ck-punkt::after{content:"!"}
.ck-besser .ck-punkt{background:#0A84FF}.ck-besser .ck-punkt::after{content:"↑"}
.ck-ok .ck-punkt{background:var(--gruen)}.ck-ok .ck-punkt::after{content:"✓"}
.ck-text{flex:1;display:grid;gap:2px;font-size:15px}
.ck-ok .ck-text b{font-weight:500;color:var(--ink-2)}
.ck-text small{font-size:13px;color:var(--ink-2);line-height:1.4}
.ck-los{flex:none;align-self:center;font:600 13px var(--f-body);padding:7px 12px;border-radius:999px;background:#fff;color:var(--ink);box-shadow:0 1px 2px rgba(0,0,0,.08);text-decoration:none!important}
.ck-los:hover{background:var(--k);color:var(--k-text)}
.checkliste.kompakt li{background:none;padding:8px 0}
.checkliste.kompakt li+li{border-top:1px solid var(--linie-2);border-radius:0}
.ck-zahl{font:800 20px var(--f-display);color:var(--k)}
.knopf.voll{width:100%;justify-content:center;margin-top:10px}

/* Kunden-Dashboard */
.kunde-hero{position:relative;display:flex;align-items:center;gap:24px;padding:26px 28px;border-radius:28px;margin:4px 0 16px;background:radial-gradient(700px 260px at 0% 0%,color-mix(in srgb,var(--k) 16%,transparent),transparent 70%),radial-gradient(500px 240px at 100% 100%,color-mix(in srgb,var(--k) 9%,transparent),transparent 70%),var(--karte);box-shadow:var(--schatten);overflow:hidden;animation:rein .45s var(--ease) both}
.kunde-hero .kuerzel.gross{width:96px;height:96px;border-radius:24px;box-shadow:0 8px 24px color-mix(in srgb,var(--k) 25%,transparent),0 0 0 1px rgba(0,0,0,.04)}
.hero-text{flex:1;min-width:0}
.hero-text h1{margin:0}
.hero-unter{margin:4px 0 0;color:var(--ink-2);font-size:16px}
.hero-rechts{display:flex;flex-direction:column;align-items:flex-end;gap:14px}
.hero-ring{width:70px;height:70px}.hero-ring::before{background:var(--karte)}
.kunde-hero .knopf:not(.zweit){background:var(--k);color:var(--k-text);box-shadow:0 6px 18px color-mix(in srgb,var(--k) 35%,transparent)}
.kennzahlen{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin-bottom:16px}
.kz{background:var(--karte);border-radius:20px;box-shadow:var(--schatten);padding:16px 18px;display:grid;gap:4px;align-content:start;animation:rein .5s var(--ease) both}
.kz:nth-child(2){animation-delay:.04s}.kz:nth-child(3){animation-delay:.08s}.kz:nth-child(4){animation-delay:.12s}
.kz-label{font-size:13px;font-weight:600;color:var(--leise)}
.kz-zahl{font:800 32px/1.05 var(--f-display);letter-spacing:-.03em}
.kz-zahl small{font-size:18px;color:var(--leise)}
.kz-zahl.kz-text{font-size:19px;line-height:1.2;letter-spacing:-.01em;padding:6px 0 2px}
.kz-info{font-size:13px;color:var(--leise);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.kz-info.fehlt{color:var(--orange)}.kz-info.ok{color:var(--gruen)}
.kz.achtung .kz-zahl{color:var(--orange)}
.kz .balken{margin:6px 0 2px}
.dash-zwei{display:grid;grid-template-columns:minmax(0,1.75fr) minmax(300px,1fr);gap:16px;align-items:start}
.dash-haupt,.dash-seite{display:grid;gap:16px;min-width:0}
.dash-haupt>.karte,.dash-seite>.karte{animation:rein .5s var(--ease) both}
.leer-schoen{display:grid;justify-items:center;text-align:center;gap:6px;padding:30px 10px 16px;color:var(--ink-2)}
.leer-schoen b{font:800 19px var(--f-display);color:var(--ink)}
.leer-schoen .knopf{margin-top:10px;background:var(--k);color:var(--k-text)}
.ls-icon{width:56px;height:56px;border-radius:18px;display:grid;place-items:center;background:color-mix(in srgb,var(--k) 12%,transparent);color:var(--k);margin-bottom:6px}
.ls-icon svg{width:26px;height:26px}
.woche-band{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:6px;margin-top:10px}
.wb-tag{display:grid;justify-items:center;align-content:start;gap:3px;padding:12px 4px;border-radius:16px;background:var(--feld);color:var(--leise);min-height:96px}
.wb-tag b{font-size:13px}
.wb-zahl{font:800 20px var(--f-display)}
.wb-tag small{font-size:11.5px;color:inherit;opacity:.9;font-variant-numeric:tabular-nums}
.wb-tag.an{background:var(--k);color:var(--k-text);box-shadow:0 6px 16px color-mix(in srgb,var(--k) 25%,transparent)}
.dosdonts-zwei{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.dd{border-radius:20px;padding:18px 20px;box-shadow:var(--schatten);background:var(--karte)}
.dd b{display:inline-block;font-size:12px;text-transform:uppercase;letter-spacing:.07em;padding:4px 10px;border-radius:999px}
.dd p{margin:10px 0 0;font-size:14.5px;color:var(--ink-2);line-height:1.6}
.dd-ja b{background:rgba(52,199,89,.14);color:#1E8E3E}
.dd-nie b{background:rgba(255,59,48,.12);color:#D70015}
.person{display:flex;align-items:center;gap:12px;margin:10px 0 12px}
.person b{display:block;font-size:16px}.person small{display:block;font-size:13.5px}
.person .avatar{width:46px;height:46px;flex:none;border-radius:50%;display:grid;place-items:center;font:800 16px var(--f-display);background:color-mix(in srgb,var(--k) 15%,#fff);color:var(--k)}
.kontakt-knoepfe{display:grid;grid-template-columns:repeat(auto-fit,minmax(80px,1fr));gap:8px;margin-bottom:12px}
.kontakt-knoepfe a{display:grid;justify-items:center;gap:4px;padding:10px 6px;border-radius:14px;background:var(--feld);color:var(--k);font-size:12.5px;font-weight:600;text-decoration:none!important;transition:background .15s,transform .15s}
.kontakt-knoepfe a:hover{background:color-mix(in srgb,var(--k) 12%,#fff);transform:translateY(-1px)}
.kontakt-knoepfe a span{font-size:19px;line-height:1}
.kontakt-knoepfe a.wa{color:#1DA851}
.eckdaten.klein{font-size:14px}
.farbpunkte{display:grid;grid-template-columns:repeat(auto-fill,minmax(64px,1fr));gap:10px 6px;margin:12px 0 16px}
.fp{display:grid;justify-items:center;gap:2px;text-align:center}
.fp i{width:44px;height:44px;border-radius:50%;background:var(--f);box-shadow:inset 0 0 0 1px rgba(0,0,0,.08),0 3px 8px rgba(0,0,0,.08);margin-bottom:4px}
.fp b{font-size:11.5px}.fp small{font:500 10.5px ui-monospace,Menlo,monospace}
.schriftproben{display:grid;gap:8px;margin-bottom:14px}
.sp{display:flex;align-items:center;gap:12px;padding:8px 10px;border-radius:14px;background:var(--feld)}
.sp-aa{width:42px;height:42px;flex:none;border-radius:11px;background:#fff;display:grid;place-items:center;font:800 19px var(--f-display);color:var(--k)}
.sp b{display:block;font-size:14px;line-height:1.3}.sp small{font-size:12px}
.ton-chips,.tag-chips{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:14px}
.chip.k{background:var(--k);color:var(--k-text)}
.tag-chips{margin:14px 0 0}
.tag-chips span{font-size:13px;font-weight:600;color:var(--k);background:color-mix(in srgb,var(--k) 9%,transparent);padding:5px 10px;border-radius:999px}
.wa-feld .wa-nr{display:none}
.wa-feld:has(input[value=andere]:checked) .wa-nr{display:block}
@media (max-width:1100px){.dash-zwei{grid-template-columns:1fr}.kennzahlen{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:860px){
  .kunde-hero{flex-wrap:wrap;padding:20px;gap:16px;border-radius:24px}
  .kunde-hero .kuerzel.gross{width:72px;height:72px;border-radius:20px}
  .hero-text{flex-basis:calc(100% - 180px)}
  .hero-rechts{flex-direction:row-reverse;align-items:center;justify-content:space-between;width:100%}
  .hero-ring{width:58px;height:58px}
  .kz{padding:14px}.kz-zahl{font-size:28px}
  .woche-band{gap:4px}.wb-tag{padding:10px 2px;min-height:84px;border-radius:12px}.wb-zahl{font-size:17px}.wb-tag small{font-size:10px}
  .dosdonts-zwei{grid-template-columns:1fr}
}
.segment.gross{justify-self:start;padding:4px;border-radius:14px;background:var(--feld);box-shadow:inset 0 0 0 1px rgba(0,0,0,.04)}
.segment.gross span{padding:10px 20px;font-size:15px;border-radius:11px}
.feld-titel{font-size:13.5px;font-weight:600;color:var(--ink-2);margin:4px 0 -4px}
.formular textarea::placeholder{color:#AEAEB2;line-height:1.5}

/* Schriften als Karten */
.schriftliste{display:grid;gap:10px}
.sf-karte{display:grid;grid-template-columns:84px minmax(0,1fr);gap:16px;align-items:start;background:var(--feld);border-radius:18px;padding:12px;transition:background .2s var(--ease),box-shadow .2s var(--ease)}
.sf-karte.neu-da{animation:auftauchen .35s var(--ease)}
.sf-karte:has(.sf-haupt input:checked){background:#fff;box-shadow:inset 0 0 0 2px color-mix(in srgb,var(--k) 55%,transparent),var(--schatten)}
.sf-probe{width:84px;height:84px;border-radius:15px;background:#fff;display:grid;place-items:center;font-size:40px;line-height:1;color:var(--ink);box-shadow:0 1px 2px rgba(0,0,0,.06);overflow:hidden;transition:background .2s,color .2s}
.sf-karte:has(.sf-haupt input:checked) .sf-probe{background:var(--k);color:var(--k-text);box-shadow:0 6px 16px color-mix(in srgb,var(--k) 30%,transparent)}
.sf-mitte{display:grid;gap:8px;min-width:0}
.sf-kopf{display:flex;align-items:center;gap:6px}
.formular .sf-kopf input.sf-name{flex:1;min-width:0;font-weight:700;background:#fff!important;padding:9px 12px}
.formular .sf-karte:has(.sf-haupt input:checked) .sf-kopf input.sf-name{background:var(--feld)!important}
.formular .sf-kopf input.sf-name:focus{background:#fff!important}
.formular .sf-haupt{position:relative;flex:none;display:block}
.sf-haupt input{position:absolute;opacity:0;pointer-events:none}
.sf-haupt span{display:inline-flex;align-items:center;gap:5px;padding:7px 12px;border-radius:999px;font:600 13px var(--f-body);color:var(--leise);cursor:pointer;white-space:nowrap;transition:all .2s var(--ease)}
.sf-haupt span em{font-style:normal}
.sf-haupt:hover span{color:var(--ink);background:rgba(0,0,0,.04)}
.sf-haupt input:checked+span{background:var(--k);color:var(--k-text)}
.sf-haupt input:focus-visible+span{outline:3px solid color-mix(in srgb,var(--k) 40%,transparent)}
.sf-satz{margin:0;font-size:18px;line-height:1.3;color:var(--ink-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.segment.mini{padding:2px;border-radius:10px;justify-self:start}
.segment.mini span{padding:5px 10px;font-size:12.5px;border-radius:8px}
.sf-karte:has(.sf-haupt input:checked) .segment.mini{background:var(--feld)}
.sf-datei{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.sf-datei [hidden]{display:none!important}
.formular .sf-upload{position:relative;display:inline-flex;align-items:center;gap:7px;padding:6px 12px 6px 10px;border-radius:999px;border:1.5px dashed rgba(0,0,0,.16);color:var(--ink-2);font:600 13px var(--f-body);cursor:pointer;transition:all .2s var(--ease)}
.sf-upload:hover,.sf-upload.drueber{border-color:var(--k);color:var(--ink);background:color-mix(in srgb,var(--k) 6%,transparent)}
.sf-upload input{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
.sf-upload .icon{width:16px;height:16px}
.sf-upload small{font-size:12px}
.sf-upload.laedt{opacity:.55;pointer-events:none}
.sf-datei-da{display:inline-flex;align-items:center;gap:6px;max-width:100%;background:color-mix(in srgb,var(--gruen) 12%,#fff);color:#1E7B34;border-radius:999px;padding:4px 4px 4px 10px;font-size:13px;font-weight:600}
.sf-datei-da .icon{width:15px;height:15px;flex:none}
.sf-datei-name{color:inherit;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.sf-datei-weg{border:0;background:none;color:inherit;opacity:.6;cursor:pointer;width:22px;height:22px;border-radius:50%;font-size:10px}
.sf-datei-weg:hover{opacity:1;background:rgba(0,0,0,.06)}

.sp-dl{margin-left:auto;width:30px;height:30px;border-radius:50%;display:grid;place-items:center;color:var(--leise)}
.sp-dl:hover{background:#fff;color:var(--ink);text-decoration:none}
.sp-dl .icon{width:16px;height:16px}

/* KI-Kennzeichnung mit Vorschau */
.ki-feld{display:grid;gap:18px}
.ki-feld .segment.gross{justify-self:start}
.ki-studio{display:grid;grid-template-columns:250px minmax(0,1fr);gap:24px;align-items:start}
.ki-feld:not(:has(input[name=m_ki]:checked)) .ki-studio,.ki-feld:has(input[name=m_ki][value=nie]:checked) .ki-studio{display:none}
.ki-nie{display:none;margin:0;font-size:14px}
.ki-feld:has(input[name=m_ki][value=nie]:checked) .ki-nie{display:block}
.ki-feld:has(input[name=m_ki][value=text]:checked) :is(.ki-nur-bild,.ki-label-bild){display:none}
.ki-feld:has(input[name=m_ki][value=bild]:checked) :is(.ki-nur-text,.ki-cap){display:none}
.ki-post{margin:0;background:#fff;border-radius:20px;overflow:hidden;box-shadow:var(--schatten-hoch);position:sticky;top:120px}
.ki-post-kopf{display:flex;align-items:center;gap:9px;padding:10px 12px;font-size:13px}
.ki-post-kopf i{width:26px;height:26px;border-radius:50%;background:var(--k);box-shadow:0 0 0 2px #fff,0 0 0 3.5px #DD2A7B;flex:none}
.ki-post-kopf b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ki-post-kopf span{margin-left:auto;color:var(--leise);letter-spacing:1px}
.ki-post-bild,.ki-opt-bild,.ki-stil-bild{background:radial-gradient(circle at 22% 18%,color-mix(in srgb,var(--k) 30%,#fff) 0,transparent 55%),radial-gradient(circle at 85% 90%,color-mix(in srgb,var(--k) 55%,#000) 0,transparent 60%),linear-gradient(160deg,color-mix(in srgb,var(--k) 80%,#fff),color-mix(in srgb,var(--k) 75%,#000))}
.ki-post-bild{aspect-ratio:4/5;position:relative;background-size:cover;background-position:center}
.ki-label-bild{position:absolute;left:5%;top:4%;width:48%;height:auto;filter:drop-shadow(0 1px 4px rgba(0,0,0,.18))}
.ki-label-bild.rund{width:17%}
.ki-post figcaption{padding:10px 12px 14px;font-size:13px;line-height:1.45;color:var(--ink)}
.ki-cap{display:block;color:var(--leise);margin-top:3px}
.ki-optionen{display:grid;gap:20px;min-width:0}
.ki-block{display:grid;gap:10px}
.ki-labels{display:grid;gap:8px}
.formular .ki-opt{position:relative;display:flex;align-items:center;gap:14px;padding:8px 14px 8px 8px;border-radius:16px;background:var(--feld);cursor:pointer;transition:all .2s var(--ease)}
.ki-opt:hover{background:var(--feld-hover)}
.ki-opt input,.ki-stil input{position:absolute;opacity:0;pointer-events:none}
.ki-opt-bild{width:128px;height:48px;flex:none;border-radius:11px;display:grid;place-items:center}
.ki-opt-bild img{width:108px;height:auto}
.ki-opt-bild img.rund{width:34px}
.ki-opt-text{min-width:0}
.ki-opt-text b{display:block;font-size:14px;letter-spacing:.01em}
.ki-opt-text small{font-size:12.5px}
.ki-opt:has(input:checked){background:#fff;box-shadow:inset 0 0 0 2px var(--k),var(--schatten)}
.ki-opt:has(input:focus-visible),.ki-stil:has(input:focus-visible) .ki-stil-bild{outline:3px solid color-mix(in srgb,var(--k) 40%,transparent)}
.ki-stile{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.formular .ki-stil{position:relative;display:grid;gap:7px;justify-items:center;align-content:start;text-align:center;cursor:pointer;font-weight:400}
.ki-stil-bild{width:100%;aspect-ratio:16/10;border-radius:13px;display:grid;place-items:center;transition:box-shadow .2s var(--ease),transform .2s var(--ease)}
.ki-stil:hover .ki-stil-bild{transform:translateY(-2px)}
.ki-stil-bild img{width:82%;height:auto}
.ki-stil-bild img.rund{width:40%}
.ki-stil:has(input:checked) .ki-stil-bild{box-shadow:0 0 0 2.5px #fff,0 0 0 4.5px var(--k)}
.ki-stil small{font-size:12px;line-height:1.25}
.ki-stil:has(input:checked) small{color:var(--ink);font-weight:600}
.ki-zip{display:inline-flex;align-items:center;gap:6px;font-size:13.5px;font-weight:600;justify-self:start}
.ki-zip .icon{width:16px;height:16px}
.ki-vorschlaege{display:flex;flex-wrap:wrap;gap:6px}
.ki-vorschlaege .chip-knopf{font-size:13px;padding:6px 11px}
.ki-vorschlaege .chip-knopf.an{background:var(--k);color:var(--k-text)}
.ki-mini{display:inline-grid;place-items:center;vertical-align:middle;margin-left:8px;background:linear-gradient(135deg,var(--k),color-mix(in srgb,var(--k) 65%,#000));border-radius:8px;padding:4px 6px}
.ki-mini img{height:15px;width:auto;display:block}
.ki-mini img.rund{height:22px}
.ki-mini-text{display:block;font-size:12.5px;margin-top:2px}
@media (max-width:860px){
  .sf-karte{grid-template-columns:56px minmax(0,1fr);gap:12px;padding:10px}
  .sf-probe{width:56px;height:56px;font-size:28px;border-radius:12px}
  .sf-haupt span em{display:none}
  .sf-satz{font-size:15px}
  .ki-studio{grid-template-columns:1fr;gap:18px}
  .ki-post{position:static;width:100%;max-width:260px;justify-self:center}
  .ki-stile{gap:7px}
  .ki-stil-bild{aspect-ratio:4/3;border-radius:11px}
  .ki-stil-bild img{width:88%}
  .ki-stil small{font-size:11px}
  .ki-feld .segment.ki-wann{display:grid;grid-template-columns:1fr 1fr;justify-self:stretch}
  .ki-feld .segment.ki-wann span{text-align:center;padding:10px 8px}
  .sf-upload small{display:none}
  .segment.mini span{padding:5px 8px}
  .ki-opt-bild{width:104px;height:42px}
  .ki-opt-bild img{width:88px}
}

/* Team, Rollen, Konto */
.sl-fuss a.sl-konto{display:flex;align-items:center;gap:10px;flex:1;min-width:0;width:auto;height:auto;margin:0;padding:4px 6px 4px 4px;border-radius:12px;color:var(--ink);text-decoration:none!important}
.sl-fuss a.sl-konto:hover,.sl-fuss a.sl-konto.aktiv{background:rgba(0,0,0,.05)}
.sl-user small{display:block;font-size:11.5px;font-weight:500;color:var(--leise)}
.sl-leer{margin:4px 12px;font-size:13px;color:var(--leise)}
.mk-konto{display:block;text-decoration:none!important}
.mk-konto .avatar{width:32px;height:32px}
.chip.r-admin{background:color-mix(in srgb,var(--violett) 12%,#fff);color:#3A2BD0}
.chip.r-mitarbeiter{background:rgba(0,122,255,.1);color:#0062CC}
.chip.r-partner{background:rgba(255,149,0,.14);color:#B25E00}
.chip.s-aktiv{background:rgba(52,199,89,.14);color:#1E7B37}
.chip.s-offen{background:rgba(255,149,0,.14);color:#B25E00}
.chip.s-gesperrt{background:rgba(0,0,0,.07);color:var(--leise)}
.avatar.tk-avatar{width:48px;height:48px;font-size:17px}
.avatar.r-admin{background:linear-gradient(135deg,var(--violett),#9B5CFF)}
.avatar.r-mitarbeiter{background:linear-gradient(135deg,#0A84FF,#5AC8FA)}
.avatar.r-partner{background:linear-gradient(135deg,#FF9500,#FFCC00)}
.team-raster{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:14px;margin-bottom:22px}
.team-karte{display:grid;grid-template-columns:48px minmax(0,1fr);gap:4px 14px;align-items:center;background:var(--karte);border-radius:20px;box-shadow:var(--schatten);padding:16px;color:var(--ink);text-decoration:none!important;transition:transform .2s var(--ease),box-shadow .2s}
.team-karte:hover{transform:translateY(-2px);box-shadow:var(--schatten-hoch)}
.team-karte.inaktiv{opacity:.6}
.team-karte .tk-avatar{grid-row:span 2}
.tk-text{min-width:0}
.tk-text b{display:block;font-size:16px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tk-text small{display:block;font-size:13px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tk-chips{display:flex;gap:6px;flex-wrap:wrap}
.tk-kunden{grid-column:1/-1;display:flex;align-items:center;gap:6px;flex-wrap:wrap;min-height:34px;margin-top:8px;padding-top:12px;border-top:1px solid var(--linie-2);font-size:13.5px}
.tk-kunden .kuerzel.mini{width:30px;height:30px;font-size:11px;border-radius:9px}
.tk-mehr{font-size:12px;font-weight:700;color:var(--leise);background:var(--feld);border-radius:9px;padding:7px 8px}
.tk-kunden .klein{margin-left:4px}
.tk-zuletzt{grid-column:1/-1;font-size:12.5px}
.rollen-info{max-width:760px}
.rollen-liste{display:grid;grid-template-columns:auto 1fr;gap:10px 14px;align-items:center;margin:14px 0}
.rollen-liste dd{margin:0;font-size:14.5px;color:var(--ink-2)}
.knopfreihe{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-top:16px}
.knopfreihe form{margin:0}
.knopf.wa{background:linear-gradient(180deg,#2BD86A,#1FAF54);box-shadow:0 6px 16px rgba(37,211,102,.3)}
.einladung-karte{margin-bottom:18px;background:linear-gradient(160deg,color-mix(in srgb,var(--gruen) 9%,#fff),#fff 60%);box-shadow:inset 0 0 0 1.5px color-mix(in srgb,var(--gruen) 35%,transparent),var(--schatten)}
.ek-icon{font-size:30px;display:block;margin-bottom:6px}
.einladung-karte p{color:var(--ink-2)}
.team-form{display:grid;gap:14px;margin-bottom:18px}
.tf-kopf{display:flex;align-items:center;gap:14px;margin-bottom:4px}
.tf-kopf h1{font-size:28px}
.tf-kopf p{margin:4px 0 0}
.tf-zwei{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.rollen-wahl{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.formular .rw{position:relative;display:grid;gap:4px;align-content:start;padding:14px 14px 14px 44px;border-radius:16px;background:var(--feld);cursor:pointer;font-weight:400;transition:all .2s var(--ease)}
.formular .rw:hover{background:var(--feld-hover)}
.rw input{position:absolute;opacity:0;pointer-events:none}
.rw b{font-size:15px}
.rw small{font-size:13px;line-height:1.35}
.rw-punkt{position:absolute;left:14px;top:15px;width:20px;height:20px;border-radius:50%;box-shadow:inset 0 0 0 2px rgba(0,0,0,.15);background:#fff;transition:all .2s var(--ease)}
.rw:has(input:checked){background:#fff;box-shadow:inset 0 0 0 2px var(--violett),var(--schatten)}
.rw:has(input:checked) .rw-punkt{box-shadow:inset 0 0 0 6px var(--violett)}
.rw:has(input:checked) .rw-punkt.r-mitarbeiter{box-shadow:inset 0 0 0 6px #0A84FF}
.rw:has(input:checked) .rw-punkt.r-partner{box-shadow:inset 0 0 0 6px #FF9500}
.rw:has(input:focus-visible){outline:3px solid color-mix(in srgb,var(--violett) 40%,transparent)}
.formular .rw.gesperrt{opacity:.45;cursor:not-allowed}
.kf-titel{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:8px}
.kunden-wahl{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:8px}
.formular .kw{position:relative;display:flex;align-items:center;gap:10px;padding:8px 36px 8px 8px;border-radius:14px;background:var(--feld);cursor:pointer;font-weight:600;font-size:14px;transition:all .2s var(--ease)}
.formular .kw:hover{background:var(--feld-hover)}
.kw input{position:absolute;opacity:0;pointer-events:none}
.kw span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.kw span small{display:block;font-size:11.5px;font-weight:500}
.kw-haken{position:absolute;right:10px;top:50%;width:20px;height:20px;margin-top:-10px;border-radius:50%;display:grid;place-items:center;font-style:normal;font-size:12px;font-weight:800;color:transparent;box-shadow:inset 0 0 0 2px rgba(0,0,0,.14);transition:all .2s var(--ease)}
.kw:has(input:checked){background:#fff;box-shadow:inset 0 0 0 2px var(--violett)}
.kw:has(input:checked) .kw-haken{background:var(--violett);color:#fff;box-shadow:none}
.kw:has(input:focus-visible){outline:3px solid color-mix(in srgb,var(--violett) 40%,transparent)}
.kw.pausiert{opacity:.65}
.admin-hinweis{display:none;margin:0;padding:12px 14px;border-radius:14px;background:color-mix(in srgb,var(--violett) 7%,#fff);color:#3A2BD0;font-size:14px;font-weight:600}
.team-form:has(input[name=rolle][value=admin]:checked) .kunden-feld{display:none}
.team-form:has(input[name=rolle][value=admin]:checked) .admin-hinweis{display:block}
.zugang-status{display:flex;align-items:center;gap:8px;flex-wrap:wrap;color:var(--ink-2);font-size:14.5px}
.konto-kopf{display:flex;align-items:center;gap:18px;margin-bottom:16px}
.konto-kopf .avatar.tk-avatar{width:64px;height:64px;font-size:22px}
.konto-kopf h1{font-size:28px}
.konto-kopf p{margin:4px 0 0}
.konto-raster{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:12px;max-width:760px;margin-bottom:16px}
.konto-link{display:flex;align-items:center;gap:14px;padding:16px 18px;color:var(--ink);text-decoration:none!important;transition:transform .2s var(--ease),box-shadow .2s}
.konto-link:hover{transform:translateY(-2px);box-shadow:var(--schatten-hoch)}
.konto-link b{display:block;font-size:15.5px}
.konto-link small{display:block;font-size:13px}
.konto-link i{margin-left:auto;font-style:normal;font-size:22px;color:var(--leise)}
.kl-icon{width:40px;height:40px;flex:none;border-radius:11px;display:grid;place-items:center;background:var(--g);color:#fff}
.formular.karte.mittel{margin-bottom:16px}
.fehler.mittel{max-width:760px}
.konto-raus{margin-top:6px}
.login-titel{font-size:26px;text-align:center;margin-bottom:8px}
.login-text{text-align:center;color:var(--ink-2);margin:0 0 18px}
.login-text.klein{margin:18px 0 0;font-size:13px;color:var(--leise)}
.kal-apps{margin:8px 0 18px}
.kal-apps a{display:block;text-decoration:none!important}
.segment.kal-apps a span{display:block;padding:10px 20px;font-size:15px;font-weight:600;border-radius:11px;color:var(--ink-2);transition:all .2s var(--ease)}
.segment.kal-apps a.an span{background:#fff;color:var(--ink);box-shadow:0 1px 2px rgba(0,0,0,.08),0 3px 8px rgba(0,0,0,.06)}
.kal-hinweis{background:rgba(255,149,0,.09);color:#8A4B00;border-radius:14px;padding:12px 14px;font-size:14px;line-height:1.45}
.kal-link{margin-top:18px}
.kal-neu{margin-top:8px}
@media (max-width:860px){
  .team-raster{grid-template-columns:1fr}
  .tf-zwei,.rollen-wahl{grid-template-columns:1fr}
  .formular .rw{padding:12px 12px 12px 42px}
  .kunden-wahl{grid-template-columns:1fr}
  .rollen-liste{grid-template-columns:1fr;gap:4px}
  .rollen-liste dd{margin-bottom:10px}
  .kal-apps{display:grid;grid-template-columns:repeat(4,1fr)}
  .segment.kal-apps a span{padding:9px 4px;text-align:center;font-size:14px}
  .segment.kal-apps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));justify-self:stretch}
  .konto-kopf{gap:14px}
  .konto-kopf .avatar.tk-avatar{width:54px;height:54px}
}
.tk-text b small{display:inline;font-size:13px}
.kalender-seite .feld-titel{display:block;margin:20px 0 0}

/* ---------- Microsoft 365 ---------- */
.kl-icon.m365-icon{background:linear-gradient(135deg,#0078D4,#2AA0F0)}
.m365-kopf{display:flex;align-items:center;gap:16px;margin-bottom:16px}
.m365-kopf .m365-icon{width:56px;height:56px;border-radius:15px}
.m365-kopf .m365-icon .icon{width:28px;height:28px}
.m365-kopf h1{font-size:28px}
.m365-kopf p{margin:2px 0 0}
.m365-kopf .chip{margin-left:auto}
.m365-status,.m365-verbinden,.m365-app{margin-bottom:16px}
.m365-status .kal-hinweis{margin:16px 0 0}
.m365-daten{display:grid;grid-template-columns:auto minmax(0,1fr);gap:10px 18px;margin:0}
.m365-daten dt{color:var(--leise);font-size:14px;font-weight:600;padding-top:1px}
.m365-daten dd{margin:0;font-size:15px;min-width:0;overflow-wrap:anywhere}
.m365-vorteile{list-style:none;padding:0;margin:14px 0 4px;display:grid;gap:10px}
.m365-vorteile li{position:relative;padding-left:30px;color:var(--ink-2);font-size:15px;line-height:1.45}
.m365-vorteile li b{color:var(--ink)}
.m365-vorteile li::before{content:'✓';position:absolute;left:0;top:1px;width:20px;height:20px;border-radius:50%;background:rgba(0,120,212,.12);color:#0062B0;font-size:11px;font-weight:800;display:grid;place-items:center}
.m365-verbinden .leise.klein{margin:12px 0 0}
.knopf.m365-knopf{background:linear-gradient(180deg,#1A8AE6,#0067C0);box-shadow:0 6px 16px rgba(0,120,212,.28);justify-content:center}
details.m365-app summary{cursor:pointer;list-style:none;display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px;padding-right:26px;position:relative}
details.m365-app summary::-webkit-details-marker{display:none}
details.m365-app summary::after{content:'›';position:absolute;right:2px;top:-3px;transform:rotate(90deg);transition:transform .2s var(--ease);color:var(--leise);font-size:22px}
details.m365-app[open] summary::after{transform:rotate(-90deg)}
details.m365-app summary small{font-size:13px}
details.m365-app[open] summary{margin-bottom:6px}
details.m365-app .kal-hinweis{margin:12px 0 0}
.m365-app h2 small{font:600 13px var(--f-body);margin-left:6px}
.m365-app>p{color:var(--ink-2);margin:8px 0 0}
.m365-schritte{list-style:none;counter-reset:s;padding:0;margin:20px 0 0}
.m365-schritte>li{counter-increment:s;position:relative;padding:0 0 24px 46px;display:grid;gap:8px;justify-items:start}
.m365-schritte>li::before{content:counter(s);position:absolute;left:0;top:-3px;width:30px;height:30px;border-radius:50%;background:var(--violett);color:#fff;font-weight:800;font-size:14px;display:grid;place-items:center}
.m365-schritte>li::after{content:'';position:absolute;left:14.25px;top:34px;bottom:6px;width:1.5px;background:var(--linie)}
.m365-schritte>li:last-child{padding-bottom:0}
.m365-schritte>li:last-child::after{display:none}
.m365-schritte>li>b{font-size:16.5px;line-height:1.3}
.m365-schritte p{margin:0;color:var(--ink-2);font-size:14.5px;line-height:1.5}
.m365-schritte label,.m365-schritte .kopierfeld,.m365-schritte .knopf.voll{width:100%}
.m365-schritte label small{font-weight:500;color:var(--leise);font-size:12.5px}
.m365-schritte .kopierfeld{margin:2px 0 0}
.m365-schritte .kopierfeld pre{font:14px/1.5 ui-monospace,SFMono-Regular,Menlo,monospace;color:var(--ink)}
.m365-schritte .knopf.voll{margin-top:4px}
.kal-hinweis.gut{background:rgba(52,199,89,.1);color:#1E6B33}
.kal-hinweis.mittel{max-width:760px;margin:0 0 16px}
.m365-empfehlung{margin:4px 0 10px;box-shadow:inset 0 0 0 1.5px rgba(0,120,212,.3),var(--schatten)}
.m365-empfehlung+.leise.klein{margin:0 0 4px}
@media (max-width:860px){
  .m365-kopf{display:grid;grid-template-columns:48px minmax(0,1fr);gap:4px 14px;align-items:center}
  .m365-kopf .m365-icon{width:48px;height:48px;grid-row:span 2}
  .m365-kopf .chip{grid-column:2;justify-self:start;margin:0}
  .m365-kopf h1{font-size:24px}
  .m365-daten{grid-template-columns:1fr;gap:2px}
  .m365-daten dd{margin-bottom:10px}
  .m365-schritte>li{padding-left:42px}
}

/* ---------- Profilbild ---------- */
.avatar.mit-foto{background:#fff;overflow:hidden;box-shadow:0 0 0 1px rgba(0,0,0,.07)}
.avatar.mit-foto img{width:100%;height:100%;object-fit:cover;display:block}
.avatar.mit-foto.ist-svg img{object-fit:contain;padding:16%}
.avatar.mini{width:24px;height:24px;font-size:10px}
.foto-form{position:relative;flex:none;margin:0}
.foto-wahl{position:relative;display:block;cursor:pointer;border-radius:50%}
.foto-wahl input{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
.foto-wahl .avatar{transition:filter .2s,box-shadow .2s,opacity .2s}
.foto-wahl:hover .avatar{filter:brightness(.93)}
.foto-wahl.ueber .avatar{box-shadow:0 0 0 3px var(--violett),0 0 0 7px color-mix(in srgb,var(--violett) 20%,transparent)}
.foto-wahl:has(input:focus-visible) .avatar{box-shadow:0 0 0 3px color-mix(in srgb,var(--violett) 45%,transparent)}
.foto-kamera{position:absolute;right:-3px;bottom:-3px;width:26px;height:26px;border-radius:50%;background:#fff;color:var(--ink);display:grid;place-items:center;box-shadow:0 2px 8px rgba(0,0,0,.18);transition:transform .2s var(--ease)}
.foto-kamera .icon{width:15px;height:15px}
.foto-wahl:hover .foto-kamera{transform:scale(1.08)}
.foto-form.laedt .avatar{opacity:.45}
.foto-form.laedt .foto-kamera{animation:foto-puls 1s ease-in-out infinite}
@keyframes foto-puls{50%{transform:scale(.86)}}
.foto-links{margin:6px 0 0;display:flex;align-items:center;gap:4px 12px;flex-wrap:wrap}
.foto-links .link-knopf{padding:2px 0;font-size:13.5px}
.foto-links [data-foto-wahl]{color:var(--violett)}
.foto-links [data-foto-wahl]:hover{color:#3A2BD0}
.foto-status{font-size:13px}
.betreuer{display:inline-flex;align-items:center;gap:6px;margin:0 12px 4px 0;vertical-align:middle}

/* ---------- Passwort anzeigen ---------- */
.pw-feld{position:relative;display:block}
.pw-feld input{padding-right:52px!important}
.pw-auge{position:absolute;right:6px;top:50%;transform:translateY(-50%);width:38px;height:38px;border:0;border-radius:10px;background:none;color:var(--leise);display:grid;place-items:center;cursor:pointer;transition:color .15s,background .15s}
.pw-auge:hover{color:var(--ink);background:rgba(0,0,0,.05)}
.pw-auge.an{color:var(--violett)}
.pw-auge svg{width:20px;height:20px}
.pw-auge:focus-visible{outline:2px solid color-mix(in srgb,var(--violett) 50%,transparent)}
.tf-zwei{align-items:start}

/* ---------- Anmelde-Hintergrund ---------- */
.buehne{position:fixed;inset:0;overflow:hidden;pointer-events:none;z-index:0}
body.ohne-menue main{position:relative;z-index:1}
.buehne .licht{position:absolute;left:0;top:0;width:min(1100px,170vw);aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,rgba(124,104,255,.2) 0,rgba(124,104,255,.07) 36%,transparent 66%);will-change:transform}
.b-logo{position:absolute;right:-7vmin;bottom:-12vmin;width:64vmin;height:64vmin;opacity:.065;fill:#8C80FF;will-change:transform}
.b-logo circle{fill:#FFD60A;animation:b-tippen 2.6s ease-in-out infinite}
.b-logo circle:nth-of-type(2){animation-delay:.28s}
.b-logo circle:nth-of-type(3){animation-delay:.56s}
@keyframes b-tippen{0%,62%,100%{opacity:.3}28%{opacity:1}}
.worte .wort{position:absolute;white-space:nowrap;font:800 22px/1 var(--f-display);letter-spacing:-.01em;color:rgba(255,255,255,.15);animation:b-wort 9s var(--ease) forwards}
.worte .wort.akzent{color:rgba(168,156,255,.3)}
@keyframes b-wort{0%{opacity:0;transform:translateY(14px);filter:blur(6px)}18%{opacity:1;transform:translateY(5px);filter:blur(0)}78%{opacity:1}100%{opacity:0;transform:translateY(-14px);filter:blur(4px)}}
@media (prefers-reduced-motion:reduce){.b-logo circle{animation:none;opacity:.6}}
@media (max-width:860px){.b-logo{width:86vmin;height:86vmin;right:-16vmin;bottom:-14vmin}}

/* ---------- Automatisch speichern ---------- */
.sl-fertig{display:none}
.formular.auto .sl-speichern,.formular.auto .sl-abbrechen{display:none}
.formular.auto .sl-fertig{display:inline-flex}
.speicherleiste.laeuft .sl-status::before{background:var(--violett);animation:puls 1s infinite}
.speicherleiste.dirty .sl-status::before{background:var(--orange)}
.speicherleiste.fehler .sl-status{color:var(--rot)}
.speicherleiste.fehler .sl-status::before{background:var(--rot);animation:none}
.karte .speicherleiste{margin-top:8px;box-shadow:0 1px 2px rgba(0,0,0,.06),0 8px 24px rgba(0,0,0,.08)}
.sl-status{min-width:0}

/* ---------- Anlässe & Ideen ---------- */
.land-feld{display:flex;flex-wrap:wrap;align-items:center;gap:10px}
.land-feld select{width:auto;min-width:200px}
.land-feld select[hidden]{display:none}
.themen-wahl{max-width:640px}
.an-ort{font-size:14px;font-weight:600}
.an-tipp{margin:2px 0 10px;padding:10px 14px;border-radius:var(--r-klein);background:color-mix(in srgb,var(--violett) 7%,#fff);color:var(--ink-2);font-size:14.5px}
.anlass-liste{list-style:none;margin:6px 0 0;padding:0;display:grid}
.anlass{display:grid;grid-template-columns:52px minmax(0,1fr) auto;align-items:center;gap:14px;padding:12px 0;border-top:1px solid var(--linie-2);transition:opacity .25s var(--ease),transform .25s var(--ease)}
.anlass:first-child{border-top:0}
.anlass.weg{opacity:0;transform:translateX(12px)}
.an-datum{display:grid;justify-items:center;align-content:center;width:52px;height:56px;border-radius:13px;background:var(--feld);line-height:1.05}
.an-datum b{font:800 21px/1 var(--f-display);color:var(--ink);margin:1px 0}
.an-datum small{font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.04em}
.anlass.warnen .an-datum{background:color-mix(in srgb,var(--orange) 16%,#fff)}
.anlass.warnen .an-datum b,.anlass.warnen .an-datum small{color:#B25F00}
.anlass.geplant .an-datum{background:color-mix(in srgb,var(--gruen) 14%,#fff)}
.an-text{display:grid;gap:2px;min-width:0}
.an-titel{display:flex;align-items:center;flex-wrap:wrap;gap:4px 8px}
.an-titel b{font-weight:600;font-size:15.5px}
.an-art{font-size:11.5px;font-weight:600;padding:2px 8px;border-radius:999px;background:var(--feld);color:var(--ink-2)}
.an-art.art-feiertag{background:color-mix(in srgb,var(--rot) 10%,#fff);color:#C4271D}
.an-art.art-aktion{background:color-mix(in srgb,var(--violett) 10%,#fff);color:var(--violett)}
.an-art.art-saison{background:color-mix(in srgb,var(--gruen) 14%,#fff);color:#1E7B34}
.an-meta{font-size:13.5px;color:var(--leise)}
.anlass.warnen .an-meta{color:#B25F00;font-weight:600}
.an-idee{font-size:14px;color:var(--ink-2)}
.an-aktion{display:flex;align-items:center;gap:4px;white-space:nowrap}
.an-aktion form{margin:0}
.anlass.warnen .an-aktion .knopf{background:var(--orange);color:#fff}
.an-ok{font-weight:600;color:#1E7B34}
.an-plus{display:grid;place-items:center;width:32px;height:32px;border-radius:50%;background:var(--feld);color:var(--ink-2);font-size:19px;line-height:1;transition:background .15s}
.an-plus:hover{text-decoration:none;background:var(--feld-hover);color:var(--ink)}
.an-x{width:32px;height:32px;border:0;border-radius:50%;background:none;color:var(--leise);font-size:20px;line-height:1;cursor:pointer;opacity:.55;transition:opacity .15s,background .15s}
.anlass:hover .an-x,.an-x:focus-visible{opacity:1}
.an-x:hover{background:rgba(0,0,0,.06);color:var(--ink)}
.an-ein{margin-top:8px}
.an-ein .link-knopf{font-size:13.5px;padding:4px 0}
.saison-ideen{margin-top:18px;padding-top:16px;border-top:1px solid var(--linie)}
.saison-ideen h3{font:800 16px/1.2 var(--f-display);margin-bottom:10px}
.si-liste{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.si{display:flex;flex-direction:column;justify-content:space-between;gap:10px;padding:14px;border-radius:var(--r);background:var(--feld);color:var(--ink);font-size:14.5px;line-height:1.35;transition:background .15s,transform .2s var(--ease)}
.si:hover{text-decoration:none;background:var(--feld-hover);transform:translateY(-1px)}
.si b{font-size:13px;color:var(--violett);white-space:nowrap}
.kundenfarbe .si b{color:color-mix(in srgb,var(--k) 85%,#000)}
/* Übersicht: Anlässe ohne Posting */
.demnaechst{margin-top:20px}
.dn-kunden{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px}
.dn-kunde{display:inline-flex;align-items:center;gap:7px;padding:6px 8px 6px 11px;border-radius:999px;background:var(--feld);color:var(--ink);font-size:13.5px;font-weight:600;transition:background .15s}
.dn-kunde:hover{text-decoration:none;background:var(--feld-hover)}
.dn-kunde i{width:8px;height:8px;border-radius:50%;background:var(--k)}
.dn-kunde b{display:grid;place-items:center;width:20px;height:20px;border-radius:50%;background:var(--orange);color:#fff;font-size:14px;line-height:1}
.demnaechst .anlass{grid-template-columns:52px minmax(0,1fr)}
.dn-mehr{margin:8px 0 0;font-size:13.5px}
@media (max-width:860px){
  .anlass{grid-template-columns:48px minmax(0,1fr);gap:4px 12px;align-items:start}
  .an-datum{width:48px;height:52px}
  .anlass{position:relative;padding-right:30px}
  .an-aktion{grid-column:2;justify-content:flex-start;margin-top:6px}
  .an-aktion form{position:absolute;top:8px;right:-6px}
  .an-x{opacity:1}
  .anlass.geplant .an-aktion{display:none}
  .si-liste{grid-template-columns:1fr}
  .si{flex-direction:row;align-items:center}
  .land-feld select{min-width:0;flex:1 1 180px}
}

/* ---------- Profil: Kontakt & Erreichbarkeit ---------- */
.profil-zwei{display:grid;grid-template-columns:minmax(0,1fr);gap:16px;margin-bottom:16px;align-items:start}
.profil-zwei>*{min-width:0}
.profil-zwei.mittel{max-width:760px}
.profil-zwei .formular.karte{margin:0}
@media (min-width:1400px){.profil-zwei.mittel{max-width:1140px;grid-template-columns:minmax(0,760px) minmax(280px,1fr)}.kt-vorschau{position:sticky;top:24px}}
.kontakt-form{grid-template-columns:minmax(0,1fr)}
.kontakt-form>*{min-width:0}
.kontakt-form h3{font:800 16px/1.2 var(--f-display)}
.kt-kopf{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin-top:12px;flex-wrap:wrap}
.kt-kopf .leise{font-size:13px;font-weight:600}
.kt-kopf .link-knopf{font-size:13.5px;padding:2px 0;color:var(--violett)}
.kt-zeilen{display:grid;gap:10px}
.kt-zeile{display:grid;grid-template-columns:92px minmax(0,1fr) auto;align-items:center;gap:12px}
.formular .kt-zeile>label:first-child,.kt-label{display:block;font-weight:600;font-size:14px;color:var(--ink-2)}
.kt-zeile .wa-feld .segment{justify-self:start}
.formular label.schalter{position:relative;display:block;width:46px;height:28px;flex:none;cursor:pointer}
.schalter input{position:absolute;inset:0;opacity:0;width:100%;height:100%;margin:0;cursor:pointer;z-index:1}
.schalter i{position:absolute;inset:0;border-radius:999px;background:#E3E3E8;transition:background .2s}
.schalter i::after{content:"";position:absolute;top:3px;left:3px;width:22px;height:22px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.2);transition:transform .25s var(--ease)}
.schalter input:checked+i{background:var(--gruen)}
.schalter input:checked+i::after{transform:translateX(18px)}
.schalter input:focus-visible+i{outline:3px solid rgba(75,59,255,.35);outline-offset:2px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.zeiten{display:grid;grid-template-columns:minmax(0,1fr);gap:8px}
.zt-tag{display:flex;align-items:center;gap:10px;min-height:44px}
.formular label.zt-an{display:block;flex:none;position:relative}
.zt-an input{position:absolute;opacity:0;pointer-events:none}
.zt-an span{display:grid;place-items:center;width:50px;height:42px;border-radius:12px;background:var(--feld);font-weight:600;font-size:14.5px;color:var(--leise);cursor:pointer;user-select:none;transition:background .2s,color .2s}
.zt-an input:checked+span{background:var(--violett);color:#fff}
.zt-an input:focus-visible+span{outline:3px solid rgba(75,59,255,.35)}
.formular .zt-tag input[type=time]{width:auto;flex:0 1 140px;min-width:0;padding:10px 12px}
.zt-bis{color:var(--leise);font-size:14px}
.zt-zu{display:none;color:var(--leise);font-size:14px}
.zt-tag:has(.zt-an input:not(:checked)) input[type=time],.zt-tag:has(.zt-an input:not(:checked)) .zt-bis{display:none}
.zt-tag:has(.zt-an input:not(:checked)) .zt-zu{display:inline}
.kontakt-form .haken{color:var(--ink-2)}
.kontakt-form .haken input{accent-color:var(--violett)}
.kt-vorschau h2{margin-bottom:6px}
.kt-vorschau>p{margin:12px 0 0}
.kt-person+.kt-person{margin-top:16px;padding-top:14px;border-top:1px solid var(--linie-2)}
.person .kt-avatar{width:46px;height:46px}
.kt-status{display:flex;align-items:center;gap:6px;width:fit-content;margin-top:3px;font-size:12.5px;font-weight:600;color:var(--leise)}
.kt-status::before{content:"";width:7px;height:7px;border-radius:50%;background:#C7C7CC;flex:none}
.kt-status.an{color:#1E7B34}
.kt-status.an::before{background:var(--gruen);box-shadow:0 0 0 3px rgba(52,199,89,.18)}
.kt-klein{display:block;font-size:12.5px}
.kt-hinweis{margin:10px 0 0;padding:9px 12px;border-radius:var(--r-klein);background:color-mix(in srgb,var(--orange) 10%,#fff);color:#8A4B00;font-size:13.5px}
.kt-unter{font:600 12px/1 var(--f-body);text-transform:uppercase;letter-spacing:.06em;color:var(--leise);margin:14px 0 0}
@media (max-width:560px){
  .kt-zeile{grid-template-columns:minmax(0,1fr) auto;gap:6px 12px}
  .kt-zeile>input,.kt-zeile>.wa-feld{grid-column:1/-1;grid-row:2}
  .zt-tag{gap:8px}
  .formular .zt-tag input[type=time]{flex:1 1 0}
}
.schalter-zeile{display:flex!important;align-items:center;gap:12px;font-weight:500!important;font-size:15px!important;cursor:pointer;color:var(--ink-2)}
.schalter-zeile .schalter{position:relative;display:block;width:46px;height:28px;flex:none}
.kontakt-feld:has([name=c_aktiv]:not(:checked))>*:not(:first-child){opacity:.4;transition:opacity .2s}
.kt-unter.erste{margin-top:6px}

/* ---------- Rückfrage-Dialog ---------- */
.frage-dialog{width:min(420px,calc(100vw - 32px))}
.frage-dialog .dialog-inhalt{padding:26px 24px 22px}
.frage-dialog h2{font-size:21px;line-height:1.25;padding-right:0;margin-bottom:8px}
.frage-dialog p{font-size:15px}
.frage-dialog .knopfreihe{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:22px}
.frage-dialog .knopf{justify-content:center;width:100%;min-height:46px}
.frage-dialog .knopf.gefahr{background:var(--rot);color:#fff}
.frage-dialog .knopf.gefahr:hover{background:#E6352B}
.frage-dialog:has(p[hidden]) h2{margin-bottom:0}

/* ---------- Team: Aktivität und Tagesreport ---------- */
.tk-heute{grid-column:1/-1;font-size:12.5px;line-height:1.45;color:var(--ink-2);margin-top:-2px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.ak-zus .nw{white-space:nowrap}
.tk-heute b{font-weight:600;color:#1E7B34}
.aktivitaet-karte{margin-bottom:18px}
.ak-kopf{display:flex;align-items:baseline;justify-content:space-between;gap:6px 16px;flex-wrap:wrap;margin-bottom:10px}
.ak-kopf h2{margin:0}
.ak-kopf .leise{font-size:14px}
.ak-leer{margin:6px 0 0}
.ak-tage{list-style:none;margin:0;padding:0}
.ak-tage>li+li{border-top:1px solid var(--linie-2)}
.ak-tage summary{display:grid;grid-template-columns:96px minmax(0,1fr) 18px;gap:14px;align-items:start;padding:14px 0;cursor:pointer;list-style:none}
.ak-tage summary::-webkit-details-marker{display:none}
.ak-datum b{display:block;font-size:15px}
.ak-datum small{display:block;font-size:12.5px;color:var(--leise);margin-top:2px}
.ak-info{min-width:0}
.ak-info>b{display:block;font-size:15px;font-weight:600}
.ak-zus{display:block;font-size:14px;color:var(--ink-2);margin-top:2px;line-height:1.45}
.ak-kunden{display:block;font-size:13px;color:var(--leise);margin-top:3px}
.ak-pfeil{color:var(--leise);font-size:20px;line-height:1;transition:transform .2s var(--ease);justify-self:end;margin-top:2px}
details[open]>summary .ak-pfeil{transform:rotate(90deg)}
.ak-verlauf{list-style:none;margin:0 0 14px 110px;padding:4px 0 0 14px;border-left:2px solid var(--linie)}
.ak-verlauf li{display:flex;gap:12px;padding:5px 0;font-size:14px;color:var(--ink-2);line-height:1.4}
.ak-verlauf time{flex:none;width:40px;color:var(--leise);font-variant-numeric:tabular-nums}
.ak-verlauf span{min-width:0;overflow-wrap:anywhere}
.ak-verlauf small{color:var(--leise);font-size:13px}
.ak-verlauf a{color:inherit;text-decoration:underline;text-decoration-color:var(--linie);text-underline-offset:3px}
.ak-verlauf a:hover{color:var(--violett)}
.ak-info-text{margin:12px 0 0}
.loeschen-zone{display:flex;align-items:center;justify-content:space-between;gap:12px 20px;margin-top:18px;padding-top:16px;border-top:1px solid var(--linie-2)}
.loeschen-zone p{margin:2px 0 0}
.loeschen-zone .knopf{flex:none}
@media (max-width:560px){
  .ak-tage summary{grid-template-columns:minmax(0,1fr) 18px;gap:4px 10px}
  .ak-datum{grid-column:1;display:flex;align-items:baseline;gap:8px}
  .ak-info{grid-column:1}
  .ak-pfeil{grid-column:2;grid-row:1}
  .ak-verlauf{margin-left:4px}
  .loeschen-zone{flex-direction:column;align-items:stretch}
}

/* Anmelden: Schließen führt zurück zur Webseite */
.zur-webseite{position:fixed;top:calc(18px + env(safe-area-inset-top));right:18px;z-index:5;width:44px;height:44px;border-radius:50%;display:grid;place-items:center;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.14);color:#fff;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);transition:background .2s,transform .2s var(--ease)}
.zur-webseite:hover{background:rgba(255,255,255,.18);transform:rotate(90deg)}
.zur-webseite:focus-visible{outline:3px solid rgba(255,214,10,.6);outline-offset:3px}
.zur-webseite svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
@media (max-width:560px){.zur-webseite{top:calc(12px + env(safe-area-inset-top));right:12px;width:40px;height:40px}}

/* ---------- Markenwelt (Profil bearbeiten, ganz oben im Reiter Marke) ---------- */
.mw-karte{padding:22px 22px 20px;margin-bottom:14px;overflow:visible}




.mw-abschnitt{margin-top:18px;padding-top:18px;border-top:1px solid var(--linie-2)}
.mw-abschnitt>.feld-titel{display:block;margin:0 0 10px}
.mw-modi{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.mw-modus{position:relative;cursor:pointer}
.mw-modus input{position:absolute;opacity:0;pointer-events:none}
.mw-modus>span{display:grid;grid-template-columns:34px minmax(0,1fr);column-gap:11px;row-gap:2px;align-items:center;height:100%;padding:13px 14px;border-radius:16px;background:var(--feld);transition:background .2s,box-shadow .2s,transform .15s var(--ease)}
.mw-modus:hover>span{background:var(--feld-hover)}
.mw-modus i{grid-row:span 2;display:grid;place-items:center;width:34px;height:34px;border-radius:11px;background:#fff;color:var(--m);box-shadow:0 1px 2px rgba(0,0,0,.06)}
.mw-modus i .icon{width:19px;height:19px}
.mw-modus b{font-size:15px;line-height:1.25}
.mw-modus small{font-size:12.5px;line-height:1.35;color:var(--ink-2)}
.mw-modus.m-weiter{--m:#1E9E4A}.mw-modus.m-richtlinie{--m:#0A6CDB}.mw-modus.m-neu{--m:#8E3BD6}
.mw-modus input:checked+span{background:#fff;box-shadow:0 0 0 2px var(--m),0 10px 24px -12px color-mix(in srgb,var(--m) 60%,transparent)}
.mw-modus input:checked+span i{background:var(--m);color:#fff}
.mw-modus input:focus-visible+span{outline:3px solid color-mix(in srgb,var(--m) 40%,transparent)}
.mw-filter{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:12px}
.mw-filter:empty{display:none}
.mw-f{border:0;border-radius:999px;padding:7px 12px;background:var(--feld);font:600 13.5px var(--f-body);color:var(--ink-2);cursor:pointer;transition:all .15s}
.mw-f small{margin-left:3px;font-weight:600;color:inherit;opacity:.6}
.mw-f:hover{background:var(--feld-hover);color:var(--ink)}
.mw-f.an{background:var(--ink);color:#fff}
.mw-raster{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px;margin-bottom:12px}
.mw-raster:empty{display:none}
.mw-kachel{margin:0;min-width:0;display:flex;flex-direction:column;border-radius:16px;background:#fff;box-shadow:0 0 0 1px var(--linie),0 6px 16px -10px rgba(0,0,0,.18);overflow:hidden;animation:auftauchen .35s var(--ease) both}
.mw-kachel[hidden]{display:none}
.mw-bild{position:relative;display:grid;place-items:center;width:100%;aspect-ratio:1;padding:0;border:0;background:var(--feld);cursor:zoom-in;overflow:hidden}
.mw-bild img,.mw-bild video{width:100%;height:100%;object-fit:cover;transition:transform .5s var(--ease)}
.mw-bild:hover img,.mw-bild:hover video{transform:scale(1.04)}
.mw-kachel.einpassen .mw-bild{background:#fff;background-image:linear-gradient(45deg,#F5F5F7 25%,transparent 25%,transparent 75%,#F5F5F7 75%),linear-gradient(45deg,#F5F5F7 25%,transparent 25%,transparent 75%,#F5F5F7 75%);background-size:16px 16px;background-position:0 0,8px 8px}
.mw-kachel.einpassen .mw-bild img{object-fit:contain;padding:14%}
.mw-play{position:absolute;display:grid;place-items:center;width:42px;height:42px;border-radius:50%;background:rgba(0,0,0,.45);color:#fff;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.mw-play .icon{width:18px;height:18px;margin-left:2px}
.mw-format{display:grid;justify-items:center;gap:2px}
.mw-format b{font:800 26px/1 var(--f-display);letter-spacing:-.02em;color:var(--ink-2)}
.mw-format small{font-size:12px}
.mw-kachel figcaption{display:grid;gap:6px;padding:9px 10px 10px}
.mw-name{display:block;min-width:0;font-size:13px;font-weight:600;line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mw-art{font-size:12px}
.mw-unten{display:flex;align-items:center;gap:6px}
.formular .mw-art-wahl{flex:1;min-width:0;width:auto;padding:5px 24px 5px 9px;border-radius:9px;font-size:12.5px;font-weight:600;color:var(--ink-2);background-color:var(--feld)}
.formular .mw-art-wahl,.formular .mw-art-wahl:hover,.formular .mw-art-wahl:focus{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M3 4.5 6 7.5 9 4.5' fill='none' stroke='%2386868B' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 7px center;background-size:11px}
.mw-weg{flex:none;width:28px;height:28px;border:0;border-radius:50%;background:var(--feld);color:var(--leise);font-size:12px;cursor:pointer}
.mw-weg:hover{background:rgba(255,59,48,.12);color:var(--rot)}
.mw-ablage{padding:22px 14px}
.mw-ablage-text i{display:grid;place-items:center;width:42px;height:42px;margin:0 auto 8px;border-radius:13px;background:color-mix(in srgb,var(--k) 12%,transparent);color:var(--k)}
.mw-ablage.laedt{opacity:1}
.mw-name-laedt{max-width:260px;margin:2px auto 0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mw-balken{display:block;width:min(260px,80%);height:6px;margin:10px auto 0;border-radius:3px;background:rgba(0,0,0,.08);overflow:hidden}
.mw-balken i{display:block;width:0;height:100%;margin:0;border-radius:3px;background:var(--k);transition:width .2s linear}
.mwv{margin-top:14px;padding:14px;border-radius:18px;background:linear-gradient(135deg,color-mix(in srgb,var(--violett) 8%,#fff),color-mix(in srgb,var(--gelb) 12%,#fff));box-shadow:inset 0 0 0 1px rgba(75,59,255,.1)}
.mw-vorschlag.neu-da .mwv{animation:auftauchen .45s var(--ease)}
.mwv-kopf{display:flex;align-items:flex-start;gap:10px}
.mwv-kopf b{display:block;font-size:14.5px}
.mwv-kopf small{display:block;font-size:12.5px;line-height:1.4;color:var(--ink-2)}
.mwv-icon{flex:none;display:grid;place-items:center;width:30px;height:30px;border-radius:10px;background:var(--violett);color:#fff}
.mwv-icon .icon{width:17px;height:17px}
.mwv-reihe{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.mwv-farbe,.mwv-schrift{display:inline-flex;align-items:center;gap:8px;padding:5px 12px 5px 5px;border:0;border-radius:999px;background:#fff;box-shadow:0 0 0 1px rgba(0,0,0,.06),0 2px 6px rgba(0,0,0,.05);font:600 13px/1.2 var(--f-body);color:var(--ink);text-align:left;cursor:pointer;transition:transform .15s var(--ease),opacity .25s,box-shadow .15s}
.mwv-farbe:hover,.mwv-schrift:hover{transform:translateY(-1px);box-shadow:0 0 0 1.5px var(--violett),0 6px 14px -6px rgba(75,59,255,.4)}
.mwv-farbe i{width:28px;height:28px;border-radius:50%;background:var(--f);box-shadow:inset 0 0 0 1px rgba(0,0,0,.1)}
.mwv-schrift>b{display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:var(--feld);font:800 13px var(--f-display)}
.mwv-farbe small,.mwv-schrift small{display:block;font-size:11px;font-weight:600;color:var(--leise)}
.mwv-farbe.weg,.mwv-schrift.weg{opacity:0;transform:scale(.8)}
.mwv-alle{margin-top:12px;background:#fff}
.mw-abschnitt textarea{margin:8px 0 10px}
.mw-hinweis{margin:10px 2px 0;font-size:12.5px;line-height:1.45}
@media (max-width:860px){.mw-modi{grid-template-columns:minmax(0,1fr)}.mw-modus>span{padding:12px}}
@media (max-width:560px){
  .mw-karte{padding:18px 16px 16px}
  .mw-raster{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  
}

/* ---------- Markenwelt am Kunden-Dashboard ---------- */
.mw-streifen{margin-bottom:16px;padding:20px 22px;animation:rein .5s var(--ease) both}
.mw-streifen .karten-kopf{margin-bottom:12px}
.mws-rechts{display:flex;gap:16px;margin-left:auto;font-size:14px}
.mw-modus-chip{display:inline-flex;align-items:center;gap:6px;padding:5px 11px 5px 8px;border-radius:999px;font-size:13px;font-weight:600;background:color-mix(in srgb,var(--m) 12%,transparent);color:var(--m)}
.mw-modus-chip .icon{width:16px;height:16px}
.mw-modus-chip.m-weiter{--m:#1E9E4A}.mw-modus-chip.m-richtlinie{--m:#0A6CDB}.mw-modus-chip.m-neu{--m:#8E3BD6}
.mws-band{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x proximity;scroll-padding-inline:22px;margin:0 -22px;padding:2px 22px 6px;scrollbar-width:none;-webkit-mask-image:linear-gradient(90deg,transparent,#000 22px,#000 calc(100% - 22px),transparent);mask-image:linear-gradient(90deg,transparent,#000 22px,#000 calc(100% - 22px),transparent)}
.mws-band::-webkit-scrollbar{display:none}
.mws-band .mw-kachel{flex:none;width:156px;scroll-snap-align:start}
.mws-mehr{flex:none;display:grid;place-items:center;width:96px;border-radius:16px;background:var(--feld);font:800 20px var(--f-display);color:var(--ink-2);text-decoration:none!important}
.mws-notiz{margin:12px 0 0;padding-left:12px;border-left:3px solid var(--k);font-size:14.5px;line-height:1.5;color:var(--ink-2)}
.mws-leer{display:flex;align-items:center;gap:14px}
.mws-leer>span:nth-child(2){flex:1;min-width:0}
.mws-leer b{display:block;font-size:15.5px}
.mws-leer small{display:block;font-size:13.5px;line-height:1.45}
.mws-icon{flex:none;display:grid;place-items:center;width:46px;height:46px;border-radius:14px;background:color-mix(in srgb,var(--k) 12%,transparent);color:var(--k)}
.mw-streifen.leer .knopf{background:var(--k);color:var(--k-text);box-shadow:none}
@media (max-width:560px){
  .mw-streifen{padding:16px}
  .mws-band{margin:0 -16px;padding:2px 16px 6px;scroll-padding-inline:16px}
  .mws-band .mw-kachel{width:128px}
  .mws-rechts{width:100%;margin-left:0}
  .mws-leer{flex-wrap:wrap}
  .mws-leer .knopf{width:100%}
}

/* ---------- Markenwelt: Großansicht ---------- */
.dialog.mw-zoom{width:min(1100px,calc(100vw - 32px));max-width:none;max-height:92vh;background:#0E0E12;color:#fff;overflow:hidden}
.dialog.mw-zoom[open]{display:flex;flex-direction:column}
.mw-zoom::backdrop{background:rgba(8,8,12,.72)}
.mw-zoom .dialog-zu{z-index:2;background:rgba(255,255,255,.14);color:#fff}
.mw-zoom .dialog-zu:hover{background:rgba(255,255,255,.24)}
.mwz-buehne{flex:1;min-height:0;display:grid;place-items:center;padding:56px 18px 14px}
.mwz-buehne img,.mwz-buehne video{display:block;max-width:100%;max-height:calc(92vh - 140px);border-radius:10px;object-fit:contain}
.mwz-datei{display:grid;justify-items:center;gap:6px;padding:60px 0}
.mwz-datei b{font:800 54px/1 var(--f-display);color:rgba(255,255,255,.85)}
.mwz-datei small{color:rgba(255,255,255,.6);font-size:14px}
.mwz-leiste{display:flex;align-items:center;gap:10px;padding:12px 14px;border-top:1px solid rgba(255,255,255,.1)}
.mwz-text{flex:1;min-width:0}
.mwz-text b{display:block;font-size:14.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mwz-text small{display:block;font-size:12.5px;color:rgba(255,255,255,.6)}
.mwz-knopf{display:inline-flex;align-items:center;gap:6px;height:38px;padding:0 14px;border-radius:999px;background:rgba(255,255,255,.12);color:#fff;font-weight:600;font-size:14px;text-decoration:none!important}
.mwz-knopf:hover{background:rgba(255,255,255,.2)}
.mwz-knopf .icon{width:18px;height:18px}
.mwz-pfeil{flex:none;width:38px;height:38px;border:0;border-radius:50%;background:rgba(255,255,255,.12);color:#fff;font-size:22px;line-height:1;cursor:pointer}
.mwz-pfeil:hover{background:rgba(255,255,255,.22)}
@media (max-width:560px){
  .dialog.mw-zoom{width:calc(100vw - 16px);max-height:88vh;border-radius:20px}
  .mwz-buehne{padding:52px 10px 10px}
  .mwz-buehne img,.mwz-buehne video{max-height:calc(88vh - 150px)}
  .mwz-leiste{flex-wrap:wrap;gap:8px}
  .mwz-text{order:-1;flex-basis:100%}
  .mwz-knopf{flex:1;justify-content:center}
}
/* Markenwelt und Brandbook als eigene Bereiche */
.mw-karte>.mw-abschnitt:first-child{margin-top:0;padding-top:0;border-top:0}
.bb-raster .mw-kachel.einpassen .mw-bild{aspect-ratio:4/3;background:var(--feld)}
.bb-raster .mw-kachel.einpassen .mw-bild img{padding:9%;filter:drop-shadow(0 4px 10px rgba(0,0,0,.14))}
.bb-ablage .mw-ablage-text i{background:color-mix(in srgb,#5856D6 12%,transparent);color:#5856D6}
.formular .bb-link-feld{margin-top:12px}
.bb-karte .mwv{margin-top:16px}
.bb-liste{margin:2px 0 18px}
.bb-liste h3{margin:0 0 8px;font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--leise)}
.mw-kachel.bb-zeile{flex-direction:row;margin:0 0 8px;border-radius:14px;box-shadow:none;background:none;animation:none}
.bb-zeile .mw-bild{display:flex;align-items:center;justify-content:flex-start;gap:12px;aspect-ratio:auto;padding:8px 12px 8px 8px;border-radius:14px;background:var(--feld);text-align:left;cursor:pointer;transition:background .15s}
.bb-zeile .mw-bild:hover{background:color-mix(in srgb,var(--k) 9%,var(--feld))}
.bb-zeile .mw-bild:hover img{transform:none}
.bb-bild{flex:none;display:grid;place-items:center;width:46px;height:46px;border-radius:10px;background:#fff;box-shadow:0 0 0 1px rgba(0,0,0,.06);overflow:hidden}
.bb-bild img{object-fit:contain!important;padding:3px}
.bb-bild .mw-format b{font-size:11px}
.bb-bild .mw-format small{display:none}
.bb-text{min-width:0;color:var(--ink)}
.bb-text b{display:block;font-size:14px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bb-text small{display:block;margin-top:1px;font-size:12px;color:var(--leise)}
.bb-link{display:inline-flex;align-items:center;gap:7px;margin-top:2px;font-size:14px;font-weight:600}
.bb-link .icon{width:17px;height:17px}

/* ---------- Kunden-Zugang: Freigaben, Material, Kundenansicht ---------- */
.tabbar.zwei-tabs{grid-template-columns:repeat(2,1fr)}
.chip.r-kunde{background:rgba(52,199,89,.14);color:#1E7B37}
.avatar.r-kunde{background:linear-gradient(135deg,#30B158,#7ED957)}
.rw:has(input:checked) .rw-punkt.r-kunde{box-shadow:inset 0 0 0 6px #30B158}
.rollen-wahl{grid-template-columns:repeat(4,minmax(0,1fr))}
.kunde-hinweis{display:none;margin:0;padding:12px 14px;border-radius:14px;background:rgba(52,199,89,.1);color:#1E7B37;font-size:14px;font-weight:600}
.team-form:has(input[name=rolle][value=kunde]:checked) .kunde-hinweis{display:block}
.unter-titel{margin:34px 0 14px}
.unter-titel h2{font-size:24px}
.unter-titel p{margin:6px 0 0;text-transform:none;letter-spacing:0;font-weight:400;font-size:15px}
.karte.leer.klein-leer{padding:26px;margin-bottom:22px}
.tk-kunde{display:inline-flex;align-items:center;gap:8px;font-weight:600;color:var(--ink-2)}

.vorschau-banner{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:12px 16px;margin:0 0 18px;border-radius:16px;background:linear-gradient(90deg,rgba(52,199,89,.12),rgba(52,199,89,.05));color:#145C29;font-size:14.5px}
.vorschau-banner .icon{flex:none}
.vorschau-banner span{flex:1;min-width:200px}
.vorschau-banner a{font-weight:600;color:#1E7B37}

.fg-kopf{display:flex;align-items:center;gap:10px;margin:0 0 14px}
.fg-kopf h2{font-size:24px}
.fg-zahl{display:inline-grid;place-items:center;min-width:26px;height:26px;padding:0 9px;border-radius:999px;background:var(--orange);color:#fff;font:700 13px var(--f-body);vertical-align:middle;letter-spacing:0}
.fg-abschnitt{margin-bottom:22px}
.fg-raster{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:16px}
.fg-karte{display:flex;flex-direction:column;background:var(--karte);border-radius:var(--r-gross);box-shadow:var(--schatten);overflow:hidden;color:var(--ink);text-decoration:none!important;transition:transform .2s var(--ease),box-shadow .2s;animation:rein .45s var(--ease) both}
.fg-karte:hover{transform:translateY(-3px);box-shadow:var(--schatten-hoch)}
.fg-bild{position:relative;display:block;aspect-ratio:4/5;background:var(--feld);overflow:hidden}
.fg-bild img,.fg-bild video{width:100%;height:100%;object-fit:cover;display:block}
.fg-ohne{display:grid;place-items:center;height:100%;color:var(--leise)}
.fg-ohne .icon{width:40px;height:40px}
.fg-typ{position:absolute;left:12px;top:12px;display:inline-flex;align-items:center;gap:5px;padding:6px 10px;border-radius:999px;background:rgba(0,0,0,.55);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);color:#fff;font:600 12.5px var(--f-body)}
.fg-typ .icon{width:13px;height:13px}
.fg-text{display:grid;gap:4px;padding:14px 16px 16px}
.fg-text small{font-size:13px;font-weight:600}
.fg-text b{font-size:15.5px;line-height:1.35;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.fg-los{display:inline-flex;align-items:center;gap:6px;margin-top:8px;color:var(--violett);font-weight:700;font-size:14.5px}
.fg-los .icon{width:17px;height:17px;transition:transform .2s var(--ease)}
.fg-karte:hover .fg-los .icon{transform:translateX(3px)}
.fg-fertig{display:flex;align-items:center;gap:18px;margin-bottom:22px}
.fg-fertig h2{font-size:22px}
.fg-fertig p{margin:4px 0 0}
.fg-fertig-icon{display:grid;place-items:center;flex:none;width:56px;height:56px;border-radius:18px;background:rgba(52,199,89,.14);color:#1E7B37}
.fg-fertig-icon .icon{width:30px;height:30px}
.fg-wuensche,.fg-material,.fg-liste,.fg-kontakt{margin-bottom:18px}
.fg-wuensche ul,.fg-verlauf ul{list-style:none;margin:12px 0 0;padding:0;display:grid;gap:12px}
.fg-wuensche li,.fg-verlauf li{display:grid;grid-template-columns:34px minmax(0,1fr);gap:12px;align-items:start}
.fg-wuensche li span:last-child,.fg-verlauf li>span:last-child{display:grid;gap:3px;font-size:15px}
.fv-icon{display:grid;place-items:center;width:34px;height:34px;border-radius:11px;background:rgba(255,149,0,.14);color:#B25E00}
.fv-icon .icon{width:18px;height:18px}
.fv-freigegeben .fv-icon{background:rgba(52,199,89,.14);color:#1E7B37}
.fg-wuensche q,.fg-verlauf q,.wunsch-zeile q{quotes:"„" "“";color:var(--ink);font-size:15px;line-height:1.45}
.fg-verlauf small,.fg-wuensche small{font-size:13px}
.fg-material>p{margin:4px 0 14px}
.mat-bereich+.mat-bereich{margin-top:22px;padding-top:18px;border-top:1px solid var(--linie-2)}
.mat-fuer{display:flex;align-items:center;font-size:16px;margin:0 0 10px}
.mat-notiz-feld{display:grid;gap:6px;font-weight:600;font-size:14px;margin-bottom:10px}
.mat-notiz-feld input{font:16px var(--f-body);padding:12px 14px;border-radius:12px;border:0;background:var(--feld);color:var(--ink);outline:none;transition:box-shadow .2s}
.mat-notiz-feld input:focus{box-shadow:0 0 0 3px color-mix(in srgb,var(--violett) 30%,transparent);background:#fff}
.mat-ablage{--k:#30B158}
.mat-raster{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px;margin-top:14px}
.mat-leer{grid-column:1/-1;margin:4px 0}
.mat-kachel{position:relative;margin:0;background:var(--feld);border-radius:16px;overflow:hidden;display:flex;flex-direction:column}
.mat-kachel.neu::after{content:'Neu';position:absolute;top:8px;left:8px;padding:4px 8px;border-radius:999px;background:var(--orange);color:#fff;font:700 11px var(--f-body)}
.mat-bild{position:relative;display:block;aspect-ratio:1;background:#E9E9EE;overflow:hidden}
.mat-bild img,.mat-bild video{width:100%;height:100%;object-fit:cover;display:block}
.mat-play{position:absolute;inset:auto auto 8px 8px;display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:rgba(0,0,0,.55);color:#fff}
.mat-play .icon{width:14px;height:14px}
.mat-format{display:grid;place-items:center;align-content:center;gap:4px;height:100%;color:#D70015}
.mat-format .icon{width:34px;height:34px}
.mat-format b{font-size:12px}
.mat-kachel figcaption{display:grid;gap:2px;padding:9px 10px 10px;font-size:13px;position:relative}
.mat-name{font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding-right:52px}
.mat-kachel small{font-size:12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mat-notiz{color:var(--ink-2)!important;white-space:normal!important;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.mat-aktionen{position:absolute;right:6px;top:6px;display:flex;gap:2px}
.mat-aktionen a,.mat-aktionen button{display:grid;place-items:center;width:26px;height:26px;border-radius:8px;border:0;background:none;color:var(--leise);cursor:pointer;font-size:13px}
.mat-aktionen a:hover,.mat-aktionen button:hover{background:rgba(0,0,0,.06);color:var(--ink)}
.mat-aktionen .icon{width:16px;height:16px}
.mat-team{margin-top:18px}

/* Ein Posting in der Kundenansicht */
.fg-detail{display:grid;grid-template-columns:minmax(0,520px) minmax(280px,360px);gap:28px;align-items:start;justify-content:center}
.ig-karte{background:var(--karte);border-radius:var(--r-gross);box-shadow:var(--schatten);overflow:hidden;animation:rein .45s var(--ease) both}
.ig-kopf{display:flex;align-items:center;gap:10px;padding:12px 14px}
.ig-kopf .kuerzel.mini{width:34px;height:34px;border-radius:50%;font-size:12px;box-shadow:0 0 0 2px #fff,0 0 0 3.5px #E1306C}
.ig-kopf span{display:grid;line-height:1.25}
.ig-kopf b{font-size:14.5px}
.ig-kopf small{font-size:12.5px}
.ig-medien{position:relative;background:#0B0A10;max-height:78vh;width:100%;overflow:hidden}
.ig-medien.typ-reel,.ig-medien.typ-story{max-height:min(78vh,820px);margin:0 auto}
.ig-spur{display:flex;height:100%;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;overscroll-behavior-x:contain}
.ig-spur::-webkit-scrollbar{display:none}
.ig-folie{position:relative;flex:0 0 100%;height:100%;scroll-snap-align:start;display:grid;place-items:center}
.ig-folie img,.ig-folie video{width:100%;height:100%;object-fit:contain;display:block}
.ig-marke{position:absolute;left:12px;bottom:12px;padding:5px 10px;border-radius:999px;background:rgba(0,0,0,.6);color:#fff;font:600 12px var(--f-body)}
.ig-zaehler{position:absolute;right:12px;top:12px;padding:4px 10px;border-radius:999px;background:rgba(0,0,0,.6);color:#fff;font:600 12.5px var(--f-body)}
.ig-zaehler b{font-weight:600}
.ig-pfeil{position:absolute;top:50%;transform:translateY(-50%);width:34px;height:34px;border-radius:50%;border:0;background:rgba(255,255,255,.9);color:var(--ink);font:600 22px/1 var(--f-body);cursor:pointer;box-shadow:0 2px 8px rgba(0,0,0,.2);display:grid;place-items:center;padding-bottom:3px}
.ig-pfeil[hidden]{display:none}
.zurueck-pfeil{left:10px}.vor-pfeil{right:10px}
.ig-punkte{position:absolute;left:0;right:0;bottom:10px;display:flex;justify-content:center;gap:5px;pointer-events:none}
.ig-punkte i{width:6px;height:6px;border-radius:50%;background:rgba(255,255,255,.5);transition:background .2s}
.ig-punkte i.an{background:#fff}
.ig-leer{display:grid;place-items:center;align-content:center;gap:8px;height:100%;min-height:260px;color:rgba(255,255,255,.6);font-size:14px}
.ig-leer .icon{width:40px;height:40px}
.ig-text{padding:14px 16px 18px}
.ig-caption{margin:0;font-size:15px;line-height:1.5;white-space:normal;overflow-wrap:anywhere}
.ig-caption b{font-weight:700;margin-right:4px}
.fg-seite{display:grid;gap:16px;position:sticky;top:24px}
.fg-entscheidung h2{font-size:24px}
.fg-entscheidung>.leise{margin:6px 0 4px}
.knopf.gross{padding:15px 22px;font-size:16.5px}
.fg-ja{background:linear-gradient(180deg,#3DCB66,#28A951);box-shadow:0 1px 2px rgba(40,169,81,.3),0 8px 20px rgba(40,169,81,.28),inset 0 1px 0 rgba(255,255,255,.2)}
.fg-ja .icon{width:21px;height:21px}
.fg-ja:disabled,.fg-wunsch .knopf:disabled{opacity:.45;cursor:not-allowed;filter:grayscale(.4)}
.fg-aendern{margin-top:10px}
.fg-aendern>summary{list-style:none}
.fg-aendern>summary::-webkit-details-marker{display:none}
.fg-aendern>summary.knopf{margin-top:0}
.fg-aendern[open]>summary.knopf{display:none}
.fg-aendern>summary.link-knopf{display:inline-block;margin-top:8px;color:var(--violett);padding:4px 0}
.fg-wunsch{display:grid;gap:10px;margin-top:6px;animation:auf .3s var(--ease) both}
.fg-wunsch label{display:grid;gap:6px;font-weight:600}
.fg-wunsch textarea{font:16px/1.45 var(--f-body)}
.fg-wunsch .knopf.voll{margin-top:0}
.fg-status{display:flex;align-items:center;gap:12px;margin:0 0 8px;font-size:22px}
.fg-status span{display:grid;line-height:1.3}
.fg-status b{font:800 21px/1.2 var(--f-display)}
.fg-status small{font-size:13.5px}
.fg-status .icon{width:30px;height:30px;flex:none}
.fg-status.ok .icon{color:#28A951}
.fg-status .icon{color:var(--orange)}
.fg-verlauf h2{font-size:18px}
.fg-schnell{display:none}

/* Team: Änderungswünsche sichtbar machen */
.chip.wunsch{background:rgba(255,149,0,.16);color:#B25E00}
.pzeile.hat-wunsch .pz-text b::before{content:'';display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--orange);margin-right:7px;vertical-align:2px}
.wunsch-box{display:grid;grid-template-columns:38px minmax(0,1fr);gap:12px;align-items:start;padding:16px 18px;margin:0 0 18px;border-radius:18px;background:linear-gradient(160deg,rgba(255,149,0,.13),rgba(255,149,0,.05));box-shadow:inset 0 0 0 1.5px rgba(255,149,0,.35)}
.wunsch-box b{font-size:15.5px}
.wunsch-box small{display:block;font-size:13px}
.wunsch-box p{margin:8px 0 0;font-size:15.5px;line-height:1.5;color:var(--ink)}
.wunsch-box .wb-tipp{margin-top:8px;color:#B25E00;font-weight:600}
.wb-icon{display:grid;place-items:center;width:38px;height:38px;border-radius:12px;background:var(--orange);color:#fff}
.wb-icon .icon{width:19px;height:19px}
.freigabe-zeile{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin:8px 0 0;font-size:14px;color:#1E7B37;font-weight:600}
.freigabe-zeile .icon{width:18px;height:18px}
.wuensche-karte{margin-bottom:18px;box-shadow:inset 0 0 0 1.5px rgba(255,149,0,.3),var(--schatten)}
.wuensche-karte .karten-kopf{justify-content:flex-start;margin-bottom:10px}
.wunsch-zeile{display:grid;grid-template-columns:38px minmax(0,1fr) 14px;gap:12px;align-items:center;padding:10px 8px;border-radius:14px;color:var(--ink);text-decoration:none!important;transition:background .15s}
.wunsch-zeile:hover{background:var(--feld)}
.wunsch-zeile .wb-icon{width:34px;height:34px;border-radius:11px}
.wz-text{display:grid;gap:2px;min-width:0}
.wz-text b{font-size:14.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.wz-text small{font-size:12.5px}
.wunsch-zeile i{font-style:normal;color:var(--leise);font-size:20px}
.material-hinweis{background:linear-gradient(90deg,rgba(52,199,89,.12),rgba(52,199,89,.05))}
.material-hinweis b{color:#1E7B37}

@media (max-width:1100px){
  .rollen-wahl{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:860px){
  .fg-detail{grid-template-columns:1fr;gap:16px}
  .fg-seite{position:static}
  .ig-karte{margin:0 -16px;border-radius:0;box-shadow:none;background:transparent}
  .ig-kopf{padding:4px 16px 12px}
  .ig-text{padding:14px 16px 4px}
  .ig-medien{max-height:none}
  .ig-medien.typ-reel,.ig-medien.typ-story{max-height:none}
  .fg-raster{grid-template-columns:1fr 1fr;gap:12px}
  .fg-text{padding:10px 12px 12px}
  .fg-text b{font-size:14px}
  .fg-los{font-size:13.5px;margin-top:4px}
  .fg-kopf h2{font-size:21px}
  .mat-raster{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .fg-schnell{display:grid;grid-template-columns:1fr 1.6fr;gap:10px;position:fixed;left:0;right:0;bottom:calc(62px + env(safe-area-inset-bottom));z-index:25;padding:10px 16px;background:rgba(250,250,252,.92);backdrop-filter:saturate(180%) blur(20px);-webkit-backdrop-filter:saturate(180%) blur(20px);border-top:1px solid var(--linie)}
  .fg-schnell .knopf{padding:13px 14px}
  .fg-schnell .knopf:not(.zweit){background:linear-gradient(180deg,#3DCB66,#28A951);box-shadow:0 6px 16px rgba(40,169,81,.28)}
  .fg-schnell .icon{width:19px;height:19px}
  body:has(.fg-schnell) .inhalt{padding-bottom:calc(170px + env(safe-area-inset-bottom))}
  .rollen-wahl{grid-template-columns:1fr}
  .unter-titel .knopf{width:100%}
  .posting-kopf .kopf-aktionen{width:100%}
  .posting-kopf .kopf-aktionen>*{flex:1}
  .posting-kopf .kopf-aktionen .knopf{width:100%}
}
@media (max-width:380px){
  .fg-raster{grid-template-columns:1fr}
}
@media (max-width:860px){.nur-gross{display:none}}

/* ---------- Kundenliste: Suche, Fokus, Dringlichkeit ---------- */
.sl-titel-r{display:flex;align-items:center;gap:2px}
.sl-sort{border:0;background:none;color:var(--leise);font:600 11px var(--f-body);text-transform:none;letter-spacing:0;padding:5px 8px;border-radius:7px;cursor:pointer}
.sl-sort:hover{background:rgba(0,0,0,.05);color:var(--ink)}
.sl-suche{display:flex;align-items:center;gap:8px;margin:2px 4px 6px;padding:0 10px;height:34px;flex:none;border-radius:10px;background:rgba(0,0,0,.045);color:var(--leise);cursor:text;transition:background .15s,box-shadow .15s}
.sl-suche:focus-within{background:#fff;box-shadow:0 0 0 3px rgba(75,59,255,.18)}
.sl-suche .icon{width:16px;height:16px}
.sl-suche input{flex:1;min-width:0;border:0;background:none;font:500 14px var(--f-body);color:var(--ink);outline:0;padding:0;-webkit-appearance:none;appearance:none}
.sl-suche input::-webkit-search-cancel-button{display:none}
.sl-suche kbd{font:600 11px/17px var(--f-body);color:var(--leise);border:1px solid var(--linie);border-radius:5px;padding:0 5px}
.sl-suche:focus-within kbd{display:none}
.sl-gruppe{display:flex;align-items:center;gap:5px;margin:8px 10px 2px;font:600 11px var(--f-body);color:var(--leise);text-transform:uppercase;letter-spacing:.05em}
.sl-gruppe:first-child{margin-top:2px}
.sl-gruppe .icon{width:12px;height:12px}
.sl-k{position:relative}
.sl-k[hidden]{display:none}
.sl-k.aktiv>a{background:rgba(75,59,255,.10);color:var(--violett)}
.sl-k.pausiert>a{opacity:.5}
.sl-name{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sl-kunden .lage{overflow:visible}
.lage{flex:none;font:600 11px/1 var(--f-body);padding:4px 7px;border-radius:999px;white-space:nowrap}
.l-rot{background:rgba(255,59,48,.12);color:#D70015}
.l-lila{background:rgba(175,82,222,.14);color:#8E3BBE}
.l-blau{background:rgba(0,122,255,.12);color:#0062CC}
.l-orange{background:rgba(255,149,0,.15);color:#B25E00}
.l-gelb{background:rgba(255,204,0,.22);color:#8A6A00}
.l-grau{background:rgba(0,0,0,.06);color:var(--leise)}
.l-gruen{background:rgba(52,199,89,.14);color:#1E7B37}
.lage.l-ok{background:none;color:var(--gruen);padding:0 1px;display:grid}
.lage.l-ok .icon{width:16px;height:16px}
.lage.l-pause{background:none;color:var(--leise);padding:0;font-weight:500}
.lage.l-zahl{background:var(--rot);color:#fff;min-width:20px;text-align:center}
.sl-pin{position:absolute;right:6px;top:50%;transform:translateY(-50%);width:28px;height:28px;border:0;border-radius:8px;background:rgba(244,244,248,.96);color:var(--leise);display:grid;place-items:center;cursor:pointer;opacity:0;transition:opacity .15s,color .15s}
.sl-pin .icon{width:15px;height:15px}
.sl-k:hover .sl-pin,.sl-pin:focus-visible{opacity:1}
.sl-k:hover .lage{visibility:hidden}
.sl-pin.an{color:var(--violett)}
.sl-pin:hover{color:var(--ink);background:#fff}
@media (hover:none){.sl-pin{display:none}.sl-k:hover .lage{visibility:visible}}
.sl-nichts{margin:6px 12px;font-size:13px;color:var(--leise)}

.abschnitt-kopf{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin:44px 0 16px;scroll-margin-top:80px}
.abschnitt-kopf .abschnitt{margin:0}
.kk-suche{display:flex;align-items:center;gap:8px;height:40px;padding:0 14px;border-radius:999px;background:#fff;box-shadow:var(--schatten);color:var(--leise);width:min(280px,100%);cursor:text}
.kk-suche:focus-within{box-shadow:0 0 0 3px rgba(75,59,255,.18),var(--schatten)}
.kk-suche .icon{width:17px;height:17px}
.kk-suche input{flex:1;min-width:0;border:0;background:none;outline:0;font:500 15px var(--f-body);color:var(--ink);-webkit-appearance:none;appearance:none}
.kk-gruppe{display:flex;align-items:center;gap:6px;margin:22px 2px 10px;font:600 13px var(--f-body);color:var(--leise);text-transform:uppercase;letter-spacing:.05em}
.kk-gruppe .icon{width:14px;height:14px}
.abschnitt-kopf+.kk-gruppe{margin-top:0}
.kk-wrap{position:relative;min-width:0;display:grid}
.kk-wrap[hidden]{display:none}
.kk-wrap .kunden-karte{padding-right:52px}
.kk-lage{display:flex;flex-wrap:wrap;gap:5px;margin-top:7px}
.lage-chip{font:600 12px/1 var(--f-body);padding:5px 9px;border-radius:999px;white-space:nowrap}
.kk-pin{position:absolute;top:12px;right:12px;width:34px;height:34px;border:0;border-radius:50%;background:var(--feld);color:var(--leise);display:grid;place-items:center;cursor:pointer;transition:color .15s,background .15s}
.kk-pin .icon{width:17px;height:17px}
.kk-pin:hover{color:var(--ink);background:var(--feld-hover)}
.kk-pin.an{color:#fff;background:var(--violett)}
.hero-pin.an{color:var(--violett);background:rgba(75,59,255,.12)}
.knopf.nur-icon{padding-left:11px;padding-right:11px}
.knopf.nur-icon .icon{width:18px;height:18px}

/* ---------- Ansehen als Kunde ---------- */
.als-leiste{position:fixed;top:0;left:0;right:0;z-index:70;display:flex;align-items:center;justify-content:center;gap:14px;min-height:48px;padding:6px 16px;padding-top:calc(6px + env(safe-area-inset-top));background:#1D1D1F;color:#fff;font-size:14px}
.als-text{display:flex;align-items:center;gap:9px;min-width:0}
.als-text>span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.als-text .icon{color:var(--gelb);width:19px;height:19px}
.als-leiste form{margin:0}
.als-zurueck{border:0;border-radius:999px;background:var(--gelb);color:#1D1D1F;font:700 13px var(--f-body);padding:8px 15px;cursor:pointer;white-space:nowrap}
.als-zurueck:hover{filter:brightness(1.05)}
body.als-modus{padding-top:calc(48px + env(safe-area-inset-top))}
body.als-modus .seitenleiste{top:calc(48px + env(safe-area-inset-top))}
body.als-modus .toast{top:66px}
@media (max-width:860px){
  .als-leiste{justify-content:space-between;font-size:13px}
  body.als-modus .mobil-kopf{top:calc(48px + env(safe-area-inset-top))}
}

/* ---------- Kunden-Zugang beim Kunden ---------- */
.zugang-k .karten-kopf{margin-bottom:8px}
.zg-leer{color:var(--ink-2);margin:0 0 4px;font-size:15px}
.zg-person{padding:14px 0 4px;border-top:1px solid var(--linie-2)}
.zg-person:first-of-type{border-top:0;padding-top:2px}
.zg-person.gesperrt .zg-kopf{opacity:.55}
.zg-kopf{display:flex;align-items:center;gap:12px}
.zg-kopf .avatar{width:42px;height:42px;font-size:15px}
.zg-name{flex:1;min-width:0;display:grid;line-height:1.35}
.zg-name b,.zg-name small{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.zg-name b{font-size:16px}
.zg-info{margin:8px 0 0;font-size:13px;color:var(--leise)}
.zg-knoepfe{display:flex;flex-wrap:wrap;gap:8px;margin:12px 0 0}
.zg-knoepfe form{margin:0}
.zg-knoepfe .knopf .icon{width:16px;height:16px}
.zg-zone{display:flex;flex-wrap:wrap;gap:4px 16px;margin-top:18px;padding-top:12px;border-top:1px solid var(--linie-2)}
.zg-zone form{margin:0}
.link-knopf.gefahr-text{color:var(--rot)}
.link-knopf.gefahr-text:hover{color:#B0000F}
.zg-tipp{margin:-2px 0 2px}
.zg-dialog .formular{margin-top:14px}
.zg-dialog .fehler{margin-top:12px}
.zg-senden .knopfreihe{display:flex;flex-wrap:wrap;gap:10px;margin-top:4px}
.zg-senden .kopierfeld pre{max-height:260px}
.pw-vorschlag{display:block;margin:-6px 0 4px;padding-left:0;color:var(--violett)}
.pw-vorschlag:hover{color:var(--violett);text-decoration:underline}

/* ---------- Konto: Anmeldung ---------- */
.anmelde-karte h2{margin-bottom:4px}
.am-teil{border-top:1px solid var(--linie-2)}
.am-teil:first-of-type{border-top:0}
.am-teil summary{display:flex;align-items:center;gap:12px;padding:14px 0;cursor:pointer;list-style:none}
.am-teil summary::-webkit-details-marker{display:none}
.am-teil summary>span{flex:1;min-width:0;display:grid;line-height:1.35}
.am-teil summary small{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.am-teil summary i{font-style:normal;color:var(--violett);font-weight:600;font-size:15px}
.am-teil[open] summary i{color:var(--leise)}
.am-teil .formular{padding:0 0 18px}
.am-ueberall{display:flex;align-items:center;gap:12px;padding:14px 0 0;border-top:1px solid var(--linie-2);margin:0}
.am-ueberall>span{flex:1;min-width:0;display:grid;line-height:1.35}

/* ---------- Zwei-Faktor-Anmeldung ---------- */
.chip.s-zfa{gap:4px;background:rgba(75,59,255,.1);color:#3A2BD0}
.chip.s-zfa .icon{width:12px;height:12px}
.am-zfa{border-top:1px solid var(--linie-2);padding:14px 0}
.am-zeile{display:flex;align-items:center;gap:12px}
.am-zeile>span:not(.am-zfa-icon){flex:1;min-width:0;display:grid;line-height:1.35}
.am-zeile b{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.am-zeile form{margin:0}
.am-zfa-icon{flex:none;width:38px;height:38px;border-radius:12px;display:grid;place-items:center;background:var(--feld);color:var(--leise)}
.am-zfa-icon.an{background:rgba(52,199,89,.14);color:#1E7B37}
.am-zfa-icon .icon{width:19px;height:19px}
.zfa-verwalten{border-top:0;margin-top:4px}
.zfa-verwalten summary{padding:8px 0 0 50px}
.zfa-verwalten summary small{white-space:normal}
.zfa-verwalten .formular{padding:10px 0 0 50px}
.zfa-einrichten{margin-top:16px;padding:18px;border-radius:18px;background:var(--feld)}
.zfa-schritte{margin:0;padding:0;list-style:none;counter-reset:zs;display:grid;gap:18px}
.zfa-schritte>li{position:relative;padding-left:40px;display:grid;gap:4px}
.zfa-schritte>li::before{counter-increment:zs;content:counter(zs);position:absolute;left:0;top:-2px;width:28px;height:28px;border-radius:50%;background:var(--violett);color:#fff;font:700 14px/28px var(--f-body);text-align:center}
.zfa-qr{width:200px;height:200px;margin:8px 0 4px;padding:8px;background:#fff;border-radius:16px;box-shadow:var(--schatten)}
.zfa-qr svg{display:block;width:100%;height:100%}
.zfa-schluessel summary{cursor:pointer;color:var(--violett);font-weight:600;font-size:14px}
.zfa-schluessel p{margin:8px 0;font-size:14px;color:var(--ink-2)}
.zfa-schluessel pre{font:600 16px/1.5 ui-monospace,SFMono-Regular,Menlo,monospace!important;letter-spacing:.04em}
.zfa-bestaetigen{display:flex;gap:10px;flex-wrap:wrap;margin-top:6px}
.zfa-code{font:600 22px/1 ui-monospace,SFMono-Regular,Menlo,monospace!important;letter-spacing:.18em;text-align:center;max-width:220px}
.zfa-bestaetigen .zfa-code{flex:1;min-width:150px;height:48px;border:0;border-radius:12px;background:#fff;padding:0 12px;box-shadow:inset 0 0 0 1px var(--linie)}
.zfa-bestaetigen .zfa-code:focus{outline:0;box-shadow:inset 0 0 0 2px var(--violett)}
.zfa-codes{margin-top:16px;padding:18px;border-radius:18px;background:linear-gradient(160deg,rgba(52,199,89,.10),#fff 70%);box-shadow:inset 0 0 0 1.5px rgba(52,199,89,.35)}
.zfa-codes h3{font:800 18px var(--f-display);margin-bottom:6px}
.zfa-codes p{margin:0 0 12px;color:var(--ink-2);font-size:14px}
.zfa-codes pre{margin:0 0 12px;padding:14px;border-radius:12px;background:#fff;columns:2;font:600 16px/1.9 ui-monospace,SFMono-Regular,Menlo,monospace;text-align:center}
.zfa-hilfe{margin-top:16px;font-size:14px;color:var(--ink-2)}
.zfa-hilfe summary{cursor:pointer;font-weight:600}
.zfa-hilfe p{margin:8px 0 0}
.formular .zfa-code{max-width:none}
.zfa-admin{display:flex;align-items:center;gap:12px;margin:14px 0 4px;padding:14px;border-radius:14px;background:var(--feld)}
.zfa-admin>span{flex:1;min-width:0;display:grid;line-height:1.4}
.zfa-admin form{margin:0}
@media (max-width:560px){.am-zeile{flex-wrap:wrap}.am-zeile>form{width:100%}.am-zeile>form .knopf{width:100%}.zfa-admin{flex-wrap:wrap}.zfa-verwalten summary,.zfa-verwalten .formular{padding-left:0}.zfa-einrichten{padding:14px}.zfa-schritte>li{padding-left:36px}}
.zg-bearbeiten{flex:none;width:34px;height:34px;border:0;border-radius:50%;background:var(--feld);color:var(--ink-2);display:grid;place-items:center;cursor:pointer;transition:background .15s,color .15s}
.zg-bearbeiten:hover{background:var(--feld-hover);color:var(--ink)}
.zg-bearbeiten .icon{width:16px;height:16px}
.zg-info{display:flex;align-items:center;flex-wrap:wrap;gap:6px 8px}
.zg-knoepfe .knopf{flex:1;min-width:150px}
.anmelde-karte{margin-bottom:18px}
.pw-vorschlag{text-align:left}
@media (max-width:860px){.kk-suche{width:100%}.abschnitt-kopf{margin-top:32px}}

/* ---------- Paket 2: Glocke, Chat, Push, Home-Bildschirm ---------- */
.sl-kopf{display:flex;align-items:center;justify-content:space-between;gap:8px;padding-right:2px}
.sl-kopf .sl-logo{padding-right:0}
.sl-kopf .glocke{margin-bottom:16px}
.glocke{position:relative;display:grid;place-items:center;width:38px;height:38px;border-radius:12px;color:var(--ink-2);text-decoration:none!important;transition:background .15s,color .15s;flex:none}
.glocke:hover,.glocke.aktiv{background:rgba(0,0,0,.05);color:var(--ink)}
.glocke .icon{width:22px;height:22px}
.glocke-zahl{position:absolute;top:2px;right:1px;min-width:18px;height:18px;padding:0 5px;border-radius:999px;background:var(--rot);color:#fff;font:700 11px/18px var(--f-body);text-align:center;box-shadow:0 0 0 2px var(--bg)}
.glocke.wackelt .icon{animation:wackeln .9s var(--ease)}
@keyframes wackeln{0%,100%{transform:rotate(0)}15%{transform:rotate(14deg)}30%{transform:rotate(-12deg)}45%{transform:rotate(9deg)}60%{transform:rotate(-6deg)}75%{transform:rotate(3deg)}}
.mk-rechts{display:flex;align-items:center;gap:4px}
.sl-nav a .badge,.tab-icon .badge{font-size:11px;padding:3px 6px}
.badge[hidden]{display:none}
.tab-icon{position:relative;display:block;line-height:0}
.tab-icon .badge{position:absolute;top:-5px;left:15px;margin:0;line-height:1;box-shadow:0 0 0 2px rgba(250,250,252,.95)}
@media (max-width:860px){.tabbar.drei-tabs{grid-template-columns:repeat(3,1fr)}.tabbar.fuenf-tabs{grid-template-columns:repeat(5,1fr);padding-left:2px;padding-right:2px}.tabbar.fuenf-tabs a{font-size:10.5px}}

/* Glocken-Fenster */
.glocke-panel{position:fixed;inset:16px auto auto calc(var(--seite) + 12px);margin:0;width:min(400px,calc(100vw - 24px));max-height:min(640px,calc(100dvh - 32px));padding:0;border:0;border-radius:22px;background:var(--karte);color:var(--ink);box-shadow:var(--schatten-hoch);display:none;flex-direction:column;overflow:hidden}
.glocke-panel[open]{display:flex;animation:auftauchen .3s var(--ease) both}
.glocke-panel::backdrop{background:rgba(20,18,30,.12)}
.gp-kopf{display:flex;align-items:center;gap:10px;padding:18px 18px 10px}
.gp-kopf h2{font-size:20px;margin-right:auto}
.gp-kopf .link-knopf{color:var(--violett);font-size:13.5px}
.gp-zu{width:30px;height:30px;border-radius:50%;border:0;background:var(--feld);color:var(--ink-2);cursor:pointer;font-size:13px}
.gp-liste{overflow:auto;padding:0 8px 8px;flex:1;overscroll-behavior:contain}
.gp-fuss{display:flex;justify-content:space-between;gap:10px;padding:10px 18px 14px;border-top:1px solid var(--linie-2);font-size:14px;font-weight:600}
.bn{display:flex;align-items:flex-start;gap:12px;padding:11px 10px;border-radius:14px;color:var(--ink);text-decoration:none!important;position:relative;transition:background .15s}
.bn:hover{background:var(--feld)}
.bn-icon{width:36px;height:36px;border-radius:12px;display:grid;place-items:center;flex:none;background:rgba(75,59,255,.10);color:var(--violett)}
.bn-icon .icon{width:19px;height:19px}
.bn-icon.art-freigegeben,.bn-icon.art-freigabe{background:rgba(52,199,89,.14);color:#1F8A3B}
.bn-icon.art-aenderung{background:rgba(255,59,48,.11);color:#D70015}
.bn-icon.art-material{background:rgba(255,149,0,.14);color:#B25E00}
.bn-text{display:grid;gap:1px;min-width:0;flex:1}
.bn-text b{font-size:14.5px;line-height:1.3}
.bn-text span{font-size:14px;color:var(--ink-2);line-height:1.35;overflow-wrap:anywhere}
.bn-text small{font-size:12.5px;margin-top:2px}
.bn:not(.neu) .bn-text b{font-weight:600;color:var(--ink-2)}
.bn-punkt{width:9px;height:9px;border-radius:50%;background:var(--violett);flex:none;margin-top:6px}
.bn-leer{display:grid;justify-items:center;text-align:center;gap:4px;padding:34px 16px 30px;color:var(--ink-2);--k:var(--violett)}
.bn-leer b{font:800 18px var(--f-display);color:var(--ink)}
.bn-leer span{font-size:14px}
.bn-karte{padding:10px}
.bn-karte .bn{padding:13px 12px}
@media (max-width:860px){
  .glocke-panel{inset:auto 0 0 0;width:100%;max-width:none;max-height:82dvh;border-radius:24px 24px 0 0;padding-bottom:env(safe-area-inset-bottom)}
  .glocke-panel[open]{animation:hochschieben .35s var(--ease) both}
  .glocke-panel::backdrop{background:rgba(20,18,30,.3)}
  .gp-kopf{padding-top:20px}
  .gp-kopf::before{content:"";position:absolute;top:8px;left:50%;width:38px;height:5px;margin-left:-19px;border-radius:9px;background:rgba(0,0,0,.14)}
}
@keyframes hochschieben{from{transform:translateY(40%);opacity:.4}to{transform:none;opacity:1}}

/* Chat */
.chat{position:relative;display:flex;height:calc(100dvh - 72px);max-width:880px;background:var(--karte);border-radius:var(--r-gross);box-shadow:var(--schatten);overflow:hidden;transition:max-width .3s var(--ease)}
.chat-haupt{display:flex;flex-direction:column;flex:1;min-width:0;min-height:0;position:relative}
.chat-seite .inhalt{padding-bottom:36px!important;animation:none!important}
.chat-kopf{display:flex;align-items:center;gap:12px;padding:14px 18px;border-bottom:1px solid var(--linie-2);background:rgba(255,255,255,.86);backdrop-filter:saturate(180%) blur(20px);-webkit-backdrop-filter:saturate(180%) blur(20px);z-index:2}
.chat-kopf .kuerzel.mini,.chat-kopf .logo-kachel.mini{width:40px;height:40px;border-radius:12px}
.chat-zurueck{display:none;width:36px;height:36px;margin-left:-8px;border-radius:50%;place-items:center;color:var(--violett)}
.chat-zurueck svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.chat-titel{display:grid;min-width:0;flex:1}
.chat-titel b{font-size:16.5px;line-height:1.25;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.chat-titel small{font-size:13px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.chat-avs{display:flex;flex:none}
.chat-avs .avatar{width:36px;height:36px;font-size:13px;box-shadow:0 0 0 2px #fff}
.chat-avs .avatar+.avatar{margin-left:-12px}
.chat-verlauf{flex:1;overflow-y:auto;overscroll-behavior:contain;padding:18px 18px 8px;display:flex;flex-direction:column;background:linear-gradient(180deg,#FAFAFC,#F6F6F9)}
.chat-nachrichten{display:flex;flex-direction:column;gap:3px}
.chat-aelter{align-self:center;margin-bottom:10px;color:var(--violett)}
.cn-tag{align-self:center;margin:14px 0 8px;font:600 12px var(--f-body);color:var(--leise);text-transform:uppercase;letter-spacing:.05em}
.cn-tag span{background:rgba(0,0,0,.04);padding:4px 10px;border-radius:999px}
.cn{display:flex;align-items:flex-end;gap:8px;max-width:min(78%,560px);margin-top:6px}
.cn.folge{margin-top:0}
.cn.rechts{align-self:flex-end;flex-direction:row-reverse}
.cn-av{width:28px;flex:none}
.cn-av .avatar{width:28px;height:28px;font-size:10.5px}
.cn-blase{position:relative;padding:8px 13px 7px;border-radius:20px;background:#fff;box-shadow:0 0 0 .5px rgba(0,0,0,.06),0 1px 2px rgba(0,0,0,.05);min-width:0}
.cn.links .cn-blase{border-bottom-left-radius:7px}
.cn.links.folge .cn-blase{border-top-left-radius:7px}
.cn.rechts .cn-blase{background:rgba(75,59,255,.10);border-bottom-right-radius:7px;box-shadow:none}
.cn.rechts.folge .cn-blase{border-top-right-radius:7px}
.cn.eigen .cn-blase{background:linear-gradient(180deg,var(--violett-2),var(--violett));color:#fff}
.cn-name{display:block;font-size:12.5px;color:var(--violett);margin-bottom:1px}
.cn.rechts .cn-name{color:var(--ink-2)}
.cn-blase p{margin:0;font-size:15.5px;line-height:1.42;overflow-wrap:anywhere;white-space:normal}
.cn-blase a{color:inherit;text-decoration:underline}
.cn-blase time{display:block;text-align:right;font-size:11px;color:var(--leise);margin-top:1px}
.cn.eigen .cn-blase time{color:rgba(255,255,255,.75)}
.cn.neu-rein{animation:blase .35s var(--ease) both}
@keyframes blase{from{opacity:0;transform:translateY(8px) scale(.97)}to{opacity:1;transform:none}}
.cn.sendet{opacity:.55}
.chat-gesehen{align-self:flex-end;margin:4px 4px 0;font-size:12px;color:var(--leise);font-weight:600}
.chat-leer{margin:auto;display:grid;justify-items:center;text-align:center;gap:6px;max-width:340px;padding:20px;color:var(--ink-2);--k:var(--violett)}
.chat-leer b{font:800 19px var(--f-display);color:var(--ink)}
.chat-leer span{font-size:14.5px}
.chat-leer[hidden]{display:none}
.chat-hinweis{display:flex;gap:10px;align-items:flex-start;margin:0 auto 12px;max-width:520px;padding:12px 14px;border-radius:14px;background:rgba(255,149,0,.10);color:#7A4100;font-size:14px}
.chat-hinweis .icon{color:var(--orange);margin-top:1px}
.chat-hinweis a{color:inherit;font-weight:600;text-decoration:underline}
.chat-eingabe{position:relative;display:flex;flex-direction:column;gap:8px;padding:10px 12px 12px;border-top:1px solid var(--linie-2);background:#fff}
.chat-eingabe[hidden]{display:none}
.ce-zeile{display:flex;align-items:flex-end;gap:8px}
.ce-zeile[hidden]{display:none}
.chat-eingabe textarea{flex:1;resize:none;min-height:44px;max-height:160px;padding:11px 16px;border-radius:22px;border:1px solid var(--linie);background:var(--feld);font:16px/1.4 var(--f-body);color:var(--ink);outline:none;transition:border-color .15s,background .15s}
.chat-eingabe textarea:focus{background:#fff;border-color:rgba(75,59,255,.45);box-shadow:0 0 0 4px rgba(75,59,255,.10)}
.chat-senden{width:44px;height:44px;border-radius:50%;border:0;display:grid;place-items:center;flex:none;cursor:pointer;color:#fff;background:linear-gradient(180deg,var(--violett-2),var(--violett));box-shadow:0 4px 12px rgba(75,59,255,.3);transition:transform .15s var(--ease),opacity .15s}
.chat-senden:active{transform:scale(.92)}
.chat-senden:disabled{opacity:.4;cursor:default;box-shadow:none}
.chat-senden .icon{width:20px;height:20px;margin-left:-2px}
.chat-kunde-link{flex:none}
@media (max-width:860px){
  .chat-seite .mobil-kopf,.chat-seite .tabbar{display:none}
  .chat-seite .inhalt{padding:0!important}
  .chat{height:var(--chat-h,100dvh);border-radius:0;box-shadow:none;max-width:none}
  .chat-kopf{padding:calc(10px + env(safe-area-inset-top)) 14px 10px;gap:10px}
  .chat-zurueck{display:grid}
  .chat-kunde-link{display:none}
  .chat-verlauf{padding:14px 12px 6px}
  .cn{max-width:86%}
  .chat-eingabe{padding:8px 10px calc(8px + env(safe-area-inset-bottom))}
  .als-modus .chat{height:calc(var(--chat-h,100dvh) - 52px)}
}
/* Chat-Liste */
.chat-liste-karte{max-width:760px;padding:10px}
.chat-suche{margin:6px 6px 10px}
.chat-liste{display:grid}
.cl-zeile{display:flex;align-items:center;gap:14px;padding:12px;border-radius:14px;color:var(--ink);text-decoration:none!important;transition:background .15s}
.cl-zeile:hover{background:var(--feld)}
.cl-zeile .kuerzel.mini,.cl-zeile .logo-kachel.mini{width:46px;height:46px;border-radius:14px;font-size:15px}
.cl-text{display:grid;min-width:0;flex:1}
.cl-text b{font-size:16px}
.cl-text small{font-size:14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cl-zeile.neu .cl-text small{color:var(--ink);font-weight:600}
.cl-rechts{display:grid;justify-items:end;gap:5px;flex:none}
.cl-rechts time{font-size:12.5px;color:var(--leise)}
.cl-rechts .badge{margin:0}
/* Chat-Karten auf Freigabe- und Kundenseite */
.chat-karte{display:flex;align-items:center;gap:14px;margin:0 0 18px;padding:16px 18px;color:var(--ink);text-decoration:none!important;transition:transform .2s var(--ease),box-shadow .2s}
.chat-karte:hover{transform:translateY(-2px);box-shadow:var(--schatten-hoch)}
.ck-icon{width:44px;height:44px;border-radius:14px;display:grid;place-items:center;flex:none;background:rgba(75,59,255,.10);color:var(--violett)}
.chat-karte.neu .ck-icon{background:var(--violett);color:#fff}
.ck-text{display:grid;min-width:0;flex:1}
.ck-text b{font-size:16px}
.ck-text small{font-size:14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.chat-karte .badge{margin:0}
.chat-karte i{font-style:normal;font-size:22px;color:var(--leise)}
.chat-team-karte .karten-kopf{margin-bottom:10px}
.ct-liste{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.ct-liste li{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:2px 8px;align-items:baseline;font-size:14px}
.ct-liste b{font-size:13.5px}
.ct-liste li.vom-kunden b{color:var(--k)}
.ct-liste span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--ink-2)}
.ct-liste small{font-size:12px}

/* Konto: Benachrichtigungen */
.melden-karte{margin-bottom:16px;scroll-margin-top:24px}
.melden-karte h3{font:800 16px var(--f-display);margin:0 0 10px}
.mk-intro{margin:2px 0 16px;font-size:14.5px}
.melden-status{font-size:13.5px;font-weight:600}
.melden-status.ok{color:#1F8A3B}
.melden-status.fehler{color:var(--rot)}
.push-status{display:flex;align-items:center;gap:14px;flex-wrap:wrap;padding:14px 16px;border-radius:16px;background:var(--feld)}
.push-status.an{background:rgba(52,199,89,.10)}
.push-status.geht-nicht{background:rgba(255,149,0,.10)}
.ps-icon{width:42px;height:42px;border-radius:13px;display:grid;place-items:center;flex:none;background:#fff;color:var(--violett);box-shadow:0 1px 2px rgba(0,0,0,.06)}
.push-status.an .ps-icon{background:var(--gruen);color:#fff}
.push-status.geht-nicht .ps-icon{color:var(--orange)}
.ps-text{display:grid;min-width:0;flex:1 1 220px}
.ps-text b{font-size:15.5px}
.ps-text small{font-size:13.5px;color:var(--ink-2)}
.ps-knoepfe{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.ps-knoepfe [hidden]{display:none}
.push-geraete{list-style:none;margin:10px 0 0;padding:0;display:grid;gap:2px}
.push-geraete li{display:flex;align-items:center;gap:12px;padding:8px 6px}
.push-geraete li>span:nth-child(2){display:grid;min-width:0}
.push-geraete b{font-size:14.5px;font-weight:600}
.push-geraete em{font-style:normal;font-size:12px;font-weight:600;color:#1F8A3B;background:rgba(52,199,89,.12);padding:2px 7px;border-radius:999px;margin-left:4px}
.push-geraete small{font-size:12.5px}
.pg-icon{color:var(--leise);display:grid}
.melden-gruppe{display:grid;gap:12px;margin-top:22px;padding-top:18px;border-top:1px solid var(--linie-2)}
.melden-gruppe h3{margin:0 0 2px}
.melden-gruppe .schalter-zeile{color:var(--ink)}
.melden-gruppe .schalter-zeile>span:last-child{display:grid;line-height:1.35}
.melden-gruppe .schalter-zeile small{font-size:13px}
.mg-icon{width:32px;height:32px;border-radius:10px;display:grid;place-items:center;background:var(--feld);color:var(--ink-2);flex:none}
.mg-icon .icon{width:18px;height:18px}
.homescreen{margin-top:22px;padding-top:18px;border-top:1px solid var(--linie-2);scroll-margin-top:24px}
.homescreen>p.leise{margin:-4px 0 14px;font-size:14.5px}
.hs-fertig{display:flex;align-items:center;gap:10px;padding:12px 14px;border-radius:14px;background:rgba(52,199,89,.10);color:#145C29;font-weight:600;font-size:14.5px;margin:0 0 14px}
.hs-fertig .icon{color:var(--gruen)}
.hs-reiter{display:flex;margin-bottom:14px}
.hs-reiter button{border:0;background:none;padding:8px 14px;border-radius:9px;font:600 14px var(--f-body);color:var(--ink-2);cursor:pointer;transition:all .2s var(--ease)}
.hs-reiter button[aria-selected=true]{background:#fff;color:var(--ink);box-shadow:0 1px 2px rgba(0,0,0,.08),0 3px 8px rgba(0,0,0,.06)}
.hs-schritte{list-style:none;margin:0;padding:0;display:grid;gap:12px;counter-reset:none}
.hs-schritte li{display:flex;gap:12px;align-items:flex-start}
.hs-schritte li>span:last-child{display:grid;gap:1px}
.hs-schritte b{font-size:15px}
.hs-schritte small{font-size:13.5px;color:var(--ink-2);line-height:1.45}
.hs-nr{width:28px;height:28px;border-radius:50%;display:grid;place-items:center;flex:none;background:rgba(75,59,255,.10);color:var(--violett);font:800 13px var(--f-display)}
.hs-sym{display:inline-grid;place-items:center;width:22px;height:22px;vertical-align:-6px;border-radius:6px;background:var(--feld);color:var(--violett);font-style:normal}
.hs-sym .icon{width:15px;height:15px}
[data-installieren]{margin-top:16px}
@media (max-width:560px){.hs-reiter{display:grid;grid-template-columns:repeat(3,1fr)}.hs-reiter button{padding:8px 4px}.ps-knoepfe{width:100%}.ps-knoepfe .knopf{flex:1}}
/* Hinweis „Push einschalten“ auf Start- und Freigabeseite */
.push-hinweis{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin:0 0 18px;padding:14px 16px;border-radius:18px;background:linear-gradient(100deg,rgba(75,59,255,.10),rgba(75,59,255,.04));animation:rein .45s var(--ease) both}
.push-hinweis .ps-icon{background:var(--violett);color:#fff}
.push-hinweis .ps-text small{color:var(--ink-2)}
.push-hinweis .ph-weg{border:0;background:none;color:var(--leise);font-size:15px;cursor:pointer;width:32px;height:32px;border-radius:50%}
.push-hinweis .ph-weg:hover{background:rgba(0,0,0,.05)}

/* ---------- Bildwelt: Fotos als Stilvorlage ---------- */
.bw-kachel .mw-bild{aspect-ratio:4/5}
.bw-kachel figcaption{grid-template-columns:minmax(0,1fr)}
.bw-raster{grid-template-columns:repeat(auto-fill,minmax(172px,1fr))}
.bw-marke{position:absolute;left:8px;top:8px;padding:4px 8px;border-radius:999px;font:700 11px/1.2 var(--f-body);letter-spacing:.01em;background:rgba(255,255,255,.92);color:var(--ink-2);box-shadow:0 2px 8px rgba(0,0,0,.12);pointer-events:none}
.bw-marke.frei{background:var(--gruen);color:#fff}
.bw-frei{display:inline-flex;align-items:center;gap:7px;width:100%;padding:6px 9px;border:0;border-radius:9px;background:var(--feld);font:600 12.5px var(--f-body);color:var(--ink-2);cursor:pointer;text-align:left;transition:background .15s,color .15s}
.bw-frei i{flex:none;position:relative;width:26px;height:16px;border-radius:999px;background:rgba(0,0,0,.16);transition:background .2s}
.bw-frei i::after{content:"";position:absolute;left:2px;top:2px;width:12px;height:12px;border-radius:50%;background:#fff;box-shadow:0 1px 2px rgba(0,0,0,.2);transition:transform .2s var(--ease)}
.bw-frei.an{background:color-mix(in srgb,var(--gruen) 14%,transparent);color:#1E7A3C}
.bw-frei.an i{background:var(--gruen)}
.bw-frei.an i::after{transform:translateX(10px)}
.bw-stimmung{display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px;margin-bottom:14px;padding:12px 14px;border-radius:14px;background:var(--feld)}
.bws-titel{font-size:13px;font-weight:700;color:var(--ink-2)}
.bws-farben{display:flex}
.bws-farben i{width:26px;height:26px;border-radius:50%;background:var(--f);box-shadow:0 0 0 2px #fff;margin-left:-6px}
.bws-farben i:first-child{margin-left:0}
.bws-woerter{display:flex;flex-wrap:wrap;gap:6px}
.bws-woerter span{padding:4px 10px;border-radius:999px;background:#fff;font-size:13px;font-weight:600;color:var(--ink)}
.bw-stimmung small{flex-basis:100%;font-size:12px;color:var(--leise)}
.bw-streifen .bw-stimmung{margin:0 0 12px}
.bw-streifen .mws-band .mw-kachel{width:140px}
.bw-streifen.leer .mws-icon{color:var(--orange)}
@media (max-width:640px){
  .bw-raster{grid-template-columns:repeat(2,minmax(0,1fr))}
  .bw-stimmung{padding:10px 12px}
  .bws-farben i{width:22px;height:22px}
}

/* Handy und Tablet: antippbare Felder mindestens 16px. Kleiner zoomt iOS beim Antippen die ganze Seite. */
@media (pointer:coarse){
  .sl-suche input,.kk-suche input{font-size:16px}
  .formular .mf input.hex{width:100px;font-size:16px!important}
  .formular .mf select.rolle,.formular .sf select.rolle{font-size:16px}
  .formular .slot input{font-size:16px!important}
  .formular .mw-art-wahl,.formular .bw-art-wahl{font-size:16px}
}

/* Lange Dateilisten: Rest per Knopf */
.mehr-weg{display:none!important}
.mehr-leiste{display:flex;justify-content:center;flex-wrap:wrap;gap:8px;margin-top:12px}
.mehr-leiste:empty{display:none}
.mehr-knopf{border:0;background:var(--feld);color:var(--ink);font:600 14px var(--f-body);padding:10px 18px;border-radius:999px;cursor:pointer;transition:background .15s}
.mehr-knopf:hover{background:var(--feld-hover)}
.mehr-knopf.leise{background:none;color:var(--violett)}

/* Material vom Kunden → Bildwelt */
.mat-bw{justify-self:start;display:inline-flex;align-items:center;gap:6px;margin-top:6px;border:0;background:#fff;color:var(--violett);font:600 13px var(--f-body);padding:7px 11px;border-radius:999px;cursor:pointer;box-shadow:0 0 0 1px rgba(75,59,255,.22)}
.mat-bw .icon{width:15px;height:15px}
.mat-bw.laedt{opacity:.5;pointer-events:none}
.mat-bw.da{background:none;box-shadow:none;color:#1E7B37;padding:7px 0 0;cursor:default;font-size:12.5px}
.bw-eingang{margin-bottom:16px;padding:14px;border-radius:16px;background:linear-gradient(160deg,rgba(255,149,0,.10),rgba(255,149,0,.03));box-shadow:inset 0 0 0 1px rgba(255,149,0,.25)}
.bwe-kopf{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.bwe-text{flex:1;min-width:180px;display:grid;gap:2px}
.bwe-text b{font-size:15px}
.bwe-text small{font-size:13px;color:var(--ink-2)}
.bwe-band{display:flex;gap:8px;overflow-x:auto;margin-top:12px;padding-bottom:4px;scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch}
.bwe-teil{position:relative;flex:none;width:84px;height:84px;border:0;padding:0;border-radius:12px;overflow:hidden;background:#fff;cursor:pointer;scroll-snap-align:start}
.bwe-teil img,.bwe-teil video{width:100%;height:100%;object-fit:cover;display:block}
.bwe-teil i{position:absolute;right:5px;bottom:5px;width:24px;height:24px;border-radius:50%;background:var(--violett);color:#fff;font:700 17px/24px var(--f-body);font-style:normal;text-align:center;box-shadow:0 2px 6px rgba(0,0,0,.25)}
.bwe-teil .mat-play{inset:5px auto auto 5px;width:22px;height:22px}
.bwe-teil:hover i{transform:scale(1.1)}
.bwe-teil.laedt,.bw-eingang.laedt .bwe-teil{opacity:.45;pointer-events:none}
.bw-eingang.laedt [data-bwe-alle]{opacity:.5;pointer-events:none}

/* ---------- Chat 2.0: Threads, Status, Anhänge ---------- */
.seg{display:inline-flex;gap:2px;padding:3px;border-radius:999px;background:var(--feld);flex:none}
.seg a,.seg button{display:inline-flex;align-items:center;gap:6px;height:32px;padding:0 14px;border:0;border-radius:999px;background:none;font:600 14px var(--f-body);color:var(--ink-2);cursor:pointer;text-decoration:none!important;white-space:nowrap;transition:background .15s,color .15s,box-shadow .15s}
.seg .an{background:#fff;color:var(--ink);box-shadow:0 1px 3px rgba(0,0,0,.1),0 0 0 .5px rgba(0,0,0,.04)}
.seg-zahl{min-width:18px;height:18px;padding:0 5px;border-radius:999px;background:var(--orange);color:#fff;font-size:11.5px;font-weight:700;display:inline-grid;place-items:center}
.seg-zahl[hidden]{display:none}
.chat-seg{margin:0 0 14px}
.chat-tabs{margin-left:auto}
.chat-kunde-link+.chat-tabs{margin-left:8px}
/* Status-Chips */
.st{display:inline-flex;align-items:center;gap:5px;height:22px;padding:0 9px 0 8px;border-radius:999px;font:700 12px/1 var(--f-body);white-space:nowrap;flex:none}
.st i{width:7px;height:7px;border-radius:50%;background:currentColor;flex:none}
.st .icon{width:12px;height:12px;stroke-width:3}
.st-offen{background:rgba(255,149,0,.14);color:#B45F00}
.st-arbeit{background:rgba(75,59,255,.12);color:var(--violett)}
.st-arbeit i{animation:st-puls 1.6s ease-in-out infinite}
.st-erledigt{background:rgba(52,199,89,.16);color:#1E7A39}
@keyframes st-puls{50%{opacity:.35}}
.cn.eigen .cn-thema .st{background:rgba(255,255,255,.94)}
/* Nachricht: Inhalt, Thema-Kopf, Thread-Leiste, Menü-Knopf */
.cn-inhalt{display:flex;flex-direction:column;align-items:flex-start;min-width:0;max-width:100%}
.cn.rechts .cn-inhalt{align-items:flex-end}
.cn.hat-faden .cn-av{margin-bottom:38px}
.cn-thema{display:flex;align-items:center;flex-wrap:wrap;gap:6px 8px;margin:2px 0 5px}
.cn-thema b{font:700 15.5px/1.3 var(--f-body)}
.cn.thema .cn-blase{min-width:min(240px,100%)}
.cn.links.thema .cn-blase{box-shadow:inset 3px 0 0 var(--orange),0 0 0 .5px rgba(0,0,0,.06),0 1px 2px rgba(0,0,0,.05)}
.cn.links.thema[data-status=arbeit] .cn-blase{box-shadow:inset 3px 0 0 var(--violett),0 0 0 .5px rgba(0,0,0,.06),0 1px 2px rgba(0,0,0,.05)}
.cn.links.thema[data-status=erledigt] .cn-blase{box-shadow:inset 3px 0 0 var(--gruen),0 0 0 .5px rgba(0,0,0,.06),0 1px 2px rgba(0,0,0,.05)}
.cn-faden{display:inline-flex;align-items:center;gap:7px;margin-top:5px;height:32px;padding:0 12px 0 10px;border:0;border-radius:999px;background:#fff;box-shadow:0 0 0 .5px rgba(0,0,0,.08),0 1px 3px rgba(0,0,0,.06);font:600 13px var(--f-body);color:var(--violett);cursor:pointer;max-width:100%;transition:transform .15s var(--ease),box-shadow .15s}
.cn-faden:hover{box-shadow:0 0 0 .5px rgba(0,0,0,.1),0 3px 10px rgba(0,0,0,.08)}
.cn-faden:active{transform:scale(.97)}
.cn-faden .icon{width:16px;height:16px}
.cn-faden span{color:var(--leise);font-weight:500;white-space:nowrap}
.cf-neu{display:none;width:8px;height:8px;border-radius:50%;background:var(--rot);flex:none}
.neu>.cf-neu,.neu .th-kopf .cf-neu{display:inline-block}
.cn-faden.neu{color:var(--ink);box-shadow:0 0 0 1.5px rgba(255,59,48,.35),0 1px 3px rgba(0,0,0,.06)}
.cn{position:relative}
.cn-mehr{align-self:center;flex:none;width:30px;height:30px;border:0;border-radius:50%;display:grid;place-items:center;background:#fff;color:var(--ink-2);box-shadow:0 0 0 .5px rgba(0,0,0,.08),0 2px 6px rgba(0,0,0,.08);cursor:pointer;opacity:0;transition:opacity .15s}
.cn-mehr .icon{width:16px;height:16px}
.cn:hover .cn-mehr,.cn-mehr:focus-visible,.cn.gewaehlt .cn-mehr{opacity:1}
@media (hover:none){.cn-mehr{display:none}}
.cn.gewaehlt .cn-blase{filter:brightness(.96)}
.cn-sys{align-self:center;margin:10px 0;max-width:92%;text-align:center}
.cn-sys span{display:inline-flex;align-items:center;flex-wrap:wrap;justify-content:center;gap:4px 5px;padding:5px 12px;border-radius:14px;background:rgba(0,0,0,.04);font-size:12.5px;color:var(--ink-2)}
.cn-sys .st{height:20px;font-size:11.5px}
.cn-blase p:empty{display:none}
/* Anhänge */
.ca{display:block;position:relative;border:0;padding:0;margin:2px 0 4px;color:inherit;font:inherit;text-decoration:none!important}
.mit-bild,.mit-video{padding:4px 4px 6px!important}
.mit-bild .cn-name,.mit-video .cn-name,.mit-bild p,.mit-video p,.mit-bild .cn-thema,.mit-video .cn-thema{padding:0 9px}
.mit-bild time,.mit-video time{padding-right:8px}
.mit-bild p,.mit-video p{margin-top:4px!important}
.ca-bild,.ca-video,.ca-video-an{width:min(280px,64vw);aspect-ratio:var(--ar,1.333);max-height:420px;border-radius:16px;overflow:hidden;background:rgba(0,0,0,.06);cursor:zoom-in}
.ca-bild img,.ca-video img{width:100%;height:100%;object-fit:cover;display:block}
.ca-video{cursor:pointer}
.ca-ohne{position:absolute;inset:0;display:grid;place-items:center;background:linear-gradient(160deg,#2A2A33,#15151A);color:rgba(255,255,255,.5)}
.ca-ohne .icon{width:40px;height:40px}
.ca-play{position:absolute;left:50%;top:50%;width:56px;height:56px;margin:-28px 0 0 -28px;border-radius:50%;display:grid;place-items:center;background:rgba(0,0,0,.42);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);color:#fff;box-shadow:0 4px 16px rgba(0,0,0,.25);transition:transform .15s var(--ease)}
.ca-play .icon{width:26px;height:26px;margin-left:3px}
.ca-video:hover .ca-play{transform:scale(1.06)}
.ca-info{position:absolute;left:8px;bottom:8px;padding:3px 8px;border-radius:999px;background:rgba(0,0,0,.5);color:#fff;font:600 11.5px var(--f-body)}
.ca-video-an{cursor:default;background:#000;height:auto}
.ca-video-an video{width:100%;height:100%;display:block;object-fit:contain;background:#000}
.ca-dl{position:absolute;right:8px;top:8px;padding:4px 10px;border-radius:999px;background:rgba(0,0,0,.5);color:#fff!important;font:600 12px var(--f-body);text-decoration:none!important}
.nur-medien{position:relative}
.nur-medien time{position:absolute;right:12px;bottom:12px;padding:2px 7px!important;border-radius:999px;background:rgba(0,0,0,.45);color:#fff!important}
.nur-medien .ca{margin-bottom:0}
.ca-audio{display:flex;align-items:center;gap:10px;min-width:min(250px,62vw);padding:2px 0}
.ca-knopf{width:38px;height:38px;flex:none;border:0;border-radius:50%;display:grid;place-items:center;background:var(--violett);color:#fff;cursor:pointer}
.ca-knopf .icon{width:18px;height:18px;margin-left:2px}
.ca-knopf .i-pause,.spielt .ca-knopf .i-play{display:none}
.spielt .ca-knopf .i-pause{display:block;margin-left:0}
.cn.eigen .ca-knopf{background:#fff;color:var(--violett)}
.ca-welle{flex:1;display:flex;align-items:center;gap:2px;height:30px;cursor:pointer;min-width:0}
.ca-welle i{flex:1;max-width:4px;min-width:2px;height:calc(var(--h,.4) * 100%);border-radius:2px;background:currentColor;opacity:.28;transition:opacity .1s}
.ca-welle i.an{opacity:1;color:var(--violett)}
.cn.eigen .ca-welle i.an{color:#fff}
.ca-zeit{font:600 12px var(--f-body);font-variant-numeric:tabular-nums;color:var(--leise);min-width:32px}
.cn.eigen .ca-zeit{color:rgba(255,255,255,.8)}
.ca-tempo{border:0;background:rgba(0,0,0,.06);color:inherit;font:700 11px var(--f-body);height:22px;padding:0 7px;border-radius:999px;cursor:pointer;display:none}
.spielt .ca-tempo,.ca-audio:hover .ca-tempo{display:inline-block}
.cn.eigen .ca-tempo{background:rgba(255,255,255,.2)}
.ca-datei{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:14px;background:rgba(0,0,0,.04);min-width:min(240px,62vw)}
.cn.eigen .ca-datei{background:rgba(255,255,255,.16)}
.ca-dicon{width:40px;height:46px;border-radius:8px;display:grid;place-items:center;background:var(--rot);color:#fff;font:800 11px var(--f-body);flex:none}
.ca-dtext{display:grid;min-width:0}
.ca-dtext b{font-size:14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ca-dtext small{font-size:12px;opacity:.75}
.bild-gross{border:0;padding:0;margin:auto;background:transparent;max-width:100vw;max-height:100dvh;overflow:visible}
.bild-gross::backdrop{background:rgba(0,0,0,.88);backdrop-filter:blur(8px)}
.bild-gross img{display:block;max-width:min(96vw,1400px);max-height:calc(100dvh - 90px);border-radius:12px;object-fit:contain}
.bg-leiste{display:flex;justify-content:center;gap:10px;margin-top:12px}
.bg-knopf{border:0;padding:9px 16px;border-radius:999px;background:rgba(255,255,255,.14);color:#fff!important;font:600 14px var(--f-body);text-decoration:none!important;cursor:pointer}
/* Eingabe: Anhängen, Mikrofon, Aufnahme, Thema */
.ce-rund{width:44px;height:44px;flex:none;border:0;border-radius:50%;display:grid;place-items:center;background:var(--feld);color:var(--ink-2);cursor:pointer;transition:transform .15s var(--ease),background .15s,color .15s}
.ce-rund:hover{background:var(--feld-hover)}
.ce-rund:active{transform:scale(.92)}
.ce-rund .icon{width:22px;height:22px}
.ce-rund[hidden],.chat-senden[hidden]{display:none}
.ce-plus.an{background:var(--violett);color:#fff}
.ce-plus.an .icon{transform:rotate(45deg)}
.ce-plus .icon{transition:transform .2s var(--ease)}
.ce-mikro{background:linear-gradient(180deg,var(--violett-2),var(--violett));color:#fff;box-shadow:0 4px 12px rgba(75,59,255,.3)}
.ce-mikro:hover{background:linear-gradient(180deg,var(--violett-2),var(--violett))}
.chat-senden.wartet{opacity:1!important;background:conic-gradient(var(--violett) 0 70%,rgba(75,59,255,.25) 0);animation:dreh 1s linear infinite}
@keyframes dreh{to{transform:rotate(360deg)}}
.ce-menue{position:absolute;left:10px;bottom:calc(100% + 6px);z-index:8;display:grid;min-width:240px;padding:6px;border-radius:18px;background:rgba(255,255,255,.97);backdrop-filter:saturate(180%) blur(24px);-webkit-backdrop-filter:saturate(180%) blur(24px);box-shadow:var(--schatten-hoch);animation:blase .2s var(--ease) both}
.ce-menue[hidden]{display:none}
.ce-menue button,.cn-menue button{display:flex;align-items:center;gap:12px;width:100%;min-height:44px;padding:0 12px;border:0;border-radius:12px;background:none;font:500 15.5px var(--f-body);color:var(--ink);text-align:left;cursor:pointer}
.ce-menue button:hover,.cn-menue button:hover{background:var(--feld)}
.cm-i{width:30px;height:30px;border-radius:9px;display:grid;place-items:center;flex:none;background:var(--feld);font-size:15px;color:var(--ink-2)}
.cm-i::before{font-size:16px}
.cm-bild{background:rgba(52,199,89,.15)}.cm-bild::before{content:"🖼"}
.cm-datei{background:rgba(255,59,48,.12)}.cm-datei::before{content:"📄"}
.cm-schirm{background:rgba(75,59,255,.12)}.cm-schirm::before{content:"🖥"}
.cm-thema{background:rgba(255,149,0,.15)}.cm-thema::before{content:"🚩"}
.ce-thema{display:flex;align-items:center;gap:8px;padding:4px 4px 4px 12px;border-radius:14px;background:rgba(255,149,0,.10)}
.ce-thema[hidden]{display:none}
.ce-thema-icon{color:#B45F00;display:grid}
.ce-thema-icon .icon{width:18px;height:18px}
.ce-thema input{flex:1;min-width:0;height:38px;border:0;background:transparent;font:600 16px var(--f-body);color:var(--ink);outline:none}
.ce-x{width:32px;height:32px;flex:none;border:0;border-radius:50%;background:rgba(0,0,0,.06);color:var(--ink-2);font-size:13px;cursor:pointer;display:grid;place-items:center}
.ce-anhaenge{display:flex;gap:8px;overflow-x:auto;padding:2px 0;scrollbar-width:none}
.ce-anhaenge[hidden]{display:none}
.ce-teil{position:relative;display:flex;align-items:center;gap:10px;flex:none;width:min(250px,72vw);padding:6px 6px 6px 6px;border-radius:14px;background:var(--feld);overflow:hidden}
.ce-teil::after{content:"";position:absolute;left:0;bottom:0;height:3px;width:calc(var(--p,0) * 100%);background:var(--violett);transition:width .2s}
.ce-teil.fertig::after{background:var(--gruen);width:100%}
.ce-teil.fehler{background:rgba(255,59,48,.08)}
.ce-teil.fehler small{color:var(--rot)}
.ce-vorschau{width:44px;height:44px;border-radius:10px;flex:none;display:grid;place-items:center;background:#fff center/cover no-repeat;color:var(--ink-2);font:800 12px var(--f-body)}
.ce-ttext{display:grid;min-width:0;flex:1}
.ce-ttext b{font-size:13.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ce-ttext small{font-size:12px;color:var(--leise);font-variant-numeric:tabular-nums}
.ce-aufnahme{display:flex;align-items:center;gap:10px}
.ce-aufnahme[hidden]{display:none}
.ce-weg{background:rgba(255,59,48,.1);color:var(--rot)}
.ce-rec{display:inline-flex;align-items:center;gap:8px;font:600 15px var(--f-body);font-variant-numeric:tabular-nums;color:var(--ink)}
.ce-rec i{width:10px;height:10px;border-radius:50%;background:var(--rot);animation:st-puls 1s ease-in-out infinite}
.ce-live{flex:1;display:flex;align-items:center;justify-content:flex-end;gap:2px;height:32px;overflow:hidden;min-width:0}
.ce-live i{width:3px;flex:none;height:calc(var(--h) * 100%);border-radius:2px;background:var(--violett)}
.ce-rec-senden{width:44px;height:44px;border-radius:50%;border:0;display:grid;place-items:center;flex:none;cursor:pointer;color:#fff;background:linear-gradient(180deg,var(--violett-2),var(--violett));box-shadow:0 4px 12px rgba(75,59,255,.3)}
.ce-rec-senden .icon{width:20px;height:20px;margin-left:-2px}
.zieht::after{content:"Loslassen zum Anhängen";position:absolute;inset:8px;z-index:9;display:grid;place-items:center;border:2px dashed var(--violett);border-radius:18px;background:rgba(75,59,255,.08);font:700 17px var(--f-body);color:var(--violett);pointer-events:none}
/* Bildschirmaufnahme läuft */
.bs-leiste{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);z-index:70;display:flex;align-items:center;gap:12px;padding:8px 8px 8px 16px;border-radius:999px;background:rgba(29,29,31,.94);color:#fff;font-size:14.5px;box-shadow:0 12px 34px rgba(0,0,0,.3)}
.bs-leiste b{font-variant-numeric:tabular-nums}
.bs-leiste .link-knopf{color:rgba(255,255,255,.75)}
.bs-punkt{width:10px;height:10px;border-radius:50%;background:var(--rot);animation:st-puls 1s ease-in-out infinite}
/* Menü an einer Nachricht */
.cn-menue{position:fixed;z-index:65;width:240px;padding:6px;border-radius:18px;background:rgba(255,255,255,.97);backdrop-filter:saturate(180%) blur(24px);-webkit-backdrop-filter:saturate(180%) blur(24px);box-shadow:var(--schatten-hoch);opacity:0;transform:translateY(-4px) scale(.98);transition:opacity .15s,transform .2s var(--ease)}
.cn-menue.auf{opacity:1;transform:none}
.cn-menue[hidden]{display:none}
.cn-menue button.an{font-weight:700}
.cn-menue button.an::after{content:"✓";margin-left:auto;color:var(--violett);font-weight:800}
.cn-menue button:disabled{opacity:.4;cursor:default}
.cm-titel{padding:10px 12px 4px;font:700 11.5px var(--f-body);letter-spacing:.06em;text-transform:uppercase;color:var(--leise)}
.cm-punkt{width:30px;height:30px;flex:none;border-radius:9px;display:grid;place-items:center}
.cm-punkt::before{content:"";width:10px;height:10px;border-radius:50%;background:currentColor}
.cm-griff{display:none}
@media (max-width:860px){
  .cn-menue{left:8px!important;right:8px;top:auto!important;bottom:calc(8px + env(safe-area-inset-bottom));width:auto;padding:8px 8px 10px;border-radius:24px;transform:translateY(30px)}
  .cn-menue.auf{transform:none}
  .cm-griff{display:block;width:40px;height:5px;margin:2px auto 6px;border-radius:3px;background:rgba(0,0,0,.15)}
  .cn-menue button{min-height:50px;font-size:16.5px}
}
/* Thread-Fenster */
.faden{display:flex;flex-direction:column;width:min(440px,44%);flex:none;border-left:1px solid var(--linie-2);background:#fff;min-height:0}
.faden[hidden]{display:none}
.chat.mit-faden{max-width:1360px}
.faden-kopf{display:flex;align-items:center;gap:10px;padding:14px 14px 10px 18px}
.faden-zu{display:none;width:36px;height:36px;margin-left:-8px;border:0;background:none;border-radius:50%;place-items:center;color:var(--violett);cursor:pointer}
.faden-zu svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.faden-titel{display:grid;flex:1;min-width:0}
.faden-titel b{font:700 16.5px/1.3 var(--f-body);overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.faden-titel small{font-size:13px;color:var(--leise)}
.faden-x{width:32px;height:32px;border:0;border-radius:50%;background:var(--feld);color:var(--ink-2);cursor:pointer;flex:none}
.faden-status{display:grid;grid-template-columns:repeat(3,1fr);gap:4px;margin:0 14px 10px;padding:4px;border-radius:14px;background:var(--feld)}
.fs-knopf{display:inline-flex;align-items:center;justify-content:center;gap:6px;height:36px;padding:0 6px;border:0;border-radius:10px;background:none;font:600 13.5px var(--f-body);color:var(--ink-2);cursor:pointer;white-space:nowrap;transition:background .15s,color .15s,box-shadow .15s}
.fs-knopf i{width:8px;height:8px;border-radius:50%;background:currentColor;opacity:.5}
.fs-knopf .icon{width:14px;height:14px;stroke-width:2.6}
.fs-knopf:hover:not(:disabled){color:var(--ink)}
.fs-knopf.an{background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.1)}
.fs-knopf.an i{opacity:1}
.fs-offen.an{color:#B45F00}
.fs-arbeit.an{color:var(--violett)}
.fs-erledigt.an{color:#1E7A39}
.faden-verlauf{flex:1;overflow-y:auto;overscroll-behavior:contain;padding:6px 14px 10px;display:flex;flex-direction:column;background:linear-gradient(180deg,#FAFAFC,#F6F6F9);border-top:1px solid var(--linie-2)}
.faden-start{display:flex;flex-direction:column;padding-top:8px}
.faden-start .cn{max-width:100%}
.faden-start .cn-tag{display:none}
.faden-laedt{display:grid;place-items:center;padding:40px 0}
.lade-punkt{width:22px;height:22px;border-radius:50%;border:2.5px solid rgba(75,59,255,.2);border-top-color:var(--violett);animation:dreh .8s linear infinite}
.faden-trenner{display:flex;align-items:center;gap:10px;margin:12px 0 4px;font:600 12px var(--f-body);color:var(--leise)}
.faden-trenner::after{content:"";flex:1;height:1px;background:var(--linie)}
.faden-trenner span:empty{display:none}
.faden-nachrichten .cn{max-width:88%}
.faden-eingabe{border-top:1px solid var(--linie-2)}
/* Themen-Übersicht */
.chat-themen{flex:1;overflow-y:auto;padding:14px 16px 20px;background:linear-gradient(180deg,#FAFAFC,#F6F6F9);display:flex;flex-direction:column;gap:12px}
.chat-themen[hidden]{display:none}
.th-filter{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;padding:2px;margin:0 -2px}
.th-chip{display:inline-flex;align-items:center;gap:6px;height:34px;padding:0 13px;border:0;border-radius:999px;background:#fff;box-shadow:0 0 0 .5px rgba(0,0,0,.08);font:600 13.5px var(--f-body);color:var(--ink-2);white-space:nowrap;cursor:pointer;text-decoration:none!important;flex:none}
.th-chip span{color:var(--leise);font-weight:700}
.th-chip span:empty{display:none}
.th-chip.an{background:var(--ink);color:#fff;box-shadow:none}
.th-chip.an span{color:rgba(255,255,255,.7)}
.th-liste{display:grid;gap:10px;grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr))}
.th-karte{display:grid;gap:4px;align-content:start;padding:14px 16px;border-radius:18px;background:#fff;box-shadow:inset 3px 0 0 var(--orange),0 0 0 .5px rgba(0,0,0,.06),0 2px 8px rgba(0,0,0,.04);color:var(--ink);text-decoration:none!important;transition:transform .15s var(--ease),box-shadow .15s}
.th-karte:hover{transform:translateY(-2px);box-shadow:inset 3px 0 0 var(--orange),0 0 0 .5px rgba(0,0,0,.06),0 8px 22px rgba(0,0,0,.08)}
.th-karte.th-arbeit,.th-karte.th-arbeit:hover{box-shadow:inset 3px 0 0 var(--violett),0 0 0 .5px rgba(0,0,0,.06),0 2px 8px rgba(0,0,0,.04)}
.th-karte.th-erledigt,.th-karte.th-erledigt:hover{box-shadow:inset 3px 0 0 var(--gruen),0 0 0 .5px rgba(0,0,0,.06),0 2px 8px rgba(0,0,0,.04)}
.th-karte.th-erledigt .th-titel{color:var(--ink-2)}
.th-kopf{display:flex;align-items:center;gap:8px;margin-bottom:2px}
.th-kopf .cf-neu{margin-left:auto}
.th-kunde{font-size:13px;font-weight:600;color:var(--ink-2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.th-titel{font:700 16px/1.3 var(--f-body);overflow-wrap:anywhere}
.th-meta{font-size:13px;color:var(--leise)}
.th-stand{color:var(--ink-2)}
.th-fuss{display:flex;align-items:center;gap:6px;margin-top:6px;padding-top:8px;border-top:1px solid var(--linie-2);font:600 13px var(--f-body);color:var(--violett)}
.th-fuss .icon{width:15px;height:15px}
.th-leer{display:grid;justify-items:center;text-align:center;gap:6px;max-width:380px;margin:30px auto;color:var(--ink-2);--k:var(--orange)}
.th-leer[hidden]{display:none}
.th-leer b{font:800 19px var(--f-display);color:var(--ink)}
.th-leer span{font-size:14.5px}
.th-neu{align-self:center;display:inline-flex;align-items:center;gap:6px}
.th-neu .icon{width:18px;height:18px}
.themen-karte{max-width:980px;display:grid;gap:14px;padding:16px}
.cl-themen{display:flex;flex-wrap:wrap;gap:5px;margin-top:4px;text-decoration:none!important}
.cl-themen .st{height:20px;font-size:11.5px}
.chat-team-karte .karten-kopf .cl-themen{margin:0 0 0 auto}
@media (max-width:860px){
  .chat-kopf{flex-wrap:wrap;row-gap:8px}
  .chat-tabs{order:5;flex:1 0 100%;margin:0!important;display:grid;grid-template-columns:1fr 1fr}
  .chat-tabs button{justify-content:center;height:30px}
  .faden{position:absolute;inset:0;z-index:6;width:auto;border-left:0;animation:faden-rein .28s var(--ease) both}
  .faden-kopf{padding:calc(10px + env(safe-area-inset-top)) 14px 10px}
  .faden-zu{display:grid}
  .faden-x{display:none}
  .faden-status{margin:0 12px 10px}
  .faden-verlauf{padding:6px 12px 8px}
  .chat-themen{padding:12px 12px 20px}
  .th-liste{grid-template-columns:1fr}
  .cn-faden{height:30px;font-size:12.5px}
}
@keyframes faden-rein{from{transform:translateX(36px);opacity:0}to{transform:none;opacity:1}}

/* ---------- Passkeys (Face ID / Fingerabdruck) ---------- */
.pk-login{display:grid;gap:10px;margin-top:18px}
.pk-oder{display:flex;align-items:center;gap:12px;color:var(--leise);font-size:13px}
.pk-oder::before,.pk-oder::after{content:"";flex:1;height:1px;background:var(--linie)}
.pk-knopf{display:flex;align-items:center;justify-content:center;gap:9px;width:100%;padding:15px}
.pk-knopf .icon{width:21px;height:21px}
.pk-hinweis{text-align:center;color:var(--leise);font-size:13px;margin-top:-2px}
.pk-fehler{background:rgba(255,59,48,.08);color:#C9241A;border-radius:12px;padding:11px 14px;margin:12px 0;font-weight:600;font-size:14px}
.pk-fehler[hidden]{display:none}
.pk-login .pk-fehler{margin:2px 0 0}
.knopf.laedt{position:relative;color:transparent!important;pointer-events:none}
.knopf.laedt::after{content:"";position:absolute;left:50%;top:50%;width:18px;height:18px;margin:-9px 0 0 -9px;border-radius:50%;border:2px solid var(--violett);border-right-color:transparent;animation:pk-dreh .7s linear infinite}
.knopf.laedt:not(.zweit)::after{border-color:#fff;border-right-color:transparent}
.knopf.laedt .icon{opacity:0}
@keyframes pk-dreh{to{transform:rotate(360deg)}}
.am-pk{border-top:1px solid var(--linie-2);padding:14px 0}
.am-pk .am-zeile>.knopf{flex:none}
.am-pk .knopf .icon{width:16px;height:16px}
.pk-pw{padding:12px 0 0 50px}
.pk-pw label{display:grid;gap:6px;font-weight:600;font-size:14px;max-width:340px}
.pk-pw input{height:44px;border:0;border-radius:12px;background:var(--feld);padding:0 12px;font:inherit;font-size:16px;font-weight:400}
.pk-pw input:focus{outline:0;box-shadow:inset 0 0 0 2px var(--violett)}
.pk-pw small{font-weight:400;color:var(--leise)}
.am-pk>.pk-fehler{margin:12px 0 0 50px}
.pk-geht-nicht{margin:10px 0 0 50px}
.pk-liste{list-style:none;margin:12px 0 0 50px;padding:0;display:grid;gap:6px}
.pk-liste li{display:flex;align-items:center;gap:12px;padding:10px 14px;border-radius:14px;background:var(--feld)}
.pk-liste li>span:not(.pk-geraet){flex:1;min-width:0;display:grid;line-height:1.35}
.pk-liste li b{font-size:15px;overflow-wrap:anywhere}
.pk-liste li small{color:var(--leise);font-size:13px}
.pk-liste form{margin:0}
.pk-geraet{flex:none;width:32px;height:32px;border-radius:10px;display:grid;place-items:center;background:#fff;color:var(--ink-2)}
.pk-geraet .icon{width:17px;height:17px}
.pk-angebot{position:fixed;z-index:55;right:24px;bottom:24px;width:min(400px,calc(100vw - 32px));display:grid;grid-template-columns:auto 1fr;gap:12px 14px;padding:16px;border-radius:22px;background:rgba(255,255,255,.96);backdrop-filter:saturate(180%) blur(24px);-webkit-backdrop-filter:saturate(180%) blur(24px);box-shadow:0 0 0 .5px rgba(0,0,0,.06),0 18px 50px rgba(0,0,0,.18);opacity:0;transform:translateY(16px) scale(.98);transition:opacity .35s var(--ease),transform .35s var(--ease)}
.pk-angebot.da{opacity:1;transform:none}
.pk-a-icon{width:46px;height:46px;border-radius:14px;display:grid;place-items:center;background:linear-gradient(150deg,var(--violett-2),var(--violett));color:#fff;transition:background .3s}
.pk-a-icon .icon{width:26px;height:26px}
.pk-angebot.fertig .pk-a-icon{background:var(--gruen)}
.pk-a-text{display:grid;gap:3px;line-height:1.35;align-self:center}
.pk-a-text b{font-size:16px}
.pk-a-text small{color:var(--ink-2);font-size:14px}
.pk-a-text .pk-fehler{margin:6px 0 0}
.pk-a-knoepfe{grid-column:1/-1;display:flex;align-items:center;justify-content:flex-end;gap:14px}
.pk-angebot.fertig .pk-a-knoepfe{display:none}
@media (max-width:860px){.pk-angebot{left:50%;right:auto;bottom:calc(76px + env(safe-area-inset-bottom));transform:translate(-50%,16px) scale(.98)}.pk-angebot.da{transform:translate(-50%,0)}}
@media (max-width:560px){.pk-pw,.pk-liste,.pk-geht-nicht,.am-pk>.pk-fehler{margin-left:0;padding-left:0}.pk-pw{padding-top:12px}.am-pk .am-zeile>.knopf{width:100%;justify-content:center}.pk-a-knoepfe .knopf{flex:1}}

/* ---------- Planer: Woche und Monat über alle Kunden ---------- */
.pl-titelzeile{display:flex;align-items:flex-end;gap:12px 16px;flex-wrap:wrap;margin-bottom:18px}
.pl-titel{flex:1 1 auto;min-width:0}
.pl-zeitraum{margin:6px 0 0;font-size:17px;color:var(--ink-2)}
.pl-zeitraum span{color:var(--leise);font-size:14px;font-weight:600;margin-left:6px}
.pl-steuer{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.pl-nav{display:flex;align-items:center;gap:2px;background:var(--karte);border-radius:12px;padding:3px;box-shadow:var(--schatten)}
.pl-pfeil{display:grid;place-items:center;width:34px;height:34px;border-radius:9px;color:var(--ink-2);text-decoration:none!important}
.pl-pfeil:hover,.pl-heute:hover{background:var(--feld)}
.pl-heute{padding:7px 12px;border-radius:9px;font-weight:600;font-size:14px;color:var(--ink);text-decoration:none!important}
.pl-heute.da{color:var(--violett)}
.pl-ansichten{display:inline-flex;gap:3px;padding:3px;border-radius:12px;background:var(--feld)}
.pl-ansichten a{padding:7px 14px;border-radius:9px;font-size:14px;font-weight:600;color:var(--ink-2);text-decoration:none!important;white-space:nowrap;transition:background .2s var(--ease)}
.pl-ansichten a.an{background:#fff;color:var(--ink);box-shadow:0 1px 2px rgba(0,0,0,.08),0 3px 8px rgba(0,0,0,.06)}
.pl-ansichten small{color:var(--leise);font-weight:600;margin-left:2px}

.pl-neu-knopf{display:inline-flex;align-items:center;gap:6px}
.pl-neu-knopf .icon{width:18px;height:18px}

.pl-filter{display:flex;gap:10px 14px;align-items:center;justify-content:space-between;margin-bottom:16px}
.pl-chips{display:flex;gap:6px;flex-wrap:wrap;min-width:0}
.pl-chip{display:inline-flex;align-items:center;gap:7px;padding:6px 12px;border-radius:999px;background:var(--karte);box-shadow:0 0 0 1px var(--linie);color:var(--ink-2);font-size:13.5px;font-weight:600;white-space:nowrap;text-decoration:none!important;transition:background .15s,color .15s}
.pl-chip:hover{background:#fff;color:var(--ink)}
.pl-chip i{width:8px;height:8px;border-radius:50%;background:var(--k)}
.pl-chip.an{background:var(--ink);color:#fff;box-shadow:none}
.pl-chip.an i{box-shadow:0 0 0 1.5px #fff}
.pl-chip small{color:inherit;opacity:.65;font-weight:600}
.pl-gestrichelt{width:14px;height:10px;border:1.5px dashed currentColor;border-radius:3px}
.pl-filter-rechts{display:flex;gap:8px;align-items:center;flex:none}
.pl-status-wahl select{appearance:none;-webkit-appearance:none;border:0;background:var(--karte) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2386868B' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='m7 10 5 5 5-5'/%3E%3C/svg%3E") no-repeat right 10px center/16px;box-shadow:0 0 0 1px var(--linie);border-radius:999px;padding:7px 32px 7px 14px;font:600 13.5px var(--f-body);color:var(--ink-2);cursor:pointer}

.pl-rumpf{display:grid;grid-template-columns:minmax(0,1fr);gap:20px;align-items:start}
.pl-raster{transition:opacity .2s}
.planer.laedt .pl-raster,.planer.laedt .pl-ideen-liste{opacity:.55;pointer-events:none}
.pl-woche{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:8px}
.pl-streifen{display:none}
.pl-tag{background:var(--karte);border-radius:16px;box-shadow:var(--schatten);padding:8px 7px 10px;min-height:300px;display:flex;flex-direction:column;min-width:0;transition:box-shadow .2s,background .2s}
.pl-tag.vorbei{background:rgba(255,255,255,.55)}
.pl-kopf{display:flex;align-items:center;gap:6px;padding:2px 3px 8px}
.pl-tagname{display:none}
.pl-wt{font-size:12px;font-weight:600;color:var(--leise);text-transform:uppercase;letter-spacing:.04em}
.pl-nr{font:800 19px/1 var(--f-display);color:var(--ink);display:grid;place-items:center;min-width:32px;height:32px;padding:0 4px;border-radius:999px;text-decoration:none!important;letter-spacing:-.02em}
.pl-nr:hover{background:var(--feld)}
.pl-tag.heute .pl-nr{background:var(--violett);color:#fff}
.pl-tag.heute .pl-wt{color:var(--violett)}
.pl-punkte{display:none;gap:3px;height:6px;justify-content:center}
.pl-punkte i{width:5px;height:5px;border-radius:50%;background:var(--k)}
.pl-punkte i.frei{background:transparent;box-shadow:inset 0 0 0 1px var(--leise)}
.pl-plus{margin-left:auto;width:28px;height:28px;flex:none;border-radius:50%;border:0;background:transparent;color:var(--leise);display:grid;place-items:center;cursor:pointer;opacity:0;transition:opacity .15s,background .15s,color .15s}
.pl-plus .icon{width:17px;height:17px}
.pl-tag:hover .pl-plus,.pl-plus:focus-visible{opacity:1}
.pl-plus:hover{background:rgba(75,59,255,.1);color:var(--violett)}
.pl-inhalt{display:grid;grid-template-columns:minmax(0,1fr);gap:6px;align-content:start;flex:1}
.pl-nichts{margin:8px 4px;font-size:12.5px;color:var(--leise)}
.pl-tag .pl-nichts{text-align:center;margin-top:20px}
.pl-tag.drueber,.pl-ideen.drueber{background:color-mix(in srgb,var(--violett) 5%,#fff);box-shadow:0 0 0 2px var(--violett),var(--schatten)}

.pl-karte{position:relative;border-radius:12px;background:var(--karte);box-shadow:0 0 0 1px var(--linie),0 1px 2px rgba(0,0,0,.03);transition:box-shadow .15s,opacity .15s,transform .15s}
.pl-karte::before{content:"";position:absolute;left:0;top:9px;bottom:9px;width:3px;border-radius:0 3px 3px 0;background:var(--k)}
.pl-karte:hover{box-shadow:0 0 0 1px rgba(0,0,0,.12),0 4px 12px rgba(0,0,0,.06)}
.pl-karte[draggable=true]{cursor:grab}
.pl-karte.zieht{opacity:.35}
.pl-karte.st-gepostet{opacity:.6}
.pl-karte.st-gepostet:hover{opacity:1}
.pl-karte.faellig{box-shadow:0 0 0 1px rgba(255,59,48,.4)}
.pl-link{display:grid;grid-template-columns:34px minmax(0,1fr);gap:8px;padding:8px 8px 8px 11px;color:var(--ink);text-decoration:none!important;-webkit-touch-callout:none;-webkit-user-select:none;user-select:none}
.pl-bild{display:block;width:34px;height:42px;border-radius:7px;overflow:hidden;background:var(--feld);box-shadow:inset 0 0 0 .5px rgba(0,0,0,.06)}
.pl-bild img,.pl-bild video{width:100%;height:100%;object-fit:cover;display:block;pointer-events:none}
.pl-bild.leer-thumb{background:color-mix(in srgb,var(--k) 16%,#F2F2F7)}
.pl-text{display:grid;gap:1px;min-width:0;align-content:start}
.pl-zeile1{display:flex;align-items:center;gap:6px;font-size:12px;font-weight:600;color:var(--ink-2);min-height:15px}
.pl-zeit.faellig{color:var(--rot)}
.pl-st{width:8px;height:8px;border-radius:50%;background:var(--leise);flex:none}
.st-idee .pl-st,.st-entwurf .pl-st{background:#6A5CFF}
.st-freigabe .pl-st{background:var(--orange)}
.st-geplant .pl-st{background:var(--gruen)}
.st-gepostet .pl-st{background:var(--ink)}
.pl-karte.hat-wunsch .pl-st{background:var(--rot)}
.pl-text b{font-size:13px;line-height:1.25;font-weight:600;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;overflow-wrap:anywhere}
.pl-text small{display:block;font-size:11.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pl-punkt{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--k);margin-right:5px;vertical-align:1px}
.pl-link>.chip{display:none}
.pl-mehr{position:absolute;top:4px;right:4px;width:26px;height:26px;border-radius:8px;border:0;background:rgba(255,255,255,.92);color:var(--ink-2);display:grid;place-items:center;cursor:pointer;opacity:0;transition:opacity .15s,background .15s}
.pl-mehr .icon{width:18px;height:18px}
.pl-karte:hover .pl-mehr,.pl-mehr:focus-visible{opacity:1}
.pl-mehr:hover{background:var(--feld)}

.pl-frei{display:flex;align-items:center;gap:8px;padding:7px 8px;border-radius:12px;border:1.5px dashed color-mix(in srgb,var(--k) 60%,#C7C7CC);color:var(--ink-2);text-decoration:none!important;transition:background .15s,border-color .15s;min-width:0}
.pl-frei:hover,.pl-frei.drueber{background:color-mix(in srgb,var(--k) 9%,transparent)}
.pl-frei.drueber{border-color:var(--violett)}
.pl-frei-plus{flex:none;width:22px;height:22px;border-radius:50%;display:grid;place-items:center;background:color-mix(in srgb,var(--k) 18%,#fff);color:var(--ink)}
.pl-frei-plus .icon{width:14px;height:14px}
.pl-frei>span:last-child{display:grid;min-width:0}
.pl-frei b{font-size:12.5px;font-weight:600;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pl-frei small{font-size:11.5px}
.pl-frei-summe{display:none}

.pl-anlass{border-radius:10px;background:rgba(255,149,0,.11);font-size:12px;min-width:0}
.pl-anlass.ok{background:var(--feld)}
.pl-anlass summary{list-style:none;cursor:pointer;padding:5px 8px;display:grid;gap:0}
.pl-anlass summary::-webkit-details-marker{display:none}
.pl-an-name{font-weight:600;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pl-anlass small{font-size:11px;font-weight:600;color:#B25E00}
.pl-anlass.ok small{color:var(--leise)}
.pl-an-liste{display:grid;gap:4px;padding:0 5px 6px}
.pl-an-k{display:flex;align-items:center;gap:6px;padding:5px 8px;border-radius:8px;background:#fff;font-weight:600;font-size:12px;color:var(--ink);text-decoration:none!important;min-width:0}
.pl-an-k i{flex:none;width:7px;height:7px;border-radius:50%;background:var(--k)}
.pl-an-k b{margin-left:auto;color:var(--orange);font-size:15px;line-height:1}
.pl-an-k.ok{background:transparent;color:var(--leise)}

.pl-ideen{background:var(--karte);border-radius:18px;box-shadow:var(--schatten);padding:16px 14px 14px;margin-top:6px;transition:box-shadow .2s,background .2s}
.pl-ideen-kopf{display:flex;align-items:center;gap:8px;padding:0 4px}
.pl-ideen-kopf h2{font-size:19px}
.pl-zahl{display:inline-grid;place-items:center;min-width:24px;height:24px;padding:0 7px;border-radius:999px;background:var(--feld);font:700 12.5px var(--f-body);color:var(--ink-2)}
.pl-ideen .pl-plus{opacity:1}
.pl-ideen-hinweis{font-size:12.5px;color:var(--leise);margin:4px 4px 12px}
.pl-ideen-liste{display:grid;gap:8px;grid-template-columns:repeat(auto-fill,minmax(230px,1fr))}
.pl-ideen .pl-karte:not(.hat-wunsch) .pl-zeile1{display:none}
.nur-touch{display:none}
@media (hover:none){.nur-maus{display:none}.nur-touch{display:inline}.pl-mehr{opacity:1}.pl-plus{opacity:1}}

.pl-legende{display:flex;flex-wrap:wrap;gap:6px 16px;margin:14px 2px 0;font-size:12.5px;color:var(--leise)}
.pl-legende span{display:inline-flex;align-items:center;gap:6px}
.pl-legende i{width:8px;height:8px;border-radius:50%}
.pl-legende i.st-entwurf{background:#6A5CFF}
.pl-legende i.st-freigabe{background:var(--orange)}
.pl-legende i.st-geplant{background:var(--gruen)}
.pl-legende i.st-gepostet{background:var(--ink)}
.pl-legende i.hat-wunsch{background:var(--rot)}
.pl-legende i.frei{width:14px;height:10px;border-radius:3px;border:1.5px dashed var(--leise)}
.pl-abo{display:flex;align-items:center;gap:12px;margin-top:26px;padding:14px 16px;background:var(--karte);border-radius:16px;box-shadow:var(--schatten);color:var(--ink-2);font-size:14px;text-decoration:none!important;max-width:580px}
.pl-abo .icon{color:var(--violett)}
.pl-abo b{color:var(--ink)}
.pl-abo>i{margin-left:auto;color:var(--leise);font-style:normal;font-size:20px}
.pl-tagesliste{display:none}

/* Monat am Computer: kompakte Zeilen statt Karten */
.pl-monat{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:6px}
.pl-wt-kopf{font-size:12px;font-weight:600;color:var(--leise);text-transform:uppercase;padding:0 8px 2px;letter-spacing:.04em}
@media (min-width:701px){
  .pl-monat .pl-tag{min-height:124px;padding:5px 5px 7px;border-radius:14px}
  .pl-monat .pl-kopf{padding:1px 1px 4px}
  .pl-monat .pl-wt{display:none}
  .pl-monat .pl-nr{font-size:14.5px;min-width:26px;height:26px}
  .pl-monat .pl-plus{width:24px;height:24px}
  .pl-monat .pl-tag.fremd{background:transparent;box-shadow:0 0 0 1px var(--linie)}
  .pl-monat .pl-tag.fremd .pl-nr{color:var(--leise)}
  .pl-monat .pl-inhalt{gap:2px}
  .pl-monat .pl-karte{box-shadow:none;background:transparent;border-radius:7px}
  .pl-monat .pl-karte:hover{background:var(--feld)}
  .pl-monat .pl-karte::before{top:3px;bottom:3px}
  .pl-monat .pl-link{display:block;padding:2px 4px 2px 8px}
  .pl-monat .pl-bild,.pl-monat .pl-text small,.pl-monat .pl-mehr{display:none}
  .pl-monat .pl-text{display:flex;align-items:center;gap:5px}
  .pl-monat .pl-zeile1{font-size:11.5px;flex:none;flex-direction:row-reverse;gap:4px}
  .pl-monat .pl-text b{display:block;flex:1;min-width:0;font-size:12px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .pl-monat .pl-inhalt>div.pl-karte:nth-of-type(n+5){display:none}
  .pl-monat .pl-frei{display:none}
  .pl-monat .pl-frei-summe{display:inline-block;justify-self:start;margin:2px 0 0 4px;font-size:11px;font-weight:600;color:var(--leise);border:1.2px dashed #C7C7CC;border-radius:6px;padding:0 6px}
  .pl-monat .pl-mehr-tag{font-size:11.5px;font-weight:600;padding:0 6px}
  .pl-monat .pl-anlass summary{padding:2px 6px}
  .pl-monat .pl-anlass summary small{display:none}
  .pl-monat .pl-nichts{display:none}
}
/* Ideen: unter dem Plan, erst auf sehr breiten Bildschirmen als Spalte rechts (sonst werden die Tage zu schmal) */
@media (min-width:1700px){
  .pl-rumpf{grid-template-columns:minmax(0,1fr) 290px}
  .pl-ideen{position:sticky;top:24px;max-height:calc(100vh - 48px);overflow:auto;margin-top:0;padding:16px 12px 14px}
  .pl-ideen-liste{grid-template-columns:minmax(0,1fr);gap:6px}
  .pl-ideen-sprung{display:none!important}
}
/* Woche am Computer: Bild und Uhrzeit oben, Titel über die ganze Breite */
@media (min-width:1101px){
  .pl-woche .pl-link{grid-template-columns:34px minmax(0,1fr);grid-template-areas:"bild zeile" "bild kunde" "titel titel";gap:0 8px;padding:8px 8px 9px 11px}
  .pl-woche .pl-text{display:contents}
  .pl-woche .pl-bild{grid-area:bild}
  .pl-woche .pl-zeile1{grid-area:zeile;align-self:end}
  .pl-woche .pl-text small{grid-area:kunde;align-self:start;color:var(--ink-2)}
  .pl-woche .pl-text small .pl-punkt,.pl-woche .pl-typ{display:none}
  .pl-woche .pl-text b{grid-area:titel;margin-top:7px}
}
@media (max-width:1100px) and (min-width:701px){
  .pl-woche{gap:6px}
  .pl-tag{padding:7px 5px 9px;min-height:260px}
  .pl-woche .pl-link{grid-template-columns:minmax(0,1fr);padding:7px 7px 7px 10px}
  .pl-woche .pl-bild{width:100%;height:auto;aspect-ratio:4/5}
  .pl-wt{font-size:11px}
  .pl-woche .pl-frei{display:grid;gap:1px;padding:7px 8px}
  .pl-woche .pl-frei-plus{display:none}
  .pl-woche .pl-frei b{white-space:normal;overflow-wrap:anywhere;line-height:1.25}
}

/* Planer am Handy: Tagesleiste wie im Kalender, darunter der gewählte Tag */
@media (max-width:700px){
  .pl-titelzeile{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:12px}
  .pl-titel{grid-column:1}
  .pl-neu-knopf{grid-column:2;grid-row:1;width:44px;height:44px;padding:0;justify-content:center;border-radius:50%}
  .pl-neu-knopf span{display:none}
  .pl-neu-knopf .icon{width:22px;height:22px}
  .pl-steuer{grid-column:1/-1;display:flex;flex-wrap:nowrap;gap:8px}
  .pl-zeitraum{font-size:15px}
  .pl-ansichten{flex:1;display:grid;grid-template-columns:repeat(3,1fr)}
  .pl-ansichten a{text-align:center;padding:8px 4px}
  .pl-pfeil{width:36px;height:36px}
  .pl-filter{flex-direction:column;align-items:stretch;gap:8px}
  .pl-chips{flex-wrap:nowrap;overflow-x:auto;margin:0 -16px;padding:2px 16px 4px;scrollbar-width:none}
  .pl-chips::-webkit-scrollbar{display:none}
  .pl-filter-rechts{justify-content:space-between}
  .pl-status-wahl{flex:0 1 auto;min-width:0}
  .pl-status-wahl select{max-width:100%}
  .pl-streifen{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:2px;position:sticky;top:55px;z-index:6;margin:0 -16px 12px;padding:6px 10px 8px;background:rgba(245,245,247,.9);backdrop-filter:saturate(180%) blur(20px);-webkit-backdrop-filter:saturate(180%) blur(20px);border-bottom:1px solid var(--linie-2)}
  .pl-streifen button{border:0;background:transparent;display:grid;justify-items:center;gap:3px;padding:2px 0;cursor:pointer;font-family:inherit;color:var(--ink);-webkit-tap-highlight-color:transparent}
  .pl-streifen small{font-size:11px;font-weight:600;color:var(--leise);text-transform:uppercase}
  .pl-streifen b{font:800 17px/1 var(--f-display);width:36px;height:36px;display:grid;place-items:center;border-radius:50%;transition:background .2s,color .2s}
  .pl-streifen .heute b,.pl-streifen .heute small{color:var(--violett)}
  .pl-streifen .gewaehlt b{background:var(--ink);color:#fff}
  .pl-streifen .heute.gewaehlt b{background:var(--violett);color:#fff}
  .pl-streifen .pl-punkte{display:flex}
  .pl-woche{display:block}
  .pl-woche .pl-tag{display:none}
  .pl-woche .pl-tag.gewaehlt{display:flex}
  .pl-tag,.pl-tag.vorbei{background:transparent;box-shadow:none;padding:0;min-height:0;border-radius:0}
  .pl-woche .pl-kopf{padding:0 2px 10px}
  .pl-woche .pl-wt,.pl-woche .pl-nr{display:none}
  .pl-tagname{display:block;font:800 20px/1.2 var(--f-display);letter-spacing:-.02em}
  .pl-woche .pl-plus{width:36px;height:36px;background:var(--karte);box-shadow:var(--schatten);color:var(--violett)}
  .pl-inhalt{gap:8px}
  .pl-karte{border-radius:16px;box-shadow:var(--schatten)}
  .pl-karte::before{top:14px;bottom:14px;width:4px}
  .pl-link{grid-template-columns:52px minmax(0,1fr);grid-template-areas:"bild text" "bild chip";gap:4px 12px;padding:10px 44px 10px 14px;align-items:start}
  .pl-bild{grid-area:bild;width:52px;height:65px;border-radius:10px}
  .pl-text{grid-area:text}
  .pl-link>.chip{display:inline-flex;grid-area:chip;justify-self:start;font-size:12px;padding:3px 9px}
  .pl-zeile1{font-size:13px}
  .pl-zeile1 .pl-st{display:none}
  .pl-text b{font-size:15.5px;line-height:1.3}
  .pl-text small{font-size:13px}
  .pl-mehr{top:50%;right:6px;transform:translateY(-50%);width:36px;height:36px;border-radius:10px;background:transparent}
  .pl-frei{padding:12px 14px;border-radius:16px;gap:12px}
  .pl-frei-plus{width:30px;height:30px}
  .pl-frei-plus .icon{width:17px;height:17px}
  .pl-frei b{font-size:15px}
  .pl-frei small{font-size:13px}
  .pl-anlass{border-radius:14px;font-size:14px}
  .pl-anlass summary{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 14px}
  .pl-anlass small{font-size:12.5px;flex:none}
  .pl-an-liste{padding:0 8px 10px}
  .pl-an-k{padding:10px 12px;font-size:14px;border-radius:10px}
  .pl-tag .pl-nichts{text-align:left;margin:4px 2px 0;font-size:14px}
  /* Monat: kleines Raster mit Punkten, darunter der gewählte Tag */
  .pl-monat{gap:2px 0}
  .pl-wt-kopf{text-align:center;padding:0 0 4px;font-size:11px}
  .pl-monat .pl-tag{padding:2px 0 4px;cursor:pointer;-webkit-tap-highlight-color:transparent}
  .pl-monat .pl-kopf{flex-direction:column;gap:3px;padding:0}
  .pl-monat .pl-wt,.pl-monat .pl-plus,.pl-monat .pl-inhalt,.pl-monat .pl-tagname{display:none}
  .pl-monat .pl-nr{font-size:16px;width:34px;height:34px;min-width:0;padding:0;pointer-events:none}
  .pl-monat .pl-punkte{display:flex}
  .pl-monat .pl-tag.fremd{opacity:.4}
  .pl-monat .pl-tag.heute .pl-nr{background:transparent;color:var(--violett)}
  .pl-monat .pl-tag.gewaehlt .pl-nr{background:var(--ink);color:#fff}
  .pl-monat .pl-tag.heute.gewaehlt .pl-nr{background:var(--violett)}
  .pl-tagesliste{display:grid;gap:8px;margin-top:16px;padding-top:14px;border-top:1px solid var(--linie)}
  .pl-tagesliste h3{font:800 20px/1.2 var(--f-display);margin:0 2px 4px}
  .pl-tagesliste .pl-frei-summe,.pl-tagesliste .pl-mehr-tag{display:none}
  .pl-ideen{margin-top:26px;padding:16px 14px}
  .pl-ideen-liste{grid-template-columns:minmax(0,1fr);gap:8px}
  .pl-legende{font-size:12px;gap:4px 12px}
  .pl-abo{margin-top:20px}
}
@media (pointer:coarse){.pl-status-wahl select,.pl-verschieben input{font-size:16px}}

/* Menü eines Postings und „Für welchen Kunden?“ */
.pl-dialog .dialog-inhalt{padding:24px 24px 22px}
.pl-m-kunde{font-size:13px;font-weight:600;color:var(--leise)!important;margin:0!important}
.pl-dialog h2{font-size:22px;margin:2px 0 4px}
.pl-m-wann{color:var(--ink-2)}
.pl-verschieben{display:grid;gap:12px;margin-top:16px;padding-top:16px;border-top:1px solid var(--linie)}
.pl-verschieben .feld-titel{margin:0}
.pl-schnell{display:flex;gap:6px;flex-wrap:wrap}
.pl-schnell button{border:0;background:var(--feld);border-radius:999px;padding:7px 13px;font:600 14px var(--f-body);color:var(--ink-2);cursor:pointer}
.pl-schnell button:hover{background:var(--feld-hover);color:var(--ink)}
.pl-verschieben .zwei{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.pl-verschieben label{display:grid;gap:6px;font-weight:600;font-size:14px}
.pl-verschieben input{width:100%;font:16px var(--f-body);padding:10px 12px;border:0;border-radius:12px;background:var(--feld);color:var(--ink);appearance:none;-webkit-appearance:none;min-height:44px}
.pl-verschieben input:focus{outline:none;background:#fff;box-shadow:0 0 0 4px rgba(75,59,255,.2),0 0 0 1.5px var(--violett)}
.pl-verschieben .knopf.voll{width:100%;justify-content:center}
.pl-m-knoepfe{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-top:10px}
.pl-m-knoepfe .knopf{justify-content:center;padding:10px 6px;font-size:14px;text-align:center}
.pl-neu-liste{display:grid;gap:2px;margin-top:12px;max-height:60vh;overflow:auto;margin-inline:-8px}
.pl-neu-kunde{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:12px;color:var(--ink);font-weight:600;text-decoration:none!important}
.pl-neu-kunde:hover{background:var(--feld)}
.pl-neu-kunde .kuerzel.mini{width:32px;height:32px;border-radius:9px}
.pl-neu-kunde i{margin-left:auto;color:var(--leise);font-style:normal;font-size:20px}
@media (max-width:700px){
  .pl-dialog{margin:auto 0 0;width:100%;max-width:none;border-radius:24px 24px 0 0;padding-bottom:env(safe-area-inset-bottom)}
  .pl-m-knoepfe .knopf{padding:12px 4px}
}
.pl-toast{position:fixed;left:50%;bottom:28px;transform:translateX(-50%);z-index:60;display:flex;align-items:center;gap:14px;background:rgba(29,29,31,.94);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);color:#fff;padding:8px 8px 8px 18px;border-radius:999px;font-weight:600;font-size:15px;box-shadow:0 10px 30px rgba(0,0,0,.25);animation:pl-rein .3s var(--ease) both;max-width:calc(100vw - 32px)}
@keyframes pl-rein{from{opacity:0;transform:translate(-50%,10px)}to{opacity:1;transform:translate(-50%,0)}}
.mit-menue .pl-toast{left:calc(50% + var(--seite) / 2)}
.pl-toast span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pl-toast button{flex:none;border:0;background:rgba(255,255,255,.16);color:#fff;font:600 14px var(--f-body);padding:8px 14px;border-radius:999px;cursor:pointer}
.pl-toast button:hover{background:rgba(255,255,255,.26)}
.pl-toast.fehler{background:rgba(215,0,21,.94);padding-right:18px}
@media (max-width:860px){.pl-toast,.mit-menue .pl-toast{left:50%;bottom:calc(84px + env(safe-area-inset-bottom))}}

/* Posting: Signatur und Hashtags aus dem Kundenprofil */
.caption-zusatz{justify-self:start;display:inline-flex;align-items:center;gap:6px;margin-top:-6px;border:0;background:var(--feld);border-radius:999px;padding:7px 14px 7px 10px;font:600 14px var(--f-body);color:var(--ink-2);cursor:pointer}
.caption-zusatz:hover{background:var(--feld-hover);color:var(--ink)}
.caption-zusatz .icon{width:16px;height:16px}
.caption-zusatz.ok{color:#1E7B37}
/* Sicherungen */
.sich-status{display:grid;gap:20px}
.sich-lage{display:flex;gap:14px;align-items:flex-start}
.sich-lage>span:last-child{display:grid;gap:3px;line-height:1.35;min-width:0}
.sich-lage b{font-size:17px}
.sich-lage small{color:var(--leise);font-size:14px}
.sich-lage-icon{flex:none;width:44px;height:44px;border-radius:50%;display:grid;place-items:center;background:rgba(52,199,89,.14);color:#1E7B37}
.sich-lage-icon .icon{width:24px;height:24px}
.sich-status.problem .sich-lage-icon{background:rgba(255,59,48,.12);color:var(--rot)}
.sich-status.problem .sich-lage b{color:var(--rot)}
.sich-zahlen{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.sich-zahlen div{background:var(--feld);border-radius:14px;padding:12px 14px;display:grid;gap:2px;min-width:0}
.sich-zahlen b{font:700 20px/1.2 var(--f-display);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sich-zahlen small{color:var(--leise);font-size:13px}
.sich-karte{margin-top:18px}
.sich-karte h2{margin:0 0 4px}
.sich-karte>p.leise{margin:0 0 6px}
.sich-tag h3{display:flex;align-items:center;gap:8px;margin:18px 0 4px;font-size:13px;text-transform:uppercase;letter-spacing:.05em;color:var(--leise)}
.sich-tag h3 small{font:600 11px/1 var(--f-body);background:var(--feld);color:var(--ink-2);border-radius:999px;padding:4px 7px;letter-spacing:0}
.sich-alt summary{list-style:none;cursor:pointer}
.sich-alt summary::-webkit-details-marker{display:none}
.sich-alt summary h3::after{content:"";width:7px;height:7px;border:solid var(--leise);border-width:0 2px 2px 0;transform:rotate(45deg);margin:-3px 0 0 2px;transition:transform .2s}
.sich-alt[open] summary h3::after{transform:rotate(-135deg);margin-top:3px}
.sich-liste{list-style:none;margin:0;padding:0}
.sich-zeile{display:grid;grid-template-columns:52px minmax(0,1fr) auto;align-items:center;gap:12px;padding:12px 0;border-top:1px solid var(--linie-2)}
.sich-tag .sich-zeile:first-child{border-top:0}
.sich-zeit{font:700 16px var(--f-display);font-variant-numeric:tabular-nums}
.sich-text{display:grid;gap:2px;min-width:0;line-height:1.35}
.sich-art{font-weight:600;font-size:15px}
.a-hand .sich-art{color:var(--violett)}
.a-update .sich-art{color:#B25E00}
.a-einspielen .sich-art{color:#0B7A75}
.sich-text small{color:var(--leise);font-size:13px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sich-knoepfe{display:flex;gap:6px}
.sich-knoepfe .icon{width:16px;height:16px}
.sich-leer{color:var(--leise);margin:14px 0 4px}
.sich-mehr{margin-top:18px}
.sich-mehr summary{display:flex;align-items:center;gap:12px;cursor:pointer;list-style:none}
.sich-mehr summary::-webkit-details-marker{display:none}
.sich-mehr summary>span{flex:1;display:grid;line-height:1.35}
.sich-mehr summary small{color:var(--leise);font-size:14px}
.sich-mehr summary i{font-style:normal;color:var(--violett);font-weight:600;font-size:15px}
.sich-mehr[open] summary i{color:var(--leise)}
.sich-mehr h3{font-size:16px;margin:20px 0 6px}
.sich-mehr p{margin:0 0 10px}
.sich-regeln{margin:0 0 8px;padding-left:20px;line-height:1.6;font-size:15px}
.sich-mehr .kopierfeld pre{font-size:13px;word-break:break-all}
.sich-zurueck{background:rgba(52,199,89,.1);box-shadow:none}
.sich-dialog .dialog-inhalt{display:grid;gap:12px}
.sich-dialog h2{margin:0;font-size:22px}
.sich-d-icon{width:48px;height:48px;border-radius:50%;display:grid;place-items:center;background:rgba(75,59,255,.1);color:var(--violett)}
.sich-d-icon.warn{background:rgba(255,59,48,.1);color:var(--rot)}
.sich-d-icon .icon{width:24px;height:24px}
.sich-d-titel{margin:-6px 0 0;font-weight:600;color:var(--ink-2)}
.sich-d-punkte{margin:0;padding-left:20px;display:grid;gap:6px;font-size:15px;line-height:1.45;color:var(--ink-2)}
.sich-dialog p.leise{margin:0}
.sich-wahl{display:grid;gap:8px}
.formular .sich-wahl label{display:flex;gap:12px;align-items:flex-start;background:var(--feld);border-radius:14px;padding:12px 14px;cursor:pointer;font-weight:400}
.sich-wahl input{margin:3px 0 0;accent-color:var(--violett);width:18px;height:18px;flex:none}
.sich-wahl span{display:grid;gap:2px;line-height:1.35}
.sich-wahl small{color:var(--leise);font-size:13px}
.sich-wahl label:has(input:checked){box-shadow:0 0 0 1.5px var(--violett);background:#fff}
.sich-fehler{margin:0;background:rgba(255,59,48,.1);color:#C4281C;border-radius:12px;padding:10px 14px;font-weight:600;font-size:15px}
.sich-dialog .knopf.voll{margin-top:4px}
.sich-dialog .knopf.gefahr{background:var(--rot);color:#fff}
.sich-dialog .knopf.gefahr:hover{filter:brightness(1.05);background:var(--rot)}
@media (max-width:700px){
  .sich-zahlen{gap:8px}
  .sich-zahlen div{padding:10px 12px}
  .sich-zahlen b{font-size:17px}
  .sich-zeile{grid-template-columns:46px minmax(0,1fr);row-gap:10px}
  .sich-knoepfe{grid-column:1/-1;padding-left:58px}
  .sich-knoepfe .knopf{flex:1}
  .sich-text small{white-space:normal}
  .sicherungen .titelzeile form{width:100%}
}
@media (max-width:420px){.sich-zahlen small{font-size:12px}}
.konto-sicherung{display:flex;align-items:center;gap:14px;margin-top:18px;color:var(--ink)!important;text-decoration:none!important}
.konto-sicherung>span:nth-child(2){flex:1;display:grid;gap:2px;line-height:1.35;min-width:0}
.konto-sicherung small{color:var(--leise);font-size:14px}
.konto-sicherung i{font-style:normal;color:var(--violett);font-weight:600;font-size:15px}
.konto-sicherung .sich-lage-icon{background:rgba(75,59,255,.1);color:var(--violett)}
.konto-sicherung.problem .sich-lage-icon{background:rgba(255,59,48,.12);color:var(--rot)}
/* Kundenseite: Link in den Planer; auf Handy und Tablet im Überblick erst Kennzahlen, Als Nächstes, Chat */
.kd-postings .karten-kopf{gap:8px}
.kd-postings .karten-kopf h2{margin-right:auto}
.kd-planer{display:inline-flex;align-items:center;gap:6px}
.kd-planer .icon{width:16px;height:16px}
@media (max-width:1100px){
  .kd-feld .dash-zwei,.kd-feld .dash-haupt,.kd-feld .dash-seite{display:contents}
  .kd-feld>*,.kd-feld .dash-haupt>*,.kd-feld .dash-seite>*{order:10}
  .kd-feld .kennzahlen{order:1}
  .kd-feld .kd-naechste{order:2}
  .kd-feld .chat-team-karte{order:3}
  .kd-feld .mat-mini{order:4}
  .kd-feld .anlass-karte.kurz{order:5}
}
@media (max-width:420px){.kd-planer{padding-inline:10px}}
/* Neues Posting: Bilder gleich mit auswählen */
.neu-medien{display:grid;gap:10px}
.neu-ablage{padding:18px 16px}
.neu-ablage>span{display:grid;justify-items:center;gap:4px;color:var(--ink-2)}
.neu-ablage>span .icon{width:28px;height:28px;color:var(--violett);margin-bottom:2px}
.neu-ablage b{color:var(--ink)}
.neu-ablage small{color:var(--leise);font-size:13px}
.neu-vorschau{display:grid;grid-template-columns:repeat(auto-fill,minmax(92px,1fr));gap:8px}
.neu-vorschau:empty{display:none}
.nd-kachel{position:relative;margin:0;aspect-ratio:4/5;border-radius:12px;overflow:hidden;background:var(--feld);box-shadow:inset 0 0 0 .5px rgba(0,0,0,.06)}
.nd-kachel img{width:100%;height:100%;object-fit:cover;display:block;transition:opacity .2s,filter .2s}
.nd-video{position:absolute;inset:0;display:grid;place-items:center;font-size:26px;color:var(--ink-2);background:linear-gradient(160deg,#ECECF1,#DCDCE3)}
.nd-kachel figcaption{position:absolute;left:0;right:0;bottom:0;padding:14px 6px 5px;font-size:11px;font-weight:600;color:#fff;background:linear-gradient(transparent,rgba(0,0,0,.55));white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.nd-kachel.wartet img{opacity:.75}
.nd-kachel.laedt img{opacity:.5;filter:saturate(.6)}
.nd-kachel.laedt::after{content:"";position:absolute;top:50%;left:50%;width:26px;height:26px;margin:-13px 0 0 -13px;border-radius:50%;border:2.5px solid rgba(255,255,255,.55);border-top-color:#fff;animation:nd-dreh .8s linear infinite}
@keyframes nd-dreh{to{transform:rotate(360deg)}}
.nd-kachel.fertig::after{content:"✓";position:absolute;top:6px;left:6px;width:22px;height:22px;border-radius:50%;display:grid;place-items:center;background:var(--gruen);color:#fff;font-size:13px;font-weight:700}
.nd-kachel.fehler{box-shadow:inset 0 0 0 2px var(--rot)}
.nd-kachel.fehler img{opacity:.35}
.nd-kachel.fehler figcaption{background:rgba(215,0,21,.88);white-space:normal;padding-top:5px}
.nd-weg{position:absolute;top:5px;right:5px;width:26px;height:26px;border-radius:50%;border:0;background:rgba(0,0,0,.5);color:#fff;font-size:12px;cursor:pointer;display:grid;place-items:center}
.nd-kachel.laedt .nd-weg,.nd-kachel.fertig .nd-weg{display:none}
.neu-medien-status{margin:0;font-size:14px;font-weight:600;color:var(--ink-2)}
.neu-medien-status:empty{display:none}
.neu-medien-status.fehler-text{color:#C4281C}
@media (pointer:coarse){.nd-weg{width:32px;height:32px}}

/* ---------- v27 Ruhigere Übersicht und Kunden-Reiter (14.10.2026) ---------- */
/* Hinweise: eine gruppierte Liste statt mehrerer Banner */
.hinweis-liste{background:var(--karte);border-radius:18px;box-shadow:var(--schatten);margin:0 0 18px;overflow:hidden;animation:rein .45s var(--ease) both}
.hl-zeile{position:relative;display:flex;align-items:center;gap:12px;min-height:52px;padding:10px 16px;color:var(--ink);text-decoration:none!important;font-size:15px;line-height:1.35;transition:background .15s}
.hl-zeile+.hl-zeile::before{content:"";position:absolute;top:0;left:58px;right:0;height:1px;background:var(--linie-2)}
.hl-zeile:hover{background:var(--feld)}
.hl-icon{flex:none;display:grid;place-items:center;width:30px;height:30px;border-radius:9px;background:var(--feld);font-size:15px;line-height:1}
.hl-warn .hl-icon{background:rgba(255,149,0,.15)}
.hl-schloss .hl-icon{background:rgba(255,59,48,.10)}
.hl-paket .hl-icon{background:rgba(75,59,255,.10)}
.hl-bild .hl-icon{background:rgba(52,199,89,.14)}
.hl-text{flex:1;min-width:0}
.hl-zeile b{font-weight:600;color:var(--violett);white-space:nowrap}
.hl-zeile i,.karte-fuss i,.kk-pfeil,.mat-mini>i{font-style:normal;color:var(--leise);font-size:21px;line-height:1;opacity:.7}

/* Drei Kacheln: Beschriftung oben, Zahl, kurze Erklärung */
.widgets.drei{grid-template-columns:repeat(3,minmax(0,1fr))}
.widget .w-text{order:0}
.w-unter{font-size:13px;color:var(--leise);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* Startseite: „Als Nächstes“ links, Wünsche und Anlässe rechts */
.start-raster{display:grid;grid-template-columns:minmax(0,1.7fr) minmax(300px,1fr);gap:16px;align-items:start}
.start-seite{display:grid;gap:16px;min-width:0}
.start-seite .wuensche-karte,.start-seite .demnaechst{margin:0}
.start-raster>.karte,.start-seite>.karte{animation:rein .5s var(--ease) both}
.karte .pliste+.karte-fuss,.karte .leer+.karte-fuss{margin-top:6px}
.karte-fuss{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:8px -8px -10px;padding:12px 8px;border-top:1px solid var(--linie-2);color:var(--violett);font-weight:600;font-size:15px;text-decoration:none!important;border-radius:0 0 12px 12px;transition:background .15s}
.karte-fuss:hover{background:var(--feld)}
.anlass-liste.kompakt .anlass{grid-template-columns:44px minmax(0,1fr);align-items:start;gap:12px;padding:12px 0}
.anlass-liste.kompakt .an-datum{width:44px;height:48px;border-radius:11px}
.anlass-liste.kompakt .an-datum b{font-size:18px}
.anlass-liste.kompakt .an-datum small{font-size:10px}
.anlass-liste.kompakt .an-titel b{font-size:15px}
.anlass-liste.kompakt .an-meta{font-size:13px}
.dn-leer{margin:6px 0 2px;font-size:15px}

/* Kundenliste wie in den iPhone-Einstellungen: eine Karte, Zeilen mit Trennlinie */
.kunden-raster.als-liste{grid-template-columns:minmax(0,1fr);gap:0;background:var(--karte);border-radius:var(--r-gross);box-shadow:var(--schatten);overflow:hidden}
.als-liste .kk-wrap+.kk-wrap::before{content:"";position:absolute;top:0;left:72px;right:0;height:1px;background:var(--linie-2);z-index:1}
.als-liste .kunden-karte,.kk-wrap .als-liste .kunden-karte{border-radius:0;box-shadow:none;background:none;padding:12px 16px;gap:14px;transform:none!important}
.als-liste .kunden-karte::after{display:none}
.als-liste .kunden-karte:hover{background:var(--feld);box-shadow:none}
.als-liste .kuerzel{width:42px;height:42px;border-radius:11px;font-size:15px}
.als-liste .kk-text{flex:1}
.als-liste .kk-text b{font-size:16px;font-weight:600}
.als-liste .kk-lage{flex:none;margin:0}
.als-liste .lage-chip.l-gruen{background:none;color:var(--leise);padding-right:0}
.als-liste .kk-pfeil{margin-left:44px}
.als-liste .kk-pin{top:50%;right:40px;transform:translateY(-50%);width:32px;height:32px;background:none;opacity:0;transition:opacity .15s,color .15s,background .15s}
.als-liste .kk-wrap:hover .kk-pin,.als-liste .kk-pin:focus-visible,.als-liste .kk-pin.an{opacity:1}
.als-liste .kk-pin:hover{background:var(--feld-hover)}
.als-liste .kk-pin.an{background:none;color:var(--violett)}
.touch .als-liste .kk-pin{opacity:.55;width:36px;height:36px}
.touch .als-liste .kk-pin.an{opacity:1}

/* Kunden-Seite: Reiter wie ein iOS-Segment */
.kd-reiter{position:sticky;top:12px;z-index:15;display:flex;gap:2px;width:max-content;max-width:100%;margin:0 0 18px;padding:4px;border-radius:14px;background:rgba(232,232,237,.86);backdrop-filter:saturate(180%) blur(20px);-webkit-backdrop-filter:saturate(180%) blur(20px);box-shadow:inset 0 0 0 1px rgba(0,0,0,.04);overflow-x:auto;scrollbar-width:none;animation:rein .45s var(--ease) both}
.kd-reiter::-webkit-scrollbar{display:none}
.kd-reiter a{flex:none;display:inline-flex;align-items:center;gap:6px;padding:8px 18px;border-radius:10px;color:var(--ink-2);font:600 15px/1.2 var(--f-body);text-decoration:none!important;white-space:nowrap;transition:background .2s var(--ease),color .2s,box-shadow .2s}
.kd-reiter a:hover{color:var(--ink)}
.kd-reiter a.an{background:var(--karte);color:var(--ink);box-shadow:0 1px 2px rgba(0,0,0,.08),0 3px 8px rgba(0,0,0,.06)}
.kr-zahl{display:inline-grid;place-items:center;min-width:20px;height:20px;padding:0 6px;border-radius:999px;background:rgba(0,0,0,.08);color:var(--ink-2);font:700 12px/1 var(--f-body)}
.kr-zahl.neu{background:var(--gruen);color:#fff}
.kd-felder{min-width:0}
.kd-feld{display:grid;gap:16px;align-content:start;min-width:0}
.kd-feld:not(.aktiv){display:none}
.kd-feld.aktiv{animation:auf .3s var(--ease) both}
.kd-feld>.kennzahlen,.kd-feld>.karte,.kd-feld>section,.kd-feld .mat-team{margin-top:0;margin-bottom:0}
.kennzahlen.drei{grid-template-columns:repeat(3,minmax(0,1fr))}
.anlass-karte.kurz .anlass-liste{margin-top:2px}

/* Neues Material als ruhige Zeile in der Seitenspalte */
.mat-mini{display:flex;align-items:center;gap:14px;padding:16px 18px;color:var(--ink);text-decoration:none!important;transition:transform .2s var(--ease),box-shadow .2s}
.mat-mini:hover{transform:translateY(-1px);box-shadow:var(--schatten-hoch)}
.mm-icon{flex:none;display:grid;place-items:center;width:38px;height:38px;border-radius:11px;background:rgba(52,199,89,.14);font-size:18px}
.mm-text{flex:1;display:grid;gap:1px;min-width:0}
.mm-text b{font-size:15px;font-weight:600}
.mm-text small{font-size:13px}

/* ⋯-Menü im Kopf (Pausieren) */
.mehr-menue{position:relative}
.kunde-hero:has(.mehr-menue[open]){overflow:visible;z-index:30}
.mm-liste button small{display:block;margin-top:2px;font-size:13px;font-weight:400;color:var(--leise)}
.mehr-menue>summary{list-style:none;cursor:pointer;min-width:42px;font-size:18px;line-height:1}
.mehr-menue>summary::-webkit-details-marker{display:none}
.mm-liste{position:absolute;right:0;top:calc(100% + 6px);z-index:25;min-width:220px;padding:6px;border-radius:14px;background:var(--karte);box-shadow:var(--schatten-hoch);animation:auftauchen .2s var(--ease) both}
.mm-liste form{margin:0}
.mm-liste button{display:block;width:100%;padding:11px 12px;border:0;border-radius:10px;background:none;color:var(--ink);font:600 15px var(--f-body);text-align:left;cursor:pointer}
.mm-liste button:hover{background:var(--feld)}

/* Marke breit und Infos zweispaltig */
.marke-karte.breit .farbpunkte{grid-template-columns:repeat(auto-fill,minmax(76px,1fr))}
@media (min-width:1101px){.marke-karte.breit .schriftproben{grid-template-columns:repeat(2,minmax(0,1fr))}}
.infos-raster{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;align-items:start}
.infos-raster>.karte{margin:0}

@media (max-width:1100px){
  .start-raster{grid-template-columns:minmax(0,1fr)}
  .widgets.drei{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (max-width:860px){
  .kd-reiter{top:calc(63px + env(safe-area-inset-top));width:auto;margin:0 0 14px}
  body.als-modus .kd-reiter{top:calc(111px + env(safe-area-inset-top))}
  .kd-reiter a{flex:1 0 auto;justify-content:center;padding:8px 12px}
  .infos-raster{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:700px){
  .kennzahlen.drei{grid-template-columns:repeat(2,minmax(0,1fr))}
  .kennzahlen.drei>.kz:last-child{grid-column:1/-1}
}
@media (max-width:560px){
  .hl-zeile b{display:none}
  .widgets.drei{gap:8px}
  .widgets.drei .widget{padding:12px 12px 12px;border-radius:16px}
  .widgets.drei .w-zahl{font-size:26px}
  .widgets.drei .w-text{font-size:13px}
  .widgets.drei .w-unter{display:none}
  .als-liste .kunden-karte{display:grid;grid-template-columns:42px minmax(0,1fr) auto;grid-template-areas:"k t p" "k l p";column-gap:12px;row-gap:3px;padding:11px 14px}
  .als-liste .kunden-karte>.kuerzel{grid-area:k}
  .als-liste .kk-text{grid-area:t}
  .als-liste .kk-text small{display:none}
  .als-liste .kk-lage{grid-area:l}
  .als-liste .lage-chip.l-gruen{padding-left:0}
  .als-liste .kk-pfeil{grid-area:p;margin-left:40px}
  .als-liste .kk-pin{right:34px}
  .als-liste .kk-wrap+.kk-wrap::before{left:68px}
  .kd-reiter a{font-size:14px;padding:8px 10px}
}
@media (max-width:560px){
  .kunde-hero{align-items:flex-start;gap:14px;padding:18px 16px}
  .kunde-hero .kuerzel.gross{width:56px;height:56px;border-radius:16px}
  .hero-text{flex:1 1 calc(100% - 70px)}
  .hero-text h1{font-size:26px}
  .hero-unter{font-size:14px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
  .kunde-hero .kanal-reihe{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin:10px -16px -6px 0;padding:4px 16px 8px 2px}
  .kunde-hero .kanal-reihe::-webkit-scrollbar{display:none}
  .kunde-hero .kanal{flex:none}
  .hero-ring{display:none}
  .kopf-aktionen{flex-wrap:nowrap;width:100%}
  .kopf-aktionen>*{flex:1 1 0;min-width:0}
  .kopf-aktionen>.hero-pin{display:none}
  .kopf-aktionen>.mehr-menue{flex:none}
  .kopf-aktionen .knopf:not(.nur-icon){width:100%;padding-left:10px;padding-right:10px;font-size:14.5px}
  .kopf-aktionen .knopf:not(.nur-icon) .icon{display:none}
}
@media (max-width:420px){
  .kd-reiter a{flex:1 1 auto;padding:8px 6px;font-size:13.5px;gap:4px}
  .kr-zahl{min-width:18px;height:18px;padding:0 5px;font-size:11px}
}
.touch .kd-reiter a{min-height:36px}
.touch .mehr-menue>summary{min-height:40px}
.touch .mm-liste button{min-height:46px;font-size:16px}

/* Profil bearbeiten: Bereiche wie in den iPhone-Einstellungen, immer nur ein Bereich sichtbar */
.einstellungen:has(.ed-raster){max-width:1180px}
.ed-raster{display:grid;grid-template-columns:272px minmax(0,1fr);gap:28px;align-items:start;margin-top:14px}
.ed-nav{position:sticky;top:20px;display:grid;gap:2px;padding:8px;background:var(--karte);border-radius:var(--r-gross);box-shadow:var(--schatten);animation:rein .45s var(--ease) both}
.ed-nav a{position:relative;display:flex;align-items:center;gap:12px;padding:9px 10px;border-radius:12px;color:var(--ink);text-decoration:none!important;transition:background .15s}
.ed-nav a:hover{background:var(--feld)}
.ed-nav a.an{background:color-mix(in srgb,var(--k) 12%,#fff)}
.ed-nav a.an .ed-text b{color:color-mix(in srgb,var(--k) 80%,#000)}
.ed-nav .g-icon{flex:none;width:30px;height:30px;border-radius:8px;box-shadow:none}
.ed-nav .g-icon .icon{width:17px;height:17px}
.ed-text{flex:1;display:grid;min-width:0;line-height:1.3}
.ed-text b{font-size:15px;font-weight:600}
.ed-text small{font-size:12.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ed-offen{flex:none;display:inline-grid;place-items:center;min-width:20px;height:20px;padding:0 6px;border-radius:999px;background:rgba(255,149,0,.16);color:#B25E00;font:700 12px/1 var(--f-body)}
.ed-nav i{display:none;font-style:normal;color:var(--leise);font-size:21px;line-height:1;opacity:.6}
.ed-inhalt{min-width:0}
.js-ed .ed-inhalt>.gruppe{margin-top:0}
.js-ed .ed-inhalt>.gruppe:not(.an){display:none}
.ed-zurueck{display:none}
.ed-weiter{display:flex;justify-content:flex-end;margin-top:16px}
.ed-weiter .knopf span{font-size:19px;line-height:0;margin-left:2px}
.ed-pause .z-feld{display:flex;align-items:center;justify-content:space-between;gap:14px}
.ed-pause-text{margin:0;font-size:14px}
.ed-pause .knopf{flex:none}
@media (max-width:1100px){
  .ed-raster{grid-template-columns:minmax(0,1fr);gap:0;margin-top:10px}
  .ed-nav{position:static;padding:0;gap:0;overflow:hidden}
  .ed-nav a{border-radius:0;min-height:62px;padding:11px 16px}
  .ed-nav a+a::before{content:"";position:absolute;top:0;left:58px;right:0;height:1px;background:var(--linie-2)}
  .ed-nav a.an{background:none}
  .ed-nav a.an .ed-text b{color:var(--ink)}
  .ed-nav i{display:block}
  .js-ed .ed-raster.liste .ed-inhalt{display:none}
  .js-ed .ed-raster:not(.liste) .ed-nav{display:none}
  .ed-zurueck{display:inline-flex;align-items:center;gap:4px;margin:0 0 12px;padding:6px 0;border:0;background:none;color:var(--violett);font:600 15px var(--f-body);cursor:pointer}
  .ed-weiter .knopf{width:100%}
  .js-ed .ed-raster.liste~.speicherleiste{display:none}
}
@media (max-width:560px){
  .ed-pause .z-feld{flex-direction:column;align-items:stretch}
  .ed-pause .knopf{width:100%}
}
.touch .ed-zurueck{min-height:40px}

/* Kundenansicht: eine klare Aufgabe oben, Bilder als Streifen, Rest in Reitern */
.kr-zahl.neu-o{background:var(--orange);color:#fff}
.fg-aufgabe{padding:22px 0 18px;overflow:hidden}
.fa-kopf{display:flex;align-items:center;gap:16px;padding:0 24px}
.fa-zahl{flex:none;display:grid;place-items:center;width:52px;height:52px;border-radius:16px;background:var(--orange);color:#fff;font:800 24px/1 var(--f-display);box-shadow:0 6px 16px rgba(255,149,0,.3)}
.fa-text{flex:1;min-width:0}
.fa-text h2{font-size:21px}
.fa-text p{margin:4px 0 0;font-size:15px}
.fa-los{flex:none;padding:13px 24px;font-size:16px}
.fg-streifen{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding:0 24px;padding:18px 24px 6px;scrollbar-width:thin}
.fg-mini{flex:none;width:156px;scroll-snap-align:start;display:grid;gap:3px;color:var(--ink);text-decoration:none!important}
.fg-mini .fg-bild{border-radius:14px;box-shadow:inset 0 0 0 .5px rgba(0,0,0,.08);margin-bottom:5px;transition:transform .2s var(--ease)}
.fg-mini:hover .fg-bild{transform:translateY(-2px)}
.fg-mini .fg-typ{left:8px;top:8px;padding:4px 8px;font-size:11px}
.fg-mini small{font-size:12.5px;font-weight:600}
.fg-mini b{font-size:14px;font-weight:600;line-height:1.3;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.fg-kacheln{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.fg-kacheln .chat-karte,.fg-kachel{margin:0;display:flex;align-items:center;gap:14px;padding:16px 18px;color:var(--ink);text-decoration:none!important;transition:transform .2s var(--ease),box-shadow .2s}
.fg-kachel:hover{transform:translateY(-2px);box-shadow:var(--schatten-hoch)}
.fg-kachel>i{font-style:normal;font-size:22px;color:var(--leise)}
.fg-k-foto .ck-icon{background:rgba(52,199,89,.14);color:#1E7B37}
.kd-feld>.fg-fertig,.kd-feld>.fg-wuensche,.kd-feld>.fg-liste,.kd-feld>.fg-material,.kd-feld>.fg-kontakt{margin:0}
.fg-liste h3.tag:first-of-type{margin-top:8px}
@media (max-width:860px){
  .fa-kopf{flex-wrap:wrap;padding:0 18px;gap:12px 14px}
  .fa-zahl{width:46px;height:46px;font-size:21px;border-radius:14px}
  .fa-text{flex-basis:calc(100% - 64px)}
  .fa-text h2{font-size:19px}
  .fa-los{width:100%}
  .fg-streifen{padding:16px 18px 4px;scroll-padding:0 18px}
  .fg-mini{width:136px}
  .fg-kacheln{grid-template-columns:minmax(0,1fr);gap:10px}
}

/* Push-Test: Ergebnis, ob die Nachricht im Browser angekommen ist */
.push-diagnose{margin:10px 0 0;padding:12px 14px;border-radius:14px;font-size:14.5px;line-height:1.45;color:var(--ink-2)}
.push-diagnose b{display:block;color:var(--ink);margin-bottom:2px}
.push-diagnose.ok{background:rgba(52,199,89,.10)}
.push-diagnose.fehlt{background:rgba(255,149,0,.12)}
/* Seitenleiste: lange Kundennamen kürzen, Lage-Etikett bleibt ganz */
.sl-kunden{grid-template-columns:minmax(0,1fr)}
.sl-k,.sl-kunden a{min-width:0}
.sl-kunden .lage{flex:none;overflow:visible;text-overflow:clip}

/* Material nach Bereichen und Datum (v28) */
.mat-filter{display:flex;flex-wrap:wrap;gap:6px;margin:2px 0 14px}
.mat-filter[hidden]{display:none}
.mat-f{display:inline-flex;align-items:center;gap:6px;height:34px;padding:0 13px;border:0;border-radius:999px;background:#fff;box-shadow:0 0 0 .5px rgba(0,0,0,.1);font:600 13.5px var(--f-body);color:var(--ink-2);white-space:nowrap;cursor:pointer;flex:none;transition:background .15s,color .15s}
.mat-f:hover{background:var(--feld)}
.mat-f small{color:var(--leise);font-weight:700;font-size:12px}
.mat-f small:empty{display:none}
.mat-f.an{background:var(--ink);color:#fff;box-shadow:none}
.mat-f.an small{color:rgba(255,255,255,.7)}
.mat-f[hidden]{display:none}
.mat-team .mat-filter{margin-top:-2px}
.mat-tag{grid-column:1/-1;margin:10px 0 -4px;font:700 12px var(--f-body);letter-spacing:.04em;text-transform:uppercase;color:var(--leise)}
.mat-tag:first-child{margin-top:0}
.mat-ziel{display:block;margin-top:4px;color:var(--ink-2)!important;font-weight:600}
.mat-kat{justify-self:start;margin-top:5px;max-width:100%}
.mat-kat select{appearance:none;-webkit-appearance:none;max-width:100%;border:0;border-radius:999px;background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%238E8E93' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat right 9px center;padding:5px 24px 5px 10px;font:600 12.5px var(--f-body);color:var(--ink-2);box-shadow:0 0 0 .5px rgba(0,0,0,.1);cursor:pointer;text-overflow:ellipsis}
.mat-kat select:focus-visible{outline:2px solid var(--violett);outline-offset:1px}
.mat-kat.nur{display:inline-block;padding:3px 9px;border-radius:999px;background:#fff;font:600 12px var(--f-body);color:var(--ink-2)}
.mat-alle{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:14px;padding:12px 14px;border-radius:14px;background:color-mix(in srgb,var(--violett) 8%,#fff);font-size:14px;font-weight:600}
.mat-alle[hidden]{display:none}
@media (max-width:640px){
  .fg-material .mat-filter{flex-wrap:nowrap;overflow-x:auto;margin-left:-16px;margin-right:-16px;padding:2px 16px 4px;scrollbar-width:none;-webkit-overflow-scrolling:touch;scroll-padding:0 16px}
  .fg-material .mat-filter::-webkit-scrollbar{display:none}
  .mat-alle{flex-direction:column;align-items:stretch;text-align:center}
}
.touch .mat-kat select,.touch .mat-f{font-size:16px}
.touch .mat-kat select{padding:6px 26px 6px 11px}
.touch .mat-f{height:38px}

/* Chat modern (v28): kompaktere Blasen mit Uhrzeit in der Zeile, Tag bleibt oben stehen, Fotos randlos, „Nach unten“-Knopf */
.chat{height:calc(100vh - 72px);height:calc(100dvh - 72px);max-width:960px}
.chat-kopf{min-height:68px}
.chat-verlauf{background:#F4F4F7;scroll-behavior:auto}
.cn-tag{position:sticky;top:6px;z-index:3;margin:14px 0 8px;text-transform:none;letter-spacing:0}
.cn-tag span{display:inline-block;padding:5px 12px;background:rgba(255,255,255,.92);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);box-shadow:0 0 0 .5px rgba(0,0,0,.06),0 1px 4px rgba(0,0,0,.06);font-size:12.5px;color:var(--ink-2)}
.cn{margin-top:8px}
.cn.folge{margin-top:2px}
.cn-blase{padding:7px 12px 7px;border-radius:19px}
.cn-blase.mit-text time{position:absolute;right:11px;bottom:6px;margin:0;line-height:1.2}
.cn-blase.mit-text p::after{content:'';display:inline-block;width:38px;height:1px}
.cn-blase:not(.mit-text) time{margin-top:2px}
.cn.eigen .cn-blase{box-shadow:0 1px 2px rgba(75,59,255,.18)}
.cn.links .cn-blase{box-shadow:0 0 0 .5px rgba(0,0,0,.05),0 1px 2px rgba(0,0,0,.06)}
.cn-name{font-weight:700;font-size:12.5px;margin-bottom:2px}
.cn-blase p a{text-underline-offset:2px}
/* Fotos und Videos füllen die Blase */
.mit-bild,.mit-video{padding:3px!important}
.mit-bild .ca,.mit-video .ca{margin:0}
.mit-bild .ca-bild,.mit-video .ca-video,.mit-video .ca-video-an{border-radius:16px}
.mit-bild .cn-name,.mit-video .cn-name{padding:4px 9px 2px}
.mit-bild p,.mit-video p{padding:5px 9px 3px!important;margin:0!important}
.mit-bild.mit-text time,.mit-video.mit-text time{right:12px;bottom:7px;padding:0!important}
.mit-bild:not(.mit-text):not(.nur-medien) time,.mit-video:not(.mit-text):not(.nur-medien) time{padding:2px 9px 3px!important}
.nur-medien time{right:10px;bottom:10px}
.cn-sys span{white-space:nowrap;flex-wrap:nowrap;max-width:100%;overflow:hidden;text-overflow:ellipsis;padding:4px 11px;border-radius:999px}
.cn-sys{margin:8px 0}
/* Eingabe: schwebendes Feld, Glas-Hintergrund */
.chat-eingabe{background:rgba(255,255,255,.9);-webkit-backdrop-filter:saturate(180%) blur(20px);backdrop-filter:saturate(180%) blur(20px)}
.chat-eingabe textarea{border-color:transparent;background:#F0F0F4}
.ce-rund,.chat-senden,.cn-faden,.cn-mehr,.chat-tabs button,.chat-runter{touch-action:manipulation;-webkit-tap-highlight-color:transparent}
.ce-nur{display:flex;align-items:center;gap:10px;margin:0;padding:10px 12px;border-radius:14px;background:rgba(0,0,0,.04);font-size:14px;color:var(--ink-2)}
.ce-nur .icon{flex:none;width:18px;height:18px;color:var(--leise)}
.ce-nur~.ce-zeile{display:none}
/* Nach unten springen, mit Zahl neuer Nachrichten */
.chat-runter{position:absolute;right:16px;bottom:84px;z-index:4;width:40px;height:40px;border:0;border-radius:50%;display:grid;place-items:center;background:#fff;color:var(--ink-2);box-shadow:0 0 0 .5px rgba(0,0,0,.08),0 4px 14px rgba(0,0,0,.12);cursor:pointer;opacity:0;transform:translateY(8px) scale(.9);pointer-events:none;transition:opacity .18s,transform .22s var(--ease)}
.chat-runter.da{opacity:1;transform:none;pointer-events:auto}
.chat-runter svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.chat-runter b{position:absolute;top:-5px;right:-5px;min-width:20px;height:20px;padding:0 5px;border-radius:999px;background:var(--violett);color:#fff;font:700 11.5px/20px var(--f-body);text-align:center}
.chat-runter b:empty{display:none}
@media (max-width:860px){
  .chat{height:100vh;height:var(--chat-h,100dvh)}
  .chat-kopf{min-height:0;background:rgba(250,250,252,.9)}
  .cn{max-width:84%}
  .chat-runter{right:12px;bottom:calc(76px + env(safe-area-inset-bottom))}
}
@media (min-width:1280px){.cn{max-width:min(70%,560px)}}

/* Testmodus (v29) */
.als-leiste.test-an{background:#FF9500;color:#1D1D1F}
.als-leiste.test-an .als-text .icon{color:#1D1D1F}
.als-leiste.test-an .als-zurueck{background:#1D1D1F;color:#fff}
.als-test{border:1px solid rgba(255,255,255,.35);border-radius:999px;background:none;color:#fff;font:700 13px var(--f-body);padding:7px 14px;cursor:pointer;white-space:nowrap}
.als-test:hover{background:rgba(255,255,255,.12)}
.cn.test .cn-blase{outline:1.5px dashed rgba(255,149,0,.9);outline-offset:2px}
.cn.test .cn-inhalt::before{content:'Test';align-self:inherit;margin:0 4px 2px;font:700 10.5px var(--f-body);letter-spacing:.05em;text-transform:uppercase;color:#B45F00}
.mat-kachel.test{outline:1.5px dashed rgba(255,149,0,.9);outline-offset:-1.5px}
.mat-kachel.test::before{content:'Test';position:absolute;top:8px;right:8px;z-index:2;padding:3px 8px;border-radius:999px;background:#FF9500;color:#fff;font:700 11px var(--f-body)}
.ce-nur{flex-wrap:wrap}
.ce-nur span{flex:1;min-width:200px}
.test-bericht .dialog-inhalt{max-width:520px}
.test-bericht h3{margin:16px 0 6px;font-size:15px}
.tb-liste{list-style:none;margin:0;padding:0;display:grid;gap:6px;max-height:40vh;overflow:auto}
.tb-liste li{display:flex;gap:10px;font-size:14px;line-height:1.4}
.tb-liste time{flex:none;color:var(--leise);font-variant-numeric:tabular-nums}
@media (max-width:560px){.als-test{padding:7px 11px}}

/* Tablet und Touch. html.touch setzt app.js: auch für iPad mit Tastatur/Trackpad oder Stift und Android-Tablets mit Stift,
   die wie ein Computer „hover“ melden. Nichts darf nur mit der Maus erreichbar sein, Tippflächen rund 34 px oder mehr. */
.touch .pl-mehr,.touch .pl-plus{opacity:1}
.touch .nur-maus{display:none}
.touch .nur-touch{display:inline}
.touch .sl-pin{display:none}
.touch .sl-k:hover .lage{visibility:visible}
.touch .cn-mehr{display:none}
.touch .pl-plus{width:36px;height:36px}
.touch .pl-mehr{width:34px;height:34px;top:2px;right:2px}
@media (min-width:701px){.touch .pl-monat .pl-plus{width:32px;height:32px}.touch .pl-monat .pl-anlass summary{padding:6px}}
.touch .mat-aktionen{top:3px;right:3px}
.touch .mat-aktionen a,.touch .mat-aktionen button{width:34px;height:34px}
.touch .mat-name{padding-right:70px}
.touch .mini-aktionen{gap:4px}
.touch .mini-aktionen button{min-width:36px;min-height:34px;padding:6px 10px;font-size:13px}
.touch .medium .mini{padding:8px 4px}
.touch .sl-sort{padding:9px 10px}
.touch .mw-weg,.touch .weg-mini,.touch .slot-weg{width:34px;height:34px;flex:none}
.touch .formular .mf select.rolle,.touch .formular .sf select.rolle{min-height:34px}
.touch .formular .mw-art-wahl,.touch .formular .bw-art-wahl{min-height:34px}
.touch .info,.touch .link-knopf{position:relative}
.touch .info::after{content:"";position:absolute;inset:-11px;border-radius:50%}
.touch .link-knopf::after{content:"";position:absolute;inset:-8px -4px}
/* Woche am Touch-Gerät quer: Karten wie am Tablet hochkant (Bild oben), damit der ⋯-Knopf nichts verdeckt */
@media (min-width:1101px){
  .touch .pl-woche .pl-link{grid-template-columns:minmax(0,1fr);grid-template-areas:none;padding:7px 7px 8px 10px}
  .touch .pl-woche .pl-text{display:grid}
  .touch .pl-woche .pl-bild,.touch .pl-woche .pl-zeile1,.touch .pl-woche .pl-text small,.touch .pl-woche .pl-text b{grid-area:auto}
  .touch .pl-woche .pl-bild{width:100%;height:auto;aspect-ratio:4/5}
  .touch .pl-woche .pl-text b{margin-top:0}
}
@media (min-width:861px){
  .touch .cn-menue{width:272px}
  .touch .cn-menue button{min-height:46px;font-size:16px}
}

/* Testumgebung: kleine Marke unten links */
.test-marke{position:fixed;left:10px;bottom:10px;z-index:9999;background:#FFD60A;color:#111;font:700 12px/1 system-ui,sans-serif;padding:6px 10px;border-radius:999px;pointer-events:none;box-shadow:0 1px 4px rgba(0,0,0,.2)}
.vorschau-marke{background:#FF9500;color:#fff}
@media (max-width:860px){.test-marke{bottom:calc(80px + env(safe-area-inset-bottom))}}
@media (max-width:1100px){.seitenkopf:has(~ .js-ed .ed-raster:not(.liste)) .sk-zeile p{display:none}}
.fg-oben{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:14px}
.fg-oben .zurueck{margin:0}
.fg-fortschritt{font-size:14px;font-weight:600;color:var(--leise)}