/* ============================================================================
   KINETIK — kinetisches Hochkontrast-Theme für LernHub
   Inspiriert von award-style Aktivismus-/Studio-Seiten (kinetische Typografie,
   Scroll-Reveals, Glitch/Durchstreich, Hover-Verzerrung, Intro-Splash).
   Aktiviert via body.theme-kinetik. Überschreibt nur Tokens + ergänzt Effekte.
   prefers-reduced-motion am Ende killt ALLE Animationen.
   Bewusst KEINE dauerhaft über dem Inhalt wandernde Linie (frühere Rückmeldung).
   ============================================================================ */

/* ── Design-Tokens ──────────────────────────────────────────────────────── */
body.theme-kinetik {
  --answer-bg: #f0f4fb;
  --answer-fg: #17171b;
  --primary: #ff2e6e;          /* Hot Magenta — Buttons/Links (weißer Text ok) */
  --primary-dark: #d61452;
  --primary-light: #ff5c8c;
  --accent: #ccff00;           /* Acid Lime — Highlights/Underlines/Marquee   */
  --gold: #ccff00;
  --gold-light: #e4ff7a;
  --gold-dark: #a6cf00;

  --bg: #0a0a0b;
  --bg-elevated: #141416;
  --bg-subtle: #1a1a1d;
  --border: rgba(255,255,255,.14);
  --border-soft: rgba(255,255,255,.08);

  --text: #f4f4ef;
  --text-muted: #a6a69e;
  --text-soft: #6f6f68;

  --shadow-md: 0 16px 30px -12px rgba(0,0,0,.7), 0 0 0 1px rgba(255,255,255,.05);
  --shadow-lg: 0 30px 60px -20px rgba(0,0,0,.8);

  background: var(--bg);
  color: var(--text);
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
}

/* dezenter, statischer Hintergrund-Glow (bewegt sich NICHT) */
body.theme-kinetik {
  background-image:
    radial-gradient(60% 50% at 85% -5%, rgba(255,46,110,.16), transparent 60%),
    radial-gradient(55% 45% at -5% 105%, rgba(204,255,0,.10), transparent 60%);
  background-attachment: fixed;
}

/* ── Typografie: kinetisch & laut ───────────────────────────────────────── */
body.theme-kinetik h1, body.theme-kinetik h2, body.theme-kinetik h3,
body.theme-kinetik .h1, body.theme-kinetik .h2, body.theme-kinetik .h3,
body.theme-kinetik .navbar-brand, body.theme-kinetik .display-1,
body.theme-kinetik .stat-value {
  font-family: 'Anton', 'Archivo', system-ui, sans-serif;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: .01em;       /* statisch — NIE animieren (Reflow-Flackern) */
  line-height: .98;
}
body.theme-kinetik,
body.theme-kinetik .btn, body.theme-kinetik .nav-link,
body.theme-kinetik .form-control, body.theme-kinetik .form-select,
body.theme-kinetik .badge, body.theme-kinetik h4, body.theme-kinetik h5,
body.theme-kinetik h6 {
  font-family: 'Archivo', system-ui, -apple-system, sans-serif;
}
body.theme-kinetik h1, body.theme-kinetik .h1 { letter-spacing: 0; }

/* Eingeblendete Akzent-Unterstreichung bei großen Überschriften */
body.theme-kinetik h2 { position: relative; display: inline-block; }
body.theme-kinetik h2::after {
  content: ''; position: absolute; left: 0; bottom: -.18em; height: 4px; width: 0;
  background: var(--accent); box-shadow: 0 0 14px var(--accent);
  animation: kin-underline .7s cubic-bezier(.16,1,.3,1) .25s forwards;
}
@keyframes kin-underline { to { width: 100%; } }

/* ── Navbar + Brand-Glitch ──────────────────────────────────────────────── */
body.theme-kinetik .bg-primary-custom,
body.theme-kinetik .navbar.bg-primary-custom {
  background: rgba(10,10,11,.86) !important;
  backdrop-filter: blur(10px) saturate(120%);
  border-bottom: 2px solid var(--accent);
}
body.theme-kinetik .navbar-brand { color: #fff; font-size: 1.35rem; }
body.theme-kinetik .kin-brand { position: relative; }
body.theme-kinetik .kin-badge {
  font-family: 'Archivo'; font-weight: 800; text-transform: uppercase;
  font-size: .52em; letter-spacing: .18em; color: #0a0a0b;
  background: var(--accent); padding: .18em .5em; border-radius: 3px;
  margin-left: .35em; vertical-align: .25em;
}
/* Glitch nur kurz & selten — kein Dauergeflacker */
body.theme-kinetik .kin-brand > span:first-child {
  animation: kin-glitch 7s steps(1) infinite;
}
@keyframes kin-glitch {
  0%, 92%, 100% { text-shadow: none; transform: none; }
  93% { text-shadow: -2px 0 var(--primary), 2px 0 var(--accent); transform: translateX(1px); }
  95% { text-shadow: 2px 0 var(--primary), -2px 0 var(--accent); transform: translateX(-1px); }
  97% { text-shadow: -1px 0 var(--accent), 1px 0 var(--primary); }
}

body.theme-kinetik .nav-link { position: relative; font-weight: 600; letter-spacing: .02em; }
body.theme-kinetik .nav-link::after {
  content: ''; position: absolute; left: .5rem; right: .5rem; bottom: .25rem; height: 2px;
  background: var(--accent); transform: scaleX(0); transform-origin: left;
  transition: transform .25s cubic-bezier(.16,1,.3,1);
}
body.theme-kinetik .nav-link.active::after { transform: scaleX(1); }

/* ── Buttons & Hover-Verzerrung (nur echte Maus) ────────────────────────── */
body.theme-kinetik .btn { font-weight: 700; text-transform: uppercase; letter-spacing: .04em; border-radius: 4px; }
body.theme-kinetik .btn-primary-custom,
body.theme-kinetik .btn-primary {
  background: var(--primary); border: none; color: #fff;
}
body.theme-kinetik .btn-outline-primary,
body.theme-kinetik .btn-outline-secondary {
  border-color: var(--border); color: var(--text);
}
@media (hover: hover) and (pointer: fine) {
  body.theme-kinetik .btn:hover {
    transform: translateY(-2px) skewX(-4deg);
    box-shadow: 6px 6px 0 0 var(--accent);
  }
  body.theme-kinetik .nav-link:hover::after { transform: scaleX(1); }
  body.theme-kinetik .card:hover, body.theme-kinetik .feat-tile:hover,
  body.theme-kinetik .cat-card:hover {
    transform: translateY(-5px);
    box-shadow: 10px 10px 0 -2px var(--primary);
    border-color: var(--accent);
  }
}

/* ── Karten / Flächen ───────────────────────────────────────────────────── */
body.theme-kinetik .card, body.theme-kinetik .learn-card,
body.theme-kinetik .list-group-item, body.theme-kinetik .modal-content {
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: 6px;
}
body.theme-kinetik .text-muted { color: var(--text-muted) !important; }
body.theme-kinetik .form-control, body.theme-kinetik .form-select,
body.theme-kinetik textarea {
  background: var(--bg-subtle); border-color: var(--border); color: var(--text);
}
body.theme-kinetik .form-control:focus, body.theme-kinetik .form-select:focus {
  border-color: var(--primary); box-shadow: 0 0 0 3px rgba(255,46,110,.25);
  background: var(--bg-subtle); color: var(--text);
}
body.theme-kinetik .progress { background: var(--bg-subtle); }

/* ── Scroll-Reveal (nur wenn JS aktiv → kin-js; sonst alles sichtbar) ────── */
html.kin-js body.theme-kinetik .kin-reveal {
  opacity: 0; transform: translateY(30px) scale(.985);
  transition: opacity .7s cubic-bezier(.16,1,.3,1), transform .7s cubic-bezier(.16,1,.3,1);
  will-change: opacity, transform;
}
html.kin-js body.theme-kinetik .kin-reveal.kin-in {
  opacity: 1; transform: none;
}

/* ============================================================================
   INTRO-SPLASH „JuJo // KINETIK" — Marquee-Wände, wischt nach oben weg
   ============================================================================ */
html.jp-intro-done body.theme-kinetik .kin-intro { display: none !important; }

body.theme-kinetik .kin-intro {
  position: fixed; inset: 0; z-index: 100000; overflow: hidden;
  background: #0a0a0b; display: flex; flex-direction: column;
  justify-content: center; gap: .1em;
  animation: kin-intro-out .7s cubic-bezier(.7,0,.2,1) 2.15s forwards;
}
@keyframes kin-intro-out { to { transform: translateY(-101%); } }

body.theme-kinetik .kin-intro .kin-row {
  white-space: nowrap; font-family: 'Anton', sans-serif;
  font-size: clamp(3rem, 13vw, 10rem); line-height: 1; text-transform: uppercase;
  color: transparent; -webkit-text-stroke: 1.5px rgba(255,255,255,.16);
  opacity: .9; user-select: none;
}
body.theme-kinetik .kin-intro .kin-row span { padding-right: .4em; }
body.theme-kinetik .kin-intro .kin-row.a { animation: kin-marq-l 7s linear infinite; }
body.theme-kinetik .kin-intro .kin-row.b { animation: kin-marq-r 9s linear infinite; }
@keyframes kin-marq-l { from { transform: translateX(0); }     to { transform: translateX(-50%); } }
@keyframes kin-marq-r { from { transform: translateX(-50%); }  to { transform: translateX(0); } }

body.theme-kinetik .kin-intro-word {
  position: absolute; inset: 0; display: flex; align-items: center;
  justify-content: center; gap: .25em; font-family: 'Anton', sans-serif;
  font-size: clamp(2.4rem, 9vw, 7rem); text-transform: uppercase; color: #fff;
}
body.theme-kinetik .kin-intro-word .slash { color: var(--primary); }
body.theme-kinetik .kin-intro-word .accent {
  color: #0a0a0b; background: var(--accent); padding: 0 .18em;
  box-shadow: 0 0 30px rgba(204,255,0,.6);
  clip-path: inset(0 100% 0 0); animation: kin-wipe .55s cubic-bezier(.7,0,.2,1) .35s forwards;
}
body.theme-kinetik .kin-intro-word > span:first-child {
  clip-path: inset(0 0 100% 0); animation: kin-drop .5s cubic-bezier(.16,1,.3,1) .1s forwards;
}
@keyframes kin-wipe { to { clip-path: inset(0 0 0 0); } }
@keyframes kin-drop { to { clip-path: inset(0 0 0 0); } }

/* ============================================================================
   JULIA-CHAT — höchst professioneller Vollbild-Look unter Kinetik
   Überschreibt die fest verdrahteten .julia-*-Styles (lila/hell) der Chat-Seite.
   Vollbild: Container-Padding neutralisiert, Panel randlos von Navbar bis unten.
   ============================================================================ */
body.theme-kinetik.julia-page { background: var(--bg); }
body.theme-kinetik.julia-page .main-content { padding-top: 0; padding-bottom: 0; min-height: 0; }
body.theme-kinetik.julia-page .main-content > .container-fluid { padding-left: 0; padding-right: 0; max-width: none; }
body.theme-kinetik.julia-page .julia-page-wrap { max-width: none; margin: 0; padding: 0; }
body.theme-kinetik.julia-page .julia-panel {
  height: calc(100vh - 58px); height: calc(100dvh - 58px);
  border-radius: 0; border: none; box-shadow: none; background: var(--bg);
}

/* Header — Ink statt Lila-Verlauf, Anton-Titel, Lime-Kante */
body.theme-kinetik .julia-header {
  background: #0d0d0f; border-bottom: 2px solid var(--accent);
}
body.theme-kinetik .julia-title {
  font-family: 'Anton', sans-serif; font-weight: 400; text-transform: uppercase; letter-spacing: .03em;
}
body.theme-kinetik .julia-status { color: var(--text-muted); }
body.theme-kinetik .julia-avatar {
  background: linear-gradient(135deg, var(--primary), var(--accent));
  color: #0a0a0b; border-radius: 12px; box-shadow: 0 0 0 2px rgba(204,255,0,.22);
}
body.theme-kinetik .julia-avatar::after { background: var(--accent); border-color: #0d0d0f; }
body.theme-kinetik .julia-header .btn,
body.theme-kinetik .sound-toggle { background: rgba(255,255,255,.07); border-color: var(--border); color: #fff; }
body.theme-kinetik .julia-header .btn:hover { background: rgba(255,255,255,.16); }

/* Toolbar + Modellwahl */
body.theme-kinetik .julia-toolbar { background: #111113; border-bottom: 1px solid var(--border); }
body.theme-kinetik .julia-toolbar .form-select {
  background: var(--bg-subtle); color: var(--text); border-color: var(--border);
}
body.theme-kinetik .julia-quota-pill { background: var(--bg-subtle); border-color: var(--border); color: var(--text-muted); }
body.theme-kinetik .julia-quota-pill .num { color: var(--accent); }

/* Stream + Bubbles */
body.theme-kinetik .julia-stream { background: var(--bg); }
body.theme-kinetik .julia-empty { color: var(--text-muted); }
body.theme-kinetik .julia-empty h5 { color: var(--text); }
body.theme-kinetik .julia-empty .big-avatar {
  background: linear-gradient(135deg, var(--primary), var(--accent)); color: #0a0a0b;
  box-shadow: 0 10px 34px rgba(255,46,110,.4);
}
body.theme-kinetik .julia-empty .suggest { background: var(--bg-elevated); border-color: var(--border); color: var(--text); }
body.theme-kinetik .julia-empty .suggest:hover { background: var(--primary); border-color: transparent; color: #fff; box-shadow: 0 6px 14px rgba(255,46,110,.35); }
body.theme-kinetik .msg-row.assistant .msg-avatar { background: linear-gradient(135deg, var(--primary), var(--accent)); color: #0a0a0b; }
body.theme-kinetik .msg-row.user .msg-avatar { background: linear-gradient(135deg, #2a2a2e, #141416); color: #fff; }
body.theme-kinetik .msg-row.assistant .msg-bubble { background: var(--bg-elevated); border: 1px solid var(--border); color: var(--text); }
body.theme-kinetik .msg-row.user .msg-bubble { background: linear-gradient(135deg, var(--primary), var(--primary-dark)); color: #fff; }
body.theme-kinetik .typing-dots span { background: linear-gradient(135deg, var(--primary), var(--accent)); }

/* Composer */
body.theme-kinetik .julia-composer { background: #0d0d0f; border-top: 1px solid var(--border); }
body.theme-kinetik .julia-composer textarea { background: var(--bg-subtle); border-color: var(--border); color: var(--text); }
body.theme-kinetik .julia-composer textarea:focus { background: var(--bg-subtle); border-color: var(--primary); box-shadow: 0 0 0 3px rgba(255,46,110,.25); }
body.theme-kinetik .julia-send { background: linear-gradient(135deg, var(--primary), var(--accent)); color: #0a0a0b; box-shadow: 0 4px 14px rgba(255,46,110,.4); }
body.theme-kinetik .julia-hint { background: #0d0d0f; color: var(--text-muted); }
body.theme-kinetik .julia-hint kbd { background: var(--bg-subtle); border-color: var(--border); color: var(--text); }

/* Chat-Liste (Off-Canvas) */
body.theme-kinetik #chatListCanvas { background: var(--bg-elevated); color: var(--text); }
body.theme-kinetik #chatListCanvas .offcanvas-header { background: #0d0d0f !important; border-bottom: 1px solid var(--border); }
body.theme-kinetik .chat-list-item { border-color: var(--border) !important; }
body.theme-kinetik .chat-list-item:hover { background: var(--bg-subtle); }
body.theme-kinetik .chat-list-item.active { background: rgba(255,46,110,.12); border-left: 3px solid var(--accent); }
body.theme-kinetik .chat-list-item .fw-semibold { color: var(--text) !important; }

/* ============================================================================
   ANMELDESEITE (Kinetik) — dunkler, professioneller Login im Theme-Look
   Login-Template ist standalone (kein base.html): body trägt .theme-kinetik.kin-login
   ============================================================================ */
body.theme-kinetik.kin-login { min-height: 100vh; background: var(--bg); }
body.theme-kinetik.kin-login .login-wrapper { background: transparent; }
body.theme-kinetik.kin-login .login-wrapper::before,
body.theme-kinetik.kin-login .login-wrapper::after { display: none !important; }
body.theme-kinetik.kin-login .login-box {
  background: rgba(18,18,20,.92);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border: 1px solid var(--border); border-top: 3px solid var(--accent);
  border-radius: 8px; color: var(--text);
  box-shadow: 0 30px 70px -20px #000, 0 0 0 1px rgba(255,255,255,.04);
}
body.theme-kinetik.kin-login .login-logo {
  background: linear-gradient(135deg, var(--primary), var(--accent));
  color: #0a0a0b; border-radius: 14px; box-shadow: 0 10px 30px rgba(255,46,110,.4);
}
body.theme-kinetik.kin-login .kin-login-title {
  font-family: 'Anton', sans-serif; text-transform: uppercase; letter-spacing: .04em;
  color: #fff; position: relative; display: inline-block;
}
body.theme-kinetik.kin-login .kin-login-title span { color: var(--accent); }
body.theme-kinetik.kin-login .kin-login-title::after {
  content: ''; position: absolute; left: 0; bottom: -.16em; height: 3px; width: 0;
  background: var(--accent); box-shadow: 0 0 12px var(--accent);
  animation: kin-underline .7s cubic-bezier(.16,1,.3,1) .35s forwards;
}
body.theme-kinetik.kin-login .login-box .text-muted { color: var(--text-muted) !important; }
body.theme-kinetik.kin-login .form-label { color: var(--text); }
body.theme-kinetik.kin-login .form-check-label { color: var(--text-muted); }
body.theme-kinetik.kin-login a { color: var(--accent); }
body.theme-kinetik.kin-login .login-box .text-success { color: var(--accent) !important; }

/* ============================================================================
   KONTRAST-FIX — keine helle Schrift auf hellem Grund (Aufgaben & Feedback)
   Kinetik ist dunkel; einige Elemente haben aber fest verdrahtete HELLE Flächen
   (Choice-/Match-Hover, Pastell-Feedback-Boxen, Bootstrap-Hell-Utilities).
   Strategie: interaktive Hell-Zustände → dunkel; helle „Inseln" behalten ihre
   (semantische) Pastellfarbe, bekommen aber DUNKLEN Text.
   ============================================================================ */

/* 1) Choice / Match / Ordering: fest verdrahtete helle Hover-/Aktiv-Zustände → dunkel */
body.theme-kinetik .choice-btn:hover,
body.theme-kinetik .match-item:hover,
body.theme-kinetik .ordering-item:hover {
  background: var(--bg-subtle) !important;
  border-color: var(--primary) !important;
  color: var(--text) !important;
}
body.theme-kinetik .choice-btn.selected,
body.theme-kinetik .match-item.selected,
body.theme-kinetik .ordering-item.positioned {
  background: rgba(255,46,110,.16) !important;
  border-color: var(--primary) !important;
  color: var(--text) !important;
  box-shadow: 0 0 0 3px rgba(255,46,110,.28) !important;
}

/* 2) Helle Pastell-„Inseln" in Aufgaben/Feedback (alle .rounded-Boxen in der
      Fragebox) + Bootstrap-Hell-Utilities → dunkler, lesbarer Text.
      Hintergrund (Semantik grün/rot/gelb) bleibt erhalten. */
body.theme-kinetik .question-box .rounded,
body.theme-kinetik .bg-light,
body.theme-kinetik .alert-light,
body.theme-kinetik .table-light,
body.theme-kinetik .badge.bg-light,
body.theme-kinetik .text-bg-light,
body.theme-kinetik [style*="background:#fff"],
body.theme-kinetik [style*="background: #fff"] {
  color: #17171b !important;
}
/* gedämpfte Sub-Texte in diesen hellen Flächen → dunkelgrau statt hellgrau */
body.theme-kinetik .question-box .rounded .text-muted,
body.theme-kinetik .question-box .rounded [style*="var(--text-muted)"],
body.theme-kinetik .bg-light .text-muted,
body.theme-kinetik .alert-light .text-muted,
body.theme-kinetik [style*="background:#fff"] .text-muted {
  color: #5b5b63 !important;
}

/* ── Reduced Motion: ALLES still ────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  body.theme-kinetik *,
  body.theme-kinetik *::before,
  body.theme-kinetik *::after {
    animation: none !important;
    transition: none !important;
  }
  html.kin-js body.theme-kinetik .kin-reveal { opacity: 1 !important; transform: none !important; }
  body.theme-kinetik .kin-intro { display: none !important; }
  body.theme-kinetik h2::after { width: 100%; }
}