@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;
  /* v30: EINE Quelle für den Anmelde-Hintergrund – der Chat benutzt genau denselben Look */
  --km-login-bg:
    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%);
  --km-chat-bg:var(--km-login-bg);
  --km-chat-dots:rgba(255,235,225,.20);
  --km-chat-grid:rgba(255,255,255,.03);
  --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;
  -webkit-mask: radial-gradient(1100px 700px at 30% 18%, #000 30%, transparent 78%);
  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; -webkit-backdrop-filter: blur(18px) saturate(1.12); backdrop-filter: blur(18px) saturate(1.12); background: rgba(255,255,255,.86); 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: rgba(16,26,51,.92); 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:#080808; overflow:hidden; position:relative; width:100%; height:100%}
.device-frame.pc .device-screen{border-radius:18px}
.device-topbar{background:#0B0B0E; color:#fff; padding:10px 12px; display:flex; align-items:center; justify-content:space-between; gap:10px; border-bottom:1px solid #222}
.device-topbar .left{display:flex; gap:10px; align-items:center}
.device-topbar .avatar{width:36px; height:36px; border-radius:50%; background:#fff; color:#FF5A2E; display:grid; place-items:center; font-weight:900}
.device-topbar .title{font-weight:800; font-size:14px; line-height:1; color:#FFFFFF}
.device-topbar .sub{font-size:11px; opacity:.92; color:#A8B0C0}
.device-messages{flex:1; overflow:auto; padding:14px; display:flex; flex-direction:column; gap:10px; position:relative; background:
    radial-gradient(900px 600px at 14% 10%, rgba(255,38,18,.42) 0, transparent 62%),
    radial-gradient(800px 600px at 86% 14%, rgba(255,120,30,.34) 0, transparent 64%),
    radial-gradient(700px 560px at 52% 88%, rgba(180,16,12,.24) 0, transparent 68%),
    linear-gradient(142deg, #070708 0%, #140A0A 22%, #2A0F0C 48%, #0F0706 78%, #000000 100%)}
.device-messages::before{content:""; position:absolute; inset:0; background-image: radial-gradient(circle at 1px 1px, rgba(255,255,255,.05) 1px, transparent 0); background-size:28px 28px; -webkit-mask: radial-gradient(900px 600px at 30% 20%, #000 32%, transparent 78%); mask: radial-gradient(900px 600px at 30% 20%, #000 32%, transparent 78%); pointer-events:none; opacity:.42}
[data-palette="mond"] .device-messages, [data-palette="daemmerung"] .device-messages, [data-palette="sonne"] .device-messages, [data-palette="dämmerung"] .device-messages{ background:
    radial-gradient(900px 600px at 14% 10%, rgba(255,38,18,.42) 0, transparent 62%),
    radial-gradient(800px 600px at 86% 14%, rgba(255,120,30,.34) 0, transparent 64%),
    radial-gradient(700px 560px at 52% 88%, rgba(180,16,12,.24) 0, transparent 68%),
    linear-gradient(142deg, #070708 0%, #140A0A 22%, #2A0F0C 48%, #0F0706 78%, #000000 100%)}
.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(0,0,0,.18); position:relative; word-break:break-word}
.km-bubble.me{align-self:flex-end; background:#FFFFFF; color:#111B2E; border:1px solid rgba(0,0,0,.08); border-bottom-right-radius:6px; box-shadow:0 8px 18px rgba(0,0,0,.14)}
.km-bubble.other{align-self:flex-start; background:#FFFFFF; border:1px solid rgba(0,0,0,.10); color:#111B2E; border-bottom-left-radius:6px; box-shadow:0 2px 10px rgba(0,0,0,.12)}
.km-bubble.system{align-self:center; background:rgba(255,255,255,.92); border:1px dashed rgba(0,0,0,.10); color:#2F425F; font-size:12px; max-width:82%; border-radius:14px}
.km-bubble .meta{font-size:10.5px; opacity:.70; display:flex; gap:4px; align-items:center; justify-content:flex-end; margin-top:5px; color:var(--km-muted)}
.km-bubble.me .meta{color:#6B7A90}
.km-bubble.filtered{outline:2px dashed rgba(255,90,46,.35); 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:#0B0B0E; padding:8px; display:flex; gap:8px; align-items:center; border-top:1px solid #222}
.device-composer input{flex:1; border:none; background:#1A1A1E; border-radius:999px; padding:11px 14px; font-size:13px; outline:none; border:1px solid #2A2A2E; font-family:inherit; color:#F1F5F9}
.device-composer input::placeholder{color:#8B9AB2}
.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); flex-wrap:wrap; min-width:0; overflow:hidden; box-sizing:border-box}
@media(max-width:420px){ .km-app-header{height:auto; min-height:68px; padding:10px 12px; gap:8px} .km-app-header .brand-mini{gap:8px} .km-app-header h1{font-size:15px} }
.km-app-header #meBadge{font-size:12px; max-width:min(36vw, 180px); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; display:inline-flex; min-width:0; box-sizing:border-box}
@media(max-width:420px){ .km-app-header #meBadge{font-size:11px; max-width:32vw} }
@media(max-width:360px){ .km-app-header #meBadge{max-width:28vw; font-size:10.5px; padding:5px 8px} }
.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; min-width:0; flex-wrap:wrap; justify-content:flex-end; max-width:100%}
.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; -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px)}
.km-app-header .iconbtn:hover{background:rgba(255,255,255,.14)}
:root{ --km-sidebar-w:380px }
.km-layout{display:flex; gap:14px; padding:14px; height:calc(100vh - 68px); background:transparent; overflow:hidden; align-items:stretch}
.km-layout .km-sidebar{flex:0 0 var(--km-sidebar-w); width:var(--km-sidebar-w); min-width:0}
.km-layout .km-main{flex:1; min-width:0}
@media(max-width:980px){ .km-layout{flex-direction:column; padding:10px} .km-layout .km-sidebar{flex:0 0 42%; width:auto} .km-sidebar{border-right:none} .km-resizer{display:none !important} }
.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); position:relative; min-width:0; /* v24 resizer */}
.km-resizer{position:absolute; top:0; right:0; width:10px; bottom:0; cursor:col-resize; z-index:5; background:transparent; border-left:1px solid transparent; touch-action:none}
.km-resizer::after{content:""; position:absolute; top:50%; left:3px; width:3px; height:36px; border-radius:999px; background:var(--km-line); transform:translateY(-50%); opacity:.9}
.km-resizer:hover::after, .km-resizer:active::after{background:var(--km-primary)}
.km-resizer:hover{border-left-color:var(--km-primary)}
/* v24 narrow: Zahlen über Wort statt im Wort */
.km-sidebar.km-narrow .km-item{flex-wrap:wrap; align-items:flex-start}
.km-sidebar.km-narrow .km-item .avatar{width:40px; height:40px; font-size:14px}
.km-sidebar.km-narrow .km-item .main{flex:1 1 100%; min-width:0}
.km-sidebar.km-narrow .km-item .top, .km-sidebar.km-narrow .km-item .preview{flex-wrap:wrap}
.km-sidebar.km-narrow .km-item .name{display:flex; flex-direction:column; align-items:flex-start; gap:2px}
.km-sidebar.km-narrow .km-item .name .km-badge, .km-sidebar.km-narrow .km-item .preview .km-badge{order:2}
.km-sidebar.km-narrow .km-tabs button{flex:1 1 46%; min-width:0}
.km-sidebar.km-narrow .km-search .row{flex-wrap:wrap}
.km-sidebar.km-narrow .km-search input{flex:1 1 100%}
.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:0 1 auto; min-width:56px; padding:8px 10px; background:transparent; border:1px solid transparent; color:var(--km-ink-2); font-weight:800; font-size:12.5px; cursor:pointer; border-radius:999px; display:flex; gap:5px; align-items:center; justify-content:center; white-space:nowrap; transition:.14s; box-sizing:border-box}
@media(max-width:420px){ .km-tabs{gap:4px; padding:5px} .km-tabs button{padding:7px 8px; font-size:11.5px; min-width:52px; gap:4px} }
@media(max-width:360px){ .km-tabs button{padding:6px 7px; font-size:11px; min-width:48px} }
.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:#080808; border:1px solid #1E1E1E; border-radius:24px; overflow:hidden; box-shadow:var(--shadow-card); min-width:0}
/* v33: Chat-Hintergrund = dieselbe Fläche wie die Anmeldung, plus Partikel-Ebene.
   Der Gradient liegt jetzt auf #chatPane, .km-messages bleibt transparent (sonst
   würde die Ebene die Partikel verdecken). Eigene Hintergründe aus „Hintergrund
   ändern“ setzt die App weiterhin direkt auf #messagesPane – die bleiben also. */
#chatPane{ background: var(--km-chat-bg) }
.km-chat-particles{ position:absolute; inset:0; width:100%; height:100%; display:block; pointer-events:none; z-index:0; opacity:.9 }
.km-chat-head{height:64px; background:#0B0B0E; border-bottom:1px solid #222; display:flex; align-items:center; justify-content:space-between; padding:8px 14px; gap:10px; color:#fff; position:relative; z-index:2}
.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:#1A1A1E; display:grid; place-items:center; font-weight:900; color:#FFE9DC; border:1px solid #2A2A2E; flex:0 0 auto; overflow:hidden}
.km-chat-head .title{font-weight:800; font-size:15px; color:#FFFFFF; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.km-chat-head .sub{font-size:12px; color:#A8B0C0; 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 rgba(20,184,166,.22); 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:transparent; position:relative; z-index:1}
.km-messages::before{content:""; position:absolute; inset:0; pointer-events:none; opacity:.9; background-image: radial-gradient(circle at 1px 1px, var(--km-chat-dots) 1px, transparent 0), linear-gradient(var(--km-chat-grid) 1px, transparent 1px), linear-gradient(90deg, var(--km-chat-grid) 1px, transparent 1px); background-size:64px 64px, 36px 36px, 36px 36px; -webkit-mask: radial-gradient(1100px 700px at 30% 18%, #000 30%, transparent 80%); mask: radial-gradient(1100px 700px at 30% 18%, #000 30%, transparent 80%)}
@media(max-width:900px){ .km-messages{padding:14px 12px} }
.km-composer{background:#0B0B0E; padding:10px 12px; display:flex; gap:8px; align-items:flex-end; border-top:1px solid #222; position:relative; z-index:2}
.km-composer .input-wrap{flex:1; display:flex; align-items:flex-end; gap:8px; background:#1A1A1E; border:1px solid #2A2A2E; 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 rgba(255,90,46,.16); background:#1E1E22}
.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:#F1F5F9}
.km-composer textarea::placeholder{color:#8B9AB2}
.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: rgba(17,27,46,.96); 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); -webkit-backdrop-filter: blur(12px); 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:#0B0B0E; 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: transparent; /* v33: Gradient + Partikel liegen auf #chatPane */ }
[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); position:sticky; top:0; z-index:4; transition:transform .15s, box-shadow .15s}
.km-banner-no-parents:hover{transform:translateY(-1px); box-shadow:var(--shadow-card)}
@keyframes kmShake{0%,100%{transform:translateX(0)}15%{transform:translateX(-3px)}30%{transform:translateX(3px)}45%{transform:translateX(-3px)}60%{transform:translateX(3px)}75%{transform:translateX(-2px)}90%{transform:translateX(2px)}}
@keyframes kmBlink{0%,100%{opacity:1; filter:brightness(1)}25%{opacity:.38; filter:brightness(1.25)}50%{opacity:1}75%{opacity:.38}}
.km-banner-no-parents.shake{animation:kmShake .55s ease}
.km-banner-no-parents.blink{animation:kmBlink .9s ease 2}
/* 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; contain:paint; clip-path:inset(0);
  background: var(--km-login-bg);
  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;
  -webkit-mask: radial-gradient(1100px 700px at 30% 18%, #000 30%, transparent 80%); 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; contain:paint; clip-path:inset(0); }
.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;
  -webkit-backdrop-filter: blur(18px) saturate(1.1);
  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; }

/* ===== v34: schwarzer Rahmen + schwarze obere Leiste, graue Chat-Liste =====
   Der helle Rahmen kam vom body-Hintergrund (.km-app erbt var(--km-bg) = #FFFCF8)
   und vom 14px-Innenabstand in .km-layout. Beides ist jetzt schwarz, die obere
   Leiste ebenfalls. Die linke Chat-Liste (.km-sidebar) wird grau: Einträge,
   Tabs, Suchfeld und Avatar behalten helle Schrift, damit alles lesbar bleibt. */
body.km-app{ background:#000; }
body.km-app .km-app-header{ background:#000; border-bottom-color:rgba(255,255,255,.10); }
body.km-app .km-sidebar{ background:#24262b; border-color:#33353b; box-shadow:0 18px 40px rgba(0,0,0,.45); }
body.km-app .km-sidebar .km-tabs{ background:#1b1c20; border-bottom-color:#33353b; }
body.km-app .km-sidebar .km-tabs button{ color:#c6cbd4; }
body.km-app .km-sidebar .km-tabs button.active{ background:#31343a; border-color:#43464e; color:#fff; box-shadow:none; }
body.km-app .km-sidebar .km-search{ border-bottom-color:#33353b; }
body.km-app .km-sidebar .km-search input{ background:#1b1c20; border-color:#33353b; color:#f2f4f7; }
body.km-app .km-sidebar .km-search input:focus{ background:#232529; border-color:var(--km-primary); }
body.km-app .km-sidebar .km-search input::placeholder{ color:#8b93a0; }
body.km-app .km-sidebar .km-resizer::after{ background:#43464e; }
body.km-app .km-sidebar .km-empty{ color:#8b93a0; }
body.km-app .km-sidebar .km-item{ border-bottom-color:#2b2d33; }
body.km-app .km-sidebar .km-item:hover{ background:#2b2d33; }
body.km-app .km-sidebar .km-item.active{ background:rgba(255,107,74,.18); border-left-color:var(--km-primary); }
body.km-app .km-sidebar .km-item .name{ color:#f2f4f7; }
body.km-app .km-sidebar .km-item .time,
body.km-app .km-sidebar .km-item .preview{ color:#9ba2ae; }
body.km-app .km-sidebar .km-item .avatar{ background:#31343a; color:#d9dee6; border-color:#3b3e45; }
body.km-app .km-sidebar .km-item .call-mini{ background:#1b1c20; border-color:#3b3e45; }
body.km-app .km-sidebar .km-badge.muted{ background:#31343a; color:#c6cbd4; border-color:#43464e; }
body.km-app .km-sidebar .home-head{ background:transparent; border-bottom-color:#33353b; }
body.km-app .km-sidebar .home-section-head{ background:transparent; color:#c6cbd4; border-bottom-color:#33353b; }

/* ===== v35: Hauptbereich dunkel wie der Chat (vorher weiß) =====
   #welcomePane, #reportsPane und #elternPane hatten inline background:var(--km-bg)
   ( = #FFFCF8 ). Neben dem dunklen Chat war das ein großer weißer Kasten. Sie
   bekommen jetzt denselben Verlauf wie der Chat (--km-chat-bg) plus die Punkte-/
   Raster-Textur aus .km-messages::before. Helle Karten (.km-card, .eltern-kachel)
   bleiben bewusst hell – nur Text, der direkt auf dem Hintergrund liegt, wird hell. */
body.km-app #welcomePane,
body.km-app #reportsPane,
body.km-app #elternPane{ background: var(--km-chat-bg) !important; position: relative; }
body.km-app #welcomePane::before,
body.km-app #reportsPane::before,
body.km-app #elternPane::before{
  content:""; position:absolute; inset:0; pointer-events:none; opacity:.9;
  background-image: radial-gradient(circle at 1px 1px, var(--km-chat-dots) 1px, transparent 0), linear-gradient(var(--km-chat-grid) 1px, transparent 1px), linear-gradient(90deg, var(--km-chat-grid) 1px, transparent 1px);
  background-size:64px 64px, 36px 36px, 36px 36px;
  -webkit-mask: radial-gradient(1100px 700px at 30% 18%, #000 30%, transparent 80%); mask: radial-gradient(1100px 700px at 30% 18%, #000 30%, transparent 80%);
}
body.km-app #welcomePane h3{ color:#fff !important; }
body.km-app #welcomePane > div > p{ color:#d7dbe2 !important; }
body.km-app #welcomePane .km-badge.muted{ background:rgba(255,255,255,.12); color:#eef1f5; border-color:rgba(255,255,255,.22); }
body.km-app #reportsPane > h2{ color:#fff !important; }
body.km-app #elternContent .eltern-list-title{ color:#fff !important; }
body.km-app .km-banner-no-parents{ background:rgba(255,255,255,.08) !important; border-color:var(--km-primary) !important; }
body.km-app .km-banner-no-parents > div{ color:#fff !important; }

/* ===== v36: Geräte mit Aussparung/runden Ecken (iPhone-Notch, Android-Ränder) =====
   Der Kopf setzt viewport-fit=cover; damit der Inhalt trotzdem nicht unter der
   Aussparung oder den runden Ecken liegt, weichen Kopf, Layout und Anmeldung aus.
   max()/env() kennen alle Geräte ab Safari 11.1 / Chrome 79 – sonst greift der Wert. */
body.km-app .km-app-header{ padding-left: max(16px, env(safe-area-inset-left)); padding-right: max(16px, env(safe-area-inset-right)) }
body.km-app .km-layout{ padding-left: max(14px, env(safe-area-inset-left)); padding-right: max(14px, env(safe-area-inset-right)); padding-bottom: max(14px, env(safe-area-inset-bottom)) }
body.has-login-bg #loginView{ padding-left: env(safe-area-inset-left); padding-right: env(safe-area-inset-right) }

/* ===== v37: Anmeldung auf Handys kompakter =====
   Nur Handys: grober Zeiger (Finger) und kein Hover – also Android und iPhone.
   Ein schmales Desktop-Fenster bleibt absichtlich unverändert, ebenso Tablets
   (iPad hochkant ist 768 breit, quer 1024 hoch – beides außerhalb der Grenzen).
   Zweite Zeile der Liste fängt Handys im Querformat (dann ist die Höhe klein). */
@media (hover:none) and (pointer:coarse) and (max-width:600px),
       (hover:none) and (pointer:coarse) and (max-height:480px){
  body.has-login-bg #loginView{ width:min(340px, calc(100vw - 40px)); max-width:340px; border-radius:24px }
  body.has-login-bg #loginView .km-login-hero{ gap:8px !important; padding:16px 14px 8px !important }
  body.has-login-bg #loginView .km-login-hero > div:first-child{ width:56px !important; height:56px !important; border-radius:15px !important }
  body.has-login-bg #loginView .km-login-hero > div:first-child svg{ width:30px !important; height:30px !important }
  body.has-login-bg #loginView .km-login-hero h2{ font-size:16.5px !important }
  body.has-login-bg #loginView .km-login-hero p{ font-size:11px !important; margin-top:4px !important }
  body.has-login-bg #loginView .km-login-form{ padding:0 14px 14px !important }
  body.has-login-bg #loginView .km-input{ font-size:13px !important; padding:9px 11px !important; border-radius:12px !important }
  body.has-login-bg #loginView #emailCodeInput{ font-size:15px !important; padding:10px 11px !important }
  body.has-login-bg #loginView .km-btn{ padding:9px 12px !important; font-size:12.5px !important }
  body.has-login-bg #loginView .km-btn-small{ padding:6px 10px !important; font-size:11px !important }
  body.has-login-bg #loginView #emailOkBtn{ margin-top:9px !important }
  body.has-login-bg #loginView hr{ margin:11px 0 0 !important }
  body.has-login-bg #loginView #emailPhase2{ margin-top:9px !important; padding:10px !important; border-radius:12px !important }
  body.has-login-bg #loginView #emailCodeHint{ font-size:11px !important }
  body.has-login-bg #loginView #parentHelp{ font-size:11px !important; line-height:1.45 !important; padding:9px 10px !important }
  body.has-login-bg #loginView #childSetupBox .km-input{ font-size:14px !important }
}