/* Mercolutio Voice – Richtung G (Revolut-Referenz, eigener Touch "Glut")
   dunkel, große Zahlen, warmer Verlauf Koralle→Bernstein, Gegenpol Türkis, viel Freiraum.
   Bewegung nur transform/opacity. */
@font-face{font-family:Inter;src:url(fonts/inter.woff2) format("woff2");font-weight:100 900;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215}
@font-face{font-family:Inter;src:url(fonts/inter-ext.woff2) format("woff2");font-weight:100 900;font-display:swap;unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}

:root{
  --bg:#0c0b0f;--bg2:#121016;--card:#16141b;--card-hi:#1d1a24;--line:rgba(255,255,255,.08);--line2:rgba(255,255,255,.14);
  --text:#f7f4f1;--mut:#a8a1ae;--dim:#766f7e;
  --acc:#ff6a4d;--acc2:#ffa26b;--acc-grad:linear-gradient(140deg,#ff7a55,#ff4f6a 55%,#ff9a3c);--acc-ink:#fff;
  --glow:rgba(255,106,77,.45);--glow-soft:rgba(255,106,77,.13);--acc-line:rgba(255,106,77,.42);
  --teal:#3fd8c9;--amber:#ffb84d;--coral:#ff7a59;
  --c-stt:#3fd8c9;--c-llm:#ffb84d;--c-tts:#ff7a59;
  --ok:#3ddc97;--err:#ff5470;--warn:#ffc24b;
  --ok-bg:rgba(61,220,151,.13);--err-bg:rgba(255,84,112,.13);--warn-bg:rgba(255,194,75,.14);
  --card-bg:linear-gradient(160deg,rgba(255,255,255,.05),rgba(255,255,255,.01) 60%),var(--card);
  --shadow:0 16px 44px -20px rgba(0,0,0,.85);
  --glass:rgba(22,20,27,.66);--field:rgba(255,255,255,.05);--scrim:rgba(4,3,6,.64);
  --r:24px;--ease:cubic-bezier(.22,1,.36,1);
  --gap:20px;--pad:22px;--sec:40px;
  color-scheme:dark;
}
[data-theme=light]{
  --bg:#f7f3ee;--bg2:#efe9e2;--card:#ffffff;--card-hi:#fbf8f4;--line:rgba(40,25,15,.09);--line2:rgba(40,25,15,.17);
  --text:#1c1612;--mut:#6c625a;--dim:#948a82;
  --acc:#e8502f;--acc2:#d9482a;--glow:rgba(232,80,47,.34);--glow-soft:rgba(232,80,47,.09);--acc-line:rgba(232,80,47,.4);
  --teal:#0f9d92;--amber:#c47a00;--coral:#e8502f;
  --c-stt:#0f9d92;--c-llm:#c47a00;--c-tts:#e8502f;
  --ok:#0a9f68;--err:#d62f4b;--warn:#a96a00;
  --ok-bg:rgba(10,159,104,.11);--err-bg:rgba(214,47,75,.10);--warn-bg:rgba(169,106,0,.12);
  --card-bg:linear-gradient(160deg,#fff,#fdfaf7);
  --shadow:0 16px 36px -22px rgba(70,40,20,.38);
  --glass:rgba(255,255,255,.78);--field:rgba(40,25,15,.045);--scrim:rgba(30,20,12,.4);
  color-scheme:light;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html{background:var(--bg)}
body{margin:0;font:500 15px/1.55 Inter,system-ui,sans-serif;color:var(--text);background:var(--bg);min-height:100dvh;-webkit-font-smoothing:antialiased;overflow-x:hidden;transition:background .4s,color .4s}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
input,textarea,select{font:inherit;color:inherit}
a{color:inherit;text-decoration:none}
.ic{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex:none}
.ic.sm{width:18px;height:18px}.ic.xs{width:15px;height:15px}
.num{font-variant-numeric:tabular-nums}
.mono{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.92em}
:focus-visible{outline:2px solid var(--acc2);outline-offset:3px;border-radius:8px}

/* Hintergrund-Glow: warm oben, türkis unten (nur Drift per transform) */
.bg-glow{position:fixed;inset:0;pointer-events:none;overflow:hidden;z-index:0}
.bg-glow i{position:absolute;border-radius:50%;will-change:transform}
.bg-glow i:nth-child(1){width:640px;height:640px;left:50%;top:-320px;margin-left:-320px;background:radial-gradient(closest-side,var(--glow),transparent);opacity:.45;animation:drift 16s ease-in-out infinite alternate}
.bg-glow i:nth-child(2){width:440px;height:440px;right:-200px;top:46%;background:radial-gradient(closest-side,rgba(63,216,201,.2),transparent);opacity:.7;animation:drift 22s ease-in-out infinite alternate-reverse}
[data-theme=light] .bg-glow i:nth-child(1){opacity:.24}
[data-theme=light] .bg-glow i:nth-child(2){opacity:.22}
@keyframes drift{from{transform:translate3d(-30px,0,0) scale(1)}to{transform:translate3d(30px,26px,0) scale(1.08)}}

/* Shell */
.app{position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,1fr);min-height:100dvh}
.side{display:none}
.main{width:100%;max-width:580px;margin:0 auto;padding:0 20px calc(140px + env(safe-area-inset-bottom))}
.topbar{display:flex;align-items:center;justify-content:space-between;height:72px;padding-top:env(safe-area-inset-top)}
.top-actions{display:flex;gap:12px}
.icon-btn{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;background:var(--card-bg);border:1px solid var(--line);transition:transform .25s var(--ease),box-shadow .25s}
.icon-btn:hover{transform:translateY(-2px);box-shadow:0 8px 22px -8px var(--glow)}
.icon-btn:active{transform:scale(.92)}
.avatar-me{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;font-weight:700;font-size:13.5px;background:var(--card-hi);border:1px solid var(--line2);color:var(--text)}
.back{display:flex;align-items:center;gap:8px;height:44px;padding:0 18px 0 12px;border-radius:22px;background:var(--card-bg);border:1px solid var(--line);font-weight:600;transition:transform .25s var(--ease)}
.back:active{transform:scale(.95)}
.back:hover{transform:translateX(-2px)}

/* Wortmarke "Mercolutio Voice" */
.wm{display:flex;align-items:center;gap:12px;line-height:1}
.wm .mk{width:36px;height:36px;flex:none;color:var(--acc)}
.wm .mk svg{width:100%;height:100%;overflow:visible}
.wm .tx{display:flex;flex-direction:column;gap:3px}
.wm .tx b{font-size:17px;font-weight:800;letter-spacing:-.045em}
.wm .tx i{font-style:normal;font-size:11px;font-weight:700;letter-spacing:.32em;text-transform:uppercase;background:var(--acc-grad);-webkit-background-clip:text;background-clip:text;color:transparent}

/* Tab bar (Mobil) */
.tabbar{position:fixed;left:50%;bottom:calc(14px + env(safe-area-inset-bottom));transform:translateX(-50%);width:min(372px,calc(100% - 32px));height:68px;border-radius:30px;background:var(--glass);backdrop-filter:blur(22px) saturate(170%);-webkit-backdrop-filter:blur(22px) saturate(170%);border:1px solid var(--line2);box-shadow:0 18px 40px -12px rgba(0,0,0,.55),inset 0 1px 0 rgba(255,255,255,.06);display:grid;grid-template-columns:repeat(4,1fr);padding:6px;z-index:20}
.tabbar .ind{position:absolute;left:6px;top:6px;bottom:6px;width:calc((100% - 12px)/4);border-radius:24px;background:linear-gradient(160deg,var(--glow-soft),transparent);border:1px solid var(--acc-line);box-shadow:0 0 24px -4px var(--glow);transition:transform .5s var(--ease),opacity .3s;will-change:transform}
.tabbar.none .ind{opacity:0}
.tabbar a{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;min-height:44px;font-size:11.5px;font-weight:600;color:var(--mut);transition:color .3s}
.tabbar a.on{color:var(--text)}
.tabbar a.on .ic{color:var(--acc2);filter:drop-shadow(0 0 8px var(--glow))}
.tabbar a:active .ic{transform:scale(.88)}
.tabbar .ic{transition:transform .25s var(--ease)}
.tabbar .lv{position:absolute;top:8px;left:calc(50% + 8px);width:9px;height:9px;border-radius:50%;background:var(--ok);box-shadow:0 0 10px var(--ok)}

/* Views & Übergänge */
.view{position:relative}
.view.enter{animation:vin .5s var(--ease) both}
.view.leave{animation:vout .14s ease-in both}
@keyframes vin{from{opacity:0;transform:translate3d(0,14px,0)}to{opacity:1;transform:none}}
@keyframes vout{to{opacity:0;transform:translate3d(0,-6px,0)}}
.st{animation:vin .6s var(--ease) both;animation-delay:calc(var(--i,0)*55ms)}

/* Hero */
.hero{position:relative;text-align:center;padding:20px 0 10px}
.hero .lbl{display:inline-flex;align-items:center;gap:8px;font-size:14.5px;font-weight:600;color:var(--mut);line-height:1.5}
.big{font-weight:800;letter-spacing:-.055em;line-height:1;font-size:clamp(76px,24vw,112px);margin:14px 0 16px;font-variant-numeric:tabular-nums;text-shadow:0 0 60px var(--glow)}
.big small{font-size:.42em;font-weight:700;letter-spacing:-.02em;color:var(--mut);margin-left:.1em;text-shadow:none}
.big.md{font-size:clamp(64px,19vw,88px)}
.pill{display:inline-flex;align-items:center;gap:7px;min-height:30px;padding:0 14px;border-radius:15px;font-size:13px;font-weight:600;background:var(--field);border:1px solid var(--line);color:var(--mut)}
.pill.ok{color:var(--ok);background:var(--ok-bg);border-color:transparent}
.pill.err{color:var(--err);background:var(--err-bg);border-color:transparent}
.pill.warn{color:var(--warn);background:var(--warn-bg);border-color:transparent}
.pill.acc{color:var(--acc2);background:var(--glow-soft);border-color:var(--acc-line)}
.pills{display:flex;flex-wrap:wrap;justify-content:center;gap:10px}
.dot{width:7px;height:7px;border-radius:50%;background:currentColor;flex:none}

.seg{position:relative;display:inline-grid;grid-auto-flow:column;grid-auto-columns:1fr;padding:4px;border-radius:20px;background:var(--field);border:1px solid var(--line);margin-top:24px}
.seg button{position:relative;z-index:1;min-height:36px;padding:0 18px;border-radius:16px;font-size:13.5px;font-weight:600;color:var(--mut);transition:color .25s}
.seg button.on{color:var(--text)}
.seg i{position:absolute;left:4px;top:4px;bottom:4px;border-radius:16px;background:var(--card-hi);border:1px solid var(--line2);box-shadow:0 4px 14px -6px rgba(0,0,0,.5);transition:transform .45s var(--ease),width .45s var(--ease)}
[data-theme=light] .seg i{background:#fff}

.spark{position:relative;height:104px;margin:26px -4px 0}
.spark svg{width:100%;height:100%;overflow:visible}
.spark .ln{fill:none;stroke:var(--acc2);stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round;filter:drop-shadow(0 0 7px var(--glow));stroke-dasharray:1;stroke-dashoffset:1;animation:draw 1.1s var(--ease) .1s forwards}
.spark .ar{opacity:0;animation:fade .8s ease .5s forwards}
.spark .end{opacity:0;animation:fade .4s ease 1s forwards}
.spark .pulse{transform-box:fill-box;transform-origin:center;animation:ring 2s ease-out infinite}
@keyframes draw{to{stroke-dashoffset:0}}
@keyframes fade{to{opacity:1}}
.spark-x{display:flex;justify-content:space-between;font-size:12px;font-weight:600;color:var(--dim);margin-top:6px;padding:0 2px}

/* Aktionen */
.acts{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin:36px 0 8px}
.act{display:flex;flex-direction:column;align-items:center;gap:12px;font-size:13px;font-weight:600;color:var(--text);text-align:center;line-height:1.3}
.act b{width:64px;height:64px;border-radius:50%;display:grid;place-items:center;background:var(--card-bg);border:1px solid var(--line2);color:var(--acc2);transition:transform .3s var(--ease),box-shadow .3s,border-color .3s;box-shadow:var(--shadow)}
.act:hover b{transform:translateY(-4px);box-shadow:0 12px 26px -8px var(--glow);border-color:var(--acc-line)}
.act:active b{transform:scale(.92)}
.act.pri b{background:var(--acc-grad);color:#fff;border-color:transparent;box-shadow:0 0 32px -4px var(--glow),inset 0 1px 0 rgba(255,255,255,.35)}
.act.pri:hover b{box-shadow:0 0 42px 0 var(--glow),inset 0 1px 0 rgba(255,255,255,.35)}

/* Karten */
.card{position:relative;background:var(--card-bg);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow),inset 0 1px 0 rgba(255,255,255,.05);padding:var(--pad);transition:transform .35s var(--ease),box-shadow .35s,border-color .35s}
[data-theme=light] .card{box-shadow:var(--shadow)}
a.card:hover,button.card:hover,.card.lift:hover{transform:translateY(-3px);border-color:var(--acc-line);box-shadow:0 16px 36px -14px var(--glow),inset 0 1px 0 rgba(255,255,255,.06)}
a.card:active,button.card:active,.card.lift:active{transform:scale(.985)}
.card+.card{margin-top:var(--gap)}
.cards2>.card+.card,.kv3>.card+.card{margin-top:0}
.card h2{margin:0 0 6px;font-size:17px;font-weight:700;letter-spacing:-.02em}
.card .hint{margin:0 0 20px;color:var(--mut);font-size:14px;line-height:1.6}
.cards2.three>:last-child{grid-column:1/-1}
.cards2{display:grid;grid-template-columns:1fr 1fr;gap:var(--gap);margin-top:var(--gap)}
.stat .k{font-size:13px;font-weight:600;color:var(--mut);display:flex;align-items:center;gap:7px}
.stat .v{font-size:36px;font-weight:800;letter-spacing:-.04em;margin:16px 0 8px;font-variant-numeric:tabular-nums;line-height:1}
.stat .v small{font-size:.5em;font-weight:700;color:var(--mut);margin-left:4px;letter-spacing:-.01em}
.stat .s{font-size:13px;color:var(--mut);font-weight:500;line-height:1.5}
.bar{height:6px;border-radius:3px;background:var(--field);overflow:hidden;margin-top:18px}
.bar i{display:block;height:100%;width:100%;border-radius:3px;background:var(--acc-grad);transform-origin:left;transform:scaleX(var(--p,.5));animation:grow 1.1s var(--ease) both .2s;box-shadow:0 0 12px var(--glow)}
@keyframes grow{from{transform:scaleX(0)}}

.sec{display:flex;align-items:center;justify-content:space-between;margin:var(--sec) 4px 14px}
.sec h2{font-size:18px;font-weight:700;letter-spacing:-.02em;margin:0}
.sec a,.sec button{font-size:14px;font-weight:600;color:var(--acc2);min-height:44px;display:inline-flex;align-items:center}

.notice{display:flex;gap:12px;align-items:flex-start;padding:16px 18px;border-radius:18px;font-size:14px;line-height:1.6;margin-top:var(--gap);border:1px solid var(--line);background:var(--field);color:var(--mut)}
.notice.warn{background:var(--warn-bg);color:var(--warn);border-color:transparent}
.notice.bad{background:var(--err-bg);color:var(--err);border-color:transparent}
.notice.ok{background:var(--ok-bg);color:var(--ok);border-color:transparent}
.notice a{text-decoration:underline;font-weight:600}

/* Live-Karte mit Glow-Puls */
.livecard{display:flex;align-items:center;gap:18px;margin-top:var(--gap);border-color:rgba(61,220,151,.32);background:linear-gradient(160deg,rgba(61,220,151,.1),rgba(61,220,151,.02) 70%),var(--card)}
.livecard .pulse-av{position:relative;width:52px;height:52px;flex:none}
.livecard .pulse-av span{position:absolute;inset:0;border-radius:50%;background:var(--ok);opacity:.4;animation:ring 1.9s ease-out infinite}
.livecard .pulse-av span:nth-child(2){animation-delay:.95s}
.livecard .pulse-av b{position:absolute;inset:0;border-radius:50%;display:grid;place-items:center;background:linear-gradient(145deg,#4ae8a6,#12a97b);color:#04271c;box-shadow:0 0 24px rgba(61,220,151,.55)}
@keyframes ring{from{transform:scale(1);opacity:.5}to{transform:scale(1.9);opacity:0}}
.livecard .t{flex:1;min-width:0}
.livecard .t b{display:block;font-size:16px;font-weight:700;letter-spacing:-.01em}
.livecard .t span{display:block;font-size:13.5px;color:var(--mut);margin-top:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.livecard .tm{font-size:21px;font-weight:700;font-variant-numeric:tabular-nums;color:var(--ok);letter-spacing:-.02em}

/* Listen im Transaktions-Stil */
.list{display:flex;flex-direction:column;gap:4px}
.row{display:flex;align-items:center;gap:16px;padding:16px 12px;margin:0 -12px;border-radius:20px;transition:transform .3s var(--ease),background .25s;text-align:left;width:calc(100% + 24px);min-height:72px}
.row:hover{background:var(--field);transform:translateX(3px)}
.row:active{transform:scale(.98)}
.av{width:48px;height:48px;border-radius:50%;flex:none;display:grid;place-items:center;font-weight:700;font-size:15px;color:#fff;position:relative;background:linear-gradient(145deg,#ff8a5c,#f2495c)}
.av.g1{background:linear-gradient(145deg,#3fd8c9,#0f8f9a)}
.av.g2{background:linear-gradient(145deg,#ffc857,#ff9a1f)}
.av.g3{background:linear-gradient(145deg,#6aa8ff,#3d6df0)}
.av.g4{background:linear-gradient(145deg,#f27ab5,#b53a8f)}
.av.neutral{background:var(--field);color:var(--mut);border:1px solid var(--line2)}
.av .st-dot{position:absolute;right:-2px;bottom:-2px;width:13px;height:13px;border-radius:50%;background:var(--ok);border:3px solid var(--bg);box-sizing:content-box;margin:0}
.av .st-dot.warn{background:var(--warn)}.av .st-dot.err{background:var(--err)}.av .st-dot.off{background:var(--dim)}
.row .m{flex:1;min-width:0}
.row .m b{display:block;font-size:16px;font-weight:650;letter-spacing:-.015em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.row .m span{display:block;font-size:13.5px;color:var(--mut);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:3px}
.row .r{text-align:right;flex:none}
.row .r b{display:block;font-size:16px;font-weight:700;font-variant-numeric:tabular-nums;letter-spacing:-.015em}
.row .r span{display:block;font-size:13px;color:var(--mut);margin-top:3px;font-variant-numeric:tabular-nums}
.row .r .ok{color:var(--ok)}.row .r .warn{color:var(--warn)}.row .r .err{color:var(--err)}
.group{font-size:13px;font-weight:700;color:var(--mut);margin:28px 4px 8px;letter-spacing:.01em}
.empty{padding:34px 10px;text-align:center;color:var(--mut);line-height:1.6}
.rowbtn{width:calc(100% + 24px);font:inherit}

.chips{display:flex;gap:10px;margin:28px -20px 6px;overflow-x:auto;scrollbar-width:none;padding:0 20px}
.chips::-webkit-scrollbar{display:none}
.chip{min-height:44px;padding:0 20px;border-radius:22px;background:var(--field);border:1px solid var(--line);font-weight:600;font-size:14px;color:var(--mut);white-space:nowrap;flex:none;transition:all .3s var(--ease)}
.chip.on{background:var(--glow-soft);border-color:var(--acc-line);color:var(--text);box-shadow:0 0 20px -6px var(--glow)}
.chip:active{transform:scale(.95)}

/* Assistent: Avatar mit Sprach-Puls-Ring */
.pv{display:block;position:relative;width:var(--s,56px);height:var(--s,56px);flex:none;margin:6px}
.pv .core{position:absolute;inset:0;border-radius:50%;display:grid;place-items:center;color:#fff;background:linear-gradient(145deg,#ff8a5c,#f2495c);z-index:2;font-weight:800;font-size:calc(var(--s,56px)*.3)}
.pv .core.g1{background:linear-gradient(145deg,#3fd8c9,#0f8f9a)}.pv .core.g2{background:linear-gradient(145deg,#ffc857,#ff9a1f)}.pv .core.g3{background:linear-gradient(145deg,#6aa8ff,#3d6df0)}.pv .core.g4{background:linear-gradient(145deg,#f27ab5,#b53a8f)}
.pv .core .ic{width:46%;height:46%}
.pv .halo{position:absolute;inset:-6px;border-radius:50%;padding:2px;background:conic-gradient(from 0deg,#ff6a4d,#ffb84d,#3fd8c9,#ff6a4d);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0);opacity:.55;z-index:1}
.pv .p1,.pv .p2{position:absolute;inset:0;border-radius:50%;border:2px solid var(--acc2);opacity:0;z-index:0}
.pv.live .halo{opacity:1;animation:spin 7s linear infinite}
.pv.live .p1,.pv.live .p2,.pv.talk .p1,.pv.talk .p2{animation:ring 2.2s ease-out infinite}
.pv.live .p2,.pv.talk .p2{animation-delay:1.1s}
.pv.talk .halo{opacity:1;animation:spin 3s linear infinite}
.pv .led{position:absolute;right:-2px;bottom:-2px;width:14px;height:14px;border-radius:50%;background:var(--ok);border:3px solid var(--bg);box-sizing:content-box;z-index:3}
.pv .led.warn{background:var(--warn)}.pv .led.off{background:var(--dim)}
@keyframes spin{to{transform:rotate(360deg)}}
.pv.big{--s:92px;margin:10px auto 16px}

/* Editor-Kopf */
.ed-hero{text-align:center;padding:14px 0 6px}
.ed-hero h1{margin:6px 0 8px;font-size:28px;font-weight:800;letter-spacing:-.04em;line-height:1.2}
.ed-hero .pills{margin-top:14px}
.ed-acts{display:flex;gap:12px;margin-top:28px}
.ed-acts .btn{flex:1}

/* Pipeline-Kette: STT → LLM → TTS, Latenz & Kosten an den Verbindungen */
.chain{display:flex;flex-direction:column;padding:26px var(--pad) 22px;margin-top:var(--gap);overflow:hidden}
.chain .hd{display:flex;justify-content:space-between;align-items:baseline;margin:0 0 20px}
.chain .hd h2{margin:0}
.chain .hd span{font-size:13px;color:var(--mut)}
.chain .flow{display:flex;flex-direction:column}
.node{display:flex;align-items:center;gap:16px;text-align:left;width:100%;border-radius:18px;transition:transform .3s var(--ease)}
.node .ico{width:46px;height:46px;border-radius:50%;display:grid;place-items:center;flex:none;color:var(--cc);background:color-mix(in srgb,var(--cc) 14%,transparent);border:1.5px solid color-mix(in srgb,var(--cc) 55%,transparent);box-shadow:0 0 22px -6px var(--cc);transition:transform .3s var(--ease),box-shadow .3s}
.node:hover .ico{transform:scale(1.08);box-shadow:0 0 28px -2px var(--cc)}
.node:active{transform:scale(.97)}
.node .t{min-width:0}
.node .t small{display:block;font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--cc)}
.node .t b{display:block;font-size:16px;font-weight:700;letter-spacing:-.015em;margin:2px 0;overflow:hidden;text-overflow:ellipsis}
.node .t span{display:block;font-size:13px;color:var(--mut);overflow:hidden;text-overflow:ellipsis}
.node.end .ico{width:46px;height:46px;border-style:dashed;box-shadow:none;color:var(--mut);background:none;border-color:var(--line2)}
.node.end .t small{color:var(--mut)}
.link{position:relative;display:flex;align-items:center;gap:16px;min-height:72px}
.link .ln{position:relative;width:2px;align-self:stretch;margin:0 22px;border-radius:1px;overflow:hidden;background:linear-gradient(180deg,var(--from),var(--to));opacity:.55}
.link .ln::after{content:"";position:absolute;left:-1px;right:-1px;top:0;height:40%;background:linear-gradient(180deg,transparent,#fff,transparent);opacity:.9;transform:translate3d(0,-100%,0);animation:flowy 2.4s linear infinite;animation-delay:var(--d,0s)}
@keyframes flowy{to{transform:translate3d(0,250%,0)}}
@keyframes flowx{to{transform:translate3d(250%,0,0)}}
.link .tag{display:flex;flex-direction:column;gap:2px;padding:9px 16px;border-radius:16px;background:var(--field);border:1px solid var(--line);min-width:0}
.link .tag b{font-size:15px;font-weight:800;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.link .tag span{font-size:12.5px;color:var(--mut);font-variant-numeric:tabular-nums}
.chain .foot{display:flex;justify-content:space-between;gap:14px;margin-top:22px;padding-top:20px;border-top:1px solid var(--line);font-size:13.5px;color:var(--mut)}
.chain .foot b{color:var(--text);font-variant-numeric:tabular-nums;font-size:15px}

.tabs{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;margin:var(--sec) -20px 0;padding:0 20px 4px}
.tabs::-webkit-scrollbar{display:none}
.tab{position:relative;min-height:44px;padding:0 20px;border-radius:22px;font-size:14.5px;font-weight:600;color:var(--mut);flex:none;transition:color .25s,background .25s;white-space:nowrap}
.tab.on{color:var(--text);background:var(--card-hi);box-shadow:inset 0 0 0 1px var(--line2)}
[data-theme=light] .tab.on{background:#fff}
.panel{margin-top:var(--gap);animation:vin .45s var(--ease) both}
.field{display:block;margin-bottom:22px}
.field:last-child{margin-bottom:0}
.field>span{display:block;font-size:13px;font-weight:600;color:var(--mut);margin:0 2px 9px}
.field>span em{font-style:normal;font-weight:500;color:var(--dim);margin-left:6px}
.field input,.field textarea,.field select{width:100%;min-height:52px;padding:14px 18px;border-radius:18px;background:var(--field);border:1px solid var(--line);outline:0;font-size:16px;font-weight:500;line-height:1.5;transition:border-color .25s,box-shadow .25s;appearance:none;-webkit-appearance:none}
.field textarea{resize:vertical;line-height:1.6;min-height:150px}
.field textarea.prompt{min-height:300px}
.field textarea.code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:14px;min-height:150px}
.field input:focus,.field textarea:focus,.field select:focus{border-color:var(--acc-line);box-shadow:0 0 0 4px var(--glow-soft)}
.field select{padding-right:46px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23a8a1ae' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 9l7 7 7-7'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 18px center}
.field select option{color:#111;background:#fff}
.field .help,.help{font-size:13px;color:var(--mut);line-height:1.6;margin-top:10px}
.field .cnt{float:right;font-weight:500;color:var(--dim)}
.grid2{display:grid;grid-template-columns:1fr;gap:22px}
.grid2 .field{margin:0}
.choice{display:flex;align-items:center;gap:16px;width:100%;padding:16px 18px;border-radius:20px;border:1px solid var(--line);background:var(--field);text-align:left;margin-bottom:12px;transition:all .3s var(--ease);min-height:64px}
.choice:hover{transform:translateY(-2px)}
.choice.on{border-color:var(--acc-line);background:var(--glow-soft);box-shadow:0 0 24px -8px var(--glow)}
.choice .m{flex:1;min-width:0}.choice .m b{display:block;font-weight:650;font-size:15.5px}.choice .m span{display:block;font-size:13px;color:var(--mut);margin-top:2px}
.choice .rd{width:24px;height:24px;border-radius:50%;border:2px solid var(--line2);display:grid;place-items:center;flex:none;transition:all .25s}
.choice.on .rd{border-color:var(--acc);background:var(--acc);color:#fff}
.choice .rd .ic{width:13px;height:13px;stroke-width:3;opacity:0;transform:scale(.4);transition:all .3s var(--ease)}
.choice.on .rd .ic{opacity:1;transform:none}
.tog-row{display:flex;align-items:center;gap:16px;padding:18px 0;cursor:pointer}
.tog-row+.tog-row{border-top:1px solid var(--line)}
.tog-row:first-child{padding-top:4px}.tog-row:last-child{padding-bottom:4px}
.tog-row .m{flex:1;min-width:0}.tog-row .m b{display:block;font-weight:650;font-size:15.5px}.tog-row .m span{display:block;font-size:13px;color:var(--mut);margin-top:3px;line-height:1.5}
.swi{position:absolute;opacity:0;width:1px;height:1px}
.swv{position:relative;width:54px;height:32px;border-radius:16px;background:var(--field);border:1px solid var(--line2);flex:none;transition:background .3s,box-shadow .3s}
.swv::after{content:"";position:absolute;left:3px;top:3px;width:24px;height:24px;border-radius:50%;background:#cfc8d2;transition:transform .35s var(--ease),background .3s;box-shadow:0 2px 6px rgba(0,0,0,.35)}
.swi:checked+.swv{background:var(--acc);border-color:transparent;box-shadow:0 0 18px -2px var(--glow)}
.swi:checked+.swv::after{transform:translateX(22px);background:#fff}
.swi:focus-visible+.swv{outline:2px solid var(--acc2);outline-offset:3px}
.range{margin-bottom:26px}
.range:last-child{margin-bottom:0}
.range .h{display:flex;justify-content:space-between;font-size:14px;font-weight:600;margin-bottom:12px}
.range .h span{color:var(--mut);font-weight:500}
.range .h em{font-style:normal;font-variant-numeric:tabular-nums;color:var(--mut)}
input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:32px;background:transparent;outline:0;margin:0;padding:0}
input[type=range]::-webkit-slider-runnable-track{height:6px;border-radius:3px;background:linear-gradient(90deg,var(--acc) var(--p,50%),var(--field) var(--p,50%));border:0}
input[type=range]::-moz-range-track{height:6px;border-radius:3px;background:var(--field)}
input[type=range]::-moz-range-progress{height:6px;border-radius:3px;background:var(--acc)}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:28px;height:28px;border-radius:50%;background:#fff;margin-top:-11px;box-shadow:0 2px 10px rgba(0,0,0,.45),0 0 0 5px var(--glow-soft)}
input[type=range]::-moz-range-thumb{width:28px;height:28px;border-radius:50%;background:#fff;border:0;box-shadow:0 2px 10px rgba(0,0,0,.45)}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:56px;padding:0 28px;border-radius:28px;font-weight:700;font-size:16px;transition:transform .3s var(--ease),box-shadow .3s,opacity .3s;width:100%;background:var(--field);border:1px solid var(--line2);line-height:1.2;text-align:center}
.btn.pri{background:var(--acc-grad);color:#fff;border-color:transparent;box-shadow:0 0 32px -6px var(--glow),inset 0 1px 0 rgba(255,255,255,.3)}
.btn.pri:hover{transform:translateY(-2px);box-shadow:0 0 44px -2px var(--glow),inset 0 1px 0 rgba(255,255,255,.3)}
.btn.sec2{background:var(--field);border:1px solid var(--line2)}
.btn.red{background:linear-gradient(145deg,#ff6b80,#e0324d);color:#fff;border-color:transparent;box-shadow:0 0 28px -6px rgba(255,92,114,.7)}
.btn.ghost-bad{color:var(--err);border-color:rgba(255,84,112,.35);background:var(--err-bg)}
.btn:active{transform:scale(.96)}
.btn:disabled{opacity:.45;pointer-events:none}
.btn.sm{min-height:44px;font-size:15px;width:auto;padding:0 22px}
.btns{display:flex;flex-direction:column;gap:14px;margin-top:26px}
.btns.row2{flex-direction:row}.btns.row2 .btn{flex:1}
.savebar{opacity:0;pointer-events:none;position:fixed;left:50%;bottom:calc(98px + env(safe-area-inset-bottom));width:min(372px,calc(100% - 32px));transform:translate(-50%,160%);transition:transform .5s var(--ease),opacity .3s;z-index:19}
.savebar.show{transform:translate(-50%,0);opacity:1;pointer-events:auto}
.savebar .btn{box-shadow:0 14px 34px -8px var(--glow),0 0 30px -4px var(--glow)}

/* Wellenform (Testanruf + Stimme vorhören) */
.wave{display:flex;align-items:center;justify-content:center;gap:4px;height:84px;filter:drop-shadow(0 0 10px var(--glow))}
.wave i{width:5px;height:100%;border-radius:3px;background:linear-gradient(180deg,var(--acc2),var(--acc));transform:scaleY(.1);will-change:transform}
.wave.live i{animation:wv var(--d,1s) ease-in-out var(--dl,0s) infinite alternate}
@keyframes wv{from{transform:scaleY(.12)}to{transform:scaleY(var(--h,.8))}}
.wave.mini{height:28px;gap:3px;filter:none}.wave.mini i{width:3px}
.wave.mini:not(.live) i{transform:scaleY(.25)}
.playbtn{width:48px;height:48px;border-radius:50%;display:grid;place-items:center;background:var(--glow-soft);border:1px solid var(--acc-line);color:var(--acc2);flex:none;transition:transform .25s var(--ease),box-shadow .25s}
.playbtn:hover{transform:scale(1.08);box-shadow:0 0 18px -2px var(--glow)}
.playbtn.on{background:var(--acc);color:#fff;box-shadow:0 0 22px -2px var(--glow)}
.playbtn.load{opacity:.6}
.playbtn:disabled{opacity:.35;pointer-events:none}
.playbtn .ic{width:16px;height:16px}
.voicebox{display:flex;align-items:center;gap:18px}
.voicebox .wave{flex:1}

/* Call-Detail */
.kv3{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--gap);margin-top:var(--sec)}
.kv3 .card{padding:18px 12px;text-align:center}
.kv3 .card+.card{margin-top:0}.kv3.two{grid-template-columns:1fr 1fr}.kv3 .card b{white-space:nowrap}
.kv3 .card b{display:block;font-size:20px;font-weight:800;letter-spacing:-.03em;font-variant-numeric:tabular-nums;line-height:1.3}
.kv3 .card span{display:block;font-size:12.5px;color:var(--mut);font-weight:600;margin-top:4px}
.lat{display:flex;height:12px;border-radius:6px;overflow:hidden;gap:3px;margin:20px 0;transform-origin:left;animation:grow 1s var(--ease) .3s both}
.lat i{display:block;border-radius:3px}
.legend{display:grid;grid-template-columns:1fr;gap:12px 18px;font-size:13.5px}@media(min-width:560px){.legend{grid-template-columns:1fr 1fr}}
.legend div{white-space:nowrap;display:flex;align-items:center;gap:9px;color:var(--mut)}
.legend div i{width:9px;height:9px;border-radius:50%;flex:none}
.legend div b{margin-left:auto;color:var(--text);font-variant-numeric:tabular-nums}
.chart{position:relative;display:flex;align-items:flex-end;gap:10px;height:190px;margin-top:30px;padding-top:24px;overflow-x:auto}
.chart .col{flex:1;min-width:26px;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;height:100%}
.chart .tot{font-size:11px;color:var(--mut);margin-bottom:6px;white-space:nowrap;font-variant-numeric:tabular-nums}
.chart .stack{width:100%;max-width:38px;display:flex;flex-direction:column-reverse;border-radius:8px;overflow:hidden;gap:2px;min-height:4px}
.chart .stack i{display:block;width:100%}
.axis{display:flex;gap:10px;font-size:11px;color:var(--dim);margin-top:8px}
.axis span{flex:1;min-width:26px;text-align:center}
.costrow{display:grid;grid-template-columns:62px 1fr auto;align-items:center;gap:14px;padding:12px 0}
.costrow .nm{display:flex;align-items:center;gap:9px;font-weight:700;font-size:14px}
.costrow .nm i{width:9px;height:9px;border-radius:50%;background:var(--cc)}
.costrow .bar{margin:0}
.costrow .bar i{background:var(--cc);box-shadow:none}
.costrow .vv{text-align:right;font-weight:700;font-variant-numeric:tabular-nums}
.costrow .vv small{display:block;font-weight:500;font-size:12px;color:var(--mut)}
.chat{display:flex;flex-direction:column;gap:12px}
.msg{max-width:86%;padding:14px 18px;border-radius:22px;font-size:15px;line-height:1.55;animation:vin .5s var(--ease) both;animation-delay:calc(var(--i,0)*45ms);overflow-wrap:anywhere}
.msg.assistant,.msg.a{align-self:flex-start;background:var(--card-bg);border:1px solid var(--line);border-bottom-left-radius:6px}
.msg.user,.msg.u{align-self:flex-end;background:var(--acc-grad);color:#fff;border-bottom-right-radius:6px;box-shadow:0 8px 24px -10px var(--glow)}
.msg small{display:block;font-size:12px;margin-top:6px;opacity:.72;font-variant-numeric:tabular-nums}
.msg.sys{align-self:center;background:var(--field);color:var(--mut);font-size:13px}
.tool{align-self:center;display:inline-flex;align-items:center;gap:8px;padding:9px 15px;border-radius:16px;font-size:13px;font-weight:600;color:var(--acc2);background:var(--glow-soft);border:1px solid var(--acc-line)}

/* Keys */
.meter{height:4px;border-radius:2px;background:var(--field);margin-top:9px;overflow:hidden}
.meter i{display:block;height:100%;border-radius:2px;background:var(--acc-grad);transform-origin:left;transform:scaleX(var(--p));animation:grow 1s var(--ease) both .3s}
.kf{margin-bottom:22px}
.kf .ctl{display:flex;gap:12px}
.kf .ctl input{flex:1;min-width:0}
.kres{display:flex;align-items:center;gap:10px;min-height:44px;font-weight:600;font-size:14px;color:var(--mut);margin:6px 0 18px;line-height:1.5}
.kres.ok{color:var(--ok)}.kres.bad{color:var(--err)}

/* Telefonie / Check-Liste */
.check{display:flex;gap:14px;padding:14px 0;border-top:1px solid var(--line);font-size:14px;line-height:1.5}
.check .d{width:10px;height:10px;border-radius:50%;background:var(--ok);margin-top:6px;flex:none}
.check .d.warn{background:var(--warn)}.check .d.bad{background:var(--err)}
.check span{display:block;color:var(--mut);font-size:13px;margin-top:2px}
.tool-card{padding:20px;border-radius:20px;border:1px solid var(--line);background:var(--field);margin-bottom:var(--gap)}

/* Sheets */
.sheet-wrap{position:fixed;inset:0;z-index:60;pointer-events:none;visibility:hidden;transition:visibility 0s .45s}
.sheet-wrap.open{pointer-events:auto;visibility:visible;transition:none}
.scrim{position:absolute;inset:0;background:var(--scrim);opacity:0;transition:opacity .35s}
.open .scrim{opacity:1}
.sheet{position:absolute;left:0;right:0;bottom:0;margin:0 auto;max-width:580px;max-height:92dvh;overflow:auto;border-radius:32px 32px 0 0;background:linear-gradient(180deg,var(--card-hi),var(--card));border:1px solid var(--line2);border-bottom:0;box-shadow:0 -30px 80px -20px var(--glow);padding:12px 24px calc(32px + env(safe-area-inset-bottom));transform:translate3d(0,105%,0);transition:transform .5s var(--ease);will-change:transform}
.open .sheet{transform:none}
.sheet.drag{transition:none}
.grab{width:44px;height:5px;border-radius:3px;background:var(--line2);margin:4px auto 20px;touch-action:none;cursor:grab}
.sheet h3{margin:0 0 6px;font-size:23px;font-weight:800;letter-spacing:-.03em;text-align:center;line-height:1.25}
.sheet .sub{text-align:center;color:var(--mut);font-size:14.5px;margin:0 0 26px;line-height:1.6}
.call-av{width:96px;height:96px;margin:8px auto 22px;position:relative}
.call-av b{position:absolute;inset:0;border-radius:50%;display:grid;place-items:center;background:var(--acc-grad);box-shadow:0 0 36px var(--glow);color:#fff}
.call-av b .ic{width:38px;height:38px}
.call-av span{position:absolute;inset:0;border-radius:50%;background:var(--acc);opacity:0}
.sheet.ringing .call-av span{animation:ring 1.6s ease-out infinite}
.sheet.ringing .call-av span:nth-child(2){animation-delay:.8s}
.timer{text-align:center;font-size:46px;font-weight:800;letter-spacing:-.04em;font-variant-numeric:tabular-nums;margin:6px 0 10px}
.spin{width:20px;height:20px;border-radius:50%;border:2.5px solid var(--line2);border-top-color:var(--acc2);animation:rot .7s linear infinite}
@keyframes rot{to{transform:rotate(360deg)}}
.dots span{display:inline-block;animation:bl 1.2s infinite;opacity:.3}.dots span:nth-child(2){animation-delay:.2s}.dots span:nth-child(3){animation-delay:.4s}
@keyframes bl{40%{opacity:1}}
.toast{position:fixed;left:50%;top:calc(16px + env(safe-area-inset-top));z-index:90;transform:translate3d(-50%,-160%,0);padding:14px 22px;border-radius:24px;background:var(--glass);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border:1px solid var(--line2);font-weight:650;display:flex;gap:10px;align-items:center;box-shadow:0 14px 40px -10px rgba(0,0,0,.6);transition:transform .5s var(--ease);max-width:calc(100% - 32px);line-height:1.4}
.toast.show{transform:translate3d(-50%,0,0)}
.toast .ic{color:var(--ok)}.toast.bad .ic{color:var(--err)}

/* Skeleton */
.sk{position:relative;overflow:hidden;background:var(--field);border-radius:14px}
.sk::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent,rgba(255,255,255,.08),transparent);transform:translateX(-100%);animation:shim 1.3s ease-in-out infinite}
[data-theme=light] .sk::after{background:linear-gradient(90deg,transparent,rgba(255,255,255,.8),transparent)}
@keyframes shim{to{transform:translateX(100%)}}

/* Login */
.login{position:relative;z-index:1;min-height:100dvh;display:flex;align-items:center;justify-content:center;padding:32px 20px}
.login .box{width:100%;max-width:420px}
.login .wm{justify-content:center;margin-bottom:40px}
.login .wm .mk{width:48px;height:48px}.login .wm .tx b{font-size:24px}.login .wm .tx i{font-size:12px}
.login h1{margin:0 0 8px;font-size:30px;font-weight:800;letter-spacing:-.04em;text-align:center}
.login .lead{text-align:center;color:var(--mut);margin:0 0 32px;line-height:1.6}
.login .card{padding:28px 24px}

/* Mehr-Seite */
.more-list .row{min-height:76px}

/* Desktop */
@media(min-width:821px){
  :root{--gap:28px;--pad:26px;--sec:48px}
  .app{grid-template-columns:288px minmax(0,1fr)}
  .side{display:flex;flex-direction:column;position:sticky;top:0;height:100dvh;padding:32px 20px;border-right:1px solid var(--line);background:linear-gradient(180deg,rgba(255,255,255,.025),transparent)}
  .side .wm{padding:0 12px 36px}
  .side nav{display:flex;flex-direction:column;gap:6px}
  .side nav a{display:flex;align-items:center;gap:14px;min-height:50px;padding:0 16px;border-radius:18px;font-weight:600;color:var(--mut);transition:all .3s var(--ease);position:relative}
  .side nav a:hover{background:var(--field);color:var(--text);transform:translateX(3px)}
  .side nav a.on{color:var(--text);background:var(--glow-soft);box-shadow:inset 0 0 0 1px var(--acc-line),0 0 26px -8px var(--glow)}
  .side nav a.on .ic{color:var(--acc2)}
  .side .grp{font-size:11.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--dim);padding:22px 16px 8px}
  .side .sp{flex:1;min-height:12px}.side nav{overflow:auto;min-height:0}.side .wsbox{margin-bottom:14px}
  .side .status{display:flex;align-items:center;gap:12px;padding:16px;border-radius:20px;background:var(--card-bg);border:1px solid var(--line);font-size:13px;margin-bottom:16px}
  .side .status b{display:block;font-size:13.5px}.side .status span{color:var(--mut);font-size:12.5px}
  .side .status .led{width:10px;height:10px;border-radius:50%;background:var(--dim);flex:none}
  .side .status .led.on{background:var(--ok);box-shadow:0 0 12px var(--ok)}
  .side .me{display:flex;align-items:center;gap:12px;padding:6px 8px}
  .side .me div{flex:1;font-size:13.5px;font-weight:650;line-height:1.3;min-width:0}.side .me div b{display:block;overflow:hidden;text-overflow:ellipsis}.side .me div span{display:block;color:var(--mut);font-weight:500;font-size:12px}
  .tabbar,.top-brand{display:none}
  .main{max-width:920px;padding:0 48px 96px}
  .topbar{height:92px}
  .topbar .top-actions .avatar-me{display:none}
  .savebar{bottom:32px;left:calc(288px + (100% - 288px)/2);width:380px}
  .big{font-size:132px}.big.md{font-size:108px}
  .chips{margin-left:0;margin-right:0;padding:0}.tabs{margin-left:0;margin-right:0;padding:0 0 4px}
  .sheet{bottom:5vh;border-radius:32px;border-bottom:1px solid var(--line2);transform:translate3d(0,120%,0);max-width:520px}
  .acts{gap:24px;max-width:560px;margin-left:auto;margin-right:auto}
  .act b{width:72px;height:72px}
  .cards2.three{grid-template-columns:repeat(3,1fr)}.cards2.three>:last-child{grid-column:auto}
  .grid2{grid-template-columns:1fr 1fr;gap:26px}
  .grid2 .full{grid-column:1/-1}
  .btns{flex-direction:row}.btns .btn{flex:1}
  .btn{width:auto}.btn.block{width:100%}
  .ed-acts .btn{flex:none;min-width:200px}.ed-acts{justify-content:center}
  .spark{height:120px}
  /* Kette horizontal */
  .chain .flow{flex-direction:row;align-items:flex-start}
  .chain .node{flex-direction:column;text-align:center;width:136px;flex:none;gap:14px;padding:6px 0}
  .chain .node .t{width:100%}
  .chain .node .t b{white-space:nowrap}
  .chain .node.end{width:74px}
  .link{flex:1;min-width:0;min-height:0;flex-direction:column;align-items:center;gap:14px;padding-top:0;height:auto;align-self:flex-start;margin-top:0}
  .link .ln{width:100%;height:2px;align-self:auto;margin:22px 0 0;background:linear-gradient(90deg,var(--from),var(--to))}
  .link .ln::after{width:40%;height:auto;top:-1px;bottom:-1px;left:0;right:auto;background:linear-gradient(90deg,transparent,#fff,transparent);transform:translate3d(-100%,0,0);animation-name:flowx}
  .link .tag{align-items:center;text-align:center;padding:8px 10px;width:max-content}.link .tag b{font-size:14px}.link .tag span{white-space:nowrap;font-size:12px}
  .kv3 .card b{font-size:24px}
  .two{display:grid;grid-template-columns:1.25fr 1fr;gap:var(--gap);align-items:start}
  .two>.card+.card,.two>div>.card+.card{margin-top:var(--gap)}
  .two>.card:first-child{margin-top:0}
  .rowlist{padding:12px 20px}
  .field textarea.prompt{min-height:340px}
}
@media(max-width:820px){.dsk-only{display:none!important}}
@media(max-width:380px){.acts{gap:6px}.act{font-size:12px}.act b{width:58px;height:58px}.main{padding-left:16px;padding-right:16px}.chips,.tabs{margin-left:-16px;margin-right:-16px;padding-left:16px;padding-right:16px}.kv3 .card b{font-size:17px}}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-delay:0s!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
  .spark .ln{stroke-dashoffset:0}.wave i{transform:scaleY(.4)}.link .ln::after{display:none}
}

/* Kompatibilität für eigenständige Module (mail.js): .sw .badge .ph .cap .opt + Eingabefelder */
.sw{display:flex;align-items:center;gap:16px;padding:14px 0;cursor:pointer;min-height:48px;position:relative}
.sw input{position:absolute;opacity:0;width:1px;height:1px}
.sw i{order:2;position:relative;width:54px;height:32px;border-radius:16px;background:var(--field);border:1px solid var(--line2);flex:none;margin-left:auto;transition:background .3s,box-shadow .3s}
.sw i::after{content:"";position:absolute;left:3px;top:3px;width:24px;height:24px;border-radius:50%;background:#cfc8d2;transition:transform .35s var(--ease),background .3s}
.sw input:checked+i{background:var(--acc);border-color:transparent;box-shadow:0 0 18px -2px var(--glow)}
.sw input:checked+i::after{transform:translateX(22px);background:#fff}
.sw>span{order:1;flex:1;font-weight:600;line-height:1.5}
.badge{display:inline-flex;align-items:center;min-height:26px;padding:0 12px;border-radius:13px;font-size:12.5px;font-weight:700;background:var(--field);color:var(--mut)}
.badge.ok{background:var(--ok-bg);color:var(--ok)}.badge.warn{background:var(--warn-bg);color:var(--warn)}.badge.bad{background:var(--err-bg);color:var(--err)}
.ph{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin-bottom:6px}.ph h2{margin:0}
.cap{font-size:12.5px;color:var(--mut)}.opt{font-weight:500;color:var(--dim);font-size:.92em}
.ml-card{margin-bottom:var(--gap);line-height:1.6}
.ml-card input[type=email],.ml-card input[type=number],.ml-card input[type=text]{width:100%;min-height:52px;padding:0 18px;border-radius:18px;background:var(--field);border:1px solid var(--line);outline:0;font-size:16px}
.ml-card input:focus{border-color:var(--acc-line);box-shadow:0 0 0 4px var(--glow-soft)}
.ml-admgrid label:not(.sw){display:block;font-size:13px;font-weight:600;color:var(--mut);margin:0 2px 9px}
.ml-btns .btn,.ml-actions .btn,.ml-add .btn{width:auto;padding:0 22px;min-height:48px}
.ml-btns .btn.bad{color:var(--err);border-color:rgba(255,84,112,.35);background:var(--err-bg)}
.ml-add{display:flex;flex-wrap:wrap;gap:14px}
.ml-row{padding:16px 0}
.ml-modes legend{padding:0}
.ml-radio{min-height:48px}
@media(max-width:600px){.ml-add .btn{width:100%}}
.ml-radio{flex-wrap:nowrap;align-items:flex-start;gap:14px;padding:10px 0}.ml-radio>span:not(.badge){flex:1;min-width:0}.ml-radio input{margin-top:3px}
.ml-modes{margin-top:26px}.ml-modes legend{margin-bottom:6px}

/* Scroll-Hinweis für seitlich scrollende Leisten (tabscroll.js): Fade + Chevron auf der Seite mit weiterem Inhalt */
.tabs::before,.tabs::after,.chips::before,.chips::after,.ld-chips::before,.ld-chips::after{content:"";position:sticky;flex:none;width:26px;height:26px;align-self:center;border-radius:50%;background-color:var(--bg);box-shadow:0 0 0 1px var(--line2);margin:0 -26px 0 0;opacity:0;pointer-events:none;z-index:2;transition:opacity .25s;background-repeat:no-repeat;background-position:center}
.tabs::before,.chips::before,.ld-chips::before{left:0;margin:0 -26px 0 0;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23999' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 5l-7 7 7 7'/%3E%3C/svg%3E")}
.tabs::after,.chips::after,.ld-chips::after{right:0;margin:0 0 0 -26px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23999' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 5l7 7-7 7'/%3E%3C/svg%3E")}
.sc-l::before,.sc-r::after{opacity:1}
@media all{.tabs,.chips,.ld-chips{--ml:1;--mr:1;-webkit-mask-image:linear-gradient(90deg,rgba(0,0,0,var(--ml)) 0,#000 36px,#000 calc(100% - 36px),rgba(0,0,0,var(--mr)) 100%);mask-image:linear-gradient(90deg,rgba(0,0,0,var(--ml)) 0,#000 36px,#000 calc(100% - 36px),rgba(0,0,0,var(--mr)) 100%)}.sc-l{--ml:0}.sc-r{--mr:0}}