/* ============================================================
   DistillTube , Design System (premium dark)
   ============================================================ */
:root {
  --bg:       #0a0b0e;
  --bg-2:     #0e1014;
  --panel:    #141720;
  --panel-2:  #1b1f2a;
  --border:   #262b37;
  --border-2: #333a49;
  --text:     #eef1f6;
  --muted:    #98a2b3;
  --muted-2:  #6b7280;
  --accent:   #ff5c49;
  --accent-2: #ffb86b;
  --accent-ink: #fff;
  --ok:   #34d399;
  --warn: #fbbf24;
  --err:  #f87171;
  --radius:   14px;
  --radius-sm:10px;
  --shadow:   0 10px 40px -12px rgba(0,0,0,.55);
  --shadow-sm:0 4px 18px -8px rgba(0,0,0,.5);
  --maxw: 1080px;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }
/* overflow-x: clip statt hidden: verhindert horizontales Scrollen, macht das
   Wurzelelement aber NICHT zum Scroll-Container (sonst bricht position: sticky
   der Topbar auf langen Seiten und das Menue scrollt weg). */
html, body { overflow-x: clip; max-width: 100%; }
img, svg, video { max-width: 100%; height: auto; }
/* Lange Woerter/URLs nie ueber den Rand laufen lassen (auch bei Text-Zoom) */
h1, h2, h3, p, li, summary, .video-row-title, .stat-value { overflow-wrap: anywhere; }
code { overflow-wrap: anywhere; word-break: break-word; }
/* Designrichtlinie: keine haesslichen Umbrueche/Waisen. Fliesstext bekommt
   'pretty' (vermeidet einzelne Woerter in der letzten Zeile), kurze Bloecke
   wie Listen, Hinweise und Hero-Texte 'balance' (gleichmaessige Zeilenlaengen,
   keine isolierten Mini-Zeilen). Zusaetzlich kurze 1-2-Buchstaben-Woerter im
   Markup per   an das Folgewort binden. */
p, li { text-wrap: pretty; }
.help-body p, .help-body li, .lead, .field-hint, .style-help-desc, .reg-check span,
.onboard-steps p, .muted.small, .auth-tagline, .hero-sub { text-wrap: balance; }

body {
  margin: 0;
  font-family: "Hanken Grotesk", -apple-system, BlinkMacSystemFont, sans-serif;
  background: var(--bg);
  color: var(--text);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

h1, h2, h3, .display {
  font-family: "Space Grotesk", sans-serif;
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.15;
  margin: 0 0 0.5rem;
}
h1 { font-size: 1.9rem; }
h2 { font-size: 1.35rem; }
h3 { font-size: 1.05rem; }

a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--accent-2); }

p { margin: 0 0 0.9rem; }

.muted { color: var(--muted); }
/* Hervorhebung des aktuell verwendeten Styles (Counterpoint, Champion, eigener
   Stil ...). Tritt typischerweise in einem .muted small-Block auf, in dem ein
   reines <strong> visuell untergeht. Diese Klasse hebt den Namen explizit
   wieder ein die Brand-Akzentfarbe an, fett, ohne Unterstrich. */
.style-name { color: var(--accent); font-weight: 700; }
/* Inline-Source-Tag-Verlinkungen [V1], [V3] zum Anker in der Sources-Liste */
.src-ref { color: var(--accent); text-decoration: none; font-weight: 600; }
.src-ref:hover { text-decoration: underline; }
/* Toggle "Hide source tags": versteckt komplette [V1, V3]-Tag-Wraps in
   Short/Long/Takeaways. Quotes und Mentioned resources nutzen die Variante
   .src-tag-wrap--keep, dort traegt der Tag den einzigen Source-Hinweis und
   bleibt immer sichtbar. */
.src-tags-hidden .src-tag-wrap:not(.src-tag-wrap--keep) { display: none; }
.src-help-card { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.7rem; }
.src-help-card p { margin: 0; flex: 1 1 280px; }
.src-toggle { flex: none; }
/* "How this summary was built"-Block in Share-Seiten */
.built-with .built-with-instructions { white-space: pre-wrap; background: var(--panel-2); border-left: 3px solid var(--border); padding: 0.7rem 0.9rem; border-radius: 6px; margin-top: 0.5rem; }
.built-with .built-with-link { margin-top: 0.8rem; margin-bottom: 0; }
.small { font-size: 0.82rem; }

/* ---------- Topbar ---------- */
.topbar {
  position: sticky; top: 0; z-index: 50;
  display: flex; align-items: center; gap: 1.5rem;
  padding: 0.85rem 1.6rem;
  background: rgba(10,11,14,.72);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--border);
}
.brand {
  display: inline-flex; align-items: center; gap: 0.55rem;
  font-family: "Space Grotesk", sans-serif; font-weight: 700;
  font-size: 1.15rem; color: var(--text); letter-spacing: -0.01em;
}
/* Slogan dezent rechts neben der Wortmarke, mit feinem Trenner (Brand-Lockup) */
.brand-tagline {
  font-family: "Hanken Grotesk", sans-serif; font-weight: 500; font-size: 0.88rem;
  color: var(--muted); letter-spacing: 0; white-space: nowrap;
  padding-left: 0.7rem; border-left: 1px solid var(--border-2);
}
/* Slogan nur auf wirklich breiten Screens (echter Desktop). Auf iPad bis
   iPad Pro Landscape (1366 px) weg, sonst wickelt die Nav um (z.B.
   "Dashboard" ueber "Channels", "Add or find" ueber "Settings"). */
@media (max-width: 1400px) { .brand-tagline { display: none; } }
.brand:hover { color: var(--text); }
.logo-mark { width: 30px; height: 30px; display: block; }
/* Nav: keine Items intern umbrechen lassen ("Add or find" darf nie zu drei
   Zeilen werden), und wenn insgesamt zu wenig Platz da ist, lieber sauber
   in die naechste Zeile wrappen. */
.nav { flex: 1; display: flex; flex-wrap: wrap; gap: 0.35rem 1.4rem; }
.nav a { color: var(--text); font-size: 1rem; font-weight: 600; white-space: nowrap; }
.nav a:hover { color: var(--accent); }
/* Auf Tablet-Breiten den Gap zwischen den Nav-Items verkleinern, damit alle
   in eine Zeile passen, bevor sie umbrechen. Zusaetzlich ein margin-left auf
   die Nav, damit das Menue klar vom DistillTube-Logo abgesetzt steht,
   nachdem die Tagline ausgeblendet ist. */
@media (max-width: 1400px) {
  .topbar { gap: 1rem; padding-left: 1.1rem; padding-right: 1.1rem; }
  .nav { gap: 0.3rem 0.9rem; margin-left: 1.6rem; }
  .nav a { font-size: 0.95rem; }
}
/* Auf engen Phones (Hamburger-loses Stack-Layout) brauchen wir den Extra-
   Abstand nicht, sonst rutscht die Nav unnoetig nach rechts. */
@media (max-width: 640px) {
  .nav { margin-left: 0; }
}
/* Auf Desktop/Web das Brand-Lockup minimal groesser; Phone (<=820px) bleibt unveraendert */
@media (min-width: 821px) {
  .brand { font-size: 1.22rem; }
  .brand .logo-mark { width: 34px; height: 34px; }
}
.topbar-user { display: flex; align-items: center; gap: 1rem; flex-shrink: 0; }
.topbar-email {
  color: var(--muted); font-size: 0.85rem; max-width: 200px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* E-Mail erst ab Desktop zeigen; auf Tablet/Phone wird sie ausgeblendet,
   damit der Logout-Button nicht gequetscht wird oder umbricht */
@media (max-width: 1024px) { .topbar-email { display: none; } }
.nav-signin { color: var(--muted); font-weight: 600; font-size: 0.9rem; }
.nav-signin:hover { color: var(--text); }
.btn-logout {
  background: var(--panel-2); border: 1px solid var(--border); color: var(--text);
  padding: 0.45rem 0.9rem; border-radius: 8px; font-size: 0.85rem; font-weight: 600;
  cursor: pointer; transition: border-color .15s; white-space: nowrap;
}
.btn-logout:hover { border-color: var(--accent); }

/* Hinweis-Banner zur E-Mail-Bestaetigung */
.verify-banner {
  display: flex; align-items: center; justify-content: center; gap: 0.8rem; flex-wrap: wrap;
  padding: 0.6rem 1rem; background: rgba(255,92,73,.12); border-bottom: 1px solid var(--border);
  color: var(--text); font-size: 0.9rem;
}
.verify-banner form { margin: 0; }

/* System-Status-Ampel (dezent, unten auf den Seiten) */
.sys-status {
  display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap;
  margin: 2.2rem 0 0.5rem; padding-top: 1rem; border-top: 1px solid var(--border);
  font-size: 0.82rem; color: var(--muted-2);
}
.sys-dot { width: 9px; height: 9px; border-radius: 50%; flex: none; background: var(--muted); }
.sys-green .sys-dot { background: #34d399; }
.sys-yellow .sys-dot { background: #fbbf24; }
.sys-red .sys-dot { background: #f87171; }
.sys-label { font-weight: 600; }
.sys-msg { color: var(--muted); }
.admin-status-form { display: flex; flex-direction: column; gap: 0.55rem; margin: 0.6rem 0 1rem; max-width: 640px; }
.admin-status-form label { display: flex; flex-direction: column; gap: 0.3rem; font-size: 0.85rem; color: var(--muted); }
.admin-status-row { width: 100%; }
.admin-status-light { flex-direction: row !important; align-items: center; gap: 0; font-weight: 600; color: var(--text); }
/* Fixe Breite vor dem Input, damit alle drei Textfelder buendig links anfangen,
   unabhaengig davon ob das Wort "Green", "Yellow" oder "Red" daneben steht. */
.admin-status-light .admin-status-label { display: inline-flex; align-items: center; gap: 0.55rem; width: 96px; flex: none; }
.admin-status-light .sys-dot { width: 12px; height: 12px; }
.admin-status-light .sys-dot-green { background: #34d399; }
.admin-status-light .sys-dot-yellow { background: #fbbf24; }
.admin-status-light .sys-dot-red { background: #f87171; }
/* Inputs und Selects in derselben Box auf gleiche Hoehe bringen (sonst wirkt
   der Select je nach Browser ein paar Pixel kleiner). */
.admin-status-form input[type=text],
.admin-status-form select {
  height: 38px; padding: 0 0.7rem; font-size: 0.95rem; box-sizing: border-box;
  background: var(--bg-2); color: var(--text); border: 1px solid var(--border); border-radius: 8px;
}
.admin-status-light input[type=text] { flex: 1; min-width: 0; }
.admin-status-foot { display: flex; flex-wrap: wrap; gap: 0.7rem; align-items: flex-end; margin-top: 0.3rem; }
.admin-status-foot select { min-width: 140px; }
/* Ampel in der Fusszeile (kompakt, rechts auf Desktop) */
.footer-status { margin-left: auto; }
.footer-status .sys-status { margin: 0; padding: 0; border-top: 0; }
/* Auf Tablet/Phone bricht die Fusszeile um: Ampel dann in eigene Zeile UNTER
   das Menue statt rechts mittendrin (sonst zerreisst es die Menue-Liste).
   Schwelle bewusst hoch gewaehlt, damit auch auf kleineren Desktop-Fenstern
   (< 1280px) das Menue einzeilig bleibt und die Ampel darunter wandert. */
@media (max-width: 1280px) {
  .footer-status { width: 100%; margin-left: 0; }
}

/* ---------- Layout ---------- */
.site-main { flex: 1 0 auto; width: 100%; }
.container { max-width: 860px; margin: 0 auto; padding: 2rem 1.5rem; }
.wide { max-width: var(--maxw); margin: 0 auto; padding: 0 1.5rem; }

/* ---------- Buttons ---------- */
button, .btn-primary, .btn-ghost {
  font-family: inherit; cursor: pointer; transition: transform .08s ease, box-shadow .15s, background .15s, border-color .15s;
}
button {
  padding: 0.62rem 1.1rem; border: none; border-radius: 10px;
  background: var(--accent); color: var(--accent-ink); font-weight: 600; font-size: 0.92rem;
}
button:hover { filter: brightness(1.05); }
button:active { transform: translateY(1px); }
button.secondary { background: var(--panel-2); border: 1px solid var(--border); color: var(--text); }
button.secondary:hover { border-color: var(--border-2); filter: none; }
button.danger { background: transparent; border: 1px solid var(--err); color: var(--err); }
button.danger:hover { background: rgba(248,113,113,.1); filter: none; }

.btn-primary {
  display: inline-block; padding: 0.7rem 1.3rem; border-radius: 11px;
  background: linear-gradient(135deg, var(--accent), #ff7a4d);
  color: var(--accent-ink); font-weight: 600; font-size: 0.95rem;
  box-shadow: 0 8px 24px -10px rgba(255,92,73,.7);
}
.btn-primary:hover { color: #fff; transform: translateY(-1px); box-shadow: 0 12px 30px -10px rgba(255,92,73,.8); }
.btn-sm { padding: 0.45rem 0.95rem; font-size: 0.85rem; border-radius: 9px; }
.btn-ghost {
  display: inline-block; padding: 0.7rem 1.3rem; border-radius: 11px;
  background: transparent; border: 1px solid var(--border-2); color: var(--text); font-weight: 600;
}
.btn-ghost:hover { border-color: var(--accent); color: var(--text); }

/* ---------- Forms ---------- */
input[type="text"], input[type="email"], input[type="password"], select, textarea {
  padding: 0.62rem 0.85rem; background: var(--panel-2); border: 1px solid var(--border);
  border-radius: 9px; color: var(--text); font-size: 0.95rem; font-family: inherit;
  transition: border-color .15s, box-shadow .15s; max-width: 100%;
}
input:focus, select:focus, textarea:focus {
  outline: none; border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(255,92,73,.15);
}
textarea { width: 100%; resize: vertical; }
/* Auswahlfelder grundsaetzlich volle Breite (in Flex-Zeilen ueberschreibt flex:1) */
select { width: 100%; }
input[type="text"], input[type="email"], input[type="password"] { flex: 1; min-width: 0; }

.row { display: flex; gap: 0.6rem; align-items: center; }
.row.spread { justify-content: space-between; }
.stack { display: flex; flex-direction: column; gap: 0.6rem; margin: 1rem 0; }

/* ---------- Cards ---------- */
.card {
  background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 1.2rem 1.4rem; margin: 1rem 0; box-shadow: var(--shadow-sm);
}
.card ul { margin: 0; padding-left: 1.2rem; }
.card li { margin: 0.2rem 0; }

/* Einklappbare Karten (details/summary): Long standardmaessig zu, Rest offen */
details.collapse > summary.collapse-head {
  cursor: pointer; list-style: none; display: flex; align-items: center; gap: 0.6rem;
}
details.collapse > summary.collapse-head::-webkit-details-marker { display: none; }
/* Deutlich sichtbarer, runder Aufklapp-Button mit Pfeil */
details.collapse > summary.collapse-head::before {
  content: "\25BC"; flex: none;
  width: 1.6rem; height: 1.6rem; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--panel-2); border: 1px solid var(--border-2);
  color: var(--accent); font-size: 0.72rem; line-height: 1;
  transition: transform .15s, background .15s, border-color .15s;
}
details.collapse > summary.collapse-head:hover::before { border-color: var(--accent); background: rgba(255,92,73,.12); }
details.collapse:not([open]) > summary.collapse-head::before { transform: rotate(-90deg); }
details.collapse > summary.collapse-head h2 { margin: 0; }
details.collapse[open] > summary.collapse-head { margin-bottom: 0.8rem; }
details.collapse > :not(summary):first-of-type { margin-top: 0; }
.prose { white-space: pre-wrap; }
.transcript-text { white-space: pre-wrap; max-height: 420px; overflow-y: auto; margin-top: 0.8rem; padding: 0.9rem; background: var(--bg-2); border: 1px solid var(--border); border-radius: var(--radius-sm); font-size: 0.88rem; color: var(--muted); line-height: 1.7; }

.add-box {
  background: linear-gradient(180deg, var(--panel), var(--bg-2));
  border: 1px solid var(--border); border-radius: var(--radius);
  padding: 1.4rem; margin-bottom: 1.6rem;
}

/* Onboarding fuer leere Accounts */
.onboard-steps { list-style: none; margin: 0 0 1.4rem; padding: 0; display: flex; flex-direction: column; gap: 0.7rem; }
.onboard-steps li { display: flex; align-items: flex-start; gap: 0.85rem; }
.onboard-steps li > div p { margin: 0.1rem 0 0; }
.onboard-num {
  flex: none; width: 30px; height: 30px; border-radius: 50%; text-align: center;
  line-height: 30px; font-family: "Space Grotesk", sans-serif; font-weight: 700; font-size: 0.95rem;
  background: linear-gradient(135deg, var(--accent), #ff7a4d); color: #fff;
  box-shadow: 0 4px 14px -6px rgba(255,92,73,.6);
}
.add-box-cta { border-color: var(--border-2); }
.add-box-cta .row { margin-bottom: 0.4rem; }
.empty-state { text-align: center; padding: 2.2rem 1.6rem; }
.empty-state h2 { margin: 0 0 0.4rem; }
.empty-state .empty-add { justify-content: center; max-width: 480px; margin: 1rem auto 0.6rem; }

/* Home-Uebersicht */
.home-hero { margin-bottom: 1.2rem; }
.home-hero h1 { margin-bottom: 0.2rem; }
.home-stats { display: flex; gap: 0.8rem; margin-bottom: 2rem; }
.home-stat { flex: 1; background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius); padding: 1.1rem; text-align: center; color: var(--text); transition: border-color .15s, transform .1s; }
.home-stat:hover { border-color: var(--accent); transform: translateY(-2px); color: var(--text); }
.hs-num { font-family: "Space Grotesk", sans-serif; font-size: 1.7rem; font-weight: 700; }
.hs-label { font-size: 0.78rem; color: var(--muted); text-transform: uppercase; letter-spacing: 0.04em; margin-top: 0.2rem; }
@media (max-width: 640px) {
  /* Stat-Karten bleiben nebeneinander (auf einen Blick), nur kompakter */
  .home-stats { gap: 0.45rem; margin-bottom: 1.2rem; }
  .home-stat { padding: 0.7rem 0.35rem; }
  .hs-num { font-size: 1.35rem; }
  .hs-label { font-size: 0.6rem; letter-spacing: 0.02em; margin-top: 0.1rem; }
}

/* ---------- Library ---------- */
.lib-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.lib-head h1 { margin: 0; }
.proj-new-link { text-decoration: none; color: var(--muted); }
.proj-new-link:hover { color: var(--accent); }
.empty-state .btn-primary { display: inline-block; margin: 0.4rem 0 0.8rem; }
.lib-tabs { display: inline-flex; gap: 0.3rem; margin: 1rem 0 1.6rem; background: var(--panel); border: 1px solid var(--border); border-radius: 1.2rem; padding: 0.35rem; max-width: 100%; flex-wrap: wrap; }
.lib-tab { padding: 0.4rem 0.95rem; border-radius: 999px; color: var(--muted); font-size: 0.85rem; font-weight: 600; white-space: nowrap; }
.lib-tab:hover { color: var(--text); }
.lib-tab.active { background: linear-gradient(135deg, var(--accent), #ff7a4d); color: #fff; box-shadow: 0 4px 14px -6px rgba(255,92,73,.6); }
.lib-tab.active:hover { color: #fff; }

/* Library- und Channel-Suche */
.lib-search { margin: 1rem 0 1.4rem; }
.lib-search input[type="search"] {
  width: 100%; max-width: 520px;
  background: var(--panel); border: 1px solid var(--border);
  border-radius: 999px; padding: 0.6rem 1rem;
  color: var(--text); font-size: 0.95rem;
}
.lib-search input[type="search"]:focus { outline: none; border-color: var(--border-2); }
.lib-search input::-webkit-search-cancel-button { cursor: pointer; }

/* Cap-Bedienleiste innerhalb einer Channel-Gruppe (Open channel + Follow-Toggle) */
.cg-actions { display: flex; flex-wrap: wrap; gap: 0.6rem 1rem; align-items: center; margin: -0.1rem 0 0.7rem; }
.cg-open { color: var(--muted); font-size: 0.85rem; font-weight: 600; }
.cg-open:hover { color: var(--accent); }

/* Show-more-Button (Cap pro Gruppe) */
.show-more-row { margin: 0.6rem 0 1rem; }
.show-more-row button {
  background: transparent; border: 1px solid var(--border-2); color: var(--muted);
  padding: 0.45rem 0.95rem; border-radius: 999px; font-size: 0.85rem; font-weight: 600;
  cursor: pointer; transition: color .15s, border-color .15s;
}
.show-more-row button:hover { color: var(--text); border-color: var(--text); }

/* Channel-Detail-Seite */
.channel-head { margin: 0 0 1.2rem; }
.channel-head-row { display: flex; gap: 1rem; align-items: flex-start; margin-top: 0.6rem; }
.channel-avatar-lg { width: 72px; height: 72px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.channel-head-text { flex: 1; min-width: 0; }
.channel-head-text h1 { margin: 0 0 0.4rem; }
.channel-desc { margin-top: 0.4rem; }
.channel-desc summary { cursor: pointer; }

.export-actions { display: flex; gap: 0.6rem; align-items: center; flex-wrap: wrap; margin-top: 0.8rem; }
.export-card h2 { margin-bottom: 0.2rem; }
.export-btn { padding: 0.6rem 1.2rem; font-size: 0.95rem; }
.export-btn.btn-ghost { background: var(--panel-2); }
.audio-box { margin-top: 1.4rem; padding: 1rem 1.1rem 1.1rem; border: 1px solid var(--border); border-radius: 14px; background: var(--panel-2); }
.audio-title { margin: 0; font-size: 1.02rem; }
.audio-area { margin-top: 0.7rem; }

/* ---------- Video page: "summary ready" jump panel + grouped controls ---------- */
.video-meta { align-items: center; }  /* Follow-Button mittig neben dem Kanalnamen */
/* Eigene Zeile fuer Datum, Views, Comments, Sprache, Dauer (umbruchfreundlich) */
.video-stats { display: flex; flex-wrap: wrap; gap: 0.4rem 1rem; color: var(--muted); font-size: 0.85rem; margin: 0 0 1.5rem; }
/* Library-Kanalanker landet unter der sticky Topbar (Sprung vom Kanalnamen) */
details.channel-group { scroll-margin-top: calc(var(--topbar-h, 56px) + 12px); }
/* Freiraum am Seitenende, damit der letzte Sprung (Share) nach oben holen kann */
.summary-end-spacer { height: 50vh; }
.summary-ready {
  background: var(--panel); border: 1px solid var(--border);
  border-left: 4px solid var(--ok); border-radius: var(--radius);
  padding: 1rem 1.15rem; margin: 0 0 1.3rem;
}
.summary-ready-head { display: flex; flex-wrap: wrap; align-items: center; gap: 0.3rem 0.6rem; margin-bottom: 0.75rem; }
.summary-ready-sub { flex-basis: 100%; margin-top: 0.15rem; }
.summary-ready-badge {
  display: inline-flex; align-items: center; justify-content: center;
  width: 1.45rem; height: 1.45rem; flex: none; border-radius: 999px;
  background: var(--ok); color: #fff; font-size: 0.85rem; font-weight: 700; line-height: 1;
}
.summary-ready-title { font-family: "Space Grotesk", sans-serif; font-weight: 700; font-size: 1.15rem; color: var(--text); }
.cockpit { display: flex; flex-wrap: wrap; gap: 0.45rem; }
.cockpit a {
  flex: none; padding: 0.45rem 0.9rem; border-radius: 999px;
  background: var(--panel-2); border: 1px solid var(--border-2);
  color: var(--text); font-size: 0.88rem; font-weight: 500;
  white-space: nowrap; text-decoration: none; transition: color .12s, border-color .12s;
}
.cockpit a:hover { color: var(--accent); border-color: var(--accent); }
/* Sprungziele landen unter Topbar + Cockpit statt darunter zu verschwinden */
/* Sprung-Anker fuer ALLE Karten und IDs: landen sauber unter der sticky
   Topbar. Nutzt die in base.html gesetzte --topbar-h (lebender Wert) plus
   einen 24 px Buffer fuer das Card-Padding, damit auch das h2 darin gut
   sichtbar ist. Fallback 96 px fuer Fall ohne JS. */
.card, details.collapse, [id^="sec-"], #generate, #share,
#status, #proc-box {
  scroll-margin-top: calc(var(--topbar-h, 72px) + 24px);
}
.controls-card h2, .audio-card h2 { margin-bottom: 0.2rem; }
.retry-form { margin-top: 0.9rem; }
/* Chat: groesseres, klar antippbares Kanal-Umschalt-Kaestchen */
.chat-scope {
  align-items: flex-start; gap: 0.65rem; padding: 0.7rem 0.9rem; margin-bottom: 1rem;
  background: var(--panel-2); border: 1px solid var(--border); border-radius: 12px;
  color: var(--text); font-size: 0.95rem;
}
.chat-scope input { width: 20px; height: 20px; flex: none; margin-top: 1px; accent-color: var(--accent); cursor: pointer; }
.audio-lead { margin: 0 0 0.6rem; }
.audio-opts { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.audio-opt { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.4rem 0.7rem; border: 1px solid var(--border); border-radius: 10px; font-size: 0.9rem; cursor: pointer; }
.audio-opt:has(input:checked) { border-color: var(--accent); background: rgba(255,92,73,.08); }
.audio-style { margin-top: 0.9rem; }
.audio-style > label { display: block; margin-bottom: 0.3rem; }
.audio-style select { width: 100%; max-width: 340px; }
.audio-style textarea { margin-top: 0.5rem; }
.audio-style-note { margin: 0.5rem 0 0; }
.audio-create { margin-top: 1.1rem; }
.audio-briefing { width: 100%; max-width: 480px; margin-top: 0.3rem; }
.row-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; flex: 1 1 100%; }
.row-actions form { margin: 0; }
.row-act { background: none; border: none; color: var(--muted-2); font-size: 0.78rem; font-weight: 500; padding: 0.2rem 0.3rem; cursor: pointer; }
.row-act:hover { color: var(--text); }
/* "Remove from library" immer rot anzeigen, damit klar ist, dass es loescht
   (zuvor erst beim Hover, was leicht uebersehen wurde). */
.row-act.danger-act { color: var(--err); }
.row-act.danger-act:hover { color: var(--err); filter: brightness(1.2); }
.video-list li.is-unread .video-row-title { font-weight: 600; }

.channel-group { margin: 0 0 1.4rem; padding-top: 1.4rem; border-top: 2px solid var(--border-2); }
.channel-group:first-of-type { border-top: 0; padding-top: 0.4rem; }
summary.channel-group-head { display: flex; align-items: center; gap: 0.6rem; margin-bottom: 0.7rem; cursor: pointer; list-style: none; }
summary.channel-group-head::-webkit-details-marker { display: none; }
summary.channel-group-head::before { content: "\25B8"; color: var(--muted); font-size: 0.85rem; flex: none; transition: transform .15s ease; }
.channel-group[open] > summary.channel-group-head::before { transform: rotate(90deg); }
.cg-title { font-family: "Space Grotesk", sans-serif; font-weight: 700; font-size: 1.15rem; color: var(--text); }
.cg-count { color: var(--muted); font-size: 0.85rem; }
.cg-follow { margin: -0.1rem 0 0.7rem; }
.channel-link { color: var(--text); }
.channel-link:hover { color: var(--accent); }
.follow-form { margin: 0; }
/* Follow- und Following-Zustand sehen identisch aus: dezente, neutrale Pille,
   kein Rot, kein auffaelliger Wechsel nach dem Klick. */
.follow-btn, button.follow-state {
  background: none; border: 1px solid var(--border); color: var(--muted);
  padding: 0.25rem 0.7rem; border-radius: 999px; font-size: 0.75rem; font-weight: 600; cursor: pointer;
}
.follow-btn:hover, button.follow-state:hover {
  border-color: var(--border-2); color: var(--text); filter: none;
}
.follow-state { font-size: 0.75rem; }

.video-list { list-style: none; padding: 0; margin: 0; }
.video-list li {
  padding: 0.6rem 0; border-bottom: 1px solid var(--border);
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.6rem;
}
/* Titel + Thumbnail immer in eigener Zeile, Status/Aktionen darunter */
.video-row { display: flex; align-items: center; gap: 0.7rem; color: var(--text); flex: 1 1 100%; min-width: 0; font-weight: 500; }
.video-row:hover .video-row-title { color: var(--accent); }
.video-row-title { white-space: normal; overflow-wrap: anywhere; }
.video-thumb-sm { width: 72px; height: 40px; object-fit: cover; border-radius: 6px; flex-shrink: 0; background: var(--panel-2); }

.badge {
  font-size: 0.7rem; padding: 0.18rem 0.55rem; border-radius: 999px;
  background: var(--panel-2); color: var(--muted); border: 1px solid var(--border); white-space: nowrap;
  flex: none; line-height: 1.3; display: inline-flex; align-items: center;
}
.badge.new { background: var(--accent); color: #fff; border: none; }
.badge.kind { color: var(--text); border-color: var(--border-2); }
.badge.status-ready { color: var(--ok); }
.badge.status-pending { color: var(--warn); }
.badge.status-queued { color: var(--warn); }
.badge.status-batching { color: var(--warn); }
.badge.status-error { color: var(--err); }
.badge.status-no_transcript { color: var(--muted); }

/* ---------- Video detail ---------- */
.video-head { margin-bottom: 1rem; }
.video-thumb-link { display: block; max-width: 520px; position: relative; margin-bottom: 0.9rem; }
.video-thumb { width: 100%; max-width: 520px; border-radius: var(--radius); display: block; box-shadow: var(--shadow); }
.video-dur-badge { position: absolute; right: 8px; bottom: 8px; background: rgba(0,0,0,.82); color: #fff; font-size: 0.8rem; font-weight: 600; padding: 0.12rem 0.45rem; border-radius: 6px; }
.video-meta { display: flex; flex-wrap: wrap; gap: 1rem; color: var(--muted); font-size: 0.9rem; margin: 0.3rem 0 0.8rem; }
.video-actions { display: flex; gap: 0.5rem; align-items: stretch; flex-wrap: wrap; }
.video-actions form { margin: 0; }
.video-actions form > button { height: 100%; }

.video-description { background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius); padding: 0.85rem 1.2rem; margin-bottom: 1rem; }
.video-description summary { cursor: pointer; color: var(--accent); font-size: 0.9rem; font-weight: 600; }
.video-description-text { margin-top: 0.6rem; white-space: pre-wrap; font-size: 0.9rem; color: var(--text); max-width: 70ch; }
.video-description-text a { word-break: break-all; }

.dashboard { display: flex; gap: 0.8rem; margin: 1rem 0; }
.stat { flex: 1; background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius); padding: 1rem; text-align: center; }
.stat-value { font-family: "Space Grotesk"; font-size: 1.35rem; font-weight: 700; }
.stat-label { font-size: 0.76rem; color: var(--muted); text-transform: uppercase; letter-spacing: 0.05em; margin-top: 0.2rem; }

.chapters { list-style: none; padding: 0; }
.chapters li { padding: 0.25rem 0; }
.ts { color: var(--accent); font-variant-numeric: tabular-nums; margin-right: 0.5rem; font-weight: 600; }
/* Anker-Sprungziele nicht unter die Sticky-Topbar rutschen lassen */
.chapters li[id], blockquote[id] { scroll-margin-top: 84px; }

blockquote {
  margin: 0.6rem 0; padding: 0.2rem 0 0.2rem 1rem;
  border-left: 3px solid var(--accent); color: var(--text); font-style: italic;
}
.quote-translation { display: block; margin-top: 0.3rem; color: var(--muted); font-size: 0.85rem; font-style: normal; }

.pdf-buttons { display: flex; align-items: center; gap: 0.4rem; flex-wrap: wrap; }
.pill {
  display: inline-block; padding: 0.28rem 0.75rem; border: 1px solid var(--border);
  border-radius: 999px; background: var(--panel-2); color: var(--text); font-size: 0.82rem;
}
.pill:hover { border-color: var(--accent); color: var(--text); }
.email-form { display: flex; align-items: center; gap: 0.5rem; margin-top: 0.9rem; flex-wrap: wrap; }
/* Stil-Sektion: schlank, eigene Sektion, flush links, wenig Rahmen */
.style-section { margin: 0 0 1rem; padding: 0 0.2rem; }
.style-head { display: flex; align-items: baseline; gap: 0.45rem; margin-bottom: 0.5rem; }
.style-current-tag {
  font-size: 0.68rem; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--muted); font-weight: 700;
}
.style-current-name { font-weight: 700; color: var(--text); font-size: 1rem; }
.regen-form { display: flex; flex-direction: column; gap: 0.45rem; }
.regen-row { display: flex; gap: 0.5rem; align-items: stretch; }
.regen-row select { flex: 1; min-width: 0; }
.regen-row button { white-space: nowrap; }
.regen-submit { align-self: flex-start; white-space: nowrap; }
/* Erklaertext nicht direkt an der Form/dem Textfeld kleben lassen */
.regen-form + .muted.small { margin-top: 0.9rem; }

/* ---------- Chat ---------- */
.chat #chat-log { display: flex; flex-direction: column; gap: 0.7rem; margin-bottom: 1rem; }
.msg { padding: 0.7rem 0.9rem; border-radius: 12px; background: var(--panel-2); }
.msg.user { background: #21262f; }
.msg.error { background: transparent; }
.msg-role { font-size: 0.72rem; color: var(--muted); margin-bottom: 0.25rem; display: flex; gap: 0.4rem; align-items: center; }
/* Einklappbare Sprechblasen (details/summary) */
summary.msg-role { cursor: pointer; list-style: none; user-select: none; }
summary.msg-role::-webkit-details-marker { display: none; }
summary.msg-role::before { content: "\25BE"; font-size: 0.7rem; transition: transform .15s; }
details.msg:not([open]) > summary.msg-role::before { transform: rotate(-90deg); }
details.msg:not([open]) > summary.msg-role { margin-bottom: 0; }
.msg-body { white-space: pre-wrap; }
#chat-form, #proj-chat-form { display: flex; gap: 0.75rem; align-items: flex-end; margin-top: 0.6rem; }
#chat-form textarea, #proj-chat-form textarea { flex: 1; min-width: 0; min-height: 3.2rem; resize: vertical; line-height: 1.5; }
#chat-form button, #proj-chat-form button { flex: none; align-self: stretch; }
.chat-foot { margin-top: 0.6rem; display: flex; justify-content: flex-end; }
.chat-thinking { margin-top: 0.5rem; }

/* Schnellfragen (aufklappbar, anfangs versteckt) */
.quick-questions { margin-top: 0.8rem; }
.quick-questions > summary { cursor: pointer; color: var(--accent); font-size: 0.9rem; font-weight: 600; }
.quick-questions > p { margin-top: 0.9rem; }
.qq-list { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0.7rem 0 0.4rem; }
.qq-lang { margin: 0.2rem 0 1rem; }
.qq-lang > span { display: block; margin-bottom: 0.5rem; }
.qq-lang-btns { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.qq-lang form { margin: 0; }
/* Settings: Hinweiszeilen je eigene Zeile */
.reg-check .field-hint { display: block; margin-top: 0.25rem; }
.qq {
  background: var(--panel-2); border: 1px solid var(--border-2); color: var(--text);
  padding: 0.4rem 0.8rem; border-radius: 999px; font-size: 0.85rem; font-weight: 500;
  cursor: pointer; text-align: left; transition: border-color .15s, color .15s;
}
.qq:hover { border-color: var(--accent); color: var(--accent); }

/* Quick-Questions-Editor in den Settings (Bubbles mit Loeschen) */
.qq-edit { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0.4rem 0 0.9rem; }
.qq-chip {
  display: inline-flex; align-items: center; gap: 0.45rem; background: var(--panel-2);
  border: 1px solid var(--border-2); border-radius: 999px; padding: 0.35rem 0.5rem 0.35rem 0.85rem;
  font-size: 0.85rem; color: var(--text);
}
.qq-x {
  background: none; border: none; color: var(--muted); cursor: pointer; font-size: 1rem;
  line-height: 1; padding: 0 0.15rem; border-radius: 50%;
}
.qq-x:hover { color: var(--err); filter: none; }
.qq-add { display: flex; gap: 0.5rem; margin-bottom: 0.9rem; align-items: flex-start; }
.qq-add input, .qq-add textarea { flex: 1; min-width: 0; }

/* Abschnitts-Aktion (Rephrase) unter Short summary / Key takeaways */
.sec-actions { display: flex; align-items: center; gap: 0.6rem; margin-top: 0.8rem; }

/* Favoriten-Herz in der Aktionsleiste */
.fav-btn {
  background: var(--panel-2); border: 1px solid var(--border); color: var(--muted);
  padding: 0.62rem 1.1rem; border-radius: 10px; font-size: 0.92rem; font-weight: 600;
  cursor: pointer; display: inline-flex; align-items: center; gap: 0.4rem; transition: border-color .15s, color .15s;
}
.fav-btn:hover { border-color: var(--accent); color: var(--text); }
.fav-heart { color: var(--accent); font-size: 1rem; line-height: 1; margin-right: 0.4em; }
.fav-btn.is-fav { border-color: var(--accent); color: var(--text); }

/* Klickbarer Zeitstempel am Zitat: klar tippbare Pille (gute Mobil-Trefferflaeche) */
.quote-ts {
  display: inline-flex; align-items: center; gap: 0.3rem; margin-top: 0.5rem;
  padding: 0.35rem 0.7rem; border: 1px solid var(--border-2); border-radius: 999px;
  font-size: 0.82rem; font-variant-numeric: tabular-nums; color: var(--accent);
  font-weight: 600; text-decoration: none;
}
.quote-ts::before { content: "▶"; font-size: 0.7rem; }
.quote-ts:hover { border-color: var(--accent); }

/* Gebrandete Player-Seite (/watch) */
.watch-page { max-width: 900px; margin: 1.5rem auto; }
.watch-embed { position: relative; width: 100%; aspect-ratio: 16 / 9; background: #000; border-radius: 12px; overflow: hidden; }
.watch-embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.watch-back { margin: 0 0 0.8rem; }
.watch-back a { color: var(--muted); font-size: 0.9rem; font-weight: 600; }
.watch-back a:hover { color: var(--accent); }
.watch-why { text-align: center; color: var(--accent); font-weight: 700; font-size: 1.05rem; margin: 0 0 0.2rem; }
.watch-hint { text-align: center; font-size: 0.95rem; color: var(--muted); margin: 0 0 0.8rem; }
.watch-actions { margin-top: 0.8rem; text-align: center; }
.watch-actions a { font-size: 0.8rem; color: var(--muted-2); }
.watch-actions a:hover { color: var(--accent); }

/* Resource-Such-Links (beta) */
.res-link { margin-left: 0.4rem; color: var(--accent); font-weight: 700; text-decoration: none; }
.res-link:hover { color: var(--accent-2); }

/* Share-Sektion */
.share-methods { display: flex; flex-direction: column; gap: 1.4rem; margin: 1rem 0 0.4rem; }
.share-method { max-width: 620px; }
.share-method-head { font-size: 0.95rem; font-weight: 600; color: var(--text); margin-bottom: 0.2rem; }
.share-method .muted.small { margin: 0 0 0.6rem; }
.share-link-row { display: flex; gap: 0.5rem; }
.share-link-row input { flex: 1; min-width: 0; font-size: 0.85rem; color: var(--muted); }
.share-buttons { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.share-btn {
  display: inline-flex; align-items: center; background: var(--panel-2);
  border: 1px solid var(--border-2); border-radius: 999px; padding: 0.4rem 0.9rem;
  font-size: 0.85rem; font-weight: 600; color: var(--text); cursor: pointer;
}
.share-btn:hover { border-color: var(--accent); color: var(--accent); }
.share-settings { margin-top: 1.6rem; padding-top: 1.2rem; border-top: 1px solid var(--border); }
.share-name-form { max-width: 560px; margin-bottom: 0.9rem; }
.share-name-form label { display: block; margin-bottom: 0.35rem; }
.share-name-row { display: flex; gap: 0.5rem; }
.share-name-row input { flex: 1; min-width: 0; }
.share-foot-actions { display: flex; flex-wrap: wrap; gap: 0.6rem; }
/* Hinweis-Banner auf der oeffentlichen Share-Seite */
.shared { max-width: 760px; margin: 0 auto; }
.shared-banner {
  background: rgba(255,92,73,.1); border: 1px solid var(--border-2);
  border-radius: var(--radius); padding: 0.8rem 1.1rem; margin: 1rem 0 1.4rem;
  color: var(--text); font-size: 0.92rem; line-height: 1.5;
}
.shared-kicker { color: var(--muted-2); font-size: 0.85rem; margin: 0; }
.share-email { margin: 0.3rem 0 1rem; }
.share-email > summary { cursor: pointer; color: var(--accent); font-size: 0.9rem; font-weight: 600; }
.share-email .stack { max-width: 420px; margin-top: 0.6rem; }
.share-off { margin-top: 0.3rem; }
.toggle { display: flex; align-items: center; gap: 0.5rem; font-size: 0.9rem; color: var(--muted); margin-bottom: 0.8rem; cursor: pointer; }
.toggle input { width: auto; }

/* ---------- Status / messages ---------- */
.status-box { background: rgba(52,211,153,.08); border: 1px solid rgba(52,211,153,.35); border-radius: var(--radius); padding: 1.6rem; color: var(--muted); display: flex; gap: 0.8rem; align-items: flex-start; }
.status-box .spinner { margin-top: 0.25rem; flex: none; }
.status-text { display: flex; flex-direction: column; gap: 0.35rem; max-width: 34rem; text-wrap: pretty; }
.status-text strong { color: var(--text); font-weight: 600; }
.status-eta { color: var(--text); }
.status-hint { font-size: 0.9rem; }
.spinner { display: inline-block; width: 14px; height: 14px; border: 2px solid var(--border); border-top-color: var(--accent); border-radius: 50%; animation: spin .8s linear infinite; vertical-align: middle; }
@keyframes spin { to { transform: rotate(360deg); } }
.htmx-indicator { opacity: 0; color: var(--muted); font-size: 0.85rem; transition: opacity .2s; }
.htmx-request.htmx-indicator, .htmx-request .htmx-indicator { opacity: 1; }

.error, .error-box { color: var(--err); }
.error-box { background: var(--panel); border: 1px solid var(--err); border-radius: var(--radius); padding: 1rem 1.3rem; }
.info-box { background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius); padding: 1rem 1.3rem; }
.info-box strong { color: var(--text); }
.notice { background: rgba(52,211,153,.1); border: 1px solid rgba(52,211,153,.3); border-radius: 9px; padding: 0.8rem 1rem; color: var(--text); font-size: 0.9rem; }
.pause-banner {
  background: linear-gradient(135deg, rgba(255,184,107,.10), rgba(255,92,73,.07));
  border: 1px solid rgba(255,184,107,.35);
  color: var(--text);
  border-radius: 12px;
  padding: 0.95rem 1.1rem;
  margin: 0 0 1.2rem;
  font-size: 0.95rem;
  line-height: 1.55;
  text-wrap: pretty;
}
.pause-banner strong { color: var(--accent-2); margin-right: 0.25rem; }

/* ---------- Comments ---------- */
.comment-list { list-style: none; padding: 0; margin: 0.5rem 0 0; }
.comment-list li { padding: 0.6rem 0; border-bottom: 1px solid var(--border); }
.comment-head { display: flex; justify-content: space-between; font-size: 0.82rem; color: var(--muted); margin-bottom: 0.2rem; }
.comment-author { font-weight: 600; }
.comment-text { white-space: pre-wrap; }

/* ---------- Channels admin ---------- */
.channel-admin { list-style: none; padding: 0; }
.channel-admin li { display: flex; justify-content: space-between; align-items: flex-start; gap: 0.8rem; padding: 1.4rem 0; border-top: 2px solid var(--border-2); border-radius: 8px; transition: background .4s; }
.channel-admin li:first-child { border-top: 0; padding-top: 0.4rem; }
.channel-admin li:target { background: rgba(255,92,73,.12); box-shadow: 0 0 0 1px var(--accent) inset; }
.channel-admin form { margin: 0; }
.channel-info { flex: 1; }
.channel-avatar { width: 46px; height: 46px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.channel-about { margin-top: 0.5rem; }
.channel-about summary { cursor: pointer; color: var(--accent); font-size: 0.85rem; }
.channel-about-text { margin-top: 0.4rem; white-space: pre-wrap; font-size: 0.85rem; color: var(--text); max-width: 60ch; }
.channel-about-text a { word-break: break-all; }
.channel-style { margin-top: 0.5rem; display: flex; flex-direction: column; gap: 0.2rem; }
.channel-style select { width: 100%; max-width: 520px; }

/* ---------- Help / forms ---------- */
.help { margin-top: 0.9rem; }
.help summary, details summary { cursor: pointer; color: var(--accent); font-size: 0.9rem; }
.help-body { margin-top: 0.6rem; font-size: 0.9rem; }
.help-body code, code { background: var(--panel-2); padding: 0.1rem 0.4rem; border-radius: 5px; font-size: 0.85em; }
.help-body p { margin: 0.45rem 0; }
.form-grid { display: flex; flex-direction: column; gap: 0.9rem; margin-top: 1rem; }
.form-grid label { display: flex; flex-direction: column; gap: 0.3rem; font-size: 0.9rem; color: var(--muted); }
.form-grid select { color: var(--text); width: 100%; }
.form-grid button { align-self: flex-start; }
.field-hint { font-size: 0.8rem; color: var(--muted-2); }
.style-help { background: var(--bg-2); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 0.6rem 0.9rem; }
.style-help > summary { cursor: pointer; font-size: 0.9rem; font-weight: 600; color: var(--accent); }
.style-help-list { list-style: none; padding: 0; margin: 0.8rem 0 0.4rem; display: flex; flex-direction: column; gap: 0.7rem; }
.style-help-list li { margin: 0; }
.style-help-name { display: block; font-weight: 700; color: var(--text); font-size: 0.92rem; }
.style-help-desc { display: block; color: var(--muted); font-size: 0.88rem; line-height: 1.5; margin-top: 0.1rem; }
.style-help-list { margin-bottom: 0; }
.style-help > p { margin-top: 1.1rem; }
.divider { border: none; border-top: 1px solid var(--border); margin: 1.3rem 0 0.6rem; }
.style-list { list-style: none; padding: 0; margin: 0.5rem 0 1rem; }
.style-list li { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; padding: 0.6rem 0; border-bottom: 1px solid var(--border); }
.style-list li > div:first-child { flex: 1; min-width: 0; }
.style-list form { margin: 0; flex-shrink: 0; }
.style-list .danger { white-space: nowrap; }
.danger-zone { border-color: var(--err); }
.danger-zone h2 { color: var(--err); }
.danger-zone .stack { max-width: 380px; }

/* ---------- Auth ---------- */
.auth-box { max-width: 400px; margin: 3.5rem auto; background: var(--panel); border: 1px solid var(--border); border-radius: 18px; padding: 2.2rem; text-align: center; box-shadow: var(--shadow); }
.auth-brand { display: flex; align-items: center; justify-content: center; gap: 0.6rem; margin-bottom: 0.6rem; }
.auth-brand .logo-mark { width: 40px; height: 40px; }
.auth-brand h1 { font-size: 1.6rem; margin: 0; }
.auth-tagline { color: var(--muted); font-size: 0.95rem; margin: 0 0 1.5rem; }
.auth-links { display: flex; flex-direction: column; gap: 0.45rem; margin-top: 1.1rem; font-size: 0.9rem; }
.linklike { background: none; border: none; color: var(--muted); cursor: pointer; font-size: 0.9rem; padding: 0; }
.linklike:hover { color: var(--accent); filter: none; }

/* Social-Login (Google) */
.oauth-block { margin-top: 1.1rem; }
.oauth-divider { display: flex; align-items: center; gap: 0.6rem; color: var(--muted); font-size: 0.8rem; margin: 0.2rem 0 1rem; }
.oauth-divider::before, .oauth-divider::after { content: ""; flex: 1; height: 1px; background: var(--border); }
.oauth-btn { display: flex; align-items: center; justify-content: center; gap: 0.6rem; width: 100%; padding: 0.7rem 1rem; background: #fff; color: #1f1f1f; border: 1px solid #dadce0; border-radius: 10px; font-weight: 600; font-size: 0.92rem; text-decoration: none; }
.oauth-btn:hover { background: #f7f8f8; filter: none; }
.oauth-btn svg { flex: none; }
.oauth-btn.secondary { background: var(--panel-2); color: var(--text); border-color: var(--border-2); }
.oauth-btn.secondary:hover { background: var(--border); }
.signup-alt { margin-top: 0.6rem; }

/* Optionale Profilfelder im Registrierungsformular */
.reg-field { display: flex; flex-direction: column; gap: 0.25rem; text-align: left; }
.reg-field-label { font-size: 0.82rem; color: var(--muted); }
.reg-field select { width: 100%; }
.reg-check { display: flex; align-items: flex-start; gap: 0.55rem; text-align: left; font-size: 0.85rem; color: var(--muted); line-height: 1.45; }
.reg-check input { margin-top: 0.15rem; flex: none; }

/* ============================================================
   Landing / marketing
   ============================================================ */
.hero {
  position: relative; overflow: hidden;
  padding: 5.5rem 1.5rem 4rem; text-align: center;
}
.hero::before {
  content: ""; position: absolute; inset: 0; z-index: 0;
  background:
    radial-gradient(60% 50% at 50% -5%, rgba(255,92,73,.22), transparent 70%),
    radial-gradient(40% 40% at 85% 10%, rgba(255,184,107,.12), transparent 70%);
  pointer-events: none;
}
.hero-inner { position: relative; z-index: 1; max-width: 760px; margin: 0 auto; }
.eyebrow {
  display: inline-block; font-size: 0.78rem; font-weight: 600; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--accent); background: rgba(255,92,73,.1);
  border: 1px solid rgba(255,92,73,.25); padding: 0.3rem 0.8rem; border-radius: 999px; margin-bottom: 1.3rem;
}
.hero h1 { font-size: clamp(2.2rem, 5.5vw, 3.6rem); margin-bottom: 1rem; }
.hero h1 .grad { background: linear-gradient(120deg, var(--accent), var(--accent-2)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hero-sub { font-size: 1.15rem; color: var(--muted); max-width: 600px; margin: 0 auto 2rem; text-wrap: pretty; }
.hero-cta { display: flex; gap: 0.8rem; justify-content: center; flex-wrap: wrap; }
.hero-note { margin-top: 1rem; font-size: 0.85rem; color: var(--muted-2); }
/* Auf dem Phone die drei Hinweise je in eine eigene Zeile */
@media (max-width: 640px) { .hero-note span { display: block; } }
.hero-pun { font-style: italic; color: var(--accent-2); max-width: 560px; margin: 0 auto 1rem; font-size: 1.02rem; text-wrap: balance; }
.hero-claim { max-width: 640px; margin: 0 auto 1.6rem; color: var(--text); font-size: 1rem; line-height: 1.55; text-wrap: balance; padding: 0.7rem 1rem; border-left: 3px solid var(--accent); background: rgba(255,92,73,.05); border-radius: 6px; }
.hiw-claim { margin: 0.6rem 0 0; padding: 0.7rem 1rem; border-left: 3px solid var(--accent); background: rgba(255,92,73,.05); border-radius: 6px; color: var(--text); }

/* How-it-works flow (HTML, responsive, lesbar) */
.flow { display: flex; align-items: stretch; gap: 0.7rem; flex-wrap: wrap; margin: 0 0 2.5rem; }
.flow-step { flex: 1 1 0; min-width: 150px; background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius); padding: 1.1rem 0.9rem; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 0.6rem; }
.flow-ico { width: 42px; height: 42px; border-radius: 12px; background: rgba(255,92,73,.12); display: flex; align-items: center; justify-content: center; flex: 0 0 auto; }
.flow-ico svg { width: 22px; height: 22px; stroke: var(--accent); fill: none; stroke-width: 1.8; }
.flow-label { font-family: "Space Grotesk", sans-serif; font-weight: 600; font-size: 0.92rem; line-height: 1.3; }
.flow-arrow { display: flex; align-items: center; color: var(--muted-2); font-size: 1.4rem; }
@media (max-width: 640px) {
  .flow { flex-direction: column; }
  .flow-step { width: 100%; flex-direction: row; text-align: left; gap: 0.9rem; }
  .flow-arrow { transform: rotate(90deg); align-self: center; }
}

.cta-row { display: flex; flex-wrap: wrap; gap: 0.8rem; margin-top: 2rem; }

/* Hero-Produkt-Mockup (echte Texte, responsiv) */
.mock { display: flex; align-items: center; justify-content: center; gap: 1rem; text-align: left; }
.mock-video {
  flex: 0 0 38%; max-width: 300px; aspect-ratio: 16 / 10;
  background: linear-gradient(180deg, #1b1f2a, #141720); border: 1px solid var(--border);
  border-radius: 16px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.9rem; box-shadow: var(--shadow);
}
.mock-play { width: 64px; height: 64px; border-radius: 50%; background: linear-gradient(135deg, var(--accent), #ff7a4d); display: flex; align-items: center; justify-content: center; box-shadow: 0 8px 24px -8px rgba(255,92,73,.7); }
.mock-play svg { width: 26px; height: 26px; margin-left: 3px; }
.mock-vmeta { color: var(--muted); font-size: 0.82rem; display: flex; align-items: center; gap: 0.5rem; }
.mock-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); display: inline-block; }
.mock-dur { color: var(--muted-2); }
.mock-arrow { color: var(--accent); font-size: 1.6rem; flex: 0 0 auto; }
.mock-summary { flex: 1 1 0; min-width: 0; max-width: 420px; background: var(--panel); border: 1px solid var(--border); border-radius: 16px; padding: 1.2rem 1.3rem; box-shadow: var(--shadow); }
.mock-tag { display: inline-block; font-size: 0.72rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #fff; background: linear-gradient(135deg, var(--accent), #ff7a4d); padding: 0.2rem 0.6rem; border-radius: 6px; margin-bottom: 0.8rem; }
.mock-points { list-style: none; padding: 0; margin: 0 0 0.9rem; }
.mock-points li { position: relative; padding-left: 1.1rem; font-size: 0.9rem; margin: 0.35rem 0; color: var(--text); }
.mock-points li::before { content: ""; position: absolute; left: 0; top: 0.55em; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }
.mock-chapters { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-bottom: 0.9rem; }
.mock-chapters span { font-size: 0.74rem; color: var(--muted); background: var(--panel-2); border: 1px solid var(--border); border-radius: 999px; padding: 0.18rem 0.55rem; }
.mock-quote { margin: 0 0 0.9rem; padding-left: 0.8rem; border-left: 3px solid var(--accent); font-style: italic; font-size: 0.9rem; color: var(--text); }
.mock-chat { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; background: var(--panel-2); border: 1px solid var(--border); border-radius: 999px; padding: 0.5rem 0.5rem 0.5rem 0.9rem; color: var(--muted); font-size: 0.85rem; }
.mock-send { width: 26px; height: 26px; flex: 0 0 auto; border-radius: 50%; background: linear-gradient(135deg, var(--accent), #ff7a4d); color: #fff; display: flex; align-items: center; justify-content: center; }
@media (max-width: 680px) {
  .mock { flex-direction: column; }
  .mock-video { flex-basis: auto; width: 100%; max-width: 340px; }
  .mock-summary { width: 100%; max-width: 340px; }
  .mock-arrow { transform: rotate(90deg); }
}

.hero-visual { max-width: 720px; margin: 3rem auto 0; position: relative; z-index: 1; }
.hero-visual svg { width: 100%; height: auto; display: block; filter: drop-shadow(0 20px 50px rgba(0,0,0,.5)); }

section.block { max-width: var(--maxw); margin: 0 auto; padding: 4rem 1.5rem; }
.section-head { text-align: center; max-width: 640px; margin: 0 auto 2.5rem; }
.section-head h2 { font-size: clamp(1.6rem, 3.5vw, 2.3rem); }
.section-head p { color: var(--muted); font-size: 1.05rem; }

/* Flexbox statt Grid: unvollstaendige letzte Reihe wird zentriert, sieht bei
   jeder Kartenzahl und auf Phone/Tablet/Desktop ausgewogen aus. */
.cards-3 { display: flex; flex-wrap: wrap; justify-content: center; gap: 1.2rem; }
.feature {
  flex: 1 1 260px; max-width: 360px;
  background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 1.5rem; transition: transform .15s, border-color .15s;
}
.feature:hover { transform: translateY(-3px); border-color: var(--border-2); }
.feature .ficon { width: 44px; height: 44px; border-radius: 11px; display: flex; align-items: center; justify-content: center; background: rgba(255,92,73,.12); margin-bottom: 1rem; }
.feature .ficon svg { width: 24px; height: 24px; stroke: var(--accent); fill: none; stroke-width: 1.8; }
.feature h3 { margin-bottom: 0.4rem; }
.feature p { color: var(--muted); font-size: 0.95rem; margin: 0; }

.steps { max-width: 760px; margin: 0 auto; display: flex; flex-direction: column; gap: 0; counter-reset: step; }
.step { display: flex; gap: 1.1rem; padding: 1.1rem 0; border-bottom: 1px solid var(--border); }
.step:last-child { border-bottom: none; }
.step-num {
  flex-shrink: 0; width: 38px; height: 38px; border-radius: 50%;
  background: linear-gradient(135deg, var(--accent), #ff7a4d); color: #fff;
  font-family: "Space Grotesk"; font-weight: 700; display: flex; align-items: center; justify-content: center;
}
.step-body h3 { margin-bottom: 0.2rem; font-size: 1rem; }
.step-body p { color: var(--muted); margin: 0; font-size: 0.95rem; }

.cta-band {
  max-width: var(--maxw); margin: 1rem auto 4rem; padding: 3rem 2rem; text-align: center;
  background: linear-gradient(135deg, rgba(255,92,73,.14), rgba(255,184,107,.08));
  border: 1px solid rgba(255,92,73,.25); border-radius: 20px;
}
.cta-band h2 { font-size: clamp(1.6rem, 3.5vw, 2.2rem); }
.cta-band p { color: var(--muted); max-width: 520px; margin: 0 auto 1.6rem; }

/* article / info pages */
.article { max-width: 720px; margin: 0 auto; padding: 3rem 1.5rem; }
.article h1 { font-size: clamp(2rem, 4.5vw, 2.8rem); margin-bottom: 1rem; }
.article .lead { font-size: 1.15rem; color: var(--muted); margin-bottom: 2rem; }
.article h2 { margin-top: 2.4rem; margin-bottom: 0.7rem; }
.article h3 { margin-top: 1.7rem; margin-bottom: 0.45rem; }
.article p, .article li { color: #d7dbe3; line-height: 1.75; }
.article p { margin-bottom: 1.05rem; }
.article ul { margin: 0.6rem 0 1.3rem; padding-left: 1.3rem; }
.article li { margin-bottom: 0.5rem; }
.faq-item { border-bottom: 1px solid var(--border); padding: 1rem 0; }
.faq-item summary { font-family: "Space Grotesk"; font-weight: 600; color: var(--text); font-size: 1.02rem; }
.faq-item p { margin: 0.7rem 0 0; }

/* ---------- Admin ---------- */
/* Grosse Schnell-Navigation oben im Admin-Dashboard (Costs / Alerts) */
.admin-nav { display: flex; gap: 0.9rem; flex-wrap: wrap; margin: 1.2rem 0 1.8rem; }
.admin-nav-btn {
  flex: 1 1 240px; text-align: center; padding: 1.15rem 1.5rem; border-radius: 13px;
  font-size: 1.08rem; font-weight: 700; letter-spacing: 0.01em;
  background: linear-gradient(135deg, var(--accent), #ff7a4d); color: var(--accent-ink);
  box-shadow: 0 8px 24px -10px rgba(255,92,73,.7);
  transition: transform .08s ease, box-shadow .15s, border-color .15s, color .15s;
}
.admin-nav-btn:hover { color: #fff; transform: translateY(-1px); box-shadow: 0 12px 30px -10px rgba(255,92,73,.8); }
.admin-nav-btn-ghost {
  background: transparent; border: 1px solid var(--border-2); color: var(--text); box-shadow: none;
}
.admin-nav-btn-ghost:hover { border-color: var(--accent); color: var(--text); transform: translateY(-1px); }
.admin-nav-btn-sm { flex: 0 0 auto; padding: 0.6rem 1.1rem; font-size: 0.92rem; }

/* Gruppierte Abschnitte im Admin-Dashboard fuer klare Trennung */
.admin-section {
  background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 1.3rem 1.4rem 1.5rem; margin: 0 0 1.4rem;
}
.admin-section > .admin-h:first-child { margin-top: 0; }
.admin-section .admin-card { background: var(--panel-2); }
.admin-h3 { margin: 1.6rem 0 0.2rem; font-size: 1rem; font-weight: 600; }
.admin-lead { margin: 0 0 1.4rem; max-width: 60ch; text-wrap: pretty; }
.admin-inline-form { margin: 0.6rem 0 0.4rem; }
/* Billed/estimated-Kennzeichnung in Tabellen */
.admin-pill {
  display: inline-block; font-size: 0.68rem; font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.03em; padding: 0.08rem 0.45rem; border-radius: 999px;
  background: var(--panel-2); color: var(--muted); border: 1px solid var(--border); vertical-align: middle;
}
.admin-pill-ok { color: var(--ok); border-color: rgba(74,222,128,.4); }

.admin-h { margin-top: 2rem; }
.admin-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 0.8rem; margin: 0.6rem 0 0.4rem; }
.admin-card { background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius); padding: 1.1rem; text-align: center; }
.admin-card.warn { border-color: rgba(248,113,113,.4); }
.ac-num { font-family: "Space Grotesk", sans-serif; font-size: 1.7rem; font-weight: 700; }
.ac-label { font-size: 0.76rem; color: var(--muted); text-transform: uppercase; letter-spacing: 0.04em; margin-top: 0.2rem; }
.admin-table { width: 100%; border-collapse: collapse; margin: 0.6rem 0; font-size: 0.9rem; }
.admin-table th, .admin-table td { text-align: left; padding: 0.5rem 0.6rem; border-bottom: 1px solid var(--border); }
.admin-table th { color: var(--muted); font-weight: 600; }
.admin-table td:not(:first-child) { text-align: right; font-variant-numeric: tabular-nums; }
.admin-table tr.hl td { color: var(--accent); font-weight: 600; }
.admin-user-actions { display: flex; gap: 0.4rem; flex-wrap: wrap; }
.admin-user-actions form { margin: 0; }
.admin-two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 1.2rem; }
@media (max-width: 640px) { .admin-two-col { grid-template-columns: 1fr; } }
.admin-errors { list-style: none; padding: 0; }
.admin-errors li { background: var(--panel); border: 1px solid var(--border); border-left: 3px solid var(--err); border-radius: var(--radius-sm); padding: 0.7rem 0.9rem; margin-bottom: 0.6rem; }
.ae-title { font-weight: 600; }
.ae-msg { font-size: 0.85rem; color: var(--err); margin-top: 0.3rem; word-break: break-word; }

/* Admin: user search + pagination */
.admin-search-form { display: flex; gap: 0.5rem; align-items: center; margin: 0.5rem 0 0.4rem; flex-wrap: wrap; }
.admin-search-form input[type="search"] { flex: 1 1 280px; min-width: 0; padding: 0.45rem 0.7rem; border-radius: var(--radius-sm); border: 1px solid var(--border); background: var(--bg-2); color: var(--text); }
.admin-search-form button { padding: 0.45rem 0.9rem; }
.admin-pager { display: flex; align-items: center; gap: 0.8rem; margin: 0.7rem 0 1.4rem; }
.admin-user-link { display: inline-block; width: 1.2em; text-align: center; color: var(--muted); text-decoration: none; margin-right: 0.4rem; font-weight: 700; }
.admin-user-link:hover { color: var(--accent); }
.badge-ok { background: rgba(34,197,94,0.15); color: var(--ok); padding: 0.1rem 0.45rem; border-radius: 999px; font-size: 0.8em; }
.badge-err { background: rgba(248,113,113,0.18); color: var(--err); padding: 0.1rem 0.45rem; border-radius: 999px; font-size: 0.8em; }

/* ---------- Footer ---------- */
.site-footer { border-top: 1px solid var(--border); background: var(--bg-2); margin-top: 2rem; }
.footer-inner { max-width: var(--maxw); margin: 0 auto; padding: 2rem 1.5rem; display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; }
.footer-brand { display: inline-flex; align-items: center; gap: 0.5rem; font-family: "Space Grotesk"; font-weight: 700; color: var(--text); }
.footer-brand:hover { color: var(--accent); }
.footer-brand .logo-mark { width: 22px; height: 22px; }
.footer-links { flex: 1; display: flex; gap: 1.3rem; flex-wrap: wrap; }
.footer-links a { color: var(--muted); font-size: 0.9rem; }
.footer-links a:hover { color: var(--text); }
.footer-note { color: var(--muted-2); font-size: 0.82rem; width: 100%; }
.footer-note .footer-sep { margin: 0 0.35rem; }
/* iPhone/schmal: Tagline auf eine eigene zweite Zeile, Trennpunkt weg */
@media (max-width: 640px) {
  .footer-note .footer-sep { display: none; }
  .footer-note .footer-tagline { display: block; }
}

/* Settings: Untergruppen-Ueberschriften (Text summary / Audio briefing) */
.settings-group { margin: 0.4rem 0 0; font-size: 1.05rem; }
.settings-group + .muted, .settings-group + p { margin-top: 0.2rem; }

/* Tablet/Mobile: Navigation umbrechen statt quetschen */
@media (max-width: 820px) {
  .topbar { flex-wrap: wrap; gap: 0.6rem 1rem; padding: 0.7rem 1rem; }
  .brand { flex: 1; }
  .nav { order: 3; flex-basis: 100%; justify-content: flex-start; gap: 1.1rem; flex-wrap: wrap; }
  .topbar-email { display: none; }
}

@media (max-width: 640px) {
  h1 { font-size: 1.6rem; }
  .container { padding: 1.4rem 1.1rem; }
  .block { padding: 2.5rem 1.1rem; }
  .hero { padding: 3rem 1.1rem 2.5rem; }
  .dashboard { flex-direction: column; }
  .video-meta { gap: 0.5rem 1rem; }
  .video-actions { flex-wrap: wrap; }
  .pdf-buttons { width: 100%; }
  .row.spread { flex-direction: column; align-items: flex-start; gap: 0.6rem; }
  .email-form, .regen-form { width: 100%; }
  .regen-row { flex-direction: column; align-items: stretch; }
  .regen-row button { align-self: flex-start; }
  /* Chat-Eingabe auf dem Handy: Textfeld volle Breite + hoeher, Send darunter */
  #chat-form, #proj-chat-form { flex-direction: column; align-items: stretch; }
  #chat-form textarea, #proj-chat-form textarea { min-height: 5.5rem; }
  #chat-form button, #proj-chat-form button { align-self: flex-end; }
  .cta-band { margin: 1rem 1rem 3rem; padding: 2rem 1.2rem; }
  .footer-inner { flex-direction: column; align-items: flex-start; }
  .channel-admin li { flex-direction: column; }
  .seg-control { flex-direction: column; }
  /* Add-Formulare (Video/Kanal hinzufuegen): Eingabefeld in eigene volle Zeile,
     Button darunter, statt zu schmal nebeneinander */
  .add-box form.row, .add-channel-form, .empty-add { flex-direction: column; align-items: stretch; }
  /* "Add a question"-Feld volle Breite, Add-Button darunter */
  .qq-add { flex-direction: column; align-items: stretch; }
}

/* ---------- Contact form ---------- */
.contact { max-width: 640px; }
.contact-form { display: flex; flex-direction: column; gap: 0.55rem; margin-top: 1.4rem; }
.contact-form .field-label { font-size: 0.82rem; font-weight: 600; color: var(--muted);
  margin-top: 0.6rem; }
.contact-form .field-label:first-of-type { margin-top: 0; }
.contact-form input[type="email"], .contact-form textarea { width: 100%; }
.contact-form .btn-primary { align-self: flex-start; margin-top: 0.9rem; border: none; cursor: pointer; }

/* Segment-Control fuer den Anfragetyp (reine CSS-Loesung ueber Radio-Inputs) */
.seg-control { display: flex; gap: 0.4rem; background: var(--panel-2);
  border: 1px solid var(--border); border-radius: 11px; padding: 0.3rem; }
.seg-input { position: absolute; opacity: 0; pointer-events: none; }
.seg-option { flex: 1; text-align: center; padding: 0.5rem 0.7rem; border-radius: 8px;
  font-size: 0.9rem; font-weight: 600; color: var(--muted); cursor: pointer;
  transition: background .15s, color .15s; user-select: none; }
.seg-option:hover { color: var(--text); }
.seg-input:checked + .seg-option { background: linear-gradient(135deg, var(--accent), #ff7a4d);
  color: #fff; box-shadow: 0 4px 14px -6px rgba(255,92,73,.6); }
.seg-input:focus-visible + .seg-option { box-shadow: 0 0 0 3px rgba(255,92,73,.3); }

/* Honeypot: visuell und fuer Screenreader weg, aber im DOM vorhanden */
.hp-field { position: absolute; left: -9999px; width: 1px; height: 1px;
  opacity: 0; pointer-events: none; }

.contact-success { text-align: center; margin-top: 1.4rem; padding: 2.4rem 1.5rem; }
.contact-success-mark { width: 56px; height: 56px; margin: 0 auto 1rem; border-radius: 50%;
  background: linear-gradient(135deg, var(--accent), #ff7a4d); color: #fff;
  font-size: 1.8rem; line-height: 56px; }
.contact-success .btn-primary { display: inline-block; margin-top: 1rem; }

/* ---- Video finder ---- */
.finder-search textarea { width: 100%; resize: vertical; min-height: 84px; font-size: 1rem; line-height: 1.5; }
.finder-search-actions { margin-top: 0.7rem; gap: 1rem; }
.finder-search-actions .muted { text-wrap: balance; }
.finder-search-actions button { flex: none; }
.finder-error { margin-top: 1.4rem; }

/* Player oben, eingebettet (kein Overlay, spielt auch in Safari) */
.finder-player-wrap { position: sticky; top: calc(var(--topbar-h, 56px) + 6px); z-index: 6; margin: 1.2rem 0 1rem;
  background: var(--panel); border: 1px solid var(--border-2); border-radius: var(--radius);
  padding: 0.6rem; box-shadow: 0 12px 30px -18px #000; }
.finder-player-head { display: flex; align-items: center; gap: 0.6rem; margin-bottom: 0.5rem; }
.finder-player-title { flex: 1; min-width: 0; font-family: "Space Grotesk", sans-serif;
  font-weight: 600; font-size: 0.95rem; line-height: 1.3; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; }
.finder-player-close { flex: none; background: var(--panel-2); border: 1px solid var(--border-2);
  color: var(--text); width: 1.9rem; height: 1.9rem; border-radius: 50%; font-size: 1.2rem;
  line-height: 1; padding: 0; cursor: pointer; }
.finder-player-close:hover { border-color: var(--accent); }
.finder-player-box { position: relative; aspect-ratio: 16/9; background: #000;
  border-radius: var(--radius-sm); overflow: hidden; }
.finder-player-box #finder-player-mount { position: absolute; inset: 0; }
.finder-player-box iframe { width: 100%; height: 100%; border: 0; display: block; }

/* Workflow-Schritte */
.finder-steps { margin: 0 0 1.2rem; padding-left: 1.4rem; color: var(--muted); }
.finder-steps li { margin: 0.25rem 0; text-wrap: pretty; }

/* Videodaten unter dem Player (wie in der Trefferliste) */
.finder-player-meta { margin-top: 0.55rem; color: var(--muted); font-size: 0.85rem;
  line-height: 1.5; text-wrap: pretty; }
.finder-player-meta:empty { display: none; }
.finder-player-desc { margin-top: 0.6rem; padding-top: 0.6rem; border-top: 1px solid var(--border);
  color: var(--muted); font-size: 0.88rem; line-height: 1.6; white-space: pre-wrap;
  max-height: 230px; overflow-y: auto; }
.finder-player-desc-label { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--muted-2); margin-bottom: 0.3rem; white-space: normal; }

/* Fokus-Modus waehrend der Wiedergabe: Anleitung immer aus; auf dem Phone auch
   die anderen Treffer und die Fusszeile, damit nur das laufende Video zaehlt */
#finder-results.is-focused .finder-steps { display: none; }
@media (max-width: 620px) {
  #finder-results.is-focused .finder-list,
  #finder-results.is-focused .finder-foot { display: none; }
}

/* Trefferliste: jede Karte einzeln auf-/zuklappbar */
.finder-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 0.7rem; }
.finder-card { background: var(--panel); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 0.8rem; }

.finder-card.is-playing { border-color: var(--accent);
  box-shadow: 0 0 0 1px var(--accent), 0 14px 34px -20px var(--accent); }
.finder-card.is-playing .finder-play { opacity: 1; }
.finder-card.is-playing .finder-thumb::before { content: "Last watched";
  position: absolute; top: 5px; left: 5px; z-index: 1; background: var(--accent);
  color: #fff; font-size: 0.62rem; font-weight: 600; letter-spacing: 0.02em;
  padding: 2px 6px; border-radius: 5px; line-height: 1.3; }

/* Kopfzeile: Thumbnail (Play) links, Text mittig, Aufklapp-Toggle rechts */
.finder-head { display: flex; align-items: flex-start; gap: 0.7rem; }
.finder-head-text { min-width: 0; flex: 1; }
.finder-card-body { margin-top: 0.8rem; min-width: 0; }
.finder-card.collapsed .finder-card-body { display: none; }

/* Eigener, dezenter Aufklapp-Button (klar getrennt vom roten Play-Dreieck) */
.finder-toggle { flex: none; align-self: center; background: transparent; border: 0;
  width: 2rem; height: 2rem; padding: 0; border-radius: 8px; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; }
.finder-toggle:hover { background: var(--panel-2); filter: none; }
.finder-toggle-caret { width: 9px; height: 9px; border-right: 2px solid var(--muted);
  border-bottom: 2px solid var(--muted); transform: translateY(-2px) rotate(45deg);
  transition: transform .15s; }
.finder-card.collapsed .finder-toggle-caret { transform: translateY(1px) rotate(-135deg); }

.finder-thumb { position: relative; flex: none; display: block; padding: 0; border: 0;
  background: var(--panel-2); border-radius: var(--radius-sm); overflow: hidden;
  cursor: pointer; aspect-ratio: 16/9; width: 132px; line-height: 0; }
.finder-thumb:hover { filter: none; transform: none; }
.finder-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.finder-dur { position: absolute; right: 5px; bottom: 5px; background: rgba(0,0,0,.82);
  color: #fff; font-size: 0.7rem; padding: 1px 5px; border-radius: 5px; line-height: 1.4; }
.finder-play { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: 1.4rem; opacity: 0.55; transition: opacity .15s; background: rgba(0,0,0,.2); }
.finder-thumb:hover .finder-play { opacity: 1; }

.finder-score { display: inline-block; font-size: 0.72rem; font-weight: 600; letter-spacing: 0.02em;
  color: var(--accent-2); background: rgba(255,184,107,.1); border: 1px solid rgba(255,184,107,.25);
  border-radius: 999px; padding: 1px 8px; margin-bottom: 0.35rem; cursor: help; }
.finder-title { font-family: "Space Grotesk", sans-serif; font-weight: 600;
  font-size: 1.0rem; line-height: 1.35; display: block; text-wrap: pretty; }
.finder-views { margin-top: 0.15rem; }
.finder-channel { color: var(--muted); font-size: 0.9rem; margin-top: 0.45rem; }
.finder-subs { color: var(--muted-2); }

/* Aufklapper als klar antippbare Chips (Video-Beschreibung, Kanal-Info) */
.finder-sub { margin-top: 0.5rem; }
.finder-sub > summary { display: inline-flex; align-items: center; gap: 0.45rem;
  cursor: pointer; list-style: none; padding: 0.4rem 0.85rem; border-radius: 999px;
  background: var(--panel-2); border: 1px solid var(--border-2); color: var(--text);
  font-size: 0.82rem; font-weight: 600; transition: border-color .15s, background .15s; }
.finder-sub > summary::-webkit-details-marker { display: none; }
.finder-sub > summary::before { content: "\25B8"; flex: none; color: var(--accent);
  font-size: 0.72rem; transition: transform .15s; }
.finder-sub[open] > summary::before { transform: rotate(90deg); }
.finder-sub > summary:hover { border-color: var(--accent); background: rgba(255,92,73,.08); }
.finder-sub-body { margin-top: 0.55rem; }

/* Kanal-Teil deutlich vom Video-Teil abgesetzt */
.finder-channel-block { margin-top: 0.9rem; padding-top: 0.8rem; border-top: 1px solid var(--border); }
.finder-channel-block .finder-channel { margin-top: 0; }
.finder-desc { white-space: pre-wrap; max-height: 220px; overflow-y: auto; line-height: 1.6;
  font-size: 0.88rem; }
.finder-channel-info { display: flex; gap: 0.7rem; align-items: flex-start; }
.finder-ch-avatar { width: 44px; height: 44px; border-radius: 50%; flex: none; object-fit: cover; }
.finder-ch-name { font-weight: 600; }

.finder-actions { display: flex; flex-wrap: nowrap; align-items: stretch; gap: 0.5rem; margin-top: 0.7rem; }
.finder-actions form { margin: 0; display: flex; flex: 1 1 0; min-width: 0; }
.finder-actions form button { width: 100%; height: 100%; }
/* Phone: alle Finder-Aktionen untereinander, volle Breite. Hauptaktionen
   (oben/unten) wirken etwas kraeftiger, die optionale Mitte (Add to project)
   dezenter. */
@media (max-width: 640px) {
  .finder-actions { flex-wrap: wrap; gap: 0.45rem; }
  .finder-actions form, .finder-actions > .finder-inlib { flex-basis: 100%; }
  .finder-actions .finder-act-preview button,
  .finder-actions .finder-act-add button {
    padding: 0.7rem 1rem; font-size: 0.95rem;
  }
  .finder-actions .finder-act-proj button {
    padding: 0.45rem 0.9rem; font-size: 0.85rem; opacity: 0.92;
  }
}
.finder-actions > .finder-inlib { flex: 1 1 0; min-width: 0; display: inline-flex;
  align-items: center; justify-content: center; text-align: center; }
/* Inline-Bestaetigung nach 'Add to library' (ersetzt die Aktionszeile) */
.finder-added { margin: 0.9rem 0 0.6rem; padding: 0.7rem 0.9rem; border: 1px solid var(--err);
  border-radius: 9px; display: flex; flex-wrap: wrap; gap: 0.35rem 0.5rem; }
.finder-added .msg-ok { flex-basis: 100%; }
.finder-added-line { flex-basis: 100%; }
.finder-open-link { font-size: 0.85rem; font-weight: 600; }
.finder-added-hint { color: var(--muted); font-size: 0.8rem; }
.msg-ok { color: var(--ok); font-weight: 600; }
.msg-warn { color: var(--err); }
/* Icon-Abstand in Buttons (Play-Dreieck, Herz) */
.btn-ico { margin-right: 0.45em; }
@media (max-width: 640px) { .hide-narrow { display: none; } }
/* Einheitlicher "Vorgang laeuft"-Kasten (gruen, mit Spinner), nur waehrend des
   HTMX-Requests sichtbar. Genutzt z.B. beim Erzeugen des Audio-Briefings. */
.work-box { display: none; align-items: center; gap: 0.55rem; margin-top: 0.7rem;
  padding: 0.7rem 0.9rem; border: 1px solid rgba(52,211,153,.35); border-radius: 9px;
  background: rgba(52,211,153,.08); color: var(--text); font-size: 0.88rem; }
.audio-chooser.htmx-request .work-box { display: flex; }
.inline-msg { margin: 0.5rem 0 0; font-size: 0.88rem; }
.inline-msg:empty { display: none; }
.finder-sum-wait { display: block; flex-basis: 100%; color: var(--muted); font-size: 0.82rem; margin-top: 0.2rem; }

.finder-preview { margin-top: 0.7rem; }
.finder-preview:empty { display: none; }
.finder-prev-card { padding: 0.8rem 0.9rem; background: var(--bg-2);
  border: 1px solid var(--border); border-left: 3px solid var(--accent); border-radius: var(--radius-sm); }
.finder-prev-label { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--muted-2); margin-bottom: 0.35rem; }
.finder-prev-text { margin: 0; line-height: 1.6; text-wrap: pretty; }
.finder-prev-card.collapse > summary.collapse-head h3 { margin: 0; }

.finder-foot { margin-top: 1.4rem; text-align: center; }
.finder-foot p { text-wrap: balance; max-width: 540px; margin: 0 auto 0.8rem; }

@media (max-width: 620px) {
  .finder-card { padding: 0.65rem; }
  .finder-head { gap: 0.5rem; }
  .finder-thumb { width: 104px; }
  .finder-title { font-size: 0.95rem; }
  .finder-player-wrap { position: static; }
}

/* --- Projects ---------------------------------------------------------- */

/* Projects-Tab in den lib-tabs ist KEIN Filter, sondern Sprung zu einer
   anderen Seite. Eigene Pille mit Akzent-Rahmen + Pfeil, damit der Unterschied
   zu den Filter-Pillen sofort sichtbar ist (frueher: einseitige Trennlinie,
   die sah verloren aus). */
.lib-tab-projects { margin-left: 0.6rem; color: var(--accent);
  border: 1px solid rgba(255,92,73,.55); background: rgba(255,92,73,.06); }
.lib-tab-projects:hover { background: rgba(255,92,73,.14); color: var(--accent); }
.lib-tab-projects::before { content: "\2192  "; opacity: 0.85; }
@media (max-width: 640px) {
  .lib-tab-projects { margin-left: 0; }
}

.project-intro p { text-wrap: pretty; line-height: 1.6; margin: 0 0 0.7rem; }
.project-intro p:last-child { margin-bottom: 0; }
.proj-list-head { margin-top: 1.6rem; font-size: 1.1rem; }

/* "summary ready"-Badge in dezentem Gruen statt Akzent-Rot (sah wie ein
   Alarm aus). Selber Farbton wie die "Ready"-Pille bei Videos. */
.badge.badge-ready { background: rgba(52,211,153,.15); color: var(--ok);
  border: 1px solid rgba(52,211,153,.4); }

.project-list { list-style: none; padding: 0; margin: 1rem 0 0; display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 0.9rem; }
.project-card { position: relative; background: var(--bg-2);
  border: 1px solid var(--border); border-radius: var(--radius); padding: 0.95rem 1rem; }
.project-card:hover { border-color: var(--accent); }
.project-link { display: block; color: inherit; text-decoration: none; }
.project-name { font-weight: 600; font-size: 1.05rem; text-wrap: balance; }
.project-desc { margin-top: 0.25rem; text-wrap: pretty; display: -webkit-box;
  -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.project-meta { display: flex; flex-wrap: wrap; gap: 0.5rem 0.8rem; margin-top: 0.55rem;
  align-items: center; }
.project-del { position: absolute; top: 0.55rem; right: 0.55rem; }

.project-desc-text { color: var(--muted); text-wrap: pretty; max-width: 720px;
  margin: 0.35rem 0 0.6rem; }

/* Kicker ueber dem Project-Titel ("Project summary"). Etwas groesser als
   .muted .small (wirkte sonst gequetscht direkt unter "← Projects") und
   mit klarem Abstand zum Back-Link. */
.project-kicker { margin: 1.1rem 0 0.3rem; color: var(--muted);
  font-size: 0.88rem; font-weight: 600; letter-spacing: 0.04em;
  text-transform: uppercase; }

/* Project-Quellen-Liste nutzt das gleiche .video-list-Geruest wie die
   Library, aber im Share/Detail brauchen wir Title, Channel/Watch-on-YouTube
   und Datum-/Views-Zeile sauber untereinander. Daher hier explizit column
   statt der voreingestellten flex-row, sonst rutscht .video-meta in eine
   schmale Spalte rechts und ist visuell kaum sichtbar. */
.project-sources li { flex-direction: column; align-items: stretch; gap: 0.35rem; }
.project-sources .video-meta { margin: 0; }
.project-sources .row-meta { display: flex; flex-wrap: wrap;
  gap: 0.15rem 0.5rem; align-items: center; }
.project-sources .row-meta a { color: inherit; text-decoration: none; }
.project-sources .row-meta a:hover { color: var(--accent); text-decoration: underline; }

.src-label { display: inline-block; padding: 0.05rem 0.45rem; margin-right: 0.4rem;
  font-size: 0.72rem; font-weight: 700; letter-spacing: 0.04em;
  background: var(--accent); color: #0a0b0e; border-radius: 999px;
  vertical-align: middle; position: relative; top: -1px; }
.src-tag { font-size: 0.78rem; color: var(--muted); margin-left: 0.4rem; }

/* WICHTIG: .prose erbt sonst 'white-space: pre-wrap', dann zaehlen die
   Einrueckungen/Newlines des Jinja-Loops als sichtbarer Leerraum (riesige
   Luecken zwischen H3 und Absatz). Hier brauchen wir normales Block-Layout. */
.project-long { white-space: normal; }
.project-long.is-article h3 { margin: 1.2rem 0 0.35rem; font-size: 1.1rem;
  line-height: 1.3; color: var(--text); text-wrap: balance; }
.project-long.is-article h3:first-child { margin-top: 0; }
.project-long.is-article p { margin: 0 0 0.6rem; line-height: 1.6; }
.project-long.is-article h3 + p { margin-top: 0; }
.project-long.is-linear p { margin: 0 0 0.6rem; line-height: 1.6; }

/* Kleiner Hilfstext direkt unter den Container-Ueberschriften:
   erklaert was [V1]/[V2] bedeutet. */
.src-help { margin: -0.1rem 0 0.6rem; font-size: 0.78rem; line-height: 1.4; }
.src-help a { color: var(--accent); }
.format-hint { margin: 0.5rem 0 0.2rem; line-height: 1.45; }
.proj-desc-label { display: block; margin: 0 0 0.3rem; }
#proj-desc { margin-bottom: 0.7rem; }

/* Klickbare Meta-Werte im Video-/Project-Header (Style, Format) zeigen auf
   die Rebuild-Section. Dezent unterstrichen, gleiche Farbe wie der Rest der
   Meta-Zeile, beim Hover Brand-Rot. */
.video-stats .meta-link { color: inherit; text-decoration: underline;
  text-decoration-color: rgba(255,255,255,0.25); text-underline-offset: 2px; }
.video-stats .meta-link:hover { color: var(--accent);
  text-decoration-color: var(--accent); }

/* Outdated-Banner (Sources changed / Shared copy out of date): warmer
   gelber Hinweis, klar erkennbar aber kein Alarm. Link in Brand-Rot.
   Gross genug Abstand zum naechsten Text drunter (z.B. "shared page is
   frozen..."), damit die zwei Bloecke sich nicht beruehren. */
.outdated-banner { border-color: rgba(251,191,36,.55);
  background: rgba(251,191,36,.10); margin: 1rem 0 1.2rem; }
.outdated-banner .outdated-link { color: var(--accent); font-weight: 600;
  text-decoration: underline; }
.outdated-banner .outdated-link:hover { color: var(--accent-2); }

/* Outdated-Banner an Stelle der "ready"-Karte: groesser und prominenter,
   damit der User sofort sieht, dass das Project Summary nicht aktuell ist. */
.outdated-banner.outdated-major { padding: 1.1rem 1.25rem; }
.outdated-banner.outdated-major strong { font-size: 1.1rem; display: block;
  margin-bottom: 0.35rem; }
.outdated-banner.outdated-major p { margin: 0.25rem 0; text-wrap: pretty; }
.outdated-banner.outdated-major .btn-primary,
.outdated-banner.outdated-major .outdated-cta { display: inline-block;
  margin: 0.9rem 0; }

/* "Created with the X style. Change here." Unterzeile in der ready-Karte.
   Klar abgesetzt zur darunter folgenden Cockpit-Quick-Nav, damit der Text
   nicht direkt an den ersten Sprung-Button klebt. Der Sprung-Link ist in
   Brand-Rot (User-Praeferenz). */
.summary-ready-style { margin: 0.6rem 0 1rem; padding: 0; line-height: 1.55;
  text-wrap: pretty; max-width: 720px; }
.summary-ready-style a { color: var(--accent); }
.summary-ready-style a:hover { color: var(--accent-2); }

/* "Add to project"-Menue wird inline in den .proj-msg-Slot der Zeile geladen
   (kein floating Popover mehr, vermeidet Off-Screen-Bug auf iPad). */
.add-proj-menu { background: var(--bg-2); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 0.7rem; margin-top: 0.6rem; }
.add-proj-head { display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 0.5rem; }
.add-proj-list { list-style: none; padding: 0; margin: 0 0 0.5rem; display: flex;
  flex-direction: column; gap: 0.3rem; max-height: 320px; overflow-y: auto; }
.add-proj-row { display: flex; align-items: center; justify-content: space-between;
  gap: 0.6rem; width: 100%; padding: 0.5rem 0.7rem; background: var(--bg);
  border: 1px solid var(--border); border-radius: var(--radius-sm); color: var(--text);
  font: inherit; cursor: pointer; text-align: left; }
.add-proj-row:hover:not(.add-proj-already):not(.add-proj-disabled) { border-color: var(--accent); }
.add-proj-already, .add-proj-disabled { opacity: 0.6; cursor: default; }
.add-proj-name { font-weight: 500; flex: 1; min-width: 0; text-wrap: pretty; }
.add-proj-new { margin-top: 0.4rem; }
.add-proj-new summary { cursor: pointer; padding: 0.35rem 0; color: var(--accent);
  font-weight: 500; font-size: 0.92rem; }
.add-proj-new form { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.4rem; }
.add-proj-new input[type=text] { flex: 1; min-width: 140px; padding: 0.45rem 0.6rem;
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  background: var(--bg); color: var(--text); font: inherit; }
.add-proj-close { font-size: 0.85rem; }


/* Inline-Bestaetigung nach "Add to project" / "Create & add" (gleicher
   gruener Stil wie die "wird verarbeitet"-Kaesten und der Finder-Added-Block,
   damit die Sprache der App konsistent bleibt). Sitzt am Ende der Library-Zeile
   bzw. unter den Aktionen der Video-Detail-Seite. */
.proj-msg { flex-basis: 100%; }
.proj-msg:empty { display: none; }
.proj-msg-box { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem 0.55rem;
  margin: 0.7rem 0 0.2rem; padding: 0.7rem 0.9rem;
  border: 1px solid rgba(52,211,153,.35); border-radius: 9px;
  background: rgba(52,211,153,.08); color: var(--text); font-size: 0.92rem; }
.proj-msg-box.is-error { border-color: var(--err); background: rgba(239,68,68,.08); }
.proj-msg-box .finder-open-link { font-size: 0.88rem; }

/* Gruener "wird verarbeitet"-Kasten, gleiches Vokabular wie .work-box, aber
   immer sichtbar (kein HTMX-Indicator). Mit Spinner links + Textblock rechts. */
.proc-box { display: flex; align-items: flex-start; gap: 0.7rem;
  margin: 1rem 0; padding: 0.95rem 1.05rem;
  border: 1px solid rgba(52,211,153,.35); border-radius: 11px;
  background: rgba(52,211,153,.08); color: var(--text);
  /* Wenn man via #proc-box-Anker hierher springt, Topbar nicht ueberlappen */
  scroll-margin-top: calc(var(--topbar-h, 80px) + 12px); }

/* Diese Sonderregel ist jetzt in die zentrale .card/.collapse-Regel oben
   eingegangen (gleiche Selektoren + Variable + Buffer), daher hier leer. */
.proc-box > .spinner { margin-top: 0.3rem; flex-shrink: 0; }
.proc-box strong { display: block; margin-bottom: 0.15rem; }
.proc-box p { margin: 0.15rem 0 0; }

/* Erfolg: das Gegenstueck zu .proc-box, gleich kraeftig, gleiche Position,
   aber kraeftiger gruener Akzent + grosser CTA-Button. Bekommt id="proc-box",
   sodass der HTMX-Swap es genau dort einfuegt, wo vorher der Wartebildschirm
   stand und der Anker-Sprung passt. */
.ready-box { display: flex; align-items: center; gap: 0.9rem;
  margin: 1rem 0; padding: 1.05rem 1.15rem;
  border: 1px solid var(--ok); border-radius: 11px;
  background: rgba(52,211,153,.14); color: var(--text);
  scroll-margin-top: calc(var(--topbar-h, 80px) + 12px); }
.ready-tick { flex-shrink: 0; width: 32px; height: 32px; border-radius: 999px;
  background: var(--ok); color: #0a0b0e; font-weight: 700; font-size: 1.1rem;
  display: inline-flex; align-items: center; justify-content: center; }
.ready-text { flex: 1; min-width: 0; }
.ready-text strong { display: block; font-size: 1.05rem; margin-bottom: 0.2rem; }
.ready-text p { margin: 0; }
.ready-box .btn-primary { flex-shrink: 0; }
@media (max-width: 560px) {
  .ready-box { flex-wrap: wrap; }
  .ready-box .btn-primary { width: 100%; text-align: center; }
}


/* --- Evidence search (optionaler Finder-Modus) -------------------------------
   Versteckter Toggle auf dem Wort "strongest": neutral wie der Hinweistext,
   aktiv = fett + unterstrichen. Kein Link-Look. */
.ev-toggle { cursor: pointer; }
.ev-toggle.ev-on { font-weight: 700; text-decoration: underline; color: var(--text); }

/* Score-Badge im Evidence-Modus: gleicher Chip wie der Match-Badge, aber klickbar. */
.finder-score-ev { cursor: pointer; border: 1px solid rgba(255,184,107,.4);
  display: inline-flex; align-items: center; gap: 0.4rem; }
.finder-ev-cat { font-size: 0.62rem; text-transform: uppercase; letter-spacing: 0.04em;
  color: var(--muted-2); border-left: 1px solid rgba(255,184,107,.4); padding-left: 0.4rem; }
.finder-score-noev { color: var(--muted-2); background: var(--panel-2);
  border: 1px solid var(--border-2); cursor: default; }

/* Aufklappbares Erklaer-Panel (Beta-Aufschluesselung des Scores). */
.finder-ev-panel { margin: 0.4rem 0 0.7rem; padding: 0.8rem 0.9rem; border-radius: 12px;
  background: var(--panel-2); border: 1px solid var(--border-2); }
.finder-ev-beta { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.04em;
  color: var(--accent-2); margin-bottom: 0.4rem; }
.finder-ev-intro { font-size: 0.86rem; color: var(--muted); margin: 0 0 0.7rem;
  text-wrap: pretty; }
.finder-ev-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.3rem 1.2rem; margin-bottom: 0.7rem; }
.finder-ev-grid > div { display: flex; justify-content: space-between; gap: 0.6rem;
  font-size: 0.86rem; border-bottom: 1px solid var(--border); padding: 0.2rem 0; }
.finder-ev-k { color: var(--muted); }
.finder-ev-v { font-weight: 600; }
.finder-ev-sources { margin-bottom: 0.6rem; }
.finder-ev-sources ul { margin: 0.35rem 0 0; padding-left: 0; list-style: none; }
.finder-ev-sources li { font-size: 0.86rem; margin-bottom: 0.25rem; display: flex;
  align-items: baseline; gap: 0.4rem; flex-wrap: wrap; }
.finder-ev-class { display: inline-flex; align-items: center; justify-content: center;
  width: 1.25rem; height: 1.25rem; border-radius: 5px; font-size: 0.72rem; font-weight: 700;
  background: var(--accent); color: #fff; flex: none; }
.finder-ev-reason { font-size: 0.86rem; color: var(--text); margin: 0 0 0.7rem;
  text-wrap: pretty; }
.finder-ev-summary { font-size: 0.9rem; line-height: 1.5; margin: 0.2rem 0 0.6rem;
  text-wrap: pretty; }
.finder-ev-progress { margin-top: 0.6rem; }

@media (max-width: 560px) {
  .finder-ev-grid { grid-template-columns: 1fr; }
}