/* Selbst gehostete Fonts (OFL) — kein Fremd-CDN. Space Grotesk = Display,
   Inter = Fließtext, JetBrains Mono = technische Labels. */
@font-face{font-family:'Space Grotesk';font-style:normal;font-weight:500;font-display:swap;src:url('../fonts/space-grotesk-latin-500-normal.woff2') format('woff2')}
@font-face{font-family:'Space Grotesk';font-style:normal;font-weight:600;font-display:swap;src:url('../fonts/space-grotesk-latin-600-normal.woff2') format('woff2')}
@font-face{font-family:'Space Grotesk';font-style:normal;font-weight:700;font-display:swap;src:url('../fonts/space-grotesk-latin-700-normal.woff2') format('woff2')}
@font-face{font-family:'Inter';font-style:normal;font-weight:400;font-display:swap;src:url('../fonts/inter-latin-400-normal.woff2') format('woff2')}
@font-face{font-family:'Inter';font-style:normal;font-weight:500;font-display:swap;src:url('../fonts/inter-latin-500-normal.woff2') format('woff2')}
@font-face{font-family:'Inter';font-style:normal;font-weight:600;font-display:swap;src:url('../fonts/inter-latin-600-normal.woff2') format('woff2')}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:400;font-display:swap;src:url('../fonts/jetbrains-mono-latin-400-normal.woff2') format('woff2')}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:600;font-display:swap;src:url('../fonts/jetbrains-mono-latin-600-normal.woff2') format('woff2')}
:root{
  --space:#070B16; --space2:#0B1424; --panel:#0E1A2E; --panelb:#122142;
  --line:#1e3050; --line2:#263c62;
  --light:#FFD79A; --cyan:#3ba7ff; --cyan-d:#2f8fe0;
  --ink:#e8eefb; --muted:#8ea0c0; --muted2:#5f7396;
  --j:#FFD79A; --m:#3ba7ff; --s:#7C9CF2; --p:#4FD1A5;
  --ok:#4FD1A5; --warn:#F2C14E; --err:#F2708A;
  /* ---- Bewegungs- & Form-Tokens (Hochglanz-Panels; M3-Easing/-Timing) ---- */
  --ease-standard:cubic-bezier(.2,0,0,1);
  --ease-decel:cubic-bezier(.05,.7,.1,1);      /* Eintritt (auf die Bühne) */
  --ease-accel:cubic-bezier(.3,0,.8,.15);      /* Austritt (von der Bühne) */
  --ease-spring:cubic-bezier(.2,.9,.3,1.08);   /* dezente Federung */
  --dur-enter:250ms; --dur-exit:200ms; --dur-menu:180ms;
  --radius-sheet:24px; --radius-modal:22px; --radius-menu:16px;
  --scrim:rgba(4,9,18,.6); --scrim-blur:6px;
  --elev-3:0 8px 24px -8px rgba(0,0,0,.5);
  --elev-5:0 28px 90px -20px rgba(0,0,0,.72);
  --safe-b:env(safe-area-inset-bottom,0px); --safe-t:env(safe-area-inset-top,0px);
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{font-family:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;
  background:radial-gradient(140% 80% at 82% -10%,#0d1a33 0,transparent 55%),
             radial-gradient(120% 90% at 5% 110%,#0a1526 0,transparent 50%),var(--space);
  color:var(--ink);line-height:1.5;overflow:hidden}
.mono{font-family:'JetBrains Mono',ui-monospace,monospace}
button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit}
input,textarea,select{font-family:inherit}
a{color:var(--cyan)}

/* Visible keyboard focus everywhere (accessibility). */
:focus-visible{outline:2px solid var(--cyan);outline-offset:2px;border-radius:6px}

/* ===== LOGIN ===== */
/* Login: Content beginnt OBEN (nicht mittig), scrollt bei Bedarf. Sichere
   Ränder für Notch/Statusleiste am Handy. */
#login{position:fixed;inset:0;display:flex;align-items:flex-start;justify-content:center;
  padding:max(24px,env(safe-area-inset-top,0px)) 16px calc(40px + env(safe-area-inset-bottom,0px));z-index:50;overflow:auto}
/* Mobil: eine Spalte. Desktop (ab 900px): Split-Screen — Hero links, Anmeldung
   rechts, Fundraising-Siegel zentriert darunter über beide Spalten. */
.logincard{width:100%;max-width:400px;margin:auto 0;background:linear-gradient(180deg,var(--panel),#0b1626);
  border:1px solid var(--line);border-radius:18px;padding:30px 26px;box-shadow:0 30px 80px -20px rgba(0,0,0,.6);
  display:grid;grid-template-columns:1fr;gap:8px;align-content:start}
.login-hero{display:flex;flex-direction:column;align-items:center;text-align:center;gap:12px;margin-bottom:8px}
.brand{display:flex;align-items:center;justify-content:center;gap:11px;margin-bottom:24px}
/* ===== Start-Splash: großes pulsierendes Marken-Zeichen vor dem Login =====
   Zeigt ~3,5 s lang den atmenden Kern mit weichen Sonar-Ringen groß in der
   Bildmitte, blendet dann mit einem weichen Licht-Aufglühen ins Login über.
   Fällt per reiner CSS-Animation von selbst weg (kein JS-Zwang), damit es den
   Nutzer nie einsperrt; bei aktiver Sitzung überspringt boot() den Splash. */
#sxsplash{position:fixed;inset:0;z-index:100000;display:grid;place-content:center;justify-items:center;
  gap:26px;background:#070B16;
  animation:sxsplashOut .8s ease 3.15s forwards}
#sxsplash::before{content:"";position:absolute;top:calc(50% - 40px);left:50%;width:520px;height:520px;
  transform:translate(-50%,-50%);pointer-events:none;border-radius:50%;
  background:radial-gradient(circle,color-mix(in srgb,var(--cyan) 30%,transparent),transparent 62%);
  filter:blur(14px);opacity:.5;animation:sxsplashBloom 3.9s ease-in-out both}
#sxsplash .sxsplash-mark{position:relative;width:220px;height:220px;display:grid;place-items:center;
  animation:bmIntro .85s var(--ease-decel,cubic-bezier(.05,.7,.1,1)) both}
#sxsplash .bm-core{width:150px;height:150px}
#sxsplash .bm-glow{width:170px;height:170px}
#sxsplash .bm-ring{width:150px;height:150px}
#sxsplash .sxsplash-word{position:relative;z-index:2;width:250px;max-width:64vw;height:auto;opacity:0;
  filter:drop-shadow(0 6px 22px rgba(0,0,0,.6));animation:sxsplashWord 1s ease .55s both}
@keyframes sxsplashWord{from{opacity:0;transform:translateY(10px)}to{opacity:.97;transform:none}}
@keyframes sxsplashBloom{0%{opacity:.25}62%{opacity:.55}88%{opacity:.9}100%{opacity:.9}}
@keyframes sxsplashOut{to{opacity:0;visibility:hidden;pointer-events:none}}
#sxsplash.is-skip{display:none}
@media(prefers-reduced-motion:reduce){
  #sxsplash{animation:sxsplashOut .5s ease 1.1s forwards}
  #sxsplash::before{animation:none;opacity:.5}
  #sxsplash .sxsplash-mark,#sxsplash .sxsplash-word{animation:none;opacity:1}
}

/* ===== Marken-Zeichen: der pulsierende Kreis (Startbildschirm) =====
   Der MagnaX-Kern atmet und sendet weiche Sonar-Ringe aus; das Icon sitzt
   ruhig in der Mitte. Sauberer Fade-in beim Start (kein Wisch/Strahl nach links). */
.brandmark{position:relative;width:138px;height:138px;margin:4px auto 14px;display:grid;place-items:center;
  animation:bmIntro .7s var(--ease-decel, cubic-bezier(.05,.7,.1,1)) both}
.bm-core{position:relative;z-index:2;width:92px;height:92px;border-radius:50%;object-fit:cover;
  background:radial-gradient(circle at 50% 36%,#12294a,#070b16);
  box-shadow:0 0 44px -6px var(--cyan),0 10px 30px -8px rgba(0,0,0,.75),inset 0 0 0 1.5px rgba(59,167,255,.6);
  animation:bmBreath 3.4s ease-in-out infinite}
.bm-glow{position:absolute;z-index:1;width:104px;height:104px;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle,color-mix(in srgb,var(--cyan) 60%,transparent),transparent 66%);
  filter:blur(10px);animation:bmBreath 3.4s ease-in-out infinite}
.bm-ring{position:absolute;z-index:0;width:92px;height:92px;border-radius:50%;pointer-events:none;
  border:1.5px solid color-mix(in srgb,var(--cyan) 75%,transparent);opacity:0;
  animation:bmPulse 3.4s cubic-bezier(0,.2,.5,1) infinite}
.bm-ring2{animation-delay:1.13s}
.bm-ring3{animation-delay:2.26s}
@keyframes bmIntro{from{opacity:0;transform:scale(.82)}to{opacity:1;transform:none}}
@keyframes bmBreath{0%,100%{transform:scale(1)}50%{transform:scale(1.05)}}
@keyframes bmPulse{0%{transform:scale(.9);opacity:.6}70%{opacity:0}100%{transform:scale(2.15);opacity:0}}
@media(prefers-reduced-motion:reduce){
  .brandmark,.bm-core,.bm-glow{animation:none}
  .bm-ring{animation:none;opacity:.25;transform:scale(1.6)}
}
.brandlogo{width:158px;max-width:72%;height:auto;display:block;margin:0 auto}
.login-claim{color:var(--muted);font-size:13.5px;line-height:1.5;max-width:32ch}
.login-claim b{color:var(--cyan)}
/* Life-Edition: eigener Claim + Marken-Badge, rein hinter dem data-edition-Flag.
   Company/Default bleibt unberührt sichtbar; Life-Elemente sind Standard aus. */
.login-claim-life{color:var(--muted);font-size:13.5px;line-height:1.5;max-width:32ch;display:none}
.login-claim-life b{color:var(--cyan)}
.edition-badge{display:none;padding:2px 10px;border:1px solid var(--cyan);border-radius:999px;color:var(--cyan);font-size:11px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;line-height:1.4;max-width:100%}
[data-edition="life"] .login-claim{display:none}
[data-edition="life"] .login-claim-life{display:block}
[data-edition="life"] .edition-badge{display:inline-block}
.login-main{min-width:0}
@media(min-width:900px){
  #login{align-items:center}
  .logincard{max-width:940px;grid-template-columns:1fr 1fr;gap:16px 42px;padding:44px 46px;align-items:center}
  .login-hero{align-items:flex-start;text-align:left;margin-bottom:0;grid-row:span 1}
  .brandlogo{width:240px;max-width:100%;margin:0}
  .login-claim,.login-claim-life{font-size:15px;max-width:34ch}
  .login-main{align-self:center}
  .loginfund{grid-column:1/3;margin-top:6px}
}
.dot{position:relative;width:30px;height:30px;flex:none}
.dot::before{content:"";position:absolute;inset:0;border-radius:50%;
  background:radial-gradient(circle,#fff 0,var(--light) 34%,rgba(255,215,154,.15) 70%,transparent 72%);
  box-shadow:0 0 22px 4px rgba(255,215,154,.35)}
.bn{font-family:'Space Grotesk',sans-serif;font-weight:700;letter-spacing:.05em;font-size:15px}
.bn b{color:var(--cyan)}
.logincard h1{font-family:'Space Grotesk',sans-serif;font-size:21px;font-weight:600;margin-bottom:5px}
.logincard .sub{color:var(--muted);font-size:13px;margin-bottom:22px}
.field{margin-bottom:14px}
.field label{display:block;font-size:12px;color:var(--muted);margin-bottom:5px}
.field input,.field textarea,.field select{width:100%;background:#0a1424;border:1px solid var(--line);border-radius:9px;
  padding:11px 13px;color:var(--ink);font-size:14px}
.field textarea{resize:vertical;min-height:150px;line-height:1.6}
.field input:focus,.field textarea:focus,.field select:focus{outline:none;border-color:var(--cyan-d)}
.field select{appearance:none;-webkit-appearance:none;cursor:pointer;padding-right:38px;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%238ea0c0' stroke-width='2'><path d='M6 9l6 6 6-6'/></svg>");
  background-repeat:no-repeat;background-position:right 13px center}
.btn{width:100%;background:linear-gradient(90deg,var(--cyan-d),var(--cyan));color:#03212a;font-weight:600;
  padding:12px;border-radius:9px;font-size:14px;margin-top:6px;transition:filter .15s}
.btn:hover{filter:brightness(1.08)}
.btn[disabled]{opacity:.55;cursor:not-allowed;filter:none}
.who{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:18px}
.who button{min-width:0;background:var(--space2);border:1px solid var(--line);border-radius:8px;
  padding:10px 6px;font-size:13px;color:var(--muted);transition:.15s}
.who button.on{border-color:var(--pc);color:var(--ink);background:#111f36}
.stay{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:12.5px;color:var(--muted);margin:4px 0 2px;cursor:pointer}
.stay input{width:auto;flex:none;accent-color:var(--cyan)}
.stayhint{color:var(--muted2);font-size:11px;flex-basis:100%;padding-left:24px}
.vischips{display:flex;gap:7px;flex-wrap:wrap}
.vischip{border:1px solid var(--line);background:var(--space2);color:var(--muted);border-radius:20px;
  padding:6px 12px;font-size:12px;cursor:pointer;transition:.12s;user-select:none}
.vischip.on{color:#06121f;font-weight:600;border-color:transparent}
.vischip.all.on{background:var(--cyan);color:#03212a}
.loginnote{font-size:11px;color:var(--muted2);margin-top:16px;line-height:1.55}
.loginnote b{color:var(--warn)}
/* Auto-Info-Popup auf der Login-Seite (von Alex) */
.lnotice{position:fixed;inset:0;z-index:60;display:none;align-items:center;justify-content:center;padding:20px;background:rgba(4,8,20,.72);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}
.lnotice.show{display:flex;animation:amIn .25s}
.lnotice-card{position:relative;max-width:440px;width:100%;background:var(--panel);border:1px solid var(--line2);border-radius:20px;padding:26px 24px 22px;box-shadow:0 30px 80px -30px rgba(0,0,0,.8)}
.lnotice-close{position:absolute;top:8px;right:12px;background:none;border:none;color:var(--muted);font-size:26px;line-height:1;cursor:pointer}
.lnotice-close:hover{color:var(--ink)}
.lnotice-h{font-family:'Space Grotesk',sans-serif;font-size:20px;font-weight:600;margin-bottom:12px;padding-right:22px}
.lnotice-b p{font-size:14px;line-height:1.6;color:var(--ink);margin-bottom:10px}
.lnotice-b b{color:var(--light)}
.lnotice-sig{color:var(--muted)!important;margin-top:2px}
.lnotice-ok{width:auto;padding:10px 22px;margin-top:8px}
/* ---- Login-Hinweis: Overhaul (Avatar + Sektionen + Kästchen + Unterschrift) ---- */
.lnotice-wide{max-width:520px;max-height:calc(100vh - 40px);overflow-y:auto;padding-top:64px}
.lnotice-status{font-size:12.5px;color:var(--muted);margin-top:10px;min-height:16px}
.lnotice-status.ok{color:#4fd1a5}.lnotice-status.err{color:#ff9a9a}
/* Chatbot-Kopf */
.lnhero{position:relative;display:flex;align-items:flex-start;gap:14px;margin:-40px 0 16px}
.lnhero-face{position:relative;flex:0 0 auto;width:78px;height:78px;border-radius:50%;overflow:hidden;
  border:2px solid rgba(120,180,255,.55);box-shadow:0 8px 26px -8px rgba(20,60,140,.7),0 0 0 4px rgba(10,20,40,.6);
  background:linear-gradient(160deg,#1a2c4c,#0e1a30)}
.lnhero-face img{width:100%;height:100%;object-fit:cover;object-position:center top;display:block}
.lnhero-init{display:none;position:absolute;inset:0;align-items:center;justify-content:center;
  font-family:'Space Grotesk',sans-serif;font-size:34px;font-weight:700;color:#bcd6ff}
.lnhero-face.lnhero-fallback{display:flex}.lnhero-face.lnhero-fallback .lnhero-init{display:flex}
.lnhero-bubble{position:relative;flex:1 1 auto;min-width:0;background:linear-gradient(150deg,rgba(40,90,180,.20),rgba(120,70,200,.16));
  border:1px solid rgba(120,160,255,.35);border-radius:6px 16px 16px 16px;padding:12px 14px;
  box-shadow:0 6px 22px -12px rgba(40,80,180,.6)}
.lnhero-bubble:before{content:"";position:absolute;left:-8px;top:14px;width:0;height:0;
  border:8px solid transparent;border-right-color:rgba(120,160,255,.35);border-left:0}
.lnhero-slogan{font-family:'Space Grotesk',sans-serif;font-size:15px;font-weight:600;line-height:1.4;color:var(--ink)}
.lnhero-by{font-size:11px;color:var(--muted);margin-top:5px;letter-spacing:.3px}
/* Sektionen */
.lnsec{border:1px solid var(--line2);border-radius:14px;padding:14px 15px;margin-bottom:12px;background:rgba(255,255,255,.015)}
.lnsec-immune{border-color:rgba(150,110,240,.4);background:linear-gradient(160deg,rgba(90,60,180,.10),rgba(30,50,110,.06))}
.lnsec-h{font-family:'Space Grotesk',sans-serif;font-size:15px;font-weight:600;margin-bottom:8px}
.lnsec p{font-size:13.5px;line-height:1.6;color:var(--ink);margin:0 0 8px}
.lnhow{background:rgba(10,16,32,.4);border-radius:10px;padding:10px 12px;font-size:13px!important;line-height:1.7!important}
/* Futuristische Kästchen (nicht grau) */
.lncheck{display:flex;align-items:center;gap:11px;cursor:pointer;margin-top:6px;user-select:none;-webkit-user-select:none}
.lncheck input{position:absolute;opacity:0;width:0;height:0}
.lncheck-box{flex:0 0 auto;width:26px;height:26px;border-radius:8px;position:relative;
  background:linear-gradient(160deg,#0f1b32,#0a1424);border:1.5px solid rgba(110,150,230,.6);
  box-shadow:inset 0 0 10px rgba(60,120,230,.15);transition:all .2s}
.lncheck-box:after{content:"";position:absolute;left:8.5px;top:4px;width:6px;height:12px;
  border:solid #fff;border-width:0 2.5px 2.5px 0;transform:rotate(45deg) scale(0);opacity:0;transition:all .18s}
.lncheck input:checked+.lncheck-box{border-color:transparent;
  background:linear-gradient(135deg,#3ba7ff,#8b5cff);box-shadow:0 0 0 2px rgba(90,140,255,.25),0 0 16px rgba(90,120,255,.55)}
.lncheck input:checked+.lncheck-box:after{transform:rotate(45deg) scale(1);opacity:1}
.lncheck input:focus-visible+.lncheck-box{outline:2px solid #7db0ff;outline-offset:2px}
.lnsec-immune .lncheck input:checked+.lncheck-box{background:linear-gradient(135deg,#a06bff,#5a8bff);box-shadow:0 0 0 2px rgba(150,110,240,.28),0 0 16px rgba(150,110,240,.6)}
.lncheck-txt{font-size:13.5px;font-weight:600;color:var(--ink)}
/* Unterschrift */
.lnsign{border:1px dashed var(--line2);border-radius:14px;padding:13px 14px;margin-top:2px}
.lnsign-pad-wrap{position:relative;margin:6px 0 8px}
.lnsign-pad{width:100%;height:120px;display:block;border-radius:10px;touch-action:none;cursor:crosshair;
  background:linear-gradient(180deg,#f7fbff,#eef4fd);border:1px solid var(--line2)}
.lnsign-hint{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  pointer-events:none;color:#6a86b5;font-size:13px;transition:opacity .2s}
.lnsign-hint.hide{opacity:0}
.lnsign-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.lnsign-clear{background:none;border:1px solid var(--line2);color:var(--muted);border-radius:8px;padding:6px 12px;font-size:12.5px;cursor:pointer}
.lnsign-clear:hover{color:var(--ink);border-color:var(--light)}
.lnsign-or{font-size:12.5px;color:var(--muted)}
.lnsign-name{flex:1 1 140px;min-width:0;background:var(--panel);border:1px solid var(--line2);border-radius:8px;
  padding:8px 11px;color:var(--ink);font-size:14px}
.lnsign-name:focus{outline:none;border-color:#5a8bff;box-shadow:0 0 0 2px rgba(90,140,255,.2)}
.lnotice-ok:disabled{opacity:.45;cursor:not-allowed;filter:grayscale(.3)}
/* X ist jetzt immer sichtbar (schließt nur für diese Sitzung). */
.lnotice-close{display:block}
/* Fußzeile: „Nicht mehr anzeigen" (dauerhaft) + „Bestätigen" — bricht mobil um. */
.lnotice-foot{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-top:8px}
.lnotice-never{width:auto;padding:10px 18px}
@media (max-width:420px){.lnhero-face{width:64px;height:64px}.lnhero-slogan{font-size:14px}}
/* Administrator-Notiz (weiche Rechte-Schranke, futuristisch, mit Avatar) */
.adminnote{position:fixed;inset:0;z-index:80;display:none;align-items:center;justify-content:center;padding:20px;background:rgba(4,8,20,.72);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}
.adminnote.show{display:flex;animation:amIn .22s}
.adminnote-card{position:relative;max-width:460px;width:100%;background:var(--panel);border:1px solid var(--line2);border-radius:20px;padding:24px 22px 20px;box-shadow:0 30px 80px -30px rgba(0,0,0,.8)}
.adminnote-x{position:absolute;top:8px;right:12px;background:none;border:none;color:var(--muted);font-size:26px;line-height:1;cursor:pointer}
.adminnote-x:hover{color:var(--ink)}
.adminnote-hero{display:flex;align-items:flex-start;gap:14px;margin-bottom:16px}
.adminnote-bubble{position:relative;flex:1 1 auto;min-width:0;background:linear-gradient(150deg,rgba(150,110,240,.18),rgba(59,167,255,.14));border:1px solid rgba(150,150,255,.35);border-radius:6px 16px 16px 16px;padding:12px 14px}
.adminnote-bubble:before{content:"";position:absolute;left:-8px;top:16px;width:0;height:0;border:8px solid transparent;border-right-color:rgba(150,150,255,.35);border-left:0}
.adminnote-title{font-family:'Space Grotesk',sans-serif;font-size:16px;font-weight:700;color:var(--ink);margin-bottom:6px}
.adminnote-txt{font-size:13.5px;line-height:1.6;color:var(--ink)}
.adminnote-by{font-size:11px;color:var(--muted);margin-top:7px;letter-spacing:.3px}
.adminnote-ok{width:auto;padding:10px 22px}
.loginerr{background:rgba(242,112,138,.1);border:1px solid rgba(242,112,138,.4);border-radius:9px;
  padding:10px 12px;font-size:12.5px;color:var(--err);margin-top:14px;display:none}
.loginerr.show{display:block}
.backendbadge{font-size:11px;margin-top:14px;color:var(--muted2);display:flex;align-items:center;gap:7px}
.backendbadge .d{width:8px;height:8px;border-radius:50%;background:var(--muted2)}
.backendbadge.ok .d{background:var(--ok)}
.backendbadge.off .d{background:var(--warn)}

/* ===== APP SHELL ===== */
#app{display:none;height:100vh;height:100dvh;grid-template-columns:74px 1fr;grid-template-rows:100vh;grid-template-rows:100dvh;transition:grid-template-columns .18s ease}
#app.show{display:grid}
#app.railopen{grid-template-columns:222px 1fr}
.rail{position:relative;background:#0a1220;border-right:1px solid var(--line);display:flex;flex-direction:column;
  align-items:stretch;padding:14px 10px;gap:4px;overflow-y:auto;overflow-x:hidden;scrollbar-width:none}
.rail::-webkit-scrollbar{width:0;height:0}
/* Logo doubles as the menu toggle — glowing, with a rotating chevron hint, and
   a "holographic" fly-in on load. */
.rail .logo{position:relative;height:46px;flex:none;margin-bottom:14px;border-radius:13px;border:1px solid var(--cyan-d);
  background:#070B16 url("/icons/icon-192.png") center/32px 32px no-repeat;cursor:pointer;
  box-shadow:0 0 0 1px var(--cyan-d),0 0 20px -3px rgba(59,167,255,.5);
  animation:logoIn .85s cubic-bezier(.2,.9,.3,1.25) both;transition:box-shadow .2s,transform .2s}
.rail .logo:hover{box-shadow:0 0 0 1px var(--cyan),0 0 28px 0 rgba(59,167,255,.65);transform:translateY(-1px)}
.rail .logo::before{content:none}
.rail .logo::after{content:"›";position:absolute;right:-4px;bottom:-4px;width:17px;height:17px;border-radius:50%;
  background:var(--cyan);color:#03212a;font-size:12px;font-weight:800;line-height:1;
  display:flex;align-items:center;justify-content:center;box-shadow:0 0 0 2px #0a1220;transition:transform .18s}
#app.railopen .rail .logo::after{transform:rotate(180deg)}
@keyframes logoIn{0%{opacity:0;transform:translateY(-10px) scale(.5) rotate(-14deg);filter:blur(4px)}
  55%{opacity:1;filter:blur(0)}100%{opacity:1;transform:none}}
.rail [data-nav],.rail .me{position:relative;transition:.15s}
.rail [data-nav]{width:100%;height:46px;border-radius:12px;display:flex;align-items:center;gap:14px;
  justify-content:center;padding:0;color:var(--muted)}
#app.railopen .rail [data-nav]{justify-content:flex-start;padding:0 14px}
.rail [data-nav] svg{width:22px;height:22px;flex:none}
.rail [data-nav]:hover{background:#13233d;color:var(--ink);transform:translateY(-2px);
  box-shadow:0 0 0 1px rgba(59,167,255,.55),0 8px 20px -6px rgba(59,167,255,.6),0 0 20px 2px rgba(59,167,255,.32)}
@media(prefers-reduced-motion:reduce){.rail [data-nav]:hover{transform:none}}
.rail [data-nav].on{background:linear-gradient(180deg,var(--panelb),var(--panel));color:var(--cyan);box-shadow:0 0 0 1px var(--cyan-d) inset}
.rail [data-nav].on::before{content:"";position:absolute;left:-14px;top:12px;bottom:12px;width:3px;background:var(--cyan);border-radius:3px}
.rlabel{display:none;white-space:nowrap;font-size:13.5px;font-weight:500}
#app.railopen .rlabel{display:inline}
/* Zahlen-Ticker (Notification-Badge) am Menü-Reiter */
.railbadge{position:absolute;top:5px;right:5px;min-width:16px;height:16px;padding:0 4px;border-radius:9px;
  background:var(--cyan);color:#04121b;font-size:10px;font-weight:800;line-height:16px;text-align:center;
  box-shadow:0 0 0 2px #0a1220,0 0 10px rgba(56,225,255,.5);pointer-events:none;z-index:2}
.railbadge.warn{background:#ff8a3d;box-shadow:0 0 0 2px #0a1220,0 0 10px rgba(255,138,61,.5)}
.railbadge.gold{background:#f4c542;box-shadow:0 0 0 2px #0a1220,0 0 10px rgba(244,197,66,.5)}
.railbadge.cyan{background:var(--cyan)}
#app.railopen .railbadge{top:8px;right:8px}
/* Mail-Client-Ticker: neu / gelöscht */
.mailstats{display:flex;flex-wrap:wrap;gap:9px;margin-top:9px;font-size:11.5px}
.mailstats span{display:inline-flex;align-items:center;gap:4px;background:var(--space2);border:1px solid var(--line);border-radius:20px;padding:3px 9px}
.mailstats .ms-in{color:var(--cyan)}.mailstats .ms-del{color:var(--muted)}
/* Fremdpostfach-Popup */
.extm{display:flex;flex-direction:column;gap:12px}
.extm-presets{display:flex;gap:8px;flex-wrap:wrap}
.extm-presets .ep{font-size:13px;background:var(--space2);border:1px solid var(--line);border-radius:10px;padding:8px 12px;color:var(--ink);cursor:pointer}
.extm-presets .ep.on{border-color:var(--cyan-d);color:var(--cyan);background:rgba(56,225,255,.06)}
.extm-hint{font-size:12.5px;color:var(--muted);line-height:1.5;background:var(--space2);border:1px solid var(--line);border-radius:10px;padding:9px 11px}
.extm-form{display:flex;flex-direction:column;gap:9px}
.extm-form input{width:100%;box-sizing:border-box;background:var(--space2);border:1px solid var(--line);border-radius:10px;padding:10px 12px;color:var(--ink);font:inherit;font-size:14px}
.extm-form input:focus{outline:none;border-color:var(--cyan-d)}
.extm-row{display:flex;gap:9px}.extm-row .port{flex:0 0 90px}
.extm-msg{font-size:12.5px;min-height:16px}.extm-msg.err{color:var(--warn)}.extm-msg.ok{color:#8fe3b0}
.extm-list{display:flex;flex-direction:column;gap:8px}
.extm-item{display:flex;align-items:center;gap:8px;background:var(--space2);border:1px solid var(--line);border-radius:10px;padding:9px 11px}
.extm-item-b{min-width:0;flex:1;display:flex;flex-direction:column}
.extm-item-b b{font-size:13px;color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.extm-item-b span{font-size:11.5px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.btn.danger.sm{padding:6px 10px;font-size:12px}
.rail .spacer{flex:1}
.rail .acct{position:relative;display:flex;align-items:center;gap:12px;justify-content:center;padding:6px 0}
#app.railopen .rail .acct{justify-content:flex-start;padding:6px 6px}
.rail .me{width:40px;height:40px;border-radius:50%;background:var(--pc,#4FD1A5);display:flex;align-items:center;
  justify-content:center;font-weight:600;font-size:15px;color:#06121f;flex:none;border:none}
/* Profile card — position:fixed so it escapes the rail's overflow:hidden clip
   and floats clearly IN FRONT of the content (not behind it). */
/* App-Menü (über das Logo): Aktualisieren · Version · Hilfe */
.appmenu-scrim{display:none;position:fixed;inset:0;background:rgba(4,8,16,.55);z-index:118;-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}
.appmenu-scrim.open{display:block}
.appmenu{display:none;position:fixed;left:12px;top:12px;width:min(340px,calc(100vw - 24px));z-index:120;
  background:linear-gradient(180deg,#0e1c34,#0a1424);border:1px solid var(--cyan-d,#1c6fc0);border-radius:16px;padding:14px;overflow:hidden;
  box-shadow:0 20px 60px rgba(0,0,0,.6),0 0 0 1px rgba(34,211,238,.15),0 0 40px rgba(34,211,238,.12)}
.appmenu.open{display:block;animation:amIn .18s ease both}
@keyframes amIn{from{opacity:0;transform:translateY(-8px) scale(.98)}to{opacity:1;transform:none}}
.appmenu-head{display:flex;align-items:center;gap:10px;margin-bottom:10px}
.appmenu-logo{width:30px;height:30px;border-radius:8px;flex:none;object-fit:contain}
.appmenu-ttl{font-family:'Space Grotesk',sans-serif;font-weight:800;font-size:15px;color:#eaf2ff;flex:1;min-width:0}
.appmenu-x{background:none;border:none;color:var(--muted);font-size:22px;line-height:1;cursor:pointer;flex:none;padding:0 4px}
.appmenu-ver{font-size:11.5px;color:#b9c6da;background:rgba(34,211,238,.08);border:1px solid rgba(34,211,238,.16);border-radius:9px;padding:7px 9px;margin-bottom:10px;word-break:break-word}
.appmenu-item{display:flex;align-items:center;gap:11px;width:100%;text-align:left;background:rgba(255,255,255,.03);border:1px solid var(--line);border-radius:11px;padding:11px 12px;margin-bottom:8px;cursor:pointer;color:#eaf2ff;text-decoration:none;box-sizing:border-box}
.appmenu-item:hover{border-color:var(--cyan-d,#1c6fc0);background:rgba(34,211,238,.07)}
.appmenu-item.primary{background:linear-gradient(180deg,rgba(34,211,238,.16),rgba(59,130,246,.1));border-color:var(--cyan-d,#1c6fc0)}
.appmenu-item[disabled]{opacity:.6;pointer-events:none}
.ami-ic{font-size:19px;flex:none;width:24px;text-align:center}
.ami-tx{display:flex;flex-direction:column;min-width:0}
.ami-tx b{font-size:13.5px;font-weight:700}
.ami-tx span{font-size:11.5px;color:var(--muted)}
.appmenu-item.primary .ami-tx b{color:#5fe0ff}
.appmenu-foot{font-size:11px;color:var(--muted);text-align:center;margin-top:2px}
html.light .appmenu{background:linear-gradient(180deg,#ffffff,#eef4fd)}
html.light .appmenu-ttl,html.light .appmenu-item{color:var(--ink)}
html.light .appmenu-item{background:#f2f6fd}
/* Sprach-Aufnahme (Diktat) — futuristisches Overlay mit Live-Equalizer */
.dictov{position:fixed;inset:0;z-index:130;display:grid;place-items:center;padding:20px;background:rgba(4,8,16,.62);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);animation:amIn .18s ease both}
.dictcard{width:min(360px,calc(100vw - 32px));background:linear-gradient(180deg,#0e1c34,#0a1424);border:1px solid var(--cyan-d,#1c6fc0);border-radius:20px;padding:20px 18px;text-align:center;box-shadow:0 24px 70px rgba(0,0,0,.6),0 0 44px rgba(34,211,238,.14)}
.dict-title{font-family:'Space Grotesk',sans-serif;font-weight:800;font-size:15px;color:#eaf2ff;display:inline-flex;align-items:center;gap:9px;margin-bottom:14px}
.dict-dot{width:11px;height:11px;border-radius:50%;background:#ff5468;box-shadow:0 0 0 0 rgba(255,84,104,.6);animation:dictpulse 1.3s ease-out infinite}
@keyframes dictpulse{0%{box-shadow:0 0 0 0 rgba(255,84,104,.55)}70%{box-shadow:0 0 0 12px rgba(255,84,104,0)}100%{box-shadow:0 0 0 0 rgba(255,84,104,0)}}
.dict-eq{display:block;width:100%;height:72px;margin:0 auto 8px}
.dict-timer{font-family:'JetBrains Mono',monospace;font-size:22px;font-weight:700;color:#5fe0ff;letter-spacing:1px}
.dict-hint{font-size:12.5px;color:#b9c6da;line-height:1.5;margin:8px 4px 0}
.dict-hint b{color:#eaf2ff}
.dict-proc{display:none;font-size:13px;color:#b9c6da;align-items:center;justify-content:center;gap:9px;margin-top:10px}
.dict-proc .spinner{width:16px;height:16px}
.dictov.processing .dict-eq,.dictov.processing .dict-hint,.dictov.processing .dict-btns,.dictov.processing .dict-dot{display:none}
.dictov.processing .dict-title{opacity:.7}
.dictov.processing .dict-proc{display:inline-flex}
.dict-btns{display:flex;gap:10px;margin-top:16px}
.dict-btns .btn{flex:1;padding:11px 14px;font-size:13.5px}
.dict-btns .btn.subtle{background:rgba(255,255,255,.05);color:#cdd8ea}
html.light .dictcard{background:linear-gradient(180deg,#ffffff,#eef4fd)}
html.light .dict-title{color:var(--ink)}
html.light .dict-hint,html.light .dict-hint b{color:var(--muted)}
html.light .dict-timer{color:#1c6fc0}
.acctscrim{display:none;position:fixed;inset:0;background:rgba(4,8,16,.55);z-index:88;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}
.acct.open .acctscrim{display:block}
.acctmenu{display:none;position:fixed;left:12px;bottom:12px;width:min(330px,calc(100vw - 24px));
  background:var(--panel);border:1px solid var(--line2);border-radius:16px;padding:16px;z-index:90;
  box-shadow:0 24px 60px -12px rgba(0,0,0,.8)}
.acct.open .acctmenu{display:block;animation:acctpop .32s cubic-bezier(.2,.9,.3,1.15) both}
.acct.open .acctmenu::before{content:"";position:absolute;inset:0;border-radius:16px;pointer-events:none;
  background:linear-gradient(120deg,rgba(59,167,255,.14),transparent 45%);
  box-shadow:0 0 0 1px rgba(59,167,255,.35) inset,0 0 26px -6px rgba(59,167,255,.45) inset;
  animation:holoSweep 1.1s ease-out both}
@keyframes acctpop{0%{opacity:0;transform:translateY(14px) scale(.94);filter:blur(6px)}
  55%{opacity:1;filter:blur(0)}100%{opacity:1;transform:none}}
@keyframes holoSweep{0%{opacity:0;background-position:-120% 0}40%{opacity:1}100%{opacity:.35;background-position:120% 0}}
.acctclose{position:absolute;top:10px;right:10px;width:28px;height:28px;border-radius:8px;color:var(--muted);font-size:18px;line-height:1;background:none;border:none;cursor:pointer}
.acctclose:hover{background:#13233d;color:var(--ink)}
.accthead{display:flex;align-items:center;gap:12px;margin-bottom:14px;padding-right:26px}
.acctav{width:52px;height:52px;border-radius:50%;background:var(--pc,#4FD1A5);display:flex;align-items:center;
  justify-content:center;font-weight:700;font-size:20px;color:#06121f;flex:none}
.acctid{min-width:0}
.acctfull{font-family:'Space Grotesk',sans-serif;font-size:16px;font-weight:600;color:var(--ink);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.acctrole{font-size:12.5px;color:var(--cyan);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.acctrows{display:flex;flex-direction:column;gap:2px;margin-bottom:12px}
.acctrow{display:flex;justify-content:space-between;gap:12px;padding:8px 10px;border-radius:9px;
  font-size:12.5px;min-width:0;color:var(--ink);text-decoration:none}
a.acctrow:hover{background:#13233d}
.acctrow .ak{color:var(--muted);flex:none}
.acctrow .av{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:right}
.acctactions{display:flex;flex-direction:column;gap:6px;border-top:1px solid var(--line);padding-top:12px}
.acctactions button{display:block;width:100%;text-align:left;padding:10px 12px;border-radius:9px;
  font-size:13.5px;color:var(--ink);background:none;border:none;cursor:pointer}
.acctactions button:hover{background:#13233d}
.railscrim{display:none}

.main{overflow:hidden;display:flex;flex-direction:column;height:100vh;height:100dvh;position:relative}
/* Content mesh: subtle animated backdrop behind the Start tiles (shown only on Start). */
/* Canvas ist ein ersetztes Element → inset:0 dehnt es NICHT (behält 300×150).
   Deshalb width/height:100% explizit, damit das Mesh den ganzen Bereich füllt. */
.contentmesh{position:absolute;inset:0;width:100%;height:100%;z-index:0;pointer-events:none;display:none}
.main>.topbar,.main>.view,.main>.foot{position:relative;z-index:1}
.topbar{min-height:58px;border-bottom:1px solid var(--line);display:flex;align-items:center;
  flex-wrap:wrap;row-gap:6px;padding:7px 22px;gap:14px;flex:none}
.topbar h2{font-family:'Space Grotesk',sans-serif;font-size:17px;font-weight:600}
.topbar .crumb{color:var(--muted);font-size:12px}
/* Bei Platzmangel bricht die rechte Steuer-Gruppe in eine zweite Zeile um,
   statt (durch .main{overflow:hidden}) unsichtbar abgeschnitten zu werden. */
.topbar .grow{flex:1 1 0;min-width:0}
.topbar .pill{font-size:11px;color:var(--muted);border:1px solid var(--line);border-radius:20px;padding:4px 11px}
.view{flex:1;overflow:auto;overflow-x:hidden;padding:22px;
  /* Sichere Bereiche: letzter Inhalt klärt Home-Indicator / seitliche Notch (Landscape) */
  padding-bottom:calc(22px + env(safe-area-inset-bottom,0px));
  padding-right:calc(22px + env(safe-area-inset-right,0px));
  overscroll-behavior:contain}

/* ===== Overflow guards (mobile-first: nothing may run out of its container) ===== */
/* Grid/flex children default to min-width:auto, which lets long text push the
   layout wider than the screen. Force them to be allowed to shrink + clip. */
.main{min-width:0}
.topbar{min-width:0}
.topbar h2{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:40vw}
#userPill{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:52vw;flex:none}
.mail,.mailcol,.mailread,.maillist,.mailpane{min-width:0}
.mailitem,.mailitem .from{min-width:0}
.mailitem .from .from-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.board,.col,.col .items,.task{min-width:0}
.task .tt{overflow-wrap:anywhere}
.mailread .body,.mailread .h,.mailread .meta{overflow-wrap:anywhere}
.compose{min-width:0}

/* ===== HOME ===== */
/* Centered, symmetric grid of larger tiles (auto-fit fills the row evenly). */
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:20px;
  max-width:1120px;margin:6px auto 0}
.tile{background:linear-gradient(180deg,var(--panel),#0b1626);border:1px solid var(--line);border-radius:18px;
  padding:24px 22px;cursor:pointer;transition:.16s;min-height:172px;display:flex;flex-direction:column;text-align:left;
  align-items:flex-start}
.tile:hover{border-color:var(--cyan-d);transform:translateY(-3px);box-shadow:0 16px 34px -18px rgba(59,167,255,.4)}
.tile .ico{width:48px;height:48px;border-radius:13px;background:#13233d;display:flex;align-items:center;justify-content:center;color:var(--cyan)}
.tile .ico svg{width:26px;height:26px}
.tile h3{font-family:'Space Grotesk',sans-serif;font-size:17px;margin-top:16px}
.tile p{color:var(--muted);font-size:13px;margin-top:6px;flex:1;line-height:1.5}
.tile .stat{font-family:'JetBrains Mono',monospace;font-size:11px;color:var(--muted2);margin-top:12px}
.hello{margin-bottom:20px}
.hello .eyebrow{font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.3em;color:var(--cyan);text-transform:uppercase}
.hello h1{font-family:'Space Grotesk',sans-serif;font-size:26px;font-weight:700;margin-top:6px}
.hello p{color:var(--muted);font-size:14px;margin-top:4px}

/* ===== MAIL ===== */
.mail{display:grid;grid-template-columns:250px 1fr;gap:0;height:100%;border:1px solid var(--line);border-radius:14px;overflow:hidden}
.mailcol{border-right:1px solid var(--line);background:var(--panel);display:flex;flex-direction:column;min-height:0}
.mailtabs{display:flex;gap:6px;padding:10px;border-bottom:1px solid var(--line);flex:none}
.mailtabs button{flex:1;font-size:12px;color:var(--muted);padding:7px;border-radius:8px;border:1px solid var(--line);background:var(--space2)}
.mailtabs button.on{background:var(--panelb);color:var(--ink);border-color:var(--cyan-d)}
.mailtabs select{flex:1;width:100%;font-size:12.5px;color:var(--ink);padding:8px 10px;border-radius:8px;
  border:1px solid var(--line);background:var(--space2);appearance:none;-webkit-appearance:none;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%238ea0c0' stroke-width='2'><path d='M6 9l6 6 6-6'/></svg>");
  background-repeat:no-repeat;background-position:right 10px center;padding-right:32px}
.mailread .reply{display:flex;gap:8px;flex-wrap:wrap}
.mailread .reply .btn{width:auto;margin:0}
.mailtoolbar{display:flex;gap:8px;padding:10px;border-bottom:1px solid var(--line);flex:none}
.mailtoolbar .btn{margin:0;padding:9px}
.mailtoolbar .refresh{width:auto;padding:9px 12px;background:var(--space2);border:1px solid var(--line);color:var(--muted)}
/* Postfach-Suche + „Weitere laden" */
.mailsearchbar{position:relative;padding:0 10px 10px;border-bottom:1px solid var(--line);flex:none}
.mailsearch{width:100%;box-sizing:border-box;background:var(--space2);border:1px solid var(--line);border-radius:10px;
  padding:9px 30px 9px 12px;color:var(--ink);font:inherit;font-size:13px}
.mailsearch:focus{outline:none;border-color:var(--cyan-d)}
.mailsearch::-webkit-search-cancel-button{display:none}
.mailsearchx{position:absolute;right:18px;top:50%;transform:translateY(-50%);margin-top:-5px;background:none;border:0;
  color:var(--muted);cursor:pointer;font-size:13px;line-height:1;padding:4px}
.mailsearchx:hover{color:var(--ink)}
.mailsearchhead{padding:8px 12px;font-size:12px;color:var(--muted);border-bottom:1px solid var(--line)}
.mailmore{width:calc(100% - 20px);margin:10px;padding:9px}
.maillist{overflow:auto;flex:1;min-height:0}
.mailitem{padding:13px 15px;border-bottom:1px solid var(--line);cursor:pointer;transition:.12s}
.mailitem:hover{background:rgba(255,255,255,.05)}
.mailitem.on{background:rgba(255,255,255,.08);box-shadow:inset 2px 0 0 var(--cyan)}
/* Gelesen vs. ungelesen — theme-neutral: nur Schriftstärke + Theme-Variablen
   (var(--ink)/var(--muted)), keine festen Farben, damit es über ALLE Layouts
   und Farbvarianten trägt. Gelesen tritt zurück (leichter, gedämpft),
   ungelesen steht kräftig hervor (fett, voller Kontrast + Punkt). */
.mailitem.unseen .from{font-weight:800;color:var(--ink)}
.mailitem.unseen .subj{font-weight:700;color:var(--ink)}
.mailitem.unseen::before{content:"";display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--cyan);margin-right:6px;vertical-align:middle}
.mailitem .from{font-weight:500;color:var(--muted);font-size:13px;display:flex;justify-content:space-between;gap:8px}
.mailitem .from .t{font-weight:400;color:var(--muted2);font-size:11px;flex:none}
.mailitem .subj{font-size:12.5px;margin-top:2px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* Aktiv geöffnete Mail bleibt immer klar lesbar, egal ob schon gelesen. */
.mailitem.on .from,.mailitem.on .subj{color:var(--ink)}
.mailitem .prev{font-size:11.5px;color:var(--muted);margin-top:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mailitem .clip{color:var(--muted2);font-size:11px}
.mailread{padding:22px;overflow:auto}
.mailread .h{font-family:'Space Grotesk',sans-serif;font-size:18px;font-weight:600}
.mailread .meta{color:var(--muted);font-size:12.5px;margin:8px 0 18px;padding-bottom:14px;border-bottom:1px solid var(--line)}
.mailread .body{font-size:14px;line-height:1.7;white-space:pre-wrap;word-break:break-word}
.mailread .att{margin-top:18px;padding-top:14px;border-top:1px solid var(--line)}
.mailread .att .a{display:inline-flex;align-items:center;gap:6px;font-size:12px;color:var(--muted);
  border:1px solid var(--line);border-radius:8px;padding:6px 10px;margin:4px 6px 0 0}
/* Anhänge sind jetzt klickbare Download-Knöpfe */
.mailread .att .a.attdl{background:var(--panel);font:inherit;font-size:12px;cursor:pointer;
  transition:border-color .15s,color .15s,transform .1s;-webkit-tap-highlight-color:transparent}
.mailread .att .a.attdl:hover{border-color:var(--cyan-d);color:var(--ink)}
.mailread .att .a.attdl:active{transform:translateY(1px)}
.mailread .att .a.attdl[disabled]{opacity:.6;cursor:default}
.mailread .att .a.attdl .attdl-ic{font-weight:700;color:var(--cyan-d)}
.mailread .att .a.attloading .attdl-ic{opacity:.4}
.mailread .reply{margin-top:20px}
.mailread .reply .btn{width:auto;padding:9px 16px}
.demoflag{background:rgba(242,193,78,.1);border:1px solid rgba(242,193,78,.35);border-radius:9px;
  padding:9px 12px;font-size:12px;color:var(--warn);margin-bottom:16px}
.mailempty{padding:40px 22px;text-align:center;color:var(--muted2);font-size:13px}
.mailempty.sentok{display:flex;flex-direction:column;align-items:center;gap:10px;padding:52px 22px;color:var(--ink)}
.mailempty.sentok h3{font-family:'Space Grotesk',sans-serif;font-size:20px;color:var(--ink)}
.mailempty.sentok p{color:var(--muted);font-size:13.5px;max-width:420px;line-height:1.55}
.mailempty.sentok .sentcheck{width:66px;height:66px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  font-size:32px;color:#04241a;background:radial-gradient(circle at 50% 40%,#7ff0c8,var(--ok));
  box-shadow:0 0 0 6px rgba(79,209,165,.16),0 12px 30px -8px rgba(79,209,165,.5);animation:sentpop .32s ease}
@keyframes sentpop{from{transform:scale(.6);opacity:0}to{transform:scale(1);opacity:1}}

/* ===== COMPOSE ===== */
.compose{max-width:100%;margin:0}
.compose h3{font-family:'Space Grotesk',sans-serif;font-size:18px;margin-bottom:16px}
.compose .mbtns{display:flex;gap:10px;margin-top:8px}
.compose .mbtns .btn{flex:1}
.compose .mbtns .ghost{background:transparent;border:1px solid var(--line);color:var(--muted)}
/* Empfänger-Chips + Autovervollständigung */
.recipbox{display:flex;flex-wrap:wrap;align-items:center;gap:6px;min-width:0;background:var(--panel,#0e1626);border:1px solid var(--line);border-radius:10px;padding:6px 8px}
.recipbox:focus-within{border-color:#5a8bff;box-shadow:0 0 0 2px rgba(90,140,255,.2)}
.recipchips{display:contents}
.recipchip{display:inline-flex;align-items:center;gap:5px;max-width:100%;background:linear-gradient(135deg,rgba(59,167,255,.18),rgba(139,92,255,.16));border:1px solid rgba(120,160,255,.45);color:var(--ink);border-radius:999px;padding:3px 6px 3px 11px;font-size:13px;line-height:1.3;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.recipchip.bad{background:rgba(240,120,120,.12);border-color:rgba(240,120,120,.5)}
.recipx{background:none;border:none;color:inherit;font-size:15px;line-height:1;cursor:pointer;opacity:.7;padding:0 2px}
.recipx:hover{opacity:1}
.recipbox input#cTo{flex:1 1 140px;min-width:120px;background:transparent;border:none;outline:none;color:var(--ink);font-size:14px;padding:4px 2px}

/* ===== CALENDAR ===== */
.calhead{display:flex;align-items:center;gap:14px;margin-bottom:16px;flex-wrap:wrap}
.calhead h3{font-family:'Space Grotesk',sans-serif;font-size:18px;min-width:170px}
.calhead .pill{cursor:pointer}
/* (Alter Custom-Kalender calgrid/caldow/calcell entfernt — ersetzt durch FullCalendar.) */

/* ===== TASKS ===== */
.board{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;height:100%}
.board.cols2{grid-template-columns:repeat(2,1fr)}
.col{background:#0b1626;border:1px solid var(--line);border-radius:14px;display:flex;flex-direction:column;overflow:hidden}
.col .ch{padding:13px 15px;font-family:'Space Grotesk',sans-serif;font-weight:600;font-size:14px;
  border-bottom:1px solid var(--line);display:flex;justify-content:space-between;align-items:center}
.col .ch .cnt{font-family:'JetBrains Mono',monospace;font-size:11px;color:var(--muted2);background:#13233d;padding:2px 8px;border-radius:20px}
.col .items{padding:12px;flex:1;overflow:auto;display:flex;flex-direction:column;gap:9px;min-height:60px}
.task{background:var(--panelb);border:1px solid var(--line2);border-radius:10px;padding:12px;cursor:grab;transition:.12s}
.task:active{cursor:grabbing}
.task.drag{opacity:.4}
.task .tt{font-size:13.5px;font-weight:500}
.task .tm{display:flex;justify-content:space-between;margin-top:8px;align-items:center;gap:8px}
.task .who{font-size:10px;padding:2px 7px;border-radius:20px;font-weight:600;border:none;cursor:pointer;flex:none}
.task .vismini{font-size:10px;color:var(--muted2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0;flex:1;text-align:center}
.task .del{color:var(--muted2);font-size:15px;line-height:1}
/* Abhaken/Zurückholen — theme-neutral (Theme-Variablen, keine festen Farben). */
.task .tm{flex-wrap:wrap}
.task .taskdone,.task .taskundo{border:1px solid var(--line2);background:transparent;color:var(--ink);border-radius:7px;width:26px;height:26px;flex:none;cursor:pointer;font-size:13px;line-height:1;padding:0}
.task .taskdone:hover{background:var(--ok);color:#06121f;border-color:var(--ok)}
.task .taskundo:hover{background:var(--panelb)}
.task.tdone{opacity:.72;cursor:default}
.task.tdone .tt{text-decoration:line-through;color:var(--muted)}
/* Einklappbarer „Erledigt"-Bereich unter dem Board. */
.donebox{margin-top:14px;border:1px solid var(--line);border-radius:12px;background:var(--panel);overflow:hidden}
.donebox>summary{cursor:pointer;padding:12px 15px;font-family:'Space Grotesk',sans-serif;font-weight:600;font-size:14px;list-style:none;display:flex;align-items:center;gap:8px}
.donebox>summary::-webkit-details-marker{display:none}
.donebox>summary::before{content:"▸";color:var(--muted);transition:transform .15s}
.donebox[open]>summary::before{transform:rotate(90deg)}
.donebox>summary .cnt{font-family:'JetBrains Mono',monospace;font-size:11px;color:var(--muted2);background:#13233d;padding:2px 8px;border-radius:20px}
.donebox .donelist{padding:12px;display:flex;flex-direction:column;gap:9px}
.col.dragover{background:#101f36}
.addtask{margin:0 12px 12px;display:flex;gap:6px}
.addtask input{flex:1;background:#0a1424;border:1px solid var(--line);border-radius:8px;padding:8px 10px;color:var(--ink);font-size:12.5px}
.addtask button{background:var(--cyan-d);color:#03212a;border-radius:8px;padding:0 12px;font-weight:600;font-size:16px}

/* ===== SHARED MODULES (CRM / Notizen / Kontakte / Dateien) ===== */
.section{margin:0 auto 24px;max-width:1320px}
.section h3{font-family:'Space Grotesk',sans-serif;font-size:16px;margin-bottom:11px}
.addrow{display:grid;gap:8px;margin-bottom:14px;background:#0b1626;border:1px solid var(--line);border-radius:12px;padding:12px;max-width:760px}
.addrow .row2{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.addrow input,.addrow textarea,.addrow select{width:100%;min-width:0;background:#0a1424;border:1px solid var(--line);
  border-radius:8px;padding:9px 11px;color:var(--ink);font-size:13px}
.addrow textarea{resize:vertical;min-height:64px;line-height:1.5}
.addrow input:focus,.addrow textarea:focus{outline:none;border-color:var(--cyan-d)}
.addrow .btn{width:auto;justify-self:start;padding:9px 18px;margin:0}
.chk{display:flex;align-items:center;gap:8px;color:var(--muted);font-size:13px;background:#0a1424;
  border:1px solid var(--line);border-radius:8px;padding:0 11px}
.chk input{width:auto;flex:none}
.rowcard{background:var(--panelb);border:1px solid var(--line2);border-radius:10px;padding:12px;margin-bottom:9px}
.rowcard.crit{border-color:rgba(242,112,138,.5)}
.rowcard .rtop{display:flex;justify-content:space-between;gap:12px;align-items:flex-start}
.rowcard .rtop>div:first-child{min-width:0;flex:1}
.rowcard .rtitle{font-size:14px;font-weight:600;overflow-wrap:anywhere}
.rowcard .rmeta{font-size:12px;color:var(--muted);margin-top:3px;overflow-wrap:anywhere}
.rowcard .rmeta a{color:var(--cyan)}
.rowcard .ntext{white-space:pre-wrap;color:var(--ink);font-size:13.5px;margin-top:5px}
.rowcard .del{color:var(--muted2);font-size:17px;line-height:1;flex:none}
.rowcard .ract{display:flex;gap:10px;align-items:center;flex:none}
a.pill{cursor:pointer;text-decoration:none}
a.pill:hover{border-color:var(--cyan-d);color:var(--ink)}
.pill.days{color:var(--cyan);border-color:var(--cyan-d)}
.pill.crit{color:var(--err);border-color:var(--err)}
@media(max-width:520px){.addrow .row2{grid-template-columns:1fr}}

/* ===== CHAT ===== */
.chat{display:grid;grid-template-columns:240px 1fr;height:100%;border:1px solid var(--line);border-radius:14px;overflow:hidden;min-width:0}
.chatlist{border-right:1px solid var(--line);background:#0b1626;overflow:auto;min-width:0}
.chatconv{display:flex;align-items:center;gap:10px;padding:12px 14px;cursor:pointer;border-bottom:1px solid rgba(30,48,80,.5);min-width:0}
.chatconv:hover{background:#101f36}
.chatconv.on{background:#13233d;box-shadow:inset 2px 0 0 var(--cyan)}
.cavatar{width:34px;height:34px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:600;font-size:12.5px;color:#06121f;flex:none}
.cnm{font-size:13.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.chatmain{display:flex;flex-direction:column;min-width:0;min-height:0}
.chathead{padding:12px 16px;border-bottom:1px solid var(--line);font-family:'Space Grotesk',sans-serif;display:flex;align-items:center;gap:10px;flex:none}
.chatback{display:none;color:var(--muted);font-size:19px;line-height:1}
.chatmsgs{flex:1;overflow:auto;padding:16px;display:flex;flex-direction:column;gap:8px;min-height:0}
.bubble{max-width:80%;padding:8px 12px;border-radius:14px;font-size:13.5px;line-height:1.45;word-break:break-word}
.bubble.them{align-self:flex-start;background:var(--panelb);border:1px solid var(--line2);border-bottom-left-radius:4px}
.bubble.me{align-self:flex-end;background:linear-gradient(180deg,#2f8fe0,#0a7d8f);color:#eafcff;border-bottom-right-radius:4px}
.bubble .bname{display:block;font-size:10.5px;color:var(--cyan);font-weight:600;margin-bottom:2px}
.bubble .btext{white-space:pre-wrap}
.bubble .btime{display:block;font-size:9.5px;opacity:.7;text-align:right;margin-top:3px}
.bubble audio{max-width:210px;height:36px;display:block;margin-bottom:2px}
.bubble .vdur{font-size:10px;opacity:.8}
.chatinput{display:flex;gap:8px;padding:10px;border-top:1px solid var(--line);flex:none;align-items:center}
.chatinput input{flex:1;min-width:0;background:#0a1424;border:1px solid var(--line);border-radius:22px;padding:10px 14px;color:var(--ink);font-size:14px}
.chatinput input:focus{outline:none;border-color:var(--cyan-d)}
.chatinput #chatMic{width:42px;height:42px;border-radius:50%;background:var(--space2);border:1px solid var(--line);font-size:17px;flex:none}
.chatinput #chatMic.rec{background:var(--err);border-color:var(--err);animation:pulse 1s infinite}
@keyframes pulse{50%{opacity:.5}}
.chatinput #chatSend{width:auto;padding:0 16px;height:42px;border-radius:22px;margin:0;font-size:16px;flex:none}
@media(max-width:720px){
  .chat{grid-template-columns:1fr;position:relative}
  .chatlist{border-right:none}
  .chat.open .chatlist{display:none}
  .chat:not(.open) .chatmain{display:none}
  .chatback{display:inline-block}
}

/* modal */
.modal{position:fixed;inset:0;background:rgba(4,8,16,.7);display:none;align-items:center;justify-content:center;z-index:60;padding:20px}
.modal.show{display:flex}
.modalcard{width:100%;max-width:420px;background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:24px;max-height:92vh;overflow:auto}
.modalcard h3{font-family:'Space Grotesk',sans-serif;font-size:18px;margin-bottom:16px}
.modalcard .field{margin-bottom:12px}
.modalcard .row{display:flex;gap:10px}
.modalcard .row .field{flex:1}
.mbtns{display:flex;gap:10px;margin-top:8px}
.mbtns .btn{flex:1}
.mbtns .ghost{background:transparent;border:1px solid var(--line);color:var(--muted)}
.share{background:var(--ok);color:#052018}

/* spinner + states */
.spinner{width:26px;height:26px;border:3px solid var(--line2);border-top-color:var(--cyan);border-radius:50%;
  animation:spin .8s linear infinite;margin:40px auto}
@keyframes spin{to{transform:rotate(360deg)}}
.loadingwrap{display:flex;flex-direction:column;align-items:center;color:var(--muted);font-size:13px;padding:30px}
.retrybtn{background:var(--space2);border:1px solid var(--line);color:var(--ink);padding:8px 16px;border-radius:9px;margin-top:14px;width:auto}

/* Skeleton-Ladeplatzhalter (nimmt Zielgeometrie vorweg; Shimmer GPU-schonend) */
.skelwrap{padding:2px}
.skel-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
.skelgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:12px;margin-bottom:16px}
.skel-tile{height:82px;border-radius:13px}
.skelrows{display:flex;flex-direction:column;gap:10px}
.skel-row{height:64px;border-radius:14px}
.skel{--skel-bg:color-mix(in srgb,var(--ink) 7%,var(--panel));--skel-hi:color-mix(in srgb,var(--ink) 15%,var(--panel));
  background:linear-gradient(90deg,transparent 0,var(--skel-hi) 50%,transparent 100%) 0 0/220% 100% no-repeat,var(--skel-bg);
  border:1px solid var(--line);animation:skel-shimmer 1.4s ease-in-out infinite}
@keyframes skel-shimmer{from{background-position:220% 0,0 0}to{background-position:-220% 0,0 0}}
@media(prefers-reduced-motion:reduce){.skel{animation:none}}

/* toast */
.toasts{position:fixed;bottom:calc(20px + var(--safe-b));left:50%;transform:translateX(-50%);z-index:190;display:flex;flex-direction:column;gap:8px;align-items:center}
.toast{background:var(--panelb);border:1px solid var(--line2);border-radius:10px;padding:11px 18px;font-size:13px;
  color:var(--ink);box-shadow:0 10px 30px -10px rgba(0,0,0,.6);animation:rise .2s ease}
.toast.ok{border-color:var(--ok);color:#dfffef}
.toast.err{border-color:var(--err);color:#ffe1e8}
@media(max-width:720px){.toasts{bottom:calc(74px + var(--safe-b))}}   /* über der Bottom-Navigation */
@keyframes rise{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

.foot{padding:8px 22px;border-top:1px solid var(--line);font-family:'JetBrains Mono',monospace;
  font-size:10px;color:var(--muted2);display:flex;justify-content:space-between;gap:10px;flex:none;flex-wrap:wrap}

/* Demo-Kennzeichnung. Ruhig genug, um nicht ueber dem Produkt zu liegen —
   deutlich genug, um nicht uebersehen zu werden. Ein frueherer Versuch als
   fester Aufkleber wurde als unpassend verworfen; das hier ist Teil der
   Kopfleiste, kein Ding, das darueber schwebt. `flex:0 0 auto`, damit es bei
   Platzmangel umbricht statt zusammengequetscht zu werden. */
.demomark{flex:0 0 auto;font-size:10.5px;line-height:1;letter-spacing:.02em;
  color:#f0c274;background:rgba(240,194,116,.10);border:1px solid rgba(240,194,116,.32);
  border-radius:20px;padding:5px 10px;white-space:nowrap;cursor:help}
.demomark-login{display:inline-block;margin:-2px 0 14px;cursor:default}
@media(max-width:420px){ .demomark{font-size:10px;padding:4px 8px} }

@media(max-width:720px){
  /* Handy: die linke Leiste weicht der Bottom-Navigation; sie bleibt als
     Overlay über „Mehr" bzw. das Logo erreichbar (alle Bereiche). */
  #app.show{grid-template-columns:1fr}
  #app.railopen{grid-template-columns:1fr}
  /* Rail als Off-Canvas-Drawer: gleitet mit Token-Easing ein/aus (nur transform),
     Scrim blendet weich; geschlossen unsichtbar & nicht fokussierbar. */
  .rail{display:flex;position:fixed;left:0;top:0;bottom:0;width:222px;z-index:60;box-shadow:0 0 40px rgba(0,0,0,.6);
    transform:translateX(-100%);visibility:hidden;
    transition:transform var(--dur-exit) var(--ease-accel),visibility 0s linear var(--dur-exit);
    padding-top:calc(14px + var(--safe-t));padding-bottom:calc(14px + var(--safe-b))}
  #app.railopen .rail{transform:none;visibility:visible;transition:transform var(--dur-enter) var(--ease-decel)}
  .railscrim{display:block;position:fixed;inset:0;z-index:55;background:rgba(4,8,16,0);visibility:hidden;
    transition:background var(--dur-exit) linear,visibility 0s linear var(--dur-exit)}
  #app.railopen .railscrim{background:rgba(4,8,16,.5);visibility:visible;transition:background var(--dur-enter) linear}
  @supports (backdrop-filter:blur(1px)){ #app.railopen .railscrim{backdrop-filter:blur(2px)} }
  .foot{display:none}   /* Platz für die Bottom-Navigation; Systeminfo bleibt über „Mehr" → Menü */
  /* Handy: Mail wächst mit dem Inhalt statt eine feste Vollhöhe zu reservieren
     (sonst klaffte unter kurzen Listen eine tote Fläche). Die Seite scrollt. */
  .mail{grid-template-columns:1fr;position:relative;height:auto;overflow:visible}
  .mail .mailcol{border-right:none;min-height:0}
  .mail:not(.reading) .maillist{overflow:visible;flex:none}
  .mail.reading .mailcol{display:none}
  .mail:not(.reading) .mailpane{display:none}
  .mailback{display:inline-flex}
  .board{grid-template-columns:1fr;overflow:auto}
  .col{min-height:220px}
  .foot{font-size:9px}
}
.mailback{display:none;align-items:center;gap:6px;color:var(--muted);font-size:13px;margin-bottom:14px}

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;transition-duration:.001ms!important}
  .tile:hover{transform:none}
}

/* ===== Kontrollcenter (digitaler Zwilling) ===== */
.tile-accent{border-color:var(--cyan-d);box-shadow:0 0 0 1px var(--cyan-d) inset,0 10px 30px -14px rgba(59,167,255,.5)}
.tile-accent .ico{color:var(--cyan)}
.cnt{display:inline-block;min-width:20px;padding:0 7px;margin-left:6px;border-radius:11px;background:var(--panelb);
  color:var(--cyan);font-size:12px;font-weight:700;vertical-align:middle}
.cchint{color:var(--muted);font-size:12.5px;margin:2px 0 12px}
/* Premium-KI: eigener Schlüssel (BYOK) */
.byok-safe{font-size:11px;font-weight:700;color:var(--ok);background:rgba(79,209,165,.16);border-radius:999px;padding:2px 8px;margin-left:6px;vertical-align:middle}
.byokrows{display:flex;flex-direction:column;gap:10px}
.byokrow{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:10px 12px;min-width:0}
.byokhead{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:8px}
.byokhead .byokdot{font-size:12px}
.byokhead .byokstate{margin-left:auto;font-size:12px;color:var(--muted)}
.byokedit{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.byokinput{flex:1 1 200px;min-width:0;background:var(--bg);border:1px solid var(--line);border-radius:9px;padding:8px 10px;color:var(--text,inherit);font-family:ui-monospace,monospace;font-size:13px}
.btn.sm{padding:6px 12px;font-size:13px}
.ccsetup .pill.ok{background:rgba(79,209,165,.16);color:var(--ok);border-color:transparent}
.ccard{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:14px;margin-bottom:12px;min-width:0}
/* Kacheln in den Freigabe-Spalten: Hover-Effekt + Großansicht (⤢/Klick) */
.triagebox .ccard{cursor:pointer;transition:transform .15s,border-color .15s,box-shadow .15s}
.triagebox .ccard:hover{transform:translateY(-2px);border-color:var(--cyan-d);box-shadow:0 14px 34px -16px rgba(35,131,255,.4)}
.cczoom{margin-left:auto;flex:none;background:none;border:1px solid var(--line2);border-radius:8px;color:var(--muted);font-size:13px;line-height:1;padding:3px 8px;cursor:pointer;transition:.15s}
.cczoom:hover{color:var(--ink);border-color:var(--cyan-d)}
.cz-card{max-width:760px;width:min(760px,94vw);position:relative}
.cz-close{position:absolute;top:10px;right:12px;background:none;border:none;color:var(--muted);font-size:26px;line-height:1;cursor:pointer}
.cz-close:hover{color:var(--ink)}
.cz-top{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:10px;padding-right:24px}
.cz-title{font-family:'Space Grotesk',sans-serif;font-size:20px;line-height:1.3;margin:0 20px 8px 0;word-break:break-word}
.cz-meta{font-size:13px;color:var(--muted);margin-bottom:12px}
.cz-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px;align-items:center}
.cz-actions .btn{flex:0 0 auto}
.czfwd{padding:9px 11px;border-radius:10px;border:1px solid var(--line);background:var(--panel);color:var(--ink);font-size:13px;min-width:0;max-width:100%}
.cz-block{border:1px solid var(--line);border-radius:12px;background:var(--panel2,rgba(255,255,255,.02));padding:12px 14px;margin-bottom:10px;min-width:0}
.cz-lbl{font-size:11px;letter-spacing:.05em;text-transform:uppercase;color:var(--muted2);font-weight:700;margin-bottom:6px}
.cz-text{font-size:14px;color:var(--ink);line-height:1.6;word-break:break-word}
.cz-text.pre{white-space:pre-wrap}
html.light .cz-block{background:#f7faff}
.boardhead .boardnew{width:auto;flex:none;padding:8px 14px;font-size:13px}
.cctop{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:6px;min-width:0}
.prio{font-size:10.5px;font-weight:700;color:#06121f;padding:2px 8px;border-radius:10px;text-transform:uppercase;letter-spacing:.03em}
.cat{font-size:11.5px;color:var(--muted)}
.ccfrom{font-size:12px;color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1;min-width:0}
.srcpill{font-size:10.5px;color:var(--cyan);border:1px solid var(--cyan-d);border-radius:10px;padding:1px 7px;flex:none}
.srcpill.lock{color:var(--warn);border-color:var(--warn)}
/* „Chefklon" — Urheber-Etikett (Gold, klar abgesetzt vom cyan Connector). */
.srcpill.chefklon{color:var(--j);border-color:var(--j);font-weight:600}
.task .tsrc{margin-top:6px}
.ftresor{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin:0 0 14px;padding:10px 13px;border:1px solid var(--line2);border-radius:12px;background:var(--panel2,rgba(255,255,255,.02));font-size:13px;color:var(--ink)}
.ftresor.open{border-color:var(--ok)}
.ftresor .ft-l{flex:1;min-width:0}
.ftresor .ft-in{flex:none;margin:0}
.ftresor input{background:#0a1424;border:1px solid var(--line);border-radius:8px;padding:8px 10px;color:var(--ink);min-width:0;width:140px}
html.light .ftresor input{background:#f6f8fd}
.ccsubj{font-family:'Space Grotesk',sans-serif;font-weight:600;font-size:14.5px;margin:2px 0 4px;word-break:break-word}
.ccsum{font-size:12.5px;color:var(--muted);margin-bottom:8px;word-break:break-word}
.cclbl{display:block;font-size:11px;color:var(--muted);margin:8px 0 4px}
.ccdraft{width:100%;box-sizing:border-box;background:var(--space2);border:1px solid var(--line2);border-radius:10px;
  color:var(--ink);padding:10px 12px;font:inherit;font-size:13.5px;resize:vertical;line-height:1.45}
.ccdraft:focus{outline:none;border-color:var(--cyan-d)}
.attrow{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.attpill{font-size:11.5px;color:var(--warn);border:1px solid var(--line2);border-radius:9px;padding:3px 8px;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ccbtns{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.ccbtns .btn{width:auto;flex:0 1 auto;padding:9px 14px;font-size:13px}
.ccbtns .btn.subtle{background:transparent;border:1px solid var(--line2);color:var(--ink)}
.ccbtns .btn.danger{background:transparent;border:1px solid var(--err);color:var(--err)}
.fwdsel{background:var(--space2);border:1px solid var(--line2);color:var(--ink);border-radius:10px;padding:9px 12px;font-size:13px;max-width:100%}
.fwdsel:focus{outline:none;border-color:var(--cyan-d)}
.tstat{font-size:11px;font-weight:600;padding:2px 9px;border-radius:10px;background:var(--panelb);color:var(--muted)}
.tstat.s-angenommen{background:rgba(79,209,165,.16);color:var(--ok)}
.tstat.s-besprechen{background:rgba(242,193,78,.16);color:var(--warn)}
.tstat.s-abgelehnt{background:rgba(242,112,138,.16);color:var(--err)}
.tstat.s-weitergeleitet{background:rgba(124,156,242,.16);color:var(--s)}
.tcard.s-abgelehnt{opacity:.55}
.tcard.s-abgelehnt .ccsubj{text-decoration:line-through}

/* ===== Leitung (Geschäftsführungs-Tableau) ===== */
.lchip{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;border-radius:50%;
  color:#06121f;font-weight:700;font-size:12px;vertical-align:middle;margin-right:4px}
.ccbtns label.cchint{margin:0 4px 0 0;align-self:center}

/* ===== Multi-account mail (tabs + account colour dots) ===== */
/* Eckige „Ziehharmonika"-Tabs (segmentiert, futuristisch) für Global / tech@ / Persönlich */
.mtabs{display:flex;gap:0;padding:10px;border-bottom:1px solid var(--line)}
.mtab{flex:1 1 0;min-width:0;background:var(--space2);border:1px solid var(--line2);border-right-width:0;border-radius:0;
  padding:10px 10px;font-size:12.5px;color:var(--muted);font-weight:600;letter-spacing:.02em;
  display:flex;align-items:center;justify-content:center;gap:6px;cursor:pointer;transition:background .15s,color .15s,box-shadow .15s;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mtab:first-child{border-top-left-radius:9px;border-bottom-left-radius:9px}
.mtab:last-child{border-right-width:1px;border-top-right-radius:9px;border-bottom-right-radius:9px}
.mtab:hover{color:var(--ink);background:#13233d}
.mtab.on{color:#03212a;background:linear-gradient(180deg,var(--cyan),var(--cyan-d));border-color:var(--cyan-d);font-weight:700;box-shadow:0 0 16px -5px var(--cyan),inset 0 1px 0 rgba(255,255,255,.25)}
.mtab.on .adot{box-shadow:0 0 0 2px rgba(3,33,42,.25)}
html.light .mtab{background:#eef3fc;border-color:#cfdcf2}
html.light .mtab:hover{background:#dbe5f6}
.adot{width:9px;height:9px;border-radius:50%;display:inline-block;flex:none;vertical-align:middle}

/* ===== Topbar back button ===== */
.backbtn{width:32px;height:32px;border-radius:9px;background:var(--space2);border:1px solid var(--line);
  color:var(--ink);font-size:22px;line-height:1;align-items:center;justify-content:center;margin-right:8px;flex:none;cursor:pointer}
.backbtn:hover{border-color:var(--cyan-d);color:var(--cyan)}

/* ===== Light theme (hell) — overrides the palette + prominent dark surfaces ===== */
html.light{
  --space:#eef1f7; --space2:#e4e9f3; --panel:#ffffff; --panelb:#eaf0fb;
  --line:#d4dbe9; --line2:#c4cddf;
  --ink:#0f1c31; --muted:#4b5a76; --muted2:#74849f;
  --cyan:#2f8fe0; --cyan-d:#3ba7ff;
}
html.light body{background:
  radial-gradient(140% 80% at 82% -10%,#d7e6fb 0,transparent 55%),
  radial-gradient(120% 90% at 5% 110%,#e6edfb 0,transparent 50%),var(--space)}
html.light .rail{background:#eaf0fb;border-right-color:var(--line)}
html.light .rail .logo{background-color:#0e1a2e}
html.light .rail [data-nav]{color:var(--muted)}
html.light .rail [data-nav]:hover{background:#dbe5f6;color:var(--ink)}
html.light .rail [data-nav].on{background:linear-gradient(180deg,#deeaff,#eef4ff);color:var(--cyan-d)}
html.light .tile{background:linear-gradient(180deg,#ffffff,#f1f5fd)}
html.light .tile .ico{background:#e6eefb}
html.light .logincard{background:linear-gradient(180deg,#ffffff,#eef3fc)}
html.light .field input,html.light .field textarea,html.light .field select,
html.light .ccdraft,html.light .fwdsel,html.light .addrow input,html.light .backbtn{background:#f6f8fd;color:var(--ink)}
html.light .btn.subtle{background:#eef2fb}
html.light .topbar .pill{background:#f0f4fc}
html.light .who button{background:#eef2fb}
html.light .acctmenu{background:#ffffff}
html.light .mailitem:hover,html.light .task,html.light .rowcard,html.light .ccard,html.light .section{background:#ffffff}
html.light .bubble.them{background:#eef2fb;color:var(--ink)}

/* ===== Profil (LinkedIn-Stil) ===== */
.pfwrap{max-width:940px;margin:0 auto}
.pfcover{height:190px;border-radius:18px;position:relative;overflow:hidden;
  background:linear-gradient(120deg,#0a1220 0,#0e2a3a 45%,var(--cyan-d) 130%)}
.pfcover::before{content:"";position:absolute;inset:0;opacity:.5;
  background-image:linear-gradient(rgba(59,167,255,.09) 1px,transparent 1px),linear-gradient(90deg,rgba(59,167,255,.09) 1px,transparent 1px);
  background-size:26px 26px;mask-image:linear-gradient(120deg,#000,transparent 75%)}
.pfcover::after{content:"";position:absolute;right:-10%;top:-40%;width:60%;height:180%;transform:rotate(18deg);
  background:radial-gradient(closest-side,rgba(59,167,255,.35),transparent);filter:blur(8px)}
/* Avatar sits cleanly ON the cover's lower edge (no more intrusion). */
.pfhead{display:flex;align-items:flex-end;gap:18px;margin:-56px 0 20px;padding:0 12px;flex-wrap:wrap;position:relative;z-index:2}
.pfphoto{width:124px;height:124px;border-radius:50%;background-size:cover;background-position:center;flex:none;
  border:4px solid var(--panel);box-shadow:0 10px 28px -8px rgba(0,0,0,.7),0 0 0 1px var(--cyan-d)}
.pfphoto.pfinitials{display:flex;align-items:center;justify-content:center;font-weight:700;font-size:44px}
.pfid{flex:1;min-width:0;padding-bottom:4px}
.pfname{font-family:'Space Grotesk',sans-serif;font-size:23px;font-weight:600}
.pfhl{color:var(--cyan);font-size:14px;margin-top:2px}
.pfloc{color:var(--muted);font-size:12.5px;margin-top:3px}
.pfedit{width:auto;align-self:center}
.pfgrid{display:grid;grid-template-columns:1fr 320px;gap:18px}
.pfbio{white-space:pre-wrap;font-size:13.5px;line-height:1.6;color:var(--ink)}
.pfchips{display:flex;flex-wrap:wrap;gap:8px}
.pfchip{background:var(--panelb);border:1px solid var(--line2);border-radius:20px;padding:5px 12px;font-size:12.5px;color:var(--ink)}
.pfchip.alt{background:transparent;color:var(--cyan);border-color:var(--cyan-d)}
.pfteam{display:flex;gap:8px;flex-wrap:wrap}
.pfmini{width:38px;height:38px;border-radius:50%;font-weight:700;font-size:14px;border:2px solid transparent;cursor:pointer}
.pfmini.on{border-color:var(--cyan);box-shadow:0 0 0 2px var(--panel) inset}
.pfeditphoto{display:flex;align-items:center;gap:16px;margin-bottom:16px;flex-wrap:wrap}
@media(max-width:760px){.pfgrid{grid-template-columns:1fr}}

/* ===== Topbar: settings icon, clickable user pill, flags ===== */
.iconbtn{width:36px;height:36px;border-radius:10px;background:var(--space2);border:1px solid var(--line2);
  color:var(--muted);display:inline-flex;align-items:center;justify-content:center;flex:none;cursor:pointer;transition:.15s}
.iconbtn svg{width:19px;height:19px}
.iconbtn:hover{color:var(--cyan);border-color:var(--cyan-d);box-shadow:0 0 16px -4px rgba(59,167,255,.5)}
.topbar .userpill{cursor:pointer;transition:.15s}
.topbar .userpill:hover{color:var(--ink);border-color:var(--cyan-d)}
/* Sprache-Umschalter oben rechts — echte Flaggen-Icons (kein Emoji) */
.flags{display:inline-flex;align-items:center;gap:5px;flex:none;line-height:1;user-select:none}
.flagbtn{padding:2px;border:0;background:transparent;cursor:pointer;border-radius:5px;line-height:0;opacity:.5;transition:opacity .15s,transform .12s}
.flagbtn:hover{opacity:1;transform:translateY(-1px)}
.flagbtn.on{opacity:1}
.flagbtn.on .flagwrap{box-shadow:0 0 0 2px var(--cyan-d)}
.flagwrap{display:inline-block;width:22px;height:15px;border-radius:3px;overflow:hidden;box-shadow:0 0 0 1px rgba(255,255,255,.18);vertical-align:middle}
.flagimg{display:block;width:22px;height:15px}
.langbtns .langopt{display:inline-flex;align-items:center;gap:8px}
html.light .flagwrap{box-shadow:0 0 0 1px rgba(0,0,0,.15)}

/* ===== Profil: Werdegang / Ausbildung (LinkedIn-Stil) ===== */
.pfentry{display:flex;gap:12px;padding:12px 0;border-top:1px solid var(--line)}
.pfentry:first-child{border-top:none}
.pfentry .pfelogo{width:44px;height:44px;border-radius:10px;background:var(--panelb);display:flex;align-items:center;justify-content:center;color:var(--cyan);flex:none;font-size:18px}
.pfentry .pfetitle{font-weight:600;font-size:14px}
.pfentry .pfeorg{font-size:13px;color:var(--ink)}
.pfentry .pfeperiod{font-size:12px;color:var(--muted2);margin:2px 0 4px}
.pfentry .pfedesc{font-size:12.5px;color:var(--muted);white-space:pre-wrap}
.pfeditrow{border:1px solid var(--line2);border-radius:12px;padding:12px;margin-bottom:10px;position:relative}
.pfeditrow .pfedel{position:absolute;top:8px;right:8px;color:var(--err);font-size:16px;background:none;border:none;cursor:pointer}
.pfeditrow .row2{display:grid;grid-template-columns:1fr 1fr;gap:8px}
@media(max-width:560px){.pfeditrow .row2{grid-template-columns:1fr}}
.pfeditrow input,.pfeditrow textarea{width:100%;background:var(--space2);border:1px solid var(--line);border-radius:8px;
  padding:9px 11px;color:var(--ink);font-size:13px}
.pfeditrow input:focus,.pfeditrow textarea:focus{outline:none;border-color:var(--cyan-d)}

/* ===== Rich-Text-Editor (Trix) — futuristischer Look ===== */
.sxeditor{border:1px solid var(--line2);border-radius:14px;overflow:hidden;background:linear-gradient(180deg,#0b1830,#0a1424);
  box-shadow:0 10px 34px -18px rgba(0,0,0,.7),inset 0 1px 0 rgba(255,255,255,.03)}
html.light .sxeditor{background:#f6f8fd;border-color:#cfdcf2;box-shadow:0 8px 24px -16px rgba(20,40,80,.25)}
/* Werkzeugleiste: eine zusammenhängende „Glass"-Leiste mit Cyan-Akzent */
.sxfontbar{display:flex;gap:7px;align-items:center;flex-wrap:wrap;padding:10px 10px 8px;
  background:linear-gradient(180deg,rgba(59,167,255,.08),rgba(59,167,255,0));border-bottom:1px solid var(--line)}
html.light .sxfontbar{background:linear-gradient(180deg,rgba(59,167,255,.10),transparent)}
.sxeditor .sxfont{width:auto;min-width:104px;max-width:150px;flex:0 0 auto;background:var(--space2);border:1px solid var(--line2);
  border-radius:9px;padding:7px 9px;color:var(--ink);font-size:12.5px}
.sxeditor .sxfont:focus{outline:none;border-color:var(--cyan-d);box-shadow:0 0 0 3px rgba(59,167,255,.15)}
.sxcolor{display:inline-flex;align-items:center;gap:5px;background:var(--space2);border:1px solid var(--line2);
  border-radius:9px;padding:5px 9px;cursor:pointer;font-size:13px;color:var(--muted)}
.sxcolor span{font-weight:700;color:var(--ink)}
.sxcolor input[type=color]{width:22px;height:22px;padding:0;border:none;background:none;cursor:pointer}
/* Bild- und Signatur-Buttons: klare, moderne Chips */
.sximgbtn,.sxsigbtn{display:inline-flex;align-items:center;gap:5px;background:var(--space2);border:1px solid var(--line2);
  border-radius:9px;padding:7px 11px;color:var(--ink);font-size:12.5px;font-weight:600;cursor:pointer;transition:.15s;white-space:nowrap}
.sximgbtn{border-color:var(--cyan-d);color:var(--cyan)}
.sximgbtn:hover,.sxsigbtn:hover{background:#13233d;transform:translateY(-1px)}
html.light .sximgbtn:hover,html.light .sxsigbtn:hover{background:#dbe5f6}
.sxsigbtn.on{background:linear-gradient(180deg,var(--cyan),var(--cyan-d));color:#03212a;border-color:var(--cyan-d)}
/* Trix toolbar */
trix-toolbar{padding:6px 8px}
trix-toolbar .trix-button-row{flex-wrap:wrap;gap:2px}
trix-toolbar .trix-button-group{border-color:var(--line);background:var(--space2);border-radius:8px;margin-bottom:4px}
trix-toolbar .trix-button{background:transparent;border-bottom:none;height:1.9rem}
trix-toolbar .trix-button:not(:first-child){border-left-color:var(--line)}
trix-toolbar .trix-button.trix-active{background:var(--cyan);color:#03212a}
trix-toolbar .trix-button:not(:disabled):hover{background:#13233d}
html.light trix-toolbar .trix-button:not(:disabled):hover{background:#dbe5f6}
/* invert the black default icons for the dark theme */
html:not(.light) trix-toolbar .trix-button--icon::before{filter:invert(1) brightness(1.6)}
html:not(.light) trix-toolbar .trix-button.trix-active::before{filter:none}
/* editable area */
trix-editor{min-height:220px;max-height:52vh;overflow-y:auto;padding:12px 14px;color:var(--ink);
  font-size:14px;line-height:1.55;border:none;border-top:1px solid var(--line)}
trix-editor:empty:not(:focus)::before{color:var(--muted2)}
trix-editor:focus{outline:none}
trix-editor h1{font-size:1.2em;margin:.2em 0}
trix-editor blockquote{border-left:3px solid var(--line2);margin-left:.3em;padding-left:.8em;color:var(--muted)}
trix-editor a{color:var(--cyan)}
trix-editor img{max-width:100%;height:auto;border-radius:6px}
trix-editor .attachment{max-width:100%}
/* Trix link dialog */
trix-toolbar .trix-dialog{background:var(--panel);border-color:var(--line);box-shadow:0 12px 40px -12px rgba(0,0,0,.6)}
trix-toolbar .trix-input--dialog{background:#0a1424;border:1px solid var(--line);color:var(--ink);border-radius:7px;padding:6px 9px}
html.light trix-toolbar .trix-input--dialog{background:#f6f8fd}
/* attachment tray */
.sxatt{display:flex;flex-wrap:wrap;gap:8px;align-items:center;padding:10px;border-top:1px solid var(--line)}
.sxaddfile{display:inline-flex;align-items:center;gap:6px;cursor:pointer;font-size:12.5px;color:var(--cyan);
  background:var(--space2);border:1px dashed var(--cyan-d);border-radius:8px;padding:7px 12px;white-space:nowrap}
.sxaddfile:hover{background:#13233d}
html.light .sxaddfile:hover{background:#dbe5f6}
.sxchip{display:inline-flex;align-items:center;gap:8px;background:var(--space2);border:1px solid var(--line);
  border-radius:8px;padding:6px 10px;font-size:12.5px;color:var(--ink);max-width:100%;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
.sxchip b{cursor:pointer;color:var(--muted);font-weight:400;padding:0 2px}
.sxchip b:hover{color:var(--warn,#f66)}

/* ===== Login mesh background ===== */
.loginmesh{position:absolute;inset:0;width:100%;height:100%;z-index:0;display:block}
.loginglow{position:absolute;inset:0;z-index:0;pointer-events:none;
  background:radial-gradient(60% 55% at 50% 42%,rgba(59,167,255,.10),transparent 70%),
    radial-gradient(50% 50% at 85% 90%,rgba(255,215,154,.07),transparent 70%),
    radial-gradient(45% 45% at 12% 8%,rgba(59,167,255,.06),transparent 70%)}
#login .logincard{position:relative;z-index:2;backdrop-filter:blur(2px)}
html.light .loginglow{background:radial-gradient(60% 55% at 50% 42%,rgba(10,145,166,.10),transparent 70%),
    radial-gradient(50% 50% at 85% 90%,rgba(212,160,75,.10),transparent 70%)}

/* ===== Startseite: Freigabe-Highlightleiste ===== */
.apprline{margin:0 0 18px;border-radius:16px;padding:14px 16px;border:1px solid var(--line);
  background:linear-gradient(180deg,var(--panel),#0b1626);display:flex;flex-direction:column;gap:10px}
.apprline.active{border-color:var(--cyan-d);box-shadow:0 0 0 1px rgba(59,167,255,.25),0 14px 40px -22px rgba(59,167,255,.5)}
html.light .apprline{background:linear-gradient(180deg,#ffffff,#f1f5fd)}
.apprtitle{display:flex;align-items:center;gap:9px;font-family:'Space Grotesk',sans-serif;font-size:13px;font-weight:600;color:var(--ink)}
.apprdot{width:9px;height:9px;border-radius:50%;background:var(--warn);box-shadow:0 0 0 4px rgba(240,180,80,.16);animation:apprpulse 1.8s ease-in-out infinite}
.apprdot.ok{background:var(--cyan);box-shadow:0 0 0 4px rgba(59,167,255,.14);animation:none}
@keyframes apprpulse{0%,100%{opacity:1}50%{opacity:.45}}
.apprchips{display:flex;flex-wrap:wrap;gap:10px}
.apprchip{display:inline-flex;align-items:center;gap:8px;min-width:0;cursor:pointer;font-size:13px;font-weight:500;
  color:var(--ink);background:var(--space2);border:1px solid var(--line);border-radius:11px;padding:9px 13px;transition:.15s}
.apprchip:hover{transform:translateY(-1px);border-color:var(--cyan-d)}
.apprchip .ai{font-size:15px;line-height:1}
.apprchip .ar{color:var(--muted);font-weight:700;margin-left:2px}
.apprchip.warn{border-left:3px solid var(--warn)}
.apprchip.cyan{border-left:3px solid var(--cyan)}
.apprchip.gold{border-left:3px solid var(--light)}
.apprempty{color:var(--muted);font-size:13px}
.apprloading{display:flex;align-items:center;gap:9px;color:var(--muted);font-size:13px}
.dotpulse{width:8px;height:8px;border-radius:50%;background:var(--cyan);animation:apprpulse 1.2s ease-in-out infinite}

/* ===== Startseite: Verschiebe-Hinweis + Drag-Zustände ===== */
.gridhint{display:flex;align-items:center;gap:10px;margin:0 0 14px;padding:9px 13px;border-radius:11px;
  font-size:12.5px;color:var(--muted);background:var(--space2);border:1px dashed var(--line2)}
.gridhint span{flex:1;min-width:0}
.gridhint b{color:var(--ink);font-weight:600}
.gridhint button{flex:none;width:24px;height:24px;border-radius:7px;border:none;background:none;color:var(--muted);cursor:pointer;font-size:13px}
.gridhint button:hover{background:var(--panelb);color:var(--ink)}
.tile{cursor:pointer;touch-action:manipulation}
.tile.tilechosen{border-color:var(--cyan-d);box-shadow:0 0 0 1px var(--cyan-d),0 18px 50px -20px rgba(59,167,255,.5);transform:scale(1.01)}
.tile.tiledrag{opacity:.35}

/* ===== Rail: Konzept-Gruppentrenner ===== */
.raildiv{width:100%;padding:9px 0 3px;pointer-events:none;overflow:hidden}
.raildiv span{display:none;font-family:'JetBrains Mono',monospace;font-size:9px;letter-spacing:.22em;
  text-transform:uppercase;color:var(--muted2);padding-left:12px;white-space:nowrap}
.raildiv::before{content:"";display:block;height:1px;margin:0 10px;background:var(--line)}
.railopen .raildiv::before,.rail:hover .raildiv::before{margin:0 12px 5px}
.railopen .raildiv span,.rail:hover .raildiv span{display:block}

/* ===== Aufgaben: Triage-Box + Board-Kopf ===== */
.triagebox{border:1px solid var(--line);border-radius:16px;padding:16px;margin-bottom:16px;
  background:linear-gradient(180deg,var(--panel),#0b1626)}
html.light .triagebox{background:linear-gradient(180deg,#ffffff,#f1f5fd)}
.triagebox>h3{display:flex;align-items:center;gap:8px;font-family:'Space Grotesk',sans-serif;font-size:15px}
/* Triage nebeneinander: 2/3 (Entwürfe) + 1/3 (Bestätigungen), mobil untereinander. */
.triagegrid{display:grid;grid-template-columns:2fr 1fr;gap:16px;align-items:start}
.triagegrid>.triagebox{min-width:0;margin-bottom:16px}
@media (max-width:820px){.triagegrid{grid-template-columns:1fr;gap:0}}
/* System-Immunsystem · Bug-Eingang */
.bugbox{border-color:rgba(242,112,138,.45)}
.bugbox>h3{color:#F2708A}
.bugcard{border-color:rgba(242,112,138,.35)}
.bugflag{background:#F2708A!important;color:#1a0a0f!important}
.bugactions{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
/* Frag den Chef — Freigabe-Karten + Mitarbeiter-Fenster */
.bossbox{border-color:rgba(90,140,255,.45)}
.bossbox>h3{color:#8fb6ff}
.bosscard{border-color:rgba(90,140,255,.35)}
.bosscard .bossq{font-size:14px;color:var(--ink);line-height:1.5;margin:4px 0 10px;font-style:italic}
.bosscard .bosslbl{display:block;font-size:11.5px;color:var(--muted);margin-bottom:4px}
.bossdraft{width:100%;min-height:70px;background:var(--panel);border:1px solid var(--line2);border-radius:10px;padding:9px 11px;color:var(--ink);font-size:13.5px;line-height:1.5;resize:vertical}
.bossdraft:focus{outline:none;border-color:#5a8bff;box-shadow:0 0 0 2px rgba(90,140,255,.2)}
.bosscard .tc-btns{display:flex;flex-wrap:wrap;gap:8px;margin-top:9px}
.bosscard .btn.sm{padding:7px 13px;font-size:12.5px}
.bossstat{font-size:12px;color:var(--muted);margin-top:7px;min-height:15px}
.askboss .abq{width:100%;min-height:74px;background:var(--panel);border:1px solid var(--line2);border-radius:10px;padding:10px 12px;color:var(--ink);font-size:14px;line-height:1.5;resize:vertical;margin-bottom:10px}
.askboss .abq:focus{outline:none;border-color:#5a8bff;box-shadow:0 0 0 2px rgba(90,140,255,.2)}
.abans{margin-top:12px}
.abans-card{background:linear-gradient(150deg,rgba(59,167,255,.10),rgba(139,92,255,.08));border:1px solid rgba(120,160,255,.3);border-radius:12px;padding:12px 14px}
.abans-h{font-size:11.5px;letter-spacing:.3px;color:#8fb6ff;margin-bottom:6px}
.abans-b{font-size:13.5px;color:var(--ink);line-height:1.6}
.buganalysis{margin-top:10px}
.buganalysis:empty{margin-top:0}
.bugana-out{background:var(--space2);border:1px solid var(--line);border-radius:12px;padding:11px 13px;font-size:13px;line-height:1.6}
.bugana-out.err{color:var(--err);border-color:rgba(242,112,138,.4)}
/* Aktions-Vorschläge (Action Engine) */
.actbox>h3::before{background:linear-gradient(180deg,#22d3ee,#3b82f6)}
.actcard{background:var(--bg,#0b1626);border:1px solid var(--line);border-left:3px solid #22d3ee;border-radius:12px;padding:11px 13px;margin-top:9px}
.actcard-h{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:5px}
.actkind{font-size:11.5px;font-weight:800;color:#0891b2;background:rgba(34,211,238,.14);padding:2px 8px;border-radius:8px;flex:none}
.actsrc{font-size:11.5px;color:var(--muted);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.acttitle{font-size:13.5px;font-weight:700;color:var(--ink);line-height:1.4;word-break:break-word}
.actnote{font-size:12.5px;color:var(--muted);line-height:1.5;margin-top:3px;word-break:break-word}
.actrow{display:flex;gap:8px;margin-top:9px;flex-wrap:wrap}
.actassignee,.actdue{padding:7px 9px;border:1px solid var(--line);border-radius:9px;background:var(--panel);color:var(--ink);font:inherit;font-size:12.5px;min-width:0}
.actassignee{flex:1 1 130px}
.actdue{flex:1 1 130px}
.actbtns{display:flex;gap:7px;margin-top:9px;flex-wrap:wrap}
.actbtns .btn{padding:7px 13px;font-size:12.5px;flex:0 0 auto}
.actbtns .btn.ok{background:#16a34a;border-color:#16a34a;color:#fff}
@media(max-width:640px){.actbtns .btn{flex:1 1 auto}}
/* Archiv erledigter Antworten. */
.arcbox>h3{display:flex;align-items:center;gap:8px;font-family:'Space Grotesk',sans-serif;font-size:15px}
.arclist{display:flex;flex-direction:column;gap:8px}
.arccard{border:1px solid var(--line);border-radius:12px;padding:9px 12px;background:var(--panel);min-width:0}
.arc-h{display:flex;align-items:center;gap:8px;min-width:0}
.arc-h b{font-size:13px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.arc-ico{flex:0 0 auto}
.arc-meta{font-size:11.5px;color:var(--muted);margin-top:2px}
.boardhead{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;margin:4px 2px 12px}
.boardhead h3{font-family:'Space Grotesk',sans-serif;font-size:16px}
.boardhead .cchint{margin:0}

/* ===== Kalender (FullCalendar, an MagnaX-Theme angepasst) ===== */
.calwrap{--fc-border-color:var(--line);--fc-page-bg-color:transparent;
  --fc-neutral-bg-color:var(--space2);--fc-neutral-text-color:var(--muted);
  --fc-today-bg-color:rgba(59,167,255,.08);--fc-now-indicator-color:var(--cyan);
  --fc-list-event-hover-bg-color:var(--panelb);--fc-highlight-color:rgba(59,167,255,.12);
  --fc-event-text-color:#04222b;color:var(--ink)}
.calwrap .fc{font-family:inherit;font-size:13.5px}
.calwrap .fc a{color:inherit;text-decoration:none}
/* Prev/Next-Icons: FullCalendars eingebettetes Icon-Font (data:) wird von der
   CSP (font-src ohne data:) blockiert -> Tofu-Kästchen. Wir rendern die Pfeile
   CSP-sicher als Unicode im normalen Font (kein Fremd-Font nötig). */
.calwrap .fc .fc-icon{font-family:inherit!important;speak:none}
.calwrap .fc .fc-icon-chevron-left::before{content:"‹";font-size:1.5em;line-height:1}
.calwrap .fc .fc-icon-chevron-right::before{content:"›";font-size:1.5em;line-height:1}
.calwrap .fc .fc-toolbar.fc-header-toolbar{margin-bottom:14px;flex-wrap:wrap;gap:8px}
.calwrap .fc .fc-toolbar-title{font-family:'Space Grotesk',sans-serif;font-size:18px;color:var(--ink)}
.calwrap .fc .fc-col-header-cell-cushion{color:var(--muted);font-weight:600;padding:8px 4px}
.calwrap .fc .fc-daygrid-day-number{color:var(--ink);padding:6px 8px;font-size:12.5px}
.calwrap .fc .fc-day-other .fc-daygrid-day-number{color:var(--muted2)}
.calwrap .fc-theme-standard td,.calwrap .fc-theme-standard th,.calwrap .fc-scrollgrid{border-color:var(--line)}
.calwrap .fc .fc-daygrid-day.fc-day-today{background:var(--fc-today-bg-color)}
/* Buttons an .btn-Look angleichen */
.calwrap .fc .fc-button-primary{background:var(--space2);border:1px solid var(--line);color:var(--ink);
  text-transform:none;font-weight:500;box-shadow:none;padding:6px 11px}
.calwrap .fc .fc-button-primary:hover{background:var(--panelb);border-color:var(--cyan-d)}
.calwrap .fc .fc-button-primary:not(:disabled).fc-button-active,
.calwrap .fc .fc-button-primary:not(:disabled):active{background:linear-gradient(90deg,var(--cyan-d),var(--cyan));border-color:transparent;color:#03212a}
.calwrap .fc .fc-button-primary:disabled{opacity:.5}
.calwrap .fc .fc-button:focus,.calwrap .fc .fc-button-primary:focus{box-shadow:none;outline:2px solid var(--cyan);outline-offset:1px}
.calwrap .fc .fc-neu-button,.calwrap .fc .fc-neu-button:not(:disabled):active{background:linear-gradient(90deg,var(--cyan-d),var(--cyan));color:#03212a;border:none;font-weight:600}
.calwrap .fc .fc-neu-button:hover{filter:brightness(1.08)}
/* Events */
.calwrap .fc .fc-event{border-radius:6px;padding:1px 5px;font-size:12px;cursor:pointer;font-weight:500}
.calwrap .fc .fc-daygrid-event{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.calwrap .fc .fc-daygrid-event .fc-event-time{font-weight:600}
.calwrap .fc .fc-more-link{color:var(--cyan);font-size:11px}
/* Listen-Ansicht */
.calwrap .fc .fc-list{border-color:var(--line)}
.calwrap .fc .fc-list-day-cushion{background:var(--space2);color:var(--ink)}
.calwrap .fc .fc-list-event:hover td{background:var(--panelb)}
.calwrap .fc .fc-list-event-title,.calwrap .fc .fc-list-event-time{color:var(--ink)}
.calwrap .fc .fc-list-empty{background:transparent;color:var(--muted)}
@media(max-width:560px){.calwrap .fc .fc-toolbar-title{font-size:15px}.calwrap .fc .fc-toolbar.fc-header-toolbar{gap:6px}}

/* ===== Dateien: Dropzone + Galerie + Lightbox ===== */
.dropzone{border:2px dashed var(--line2);border-radius:16px;padding:26px 18px;text-align:center;
  cursor:pointer;transition:.15s;margin-bottom:18px;background:var(--space2)}
.dropzone:hover{border-color:var(--cyan-d);background:var(--panelb)}
.dropzone.over{border-color:var(--cyan);background:rgba(59,167,255,.08);transform:scale(1.005)}
.dropzone .dzico{font-size:28px;margin-bottom:6px}
.dropzone .dztext{font-size:14px;color:var(--ink)}
.dropzone .dzlink{color:var(--cyan);text-decoration:underline}
.dropzone .dzsub{font-size:12px;color:var(--muted2);margin-top:4px}
.dropzone #fileStatus{margin-top:8px;color:var(--cyan)}
/* Ablage-Pflege (nur Geschäftsführung): Belegung + Sammel-Löschung + Chunk-Aufräumer */
.fmaint{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:-8px 0 16px;font-size:12.5px;color:var(--muted)}
.fmaint .fm-l{font-weight:700;color:var(--ink);flex:none}
.fmaint .fm-cap{color:var(--muted2);margin-right:auto;min-width:0;overflow:hidden;text-overflow:ellipsis}
.fmbtn{font-size:11.5px;color:var(--muted);background:none;border:1px solid var(--line2);border-radius:20px;
  padding:4px 11px;cursor:pointer;transition:.15s;flex:none}
.fmbtn:hover{color:var(--ink);border-color:var(--cyan-d)}
.fmbtn:disabled{opacity:.55;cursor:default}
.filegrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:14px}
.filecard{background:linear-gradient(180deg,var(--panel),#0b1626);border:1px solid var(--line);
  border-radius:14px;overflow:hidden;display:flex;flex-direction:column;min-width:0}
html.light .filecard{background:linear-gradient(180deg,#ffffff,#f1f5fd)}
.filethumb{display:flex;align-items:center;justify-content:center;height:130px;border-bottom:1px solid var(--line);
  background:var(--space2);text-decoration:none}
.filethumb.img{background-size:cover;background-position:center;cursor:zoom-in}
.filethumb.ico{font-size:44px;color:var(--muted)}
.filemeta{padding:10px 12px 4px;min-width:0}
.filename{font-size:13px;font-weight:600;color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.filebtns{display:flex;align-items:center;gap:8px;padding:8px 12px 12px;margin-top:auto}
.filebtns .pill{flex:1;text-align:center}
.lightbox{position:fixed;inset:0;z-index:200;display:none;align-items:center;justify-content:center;
  background:rgba(3,8,18,.9);backdrop-filter:blur(4px);padding:24px}
.lightbox.show{display:flex}
.lightbox figure{max-width:92vw;max-height:92vh;display:flex;flex-direction:column;gap:10px;align-items:center}
.lightbox img{max-width:92vw;max-height:82vh;border-radius:12px;box-shadow:0 30px 90px -20px rgba(0,0,0,.8)}
.lightbox figcaption{color:#cfe0f5;font-size:13px}
.lbclose{position:absolute;top:18px;right:22px;width:40px;height:40px;border-radius:50%;border:none;
  background:rgba(255,255,255,.1);color:#fff;font-size:22px;cursor:pointer}
.lbclose:hover{background:rgba(255,255,255,.2)}

/* ===== Notizen (Rich) + Suchleiste ===== */
.notecard{background:linear-gradient(180deg,var(--panel),#0b1626);border:1px solid var(--line);
  border-radius:14px;padding:14px 16px;margin-bottom:12px}
html.light .notecard{background:linear-gradient(180deg,#ffffff,#f1f5fd)}
.notetop{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:6px}
.notetop .rtitle{font-family:'Space Grotesk',sans-serif;font-size:15px}
.notetop .rtitle.muted{color:var(--muted2);font-weight:500}
.notebody{color:var(--ink);font-size:14px;line-height:1.55;margin-bottom:8px;word-break:break-word}
.notebody img{max-width:100%;height:auto;border-radius:8px}
.notebody a{color:var(--cyan)}
.notebody blockquote{border-left:3px solid var(--line2);margin:.4em 0;padding-left:.8em;color:var(--muted)}
.notebody ul,.notebody ol{padding-left:1.4em;margin:.3em 0}
.searchbar{display:flex;align-items:center;gap:10px;background:var(--space2);border:1px solid var(--line);
  border-radius:11px;padding:9px 13px;margin-bottom:14px}
.searchbar .si{color:var(--muted);font-size:14px}
.searchbar input{flex:1;min-width:0;background:none;border:none;color:var(--ink);font-size:14px;outline:none}
.searchbar .cnt{flex:none}

/* ===== Chat: Anhänge + Emoji ===== */
.chatinput{position:relative}
.chaticon{flex:none;width:38px;height:38px;border-radius:10px;font-size:17px;color:var(--muted);
  display:flex;align-items:center;justify-content:center;transition:.15s}
.chaticon:hover{background:var(--panelb);color:var(--ink)}
.emojipop{position:absolute;bottom:52px;left:8px;z-index:30;display:grid;grid-template-columns:repeat(8,1fr);gap:2px;
  background:var(--panel);border:1px solid var(--line2);border-radius:12px;padding:8px;
  box-shadow:0 16px 44px -14px rgba(0,0,0,.6);max-width:300px}
.emojipop button{width:32px;height:32px;border-radius:8px;font-size:18px;line-height:1}
.emojipop button:hover{background:var(--panelb)}
.bubble .chatimg{max-width:220px;max-height:240px;border-radius:10px;cursor:zoom-in;display:block}
.bubble .bcap{margin-top:5px;font-size:13.5px}
.bubble .chatfile{display:flex;align-items:center;gap:10px;text-decoration:none;color:inherit;
  background:rgba(255,255,255,.08);border-radius:10px;padding:8px 11px;min-width:0}
.bubble.them .chatfile{background:var(--space2)}
.chatfile .cfico{font-size:20px;flex:none}
.chatfile .cfmeta{display:flex;flex-direction:column;min-width:0}
.chatfile .cfname{font-weight:600;font-size:13px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:170px}
.chatfile .cfsize{font-size:11px;opacity:.75}

/* ===== CRM: Fristen-Dringlichkeit ===== */
.pill.days.od{background:var(--err);color:#fff;font-weight:600}
.pill.days.soon{background:var(--warn);color:#241a02;font-weight:600}
.pill.days.near{background:var(--light);color:#241d02}
.pill.days.ok{background:var(--space2);color:var(--muted)}

/* ===== Mobile-Feinschliff (Android-first, ~360px) ===== */
@media(max-width:560px){
  /* Dateien: 2 Spalten passen sauber */
  .filegrid{grid-template-columns:repeat(auto-fill,minmax(148px,1fr));gap:12px}
  .filethumb{height:108px}
  /* Kalender: kompaktere Schrift, damit 7 Spalten passen; notfalls im
     Kalender-Container (nicht der Seite) horizontal scrollbar */
  .calwrap{overflow-x:auto}
  .calwrap .fc .fc-daygrid-day-number{padding:3px 4px;font-size:11px}
  .calwrap .fc .fc-col-header-cell-cushion{padding:6px 1px;font-size:10px}
  .calwrap .fc .fc-daygrid-event{font-size:10px;padding:0 3px}
  .calwrap .fc .fc-toolbar.fc-header-toolbar{gap:6px}
  .calwrap .fc .fc-button-primary{padding:5px 8px;font-size:12px}
  /* Editor: nie breiter als der Container */
  .sxeditor{max-width:100%;overflow:hidden}
  .sxeditor .sxfont{min-width:84px;max-width:120px}
  .sxatt{gap:6px}
  /* Chat-Bild nicht zu breit */
  .bubble .chatimg{max-width:180px}
}

/* ===== MagnaX AI ===== */
/* Pulsierender Orb (Startseiten-Kachel + Header + Chat) */
.aiorb{position:relative;width:64px;height:64px;display:inline-flex;align-items:center;justify-content:center;flex:none}
.aiorb-core{position:absolute;inset:18%;border-radius:50%;
  background:radial-gradient(circle at 35% 30%,#eafcff 0,#7cc4ff 30%,#3ba7ff 55%,#1e5fa8 100%);
  box-shadow:0 0 22px 4px rgba(59,167,255,.6),0 0 60px 10px rgba(59,167,255,.25);
  will-change:transform;transform:translateZ(0);backface-visibility:hidden;
  animation:aipulse 2.6s ease-in-out infinite}
.aiorb-ring{position:absolute;inset:0;border-radius:50%;border:1px solid rgba(59,167,255,.5);
  will-change:transform,opacity;animation:airing 2.6s ease-out infinite}
/* Nur transform animieren (GPU) — kein filter:brightness (das flimmert auf TVs). */
@keyframes aipulse{0%,100%{transform:scale(1) translateZ(0)}50%{transform:scale(1.06) translateZ(0)}}
@keyframes airing{0%{transform:scale(.7);opacity:.7}80%,100%{transform:scale(1.35);opacity:0}}
.aiorb.big{width:104px;height:104px}
.aiorb.sm{width:26px;height:26px}
.aiorb.sm .aiorb-core{inset:6%}
.aiorb.tiny{width:20px;height:20px}.aiorb.tiny .aiorb-core{inset:0}
.aiorb.tiny .aiorb-ring{display:none}
.aiorb.busy .aiorb-core{animation-duration:.9s}
/* AI-Kachel auf der Startseite */
.tile.aitile{align-items:flex-start;background:
  radial-gradient(120% 80% at 80% -10%,rgba(59,167,255,.16),transparent 60%),
  linear-gradient(180deg,var(--panel),#0b1626);border-color:var(--cyan-d)}
.tile.aitile .aiorb{margin-bottom:12px}
.tile.aitile h3{color:var(--cyan)}
html.light .tile.aitile{background:radial-gradient(120% 80% at 80% -10%,rgba(10,145,166,.14),transparent 60%),linear-gradient(180deg,#ffffff,#eef6fb)}
/* Rail-Eintrag leicht hervorgehoben */
.rail .railai{color:var(--cyan)}
.rail .railai:hover{background:#12283b}
/* KI-Fenster */
.aiwrap{display:flex;flex-direction:column;height:calc(100vh - 128px);min-height:420px}
.aihead{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding-bottom:12px;border-bottom:1px solid var(--line);margin-bottom:12px}
.aibrand{display:flex;align-items:center;gap:9px;font-family:'Space Grotesk',sans-serif;font-size:15px;color:var(--ink)}
.aimodels{display:flex;flex-wrap:wrap;gap:2px;max-width:100%;background:var(--space2);border:1px solid var(--line);border-radius:10px;padding:3px}
.aimodel{padding:6px 12px;border-radius:8px;font-size:12.5px;font-weight:600;color:var(--muted);white-space:nowrap}
.aimodel.on{background:linear-gradient(90deg,var(--cyan-d),var(--cyan));color:#03212a}
/* Autonome Eigen-Motoren (Control · Vision) — farblich abgesetzt: kein externes
   KI-Modell, rein aus dem Haus. Grün-Smaragd statt Cyan. */
.aimodel.own{color:#2fd8a6}
.aimodel.own.on{background:linear-gradient(90deg,#0f7f5e,#22c99a);color:#022018}
/* Trenner zwischen der autonomen Gruppe und den KI-gestützten Stufen. */
.aimdiv{width:1px;align-self:stretch;margin:2px 4px;background:var(--line)}
/* Frei — freie KI-Wahl (Pay-per-use), dezent golden abgesetzt. */
.aimodel.free{color:var(--gold,#f0b942)}
.aimodel.free.on{background:linear-gradient(90deg,#b8891f,#f0b942);color:#221803}
/* Farbiger Punkt je KI + ℹ-Legende „was kann welche KI" */
.aimodel{display:inline-flex;align-items:center;gap:6px}
.aimdot{width:8px;height:8px;border-radius:50%;flex:none;display:inline-block;vertical-align:middle}
.aimodel-info{width:26px;height:26px;border-radius:8px;border:1px solid var(--line2);background:var(--space2);color:var(--cyan);cursor:pointer;font-size:13px;font-weight:700;flex:none;margin-left:4px}
.aimodel-info:hover{border-color:var(--cyan)}
.aimodel-legend{margin:8px 0 2px;border:1px solid var(--line2);border-radius:12px;background:var(--panel);padding:8px;display:flex;flex-direction:column;gap:4px}
.aiml-row{display:flex;align-items:center;gap:9px;text-align:left;padding:7px 9px;border-radius:9px;background:transparent;border:1px solid transparent;color:var(--ink);cursor:pointer;font-size:12.5px;min-width:0}
.aiml-row:hover{border-color:var(--cyan)}
.aiml-row.on{border-color:var(--cyan);background:color-mix(in srgb,var(--cyan) 12%,transparent)}
.aiml-row b{flex:none;min-width:66px}
.aiml-row>span:last-child{color:var(--muted);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.aihint-model{display:inline-flex;align-items:center;gap:5px;min-width:0}
.aihint-desc{color:var(--muted)}
.aiproj{display:inline-flex;align-items:center;gap:7px;font-size:12.5px;color:var(--muted);cursor:pointer;margin-left:auto}
.aiproj input{accent-color:var(--cyan)}
.aimsgs{flex:1;overflow-y:auto;display:flex;flex-direction:column;gap:14px;padding:4px 2px}
.aibubble{display:flex;gap:10px;max-width:88%}
.aibubble.user{align-self:flex-end}
.aibubble.user .aibody{background:linear-gradient(90deg,var(--cyan-d),var(--cyan));color:#03212a;border-radius:14px 14px 4px 14px}
.aibubble.bot{align-self:flex-start}
.aibotmark{flex:none;margin-top:2px}
.aibubble.bot .aibody{background:var(--space2);border:1px solid var(--line);border-radius:14px 14px 14px 4px;color:var(--ink)}
.aibody{padding:11px 14px;font-size:14px;line-height:1.55;word-break:break-word;min-width:0}
.aibody b{font-weight:700}
/* Erzeugtes Bild (🎨) in der Chat-Blase — passt sich der Breite an. */
.aiimg{margin:9px 0 2px;display:flex;flex-direction:column;gap:6px;max-width:100%}
.aiimg img{max-width:100%;width:auto;height:auto;border-radius:12px;border:1px solid var(--line);display:block}
.aiimg-dl{align-self:flex-start;font-size:12px;font-weight:600;color:var(--cyan);text-decoration:none;
  border:1px solid var(--line);border-radius:9px;padding:5px 11px}
.aiimg-dl:hover{border-color:var(--cyan)}
.aithinking{display:flex;gap:5px;align-items:center}
.aithinking span{width:7px;height:7px;border-radius:50%;background:var(--cyan);opacity:.5;animation:aidot 1s infinite}
.aithinking span:nth-child(2){animation-delay:.2s}.aithinking span:nth-child(3){animation-delay:.4s}
@keyframes aidot{0%,100%{opacity:.35;transform:translateY(0)}50%{opacity:1;transform:translateY(-3px)}}
.aiwelcome{margin:auto;text-align:center;max-width:440px;padding:20px}
.aiwelcome .aiorb{margin:0 auto 14px}
.aiwelcome h3{font-family:'Space Grotesk',sans-serif;font-size:22px;margin-bottom:8px}
.aiwelcome p{color:var(--muted);font-size:14px;line-height:1.6;margin-bottom:16px}
.aichips{display:flex;flex-wrap:wrap;gap:8px;justify-content:center}
.aichip{background:var(--space2);border:1px solid var(--line);border-radius:20px;padding:8px 14px;font-size:12.5px;color:var(--ink);cursor:pointer}
.aichip:hover{border-color:var(--cyan-d);transform:translateY(-1px)}
.aiatt{display:flex;flex-wrap:wrap;gap:8px}
.aiatt:not(:empty){padding:8px 0 0}
.aiinput{display:flex;align-items:flex-end;gap:8px;padding-top:10px;border-top:1px solid var(--line);margin-top:8px}
.aiinput textarea{flex:1;min-width:0;resize:none;background:#0a1424;border:1px solid var(--line);border-radius:12px;
  padding:11px 13px;color:var(--ink);font-size:14px;line-height:1.5;max-height:140px}
html.light .aiinput textarea{background:#f6f8fd}
.aiinput textarea:focus{outline:none;border-color:var(--cyan-d)}
.aiinput .btn{width:auto;padding:11px 16px;margin:0;flex:none}
.aiinput .btn.aistop{background:transparent;border:1px solid var(--err);color:var(--err);font-size:15px}
.aiinput .btn.aistop:hover{background:rgba(255,106,106,.12)}
[hidden]{display:none!important}
.aihint{font-size:11px;color:var(--muted2);text-align:center;padding-top:8px;display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:4px 7px}
.aihint b{color:var(--muted)}
.aihint-warn{color:var(--gold,#f0b942);opacity:.9}
.aihint-sep{opacity:.4}
.aimodeltag{display:inline-block;margin-top:7px;font-size:10.5px;font-weight:600;color:var(--muted2);background:var(--space2);border:1px solid var(--line);border-radius:999px;padding:1px 8px;letter-spacing:.02em}
/* Abgebrochene KI-Antwort: klar als unvollständig kennzeichnen */
.aibubble.bot.incomplete .aibody{border-color:rgba(240,170,90,.5);border-left:3px solid #f0aa5a}
.aiincomplete{display:flex;align-items:center;gap:9px;flex-wrap:wrap;margin-top:9px;padding:8px 11px;border-radius:10px;
  background:rgba(240,170,90,.12);border:1px solid rgba(240,170,90,.35);font-size:12.5px;color:var(--ink)}
.airedo{background:linear-gradient(135deg,#f0aa5a,#e8863c);border:none;color:#241300;font-weight:700;font-size:12px;
  border-radius:8px;padding:5px 12px;cursor:pointer}
.airedo:hover{filter:brightness(1.07)}
@media(max-width:560px){.aiwrap{height:calc(100vh - 120px)}.aibubble{max-width:94%}.aiproj{margin-left:0}}

/* ===== MagnaX AI — Zwei-Spalten-App (Chats + Projekte) ===== */
.aiapp{display:flex;height:calc(100vh - 96px);height:calc(100dvh - 96px);min-height:440px;border:1px solid var(--line);
  border-radius:16px;overflow:hidden;background:linear-gradient(180deg,var(--panel),#0b1626)}
html.light .aiapp{background:linear-gradient(180deg,#ffffff,#f1f5fd)}
.aisidebar{width:252px;flex:none;border-right:1px solid var(--line);display:flex;flex-direction:column;
  gap:14px;padding:14px;overflow-y:auto;background:var(--space2)}
html.light .aisidebar{background:#eef2fb}
.ainew{width:100%;margin:0}
.aisec-h{display:flex;align-items:center;justify-content:space-between;font-size:11px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--muted2);margin-bottom:6px;font-family:'JetBrains Mono',monospace}
.aiadd,.aiicn{width:22px;height:22px;border-radius:6px;color:var(--muted);font-size:13px;line-height:1;
  display:inline-flex;align-items:center;justify-content:center;flex:none}
.aiadd:hover,.aiicn:hover{background:var(--panelb);color:var(--ink)}
.aichat{display:flex;align-items:center;gap:2px;border-radius:9px;padding:7px 8px;cursor:pointer;color:var(--ink)}
.aichat:hover{background:var(--panelb)}
.aichat.on{background:#12283b;box-shadow:0 0 0 1px var(--cyan-d) inset}
html.light .aichat.on{background:#deeaff}
.aichat .acht{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:13px}
.aichat .aiicn{opacity:0}
.aichat:hover .aiicn,.aichat.on .aiicn{opacity:1}
.aiproject{margin-bottom:10px}
.aiproj-h{display:flex;align-items:center;justify-content:space-between;gap:4px;padding:3px 2px}
.aipj-name{font-size:12.5px;font-weight:600;color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.aipj-acts{display:flex;flex:none}
.aiproj-chats{padding-left:8px;border-left:1px solid var(--line);margin:2px 0 0 5px}
.aiempty2{font-size:11.5px;color:var(--muted2);padding:4px 6px}
.aimain{flex:1;min-width:0;display:flex;flex-direction:column;padding:14px}
/* Chat + Wissen-Radar untereinander: Chat-Fenster begrenzen, Ansicht scrollbar. */
.aimain.has-radar{overflow-y:auto}
.aimain.has-radar .aimsgs{flex:none;min-height:240px;max-height:52vh}

/* ===== Wissen-Radar (Pull-Cockpit) ===== */
.radar-cockpit{margin-top:16px}
/* Im Maschinenraum-Sheet (Modal) rahmt das Cockpit sauber: kein 100%-Höhen-
   Kollaps, kein doppelter Rand-Abstand — der Inhalt fließt natürlich im Sheet. */
.motorsheet{min-width:0}
.motorsheet .eigen{height:auto;min-height:0;padding:0}
.motorsheet .radar-cockpit{margin-top:0}
/* Wissensbasis/Trainings-Agent bringen aus der KI-Ansicht eine eigene
   Kopfzeile (Zurück-Pfeil + Titel) mit — im Sheet steht der Titel schon im
   Modal-Kopf, also ausblenden. mxwrap fließt dann randlos im Sheet. */
.motorsheet .aitop{display:none}
.motorsheet .mxwrap{padding:0}
/* Flächiges Live-Cockpit: drei Fenster (Aktiver Scan · Ablage · Verarbeitungs-Strom). */
.radar-live{margin-top:14px}
.rl-grid{display:grid;grid-template-columns:1.35fr 1fr;grid-template-areas:"scan cats" "feed cats";gap:12px}
.rl-scan{grid-area:scan}.rl-cats{grid-area:cats}.rl-feed{grid-area:feed}
.rl-scan,.rl-cats,.rl-feed{background:#0a1424;border:1px solid var(--line);border-radius:12px;padding:13px}
html.light .rl-scan,html.light .rl-cats,html.light .rl-feed{background:#f1f5fd}
.rl-idle{color:var(--muted);font-size:13px}.rl-idle.sm{font-size:12.5px}
.rl-scan{display:flex;flex-direction:column;gap:7px;min-height:118px;justify-content:center}
.rl-scan-h{display:flex;align-items:center;gap:8px;font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--cyan);font-weight:700}
.rl-live-dot{width:9px;height:9px;border-radius:50%;background:var(--cyan);box-shadow:0 0 10px var(--cyan);animation:aidot 1s infinite}
.rl-scan-area{font-family:'Space Grotesk',sans-serif;font-size:21px;font-weight:700;color:var(--ink)}
.rl-scan-phase{font-size:12.5px;color:var(--muted)}
.rl-beam{height:6px;border-radius:6px;background:rgba(56,225,255,.1);overflow:hidden;position:relative}
.rl-beam span{position:absolute;top:0;bottom:0;width:38%;border-radius:6px;
  background:linear-gradient(90deg,transparent,var(--cyan),transparent);animation:rlbeam 1.1s linear infinite}
.rl-beam.proc span{background:linear-gradient(90deg,transparent,var(--violet),transparent);animation-duration:.8s}
@keyframes rlbeam{0%{left:-40%}100%{left:100%}}
.rl-cats{display:flex;flex-direction:column;gap:9px;max-height:230px;overflow-y:auto}
.rl-cats-h{font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted2);font-weight:700}
.rl-cat-top{display:flex;justify-content:space-between;font-size:12.5px;color:var(--ink);margin-bottom:4px}
.rl-cat-top b{color:var(--cyan)}
.rl-cat-bar{height:7px;border-radius:6px;background:var(--space2);overflow:hidden}
.rl-cat-bar span{display:block;height:100%;border-radius:6px;background:linear-gradient(90deg,var(--cyan),var(--violet));transition:width .4s}
.rl-feed{height:190px;overflow-y:auto;display:flex;flex-direction:column;gap:5px;font-size:12.5px;line-height:1.5}
.rl-line{color:var(--ink);word-break:break-word;padding:3px 0;border-bottom:1px solid rgba(125,165,225,.07)}
.rl-line.ok{color:#8fe3b0}.rl-line.warn{color:#ffcf7a}.rl-line.scan{color:var(--muted)}
.rl-line.add{color:var(--ink)}
.rl-tag{display:inline-block;font-size:10.5px;font-weight:700;color:var(--cyan);background:rgba(56,225,255,.1);
  border:1px solid var(--line);border-radius:20px;padding:0 7px;margin-right:5px}
@media(max-width:760px){.rl-grid{grid-template-columns:1fr;grid-template-areas:"scan" "cats" "feed"}.rl-cats{max-height:180px}}
.radar-result:not(:empty){margin-top:14px}
.radar-rhead{display:flex;align-items:center;flex-wrap:wrap;gap:10px;font-size:13px;color:var(--ink);
  padding-bottom:10px;border-bottom:1px solid var(--line);margin-bottom:12px}
.radar-acts{margin-left:auto;display:flex;flex-wrap:wrap;gap:8px}
.btn.sm{width:auto;padding:7px 11px;font-size:12.5px;margin:0;flex:none}
.radgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:12px}
.radcard{background:var(--space2);border:1px solid var(--line);border-radius:12px;padding:12px;min-width:0}
.radcat{font-size:11.5px;letter-spacing:.03em;text-transform:uppercase;font-weight:700;color:var(--cyan);
  margin-bottom:9px;display:flex;align-items:center;gap:7px}
.radn{background:var(--panelb);border:1px solid var(--line);border-radius:20px;padding:1px 8px;font-size:11px;color:var(--muted)}
.radrow{padding:8px 0;border-top:1px solid var(--line)}
.radrow:first-of-type{border-top:none}
.radhl{font-size:13px;font-weight:600;color:var(--ink);line-height:1.4;word-break:break-word}
.radfact{font-size:12.5px;color:var(--muted);line-height:1.5;margin-top:3px;word-break:break-word}
.radsrc{display:inline-block;margin-top:5px;font-size:11.5px;color:var(--cyan)}
.radsrc:hover{text-decoration:underline}

/* ===== Tagesbriefing (Dashboard-Karte) ===== */
.briefing{border:1px solid var(--line);border-radius:16px;padding:16px 18px;margin:14px 0;
  background:linear-gradient(180deg,var(--panel),rgba(13,22,38,.35))}
.brief-h{display:flex;align-items:center;gap:9px;font-family:'Space Grotesk',sans-serif;font-size:16px;color:var(--ink)}
.brief-ic{font-size:18px}
.brief-date{margin-left:auto;font-size:12.5px;color:var(--muted);font-family:inherit;font-weight:400;text-transform:capitalize}
.brief-cols{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:12px}
.brief-col{background:var(--space2);border:1px solid var(--line);border-radius:12px;padding:11px 12px;min-width:0}
.bc-h{display:flex;align-items:center;gap:6px;font-size:12.5px;font-weight:700;color:var(--ink);margin-bottom:8px}
.bc-n{margin-left:auto;background:var(--panelb);border:1px solid var(--line);border-radius:20px;padding:0 8px;font-size:11px;color:var(--muted)}
.bc-row{font-size:12.5px;color:var(--ink);padding:5px 0;border-top:1px solid var(--line);line-height:1.4;overflow-wrap:anywhere}
.bc-row:first-of-type{border-top:none}
.bc-empty{font-size:12px;color:var(--muted2);padding:4px 0}
.bc-badge{display:inline-block;font-size:10px;font-weight:700;padding:1px 7px;border-radius:20px;
  background:rgba(56,225,255,.12);color:var(--cyan);border:1px solid var(--line);margin-right:3px}
.bc-badge.hot{background:rgba(255,120,120,.14);color:#ff9b9b;border-color:rgba(255,120,120,.3)}
.ccdiv{height:1px;background:var(--line);margin:16px 0}
@media(max-width:640px){.brief-cols{grid-template-columns:1fr}}

/* ===== SYX-Kommando: globale schwebende Befehls-Leiste ===== */
/* Oben rechts, unter der Topbar — verdeckt weder Rondell noch Inhalt. */
/* Der Container ist fix positioniert und so breit wie das (versteckte) Panel —
   am Handy fast bildschirmbreit. Er darf deshalb KEINE Taps abfangen, sonst
   blockiert der leere Bereich die darunterliegende Menüleiste. Nur der Orb und
   das geöffnete Panel sind klickbar (pointer-events unten je Kind gesetzt). */
#cmdBar{position:fixed;right:18px;top:70px;z-index:70;display:flex;flex-direction:column;align-items:flex-end;gap:12px;pointer-events:none}
.cmd-orb{width:50px;height:50px;border-radius:50%;border:1px solid var(--line2);cursor:pointer;pointer-events:auto;
  background:radial-gradient(circle at 30% 25%,rgba(56,225,255,.25),transparent 60%),linear-gradient(180deg,var(--panel2),var(--panel));
  box-shadow:0 10px 28px rgba(0,0,0,.45),0 0 22px rgba(56,225,255,.26);display:grid;place-items:center;transition:transform .18s,box-shadow .18s}
.cmd-orb:hover{transform:translateY(-2px);box-shadow:0 14px 36px rgba(0,0,0,.5),0 0 32px rgba(56,225,255,.4)}
.cmd-orb .aiorb{width:28px;height:28px}
#cmdBar.open .cmd-orb{box-shadow:0 0 0 3px rgba(56,225,255,.25),0 10px 28px rgba(0,0,0,.45)}
.cmd-panel{width:min(390px,calc(100vw - 36px));background:linear-gradient(180deg,var(--panel),#0b1626);
  border:1px solid var(--line2);border-radius:18px;padding:15px;box-shadow:0 30px 80px rgba(0,0,0,.6);
  transform:translateY(-12px) scale(.96);transform-origin:top right;opacity:0;pointer-events:none;transition:.22s cubic-bezier(.2,.8,.2,1)}
html.light .cmd-panel{background:linear-gradient(180deg,#ffffff,#eef3fc)}
#cmdBar.open .cmd-panel{transform:none;opacity:1;pointer-events:auto}
.cmd-head{display:flex;align-items:center;gap:8px;font-family:'Space Grotesk',sans-serif;font-size:14px;color:var(--ink);margin-bottom:11px}
.cmd-x{margin-left:auto;background:none;border:none;color:var(--muted);cursor:pointer;font-size:15px;line-height:1;padding:2px 4px}
.cmd-x:hover{color:var(--ink)}
.cmd-input{width:100%;box-sizing:border-box;background:var(--space2);border:1px solid var(--line);border-radius:12px;
  padding:12px 13px;color:var(--ink);font:inherit;font-size:14px}
.cmd-input:focus{outline:none;border-color:var(--cyan-d)}
.cmd-hint{min-height:17px;font-size:12.5px;color:var(--cyan);margin:8px 2px 6px;font-weight:600}
.cmd-chips{display:flex;flex-wrap:wrap;gap:7px}
.cmd-chips button{font-size:12.5px;background:var(--space2);border:1px solid var(--line);border-radius:20px;
  padding:6px 11px;color:var(--ink);cursor:pointer;transition:.15s}
.cmd-chips button:hover{border-color:var(--cyan-d);transform:translateY(-1px)}
@media(max-width:760px){#cmdBar{right:12px;top:62px}.cmd-orb{width:46px;height:46px}}

/* ===== Modal-Popup (wiederverwendbar) ===== */
.modal-ov{position:fixed;inset:0;z-index:120;display:grid;place-items:center;padding:20px;
  background:rgba(4,9,18,0);opacity:0;transition:background var(--dur-exit) linear,opacity var(--dur-exit) linear}
.modal-ov.show{opacity:1;background:var(--scrim)}
@supports (backdrop-filter:blur(1px)){
  .modal-ov{backdrop-filter:blur(0px);transition:background var(--dur-exit) linear,backdrop-filter var(--dur-exit) linear,opacity var(--dur-exit) linear}
  .modal-ov.show{backdrop-filter:blur(var(--scrim-blur));background:rgba(4,9,18,.42)}
}
.modal-card{width:min(720px,100%);max-height:88vh;max-height:88dvh;overflow:auto;overscroll-behavior:contain;
  background:linear-gradient(180deg,var(--panel),#0a1424);
  border:1px solid var(--line2);border-radius:var(--radius-modal);box-shadow:var(--elev-5);
  transform:translateY(10px) scale(.98);transition:transform var(--dur-exit) var(--ease-accel)}
.modal-ov.show .modal-card{transform:none;transition:transform var(--dur-enter) var(--ease-spring)}
.modal-ov.wide .modal-card{width:min(920px,100%)}
html.light .modal-card{background:linear-gradient(180deg,#ffffff,#eef3fc)}
.modal-grab{display:none}
.modal-head{display:flex;align-items:center;gap:10px;padding:15px 18px;border-bottom:1px solid var(--line);
  font-family:'Space Grotesk',sans-serif;font-size:16px;color:var(--ink);position:sticky;top:0;background:var(--panel);z-index:1}
html.light .modal-head{background:#fff}
.modal-x{margin-left:auto;background:none;border:1px solid var(--line);border-radius:9px;color:var(--muted);
  min-width:40px;height:40px;cursor:pointer;font-size:14px;line-height:1;display:inline-flex;align-items:center;justify-content:center}
.modal-x:hover{color:var(--ink);border-color:var(--line2)}
.modal-body{padding:16px 18px}

/* Handy: Dialog dockt als Bottom-Sheet an — Daumen-Reichweite, Griff, Safe-Area. */
@media(max-width:599px){
  .modal-ov{place-items:end center;padding:0}
  .modal-card{width:100%;max-width:none;max-height:92dvh;border-radius:var(--radius-sheet) var(--radius-sheet) 0 0;
    border-bottom:0;padding-bottom:var(--safe-b);
    transform:translateY(100%);transition:transform var(--dur-exit) var(--ease-accel)}
  .modal-ov.show .modal-card{transform:none;transition:transform var(--dur-enter) var(--ease-decel)}
  .modal-grab{display:block;width:36px;height:4px;border-radius:999px;margin:8px auto 2px;
    background:color-mix(in srgb,var(--ink) 26%,transparent)}
  .modal-head{min-height:44px}
  .modal-x{min-width:44px;height:44px}
}
@media(prefers-reduced-motion:reduce){
  .modal-card,.modal-ov.show .modal-card{transition:none;transform:none}
  .modal-ov{transition:opacity var(--dur-exit) linear}
}

/* Premium-Bestätigung (sxConfirm) — Inhalt des Modals/Sheets */
.sxconfirm-msg{color:var(--ink);font-size:14.5px;line-height:1.6}
.sxconfirm-msg p{margin:0 0 8px}
.sxconfirm-msg p:last-child{margin-bottom:0}
.sxconfirm-acts{display:flex;gap:10px;justify-content:flex-end;margin-top:20px;flex-wrap:wrap}
.sxconfirm-acts .btn{width:auto;margin:0;min-width:120px}
.sxconfirm-acts .btn.ghost{flex:0 1 auto}
.btn.danger{background:linear-gradient(90deg,#c0392b,var(--bad,#ff5468));color:#fff}
.btn.danger:hover{filter:brightness(1.06)}
@media(max-width:599px){
  .sxconfirm-acts{flex-direction:column-reverse}
  .sxconfirm-acts .btn{width:100%;min-height:48px}
}

/* ===== Netzwerk-Matrix ===== */
.netwrap{position:relative}
.netcanvaswrap{position:relative;border-radius:14px;overflow:hidden;
  background:radial-gradient(circle at 50% 45%,rgba(20,45,80,.55),rgba(8,18,34,.2) 70%)}
#netCanvas{width:100%;height:min(62vh,520px);display:block}
.net-core{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  display:flex;flex-direction:column;align-items:center;gap:6px;pointer-events:none;z-index:2}
.net-core .netorb{width:66px;height:66px;position:relative;display:block}
.net-core-t{font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:12px;color:#bfe3ff;
  text-shadow:0 0 12px rgba(74,168,255,.7);white-space:nowrap}
.net-core.alarm::before{content:"";position:absolute;left:50%;top:26px;transform:translate(-50%,-50%);
  width:92px;height:92px;border-radius:50%;border:2px dashed rgba(255,84,104,.7);animation:netalarm 1.1s linear infinite}
@keyframes netalarm{0%{transform:translate(-50%,-50%) rotate(0) scale(1);opacity:.8}50%{opacity:.35}100%{transform:translate(-50%,-50%) rotate(180deg) scale(1.08);opacity:.8}}
.netstatus{margin-top:12px;font-size:13.5px;color:var(--ink);background:var(--space2);border:1px solid var(--line);border-radius:12px;padding:11px 13px;line-height:1.5}
.netstatus.err{border-color:rgba(255,90,110,.4);background:rgba(255,90,110,.07)}
.netlegend{display:flex;gap:16px;margin-top:10px;font-size:12px;color:var(--muted);flex-wrap:wrap}
.netlegend .nl{display:flex;align-items:center;gap:6px}
.netlegend i{width:9px;height:9px;border-radius:50%;display:inline-block}

/* Holografische Ansicht (Nicht-Admins): Radar „gesperrt", aber Beitrags-Kanal. */
.radar-holo{position:relative;margin-top:16px;overflow:hidden;
  background:linear-gradient(135deg,rgba(80,220,255,.07),rgba(150,120,255,.07));
  border:1px solid rgba(120,200,255,.35)}
.radar-holo::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(115deg,transparent 30%,rgba(120,220,255,.10) 50%,transparent 70%);
  background-size:220% 100%;animation:holoshine 6s linear infinite}
@keyframes holoshine{0%{background-position:120% 0}100%{background-position:-120% 0}}
.radar-holo>*{position:relative;z-index:1}
.holo-badge{position:absolute;top:12px;right:12px;z-index:2;font-size:11px;font-weight:700;letter-spacing:.04em;
  color:#9fe8ff;background:rgba(20,40,60,.55);border:1px solid rgba(120,200,255,.4);border-radius:20px;padding:4px 10px}
.holo-contrib{display:flex;flex-direction:column;gap:10px;margin-top:12px}
.holo-row{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.holo-chip{font-size:12px;color:var(--muted);background:var(--space2);border:1px solid var(--line);
  border-radius:8px;padding:4px 9px;max-width:60%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

.aitop{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding-bottom:12px;border-bottom:1px solid var(--line);margin-bottom:12px}
.aiback{display:none;flex:none;width:34px;height:34px;border-radius:9px;font-size:20px;color:var(--muted)}
.aiback:hover{background:var(--panelb);color:var(--ink)}
.aititle{flex:1;min-width:120px;background:none;border:1px solid transparent;border-radius:8px;padding:6px 8px;
  color:var(--ink);font-family:'Space Grotesk',sans-serif;font-size:16px;font-weight:600}
.aititle:hover{border-color:var(--line)}
.aititle:focus{outline:none;border-color:var(--cyan-d);background:var(--space2)}
.aitop-r{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.aiprojsel{background:var(--space2);border:1px solid var(--line);border-radius:8px;padding:6px 8px;color:var(--ink);font-size:12px;max-width:150px}
.aiprojsel:focus{outline:none;border-color:var(--cyan-d)}
@media(max-width:760px){
  .aiapp{height:calc(100vh - 108px);height:calc(100dvh - 108px)}
  .aiapp .aimain{display:none}
  .aiapp.reading .aisidebar{display:none}
  .aiapp.reading .aimain{display:flex}
  .aiback{display:inline-flex}
  .aisidebar{width:100%;border-right:none}
}

/* ===== Executive-Futurism-Veredelung (Design-Briefing v1.0) ===== */
/* Feines Wireframe-Grid im Hintergrund (dezent, hinter allem) */
body::before{content:"";position:fixed;inset:0;pointer-events:none;z-index:-1;
  background-image:linear-gradient(rgba(120,170,255,.028) 1px,transparent 1px),
    linear-gradient(90deg,rgba(120,170,255,.028) 1px,transparent 1px);
  background-size:44px 44px}
html.light body::before{background-image:linear-gradient(rgba(20,60,120,.035) 1px,transparent 1px),
    linear-gradient(90deg,rgba(20,60,120,.035) 1px,transparent 1px)}
/* KPI-Chips in der Topbar */
.kpirow{display:flex;gap:10px;flex-wrap:wrap;margin-left:8px}
.kpichip{display:inline-flex;align-items:center;gap:9px;padding:7px 13px;border-radius:13px;
  background:rgba(11,23,42,.55);border:1px solid var(--line);cursor:pointer;transition:.15s;
  box-shadow:0 0 0 1px rgba(59,167,255,.05),0 0 16px rgba(35,131,255,.05)}
html.light .kpichip{background:#eef3fc}
.kpichip:hover{border-color:var(--cyan-d);transform:translateY(-1px)}
.kpichip span{font-size:12px;color:var(--muted);white-space:nowrap}
.kpichip strong{font-family:'Space Grotesk',sans-serif;font-size:15px;color:var(--ink);line-height:1}
.kpichip.warn strong{color:var(--warn)}
.kpichip.cyan strong{color:var(--cyan)}
.kpichip.gold strong{color:var(--light)}
@media(max-width:1000px){.kpirow{display:none}}
/* System-online-Status im Footer */
.foot{display:flex;align-items:center;gap:14px}
.sysonline{display:inline-flex;align-items:center;gap:7px;color:var(--ok);font-weight:500;white-space:nowrap}
.status-dot{width:8px;height:8px;border-radius:50%;background:var(--ok);box-shadow:0 0 10px rgba(79,209,165,.7);
  animation:apprpulse 2.4s ease-in-out infinite}
@media(max-width:720px){.foot .sysonline{display:none}}
/* Aktiver Menüpunkt + Kacheln: etwas mehr Tiefe/Glow (Briefing: Glow nur aktiv) */
.rail [data-nav].on{box-shadow:0 0 0 1px var(--cyan-d) inset,inset 0 0 18px color-mix(in srgb,var(--cyan) 12%,transparent),0 0 20px color-mix(in srgb,var(--cyan) 9%,transparent)}
.tile{box-shadow:var(--shadow,0 12px 30px rgba(0,0,0,.28))}
.tile:hover{border-color:var(--cyan-d);box-shadow:0 14px 34px -18px rgba(59,167,255,.4),0 0 0 1px rgba(59,167,255,.12) inset;transform:translateY(-2px)}

/* ===== Mail-Reader: Drei-Spalten mit MagnaX Assistant ===== */
.readerlayout{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:18px;align-items:start}
.readermain{min-width:0}
.mailassist{background:linear-gradient(180deg,var(--panel),#0b1626);border:1px solid var(--line);
  border-radius:14px;padding:15px;display:flex;flex-direction:column;gap:14px;position:sticky;top:0}
html.light .mailassist{background:linear-gradient(180deg,#ffffff,#f1f5fd)}
.assist-title{display:flex;align-items:center;gap:8px;font-size:12px;letter-spacing:.14em;text-transform:uppercase;
  font-weight:700;color:var(--cyan)}
.assist-ki{margin-left:auto;font-size:11px;letter-spacing:normal;text-transform:none;font-weight:600;color:var(--ink);
  background:var(--space2);border:1px solid var(--line);border-radius:8px;padding:4px 6px;cursor:pointer;min-width:0}
.assist-ki:hover{border-color:var(--cyan-d)}
.assist-card{border:1px solid var(--line);border-radius:11px;padding:12px;background:var(--space2)}
.assist-card h4{font-size:13px;margin-bottom:6px;color:var(--ink)}
.assist-card p{font-size:13px;line-height:1.55;color:var(--ink)}
.assist-hint{color:var(--muted)!important}
.assist-card .btn{width:100%;margin-top:10px}
.assist-actions{display:flex;flex-direction:column;gap:8px}
.assist-act{text-align:left;font-size:13px;font-weight:500;color:var(--ink);background:var(--space2);
  border:1px solid var(--line);border-radius:10px;padding:10px 12px;cursor:pointer;transition:.15s}
.assist-act:hover{border-color:var(--cyan-d);background:var(--panelb);transform:translateX(2px)}
.assist-out:not(:empty){border-top:1px solid var(--line);padding-top:12px}
.assist-result h4{font-size:12.5px;color:var(--cyan);margin-bottom:6px}
.assist-result div{font-size:13px;line-height:1.55;color:var(--ink)}
.assist-result.err{color:var(--warn);font-size:12.5px}
.assist-thinking{display:flex;gap:5px;padding:4px 0}
.assist-thinking span{width:7px;height:7px;border-radius:50%;background:var(--cyan);opacity:.5;animation:aidot 1s infinite}
.assist-thinking span:nth-child(2){animation-delay:.2s}.assist-thinking span:nth-child(3){animation-delay:.4s}
.assist-sys{margin-top:auto;display:flex;align-items:center;gap:7px;font-size:11.5px;color:var(--muted)}
@media(max-width:1180px){.readerlayout{grid-template-columns:1fr}.mailassist{position:static}}

/* ===== Mail-KI-Aufbereitung (Prompt-Fenster in der Mail-Ansicht) ===== */
.btn.ghost.mpopen{width:100%;margin-top:8px;font-size:13px;justify-content:center;
  background:var(--space2);border:1px solid var(--line);color:var(--ink)}
.btn.ghost.mpopen:hover{border-color:var(--cyan-d)}
.mailprep{padding:16px;max-width:640px;margin:0 auto;display:flex;flex-direction:column;gap:12px}
.mailprep .mp-head{display:flex;align-items:center;gap:9px;font-family:'Space Grotesk',sans-serif;
  font-size:16px;font-weight:700;color:var(--ink)}
.mailprep .assist-hint{font-size:13px;line-height:1.5;color:var(--muted);margin:0}
.mp-q{width:100%;min-width:0;box-sizing:border-box;resize:vertical;font:inherit;font-size:14px;
  background:var(--space2);border:1px solid var(--line);border-radius:11px;padding:11px 12px;color:var(--ink)}
.mp-q:focus{outline:none;border-color:var(--cyan-d)}
.mp-mode{display:flex;flex-direction:column;gap:8px}
.mp-opt{display:flex;align-items:center;gap:9px;font-size:13px;color:var(--ink);cursor:pointer;
  background:var(--space2);border:1px solid var(--line);border-radius:10px;padding:10px 12px}
.mp-opt:hover{border-color:var(--cyan-d)}
.mp-opt input{accent-color:var(--cyan);flex:0 0 auto}
.mp-opt span{min-width:0}
.mp-out:not(:empty){margin-top:4px}
.mp-meta{font-size:11.5px;letter-spacing:.02em;color:var(--cyan);font-weight:600;margin-bottom:8px}
.mp-note{font-size:12px;color:var(--warn);background:rgba(255,180,60,.08);border:1px solid var(--line);
  border-radius:9px;padding:8px 10px;margin-bottom:10px}
.mp-text{font-size:13.5px;line-height:1.6;color:var(--ink);white-space:pre-wrap;word-break:break-word}
.mp-acts{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.mp-acts .btn.sm{flex:1;min-width:120px;font-size:12.5px;padding:8px 10px}
/* Aufgaben-Extraktion: Checkliste */
.mp-tklist{display:flex;flex-direction:column;gap:7px;margin-top:6px}
.mp-tk{display:flex;align-items:flex-start;gap:10px;background:var(--space2);border:1px solid var(--line);
  border-radius:10px;padding:9px 11px;cursor:pointer}
.mp-tk:hover{border-color:var(--cyan-d)}
.mp-tk input{margin-top:3px;accent-color:var(--cyan);flex:0 0 auto}
.mp-tk-b{min-width:0;display:flex;flex-direction:column;gap:3px}
.mp-tk-t{font-size:13.5px;color:var(--ink);line-height:1.4;word-break:break-word}
.mp-tk-m{font-size:11.5px;color:var(--muted);display:flex;align-items:center;gap:6px}
.mp-pri{color:#0b1420;font-weight:700;font-size:10px;border-radius:20px;padding:1px 7px;text-transform:uppercase;letter-spacing:.03em}

/* ===== Composer: „Signatur hinzufügen" ===== */
.sxsigbtn{display:inline-flex;align-items:center;gap:4px;flex:0 0 auto;background:var(--space2);
  border:1px solid var(--line);border-radius:7px;padding:6px 11px;color:var(--cyan);font-size:12.5px;
  font-weight:600;cursor:pointer;white-space:nowrap;transition:.15s}
.sxsigbtn:hover{border-color:var(--cyan-d);background:var(--panelb)}
.sxsigbtn.on{background:linear-gradient(90deg,var(--cyan-d),var(--cyan));color:#03212a;border-color:transparent}
.sxsigprev:not(:empty){padding:12px;border-top:1px solid var(--line)}
.sxsig-sep{font-size:11px;color:var(--muted2);margin-bottom:8px;letter-spacing:.04em}
.sxsig-body{background:#ffffff;border:1px solid var(--line);border-radius:10px;padding:14px 16px;display:inline-block;max-width:100%;overflow:auto}

/* ===== Signatur-Studio ===== */
.sigstudio .cchint{margin-bottom:14px}
.sigcards{display:grid;grid-template-columns:1fr;gap:14px}
@media(min-width:720px){.sigcards{grid-template-columns:1fr 1fr}}
.sigcard{border:1px solid var(--line2);border-radius:14px;padding:14px;background:var(--space2);display:flex;flex-direction:column;gap:10px;min-width:0;transition:border-color .15s,box-shadow .15s}
.sigcard.on{border-color:var(--cyan);box-shadow:0 0 0 1px var(--cyan),0 0 22px -8px rgba(35,131,255,.4)}
.sigcard-head b{font-size:14px}
.sigcard-cur{color:var(--ok,#3ddc97);font-size:12px;font-weight:700;margin-left:8px}
.sigcard-desc{font-size:12px;color:var(--muted);margin-top:3px;line-height:1.4}
.sigcard-prev{background:#fff;border:1px solid var(--line);border-radius:10px;padding:14px;overflow:auto;max-width:100%}
.sigcard-btns{display:flex;flex-wrap:wrap;gap:8px;margin-top:auto}
.sigcard-btns .btn.sm{width:auto;flex:0 1 auto;padding:7px 12px;font-size:12.5px}

/* ===== Token- & Konnektoren-Kontrollzentrum (Dashboard) ===== */
.connpanel .cp-head{display:flex;align-items:flex-start;gap:12px;margin-bottom:14px}
.connpanel .cp-head h3{margin:2px 0 0}
.cp-refresh{margin-left:auto;width:34px;height:34px;border-radius:10px;background:var(--space2,#0d1728);border:1px solid var(--line);color:var(--muted);font-size:16px;cursor:pointer}
.cp-refresh:hover{color:var(--ink);border-color:var(--line2)}
.cp-refresh.spin{animation:cpspin .8s linear infinite}
@keyframes cpspin{to{transform:rotate(360deg)}}
.cp-load{color:var(--muted2);font-size:13px;display:flex;align-items:center;gap:8px;padding:6px 2px}
.cp-tokens{display:grid;grid-template-columns:1fr 1fr 1.4fr;gap:12px;margin-bottom:14px}
@media(max-width:620px){.cp-tokens{grid-template-columns:1fr 1fr}}
.cp-stat,.cp-spark{background:var(--space2,#0d1728);border:1px solid var(--line);border-radius:12px;padding:12px 14px;min-width:0}
@media(max-width:620px){.cp-spark{grid-column:1/3}}
.cp-n{font-size:24px;font-weight:750;line-height:1;font-variant-numeric:tabular-nums}
.cp-l{font-size:11px;color:var(--muted2);text-transform:uppercase;letter-spacing:.08em;margin-top:5px}
.cp-sub{font-size:11.5px;color:var(--muted);margin-top:3px}
.cp-bars{display:flex;align-items:flex-end;gap:6px;height:46px;margin-top:8px}
.cp-b{position:relative;flex:1;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;height:100%;min-width:0}
.cp-bfill{width:100%;max-width:16px;background:linear-gradient(180deg,var(--cyan),rgba(59,167,255,.35));border-radius:4px 4px 0 0;min-height:3px}
.cp-b em{font-size:9px;color:var(--muted2);margin-top:3px;font-style:normal}
.cp-grid{display:grid;grid-template-columns:1fr 1fr;gap:11px}
@media(max-width:560px){.cp-grid{grid-template-columns:1fr}}
.cc-card{background:var(--space2,#0d1728);border:1px solid var(--line);border-radius:13px;padding:12px 13px;min-width:0;transition:border-color .15s,opacity .15s}
.cc-card.off{opacity:.62}
.cc-card.on{border-color:rgba(79,209,165,.4)}
.cc-top{display:flex;align-items:center;gap:9px}
.cc-ic{font-size:16px;width:20px;text-align:center;flex:0 0 auto}
.cc-name{font-size:14px;font-weight:650;display:flex;align-items:center;gap:6px;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cc-info{flex:0 0 auto;width:16px;height:16px;border-radius:50%;border:1px solid var(--line2);background:transparent;color:var(--muted);font-size:10px;font-weight:700;font-style:italic;line-height:1;cursor:pointer;position:relative;display:inline-grid;place-items:center;font-family:Georgia,serif}
.cc-info:hover{color:var(--cyan);border-color:var(--cyan)}
/* Hover-Tooltip (Desktop) */
.cc-info[data-tip]:hover::after{content:attr(data-tip);position:absolute;left:50%;bottom:150%;transform:translateX(-50%);width:230px;max-width:60vw;background:#0a1424;color:var(--ink);border:1px solid var(--line2);border-radius:10px;padding:9px 11px;font-size:11.5px;font-weight:400;font-style:normal;line-height:1.45;letter-spacing:0;box-shadow:0 12px 30px -12px rgba(0,0,0,.7);z-index:30;pointer-events:none;white-space:normal}
@media(hover:none){.cc-info[data-tip]:hover::after{display:none}}
.cc-sw{margin-left:auto;flex:0 0 auto;width:46px;height:26px;border-radius:999px;border:1px solid var(--line2);background:linear-gradient(180deg,#3a1520,#2a0f18);position:relative;cursor:pointer;transition:background .2s,border-color .2s;box-shadow:inset 0 0 0 1px rgba(242,112,138,.25)}
.cc-sw.on{background:linear-gradient(180deg,#123a2b,#0e2f24);box-shadow:inset 0 0 0 1px rgba(79,209,165,.35),0 0 12px -4px rgba(79,209,165,.5)}
.cc-knob{position:absolute;top:2px;left:2px;width:20px;height:20px;border-radius:50%;background:var(--err);transition:transform .2s,background .2s;box-shadow:0 2px 5px rgba(0,0,0,.4)}
.cc-sw.on .cc-knob{transform:translateX(20px);background:var(--ok,#4FD1A5)}
.cc-sw.locked{cursor:not-allowed;opacity:.85}
.cc-sw.locked .cc-lock{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-size:10px;z-index:1;opacity:.9}
.cc-sw.locked .cc-knob{filter:grayscale(.5)}
.cp-inbox{margin-left:auto;background:var(--space2,#0d1728);border:1px solid var(--line2);color:var(--ink);border-radius:10px;padding:7px 12px;font-size:12.5px;cursor:pointer}
.cp-inbox:hover{border-color:var(--cyan)}
.cp-inbox .cc-cnt{display:inline-grid;place-items:center;min-width:18px;height:18px;padding:0 5px;margin-left:5px;border-radius:999px;background:var(--err);color:#2a0008;font-size:11px;font-weight:700;vertical-align:middle}
.cp-head .cp-inbox + .cp-refresh{margin-left:8px}
.cp-reqrow{display:flex;justify-content:flex-end;margin-top:10px}

/* Administrator-Nachricht (Modal + Anfragen-Liste) */
.adminreq .fieldlbl,.fieldlbl{display:block;font-size:11px;color:var(--muted2);text-transform:uppercase;letter-spacing:.06em;margin:10px 0 4px}
.adminreq .mp-q{width:100%}
.arcardx{background:var(--space2,#0d1728);border:1px solid var(--line);border-radius:12px;padding:12px 14px;margin-bottom:10px}
.arcardx.done{opacity:.6}
.arx-h{display:flex;align-items:center;gap:8px;font-size:14px}
.arx-m{font-size:11.5px;color:var(--muted2);margin-top:3px}
.arx-d{font-size:13px;color:var(--muted);margin-top:7px;white-space:pre-wrap;line-height:1.5}
.holo-adminreq{margin-top:12px;padding-top:12px;border-top:1px solid var(--line);font-size:12.5px;color:var(--muted);display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.holo-adminreq .btn.sm{width:auto;flex:0 0 auto}
html.light .cp-inbox,html.light .arcardx{background:#f2f6fd}

/* ===== Admin-Schnellsteuerung (Pop-up) ===== */
.adminhub-btn svg{color:var(--warn,#F2C14E)}
.adminhub-btn:hover{border-color:var(--warn,#F2C14E)}
.ahub{display:grid;grid-template-columns:1fr 210px;gap:16px}
@media(max-width:640px){.ahub{grid-template-columns:1fr}}
.ahub-main{min-width:0}
.ahub-tokens{display:flex;flex-wrap:wrap;gap:6px 14px;margin-bottom:12px;font-size:12.5px;color:var(--muted)}
.ahub-tokens .ah-tk b{color:var(--ink);font-variant-numeric:tabular-nums}
.ahub-tokens .dim{color:var(--muted2)}
.ahub-list{display:flex;flex-direction:column;gap:8px}
.ah-row{display:flex;align-items:center;gap:11px;background:var(--space2,#0d1728);border:1px solid var(--line);border-radius:12px;padding:10px 12px;min-width:0}
.ah-row.off{opacity:.6}
.ah-row.on{border-color:rgba(79,209,165,.35)}
.ah-ic{font-size:16px;width:20px;text-align:center;flex:0 0 auto}
.ah-tx{min-width:0;flex:1}
.ah-name{font-size:13.5px;font-weight:650;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ah-cad{font-size:11px;color:var(--muted2)}
.ah-dot{width:9px;height:9px;border-radius:50%;flex:0 0 auto}
.ahub-bulk{display:flex;gap:8px;margin-top:12px}
.ahub-bulk .btn.sm{width:auto;flex:0 0 auto;padding:7px 12px;font-size:12.5px}
/* Rechte Seite: atmender System-Puls-Orb */
.ahub-side{display:flex;flex-direction:column;align-items:center;gap:14px;border-left:1px solid var(--line);padding-left:16px}
@media(max-width:640px){.ahub-side{border-left:0;padding-left:0;border-top:1px solid var(--line);padding-top:16px}}
.ahub-orb{position:relative;width:120px;height:120px;display:grid;place-items:center;margin-top:6px}
.ahub-orb-core{position:absolute;width:60px;height:60px;border-radius:50%;
  background:radial-gradient(circle at 40% 35%,#bfe4ff,var(--cyan) 55%,#1c6fc0 100%);
  box-shadow:0 0 26px 4px rgba(59,167,255,.55);animation:ahubBreath 3.4s ease-in-out infinite}
.ahub-orb-ring{position:absolute;width:88px;height:88px;border-radius:50%;border:1px solid rgba(59,167,255,.45);animation:ahubPulse 3.4s ease-in-out infinite}
.ahub-orb-ring.r2{width:118px;height:118px;border-color:rgba(59,167,255,.22);animation-delay:.7s}
.ahub-orb-val{position:relative;z-index:2;font-weight:750;font-size:19px;color:#04121f;font-variant-numeric:tabular-nums;text-shadow:0 1px 2px rgba(255,255,255,.4)}
.ahub-orb.calm .ahub-orb-core{background:radial-gradient(circle at 40% 35%,#cfd8e6,#7185a3 60%,#3a4a66 100%);box-shadow:0 0 18px 2px rgba(120,140,170,.4);animation-duration:5s}
.ahub-orb.calm .ahub-orb-ring{border-color:rgba(120,140,170,.35)}
.ahub-orb.hot .ahub-orb-core{box-shadow:0 0 32px 6px rgba(59,167,255,.7)}
@keyframes ahubBreath{0%,100%{transform:scale(1)}50%{transform:scale(1.12)}}
@keyframes ahubPulse{0%{transform:scale(.85);opacity:.8}70%{transform:scale(1.15);opacity:0}100%{opacity:0}}
@media(prefers-reduced-motion:reduce){.ahub-orb-core,.ahub-orb-ring{animation:none}}
.ahub-side-stat{text-align:center}
.ahs-h{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--cyan);font-weight:700}
.ahs-big{font-size:32px;font-weight:750;line-height:1.1;font-variant-numeric:tabular-nums}
.ahs-big span{font-size:18px;color:var(--muted2);font-weight:600}
.ahs-line{font-size:12px;color:var(--muted);margin-top:4px;line-height:1.4}
.ahs-line.dim{color:var(--muted2)}
html.light .ah-row{background:#f2f6fd}

/* ===== Kosten-Cockpit + Arbeits-Fenster (im Admin-Popup) ===== */
.ahub-cost{margin-bottom:14px}
.ahc-head{display:flex;align-items:center;gap:10px;margin-bottom:10px}
.ahc-head .eyebrow{margin:0}
.ahc-head .btn.sm{margin-left:auto;width:auto;flex:0 0 auto;padding:6px 11px;font-size:12px}
.ahc-glass{display:flex;align-items:center;gap:16px;background:var(--space2,#0d1728);border:1px solid var(--line);border-radius:14px;padding:14px 16px}
.ahc-sand{position:relative;width:34px;height:78px;flex:0 0 auto;border:1px solid var(--line2);border-radius:8px;overflow:hidden;background:rgba(255,255,255,.04)}
.ahc-sand-fill{position:absolute;left:0;right:0;bottom:0;background:linear-gradient(180deg,var(--cyan),#1c6fc0);transition:height .5s ease}
.ahc-glass.low .ahc-sand-fill{background:linear-gradient(180deg,#ff7a90,var(--err))}
.ahc-glass-tx{min-width:0}
.ahc-pct{font-size:30px;font-weight:750;line-height:1;font-variant-numeric:tabular-nums}
.ahc-glass.low .ahc-pct{color:var(--err)}
.ahc-sub{font-size:11px;color:var(--muted2);text-transform:uppercase;letter-spacing:.08em;margin-top:2px}
.ahc-money{font-size:13px;margin-top:7px;font-weight:600}
.ahc-money span{color:var(--muted2);font-weight:400}
.cprovs{display:grid;grid-template-columns:1fr 1fr 1fr;gap:10px;margin-top:12px}
@media(max-width:640px){.cprovs{grid-template-columns:1fr}}
/* Loop-Wächter */
.lguard{background:var(--space2,#0d1728);border:1px solid var(--line);border-left:3px solid #16a34a;border-radius:12px;padding:11px 13px;margin-top:12px}
.lguard.over{border-left-color:var(--err,#dc2626)}
.lguard.off{border-left-color:var(--muted)}
.lguard-h{display:flex;align-items:center;justify-content:space-between;gap:10px}
.lguard-t{font-size:13px;font-weight:800;color:var(--ink);display:inline-flex;align-items:center;gap:8px}
.lguard-badge{font-size:11px;font-weight:800;padding:2px 8px;border-radius:8px;background:rgba(22,163,74,.16);color:#16a34a}
.lguard.over .lguard-badge{background:rgba(220,38,38,.16);color:var(--err,#dc2626)}
.lguard.off .lguard-badge{background:rgba(127,127,127,.16);color:var(--muted)}
.lguard-sw{font-size:12px;color:var(--muted);display:inline-flex;align-items:center;gap:5px;cursor:pointer;flex:none}
.lguard-bar{height:6px;border-radius:4px;background:rgba(127,127,127,.16);overflow:hidden;margin:9px 0 7px}
.lguard-bar span{display:block;height:100%;border-radius:4px;background:linear-gradient(90deg,#16a34a,#22d3ee);transition:width .5s ease}
.lguard.over .lguard-bar span{background:linear-gradient(90deg,#f59e0b,var(--err,#dc2626))}
.lguard-m{font-size:12px;color:var(--muted);line-height:1.5}
.lguard-cap{font:inherit;font-size:12px;color:var(--cyan);background:none;border:none;border-bottom:1px dashed var(--cyan-d);padding:0 1px;cursor:pointer}
.lguard-int{display:flex;align-items:flex-start;gap:6px;font-size:11.5px;color:var(--muted);line-height:1.45;margin-top:9px;cursor:pointer}
.lguard-int input{margin-top:2px;flex:none}
.cprov{background:var(--space2,#0d1728);border:1px solid var(--line);border-top:2px solid var(--pc,var(--cyan));border-radius:12px;padding:11px 12px;min-width:0}
.cprov-h{display:flex;align-items:center;gap:9px}
.cprov-ic{font-size:16px}
.cprov-nm{min-width:0}
.cprov-n{font-size:13px;font-weight:650;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cprov-s{font-size:10.5px;color:var(--muted2)}
.cprov-cost{font-size:20px;font-weight:750;margin-top:8px;font-variant-numeric:tabular-nums}
.cprov-tok{font-size:11px;color:var(--muted);margin-top:2px}
.cprov-top{display:inline-block;margin-top:9px;font-size:12px;color:var(--cyan);text-decoration:none;font-weight:600}
.cprov-top:hover{text-decoration:underline}
.ahub-burst{background:linear-gradient(120deg,rgba(59,167,255,.10),transparent 60%),var(--space2,#0d1728);border:1px solid var(--line2);border-radius:14px;padding:14px 16px;margin-bottom:16px}
.abx-tx{font-size:12.5px;color:var(--muted);line-height:1.5}
.abx-tx b{color:var(--ink)}
.abx-web{display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--muted);margin:10px 0}
.abx-web .dim{color:var(--muted2)}
.abx-row{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.abx-row .btn{width:auto;flex:0 0 auto;padding:9px 16px}
.abx-status{font-size:12.5px;color:var(--cyan);font-weight:600}
html.light .ahc-glass,html.light .cprov,html.light .ahub-burst{background:#f2f6fd}
.cc-cad{font-size:11px;color:var(--muted2);margin-top:9px}
.cc-meter{height:6px;border-radius:999px;background:rgba(255,255,255,.06);overflow:hidden;margin-top:7px}
.cc-bar{height:100%;border-radius:999px;transition:width .3s}
.cp-foot{margin-top:13px;margin-bottom:0}
html.light .cc-card,html.light .cp-stat,html.light .cp-spark,html.light .cp-refresh{background:#f2f6fd}
html.light .cc-info[data-tip]:hover::after{background:#fff;color:#0f1c31}

/* ===== Globale Design-Harmonisierung (Design-Briefing über alle Frames) ===== */
.section,.rowcard,.ccard,.notecard,.triagebox,.aiapp,.calwrap,.compose,.mailassist{
  box-shadow:0 12px 30px -18px rgba(0,0,0,.5),0 0 0 1px rgba(59,167,255,.05),0 0 22px -8px rgba(35,131,255,.06)}
.section{background:linear-gradient(180deg,var(--panel),#0b1626);border:1px solid var(--line);border-radius:16px;padding:16px;margin-bottom:16px}
html.light .section{background:linear-gradient(180deg,#ffffff,#f1f5fd)}
.rowcard:hover,.ccard:hover{border-color:var(--line2)}

/* ===== Handy-Startrad (»Riesenrad«, nur mobil) =====
   Senkrechtes Rad aus denselben Modul-Daten wie das Desktop-Rondell. Der
   zentrale Fang-Streifen (.hw-catch) fängt die Drehung; links/rechts daneben
   bleibt die Bühne pan-y (App normal hoch/runter wischbar). Brand-Fallbacks,
   damit es auch ohne gesetzte CSS-Variablen markengetreu aussieht. */
.homewheel{margin:6px 0 10px;user-select:none;-webkit-user-select:none}
.homewheel .hw-stage{position:relative;height:clamp(360px,58vh,540px);margin-top:4px;perspective:1100px;overflow:hidden;touch-action:pan-y;border-radius:20px}
.homewheel .hw-catch{position:absolute;top:0;bottom:0;left:50%;transform:translateX(-50%);width:clamp(190px,64vw,244px);z-index:1500;touch-action:none;cursor:grab}
.homewheel .hw-catch.drag{cursor:grabbing}
.homewheel .hw-axis{position:absolute;left:50%;top:8%;bottom:8%;width:2px;transform:translateX(-50%);background:linear-gradient(180deg,transparent,var(--line2,#263c62) 12%,var(--line2,#263c62) 88%,transparent);opacity:.5;pointer-events:none}
.homewheel .hw-hub{position:absolute;left:50%;top:50%;width:14px;height:14px;border-radius:999px;transform:translate(-50%,-50%);background:radial-gradient(circle,var(--cyan,#3ba7ff),transparent 70%);opacity:.7;pointer-events:none}
.homewheel .hw-gondel{position:absolute;left:50%;top:50%;width:clamp(190px,64vw,244px);transform-origin:center center;will-change:transform,opacity;text-align:center;pointer-events:none}
.homewheel .hw-card{display:flex;flex-direction:column;align-items:center;gap:10px;padding:16px 14px 14px;border-radius:20px;border:1px solid var(--line2,#263c62);background:var(--panel2,rgba(18,33,66,.94));box-shadow:0 14px 34px rgba(0,0,0,.42);min-width:0}
.homewheel .hw-gondel.center{pointer-events:auto;cursor:pointer}
.homewheel .hw-gondel.center .hw-card{border-color:var(--cyan,#3ba7ff);box-shadow:0 20px 52px rgba(0,0,0,.5),0 0 0 1px var(--cyan,#3ba7ff),0 0 34px rgba(59,167,255,.28)}
.homewheel .hw-gondel:before{content:"";position:absolute;left:50%;bottom:100%;width:2px;height:22px;transform:translateX(-50%);background:var(--line2,#263c62);opacity:.55}
.homewheel .hw-face{width:74px;height:74px;border-radius:18px;display:flex;align-items:center;justify-content:center;flex:0 0 auto;background:linear-gradient(135deg,rgba(59,167,255,.16),rgba(11,20,36,.6));border:1px solid rgba(59,167,255,.32)}
.homewheel .hw-face svg{width:40px;height:40px;color:var(--cyan,#3ba7ff)}
.homewheel .hw-label{font-size:15px;font-weight:750;color:var(--ink,#e8eefb);line-height:1.15;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.homewheel .hw-desc{font-size:12px;color:var(--muted,#8ea0c0);line-height:1.35;max-height:0;opacity:0;overflow:hidden;transition:opacity .2s;max-width:100%}
.homewheel .hw-gondel.center .hw-desc{max-height:44px;opacity:1}
.homewheel .hw-meta{font-size:11.5px;font-weight:700;letter-spacing:.02em;color:var(--cyan,#3ba7ff);text-transform:uppercase}
.homewheel .hw-meta.green{color:var(--ok,#4FD1A5)}
.homewheel .hw-nav{position:absolute;left:50%;transform:translateX(-50%);z-index:1600;width:38px;height:38px;border-radius:999px;display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:17px;color:var(--ink,#e8eefb);border:1px solid var(--line2,#263c62);background:rgba(8,16,30,.72)}
.homewheel .hw-nav:hover{border-color:var(--cyan,#3ba7ff)}
.homewheel .hw-up{top:6px}.homewheel .hw-down{bottom:6px}
.homewheel .hw-hint{text-align:center;font-size:12px;color:var(--muted2,#5f7396);margin-top:6px}
@media(max-width:400px){.homewheel .hw-stage{height:clamp(340px,60vh,460px)}.homewheel .hw-face{width:64px;height:64px}.homewheel .hw-face svg{width:34px;height:34px}}

/* ===== KI-Rondell (Startseite) ===== */
.ai-stage{position:relative;height:min(72vh,720px);min-height:540px;margin-top:6px;
  display:grid;place-items:center;perspective:1300px;overflow:hidden}
.orbit-field{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:min(980px,86%);height:min(600px,90%);border-radius:50%;touch-action:none;cursor:grab}
.orbit-field:active{cursor:grabbing}
.orbit-field::before,.orbit-field::after{content:"";position:absolute;inset:0;border-radius:50%;
  border:1px solid rgba(59,167,255,.22);box-shadow:inset 0 0 45px rgba(59,167,255,.04),0 0 42px rgba(59,167,255,.05);pointer-events:none}
.orbit-field::after{inset:11%;border-style:dashed;opacity:.5}
.orbit-line{position:absolute;inset:23%;border-radius:50%;border:1px solid rgba(59,167,255,.18);pointer-events:none}
.axis-x,.axis-y{position:absolute;background:linear-gradient(90deg,transparent,rgba(59,167,255,.30),transparent);opacity:.55;pointer-events:none}
.axis-x{left:5%;right:5%;top:50%;height:1px}
.axis-y{top:7%;bottom:7%;left:50%;width:1px;background:linear-gradient(180deg,transparent,rgba(59,167,255,.26),transparent)}
.ai-core{position:absolute;left:50%;top:50%;z-index:120;transform:translate(-50%,-50%);width:200px;height:200px;
  border:none;background:none;display:grid;place-items:center;cursor:pointer}
.ai-orb{position:absolute;width:138px;height:138px;border-radius:50%;
  background:radial-gradient(circle at 35% 25%,rgba(255,255,255,.7),transparent 12%),
    radial-gradient(circle at 50% 55%,rgba(59,167,255,.9),rgba(10,70,130,.8) 48%,rgba(4,17,35,.98) 72%);
  border:1px solid rgba(170,215,255,.85);
  box-shadow:0 0 28px rgba(59,167,255,.75),0 0 90px rgba(59,167,255,.34),inset 0 0 35px rgba(255,255,255,.16);
  animation:aipulse 2.8s ease-in-out infinite}
.ai-core::before,.ai-core::after{content:"";position:absolute;border-radius:50%;border:1px solid rgba(59,167,255,.42);animation:airing 2.8s ease-out infinite}
.ai-core::before{inset:22px}.ai-core::after{inset:2px;animation-delay:.55s}
.ai-core-logo{position:relative;z-index:2;width:74px;height:74px;filter:drop-shadow(0 0 14px rgba(59,167,255,.8));pointer-events:none}
.ai-caption{position:absolute;top:calc(50% + 82px);left:50%;transform:translateX(-50%);text-align:center;width:340px;pointer-events:none}
.ai-caption b{display:block;font-family:'Space Grotesk',sans-serif;color:#bfe2ff;font-size:23px;line-height:1.1}
.ai-caption span{display:block;color:var(--muted);font-size:13.5px;margin-top:7px}
.module-card{position:absolute;left:50%;top:50%;width:196px;min-height:126px;padding:16px 16px 14px;border-radius:16px;
  border:1px solid rgba(59,167,255,.34);background:linear-gradient(180deg,rgba(13,32,56,.94),rgba(5,14,27,.92));
  box-shadow:0 20px 52px rgba(0,0,0,.34),inset 0 0 0 1px rgba(255,255,255,.025);cursor:pointer;user-select:none;
  transition:border-color .18s,box-shadow .18s;will-change:transform,opacity,filter}
html.light .module-card{background:linear-gradient(180deg,#ffffff,#eef4fb);border-color:rgba(59,167,255,.28)}
.module-card:hover{border-color:rgba(83,190,255,.8);box-shadow:0 24px 60px rgba(0,0,0,.4),0 0 28px rgba(59,167,255,.16)}
.module-icon{width:34px;height:34px;border-radius:11px;display:grid;place-items:center;color:var(--cyan);
  background:rgba(59,167,255,.1);border:1px solid rgba(59,167,255,.2);margin-bottom:11px}
.module-icon svg{width:19px;height:19px}
.module-title{font-family:'Space Grotesk',sans-serif;font-size:16px;font-weight:700;letter-spacing:-.01em;color:var(--ink)}
.module-text{color:var(--muted);font-size:12.5px;line-height:1.42;margin-top:7px}
.module-meta{color:var(--cyan);font-size:12px;font-weight:700;margin-top:11px}
.module-meta.green{color:var(--ok)}
.drag-hint{position:absolute;z-index:3;color:var(--muted);font-size:12.5px;display:flex;align-items:center;gap:11px;opacity:.8}
.drag-hint.left{left:10px;top:52%}.drag-hint.right{right:10px;top:52%;text-align:right}
.drag-hint b{color:var(--ink)}
.gesture-icon{width:42px;height:42px;display:grid;place-items:center;border-radius:50%;border:1px solid rgba(255,255,255,.16);
  color:#d7eaff;background:rgba(9,22,39,.48);font-size:20px;flex:none}
.snap-note{position:absolute;left:50%;bottom:8px;transform:translateX(-50%);color:var(--muted2);font-size:12px;text-align:center}
@media(max-width:1200px){.drag-hint{display:none}.module-card{width:186px;min-height:120px;padding:14px}}

/* ===== MagnaX AI — Werkzeuge (Arbeitsmatrix, Wissensbasis) ===== */
.aitools{display:flex;flex-direction:column;gap:6px}
.aitool{width:100%;text-align:left;padding:9px 12px;border-radius:9px;font-size:13.5px;font-weight:600;
  color:var(--ink);background:var(--space2);border:1px solid var(--line)}
.aitool:hover{border-color:var(--cyan-d);background:var(--panelb)}
.aitool.on{background:linear-gradient(90deg,rgba(59,167,255,.18),rgba(59,167,255,.06));border-color:var(--cyan-d);
  box-shadow:0 0 0 1px rgba(59,167,255,.25) inset}
.ainew.on{box-shadow:0 0 0 1px rgba(59,167,255,.3) inset}

.mxtitle{font-weight:800;letter-spacing:.2px;flex:1;background:none;border:none;padding:0 6px}
.mxwrap{flex:1;overflow:auto;padding:18px clamp(14px,4vw,34px) 40px;display:flex;flex-direction:column;gap:14px}
.mxintro{color:var(--muted);font-size:13.5px;line-height:1.55;max-width:760px}
.mxintro b{color:var(--ink)}

.mxclones{display:flex;flex-wrap:wrap;gap:8px}
.mxclone{display:inline-flex;align-items:center;gap:7px;padding:9px 13px;border-radius:11px;font-size:13px;font-weight:600;
  color:var(--muted);background:var(--space2);border:1px solid var(--line)}
.mxclone:hover{color:var(--ink);border-color:var(--line2)}
.mxclone.on{color:var(--ink);border-color:var(--cyan-d);background:linear-gradient(90deg,rgba(59,167,255,.16),rgba(59,167,255,.04));
  box-shadow:0 0 0 1px rgba(59,167,255,.25) inset}
.mxlvl{font-size:10px;font-weight:700;letter-spacing:.05em;padding:2px 6px;border-radius:6px;text-transform:uppercase;
  color:var(--muted2);background:rgba(255,255,255,.05);border:1px solid var(--line)}
.mxlvl.vtr{color:#ffcf9a;background:rgba(255,180,90,.10);border-color:rgba(255,180,90,.3)}
.mxlvl.fin{color:#9be7b4;background:rgba(60,200,120,.10);border-color:rgba(60,200,120,.32)}
.mxlvl.ip{color:#c9b3ff;background:rgba(150,110,255,.12);border-color:rgba(150,110,255,.34)}
.mxlvl.on{color:#03212a;background:linear-gradient(90deg,var(--cyan-d),var(--cyan));border-color:transparent}
.mxlvl.vtr.on{color:#1a0f00;background:linear-gradient(90deg,#ffcf9a,#ffb45a);border-color:transparent}
.mxlvl.fin.on{color:#032015;background:linear-gradient(90deg,#7ee0a0,#43c88a);border-color:transparent}
.mxlvl.ip.on{color:#14082a;background:linear-gradient(90deg,#c4a6ff,#9a6bff);border-color:transparent}

.mxstrategy,.kbtitle,.kbbody,.kblevel{width:100%;background:var(--space2);border:1px solid var(--line);border-radius:12px;
  color:var(--ink);font:inherit;padding:12px 14px;resize:vertical;line-height:1.5}
.mxstrategy:focus,.kbtitle:focus,.kbbody:focus,.kblevel:focus{outline:none;border-color:var(--cyan-d);
  box-shadow:0 0 0 3px rgba(59,167,255,.15)}
.mxrun{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.mxrun .btn{padding:11px 20px}
.mxhint{color:var(--muted2);font-size:12px}

.mxout{margin-top:4px}
.mxpanels{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:14px}
.mxpanel{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:14px;display:flex;flex-direction:column;gap:10px}
.mxph{font-size:14px;font-weight:800;color:var(--ink);letter-spacing:.2px;padding-bottom:8px;border-bottom:1px solid var(--line)}
.mxcard{background:var(--space2);border:1px solid var(--line);border-radius:11px;padding:11px 12px}
.mxcard-h{display:flex;align-items:center;gap:9px;margin-bottom:5px}
.mxnum{width:20px;height:20px;flex:none;display:grid;place-items:center;border-radius:50%;font-size:11px;font-weight:800;
  color:#03212a;background:linear-gradient(135deg,var(--cyan-d),var(--cyan))}
.mxcard-t{flex:1;font-size:13.5px;font-weight:700;color:var(--ink);min-width:0}
.mximp{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;padding:2px 7px;border-radius:6px}
.mximp.hi{color:#8ffcd0;background:rgba(80,209,165,.14)}
.mximp.mid{color:#9cc4ff;background:rgba(59,167,255,.14)}
.mximp.lo{color:var(--muted2);background:rgba(255,255,255,.05)}
.mxcard-d{font-size:13px;color:var(--muted);line-height:1.55}
.mxcard-d,.mxcard-t{word-break:break-word}
.mxrisk{font-size:12.5px;color:#ffcf9a;line-height:1.5;padding-top:2px}
.mxerr{color:#ff9a9a;font-size:13px;padding:10px 0}
.mxsynth{margin-top:16px;background:linear-gradient(180deg,rgba(59,167,255,.08),rgba(59,167,255,.02));
  border:1px solid var(--cyan-d);border-radius:14px;padding:16px}
.mxsynth-h{font-size:14px;font-weight:800;color:var(--ink);margin-bottom:8px}
.mxsynth .aibody{color:var(--ink);font-size:13.5px;line-height:1.6}

/* Wissensbasis */
.kbadd{display:flex;flex-direction:column;gap:9px;background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:14px}
.kbingest{border-color:rgba(90,140,255,.4);background:linear-gradient(160deg,rgba(59,167,255,.07),rgba(139,92,255,.05))}
.kbing-h{font-family:'Space Grotesk',sans-serif;font-size:15px;font-weight:700;color:var(--ink)}
.kbing-sub{font-size:12px;color:var(--muted);line-height:1.55}
.kbingest .mxrun{display:flex;flex-wrap:wrap;align-items:center;gap:9px}
.kbingest .bossstat{flex:1 1 100%;font-size:12px;color:var(--muted);min-height:15px}
.kbtitle{padding:10px 12px}
.kblevel{max-width:220px;cursor:pointer}
.kblist{display:flex;flex-direction:column;gap:10px}
.kbitem{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:12px 13px}
.kbitem.vtr,.kbitem.lvl-vertraulich{border-color:rgba(255,180,90,.32)}
.kbitem.lvl-finanz{border-color:rgba(60,200,120,.34)}
.kbitem.lvl-ip{border-color:rgba(150,110,255,.36)}
.kbitem-h{display:flex;align-items:center;gap:10px;margin-bottom:6px}
.kbitem-t{flex:1;font-size:13.5px;font-weight:700;color:var(--ink);min-width:0;word-break:break-word}
.kbitem-a{display:inline-flex;align-items:center;gap:5px;flex:none}
.kbitem-a .mxlvl{cursor:pointer}
.kbitem-b{font-size:13px;color:var(--muted);line-height:1.55;white-space:pre-wrap;word-break:break-word}
/* Wissens-Posteingang (Commit Engine) */
.kbinbox{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:14px;margin-bottom:6px}
.kbinbox-h{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}
.kbinbox-t{font-size:14px;font-weight:800;color:var(--ink);display:inline-flex;align-items:center;gap:8px}
.kbinbox-c{min-width:20px;height:20px;padding:0 6px;border-radius:11px;background:var(--accent,#3b82f6);color:#fff;font-size:12px;font-weight:800;display:inline-flex;align-items:center;justify-content:center}
.kbinbox-sub{font-size:12.5px;color:var(--muted);line-height:1.5;margin:6px 0 10px}
.kbinbox-list{display:flex;flex-direction:column;gap:9px}
.ci-item{background:var(--bg,#0d1117);border:1px solid var(--line);border-left:3px solid var(--accent,#3b82f6);border-radius:11px;padding:11px 12px;transition:opacity .2s}
.ci-item.vtr,.ci-item.lvl-vertraulich{border-left-color:#f0a340}
.ci-item.lvl-finanz{border-left-color:#43c88a}
.ci-item.lvl-ip{border-left-color:#9a6bff}
.ci-item.done{opacity:.62;border-left-color:var(--line)}
.ci-h{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:5px}
.ci-src{font-size:11.5px;font-weight:700;color:var(--muted);background:rgba(127,127,127,.13);padding:2px 8px;border-radius:8px;flex:none}
.ci-topic{font-size:13px;font-weight:700;color:var(--ink);min-width:0;word-break:break-word}
.cistat{font-size:11px;font-weight:800;padding:2px 8px;border-radius:8px;margin-left:auto;flex:none}
.cistat.ok{color:#16a34a;background:rgba(22,163,74,.14)}
.cistat.no{color:#dc2626;background:rgba(220,38,38,.14)}
.cistat.vtr{color:#d97706;background:rgba(217,119,6,.16)}
.cistat.fin{color:#1f9d57;background:rgba(60,200,120,.15)}
.cistat.ip{color:#7c4dff;background:rgba(150,110,255,.17)}
.ci-fact{font-size:13px;color:var(--ink);line-height:1.55;white-space:pre-wrap;word-break:break-word}
.ci-ta{width:100%;box-sizing:border-box;font:inherit;font-size:13px;line-height:1.5;padding:8px;border:1px solid var(--line);border-radius:8px;background:var(--panel);color:var(--ink);resize:vertical}
.ci-meta{font-size:11.5px;color:var(--muted);margin-top:5px}
.ci-acts{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin-top:9px}
.ci-acts .mxlvl{cursor:pointer}
.ci-sp,.ci-acts .ci-sp{flex:1 1 auto;min-width:0}
.ci-acts .btn{padding:6px 12px;font-size:12.5px}
.ci-acts .btn.ok{background:#16a34a;border-color:#16a34a;color:#fff}
.ci-acts .ciedit{padding:6px 10px}
/* Semantisches Gedächtnis */
.kbsem{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:12px 14px;margin-bottom:6px}
.kbsem-row{display:flex;align-items:center;gap:11px}
.kbsem-ic{font-size:19px;flex:none}
.kbsem-tx{flex:1;min-width:0}
.kbsem-t{font-size:13.5px;font-weight:800;color:var(--ink);display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.kbsem-state{font-size:11px;font-weight:800;padding:2px 8px;border-radius:8px;background:rgba(127,127,127,.15);color:var(--muted)}
.kbsem-state.ok{color:#16a34a;background:rgba(22,163,74,.14)}
.kbsem-state.warn{color:#d97706;background:rgba(217,119,6,.14)}
.kbsem-state.off{color:var(--muted)}
.kbsem-sub{font-size:12px;color:var(--muted);line-height:1.5;margin-top:3px}
.kbsem-row .btn{flex:none;padding:7px 13px;font-size:12.5px}
.kbsem-bar{height:5px;border-radius:4px;background:rgba(127,127,127,.16);overflow:hidden;margin-top:10px}
.kbsem-bar span{display:block;height:100%;width:0;border-radius:4px;background:linear-gradient(90deg,#3b82f6,#22d3ee);transition:width .5s ease}
.kbsem-tools{margin-top:10px}
.kbsem-tools .btn.sm{width:auto;padding:6px 12px;font-size:12px}
.kbmerge{margin-top:10px}
.kbmerge:empty{margin:0}
.kbmerge-head{font-size:12.5px;font-weight:800;color:var(--ink);margin-bottom:8px}
.kbmerge-ok{font-size:12.5px;color:#16a34a;font-weight:700}
.kbmg-list{display:flex;flex-direction:column;gap:8px;max-height:280px;overflow:auto}
.kbmg-c{border:1px solid var(--line);border-left:3px solid #22d3ee;border-radius:10px;padding:8px 10px;background:var(--bg,#0b1626)}
.kbmg-keep{font-size:12.5px;color:var(--ink);word-break:break-word}
.kbmg-drop{font-size:12px;color:var(--muted);margin-top:3px;word-break:break-word}
.kbmerge-btns{display:flex;gap:8px;margin-top:10px;flex-wrap:wrap}
.kbmerge-btns .btn{padding:7px 13px;font-size:12.5px;flex:0 0 auto}
.kbmerge-btns .btn.ok{background:#16a34a;border-color:#16a34a;color:#fff}
@media(max-width:640px){.mxwrap{padding:14px 14px 72px}.mxpanels{grid-template-columns:1fr}.ci-acts .ci-sp{display:none}.ci-acts{gap:5px}.kbsem-row{flex-wrap:wrap}.kbsem-row .btn{width:100%}}
.mxstrategy{min-height:132px}
.kbbody{min-height:104px}
.kblevel{resize:none;cursor:pointer}

/* ===== Trainings-Agent ===== */
.trwrow{display:flex;gap:8px;align-items:center}
.trwrow .kbtitle{flex:1}
.trlabel{max-width:160px}
.trwrow .btn{padding:10px 16px;flex:none}
.trsources{display:flex;flex-wrap:wrap;gap:7px;margin-top:4px}
.trsrc{background:var(--space2);border:1px solid var(--line)}
.trfilter{display:inline-flex;gap:5px;margin-left:auto}
.trfilter .mxlvl{cursor:pointer}
.trlog{display:flex;flex-direction:column;gap:10px}
.tiitem{background:var(--panel);border:1px solid var(--line);border-left:3px solid var(--line2);border-radius:12px;padding:12px 13px}
.tiitem.vs{border-left-color:var(--cyan-d)}
.tiitem.wn{border-left-color:#ffb45a}
.tiitem.ek{border-left-color:#4FD1A5}
.tiitem.done{opacity:.62}
.tihead{display:flex;align-items:center;gap:8px;margin-bottom:5px}
.tikind{font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.05em;padding:2px 7px;border-radius:6px}
.tikind.vs{color:#9cc4ff;background:rgba(59,167,255,.14)}
.tikind.wn{color:#ffcf9a;background:rgba(255,180,90,.14)}
.tikind.ek{color:#8ffcd0;background:rgba(80,209,165,.14)}
.tidiv{font-size:11px;color:var(--muted2);font-weight:600}
.tititle{font-size:13.5px;font-weight:700;color:var(--ink);margin-bottom:3px;word-break:break-word}
.tibody{font-size:13px;color:var(--muted);line-height:1.55;white-space:pre-wrap;word-break:break-word}
.tisrc{font-size:12px;margin-top:6px;color:var(--muted2);word-break:break-all}
.tisrc a{color:var(--cyan-d);text-decoration:none}
.tiacts{display:flex;flex-wrap:wrap;gap:7px;margin-top:10px}
.tibtn{font-size:12px;font-weight:700;padding:6px 11px;border-radius:8px;border:1px solid var(--line);color:var(--ink);background:var(--space2)}
.tibtn.team{border-color:var(--cyan-d);color:#9cc4ff}
.tibtn.team:hover{background:rgba(59,167,255,.14)}
.tibtn.vtr{border-color:rgba(255,180,90,.4);color:#ffcf9a}
.tibtn.vtr:hover{background:rgba(255,180,90,.12)}
.tibtn.ghost{color:var(--muted2)}
.tibtn.ghost:hover{color:var(--ink);border-color:var(--line2)}
.tistatus{font-size:11.5px;font-weight:600}
.tistatus.promoted{color:#8ffcd0}
.tistatus.discarded{color:var(--muted2)}
/* Vorbereiteter E-Mail-Entwurf im Review-Item */
.tiitem.hasmail{border-left-color:#3ba7ff}
.timailflag{margin-left:auto;font-size:10.5px;font-weight:800;letter-spacing:.04em;color:#9cc4ff;background:rgba(59,167,255,.14);padding:2px 8px;border-radius:7px}
.tiemail{margin-top:10px;border:1px dashed rgba(59,167,255,.4);background:rgba(59,167,255,.05);border-radius:10px;padding:10px 12px}
.tiemail-h{font-size:11.5px;font-weight:700;color:#9cc4ff;display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.tiemail-note{font-weight:600;color:var(--muted2);font-size:10.5px}
.tiemail-subj{font-family:'Space Grotesk',sans-serif;font-weight:700;color:var(--ink);font-size:13.5px;margin-top:7px}
.tiemail-body{font-size:12.5px;color:var(--muted);line-height:1.55;margin-top:5px;max-height:150px;overflow:auto;white-space:normal}
.tiemail-acts{margin-top:9px}
html.light .tiemail{background:rgba(59,167,255,.07)}
@media(max-width:640px){.trwrow{flex-wrap:wrap}.trlabel{max-width:none;flex:1}}
.trwrow{flex-wrap:nowrap}
.trwrow .kbtitle{flex:1 1 auto;min-width:0}
.trlabel{flex:0 0 150px}
.trwrow .btn{width:auto;flex:0 0 auto;padding:10px 18px}
@media(max-width:640px){.trwrow{flex-wrap:wrap}.trwrow .kbtitle,.trlabel{flex:1 1 100%}.trwrow .btn{width:100%}}

/* ===== Dokument-Export-Leiste an KI-Antworten ===== */
.docexport{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin-top:10px;padding-top:9px;border-top:1px solid var(--line)}
.dxlbl{font-size:11px;color:var(--muted2);letter-spacing:.04em}
.dxbtn{font-size:11.5px;font-weight:600;padding:5px 10px;border-radius:8px;border:1px solid var(--line);
  color:var(--muted);background:var(--space2)}
.dxbtn:hover{color:var(--ink);border-color:var(--cyan-d);background:var(--panelb)}

/* ===== Willkommens-Banner (Home) ===== */
.welcomebar{display:flex;align-items:center;gap:14px;margin:6px 0 4px;padding:13px 16px;border-radius:14px;
  background:linear-gradient(90deg,rgba(59,167,255,.16),rgba(59,167,255,.04));border:1px solid var(--cyan-d)}
.wb-ic{font-size:22px;flex:none}
.wb-tx{flex:1;font-size:13.5px;color:var(--ink);line-height:1.5;min-width:0}
.wb-go{flex:none;font-size:13px;font-weight:700;color:#03212a;background:linear-gradient(90deg,var(--cyan-d),var(--cyan));border-radius:9px;padding:9px 15px}
.wb-x{flex:none;width:28px;height:28px;border-radius:8px;color:var(--muted);font-size:14px}
.wb-x:hover{background:var(--panelb);color:var(--ink)}
@media(max-width:640px){.welcomebar{flex-wrap:wrap}.wb-tx{flex:1 1 100%;order:3}.wb-go{flex:1}}

/* ===== Leitfaden ===== */
.guide{max-width:900px}
.guidehero{background:linear-gradient(160deg,#0b1424,#0e1a2e);border:1px solid var(--line);border-radius:16px;padding:24px 26px;margin-bottom:8px}
html.light .guidehero{background:linear-gradient(160deg,#eaf0fb,#ffffff)}
.gh-eyebrow{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--cyan-d);font-weight:700}
.guidehero h1{margin:8px 0 6px;font-size:24px}
.guidehero p{color:var(--muted);font-size:14px;line-height:1.6;max-width:680px}
.grow{display:flex;gap:10px;flex-wrap:wrap;margin-top:14px}
.grow .btn{width:auto;padding:10px 18px}
.gsec{font-size:17px;margin:26px 0 12px;padding-bottom:7px;border-bottom:2px solid var(--cyan-d)}
.gnote{color:var(--muted);font-size:13.5px;margin:-4px 0 10px}
.grule{background:var(--panel);border:1px solid var(--line);border-left:3px solid var(--cyan-d);border-radius:10px;padding:11px 14px;margin:8px 0;font-size:13.5px;color:var(--muted);line-height:1.55}
.grule b{color:var(--ink)}
.gcards{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:12px}
.gcard{text-align:left;background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:13px 15px;color:var(--muted)}
button.gcard{cursor:pointer;transition:border-color .15s,transform .1s}
button.gcard:hover{border-color:var(--cyan-d);transform:translateY(-1px)}
.gcard-t{font-size:14px;font-weight:700;color:var(--ink);display:flex;align-items:center;justify-content:space-between;gap:8px}
.gcard-go{font-size:11.5px;font-weight:600;color:var(--cyan-d)}
.gcard-d{font-size:12.5px;line-height:1.5;margin-top:5px}
/* Anleitungen-Download (Leitfaden): zwei Karten mit PDF-Link */
.gdl{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:0 0 6px}
.gdl-card{display:flex;align-items:center;gap:13px;text-decoration:none;min-width:0;
  background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:14px 16px;
  color:var(--ink);transition:border-color .15s,transform .1s,box-shadow .15s}
.gdl-card:hover{border-color:var(--cyan-d);transform:translateY(-1px);box-shadow:0 8px 22px rgba(10,40,70,.18)}
.gdl-ic{flex:0 0 auto;font-size:24px;line-height:1}
.gdl-tx{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:2px}
.gdl-tx b{font-size:14px;color:var(--ink)}
.gdl-tx span{font-size:12px;color:var(--muted);line-height:1.45;overflow:hidden;text-overflow:ellipsis}
.gdl-go{flex:0 0 auto;font-size:11.5px;font-weight:700;color:var(--cyan-d);white-space:nowrap}
@media(max-width:640px){.gdl{grid-template-columns:1fr}.gdl-go{display:none}}
.gtable{border-collapse:collapse;width:100%;font-size:13px;margin-top:4px}
.gtable th,.gtable td{border:1px solid var(--line);padding:8px 11px;text-align:left}
.gtable th{background:var(--cyan-d);color:#03212a}
.gtable tr:nth-child(even) td{background:var(--space2)}
.gfoot{color:var(--muted2);font-size:11px;border-top:1px solid var(--line);margin-top:26px;padding-top:12px}

/* ===== Wochendokument (Antwort-Matrix) ===== */
.wdgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:14px;margin-top:6px}
.wdcard{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:14px 15px;display:flex;flex-direction:column;gap:10px}
.wdcard.mine{border-color:var(--cyan-d);box-shadow:0 0 0 1px rgba(59,167,255,.2) inset}
.wdhead{display:flex;align-items:center;gap:11px}
.wdavatar{width:34px;height:34px;flex:none;border-radius:50%;display:grid;place-items:center;font-weight:800;font-size:13px;color:#03212a;background:var(--pc,#3ba7ff)}
.wdwho{flex:1;min-width:0}
.wdname{font-size:14px;font-weight:700;color:var(--ink)}
.wdrole{font-size:11.5px;color:var(--muted2)}
.wdstat{font-size:11px;font-weight:700;padding:3px 8px;border-radius:6px;flex:none}
.wdstat.done{color:#8ffcd0;background:rgba(80,209,165,.14)}
.wdstat.open{color:var(--muted2);background:rgba(255,255,255,.05)}
.wdinput{width:100%;background:var(--space2);border:1px solid var(--line);border-radius:10px;color:var(--ink);font:inherit;padding:10px 12px;resize:vertical;min-height:104px;line-height:1.5}
.wdinput:focus{outline:none;border-color:var(--cyan-d);box-shadow:0 0 0 3px rgba(59,167,255,.15)}
.wdsave .btn{width:auto;padding:9px 16px}
.wdtext{font-size:13px;color:var(--muted);line-height:1.55;white-space:pre-wrap;word-break:break-word}

/* ===== PWA-Installation: Login-Button + Topbar-Download ===== */
.installbtn{width:100%;margin-top:14px;display:inline-flex;align-items:center;justify-content:center;gap:9px;
  padding:11px 16px;border-radius:11px;font-weight:700;font-size:14px;color:#03212a;
  background:linear-gradient(90deg,var(--cyan-d),var(--cyan));box-shadow:0 6px 20px rgba(59,167,255,.28)}
.installbtn svg{width:18px;height:18px}
.installbtn:hover{filter:brightness(1.05)}
.installhint{text-align:center;font-size:12px;color:var(--muted2);margin-top:8px}
.dlwidget{display:inline-flex;align-items:center;gap:7px;padding:7px 13px;border-radius:9px;font-size:12.5px;font-weight:700;
  color:var(--cyan-d);background:rgba(59,167,255,.10);border:1px solid rgba(59,167,255,.35)}
.dlwidget svg{width:15px;height:15px}
.dlwidget:hover{background:rgba(59,167,255,.18);color:var(--ink)}
@media(max-width:760px){.dlwidget span{display:none}.dlwidget{padding:7px 9px}}

/* ===== „Frag die Firma" — universelle KI-Suche (Start) ===== */
.askbar{margin:8px 0 4px}
.askrow{display:flex;align-items:center;gap:10px;background:linear-gradient(90deg,rgba(59,167,255,.12),rgba(59,167,255,.03));
  border:1px solid var(--cyan-d);border-radius:14px;padding:8px 10px 8px 14px;box-shadow:0 6px 22px rgba(59,167,255,.14)}
.askorb{flex:none;display:grid;place-items:center}
.askinput{flex:1;min-width:0;background:transparent;border:none;color:var(--ink);font:inherit;font-size:15px;padding:8px 4px}
.askinput:focus{outline:none}
.askinput::placeholder{color:var(--muted2)}
.askgo{flex:none;width:38px;height:38px;border-radius:10px;font-size:18px;font-weight:800;color:#03212a;
  background:linear-gradient(135deg,var(--cyan-d),var(--cyan))}
.askgo:hover{filter:brightness(1.06)}
.askresult{display:none;margin-top:10px}
.askresult.show{display:block}
.askans{background:var(--panel);border:1px solid var(--line);border-radius:13px;padding:14px 16px}
.askans.err{color:#ff9a9a;display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.askretry{margin-left:auto;font-size:12.5px;font-weight:700;color:var(--ink);background:rgba(255,255,255,.06);border:1px solid var(--line2);border-radius:9px;padding:7px 12px;cursor:pointer;white-space:nowrap}
.askretry:hover{background:rgba(255,255,255,.12)}
html.light .askretry{background:rgba(0,0,0,.05)}
.askans .aibody{color:var(--ink);font-size:14px;line-height:1.6}
.askfoot{margin-top:10px;padding-top:9px;border-top:1px solid var(--line);font-size:11.5px;color:var(--muted2);display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.askmore{font-size:11.5px;font-weight:700;color:var(--cyan-d);margin-left:auto}
.askmore:hover{color:var(--ink)}
/* Klickbare Belege unter der Antwort: je genutztem Wissens-Baustein eine Quelle. */
.asksrc{margin-top:11px;padding-top:10px;border-top:1px dashed var(--line);display:flex;align-items:flex-start;gap:8px;flex-wrap:wrap;min-width:0}
.asksrc-h{font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted2);font-weight:700;flex:none;margin-top:5px}
.asksrc-pills{display:flex;gap:6px;flex-wrap:wrap;min-width:0}
.asksrc-pill{display:inline-flex;align-items:center;gap:6px;max-width:230px;padding:5px 10px;border-radius:999px;border:1px solid var(--line2);background:var(--space2);color:var(--ink);cursor:pointer;font-size:11.5px;transition:.15s}
.asksrc-pill:hover{border-color:var(--cyan);color:var(--cyan);transform:translateY(-1px)}
.asksrc-ic{flex:none;font-size:12px}
.asksrc-tx{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* Beleg-Popup (openModal-Inhalt) */
.asrc-modal{display:flex;flex-direction:column;gap:12px}
.asrc-head{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:15px;color:var(--ink)}
.asrc-head .asrc-ic{font-size:17px;flex:none}
.asrc-lvl{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--warn);border:1px solid var(--warn);border-radius:6px;padding:1px 6px}
.asrc-cat{font-size:11px;color:var(--muted);border:1px solid var(--line2);border-radius:6px;padding:1px 7px}
.asrc-fact{font-size:14px;line-height:1.6;color:var(--ink);white-space:pre-wrap;background:var(--space2);border:1px solid var(--line);border-radius:11px;padding:12px 13px}
.asrc-prov{font-size:12px;color:var(--muted2)}
.asrc-rows{display:flex;flex-direction:column;gap:0}
.asrc-row{display:flex;justify-content:space-between;gap:12px;font-size:13px;padding:7px 0;border-bottom:1px solid var(--line);min-width:0}
.asrc-row:last-child{border-bottom:0}
.asrc-row>span{color:var(--muted2);flex:none}
.asrc-row>b{color:var(--ink);text-align:right;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.asrc-actions{display:flex;justify-content:flex-end;margin-top:2px}
/* Herkunfts-Pill an Dateien wird anklickbar (Button statt Span). */
.srcpill-btn{cursor:pointer;background:var(--space2);font-family:inherit;transition:.15s}
.srcpill-btn:hover{border-color:var(--cyan);color:var(--cyan);transform:translateY(-1px)}
/* „Ins Wissen"-Knopf an KI-Antworten + Vorschlags-Sektion in der Aufnahme. */
.kbpropbtn{margin-top:8px;font-size:11.5px;font-weight:600;color:var(--cyan-d);background:transparent;border:1px solid var(--line2);border-radius:8px;padding:4px 9px;cursor:pointer;transition:.15s}
.kbpropbtn:hover{border-color:var(--cyan);color:var(--cyan)}
.kbpropbtn:disabled{opacity:.55;cursor:default}
.ci-proposals{margin-bottom:12px;border:1px solid var(--cyan-d);border-radius:12px;padding:10px;background:color-mix(in srgb,var(--cyan) 6%,transparent)}
.ci-proph{display:flex;align-items:center;gap:8px;font-size:12.5px;font-weight:700;color:var(--cyan);margin-bottom:4px}
.ci-propc{background:var(--cyan);color:#03212a;border-radius:9px;padding:0 7px;font-size:11px;font-weight:700}
.ci-prophint{margin-left:auto;font-weight:500;color:var(--muted2);font-size:11px}
.ci-prop{border:1px solid var(--line2);border-radius:10px;padding:8px 10px;margin-top:6px;background:var(--panel)}
.cp-acc{font-size:12px;padding:4px 10px}
.askthinking{display:flex;gap:5px;padding:8px 2px}
.askthinking span{width:7px;height:7px;border-radius:50%;background:var(--cyan-d);opacity:.5;animation:askpulse 1s infinite}
.askthinking span:nth-child(2){animation-delay:.15s}
.askthinking span:nth-child(3){animation-delay:.3s}
@keyframes askpulse{0%,100%{opacity:.3;transform:translateY(0)}50%{opacity:1;transform:translateY(-3px)}}

/* Topbar-Konsistenz: Titel nie stauchen, KPIs nicht umbrechen, Download-Label
   auf engen Breiten zum Icon (auf breiten Screens voll sichtbar). */
.topbar h2{flex:0 0 auto}
.kpirow{flex-wrap:nowrap}
@media(max-width:1180px){.dlwidget span{display:none}.dlwidget{padding:7px 9px}}

/* ===== Förder- & Finanz-Cockpit ===== */
.cockpit{max-width:920px}
.cocktop{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:12px;margin-bottom:16px}
.ctile{background:var(--panel);border:1px solid var(--line);border-radius:13px;padding:13px 15px}
.ctile.wide{grid-column:1/-1}
.ctlbl{font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted2);font-weight:700}
.ctval{font-family:'Space Grotesk',sans-serif;font-size:22px;font-weight:700;color:var(--ink);margin-top:4px}
.ctval.good{color:#4FD1A5}
.ctsub{font-size:11.5px;color:var(--muted2);margin-top:3px}
.cstatusrow{display:flex;flex-wrap:wrap;gap:7px;margin-top:6px}
.cockadd{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:14px;display:flex;flex-direction:column;gap:9px;margin-bottom:16px}
.cockrow1{display:flex;gap:9px}.cockrow1 .kbtitle{flex:1}
.cockrow2{display:flex;gap:9px;flex-wrap:wrap}
.cockrow2 .kbtitle,.cockrow2 .kblevel{flex:1;min-width:120px}
.gcardlist{display:flex;flex-direction:column;gap:10px}
.gcardrow{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:12px 14px}
.grtop{display:flex;align-items:center;gap:10px}
.grname{flex:1;font-size:14px;font-weight:700;color:var(--ink);min-width:0;word-break:break-word}
.gstatus{font-size:10.5px;font-weight:800;text-transform:uppercase;letter-spacing:.04em;padding:3px 8px;border-radius:7px;white-space:nowrap}
.gstatus.rech{color:var(--muted2);background:rgba(255,255,255,.06)}
.gstatus.antr{color:#9cc4ff;background:rgba(59,167,255,.14)}
.gstatus.eing{color:#ffcf9a;background:rgba(255,180,90,.14)}
.gstatus.bew{color:#8ffcd0;background:rgba(80,209,165,.16)}
.gstatus.abg{color:#ff9a9a;background:rgba(255,90,90,.12)}
.grmeta{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:7px;font-size:12.5px;color:var(--muted)}
.gamount{font-family:'Space Grotesk',sans-serif;font-weight:700;color:var(--ink)}
.gowner{display:inline-flex;align-items:center;gap:5px;color:var(--muted2)}
.grnote{font-size:12.5px;color:var(--muted);margin-top:7px;line-height:1.5}
.cd{font-size:11px;font-weight:700;padding:2px 7px;border-radius:6px}
.cd.od{color:#ff9a9a;background:rgba(255,90,90,.14)}
.cd.soon{color:#ffcf9a;background:rgba(255,180,90,.14)}
.cd.near{color:#9cc4ff;background:rgba(59,167,255,.12)}
.cd.ok{color:var(--muted2);background:rgba(255,255,255,.05)}
@media(max-width:600px){.cockrow1{flex-wrap:wrap}.cockrow1 .kbtitle{flex:1 1 100%}}
.dlwidget{white-space:nowrap;flex:none}

/* ===== Kontakt-Formular (modernisiert) ===== */
.coform{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:16px}
.coform-h{font-family:'Space Grotesk',sans-serif;font-weight:600;font-size:15px;color:var(--ink);margin-bottom:12px}
.cofgrid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.cofield{display:flex;flex-direction:column;gap:5px;min-width:0}
.cofield.wide{grid-column:1/-1}
.cofield>span{font-size:11px;letter-spacing:.05em;text-transform:uppercase;color:var(--muted2);font-weight:700}
.cofield>input{width:100%;min-width:0;background:var(--input,rgba(255,255,255,.03));border:1px solid var(--line);border-radius:10px;padding:11px 13px;color:var(--ink);font-size:14px;font-family:inherit;transition:border-color .15s,box-shadow .15s}
.cofield>input::placeholder{color:var(--muted2);opacity:.7}
.cofield>input:focus{outline:none;border-color:var(--cyan-d);box-shadow:0 0 0 3px rgba(59,167,255,.15)}
.cofoot{display:flex;justify-content:flex-end;margin-top:14px}
.cofoot .btn{width:auto;padding:10px 20px}
@media(max-width:600px){.cofgrid{grid-template-columns:1fr}}
html.light .cofield>input{background:#fff}
/* Kontakt-Karte anklickbar → 360°-Akte */
.cocard{cursor:pointer;transition:border-color .15s,transform .12s}
.cocard:hover{border-color:var(--line2);transform:translateY(-1px)}
.cocard .rtop{align-items:center}
.coakte{flex:none;font-size:11px;font-weight:800;letter-spacing:.04em;color:var(--cyan-d);opacity:.75;white-space:nowrap;margin-left:auto;padding-right:8px}
.cocard:hover .coakte{opacity:1}

/* ===== Kontakt-360°-Akte ===== */
.c360wrap{display:flex;flex-direction:column;gap:14px}
.c360head{display:flex;gap:14px;align-items:center}
.c360av{flex:none;width:56px;height:56px;border-radius:16px;background:linear-gradient(135deg,#3ba7ff,#1f6fd0);color:#06121f;font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:22px;display:flex;align-items:center;justify-content:center}
.c360id{min-width:0}
.c360name{font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:20px;color:var(--ink);line-height:1.2;word-break:break-word}
.c360org{font-size:13.5px;color:var(--muted);margin-top:2px}
.c360role{font-size:12.5px;color:var(--muted2);margin-top:3px}
.c360contact{display:flex;flex-wrap:wrap;gap:12px;margin-top:7px;font-size:13px}
.c360contact a{color:var(--cyan-d)}
.c360acts{display:flex;flex-wrap:wrap;gap:9px}
.c360acts .btn{width:auto;padding:9px 15px}
.c360stat{font-size:12.5px;color:var(--muted2)}
.c360sec{background:var(--panel);border:1px solid var(--line);border-radius:13px;padding:13px 14px}
.c360sh{font-family:'Space Grotesk',sans-serif;font-weight:600;font-size:14px;color:var(--ink);display:flex;align-items:center;gap:8px;margin-bottom:9px}
.c360cnt{font-family:'JetBrains Mono',monospace;font-size:11px;color:var(--muted2);background:rgba(255,255,255,.06);padding:2px 8px;border-radius:20px}
.c360quick{display:flex;gap:8px;margin-bottom:10px}
.c360quick input{flex:1;min-width:0;background:var(--input,rgba(255,255,255,.03));border:1px solid var(--line);border-radius:9px;padding:9px 12px;color:var(--ink);font-size:13.5px;font-family:inherit}
.c360quick input:focus{outline:none;border-color:var(--cyan-d)}
.c360quick .btn.sm{flex:none;width:auto;padding:8px 15px}
.c360row{display:flex;align-items:center;gap:10px;width:100%;text-align:left;background:var(--panel2,rgba(255,255,255,.02));border:1px solid var(--line);border-radius:10px;padding:10px 12px;margin-top:7px;color:inherit;cursor:pointer;transition:border-color .15s}
.c360row:first-of-type{margin-top:0}
.c360row.static{cursor:default}
.c360row:not(.static):hover{border-color:var(--line2)}
.c360row>div{min-width:0;flex:1}
.c360rt{font-size:13.5px;font-weight:600;color:var(--ink);word-break:break-word}
.c360rm{font-size:12px;color:var(--muted2);margin-top:3px;word-break:break-word}
.c360arr{flex:none;color:var(--cyan-d);font-weight:700}
html.light .c360row{background:#fff}
html.light .c360quick input{background:#fff}

/* ===== IP-/Lizenz-Portfolio (nutzt Cockpit-Karten) ===== */
.ipsec-h{font-family:'Space Grotesk',sans-serif;font-weight:600;font-size:15px;color:var(--ink);margin:6px 0 10px}
.ipclaims{font-family:'Space Grotesk',sans-serif;font-weight:700;color:var(--ink)}
.ipcrit{font-size:10.5px;font-weight:800;letter-spacing:.03em;color:#ff9a9a;background:rgba(255,90,90,.14);padding:2px 7px;border-radius:7px;white-space:nowrap}
.gcardrow.crit{border-left:3px solid #ff6a6a}
.ipcritlbl{display:inline-flex;align-items:center;gap:7px;font-size:13px;color:var(--muted);white-space:nowrap;flex:none}
.ipcritlbl input{width:16px;height:16px}

/* ===== Analytics-Cockpit (Inline-SVG-Charts) ===== */
.angrid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;margin-top:16px}
.ancard{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:15px 16px;min-width:0}
.ancard.anfoot{grid-column:1/-1}
.anh{font-family:'Space Grotesk',sans-serif;font-weight:600;font-size:14px;color:var(--ink);margin-bottom:12px}
.chbars{display:flex;flex-direction:column;gap:9px}
.chbar{display:flex;align-items:center;gap:10px;min-width:0}
.chblbl{flex:0 0 34%;max-width:34%;font-size:12.5px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.chbtrack{flex:1;height:12px;background:rgba(255,255,255,.05);border-radius:7px;overflow:hidden;min-width:0}
.chbfill{display:block;height:100%;border-radius:7px;transition:width .5s cubic-bezier(.3,.9,.3,1)}
.chbval{flex:none;font-family:'JetBrains Mono',monospace;font-size:11.5px;color:var(--ink);min-width:38px;text-align:right}
.chdonutwrap{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.chdonut{width:120px;height:120px;flex:none}
.chdctr{text-anchor:middle;font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:20px;fill:var(--ink)}
.chdsub{text-anchor:middle;font-size:8px;fill:var(--muted2);letter-spacing:.04em}
.chlegend{display:flex;flex-direction:column;gap:6px;min-width:0;flex:1}
.chlgd{display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--muted);min-width:0}
.chlgd b{margin-left:auto;color:var(--ink);font-family:'JetBrains Mono',monospace;font-size:11.5px}
.chlgt{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.chdot{width:10px;height:10px;border-radius:3px;flex:none}
.anlist{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:7px;font-size:13px;color:var(--muted);line-height:1.5}
.anlist b{color:var(--ink)}
@media(max-width:760px){.angrid{grid-template-columns:1fr}}
html.light .chbtrack{background:rgba(0,0,0,.06)}

/* ===== Externer Buchungslink (Kalender) ===== */
.bookcard{padding:0;overflow:hidden;margin-bottom:14px}
.bookhead{width:100%;display:flex;align-items:center;gap:10px;padding:13px 15px;background:transparent;border:0;color:var(--ink);font-size:14px;font-weight:600;font-family:'Space Grotesk',sans-serif;cursor:pointer;text-align:left}
.bookhead .bookhint{color:var(--muted2);font-weight:500;font-size:12px;font-family:Inter,sans-serif}
.bookhead .bookchev{margin-left:auto;color:var(--muted2)}
.bookbody{padding:0 15px 16px}
.bookrow{display:flex;flex-wrap:wrap;align-items:flex-end;gap:10px;margin-top:6px}
.bookfield{display:flex;flex-direction:column;gap:5px;min-width:0}
.bookfield>span{font-size:11px;letter-spacing:.05em;text-transform:uppercase;color:var(--muted2);font-weight:700}
.bookfield .kblevel{min-width:130px}
.bookrow .btn{width:auto;padding:10px 16px}
.booklink{margin-top:14px;border:1px dashed var(--line2);border-radius:11px;padding:12px 13px;background:rgba(59,167,255,.05)}
.lbl2{font-size:11px;letter-spacing:.05em;text-transform:uppercase;color:var(--muted2);font-weight:700;margin-bottom:8px}
.booklinkrow{display:flex;align-items:center;gap:9px;flex-wrap:wrap}
.booklinkrow code{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-family:'JetBrains Mono',monospace;font-size:12px;color:var(--ink);background:rgba(255,255,255,.05);padding:8px 10px;border-radius:7px}
.booklinkrow .btn.sm{flex:none;width:auto;padding:8px 13px}
html.light .booklinkrow code{background:rgba(0,0,0,.05)}

/* ===== Aufgaben-Frist (Fluss: Frist → Kalender) ===== */
.tdue{display:inline-block;margin-top:6px;font-size:11px;font-weight:700;padding:2px 8px;border-radius:6px;background:rgba(255,255,255,.05);color:var(--muted2)}
.tdue.od{color:#ff9a9a;background:rgba(255,90,90,.14)}
.tdue.soon{color:#ffcf9a;background:rgba(255,180,90,.16)}
.tdue.near{color:#9cc4ff;background:rgba(59,167,255,.14)}
.tdue.ok{color:#8ffcd0;background:rgba(80,209,165,.12)}
.fieldhint{font-size:11.5px;color:var(--muted2);margin-top:5px;line-height:1.4}

/* ===== KI-Status (Kontrollcenter) ===== */
.aihealth{display:flex;flex-direction:column;gap:9px;margin-top:12px}
.aihrow{border:1px solid var(--line);border-left:3px solid var(--line2);border-radius:11px;padding:11px 13px;background:var(--panel2,rgba(255,255,255,.02))}
.aihrow.ok{border-left-color:#4FD1A5}
.aihrow.err{border-left-color:#ff6a6a}
.aihrow.warn{border-left-color:#ffb64d}
.aihrow.off{border-left-color:var(--muted2)}
.aihtop{display:flex;flex-wrap:wrap;align-items:center;gap:8px;font-size:14px;color:var(--ink)}
.aiheng{font-size:11.5px;color:var(--muted2)}
.aihstate{margin-left:auto;font-size:11.5px;font-weight:700}
.aihrow.ok .aihstate{color:#8ffcd0}
.aihrow.err .aihstate{color:#ff9a9a}
.aihrow.warn .aihstate{color:#ffd394}
.aihrow.off .aihstate{color:var(--muted2)}
.aihdetail{font-size:12.5px;color:var(--muted);margin-top:6px;line-height:1.5}
html.light .aihrow{background:#fff}
/* Konnektor-Eingang (Kontrollcenter, nur Admin) */
.ccinbox{display:flex;flex-direction:column;gap:9px;margin-top:12px}
.ccinrow{border:1px solid var(--line);border-left:3px solid #7aa2ff;border-radius:11px;padding:11px 13px;background:var(--panel2,rgba(255,255,255,.02))}
html.light .ccinrow{background:#fff}
.ccinrow.done{opacity:.55;border-left-color:var(--muted2)}
.ccintop{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.ccinic{font-size:15px;line-height:1}
.ccinkind{font-weight:700;font-size:13px;color:var(--ink);min-width:0}
.ccinwhen{font-size:11.5px;color:var(--muted2)}
.ccintop .btn.sm,.ccintop .pill{margin-left:auto}
.ccinsum{font-size:13px;color:var(--ink);margin-top:7px;line-height:1.45;word-break:break-word}
.ccinhow{font-size:12px;color:var(--muted);margin-top:5px;line-height:1.45}
/* Leitstand-Lagebild (OS · Company) — read-only Föderations-Telemetrie */
.pill.amber{color:var(--warn);border-color:var(--warn)}
#leitLagebild .leitline{margin:0 0 10px;font-weight:600;line-height:1.45;color:var(--ink);word-break:break-word}
#leitLagebild .leitcounts{display:flex;flex-wrap:wrap;gap:8px}
#leitLagebild .leitcount{flex:1 1 88px;min-width:0;border:1px solid var(--line);border-radius:12px;padding:8px 10px;font-size:12.5px;color:var(--muted);text-align:center}
#leitLagebild .leitcount b{display:block;font-size:20px;color:var(--ink);font-weight:700;line-height:1.1}
#leitLagebild .leitcount.ok b{color:var(--ok)}
#leitLagebild .leitcount.warn b{color:var(--warn)}
#leitLagebild .leitcount.off b{color:var(--err)}
#leitLagebild .leitalarms{margin-top:10px;display:flex;flex-direction:column;gap:9px}
#leitLagebild .leitalarms .ccinrow{border-left-color:var(--err)}
/* Connector-URL-Zeile */
.connurl{border:1px solid var(--line);border-radius:11px;padding:11px 13px;background:var(--panel2,rgba(255,255,255,.02))}
.connurl-l{font-size:11px;letter-spacing:.05em;text-transform:uppercase;color:var(--muted2);font-weight:700}
.connurl-r{display:flex;align-items:center;gap:10px;margin-top:7px;flex-wrap:wrap}
.connurl-r code{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-family:'JetBrains Mono',monospace;font-size:12.5px;color:var(--ink);background:rgba(255,255,255,.05);padding:7px 10px;border-radius:7px}
.connurl-r .btn.sm{flex:none;width:auto;padding:7px 13px}
html.light .connurl{background:#fff}
html.light .connurl-r code{background:rgba(0,0,0,.05)}

/* ===== Deal-Pipeline (Kanban, vertraulich) ===== */
.pipeboard{display:flex;gap:12px;overflow-x:auto;padding-bottom:8px;-webkit-overflow-scrolling:touch;scroll-snap-type:x proximity;overscroll-behavior-x:contain}
.pipecol{flex:0 0 250px;min-width:0;background:var(--panel);border:1px solid var(--line);border-radius:14px;display:flex;flex-direction:column;overflow:hidden;scroll-snap-align:start}
.pipecol.dragover{background:rgba(59,167,255,.06);border-color:var(--line2)}
.pipehd{display:flex;align-items:center;gap:8px;padding:11px 13px 7px}
.pipenm{flex:1;font-family:'Space Grotesk',sans-serif;font-weight:600;font-size:13.5px;color:var(--ink);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pipecnt{font-family:'JetBrains Mono',monospace;font-size:11px;color:var(--muted2);background:rgba(255,255,255,.06);padding:2px 8px;border-radius:20px;flex:none}
.pipehsum{padding:0 13px 9px;display:flex;flex-wrap:wrap;align-items:baseline;gap:6px;border-bottom:1px solid var(--line)}
.pipesum{font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:14px;color:var(--ink)}
.pipesub{font-size:10.5px;color:var(--muted2)}
.pipeitems{padding:11px;flex:1;overflow:auto;display:flex;flex-direction:column;gap:9px;min-height:70px}
.pipeempty{font-size:12px;color:var(--muted2);text-align:center;padding:10px 0;opacity:.6}

/* ===== Klappbare Kanban-Spalten (Aufgaben & Pipeline) =====
   Ungleich lange Spalten einzeln einklappen: Karten weg, Kopf + Zähler bleiben.
   Eine zugeklappte Spalte schrumpft auf ihren Kopf (align-self:start), die
   Nachbarn behalten ihre volle Höhe — kein Umbau des restlichen Boards. */
.coltog{background:none;border:0;padding:0;margin:0 2px 0 0;cursor:pointer;color:var(--muted);
  display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;width:18px;height:18px}
.coltog:hover{color:var(--ink)}
.colchev{width:7px;height:7px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;
  transform:rotate(45deg);transition:transform .2s;display:inline-block}
.col.collapsed .colchev,.pipecol.collapsed .colchev{transform:rotate(-45deg)}
.col .ch .colnm{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:left}
.col__body{flex:1 1 auto;min-height:0;display:grid;grid-template-rows:1fr;transition:grid-template-rows .28s ease}
.col__inner{min-height:0;overflow:hidden;display:flex;flex-direction:column}
.col.collapsed>.col__body,.pipecol.collapsed>.col__body{grid-template-rows:0fr;flex:0 0 auto}
.col.collapsed,.pipecol.collapsed{align-self:start}
/* Beim Ziehen (Aufgaben) zugeklappte Spalten kurz aufklappen — immer ablegbar. */
.board.dragging .col.collapsed>.col__body{grid-template-rows:1fr;flex:1 1 auto}
.board.dragging .col.collapsed{align-self:stretch}
@media(prefers-reduced-motion:reduce){.col__body{transition:none}.colchev{transition:none}}
.pipecard{background:var(--panel2,rgba(255,255,255,.02));border:1px solid var(--line);border-radius:12px;padding:11px 12px;cursor:grab;transition:border-color .15s,transform .12s,box-shadow .15s}
.pipecard:hover{border-color:var(--line2)}
.pipecard.drag{opacity:.5;cursor:grabbing}
.pctop{display:flex;align-items:center;gap:7px;margin-bottom:6px}
.pctype{font-size:9.5px;font-weight:800;text-transform:uppercase;letter-spacing:.05em;padding:3px 7px;border-radius:6px;white-space:nowrap;flex:1;overflow:hidden;text-overflow:ellipsis}
.pctype.hot{color:#8ffcd0;background:rgba(80,209,165,.15)}
.pctype.inv{color:#9cc4ff;background:rgba(59,167,255,.15)}
.pctype.lic{color:#ffcf9a;background:rgba(255,180,90,.15)}
.pctype.oem{color:#c8b6ff;background:rgba(160,130,255,.16)}
.pctype.par{color:#8ffcd0;background:rgba(80,209,165,.12)}
.pctype.son{color:var(--muted2);background:rgba(255,255,255,.06)}
.pcedit,.pipecard .del{flex:none;width:22px;height:22px;line-height:1;border:0;background:transparent;color:var(--muted2);border-radius:6px;cursor:pointer;font-size:14px}
.pcedit:hover{color:var(--cyan-d);background:rgba(255,255,255,.06)}
.pipecard .del:hover{color:#ff9a9a;background:rgba(255,90,90,.1)}
.pctitle{font-size:13.5px;font-weight:700;color:var(--ink);line-height:1.35;word-break:break-word}
.pcmeta{display:flex;flex-wrap:wrap;align-items:center;gap:7px;margin-top:7px;font-size:12px;color:var(--muted)}
.pcval{font-family:'Space Grotesk',sans-serif;font-weight:700;color:var(--ink)}
.pcprob{font-family:'JetBrains Mono',monospace;font-size:11px;color:var(--muted2);background:rgba(255,255,255,.05);padding:1px 6px;border-radius:5px}
.pcw{color:#8ffcd0;font-weight:600}
.pcowner{display:inline-flex;align-items:center;gap:4px;color:var(--muted2);margin-left:auto}
.pcnext{font-size:12px;color:var(--cyan-d);margin-top:7px;line-height:1.45;word-break:break-word}
.pccontact{font-size:11.5px;color:var(--muted2);margin-top:5px;word-break:break-word}
.pcnote{font-size:12px;color:var(--muted);margin-top:5px;line-height:1.45;word-break:break-word}
.pcfoot{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:8px}
.pipestag{font-size:10.5px;font-weight:700;color:#ffcf9a;background:rgba(255,180,90,.12);padding:2px 7px;border-radius:6px}
.pipeedit{margin-top:10px;padding-top:10px;border-top:1px dashed var(--line);display:flex;flex-direction:column;gap:7px}
.pipeedit .perow{display:flex;gap:7px}
.pipeedit select,.pipeedit input{width:100%;min-width:0;background:var(--input,rgba(255,255,255,.03));border:1px solid var(--line);border-radius:8px;padding:7px 9px;color:var(--ink);font-size:12.5px;font-family:inherit}
.pipeedit .perow>*{flex:1}
.peact{display:flex;gap:7px;margin-top:2px}
.btn.sm{padding:7px 12px;font-size:12.5px}
.btn.ghost{background:transparent;border:1px solid var(--line);color:var(--muted)}
@media(max-width:600px){.pipecol{flex-basis:82vw}.pipeboard{scroll-snap-type:x mandatory}}
html.light .pipecard{background:#fff}
html.light .pipecol{background:#f6f8fd}
html.light .pcprob,html.light .pipecnt{background:rgba(0,0,0,.05)}
html.light .pipeedit select,html.light .pipeedit input{background:#fff}

/* ===== Automatisierung (Wenn→Dann) ===== */
.automations{max-width:820px}
.autoacts{display:flex;flex-wrap:wrap;align-items:center;gap:14px;font-size:13px;color:var(--muted)}
.autoacts label{display:inline-flex;align-items:center;gap:6px;cursor:pointer}
.autoassign{display:inline-flex;align-items:center;gap:6px;margin-left:auto;color:var(--muted2);font-size:12.5px}
.autoassign .kblevel{max-width:150px}
.autolist{display:flex;flex-direction:column;gap:10px}
.autorow{display:flex;align-items:center;gap:12px;background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:12px 14px}
.autorow.off{opacity:.55}
.autobody{flex:1;min-width:0}
.autoname{font-size:14px;font-weight:700;color:var(--ink)}
.autorule{font-size:12.5px;color:var(--muted);margin-top:3px;word-break:break-word}
.autorule b{color:var(--cyan-d)}
.autotoggle{position:relative;display:inline-block;width:40px;height:22px;flex:none}
.autotoggle input{opacity:0;width:0;height:0;position:absolute}
.autotoggle span{position:absolute;inset:0;border-radius:20px;background:var(--line2);transition:.2s;cursor:pointer}
.autotoggle span::before{content:"";position:absolute;width:16px;height:16px;left:3px;top:3px;border-radius:50%;background:#fff;transition:.2s}
.autotoggle input:checked+span{background:linear-gradient(90deg,var(--cyan-d),var(--cyan))}
.autotoggle input:checked+span::before{transform:translateX(18px)}
@media(max-width:600px){.autoassign{margin-left:0}}

/* ===== Mail: Sprach-Umschalter + Projektwissen-Antwort ===== */
.bodybar{display:flex;justify-content:flex-end;margin:2px 0 4px}
.langtoggle{font-size:12px;font-weight:600;color:var(--cyan-d);background:rgba(59,167,255,.10);border:1px solid rgba(59,167,255,.32);border-radius:8px;padding:5px 11px}
.langtoggle:hover{background:rgba(59,167,255,.18);color:var(--ink)}
.assist-act.strong{border-color:var(--cyan-d);color:#9cc4ff;background:linear-gradient(90deg,rgba(59,167,255,.14),rgba(59,167,255,.04))}
.btn.subtle.strong{border-color:var(--cyan-d);color:#9cc4ff}
.cctag{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--muted2);background:rgba(255,255,255,.05);border:1px solid var(--line);border-radius:5px;padding:1px 6px;margin-left:6px}
.knowout:empty{display:none}
.knowout{margin:8px 0}
.knowalt{background:linear-gradient(180deg,rgba(59,167,255,.08),rgba(59,167,255,.02));border:1px solid var(--cyan-d);border-radius:11px;padding:11px 13px}
.knowalt.err{color:#ff9a9a;background:none;border-color:var(--line)}
.knowalt-h{font-size:12.5px;font-weight:800;color:var(--ink);margin-bottom:6px}
.knowalt-b{font-size:13px;color:var(--muted);line-height:1.55;white-space:pre-wrap;word-break:break-word;margin-bottom:8px}

/* ===== Tägliches Klon-Meeting ===== */
.mtghead{background:linear-gradient(160deg,rgba(59,167,255,.10),rgba(59,167,255,.02));border:1px solid var(--cyan-d);border-radius:14px;padding:15px 17px;margin-bottom:14px}
.mtgtopic{font-size:18px;font-weight:800;color:var(--ink)}
.mtgmeta{font-size:12px;color:var(--muted2);margin-top:3px}
.mtgdisc{font-size:13.5px;color:var(--muted);line-height:1.6;margin-top:10px;white-space:pre-wrap}

/* ===== Spruch des Tages — Begrüßungs-Popup ===== */
.quotemodal{position:fixed;inset:0;z-index:120;display:grid;place-items:center;padding:20px;
  background:rgba(4,8,16,.72);backdrop-filter:blur(6px);opacity:0;transition:opacity .24s}
.quotemodal.show{opacity:1}
.quotemodal.closing{opacity:0}
.quotecard{position:relative;max-width:440px;width:100%;background:linear-gradient(165deg,#0c1728,#0a1220);
  border:1px solid var(--cyan-d);border-radius:20px;padding:30px 28px 26px;text-align:center;overflow:hidden;
  box-shadow:0 24px 70px rgba(0,0,0,.55);transform:translateY(12px) scale(.98);transition:transform .28s}
.quotemodal.show .quotecard{transform:none}
html.light .quotecard{background:linear-gradient(165deg,#ffffff,#eef3fc)}
.quoteglow{position:absolute;top:-40%;left:50%;width:340px;height:340px;transform:translateX(-50%);
  background:radial-gradient(circle,rgba(59,167,255,.22),transparent 62%);pointer-events:none}
.quotelogo{position:relative;width:66px;height:auto;margin:0 auto 14px;display:block;filter:drop-shadow(0 4px 16px rgba(59,167,255,.35))}
.quotegreet{position:relative;font-size:15px;color:var(--muted);margin-bottom:2px}
.quotelabel{position:relative;font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--cyan-d);font-weight:700;margin-bottom:14px}
.quotetext{position:relative;margin:0 0 22px;font-family:'Space Grotesk',sans-serif;font-size:19px;line-height:1.5;color:var(--ink);font-weight:600}
.quoteclose{position:relative;width:100%;padding:12px}

/* Meeting: Zuständigkeits-Badge + Alle zuweisen */
.mowner{display:inline-flex;align-items:center;gap:5px;font-size:11.5px;font-weight:700;color:#03212a;
  background:var(--pc,#3ba7ff);border-radius:20px;padding:3px 9px;flex:none;white-space:nowrap}
.mtgassignall{margin-top:12px}
.mtgassignall .btn{width:auto;padding:9px 16px}

/* Footer-Credit */
.footcredit{color:var(--muted2)}
@media(max-width:760px){.footcredit{display:none}}

/* ===== Dateien: Ordner-Matrix (Mitarbeiter × Kategorie) ===== */
.filematrix{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:14px;margin-bottom:14px}
.fmhead{display:flex;align-items:center;gap:10px;font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted2);font-weight:700;margin-bottom:10px}
.fmreset{margin-left:auto;font-size:11.5px;font-weight:600;color:var(--cyan-d);text-transform:none;letter-spacing:0}
.fmreset:hover{color:var(--ink)}
.fmscroll{overflow-x:auto}
.fmtable{border-collapse:collapse;width:100%;font-size:12.5px;min-width:520px}
.fmtable th,.fmtable td{border:1px solid var(--line);padding:7px 9px;text-align:center;color:var(--muted)}
.fmtable thead th{background:var(--space2);color:var(--muted2);font-size:11px;font-weight:700;white-space:nowrap}
.fmtable th.fmrow{text-align:left;white-space:nowrap;color:var(--ink);font-weight:600}
.fmtable td.has{color:var(--ink);font-weight:700;cursor:pointer;background:rgba(59,167,255,.06)}
.fmtable td.has:hover{background:rgba(59,167,255,.16)}
.fmtable td.on{background:linear-gradient(90deg,var(--cyan-d),var(--cyan));color:#03212a}
.fmsum{font-weight:700;color:var(--ink);background:var(--space2)}
.uavatar{display:inline-grid;place-items:center;width:22px;height:22px;border-radius:50%;font-size:11px;font-weight:800;color:#03212a;background:var(--pc,#3ba7ff);margin-right:7px;vertical-align:middle}
.fmactive{font-size:12.5px;color:var(--muted);margin-bottom:10px}
.fmclear,.fmclear:hover{color:var(--cyan-d);font-weight:700;margin-left:6px}
.filetags{display:flex;flex-wrap:wrap;gap:6px;margin:5px 0}
.fcat{font-size:10.5px;font-weight:700;color:#9cc4ff;background:rgba(59,167,255,.14);border-radius:6px;padding:2px 7px}
.fby{font-size:10.5px;font-weight:700;color:#03212a;background:var(--pc,#3ba7ff);border-radius:6px;padding:2px 7px}

/* ===== Topbar-Chip oben rechts: nie aus dem Display laufen ===== */
.topbar .userpill{flex:0 1 auto;min-width:0;max-width:46vw;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:inline-flex;align-items:center}
.upname{overflow:hidden;text-overflow:ellipsis}
.upmail{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.upinit{display:none;font-weight:700;letter-spacing:.02em}
/* Ab Tablet abwärts: nur Vorname im Chip (E-Mail weg → passt immer). */
@media(max-width:900px){ .upmail{display:none} .topbar .userpill{max-width:40vw} }
/* Handy: nur Initialen (z. B. „j.h.") — der volle Name würde über die
   Sprach-Flaggen hinausragen. */
@media(max-width:560px){ .upname{display:none} .upinit{display:inline} .topbar .userpill{max-width:none} }
/* Sehr schmale Handys: Flaggen BLEIBEN sichtbar (Sprach-Umschalter), Flaggen enger. */
@media(max-width:480px){ .flags{gap:3px} .flagwrap{width:20px;height:14px} .flagimg{width:20px;height:14px} }

/* ===== Freigaben — mehrstufige Workflows + Audit-Log ===== */
.flow{max-width:840px}
.flowtabs{display:flex;gap:8px;margin-bottom:14px;flex-wrap:wrap}
.flowtab{font-size:13px;font-weight:600;color:var(--muted);background:var(--space2);border:1px solid var(--line);border-radius:9px;padding:8px 13px}
.flowtab b{color:#03212a;background:linear-gradient(90deg,var(--cyan-d),var(--cyan));border-radius:10px;padding:0 6px;margin-left:4px;font-size:11px}
.flowtab.on{color:var(--ink);border-color:var(--cyan-d);background:linear-gradient(90deg,rgba(59,167,255,.16),rgba(59,167,255,.04))}
.flowlist{display:flex;flex-direction:column;gap:11px;margin-top:14px}
.flowcard{background:var(--panel);border:1px solid var(--line);border-radius:13px;padding:13px 15px}
.flowtop{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.fltype{font-size:10.5px;font-weight:800;text-transform:uppercase;letter-spacing:.04em;color:var(--muted2);background:rgba(255,255,255,.05);border:1px solid var(--line);border-radius:6px;padding:2px 7px}
.fltitle{flex:1;font-size:14.5px;font-weight:700;color:var(--ink);min-width:0;word-break:break-word}
.flbadge{font-size:11px;font-weight:800;padding:3px 9px;border-radius:7px}
.flbadge.ok{color:#8ffcd0;background:rgba(80,209,165,.16)}
.flbadge.no{color:#ff9a9a;background:rgba(255,90,90,.14)}
.flbadge.open{color:#9cc4ff;background:rgba(59,167,255,.14)}
.fldetail{font-size:13px;color:var(--muted);line-height:1.5;margin-top:6px}
.flchain{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin-top:11px}
.flstep{font-size:11.5px;font-weight:700;padding:4px 9px;border-radius:20px;border:1px solid var(--line);color:var(--muted)}
.flstep.ok{color:#03212a;background:linear-gradient(90deg,#4FD1A5,#8ffcd0);border-color:transparent}
.flstep.no{color:#fff;background:#c0453f;border-color:transparent}
.flstep.cur{color:#03212a;background:linear-gradient(90deg,var(--cyan-d),var(--cyan));border-color:transparent}
.flarrow{color:var(--muted2);font-size:12px}
.flacts{display:flex;gap:8px;margin-top:12px}
.flaudit-toggle{margin-top:10px;font-size:12px;font-weight:600;color:var(--cyan-d)}
.flaudit-toggle:hover{color:var(--ink)}
.flaudit{margin-top:8px;border-top:1px solid var(--line);padding-top:8px;display:flex;flex-direction:column;gap:5px}
.flaudit-row{font-size:12px;color:var(--muted)}
.flaudit-row span:first-child{color:var(--ink);font-weight:600}
.flaudit-t{color:var(--muted2);float:right}

/* ===== Fix: Mail-Bereich im Hell-Modus (schmale Spalte blieb dunkel) ===== */
html.light .mailcol{background:#f6f8fd}
html.light .mailtabs button.on,html.light .mailitem.on{background:#e7effb;color:var(--ink)}
html.light .mailitem:hover{background:#eef3fc}
html.light .mailtabs button{background:#eef3fc}
html.light .mailread .body,html.light .readermain{color:var(--ink)}

/* ===== Mikrofon: Hilfe-Brücke + Aufnahme-Status ===== */
.chaticon.rec{color:#fff;background:#e0483f;animation:micpulse 1.1s infinite}
/* Vollausbau-Schalter: geerdeter Entwurf + volle Ausarbeitung durch die stärkste KI. */
.chaticon.aifull.on{color:#03212a;background:linear-gradient(180deg,var(--cyan),var(--cyan-d));box-shadow:0 0 14px -2px color-mix(in srgb,var(--cyan) 60%,transparent)}
@keyframes micpulse{0%,100%{box-shadow:0 0 0 0 rgba(224,72,63,.5)}50%{box-shadow:0 0 0 7px rgba(224,72,63,0)}}
.quotecard.michelp{max-width:460px;text-align:left}
.michelp .quotelabel{text-align:left}
.michelp-t{font-size:14px;color:var(--ink);margin:4px 0 10px}
.michelp-s{font-size:13.5px;color:var(--muted);line-height:1.6;background:var(--space2);border:1px solid var(--line);border-radius:11px;padding:12px 14px}
.michelp-s b{color:var(--ink)}
.michelp-btns{display:flex;gap:10px;margin-top:16px}
.michelp-btns .btn{width:auto;flex:1;padding:11px}

/* ============================================================
   EXECUTIVE-FUTURISM DESIGN-PASS
   Konsistente, futuristische Typografie + Kachel-/Interaktions-Politur.
   ============================================================ */

/* --- Überschriften: durchgängig Space Grotesk, klare Hierarchie --- */
h1,h2,h3,h4,h5{font-family:'Space Grotesk',sans-serif;letter-spacing:-.015em;color:var(--ink);line-height:1.2}
h1{font-weight:700}
h2{font-weight:600}
h3{font-weight:600}
.section h3,.ccsetup h3{font-size:16px;letter-spacing:.01em;display:flex;align-items:center;flex-wrap:wrap;gap:6px 9px;min-width:0}
/* Titel + Status-Badge dürfen umbrechen, lange Tokens (z. B. E-Mail-Adressen)
   brechen — statt auf dem Handy aus der Karte zu laufen. */
.section h3>*,.ccsetup h3>*{min-width:0;overflow-wrap:anywhere}
/* Feiner Akzent-Tick vor Sektions-Überschriften */
.ccsetup>h3:first-child::before,.triagebox>h3:first-child::before{content:"";width:4px;height:16px;border-radius:3px;
  background:linear-gradient(180deg,var(--cyan),var(--cyan-d));flex:none;box-shadow:0 0 10px rgba(59,167,255,.4)}
.eyebrow,.gh-eyebrow{font-family:'JetBrains Mono',monospace;letter-spacing:.24em}

/* --- Fließtext: eine Spur luftiger für Premium-Anmutung --- */
body{letter-spacing:.005em}
p{line-height:1.6}

/* --- Interaktive Kacheln: Klick-Affordance + sanftes Anheben --- */
.tile,.filecard,.rowcard,.ccard,.flowcard,.gcardrow,.tiitem,.autorow,.kbitem,.wdcard,.mxpanel,.gcard,.aichat{
  transition:transform .14s ease,border-color .14s,box-shadow .14s,background .14s}
.tile,button.gcard{cursor:pointer}
.tile:hover,.filecard:hover,button.gcard:hover{transform:translateY(-2px);border-color:var(--cyan-d);
  box-shadow:0 12px 30px rgba(3,10,22,.35)}
.rowcard:hover,.flowcard:hover,.gcardrow:hover,.tiitem:hover,.wdcard:hover{border-color:var(--line2)}

/* --- Panels/Sektionen: etwas mehr Rundung & Tiefe --- */
.section{border-radius:16px}
.tile,.filecard,.flowcard,.gcardrow,.mxpanel,.mxcard,.wdcard,.kbitem,.tiitem,.autorow,.gcard,.ccard,.rowcard{border-radius:14px}

/* --- Formularfelder: als Karten, nicht stumpf --- */
.ccsetup input,.ccsetup select{background:var(--space2);border:1px solid var(--line);border-radius:11px;
  color:var(--ink);font:inherit;padding:11px 13px}
.ccsetup input:focus,.ccsetup select:focus{outline:none;border-color:var(--cyan-d);box-shadow:0 0 0 3px rgba(59,167,255,.15)}

/* --- Buttons: minimal futuristischer (weiche Tiefe) --- */
.btn{border-radius:12px;letter-spacing:.01em}
.btn:not(.subtle):not(.ghost):not(.danger){box-shadow:0 6px 18px rgba(59,167,255,.18)}

/* --- KPI-Chips & Pills: mono-Zahlen, klare Kontur --- */
.kpichip{border-radius:14px}

/* ============================================================
   HOLO-PLATTEN & SICHTBARES MESH — app-weites, zentriertes Raster
   Ein einheitliches Raster über alle Seiten (außer Start-Rondell):
   volle, zur Feldmitte zentrierte Breite, große Überschriften,
   halbtransparente „Holo"-Platten mit blauem Glow, durch die der
   animierte Mesh-Hintergrund durchscheint, plus blauer Hover-Glow.
   ============================================================ */
/* Mesh füllt den Inhaltsbereich und bleibt auf allen Seiten sichtbar. */
.contentmesh{opacity:.92}
/* Inhalt luftiger und mittig — nutzt die volle Breite statt nur der halben. */
.view{padding:26px clamp(16px,4vw,52px)}
/* Große, klare Sektions-Überschrift mit leuchtendem Akzent-Tick — überall. */
.section>h3:first-child{font-size:clamp(20px,2.4vw,26px);margin-bottom:15px;letter-spacing:-.01em}
.section>h3:first-child::before{content:"";width:5px;height:1.02em;border-radius:3px;flex:none;
  background:linear-gradient(180deg,var(--cyan),var(--cyan-d));box-shadow:0 0 12px rgba(59,167,255,.55)}
/* Große Holo-Platten: halbtransparent + Blur → das Mesh scheint hindurch. */
.section{
  background:linear-gradient(180deg,rgba(16,29,52,.72),rgba(9,18,32,.60));
  -webkit-backdrop-filter:blur(10px) saturate(1.15);backdrop-filter:blur(10px) saturate(1.15);
  border:1px solid rgba(59,167,255,.20);border-radius:18px;padding:20px 22px;
  box-shadow:0 20px 48px -24px rgba(0,0,0,.66),0 0 0 1px rgba(59,167,255,.10),0 0 34px -8px rgba(59,167,255,.15)}
html.light .section{
  background:linear-gradient(180deg,rgba(255,255,255,.82),rgba(236,243,253,.74));
  border-color:rgba(59,167,255,.28)}
/* Kleinere Karten: leicht transluzent (ohne teures Per-Karten-Blur → Android-schonend),
   damit das Mesh subtil durchschimmert, Text aber knackig bleibt. */
.tile,.rowcard,.ccard,.notecard,.flowcard,.wdcard,.mxpanel,.kbitem,.gcard,.filecard,.tiitem,.autorow{
  background:linear-gradient(180deg,rgba(18,32,56,.90),rgba(11,22,40,.86));
  border:1px solid rgba(59,167,255,.16)}
html.light .tile,html.light .rowcard,html.light .ccard,html.light .notecard,html.light .flowcard,
html.light .wdcard,html.light .mxpanel,html.light .kbitem,html.light .gcard,html.light .filecard,
html.light .tiitem,html.light .autorow{
  background:linear-gradient(180deg,rgba(255,255,255,.94),rgba(240,246,254,.90));border-color:rgba(59,167,255,.22)}
/* Blauer Hover-Glow beim Überstreichen jeder Platte. */
.tile:hover,.filecard:hover,.rowcard:hover,.ccard:hover,.flowcard:hover,.wdcard:hover,
.mxpanel:hover,.kbitem:hover,.gcard:hover,button.gcard:hover,.tiitem:hover,.autorow:hover{
  border-color:var(--cyan);transform:translateY(-2px);
  box-shadow:0 16px 40px -12px rgba(59,167,255,.42),0 0 0 1px rgba(59,167,255,.34),0 0 26px -6px rgba(59,167,255,.30)}
/* Wer weniger Bewegung will: Mesh ruhig lassen (JS stoppt Animation), Platten bleiben. */
@media(prefers-reduced-motion:reduce){.contentmesh{opacity:.6}}

/* Volle Breite ausnutzen statt nur zentrierte Halbspalte: Seiten mit MEHREREN
   Blöcken legen ihre Platten nebeneinander (2 Spalten ab Tablet, 3 ab groß).
   Voll­flächige Einzel-Views (Mail, Board, Chat, KI, Compose) haben nur EIN Kind
   und bleiben davon unberührt → weiterhin volle Breite. */
@media(min-width:1000px){
  .view:has(> .section + .section){display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
    gap:20px;align-items:start;max-width:1720px;margin:0 auto}
  .view:has(> .section + .section) > .section{max-width:none;margin:0}
  /* Nicht-Platten-Kinder (z. B. Board-Kopf, Kalender) überspannen die volle Breite. */
  .view:has(> .section + .section) > :not(.section){grid-column:1 / -1}
}
@media(min-width:1600px){
  .view:has(> .section + .section){grid-template-columns:repeat(3,minmax(0,1fr))}
}
/* Verfassen/Antworten nutzt die VOLLE Mailbreite — beim Schreiben werden die
   Listen-/Ordner-Spalten ausgeblendet, das Fenster spannt über alles. */
.mail.composing{grid-template-columns:1fr}
.mail.composing .mailcol{display:none}
.mail3.composing .mailnav,.mail3.composing .mailcol{display:none}

/* ===== Zeitstempel: Datum + „vor X" (Aufgaben, Entwürfe) ===== */
.whenline{font-family:'JetBrains Mono',monospace;font-size:10.5px;color:var(--muted2);white-space:nowrap}
.whenline.sm{margin-left:auto}
.ttime{font-size:10.5px;color:var(--muted2);margin:6px 0 2px;display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.tassigned{color:var(--cyan-d);font-family:'JetBrains Mono',monospace}
.cctop .whenline{font-size:10px}

/* ===== „Frag die Firma": Ball größer, zentriert, drückbar ===== */
.askrow{min-height:70px;padding:11px 13px;align-items:center;border-radius:18px}
.askorb{flex:none;width:54px;height:54px;padding:0;border-radius:50%;display:grid;place-items:center;
  background:radial-gradient(circle at 50% 40%,rgba(59,167,255,.20),transparent 70%);
  cursor:pointer;transition:transform .16s ease;-webkit-tap-highlight-color:transparent}
.askorb:hover{transform:scale(1.07)}
.askorb:active{transform:scale(.95)}
.askorb:focus-visible{outline:none;box-shadow:0 0 0 3px rgba(59,167,255,.35)}
.askorb-o{width:48px;height:48px}
.askorb-o .aiorb-core{filter:drop-shadow(0 0 12px rgba(59,167,255,.55))}
.askinput{font-size:15.5px;padding:8px 6px}
.askgo{width:46px;height:46px;border-radius:13px;font-size:20px}
@media(max-width:560px){.askorb{width:46px;height:46px}.askorb-o{width:40px;height:40px}.askrow{min-height:62px}}

/* ===================== Vorlagen-Studio + e-Signatur ===================== */
.vlstudio{display:block}
.vlhero{margin-bottom:6px}
.vltabs{margin-bottom:12px}
.btn.accent{background:linear-gradient(180deg,#3ba7ff,#2b8ff0);border-color:#2b8ff0;color:#06121f}
.vlcat{margin:10px 0 4px}
.vlcat-h{font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted2);font-weight:700;margin:12px 2px 8px}
.vlgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:10px}
.vlcard{display:flex;flex-direction:column;gap:6px;align-items:flex-start;text-align:left;background:var(--panel);border:1px solid var(--line);border-radius:13px;padding:14px 15px;cursor:pointer;transition:.15s;min-width:0}
.vlcard:hover{border-color:var(--cyan-d);transform:translateY(-1px)}
.vlcard-t{font-family:'Space Grotesk',sans-serif;font-weight:600;font-size:14.5px;color:var(--ink);line-height:1.25}
.vlcard-m{font-size:12px;color:var(--muted2)}
.vlcompose{display:block}
.vlcompose-head{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:12px}
.vlct{display:flex;align-items:center;gap:9px;min-width:0}
.vlct b{font-family:'Space Grotesk',sans-serif;font-size:16px;overflow:hidden;text-overflow:ellipsis}
.vlpill{flex:none;font-size:11px;font-weight:700;color:var(--cyan);background:rgba(59,167,255,.12);border:1px solid rgba(59,167,255,.3);border-radius:20px;padding:3px 10px}
.vlfield{display:block;margin:10px 0}
.vlfield>span{display:block;font-size:12.5px;color:var(--muted);margin-bottom:5px}
.vlfield input,.vlfield textarea{width:100%}
.vlfields-h,.vldoc-h{font-size:11px;letter-spacing:.05em;text-transform:uppercase;color:var(--muted2);font-weight:700;margin:16px 2px 8px}
.vlfields{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:10px}
.vlctx{min-height:62px;resize:vertical}
.vlactions{display:flex;gap:10px;flex-wrap:wrap;margin-top:16px}
.vlactions .btn{flex:1;min-width:150px}
.vldoc{width:100%;min-height:280px;resize:vertical;background:rgba(255,255,255,.03);border:1px solid var(--line);border-radius:12px;padding:14px 15px;color:var(--ink);font-family:'JetBrains Mono',ui-monospace,monospace;font-size:13px;line-height:1.6;white-space:pre-wrap}
.vldoc:focus{outline:none;border-color:var(--cyan-d);box-shadow:0 0 0 3px rgba(59,167,255,.15)}
html.light .vldoc{background:rgba(0,0,0,.03)}
.vlexport{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}
.vlexport .btn{flex:none}
.vlsignbox{margin-top:16px;border-top:1px solid var(--line);padding-top:6px}
.vlsignrow{display:flex;gap:9px;align-items:center;flex-wrap:wrap;margin-top:10px}
.vlsignrow input.kbtitle{flex:1;min-width:180px}
.vlsignrow .btn{flex:none}
.vlto{font-size:13px;color:var(--muted)}
.vllist{margin-top:12px;display:flex;flex-direction:column;gap:9px}
.vlrow{display:flex;align-items:center;gap:10px;background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:11px 13px}
.vlrow-b{flex:1;min-width:0}
.vlrow-t{font-weight:600;font-size:14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.vlrow-m{font-size:12px;color:var(--muted2)}
.vlrow .btn.sm{flex:none}
.vlsig{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:12px 14px}
.vlsig-top{display:flex;justify-content:space-between;gap:10px;align-items:baseline}
.vlsig-doc{font-weight:600;font-size:14px;min-width:0;overflow:hidden;text-overflow:ellipsis}
.vlsig-when{flex:none;font-size:11.5px;color:var(--muted2)}
.vlsig-by{font-size:13px;color:var(--ink);margin-top:3px}
.vlsig-hash{font-family:'JetBrains Mono',monospace;font-size:11.5px;color:var(--cyan);margin-top:4px;word-break:break-all}
.vlsig-prev{font-size:12px;color:var(--muted);margin-top:6px;max-height:38px;overflow:hidden;line-height:1.5}
@media(max-width:560px){.vlgrid,.vlfields{grid-template-columns:1fr}.vlactions .btn{min-width:0}}

/* ===================== Investoren-Datenraum ===================== */
.drhero{margin-bottom:14px}
.drrow{display:flex;align-items:center;gap:11px;background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:11px 13px}
.drrow.off{opacity:.55}
.drrow-b{flex:1;min-width:0}
.drrow-t{font-weight:600;font-size:14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.drrow-m{font-size:12px;color:var(--muted2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.drrow .drlink{color:var(--cyan);text-decoration:none;font-weight:700}
.drtoggle{position:relative;display:inline-block;width:40px;height:22px;flex:none}
.drtoggle input{opacity:0;width:0;height:0;position:absolute}
.drtoggle span{position:absolute;inset:0;border-radius:20px;background:var(--line2);transition:.2s;cursor:pointer}
.drtoggle span::before{content:"";position:absolute;width:16px;height:16px;left:3px;top:3px;border-radius:50%;background:#fff;transition:.2s}
.drtoggle input:checked+span{background:linear-gradient(90deg,var(--cyan-d),var(--cyan))}
.drtoggle input:checked+span::before{transform:translateX(18px)}
.dataroom .cockrow2{align-items:center}
.dataroom .ipcritlbl{white-space:nowrap}

/* ===== Mail: Aktionen (Löschen / Verschieben / Ungelesen) ===== */
.mailactions{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-top:14px;padding-top:14px;border-top:1px solid var(--line)}
.mailact{display:inline-flex;align-items:center;gap:6px;background:var(--space2);border:1px solid var(--line2);border-radius:10px;
  padding:9px 13px;font-size:13px;font-weight:600;color:var(--ink);cursor:pointer;transition:.15s;white-space:nowrap}
.mailact:hover{background:#13233d;transform:translateY(-1px)}
html.light .mailact:hover{background:#dbe5f6}
.mailact.danger{color:#ff9a9a;border-color:rgba(255,90,90,.4)}
.mailact.danger:hover{background:rgba(255,90,90,.12)}
.movewrap{flex:1;min-width:170px}
.mailmove{width:100%;background:var(--space2);border:1px solid var(--line2);border-radius:10px;padding:9px 11px;color:var(--ink);font-size:13px;cursor:pointer}
.mailmove:focus{outline:none;border-color:var(--cyan-d);box-shadow:0 0 0 3px rgba(59,167,255,.15)}
/* Schnell-Löschen direkt in der Liste (erscheint beim Hover/Fokus) */
.mailitem{position:relative;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
/* Kontextmenü (Rechtsklick am Desktop, Long-Press auf Android) für Mail-Listen */
.ctxmenu{position:fixed;z-index:120;min-width:220px;max-width:min(320px,92vw);max-height:70vh;overflow:auto;
  background:var(--panel);border:1px solid var(--line2);border-radius:12px;padding:6px;
  box-shadow:0 18px 44px -14px rgba(0,0,0,.6),0 0 0 1px rgba(59,167,255,.06)}
.ctxitem{display:flex;align-items:center;gap:10px;width:100%;text-align:left;background:none;border:none;
  color:var(--ink);font-size:13.5px;padding:9px 11px;border-radius:8px;cursor:pointer}
.ctxitem:hover{background:rgba(59,167,255,.12)}
.ctxitem.danger{color:#ff9a9a}
.ctxitem.danger:hover{background:rgba(255,90,90,.14)}
.ctxitem:disabled{opacity:.55;cursor:wait}
.ctxico{flex:none;width:20px;text-align:center}
.ctxlbl{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ctxarrow{flex:none;color:var(--muted2);font-size:15px}
.ctxsep{height:1px;background:var(--line);margin:5px 8px}
html.light .ctxmenu{background:#fff;box-shadow:0 18px 44px -18px rgba(15,28,49,.35)}
html.light .ctxitem.danger{color:#c2413f}
.mailitem .itemdel{position:absolute;right:8px;bottom:8px;width:30px;height:30px;border-radius:8px;border:1px solid var(--line2);
  background:var(--space2);color:#ff9a9a;font-size:14px;cursor:pointer;opacity:0;transition:opacity .12s,background .12s;display:flex;align-items:center;justify-content:center}
.mailitem:hover .itemdel,.mailitem .itemdel:focus{opacity:1}
.mailitem .itemdel:hover{background:rgba(255,90,90,.15)}
@media(hover:none){.mailitem .itemdel{opacity:.7}}

/* ===== Benachrichtigungen: Ton- & Vibrations-Einstellungen ===== */
.notifprefs{margin-top:14px;padding-top:14px;border-top:1px solid var(--line);display:flex;flex-direction:column;gap:10px}
.notifrow{display:flex;align-items:center;gap:9px;flex-wrap:wrap}
.notifrow .notiflbl{font-size:13px;color:var(--muted);min-width:34px}
.notifrow .kblevel{max-width:150px}
.notifprefs .btn.sm{width:auto;flex:none}

/* ===== Rechtsklick-Kontextmenü (futuristisch) ===== */
.sxctx{position:fixed;z-index:9999;min-width:190px;max-width:82vw;background:linear-gradient(180deg,#0e1c34,#0b1526);
  border:1px solid var(--line2);border-radius:12px;padding:6px;
  box-shadow:0 18px 50px -18px rgba(0,0,0,.75),0 0 0 1px rgba(59,167,255,.10),inset 0 1px 0 rgba(255,255,255,.05);
  animation:sxctxin .12s ease}
@keyframes sxctxin{from{opacity:0;transform:translateY(-4px) scale(.98)}to{opacity:1;transform:none}}
.sxctx-item{display:flex;align-items:center;gap:10px;width:100%;text-align:left;background:transparent;border:0;border-radius:8px;
  padding:9px 11px;color:var(--ink);font-size:13.5px;font-family:inherit;cursor:pointer;white-space:nowrap}
.sxctx-item:hover{background:rgba(59,167,255,.14)}
.sxctx-ic{width:18px;flex:none;text-align:center;opacity:.9;font-size:13px}
.sxctx-sep{height:1px;background:var(--line);margin:5px 4px}
html.light .sxctx{background:#fff;border-color:#cfdcf2;box-shadow:0 18px 44px -18px rgba(20,40,80,.35)}
html.light .sxctx-item{color:#0e1c31}
html.light .sxctx-item:hover{background:#e7effb}

/* ===== MagnaX Autopilot (Kontrollcenter/Leitung) ===== */
.apcard .apswitch{margin:10px 0 4px}
.apstatus{margin-top:10px;color:var(--muted)}
.apfeed-h{font-size:11px;letter-spacing:.05em;text-transform:uppercase;color:var(--muted2);font-weight:700;margin:16px 2px 8px}
.apfeed{display:flex;flex-direction:column;gap:9px}
.aprun{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:11px 13px}
.aprun-h{display:flex;align-items:center;gap:9px;flex-wrap:wrap;font-size:12.5px}
.apsrc{font-weight:700;border-radius:20px;padding:2px 9px;font-size:11.5px}
.apsrc.auto{color:#06121f;background:linear-gradient(180deg,var(--cyan),var(--cyan-d))}
.apsrc.man{color:var(--muted);border:1px solid var(--line2)}
.apwhen{color:var(--muted2)}
.apcnt{margin-left:auto;color:var(--muted2)}
.apitems{margin:8px 0 0;padding-left:18px;display:flex;flex-direction:column;gap:4px}
.apitems li{font-size:13px;color:var(--ink);line-height:1.4}
.apprio{font-size:10.5px;font-weight:700;border-radius:20px;padding:1px 7px;margin-left:4px}
.apprio.p-hoch{color:#ff9a9a;background:rgba(255,90,90,.14)}
.apprio.p-mittel{color:var(--cyan);background:rgba(59,167,255,.14)}
.apprio.p-niedrig{color:var(--muted);background:rgba(255,255,255,.06)}
html.light .apprio.p-niedrig{background:rgba(0,0,0,.05)}

/* ===== Login: Sicherheitscheck (Captcha bei Erstanmeldung) ===== */
.caprow .caphint{color:var(--muted2);font-weight:400;font-size:12px}
.capbox{display:flex;align-items:center;gap:9px}
.capq{font-family:'JetBrains Mono','Space Grotesk',monospace;font-size:17px;font-weight:700;color:var(--ink);
  background:rgba(59,167,255,.10);border:1px solid var(--line2);border-radius:9px;padding:9px 13px;letter-spacing:.06em;white-space:nowrap;user-select:none}
.capbox #capInput{flex:1;min-width:0;text-align:center;font-size:16px;font-weight:700;letter-spacing:.1em}
.capnew{flex:none;width:42px;height:42px;border-radius:10px;border:1px solid var(--line2);background:var(--space2);
  color:var(--muted);font-size:17px;cursor:pointer;transition:.15s}
.capnew:hover{color:var(--ink);border-color:var(--cyan-d);background:#13233d}
html.light .capnew:hover{background:#dbe5f6}

/* ===== Info-Leuchtzeichen + holografisches Erklärfenster ===== */
/* Info-Punkt: der Glow ist STATISCH, animiert wird nur die Deckkraft (opacity)
   — GPU-kompositiert, kein per-Frame-Neuzeichnen von box-shadow/filter. Das
   verhindert das Zittern/Flimmern auf großen TVs/externen Bildschirmen. */
.infodot{position:absolute;top:6px;right:6px;width:9px;height:9px;border-radius:50%;
  background:radial-gradient(circle at 40% 35%,color-mix(in srgb,var(--cyan) 55%,#fff),var(--cyan) 60%,color-mix(in srgb,var(--cyan) 55%,#000));
  box-shadow:0 0 6px 1px color-mix(in srgb,var(--cyan) 75%,transparent),0 0 12px 3px color-mix(in srgb,var(--cyan) 32%,transparent);
  cursor:help;z-index:3;opacity:.6;will-change:opacity;transform:translateZ(0);backface-visibility:hidden;
  animation:infoglow 2.6s ease-in-out infinite;-webkit-tap-highlight-color:transparent}
.infodot:hover,.infodot:focus{outline:none;opacity:1;transform:scale(1.25) translateZ(0)}
@keyframes infoglow{0%,100%{opacity:.5}50%{opacity:1}}
/* Rondell-/Kachel-Module: Punkt etwas einrücken */
.module-card .infodot{top:12px;right:12px}
/* Rail: die Punkte bilden eine LINKE Spalte (vor der Beschriftung) und pulsen
   als langsame Welle von unten nach oben (Wachstum/Aufstieg). Richtung umdrehen:
   Vorzeichen des animation-delay tauschen. */
.rail [data-nav] .infodot{top:50%;left:5px;right:auto;width:7px;height:7px;
  transform:translateY(-50%) translateZ(0);
  animation-delay:calc(var(--wi,0) * -0.24s)}
.rail [data-nav] .infodot:hover,.rail [data-nav] .infodot:focus{transform:translateY(-50%) scale(1.3) translateZ(0)}
/* feine „Vernetzungs"-Linie hinter der Punkte-Spalte */
.rail::before{content:"";position:absolute;left:18px;top:74px;bottom:18px;width:1px;z-index:0;pointer-events:none;
  background:linear-gradient(180deg,transparent,color-mix(in srgb,var(--cyan) 16%,transparent) 10%,color-mix(in srgb,var(--cyan) 16%,transparent) 90%,transparent)}
@media(prefers-reduced-motion:reduce){.infodot{animation:none;opacity:.85}}
.infopop{position:fixed;z-index:10000;max-width:300px;min-width:200px;pointer-events:none;
  background:linear-gradient(180deg,rgba(14,28,52,.92),rgba(11,21,38,.92));
  border:1px solid rgba(59,167,255,.55);border-radius:13px;padding:13px 15px;
  box-shadow:0 20px 60px -18px rgba(0,0,0,.8),0 0 0 1px rgba(59,167,255,.15),0 0 34px -6px rgba(59,167,255,.5) inset;
  backdrop-filter:blur(9px) saturate(1.2);color:var(--ink);opacity:0;transform:translateY(6px) scale(.97);
  transition:opacity .16s ease,transform .16s ease;overflow:hidden}
.infopop.show{opacity:1;transform:none}
.infopop-scan{position:absolute;inset:0;pointer-events:none;opacity:.5;
  background:repeating-linear-gradient(0deg,rgba(59,167,255,.06) 0,rgba(59,167,255,.06) 1px,transparent 1px,transparent 4px)}
.infopop-h{position:relative;display:flex;align-items:center;gap:8px;font-family:'Space Grotesk',sans-serif;font-weight:600;font-size:14.5px;color:#bfe0ff;letter-spacing:.02em;margin-bottom:6px}
.infopop-orb{width:9px;height:9px;border-radius:50%;flex:none;background:radial-gradient(circle at 40% 35%,#8fd0ff,#2b8ff0 60%,#1667c8);box-shadow:0 0 8px 2px rgba(59,167,255,.8)}
.infopop-b{position:relative;font-size:12.8px;line-height:1.55;color:var(--muted)}
html.light .infopop{background:linear-gradient(180deg,rgba(255,255,255,.96),rgba(240,246,255,.96));border-color:rgba(43,143,240,.4);color:#0e1c31}
html.light .infopop-h{color:#1667c8}
html.light .infopop-b{color:#3a4a66}

/* ===== Autopilot-Lampe (Topbar-Schalter, metallisch, leuchtend) ===== */
.aplamp{display:inline-flex;align-items:center;gap:9px;flex:none;margin-right:8px;
  padding:7px 14px 7px 11px;border-radius:22px;cursor:pointer;
  font-family:'Space Grotesk',sans-serif;font-weight:600;font-size:12.5px;letter-spacing:.03em;color:#c3d2e8;
  background:linear-gradient(180deg,#2c3548 0%,#1b2333 55%,#141b28 100%);
  border:1px solid #3b475f;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.14),inset 0 -2px 6px rgba(0,0,0,.5),0 2px 7px rgba(0,0,0,.4);
  transition:box-shadow .25s,border-color .25s,color .25s,filter .15s;-webkit-tap-highlight-color:transparent}
.aplamp:hover{filter:brightness(1.09)}
.aplamp:active{filter:brightness(.96)}
.aplamp:focus-visible{outline:none;box-shadow:0 0 0 3px rgba(59,167,255,.35)}
.aplamp-orb{width:15px;height:15px;border-radius:50%;flex:none;
  background:radial-gradient(circle at 38% 32%,#7d8aa3,#3c465c 60%,#252d3d);
  box-shadow:inset 0 0 3px rgba(0,0,0,.65),inset 0 1px 1px rgba(255,255,255,.25);transition:.28s}
.aplamp-state{font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.09em;color:#7f8ba3}
/* AN — leuchtet wie eine Lampe (Smaragd) */
.aplamp.on{color:#eafff8;border-color:rgba(79,209,165,.65);
  background:linear-gradient(180deg,#22323a 0%,#172a29 60%,#11201c 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.18),0 0 20px -3px rgba(79,209,165,.7),0 2px 9px rgba(0,0,0,.42)}
.aplamp.on .aplamp-orb{background:radial-gradient(circle at 38% 32%,#e7fff7,#4FD1A5 52%,#1c9e7a);
  box-shadow:0 0 9px 2px rgba(79,209,165,.95),0 0 18px 6px rgba(79,209,165,.45);animation:aplamppulse 1.8s ease-in-out infinite}
.aplamp.on .aplamp-state{color:#4FD1A5}
@keyframes aplamppulse{0%,100%{box-shadow:0 0 6px 2px rgba(79,209,165,.75),0 0 13px 4px rgba(79,209,165,.35)}50%{box-shadow:0 0 11px 3px rgba(79,209,165,1),0 0 24px 8px rgba(79,209,165,.5)}}
html.light .aplamp{color:#33415c;background:linear-gradient(180deg,#f2f6fd,#dde6f4);border-color:#c2cfe4;box-shadow:inset 0 1px 0 rgba(255,255,255,.8),0 2px 6px rgba(30,50,90,.12)}
html.light .aplamp.on{color:#0d5c45;border-color:rgba(28,158,122,.5);background:linear-gradient(180deg,#e9fbf4,#cdefe2)}
/* Handy: kompakt — Wort „Autopilot" ausblenden, Punkt + An/Aus bleiben */
@media(max-width:640px){ .aplamp-txt{display:none} .aplamp{margin-right:5px;padding:7px 11px 7px 9px} }

/* ===== Mail-Editor: vollständige, immer sichtbare Werkzeugleiste ===== */
/* Trix' eigene Standard-Leiste ausblenden — wir liefern eine komplette eigene. */
trix-toolbar{display:none!important}
.sxfmt{display:inline-flex;align-items:center;gap:3px;flex-wrap:wrap}
.sxfb{min-width:30px;height:30px;padding:0 8px;display:inline-flex;align-items:center;justify-content:center;
  background:var(--space2);border:1px solid var(--line2);border-radius:8px;color:var(--ink);font-size:13.5px;font-family:inherit;cursor:pointer;transition:.12s;line-height:1}
.sxfb:hover{background:#13233d;border-color:var(--cyan-d)}
html.light .sxfb:hover{background:#dbe5f6}
.sxfb.on{background:linear-gradient(180deg,var(--cyan),var(--cyan-d));border-color:var(--cyan-d);color:#06121f}
.sxfb b,.sxfb i,.sxfb u,.sxfb s{font-size:14px}
.sxfsep{width:1px;height:22px;background:var(--line2);margin:0 4px;flex:none}
.sxsigsel{display:inline-flex;align-items:center;gap:6px;background:var(--space2);border:1px solid var(--line2);border-radius:9px;padding:3px 8px 3px 10px;font-size:12px;color:var(--muted)}
.sxsigsel select{background:transparent;border:0;color:var(--ink);font-size:12.5px;font-family:inherit;cursor:pointer;outline:none}
.sxaibtn{display:inline-flex;align-items:center;gap:5px;background:linear-gradient(180deg,#3ba7ff,#2b8ff0);border:1px solid var(--cyan-d);
  border-radius:9px;padding:7px 12px;color:#06121f;font-size:12.5px;font-weight:700;font-family:inherit;cursor:pointer;transition:.15s;white-space:nowrap}
.sxaibtn:hover{filter:brightness(1.06);transform:translateY(-1px)}
.sxaibtn:disabled{opacity:.6;cursor:not-allowed;transform:none}
.sxaisel{min-width:120px!important;max-width:140px!important}
@media(max-width:560px){ .sxaibtn{padding:7px 10px} .sxaisel{min-width:104px!important} }

/* ===== Dreispaltige, ziehbar-schiebbare Mail-Ansicht + vertikale Konten-Tabs ===== */
.mail3{display:flex}
.mailnav{background:#0b1626;border-right:1px solid var(--line);display:flex;flex-direction:column;min-width:150px;overflow:auto;min-height:0}
html.light .mailnav{background:#f6f8fd}
.mnav-h{font-size:10px;letter-spacing:.07em;text-transform:uppercase;color:var(--muted2);font-weight:700;padding:12px 12px 6px}
.mtabs.vert{display:flex;flex-direction:column;gap:6px;padding:2px 10px 6px;border-bottom:none}
.mtabs.vert .mtab{width:100%;justify-content:flex-start;border-width:1px;border-radius:9px;padding:9px 12px}
.mfolder{margin:2px 10px 12px;background:var(--space2);border:1px solid var(--line2);border-radius:9px;padding:8px 10px;color:var(--ink);font-size:12.5px;cursor:pointer}
.mail3 .mailcol{border-right:1px solid var(--line)}
.msplit{flex:0 0 7px;align-self:stretch;cursor:col-resize;position:relative;background:transparent;touch-action:none;flex-shrink:0}
.msplit::before{content:"";position:absolute;left:3px;top:0;bottom:0;width:1px;background:var(--line);transition:background .15s,box-shadow .15s,width .15s}
.msplit:hover::before{background:var(--cyan-d);width:2px;left:2px;box-shadow:0 0 8px rgba(59,167,255,.55)}
body.mailresizing{cursor:col-resize;user-select:none}
.mail3 .mailpane{flex:1;min-width:0}
@media(max-width:900px){
  .mail3{flex-direction:column;height:100%}
  .mail3 .msplit{display:none}
  .mail3 .mailnav{flex:none!important;width:auto!important;border-right:none;border-bottom:1px solid var(--line)}
  .mail3 .mtabs.vert{flex-direction:row;flex-wrap:wrap}
  .mail3 .mtabs.vert .mtab{width:auto}
  .mail3 .mailcol{flex:1 1 auto!important;width:auto!important;border-right:none}
  .mail3.reading .mailnav,.mail3.reading .mailcol{display:none}
  .mail3:not(.reading) .mailpane{display:none}
}

/* ===== Funding: SumUp-Holo-Button + Hinweisleiste (Dashboard & Login) ===== */
/* Freiwillige Mikro-Unterstützung. Kein Investment, keine Anteile, keine Pflicht. */
.holoseal{position:relative;display:inline-flex;align-items:center;gap:10px;padding:10px 16px 10px 12px;
  border-radius:999px;border:1px solid rgba(59,167,255,.45);cursor:pointer;color:var(--ink);text-decoration:none;
  background:linear-gradient(135deg,rgba(59,167,255,.16),rgba(255,215,154,.12));
  box-shadow:0 6px 22px rgba(59,167,255,.22),inset 0 0 0 1px rgba(255,255,255,.04);
  font:600 .92rem/1.1 var(--font,inherit);overflow:hidden;transition:transform .18s ease,box-shadow .25s ease,border-color .25s ease;-webkit-tap-highlight-color:transparent}
.holoseal:hover,.holoseal:focus-visible{transform:translateY(-1px);border-color:rgba(59,167,255,.8);
  box-shadow:0 10px 30px rgba(59,167,255,.38),0 0 0 1px rgba(255,215,154,.25)}
.holoseal:focus-visible{outline:2px solid var(--cyan);outline-offset:2px}
.holoseal .hs-img{width:34px;height:34px;object-fit:contain;flex:0 0 auto;
  filter:drop-shadow(0 2px 6px rgba(59,167,255,.5));animation:hsfloat 4s ease-in-out infinite}
.holoseal .hs-tx{display:flex;flex-direction:column;min-width:0;text-align:left}
.holoseal .hs-tx b{font-size:.94rem;white-space:nowrap}
.holoseal .hs-tx span{font-size:.72rem;color:var(--muted);font-weight:500;white-space:nowrap}
/* Holo-Sweep über den Button. */
.holoseal::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:linear-gradient(115deg,transparent 30%,rgba(255,255,255,.28) 48%,transparent 66%);
  transform:translateX(-120%);transition:transform .7s ease}
.holoseal:hover::after,.holoseal:focus-visible::after{transform:translateX(120%)}
.holoseal.mini{padding:8px 14px 8px 10px}
.holoseal.mini .hs-img{width:26px;height:26px}
@keyframes hsfloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-2px)}}

.fundingbar{display:flex;align-items:center;gap:14px;margin:14px 0 2px;padding:12px 16px;
  border:1px solid rgba(59,167,255,.28);border-radius:16px;min-width:0;
  background:linear-gradient(120deg,rgba(14,26,46,.9),rgba(11,20,36,.75));
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.03),0 8px 26px rgba(4,8,19,.35)}
.fundingbar .fb-glyph{flex:0 0 auto;width:38px;height:38px;display:grid;place-items:center;border-radius:12px;
  background:radial-gradient(circle at 50% 35%,rgba(59,167,255,.35),rgba(59,167,255,.05));color:var(--cyan);font-size:1.15rem}
.fundingbar .fb-txt{flex:1 1 auto;min-width:0}
.fundingbar .fb-txt b{display:block;color:var(--ink);font-size:.95rem;margin-bottom:2px}
.fundingbar .fb-txt span{display:block;color:var(--muted);font-size:.82rem;line-height:1.35;
  overflow:hidden;text-overflow:ellipsis}
.fundingbar .fb-cta{flex:0 0 auto;display:flex;align-items:center;gap:10px;flex-wrap:wrap;justify-content:flex-end}
.fb-link{background:none;border:0;color:var(--cyan);font:600 .82rem/1 var(--font,inherit);cursor:pointer;
  padding:8px 6px;border-radius:8px;white-space:nowrap;transition:color .15s ease;text-decoration:none;display:inline-block}
.fb-link:hover{color:var(--light);text-decoration:underline}
.fb-link.subtle{color:var(--muted2)}
.fb-link.subtle:hover{color:var(--cyan)}
@media (max-width:720px){
  .fundingbar{flex-wrap:wrap;gap:10px}
  .fundingbar .fb-txt{flex:1 1 100%}
  .fundingbar .fb-cta{flex:1 1 100%;justify-content:flex-start}
}

/* Login: dezenter „Support the Build"-Hinweis (öffentlich, ohne Zahlen). */
.loginfund{margin-top:16px;padding:14px 16px;border:1px solid rgba(59,167,255,.25);border-radius:14px;
  background:linear-gradient(120deg,rgba(14,26,46,.6),rgba(11,20,36,.4));text-align:center}
.loginfund b{display:block;color:var(--ink);font-size:.9rem;margin-bottom:3px}
.loginfund p{margin:0 auto 10px;color:var(--muted);font-size:.8rem;line-height:1.4;max-width:52ch}
.loginfund .lf-row{display:flex;align-items:center;justify-content:center;gap:12px;flex-wrap:wrap}
@media (prefers-reduced-motion:reduce){
  .holoseal .hs-img{animation:none}
  .holoseal::after,.holoseal{transition:none}
}

/* ===== Fortschritts-Pop-up (sxProgress) — live Aktions-Anzeige ===== */
.pgm-card{max-width:520px}
.pgm-head{display:flex;gap:12px;align-items:flex-start;margin-bottom:14px}
.pgm-htx{min-width:0}
.pgm-htx h3{margin:0;font-family:'Space Grotesk',sans-serif;font-size:17px}
.pgm-sub{color:var(--muted);font-size:12px;margin-top:2px;overflow:hidden;text-overflow:ellipsis}
.pgm-spin{flex:0 0 auto;width:22px;height:22px;border-radius:50%;margin-top:2px;
  border:2.5px solid var(--line2);border-top-color:var(--cyan);animation:pgmspin .8s linear infinite}
.pgm-spin.ok{border:0;animation:none;background:var(--ok);position:relative}
.pgm-spin.ok::after{content:"✓";position:absolute;inset:0;display:grid;place-items:center;color:#06231a;font-weight:800;font-size:13px}
.pgm-spin.err{border:0;animation:none;background:var(--err);position:relative}
.pgm-spin.err::after{content:"✕";position:absolute;inset:0;display:grid;place-items:center;color:#2a0a10;font-weight:800;font-size:13px}
@keyframes pgmspin{to{transform:rotate(360deg)}}
.pgm-log{background:#0a1220;border:1px solid var(--line);border-radius:10px;padding:10px 12px;
  max-height:46vh;overflow:auto;font-family:'SFMono-Regular',ui-monospace,Menlo,Consolas,monospace;font-size:12px;line-height:1.5}
.pgm-line{display:flex;gap:8px;padding:3px 0;color:var(--muted);align-items:flex-start}
.pgm-line .pgm-ic{flex:0 0 auto;width:14px;text-align:center;margin-top:1px}
.pgm-line.run{color:var(--ink)}
.pgm-line.run .pgm-ic::before{content:"";display:inline-block;width:7px;height:7px;border-radius:50%;
  background:var(--cyan);animation:pgmpulse 1s ease-in-out infinite;vertical-align:middle}
.pgm-line.ok .pgm-ic::before{content:"✓";color:var(--ok);font-weight:700}
.pgm-line.bad .pgm-ic::before{content:"✕";color:var(--err);font-weight:700}
.pgm-line .pgm-tx{min-width:0;word-break:break-word}
@keyframes pgmpulse{0%,100%{opacity:.35;transform:scale(.85)}50%{opacity:1;transform:scale(1.15)}}
.pgm-banner{margin-top:12px;padding:10px 12px;border-radius:10px;font-size:13px;font-weight:600}
.pgm-banner.ok{background:rgba(79,209,165,.12);border:1px solid rgba(79,209,165,.4);color:var(--ok)}
.pgm-banner.err{background:rgba(242,112,138,.12);border:1px solid rgba(242,112,138,.4);color:var(--err)}
.pgm-btns{margin-top:16px}
@media (prefers-reduced-motion:reduce){.pgm-spin,.pgm-line.run .pgm-ic::before{animation:none}}

/* ===== Datei-Board: 4 Mitarbeiter-Spalten · Kategorie-Akkordeons · Suche ===== */
.filesearch{display:flex;align-items:center;gap:8px;margin:14px 0 12px;padding:8px 12px;
  border:1px solid var(--line);border-radius:12px;background:var(--panel)}
.filesearch .fsico{opacity:.7;flex:0 0 auto}
.filesearch input{flex:1 1 auto;min-width:0;background:none;border:0;color:var(--ink);font-size:14px;outline:none}
.filesearch .fsclear{flex:0 0 auto;background:none;border:0;color:var(--muted);cursor:pointer;font-size:15px;padding:2px 6px;border-radius:6px}
.filesearch .fsclear:hover{color:var(--ink)}
.fbsearchinfo{color:var(--muted);font-size:13px;margin:2px 0 12px}

.filesboard{display:flex;gap:14px;overflow-x:auto;padding-bottom:10px;align-items:flex-start}
.fbcol{flex:1 1 220px;min-width:200px;background:var(--panel);border:1px solid var(--line);
  border-radius:14px;overflow:hidden;display:flex;flex-direction:column}
.fbcol-head{display:flex;align-items:center;gap:8px;padding:11px 12px;border-bottom:1px solid var(--line);
  background:linear-gradient(180deg,rgba(59,167,255,.06),transparent);position:sticky;top:0}
.fbcol-head .uavatar{width:26px;height:26px;border-radius:8px;display:grid;place-items:center;
  font-size:12px;font-weight:700;color:#06121f;background:var(--pc,var(--cyan))}
.fbcol-n{font-weight:700;font-size:14px;flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fbcol-c{flex:0 0 auto;font-size:11px;color:var(--muted);background:var(--space2);border-radius:20px;padding:1px 8px}
.fbcol-body{padding:8px;display:flex;flex-direction:column;gap:8px;min-height:60px}

.fbcat{border:1px solid var(--line);border-radius:10px;overflow:hidden;background:var(--space2)}
.fbcat-h{width:100%;display:flex;align-items:center;gap:7px;padding:8px 10px;background:none;border:0;
  cursor:pointer;color:var(--ink);font-size:12.5px;font-weight:600;text-align:left}
.fbcat-h:hover{background:rgba(255,255,255,.03)}
.fbchev{flex:0 0 auto;transition:transform .18s ease;color:var(--muted);font-size:11px}
.fbcat:not(.collapsed) .fbchev{transform:rotate(90deg)}
.fbcat-n{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fbcat-c{flex:0 0 auto;font-size:10.5px;color:var(--muted);background:var(--space);border-radius:20px;padding:0 7px}
.fbcat-body{display:flex;flex-direction:column;gap:6px;padding:6px 8px 8px}
.fbcat.collapsed .fbcat-body{display:none}

.fbfile{display:flex;align-items:center;gap:8px;padding:6px;border-radius:8px;background:var(--panel);border:1px solid var(--line)}
.fbf-ic{flex:0 0 auto;width:32px;height:32px;border-radius:7px;display:grid;place-items:center;
  font-size:16px;text-decoration:none;background:var(--space2);background-size:cover;background-position:center;color:var(--ink)}
.fbf-ic.img{cursor:zoom-in}
.fbf-m{flex:1 1 auto;min-width:0}
.fbf-n{font-size:12.5px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fbf-s{font-size:10.5px;color:var(--muted);min-width:0}
.fbf-a{flex:0 0 auto;display:flex;align-items:center;gap:5px}
.fbf-a .pill{font-size:10.5px;padding:3px 8px}
.fbf-a .del{background:none;border:0;color:var(--muted2);cursor:pointer;font-size:16px;line-height:1;padding:0 3px}
.fbf-a .del:hover{color:var(--err)}

.fbph{display:flex;align-items:center;gap:10px;padding:12px;border:1px dashed var(--line2);border-radius:10px;
  text-decoration:none;color:var(--ink);background:repeating-linear-gradient(135deg,transparent,transparent 8px,rgba(255,255,255,.015) 8px,rgba(255,255,255,.015) 16px)}
.fbph:hover{border-color:var(--cyan)}
.fbph-ic{flex:0 0 auto;font-size:22px}
.fbph-tx{display:flex;flex-direction:column;min-width:0}
.fbph-tx b{font-size:12.5px}
.fbph-tx span{font-size:10.5px;color:var(--muted)}

/* ===== Gast-Zugang (nur Ansehen): Badge + Schreib-Bedienelemente ausblenden ===== */
.guestbadge{display:inline-flex;align-items:center;gap:6px;margin-left:10px;padding:3px 10px;border-radius:20px;
  font-size:11px;font-weight:700;white-space:nowrap;color:var(--cyan);
  background:rgba(59,167,255,.12);border:1px solid rgba(59,167,255,.4)}
/* Offensichtliche Schreib-Elemente in Gast-Sitzungen verbergen (die eigentliche
   Sperre erzwingt der Server + der api()-Guard; das hält die Oberfläche ehrlich). */
body.guest .dropzone,
body.guest [data-del-file],
body.guest .filecard .del,
body.guest .fbfile .del,
body.guest .del{display:none!important}
@media (max-width:520px){ .guestbadge{margin-left:6px;font-size:10px;padding:2px 8px} }

/* ===== Branchen-Themes (Demo „MagnaX Workplace") ===================
   Ein data-branch am <html> tauscht die komplette Palette + den Hintergrund.
   Weil die ganze App über CSS-Variablen läuft, kleidet sich damit alles neu
   ein. Selbst erzeugte, CSP-sichere Hintergründe (Verläufe/SVG) pro Branche. */

/* Autohaus — Mercedes-Benz Lübeck: Anthrazit/Silber, kühles Blau. */
:root[data-branch="autohaus"]{
  --space:#0c0e11; --space2:#14171c; --panel:#181c22; --panelb:#20252d;
  --line:#2b323b; --line2:#3a434e; --light:#d7dde5; --cyan:#5aa9dc; --cyan-d:#3f86bb;
  --ink:#eef1f5; --muted:#9aa6b4; --muted2:#6b7684;
}
:root[data-branch="autohaus"] body{
  background:linear-gradient(135deg,#0b0d10 0%,#171b21 45%,#0c0e11 100%),
    repeating-linear-gradient(115deg,rgba(255,255,255,.02) 0 2px,transparent 2px 7px);
}

/* Kanzlei „Schönes Leben" — warmes Burgunder/Creme, Gold-Akzent. */
:root[data-branch="kanzlei"]{
  --space:#150f10; --space2:#1e1614; --panel:#241a17; --panelb:#2d221c;
  --line:#3a2b25; --line2:#4c392f; --light:#e8c98a; --cyan:#c9a25a; --cyan-d:#a9863f;
  --ink:#f3ece2; --muted:#c1ad97; --muted2:#8f7a67;
}
:root[data-branch="kanzlei"] body{
  background:radial-gradient(120% 90% at 82% -10%,#3a1f22 0,transparent 55%),
    radial-gradient(120% 90% at 5% 110%,#241813 0,transparent 50%),
    linear-gradient(180deg,#150f10,#1b1412);
}

/* Reederei „Northeast" — tiefes Marine/Teal, See & Welle. */
:root[data-branch="reederei"]{
  --space:#06101a; --space2:#0a1a26; --panel:#0d2230; --panelb:#12303f;
  --line:#1b3a4c; --line2:#275160; --light:#7fd8e0; --cyan:#2fb8c6; --cyan-d:#1f95a2;
  --ink:#e7f2f5; --muted:#8fb1bd; --muted2:#5f8593;
}
:root[data-branch="reederei"] body{
  background:radial-gradient(130% 80% at 80% -10%,#0e3a4a 0,transparent 55%),
    radial-gradient(120% 90% at 0% 110%,#08222e 0,transparent 55%),
    linear-gradient(180deg,#06101a 0%,#0a2130 100%);
}
:root[data-branch="reederei"] body::after{
  content:"";position:fixed;left:0;right:0;bottom:0;height:38vh;pointer-events:none;z-index:0;opacity:.5;
  background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='1200' height='200' viewBox='0 0 1200 200'><path d='M0 120 C150 70 300 170 450 120 S750 70 900 120 1050 170 1200 120 V200 H0 Z' fill='%232fb8c6' opacity='0.10'/><path d='M0 150 C150 110 300 190 450 150 S750 110 900 150 1050 190 1200 150 V200 H0 Z' fill='%232fb8c6' opacity='0.08'/></svg>") repeat-x bottom/1200px 200px;
}

/* Branchen-Umschalter (nur Admin) — kleine Auswahl neben den Sprachflaggen. */
/* Design-Umschalter — futuristisches Ausklapp-Panel (ersetzt das alte Select). */
.skinfly{position:relative;margin-right:8px;flex:none}
.skinfly-btn{display:inline-flex;align-items:center;gap:7px;background:var(--space2);color:var(--ink);
  border:1px solid var(--line2);border-radius:11px;padding:6px 10px;font-size:12.5px;font-weight:600;
  cursor:pointer;transition:border-color .15s,box-shadow .15s}
.skinfly-btn:hover,.skinfly.open .skinfly-btn{border-color:var(--cyan);box-shadow:0 0 0 1px var(--cyan-d) inset,0 0 16px -5px var(--cyan)}
.skinfly-ic{width:16px;height:16px;color:var(--cyan);flex:none}
.skinfly-lbl{max-width:120px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.skinfly-chev{width:14px;height:14px;opacity:.7;transition:transform .2s;flex:none}
.skinfly.open .skinfly-chev{transform:rotate(180deg)}
.skinfly-panel{position:fixed;z-index:3000;width:min(320px,88vw);
  background:linear-gradient(180deg,var(--panelb),var(--panel));border:1px solid var(--line2);border-radius:16px;padding:13px;
  box-shadow:0 26px 64px -18px rgba(0,0,0,.72),0 0 0 1px rgba(59,167,255,.14),0 0 46px -14px color-mix(in srgb,var(--cyan) 60%,transparent);
  transform-origin:top right;animation:skinflyIn .18s ease}
@keyframes skinflyIn{from{opacity:0;transform:translateY(-8px) scale(.96)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){.skinfly-panel{animation:none}}
.skinfly-h{font-size:11px;text-transform:uppercase;letter-spacing:.08em;color:var(--cyan);font-weight:700;margin:0 0 11px}
.skinfly-h span{color:var(--muted2);font-weight:400;letter-spacing:0;text-transform:none}
.skinfly-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;max-height:52vh;overflow:auto}
.skinfly-grid .skinopt{padding:8px;border-radius:11px;gap:9px;min-width:0}
.skinfly-grid .skinswatch{width:26px;height:26px;border-radius:8px}
.skinfly-nm{font-size:12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
/* „Made in Germany" bleibt sichtbar. */
.madein{display:inline-flex;align-items:center;gap:5px;font-size:10.5px;color:var(--muted);white-space:nowrap;margin-right:6px}
.madein svg{width:16px;height:11px;border-radius:2px;flex:0 0 auto}
@media (max-width:520px){ .skinfly-lbl{display:none} .skinfly-grid{grid-template-columns:1fr} }
@media (max-width:720px){ .madein{display:none} }
/* Login-Marke pro Branche (Demo). */
.brandname{display:flex;flex-direction:column;align-items:center;gap:2px;text-align:center}
.brandname b{font-family:'Space Grotesk',sans-serif;font-size:22px;color:var(--ink);letter-spacing:.3px}
.brandname span{font-size:12px;color:var(--muted);letter-spacing:1.5px;text-transform:uppercase}

/* ===== Eigendynamik-Arbeitsraum ===== */
.eigen{display:flex;flex-direction:column;height:100%;min-height:0;padding:14px 16px;gap:12px}
.eig-head h3{font-family:'Space Grotesk',sans-serif;font-size:18px;margin:0}
.eig-sub{color:var(--muted);font-size:12.5px;margin-top:3px;max-width:70ch}
.eig-areas{display:flex;flex-wrap:wrap;gap:8px}
.eigchip{display:inline-flex;align-items:center;gap:6px;padding:5px 11px;border-radius:20px;font-size:12px;
  border:1px solid var(--line);background:var(--panel);color:var(--muted);cursor:pointer;user-select:none}
.eigchip.on{border-color:var(--cyan);color:var(--ink);background:rgba(59,167,255,.1)}
.eigchip input{accent-color:var(--cyan)}
.eig-ctrl{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.eig-ctrl .btn{width:auto;padding:9px 16px}
.eig-min{background:var(--panel);color:var(--ink);border:1px solid var(--line);border-radius:10px;padding:8px 10px;font-size:13px}
.eig-status{color:var(--muted);font-size:12.5px;font-family:'JetBrains Mono',ui-monospace,monospace}
.eig-log{flex:1 1 auto;min-height:120px;overflow:auto;border:1px solid var(--line);border-radius:14px;
  background:#0a1220;padding:12px;display:flex;flex-direction:column;gap:10px}
.eig-empty{color:var(--muted);font-size:13px;margin:auto;text-align:center;max-width:44ch}
.eig-round{display:flex;gap:10px;align-items:flex-start}
.eig-no{flex:0 0 auto;width:24px;height:24px;border-radius:50%;background:var(--space2);border:1px solid var(--line);
  display:grid;place-items:center;font-size:11px;color:var(--muted);margin-top:2px}
.eig-rc{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:6px}
.eig-a,.eig-b{display:flex;gap:8px;font-size:13px;line-height:1.5}
.eig-a span:last-child,.eig-b span:last-child{min-width:0}
.eig-b{color:var(--muted)}
.eig-tag{flex:0 0 auto;font-size:10px;font-weight:700;padding:1px 7px;border-radius:20px;height:fit-content;white-space:nowrap}
.eig-tag.a{background:rgba(59,167,255,.15);color:var(--cyan)}
.eig-tag.b{background:rgba(79,209,165,.15);color:var(--ok)}
/* Eigendynamik: Vorschlag → Freigabe-Zeile */
.eig-task{display:flex;align-items:center;gap:10px;margin-top:4px;padding:6px 8px;border-radius:8px;
  background:rgba(79,209,165,.08);border:1px solid rgba(79,209,165,.28);font-size:12.5px}
.eig-task span{flex:1 1 auto;min-width:0;color:var(--ok);font-weight:600}
.eig-task .pill{flex:0 0 auto}
.eig-task .pill.done{background:rgba(79,209,165,.2);color:var(--ok);opacity:.8}
/* Abschluss-Ergebnis einer Sitzung: deutlich hervorgehoben. */
.eig-round.final{background:linear-gradient(180deg,rgba(240,185,66,.09),rgba(240,185,66,.02));
  border:1px solid rgba(240,185,66,.35);border-radius:14px;padding:10px 12px}
.eig-final{font-size:11px;font-weight:700;letter-spacing:.02em;color:var(--gold,#f0b942);margin-bottom:2px}
.eig-task.final{background:rgba(240,185,66,.1);border-color:rgba(240,185,66,.4)}
.eig-task.final span{color:var(--gold,#f0b942)}

/* Tresor — Modell-Chip (neben den anderen KI-Modellen) + Code-Popup. */
.aimodel.vaultmodel{border-color:rgba(240,185,66,.45);color:var(--gold,#f0b942)}
.aimodel.vaultmodel.on{background:rgba(240,185,66,.16);border-color:rgba(240,185,66,.7)}
/* Schloss springt auf, wenn der Tresor (Control/Mythos) entsperrt wird */
.aimlock.spring{animation:lockspring .5s cubic-bezier(.34,1.56,.64,1)}
@keyframes lockspring{0%{transform:scale(.7) rotate(-12deg)}55%{transform:scale(1.28) rotate(9deg)}100%{transform:scale(1) rotate(0)}}
.aimlock{display:inline-block}
.aimlock.open{filter:drop-shadow(0 0 4px rgba(240,185,66,.6))}
/* „Tresor sperren"-Knopf im Chat-Kopf */
.airelock{flex:0 0 auto;border:1px solid rgba(240,185,66,.55);border-radius:999px;padding:5px 11px;
  font-size:12px;font-weight:600;color:var(--gold,#f0b942);background:rgba(240,185,66,.12);cursor:pointer;white-space:nowrap}
.airelock:hover{background:rgba(240,185,66,.2)}
.airelock.hidden,.hidden{display:none!important}
/* Popup-Overlay */
.vaultgate-ov{position:fixed;inset:0;z-index:1000;display:grid;place-items:center;padding:18px;
  background:rgba(4,10,20,.66);backdrop-filter:blur(3px)}
.vaultgate{position:relative;width:100%;max-width:400px;background:var(--space,#0a1220);border:1px solid rgba(240,185,66,.4);
  border-radius:18px;padding:26px 22px 22px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:9px;
  box-shadow:0 20px 60px rgba(0,0,0,.5)}
.vaultgate-x{position:absolute;top:10px;right:12px;background:none;border:none;color:var(--muted);font-size:18px;cursor:pointer}
.vaultgate h3{font-family:'Space Grotesk',sans-serif;margin:2px 0 0;color:var(--gold,#f0b942)}
.vaultgate p{color:var(--muted);font-size:12.5px;margin:0;max-width:40ch}
.vault-badge{width:58px;height:58px;border-radius:16px;display:grid;place-items:center;font-size:27px;
  background:rgba(240,185,66,.12);border:1px solid rgba(240,185,66,.4)}
.vault-entry{display:flex;gap:8px;width:100%;max-width:320px;margin-top:6px}
.vault-entry input{flex:1 1 auto;min-width:0;background:var(--panel);color:var(--ink);border:1px solid var(--line);
  border-radius:12px;padding:11px 13px;font-size:16px;letter-spacing:.22em;text-align:center}
.vault-entry .btn{width:auto;padding:11px 16px}
.vault-msg{min-height:16px;font-size:12.5px;color:var(--gold,#f0b942)}

/* Frei-Popup: freie KI-Wahl + Pay-per-use aus dem gemeinsamen Team-Guthaben. */
.freigate-ov{position:fixed;inset:0;z-index:1000;display:grid;place-items:center;padding:18px;
  background:rgba(4,10,20,.66);backdrop-filter:blur(3px);overflow-y:auto}
.freigate{position:relative;width:100%;max-width:440px;background:var(--space,#0a1220);border:1px solid rgba(240,185,66,.4);
  border-radius:18px;padding:24px 20px 20px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:10px;
  box-shadow:0 20px 60px rgba(0,0,0,.5);max-height:92vh;overflow-y:auto}
.freigate-x{position:absolute;top:10px;right:12px;background:none;border:none;color:var(--muted);font-size:18px;cursor:pointer}
.freigate h3{font-family:'Space Grotesk',sans-serif;margin:2px 0 0;color:var(--gold,#f0b942)}
.freigate p{color:var(--muted);font-size:12.5px;margin:0;max-width:42ch}
.frei-badge{width:54px;height:54px;border-radius:16px;display:grid;place-items:center;font-size:25px;
  background:rgba(240,185,66,.12);border:1px solid rgba(240,185,66,.4)}
.frei-bal{font-weight:700;font-size:14px;color:var(--ink);background:var(--space2);border:1px solid var(--line);
  border-radius:10px;padding:7px 14px}
.frei-bal.low{color:var(--gold,#f0b942);border-color:rgba(240,185,66,.5)}
.frei-provs{display:grid;grid-template-columns:1fr 1fr;gap:8px;width:100%}
.frei-prov{display:flex;flex-direction:column;align-items:flex-start;gap:2px;text-align:left;
  background:var(--space2);border:1px solid var(--line);border-radius:12px;padding:10px 12px;cursor:pointer;min-width:0}
.frei-prov b{font-size:13.5px;color:var(--ink)}
.frei-prov span{font-size:11px;color:var(--muted)}
.frei-prov .frei-est{font-size:11px;color:var(--gold,#f0b942);font-style:normal;margin-top:2px}
.frei-prov .frei-est.soon{color:var(--muted)}
.frei-prov.on{border-color:var(--gold,#f0b942);background:rgba(240,185,66,.1)}
.frei-prov.off{opacity:.5;cursor:not-allowed}
.frei-topup{width:100%;border-top:1px solid var(--line);padding-top:12px;display:flex;flex-direction:column;align-items:center;gap:9px}
.frei-tuh{font-weight:600;font-size:12.5px;color:var(--ink);align-self:flex-start}
.frei-amts{display:flex;flex-wrap:wrap;gap:6px;width:100%}
.frei-amt{flex:1 1 auto;background:var(--panel);color:var(--ink);border:1px solid var(--line);border-radius:10px;
  padding:9px 6px;font-size:13px;font-weight:600;cursor:pointer;white-space:nowrap}
.frei-amt:hover{border-color:rgba(240,185,66,.6)}
.frei-note{font-size:10.5px;color:var(--muted);line-height:1.35}
.frei-msg{min-height:16px;font-size:12px;color:var(--gold,#f0b942)}
.frei-actions{display:flex;gap:8px;width:100%;margin-top:2px}
.frei-actions .btn{flex:1 1 auto}
.frei-actions .btn.ghost{background:transparent;border:1px solid var(--line);color:var(--muted)}

/* Dashboard-Live-Cockpit: großes, eigenständiges Panel (nicht im 100%-Flex). */
.eigen-cockpit{height:auto;margin:16px 0 4px;border:1px solid var(--line);border-radius:18px;
  background:linear-gradient(180deg,rgba(59,167,255,.05),rgba(10,18,32,.2));
  box-shadow:0 8px 30px rgba(0,0,0,.18)}
.eigen-cockpit .eig-head h3{font-size:19px}
/* Kompakter Eigendynamik-Live-Streifen auf dem Start-Dashboard (führt in den
   Maschinenraum, wo gesteuert wird). */
.eigen-strip{display:flex;align-items:center;gap:12px;background:var(--panel);border:1px solid var(--line);
  border-radius:14px;padding:12px 14px;margin:16px 0 4px}
.eigen-strip .es-dot{flex:0 0 auto;width:10px;height:10px;border-radius:50%;background:var(--muted2);
  box-shadow:0 0 0 4px rgba(95,115,150,.12)}
.eigen-strip .es-dot.on{background:var(--ok);box-shadow:0 0 0 4px color-mix(in srgb,var(--ok) 22%,transparent);
  animation:esPulse 1.8s ease-in-out infinite}
.eigen-strip .es-txt{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:1px}
.eigen-strip .es-txt b{font-family:'Space Grotesk',sans-serif;font-size:14px}
.eigen-strip .es-state{color:var(--muted);font-size:12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.eigen-strip .btn.sm{flex:0 0 auto;width:auto;margin:0}
@keyframes esPulse{0%,100%{opacity:1}50%{opacity:.5}}
@media(prefers-reduced-motion:reduce){.eigen-strip .es-dot.on{animation:none}}
@media(max-width:560px){.eigen-strip{flex-wrap:wrap}.eigen-strip .btn.sm{width:100%}}
.eig-can{margin-top:7px;font-size:12.5px;color:var(--ink);line-height:1.6;
  background:rgba(59,167,255,.06);border:1px solid var(--line);border-radius:12px;padding:9px 12px;max-width:none}
.eig-can span{color:var(--muted)}
.eig-can b{font-weight:600}
/* Live-Fenster: feste, großzügige Höhe mit eigenem Scroll (mobil etwas kleiner). */
.eig-log-big{flex:0 0 auto;height:44vh;min-height:240px;max-height:520px}
@media (max-width:720px){.eig-log-big{height:52vh;min-height:220px}}

/* Analysebericht der Cockpit-Session (direkt unter dem Cockpit). */
.eigen-analysis{margin:6px 0 4px;border:1px solid var(--line);border-radius:18px;padding:14px 16px;
  background:linear-gradient(180deg,rgba(79,209,165,.05),rgba(10,18,32,.15))}
.ea-headrow{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.ea-headrow h3{margin:0;flex:1 1 auto;min-width:0}
.ea-acts{display:flex;gap:8px;flex-wrap:wrap}
.ea-acts .btn{width:auto;padding:7px 12px;font-size:12.5px}
.ea-head h3{font-family:'Space Grotesk',sans-serif;font-size:18px;margin:0}
.ea-sub{color:var(--muted);font-size:12.5px;margin-top:3px;max-width:70ch}
.ea-body{margin-top:10px;display:flex;flex-direction:column;gap:10px;min-width:0}
.ea-sum{font-size:12.5px;color:var(--muted);font-family:'JetBrains Mono',ui-monospace,monospace}
.ea-sum b{color:var(--ink)}
.ea-group{border:1px solid var(--line);border-radius:12px;padding:9px 11px;background:var(--panel);min-width:0}
.ea-group.final{border-color:rgba(240,185,66,.4);background:rgba(240,185,66,.06)}
.ea-gh{font-size:12px;font-weight:700;color:var(--ink);margin-bottom:6px;display:flex;align-items:center;gap:8px}
.ea-gh .cnt{background:var(--space2);border:1px solid var(--line);border-radius:20px;padding:0 8px;font-size:10px;color:var(--muted)}
.ea-fin{font-size:13px;line-height:1.55;color:var(--ink);margin-bottom:6px}
.ea-item{display:flex;align-items:center;gap:10px;padding:6px 8px;border-radius:8px;background:var(--space2);margin-top:5px}
.ea-item>span{flex:1 1 auto;min-width:0;font-size:12.5px;color:var(--ink);overflow-wrap:anywhere}
.ea-item .pill{flex:0 0 auto}
.ea-item.final{background:rgba(240,185,66,.1)}
.ea-item .pill.done{background:rgba(79,209,165,.2);color:var(--ok);opacity:.85}

/* Design-Vorlage-Auswahl (Einstellungen) */
.skinpick{display:flex;flex-direction:column;gap:10px}
.skinopt{display:flex;align-items:center;gap:12px;width:100%;text-align:left;padding:11px 13px;
  border:1px solid var(--line);border-radius:14px;background:var(--panel);color:var(--ink);transition:border-color .15s}
.skinopt:hover{border-color:var(--cyan)}
.skinopt.on{border-color:var(--cyan);box-shadow:inset 0 0 0 1px var(--cyan)}
.skinswatch{flex:0 0 auto;width:40px;height:40px;border-radius:10px;border:1px solid var(--line2)}
.skinopt.skin-std .skinswatch{background:radial-gradient(120% 90% at 20% 10%,#0d1a33,#070B16)}
.skinopt.skin-auroraglas .skinswatch{background:linear-gradient(135deg,#EAF9F6,#F1ECFC 50%,#FDF0F5);border-color:rgba(140,120,200,.4)}
.skinopt.skin-praxis .skinswatch{background:linear-gradient(135deg,#ffffff,#cfe6da 55%,#2e9c81);border-color:#c5d9cd}
.skinopt.skin-auto .skinswatch{background:radial-gradient(120% 90% at 20% 10%,#16b0b5,#0b0d10)}
.skinopt.skin-kanzlei .skinswatch{background:linear-gradient(135deg,#23262c,#b08d4a);border-color:#3f444b}
.skinopt.skin-reederei .skinswatch{background:linear-gradient(135deg,#0b2239,#ff8a3c)}
.skinopt.skin-arzt .skinswatch{background:linear-gradient(135deg,#ffffff,#dfe6ee);border-color:#cfd9e4}
.skinopt.skin-event .skinswatch{background:linear-gradient(135deg,#161a20,#c6ced7)}
.skintxt{display:flex;flex-direction:column;gap:2px;min-width:0}
.skintxt b{font-size:14px}
.skintxt span{font-size:11.5px;color:var(--muted2);overflow-wrap:anywhere}
.skincheck{margin-left:auto;color:var(--cyan);font-weight:800;flex:0 0 auto}

/* ============================================================================
   DESIGN-VORLAGEN (Skins) — austauschbare, rein visuelle Templates. Wählbar in
   den Einstellungen (data-skin am <html>, pro Gerät via sx_skin). Kein Inhalt,
   nur Optik. Standard = ohne data-skin. Übernommen aus dem Design-Audit.
   ============================================================================ */

/* --- Skin: Neo-Brutal --- */
/* „Salbei" (praxis) — ruhiges, klinisch-sanftes Pendant zur Arztpraxis
   („Reinweiß"): Salbeigrün auf Creme, hell, kein Glow, weiche Kanten. Ersetzt
   das ausgemusterte „neobrutal"-Skin. */
:root[data-skin="praxis"]{
  --space:#f1f6f3; --space2:#e6efe9; --panel:#ffffff; --panelb:#edf4ef;
  --line:#d7e5dd; --line2:#c5d9cd; --light:#8fc9b0; --cyan:#2e9c81; --cyan-d:#237f69;
  --ink:#17302a; --muted:#526b62; --muted2:#748a80;
}
:root[data-skin="praxis"] body{background:#f1f6f3}
:root[data-skin="praxis"] *{box-shadow:none !important;text-shadow:none !important}
:root[data-skin="praxis"] .rail{background:#ffffff;border-right-color:var(--line)}
:root[data-skin="praxis"] .tile,
:root[data-skin="praxis"] .module-card,
:root[data-skin="praxis"] .section{background:#ffffff}
:root[data-skin="praxis"] .btn{background:var(--cyan);color:#ffffff}
:root[data-skin="praxis"] .mailcol{background:var(--panel);border-right-color:var(--line)}

/* --- Skin: Aurora-Glas --- */
:root[data-skin="auroraglas"]{
  --space:#F4F1FB; --space2:#EFEAFB; --panel:rgba(255,255,255,.55); --panelb:rgba(255,255,255,.45);
  --line:rgba(140,120,200,.35); --line2:rgba(140,120,200,.5); --light:#8FE3D9;
  --cyan:#7C6FEF; --cyan-d:#5B4FD1; --ink:#241F3D; --muted:#5b5470; --muted2:#8983a0;
  --ok:#2FBF8F; --warn:#E8A23D; --err:#E85D75;
}
:root[data-skin="auroraglas"] body{
  background:
    radial-gradient(60% 50% at 15% 8%, rgba(150,230,220,.60), transparent 60%),
    radial-gradient(55% 55% at 88% 12%, rgba(200,180,250,.55), transparent 60%),
    radial-gradient(65% 60% at 50% 105%, rgba(250,200,220,.55), transparent 60%),
    linear-gradient(135deg,#EAF9F6 0%,#F1ECFC 50%,#FDF0F5 100%) !important;
}
:root[data-skin="auroraglas"] .topbar h2,
:root[data-skin="auroraglas"] .hello h1{ font-family:'Space Grotesk',sans-serif; font-weight:600; }

:root[data-skin="auroraglas"] .rail{background:linear-gradient(180deg,rgba(255,255,255,.65),rgba(255,255,255,.32)) !important;
  border-right:1px solid rgba(255,255,255,.6) !important; -webkit-backdrop-filter:blur(18px); backdrop-filter:blur(18px)}
:root[data-skin="auroraglas"] .rail .logo{background-color:rgba(124,111,239,.22) !important;border:1px solid rgba(255,255,255,.7);
  box-shadow:0 8px 20px -10px rgba(124,111,239,.5) !important;border-radius:16px}
:root[data-skin="auroraglas"] .rail .logo::after{background:linear-gradient(135deg,#8FE3D9,#7C6FEF);color:#20163f;box-shadow:0 0 0 2px #F4F1FB}
:root[data-skin="auroraglas"] .rail [data-nav]{color:#5b5470;border-radius:16px}
:root[data-skin="auroraglas"] .rail [data-nav]:hover{background:rgba(255,255,255,.55) !important;color:#241F3D;box-shadow:none !important;transform:none}
:root[data-skin="auroraglas"] .rail [data-nav].on{background:linear-gradient(135deg,rgba(124,111,239,.35),rgba(232,93,190,.28)) !important;
  color:#3d2f7a !important;box-shadow:inset 0 0 0 1px rgba(255,255,255,.7) !important}
:root[data-skin="auroraglas"] .rail [data-nav].on::before{background:linear-gradient(180deg,#8FE3D9,#7C6FEF);width:4px;border-radius:6px}
:root[data-skin="auroraglas"] .railbadge{background:linear-gradient(135deg,#7C6FEF,#E85D75) !important;box-shadow:0 0 0 2px #F4F1FB !important;border-radius:10px}

:root[data-skin="auroraglas"] .tile,
:root[data-skin="auroraglas"] .module-card,
:root[data-skin="auroraglas"] .section,
:root[data-skin="auroraglas"] .triagebox,
:root[data-skin="auroraglas"] .mailassist,
:root[data-skin="auroraglas"] .addrow{
  background:linear-gradient(160deg,rgba(255,255,255,.78),rgba(255,255,255,.42)) !important;
  border:1px solid rgba(255,255,255,.7) !important; border-radius:26px !important;
  box-shadow:0 18px 40px -18px rgba(120,100,180,.4), inset 0 1px 0 rgba(255,255,255,.7) !important;
  -webkit-backdrop-filter:blur(20px) saturate(1.4) !important; backdrop-filter:blur(20px) saturate(1.4) !important;
}
:root[data-skin="auroraglas"] .tile:hover,
:root[data-skin="auroraglas"] .rowcard:hover,
:root[data-skin="auroraglas"] .ccard:hover{
  border-color:rgba(255,255,255,.9) !important; transform:translateY(-3px);
  box-shadow:0 22px 50px -18px rgba(120,100,180,.5) !important;
}
:root[data-skin="auroraglas"] .askrow{background:linear-gradient(135deg,rgba(143,227,217,.28),rgba(124,111,239,.18)) !important;
  border-radius:24px !important;border:1px solid rgba(255,255,255,.7) !important; backdrop-filter:blur(12px)}

:root[data-skin="auroraglas"] .mailcol{background:linear-gradient(180deg,rgba(255,255,255,.55),rgba(255,255,255,.25)) !important;
  border-right:1px solid rgba(255,255,255,.6) !important; -webkit-backdrop-filter:blur(16px); backdrop-filter:blur(16px)}
:root[data-skin="auroraglas"] .mailitem{border-bottom:1px solid rgba(140,120,200,.2);border-radius:16px;margin:2px 6px}
:root[data-skin="auroraglas"] .mailitem:hover{background:rgba(255,255,255,.6)}
:root[data-skin="auroraglas"] .mailitem.on{background:rgba(124,111,239,.2)}
:root[data-skin="auroraglas"] .mailtabs button{border-radius:14px;border:1px solid rgba(140,120,200,.3);background:rgba(255,255,255,.4)}
:root[data-skin="auroraglas"] .mailtabs button.on{background:linear-gradient(135deg,#7C6FEF,#5B4FD1) !important;color:#fff !important;border-color:transparent}
:root[data-skin="auroraglas"] .mailtoolbar .refresh{border-radius:14px;border:1px solid rgba(140,120,200,.3);background:rgba(255,255,255,.4)}
:root[data-skin="auroraglas"] .mailstats span{border-radius:14px;border:1px solid rgba(140,120,200,.3);background:rgba(255,255,255,.5)}

:root[data-skin="auroraglas"] .col{background:linear-gradient(180deg,rgba(255,255,255,.55),rgba(255,255,255,.28)) !important;
  border:1px solid rgba(255,255,255,.65) !important; border-radius:22px !important; backdrop-filter:blur(14px)}
:root[data-skin="auroraglas"] .task{background:linear-gradient(160deg,rgba(255,255,255,.9),rgba(255,255,255,.58)) !important;
  border:1px solid rgba(255,255,255,.8) !important; border-radius:16px !important; box-shadow:0 10px 24px -14px rgba(120,100,180,.4) !important}
:root[data-skin="auroraglas"] .addtask input{background:rgba(255,255,255,.6);border:1px solid rgba(140,120,200,.35);border-radius:14px}
:root[data-skin="auroraglas"] .addtask button{background:linear-gradient(135deg,#7C6FEF,#E85D75);color:#fff;border-radius:12px}

:root[data-skin="auroraglas"] .btn:not(.ghost){background:linear-gradient(135deg,#8FE3D9,#7C6FEF) !important;color:#1c1533 !important;
  border-radius:16px !important;box-shadow:0 10px 24px -12px rgba(124,111,239,.55) !important;font-weight:700;border:none !important}
:root[data-skin="auroraglas"] .btn.ghost{background:rgba(255,255,255,.4) !important;border:1px solid rgba(140,120,200,.4) !important;color:#5B4FD1 !important;border-radius:16px !important}
:root[data-skin="auroraglas"] .pill{border-radius:16px !important;border:1px solid rgba(140,120,200,.3) !important;background:rgba(255,255,255,.5) !important}
:root[data-skin="auroraglas"] .apprline,
:root[data-skin="auroraglas"] .fundingbar{
  background:linear-gradient(160deg,rgba(255,255,255,.78),rgba(255,255,255,.42)) !important;
  border:1px solid rgba(255,255,255,.7) !important; border-radius:22px !important;
  box-shadow:0 18px 40px -18px rgba(120,100,180,.4) !important;
  -webkit-backdrop-filter:blur(18px) saturate(1.3) !important; backdrop-filter:blur(18px) saturate(1.3) !important;
}
:root[data-skin="auroraglas"] .fundingbar .fb-glyph{background:radial-gradient(circle at 50% 35%,rgba(124,111,239,.4),rgba(143,227,217,.2)) !important;color:#5B4FD1 !important}
:root[data-skin="auroraglas"] .holoseal{border-radius:18px !important;box-shadow:0 12px 26px -12px rgba(124,111,239,.5) !important;background:rgba(255,255,255,.55) !important;border:1px solid rgba(255,255,255,.7) !important}

/* --- Skin: Porsche — Schwarz/Rot/Glow, langsam waberndes Neonrot statt Mesh.
   Das Rondell (Markenzeichen) bleibt in Form/Anordnung; nur die Glut wird rot. --- */
:root[data-skin="porsche"]{
  --space:#080506; --space2:#120a0c; --panel:#160c0f; --panelb:#210f13;
  --line:#3a1620; --line2:#5a2230; --light:#ff9a9a;
  --cyan:#ff2b3d; --cyan-d:#d81a2c; --ink:#f4e9ec; --muted:#c99aa2; --muted2:#8a5a66;
  --j:#ff9a9a; --m:#ff2b3d; --s:#ff5c6e; --p:#ff8a5a;
  --ok:#4FD1A5; --warn:#F2C14E; --err:#ff415c;
}
:root[data-skin="porsche"] body{
  background:
    radial-gradient(120% 80% at 82% -10%, rgba(255,43,61,.14) 0, transparent 55%),
    radial-gradient(120% 90% at 5% 110%, rgba(255,43,61,.10) 0, transparent 52%),
    #080506 !important;
}
/* Kein Mesh im Porsche-Look — ersetzt durch eine langsam wabernde Neonrot-Glut. */
:root[data-skin="porsche"] .contentmesh{display:none !important}
:root[data-skin="porsche"] body::before{
  content:"";position:fixed;inset:-25%;z-index:0;pointer-events:none;
  background:
    radial-gradient(38% 30% at 28% 38%, rgba(255,43,61,.16), transparent 62%),
    radial-gradient(34% 26% at 72% 62%, rgba(255,60,80,.12), transparent 62%),
    radial-gradient(30% 24% at 55% 18%, rgba(216,26,44,.10), transparent 60%);
  filter:blur(34px);
  animation:porscheWabern 20s ease-in-out infinite alternate;
}
@keyframes porscheWabern{
  0%{transform:translate3d(-3%,-2%,0) scale(1)}
  50%{transform:translate3d(3%,2%,0) scale(1.09)}
  100%{transform:translate3d(-2%,3%,0) scale(1.04)}
}
@media(prefers-reduced-motion:reduce){:root[data-skin="porsche"] body::before{animation:none}}
/* Rondell-Glut auf Neonrot umfärben (Form bleibt) */
:root[data-skin="porsche"] .ai-core::before,
:root[data-skin="porsche"] .ai-core::after{border-color:rgba(255,43,61,.5) !important}
:root[data-skin="porsche"] .ai-core-logo{filter:drop-shadow(0 0 16px rgba(255,43,61,.85)) !important}
/* Dezenter roter Glow auf primären Flächen — „ein bisschen Glow", nicht grell */
:root[data-skin="porsche"] .btn:not(.subtle):not(.danger){box-shadow:0 0 20px -6px rgba(255,43,61,.55) !important}
:root[data-skin="porsche"] .tile:hover,
:root[data-skin="porsche"] [data-nav].on{box-shadow:0 0 22px -8px rgba(255,43,61,.5) !important}

/* === Branchen-Farbdesigns als Skins (aus der Shop-Demo übernommen) ========= */
/* Autohaus — Showroom, technisch-edel (Petrol/Silber) */
:root[data-skin="auto"]{
  --space:#0b0d10; --space2:#101317; --panel:#14171c; --panelb:#1b1f26;
  --line:#262b33; --line2:#343b45; --light:#c9ced6; --cyan:#16b0b5; --cyan-d:#0f8e93;
  --ink:#e8ecf1; --muted:#c9ced6; --muted2:#8d959f;
}
:root[data-skin="auto"] body{
  background:linear-gradient(135deg,#0b0d10 0%,#14181d 45%,#0b0d10 100%),
    repeating-linear-gradient(115deg,rgba(255,255,255,.02) 0 2px,transparent 2px 7px),#0b0d10;
}
/* Kanzlei — trocken, Grau + mattes Gold, kein Glow, Serifen */
:root[data-skin="kanzlei"]{
  --space:#14161a; --space2:#191c21; --panel:#1c1f24; --panelb:#23262c;
  --line:#33373d; --line2:#3f444b; --light:#8a93a3; --cyan:#b08d4a; --cyan-d:#96763c;
  --ink:#e8e6e1; --muted:#9aa0a8; --muted2:#767d86;
}
:root[data-skin="kanzlei"] body{background:#14161a}
:root[data-skin="kanzlei"] *{box-shadow:none !important;text-shadow:none !important}
:root[data-skin="kanzlei"] .main h1,
:root[data-skin="kanzlei"] .main h2,
:root[data-skin="kanzlei"] .main h3{font-family:Georgia,"Times New Roman",serif}
/* Reederei — nautisch (Marine + Signal-Orange) */
:root[data-skin="reederei"]{
  --space:#0b2239; --space2:#0e2941; --panel:#103049; --panelb:#153a56;
  --line:#1f4460; --line2:#2b5674; --light:#7fa8c9; --cyan:#ff8a3c; --cyan-d:#e0722c;
  --ink:#e6eef6; --muted:#9db8cd; --muted2:#6f8ba3;
}
:root[data-skin="reederei"] body{
  background:radial-gradient(130% 80% at 80% -10%,#123a5c 0,transparent 55%),
    radial-gradient(120% 90% at 0% 110%,#0d2c47 0,transparent 55%),
    linear-gradient(180deg,#0b2239 0%,#0e2c49 100%),#0b2239;
}
/* Arztpraxis — hell, klinisch ruhig (LICHT-Skin, kein Glow, keine Schatten) */
:root[data-skin="arzt"]{
  --space:#f7f9fb; --space2:#eef2f6; --panel:#ffffff; --panelb:#f2f6f9;
  --line:#dfe6ee; --line2:#cfd9e4; --light:#6da88a; --cyan:#2f6f92; --cyan-d:#265c7a;
  --ink:#1c2733; --muted:#5b6b7c; --muted2:#7c8a99;
}
:root[data-skin="arzt"] body{background:#f7f9fb}
:root[data-skin="arzt"] *{box-shadow:none !important;text-shadow:none !important}
:root[data-skin="arzt"] .rail{background:#ffffff;border-right-color:var(--line)}
:root[data-skin="arzt"] .tile,
:root[data-skin="arzt"] .module-card,
:root[data-skin="arzt"] .section{background:#ffffff}
:root[data-skin="arzt"] .btn{background:var(--cyan);color:#ffffff}
/* Veranstaltungstechnik — Bühne in Silber/Chrome/Metallic (kein Pink) */
:root[data-skin="event"]{
  --space:#0c0e12; --space2:#12151b; --panel:#161a20; --panelb:#1e232b;
  --line:#2a2f38; --line2:#39404a; --light:#aeb8c4; --cyan:#c6ced7; --cyan-d:#9aa5b1;
  --ink:#eef2f6; --muted:#aab4c0; --muted2:#7f8a97;
}
:root[data-skin="event"] body{
  background:radial-gradient(130% 80% at 80% -10%,#1b212a 0,transparent 55%),
    radial-gradient(120% 90% at 0% 110%,#161b22 0,transparent 55%),
    linear-gradient(180deg,#0c0e12,#161a20),#0c0e12;
}
:root[data-skin="event"] .module-card{box-shadow:0 0 26px -12px rgba(200,212,224,.4)}
:root[data-skin="event"] .tile{box-shadow:0 0 20px -12px rgba(174,184,196,.5)}
:root[data-skin="event"] .btn{color:#12151b}

/* KI-Kugeln folgen der Skin-Farbe (--cyan) statt Blau.
   Die Rail-LEDs (.infodot), die Verbindungslinie (.rail::before) und der
   aktive Reiter (.rail [data-nav].on) leiten ihre Farbe jetzt in den
   Basisregeln aus var(--cyan)/var(--panelb) ab — dadurch folgen sie
   AUTOMATISCH JEDEM Skin (auch Racing/Aurora-Glas/Neo-Brutal und künftige),
   ohne Whitelist, die veralten kann. */
:root[data-skin="auto"] .aiorb-core,:root[data-skin="kanzlei"] .aiorb-core,:root[data-skin="reederei"] .aiorb-core,:root[data-skin="arzt"] .aiorb-core,:root[data-skin="event"] .aiorb-core,:root[data-skin="porsche"] .aiorb-core,:root[data-skin="auroraglas"] .aiorb-core,:root[data-skin="praxis"] .aiorb-core{
  background:radial-gradient(circle at 35% 30%,#fff 0,color-mix(in srgb,var(--cyan) 60%,#fff) 30%,var(--cyan) 58%,color-mix(in srgb,var(--cyan) 48%,#000) 100%) !important}

/* ================= Abschluss (Faktura: Angebote + Rechnungen) ================= */
.ctval.warn{color:var(--warn)}
.mxhint.err{color:var(--bad,#ff5468)}
.abstop{margin:14px 0 10px}
.abcols{display:grid;grid-template-columns:1fr;gap:16px}
@media(min-width:1024px){.abcols{grid-template-columns:1fr 1fr}}
.abcol{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:12px}
.abhd{font-family:'Space Grotesk',sans-serif;font-weight:700;color:var(--ink);margin:2px 4px 10px}
.ablist{display:flex;flex-direction:column;gap:8px}
.abrow{display:grid;grid-template-columns:auto 1fr auto;grid-template-areas:"no cust sum" "state state act";gap:6px 10px;align-items:center;
  background:var(--space2);border:1px solid var(--line);border-radius:10px;padding:10px 12px}
.abrow.paid{opacity:.72}
.abrno{grid-area:no;font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:13px;color:var(--ink)}
.abrcust{grid-area:cust;min-width:0;color:var(--ink);font-size:13.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.abrdate{color:var(--muted2);font-size:11.5px;margin-left:8px}
.abrsum{grid-area:sum;font-family:'Space Grotesk',sans-serif;font-weight:700;color:var(--ink);white-space:nowrap}
.abrstate{grid-area:state}
.abrbadge{display:inline-block;font-size:11px;font-weight:700;padding:3px 9px;border-radius:999px;border:1px solid var(--line2)}
.abrbadge.ok{color:#4FD1A5;border-color:#2f7d63}
.abrbadge.open{color:var(--warn);border-color:#8a6a2a}
.abrbadge.open.over{color:var(--bad,#ff5468);border-color:#8a2f3a}
.abrbadge.an{color:var(--cyan);border-color:#2a6a8a}
.abract{grid-area:act;display:flex;gap:6px;justify-self:end;flex-wrap:wrap}
.abract .btn.sm{min-height:34px}
.abempty{color:var(--muted2);font-size:13px;padding:14px;text-align:center}
/* Beleg-Dialog */
.invform{display:flex;flex-direction:column;gap:12px}
.invgrid{display:grid;grid-template-columns:1fr;gap:10px}
@media(min-width:560px){.invgrid{grid-template-columns:1fr 1fr}}
.invgrid label,.invform > label{display:flex;flex-direction:column;gap:4px;font-size:12px;color:var(--muted);min-width:0}
.invgrid label.invwide,.invform > label.invwide{grid-column:1/-1}
.invgrid input,.invgrid select,.invform > label input{background:var(--space2);border:1px solid var(--line2);border-radius:8px;padding:9px 10px;color:var(--ink);font-size:14px;min-width:0}
.invhdr{display:flex;align-items:center;justify-content:space-between;font-weight:700;color:var(--ink);font-size:13px;margin-top:4px}
#ivRows{display:flex;flex-direction:column;gap:8px}
.invrow{display:grid;grid-template-columns:1fr 74px 110px auto;gap:8px;align-items:center}
.invrow input{background:var(--space2);border:1px solid var(--line2);border-radius:8px;padding:9px 10px;color:var(--ink);font-size:14px;min-width:0}
.invdel{min-height:38px}
@media(max-width:520px){.invrow{grid-template-columns:1fr 1fr;grid-template-areas:"desc desc" "qty unit" "del del"}
  .invrow .invdesc{grid-area:desc}.invrow .invqty{grid-area:qty}.invrow .invunit{grid-area:unit}.invrow .invdel{grid-area:del;justify-self:end}}
.invtotals{display:flex;gap:16px;justify-content:flex-end;align-items:baseline;flex-wrap:wrap;color:var(--muted);font-size:13px;
  border-top:1px solid var(--line);padding-top:10px}
.invtotals b{color:var(--ink);font-family:'Space Grotesk',sans-serif;font-size:16px}
/* Angebot-Button an gewonnener Deal-Karte */
.pcabsch{margin-top:8px}
.pcabsch .btn.sm{width:100%;min-height:38px}

/* Mahnwesen (Offene Posten) */
.abrmahn{display:inline-block;margin-left:7px;font-size:10.5px;font-weight:800;color:#fff;background:var(--bad,#ff5468);border-radius:6px;padding:1px 6px;vertical-align:middle}
.rmndmeta{color:var(--muted);font-size:13px;background:var(--space2);border:1px solid var(--line);border-radius:8px;padding:9px 11px}
.rmndmeta b{color:var(--ink)}
.invform textarea{background:var(--space2);border:1px solid var(--line2);border-radius:8px;padding:10px;color:var(--ink);font-size:13.5px;line-height:1.5;font-family:inherit;resize:vertical;min-height:120px;width:100%;box-sizing:border-box}

/* ===== Control Center — Freischalt-Hebel (im Profil) ===== */
.cclist{display:flex;flex-direction:column;gap:8px;margin-top:10px}
.ccrow{display:flex;align-items:center;gap:12px;justify-content:space-between;
  background:var(--space2);border:1px solid var(--line);border-radius:12px;padding:11px 14px;min-width:0}
.ccname{display:flex;flex-direction:column;gap:1px;min-width:0;color:var(--ink);font-weight:600;font-size:14px}
.ccmail{color:var(--muted2);font-weight:400;font-size:12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* Futuristischer An/Aus-Schalter */
.ccsw{position:relative;flex:0 0 auto;width:52px;height:30px;border-radius:999px;cursor:pointer;
  background:var(--space);border:1px solid var(--line2);transition:.2s;padding:0;overflow:hidden}
.ccsw .ccknob{position:absolute;top:3px;left:3px;width:22px;height:22px;border-radius:50%;
  background:#8ea0c0;box-shadow:0 1px 3px rgba(0,0,0,.4);transition:.2s}
.ccsw.on{background:linear-gradient(90deg,color-mix(in srgb,var(--cyan) 55%,transparent),var(--cyan));
  border-color:var(--cyan-d);box-shadow:0 0 14px -2px color-mix(in srgb,var(--cyan) 70%,transparent)}
.ccsw.on .ccknob{left:27px;background:#fff}
.ccsw:disabled{opacity:.5;cursor:default}
.ccsw:focus-visible{outline:2px solid var(--cyan);outline-offset:2px}

/* Control-Center-Zugang: gesperrter Rail-Knopf + fokussiertes eigenes Fenster */
.rail [data-nav="control"].cclocked{opacity:.38;filter:grayscale(1)}
.rail [data-nav="control"].cclocked:hover{background:transparent}
/* „Eigenes Fenster" (?cc=1): Rail aus, Inhalt füllt die Breite */
body.cconly #app{grid-template-columns:1fr}
body.cconly .rail{display:none}
body.cconly #cmdBar{display:none}

/* Profil: „Control Center öffnen"-Knopf (für Freigeschaltete, kein Passwort) */
.ccopenbox .ccopen{margin-top:10px;font-weight:600;
  background:linear-gradient(90deg,color-mix(in srgb,var(--cyan) 22%,transparent),color-mix(in srgb,var(--cyan) 8%,transparent));
  border:1px solid color-mix(in srgb,var(--cyan) 55%,var(--line))}
.ccopenbox .ccopen:hover{border-color:var(--cyan);box-shadow:0 0 0 3px color-mix(in srgb,var(--cyan) 18%,transparent)}

/* Premium-Kopfleiste des eigenen Control-Center-Fensters */
#ccWinBar{display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:10px 18px;min-height:52px;
  background:linear-gradient(90deg,color-mix(in srgb,var(--cyan) 14%,var(--panel)),var(--panel));
  border-bottom:1px solid color-mix(in srgb,var(--cyan) 40%,var(--line));
  position:sticky;top:0;z-index:60}
#ccWinBar .ccwbrand{display:flex;align-items:center;gap:11px;min-width:0}
#ccWinBar .ccwlogo{color:var(--cyan);font-size:18px;line-height:1;filter:drop-shadow(0 0 8px color-mix(in srgb,var(--cyan) 60%,transparent))}
#ccWinBar .ccwtitle{font-family:'Space Grotesk',sans-serif;font-size:15px;letter-spacing:.2px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#ccWinBar .ccwtitle b{font-weight:700}
#ccWinBar .ccwtag{flex:0 0 auto;font-size:10.5px;color:var(--muted);text-transform:uppercase;letter-spacing:.6px;
  border:1px solid var(--line);border-radius:999px;padding:3px 9px}
#ccWinBar .ccwclose{flex:0 0 auto;width:32px;height:32px;border-radius:8px;cursor:pointer;
  background:transparent;border:1px solid var(--line);color:var(--muted);font-size:13px;line-height:1;
  display:inline-flex;align-items:center;justify-content:center;transition:.15s}
#ccWinBar .ccwclose:hover{color:var(--ink);border-color:var(--cyan-d);background:color-mix(in srgb,var(--cyan) 10%,transparent)}
@media(max-width:560px){ #ccWinBar .ccwtag{display:none} }

/* =====================================================================
   MOBILE-FUNDAMENT (Umbau: dichte Views auf Handy/Tablet verdichten)
   Belegt durch WAI-ARIA APG (Accordion), Material 3, WCAG 2.2, MDN.
   Greift < 1024px (Handy + Tablet); Desktop bleibt unverändert offen.
   ===================================================================== */

/* ----- Wiederverwendbares Akkordeon (native Semantik: Button in Überschrift,
   aria-expanded / aria-controls, role=region). Ruckelfreie Grid-Animation
   0fr→1fr (Cross-Browser, alle Handys). Auf Desktop immer offen. ----- */
/* Futuristischer Klapp-Balken — jetzt auf JEDER Breite auf-/zuklappbar
   (Desktop wie Handy). Titel + optionale Zähler-Pille + Info-Punkt („was ist
   da drin") + Pfeil; der Körper klappt über eine Grid-Zeilen-Animation. */
.mxacc{border:1px solid var(--line);border-radius:14px;background:var(--panel);overflow:hidden;margin-bottom:12px}
.mxacc--sec{margin-bottom:14px}
.mxacc__h{margin:0;display:flex;align-items:stretch}
.mxacc__sum{flex:1 1 auto;min-width:0;min-height:52px;display:flex;align-items:center;gap:10px;
  background:transparent;border:0;color:var(--ink);font:inherit;font-family:'Space Grotesk',sans-serif;
  font-weight:700;font-size:15px;padding:12px 16px;text-align:left;cursor:pointer;
  -webkit-tap-highlight-color:transparent;touch-action:manipulation;transition:background .15s}
.mxacc__sum:hover{background:color-mix(in srgb,var(--cyan) 5%,transparent)}
.mxacc__sum:active{background:color-mix(in srgb,var(--cyan) 8%,transparent)}
.mxacc__ttl{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mxacc__badge{flex:0 0 auto;font-size:11px;font-weight:700;color:var(--muted2);
  border:1px solid var(--line2);border-radius:999px;padding:2px 9px}
/* Status-Pillen/-Kürzel, die aus einer Karten-Überschrift ins Akkordeon wandern:
   bleiben rechts sichtbar (werden NICHT vom Titel-Ellipsis abgeschnitten). */
.mxacc__tags{flex:0 0 auto;display:flex;align-items:center;gap:6px}
.mxacc__tags .pill,.mxacc__tags .mono{margin:0}
.mxacc__chev{flex:0 0 auto;width:10px;height:10px;border-right:2px solid var(--muted);
  border-bottom:2px solid var(--muted);transform:rotate(45deg);transition:transform .28s ease;margin-left:2px}
.mxacc.open .mxacc__chev{transform:rotate(-135deg)}         /* offen: Pfeil nach oben */
/* Info-Punkt sitzt NEBEN dem Klapp-Knopf (eigenes Element), mittig, klickbar. */
.mxacc__info{flex:0 0 auto;position:relative;display:flex;align-items:center;justify-content:center;
  width:26px;align-self:stretch}
.mxacc__info .infodot{position:static;top:auto;right:auto;margin:0}
.mxacc__sum:focus-visible{outline:2px solid var(--cyan);outline-offset:-2px}
.mxacc__body{display:grid;grid-template-rows:0fr;transition:grid-template-rows .28s ease}
.mxacc.open>.mxacc__body{grid-template-rows:1fr}
.mxacc__inner{overflow:hidden;min-height:0}                 /* Grid-Item: KEIN Padding (sonst Rest-Höhe) */
.mxacc__pad{padding:0 16px 16px}                            /* Abstände hier, damit 0fr voll kollabiert */
@media(prefers-reduced-motion:reduce){
  .mxacc__body{transition:none}.mxacc__chev{transition:none}
}

/* ----- Touch-Ziele auf dem Handy/Tablet: mind. 44px (Apple HIG / WCAG).
   Nur < 1024px, damit die Desktop-Dichte unverändert bleibt. ----- */
@media(max-width:1023px){
  .btn.sm, .abract .btn.sm{min-height:44px}
  .iconbtn{min-width:44px;min-height:44px}
  button, a, summary, .mxacc__sum{touch-action:manipulation}
  /* iOS zoomt beim Fokus in Felder < 16px hinein — global auf 16px heben
     (verhindert den Sprung, recherche-belegt: Apple/WebKit). */
  input, select, textarea{font-size:16px}
}

/* ----- Globaler Bedien-Feinschliff (jeder Button/Link/Feld) -----
   Grauer Tap-Blitz weg, dafür eigenes Press- und Fokus-Feedback. Premium,
   respektiert prefers-reduced-motion. */
button, a, .btn, .iconbtn, summary, .mxacc__sum, [role="button"]{-webkit-tap-highlight-color:transparent}
.btn:active, .iconbtn:active, [role="button"]:active, a.btn:active{transform:scale(.98)}
.btn{transition:transform .12s ease, filter .15s ease}   /* Press + bestehendes Hover-Filter erhalten */
.iconbtn{transition:transform .12s ease, background .15s ease, border-color .15s ease}
a:focus-visible, button:focus-visible, .btn:focus-visible, .iconbtn:focus-visible, [role="button"]:focus-visible, summary:focus-visible{
  outline:2px solid var(--cyan);outline-offset:2px}
@media(prefers-reduced-motion:reduce){
  .btn:active, .iconbtn:active, [role="button"]:active, a.btn:active{transform:none}
  .btn, .iconbtn{transition:none}
}

/* ----- Bottom-Navigation (nur Handy, sichtbar via #app.show > #bottomNav) -----
   3–5 Kern-Bereiche + „Mehr" (öffnet die Leiste als Overlay). Material-3-nahe
   Active-Pille, Safe-Area am Home-Indicator, aria-current für Screenreader. */
#bottomNav{display:none}
#bottomNav{
  position:fixed;left:0;right:0;bottom:0;z-index:50;
  align-items:stretch;justify-content:space-around;gap:2px;
  background:var(--panel);border-top:1px solid var(--line);
  padding:6px 4px 0;padding-bottom:env(safe-area-inset-bottom,0px);
  min-height:calc(60px + env(safe-area-inset-bottom,0px))}
.bnav{flex:1 1 0;min-width:0;display:flex;flex-direction:column;align-items:center;gap:3px;
  background:transparent;border:0;color:var(--muted);font:inherit;cursor:pointer;
  padding:4px 0 6px;min-height:48px;-webkit-tap-highlight-color:transparent;touch-action:manipulation}
.bnav-ind{position:relative;display:grid;place-items:center;width:54px;height:30px;border-radius:16px;
  transition:background .2s ease,transform .12s ease}
.bnav svg{width:22px;height:22px}
.bnav-lbl{font-size:11px;line-height:1;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bnav.on{color:var(--cyan)}
.bnav.on .bnav-ind{background:color-mix(in srgb,var(--cyan) 20%,transparent)}
.bnav:active .bnav-ind{transform:scale(.94)}
.bnav:focus-visible{outline:2px solid var(--cyan);outline-offset:-2px;border-radius:12px}
.bnav-badge{position:absolute;top:-3px;right:2px;min-width:16px;height:16px;padding:0 4px;border-radius:8px;
  background:var(--warn,#e6b800);color:#03212a;font-size:10px;font-weight:800;line-height:16px;text-align:center}
@media(prefers-reduced-motion:reduce){ .bnav-ind{transition:none} }
/* Sichtbar nur auf dem Handy — MUSS nach der display:none-Vorgabe stehen (Kaskade).
   Ebenso das View-Unterpolster: hier ganz am Ende, damit es die spätere
   .view{padding:…}-Kurzform überschreibt und der Inhalt die Bar frei räumt. */
@media(max-width:720px){
  #bottomNav{display:flex}
  .view{padding-bottom:calc(60px + 26px + env(safe-area-inset-bottom,0px))}
}

/* ===== Geführter Erklär-Modus (Tour) ===== */
.sxtour-scrim{position:fixed;inset:0;z-index:1200;background:rgba(4,8,16,.62)}
@supports (backdrop-filter:blur(1px)){.sxtour-scrim{backdrop-filter:blur(1px)}}
.sxtour-ring{position:fixed;z-index:1201;border-radius:14px;pointer-events:none;
  box-shadow:0 0 0 2px var(--cyan),0 0 0 6px rgba(59,167,255,.35),0 0 0 9999px rgba(4,8,16,.62);
  transition:top .18s var(--ease-decel,ease),left .18s var(--ease-decel,ease),width .18s var(--ease-decel,ease),height .18s var(--ease-decel,ease)}
.sxtour-pop{position:fixed;z-index:1203;width:min(340px,calc(100vw - 24px));
  background:var(--panel);color:var(--ink);border:1px solid var(--line2);border-radius:16px;
  padding:16px 16px 14px;box-shadow:0 24px 60px -18px rgba(0,0,0,.7),0 0 0 1px rgba(59,167,255,.15);
  opacity:0;transform:translateY(6px);transition:opacity .16s ease,transform .16s var(--ease-decel,ease)}
.sxtour-pop.show{opacity:1;transform:none}
.sxtour-x{position:absolute;top:8px;right:8px;width:30px;height:30px;border:none;border-radius:9px;
  background:transparent;color:var(--muted);font-size:20px;line-height:1;cursor:pointer}
.sxtour-x:hover{background:var(--panelb);color:var(--ink)}
.sxtour-step{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--cyan);font-weight:600;margin-bottom:4px}
.sxtour-ttl{font-family:'Space Grotesk',system-ui,sans-serif;font-weight:700;font-size:17px;margin:0 26px 6px 0;color:var(--ink)}
.sxtour-txt{font-size:13.5px;line-height:1.55;color:var(--muted);margin-bottom:14px}
.sxtour-nav{display:flex;align-items:center;gap:10px;justify-content:space-between}
.sxtour-btn{border:1px solid var(--cyan-d);background:var(--cyan);color:#04101f;font-weight:600;
  border-radius:10px;padding:8px 16px;font-size:13.5px;cursor:pointer;transition:.14s}
.sxtour-btn:hover{filter:brightness(1.06);transform:translateY(-1px)}
.sxtour-btn.ghost{background:transparent;color:var(--muted);border-color:var(--line2)}
.sxtour-btn.ghost:hover{color:var(--ink);background:var(--panelb);transform:none}
.sxtour-btn:disabled{opacity:.4;cursor:default;transform:none;filter:none}
.sxtour-dots{display:flex;gap:6px;flex:1;justify-content:center}
.sxtour-dots span{width:6px;height:6px;border-radius:50%;background:var(--line2);transition:.14s}
.sxtour-dots span.on{background:var(--cyan);transform:scale(1.25)}
/* „Verstanden – nicht mehr anzeigen" (dauerhaft schließen) — dezent unter der Navi */
.sxtour-never{display:block;width:100%;margin-top:10px;background:none;border:none;
  color:var(--muted2);font-size:11.5px;cursor:pointer;text-decoration:underline;text-underline-offset:2px;padding:2px}
.sxtour-never:hover{color:var(--ink)}
@media(prefers-reduced-motion:reduce){.sxtour-ring,.sxtour-pop,.sxtour-btn{transition:none}}

/* Frontend-Fehler-Mitschrift: Stapel-Auszug (Kontrollcenter, nur Admin) */
.ccinstack{margin-top:6px}
.ccinstack summary{cursor:pointer;color:var(--muted);font-size:12px}
.ccinstack pre{margin:6px 0 0;padding:8px 10px;background:var(--space2);border:1px solid var(--line);border-radius:8px;
  font-family:'JetBrains Mono',ui-monospace,monospace;font-size:11px;line-height:1.5;color:var(--muted);
  white-space:pre-wrap;word-break:break-word;overflow-x:auto;max-height:180px}

/* ================= WEB-DESIGNER (Webbaukasten) ================= */
.wdwrap{padding:0}
.wdsites{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:10px}
.wdsite{flex:1;min-width:96px;display:flex;flex-direction:column;align-items:flex-start;gap:2px;
  background:var(--space2);border:1px solid var(--line);border-radius:12px;padding:9px 12px;cursor:pointer;
  color:var(--muted);transition:.15s;text-align:left}
.wdsite:hover{border-color:var(--line2);color:var(--ink)}
.wdsite b{font-family:'Space Grotesk',sans-serif;font-size:13.5px;font-weight:600;color:inherit}
.wdsite span{font-size:11px;color:var(--muted2)}
.wdsite.on{border-color:var(--cyan);background:#111f36;color:var(--ink)}
.wdsite.on span{color:var(--cyan)}
.wdpub{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;
  background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:8px 12px;margin-bottom:10px}
.wdpub-status{font-size:12.5px;color:var(--muted);min-width:0}
.wdpub-status .wdok{color:var(--ok);font-weight:600}
.wdpub-status .wdwarn{color:var(--warn);font-weight:600}
.wdpub-btn{background:linear-gradient(90deg,var(--cyan-d),var(--cyan))!important;color:#03212a!important;
  border-color:transparent!important;font-weight:700}
.wdpub-btn:hover{filter:brightness(1.08)}
.wdpub-btn[disabled]{opacity:.5;cursor:not-allowed;filter:none;background:var(--space2)!important;color:var(--muted)!important}
.wdpub-acts{display:flex;gap:8px;flex-wrap:wrap}
.wdlive-btn{border-color:var(--cyan)!important;color:var(--cyan)!important;font-weight:700}
.wdlive-btn:hover{background:#111f36!important}
.wdlive-btn[disabled]{opacity:.5;cursor:not-allowed;border-color:var(--line)!important;color:var(--muted)!important;background:var(--space2)!important}
.wdbar{display:flex;flex-wrap:wrap;gap:8px;justify-content:space-between;align-items:center;
  position:sticky;top:0;z-index:5;background:var(--panel);border:1px solid var(--line);
  border-radius:14px;padding:10px 12px;margin-bottom:10px}
.wdbar-l,.wdbar-r{display:flex;flex-wrap:wrap;gap:6px}
.wdadd,.wdtool{background:var(--space2);border:1px solid var(--line);color:var(--ink);
  border-radius:9px;padding:8px 11px;font-size:12.5px;font-weight:600;cursor:pointer;
  white-space:nowrap;transition:.15s}
.wdadd:hover,.wdtool:hover{border-color:var(--cyan);background:#111f36}
.wdadd{color:var(--muted)}.wdadd:hover{color:var(--ink)}
.wdtool.on{border-color:var(--cyan);color:var(--cyan)}
.wdtool.wddanger{color:var(--err)}.wdtool.wddanger:hover{border-color:var(--err);background:#241722}
.wdhint{margin:0 2px 12px}
.wdcanvas{max-width:520px;margin:0 auto;background:#fff;color:#0e1a2e;border-radius:16px;
  padding:26px 22px;box-shadow:var(--elev-5);min-height:200px}
.wdcanvas.preview{padding:30px 24px}
.wdempty{color:#5f7396;text-align:center;padding:40px 0;font-size:14px}
.wdblock{position:relative;margin:4px 0;border:1.5px dashed transparent;border-radius:10px;
  padding:6px 8px;transition:border-color .12s}
.wdcanvas:not(.preview) .wdblock:hover{border-color:#cdd8ea}
.wdcanvas.preview .wdblock{padding:2px 0;margin:2px 0}
.wdblock .wdh,.wdblock .wdp{color:#0e1a2e;outline:none}
.wdblock h2.wdh{font-family:'Space Grotesk',sans-serif;font-size:1.7rem;font-weight:700;line-height:1.2;margin:.2em 0}
.wdblock h3.wdh{font-family:'Space Grotesk',sans-serif;font-size:1.25rem;font-weight:600;line-height:1.25;margin:.3em 0}
.wdblock .wdp{font-size:15px;line-height:1.65;color:#26364f}
.wdblock [contenteditable]:focus{background:#eef4ff;border-radius:6px;box-shadow:0 0 0 2px #b9d4ff}
.wdimgslot{cursor:pointer;border-radius:12px;overflow:hidden;position:relative}
.wdimgslot img{display:block;width:100%;height:auto;border-radius:12px}
.wdimgslot.empty{display:flex;align-items:center;justify-content:center;min-height:150px;
  background:#eef2f8;border:2px dashed #c2cee0;color:#5f7396;font-size:14px;font-weight:600}
.wdcanvas:not(.preview) .wdimgslot:hover{outline:2px solid var(--cyan);outline-offset:2px}
.wdbtn{display:inline-flex;align-items:center;gap:6px;margin:.4em 0}
.wdbtn-lbl{display:inline-block;background:#2f8fe0;color:#fff;border-radius:10px;
  padding:10px 18px;font-weight:600;font-size:14px;outline:none}
.wdbtn-lbl[contenteditable]:focus{box-shadow:0 0 0 2px #b9d4ff}
.wdbtn-edit{background:#eef2f8;border:1px solid #c2cee0;border-radius:8px;padding:6px 8px;cursor:pointer;font-size:12px}
.wdcanvas.preview .wd-button .wdbtn-lbl{cursor:default}
.wdctrls{position:absolute;top:4px;right:4px;display:none;gap:3px;background:rgba(255,255,255,.94);
  border:1px solid #d5deec;border-radius:8px;padding:3px}
.wdcanvas:not(.preview) .wdblock:hover .wdctrls{display:flex}
.wdctrls button{width:26px;height:26px;border:none;background:#eef2f8;border-radius:6px;cursor:pointer;
  font-size:12px;color:#34435c;line-height:1}
.wdctrls button:hover{background:#dbe6f7}
.wdctrls button[disabled]{opacity:.35;cursor:not-allowed}
.wdctrls .wddel{color:#c23a54}.wdctrls .wddel:hover{background:#f7dde3}
/* Bild-Tausch-Sheet */
.wdimg-scrim{position:fixed;inset:0;background:var(--scrim);backdrop-filter:blur(var(--scrim-blur));
  display:none;align-items:flex-end;justify-content:center;z-index:60}
.wdimg-scrim.show{display:flex}
.wdimg-sheet{position:relative;width:100%;max-width:440px;background:var(--panel);
  border:1px solid var(--line2);border-radius:var(--radius-sheet) var(--radius-sheet) 0 0;
  padding:22px 20px calc(22px + var(--safe-b));box-shadow:var(--elev-5)}
.wdimg-sheet h3{font-family:'Space Grotesk',sans-serif;font-size:16px;margin-bottom:14px;color:var(--ink)}
.wdimg-close{position:absolute;top:8px;right:12px;background:none;border:none;color:var(--muted);
  font-size:26px;line-height:1;cursor:pointer}
.wdimg-close:hover{color:var(--ink)}
.wdimg-upload{margin-bottom:14px}
.wdimg-or{text-align:center;color:var(--muted2);font-size:11.5px;margin:6px 0 8px}
.wdimg-sheet input[type=url]{width:100%;background:#0a1424;border:1px solid var(--line);border-radius:9px;
  padding:11px 13px;color:var(--ink);font-size:14px;margin-bottom:12px}
.wdimg-actions{display:flex;gap:8px}
.wdimg-actions .wdtool{flex:1;text-align:center}
.wdimg-sheet input[type=text]{width:100%;background:#0a1424;border:1px solid var(--line);border-radius:9px;
  padding:11px 13px;color:var(--ink);font-size:14px;margin-bottom:12px}
.wdimg-sheet textarea{width:100%;background:#0a1424;border:1px solid var(--line);border-radius:9px;
  padding:11px 13px;color:var(--ink);font-size:14px;margin-bottom:12px;font-family:inherit;resize:vertical}
.wdseo-ct{color:var(--muted2);font-size:11px;font-weight:400}
/* Alt-Text-Warnung auf Bildern ohne Beschreibung (nur im Bearbeiten-Modus) */
.wdaltwarn{position:absolute;left:10px;bottom:10px;background:#c23a54;color:#fff;font-size:11px;
  font-weight:600;padding:3px 8px;border-radius:7px;pointer-events:none;z-index:1}
/* Versionen-Liste */
.wdver-list{display:flex;flex-direction:column;gap:8px;max-height:46vh;overflow:auto}
.wdver-item{display:flex;align-items:center;gap:10px;justify-content:space-between;
  background:#0a1424;border:1px solid var(--line);border-radius:9px;padding:9px 11px}
.wdver-meta{display:flex;flex-direction:column;min-width:0}
.wdver-meta b{font-size:13px;color:var(--ink)}
.wdver-meta span{font-size:11px;color:var(--muted2)}
.wdver-item .wdtool{flex:none}
/* Bild-Korb (wiederverwendbare Bilder) */
.wdkorb{display:grid;grid-template-columns:repeat(auto-fill,minmax(64px,1fr));gap:6px;
  max-height:168px;overflow:auto;margin-bottom:12px}
.wdkorb-item{padding:0;border:1px solid var(--line);border-radius:8px;overflow:hidden;
  cursor:pointer;background:#0a1424;aspect-ratio:1/1}
.wdkorb-item:hover{border-color:var(--cyan)}
.wdkorb-item img{width:100%;height:100%;object-fit:cover;display:block}
.wdkorb-empty{grid-column:1/-1;color:var(--muted2);font-size:12px;text-align:center;padding:14px 6px}
@media(min-width:560px){.wdimg-scrim{align-items:center}
  .wdimg-sheet{border-radius:var(--radius-sheet)}}

/* --- Eingabefelder auf Touch-Geraeten -------------------------------------
   iOS Safari zoomt beim Antippen in jedes Feld hinein, das kleiner als 16px
   gesetzt ist. In dieser Demo sind die Felder mit Absicht kompakt (sie bilden
   eine Anwendung NACH, keine Webseite) — deshalb wird nur dort angehoben, wo
   die Grenze wirklich gilt: auf Zeigern ohne Maus. Am Schreibtisch bleibt die
   Demo so dicht, wie sie gedacht ist. */
@media (pointer: coarse) {
  /* `!important` mit Absicht — und das ist hier kein Holzhammer, sondern der
     einzige Weg, der wirkt: die Feld-Groessen stehen in KOMPONENTEN-Regeln
     (`.chatinput input`, `.addtask input`, …), und die sind spezifischer als
     ein blosses `input`. Der erste Entwurf dieser Regel stand ohne
     `!important` da, hat nichts geaendert und sah trotzdem nach Loesung aus.
     Eine Barrierefreiheits-Untergrenze darf nicht davon abhaengen, wer
     spezifischer geschrieben hat. */
  input, select, textarea { font-size: 16px !important; }
}