/* =============================================================
   SEOlyze Components — Extension Layer
   -------------------------------------------------------------
   Ergänzungen zu components.css (Styleguide).
   Enthält ausschließlich Primitives, die im Styleguide FEHLEN.

   Ladereihenfolge:
     1) tokens.css
     2) components.css
     3) components-ext.css   ← DIESE DATEI
     4) page-spezifische CSS (optional, pro Screen)
   ============================================================= */


/* ============================================================
   1) PAGE-HEADER-EYEBROW
   Mono-11 Uppercase Label ÜBER dem page-header-title.
   ============================================================ */
.page-header-eyebrow {
  font-family: var(--font-mono);
  font-size: var(--fs-2xs);
  font-weight: var(--fw-semibold);
  line-height: 1;
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--area-primary-fg);
  margin: 0 0 var(--space-3) 0;
}


/* ============================================================
   2) AREA-BADGE  (Topbar Area-Indicator)
   ============================================================ */
.area-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  height: 28px;
  padding: 0 var(--space-4);
  border-radius: var(--r-pill);
  background: var(--area-primary-soft);
  color: var(--area-primary-fg);
  font-family: var(--font-mono);
  font-size: var(--fs-2xs);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  white-space: nowrap;
}
.area-badge::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--area-primary);
}


/* ============================================================
   3) SCORE-GAUGE  (Hero Ring, default 168px)
   HTML:
     <div class="score-gauge" data-grade="b" style="--gauge-value:87;">
       <div class="score-gauge-inner">
         <span class="score-gauge-value">87</span>
         <span class="score-gauge-label">von 100</span>
       </div>
     </div>
   ============================================================ */
.score-gauge {
  --gauge-size: 168px;
  --gauge-thickness: 14px;
  --gauge-value: 0;
  --gauge-hue: var(--area-primary);
  --gauge-track: var(--neutral-100);

  position: relative;
  width: var(--gauge-size);
  height: var(--gauge-size);
  border-radius: 50%;
  background:
    conic-gradient(
      var(--gauge-hue) calc(var(--gauge-value) * 1%),
      var(--gauge-track) 0
    );
  display: grid;
  place-items: center;
  flex-shrink: 0;
}
.score-gauge::after {
  content: '';
  position: absolute;
  inset: var(--gauge-thickness);
  background: var(--bg-surface);
  border-radius: 50%;
  box-shadow: inset 0 0 0 1px var(--border-subtle);
}
.score-gauge-inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  line-height: 1;
}
.score-gauge-value {
  font-family: var(--font-display);
  font-size: 48px;
  font-weight: var(--fw-semibold);
  font-variant-numeric: tabular-nums;
  color: var(--fg-primary);
  letter-spacing: var(--tracking-tight);
}
.score-gauge-label {
  font-family: var(--font-mono);
  font-size: var(--fs-2xs);
  font-weight: var(--fw-medium);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--fg-muted);
}
.score-gauge[data-grade="a"] { --gauge-hue: var(--success-500); }
.score-gauge[data-grade="b"] { --gauge-hue: var(--orange-400); }
.score-gauge[data-grade="c"] { --gauge-hue: var(--orange-600); }
.score-gauge[data-grade="d"] { --gauge-hue: var(--danger-500); }

.score-gauge-sm { --gauge-size: 96px;  --gauge-thickness: 10px; }
.score-gauge-sm .score-gauge-value { font-size: var(--fs-2xl); }
.score-gauge-lg { --gauge-size: 224px; --gauge-thickness: 18px; }
.score-gauge-lg .score-gauge-value { font-size: 64px; }


/* ============================================================
   4) STATS-GRID  (Container für .stat Karten mit Trennlinien)
   Varianten: .stats-grid-cols-3 / -4 / -5 / .stats-grid-dense
   ============================================================ */
.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-lg);
  overflow: hidden;
}
.stats-grid > .stat {
  padding: var(--space-6) var(--space-7);
  border-right: 1px solid var(--border-subtle);
  border-bottom: 1px solid var(--border-subtle);
}
.stats-grid-cols-3 { grid-template-columns: repeat(3, 1fr); }
.stats-grid-cols-4 { grid-template-columns: repeat(4, 1fr); }
.stats-grid-cols-5 { grid-template-columns: repeat(5, 1fr); }

.stats-grid-cols-3 > .stat:nth-child(3n) { border-right: none; }
.stats-grid-cols-4 > .stat:nth-child(4n) { border-right: none; }
.stats-grid-cols-5 > .stat:nth-child(5n) { border-right: none; }
.stats-grid > .stat:last-child { border-right: none; }
.stats-grid-dense > .stat { padding: var(--space-5) var(--space-6); }


/* ============================================================
   5) STAT-HEAD  (optional Layout innerhalb .stat)
   Für Stat-Cards mit Icon rechts neben Label
   ============================================================ */
.stat-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}


/* ============================================================
   6) RANK-BADGE  (24x24 Circle mit Platzierungsnummer)
   Varianten: .rank-badge-top (1-3), .rank-badge-own
   ============================================================ */
.rank-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--neutral-100);
  color: var(--fg-secondary);
  font-family: var(--font-mono);
  font-size: var(--fs-2xs);
  font-weight: var(--fw-semibold);
  font-variant-numeric: tabular-nums;
  line-height: 1;
  flex-shrink: 0;
}
.rank-badge-top[data-rank="1"] { background: #fef3c7; color: #92400e; }
.rank-badge-top[data-rank="2"] { background: var(--neutral-100); color: #374151; }
.rank-badge-top[data-rank="3"] { background: #fde4d0; color: #9a3412; }
.rank-badge-own {
  background: var(--area-primary-soft-2);
  color: var(--area-primary-fg);
  box-shadow: 0 0 0 2px var(--area-primary);
}


/* ============================================================
   7) STATUS-ICON  (22x22 gefüllter Circle mit SVG innen)
   Varianten: .st-ok / .st-low / .st-miss / .st-high
   ============================================================ */
.status-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  flex-shrink: 0;
}
.status-icon svg {
  width: 14px;
  height: 14px;
  stroke-width: 2.5;
}
.status-icon.st-ok   { background: var(--success-100); color: var(--success-700); }
.status-icon.st-low  { background: var(--warning-100); color: var(--warning-700); }
.status-icon.st-miss { background: var(--danger-100);  color: var(--danger-700); }
.status-icon.st-high { background: var(--info-100);    color: var(--info-700); }


/* ============================================================
   8) PROGRESS-MINI  (Inline 80x6 Balken für Tabellenzellen)
   ============================================================ */
.progress-mini {
  display: inline-block;
  width: 80px;
  height: 6px;
  border-radius: var(--r-pill);
  background: var(--neutral-100);
  overflow: hidden;
  vertical-align: middle;
}
.progress-mini-bar {
  display: block;
  height: 100%;
  background: var(--area-primary);
  border-radius: inherit;
  transition: width var(--t-base);
}
.progress-mini-success .progress-mini-bar { background: var(--success-500); }
.progress-mini-warning .progress-mini-bar { background: var(--warning-500); }
.progress-mini-danger  .progress-mini-bar { background: var(--danger-500); }


/* ============================================================
   9) PAGER  (Tabellen-Pagination Footer)
   ============================================================ */
.pager {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-4) var(--space-6);
  border-top: 1px solid var(--border-subtle);
  background: var(--bg-surface);
}
.pager-info {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  color: var(--fg-muted);
}
.pager-nav {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
}
.pager-page {
  min-width: 96px;
  text-align: center;
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  color: var(--fg-secondary);
}


/* ============================================================
   10) URL-CELL  (Favicon + Host + Pfad für Tabellen)
   ============================================================ */
.url-cell {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  max-width: 100%;
  min-width: 0;
}
.url-cell-favicon {
  width: 16px;
  height: 16px;
  border-radius: 3px;
  flex-shrink: 0;
  background: var(--neutral-100);
  object-fit: cover;
  /* Img-Variante (Google s2/favicons) */
  display: inline-block;
  vertical-align: middle;
}
img.url-cell-favicon { padding: 0; }
.url-cell-favicon-fb {
  width: 16px;
  height: 16px;
  border-radius: 3px;
  flex-shrink: 0;
  background: var(--neutral-100);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  color: var(--fg-muted);
  vertical-align: middle;
}
.url-cell-text {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}
.url-cell-host {
  font-weight: var(--fw-medium);
  color: var(--fg-primary);
  /* word-break statt nowrap+ellipsis: lange URLs umbrechen statt abschneiden */
  word-break: break-all;
  display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-3);
  min-width: 0;
}
.url-cell-path {
  font-family: var(--font-mono);
  font-size: var(--fs-2xs);
  color: var(--fg-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}


/* ============================================================
   11) TAG-COUNT  (Count-Suffix innerhalb .tag)
   HTML: <span class="tag">H1 <span class="tag-count">12</span></span>
   ============================================================ */
.tag-count {
  margin-left: 6px;
  padding-left: 6px;
  border-left: 1px solid color-mix(in oklab, currentColor 25%, transparent);
  font-family: var(--font-mono);
  font-size: 0.92em;
  font-variant-numeric: tabular-nums;
  opacity: 0.75;
}


/* ============================================================
   12) HERO-GRID  (Komposition für Hero-Card Layout)
   Linke Spalte Score-Gauge, rechte Spalte Text+Breakdown
   ============================================================ */
.hero-grid {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: var(--space-9);
  align-items: center;
}
.hero-score {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-5);
}
.hero-body { min-width: 0; }

@media (max-width: 960px) {
  .hero-grid { grid-template-columns: 1fr; }
  .hero-score { align-items: flex-start; }
}


/* ============================================================
   13) CHIP-ROW  (Flex-Wrap Container für Badges/Chips)
   ============================================================ */
.chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}


/* ============================================================
   14) GRID-N-CARDS  (responsive N-Spalten-Grid für Cards)
   ============================================================ */
.grid-cards {
  display: grid;
  gap: var(--space-5);
}
.grid-cards.cols-2 { grid-template-columns: repeat(2, 1fr); }
.grid-cards.cols-3 { grid-template-columns: repeat(3, 1fr); }
.grid-cards.cols-4 { grid-template-columns: repeat(4, 1fr); }

@media (max-width: 1200px) {
  .grid-cards.cols-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
  .grid-cards.cols-3, .grid-cards.cols-2 { grid-template-columns: 1fr; }
}


/* ============================================================
   15) CHART-CONTAINER  (ApexCharts Hülle)
   ============================================================ */
.chart-container {
  width: 100%;
  min-height: 400px;
}
.chart-container.chart-sm { min-height: 240px; }
.chart-container.chart-lg { min-height: 520px; }


/* ============================================================
   16) KW-LIST  (Kompakte Keyword-Liste für Top-KW Cards)
   ============================================================ */
.kw-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.kw-list-item {
  display: grid;
  grid-template-columns: 24px 1fr auto;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--border-subtle);
}
.kw-list-item:last-child { border-bottom: none; }
.kw-list-term {
  font-weight: var(--fw-medium);
  color: var(--fg-primary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: var(--fs-sm);
}
.kw-list-count {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  color: var(--fg-muted);
  font-variant-numeric: tabular-nums;
}


/* ============================================================
   17) TR-OWN  (Highlighted Row für "eigene Domain" in Tabellen)
   ============================================================ */
.tbl tbody tr.tr-own {
  background: var(--area-primary-soft);
}
.tbl tbody tr.tr-own:hover {
  background: var(--area-primary-soft-2);
}


/* ============================================================
   18) CELL-NUM-LABEL  (Zahl-Label neben .progress-mini in Tabellen)
   ============================================================ */
.cell-num-label {
  margin-left: var(--space-3);
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-weight: var(--fw-medium);
}


/* ============================================================
   19) CARD-TITLE-ICON  (Icon-Chip vor Card-Titeln)
   Default 36px round-rect, area-tinted
   HTML:
     <div class="card-hd card-hd-with-icon">
       <span class="card-title-icon"><?= icon('chart', 18) ?></span>
       <div>
         <div class="card-title">OnPage Stats</div>
         <div class="card-desc">...</div>
       </div>
     </div>
   ============================================================ */
.card-title-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px; height: 36px;
  flex-shrink: 0;
  border-radius: var(--r-md);
  background: var(--area-primary-soft);
  color: var(--area-primary-fg);
  box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--area-primary) 15%, transparent);
}
.card-title-icon svg { width: 18px; height: 18px; }

.card-title-icon.sz-sm { width: 28px; height: 28px; }
.card-title-icon.sz-sm svg { width: 14px; height: 14px; }
.card-title-icon.sz-lg { width: 44px; height: 44px; border-radius: var(--r-lg); }
.card-title-icon.sz-lg svg { width: 22px; height: 22px; }

.card-title-icon.tint-success { background: var(--success-100); color: var(--success-700); box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--success-500) 20%, transparent); }
.card-title-icon.tint-warning { background: var(--warning-100); color: var(--warning-700); box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--warning-500) 20%, transparent); }
.card-title-icon.tint-danger  { background: var(--danger-100);  color: var(--danger-700);  box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--danger-500) 20%, transparent); }
.card-title-icon.tint-info    { background: var(--info-100);    color: var(--info-700);    box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--info-500) 20%, transparent); }
.card-title-icon.tint-neutral { background: var(--neutral-100); color: var(--fg-secondary); box-shadow: inset 0 0 0 1px var(--border-default); }

/* Solid-Varianten (für die bold-Variante) */
.card-title-icon.solid {
  background: var(--area-primary);
  color: var(--area-primary-fg-on);
  box-shadow: 0 2px 8px color-mix(in oklab, var(--area-primary) 40%, transparent);
}
.card-title-icon.solid.tint-success { background: var(--success-500); color: #fff; box-shadow: 0 2px 8px color-mix(in oklab, var(--success-500) 40%, transparent); }
.card-title-icon.solid.tint-warning { background: var(--warning-500); color: #fff; box-shadow: 0 2px 8px color-mix(in oklab, var(--warning-500) 40%, transparent); }
.card-title-icon.solid.tint-danger  { background: var(--danger-500);  color: #fff; box-shadow: 0 2px 8px color-mix(in oklab, var(--danger-500) 40%, transparent); }

.card-hd-with-icon {
  display: flex;
  gap: var(--space-4);
  align-items: flex-start;
}
.card-hd-with-icon > div:last-child { flex: 1; min-width: 0; }


/* ============================================================
   20) CARD-STRIP-TOP  (Akzent-Streifen oben auf Cards, 3px)
   ============================================================ */
.card-strip-top { padding-top: calc(var(--space-7) + 3px); }
.card-strip-top::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: var(--area-primary);
  border-radius: var(--r-lg) var(--r-lg) 0 0;
}
.card-strip-top.strip-gradient::before {
  background: var(--area-primary-gradient);
}
.card-strip-top.strip-warning::before { background: var(--warning-500); }
.card-strip-top.strip-danger::before  { background: var(--danger-500); }
.card-strip-top.strip-success::before { background: var(--success-500); }
.card-strip-top.strip-info::before    { background: var(--info-500); }


/* ============================================================
   21) TABS-HERO  (Große Tab-Leiste mit Icon + Unterstrich-Indikator)
   Für Haupt-Nav innerhalb einer View.
   ============================================================ */
.tabs-hero {
  display: flex;
  align-items: stretch;
  gap: var(--space-4);
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-lg);
  padding: 0 var(--space-5);
  box-shadow: var(--shadow-sm);
  position: relative;
  overflow-x: auto;
  scrollbar-width: none;
}
.tabs-hero::-webkit-scrollbar { display: none; }
.tabs-hero .tab {
  position: relative;
  display: inline-flex; align-items: center; gap: var(--space-3);
  height: 52px;
  padding: 0 var(--space-5);
  border: 0;
  background: transparent;
  color: var(--fg-secondary);
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  white-space: nowrap;
  cursor: pointer;
  border-radius: 0;
  transition: color var(--t-quick);
}
.tabs-hero .tab::after {
  content: '';
  position: absolute;
  left: var(--space-4); right: var(--space-4);
  bottom: 0;
  height: 3px;
  border-radius: 3px 3px 0 0;
  background: transparent;
  transition: background var(--t-quick);
}
.tabs-hero .tab:hover { color: var(--fg-primary); }
.tabs-hero .tab:hover::after { background: var(--border-strong); }
.tabs-hero .tab.is-active {
  color: var(--area-primary-fg);
  font-weight: var(--fw-semibold);
}
.tabs-hero .tab.is-active::after { background: var(--area-primary); }
.tabs-hero .tab svg {
  width: 18px; height: 18px;
  color: var(--fg-muted);
  opacity: 0.85;
  transition: color var(--t-quick);
}
.tabs-hero .tab.is-active svg { color: var(--area-primary); opacity: 1; }
.tabs-hero .tab .tab-count {
  height: 20px;
  min-width: 24px;
  padding: 0 var(--space-3);
}
.tabs-hero .tab.is-active .tab-count {
  background: var(--area-primary-soft-2);
  color: var(--area-primary-fg);
}

/* Variante: tabs-hero-inline — ohne Card, nur Unterstrich */
.tabs-hero-inline {
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--border-subtle);
  border-radius: 0;
  box-shadow: none;
  padding: 0;
}


/* ============================================================
   22) SECTION-HEADER  (freistehender Abschnitts-Header zwischen Cards)
   HTML:
     <div class="section-header">
       <span class="card-title-icon sz-sm"><?= icon('chart') ?></span>
       <div>
         <h3>OnPage Stats</h3>
         <p>Top 10 Übersicht</p>
       </div>
       <div class="section-header-actions">...</div>
     </div>
   ============================================================ */
.section-header {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  margin: var(--space-8) 0 var(--space-5);
}
.section-header > div { min-width: 0; flex: 1; }
.section-header h3 {
  font-family: var(--font-display);
  font-size: var(--fs-xl);
  font-weight: var(--fw-semibold);
  color: var(--fg-primary);
  margin: 0;
  letter-spacing: var(--tracking-tight);
}
.section-header p {
  font-size: var(--fs-xs);
  color: var(--fg-muted);
  margin: 2px 0 0;
}
.section-header-actions {
  flex: 0 0 auto;
  display: flex;
  gap: var(--space-3);
  align-items: center;
}


/* ============================================================
   23) HERO-CARD  (Hero mit Gradient + Score-Gauge)
   Bringt mehr "Wow" als die flache Card.
   ============================================================ */
.hero-card {
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg, var(--bg-surface), var(--area-primary-soft) 160%);
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-lg);
  padding: var(--space-8) var(--space-9);
  box-shadow: var(--shadow-sm);
}
.hero-card::before {
  content: '';
  position: absolute;
  top: -120px; right: -120px;
  width: 320px; height: 320px;
  background: radial-gradient(circle, color-mix(in oklab, var(--area-primary) 30%, transparent), transparent 70%);
  pointer-events: none;
}
.hero-card > * { position: relative; z-index: 1; }


/* ============================================================
   24) META-BAR  (Kontext-Bar unter PageHeader für URL + Badges)
   HTML:
     <div class="meta-bar">
       <span class="badge badge-soft">„..."</span>
       Google.de · <a href="#">https://...</a>
     </div>
   ============================================================ */
.meta-bar {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: var(--space-4);
  padding: var(--space-4) var(--space-5);
  background: color-mix(in oklab, var(--neutral-900) 92%, var(--area-primary));
  color: #d8dde6;
  border-radius: var(--r-md);
  font-size: var(--fs-sm);
}
.meta-bar svg { opacity: 0.8; }
.meta-bar a { color: #fff; text-decoration: underline; text-decoration-color: color-mix(in oklab, #fff 30%, transparent); }
.meta-bar a:hover { text-decoration-color: #fff; }


/* ============================================================
   25) STAT  — erweiterte Varianten
   ============================================================ */
.stat-with-icon {
  display: grid;
  grid-template-columns: 36px 1fr;
  gap: var(--space-4);
  align-items: start;
}
.stat-with-icon .card-title-icon { margin-top: 2px; }

/* Stat-Card mit Border-Akzent links */
.stat.stat-accented {
  padding-left: var(--space-6);
  border-left: 3px solid var(--area-primary) !important;
}


/* ============================================================
   26) BADGE-STACK  (Container für eine Reihe von Badges mit label)
   HTML:
     <div class="badge-stack">
       <span class="badge-stack-label">Top KW H1</span>
       <span class="badge badge-soft">risiko</span>
       ...
     </div>
   ============================================================ */
.badge-stack {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: var(--space-3);
}
.badge-stack-label {
  font-family: var(--font-mono);
  font-size: var(--fs-3xs);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--fg-muted);
  padding-right: var(--space-3);
  border-right: 1px solid var(--border-subtle);
  margin-right: var(--space-2);
}


/* ============================================================
   27) KPI-TILE  (Stat-Karte mit Icon im Header und Trend-Fuß)
   Schwerer als .stat — für Dashboard-Hero-Zeilen.
   ============================================================ */
.kpi-tile {
  display: flex; flex-direction: column; gap: var(--space-4);
  padding: var(--space-6);
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-md);
  transition: border-color var(--t-quick), box-shadow var(--t-quick);
}
.kpi-tile:hover { border-color: var(--border-strong); box-shadow: var(--shadow-sm); }
.kpi-tile-head {
  display: flex; justify-content: space-between; align-items: flex-start;
  gap: var(--space-3);
}
.kpi-tile-label {
  font-family: var(--font-mono);
  font-size: var(--fs-2xs);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--fg-muted);
}
.kpi-tile-value {
  font-family: var(--font-display);
  font-size: var(--fs-3xl);
  font-weight: var(--fw-semibold);
  font-variant-numeric: tabular-nums;
  color: var(--fg-primary);
  line-height: var(--lh-tight);
}
.kpi-tile-ref {
  font-family: var(--font-mono);
  font-size: var(--fs-2xs);
  color: var(--fg-muted);
  margin-top: -2px;
}
.kpi-tile-foot {
  display: flex; align-items: center; gap: var(--space-3);
  padding-top: var(--space-3);
  border-top: 1px dashed var(--border-subtle);
  font-family: var(--font-mono);
  font-size: var(--fs-2xs);
  color: var(--fg-muted);
}


/* ============================================================
   28) DIVIDER-LABELED  (Trennlinie mit zentrierter Label)
   ============================================================ */
.divider-labeled {
  display: flex; align-items: center;
  gap: var(--space-4);
  color: var(--fg-muted);
  font-family: var(--font-mono);
  font-size: var(--fs-2xs);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  margin: var(--space-7) 0;
}
.divider-labeled::before, .divider-labeled::after {
  content: ''; flex: 1;
  height: 1px;
  background: var(--border-subtle);
}

/* ============================================================
   29) V4-HERO-SCORE-BAR  (Horizontale Score-Leiste, alle WDF/IDF-Tabs)
   Aus: screens/v4/_parts/context.php
   HTML:
     <section class="v4-hero">
       <div class="v4-hero-top">
         <div class="v4-hero-gauge">…SVG…<div class="v4-hero-gauge-num">95</div></div>
         <div class="v4-hero-text">…</div>
         <div class="v4-hero-stats">
           <div class="v4-stat v4-stat-success">…</div>
         </div>
         <div class="v4-hero-actions">…</div>
       </div>
     </section>
   ============================================================ */
.v4-hero {
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-lg);
  padding: var(--space-6) var(--space-7);
  box-shadow: var(--shadow-xs);
}
.v4-hero-top {
  display: grid;
  grid-template-columns: auto 1fr auto auto;
  gap: var(--space-7);
  align-items: center;
}
.v4-hero-gauge {
  position: relative;
  width: 72px;
  height: 72px;
  flex: 0 0 auto;
}
.v4-hero-gauge-num {
  position: absolute;
  inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display);
  font-size: var(--fs-xl);
  font-weight: var(--fw-bold);
  color: var(--success-700);
  letter-spacing: -0.02em;
}
.v4-hero-text { min-width: 0; }
.v4-hero-eyebrow {
  font-family: var(--font-mono);
  font-size: var(--fs-2xs);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--fg-muted);
  font-weight: var(--fw-semibold);
  display: inline-flex; align-items: center; gap: var(--space-2);
  margin-bottom: var(--space-2);
}
.v4-hero-title {
  font-family: var(--font-display);
  font-size: var(--fs-2xl);
  letter-spacing: var(--tracking-tight);
  line-height: 1.1;
}
.v4-hero-title strong { font-weight: var(--fw-bold); color: var(--fg-primary); }
.v4-hero-title .v4-hero-max { color: var(--fg-muted); font-weight: var(--fw-regular); }
.v4-hero-title .v4-hero-sep { color: var(--fg-faint); margin: 0 var(--space-2); }
.v4-hero-title .v4-hero-grade { color: var(--success-700); font-weight: var(--fw-semibold); font-size: var(--fs-lg); }
.v4-hero-sub {
  color: var(--fg-secondary);
  font-size: var(--fs-sm);
  margin-top: var(--space-2);
}
.v4-hero-progress {
  margin-top: var(--space-4);
  height: 6px;
  background: var(--neutral-100);
  border-radius: var(--r-pill);
  overflow: hidden;
  max-width: 420px;
}
.v4-hero-progress-bar {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, var(--success-500), var(--success-600));
  border-radius: var(--r-pill);
}
.v4-hero-stats {
  display: flex;
  gap: var(--space-3);
  flex: 0 0 auto;
}
.v4-stat {
  display: flex; flex-direction: column; align-items: center;
  padding: var(--space-3) var(--space-4);
  min-width: 68px;
  background: var(--bg-surface-2);
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-md);
}
.v4-stat-num {
  font-family: var(--font-display);
  font-size: var(--fs-xl);
  font-weight: var(--fw-bold);
  line-height: 1;
}
.v4-stat-lbl {
  font-family: var(--font-mono);
  font-size: var(--fs-3xs);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  color: var(--fg-muted);
  font-weight: var(--fw-semibold);
  margin-top: 4px;
}
.v4-stat-success .v4-stat-num { color: var(--success-600); }
.v4-stat-warning .v4-stat-num { color: var(--warning-600); }
.v4-stat-danger  .v4-stat-num { color: var(--danger-600); }
.v4-stat-neutral .v4-stat-num { color: var(--neutral-400); }
.v4-hero-actions {
  display: flex; flex-direction: column; gap: var(--space-2);
  flex: 0 0 auto;
}
@media (max-width: 1280px) {
  .v4-hero-top { grid-template-columns: auto 1fr; grid-template-rows: auto auto; }
  .v4-hero-stats { grid-column: 1 / -1; }
  .v4-hero-actions { grid-column: 1 / -1; flex-direction: row; justify-content: flex-end; }
}


/* ============================================================
   30) ANALYSE-FORM  (Aufklappbares Analyse-Parameter-Formular)
   Aus: screens/v4/01-uebersicht.php
   HTML:
     <section class="analyse-form-wrap">
       <details class="analyse-form" open>
         <summary class="analyse-form-sum">…</summary>
         <div class="analyse-form-body">
           <div class="analyse-form-grid">…</div>
         </div>
       </details>
     </section>
   ============================================================ */
.analyse-form {
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-lg);
  overflow: hidden;
  transition: border-color var(--t-quick), box-shadow var(--t-quick);
}
.analyse-form[open] {
  border-color: color-mix(in oklab, var(--area-primary) 35%, var(--border-subtle));
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--area-primary) 8%, transparent);
}
.analyse-form-sum {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-5) var(--space-6);
  cursor: pointer;
  list-style: none;
  user-select: none;
  background: linear-gradient(to right, color-mix(in oklab, var(--area-primary) 4%, transparent), transparent 60%);
  transition: background var(--t-quick);
}
.analyse-form-sum::-webkit-details-marker { display: none; }
.analyse-form-sum:hover {
  background: linear-gradient(to right, color-mix(in oklab, var(--area-primary) 7%, transparent), transparent 60%);
}
.analyse-form-sum-icon {
  width: 40px; height: 40px;
  border-radius: var(--r-md);
  background: color-mix(in oklab, var(--area-primary) 12%, transparent);
  color: var(--area-primary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.analyse-form-sum-body {
  flex: 1; min-width: 0;
  display: flex; flex-direction: column; gap: 4px;
}
.analyse-form-sum-row1 {
  display: flex; align-items: baseline; gap: var(--space-3);
}
.analyse-form-sum-label {
  font-family: var(--font-mono);
  font-size: var(--fs-2xs);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--area-primary-fg);
  font-weight: var(--fw-semibold);
}
.analyse-form-sum-kw {
  font-family: var(--font-display);
  font-size: var(--fs-lg);
  font-weight: var(--fw-semibold);
  color: var(--fg-primary);
  letter-spacing: -0.01em;
}
.analyse-form-sum-row2 {
  display: flex; align-items: center; gap: var(--space-2);
  font-size: var(--fs-xs); color: var(--fg-secondary); flex-wrap: wrap;
}
.analyse-form-sum-chip {
  display: inline-flex; align-items: center; gap: 4px;
  color: var(--fg-secondary);
}
.analyse-form-sum-chip svg { color: var(--fg-muted); }
.analyse-form-sum-sep { color: var(--fg-muted); }
.analyse-form-sum-toggle {
  display: inline-flex; align-items: center; gap: var(--space-2);
  padding: 8px 14px;
  border-radius: var(--r-md);
  background: var(--bg-surface);
  border: 1px solid var(--border-default);
  color: var(--fg-secondary);
  font-size: var(--fs-sm); font-weight: var(--fw-medium);
  transition: all var(--t-quick); flex-shrink: 0;
}
.analyse-form-sum:hover .analyse-form-sum-toggle {
  border-color: var(--area-primary); color: var(--area-primary);
}
.analyse-form[open] .analyse-form-sum-toggle-text-closed { display: none; }
.analyse-form:not([open]) .analyse-form-sum-toggle-text-open { display: none; }
.analyse-form-sum-toggle-chev {
  display: inline-flex; transition: transform var(--t-quick);
}
.analyse-form[open] .analyse-form-sum-toggle-chev { transform: rotate(180deg); }
.analyse-form-body {
  padding: var(--space-6);
  border-top: 1px solid var(--border-subtle);
  background: var(--bg-surface-2);
}
.analyse-form-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-5);
}
.field.field-span-2 { grid-column: span 2; }
.field.field-span-4 { grid-column: span 4; }
.field-label {
  display: flex; align-items: center; gap: 6px;
  font-size: var(--fs-xs); font-weight: var(--fw-semibold);
  color: var(--fg-primary); letter-spacing: 0.01em;
}
.field-label-ic { display: inline-flex; align-items: center; justify-content: center; color: var(--area-primary-fg); }
.field-label-hint { margin-left: 4px; font-weight: var(--fw-regular); color: var(--fg-muted); font-size: var(--fs-2xs); }
.field-label-value {
  margin-left: auto;
  font-family: var(--font-mono); font-size: var(--fs-xs);
  color: var(--area-primary-fg);
  background: color-mix(in oklab, var(--area-primary) 10%, transparent);
  padding: 2px 8px; border-radius: var(--r-sm); font-weight: var(--fw-semibold);
}
.seg-group {
  display: inline-flex; padding: 3px;
  background: var(--bg-surface-2);
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-md); gap: 2px;
}
.seg-btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 14px;
  border-radius: calc(var(--r-md) - 2px);
  border: none; background: transparent;
  color: var(--fg-secondary);
  font-size: var(--fs-sm); font-weight: var(--fw-medium); font-family: inherit;
  cursor: pointer; transition: all var(--t-quick);
}
.seg-btn:hover:not(.is-active) { color: var(--fg-primary); }
.seg-btn.is-active {
  background: var(--bg-surface); color: var(--area-primary-fg);
  box-shadow: 0 1px 2px rgba(0,0,0,0.06);
}
.seg-btn svg { color: currentColor; }
.range {
  width: 100%; -webkit-appearance: none; appearance: none;
  height: 6px; border-radius: 3px;
  background: linear-gradient(to right, var(--area-primary) 0%, var(--area-primary) 41%, var(--neutral-100) 41%, var(--neutral-100) 100%);
  outline: none; cursor: pointer; margin: 12px 0 4px;
}
.range::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 18px; height: 18px; border-radius: 50%;
  background: var(--bg-surface); border: 2px solid var(--area-primary);
  cursor: grab; box-shadow: 0 1px 3px rgba(0,0,0,0.12); transition: transform var(--t-quick);
}
.range::-webkit-slider-thumb:hover { transform: scale(1.15); }
.range::-moz-range-thumb {
  width: 18px; height: 18px; border-radius: 50%;
  background: var(--bg-surface); border: 2px solid var(--area-primary); cursor: grab;
}
.range-scale {
  display: flex; justify-content: space-between;
  font-family: var(--font-mono); font-size: var(--fs-2xs); color: var(--fg-muted);
}
.analyse-form-adv {
  margin-top: var(--space-6);
  border: 1px dashed var(--border-default);
  border-radius: var(--r-md); overflow: hidden;
  transition: border-color var(--t-quick);
}
.analyse-form-adv[open] { border-style: solid; border-color: var(--border-default); }
.analyse-form-adv-sum {
  display: flex; align-items: center; gap: var(--space-3);
  padding: var(--space-3) var(--space-5);
  cursor: pointer; list-style: none;
  font-size: var(--fs-sm); font-weight: var(--fw-semibold); color: var(--fg-primary);
  user-select: none; transition: background var(--t-quick);
}
.analyse-form-adv-sum::-webkit-details-marker { display: none; }
.analyse-form-adv-sum:hover { background: var(--bg-surface-2); }
.analyse-form-adv-ic { display: inline-flex; color: var(--fg-secondary); }
.analyse-form-adv-hint { font-weight: var(--fw-regular); color: var(--fg-muted); font-size: var(--fs-xs); }
.analyse-form-adv-chev { margin-left: auto; display: inline-flex; color: var(--fg-muted); transition: transform var(--t-quick); }
.analyse-form-adv[open] .analyse-form-adv-chev { transform: rotate(180deg); }
.analyse-form-adv-body { padding: var(--space-5); border-top: 1px solid var(--border-subtle); background: var(--bg-surface-2); }
.check-row { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-5); padding: 8px 0; }
.check { display: inline-flex; align-items: center; gap: 8px; font-size: var(--fs-sm); color: var(--fg-secondary); cursor: pointer; }
.check input[type="checkbox"] { width: 16px; height: 16px; accent-color: var(--area-primary); cursor: pointer; }
.analyse-form-actions {
  margin-top: var(--space-6); padding-top: var(--space-5);
  border-top: 1px solid var(--border-subtle);
  display: flex; align-items: center; gap: var(--space-4); flex-wrap: wrap;
}
.analyse-form-meta {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: var(--fs-xs); color: var(--fg-muted); flex: 1; min-width: 0;
}
.analyse-form-meta-ic { display: inline-flex; color: var(--area-primary-fg); }
.analyse-form-meta strong { color: var(--fg-secondary); font-weight: var(--fw-semibold); }
.analyse-form-actions-btns { display: inline-flex; gap: var(--space-3); }
@media (max-width: 1100px) {
  .analyse-form-grid { grid-template-columns: repeat(2, 1fr); }
  .field.field-span-2 { grid-column: span 2; }
}
@media (max-width: 640px) {
  .analyse-form-grid { grid-template-columns: 1fr; }
  .field.field-span-2, .field.field-span-4 { grid-column: span 1; }
  .analyse-form-sum-row2 { display: none; }
}


/* ============================================================
   31) KW-STATS-BAR + KW-TABLE  (Keyword-Matrix Tab)
   Aus: screens/v4/02-keywords.php
   HTML:
     <div class="kw-stats-bar">
       <div class="kw-stat">
         <span class="kw-stat-icon tint-info">…</span>
         <div><div class="kw-stat-num">2.041</div><div class="kw-stat-lbl">Keywords</div></div>
       </div>
     </div>
     <div class="kw-table-wrap"><table class="kw-table">…</table></div>
   ============================================================ */
.kw-stats-bar {
  display: flex; gap: var(--space-6); align-items: center;
  background: var(--bg-surface); border: 1px solid var(--border-subtle);
  border-radius: var(--r-lg); padding: var(--space-4) var(--space-6);
  box-shadow: var(--shadow-xs); flex-wrap: wrap;
}
.kw-stat { display: flex; align-items: center; gap: var(--space-3); }
.kw-stat-icon {
  width: 32px; height: 32px; border-radius: var(--r-md);
  display: grid; place-items: center; flex: 0 0 auto;
}
.kw-stat-num {
  font-family: var(--font-display); font-size: var(--fs-lg);
  font-weight: var(--fw-bold); letter-spacing: var(--tracking-tight);
  line-height: 1; color: var(--fg-primary);
}
.kw-stat-lbl {
  font-family: var(--font-mono); font-size: var(--fs-3xs);
  color: var(--fg-muted); text-transform: uppercase;
  letter-spacing: var(--tracking-wide); font-weight: var(--fw-semibold); margin-top: 2px;
}
.kw-legend-chip {
  display: inline-flex; align-items: center;
  padding: 2px 8px; border-radius: var(--r-sm);
  font-size: var(--fs-3xs); font-weight: var(--fw-semibold);
  letter-spacing: var(--tracking-wide); text-transform: uppercase;
}
.kw-table-wrap {
  overflow-x: auto; overflow-y: visible; position: relative; max-width: 100%;
}
.kw-table {
  width: 100%; border-collapse: separate; border-spacing: 0;
  font-family: var(--font-body); font-size: var(--fs-xs); min-width: 1400px;
}
.kw-table thead th {
  position: sticky; top: 0;
  background: var(--bg-surface-2); border-bottom: 1px solid var(--border-default); z-index: 2;
}
.kw-table .kw-head-groups th {
  padding: var(--space-3) var(--space-2);
  font-family: var(--font-mono); font-size: var(--fs-3xs); font-weight: var(--fw-bold);
  text-transform: uppercase; letter-spacing: var(--tracking-wide);
  color: var(--fg-secondary); text-align: center;
  border-right: 1px solid var(--border-subtle); border-bottom: 1px solid var(--border-subtle);
}
.kw-table .kw-head-groups .kw-grp-stats { background: color-mix(in oklab, var(--neutral-200) 40%, transparent); }
.kw-table .kw-head-groups .kw-grp-comp  { background: color-mix(in oklab, var(--neutral-100) 50%, transparent); color: var(--fg-secondary); }
.kw-table .kw-head-groups .kw-grp-ref {
  background: var(--area-primary-soft); color: var(--area-primary-fg);
  font-weight: var(--fw-bold); padding: var(--space-3); text-align: center;
  border-right: none; line-height: 1.1;
}
.kw-table .kw-head-cols th {
  padding: var(--space-2); font-family: var(--font-mono); font-size: var(--fs-3xs);
  font-weight: var(--fw-semibold); text-transform: uppercase; letter-spacing: var(--tracking-wide);
  color: var(--fg-muted); text-align: right; background: var(--bg-surface);
  border-bottom: 1px solid var(--border-default); top: 34px; line-height: 1.15;
}
.kw-table tbody tr { transition: background-color var(--t-quick); }
.kw-table tbody tr:hover { background: color-mix(in oklab, var(--neutral-100) 60%, transparent); }
.kw-table tbody td {
  padding: var(--space-3) var(--space-2); border-bottom: 1px solid var(--border-subtle);
  text-align: right; vertical-align: middle; font-variant-numeric: tabular-nums;
}
.kw-col-sticky { position: sticky; left: 0; background: var(--bg-surface); z-index: 1; box-shadow: 2px 0 0 0 var(--border-subtle); }
.kw-table tbody tr:hover .kw-col-sticky { background: color-mix(in oklab, var(--neutral-100) 70%, var(--bg-surface)); }
.kw-table thead .kw-col-sticky { z-index: 3; text-align: left; padding: var(--space-3) var(--space-4); }
.kw-col-keyword { min-width: 220px; max-width: 240px; text-align: left !important; }
.kw-cell-stat { color: var(--fg-primary); font-family: var(--font-mono); font-size: var(--fs-xs); }
.kw-cell-delta { font-family: var(--font-mono); font-size: var(--fs-xs); border-right: 1px solid var(--border-subtle); }
.kw-delta-pos  { color: var(--success-700); }
.kw-delta-neg  { color: var(--danger-600); }
.kw-delta-zero { color: var(--fg-muted); }
.kw-cell-num { font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--fg-secondary); }
.kw-cell-top  { background: color-mix(in oklab, var(--success-500) 20%, transparent); color: var(--success-700); font-weight: var(--fw-semibold); }
.kw-cell-ok   { background: color-mix(in oklab, var(--success-500) 10%, transparent); color: var(--success-700); }
.kw-cell-mid  { background: color-mix(in oklab, var(--neutral-300) 20%, transparent); color: var(--fg-secondary); }
.kw-cell-low  { background: color-mix(in oklab, var(--neutral-200) 30%, transparent); color: var(--fg-muted); }
.kw-cell-miss { background: color-mix(in oklab, var(--danger-500) 8%, transparent); color: var(--danger-700); opacity: .8; }
.kw-cell-ref {
  background: var(--area-primary-soft); border-left: 2px solid var(--area-primary);
  font-family: var(--font-mono); text-align: center; line-height: 1.15;
  padding: var(--space-3) var(--space-2);
}
.kw-cell-ref strong { color: var(--area-primary-fg); font-size: var(--fs-sm); font-weight: var(--fw-bold); }
.kw-ref-miss { background: color-mix(in oklab, var(--danger-500) 10%, var(--area-primary-soft)); }
.kw-ref-miss strong { color: var(--danger-700); text-decoration: line-through; opacity: .6; }
.kw-ref-low strong  { color: var(--warning-700); }
.kw-table tbody td:nth-child(8),
.kw-table tbody td:nth-child(11),
.kw-table tbody td:nth-child(14),
.kw-table tbody td:nth-child(17),
.kw-table tbody td:nth-child(20) { border-right: 1px solid var(--border-subtle); }
.kw-table-wrap::after {
  content: ''; position: absolute; top: 0; right: 0; bottom: 0; width: 24px;
  background: linear-gradient(to right, transparent, var(--bg-surface));
  pointer-events: none; opacity: .7;
}


/* ============================================================
   32) COMP-CARD  (Wettbewerber-Liste, aufklappbar)
   Aus: screens/v4/03-wettbewerber.php
   HTML:
     <div class="comp-grid">
       <article class="comp-card [comp-card-you] [is-expanded]">
         <div class="comp-card-main">…</div>
         <div class="comp-card-body">…</div>
       </article>
     </div>
   ============================================================ */
.comp-grid { display: flex; flex-direction: column; gap: var(--space-4); }
.comp-card {
  background: var(--bg-surface); border: 1px solid var(--border-subtle);
  border-radius: var(--r-lg); box-shadow: var(--shadow-xs);
  transition: box-shadow var(--t-quick), border-color var(--t-quick); overflow: hidden;
}
.comp-card:hover { box-shadow: var(--shadow-sm); border-color: var(--border-default); }
.comp-card-you {
  border-color: var(--area-primary);
  box-shadow: 0 0 0 1px var(--area-primary), var(--shadow-xs);
  background: linear-gradient(to right, var(--area-primary-soft) 0%, var(--bg-surface) 30%);
}
.comp-card.is-expanded { box-shadow: var(--shadow-md); }
.comp-card-main {
  display: grid;
  grid-template-columns: 56px 1fr auto auto 120px auto;
  gap: var(--space-5); align-items: center; padding: var(--space-5);
}
.comp-rank {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  width: 56px; height: 56px; background: var(--bg-surface-2);
  border-radius: var(--r-md); flex: 0 0 auto;
}
.comp-rank-num {
  font-family: var(--font-display); font-size: var(--fs-xl); font-weight: var(--fw-bold);
  color: var(--fg-primary); letter-spacing: var(--tracking-tight); line-height: 1;
}
.comp-card-you .comp-rank { background: var(--area-primary-soft); }
.comp-card-you .comp-rank-num { color: var(--area-primary-fg); }
.comp-info { min-width: 0; }
.comp-domain {
  display: flex; align-items: center; gap: var(--space-2);
  font-family: var(--font-mono); font-size: var(--fs-sm); color: var(--fg-primary); margin-bottom: 4px;
}
.comp-favicon {
  width: 20px; height: 20px; background: var(--neutral-100); border-radius: var(--r-xs);
  display: grid; place-items: center; color: var(--fg-muted); flex: 0 0 auto;
}
.comp-title { font-size: var(--fs-sm); color: var(--fg-secondary); margin-bottom: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.comp-url { font-family: var(--font-mono); font-size: var(--fs-3xs); color: var(--fg-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 480px; }
.comp-metrics { display: flex; gap: var(--space-5); flex: 0 0 auto; }
.comp-metric { display: flex; flex-direction: column; align-items: center; min-width: 60px; }
.comp-metric-num {
  font-family: var(--font-display); font-size: var(--fs-md); font-weight: var(--fw-bold);
  color: var(--fg-primary); letter-spacing: var(--tracking-tight); line-height: 1;
}
.comp-metric-lbl {
  font-family: var(--font-mono); font-size: var(--fs-3xs); color: var(--fg-muted);
  text-transform: uppercase; letter-spacing: var(--tracking-wide); font-weight: var(--fw-semibold); margin-top: 3px;
}
.comp-score { position: relative; width: 56px; height: 56px; flex: 0 0 auto; }
.comp-score-num {
  position: absolute; inset: 0; display: grid; place-items: center;
  font-family: var(--font-display); font-size: var(--fs-md); font-weight: var(--fw-bold);
  letter-spacing: var(--tracking-tight);
}
.comp-spark { width: 120px; height: 40px; flex: 0 0 auto; }
.comp-toggle {
  width: 36px; height: 36px; border: 1px solid var(--border-default); border-radius: var(--r-md);
  background: var(--bg-surface); color: var(--fg-muted); cursor: pointer;
  display: grid; place-items: center; transition: all var(--t-quick); flex: 0 0 auto;
}
.comp-toggle:hover { background: var(--bg-surface-2); color: var(--fg-primary); border-color: var(--border-strong); }
.comp-card-body { border-top: 1px solid var(--border-subtle); padding: var(--space-6); background: var(--bg-surface-2); }
.comp-body-grid { display: grid; grid-template-columns: 1fr 380px; gap: var(--space-7); }
.comp-body-title {
  font-family: var(--font-mono); font-size: var(--fs-2xs); text-transform: uppercase;
  letter-spacing: var(--tracking-wide); color: var(--fg-muted); font-weight: var(--fw-semibold); margin-bottom: var(--space-3);
}
.comp-kw-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-2); }
.comp-kw-list li { display: grid; grid-template-columns: 140px 1fr 36px; align-items: center; gap: var(--space-3); font-size: var(--fs-xs); }
.comp-kw-term { color: var(--fg-primary); font-weight: var(--fw-medium); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.comp-kw-bar { height: 6px; background: var(--neutral-100); border-radius: var(--r-pill); overflow: hidden; }
.comp-kw-bar > span { display: block; height: 100%; background: linear-gradient(90deg, var(--area-primary), var(--area-primary-hover)); border-radius: var(--r-pill); }
.comp-kw-num { font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--fg-secondary); text-align: right; font-weight: var(--fw-semibold); }
@media (max-width: 1280px) {
  .comp-card-main { grid-template-columns: 48px 1fr auto auto; grid-template-rows: auto auto; }
  .comp-spark { display: none; }
  .comp-body-grid { grid-template-columns: 1fr; }
}


/* ============================================================
   33) AI-CARD + READABILITY-TILE + CLUSTER-CARD  (KI-Insights Tab)
   Aus: screens/v4/04-ki-insights.php
   HTML:
     <section class="ai-card">
       <div class="ai-card-head">…</div>
       <div class="ai-tabs">
         <button class="ai-tab is-active">…<span class="ai-tab-badge">5</span></button>
       </div>
       <div class="ai-content">
         <ol class="ai-reco-list">
           <li class="ai-reco" style="--reco-tint:…">
             <div class="ai-reco-num">1</div>
             <div class="ai-reco-body">…</div>
           </li>
         </ol>
       </div>
     </section>
     <article class="readability-tile">
       <div class="rt-bar" style="background:var(--warning-500)"></div>
       <div class="rt-head"><div class="rt-label">…</div><span class="badge">…</span></div>
       <div class="rt-value">46</div>
       <div class="rt-scale"><div class="rt-scale-bar">…</div></div>
     </article>
     <article class="cluster-card">…</article>
   ============================================================ */
.ai-card {
  background: linear-gradient(135deg, var(--bg-surface) 0%, color-mix(in oklab, var(--violet-500) 3%, var(--bg-surface)) 100%);
  border: 1px solid var(--border-subtle); border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm); overflow: hidden; position: relative;
}
.ai-card::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg, var(--violet-500), var(--violet-400), var(--violet-600));
}
.ai-card-head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: var(--space-5); padding: var(--space-6); border-bottom: 1px solid var(--border-subtle); flex-wrap: wrap;
}
.ai-card-brand { display: flex; gap: var(--space-4); align-items: flex-start; min-width: 0; }
.ai-brand-icon {
  width: 44px; height: 44px; border-radius: var(--r-md);
  background: color-mix(in oklab, var(--violet-500) 14%, transparent);
  color: var(--violet-700); display: grid; place-items: center; flex: 0 0 auto;
}
.ai-brand-title {
  font-family: var(--font-display); font-size: var(--fs-lg); letter-spacing: var(--tracking-tight);
  color: var(--fg-primary); display: flex; align-items: center;
}
.ai-brand-sub { font-size: var(--fs-xs); color: var(--fg-muted); margin-top: 3px; }
.ai-card-actions { display: flex; gap: var(--space-2); flex: 0 0 auto; }
.ai-tabs {
  display: flex; gap: var(--space-1); padding: var(--space-4) var(--space-6) 0;
  border-bottom: 1px solid var(--border-subtle);
}
.ai-tab {
  display: inline-flex; align-items: center; gap: var(--space-2);
  padding: var(--space-3) var(--space-5); background: transparent;
  border: 1px solid transparent; border-bottom: none;
  border-top-left-radius: var(--r-sm); border-top-right-radius: var(--r-sm);
  font-family: var(--font-body); font-size: var(--fs-sm); font-weight: var(--fw-medium);
  color: var(--fg-muted); cursor: pointer; margin-bottom: -1px; transition: all var(--t-quick);
}
.ai-tab:hover { background: color-mix(in oklab, var(--violet-500) 4%, transparent); color: var(--fg-primary); }
.ai-tab.is-active { background: var(--bg-surface); border-color: var(--border-subtle); color: var(--violet-700); font-weight: var(--fw-semibold); }
.ai-tab-badge {
  font-family: var(--font-mono); font-size: var(--fs-3xs);
  background: color-mix(in oklab, var(--violet-500) 12%, transparent);
  color: var(--violet-700); padding: 2px 6px; border-radius: var(--r-xs); font-weight: var(--fw-semibold);
}
.ai-content { padding: var(--space-6); }
.ai-insight-eyebrow {
  display: inline-flex; align-items: center; gap: var(--space-2);
  font-family: var(--font-mono); font-size: var(--fs-2xs); text-transform: uppercase;
  letter-spacing: var(--tracking-wide); color: var(--violet-700); font-weight: var(--fw-semibold); margin-bottom: var(--space-3);
}
.ai-insight-intro p { font-size: var(--fs-md); line-height: var(--lh-relaxed); color: var(--fg-secondary); margin: 0 0 var(--space-6) 0; }
.section-sub-title {
  font-family: var(--font-mono); font-size: var(--fs-2xs); text-transform: uppercase;
  letter-spacing: var(--tracking-wide); color: var(--fg-muted); font-weight: var(--fw-semibold); margin-bottom: var(--space-4);
}
.ai-reco-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: var(--space-4); }
.ai-reco {
  display: grid; grid-template-columns: 44px 1fr; gap: var(--space-4);
  padding: var(--space-5); background: var(--bg-surface);
  border: 1px solid var(--border-subtle); border-left: 3px solid var(--reco-tint);
  border-radius: var(--r-md);
}
.ai-reco-num {
  width: 36px; height: 36px; background: var(--reco-tint-soft); color: var(--reco-tint-fg);
  border-radius: var(--r-full); display: grid; place-items: center;
  font-family: var(--font-display); font-size: var(--fs-lg); font-weight: var(--fw-bold); line-height: 1;
}
.ai-reco-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); margin-bottom: var(--space-2); }
.ai-reco-title {
  font-family: var(--font-display); font-size: var(--fs-md); font-weight: var(--fw-semibold);
  color: var(--fg-primary); margin: 0; display: inline-flex; align-items: center; gap: var(--space-2);
}
.ai-reco-title .icon { color: var(--reco-tint-fg); }
.ai-reco-prio {
  font-family: var(--font-mono); font-size: var(--fs-3xs); letter-spacing: var(--tracking-wide);
  color: var(--reco-tint-fg); background: var(--reco-tint-soft);
  padding: 2px 8px; border-radius: var(--r-xs); font-weight: var(--fw-bold); flex: 0 0 auto;
}
.ai-reco-text { font-size: var(--fs-sm); color: var(--fg-secondary); line-height: var(--lh-normal); margin: 0 0 var(--space-4) 0; }
.ai-reco-meta {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3);
  padding-top: var(--space-3); border-top: 1px dashed var(--border-subtle);
}
.ai-reco-chip { display: inline-flex; align-items: center; gap: var(--space-2); font-family: var(--font-mono); font-size: var(--fs-2xs); color: var(--fg-muted); }

/* Readability Tiles */
.readability-tile {
  background: var(--bg-surface); border: 1px solid var(--border-subtle);
  border-radius: var(--r-lg); padding: var(--space-5); position: relative; overflow: hidden;
}
.rt-bar { position: absolute; top: 0; left: 0; right: 0; height: 3px; }
.rt-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); margin-bottom: var(--space-4); }
.rt-label { font-family: var(--font-mono); font-size: var(--fs-2xs); text-transform: uppercase; letter-spacing: var(--tracking-wide); color: var(--fg-muted); font-weight: var(--fw-semibold); }
.rt-value { font-family: var(--font-display); font-size: var(--fs-3xl); font-weight: var(--fw-bold); letter-spacing: var(--tracking-tight); line-height: 1; color: var(--fg-primary); margin-bottom: var(--space-4); }
.rt-scale-bar { position: relative; height: 8px; background: var(--neutral-100); border-radius: var(--r-pill); overflow: visible; margin-bottom: var(--space-2); }
.rt-scale-bar > span:first-child { display: block; height: 100%; border-radius: var(--r-pill); position: relative; }
.rt-scale-marker { position: absolute; top: -4px; width: 16px; height: 16px; background: var(--bg-surface); border: 2px solid var(--fg-primary); border-radius: var(--r-full); transform: translateX(-50%); box-shadow: var(--shadow-sm); }
.rt-scale-lbl { display: flex; justify-content: space-between; font-family: var(--font-mono); font-size: var(--fs-3xs); color: var(--fg-muted); text-transform: uppercase; letter-spacing: var(--tracking-wide); }
.rt-note { margin-top: var(--space-4); padding-top: var(--space-3); border-top: 1px dashed var(--border-subtle); font-size: var(--fs-xs); color: var(--fg-secondary); display: flex; align-items: center; gap: var(--space-2); }

/* Cluster Cards */
.cluster-card { background: var(--bg-surface); border: 1px solid var(--border-subtle); border-radius: var(--r-lg); padding: var(--space-6); box-shadow: var(--shadow-xs); display: flex; flex-direction: column; gap: var(--space-4); }
.cluster-head { display: flex; align-items: flex-start; gap: var(--space-4); }
.cluster-icon { width: 40px; height: 40px; border-radius: var(--r-md); display: grid; place-items: center; flex: 0 0 auto; }
.cluster-icon.tint-success { background: var(--success-50);  color: var(--success-700); }
.cluster-icon.tint-warning { background: var(--warning-50);  color: var(--warning-700); }
.cluster-icon.tint-danger  { background: var(--danger-50);   color: var(--danger-700); }
.cluster-icon.tint-info    { background: var(--info-50);     color: var(--info-700); }
.cluster-name { font-family: var(--font-display); font-size: var(--fs-md); font-weight: var(--fw-semibold); color: var(--fg-primary); letter-spacing: var(--tracking-tight); }
.cluster-meta { font-size: var(--fs-xs); color: var(--fg-muted); margin-top: 2px; }
.cluster-pct-num { font-family: var(--font-display); font-size: var(--fs-2xl); font-weight: var(--fw-bold); letter-spacing: var(--tracking-tight); line-height: 1; }
.cluster-progress-bar { height: 6px; background: var(--neutral-100); border-radius: var(--r-pill); overflow: hidden; }
.cluster-progress-bar > span { display: block; height: 100%; border-radius: var(--r-pill); }
.cluster-desc { margin: 0; font-size: var(--fs-sm); color: var(--fg-secondary); line-height: var(--lh-normal); }
.cluster-terms-lbl { font-family: var(--font-mono); font-size: var(--fs-3xs); text-transform: uppercase; letter-spacing: var(--tracking-wide); color: var(--fg-muted); font-weight: var(--fw-semibold); margin-bottom: var(--space-3); }
.cluster-term-chip { display: inline-flex; align-items: center; padding: 4px 10px; background: var(--bg-surface-2); border: 1px solid var(--border-subtle); border-radius: var(--r-pill); font-family: var(--font-mono); font-size: var(--fs-2xs); color: var(--fg-secondary); }
.cluster-foot { display: flex; align-items: center; gap: var(--space-3); padding-top: var(--space-3); border-top: 1px dashed var(--border-subtle); }


/* ============================================================
   34) ENT-STATS-BAR + ENT-GRAPH + ENT-CARD  (Entitäten Tab)
   Aus: screens/v4/05-entitaeten.php
   HTML:
     <div class="ent-stats-bar">…</div>
     <div class="ent-legend">…</div>
     <div class="ent-graph-wrap"><svg class="ent-graph">…</svg></div>
     <article class="ent-card [ent-card-missing]">
       <div class="ent-card-head">
         <span class="ent-type-chip">…</span>
       </div>
       <div class="ent-card-name">…</div>
       <div class="ent-card-rating">
         <span class="ent-star [is-active]">…</span>
       </div>
     </article>
   ============================================================ */
.ent-stats-bar { display: flex; gap: var(--space-6); align-items: center; background: var(--bg-surface); border: 1px solid var(--border-subtle); border-radius: var(--r-lg); padding: var(--space-4) var(--space-6); box-shadow: var(--shadow-xs); flex-wrap: wrap; }
.ent-stat { display: flex; align-items: center; gap: var(--space-3); }
.ent-stat-icon { width: 32px; height: 32px; border-radius: var(--r-md); display: grid; place-items: center; flex: 0 0 auto; }
.ent-stat-num { font-family: var(--font-display); font-size: var(--fs-lg); font-weight: var(--fw-bold); letter-spacing: var(--tracking-tight); line-height: 1; color: var(--fg-primary); }
.ent-stat-lbl { font-family: var(--font-mono); font-size: var(--fs-3xs); color: var(--fg-muted); text-transform: uppercase; letter-spacing: var(--tracking-wide); font-weight: var(--fw-semibold); margin-top: 2px; }
.ent-legend { display: flex; gap: var(--space-5); align-items: center; flex-wrap: wrap; padding: var(--space-4) var(--space-6); border-bottom: 1px solid var(--border-subtle); background: var(--bg-surface-2); font-family: var(--font-mono); font-size: var(--fs-2xs); color: var(--fg-secondary); text-transform: uppercase; letter-spacing: var(--tracking-wide); font-weight: var(--fw-semibold); }
.ent-legend-item { display: inline-flex; align-items: center; gap: var(--space-2); }
.ent-legend-dot { width: 22px; height: 22px; border-radius: var(--r-full); display: grid; place-items: center; flex: 0 0 auto; }
.ent-graph-wrap { position: relative; padding: var(--space-3); background: var(--bg-surface); }
.ent-graph { width: 100%; height: auto; min-height: 420px; display: block; border-radius: var(--r-md); }
.ent-graph-hint {
  position: absolute; bottom: var(--space-5); left: 50%; transform: translateX(-50%);
  background: color-mix(in oklab, var(--neutral-900) 85%, transparent); color: var(--neutral-50);
  padding: 6px 14px; border-radius: var(--r-pill);
  font-family: var(--font-mono); font-size: var(--fs-3xs); text-transform: uppercase; letter-spacing: var(--tracking-wide);
  white-space: nowrap; display: flex; align-items: center; gap: var(--space-2); opacity: .9;
}
.ent-card {
  background: var(--bg-surface); border: 1px solid var(--border-subtle); border-radius: var(--r-md);
  padding: var(--space-5); display: flex; flex-direction: column; gap: var(--space-3);
  box-shadow: var(--shadow-xs); transition: box-shadow var(--t-quick), border-color var(--t-quick), transform var(--t-quick);
}
.ent-card:hover { box-shadow: var(--shadow-md); border-color: var(--border-default); transform: translateY(-2px); }
.ent-card-missing {
  border-style: dashed;
  background: linear-gradient(to bottom, var(--bg-surface) 0%, color-mix(in oklab, var(--danger-500) 3%, var(--bg-surface)) 100%);
}
.ent-card-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); }
.ent-type-chip { display: inline-flex; align-items: center; gap: 4px; padding: 3px 8px; border-radius: var(--r-sm); font-family: var(--font-mono); font-size: var(--fs-3xs); text-transform: uppercase; letter-spacing: var(--tracking-wide); font-weight: var(--fw-bold); }
.ent-card-name { font-family: var(--font-display); font-size: var(--fs-md); font-weight: var(--fw-semibold); color: var(--fg-primary); letter-spacing: var(--tracking-tight); line-height: 1.2; }
.ent-card-rating { display: flex; align-items: center; gap: 2px; }
.ent-star { width: 14px; height: 14px; color: var(--neutral-200); display: inline-grid; place-items: center; }
.ent-star.is-active { color: var(--warning-500); }
.ent-star.is-active .icon { fill: var(--warning-500); }
.ent-rating-lbl { margin-left: var(--space-3); font-family: var(--font-mono); font-size: var(--fs-3xs); color: var(--fg-muted); text-transform: uppercase; letter-spacing: var(--tracking-wide); }
.ent-card-desc { margin: 0; font-size: var(--fs-sm); color: var(--fg-secondary); line-height: var(--lh-normal); flex: 1; }
.ent-card-foot { display: flex; gap: var(--space-2); margin-top: auto; padding-top: var(--space-3); border-top: 1px dashed var(--border-subtle); }


/* ============================================================
   EDITOR (Tab 6 · WDF+IDF · 06-editor.php)
   ------------------------------------------------------------
   Fokussierter Content-Workspace: dunkle Editor-Topbar, KPI-Bar,
   Keyword-Sidebar + TinyMCE-Editor, EPS-Chart.
   ============================================================ */

/* Seg-Group (Maximal-Kurve / Hüllkurve Toggle) */
.seg-group {
  display: inline-flex; padding: 3px;
  background: var(--bg-surface-2);
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-md); gap: 2px;
}
.seg-btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 14px;
  border-radius: calc(var(--r-md) - 2px);
  border: none; background: transparent;
  color: var(--fg-secondary);
  font-size: var(--fs-sm); font-weight: var(--fw-medium); font-family: inherit;
  cursor: pointer; transition: all var(--t-quick);
}
.seg-btn:hover:not(.is-active) { color: var(--fg-primary); }
.seg-btn.is-active {
  background: var(--bg-surface); color: var(--area-primary-fg);
  box-shadow: 0 1px 2px rgba(0,0,0,0.06);
}
.seg-btn svg { color: currentColor; }

/* Card-Header mit Icon (für Chart-Card) */
.card-hd-with-icon { display: flex; align-items: flex-start; gap: var(--space-4); position: relative; margin-bottom: var(--space-5); }
.card-title-icon {
  width: 36px; height: 36px; border-radius: var(--r-md);
  display: grid; place-items: center; flex: 0 0 auto;
  background: var(--area-primary-soft); color: var(--area-primary-fg);
}
.card-hd-with-icon .card-title { margin-bottom: 2px; }

/* Dunkle Editor-Topbar (keyword header) */
.editor-topbar {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-5);
  background: linear-gradient(135deg, var(--neutral-900) 0%, var(--neutral-800) 100%);
  color: var(--neutral-50);
  border-radius: var(--r-lg);
  padding: var(--space-4) var(--space-6);
  box-shadow: var(--shadow-sm);
  margin-bottom: var(--space-5);
  flex-wrap: wrap;
}
.editor-topbar-left  { display: flex; align-items: center; gap: var(--space-4); min-width: 0; flex-wrap: wrap; }
.editor-topbar-right { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
.editor-topbar-icon {
  width: 32px; height: 32px; border-radius: var(--r-md);
  display: grid; place-items: center;
  background: color-mix(in oklab, var(--area-primary) 22%, transparent);
  color: var(--orange-300);
  flex: 0 0 auto;
}
.editor-topbar-meta { display: flex; align-items: center; gap: var(--space-3); }
.editor-topbar-kw {
  font-family: var(--font-display); font-size: var(--fs-lg);
  font-weight: var(--fw-semibold); letter-spacing: var(--tracking-tight);
  color: var(--neutral-0);
}
.editor-topbar-locale {
  display: inline-flex; align-items: center;
  height: 20px; padding: 0 8px; border-radius: var(--r-xs);
  background: color-mix(in oklab, white 12%, transparent);
  color: var(--neutral-100);
  font-family: var(--font-mono); font-size: var(--fs-3xs);
  font-weight: var(--fw-bold); letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
}
.editor-topbar-sep { width: 1px; height: 20px; background: color-mix(in oklab, white 12%, transparent); }
.editor-topbar-ref {
  display: inline-flex; align-items: center; gap: var(--space-2);
  font-family: var(--font-mono); font-size: var(--fs-2xs);
  color: var(--neutral-300);
  max-width: 340px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.editor-topbar-ref svg { color: var(--neutral-400); flex: 0 0 auto; }
.editor-topbar-btn {
  display: inline-flex; align-items: center; gap: var(--space-2);
  height: 32px; padding: 0 var(--space-4);
  background: color-mix(in oklab, white 7%, transparent);
  border: 1px solid color-mix(in oklab, white 10%, transparent);
  border-radius: var(--r-sm);
  color: var(--neutral-100);
  font-size: var(--fs-xs); font-weight: var(--fw-medium);
  cursor: pointer; text-decoration: none;
  transition: background var(--t-quick), border-color var(--t-quick);
}
.editor-topbar-btn:hover {
  background: color-mix(in oklab, white 12%, transparent);
  border-color: color-mix(in oklab, white 16%, transparent);
  color: var(--neutral-0); text-decoration: none;
}
.editor-topbar-btn-accent {
  background: color-mix(in oklab, var(--area-primary) 18%, transparent);
  border-color: color-mix(in oklab, var(--area-primary) 32%, transparent);
  color: var(--orange-200);
}
.editor-topbar-btn-accent:hover {
  background: color-mix(in oklab, var(--area-primary) 28%, transparent);
  border-color: color-mix(in oklab, var(--area-primary) 45%, transparent);
  color: var(--orange-100);
}

/* KPI-Bar (4 Tiles) */
.editor-kpi-bar {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-4);
  margin-bottom: var(--space-7);
}
.editor-kpi-bar > * { min-width: 0; }
.editor-kpi {
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-lg);
  padding: var(--space-5) var(--space-6);
  display: flex; flex-direction: column; gap: var(--space-3);
  box-shadow: var(--shadow-xs);
  position: relative; overflow: hidden;
}
.editor-kpi-score::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: var(--danger-500);
}
.editor-kpi-score.score-good::before    { background: var(--success-500); }
.editor-kpi-score.score-mid::before     { background: var(--warning-500); }
.editor-kpi-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); }
.editor-kpi-label {
  font-family: var(--font-mono); font-size: var(--fs-3xs);
  text-transform: uppercase; letter-spacing: var(--tracking-wide);
  color: var(--fg-muted); font-weight: var(--fw-semibold);
}
.editor-kpi-badge {
  font-family: var(--font-mono); font-size: var(--fs-3xs);
  padding: 2px 8px; border-radius: var(--r-xs);
  font-weight: var(--fw-bold); letter-spacing: var(--tracking-wide);
}
.editor-kpi-badge-danger  { background: var(--danger-50);  color: var(--danger-700); }
.editor-kpi-badge-warning { background: var(--warning-50); color: var(--warning-700); }
.editor-kpi-badge-success { background: var(--success-50); color: var(--success-700); }
.editor-kpi-badge-neutral { background: var(--neutral-100); color: var(--neutral-700); }
.editor-kpi-trend {
  display: inline-flex; align-items: center; gap: 4px;
  font-family: var(--font-mono); font-size: var(--fs-3xs);
  font-weight: var(--fw-bold); letter-spacing: var(--tracking-wide);
  padding: 2px 8px; border-radius: var(--r-xs);
}
.editor-kpi-trend-up { background: var(--success-50); color: var(--success-700); }
.editor-kpi-value-row { display: flex; align-items: baseline; gap: var(--space-2); }
.editor-kpi-value {
  font-family: var(--font-display); font-size: var(--fs-3xl);
  font-weight: var(--fw-bold); letter-spacing: var(--tracking-tight);
  line-height: 1; color: var(--fg-primary); font-variant-numeric: tabular-nums;
}
.editor-kpi-unit {
  font-family: var(--font-mono); font-size: var(--fs-xs);
  color: var(--fg-muted); text-transform: lowercase;
}
.editor-kpi-unit-danger  { color: var(--danger-600);  font-weight: var(--fw-bold); text-transform: none; font-family: var(--font-body); font-size: var(--fs-sm); }
.editor-kpi-unit-warning { color: var(--warning-700); font-weight: var(--fw-bold); text-transform: none; font-family: var(--font-body); font-size: var(--fs-sm); }
.editor-kpi-unit-success { color: var(--success-700); font-weight: var(--fw-bold); text-transform: none; font-family: var(--font-body); font-size: var(--fs-sm); }
.editor-kpi-input {
  width: 100%; height: 36px; padding: 0 var(--space-3);
  background: var(--bg-surface-2); color: var(--fg-primary);
  border: 1px solid var(--border-subtle); border-radius: var(--r-sm);
  font-family: var(--font-display); font-size: var(--fs-md);
  font-weight: var(--fw-semibold); letter-spacing: var(--tracking-tight);
  font-variant-numeric: tabular-nums;
}
.editor-kpi-input:focus { outline: none; border-color: var(--area-primary); box-shadow: var(--ring); }
.editor-kpi-progress { height: 6px; background: var(--neutral-100); border-radius: var(--r-pill); overflow: hidden; }
.editor-kpi-progress-bar { display: block; height: 100%; border-radius: var(--r-pill); transition: width var(--t-base); }
.editor-kpi-progress-bar-danger  { background: var(--danger-500); }
.editor-kpi-progress-bar-warning { background: var(--warning-500); }
.editor-kpi-progress-bar-success { background: var(--success-500); }
.editor-kpi-sub { font-size: var(--fs-2xs); color: var(--fg-muted); font-family: var(--font-mono); }
.editor-kpi-inline-chart { height: 24px; }
.editor-kpi-inline-chart svg { width: 100%; height: 100%; display: block; }
.editor-kpi-readability-scale { display: flex; flex-direction: column; gap: 4px; }
.editor-kpi-readability-track {
  position: relative; height: 6px;
  background: linear-gradient(90deg, var(--danger-500) 0%, var(--warning-500) 50%, var(--success-500) 100%);
  border-radius: var(--r-pill);
}
.editor-kpi-readability-marker {
  position: absolute; top: -3px; width: 12px; height: 12px;
  background: var(--bg-surface); border: 2px solid var(--fg-primary);
  border-radius: var(--r-full); transform: translateX(-50%);
  box-shadow: var(--shadow-sm); transition: left var(--t-base);
}
.editor-kpi-readability-labels {
  display: flex; justify-content: space-between;
  font-family: var(--font-mono); font-size: var(--fs-3xs);
  text-transform: uppercase; letter-spacing: var(--tracking-wide);
  color: var(--fg-faint);
}

/* 2-Column Grid: Sidebar + Main */
.editor-grid {
  display: grid; grid-template-columns: 320px minmax(0, 1fr);
  gap: var(--space-6); align-items: start;
}
.editor-grid > * { min-width: 0; }
@media (max-width: 1200px) {
  .editor-grid { grid-template-columns: 1fr; }
  .editor-kpi-bar { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Focus-Mode: blendet KPI-Bar + Sidebar aus, Editor füllt die Breite */
.editor-scope.is-focus .editor-kpi-bar,
.editor-scope.is-focus .editor-kw-sidebar { display: none; }
.editor-scope.is-focus .editor-grid { grid-template-columns: 1fr; }
.editor-scope.is-focus .editor-content { max-height: calc(100vh - 320px); }

/* Keyword-Sidebar */
.editor-kw-sidebar {
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-lg);
  padding: var(--space-5);
  box-shadow: var(--shadow-xs);
  position: sticky; top: var(--space-5);
  max-height: calc(100vh - var(--space-5) * 2);
  overflow-y: auto;
  display: flex; flex-direction: column; gap: var(--space-4);
}
.editor-kw-hd { display: flex; flex-direction: column; gap: var(--space-2); padding-bottom: var(--space-4); border-bottom: 1px solid var(--border-subtle); }
.editor-kw-hd-top { display: flex; align-items: center; gap: var(--space-2); }
.editor-kw-hd-icon {
  width: 28px; height: 28px; border-radius: var(--r-sm);
  display: grid; place-items: center;
  background: var(--area-primary-soft); color: var(--area-primary-fg);
}
.editor-kw-hd-title {
  font-family: var(--font-display); font-size: var(--fs-md);
  font-weight: var(--fw-semibold); color: var(--fg-primary);
  letter-spacing: var(--tracking-tight); flex: 1;
}
.editor-kw-hd-badge {
  font-family: var(--font-mono); font-size: var(--fs-3xs);
  font-weight: var(--fw-bold); letter-spacing: var(--tracking-wide);
  padding: 2px 8px; border-radius: var(--r-xs);
  background: var(--danger-50); color: var(--danger-700);
}
.editor-kw-hd-badge.is-good { background: var(--success-50); color: var(--success-700); }
.editor-kw-hd-badge.is-mid  { background: var(--warning-50); color: var(--warning-700); }
.editor-kw-hd-sub { font-size: var(--fs-xs); color: var(--fg-muted); line-height: var(--lh-snug); }
.editor-kw-hd-progress { height: 4px; background: var(--neutral-100); border-radius: var(--r-pill); overflow: hidden; margin-top: 2px; }
.editor-kw-hd-progress-bar { display: block; height: 100%; background: var(--area-primary); border-radius: var(--r-pill); transition: width var(--t-base); }

/* Keyword-Groups */
.editor-kw-group { border-radius: var(--r-md); }
.editor-kw-group[open] { background: var(--bg-surface-2); }
.editor-kw-group-sum {
  display: flex; align-items: center; gap: var(--space-3);
  padding: var(--space-3) var(--space-3);
  cursor: pointer; border-radius: var(--r-sm);
  list-style: none; user-select: none;
}
.editor-kw-group-sum::-webkit-details-marker { display: none; }
.editor-kw-group-sum:hover { background: var(--bg-hover); }
.editor-kw-group-dot { width: 10px; height: 10px; border-radius: var(--r-full); flex: 0 0 auto; }
.editor-kw-group-dot-danger  { background: var(--danger-500); }
.editor-kw-group-dot-warning { background: var(--warning-500); }
.editor-kw-group-dot-info    { background: var(--info-500); }
.editor-kw-group-dot-violet  { background: var(--violet-500); }
.editor-kw-group-dot-success { background: var(--success-500); }
.editor-kw-group-label {
  flex: 1; font-family: var(--font-body); font-size: var(--fs-xs);
  font-weight: var(--fw-semibold); color: var(--fg-primary);
  letter-spacing: var(--tracking-tight); text-transform: uppercase;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.editor-kw-group-count {
  font-family: var(--font-mono); font-size: var(--fs-3xs);
  color: var(--fg-muted); font-weight: var(--fw-semibold);
  font-variant-numeric: tabular-nums;
}
.editor-kw-group-chev { display: inline-grid; place-items: center; color: var(--fg-faint); transition: transform var(--t-quick); }
.editor-kw-group[open] .editor-kw-group-chev { transform: rotate(180deg); }
.editor-kw-group-body { padding: 0 var(--space-3) var(--space-3); }

/* Keyword-List */
.editor-kw-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 2px; }
.editor-kw-item {
  display: grid; grid-template-columns: 8px 1fr auto;
  grid-template-rows: auto 3px;
  align-items: center; column-gap: var(--space-3); row-gap: 4px;
  padding: var(--space-2) var(--space-2);
  border-radius: var(--r-sm);
  cursor: pointer;
  transition: background var(--t-quick);
}
.editor-kw-item:hover { background: var(--bg-hover); }
.editor-kw-item.is-active { background: color-mix(in oklab, var(--area-primary) 14%, transparent); }
.editor-kw-item-dot { width: 8px; height: 8px; border-radius: var(--r-full); grid-row: 1; background: var(--neutral-200); }
.editor-kw-item-term {
  font-family: var(--font-mono); font-size: var(--fs-2xs);
  color: var(--fg-primary); font-weight: var(--fw-medium); grid-row: 1;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.editor-kw-item-count {
  font-family: var(--font-mono); font-size: var(--fs-3xs);
  color: var(--fg-muted); font-weight: var(--fw-semibold); grid-row: 1;
  font-variant-numeric: tabular-nums;
}
.editor-kw-item-bar {
  grid-column: 1 / -1; grid-row: 2;
  height: 3px; background: var(--neutral-100); border-radius: var(--r-pill); overflow: hidden;
}
.editor-kw-item-bar-fill { display: block; height: 100%; border-radius: var(--r-pill); transition: width var(--t-base); background: var(--neutral-200); }
.editor-kw-item-ok   .editor-kw-item-dot,
.editor-kw-item-ok   .editor-kw-item-bar-fill { background: var(--success-500); }
.editor-kw-item-warn .editor-kw-item-dot,
.editor-kw-item-warn .editor-kw-item-bar-fill { background: var(--warning-500); }
.editor-kw-item-miss .editor-kw-item-dot,
.editor-kw-item-miss .editor-kw-item-bar-fill { background: var(--danger-500); }
.editor-kw-item-miss .editor-kw-item-term     { color: var(--danger-700); }
.editor-kw-item-over .editor-kw-item-dot,
.editor-kw-item-over .editor-kw-item-bar-fill { background: var(--orange-500); }

/* Keyword-Legend */
.editor-kw-legend {
  display: flex; align-items: center; justify-content: space-around;
  padding-top: var(--space-3); border-top: 1px solid var(--border-subtle);
  font-family: var(--font-mono); font-size: var(--fs-3xs);
  text-transform: uppercase; letter-spacing: var(--tracking-wide);
  color: var(--fg-muted); font-weight: var(--fw-semibold);
}
.editor-kw-legend-item { display: inline-flex; align-items: center; gap: 6px; }
.editor-kw-legend-dot { width: 8px; height: 8px; border-radius: var(--r-full); }
.editor-kw-legend-dot.ok   { background: var(--success-500); }
.editor-kw-legend-dot.warn { background: var(--warning-500); }
.editor-kw-legend-dot.miss { background: var(--danger-500); }

/* Editor-Main (right column) */
.editor-main { display: flex; flex-direction: column; gap: var(--space-4); min-width: 0; }
.editor-main-head {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-4);
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle); border-bottom: none;
  border-radius: var(--r-lg) var(--r-lg) 0 0;
  padding: var(--space-4) var(--space-6);
}
.editor-main-head-title { display: flex; align-items: center; gap: var(--space-3); }
.editor-main-head-icon {
  width: 32px; height: 32px; border-radius: var(--r-md);
  display: grid; place-items: center;
  background: color-mix(in oklab, var(--violet-500) 14%, transparent);
  color: var(--violet-700);
}
.editor-main-head-label { font-size: var(--fs-sm); color: var(--fg-primary); }
.editor-main-head-sub { font-size: var(--fs-2xs); color: var(--fg-muted); margin-top: 2px; font-family: var(--font-mono); }
.editor-main-head-actions { display: flex; align-items: center; gap: var(--space-3); }
.editor-main-head-meta { font-family: var(--font-mono); font-size: var(--fs-2xs); color: var(--fg-muted); }
.editor-saveindicator { display: inline-flex; align-items: center; gap: var(--space-2); }
.editor-saveindicator-dot {
  width: 8px; height: 8px; border-radius: var(--r-full);
  background: var(--success-500);
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--success-500) 20%, transparent);
  animation: editor-save-pulse 2.8s ease-in-out infinite;
}
@keyframes editor-save-pulse { 0%,100% { opacity: 1; } 50% { opacity: .45; } }

/* TinyMCE Wrapper (ersetzt das Design-editor-tinymce) */
.editor-tinymce {
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: 0 0 var(--r-lg) var(--r-lg);
  border-top: none; overflow: hidden;
  display: flex; flex-direction: column;
}
.editor-tinymce .mce-tinymce { border: none !important; box-shadow: none !important; }
.editor-tinymce .mce-panel { border: none !important; background: var(--bg-surface) !important; }
.editor-tinymce .mce-toolbar-grp {
  background: var(--bg-surface-2) !important;
  border-bottom: 1px solid var(--border-subtle) !important;
  padding: var(--space-2) var(--space-3) !important;
}
.editor-tinymce .mce-btn { border-radius: var(--r-sm) !important; }
.editor-tinymce .mce-btn button { color: var(--fg-primary) !important; }
.editor-tinymce .mce-btn.mce-active,
.editor-tinymce .mce-btn:hover { background: var(--bg-hover) !important; }
.editor-tinymce .mce-statusbar { border-top: 1px solid var(--border-subtle) !important; background: var(--bg-surface-2) !important; }

/* Editor Footer (word count + tools) */
.editor-foot {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-4);
  padding: var(--space-3) var(--space-5);
  background: var(--bg-surface-2);
  border: 1px solid var(--border-subtle); border-top: none;
  border-radius: 0 0 var(--r-lg) var(--r-lg);
  flex-wrap: wrap; margin-top: -1px;
}
.editor-foot-stats { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; }
.editor-foot-stat { font-family: var(--font-mono); font-size: var(--fs-2xs); color: var(--fg-muted); }
.editor-foot-stat strong { color: var(--fg-primary); font-weight: var(--fw-bold); font-variant-numeric: tabular-nums; }
.editor-foot-stat-warn strong,
.editor-foot-stat-warn { color: var(--danger-600); }
.editor-foot-sep { width: 1px; height: 12px; background: var(--border-subtle); }
.editor-foot-tools { display: inline-flex; align-items: center; gap: var(--space-2); }
.editor-foot-tool {
  display: inline-flex; align-items: center; gap: 4px;
  background: transparent; border: none; text-decoration: none;
  font-family: var(--font-mono); font-size: var(--fs-3xs);
  text-transform: uppercase; letter-spacing: var(--tracking-wide);
  color: var(--fg-muted); font-weight: var(--fw-semibold);
  cursor: pointer; padding: 4px 8px; border-radius: var(--r-xs);
}
.editor-foot-tool:hover { background: var(--bg-hover); color: var(--fg-primary); text-decoration: none; }

/* Editor Action-Row (unten: HTML/.docx/Save) */
.editor-actions {
  display: flex; align-items: center; gap: var(--space-3);
  padding: var(--space-4) var(--space-5);
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-xs);
  flex-wrap: wrap;
}
.editor-actions-spacer { flex: 1; }

/* AI-Panel (violet IC-Card, zwischen KPI-Bar und Editor-Grid) */
.editor-ai-panel {
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-left: 3px solid var(--violet-500);
  border-radius: var(--r-lg);
  padding: var(--space-5) var(--space-6);
  margin-bottom: var(--space-5);
  box-shadow: var(--shadow-xs);
}
.editor-ai-panel-head {
  display: flex; align-items: center; gap: var(--space-3); margin-bottom: var(--space-4);
  cursor: pointer; user-select: none;
}
.editor-ai-panel-icon {
  width: 32px; height: 32px; border-radius: var(--r-md);
  display: grid; place-items: center;
  background: color-mix(in oklab, var(--violet-500) 14%, transparent); color: var(--violet-700);
}
.editor-ai-panel-title {
  font-family: var(--font-display); font-size: var(--fs-md);
  font-weight: var(--fw-semibold); color: var(--fg-primary); flex: 1;
}
.editor-ai-panel-chev { color: var(--fg-muted); transition: transform var(--t-quick); }
.editor-ai-panel.is-collapsed .editor-ai-panel-chev { transform: rotate(-90deg); }
.editor-ai-panel.is-collapsed .editor-ai-panel-body { display: none; }
.editor-ai-tabs {
  display: inline-flex; gap: 2px;
  background: var(--bg-surface-2); padding: 3px;
  border-radius: var(--r-md); border: 1px solid var(--border-subtle);
  margin-bottom: var(--space-4);
}
.editor-ai-tab {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 12px; border-radius: calc(var(--r-md) - 2px);
  border: none; background: transparent; cursor: pointer;
  color: var(--fg-secondary); font-size: var(--fs-xs);
  font-weight: var(--fw-medium); font-family: inherit;
}
.editor-ai-tab:hover:not(.is-active) { color: var(--fg-primary); }
.editor-ai-tab.is-active {
  background: var(--bg-surface); color: var(--violet-700);
  box-shadow: 0 1px 2px rgba(0,0,0,0.06);
}
.editor-ai-text {
  font-size: var(--fs-sm); color: var(--fg-secondary);
  line-height: var(--lh-normal);
}
.editor-ai-text p { margin: 0 0 var(--space-3) 0; }
.editor-ai-text strong { color: var(--fg-primary); }
.editor-ai-text h4, .editor-ai-text h5 {
  font-family: var(--font-display); font-size: var(--fs-md);
  font-weight: var(--fw-semibold); color: var(--fg-primary);
  margin: var(--space-4) 0 var(--space-2) 0;
}
.editor-ai-text ul { padding-left: var(--space-5); margin: 0 0 var(--space-3) 0; }
.editor-ai-text li { margin-bottom: 4px; }
.editor-ai-briefing-btn {
  display: inline-flex; align-items: center; gap: var(--space-2);
  padding: 8px 14px; border-radius: var(--r-md);
  background: var(--violet-50); color: var(--violet-700);
  border: 1px solid var(--violet-100); font-size: var(--fs-sm);
  font-weight: var(--fw-semibold); cursor: pointer; font-family: inherit;
}
.editor-ai-briefing-btn:hover { background: var(--violet-100); }
.editor-ai-briefing-section { margin-bottom: var(--space-5); }
.editor-ai-briefing-section-head {
  display: flex; align-items: center; gap: var(--space-2);
  font-family: var(--font-mono); font-size: var(--fs-2xs);
  text-transform: uppercase; letter-spacing: var(--tracking-wide);
  color: var(--fg-muted); font-weight: var(--fw-semibold);
  margin-bottom: var(--space-3);
}
.editor-ai-briefing-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: var(--space-2); }
.editor-ai-briefing-item {
  display: flex; align-items: center; gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  background: var(--bg-surface-2); border: 1px solid var(--border-subtle);
  border-radius: var(--r-sm); font-size: var(--fs-sm); color: var(--fg-primary);
}
.editor-ai-briefing-item-text { flex: 1; }
.editor-ai-briefing-insert {
  padding: 4px 10px; border-radius: var(--r-xs);
  background: var(--violet-50); color: var(--violet-700);
  border: 1px solid var(--violet-100); font-size: var(--fs-xs);
  font-weight: var(--fw-semibold); cursor: pointer; font-family: inherit;
}
.editor-ai-briefing-insert:hover { background: var(--violet-100); }
.editor-ai-briefing-copy {
  background: transparent; border: none; cursor: pointer;
  color: var(--fg-muted); padding: 4px; border-radius: var(--r-xs);
  font-size: var(--fs-md); line-height: 1;
}
.editor-ai-briefing-copy:hover { color: var(--fg-primary); background: var(--bg-hover); }

/* Keyword-Markierungen im TinyMCE-iframe (injected via kfqHighlightKw) */
/* wird ins iframe injiziert, hier nur Referenz-Style für Outside-Context */
.editor-mark, mark.editor-mark {
  background: transparent; color: inherit;
  font-weight: var(--fw-semibold); padding: 0 2px;
  border-radius: 2px; border-bottom: 2px solid transparent;
}
mark.editor-mark-ok   { border-bottom-color: var(--success-500); background: color-mix(in oklab, var(--success-500) 8%, transparent); }
mark.editor-mark-warn { border-bottom-color: var(--warning-500); background: color-mix(in oklab, var(--warning-500) 10%, transparent); }
mark.editor-mark-miss { border-bottom-color: var(--danger-500);  background: color-mix(in oklab, var(--danger-500) 8%, transparent); }

/* Chart-Section Legend */
.editor-chart-legend {
  display: flex; align-items: center; gap: var(--space-5);
  padding: var(--space-4) var(--space-6);
  border-top: 1px solid var(--border-subtle);
  border-bottom: 1px solid var(--border-subtle);
  background: var(--bg-surface-2);
  font-family: var(--font-mono); font-size: var(--fs-2xs);
  color: var(--fg-secondary); font-weight: var(--fw-semibold);
  text-transform: uppercase; letter-spacing: var(--tracking-wide);
  flex-wrap: wrap;
}
.editor-chart-legend-item { display: inline-flex; align-items: center; gap: var(--space-2); }
.editor-chart-legend-sw { display: inline-block; width: 14px; height: 14px; border-radius: 2px; }
.editor-chart-legend-sw-orange { background: var(--orange-500); }
.editor-chart-legend-sw-rose   { background: #f43f5e; border: 1px dashed #be123c; }
.editor-chart-legend-sw-blue   { background: var(--violet-500); }
.editor-chart-wrap { padding: var(--space-4) var(--space-5) var(--space-5); min-height: 360px; }

/* ============================================================
   LOADING OVERLAY (SEOlyze Polling-Analyse)
   ------------------------------------------------------------
   Dunkle Box mit animierten Steps — wird von loading.js
   (showLoadingAnalyse) aufgebaut und animiert. CSS nutzt
   überwiegend hardcoded Dark-Mode-Werte + V4-Orange-Token.
   ============================================================ */
#seolyze-loading-overlay {
  display: none; position: fixed; inset: 0;
  z-index: var(--z-modal, 9999);
  align-items: center; justify-content: center;
  font-family: var(--font-body);
  opacity: 0; transition: opacity .3s ease;
}
#seolyze-loading-overlay.visible { opacity: 1; }

.slo-backdrop {
  position: absolute; inset: 0;
  background: rgba(12, 16, 26, 0.88);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.slo-box {
  position: relative; z-index: 1;
  background: var(--neutral-800);
  border: 1px solid color-mix(in oklab, var(--orange-500) 25%, transparent);
  border-radius: var(--r-xl);
  padding: 36px 44px 32px;
  width: 420px; max-width: 92vw;
  box-shadow: 0 32px 80px rgba(0,0,0,.5),
              0 0 0 1px color-mix(in oklab, var(--orange-500) 10%, transparent);
}
.slo-logo-row {
  display: flex; align-items: center; gap: 10px; margin-bottom: 20px;
}
.slo-gear {
  width: 28px; height: 28px;
  color: var(--orange-500);
  animation: slo-spin 3s linear infinite;
  flex-shrink: 0;
}
@keyframes slo-spin { to { transform: rotate(360deg); } }
.slo-brand {
  font-family: var(--font-display);
  font-size: var(--fs-xl); font-weight: var(--fw-bold);
  color: var(--neutral-0);
  letter-spacing: var(--tracking-tight);
}
.slo-ai-badge {
  background: linear-gradient(135deg, var(--orange-500), var(--orange-700));
  color: var(--neutral-0);
  font-family: var(--font-mono);
  font-size: var(--fs-3xs); font-weight: var(--fw-bold);
  padding: 2px 7px; border-radius: var(--r-md);
  letter-spacing: var(--tracking-wide);
}
.slo-title {
  font-size: var(--fs-md); font-weight: var(--fw-semibold);
  color: var(--neutral-100); margin-bottom: 16px;
}
.slo-progress-track {
  height: 4px;
  background: rgba(255,255,255,.08);
  border-radius: var(--r-xs); overflow: hidden;
  margin-bottom: 24px;
}
.slo-progress-fill {
  height: 100%; width: 2%;
  background: linear-gradient(90deg, var(--orange-500), var(--orange-300));
  border-radius: var(--r-xs);
  transition: width .6s ease;
  box-shadow: 0 0 8px color-mix(in oklab, var(--orange-500) 60%, transparent);
}
.slo-steps-list {
  display: flex; flex-direction: column; gap: 8px; margin-bottom: 22px;
}
.slo-step {
  display: flex; align-items: center; gap: 12px;
  padding: 9px 14px; border-radius: var(--r-md);
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.05);
  transition: all .3s ease;
  opacity: 0.35;
}
.slo-step.active {
  opacity: 1;
  background: color-mix(in oklab, var(--orange-500) 12%, transparent);
  border-color: color-mix(in oklab, var(--orange-500) 35%, transparent);
  box-shadow: 0 0 0 1px color-mix(in oklab, var(--orange-500) 18%, transparent);
}
.slo-step.done {
  opacity: 0.55;
  background: color-mix(in oklab, var(--success-500) 8%, transparent);
  border-color: color-mix(in oklab, var(--success-500) 25%, transparent);
}
.slo-step-icon {
  font-size: 16px; width: 24px; text-align: center; flex-shrink: 0;
}
.slo-step-label {
  flex: 1;
  font-size: var(--fs-sm); font-weight: var(--fw-medium);
  color: var(--neutral-200);
}
.slo-step.active .slo-step-label { color: var(--neutral-0); }
.slo-step.done   .slo-step-label { color: var(--neutral-400); text-decoration: line-through; }
.slo-step-check {
  width: 18px; height: 18px; border-radius: var(--r-full);
  flex-shrink: 0;
  border: 2px solid rgba(255,255,255,.1);
  transition: all .3s;
}
.slo-step.active .slo-step-check {
  border-color: var(--orange-500);
  border-top-color: transparent;
  animation: slo-spin .8s linear infinite;
}
.slo-step.done .slo-step-check {
  border-color: var(--success-500);
  background: var(--success-500);
  position: relative;
}
.slo-step.done .slo-step-check::after {
  content: '';
  position: absolute;
  top: 2px; left: 4px;
  width: 6px; height: 4px;
  border-left: 2px solid var(--neutral-0);
  border-bottom: 2px solid var(--neutral-0);
  transform: rotate(-45deg);
}
.slo-hint {
  font-size: var(--fs-2xs); color: var(--neutral-400);
  text-align: center; line-height: var(--lh-normal);
}


/* ============================================================
   SAVED ANALYSES (Tab 8) + Shared Utilities
   ------------------------------------------------------------
   Stats-Grid, KPI-Tiles, URL-Cell, Text-Utils, Pager,
   Sort-Icons — auch von Wettbewerber/Keywords-Templates genutzt.
   ============================================================ */

/* Stats-Grid — 4 KPI-Tiles responsive */
.stats-grid {
  display: grid; gap: var(--space-4);
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}
.stats-grid-cols-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 900px) { .stats-grid-cols-4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .stats-grid-cols-4 { grid-template-columns: 1fr; } }

.kpi-tile {
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-lg);
  padding: var(--space-5);
  display: flex; flex-direction: column; gap: var(--space-2);
  box-shadow: var(--shadow-xs);
  position: relative;
}
.kpi-tile-head {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-3);
}
.kpi-tile-label {
  font-family: var(--font-mono); font-size: var(--fs-3xs);
  text-transform: uppercase; letter-spacing: var(--tracking-wide);
  color: var(--fg-muted); font-weight: var(--fw-semibold);
}
.kpi-tile-value {
  font-family: var(--font-display);
  font-size: var(--fs-2xl); font-weight: var(--fw-bold);
  letter-spacing: var(--tracking-tight); line-height: 1.1;
  color: var(--fg-primary); font-variant-numeric: tabular-nums;
  display: flex; align-items: baseline; gap: var(--space-2); flex-wrap: wrap;
}
.kpi-tile-ref {
  font-family: var(--font-mono); font-size: var(--fs-sm);
  color: var(--fg-muted); font-weight: var(--fw-medium);
  letter-spacing: 0;
}
.kpi-tile-foot {
  font-size: var(--fs-xs); color: var(--fg-muted);
  display: flex; align-items: center; gap: var(--space-2);
}

/* URL-Cell — duplicate def (zweite Stelle), gleiche Behandlung wie oben */
.url-cell { display: inline-flex; align-items: flex-start; gap: var(--space-2); max-width: 100%; min-width: 0; }
.url-cell-favicon {
  width: 16px; height: 16px; border-radius: 3px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--neutral-100); color: var(--fg-muted); flex: 0 0 auto;
}
/* .url-cell-host ist bereits oben definiert mit word-break — diese Cascade-Stelle nicht mehr überschreiben */

/* Text-Utilities (von Tables/Cards verwendet) */
.text-mono  { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.text-muted { color: var(--fg-muted); }

/* Pager */
.pager {
  display: flex; align-items: center; gap: 6px;
}
.pager .btn.disabled, .pager .btn[disabled] { opacity: .4; cursor: not-allowed; }
.pager-info  { font-size: var(--fs-sm); color: var(--fg-muted); }
.pager-nav   { display: flex; align-items: center; gap: 4px; }

/* card-body + card-ft kleine Ergaenzungen falls nicht vorhanden */
.card-body { padding: var(--space-5) var(--space-6); }
.card-ft {
  padding: var(--space-4) var(--space-6);
  border-top: 1px solid var(--border-subtle);
  background: var(--bg-surface-2);
  border-radius: 0 0 var(--r-lg) var(--r-lg);
}

/* Sort-Icon (Tabelle) */
.tbl th.sortable .sort-icon,
.kw-table th[data-sort] .sort-icon { font-size: .75em; opacity: .4; margin-left: 4px; }
.tbl th.sort-desc .sort-icon { opacity: 1; }
.tbl th.sort-asc  .sort-icon { opacity: 1; }

/* Saved-Analyses spezifische Styles */
.saved-row-fav  { color: var(--warning-500); }
.saved-row-nofav{ color: var(--fg-faint); }

/* Favoriten-Stern-Toggle */
.saved-fav-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; padding: 0;
  background: transparent; border: 1px solid transparent;
  border-radius: var(--r-sm); cursor: pointer;
  color: var(--neutral-200);
  transition: all var(--t-quick);
}
.saved-fav-btn:hover { color: var(--warning-500); background: var(--bg-hover); border-color: var(--border-subtle); }
.saved-fav-btn.is-fav { color: var(--warning-500); }
.saved-fav-btn.is-fav svg { fill: var(--warning-500); }
.saved-fav-btn svg { fill: none; stroke: currentColor; stroke-width: 1.6; transition: fill var(--t-quick); }
.saved-fav-btn.is-fav:hover { color: var(--warning-600); }

/* Sortierbare Spalten — Cursor + aktiver State */
.tbl th.sortable { cursor: pointer; user-select: none; white-space: nowrap; transition: color var(--t-quick); }
.tbl th.sortable:hover { color: var(--area-primary-fg); }
.tbl th.sort-active { color: var(--area-primary-fg); }
.saved-empty {
  padding: var(--space-8) var(--space-6); text-align: center;
  color: var(--fg-muted);
}
.saved-empty-icon {
  font-size: 48px; margin-bottom: var(--space-4);
  opacity: .5;
}
.saved-editor-badge {
  display: inline-flex; align-items: center;
  padding: 2px 8px; border-radius: var(--r-xs);
  font-family: var(--font-mono); font-size: var(--fs-3xs);
  font-weight: var(--fw-bold); letter-spacing: var(--tracking-wide);
  border: 1px solid transparent;
}
.saved-editor-badge.score-good { background: var(--success-50); color: var(--success-700); border-color: var(--success-100); }
.saved-editor-badge.score-mid  { background: var(--warning-50); color: var(--warning-700); border-color: var(--warning-100); }
.saved-editor-badge.score-bad  { background: var(--danger-50);  color: var(--danger-700);  border-color: var(--danger-100); }
.saved-editor-badge.score-neutral { background: var(--violet-50); color: var(--violet-700); border-color: var(--violet-100); }
.saved-action-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; padding: 0;
  background: transparent; border: 1px solid transparent;
  border-radius: var(--r-sm); cursor: pointer;
  color: var(--fg-muted); transition: all var(--t-quick);
}
.saved-action-btn:hover { background: var(--bg-hover); color: var(--fg-primary); border-color: var(--border-subtle); }
.saved-action-btn.is-danger:hover { color: var(--danger-600); border-color: var(--danger-100); background: var(--danger-50); }
.saved-row-deleted { opacity: .35; pointer-events: none; transition: opacity .3s; }

/* ============================================================
   W-FRAGEN-TOOL (Tab 10) — PAA-Question-Cards
   ------------------------------------------------------------
   Grid aus 6 W-Frage-Karten (Was/Wie/Warum/Wer/Wann/Welche +
   Weitere) mit Icon-Header, Frage-Liste + Copy-Button.
   ============================================================ */
.wfr-stats {
  display: flex; gap: var(--space-3); align-items: center; flex-wrap: wrap;
  margin-top: var(--space-5);
}
.wfr-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-5);
}
@media (max-width: 1100px) { .wfr-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 700px)  { .wfr-grid { grid-template-columns: 1fr; } }

.wfr-card {
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-xs);
  display: flex; flex-direction: column;
  overflow: hidden;
  transition: box-shadow var(--t-quick), border-color var(--t-quick);
}
.wfr-card:hover { box-shadow: var(--shadow-md); border-color: var(--border-default); }
.wfr-card-hd {
  display: flex; align-items: center; gap: var(--space-3);
  padding: var(--space-5) var(--space-5) var(--space-4);
  border-bottom: 1px solid var(--border-subtle);
}
.wfr-card-hd-ico {
  width: 36px; height: 36px; border-radius: var(--r-md);
  display: grid; place-items: center; flex: 0 0 auto;
}
.wfr-card-hd-ico.tint-info    { background: var(--info-50);    color: var(--info-700); }
.wfr-card-hd-ico.tint-success { background: var(--success-50); color: var(--success-700); }
.wfr-card-hd-ico.tint-warning { background: var(--warning-50); color: var(--warning-700); }
.wfr-card-hd-ico.tint-danger  { background: var(--danger-50);  color: var(--danger-700); }
.wfr-card-hd-ico.tint-violet  { background: var(--violet-50);  color: var(--violet-700); }
.wfr-card-hd-ico.tint-neutral { background: var(--neutral-100); color: var(--fg-secondary); }
.wfr-card-hd-title {
  font-family: var(--font-display); font-size: var(--fs-lg);
  font-weight: var(--fw-semibold); color: var(--fg-primary);
  letter-spacing: var(--tracking-tight);
}
.wfr-card-hd-sub {
  font-size: var(--fs-xs); color: var(--fg-muted);
  margin-top: 2px; font-family: var(--font-mono);
}
.wfr-card-hd-actions { margin-left: auto; }
.wfr-card-body { flex: 1; min-height: 120px; max-height: 460px; overflow-y: auto; }
.wfr-q {
  display: grid; grid-template-columns: 28px 1fr auto;
  align-items: flex-start; gap: var(--space-3);
  padding: var(--space-3) var(--space-5);
  border-bottom: 1px solid var(--border-subtle);
  transition: background var(--t-quick);
}
.wfr-q:last-child { border-bottom: none; }
.wfr-q:hover { background: var(--bg-hover); }
.wfr-q-num {
  font-family: var(--font-mono); font-size: var(--fs-2xs);
  font-weight: var(--fw-bold); margin-top: 2px;
  letter-spacing: var(--tracking-wide);
}
.wfr-q-num.tint-info    { color: var(--info-700); }
.wfr-q-num.tint-success { color: var(--success-700); }
.wfr-q-num.tint-warning { color: var(--warning-700); }
.wfr-q-num.tint-danger  { color: var(--danger-700); }
.wfr-q-num.tint-violet  { color: var(--violet-700); }
.wfr-q-num.tint-neutral { color: var(--fg-secondary); }
.wfr-q-body { min-width: 0; }
.wfr-q-text { font-size: var(--fs-sm); color: var(--fg-primary); line-height: 1.45; }
.wfr-q-meta {
  display: flex; gap: var(--space-3); align-items: center; margin-top: 4px;
  font-family: var(--font-mono); font-size: var(--fs-3xs);
  color: var(--fg-muted);
}
.wfr-q-meta .tag { height: 18px; padding: 0 6px; font-size: var(--fs-3xs); }
.wfr-q-copy {
  width: 28px; height: 28px; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  background: transparent; border: 1px solid transparent;
  border-radius: var(--r-sm); cursor: pointer;
  color: var(--fg-muted); flex: 0 0 auto;
  transition: all var(--t-quick);
}
.wfr-q-copy:hover { background: var(--bg-hover); color: var(--area-primary-fg); border-color: var(--border-subtle); }
.wfr-q-copy.is-copied { color: var(--success-700); background: var(--success-50); border-color: var(--success-100); }
.wfr-card-ft {
  padding: var(--space-3) var(--space-5);
  border-top: 1px solid var(--border-subtle);
  background: var(--bg-surface-2);
}
.wfr-card-ft-hint {
  font-size: var(--fs-xs); color: var(--fg-muted);
  font-family: var(--font-mono);
}
.wfr-card-empty {
  padding: var(--space-6);
  text-align: center; color: var(--fg-muted);
  font-size: var(--fs-xs);
}

.wfr-search-hero { margin-bottom: var(--space-6); }
.wfr-search-grid {
  display: grid; grid-template-columns: 1fr 170px 170px auto;
  gap: var(--space-4); align-items: end;
}
@media (max-width: 900px) { .wfr-search-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .wfr-search-grid { grid-template-columns: 1fr; } }


/* ============================================================
   SNIPPET-OPTIMIZER (Tab 11) — SERP-Preview + Editor
   ------------------------------------------------------------
   Zwei-Spalten-Layout: Editor links, Desktop+Mobile-Previews rechts.
   ============================================================ */
.snip-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-6);
  align-items: start;
}
@media (max-width: 1100px) { .snip-grid { grid-template-columns: 1fr; } }
/* MOBILE POLISH (2026-07-01): Track darf nicht unter Content-Minimum
   aufgehen (1fr min = auto -> 6px-Overflow bei 390px) */
@media (max-width: 820px) { .snip-grid { grid-template-columns: minmax(0, 1fr); } }

/* SERP-Preview-Karte (weißer Google-Hintergrund) */
.snip-preview {
  background: #fff;
  padding: 22px 24px;
  font-family: arial, sans-serif;
}
.snip-preview-head {
  display: flex; align-items: center; gap: 8px; margin-bottom: 2px;
}
.snip-preview-favicon {
  width: 26px; height: 26px;
  background: linear-gradient(135deg, var(--orange-500), var(--orange-700));
  border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 700; color: #fff;
  flex-shrink: 0;
}
.snip-preview-head-meta {
  display: flex; flex-direction: column; line-height: 1.2;
}
.snip-preview-site { font-size: 14px; color: #202124; font-weight: 500; }
.snip-preview-url  { font-size: 12px; color: #4d5156; }
.snip-preview-url .snip-preview-path { color: #9aa0a6; }
.snip-preview-title {
  display: block;
  color: #1a0dab;
  font-size: 20px; line-height: 1.3;
  text-decoration: none;
  margin: 8px 0 4px 0;
  cursor: pointer;
  word-break: break-word;
}
.snip-preview-title:hover { text-decoration: underline; }
.snip-preview-title strong { font-weight: 700; }
.snip-preview-desc {
  font-size: 14px; line-height: 1.58; color: #4d5156;
  margin: 2px 0 6px 0; word-break: break-word;
}
.snip-preview-desc strong { font-weight: 700; color: #202124; }
.snip-preview-rich {
  display: flex; align-items: center; gap: 8px;
  font-size: 13px; margin: 6px 0;
}
.snip-preview-rich-stars { color: #fbbc04; letter-spacing: 1px; }
.snip-preview-rich-meta  { color: #70757a; }
.snip-preview-sitelinks {
  display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 10px;
}
.snip-preview-sitelinks a {
  font-size: 14px; color: #1a0dab; text-decoration: none;
}
.snip-preview-sitelinks a:hover { text-decoration: underline; }

/* Mobile-Preview (340 px Phone-Frame) */
.snip-mobile-frame {
  background: #fff; width: 340px; max-width: 100%;
  border-radius: 18px; padding: 16px;
  border: 1px solid var(--border-subtle);
  font-family: arial, sans-serif;
  margin: 0 auto;
}
.snip-mobile-head {
  display: flex; align-items: center; gap: 6px; margin-bottom: 2px;
}
.snip-mobile-favicon {
  width: 20px; height: 20px;
  background: linear-gradient(135deg, var(--orange-500), var(--orange-700));
  border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 9px; font-weight: 700; color: #fff;
  flex-shrink: 0;
}
.snip-mobile-site { font-size: 12px; color: #4d5156; }
.snip-mobile-title {
  display: block; color: #1a0dab;
  font-size: 16px; line-height: 1.3;
  text-decoration: none; margin: 4px 0; font-weight: 400;
  word-break: break-word;
}
.snip-mobile-title strong { font-weight: 700; }
.snip-mobile-desc {
  font-size: 13px; line-height: 1.5; color: #4d5156;
  margin: 2px 0 6px 0; word-break: break-word;
}
.snip-mobile-desc strong { font-weight: 700; color: #202124; }
.snip-mobile-rich { font-size: 12px; color: #70757a; }

/* Character/Pixel-Counter rechts im Label */
.snip-counter {
  margin-left: auto;
  font-family: var(--font-mono); font-size: var(--fs-2xs);
  color: var(--fg-muted); font-weight: var(--fw-medium);
}
.snip-counter .ok   { color: var(--success-700); }
.snip-counter .warn { color: var(--warning-700); }
.snip-counter .bad  { color: var(--danger-700); }
.snip-counter .sep  { color: var(--fg-faint); margin: 0 4px; }

/* Progress-Bar unter Input */
.snip-bar {
  height: 4px; background: var(--neutral-100);
  border-radius: var(--r-pill); overflow: hidden; margin-top: 6px;
}
.snip-bar-fill {
  height: 100%; border-radius: var(--r-pill);
  transition: width var(--t-base), background var(--t-quick);
  background: var(--success-500);
}
.snip-bar-fill.warn { background: var(--warning-500); }
.snip-bar-fill.bad  { background: var(--danger-500); }

/* Score-Card */
.snip-score-grid {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: var(--space-4); align-items: center;
}
.snip-score-checklist {
  display: flex; flex-direction: column; gap: var(--space-3);
  margin-top: var(--space-4);
  padding-top: var(--space-4); border-top: 1px solid var(--border-subtle);
}
.snip-score-check {
  display: flex; align-items: center; gap: var(--space-3);
  font-size: var(--fs-sm); color: var(--fg-secondary);
}
.snip-score-check.ok   { color: var(--success-700); }
.snip-score-check.warn { color: var(--warning-700); }
.snip-score-check.bad  { color: var(--danger-700); }
.snip-score-check.ok .snip-score-check-ico   { color: var(--success-500); }
.snip-score-check.warn .snip-score-check-ico { color: var(--warning-500); }
.snip-score-check.bad .snip-score-check-ico  { color: var(--danger-500); }

/* Divider mit Label */
.divider-labeled {
  display: flex; align-items: center; gap: var(--space-3);
  font-family: var(--font-mono); font-size: var(--fs-2xs);
  color: var(--fg-muted); text-transform: uppercase;
  letter-spacing: var(--tracking-wide); font-weight: var(--fw-semibold);
}
.divider-labeled::before,
.divider-labeled::after {
  content: ''; flex: 1; height: 1px;
  background: var(--border-subtle);
}


/* ============================================================
   ONPAGE-BEREICH (Tab 01–04) — Overview, Detail, Reading, DC
   ------------------------------------------------------------
   Kompakter Shared-CSS-Block für alle 4 OnPage-Views.
   ============================================================ */
.op-card-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-4);
}
@media (max-width: 1100px) { .op-card-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 700px)  { .op-card-grid { grid-template-columns: 1fr; } }

.op-url-card {
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-lg);
  overflow: hidden;
  text-decoration: none; color: inherit;
  display: flex; flex-direction: column;
  transition: transform var(--t-quick), box-shadow var(--t-quick);
}
.op-url-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); text-decoration: none; }
.op-url-card-hd {
  padding: var(--space-4) var(--space-5);
  display: flex; align-items: flex-start; gap: var(--space-3);
  border-bottom: 1px solid var(--border-subtle);
}
.op-grade-badge {
  display: inline-flex; align-items: center; justify-content: center;
  width: 48px; height: 48px; border-radius: var(--r-md);
  color: #fff; font-family: var(--font-display);
  font-weight: var(--fw-bold); font-size: var(--fs-xl);
  flex: 0 0 auto;
}
.op-pill-row {
  padding: var(--space-3) var(--space-5);
  display: flex; gap: 6px; flex-wrap: wrap;
  border-bottom: 1px solid var(--border-subtle);
}
.op-pill {
  display: inline-flex; align-items: center; gap: 3px;
  padding: 2px 8px; border-radius: var(--r-pill);
  font-family: var(--font-mono); font-size: 10px; font-weight: var(--fw-bold);
}
.op-pill.ok    { background: var(--success-50);  color: var(--success-700); }
.op-pill.warn  { background: var(--warning-50);  color: var(--warning-700); }
.op-pill.bad   { background: var(--danger-50);   color: var(--danger-700); }
.op-pill.info  { background: var(--info-50);     color: var(--info-700); }

.op-stats-mini {
  padding: var(--space-4) var(--space-5);
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: var(--space-3);
  border-bottom: 1px solid var(--border-subtle);
}
.op-stat-mini { text-align: center; }
.op-stat-mini-val {
  font-family: var(--font-mono); font-size: var(--fs-md);
  font-weight: var(--fw-bold); line-height: 1;
}
.op-stat-mini-lbl {
  font-size: 9px; color: var(--fg-muted);
  text-transform: uppercase; letter-spacing: var(--tracking-wide);
  font-weight: var(--fw-semibold); margin-top: 4px;
}
.op-score-track {
  height: 4px; background: var(--neutral-100);
  border-radius: var(--r-pill); overflow: hidden;
}
.op-score-track > span { display: block; height: 100%; border-radius: var(--r-pill); transition: width var(--t-base); }

/* Heatmap (Duplicate Content) */
.dc-heatmap {
  width: 100%; border-collapse: separate; border-spacing: 3px;
  font-size: var(--fs-xs); font-family: var(--font-mono);
}
.dc-heatmap th { padding: 4px; font-weight: var(--fw-bold); text-align: center; }
.dc-heatmap td { padding: 0; }
.dc-cell {
  display: flex; align-items: center; justify-content: center;
  aspect-ratio: 1;
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-xs);
  font-weight: var(--fw-semibold); font-size: 10px;
}
.dc-cell.empty { background: var(--bg-surface-2); color: var(--fg-faint); opacity: .4; }
.dc-cell.crit  { background: var(--danger-500);   color: #fff; border-color: var(--danger-600); }
.dc-cell.mod   { background: var(--warning-500);  color: #fff; border-color: var(--warning-600); }
.dc-cell.low3  { background: var(--success-100);  color: var(--success-700); border-color: var(--success-300); }
.dc-cell.low1  { background: var(--success-50);   color: var(--success-700); border-color: var(--success-200); }
.dc-cell.zero  { background: var(--bg-surface);   color: var(--fg-muted); }

/* Heading-Tree (Detail) */
.op-h-tree { }
.op-h-row {
  display: flex; align-items: center; gap: 10px;
  padding: 6px var(--space-3);
  border-left: 1px dashed var(--border-default);
  margin-left: 14px;
  font-size: var(--fs-xs);
}
.op-h-row.h1 {
  margin-left: 0; border-left: 3px solid var(--success-500);
  background: color-mix(in srgb, var(--success-50) 60%, transparent);
  border-radius: 0 var(--r-xs) var(--r-xs) 0;
  padding: var(--space-3);
}
.op-h-tag {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; border-radius: var(--r-xs);
  background: var(--bg-surface-2); color: var(--fg-muted);
  font-family: var(--font-mono); font-weight: var(--fw-bold); font-size: 9px;
  flex: 0 0 auto;
}
.op-h-row.h1 .op-h-tag { background: var(--success-500); color: #fff; width: 28px; height: 28px; font-size: var(--fs-xs); }
.op-h-row.h2 .op-h-tag { background: var(--area-primary-soft); color: var(--area-primary-fg); }
.op-h-row.h3 .op-h-tag { background: var(--info-50); color: var(--info-700); }

/* Collapsible Heading / Link-List (OnPage-Detail) */
.op-coll {
  border-bottom: 1px solid var(--border-subtle);
}
.op-coll:last-child { border-bottom: none; }
.op-coll-sum {
  list-style: none;
  display: flex; align-items: center; gap: var(--space-3);
  padding: 10px 2px;
  cursor: pointer;
  font-size: var(--fs-xs);
  transition: background var(--t-quick);
}
.op-coll-sum::-webkit-details-marker { display: none; }
.op-coll-sum:hover { background: var(--bg-surface-2); }
.op-coll-chev {
  width: 14px; height: 14px; color: var(--fg-muted);
  transition: transform var(--t-quick);
  flex-shrink: 0;
}
.op-coll[open] > .op-coll-sum .op-coll-chev { transform: rotate(90deg); }
.op-coll-tag {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 26px; height: 22px; padding: 0 6px; border-radius: var(--r-xs);
  background: var(--bg-surface-2); color: var(--fg-muted);
  font-family: var(--font-mono); font-weight: var(--fw-bold); font-size: 10px;
  flex-shrink: 0;
}
.op-coll-tag.h1 { background: var(--success-500); color: #fff; }
.op-coll-tag.h2 { background: var(--area-primary-soft); color: var(--area-primary-fg); }
.op-coll-tag.h3 { background: var(--info-50); color: var(--info-700); }
.op-coll-tag.h4, .op-coll-tag.h5, .op-coll-tag.h6 { background: var(--neutral-100); }
.op-coll-tag.strong { background: var(--warning-50); color: var(--warning-700); }
.op-coll-tag.linkin  { background: var(--info-50); color: var(--info-700); }
.op-coll-tag.linkext { background: var(--violet-50, var(--info-50)); color: var(--violet-700, var(--info-700)); }
.op-coll-lbl {
  flex: 1;
  font-weight: var(--fw-semibold);
  color: var(--fg-secondary);
}
.op-coll-cnt {
  font-family: var(--font-mono); font-size: var(--fs-2xs);
  color: var(--fg-muted); font-weight: var(--fw-semibold);
}
.op-coll-body {
  padding: 4px 0 var(--space-3) 32px;
  max-height: 320px; overflow-y: auto;
}
.op-coll-item {
  padding: 6px 10px; margin: 2px 0;
  background: var(--bg-surface-2); border-radius: var(--r-xs);
  font-size: var(--fs-xs); color: var(--fg-primary);
  line-height: 1.45; word-break: break-word;
}
.op-coll-item-link {
  display: block; text-decoration: none; color: var(--fg-primary);
  transition: background var(--t-quick);
}
.op-coll-item-link:hover { background: var(--area-primary-soft); text-decoration: none; }
.op-coll-item-href {
  font-family: var(--font-mono); font-size: 10px; color: var(--fg-muted);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  margin-top: 2px;
}

/* Inline-Copy-Button im Summary-Row */
.op-coll-copy {
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 22px; padding: 0;
  margin: 0 4px 0 0;
  border: 1px solid var(--border-subtle);
  background: var(--bg-surface);
  color: var(--fg-muted);
  border-radius: var(--r-xs);
  cursor: pointer; flex-shrink: 0;
  transition: background var(--t-quick), color var(--t-quick), border-color var(--t-quick);
}
.op-coll-copy:hover {
  background: var(--area-primary-soft);
  color: var(--area-primary-fg);
  border-color: var(--area-primary);
}
.op-coll-copy.is-ok {
  background: var(--success-500);
  color: #fff;
  border-color: var(--success-500);
}
.op-coll-copy.is-ok .op-coll-copy-ic-copy { display: none; }
.op-coll-copy:not(.is-ok) .op-coll-copy-ic-check { display: none; }

/* "Alle kopieren" Mega-Button oben auf der Card */
.op-copy-all {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px; border-radius: var(--r-xs);
  border: 1px solid var(--border-subtle);
  background: var(--bg-surface); color: var(--fg-secondary);
  font-family: var(--font-body); font-size: var(--fs-2xs);
  font-weight: var(--fw-semibold);
  cursor: pointer;
  transition: background var(--t-quick), color var(--t-quick), border-color var(--t-quick);
}
.op-copy-all:hover {
  background: var(--area-primary-soft);
  color: var(--area-primary-fg);
  border-color: var(--area-primary);
}
.op-copy-all.is-ok {
  background: var(--success-500); color: #fff; border-color: var(--success-500);
}
.op-copy-all.is-ok .op-copy-all-ic-copy { display: none; }
.op-copy-all:not(.is-ok) .op-copy-all-ic-check { display: none; }

/* ============================================================
   LANDINGPAGE-ÜBERWACHUNG (SERP-Radar)
   ============================================================ */
.lp-winloss-row {
  padding: var(--space-3) var(--space-4);
  display: grid;
  grid-template-columns: 28px 1fr auto auto auto;
  gap: var(--space-3);
  align-items: center;
  border-bottom: 1px solid var(--border-subtle);
}
.lp-winloss-row:last-child { border-bottom: none; }
.lp-winloss-rank {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; border-radius: 50%;
  font-family: var(--font-mono); font-weight: var(--fw-bold); font-size: 10px;
  background: var(--bg-surface-2); color: var(--fg-muted);
}
.lp-winloss-rank.is-first-up   { background: var(--success-500); color: #fff; }
.lp-winloss-rank.is-first-down { background: var(--danger-500);  color: #fff; }
.lp-col-label {
  font-family: var(--font-mono); font-size: 10px; color: var(--fg-faint);
  text-transform: uppercase; letter-spacing: var(--tracking-wide);
  font-weight: var(--fw-bold);
}
.lp-col-val {
  font-family: var(--font-mono); font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
}
.lp-delta-pill {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 4px 10px; border-radius: var(--r-pill);
  color: #fff; font-family: var(--font-mono); font-size: 10px;
  font-weight: var(--fw-bold);
}

/* Portfolio-Chart Period-Selector (read-only V1) */
.lp-periods {
  display: inline-flex; gap: 4px;
  background: var(--bg-surface-2); padding: 3px;
  border-radius: var(--r-sm); border: 1px solid var(--border-subtle);
  font-size: var(--fs-xs);
}
.lp-period {
  padding: 4px 10px; border-radius: var(--r-xs);
  background: transparent; color: var(--fg-muted);
  border: 0; cursor: pointer;
  font-weight: var(--fw-medium);
  font-family: var(--font-body);
}
.lp-period.is-active {
  background: var(--bg-surface); color: var(--fg-primary);
  font-weight: var(--fw-semibold);
  box-shadow: 0 1px 2px rgba(0,0,0,0.06);
}

/* Website-Card Keyword-Row */
.lp-kw-row {
  border-bottom: 1px solid var(--border-subtle);
}
.lp-kw-row:last-child { border-bottom: none; }
.lp-kw-sum {
  list-style: none;
  padding: var(--space-4) var(--space-5);
  display: grid;
  grid-template-columns: minmax(0, 1fr) 54px 54px 64px 120px 76px 112px;
  gap: var(--space-4);
  align-items: center;
  cursor: pointer;
  transition: background var(--t-quick);
}
@media (max-width: 1100px) {
  .lp-kw-sum { grid-template-columns: minmax(0, 1fr) 48px 48px 58px 100px 70px 100px; gap: var(--space-3); }
}
@media (max-width: 900px) {
  .lp-kw-sum {
    grid-template-columns: minmax(0, 1fr) auto auto auto;
    grid-template-rows: auto auto;
    row-gap: var(--space-3);
  }
  .lp-kw-sum > *:nth-child(5),
  .lp-kw-sum > *:nth-child(6),
  .lp-kw-sum > *:nth-child(7) { grid-row: 2; }
  .lp-kw-sum > *:nth-child(5) { grid-column: 1 / 4; }
}
.lp-kw-sum::-webkit-details-marker { display: none; }
.lp-kw-sum:hover { background: color-mix(in srgb, var(--area-primary-soft) 20%, transparent); }
.lp-kw-lang {
  display: inline-flex; padding: 2px 6px;
  background: var(--bg-surface-2); color: var(--fg-muted);
  border-radius: var(--r-xs);
  font-family: var(--font-mono); font-size: 9px; font-weight: var(--fw-bold);
  text-transform: uppercase;
}
.lp-kw-badge {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 34px; padding: 4px 10px;
  border-radius: var(--r-pill);
  font-family: var(--font-mono); font-size: var(--fs-xs); font-weight: var(--fw-bold);
}
.lp-kw-badge.is-top1   { background: var(--success-500); color: #fff; }
.lp-kw-badge.is-top3   { background: var(--success-100); color: var(--success-700); }
.lp-kw-badge.is-top10  { background: var(--success-50);  color: var(--success-700); }
.lp-kw-badge.is-top30  { background: var(--warning-50);  color: var(--warning-700); }
.lp-kw-badge.is-flop   { background: var(--bg-surface-2); color: var(--fg-muted); }
.lp-kw-badge.is-none   { background: var(--bg-surface-2); color: var(--fg-faint); }
.lp-kw-chevron {
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; border-radius: 50%;
  background: var(--bg-surface-2); color: var(--fg-muted);
  transition: transform var(--t-quick), background var(--t-quick);
}
details[open] > .lp-kw-sum .lp-kw-chevron { transform: rotate(90deg); background: var(--area-primary-soft); color: var(--area-primary-fg); }
.lp-kw-spark { display: block; }
.lp-kw-body {
  padding: var(--space-4) var(--space-5) var(--space-5);
  background: var(--bg-surface-2);
}
.lp-hero-action {
  padding: 6px 10px;
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-xs);
  font-family: var(--font-body); font-size: var(--fs-xs);
  color: var(--fg-secondary); cursor: pointer;
  display: inline-flex; align-items: center; gap: 4px;
  transition: background var(--t-quick), color var(--t-quick), border-color var(--t-quick);
}
.lp-hero-action:hover {
  background: var(--area-primary-soft);
  border-color: var(--area-primary);
  color: var(--area-primary-fg);
}
.lp-hero-action.is-danger:hover {
  background: var(--danger-50);
  border-color: var(--danger-300, var(--danger-500));
  color: var(--danger-700);
}

/* "Neuer Monitor"-Drawer Form (inline) — Card-Optik wie WDF+IDF */
.lp-add-card {
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-lg);
  background: var(--bg-surface);
  overflow: hidden;
  margin-bottom: var(--space-7);
  box-shadow: var(--shadow-sm);
}
.lp-add-card-hd {
  display: flex; align-items: center; gap: var(--space-3);
  padding: var(--space-4) var(--space-5);
  background: color-mix(in srgb, var(--area-primary-soft) 40%, transparent);
  border-bottom: 1px solid var(--border-subtle);
}
.lp-add-card-hd-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; border-radius: var(--r-sm);
  background: var(--area-primary); color: #fff;
}
.lp-add-card-hd-title {
  margin: 0; font-family: var(--font-display);
  font-size: var(--fs-md); font-weight: var(--fw-semibold);
  color: var(--fg-primary);
}
.lp-add-card-hd-sub {
  margin: 2px 0 0; font-size: var(--fs-xs); color: var(--fg-muted);
}
.lp-add-card-body {
  padding: var(--space-5) var(--space-6);
}
.lp-add-grid {
  display: grid;
  grid-template-columns: 1.3fr 1.3fr 1fr 1fr;
  gap: var(--space-5);
  margin-bottom: var(--space-5);
}
@media (max-width: 1100px) { .lp-add-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px)  { .lp-add-grid { grid-template-columns: 1fr; } }
.lp-add-grid .field { min-width: 0; }
.lp-add-card-actions {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-3); padding-top: var(--space-4);
  border-top: 1px solid var(--border-subtle);
  flex-wrap: wrap;
}
.lp-add-card-meta {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: var(--fs-xs); color: var(--fg-muted);
}
/* Inline-Spinner im Button (für kurze AJAX-Aktionen) */
.btn[data-loading="1"] { position: relative; pointer-events: none; opacity: .75; }
.btn[data-loading="1"] .btn-label { visibility: hidden; }
.btn[data-loading="1"]::after {
  content: ''; position: absolute;
  top: 50%; left: 50%;
  width: 16px; height: 16px;
  margin: -8px 0 0 -40px;
  border: 2px solid currentColor; border-right-color: transparent;
  border-radius: 50%;
  animation: lpSpin .7s linear infinite;
  opacity: .9;
}
.btn[data-loading="1"][data-loading-text]::before {
  content: attr(data-loading-text);
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  padding-left: 22px;
  font: inherit; color: inherit;
}
@keyframes lpSpin { to { transform: rotate(360deg); } }

/* Toast-Stack (bottom-right) */
#lp-toast-stack {
  position: fixed; bottom: 24px; right: 24px;
  display: flex; flex-direction: column; gap: 10px;
  z-index: 10000; max-width: 360px;
  pointer-events: none;
}
.lp-toast {
  pointer-events: auto;
  display: flex; align-items: flex-start; gap: 10px;
  padding: 12px 14px;
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-left: 4px solid var(--area-primary);
  border-radius: var(--r-md);
  box-shadow: 0 14px 36px rgba(0,0,0,.12), 0 4px 12px rgba(0,0,0,.06);
  font-size: var(--fs-sm); color: var(--fg-primary);
  transform: translateX(400px); opacity: 0;
  transition: transform .28s var(--ease-out), opacity .28s var(--ease-out);
  min-width: 260px;
}
.lp-toast.is-in { transform: translateX(0); opacity: 1; }
.lp-toast.is-out { transform: translateX(400px); opacity: 0; }
.lp-toast-ic {
  flex-shrink: 0; width: 24px; height: 24px;
  border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--area-primary-soft); color: var(--area-primary-fg);
}
.lp-toast--success { border-left-color: var(--success-500); }
.lp-toast--success .lp-toast-ic { background: var(--success-50); color: var(--success-700); }
.lp-toast--error   { border-left-color: var(--danger-500); }
.lp-toast--error .lp-toast-ic   { background: var(--danger-50); color: var(--danger-700); }
.lp-toast--info    { border-left-color: var(--info-500); }
.lp-toast--info .lp-toast-ic    { background: var(--info-50); color: var(--info-700); }
.lp-toast-body { flex: 1; min-width: 0; }
.lp-toast-title {
  font-weight: var(--fw-semibold); font-size: var(--fs-sm);
  margin-bottom: 2px; color: var(--fg-primary);
}
.lp-toast-desc {
  font-size: var(--fs-xs); color: var(--fg-secondary); line-height: 1.45;
  word-break: break-word;
}
.lp-toast-close {
  flex-shrink: 0; background: transparent; border: 0;
  color: var(--fg-muted); cursor: pointer;
  padding: 2px; border-radius: var(--r-xs);
  display: inline-flex; align-items: center; justify-content: center;
}
.lp-toast-close:hover { background: var(--bg-surface-2); color: var(--fg-primary); }

.lp-empty-state {
  padding: var(--space-8) var(--space-5);
  text-align: center;
}

/* ============================================================
   TEXTER-ZUGÄNGE (Tool 13)
   ============================================================ */
.tx-2col {
  display: grid; grid-template-columns: 1fr 360px;
  gap: var(--space-6);
}
@media (max-width: 1200px) { .tx-2col { grid-template-columns: 1fr; } }

.tx-table {
  width: 100%; border-collapse: collapse;
  font-size: var(--fs-xs);
}
.tx-table thead th {
  text-align: left; padding: var(--space-3) var(--space-4);
  font-family: var(--font-mono); font-size: 10px;
  text-transform: uppercase; letter-spacing: var(--tracking-wide);
  color: var(--fg-muted); font-weight: var(--fw-semibold);
  border-bottom: 1px solid var(--border-subtle);
  background: var(--bg-surface-2);
}
.tx-table tbody tr:nth-child(even) { background: color-mix(in srgb, var(--bg-surface-2) 40%, transparent); }
.tx-table tbody td {
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--border-subtle);
  vertical-align: middle;
}
.tx-table tbody tr:last-child td { border-bottom: none; }
.tx-cell-kw {
  display: flex; align-items: center; gap: var(--space-3);
  min-width: 0;
}
.tx-avatar {
  flex-shrink: 0;
  width: 36px; height: 36px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-weight: var(--fw-bold); font-size: 12px;
  background: var(--violet-100, color-mix(in srgb, var(--area-primary) 20%, transparent));
  color: var(--violet-700, var(--area-primary-fg));
  position: relative;
}
.tx-avatar-dot {
  position: absolute; bottom: -2px; right: -2px;
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--success-500); border: 2px solid var(--bg-surface);
}
/* Klickbare Share-Link-Zelle: ganze Zelle = "Link kopieren" */
.tx-link-copy {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px;
  border: 1px solid var(--border-subtle);
  background: var(--bg-surface-2);
  border-radius: var(--r-xs);
  font-family: var(--font-mono); font-size: 11px;
  color: var(--fg-secondary);
  cursor: pointer;
  max-width: 100%; overflow: hidden;
  transition: border-color var(--t-quick), background var(--t-quick), color var(--t-quick);
}
.tx-link-copy:hover {
  background: var(--area-primary-soft);
  border-color: var(--area-primary);
  color: var(--area-primary-fg);
}
.tx-link-copy.is-ok {
  background: var(--success-50);
  border-color: var(--success-500);
  color: var(--success-700);
}
.tx-link-copy-text {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  min-width: 0;
}
.tx-action-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; border-radius: var(--r-xs);
  background: transparent; color: var(--fg-muted);
  border: 1px solid transparent; cursor: pointer;
  transition: background var(--t-quick), color var(--t-quick), border-color var(--t-quick);
}
.tx-action-btn:hover {
  background: var(--bg-surface-2);
  color: var(--fg-primary);
  border-color: var(--border-subtle);
}
.tx-action-btn.is-danger:hover {
  background: var(--danger-50); color: var(--danger-700); border-color: var(--danger-300, var(--danger-500));
}
.tx-action-btn.is-success:hover {
  background: var(--success-50); color: var(--success-700); border-color: var(--success-500);
}
.tx-status-badge {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 8px; border-radius: var(--r-pill);
  font-family: var(--font-mono); font-size: 10px; font-weight: var(--fw-bold);
  white-space: nowrap;
}
.tx-status-badge.success { background: var(--success-50);  color: var(--success-700); }
.tx-status-badge.warning { background: var(--warning-50);  color: var(--warning-700); }
.tx-status-badge.danger  { background: var(--danger-50);   color: var(--danger-700); }
.tx-status-badge.neutral { background: var(--bg-surface-2); color: var(--fg-muted); }

.tx-perm-table {
  width: 100%; border-collapse: collapse; font-size: var(--fs-xs);
}
.tx-perm-table th, .tx-perm-table td {
  padding: 8px 10px;
  border-bottom: 1px solid var(--border-subtle);
  text-align: left;
}
.tx-perm-table tr:last-child th, .tx-perm-table tr:last-child td { border-bottom: none; }
.tx-perm-table th { font-size: 10px; color: var(--fg-muted); text-transform: uppercase; letter-spacing: var(--tracking-wide); font-weight: var(--fw-semibold); }
.tx-perm-table td { vertical-align: middle; }
.tx-perm-col-center { text-align: center !important; width: 52px; }
.tx-perm-yes { color: var(--success-600); display:inline-flex; }
.tx-perm-no  { color: var(--neutral-300); display:inline-flex; }

.tx-share-card {
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-lg);
  background: var(--bg-surface);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}
.tx-share-card-hd {
  display: flex; align-items: center; gap: var(--space-3);
  padding: var(--space-4) var(--space-5);
  background: color-mix(in srgb, var(--area-primary-soft) 40%, transparent);
  border-bottom: 1px solid var(--border-subtle);
}
.tx-share-card-body { padding: var(--space-5); }
.tx-share-card-ft {
  padding: var(--space-4) var(--space-5);
  border-top: 1px solid var(--border-subtle);
  background: var(--bg-surface-2);
}

.tx-seg-group {
  display: inline-flex; width: 100%;
  background: var(--bg-surface-2);
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-sm);
  padding: 3px;
  gap: 2px;
}
.tx-seg-btn {
  flex: 1;
  padding: 6px 8px;
  border: 0; background: transparent;
  border-radius: var(--r-xs);
  font: inherit; font-size: var(--fs-xs);
  color: var(--fg-muted); cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; gap: 4px;
  transition: background var(--t-quick), color var(--t-quick);
}
.tx-seg-btn:hover { background: color-mix(in srgb, var(--area-primary-soft) 30%, transparent); }
.tx-seg-btn.is-active {
  background: var(--bg-surface); color: var(--fg-primary);
  font-weight: var(--fw-semibold);
  box-shadow: 0 1px 2px rgba(0,0,0,.06);
}
.tx-seg-btn[disabled] { opacity: .55; cursor: not-allowed; }

/* Modal für E-Mail-Einladung (zentriert, Backdrop, ESC/Click-Outside) */
.tx-modal-backdrop {
  position: fixed; inset: 0;
  background: color-mix(in srgb, #000 45%, transparent);
  display: flex; align-items: center; justify-content: center;
  z-index: 9999;
  padding: var(--space-4);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  animation: txFadeIn .18s var(--ease-out);
}
@keyframes txFadeIn { from { opacity: 0; } to { opacity: 1; } }
.tx-modal {
  background: var(--bg-surface);
  border-radius: var(--r-lg);
  box-shadow: 0 24px 72px rgba(0,0,0,.25), 0 8px 24px rgba(0,0,0,.12);
  max-width: 520px; width: 100%;
  max-height: calc(100vh - 80px);
  display: flex; flex-direction: column;
  overflow: hidden;
  animation: txModalIn .22s var(--ease-out);
}
@keyframes txModalIn {
  from { opacity: 0; transform: translateY(8px) scale(.98); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
.tx-modal-hd {
  display: flex; align-items: center; gap: var(--space-3);
  padding: var(--space-4) var(--space-5);
  border-bottom: 1px solid var(--border-subtle);
  background: color-mix(in srgb, var(--area-primary-soft) 40%, transparent);
}
.tx-modal-close {
  margin-left: auto;
  width: 32px; height: 32px; border-radius: var(--r-xs);
  background: transparent; color: var(--fg-muted);
  border: 0; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  transition: background var(--t-quick), color var(--t-quick);
}
.tx-modal-close:hover { background: var(--bg-surface-2); color: var(--fg-primary); }
.tx-modal-body {
  padding: var(--space-5) var(--space-6);
  overflow-y: auto;
  display: flex; flex-direction: column; gap: var(--space-4);
}
.tx-modal-body .field { margin: 0; }
.tx-modal-body textarea.input {
  resize: vertical; min-height: 80px; padding: 10px 12px;
  font-family: var(--font-body); font-size: var(--fs-sm);
}
.tx-modal-ft {
  display: flex; justify-content: flex-end; gap: var(--space-3);
  padding-top: var(--space-3);
  margin-top: var(--space-2);
  border-top: 1px solid var(--border-subtle);
}

/* ============================================================
   STOPWORDS-EDITOR (Tool 14)
   ============================================================ */
.sw-2col {
  display: grid; grid-template-columns: 1fr 340px;
  gap: var(--space-6);
}
@media (max-width: 1200px) { .sw-2col { grid-template-columns: 1fr; } }

.sw-chip-box {
  min-height: 380px;
  padding: var(--space-4);
  background: var(--bg-surface-2);
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-md);
  display: flex; flex-wrap: wrap; gap: 6px;
  align-content: flex-start;
}
.sw-chip-box.is-empty {
  align-items: center; justify-content: center;
  flex-direction: column; gap: var(--space-3);
}
.sw-chip {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 4px 6px 4px 10px;
  border: 1px solid var(--border-subtle);
  background: var(--bg-surface);
  border-radius: var(--r-pill);
  font-size: var(--fs-xs); color: var(--fg-primary);
  font-family: var(--font-body);
  transition: background var(--t-quick), border-color var(--t-quick), transform var(--t-quick);
  cursor: default;
  user-select: none;
  max-width: 100%;
}
.sw-chip:hover { border-color: var(--area-primary); }
.sw-chip.is-own {
  background: var(--violet-50, var(--area-primary-soft));
  border-color: var(--violet-200, var(--area-primary));
  color: var(--violet-700, var(--area-primary-fg));
}
.sw-chip-text {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  max-width: 220px;
}
.sw-chip-x {
  display: inline-flex; align-items: center; justify-content: center;
  width: 18px; height: 18px; border-radius: 50%;
  border: 0; background: transparent;
  color: currentColor; opacity: .55;
  cursor: pointer;
  margin-left: 2px;
  transition: background var(--t-quick), opacity var(--t-quick);
}
.sw-chip-x:hover {
  background: color-mix(in srgb, var(--danger-500) 20%, transparent);
  color: var(--danger-700);
  opacity: 1;
}
.sw-chip.is-removing {
  opacity: .3;
  transform: scale(.85);
  pointer-events: none;
}

/* Add-Input + Add-Button (Zeile unter der Chip-Box) */
.sw-add-row {
  display: flex; gap: 8px; align-items: stretch;
  margin-top: var(--space-4);
}
.sw-add-input {
  flex: 1; min-width: 0;
}
.sw-tip {
  display: flex; align-items: center; gap: 6px;
  margin-top: 10px;
  font-size: var(--fs-2xs); color: var(--fg-muted);
}

/* "Weitere Sprache"-Dropdown in den Sprach-Tabs (JS-basiert via hidden-Attribut) */
.sw-more-langs {
  position: relative;
}
.sw-more-langs > button.sw-lang-tab {
  cursor: pointer;
}
.sw-more-langs-menu[hidden] { display: none !important; }
.sw-more-langs-menu {
  position: absolute; top: calc(100% + 4px); left: 0;
  min-width: 220px; max-height: 320px; overflow-y: auto;
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-md);
  box-shadow: 0 12px 32px rgba(0,0,0,.12), 0 4px 12px rgba(0,0,0,.04);
  padding: 4px;
  z-index: 100;
}
.sw-more-langs-item {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px;
  border-radius: var(--r-xs);
  font-size: var(--fs-xs);
  color: var(--fg-primary);
  text-decoration: none;
  transition: background var(--t-quick);
}
.sw-more-langs-item:hover { background: var(--bg-surface-2); text-decoration: none; }
.sw-more-langs-item.is-active { background: var(--area-primary-soft); color: var(--area-primary-fg); font-weight: var(--fw-semibold); }
.sw-more-langs-code {
  font-family: var(--font-mono); font-weight: var(--fw-bold); font-size: 10px;
  padding: 2px 6px; background: var(--bg-surface-2); border-radius: var(--r-xs);
  flex-shrink: 0; letter-spacing: var(--tracking-wide);
}
.sw-more-langs-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sw-more-langs-count {
  font-family: var(--font-mono); font-size: 10px;
  padding: 1px 6px; border-radius: var(--r-pill);
  background: var(--area-primary-soft); color: var(--area-primary-fg);
}

/* Color-Picker-Row im Varianten-Modal: natives Color-Picker-Feld + Preset-Dots */
.sw-color-picker-row {
  display: flex; align-items: center; gap: 10px;
  flex-wrap: wrap;
}
.sw-color-picker {
  flex-shrink: 0;
  width: 46px; height: 38px;
  padding: 2px;
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-xs);
  background: var(--bg-surface);
  cursor: pointer;
  overflow: hidden;
}
.sw-color-picker::-webkit-color-swatch-wrapper { padding: 0; }
.sw-color-picker::-webkit-color-swatch { border: 0; border-radius: 3px; }
.sw-color-picker::-moz-color-swatch { border: 0; border-radius: 3px; }
.sw-color-presets {
  display: inline-flex; flex-wrap: wrap; gap: 6px;
}
.sw-color-preset {
  width: 28px; height: 28px;
  border: 2px solid transparent;
  border-radius: 50%;
  cursor: pointer;
  padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  transition: transform var(--t-quick), border-color var(--t-quick), box-shadow var(--t-quick);
  position: relative;
}
.sw-color-preset:hover {
  transform: scale(1.12);
  border-color: var(--area-primary);
}
.sw-color-preset.is-active {
  border-color: var(--fg-primary);
  box-shadow: 0 0 0 2px var(--bg-surface), 0 0 0 4px var(--area-primary);
}
.sw-color-reset {
  background: var(--bg-surface);
  border: 1px dashed var(--border-default);
  color: var(--fg-muted);
}
.sw-color-reset:hover { border-style: solid; border-color: var(--danger-500); color: var(--danger-700); }
.sw-color-reset.is-active { border-color: var(--fg-primary); color: var(--fg-primary); box-shadow: 0 0 0 2px var(--bg-surface), 0 0 0 4px var(--fg-primary); }

/* Variant-Chip im Analyse-Formular (Checkbox mit Farbpunkt + Name) */
.sw-variant-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 10px;
  border: 1px solid var(--border-subtle);
  background: var(--bg-surface);
  border-radius: var(--r-pill);
  font-size: var(--fs-xs); color: var(--fg-secondary);
  cursor: pointer;
  transition: border-color var(--t-quick), background var(--t-quick);
  user-select: none;
}
.sw-variant-chip:hover { border-color: var(--area-primary); }
.sw-variant-chip:has(input[type="checkbox"]:checked) {
  background: var(--area-primary-soft);
  border-color: var(--area-primary);
  color: var(--area-primary-fg);
  font-weight: var(--fw-semibold);
}
.sw-variant-chip input[type="checkbox"] {
  margin: 0; cursor: pointer;
  accent-color: var(--area-primary);
}
.sw-variant-chip-dot {
  width: 8px; height: 8px; border-radius: 50%;
  flex-shrink: 0;
}

/* Varianten-Liste in der Sidebar (klickbare Filter + Actions bei Hover) */
.sw-variant-row {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px;
  border-radius: var(--r-xs);
  text-decoration: none; color: var(--fg-primary);
  cursor: pointer;
  transition: background var(--t-quick);
  position: relative;
}
.sw-variant-row:hover { background: var(--bg-surface-2); text-decoration: none; }
.sw-variant-row.is-active {
  background: color-mix(in srgb, var(--area-primary-soft) 50%, transparent);
  box-shadow: inset 3px 0 0 var(--area-primary);
}
.sw-variant-dot {
  width: 10px; height: 10px; border-radius: 50%;
  flex-shrink: 0;
}
.sw-variant-name {
  flex: 1;
  font-size: var(--fs-sm); font-weight: var(--fw-medium);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.sw-variant-count {
  font-family: var(--font-mono); font-size: 10px;
  padding: 1px 7px; border-radius: var(--r-pill);
  background: var(--bg-surface); color: var(--fg-muted);
}
.sw-variant-row.is-active .sw-variant-count { background: var(--area-primary); color: #fff; }
.sw-variant-actions {
  display: none;
  align-items: center; gap: 2px;
  margin-left: 4px;
}
.sw-variant-row:hover .sw-variant-actions { display: inline-flex; }
.sw-variant-row:hover .sw-variant-count { display: none; }

/* Sprach-Tabs (Mockup-Design — aktuell nur "Alle" aktiv als Platzhalter) */
.sw-lang-tabs {
  display: flex; gap: 2px;
  padding: 4px;
  background: var(--bg-surface-2);
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-md);
  margin-bottom: var(--space-5);
  overflow-x: auto;
}
.sw-lang-tab {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 12px;
  border-radius: var(--r-xs);
  font-size: var(--fs-xs); font-weight: var(--fw-medium);
  color: var(--fg-muted);
  cursor: pointer;
  border: 0; background: transparent;
  white-space: nowrap;
  transition: background var(--t-quick), color var(--t-quick);
}
.sw-lang-tab:hover { background: var(--bg-surface); color: var(--fg-primary); }
.sw-lang-tab.is-active {
  background: var(--bg-surface);
  color: var(--fg-primary);
  font-weight: var(--fw-semibold);
  box-shadow: 0 1px 2px rgba(0,0,0,.06);
}
.sw-lang-tab.is-disabled { opacity: .55; cursor: not-allowed; }
.sw-lang-tab-count {
  font-family: var(--font-mono); font-size: 10px;
  padding: 1px 6px; border-radius: var(--r-pill);
  background: var(--bg-surface-2); color: var(--fg-muted);
  margin-left: 2px;
}
.sw-lang-tab.is-active .sw-lang-tab-count { background: var(--area-primary-soft); color: var(--area-primary-fg); }

/* Empty-State für nicht-session-basierten Share */
.tx-needs-analysis {
  padding: var(--space-6);
  background: color-mix(in srgb, var(--info-50) 70%, var(--bg-surface));
  border: 1px dashed var(--info-300, var(--info-500));
  border-radius: var(--r-md);
  text-align: center;
}
.lp-empty-icon {
  width: 80px; height: 80px; border-radius: 24px;
  background: var(--area-primary-soft); color: var(--area-primary-fg);
  display: inline-flex; align-items: center; justify-content: center;
  margin-bottom: var(--space-4);
}

/* Reading-Grade Badge */
.rd-badge {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 32px; height: 24px; padding: 0 8px;
  border-radius: var(--r-xs); color: #fff;
  font-family: var(--font-display); font-weight: var(--fw-bold);
  font-size: var(--fs-sm);
}

/* Reading — Donut-Hero & URL-Grid */
.rd-donut-row {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: var(--space-5); align-items: center;
}
@media (max-width: 900px) { .rd-donut-row { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .rd-donut-row { grid-template-columns: 1fr; } }
.rd-donut {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  text-align: center;
}
.rd-donut-lbl {
  font-family: var(--font-mono); font-size: 9px; color: var(--fg-muted);
  text-transform: uppercase; letter-spacing: var(--tracking-wide);
  font-weight: var(--fw-semibold);
}
.rd-donut-val {
  font-family: var(--font-display); font-size: var(--fs-xl);
  font-weight: var(--fw-bold); line-height: 1; color: var(--fg-primary);
}
.rd-stats-strip {
  display: grid; grid-template-columns: repeat(5, 1fr);
  gap: var(--space-3);
  padding: var(--space-4) var(--space-5);
  background: var(--bg-surface-2); border-radius: var(--r-md);
  margin-top: var(--space-5);
}
@media (max-width: 900px) { .rd-stats-strip { grid-template-columns: repeat(3, 1fr); } }
.rd-stat { text-align: center; }
.rd-stat-val {
  font-family: var(--font-mono); font-size: var(--fs-md);
  font-weight: var(--fw-bold); color: var(--fg-primary);
}
.rd-stat-lbl {
  font-size: 10px; color: var(--fg-muted);
  text-transform: uppercase; letter-spacing: var(--tracking-wide);
  font-weight: var(--fw-semibold); margin-top: 3px;
}
.rd-url-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-4);
}
@media (max-width: 1100px) { .rd-url-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 700px)  { .rd-url-grid { grid-template-columns: 1fr; } }
.rd-url-card {
  background: var(--bg-surface); border: 1px solid var(--border-subtle);
  border-radius: var(--r-md); padding: var(--space-4) var(--space-5);
  display: flex; flex-direction: column; gap: var(--space-3);
  transition: transform var(--t-quick), box-shadow var(--t-quick);
}
.rd-url-card:hover { transform: translateY(-1px); box-shadow: var(--shadow-sm); }
.rd-url-card.is-ref {
  border-color: var(--area-primary);
  box-shadow: 0 0 0 1px var(--area-primary-soft);
}
.rd-url-card-hd {
  display: flex; align-items: center; gap: var(--space-3);
  padding-bottom: var(--space-3); border-bottom: 1px solid var(--border-subtle);
}
.rd-url-card-host {
  flex: 1; min-width: 0;
  font-family: var(--font-display); font-weight: var(--fw-semibold);
  font-size: var(--fs-sm); color: var(--fg-primary);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.rd-url-card-row {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px;
  font-family: var(--font-mono); font-size: var(--fs-2xs);
}
.rd-url-card-row > div {
  background: var(--bg-surface-2); padding: 6px 8px; border-radius: var(--r-xs);
  text-align: center;
}
.rd-url-card-row-val { font-weight: var(--fw-bold); color: var(--fg-primary); font-size: var(--fs-xs); }
.rd-url-card-row-lbl { color: var(--fg-muted); font-size: 9px; text-transform: uppercase; margin-top: 2px; }
.rd-bar-row {
  display: flex; align-items: center; gap: var(--space-3);
  padding: 8px var(--space-4);
  border-bottom: 1px solid var(--border-subtle);
  font-size: var(--fs-xs);
}
.rd-bar-row:last-child { border-bottom: none; }
.rd-bar-row-host {
  flex: 0 0 40%; min-width: 0;
  font-family: var(--font-mono); font-size: var(--fs-2xs);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  color: var(--fg-secondary);
}
.rd-bar-row-bar {
  flex: 1; height: 10px; background: var(--neutral-100);
  border-radius: var(--r-pill); overflow: hidden;
}
.rd-bar-row-bar > span {
  display: block; height: 100%; border-radius: var(--r-pill);
  transition: width var(--t-base);
}
.rd-bar-row-val {
  flex: 0 0 60px; text-align: right;
  font-family: var(--font-mono); font-weight: var(--fw-bold);
  font-size: var(--fs-xs);
}

/* DC — Risk-Tiles, Pair-List, URL-Wiki */
.dc-risk-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-4);
}
@media (max-width: 900px) { .dc-risk-grid { grid-template-columns: repeat(2, 1fr); } }
.dc-risk {
  padding: var(--space-4) var(--space-5);
  border-radius: var(--r-md); border: 1px solid var(--border-subtle);
  display: flex; flex-direction: column; gap: 6px;
}
.dc-risk.crit  { background: var(--danger-50);   border-color: var(--danger-200);  color: var(--danger-700); }
.dc-risk.mod   { background: var(--warning-50);  border-color: var(--warning-200); color: var(--warning-700); }
.dc-risk.low   { background: var(--success-50);  border-color: var(--success-200); color: var(--success-700); }
.dc-risk.clean { background: var(--bg-surface-2); border-color: var(--border-subtle); color: var(--fg-secondary); }
.dc-risk-val {
  font-family: var(--font-display); font-size: var(--fs-2xl);
  font-weight: var(--fw-bold); line-height: 1;
}
.dc-risk-lbl {
  font-family: var(--font-mono); font-size: 10px;
  text-transform: uppercase; letter-spacing: var(--tracking-wide);
  font-weight: var(--fw-semibold); opacity: .85;
}
.dc-pair-row {
  display: grid; grid-template-columns: 24px 1fr auto 1fr 80px;
  align-items: center; gap: var(--space-3);
  padding: 8px var(--space-4);
  border-bottom: 1px solid var(--border-subtle);
  font-size: var(--fs-xs);
}
.dc-pair-row:last-child { border-bottom: none; }
.dc-pair-row-url {
  font-family: var(--font-mono); font-size: var(--fs-2xs);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  color: var(--fg-secondary);
}
.dc-pair-row-val {
  text-align: right; font-family: var(--font-mono);
  font-weight: var(--fw-bold); font-size: var(--fs-xs);
}
.dc-wiki-list {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: var(--space-2);
}
.dc-wiki-item {
  display: flex; align-items: center; gap: var(--space-3);
  padding: 8px var(--space-3);
  background: var(--bg-surface-2); border-radius: var(--r-xs);
  font-size: var(--fs-xs);
}
.dc-wiki-nr {
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--area-primary); color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--font-mono); font-weight: var(--fw-bold); font-size: 10px;
  flex-shrink: 0;
}
.dc-wiki-host {
  flex: 1; min-width: 0; font-family: var(--font-mono);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  color: var(--fg-secondary);
}


/* ============================================================
   TOOLTIPS (.tt / .tt__pop) — Reusable Hover-Popovers
   ------------------------------------------------------------
   System aus ___Design2026/screens/99-tooltips.php.
   Positionen: --top --bottom --left --right
   Themes:     default(dark) --light --accent --info --success --warning --danger
   Sizes:      --sm (default) --lg
   Rich:       --rich + .tt__title .tt__dot .tt__desc .tt__meta .tt__kbd
   Trigger:    .tt__icon (Info-Icon) / .tt__text (dotted)
   Demo-State: .tt--open (immer sichtbar)
   ============================================================ */
.tt {
  position: relative;
  display: inline-flex;
  align-items: center;
  vertical-align: middle;
}
/* DC42c (2026-05-21) · Bugfix: .tt-Klasse auf <tr>/<td>/<th> zerstört Tabellen-
   Layout, weil inline-flex die Table-Row in einen Flex-Container verwandelt
   und damit alle Zellen ihre Spalten-Zugehörigkeit verlieren. Symptom: erste
   Spalte wird "riesig", Body-Zellen rutschen alle nach links zusammen.
   Betroffen: Rank-Tracker Positionen, EPS-KF Übersicht/Keywords. */
tr.tt { display: table-row !important; }
td.tt,
th.tt { display: table-cell !important; }
.tt__icon {
  all: unset;
  display: inline-flex; align-items: center; justify-content: center;
  width: 16px; height: 16px; margin-left: 4px;
  border-radius: 50%;
  background: var(--bg-sunken, var(--neutral-100));
  color: var(--fg-muted);
  font-family: var(--font-mono); font-size: 10px; font-weight: var(--fw-bold);
  cursor: help;
  transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.tt__icon:hover,
.tt:hover .tt__icon {
  background: color-mix(in srgb, var(--area-primary) 18%, transparent);
  color: var(--area-primary-fg);
}
.tt__text {
  border-bottom: 1px dotted currentColor;
  padding-bottom: 1px;
  cursor: help;
}
.tt__pop {
  --tt-bg: var(--fg-primary);
  --tt-fg: var(--bg-surface);
  --tt-border: transparent;
  position: absolute; z-index: 9999;
  min-width: 120px; max-width: 280px;
  padding: 8px 12px;
  background: var(--tt-bg); color: var(--tt-fg);
  border: 1px solid var(--tt-border);
  border-radius: var(--r-sm);
  font-family: var(--font-body);
  font-size: var(--fs-2xs); line-height: 1.5;
  font-weight: var(--fw-medium);
  text-align: left; white-space: normal;
  box-shadow: 0 12px 32px rgba(0,0,0,0.18), 0 4px 8px rgba(0,0,0,0.06);
  opacity: 0; pointer-events: none;
  transition: opacity .15s var(--ease-out), transform .15s var(--ease-out);
}
.tt__pop::after {
  content: ''; position: absolute; width: 0; height: 0;
  border: 6px solid transparent;
}
.tt__pop--top    { bottom: calc(100% + 10px); left: 50%; transform: translateX(-50%) translateY(-4px); }
.tt__pop--top::after    { top: 100%; left: 50%; transform: translateX(-50%); border-top-color: var(--tt-bg); }
.tt__pop--bottom { top: calc(100% + 10px); left: 50%; transform: translateX(-50%) translateY(4px); }
.tt__pop--bottom::after { bottom: 100%; left: 50%; transform: translateX(-50%); border-bottom-color: var(--tt-bg); }
.tt__pop--left   { right: calc(100% + 10px); top: 50%; transform: translateY(-50%) translateX(4px); }
.tt__pop--left::after   { left: 100%; top: 50%; transform: translateY(-50%); border-left-color: var(--tt-bg); }
.tt__pop--right  { left: calc(100% + 10px); top: 50%; transform: translateY(-50%) translateX(-4px); }
.tt__pop--right::after  { right: 100%; top: 50%; transform: translateY(-50%); border-right-color: var(--tt-bg); }
.tt:hover > .tt__pop,
.tt:focus-within > .tt__pop,
.tt--open > .tt__pop { opacity: 1; pointer-events: auto; }
.tt:hover > .tt__pop--top,    .tt:focus-within > .tt__pop--top,    .tt--open > .tt__pop--top,
.tt:hover > .tt__pop--bottom, .tt:focus-within > .tt__pop--bottom, .tt--open > .tt__pop--bottom { transform: translateX(-50%) translateY(0); }
.tt:hover > .tt__pop--left,   .tt:focus-within > .tt__pop--left,   .tt--open > .tt__pop--left,
.tt:hover > .tt__pop--right,  .tt:focus-within > .tt__pop--right,  .tt--open > .tt__pop--right  { transform: translateY(-50%) translateX(0); }
.tt__pop--light   { --tt-bg: var(--bg-surface); --tt-fg: var(--fg-primary); --tt-border: var(--border-default); box-shadow: 0 12px 32px rgba(0,0,0,0.10), 0 4px 12px rgba(0,0,0,0.04); }
.tt__pop--accent  { --tt-bg: var(--area-primary); --tt-fg: #fff; }
.tt__pop--success { --tt-bg: var(--success-600);  --tt-fg: #fff; }
.tt__pop--warning { --tt-bg: var(--warning-600, var(--orange-600));  --tt-fg: #fff; }
.tt__pop--danger  { --tt-bg: var(--danger-600);   --tt-fg: #fff; }
.tt__pop--info    { --tt-bg: var(--info-600, var(--blue-600));     --tt-fg: #fff; }
.tt__pop--sm {
  min-width: 0; max-width: 220px; padding: 5px 9px;
  font-size: 11px; line-height: 1.4;
}
.tt__pop--lg {
  max-width: 360px; padding: var(--space-4) var(--space-5);
  font-size: var(--fs-xs);
}
.tt__pop--rich {
  padding: 12px 14px; min-width: 200px; max-width: 300px; display: block;
}
.tt__title {
  display: flex; align-items: center; gap: 8px;
  font-size: var(--fs-xs); font-weight: var(--fw-bold);
  color: inherit; margin-bottom: 6px;
  letter-spacing: var(--tracking-tight);
}
.tt__dot {
  display: inline-block; width: 10px; height: 10px;
  border-radius: 50%; background: currentColor; opacity: 0.85;
  flex-shrink: 0;
}
.tt__desc {
  display: block;
  font-size: var(--fs-2xs); line-height: 1.55;
  color: inherit; opacity: 0.85; font-weight: var(--fw-regular);
}
.tt__meta {
  display: flex; justify-content: space-between; align-items: center;
  gap: var(--space-3);
  padding-top: 8px; margin-top: 8px;
  border-top: 1px solid color-mix(in srgb, currentColor 18%, transparent);
  font-family: var(--font-mono); font-size: 10px;
  font-weight: var(--fw-semibold);
  opacity: 0.8; letter-spacing: var(--tracking-wide);
}
.tt__meta > *:first-child { text-transform: uppercase; opacity: 0.7; }
.tt__kbd {
  display: inline-flex; align-items: center;
  padding: 2px 6px;
  background: color-mix(in srgb, currentColor 18%, transparent);
  border: 1px solid color-mix(in srgb, currentColor 10%, transparent);
  border-radius: var(--r-xs);
  font-family: var(--font-mono); font-size: 10px; font-weight: var(--fw-semibold);
  line-height: 1.2; letter-spacing: 0.02em;
}
.tt__kbd + .tt__kbd { margin-left: 3px; }


/* Analyse-Start-Form (wenn keine Session-Daten) */
.editor-start-form {
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-lg);
  padding: var(--space-7);
  box-shadow: var(--shadow-sm);
}
.editor-start-form-grid {
  display: grid; grid-template-columns: 1fr 1fr 1fr auto;
  gap: var(--space-4); align-items: end;
}
@media (max-width: 900px) {
  .editor-start-form-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 600px) {
  .editor-start-form-grid { grid-template-columns: 1fr; }
}