/* Grundlayout: schlichte, lesbare Oberfläche herstellen */
:root { --bg:#0b1020; --fg:#e7ecf3; --muted:#9db2c6; --panel:#121a2f; --accent:#5aa2ff; } /* Farbvariablen definieren */
* { box-sizing:border-box } /* Einheitliches Box-Modell aktivieren */
body { margin:0; font-family:system-ui,Segoe UI,Roboto,Ubuntu; color:var(--fg); background:linear-gradient(180deg,#0b1020,#0f1730); } /* Seitenstil */
header, footer { padding:16px 20px } /* Innenabstand oben/unten */
header h1 { margin:0 0 4px; font-size:22px } /* Überschrift im Header */
.sub { color:var(--muted); margin:0 } /* Untertitel-Stil */
main { max-width:900px; margin:20px auto; padding:0 16px; display:grid; gap:16px } /* Hauptbereich zentrieren */
.panel { background:var(--panel); border:1px solid #1b2742; border-radius:12px; padding:16px } /* Karten/Paneele optisch gestalten */
label { display:block; margin:8px 0 6px; color:#b8c7da } /* Labels formatieren */
textarea { width:100%; padding:10px; border-radius:8px; border:1px solid #2a3b63; background:#0c1428; color:var(--fg) } /* Texteingabe gestalten */
button { background:var(--accent); border:none; color:#00214a; padding:10px 14px; border-radius:10px; font-weight:600; cursor:pointer } /* Button-Stil */
button:disabled { opacity:.6; cursor:not-allowed } /* Deaktivierten Button kennzeichnen */
.row { display:flex; align-items:center; gap:12px; margin-top:10px } /* Horizontale Kontrollleiste */
.progress-wrap { margin:10px 0 } /* Fortschrittsabschnitt rücken */
progress { width:100%; height:16px } /* Fortschrittsbalkenmaß */
.output { white-space:pre-wrap; background:#0c1428; border:1px solid #2a3b63; padding:10px; border-radius:8px } /* Ausgabeformatierung */
.muted { color:var(--muted) } /* Gedämpfter Text */

/* === KIStack Button Styles === */
.btn{
  appearance:none; border:none; border-radius:8px; padding:8px 14px;
  font:600 14px/1.2 system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, "Helvetica Neue", Arial, "Noto Sans";
  cursor:pointer; transition:transform .04s ease, box-shadow .2s ease, background-color .2s ease, color .2s ease;
  box-shadow:0 1px 2px rgba(0,0,0,.15);
}
.btn:focus{ outline:2px solid rgba(43,110,242,.35); outline-offset:2px; }
.btn:hover{ box-shadow:0 4px 12px rgba(0,0,0,.18) }
.btn:active{ transform:translateY(1px) scale(0.99) }
.btn:disabled{ opacity:.55; cursor:not-allowed; box-shadow:none }

/* Primary (Fragen) */
.btn-primary{ background:#2b6ef2; color:#fff }
.btn-primary:hover{ background:#1f5be0 }
.btn-primary:active{ background:#1a50c7 }

/* Voice (Vorlesen) */
.btn-voice{ background:#6c45e3; color:#fff }
.btn-voice:hover{ background:#5936c9 }
.btn-voice:active{ background:#4b2faf }

/* „Playing“ Glow für Vorlesen */
@keyframes kistack-pulse {
  0% { box-shadow:0 0 0 0 rgba(108,69,227,.45) }
  70%{ box-shadow:0 0 0 10px rgba(108,69,227,0) }
  100%{ box-shadow:0 0 0 0 rgba(108,69,227,0) }
}
.btn-voice[data-state="loading"]{
  background:#7a56ff;
}
.btn-voice[data-state="playing"]{
  background:#5b3fe0;
  animation: kistack-pulse 1.4s ease-out infinite;
}

/* === KIStack: Busy/Sanduhr === */
html.is-waiting, html.is-waiting * { cursor: wait !important; }
.btn[aria-busy="true"] { opacity:.8; pointer-events:none }

/* Kleine Mikro-Feedbacks für Voice-Button */
.btn-voice[aria-busy="true"] { background:#7a56ff }