/* ── Kepler · Schwarz/Weiß mit Light- & Dark-Mode ─── */
:root{
  color-scheme:dark;
  --bg:#000;
  --fg:#fff;
  /* Akzent: Bernstein aus der Troncom-Farbwelt. Farbe schmückt nicht, sie
     markiert – Fokus, Auswahl, aktive Schalter, der eigene Name. Auf einer
     Bernstein-Fläche steht Schwarz, nie Weiß (Weiß darauf hat 1,6 : 1). */
  --akzent:#FFC46B;                  /* 13 : 1 auf Schwarz          */
  --akzent-rgb:255,196,107;          /* für Deckungen: rgba(var(--akzent-rgb),.12) */
  --akzent-tief:#E0A24E;             /* Tiefe im Verlauf            */
  --akzent-hell:#FFDCA3;             /* Lichtkante im Verlauf       */
  --auf-akzent:#000;                 /* Schrift/Symbol auf Bernstein */
  --t03:rgba(255,255,255,.03);
  --t05:rgba(255,255,255,.05);
  --t07:rgba(255,255,255,.07);
  --t10:rgba(255,255,255,.10);
  --t14:rgba(255,255,255,.14);
  --t20:rgba(255,255,255,.20);
  --t30:rgba(255,255,255,.30);
  --t45:rgba(255,255,255,.45);
  --t60:rgba(255,255,255,.60);
  --t75:rgba(255,255,255,.75);
  --t90:rgba(255,255,255,.90);
  --veil:rgba(0,0,0,.55);            /* Header-Schleier          */
  --veil-strong:rgba(0,0,0,.82);     /* Dropzone                 */
  --backdrop:rgba(0,0,0,.6);         /* Mobile-Nav-Hintergrund   */
  --shadow:0 24px 60px -24px rgba(0,0,0,.9);
  --panel:var(--t05);                /* schwebende Fläche (Composer) */
  --panel-focus:var(--t07);
  --panel-shadow:0 24px 60px -24px rgba(0,0,0,.9);
  --raised:var(--bg);                /* kleine erhabene Chips        */
  --pop:#15161a;                     /* Auswahlliste (option) – deckend */
  --glow:rgba(255,255,255,.05);      /* Halo im Leerzustand          */
  /* Composer: Verlaufskante, Tiefe, Glanz */
  --edge:linear-gradient(180deg,rgba(255,255,255,.20),rgba(255,255,255,.07) 45%,rgba(255,255,255,.05));
  --edge-focus:linear-gradient(180deg,rgba(255,255,255,.42),rgba(255,255,255,.14) 45%,rgba(255,255,255,.10));
  --edge-base:rgba(255,255,255,.10);
  /* Kontur des Eingabefelds: oben bewusst leiser als die Kartenkante, damit
     sich Kontur, Lichtlinie und Lippe nicht zu einem weißen Strich stapeln */
  --edge-comp:linear-gradient(180deg,rgba(255,255,255,.11),rgba(255,255,255,.07) 45%,rgba(255,255,255,.05));
  --edge-comp-focus:linear-gradient(180deg,rgba(255,255,255,.18),rgba(255,255,255,.12) 45%,rgba(255,255,255,.09));
  --comp-shadow:0 1px 1px rgba(0,0,0,.5),0 18px 44px -22px rgba(0,0,0,.95);
  --comp-shadow-focus:0 1px 1px rgba(0,0,0,.5),0 28px 60px -24px rgba(0,0,0,1);
  --comp-hi:inset 0 1px 0 rgba(255,255,255,.07);
  /* Glaskante: schmaler Saum innen an der Kontur, der wie die gerundete
     Kante einer Glasplatte wirkt – Lichtlinie oben, weicher Abfall,
     Gegenlicht und Schatten unten. Alles inset, folgt also der Rundung. */
  --glas-kante:inset 0 1px 0 rgba(255,255,255,.05),
               inset 0 0 0 1px rgba(255,255,255,.06),
               inset 0 0 7px -2px rgba(255,255,255,.09),
               inset 0 10px 9px -5px rgba(255,255,255,.20),
               inset 0 -8px 9px -4px rgba(0,0,0,.6),
               inset 0 -1px 0 rgba(255,255,255,.06);
  --glas-kante-focus:inset 0 1px 0 rgba(255,255,255,.09),
               inset 0 0 0 1px rgba(255,255,255,.08),
               inset 0 0 7px -2px rgba(255,255,255,.12),
               inset 0 11px 10px -5px rgba(255,255,255,.28),
               inset 0 -8px 9px -4px rgba(0,0,0,.65),
               inset 0 -1px 0 rgba(255,255,255,.08);
  --surface:#0c0c0e;                 /* solide Karte (Anmeldung, Freigabe) */
  --field:rgba(255,255,255,.075);    /* Eingabefeld: durchscheinend, aber tragend */
  --field-focus:rgba(255,255,255,.105);
  --surface-line:rgba(255,255,255,.13);
  --surface-shadow:0 1px 2px rgba(0,0,0,.5);
  --ease:cubic-bezier(.22,1,.36,1);
  --swift:cubic-bezier(.32,.72,0,1);
  --font:-apple-system,BlinkMacSystemFont,"SF Pro Text","Inter","Segoe UI",Roboto,sans-serif;
  --mono:"SF Mono",ui-monospace,"JetBrains Mono",Menlo,monospace;
  --col:1200px;
  --composer-col:760px;
  --dock-h:140px;
  /* Diagrammfarben: acht feste Serien-Plätze, je Thema eigene Stufen –
     geprüft auf Farbfehlsichtigkeit und Kontrast gegen den Hintergrund.
     Die Reihenfolge ist Teil der Prüfung, nicht Geschmack. */
  --viz-s1:#3987e5; --viz-s2:#d95926; --viz-s3:#199e70; --viz-s4:#c98500;
  --viz-s5:#d55181; --viz-s6:#008300; --viz-s7:#9085e9; --viz-s8:#e66767;
  --viz-gut:#0ca30c; --viz-schlecht:#d03b3b;
}
html.light{
  color-scheme:light;
  --bg:#f4f2ec;                      /* warmes Off-White (Canvas)    */
  --fg:#241f18;                      /* warmes Fast-Schwarz          */
  /* Bernstein im Hellen tiefer gesetzt: #FFC46B hätte auf dem Off-White
     nur 1,5 : 1 – dieser Ton hat 5 : 1 und trägt auch kleine Schrift. */
  --akzent:#96590C;
  --akzent-rgb:150,89,12;
  --akzent-tief:#6E4007;
  --akzent-hell:#B8741A;
  --auf-akzent:#fff;
  /* Neutraltöne warm getönt (statt kaltem Schwarz) – harmoniert mit der Creme */
  --t03:rgba(62,48,26,.035);
  --t05:rgba(62,48,26,.055);
  --t07:rgba(62,48,26,.075);
  --t10:rgba(62,48,26,.11);
  --t14:rgba(58,45,25,.15);
  --t20:rgba(54,42,24,.21);
  --t30:rgba(50,40,24,.32);
  --t45:rgba(46,37,23,.52);
  --t60:rgba(42,34,22,.68);
  --t75:rgba(38,31,21,.77);
  --t90:rgba(34,28,20,.9);
  --veil:rgba(244,242,236,.82);      /* = Canvas, kein hellerer Streifen */
  --veil-strong:rgba(244,242,236,.92);
  --backdrop:rgba(46,37,23,.26);
  --shadow:0 24px 60px -30px rgba(62,48,26,.18);
  --panel:#fffefb;                   /* helle Karten/Composer        */
  --panel-focus:#ffffff;
  --panel-shadow:0 1px 2px rgba(62,48,26,.06),0 14px 34px -16px rgba(62,48,26,.20);
  --raised:#ffffff;
  --pop:#fffefb;
  --glow:rgba(255,255,255,.8);
  --edge:linear-gradient(180deg,rgba(62,48,26,.20),rgba(62,48,26,.085) 45%,rgba(62,48,26,.07));
  --edge-focus:linear-gradient(180deg,rgba(62,48,26,.32),rgba(62,48,26,.14) 45%,rgba(62,48,26,.11));
  --edge-base:rgba(62,48,26,.10);
  --edge-comp:var(--edge);
  --edge-comp-focus:var(--edge-focus);
  --comp-shadow:0 1px 2px rgba(62,48,26,.07),0 16px 36px -20px rgba(62,48,26,.34);
  --comp-shadow-focus:0 2px 5px rgba(62,48,26,.09),0 28px 56px -22px rgba(62,48,26,.42);
  --comp-hi:inset 0 1px 0 rgba(255,255,255,.9);
  --glas-kante:inset 0 1.5px 0 rgba(255,255,255,1),
               inset 0 0 0 1px rgba(255,255,255,.8),
               inset 0 0 7px -2px rgba(255,255,255,.9),
               inset 0 10px 9px -5px rgba(255,255,255,1),
               inset 0 -8px 9px -4px rgba(62,48,26,.14),
               inset 0 -1px 0 rgba(255,255,255,.8);
  --glas-kante-focus:inset 0 1.5px 0 rgba(255,255,255,1),
               inset 0 0 0 1px rgba(255,255,255,.9),
               inset 0 0 7px -2px rgba(255,255,255,1),
               inset 0 11px 10px -5px rgba(255,255,255,1),
               inset 0 -8px 9px -4px rgba(62,48,26,.17),
               inset 0 -1px 0 rgba(255,255,255,.9);
  --surface:#ffffff;
  --field:rgba(255,255,255,.44);     /* Glas: durchscheinend, der Verlauf scheint weich durch */
  --field-focus:rgba(255,255,255,.6);
  --surface-line:rgba(62,48,26,.16);
  --surface-shadow:0 1px 2px rgba(62,48,26,.07),0 8px 24px -18px rgba(62,48,26,.28);
  --viz-s1:#2a78d6; --viz-s2:#eb6834; --viz-s3:#1baf7a; --viz-s4:#eda100;
  --viz-s5:#e87ba4; --viz-s6:#008300; --viz-s7:#4a3aa7; --viz-s8:#e34948;
  --viz-gut:#006300; --viz-schlecht:#d03b3b;
}

/* sanfter Crossfade beim Theme-Wechsel */
html.theming *,html.theming *::before,html.theming *::after{
  transition:background-color .5s var(--ease),color .5s var(--ease),
             border-color .5s var(--ease),fill .5s var(--ease),
             box-shadow .5s var(--ease) !important;
}

*{margin:0;padding:0;box-sizing:border-box}
html{height:100%}
body{
  height:100dvh;
  display:flex;
  background:var(--bg);color:var(--fg);
  font-family:var(--font);font-size:15px;line-height:1.65;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  overflow:hidden;
}
/* Der Seitenaufbau blendet über einen Schleier auf, nicht über die
   Deckkraft des Körpers: eine gefüllte Deckkraft-Animation macht ihn
   dauerhaft zur Backdrop-Wurzel – und dann zeigt der Weichzeichner
   im Eingabefeld nichts mehr an. */
body::before{
  content:"";position:fixed;inset:0;z-index:900;pointer-events:none;
  background:var(--bg);
  animation:seiteAuf .7s var(--ease) forwards;
}
@keyframes seiteAuf{from{opacity:1}to{opacity:0}}
@keyframes pageIn{from{opacity:0}to{opacity:1}}

::selection{background:var(--fg);color:var(--bg)}
button{font-family:inherit;color:inherit;background:none;border:0;cursor:pointer}
.ic{width:18px;height:18px;stroke:currentColor;stroke-width:1.7;fill:none;
    stroke-linecap:round;stroke-linejoin:round;display:block}

:focus-visible{outline:1px solid var(--t60);outline-offset:3px;border-radius:8px}

/* ── Die Bildmarke: Kepler ─────────────────────────────────
   Sechs Blätter um einen Stamm, in der Textfarbe. Jedes Blatt hängt mit
   seiner Spitze an der Krone; dorthin zeigt sein Ursprung, damit es sich
   aus ihr entfaltet und dorthin zurückfaltet. mb1–mb3 links von unten
   nach oben, mb4–mb6 rechts von oben nach unten, mb0 der Stamm.
   Die Wortmarke (Troncom) trägt ebenfalls die Textfarbe.            */
.mb{transform-box:fill-box}
.mb0{transform-origin:50% 100%}
.mb1{transform-origin:100% 0}
.mb2,.mb3{transform-origin:100% 100%}
.mb4,.mb5{transform-origin:0 100%}
.mb6{transform-origin:0 0}

/* ── Chat-Navigation ──────────────────────────────────────── */
#nav{
  flex:0 0 auto;width:272px;overflow:hidden;
  background:var(--t03);
  border-right:1px solid var(--t07);
  transition:width .5s var(--swift),border-color .5s var(--swift),
             transform .45s var(--swift);
}
html.nav-collapsed #nav,html.pre-collapsed #nav{width:0;border-right-color:transparent}

.nav-inner{
  width:272px;height:100%;
  padding:16px 14px calc(16px + env(safe-area-inset-bottom));
  display:flex;flex-direction:column;
}
.nav-top{display:flex;align-items:center;gap:8px;padding:4px 4px 22px 8px}
.side-logo{display:block;width:92px;height:19px;flex:0 0 auto;margin-right:auto}

.new-chat{
  display:flex;align-items:center;gap:9px;
  width:100%;padding:10px 13px;border-radius:13px;
  border:1px solid var(--t14);color:var(--t75);
  font-size:13px;font-weight:550;
  transition:background .35s var(--ease),color .35s var(--ease),
             border-color .35s var(--ease),transform .35s var(--ease);
}
.new-chat .ic{width:15px;height:15px}
.new-chat:hover{background:var(--fg);color:var(--bg);border-color:var(--fg)}
.new-chat:active{transform:scale(.97)}

.nav-sec{
  margin:22px 8px 8px;font-size:10.5px;font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;color:var(--t30);
}
#chatList{
  flex:1;min-height:0;overflow-y:auto;
  display:flex;flex-direction:column;gap:2px;
  margin:0 -4px;padding:0 4px;
}
/* Bildlaufleiste der Listen: nur sichtbar, während gerollt wird (app.js setzt
   .scrollt und nimmt es kurz nach dem letzten Rollen weg). Die Pseudo-Elemente
   der Leiste lassen sich nicht animieren, wohl aber eine registrierte
   Eigenschaft am Behälter, aus der der Daumen seine Farbe bezieht: So blendet
   er kurz ein und länger wieder aus, statt zu springen. */
@property --leiste{syntax:'<color>';inherits:true;initial-value:transparent}
#chatList,.auto-list{--leiste:transparent;transition:--leiste .6s var(--ease)}
#chatList.scrollt,.auto-list.scrollt{--leiste:var(--t10);transition-duration:.15s}
#chatList::-webkit-scrollbar,.auto-list::-webkit-scrollbar{width:8px}
#chatList::-webkit-scrollbar-thumb,.auto-list::-webkit-scrollbar-thumb{
  background:var(--leiste);border-radius:4px}
@supports not selector(::-webkit-scrollbar){
  #chatList,.auto-list{scrollbar-width:thin;scrollbar-color:transparent transparent;
    transition:scrollbar-color .6s var(--ease)}
  #chatList.scrollt,.auto-list.scrollt{scrollbar-color:var(--t14) transparent;transition-duration:.15s}
}
#chatList:empty::after{
  content:"Noch keine Chats";
  color:var(--t30);font-size:12.5px;padding:8px;
}
.chat-item{
  display:flex;align-items:center;gap:8px;width:100%;
  padding:9px 12px;border-radius:11px;text-align:left;
  color:var(--t60);font-size:13px;
  transition:background .3s var(--ease),color .3s var(--ease);
}
.chat-item:hover{background:var(--t05);color:var(--t90)}
.chat-item.active{background:var(--t07);color:var(--fg)}
.chat-item .t{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.chat-item .del{
  flex:0 0 auto;width:22px;height:22px;border-radius:7px;
  display:grid;place-items:center;color:var(--t45);
  opacity:0;transition:opacity .25s var(--ease),background .25s,color .25s;
}
.chat-item .del .ic{width:12px;height:12px}
.chat-item:hover .del{opacity:1}
.chat-item .del:hover{background:var(--fg);color:var(--bg)}
.chat-item.fresh{animation:navIn .45s var(--swift)}
@keyframes navIn{from{opacity:0;transform:translateX(-10px)}to{opacity:1;transform:none}}

/* Der Chat bekommt seinen Namen: Der alte läuft nach oben aus der Zeile,
   der neue rückt von unten nach. Beide liegen dafür kurz übereinander –
   die Zeile schneidet ohnehin ab, deshalb braucht es keinen zusätzlichen
   Rahmen und nichts verrutscht daneben. */
.chat-item .t.umbenannt{position:relative}
.chat-item .t-neu,.chat-item .t-alt{
  display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.chat-item .t-alt{position:absolute;inset:0}
.chat-item .t.umbenannt .t-neu{animation:titelRein .44s var(--swift) both}
.chat-item .t.umbenannt .t-alt{animation:titelRaus .44s var(--swift) both}
@keyframes titelRein{
  from{opacity:0;transform:translateY(90%);filter:blur(2px)}
  to{opacity:1;transform:none;filter:none}
}
@keyframes titelRaus{
  from{opacity:1;transform:none;filter:none}
  to{opacity:0;transform:translateY(-90%);filter:blur(2px)}
}
/* Wer Bewegung abbestellt hat, bekommt den neuen Namen ohne Umweg. */
@media (prefers-reduced-motion:reduce){
  .chat-item .t.umbenannt .t-neu{animation:titelSanft .2s linear both}
  .chat-item .t.umbenannt .t-alt{display:none}
  @keyframes titelSanft{from{opacity:0}to{opacity:1}}
}

.nav-foot{padding-top:14px}

/* Theme-Umschalter */
.theme-seg{
  position:relative;display:grid;grid-template-columns:1fr 1fr;
  background:var(--t05);border:1px solid var(--t07);
  border-radius:12px;padding:3px;
}
.seg-ind{
  position:absolute;top:3px;bottom:3px;left:3px;width:calc(50% - 3px);
  background:var(--raised);border:1px solid var(--t10);border-radius:9px;
  box-shadow:0 2px 10px rgba(0,0,0,.22);
  transition:transform .45s var(--swift);
}
.theme-seg.dark .seg-ind{transform:translateX(100%)}
.theme-seg button{
  position:relative;z-index:1;display:flex;align-items:center;justify-content:center;
  gap:6px;height:30px;font-size:12px;color:var(--t45);
  transition:color .35s var(--ease);
}
.theme-seg button .ic{width:13px;height:13px}
.theme-seg button.on{color:var(--fg)}

/* Mobile-Backdrop */
#backdrop{
  position:fixed;inset:0;z-index:85;background:var(--backdrop);
  opacity:0;visibility:hidden;
  transition:opacity .35s var(--ease),visibility 0s .35s;
}

/* ── Hauptbereich ─────────────────────────────────────────── */
.main{flex:1;min-width:0;position:relative;overflow:hidden;
      display:flex;flex-direction:column}

/* Lichtschein hinter dem Leerzustand */
body.empty .main::before{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:0;
  background:radial-gradient(560px 380px at 50% 34%,var(--glow),transparent 70%);
  animation:breathe 9s ease-in-out infinite;
}
@keyframes breathe{0%,100%{opacity:.55}50%{opacity:1}}

/* ── Steuerung (keine Kopfzeile mehr) ─────────────────────── */
.sq-btn{
  width:36px;height:36px;border-radius:10px;color:var(--t60);
  display:grid;place-items:center;flex:0 0 auto;
  transition:background .3s var(--ease),color .3s var(--ease),transform .3s var(--ease);
}
.sq-btn .ic{width:17px;height:17px}
.sq-btn:hover{background:var(--t07);color:var(--fg)}
.sq-btn:active{transform:scale(.92)}
.top-space{flex:1}

/* schwebt im Chat, nur wenn die Navigation eingeklappt ist */
#floatCtl{
  position:absolute;top:12px;left:12px;z-index:45;display:flex;gap:4px;
  opacity:0;pointer-events:none;translate:0 -6px;
  transition:opacity .4s var(--ease),translate .45s var(--swift);
}
html.nav-collapsed #floatCtl{opacity:1;pointer-events:auto;translate:0}
/* Platz für die schwebenden Knöpfe schaffen */
html.nav-collapsed #scroller{padding-top:58px}
@media (max-width:900px){#scroller{padding-top:58px}}

/* ── Verlauf ──────────────────────────────────────────────── */
#scroller{
  flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;
  /* Die Verankerung des Browsers bleibt aus: Beim Nachladen älterer
     Beiträge rechnet app.js den Versatz selbst heraus, und beides
     zusammen korrigiert doppelt – das war der Sprung nach oben. */
  overflow-anchor:none;
  padding-top:16px;padding-bottom:calc(var(--dock-h) + 10px);
  transition:padding-top .45s var(--ease);
  opacity:0;transition:opacity .6s var(--ease);
}
body.chat #scroller{opacity:1}
body.empty #scroller{pointer-events:none}

#scroller{scrollbar-width:none}
#scroller::-webkit-scrollbar{display:none}

.thread{max-width:var(--col);margin:0 auto;padding:10px 24px 40px;
        display:flex;flex-direction:column;gap:30px}

/* ── Nachrichten ──────────────────────────────────────────── */
.msg{display:flex;animation:msgIn .55s var(--swift) both}
@keyframes msgIn{from{opacity:0;transform:translateY(14px) scale(.985)}
                 to{opacity:1;transform:none}}

.msg.user{justify-content:flex-end}
.bubble{
  max-width:min(78%,640px);background:var(--t07);border:1px solid var(--t05);
  padding:10px 16px;border-radius:22px;border-bottom-right-radius:8px;
  white-space:pre-wrap;overflow-wrap:break-word;
}
.bubble .b-files{display:flex;flex-wrap:wrap;gap:6px;margin:2px 0 8px}
.bubble .b-file{
  display:flex;align-items:center;gap:6px;font-size:12px;color:var(--t60);
  border:1px solid var(--t10);border-radius:10px;padding:4px 9px;
}
.bubble .b-file .ic{width:13px;height:13px}
.bubble .b-file img{width:38px;height:38px;object-fit:cover;border-radius:7px;
                    filter:grayscale(1) contrast(1.05)}

.msg.ai{gap:15px;align-items:flex-start}
.ai-mark{flex:0 0 auto;width:24px;height:19px;margin-top:7px}
.ai-body{flex:1;min-width:0;max-width:100%}

/* Marken-Balken pulsieren beim Nachdenken */
.msg.ai.thinking .ai-mark .mb{animation:barPulse 1.05s ease-in-out infinite}
.msg.ai.thinking .ai-mark .mb1{animation-delay:0s}
.msg.ai.thinking .ai-mark .mb2{animation-delay:.09s}
.msg.ai.thinking .ai-mark .mb3{animation-delay:.18s}
.msg.ai.thinking .ai-mark .mb4{animation-delay:.27s}
.msg.ai.thinking .ai-mark .mb5{animation-delay:.36s}
@keyframes barPulse{0%,100%{opacity:1}50%{opacity:.18}}

/* „Denke nach …" – atmet in der Helligkeit statt mit Verlaufs-Schimmer
   (background-clip:text animiert Safari nicht) */
.shimmer{display:inline-block;font-size:15px;color:var(--fg);
  animation:shimmer 1.8s ease-in-out infinite}
@keyframes shimmer{0%,100%{opacity:.45}50%{opacity:1}}

/* ── Text-Generierung: Blur-Reveal pro Wort ───────────────── */
.ai-body p,.ai-body li{color:var(--t90)}
.ai-body p{margin:0 0 14px}
.ai-body :is(p,ul,ol):last-child{margin-bottom:0}
.ai-body ul,.ai-body ol{margin:0 0 14px;padding-left:24px;
                        display:flex;flex-direction:column;gap:6px}
.ai-body ul{list-style:none;padding-left:2px}
.ai-body ul li{position:relative;padding-left:22px}
.ai-body ul li::before{content:"–";position:absolute;left:2px;color:var(--t45)}
/* Unterpunkte: eingerückt, kleineres Zeichen, etwas enger als die Ebene darüber */
.ai-body li>:is(ul,ol){margin:6px 0 2px;padding-left:20px;gap:4px}
.ai-body li>ul{padding-left:18px}
.ai-body li>ul li::before{content:"·";font-weight:700}
.ai-body li>ul ul li::before{content:"–";font-size:.85em}
.ai-body li>ol{padding-left:26px}
/* Tabellen. Die Hülle rollt waagerecht, damit eine breite Tabelle den
   Chat nicht auseinanderzieht – der Text daneben bleibt in der Spalte. */
.ai-body .md-tab-huelle{margin:0 0 14px;overflow-x:auto;overscroll-behavior-x:contain;
  border:1px solid var(--t10);border-radius:12px}
.ai-body .md-tab{border-collapse:collapse;width:100%;font-size:.94em}
.ai-body .md-tab th,.ai-body .md-tab td{
  padding:9px 14px;text-align:left;vertical-align:top;
  border-bottom:1px solid var(--t07);white-space:normal}
.ai-body .md-tab thead th{
  font-weight:600;color:var(--fg);background:var(--t04);
  border-bottom:1px solid var(--t15);position:sticky;top:0}
.ai-body .md-tab tbody tr:last-child td{border-bottom:none}
.ai-body .md-tab tbody tr:hover td{background:var(--t04)}
.ai-body .md-tab code{white-space:nowrap}

.ai-body strong{font-weight:650;color:var(--fg)}
.ai-body em{font-style:italic}
.ai-body del{color:var(--t45)}
/* Trennlinie aus --- im Markdown */
.ai-body hr.md-hr{border:0;border-top:1px solid var(--t15);margin:4px 0 18px}
/* Zitatblock aus >-Zeilen */
.ai-body blockquote.md-zitat{margin:0 0 14px;padding:2px 2px 2px 14px;
  border-left:2px solid var(--t15);color:var(--t75)}
/* Ein Listenpunkt kann mehr als eine Zeile sein: zweiter Absatz, Codezaun,
   Tabelle, Zitat. Den Abstand nach unten trägt die Liste selbst (ihr gap),
   deshalb schließt der letzte Block im Punkt bündig ab. */
.ai-body li > :is(p,blockquote,.code-card,.md-tab-huelle,.md-mathe){margin-top:6px}
.ai-body li > :last-child{margin-bottom:0}
.ai-body blockquote.md-zitat > :last-child{margin-bottom:0}
/* Bilder aus Markdown. Fremde Quellen lässt die Inhaltsrichtlinie nicht zu
   (img-src 'self' data: blob:) – daraus wird ein Verweis, siehe app.js. */
.ai-body img.md-bild{display:block;max-width:100%;height:auto;
  margin:4px 0;border-radius:10px}
/* Task-Listen: Kästchen ersetzt das Aufzählungszeichen */
.ai-body ul li.md-task::before{content:none}
.ai-body ul li.md-task{padding-left:2px}
.ai-body .md-check{margin-right:8px;color:var(--t45)}
.ai-body .md-check.erledigt{color:var(--fg)}
.ai-body code{
  font-family:var(--mono);font-size:.86em;
  background:var(--t07);border:1px solid var(--t07);
  padding:.12em .42em;border-radius:7px;white-space:nowrap;
  transition:background .35s var(--ease),border-color .35s var(--ease);
}
/* Pille erst zeigen, wenn das erste Wort darin sichtbar ist */
.ai-body code:not(:has(.ch.on)){background:transparent;border-color:transparent}

.blk{opacity:0;transform:translateY(5px);
     transition:opacity .5s var(--ease),transform .5s var(--ease)}
.blk.on{opacity:1;transform:none}

/* Textgenerierung: die Farbe läuft Zeichen für Zeichen durch den Text –
   Bernstein vorn, Textfarbe hinterher. Animiert wird nur `color`,
   kein background-clip (das zeichnet Safari während Animationen nicht
   neu) und nichts, was das Layout berührt.                        */
.tok{display:inline-block}
.ch{opacity:0}
.ch.on{opacity:1;animation:chIn .5s cubic-bezier(.4,0,.2,1) backwards}
@keyframes chIn{
  0%{opacity:0;color:var(--akzent-tief)}
  22%{opacity:1;color:var(--akzent)}
  55%{color:var(--akzent-hell)}
  100%{color:inherit}
}
/* Codezeilen fließen mit, nur ruhiger */
.code-card .cl.on{animation:clFlow .8s var(--ease) forwards}
@keyframes clFlow{from{opacity:0}to{opacity:1}}

.caret{
  display:inline-block;width:.58ch;height:1.05em;margin-left:3px;
  border-radius:2.5px;vertical-align:text-bottom;
  background:linear-gradient(180deg,var(--akzent),var(--akzent-tief));
  box-shadow:0 0 8px rgba(var(--akzent-rgb),.5);
  animation:caret 1s ease-in-out infinite;
}
@keyframes caret{0%,100%{opacity:1;transform:scaleY(1)}
                 50%{opacity:.25;transform:scaleY(.82)}}

/* Aktionen unter KI-Antwort */
.actions{
  display:flex;gap:4px;margin-top:10px;height:28px;
  opacity:0;transform:translateY(3px);
  transition:opacity .45s var(--ease),transform .45s var(--ease);
}
.msg.done .actions{opacity:1;transform:none}
.act{
  width:28px;height:28px;border-radius:8px;color:var(--t45);
  display:grid;place-items:center;
  transition:color .3s var(--ease),background .3s var(--ease),transform .2s var(--ease);
}
.act .ic{width:14.5px;height:14.5px}
.act:hover{color:var(--fg);background:var(--t07)}
.act:active{transform:scale(.9)}

/* ── Leerzustand ──────────────────────────────────────────── */
.hero{
  position:absolute;inset:0;z-index:20;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:0;padding:0 24px;
  transition:opacity .5s var(--ease),visibility 0s .5s;
}
body.chat .hero{opacity:0;visibility:hidden;pointer-events:none}
/* Im Chat läuft der Leerzustand nicht weiter mit: sichtbar ist er nicht,
   seine Endlos-Animationen würden aber trotzdem in jedem Bild rechnen. */
body.chat .hero .mb,body.chat .hero .gw,body.chat .hero .gc{animation:none}

/* Die Palme steht vor der Begrüßung, an ihr erstes Wort gebunden (.gw
   bricht nicht um): links neben dem Text, wie immer er umbricht, und in em
   mit der Schrift gewachsen. Ihre Mitte liegt auf der Mitte der
   Großbuchstaben; die negativen Ränder halten die Zeile so hoch wie ohne sie. */
.hero-mark{display:inline-block;width:1.48em;height:1.36em;margin:-.12em .36em -.12em 0;
  vertical-align:-.32em;transform-origin:50% 85%}
/* Auftritt wie die Buchstaben – hochgleiten, aus der Unschärfe, leicht
   kippen –, nur einen Takt vor ihnen: Die Palme eröffnet, der Text folgt.
   Dabei entfalten sich die Blätter reihum aus der Krone; danach läuft
   alle paar Sekunden ein Licht durch sie. */
.play .hero-mark{opacity:0;transform:translateY(24px) rotateX(56deg) scale(.9);filter:blur(7px);
  animation:zeichenAuftritt .68s var(--swift) .06s both}
.play .hero-mark .mb{animation:blattAuf .8s var(--swift) both, heroSheen 4.6s ease-in-out infinite}
.play .hero-mark .mb0{animation-delay:.08s,2.2s}
.play .hero-mark .mb1{animation-delay:.14s,2.28s}
.play .hero-mark .mb2{animation-delay:.19s,2.36s}
.play .hero-mark .mb3{animation-delay:.24s,2.44s}
.play .hero-mark .mb4{animation-delay:.29s,2.52s}
.play .hero-mark .mb5{animation-delay:.34s,2.6s}
.play .hero-mark .mb6{animation-delay:.39s,2.68s}
@keyframes blattAuf{from{opacity:0;transform:scale(.55)}to{opacity:1;transform:none}}
@keyframes heroSheen{
  0%,54%{opacity:1}
  62%{opacity:.62}
  70%{opacity:.86}
  78%,100%{opacity:1}
}
@keyframes blattIn{from{opacity:0;transform:scale(0)}to{opacity:1;transform:none}}
@keyframes stammIn{from{opacity:0;transform:scaleY(0)}to{opacity:1;transform:none}}

.greet{font-size:clamp(24px,4vw,31px);font-weight:600;letter-spacing:-.02em;
       margin-bottom:34px;display:flex;gap:.32em;flex-wrap:wrap;justify-content:center;
       perspective:640px}
.gw{display:inline-block;white-space:nowrap}
/* Statische Fallback-Zeile (vor der Anmeldung): Wörter treten nacheinander auf */
.play .gw:not(:has(.gc)){opacity:0;filter:blur(10px);transform:translateY(10px);
          animation:wordIn .8s var(--ease) forwards;
          animation-delay:calc(.28s + var(--i,0)*.09s)}
@keyframes wordIn{to{opacity:1;filter:blur(0);transform:none}}
/* Begrüßung mit Namen: jedes Zeichen kippt einmal beim Öffnen herein –
   danach steht die Zeile still. Keine Dauer-Animation. */
.gc{display:inline-block;transform-origin:50% 85%;min-width:.001em}
.play .gc{opacity:0;transform:translateY(24px) rotateX(56deg) scale(.9);filter:blur(7px);
  animation:zeichenAuftritt .68s var(--swift) both;
  animation-delay:calc(.22s + var(--c)*.03s)}
@keyframes zeichenAuftritt{
  62%{opacity:1;filter:blur(0);transform:translateY(-2px) rotateX(-7deg) scale(1.04)}
  100%{opacity:1;filter:blur(0);transform:none}}
/* Der Name schlicht in der Akzentfarbe (Bernstein) */
.gname .gc{color:var(--akzent)}

.slot{width:min(var(--composer-col),100%)}
.hero .slot{display:flex;justify-content:center}
.play.boot .composer{animation:riseIn .9s var(--swift) .45s both}
@keyframes riseIn{from{opacity:0;transform:translateY(22px) scale(.97)}
                  to{opacity:1;transform:none}}

/* ── Composer ─────────────────────────────────────────────── */
/* Box um das Eingabefeld – der Footer drumherum bleibt transparent.
   Glas: weich gezeichneter Grund, außen eine haarfeine Kontur, innen
   ein schmaler Saum (--glas-kante), der wie die gerundete Kante einer
   Glasplatte wirkt – oben hell, unten leicht schattiert, in den Ecken
   rund. Kein Leuchten, keine Bewegung; nur der Fokus hebt die Kante. */
.composer{
  --kante:var(--glas-kante);
  cursor:text;                      /* die ganze Box verhält sich wie ein Eingabefeld */
  position:relative;width:100%;
  background:var(--field);border:0;border-radius:30px;
  -webkit-backdrop-filter:blur(24px) saturate(1.6);
  backdrop-filter:blur(24px) saturate(1.6);
  padding:16px 15px 11px 21px;
  box-shadow:var(--comp-shadow);
  /* translate statt transform: kollidiert nicht mit Intro-/FLIP-Animationen */
  transition:box-shadow .55s var(--ease),background .45s var(--ease),
             translate .5s var(--swift);
}
/* Außenkontur: haarfeine Verlaufskante (Licht von oben) */
.composer::before{
  content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;
  background:var(--edge-comp);pointer-events:none;
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;
  transition:background .55s var(--ease);
}
/* Glaskante: der Saum innen, liegt nur im Rand und folgt der Rundung */
.composer::after{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  box-shadow:var(--kante);
  transition:box-shadow .55s var(--ease);
}
.composer:focus-within{
  --kante:var(--glas-kante-focus);
  background:var(--field-focus);
  box-shadow:var(--comp-shadow-focus);
  translate:0 -2px;
}
.composer:focus-within::before{background:var(--edge-comp-focus)}
/* ── Generierung: ruhige Lichtkante unten, sonst bleibt das Glas still ── */
body.generating .composer::after{
  box-shadow:var(--kante),inset 0 -1px 0 rgba(var(--akzent-rgb),.4);
}

/* Absenden: kurzer, satter Impuls */
.composer.sent{animation:sentPulse .55s var(--swift)}
@keyframes sentPulse{0%{transform:scale(1)}28%{transform:scale(.99) translateY(1px)}
                     100%{transform:scale(1)}}

#input{
  width:100%;max-height:190px;resize:none;border:0;outline:0;background:none;
  color:var(--fg);font:inherit;font-size:15.5px;line-height:1.6;
  letter-spacing:-.003em;caret-color:var(--akzent);
  overflow-y:hidden;transition:height .22s var(--swift);   /* wächst weich mit dem Text */
}
#input.scrollt{overflow-y:auto}
#input::placeholder{color:var(--t30);
  transition:color .45s var(--ease),opacity .45s var(--ease)}
.composer:focus-within #input::placeholder{color:var(--t45);opacity:.75}
#input::-webkit-scrollbar{width:8px}
#input::-webkit-scrollbar-thumb{background:var(--t10);border-radius:4px}

.composer-bar{display:flex;align-items:flex-end;justify-content:space-between;
              margin-top:9px}

/* ── Kontextfüllstand: ein blauer Bogen in der linken unteren Ecke ────
   Er beginnt unten und wächst die Rundung entlang; ist die Ecke ganz
   umfahren, ist das Kontextfenster des Modells voll. Er liegt auf der
   Außenkante (Radius 30, Strich 1,5) – die Zahl steht beim Zeigen auf
   den Bogen: Zeigefläche ist nur ein 10 px schmales Band um die Linie
   (.hit), nicht die ganze Ecke – so bleibt die Klammer-Taste frei. */
.ctx-arc{position:absolute;left:0;bottom:0;width:30px;height:30px;z-index:1;pointer-events:none}
.ctx-arc svg{display:block;width:30px;height:30px;overflow:visible}
.ctx-arc path{fill:none;stroke:var(--akzent);stroke-width:1.5;stroke-linecap:round;
  stroke-dasharray:100;stroke-dashoffset:100;
  transition:stroke-dashoffset .35s var(--swift)}
.ctx-arc .hit{stroke:transparent;stroke-width:10;stroke-dasharray:none;stroke-dashoffset:0;
  pointer-events:stroke;cursor:default;transition:none}
.ctx-arc::after{content:attr(data-tip);position:absolute;left:6px;top:calc(100% + 8px);
  white-space:nowrap;background:var(--fg);color:var(--bg);
  font-size:12px;font-weight:550;letter-spacing:0;padding:6px 10px;border-radius:9px;
  opacity:0;translate:0 -4px;pointer-events:none;z-index:2;
  transition:opacity .25s var(--ease),translate .3s var(--swift)}
.ctx-arc:hover::after{opacity:1;translate:0 0}

.icon-btn{
  width:38px;height:38px;border-radius:50%;border:1px solid var(--t10);
  color:var(--t60);display:grid;place-items:center;
  transition:background .4s var(--ease),color .4s var(--ease),
             border-color .4s var(--ease),transform .5s var(--swift),
             box-shadow .4s var(--ease);
}
.icon-btn:hover{background:var(--t07);color:var(--fg);border-color:var(--t20);
  transform:translateY(-1px);box-shadow:0 6px 16px -8px var(--t45)}
.icon-btn:active{transform:scale(.9)}

.send-btn{
  position:relative;width:38px;height:38px;border-radius:50%;
  background:var(--fg);color:var(--bg);display:grid;place-items:center;
  box-shadow:0 3px 14px -4px var(--t45);
  transition:opacity .45s var(--ease),transform .55s var(--swift),
             box-shadow .45s var(--ease);
}
.send-btn:disabled{opacity:.16;transform:scale(.9);box-shadow:none;cursor:default}
.send-btn:not(:disabled):hover{transform:scale(1.06) translateY(-1px);
  box-shadow:0 8px 22px -6px var(--t60)}
.send-btn:not(:disabled):active{transform:scale(.93)}
.send-btn .ic{position:absolute;inset:0;margin:auto;
              transition:opacity .3s var(--ease),transform .45s var(--swift)}
.send-btn .ic-stop{opacity:0;transform:scale(.4) rotate(-90deg)}
body.generating .send-btn .ic-send{opacity:0;transform:scale(.4) rotate(90deg)}
body.generating .send-btn .ic-stop{opacity:1;transform:scale(1)}
body.generating .send-btn{animation:stopGlow 2.2s ease-in-out infinite}
@keyframes stopGlow{0%,100%{opacity:1}50%{opacity:.72}}

/* Anhang-Chips */
.chips{display:flex;flex-wrap:wrap;gap:8px;margin:2px 0 12px}
.chip{
  display:flex;align-items:center;gap:9px;max-width:230px;
  background:var(--t05);border:1px solid var(--t10);border-radius:14px;
  padding:6px 9px;animation:chipIn .45s var(--swift) both;
}
@keyframes chipIn{from{opacity:0;transform:translateY(6px) scale(.92)}
                  to{opacity:1;transform:none}}
.chip.out{opacity:0;transform:scale(.88);transition:opacity .25s,transform .25s}
.chip img{width:40px;height:40px;object-fit:cover;border-radius:9px;
          filter:grayscale(1) contrast(1.05)}
.chip .f-ic{width:34px;height:34px;border-radius:9px;background:var(--t07);
            display:grid;place-items:center;color:var(--t60)}
.chip .f-ic .ic{width:16px;height:16px}
.chip .meta{min-width:0;display:flex;flex-direction:column;line-height:1.3}
.chip .name{font-size:12px;color:var(--t90);white-space:nowrap;
            overflow:hidden;text-overflow:ellipsis}
.chip .size{font-size:10.5px;color:var(--t45)}
.chip .rm{width:22px;height:22px;border-radius:50%;color:var(--t45);
          display:grid;place-items:center;flex:0 0 auto;
          transition:background .3s,color .3s}
.chip .rm .ic{width:12px;height:12px}
.chip .rm:hover{background:var(--fg);color:var(--bg)}

/* ── Dock ─────────────────────────────────────────────────── */
/* Dock schwebt über dem Verlauf – kein eigener (schwarzer) Kasten,
   der Chat läuft dahinter weiter. */
#dock{
  position:absolute;left:0;right:0;bottom:0;z-index:30;
  padding:10px 24px calc(14px + env(safe-area-inset-bottom));
  display:flex;flex-direction:column;align-items:center;gap:9px;
  background:transparent;pointer-events:none;
}
#dock > *{pointer-events:auto}
body.empty #dock{visibility:hidden}
#dock .slot{margin:0 auto}
.disclaimer{align-self:stretch;text-align:center;
  font-size:11px;color:var(--t30);letter-spacing:.01em;user-select:none;
            opacity:0;transition:opacity .8s var(--ease) .3s}
body.chat .disclaimer{opacity:1}

/* ── Nach-unten-Knopf ─────────────────────────────────────── */
.jump{
  position:absolute;left:50%;bottom:calc(var(--dock-h) + 14px);z-index:35;
  width:34px;height:34px;border-radius:50%;
  background:var(--raised);border:1px solid var(--t14);color:var(--t75);
  box-shadow:0 6px 18px -8px rgba(0,0,0,.22);
  display:grid;place-items:center;
  opacity:0;transform:translate(-50%,8px) scale(.85);pointer-events:none;
  transition:opacity .4s var(--ease),transform .4s var(--swift),
             background .3s,color .3s,border-color .3s;
}
.jump.show{opacity:1;transform:translate(-50%,0) scale(1);pointer-events:auto}
.jump:hover{background:var(--fg);color:var(--bg);border-color:var(--fg)}
.jump .ic{width:15px;height:15px}

/* ── Drag & Drop ──────────────────────────────────────────── */
#dropzone{
  position:fixed;inset:0;z-index:80;display:grid;place-items:center;
  background:var(--veil-strong);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  opacity:0;visibility:hidden;
  transition:opacity .3s var(--ease),visibility 0s .3s;
}
body.dragging #dropzone{opacity:1;visibility:visible;transition-delay:0s}
.drop-inner{
  display:flex;flex-direction:column;align-items:center;gap:18px;
  border:1.5px dashed var(--t30);border-radius:32px;
  padding:56px 84px;color:var(--t75);font-size:15px;
  transform:scale(.96);transition:transform .35s var(--swift);
}
body.dragging .drop-inner{transform:scale(1)}
.drop-mark{width:40px;height:36px;animation:barPulse 1.2s ease-in-out infinite}

/* ── Responsive ───────────────────────────────────────────── */
@media (max-width:900px){
  #nav{
    position:fixed;inset:0 auto 0 0;z-index:90;width:288px;
    background:var(--bg);
    transform:translateX(-105%);
    border-right:1px solid var(--t07);
    transition:transform .45s var(--swift);
  }
  html.nav-collapsed #nav,html.pre-collapsed #nav{width:288px}
  .nav-inner{width:288px}
  body.nav-open #nav{transform:translateX(0)}
  body.nav-open #backdrop{opacity:1;visibility:visible;transition-delay:0s}
  /* mobil ist die Navigation ausgeblendet → Steuerung immer sichtbar */
  #floatCtl{opacity:1;pointer-events:auto;translate:0}
}
@media (max-width:600px){
  .thread{padding:10px 16px 30px}
  .ai-mark{display:none}
  .bubble{max-width:88%}
  #dock{padding-left:14px;padding-right:14px}
}

/* ── Reduzierte Bewegung ──────────────────────────────────── */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms!important;
    animation-iteration-count:1!important;
    transition-duration:.01ms!important;
  }
}

/* ══ v2: Agent-Loop, Login, Admin, Outline ═════════════════ */

/* ── Segmente & Status ────────────────────────────────────── */
.seg{margin:0 0 4px}
.seg:empty{display:none}
.status-line{display:flex;align-items:center;gap:10px;margin:6px 0 10px;height:24px}
.stopped-note{font-size:12px;color:var(--t45);margin-top:8px}
.msg.ai.running .ai-mark .mb{animation:barPulse 1.05s ease-in-out infinite}
.msg.ai.running .ai-mark .mb1{animation-delay:0s}
.msg.ai.running .ai-mark .mb2{animation-delay:.09s}
.msg.ai.running .ai-mark .mb3{animation-delay:.18s}
.msg.ai.running .ai-mark .mb4{animation-delay:.27s}
.msg.ai.running .ai-mark .mb5{animation-delay:.36s}

/* ── Überschriften im Fließtext ──────────────────────────── */
.ai-body h3.md-h{font-size:16.5px;font-weight:650;color:var(--fg);
  margin:20px 0 10px;letter-spacing:-.01em}
.ai-body .seg > h3.md-h:first-child{margin-top:4px}
/* Ebenen: # und ## deutlich größer, #### und tiefer kleiner als ### */
.ai-body h3.md-h1{font-size:21px}
.ai-body h3.md-h2{font-size:18.5px}
.ai-body h3.md-h4{font-size:15px}
.ai-body h3.md-h5,.ai-body h3.md-h6{font-size:14px;color:var(--t75)}
.ai-body a{color:var(--fg);text-decoration:underline;text-decoration-color:var(--t30);
  text-underline-offset:3px;transition:text-decoration-color .3s var(--ease)}
.ai-body a:hover{text-decoration-color:var(--fg)}

/* Verweise als Kapseln: Erkennungsbild der Zielseite, dezenter Rand,
   kein Unterstrich – lange Beschriftungen laufen in eine Ellipse aus. */
.ai-body a.md-link{display:inline-flex;align-items:center;gap:6px;max-width:340px;
  padding:1px 9px 1px 5px;margin:0 1px;vertical-align:-4px;
  border:1px solid var(--t10);border-radius:9px;background:var(--t03);
  color:var(--t75);font-size:.92em;line-height:1.55;text-decoration:none;
  transition:border-color .25s var(--ease),color .25s var(--ease),
             background .25s var(--ease)}
.ai-body a.md-link:hover{border-color:var(--t30);color:var(--fg);background:var(--t05)}
.link-fav{flex:0 0 auto;width:15px;height:15px;border-radius:4px;background:var(--t07);
  display:inline-flex;align-items:center;justify-content:center;
  font-size:9px;font-weight:700;color:var(--t60);overflow:hidden;user-select:none}
.link-fav img{width:100%;height:100%;object-fit:cover}
.link-text{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* ── Codeblöcke ──────────────────────────────────────────── */
.code-card{margin:6px 0 14px;border:1px solid var(--t10);border-radius:14px;
  overflow:hidden;background:var(--t03)}
.code-head{display:flex;align-items:center;justify-content:space-between;
  padding:7px 8px 7px 14px;border-bottom:1px solid var(--t07);
  font-family:var(--mono);font-size:10.5px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--t45)}
.code-copy{width:26px;height:26px;border-radius:7px;color:var(--t45);
  display:grid;place-items:center;transition:background .3s,color .3s}
.code-copy .ic{width:13px;height:13px}
.code-copy:hover{background:var(--t07);color:var(--fg)}
.code-card pre{margin:0;padding:12px 16px;overflow-x:auto;
  font-family:var(--mono);font-size:12.5px;line-height:1.6;color:var(--t90)}
/* Die allgemeine `.ai-body code`-Regel formt Inline-Code als Pille und
   setzt nowrap. Im Block muss dagegen der Quelltext mit allen Zeilen und
   Einrückungen erhalten bleiben. */
.ai-body .code-card pre code{display:block;font:inherit;color:inherit;
  white-space:pre;background:none;border:0;border-radius:0;padding:0}
.code-card .cl{display:inline;opacity:0;transition:opacity .35s var(--ease)}
.code-card .cl.on{opacity:1}
.code-head em{margin-left:auto;font-style:normal;text-transform:none;letter-spacing:0;
  color:var(--t30);font-family:var(--font);font-size:10.5px}
.live-code-card{width:min(680px,100%);margin:0;background:var(--t03)}
.live-code-card pre{max-height:min(48vh,440px);overflow:auto;scrollbar-gutter:stable}
/* Syntaxfarben bleiben bewusst ruhig – Struktur statt Regenbogen. */
.syn-comment{color:#718096;font-style:italic}
.syn-string{color:#8fd18b}
.syn-keyword,.syn-tag{color:#72caf0;font-weight:550}
.syn-number{color:#d7a86e}
.syn-literal{color:#c8a7ef}
.syn-punc{color:var(--t60)}
/* Nur im Diff: die gelöschte Zeile. Die hinzugefügte nimmt syn-string. */
.syn-weg{color:#e58f98}
html.light .syn-comment{color:#7a746c}
html.light .syn-string{color:#397f4a}
html.light .syn-keyword,html.light .syn-tag{color:#126fa3}
html.light .syn-number{color:#9b5d18}
html.light .syn-literal{color:#744e9e}
html.light .syn-weg{color:#a8323f}

/* ── Tool-Karten ─────────────────────────────────────────── */
.tool-card{margin:8px 0;border:1px solid var(--t10);border-radius:16px;
  background:var(--t03);overflow:hidden;max-width:600px;
  animation:msgIn .5s var(--swift) both;
  transition:border-color .4s var(--ease),background .4s var(--ease)}
.tool-card.running{border-color:var(--t20)}
.tc-head{display:flex;align-items:center;gap:11px;width:100%;
  padding:11px 14px;text-align:left;font-size:13px;color:var(--t75)}
.tc-ic{width:16px;height:16px;flex:0 0 auto;color:var(--t60)}
.tool-card.running .tc-ic{color:var(--fg)}
.tc-title{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  font-weight:550;color:var(--t90)}
.tc-state{flex:0 0 auto;display:grid;place-items:center;width:22px;height:22px}
.tc-state .ok{color:var(--fg);width:15px;height:15px}
.tc-state .err{color:var(--t60);width:14px;height:14px}
.tc-dots{display:flex;gap:4px}
.tc-dots i{width:5px;height:5px;border-radius:50%;background:var(--fg);
  animation:tcDot 1s ease-in-out infinite}
.tc-dots i:nth-child(2){animation-delay:.16s}
.tc-dots i:nth-child(3){animation-delay:.32s}
@keyframes tcDot{0%,100%{opacity:.2;transform:scale(.8)}50%{opacity:1;transform:scale(1)}}
.tc-chev{width:14px;height:14px;color:var(--t45);flex:0 0 auto;
  transition:transform .35s var(--swift)}
.tool-card.open .tc-chev{transform:rotate(180deg)}
.tc-body{border-top:1px solid var(--t07);padding:10px 14px;
  display:flex;flex-direction:column;gap:8px;
  animation:tcBody .4s var(--ease) both}
@keyframes tcBody{from{opacity:0;transform:translateY(-4px)}to{opacity:1}}
.tc-note{font-size:12.5px;color:var(--t60)}
/* Formeln (KaTeX): Blocksatz mittig mit Rollbereich für lange Zeilen */
.md-mathe{margin:8px 0;overflow-x:auto;overflow-y:hidden;padding:2px 0}
.md-mathe .katex-display{margin:6px 0}
.tok.mathe .katex{font-size:1.05em}
/* Im kursiven Denkblock stehen Formeln aufrecht und einen Hauch kleiner */
.trace-think .katex{font-style:normal;font-size:1em}
.tc-shots{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}
.tc-shot{display:block;border-radius:10px;overflow:hidden;border:1px solid var(--t10);
  transition:border-color .25s var(--ease)}
.tc-shot:hover{border-color:var(--t30)}
.tc-shot img{display:block;max-width:230px;max-height:150px;object-fit:cover}
.tc-shot-datei{font-size:12px;color:var(--t60);border:1px solid var(--t10);
  border-radius:9px;padding:4px 9px;text-decoration:none}
.tc-shot-datei:hover{border-color:var(--t30);color:var(--fg)}
.tc-err{font-size:12.5px;color:var(--t75);
  border-left:2px solid var(--t30);padding-left:10px}

/* Suchergebnisse */
.sr{display:flex;gap:10px;padding:8px 10px;border-radius:10px;text-decoration:none;
  color:inherit;transition:background .25s var(--ease)}
.sr:hover{background:var(--t05)}
.sr-dot{flex:0 0 auto;width:7px;height:7px;border-radius:50%;background:var(--akzent);
  margin-top:6px;opacity:.9}
/* Erkennungsbild der Seite. Bis es da ist – oder wenn die Seite keins
   hat – steht der Anfangsbuchstabe des Gastgebers im Feld. */
.sr-fav{flex:0 0 auto;width:18px;height:18px;margin-top:2px;border-radius:5px;
  display:grid;place-items:center;overflow:hidden;
  background:var(--t07);border:1px solid var(--t07);
  font-size:10px;font-weight:650;color:var(--t45);line-height:1;
  transition:background .3s var(--ease),border-color .3s var(--ease)}
.sr-fav img{width:100%;height:100%;object-fit:contain;display:block}
.sr-fav:has(img){background:transparent;border-color:transparent}
/* Sammelleiste in der zugeklappten Kopfzeile: leicht überlappend, damit
   auch sechs Zeichen noch nebeneinander passen. Beim Aufklappen weg –
   dann stehen sie ja ausführlich in der Liste darunter. */
.tc-favs{display:flex;align-items:center;flex:0 0 auto;margin-left:auto;padding-left:8px;
  transition:opacity .25s var(--ease),width .25s var(--ease)}
.tc-favs .sr-fav{width:16px;height:16px;margin:0 0 0 -4px;border-radius:4px;
  border:1px solid var(--bg);background:var(--t10);font-size:9px}
.tc-favs .sr-fav:first-child{margin-left:0}
.tc-favs .sr-fav:has(img){background:var(--bg)}
.tool-card.open .tc-favs{opacity:0;width:0;padding:0;overflow:hidden}

.sr-solo{padding:2px 0}
.sr-solo:hover{background:none}
.sr-solo:hover .sr-main strong{text-decoration:underline;text-underline-offset:3px}
.sr-main{min-width:0;display:flex;flex-direction:column;gap:1px}
.sr-main strong{font-size:13px;font-weight:550;color:var(--t90);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sr-main em{font-style:normal;font-size:11px;color:var(--t45)}
.sr-snip{font-size:12px;color:var(--t60);line-height:1.45;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}

/* Terminal */
.term{margin:0;background:#000;color:rgba(255,255,255,.88);border-radius:11px;
  border:1px solid rgba(255,255,255,.12);
  padding:12px 14px;font-family:var(--mono);font-size:12px;line-height:1.6;
  overflow-x:auto;white-space:pre-wrap;word-break:break-word;max-height:300px;overflow-y:auto}
html.light .term{box-shadow:0 10px 26px -14px rgba(0,0,0,.4)}
.term-cmd{color:var(--akzent);font-weight:600}

/* Datei-Downloads */
.files-row{display:flex;flex-wrap:wrap;gap:10px;margin:10px 0}
.file-card{display:flex;align-items:center;gap:11px;text-decoration:none;color:inherit;
  border:1px solid var(--t10);border-radius:14px;padding:9px 13px;background:var(--panel);
  transition:border-color .3s var(--ease),translate .35s var(--swift),box-shadow .3s var(--ease);
  animation:chipIn .5s var(--swift) both}
.file-card:hover{border-color:var(--t30);translate:0 -1px;box-shadow:var(--panel-shadow)}
.fc-ic{width:34px;height:34px;border-radius:9px;background:var(--t05);
  display:grid;place-items:center;color:var(--t75)}
.fc-meta{display:flex;flex-direction:column;line-height:1.35}
.fc-meta strong{font-size:12.5px;font-weight:600;color:var(--t90)}
.fc-meta em{font-style:normal;font-size:10.5px;color:var(--t45)}
.fc-dl{width:15px;height:15px;color:var(--t45)}
.file-card:hover .fc-dl{color:var(--fg)}

/* ── Visualisierungen: Diagramme frei im Antwortfluss ────────
   Kein Kasten, kein Kartenkopf – Titel, Zeichnung, Legende und Quelle
   stehen wie Absätze im Chat. Serienfarben kommen als CSS-Variablen
   herein (--viz-s1…s8) und folgen dem Theme von selbst; das Mobiliar
   (Gitter, Achsen, Beschriftung) trägt die Neutraltöne des Chats:
   haarfeine durchgezogene Linien, zurückhaltende Typo.            */
.viz-card{margin:10px 0 18px;max-width:680px;color:var(--fg)}
.viz{max-width:100%;height:auto;display:block}
.viz-kopf{display:flex;align-items:flex-start;justify-content:space-between;
  gap:12px;margin-bottom:6px}
.viz-titelbox{min-width:0}
.viz-titel{font-size:13px;font-weight:600;color:var(--t75);letter-spacing:.01em}
.viz-untertitel{font-size:11.5px;color:var(--t45);margin-top:1px}
.viz-tab{flex:0 0 auto;font-size:11.5px;color:var(--t45);padding:2px 10px;
  border:1px solid var(--t10);border-radius:9px;
  transition:color .25s var(--ease),border-color .25s var(--ease),background .25s var(--ease)}
.viz-tab:hover{color:var(--fg);border-color:var(--t30);background:var(--t05)}
.viz-koerper{position:relative}
.viz-leer{color:var(--t45);font-size:13.5px;margin:6px 0}

/* Mobiliar */
.viz-grid{stroke:var(--t07);stroke-width:1}
.viz-null{stroke:var(--t20);stroke-width:1}
.viz-fuge{stroke:var(--bg);stroke-width:2}
.viz-tick{fill:var(--t45);font-size:10.5px;font-family:var(--font);
  font-variant-numeric:tabular-nums}
.viz-label{fill:var(--t60);font-size:11px;font-weight:500;font-family:var(--font)}
.viz-wert{fill:var(--t60);font-size:10.5px;font-family:var(--font);
  font-variant-numeric:tabular-nums}
.viz-endname{fill:var(--t75);font-size:11px;font-weight:550;font-family:var(--font)}
.viz-mitte{fill:var(--fg);font-size:21px;font-weight:600;font-family:var(--font)}
.viz-mitte-einheit{fill:var(--t45);font-size:11.5px;font-family:var(--font)}
.viz-kreuz{stroke:var(--t20);stroke-width:1}
.viz-hit{cursor:crosshair}

/* Marken: schlanke Balken mit runder Datenkante, 2px-Linien, Punkte
   mit Ring in Hintergrundfarbe – Trennung durch Freiraum, nie Kontur. */
.viz-mark,.viz-balken{transition:transform .8s var(--swift),filter .25s var(--ease)}
.viz-balken.pre,.viz-stapel.pre{transform:scaleY(0)}
.viz-stapel{transition:transform .8s var(--swift)}
.viz-hbar .viz-mark{transition:transform .7s var(--swift),filter .25s var(--ease)}
.viz-mark.pre-x{transform:scaleX(0)}
.viz-mark.heiss,.viz-seg.heiss,.viz-punkt.heiss{filter:brightness(1.16) saturate(1.06)}
.viz-linie{stroke-width:2;stroke-linecap:round;stroke-linejoin:round;
  transition:stroke-dashoffset 1.2s cubic-bezier(.4,0,.2,1)}
.viz-flaeche{fill-opacity:.1;transition:opacity .9s var(--ease)}
.viz-flaeche.pre{opacity:0}
.viz-punkt{stroke:var(--bg);stroke-width:2;transform-box:fill-box;
  transform-origin:center;transition:transform .45s var(--swift),filter .25s var(--ease)}
.viz-punkt.pre{transform:scale(0)}
.viz-wert.pre,.viz-endname.pre,.viz-label.pre{opacity:0}
.viz-wert,.viz-endname{transition:opacity .5s var(--ease)}
.viz-seg{transition:stroke-dasharray 1s cubic-bezier(.4,0,.2,1),
  stroke-width .25s var(--ease),filter .25s var(--ease)}
.viz-seg.heiss{stroke-width:30}

/* Legende: echte Knöpfe, Klick blendet eine Serie aus */
.viz-legende{display:flex;flex-wrap:wrap;gap:2px 4px;margin:4px 0 0 -9px}
.viz-legende:empty{display:none}
.viz-key{display:inline-flex;align-items:center;gap:7px;padding:3px 9px;
  border-radius:9px;font-size:12px;color:var(--t60);
  transition:background .25s var(--ease),color .25s var(--ease),opacity .25s var(--ease)}
.viz-key:hover{background:var(--t05);color:var(--fg)}
.viz-key.aus{opacity:.45}
.viz-key.aus .viz-key-marke{filter:grayscale(1);opacity:.5}
.viz-key-marke{flex:0 0 auto;width:10px;height:10px;border-radius:3px}
.viz-key-marke.strich{width:14px;height:3px;border-radius:2px}

/* Tooltip: der Wert führt, der Name folgt; Serien-Schlüssel als kurzer
   Farbstrich, nicht als Kasten */
.viz-tip{position:absolute;left:0;top:0;z-index:6;pointer-events:none;
  min-width:120px;max-width:260px;padding:8px 11px;border-radius:11px;
  background:var(--surface);border:1px solid var(--surface-line);
  box-shadow:var(--surface-shadow);opacity:0;transition:opacity .15s var(--ease)}
.viz-tip.an{opacity:1}
.viz-tip-kopf{font-size:11px;font-weight:600;color:var(--t45);margin-bottom:4px}
.viz-tip-zeile{display:flex;align-items:center;gap:8px;padding:1.5px 0;font-size:12px}
.viz-tip-key{flex:0 0 auto;width:10px;height:3px;border-radius:2px}
.viz-tip-key.leer{width:0}
.viz-tip-name{color:var(--t60);min-width:0;overflow:hidden;text-overflow:ellipsis;
  white-space:nowrap}
.viz-tip-name:empty{display:none}
.viz-tip-wert{margin-left:auto;color:var(--fg);font-weight:600;
  font-variant-numeric:tabular-nums;white-space:nowrap}
.viz-tip-zeile.stark .viz-tip-wert{font-size:12.5px}

/* Kennzahlen-Kacheln */
.viz-kpis{display:flex;flex-wrap:wrap;gap:10px;margin:4px 0 2px}
.viz-kpi{flex:1 1 150px;min-width:140px;max-width:240px;padding:12px 14px 11px;
  border:1px solid var(--t07);border-radius:14px;background:var(--t03);
  transition:opacity .6s var(--ease),transform .6s var(--swift)}
.viz-kpi.pre{opacity:0;transform:translateY(8px)}
.viz-kpi-label{font-size:12px;color:var(--t60);margin-bottom:3px}
.viz-kpi-wert{display:flex;align-items:baseline;gap:5px}
.viz-kpi-zahl{font-size:24px;font-weight:600;letter-spacing:-.01em;line-height:1.2}
.viz-kpi-einheit{font-size:12.5px;color:var(--t45)}
.viz-kpi-delta{display:flex;align-items:center;gap:4px;font-size:12px;
  font-weight:600;margin-top:3px}
.viz-kpi-delta.gut{color:var(--viz-gut)}
.viz-kpi-delta.schlecht{color:var(--viz-schlecht)}
.viz-kpi-pfeil{font-size:8.5px;transform:translateY(-.5px)}
.viz-kpi-bezug{color:var(--t45);font-weight:400;margin-left:2px}
.viz-kpi-trend{display:block;margin-top:7px}
.viz-kpi-funke{stroke:var(--t30);stroke-width:1.5;stroke-linecap:round;
  stroke-linejoin:round}
.viz-kpi-funke-ende{fill:var(--viz-s1)}

/* Tabellen-Ansicht: der Zwilling jedes Diagramms */
.viz-tabelle{overflow-x:auto;margin:2px 0 4px}
.viz-tabelle table{border-collapse:collapse;font-size:13px;min-width:60%}
.viz-tabelle th{text-align:left;font-size:11.5px;font-weight:600;color:var(--t60);
  padding:4px 14px 6px 0;border-bottom:1px solid var(--t14);white-space:nowrap}
.viz-tabelle td{padding:4.5px 14px 4.5px 0;border-bottom:1px solid var(--t05);
  color:var(--t90)}
.viz-tabelle td.zahl,.viz-tabelle th.zahl{text-align:right;
  font-variant-numeric:tabular-nums}
.viz-quelle{font-size:11px;color:var(--t45);margin-top:5px}

/* Ablauf-Diagramm */
.viz-edge{stroke:var(--t30);stroke-width:1.6;
  transition:stroke-dashoffset 1s cubic-bezier(.4,0,.2,1)}
.viz-node{transform-box:fill-box;transform-origin:center;
  transition:opacity .5s var(--ease),transform .55s var(--swift)}
.viz-node.pre{opacity:0;transform:scale(.86)}
.viz-node rect{fill:var(--t05);stroke:var(--t20);stroke-width:1;rx:12}
.viz-node-label{fill:var(--t90);font-size:12px;font-weight:550;font-family:var(--font)}

/* ── Alle Chats: Übersicht mit Suche im Hauptbereich ───────
   Öffnet sich über den Knopf am Fuß der Seitenleiste und ersetzt
   den Chatfluss, bis ein Chat gewählt wird. */
/* Die Body-Klasse heißt bewusst anders als die Sektion (.uebersicht) –
   sonst zöge deren Spaltenbreite den ganzen Body in die Mitte. */
body.ue-offen #thread,body.ue-offen #outline,body.ue-offen #jump,
body.ue-offen #hero,body.ue-offen #dock{display:none}
/* Der Chatfluss ist ohne offenen Chat unsichtbar geschaltet (opacity) –
   die Übersicht wohnt im selben Scroller und braucht ihn sichtbar. */
body.ue-offen #scroller{opacity:1;pointer-events:auto}
.uebersicht{max-width:820px;margin:0 auto;padding:30px 26px 70px}
/* Auftritt: Kopf, Suchfeld und Zeilen gleiten kurz versetzt herein –
   die Zeilen bekommen ihren Versatz je Welle aus app.js. */
@keyframes ueAuf{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.ue-kopf{animation:ueAuf .45s var(--ease) backwards}
.ue-suche{animation:ueAuf .45s var(--ease) .06s backwards}
.ue-chat{animation:ueAuf .38s var(--ease) backwards}
.ue-leer{animation:ueAuf .35s var(--ease) backwards}
@media (prefers-reduced-motion: reduce){
  .ue-kopf,.ue-suche,.ue-chat,.ue-leer{animation:none}
}
.ue-kopf{display:flex;align-items:baseline;gap:10px;margin-bottom:14px}
.ue-kopf h2{font-size:19px;font-weight:650;letter-spacing:-.01em}
.ue-zahl{font-size:12.5px;color:var(--t45)}
.ue-suche{position:relative;margin-bottom:14px}
.ue-suche .ic{position:absolute;left:13px;top:50%;translate:0 -50%;
  width:15px;height:15px;color:var(--t45);pointer-events:none}
.ue-suche input{width:100%;height:42px;padding:0 14px 0 40px;border-radius:12px;
  border:1px solid var(--t14);background:var(--panel);color:var(--fg);
  font:inherit;font-size:14px;
  transition:border-color .25s var(--ease),box-shadow .25s var(--ease)}
.ue-suche input::placeholder{color:var(--t45)}
.ue-suche input:focus{outline:none;border-color:rgba(var(--akzent-rgb),.65);
  box-shadow:0 0 0 3px rgba(var(--akzent-rgb),.1)}
.ue-liste{display:flex;flex-direction:column}
.ue-chat{display:block;width:100%;text-align:left;padding:11px 12px;
  border-radius:11px;transition:background .2s var(--ease)}
.ue-chat + .ue-chat{border-top:1px solid var(--t05)}
.ue-chat:hover{background:var(--t05)}
.ue-zeile1{display:flex;align-items:baseline;gap:10px}
.ue-lauf{flex:0 0 auto;width:7px;height:7px;border-radius:50%;
  background:var(--akzent);translate:0 -1px}
.ue-titel{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;
  white-space:nowrap;font-size:14px;color:var(--t90)}
.ue-zeit{flex:0 0 auto;font-size:11.5px;color:var(--t45);white-space:nowrap}
.ue-schnipsel{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
  overflow:hidden;margin-top:3px;font-size:12.5px;line-height:1.5;color:var(--t60)}
.ue-chat mark{background:rgba(var(--akzent-rgb),.22);color:inherit;
  border-radius:3px;padding:0 1px}
.ue-mehr{padding:16px 0 6px;text-align:center;font-size:12.5px;color:var(--t45);
  animation:widgetPuls 1.4s ease-in-out infinite}
.ue-leer{padding:34px 0;text-align:center;font-size:13.5px;color:var(--t45)}

/* Der Weg dorthin: Knopf am Fuß der Chat-Liste */
.chat-alle{display:flex;align-items:center;gap:8px;width:100%;padding:8px 10px;
  margin-top:6px;border-radius:10px;color:var(--t60);font-size:13px;
  transition:background .25s var(--ease),color .25s var(--ease)}
.chat-alle:hover,.chat-alle.active{background:var(--t05);color:var(--fg)}
.chat-alle .ic{width:14px;height:14px;flex:0 0 auto}
.chat-alle-n{margin-left:auto;font-size:11px;color:var(--t45);
  border:1px solid var(--t10);border-radius:8px;padding:0 7px;line-height:1.6}

/* ── Verlaufs-Leiste rechts ──────────────────────────────────
   Die Sprungmarken stehen sichtbar am rechten Rand, sobald ein Chat
   offen ist – ein Strich je Nachricht im gerenderten Fenster, der
   aktive blau. Plätze (top) und Bogen (--ol-x) rechnet app.js; hier
   steht nur, dass alles gleitet: Marken rücken auf, Neue blenden auf
   ihrem Weg herein, Abgeworfene laufen hinaus. Außerhalb eines Chats
   gibt es nichts anzuspringen, dann bleibt sie weg.                */
#outline{position:absolute;right:10px;top:50%;transform:translateY(-50%);z-index:25;
  width:44px;height:0;overflow:hidden;
  opacity:0;pointer-events:none;
  transition:opacity .35s var(--ease),height .45s var(--swift)}
body.chat #outline{opacity:1;pointer-events:auto}
.ol-item{position:absolute;right:0;top:0;width:14px;height:4px;border-radius:2px;
  background:var(--t14);transform:translateX(var(--ol-x,0px));
  transition:background .3s var(--ease),width .35s var(--swift),
    top .45s var(--swift),transform .45s var(--swift),opacity .3s var(--ease)}
.ol-item.ol-ai{width:22px}
.ol-item:hover{background:var(--t45)}
.ol-item.on{background:var(--akzent);width:28px}
.ol-item.ol-in,.ol-item.ol-out{opacity:0}
.ol-item.ol-out{pointer-events:none}
@media (max-width:1100px){#outline{display:none}}

/* ── Account & Menü ──────────────────────────────────────── */
.acct-row{display:flex;align-items:center;gap:10px;width:100%;
  padding:8px 10px;border-radius:13px;margin-bottom:10px;text-align:left;
  transition:background .3s var(--ease)}
.acct-row:hover{background:var(--t05)}
.acct-avatar{flex:0 0 auto;width:30px;height:30px;border-radius:50%;
  background:var(--fg);color:var(--bg);display:grid;place-items:center;
  font-size:13px;font-weight:650}
.acct-meta{flex:1;min-width:0;display:flex;flex-direction:column;line-height:1.25}
.acct-meta strong{font-size:12.5px;font-weight:600;color:var(--t90);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.acct-meta em{font-style:normal;font-size:10.5px;color:var(--t45)}
.acct-chev{width:13px;height:13px;color:var(--t45);transform:rotate(180deg)}
.acct-menu{position:fixed;z-index:120;min-width:220px;
  background:var(--raised);border:1px solid var(--t14);border-radius:14px;
  box-shadow:var(--panel-shadow);padding:6px;
  animation:menuIn .3s var(--swift) both}
@keyframes menuIn{from{opacity:0;transform:translateY(6px) scale(.97)}to{opacity:1;transform:none}}
.acct-menu button{display:flex;align-items:center;gap:10px;width:100%;
  padding:9px 11px;border-radius:9px;font-size:13px;color:var(--t90);
  transition:background .25s var(--ease)}
.acct-menu button:hover{background:var(--t05)}
.acct-menu button .ic{width:15px;height:15px;color:var(--t60)}
.acct-menu hr{border:0;border-top:1px solid var(--t07);margin:5px 8px}

/* ── Modal ───────────────────────────────────────────────── */
.modal{position:fixed;inset:0;z-index:150;display:grid;place-items:center;
  background:var(--backdrop);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  animation:pageIn .3s var(--ease) both}
.modal-card{width:min(620px,calc(100vw - 40px));max-height:min(80vh,700px);
  overflow-y:auto;background:var(--raised);color:var(--fg);
  border:1px solid var(--t14);border-radius:22px;padding:20px 22px;
  box-shadow:var(--panel-shadow);animation:menuIn .4s var(--swift) both}
.modal-card header{display:flex;align-items:center;justify-content:space-between;
  margin-bottom:6px}
.modal-card h2{display:flex;align-items:center;gap:10px;
  font-size:16px;font-weight:650;letter-spacing:-.01em}
.modal-card h2 .ic{width:17px;height:17px}
.modal-hint{font-size:12.5px;color:var(--t60);line-height:1.55;margin-bottom:14px}
.skill-list{display:flex;flex-direction:column;gap:6px;margin-bottom:16px}
.skill-form{border-top:1px solid var(--t07);padding-top:14px;
  display:flex;flex-direction:column;gap:10px}

/* ── Formulare, Reihen, Toasts (Chat + Admin) ────────────── */
.fld{display:flex;flex-direction:column;gap:5px;min-width:0}
.fld span{font-size:11px;font-weight:600;letter-spacing:.05em;color:var(--t45);
  text-transform:uppercase}
.fld input,.fld select{height:42px;padding:0 14px;border-radius:13px;
  border:1px solid var(--t10);background:var(--t03);color:var(--fg);
  font:inherit;font-size:13.5px;outline:0;
  transition:border-color .3s var(--ease),background .3s var(--ease),
             box-shadow .3s var(--ease)}
.fld input:focus,.fld select:focus{border-color:var(--akzent);background:var(--panel-focus);
  box-shadow:0 0 0 3.5px rgba(var(--akzent-rgb),.14)}
/* Die aufgeklappte Liste malt das Betriebssystem, nicht die Seite. Ohne
   eigene, deckende Farbe erbt sie den durchscheinenden Feldgrund – im
   Dunkelmodus stand dann Weiß auf Weiß. Darum hier ausdrücklich setzen. */
option,optgroup{background-color:var(--pop);color:var(--fg)}
optgroup{font-weight:650}
.fld input::placeholder{color:var(--t30)}
.fld.wide{grid-column:1 / -1}
.ad-textarea{width:100%;padding:12px 14px;border-radius:13px;resize:vertical;
  border:1px solid var(--t14);background:var(--t03);color:var(--fg);
  font:inherit;font-size:13.5px;line-height:1.6;outline:0;
  transition:border-color .3s var(--ease),background .3s var(--ease)}
.ad-textarea:focus{border-color:var(--akzent);background:var(--panel-focus);
  box-shadow:0 0 0 3.5px rgba(var(--akzent-rgb),.14)}
.ad-textarea.mono{font-family:var(--mono);font-size:12.5px}

/* Interne Ziele: eine reine Anzeige. Sie sieht aus wie ein Feld, damit
   klar ist, dass hier etwas steht – aber es gibt nichts einzutippen,
   also auch keinen Fokusrahmen. Je Ziel eine Pille: der Name, wofür er
   steht, und woher die Freigabe kommt. */
.ziele{display:flex;flex-wrap:wrap;align-items:center;gap:8px;width:100%;
  min-height:54px;padding:10px;border-radius:13px;
  border:1px solid var(--t10);background:var(--t03)}
.ziel{display:inline-flex;align-items:center;gap:9px;height:32px;
  padding:0 11px;border-radius:10px;
  border:1px solid var(--t10);background:var(--t07);
  animation:chipIn .35s var(--swift) both}
.ziel .wert{font-family:var(--mono);font-size:12.5px;color:var(--t90)}
.ziel .art{font-size:10.5px;letter-spacing:.04em;color:var(--t45)}
.ziel .quelle{font-size:10.5px;color:var(--t45);padding-left:9px;
  border-left:1px solid var(--t10);max-width:190px;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
/* „*" hebt die Sperre auf – das darf nicht aussehen wie jeder andere
   Eintrag, sonst rutscht es unbemerkt durch. */
.ziel.alles{border-color:color-mix(in srgb,#ffb454 45%,transparent);
  background:color-mix(in srgb,#ffb454 14%,transparent)}
.ziel.alles .wert{color:#ffce8a}
.ziele-leer{font-size:12.5px;color:var(--t45);padding:0 3px}
html.light .ziel.alles .wert{color:#8a5200}
.ad-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:12px;margin:10px 0}
.ad-row{display:flex;align-items:center;gap:13px;padding:12px 14px;
  border:1px solid var(--t07);border-radius:15px;background:var(--t03);
  transition:border-color .3s var(--ease),background .3s var(--ease),
             box-shadow .3s var(--ease),translate .35s var(--swift)}
.ad-row:hover{background:var(--panel);border-color:var(--t14);
  translate:0 -1px;box-shadow:0 1px 2px var(--t05),0 10px 24px -16px var(--t45)}
.ad-row-main{flex:1;min-width:0;display:flex;flex-direction:column;line-height:1.4}
.ad-row-main strong{font-size:13px;font-weight:600;color:var(--t90);
  display:flex;align-items:center;gap:8px}
.ad-row-main span{font-size:12px;color:var(--t60)}
.ad-row-main code{font-family:var(--mono);font-size:11px;color:var(--t45);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}


/* Kippschalter-Zeile in Karten (Eigener Rechner, Administration) */
.ad-toggles{display:flex;flex-wrap:wrap;align-items:center;gap:10px 28px;padding:1px 0}
.ad-toggles .ad-switch{margin:0;font-size:12.5px;gap:9px;color:var(--t75);
  transition:color .3s var(--ease)}
.ad-toggles .ad-switch:has(input:checked){color:var(--fg)}
.ad-switch:has(input:disabled){cursor:default;color:var(--t45)}
.ad-switch input:disabled + .sw{opacity:.4}

/* Auswahl-Pillen (MCP-Server, Konto-Optionen): eigene Häkchen statt
   Browser-Checkboxen – gleiche Form in jedem Browser, beide Themes */
.ad-check{position:relative;display:inline-flex;align-items:center;gap:8px;
  font-size:12px;color:var(--t70);
  border:1px solid var(--t10);border-radius:10px;padding:6px 11px;cursor:pointer;
  transition:border-color .25s var(--ease),color .25s var(--ease),background .25s var(--ease)}
.ad-check:hover{border-color:var(--t30);color:var(--fg)}
.ad-check:has(input:checked){border-color:color-mix(in srgb,var(--akzent) 55%,transparent);
  color:var(--fg);background:color-mix(in srgb,var(--akzent) 9%,transparent)}
.ad-check input{appearance:none;-webkit-appearance:none;flex:none;margin:0;
  width:16px;height:16px;border-radius:5.5px;border:1.5px solid var(--t30);
  background:transparent;cursor:pointer;
  transition:background .25s var(--ease),border-color .25s var(--ease)}
.ad-check:hover input{border-color:var(--t45)}
.ad-check input:checked{background:linear-gradient(135deg,var(--akzent-tief),var(--akzent));border-color:transparent}
/* Das Häkchen liegt am Label, nicht am Input – input::after rendert
   Safari nicht. Position: 11px Pillen-Padding + 5px in das Kästchen. */
.ad-check:has(input:checked)::after{content:"";position:absolute;left:16px;top:50%;
  width:4px;height:8.5px;margin-top:-6px;border:solid var(--auf-akzent);border-width:0 2px 2px 0;
  transform:rotate(43deg)}
.ad-check input:focus-visible{outline:2px solid var(--akzent);outline-offset:2px}
.ad-check em{color:var(--t45);font-style:normal}


/* Flacher Akzent – der frühere Schrägverlauf las sich auf kleinen
   Knöpfen als dunkler Streifen an der linken Kante. */
.ad-mini.akzent{background:var(--akzent);border-color:transparent;color:var(--auf-akzent);font-weight:600}
.ad-mini.akzent:hover{background:var(--akzent-hell);
  color:var(--auf-akzent);border-color:transparent;box-shadow:0 6px 18px -6px rgba(var(--akzent-rgb),.55)}
.ad-mini:disabled{opacity:.5;pointer-events:none}

.ad-badge.sperr{color:#ff6b6b;border-color:color-mix(in srgb,#ff6b6b 45%,transparent)}
.ad-badge.warte{color:#ffb86b;border-color:color-mix(in srgb,#ffb86b 45%,transparent)}
html.light .ad-badge.sperr{color:#c43b3b;border-color:rgba(196,59,59,.4)}
html.light .ad-badge.warte{color:#a86a12;border-color:rgba(168,106,18,.4)}

/* Options-Pillen untereinander (Konto anlegen) – mit Luft dazwischen */
.ad-optionen{display:flex;flex-direction:column;align-items:flex-start;
  gap:9px;margin:14px 0 18px}

/* Umschalter „Datei hochladen | Einfügen": ein Schieber gleitet unter
   die aktive Wahl – die Knöpfe selbst bleiben durchsichtig. Die Karte
   ist eine Flex-Spalte und würde den Rahmen sonst auf volle Breite
   ziehen; align-self hält ihn eng um die zwei Optionen. */
.ad-seg{position:relative;display:inline-flex;align-self:flex-start;
  gap:4px;padding:4px;margin:4px 0 14px;
  border:1px solid var(--t10);border-radius:12px;background:var(--t03)}
.ad-seg .ad-seg-schieber{position:absolute;top:4px;bottom:4px;left:4px;width:0;
  border-radius:9px;background:var(--fg);
  transition:left .4s var(--swift),width .4s var(--swift)}
.ad-seg button{position:relative;height:30px;padding:0 16px;border:0;border-radius:9px;
  background:transparent;color:var(--t60);font-size:12.5px;font-weight:600;
  font-family:inherit;cursor:pointer;transition:color .3s var(--ease)}
.ad-seg button:hover{color:var(--fg)}
.ad-seg button.on{color:var(--bg)}
/* Solange der Schieber noch nie vermessen wurde, trägt die aktive Wahl
   ihre Pille selbst – sonst stünde dort bg-farbener Text auf nichts. */
.ad-seg:has(.ad-seg-schieber:not([style])) button.on{background:var(--fg)}
.ad-seg button:focus-visible{outline:2px solid var(--akzent);outline-offset:2px}

/* Datei-Übernahme fürs CA-Zertifikat */
.ad-upload{display:flex;align-items:center;gap:14px;flex-wrap:wrap;
  padding:16px;margin:2px 0 10px;
  border:1.5px dashed var(--t14);border-radius:13px}
.ad-upload-name{flex:1;min-width:200px;font-size:12px;color:var(--t60);line-height:1.5}

/* display-Regeln (fld, forms …) dürfen das hidden-Attribut nie
   überstimmen – gleiche Falle wie auf der Anmeldeseite. */
.admin-page [hidden]{display:none!important}
.ad-certinfo{display:flex;flex-direction:column;gap:6px;margin:-4px 0 10px}
.ad-warn{font-size:12.5px;color:#ffb86b;line-height:1.5;margin:2px 0 0}
/* Ein Satz unter dem Kartenkopf, wo ein Feld mehr Erklärung braucht als sein Name */
.ad-lead{font-size:12.5px;color:var(--t45);line-height:1.5;margin:-4px 0 12px;max-width:62ch}

.sk-zeile{margin:0;font-size:13px;color:var(--t70);line-height:1.5}
.sk-zeile strong{color:var(--fg);font-weight:600}
.sk-lampe{display:inline-block;width:7px;height:7px;border-radius:50%;
  margin-right:8px;vertical-align:1px}
.sk-lampe.gut{background:#3ddc84;box-shadow:0 0 0 3px color-mix(in srgb,#3ddc84 22%,transparent)}
.sk-lampe.schlecht{background:#ff6b6b;box-shadow:0 0 0 3px color-mix(in srgb,#ff6b6b 22%,transparent)}

.ad-mini{height:30px;padding:0 12px;border-radius:9px;border:1px solid var(--t14);
  font-size:12px;color:var(--t75);display:flex;align-items:center;gap:6px;
  transition:background .3s,color .3s,border-color .3s}
.ad-mini .ic{width:12px;height:12px}
.ad-mini:hover{background:var(--fg);color:var(--bg);border-color:var(--fg)}
.ad-mini.danger:hover{background:var(--fg);color:var(--bg)}
.ad-badge{font-size:10.5px;font-weight:600;letter-spacing:.05em;color:var(--t45);
  border:1px solid var(--t14);border-radius:7px;padding:2px 7px}
.ad-badge.ok{color:var(--fg);border-color:var(--t45)}
.ad-badge.err{color:var(--t60)}
.ad-avatar{width:30px;height:30px;border-radius:50%;background:var(--fg);color:var(--bg);
  display:grid;place-items:center;font-size:12.5px;font-weight:650;flex:0 0 auto}
.ad-save{display:inline-flex;align-items:center;gap:8px;height:42px;padding:0 22px;
  border-radius:14px;background:var(--fg);color:var(--bg);font-size:13px;font-weight:600;
  margin-top:18px;align-self:flex-start;
  box-shadow:0 2px 8px -2px var(--t45);
  transition:translate .4s var(--swift),box-shadow .4s var(--ease),transform .25s var(--ease)}
.ad-save .ic{width:14px;height:14px}
.ad-save:hover{translate:0 -2px;box-shadow:0 10px 26px -8px var(--t60)}
.ad-save:active{transform:scale(.97)}
.ad-switch{display:flex;align-items:center;gap:10px;font-size:13px;color:var(--t90);
  cursor:pointer;user-select:none;margin:8px 0}
.ad-switch input{position:absolute;opacity:0;pointer-events:none}
.ad-switch .sw{width:38px;height:22px;border-radius:11px;background:var(--t14);
  position:relative;flex:0 0 auto;transition:background .35s var(--ease)}
.ad-switch .sw::after{content:"";position:absolute;top:3px;left:3px;width:16px;height:16px;
  border-radius:50%;background:var(--bg);box-shadow:0 1px 4px rgba(0,0,0,.3);
  transition:transform .35s var(--swift),background .35s}
.ad-switch input:checked + .sw{background:var(--akzent)}
.ad-switch input:checked + .sw::after{transform:translateX(16px);background:var(--auf-akzent)}
.ad-switch.sm .sw{width:32px;height:19px}
.ad-switch.sm .sw::after{width:13px;height:13px}
.ad-switch.sm input:checked + .sw::after{transform:translateX(13px)}

.toast{position:fixed;left:50%;bottom:26px;transform:translate(-50%,14px);z-index:200;
  background:var(--fg);color:var(--bg);font-size:13px;font-weight:550;
  padding:10px 18px;border-radius:13px;opacity:0;pointer-events:none;
  transition:opacity .35s var(--ease),transform .4s var(--swift)}
.toast.show{opacity:1;transform:translate(-50%,0)}
.toast.err{outline:2px solid rgba(255,80,80,.4)}

/* ── Login ───────────────────────────────────────────────── */
body.login-page{display:grid;place-items:center;padding:24px;
  transition:opacity .25s var(--ease)}
body.login-page.leaving{opacity:0}
/* Anmeldung und Geräte-Freigabe: sachlich, flach, ohne Schleier und
   Verlaufskanten – eine klar begrenzte Fläche auf ruhigem Grund. */
.login-wrap{width:min(420px,100%);display:flex;flex-direction:column;
  align-items:center;gap:16px}

.login-card{position:relative;width:100%;
  background:var(--surface);border:1px solid var(--surface-line);border-radius:16px;
  padding:34px 32px 28px;
  box-shadow:var(--surface-shadow);
  display:flex;flex-direction:column;gap:16px}
.login-card.play{animation:loginIn .45s var(--swift) both}
@keyframes loginIn{from{opacity:0;translate:0 8px}to{opacity:1;translate:0}}
.login-card.shake{animation:shake .45s ease-in-out}
@keyframes shake{0%,100%{translate:0}20%{translate:-8px}40%{translate:7px}
  60%{translate:-4px}80%{translate:2px}}

.login-head{display:flex;justify-content:center;margin:2px 0 8px}
.login-logo{width:126px;height:26px}

/* SSO zuerst – der übliche Weg im Unternehmen */
.login-sso{display:flex;flex-direction:column;gap:16px}
.login-ms{display:flex;align-items:center;gap:12px;height:48px;padding:0 16px;
  border:1px solid var(--t14);border-radius:15px;text-decoration:none;
  color:var(--t90);font-size:14px;font-weight:550;background:var(--t03);
  transition:background .35s var(--ease),border-color .35s var(--ease),
             translate .4s var(--swift),box-shadow .35s var(--ease)}
.login-ms svg:first-child{width:19px;height:19px;flex:0 0 auto}
.login-ms span{flex:1}
.ms-go{width:16px;height:16px;color:var(--t45);
  transition:translate .35s var(--swift),color .3s}
.login-ms:hover{background:var(--panel-focus);border-color:var(--t30);
  translate:0 -1px;box-shadow:0 8px 22px -12px var(--t45)}
.login-ms:hover .ms-go{translate:3px 0;color:var(--fg)}
.login-or{display:flex;align-items:center;gap:12px;color:var(--t30);font-size:11px;
  letter-spacing:.04em}
.login-or::before,.login-or::after{content:"";flex:1;height:1px;background:var(--t10)}

#loginForm,#pwForm{display:flex;flex-direction:column;gap:14px}
/* Die display-Regeln oben würden das hidden-Attribut sonst überstimmen –
   beim Passwort-Wechsel muss die Anmeldemaske wirklich verschwinden. */
.login-page [hidden]{display:none!important}
.login-card .fld input{height:46px;border-radius:14px;font-size:14px}
.login-card .fld input:focus{border-color:var(--akzent);
  box-shadow:0 0 0 3.5px rgba(var(--akzent-rgb),.15)}

.login-error{font-size:12.5px;color:var(--t90);line-height:1.5;
  border-left:2px solid #e0574f;border-radius:4px;
  padding:8px 12px;background:var(--t05)}

.login-btn{position:relative;height:48px;border-radius:15px;
  background:var(--fg);color:var(--bg);font-size:14.5px;font-weight:600;
  box-shadow:0 2px 10px -2px var(--t45);
  transition:translate .4s var(--swift),box-shadow .4s var(--ease),opacity .3s}
.login-btn:hover:not(:disabled){translate:0 -2px;box-shadow:0 12px 28px -8px var(--t60)}
.login-btn:active:not(:disabled){scale:.985}
.login-btn:disabled{opacity:.75;cursor:default}
.login-btn .lb-spin{display:none;width:17px;height:17px;border-radius:50%;
  border:2px solid rgba(128,128,128,.35);border-top-color:currentColor;
  animation:tcSpin .7s linear infinite}
.login-btn.busy .lb-text{display:none}
.login-btn.busy .lb-spin{display:block;margin:0 auto}

.login-hint{font-size:11.5px;color:var(--t45);text-align:center;line-height:1.6}
.login-hint code{font-family:var(--mono);background:var(--t05);
  border:1px solid var(--t07);border-radius:6px;padding:1px 6px;color:var(--t75)}
.login-foot{font-size:11px;color:var(--t30);letter-spacing:.03em}

@media (max-width:480px){
  .login-card{padding:28px 22px 24px;border-radius:22px}
  .login-logo{width:111px;height:23px}
}

/* ── Admin-Seite ─────────────────────────────────────────── */
body.admin-page{display:block;overflow:auto;height:auto;min-height:100dvh}
/* Kopf: gehört zur Seite – kein Balken, keine Trennlinie */
.ad-top{position:sticky;top:0;z-index:50;display:flex;align-items:center;gap:14px;
  height:72px;padding:0 22px;border:0;
  background:linear-gradient(to bottom,var(--bg) 62%,transparent)}
.ad-top h1{font-size:15.5px;font-weight:650;letter-spacing:-.012em}
.ad-mark{width:22px;height:20px}
.ad-user{font-size:12.5px;color:var(--t45)}

.ad-panel{display:none;flex-direction:column;gap:20px}
.ad-panel.on{display:flex}
.ad-panel.on > *{animation:cardIn .55s var(--swift) backwards}
.ad-panel.on > *:nth-child(2){animation-delay:.07s}
@keyframes cardIn{from{opacity:0;translate:0 12px}to{opacity:1;translate:0}}

/* Karten wie der Composer: Verlaufskante, warme Tiefe, Lichtkante oben */
.ad-card{position:relative;background:var(--panel);border:0;border-radius:22px;
  padding:24px 26px 26px;box-shadow:var(--comp-shadow),var(--comp-hi);
  display:flex;flex-direction:column}
.ad-card::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;
  background:var(--edge);pointer-events:none;
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude}
.ad-card h2{font-size:16px;font-weight:650;letter-spacing:-.012em;margin-bottom:7px}
.ad-card h3{font-size:10.5px;font-weight:600;letter-spacing:.13em;text-transform:uppercase;
  color:var(--t45);margin:22px 0 2px;display:flex;align-items:center;gap:10px}
.ad-card h3::after{content:"";flex:1;height:1px;background:var(--t07)}
.ad-list{display:flex;flex-direction:column;gap:9px;margin:10px 0 2px}
.modal[hidden]{display:none}
/* Auch die Einträge selbst: `.acct-menu button{display:flex}` schlägt sonst
   das `hidden`-Attribut, und Admin-Panel wie Geräte stünden ohne Recht da. */
.acct-menu[hidden],.acct-menu button[hidden]{display:none}

/* ══ v3: freie Tool-Zeilen, Vorschau-Panel, Admin-Nav, 1200px ═ */

/* ── Tool-Aufrufe ohne Box ───────────────────────────────── */
.tool-card{border:0;background:none;max-width:none;margin:14px 0;
  overflow:visible;border-radius:0}
.tool-card.running{border:0}
.tc-head{padding:3px 6px 3px 0;gap:10px;border-radius:9px;
  transition:background .25s var(--ease)}
.tc-head:hover{background:var(--t03)}
.tc-title{color:var(--t75)}
.tool-card.running .tc-title{color:var(--fg)}
.tc-body{border:0;border-left:2px solid var(--t10);background:none;
  margin:8px 0 4px 7px;padding:2px 0 2px 20px;animation:tcBody .4s var(--ease) both}
.tc-chev{opacity:0;transition:opacity .25s var(--ease),transform .35s var(--swift)}
.tool-card:hover .tc-chev,.tool-card.open .tc-chev{opacity:1}
.term{max-width:640px}
.sr{padding:7px 10px 7px 0}
.sr:hover{background:none}
.sr:hover .sr-main strong{text-decoration:underline;text-underline-offset:3px}
.tc-body .sr-main strong{white-space:normal}

/* ── Interaktive Elemente: frei im Antwortfluss ──────────────
   Kein Kopf, kein Rahmen – das Element steht wie ein Absatz im Chat.
   Der abgeschottete iframe ist durchsichtig und bekommt seine Farben
   als Design-Token hinein; nur der Neustart-Knopf schwebt bei Bedarf
   in der Ecke.                                                     */
.widget-card{position:relative;margin:10px 0 18px;max-width:680px}
.widget-warte{display:block;font-size:13px;color:var(--t30);
  animation:widgetPuls 1.4s ease-in-out infinite}
@keyframes widgetPuls{0%,100%{opacity:.45}50%{opacity:1}}
.widget-reload{position:absolute;top:0;right:0;z-index:3;
  width:26px;height:26px;border-radius:8px;color:var(--t45);
  display:grid;place-items:center;opacity:0;
  transition:background .3s,color .3s,opacity .25s var(--ease)}
.widget-card:hover .widget-reload,.widget-reload:focus-visible{opacity:1}
.widget-reload .ic{width:13px;height:13px}
.widget-reload:hover{background:var(--t07);color:var(--fg)}
/* Starthöhe großzügig: Inhalte, die sich am „Bildschirm" bemessen
   (100vh, height:100%), bekommen so von Anfang an eine brauchbare
   Arbeitsfläche statt eines Schlitzes – alles mit echter eigener Höhe
   meldet seine Maße und der Rahmen zieht sich exakt darauf zusammen. */
.widget-frame{display:block;width:100%;height:min(60vh,520px);border:0;background:transparent;
  transition:height .35s var(--ease)}
.widget-leer{margin:0;color:var(--t45);font-size:13.5px}

/* Lesbarkeit auf 1200px: Fließtext begrenzen, Karten frei */
.ai-body .seg{max-width:820px}
.status-line{max-width:820px}

/* ── Datei-Karten → Vorschau ─────────────────────────────── */
.file-card{cursor:pointer}
.fc-get{width:30px;height:30px;border-radius:9px;display:grid;place-items:center;
  color:var(--t45);flex:0 0 auto;
  transition:background .25s var(--ease),color .25s var(--ease)}
.fc-get .ic{width:15px;height:15px}
.fc-get:hover{background:var(--t07);color:var(--fg)}
.b-file{cursor:pointer;transition:border-color .3s var(--ease)}
.b-file:hover{border-color:var(--t30)}

/* ── Vorschau-Panel rechts ───────────────────────────────── */
#preview{flex:0 0 auto;width:0;overflow:hidden;position:relative;z-index:36;
  transition:width .55s var(--swift)}
body.preview-open #preview{width:clamp(380px,42vw,760px)}
.pv-inner{width:clamp(380px,42vw,760px);height:100%;
  display:flex;flex-direction:column;
  border-left:1px solid var(--t07);background:var(--t03)}
.pv-head{display:flex;align-items:center;gap:10px;height:64px;
  padding:0 14px 0 18px;border-bottom:1px solid var(--t07);flex:0 0 auto}
.pv-ic{width:17px;height:17px;color:var(--t60);flex:0 0 auto}
.pv-name{font-size:13px;font-weight:600;color:var(--t90);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pv-size{font-size:11px;color:var(--t45);flex:0 0 auto}
.pv-body{flex:1;min-height:0;overflow:auto;display:flex;flex-direction:column;
  animation:pageIn .4s var(--ease) both}
.pv-body iframe{border:0;width:100%;flex:1;background:#3c3c3b}
.pv-body img{max-width:calc(100% - 40px);height:auto;margin:auto;
  border-radius:12px;box-shadow:var(--panel-shadow)}
/* Gerendertes Markdown in der Vorschau: Typografie wie im Chat, aber
   oben ausgerichtet statt über die Höhe gedehnt. */
.pv-md{flex:0 0 auto;padding:22px 24px 40px;max-width:820px;width:100%;margin:0 auto}
/* ── Quelltext in der Vorschau ────────────────────────────
   Gefärbt wird mit denselben syn-Klassen wie im Chat (weiter unten bei
   .syn-*), damit eine Datei und ein Codeblock in der Antwort gleich
   aussehen. Der Rahmen rollt in beide Richtungen – so bleibt die
   waagerechte Leiste unten am Panel und wandert nicht mit der Datei aus
   dem Bild.

   --nr ist die Stellenzahl der größten Zeilennummer; preview.js setzt sie.
   Damit ist die Spalte bei 90 Zeilen schmal und bei 9000 breit genug.  */
.pv-quelle{flex:1;min-height:0;overflow:auto;padding:12px 0 28px}
.pv-code{--nr:3;margin:0;font-family:var(--mono);font-size:12.5px;
  line-height:1.65;white-space:pre;color:var(--t90);counter-reset:zl}
.pv-code.umbruch{white-space:pre-wrap;word-break:break-word}
/* Jede Zeile ein Block mit hängendem Einzug: Beim Umbrechen rückt die
   Fortsetzung unter den Text und nicht unter die Nummer. */
.pv-code .zl{display:block;min-height:1.65em;
  padding:0 20px 0 calc(var(--nr) * 1ch + 2.6em);
  text-indent:calc(-1 * (var(--nr) * 1ch + 1.2em))}
.pv-code .zl::before{content:counter(zl);counter-increment:zl;
  display:inline-block;width:calc(var(--nr) * 1ch);margin-right:1.2em;
  text-align:right;color:var(--t25);font-variant-numeric:tabular-nums;
  user-select:none;-webkit-user-select:none}
.pv-code .zl:hover::before{color:var(--t45)}
.pv-lang{font-size:11.5px;font-weight:600;color:var(--t75);
  padding-left:4px;flex:0 0 auto}
.pv-btn.an{background:var(--t10);color:var(--fg)}
.pv-btn .ic{width:15px;height:15px}
.pv-table-wrap{overflow:auto;padding:16px;flex:1}
.pv-sheet{font-size:11px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;
  color:var(--t45);padding:14px 18px 0}
table.pv-table{border-collapse:collapse;font-size:12.5px}
.pv-table td{border:1px solid var(--t10);padding:6px 11px;text-align:left;
  white-space:nowrap;max-width:280px;overflow:hidden;text-overflow:ellipsis;
  color:var(--t90)}
.pv-table tr:first-child td{background:var(--t05);font-weight:600;
  position:sticky;top:-1px}
.pv-empty{margin:auto;text-align:center;color:var(--t45);font-size:13px;
  display:flex;flex-direction:column;gap:14px;align-items:center;padding:40px}
.pv-empty .ic{width:34px;height:34px;color:var(--t30)}
.pv-empty a{color:var(--t90)}

/* ── Vom Server gesetzte Seiten ───────────────────────────
   PDF, Word und PowerPoint kommen als Bilder herein (lib/rendern.js).
   Die Leiste bleibt beim Blättern stehen, die Seiten liegen darunter
   wie Blätter auf einem Tisch.                                      */
.pv-bar{position:sticky;top:0;z-index:3;flex:0 0 auto;
  display:flex;align-items:center;gap:6px;min-height:46px;padding:7px 12px;
  border-bottom:1px solid var(--t07);background:var(--veil);
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
.pv-luecke{flex:1}
.pv-btn{width:28px;height:28px;border-radius:8px;flex:0 0 auto;
  font-size:14px;line-height:1;color:var(--t60);
  transition:background .25s var(--ease),color .25s var(--ease)}
.pv-btn:hover{background:var(--t07);color:var(--fg)}
.pv-zaehler,.pv-lvl{font-size:11.5px;color:var(--t60);
  font-variant-numeric:tabular-nums;min-width:52px;text-align:center}
.pv-lvl{min-width:46px}

/* Der Zoom weitet die Spalte, nicht das einzelne Blatt: So bleibt beim
   Vergrößern auch die linke Kante erreichbar (ein zentriertes Kind, das
   breiter als sein Rahmen ist, lässt sich nach links nicht scrollen). */
.pv-seiten{--z:1;flex:0 0 auto;width:calc(100% * var(--z));min-width:100%;
  display:flex;flex-direction:column;align-items:center;gap:14px;
  padding:14px 0 40px;transition:width .3s var(--swift)}
.pv-seite{position:relative;width:calc(100% - 32px);
  border-radius:6px;overflow:hidden;background:var(--t05);
  border:1px solid var(--t10);box-shadow:var(--panel-shadow)}
.pv-seite.da{background:transparent}
/* Die allgemeine Bildregel der Vorschau (mittig, mit Rand) gilt hier nicht:
   Ein Seitenbild füllt sein Blatt vollständig aus. */
.pv-body .pv-seite img{display:block;width:100%;height:100%;margin:0;
  max-width:none;border-radius:0;box-shadow:none;object-fit:contain;
  opacity:0;transition:opacity .3s var(--ease)}
.pv-body .pv-seite.da img{opacity:1}
.pv-seite.fehler{background:var(--t07)}
.pv-seite.fehler::after{content:"Seite nicht darstellbar";position:absolute;inset:0;
  display:flex;align-items:center;justify-content:center;
  font-size:12px;color:var(--t45)}

.pv-laden{margin:auto;display:flex;align-items:center;gap:10px;
  font-size:12.5px;color:var(--t45)}
.pv-ring{width:14px;height:14px;border-radius:50%;flex:0 0 auto;
  border:2px solid var(--t14);border-top-color:var(--t60);
  animation:pvRing .8s linear infinite}
@keyframes pvRing{to{transform:rotate(360deg)}}

/* ── Tabellenblätter ──────────────────────────────────────── */
.pv-tabs{display:flex;gap:4px;overflow-x:auto;scrollbar-width:none;min-width:0}
.pv-tabs::-webkit-scrollbar{display:none}
.pv-tab{padding:5px 11px;border-radius:8px;white-space:nowrap;flex:0 0 auto;
  font-size:12px;color:var(--t60);
  transition:background .25s var(--ease),color .25s var(--ease)}
.pv-tab:hover{background:var(--t05);color:var(--t90)}
.pv-tab.on{background:var(--t10);color:var(--fg)}
.pv-blatt{flex:1;min-height:0;display:flex;flex-direction:column}
table.pv-gitter{font-variant-numeric:tabular-nums}
.pv-gitter th{position:sticky;top:0;z-index:1;
  border:1px solid var(--t10);padding:5px 9px;
  font-size:11px;font-weight:600;color:var(--t45);background:var(--surface);
  text-align:center;white-space:nowrap}
.pv-gitter .pv-znr{position:sticky;left:0;top:auto;z-index:1;min-width:34px}
.pv-gitter .pv-ecke{position:sticky;left:0;top:0;z-index:2}
.pv-gitter td.zahl{text-align:right;font-variant-numeric:tabular-nums}
/* Die Kopfzeile eines Blattes ist nicht die erste Datenzeile – die
   allgemeine Auszeichnung der CSV-Tabelle darf hier nicht greifen. */
.pv-gitter tr:first-child td{background:none;font-weight:400;position:static}

@media (max-width:900px){
  #preview{position:fixed;inset:0;width:100%;z-index:95;
    transform:translateX(105%);transition:transform .45s var(--swift)}
  body.preview-open #preview{width:100%;transform:none}
  .pv-inner{width:100%;background:var(--bg)}
}

/* ── Admin: Seiten-Navigation ────────────────────────────── */
.ad-shell{display:flex;gap:40px;width:100%;margin:0;
  padding:14px 34px 100px}
.ad-nav{flex:0 0 226px;position:sticky;top:84px;align-self:flex-start;
  display:flex;flex-direction:column;gap:3px}
.ad-nav button{position:relative;display:flex;align-items:center;gap:12px;width:100%;
  padding:10px 13px;border-radius:13px;font-size:13px;color:var(--t60);
  text-align:left;
  transition:background .3s var(--ease),color .3s var(--ease),
             box-shadow .3s var(--ease),translate .35s var(--swift)}
.ad-nav button .ic{width:15px;height:15px;flex:0 0 auto;
  transition:color .3s var(--ease)}
.ad-nav button:hover{background:var(--t05);color:var(--t90);translate:2px 0}
.ad-nav button.on{background:var(--t07);color:var(--fg)}
html.light .ad-nav button.on{background:var(--raised);
  box-shadow:0 1px 2px var(--t07),0 8px 20px -12px var(--t45)}
.ad-nav button.on .ic{color:var(--akzent)}
/* schmaler blauer Marker am aktiven Eintrag */
.ad-nav button.on::before{content:"";position:absolute;left:-10px;top:50%;
  width:3px;height:18px;border-radius:2px;background:var(--akzent);translate:0 -50%}
.ad-dot{margin-left:auto;width:7px;height:7px;border-radius:50%;
  background:var(--t14);flex:0 0 auto;transition:background .3s var(--ease)}
.ad-dot.on{background:var(--akzent)}
.ad-content{flex:1;min-width:0;max-width:none;
  display:flex;flex-direction:column;gap:18px}
.ad-nav-sec{font-size:10px;font-weight:600;letter-spacing:.12em;
  text-transform:uppercase;color:var(--t30);padding:14px 12px 5px}
@media (max-width:820px){
  .ad-shell{flex-direction:column;gap:14px}
  .ad-nav{position:static;flex:none;flex-direction:row;overflow-x:auto;
    padding-bottom:6px;gap:4px}
  .ad-nav button{white-space:nowrap;width:auto}
  .ad-nav .ad-nav-sec{display:none}
  .ad-dot{margin-left:6px}
}
.pv-body .pv-obj{border:0;width:100%;flex:1;display:flex}
.pv-body .pv-obj .pv-empty{margin:auto}

/* ── Dateien: lange Karten, gestapelt am Antwort-Ende ────── */
.msg-files{display:flex;flex-direction:column;gap:9px;margin:16px 0 6px;
  max-width:820px}
.msg-files .file-card,.files-row .file-card{width:100%;max-width:820px;
  padding:11px 14px;border-radius:15px;gap:13px}
.file-card .fc-ic{width:38px;height:38px;border-radius:11px}
.fc-meta strong{font-size:13px}
.fc-meta em{font-size:11px;letter-spacing:.02em}

/* ── Agenten-Spur (Reasoning + Tool-Kette, zugeklappt) ───── */
.trace{margin:0 0 14px;max-width:820px}
.trace-head{display:flex;align-items:center;gap:10px;width:100%;
  padding:4px 8px 4px 0;border-radius:9px;text-align:left;
  transition:background .25s var(--ease)}
.trace-head:hover{background:var(--t03)}
.trace-title{flex:1;min-width:0;font-size:13px;font-weight:550;color:var(--t60);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-align:left}
.trace-title.shimmer{font-size:13px}
/* Das Modell benennt den Block um – der neue Name gleitet herein */
.trace-title.retitle{animation:traceRetitle .5s var(--swift)}
@keyframes traceRetitle{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.trace-chev{width:14px;height:14px;color:var(--t45);flex:0 0 auto;opacity:0;
  transition:opacity .25s var(--ease),transform .35s var(--swift)}
.trace:hover .trace-chev,.trace.open .trace-chev{opacity:1}
.trace.open .trace-chev{transform:rotate(180deg)}
.trace-body{border-left:2px solid var(--t10);margin:8px 0 6px 0;
  padding:4px 0 4px 18px;display:flex;flex-direction:column;gap:2px;
  animation:tcBody .4s var(--ease) both}
.trace-body[hidden]{display:none}
/* .tc-body setzt display:flex – das schlägt das hidden-Attribut. Ohne diese
   Regel ließ sich keine Werkzeug-Karte (z. B. die Websuche) zuklappen. */
.tc-body[hidden]{display:none}
.trace-seg p,.trace-seg li{font-size:13.5px;color:var(--t60)}
.trace-seg strong{color:var(--t75)}
.trace-seg .md-h{font-size:14px;color:var(--t75)}
.trace-body .tool-card{margin:6px 0}
.trace-body .term{max-width:560px}
.trace-body .viz-card{max-width:560px}

/* ── Dateien: erst nach Abschluss, sanft einblenden ──────── */
.msg-files .file-card{animation:fileIn .65s var(--swift) both}
.msg-files.static .file-card{animation-duration:.4s}
@keyframes fileIn{from{opacity:0;transform:translateY(16px) scale(.975)}
  to{opacity:1;transform:none}}
.fc-meta{min-width:0}
.fc-meta em{white-space:normal;line-height:1.4}

/* ── Eine Wander-Marke statt Doppel-Logos ────────────────── */
.ai-mark{display:none!important}
.msg.ai{gap:0}
.gen-mark{position:relative;margin:16px 0 8px;transform-origin:left center;
  animation:markIn .55s var(--swift) both;
  transition:opacity .4s var(--ease),transform .55s var(--swift)}
.gen-mark>.gm-bars{position:relative;z-index:1;width:34px;height:31px;
  display:block;overflow:visible;flex:0 0 auto}
.gen-mark .mb{will-change:transform,opacity}
/* nach dem Generieren: bleibt stehen, ruht, etwas kleiner */
.gen-mark.done{animation:none;transform:scale(.8);margin:14px 0 4px}
/* ruhende Marke: dasselbe Licht, seltener und leiser */
.gen-mark.done .mb{animation:restSheen 7s ease-in-out infinite}
.gen-mark.done .mb0{animation-delay:0s}
.gen-mark.done .mb1{animation-delay:.08s}
.gen-mark.done .mb2{animation-delay:.16s}
.gen-mark.done .mb3{animation-delay:.24s}
.gen-mark.done .mb4{animation-delay:.32s}
.gen-mark.done .mb5{animation-delay:.4s}
.gen-mark.done .mb6{animation-delay:.48s}
@keyframes restSheen{
  0%,66%{opacity:1}
  73%{opacity:.55}
  80%{opacity:.9}
  88%,100%{opacity:1}
}
@keyframes markIn{from{opacity:0;transform:translateY(10px) scale(.88)}
                  to{opacity:1;transform:none}}

/* Nachdenken: ruhiges Atmen, reihum durch die Blätter; der Stamm steht */
.gen-mark.thinking .mb{animation:gmBreath 2.1s cubic-bezier(.45,0,.25,1) infinite}
.gen-mark.thinking .mb0{animation:none}
.gen-mark.thinking .mb1{animation-delay:0s}
.gen-mark.thinking .mb2{animation-delay:.12s}
.gen-mark.thinking .mb3{animation-delay:.24s}
.gen-mark.thinking .mb4{animation-delay:.36s}
.gen-mark.thinking .mb5{animation-delay:.48s}
.gen-mark.thinking .mb6{animation-delay:.6s}
@keyframes gmBreath{0%,100%{opacity:.95;transform:none}
                    50%{opacity:.24;transform:scale(.86)}}

/* Schreiben: eine Welle läuft durch die sechs Blätter – jedes faltet sich
   zur Krone und schlägt wieder aus (gleiche Dauer = saubere Phase) */
.gen-mark.writing .mb{animation:gmWrite 1.05s cubic-bezier(.37,0,.28,1) infinite}
.gen-mark.writing .mb0{animation:none}
.gen-mark.writing .mb1{animation-delay:0s}
.gen-mark.writing .mb2{animation-delay:.09s}
.gen-mark.writing .mb3{animation-delay:.18s}
.gen-mark.writing .mb4{animation-delay:.27s}
.gen-mark.writing .mb5{animation-delay:.36s}
.gen-mark.writing .mb6{animation-delay:.45s}
@keyframes gmWrite{
  0%{transform:none;opacity:1}
  38%{transform:scale(.5);opacity:.5}
  70%{transform:scale(1.06);opacity:1}
  100%{transform:none;opacity:1}
}
/* die Marke atmet leicht mit */
.gen-mark.writing svg{animation:gmPulse 1.05s cubic-bezier(.37,0,.28,1) infinite}
@keyframes gmPulse{0%,100%{transform:scale(1)}52%{transform:scale(1.05)}}

/* Werkzeug läuft: die Blätter gleiten federnd zur Seite und zurück,
   der Stamm duckt sich */
.gen-mark.tooling .mb1,.gen-mark.tooling .mb2,.gen-mark.tooling .mb3{
  animation:gmScanL 1.5s cubic-bezier(.32,.72,0,1) infinite}
.gen-mark.tooling .mb4,.gen-mark.tooling .mb5,.gen-mark.tooling .mb6{
  animation:gmScanR 1.5s cubic-bezier(.32,.72,0,1) infinite}
.gen-mark.tooling .mb2,.gen-mark.tooling .mb5{animation-delay:0s}
.gen-mark.tooling .mb1,.gen-mark.tooling .mb3,.gen-mark.tooling .mb4,.gen-mark.tooling .mb6{animation-delay:.08s}
.gen-mark.tooling .mb0{animation:gmScanMid 1.5s cubic-bezier(.32,.72,0,1) infinite}
@keyframes gmScanL{0%,100%{transform:none;opacity:1}
                   45%{transform:translateX(-36px);opacity:.32}}
@keyframes gmScanR{0%,100%{transform:none;opacity:1}
                   45%{transform:translateX(36px);opacity:.32}}
@keyframes gmScanMid{0%,100%{transform:none;opacity:1}
                     45%{transform:scaleY(.6);opacity:.5}}

/* Ausklingen: die Balken gleiten aus der laufenden Bewegung sanft in die Ruhelage
   (die eigentliche Bewegung macht settleMark() per Web-Animations-API) */
.gen-mark.settling,.gen-mark.settling .mb,.gen-mark.settling svg{animation:none}

/* ══ Light-Mode: Premium-Feinschliff ═══════════════════════ */
/* Nutzer-Blase schwebt weiß auf der Creme statt grau darin */
html.light .bubble{
  background:#fff;border-color:rgba(62,48,26,.07);
  box-shadow:0 1px 2px rgba(62,48,26,.05),0 8px 20px -14px rgba(62,48,26,.28);
}
/* Sidebar minimal tiefer als der Chat → ruhige Schichtung */
html.light #nav{
  background:linear-gradient(180deg,#f1eee5,#edeae0);
  border-right-color:rgba(62,48,26,.09);
}
html.light .chat-item.active{
  background:#fff;
  box-shadow:0 1px 2px rgba(62,48,26,.05),0 6px 16px -12px rgba(62,48,26,.3);
}
html.light .new-chat{
  background:#fff;border-color:rgba(62,48,26,.09);
  box-shadow:0 1px 2px rgba(62,48,26,.05);
}
html.light .new-chat:hover{background:var(--fg);border-color:var(--fg)}
/* Code-Pillen & Terminal wärmer */
html.light .ai-body code,html.light .login-hint code{
  background:rgba(62,48,26,.055);border-color:rgba(62,48,26,.07);
}
html.light .term{
  background:#26221c;border-color:rgba(255,255,255,.08);
  box-shadow:0 1px 2px rgba(62,48,26,.08),0 14px 30px -18px rgba(62,48,26,.45);
}
/* Karten & Panels: weiche, warme Tiefe */
html.light .file-card,html.light .ad-card,html.light .login-card,
html.light .acct-menu,html.light .modal-card{
  border-color:rgba(62,48,26,.09);
}
html.light .theme-seg{background:rgba(62,48,26,.05);border-color:rgba(62,48,26,.06)}
html.light .seg-ind{box-shadow:0 1px 3px rgba(62,48,26,.14)}
html.light .acct-avatar,html.light .ad-avatar{box-shadow:0 2px 6px -2px rgba(62,48,26,.4)}
/* Senden-Knopf: satter Tiefeneffekt statt flachem Schwarz */
html.light .send-btn{box-shadow:0 2px 6px -1px rgba(62,48,26,.35)}
html.light .send-btn:not(:disabled):hover{box-shadow:0 8px 20px -6px rgba(62,48,26,.5)}

/* ══ Werkzeug-Karten: Premium-Feinschliff ══════════════════ */
/* Ring-Spinner statt Punkten */
.tc-ring{width:15px;height:15px;border-radius:50%;display:block;
  border:1.6px solid var(--t14);border-top-color:var(--akzent);
  animation:tcSpin .75s linear infinite}
@keyframes tcSpin{to{transform:rotate(360deg)}}
.tc-state .ok{color:var(--akzent)}

/* Ergebnis-Kurzfassung in der Kopfzeile */
.tc-sum{flex:0 0 auto;font-size:11.5px;color:var(--t45);white-space:nowrap;
  opacity:0;translate:0 3px;
  transition:opacity .45s var(--ease),translate .45s var(--swift)}
.tc-sum.on{opacity:1;translate:0}
.tool-card .tc-title{flex:0 1 auto}
.tc-head{gap:9px}
.tc-head::after{content:"";flex:1}

/* gestaffelter, weicher Auftritt der Schritte */
.tool-card{animation:stepIn .55s var(--swift) backwards}
@keyframes stepIn{from{opacity:0;translate:0 8px}to{opacity:1;translate:0}}

/* Skill- und MCP-Ergebnis */
.res-head{display:flex;align-items:center;gap:9px;font-size:13px;color:var(--t90)}
.res-head .ic{width:15px;height:15px;color:var(--akzent)}
.res-head strong{font-weight:600}
.res-pre{margin:0;padding:11px 13px;border-radius:11px;
  background:var(--t03);border:1px solid var(--t07);
  font-family:var(--mono);font-size:11.5px;line-height:1.6;color:var(--t60);
  white-space:pre-wrap;max-height:150px;overflow:auto}
.res-tools{display:flex;flex-direction:column;gap:5px}
.res-tool{display:flex;align-items:baseline;gap:10px;padding:6px 0;
  border-top:1px solid var(--t05)}
.res-tool:first-child{border-top:0}
.res-tool code{font-family:var(--mono);font-size:11.5px;color:var(--t90);
  background:var(--t05);border:1px solid var(--t07);
  border-radius:7px;padding:2px 7px;white-space:nowrap}
.res-tool em{font-style:normal;font-size:12px;color:var(--t60);line-height:1.45}

/* Kette während der Arbeit: klar als aufklappbar erkennbar */
.trace{margin:14px 0}
.trace.running .trace-chev{opacity:.55}
.trace-count{flex:0 0 auto;font-size:11.5px;color:var(--t45);white-space:nowrap;
  padding:1px 8px;border:1px solid var(--t10);border-radius:9px}
.trace-count:empty{display:none}
.trace-head::after{content:"";flex:1}   /* Spacer rechts → Titel bleibt links */
.trace-title{flex:0 1 auto}

/* ══ Admin: Premium-Feinschliff ════════════════════════════ */
.ad-nav-sec{font-size:9.5px;letter-spacing:.16em;color:var(--t30);
  padding:18px 13px 6px}
.ad-nav-sec:first-child{padding-top:4px}
/* Statuspunkt: leuchtet mit weichem Hof, wenn aktiv */
.ad-dot{width:6px;height:6px;background:var(--t14);
  transition:background .4s var(--ease),box-shadow .4s var(--ease)}
.ad-dot.on{background:var(--akzent);box-shadow:0 0 0 3px rgba(var(--akzent-rgb),.16)}
/* Schalter: größer, weicher, mit Hof im Aktivzustand */
.ad-switch{gap:12px;margin:10px 0 4px;font-size:13.5px}
.ad-switch .sw{width:42px;height:24px;border-radius:12px;
  transition:background .4s var(--ease),box-shadow .4s var(--ease)}
.ad-switch .sw::after{width:18px;height:18px;
  transition:transform .45s var(--swift),background .35s}
.ad-switch input:checked + .sw{box-shadow:0 0 0 4px rgba(var(--akzent-rgb),.14)}
.ad-switch input:checked + .sw::after{transform:translateX(18px)}
.ad-switch.sm .sw{width:34px;height:20px}
.ad-switch.sm .sw::after{width:14px;height:14px}
.ad-switch.sm input:checked + .sw::after{transform:translateX(14px)}
.ad-switch input:focus-visible + .sw{outline:2px solid var(--akzent);outline-offset:3px}
/* kleine Aktions-Knöpfe dezenter, Löschen erst bei Hover rot-neutral */
.ad-mini{height:32px;border-radius:10px;border-color:var(--t10);
  transition:background .3s var(--ease),color .3s var(--ease),
             border-color .3s var(--ease),translate .3s var(--swift)}
.ad-mini:hover{translate:0 -1px}
.ad-badge{border-radius:8px;padding:2.5px 8px}
.ad-badge.ok{color:var(--akzent);border-color:rgba(var(--akzent-rgb),.4)}
/* Kopf der Admin-Seite: Logo + Titel enger gesetzt */
.ad-top .sq-btn{margin-right:2px}
/* Formular-Raster luftiger */
.ad-grid{gap:14px;margin:12px 0 4px}
.fld span{font-size:10.5px;letter-spacing:.09em;color:var(--t45)}

/* ══ Skills: vollflächige Seite ════════════════════════════ */
.skills-page{position:fixed;inset:0;z-index:150;background:var(--bg);
  display:flex;flex-direction:column;overflow:auto;
  animation:skIn .45s var(--swift) both}
.skills-page[hidden]{display:none}
/* Auch innerhalb der Seite gilt hidden – .sk-shell{display:flex} überstimmte
   es sonst, und das Gedächtnis erschien unter der Geräteliste statt an ihrer
   Stelle. */
.skills-page [hidden]{display:none!important}
@keyframes skIn{from{opacity:0;translate:0 10px}to{opacity:1;translate:0}}
.sk-top{position:sticky;top:0;z-index:5;display:flex;align-items:center;gap:14px;
  height:72px;padding:0 34px;flex:0 0 auto;
  background:linear-gradient(to bottom,var(--bg) 62%,transparent)}
.sk-top h1{font-size:15.5px;font-weight:650;letter-spacing:-.012em}
.sk-shell{display:flex;gap:40px;align-items:flex-start;
  padding:6px 34px 90px;width:100%}
.sk-main{flex:1;min-width:0;display:flex;flex-direction:column;gap:20px}
.sk-form{flex:0 0 380px;position:sticky;top:84px}
/* ══ Skill-Explorer (skill-explorer.js) ═══════════════════
   Erst die Übersicht (Karten), dann der Skill als Dateimanager:
   links der Baum, rechts die Datei. Im Chat füllt er die Seite unter
   dem Kopf, im Admin-Panel steckt er in einer Karte. */
.sx-seite{height:calc(100vh - 72px);padding:0 34px 26px}
/* Im Admin-Panel füllt er die ganze rechte Fläche: Kopfzeile 72px, der
   Rahmen der Seite 14px oben – der Rest gehört dem Explorer. */
.ad-panel-voll{gap:0}
.ad-panel-voll .sx-seite{height:calc(100vh - 72px - 14px - 22px);padding:0}
@media (max-width:820px){.ad-panel-voll .sx-seite{height:calc(100vh - 72px - 90px)}}
.sx{display:flex;flex-direction:column;height:100%;min-height:0}
.sx-uebersicht{display:flex;flex-direction:column;gap:18px;overflow:auto;height:100%;padding-bottom:40px}
.sx-uebersicht[hidden],.sx-skill[hidden]{display:none}
.sx-kopfzeile{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.sx-kopfzeile h2{font-size:19px;font-weight:650;letter-spacing:-.02em;margin:0 auto 0 0}
.sx-hint{font-size:12.5px;color:var(--t60);line-height:1.55;max-width:80ch;margin:0}
.sx-hint code{font-family:var(--mono);font-size:11.5px;color:var(--t75)}
.sx-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:16px}
.sx-karte{position:relative;text-align:left;background:var(--panel);border:0;border-radius:18px;
  padding:16px 18px;box-shadow:var(--comp-shadow),var(--comp-hi);color:inherit;font:inherit;
  display:flex;flex-direction:column;gap:12px;min-height:150px;cursor:pointer;
  animation:cardIn .5s var(--swift) backwards;
  transition:translate .35s var(--swift),box-shadow .35s var(--ease)}
.sx-karte::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;
  background:var(--edge);pointer-events:none;
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude}
.sx-karte:hover{translate:0 -2px;box-shadow:var(--comp-shadow-focus),var(--comp-hi)}
.sx-karte-kopf{display:flex;align-items:flex-start;gap:12px;min-width:0}
.sx-karte-text{min-width:0;display:flex;flex-direction:column;gap:3px}
.sx-ic{flex:0 0 auto;width:34px;height:34px;border-radius:11px;
  background:rgba(var(--akzent-rgb),.12);color:var(--akzent);display:grid;place-items:center}
.sx-ic svg{width:16px;height:16px}
.sx-karte.global .sx-ic{background:var(--t07);color:var(--t60)}
/* Gedächtnis eines Rechners – eigenes Symbol wie auf der Geräte-Seite */
.sx-karte.rechner .sx-ic{background:rgba(var(--akzent-rgb),.12);color:var(--akzent)}
/* Verweis in eine Nachbardatei desselben Skills – bleibt im Explorer */
.sx-md a.sx-verweis{cursor:pointer}
.sx-md a.sx-verweis-pille{text-decoration:none}
.sx-md a.sx-verweis-pille code{cursor:pointer;text-decoration:underline;text-underline-offset:2px}
.sx-karte strong{font-size:14px;font-weight:650;letter-spacing:-.01em;color:var(--fg);font-family:var(--mono);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block}
.sx-karte em{font-style:normal;font-size:12.5px;color:var(--t60);line-height:1.5;
  display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden}
.sx-karte-fuss{margin-top:auto;display:flex;gap:10px;align-items:center;flex-wrap:wrap;font-size:11px;color:var(--t45)}
.sx-schatten{color:#c98a1a;font-weight:550}
.sx-leer{grid-column:1 / -1;display:flex;flex-direction:column;align-items:center;gap:10px;
  text-align:center;padding:56px 20px;color:var(--t45);border:1.5px dashed var(--t10);border-radius:20px}
.sx-leer svg{width:26px;height:26px;color:var(--t30)}
.sx-leer strong{font-size:14px;color:var(--t75);font-weight:600}
.sx-leer span{font-size:12.5px;max-width:46ch;line-height:1.6}
/* Neuer Skill: eine Zeile mit zwei Feldern */
.sx-neu{display:flex;gap:8px;flex-wrap:wrap;align-items:center;padding:12px 14px;
  border:1px solid var(--t10);border-radius:14px;background:var(--t03)}
.sx-neu input{flex:1;min-width:180px;height:34px;padding:0 12px;border-radius:9px;border:1px solid var(--t14);
  background:var(--panel);color:var(--fg);font:inherit;font-size:13px}
.sx-neu input:focus{outline:none;border-color:rgba(var(--akzent-rgb),.65);box-shadow:0 0 0 3px rgba(var(--akzent-rgb),.1)}
.sx-neu input.name{flex:0 1 230px;font-family:var(--mono);font-size:12.5px}
/* Knöpfe */
.sx-btn{display:inline-flex;align-items:center;gap:6px;height:30px;padding:0 12px;border-radius:9px;
  border:1px solid var(--t14);background:transparent;color:var(--t75);font:inherit;font-size:12.5px;
  white-space:nowrap;cursor:pointer;text-decoration:none;
  transition:background .2s var(--ease),color .2s var(--ease),border-color .2s var(--ease)}
.sx-btn svg{width:13px;height:13px}
.sx-btn:hover{background:var(--fg);color:var(--bg);border-color:var(--fg)}
.sx-btn.akzent{background:var(--akzent);border-color:transparent;color:var(--auf-akzent);font-weight:600}
.sx-btn.akzent:hover{background:var(--akzent-hell);border-color:transparent;color:var(--auf-akzent)}
.sx-btn.leise{border-color:transparent;color:var(--t60)}
.sx-btn.leise:hover{background:var(--t07);color:var(--fg);border-color:transparent}
.sx-btn.gefahr:hover{background:#d03b3b;border-color:#d03b3b;color:#fff}
.sx-btn:disabled{opacity:.45;pointer-events:none}
/* Ein Skill */
.sx-skill{display:flex;flex-direction:column;height:100%;min-height:0}
.sx-kopf{display:flex;align-items:center;gap:12px;padding:6px 0 14px;flex-wrap:wrap}
.sx-titel{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1}
.sx-titel strong{font-size:16px;font-weight:650;letter-spacing:-.012em;font-family:var(--mono)}
.sx-titel em{font-style:normal;font-size:12.5px;color:var(--t60);line-height:1.45;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.sx-titel .sx-edit{padding:0}
.sx-titel .sx-edit input{font-size:15px;height:34px;max-width:420px}
.sx-body{flex:1;min-height:0;display:flex;border:1px solid var(--t10);border-radius:18px;
  background:var(--panel);overflow:hidden}
.sx-baum{flex:0 0 280px;min-width:0;display:flex;flex-direction:column;
  border-right:1px solid var(--t10);background:var(--t03)}
.sx-baum-kopf{display:flex;gap:2px;padding:8px;border-bottom:1px solid var(--t07);flex-wrap:wrap}
.sx-baum-kopf .sx-btn{height:28px;padding:0 9px;font-size:12px}
.sx-baum-kopf .sx-hint{padding:4px 6px;font-size:12px}
.sx-tree{list-style:none;margin:0;padding:6px 6px 20px;overflow:auto;flex:1;font-size:12.5px}
.sx-tree ul{list-style:none;margin:0;padding-left:14px}
.sx-row{display:flex;align-items:center;gap:6px;height:28px;padding:0 6px;border-radius:8px;
  cursor:pointer;color:var(--t75);user-select:none}
.sx-row:hover{background:var(--t07);color:var(--fg)}
.sx-row.wahl{background:rgba(var(--akzent-rgb),.14);color:var(--fg)}
.sx-row > svg{width:14px;height:14px;flex:0 0 auto;color:var(--t45)}
.sx-row.wahl > svg{color:var(--akzent)}
.sx-row .sx-chev{width:10px;height:10px;flex:0 0 auto;transition:rotate .2s var(--ease)}
.sx-node.offen > .sx-row .sx-chev{rotate:90deg}
.sx-row .sx-name{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  font-family:var(--mono);font-size:12px}
.sx-row.ordner .sx-name{font-family:inherit;font-size:12.5px;font-weight:550}
.sx-row .sx-size{font-size:10.5px;color:var(--t45)}
.sx-acts{display:none;gap:1px}
.sx-row:hover .sx-acts,.sx-row.wahl .sx-acts{display:flex}
.sx-acts button{width:22px;height:22px;border-radius:6px;display:grid;place-items:center;
  color:var(--t45);background:none;border:0;cursor:pointer}
.sx-acts button:hover{background:var(--fg);color:var(--bg)}
.sx-acts button svg{width:12px;height:12px}
.sx-edit{display:flex;align-items:center;gap:6px;min-height:30px;padding:0 6px}
.sx-edit input{flex:1;min-width:0;height:26px;padding:0 8px;border-radius:7px;
  border:1px solid rgba(var(--akzent-rgb),.65);background:var(--panel);color:var(--fg);
  font-family:var(--mono);font-size:12px;box-shadow:0 0 0 3px rgba(var(--akzent-rgb),.1)}
.sx-edit input:focus{outline:none}
/* Rechts: die Datei */
.sx-ansicht{flex:1;min-width:0;display:flex;flex-direction:column}
.sx-ansicht-kopf{display:flex;align-items:center;gap:8px;height:46px;padding:0 10px 0 16px;
  border-bottom:1px solid var(--t07);font-size:12.5px;flex:0 0 auto}
.sx-pfad{flex:1;min-width:0;font-family:var(--mono);font-size:12px;color:var(--t60);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sx-pfad b{color:var(--fg);font-weight:600}
.sx-dirty{width:8px;height:8px;border-radius:50%;background:var(--akzent);display:none;flex:0 0 auto}
.sx-ansicht.dirty .sx-dirty{display:inline-block}
.sx-inhalt{flex:1;min-height:0;overflow:auto;position:relative}
.sx-inhalt > .sx-md{padding:22px 28px 60px;max-width:860px;flex:0 0 auto}
.sx-code{margin:0;padding:18px 22px 60px;font-family:var(--mono);font-size:12.5px;line-height:1.6;
  white-space:pre-wrap;word-break:break-word;color:var(--t90)}
.sx-bild{display:block;max-width:calc(100% - 48px);margin:24px auto;border-radius:10px}
.sx-info{padding:48px 30px;text-align:center;color:var(--t45);font-size:13px;line-height:1.6;
  display:flex;flex-direction:column;gap:14px;align-items:center}
.sx-info svg{width:26px;height:26px;color:var(--t30)}
.sx-info b{color:var(--t75)}
.sx-editor{display:grid;grid-template-columns:1fr 1fr;height:100%;min-height:0}
.sx-editor.ohne-vorschau{grid-template-columns:1fr}
.sx-editor textarea{width:100%;height:100%;resize:none;border:0;border-right:1px solid var(--t07);
  padding:18px 20px 60px;background:transparent;color:var(--fg);
  font-family:var(--mono);font-size:12.5px;line-height:1.6;outline:none;tab-size:2}
.sx-editor.ohne-vorschau textarea{border-right:0}
.sx-live{overflow:auto;min-width:0}
.sx-live > .sx-md{padding:18px 24px 60px;flex:0 0 auto}
@media (max-width:1100px){
  .sx-editor{grid-template-columns:1fr}
  .sx-live{display:none}
  .sx-baum{flex-basis:220px}
}
@media (max-width:760px){
  .sx-seite{padding:0 14px 14px}
  .sx-body{flex-direction:column}
  .sx-baum{flex:0 0 auto;max-height:40%;border-right:0;border-bottom:1px solid var(--t10)}
}
/* Typografie des kleinen Setzers (Admin-Panel, ohne Chat-Renderer) */
.sx-md.eigen{font-size:14.5px;line-height:1.65;color:var(--fg)}
.sx-md.eigen h1{font-size:22px;margin:0 0 14px;letter-spacing:-.02em}
.sx-md.eigen h2{font-size:17px;margin:26px 0 10px}
.sx-md.eigen h3{font-size:14.5px;margin:20px 0 8px}
.sx-md.eigen h4,.sx-md.eigen h5,.sx-md.eigen h6{font-size:13.5px;margin:16px 0 6px}
.sx-md.eigen p{margin:0 0 12px}
.sx-md.eigen ul,.sx-md.eigen ol{margin:0 0 12px;padding-left:22px}
.sx-md.eigen li{margin:3px 0}
.sx-md.eigen code{font-family:var(--mono);font-size:.88em;background:var(--t07);padding:1px 5px;border-radius:5px}
.sx-md.eigen pre{margin:0 0 14px;padding:12px 14px;border-radius:10px;background:var(--t05);overflow:auto}
.sx-md.eigen pre code{background:none;padding:0;font-size:12.5px;line-height:1.55}
.sx-md.eigen blockquote{margin:0 0 12px;padding:2px 14px;border-left:3px solid var(--t14);color:var(--t60)}
.sx-md.eigen table{border-collapse:collapse;margin:0 0 14px;font-size:13px;display:block;max-width:100%;overflow-x:auto}
.sx-md.eigen th,.sx-md.eigen td{border:1px solid var(--t10);padding:5px 10px;text-align:left;vertical-align:top}
.sx-md.eigen th{background:var(--t05);font-weight:600}
.sx-md.eigen hr{border:0;border-top:1px solid var(--t10);margin:18px 0}
.sx-md.eigen a{color:var(--akzent)}
.sx-md.eigen img{max-width:100%;border-radius:8px}
.sx-md.eigen input[type=checkbox]{margin-right:4px}

.sk-empty{grid-column:1 / -1;display:flex;flex-direction:column;align-items:center;
  gap:10px;text-align:center;padding:56px 20px;color:var(--t45);
  border:1.5px dashed var(--t10);border-radius:20px}
.sk-empty .ic{width:26px;height:26px;color:var(--t30)}
.sk-empty strong{font-size:14px;color:var(--t75);font-weight:600}
.sk-empty span{font-size:12.5px;max-width:46ch;line-height:1.6}

@media (max-width:1100px){
  .sk-shell{flex-direction:column;gap:24px}
  .sk-form{position:static;flex:none;width:100%;max-width:560px}
}
@media (max-width:700px){
  .sk-top{padding:0 16px}.sk-shell{padding:6px 16px 80px}
  .ad-shell{padding:14px 16px 90px}
}

/* Denkschritte in der Kette (bleiben nach dem Lauf lesbar) */
.trace-step{display:flex;align-items:center;gap:10px;padding:5px 0;
  font-size:12.5px;color:var(--t45);
  animation:stepIn .45s var(--swift) backwards}
.ts-dot{flex:0 0 auto;width:5px;height:5px;border-radius:50%;background:var(--t20)}
.trace-body > .trace-step + .tool-card{margin-top:2px}
.trace.running .trace-body > .trace-step:last-child{color:var(--t60)}
.trace.running .trace-body > .trace-step:last-child .ts-dot{
  background:var(--akzent);animation:tsPulse 1.2s ease-in-out infinite}
@keyframes tsPulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.35;transform:scale(.7)}}

/* Echtes Reasoning: eigener Block, nur der aktuell gestreamte ist offen. */
.reason-card{margin:3px 0 6px;max-width:680px}
.reason-head{display:flex;align-items:center;gap:9px;width:100%;padding:5px 6px 5px 0;
  border-radius:8px;text-align:left;color:var(--t45);transition:background .25s var(--ease)}
.reason-head:hover{background:var(--t03)}
.reason-title{font-size:12.5px;font-weight:550;color:var(--t60)}
.reason-count{margin-left:auto;font-size:10.5px;color:var(--t30)}
.reason-chev{width:13px;height:13px;opacity:0;color:var(--t45);
  transition:opacity .25s var(--ease),transform .3s var(--swift)}
.reason-card:hover .reason-chev,.reason-card.open .reason-chev{opacity:1}
.reason-card.open .reason-chev{transform:rotate(180deg)}
.reason-card.running .reason-title{color:var(--t75)}
.trace-think{font-size:12.5px;line-height:1.7;color:var(--t60);
  white-space:pre-wrap;word-break:break-word;
  margin:3px 0 0 7px;padding:8px 12px 10px;border-left:2px solid var(--t10);
  max-height:340px;overflow:auto;
  font-style:italic;letter-spacing:.002em}
.trace-think[hidden]{display:none}

/* ── Scrollbalken in den Blöcken des Chats ───────────────────
   Terminal, Code, Denkblock, Ergebnis- und Rückfrage-Kästen sind runde
   Kästen fester Höhe. Der Standard-Balken des Systems steht darin eckig
   und mit Schiene in der Ecke. Hier: nur ein schmaler Griff, keine
   Schiene, mit Abstand zu den runden Ecken; kräftiger beim Zeigen.
   Chromium/Safari über die Pseudo-Elemente, Firefox über die
   Standard-Eigenschaften (die schalten in Chromium die Pseudo-Elemente
   ab, deshalb getrennt).                                              */
.term,.code-card pre,.trace-think,.res-pre,.ask-detail{--griff:var(--t14);--griff-an:var(--t30)}
.term{--griff:rgba(255,255,255,.2);--griff-an:rgba(255,255,255,.38)}
.term::-webkit-scrollbar,.code-card pre::-webkit-scrollbar,.trace-think::-webkit-scrollbar,
.res-pre::-webkit-scrollbar,.ask-detail::-webkit-scrollbar{width:10px;height:10px}
.term::-webkit-scrollbar-track,.code-card pre::-webkit-scrollbar-track,.trace-think::-webkit-scrollbar-track,
.res-pre::-webkit-scrollbar-track,.ask-detail::-webkit-scrollbar-track{background:transparent;margin:8px}
.term::-webkit-scrollbar-thumb,.code-card pre::-webkit-scrollbar-thumb,.trace-think::-webkit-scrollbar-thumb,
.res-pre::-webkit-scrollbar-thumb,.ask-detail::-webkit-scrollbar-thumb{
  background:var(--griff);border:3px solid transparent;background-clip:padding-box;border-radius:999px}
.term::-webkit-scrollbar-thumb:hover,.code-card pre::-webkit-scrollbar-thumb:hover,.trace-think::-webkit-scrollbar-thumb:hover,
.res-pre::-webkit-scrollbar-thumb:hover,.ask-detail::-webkit-scrollbar-thumb:hover{background-color:var(--griff-an)}
.term::-webkit-scrollbar-corner,.code-card pre::-webkit-scrollbar-corner,.trace-think::-webkit-scrollbar-corner,
.res-pre::-webkit-scrollbar-corner,.ask-detail::-webkit-scrollbar-corner{background:transparent}
@supports not selector(::-webkit-scrollbar){
  .term,.code-card pre,.trace-think,.res-pre,.ask-detail{scrollbar-width:thin;scrollbar-color:var(--griff) transparent}
}
/* Gespeicherte Chats: Endzustand ohne erneuten Durchlauf */




html.light body.generating .composer::after{
  box-shadow:var(--kante),inset 0 -1px 0 rgba(var(--akzent-rgb),.38);
}

/* ── „Ältere Nachrichten laden" ───────────────────────────── */
.older-bar{
  display:block;margin:6px auto 22px;padding:8px 18px;border-radius:18px;
  border:1px solid var(--t10);background:var(--panel);
  font-size:12.5px;color:var(--t60);
  box-shadow:0 1px 2px var(--t05);
  transition:background .3s var(--ease),color .3s var(--ease),
             border-color .3s var(--ease),translate .35s var(--swift);
}
.older-bar:hover{color:var(--fg);border-color:var(--t30);translate:0 -1px}
.older-bar-bot{margin:22px auto 6px}
/* Bedienelemente in der Box behalten den Zeigefinger */
.composer button,.composer a,.composer .chip{cursor:pointer}
.composer .chip .name,.composer .chip .size{cursor:default}

/* ── Geräte: Karten, Schritte, Hinweis ───────────────────────
   Bewusst ruhig gehalten: ein Gerät ist Infrastruktur, kein
   Bedienelement — es gibt nur „verbunden" und „entfernen".   */
.ad-save[hidden]{display:none}
.dev-list{display:flex;flex-direction:column;gap:10px}
/* Dauer unter einer Antwort – klein, leise, ohne sich vorzudrängen */
.seg-zeit{margin:-2px 0 10px;font-size:10.5px;line-height:1;color:var(--t30,var(--t45));
  font-variant-numeric:tabular-nums;letter-spacing:.02em;user-select:none}
.msg.ai:hover .seg-zeit{color:var(--t45)}
.dev-card{position:relative;display:flex;flex-direction:column;gap:12px;
  background:var(--panel);border-radius:18px;padding:16px 18px;overflow:hidden;
  box-shadow:var(--comp-shadow),var(--comp-hi);
  animation:cardIn .5s var(--swift) backwards;
  transition:translate .4s var(--swift),box-shadow .4s var(--ease),opacity .3s}
.dev-card::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;
  background:var(--edge);pointer-events:none;
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude}
.dev-card:hover{translate:0 -2px;box-shadow:var(--comp-shadow-focus),var(--comp-hi)}
.dev-card.out{opacity:0;translate:0 6px}
.dev-kopf{display:flex;align-items:center;gap:14px;min-width:0}
.dev-ic{flex:0 0 auto;width:40px;height:40px;border-radius:13px;display:grid;place-items:center;
  background:var(--t07);color:var(--t45)}
.dev-ic .ic{width:18px;height:18px}
.dev-card.on .dev-ic{background:rgba(var(--akzent-rgb),.12);color:var(--akzent)}
.dev-meta{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px;line-height:1.4}
.dev-meta strong{font-size:15px;font-weight:650;letter-spacing:-.012em;color:var(--fg);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dev-meta em{font-style:normal;font-size:12.5px;color:var(--t60)}
/* Statuspille: blau mit blauem Punkt, solange die Software verbunden ist;
   sonst grau mit dem letzten Lebenszeichen */
.dev-state{flex:0 0 auto;display:inline-flex;align-items:center;gap:8px;
  font-size:12px;font-weight:600;letter-spacing:.01em;white-space:nowrap;
  color:var(--t60);padding:0 11px 0 10px;height:28px;border-radius:9px;border:1px solid var(--t10);background:var(--t03)}
.dev-state::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--t20);flex:none}
.dev-card.on .dev-state{color:var(--akzent);border-color:rgba(var(--akzent-rgb),.4);background:rgba(var(--akzent-rgb),.1)}
.dev-card.on .dev-state::before{background:var(--akzent);box-shadow:0 0 0 3px rgba(var(--akzent-rgb),.18)}
/* Zwei Knöpfe am Kopf: Gedächtnis und Entfernen – beide immer sichtbar */
.dev-card .dev-mem,.dev-card .dev-weg{width:32px;padding:0;justify-content:center;flex:none}
.dev-zeile{display:flex;align-items:center;gap:14px;flex-wrap:wrap;font-size:12px;color:var(--t45);padding-left:54px}
.dev-alt{color:#c98a1a}
.dev-verbinden .dev-os-wahl{margin:0 0 12px}

.dev-steps{list-style:none;counter-reset:s;display:flex;flex-direction:column;gap:16px;
  margin:6px 0 18px}
.dev-steps li{counter-increment:s;position:relative;padding-left:34px;
  display:flex;flex-direction:column;gap:3px}
.dev-steps li::before{content:counter(s);position:absolute;left:0;top:0;
  width:23px;height:23px;border-radius:50%;display:grid;place-items:center;
  font-size:11px;font-weight:650;color:var(--t60);
  background:var(--t05);border:1px solid var(--t10)}
.dev-steps strong{font-size:13px;font-weight:650;color:var(--t90)}
.dev-steps span{font-size:12.5px;color:var(--t60);line-height:1.6}

/* ── Was der Assistent auf dem Rechner darf ─────────────────
   Das Schild am Kopf klappt den Bereich auf. Zugeklappt steht nur da,
   was eingeschränkt ist – als Pillen, ein Klick öffnet. Schalter als
   Kacheln im Raster, Ordner als Liste mit „ändern" je Zeile, darunter
   die Ordnerwahl im Stil eines Dateimanagers. */
.dev-card .dev-recht{width:32px;padding:0;justify-content:center;flex:none}
.dev-card.offen .dev-recht{color:var(--akzent);border-color:rgba(var(--akzent-rgb),.45);background:rgba(var(--akzent-rgb),.08)}
.dev-card.offen:hover{translate:none}
.dev-card.pausiert .dev-ic{opacity:.45}
.dev-grenzen{display:flex;flex-wrap:wrap;gap:6px;margin:-2px 0 0;padding:0 0 0 54px;
  background:none;border:0;text-align:left;cursor:pointer}
.dev-grenzen[hidden]{display:none}
.dev-chip{display:inline-flex;align-items:center;gap:6px;height:24px;padding:0 9px;border-radius:8px;
  font-size:11.5px;font-weight:550;color:var(--t60);background:var(--t05);border:1px solid var(--t07);
  white-space:nowrap;transition:border-color .3s var(--ease),color .3s var(--ease)}
.dev-chip .ic{width:12px;height:12px}
.dev-chip.aus .ic{opacity:.55}
.dev-chip.warn{color:#c98a1a;border-color:rgba(201,138,26,.38);background:rgba(201,138,26,.08)}
.dev-grenzen:hover .dev-chip{border-color:var(--t20);color:var(--t90)}

.dev-rechte{display:flex;flex-direction:column;gap:12px;padding:2px 0 2px 54px;
  animation:cardIn .4s var(--swift) backwards}
.dev-rechte[hidden]{display:none}
.dev-sw{margin:0;gap:10px;font-size:12.5px;color:var(--t60);padding:9px 11px;border-radius:11px;
  background:var(--t03);border:1px solid var(--t07);min-width:0;
  transition:color .3s var(--ease),border-color .3s var(--ease),background .3s var(--ease)}
.dev-sw > .ic{order:1;width:15px;height:15px;color:var(--t30);flex:none;transition:color .3s var(--ease)}
.dev-sw-name{order:2;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dev-sw .sw{order:3}
.dev-sw:has(input:checked){color:var(--fg)}
.dev-sw:has(input:checked) > .ic{color:var(--akzent)}
.dev-sw:hover{border-color:var(--t14)}
.dev-sw:has(input:disabled):hover{border-color:var(--t07)}
.dev-haupt{font-size:13px;font-weight:600;padding:11px 12px}
.dev-sw-raster{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}
.dev-rechte.pausiert .dev-sw-raster,.dev-rechte.pausiert .dev-ordner{opacity:.5}

.dev-ordner{display:flex;flex-direction:column;gap:8px}
.dev-ordner-kopf{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.dev-ordner-titel{display:inline-flex;align-items:center;gap:9px;font-size:12.5px;font-weight:600;color:var(--t90)}
.dev-ordner-titel .ic{width:15px;height:15px;color:var(--t45)}
/* Zwei Segmente, eine Marke gleitet unter die Wahl – wie die Wahl des Systems */
.dev-seg{position:relative;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:2px;padding:3px;
  margin-left:auto;min-width:224px;border-radius:10px;background:var(--t05);border:1px solid var(--t07)}
.dev-seg::before{content:"";position:absolute;top:3px;bottom:3px;left:3px;width:calc((100% - 6px - 2px) / 2);
  border-radius:7px;background:var(--raised);box-shadow:0 1px 3px var(--t10);transition:translate .4s var(--swift)}
.dev-seg:has(button:nth-child(2).on)::before{translate:calc(100% + 2px) 0}
.dev-seg button{position:relative;z-index:1;height:26px;padding:0 10px;border-radius:7px;
  font-size:12px;font-weight:550;color:var(--t45);transition:color .25s var(--ease)}
.dev-seg button:hover{color:var(--t90)}
.dev-seg button.on{color:var(--fg)}
.dev-seg button:disabled{pointer-events:none}
html:not(.light) .dev-seg::before{background:var(--t10)}
.dev-ordner-auswahl{display:flex;flex-direction:column;gap:8px}
.dev-ordner-auswahl[hidden]{display:none}
.dev-ordner-liste{display:flex;flex-direction:column;gap:4px}
.dev-ordner-zeile{display:flex;align-items:center;gap:10px;min-width:0;padding:5px 5px 5px 11px;border-radius:10px;
  background:var(--t03);border:1px solid var(--t07);transition:opacity .3s var(--ease)}
.dev-ordner-zeile.out{opacity:.3}
.dev-ordner-zeile > .ic{width:15px;height:15px;color:var(--akzent);flex:none}
.dev-ordner-zeile code{flex:1;min-width:0;font-family:var(--mono);font-size:11.5px;color:var(--t90);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dev-aendern{margin:0 4px 0 0;gap:7px;font-size:11.5px;color:var(--t45);flex:none}
.dev-aendern:has(input:checked){color:var(--t90)}
.dev-ordner-zeile .ad-mini{width:28px;height:28px;padding:0;justify-content:center;flex:none}
.dev-ordner-leer{font-size:12px;color:var(--t45);padding:6px 2px}
.dev-ordner-neu{display:flex;gap:6px;margin:0}
.dev-pfad{flex:1;min-width:0;height:34px;padding:0 11px;border-radius:10px;border:1px solid var(--t10);
  background:var(--bg);color:var(--fg);font-family:var(--mono);font-size:12px;
  transition:border-color .25s var(--ease),box-shadow .25s var(--ease)}
.dev-pfad::placeholder{color:var(--t30)}
.dev-pfad:focus{outline:none;border-color:rgba(var(--akzent-rgb),.6);box-shadow:0 0 0 3px rgba(var(--akzent-rgb),.14)}
.dev-pfad:disabled{opacity:.5}
.dev-durchsuchen{height:34px;gap:7px;padding:0 12px;flex:none}
.dev-warn,.dev-warn-os{margin:0;font-size:12px}
.dev-warn[hidden]{display:none}

.dev-wahl{display:flex;flex-direction:column;border-radius:12px;border:1px solid var(--t10);
  background:var(--bg);overflow:hidden;transition:opacity .25s var(--ease)}
.dev-wahl[hidden]{display:none}
.dev-wahl.laedt{opacity:.55;pointer-events:none}
.dev-wahl-kopf{display:flex;align-items:center;gap:8px;padding:6px;border-bottom:1px solid var(--t07)}
.dev-wahl-kopf .ad-mini{width:30px;height:30px;padding:0;justify-content:center;flex:none}
.dev-wahl-pfad{flex:1;min-width:0;font-family:var(--mono);font-size:11.5px;color:var(--t75);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dev-wahl-orte{display:flex;flex-wrap:wrap;gap:5px;padding:8px;border-bottom:1px solid var(--t07)}
.dev-ort{height:26px;padding:0 10px;border-radius:8px;font-size:11.5px;font-weight:550;color:var(--t60);
  background:var(--t05);border:1px solid var(--t07);transition:color .25s var(--ease),border-color .25s var(--ease)}
.dev-ort:hover{color:var(--fg);border-color:var(--t14)}
.dev-ort.on{color:var(--akzent);border-color:rgba(var(--akzent-rgb),.45);background:rgba(var(--akzent-rgb),.08)}
.dev-wahl-liste{max-height:240px;overflow:auto;padding:4px;outline:none}
.dev-wahl-zeile{display:flex;align-items:center;gap:9px;padding:6px 9px;border-radius:8px;
  font-size:12.5px;color:var(--t90);cursor:default;user-select:none}
.dev-wahl-zeile .ic{width:15px;height:15px;color:var(--t45);flex:none}
.dev-wahl-zeile span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dev-wahl-zeile:hover{background:var(--t05)}
.dev-wahl-zeile.on{background:rgba(var(--akzent-rgb),.13);color:var(--fg)}
.dev-wahl-zeile.on .ic{color:var(--akzent)}
.dev-wahl-liste:focus-visible .dev-wahl-zeile.on{box-shadow:inset 0 0 0 1px rgba(var(--akzent-rgb),.55)}
.dev-wahl-fuss{display:flex;justify-content:flex-end;padding:8px;border-top:1px solid var(--t07)}
.dev-wahl-fuss .ad-save{height:32px;margin:0;padding:0 14px;border-radius:10px;font-size:12.5px;min-width:0}
.dev-wahl-fuss .ad-save span{max-width:280px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dev-wahl-fuss .ad-save:disabled{opacity:.4;pointer-events:none}
@media (max-width:640px){
  .dev-sw-raster{grid-template-columns:minmax(0,1fr)}
  .dev-rechte,.dev-grenzen{padding-left:0}
  .dev-seg{min-width:0;margin-left:0;width:100%}
}
/* Der Punkt am Menüeintrag „Geräte“: leer ein 8-px-Punkt (ein Gerät
   online), mit Zahl eine Pille, in die die Ziffern auch hineinpassen */
.acct-badge{margin-left:auto;min-width:8px;height:8px;padding:0;border-radius:999px;
  background:var(--akzent);color:var(--auf-akzent);font-size:10px;font-weight:700;line-height:1;text-align:center;
  display:grid;place-items:center;font-variant-numeric:tabular-nums}
.acct-badge:not(:empty){min-width:18px;height:18px;padding:0 5px}

/* Werkzeug-Karte: Eckdaten des Rechners */
.res-kvs{display:flex;flex-direction:column;gap:4px;padding:2px 0}
.res-kv{display:flex;gap:12px;align-items:baseline;font-size:12.5px}
.res-kv em{flex:0 0 132px;font-style:normal;color:var(--t45)}
.res-kv code{font-family:var(--mono);font-size:11.5px;color:var(--t75);
  word-break:break-word}

/* ── Hinweis auf den KeplerAgent ─────────────────────── */
.agent-hint{position:absolute;left:50%;bottom:calc(var(--dock-h) + 20px);z-index:40;
  width:min(460px,calc(100% - 32px));
  display:flex;gap:14px;align-items:flex-start;
  padding:17px 18px;border-radius:20px;
  background:var(--raised);border:1px solid var(--t14);
  box-shadow:var(--shadow),var(--panel-shadow);
  opacity:0;translate:-50% 16px;pointer-events:none;
  transition:opacity .5s var(--ease),translate .55s var(--swift)}
.agent-hint.show{opacity:1;translate:-50% 0;pointer-events:auto}
.agent-hint[hidden]{display:none}
/* Im Leerzustand gibt es kein Dock – dann sitzt der Hinweis unten */
body.empty .agent-hint{bottom:26px}
.ah-ic{flex:0 0 auto;width:36px;height:36px;border-radius:12px;display:grid;place-items:center;
  background:rgba(var(--akzent-rgb),.12);color:var(--akzent)}
.ah-ic .ic{width:18px;height:18px}
.ah-main{flex:1;min-width:0}
.ah-main strong{display:block;font-size:14px;font-weight:650;letter-spacing:-.012em;
  margin-bottom:4px}
.ah-main p{font-size:12.5px;color:var(--t60);line-height:1.6;margin-bottom:12px}
.ah-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.ah-go{height:34px;padding:0 16px;border-radius:11px;background:var(--fg);color:var(--bg);
  font-size:12.5px;font-weight:600;
  transition:translate .3s var(--swift),box-shadow .3s var(--ease)}
.ah-go:hover{translate:0 -1px;box-shadow:0 8px 20px -8px var(--t60)}
.ah-later{height:34px;padding:0 12px;border-radius:11px;font-size:12.5px;color:var(--t60);
  transition:background .3s var(--ease),color .3s var(--ease)}
.ah-later:hover{background:var(--t05);color:var(--fg)}
.ah-never{display:flex;align-items:center;gap:7px;margin-left:auto;
  font-size:11.5px;color:var(--t45);cursor:pointer;user-select:none}
.ah-never input{appearance:none;width:15px;height:15px;border-radius:5px;
  border:1px solid var(--t20);background:var(--t03);cursor:pointer;position:relative;
  transition:background .25s var(--ease),border-color .25s var(--ease)}
.ah-never input:checked{background:var(--akzent);border-color:var(--akzent)}
.ah-never input:checked::after{content:"";position:absolute;left:4.5px;top:1.5px;
  width:4px;height:8px;border:solid var(--auf-akzent);border-width:0 1.8px 1.8px 0;rotate:45deg}
.ah-never:hover{color:var(--t75)}
.ah-x{position:absolute;top:9px;right:9px;width:26px;height:26px;border-radius:8px;
  display:grid;place-items:center;color:var(--t30);
  transition:background .25s var(--ease),color .25s var(--ease)}
.ah-x .ic{width:13px;height:13px}
.ah-x:hover{background:var(--t05);color:var(--fg)}
@media (max-width:600px){
  .agent-hint{bottom:calc(var(--dock-h) + 10px);padding:15px}
  .ah-never{margin-left:0;width:100%}
}

/* ── Geräte-Freigabe (/verbinden) ────────────────────────── */
.pair-sec{display:flex;flex-direction:column;gap:14px}
.pair-sec[hidden]{display:none}
.pair-title{font-size:19px;font-weight:650;letter-spacing:-.02em;text-align:center}
.pair-lead{font-size:12.5px;color:var(--t60);line-height:1.65;text-align:center}
.pair-facts{display:flex;flex-direction:column;gap:1px;border-radius:14px;overflow:hidden;
  border:1px solid var(--t07)}
.pf-row{display:flex;gap:14px;align-items:baseline;padding:10px 14px;background:var(--t03)}
.pf-row em{flex:0 0 122px;font-style:normal;font-size:11.5px;color:var(--t45)}
.pf-row strong{flex:1;min-width:0;font-size:12.5px;font-weight:600;color:var(--t90);
  word-break:break-word}
.pair-note{display:flex;gap:11px;font-size:11.5px;color:var(--t60);line-height:1.6}
.pair-note .ic{width:17px;height:17px;flex:0 0 auto;color:var(--akzent);margin-top:1px}
.pair-note em{font-style:normal;color:var(--t90)}
.pair-deny{height:40px;border-radius:13px;font-size:12.5px;color:var(--t60);
  transition:background .3s var(--ease),color .3s var(--ease)}
.pair-deny:hover{background:var(--t05);color:var(--fg)}
.pair-link{display:grid;place-items:center;text-decoration:none}
.pair-page .login-card{gap:0}

/* Läuft in einem anderen Chat gerade eine Antwort */
.chat-item .live-dot{flex:0 0 auto;width:6px;height:6px;border-radius:50%;
  background:var(--akzent);animation:livePuls 1.6s ease-in-out infinite}
@keyframes livePuls{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.35;transform:scale(.72)}}

/* ── Terminal-Zeile: der echte Befehl, kein Mockup ────────── */
.pair-term{position:relative;display:flex;align-items:center;gap:11px;
  padding:11px 13px;border-radius:13px;text-align:left;
  background:#101012;border:1px solid rgba(255,255,255,.09);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05)}
.pt-lights{display:flex;gap:5px;flex:0 0 auto}
.pt-lights i{width:7px;height:7px;border-radius:50%;background:rgba(255,255,255,.16)}
.pt-lights i:first-child{background:rgba(255,255,255,.28)}
.pair-term code{flex:1;min-width:0;font-family:var(--mono);font-size:12.5px;
  color:rgba(255,255,255,.62);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pair-term code b{color:#fff;font-weight:600}
.pt-copy{flex:0 0 auto;width:28px;height:28px;border-radius:8px;display:grid;place-items:center;
  color:rgba(255,255,255,.45);transition:background .25s var(--ease),color .25s var(--ease)}
.pt-copy .ic{width:14px;height:14px}
.pt-copy:hover{background:rgba(255,255,255,.09);color:#fff}

/* ── Code-Felder ─────────────────────────────────────────── */
.code-boxes{display:flex;align-items:center;justify-content:center;gap:8px}
.code-boxes span.cb{
  width:42px;height:52px;border-radius:12px;text-align:center;
  font-family:var(--mono);font-size:21px;font-weight:600;letter-spacing:0;
  color:var(--fg);background:var(--t03);border:1px solid var(--t14);
  transition:border-color .25s var(--ease),background .25s var(--ease),
             box-shadow .25s var(--ease),translate .25s var(--swift)}
.code-boxes span.cb{display:grid;place-items:center}
.cb-dash{width:12px;height:1.5px;border-radius:1px;background:var(--t20);flex:0 0 auto}
@media (max-width:420px){
  .code-boxes{gap:6px}
  .code-boxes span.cb{width:34px;height:46px;font-size:18px}
}

.dev-dl{display:inline-flex;align-items:center;justify-content:center;gap:8px;
  margin-top:10px;height:38px;border-radius:12px;
  border:1px solid var(--t14);color:var(--t75);font-size:12.5px;text-decoration:none;
  transition:background .3s var(--ease),color .3s var(--ease),border-color .3s var(--ease)}
.dev-dl .ic{width:14px;height:14px}
.dev-dl:hover{background:var(--t05);color:var(--fg);border-color:var(--t30)}
.dev-dl[hidden]{display:none}
.sk-form .pair-term{margin-top:8px}


/* ── Teleport: hinüber auf den Rechner und zurück ─────────────
   Ruhezustand über Übergänge, die beiden Wechsel über eigene Läufe:
   der Eintritt technisch (Scan, Kollaps, Aufbau), der Austritt mit
   Druckwelle und Rückschlag. Alles transform/opacity.          */
.gen-mark{position:relative;display:flex;align-items:center}
.gm-bars{transition:opacity .4s var(--ease),transform .5s var(--swift)}
.gen-mark.remote .gm-bars{opacity:.2;transform:scale(.62)}

/* Scan-Linie beim Übertritt */
.gm-scan{position:absolute;left:-2px;top:50%;width:2px;height:34px;margin-top:-17px;
  border-radius:2px;pointer-events:none;opacity:0;
  background:linear-gradient(180deg,transparent,var(--akzent-hell),transparent);
  box-shadow:0 0 10px rgba(var(--akzent-rgb),.8)}
.gen-mark.tp-in .gm-scan{animation:tpScan .5s cubic-bezier(.5,0,.2,1) both}
@keyframes tpScan{
  0%{opacity:0;transform:translateX(0) scaleY(.3)}
  15%{opacity:1;transform:translateX(4px) scaleY(1)}
  85%{opacity:1;transform:translateX(42px) scaleY(1)}
  100%{opacity:0;transform:translateX(48px) scaleY(.3)}
}
/* Strahl zwischen Marke und Rechner */
.gm-beam{position:absolute;left:32px;top:50%;width:24px;height:1.5px;margin-top:-.75px;
  border-radius:1px;pointer-events:none;transform-origin:left center;
  background:linear-gradient(90deg,rgba(var(--akzent-rgb),0),var(--akzent));
  transform:scaleX(0);opacity:0;
  transition:transform .34s var(--swift),opacity .3s var(--ease)}
.gen-mark.remote .gm-beam{transform:scaleX(1);opacity:1}
.gen-mark.tp-in .gm-beam{animation:tpBeam .42s cubic-bezier(.2,.8,.2,1) .2s both}
@keyframes tpBeam{0%{transform:scaleX(0);opacity:0}
                  30%{opacity:1}
                  100%{transform:scaleX(1);opacity:1}}
/* Ziel: der Rechner */
.gm-port{position:absolute;left:60px;top:50%;width:26px;height:26px;margin-top:-13px;
  border-radius:8px;display:grid;place-items:center;pointer-events:none;
  color:var(--akzent);background:rgba(var(--akzent-rgb),.12);
  transform:translateX(-10px) scale(.5);opacity:0;
  transition:transform .42s var(--swift) .06s,opacity .32s var(--ease) .06s}
.gm-port .ic{width:14px;height:14px}
.gen-mark.remote .gm-port{transform:none;opacity:1}
/* Aufbau flackert wie ein Gerät, das hochfährt */
.gen-mark.tp-in .gm-port{animation:tpPortIn .62s steps(1,end) .3s both}
@keyframes tpPortIn{
  0%{opacity:0;transform:translateX(-8px) scale(.5)}
  22%{opacity:.5;transform:translateX(-3px) scale(.9)}
  34%{opacity:0}
  46%{opacity:.85;transform:none}
  56%{opacity:.2}
  70%,100%{opacity:1;transform:none}
}
.gen-mark.remote .gm-port::after{content:"";position:absolute;inset:-5px;border-radius:11px;
  border:1.5px solid rgba(var(--akzent-rgb),.5);
  animation:portPuls 1.9s ease-out infinite}
@keyframes portPuls{0%{opacity:.75;transform:scale(.86)}
                    70%,100%{opacity:0;transform:scale(1.18)}}
/* Name des Rechners */
.gm-name{position:absolute;left:94px;top:50%;margin-top:-9px;
  font-size:11.5px;font-weight:600;color:var(--t60);white-space:nowrap;
  pointer-events:none;opacity:0;transform:translateX(-6px);
  transition:opacity .3s var(--ease) .5s,transform .4s var(--swift) .5s}
.gen-mark.remote .gm-name{opacity:1;transform:none}

/* ── Austritt: Druckwelle, Rückschlag, Blitz ──────────────── */
.gm-wave{position:absolute;left:60px;top:50%;width:26px;height:26px;margin-top:-13px;
  border-radius:50%;pointer-events:none;opacity:0;
  border:2px solid rgba(var(--akzent-rgb),.9)}
.gen-mark.tp-out .gm-wave{animation:tpWave .72s cubic-bezier(.12,.7,.25,1) .04s both}
@keyframes tpWave{0%{opacity:.95;transform:scale(.3)}
                  100%{opacity:0;transform:scale(3.4)}}
.gm-flash{position:absolute;left:20px;top:50%;width:46px;height:46px;margin-top:-23px;
  border-radius:50%;pointer-events:none;opacity:0;
  background:radial-gradient(closest-side,rgba(var(--akzent-rgb),.9),rgba(var(--akzent-rgb),.25) 55%,transparent 75%)}
.gen-mark.tp-out .gm-flash{animation:tpFlash .5s ease-out .16s both}
@keyframes tpFlash{0%{opacity:0;transform:scale(.5)}
                   30%{opacity:.9;transform:scale(1)}
                   100%{opacity:0;transform:scale(1.7)}}
.gen-mark.tp-out .gm-port{animation:tpPortOut .34s cubic-bezier(.6,0,.35,1) both}
@keyframes tpPortOut{0%{opacity:1;transform:none}
                     35%{opacity:1;transform:scale(1.4)}
                     100%{opacity:0;transform:scale(.15)}}
.gen-mark.tp-out .gm-beam{transform-origin:right center;
  animation:tpBeamOut .26s cubic-bezier(.6,0,.2,1) .06s both}
@keyframes tpBeamOut{0%{transform:scaleX(1);opacity:1}
                     100%{transform:scaleX(0);opacity:0}}
.gen-mark.tp-out .gm-name{animation:tpNameOut .2s var(--ease) both}
@keyframes tpNameOut{to{opacity:0;transform:translateX(6px)}}
/* die Marke schlägt zurück in ihre Form */
.gen-mark.tp-out .gm-bars{animation:tpBarsBack .78s cubic-bezier(.22,1.4,.32,1) .16s both}
@keyframes tpBarsBack{
  0%{transform:scale(.62);opacity:.2}
  22%{transform:scaleX(.08) scaleY(1.35);opacity:1}
  55%{transform:scale(1.14);opacity:1}
  100%{transform:scale(1);opacity:1}
}
/* Ruhende Marke trägt keinen Teleport mit sich */
.gen-mark.done .gm-beam,.gen-mark.done .gm-port,.gen-mark.done .gm-name,
.gen-mark.done .gm-scan,.gen-mark.done .gm-wave,.gen-mark.done .gm-flash{display:none}
.trace-step.ts-device{color:var(--t75)}
.trace-step.ts-device .ts-dot{background:var(--akzent)}

/* ══ Anmeldung & Geräte-Freigabe ═══════════════════════════
   Kein Kasten: der Inhalt steht direkt auf dem Seitengrund,
   gegliedert wird ausschließlich mit Linien und Typografie.  */
body.login-page{background:var(--bg)}
.login-wrap{width:min(384px,100%);gap:0;align-items:stretch}
.login-card{background:none;border:0;border-radius:0;box-shadow:none;
  padding:0;gap:0;text-align:left;animation:none}
.login-card.play{animation:authIn .4s var(--swift) both}
@keyframes authIn{from{opacity:0;translate:0 6px}to{opacity:1;translate:0}}
.login-card.shake{animation:shake .42s ease-in-out}

.login-head{justify-content:flex-start;margin:0 0 26px}
.login-logo{width:126px;height:26px}
.auth-title{font-size:24px;font-weight:650;letter-spacing:-.025em;margin-bottom:6px}
.auth-sub{font-size:13px;color:var(--t45);line-height:1.55;margin-bottom:26px}

/* Felder: nur eine Linie unter der Eingabe */
#loginForm{display:block}
.login-card .fld{gap:0;margin-bottom:20px}
.login-card .fld span{display:block;font-size:11px;font-weight:600;letter-spacing:.02em;
  text-transform:none;color:var(--t45);margin-bottom:2px}
.login-card .fld input{height:38px;padding:0;border:0;border-radius:0;
  border-bottom:1px solid var(--t14);background:none;color:var(--fg);
  font-size:15px;box-shadow:none;
  transition:border-color .3s var(--ease)}
.login-card .fld input::placeholder{color:var(--t20)}
.login-card .fld input:hover{border-bottom-color:var(--t30)}
.login-card .fld input:focus{border-bottom-color:var(--fg);background:none;box-shadow:none}

.login-sso{gap:0}
.login-ms{height:46px;padding:0 2px;border:0;border-radius:0;background:none;
  border-bottom:1px solid var(--t10);font-size:14px;font-weight:550;
  transition:border-color .3s var(--ease),color .3s var(--ease)}
.login-ms:hover{background:none;border-bottom-color:var(--fg);translate:none;box-shadow:none}
.login-or{margin:26px 0 22px;font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--t30)}
.login-or::before,.login-or::after{background:var(--t10)}

.login-btn{height:46px;border-radius:0;box-shadow:none;font-size:14px;width:100%;
  margin-top:8px;letter-spacing:.01em}
.login-btn:hover:not(:disabled){translate:none;box-shadow:none;opacity:.88}
.login-btn:active:not(:disabled){scale:1;opacity:.78}
.login-error{border-radius:0;border:0;border-left:2px solid #e0574f;background:none;
  padding:1px 0 1px 11px;margin-bottom:18px;font-size:12.5px;color:var(--t75)}
.login-hint{text-align:left;margin-top:22px;padding-top:16px;
  border-top:1px solid var(--t07);font-size:11.5px}
.login-foot{margin-top:26px;padding-top:14px;border-top:1px solid var(--t05);
  font-size:10.5px;width:100%;text-align:left}

/* ══ Anmeldung: Bild links, Formular rechts ════════════════
   Links ein ruhiges Bild: tiefer Grund, zwei Lichtfelder,
   die Bildmarke als Relief. Rechts Logo und Maske, mittig.
   Im hellen Modus wird die Bildhälfte weiß – die Marke steht
   dann schwarz auf Weiß (siehe ganz unten).                 */
body.login-split{display:block;place-items:normal;padding:0;
  height:100dvh;overflow:auto}
.auth-split{display:grid;grid-template-columns:minmax(0,1.04fr) minmax(0,.96fr);
  min-height:100dvh}

.auth-art{position:relative;overflow:hidden;background:#050505;isolation:isolate}
.art-canvas{position:absolute;inset:0;width:100%;height:100%;display:block;
  animation:artAuf 1.2s var(--ease) both}
@keyframes artAuf{from{opacity:0;scale:1.04}to{opacity:1;scale:1}}
/* Schleier zu den Rändern: die Schrift steht ruhig auf dem Bild */
.auth-art::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(0,0,0,.5) 0%,rgba(0,0,0,0) 30%,
    rgba(0,0,0,.2) 58%,rgba(0,0,0,.82) 100%)}
.art-inhalt{position:relative;z-index:1;height:100%;display:flex;
  flex-direction:column;justify-content:flex-end;
  padding:clamp(30px,3.6vw,52px);
  animation:artText 1s var(--swift) .25s both}
@keyframes artText{from{opacity:0;translate:0 10px}to{opacity:1;translate:0}}
.art-claim{font-size:clamp(21px,2.2vw,30px);font-weight:550;letter-spacing:-.03em;
  line-height:1.26;color:rgba(255,255,255,.94);text-wrap:balance}
.art-note{margin-top:14px;font-size:11.5px;font-weight:500;letter-spacing:.11em;
  text-transform:uppercase;color:rgba(255,255,255,.4)}

/* Zwei Lichtfelder atmen langsam – das Bild steht nie ganz still */
.af{animation:afDrift 32s var(--ease) infinite alternate}
.af2{animation-duration:41s;animation-delay:-13s}
@keyframes afDrift{from{transform:translate(-30px,-20px) scale(1)}
  to{transform:translate(34px,26px) scale(1.08)}}

/* Die Marke: weicher Schein, darüber die klare Form – ein Relief, kein Muster.
   Der Schein trägt das Blau der Lichtfelder, die Form ist Weiß. */
.am-schein{filter:url(#ag-weich);opacity:.5;color:var(--akzent)}
.am-form{opacity:.13;color:#fff}
.art-linien{opacity:.5}
.art-glanz{mix-blend-mode:screen}
.art-korn{opacity:.045;mix-blend-mode:overlay}

/* Rechte Hälfte: Logo, dann die Maske – mittig auf ruhigem Grund */
.login-split .login-wrap{width:100%;justify-content:center;
  padding:48px clamp(26px,5.5vw,72px)}
.login-split .login-card{width:min(372px,100%);margin-inline:auto}
.login-split .login-head{margin-bottom:34px}
.login-split .auth-title{font-size:27px}

@media (prefers-reduced-motion:reduce){
  .af{animation:none}
  .art-canvas,.art-inhalt{animation:none}
}

@media (max-width:900px){
  .auth-split{grid-template-columns:1fr;grid-template-rows:auto 1fr}
  .auth-art{min-height:min(26vh,210px)}
  .art-inhalt{padding:24px 26px 22px}
  .art-claim{font-size:19px}
  .art-note{margin-top:8px;font-size:10.5px}
  .login-split .login-wrap{padding:34px 26px 46px}
  .login-split .login-head{margin-bottom:26px}
  .login-split .auth-title{font-size:23px}
}
@media (max-width:900px) and (max-height:640px){
  .auth-art{min-height:120px}
  .art-claim,.art-note{display:none}
}

/* ── Geräte-Freigabe ─────────────────────────────────────── */
.pair-sec{gap:0;text-align:left}
.pair-title{font-size:24px;font-weight:650;letter-spacing:-.025em;text-align:left;
  margin-bottom:6px}
.pair-lead{font-size:13px;color:var(--t45);line-height:1.55;text-align:left;
  margin-bottom:26px}
.pair-code-label{font-size:10.5px;font-weight:600;letter-spacing:.1em;
  text-transform:uppercase;color:var(--t30);margin-bottom:10px}
.code-boxes{display:block;font-family:var(--mono);font-size:32px;font-weight:600;
  letter-spacing:.14em;color:var(--fg);line-height:1.1;
  padding-bottom:22px;border-bottom:1px solid var(--t10);margin-bottom:2px}
.code-boxes span.cb,.code-boxes .cb-dash{all:unset}
.code-boxes .cb-dash{color:var(--t20)}
.code-boxes .cb-dash::before{content:"–"}

.pair-facts{display:block;border:0;border-radius:0;margin-bottom:22px}
.pf-row{display:flex;gap:16px;align-items:baseline;padding:13px 0;
  background:none;border-bottom:1px solid var(--t07)}
.pf-row em{flex:0 0 116px;font-style:normal;font-size:12px;color:var(--t45)}
.pf-row strong{flex:1;min-width:0;font-size:13px;font-weight:550;color:var(--t90);
  word-break:break-word}
.pair-note{display:flex;gap:10px;font-size:11.5px;color:var(--t45);line-height:1.6;
  margin-bottom:22px}
.pair-note .ic{width:15px;height:15px;flex:0 0 auto;color:var(--t30);margin-top:2px}
.pair-note strong{color:var(--t75);font-weight:600}
.pair-note em{font-style:normal;color:var(--t75)}
.pair-deny{height:42px;border-radius:0;font-size:13px;color:var(--t45);width:100%;
  margin-top:2px;transition:color .3s var(--ease)}
.pair-deny:hover{background:none;color:var(--fg)}
.pair-link{display:grid;place-items:center;text-decoration:none}

/* Ergebnis: großes Zeichen, darunter eine Linie – keine Kachel */
.pair-done{width:auto;height:auto;margin:0 0 20px;display:block;
  border:0;border-radius:0;background:none;color:var(--akzent)}
.pair-done .ic{width:34px;height:34px;stroke-width:2;
  stroke-dasharray:26;stroke-dashoffset:26;
  animation:pairHaken .45s var(--ease) .1s forwards}
@keyframes pairHaken{to{stroke-dashoffset:0}}
.pair-done.fehler{color:#e0574f}
.pair-done.fehler .ic{stroke-dasharray:none;stroke-dashoffset:0;animation:none}
#vLoad .pair-lead{margin:6px 0 0;color:var(--t30)}

@media (max-width:480px){
  .login-wrap{padding:0 4px}
  .code-boxes{font-size:26px}
  .auth-title,.pair-title{font-size:21px}
}

/* ── Umgang mit Aktionen: Wahl im Eingabefeld ─────────────── */
/* Gleiche Höhe wie der Anhang-Knopf – sie stehen nebeneinander */
.mode-btn{display:inline-flex;align-items:center;gap:8px;height:38px;padding:0 15px;
  border-radius:19px;border:1px solid var(--t10);
  font-size:12.5px;font-weight:550;color:var(--t60);
  transition:border-color .3s var(--ease),color .3s var(--ease),background .3s var(--ease)}
.mode-btn .ic{width:15px;height:15px}
.mode-btn:hover{color:var(--fg);border-color:var(--t30)}
.mode-btn[data-mode="alles"]{color:var(--t45)}
.mode-btn[data-mode="fragen"] .ic{color:var(--akzent)}
.composer-bar{gap:10px}

.mode-menu{position:fixed;z-index:130;width:min(300px,calc(100vw - 24px));
  background:var(--raised);border:1px solid var(--t14);border-radius:14px;padding:6px;
  box-shadow:var(--panel-shadow);animation:menuIn .28s var(--swift) both}
.mode-menu[hidden]{display:none}
.mm-kopf{padding:8px 10px 6px;font-size:10.5px;font-weight:600;letter-spacing:.08em;
  text-transform:uppercase;color:var(--t30)}
.mode-menu button{display:block;width:100%;text-align:left;padding:9px 11px;border-radius:9px;
  transition:background .25s var(--ease)}
.mode-menu button strong{display:block;font-size:13px;font-weight:600;color:var(--t90)}
.mode-menu button em{display:block;font-style:normal;font-size:11.5px;color:var(--t45);
  line-height:1.45;margin-top:1px}
.mode-menu button:hover{background:var(--t05)}
.mode-menu button.on{background:var(--t07)}
.mode-menu button.on strong{color:var(--fg)}
.mode-menu button.on strong::after{content:"·";margin-left:7px;color:var(--akzent);font-weight:700}
.mm-fuss{padding:8px 11px 4px;margin-top:4px;border-top:1px solid var(--t07);
  font-size:11px;color:var(--t30);line-height:1.5}

/* ── Rückfrage im Chat ───────────────────────────────────── */
.ask-card{max-width:640px;margin:16px 0;padding:15px 17px;border-radius:14px;
  border:1px solid var(--t14);background:var(--t03);
  animation:cardIn .4s var(--swift) both}
.ask-card.ask-frage{border-color:rgba(var(--akzent-rgb),.35)}
.ask-top{display:flex;align-items:center;gap:10px;margin-bottom:4px}
.ask-top .ic{width:16px;height:16px;flex:0 0 auto;color:var(--akzent)}
.ask-top strong{font-size:13.5px;font-weight:600;color:var(--t90);line-height:1.45}
.ask-detail{margin:8px 0 0;padding:9px 11px;border-radius:9px;background:var(--t03);
  border:1px solid var(--t07);font-family:var(--mono);font-size:11.5px;line-height:1.6;
  color:var(--t75);white-space:pre-wrap;word-break:break-word;max-height:180px;overflow:auto}
/* Klartext-Satz: was der Befehl darüber bewirkt. Steht bewusst kräftiger
   als die Risiko-Begründung – für viele ist er die einzige Zeile der
   Karte, die sie wirklich lesen. */
.ask-klartext{margin-top:9px;font-size:13px;color:var(--t90);line-height:1.55}
.ask-grund{margin-top:6px;font-size:12px;color:var(--t60);line-height:1.55}
.ask-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:13px}
.ask-actions[hidden]{display:none}
.ask-form{display:flex;align-items:center;gap:8px;width:min(520px,100%)}
/* Steht das freie Feld unter Antwort-Knöpfen, bekommt es seine eigene Zeile */
.ask-btn + .ask-form{flex-basis:100%;margin-top:2px}
.ask-input{min-width:0;flex:1;height:36px;padding:0 11px;border-radius:9px;
  border:1px solid var(--t14);background:var(--bg);color:var(--fg);font-size:13px;
  outline:none;transition:border-color .25s var(--ease),box-shadow .25s var(--ease)}
.ask-input:focus{border-color:rgba(var(--akzent-rgb),.65);box-shadow:0 0 0 3px rgba(var(--akzent-rgb),.1)}
.ask-btn{height:34px;padding:0 14px;border-radius:9px;border:1px solid var(--t14);
  font-size:12.5px;font-weight:550;color:var(--t75);
  transition:background .25s var(--ease),color .25s var(--ease),border-color .25s var(--ease)}
.ask-btn:hover{background:var(--t05);color:var(--fg);border-color:var(--t30)}
.ask-btn.ask-ja{background:var(--fg);color:var(--bg);border-color:var(--fg)}
.ask-btn.ask-ja:hover{opacity:.88;background:var(--fg);color:var(--bg)}
.ask-btn.ask-nein:hover{border-color:#e0574f;color:#e0574f;background:none}
.ask-wahl{display:flex;align-items:center;gap:8px;margin-top:12px;
  font-size:12.5px;font-weight:550;color:var(--akzent)}
.ask-wahl .ic{width:14px;height:14px}
.ask-card.done{background:none}
.ask-card.abgelehnt{border-color:var(--t10)}
.ask-card.abgelehnt .ask-wahl{color:var(--t45)}
.ask-card.abgelehnt .ask-top .ic{color:var(--t30)}

/* ── Anleitung je Betriebssystem ─────────────────────────── */
/* Drei gleich breite Segmente, eine Marke gleitet unter die Wahl. Seit der
   Umschalter allein in der Karte steht (Flex-Spalte), füllt er ihre Breite –
   als Raster ist das gewollt, nicht gezogen. */
.dev-os-wahl{position:relative;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:2px;padding:3px;border-radius:11px;background:var(--t05);border:1px solid var(--t07)}
.dev-os-wahl::before{content:"";position:absolute;top:3px;bottom:3px;left:3px;
  width:calc((100% - 6px - 4px) / 3);border-radius:8px;background:var(--raised);
  box-shadow:0 1px 3px var(--t10);transition:translate .4s var(--swift)}
.dev-os-wahl:has(button:nth-child(2).on)::before{translate:calc(100% + 2px) 0}
.dev-os-wahl:has(button:nth-child(3).on)::before{translate:calc(200% + 4px) 0}
.dev-os-wahl button{position:relative;z-index:1;height:30px;padding:0 10px;border-radius:8px;
  font-size:12.5px;font-weight:550;color:var(--t45);transition:color .25s var(--ease)}
.dev-os-wahl button:hover{color:var(--t90)}
.dev-os-wahl button.on{color:var(--fg)}
html:not(.light) .dev-os-wahl::before{background:var(--t10)}

/* Einzeiler zum Einrichten – der Befehl ist die Hauptsache */
.dev-einzeiler{margin:2px 0 16px}
.dev-einzeiler code{font-size:11.5px;white-space:nowrap;overflow-x:auto;
  scrollbar-width:none}
.dev-einzeiler code::-webkit-scrollbar{display:none}

/* ── Verlauf verdichtet: ruhige Trennlinie im Verlauf ────── */
.compact-mark{display:flex;align-items:center;gap:12px;margin:22px 0 20px;
  animation:compactIn .5s var(--swift) both}
.compact-mark .cm-line{flex:1;height:1px;background:linear-gradient(90deg,
  transparent,var(--t14) 22%,var(--t14) 78%,transparent)}
.compact-mark .cm-text{display:inline-flex;align-items:center;gap:7px;
  font-size:11.5px;letter-spacing:.02em;color:var(--t50);white-space:nowrap}
.compact-mark .cm-text strong{font-weight:600;color:var(--t70)}
.compact-mark .ic{width:13px;height:13px;opacity:.75}
@keyframes compactIn{from{opacity:0;scale:.97}to{opacity:1;scale:1}}
@media (max-width:560px){
  .compact-mark .cm-text{white-space:normal;text-align:center}
}

.ad-sub{font-size:13px;font-weight:650;letter-spacing:-.008em;color:var(--fg);
  margin:22px 0 6px;padding-top:18px;border-top:1px solid var(--t10)}

/* Aus HTML-Attributen hierher geholt, damit die Seiten eine strenge
   Inhaltsrichtlinie ohne „unsafe-inline" fahren können. */
.svg-defs{position:absolute}
.ic-fill{fill:currentColor;stroke:none}

/* ══ Automatisierungen ═════════════════════════════════════
   Aufträge nach Plan: ihr Abschnitt in der Leiste (über dem
   Verlauf, auf- und zuklappbar), der Kopf über ihrem Chat, das
   Formular und die Hinweise rechts oben.                     */

/* ── Abschnitt in der Leiste ──────────────────────────────── */
.nav-sec-auto{display:flex;align-items:center;gap:4px;margin:22px 4px 8px 8px}
.nav-sec-btn{flex:1;min-width:0;display:flex;align-items:center;gap:6px;padding:0;
  font:inherit;font-size:10.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  color:var(--t30);text-align:left;transition:color .3s var(--ease)}
.nav-sec-btn:hover{color:var(--t60)}
.nav-sec-chev{flex:0 0 auto;width:12px;height:12px;transition:transform .35s var(--swift)}
.nav-sec-btn[aria-expanded="false"] .nav-sec-chev{transform:rotate(-90deg)}
.nav-sec-dot{flex:0 0 auto;width:6px;height:6px;border-radius:50%;background:var(--akzent);
  box-shadow:0 0 0 3px rgba(var(--akzent-rgb),.18);margin-left:2px}
.nav-sec-dot[hidden]{display:none}
.nav-sec-plus{flex:0 0 auto;width:22px;height:22px;border-radius:7px;display:grid;place-items:center;
  color:var(--t45);transition:background .3s var(--ease),color .3s var(--ease)}
.nav-sec-plus .ic{width:13px;height:13px}
.nav-sec-plus:hover{background:var(--fg);color:var(--bg)}

.auto-list{flex:0 1 auto;max-height:min(38vh,320px);overflow-y:auto;
  display:flex;flex-direction:column;gap:2px;margin:0 -4px;padding:0 4px}
.auto-list[hidden]{display:none}
.auto-list:empty::after{content:"Noch keine – mit + anlegen";
  color:var(--t30);font-size:12.5px;padding:6px 8px}
.auto-item{display:flex;align-items:center;gap:8px;width:100%;
  padding:8px 10px 8px 9px;border-radius:11px;text-align:left;
  color:var(--t60);font-size:13px;
  transition:background .3s var(--ease),color .3s var(--ease)}
.auto-item:hover{background:var(--t05);color:var(--t90)}
.auto-item.active{background:var(--t07);color:var(--fg)}
.auto-item .t{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.auto-item.neu .t{color:var(--t90);font-weight:550}
.auto-item.active.neu .t{color:var(--fg)}
.auto-item .am{flex:0 0 auto;width:16px;height:16px;display:grid;place-items:center;color:var(--t30);
  transition:color .3s var(--ease)}
.auto-item .am .ic{width:13px;height:13px}
.auto-item:hover .am,.auto-item.active .am{color:var(--akzent)}
/* Läuft gerade: derselbe pulsende Punkt wie bei den Chats */
.auto-item .live-dot{flex:0 0 auto;width:7px;height:7px;border-radius:50%;
  background:var(--akzent);animation:livePuls 1.6s ease-in-out infinite}
/* Fertig, noch nicht angesehen: ruhig leuchtend, bis man hineinsieht */
.auto-item .neu-dot{flex:0 0 auto;width:7px;height:7px;border-radius:50%;background:var(--akzent);
  box-shadow:0 0 0 3px rgba(var(--akzent-rgb),.22),0 0 12px rgba(var(--akzent-rgb),.55);
  animation:neuDot .5s var(--swift) both}
@keyframes neuDot{from{scale:0;opacity:0}to{scale:1;opacity:1}}
.auto-item .ai-plan{flex:0 0 auto;width:12px;height:12px;color:var(--t30);opacity:.9}
.auto-item .ai-plan.aus{color:var(--t20)}

/* ── Kopf über dem Chat ───────────────────────────────────── */
.auto-panel{max-width:var(--col);margin:0 auto;padding:6px 24px 0}
.auto-panel[hidden]{display:none}
body.ue-offen .auto-panel{display:none}
.ap-card{position:relative;background:var(--panel);border-radius:20px;padding:18px 20px 16px;
  box-shadow:var(--comp-shadow),var(--comp-hi);animation:cardIn .5s var(--swift) backwards}
.ap-card::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;
  background:var(--edge);pointer-events:none;
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude}
.ap-kopf{display:flex;gap:14px;align-items:flex-start}
.ap-ic{flex:0 0 auto;width:40px;height:40px;border-radius:13px;display:grid;place-items:center;
  background:rgba(var(--akzent-rgb),.12);color:var(--akzent)}
.ap-ic .ic{width:19px;height:19px}
.ap-main{flex:1;min-width:0}
.ap-name-row{display:flex;align-items:center;min-height:28px}
.ap-name{font:inherit;font-size:17px;font-weight:650;letter-spacing:-.015em;color:var(--fg);
  text-align:left;padding:0 4px;margin:0 -4px;border-radius:7px;max-width:100%;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  transition:background .3s var(--ease)}
.ap-name:hover{background:var(--t05)}
.ap-name[hidden],.ap-name-input[hidden]{display:none}
.ap-name-input{width:100%;font:inherit;font-size:17px;font-weight:650;letter-spacing:-.015em;
  color:var(--fg);background:none;border:0;border-bottom:1px solid var(--akzent);outline:0;padding:0}
.ap-desc{font-size:13px;color:var(--t60);line-height:1.5;margin-top:2px}
.ap-desc[hidden]{display:none}
.ap-meta{display:flex;flex-wrap:wrap;gap:6px 14px;margin-top:9px;font-size:12px;color:var(--t45)}
.ap-meta span{display:inline-flex;align-items:center;gap:5px;white-space:nowrap}
.ap-meta .ic{width:12px;height:12px;flex:0 0 auto}
.ap-meta .laeuft{color:var(--akzent)}
.ap-meta .fehler{color:#ff8080}
.ap-chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.ap-chip{display:inline-flex;align-items:center;gap:5px;height:24px;padding:0 9px;border-radius:8px;
  border:1px solid var(--t10);background:var(--t05);font-size:11.5px;color:var(--t75);max-width:100%}
.ap-chip .ic{width:11px;height:11px;color:var(--t45);flex:0 0 auto}
.ap-chip.leer{border-style:dashed;background:none;color:var(--t45)}
.ap-actions{display:flex;gap:6px;align-items:center;flex:0 0 auto}
/* Im Chat eines Laufs ist der Kopf der Automatisierung weg – oben rechts
   bleibt nur ein Pfeil zurück zur Übersicht */
.ap-zurueck{position:absolute;top:12px;right:16px;z-index:45;translate:0 -6px;opacity:0;pointer-events:none;
  transition:opacity .25s var(--ease),translate .25s var(--ease)}
.ap-zurueck .ic{transform:rotate(90deg)}
body.auto-lauf .ap-zurueck{opacity:1;translate:0 0;pointer-events:auto}
.ap-zurueck[hidden]{display:none}
.ap-run{display:flex;align-items:center;gap:7px;height:36px;padding:0 15px;border-radius:11px;
  background:var(--fg);color:var(--bg);font-size:12.5px;font-weight:600;white-space:nowrap;
  transition:translate .3s var(--swift),box-shadow .3s var(--ease),opacity .3s var(--ease)}
.ap-run .ic{width:14px;height:14px}
.ap-run:hover:not(:disabled){translate:0 -1px;box-shadow:0 8px 20px -8px var(--t60)}
.ap-run:disabled{opacity:.5;cursor:default}
.ap-prompt{margin-top:12px;border-top:1px solid var(--t07);padding-top:10px}
.ap-prompt summary{cursor:pointer;list-style:none;display:flex;align-items:center;gap:6px;
  font-size:10.5px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--t45);
  transition:color .3s var(--ease)}
.ap-prompt summary::-webkit-details-marker{display:none}
.ap-prompt summary:hover{color:var(--t75)}
.ap-prompt summary .ic{width:12px;height:12px;transform:rotate(-90deg);transition:transform .3s var(--swift)}
.ap-prompt[open] summary .ic{transform:none}
.ap-prompt pre{margin-top:9px;white-space:pre-wrap;overflow-wrap:break-word;font:inherit;font-size:13px;
  color:var(--t75);line-height:1.55;max-height:240px;overflow:auto}
.ap-leer{margin-top:12px;font-size:12.5px;color:var(--t45);line-height:1.55}
.ap-leer[hidden]{display:none}

/* ── Läufe als Kacheln ─────────────────────────────────────────────
   Unter der Karte. Weiß im Hellen, Schwarz im Dunklen, ein weicher,
   zweistufiger Schatten statt Rand. Keine Textvorschau – nur der Stand:
   Solange der Lauf arbeitet, wandert ein Balken und der Schritt steht
   darunter, ohne Symbol. Danach kommt das Symbol des Zustands weich
   herein: Grün abgeschlossen, Rot Fehler, Gelb Frage, Blau ein Ergebnis,
   das nur im Chat steht. Kacheln werden an Ort und Stelle nachgeführt,
   die Farben gleiten.                                                  */
.ap-laeufe{display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:16px;margin:26px 0 6px}
.ap-laeufe[hidden]{display:none}
.ap-lauf{--lf:var(--t45);--lf-flaeche:color-mix(in srgb,var(--lf) 13%,transparent);
  position:relative;display:flex;flex-direction:column;gap:6px;min-height:168px;padding:18px 20px 16px;border-radius:20px;
  text-align:left;cursor:pointer;color:var(--fg);background:#0a0a0a;
  box-shadow:0 0 0 1px rgba(255,255,255,.06),0 1px 0 rgba(255,255,255,.04) inset,0 18px 40px -28px rgba(0,0,0,.95);
  transition:translate .28s cubic-bezier(.2,.8,.2,1),box-shadow .28s cubic-bezier(.2,.8,.2,1),background .28s var(--ease)}
html.light .ap-lauf{background:#fff;
  box-shadow:0 0 0 1px rgba(62,48,26,.06),0 1px 2px rgba(62,48,26,.04),0 16px 36px -26px rgba(62,48,26,.28)}
.ap-lauf:hover{translate:0 -2px;
  box-shadow:0 0 0 1px rgba(255,255,255,.09),0 1px 0 rgba(255,255,255,.05) inset,0 26px 50px -30px rgba(0,0,0,1)}
html.light .ap-lauf:hover{box-shadow:0 0 0 1px rgba(62,48,26,.08),0 2px 4px rgba(62,48,26,.05),0 24px 48px -28px rgba(62,48,26,.34)}
.ap-lauf:focus-visible{outline:2px solid var(--lf);outline-offset:3px}
.ap-lauf.aktuell{box-shadow:0 0 0 1.5px var(--lf),0 18px 40px -28px rgba(0,0,0,.95)}
.ap-lauf.laeuft{--lf:var(--akzent)}
.ap-lauf.fertig{--lf:#2fb36a}
.ap-lauf.chat{--lf:var(--akzent)}
.ap-lauf.frage{--lf:#e9a23b}
.ap-lauf.fehler{--lf:#e5484d}
.ap-lauf.gestoppt{--lf:var(--t45)}
/* Kommen und Gehen */
.ap-lauf.rein{animation:apRein .5s cubic-bezier(.2,.8,.2,1) both}
.ap-lauf.raus{animation:apRaus .26s var(--ease) both;pointer-events:none}
@keyframes apRein{from{opacity:0;translate:0 10px;scale:.98}to{opacity:1;translate:0 0;scale:1}}
@keyframes apRaus{to{opacity:0;scale:.97}}
/* Kopf: Symbol (erst mit Zustand), Titel, Kreuz */
.ap-lauf-kopf{display:flex;align-items:center;gap:11px;min-height:32px;padding-right:26px}
.ap-lauf-ic{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:11px;flex:0 0 auto;
  color:var(--lf);background:var(--lf-flaeche);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--lf) 22%,transparent);
  transition:color .35s var(--ease),background .35s var(--ease)}
.ap-lauf-ic[hidden]{display:none}
.ap-lauf-ic .ic{width:17px;height:17px;stroke-width:1.9}
.ap-lauf-ic.rein{animation:apIcon .55s cubic-bezier(.34,1.5,.64,1) both}
@keyframes apIcon{from{opacity:0;scale:.55;rotate:-12deg}to{opacity:1;scale:1;rotate:0deg}}
.ap-lauf-titel{font-size:13px;font-weight:600;letter-spacing:.01em;flex:1 1 auto;min-width:0;color:var(--t75);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ap-lauf-x{position:absolute;top:14px;right:14px;width:26px;height:26px;border-radius:8px;display:inline-flex;
  align-items:center;justify-content:center;color:var(--t45);background:none;border:0;cursor:pointer;opacity:0;
  transition:opacity .2s var(--ease),background .2s var(--ease),color .2s var(--ease)}
.ap-lauf-x .ic{width:12px;height:12px}
.ap-lauf-x[hidden]{display:none}
.ap-lauf:hover .ap-lauf-x,.ap-lauf:focus-within .ap-lauf-x{opacity:1}
.ap-lauf-x:hover{background:var(--t07);color:#e5484d}
/* Der Stand: ein Wort in der Farbe des Zustands – beim Laufen mit Punkten */
.ap-lauf-status{display:flex;align-items:baseline;gap:3px;margin-top:auto;padding-top:14px}
.ap-lauf-wort{font-size:17px;font-weight:600;letter-spacing:-.01em;color:var(--lf);transition:color .4s var(--ease)}
.ap-lauf-wort.rein{animation:apWort .45s cubic-bezier(.2,.8,.2,1) both}
@keyframes apWort{from{opacity:0;translate:0 5px}to{opacity:1;translate:0 0}}
.ap-lauf-punkte{display:inline-flex;gap:3px;margin-left:2px;translate:0 -2px}
.ap-lauf-punkte[hidden]{display:none}
.ap-lauf-punkte i{width:4px;height:4px;border-radius:50%;background:var(--lf);opacity:.25;animation:apPunkt 1.5s cubic-bezier(.4,0,.2,1) infinite}
.ap-lauf-punkte i:nth-child(2){animation-delay:.2s}
.ap-lauf-punkte i:nth-child(3){animation-delay:.4s}
@keyframes apPunkt{0%,80%,100%{opacity:.25;translate:0 0}40%{opacity:1;translate:0 -2px}}
/* Der Balken: ruhig wandernd, weich an den Enden */
.ap-lauf-balken{position:relative;height:3px;border-radius:3px;overflow:hidden;margin-top:8px;background:var(--lf-flaeche)}
.ap-lauf-balken[hidden]{display:none}
.ap-lauf-balken span{position:absolute;top:0;bottom:0;left:0;width:38%;border-radius:3px;
  background:linear-gradient(90deg,transparent,var(--lf) 35%,var(--lf) 65%,transparent);
  animation:apBalken 1.9s cubic-bezier(.45,.05,.55,.95) infinite}
@keyframes apBalken{0%{translate:-110% 0}100%{translate:290% 0}}
/* Die Tätigkeit als Symbol: eines zur Zeit, das alte geht weich, das neue kommt weich */
.ap-lauf-takt{position:relative;height:32px;margin-top:10px}
.ap-lauf-takt[hidden]{display:none}
.ap-takt-ic{position:absolute;left:0;top:0;width:32px;height:32px;border-radius:11px;display:grid;place-items:center;
  color:var(--lf);background:var(--lf-flaeche);animation:apTaktRein .55s cubic-bezier(.2,.8,.2,1) both}
.ap-takt-ic.raus{animation:apTaktRaus .48s cubic-bezier(.4,0,.6,1) both}
.ap-takt-ic .ic{width:16px;height:16px;stroke-width:1.8}
@keyframes apTaktRein{from{opacity:0;scale:.6;translate:0 6px}to{opacity:1;scale:1;translate:0 0}}
@keyframes apTaktRaus{to{opacity:0;scale:.7;translate:0 -6px}}
.ap-takt-ic.denkt .ic{animation:apAtmen 2.4s ease-in-out infinite}
.ap-takt-ic.schreibt .ic{animation:apSchreibt 1.6s ease-in-out infinite;transform-origin:20% 90%}
.ap-takt-ic.werkzeug .ic{animation:apWerk 2.8s ease-in-out infinite}
@keyframes apAtmen{0%,100%{scale:.86;opacity:.6}50%{scale:1.06;opacity:1}}
@keyframes apSchreibt{0%,100%{rotate:-7deg;translate:0 0}50%{rotate:7deg;translate:1px 1px}}
@keyframes apWerk{0%,100%{translate:0 1px;opacity:.75}50%{translate:0 -1px;opacity:1}}
/* Nach dem Lauf: der Grund des Modells, wenn es einen gibt */
.ap-lauf-zeile{margin:6px 0 0;font-size:12.5px;line-height:1.5;color:var(--t60);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;word-break:break-word;min-height:19px}
.ap-lauf-zeile[hidden]{display:none}
.ap-lauf-fuss{display:flex;align-items:center;gap:8px;margin-top:10px;font-size:11.5px;color:var(--t45);white-space:nowrap;min-height:18px}
.ap-lauf-neu{width:7px;height:7px;border-radius:50%;background:var(--akzent);flex:0 0 auto;margin-left:auto;
  box-shadow:0 0 0 4px rgba(var(--akzent-rgb),.14)}
.ap-lauf-neu[hidden]{display:none}
.ap-lauf-kennz{display:inline-flex;gap:4px;margin-left:auto}
.ap-lauf-kennz:empty{display:none}
.ap-lauf-kennz + .ap-lauf-neu{margin-left:0}
.ap-lauf-kennz span{display:inline-flex;align-items:center;height:18px;padding:0 7px;border-radius:6px;font-size:10.5px;
  font-weight:600;background:color-mix(in srgb,var(--k) 14%,transparent);color:var(--k)}
.ap-lauf-kennz .k-fehler{--k:#e5484d}.ap-lauf-kennz .k-frage{--k:#e9a23b}.ap-lauf-kennz .k-chat{--k:var(--akzent)}
@media (max-width:640px){.ap-laeufe{grid-template-columns:1fr}}
@media (prefers-reduced-motion:reduce){
  .ap-lauf,.ap-lauf.rein,.ap-lauf.raus,.ap-lauf-ic.rein,.ap-lauf-wort.rein,.ap-lauf-punkte i,.ap-lauf-balken span,
  .ap-takt-ic,.ap-takt-ic.raus,.ap-takt-ic .ic{animation:none;transition:none}
}
/* In der Übersicht einer Automatisierung gibt es kein Eingabefeld – Läufe
   startet der Knopf, geschrieben wird im Chat eines Laufs */
body.auto-uebersicht #composer{display:none}
body.auto-uebersicht .thread{padding-bottom:24px}
/* Der Hinweis rechts oben trägt dieselben Farben */
.auto-pop.frage{border-color:rgba(240,180,41,.5)}
.auto-pop.frage .pop-ic{color:#f0b429}
.auto-pop.chat .pop-ic{color:var(--akzent)}
@media (max-width:600px){
  .auto-panel{padding:4px 16px 0}
  .ap-card{padding:14px 15px 13px}
  .ap-kopf{flex-wrap:wrap}
  .ap-actions{width:100%;justify-content:flex-end}
}

/* Der Auftrag, den der Plan eingefügt hat, trägt eine Zeile darüber */
.msg.user.mit-cap{flex-direction:column;align-items:flex-end;gap:5px}
.auto-cap{display:inline-flex;align-items:center;gap:5px;padding-right:6px;
  font-size:10.5px;font-weight:600;letter-spacing:.07em;text-transform:uppercase;color:var(--t45)}
.auto-cap .ic{width:11px;height:11px;color:var(--akzent)}

/* ── Formular ──────────────────────────────────────────────── */
/* Die Karte darf fast die ganze Fensterhöhe nutzen und ist knapp gesetzt,
   damit sie auf üblichen Bildschirmen ohne eigenen Scrollbalken auskommt. */
.auto-card{width:min(720px,calc(100vw - 32px));max-height:calc(100dvh - 24px);
  display:flex;flex-direction:column;gap:12px;padding:20px 24px 18px}
.auto-card header{margin-bottom:0}
.auto-card .modal-hint{margin:-6px 0 0}
.auto-card .fld textarea{min-height:96px}
.af-zeile{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:12px;align-items:start}
/* Die Plan-Felder stehen mit „Art“ in einer Reihe: der Behälter ist nur fürs
   Skript da, im Raster zählen seine Kinder. Ebenso bilden Skills und
   MCP-Server einen gemeinsamen Chip-Fluss. */
.af-felder,.af-gruppe{display:contents}
.af-sec h3{display:flex;align-items:center;gap:10px;margin-bottom:8px;
  font-size:10.5px;font-weight:600;letter-spacing:.13em;text-transform:uppercase;color:var(--t45)}
.af-sec h3::after{content:"";flex:1;height:1px;background:var(--t07)}
.af-chips{display:flex;flex-wrap:wrap;gap:7px}
.af-chip{display:inline-flex;align-items:center;gap:7px;min-height:31px;padding:4px 11px 4px 9px;
  border-radius:10px;border:1px solid var(--t10);background:var(--t03);
  font-size:12.5px;color:var(--t75);cursor:pointer;user-select:none;max-width:100%;
  transition:border-color .25s var(--ease),background .25s var(--ease),color .25s var(--ease)}
.af-chip:hover{border-color:var(--t20);color:var(--fg)}
.af-chip input{appearance:none;flex:0 0 auto;width:14px;height:14px;border-radius:4px;position:relative;
  border:1px solid var(--t20);background:var(--t03);margin:0;cursor:pointer;
  transition:background .25s var(--ease),border-color .25s var(--ease)}
.af-chip input:checked{background:var(--akzent);border-color:var(--akzent)}
.af-chip input:checked::after{content:"";position:absolute;left:4px;top:1px;width:4px;height:8px;
  border:solid var(--auf-akzent);border-width:0 1.8px 1.8px 0;rotate:45deg}
.af-chip:has(input:checked){border-color:rgba(var(--akzent-rgb),.5);background:rgba(var(--akzent-rgb),.09);color:var(--fg)}
.af-chip em{font-style:normal;font-size:10.5px;color:var(--t45)}
.af-leer{font-size:12.5px;color:var(--t45);line-height:1.55}
.af-plan{display:flex;flex-direction:column;gap:12px;container-type:inline-size}
.af-plan-fuss{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.af-plan-fuss .ad-switch{margin:0;font-size:12.5px}
.af-plan-fuss .ad-switch[hidden]{display:none}
.af-naechster{font-size:12.5px;color:var(--t60);line-height:1.5}
.af-naechster.fehler{color:#ff8080}
.af-tage-fld{gap:5px}
.af-tage{display:flex;gap:5px}
/* Sieben Tage brauchen 296px. Passen sie nicht neben „Art“ und „Uhrzeit“,
   bekommt die Reihe eine eigene Zeile. */
@container (max-width:659px){.af-tage-fld{grid-column:1 / -1}}
.af-tag{width:38px;height:42px;border-radius:13px;border:1px solid var(--t10);font-size:12px;color:var(--t60);
  transition:background .25s var(--ease),color .25s var(--ease),border-color .25s var(--ease)}
.af-tag:hover{border-color:var(--t30);color:var(--fg)}
.af-tag.on{background:var(--akzent);border-color:var(--akzent);color:var(--auf-akzent)}
.af-cronhint{font-size:11.5px;color:var(--t45);line-height:1.45}
.af-hinweis{font-size:12px;color:var(--t45);line-height:1.55;border-top:1px solid var(--t07);padding-top:10px}
.af-fuss{display:flex;align-items:center;gap:8px}
.af-fuss .ad-mini{height:36px;padding:0 16px;border-radius:11px;font-size:13px}
.af-fuss .ad-mini[hidden]{display:none}
.af-fuss .danger:hover{color:#ff8080;border-color:color-mix(in srgb,#ff8080 45%,transparent);background:none}
@media (max-width:600px){.auto-card{padding:18px 16px 16px}.af-tage{flex-wrap:wrap}}

/* ── Hinweise rechts oben: ein Lauf ist fertig ────────────── */
.auto-pops{position:fixed;top:16px;right:16px;z-index:210;display:flex;flex-direction:column;gap:10px;
  width:min(360px,calc(100vw - 24px));pointer-events:none}
.auto-pop{pointer-events:auto;position:relative;display:flex;gap:12px;align-items:flex-start;
  padding:14px 38px 14px 16px;border-radius:18px;
  background:var(--raised);border:1px solid var(--t14);
  box-shadow:var(--shadow),var(--panel-shadow);
  animation:popIn .5s var(--swift) both}
@keyframes popIn{from{opacity:0;translate:26px 0;scale:.97}to{opacity:1;translate:0;scale:1}}
.auto-pop.weg{animation:popOut .3s var(--ease) both}
@keyframes popOut{to{opacity:0;translate:26px 0}}
.pop-ic{flex:0 0 auto;width:34px;height:34px;border-radius:11px;display:grid;place-items:center;
  background:rgba(var(--akzent-rgb),.12);color:var(--akzent)}
.pop-ic .ic{width:17px;height:17px}
.auto-pop.fehler .pop-ic{background:rgba(255,128,128,.14);color:#ff8080}
.pop-main{flex:1;min-width:0}
.pop-main strong{display:block;font-size:13.5px;font-weight:650;letter-spacing:-.01em;margin-bottom:2px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pop-text{display:block;font-size:12px;color:var(--t60);line-height:1.5}
.pop-row{display:flex;gap:8px;margin-top:9px}
.pop-go{height:30px;padding:0 13px;border-radius:9px;background:var(--fg);color:var(--bg);
  font-size:12px;font-weight:600;transition:translate .3s var(--swift),box-shadow .3s var(--ease)}
.pop-go:hover{translate:0 -1px;box-shadow:0 8px 18px -8px var(--t60)}
.pop-later{height:30px;padding:0 10px;border-radius:9px;font-size:12px;color:var(--t60);
  transition:background .3s var(--ease),color .3s var(--ease)}
.pop-later:hover{background:var(--t05);color:var(--fg)}
.pop-x{position:absolute;top:8px;right:8px;width:24px;height:24px;border-radius:7px;
  display:grid;place-items:center;color:var(--t30);
  transition:background .25s var(--ease),color .25s var(--ease)}
.pop-x .ic{width:12px;height:12px}
.pop-x:hover{background:var(--t05);color:var(--fg)}
@media (max-width:600px){.auto-pops{top:10px;right:10px;left:10px;width:auto}}

html.light .ap-meta .fehler,html.light .af-naechster.fehler{color:#c0392b}
html.light .auto-pop.fehler .pop-ic{background:rgba(192,57,43,.1);color:#c0392b}
html.light .af-fuss .danger:hover{color:#c0392b;border-color:rgba(192,57,43,.4)}
html.light .ap-card{background:var(--raised)}
@media (prefers-reduced-motion:reduce){
  .auto-item .live-dot,.auto-item .neu-dot{animation:none}
  .auto-pop{animation:none}
}

/* ══ Anmeldung: Bewegtbild links ══════════════════════════════
   Ein Video aus dem Pfälzerwald füllt die Bildhälfte – in beiden
   Farbschemata, mit dunklem Schleier unten für die Schrift. Das
   gezeichnete Bild darunter trägt nur, wenn das Video nicht lädt
   (.ohne-video) – im hellen Modus dann weiß statt tief.
   Der Clip trägt in der Datei schwarze Balken: 816 Bildzeilen
   Kinoformat in 1080 Zeilen, je 132 oben und unten. Statt ihn dafür
   neu zu kodieren (Qualität), ist der Kasten 133 % hoch und um die
   halbe Differenz nach oben gerückt – die Balken liegen damit
   außerhalb der Bildhälfte, die sie abschneidet (overflow hidden).
   Das Standbild ist ein volles Bild derselben Datei, deshalb sitzt
   es deckungsgleich unter dem ersten Videobild.                     */
.art-video{position:absolute;left:0;right:0;top:-16.5%;height:133%;object-fit:cover;display:block;
  z-index:1;animation:videoAuf .9s var(--ease) both;background:#050505}
@keyframes videoAuf{from{opacity:0}to{opacity:1}}
.auth-art.ohne-video .art-video{display:none}
/* Solange das Video läuft, wird das gezeichnete Bild darunter gar nicht
   erst gemalt – seine Weichzeichner und Lichtfelder kosteten sonst in
   jedem Bild Rechenzeit, obwohl nichts davon zu sehen ist. */
.auth-art:not(.ohne-video) .art-canvas{display:none}
/* Über dem Video derselbe Schleier wie im dunklen Bild – auch im Hellen */
html.light .auth-art:not(.ohne-video){background:#050505}
html.light .auth-art:not(.ohne-video) .art-claim{color:rgba(255,255,255,.94)}
html.light .auth-art:not(.ohne-video) .art-note{color:rgba(255,255,255,.45)}
.art-ort{margin-top:22px;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;
  color:rgba(255,255,255,.28)}
.auth-art.ohne-video .art-ort{display:none}
/* Reihenfolge der Schichten: Bild, Video, Schleier, Schrift */
.auth-art::after{z-index:1}
.art-inhalt{z-index:2}
@media (prefers-reduced-motion:reduce){.art-video{animation:none}}

/* Ohne Video im hellen Modus: die Bildhälfte wird weiß – die Marke steht
   schwarz auf Weiß, die Lichtfelder bleiben als zarte Tönung,
   die Schrift wird dunkel. */
html.light .auth-art.ohne-video{background:#fff}
html.light .ohne-video .art-canvas > rect:first-child{fill:#fff}
html.light .auth-art.ohne-video::after{background:linear-gradient(180deg,rgba(255,255,255,.55) 0%,rgba(255,255,255,0) 30%,
  rgba(255,255,255,.25) 58%,rgba(255,255,255,.88) 100%)}
html.light .ohne-video .af1{opacity:.5}
html.light .ohne-video .af2{opacity:.55}
html.light .ohne-video .am-schein{opacity:.3}
html.light .ohne-video .am-form{opacity:.96;color:#000}
html.light .ohne-video .art-linien{opacity:.75}
html.light .ohne-video .art-glanz{display:none}
html.light .ohne-video .art-korn{opacity:.035}
html.light .ohne-video .art-claim{color:var(--fg)}
html.light .ohne-video .art-note{color:var(--t45)}

/* Die Bildmarke vor dem Video: mittig, ohne Wortmarke, weiß, ohne
   Schatten und ohne Abdunklung – nur die Palme. Sie entfaltet sich wie im
   Leerzustand des Chats und trägt dieselbe Ruhe-Animation: alle paar
   Sekunden läuft ein Licht hindurch. Ohne Video (gezeichnetes Bild mit der
   großen Marke) bleibt sie weg. */
.art-logo{position:absolute;inset:0;z-index:2;display:grid;place-items:center;pointer-events:none;
  animation:artText 1s var(--swift) .3s both}
.art-logo-svg{position:relative;width:min(260px,34%);height:auto;aspect-ratio:291.74/268;
  overflow:visible;color:#fff}
.art-logo-svg .mb{animation:blattIn .9s var(--swift) both,heroSheen 4.6s ease-in-out infinite}
.art-logo-svg .mb0{animation-name:stammIn,heroSheen;animation-delay:.35s,1.92s}
.art-logo-svg .mb1{animation-delay:.45s,2s}
.art-logo-svg .mb2{animation-delay:.51s,2.08s}
.art-logo-svg .mb3{animation-delay:.57s,2.16s}
.art-logo-svg .mb4{animation-delay:.63s,2.24s}
.art-logo-svg .mb5{animation-delay:.69s,2.32s}
.art-logo-svg .mb6{animation-delay:.75s,2.4s}
.auth-art.ohne-video .art-logo{display:none}
/* Gestapelt (schmal) ist das Bild nur ein Band über der Maske, unten links
   steht der Claim – die Marke weicht dann klein nach oben rechts aus,
   statt mitten auf dem Text zu stehen. */
@media (max-width:900px){.art-logo{place-items:start end;padding:22px 26px}.art-logo-svg{width:44px}}
@media (prefers-reduced-motion:reduce){.art-logo{animation:none}.art-logo-svg .mb{animation:none}}

/* ══ Ablage einer Automatisierung: Ordner rechts ═══════════
   input/ und output/ als Baum, zwischen Chat und Vorschau. Öffnet
   sich mit der Automatisierung, lässt sich zuklappen und weicht der
   Vorschau, solange die offen ist.                                */
#ablage{flex:0 0 auto;width:0;overflow:hidden;position:relative;z-index:35;
  transition:width .5s var(--swift)}
body.ablage-offen #ablage{width:clamp(280px,24vw,360px)}
body.ablage-offen.preview-open #ablage{width:0}
.ab-inner{width:clamp(280px,24vw,360px);height:100%;display:flex;flex-direction:column;
  border-left:1px solid var(--t07);background:var(--t03);transition:background .3s var(--ease)}
#ablage.ab-drop .ab-inner{background:rgba(var(--akzent-rgb),.06)}
.ab-head{display:flex;align-items:center;gap:6px;height:64px;padding:0 8px 0 18px;
  border-bottom:1px solid var(--t07);flex:0 0 auto}
.ab-head .ab-titel{margin-right:3px}
.ab-head .sq-btn{width:30px;height:30px}
.ab-head .sq-btn .ic{width:15px;height:15px}
@media (max-width:1200px){.ab-head .ab-zahl{display:none}}
.ab-titel{font-size:13px;font-weight:600;color:var(--t90)}
.ab-zahl{font-size:11px;color:var(--t45);font-variant-numeric:tabular-nums}
#ablage.ab-lade .ab-titel::after{content:"";display:inline-block;width:11px;height:11px;margin-left:8px;
  border:2px solid var(--t14);border-top-color:var(--akzent);border-radius:50%;vertical-align:-1px;
  animation:abDreh .9s linear infinite}
@keyframes abDreh{to{transform:rotate(360deg)}}
.ab-body{flex:1;min-height:0;overflow:auto;padding:10px 8px 14px}
.ab-body::-webkit-scrollbar{width:8px}
.ab-body::-webkit-scrollbar-thumb{background:var(--t10);border-radius:4px}
.ab-sec{margin-bottom:10px}
.ab-row{display:flex;align-items:center;gap:6px;min-height:32px;
  padding:3px 4px 3px calc(6px + var(--tiefe,0) * 14px);border-radius:9px;
  font-size:12.5px;color:var(--t75);cursor:pointer;user-select:none;
  transition:background .2s var(--ease),color .2s var(--ease)}
.ab-row:hover{background:var(--t05);color:var(--fg)}
.ab-root{font-weight:600;color:var(--t90)}
.ab-chev{width:12px;height:12px;flex:0 0 auto;color:var(--t45);
  transition:transform .25s var(--swift)}
.ab-row.zu .ab-chev{transform:rotate(-90deg)}
.ab-ic{width:14px;height:14px;flex:0 0 auto;color:var(--t45)}
.ab-root .ab-ic{color:var(--akzent)}
.ab-name{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ab-desc{font-style:normal;font-size:10.5px;color:var(--t45);white-space:nowrap;overflow:hidden;
  text-overflow:ellipsis;max-width:46%;font-weight:400}
.ab-size{flex:0 0 auto;font-size:10.5px;color:var(--t45);font-variant-numeric:tabular-nums}
.ab-acts{display:flex;gap:1px;flex:0 0 auto;opacity:0;transition:opacity .2s var(--ease)}
.ab-row:hover .ab-acts,.ab-row:focus-within .ab-acts{opacity:1}
@media (hover:none){.ab-acts{opacity:1}}
.ab-btn{width:24px;height:24px;border-radius:7px;display:grid;place-items:center;color:var(--t45);
  transition:background .2s var(--ease),color .2s var(--ease)}
.ab-btn .ic{width:12px;height:12px}
.ab-btn:hover{background:var(--fg);color:var(--bg)}
.ab-btn.danger:hover{background:#c0392b;color:#fff}
.ab-kinder[hidden]{display:none}
.ab-leer{padding:3px 8px 6px 32px;font-size:11.5px;color:var(--t45);line-height:1.5}
.ab-leer-ganz{display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center;
  padding:38px 18px;border:1px dashed var(--t14);border-radius:14px;margin:6px 4px}
.ab-leer-ganz .ic{width:20px;height:20px;color:var(--t30)}
#ablage.ab-drop .ab-leer-ganz{border-color:rgba(var(--akzent-rgb),.6);color:var(--t75)}
.ab-row.frisch{animation:abFrisch 1.4s var(--ease) 2}
@keyframes abFrisch{0%,100%{background:transparent}50%{background:rgba(var(--akzent-rgb),.16)}}
.ab-row.weg{opacity:.4;pointer-events:none}
.ab-row.ab-ziel{background:rgba(var(--akzent-rgb),.12);box-shadow:inset 0 0 0 1px rgba(var(--akzent-rgb),.55)}
.ab-row[draggable="true"]{cursor:grab}
.ab-row.zieht{opacity:.4}
.ab-row.markiert{background:var(--t07);color:var(--fg)}
/* Vom Modell freigegeben: dieselbe Zeile, nur das Symbol in der Akzentfarbe */
.ab-row.ab-neu{cursor:default;background:rgba(var(--akzent-rgb),.07)}
.ab-body:focus-visible{outline:none}
.ab-menu button em{margin-left:auto;font-style:normal;font-size:10.5px;color:var(--t30);padding-left:14px}
.ab-menu hr[hidden]{display:none}
.ab-body.ab-ziel-wurzel{box-shadow:inset 0 0 0 1px rgba(var(--akzent-rgb),.45);border-radius:12px}
.ab-name-input{flex:1;min-width:0;height:24px;padding:0 6px;border-radius:6px;font:inherit;font-size:12.5px;
  color:var(--fg);background:var(--panel-focus);border:1px solid rgba(var(--akzent-rgb),.6);outline:0}
/* Rechtsklick-Menü in der Ablage */
.ab-menu{position:fixed;z-index:230;min-width:210px;padding:6px;border-radius:14px;
  background:var(--raised);border:1px solid var(--t14);box-shadow:var(--panel-shadow);
  animation:menuIn .18s var(--swift) both}
.ab-menu[hidden],.ab-menu button[hidden]{display:none}
.ab-menu button{display:flex;align-items:center;gap:10px;width:100%;padding:8px 11px;border-radius:9px;
  font-size:13px;color:var(--t90);text-align:left;transition:background .2s var(--ease)}
.ab-menu button:hover{background:var(--t05)}
.ab-menu button .ic{width:14px;height:14px;color:var(--t60)}
.ab-menu button.gefahr:hover{background:rgba(192,57,43,.14);color:#e0574f}
.ab-menu hr{border:0;border-top:1px solid var(--t07);margin:5px 8px}
/* ── Mehrfachauswahl in der Ablage ──────────────────────────
   Wie im Dateimanager, ohne Kästchen: Gewählte Zeilen sind blau
   hinterlegt (Klick, Strg/Cmd+Klick, Umschalt+Klick, Strg+A,
   Pfeiltasten); die Zeile mit dem Fokus trägt bei Tastaturbedienung
   einen feinen Rahmen. Ab zwei gewählten Einträgen steht über dem Baum
   die Leiste mit den Aktionen für die ganze Auswahl.                 */
.ab-row.gewaehlt,.ab-row.gewaehlt.markiert{background:rgba(var(--akzent-rgb),.13);color:var(--fg)}
.ab-row.gewaehlt:hover{background:rgba(var(--akzent-rgb),.19)}
.ab-row.gewaehlt .ab-ic{color:var(--akzent)}
.ab-body:focus-visible .ab-row.markiert{box-shadow:inset 0 0 0 1px rgba(var(--akzent-rgb),.6)}
.ab-auswahl{display:flex;align-items:center;gap:6px;padding:6px 8px 6px 17px;flex:0 0 auto;
  border-bottom:1px solid var(--t07);background:rgba(var(--akzent-rgb),.07);font-size:12px;color:var(--t90);
  animation:menuIn .18s var(--swift) both}
.ab-auswahl[hidden]{display:none}
.ab-auswahl>.ic{width:13px;height:13px;color:var(--akzent);flex:0 0 auto}
.ab-auswahl-zahl{font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-variant-numeric:tabular-nums}
.ab-auswahl .sq-btn{width:28px;height:28px;border-radius:8px}
.ab-auswahl .sq-btn .ic{width:14px;height:14px}
.ab-auswahl .sq-btn.danger:hover{background:#c0392b;color:#fff}
.ab-auswahl-zu{height:28px;padding:0 9px;border-radius:8px;font-size:11.5px;color:var(--t60);white-space:nowrap;
  transition:background .2s var(--ease),color .2s var(--ease)}
.ab-auswahl-zu:hover{background:var(--t07);color:var(--fg)}
.ab-menu button span{flex:1;min-width:0;white-space:nowrap}
/* Der Knopf im Kopf der Automatisierung */
.ap-files{display:flex;align-items:center;gap:6px;height:36px;padding:0 12px;border-radius:11px;
  border:1px solid var(--t14);color:var(--t75);font-size:12.5px;font-weight:550;white-space:nowrap;
  transition:background .3s var(--ease),color .3s var(--ease),border-color .3s var(--ease)}
.ap-files .ic{width:14px;height:14px}
.ap-files em{font-style:normal;font-size:11px;color:var(--t45);padding-left:6px;border-left:1px solid var(--t10)}
.ap-files em:empty{display:none}
.ap-files:hover,body.ablage-offen .ap-files{background:var(--t05);color:var(--fg);border-color:var(--t20)}
body.ablage-offen .ap-files .ic{color:var(--akzent)}
/* Der Ablageplatz des Chats deckt nicht die Ablage: Ereignisse gehen
   durch ihn hindurch an das, was darunter liegt. */
#dropzone{pointer-events:none}
@media (max-width:900px){
  #ablage{position:fixed;inset:0;width:100%;z-index:94;transform:translateX(105%);
    transition:transform .45s var(--swift)}
  body.ablage-offen #ablage{width:100%;transform:none}
  body.ablage-offen.preview-open #ablage{width:100%}
  .ab-inner{width:100%;background:var(--bg)}
}
html.light .ab-btn.danger:hover{background:#c0392b}

/* ── Einwürfe: schreiben, während die KI arbeitet ─────────────────
   Die wartende Nachricht steht halbdurchsichtig unter der Arbeit, mit
   Hinweis und Zurückziehen; fließt sie ein, wird sie eine feste kleine
   Nutzerblase an ihrer Stelle im Verlauf. */
.einwurf{display:flex;flex-direction:column;align-items:flex-end;gap:5px;
  margin:14px 0 6px;animation:msgIn .45s var(--swift) both}
.einwurf .bubble{font-size:14.5px;padding:8px 14px;border-radius:18px;
  border-bottom-right-radius:6px;transition:opacity .4s var(--ease),border-color .4s var(--ease)}
.einwurf.wartend .bubble{opacity:.6;border-style:dashed;border-color:var(--t14)}
.einwurf-meta{display:flex;align-items:center;gap:6px;font-size:11.5px;color:var(--t45);
  padding-right:4px}
.einwurf-x{width:22px;height:22px;border-radius:50%;display:grid;place-items:center;
  color:var(--t45);border:1px solid transparent;
  transition:background .3s var(--ease),color .3s var(--ease),border-color .3s var(--ease)}
.einwurf-x .ic{width:12px;height:12px}
.einwurf-x:hover{background:var(--t07);color:var(--fg);border-color:var(--t14)}
.einwurf-x:disabled{opacity:.4}

/* Mit Text im Feld wird der Stopp-Knopf zum Einwurf-Knopf */
body.generating .composer.einreihen .send-btn .ic-send{opacity:1;transform:none}
body.generating .composer.einreihen .send-btn .ic-stop{opacity:0;transform:scale(.4) rotate(-90deg)}
body.generating .composer.einreihen .send-btn{animation:none}

/* ══ Admin: Karten mit Kopf, Kacheln, Segment-Schalter, Aufklapper ══
   Jede Karte beginnt mit einem Kopf: Symbolkachel, Titel, rechts der
   Zustand als Pille und – wo es einen gibt – der Schalter. Erklärende
   Absätze gibt es nicht mehr; was gesagt werden muss, steht am Feld. */
.ad-shell{max-width:none;margin:0;padding:14px 28px 100px 18px;gap:28px}
.ad-nav{flex:0 0 212px}
.ad-content{max-width:none}
/* Karten stehen nebeneinander, sobald zwei nebeneinander Platz haben;
   breite Karten (Listen, Tabellen) nehmen die ganze Zeile. */
.ad-panel.on{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,520px),1fr));gap:18px;align-items:start}
.ad-panel.on:has(> .ad-card:only-child){grid-template-columns:minmax(0,1180px)}
.ad-card.breit{grid-column:1 / -1}
.ad-panel-voll.on{display:flex}
/* Dunkelmodus: Karten als eigene Fläche, Zeilen und Felder deutlich davon
   abgesetzt – die feinen Alphastufen der Chat-Seite waren hier zu leise. */
html:not(.light) body.admin-page{
  --panel:#161616;--panel-focus:#1e1e1e;
  --t03:rgba(255,255,255,.05);--t05:rgba(255,255,255,.075);--t07:rgba(255,255,255,.11);
  --t10:rgba(255,255,255,.155);--t14:rgba(255,255,255,.21);--t20:rgba(255,255,255,.28);
  --t30:rgba(255,255,255,.4);--t45:rgba(255,255,255,.58);--t60:rgba(255,255,255,.74);
  --edge:linear-gradient(180deg,rgba(255,255,255,.26),rgba(255,255,255,.13) 45%,rgba(255,255,255,.11));
  --comp-shadow:0 1px 1px rgba(0,0,0,.6),0 18px 44px -22px rgba(0,0,0,.95);
}
.admin-page .ad-card{padding:20px 24px 24px}
.ad-kopf{display:flex;align-items:center;gap:12px;flex-wrap:wrap;min-height:38px;margin-bottom:14px}
.ad-kopf h2{margin:0 auto 0 0;font-size:16px;font-weight:650;letter-spacing:-.012em;
  display:flex;align-items:baseline;gap:9px;min-width:0}
.ad-kopf h2 em{font-style:normal;font-size:12px;font-weight:500;color:var(--t45);letter-spacing:0}
.ad-kopf .ad-switch{margin:0;gap:0}
.ad-ic{flex:0 0 auto;width:36px;height:36px;border-radius:12px;display:grid;place-items:center;
  background:rgba(var(--akzent-rgb),.12);color:var(--akzent)}
.ad-ic .ic{width:17px;height:17px}
.ad-ic.leise{background:var(--t07);color:var(--t60)}
.ad-icon-btn{width:32px;height:32px;border-radius:10px;border:1px solid var(--t10);
  display:grid;place-items:center;color:var(--t60);flex:0 0 auto;
  transition:background .3s var(--ease),color .3s var(--ease),border-color .3s var(--ease)}
.ad-icon-btn .ic{width:14px;height:14px}
.ad-icon-btn:hover{background:var(--fg);color:var(--bg);border-color:var(--fg)}
.ad-icon-btn.dreht .ic{animation:pvRing .9s linear infinite}

/* Zustandspille: Punkt + Wort. neutral = reine Zählung ohne Punkt */
.ad-status{display:inline-flex;align-items:center;gap:7px;height:26px;padding:0 10px;border-radius:9px;
  font-size:11.5px;font-weight:600;letter-spacing:.02em;color:var(--t60);white-space:nowrap;
  border:1px solid var(--t10);background:var(--t03);font-variant-numeric:tabular-nums}
.ad-status::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--t20);flex:none}
.ad-status.ok{color:var(--akzent);border-color:rgba(var(--akzent-rgb),.35);background:rgba(var(--akzent-rgb),.08)}
.ad-status.ok::before{background:var(--akzent);box-shadow:0 0 0 3px rgba(var(--akzent-rgb),.16)}
.ad-status.warn{color:#e0a24a;border-color:rgba(224,162,74,.4)}
.ad-status.warn::before{background:#e0a24a}
.ad-status.neutral::before{display:none}
.ad-status:empty{display:none}
html.light .ad-status.warn{color:#8a5200;border-color:rgba(138,82,0,.3)}

/* Zeile „Bezeichnung + Bedienelement“ */
.ad-zeile{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin:12px 0 4px}
.ad-zeile-label{font-size:11px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;
  color:var(--t45);min-width:84px}
.admin-page .ad-grid{margin:10px 0 2px}
.admin-page .ad-toggles{margin:12px 0 2px}
.admin-page .ad-card h3.ad-sub{margin:20px 0 4px}
/* Schalter rechts in einer Zwischenüberschrift – hinter der Linie */
.ad-card h3.ad-sub::after{order:1}
.ad-sub .ad-sub-schalter{order:2;margin:0;font-size:12px;letter-spacing:0;text-transform:none;
  font-weight:500;color:var(--t60);gap:9px}
.ad-sub .ad-sub-schalter:has(input:checked){color:var(--t90)}

/* Segment-Schalter: Knöpfe in einer Reihe, Schieber gleitet darunter */
.admin-page .ad-seg{margin:0;flex-wrap:wrap;background:var(--t03)}
.admin-page .ad-seg button{display:inline-flex;align-items:center;gap:7px;height:30px;padding:0 13px;
  font-size:12.5px;white-space:nowrap;z-index:1}
.ad-seg button .ic{width:13px;height:13px}
.ad-seg.klein{padding:3px;border-radius:10px}
.admin-page .ad-seg.klein button{height:26px;padding:0 10px;font-size:12px}
.ad-seg.klein .ad-seg-schieber{border-radius:7px}

/* Verlaufsbalken: Kontextfenster mit Marke fürs Verdichten, Auslastung */
.ad-meter{display:flex;flex-direction:column;gap:7px;margin:6px 0 12px}
.ad-meter-spur,.ad-meter-fuell{display:block}
.ad-meter-spur{position:relative;height:8px;border-radius:5px;background:var(--t07)}
.ad-meter-fuell{height:100%;border-radius:5px;background:linear-gradient(90deg,var(--akzent-tief),var(--akzent));
  transition:width .4s var(--swift)}
.ad-meter-marke{position:absolute;top:-4px;width:2px;height:16px;border-radius:1px;background:var(--fg);
  translate:-50% 0;transition:left .4s var(--swift)}
.ad-meter-text{display:flex;justify-content:space-between;gap:10px;font-size:11px;color:var(--t45);
  font-variant-numeric:tabular-nums}
.ad-meter-text .ad-meter-wert{color:var(--t75);font-weight:550}
.ad-meter.aus .ad-meter-fuell{background:var(--t14)}
.ad-meter.aus .ad-meter-marke{opacity:.3}
.ad-meter.mini{margin:7px 0 0;gap:0}
.ad-meter.mini .ad-meter-spur{height:5px}

/* Kacheln: eine Zahl oder ein Zustand je Kachel */
.ad-kacheln{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px;margin:0 0 12px}
.ad-kachel{display:flex;flex-direction:column;gap:4px;padding:13px 14px 12px;min-width:0;
  border-radius:14px;border:1px solid var(--t07);background:var(--t03)}
.ad-kachel .k-label{font-size:10.5px;font-weight:600;letter-spacing:.09em;text-transform:uppercase;color:var(--t45)}
.ad-kachel .k-wert{display:flex;align-items:center;gap:8px;font-size:17px;font-weight:650;
  letter-spacing:-.02em;color:var(--fg);line-height:1.25;font-variant-numeric:tabular-nums;min-width:0}
.ad-kachel .k-wert small{font-size:12px;font-weight:500;color:var(--t45);letter-spacing:0}
.ad-kachel .k-wert .sk-lampe{margin:0;width:8px;height:8px;flex:none}
.ad-kachel .k-sub{font-size:11.5px;color:var(--t60);line-height:1.45;overflow:hidden;text-overflow:ellipsis}
.ad-kachel .k-sub code{font-family:var(--mono);font-size:11px;color:var(--t60)}
.ad-kachel .k-warn{display:block;color:#e0a24a;font-size:11px;margin-top:3px}
.ad-kachel.schlecht{border-color:color-mix(in srgb,#ff6b6b 35%,transparent);
  background:color-mix(in srgb,#ff6b6b 6%,transparent)}
.ad-kachel.schlecht .k-wert{color:#ff8080}
html.light .ad-kachel.schlecht .k-wert{color:#c43b3b}
.ad-kacheln .ad-warn.wide{grid-column:1 / -1;margin:0}

/* Chips: laufende Sandkästen */
.ad-chips{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 4px}
.ad-chip{display:inline-flex;align-items:center;gap:8px;height:30px;padding:0 11px;border-radius:10px;
  border:1px solid var(--t10);background:var(--t05);font-size:12px;color:var(--t60)}
.ad-chip strong{color:var(--t90);font-weight:600}
.ad-chip .sk-lampe{margin:0}
.sk-lampe.warte{background:#e0a24a;box-shadow:0 0 0 3px color-mix(in srgb,#e0a24a 22%,transparent)}
.sk-lampe.aus{background:var(--t20)}
.sk-zeile.leise{color:var(--t45)}

/* Aufklapper (Erweitert, Konto anlegen) */
.ad-details{margin:14px 0 0;border:1px solid var(--t07);border-radius:14px;background:var(--t03)}
.ad-details summary{list-style:none;display:flex;align-items:center;gap:10px;padding:12px 14px;
  cursor:pointer;font-size:13px;font-weight:600;color:var(--t75);user-select:none;border-radius:14px}
.ad-details summary::-webkit-details-marker{display:none}
.ad-details summary:hover{color:var(--fg)}
.ad-details summary .ic{width:13px;height:13px;color:var(--t45);transition:rotate .3s var(--ease)}
.ad-details[open] summary .ic{rotate:90deg}
.ad-details-sub{margin-left:auto;font-size:11.5px;font-weight:500;color:var(--t45);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:60%}
.ad-details > :not(summary){margin-left:14px;margin-right:14px}
.ad-details > :last-child{margin-bottom:14px}
.ad-details .ad-grid{margin-top:2px}
.ad-details .ad-aktionen{margin-top:14px}

/* Aktionszeile unter einer Karte, Inline-Formulare */
.ad-aktionen{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:18px}
.ad-aktionen .ad-save{margin-top:0}
.ad-mini.hoch{height:42px;padding:0 18px;border-radius:13px;font-size:13px;font-weight:600}
.ad-mini.hoch .ic{width:13px;height:13px}
.ad-inline{display:flex;align-items:flex-end;gap:10px;flex-wrap:wrap;margin:14px 0 4px}
.ad-inline .fld{flex:1 1 220px;min-width:0}
.ad-inline .fld.schmal{flex:0 1 220px}
.ad-inline .ad-mini.hoch{flex:none}

/* Kopierbarer Wert (Rücksprungadresse, Redirect-URI) */
.ad-kopie{display:inline-flex;align-items:center;gap:10px;height:42px;padding:0 12px 0 14px;
  border-radius:13px;border:1px dashed var(--t14);background:var(--t03);color:var(--t75);
  font:inherit;cursor:pointer;max-width:100%;text-align:left;
  transition:border-color .3s var(--ease),background .3s var(--ease)}
.ad-kopie code{font-family:var(--mono);font-size:12px;color:var(--t90);flex:1;min-width:0;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ad-kopie .ic{width:14px;height:14px;color:var(--t45);flex:none;transition:color .3s var(--ease)}
.ad-kopie:hover{border-color:var(--t30);background:var(--t05)}
.ad-kopie.kopiert{border-color:rgba(var(--akzent-rgb),.6)}
.ad-kopie.kopiert .ic{color:var(--akzent)}

/* Pillen, Leerzustand, Hinweiszeile */
.ad-pillen{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.ad-pille{display:inline-flex;align-items:center;height:24px;padding:0 9px;border-radius:8px;
  font-size:11.5px;font-weight:550;color:var(--t75);background:var(--t07);white-space:nowrap;
  max-width:100%;overflow:hidden;text-overflow:ellipsis}
.ad-pille.ok{color:var(--akzent);background:rgba(var(--akzent-rgb),.1)}
.ad-pille.leise{color:var(--t45);background:var(--t05)}
.ad-pille.schlecht{color:#ff8080;background:color-mix(in srgb,#ff6b6b 12%,transparent)}
html.light .ad-pille.schlecht{color:#c43b3b}
.ad-leer{display:flex;flex-direction:column;align-items:center;gap:6px;text-align:center;
  padding:30px 20px;color:var(--t45);border:1.5px dashed var(--t10);border-radius:16px}
.ad-leer .ic{width:22px;height:22px;color:var(--t30);margin-bottom:4px}
.ad-leer strong{font-size:13.5px;color:var(--t75);font-weight:600}
.ad-leer span{font-size:12.5px;max-width:46ch;line-height:1.55}
.ad-hinweis{font-size:12.5px;color:var(--t45);line-height:1.5;margin:6px 0}
.ad-warn code{font-family:var(--mono);font-size:11px;background:var(--t05);
  border:1px solid var(--t07);border-radius:6px;padding:1.5px 6px}
html.light .ad-warn{color:#8a5200}

/* Prüfschritte (LDAP-Test, keytab) */
.ad-steps{display:flex;flex-direction:column;margin-top:14px;border:1px solid var(--t07);border-radius:14px;overflow:hidden}
.ad-steps:empty{display:none}
.ad-schritt{display:flex;align-items:baseline;gap:10px;padding:9px 14px;font-size:12.5px;
  color:var(--t60);background:var(--t03)}
.ad-schritt + .ad-schritt{border-top:1px solid var(--t05)}
.ad-schritt strong{color:var(--fg);font-weight:600;min-width:110px}
.ad-schritt .sk-lampe{flex:none;margin:0;align-self:center}
.ad-schritt span{flex:1;min-width:0;overflow-wrap:anywhere}
.ad-certinfo:empty{display:none}
.admin-page .ad-certinfo{margin:8px 0 4px}
.admin-page .ad-upload{margin:8px 0 4px}

/* MCP-Server: eine Zeile je Server, Details klappen darunter auf */
.ad-srv{border:1px solid var(--t07);border-radius:15px;background:var(--t03);
  transition:border-color .3s var(--ease),background .3s var(--ease)}
.ad-srv:hover,.ad-srv.offen{border-color:var(--t14)}
.ad-srv:hover{background:var(--panel)}
.ad-srv-zeile{display:flex;align-items:center;gap:12px;padding:11px 12px 11px 14px;flex-wrap:wrap}
.ad-srv-zeile .ad-switch{margin:0}
.ad-srv-main{flex:1 1 220px;min-width:0;display:flex;flex-direction:column;gap:2px;
  text-align:left;padding:2px 0;color:inherit;font:inherit;cursor:pointer}
.ad-srv-main strong{font-size:13.5px;font-weight:650;color:var(--t90);font-family:var(--mono);letter-spacing:-.01em}
.ad-srv-main code{font-family:var(--mono);font-size:11px;color:var(--t45);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ad-srv:not(.an) .ad-srv-main strong{color:var(--t60)}
.ad-srv:not(.an) .ad-ic{filter:grayscale(1);opacity:.6}
.ad-srv-badges,.ad-srv-akt{display:flex;gap:6px;flex-wrap:wrap;align-items:center}
.ad-chev{width:30px;height:30px;border-radius:9px;display:grid;place-items:center;color:var(--t45);flex:none;
  transition:background .3s var(--ease),color .3s var(--ease)}
.ad-chev .ic{width:14px;height:14px;transition:rotate .3s var(--ease)}
.ad-chev:hover{background:var(--t07);color:var(--fg)}
.ad-srv.offen .ad-chev .ic{rotate:90deg}
.ad-srv-mehr{display:grid;grid-template-rows:0fr;transition:grid-template-rows .4s var(--swift)}
.ad-srv.offen .ad-srv-mehr{grid-template-rows:1fr}
.ad-srv-inhalt{overflow:hidden;min-height:0}
.ad-srv-inhalt::before{content:"";display:block;height:1px;margin:0 14px 12px;background:var(--t07)}
.ad-srv-inhalt > *{margin:0 16px 0 62px}
.ad-srv-inhalt > :last-child{margin-bottom:14px}
.ad-srv-desc{font-size:13px;line-height:1.55;color:var(--t75);max-width:80ch}
.ad-srv-desc.leer{color:var(--t45);font-style:italic}
.ad-dl{display:grid;grid-template-columns:auto 1fr;gap:6px 16px;font-size:12px;margin-top:10px}
.ad-dl dt{color:var(--t45);font-weight:600;letter-spacing:.05em;font-size:10.5px;text-transform:uppercase;padding-top:2px}
.ad-dl dd{color:var(--t75);min-width:0;overflow-wrap:anywhere}
.ad-dl code{font-family:var(--mono);font-size:11.5px}
.ad-srv-inhalt .ad-pillen{margin-top:10px}
@media (max-width:820px){
  .ad-shell{padding:10px 16px 80px}
  .ad-nav{flex:none;align-self:stretch;width:100%;max-width:100%}
  .ad-srv-main{flex:1 1 120px}
  .ad-chev{order:1}
  .ad-srv-badges{order:2;flex:1 1 100%}
  .ad-srv-akt{order:3;flex:1 1 100%}
  .ad-srv-inhalt > *{margin-left:16px}
  .ad-row{flex-wrap:wrap}
  .ad-row-main{flex:1 1 140px}
}

/* Plugins als Karten */
.ad-karten{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:12px;margin-top:4px}
.ad-karten .ad-leer{grid-column:1 / -1}
.ad-pkarte{display:flex;flex-direction:column;gap:10px;padding:15px 16px 14px;min-width:0;
  border-radius:16px;border:1px solid var(--t07);background:var(--t03);
  transition:border-color .3s var(--ease),background .3s var(--ease)}
.ad-pkarte:hover{border-color:var(--t14);background:var(--panel)}
.ad-pkarte.fehler{border-color:color-mix(in srgb,#ff6b6b 30%,transparent)}
.ad-pkarte-kopf{display:flex;align-items:center;gap:12px;min-width:0}
.ad-pkarte-titel{display:flex;flex-direction:column;gap:2px;min-width:0}
.ad-pkarte-titel strong{font-size:14px;font-weight:650;letter-spacing:-.01em;color:var(--fg);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ad-pkarte-titel em{font-style:normal;font-size:11.5px;color:var(--t45)}
.ad-pkarte-text{font-size:12.5px;line-height:1.5;color:var(--t60);margin:0;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.ad-pkarte .ad-warn{margin:0}
.ad-pkarte-fuss{margin-top:auto;display:flex;align-items:center;gap:8px;flex-wrap:wrap;
  padding-top:10px;border-top:1px solid var(--t07)}
.ad-pkarte-fuss .ad-zeile-label{min-width:0}

/* Zeilen (Marktplätze, Suchtreffer, Konten) */
.ad-row .ad-ic{width:34px;height:34px;border-radius:11px}
.ad-row-sub{font-size:11.5px !important;color:var(--t45) !important}.admin-page .ad-avatar{width:34px;height:34px;font-size:13px}
.ad-avatar.admin{background:linear-gradient(135deg,var(--akzent-tief),var(--akzent));color:var(--auf-akzent)}
.ad-wahl{display:flex;flex-direction:column;gap:9px}
.ad-wahl-kopf{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.ad-wahl-liste{display:flex;flex-wrap:wrap;gap:7px;padding-left:2px}
.ad-probe{margin-top:14px;display:flex;flex-direction:column;gap:12px}
.ad-probe:empty{display:none}
.ad-probe .ad-kacheln{margin:0}
.ad-dl-zeilen{display:flex;flex-direction:column;gap:8px}
.ad-dl-zeilen > div{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.ad-dl-zeilen .ad-zeile-label{min-width:96px}
@media (max-width:820px){
  .ad-zeile-label{min-width:0}
}

/* Regeln und Konten: zwei Kästen fester Höhe, innen scrollbar */
.ad-scroll{height:clamp(320px,56vh,600px);overflow:auto;display:flex;flex-direction:column;gap:8px;
  padding:2px 8px 6px 0;margin:2px 0 4px;scrollbar-width:thin;scrollbar-color:var(--t14) transparent}
.ad-treffer{max-height:260px;overflow:auto}
.ad-treffer:empty{display:none}
.ad-neu{margin-top:12px;padding:14px 16px 16px;border:1px solid var(--t07);border-radius:14px;background:var(--t03)}
.ad-neu .ad-grid{margin-top:0}
.ad-icon-btn.on{background:var(--fg);color:var(--bg);border-color:var(--fg)}

/* Eine Regel: Kopf, Rechte als Chips, im Bearbeiten-Modus die Schalter darunter */
.ad-regel{display:flex;flex-direction:column;gap:9px;padding:11px 12px;
  border:1px solid var(--t07);border-radius:14px;background:var(--t03);
  transition:border-color .3s var(--ease),background .3s var(--ease),box-shadow .3s var(--ease)}
.ad-regel:hover{border-color:var(--t14);background:var(--t05)}
.ad-regel.standard{border-style:dashed;background:transparent}
.ad-regel.bearbeiten{border-color:rgba(var(--akzent-rgb),.45);background:rgba(var(--akzent-rgb),.05)}
.ad-regel.blitz{border-color:rgba(var(--akzent-rgb),.75);box-shadow:0 0 0 3px rgba(var(--akzent-rgb),.18)}
.ad-regel-kopf{display:flex;align-items:center;gap:11px;min-width:0}
.ad-regel-titel{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.ad-regel-titel strong{font-size:13.5px;font-weight:650;color:var(--fg);display:flex;align-items:center;gap:7px;flex-wrap:wrap}
.ad-regel-titel code{font-family:var(--mono);font-size:11px;color:var(--t45);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ad-ic.mini{width:30px;height:30px;border-radius:9px}
.ad-ic.mini .ic{width:14px;height:14px}
.ad-stift{width:32px;padding:0;justify-content:center;flex:none}
.ad-stift.on,.ad-stift.on:hover{background:var(--akzent);border-color:transparent;color:var(--auf-akzent)}
.ad-rechte{display:flex;flex-wrap:wrap;gap:6px;padding-left:41px}
.ad-recht{display:inline-flex;align-items:center;gap:6px;height:24px;padding:0 9px 0 8px;border-radius:8px;
  font-size:11.5px;font-weight:550;color:var(--t45);background:var(--t03);border:1px solid var(--t07);white-space:nowrap}
.ad-recht i{width:6px;height:6px;border-radius:50%;background:var(--t20);flex:none}
.ad-recht.an{color:var(--akzent);background:rgba(var(--akzent-rgb),.09);border-color:rgba(var(--akzent-rgb),.28)}
.ad-recht.an i{background:var(--akzent)}
.ad-recht.teil{color:var(--t90);border-color:var(--t14)}
.ad-recht.teil i{background:transparent;border:1.5px solid var(--akzent);width:7px;height:7px}
.ad-regel-edit{display:flex;flex-direction:column;gap:12px;padding:12px 0 2px 41px;border-top:1px solid var(--t07)}
.ad-regel-fuss{display:flex;justify-content:flex-end}
.ad-wahl{display:flex;flex-direction:column;gap:9px}
.ad-wahl-kopf{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.ad-wahl-liste{display:flex;flex-wrap:wrap;gap:7px;padding-left:2px}
/* Filter für lange Auswahlen – so hoch wie der kleine Segment-Schalter */
.ad-wahl-filter{flex:1 1 120px;min-width:0;max-width:220px;margin-left:auto;height:34px;padding:0 11px;border-radius:10px;
  border:1px solid var(--t10);background:var(--t03);color:var(--fg);font:inherit;font-size:12px;outline:0;
  transition:border-color .3s var(--ease),background .3s var(--ease)}
.ad-wahl-filter:focus{border-color:var(--akzent);background:var(--panel-focus)}
.ad-wahl-filter::placeholder{color:var(--t30)}
@media (max-width:820px){.ad-rechte,.ad-regel-edit{padding-left:0}}

/* Ein Konto: Avatar, Name, Herkunft der Rechte, Knöpfe als Symbole */
.ad-konto{display:flex;align-items:center;gap:12px;padding:10px 12px;
  border:1px solid var(--t07);border-radius:14px;background:var(--t03);
  transition:border-color .3s var(--ease),background .3s var(--ease)}
.ad-konto:hover{border-color:var(--t14);background:var(--t05)}
.ad-konto-text{flex:1;min-width:0;display:flex;flex-direction:column;gap:4px}
.ad-konto-text strong{font-size:13.5px;font-weight:650;color:var(--fg);display:flex;align-items:center;gap:7px;flex-wrap:wrap}
.ad-konto-sub{font-size:11.5px;color:var(--t45)}
.ad-konto-sub code{font-family:var(--mono);font-size:11px;color:var(--t60)}
.ad-konto .ad-pillen{gap:5px}
.ad-konto-akt{display:flex;gap:6px;align-items:center;flex:none}
.ad-konto-akt .ad-mini:not(.akzent){width:32px;padding:0;justify-content:center}
.ad-konto.gesperrt .ad-avatar{opacity:.5}
.ad-konto.gesperrt{border-color:color-mix(in srgb,#ff6b6b 30%,transparent)}
.ad-pille.knopf{cursor:pointer;border:1px solid transparent;font:inherit;font-size:11.5px;font-weight:550;
  transition:border-color .25s var(--ease),color .25s var(--ease)}
.ad-pille.knopf:hover{border-color:rgba(var(--akzent-rgb),.5);color:var(--akzent)}
.ad-probe{margin-top:14px;display:flex;flex-direction:column;gap:12px}
.ad-probe:empty{display:none}
.ad-probe .ad-kacheln{margin:0}
.ad-dl-zeilen{display:flex;flex-direction:column;gap:8px}
.ad-dl-zeilen > div{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.ad-dl-zeilen .ad-zeile-label{min-width:96px}
@media (max-width:820px){
  .ad-zeile-label{min-width:0}
  .ad-scroll{height:auto;max-height:70vh}
}