@import url('https://fonts.googleapis.com/css2?family=Inter:wght@500;600;700;800&family=Space+Grotesk:wght@600;700;800&family=Plus+Jakarta+Sans:wght@700;800&family=JetBrains+Mono:wght@600;700&display=swap');
/* ========================================================================
   Kinder-Messenger — Design-System v14 „Atelier“
   NEUES GUI überall: Tokens, Canvas, Header, Karten, Inputs, Chat
   Licht: ☀ Sonne (hell warm, clean) · 🌓 Dämmerung (Lavendel-Creme gemischt) · 🌙 Mond (Nacht-Blau dunkel)
   Keine WhatsApp-Kopie — Studio-Look: große Radien, Glas, weiche Schatten, klare Typo
   ======================================================================== */
/* ☀ SONNE — hell, clean, warm-minimal (Default) */
:root,
[data-palette="sonne"],
[data-palette="sonnenkiesel"]{
  --km-primary:#FF5A2E; --km-primary-dark:#E84E22; --km-primary-soft:#FFF0E8; --km-primary-ring:rgba(255,90,46,.18);
  --km-secondary:#FFC84D; --km-secondary-soft:#FFF7D6; --km-secondary-ink:#3A2E12;
  --km-accent:#14B8A6; --km-accent-soft:#E6F7F6; --km-accent-strong:#0F8B7F; --km-accent-ring:rgba(20,184,166,.16);
  --km-ink:#111B2E; --km-ink-2:#2F425F; --km-muted:#8B9AB2; --km-line:#EBDDD0; --km-line-2:#F3E9DE;
  --km-bg:#FFFCF8; --km-surface:#FFFFFF; --km-surface-2:#FFF6EC; --km-surface-3:#FFF1E0;
  --km-danger:#E84A3C; --km-danger-soft:#FFF0EE; --km-success:#14B8A6; --km-warn:#FFB547;
  --radius-xl:32px; --radius-lg:24px; --radius-md:18px; --radius-card:28px; --radius-pill:999px; --radius-bubble:20px; --radius-input:16px;
  --shadow-card:0 14px 36px rgba(17,27,46,.08), 0 2px 10px rgba(17,27,46,.06);
  --shadow-soft:0 8px 22px rgba(17,27,46,.06);
  --shadow-float:0 24px 64px rgba(17,27,46,.14), 0 8px 24px rgba(255,90,46,.10);
  --font-display:"Space Grotesk", "Plus Jakarta Sans", system-ui, sans-serif;
  --font-body:"Inter", system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  --font-mono:"JetBrains Mono", ui-monospace, monospace;
}
/* 🌓 DÄMMERUNG — gemischt mittel lavendel + creme, organisch geblendet (nicht geteilt) */
[data-palette="daemmerung"],
[data-palette="dämmerung"],
[data-palette="twilight"],
[data-palette="abendhafen"]{
  --km-primary:#FF5A2E; --km-primary-dark:#E84E22; --km-primary-soft:#FFF0E8; --km-primary-ring:rgba(255,90,46,.16);
  --km-secondary:#B9A7E5; --km-secondary-soft:#F3EEFF; --km-secondary-ink:#2E2445;
  --km-accent:#7BBDB6; --km-accent-soft:#EEF6F5; --km-accent-strong:#5AA8A0;
  --km-ink:#221E3A; --km-ink-2:#3D3658; --km-muted:#8A87A0; --km-line:#E0D6EF; --km-line-2:#EDE6F8;
  --km-bg:#F1EAF7; --km-surface:#FFFBFE; --km-surface-2:#F7F0FF; --km-surface-3:#EDE6F7;
  --km-danger:#E84A3C; --km-danger-soft:#FFF0EE; --km-success:#7BBDB6;
  --shadow-card:0 14px 36px rgba(34,30,58,.10), 0 2px 12px rgba(34,30,58,.06);
  --shadow-float:0 24px 64px rgba(34,30,58,.16);
}
/* 🌙 MOND — dunkel tiefes Nacht-Blau, Glas + bernstein Akzente */
[data-palette="mond"],
[data-palette="nacht"],
[data-palette="nordlicht"]{
  --km-primary:#FF6B45; --km-primary-dark:#FF8A6E; --km-primary-soft:rgba(255,107,69,.14); --km-primary-ring:rgba(255,107,69,.22);
  --km-secondary:#FFC24D; --km-secondary-soft:rgba(255,194,77,.14); --km-secondary-ink:#FFDFA3;
  --km-accent:#2DD4C6; --km-accent-soft:rgba(45,212,198,.12); --km-accent-strong:#5DEDE1; --km-accent-ring:rgba(45,212,198,.18);
  --km-ink:#EAF0FF; --km-ink-2:#C7D2EA; --km-muted:#8FA0C2; --km-line:rgba(255,255,255,.08); --km-line-2:rgba(255,255,255,.06);
  --km-bg:#070C1E; --km-surface:#101A33; --km-surface-2:#13203F; --km-surface-3:#0F1E3A;
  --km-danger:#FF6B6B; --km-danger-soft:rgba(255,107,107,.12); --km-success:#2DD4C6;
  --shadow-card:0 18px 44px rgba(0,0,0,.50), 0 2px 14px rgba(0,0,0,.35);
  --shadow-soft:0 10px 28px rgba(0,0,0,.35);
  --shadow-float:0 28px 72px rgba(0,0,0,.60);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth; scrollbar-gutter:stable}
body{margin:0; font-family:var(--font-body); color:var(--km-ink); background:var(--km-bg); -webkit-font-smoothing:antialiased; letter-spacing:-.01em}
a{color:var(--km-primary-dark); font-weight:700; text-decoration:none}
a:hover{text-decoration:underline}
::selection{background:var(--km-primary); color:#fff}
/* BG Canvas — v14 Studio: warm grid + weiche Orbs, im Mond tiefe Glas-Radials */
.km-canvas{position:fixed; inset:0; z-index:-1; overflow:hidden;
  background:
    radial-gradient(1100px 680px at 12% 8%, color-mix(in srgb, var(--km-primary) 16%, transparent) 0, transparent 62%),
    radial-gradient(980px 720px at 88% 14%, color-mix(in srgb, var(--km-secondary) 18%, transparent) 0, transparent 64%),
    radial-gradient(900px 700px at 50% 92%, color-mix(in srgb, var(--km-accent) 10%, transparent) 0, transparent 68%),
    linear-gradient(180deg, #fff 0, var(--km-bg) 100%);
}
.km-canvas::after{content:""; position:absolute; inset:0;
  background-image:
    linear-gradient(rgba(17,27,46,.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(17,27,46,.04) 1px, transparent 1px);
  background-size:32px 32px, 32px 32px;
  mask: radial-gradient(1100px 700px at 30% 18%, #000 30%, transparent 78%);
  opacity:.9;
}
[data-palette="daemmerung"] .km-canvas,
[data-palette="dämmerung"] .km-canvas{
  background:
    radial-gradient(900px 600px at 18% 14%, rgba(255,90,46,.16) 0, transparent 62%),
    radial-gradient(820px 620px at 84% 18%, rgba(185,167,229,.20) 0, transparent 64%),
    radial-gradient(900px 700px at 50% 90%, rgba(123,189,182,.10) 0, transparent 68%),
    linear-gradient(180deg, #FFFBFE 0, #F1EAF7 100%);
}
[data-palette="mond"] .km-canvas{
  background:
    radial-gradient(1200px 760px at 14% 8%, rgba(255,107,69,.10) 0, transparent 60%),
    radial-gradient(980px 720px at 88% 12%, rgba(45,212,198,.08) 0, transparent 64%),
    radial-gradient(900px 700px at 50% 96%, rgba(255,194,77,.07) 0, transparent 68%),
    linear-gradient(180deg, #070C1E 0, #070C1E 100%);
}
[data-palette="mond"] .km-canvas::after{
  background-image:
    linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px);
  opacity:.35;
}
.km-orb{position:absolute; border-radius:50%; filter:blur(34px); opacity:.85; mix-blend-mode:multiply}
.km-orb.a{width:680px;height:680px; left:-140px; top:-120px; background: radial-gradient(closest-side, color-mix(in srgb, var(--km-primary) 20%, transparent), transparent 72%); animation:kmA 10s ease infinite alternate}
.km-orb.b{width:840px;height:840px; right:-220px; top:40px; background: radial-gradient(closest-side, color-mix(in srgb, var(--km-secondary) 20%, transparent), transparent 72%); animation:kmB 12s ease infinite alternate}
.km-orb.c{width:720px;height:720px; left:32%; bottom:-240px; background: radial-gradient(closest-side, color-mix(in srgb, var(--km-accent) 16%, transparent), transparent 72%); animation:kmA 14s ease infinite alternate}
@keyframes kmA{0%{transform:translate(0,0) scale(1)}100%{transform:translate(16px,-14px) scale(1.04)}}
@keyframes kmB{0%{transform:translate(0,0) scale(1)}100%{transform:translate(-16px,12px) scale(1.05)}}
[data-palette="mond"] .km-orb{ mix-blend-mode:screen; filter:blur(40px); opacity:.55}
/* NAV (Landing) — Glas, größer, Studio */
.km-nav{position:sticky; top:0; z-index:30; backdrop-filter: blur(18px) saturate(1.12); background: color-mix(in srgb, var(--km-surface) 86%, transparent); border-bottom:1px solid var(--km-line); box-shadow:0 10px 30px rgba(17,27,46,.08)}
[data-palette="mond"] .km-nav{ background: color-mix(in srgb, var(--km-surface) 92%, transparent); border-bottom-color:rgba(255,255,255,.07); box-shadow:0 12px 36px rgba(0,0,0,.35)}
.km-nav-inner{max-width:1220px; margin:0 auto; padding:14px 20px; display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap}
.km-brand{display:flex; align-items:center; gap:14px}
.km-mark{width:52px; height:52px; border-radius:18px; background:#fff; display:grid; place-items:center; box-shadow:0 12px 28px rgba(0,0,0,.14), 0 0 0 1px rgba(0,0,0,.06); overflow:hidden; flex:0 0 auto; border:1px solid rgba(0,0,0,.04)}
.km-mark svg{width:30px; height:30px; display:block}
.km-brand h1{margin:0; color:var(--km-ink); font-family:var(--font-display); font-weight:800; font-size:20px; letter-spacing:-.03em; line-height:1}
.km-brand p{margin:4px 0 0; color:var(--km-muted); font-size:12.5px; font-weight:600}
.km-brand p b{color:var(--km-ink)}
.km-nav-actions{display:flex; gap:10px; flex-wrap:wrap; align-items:center}
/* Buttons — v14 Studio: fett rund, mit Lift + Ring */
.km-btn{appearance:none; border:1px solid transparent; border-radius:var(--radius-pill); padding:11px 18px; font-weight:800; font-size:13.5px; cursor:pointer; display:inline-flex; align-items:center; gap:8px; white-space:nowrap; transition: transform .12s, box-shadow .14s, filter .14s, background .14s, border-color .14s, color .14s; text-decoration:none; font-family:var(--font-body); line-height:1; letter-spacing:-.01em}
.km-btn:active{transform:translateY(1px) scale(.99)}
.km-btn-primary{background:linear-gradient(180deg, var(--km-primary), var(--km-primary-dark)); color:#fff; box-shadow:0 12px 28px color-mix(in srgb, var(--km-primary) 32%, transparent), 0 2px 8px rgba(0,0,0,.08); border-color:rgba(255,255,255,.10)}
.km-btn-primary:hover{filter:brightness(1.04); box-shadow:0 16px 36px color-mix(in srgb, var(--km-primary) 38%, transparent)}
.km-btn-secondary{background:var(--km-secondary); color:var(--km-secondary-ink); box-shadow:0 10px 22px color-mix(in srgb, var(--km-secondary) 28%, transparent); border-color:rgba(0,0,0,.06)}
.km-btn-ghost{background:rgba(255,255,255,.08); color:var(--km-ink); border-color:var(--km-line)}
[data-palette="mond"] .km-btn-ghost{background:rgba(255,255,255,.08); color:#fff; border-color:rgba(255,255,255,.12)}
.km-btn-light{background:var(--km-surface); color:var(--km-ink); border-color:var(--km-line); box-shadow:var(--shadow-soft)}
[data-palette="mond"] .km-btn-light{background:rgba(255,255,255,.07); color:#EAF0FF; border-color:rgba(255,255,255,.10); box-shadow:none}
[data-palette="daemmerung"] .km-btn-light{background:#FFFBFE; color:#221E3A; border-color:#E0D6EF}
.km-btn-dark{background:var(--km-ink); color:#fff; border-color:var(--km-ink); box-shadow:0 10px 22px rgba(17,27,46,.18)}
[data-palette="mond"] .km-btn-dark{background:#EAF0FF; color:#070C1E; border-color:#EAF0FF}
.km-btn-danger{background:var(--km-danger); color:#fff; box-shadow:0 10px 22px rgba(232,74,60,.22); border-color:rgba(255,255,255,.10)}
.km-btn-icon{width:44px; height:44px; padding:0; border-radius:50%; display:grid; place-items:center; font-size:18px; background:var(--km-surface); color:var(--km-ink-2); border:1px solid var(--km-line); box-shadow:var(--shadow-soft)}
.km-btn-icon.on{background:var(--km-primary); color:#fff; border-color:var(--km-primary); box-shadow:0 12px 28px color-mix(in srgb, var(--km-primary) 30%, transparent)}
.km-btn-small{padding:8px 13px; font-size:12.5px}
.pill{display:inline-flex; align-items:center; gap:6px; font-size:11px; font-weight:800; padding:6px 10px; border-radius:var(--radius-pill); border:1px solid var(--km-line); background:var(--km-surface); color:var(--km-ink-2); letter-spacing:.02em}
.pill.ok{background:#E6F7F6; color:#0D5B56; border-color:#CFF0EE}
.pill.err{background:var(--km-danger-soft); color:#7F1D1D; border-color:#FECACA}
.kicker{font-family:var(--font-display); font-weight:800; font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:var(--km-primary)}
.wrap{max-width:1220px; margin:18px auto; padding:0 20px}
.hero{display:grid; grid-template-columns: 1.32fr .98fr; gap:22px; align-items:stretch}
@media(max-width:980px){ .hero{grid-template-columns:1fr} }
.hero-card{background: linear-gradient(180deg, var(--km-surface) 0, var(--km-surface-2) 100%); border:1px solid var(--km-line); border-radius:var(--radius-card); padding:26px; box-shadow:var(--shadow-card); position:relative; overflow:hidden}
.hero-card::before{content:""; position:absolute; right:-44px; top:-44px; width:300px; height:300px; border-radius:50%; background: radial-gradient(closest-side, color-mix(in srgb, var(--km-primary) 12%, transparent), transparent 70%)}
.hero-card h2{margin:10px 0 10px; font-family:var(--font-display); font-size:40px; line-height:.92; letter-spacing:-.04em}
@media(max-width:560px){ .hero-card h2{font-size:32px} }
.grad{background: linear-gradient(90deg, var(--km-primary) 0, #FF8A6E 48%, var(--km-secondary) 100%); -webkit-background-clip:text; background-clip:text; color:transparent}
.lead{margin:0; color:var(--km-ink-2); font-size:15px; line-height:1.6; max-width:60ch; font-weight:500}
.lead b{color:var(--km-ink)}
.bullets{margin:16px 0 0; padding:0; list-style:none; display:grid; gap:12px}
.bullets li{display:flex; gap:10px; align-items:flex-start; color:var(--km-ink); font-size:13.5px; line-height:1.5; font-weight:600}
.dot{width:26px;height:26px;border-radius:999px;background:var(--km-ink);color:#fff;display:grid;place-items:center;font-weight:900;flex:0 0 auto; font-size:12px}
.cta{display:flex; flex-wrap:wrap; gap:12px; margin-top:18px}
.meta-row{margin-top:14px; display:flex; gap:10px; flex-wrap:wrap; align-items:center; color:var(--km-muted); font-size:11.5px}
.ticker{margin-top:16px; border:1px solid var(--km-line); background:var(--km-surface); border-radius:999px; overflow:hidden; box-shadow:var(--shadow-soft)}
.ticker-track{display:flex; gap:18px; white-space:nowrap; padding:10px 0; animation: marquee 19s linear infinite; font-weight:800; font-size:11px; color:var(--km-ink-2)}
@keyframes marquee{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}
.bento{display:grid; grid-template-columns: 1.2fr .9fr .9fr; gap:14px; margin:18px 0}
@media(max-width:980px){ .bento{grid-template-columns:1fr} }
.bento .card{background:var(--km-surface); border:1px solid var(--km-line); border-radius:22px; padding:18px; box-shadow:var(--shadow-card); position:relative; overflow:hidden}
.bento .card::after{content:""; position:absolute; inset:auto -20% -20% auto; width:180px; height:180px; border-radius:50%; background:radial-gradient(closest-side, color-mix(in srgb, var(--km-primary) 10%, transparent), transparent 70%)}
.bento .card h3{margin:10px 0 6px; font-family:var(--font-display); font-size:16px; letter-spacing:-.02em}
.bento .card p{margin:0; color:var(--km-ink-2); font-size:13px; line-height:1.5}
.iconbox{width:46px;height:46px;border-radius:16px;display:grid;place-items:center;background:var(--km-primary-soft);border:1px solid var(--km-line); font-size:18px}
.steps{display:grid; grid-template-columns:repeat(3,1fr); gap:14px}
@media(max-width:900px){ .steps{grid-template-columns:1fr} }
.step{background:var(--km-ink); color:#EAF0FF; border:1px solid rgba(255,255,255,.06); border-radius:22px; padding:18px; position:relative; overflow:hidden; box-shadow:var(--shadow-card)}
.step::after{content:""; position:absolute; inset:auto -30% -30% auto; width:220px; height:220px; border-radius:50%; background: radial-gradient(closest-side, color-mix(in srgb, var(--km-primary) 20%, transparent), transparent 70%)}
.step-num{width:32px;height:32px;border-radius:999px;background:var(--km-primary);color:#fff;display:grid;place-items:center;font-weight:900}
.section{background:var(--km-surface); border:1px solid var(--km-line); border-radius:22px; padding:18px; box-shadow:var(--shadow-card); margin-top:16px}
.section h2{margin:0 0 6px; font-family:var(--font-display); letter-spacing:-.02em}
.muted{color:var(--km-muted); font-size:12.5px}
.grid2{display:grid; grid-template-columns:1fr 1fr; gap:14px}
@media(max-width:980px){ .grid2{grid-template-columns:1fr} }
.code{font-family:var(--font-mono); font-size:11px; background:var(--km-surface-2); border:1px solid var(--km-line); border-radius:12px; padding:12px; overflow:auto}
.kbd{font-family:var(--font-mono); background:var(--km-ink); color:#EAF0FF; padding:4px 8px; border-radius:8px; border:1px solid rgba(255,255,255,.08); font-size:11px}
.footer{max-width:1220px; margin:18px auto 28px; padding:0 20px; color:var(--km-muted); font-size:11px; display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap}
/* Palette chooser */
.palette-chooser{display:flex; gap:8px; flex-wrap:wrap; align-items:center; margin:10px 0}
.palette-chooser .lab{font-weight:800; font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--km-muted)}
.palette-btn{appearance:none; border:2px solid transparent; border-radius:999px; padding:7px 13px; font-weight:800; font-size:12px; cursor:pointer; display:inline-flex; gap:7px; align-items:center; background:var(--km-surface); color:var(--km-ink); box-shadow:var(--shadow-soft); border-color:var(--km-line)}
.palette-btn.active{border-color:var(--km-primary); background:var(--km-primary-soft); color:var(--km-primary-dark); box-shadow:0 6px 18px var(--km-primary-ring)}
.palette-dot{width:14px; height:14px; border-radius:50%; border:1px solid rgba(0,0,0,.08)}
/* Device Preview — v14 clean phone */
.device-picker{display:flex; gap:8px; flex-wrap:wrap; align-items:center; margin:6px 0 2px}
.device-picker .lab{font-weight:800; font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--km-muted); margin-right:4px}
.device-picker button{appearance:none; border:1px solid var(--km-line); background:var(--km-surface); color:var(--km-ink); font-weight:800; font-size:12px; padding:8px 12px; border-radius:999px; cursor:pointer; display:inline-flex; gap:6px; align-items:center; box-shadow:var(--shadow-soft)}
.device-picker button.active{background:var(--km-ink); color:#fff; border-color:var(--km-ink); box-shadow:0 8px 18px rgba(17,27,46,.18)}
.device-stage{display:flex; justify-content:center; align-items:center; padding:10px 0 4px; min-height:420px}
.device-frame{position:relative; background:#0B0F1A; overflow:hidden; transition: all .42s cubic-bezier(.2,.8,.2,1); box-shadow:0 28px 70px rgba(0,0,0,.22), 0 0 0 1px rgba(0,0,0,.06) inset}
.device-frame.iphone{width:396px; height:760px; border-radius:44px; border:10px solid #111B2E}
.device-frame.android{width:398px; height:820px; border-radius:30px; border:7px solid #111B2E}
.device-frame.tablet{width:780px; height:560px; border-radius:20px; border:8px solid #111B2E; display:flex; flex-direction:column}
.device-frame.pc{width:100%; height:560px; border-radius:18px; border:1px solid var(--km-line); background:var(--km-surface); box-shadow:var(--shadow-card)}
.device-frame.iphone::before{content:""; position:absolute; top:0; left:50%; transform:translateX(-50%); width:150px; height:28px; background:#111B2E; border-radius:0 0 18px 18px; z-index:3}
.device-screen{flex:1; display:flex; flex-direction:column; background:var(--km-bg); overflow:hidden; position:relative; width:100%; height:100%}
.device-frame.pc .device-screen{border-radius:18px}
.device-topbar{background:var(--km-primary); color:#fff; padding:10px 12px; display:flex; align-items:center; justify-content:space-between; gap:10px}
.device-topbar .left{display:flex; gap:10px; align-items:center}
.device-topbar .avatar{width:36px; height:36px; border-radius:50%; background:#fff; color:var(--km-primary); display:grid; place-items:center; font-weight:900}
.device-topbar .title{font-weight:800; font-size:14px; line-height:1}
.device-topbar .sub{font-size:11px; opacity:.92}
.device-messages{flex:1; overflow:auto; padding:14px; display:flex; flex-direction:column; gap:10px; background: var(--km-bg) radial-gradient(circle at 16px 16px, rgba(17,27,46,.06) 1px, transparent 1px); background-size:28px 28px}
[data-palette="mond"] .device-messages{ background: var(--km-bg) radial-gradient(circle at 16px 16px, rgba(255,255,255,.05) 1px, transparent 1px); background-size:28px 28px}
.km-bubble{max-width:76%; padding:11px 13px; border-radius:20px; font-size:13.5px; line-height:1.45; box-shadow:0 2px 10px rgba(17,27,46,.08); position:relative; word-break:break-word}
.km-bubble.me{align-self:flex-end; background:var(--km-primary); color:#fff; border-bottom-right-radius:6px; box-shadow:0 8px 18px color-mix(in srgb, var(--km-primary) 22%, transparent)}
.km-bubble.other{align-self:flex-start; background:var(--km-surface); border:1px solid var(--km-line); color:var(--km-ink); border-bottom-left-radius:6px}
.km-bubble.system{align-self:center; background:var(--km-secondary-soft); border:1px dashed var(--km-line); color:var(--km-ink-2); font-size:12px; max-width:82%; border-radius:14px}
.km-bubble .meta{font-size:10.5px; opacity:.75; display:flex; gap:4px; align-items:center; justify-content:flex-end; margin-top:5px}
.km-bubble.me .meta{color:rgba(255,255,255,.88)}
.km-bubble.filtered{outline:2px dashed color-mix(in srgb, var(--km-primary) 28%, transparent); outline-offset:1px}
.km-filter-mark{display:inline-flex; align-items:center; gap:4px; padding:2px 8px; border-radius:999px; background:var(--km-ink); color:#fff; font-size:11px; font-weight:800; letter-spacing:.02em}
.km-filter-mark .sym{padding:1px 6px; border-radius:999px; background:rgba(255,255,255,.14); font-family:var(--font-mono)}
.device-composer{background:var(--km-surface-2); padding:8px; display:flex; gap:8px; align-items:center; border-top:1px solid var(--km-line)}
.device-composer input{flex:1; border:none; background:var(--km-surface); border-radius:999px; padding:11px 14px; font-size:13px; outline:none; border:1px solid var(--km-line); font-family:inherit; color:var(--km-ink)}
.device-composer button{width:42px; height:42px; border-radius:50%; border:none; background:var(--km-primary); color:#fff; display:grid; place-items:center; cursor:pointer; box-shadow:0 8px 18px color-mix(in srgb, var(--km-primary) 26%, transparent); font-size:18px}
.sound-toggle{font-size:11px; display:flex; gap:6px; align-items:center; color:var(--km-muted)}
/* App-shell — v14 Studio: Glas-Header + Card-Sidebar */
.km-app{height:100vh; display:flex; flex-direction:column; background:var(--km-bg); color:var(--km-ink)}
.km-app-header{height:68px; background:var(--km-ink); color:#fff; display:flex; align-items:center; justify-content:space-between; padding:0 16px; gap:12px; border-bottom:1px solid rgba(255,255,255,.08); position:sticky; top:0; z-index:20; box-shadow:0 10px 28px rgba(0,0,0,.18)}
.km-app-header .brand-mini{display:flex; gap:12px; align-items:center}
.km-app-header .brand-mini svg{width:30px; height:30px; border-radius:12px}
.km-app-header h1{margin:0; font-size:17px; font-weight:800; letter-spacing:-.03em; font-family:var(--font-display)}
.km-app-header .hdr-actions{display:flex; gap:8px; align-items:center}
.km-app-header .iconbtn{width:38px; height:38px; border-radius:50%; background:rgba(255,255,255,.09); border:1px solid rgba(255,255,255,.10); color:#fff; display:grid; place-items:center; cursor:pointer; font-size:18px; backdrop-filter:blur(8px)}
.km-app-header .iconbtn:hover{background:rgba(255,255,255,.14)}
.km-layout{display:grid; grid-template-columns: 380px 1fr; height: calc(100vh - 68px); background:transparent; overflow:hidden; gap:14px; padding:14px; align-items:stretch}
@media(max-width:980px){ .km-layout{grid-template-columns:1fr; grid-template-rows: 42% 1fr; padding:10px} .km-sidebar{border-right:none}}
.km-sidebar{background:var(--km-surface); border:1px solid var(--km-line); border-radius:24px; display:flex; flex-direction:column; overflow:hidden; box-shadow:var(--shadow-card)}
.km-tabs{display:flex; background:var(--km-surface-2); padding:6px; gap:6px; overflow:auto; border-bottom:1px solid var(--km-line)}
.km-tabs button{flex:1; min-width:64px; padding:10px 8px; background:transparent; border:1px solid transparent; color:var(--km-ink-2); font-weight:800; font-size:13px; cursor:pointer; border-radius:999px; display:flex; gap:6px; align-items:center; justify-content:center; white-space:nowrap; transition:.14s}
.km-tabs button.active{color:var(--km-ink); background:var(--km-surface); border-color:var(--km-line); box-shadow:var(--shadow-soft)}
[data-palette="mond"] .km-tabs{background:rgba(255,255,255,.04); border-bottom-color:rgba(255,255,255,.07)}
[data-palette="mond"] .km-tabs button{color:var(--km-muted)}
[data-palette="mond"] .km-tabs button.active{background:rgba(255,255,255,.08); color:#fff; border-color:rgba(255,255,255,.10)}
.km-search{padding:12px; background:transparent; border-bottom:1px solid var(--km-line)}
.km-search .row{display:flex; gap:8px}
.km-search input{flex:1; padding:11px 14px; border-radius:999px; border:1px solid var(--km-line); background:var(--km-surface-2); font-size:13px; box-shadow:0 1px 4px rgba(0,0,0,.04); outline:none; font-family:inherit; color:var(--km-ink)}
.km-search input:focus{border-color:var(--km-primary); box-shadow:0 0 0 4px var(--km-primary-ring); background:var(--km-surface)}
.km-search input::placeholder{color:var(--km-muted)}
.km-search .km-btn{padding:10px 14px; font-size:12px}
.km-list{overflow:auto; flex:1; background:transparent}
.km-empty{padding:28px 16px; text-align:center; color:var(--km-muted); font-size:13px}
.km-item{display:flex; gap:12px; padding:12px 14px; cursor:pointer; border-bottom:1px solid var(--km-line-2); align-items:center; transition:background .14s, transform .14s}
.km-item:hover{background:var(--km-surface-2)}
.km-item.active{background:var(--km-primary-soft); border-left:3px solid var(--km-primary)}
[data-palette="mond"] .km-item:hover{background:rgba(255,255,255,.04)}
[data-palette="mond"] .km-item.active{background:rgba(255,107,69,.12); border-left-color:var(--km-primary)}
.km-item .avatar{width:50px; height:50px; border-radius:50%; background:var(--km-surface-2); color:var(--km-ink-2); display:grid; place-items:center; font-weight:900; flex:0 0 auto; font-size:16px; position:relative; overflow:hidden; border:1px solid var(--km-line); box-shadow:var(--shadow-soft)}
.km-item .avatar img{width:100%;height:100%;object-fit:cover}
.km-item .main{flex:1; overflow:hidden}
.km-item .top{display:flex; justify-content:space-between; gap:8px; align-items:center}
.km-item .name{font-weight:800; font-size:14px; color:var(--km-ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; display:flex; gap:6px; align-items:center}
.km-item .time{font-size:11px; color:var(--km-muted); flex:0 0 auto; font-weight:700}
.km-item .preview{font-size:12.5px; color:var(--km-muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; display:flex; gap:6px; align-items:center}
.km-badge{font-size:10px; font-weight:800; padding:4px 8px; border-radius:999px; background:var(--km-primary); color:#fff; display:inline-flex; align-items:center; gap:4px; letter-spacing:.02em}
.km-badge.muted{background:var(--km-surface-2); color:var(--km-ink-2); border:1px solid var(--km-line)}
.km-badge.owner{background:var(--km-ink); color:#fff}
.km-badge.admin{background:var(--km-ink-2); color:#fff}
.km-badge.private{background:var(--km-secondary); color:var(--km-secondary-ink)}
.km-notif-dot{width:8px; height:8px; border-radius:50%; background:var(--km-danger); display:inline-block}
.km-main{position:relative; display:flex; flex-direction:column; background:var(--km-surface); border:1px solid var(--km-line); border-radius:24px; overflow:hidden; box-shadow:var(--shadow-card)}
.km-chat-head{height:64px; background:var(--km-surface); border-bottom:1px solid var(--km-line); display:flex; align-items:center; justify-content:space-between; padding:8px 14px; gap:10px}
.km-chat-head .left{display:flex; gap:12px; align-items:center; overflow:hidden}
.km-chat-head .avatar{width:44px; height:44px; border-radius:50%; background:var(--km-surface-2); display:grid; place-items:center; font-weight:900; color:var(--km-ink-2); border:1px solid var(--km-line); flex:0 0 auto; overflow:hidden}
.km-chat-head .title{font-weight:800; font-size:15px; color:var(--km-ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.km-chat-head .sub{font-size:12px; color:var(--km-muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; display:flex; gap:6px; align-items:center; font-weight:600}
.km-chat-head .online-dot{width:8px; height:8px; border-radius:50%; background:var(--km-success); box-shadow:0 0 0 4px var(--km-accent-soft); display:inline-block}
.km-chat-head .actions{display:flex; gap:6px; align-items:center}
.km-messages{flex:1; overflow:auto; padding:18px 16px; display:flex; flex-direction:column; gap:12px; background: var(--km-bg); position:relative}
.km-messages::before{content:""; position:absolute; inset:0; background-image: radial-gradient(circle at 1px 1px, color-mix(in srgb, var(--km-ink) 6%, transparent) 1px, transparent 0); background-size:28px 28px; mask: radial-gradient(900px 600px at 30% 20%, #000 28%, transparent 76%); pointer-events:none}
@media(max-width:900px){ .km-messages{padding:14px 12px} }
.km-composer{background:var(--km-surface); padding:10px 12px; display:flex; gap:8px; align-items:flex-end; border-top:1px solid var(--km-line)}
.km-composer .input-wrap{flex:1; display:flex; align-items:flex-end; gap:8px; background:var(--km-surface-2); border:1px solid var(--km-line); border-radius:24px; padding:6px 10px; transition:border-color .14s, box-shadow .14s}
.km-composer .input-wrap:focus-within{border-color:var(--km-primary); box-shadow:0 0 0 4px var(--km-primary-ring); background:var(--km-surface)}
.km-composer textarea{flex:1; border:none; outline:none; resize:none; font-size:14px; line-height:1.45; max-height:96px; min-height:24px; font-family:inherit; background:transparent; padding:7px 2px; color:var(--km-ink)}
.km-composer textarea::placeholder{color:var(--km-muted)}
.km-composer .send{width:46px; height:46px; border-radius:50%; border:none; cursor:pointer; display:grid; place-items:center; font-size:20px; background:var(--km-primary); color:#fff; box-shadow:0 8px 18px color-mix(in srgb, var(--km-primary) 26%, transparent); flex:0 0 auto}
.km-composer .attach{width:42px; height:42px; border-radius:50%; border:1px solid var(--km-line); background:var(--km-surface); color:var(--km-ink-2); display:grid; place-items:center; cursor:pointer; font-size:18px; flex:0 0 auto}
.km-context{position:fixed; z-index:50; background:var(--km-surface); border:1px solid var(--km-line); border-radius:16px; box-shadow:var(--shadow-float); overflow:hidden; min-width:160px}
.km-context button{display:flex; gap:8px; align-items:center; width:100%; padding:11px 12px; border:none; background:var(--km-surface); cursor:pointer; font-weight:700; font-size:13px; text-align:left; color:var(--km-ink)}
.km-context button:hover{background:var(--km-surface-2)}
.km-context button.danger{color:var(--km-danger); background:var(--km-danger-soft)}
/* Menus */
.km-menu{position:fixed; z-index:50; background:var(--km-surface); border:1px solid var(--km-line); border-radius:16px; box-shadow:var(--shadow-float); overflow:hidden; min-width:220px}
.km-menu button{display:flex; gap:10px; align-items:center; width:100%; padding:12px 14px; border:none; background:var(--km-surface); cursor:pointer; font-weight:600; font-size:13px; text-align:left; border-bottom:1px solid var(--km-line-2); color:var(--km-ink)}
.km-menu button:last-child{border-bottom:none}
.km-menu button:hover{background:var(--km-surface-2)}
.km-menu button.danger{color:var(--km-danger)}
.km-menu .sep{height:1px; background:var(--km-line); margin:4px 0}
.km-drawer{position:absolute; top:0; right:0; bottom:0; width:360px; max-width:92%; background:var(--km-surface); border-left:1px solid var(--km-line); box-shadow:-16px 0 40px rgba(0,0,0,.14); z-index:8; display:flex; flex-direction:column; transform:translateX(100%); transition: transform .28s ease}
.km-drawer.open{transform:translateX(0)}
.km-drawer-head{height:60px; background:var(--km-surface-2); display:flex; align-items:center; gap:12px; padding:0 14px; border-bottom:1px solid var(--km-line)}
.km-drawer-body{overflow:auto; padding:14px; display:flex; flex-direction:column; gap:14px}
.km-card{background:var(--km-surface); border:1px solid var(--km-line); border-radius:20px; padding:16px; box-shadow:var(--shadow-soft)}
.km-card h3{margin:0 0 8px; font-size:13px; font-weight:800; color:var(--km-ink); display:flex; align-items:center; gap:8px; font-family:var(--font-display)}
/* Call */
.km-call{position:absolute; inset:0; background:var(--km-ink); color:#fff; z-index:9; display:flex; flex-direction:column; overflow:hidden}
.km-call-top{padding:18px; display:flex; flex-direction:column; align-items:center; gap:6px; text-align:center; background: linear-gradient(180deg, rgba(255,255,255,.06), transparent)}
.km-call-avatar{width:96px; height:96px; border-radius:28px; background:#fff; color:var(--km-ink); display:grid; place-items:center; font-size:36px; font-weight:900; box-shadow:0 16px 36px rgba(0,0,0,.28); overflow:hidden; border:3px solid rgba(255,255,255,.16)}
.km-call-name{font-weight:800; font-size:18px; margin-top:6px; font-family:var(--font-display)}
.km-call-sub{font-size:12px; opacity:.82}
.km-call-stage{flex:1; position:relative; display:grid; place-items:center; background: radial-gradient(600px 400px at 50% 30%, rgba(255,255,255,.06), transparent 70%)}
.km-call-video{position:absolute; inset:10px; display:grid; grid-template-columns:1fr 1fr; gap:10px}
@media(max-width:700px){ .km-call-video{grid-template-columns:1fr; grid-template-rows:1fr 1fr} }
.km-video-tile{position:relative; background:#0F1A2A; border-radius:18px; overflow:hidden; display:grid; place-items:center; border:1px solid rgba(255,255,255,.12)}
.km-video-tile video{width:100%; height:100%; object-fit:cover; background:#0B1220}
.km-video-tile .label{position:absolute; bottom:8px; left:8px; background:rgba(0,0,0,.55); color:#fff; font-size:11px; font-weight:800; padding:4px 8px; border-radius:999px}
.km-video-tile .no-cam{position:absolute; inset:0; display:grid; place-items:center; text-align:center; padding:16px; background: radial-gradient(circle at 30% 20%, #2A3446, #0F1A2A); color:#E2E8F0; font-size:13px; font-weight:700}
.km-call-bar{padding:14px 12px 18px; display:flex; flex-direction:column; gap:12px; background: linear-gradient(0deg, rgba(0,0,0,.26), transparent)}
.km-call-controls{display:flex; gap:10px; justify-content:center; align-items:center; flex-wrap:wrap}
.km-call-controls .km-btn-icon{width:52px; height:52px; font-size:20px}
.km-call-controls .end{width:64px; height:64px; background:var(--km-danger); color:#fff; border-color:var(--km-danger); font-size:26px; box-shadow:0 12px 26px rgba(232,74,60,.36)}
.km-call-input{margin:0 auto; max-width:560px; width:100%; display:flex; gap:8px; align-items:center; background:#fff; border-radius:999px; padding:6px 8px 6px 14px; box-shadow:var(--shadow-float); transform: translateY(0); transition: transform .28s ease, opacity .28s ease}
.km-call-input.hidden-anim{transform: translateY(110%); opacity:0; pointer-events:none; position:absolute}
.km-call-input input{flex:1; border:none; outline:none; font-size:14px; font-family:inherit; color:var(--km-ink)}
.km-call-input button{width:44px; height:44px; border-radius:50%; border:none; background:var(--km-primary); color:#fff; display:grid; place-items:center; cursor:pointer; font-size:18px}
.speaking{font-size:11px; font-weight:800; color:#fff; background:var(--km-accent-strong); padding:4px 8px; border-radius:999px; display:inline-flex; gap:6px; align-items:center}
.speaking .dots{display:inline-flex; gap:2px}
.speaking .dots i{width:4px; height:4px; border-radius:50%; background:#fff; animation: speak 1s infinite}
.speaking .dots i:nth-child(2){animation-delay:.15s}
.speaking .dots i:nth-child(3){animation-delay:.3s}
@keyframes speak{0%,100%{opacity:.4; transform:translateY(0)}50%{opacity:1; transform:translateY(-3px)}}
.km-incoming{position:absolute; inset:0; background: color-mix(in srgb, var(--km-ink) 96%, transparent); color:#fff; z-index:10; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:18px; text-align:center; padding:22px}
.km-incoming .avatar-big{width:120px; height:120px; border-radius:32px; background:#fff; color:var(--km-ink); display:grid; place-items:center; font-size:40px; font-weight:900; box-shadow:0 20px 44px rgba(0,0,0,.34); border:3px solid rgba(255,255,255,.14)}
.km-incoming .actions{display:flex; gap:24px; margin-top:8px}
.km-incoming .call-btn{width:72px; height:72px; border-radius:50%; border:none; display:grid; place-items:center; font-size:28px; cursor:pointer; box-shadow:0 12px 26px rgba(0,0,0,.28)}
.km-incoming .call-btn.accept{background:var(--km-accent); color:#062A27; border:2px solid rgba(255,255,255,.12)}
.km-incoming .call-btn.reject{background:var(--km-danger); color:#fff}
/* Elternbereich */
.eltern-wrap{padding:14px; display:flex; flex-direction:column; gap:14px; overflow:auto; background:transparent}
.eltern-kachel{display:flex; gap:12px; padding:14px; border-radius:18px; background:var(--km-surface); border:1px solid var(--km-line); box-shadow:var(--shadow-card); cursor:pointer; align-items:center}
.eltern-kachel:hover{border-color:var(--km-primary); box-shadow:0 10px 28px color-mix(in srgb, var(--km-primary) 10%, transparent)}
.eltern-kachel .av{width:52px; height:52px; border-radius:16px; background:var(--km-primary-soft); color:var(--km-primary-dark); display:grid; place-items:center; font-weight:900; font-size:18px}
.eltern-detail{background:var(--km-surface); border:1px solid var(--km-line); border-radius:18px; overflow:hidden; box-shadow:var(--shadow-card)}
.eltern-tabs{display:flex; gap:0; border-bottom:1px solid var(--km-line); overflow:auto; background:var(--km-surface-2)}
.eltern-tabs button{flex:1; padding:10px 8px; border:none; background:transparent; font-weight:800; font-size:12px; cursor:pointer; border-bottom:3px solid transparent; color:var(--km-muted); white-space:nowrap}
.eltern-tabs button.active{color:var(--km-ink); border-bottom-color:var(--km-primary); background:var(--km-surface)}
.eltern-pane{padding:14px}
.map-mock{height:220px; border-radius:14px; border:1px solid var(--km-line); background:
  linear-gradient(90deg, rgba(17,27,46,.06) 1px, transparent 1px),
  linear-gradient(rgba(17,27,46,.06) 1px, transparent 1px),
  linear-gradient(180deg, #EAF4FF 0, #FFF9F0 100%);
  background-size:22px 22px, 22px 22px, 100% 100%; position:relative; overflow:hidden}
.map-pin{position:absolute; width:10px; height:10px; border-radius:50%; background:var(--km-primary); border:2px solid #fff; box-shadow:0 4px 10px rgba(0,0,0,.18)}
.map-line{position:absolute; height:2px; background:var(--km-primary); opacity:.7; transform-origin:left center}
.chat-muted{opacity:.55; filter: grayscale(.2)}
.chat-muted .km-bubble.other{background:#F1F5F9; color:#6B7A90; border:1px dashed #E2E8F0}
/* Inputs v14 — weich, 2px Fokus-Ring */
.km-input{width:100%; padding:11px 14px; border:1px solid var(--km-line); border-radius:var(--radius-input); font-size:13.5px; background:var(--km-surface); outline:none; font-family:inherit; color:var(--km-ink); transition:border-color .14s, box-shadow .14s, background .14s}
.km-input:focus{border-color:var(--km-primary); box-shadow:0 0 0 4px var(--km-primary-ring); background:var(--km-surface)}
.km-input::placeholder{color:var(--km-muted)}
.km-label{font-size:11px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; color:var(--km-muted); margin:10px 0 6px; display:block}
/* Dialog v14 — Glas, großzügig */
dialog::backdrop{background:rgba(7,12,30,.52); backdrop-filter: blur(12px)}
dialog{border:1px solid var(--km-line); padding:0; background:var(--km-surface); border-radius:20px; box-shadow:var(--shadow-float); max-width:min(560px, 92vw); color:var(--km-ink)}
dialog[open]{animation: dlgIn .20s ease}
@keyframes dlgIn{0%{transform: translateY(10px) scale(.98); opacity:0}100%{transform:none; opacity:1}}
/* Login — v14 Atelier: Split-Card + Studio-Header */
.km-login{max-width:980px; margin:22px auto; background: var(--km-surface); border:1px solid var(--km-line); border-radius:32px; padding:0; box-shadow:var(--shadow-float); position:relative; overflow:hidden; display:grid; grid-template-columns: 1.06fr .94fr}
@media(max-width:900px){ .km-login{grid-template-columns:1fr} }
.km-login-hero{padding:28px 26px; background: linear-gradient(180deg, var(--km-surface-2) 0, var(--km-surface) 100%); border-right:1px solid var(--km-line); position:relative; overflow:hidden}
.km-login-hero::after{content:""; position:absolute; right:-40px; top:-40px; width:340px; height:340px; border-radius:50%; background: radial-gradient(closest-side, color-mix(in srgb, var(--km-primary) 10%, transparent), transparent 70%); pointer-events:none}
.km-login-form{padding:22px; background:var(--km-surface)}
.km-login h2{margin:0 0 8px; font-family:var(--font-display); font-size:28px; letter-spacing:-.03em; line-height:.95}
.km-login h2 .grad{letter-spacing:-.03em}
.login-choice{display:grid; grid-template-columns:1fr 1fr; gap:16px; margin:16px 0}
@media(max-width:640px){ .login-choice{grid-template-columns:1fr} }
.choice-card{position:relative; border:2px solid var(--km-line); border-radius:22px; padding:18px; background:var(--km-surface); cursor:pointer; display:flex; flex-direction:column; gap:12px; overflow:hidden; transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease; text-align:left; min-height: 360px}
.choice-card:hover{transform:translateY(-6px); box-shadow:var(--shadow-float); border-color:var(--km-primary-ring)}
.choice-card:focus-visible{outline:3px solid var(--km-primary-ring); outline-offset:2px}
.choice-card.kind{border-color:var(--km-primary-ring); background:var(--km-surface)}
.choice-card.parent{border-color:var(--km-line); background: linear-gradient(180deg, var(--km-surface) 0, var(--km-surface-2) 100%)}
.choice-card .choice-illu{width:100%; height:178px; border-radius:18px; display:grid; place-items:center; position:relative; overflow:hidden; border:1px solid var(--km-line); flex:0 0 auto}
.choice-card.kind .choice-illu{background: #FF9E2E}
.choice-card.parent .choice-illu{background: #5AA9E6}
.choice-card .choice-illu::after{content:""; position:absolute; inset:0; background-image: radial-gradient(circle at 1px 1px, rgba(255,255,255,.18) 1px, transparent 0); background-size:18px 18px; opacity:.55; pointer-events:none}
.choice-card .choice-illu svg{width:150px; height:150px; filter: drop-shadow(0 12px 24px rgba(0,0,0,.28)); position:relative; z-index:1}
.choice-card .choice-tag{position:absolute; top:12px; right:12px; background:rgba(255,255,255,.96); color:var(--km-ink); font-size:11px; font-weight:800; padding:6px 10px; border-radius:999px; border:1px solid rgba(0,0,0,.06); box-shadow:0 6px 16px rgba(0,0,0,.12); z-index:2; letter-spacing:.01em}
.choice-card .choice-title{margin:0; font-weight:900; font-size:18px; line-height:1.15; font-family:var(--font-display); letter-spacing:-.01em; color:var(--km-ink)}
.choice-card .choice-desc{margin:0; font-size:13px; line-height:1.5; color:var(--km-ink-2)}
.choice-card ul{margin:0; padding:0; list-style:none; display:grid; gap:7px}
.choice-card ul li{display:flex; gap:8px; align-items:center; font-size:12.5px; font-weight:700; color:var(--km-ink)}
.choice-card ul li i{width:22px; height:22px; border-radius:999px; display:grid; place-items:center; font-style:normal; font-size:12px; flex:0 0 auto; border:1px solid var(--km-line)}
.choice-card.kind ul li i{background:var(--km-primary-soft); color:var(--km-primary-dark); border-color:#FFD9CE}
.choice-card.parent ul li i{background:#EEF2FF; color:#2F415E; border-color:#DCE6FF}
.choice-card .choice-actions{margin-top:auto; padding-top:4px; display:flex; flex-direction:column; gap:6px}
.choice-card .choice-meta{font-size:11px; color:var(--km-muted)}
.choice-card .ico{width:44px; height:44px; border-radius:14px; display:grid; place-items:center; font-size:22px}
.choice-card.kind .ico{background:var(--km-primary); color:#fff}
.choice-card.parent .ico{background:var(--km-ink); color:#fff}
.km-field{margin:10px 0}
.km-toast{position:fixed; bottom:18px; left:50%; transform:translateX(-50%); background:var(--km-ink); color:#fff; padding:11px 16px; border-radius:999px; font-size:13px; font-weight:700; box-shadow:var(--shadow-float); z-index:99; display:none}
.km-toast.show{display:block; animation: toastIn .2s ease}
@keyframes toastIn{0%{transform:translate(-50%, 8px); opacity:0}100%{transform:translate(-50%,0); opacity:1}}
/* Utils */
.hidden{display:none !important}
.mono{font-family:var(--font-mono); font-size:11px}
/* === Licht tief integriert: echte GUI-Flächen in allen Paletten === */
[data-palette="mond"] .km-card, [data-palette="mond"] .km-chat-head,
[data-palette="mond"] .km-composer, [data-palette="mond"] .km-drawer,
[data-palette="mond"] .km-menu, [data-palette="mond"] .km-context,
[data-palette="mond"] .km-list, [data-palette="mond"] .km-sidebar,
[data-palette="mond"] .hero-card, [data-palette="mond"] .bento .card,
[data-palette="mond"] .section, [data-palette="mond"] .eltern-kachel,
[data-palette="mond"] .eltern-detail, [data-palette="mond"] .km-main,
[data-palette="mond"] .km-layout, [data-palette="mond"] .km-login{ background: var(--km-surface); border-color: var(--km-line); color: var(--km-ink); }
[data-palette="mond"] .km-login-hero{ background: linear-gradient(180deg, var(--km-surface-2) 0, var(--km-surface) 100%)}
[data-palette="mond"] .km-input{ background: var(--km-surface-2); border-color: var(--km-line); color: var(--km-ink); }
[data-palette="mond"] .km-input::placeholder{ color: var(--km-muted); }
[data-palette="mond"] .km-messages{ background: var(--km-bg); }
[data-palette="mond"] .km-bubble.other{ background: var(--km-surface-2); border-color: var(--km-line); color: var(--km-ink); }
[data-palette="mond"] dialog{ background: var(--km-surface); border-color: var(--km-line); color: var(--km-ink); }
[data-palette="daemmerung"] .km-card, [data-palette="dämmerung"] .km-card,
[data-palette="daemmerung"] .km-chat-head, [data-palette="dämmerung"] .km-chat-head{
  background: var(--km-surface); border-color: var(--km-line);
}
/* v14 App: Chips + Banner neu */
.km-login-chip{display:inline-flex; gap:6px; align-items:center; font-size:11px; font-weight:800; padding:6px 10px; border-radius:999px; border:1px solid var(--km-line); background:var(--km-surface-2); color:var(--km-ink-2)}
.km-login-chip b{color:var(--km-ink)}
.km-banner-no-parents{margin:12px; padding:14px; background:var(--km-surface-2); border:1px dashed var(--km-primary); border-radius:18px; cursor:pointer; text-align:center; box-shadow:var(--shadow-soft)}
.km-banner-no-parents:hover{transform:translateY(-1px); box-shadow:var(--shadow-card)}
/* PROGRAM vs WEB sichtbar: kleines Ribbon wenn App-Fenster */
body.is-app .km-app-header{ border-bottom: 3px solid var(--km-primary); }
body.is-app .km-app-header::after{
  content: "▣ PROGRAMM – App-Fenster ( --app ) • gleiche Daten wie WEB";
  position:absolute; right:14px; top:10px;
  font-size:10px; font-weight:800; letter-spacing:.03em;
  background:var(--km-primary); color:#fff;
  padding:4px 10px; border-radius:999px; border:1px solid rgba(255,255,255,.18);
  box-shadow:0 6px 14px rgba(0,0,0,.18);
}
@media(max-width:900px){
  body.is-app .km-app-header::after{ display:none; }
}
/* Splash subtle */
@keyframes kmFadeIn{ from{opacity:0; transform:translateY(6px)} to{opacity:1; transform:none} }
.km-login, .hero-card, .bento .card, .section{ animation: kmFadeIn .32s ease both }
/* ===== LOGIN ROT-SCHWARZ GEMISCHT + ORANGE PARTIKEL (nur Anmeldung) ===== */
.km-login-bg{
  position:fixed; inset:0; z-index:0;
  background:
    radial-gradient(1200px 800px at 16% 8%, rgba(255,38,18,.42) 0, transparent 62%),
    radial-gradient(1000px 700px at 86% 14%, rgba(180,18,18,.32) 0, transparent 64%),
    radial-gradient(900px 700px at 50% 88%, rgba(255,78,22,.18) 0, transparent 68%),
    radial-gradient(680px 520px at 32% 72%, rgba(255,90,32,.14) 0, transparent 66%),
    linear-gradient(142deg, #070708 0%, #0F0A0A 14%, #1A0A0A 28%, #2B0F0C 42%, #1A0706 58%, #0B0B0C 78%, #000000 100%);
  overflow:hidden;
  transition: opacity .45s ease, visibility .45s ease;
}
.km-login-bg::after{
  content:""; position:absolute; inset:0;
  background-image:
    linear-gradient(rgba(255,255,255,.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.03) 1px, transparent 1px);
  background-size:36px 36px;
  mask: radial-gradient(1100px 700px at 30% 18%, #000 30%, transparent 80%);
  opacity:.38; pointer-events:none;
}
.km-login-bg.hiddenBg{ opacity:0; visibility:hidden; pointer-events:none; }
.km-login-orb{ position:absolute; border-radius:50%; filter:blur(38px); opacity:.9; mix-blend-mode:screen; pointer-events:none }
.km-login-orb.a{ width:740px; height:740px; left:-160px; top:-140px; background: radial-gradient(closest-side, rgba(255,42,22,.24), transparent 72%); animation: kmLoginA 11s ease infinite alternate }
.km-login-orb.b{ width:880px; height:880px; right:-180px; top:60px; background: radial-gradient(closest-side, rgba(255,120,36,.18), transparent 72%); animation: kmLoginB 13s ease infinite alternate }
.km-login-orb.c{ width:780px; height:780px; left:28%; bottom:-220px; background: radial-gradient(closest-side, rgba(255,60,22,.15), transparent 72%); animation: kmLoginA 15s ease infinite alternate }
@keyframes kmLoginA{0%{transform:translate(0,0) scale(1)}100%{transform:translate(18px,-16px) scale(1.05)}}
@keyframes kmLoginB{0%{transform:translate(0,0) scale(1)}100%{transform:translate(-18px,14px) scale(1.06)}}
#kmLoginParticles{ position:absolute; inset:0; width:100%; height:100%; display:block; opacity:.96 }
#loginView{ position:relative; z-index:1; overflow:visible }
#loginView .km-login-form{ overflow:visible }
/* Login-Karte zentrieren — „bei Hälfte ab“ fix: Karte mittig, nicht oben geklebt */
body.has-login-bg{ min-height:100vh; min-height:100dvh; min-height:100svh; display:flex; flex-direction:column }
body.has-login-bg #loginView{
  margin:auto !important;
  align-self:center;
  width:min(420px, calc(100vw - 32px));
  max-width:420px;
}
@media (max-height: 560px){
  body.has-login-bg #loginView{ margin:16px auto !important; }
}
@media (max-width: 440px){
  body.has-login-bg #loginView{ width:calc(100vw - 22px); }
}
body.has-login-bg .km-app-header{
  background: rgba(17,27,46,.72) !important;
  backdrop-filter: blur(18px) saturate(1.1);
  border-bottom-color: rgba(255,255,255,.08);
}
body.has-login-bg{
  background: #070708;
}
/* bei Anmeldung keine Pillen im Header — v17 fix: inline-style überschreiben + komplett verstecken */
body.has-login-bg #paletteBadge,
body.has-login-bg #appModeBadge{
  display:none !important; visibility:hidden !important; opacity:0 !important;
}
body.has-login-bg .brand-mini > div > div{ display:none !important; }