/* =============================================================
   SEOlyze — Intern Content Styles (EPS-KF, WDF, Analyse)
   v=20260422n
   Content-CSS (kf-*, charts, DataTable, proof-panels).
   Sidebar Sub-Items, Bootstrap Compat-Overrides, Footer.
   ============================================================= */

/* ── Sidebar – Intern-spezifische Ergänzungen ─────────────────── */

#ci-intern-sidebar .fd-ci-logo {
  padding: 20px 16px 12px;
}

#ci-intern-sidebar .intern-area-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #ff8000;
  color: #fff;
  font-size: 9px;
  font-weight: 800;
  border-radius: 4px;
  padding: 2px 6px;
  letter-spacing: .4px;
  text-transform: uppercase;
  margin-left: 6px;
  line-height: 1;
  flex-shrink: 0;
}

/* Sub-Items unter einem aktiven Menüpunkt */
.intern-sb-subitems {
  display: none;
  flex-direction: column;
  gap: 2px;
  padding: 4px 0 6px 32px;
}

.fd-sb-item.is-open + .intern-sb-subitems,
.intern-sb-subitems.open {
  display: flex;
}

.intern-sb-subitem {
  display: block;
  color: rgba(255,255,255,.55);
  font-size: 11.5px;
  padding: 5px 10px;
  border-radius: 6px;
  text-decoration: none;
  transition: background .15s, color .15s;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.intern-sb-subitem:hover {
  color: #fff;
  background: rgba(255,255,255,.07);
}

.intern-sb-subitem.active {
  color: #fff;
  background: rgba(143,95,196,.25);
}

/* Trenn-Linie vor Bottom-Gruppe */
.fd-sb-group--separator {
  border-top: 1px solid rgba(255,255,255,.08);
  margin-top: 8px;
  padding-top: 8px;
}

/* Highlight-Link (AI Creation Cross-Link) */
.fd-sb-item--ai-link {
  background: linear-gradient(135deg, rgba(143,95,196,.2), rgba(83,74,183,.15)) !important;
  border: 1px solid rgba(143,95,196,.3) !important;
  border-radius: 8px !important;
  margin: 0 4px !important;
  color: #c084fc !important;
}

.fd-sb-item--ai-link:hover {
  background: linear-gradient(135deg, rgba(143,95,196,.35), rgba(83,74,183,.25)) !important;
  color: #d8b4fe !important;
}

/* ── Topbar – ergänzende Elemente ──────────────────────────────── */

.intern-topbar-area-label {
  font-size: 13px;
  font-weight: 600;
  color: #374151;
  display: flex;
  align-items: center;
  gap: 6px;
}

.intern-topbar-area-badge {
  background: rgba(143,95,196,.12);
  color: #7c3aed;
  font-size: 10px;
  font-weight: 700;
  border-radius: 6px;
  padding: 2px 8px;
  letter-spacing: .3px;
}

.intern-topbar-spacer { flex: 1; }

.intern-topbar-user {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: #6b7280;
}

.intern-topbar-user a {
  color: #6b7280;
  text-decoration: none;
  padding: 6px 12px;
  border-radius: 6px;
  border: 1px solid #e5e7eb;
  transition: background .15s, color .15s;
  font-size: 12px;
}

.intern-topbar-user a:hover {
  background: #f3f4f6;
  color: #374151;
}

.intern-topbar-divider {
  width: 1px;
  height: 22px;
  background: #e5e7eb;
}

/* ── Bootstrap Grid Overrides (Compat für alte Templates) ──────── */
/* Alte Content-Templates verwenden col-sm-9 col-sm-offset-3 als
   Haupt-Spalte – mit CI-Sidebar müssen diese auf volle Breite.    */
.intern-ci-content .col-sm-9,
.intern-ci-content .col-md-10 {
  width: 100% !important;
  float: none !important;
  display: block !important;
}

.intern-ci-content .col-sm-offset-3,
.intern-ci-content .col-md-offset-2 {
  margin-left: 0 !important;
}

.intern-ci-content .container-fluid {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

.intern-ci-content .row {
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* ── Bootstrap Content-Elemente ans neue Design anpassen ─────── */

.intern-ci-content #content {
  background: transparent !important;
  margin: 0 !important;
}

.intern-ci-content .breadcrumb {
  background: transparent !important;
  padding-left: 0 !important;
  margin-bottom: 8px !important;
  font-size: 12px !important;
  color: #9ca3af !important;
}

.intern-ci-content .page-header {
  margin-top: 4px !important;
  color: #1f2937 !important;
  border-color: #e5e7eb !important;
  font-family: Inter, sans-serif !important;
}

.intern-ci-content .page-header h1,
.intern-ci-content h1.page-header {
  font-size: 20px !important;
  font-weight: 600 !important;
  color: #1f2937 !important;
}

.intern-ci-content .panel {
  border-radius: 8px !important;
  box-shadow: 0 1px 4px rgba(0,0,0,.08) !important;
  border: 1px solid #e5e7eb !important;
}

.intern-ci-content .panel-heading {
  border-radius: 8px 8px 0 0 !important;
  font-weight: 600 !important;
}

.intern-ci-content .alert {
  border-radius: 8px !important;
  border-left-width: 4px !important;
}

.intern-ci-content .btn {
  border-radius: 6px !important;
}

.intern-ci-content .btn-primary {
  background-color: #8f5fc4 !important;
  border-color: #7c3aed !important;
}

.intern-ci-content .btn-primary:hover {
  background-color: #7c3aed !important;
}

.intern-ci-content table.dataTable,
.intern-ci-content .table {
  border-radius: 8px !important;
  overflow: hidden !important;
}

.intern-ci-content .dataTables_wrapper {
  font-size: 13px !important;
}

.intern-ci-content .form-control {
  border-radius: 6px !important;
  border: 1px solid #d1d5db !important;
  font-size: 13px !important;
}

.intern-ci-content .form-control:focus {
  border-color: #ff9000 !important;
  box-shadow: 0 0 0 3px rgba(255,144,0,.15) !important;
}

/* ── Page-Header Upgrade (Bootstrap → Modern Card) ────────────── */
/* Alle Seiten mit h1.page-header bekommen automatisch das
   Card-Box-Styling ohne Template-Änderung.
   Optik: weißer Hintergrund, Border, orangener Left-Stroke,
   großes Icon links — analog zu .fd-ci-page-header.            */

.intern-ci-content .row:first-child {
  margin-bottom: 0;
}

.intern-ci-content h1.page-header {
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
  background: var(--ci-card, #fff) !important;
  border: 1px solid var(--ci-border, #e8eaed) !important;
  border-left: 4px solid var(--ci-accent, #ff8f00) !important;
  border-radius: var(--ci-radius-sm, 10px) !important;
  padding: 10px 18px !important;
  margin: 0 0 20px !important;
  font-size: 17px !important;
  font-weight: 700 !important;
  color: var(--ci-t1, #0f172a) !important;
  box-shadow: 0 1px 3px rgba(0,0,0,.05) !important;
  line-height: 1.3 !important;
  font-family: Inter, sans-serif !important;
}

/* Icon im Page-Header: eigene Box, korrekt zentriert.
   Gilt für Bootstrap Glyphicons UND für direkte SVGs (eps-kf-Stil). */

/* Glyphicon-Box */
.intern-ci-content h1.page-header .glyphicon {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 36px !important;
  height: 36px !important;
  min-width: 36px !important;
  box-sizing: border-box !important;
  background: var(--ci-accent-soft, rgba(255,143,0,.12)) !important;
  border-radius: 9px !important;
  flex-shrink: 0 !important;
  margin: 0 !important;
  font-size: 16px !important;
  color: var(--ci-accent, #ff8f00) !important;
  line-height: 36px !important;
  text-align: center !important;
}

/* SVG-Wrapper-Span (ph-icon) — identisches Rendering wie ic-card-head-icon */
.intern-ci-content h1.page-header .ph-icon {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 36px !important;
  height: 36px !important;
  min-width: 36px !important;
  background: var(--ci-accent-soft, rgba(255,143,0,.12)) !important;
  border-radius: 9px !important;
  flex-shrink: 0 !important;
}
.intern-ci-content h1.page-header .ph-icon svg {
  width: 18px !important;
  height: 18px !important;
  stroke: var(--ci-accent, #ff8f00) !important;
  flex-shrink: 0 !important;
}

/* Row-Wrapper hat oft negative margins – reset */
.intern-ci-content .main > .row:first-child {
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* ── Bootstrap Navbar verstecken ──────────────────────────────── */
body.ci-intern-page .navbar-fixed-bottom,
body.ci-intern-page .navbar-fixed-top,
body.ci-intern-page .navbar-inverse,
body.ci-intern-page .landingTop,
body.ci-intern-page .landingBottom {
  display: none !important;
}

/* ── Intern CI Footer ──────────────────────────────────────────── */
.intern-ci-footer {
  height: 36px;
  min-height: 36px;
  background: var(--ci-card, #f9fafb);
  border-top: 1px solid var(--ci-border, #e5e7eb);
  display: flex;
  align-items: center;
  padding: 0 20px;
  font-size: 11px;
  color: #9ca3af;
  gap: 16px;
  flex-shrink: 0;
  clear: both;
  width: 100%;
  box-sizing: border-box;
}

.intern-ci-footer a {
  color: #9ca3af;
  text-decoration: none;
}

.intern-ci-footer a:hover {
  color: #6b7280;
}

/* ══════════════════════════════════════════════════════════════════════
   PHASE 3 – Content-Template Styling  ("hübsch und fetzig")
   ══════════════════════════════════════════════════════════════════════ */

/* ── Allgemeines Content-Spacing ─────────────────────────────────────── */
.intern-ci-content .main {
  max-width: 100%;
  padding: 0;
}

/* ── Section-Headers (.sub-h3) ──────────────────────────────────────── */
.intern-ci-content .sub-h3,
.intern-ci-content h3.sub-h3 {
  font-size: 14px !important;
  font-weight: 600 !important;
  color: #374151 !important;
  border-left: 3px solid #ff9000 !important;
  padding-left: 10px !important;
  margin: 20px 0 12px !important;
  font-family: Inter, sans-serif !important;
}

/* ── Chart-Container als modernes Card ───────────────────────────────── */
.intern-ci-content [id^="chartContainer"] {
  border-radius: 12px !important;
  box-shadow: 0 2px 12px rgba(0,0,0,.08) !important;
  border: 1px solid #e5e7eb !important;
  overflow: hidden !important;
  /* background/watermark vom Template wird überschrieben: */
  background: #fff !important;
}

/* ── Proof-Level Buttons ─────────────────────────────────────────────── */
.intern-ci-content .btn-group .btn-default {
  background: #fff !important;
  border: 1px solid #e5e7eb !important;
  color: #374151 !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  padding: 6px 14px !important;
  transition: background .15s, border-color .15s, color .15s !important;
}

.intern-ci-content .btn-group .btn-default:hover,
.intern-ci-content .btn-group .btn-default:focus {
  background: rgba(143,95,196,.1) !important;
  border-color: #8f5fc4 !important;
  color: #7c3aed !important;
  outline: none !important;
  box-shadow: none !important;
}

.intern-ci-content .btn-group .btn-default .glyphicon {
  color: #8f5fc4;
  margin-right: 4px;
}

/* ── Proof-Keyword Panels (good/more/less/miss) ──────────────────────── */
.intern-ci-content .proofkw .panel {
  border: none !important;
  border-radius: 10px !important;
  box-shadow: 0 2px 8px rgba(0,0,0,.07) !important;
  overflow: hidden !important;
}

.intern-ci-content .proofkw .panel-heading {
  font-size: 12px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: .5px !important;
  padding: 8px 14px !important;
  border-bottom: none !important;
}

/* WICHTIG: Panels sind je 1. Kind ihrer eigenen col-md-3.
   Selector muss auf die col-md-3 gehen, nicht auf das Panel selbst. */

/* 1. Box: Termmausprägung gut → GRÜN */
.intern-ci-content .proofkw .row > .col-md-3:nth-child(1) .panel-heading {
  background: #d1fae5 !important;
  color: #065f46 !important;
  border-left: 4px solid #10b981 !important;
}

/* 2. Box: Terme verstärken → ORANGE */
.intern-ci-content .proofkw .row > .col-md-3:nth-child(2) .panel-heading {
  background: #fff7ed !important;
  color: #92400e !important;
  border-left: 4px solid #f97316 !important;
}

/* 3. Box: Terme verringern → ROT-ORANGE (Amber) */
.intern-ci-content .proofkw .row > .col-md-3:nth-child(3) .panel-heading {
  background: #fef3c7 !important;
  color: #78350f !important;
  border-left: 4px solid #f59e0b !important;
}

/* 4. Box: Terme fehlen komplett → ROT */
.intern-ci-content .proofkw .row > .col-md-3:nth-child(4) .panel-heading {
  background: #fee2e2 !important;
  color: #991b1b !important;
  border-left: 4px solid #ef4444 !important;
}

.intern-ci-content .proofkw .panel-body {
  padding: 10px 12px !important;
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 5px !important;
}

/* ── Bootstrap Labels als moderne Keyword-Badges ─────────────────────── */
.intern-ci-content .label {
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  padding: 3px 8px !important;
  border-radius: 20px !important;
  font-size: 11px !important;
  font-weight: 500 !important;
  line-height: 1 !important;
  white-space: nowrap !important;
}

.intern-ci-content .label-success {
  background: #dcfce7 !important;
  color: #166534 !important;
}

.intern-ci-content .label-default {
  background: #f1f5f9 !important;
  color: #374151 !important;
  border: 1px solid #e5e7eb !important;
}

.intern-ci-content .label-warning {
  background: #fef3c7 !important;
  color: #92400e !important;
}

.intern-ci-content .label-danger {
  background: #fee2e2 !important;
  color: #991b1b !important;
}

.intern-ci-content .label .glyphicon {
  font-size: 9px !important;
  color: inherit !important;
  opacity: .7 !important;
}

/* ── DataTables – CI-Purple Header ───────────────────────────────────── */
.intern-ci-content table.dataTable {
  border-collapse: collapse !important;
  width: 100% !important;
}

.intern-ci-content table.dataTable thead th,
.intern-ci-content table.dataTable thead td {
  background: var(--ci-table-head-bg, #f59e0b) !important;
  color: var(--ci-table-head-fg, #fff) !important;
  font-size: 11.5px !important;
  font-weight: 600 !important;
  letter-spacing: .2px !important;
  border: none !important;
  border-right: 1.5px solid rgba(255,255,255,.25) !important;
  padding: 10px 12px !important;
  white-space: nowrap !important;
}

/* Letzter Header-Cell: kein rechter Trenner */
.intern-ci-content table.dataTable thead th:last-child,
.intern-ci-content table.dataTable thead td:last-child {
  border-right: none !important;
}

/* ── Sort-Arrows auf lila Header sichtbar ───────────────────────────── */

/* Standard DataTables sort icons ausblenden – wir machen eigene */
.intern-ci-content table.dataTable thead th.sorting::before,
.intern-ci-content table.dataTable thead th.sorting::after,
.intern-ci-content table.dataTable thead th.sorting_asc::before,
.intern-ci-content table.dataTable thead th.sorting_asc::after,
.intern-ci-content table.dataTable thead th.sorting_desc::before,
.intern-ci-content table.dataTable thead th.sorting_desc::after {
  display: none !important;
}

/* Eigene Sort-Icons mit gap nach dem Text */
.intern-ci-content table.dataTable thead th.sorting,
.intern-ci-content table.dataTable thead th.sorting_asc,
.intern-ci-content table.dataTable thead th.sorting_desc {
  cursor: pointer !important;
  padding-right: 28px !important;
  position: relative !important;
}

/* Basis: beide Pfeile grau (unsorted) */
.intern-ci-content table.dataTable thead th.sorting span.dt-sort,
.intern-ci-content table.dataTable thead th.sorting_asc span.dt-sort,
.intern-ci-content table.dataTable thead th.sorting_desc span.dt-sort {
  position: absolute !important;
  right: 8px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 0 !important;
  line-height: 1 !important;
}

/* Fallback: pseudo-element Pfeile wenn kein span vorhanden */
.intern-ci-content table.dataTable thead th.sorting::after {
  content: ' ⇅' !important;
  display: inline !important;
  position: absolute !important;
  right: 8px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  color: var(--ci-table-head-fg, #8f4c00) !important;
  opacity: .5 !important;
  font-size: 11px !important;
  font-weight: 400 !important;
}

.intern-ci-content table.dataTable thead th.sorting_asc::after {
  content: ' ↑' !important;
  display: inline !important;
  position: absolute !important;
  right: 8px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  color: var(--ci-table-head-fg, #8f4c00) !important;
  opacity: 1 !important;
  font-size: 13px !important;
}

.intern-ci-content table.dataTable thead th.sorting_desc::after {
  content: ' ↓' !important;
  display: inline !important;
  position: absolute !important;
  right: 8px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  color: var(--ci-table-head-fg, #8f4c00) !important;
  opacity: 1 !important;
  font-size: 13px !important;
}

.intern-ci-content table.dataTable thead th.sorting:hover,
.intern-ci-content table.dataTable thead th.sorting_asc:hover,
.intern-ci-content table.dataTable thead th.sorting_desc:hover {
  filter: brightness(0.90) !important;
  cursor: pointer !important;
}

/* ── DataTables Paging Controls ─────────────────────────────────────── */
.intern-ci-content .dataTables_wrapper .dataTables_paginate {
  margin-top: 12px !important;
  display: flex !important;
  justify-content: flex-end !important;
  gap: 4px !important;
  align-items: center !important;
}

.intern-ci-content .dataTables_wrapper .dataTables_paginate .paginate_button {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 32px !important;
  height: 32px !important;
  padding: 0 8px !important;
  border-radius: 6px !important;
  border: 1.5px solid #e5e7eb !important;
  background: #fff !important;
  color: #374151 !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  cursor: pointer !important;
  transition: background .15s, border-color .15s, color .15s !important;
  box-sizing: border-box !important;
  text-decoration: none !important;
}

.intern-ci-content .dataTables_wrapper .dataTables_paginate .paginate_button:hover {
  background: rgba(143,95,196,.1) !important;
  border-color: #8f5fc4 !important;
  color: #7c3aed !important;
}

.intern-ci-content .dataTables_wrapper .dataTables_paginate .paginate_button.current,
.intern-ci-content .dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
  background: #8f5fc4 !important;
  border-color: #8f5fc4 !important;
  color: #fff !important;
}

.intern-ci-content .dataTables_wrapper .dataTables_paginate .paginate_button.disabled,
.intern-ci-content .dataTables_wrapper .dataTables_paginate .paginate_button.disabled:hover {
  background: #f9fafb !important;
  border-color: #f3f4f6 !important;
  color: #9ca3af !important;
  cursor: default !important;
}

/* Info-Text (z.B. "1–50 von 230") */
.intern-ci-content .dataTables_wrapper .dataTables_info {
  margin-top: 12px !important;
  font-size: 12px !important;
  color: #9ca3af !important;
}

/* Page-Length Dropdown */
.intern-ci-content .dataTables_wrapper .dataTables_length {
  margin-bottom: 8px !important;
  font-size: 12px !important;
  color: #6b7280 !important;
}

.intern-ci-content .dataTables_wrapper .dataTables_length select {
  border: 1.5px solid #e5e7eb !important;
  border-radius: 6px !important;
  padding: 4px 8px !important;
  font-size: 12px !important;
  color: #374151 !important;
  background: #fff !important;
  margin: 0 4px !important;
}

/* Search-Box */
.intern-ci-content .dataTables_wrapper .dataTables_filter input {
  border: 1.5px solid #e5e7eb !important;
  border-radius: 6px !important;
  padding: 5px 10px !important;
  font-size: 12px !important;
  color: #1f2937 !important;
  background: #fff !important;
  margin-left: 6px !important;
}

.intern-ci-content .dataTables_wrapper .dataTables_filter input:focus {
  border-color: #8f5fc4 !important;
  outline: none !important;
  box-shadow: 0 0 0 2px rgba(143,95,196,.12) !important;
}

/* ── DataTables – Rows ───────────────────────────────────────────────── */
.intern-ci-content table.dataTable tbody tr {
  font-size: 12.5px !important;
  transition: background .1s !important;
}

.intern-ci-content table.dataTable tbody tr:hover > td {
  background-color: rgba(143,95,196,.07) !important;
}

.intern-ci-content table.dataTable.table-striped tbody tr:nth-child(odd) {
  background-color: #fafafa !important;
}

/* ── Keyword-Zellen Farbklassen (goodterm/wdfterm/epsterm) ───────────── */
.intern-ci-content td.goodterm {
  background: #f0fdf4 !important;
  color: #166534 !important;
  font-weight: 500 !important;
}

.intern-ci-content td.wdfterm {
  background: #eff6ff !important;
  color: #1e40af !important;
  font-weight: 500 !important;
}

.intern-ci-content td.epsterm {
  background: #faf5ff !important;
  color: #6b21a8 !important;
  font-weight: 500 !important;
}

/* Fehlende Keywords (inline style background:#EBCCD1) – modernisieren */
.intern-ci-content td[style*="EBCCD1"],
.intern-ci-content td[style*="ebccd1"] {
  background-color: #fee2e2 !important;
  color: #991b1b !important;
}

/* ── DataTables Wrapper & Controls ───────────────────────────────────── */
.intern-ci-content .dataTables_wrapper {
  font-size: 12px !important;
  color: #374151 !important;
}

.intern-ci-content .dataTables_info,
.intern-ci-content .dataTables_length,
.intern-ci-content .dataTables_filter {
  font-size: 12px !important;
  color: #6b7280 !important;
  margin-bottom: 8px !important;
}

.intern-ci-content .dataTables_length select,
.intern-ci-content .dataTables_filter input {
  border: 1px solid #e5e7eb !important;
  border-radius: 6px !important;
  padding: 4px 8px !important;
  font-size: 12px !important;
}

/* Export Buttons (DataTables Buttons Extension) */
.intern-ci-content .dt-buttons .btn,
.intern-ci-content .dt-buttons .buttons-excel,
.intern-ci-content .dt-buttons .buttons-csv {
  background: #fff !important;
  border: 1px solid #e5e7eb !important;
  color: #374151 !important;
  border-radius: 6px !important;
  font-size: 11px !important;
  padding: 5px 12px !important;
  transition: background .15s !important;
}

.intern-ci-content .dt-buttons .btn:hover {
  background: #f9fafb !important;
  border-color: #8f5fc4 !important;
  color: #7c3aed !important;
}

/* ── CC-AI Promo-Banner (alert-info mit SEOlyze-Lila) ───────────────── */
.intern-ci-content .alert-info {
  background: linear-gradient(135deg, #f5f3ff, #ede9fe) !important;
  border: 1px solid rgba(143,95,196,.3) !important;
  border-left: 4px solid #8f5fc4 !important;
  color: #4c1d95 !important;
  border-radius: 10px !important;
}

.intern-ci-content .alert-info a {
  color: #7c3aed !important;
}

/* ── Bootstrap Panels (allgemein moderner) ───────────────────────────── */
.intern-ci-content .panel-default > .panel-heading {
  background: #f9fafb !important;
  border-bottom: 1px solid #f3f4f6 !important;
  color: #374151 !important;
  font-size: 12.5px !important;
  font-weight: 600 !important;
}

/* ── table-responsive – verhindert ungewollten x-Scroll ─────────────── */
.intern-ci-content .table-responsive {
  border: none !important;
  overflow-x: auto !important;
}

/* ── Glyphicons in Headings: orange ─────────────────────────────────── */
.intern-ci-content .page-header .glyphicon,
.intern-ci-content h1 .glyphicon,
.intern-ci-content h3 .glyphicon {
  color: #ff9000 !important;
  margin-right: 8px !important;
  font-size: .85em !important;
}

/* ── 13. Abo-Alert Banner (index.tmpl.html aboClosed/trialEnd) ────────── */
.intern-abo-alert {
  background: #fef2f2;
  border: 1px solid #fca5a5;
  border-radius: 8px;
  padding: 16px 20px;
  margin: 16px 24px;
  display: flex;
  align-items: center;
  gap: 12px;
}

.intern-abo-alert h4 {
  margin: 0 0 4px;
  font-size: 14px;
  font-weight: 600;
  color: #dc2626;
}

.intern-abo-alert p {
  margin: 0;
  font-size: 13px;
  color: #6b7280;
}

.intern-abo-alert .btn-abo {
  margin-left: auto;
  background: #dc2626;
  color: #fff;
  border: none;
  border-radius: 6px;
  padding: 8px 16px;
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  flex-shrink: 0;
  transition: background .15s;
}

.intern-abo-alert .btn-abo:hover {
  background: #b91c1c;
}

/* ══════════════════════════════════════════════════════════════════════
   PHASE 3b – Form & Ergebnis-Design ("hübsch und fetzig")
   Altes Bootstrap-Look modernisieren — gleiche Struktur, neues Gesicht
   ══════════════════════════════════════════════════════════════════════ */

/* ── Checkbox + Radio – Styleguide-Pattern (.check / .check-radio) ─────── */
/* Identisch mit Styleguide, --area-primary → --ci-accent gemappt.          */
.check {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  font-size: 13px;
  font-family: Inter, sans-serif;
  color: var(--ci-t1, #0f172a);
  user-select: none;
  position: relative;
}
.check input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}
.check-box {
  width: 18px;
  height: 18px;
  border: 1.5px solid #d1d5db;
  border-radius: 5px;
  background: #fff;
  display: grid;
  place-items: center;
  transition: background .13s, border-color .13s;
  flex-shrink: 0;
}
.check-box svg {
  width: 12px;
  height: 12px;
  color: #fff;
  opacity: 0;
  transform: scale(0.6);
  transition: opacity .13s, transform .13s;
}
.check input:checked ~ .check-box {
  background: var(--ci-accent, #ff9000);
  border-color: var(--ci-accent, #ff9000);
}
.check input:checked ~ .check-box svg {
  opacity: 1;
  transform: scale(1);
}
.check input:focus-visible ~ .check-box {
  box-shadow: 0 0 0 3px var(--ci-accent-shadow, rgba(255,143,0,.25));
}
.check input[disabled] ~ .check-box {
  background: #f9fafb;
  opacity: .6;
  cursor: not-allowed;
}
/* Radio-Variante */
.check-radio .check-box {
  border-radius: 50%;
}
.check-radio input:checked ~ .check-box {
  background: #fff;
  border-color: var(--ci-accent, #ff9000);
  border-width: 5px;
}

/* ── Analyse-Form: Card-Wrapper ──────────────────────────────────────── */
.intern-ci-content form,
.intern-ci-content #normalForm,
.intern-ci-content #customForm {
  background: #fff !important;
  border-radius: 12px !important;
  border: 1px solid #e5e7eb !important;
  box-shadow: 0 1px 8px rgba(0,0,0,.06) !important;
  padding: 20px 20px 6px !important;
  margin-bottom: 20px !important;
}

/* ── Labels ─────────────────────────────────────────────────────────── */
.intern-ci-content .control-label {
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: .6px !important;
  text-transform: uppercase !important;
  color: #6b7280 !important;
  margin-bottom: 6px !important;
  display: block !important;
}

/* ── Inputs & Selects ─────────────────────────────────────────────── */
.intern-ci-content .form-control {
  height: 40px !important;
  border: 1.5px solid #e5e7eb !important;
  border-radius: 8px !important;
  font-size: 13px !important;
  font-family: Inter, sans-serif !important;
  color: #1f2937 !important;
  background: #fafafa !important;
  box-shadow: none !important;
  transition: border-color .15s, box-shadow .15s !important;
  padding: 0 12px !important;
}

.intern-ci-content textarea.form-control {
  height: auto !important;
  padding: 10px 12px !important;
}

.intern-ci-content .form-control:focus {
  border-color: #ff9000 !important;
  background: #fff !important;
  box-shadow: 0 0 0 3px rgba(255,144,0,.12) !important;
  outline: none !important;
}

.intern-ci-content .form-control::placeholder {
  color: #9ca3af !important;
}

/* ── Input Group: Addon (? Icon) ─────────────────────────────────── */
/* Bootstrap 3 nutzt display:table für input-groups – wir überschreiben
   mit flex, müssen aber height + width explizit setzen damit kein
   Überhang entsteht.                                                   */
.intern-ci-content .input-group {
  display: flex !important;
  align-items: stretch !important;
  width: 100% !important;
  position: relative !important;
}

/* Inputs innerhalb einer Gruppe: kein rechter Radius */
.intern-ci-content .input-group > .form-control,
.intern-ci-content .input-group > select.form-control {
  flex: 1 1 auto !important;
  width: 1% !important;          /* flex-override für Bootstrap's table-cell */
  min-width: 0 !important;
  border-top-right-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  border-right: none !important;
  height: 40px !important;
  box-sizing: border-box !important;
  position: relative !important;
  z-index: 2 !important;
}

/* Addon: exakt 40px hoch, kein float, kein table-cell */
.intern-ci-content .input-group-addon {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
  width: 38px !important;
  height: 40px !important;
  box-sizing: border-box !important;
  background: #fff8f0 !important;
  border: 1.5px solid #e5e7eb !important;
  border-left: none !important;
  border-radius: 0 8px 8px 0 !important;
  color: #ff9000 !important;
  padding: 0 !important;
  cursor: help;
  font-size: 14px !important;
  transition: background .15s !important;
  float: none !important;        /* Bootstrap 3 float override */
  vertical-align: middle !important;
}

.intern-ci-content .input-group-addon:hover {
  background: #fef3dc !important;
  color: #d97706 !important;
}

/* ── Radio-Gruppe (Desktop/Mobile) ───────────────────────────────── */
.intern-ci-content .radio,
.intern-ci-content .radio label {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  cursor: pointer !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  color: #374151 !important;
  margin: 0 10px 0 0 !important;
}

/* ── Checkbox (Use Own Stopword List) ────────────────────────────── */
.intern-ci-content .checkbox label {
  font-size: 13px !important;
  color: #374151 !important;
  cursor: pointer !important;
}

/* ── "Analyse jetzt starten" – Haupt-CTA ───────────────────────── */
.intern-ci-content .seolyzebtn,
.intern-ci-content button[type="submit"],
.intern-ci-content input[type="submit"] {
  background: linear-gradient(135deg, #ff9000, #ff6b00) !important;
  color: #fff !important;
  border: none !important;
  border-radius: 8px !important;
  padding: 10px 22px !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  letter-spacing: .2px !important;
  box-shadow: 0 2px 10px rgba(255,144,0,.35) !important;
  transition: box-shadow .15s, transform .1s !important;
  font-family: Inter, sans-serif !important;
}

.intern-ci-content .seolyzebtn:hover,
.intern-ci-content button[type="submit"]:hover {
  box-shadow: 0 4px 16px rgba(255,144,0,.45) !important;
  transform: translateY(-1px) !important;
  color: #fff !important;
}

/* ── "Custom URLs" Sekundär-Button ──────────────────────────────── */
.intern-ci-content #normalForm .btn-default:not(.btn-group .btn-default),
.intern-ci-content #customForm .btn-default:not(.btn-group .btn-default) {
  background: #fff !important;
  border: 1.5px solid #e5e7eb !important;
  color: #6b7280 !important;
  border-radius: 8px !important;
  font-size: 12px !important;
  padding: 6px 14px !important;
}

/* ── Ergebnis Action-Buttons – prominente Pill-Buttons ──────────── */
/* Btn-Group: flex + wrap damit volle Breite genutzt wird */
.intern-ci-content .btn-group[role="group"] {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  align-items: center !important;
  margin-bottom: 16px !important;
}

/* Basis: alle Buttons als eigenständige Pills (kein Zusammenwachsen) */
.intern-ci-content .btn-group[role="group"] .btn-default,
.intern-ci-content .btn-group[role="group"] > a > .btn-default,
.intern-ci-content .btn-group[role="group"] > a .btn-default {
  border-radius: 8px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  padding: 9px 18px !important;
  border: none !important;
  color: #fff !important;
  /* Legacy style.min.css setzt text-shadow:0 1px 0 #fff auf .btn-default
     → weißer Schatten auf weißem Text = "doppelt/unscharf". Fix: */
  text-shadow: none !important;
  -webkit-font-smoothing: antialiased !important;
  cursor: pointer !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 7px !important;
  transition: opacity .15s, transform .1s, box-shadow .15s !important;
  white-space: nowrap !important;
  text-decoration: none !important;
  box-shadow: 0 2px 6px rgba(0,0,0,.15) !important;
}

.intern-ci-content .btn-group[role="group"] .btn-default:hover,
.intern-ci-content .btn-group[role="group"] > a > .btn-default:hover,
.intern-ci-content .btn-group[role="group"] > a .btn-default:hover {
  filter: brightness(1.08) !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 5px 16px rgba(255,144,0,.40) !important;
  color: #fff !important;
  opacity: 1 !important;
}

/* Alle Action-Buttons einheitlich orange (CI-konform) */
.intern-ci-content .btn-group[role="group"] .btn-default,
.intern-ci-content .btn-group[role="group"] > a > .btn-default,
.intern-ci-content .btn-group[role="group"] > a .btn-default,
.intern-ci-content #saveAnalyseButton,
.intern-ci-content #texterVorlage,
.intern-ci-content #rankingJob {
  background: linear-gradient(135deg, #ff9000 0%, #e07400 100%) !important;
  box-shadow: 0 2px 8px rgba(255,144,0,.30) !important;
  color: #fff !important;
}
.intern-ci-content #saveAnalyseButton .glyphicon,
.intern-ci-content #texterVorlage .glyphicon,
.intern-ci-content #rankingJob .glyphicon {
  color: #fff !important;
}

/* Icons in den Buttons: weiß, etwas größer */
.intern-ci-content .btn-group[role="group"] .btn-default .glyphicon,
.intern-ci-content .btn-group[role="group"] > a .btn-default .glyphicon {
  color: rgba(255,255,255,.9) !important;
  font-size: 14px !important;
  margin: 0 !important;
  flex-shrink: 0 !important;
}

/* ── Analyse-Ergebnis Wrapper: Card ─────────────────────────────── */
.intern-ci-content #contentBereich,
.intern-ci-content #analysisResult,
.intern-ci-content .analyseboxen {
  margin-top: 6px !important;
}

/* ── Analysebox Tiles (Ø Wortanzahl, H1, H2 etc.) ──────────────── */
.intern-ci-content .analysebox {
  background: #fff !important;
  border: 1px solid #e5e7eb !important;
  border-radius: 8px !important;
  padding: 10px 12px 10px 14px !important;
  margin-bottom: 10px !important;
  box-shadow: 0 1px 4px rgba(0,0,0,.05) !important;
  min-height: 0 !important;
  position: relative !important;
  overflow: hidden !important;
}

.intern-ci-content .analysebox::before {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 3px; height: 100%;
  background: #ff9000;           /* orange statt lila */
  border-radius: 8px 0 0 8px;
}

.intern-ci-content .analysetitle {
  font-size: 9.5px !important;
  font-weight: 700 !important;
  letter-spacing: .4px !important;
  text-transform: uppercase !important;
  color: #9ca3af !important;
  text-decoration: none !important;
  display: block !important;
  margin-bottom: 2px !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

.intern-ci-content .analysevalue {
  font-size: 15px !important;     /* war 22px – deutlich kompakter */
  font-weight: 700 !important;
  color: #1f2937 !important;
  font-family: Inter, sans-serif !important;
  line-height: 1.3 !important;
  display: block !important;
  margin-bottom: 4px !important;
}

.intern-ci-content .analysevalue2 {
  font-size: 11px !important;
  font-weight: 600 !important;
  display: inline-block !important;
  margin-top: 1px !important;
}

/* ── Progress-Bar in Analysebox ─────────────────────────────────── */
.intern-ci-content .analysebar {
  height: 4px !important;
  background: #f3f4f6 !important;
  border-radius: 4px !important;
  overflow: hidden !important;
  margin: 6px 0 3px !important;
}

.intern-ci-content .analysebar-color {
  height: 4px !important;
  background: #6fb130 !important;
  border-radius: 4px !important;
  display: block !important;
  width: 0;
  transition: width .4s ease !important;
}

/* ── Loading-Spinner Card ──────────────────────────────────────── */
.intern-ci-content #loadingInfo,
.intern-ci-content [id*="loading"],
.intern-ci-content .loading-box {
  background: #fff !important;
  border-radius: 12px !important;
  border: 1px solid #e5e7eb !important;
  padding: 30px !important;
  text-align: center !important;
  color: #9ca3af !important;
  font-size: 14px !important;
}

/* ── Rows etwas mehr Abstand ─────────────────────────────────────── */
.intern-ci-content form .row {
  margin-bottom: 14px !important;
}

/* ── "Analyse-Ergebnis" h3 Überschrift — siehe h1.page-header Card weiter oben ── */

/* ── Result-Header (sub-h3 + Keyword-Info) Card ─────────────────── */
.intern-ci-content .sub-h3 {
  background: #fff !important;
  border-radius: 0 10px 10px 0 !important;
  padding: 10px 16px !important;
  margin: 0 0 16px !important;
  border-left: 4px solid #ff9000 !important;
  box-shadow: 0 1px 6px rgba(0,0,0,.06) !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  color: #1f2937 !important;
}

/* ═══════════════════════════════════════════════════════════════════════
   PHASE 3 – GLOBAL DESIGN UPGRADE (alle Templates)
   Gilt für alles innerhalb .intern-ci-content
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Page Header (h1) → Definition weiter oben (Card-Style) ──────────── */

/* ── Modern Alert Cards ─────────────────────────────────────────────── */
.intern-ci-content .alert {
  border-radius: 10px !important;
  border: none !important;
  padding: 14px 18px !important;
  font-size: 13.5px !important;
  font-family: 'Inter', sans-serif !important;
  box-shadow: 0 2px 8px rgba(0,0,0,.06) !important;
  margin-bottom: 16px !important;
}
.intern-ci-content .alert-danger,
.intern-ci-content .alert-error,
.intern-ci-content .alert.alert-danger.alert-error {
  background: #fef2f2 !important;
  color: #991b1b !important;
  border-left: 4px solid #ef4444 !important;
}
.intern-ci-content .alert-success {
  background: #f0fdf4 !important;
  color: #166534 !important;
  border-left: 4px solid #22c55e !important;
}
.intern-ci-content .alert-warning {
  background: #fffbeb !important;
  color: #92400e !important;
  border-left: 4px solid #f59e0b !important;
}
.intern-ci-content .alert-info {
  background: #eff6ff !important;
  color: #1e40af !important;
  border-left: 4px solid #3b82f6 !important;
}
.intern-ci-content .alert h4.alert-titleing {
  font-size: 14px !important;
  font-weight: 700 !important;
  margin: 0 0 4px !important;
}

/* ── Primary Button (seolyzebtn) ────────────────────────────────────── */
.intern-ci-content .btn.seolyzebtn,
.intern-ci-content button.seolyzebtn {
  background: linear-gradient(135deg, #ff9000, #e07a00) !important;
  color: #fff !important;
  border: none !important;
  border-radius: 8px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  padding: 9px 20px !important;
  font-family: 'Inter', sans-serif !important;
  box-shadow: 0 2px 6px rgba(255,144,0,.35) !important;
  transition: filter .15s, box-shadow .15s !important;
  cursor: pointer !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 7px !important;
}
.intern-ci-content .btn.seolyzebtn:hover,
.intern-ci-content button.seolyzebtn:hover {
  filter: brightness(1.08) !important;
  box-shadow: 0 4px 12px rgba(255,144,0,.45) !important;
  color: #fff !important;
}
.intern-ci-content .btn.seolyzebtn .glyphicon,
.intern-ci-content button.seolyzebtn .glyphicon {
  font-size: 13px !important;
  color: #fff !important;
}

/* .full-w-top – volle Breite Button wie Formular-Absenden */
.intern-ci-content .btn.seolyzebtn.full-w-top {
  width: 100% !important;
  justify-content: center !important;
  margin-top: 24px !important;
}

/* ── Generic .btn-default refresh ───────────────────────────────────── */
.intern-ci-content .btn.btn-default:not([class*="btn-group"]) {
  background: #fff !important;
  color: #374151 !important;
  border: 1.5px solid #e5e7eb !important;
  border-radius: 8px !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  padding: 8px 16px !important;
  box-shadow: 0 1px 3px rgba(0,0,0,.06) !important;
  transition: border-color .15s, box-shadow .15s !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
}
.intern-ci-content .btn.btn-default:not([class*="btn-group"]):hover {
  border-color: #ff9000 !important;
  box-shadow: 0 2px 8px rgba(255,144,0,.15) !important;
  color: #ff9000 !important;
}

/* ── User-Center Tabs (showTab-Buttons) ─────────────────────────────── */
.intern-ci-content > .row > .btn.seolyzebtn,
.intern-ci-content .row .btn.seolyzebtn[onclick*="showTab"] {
  background: #f9fafb !important;
  color: #6b7280 !important;
  border: 1.5px solid #e5e7eb !important;
  border-radius: 8px 8px 0 0 !important;
  box-shadow: none !important;
  font-weight: 600 !important;
  margin-right: 4px !important;
  margin-bottom: 0 !important;
  padding: 9px 20px !important;
}
.intern-ci-content .btn.seolyzebtn[id^="tabMenu"].active,
.intern-ci-content #tabMenu1[style*="background"],
.intern-ci-content .btn.seolyzebtn[id^="tabMenu"]:hover {
  background: #fff !important;
  color: #ff9000 !important;
  border-color: #ff9000 !important;
  border-bottom-color: #fff !important;
}

/* ── onpagebtn – Research Metrik-Tiles ──────────────────────────────── */
.intern-ci-content .btn.onpagebtn {
  background: linear-gradient(135deg, #ff9000, #e07a00) !important;
  color: #fff !important;
  border: none !important;
  border-radius: 10px !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  padding: 12px 16px !important;
  width: 100% !important;
  text-align: center !important;
  box-shadow: 0 2px 8px rgba(255,144,0,.3) !important;
  margin-bottom: 8px !important;
  line-height: 1.6 !important;
  display: block !important;
}
.intern-ci-content .btn.onpagebtn strong {
  font-size: 18px !important;
  display: block !important;
}

/* ── Tables ─────────────────────────────────────────────────────────── */
.intern-ci-content .table-responsive {
  border-radius: 12px !important;
  overflow: hidden !important;
  box-shadow: 0 2px 12px rgba(0,0,0,.07) !important;
  margin-bottom: 24px !important;
  border: 1px solid #e5e7eb !important;
}
.intern-ci-content .table,
.intern-ci-content .table-striped,
.intern-ci-content table.onpagetable {
  background: #fff !important;
  border-collapse: collapse !important;
  margin: 0 !important;
  font-size: 13px !important;
  font-family: 'Inter', sans-serif !important;
}
.intern-ci-content .table > thead > tr > th,
.intern-ci-content table.onpagetable > thead > tr > th {
  background: #ff9000 !important;
  color: #fff !important;
  font-weight: 600 !important;
  font-size: 12px !important;
  letter-spacing: .3px !important;
  padding: 12px 14px !important;
  border: none !important;
  border-right: 1.5px solid rgba(255,255,255,.3) !important;
  text-transform: uppercase !important;
}
.intern-ci-content .table > thead > tr > th:last-child,
.intern-ci-content table.onpagetable > thead > tr > th:last-child {
  border-right: none !important;
}
.intern-ci-content .table-striped > tbody > tr:nth-of-type(odd) {
  background: #fafafa !important;
}
.intern-ci-content .table-striped > tbody > tr:nth-of-type(even) {
  background: #fff !important;
}
.intern-ci-content .table > tbody > tr:hover {
  background: #fff8f0 !important;
  transition: background .1s !important;
}
.intern-ci-content .table > tbody > tr > td {
  padding: 10px 14px !important;
  border-top: 1px solid #f3f4f6 !important;
  color: #374151 !important;
  vertical-align: middle !important;
}
.intern-ci-content .table > tfoot > tr > th {
  background: #f9fafb !important;
  color: #6b7280 !important;
  font-size: 11px !important;
  padding: 8px 14px !important;
  border-top: 1px solid #e5e7eb !important;
}

/* ── DataTables Wrapper ─────────────────────────────────────────────── */
.intern-ci-content .dataTables_wrapper {
  font-family: 'Inter', sans-serif !important;
  font-size: 13px !important;
  color: #374151 !important;
}
.intern-ci-content .dataTables_wrapper .dataTables_filter input {
  background: #fff !important;
  border: 1.5px solid #e5e7eb !important;
  border-radius: 8px !important;
  padding: 6px 12px !important;
  font-size: 13px !important;
  outline: none !important;
  transition: border-color .15s !important;
}
.intern-ci-content .dataTables_wrapper .dataTables_filter input:focus {
  border-color: #ff9000 !important;
  box-shadow: 0 0 0 3px rgba(255,144,0,.12) !important;
}
.intern-ci-content .dataTables_wrapper .dataTables_length select {
  background: #fff !important;
  border: 1.5px solid #e5e7eb !important;
  border-radius: 6px !important;
  padding: 4px 8px !important;
  font-size: 13px !important;
}
.intern-ci-content .dataTables_wrapper .dataTables_info {
  color: #9ca3af !important;
  font-size: 12px !important;
  padding-top: 10px !important;
}
.intern-ci-content .dataTables_wrapper .dataTables_paginate .paginate_button {
  border-radius: 6px !important;
  border: 1.5px solid #e5e7eb !important;
  background: #fff !important;
  color: #374151 !important;
  margin: 0 2px !important;
  padding: 4px 10px !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  transition: all .15s !important;
}
.intern-ci-content .dataTables_wrapper .dataTables_paginate .paginate_button:hover {
  background: #fff8f0 !important;
  border-color: #ff9000 !important;
  color: #ff9000 !important;
}
.intern-ci-content .dataTables_wrapper .dataTables_paginate .paginate_button.current,
.intern-ci-content .dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
  background: linear-gradient(135deg,#ff9000,#e07a00) !important;
  border-color: #ff9000 !important;
  color: #fff !important;
  box-shadow: 0 2px 6px rgba(255,144,0,.3) !important;
}
.intern-ci-content .dataTables_wrapper .dataTables_paginate .paginate_button.disabled {
  opacity: .4 !important;
  cursor: not-allowed !important;
}

/* ── Widget-Head (Ranking) ──────────────────────────────────────────── */
.intern-ci-content .widget-head {
  background: linear-gradient(135deg, #ff9000, #e07a00) !important;
  color: #fff !important;
  border-radius: 10px 10px 0 0 !important;
  padding: 12px 16px !important;
  font-weight: 700 !important;
  font-size: 14px !important;
  font-family: 'Inter', sans-serif !important;
  box-shadow: 0 2px 8px rgba(255,144,0,.25) !important;
}
.intern-ci-content .widget-head strong,
.intern-ci-content .widget-head a {
  color: #fff !important;
}
.intern-ci-content .widget-head + table,
.intern-ci-content .widget-head + .table-responsive {
  border-radius: 0 0 10px 10px !important;
  border: 1px solid #e5e7eb !important;
  border-top: none !important;
  overflow: hidden !important;
}

/* ── Notice (leere Tabellen) ────────────────────────────────────────── */
.intern-ci-content .notice {
  background: #f9fafb !important;
  border-radius: 10px !important;
  padding: 30px 20px !important;
  text-align: center !important;
  color: #9ca3af !important;
  font-size: 14px !important;
  font-style: italic !important;
  border: 2px dashed #e5e7eb !important;
  margin: 12px 0 !important;
}

/* ── Research – Länder-Stat-Tiles ───────────────────────────────────── */
.intern-ci-content .col-md-3.col-xs-6.clearfix {
  padding: 12px !important;
}
.intern-ci-content .col-md-3.col-xs-6.clearfix span[style*="font-size: 24px"] {
  font-size: 28px !important;
  font-weight: 800 !important;
  color: #ff9000 !important;
  font-family: 'Inter', sans-serif !important;
  display: block !important;
  margin: 8px 0 4px !important;
}
.intern-ci-content .col-md-3.col-xs-6.clearfix img {
  border-radius: 6px !important;
  box-shadow: 0 2px 8px rgba(0,0,0,.12) !important;
  width: 60px !important;
}

/* ── SERP Snippet Tool ──────────────────────────────────────────────── */
.intern-ci-content .serpSnipetTool {
  background: #fff !important;
  border-radius: 12px !important;
  padding: 20px !important;
  box-shadow: 0 2px 12px rgba(0,0,0,.07) !important;
  border: 1px solid #e5e7eb !important;
  margin-bottom: 20px !important;
}
.intern-ci-content .serpPreviewContainer {
  background: #f9fafb !important;
  border-radius: 8px !important;
  padding: 16px 20px !important;
  border: 1px solid #e5e7eb !important;
  margin-bottom: 16px !important;
}
.intern-ci-content .serpPreview .serpTitle {
  color: #1a0dab !important;
  font-size: 18px !important;
  font-weight: 500 !important;
  line-height: 1.3 !important;
  font-family: Arial, sans-serif !important;
  text-decoration: none !important;
  cursor: pointer !important;
  margin-bottom: 4px !important;
}
.intern-ci-content .serpPreview .serpUrl {
  color: #006621 !important;
  font-size: 13px !important;
  font-family: Arial, sans-serif !important;
  margin-bottom: 4px !important;
}
.intern-ci-content .serpPreview .serpDesc {
  color: #545454 !important;
  font-size: 13px !important;
  font-family: Arial, sans-serif !important;
  line-height: 1.5 !important;
}

/* ── User Center – Pricing Cards ────────────────────────────────────── */
.intern-ci-content .trial {
  background: #fff !important;
  border-radius: 16px !important;
  border: 1.5px solid #e5e7eb !important;
  overflow: hidden !important;
  box-shadow: 0 4px 16px rgba(0,0,0,.08) !important;
  transition: box-shadow .2s, border-color .2s !important;
  margin-bottom: 20px !important;
}
.intern-ci-content .trial:hover {
  box-shadow: 0 8px 28px rgba(0,0,0,.13) !important;
  border-color: #ff9000 !important;
}
.intern-ci-content .trial .head {
  background: linear-gradient(135deg, #1f2937, #374151) !important;
  color: #fff !important;
  padding: 20px !important;
  text-align: center !important;
}
.intern-ci-content .trial .head .name {
  font-size: 14px !important;
  font-weight: 700 !important;
  letter-spacing: 2px !important;
  text-transform: uppercase !important;
  color: #ff9000 !important;
  margin-bottom: 8px !important;
}
.intern-ci-content .trial .head .price {
  font-size: 28px !important;
  font-weight: 800 !important;
  color: #fff !important;
  font-family: 'Inter', sans-serif !important;
  line-height: 1.1 !important;
}
.intern-ci-content .trial .head .price span {
  font-size: 36px !important;
}
.intern-ci-content .trial .content {
  padding: 16px 20px !important;
  font-size: 13px !important;
  color: #374151 !important;
  font-family: 'Inter', sans-serif !important;
}
.intern-ci-content .trial .content span {
  display: block !important;
  padding: 5px 0 !important;
  border-bottom: 1px solid #f3f4f6 !important;
}
.intern-ci-content .trial .content hr {
  border-color: #f3f4f6 !important;
  margin: 8px 0 !important;
}
.intern-ci-content .trial .content strong {
  color: #6b7280 !important;
  font-size: 11px !important;
  text-transform: uppercase !important;
  letter-spacing: .5px !important;
}
.intern-ci-content a.startTrial {
  display: block !important;
  background: linear-gradient(135deg, #ff9000, #e07a00) !important;
  color: #fff !important;
  text-align: center !important;
  padding: 14px !important;
  font-weight: 700 !important;
  font-size: 14px !important;
  font-family: 'Inter', sans-serif !important;
  text-decoration: none !important;
  transition: filter .15s !important;
  border-radius: 0 0 14px 14px !important;
}
.intern-ci-content a.startTrial:hover {
  filter: brightness(1.08) !important;
  color: #fff !important;
}

/* Monthly/Yearly toggle */
.intern-ci-content .functions .time {
  display: inline-block !important;
  padding: 6px 16px !important;
  border-radius: 6px !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  border: 1.5px solid #e5e7eb !important;
  color: #6b7280 !important;
  margin: 2px !important;
  transition: all .15s !important;
}
.intern-ci-content .functions .time.active,
.intern-ci-content .functions .time:hover {
  background: #ff9000 !important;
  border-color: #ff9000 !important;
  color: #fff !important;
}
.intern-ci-content .functions strong {
  font-size: 13px !important;
  color: #374151 !important;
  display: block !important;
  margin-bottom: 8px !important;
}

/* ── Ranking chart containers ───────────────────────────────────────── */
.intern-ci-content [id^="chartContainer"] {
  border-radius: 12px !important;
  overflow: hidden !important;
  box-shadow: 0 2px 12px rgba(0,0,0,.07) !important;
  background: #fff !important;
  margin-bottom: 20px !important;
}

/* ── Research Google Top10 ──────────────────────────────────────────── */
.intern-ci-content .col-xs-12.col-sm-5 > div {
  padding: 8px 10px !important;
  border-radius: 4px !important;
  margin-bottom: 2px !important;
}
.intern-ci-content .col-xs-12.col-sm-5 > div:hover {
  background: #fff8f0 !important;
}
.intern-ci-content .col-xs-12.col-sm-5 hr {
  border-color: #f3f4f6 !important;
  margin: 4px 0 !important;
}

/* ── Panel / Panel-default Karten ───────────────────────────────────── */
.intern-ci-content .panel {
  border-radius: 12px !important;
  border: 1px solid #e5e7eb !important;
  box-shadow: 0 2px 8px rgba(0,0,0,.06) !important;
  overflow: hidden !important;
}
.intern-ci-content .panel-default > .panel-heading {
  background: #f9fafb !important;
  border-bottom: 1px solid #e5e7eb !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  padding: 10px 14px !important;
}
.intern-ci-content .panel-body {
  padding: 14px !important;
  font-size: 13px !important;
  color: #374151 !important;
}

/* ── Ranking: Show-Verlauf Link ─────────────────────────────────────── */
.intern-ci-content a[href^="javascript:showRanking"] {
  color: #ff9000 !important;
  font-weight: 600 !important;
  font-size: 12px !important;
  text-decoration: none !important;
}
.intern-ci-content a[href^="javascript:showRanking"]:hover {
  text-decoration: underline !important;
}

/* ── select (country, etc.) ─────────────────────────────────────────── */
.intern-ci-content select.form-control {
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%236b7280'/%3E%3C/svg%3E") no-repeat right 12px center !important;
  background-size: 10px !important;
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  appearance: none !important;
  padding-right: 32px !important;
  border: 1.5px solid #e5e7eb !important;
  border-radius: 8px !important;
  height: 40px !important;
  cursor: pointer !important;
  font-size: 13px !important;
  color: #374151 !important;
}
.intern-ci-content select.form-control:focus {
  border-color: #ff9000 !important;
  box-shadow: 0 0 0 3px rgba(255,144,0,.12) !important;
}

/* ── textarea ────────────────────────────────────────────────────────── */
.intern-ci-content textarea.form-control {
  border-radius: 10px !important;
  border: 1.5px solid #e5e7eb !important;
  font-size: 13px !important;
  padding: 10px 14px !important;
  resize: vertical !important;
  min-height: 100px !important;
}
.intern-ci-content textarea.form-control:focus {
  border-color: #ff9000 !important;
  box-shadow: 0 0 0 3px rgba(255,144,0,.12) !important;
  outline: none !important;
}

/* ── col-sm-9 wrapper (Bootstrap Grid Reset) ────────────────────────── */
.intern-ci-content .col-sm-9.col-sm-offset-3.col-md-10.col-md-offset-2.main {
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  float: none !important;
  position: static !important;
  left: auto !important;
}

/* ── Row padding normalisieren ──────────────────────────────────────── */
.intern-ci-content .row {
  margin-bottom: 16px !important;
}

/* ── Loading GIF Box ────────────────────────────────────────────────── */
.intern-ci-content #loading,
.intern-ci-content .loading {
  background: #fff !important;
  border: 1.5px solid #e5e7eb !important;
  border-radius: 12px !important;
  box-shadow: 0 4px 16px rgba(0,0,0,.08) !important;
  padding: 30px !important;
  text-align: center !important;
  font-size: 14px !important;
  color: #9ca3af !important;
}


/* ═══════════════════════════════════════════════════════════════════════
   INTERN LOADING OVERLAY  (intern_loading.js)
   ═══════════════════════════════════════════════════════════════════════ */

#seolyze-loading-overlay {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 99999;
  align-items: center;
  justify-content: center;
  font-family: 'Inter', sans-serif;
  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);
}

/* ── Box ─────────────────────────────────────────────────────────────── */
.slo-box {
  position: relative;
  z-index: 1;
  background: #1a2032;
  border: 1px solid rgba(255,144,0,.25);
  border-radius: 20px;
  padding: 36px 44px 32px;
  width: 420px;
  max-width: 92vw;
  box-shadow: 0 32px 80px rgba(0,0,0,.5), 0 0 0 1px rgba(255,144,0,.1);
}

/* ── Logo-Zeile ──────────────────────────────────────────────────────── */
.slo-logo-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 20px;
}
.slo-gear {
  width: 28px;
  height: 28px;
  color: #ff9000;
  animation: slo-spin 3s linear infinite;
  flex-shrink: 0;
}
@keyframes slo-spin { to { transform: rotate(360deg); } }
/* Button-Spinner (glyphicon-refresh während AJAX) */
.slo-spin-icon { animation: slo-spin .75s linear infinite !important; display: inline-block !important; }

.slo-brand {
  font-size: 20px;
  font-weight: 800;
  color: #fff;
  letter-spacing: -0.5px;
}
.slo-ai-badge {
  background: linear-gradient(135deg, #ff9000, #e07a00);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 10px;
  letter-spacing: .5px;
}

/* ── Titel ───────────────────────────────────────────────────────────── */
.slo-title {
  font-size: 15px;
  font-weight: 600;
  color: #e5e7eb;
  margin-bottom: 16px;
}

/* ── Progress Bar ────────────────────────────────────────────────────── */
.slo-progress-track {
  height: 4px;
  background: rgba(255,255,255,.08);
  border-radius: 4px;
  overflow: hidden;
  margin-bottom: 24px;
}
.slo-progress-fill {
  height: 100%;
  width: 2%;
  background: linear-gradient(90deg, #ff9000, #ffb74d);
  border-radius: 4px;
  transition: width .6s ease;
  box-shadow: 0 0 8px rgba(255,144,0,.6);
}

/* ── Steps ───────────────────────────────────────────────────────────── */
.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: 10px;
  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: rgba(255,144,0,.1);
  border-color: rgba(255,144,0,.3);
  box-shadow: 0 0 0 1px rgba(255,144,0,.15);
}
.slo-step.done {
  opacity: 0.55;
  background: rgba(34,197,94,.06);
  border-color: rgba(34,197,94,.2);
}
.slo-step-icon {
  font-size: 16px;
  width: 24px;
  text-align: center;
  flex-shrink: 0;
}
.slo-step-label {
  flex: 1;
  font-size: 13px;
  font-weight: 500;
  color: #d1d5db;
}
.slo-step.active .slo-step-label { color: #fff; }
.slo-step.done .slo-step-label   { color: #9ca3af; text-decoration: line-through; }

/* ── Checkmark / Spinner ────────────────────────────────────────────── */
.slo-step-check {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  flex-shrink: 0;
  border: 2px solid rgba(255,255,255,.1);
  transition: all .3s;
}
.slo-step.active .slo-step-check {
  border-color: #ff9000;
  border-top-color: transparent;
  animation: slo-spin .8s linear infinite;
}
.slo-step.done .slo-step-check {
  border-color: #22c55e;
  background: #22c55e;
  position: relative;
}
.slo-step.done .slo-step-check::after {
  content: '';
  position: absolute;
  top: 2px; left: 4px;
  width: 6px; height: 4px;
  border-left: 2px solid #fff;
  border-bottom: 2px solid #fff;
  transform: rotate(-45deg);
}

/* ── Hint ────────────────────────────────────────────────────────────── */
.slo-hint {
  font-size: 11px;
  color: #6b7280;
  text-align: center;
  line-height: 1.5;
}


/* ════════════════════════════════════════════════════════════════════════
   GLOBAL INTERN CARD SYSTEM  (.ic-*)  – v20260419e
   Shared across all intern content pages – no duplication needed
   ════════════════════════════════════════════════════════════════════════ */

/* ── Card shell ─────────────────────────────────────────────────────── */
.ic-card {
  background: #fff;
  border-radius: 16px;
  border: 1px solid #e5e7eb;
  box-shadow: 0 4px 20px rgba(0,0,0,.07);
  overflow: hidden;
  margin-bottom: 24px;
}
.ic-card-head {
  background: linear-gradient(90deg, rgba(255,143,0,.13) 0%, rgba(255,143,0,.04) 50%, transparent 100%);
  border-left: 3px solid rgba(255,143,0,.60);
  border-bottom: 1px solid rgba(255,143,0,.14);
  padding: 12px 18px;
  display: flex;
  align-items: center;
  gap: 10px;
}

/* Icon-Box */
.ic-card-head-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  flex-shrink: 0;
  font-size: 15px;
}
.ic-card-head-icon svg {
  width: 16px;
  height: 16px;
  stroke: rgba(255,143,0,.80);
  flex-shrink: 0;
}
.ic-card-head-title {
  font-size: 13px; font-weight: 700; color: var(--ci-t1, #0f172a);
  font-family: 'Inter', sans-serif; letter-spacing: .2px;
}
.ic-card-head-sub {
  font-size: 12px; color: var(--ci-t3, #64748b);
  font-family: 'Inter', sans-serif; margin-left: 4px;
}
.ic-card-head-badge {
  margin-left: auto;
  background: rgba(255,143,0,.12); color: #b86000;
  font-size: 10px; font-weight: 700;
  padding: 2px 8px; border-radius: 10px; letter-spacing: .5px;
  white-space: nowrap; flex-shrink: 0;
}
.ic-card-head-stat {
  margin-left: auto;
  font-size: 12px; color: var(--ci-t3, #64748b);
  font-family: 'Inter', sans-serif;
}
.ic-card-body { padding: 24px; }
.ic-card-body-flush { padding: 0; }

/* ── Form elements ──────────────────────────────────────────────────── */
.ic-label {
  display: flex; align-items: center; gap: 6px;
  font-size: 11px; font-weight: 700; color: #6b7280;
  text-transform: uppercase; letter-spacing: .6px;
  font-family: 'Inter', sans-serif;
  margin-bottom: 7px;
}
.ic-tip {
  width: 16px; height: 16px; border-radius: 50%;
  background: #ff9000; color: #fff;
  font-size: 10px; font-weight: 700;
  display: inline-flex; align-items: center; justify-content: center;
  cursor: help; flex-shrink: 0;
}
.ic-input, .ic-select, .ic-textarea {
  width: 100%; padding: 10px 14px; box-sizing: border-box;
  font-size: 13.5px; font-family: 'Inter', sans-serif;
  border: 1.5px solid #e5e7eb; border-radius: 10px;
  background: #fafafa; color: #1f2937; outline: none;
  transition: border-color .15s, box-shadow .15s, background .15s;
}
.ic-input:focus, .ic-select:focus, .ic-textarea:focus {
  border-color: #ff9000; background: #fff;
  box-shadow: 0 0 0 3px rgba(255,144,0,.12);
}
.ic-select {
  appearance: none; -webkit-appearance: none; cursor: pointer; height: 42px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23ff9000' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 12px center; padding-right: 32px;
}
.ic-input { height: 42px; }
.ic-textarea { resize: vertical; min-height: 110px; line-height: 1.6; height: auto; }
.ic-field { display: flex; flex-direction: column; }

/* ── Form grids ─────────────────────────────────────────────────────── */
.ic-form-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: end; }
.ic-form-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 16px; align-items: end; }
.ic-form-3a { display: grid; grid-template-columns: 2fr 1fr auto; gap: 16px; align-items: end; }
.ic-form-4 { display: grid; grid-template-columns: 1.2fr 1fr 1.4fr auto; gap: 16px; align-items: end; }
@media (max-width: 860px) {
  .ic-form-2, .ic-form-3, .ic-form-3a, .ic-form-4, .ic-form-4a { grid-template-columns: 1fr; }
}

/* ── Table ──────────────────────────────────────────────────────────── */
.ic-table-wrap { overflow-x: auto; }
.ic-table {
  width: 100%; border-collapse: collapse;
  font-family: 'Inter', sans-serif; font-size: 13px;
}
.ic-table thead tr { background: linear-gradient(135deg, #ff9000, #e07400); }
.ic-table thead th {
  color: #fff; font-weight: 700; font-size: 11px;
  text-transform: uppercase; letter-spacing: .5px;
  padding: 12px 14px; text-align: left; white-space: nowrap;
}
.ic-table thead th.center { text-align: center; }
.ic-table tbody tr { border-bottom: 1px solid #f3f4f6; transition: background .12s; }
.ic-table tbody tr:hover { background: #fffbf5; }
.ic-table tbody td {
  padding: 11px 14px; color: #374151; vertical-align: middle;
}
.ic-table tbody td.center { text-align: center; }
.ic-table tbody td.right { text-align: right; }
.ic-table a { color: #ff9000; font-weight: 600; text-decoration: none; }
.ic-table a:hover { text-decoration: underline; }
.ic-table .del-link { color: #ef4444 !important; }

/* Gespeicherte Analysen: Editor-Badge */
.sa-editor-badge {
  display: inline-block;
  padding: 2px 7px;
  border-radius: 6px;
  border: 1px solid;
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
}

/* Ranking position badges */
.ic-rank-badge {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 32px; height: 26px; border-radius: 6px; padding: 0 8px;
  font-weight: 700; font-size: 13px; font-family: 'Inter', sans-serif;
}
.ic-rank-top    { background: #dcfce7; color: #166534; }
.ic-rank-good   { background: #fff8e1; color: #b45309; }
.ic-rank-mid    { background: #f3f4f6; color: #6b7280; }
.ic-rank-none   { background: #f3f4f6; color: #9ca3af; font-weight: 400; font-size: 11px; }

/* ── Empty state ────────────────────────────────────────────────────── */
.ic-empty {
  text-align: center; padding: 48px 20px;
  font-family: 'Inter', sans-serif;
}
.ic-empty-icon { font-size: 36px; margin-bottom: 10px; }
.ic-empty-text { font-size: 14px; color: #9ca3af; }

/* ── Info / pricing box ─────────────────────────────────────────────── */
.ic-info-box {
  background: linear-gradient(135deg, #fffbf5, #fff8ed);
  border: 1px solid #fed7aa; border-radius: 12px;
  padding: 14px 18px; margin-bottom: 20px;
  font-size: 13.5px; color: #92400e;
  font-family: 'Inter', sans-serif; line-height: 1.6;
}
.ic-warn-box {
  background: linear-gradient(135deg, #fffbeb, #fef3c7);
  border: 1px solid #fde68a; border-radius: 12px;
  padding: 14px 18px; margin-bottom: 20px;
  font-size: 13.5px; color: #78350f;
  font-family: 'Inter', sans-serif; line-height: 1.6;
}
.ic-blue-box {
  background: linear-gradient(135deg, #f0f9ff, #e0f2fe);
  border: 1px solid #bae6fd; border-radius: 12px;
  padding: 14px 18px; margin-bottom: 20px;
  font-size: 13px; color: #0c4a6e;
  font-family: 'Inter', sans-serif; line-height: 1.6;
}

/* ── Stat chips ─────────────────────────────────────────────────────── */
.ic-stats-row {
  display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 20px;
}
.ic-stat-chip {
  background: #f9fafb; border: 1px solid #e5e7eb;
  border-radius: 10px; padding: 10px 16px;
  font-family: 'Inter', sans-serif;
  display: flex; flex-direction: column; gap: 2px;
}
.ic-stat-chip-val {
  font-size: 20px; font-weight: 800; color: #1f2937;
  line-height: 1;
}
.ic-stat-chip-label {
  font-size: 11px; color: #9ca3af; text-transform: uppercase; letter-spacing: .4px;
}
.ic-stat-chip-val.orange { color: #ff9000; }
.ic-stat-chip-val.green  { color: #6fb130; }

/* ── Country stat tiles ─────────────────────────────────────────────── */
.ic-country-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  margin-bottom: 20px;
}
@media (max-width: 700px) { .ic-country-grid { grid-template-columns: repeat(2,1fr); } }
.ic-country-tile {
  background: #f9fafb; border: 1px solid #e5e7eb;
  border-radius: 12px; padding: 16px 12px;
  text-align: center;
  font-family: 'Inter', sans-serif;
  transition: border-color .15s, box-shadow .15s;
}
.ic-country-tile:hover { border-color: #ff9000; box-shadow: 0 2px 10px rgba(255,144,0,.1); }
.ic-country-tile img { width: 36px; margin-bottom: 8px; }
.ic-country-tile-vol { font-size: 22px; font-weight: 800; color: #ff9000; }
.ic-country-tile-label { font-size: 11px; color: #6b7280; margin-top: 2px; }

/* ── SERP result preview (Keyword Research) ─────────────────────────── */
.ic-serp-item {
  padding: 10px 0;
  border-bottom: 1px solid #f3f4f6;
}
.ic-serp-item:last-child { border-bottom: none; }
.ic-serp-title { font-size: 13px; color: #1a0dab; font-weight: 600; margin-bottom: 2px; }
.ic-serp-url   { font-size: 11px; color: #006621; margin-bottom: 3px; }
.ic-serp-desc  { font-size: 12px; color: #545454; line-height: 1.4; }

/* ── Status pill ────────────────────────────────────────────────────── */
.ic-status-pill {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 11px; font-weight: 700; padding: 3px 10px; border-radius: 20px;
  font-family: 'Inter', sans-serif;
}
.ic-status-ok  { background: #dcfce7; color: #166534; }
.ic-status-exp { background: #fee2e2; color: #991b1b; }


/* ══════════════════════════════════════════════════════════════════════
   INTERN TOPBAR – modern redesign v2026
   ══════════════════════════════════════════════════════════════════════ */

/* Override old topbar */
.intern-ci-topbar {
  display: flex;
  align-items: center;
  gap: 16px;
  height: 64px;
  padding: 0 20px;
  background: #ffffff;
  border-bottom: 1px solid #e5e7eb;
  box-shadow: 0 1px 6px rgba(0,0,0,.06);
  position: sticky;
  top: 0;
  z-index: 200;
  flex-shrink: 0;
}

/* ── Search ──────────────────────────────────────────────────────────── */
.itb-search {
  display: flex;
  align-items: center;
  gap: 0;
  background: #f3f4f6;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  padding: 0 12px;
  height: 36px;
  min-width: 220px;
  max-width: 300px;
  transition: border-color .15s, box-shadow .15s;
}
.itb-search:focus-within {
  border-color: #8f5fc4;
  box-shadow: 0 0 0 3px rgba(143,95,196,.12);
  background: #fff;
}
.itb-search-icon {
  width: 15px; height: 15px;
  color: #9ca3af;
  flex-shrink: 0;
  margin-right: 8px;
}
.itb-search-input {
  border: none;
  background: transparent;
  outline: none;
  font-size: 13px;
  color: #374151;
  font-family: 'Inter', sans-serif;
  width: 100%;
}
.itb-search-input::placeholder { color: #9ca3af; }

/* ── Center badge ───────────────────────────────────────────────────── */
.itb-center {
  flex: 1;
  display: flex;
  justify-content: center;
  pointer-events: none;
}
.itb-area-badge {
  display: inline-flex;
  align-items: center;
  background: linear-gradient(135deg, #ff9000 0%, #e07400 100%);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  font-family: 'Inter', sans-serif;
  letter-spacing: .5px;
  padding: 5px 14px;
  border-radius: 20px;
  box-shadow: 0 2px 8px rgba(255,144,0,.25);
  text-transform: uppercase;
}

/* ── Spacer ─────────────────────────────────────────────────────────── */
.intern-topbar-spacer { flex: 1; }

/* ── Bell ───────────────────────────────────────────────────────────── */
.itb-bell-wrap {
  position: relative;
}
.itb-bell-btn {
  width: 46px; height: 46px;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  background: #f9fafb;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  color: #6b7280;
  position: relative;
  transition: background .15s, border-color .15s;
}
.itb-bell-btn:hover { background: #f3f4f6; border-color: #d1d5db; color: #374151; }
.itb-bell-dot {
  position: absolute;
  top: 7px; right: 7px;
  width: 8px; height: 8px;
  background: #ef4444;
  border-radius: 50%;
  border: 1.5px solid #fff;
}
.itb-bell-dropdown {
  position: absolute;
  top: 46px; right: 0;
  width: 320px;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  box-shadow: 0 8px 24px rgba(0,0,0,.12);
  overflow: hidden;
  z-index: 9999;
}
.itb-bell-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px 10px;
  font-size: 13px;
  font-weight: 700;
  color: #111827;
  font-family: 'Inter', sans-serif;
  border-bottom: 1px solid #f3f4f6;
}
.itb-bell-mark-all {
  font-size: 11px;
  font-weight: 500;
  color: #8f5fc4;
  background: none;
  border: none;
  cursor: pointer;
  font-family: 'Inter', sans-serif;
}
.itb-bell-mark-all:hover { text-decoration: underline; }
.itb-bell-list {
  max-height: 320px;
  overflow-y: auto;
}
.itb-bell-empty {
  padding: 20px;
  text-align: center;
  font-size: 12px;
  color: #9ca3af;
  font-family: 'Inter', sans-serif;
}
.itb-bell-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 16px;
  border-bottom: 1px solid #f9fafb;
  cursor: pointer;
  transition: background .1s;
}
.itb-bell-item:hover { background: #f9fafb; }
.itb-bell-item.unread { background: #fdf3ff; }
.itb-bell-item-icon { font-size: 14px; flex-shrink: 0; margin-top: 1px; }
.itb-bell-item-body { flex: 1; min-width: 0; }
.itb-bell-item-title {
  font-size: 12px;
  font-weight: 600;
  color: #111827;
  font-family: 'Inter', sans-serif;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.itb-bell-item-title a { color: #8f5fc4; text-decoration: none; }
.itb-bell-item-title a:hover { text-decoration: underline; }
.itb-bell-item-msg {
  font-size: 11px;
  color: #6b7280;
  font-family: 'Inter', sans-serif;
  margin-top: 2px;
  line-height: 1.4;
}

/* ── User dropdown ──────────────────────────────────────────────────── */
.itb-user-wrap { position: relative; }
.itb-user-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 46px;
  padding: 0 14px;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  background: #f9fafb;
  cursor: pointer;
  font-family: 'Inter', sans-serif;
  color: #374151;
  font-size: 13px;
  font-weight: 500;
  transition: background .15s, border-color .15s;
}
.itb-user-btn:hover { background: #f3f4f6; border-color: #d1d5db; }
.itb-avatar {
  width: 26px; height: 26px;
  border-radius: 50%;
  background: linear-gradient(135deg, #8f5fc4 0%, #6d3fa8 100%);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.itb-user-name {
  max-width: 120px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.itb-user-dropdown {
  position: absolute;
  top: 46px; right: 0;
  width: 200px;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  box-shadow: 0 8px 24px rgba(0,0,0,.12);
  overflow: hidden;
  z-index: 9999;
}
.itb-user-dd-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  font-size: 13px;
  color: #374151;
  font-family: 'Inter', sans-serif;
  text-decoration: none;
  transition: background .1s;
}
.itb-user-dd-item:hover { background: #f9fafb; }
.itb-user-dd-item svg { color: #6b7280; flex-shrink: 0; }
.itb-user-dd-sep { height: 1px; background: #f3f4f6; margin: 4px 0; }
.itb-logout { color: #ef4444; }
.itb-logout svg { color: #ef4444; }


/* ══════════════════════════════════════════════════════════════════════
   WDF/IDF COLLAPSIBLE FORM CARD (eps-kf)
   ══════════════════════════════════════════════════════════════════════ */
.kf-form-card {
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 14px;
  box-shadow: 0 2px 8px rgba(0,0,0,.04);
  margin-bottom: 20px;
  overflow: hidden;
}
.kf-form-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 20px;
  background: linear-gradient(135deg, #1e1b4b 0%, #312e81 100%);
  cursor: pointer;
  user-select: none;
}
.kf-form-card-title {
  font-size: 13px;
  font-weight: 700;
  color: #fff;
  font-family: 'Inter', sans-serif;
  display: flex;
  align-items: center;
  gap: 8px;
}
.kf-form-card-title .kf-form-kw-label {
  background: rgba(255,255,255,.15);
  color: rgba(255,255,255,.9);
  font-size: 11px;
  font-weight: 500;
  padding: 2px 10px;
  border-radius: 10px;
  margin-left: 4px;
}
.kf-form-toggle-btn {
  width: 28px; height: 28px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.2);
  border-radius: 6px;
  cursor: pointer;
  color: #fff;
  transition: background .15s, transform .2s;
}
.kf-form-toggle-btn:hover { background: rgba(255,255,255,.22); }
.kf-form-toggle-btn.collapsed { transform: rotate(-90deg); }
.kf-form-body {
  padding: 20px 24px 16px;
}
.kf-form-body.kf-collapsed {
  display: none;
}

/* ── Overrides for Bootstrap form-controls inside .kf-form-body ─── */
.kf-form-body .control-label {
  font-size: 12px;
  font-weight: 600;
  color: #374151;
  font-family: 'Inter', sans-serif;
  margin-bottom: 5px;
}
.kf-form-body .form-control,
.kf-form-body input[type="text"].form-control,
.kf-form-body select.form-control,
.kf-form-body textarea.form-control {
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  font-size: 13px;
  font-family: 'Inter', sans-serif;
  color: #111827;
  padding: 8px 12px;
  height: auto;
  box-shadow: none;
  transition: border-color .15s, box-shadow .15s;
}
.kf-form-body .form-control:focus {
  border-color: #8f5fc4;
  box-shadow: 0 0 0 3px rgba(143,95,196,.12);
  outline: none;
}
.kf-form-body .input-group-addon {
  border: 1px solid #e5e7eb;
  background: #f9fafb;
  border-radius: 0 8px 8px 0;
  color: #9ca3af;
}
.kf-form-body .input-group .form-control {
  border-radius: 8px 0 0 8px;
}
.kf-form-body .btn.seolyzebtn {
  height: auto;
  padding: 8px 20px;
  font-size: 13px;
}

/* radio/checkbox area */
.kf-form-body .row > div [style*="border:1px solid #ccc"] {
  border: 1px solid #e5e7eb !important;
  border-radius: 10px !important;
  background: #f9fafb !important;
  padding: 12px 16px !important;
}
.kf-form-body .row .btnrow { margin-top: 16px; }

/* ── Toggle custom-urls button inside form ─────────────────────── */
.kf-form-body .btn-group .btn-default {
  background: #f3f4f6;
  border: 1px solid #e5e7eb;
  color: #6b7280;
  font-size: 12px;
  font-family: 'Inter', sans-serif;
  border-radius: 7px;
  transition: background .15s;
}
.kf-form-body .btn-group .btn-default:hover { background: #e5e7eb; color: #374151; }


/* ══════════════════════════════════════════════════════════════════════
   WDF/IDF RESULT AREA – modern cards
   ══════════════════════════════════════════════════════════════════════ */

/* ── Step header bar (keyword + buttons) ────────────────────────────── */
.kf-result-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 16px;
}
.kf-result-kw {
  font-size: 15px;
  font-weight: 700;
  color: #111827;
  font-family: 'Inter', sans-serif;
}
.kf-result-meta {
  font-size: 12px;
  color: #6b7280;
  font-family: 'Inter', sans-serif;
  margin-top: 2px;
}
.kf-result-actions .btn-group {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.kf-result-actions .btn-group .btn-default {
  border-radius: 8px;
  font-size: 12px;
  font-family: 'Inter', sans-serif;
  height: 34px;
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 0 12px;
  background: linear-gradient(135deg, #ff9000 0%, #e07400 100%);
  color: #fff;
  border: none;
  box-shadow: 0 2px 6px rgba(255,144,0,.25);
  transition: opacity .15s;
}
.kf-result-actions .btn-group .btn-default:hover { opacity: .88; }

/* ── Save-Panel (Inline-Form nach Button-Klick) ─────────────────────── */
.kf-save-panel {
  margin-top: 10px;
  border-radius: 14px;
  border: 1.5px solid #d4b8f0;
  background: linear-gradient(135deg, #faf7fe, #f5f0fd);
  overflow: hidden;
  box-shadow: 0 4px 18px rgba(143,95,196,.10);
}
.kf-save-panel-inner { padding: 18px 22px 20px; }
.kf-save-panel-head {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 16px;
}
.kf-save-panel-icon { font-size: 20px; flex-shrink: 0; margin-top: 2px; }
.kf-save-panel-title {
  font-size: 14px;
  font-weight: 700;
  color: #1f2937;
  font-family: 'Inter', sans-serif;
  margin-bottom: 3px;
}
.kf-save-panel-sub {
  font-size: 12px;
  color: #6b7280;
  font-family: 'Inter', sans-serif;
  line-height: 1.5;
}
.kf-save-panel-close {
  margin-left: auto;
  flex-shrink: 0;
  background: none;
  border: none;
  font-size: 16px;
  color: #9ca3af;
  cursor: pointer;
  padding: 2px 6px;
  border-radius: 6px;
  transition: background .12s, color .12s;
}
.kf-save-panel-close:hover { background: rgba(0,0,0,.07); color: #374151; }
.kf-save-panel-body {
  display: flex;
  gap: 10px;
  align-items: center;
}
.kf-save-notes-input {
  flex: 1;
  height: 38px;
  border: 1.5px solid #d4b8f0;
  border-radius: 9px;
  padding: 0 14px;
  font-size: 13px;
  font-family: 'Inter', sans-serif;
  color: #374151;
  background: #fff;
  outline: none;
  transition: border-color .15s, box-shadow .15s;
}
.kf-save-notes-input:focus {
  border-color: #8F5FC4;
  box-shadow: 0 0 0 3px rgba(143,95,196,.15);
}
.kf-save-notes-input::placeholder { color: #b9bfc9; }
.kf-save-panel-btn {
  flex-shrink: 0;
  height: 38px;
  padding: 0 20px;
  background: #8F5FC4;
  color: #fff;
  border: none;
  border-radius: 9px;
  font-size: 13px;
  font-weight: 600;
  font-family: 'Inter', sans-serif;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 7px;
  transition: background .15s, box-shadow .15s;
}
.kf-save-panel-btn:hover { background: #7a4fb0; box-shadow: 0 3px 10px rgba(143,95,196,.3); }
.kf-save-panel-btn:disabled { opacity: .65; cursor: default; }
.kf-save-panel-btn-icon { font-size: 13px; }

/* ── OnPage analysebox stats → modern grid ──────────────────────────── */
.kf-stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
  gap: 10px;
  margin-bottom: 20px;
}
.kf-stat-item {
  background: #fff;
  border: 1px solid var(--ci-border, #e8eaed);
  border-left: 3px solid var(--ci-accent, #ff8f00);
  border-radius: 10px;
  padding: 12px 14px;
  text-align: center;
  box-shadow: 0 1px 4px rgba(0,0,0,.05);
  transition: box-shadow .15s;
}
.kf-stat-item:hover {
  box-shadow: 0 3px 10px rgba(0,0,0,.08);
}
.kf-stat-item-label {
  font-size: 10px;
  font-weight: 600;
  color: #9ca3af;
  text-transform: uppercase;
  letter-spacing: .5px;
  font-family: 'Inter', sans-serif;
  margin-bottom: 6px;
}
.kf-stat-item-val {
  font-size: 18px;
  font-weight: 700;
  color: #111827;
  font-family: 'Inter', sans-serif;
  line-height: 1;
}
.kf-stat-item-ref {
  font-size: 11px;
  font-weight: 500;
  font-family: 'Inter', sans-serif;
  margin-top: 4px;
}
.kf-stat-item-ref.good { color: #16a34a; }
.kf-stat-item-ref.warn { color: #d97706; }
.kf-stat-item-ref.bad  { color: #dc2626; }

/* ── Proof keyword panels ───────────────────────────────────────────── */
.kf-proof-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin: 16px 0;
}
@media (max-width: 900px) { .kf-proof-grid { grid-template-columns: repeat(2, 1fr); } }
.kf-proof-panel {
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  overflow: hidden;
}
.kf-proof-panel-head {
  padding: 8px 14px;
  font-size: 11px;
  font-weight: 700;
  font-family: 'Inter', sans-serif;
  letter-spacing: .3px;
}
.kf-proof-panel-head.ph-good  { background: #dcfce7; color: #166534; }
.kf-proof-panel-head.ph-up    { background: #fef9c3; color: #92400e; }
.kf-proof-panel-head.ph-down  { background: #ffedd5; color: #9a3412; }
.kf-proof-panel-head.ph-miss  { background: #fee2e2; color: #991b1b; }
.kf-proof-panel-body {
  padding: 10px 14px;
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  min-height: 40px;
}
.kf-proof-tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  font-weight: 500;
  font-family: 'Inter', sans-serif;
  padding: 3px 9px;
  border-radius: 12px;
  border: 1px solid transparent;
}
.kf-proof-tag.tag-good  { background: #f0fdf4; color: #16a34a; border-color: #bbf7d0; }
.kf-proof-tag.tag-up    { background: #fefce8; color: #854d0e; border-color: #fde68a; }
.kf-proof-tag.tag-down  { background: #fff7ed; color: #9a3412; border-color: #fed7aa; }
.kf-proof-tag.tag-miss  { background: #fef2f2; color: #991b1b; border-color: #fecaca; }
.kf-proof-tag a { color: inherit; text-decoration: none; }
.kf-proof-tag a:hover { text-decoration: underline; }

/* ── Stopwords notice ───────────────────────────────────────────────── */
.kf-stopwords-box {
  background: #fefce8;
  border: 1px solid #fde68a;
  border-radius: 8px;
  padding: 10px 14px;
  font-size: 12px;
  font-family: 'Inter', sans-serif;
  color: #78350f;
  margin-bottom: 12px;
}

/* ── Step nav tabs ──────────────────────────────────────────────────── */
.kf-step-tabs {
  display: flex;
  align-items: flex-end;
  gap: 4px;
  margin-bottom: 0;
  border-bottom: 2px solid #d1d5db;
  padding-bottom: 0;
  flex-wrap: wrap;
}
.kf-step-tab {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 11px 18px;
  font-size: 13.5px;
  font-weight: 600;
  font-family: 'Inter', sans-serif;
  color: #6b7280;
  text-decoration: none;
  border-radius: 10px 10px 0 0;
  border: 1.5px solid #e5e7eb;
  border-bottom: none;
  background: #f3f4f6;
  transition: color .15s, background .15s, border-color .15s;
  margin-bottom: -2px;
  position: relative;
  z-index: 1;
  white-space: nowrap;
}
.kf-step-tab .kf-tab-icon { font-size: 16px; line-height: 1; }
.kf-step-tab:hover {
  color: #374151;
  background: #e9ebee;
  text-decoration: none;
  border-color: #d1d5db;
}
.kf-step-tab.active {
  color: #111827;
  font-weight: 700;
  background: #fff;
  border-color: #d1d5db;
  border-bottom: 2px solid #fff;
  z-index: 3;
}
/* Content panel — connects to the tab bar */
.kf-step-panel {
  background: #fff;
  border: 1.5px solid #d1d5db;
  border-top: none;
  border-radius: 0 0 14px 14px;
  padding: 20px;
  margin-bottom: 20px;
  position: relative;
  z-index: 2;
}
/* ic-cards inside panel need no extra margin-top on first child */
.kf-step-panel > *:first-child { margin-top: 0; }

/* Thin orange accent line on top of active tab */
.kf-step-tab.active::before {
  content: '';
  position: absolute;
  top: -1px; left: -1px; right: -1px;
  height: 3px;
  background: #ff8000;
  border-radius: 10px 10px 0 0;
}
/* Content area directly below tab row — remove top border gap */
.kf-step-tabs + * {
  position: relative;
  z-index: 2;
}

/* ── Chart card shells ──────────────────────────────────────────────── */
.kf-chart-card {
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 14px;
  overflow: hidden;
  margin-bottom: 16px;
}
.kf-chart-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  border-bottom: 1px solid #f3f4f6;
}
.kf-chart-card-title {
  font-size: 13px;
  font-weight: 700;
  color: #111827;
  font-family: 'Inter', sans-serif;
}
.kf-chart-card-body {
  padding: 16px;
}
.kf-proof-btn-row {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}
.kf-proof-btn-row .btn {
  border-radius: 7px;
  font-size: 11px;
  font-family: 'Inter', sans-serif;
  padding: 5px 12px;
  height: auto;
  background: #f3f4f6;
  border: 1px solid #e5e7eb;
  color: #6b7280;
  transition: background .15s;
}
.kf-proof-btn-row .btn:hover { background: #e5e7eb; color: #374151; }
/* Proof-Buttons im hellen ic-card-head */
.ic-card-head .kf-proof-btn-row { margin-bottom: 0; align-items: center; }
.ic-card-head .kf-proof-btn-row .btn {
  background: rgba(255,143,0,.10);
  border: 1px solid rgba(255,143,0,.25);
  color: #b86000;
  font-size: 11px;
}
.ic-card-head .kf-proof-btn-row .btn:hover {
  background: rgba(255,143,0,.20);
  color: #8f4500;
}

/* ── Projects table (Step 0 / quick overview) ───────────────────────── */
.kf-projects-card .ic-table tbody tr:hover td { background: #fafafa; }

/* ── Einzelübersicht grid (Step 4) ──────────────────────────────────── */
.kf-einzel-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  margin-bottom: 20px;
}
@media (max-width: 800px) { .kf-einzel-grid { grid-template-columns: 1fr; } }
.kf-einzel-item {
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  overflow: hidden;
}
.kf-einzel-item-head {
  background: #f9fafb;
  border-bottom: 1px solid #f3f4f6;
  padding: 10px 14px;
  font-size: 11px;
  font-weight: 600;
  color: #374151;
  font-family: 'Inter', sans-serif;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.kf-einzel-item-body {
  padding: 8px;
}

/* ══════════════════════════════════════════════════════════════════════
   TOPBAR – AREA SWITCHER DROPDOWN
   ══════════════════════════════════════════════════════════════════════ */
.itb-area-wrap { position: relative; }
.itb-area-btn {
  display: inline-flex; align-items: center; gap: 10px;
  background: #ff8000; color: #fff;
  border: none; border-radius: 10px;
  padding: 0 18px; height: 46px;
  font-family: 'Inter', sans-serif; font-size: 13px; font-weight: 700;
  cursor: pointer; white-space: nowrap;
  transition: background .15s, box-shadow .15s;
  box-shadow: 0 1px 6px rgba(255,128,0,.25);
  letter-spacing: .01em;
}
.itb-area-btn:hover { background: #e67300; }
.itb-area-btn.open  { background: #e67300; box-shadow: 0 1px 6px rgba(255,128,0,.35); }
.itb-area-dot { display: none; }  /* dot hidden – color is on the button itself */
.itb-area-chevron { opacity: .75; flex-shrink: 0; transition: transform .2s; }
.itb-area-btn.open .itb-area-chevron { transform: rotate(180deg); }

.itb-area-dropdown {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  min-width: 270px;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 14px;
  box-shadow: 0 8px 28px rgba(0,0,0,.13);
  overflow: hidden;
  z-index: 9999;
  animation: itbDropIn .13s ease;
}
@keyframes itbDropIn {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: none; }
}
.itb-area-dd-item {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 16px; text-decoration: none; color: #374151;
  transition: background .1s;
}
.itb-area-dd-item:hover  { background: #f9fafb; }
.itb-area-dd-item.active { background: #fff8f0; }
.itb-area-dd-dot {
  width: 10px; height: 10px;
  border-radius: 50%; flex-shrink: 0;
}
.itb-area-dd-name {
  font-family: 'Inter', sans-serif; font-size: 13px;
  font-weight: 700; color: #111827; line-height: 1.2;
}
.itb-area-dd-desc {
  font-family: 'Inter', sans-serif; font-size: 11px;
  color: #9ca3af; margin-top: 2px;
}
.itb-area-dd-badge {
  margin-left: auto; flex-shrink: 0;
  padding: 3px 9px; border-radius: 6px;
  font-family: 'Inter', sans-serif; font-size: 10px;
  font-weight: 700; white-space: nowrap; letter-spacing: .3px;
}
.itb-area-dd-sep { height: 1px; background: #f3f4f6; margin: 2px 0; }

/* ══════════════════════════════════════════════════════════════════════════
   TOPBAR – Area Switcher Dropdown
   ══════════════════════════════════════════════════════════════════════════ */
.itb-area-wrap {
  position: relative;
  flex-shrink: 0;
}
.itb-area-btn {
  display: flex;
  align-items: center;
  gap: 10px;
  background: #ff8000;
  border: 1.5px solid #ff8000;
  border-radius: 12px;
  padding: 10px 18px;
  cursor: pointer;
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  font-weight: 700;
  color: #fff;
  box-shadow: 0 2px 8px rgba(255,128,0,.25);
  transition: background .15s, border-color .15s, box-shadow .15s;
  white-space: nowrap;
  min-height: 46px;
}
.itb-area-btn:hover {
  background: #e67300;
  border-color: #e67300;
  box-shadow: 0 3px 12px rgba(255,128,0,.35);
}
.itb-area-btn.open {
  background: #e67300;
  border-color: #e67300;
  box-shadow: 0 3px 12px rgba(255,128,0,.35);
}
.itb-area-btn .itb-area-dot { display: none; }
.itb-area-btn .itb-area-chevron { opacity: .75; }
.itb-area-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}
.itb-area-chevron {
  opacity: .45;
  transition: transform .2s;
  margin-left: 2px;
}
.itb-area-btn.open .itb-area-chevron {
  transform: rotate(180deg);
}

/* Dropdown panel */
.itb-area-dropdown {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  min-width: 260px;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 14px;
  box-shadow: 0 8px 32px rgba(0,0,0,.13);
  padding: 8px;
  z-index: 9999;
  animation: itbDropIn .15s ease;
}
@keyframes itbDropIn {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Each area item */
.itb-area-dd-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 10px;
  text-decoration: none;
  cursor: pointer;
  transition: background .12s;
  border: none;
  background: none;
  width: 100%;
}
.itb-area-dd-item:hover {
  background: #f9fafb;
  text-decoration: none;
}
.itb-area-dd-item.active {
  background: #f5f0fc;
}
.itb-area-dd-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  flex-shrink: 0;
}
.itb-area-dd-name {
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  font-weight: 700;
  color: #111827;
  line-height: 1.2;
}
.itb-area-dd-desc {
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  color: #9ca3af;
  margin-top: 1px;
}
.itb-area-dd-badge {
  margin-left: auto;
  font-family: 'Inter', sans-serif;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .04em;
  padding: 2px 7px;
  border-radius: 20px;
  text-transform: uppercase;
  flex-shrink: 0;
}
.itb-area-dd-sep {
  height: 1px;
  background: #f3f4f6;
  margin: 4px 0;
}

/* Topbar: remove old center + search, area btn takes left slot */
.intern-ci-topbar .itb-center { display: none !important; }
.intern-ci-topbar .itb-search  { display: none !important; }

/* ══════════════════════════════════════════════════════════════════════
   TOPBAR – AREA SWITCHER DROPDOWN
   ══════════════════════════════════════════════════════════════════════ */
.itb-area-wrap { position: relative; }
.itb-area-btn {
  display: inline-flex; align-items: center; gap: 10px;
  background: #ff8000; color: #fff;
  border: none; border-radius: 10px;
  padding: 0 18px; height: 46px;
  font-family: 'Inter', sans-serif; font-size: 13px; font-weight: 700;
  cursor: pointer; white-space: nowrap;
  transition: background .15s, box-shadow .15s;
  box-shadow: 0 1px 6px rgba(255,128,0,.25);
  letter-spacing: .01em;
}
.itb-area-btn:hover { background: #e67300; }
.itb-area-btn.open  { background: #e67300; box-shadow: 0 1px 6px rgba(255,128,0,.35); }
.itb-area-dot { display: none; }
.itb-area-chevron { opacity: .75; flex-shrink: 0; transition: transform .2s; }
.itb-area-btn.open .itb-area-chevron { transform: rotate(180deg); }

.itb-area-dropdown {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  min-width: 270px;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 14px;
  box-shadow: 0 8px 28px rgba(0,0,0,.13);
  overflow: hidden;
  z-index: 9999;
  animation: itbDropIn .13s ease;
}
@keyframes itbDropIn {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: none; }
}
.itb-area-dd-item {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 16px; text-decoration: none; color: #374151;
  transition: background .12s;
}

/* ══════════════════════════════════════════════════════════════════
   USER CENTER  (uc-*)
   ══════════════════════════════════════════════════════════════════ */
.uc-wrap { width: 100%; }

/* ── Tab Bar ──────────────────────────────────────────────────────── */
.uc-tabs {
  display: flex;
  position: relative;
  background: #fff;
  border: 1.5px solid #e5e7eb;
  border-bottom: none;
  border-radius: 14px 14px 0 0;
  overflow: hidden;
}
/* Override Bootstrap button styles completely */
.uc-tabs .uc-tab,
.uc-tabs .uc-tab:focus,
.uc-tabs .uc-tab:active,
.uc-tabs .uc-tab:hover {
  flex: 1;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 7px;
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  outline: none !important;
  padding: 15px 20px !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  color: #9ca3af !important;
  cursor: pointer;
  position: relative;
  z-index: 1;
  transition: color .2s;
  text-decoration: none !important;
}
.uc-tabs .uc-tab:hover { color: #8F5FC4 !important; }
.uc-tabs .uc-tab.active { color: #8F5FC4 !important; }

/* Sliding underline indicator */
.uc-tab-indicator {
  position: absolute;
  bottom: 0; left: 0;
  height: 3px;
  width: 33.33%;
  background: #8F5FC4;
  border-radius: 3px 3px 0 0;
  transition: left .22s cubic-bezier(.4,0,.2,1), width .22s cubic-bezier(.4,0,.2,1);
  z-index: 2;
}

/* ── Panel (content area) ─────────────────────────────────────────── */
.uc-panel {
  width: 100%;
  border: 1.5px solid #e5e7eb;
  border-top: none;
  border-radius: 0 0 14px 14px;
  padding: 20px;
  background: #f9fafb;
  box-sizing: border-box;
}

/* ── Abo Status ───────────────────────────────────────────────────── */
.uc-status-row { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.uc-status-badge { padding: 6px 14px; border-radius: 8px; font-size: 13px; font-weight: 700; }
.uc-badge-ok  { background: #d1fae5; color: #065f46; }
.uc-badge-err { background: #fee2e2; color: #991b1b; }
.uc-status-info { display: flex; flex-direction: column; gap: 2px; }
.uc-status-label { font-size: 11px; color: #9ca3af; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; }
.uc-status-val   { font-size: 14px; color: #111827; font-weight: 600; }

/* ── Download Button ──────────────────────────────────────────────── */
.uc-dl-btn {
  display: inline-flex; align-items: center; gap: 5px;
  background: #f3f4f6; color: #374151 !important;
  border-radius: 7px; padding: 5px 11px;
  font-size: 12px; font-weight: 600; text-decoration: none !important;
  transition: background .13s;
}
.uc-dl-btn:hover { background: #e5e7eb; }

/* ── Forms ────────────────────────────────────────────────────────── */
.uc-form-desc { font-size: 13px; color: #6b7280; margin-bottom: 20px; }
.uc-fields { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 0 24px; }
.uc-field { margin-bottom: 16px; }
.uc-label { display: block; font-size: 12px; font-weight: 600; color: #374151; margin-bottom: 6px; }
.uc-input {
  width: 100%; height: 40px; padding: 0 12px;
  border: 1.5px solid #e5e7eb; border-radius: 8px;
  font-family: 'Inter', sans-serif; font-size: 13px; color: #111827;
  background: #fff; transition: border-color .15s; box-sizing: border-box;
}
.uc-input:focus { outline: none; border-color: #8F5FC4; box-shadow: 0 0 0 3px rgba(143,95,196,.12); }
.uc-save-btn,
.uc-save-btn:focus,
.uc-save-btn:hover {
  display: inline-flex !important; align-items: center; gap: 7px;
  background: #8F5FC4 !important; color: #fff !important;
  border: none !important; border-radius: 9px !important;
  padding: 0 20px !important; height: 40px;
  font-family: 'Inter', sans-serif !important; font-size: 13px !important; font-weight: 700 !important;
  cursor: pointer;
}
.uc-save-btn:hover { background: #7a4fb0 !important; }

/* ── Alerts ───────────────────────────────────────────────────────── */
.uc-alert { border-radius: 8px; padding: 10px 14px; font-size: 13px; font-weight: 600; margin-bottom: 14px; }
.uc-ok  { background: #d1fae5; color: #065f46; }
.uc-err { background: #fee2e2; color: #991b1b; }

/* ══════════════════════════════════════════════════════════════════
   IC-CARD TOGGLE BUTTON
   ══════════════════════════════════════════════════════════════════ */
.ic-card-head { cursor: pointer; user-select: none; }

.ic-card-toggle-btn {
  width: 28px; height: 28px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(0,0,0,.06);
  border: 1px solid rgba(0,0,0,.10);
  border-radius: 6px;
  cursor: pointer;
  color: var(--ci-t2, #334155);
  margin-left: auto;
  flex-shrink: 0;
  transition: background .15s, transform .2s;
}
.ic-card-toggle-btn:hover { background: rgba(0,0,0,.11); }
.ic-card-toggle-btn.ic-toggle-collapsed { transform: rotate(-90deg); }

/* Collapsed body */
.ic-card-body-collapsed { display: none !important; }

/* ══════════════════════════════════════════════════════════════════
   EPS-KF  –  Modus-Badge (Result Header)
   ══════════════════════════════════════════════════════════════════ */
.kf-mode-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 10px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .03em;
  margin-left: 10px;
  vertical-align: middle;
  white-space: nowrap;
}
.kf-mode-opt      { background: rgba(255,128,0,.18); color: #FF8000; border: 1px solid rgba(255,128,0,.35); }
.kf-mode-research { background: rgba(143,95,196,.18); color: #8F5FC4; border: 1px solid rgba(143,95,196,.35); }
.kf-mode-ref {
  display: inline-block;
  max-width: 220px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  vertical-align: bottom;
  font-size: 11px;
  color: #9ca3af;
  margin-left: 6px;
}

/* ══════════════════════════════════════════════════════════════════
   EPS-KF  –  Recherche-Modus Panel (Step 1, no reference URL)
   ══════════════════════════════════════════════════════════════════ */
.kf-research-card {
  border: 1.5px solid #e9d5ff;
}
.kf-research-intro {
  font-size: 13px;
  color: #6b7280;
  margin-bottom: 14px;
  line-height: 1.55;
}
.kf-research-kw-list {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-bottom: 14px;
}
.kf-res-kw {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 600;
  border: 1.5px solid transparent;
  cursor: default;
  transition: opacity .15s;
}
.kf-res-kw:hover { opacity: .8; }
/* Importance colours */
.kf-res-very-high { background: #f5f0ff; color: #6d28d9; border-color: #ddd6fe; }
.kf-res-high      { background: #eff6ff; color: #1d4ed8; border-color: #bfdbfe; }
.kf-res-normal    { background: #f9fafb; color: #374151; border-color: #e5e7eb; }
/* Importance dot */
.kf-res-very-high::before { content: '●'; font-size: 8px; color: #7c3aed; }
.kf-res-high::before      { content: '●'; font-size: 8px; color: #2563eb; }
.kf-res-normal::before    { content: '●'; font-size: 8px; color: #9ca3af; }

.kf-research-hint {
  font-size: 11px;
  color: #9ca3af;
  padding-top: 10px;
  border-top: 1px solid #f3f4f6;
}

/* ══════════════════════════════════════════════════════════════════
   EPS-KF  –  Step 4 Compact Ranklist
   ══════════════════════════════════════════════════════════════════ */
.kf-rank-row {
  border: 1.5px solid #e5e7eb;
  border-radius: 10px;
  margin-bottom: 8px;
  overflow: hidden;
  transition: border-color .15s;
}
.kf-rank-row:hover { border-color: #fed7aa; }

.kf-rank-summary {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  cursor: pointer;
  background: #fff;
  user-select: none;
  transition: background .13s;
}
.kf-rank-summary:hover { background: #fff8ef; }

.kf-rank-pos {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #f3f4f6;
  color: #6b7280;
  font-size: 12px;
  font-weight: 700;
  flex-shrink: 0;
}
.kf-rank-top {
  background: linear-gradient(135deg, var(--ci-accent, #ff8f00) 0%, #c06800 100%);
  color: #fff;
}

.kf-rank-domain {
  flex: 1;
  font-size: 13px;
  font-weight: 600;
  color: #111827;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}

.kf-rank-words {
  font-size: 11px;
  color: #9ca3af;
  white-space: nowrap;
  flex-shrink: 0;
}

.kf-rank-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 10px;
  font-size: 10px;
  font-weight: 700;
  flex-shrink: 0;
}
.kf-rank-ref {
  background: rgba(143,95,196,.15);
  color: #8F5FC4;
  border: 1px solid rgba(143,95,196,.3);
}

.kf-rank-expand {
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #9ca3af;
  font-size: 14px;
  flex-shrink: 0;
  transition: transform .2s;
  /* arrow SVG via CSS */
}
.kf-rank-expand::before {
  content: '▾';
  display: block;
  line-height: 1;
}

.kf-rank-detail {
  border-top: 1px solid #e5e7eb;
  background: #fafafa;
  padding: 14px;
}
.kf-rank-is-ref {
  background: #faf5ff !important;
}
.kf-rank-is-ref .kf-rank-domain { color: #6d28d9; }

/* ── Word-count mini-bar ─────────────────────────────────────────── */
.kf-rank-wc-wrap {
  width: 80px;
  height: 4px;
  background: #f3f4f6;
  border-radius: 2px;
  flex-shrink: 0;
  overflow: hidden;
}
.kf-rank-wc-bar {
  height: 100%;
  border-radius: 2px;
  min-width: 2px;
  transition: width .3s;
}

/* ── Wettbewerber summary stats ──────────────────────────────────── */
.kf-wb-summary {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  padding: 14px 16px;
  background: #fff;
  border: 1.5px solid #e5e7eb;
  border-radius: 10px;
  margin-bottom: 12px;
}
.kf-wb-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 10px 16px 8px;
  border-radius: 10px;
  border: 1px solid transparent;
  min-width: 90px;
  gap: 2px;
}
.kf-wb-stat-icon { display: flex; align-items: center; justify-content: center; margin-bottom: 4px; opacity: .75; }
.kf-wb-stat-num  { font-size: 18px; font-weight: 700; color: #111827; line-height: 1.2; }
.kf-wb-stat-label{ font-size: 11px; color: #6b7280; margin-top: 1px; white-space: nowrap; }

/* ── Farbvarianten ───────────────────────────────────────────────── */
.kf-wb-stat--purple {
  background: #f5f0fb;
  border-color: #d8c5f0;
}
.kf-wb-stat--purple .kf-wb-stat-icon { color: #8F5FC4; }
.kf-wb-stat--purple .kf-wb-stat-num  { color: #6d3fa8; }

.kf-wb-stat--orange {
  background: #fff7ed;
  border-color: #fed7aa;
}
.kf-wb-stat--orange .kf-wb-stat-icon { color: #FF8000; }
.kf-wb-stat--orange .kf-wb-stat-num  { color: #c25c00; }

.kf-wb-stat--green {
  background: #f0faf0;
  border-color: #bbf0bb;
}
.kf-wb-stat--green .kf-wb-stat-icon { color: #6FB130; }
.kf-wb-stat--green .kf-wb-stat-num  { color: #3d7a00; }

.kf-wb-stat--blue {
  background: #eff6ff;
  border-color: #bfdbfe;
}
.kf-wb-stat--blue .kf-wb-stat-icon { color: #3b82f6; }
.kf-wb-stat--blue .kf-wb-stat-num  { color: #1d4ed8; }

/* ══════════════════════════════════════════════════════════════════
   Guide & Tour System
   ══════════════════════════════════════════════════════════════════ */

/* ── Page-Header mit Tour-Button ─────────────────────────────────── */
.kf-page-header-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 0;
}
.kf-page-header-row .page-header { margin-bottom: 0; flex: 1; }
.kf-tour-trigger-wrap { display: flex; align-items: center; padding-top: 4px; }
.kf-tour-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 16px;
  border-radius: 20px;
  border: 1.5px solid #8F5FC4;
  background: #f5f0fb;
  color: #8F5FC4;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all .15s;
  white-space: nowrap;
}
.kf-tour-btn:hover { background: #8F5FC4; color: #fff; }
.kf-export-btn { border-color: #FF8000; color: #FF8000; text-decoration: none; }
.kf-export-btn:hover { background: #FF8000; color: #fff; text-decoration: none; }

/* ── Topbar Help Button (.itb-help-btn) ──────────────────────────── */
.itb-help-btn {
  width: 34px; height: 34px;
  border-radius: 50%;
  border: 1.5px solid var(--ci-border, #e8eaed);
  background: #fff;
  color: var(--ci-t3, #64748b);
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer; transition: all .15s; flex-shrink: 0;
  padding: 0;
}
.itb-help-btn:hover {
  border-color: var(--ci-accent, #ff8f00);
  color: var(--ci-accent, #ff8f00);
  background: var(--ci-accent-soft, rgba(255,143,0,.08));
}
.itb-help-btn.active {
  border-color: var(--ci-accent, #ff8f00);
  color: var(--ci-accent, #ff8f00);
  background: var(--ci-accent-soft, rgba(255,143,0,.08));
}

/* ── CI Help Sidebar – Header completion ─────────────────────────── */
.ci-help-hd {
  padding: 14px 16px 13px;
  background: linear-gradient(90deg, rgba(255,143,0,.10) 0%, rgba(255,143,0,.03) 100%);
  border-bottom: 2px solid var(--ci-accent, #ff8f00);
  flex-shrink: 0; position: sticky; top: 0; z-index: 1;
}
.ci-help-hd-icon {
  width: 30px; height: 30px; flex-shrink: 0;
  background: var(--ci-accent-soft, rgba(255,143,0,.12));
  border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  color: var(--ci-accent, #ff8f00);
}
.ci-help-hd-title {
  font-size: 12px; font-weight: 800; color: var(--ci-t1, #0f172a);
  margin: 0; letter-spacing: -.1px;
  font-family: Inter, sans-serif;
}
.ci-help-hd-sub {
  font-size: 10px; color: var(--ci-t3, #64748b); margin: 0;
  font-family: Inter, sans-serif;
}
.ci-help-close-btn {
  margin-left: auto; background: none; border: none; cursor: pointer;
  color: var(--ci-t3, #64748b); padding: 4px; line-height: 1; flex-shrink: 0;
  opacity: .6; transition: opacity .15s;
}
.ci-help-close-btn:hover { opacity: 1; }

/* ── Fix: Sidebar + Help-Panel volle Höhe (Intern-Layout scrollt) ── */
.intern-ci-wrapper .fd-ci-sidebar,
.intern-ci-wrapper #ci-intern-sidebar {
  height: auto !important;
  min-height: 100vh !important;
}
.intern-ci-wrapper .ci-help {
  height: auto !important;
  min-height: 100vh !important;
}

/* ── Analyse Progress Overlay v2 — Helper-Panel Style ────────────── */
#kfAnalyseLoading {
  position: fixed; inset: 0;
  background: rgba(15,20,25,.55);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  z-index: 9000;
  align-items: center; justify-content: center;
}

.kf-analyse-progress {
  background: #fff;
  border-radius: 20px;
  width: 380px;
  overflow: hidden;
  box-shadow: 0 28px 72px rgba(0,0,0,.30);
  animation: kfProgressIn .3s cubic-bezier(.34,1.56,.64,1);
}
@keyframes kfProgressIn {
  from { opacity: 0; transform: scale(.88) translateY(16px); }
  to   { opacity: 1; transform: scale(1) translateY(0); }
}

/* ─ Header ─ */
.kf-ap-head {
  background: linear-gradient(135deg, #ff8f00 0%, #e07300 100%);
  padding: 22px 24px 18px;
  display: flex; align-items: center; gap: 14px;
}
.kf-ap-head-icon {
  width: 44px; height: 44px; border-radius: 12px;
  background: rgba(255,255,255,.20);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.kf-ap-head-icon .kf-analyse-ring {
  width: 22px; height: 22px;
  border: 2.5px solid rgba(255,255,255,.30);
  border-top-color: #fff;
  border-radius: 50%;
  animation: kfRingSpin .85s linear infinite;
}
@keyframes kfRingSpin { to { transform: rotate(360deg); } }
.kf-ap-head-text {}
.kf-ap-head-title {
  font-size: 14px; font-weight: 800; color: #fff;
  margin: 0; font-family: Inter, sans-serif; letter-spacing: -.2px;
}
.kf-ap-head-sub {
  font-size: 11px; color: rgba(255,255,255,.75);
  margin: 2px 0 0; font-family: Inter, sans-serif;
}

/* ─ Grüne Fortschrittsbar ─ */
.kf-ap-progress-bar-wrap {
  height: 4px; background: #e8eaed; position: relative; overflow: hidden;
}
.kf-ap-progress-bar {
  height: 100%; background: linear-gradient(90deg, #16a34a, #22c55e);
  border-radius: 0 2px 2px 0;
  transition: width .8s cubic-bezier(.4,0,.2,1);
  width: 0%;
}

/* ─ Body ─ */
.kf-ap-body { padding: 20px 24px 0; }

/* ─ Schritte mit Nummernkreisen ─ */
.kf-ap-step {
  display: flex; align-items: center; gap: 14px;
  padding: 10px 0;
  border-bottom: 1px solid #f4f6f8;
  transition: opacity .3s;
}
.kf-ap-step:last-child { border-bottom: none; }
.kf-ap-step-num {
  width: 28px; height: 28px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 800;
  flex-shrink: 0; transition: all .35s; font-family: Inter, sans-serif;
  border: 2px solid #e2e8f0; background: #f8fafc; color: #94a3b8;
}
.kf-ap-step-label {
  font-size: 12.5px; color: #94a3b8;
  font-family: Inter, sans-serif; transition: color .3s; flex: 1;
}
.kf-ap-step-badge {
  font-size: 9px; font-weight: 700; letter-spacing: .5px;
  padding: 2px 7px; border-radius: 20px;
  text-transform: uppercase; flex-shrink: 0;
  opacity: 0; transition: opacity .3s;
}
/* Warte-State */
.kf-ap-step { opacity: .45; }
/* Aktiv */
.kf-ap-step.kf-ap-active {
  opacity: 1;
}
.kf-ap-step.kf-ap-active .kf-ap-step-num {
  background: linear-gradient(135deg, #ff9000, #e07300);
  border-color: transparent; color: #fff;
  box-shadow: 0 3px 10px rgba(255,143,0,.35);
  animation: kfStepPulse 1.1s ease-in-out infinite;
}
.kf-ap-step.kf-ap-active .kf-ap-step-label { color: #0f172a; font-weight: 600; }
.kf-ap-step.kf-ap-active .kf-ap-step-badge {
  background: rgba(255,143,0,.12); color: #c05a00;
  opacity: 1;
}
/* Fertig */
.kf-ap-step.kf-ap-done { opacity: 1; }
.kf-ap-step.kf-ap-done .kf-ap-step-num {
  background: #16a34a; border-color: transparent; color: #fff;
  box-shadow: 0 2px 8px rgba(22,163,74,.25);
  animation: none;
}
.kf-ap-step.kf-ap-done .kf-ap-step-label { color: #334155; }
.kf-ap-step.kf-ap-done .kf-ap-step-badge {
  background: #dcfce7; color: #166534;
  opacity: 1;
}
@keyframes kfStepPulse {
  0%,100% { box-shadow: 0 3px 10px rgba(255,143,0,.35); }
  50% { box-shadow: 0 3px 18px rgba(255,143,0,.55); }
}

/* ─ Tipp-Box (grün) ─ */
.kf-ap-tip {
  margin: 16px 0 0;
  padding: 10px 14px;
  background: #f0fdf4;
  border: 1px solid #bbf7d0;
  border-left: 3px solid #16a34a;
  border-radius: 8px;
  font-size: 11.5px; color: #166534;
  font-family: Inter, sans-serif; line-height: 1.55;
}
.kf-ap-tip strong { color: #14532d; }

/* ─ Footer ─ */
.kf-ap-footer {
  padding: 14px 24px 18px;
  font-size: 10.5px; color: #94a3b8;
  font-family: Inter, sans-serif; text-align: center;
}

/* ── IC-Card Help-Icon Button ─────────────────────────────────────── */
.kf-help-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 1.5px solid #d1d5db;
  background: #f9fafb;
  color: #9ca3af;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  transition: all .15s;
  margin-left: 6px;
  flex-shrink: 0;
  line-height: 1;
}
.kf-help-icon:hover { border-color: var(--ci-accent, #ff8f00); color: var(--ci-accent, #ff8f00); background: #fff8ef; }

/* ── Inline Help Panel ────────────────────────────────────────────── */
.kf-help-panel {
  display: none;
  padding: 14px 20px 12px;
  background: linear-gradient(135deg, #fff8ef 0%, #fffcf5 100%);
  border-left: 3px solid var(--ci-accent, #ff8f00);
  border-bottom: 1px solid #ffe4bf;
  font-size: 13px;
  line-height: 1.6;
  color: #374151;
  animation: kfHelpSlide .2s ease-out;
}
.kf-help-panel.kf-help-panel--open { display: block; }
.kf-help-panel strong { color: #7c3900; font-weight: 600; }
.kf-help-panel p { margin: 6px 0 0; }
.kf-help-panel p:first-of-type { margin-top: 8px; }
.kf-help-tip {
  margin-top: 10px;
  padding: 8px 12px;
  background: rgba(255,143,0,.08);
  border: 1px solid rgba(255,143,0,.20);
  border-radius: 6px;
  font-size: 12px;
  color: #92400e;
}
@keyframes kfHelpSlide {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── Driver.js CI-Override (SEOlyze Lila) ────────────────────────── */
:root {
  --driver-popover-bg-color: #1e1040;
  --driver-popover-title-color: #fff;
  --driver-popover-description-color: #d1d5db;
  --driver-popover-border-radius: 12px;
  --driver-popover-arrow-color: #1e1040;
  --driver-btn-bg-color: #8F5FC4;
  --driver-btn-text-color: #fff;
  --driver-btn-hover-bg-color: #7a4eb0;
  --driver-highlight-color: rgba(143,95,196,.12);
}
.driver-popover { box-shadow: 0 20px 60px rgba(0,0,0,.45); }
.driver-popover-title { font-size: 15px !important; font-weight: 700; }
.driver-popover-description { font-size: 13px !important; line-height: 1.6; }
.driver-popover-progress-text { font-size: 11px; color: #9ca3af; }
.driver-popover-prev-btn,
.driver-popover-next-btn,
.driver-popover-done-btn {
  font-family: Inter, sans-serif !important;
  font-size: 13px !important;
  border-radius: 6px !important;
}
.driver-popover-close-btn { color: #9ca3af !important; }

/* ── Proof-Filter Leiste ─────────────────────────────────────────── */
.kf-proof-filter {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 12px 0 10px;
  border-bottom: 1px solid #f3f4f6;
  margin-bottom: 4px;
}
.kf-pf-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 12px;
  border-radius: 20px;
  border: 1.5px solid #e5e7eb;
  background: #f9fafb;
  font-size: 12px;
  font-weight: 500;
  color: #6b7280;
  cursor: pointer;
  transition: all .15s;
}
.kf-pf-btn:hover { border-color: #8F5FC4; color: #8F5FC4; background: #f5f0fb; }
.kf-pf-btn.active { background: #8F5FC4; border-color: #8F5FC4; color: #fff; }
.kf-pf-btn.btn-miss.active  { background: #ef4444; border-color: #ef4444; }
.kf-pf-btn.btn-more.active  { background: #f59e0b; border-color: #f59e0b; }
.kf-pf-btn.btn-less.active  { background: #3b82f6; border-color: #3b82f6; }
.kf-pf-btn.btn-ok.active    { background: #6FB130; border-color: #6FB130; }
.kf-pf-cnt {
  background: rgba(0,0,0,.1);
  border-radius: 10px;
  padding: 0 6px;
  font-size: 11px;
  line-height: 1.6;
  min-width: 18px;
  text-align: center;
}
.kf-pf-btn.active .kf-pf-cnt { background: rgba(255,255,255,.25); }

/* ── Editor: Guide-Button oberhalb der TopBar ────────────────────── */
.kfq-above-topbar {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 6px;
}

/* ── Editor Export-Buttons ───────────────────────────────────────── */
.kfq-export-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 0 14px;
  height: 36px;
  border-radius: 6px;
  border: 1.5px solid #d1d5db;
  background: #fff;
  color: #374151;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: all .15s;
  white-space: nowrap;
}
.kfq-export-btn:hover { border-color: #8F5FC4; color: #8F5FC4; background: #f5f0fb; }
.kfq-export-btn:disabled { opacity: .5; cursor: default; }



/* ══════════════════════════════════════════════════════════════════
   OnPage: Lesbarkeit  –  v20260418c
   ══════════════════════════════════════════════════════════════════ */

/* ── Page Header ────────────────────────────────────────────────── */
.fd-ci-page-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 24px;
  padding-bottom: 18px;
  border-bottom: 2px solid #f3f4f6;
}
.fd-ci-page-header-left { display: flex; align-items: center; gap: 14px; }
.fd-ci-page-header-icon { font-size: 28px; line-height: 1; }
.fd-ci-page-header-title {
  margin: 0 0 2px !important;
  font-size: 20px !important;
  font-weight: 700 !important;
  color: #111827 !important;
  border: none !important;
  padding: 0 !important;
}
.fd-ci-page-header-sub { font-size: 12px; color: #6b7280; }

/* ── Score-Row (Summary-Zeile) ──────────────────────────────────── */
.rd-score-row {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  align-items: flex-start;
}

/* ── Score-Box mit CSS conic-gradient Ring ──────────────────────── */
.rd-score-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  flex: 0 0 auto;
  min-width: 90px;
}

/* Ring: conic-gradient – --pct ist 0-100 */
.rd-sb-ring {
  position: relative;
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: conic-gradient(
    currentColor calc(var(--pct, 0) * 1%),
    #e5e7eb 0
  );
  display: flex;
  align-items: center;
  justify-content: center;
}
/* Inverted Ring: bei niedrigem Wert = gut (Wiener SF, Grade) */
.rd-sb-ring-inv {
  background: conic-gradient(
    #e5e7eb calc(var(--pct, 0) * 1%),
    currentColor 0
  );
}
/* Weißer Innenkreis */
.rd-sb-ring::after {
  content: '';
  position: absolute;
  inset: 8px;
  border-radius: 50%;
  background: #fff;
}
.rd-sb-val {
  position: relative;
  z-index: 1;
  font-size: 16px;
  font-weight: 800;
  color: #111827;
  line-height: 1;
}

/* Farben */
.rd-sb-good { color: #10b981; }
.rd-sb-ok   { color: #f59e0b; }
.rd-sb-bad  { color: #ef4444; }

.rd-sb-name  { font-size: 11px; font-weight: 600; color: #374151; }
.rd-sb-scale { font-size: 10px; color: #9ca3af; }
.rd-sb-hint  { font-size: 10px; font-weight: 600; padding: 2px 7px; border-radius: 6px; }
.rd-hint-good { background: #d1fae5; color: #065f46; }
.rd-hint-ok   { background: #fef3c7; color: #92400e; }
.rd-hint-bad  { background: #fee2e2; color: #991b1b; }

/* Kennzahlen-Spalte rechts im Summary */
.rd-score-stats {
  flex: 1 1 160px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  align-self: center;
  background: #f9fafb;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  padding: 12px 16px;
  min-width: 140px;
}
.rd-ss-row {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  color: #6b7280;
}
.rd-ss-row strong { color: #111827; font-weight: 700; }

/* ── Detail-Grid je URL ──────────────────────────────────────────── */
.rd-detail-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}
@media (max-width: 680px) {
  .rd-detail-grid { grid-template-columns: 1fr; }
  .rd-score-row   { flex-wrap: wrap; }
}

/* ── Lesbarkeits-Balken ─────────────────────────────────────────── */
.rd-detail-scores { display: flex; flex-direction: column; gap: 14px; }

.rd-bar-group { display: flex; flex-direction: column; gap: 4px; }
.rd-bar-label {
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  color: #374151;
  font-weight: 500;
}
.rd-bv { font-weight: 700; }
.rd-bv-g { color: #10b981; }
.rd-bv-o { color: #f59e0b; }
.rd-bv-r { color: #ef4444; }

.rd-bar-track {
  height: 8px;
  background: #f3f4f6;
  border-radius: 4px;
  overflow: hidden;
}
.rd-bar-fill {
  height: 100%;
  border-radius: 4px;
  min-width: 2px;
  transition: width .4s;
}
.rd-bf-g { background: linear-gradient(90deg, #10b981, #34d399); }
.rd-bf-o { background: linear-gradient(90deg, #f59e0b, #fbbf24); }
.rd-bf-r { background: linear-gradient(90deg, #ef4444, #f87171); }

.rd-ref-val { font-size: 10px; color: #9ca3af; }

/* ── Silben-Chart ───────────────────────────────────────────────── */
.rd-syl-header {
  font-size: 10px;
  font-weight: 600;
  color: #6b7280;
  text-transform: uppercase;
  letter-spacing: .05em;
  margin-bottom: 8px;
}
.rd-syl-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
  margin-bottom: 14px;
}
.rd-syl-item { text-align: center; }
.rd-syl-wrap {
  height: 52px;
  background: #f9fafb;
  border-radius: 5px;
  overflow: hidden;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  margin-bottom: 3px;
}
.rd-syl-bar { width: 70%; border-radius: 3px 3px 0 0; min-height: 3px; transition: height .4s; }
.rd-syl-1 { background: #c4b5fd; }
.rd-syl-2 { background: #8F5FC4; }
.rd-syl-3 { background: #6d28d9; }
.rd-syl-6 { background: #FF8000; }
.rd-syl-pct { font-size: 10px; font-weight: 700; color: #374151; }
.rd-syl-lbl { font-size: 9px; color: #9ca3af; }

/* ── Kennzahlen-Chips ───────────────────────────────────────────── */
.rd-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.rd-chip {
  background: #f9fafb;
  border: 1px solid #e5e7eb;
  border-radius: 7px;
  padding: 5px 9px;
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 56px;
}
.rd-chip-v { font-size: 12px; font-weight: 700; color: #111827; }
.rd-chip-l { font-size: 9px; color: #9ca3af; white-space: nowrap; }


/* ══════════════════════════════════════════════════════════════════
   OnPage: Duplicate Content  –  v20260418c
   ══════════════════════════════════════════════════════════════════ */

/* ── Matrix ─────────────────────────────────────────────────────── */
.dc-matrix-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  padding: 20px;
}
.dc-matrix-table {
  border-collapse: separate;
  border-spacing: 4px;
  min-width: 100%;
}
.dc-matrix-corner { width: 40px; }
.dc-matrix-th { text-align: center; padding: 4px; }
.dc-matrix-row-hd { text-align: center; padding: 4px 8px 4px 4px; vertical-align: middle; }

.dc-matrix-idx {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: #f3f4f6;
  color: #6b7280;
  font-size: 11px;
  font-weight: 700;
}
.dc-matrix-cell {
  width: 56px;
  height: 48px;
  text-align: center;
  vertical-align: middle;
  border-radius: 8px;
  transition: transform .1s;
}
.dc-matrix-cell:hover { transform: scale(1.08); }
.dc-cell-pct  { font-size: 11px; font-weight: 700; }
.dc-cell-dash { font-size: 16px; color: #d1d5db; }

.dc-cell-self { background: #f9fafb; }
.dc-cell-none { background: #f0fdf4; }
.dc-cell-none .dc-cell-pct { color: #86efac; }
.dc-cell-low  { background: #dcfce7; }
.dc-cell-low  .dc-cell-pct { color: #16a34a; }
.dc-cell-mid  { background: #fef9c3; }
.dc-cell-mid  .dc-cell-pct { color: #a16207; }
.dc-cell-high { background: #fee2e2; }
.dc-cell-high .dc-cell-pct { color: #dc2626; }

/* ── Legende ────────────────────────────────────────────────────── */
.dc-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  padding: 12px 20px 16px;
  border-top: 1px solid #f3f4f6;
  font-size: 11px;
  color: #6b7280;
}
.dc-legend-item { display: flex; align-items: center; gap: 6px; }
.dc-legend-dot  { width: 14px; height: 14px; border-radius: 4px; flex-shrink: 0; }

/* ── URL-Index ──────────────────────────────────────────────────── */
.dc-url-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 20px;
  border-bottom: 1px solid #f3f4f6;
  transition: background .12s;
}
.dc-url-row:last-child { border-bottom: none; }
.dc-url-row:hover { background: #faf5ff; }
.dc-url-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: #f3f4f6;
  color: #6b7280;
  font-size: 10px;
  font-weight: 700;
  flex-shrink: 0;
}
.dc-url-link {
  flex: 1;
  font-size: 12px;
  color: #8F5FC4;
  text-decoration: none;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.dc-url-link:hover { text-decoration: underline; color: #6d28d9; }
.dc-url-ext { color: #9ca3af; flex-shrink: 0; }

/* ════════════════════════════════════════════════════════════════════
   EPS-KF Sprint 1  —  A1 Score-Header · A2 Proof-Checkliste · A3 Δ
   ════════════════════════════════════════════════════════════════════ */

/* ── A1: Score Header ─────────────────────────────────────────────── */
.kf-score-header {
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 16px;
  padding: 16px 20px;
  margin-bottom: 14px;
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
}

/* Ring via conic-gradient + ::after inner circle */
.kf-score-ring {
  width: 66px;
  height: 66px;
  border-radius: 50%;
  flex-shrink: 0;
  /* background set inline: conic-gradient(currentColor calc(var(--pct)*1%), #e5e7eb 0) */
  background: conic-gradient(currentColor calc(var(--pct, 0) * 1%), #e5e7eb 0);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}
.kf-score-ring::after {
  content: '';
  position: absolute;
  width: 48px;
  height: 48px;
  background: #fff;
  border-radius: 50%;
}
.kf-score-ring-num {
  position: relative;
  z-index: 1;
  font-size: 15px;
  font-weight: 700;
  color: #111827;
  font-family: 'Inter', sans-serif;
  line-height: 1;
}

/* Recherche-Modus / KI-Insights ring – kein Gradient, stattdessen weicher Farbkreis */
.kf-score-ring-research {
  background: linear-gradient(135deg, #f3e8ff 0%, #e0d4f7 100%);
}
.kf-score-ring-research::after {
  background: transparent;
}
/* Recherche-Modus / KI-Insights score header */
.kf-score-header-research {
  border-color: #e0d4f7;
  background: linear-gradient(135deg, #faf5ff 0%, #f3e8ff 60%, #fff 100%);
}

.kf-score-info { flex: 1; min-width: 160px; }
.kf-score-title {
  font-size: 11px;
  font-weight: 600;
  color: #9ca3af;
  text-transform: uppercase;
  letter-spacing: .05em;
  margin-bottom: 3px;
}
.kf-score-val {
  font-size: 22px;
  font-weight: 700;
  color: #111827;
  font-family: 'Inter', sans-serif;
  line-height: 1.1;
  margin-bottom: 6px;
}
.kf-score-val small {
  font-size: 13px;
  font-weight: 400;
  color: #6b7280;
}
.kf-score-bar {
  height: 6px;
  background: #e5e7eb;
  border-radius: 3px;
  overflow: hidden;
  margin-bottom: 5px;
}
.kf-score-bar-fill {
  height: 100%;
  border-radius: 3px;
  transition: width .4s ease;
}
.kf-score-sub { font-size: 12px; color: #9ca3af; }

.kf-score-chips {
  display: flex;
  gap: 8px;
  flex-shrink: 0;
  flex-wrap: wrap;
}
.kf-score-chip {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 8px 12px;
  background: #f9fafb;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  min-width: 54px;
}
.kf-score-chip-num {
  font-size: 18px;
  font-weight: 700;
  line-height: 1.2;
  font-family: 'Inter', sans-serif;
}
.kf-score-chip-label { font-size: 10px; color: #9ca3af; margin-top: 2px; text-align: center; white-space: nowrap; }
.kf-score-chip.chip-ok   .kf-score-chip-num { color: #6FB130; }
.kf-score-chip.chip-more .kf-score-chip-num { color: #f59e0b; }
.kf-score-chip.chip-less .kf-score-chip-num { color: #8b5cf6; }
.kf-score-chip.chip-miss .kf-score-chip-num { color: #ef4444; }

/* ── A2: Proof-Checkliste ─────────────────────────────────────────── */
.kf-proof-list {
  display: flex;
  flex-direction: column;
  gap: 0;
  max-height: 520px;
  overflow-y: auto;
}
.kf-proof-list-section {
  padding: 10px 0 4px;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: #9ca3af;
  border-bottom: 1px solid #f3f4f6;
  margin-top: 6px;
}
.kf-proof-list-section:first-child { margin-top: 0; }
.kf-proof-list-section.sec-miss { color: #ef4444; }
.kf-proof-list-section.sec-more { color: #f59e0b; }
.kf-proof-list-section.sec-less { color: #8b5cf6; }
.kf-proof-list-section.sec-ok   { color: #6FB130; }

.kf-proof-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 0;
  border-bottom: 1px solid #f9fafb;
  font-family: 'Inter', sans-serif;
  font-size: 13px;
}
.kf-proof-item:last-child { border-bottom: none; }
.kf-pi-icon  { width: 20px; text-align: center; font-size: 13px; flex-shrink: 0; }
.kf-pi-kw    { flex: 1; font-weight: 500; color: #374151; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kf-pi-avg   { font-size: 11px; color: #9ca3af; white-space: nowrap; min-width: 60px; text-align: right; }
.kf-pi-ref   { font-size: 11px; font-weight: 600; white-space: nowrap; min-width: 68px; text-align: right; }
.kf-pi-ref.val-miss { color: #ef4444; }
.kf-pi-ref.val-ok   { color: #6FB130; }
.kf-pi-ref.val-more { color: #f59e0b; }
.kf-pi-ref.val-less { color: #8b5cf6; }
.kf-pi-trend { color: #d1d5db; text-decoration: none; font-size: 12px; flex-shrink: 0; transition: color .15s; }
.kf-pi-trend:hover { color: #8F5FC4; }

/* DataTables toolbar (A3 CSV button) */
.kf-dt-top { display: flex; align-items: center; gap: 10px; padding: 10px 16px 8px; }
.kf-csv-btn {
  font-size: 12px !important;
  padding: 4px 12px !important;
  border-radius: 8px !important;
  border-color: #e5e7eb !important;
  color: #374151 !important;
  font-family: 'Inter', sans-serif !important;
}
.kf-csv-btn:hover { background: #f3f4f6 !important; border-color: #d1d5db !important; }

/* ── A3: Delta Column ─────────────────────────────────────────────── */
.kf-delta { text-align: right !important; white-space: nowrap; font-size: 12px; font-weight: 600; font-family: 'Inter', sans-serif; padding-right: 8px !important; }
.kf-delta.delta-pos  { color: #6FB130; }
.kf-delta.delta-neg  { color: #ef4444; }
.kf-delta.delta-zero { color: #9ca3af; }
th.kf-delta-head     { background: #f9fafb !important; color: #6b7280 !important; font-size: 11px !important; text-align: right !important; }

/* ════════════════════════════════════════════════════════════════════
   Sprint 2  —  B1 AI Card · B2 Content Gap · B4 Score-Buttons
   ════════════════════════════════════════════════════════════════════ */

/* ── B1 / B4: Score-Header Buttons ───────────────────────────────── */
.kf-score-actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex-shrink: 0;
}
.kf-score-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 9px 16px;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 600;
  font-family: 'Inter', sans-serif;
  cursor: pointer;
  border: none;
  text-decoration: none;
  white-space: nowrap;
  transition: opacity .15s, transform .1s;
}
.kf-score-btn:hover  { opacity: .85; transform: translateY(-1px); }
.kf-score-btn:active { transform: translateY(0); }
.kf-score-btn:disabled { opacity: .5; cursor: default; transform: none; }

.kf-score-btn-ai {
  background: linear-gradient(135deg, #8F5FC4 0%, #6d28d9 100%);
  color: #fff;
}
.kf-score-btn-editor {
  background: #f3f4f6;
  color: #374151;
  border: 1px solid #e5e7eb;
}
.kf-score-btn-editor:hover { background: #e5e7eb; color: #111827; }

/* ── B1: AI Result Card ───────────────────────────────────────────── */
.kf-ai-card {
  border-color: rgba(143,95,196,.25);
}
.kf-ai-card .ic-card-head {
  background: linear-gradient(90deg, rgba(143,95,196,.15) 0%, rgba(143,95,196,.05) 50%, transparent 100%);
  border-left: 3px solid rgba(143,95,196,.65);
  border-bottom: 1px solid rgba(143,95,196,.15);
}
.kf-ai-card .ic-card-head .ic-card-head-icon svg {
  stroke: rgba(143,95,196,.85);
}
.kf-ai-card .ic-card-head .ic-card-head-title {
  color: var(--ci-t1, #0f172a);
}
.kf-ai-card .ic-card-head .ic-card-head-badge {
  background: rgba(143,95,196,.12);
  color: #6b3fa0;
}
.kf-ai-close {
  margin-left: auto;
  background: rgba(143,95,196,.12);
  border: 1px solid rgba(143,95,196,.25);
  color: #6b3fa0;
  border-radius: 6px;
  padding: 2px 8px;
  font-size: 13px;
  cursor: pointer;
  line-height: 1.4;
}
.kf-ai-close:hover { background: rgba(143,95,196,.22); color: #5b3090; }

.kf-ai-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 40px 20px;
  color: #6b7280;
  font-size: 14px;
}
.kf-ai-spinner {
  width: 20px;
  height: 20px;
  border: 2px solid #e5e7eb;
  border-top-color: #8F5FC4;
  border-radius: 50%;
  animation: kfSpin .7s linear infinite;
  flex-shrink: 0;
}
@keyframes kfSpin { to { transform: rotate(360deg); } }

.kf-ai-text {
  font-size: 14px;
  line-height: 1.7;
  color: #374151;
  font-family: 'Inter', sans-serif;
}
.kf-ai-p    { margin: 0 0 10px; }
.kf-ai-h    { font-size: 14px; font-weight: 700; color: #111827; margin: 14px 0 6px; }
.kf-ai-ul   { margin: 0 0 10px; padding-left: 20px; }
.kf-ai-ul li { margin-bottom: 4px; }

/* ── marked.js Markdown-Body ─────────────────────────────────────── */
.kf-md-body { font-size:14px; line-height:1.75; color:#374151; font-family:'Inter',sans-serif; }
.kf-md-body p  { margin:0 0 10px; }
.kf-md-body h1,.kf-md-body h2 { font-size:15px; font-weight:700; color:#111827; margin:16px 0 6px; border-bottom:1px solid #f3f4f6; padding-bottom:4px; }
.kf-md-body h3,.kf-md-body h4,.kf-md-body h5 { font-size:14px; font-weight:700; color:#111827; margin:12px 0 5px; }
.kf-md-body ul,.kf-md-body ol { margin:0 0 10px; padding-left:20px; }
.kf-md-body li { margin-bottom:4px; }
.kf-md-body strong { font-weight:700; color:#111827; }
.kf-md-body em    { font-style:italic; }
.kf-md-body code  { background:#f3f4f6; border-radius:3px; padding:1px 5px; font-size:12px; font-family:monospace; }
.kf-md-body blockquote { border-left:3px solid #8F5FC4; margin:0 0 10px; padding:6px 12px; background:#faf5ff; color:#6b7280; font-style:italic; }
.kf-md-body a { color:#8F5FC4; text-decoration:underline; }

/* ── Auto-Save Timestamp (Editor) ───────────────────────────────── */
.kfq-last-saved { font-size:11px; color:#9ca3af; font-style:italic; margin-left:auto; }

/* ── AI-Card: Tab-Navigation ──────────────────────────────────────── */
.kf-ai-tabnav {
  display: flex;
  gap: 0;
  border-bottom: 1px solid #ede9fe;
  padding: 0 16px;
  background: #faf5ff;
}
.kf-ai-tab {
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  padding: 10px 14px;
  font-size: 12px;
  font-weight: 600;
  color: #6b7280;
  cursor: pointer;
  transition: color .15s, border-color .15s;
  margin-bottom: -1px;
}
.kf-ai-tab:hover { color: #8F5FC4; }
.kf-ai-tab.active {
  color: #8F5FC4;
  border-bottom-color: #8F5FC4;
}
.kf-ai-panel {
  padding: 16px 20px;
}

/* ── Briefing Tab ──────────────────────────────────────────────────── */
.kfb-placeholder {
  text-align: center;
  padding: 28px 20px;
}
.kfb-hint {
  font-size: 13px;
  color: #6b7280;
  line-height: 1.6;
  margin: 0 0 16px;
  max-width: 420px;
  display: inline-block;
}
.kfb-gen-btn {
  background: linear-gradient(135deg, #8F5FC4, #6b3fa0);
  color: #fff;
  border: none;
  border-radius: 10px;
  padding: 10px 22px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  font-family: 'Inter', sans-serif;
  transition: opacity .15s, transform .1s;
  box-shadow: 0 2px 8px rgba(143,95,196,.25);
}
.kfb-gen-btn:hover  { opacity: .88; transform: translateY(-1px); }
.kfb-gen-btn:active { transform: translateY(0); }
.kfb-gen-btn:disabled { opacity: .5; cursor: not-allowed; transform: none; }

.kfb-wrap {
  display: flex;
  flex-direction: column;
  gap: 0;
}
.kfb-section {
  border-bottom: 1px solid #f3f0fb;
  padding: 14px 0 12px;
}
.kfb-section:last-of-type { border-bottom: none; }
.kfb-section-head {
  font-size: 11px;
  font-weight: 800;
  color: #8F5FC4;
  text-transform: uppercase;
  letter-spacing: .07em;
  margin-bottom: 10px;
}
.kfb-icon { margin-right: 4px; }
.kfb-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.kfb-headline-item,
.kfb-question-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 10px;
  background: #faf5ff;
  border: 1px solid #ede9fe;
  border-radius: 8px;
  font-size: 13px;
  color: #1f2937;
  line-height: 1.45;
}
.kfb-headline-item { font-weight: 600; }
.kfb-question-item { font-style: italic; color: #374151; }
.kfb-item-text { flex: 1; min-width: 0; }
.kfb-copy-btn {
  flex-shrink: 0;
  cursor: pointer;
  font-style: normal;
  color: #9ca3af;
  font-size: 13px;
  transition: color .15s;
  user-select: none;
}
.kfb-copy-btn:hover { color: #8F5FC4; }
.kfb-insert-btn {
  flex-shrink: 0;
  background: none;
  border: 1px solid #d8b4fe;
  border-radius: 6px;
  padding: 3px 9px;
  font-size: 11px;
  font-weight: 700;
  color: #8F5FC4;
  cursor: pointer;
  white-space: nowrap;
  font-family: 'Inter', sans-serif;
  transition: background .15s, color .15s;
}
.kfb-insert-btn:hover {
  background: #8F5FC4;
  color: #fff;
  border-color: #8F5FC4;
}
.kfb-angles-list { gap: 8px; }
.kfb-angle-item {
  padding: 9px 12px;
  background: #f0fdf4;
  border: 1px solid #bbf7d0;
  border-radius: 8px;
  font-size: 13px;
  color: #166534;
  line-height: 1.5;
}
.kfb-footer {
  padding-top: 14px;
  text-align: right;
}
.kfb-regen-btn {
  background: none;
  border: 1px solid #d8b4fe;
  border-radius: 8px;
  padding: 6px 14px;
  font-size: 12px;
  font-weight: 600;
  color: #8F5FC4;
  cursor: pointer;
  transition: background .15s;
  font-family: 'Inter', sans-serif;
}
.kfb-regen-btn:hover { background: #faf5ff; }
.kfb-error {
  color: #dc2626;
  font-size: 13px;
  margin: 8px 0 0;
}

.kf-ai-error {
  padding: 10px 14px;
  background: #fef2f2;
  border: 1px solid #fee2e2;
  border-radius: 8px;
  color: #ef4444;
  font-size: 13px;
}

/* ── B2: Content Gap Card ─────────────────────────────────────────── */
/* Amber-Variante entfernt → nutzt jetzt den dunklen Base-Header
   mit einem orangenen Badge statt eigenem Gradient.              */
.kf-gap-card {
  border-color: rgba(255,143,0,.20);
}
/* kf-gap-card .ic-card-head erbt jetzt den Base-Stil (#1f2937) */
.kf-gap-intro {
  font-size: 13px;
  color: #6b7280;
  margin: 0 0 14px;
  line-height: 1.5;
}
.kf-gap-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 8px;
}
.kf-gap-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 8px 12px;
  background: #fffbeb;
  border: 1px solid #fde68a;
  border-radius: 10px;
}
.kf-gap-kw {
  font-size: 13px;
  font-weight: 500;
  color: #374151;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.kf-gap-meta {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  flex-shrink: 0;
}
.kf-gap-avg {
  font-size: 11px;
  color: #92400e;
  font-weight: 600;
}
.kf-gap-action {
  font-size: 10px;
  color: #d97706;
  text-transform: uppercase;
  letter-spacing: .04em;
  margin-top: 1px;
}

/* ── B5 Keyword-Cluster ──────────────────────────────────────────── */
.kf-cluster-group {
  border-bottom: 1px solid #f0f0f0;
  padding: 14px 0;
}
.kf-cluster-group:last-child { border-bottom: none; }
.kf-cluster-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
  flex-wrap: wrap;
}
.kf-cluster-icon { font-size: 16px; }
.kf-cluster-name {
  font-size: 14px;
  font-weight: 600;
  color: #111827;
  flex: 1;
}
.kf-cluster-count {
  font-size: 11px;
  color: #6b7280;
  background: #f3f4f6;
  padding: 2px 8px;
  border-radius: 20px;
}
.kf-cluster-cov {
  font-size: 12px;
  font-weight: 600;
}
.kf-cluster-kws {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.kf-cluster-kw {
  font-size: 12px;
  padding: 3px 10px;
  border-radius: 20px;
  font-weight: 500;
  cursor: default;
}
.kf-kw-ok   { background: #f0fdf4; color: #166534; border: 1px solid #bbf7d0; }
.kf-kw-miss { background: #fef2f2; color: #991b1b; border: 1px solid #fecaca; }
.kf-kw-warn { background: #fffbeb; color: #92400e; border: 1px solid #fde68a; }

/* ── Lesbarkeit Reading Cards ────────────────────────────────── */
.kf-reading-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin-top: 14px;
}
.kf-reading-card {
  border-radius: 12px;
  padding: 16px 18px;
  position: relative;
  overflow: hidden;
  background: #fafafa;
  border: 1px solid #e5e7eb;
  transition: box-shadow .15s;
}
.kf-reading-card:hover { box-shadow: 0 4px 14px rgba(0,0,0,.07); }
.kf-reading-icon {
  font-size: 22px;
  margin-bottom: 8px;
  display: block;
}
.kf-reading-label {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: #9ca3af;
  margin-bottom: 4px;
}
.kf-reading-val {
  font-size: 28px;
  font-weight: 700;
  line-height: 1.1;
  margin-bottom: 6px;
}
.kf-reading-val.rc-green  { color: #6FB130; }
.kf-reading-val.rc-amber  { color: #d97706; }
.kf-reading-val.rc-red    { color: #dc2626; }
.kf-reading-badge {
  display: inline-block;
  font-size: 11px;
  font-weight: 600;
  padding: 2px 9px;
  border-radius: 20px;
  margin-bottom: 8px;
}
.kf-reading-badge.rb-green { background: #f0fdf4; color: #166534; border: 1px solid #bbf7d0; }
.kf-reading-badge.rb-amber { background: #fffbeb; color: #92400e; border: 1px solid #fde68a; }
.kf-reading-badge.rb-red   { background: #fef2f2; color: #991b1b; border: 1px solid #fecaca; }
.kf-reading-hint {
  font-size: 11px;
  color: #6b7280;
  line-height: 1.4;
}
.kf-reading-bar-wrap {
  height: 5px;
  border-radius: 4px;
  background: #e5e7eb;
  margin-top: 10px;
  overflow: hidden;
}
.kf-reading-bar {
  height: 100%;
  border-radius: 4px;
  transition: width .4s ease;
}
.kf-reading-bar.rb-green { background: #6FB130; }
.kf-reading-bar.rb-amber { background: #d97706; }
.kf-reading-bar.rb-red   { background: #dc2626; }
@media (max-width: 900px) {
  .kf-reading-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 600px) {
  .kf-reading-grid { grid-template-columns: 1fr; }
}

/* ── C1: Live WDF·IDF Scoring Rows ──────────────────────────── */
.kf-live-row {
  padding: 9px 0;
  border-bottom: 1px solid #f3f4f6;
}
.kf-live-row:last-child { border-bottom: none; }
.kf-live-kw {
  font-size: 13px;
  font-weight: 600;
  color: #111827;
  margin-bottom: 4px;
}
.kf-live-nums {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: 5px;
}
.kf-live-count {
  font-size: 15px;
  font-weight: 700;
  min-width: 30px;
}
.kf-live-range {
  font-size: 12px;
  color: #6b7280;
  flex: 1;
}
.kf-live-badge {
  font-size: 11px;
  font-weight: 600;
  padding: 2px 9px;
  border-radius: 20px;
}
.kf-live-ok   { color: #166534; }
.kf-live-miss { color: #991b1b; }
.kf-live-over { color: #92400e; }
.kf-live-badge.kf-live-ok   { background: #f0fdf4; border: 1px solid #bbf7d0; }
.kf-live-badge.kf-live-miss { background: #fef2f2; border: 1px solid #fecaca; }
.kf-live-badge.kf-live-over { background: #fffbeb; border: 1px solid #fde68a; }
.kf-live-bar-wrap {
  height: 5px;
  border-radius: 4px;
  background: #f3f4f6;
  overflow: hidden;
}
.kf-live-bar {
  height: 100%;
  border-radius: 4px;
  transition: width .3s ease;
}

/* ══════════════════════════════════════════════════════════════════
   EPS-KF-QUICK  —  Modernes Editor-Layout 2026
   ══════════════════════════════════════════════════════════════════ */

.kfq-wrapper {
  margin: 0 -15px;
  font-family: 'Inter', sans-serif;
}

/* ── Top Bar ── */
.kfq-topbar {
  background: linear-gradient(135deg, #1f2937, #374151);
  padding: 14px 22px;
  display: flex;
  align-items: center;
  gap: 14px;
}
.kfq-topbar-icon { font-size: 20px; flex-shrink: 0; }
.kfq-topbar-info { display: flex; flex-direction: column; gap: 2px; }
.kfq-topbar-kw {
  font-size: 15px;
  font-weight: 700;
  color: #fff;
  font-family: 'Inter', sans-serif;
}
.kfq-topbar-gv {
  font-size: 11px;
  color: #9ca3af;
  background: rgba(255,255,255,.08);
  padding: 1px 8px;
  border-radius: 10px;
  width: fit-content;
}
.kfq-topbar-actions { margin-left: auto; display: flex; gap: 8px; flex-shrink: 0; }
.kfq-topbar-btn {
  font-size: 12px;
  font-weight: 600;
  padding: 6px 14px;
  border-radius: 8px;
  text-decoration: none;
  border: 1px solid rgba(255,255,255,.2);
  color: rgba(255,255,255,.85);
  background: rgba(255,255,255,.08);
  transition: background .15s;
  white-space: nowrap;
  font-family: 'Inter', sans-serif;
}
.kfq-topbar-btn:hover { background: rgba(255,255,255,.18); color: #fff; text-decoration: none; }
.kfq-btn-danger { color: #fca5a5 !important; border-color: rgba(239,68,68,.35) !important; }
.kfq-btn-danger:hover { background: rgba(239,68,68,.18) !important; }

/* ── Score Strip ── */
.kfq-scorebar {
  background: linear-gradient(to bottom, #fafafa, #fff);
  border: 1px solid #e5e7eb;
  border-top: none;
  padding: 14px 22px;
  display: flex;
  align-items: center;
  gap: 0;
  flex-wrap: wrap;
  min-height: 64px;
}
.kfq-scorebar-section {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 22px;
}
.kfq-scorebar-section:first-child { padding-left: 0; }
.kfq-scorebar-main { flex: 1; min-width: 220px; }
.kfq-scorebar-divider {
  width: 1px;
  height: 36px;
  background: #e5e7eb;
  flex-shrink: 0;
}
.kfq-scorebar-label {
  font-size: 11px;
  font-weight: 800;
  color: #8F5FC4;
  background: linear-gradient(135deg, #f5f0fd, #ede8fb);
  border: 1px solid #d4b8f0;
  border-radius: 8px;
  padding: 4px 10px;
  text-transform: uppercase;
  letter-spacing: .07em;
  white-space: nowrap;
}
.kfq-score-track {
  flex: 1;
  min-width: 120px;
  height: 12px;
  background: #f0f2f5;
  border-radius: 6px;
  overflow: hidden;
  box-shadow: inset 0 1px 3px rgba(0,0,0,.06);
}
.kfq-score-fill {
  height: 100%;
  border-radius: 6px;
  background: linear-gradient(90deg, #6FB130, #8F5FC4);
  transition: width .55s cubic-bezier(.4,0,.2,1), background .4s;
  box-shadow: 0 1px 4px rgba(143,95,196,.35);
}
.kfq-score-pct {
  font-size: 26px;
  font-weight: 900;
  color: #111827;
  min-width: 60px;
  transition: color .3s;
  letter-spacing: -.5px;
  font-family: 'Inter', sans-serif;
}

/* Zielwörter – farbiger Hintergrund-Chip */
.kfq-target-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
  background: linear-gradient(135deg, #f5f0fd, #ede8fb);
  border: 1.5px solid #c4a8e8;
  border-radius: 12px;
  padding: 6px 14px 6px 12px;
}
.kfq-target-input {
  width: 70px;
  padding: 0;
  border: none;
  background: transparent;
  font-size: 17px;
  font-weight: 800;
  text-align: center;
  color: #6b21c8;
  font-family: 'Inter', sans-serif;
}
.kfq-target-input:focus { outline: none; }
.kfq-target-unit {
  font-size: 11px;
  font-weight: 700;
  color: #8F5FC4;
  text-transform: uppercase;
  letter-spacing: .04em;
  white-space: nowrap;
}

/* Wortzähler */
.kfq-wc-chip {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
}
.kfq-wc-num {
  font-size: 20px;
  font-weight: 800;
  color: #1f2937;
  line-height: 1;
  font-family: 'Inter', sans-serif;
}
.kfq-wc-unit {
  font-size: 10px;
  font-weight: 700;
  color: #9ca3af;
  text-transform: uppercase;
  letter-spacing: .05em;
}
/* Legacy compat */
.kfq-score-wc {
  font-size: 20px;
  font-weight: 800;
  color: #1f2937;
  white-space: nowrap;
  font-family: 'Inter', sans-serif;
}

/* ── Body Layout ── */
.kfq-body {
  display: flex;
  min-height: 620px;
  border: 1px solid #e5e7eb;
  border-top: none;
  border-radius: 0 0 12px 12px;
  overflow: hidden;
  background: #fff;
}

/* ── Keyword Sidebar ── */
.kfq-sidebar {
  width: 280px;
  flex-shrink: 0;
  background: #f8fafc;
  border-right: 1px solid #e5e7eb;
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.kfq-sidebar-head {
  padding: 12px 16px 10px;
  font-size: 10px;
  font-weight: 800;
  color: #6b7280;
  text-transform: uppercase;
  letter-spacing: .07em;
  border-bottom: 1px solid #e5e7eb;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #f1f5f9;
  flex-shrink: 0;
}
.kfq-sidebar-badge {
  font-size: 11px;
  font-weight: 700;
  padding: 2px 9px;
  border-radius: 20px;
  background: #f3f4f6;
  color: #374151;
  border: 1px solid #e5e7eb;
  transition: background .3s, color .3s, border-color .3s;
}
.kfq-sidebar-list {
  flex: 1;
  overflow-y: auto;
  padding: 4px 0;
}
.kfq-sidebar-list::-webkit-scrollbar { width: 4px; }
.kfq-sidebar-list::-webkit-scrollbar-track { background: transparent; }
.kfq-sidebar-list::-webkit-scrollbar-thumb { background: #d1d5db; border-radius: 2px; }

/* ── Keyword Rows ── */
.kfq-kw-row {
  padding: 7px 14px 6px;
  border-bottom: 1px solid #f0f2f5;
  cursor: default;
  transition: background .1s;
}
.kfq-kw-row:last-child { border-bottom: none; }
.kfq-kw-row:hover { background: #eef2f7; }
.kfq-kw-top {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-bottom: 4px;
}
.kfq-kw-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex-shrink: 0;
  background: #d1d5db;
  transition: background .3s;
}
.kfq-kw-name {
  font-size: 12px;
  font-weight: 600;
  color: #1f2937;
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-family: 'Inter', sans-serif;
}
.kfq-kw-counts {
  font-size: 11px;
  white-space: nowrap;
  flex-shrink: 0;
  font-family: 'Inter', sans-serif;
}
.kfq-kw-bar-wrap {
  height: 3px;
  background: #e9ecf0;
  border-radius: 2px;
  overflow: hidden;
}
.kfq-kw-bar {
  height: 100%;
  border-radius: 2px;
  background: #d1d5db;
  transition: width .35s ease, background .3s;
}

/* ── Flesch-Chip im Score-Header ── */
.kfq-flesch-chip {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  padding: 3px 9px;
  border-radius: 8px;
  border: 1px solid #e5e7eb;
  background: #f3f4f6;
  color: #9ca3af;
  white-space: nowrap;
  transition: background .3s, color .3s, border-color .3s;
  cursor: help;
  font-family: 'Inter', sans-serif;
}

/* ── Wort-Ziel-Progressbar ── */
.kfq-wc-progress-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 5px 18px 6px;
  background: #f9fafb;
  border-bottom: 1px solid #e5e7eb;
}
.kfq-wc-progress-bar-wrap {
  flex: 1;
  height: 5px;
  background: #e5e7eb;
  border-radius: 3px;
  overflow: hidden;
}
.kfq-wc-progress-fill {
  height: 100%;
  border-radius: 3px;
  background: #ef4444;
  transition: width .4s ease, background .3s;
}
.kfq-wc-progress-label {
  font-size: 11px;
  font-weight: 600;
  color: #ef4444;
  white-space: nowrap;
  font-family: 'Inter', sans-serif;
  transition: color .3s;
  min-width: 180px;
  text-align: right;
}

/* ── Keyword-Highlight aktive Sidebar-Zeile ── */
.kfq-kw-row {
  cursor: pointer;
}
.kfq-kw-row.kfq-kw-active {
  background: #fefce8 !important;
  border-left: 3px solid #f59e0b;
  padding-left: 9px;
}
.kfq-kw-row.kfq-kw-active .kfq-kw-name {
  color: #92400e;
  font-weight: 700;
}

/* ── Cluster-Gruppen in der Sidebar ── */
.kfq-cluster-group {
  padding: 0;
}
.kfq-cluster-group-sep {
  border-top: 1px solid #e5e7eb;
  margin-top: 2px;
  padding-top: 2px;
}
.kfq-cluster-head {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 7px 12px 3px;
  background: linear-gradient(135deg, #f5f0fd 0%, #eef2ff 100%);
  position: sticky;
  top: 0;
  z-index: 1;
}
.kfq-cluster-name {
  font-size: 10px;
  font-weight: 800;
  color: #6d28d9;
  text-transform: uppercase;
  letter-spacing: .06em;
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-family: 'Inter', sans-serif;
}
.kfq-cluster-pct {
  font-size: 10px;
  font-weight: 700;
  white-space: nowrap;
  font-family: 'Inter', sans-serif;
}
.kfq-cluster-bar-wrap {
  height: 3px;
  background: #e5e7eb;
  margin: 0 12px 4px;
  border-radius: 2px;
  overflow: hidden;
}
.kfq-cluster-bar-fill {
  height: 100%;
  border-radius: 2px;
  transition: width .4s ease;
}

/* ── Main Editor ── */
.kfq-main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}
.kfq-ai-wrap {
  padding: 14px 16px 0;
  flex-shrink: 0;
}
.kfq-ai-wrap .ic-card { margin-bottom: 0; }
.kfq-editor-area {
  flex: 1;
  padding: 16px;
  display: flex;
  flex-direction: column;
}
.kfq-editor-area form { display: flex; flex-direction: column; flex: 1; }
.kfq-editor-area #kfQuickTextarea { display: none; }

.kfq-editor-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 0 0;
  margin-top: 10px;
  border-top: 1px solid #f3f4f6;
  flex-shrink: 0;
}
.kfq-editor-hint-row {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.kfq-editor-hint {
  font-size: 12px;
  color: #9ca3af;
}
.kfq-autosave-ind {
  font-size: 11px;
  font-weight: 600;
  color: #6FB130;
}
.kfq-submit-btn {
  background: linear-gradient(135deg, #8F5FC4, #7c4fb4);
  color: #fff;
  border: none;
  padding: 10px 22px;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  font-family: 'Inter', sans-serif;
  transition: opacity .15s, transform .1s;
  white-space: nowrap;
}
.kfq-submit-btn:hover { opacity: .9; transform: translateY(-1px); }
.kfq-submit-btn:active { transform: translateY(0); }

/* Speichern-Button */
.kfq-footer-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}
.kfq-save-btn {
  background: #fff;
  color: #8F5FC4;
  border: 2px solid #8F5FC4;
  padding: 9px 20px;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  font-family: 'Inter', sans-serif;
  transition: background .15s, color .15s, transform .1s;
  white-space: nowrap;
}
.kfq-save-btn:hover  { background: #8F5FC4; color: #fff; transform: translateY(-1px); }
.kfq-save-btn:active { transform: translateY(0); }
.kfq-save-btn:disabled { opacity: .5; cursor: not-allowed; transform: none; }

/* ── Charts Section ── */
.kfq-charts-section { margin-top: 20px; }
.kfq-charts-nav {
  display: flex;
  gap: 10px;
  margin-bottom: 14px;
}
.kfq-chart-btn {
  font-size: 13px;
  font-weight: 600;
  padding: 9px 20px;
  border-radius: 10px;
  text-decoration: none;
  border: 1.5px solid #e5e7eb;
  color: #6b7280;
  background: #fff;
  transition: all .15s;
  font-family: 'Inter', sans-serif;
}
.kfq-chart-btn:hover { border-color: #8F5FC4; color: #8F5FC4; text-decoration: none; }
.kfq-chart-btn.active {
  background: #8F5FC4;
  border-color: #8F5FC4;
  color: #fff;
}

/* ── Start Form ── */
.kfq-start-form { margin-bottom: 20px; }

/* Responsive */
@media (max-width: 900px) {
  .kfq-body { flex-direction: column; }
  .kfq-sidebar { width: 100%; border-right: none; border-bottom: 1px solid #e5e7eb; max-height: 240px; }
  .kfq-scorebar-section { padding: 0 10px; }
  .kfq-wrapper { margin: 0 -10px; }
}

/* ══════════════════════════════════════════════════════════════════
   KF Hilfe-Center Sidebar
   ══════════════════════════════════════════════════════════════════ */

/* ── Floating Action Button ──────────────────────────────────────── */
.kfh-fab {
  position: fixed;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  z-index: 1200;
  width: 44px;
  height: 44px;
  border-radius: 10px 0 0 10px;
  background: linear-gradient(135deg, #8F5FC4 0%, #6d3fa8 100%);
  border: none;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: -3px 0 16px rgba(143,95,196,.35);
  transition: all .2s;
}
.kfh-fab:hover {
  width: 50px;
  box-shadow: -4px 0 20px rgba(143,95,196,.5);
}

/* ── Overlay ─────────────────────────────────────────────────────── */
.kfh-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(10,4,28,.45);
  z-index: 1201;
  backdrop-filter: blur(2px);
}
.kfh-overlay.open { display: block; }

/* ── Panel ───────────────────────────────────────────────────────── */
.kfh-panel {
  position: fixed;
  top: 0;
  right: -440px;
  width: 420px;
  height: 100vh;
  z-index: 1202;
  background: #fff;
  display: flex;
  flex-direction: column;
  box-shadow: -8px 0 40px rgba(0,0,0,.2);
  transition: right .3s cubic-bezier(.4,0,.2,1);
}
.kfh-panel.open { right: 0; }

/* ── Header ──────────────────────────────────────────────────────── */
.kfh-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 20px 16px;
  background: linear-gradient(135deg, #1e1040 0%, #2d1b6e 100%);
  flex-shrink: 0;
}
.kfh-header-left { display: flex; align-items: center; gap: 12px; }
.kfh-header-icon { font-size: 26px; line-height: 1; }
.kfh-header-title { font-size: 16px; font-weight: 700; color: #fff; line-height: 1.2; }
.kfh-header-sub { font-size: 11px; color: rgba(255,255,255,.55); margin-top: 2px; }
.kfh-close {
  width: 32px; height: 32px;
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,.2);
  background: rgba(255,255,255,.08);
  color: rgba(255,255,255,.7);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: all .15s;
}
.kfh-close:hover { background: rgba(255,255,255,.18); color: #fff; }

/* ── Category Tabs ───────────────────────────────────────────────── */
.kfh-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  padding: 12px 14px 10px;
  background: #f8f5fd;
  border-bottom: 1px solid #e5e7eb;
  flex-shrink: 0;
}
.kfh-tab {
  padding: 5px 11px;
  border-radius: 16px;
  border: 1.5px solid #e5e7eb;
  background: #fff;
  font-size: 12px;
  font-weight: 500;
  color: #6b7280;
  cursor: pointer;
  transition: all .15s;
  white-space: nowrap;
}
.kfh-tab:hover { border-color: #8F5FC4; color: #8F5FC4; }
.kfh-tab.active { background: #8F5FC4; border-color: #8F5FC4; color: #fff; }

/* ── Content Panes ───────────────────────────────────────────────── */
.kfh-content {
  flex: 1;
  overflow: hidden;
  position: relative;
}
.kfh-pane {
  display: none;
  height: 100%;
  overflow-y: auto;
  padding: 12px 0 24px;
  scrollbar-width: thin;
  scrollbar-color: #d1d5db transparent;
}
.kfh-pane.active { display: block; }
.kfh-pane::-webkit-scrollbar { width: 5px; }
.kfh-pane::-webkit-scrollbar-thumb { background: #d1d5db; border-radius: 3px; }

/* ── Topic Accordion ─────────────────────────────────────────────── */
.kfh-topic {
  border-bottom: 1px solid #f3f4f6;
}
.kfh-topic-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 13px 20px;
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
  color: #1e1b4b;
  transition: background .15s;
  user-select: none;
}
.kfh-topic-head:hover { background: #faf9ff; }
.kfh-arrow {
  font-size: 18px;
  color: #9ca3af;
  transition: transform .2s;
  flex-shrink: 0;
  margin-left: 8px;
  line-height: 1;
}
.kfh-topic.open .kfh-arrow { transform: rotate(90deg); color: #8F5FC4; }
.kfh-topic-body {
  display: none;
  padding: 0 20px 16px;
  font-size: 13px;
  color: #374151;
  line-height: 1.65;
}
.kfh-topic.open .kfh-topic-body { display: block; }
.kfh-topic-body p { margin: 0 0 8px; }
.kfh-topic-body p:last-child { margin-bottom: 0; }

/* ── Tip Box ─────────────────────────────────────────────────────── */
.kfh-tip {
  margin-top: 10px;
  padding: 9px 12px;
  background: #f5f0fb;
  border-left: 3px solid #8F5FC4;
  border-radius: 0 6px 6px 0;
  font-size: 12px;
  color: #5b21b6;
  line-height: 1.55;
}

/* ── Score Legend ────────────────────────────────────────────────── */
.kfh-score-legend {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  margin: 10px 0 6px;
}
.kfh-score-item {
  padding: 7px 10px;
  border: 1.5px solid #e5e7eb;
  border-radius: 7px;
  font-size: 12px;
  color: #4b5563;
  background: #fafafa;
}

/* ── Chip List ───────────────────────────────────────────────────── */
.kfh-chip-list { display: flex; flex-direction: column; gap: 8px; margin-top: 6px; }
.kfh-chip-item { display: flex; align-items: flex-start; gap: 10px; font-size: 12px; color: #4b5563; line-height: 1.5; }
.kfh-chip { padding: 2px 10px; border-radius: 12px; font-size: 11px; font-weight: 600; white-space: nowrap; flex-shrink: 0; }
.kfh-chip.ok   { background: #dcfce7; color: #166534; }
.kfh-chip.more { background: #fef3c7; color: #92400e; }
.kfh-chip.less { background: #dbeafe; color: #1e40af; }
.kfh-chip.miss { background: #fee2e2; color: #991b1b; }

/* ── Workflow Steps ──────────────────────────────────────────────── */
.kfh-steps { display: flex; flex-direction: column; gap: 12px; margin-top: 6px; }
.kfh-step { display: flex; gap: 12px; font-size: 13px; align-items: flex-start; }
.kfh-step-num {
  width: 26px; height: 26px; border-radius: 50%;
  background: linear-gradient(135deg, #8F5FC4, #6d3fa8);
  color: #fff; font-size: 13px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; margin-top: 1px;
}

/* ── Badge ───────────────────────────────────────────────────────── */
.kfh-badge { display: inline-block; padding: 2px 10px; border-radius: 12px; font-size: 11px; font-weight: 600; margin-right: 4px; }
.kfh-badge-purple { background: #ede9fe; color: #5b21b6; }

/* ── Responsive ──────────────────────────────────────────────────── */
@media (max-width: 480px) {
  .kfh-panel { width: 100%; right: -100%; }
  .kfh-panel.open { right: 0; }
}

/* ═══════════════════════════════════════════════════════════════════════
   KF Tab 6 – Entity Bridge Mindmap
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Wrapper ─────────────────────────────────────────────────────────── */
.kf-entity-wrap {
  padding: 0 0 24px;
}

/* ── Loading State ───────────────────────────────────────────────────── */
.kf-entity-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 48px 0;
  flex-direction: column;
  gap: 16px;
}
.kf-entity-loading-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}
.kf-entity-spinner {
  width: 36px;
  height: 36px;
  border: 3px solid rgba(143,95,196,.25);
  border-top-color: #8F5FC4;
  border-radius: 50%;
  animation: kfEntSpin .8s linear infinite;
}
@keyframes kfEntSpin { to { transform: rotate(360deg); } }
.kf-entity-loading-text {
  font-size: 13px;
  color: #64748b;
}

/* ── Error State ─────────────────────────────────────────────────────── */
.kf-entity-error {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 18px;
  background: rgba(239,68,68,.08);
  border: 1px solid rgba(239,68,68,.25);
  border-radius: 10px;
  font-size: 13px;
  color: #fca5a5;
  margin-bottom: 16px;
}
.kf-entity-error-ico { font-size: 16px; flex-shrink: 0; }

/* ── Controls Row ────────────────────────────────────────────────────── */
.kf-entity-controls {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 12px;
  padding: 10px 14px;
  background: rgba(255,255,255,.03);
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,.06);
}

/* ── Legend ──────────────────────────────────────────────────────────── */
.kf-entity-legend {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px 12px;
  font-size: 11px;
  color: #94a3b8;
}
.kf-ent-legend-dot {
  display: inline-block;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  flex-shrink: 0;
}
.kf-entity-ref-legend {
  display: flex;
  align-items: center;
  gap: 8px 14px;
  font-size: 11px;
  color: #94a3b8;
}
.kf-ent-ref-dot {
  display: inline-block;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  flex-shrink: 0;
}
.kf-ent-ref-present {
  background: rgba(34,197,94,.7);
}
.kf-ent-ref-missing {
  background: transparent;
  border: 2px dashed #ef4444;
}

/* ── SVG Canvas ──────────────────────────────────────────────────────── */
.kf-entity-svg {
  width: 100%;
  display: block;
  background: #0d1117;
  border-radius: 0 0 12px 12px;
  cursor: grab;
}
.kf-entity-svg:active { cursor: grabbing; }

/* ── Tooltip ─────────────────────────────────────────────────────────── */
.kf-entity-tooltip {
  position: absolute;
  max-width: 220px;
  background: #1e293b;
  border: 1px solid rgba(255,255,255,.15);
  border-radius: 10px;
  padding: 10px 12px;
  pointer-events: none;
  z-index: 100;
  box-shadow: 0 6px 24px rgba(0,0,0,.5);
}

/* ── Zoom Buttons ────────────────────────────────────────────────────── */
.kf-entity-zoom-btns {
  position: absolute;
  bottom: 12px;
  right: 12px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.kf-entity-zoom-btns button {
  width: 28px;
  height: 28px;
  border-radius: 6px;
  border: 1px solid rgba(255,255,255,.15);
  background: rgba(30,41,59,.85);
  color: #e2e8f0;
  font-size: 16px;
  cursor: pointer;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .15s;
}
.kf-entity-zoom-btns button:hover { background: rgba(83,74,183,.4); }

/* ── Entity List Grid ────────────────────────────────────────────────── */
.kf-entity-list {
  margin-top: 14px;
}
.kf-entity-list-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 10px;
}
.kf-ent-list-card {
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.07);
  border-radius: 10px;
  padding: 10px 12px;
  transition: border-color .15s, background .15s;
}
.kf-ent-list-card:hover {
  background: rgba(255,255,255,.06);
  border-color: rgba(255,255,255,.14);
}

/* ── Badges ──────────────────────────────────────────────────────────── */
.kf-ent-badge {
  font-size: 10px;
  font-weight: 600;
  padding: 2px 7px;
  border-radius: 8px;
  flex-shrink: 0;
  white-space: nowrap;
}
.kf-ent-badge-ok   { background: rgba(34,197,94,.18);  color: #4ade80; }
.kf-ent-badge-miss { background: rgba(239,68,68,.15);  color: #f87171; }

/* ── D3 node interaction ─────────────────────────────────────────────── */
.kf-ent-node { cursor: pointer; }
.kf-ent-node circle { transition: r .15s; }
.kf-ent-node:hover circle:first-child { filter: brightness(1.3); }

/* ══════════════════════════════════════════════════════════════════════
   KF CI-PAGE WRAPPER  (eps-kf.tmpl.html + eps-kf-quick.tmpl.html)
   Ersetzt das Bootstrap col-sm-9 / col-md-10 Outer-Div.
   Bootstrap-Grid-Overrides greifen nicht mehr (kein .col-sm-9),
   daher eigene minimale Regeln.
   ══════════════════════════════════════════════════════════════════════ */
.intern-ci-content .kf-ci-page {
  display: block;
  width: 100%;
  max-width: 100%;
  padding: 0;
  box-sizing: border-box;
  float: none;
}

/* ── CC-AI Promo-Banner (cc_new_level Block) ────────────────────────── */
.intern-ci-content .kf-ci-promo-banner {
  display: flex !important;
  align-items: center !important;
  gap: 16px !important;
  flex-wrap: wrap !important;
}
.intern-ci-content .kf-ci-promo-text {
  flex: 1 1 0;
  min-width: 200px;
}
.intern-ci-content .kf-ci-promo-text strong {
  font-size: 13.5px;
  color: #4c1d95;
}
.intern-ci-content .kf-ci-promo-text p {
  font-size: 13px;
  color: #6d28d9;
}
.intern-ci-content .kf-ci-promo-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #8f5fc4;
  color: #fff !important;
  border-radius: 8px;
  padding: 8px 16px;
  font-size: 13px;
  font-weight: 600;
  text-decoration: none !important;
  flex-shrink: 0;
  transition: background .15s;
}
.intern-ci-content .kf-ci-promo-btn:hover {
  background: #7c3aed;
  color: #fff !important;
}

/* ── Override inline card-heads: Snippet, EPS-WDF, Profi-Analysen ─────── */
/* Alle drei Templates haben lokale dark-gradient inline-styles —          */
/* diese werden hier mit höherer Spezifität auf das neue CI-Design gesetzt */
.snt-card-head,
.wdf-card-head,
.blk-card-head {
  background: linear-gradient(90deg, rgba(255,143,0,.13) 0%, rgba(255,143,0,.04) 50%, transparent 100%) !important;
  border-left: 3px solid rgba(255,143,0,.60) !important;
  border-bottom: 1px solid rgba(255,143,0,.14) !important;
  border-top: none !important;
  border-right: none !important;
  border-radius: 0 !important;
  padding: 12px 18px !important;
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
}

/* Titel-Text: dunkel statt weiß */
.snt-card-head-title,
.wdf-card-head-title,
.blk-card-head-title,
.snt-card-head .card-head-title,
.wdf-card-head .card-head-title,
.blk-card-head .card-head-title,
.snt-card-head span,
.wdf-card-head span,
.blk-card-head span {
  color: var(--ci-t1, #0f172a) !important;
}

/* Icon-Spans (Emoji) — inherit dark color so they read on light background */
.snt-card-head-icon,
.wdf-card-head-icon,
.blk-card-head-icon {
  color: var(--ci-t2, #334155) !important;
  filter: none !important;
}

/* Falls Icon-SVGs vorhanden sind, diese orange färben */
.snt-card-head svg,
.wdf-card-head svg,
.blk-card-head svg {
  stroke: rgba(255,143,0,.80) !important;
  color: rgba(255,143,0,.80) !important;
}