/* ============================================================
   Research Feed — Econova-inspired
   Clean, professional dashboard styling.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Newsreader:ital,opsz,wght@0,6..72,400;0,6..72,500;0,6..72,600;1,6..72,400;1,6..72,500&family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap');

:root {
  /* Surfaces */
  --background:        #FAFAF7;
  --surface:           #FFFFFF;
  --surface-sunken:    #F4F4EE;

  /* Borders */
  --border:            #E8E8E0;
  --border-strong:     #D4D4C8;

  /* Ink (text) */
  --ink:               #0E1B2C;
  --ink-muted:         #4A5868;
  --ink-subtle:        #8A95A5;

  /* Brand Blue */
  --brand-blue:        #3B82F6;
  --brand-blue-deep:   #2563EB;
  --brand-blue-soft:   #DBEAFE;

  /* Accent Lime */
  --accent-lime:       #BEF264;
  --accent-lime-deep:  #84CC16;
  --accent-lime-soft:  #ECFCCB;

  /* Moss */
  --moss:              #4F6B3A;
  --moss-deep:         #3A5128;
  --moss-soft:         #E4ECD9;

  /* Semantic */
  --danger:            #EF4444;
  --warning:           #F59E0B;
  --success:           #10B981;

  /* Fonts */
  --font-display: 'Newsreader', Georgia, serif;
  --font-body:    'Inter', system-ui, -apple-system, sans-serif;
  --font-mono:    'JetBrains Mono', 'SF Mono', Menlo, monospace;

  /* Sizing */
  --sidebar-w: 232px;
  --content-max: 1080px;

  /* Radii */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;

  /* Shadows */
  --shadow-xs: 0 1px 2px rgba(14, 27, 44, 0.04);
  --shadow-sm: 0 2px 6px rgba(14, 27, 44, 0.06);
  --shadow-md: 0 6px 20px rgba(14, 27, 44, 0.08);

  /* Motion */
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --dur:  180ms;
}

/* ---------- Reset / Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
/* <abbr> traegt ueberall den ausgeschriebenen Namen im title (Bereichs-
   Kuerzel wie STRAT/OEBWL, siehe area_chips.html) — kein Browser-Default-
   Dotted-Underline, stattdessen nur der Hover-Cursor als Hinweis. */
abbr[title] { text-decoration: none; cursor: help; }

/* Scrollbar-Gutter: reserviert IMMER Platz fuer die vertikale Scrollbar —
   auch auf kurzen Seiten ohne Scroll. Ohne das verschiebt sich der
   zentrierte .app-content (margin: 0 auto) um die Scrollbar-Breite (~15px
   auf Windows) nach rechts, sobald eine Seite zu kurz zum Scrollen ist.
   Effekt: Notizen/Meine-Filter/Text-Analyse/Preprint-Radar/Agent-Formulare
   sassen ein paar px weiter rechts als Dashboard/Schnellsuche/Lesezeichen
   (die wegen langer Listen immer eine Scrollbar haben). `stable` macht die
   horizontale Content-Position seiten-uebergreifend pixel-identisch. */
html { scrollbar-gutter: stable; }
html, body {
  background: var(--background);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.55;
  font-feature-settings: "cv11", "ss01", "ss03";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

::selection { background: var(--accent-lime); color: var(--ink); }

/* SVG safety */
svg:not([width]):not([height]) { width: 1em; height: 1em; }

/* ---------- Typography ---------- */
.font-display { font-family: var(--font-display); font-optical-sizing: auto; }
.font-body    { font-family: var(--font-body); }
.font-mono    { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }

.serif-italic {
  font-family: var(--font-display); font-style: italic;
  font-weight: 400; font-optical-sizing: auto;
}

.caption {
  font-size: 10.5px; font-weight: 600;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--ink-subtle);
}

/* Utility: einzeiliger Text mit Ellipsis — ueberall einsetzbar wo
   Overflow abgeschnitten werden soll (Titel, Labels, Pfade). */
.u-ellipsis {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ============================================================
   LAYOUT — fixed sidebar + offset main
   ============================================================ */

.sidebar-fixed {
  position: fixed;
  top: 0; left: 0; bottom: 0;
  width: var(--sidebar-w);
  background: var(--surface-sunken);
  border-right: 1px solid var(--border);
  /* Top-Padding reduziert von 18 -> 12 — spart Vertikal-Platz auf
     Laptop-Viewports (768p) ohne dass die Brand zu eng am Rand sitzt. */
  padding: 12px 14px 10px;
  display: flex;
  flex-direction: column;
  z-index: 10;
  overflow-y: auto;
}

.main-with-sidebar {
  margin-left: var(--sidebar-w);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.app-content {
  flex: 1;
  width: 100%;
  max-width: var(--content-max);
  padding: 28px 36px 40px;
  margin: 0 auto;
}

.app-footer {
  padding: 18px 36px;
  color: var(--ink-subtle);
  font-size: 11.5px;
  border-top: 1px solid var(--border);
  display: flex;
  align-items: center;
  gap: 8px;
}
.app-footer .brand-mark {
  opacity: 0.6;
}
/* Impressum + Datenschutz-Links im App-Footer (AP-3) */
.app-footer__legal {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 11.5px;
  color: var(--ink-subtle);
}
.app-footer__legal a {
  color: var(--ink-subtle);
  text-decoration: none;
  transition: color var(--dur) var(--ease);
}
.app-footer__legal a:hover { color: var(--ink-muted); }

/* ---------- Sidebar internals ---------- */
.sidebar-fixed .brand {
  display: flex; align-items: center; gap: 10px;
  /* Top/Bottom-Padding reduziert (10/18 -> 4/12) — spart ~12px
     ohne dass Brand zu eng am Rand sitzt. */
  padding: 4px 4px 12px;
  margin-bottom: 8px;
  border-bottom: 1px solid var(--border);
  text-decoration: none;
  color: var(--ink);
  transition: transform 200ms var(--ease);
}
.sidebar-fixed .brand:hover {
  transform: translateY(-1px);
}
/* Mark — 52px ist ein guter Kompromiss zwischen Sichtbarkeit und
   Vertikal-Platz. Frueher 60px, jetzt 52px spart ~8px. */
.sidebar-fixed .brand-mark {
  width: 52px; height: 52px;
  flex-shrink: 0;
  filter: drop-shadow(0 1px 2px rgba(14, 27, 44, 0.10));
  transition: transform 280ms var(--ease);
}
.sidebar-fixed .brand:hover .brand-mark {
  transform: rotate(15deg);
}
.sidebar-fixed .brand-lockup {
  display: flex; flex-direction: column;
  min-width: 0;
  line-height: 1.0;
}
.sidebar-fixed .brand-name {
  font-family: var(--font-display);
  font-size: 20px; font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.sidebar-fixed .brand-tagline {
  font-family: var(--font-body);
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--ink-subtle);
  margin-top: 6px;
}

/* ---------- Wiederverwendbare Brand-Mark-Varianten ---------- */
/* Watermark — subtil, fuer Hero-Hintergrund-Akzente */
.brand-mark.brand-mark--watermark {
  position: absolute;
  opacity: 0.10;
  pointer-events: none;
}
/* Inline-Mark fuer Page-Heroes — LINKS vom Title-Block, kraeftig sichtbar
   (volle Opazitaet wie die Sidebar-Marke). */
.brand-mark.brand-mark--hero-accent {
  width: 64px; height: 64px;
  flex-shrink: 0;
  filter: drop-shadow(0 1px 2px rgba(14, 27, 44, 0.10));
}
/* Mini-Mark fuer Footer / Toast / Kompakt-Slots */
.brand-mark.brand-mark--mini {
  width: 22px; height: 22px;
  flex-shrink: 0;
  vertical-align: middle;
}
/* Modal-Header / Loading-Overlay (mittlere Groesse) */
.brand-mark.brand-mark--modal {
  width: 52px; height: 52px;
  filter: drop-shadow(0 1px 2px rgba(14, 27, 44, 0.06));
}
/* GROSSES zentriertes Logo fuer Dashboard + Splash-Stellen */
.brand-mark.brand-mark--hero-large {
  width: 84px; height: 84px;
  filter: drop-shadow(0 2px 4px rgba(14, 27, 44, 0.12));
}

/* nav-stack: Wrapper um alle Gruppen, nimmt den vertikalen Platz zwischen
   Brand und Footer ein. Jede nav-section ist eine logische Gruppe. */
.sidebar-fixed .nav-stack {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
  /* Phase 2: User-Footer (Eingeloggt-als + Logout) kommt unten dazu —
     bei kleineren Viewport-Hoehen oder vielen Nav-Items soll der Nav-Bereich
     scrollen, der Footer bleibt fixiert am Boden. */
  overflow-y: auto;
}
.sidebar-fixed .nav-section { display: block; }
/* Section-margin von 10 -> 6px — Gruppen bleiben optisch getrennt
   (group-label dient als Separator), Vertikal-Platz wird gespart. */
.sidebar-fixed .nav-section + .nav-section { margin-top: 6px; }
.sidebar-fixed .group-label {
  font-size: 10px; font-weight: 600; color: var(--ink-subtle);
  text-transform: uppercase; letter-spacing: 0.12em;
  /* Padding kompakter: 10/6 -> 6/4 — spart pro Gruppe ~6px. */
  padding: 6px 8px 4px;
}
/* Erste Gruppe sitzt direkt unter dem Brand — kein doppelter Top-Abstand */
.sidebar-fixed .nav-section:first-child .group-label { padding-top: 2px; }
.sidebar-fixed .nav-item {
  position: relative;
  display: flex; align-items: center; gap: 9px;
  /* Padding 7/9 -> 5/9 — Items bleiben touch-friendly (~28px statt 32px)
     aber sparen pro Item 4px = bei 10 Items ~40px Total. */
  padding: 5px 9px;
  border-radius: 6px;
  font-size: 13px; font-weight: 500;
  color: var(--ink-muted);
  text-decoration: none;
  margin: 1px 0;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.sidebar-fixed .nav-item svg { color: var(--ink-subtle); flex-shrink: 0; }
.sidebar-fixed .nav-item:hover { background: rgba(14, 27, 44, 0.045); color: var(--ink); }
.sidebar-fixed .nav-item:hover svg { color: var(--ink-muted); }
.sidebar-fixed .nav-item.active {
  background: var(--surface);
  color: var(--ink);
  box-shadow: var(--shadow-xs);
}
.sidebar-fixed .nav-item.active svg { color: var(--brand-blue-deep); }
.sidebar-fixed .nav-item.active::before {
  /* Active-Indikator: angepasst an kompaktere nav-items (28px statt 32px).
     top/bottom 6px hält die kleine Lime-Linie zentriert ohne zu wirken
     als wäre sie "voll-hoch". */
  content: ''; position: absolute; left: -3px; top: 6px; bottom: 6px;
  width: 2px; background: var(--accent-lime-deep); border-radius: 2px;
}

/* ---------- Premium-Feature-Gating (Phase 13) ---------------------------
   .nav-item--locked: Premium-Feature im Menue, aber User hat keinen
   Zugang. Sieht den Eintrag mit Schloss-Icon + "Premium"-Pill, kann
   aber nicht draufklicken. Visuell gedimmt, cursor: not-allowed, kein
   Hover-Lime. Server-Side-Depends sorgt fuer den eigentlichen 403-Schutz. */
.sidebar-fixed .nav-item--locked {
  opacity: 0.62;
  cursor: not-allowed;
  user-select: none;
  /* Verhindern dass eventuelle Hover-Regeln aus nav-item-Standard greifen */
  background: transparent !important;
}
.sidebar-fixed .nav-item--locked:hover {
  background: transparent !important;
  color: var(--ink-muted) !important;
}
.sidebar-fixed .nav-item--locked svg {
  color: var(--ink-subtle);
}
/* Premium-Pill rechts neben dem Text — Lime-Akzent, klein, prominent
   genug damit's auffaellt, aber nicht zu schreiend. */
.sidebar-fixed .nav-item .nav-premium-pill,
.mob-more-panel__link .nav-premium-pill {
  margin-left: auto;
  padding: 1px 6px;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--moss-deep);
  background: var(--accent-lime-soft);
  border: 1px solid var(--accent-lime-deep);
  border-radius: 999px;
  line-height: 1.4;
  flex-shrink: 0;
  white-space: nowrap;
}
/* Mobile-Locked-Link analog zur Sidebar-Variante: gedimmt + not-allowed +
   kein Hover-Effekt. */
.mob-more-panel__link--locked {
  opacity: 0.62;
  cursor: not-allowed;
  user-select: none;
}
.mob-more-panel__link--locked:hover,
.mob-more-panel__link--locked:active {
  background: transparent !important;
}
.mob-more-panel__link--locked .mob-more-panel__link-arrow {
  display: none;
}

.sidebar-fixed .sidebar-foot {
  border-top: 1px solid var(--border);
  /* Padding 12/4 -> 8/2 — spart 6px im Footer. */
  padding: 8px 8px 2px;
  margin-top: 6px;
  /* Footer darf nicht schrumpfen — `.nav-stack` scrollt stattdessen.
     Phase 2: User-Block kostet ein paar extra Zeilen. */
  flex-shrink: 0;
}
.sidebar-fixed .foot-row {
  display: flex; align-items: center; gap: 6px;
  font-size: 11.5px; color: var(--ink-muted);
  margin-bottom: 4px;
}
.sidebar-fixed .foot-row--sub {
  justify-content: space-between;
  color: var(--ink-subtle);
  font-size: 10.5px;
}
/* Paper- und Preprint-Count untereinander statt nebeneinander.
   Der lime-dot bleibt links, vertikal zentriert zu den beiden Zeilen. */
.sidebar-fixed .foot-row--counts { align-items: center; }
.foot-counts {
  display: inline-flex;
  flex-direction: column;
  gap: 1px;
  line-height: 1.4;
}

.lime-dot {
  display: inline-block; width: 7px; height: 7px; border-radius: 50%;
  background: var(--accent-lime-deep);
  flex-shrink: 0;
  vertical-align: middle;
  margin-right: 5px;
}
/* In flex-Containern (z.B. sidebar foot-row) wird der margin-right ueberfluessig
   weil der Container bereits gap setzt. Zuruecknehmen damit kein 11px-Doppel. */
.sidebar-fixed .foot-row .lime-dot {
  margin-right: 0;
  margin-right: 5px;
}

/* ============================================================
   PAGE HERO
   ============================================================ */
.page-hero { margin-bottom: 22px; }
/* Branded-Variante: Brand-Mark LINKS vom Title-Block, absolute
   positioniert damit die anderen Hero-Kinder (Caption, Title, Lead)
   ihren normalen Block-Flow behalten. Padding-left reserviert Platz. */
.page-hero--branded {
  position: relative;
  padding-left: 80px;
  min-height: 64px;
}
.page-hero--branded > .brand-mark {
  position: absolute;
  left: 0;
  top: 4px;
}
.page-hero h1, h1.page-title {
  font-family: var(--font-display);
  font-size: 28px; line-height: 1.15;
  letter-spacing: -0.015em; font-weight: 400;
  color: var(--ink); font-optical-sizing: auto;
  margin: 0;
}

/* Trends/Preprints-Tab-Intro — einheitlich mit page-title (font-weight 500,
   nicht fett). Verhindert dass Browser-Default <h2>=bold greift. */
.trends-tab-intro {
  margin-bottom: 20px;
}
.trends-tab-intro__title {
  font-family: var(--font-display);
  font-size: 22px; line-height: 1.2;
  letter-spacing: -0.01em; font-weight: 400;
  color: var(--ink);
  margin: 0 0 4px;
}
.trends-tab-intro__sub {
  color: var(--ink-muted);
  font-size: 13px;
  margin: 0;
  max-width: 64ch;
}
.page-hero p.lead {
  color: var(--ink-muted);
  font-size: 13px;
  margin: 6px 0 0;
  max-width: 60ch;
}

/* ---------- Page-Header: einheitlicher Seiten-Header ----------
   Wrapper um Zurueck-Button + page-hero. Sorgt dafuer, dass der
   Zurueck-Button immer oberhalb des Heroes sitzt und keinen
   horizontalen Versatz einfuehrt. */
.page-header {
  margin-bottom: 0;
}
.page-header .page-hero {
  /* Der page-hero bringt sein eigenes margin-bottom mit — wir
     heben das nicht auf, damit der Abstand zum Seiteninhalt bleibt. */
}
/* Topbar: Zurueck-Link (links) + Tutorial-Button (rechts) auf gleicher Hoehe.
   Wenn nur einer da ist (oder keiner), sitzt der Hero trotzdem auf
   identischer Y-Position wie auf Seiten MIT beiden. min-height entspricht
   der echten Hoehe des Tutorial-Buttons (padding 4 + border 1 + ~14px text
   + padding 4 = 28px). */
.page-header__topbar {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 10px;
  min-height: 28px;
}
.page-header__back {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  font-weight: 500;
  color: var(--ink-muted);
  text-decoration: none;
  transition: color var(--dur) var(--ease);
}
.page-header__back:hover {
  color: var(--ink);
}
/* Tutorial-Button — dezenter Pill-Style rechts neben dem Zurueck-Link */
.page-header__tutorial {
  display: inline-flex; align-items: center; gap: 5px;
  margin-left: auto;
  padding: 4px 10px;
  border: 1px solid var(--border-strong);
  background: var(--surface);
  color: var(--ink-muted);
  border-radius: 999px;
  font: inherit;
  font-size: 12px; font-weight: 500;
  cursor: pointer;
  transition: all var(--dur) var(--ease);
}
.page-header__tutorial:hover {
  border-color: var(--brand-blue);
  color: var(--brand-blue-deep);
  background: var(--brand-blue-soft);
}
.page-header__caption {
  margin-bottom: 3px;
}

/* ============================================================
   COMPONENTS
   ============================================================ */

/* Cards */
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  transition: box-shadow var(--dur) var(--ease),
              border-color var(--dur) var(--ease);
}
.card:hover { box-shadow: var(--shadow-xs); border-color: var(--border-strong); }
.card-static { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md); }

/* Buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 6px;
  height: 34px; padding: 0 14px;
  border-radius: var(--radius-sm);
  font-family: var(--font-body); font-size: 13px; font-weight: 500;
  border: 1px solid transparent;
  cursor: pointer;
  transition: all var(--dur) var(--ease);
  text-decoration: none;
  white-space: nowrap;
  line-height: 1;
}
.btn-primary { background: var(--ink); color: white; }
.btn-primary:hover { background: #1a2940; color: white; }
.btn-secondary {
  background: var(--surface); color: var(--ink);
  border-color: var(--border-strong);
}
.btn-secondary:hover { border-color: var(--ink-muted); background: var(--surface-sunken); }
.btn-ghost { background: transparent; color: var(--ink-muted); }
.btn-ghost:hover { background: var(--surface-sunken); color: var(--ink); }
.btn-danger { background: transparent; color: var(--danger); }
.btn-danger:hover { background: rgba(239, 68, 68, 0.08); }
.btn-sm { height: 28px; padding: 0 10px; font-size: 12px; }

/* Generischer disabled-Zustand fuer <a class="btn">-Links (Buttons haben
   das native [disabled], Links nicht — z.B. der Digest-Export-Link ohne
   Paper zum Exportieren). */
.btn[aria-disabled="true"] {
  opacity: 0.45;
  pointer-events: none;
  cursor: not-allowed;
}

/* Touch-Target: Apple HIG / WCAG 2.5.5 — mindestens 44px Trefferflaeche
   auf Touch-Geraeten. height bleibt 28px (visuell), min-height 44px stellt
   sicher dass der Tap-Bereich gross genug ist. Desktop (pointer:fine) bleibt
   unveraendert bei 28px. */
@media (pointer: coarse) {
  .btn-sm { min-height: 44px; }
}

.btn .arrow { font-family: var(--font-display); font-style: italic; font-weight: 400; margin-left: 2px; }

/* Inputs */

/* iOS-Auto-Zoom-Schutz: font-size muss global >= 16px sein, damit
   Safari auf iOS nicht automatisch ranzoomt wenn ein Input fokussiert
   wird. Diese Basisregel gilt fuer ALLE Viewports; auf Desktop-Hover-
   Devices wird sie weiter unten auf den Design-Token-Wert (13px)
   zurueckgesetzt, sodass das visuelle Erscheinungsbild identisch bleibt. */
input, select, textarea { font-size: 16px; }

.input,
input[type="text"], input[type="email"], select, textarea {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  height: 36px;
  padding: 0 12px;
  font-family: var(--font-body); font-size: 13px;
  color: var(--ink);
  transition: border-color var(--dur), box-shadow var(--dur);
  font-feature-settings: "cv11", "ss01", "ss03";
  width: 100%;
}

/* Desktop-Override: Auf Geraeten mit Hover-Faehigkeit (echte Maeuse/Trackpads)
   die Eingabefelder auf 13px zuruecksetzen — identisch mit vorher.
   Auf Touch-only-Devices bleibt es bei der Basisregel (16px), was den
   iOS-Zoom verhindert. trends-picker__input und .trends-picker__item
   (14px in trends.css) werden auf Touch-Devices ebenfalls durch die
   @media (max-width:768px)-Regel (16px !important) abgedeckt. */
@media (hover: hover) and (pointer: fine) {
  input, select, textarea { font-size: 13px; }
}
textarea { height: auto; padding: 8px 12px; min-height: 80px; }
select[multiple] { height: auto; padding: 4px; }
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--brand-blue);
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.12);
}
input[type="checkbox"], input[type="radio"] {
  width: auto; height: auto;
  accent-color: var(--brand-blue-deep);
}

label { font-size: 13px; color: var(--ink); }

/* Badges */
.badge {
  display: inline-flex; align-items: center; gap: 3px;
  padding: 2px 7px;
  border-radius: 999px;
  font-size: 11px; font-weight: 500;
  letter-spacing: 0.01em;
  line-height: 1.45;
  white-space: nowrap;
}
.badge-blue   { background: var(--brand-blue-soft); color: var(--brand-blue-deep); }
.badge-lime   { background: var(--accent-lime-soft); color: #4A6B0E; }
.badge-moss   { background: var(--moss-soft); color: var(--moss-deep); }
.badge-neutral{ background: var(--surface-sunken); color: var(--ink-muted); border: 1px solid var(--border); }
.badge-amber  { background: rgba(245, 158, 11, 0.10); color: #9A6A00; }
.badge-red    { background: rgba(239, 68, 68, 0.08); color: #B91C1C; }
/* FT50 ist kein VHB-Rating — eigenes Premium-Label: dunkler Ink-Ton statt
   Farbe, Monospace + Letter-Spacing fuer einen "eigenes System"-Auftritt. */
.badge-ft50 {
  background: var(--ink);
  color: #FAFAF7;
  font-family: var(--font-mono);
  font-weight: 600;
  letter-spacing: 0.05em;
  border: 1px solid rgba(255, 255, 255, 0.14);
}

/* Tables */
table { width: 100%; border-collapse: collapse; font-size: 13px; }
thead th {
  font-family: var(--font-body); font-size: 11px; font-weight: 600;
  color: var(--ink-subtle); text-transform: uppercase; letter-spacing: 0.06em;
  text-align: left; padding: 8px 12px;
  border-bottom: 1px solid var(--border);
}
tbody tr { transition: background var(--dur); }
tbody tr:hover { background: var(--surface-sunken); }
td { padding: 9px 12px; border-bottom: 1px solid var(--border); }
table td, table th, .num, .tabular { font-variant-numeric: tabular-nums; }

/* ============================================================
   FILTER-CARD (Agent-Detail)
   ============================================================ */
.filter-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 0;
  /* KEIN overflow: hidden — sonst werden HTMX-Dropdowns (z.B. Author-
     Suggestions) am Card-Rand abgeschnitten. Border-Radius am Footer
     wird stattdessen explizit gesetzt. */
}
.filter-block {
  padding: 14px 16px;
  border-bottom: 1px solid var(--border);
  position: relative;  /* fuer ggf. absolute Suggestions-Dropdowns */
}
.filter-block:last-of-type { border-bottom: none; }

.filter-row {
  display: flex; flex-wrap: wrap;
  align-items: flex-start;
  gap: 22px 28px;
}
.filter-group {
  display: flex; flex-direction: column;
  gap: 6px;
  min-width: 0;
}
.filter-group .caption { font-size: 10px; }

.filter-actions {
  display: flex; gap: 8px;
  padding: 12px 16px;
  background: var(--surface-sunken);
  border-top: 1px solid var(--border);
  border-bottom-left-radius: var(--radius-md);
  border-bottom-right-radius: var(--radius-md);
}

/* Schnellsuche: Bereich/Rating/FT50/Journals sind nicht live (siehe
   search.html) — dieser Block traegt den dedizierten "Filter anwenden"-
   Button dafuer. Rechtsbuendig auf Desktop, volle Breite auf Mobile. */
.filter-block--apply {
  display: flex;
  justify-content: flex-end;
}
.btn-apply-filters { min-width: 200px; }
@media (max-width: 768px) {
  .filter-block--apply { justify-content: stretch; }
  .btn-apply-filters { width: 100%; height: 44px; font-size: 14px; }
}

/* ---------- Chips (Toggle-Pills für Bereich/Rating/Status) ---------- */
.chip-row {
  display: flex; flex-wrap: wrap;
  gap: 6px;
}
.chip {
  display: inline-flex; align-items: center;
  gap: 6px;
  padding: 5px 12px;
  border-radius: 999px;
  border: 1px solid var(--border-strong);
  background: var(--surface);
  font-size: 12.5px; font-weight: 500;
  color: var(--ink-muted);
  cursor: pointer;
  transition: all var(--dur) var(--ease);
  user-select: none;
  line-height: 1;
}
.chip input { position: absolute; opacity: 0; pointer-events: none; }
.chip:hover { border-color: var(--ink-muted); color: var(--ink); }
.chip:has(input:checked) {
  background: var(--ink);
  border-color: var(--ink);
  color: white;
}
.chip-mono { font-family: var(--font-mono); font-weight: 600; min-width: 36px; justify-content: center; }
.chip:has(input:checked).chip-mono { background: var(--brand-blue-deep); border-color: var(--brand-blue-deep); }

/* Kompakte Variante fuer schmale Spalten (info.html-Filter-Seitenleiste,
   220px) — alle 5 VHB-Ratings muessen zwingend in eine Zeile passen, siehe
   rating_chips.html compact=true. Nur ueber den Macro-Parameter aktiviert,
   alle anderen Chip-Reihen bleiben bei der normalen Groesse. */
.chip-row--tight { gap: 4px; flex-wrap: nowrap; }
.chip--tight { padding: 4px 7px; font-size: 11px; }
.chip-mono.chip--tight { min-width: 25px; }

/* Bereichs-Kuerzel (STRAT, RECH, BAFI, ...) — sichtbar nur der Code,
   Klartext-Name im title (<abbr>, siehe area_chips.html). Mono statt
   Fliesstext macht sofort klar: das ist ein Kuerzel, kein Wort. */
.area-code {
  font-family: var(--font-mono);
  font-weight: 600;
  letter-spacing: 0.02em;
}

/* FT50-Zusatzfilter (kein VHB-Rating): duenner Trennstrich davor grenzt die
   Pill visuell von der Rating-Liste ab — aktiver Zustand bleibt identisch
   zu den anderen Chips (siehe .chip:has(input:checked) oben). */
.chip-divider {
  width: 1px;
  align-self: stretch;
  min-height: 20px;
  background: var(--border-strong);
  margin: 0 2px;
}

/* ---------- FT50-Exklusivitaet (geteilt ueber alle Filter-Panels) ----------
   FT50 ist ein eigenes Ranking-System, kein VHB-Rating — daher optisch als
   eigene, abgesetzte Mini-Gruppe (siehe .filter-group--ft50 etc. unten) statt
   in der Rating-Reihe. Aktiver Zustand: dunkler Ink-Ton statt lime/blau —
   ein "Premium-Label", das klar signalisiert "anderes System". Bei aktivem
   FT50 werden die Bereich-/Rating-Gruppen gedimmt (JS: initFt50Exclusivity
   in base.html setzt/entfernt .is-ft50-dimmed). */
.vhb-dimmable { display: flex; flex-direction: column; gap: 6px; }
.is-ft50-dimmed {
  opacity: 0.45;
  transition: opacity var(--dur) var(--ease);
}
.chip-ft50 span { letter-spacing: 0.02em; }
.chip:has(input:checked).chip-ft50 {
  background: var(--ink);
  border-color: var(--ink);
  color: #fff;
  font-family: var(--font-mono);
  font-weight: 600;
}
/* Mini-Gruppen mit Trenner "davor" — je nach Layout links (Reihe) oder
   oben (gestapelt), analog zu .quick-pick__actions. */
.filter-group--ft50 {
  padding-left: 20px;
  border-left: 1px dashed var(--border-strong);
}
.vhb-filter__row--ft50 {
  padding-left: 16px;
  border-left: 1px dashed var(--border-strong);
}
.my-filter-modal__row--ft50 {
  padding-top: 12px;
  border-top: 1px dashed var(--border-strong);
}
.quick-pick__row--ft50 {
  padding-top: 10px;
  border-top: 1px dashed var(--border-strong);
}

/* ---------- Bereichs-Chips: 18 VHB-Bereiche, INLINE-Fallback
   (partials/area_chips.html, collapse=false ODER <= 6 Bereiche) ----------
   Fuer Modals/Sekundaer-Kontexte (my_filters.html, email_updates.html), wo
   ein schwebendes Popover-Panel leicht am Rand abgeschnitten wuerde — dort
   zeigen wir stattdessen alle Chips sofort, ungekuerzt. Der Standardfall
   (collapse=true, >6 Bereiche) ist seit dem Bereichs-Dropdown weiter unten
   ("Bereichs-Dropdown") kein Chip-Grid mehr. Auf Mobile uebernimmt die
   bestehende Chip-Row-Regel (horizontal scroll, siehe Media-Query weiter
   unten). */
.area-chip-block {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 5px;
}

/* ---------- Bereichs-Dropdown: 18 VHB-Bereiche als kompaktes Dropdown
   (partials/area_chips.html, collapse=true + >6 Bereiche) statt der alten
   flachen, umbrechenden Chip-Reihe. Trigger-Button zeigt die Live-Anzahl,
   Klick oeffnet ein Panel mit Suchfeld + scrollbarer Checkliste + Alle/
   Keine/Fertig — Muster analog .journal-filter__* (Desktop: schwebendes
   Popover NEU, dort gibt's das nicht; Mobile: Bottom-Sheet wie dort).
   Checkboxen bleiben echte <input>, das Panel liegt normal im DOM-Fluss
   (kein Portal) — .filter-card/.filter-block haben bewusst KEIN
   overflow:hidden, siehe Kommentar dort, sonst wuerde das Popover
   abgeschnitten. ---------- */
.area-dropdown { position: relative; display: inline-block; }

.area-dropdown__trigger { position: relative; }
.area-dropdown__trigger-icon { color: var(--ink-subtle); flex-shrink: 0; }
.area-dropdown__trigger-label { white-space: nowrap; }
.area-dropdown__trigger-chevron {
  color: var(--ink-subtle);
  flex-shrink: 0;
  transition: transform var(--dur) var(--ease);
}
.area-dropdown.is-open .area-dropdown__trigger-chevron { transform: rotate(180deg); }
.area-dropdown__trigger--active {
  background: var(--brand-blue-soft);
  border-color: var(--brand-blue);
  color: var(--brand-blue-deep);
}
.area-dropdown__trigger--active:hover { background: var(--brand-blue-soft); border-color: var(--brand-blue-deep); }
.area-dropdown__trigger--active .area-dropdown__trigger-icon,
.area-dropdown__trigger--active .area-dropdown__trigger-chevron { color: var(--brand-blue-deep); }

/* Panel: absolute Popover unter dem Trigger. Bleibt IMMER im DOM (kein
   [hidden]) und faedet per opacity/transform ein/aus — visibility mit
   verzoegertem Transition-Delay haelt es beim Zu-Klappen ausserhalb der
   Tab-Reihenfolge, ohne die Oeffnen-Animation zu verschlucken. */
.area-dropdown__panel {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  z-index: 30;
  width: 280px;
  max-width: min(280px, 90vw);
  display: flex;
  flex-direction: column;
  gap: 8px;
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  padding: 8px;
  opacity: 0;
  transform: translateY(-4px);
  visibility: hidden;
  pointer-events: none;
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease),
              visibility 0s linear var(--dur);
}
.area-dropdown.is-open .area-dropdown__panel {
  opacity: 1;
  transform: translateY(0);
  visibility: visible;
  pointer-events: auto;
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
}
/* Sheet-Header + Backdrop sind reine Mobile-Bottom-Sheet-Bestandteile
   (siehe Media-Query) — auf Desktop nicht Teil des Popovers. */
.area-dropdown__panel-header,
.area-dropdown__backdrop {
  display: none;
}

.area-dropdown__search { position: relative; }
.area-dropdown__search svg {
  position: absolute;
  left: 9px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--ink-subtle);
  pointer-events: none;
}
/* Scope ueber den Eltern-Container (0,2,0) statt nur die Klasse allein
   (0,1,0) — sonst gewinnt die generische Basisregel weiter oben
   ("input[type=\"text\"], ..." hat 0,1,1, also HOEHERE Spezifitaet als
   eine einzelne Klasse) und die Lupe liegt ueber dem Placeholder-Text,
   weil padding-left nie tatsaechlich auf 30px kommt. */
.area-dropdown__search .area-dropdown__search-input { padding-left: 30px; }

.area-dropdown__list {
  display: flex;
  flex-direction: column;
  gap: 1px;
  max-height: 240px;
  overflow-y: auto;
}
.area-dropdown__option {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 12.5px;
  color: var(--ink-muted);
  transition: background-color var(--dur) var(--ease);
}
/* Analog .journal-row[hidden] — Autor-[hidden] gewinnt sonst nicht gegen
   den vorher gesetzten display:flex (UA-Ursprung schlaegt hier verloren). */
.area-dropdown__option[hidden] { display: none; }
.area-dropdown__option:hover { background: var(--surface-sunken); }
.area-dropdown__option input { flex-shrink: 0; cursor: pointer; }
.area-dropdown__option:has(input:checked) {
  background: var(--brand-blue-soft);
  color: var(--brand-blue-deep);
  font-weight: 600;
}
.area-dropdown__empty {
  padding: 10px 4px;
  text-align: center;
  font-size: 12px;
  color: var(--ink-subtle);
  font-style: italic;
}

.area-dropdown__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding-top: 8px;
  border-top: 1px solid var(--border);
}
.area-dropdown__quick { display: flex; gap: 4px; }

/* ---------- Bereichs-Dropdown: INLINE-Panel-Variante (panel="inline")
   ----------
   Fuer Modals (my_filters.html, email_updates.html), wo ein schwebendes
   Popover an .my-filter-modal__panel (overflow-y:auto) abgeschnitten
   wuerde. Gleicher Trigger + gleiche Checkliste wie das Popover oben,
   aber das Panel liegt IM NORMALEN DOM-FLUSS: eingeklappt = eine Zeile
   (Trigger-Button), aufgeklappt schiebt es den Rest des Modals nach
   unten statt zu schweben — kein Clipping. Ueberschreibt die Popover-
   Positionierung UND den Mobile-Bottom-Sheet-Umbau (Media-Query weiter
   unten) allein durch hoehere Selektor-Spezifitaet (zwei Klassen statt
   einer) — funktioniert unabhaengig von der Viewport-Breite, ohne
   !important. */
.area-dropdown--inline { display: block; width: 100%; }
.area-dropdown--inline .area-dropdown__trigger { width: 100%; justify-content: space-between; }
.area-dropdown--inline .area-dropdown__panel {
  position: static;
  display: none;
  width: 100%;
  max-width: none;
  z-index: auto;
  box-shadow: none;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  margin-top: 6px;
  padding: 8px;
  opacity: 1;
  transform: none;
  visibility: visible;
  pointer-events: auto;
  transition: none;
}
.area-dropdown--inline.is-open .area-dropdown__panel { display: flex; }
/* Sheet-Header/Backdrop sind reine Mobile-Bottom-Sheet-Bestandteile des
   Popovers (siehe Media-Query) — im Inline-Modus nie gebraucht. */
.area-dropdown--inline .area-dropdown__panel-header,
.area-dropdown--inline .area-dropdown__backdrop { display: none; }

/* ---------- Journal-Filter-Liste ---------- */
.journal-filter { display: flex; flex-direction: column; gap: 8px; }
.journal-filter__head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px;
}
.journal-filter__quick { display: flex; gap: 4px; }
.journal-filter__empty {
  padding: 18px; text-align: center;
  color: var(--ink-subtle); font-size: 12.5px; font-style: italic;
  border: 1px dashed var(--border-strong);
  border-radius: var(--radius-sm);
}

.btn-mini {
  font-family: var(--font-body);
  font-size: 11px; font-weight: 500;
  padding: 3px 9px;
  background: transparent;
  color: var(--ink-muted);
  border: 1px solid var(--border-strong);
  border-radius: 4px;
  cursor: pointer;
  transition: all var(--dur) var(--ease);
}
.btn-mini:hover { background: var(--surface-sunken); color: var(--ink); border-color: var(--ink-muted); }
/* Danger-Variante — referenziert von my_filters.html + email_updates.html
   (Loeschen-Buttons), war bislang nicht definiert (Klasse griff ins Leere). */
.btn-mini--danger { color: var(--danger); }
.btn-mini--danger:hover { background: rgba(239, 68, 68, 0.08); border-color: var(--danger); color: var(--danger); }
/* Akzent-Variante — hebt die "Passende markieren"-Bruecke leicht hervor. */
.btn-mini--accent { color: var(--brand-blue-deep); border-color: var(--brand-blue-soft); }
.btn-mini--accent:hover { background: var(--brand-blue-soft); border-color: var(--brand-blue); color: var(--brand-blue-deep); }

/* ---------- Journal-Pills (Checkbox-Pills im Grid, kompakt) ---------- */
.journal-pill-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
  gap: 4px;
  max-height: 280px;
  overflow-y: auto;
  padding: 2px;
}
.journal-pill {
  position: relative;
  display: flex; align-items: center;
  gap: 6px;
  padding: 4px 8px;
  border-radius: 4px;
  border: 1px solid transparent;
  background: var(--surface-sunken);
  cursor: pointer;
  transition: all var(--dur) var(--ease);
  font-size: 11.5px;
  line-height: 1.3;
  min-width: 0;
}
.journal-pill input { position: absolute; opacity: 0; pointer-events: none; }
.journal-pill:hover {
  background: var(--surface);
  border-color: var(--border-strong);
}
.journal-pill:has(input:checked) {
  background: var(--brand-blue-soft);
  border-color: var(--brand-blue);
}
.journal-pill__name {
  flex: 1; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-weight: 500;
  color: var(--ink-muted);
}
.journal-pill:has(input:checked) .journal-pill__name { color: var(--brand-blue-deep); font-weight: 600; }
.journal-pill__ratings {
  display: inline-flex; gap: 2px; flex-shrink: 0;
}
.journal-pill__rating {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 14px; height: 14px;
  padding: 0 3px;
  border-radius: 2px;
  font-family: var(--font-mono);
  font-size: 9px; font-weight: 700;
  letter-spacing: 0.01em;
  line-height: 1;
  white-space: nowrap;
  background: rgba(255,255,255,0.6); color: var(--ink-subtle);
}
.journal-pill__rating.r-Aplus, .area-rating-pill.r-Aplus { background: var(--accent-lime-soft); color: #4A6B0E; border-color: rgba(132, 204, 22, 0.3); }
.journal-pill__rating.r-A,     .area-rating-pill.r-A     { background: var(--brand-blue-soft); color: var(--brand-blue-deep); border-color: rgba(59, 130, 246, 0.25); }
.journal-pill__rating.r-B,     .area-rating-pill.r-B     { background: var(--surface-sunken); color: var(--ink-muted); }
.journal-pill__rating.r-C,     .area-rating-pill.r-C     { background: rgba(245, 158, 11, 0.10); color: #9A6A00; }
.journal-pill__rating.r-D,     .area-rating-pill.r-D     { background: rgba(239, 68, 68, 0.08); color: #B91C1C; }
/* "+N"-Sammel-Pill fuer alle nicht einzeln gezeigten Bereiche (B/C/D bzw.
   ueberzaehlige A+/A) — neutral, kein Rating-Farbcode, voller Inhalt im
   title-Tooltip (siehe journals_filter_list.html). */
.journal-pill__rating--more, .area-rating-pill--more {
  background: var(--surface-sunken);
  color: var(--ink-subtle);
  font-weight: 600;
}

/* ---------- Bereichs-Rating-Pill, zweiteilig (info.html Datenbank-
   Tabelle): [Bereichs-Kuerzel] + [Rating in eigener Badge-Kapsel]. Das
   Rating sitzt sichtbar ABGESETZT in einer kleinen farbcodierten Kapsel,
   nicht als Hintergrundfarbe der gesamten Pille. Eigene __badge-r-*-
   Klassen (NICHT die geteilten .journal-pill__rating/.area-rating-pill-
   Selektoren oben) — journals_filter_list.html haengt am alten kompakten
   Look und darf sich nicht mitaendern.
   HINWEIS (2026-07): der Name war zwischenzeitlich ausgeschrieben
   ("Strategisches Management" statt "STRAT"), weil mehrere Kuerzel pro
   Zeile ohne Erklaerung als Buchstabensuppe gelesen wurden. Auf
   ausdruecklichen Wunsch jetzt zurueck auf den Code (.area-code, wie
   ueberall sonst im Bereichs-Vokabular) — die Bedeutung steckt jetzt im
   title-Attribut (<abbr>, area-rating-pill__name) statt im Fliesstext. */
.area-rating-pill {
  display: inline-flex; align-items: center;
  gap: 6px;
  min-height: 24px;
  padding: 2px 4px 2px 10px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface);
}
.area-rating-pill__name {
  /* font-family/-weight kommen von .area-code (Bereichs-Kuerzel, z.B.
     "STRAT") — hier nur Groesse/Farbe/Kein-Umbruch, kein max-width/
     ellipsis mehr noetig: Kuerzel sind max. 5 Zeichen, nie so lang wie
     die frueheren ausgeschriebenen Namen. */
  font-size: 11px;
  color: var(--ink-muted);
  white-space: nowrap;
}
.area-rating-pill__badge {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 20px; height: 20px;
  padding: 0 4px;
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: 10px; font-weight: 700;
  letter-spacing: 0.01em;
  line-height: 1;
  white-space: nowrap;
  background: var(--surface-sunken); color: var(--ink-subtle);
}
.area-rating-pill__badge.r-Aplus { background: var(--accent-lime-soft); color: #4A6B0E; }
.area-rating-pill__badge.r-A     { background: var(--brand-blue-soft); color: var(--brand-blue-deep); }
.area-rating-pill__badge.r-B     { background: var(--surface-sunken); color: var(--ink-muted); }
.area-rating-pill__badge.r-C     { background: rgba(245, 158, 11, 0.14); color: #9A6A00; }
.area-rating-pill__badge.r-D     { background: rgba(239, 68, 68, 0.12); color: #B91C1C; }

/* "+N"-Sammel-Pill: kein Name/Badge-Zweigespann, nur ein kompakter Zaehler
   direkt in .area-rating-pill. Hintergrund/Farbe stehen bereits in der
   geteilten .journal-pill__rating--more/.area-rating-pill--more-Regel
   weiter oben, werden hier aber EXPLIZIT wiederholt (identische Werte) —
   sonst gewinnt bei gleicher Spezifitaet die spaeter im Stylesheet
   stehende .area-rating-pill-Basisregel (weisser Hintergrund) den
   Kaskaden-Tiebreak und der Zaehler saehe aus wie eine normale Pille statt
   neutral abgesetzt. Padding/Font hier zusaetzlich nachgezogen, weil
   .area-rating-pill selbst keine eigene font-Deklaration mehr traegt. */
.area-rating-pill--more {
  background: var(--surface-sunken);
  color: var(--ink-subtle);
  padding: 2px 10px;
  font-family: var(--font-mono);
  font-size: 10.5px;
}

/* ---------- Journal-Filter: Mobile-Bottom-Sheet ----------
   Desktop: Trigger + Sheet-Header + Sheet-Footer + Backdrop sind hidden,
   Pill-Grid rendert direkt im Container (wie bisher).
   Mobile: Pill-Grid wird via Checkbox-Hack in einem Bottom-Sheet versteckt,
   ein gross-touch-Trigger oeffnet es. */
.journal-filter__sheet-toggle-input { display: none; }
.journal-filter__mobile-trigger,
.journal-filter__sheet-header,
.journal-filter__sheet-close,
.journal-filter__sheet-done,
.journal-filter__sheet-backdrop {
  display: none;
}
.journal-filter__sheet {
  display: block;
}

/* ============================================================
   AUTHOR-SUGGESTIONS (Autocomplete-Dropdown, dicht)
   ============================================================ */
/* ============================================================
   Author-Suggestions Dropdown (Schnellsuche + Agent-Form)
   Gleiches visuelles Design wie der Trends-Personen-Picker
   ============================================================ */
.author-sugg {
  background: var(--surface, #fff);
  border: 1px solid var(--border-strong, #D4D4C8);
  border-radius: 8px;
  box-shadow: 0 6px 24px rgba(14, 27, 44, 0.10);
  max-height: 320px;
  overflow-y: auto;
}
.author-sugg__row-wrap {
  display: flex;
  align-items: stretch;
  gap: 2px;
}
.author-sugg__row-wrap + .author-sugg__row-wrap {
  border-top: 1px solid var(--border, #E8E8E0);
}
.author-sugg__row-wrap.is-starred {
  background: linear-gradient(to right, #f5b301 0%, #f5b301 3px, transparent 3px);
}

/* Star-Button — gleicher Look wie .trends-star */
.author-star {
  flex-shrink: 0;
  border: none;
  background: transparent;
  cursor: pointer;
  font-size: 16px;
  line-height: 1;
  padding: 0 7px;
  color: var(--ink-subtle);
  transition: color 0.12s ease, transform 0.1s ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.author-star:hover {
  color: var(--accent-lime-deep, #84CC16);
  transform: scale(1.15);
}
.author-star.is-starred {
  color: #f5b301;
}
.author-star.is-starred:hover {
  color: var(--ink-muted);
  transform: scale(1.05);
}
.author-star:active {
  transform: scale(0.92);
}

/* Auswahl-Button — gleicher Look wie .trends-picker__item */
.author-sugg__item {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 14px;
  background: none;
  border: 0;
  text-align: left;
  cursor: pointer;
  font-family: inherit;
  font-size: 14px;
  color: var(--ink, #0E1B2C);
  transition: background 120ms ease;
  min-width: 0;
  flex: 1 1 auto;
}
.author-sugg__item:hover {
  background: var(--surface-sunken, #F4F4EE);
}
.author-sugg__name {
  flex: 1 1 auto;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-weight: 500;
}
.author-sugg__meta {
  flex: 0 0 auto;
  font-size: 11px;
  color: var(--ink-subtle, #8A95A5);
  white-space: nowrap;
}
.author-sugg__empty {
  padding: 12px 14px;
  font-size: 13px;
  color: var(--ink-subtle, #8A95A5);
  text-align: center;
  background: var(--surface, #fff);
  border: 1px solid var(--border-strong, #D4D4C8);
  border-radius: 8px;
  box-shadow: 0 6px 24px rgba(14, 27, 44, 0.10);
}

/* Mobile (Phase 3e): Autocomplete-Vorschlaege bleiben im normalen Fluss
   (kein position:absolute) — werden also nicht von der eingeblendeten
   Tastatur verdeckt. Hier nur die Touch-Hoehe sicherstellen: Items >=44px,
   etwas mehr vertikales Padding, damit der Tap-Bereich gross genug ist. */
@media (max-width: 768px) {
  .author-sugg { max-height: 50vh; }
  .author-sugg__item {
    min-height: 44px;
    padding: 11px 14px;
  }
  .author-star {
    min-width: 44px;
    min-height: 44px;
    font-size: 18px;
  }
}

/* ============================================================
   SEARCH-FORM (Schnellsuche: 2 Felder oben nebeneinander)
   ============================================================ */
.search-form__top {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 16px;
}
@media (max-width: 640px) {
  .search-form__top { grid-template-columns: 1fr; }
}
.search-form__field { min-width: 0; }

/* ============================================================
   AGENT-CARD (Dashboard: freundliche, luftige Karten)
   ============================================================ */
.agent-card {
  position: relative;
  display: flex;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  transition: all var(--dur) var(--ease);
  overflow: hidden;
}
.agent-card:hover {
  border-color: var(--border-strong);
  box-shadow: var(--shadow-sm);
  transform: translateY(-1px);
}
.agent-card--journal {
  border-left: 3px solid var(--moss);
}
.agent-card__body {
  flex: 1; min-width: 0;
  padding: 14px 16px;
  text-decoration: none;
  color: inherit;
  display: flex; flex-direction: column;
  gap: 8px;
}
.agent-card__top {
  display: flex; align-items: center; gap: 10px;
  min-width: 0;
}
.agent-card__icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px;
  border-radius: var(--radius-sm);
  background: var(--brand-blue-soft);
  color: var(--brand-blue-deep);
  flex-shrink: 0;
}
.agent-card--journal .agent-card__icon {
  background: var(--moss-soft);
  color: var(--moss-deep);
}
.agent-card__name {
  flex: 1; min-width: 0;
  font-size: 14px; font-weight: 600;
  color: var(--ink);
  margin: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  line-height: 1.3;
}
.agent-card:hover .agent-card__name { color: var(--brand-blue-deep); }
.agent-card--journal:hover .agent-card__name { color: var(--moss-deep); }

/* Info-Zeile (Keywords als Pills, oder Journal-Count) */
.agent-card__info {
  display: flex; flex-wrap: wrap;
  gap: 4px;
  padding-left: 42px;  /* alignt mit Name nach Icon */
}
.agent-card__tag {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--brand-blue-soft);
  color: var(--brand-blue-deep);
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 500;
  line-height: 1.5;
}
.agent-card__tag--more {
  background: var(--surface-sunken);
  color: var(--ink-subtle);
}
.agent-card--journal .agent-card__tag {
  background: var(--moss-soft);
  color: var(--moss-deep);
}
.agent-card__meta-text {
  font-size: 12px;
  color: var(--ink-muted);
  font-weight: 500;
}

/* Stats-Zeile */
.agent-card__stats {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-left: 42px;
}
.agent-card__stat {
  font-size: 12px;
  color: var(--ink-muted);
}
.agent-card__stat strong {
  font-family: var(--font-mono);
  font-weight: 600;
  color: var(--ink);
  font-size: 13px;
}
.agent-card__unread {
  font-size: 10.5px;
  font-weight: 600;
  color: var(--brand-blue-deep);
  background: var(--brand-blue-soft);
  padding: 2px 8px;
  border-radius: 999px;
}

/* Aktionen (Edit/Delete) — dezent rechts, erscheinen bei Hover */
.agent-card__actions {
  display: flex; flex-direction: column;
  justify-content: center;
  gap: 2px;
  padding: 8px 6px;
  opacity: 0;
  transition: opacity var(--dur) var(--ease);
}
.agent-card:hover .agent-card__actions { opacity: 1; }
.agent-card__actions form { margin: 0; padding: 0; }
.agent-card__act {
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px;
  border-radius: var(--radius-sm);
  background: transparent;
  border: none;
  color: var(--ink-subtle);
  cursor: pointer;
  transition: all var(--dur) var(--ease);
  text-decoration: none;
}
.agent-card__act:hover {
  background: var(--surface-sunken);
  color: var(--ink);
}
.agent-card__act--danger:hover {
  background: rgba(239, 68, 68, 0.08);
  color: var(--danger);
}

/* ============================================================
   DASHBOARD — Kompakte Agenten-Card
   ============================================================ */
.dash-agents-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  overflow: hidden;
}
.dash-agents-section {
  border-bottom: 1px solid var(--border);
}
.dash-agents-section:last-of-type { border-bottom: none; }
.dash-agents-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  background: var(--surface-sunken);
  color: var(--ink-muted);
}
.dash-agents-header svg { flex-shrink: 0; color: var(--ink-subtle); }
.dash-agents-header__title {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-muted);
}
.dash-agents-header__count {
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  color: var(--ink-subtle);
  background: var(--surface);
  padding: 1px 7px;
  border-radius: 999px;
  border: 1px solid var(--border);
}

/* Kompakte Agent-Zeile */
.dash-agents-list {
  display: flex;
  flex-direction: column;
}
.dash-agent-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 14px;
  text-decoration: none;
  color: inherit;
  transition: background var(--dur) var(--ease);
  border-bottom: 1px solid var(--border);
}
.dash-agent-row:last-child { border-bottom: none; }
.dash-agent-row:hover {
  background: var(--surface-sunken);
}
.dash-agent-row__dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  flex-shrink: 0;
}
.dash-agent-row__name {
  flex: 1;
  min-width: 0;
  font-size: 13px;
  font-weight: 500;
  color: var(--ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.dash-agent-row:hover .dash-agent-row__name {
  color: var(--brand-blue-deep);
}
.dash-agent-row__unread {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  color: var(--brand-blue-deep);
  background: var(--brand-blue-soft);
  padding: 1px 6px;
  border-radius: 999px;
  flex-shrink: 0;
}
.dash-agent-row__count {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  color: var(--ink-subtle);
  flex-shrink: 0;
  min-width: 28px;
  text-align: right;
}
.dash-agent-row__arrow {
  flex-shrink: 0;
  color: var(--ink-subtle);
  opacity: 0;
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.dash-agent-row:hover .dash-agent-row__arrow {
  opacity: 1;
  transform: translateX(2px);
}

/* Leerer Zustand */
.dash-agents-empty {
  padding: 14px;
  font-size: 12.5px;
  color: var(--ink-subtle);
}
.dash-agents-empty a {
  color: var(--brand-blue-deep);
  font-weight: 500;
  text-decoration: none;
}
.dash-agents-empty a:hover { text-decoration: underline; }

/* Footer mit Buttons */
.dash-agents-footer {
  display: flex;
  gap: 6px;
  padding: 8px 14px;
  background: var(--surface-sunken);
  border-top: 1px solid var(--border);
}

/* ============================================================
   DASHBOARD — Schnellzugriff-Karte
   ============================================================ */
.dash-quick {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  overflow: hidden;
}
.dash-quick__title {
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-subtle);
  padding: 10px 14px 6px;
}
.dash-quick__link {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 14px;
  text-decoration: none;
  font-size: 13px;
  font-weight: 500;
  color: var(--ink-muted);
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.dash-quick__link svg {
  flex-shrink: 0;
  color: var(--ink-subtle);
  transition: color var(--dur) var(--ease);
}
.dash-quick__link:hover {
  background: var(--surface-sunken);
  color: var(--ink);
}
.dash-quick__link:hover svg { color: var(--brand-blue); }
.dash-quick__link:last-child {
  border-bottom-left-radius: var(--radius-md);
  border-bottom-right-radius: var(--radius-md);
}

/* ============================================================
   QUICK-PICK (Journal-Agent-Form: Bereich+Rating als Bulk-Aktion)
   ============================================================ */
.quick-pick {
  background: var(--surface-sunken);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  display: flex; flex-direction: column;
  gap: 10px;
}
.quick-pick__row {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
}
.quick-pick__label {
  font-size: 10.5px; font-weight: 600;
  letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--ink-subtle);
  min-width: 60px;
}
.quick-pick__actions {
  display: flex; align-items: center;
  padding-top: 4px;
  border-top: 1px dashed var(--border-strong);
}

/* ============================================================
   PAPER-CARD — Ticket-Design (Datums-Block links, Karte rechts)
   Outer <article> ist ein Grid-Wrapper, KEIN visueller Container.
   Die weisse Karte ist .paper-card__body (rechte Spalte).
   Der Ticket-Block ist .paper-ticket (linke Spalte).
   ============================================================ */
.paper-card {
  display: grid;
  grid-template-columns: 92px 1fr;
  gap: 16px;
  align-items: stretch;
  background: transparent;
  border: 0;
  padding: 0;
  position: relative;
  transition: opacity var(--dur-standard, 250ms) var(--ease-out-expo, cubic-bezier(0.16, 1, 0.3, 1));
}

/* Body = die eigentliche weisse Karte mit Titel/Meta/Abstract/Actions. */
.paper-card__body {
  position: relative;
  background: var(--surface, #FFFFFF);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg, 14px);
  padding: 20px 24px;
  display: flex; flex-direction: column; gap: 7px;
  transition: border-color var(--dur-micro, 150ms),
              box-shadow var(--dur-micro, 150ms);
}
.paper-card:hover .paper-card__body {
  border-color: var(--border-strong, #D4D4C8);
  box-shadow: var(--shadow-sm, 0 1px 2px rgba(14,27,44,0.04));
}

/* ----- Downloaded-Badge: in Body-Bounds, oben rechts ----- */
.paper-card__downloaded-badge {
  position: absolute;
  top: 10px; right: 12px;
  display: inline-flex; align-items: center; gap: 4px;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--accent-lime-soft);
  color: #4A6B0E;
  font-size: 10px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.04em;
  border: 1px solid rgba(132, 204, 22, 0.3);
  z-index: 1;
}

/* ============================================================
   TICKET — Heft + Perforation + DB-Stub
   ============================================================ */
.paper-ticket {
  width: 92px;
  min-height: 132px;
  position: relative;
  background: var(--surface, #FFFFFF);
  border: 1px solid var(--border);
  border-radius: var(--radius-md, 10px);
  display: flex; flex-direction: column;
  transition: border-color var(--dur-micro, 150ms),
              box-shadow var(--dur-micro, 150ms);
  user-select: none;
}
.paper-card:hover .paper-ticket {
  border-color: var(--border-strong, #D4D4C8);
  box-shadow: var(--shadow-sm, 0 1px 2px rgba(14,27,44,0.04));
}

/* ----- Heft (oben) ----- */
.paper-ticket__heft {
  flex: 1;
  display: flex; flex-direction: column;
  justify-content: center; align-items: center;
  padding: 11px 8px 12px;
  border: 0;
  background: transparent;
  border-radius: var(--radius-md, 10px) var(--radius-md, 10px) 0 0;
  transition: background var(--dur-micro, 150ms);
  cursor: pointer;
  font: inherit;
  color: inherit;
}
button.paper-ticket__heft { width: 100%; }
.paper-card:hover .paper-ticket__heft {
  background: var(--surface-sunken, #F4F4EE);
}
.paper-ticket__heft-mo {
  font-size: 11px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--brand-blue, #3B82F6);
  line-height: 1.05;
  white-space: nowrap;
  /* Tag wird in der gleichen Zeile gerendert (z.B. "15. JUN") */
}
.paper-ticket__heft-yr {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: 22px;
  font-weight: 600;
  color: var(--ink);
  line-height: 1.05;
  margin-top: 2px;
}
.paper-ticket__heft-lbl {
  font-size: 9px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-subtle);
  margin-top: 3px;
  line-height: 1;
}
.paper-ticket__heft--empty .paper-ticket__heft-mo {
  color: var(--ink-subtle);
}

/* ----- Perforations-Trennlinie + seitliche Notches ----- */
.paper-ticket__perf {
  position: relative;
  height: 0;
  border-top: 1px dashed var(--border-strong, #D4D4C8);
  margin: 0 7px;
}
.paper-ticket__perf::before,
.paper-ticket__perf::after {
  content: '';
  position: absolute;
  top: -6px;
  width: 11px; height: 11px;
  border-radius: 50%;
  background: var(--background, #FAFAF7);
  border: 1px solid var(--border);
}
.paper-ticket__perf::before { left: -13px; }
.paper-ticket__perf::after  { right: -13px; }

/* ----- DB-Stub (unten, Lime-Tint) ----- */
.paper-ticket__db {
  padding: 9px 8px 10px;
  text-align: center;
  border: 0;
  border-radius: 0 0 var(--radius-md, 10px) var(--radius-md, 10px);
  background: color-mix(in oklch, var(--accent-lime-soft) 45%, var(--surface, #FFFFFF));
  transition: background var(--dur-micro, 150ms);
  cursor: pointer;
  font: inherit;
  color: inherit;
  width: 100%;
}
.paper-card:hover .paper-ticket__db {
  background: color-mix(in oklch, var(--accent-lime-soft) 80%, var(--surface, #FFFFFF));
}
.paper-ticket__db-cap {
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--moss, #4F6B3A);
  margin-bottom: 1px;
}
.paper-ticket__db-d {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--moss-deep, #3A5128);
  margin-top: 3px;
  line-height: 1;
}
/* Fehlendes CrossRef-Datum (Backfill noch nicht durch) */
.paper-ticket__db-d--missing {
  color: var(--ink-subtle, #8A95A5);
  opacity: 0.6;
  font-weight: 400;
}

/* ============================================================
   States: Gelesen / Aussortiert
   ============================================================ */

/* Gelesen-State: Titel durchgestrichen, Body etwas gedimmt */
.paper-card.is-read .paper-card__body {
  background: var(--surface-sunken);
}
.paper-card.is-read .paper-card__title {
  color: var(--ink-subtle);
  text-decoration: line-through;
  text-decoration-color: var(--ink-subtle);
  text-decoration-thickness: 1px;
}
.paper-card.is-read .paper-card__title a { color: var(--ink-subtle); }
.paper-card.is-read .paper-card__journal,
.paper-card.is-read .paper-card__authors { color: var(--ink-muted); }
.paper-card.is-read .paper-card__abstract,
.paper-card.is-read .paper-card__no-abstract { color: var(--ink-subtle); }
.paper-card.is-read .paper-ticket {
  opacity: 0.65;
}

/* Aussortiert-State: stark gedimmt mit Rot-Akzent */
.paper-card.is-dismissed { opacity: 0.55; }
.paper-card.is-dismissed:hover { opacity: 0.85; }
.paper-card.is-dismissed .paper-card__body {
  background: linear-gradient(135deg, rgba(239, 68, 68, 0.06) 0%, rgba(239, 68, 68, 0.03) 100%);
  border-left: 3px solid rgba(239, 68, 68, 0.3);
}

/* Dismiss-Button: roter Akzent wenn aktiv */
.paper-card__status-toggle--dismiss.is-on {
  color: #dc2626;
  background: rgba(239, 68, 68, 0.1);
  border-color: rgba(239, 68, 68, 0.25);
}

/* Mobile: Ticket schmaler */
@media (max-width: 640px) {
  .paper-card { grid-template-columns: 72px 1fr; gap: 10px; }
  .paper-ticket { width: 72px; min-height: 110px; }
  .paper-ticket__heft-yr { font-size: 18px; }
  .paper-ticket__heft-mo { font-size: 10px; }
  .paper-ticket__heft-lbl { font-size: 8px; }
  .paper-ticket__db-d { font-size: 11px; }
  .paper-card__body { padding: 14px 16px; }
}

/* Title + Abstract — JATS-Markup wird via clean_title-Filter gerendert.
   .scp = Akronyme (CSR, IFRS, M&A) — Uppercase mit leichtem Tracking
   <i>/<em> = italic (Fremdwoerter, Gene-Namen)
   <sup>/<sub> = Hoch-/Tiefstellung (chem. Formeln, Fussnoten) */
.paper-card__title .scp,
.paper-card__abstract .scp {
  letter-spacing: 0.02em;
  font-weight: inherit;
  /* Kein font-variant-caps — das looked mit Inter scheisse */
}
.paper-card__title i,
.paper-card__title em {
  font-style: italic;
  font-weight: inherit;
}
.paper-card__abstract i,
.paper-card__abstract em {
  font-style: italic;
}
.paper-card__title sup,
.paper-card__title sub,
.paper-card__abstract sup,
.paper-card__abstract sub {
  font-size: 0.7em;
  font-weight: inherit;
}

/* Meta-Zeile: Authors + Journal + Zitate-Chip (Design-Spec) */
.paper-card__meta {
  display: flex; flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--ink-muted);
}
.paper-card__authors { color: var(--ink-muted); }
/* Erstautor: fett + Markenblau (Design-Spec) */
.paper-card__authors b {
  font-weight: 600;
  color: var(--brand-blue-deep, #2563EB);
}
/* "+N"-Button für weitere Autoren — klickbar, dezent */
.paper-card__authors-more {
  display: inline-flex; align-items: center;
  margin-left: 4px;
  padding: 1px 7px;
  border: 1px solid var(--border, #E8E8E0);
  background: var(--surface-sunken, #F4F4EE);
  border-radius: 999px;
  color: var(--ink-muted, #4A5868);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  transition: all 120ms;
  user-select: none;
}
.paper-card__authors-more:hover {
  background: var(--brand-blue-soft, #DBEAFE);
  border-color: var(--brand-blue, #3B82F6);
  color: var(--brand-blue-deep, #2563EB);
}
.paper-card__authors-more[aria-expanded="true"] {
  background: var(--brand-blue-soft, #DBEAFE);
  border-color: var(--brand-blue, #3B82F6);
  color: var(--brand-blue-deep, #2563EB);
}
.paper-card__sep { color: var(--ink-subtle); }
.paper-card__journal {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 14px;
  font-weight: 500;
  color: var(--ink-muted);
  line-height: 1.2;
}
.paper-card__cites {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 11px; font-weight: 500;
  color: var(--ink-muted);
  background: var(--surface-sunken);
  padding: 2px 9px;
  border-radius: 999px;
}
.paper-card__cites strong {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  color: var(--ink);
}
.paper-card__cites--unknown {
  opacity: 0.6;
  font-style: italic;
}
.paper-card__cites--unknown strong {
  color: var(--ink-subtle);
  font-style: normal;
}

/* Titel */
.paper-card__title {
  font-size: 16px;
  font-weight: 700;
  line-height: 1.32;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin: 0;
}
/* Wenn Downloaded-Badge angezeigt: rechts Platz lassen damit Titel nicht
   unter dem Badge endet. */
.paper-card__body:has(.paper-card__downloaded-badge) .paper-card__title {
  padding-right: 100px;
}
.paper-card__title a {
  color: inherit;
  text-decoration: none;
  transition: color var(--dur-micro, 150ms);
}
.paper-card__title a:hover {
  color: var(--brand-blue-deep, #2563EB);
}

/* Abstract */
.paper-card__abstract {
  font-size: 13px;
  line-height: 1.5;
  color: var(--ink-muted);
  cursor: pointer;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.abstract-details[open] .paper-card__abstract {
  -webkit-line-clamp: unset;
  display: block;
  overflow: visible;
}
.paper-card__abstract-more {
  margin-top: 4px;
  font-size: 11.5px;
  color: var(--brand-blue-deep);
  cursor: pointer;
  user-select: none;
}
.paper-card__abstract-less {
  margin-top: 4px;
  font-size: 11.5px;
  color: var(--ink-subtle);
  cursor: pointer;
  user-select: none;
}
.paper-card__no-abstract {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 12px;
  color: var(--ink-subtle);
  margin: 0;
}

/* Action-Bar (Design-Spec: gap 8, padding-top 12, margin-top 8) */
.paper-card__actions {
  display: flex; align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 8px;
  padding-top: 12px;
  border-top: 1px solid var(--border);
  font-size: 12.5px;
}
.paper-card__actions-spacer { flex: 1; }

/* Overflow-Container (Phase 3a, Checkbox-Hack). Desktop-Default: KEIN
   Drawer, sondern ein transparenter Inline-Container — alle Overflow-Buttons
   stehen in einer Reihe, Checkbox + „Mehr"-Trigger sind ausgeblendet.
   Erst die Mobile-Media-Query (max-width:768px) macht daraus einen per
   Label aufklappbaren Drawer. So bleibt Desktop optisch identisch.
   (Frueher <details> + display:contents — das malte geschlossenen Inhalt
   NICHT, Desktop verlor dadurch alle Sekundaer-Buttons.) */
.paper-card__more {
  display: contents; /* Container loest sich auf → Buttons sind direkte
                        Flex-Items von .paper-card__actions (wie vorher). */
}
.paper-card__more-toggle  { display: none; } /* Desktop: Checkbox nie sichtbar */
.paper-card__more-trigger { display: none; } /* Desktop: kein Trigger */
.paper-card__more-items {
  display: contents; /* aufloesen → Inline-Reihe auf Desktop. Plain <div>
                        (kein <details>) → Inhalt wird zuverlaessig gemalt. */
}
/* Desktop-Reihenfolge exakt wie vor Phase 3a wiederherstellen.
   Im HTML stehen die 3 Primaer-Aktionen jetzt zuerst, der Rest folgt im
   <details>. Per flex `order` ruecken sie optisch an ihre alten Plaetze:
   Bookmark · DOI · Scholar · Verbindungen · Preprint-Radar · Notiz ·
   [Spacer] · Gelesen · Geladen · Aussortieren.
   (Greift nur auf Desktop — mobil wird .paper-card__more zum Drawer und
   ueberschreibt display/order ist dort irrelevant, da Drawer = Block.) */
.paper-card__bookmark        { order: 1; }
.paper-card__doi             { order: 2; }
.paper-card__scholar         { order: 3; }
.paper-card__connections     { order: 4; }
.paper-card__preprint-radar  { order: 5; }
.paper-card__note-btn        { order: 6; }
.paper-card__actions-spacer  { order: 7; }
.paper-card__status-toggle             { order: 8; } /* Gelesen (Primaer) */
.paper-card__status-toggle--download   { order: 9; }
.paper-card__status-toggle--dismiss    { order: 10; }

/* Anon-Zustand auf der Standalone-Digest-Seite (/d/{token}, current_user=None,
   siehe partials/paper_card.html): Lesezeichen/Notiz/Gelesen/Geladen/
   Aussortieren sind disabled + sichtbar ausgegraut. Spezifischer als die
   globale `button[disabled]`-Regel (HTMX micro), die einen "progress"-Cursor
   fuer laufende Requests setzt — hier ist der Zustand dauerhaft, also
   "not-allowed" statt "progress", und deutlich schwaecher in der Opazitaet. #}
.paper-card__actions button.is-locked[disabled] {
  opacity: 0.35;
  cursor: not-allowed;
}
@media (hover: hover) and (pointer: fine) {
  .paper-card__actions button.is-locked[disabled]:hover {
    background: transparent;
    color: var(--ink-subtle);
  }
}


/* Online-First-Datum — dezenter Hinweis unter der Meta-Zeile */
.paper-card__date-online {
  font-size: 10px;
  font-family: var(--font-mono);
  color: var(--ink-subtle);
  letter-spacing: 0.02em;
  margin-top: 3px;
}

/* DB-Import-Datum — klar abgegrenzter Sub-Kasten am unteren Rand des
   Date-Stripe. Absolut positioniert damit das Heft-Datum darüber
   zentriert bleibt und nicht hochgedrückt wird.
   Drei-zeilig: "DB"-Label oben (Legende), dann Tag.Monat. und Jahr.
   Warme Bernstein-Farbe — klar abgesetzt vom kuehlen Heft-Bereich. */
.paper-card__date-db {
  position: absolute;
  left: 5px; right: 5px; bottom: 5px;
  display: flex; flex-direction: column; align-items: center;
  justify-content: center;
  gap: 1px;
  padding: 3px 2px 4px;
  border-radius: 5px;
  background: linear-gradient(180deg, rgba(245, 158, 11, 0.18) 0%, rgba(245, 158, 11, 0.10) 100%);
  color: #92400E;
  border: 1px solid rgba(245, 158, 11, 0.40);
  font-family: var(--font-mono);
  letter-spacing: 0.02em;
  line-height: 1;
  white-space: nowrap;
  box-shadow: 0 1px 2px rgba(245, 158, 11, 0.08);
}
.paper-card__date-db-label {
  font-size: 8px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.10em;
  opacity: 0.75;
  margin-bottom: 1px;
}
.paper-card__date-db-dm {
  font-size: 11px;
  font-weight: 600;
}
.paper-card__date-db-y {
  font-size: 13px;
  font-weight: 700;
}
.paper-card.is-read .paper-card__date-db {
  opacity: 0.5;
}

/* Bookmark-Toggle in der paper-card Action-Bar (Design-Spec analog .act) */
.paper-card__bookmark {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 8px;
  border-radius: var(--radius-sm, 6px);
  border: 0;
  background: transparent;
  color: var(--ink-subtle);
  cursor: pointer;
  font: inherit;
  font-size: 12.5px;
  font-weight: 500;
  transition: all var(--dur) var(--ease);
}
/* Hover-States nur auf echten Hover-Devices (Maus/Trackpad) — auf Touch
   bleibt sonst der Lime-Look nach Tap haengen (User-Report fuer Scholar). */
@media (hover: hover) and (pointer: fine) {
  .paper-card__bookmark:hover {
    background: var(--accent-lime-soft);
    color: var(--moss-deep);
  }
  .paper-card__bookmark.is-on:hover {
    background: var(--surface-sunken);
    color: var(--ink-muted);
  }
}
.paper-card__bookmark.is-on {
  background: var(--accent-lime-soft);
  color: var(--moss-deep);
  font-weight: 600;
}

/* Lesezeichen-Bucket-Headlines */
.bookmark-bucket-head {
  display: flex; align-items: baseline; justify-content: space-between;
  padding: 6px 4px;
  margin-bottom: 10px;
  border-bottom: 1px dashed var(--border-strong);
}

/* ============================================================
   BOOKMARK FOLDERS — Zwei-Spalten-Layout + Drag&Drop
   ============================================================ */
.bm-layout {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 24px;
  align-items: start;
}
@media (max-width: 900px) {
  .bm-layout { grid-template-columns: 1fr; }
}

/* Linke Spalte: Ordner-Sidebar */
.bm-folders {
  position: sticky;
  top: 24px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 12px 10px 14px;
  min-height: 200px;
}
.bm-folders__head {
  padding: 0 6px 8px;
  margin-bottom: 6px;
  border-bottom: 1px dashed var(--border);
}
.bm-folder-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.bm-folder {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 8px;
  border-radius: var(--radius-sm);
  color: var(--ink-muted);
  font-size: 13px;
  text-decoration: none;
  transition: background 120ms var(--ease), color 120ms var(--ease), transform 80ms var(--ease);
  cursor: pointer;
  user-select: none;
}
.bm-folder:hover {
  background: var(--surface-sunken);
  color: var(--ink);
}
.bm-folder--active {
  background: var(--brand-blue-soft);
  color: var(--brand-blue-deep);
  font-weight: 600;
}
.bm-folder__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: currentColor;
  opacity: 0.75;
}
.bm-folder__name {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.bm-folder__count {
  font-family: var(--font-mono, monospace);
  font-size: 11px;
  color: var(--ink-subtle);
  flex-shrink: 0;
}
.bm-folder--active .bm-folder__count {
  color: var(--brand-blue-deep);
  opacity: 0.8;
}
/* Loesch-Button — nur sichtbar bei Hover */
.bm-folder__delete {
  display: none;
  margin: 0;
  padding: 0;
}
.bm-folder:hover .bm-folder__delete {
  display: inline-block;
}
.bm-folder__delete button {
  background: transparent;
  border: none;
  padding: 2px 4px;
  border-radius: 4px;
  color: var(--ink-subtle);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
}
.bm-folder__delete button:hover {
  background: rgba(239, 68, 68, 0.1);
  color: #DC2626;
}

/* Drag-Over-State: Ordner leuchtet auf, wenn ein Paper darueber gezogen wird */
.bm-folder--drop-active {
  background: var(--accent-lime-soft) !important;
  color: var(--moss-deep) !important;
  outline: 2px dashed var(--accent-lime-deep);
  outline-offset: -2px;
  transform: scale(1.02);
}
.bm-folder--drop-active .bm-folder__count {
  color: var(--moss-deep) !important;
}

/* Neuer-Ordner-Form */
.bm-folder-new {
  display: flex;
  gap: 4px;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px dashed var(--border);
}
.bm-folder-new__input {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 12px;
  padding: 6px 8px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--ink);
}
.bm-folder-new__input:focus {
  outline: none;
  border-color: var(--brand-blue);
  background: var(--brand-blue-soft);
}
.bm-folder-new__btn {
  flex-shrink: 0;
  background: var(--ink);
  color: var(--surface);
  border: none;
  padding: 0 8px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.bm-folder-new__btn:hover {
  background: var(--brand-blue-deep);
}
.bm-folders__hint {
  margin-top: 12px;
  padding: 8px;
  font-size: 10.5px;
  line-height: 1.4;
  color: var(--ink-subtle);
  background: var(--surface-sunken);
  border-radius: var(--radius-sm);
}

/* Rechte Spalte: Bookmark-Liste */
.bm-main {
  min-width: 0;
}

/* Hinweis: aktiver Filter-Ordner */
.bm-active-folder {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  margin-bottom: 16px;
  background: var(--brand-blue-soft);
  border-left: 3px solid var(--brand-blue);
  border-radius: var(--radius-sm);
  font-size: 12px;
}
.bm-active-folder__name {
  color: var(--brand-blue-deep);
  font-weight: 600;
}
.bm-active-folder__clear {
  margin-left: auto;
  color: var(--ink-muted);
  font-size: 11px;
  text-decoration: none;
}
.bm-active-folder__clear:hover {
  color: var(--ink);
}

/* Paper-Card-Wrapper (Drag-Source) */
.bm-paper-wrap {
  position: relative;
  cursor: grab;
  transition: opacity 150ms var(--ease), transform 150ms var(--ease);
}
.bm-paper-wrap:active {
  cursor: grabbing;
}
.bm-paper-wrap--dragging {
  opacity: 0.4;
  transform: scale(0.98);
}

/* Pointer-Drag (browser-unabhaengig): schwebender Ghost am Cursor + Body-Zustand.
   Ersetzt natives HTML5-DnD, das v.a. in Safari/Firefox ueber Links/Text
   unzuverlaessig war. Ghost ist pointer-events:none, damit elementFromPoint
   den Ordner darunter findet. */
.bm-drag-ghost {
  position: fixed;
  z-index: 9999;
  pointer-events: none;
  transform: translate(14px, 12px);
  max-width: 260px;
  padding: 7px 12px;
  border-radius: 8px;
  background: var(--ink, #0E1B2C);
  color: #fff;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  box-shadow: 0 8px 24px rgba(14, 27, 44, 0.28);
  opacity: 0.96;
}
body.bm-dragging-active {
  cursor: grabbing;
  user-select: none;
  -webkit-user-select: none;
}

/* Folder-Pills unter jeder Paper-Card */
.bm-paper-folders {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin: -2px 0 6px 12px;
  padding-left: 4px;
}
.bm-folder-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 10.5px;
  padding: 2px 6px 2px 6px;
  background: var(--surface-sunken);
  color: var(--ink-muted);
  border: 1px solid var(--border);
  border-radius: 999px;
  line-height: 1.4;
}
.bm-folder-pill svg {
  opacity: 0.6;
}
.bm-folder-pill__remove {
  background: transparent;
  border: none;
  padding: 0 2px;
  color: var(--ink-subtle);
  cursor: pointer;
  font-size: 13px;
  line-height: 1;
  margin-left: 2px;
}
/* Folder-Pills klickbar (oeffnen den Picker). Cursor + hover-feedback */
.bm-folder-pill--clickable {
  cursor: pointer;
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.bm-folder-pill--clickable:hover {
  background: var(--brand-blue-soft);
  border-color: var(--brand-blue);
  color: var(--brand-blue-deep);
}
.bm-folder-pill--clickable:focus-visible {
  outline: 2px solid var(--brand-blue);
  outline-offset: 1px;
}

/* "+ in Ordner" Plus-Pill — dezent, derselbe Pill-Stil wie die Folder-Pills */
.bm-folder-add-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 10.5px;
  padding: 2px 8px;
  background: transparent;
  color: var(--ink-subtle);
  border: 1px dashed var(--border-strong);
  border-radius: 999px;
  line-height: 1.4;
  cursor: pointer;
  transition: all var(--dur) var(--ease);
  user-select: none;
}
.bm-folder-add-pill:hover {
  background: var(--brand-blue-soft);
  border-color: var(--brand-blue);
  border-style: solid;
  color: var(--brand-blue-deep);
}
.bm-folder-add-pill:focus-visible {
  outline: 2px solid var(--brand-blue);
  outline-offset: 1px;
}
.bm-folder-add-pill svg {
  opacity: 0.7;
}
.bm-folder-add-pill__label {
  font-weight: 500;
}

/* Bottom-Sheet fuer Folder-Picker — Default versteckt, Mobile zeigt es als slide-up */
.bm-folder-picker-sheet,
.bm-folder-picker-sheet__backdrop {
  display: none;
}

.bm-folder-pill__remove:hover {
  color: #DC2626;
}

/* HTMX micro */
.htmx-swapping { opacity: 0.4; transition: opacity 150ms var(--ease); }
.htmx-settling { opacity: 1; transition: opacity 150ms var(--ease); }
button[disabled], button.htmx-request {
  opacity: 0.55; cursor: progress; pointer-events: none;
}

/* <details> marker hide */
details > summary { list-style: none; cursor: pointer; }
details > summary::-webkit-details-marker { display: none; }

/* ---------- Print ---------- */
@media print {
  .sidebar-fixed, .app-footer, form, button { display: none !important; }
  .main-with-sidebar { margin-left: 0; }
  body { background: white !important; }
}

/* ============================================================
   MOBILE — App-Feel-Refactor (Runde 2)
   Strategie: Echtes App-Pattern statt Desktop-mit-Burger.
   - Bottom-Navigation statt Sidebar auf Mobile
   - Kein horizontaler Scroll irgendwo
   - Touch-Targets min 44x44px (Apple-HIG)
   - Safe-Area-Insets fuer iPhone Home-Indicator
   ============================================================ */

/* Global safety: kein horizontal-scroll auf body-Ebene.
   `clip` (statt `hidden`) verhindert position:sticky-Bug und ist die
   modernere Variante; Fallback `hidden` fuer aeltere Browser. */
html, body {
  overflow-x: hidden;
  overflow-x: clip;
  max-width: 100vw;
}
/* Wurzel-Container: kein Element darf den Viewport sprengen */
.main-with-sidebar,
main {
  max-width: 100vw;
  overflow-x: clip;
}
/* Such-Seite + Filter-Card + Author-Chip: keine ueberlaufenden Inhalte */
.filter-card,
.search-form__top,
.search-form__field,
.filter-block,
.author-chip {
  min-width: 0;
  max-width: 100%;
}
.author-chip {
  word-break: break-word;
  overflow-wrap: anywhere;
}

/* ----------------------------------------------------------
   1. Paper-Card Action-Bar: Touch-Targets auf min 44px
      (Apple-HIG — gilt fuer alle Breakpoints)
   ---------------------------------------------------------- */
.paper-card__bookmark,
.paper-card .flex.flex-wrap.items-center > button,
.paper-card .flex.flex-wrap.items-center > a {
  min-height: 36px;
  display: inline-flex;
  align-items: center;
}

/* ----------------------------------------------------------
   2. Tabellen — overflow-x wrap (global, kein page-scroll)
   ---------------------------------------------------------- */
.table-scroll-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* ----------------------------------------------------------
   3. Bookmarks-Folder-Sidebar: Mobile-Toggle-State (default)
   ---------------------------------------------------------- */
#bm-folders-toggle { display: none; }

.bm-folders-trigger {
  display: none; /* nur auf Mobile sichtbar */
}

/* ============================================================
   BOTTOM NAVIGATION (Mobile App-Pattern)
   Ersetzt Sidebar + Burger auf < 768px komplett.
   Fixe Bar unten, 60px hoch, 5 Tabs + Mehr-Panel.
   ============================================================ */

/* Checkbox-Toggle fuer das Mehr-Panel (JS-frei) */
.mob-more-toggle-input { display: none; }

/* Bottom-Nav-Bar: auf Desktop verborgen */
.mob-bottom-nav {
  display: none;
}

/* Mehr-Panel: auf Desktop verborgen */
.mob-more-panel {
  display: none;
}

/* Mehr-Backdrop: auf Desktop verborgen */
.mob-more-backdrop {
  display: none;
}

/* ============================================================
   RESPONSIVE BREAKPOINTS
   ============================================================ */

/* ---- Tablet: 640-900px ---- */
@media (max-width: 900px) {
  /* Dashboard: Zwei-Spalten-Layout auf 1 Spalte
     (Aktivitaeten-Timeline wandert unter Agenten) */
  .dash-columns {
    grid-template-columns: 1fr;
  }
}

/* ---- Mobile: < 768px ---- */
@media (max-width: 768px) {

  /* 1. Sidebar: komplett ausblenden — Bottom-Nav uebernimmt */
  .sidebar-fixed {
    display: none !important;
  }

  /* Kein Offset mehr — Sidebar ist weg */
  .main-with-sidebar {
    margin-left: 0;
  }

  /* Kein horizontaler Scroll irgendwo — gezielte Elemente statt * */
  img, video, canvas, iframe, embed { max-width: 100%; height: auto; }

  /* ---- Bottom-Navigation aktivieren ---- */
  .mob-bottom-nav {
    display: flex;
    align-items: stretch;
    position: fixed;
    bottom: 0; left: 0; right: 0;
    height: 60px;
    /* Safe-Area-Insets fuer iPhones mit Home-Indicator */
    padding-bottom: env(safe-area-inset-bottom, 0px);
    background: var(--surface);
    border-top: 1px solid var(--border);
    z-index: 100;
    /* Kein Schatten — klare Linie reicht */
  }

  .mob-bottom-nav__item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    padding: 8px 4px;
    color: var(--ink-subtle);
    text-decoration: none;
    cursor: pointer;
    user-select: none;
    position: relative;
    /* Touch-Target: mind. 44px via flex-Dehnung */
    min-height: 44px;
    transition: color var(--dur) var(--ease), background var(--dur) var(--ease);
    border: none;
    background: transparent;
    -webkit-tap-highlight-color: transparent;
  }
  .mob-bottom-nav__item:active {
    background: var(--surface-sunken);
  }
  .mob-bottom-nav__item.is-active {
    color: var(--brand-blue-deep);
  }
  /* Lime-Linie oben am aktiven Tab */
  .mob-bottom-nav__item.is-active::before {
    content: '';
    position: absolute;
    top: 0; left: 12px; right: 12px;
    height: 2px;
    background: var(--accent-lime-deep);
    border-radius: 0 0 2px 2px;
  }
  .mob-bottom-nav__label {
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.02em;
    line-height: 1;
    font-family: var(--font-body);
  }

  /* ---- Mehr-Panel (slidet von unten rein) ---- */
  .mob-more-panel {
    display: block;
    position: fixed;
    bottom: 0; left: 0; right: 0;
    z-index: 200;
    /* Standard: versteckt (transform nach unten geschoben) */
    transform: translateY(100%);
    transition: transform 280ms var(--ease);
    /* Safe-Area unten */
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }
  /* Wenn Toggle gecheckt: Panel slidet rein */
  .mob-more-toggle-input:checked ~ .mob-more-panel {
    transform: translateY(0);
  }

  .mob-more-panel__inner {
    background: var(--surface);
    border-top: 1px solid var(--border);
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    padding: 0 0 calc(72px + env(safe-area-inset-bottom, 0px));
    box-shadow: 0 -8px 30px rgba(14, 27, 44, 0.12);
    /* Maxhoehe: nie mehr als 80% Viewport */
    max-height: 80vh;
    overflow-y: auto;
  }

  .mob-more-panel__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px 12px;
    border-bottom: 1px solid var(--border);
  }
  .mob-more-panel__title {
    font-size: 14px;
    font-weight: 600;
    color: var(--ink);
    font-family: var(--font-body);
  }
  .mob-more-panel__close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: var(--radius-sm);
    color: var(--ink-muted);
    cursor: pointer;
    transition: background var(--dur) var(--ease);
  }
  .mob-more-panel__close:hover {
    background: var(--surface-sunken);
  }

  .mob-more-panel__link {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 20px;
    text-decoration: none;
    color: var(--ink);
    border-bottom: 1px solid var(--border);
    min-height: 52px;
    transition: background var(--dur) var(--ease);
    -webkit-tap-highlight-color: transparent;
  }
  .mob-more-panel__link:active,
  .mob-more-panel__link:hover {
    background: var(--surface-sunken);
  }
  .mob-more-panel__link.is-active {
    color: var(--brand-blue-deep);
    background: var(--brand-blue-soft);
  }
  .mob-more-panel__link-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: var(--radius-sm);
    background: var(--surface-sunken);
    color: var(--ink-muted);
    flex-shrink: 0;
  }
  .mob-more-panel__link.is-active .mob-more-panel__link-icon {
    background: var(--brand-blue-soft);
    color: var(--brand-blue-deep);
  }
  .mob-more-panel__link-label {
    flex: 1;
    font-size: 15px;
    font-weight: 500;
  }
  .mob-more-panel__link-arrow {
    color: var(--ink-subtle);
    flex-shrink: 0;
  }

  .mob-more-panel__divider {
    height: 8px;
    background: var(--surface-sunken);
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
  }

  /* Gruppen-Header analog zur Desktop-Sidebar (.group-label) */
  .mob-more-panel__section-label {
    padding: 14px 20px 6px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--ink-subtle);
    font-family: var(--font-body);
  }

  /* Kompakte Footer-Stats am Panel-Ende — dezente, schlichte Zeile */
  .mob-more-panel__stats {
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding: 14px 20px 4px;
    font-size: 11.5px;
    color: var(--ink-muted);
    font-family: var(--font-body);
  }
  .mob-more-panel__stats-counts {
    display: flex;
    align-items: center;
    gap: 6px;
  }
  .mob-more-panel__stats-counts strong {
    font-family: var(--font-mono);
    font-weight: 600;
    color: var(--ink);
  }
  .mob-more-panel__stats-sep {
    color: var(--ink-subtle);
  }
  .mob-more-panel__stats-update {
    display: flex;
    align-items: center;
    gap: 6px;
    color: var(--ink-subtle);
  }
  .mob-more-panel__stats-update time {
    font-family: var(--font-mono);
  }

  .mob-more-panel__user {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 14px 20px 8px;
  }
  .mob-more-panel__user-name {
    font-size: 13px;
    font-weight: 600;
    color: var(--ink);
    flex: 1;
  }
  .mob-more-panel__user-badge {
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    padding: 2px 8px;
    border-radius: 999px;
    background: var(--accent-lime-soft);
    color: var(--moss-deep);
  }

  .mob-more-panel__logout-wrap {
    padding: 12px 20px;
  }
  .mob-more-panel__logout-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    border-radius: var(--radius-sm);
    background: transparent;
    border: 1px solid var(--border-strong);
    color: var(--danger);
    font-family: var(--font-body);
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    width: 100%;
    justify-content: center;
    transition: background var(--dur) var(--ease);
  }
  .mob-more-panel__logout-btn:hover,
  .mob-more-panel__logout-btn:active {
    background: rgba(239, 68, 68, 0.06);
  }

  /* Backdrop fuer das Mehr-Panel */
  .mob-more-backdrop {
    display: block;
    position: fixed;
    inset: 0;
    background: rgba(14, 27, 44, 0.4);
    z-index: 199;
    opacity: 0;
    pointer-events: none;
    transition: opacity 280ms var(--ease);
  }
  .mob-more-toggle-input:checked ~ .mob-more-backdrop {
    opacity: 1;
    pointer-events: auto;
  }

  /* ---- Content-Padding: Platz fuer Bottom-Nav ---- */
  .app-content {
    padding: 16px 14px 80px;
    /* 80px = 60px Bottom-Nav + 20px Luft */
    /* + safe-area-inset-bottom fuer iPhones */
    padding-bottom: max(80px, calc(60px + env(safe-area-inset-bottom, 0px) + 16px));
  }

  /* Footer auf Mobile komplett verstecken — Bottom-Nav ist der Footer */
  .app-footer {
    display: none;
  }

  /* 2. Page-Hero: Title kleiner */
  .page-hero h1,
  h1.page-title {
    font-size: 22px;
  }

  /* 3. Dashboard: KPI-Grid 2 Spalten (passt auf 375px) */
  .grid.grid-cols-2 {
    grid-template-columns: 1fr 1fr;
  }

  /* 4. Dashboard: Brand-Block auf Mobile — Logo NEBEN dem Text
     (User-Wunsch "ich moechte auf der startseite auch mein logo sehen,
     das symbol neben dem text").
     Template hat 3 direkte Kinder (mark, name, tagline). Mit CSS-Grid
     bauen wir 2 Spalten: Logo links (spannt beide Zeilen), name+tagline
     gestapelt rechts. Das ganze Grid wird im Container zentriert. */
  .dash-brand-block {
    display: grid;
    grid-template-columns: auto auto;
    grid-template-rows: auto auto;
    column-gap: 12px;
    row-gap: 0;
    justify-content: center;
    align-items: center;
    text-align: left;
    padding: 12px 0 10px;
  }
  .dash-brand-block .brand-mark {
    /* Vorher display: none — jetzt sichtbar aber kompakt (48px statt
       Desktop-Hero-Large 84px). Spannt beide Grid-Zeilen damit Name+
       Tagline rechts daneben gestapelt sitzen. */
    display: block;
    width: 48px;
    height: 48px;
    margin: 0;
    flex-shrink: 0;
    grid-column: 1;
    grid-row: 1 / 3;
  }
  .dash-brand-block__name {
    font-size: 22px;
    line-height: 1.05;
    grid-column: 2;
    grid-row: 1;
  }
  .dash-brand-block__tagline {
    font-size: 9px;
    margin-top: 2px;
    grid-column: 2;
    grid-row: 2;
  }

  /* 5. Dashboard: Hero kompakter */
  .dash-hero {
    padding: 16px 16px 14px;
    margin-bottom: 14px;
  }
  .dash-hero__title {
    font-size: 20px;
  }
  .dash-hero__deco {
    display: none;
  }
  /* Actions auf Mobile: App-Tile-Grid statt endlose Button-Liste.
     Primary-Action ("Neue Papers holen") spannt volle Breite oben, alle
     anderen kommen in ein 2-Spalten-Grid darunter — Icon prominent,
     Label dezent darunter. Touch-friendly, kompakt, visuell aufgeraeumt. */
  .dash-hero__actions {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    margin-top: 14px;
    align-items: stretch;
  }
  /* Primary-Action (admin: "Neue Papers holen") oben volle Breite */
  .dash-hero__actions > .btn-primary {
    grid-column: 1 / -1;
    height: auto;
    min-height: 52px;
    padding: 12px 16px;
    border-radius: 12px;
    font-size: 14px;
    font-weight: 600;
  }
  .dash-hero__actions > .btn-primary svg {
    width: 18px;
    height: 18px;
  }
  /* Alle anderen: Tile-Style mit Icon oben + Label drunter */
  .dash-hero__actions > .btn:not(.btn-primary),
  .dash-hero__actions > a.btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: auto;
    min-height: 76px;
    padding: 14px 10px;
    border-radius: 12px;
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--ink);
    font-size: 12px;
    font-weight: 500;
    line-height: 1.25;
    text-align: center;
  }
  .dash-hero__actions > .btn:not(.btn-primary) svg,
  .dash-hero__actions > a.btn svg {
    width: 22px;
    height: 22px;
    color: var(--ink-muted);
  }
  .dash-hero__actions > .btn:not(.btn-primary):active,
  .dash-hero__actions > a.btn:active {
    background: var(--surface-sunken);
  }
  /* Letztes ungerades Tile spannt volle Breite damit die Reihe nicht
     halb-leer aussieht (z.B. Non-Admin mit 3 Tiles). Wirkt nur wenn die
     vorhergehenden Geschwister even-Anzahl haben — nicht relevant fuer
     Admin (5 Buttons = 1 primary + 4 tiles). */
  .dash-hero__actions > .btn:not(.btn-primary):last-child:nth-child(odd),
  .dash-hero__actions > a.btn:last-child:nth-child(odd) {
    grid-column: 1 / -1;
  }

  /* 6. Paper-Card: Mobile-Stack */
  .paper-card {
    padding-left: 54px !important;
    padding-right: 12px;
  }
  .paper-card__date {
    width: 46px;
  }
  .paper-card__date-year { font-size: 16px; }

  /* Action-Bar Mobile (Phase 3a): 3 Primaer-Pills (Lesezeichen, Notiz,
     Gelesen) immer sichtbar + CSS-only <details>-Overflow („Mehr") fuer
     den Rest. Touch-Targets >=44px.
     WICHTIG: Die Primaer-Aktionen liegen direkt in .paper-card__actions
     (NICHT im <details>) — die Card wird per HTMX outerHTML neu geswappt,
     ein offener Drawer wuerde sonst nach jedem Toggle verloren gehen. */
  .paper-card__actions {
    display: flex !important;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    padding-top: 12px;
    /* Subtle Trenn-Linie obenrum signalisiert: das ist eine eigene Sektion */
    border-top: 1px solid var(--border);
    margin-top: 8px;
  }
  /* Mobil: Desktop-`order`-Choreografie neutralisieren — hier zaehlt die
     natuerliche DOM-Reihenfolge (Bookmark · Notiz · Gelesen · Spacer ·
     Mehr-Drawer). Der Spacer schiebt den „Mehr"-Trigger nach rechts. */
  .paper-card__actions > .paper-card__bookmark,
  .paper-card__actions > .paper-card__note-btn,
  .paper-card__actions > .paper-card__status-toggle,
  .paper-card__actions > .paper-card__actions-spacer,
  .paper-card__actions > .paper-card__more {
    order: 0;
  }
  .paper-card__actions > .paper-card__actions-spacer { flex: 1 1 auto; }

  /* PILL-Style fuer die Primaer-Aktionen (direkte Kinder: Bookmark, Notiz=
     action-link/note-btn, Gelesen=status-toggle). Voll-rund, Icon + Label. */
  .paper-card__actions > .paper-card__bookmark,
  .paper-card__actions > .paper-card__action-link,
  .paper-card__actions > .paper-card__status-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 44px;
    padding: 9px 16px;
    font-size: 12.5px;
    font-weight: 500;
    border-radius: 999px;
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--ink-muted);
    text-align: center;
    white-space: nowrap;
    transition: background 120ms var(--ease), color 120ms var(--ease),
                border-color 120ms var(--ease);
    grid-column: auto;
    flex: 0 0 auto;
  }
  .paper-card__actions > .paper-card__bookmark:active,
  .paper-card__actions > .paper-card__action-link:active,
  .paper-card__actions > .paper-card__status-toggle:active {
    transform: scale(0.96);
  }

  /* Aktive Zustaende konsistent in Lime — wie auf Desktop */
  .paper-card__actions > .paper-card__bookmark.is-on,
  .paper-card__actions > .paper-card__status-toggle.is-on {
    background: var(--accent-lime-soft);
    color: var(--moss-deep);
    border-color: var(--accent-lime);
    font-weight: 600;
  }

  /* Hover (Tablet mit Maus): leichter Lime-Touch. (hover + pointer:fine
     -> robust gegen Sticky-Hover auf Touch-Devices die fakes-Hover machen) */
  @media (hover: hover) and (pointer: fine) {
    .paper-card__actions > .paper-card__bookmark:hover,
    .paper-card__actions > .paper-card__action-link:hover,
    .paper-card__actions > .paper-card__status-toggle:hover {
      background: var(--accent-lime-soft);
      color: var(--moss-deep);
      border-color: var(--accent-lime);
    }
  }

  /* ---- Overflow-Drawer (.paper-card__more, Checkbox-Hack) ---- */
  /* Mobil: KEIN display:contents — der Container wird ein echter Block mit
     Trigger + per Checkbox aufklappbarem Item-Stack. */
  .paper-card__more {
    display: block;
    flex: 0 0 auto;
  }
  /* Checkbox versteckt, aber fokussierbar (Tastatur) — getoggelt per Label. */
  .paper-card__more-toggle {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
  }
  /* Trigger als runde „⋯ Mehr"-Pill, gleiche Hoehe wie die Primaer-Pills. */
  .paper-card__more-trigger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 44px;
    padding: 9px 16px;
    border-radius: 999px;
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--ink-muted);
    font-size: 12.5px;
    font-weight: 500;
    cursor: pointer;
    list-style: none;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
    white-space: nowrap;
  }
  .paper-card__more-trigger:active { transform: scale(0.96); }
  .paper-card__more-toggle:checked ~ .paper-card__more-trigger {
    background: var(--accent-lime-soft);
    color: var(--moss-deep);
    border-color: var(--accent-lime);
  }
  .paper-card__more-dots {
    font-size: 18px;
    line-height: 1;
    margin-top: -2px;
  }

  /* Item-Stack: volle Breite, vertikal — gut tappbar. Standard eingeklappt;
     der Checkbox-Hack (Label toggelt die versteckte Checkbox) klappt auf. */
  .paper-card__more-items {
    display: none;
    flex-direction: column;
    gap: 6px;
    width: 100%;
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px dashed var(--border);
  }
  .paper-card__more-toggle:checked ~ .paper-card__more-items {
    display: flex;
  }
  .paper-card__more-items > .paper-card__action-link,
  .paper-card__more-items > .paper-card__status-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
    width: 100%;
    min-height: 44px;
    padding: 10px 14px;
    font-size: 13px;
    font-weight: 500;
    border-radius: var(--radius-md);
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--ink-muted);
    text-align: left;
    white-space: nowrap;
    transition: background 120ms var(--ease), color 120ms var(--ease),
                border-color 120ms var(--ease);
    grid-column: auto;
    flex: 0 0 auto;
  }
  .paper-card__more-items > .paper-card__action-link:active,
  .paper-card__more-items > .paper-card__status-toggle:active {
    transform: scale(0.985);
  }
  .paper-card__more-items > .paper-card__status-toggle.is-on {
    background: var(--accent-lime-soft);
    color: var(--moss-deep);
    border-color: var(--accent-lime);
    font-weight: 600;
  }
  @media (hover: hover) and (pointer: fine) {
    .paper-card__more-items > .paper-card__action-link:hover,
    .paper-card__more-items > .paper-card__status-toggle:hover {
      background: var(--accent-lime-soft);
      color: var(--moss-deep);
      border-color: var(--accent-lime);
    }
  }

  /* ---- Meta-Zeile / Autoren: sauberes Umbruch-Verhalten, nichts laeuft
       ueber den Card-Rand (Phase 3a). Die Authors-Span enthaelt einen
       „+N"-Toggle-Button → kein hartes .u-ellipsis (das wuerde den Button
       wegklippen), stattdessen Wort-Umbruch erlauben. */
  .paper-card__meta { gap: 6px; }
  .paper-card__authors,
  .paper-card__journal {
    min-width: 0;
    overflow-wrap: anywhere;
    word-break: break-word;
  }

  /* Sub-Breakpoint: sehr enge Viewports (< 480px) — Primaer-Labels
     verstecken → kompakte Icon-Pills, Touch bleibt durch 44px erhalten.
     Gelesen behaelt sein Label (kein Icon, sonst nicht unterscheidbar). */
  @media (max-width: 480px) {
    .paper-card__actions > .paper-card__bookmark .paper-card__action-label,
    .paper-card__actions > .paper-card__note-btn .paper-card__action-label {
      display: none;
    }
    .paper-card__actions > .paper-card__bookmark,
    .paper-card__actions > .paper-card__action-link {
      padding: 9px 14px;
      min-width: 44px;
    }
    .paper-card__actions > .paper-card__status-toggle {
      padding: 9px 14px;
      font-size: 12px;
    }
    .paper-card__more-trigger { padding: 9px 14px; }
    /* Im Drawer Labels IMMER zeigen — dort ist Platz und Klarheit wichtig. */
    .paper-card__more-items .paper-card__action-label { display: inline; }
  }

  /* 7. Chip-Row: horizontal scroll nur wenn zu viele Chips */
  .chip-row {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 4px;
    scrollbar-width: none;
  }
  .chip-row::-webkit-scrollbar { display: none; }
  .chip { flex-shrink: 0; }
  /* .area-chip-row (Inline-Fallback, collapse=false / <= 6 Bereiche) laeuft
     ueber genau diese Regel 7 mit — horizontales Scrollen reicht dort aus,
     kein eigener Mobile-Sonderfall noetig. */

  /* 7b. Bereichs-Dropdown (collapse=true + >6 Bereiche): Popover wird zum
     Bottom-Sheet, analog .journal-filter__sheet — fixed am unteren Rand,
     eigener Header mit Schliessen-X, Backdrop, grosszuegigere Touch-Targets. */
  .area-dropdown { display: block; width: 100%; }
  .area-dropdown__trigger { width: 100%; justify-content: space-between; }
  .area-dropdown__panel {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    top: auto;
    width: auto;
    max-width: none;
    z-index: 200;
    border-radius: 18px 18px 0 0;
    box-shadow: 0 -8px 24px -4px rgba(14, 27, 44, 0.18);
    transform: translateY(100%);
    transition: transform 280ms cubic-bezier(0.16, 1, 0.3, 1);
    max-height: 80vh;
    padding: 0;
    gap: 0;
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }
  .area-dropdown.is-open .area-dropdown__panel {
    transform: translateY(0);
    transition: transform 280ms cubic-bezier(0.16, 1, 0.3, 1);
  }
  .area-dropdown__panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 16px 12px;
    border-bottom: 1px solid var(--border);
    font-weight: 600;
    font-size: 15px;
    color: var(--ink);
    flex-shrink: 0;
  }
  .area-dropdown__close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: none;
    background: none;
    border-radius: 50%;
    color: var(--ink-muted);
    cursor: pointer;
  }
  .area-dropdown__close:active { background: var(--surface-sunken); }
  .area-dropdown__search { padding: 12px 16px 4px; }
  .area-dropdown__list {
    padding: 4px 12px;
    max-height: none;
    flex: 1;
    gap: 2px;
  }
  .area-dropdown__option { padding: 11px 10px; font-size: 14px; min-height: 44px; }
  .area-dropdown__footer { padding: 10px 16px 14px; border-top: 1px solid var(--border); }
  .area-dropdown__backdrop {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 199;
    background: rgba(14, 27, 44, 0.45);
    opacity: 0;
    pointer-events: none;
    transition: opacity 200ms ease;
  }
  .area-dropdown.is-open .area-dropdown__backdrop {
    opacity: 1;
    pointer-events: auto;
  }

  /* 8. Filter-Row: vertikal stacken */
  .filter-row {
    flex-direction: column;
    gap: 12px;
  }
  .filter-group { width: 100%; }
  /* FT50-Mini-Gruppe: Trenner von links (Reihe) auf oben (gestapelt) drehen */
  .filter-group--ft50 {
    padding-left: 0;
    padding-top: 12px;
    border-left: none;
    border-top: 1px dashed var(--border-strong);
  }

  /* 9. Bookmarks: Folder-Panel als Toggle */
  .bm-folders-trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 14px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    cursor: pointer;
    user-select: none;
    margin-bottom: 12px;
    font-size: 14px;
    font-weight: 500;
    color: var(--ink-muted);
    gap: 8px;
    width: 100%;
    text-align: left;
    min-height: 44px; /* Touch-Target */
  }
  .bm-folders-trigger:hover {
    background: var(--surface-sunken);
    color: var(--ink);
  }
  .bm-folders-trigger__icon {
    color: var(--ink-subtle);
    transition: transform 200ms var(--ease);
    flex-shrink: 0;
  }
  .bm-folders-trigger[aria-expanded="true"] .bm-folders-trigger__icon {
    transform: rotate(180deg);
  }

  #bm-folders-panel {
    display: none;
    margin-bottom: 12px;
  }

  .bm-layout {
    grid-template-columns: 1fr;
  }
  .bm-folders {
    position: static;
  }

  /* 10. Admin-Tabelle: Card-Ansicht auf Mobile */
  .admin-table-wrap table {
    display: none; /* Tabelle verstecken */
  }
  .admin-user-cards {
    display: flex;
    flex-direction: column;
    gap: 12px;
  }

  /* 11. Save-Bar: Bottom-Nav beachten */
  .save-bar {
    bottom: calc(72px + env(safe-area-inset-bottom, 0px));
  }

  /* 12. search-form: 1 Spalte */
  .search-form__top {
    grid-template-columns: 1fr;
  }

  /* 13. Agent-Form: Quick-Pick-Row wrappen */
  .quick-pick__row {
    flex-wrap: wrap;
  }

  /* 14. Inputs: font-size 16px verhindert iOS-Zoom-on-Focus */
  input[type="text"],
  input[type="email"],
  input[type="password"],
  input[type="search"],
  select,
  textarea {
    font-size: 16px !important;
  }

  /* Backdrop fuer Off-Canvas war hier — jetzt obsolet */
  .mob-nav-backdrop { display: none; }
  .mob-header { display: none; }

  /* ---- Alle Elemente die ueberlaufen koennen absichern ---- */
  pre, code { white-space: pre-wrap; word-break: break-word; }
  table { word-break: break-word; }

  /* ---- Dash-Columns: 1 Spalte ---- */
  .dash-columns {
    grid-template-columns: 1fr;
  }

  /* ============================================================
     Journal-Filter Mobile-Bottom-Sheet (Punkt 2 der Mobile-Wunschliste)
     ============================================================ */
  .journal-filter__head {
    /* Auf Mobile braucht die Head-Bar weniger Praesenz — der Trigger uebernimmt */
    display: none;
  }
  .journal-filter__mobile-trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    width: 100%;
    padding: 14px 16px;
    background: var(--surface);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-md);
    cursor: pointer;
    font-size: 14px;
    font-weight: 500;
    color: var(--ink);
    min-height: 52px;
    transition: background var(--dur) var(--ease);
  }
  .journal-filter__mobile-trigger:active {
    background: var(--surface-sunken);
  }
  .journal-filter__mobile-trigger-label {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: var(--ink);
  }
  .journal-filter__mobile-trigger-count {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 13px;
    color: var(--ink-muted);
  }
  /* Sheet wird zu fixed-bottom-overlay, default versteckt */
  .journal-filter__sheet {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    top: auto;
    z-index: 200;
    background: var(--surface);
    border-top-left-radius: 18px;
    border-top-right-radius: 18px;
    box-shadow: 0 -8px 24px -4px rgba(14, 27, 44, 0.18);
    transform: translateY(100%);
    transition: transform 280ms cubic-bezier(0.16, 1, 0.3, 1);
    max-height: 85vh;
    display: flex;
    flex-direction: column;
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }
  /* Backdrop: vollflaechig dunkel halbtransparent */
  .journal-filter__sheet-backdrop {
    display: block;
    position: fixed;
    inset: 0;
    background: rgba(14, 27, 44, 0.45);
    z-index: 199;
    opacity: 0;
    pointer-events: none;
    transition: opacity 200ms ease;
  }
  /* Sheet-Header (sticky) + Close-Button */
  .journal-filter__sheet-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 18px 12px;
    border-bottom: 1px solid var(--border);
    font-weight: 600;
    font-size: 15px;
    color: var(--ink);
    flex-shrink: 0;
  }
  .journal-filter__sheet-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    color: var(--ink-muted);
    cursor: pointer;
    transition: background var(--dur) var(--ease);
  }
  .journal-filter__sheet-close:active {
    background: var(--surface-sunken);
  }
  /* Pill-Grid INSIDE des Sheets: 1 Spalte voll-breit, scrollbar */
  .journal-filter__sheet .journal-pill-grid {
    display: flex;
    flex-direction: column;
    gap: 4px;
    max-height: none;
    flex: 1;
    overflow-y: auto;
    padding: 12px 14px;
  }
  .journal-filter__sheet .journal-pill {
    min-height: 48px;
    padding: 10px 14px;
    font-size: 14px;
    border-radius: 8px;
    border: 1px solid var(--border);
    background: var(--surface);
  }
  .journal-filter__sheet .journal-pill:has(input:checked) {
    background: var(--brand-blue-soft);
    border-color: var(--brand-blue);
  }
  .journal-filter__sheet .journal-pill__name {
    font-size: 14px;
    font-weight: 500;
  }
  .journal-filter__sheet .journal-pill__rating {
    min-width: 18px;
    height: 18px;
    padding: 0 4px;
    font-size: 10.5px;
  }
  /* Tatsaechlich genutzte flache Liste (journal-list, siehe oben) INSIDE
     des Sheets: 1 Spalte voll-breit, waechst mit dem Sheet, scrollt intern.
     Groessere Touch-Targets als am Desktop. */
  .journal-filter__sheet .journal-list {
    display: flex;
    flex-direction: column;
    gap: 2px;
    max-height: none;
    flex: 1;
    overflow-y: auto;
    padding: 4px 14px 12px;
  }
  .journal-filter__sheet .journal-row {
    min-height: 44px;
    padding: 8px 8px;
  }
  .journal-filter__sheet .journal-row__name {
    font-size: 14px;
  }
  /* Sheet-Footer: gross-touch "Fertig"-Button */
  .journal-filter__sheet-done {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 8px 14px 14px;
    padding: 14px;
    background: var(--brand-blue-deep);
    color: white;
    border-radius: 10px;
    font-weight: 600;
    font-size: 15px;
    cursor: pointer;
    transition: background var(--dur) var(--ease);
    min-height: 48px;
  }
  .journal-filter__sheet-done:active {
    background: var(--brand-blue);
  }
  /* Open-State: Sheet sichtbar + Backdrop aktiv */
  .journal-filter__sheet-toggle-input:checked ~ .journal-filter__sheet,
  #journals-checkbox-list .journal-filter__sheet-toggle-input:checked ~ .journal-filter__sheet {
    transform: translateY(0);
  }
  .journal-filter__sheet-toggle-input:checked ~ .journal-filter__sheet-backdrop,
  #journals-checkbox-list .journal-filter__sheet-toggle-input:checked ~ .journal-filter__sheet-backdrop {
    opacity: 1;
    pointer-events: auto;
  }
  /* Body-Scroll-Lock simulieren wenn Sheet offen — schwer ohne JS, aber
     overflow-hidden auf html greift wenn der Sheet via fixed-positioned ist */

  /* ============================================================
     Bookmarks Mobile: Drag&Drop ist Touch-untauglich → die Folder-Pills
     selbst (siehe .bm-folder-pill--clickable + .bm-folder-add-pill oben)
     oeffnen das Bottom-Sheet. Etwas groessere Touch-Targets auf Mobile.
     ============================================================ */
  .bm-paper-wrap { cursor: default; }   /* Drag-Cursor weg auf Touch */

  .bm-folder-pill,
  .bm-folder-add-pill {
    font-size: 12px;
    padding: 5px 10px;
    min-height: 30px;
  }
  .bm-folder-pill__remove {
    /* Touch-Target etwas groesser fuer fat fingers */
    padding: 4px 6px;
    font-size: 15px;
    margin-left: 4px;
  }

  /* Bottom-Sheet selbst */
  .bm-folder-picker-sheet {
    display: block;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 210;
    background: var(--surface);
    border-top-left-radius: 18px;
    border-top-right-radius: 18px;
    box-shadow: 0 -8px 24px -4px rgba(14, 27, 44, 0.18);
    transform: translateY(100%);
    transition: transform 280ms cubic-bezier(0.16, 1, 0.3, 1);
    max-height: 80vh;
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }
  .bm-folder-picker-sheet.is-open {
    transform: translateY(0);
  }
  .bm-folder-picker-sheet__backdrop {
    display: block;
    position: fixed;
    inset: 0;
    background: rgba(14, 27, 44, 0.45);
    z-index: 209;
    opacity: 0;
    pointer-events: none;
    transition: opacity 200ms ease;
  }
  .bm-folder-picker-sheet__backdrop.is-open {
    opacity: 1;
    pointer-events: auto;
  }
  .bm-folder-picker-sheet__inner {
    display: flex;
    flex-direction: column;
    max-height: 80vh;
  }
  .bm-folder-picker-sheet__header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    padding: 16px 18px 12px;
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
  }
  .bm-folder-picker-sheet__title {
    font-size: 15px;
    font-weight: 600;
    color: var(--ink);
  }
  .bm-folder-picker-sheet__subtitle {
    font-size: 12px;
    color: var(--ink-muted);
    margin-top: 2px;
    line-height: 1.35;
  }
  .bm-folder-picker-sheet__close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    color: var(--ink-muted);
    background: transparent;
    border: none;
    cursor: pointer;
    flex-shrink: 0;
  }
  .bm-folder-picker-sheet__list {
    flex: 1;
    overflow-y: auto;
    padding: 8px 0;
  }
  .bm-folder-picker-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 18px;
    cursor: pointer;
    transition: background var(--dur) var(--ease);
    min-height: 48px;
  }
  .bm-folder-picker-row:active {
    background: var(--surface-sunken);
  }
  .bm-folder-picker-row__cb {
    width: 20px;
    height: 20px;
    accent-color: var(--brand-blue-deep);
    cursor: pointer;
    flex-shrink: 0;
  }
  .bm-folder-picker-row__icon {
    display: inline-flex;
    align-items: center;
    color: var(--ink-subtle);
    flex-shrink: 0;
  }
  .bm-folder-picker-row__name {
    flex: 1;
    font-size: 14px;
    color: var(--ink);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .bm-folder-picker-row.is-saving {
    opacity: 0.5;
  }
  .bm-folder-picker-sheet__done {
    margin: 12px 14px 14px;
    padding: 14px;
    background: var(--brand-blue-deep);
    color: white;
    border-radius: 10px;
    border: none;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    min-height: 48px;
  }
  .bm-folder-picker-sheet__done:active {
    background: var(--brand-blue);
  }

} /* Ende @media (max-width: 768px) */

/* ============================================================
   ADMIN USER CARDS (Mobile-Alternative zur Tabelle)
   Desktop: display:none (Tabelle ist sichtbar).
   Mobile: Tabelle wird via CSS ausgeblendet, Cards erscheinen.
   ============================================================ */
.admin-user-cards {
  display: none; /* Desktop: Cards versteckt, Tabelle laeuft */
}
.admin-user-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 14px 16px;
  transition: box-shadow var(--dur) var(--ease);
}
.admin-user-card--inactive {
  opacity: 0.6;
}
.admin-user-card__header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
}
.admin-user-card__username {
  font-family: var(--font-mono);
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
  flex: 1;
}
.admin-user-card__display {
  font-size: 12px;
  color: var(--ink-muted);
  margin-bottom: 8px;
}
.admin-user-card__badges {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 10px;
}
.admin-user-card__meta {
  font-size: 11.5px;
  color: var(--ink-subtle);
  font-family: var(--font-mono);
  margin-bottom: 12px;
}
.admin-user-card__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding-top: 10px;
  border-top: 1px solid var(--border);
}
.admin-user-card__action-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 8px 14px;
  border-radius: var(--radius-sm);
  font-size: 13px;
  font-weight: 500;
  font-family: var(--font-body);
  cursor: pointer;
  transition: all var(--dur) var(--ease);
  border: 1px solid var(--border-strong);
  background: var(--surface);
  color: var(--ink-muted);
  min-height: 40px; /* Touch-Target */
  text-decoration: none;
}
.admin-user-card__action-btn:hover {
  background: var(--surface-sunken);
  color: var(--ink);
}
.admin-user-card__action-btn--danger {
  color: var(--danger);
  border-color: rgba(239, 68, 68, 0.3);
}
.admin-user-card__action-btn--danger:hover {
  background: rgba(239, 68, 68, 0.06);
  border-color: rgba(239, 68, 68, 0.5);
}
.admin-user-card__action-btn--safe {
  color: var(--moss-deep);
  border-color: rgba(79, 107, 58, 0.3);
}
.admin-user-card__action-btn--safe:hover {
  background: var(--moss-soft);
}

/* ============================================================
   ADMIN FEEDBACK CARDS (Phase 3b) — Mobile-Fallback fuer die
   Feedback-Tabelle. Gleiches Dual-Render-Muster wie .admin-user-cards:
   Desktop zeigt die Tabelle (.admin-table-wrap), Mobile zeigt die
   Card-Liste. Label/Wert-Paare + vollwertige .btn-Aktionen.
   ============================================================ */
.admin-feedback-cards {
  display: none; /* Desktop: versteckt, Tabelle laeuft */
}
.admin-feedback-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 14px 16px;
}
.admin-feedback-card__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin-bottom: 10px;
}
.admin-feedback-card__message {
  font-size: 14px;
  line-height: 1.5;
  color: var(--ink);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  word-break: break-word;
  margin-bottom: 12px;
}
.admin-feedback-card__meta {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 0 0 12px;
}
.admin-feedback-card__row {
  display: flex;
  align-items: baseline;
  gap: 10px;
  font-size: 12.5px;
}
.admin-feedback-card__row dt {
  flex: 0 0 64px;
  color: var(--ink-subtle);
  font-weight: 600;
  text-transform: uppercase;
  font-size: 10.5px;
  letter-spacing: 0.06em;
}
.admin-feedback-card__row dd {
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
  color: var(--ink-muted);
  overflow-wrap: anywhere;
  word-break: break-word;
}
.admin-feedback-card__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding-top: 12px;
  border-top: 1px solid var(--border);
}

@media (max-width: 768px) {
  /* Cards auf Mobile einblenden, Tabelle ausblenden */
  .admin-user-cards { display: flex; flex-direction: column; gap: 10px; }
  .admin-feedback-cards { display: flex; flex-direction: column; gap: 10px; }
  .admin-table-wrap table { display: none; }
  /* Aber der overflow-x-Container bleibt sichtbar (enthaelt jetzt die Cards via JS-Alternative) */
}

/* ============================================================
   FILTER BOTTOM SHEET (Mobile: Filter-Button + Sheet statt
   horizontaler Chip-Reihe oben)
   ============================================================ */
.filter-sheet-toggle-input { display: none; }

/* Trigger-Button: zeigt Anzahl aktiver Filter */
.filter-sheet-trigger {
  display: none; /* wird auf Mobile via Media-Query eingeblendet */
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  font-size: 14px;
  font-weight: 500;
  color: var(--ink);
  cursor: pointer;
  min-height: 44px;
  width: 100%;
  font-family: var(--font-body);
  transition: background var(--dur) var(--ease);
}
.filter-sheet-trigger:hover,
.filter-sheet-trigger:active {
  background: var(--surface-sunken);
}
.filter-sheet-trigger__count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  background: var(--brand-blue-deep);
  color: white;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  font-family: var(--font-mono);
}

/* Bottom-Sheet: slidet von unten rein */
.filter-bottom-sheet {
  display: none; /* Desktop: unsichtbar, normaler Filter */
}

@media (max-width: 768px) {
  /* Filter-Trigger einblenden auf Mobile */
  .filter-sheet-trigger { display: flex; }

  /* Normaler Filter-Block auf Mobile ausblenden (nur im Agent-Detail-Context) */
  .filter-mobile-hidden { display: none !important; }

  /* Bottom-Sheet */
  .filter-bottom-sheet {
    display: block;
    position: fixed;
    bottom: 0; left: 0; right: 0;
    z-index: 150;
    transform: translateY(100%);
    transition: transform 280ms var(--ease);
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }
  .filter-sheet-toggle-input:checked ~ .filter-bottom-sheet {
    transform: translateY(0);
  }
  .filter-bottom-sheet__inner {
    background: var(--surface);
    border-top: 1px solid var(--border);
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    padding: 0 0 calc(72px + env(safe-area-inset-bottom, 0px));
    box-shadow: 0 -8px 30px rgba(14, 27, 44, 0.12);
    max-height: 85vh;
    overflow-y: auto;
  }
  .filter-bottom-sheet__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px 12px;
    border-bottom: 1px solid var(--border);
    position: sticky;
    top: 0;
    background: var(--surface);
    z-index: 1;
  }
  .filter-bottom-sheet__title {
    font-size: 15px;
    font-weight: 600;
    color: var(--ink);
  }
  .filter-bottom-sheet__close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: var(--radius-sm);
    color: var(--ink-muted);
    cursor: pointer;
    transition: background var(--dur) var(--ease);
    border: none;
    background: transparent;
  }
  .filter-bottom-sheet__close:hover {
    background: var(--surface-sunken);
  }
  .filter-bottom-sheet__body {
    padding: 16px 20px;
    display: flex;
    flex-direction: column;
    gap: 16px;
  }
  .filter-bottom-sheet__apply {
    padding: 12px 20px;
    border-top: 1px solid var(--border);
    background: var(--surface);
  }
  .filter-bottom-sheet__apply .btn {
    width: 100%;
    height: 48px;
    font-size: 15px;
  }
  /* Backdrop fuer Filter-Sheet */
  .filter-sheet-backdrop {
    display: block;
    position: fixed;
    inset: 0;
    background: rgba(14, 27, 44, 0.4);
    z-index: 149;
    opacity: 0;
    pointer-events: none;
    transition: opacity 280ms var(--ease);
  }
  .filter-sheet-toggle-input:checked ~ .filter-sheet-backdrop {
    opacity: 1;
    pointer-events: auto;
  }
}

/* ============================================================
   TOUR TOOLTIP — Mobile Bottom-Sheet-Style
   (Erweiterung der bestehenden Tour-CSS-Regeln)
   ============================================================ */
@media (max-width: 600px) {
  /* Tooltip: vollbreites Bottom-Sheet statt schwebendes Popup */
  .tour-tooltip {
    position: fixed !important;
    bottom: calc(60px + env(safe-area-inset-bottom, 0px)) !important;
    left: 0 !important;
    right: 0 !important;
    top: auto !important;
    width: 100% !important;
    max-width: 100% !important;
    /* Sheet ist am unteren Rand verankert (ueber der 60px-Bottom-Nav) —
       darf nach oben nicht ueber den Viewport ragen. Deckel: alles oberhalb
       von Sheet-Boden + kleiner Sicherheitsabstand. Intern scrollbar
       (overflow-y:auto erbt aus der Basis-Regel). */
    max-height: calc(100vh - 60px - env(safe-area-inset-bottom, 0px) - 24px) !important;
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    border-left: none;
    border-right: none;
    border-bottom: none;
    padding: 20px 20px 16px;
    box-shadow: 0 -8px 30px rgba(14, 27, 44, 0.15);
  }
  .tour-tooltip__title { font-size: 19px; }
  .tour-tooltip__text { font-size: 14px; margin-bottom: 12px; }
  .tour-tooltip__buttons {
    flex-direction: row;
    align-items: center;
  }
  .tour-tooltip__buttons-right {
    gap: 8px;
  }
  .tour-tooltip__buttons-right .tour-btn {
    min-height: 44px; /* Apple-HIG Touch-Target */
    padding: 10px 18px;
  }
  .tour-btn--ghost { min-height: 44px; }
}

/* ---- Sehr kleine Phones: < 400px ---- */
@media (max-width: 400px) {
  .app-content {
    padding: 10px 10px;
    padding-bottom: max(76px, calc(60px + env(safe-area-inset-bottom, 0px) + 12px));
  }

  /* Login: Card-Padding reduzieren */
  .login-card { padding: 18px 14px; }

  /* KPI-Karten Mobile: clamp() oben uebernimmt fluid sizing. Hier nur
     Min-Werte feiner einstellen damit auf sehr schmalen Phones (320px)
     die Cards nicht zu zerquetscht wirken. */
  .kpi-card { border-radius: 12px; }
  .kpi-card__label { font-size: 10px; }

  /* Dash-Hero weiter komprimieren */
  .dash-hero { padding: 12px 12px 10px; }
  .dash-hero__title { font-size: 17px; }

  /* Paper-Card: Date-Stripe kompakter */
  .paper-card { padding-left: 46px !important; }
  .paper-card__date { width: 38px; }
  .paper-card__date-year { font-size: 13px; }
  .paper-card__date-month { font-size: 9px; }
  .paper-card__date-day { display: none; }
  .paper-card__date-source { display: none; }
}

/* ---------- Connected Papers ---------- */
.connected-graph {
  position: relative;
  width: 100%;
  height: min(95vh, 1100px);
  min-height: 520px;
  /* Radial-Gradient gibt dem Graph "Tiefe": helles Zentrum (wo der Seed-
     Node sitzt), nach aussen dunkler Verlauf in Richtung sunken. Subtle
     Inner-Shadow ergaenzt das mit einer leichten Vignette. */
  background:
    radial-gradient(ellipse 80% 70% at 50% 50%,
                    rgba(190, 242, 100, 0.06) 0%,
                    rgba(190, 242, 100, 0.02) 35%,
                    var(--surface-sunken) 75%);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow:
    inset 0 2px 20px rgba(14, 27, 44, 0.06),
    inset 0 -2px 12px rgba(14, 27, 44, 0.04);
  overflow: hidden;
  /* Cursor-Reset — der JS-Hover-Handler setzt den Cursor dynamisch */
  cursor: grab;
}
.connected-graph:active { cursor: grabbing; }
/* Subtle scanline-pattern als Wow-Detail: kaum sichtbar bei normalem
   Look, gibt aber dem Graph eine "tech"-Anmutung. Pseudo-Element damit
   es Pointer-Events nicht stoert. */
.connected-graph::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(circle at 1px 1px,
                    rgba(74, 88, 104, 0.06) 1px,
                    transparent 1px);
  background-size: 24px 24px;
  pointer-events: none;
  z-index: 0;
  opacity: 0.6;
}
/* Mobile: Graph-Container deutlich flacher als Desktop, damit die
   Liste darunter ohne extra-Scroll erreichbar bleibt (User-Wunsch).
   Vorher 380/min(80vh,700px) = der Graph fuellte den ersten Screen
   fast komplett aus. Jetzt 260/min(50vh,420px) — Graph bleibt
   gut bedienbar (60% Viewport-Hoehe in den meisten Cases), aber die
   Liste rutscht direkt darunter ins Sichtfeld. */
@media (max-width: 768px) {
  .connected-graph {
    min-height: 260px;
    /* Phase 3c: leicht reduziert (vorher min(50vh,420px)) — der Graph soll
       den ersten Screen nicht ganz fuellen, damit die gestapelte Liste der
       aehnlichen Paper direkt darunter ins Sichtfeld rutscht. */
    height: min(48vh, 380px);
    border-radius: var(--radius-sm);
  }
}

/* Viewport-Wrapper um den Graph-Container: eigener position:relative-Anker
   fuer die Zoom-Overlay-Buttons (getrennt von .connected-graph, damit
   Cytoscape's DOM-Management den Overlay nicht beruehrt — Cytoscape haengt
   seine Canvas-Layer selbst in #connected-graph ein/aus). Genutzt in
   connected.html UND analyze_result.html (identisches Markup). */
.graph-viewport {
  position: relative;
}
.graph-zoom-controls {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 20;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.graph-zoom-btn {
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--ink-muted);
  box-shadow: var(--shadow-sm);
  cursor: pointer;
  transition: all var(--dur) var(--ease);
}
.graph-zoom-btn:hover {
  background: var(--surface-sunken);
  border-color: var(--border-strong);
  color: var(--ink);
}
.graph-zoom-btn:active {
  transform: scale(0.94);
}

/* Vollbild-Umschalter — Pill unten rechts im Graph-Viewport. Bewusst mit
   Text-Label (im Gegensatz zu den runden Zoom-Buttons oben rechts), damit die
   Funktion selbsterklaerend ist. */
.graph-maximize-btn {
  position: absolute;
  bottom: 12px;
  right: 12px;
  z-index: 20;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 34px;
  padding: 0 13px;
  border-radius: 999px;
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--ink-muted);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  box-shadow: var(--shadow-xs);
  transition: background 150ms, border-color 150ms, color 150ms;
}
.graph-maximize-btn:hover {
  background: var(--surface-sunken);
  border-color: var(--border-strong);
  color: var(--ink);
}
.graph-maximize-btn:active { transform: scale(0.96); }

/* Maximiert: der Zwei-Spalten-Container (Graph + Liste) wird zu einem
   fixierten Vollbild-Overlay. Die Grid-Spalten (col-span-3/2) bleiben via
   Tailwind-Utilities erhalten — nur Position/Groesse aendern sich. */
.connected-maximized {
  position: fixed;
  inset: 0;
  z-index: 1000;
  margin: 0;
  padding: 16px;
  background: var(--background, #F4F4EE);
  overflow: auto;
  align-content: start;
}
/* Im Vollbild fuellen Graph UND Liste die Viewport-Hoehe (statt der
   Default-min(95vh,1100px)-Deckel). 32px = 2x padding. */
.connected-maximized .connected-graph {
  height: calc(100vh - 32px);
  max-height: none;
}
.connected-maximized .connected-list-wrap {
  max-height: calc(100vh - 32px);
}
/* Body-Scroll sperren, solange das Overlay offen ist. */
body.has-maximized-graph { overflow: hidden; }

.connected-list-wrap {
  /* Desktop: gleiche Maxhoehe wie der Graph-Container — Liste scrollt
     intern, Graph daneben bleibt sichtbar (Zwei-Spalten-Layout). */
  max-height: min(95vh, 1100px);
  overflow-y: auto;
}
/* Mobile: Liste sitzt UNTER dem Graph (Single-Column), interner Scroll
   waere stoerend. Maxhoehe weg → natuerlicher Page-Scroll uebernimmt,
   User scrollt durch die Liste wie durch jede andere Seite. */
@media (max-width: 768px) {
  .connected-list-wrap {
    max-height: none;
    overflow-y: visible;
  }
}

.connected-list-item {
  display: block;
  position: relative;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
  text-decoration: none;
  transition: border-color 120ms var(--ease), background 120ms var(--ease),
              box-shadow 120ms var(--ease), transform 120ms var(--ease);
}
.connected-list-item:hover {
  border-color: var(--brand-blue);
  box-shadow: var(--shadow-xs);
  transform: translateY(-1px);
}
/* Markierter Zustand — Lime-Akzent damit es sich vom Hover (blau) absetzt */
.connected-list-item.is-selected {
  border-color: var(--accent-lime-deep);
  background: var(--accent-lime-soft);
  box-shadow: 0 0 0 2px rgba(132, 204, 22, 0.15);
}
.connected-list-item.is-selected:hover {
  border-color: var(--moss-deep);
}

/* Checkbox-Slot — links oben absolut platziert,
   damit das bestehende Block-Layout intakt bleibt */
.connected-list-check-wrap {
  position: absolute;
  top: 8px;
  left: 8px;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
}
.connected-list-check {
  width: 14px;
  height: 14px;
  cursor: pointer;
  accent-color: var(--accent-lime-deep);
  margin: 0;
}
/* Bei vorhandener Checkbox: Content-Padding links erhoehen, damit nichts ueberlappt */
.connected-list-item:has(.connected-list-check-wrap) {
  padding-left: 32px;
}

/* Cross-Hover-Highlight: Graph-Node wird gehoverd → Listen-Item leuchtet auf */
.connected-list-item.is-highlighted {
  border-color: var(--brand-blue);
  background: var(--brand-blue-soft);
  box-shadow: 0 0 0 2px var(--brand-blue-soft), 0 2px 8px rgba(59, 130, 246, 0.18);
  transform: translateY(-1px);
  transition: border-color 120ms var(--ease), background 120ms var(--ease),
              box-shadow 120ms var(--ease), transform 120ms var(--ease);
}

/* Persistente Markierung des aktuell angeklickten Papers (Focus-Center).
   Bleibt blau auch wenn der Hover endet — vom temporaeren Hover-State
   abgesetzt durch staerkere Border + Schatten. */
.connected-list-item.is-current {
  border-color: var(--brand-blue-deep);
  background: var(--brand-blue-soft);
  box-shadow: 0 0 0 2px var(--brand-blue), 0 4px 14px rgba(37, 99, 235, 0.22);
}
.connected-list-item.is-current:hover {
  border-color: var(--brand-blue-deep);
  background: var(--brand-blue-soft);
}
/* Bei gleichzeitig markiert (lime) + current (blau) gewinnt die Markierung,
   damit der User die Auswahl klar erkennen kann. */
.connected-list-item.is-selected.is-current {
  border-color: var(--accent-lime-deep);
  background: var(--accent-lime-soft);
  box-shadow:
    0 0 0 2px var(--brand-blue),
    0 0 0 4px rgba(132, 204, 22, 0.25);
}

/* Status-Badges (gelesen / heruntergeladen / Lesezeichen) in der Treffer-Liste */
.list-status-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  border-radius: 4px;
  flex-shrink: 0;
}
.list-status-badge--read {
  background: var(--accent-lime-soft);
  color: var(--moss-deep);
}
.list-status-badge--downloaded {
  background: var(--brand-blue-soft);
  color: var(--brand-blue-deep);
}
.list-status-badge--bookmarked {
  background: rgba(245, 158, 11, 0.15);
  color: #B45309;
}

/* Focus-Mode: nicht-verbundene Items ausblenden */
.connected-list-item.focus-hidden {
  display: none;
}

/* Toggle "Alle markieren / Alle abwaehlen" oben rechts in der Trefferliste,
   plus der direkte "Excel-Export"-Button daneben (Aufgabe: Export ohne
   vorheriges Markieren) — beide teilen sich dieselbe Pill-Optik. */
.select-all-btn,
.export-all-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-family: var(--font-mono, monospace);
  font-size: 10.5px;
  letter-spacing: 0.03em;
  padding: 3px 8px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--ink-muted);
  cursor: pointer;
  transition: border-color 120ms var(--ease), color 120ms var(--ease), background 120ms var(--ease);
}
.select-all-btn:hover,
.export-all-btn:hover:not(:disabled) {
  border-color: var(--accent-lime-deep);
  color: var(--moss-deep);
  background: var(--accent-lime-soft);
}
.select-all-btn.is-all-selected {
  border-color: var(--accent-lime-deep);
  color: var(--moss-deep);
  background: var(--accent-lime-soft);
}
.export-all-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.export-all-btn .spinner {
  animation: spin 1s linear infinite;
}

/* ============================================================
   ANALYZE-LOADING-OVERLAY — Progress-Bar fuer Text-Analyse
   ============================================================ */
/* Brand-Mark rotiert sanft waehrend des Ladens — symbolisch:
   "der Hybrid-Score wird gerade neu berechnet". */
.analyze-loading__mark .brand-mark {
  animation: brand-mark-spin 3s linear infinite;
}
@keyframes brand-mark-spin {
  to { transform: rotate(360deg); }
}

.analyze-progress-track {
  width: 100%;
  height: 8px;
  background: var(--surface-sunken);
  border-radius: 999px;
  overflow: hidden;
  margin-top: 8px;
}
.analyze-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--brand-blue) 0%, var(--accent-lime-deep) 100%);
  border-radius: 999px;
  transition: width 200ms cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 0 8px rgba(132, 204, 22, 0.4);
}

/* ============================================================
   SAVE-BAR — Floating-Action-Bar fuer markierte Papers
   ============================================================ */
.save-bar {
  position: sticky;
  bottom: 16px;
  z-index: 30;
  margin-top: 12px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  background: var(--ink);
  color: var(--surface);
  border-radius: var(--radius-md);
  box-shadow: 0 10px 30px rgba(14, 27, 44, 0.25);
  animation: save-bar-slide-in 220ms var(--ease);
}
@keyframes save-bar-slide-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
.save-bar__label {
  font-size: 12px;
  flex: 1 1 auto;
}
.save-bar__count {
  font-family: var(--font-mono, monospace);
  font-weight: 700;
  color: var(--accent-lime);
}
.save-bar__btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 12px;
  border-radius: var(--radius-sm);
  border: none;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: background 120ms var(--ease), color 120ms var(--ease);
}
.save-bar__btn--primary {
  background: var(--accent-lime);
  color: var(--ink);
}
.save-bar__btn--primary:hover {
  background: var(--accent-lime-deep);
  color: var(--surface);
}
.save-bar__btn--ghost {
  background: transparent;
  color: rgba(255, 255, 255, 0.7);
  padding: 5px 8px;
}
.save-bar__btn--ghost:hover {
  color: var(--surface);
}
.save-bar__btn--secondary {
  background: rgba(255, 255, 255, 0.12);
  color: var(--surface);
  border: 1px solid rgba(255, 255, 255, 0.2);
}
.save-bar__btn--secondary:hover {
  background: rgba(255, 255, 255, 0.22);
  border-color: rgba(255, 255, 255, 0.35);
}
.save-bar__btn:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}
.save-bar__btn .spinner {
  animation: spin 1s linear infinite;
}
@keyframes spin {
  to { transform: rotate(360deg); }
}

/* ============================================================
   SAVE-FOLDER-MODAL — Ordnerliste + Inline-Anlegen
   ============================================================ */
.save-folder-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
  max-height: 240px;
  overflow-y: auto;
}
.save-folder-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  cursor: pointer;
  text-align: left;
  font-size: 13px;
  color: var(--ink);
  transition: border-color 100ms var(--ease), background 100ms var(--ease), transform 80ms var(--ease);
}
.save-folder-row:hover {
  border-color: var(--brand-blue);
  background: var(--brand-blue-soft);
  transform: translateX(2px);
}
.save-folder-row__icon {
  display: inline-flex;
  align-items: center;
  color: var(--ink-subtle);
  flex-shrink: 0;
}
.save-folder-row:hover .save-folder-row__icon {
  color: var(--brand-blue-deep);
}
.save-folder-row__name {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.save-folder-row__count {
  font-family: var(--font-mono, monospace);
  font-size: 11px;
  color: var(--ink-subtle);
  flex-shrink: 0;
}

.save-folder-new__input {
  flex: 1 1 auto;
  min-width: 0;
  padding: 6px 10px;
  font-size: 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
}
.save-folder-new__input:focus {
  outline: none;
  border-color: var(--brand-blue);
  background: var(--brand-blue-soft);
}

/* Mobile (Phase 3f): „In Ordner speichern"-Modal als Bottom-Sheet.
   Der Outer-Container (#save-folder-modal) zentriert per Tailwind
   (items-center justify-center) — auf Mobile an den unteren Rand andocken.
   Panel: volle Breite, oben abgerundet, scrollbar, Safe-Area unten.
   Desktop (>=769px) bleibt das zentrierte Modal unveraendert. */
@media (max-width: 768px) {
  #save-folder-modal {
    align-items: flex-end !important;
    padding: 0 !important;
  }
  .save-folder-modal__panel {
    max-width: none;
    width: 100%;
    max-height: 90vh;
    overflow-y: auto;
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    padding-bottom: calc(20px + env(safe-area-inset-bottom, 0px));
    animation: save-folder-sheet-up 240ms cubic-bezier(0.16, 1, 0.3, 1);
  }
  @keyframes save-folder-sheet-up {
    from { transform: translateY(100%); }
    to   { transform: translateY(0); }
  }
  /* Ordnerliste darf mehr Hoehe nutzen, da das Sheet hoeher ist. */
  .save-folder-modal__panel .save-folder-list { max-height: 45vh; }
}

/* ============================================================
   UPDATE-NEWS-MODAL — "Was ist neu" nach einem Deploy, einmalig
   (siehe partials/update_news_modal.html) — Desktop zentriertes Panel,
   Mobile Bottom-Sheet. Selbes Baumuster wie #save-folder-modal:
   Backdrop zentriert per Tailwind (fixed inset-0 flex items-center
   justify-center), CSS ueberschreibt align-items auf Mobile.
   ============================================================ */
.update-news-backdrop {
  /* Eigener z-index statt Tailwind-Utility (z-50) — tailwind.css laedt in
     base.html NACH styles.css, wuerde also bei Spezifitaets-Gleichstand
     gewinnen. 300 liegt sicher ueber der mobilen Bottom-Nav (z-index 100)
     und den Bottom-Sheets (bis 210), aber unter dem Tour-Overlay (9000+). */
  z-index: 300;
  background: rgba(14, 27, 44, 0.45);
}
.update-news-modal {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: 0 20px 50px rgba(14, 27, 44, 0.22);
  width: 100%;
  max-width: 480px;
  padding: 24px 24px 20px;
  animation: update-news-fade-in 220ms var(--ease);
}
@keyframes update-news-fade-in {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}
.update-news-modal__caption {
  margin-bottom: 6px;
}
.update-news-modal__title {
  font-family: var(--font-display);
  font-size: 20px;
  line-height: 1.28;
  font-weight: 500;
  color: var(--ink);
  margin: 0 0 14px;
}
.update-news-modal__list {
  display: flex;
  flex-direction: column;
  gap: 9px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.update-news-modal__item {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--ink-muted);
}
.update-news-modal__item svg {
  flex-shrink: 0;
  margin-top: 2px;
  color: var(--moss-deep);
}
.update-news-modal__actions {
  margin-top: 20px;
  display: flex;
  justify-content: flex-end;
}

/* Mobile: Bottom-Sheet statt zentriertem Panel — Safe-Area unten beachtet. */
@media (max-width: 768px) {
  .update-news-backdrop {
    align-items: flex-end !important;
    padding: 0 !important;
  }
  .update-news-modal {
    max-width: none;
    max-height: 85vh;
    overflow-y: auto;
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    padding: 22px 20px calc(20px + env(safe-area-inset-bottom, 0px));
    animation: update-news-sheet-up 240ms cubic-bezier(0.16, 1, 0.3, 1);
  }
  @keyframes update-news-sheet-up {
    from { transform: translateY(100%); }
    to   { transform: translateY(0); }
  }
}

/* Focus-Reset-Button — erscheint wenn ein Node fokussiert ist */
.focus-reset-btn {
  display: none;
  align-items: center;
  gap: 5px;
  padding: 3px 9px;
  border-radius: 4px;
  border: 1px solid var(--border-strong);
  background: var(--surface);
  color: var(--ink-muted);
  font-family: var(--font-body);
  font-size: 11.5px;
  font-weight: 500;
  cursor: pointer;
  transition: all var(--dur) var(--ease);
}
.focus-reset-btn.is-visible {
  display: inline-flex;
}
.focus-reset-btn:hover {
  background: var(--surface-sunken);
  border-color: var(--ink-muted);
  color: var(--ink);
}

/* Paper-Modal Overlay */
#paper-modal {
  backdrop-filter: blur(2px);
}
#paper-modal-content {
  animation: modal-in 180ms var(--ease) both;
}
@keyframes modal-in {
  from { opacity: 0; transform: translateY(8px) scale(0.98); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

.reason-pill {
  display: inline-block;
  font-size: 10.5px;
  line-height: 1.25;
  padding: 3px 7px;
  border-radius: 999px;
  font-weight: 500;
  /* Lange Reason-Strings ("thematisch via corporate social responsibility...")
     wuerden mit nowrap aus dem .connected-list-item-Rahmen ueberlaufen.
     Mit max-width: 100% bleibt die Pill innerhalb der Container-Breite,
     ellipsis kuerzt zu lange Strings. Den vollen Text gibt's via title-
     Attribut on Hover (siehe JS-Renderer in connected.html). */
  max-width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  vertical-align: middle;
}

/* Paper-Card-Verbindungen-Link */
/* Action-Link: einheitliches Pattern fuer DOI/Scholar/Verbindungen-Aktionen */
.paper-card__action-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 8px;
  border-radius: var(--radius-sm, 6px);
  color: var(--ink-subtle);
  font-weight: 500;
  transition: all 120ms var(--ease);
  white-space: nowrap;
}
/* Hover: einheitlich Lime-Soft fuer ALLE Action-Links (DOI / Scholar /
   Notiz / Verbindungen). Vorher hatte nur 'Verbindungen' den lime/moss
   Hover, die anderen den grauen sunken-Hover — User wollte ueberall
   konsistenten Lime-Stil analog Lesezeichen.
   Wichtig: nur auf hover-faehigen Devices (Maus/Trackpad) anwenden —
   sonst bleibt z.B. nach Tap auf "Scholar" auf Mobile der Lime-Look
   sticky, weil iOS-Safari/Android-Chrome :hover nach Tap nicht freigibt. */
@media (hover: hover) and (pointer: fine) {
  .paper-card__action-link:hover {
    color: var(--moss-deep);
    background: var(--accent-lime-soft);
  }
  .paper-card__connections:hover {
    color: var(--moss-deep);
    background: var(--accent-lime-soft);
  }
}

/* Status-Toggles (Gelesen / Geladen / Aussortieren) — Design-Spec:
   padding 5px 8px, color ink-subtle, font-weight 500. */
.paper-card__status-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 5px 8px;
  border-radius: var(--radius-sm, 6px);
  font-weight: 500;
  color: var(--ink-muted);
  transition: all 120ms var(--ease);
  background: transparent;
  white-space: nowrap;
}
/* Hover-States nur auf Hover-Devices (Maus). Auf Touch wuerden sie sonst
   nach Tap sticky bleiben — sehr stoerend. */
@media (hover: hover) and (pointer: fine) {
  .paper-card__status-toggle:hover {
    background: var(--accent-lime-soft);
    color: var(--moss-deep);
  }
  .paper-card__status-toggle.is-on:hover {
    background: var(--accent-lime);
    color: var(--moss-deep);
  }
  .paper-card__status-toggle--download.is-on:hover {
    background: var(--accent-lime);
    color: var(--moss-deep);
  }
}
/* Aktiver Zustand (Gelesen / Geladen markiert): Lime statt grau,
   konsistent mit Lesezeichen/Notiz/Verbindungen. */
.paper-card__status-toggle.is-on {
  background: var(--accent-lime-soft);
  color: var(--moss-deep);
  font-weight: 600;
}
.paper-card__status-toggle--download.is-on {
  background: var(--accent-lime-soft);
  color: var(--moss-deep);
  font-weight: 600;
}

/* ============================================================
   DASHBOARD — Brand-Centerpiece (oberhalb des Welcome-Hero)
   ============================================================ */
.dash-brand-block {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 18px 0 16px;
  margin-bottom: 4px;
  gap: 2px;
}
.dash-brand-block .brand-mark {
  /* Mini-Hover-Effekt: Logo dreht sich beim Mouseover sanft —
     dezentes Detail das das Mark "lebt" macht. */
  transition: transform 380ms var(--ease);
  margin-bottom: -4px;
}
.dash-brand-block:hover .brand-mark {
  transform: rotate(20deg);
}
.dash-brand-block__name {
  font-family: var(--font-display);
  font-size: 34px;
  font-weight: 400;
  letter-spacing: -0.02em;
  color: var(--ink);
  line-height: 1.0;
  margin: 0;
}
.dash-brand-block__tagline {
  font-family: var(--font-body);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-subtle);
  margin-top: 0;
}

/* ============================================================
   DASHBOARD — Hero Banner
   ============================================================ */
.dash-hero {
  position: relative;
  background: linear-gradient(135deg, var(--surface) 0%, var(--surface-sunken) 50%, rgba(219, 234, 254, 0.3) 100%);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 28px 30px 24px;
  margin-bottom: 24px;
  overflow: hidden;
}
.dash-hero__deco {
  position: absolute;
  right: -10px;
  top: -5px;
  width: 220px;
  height: 90px;
  color: var(--ink);
  pointer-events: none;
}
/* (dash-hero__brand-deco wurde durch dash-brand-block oberhalb des Hero
   ersetzt — keine Watermark-Logik mehr noetig.) */
.dash-hero__content { position: relative; z-index: 1; margin-bottom: 16px; }
.dash-hero__title {
  font-family: var(--font-display);
  font-size: 26px;
  font-weight: 500;
  color: var(--ink);
  line-height: 1.2;
  letter-spacing: -0.01em;
  margin: 0 0 6px;
}
.dash-hero__lead {
  font-size: 13.5px;
  color: var(--ink-muted);
  margin: 0;
  max-width: 50ch;
  line-height: 1.5;
}
.dash-hero__actions {
  position: relative;
  z-index: 1;
}
/* Desktop: horizontale Aktionsreihe. Auf <=768px greift stattdessen das
   2-Spalten-Kachel-Grid weiter oben (@media max-width:768px, ~Z.2607).
   Diese Regel MUSS desktop-only sein: ohne den min-width-Guard wuerde sie
   (spaetere Quellposition, gleiche Spezifitaet) das Mobile-Grid
   ueberschreiben -> alle Aktionen landeten in einer abgeschnittenen
   Scroll-Reihe (nur die ersten 3 sichtbar). */
@media (min-width: 769px) {
  .dash-hero__actions {
    display: flex;
    align-items: center;
    gap: 6px;
  }
}

/* ============================================================
   DASHBOARD — KPI Cards (mit Icon + Farbakzent)
   ============================================================ */
/* ============================================================
   DASH-STATS-STRIP — Inline-Statistik statt Card-Grid
   ============================================================
   Loest das Truncation-Problem der frueheren .kpi-card-Loesung: kein
   Box-Container der bei engen Grid-Spalten Text abschneidet. Stattdessen
   Inline-Anordnung mit kleinen Icons + grosser Zahl + Label, getrennt
   durch dezente vertikale Linien. Wraps auf engen Viewports natuerlich. */

/* Wrapper: erzwingt linksbuendig + verhindert dass das inline-flex-Strip
   die volle Spaltenbreite einnimmt. */
.dash-stats-wrap {
  display: flex;
  justify-content: flex-start;
}

.dash-stats-strip {
  /* inline-flex statt flex: der Container shrinkt auf die tatsaechliche
     Breite seines Inhalts. Keine Linien zwischen den Stats — der Gap
     reicht visuell. */
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px 22px;
  padding: 14px 20px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  max-width: 100%;
}

.dash-stat {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.dash-stat__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 8px;
  flex-shrink: 0;
}

.dash-stat__icon--papers {
  background: var(--accent-lime-soft, #ECFCCB);
  color: #4A6B0E;
}
.dash-stat__icon--journals {
  background: var(--moss-soft, #E4ECD9);
  color: var(--moss-deep, #3A5128);
}
.dash-stat__icon--preprints {
  background: #EDE9FE;
  color: #6D28D9;
}

.dash-stat__value {
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  line-height: 1;
}

.dash-stat__label {
  font-size: 12px;
  color: var(--ink-muted);
  letter-spacing: 0.01em;
}

/* "Seit letztem Besuch"-Hinweis als kleiner Text-Block neben den Stats,
   immer sichtbar (Klartext wenn 0). */
.dash-stat-note {
  font-size: 12.5px;
  color: var(--ink-muted);
  line-height: 1.35;
  padding-left: 4px;
  /* Auf engen Viewports darf der Hinweis in die zweite Zeile springen */
  flex-basis: auto;
}
.dash-stat-note__num {
  color: var(--brand-blue-deep, #2563EB);
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-weight: 600;
}

/* Mobile: kleinere Schrift, Hinweis wraps in eigene Zeile via gap */
@media (max-width: 480px) {
  .dash-stats-strip {
    gap: 10px 16px;
    padding: 12px 14px;
  }
  .dash-stat__value { font-size: 18px; }
  .dash-stat__icon { width: 26px; height: 26px; }
  .dash-stat__icon svg { width: 15px; height: 15px; }
  .dash-stat-note { font-size: 11.5px; }
}

/* ============================================================
   KPI-CARDS — Legacy (noch genutzt in /bookmarks, /agent_detail)
   ============================================================ */

.kpi-card {
  display: flex;
  align-items: center;
  /* gap + padding fluid: schrumpft mit der Card-Breite, damit Icon + Wert
     auch in 2-Spalten-Grid mit Sidebar nicht abschneiden */
  gap: clamp(10px, 2cqw, 18px);
  background: linear-gradient(135deg,
    var(--surface) 0%,
    color-mix(in srgb, var(--surface) 95%, var(--sunken) 5%) 100%);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: clamp(14px, 2.5cqw, 22px) clamp(14px, 2.8cqw, 24px);
  transition: box-shadow var(--dur) var(--ease), transform var(--dur) var(--ease);
  position: relative;
  overflow: hidden;
  /* Container-Query-Context: kpi-card__value kann sich an Card-Breite
     orientieren (cqw = % der Container-Breite) */
  container-type: inline-size;
  min-width: 0;  /* damit die Card im Grid shrinkt statt overflow */
}
.kpi-card::before {
  /* Subtiler Akzent-Stripe oben (nicht nur links — gibt mehr Praesenz) */
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--accent-stripe, var(--accent-lime-deep));
  opacity: 0.85;
}
.kpi-card:hover {
  box-shadow: 0 6px 16px -6px rgba(14, 27, 44, 0.12),
              0 2px 4px -1px rgba(14, 27, 44, 0.06);
  transform: translateY(-2px);
}
.kpi-card__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  /* Icon shrinkt mit der Card-Breite — bleibt nie groesser als noetig */
  width: clamp(38px, 9cqw, 52px);
  height: clamp(38px, 9cqw, 52px);
  border-radius: var(--radius-md);
  flex-shrink: 0;
}
.kpi-card__icon svg {
  width: clamp(20px, 5cqw, 26px);
  height: clamp(20px, 5cqw, 26px);
}
.kpi-card__text {
  flex: 1;
  min-width: 0;
}
.kpi-card__label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--ink-subtle);
  margin-bottom: 6px;
  /* Wrap statt ellipsis — "PAPERS"/"JOURNALS" sind kurz, sollen NIE
     abgeschnitten werden. line-height knapp damit kein Layout-Shift. */
  line-height: 1.2;
}
.kpi-card__value {
  font-family: var(--font-mono);
  /* Fluid: 18px auf schmalen Cards (160px), 32px auf weiten (400px+) */
  font-size: clamp(18px, 7cqw, 32px);
  font-weight: 600;
  line-height: 1.05;
  color: var(--ink);
  letter-spacing: -0.02em;
  /* Tabular-nums damit alle Ziffern gleich breit sind (engster Zeichenraum) */
  font-variant-numeric: tabular-nums;
  /* KEIN overflow:hidden mehr — bei engen Cards muss die Zahl voll
     sichtbar sein, lieber Layout-Wechsel auf vertikal (siehe @container). */
  white-space: nowrap;
}

/* Container-Query: wenn die Card unter ~200px Breite faellt, kippt das
   Layout auf vertikal — Icon oben, Label+Wert darunter. Das verhindert
   das im User-Screenshot gezeigte "P..." / "J..."-Truncation auf engen
   Grid-Spalten (Sidebar nebenan, 3-Spalten-KPI in Bookmarks, etc.). */
@container (max-width: 220px) {
  .kpi-card {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    padding: 14px 14px 12px;
  }
  .kpi-card__icon {
    width: 36px;
    height: 36px;
  }
  .kpi-card__icon svg {
    width: 20px;
    height: 20px;
  }
  .kpi-card__value {
    font-size: 24px;
  }
  .kpi-card__label {
    margin-bottom: 4px;
  }
}

/* KPI Farbvarianten — Stripe wird via CSS-Variable gesetzt, kein border-left
   mehr (sieht "eingedrueckt" aus). Stattdessen voller Stripe oben + farbiges Icon. */
.kpi-card--lime { --accent-stripe: var(--accent-lime-deep); }
.kpi-card--lime .kpi-card__icon {
  background: var(--accent-lime-soft);
  color: #4A6B0E;
}
.kpi-card--blue { --accent-stripe: var(--brand-blue); }
.kpi-card--blue .kpi-card__icon {
  background: var(--brand-blue-soft);
  color: var(--brand-blue-deep);
}
.kpi-card--moss { --accent-stripe: var(--moss); }
.kpi-card--moss .kpi-card__icon {
  background: var(--moss-soft);
  color: var(--moss-deep);
}
.kpi-card--accent { --accent-stripe: var(--brand-blue-deep); }
.kpi-card--accent .kpi-card__icon {
  background: rgba(37, 99, 235, 0.08);
  color: var(--brand-blue-deep);
}

/* ============================================================
   DASHBOARD — Zwei-Spalten-Layout (Agenten + Aktivitaeten)
   ============================================================ */
.dash-columns {
  display: grid;
  grid-template-columns: 1fr 300px;
  gap: 28px;
  align-items: start;
}
@media (max-width: 900px) {
  .dash-columns { grid-template-columns: 1fr; }
}
.dash-col-main { min-width: 0; }
.dash-col-side { min-width: 0; }

/* Dashboard Sektions-Trenner */
.section-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 14px;
}
.section-head__dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex-shrink: 0;
}
.section-head__title {
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-muted);
}
.section-head__sub {
  font-size: 11px;
  color: var(--ink-subtle);
  font-weight: 400;
}
.section-head__count {
  margin-left: auto;
  font-size: 11px;
  color: var(--ink-subtle);
  font-family: var(--font-mono);
  background: var(--surface-sunken);
  padding: 1px 7px;
  border-radius: 999px;
  font-weight: 600;
}

/* Dashboard Empty-States */
.dash-empty {
  text-align: center;
  padding: 32px 24px;
  border: 1px dashed var(--border-strong);
  border-radius: var(--radius-md);
  background: var(--surface);
}
.dash-empty__icon {
  color: var(--ink-subtle);
  opacity: 0.35;
  margin-bottom: 12px;
}
.dash-empty__title {
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 500;
  color: var(--ink-muted);
  margin: 0 0 4px;
}
.dash-empty__text {
  font-size: 12.5px;
  color: var(--ink-subtle);
  margin: 0 0 14px;
  max-width: 36ch;
  margin-left: auto;
  margin-right: auto;
  line-height: 1.5;
}

/* ============================================================
   DASHBOARD — Timeline (Aktivitaeten)
   ============================================================ */
.dash-timeline {
  position: relative;
  padding-left: 20px;
}
.dash-timeline::before {
  content: '';
  position: absolute;
  left: 5px;
  top: 4px;
  bottom: 4px;
  width: 1px;
  background: var(--border);
}
.dash-timeline__item {
  position: relative;
  display: flex;
  gap: 12px;
  padding-bottom: 16px;
}
.dash-timeline__item:last-child { padding-bottom: 0; }
.dash-timeline__dot {
  position: absolute;
  left: -20px;
  top: 3px;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  border: 2px solid var(--surface);
  background: var(--border-strong);
  z-index: 1;
}
.dash-timeline__dot--blue { background: var(--brand-blue); }
.dash-timeline__dot--lime { background: var(--accent-lime-deep); }
.dash-timeline__dot--moss { background: var(--moss); }
.dash-timeline__dot--neutral { background: var(--border-strong); }

.dash-timeline__body { flex: 1; min-width: 0; }
.dash-timeline__label {
  font-size: 12px;
  font-weight: 600;
  color: var(--ink);
  line-height: 1.3;
}
.dash-timeline__detail {
  font-size: 11.5px;
  color: var(--ink-muted);
  line-height: 1.4;
}
.dash-timeline__detail strong {
  font-family: var(--font-mono);
  color: var(--ink);
}
.dash-timeline__time {
  font-size: 10px;
  font-family: var(--font-mono);
  color: var(--ink-subtle);
  margin-top: 2px;
}

/* Connected Index — Seed-Vorschlagskarte */
.seed-suggestion-item {
  display: block;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface);
  text-decoration: none;
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.seed-suggestion-item:hover {
  border-color: var(--moss);
  box-shadow: var(--shadow-xs);
}
.seed-suggestion-item__title {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--ink);
  line-height: 1.35;
  margin-bottom: 4px;
}
.seed-suggestion-item__meta {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink-muted);
}
.seed-suggestion-item__cta {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  font-weight: 500;
  color: var(--moss-deep);
  margin-top: 6px;
  padding: 2px 0;
}
.seed-suggestion-item:hover .seed-suggestion-item__cta {
  color: var(--moss);
}

/* ============================================================
   VHB-FILTER (Connected + Analyze)
   ============================================================ */
.vhb-filter {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  padding: 10px 14px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
}
.vhb-filter__row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}
.vhb-filter__label {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-subtle);
  min-width: 52px;
}

/* ============================================================
   THEMEN ERKUNDEN — KACHEL-DRILL (Connected-Index /connected)
   ============================================================ */

/* Brotkrumen-Leiste: Pfad links, "Paper in dieser Auswahl"-Toggle rechts. */
.theme-crumb-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 12px;
}
.theme-crumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
  font-family: var(--font-mono);
  font-size: 12px;
}
/* Klickbare Krumen als Pills mit Flaeche statt reinem Text — das ist der
   primaere Zurueck-Weg auf jeder Ebene (siehe connected_themes.js), muss also
   klar als "das hier kannst du klicken" erkennbar sein, nicht nur blaue Schrift. */
.theme-crumb__item {
  appearance: none;
  border: none;
  background: var(--surface-sunken);
  padding: 4px 10px;
  border-radius: 999px;
  font: inherit;
  color: var(--ink-muted);
  cursor: pointer;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.theme-crumb__item:hover {
  background: var(--brand-blue-soft);
  color: var(--brand-blue-deep);
}
.theme-crumb__item.is-current {
  background: none;
  padding: 4px 2px;
  color: var(--ink);
  font-weight: 600;
  cursor: default;
}
.theme-crumb__item.is-current:hover { background: none; color: var(--ink); }
.theme-crumb__sep {
  color: var(--ink-subtle);
}

/* Status-Zeile ueber dem Kachel-Raster ("N Themen · M Paper insgesamt") */
.theme-status {
  font-size: 11px;
  color: var(--ink-muted);
  margin-bottom: 10px;
}

/* Kachel-Raster — bewusst gleich grosse Kacheln (kein Groessen-Chaos),
   die Fuellfarben-Intensitaet (siehe .theme-tile__fill, inline opacity)
   transportiert die relative Menge. 1 -> 2 -> 3 Spalten. */
.theme-tiles {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
}
@media (min-width: 640px) {
  .theme-tiles { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 960px) {
  .theme-tiles { grid-template-columns: repeat(3, 1fr); }
}

.theme-tile {
  position: relative;
  display: block;
  width: 100%;
  text-align: left;
  appearance: none;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 16px 18px;
  background: var(--surface);
  cursor: pointer;
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease),
              transform var(--dur) var(--ease);
}
.theme-tile:hover {
  border-color: var(--brand-blue);
  box-shadow: var(--shadow-xs);
  transform: translateY(-1px);
}
.theme-tile__fill {
  position: absolute;
  inset: 0;
  z-index: 0;
  background: var(--brand-blue-soft);
}
.theme-tile__name,
.theme-tile__meta,
.theme-tile__more {
  position: relative;
  z-index: 1;
}
.theme-tile__name {
  display: block;
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 600;
  color: var(--ink);
  line-height: 1.25;
  margin-bottom: 2px;
}
.theme-tile__meta {
  display: block;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink-muted);
}
.theme-tile__more {
  margin-top: 9px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  font-weight: 600;
  color: var(--brand-blue-deep);
}

/* Fehler-Zustand fuer die Kachel-Ebene (echte Leer-Ergebnisse zeigen
   stattdessen automatisch das Paper-Panel, siehe connected_themes.js) */
.theme-tiles-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 4px;
  padding: 48px 20px;
  color: var(--ink-subtle);
  min-height: 200px;
}

/* Paper-Panel — ersetzt das Kachel-Raster (Blatt-Ebene oder bewusster Toggle) */
.theme-papers-panel__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 10px;
}
.theme-papers-panel__meta {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink-muted);
}
/* Rechte Seite des Panel-Kopfs: Sortier-Control + Zurueck-Button gemeinsam,
   damit sie auf schmalen Screens zusammen umbrechen statt Meta-Text zu stauchen. */
.theme-papers-panel__actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

/* Sortier-Control: 4 zusammenhaengende Segmente statt Dropdown — bleibt
   "Tool", nicht "Magazin"; aktiver Zustand identisch zu Chips (dunkler Ink-Ton). */
.theme-sort {
  display: inline-flex;
  align-items: stretch;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  overflow: hidden;
  flex-shrink: 0;
}
.theme-sort__btn {
  appearance: none;
  border: none;
  border-left: 1px solid var(--border-strong);
  background: var(--surface);
  color: var(--ink-muted);
  font-family: var(--font-body);
  font-size: 11.5px;
  font-weight: 600;
  padding: 0 10px;
  height: 26px;
  cursor: pointer;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.theme-sort__btn:first-child { border-left: none; }
.theme-sort__btn:hover { background: var(--surface-sunken); color: var(--ink); }
.theme-sort__btn.is-active {
  background: var(--ink);
  color: #fff;
}
.theme-sort__btn.is-active:hover { background: var(--ink); }
@media (pointer: coarse) {
  .theme-sort__btn { min-height: 32px; }
}

/* Paper-Eintrag im Panel — nutzt .connected-list-item als Basis
   (Border/Hover/Radius identisch), Zusatzklasse nur fuer den
   deaktivierten Zustand (kein Embedding -> kein gueltiger Seed-Link). */
.theme-paper-item--disabled {
  cursor: default;
  background: var(--surface-sunken);
}
.theme-paper-item--disabled:hover {
  border-color: var(--border);
  box-shadow: none;
  transform: none;
}
.theme-paper-item--disabled .badge {
  margin-top: 2px;
  white-space: normal;
  line-height: 1.4;
}

/* ============================================================
   ONBOARDING-TOUR — Tutorial-Overlay + Tooltip-Card
   ============================================================ */

/* Backdrop: 4 fixe divs die rund ums gehighlightete Element den
   Hintergrund abdunkeln. Cutout entsteht durch den "leeren" Bereich
   wo die 4 divs nicht hinkommen. */
.tour-overlay-root {
  position: fixed;
  inset: 0;
  z-index: 9000;
  pointer-events: none;
}
.tour-cutout {
  position: fixed;
  background: rgba(14, 27, 44, 0.55);  /* var(--ink) mit Alpha */
  pointer-events: auto;
  cursor: pointer;
  transition: top 280ms ease, left 280ms ease, right 280ms ease,
              bottom 280ms ease, height 280ms ease, width 280ms ease;
}

/* Gehighlightes Element: dezent gelifted + sanfter Pulse. Border nutzt
   die Marken-Lime, damit es zum Brand-Mark passt. */
.tour-highlighted {
  position: relative;
  z-index: 9000;  /* ueber den cutouts, damit clicks darauf gehen */
  outline: 3px solid var(--accent-lime-deep);
  outline-offset: 4px;
  border-radius: 8px;
  animation: tour-pulse 1.6s ease-in-out infinite;
}
@keyframes tour-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(132, 204, 22, 0.5); }
  50%      { box-shadow: 0 0 0 10px rgba(132, 204, 22, 0); }
}

/* Tooltip-Card */
.tour-tooltip {
  position: fixed;
  z-index: 9001;
  width: min(360px, calc(100vw - 32px));
  /* Nie hoeher als der Viewport: deckeln + intern scrollbar.
     Auf kleinen/iPhone-Screens bleiben so die Buttons (Weiter/Zurueck)
     erreichbar, statt unten aus dem Sichtfeld zu ragen.
     Redundant zur Inline-Sicherung in tutorial.js (_positionTooltip),
     aber CSS-seitig sauber dokumentiert. */
  max-height: calc(100vh - 32px);
  overflow-y: auto;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: 0 20px 50px -10px rgba(14, 27, 44, 0.25),
              0 8px 16px -6px rgba(14, 27, 44, 0.15);
  padding: 18px 20px 16px;
  font-family: var(--font-body);
}
.tour-tooltip__counter {
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--brand-blue-deep);
  margin-bottom: 8px;
}
.tour-tooltip__title {
  font-family: var(--font-display);
  font-size: 20px;
  line-height: 1.25;
  color: var(--ink);
  margin-bottom: 8px;
}
.tour-tooltip__text {
  font-size: 14px;
  line-height: 1.55;
  color: var(--ink-muted);
  margin-bottom: 16px;
}
.tour-tooltip__text strong {
  color: var(--ink);
  font-weight: 600;
}
.tour-tooltip__text code {
  font-family: var(--font-mono);
  font-size: 12.5px;
  background: var(--surface-sunken);
  padding: 1px 4px;
  border-radius: 3px;
  color: var(--ink);
}
.tour-tooltip__buttons {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  margin-top: 4px;
  border-top: 1px solid var(--border);
  padding-top: 14px;
}
.tour-tooltip__buttons-right {
  display: flex;
  gap: 6px;
}

.tour-btn {
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 500;
  padding: 7px 14px;
  border-radius: 6px;
  border: 0;
  cursor: pointer;
  transition: background 160ms ease, color 160ms ease, opacity 160ms ease;
  min-height: 36px;
}
.tour-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
.tour-btn--ghost {
  background: transparent;
  color: var(--ink-subtle);
}
.tour-btn--ghost:hover:not(:disabled) {
  background: var(--surface-sunken);
  color: var(--ink-muted);
}
.tour-btn--primary {
  background: var(--ink);
  color: var(--background);
  font-weight: 600;
}
.tour-btn--primary:hover:not(:disabled) {
  background: var(--ink);
  opacity: 0.85;
}

/* Mobile-Anpassung — Tooltip nimmt mehr Screen, Buttons stapeln */
@media (max-width: 480px) {
  .tour-tooltip {
    width: calc(100vw - 24px);
    padding: 16px 16px 14px;
  }
  .tour-tooltip__title { font-size: 18px; }
  .tour-tooltip__text { font-size: 13.5px; }
  .tour-tooltip__buttons {
    flex-direction: column-reverse;
    align-items: stretch;
    gap: 8px;
  }
  .tour-tooltip__buttons-right {
    justify-content: space-between;
  }
  .tour-tooltip__buttons-right .tour-btn {
    flex: 1;
  }
}

/* =========================================================================
   ADMIN UPDATE-PANEL (Floating, rechts unten — nur fuer Admins gerendert)
   ========================================================================= */

.admin-update-panel {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 80;
  width: min(380px, calc(100vw - 36px));
  background: var(--surface, #FFFFFF);
  border: 1px solid var(--border-strong, #D4D4C8);
  border-radius: 14px;
  box-shadow: 0 12px 36px -8px rgba(14, 27, 44, 0.18),
              0 4px 12px -4px rgba(14, 27, 44, 0.12);
  padding: 14px 16px 12px;
  font-size: 13px;
  color: var(--ink, #0E1B2C);
  /* KEINE animation hier — wuerde bei jedem HTMX-Poll-Swap neu triggern
     und sichtbares "Zucken" verursachen. Erst-Render kommt ohne Animation,
     dafuer keine visuellen Glitches. Pulse-Dot allein signalisiert "lebt". */
  /* min-height verhindert Layout-Shift wenn Detail-Text mal fehlt */
  min-height: 84px;
}

/* Container im base.html: animation NUR beim allerersten Fill (nicht bei
   spaeteren Polling-Swaps). HTMX setzt `hx-request`-Klasse waehrend Fetch —
   das geht nicht 1:1, aber: erste Animation laeuft nur wenn das Element
   noch gar nicht existierte. CSS allein reicht hier nicht; deshalb keine.
   Stattdessen: scharfe, stabile Panel-Optik ohne in-out. */

.admin-update-panel--done {
  border-color: var(--lime-deep, #84CC16);
  background: var(--lime-soft, #ECFCCB);
}

.admin-update-panel__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 8px;
}

.admin-update-panel__title {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  font-size: 13px;
}

.admin-update-panel__pulse {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--blue-deep, #2563EB);
  box-shadow: 0 0 0 0 rgba(37, 99, 235, 0.5);
  animation: admin-update-pulse 1.6s ease-in-out infinite;
}
@keyframes admin-update-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(37, 99, 235, 0.55); }
  50%      { box-shadow: 0 0 0 8px rgba(37, 99, 235, 0); }
}

.admin-update-panel__phase-pos {
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  color: var(--ink-muted, #4A5868);
  background: var(--sunken, #F4F4EE);
  padding: 2px 8px;
  border-radius: 999px;
}

.admin-update-panel__phase-label {
  font-size: 12px;
  color: var(--ink-muted, #4A5868);
  margin-bottom: 8px;
  line-height: 1.35;
}

.admin-update-panel__progress-row {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 6px;
}

.admin-update-panel__bar {
  height: 6px;
  background: var(--sunken, #F4F4EE);
  border-radius: 999px;
  overflow: hidden;
}

.admin-update-panel__bar-fill {
  height: 100%;
  background: linear-gradient(90deg,
    var(--blue, #3B82F6) 0%,
    var(--blue-deep, #2563EB) 100%);
  border-radius: 999px;
  transition: width 320ms ease;
}

.admin-update-panel__bar--indeterminate {
  position: relative;
}
.admin-update-panel__bar-fill-indeterminate {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg,
    transparent 0%,
    var(--blue-deep, #2563EB) 50%,
    transparent 100%);
  animation: admin-update-indeterminate 1.4s linear infinite;
  width: 40%;
}
@keyframes admin-update-indeterminate {
  from { transform: translateX(-100%); }
  to   { transform: translateX(250%); }
}

.admin-update-panel__progress-numbers {
  display: flex;
  align-items: baseline;
  gap: 6px;
  font-size: 11px;
  color: var(--ink-muted, #4A5868);
  font-variant-numeric: tabular-nums;
}
.admin-update-panel__pct {
  color: var(--ink-subtle, #8A95A5);
}

.admin-update-panel__detail {
  font-size: 11.5px;
  color: var(--ink-muted, #4A5868);
  margin-top: 6px;
  line-height: 1.4;
  font-variant-numeric: tabular-nums;
}

.admin-update-panel__meta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 14px;
  font-size: 11px;
  color: var(--ink-muted, #4A5868);
  margin-top: 8px;
}
.admin-update-panel__errors {
  color: #B91C1C;
}

.admin-update-panel__footer {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--border, #E8E8E0);
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

.admin-update-panel__cancel-btn {
  font-size: 11px;
  padding: 5px 12px;
  border-radius: 8px;
  border: 1px solid var(--border-strong, #D4D4C8);
  background: var(--surface, #FFFFFF);
  color: var(--ink-muted, #4A5868);
  cursor: pointer;
  transition: all 140ms ease;
}
.admin-update-panel__cancel-btn:hover {
  background: #FEF2F2;
  border-color: #FECACA;
  color: #B91C1C;
}

.admin-update-panel__cancel-pending {
  font-size: 11px;
  color: var(--ink-subtle, #8A95A5);
  font-style: italic;
}

.admin-update-panel__close-btn {
  background: transparent;
  border: 0;
  font-size: 18px;
  line-height: 1;
  color: var(--ink-muted, #4A5868);
  cursor: pointer;
  padding: 0 4px;
  border-radius: 4px;
}
.admin-update-panel__close-btn:hover {
  background: rgba(0, 0, 0, 0.06);
}

.admin-update-panel__summary {
  font-size: 12.5px;
  color: var(--ink, #0E1B2C);
  line-height: 1.4;
}

/* ---------- Phase-Strip (ein kleiner Punkt je Phase) ---------- */
.admin-update-panel__strip {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-bottom: 10px;
  padding: 4px 0;
}
.admin-update-panel__strip-dot {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  font-size: 10px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  flex-shrink: 0;
  transition: background 200ms ease, color 200ms ease;
}
.admin-update-panel__strip-dot--done {
  background: var(--lime-soft, #ECFCCB);
  color: var(--moss-deep, #3A5128);
}
.admin-update-panel__strip-dot--current {
  background: var(--blue-deep, #2563EB);
  color: white;
  /* Subtiler glow um den aktuellen Phase-Dot */
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15);
}
.admin-update-panel__strip-dot--pending {
  background: var(--sunken, #F4F4EE);
  color: var(--ink-subtle, #8A95A5);
}

/* ---------- Throughput-Anzeige ---------- */
.admin-update-panel__throughput {
  color: var(--ink-subtle, #8A95A5);
  font-variant-numeric: tabular-nums;
}

/* ---------- History (aufklappbar) ---------- */
.admin-update-panel__history {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px dashed var(--border, #E8E8E0);
}
.admin-update-panel__history-summary {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  cursor: pointer;
  font-size: 11px;
  color: var(--ink-muted, #4A5868);
  list-style: none;
  user-select: none;
}
.admin-update-panel__history-summary::-webkit-details-marker {
  display: none;
}
.admin-update-panel__history-summary svg {
  transition: transform 180ms ease;
  color: var(--ink-subtle, #8A95A5);
}
.admin-update-panel__history[open] .admin-update-panel__history-summary svg {
  transform: rotate(180deg);
}
.admin-update-panel__history-list {
  list-style: none;
  padding: 8px 0 0 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.admin-update-panel__history-list li {
  display: grid;
  grid-template-columns: 18px 1fr auto;
  gap: 8px;
  align-items: center;
  font-size: 11.5px;
  color: var(--ink-muted, #4A5868);
}
.admin-update-panel__history-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--lime-soft, #ECFCCB);
  color: var(--moss-deep, #3A5128);
  font-size: 9.5px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.admin-update-panel__history-label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.admin-update-panel__history-dur {
  font-variant-numeric: tabular-nums;
  color: var(--ink-subtle, #8A95A5);
  font-size: 11px;
}

/* Mobile: Panel etwas kleiner und unten weiter weg von Bottom-Nav (60px hoch
   + env(safe-area-inset-bottom) auf iPhones mit Home-Indikator — .mob-bottom-
   nav ist real bis zu ~94px hoch, nicht nur 60px. Ohne den Inset-Zuschlag
   ragt das Panel unter den Home-Indikator-Geraeten in die Bottom-Nav hinein
   (die mit hoeherem z-index darueber liegt) und wird angeschnitten, samt
   Bedienelementen. Zweitwert 0px im calc() ist Pflicht, sonst bricht die
   Deklaration auf Geraeten ohne Safe-Area-Support.
   767 → 768 konsolidiert (konsistent mit Haupt-Mobile-Breakpoint der Codebase) */
@media (max-width: 768px) {
  .admin-update-panel {
    right: 12px;
    left: 12px;
    bottom: calc(76px + env(safe-area-inset-bottom, 0px));
    width: auto;
  }
}

/* Ausserhalb des Dashboards ("/"): das volle Panel bleibt im DOM/Polling
   unangetastet, wird dort aber visuell unterdrueckt — die kompakte
   .admin-status-bar (siehe unten) uebernimmt. Nur --running betroffen,
   der Fertig-Banner (--done) bleibt ueberall wie bisher sichtbar. */
.admin-update-panel-host--elsewhere .admin-update-panel--running {
  display: none;
}

/* =========================================================================
   ADMIN-STATUSLEISTE (kompakt, seitenuebergreifend, rechts unten)
   Ergaenzung zum vollen .admin-update-panel (siehe oben) — kein eigener
   Datenweg, liest nur dessen bereits gepolltes HTML aus (base.html).
   ========================================================================= */
.admin-status-bar {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 79; /* knapp unter .admin-update-panel (80), unter .toast (90) */
  display: flex;
  align-items: center;
  gap: 6px;
  max-width: min(320px, calc(100vw - 36px));
  background: var(--ink, #0E1B2C);
  color: #fff;
  border-radius: 999px;
  padding: 7px 7px 7px 14px;
  box-shadow: 0 10px 28px -6px rgba(14, 27, 44, 0.28), 0 2px 8px -2px rgba(14, 27, 44, 0.2);
  font-size: 12px;
}
.admin-status-bar[hidden] { display: none; }
.admin-status-bar__link {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
  min-width: 0;
  color: inherit;
  text-decoration: none;
}
.admin-status-bar__pulse {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--brand-blue, #3B82F6);
  box-shadow: 0 0 0 0 rgba(59, 130, 246, 0.6);
  animation: admin-update-pulse 1.6s ease-in-out infinite;
  flex-shrink: 0;
}
.admin-status-bar__text {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}
.admin-status-bar__phase {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: rgba(255, 255, 255, 0.65);
}
.admin-status-bar__detail {
  font-size: 12px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 190px;
}
.admin-status-bar__chevron { color: rgba(255, 255, 255, 0.5); flex-shrink: 0; }
.admin-status-bar__close {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  border: none;
  cursor: pointer;
  font-size: 15px;
  line-height: 1;
  transition: background var(--dur) var(--ease);
}
.admin-status-bar__close:hover { background: rgba(255, 255, 255, 0.22); }

@media (max-width: 768px) {
  /* Gleicher Safe-Area-Zuschlag wie .admin-update-panel oben — muss mit
     diesem konsistent bleiben, sonst laufen die beiden wieder auseinander. */
  .admin-status-bar {
    right: 12px;
    left: 12px;
    bottom: calc(76px + env(safe-area-inset-bottom, 0px));
    max-width: none;
  }
  .admin-status-bar__detail { max-width: none; flex: 1; }
}

/* Toast-Klassen (genutzt von admin/update/start- und cancel-Responses) */
.toast {
  position: fixed;
  top: 18px;
  right: 18px;
  z-index: 90;
  padding: 10px 14px;
  border-radius: 10px;
  font-size: 13px;
  box-shadow: 0 8px 24px -6px rgba(14, 27, 44, 0.18);
  animation: toast-fade-in 200ms ease-out, toast-fade-out 500ms 4s forwards;
}
@keyframes toast-fade-in {
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes toast-fade-out {
  to { opacity: 0; transform: translateY(-8px); }
}
.toast-ok {
  background: var(--lime-soft, #ECFCCB);
  border: 1px solid var(--lime-deep, #84CC16);
  color: var(--moss-deep, #3A5128);
}
.toast-warn {
  background: #FEF3C7;
  border: 1px solid #FBBF24;
  color: #92400E;
}

/* =========================================================================
   ADMIN STATS-DASHBOARD
   ========================================================================= */

.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 12px;
}

.stat-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 16px 18px;
  position: relative;
  overflow: hidden;
  container-type: inline-size;
}
.stat-card::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: var(--border-strong);
  opacity: 0.6;
}
.stat-card--accent::before {
  background: var(--brand-blue-deep);
  opacity: 1;
}
.stat-card--lime::before {
  background: var(--accent-lime-deep);
  opacity: 1;
}
.stat-card--moss::before {
  background: var(--moss);
  opacity: 1;
}

.stat-card__label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--ink-subtle);
  margin-bottom: 8px;
}
.stat-card__value {
  font-size: clamp(20px, 8cqw, 28px);
  font-weight: 600;
  line-height: 1;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.stat-card--accent .stat-card__value {
  color: var(--brand-blue-deep);
}
.stat-card__sublabel {
  font-size: 11px;
  color: var(--ink-muted);
  margin-top: 6px;
  line-height: 1.3;
}

/* "Heute aktive User"-Chips */
.stats-active-users {
  margin-top: 16px;
  padding: 14px 16px;
  background: var(--sunken);
  border-radius: 10px;
}
.stats-active-users__list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.stats-active-user-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px 4px 8px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 999px;
  font-size: 12px;
  color: var(--ink);
}
.stats-active-user-chip__dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent-lime-deep);
  box-shadow: 0 0 0 0 rgba(132, 204, 22, 0.5);
  animation: stats-active-pulse 1.8s ease-in-out infinite;
}
@keyframes stats-active-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(132, 204, 22, 0.55); }
  50%      { box-shadow: 0 0 0 5px rgba(132, 204, 22, 0); }
}
.stats-active-user-chip__badge {
  font-size: 9.5px;
  padding: 1px 6px;
  background: var(--accent-lime-soft);
  color: var(--moss-deep);
  border-radius: 999px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* Stats-Tabellen */
.stats-table-wrap {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
}
.stats-table {
  width: 100%;
  border-collapse: collapse;
}
.stats-table thead {
  background: var(--sunken);
}
.stats-table th {
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--ink-subtle);
  padding: 10px 14px;
}
.stats-table td {
  padding: 10px 14px;
  border-top: 1px solid var(--border);
  font-size: 13px;
  color: var(--ink);
}
.stats-table tbody tr:hover {
  background: rgba(0, 0, 0, 0.02);
}

@media (max-width: 480px) {
  .stats-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
  }
  .stat-card {
    padding: 12px 14px;
  }
  .stats-table th,
  .stats-table td {
    padding: 8px 10px;
    font-size: 12px;
  }
}

/* =========================================================================
   NOTIZEN
   ========================================================================= */

/* --- Note-Button in der Paper-Card Action-Bar --- */
.paper-card__note-btn {
  position: relative;
  background: transparent;
  border: none;
  cursor: pointer;
  font: inherit;
}
.paper-card__note-btn.has-note {
  color: var(--moss-deep);
}
.paper-card__note-btn.has-note:hover {
  /* Konsistent mit anderen Action-Link-Hovers */
  background: var(--accent-lime-soft);
}
.paper-card__note-dot {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent-lime-deep);
  box-shadow: 0 0 0 2px var(--surface);
}

/* --- /notes Uebersichtsseite --- */
.notes-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
  flex-wrap: wrap;
}
.notes-toolbar__stats {
  font-size: 13px;
  color: var(--ink-muted);
}
.notes-toolbar__count strong {
  color: var(--ink);
}
.notes-toolbar__filter {
  margin-left: 4px;
  color: var(--ink-subtle);
}

.notes-search {
  position: relative;
  margin-bottom: 16px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 0 10px 0 36px;
  display: flex;
  align-items: center;
  transition: border-color var(--dur) var(--ease);
}
.notes-search:focus-within {
  border-color: var(--brand-blue);
}
.notes-search__icon {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--ink-subtle);
}
.notes-search__input {
  flex: 1;
  border: none;
  background: transparent;
  padding: 10px 0;
  font-size: 13px;
  outline: none;
}
.notes-search__clear {
  color: var(--ink-subtle);
  text-decoration: none;
  padding: 0 8px;
  font-size: 18px;
  line-height: 1;
}
.notes-search__clear:hover {
  color: var(--ink);
}

.notes-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.notes-list-item {
  display: flex;
  gap: 16px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 14px 16px;
  cursor: pointer;
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.notes-list-item:hover {
  border-color: var(--border-strong);
  box-shadow: 0 4px 12px -4px rgba(14, 27, 44, 0.08);
  transform: translateY(-1px);
}
.notes-list-item:focus-visible {
  outline: 2px solid var(--brand-blue);
  outline-offset: 2px;
}
.notes-list-item__main {
  flex: 1;
  min-width: 0;
}
.notes-list-item__title {
  font-size: 14.5px;
  font-weight: 600;
  color: var(--ink);
  line-height: 1.35;
  margin-bottom: 4px;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.notes-list-item__meta {
  font-size: 11.5px;
  color: var(--ink-muted);
  margin-bottom: 8px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}
.notes-list-item__sep {
  color: var(--ink-subtle);
}
.notes-list-item__excerpt {
  font-size: 12.5px;
  color: var(--ink-muted);
  line-height: 1.5;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  /* Markdown bleibt als Text sichtbar — pre-line behaelt Zeilenumbrueche */
  white-space: pre-line;
}
.notes-list-item__aside {
  flex-shrink: 0;
  text-align: right;
  font-variant-numeric: tabular-nums;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
}
.notes-list-item__date {
  font-size: 12px;
  font-weight: 500;
  color: var(--ink);
}
.notes-list-item__time {
  font-size: 11px;
  color: var(--ink-subtle);
  margin-top: 2px;
}

/* Loeschen-Mülleimer: dezent, default low-opacity, hover zeigt es klar.
   Standard ist Mute, nicht abgelenkt von der Notiz selbst — Hover wird's
   rot-akzentuiert. */
.notes-list-item__delete {
  margin-top: 8px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 6px;
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--ink-subtle);
  cursor: pointer;
  opacity: 0.55;
  transition: opacity 120ms var(--ease), color 120ms var(--ease),
              background 120ms var(--ease), border-color 120ms var(--ease);
}
.notes-list-item:hover .notes-list-item__delete {
  opacity: 1;
}
.notes-list-item__delete:hover {
  color: #B91C1C;
  background: #FEF2F2;
  border-color: #FECACA;
  opacity: 1;
}
.notes-list-item__delete:focus-visible {
  outline: 2px solid #DC2626;
  outline-offset: 1px;
  opacity: 1;
}
.notes-list-item__delete.is-loading {
  opacity: 0.4;
  cursor: wait;
}

/* Slide-Out-Animation beim Loeschen */
.notes-list-item.is-removing {
  animation: notes-item-remove 280ms cubic-bezier(0.4, 0, 0.2, 1) forwards;
  pointer-events: none;
}
@keyframes notes-item-remove {
  0%   { opacity: 1; transform: translateX(0); max-height: 200px; margin-bottom: 8px; padding: 14px 16px; border-width: 1px; }
  60%  { opacity: 0; transform: translateX(40px); }
  100% { opacity: 0; transform: translateX(40px); max-height: 0; margin: 0; padding: 0; border-width: 0; }
}
.notes-list__limit {
  font-size: 11.5px;
  color: var(--ink-subtle);
  text-align: center;
  margin-top: 16px;
}

.notes-empty {
  text-align: center;
  padding: 48px 24px;
  color: var(--ink-muted);
}
.notes-empty svg {
  color: var(--ink-subtle);
  margin: 0 auto 14px;
  display: block;
}
.notes-empty__title {
  font-family: var(--font-display);
  font-size: 22px;
  color: var(--ink);
  margin-bottom: 8px;
}
.notes-empty__hint {
  font-size: 13px;
  max-width: 480px;
  margin: 0 auto;
  line-height: 1.55;
}

@media (max-width: 480px) {
  .notes-list-item {
    flex-direction: column;
    gap: 8px;
  }
  .notes-list-item__aside {
    text-align: left;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    width: 100%;
  }
  /* Datum + Uhrzeit gehoeren visuell zusammen */
  .notes-list-item__time {
    margin-top: 0;
    margin-left: 6px;
  }
  /* Muelleimer nach rechts */
  .notes-list-item__delete {
    margin-top: 0;
    margin-left: auto;
    /* Auf Touch: nicht hover-abhaengig sichtbar machen */
    opacity: 0.85;
  }
}

/* --- Note-Editor Modal --- */
.note-editor {
  position: fixed;
  inset: 0;
  z-index: 500;
  display: none;
}
.note-editor.is-open {
  display: block;
}
body.note-editor-open {
  overflow: hidden;
}
.note-editor__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(14, 27, 44, 0.45);
  backdrop-filter: blur(2px);
  animation: note-editor-fade 200ms ease;
}
@keyframes note-editor-fade {
  from { opacity: 0; }
  to   { opacity: 1; }
}
.note-editor__panel {
  position: absolute;
  inset: 5vh 50% auto 50%;
  transform: translateX(-50%);
  width: min(720px, calc(100vw - 32px));
  max-height: 90vh;
  background: var(--surface);
  border-radius: 16px;
  box-shadow: 0 24px 64px -8px rgba(14, 27, 44, 0.35);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  animation: note-editor-slide 240ms cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes note-editor-slide {
  from { opacity: 0; transform: translateX(-50%) translateY(20px); }
  to   { opacity: 1; transform: translateX(-50%) translateY(0); }
}

.note-editor__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 22px 14px;
  border-bottom: 1px solid var(--border);
}
.note-editor__head-text {
  flex: 1;
  min-width: 0;
}
.note-editor__label {
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-subtle);
  font-weight: 600;
  margin-bottom: 4px;
}
.note-editor__title {
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 500;
  color: var(--ink);
  line-height: 1.3;
  margin: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.note-editor__close {
  flex-shrink: 0;
  background: transparent;
  border: none;
  color: var(--ink-muted);
  cursor: pointer;
  border-radius: 50%;
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background var(--dur) var(--ease);
}
.note-editor__close:hover {
  background: var(--sunken);
  color: var(--ink);
}

.note-editor__toolbar {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 8px 14px;
  background: var(--sunken);
  border-bottom: 1px solid var(--border);
}
.note-editor__tool {
  background: transparent;
  border: 1px solid transparent;
  border-radius: 6px;
  width: 30px;
  height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--ink-muted);
  font-size: 13px;
  transition: all 120ms var(--ease);
}
.note-editor__tool:hover {
  background: var(--surface);
  color: var(--ink);
  border-color: var(--border);
}
.note-editor__tool code {
  font-family: var(--font-mono);
  font-size: 11px;
}
.note-editor__tool-sep {
  width: 1px;
  height: 18px;
  background: var(--border-strong);
  margin: 0 4px;
}
.note-editor__hint {
  margin-left: auto;
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-subtle);
  font-family: var(--font-mono);
}

.note-editor__body {
  flex: 1;
  overflow: hidden;
  display: flex;
}
.note-editor__textarea {
  flex: 1;
  width: 100%;
  min-height: 280px;
  border: none;
  background: transparent;
  padding: 18px 22px;
  font-family: var(--font-mono);
  font-size: 13.5px;
  line-height: 1.65;
  color: var(--ink);
  resize: none;
  outline: none;
}
.note-editor__textarea::placeholder {
  color: var(--ink-subtle);
  font-style: italic;
}

.note-editor__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 18px;
  border-top: 1px solid var(--border);
  background: var(--sunken);
}
.note-editor__status {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 11.5px;
  color: var(--ink-muted);
  font-variant-numeric: tabular-nums;
}
.note-editor__status-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--ink-subtle);
  transition: background 200ms ease;
}
.note-editor__status-dot.is-saved {
  background: var(--accent-lime-deep);
}
.note-editor__status-dot.is-error {
  background: #DC2626;
}
.note-editor__footer-actions {
  display: inline-flex;
  gap: 8px;
}
.note-editor__del-btn {
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--ink-muted);
  cursor: pointer;
  padding: 6px 14px;
  font-size: 12px;
  transition: all 120ms var(--ease);
}
.note-editor__del-btn:hover {
  background: #FEF2F2;
  border-color: #FECACA;
  color: #B91C1C;
}
.note-editor__done-btn {
  background: var(--brand-blue-deep);
  border: 1px solid var(--brand-blue-deep);
  color: white;
  border-radius: 8px;
  padding: 6px 18px;
  cursor: pointer;
  font-size: 12.5px;
  font-weight: 600;
  transition: background 120ms var(--ease);
}
.note-editor__done-btn:hover {
  background: var(--brand-blue);
}

@media (max-width: 640px) {
  .note-editor__panel {
    inset: 0;
    width: 100vw;
    max-height: 100vh;
    border-radius: 0;
    transform: none;
    animation: note-editor-slide-mobile 240ms cubic-bezier(0.16, 1, 0.3, 1);
  }
  @keyframes note-editor-slide-mobile {
    from { transform: translateY(100%); }
    to   { transform: translateY(0); }
  }
  .note-editor__header { padding: 16px 16px 12px; }
  .note-editor__textarea { padding: 14px 16px; font-size: 14px; }
  /* Phase 3f: Safe-Area unten beachten (iPhone Home-Indicator) — der Footer
     mit „Loeschen"/„Fertig" darf nicht unter dem Indicator klemmen. Der
     Header + Close-Button sitzen bereits oben fix und sind erreichbar. */
  .note-editor__footer {
    padding: 10px 14px calc(10px + env(safe-area-inset-bottom, 0px));
  }
}

/* ============================================================
   PREPRINT-RADAR — Seiten-spezifische Styles
   ============================================================ */

.preprint-root {
  max-width: var(--content-max);
}

/* ---- Disclaimer-Banner ---- */
.preprint-disclaimer {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 16px;
  margin-bottom: 20px;
  background: rgba(245, 158, 11, 0.07);
  border: 1px solid rgba(245, 158, 11, 0.25);
  border-left: 3px solid var(--warning);
  border-radius: var(--radius-sm);
  font-size: 12.5px;
  color: var(--ink-muted);
  line-height: 1.5;
}
.preprint-disclaimer svg {
  flex-shrink: 0;
  color: var(--warning);
  margin-top: 1px;
}
.preprint-disclaimer strong {
  color: var(--ink);
}

/* ---- Such-Panel ---- */
.preprint-search-panel {
  padding: 16px 18px;
  margin-bottom: 24px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/* Modus-Toggle (Thema | Autor) */
.preprint-mode-row {
  display: flex;
  gap: 0;
  align-self: flex-start;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  overflow: hidden;
}
.preprint-mode-btn {
  display: inline-flex;
  align-items: center;
  cursor: pointer;
  user-select: none;
}
.preprint-mode-btn input[type="radio"] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
  width: 0;
  height: 0;
}
.preprint-mode-btn span {
  display: inline-flex;
  align-items: center;
  padding: 5px 16px;
  font-size: 12.5px;
  font-weight: 500;
  color: var(--ink-muted);
  background: var(--surface);
  border-right: 1px solid var(--border-strong);
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
  line-height: 1;
  height: 32px;
}
.preprint-mode-btn:last-child span {
  border-right: none;
}
.preprint-mode-btn:has(input:checked) span {
  background: var(--ink);
  color: #fff;
}

/* Eingabe-Zeile */
.preprint-input-row {
  display: flex;
  gap: 8px;
  align-items: center;
}
.preprint-query-input {
  flex: 1;
  min-width: 0;
  height: 38px;
  font-size: 14px;
}
.preprint-submit-btn {
  flex-shrink: 0;
  height: 38px;
  gap: 7px;
}

/* Filter-Zeile */
.preprint-filter-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px 24px;
}
.preprint-filter-group {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.preprint-select {
  height: 32px;
  font-size: 12.5px;
  width: auto;
  min-width: 120px;
}
.preprint-check-label {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 12.5px;
  color: var(--ink-muted);
  cursor: pointer;
  margin-top: 20px;  /* optische Ausrichtung zur Selectbox */
}
.preprint-check-label input[type="checkbox"] {
  width: auto;
  height: auto;
}

/* ---- States ---- */
.preprint-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 52px 20px;
  gap: 4px;
}

.preprint-loading-state {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 40px 20px;
}
.preprint-spinner {
  width: 20px;
  height: 20px;
  border: 2px solid var(--border-strong);
  border-top-color: var(--accent-lime-deep);
  border-radius: 50%;
  animation: preprint-spin 0.7s linear infinite;
  flex-shrink: 0;
}
@keyframes preprint-spin {
  to { transform: rotate(360deg); }
}

.preprint-error-state {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 16px;
  background: rgba(239, 68, 68, 0.06);
  border: 1px solid rgba(239, 68, 68, 0.2);
  border-radius: var(--radius-sm);
  font-size: 13px;
  color: #B91C1C;
  margin-top: 4px;
}
.preprint-error-state svg {
  flex-shrink: 0;
}

/* ---- Ergebnis-Meta ---- */
.preprint-results-meta {
  font-size: 11.5px;
  font-weight: 500;
  color: var(--ink-subtle);
  margin-bottom: 12px;
  font-family: var(--font-mono);
}

/* ---- Karten-Grid ---- */
.preprint-cards-wrap {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* ---- Preprint-Card ---- */
.preprint-card {
  padding: 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.preprint-card__head {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.preprint-card__title-row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px;
}

.preprint-card__title {
  font-size: 14.5px;
  font-weight: 600;
  color: var(--ink);
  text-decoration: none;
  line-height: 1.4;
  font-family: var(--font-body);
}
.preprint-card__title:hover {
  color: var(--brand-blue-deep);
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* Preprint-Pflicht-Badge */
.preprint-badge--preprint {
  flex-shrink: 0;
  align-self: flex-start;
}

/* Published-Badge + Link */
.preprint-badge--published {
  flex-shrink: 0;
  align-self: flex-start;
}
.preprint-badge--published-link {
  text-decoration: none;
  align-self: flex-start;
}
.preprint-badge--published-link:hover .badge {
  background: var(--moss-soft);
  box-shadow: 0 0 0 2px var(--moss);
}

/* Meta-Zeile */
.preprint-card__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 8px;
  font-size: 12px;
  color: var(--ink-muted);
}
.preprint-card__authors {
  font-weight: 500;
  color: var(--ink);
}
.preprint-card__sep {
  color: var(--ink-subtle);
}
.preprint-card__date {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink-muted);
}
.preprint-card__cites {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink-muted);
  background: var(--surface-sunken);
  padding: 1px 6px;
  border-radius: 8px;
}
.preprint-card__cites strong {
  color: var(--ink);
  font-weight: 600;
}
.preprint-card__stars {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--accent-lime-deep);
  letter-spacing: 0.05em;
}

/* Author-Reputation */
.preprint-card__reputation {
  font-size: 11px;
  color: var(--ink-subtle);
  font-family: var(--font-mono);
}

/* Abstract */
.preprint-card__abstract-wrap {
  margin-top: 2px;
}
.preprint-card__abstract-toggle {
  font-size: 11.5px;
  font-weight: 500;
  color: var(--ink-muted);
  cursor: pointer;
  padding: 2px 0;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  user-select: none;
}
.preprint-card__abstract-toggle:hover {
  color: var(--ink);
}
.preprint-card__abstract {
  font-size: 12.5px;
  color: var(--ink-muted);
  line-height: 1.6;
  margin: 8px 0 0;
  padding-top: 8px;
  border-top: 1px solid var(--border);
}

/* DOI */
.preprint-card__doi {
  font-size: 11px;
  color: var(--ink-subtle);
  font-family: var(--font-mono);
}
.preprint-doi-link {
  color: var(--ink-subtle);
  text-decoration: none;
}
.preprint-doi-link:hover {
  color: var(--brand-blue-deep);
  text-decoration: underline;
}

/* Zahlen-Input in der Filter-Zeile */
.preprint-number-input {
  min-width: 80px;
  max-width: 100px;
  text-align: right;
}

/* Abstract-Fallback-Link (#4) */
.preprint-card__abstract-fallback {
  margin-top: 2px;
}
.preprint-abstract-fallback-link {
  font-size: 12px;
  color: var(--brand-blue);
  text-decoration: none;
}
.preprint-abstract-fallback-link:hover {
  color: var(--brand-blue-deep);
  text-decoration: underline;
}

/* Score-Faktoren (#2) — Info-Kacheln statt Balken */
.preprint-card__score-factors {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  padding: 8px 0 2px;
  border-top: 1px solid var(--border);
  margin-top: 4px;
}
.preprint-sf__box {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 4px 10px;
  background: var(--surface-sunken);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  min-width: 68px;
}
.preprint-sf__label {
  font-size: 9.5px;
  font-weight: 600;
  color: var(--ink-subtle);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  line-height: 1;
}
.preprint-sf__pct {
  font-size: 13px;
  font-family: var(--font-mono);
  font-weight: 600;
  color: var(--ink);
  line-height: 1.2;
}
/* Farbabstufung: hohe Werte erhalten Lime-Akzent */
.preprint-sf__box--high {
  border-color: rgba(132, 204, 22, 0.45);
  background: var(--accent-lime-soft);
}
.preprint-sf__box--high .preprint-sf__pct {
  color: var(--moss-deep);
}
.preprint-sf__box--mid {
  border-color: var(--border-strong);
}
.preprint-sf__box--mid .preprint-sf__pct {
  color: var(--ink-muted);
}

/* Action-Bar in Preprint-Card (#6) */
.preprint-card__actions {
  display: flex;
  align-items: center;
  gap: 8px;
  padding-top: 10px;
  border-top: 1px solid var(--border);
  margin-top: 2px;
}
.preprint-similar-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
}

/* „Mehr laden"-Button (#3) */
.preprint-load-more-wrap {
  display: flex;
  justify-content: center;
  padding: 20px 0 4px;
}
.preprint-load-more-btn {
  min-width: 160px;
}

/* Ähnlichkeits-Banner (#5) */
.preprint-similar-banner {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  margin-bottom: 10px;
  background: var(--brand-blue-soft);
  border: 1px solid rgba(59, 130, 246, 0.25);
  border-radius: var(--radius-sm);
  font-size: 13px;
  color: var(--ink);
}
.preprint-similar-label {
  flex: 1;
  font-weight: 500;
  color: var(--ink);
}
.preprint-back-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  font-weight: 500;
  color: var(--brand-blue-deep);
  background: none;
  border: 1px solid rgba(59, 130, 246, 0.35);
  border-radius: var(--radius-sm);
  padding: 4px 10px;
  cursor: pointer;
  flex-shrink: 0;
  text-decoration: none;
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.preprint-back-btn:hover {
  background: var(--surface);
  border-color: var(--brand-blue);
}

/* ---- Responsive ---- */
@media (max-width: 640px) {
  .preprint-search-panel {
    padding: 14px;
  }
  .preprint-input-row {
    flex-direction: column;
    align-items: stretch;
  }
  .preprint-submit-btn {
    width: 100%;
    justify-content: center;
  }
  .preprint-card {
    padding: 14px;
  }
  .preprint-card__score-factors {
    gap: 4px;
  }
  .preprint-sf__box {
    min-width: 60px;
    padding: 4px 8px;
  }
}



/* Ampel-Punkte fuer Score-Faktoren (Preprint-Radar) */
.preprint-sf__dot{width:8px;height:8px;border-radius:999px;flex-shrink:0;background:#CBD5E1;display:inline-block}
.preprint-sf__dot--high{background:#84CC16}
.preprint-sf__dot--mid{background:#E0A82E}
.preprint-sf__dot--low{background:#D1495B}
/* Komplett-Score dominanter */
.preprint-card__stars{font-size:16px;letter-spacing:2px;color:#84CC16;font-weight:600}

/* Sortier-Leiste direkt ueber den Treffern (Preprint-Radar) */
.preprint-results-toolbar{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:10px}
.preprint-sort-inline{display:inline-flex;align-items:center;gap:8px;flex-shrink:0}
.preprint-sort-inline .caption{margin:0}

/* ── Preprint-Radar: prominenter Score + Kopf-Layout (nachgelagert → gewinnt per Cascade) ── */
.preprint-card__head{display:flex;flex-direction:row;align-items:flex-start;justify-content:space-between;gap:14px}
.preprint-card__head-main{min-width:0;flex:1 1 auto;display:flex;flex-direction:column;gap:4px}
.preprint-card__score{flex:0 0 auto;display:flex;flex-direction:column;align-items:center;justify-content:center;min-width:58px;padding:7px 10px 6px;border-radius:14px;border:1px solid #E3E8D8;background:#F4F7EC;text-align:center}
.preprint-card__score-num{font-family:var(--font-display,Georgia,serif);font-size:28px;font-weight:700;line-height:1;color:#3F5311;font-variant-numeric:tabular-nums}
.preprint-card__score-lbl{margin-top:3px;font-size:9px;font-weight:600;letter-spacing:.13em;text-transform:uppercase;color:var(--ink-subtle,#8a8f80)}
.preprint-card__score--high{border-color:#CDE39A;background:#EEF6DC}
.preprint-card__score--high .preprint-card__score-num{color:#4D7C0F}
.preprint-card__score--mid{border-color:#EAD9A8;background:#FAF3E2}
.preprint-card__score--mid .preprint-card__score-num{color:#9A6B12}
.preprint-card__score--low{border-color:#E5E7EB;background:#F6F6F4}
.preprint-card__score--low .preprint-card__score-num{color:#6B7280}
.preprint-sf__box{cursor:help}
@media (max-width:520px){.preprint-card__score{min-width:50px}.preprint-card__score-num{font-size:24px}}

/* ── Dashboard "neue seit letztem Besuch" als Link + Schnellsuche-Banner ── */
.dash-stat-note--link{display:inline-flex;align-items:center;gap:6px;text-decoration:none;color:var(--ink-muted,#5a5f54);cursor:pointer;transition:border-color .15s,background .15s,color .15s}
.dash-stat-note--link:hover{border-color:var(--lime-deep,#5C8A1E);background:#F4F7EC;color:var(--ink,#1a1a17)}
.dash-stat-note__arrow{flex:0 0 auto;opacity:.5;transition:transform .15s,opacity .15s}
.dash-stat-note--link:hover .dash-stat-note__arrow{opacity:1;transform:translateX(2px)}
.search-new-banner{display:flex;align-items:center;gap:9px;margin:0 0 16px;padding:9px 14px;border:1px solid #CDE39A;background:#EEF6DC;border-radius:10px;font-size:13px;color:#3F5311}
.search-new-banner svg{flex:0 0 auto;color:#4D7C0F}
.search-new-banner__clear{margin-left:auto;flex:0 0 auto;font-size:12px;color:#4D7C0F;text-decoration:underline;text-underline-offset:2px}
.search-new-banner__clear:hover{color:#3F5311}

/* ═══ Preprint-Radar: Ansichts-Umbau (Modus / Zeitfenster / Linsen) ═══ */

/* 3-Button-Modus-Zeile (Thema/Autor/Entdecken) bleibt ueber .preprint-mode-row;
   nichts Neues noetig — die bestehenden .preprint-mode-btn-Regeln greifen. */

/* Schnellfilter-Zeile: Zeitfenster-Chips links, "Mehr Filter" rechts */
.preprint-quickbar{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-top:12px}
.preprint-timewin{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.preprint-quickbar__label{margin:0;flex-shrink:0}
.preprint-chip-row{display:inline-flex;gap:6px;flex-wrap:wrap}
.preprint-timechip{appearance:none;border:1px solid var(--border,#E3E3DA);background:var(--surface,#fff);color:var(--ink-muted,#5a5f54);font-size:12.5px;font-weight:500;padding:5px 12px;border-radius:999px;cursor:pointer;transition:all .14s}
.preprint-timechip:hover{border-color:#CDE39A;background:#F4F7EC;color:var(--ink,#1a1a17)}
.preprint-timechip.is-active{border-color:#84CC16;background:#EEF6DC;color:#3F5311;font-weight:600}
.preprint-morefilters-toggle{appearance:none;display:inline-flex;align-items:center;gap:6px;border:1px solid var(--border,#E3E3DA);background:var(--surface,#fff);color:var(--ink-muted,#5a5f54);font-size:12.5px;font-weight:500;padding:5px 12px;border-radius:8px;cursor:pointer;transition:all .14s;flex-shrink:0}
.preprint-morefilters-toggle:hover{border-color:var(--ink-subtle,#a3a89a);color:var(--ink,#1a1a17)}
.preprint-morefilters-toggle.is-open{border-color:#84CC16;background:#F4F7EC;color:#3F5311}

/* Ansichts-Linsen (Tabs) ueber den Ergebnissen */
.preprint-views{display:flex;gap:4px;flex-wrap:wrap;margin:4px 0 12px;padding:4px;background:var(--sunken,#F2F2EC);border-radius:12px}
.preprint-view-tab{appearance:none;display:inline-flex;align-items:center;gap:7px;border:none;background:transparent;color:var(--ink-muted,#5a5f54);font-size:13px;font-weight:600;padding:8px 14px;border-radius:9px;cursor:pointer;transition:all .14s;flex:1 1 auto;justify-content:center;white-space:nowrap}
.preprint-view-tab:hover{color:var(--ink,#1a1a17);background:rgba(255,255,255,.6)}
.preprint-view-tab.is-active{background:var(--surface,#fff);color:#3F5311;box-shadow:0 1px 3px rgba(14,27,44,.10)}
.preprint-view-tab__icon{font-size:13px;line-height:1}
.preprint-view-tab.is-active .preprint-view-tab__icon{filter:none}
@media (max-width:560px){
  .preprint-view-tab__label{display:none}
  .preprint-view-tab{flex:1 1 0;padding:9px 8px}
  .preprint-view-tab__icon{font-size:16px}
}

/* Ergebnis-Meta (eigene Zeile, da Toolbar entfallen ist) */
.preprint-results-meta{font-size:12.5px;color:var(--ink-subtle,#8a8f80);margin-bottom:10px}

/* ═══ Preprint-Radar: Entdecken — Trend-Themen (Mini-Balken) ═══ */
.preprint-trends{margin-top:6px}
.preprint-trends__head{margin-bottom:14px}
.preprint-trends__title{font-family:var(--font-display,Georgia,serif);font-size:20px;font-weight:600;color:var(--ink,#1a1a17);margin:0 0 4px}
.preprint-trends__sub{font-size:12.5px;color:var(--ink-subtle,#8a8f80);margin:0}
.preprint-trends__list{display:flex;flex-direction:column;gap:4px}
.preprint-trend-row{display:flex;align-items:center;gap:12px;width:100%;text-align:left;appearance:none;border:1px solid transparent;background:transparent;border-radius:9px;padding:8px 12px;cursor:pointer;transition:all .14s}
.preprint-trend-row:hover{border-color:#CDE39A;background:#F4F7EC}
.preprint-trend-row__name{flex:0 0 33%;min-width:0;font-size:13.5px;font-weight:500;color:var(--ink,#1a1a17);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.preprint-trend-row__bar{flex:1 1 auto;height:8px;background:var(--sunken,#F2F2EC);border-radius:999px;overflow:hidden}
.preprint-trend-row__bar-fill{display:block;height:100%;background:linear-gradient(90deg,#84CC16,#4D7C0F);border-radius:999px;transition:width .3s ease}
.preprint-trend-row:hover .preprint-trend-row__bar-fill{background:linear-gradient(90deg,#4D7C0F,#3F5311)}
.preprint-trend-row__count{flex:0 0 auto;font-family:var(--font-mono);font-size:12px;color:var(--ink-subtle,#8a8f80);min-width:54px;text-align:right;font-variant-numeric:tabular-nums}
@media (max-width:560px){.preprint-trend-row__name{flex-basis:40%}.preprint-trend-row__count{min-width:44px}}

/* Trend-Richtungs-Indikatoren (Entdecken-Tab) */
.preprint-trend-row__dir {
  flex: 0 0 auto;
  min-width: 36px;
  font-size: 11.5px;
  font-weight: 600;
  text-align: center;
  padding: 2px 6px;
  border-radius: 6px;
  line-height: 1.3;
}
.preprint-trend-row__dir--rising {
  color: #4D7C0F;
  background: rgba(132, 204, 22, 0.15);
}
.preprint-trend-row__dir--falling {
  color: #B91C1C;
  background: rgba(239, 68, 68, 0.10);
}
.preprint-trend-row__dir--new {
  color: #1D4ED8;
  background: rgba(59, 130, 246, 0.12);
}
.preprint-trend-row__dir--stable {
  color: var(--ink-subtle, #8a8f80);
  background: transparent;
}

/* ============================================================
   Themen-Kombinationen (Cooccur — Emerging-Tab, Wort-basiert)
   ============================================================ */
.trends-cooccur { display: flex; flex-direction: column; gap: 20px; }

.cooccur-search { display: flex; flex-direction: column; gap: 14px; }
.cooccur-search__form { display: flex; gap: 8px; }
.cooccur-search__input {
  flex: 1; height: 44px; padding: 0 14px;
  font-size: 15px;
  border: 1px solid var(--border, #E8E8E0);
  border-radius: 8px;
  background: var(--surface, #FFFFFF);
  color: var(--ink, #0E1B2C);
}
.cooccur-search__input:focus {
  outline: none;
  border-color: var(--blue, #3B82F6);
  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.18);
}
.cooccur-search__btn {
  height: 44px; padding: 0 20px;
  font-size: 14px; font-weight: 600;
  background: var(--ink, #0E1B2C); color: white;
  border: none; border-radius: 8px;
  cursor: pointer;
  transition: opacity 0.15s;
}
.cooccur-search__btn:hover { opacity: 0.9; }

/* Syntax-Hint unter dem Eingabefeld — dezent, wie die Boolean-Hints
   in der Schnellsuche/Tab 2. */
.cooccur-search__hint {
  margin: -6px 0 0;
  font-size: 11.5px;
  color: var(--ink-subtle, #8A95A5);
  line-height: 1.5;
}
.cooccur-search__hint code {
  background: var(--surface-sunken, #F4F4EE);
  padding: 1px 5px;
  border-radius: 4px;
  font-family: var(--font-mono);
}

.cooccur-quick { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.cooccur-quick__label {
  font-size: 12px; color: var(--ink-muted, #4A5868);
  font-weight: 500;
}
.cooccur-quick__buttons { display: flex; gap: 6px; flex-wrap: wrap; }
.cooccur-quick__btn {
  height: 28px; padding: 0 12px;
  font-size: 12.5px; font-weight: 500;
  background: var(--surface-sunken, #F4F4EE);
  color: var(--ink, #0E1B2C);
  border: 1px solid var(--border, #E8E8E0);
  border-radius: 999px;
  cursor: pointer;
  transition: all 0.15s;
}
.cooccur-quick__btn:hover {
  background: var(--blue-soft, #DBEAFE);
  border-color: var(--blue, #3B82F6);
  color: var(--blue-deep, #2563EB);
}
.cooccur-quick__btn.is-active {
  background: var(--ink, #0E1B2C);
  color: white;
  border-color: var(--ink, #0E1B2C);
}

.cooccur-options { display: flex; align-items: center; gap: 8px; }
.cooccur-options__label { font-size: 12.5px; color: var(--ink-muted, #4A5868); }
.cooccur-options__select {
  height: 30px; padding: 0 8px;
  font-size: 13px;
  border: 1px solid var(--border, #E8E8E0);
  border-radius: 6px;
  background: var(--surface, #FFFFFF);
}

.cooccur-result {
  background: var(--surface, #FFFFFF);
  border: 1px solid var(--border, #E8E8E0);
  border-radius: 10px;
  padding: 16px;
}
.cooccur-result__head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 12px; margin-bottom: 12px; flex-wrap: wrap;
}
.cooccur-result__title {
  margin: 0; font-size: 15px; font-weight: 600; color: var(--ink, #0E1B2C);
}
.cooccur-result__meta {
  font-size: 12px; color: var(--ink-subtle, #8A95A5);
  font-family: var(--font-mono);
}

.cooccur-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.cooccur-row {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 12px;
  border: 1px solid transparent;
  border-radius: 8px;
  cursor: pointer;
  background: transparent;
  width: 100%; text-align: left;
  transition: all 0.14s;
  appearance: none;
  font: inherit;
  color: var(--ink, #0E1B2C);
}
.cooccur-row:hover {
  background: var(--surface-sunken, #F4F4EE);
  border-color: var(--border, #E8E8E0);
}
.cooccur-row__dir {
  flex: 0 0 24px;
  font-size: 13px; font-weight: 700;
  text-align: center;
  padding: 2px 4px; border-radius: 4px;
  line-height: 1.4;
}
.cooccur-row__dir--rising { color: #15803D; background: rgba(34, 197, 94, 0.12); }
.cooccur-row__dir--falling { color: #B91C1C; background: rgba(239, 68, 68, 0.10); }
.cooccur-row__dir--new { color: #1D4ED8; background: rgba(59, 130, 246, 0.12); }
.cooccur-row__dir--stable { color: var(--ink-subtle, #8A95A5); background: transparent; }

.cooccur-row__pair {
  flex: 1 1 40%; min-width: 0;
  font-size: 14px; font-weight: 500;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.cooccur-row__pair-term {
  color: var(--ink-subtle, #8A95A5);
  font-weight: 400;
}
.cooccur-row__pair-partner {
  color: var(--ink, #0E1B2C);
  font-weight: 600;
}

.cooccur-row__count {
  flex: 0 0 auto;
  font-family: var(--font-mono);
  font-size: 12.5px; color: var(--ink-muted, #4A5868);
  min-width: 90px; text-align: right;
  font-variant-numeric: tabular-nums;
}
.cooccur-row__growth {
  flex: 0 0 auto;
  font-family: var(--font-mono);
  font-size: 12px; font-weight: 600;
  min-width: 70px; text-align: right;
  font-variant-numeric: tabular-nums;
}
.cooccur-row__growth--rising { color: #15803D; }
.cooccur-row__growth--falling { color: #B91C1C; }
.cooccur-row__growth--new { color: #1D4ED8; font-style: italic; }
.cooccur-row__growth--stable { color: var(--ink-subtle, #8A95A5); }

.cooccur-state {
  padding: 24px;
  text-align: center;
  font-size: 13.5px;
  color: var(--ink-muted, #4A5868);
  background: var(--surface-sunken, #F4F4EE);
  border-radius: 10px;
  display: flex; align-items: center; justify-content: center; gap: 10px;
}
.cooccur-state--hint {
  background: transparent;
  color: var(--ink-subtle, #8A95A5);
  font-style: italic;
}
/* Syntax-Fehler (FTS5-Boolean-Query kaputt) — dezent rot statt dem
   generischen "Keine Kombinationen"-Grau, damit klar ist: das ist kein
   "keine Treffer", sondern eine ungueltige Eingabe. */
.cooccur-state--error {
  background: rgba(239, 68, 68, 0.06);
  color: #B91C1C;
}
.cooccur-state--error code {
  background: rgba(239, 68, 68, 0.10);
  padding: 1px 5px;
  border-radius: 4px;
  font-family: var(--font-mono);
  color: inherit;
}
.cooccur-state__spinner {
  display: inline-block; width: 14px; height: 14px;
  border: 2px solid var(--border, #E8E8E0);
  border-top-color: var(--ink, #0E1B2C);
  border-radius: 50%;
  animation: cooccur-spin 0.7s linear infinite;
}
@keyframes cooccur-spin { to { transform: rotate(360deg); } }

@media (max-width: 640px) {
  .cooccur-row__count { min-width: 70px; }
  .cooccur-row__growth { min-width: 56px; }
  .cooccur-row__pair { flex-basis: 30%; }
}

/* ============================================================
   Journal-Filter: gruppierte Ansicht (nach VHB-Bereich)
   Loest das umbrechende Pill-Raster ab — Bereich-Header +
   alphabetische, mehrspaltige Zeilenliste pro Bereich.
   ============================================================ */
.journal-filter__groups {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.journal-group__head {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 7px;
  padding-bottom: 5px;
  border-bottom: 1px solid var(--border);
}
.journal-group__title {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--accent-lime-deeper);
}
.journal-group__count {
  font-size: 11px;
  font-family: ui-monospace, "SF Mono", "Roboto Mono", monospace;
  color: var(--ink-subtle);
}
.journal-group__list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 2px 14px;
}

/* Flache, alphabetische Journal-Liste (partials/journals_filter_list.html).
   Zeigt jetzt IMMER alle aktiven Journals (nicht nur die im aktuellen
   Bereich/Rating-Scope) — kann also deutlich laenger werden als frueher.
   Ohne Deckelung wuerde eine 300+-Zeilen-Liste die Seite sprengen. */
.journal-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 1px 14px;
  max-height: 320px;
  overflow-y: auto;
  padding-right: 2px;
}
.journal-list__empty {
  padding: 10px 2px;
  font-size: 12px;
  color: var(--ink-subtle);
  font-style: italic;
}

.journal-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 7px;
  border-radius: 7px;
  cursor: pointer;
  min-width: 0;
  transition: background-color 0.12s ease;
}
/* _jFilterList() (Schnell-Filter) setzt row.hidden=true auf nicht
   passende Zeilen — ohne diese Regel gewinnt "display:flex" oben gegen
   das native [hidden] (Autor-Ursprung schlaegt UA-Ursprung unabhaengig
   von Spezifitaet), der Filter wuerde also sichtbar nichts tun. Selbes
   Muster wie .feedback-modal[hidden] weiter unten in diesem File. */
.journal-row[hidden] {
  display: none;
}
.journal-row:hover {
  background: var(--sunken);
}
.journal-row:has(input:checked) {
  background: var(--accent-lime-soft-bg);
}
.journal-row input[type="checkbox"] {
  flex-shrink: 0;
  cursor: pointer;
  accent-color: var(--accent-lime-deep);
}
.journal-row__name {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 12.5px;
  line-height: 1.3;
  color: var(--ink-muted);
}
.journal-row:has(input:checked) .journal-row__name {
  color: var(--ink);
  font-weight: 500;
}
.journal-row__ratings {
  display: inline-flex;
  gap: 3px;
  flex-shrink: 0;
}

/* ============================================================
   Datenbank / Journals — Tabelle mit Facetten-Filter (info.html)
   Ein Journal = eine Zeile mit ALLEN seinen Bereichs-Ratings; links ein
   rein client-seitiges Facetten-Panel (Suche + Bereich + Rating + FT50,
   Filter-JS: window entfaellt, alles scoped auf [data-jdb] in info.html).
   Layout-Mechanik (220px Sidebar, sticky, 1fr Inhalt) analog .bm-layout
   (Bookmarks) — eigener Klassenname, weil eigene Domaene.
   ============================================================ */
.jdb-layout {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 24px;
  align-items: start;
}
@media (max-width: 860px) {
  .jdb-layout { grid-template-columns: 1fr; }
}

.jdb-filters {
  position: sticky;
  top: 24px;
  padding: 16px 14px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  /* KEIN overflow:hidden — sonst schneidet es das Bereichs-Dropdown-
     Popover ab (siehe area_chips.html-Kommentar). */
}
@media (max-width: 860px) {
  .jdb-filters { position: static; }
}
.jdb-filters__group {
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.jdb-filters__group-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* Kuerzel-Legende ("?" neben "Bereich"): natives <details> statt eigenem
   JS-Popover (siehe area-dropdown fuer die aufwendigere Variante mit
   Suche/Alle/Keine — hier reicht die simple, immer-verfuegbare Browser-
   Offenbarung, funktioniert identisch per Klick UND Tap). Der Trigger ist
   winzig, deshalb Panel ueber `right:0` rechtsbuendig am Trigger verankert
   und breiter als die 220px-Spalte — dieselbe Ueberlauf-Logik wie
   .area-dropdown__panel (siehe Kommentar dort: KEIN overflow:hidden auf
   .jdb-filters, sonst wird abgeschnitten). */
.jdb-legend { position: relative; }
.jdb-legend__trigger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 17px; height: 17px;
  border-radius: 50%;
  border: 1px solid var(--border-strong);
  background: var(--surface);
  color: var(--ink-subtle);
  font-family: var(--font-mono);
  font-size: 10.5px; font-weight: 700;
  cursor: pointer;
  transition: all var(--dur) var(--ease);
}
.jdb-legend__trigger:hover { color: var(--ink); border-color: var(--ink-muted); }
.jdb-legend[open] .jdb-legend__trigger { background: var(--ink); border-color: var(--ink); color: #fff; }
.jdb-legend__panel {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  z-index: 30;
  width: 240px;
  max-width: min(240px, 88vw);
  max-height: 300px;
  overflow-y: auto;
  margin: 0;
  padding: 10px;
  list-style: none;
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.jdb-legend__panel li {
  display: flex;
  align-items: baseline;
  gap: 8px;
  font-size: 11.5px;
  color: var(--ink-muted);
}
.jdb-legend__panel .area-code { flex-shrink: 0; min-width: 42px; color: var(--ink); }
@media (max-width: 768px) {
  .jdb-legend__trigger { width: 22px; height: 22px; font-size: 11px; }
}

/* Suchfeld mit Icon links — Muster analog .notes-search (notes.html), aber
   Rahmenfarbe/Radius an die uebrigen Bedienelemente der Seitenleiste
   angeglichen (.chip nutzt --border-strong + die Aside selbst --radius-md),
   statt als eigenstaendiger, loser Kasten ueber den Filtergruppen zu wirken. */
.jdb-search {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-md);
  padding: 0 10px 0 32px;
  display: flex;
  align-items: center;
  transition: border-color var(--dur) var(--ease);
}
.jdb-search:hover { border-color: var(--ink-muted); }
.jdb-search:focus-within { border-color: var(--brand-blue); }
.jdb-search:focus-within .jdb-search__icon { color: var(--brand-blue); }
.jdb-search__icon {
  position: absolute;
  left: 10px; top: 50%;
  transform: translateY(-50%);
  color: var(--ink-subtle);
  pointer-events: none;
  transition: color var(--dur) var(--ease);
}
.jdb-search__input {
  flex: 1; min-width: 0;
  border: none; background: transparent;
  padding: 8px 0;
  font-size: 12.5px;
  outline: none;
}
.jdb-search__input::placeholder { color: var(--ink-subtle); }

.jdb-results__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 8px;
}
.jdb-results__count { font-size: 11.5px; color: var(--ink-subtle); }

/* FT50-Kontrollanzeige — ruhig/dauerhaft (48 von 50 ist Normalzustand,
   kein Alarm), aber die Praesenz-Zahl faerbt sich dezent amber ein sobald
   sie unter das Total faellt: Signal fuer den Betrieb, dass ein Journal-
   Import scripts/sync_ft50.py noetig macht (kein Rot/Banner — das waere
   Alarmcharakter fuer einen Zustand, der nach jedem Import kurz normal ist). */
.jdb-ft50-status {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 4px 10px;
  font-size: 11.5px;
  color: var(--ink-subtle);
  margin-bottom: 10px;
}
.jdb-ft50-status__present { color: var(--ink-muted); }
.jdb-ft50-status--gap .jdb-ft50-status__present { color: #9A6A00; font-weight: 600; }
.jdb-ft50-status__details { display: inline-block; }
.jdb-ft50-status__details summary {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  cursor: pointer;
  color: var(--ink-subtle);
  text-decoration: underline dotted;
  text-underline-offset: 2px;
}
.jdb-ft50-status__details summary:hover { color: var(--ink); }
.jdb-ft50-status__details summary svg { transition: transform var(--dur) var(--ease); }
.jdb-ft50-status__details[open] summary svg { transform: rotate(180deg); }
.jdb-ft50-status__list {
  list-style: none;
  margin: 6px 0 0;
  padding: 8px 10px;
  background: var(--surface-sunken);
  border-radius: var(--radius-sm);
  font-size: 11px;
  color: var(--ink-muted);
  display: flex;
  flex-direction: column;
  gap: 3px;
  width: max-content;
  max-width: min(280px, 88vw);
}

.jdb-table { overflow: hidden; }
.jdb-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 6px 16px;
  padding: 10px 16px;
  transition: background-color var(--dur) var(--ease);
}
.jdb-row + .jdb-row { border-top: 1px solid var(--border); }
.jdb-row[hidden] { display: none; }
.jdb-row:hover { background: var(--surface-sunken); }

.jdb-row__id {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  flex: 1 1 260px;
}
.jdb-row__name {
  font-size: 14.5px;
  font-weight: 600;
  color: var(--ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.jdb-row__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 8px;
  font-size: 11.5px;
  color: var(--ink-subtle);
  min-width: 0;
}
.jdb-row__ratings {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  flex: 0 1 auto;
}
.jdb-row__unrated {
  font-size: 11.5px;
  color: var(--ink-subtle);
}

@media (max-width: 768px) {
  /* align-items bleibt stretch (Default) statt flex-start: .jdb-row__id
     braucht die volle Zeilenbreite, sonst greift text-overflow:ellipsis
     nicht (fit-content-Box hat nie weniger Platz als der Name braucht)
     und ein langer Journal-Name reisst die Zeile horizontal auf. */
  .jdb-row { flex-direction: column; }
  .jdb-row__id,
  .jdb-row__ratings { width: 100%; }
}

/* ============================================================
   References-in-DB — klickbare Referenzliste im Paper-Detail
   ============================================================ */
.refs-in-db-toggle {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  background: none;
  border: none;
  border-bottom: 1px dashed var(--lime, #84CC16);
  color: var(--ink);
  cursor: pointer;
  padding: 0;
  font: inherit;
  line-height: inherit;
  transition: border-color 0.15s;
}
.refs-in-db-toggle:hover {
  border-bottom-color: var(--moss, #3F5311);
}
.refs-in-db-toggle__chevron {
  transition: transform 0.2s ease;
  flex-shrink: 0;
}
.refs-in-db-toggle[aria-expanded="true"] .refs-in-db-toggle__chevron {
  transform: rotate(180deg);
}
.refs-in-db {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-top: 10px;
  max-height: 360px;
  overflow-y: auto;
}
.refs-in-db__item {
  display: flex;
  flex-direction: column;
  gap: 1px;
  padding: 6px 8px;
  border-radius: 6px;
  text-decoration: none;
  color: var(--ink);
  transition: background 0.12s;
}
.refs-in-db__item:hover {
  background: var(--lime-50, #F4F7EC);
}
.refs-in-db__title {
  font-size: 12.5px;
  line-height: 1.35;
  font-weight: 500;
}
.refs-in-db__meta {
  font-size: 11px;
  color: var(--ink-subtle, #8A95A5);
  line-height: 1.3;
}

/* ============================================================
   Journal-Filter — klappbar (Desktop: Toggle statt immer offen)
   ============================================================ */
.journal-filter__toggle-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: none;
  border: 1px solid var(--border-soft, #E3E3DA);
  border-radius: 6px;
  padding: 4px 10px;
  font-size: 12px;
  color: var(--ink-muted, #5a5f54);
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
}
.journal-filter__toggle-btn:hover {
  border-color: var(--lime, #84CC16);
  background: var(--lime-50, #F4F7EC);
}
.journal-filter__toggle-chevron {
  transition: transform 0.2s ease;
  flex-shrink: 0;
}
.journal-filter[data-collapsed="true"] .journal-filter__toggle-chevron {
  transform: rotate(-90deg);
}
.journal-filter[data-collapsed="true"] .journal-filter__sheet,
.journal-filter[data-collapsed="true"] .journal-filter__head .journal-filter__quick {
  display: none;
}
/* Mobile: sheet-system uebernimmt — Toggle-Button nur auf Desktop
   767 → 768 konsolidiert (konsistent mit Haupt-Mobile-Breakpoint der Codebase) */
@media (max-width: 768px) {
  .journal-filter__toggle-btn { display: none; }
}

/* Agent-Form Pill-Grid collapsible */
.journal-filter--form[data-collapsed="true"] .journal-pill-grid,
.journal-filter--form[data-collapsed="true"] .journal-filter__quick {
  display: none;
}
.journal-filter--form[data-collapsed="true"] .journal-filter__toggle-chevron {
  transform: rotate(-90deg);
}

/* ============================================================
   Preprint-Radar — Zeitraum-Dropdown statt Chip-Row
   ============================================================ */
/* Preprint-Radar — Von/Bis-Datumseingabe */
.preprint-date-input {
  font-size: 12.5px;
  padding: 5px 8px;
  border: 1px solid var(--border-soft, #E3E3DA);
  border-radius: 6px;
  background: var(--surface, #fff);
  color: var(--ink, #1a1a17);
  font-family: inherit;
  min-width: 120px;
  transition: border-color 0.15s;
}
.preprint-date-input:hover,
.preprint-date-input:focus {
  border-color: var(--lime, #84CC16);
  outline: none;
}

/* ============================================================
   MY FILTERS — eigene Such-Filter (Bereich/Rating/Journals)
   ============================================================ */
.my-filters-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  margin-top: 16px;
  max-width: 920px;
}
@media (min-width: 760px) {
  .my-filters-list { grid-template-columns: repeat(2, 1fr); }
}
.my-filter-card {
  display: flex; flex-direction: column;
  background: var(--surface, #FFFFFF);
  border: 1px solid var(--border, #E8E8E0);
  border-radius: var(--radius-lg, 14px);
  padding: 16px 18px;
  transition: border-color 150ms, box-shadow 150ms;
}
.my-filter-card:hover {
  border-color: var(--border-strong, #D4D4C8);
  box-shadow: var(--shadow-sm, 0 1px 2px rgba(14,27,44,0.04));
}
.my-filter-card__head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}
.my-filter-card__name {
  font-size: 15px; font-weight: 700;
  color: var(--ink, #0E1B2C);
}
.my-filter-card__actions {
  display: flex; gap: 6px;
}
.my-filter-card__body {
  display: flex; flex-direction: column; gap: 6px;
  font-size: 13px;
}
.my-filter-card__row {
  display: flex; flex-wrap: wrap; gap: 6px; align-items: center;
}
.my-filter-card__lbl {
  font-size: 11px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--ink-subtle, #8A95A5);
  min-width: 70px;
}
.pill {
  display: inline-flex; align-items: center;
  padding: 2px 8px; border-radius: 999px;
  font-size: 11.5px; font-weight: 500;
}
.pill--blue {
  background: var(--brand-blue-soft, #DBEAFE);
  color: var(--brand-blue-deep, #2563EB);
}
.pill--mono {
  font-family: var(--font-mono);
  background: var(--surface-sunken, #F4F4EE);
  color: var(--ink, #0E1B2C);
}
.pill--ft50 {
  font-family: var(--font-mono);
  font-weight: 700;
  letter-spacing: 0.04em;
  background: var(--ink, #0E1B2C);
  color: #FAFAF7;
  border: 1px solid rgba(255, 255, 255, 0.14);
}
.my-filter-card--new {
  appearance: none;
  border: 2px dashed var(--border-strong, #D4D4C8);
  background: transparent;
  cursor: pointer;
  font: inherit;
  color: var(--ink-muted, #4A5868);
  align-items: center; justify-content: center;
  gap: 8px;
  min-height: 100px;
  transition: all 150ms;
}
.my-filter-card--new:hover {
  border-color: var(--brand-blue, #3B82F6);
  background: var(--brand-blue-soft, #DBEAFE);
  color: var(--brand-blue-deep, #2563EB);
}
.my-filter-card__plus {
  font-size: 22px; line-height: 1; font-weight: 300;
}
.my-filter-card__limit {
  padding: 14px;
  text-align: center;
  font-size: 13px;
  color: var(--ink-subtle, #8A95A5);
  border: 1px dashed var(--border, #E8E8E0);
  border-radius: 10px;
  font-style: italic;
}

/* ----- MODAL ----- */
.my-filter-modal {
  position: fixed; inset: 0; z-index: 100;
  display: flex; align-items: center; justify-content: center;
}
.my-filter-modal__backdrop {
  position: absolute; inset: 0;
  background: rgba(14, 27, 44, 0.4);
}
.my-filter-modal__panel {
  position: relative;
  background: var(--surface, #FFFFFF);
  border-radius: var(--radius-lg, 14px);
  box-shadow: 0 12px 40px rgba(14, 27, 44, 0.18);
  width: min(640px, 95vw);
  max-height: 90vh;
  overflow-y: auto;
  padding: 24px 28px;
}
.my-filter-modal__head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 18px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border);
}
.my-filter-modal__head h3 {
  font-size: 18px; font-weight: 700; margin: 0;
}
.my-filter-modal__close {
  border: 0; background: transparent; cursor: pointer;
  font-size: 24px; line-height: 1; padding: 4px 8px;
  color: var(--ink-subtle);
}
.my-filter-modal__close:hover { color: var(--ink); }
.my-filter-modal__row {
  margin-bottom: 16px;
  display: flex; flex-direction: column; gap: 6px;
}
.my-filter-modal__row label,
.my-filter-modal__lbl {
  font-size: 12px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--ink-muted);
}
.my-filter-modal__row input[type="text"] {
  width: 100%;
  height: 38px;
  padding: 0 12px;
  font-size: 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm, 6px);
  background: var(--surface);
}
.my-filter-modal__row input[type="text"]:focus {
  outline: none; border-color: var(--brand-blue);
  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.18);
}
.my-filter-modal__foot {
  display: flex; justify-content: flex-end; gap: 8px;
  margin-top: 22px;
  padding-top: 16px;
  border-top: 1px solid var(--border);
}
.my-filter-modal__error {
  margin-top: 12px;
  padding: 10px 14px;
  background: rgba(239, 68, 68, 0.08);
  border: 1px solid rgba(239, 68, 68, 0.3);
  border-radius: 6px;
  color: #B91C1C;
  font-size: 13px;
}

/* ============================================================
   SCHNELLSUCHE — Custom-Filter-Buttons (visuell wie .chip, aber
   mit gestrichelter Border als Unterscheidungsmerkmal)
   ============================================================ */
.user-filter-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 12px;
  border: 1px dashed var(--border-strong);
  background: var(--surface);
  color: var(--ink-muted);
  border-radius: 999px;
  font-size: 12.5px; font-weight: 500;
  cursor: pointer;
  transition: all var(--dur) var(--ease);
  font-family: inherit;
  line-height: 1;
}
.user-filter-chip:hover {
  border-color: var(--ink-muted);
  color: var(--ink);
}
.user-filter-chip.is-active {
  background: var(--ink);
  border-color: var(--ink);
  color: white;
}
.user-filter-chip__name {
  white-space: nowrap; max-width: 160px;
  overflow: hidden; text-overflow: ellipsis;
}
.user-filters-row {
  display: flex; flex-wrap: wrap; gap: 6px;
  margin-top: 6px;
}

/* ============================================================
   E-MAIL-UPDATE — Abo-Karten, Modal-Erweiterungen, Digest-Historie
   (email_updates.html)
   ============================================================ */
.email-sub-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  margin-top: 16px;
  /* Bewusst KEINE eigene max-width: sonst enden die Karten rechts frueher als
     Seiten-Header und Digest-Historie (die die volle Inhaltsbreite nutzen) und
     fluchten nicht. Die Breite kommt aus dem Inhalts-Container. */
}
@media (min-width: 760px) {
  .email-sub-list { grid-template-columns: repeat(2, 1fr); }
}
.email-sub-card {
  display: flex; flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 16px 18px;
  transition: border-color 150ms, box-shadow 150ms;
}
.email-sub-card:hover {
  border-color: var(--border-strong);
  box-shadow: var(--shadow-sm);
}
.email-sub-card__head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}
.email-sub-card__title-wrap {
  display: flex; flex-direction: column; gap: 2px;
  min-width: 0;
}
.email-sub-card__name {
  font-size: 15px; font-weight: 700;
  color: var(--ink);
}
.email-sub-card__email {
  font-size: 11.5px;
  color: var(--ink-subtle);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.email-sub-card__actions {
  display: flex; flex-wrap: wrap; gap: 6px;
  flex-shrink: 0;
}
.email-sub-card__body {
  display: flex; flex-direction: column; gap: 6px;
  font-size: 13px;
}
.email-sub-card__row {
  display: flex; flex-wrap: wrap; gap: 6px; align-items: center;
}
.email-sub-card__lbl {
  font-size: 11px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--ink-subtle);
  min-width: 62px;
}

/* Quick-Toggle "Aktiv/Pausiert" auf der Card — Lime-Akzent wenn aktiv,
   sonst gedaempft. Selbe Pill-Optik wie .select-all-btn.is-all-selected. */
.email-sub-card__status-btn {
  display: inline-flex; align-items: center;
  font-family: var(--font-body);
  font-size: 11px; font-weight: 500;
  padding: 3px 9px;
  background: transparent;
  color: var(--ink-subtle);
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  cursor: pointer;
  transition: all var(--dur) var(--ease);
}
.email-sub-card__status-btn:hover { border-color: var(--ink-muted); color: var(--ink); }
.email-sub-card__status-btn.is-active {
  border-color: var(--accent-lime-deep);
  color: var(--moss-deep);
  background: var(--accent-lime-soft);
}
.email-sub-card__status-btn .lime-dot.is-off { background: var(--ink-subtle); }

.email-sub-card__test {
  display: flex; flex-direction: column; gap: 6px;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px dashed var(--border-strong);
}
.email-sub-card__test-result {
  font-size: 12px;
  line-height: 1.5;
}
.email-sub-card__test-result--ok { color: var(--moss-deep); }
.email-sub-card__test-result--error { color: var(--danger); }
.email-sub-card__test-result a { text-decoration: underline; text-underline-offset: 2px; }
/* Dezenter Zusatz-Hinweis unter dem Test-Ergebnis (z.B. "Testzeitraum
   angepasst") — bewusst gedaempft, kein Erfolg/Fehler-Ton. */
.email-sub-card__test-hint {
  margin-top: 4px;
  color: var(--ink-subtle);
  font-style: italic;
}

/* Double-Opt-In-Status: sichtbar solange confirm_pending true ist (Badge +
   Erklaerzeile + Resend-Button), bestaetigte Abos zeigen den Block gar
   nicht. Bewusst gedeckte Sunken-Flaeche statt Alarmfarbe. */
.email-sub-card__confirm {
  display: flex; flex-direction: column; gap: 8px;
  margin-top: 12px;
  padding: 12px 14px;
  background: var(--surface-sunken);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
}
.email-sub-card__confirm-text {
  margin: 0;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--ink-muted);
}
.email-sub-card__confirm-result {
  font-size: 12px;
  line-height: 1.5;
}
.email-sub-card__confirm-result--ok { color: var(--moss-deep); }
.email-sub-card__confirm-result--error { color: var(--danger); }
.email-sub-card__confirm-result--info { color: var(--ink-subtle); font-style: italic; }

.email-sub-card--new {
  appearance: none;
  border: 2px dashed var(--border-strong);
  background: transparent;
  cursor: pointer;
  font: inherit;
  color: var(--ink-muted);
  display: flex; align-items: center; justify-content: center;
  gap: 8px;
  min-height: 100px;
  transition: all 150ms;
}
.email-sub-card--new:hover {
  border-color: var(--brand-blue);
  background: var(--brand-blue-soft);
  color: var(--brand-blue-deep);
}
.email-sub-card__plus { font-size: 22px; line-height: 1; font-weight: 300; }
.email-sub-card__limit {
  padding: 14px;
  text-align: center;
  font-size: 13px;
  color: var(--ink-subtle);
  border: 1px dashed var(--border);
  border-radius: 10px;
  font-style: italic;
}

/* ----- Modal-Erweiterungen: Name/E-Mail zweispaltig + Zeit-Grid.
   Modal-Grundgeruest (.my-filter-modal*, .chip*) wird 1:1 wiederverwendet. ----- */
.email-sub-modal__two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.email-sub-modal__two-col label {
  display: block;
  margin-bottom: 6px;
}
@media (max-width: 600px) {
  .email-sub-modal__two-col { grid-template-columns: 1fr; }
}
.email-sub-time-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
.email-sub-time-grid select {
  width: 100%;
  height: 38px;
  padding: 0 10px;
  font-size: 13px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
}
.email-sub-time-grid select:focus {
  outline: none; border-color: var(--brand-blue);
  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.18);
}
@media (max-width: 600px) {
  .email-sub-time-grid { grid-template-columns: 1fr; }
}

/* ----- Digest-Historie ----- */
.email-digest-section { margin-top: 32px; }
.email-digest-section__head {
  display: flex; align-items: center; gap: 8px;
  margin-bottom: 10px;
}
.email-digest-list {
  display: flex; flex-direction: column;
  gap: 8px;
}
.email-digest-row {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: 6px 16px;
  padding: 10px 14px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  font-size: 12.5px;
}
.email-digest-row__period {
  display: flex; align-items: center; gap: 6px;
  font-weight: 600;
  min-width: 130px;
}
.email-digest-row__meta {
  display: flex; align-items: center; gap: 6px;
  color: var(--ink-muted);
  flex: 1 1 auto;
  min-width: 0;
}
.email-digest-row__to {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  max-width: 220px;
}
.email-digest-row__actions {
  display: flex; gap: 6px;
  margin-left: auto;
}

/* ----- Digest-Snapshot-Seite (digest_standalone.html; digest_view.html
   stillgelegt, siehe Seam-Vertrag (teilbare Digest-Seite)) ----- */
.digest-hint {
  display: flex; align-items: center; gap: 9px;
  margin: 0 0 16px;
  padding: 9px 14px;
  border: 1px solid var(--border);
  background: var(--surface-sunken);
  border-radius: 10px;
  font-size: 13px;
  color: var(--ink-muted);
}
.digest-hint svg { flex: 0 0 auto; color: var(--ink-subtle); }
.digest-hint .badge-amber { margin-left: 2px; }
.digest-section { margin-bottom: 28px; }
.digest-section__head {
  display: flex; align-items: center; gap: 8px;
  margin-bottom: 10px;
}
#digest-export-btn .spinner { animation: spin 1s linear infinite; }

/* Mobile: Card-Head-Actions (Aktiv/Bearbeiten/Loeschen) brauchen auf
   schmalen Screens volle Breite, sonst quetschen sie sich neben den Namen. */
@media (max-width: 480px) {
  .email-sub-card__head { flex-direction: column; align-items: stretch; }
  .email-sub-card__actions { justify-content: flex-start; }
  .email-digest-row__actions { margin-left: 0; width: 100%; }
}

/* ============================================================
   E-MAIL-CONFIRM — oeffentliche Double-Opt-In-Bestaetigungsseite
   (email_confirm.html). Kein Sidebar-Layout, Vorbild ist login.html
   (.login-card wird 1:1 wiederverwendet).
   ============================================================ */
.email-confirm-result {
  display: flex; flex-direction: column; align-items: center;
  text-align: center;
  gap: 10px;
  padding: 4px 0 2px;
}
.email-confirm-result svg { flex: 0 0 auto; }
.email-confirm-result__title {
  font-family: var(--font-display);
  font-size: 19px; font-weight: 500;
  color: var(--ink);
  margin: 0;
}
.email-confirm-result__text {
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--ink-muted);
  margin: 0;
  max-width: 320px;
}
.email-confirm-result--ok svg,
.email-confirm-result--ok .email-confirm-result__title { color: var(--moss-deep); }
.email-confirm-result--warn svg,
.email-confirm-result--warn .email-confirm-result__title { color: #9A6A00; }
.email-confirm-result--danger svg,
.email-confirm-result--danger .email-confirm-result__title { color: var(--danger); }
.email-confirm-result--neutral svg { color: var(--ink-subtle); }

.email-confirm-inline-error {
  margin-top: 10px;
  font-size: 12.5px;
  color: var(--danger);
  text-align: center;
}

/* ============================================================
   FEEDBACK-MODAL
   Globales Modal fuer Nutzer-Feedback. Oeffnet per JS (feedback.js).
   Muster: My-Filter-Modal (gleicher Schatten, gleiche Overlay-Farbe).
   ============================================================ */

/* Overlay */
.feedback-modal {
  position: fixed;
  inset: 0;
  z-index: 300;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: rgba(14, 27, 44, 0.45);
}
.feedback-modal[hidden] { display: none; }

/* Panel */
.feedback-modal__panel {
  position: relative;
  background: var(--surface);
  border-radius: var(--radius-lg);
  box-shadow: 0 12px 40px rgba(14, 27, 44, 0.18);
  width: min(480px, 100%);
  max-height: 90vh;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}

/* Header */
.feedback-modal__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 20px 14px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.feedback-modal__title {
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 600;
  color: var(--ink);
  margin: 0;
  display: flex;
  align-items: center;
  gap: 8px;
}
.feedback-modal__close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border: none;
  background: transparent;
  border-radius: var(--radius-sm);
  color: var(--ink-muted);
  cursor: pointer;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.feedback-modal__close:hover {
  background: var(--surface-sunken);
  color: var(--ink);
}

/* Body */
.feedback-modal__body {
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* Kategorie-Pills */
.feedback-category-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.feedback-category-pill {
  position: relative;
  display: inline-flex;
  align-items: center;
  cursor: pointer;
  user-select: none;
}
.feedback-category-pill input[type="radio"] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
  width: 0;
  height: 0;
}
.feedback-category-pill__label {
  display: inline-flex;
  align-items: center;
  padding: 5px 14px;
  border-radius: 999px;
  border: 1px solid var(--border-strong);
  background: var(--surface);
  font-size: 13px;
  font-weight: 500;
  color: var(--ink-muted);
  line-height: 1;
  transition: all var(--dur) var(--ease);
  cursor: pointer;
}
.feedback-category-pill:hover .feedback-category-pill__label {
  border-color: var(--ink-muted);
  color: var(--ink);
}
.feedback-category-pill:has(input:checked) .feedback-category-pill__label {
  background: var(--ink);
  border-color: var(--ink);
  color: white;
}

/* Textarea-Wrapper mit Zeichen-Zaehler */
.feedback-modal__textarea-wrap {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.feedback-modal__textarea-footer {
  display: flex;
  justify-content: flex-end;
}
.feedback-modal__char-count {
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: var(--ink-subtle);
}

/* Status-Meldung */
.feedback-modal__status {
  font-size: 13px;
  min-height: 20px;
  line-height: 1.4;
}
.feedback-modal__status--error  { color: var(--danger); }
.feedback-modal__status--success { color: var(--moss-deep); }
.feedback-modal__status--loading { color: var(--ink-muted); font-style: italic; }

/* Footer */
.feedback-modal__foot {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  padding: 14px 20px 18px;
  border-top: 1px solid var(--border);
  flex-shrink: 0;
}

/* Mobile (Phase 3f): Modal als Bottom-Sheet statt zentriert. Slidet von
   unten rein, fuellt die Breite, oben abgerundet, Safe-Area-Padding unten.
   Desktop (>=769px) bleibt das zentrierte Modal unveraendert. Eingabefelder
   sind >=16px (greift bereits ueber die globale iOS-Zoom-Regel). */
@media (max-width: 768px) {
  .feedback-modal {
    align-items: flex-end;
    padding: 0;
  }
  .feedback-modal__panel {
    width: 100%;
    max-width: none;
    max-height: 90vh;
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    animation: feedback-sheet-up 240ms cubic-bezier(0.16, 1, 0.3, 1);
  }
  @keyframes feedback-sheet-up {
    from { transform: translateY(100%); }
    to   { transform: translateY(0); }
  }
  .feedback-modal__foot {
    padding-bottom: calc(18px + env(safe-area-inset-bottom, 0px));
  }
}

/* Sidebar-Feedback-Button */
.sidebar-feedback-btn {
  display: flex;
  align-items: center;
  gap: 9px;
  width: 100%;
  padding: 5px 9px;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 500;
  color: var(--ink-muted);
  background: transparent;
  border: none;
  cursor: pointer;
  text-align: left;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
  margin: 1px 0;
  font-family: var(--font-body);
}
.sidebar-feedback-btn svg {
  color: var(--ink-subtle);
  flex-shrink: 0;
}
.sidebar-feedback-btn:hover {
  background: rgba(14, 27, 44, 0.045);
  color: var(--ink);
}
.sidebar-feedback-btn:hover svg { color: var(--ink-muted); }

/* ============================================================
   ADMIN USER EDIT — aufklappbares Bearbeiten-Formular
   ============================================================ */

/* Summary-Trigger: Stift-Icon + Text, dezent wie die anderen underline-Links */
.admin-edit-summary {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  font-weight: 500;
  color: var(--ink-muted);
  cursor: pointer;
  padding: 2px 0;
  border-radius: var(--radius-sm);
  transition: color var(--dur) var(--ease);
  list-style: none;
}
.admin-edit-summary:hover { color: var(--brand-blue-deep); }
.admin-edit-summary::-webkit-details-marker { display: none; }

/* Formular-Grid im aufgeklappten Zustand */
.admin-edit-form {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 10px;
  padding: 14px 16px;
  background: var(--surface-sunken);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}
.admin-edit-form__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
@media (max-width: 480px) {
  .admin-edit-form__grid { grid-template-columns: 1fr; }
}
.admin-edit-form__field {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.admin-edit-form__field--full {
  grid-column: 1 / -1;
}
.admin-edit-form__label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-subtle);
}
.admin-edit-form__input {
  height: 32px;
  padding: 0 10px;
  font-size: 13px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--ink);
  font-family: var(--font-body);
  transition: border-color var(--dur);
  width: 100%;
}
.admin-edit-form__input:focus {
  outline: none;
  border-color: var(--brand-blue);
  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.12);
}

/* Analyse-Text speichern — Sektion unter dem Formular */
.analysis-saved-section {
  margin-top: 28px;
  max-width: 640px;
}
.analysis-saved-section__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}
.analysis-saved-section__title {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-subtle);
  margin: 0;
}
.analysis-saved-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.analysis-saved-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.analysis-saved-item:hover {
  border-color: var(--border-strong);
  box-shadow: var(--shadow-xs);
}
.analysis-saved-item__info {
  flex: 1;
  min-width: 0;
}
.analysis-saved-item__title {
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.analysis-saved-item__meta {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink-subtle);
  margin-top: 2px;
}
.analysis-saved-item__preview {
  font-size: 12px;
  color: var(--ink-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 36ch;
}
.analysis-saved-item__actions {
  display: flex;
  gap: 4px;
  flex-shrink: 0;
}
.analysis-saved-empty {
  padding: 20px;
  text-align: center;
  color: var(--ink-subtle);
  font-size: 13px;
  font-style: italic;
  border: 1px dashed var(--border-strong);
  border-radius: var(--radius-sm);
}

/* Admin-Feedback: Status-Filter als Pills */
.feedback-filter-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 20px;
}
.feedback-filter-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 14px;
  border-radius: 999px;
  border: 1px solid var(--border-strong);
  background: var(--surface);
  font-size: 12.5px;
  font-weight: 500;
  color: var(--ink-muted);
  text-decoration: none;
  transition: all var(--dur) var(--ease);
}
.feedback-filter-pill:hover {
  border-color: var(--ink-muted);
  color: var(--ink);
}
.feedback-filter-pill.is-active {
  background: var(--ink);
  border-color: var(--ink);
  color: white;
}
.feedback-filter-pill__count {
  font-family: var(--font-mono);
  font-size: 11px;
  padding: 0 5px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.2);
  line-height: 1.5;
}
.feedback-filter-pill:not(.is-active) .feedback-filter-pill__count {
  background: var(--surface-sunken);
  color: var(--ink-subtle);
}

/* Aufklappbare lange Nachrichten im Admin-Feedback */
.feedback-msg-toggle {
  background: none;
  border: none;
  padding: 0;
  font: inherit;
  font-size: 11px;
  color: var(--brand-blue-deep);
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
  margin-left: 4px;
}
.feedback-msg-toggle:hover { color: var(--brand-blue-deep); opacity: 0.8; }
.feedback-msg-full { display: none; }
.feedback-msg-full.is-open { display: block; }

/* ============================================================
   LEGAL PAGES (Impressum, Datenschutz) — legal_base.html
   Standalone-Layout ohne Sidebar. Zentrierter Lesebereich.
   ============================================================ */

.legal-header {
  border-bottom: 1px solid var(--border);
  background: var(--surface);
}
.legal-header__inner {
  max-width: 760px;
  margin: 0 auto;
  padding: 14px 24px;
}
.legal-header__brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: var(--ink);
  transition: opacity var(--dur) var(--ease);
}
.legal-header__brand:hover { opacity: 0.75; }

.legal-main {
  padding: 40px 24px 64px;
}
.legal-article {
  max-width: 760px;
  margin: 0 auto;
  /* Fließtext: etwas größere Grundschrift als das App-UI */
  font-size: 14.5px;
  line-height: 1.7;
  color: var(--ink-muted);
}
/* Überschriften */
.legal-article h1 {
  font-family: var(--font-display);
  font-size: 26px;
  font-weight: 400;
  letter-spacing: -0.015em;
  color: var(--ink);
  margin: 0 0 6px;
  line-height: 1.2;
}
.legal-article .legal-meta {
  font-size: 12px;
  color: var(--ink-subtle);
  margin-bottom: 32px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--border);
}
.legal-article h2 {
  font-family: var(--font-body);
  font-size: 13.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-subtle);
  margin: 32px 0 10px;
}
.legal-article h3 {
  font-size: 14.5px;
  font-weight: 600;
  color: var(--ink);
  margin: 20px 0 6px;
}
.legal-article p {
  margin: 0 0 12px;
}
.legal-article ul, .legal-article ol {
  margin: 0 0 12px;
  padding-left: 20px;
}
.legal-article li { margin-bottom: 4px; }
.legal-article a {
  color: var(--brand-blue-deep);
  text-decoration: underline;
}
.legal-article a:hover { opacity: 0.8; }
.legal-article strong { color: var(--ink); }
/* Hervorhebungs-Block (z.B. "kein Cookie-Banner nötig") */
.legal-callout {
  background: var(--moss-soft);
  border-left: 3px solid var(--moss);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  padding: 12px 16px;
  font-size: 13.5px;
  color: var(--moss-deep);
  margin: 16px 0;
}

.legal-footer {
  border-top: 1px solid var(--border);
  padding: 16px 24px;
  background: var(--surface-sunken);
}
.legal-footer__nav {
  max-width: 760px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 12.5px;
  flex-wrap: wrap;
}
.legal-footer__nav a {
  color: var(--ink-muted);
  text-decoration: none;
  transition: color var(--dur) var(--ease);
}
.legal-footer__nav a:hover { color: var(--ink); }
.legal-footer__sep { color: var(--ink-subtle); }

/* Login-Seite: dezente Rechtliche Links unterhalb des Hinweis-Textes (AP-3) */
.login-legal-links {
  color: var(--ink-subtle);
  font-size: 11.5px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.login-legal-links a {
  color: var(--ink-subtle);
  text-decoration: none;
  transition: color var(--dur) var(--ease);
}
.login-legal-links a:hover { color: var(--ink-muted); }

/* ============================================================
   SETTINGS — settings.html (eingeloggte Seite, extends base.html)
   ============================================================ */

/* Danger-Bereich: roter Rahmen zur optischen Abgrenzung */
.settings-danger-zone {
  border: 1px solid rgba(239, 68, 68, 0.3);
  border-radius: var(--radius-md);
  background: rgba(239, 68, 68, 0.02);
  padding: 20px 24px;
}
.settings-danger-zone__title {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--danger);
  margin: 0 0 12px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.settings-danger-zone p {
  font-size: 13px;
  color: var(--ink-muted);
  margin: 0 0 16px;
}
/* Password-Input in normaler Höhe (inherit aus globalem Input-Reset),
   aber explizit damit mobile Zoom verhindert wird */
.settings-danger-zone input[type="password"] {
  font-size: 16px;
  max-width: 320px;
}
.settings-section-title {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-subtle);
  margin: 0 0 14px;
}
/* Fehler-Banner auf der Settings-Seite (analog zu agent_form.html) */
.settings-error {
  margin-bottom: 20px;
  padding: 10px 14px;
  background: rgba(239, 68, 68, 0.08);
  border: 1px solid rgba(239, 68, 68, 0.3);
  border-radius: var(--radius-sm);
  color: #B91C1C;
  font-size: 13px;
}

/* ============================================================
   STANDALONE LAYOUT — base_standalone.html / digest_standalone.html
   Oeffentliche, login-freie geteilte Seite (GET /d/{token}). Kein Sidebar,
   angelehnt an .legal-header/.legal-main (gleiche Econova-Sprache), erweitert
   um einen Login-/Account-Slot rechts, weil die Seite hybrid ist (anonym ODER
   eingeloggt).
   ============================================================ */
.standalone-topbar {
  border-bottom: 1px solid var(--border);
  background: var(--surface);
}
.standalone-topbar__inner {
  max-width: var(--standalone-max, 880px);
  margin: 0 auto;
  padding: 14px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.standalone-topbar__left {
  display: flex;
  align-items: center;
  gap: 16px;
  min-width: 0;
}
.standalone-topbar__brand {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  text-decoration: none;
  color: var(--ink);
  flex-shrink: 0;
  transition: opacity var(--dur) var(--ease);
}
.standalone-topbar__brand:hover { opacity: 0.75; }
.standalone-topbar__brand-name {
  font-family: var(--font-display);
  font-size: 16.5px;
  font-weight: 500;
  letter-spacing: -0.01em;
  white-space: nowrap;
}
.standalone-topbar__dashboard-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  font-size: 12.5px;
  font-weight: 500;
  color: var(--ink-muted);
  text-decoration: none;
  white-space: nowrap;
  transition: background var(--dur) var(--ease),
              color var(--dur) var(--ease),
              border-color var(--dur) var(--ease);
}
.standalone-topbar__dashboard-link:hover {
  background: var(--surface-sunken);
  color: var(--ink);
  border-color: var(--border-strong);
}
.standalone-topbar__dashboard-link svg { flex-shrink: 0; }
.standalone-topbar__right { flex-shrink: 0; max-width: 42vw; }
.standalone-topbar__account {
  display: block;
  font-size: 12.5px;
  color: var(--ink-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.standalone-topbar__account strong { color: var(--ink); font-weight: 600; }

.standalone-main {
  max-width: var(--standalone-max, 880px);
  margin: 0 auto;
  padding: 36px 24px 64px;
}

@media (max-width: 640px) {
  .standalone-topbar__inner { padding: 12px 16px; gap: 10px; }
  /* Auf sehr schmalen Screens genuegt das Logo — spart Platz fuer den
     Login-Button/Account-Text rechts, kein horizontales Gequetsche. */
  .standalone-topbar__brand-name { display: none; }
  .standalone-topbar__dashboard-link span { display: none; }
  .standalone-topbar__dashboard-link { padding: 7px; }
  .standalone-main { padding: 24px 16px 48px; }
}

/* ----- Digest-Standalone-Hero (Zeitraum prominent) ----- */
.digest-standalone-hero {
  margin-bottom: 24px;
}
.digest-standalone-hero__period {
  font-family: var(--font-display);
  font-size: 28px;
  font-weight: 400;
  letter-spacing: -0.015em;
  line-height: 1.15;
  color: var(--ink);
  margin: 6px 0 10px;
}
.digest-standalone-hero__meta {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  font-size: 12.5px;
  color: var(--ink-muted);
}
.digest-standalone-toolbar {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 22px;
}

/* Kompaktes Zeilen-Layout braucht mehr Breite als die 880px-Lesespalte
   (User-Wunsch: Uebersicht bei vielen Papern) — Topbar + Main teilen sich
   dieselbe --standalone-max-Variable, ein Modifier auf <body> (siehe
   {% block body_class %} in base_standalone.html) genuegt fuer beide. */
.standalone-body--digest {
  --standalone-max: 1080px;
}

/* ----- Zurueck-Button (Punkt 7: nur wenn aus der E-Mail-Update-Historie
   verlinkt, siehe back_url) — gleiche Sprache wie .page-header__back. ----- */
.digest-standalone-back {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-bottom: 18px;
  font-size: 12px;
  font-weight: 500;
  color: var(--ink-muted);
  text-decoration: none;
  transition: color var(--dur) var(--ease);
}
.digest-standalone-back:hover { color: var(--ink); }

/* ============================================================
   DIGEST-KOMPAKT-LISTE (.digest-compact-list / .digest-row)
   Ersetzt partials/paper_card.html auf der Standalone-Digest-Seite: eine
   dichte, seitenbreite Zeile pro Paper statt der grossen Ticket-Karte —
   bessere Uebersicht bei vielen Papern. paper_card.html bleibt fuer alle
   App-Views unveraendert.
   ============================================================ */
.digest-compact-list {
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface);
  overflow: hidden;
}
.digest-row {
  display: grid;
  grid-template-columns: 86px 1fr auto;
  align-items: start;
  gap: 16px;
  padding: 11px 16px;
  border-bottom: 1px solid var(--border);
  transition: background var(--dur) var(--ease);
}
.digest-row:last-child { border-bottom: none; }
.digest-row:hover { background: var(--surface-sunken); }

.digest-row__date {
  padding-top: 2px;
  font-size: 11.5px;
  color: var(--ink-subtle);
  white-space: nowrap;
  letter-spacing: 0.01em;
}
.digest-row__date--empty { font-style: italic; }

.digest-row__main { min-width: 0; }
.digest-row__title {
  margin: 0 0 3px;
  font-size: 14.5px;
  font-weight: 600;
  line-height: 1.35;
  color: var(--ink);
}
.digest-row__title a {
  color: inherit;
  text-decoration: none;
}
.digest-row__title a:hover { color: var(--brand-blue-deep); }

.digest-row__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  color: var(--ink-muted);
}
/* Erstautor fett + Markenblau — gleiche Design-Spec wie .paper-card__authors b */
.digest-row__authors b { font-weight: 600; color: var(--brand-blue-deep); }
.digest-row__sep { color: var(--ink-subtle); }
.digest-row__journal {
  font-family: var(--font-display);
  font-style: italic;
  color: var(--ink-muted);
}
.digest-row__cites { color: var(--ink-subtle); }

/* Marker/list-style bereits global entfernt (details > summary, s.o.) —
   hier nur die Zeilen-spezifische Typo + der 2-Zeilen-Clamp. */
.digest-row__abstract summary {
  margin-top: 4px;
  font-size: 12px;
  line-height: 1.5;
  color: var(--ink-muted);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.digest-row__abstract[open] summary {
  -webkit-line-clamp: unset;
  overflow: visible;
}

/* Aktions-Icons: quadratische, kleine Buttons — bewusst nur Icon (kein
   Label), damit die Zeile dicht bleibt. */
.digest-row__actions {
  display: flex;
  align-items: center;
  gap: 4px;
  padding-top: 1px;
}
.digest-row__action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border: none;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--ink-subtle);
  cursor: pointer;
  text-decoration: none;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
@media (hover: hover) and (pointer: fine) {
  .digest-row__action:hover {
    background: var(--surface);
    color: var(--ink);
  }
}
.digest-row__action.is-on {
  color: var(--brand-blue-deep);
  background: var(--brand-blue-soft);
}
.digest-row__action.has-note {
  color: var(--moss-deep);
  background: var(--moss-soft);
}
.digest-row__action.is-locked,
.digest-row__action[disabled] {
  opacity: 0.35;
  cursor: not-allowed;
}
@media (hover: hover) and (pointer: fine) {
  .digest-row__action.is-locked:hover,
  .digest-row__action[disabled]:hover {
    background: transparent;
    color: var(--ink-subtle);
  }
}

/* Gelesen-Zustand: Zeile dimmen — gleiche Sprache wie .paper-card.is-read */
.digest-row.is-read .digest-row__title { color: var(--ink-subtle); font-weight: 500; }
.digest-row.is-read .digest-row__meta,
.digest-row.is-read .digest-row__abstract summary { color: var(--ink-subtle); }

@media (max-width: 640px) {
  .digest-row {
    grid-template-columns: 1fr;
    gap: 6px;
  }
  .digest-row__date { order: -1; }
  .digest-row__actions { margin-top: 4px; }
}