/* =============================================================
   SEOlyze OnPage (Analyse-Area) Content-CSS v1.0 (2026-04-21)
   -------------------------------------------------------------
   Zentrale CSS für die 5 OnPage-Templates unter
   templatesV3/onpage/  — (dc, keyword, onpage, onpageDetail, reading).

   Setzt auf ci_layout.css + intern_ci.css auf.
   Scope: body.ci-page.ci-intern-page .intern-ci-content
          (wirkt damit in jeder Intern-Area, färbt sich über --ci-accent)

   Deckt die Klassen, die die Templates heute schon benutzen:
   - .ic-card / -head / -head-icon / -head-title / -head-badge / -head-stat
   - .ic-card-body / -body-flush
   - .ic-table-wrap / .ic-table
   - .ic-empty / -icon / -text
   - .fd-ci-page-header + -left / -icon / -title / -sub
   - .op-count-badge + .op-badge-good/warn/bad/neutral
   - .op-detail-btn
   - .dc-matrix-wrap / -table / -corner / -th / -row-hd / -idx
   - .dc-matrix-cell + .dc-cell-high / -mid / -low / -none / -self
   - .dc-cell-pct / -dash
   - .dc-legend / -item / -dot
   - .dc-url-row / -num / -link / -ext
   - Legacy Bootstrap-Interop (.col-sm-9 etc. neutralise, .seolyzebtn modernise)
   ============================================================= */

/* -------------------------------------------------------------
     0. Layout-Reset — alte Bootstrap-3-Grid-Wrapper neutralisieren
     ------------------------------------------------------------- */
  body.ci-page.ci-intern-page .intern-ci-content .col-sm-9,
  body.ci-page.ci-intern-page .intern-ci-content .col-md-10,
  body.ci-page.ci-intern-page .intern-ci-content .main,
  body.ci-page.ci-intern-page .intern-ci-content [class*="col-sm-offset-"],
  body.ci-page.ci-intern-page .intern-ci-content [class*="col-md-offset-"] {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    float: none !important;
  }

  /* -------------------------------------------------------------
     1. Page-Header-Band (oben auf jeder OnPage-Unterseite)
     ------------------------------------------------------------- */
  .fd-ci-page-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 20px;
    padding: 18px 20px;
    background: #ffffff;
    border: 1px solid var(--ci-border);
    border-radius: var(--ci-radius, 12px);
    box-shadow: 0 1px 3px rgba(15,23,42,.04);
  }
  .fd-ci-page-header-left {
    display: flex;
    align-items: center;
    gap: 14px;
    min-width: 0;
  }
  .fd-ci-page-header-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border-radius: 10px;
    background: var(--ci-accent-soft);
    color: var(--ci-accent);
    font-size: 20px;
    flex: 0 0 auto;
  }
  .fd-ci-page-header-title {
    margin: 0 0 2px 0;
    font-size: 18px;
    font-weight: 700;
    color: var(--ci-t1);
    line-height: 1.2;
    letter-spacing: -.01em;
  }
  .fd-ci-page-header-sub {
    font-size: 12.5px;
    color: var(--ci-t3);
    font-weight: 500;
  }

  /* -------------------------------------------------------------
     2. ic-Card System (Basis-Container für alle Sektionen)
     ------------------------------------------------------------- */
  .ic-card {
    background: #ffffff;
    border: 1px solid var(--ci-border);
    border-radius: var(--ci-radius, 12px);
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(15,23,42,.04);
    margin-bottom: 16px;
  }
  .ic-card:last-child { margin-bottom: 0; }

  .ic-card-head {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 13px 18px;
    background: linear-gradient(180deg, #fafbfc 0%, #f5f7fa 100%);
    border-bottom: 1px solid var(--ci-border);
    font-size: 13.5px;
    font-weight: 700;
    color: var(--ci-t1);
    line-height: 1.3;
  }
  .ic-card-head-icon {
    font-size: 15px;
    line-height: 1;
    flex: 0 0 auto;
  }
  .ic-card-head-title {
    flex: 1 1 auto;
    font-weight: 700;
    color: var(--ci-t1);
  }
  .ic-card-head-badge {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    padding: 3px 8px;
    background: var(--ci-accent);
    color: #fff;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .6px;
    text-transform: uppercase;
    border-radius: 6px;
    line-height: 1.2;
  }
  .ic-card-head-stat {
    flex: 0 0 auto;
    font-size: 11.5px;
    font-weight: 500;
    color: var(--ci-t3);
  }

  .ic-card-body {
    padding: 18px 20px;
  }
  .ic-card-body-flush {
    padding: 0;
  }

  /* -------------------------------------------------------------
     3. ic-Table (simple Data-Table innerhalb .ic-card)
     ------------------------------------------------------------- */
  .ic-table-wrap {
    width: 100%;
    overflow-x: auto;
  }
  .ic-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 12.5px;
    background: #ffffff;
  }
  .ic-table thead th {
    background: #f8fafc;
    color: var(--ci-t2);
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .5px;
    padding: 11px 14px;
    text-align: left;
    border-bottom: 1px solid var(--ci-border);
    white-space: nowrap;
  }
  .ic-table thead th.center,
  .ic-table tbody td.center { text-align: center; }
  .ic-table tbody td {
    padding: 12px 14px;
    border-bottom: 1px solid var(--ci-border-soft, #f1f4f8);
    color: var(--ci-t1);
    vertical-align: middle;
  }
  .ic-table tbody tr:last-child td { border-bottom: 0; }
  .ic-table tbody tr:hover { background: #fafbfc; }

  /* -------------------------------------------------------------
     4. ic-Empty (Leerzustand)
     ------------------------------------------------------------- */
  .ic-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 32px 20px;
    text-align: center;
  }
  .ic-empty-icon {
    font-size: 36px;
    line-height: 1;
    margin-bottom: 12px;
    opacity: .7;
  }
  .ic-empty-text {
    font-size: 13.5px;
    color: var(--ci-t2);
    max-width: 440px;
    margin: 0 auto;
    line-height: 1.5;
  }

  /* -------------------------------------------------------------
     5. OnPage: .op-* Badges + Buttons
     ------------------------------------------------------------- */
  .op-count-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 26px;
    height: 22px;
    padding: 0 7px;
    border-radius: 6px;
    font-family: "Inter", system-ui, sans-serif;
    font-size: 11px;
    font-weight: 700;
    background: #f3f4f6;
    color: var(--ci-t2);
    line-height: 1;
  }
  .op-badge-good    { background: #dcfce7; color: #15803d; }
  .op-badge-warn    { background: #fef9c3; color: #a16207; }
  .op-badge-bad     { background: #fee2e2; color: #b91c1c; }
  .op-badge-neutral { background: #eff6ff; color: #1d4ed8; }

  .op-detail-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: var(--ci-accent);
    color: #fff !important;
    padding: 6px 13px;
    border-radius: 8px;
    font-family: "Inter", system-ui, sans-serif;
    font-size: 12px;
    font-weight: 700;
    text-decoration: none !important;
    white-space: nowrap;
    transition: background .15s, box-shadow .15s, transform .12s;
    box-shadow: var(--ci-accent-shadow, 0 1px 4px rgba(0,0,0,.15));
    border: 0;
    cursor: pointer;
  }
  .op-detail-btn:hover {
    background: var(--ci-accent-hover) !important;
    color: #fff !important;
    box-shadow: 0 3px 10px rgba(0,0,0,.12);
    text-decoration: none !important;
  }
  .op-detail-btn:active { transform: translateY(1px); }

  /* -------------------------------------------------------------
     6. Duplicate-Content Matrix (dc.tmpl.html)
     ------------------------------------------------------------- */
  .dc-matrix-wrap {
    width: 100%;
    overflow-x: auto;
    padding: 16px 20px 8px;
  }
  .dc-matrix-table {
    border-collapse: separate;
    border-spacing: 3px;
    margin: 0 auto;
  }
  .dc-matrix-corner {
    width: 36px;
    height: 36px;
  }
  .dc-matrix-th,
  .dc-matrix-row-hd {
    width: 36px;
    height: 36px;
    background: #f3f4f6;
    color: var(--ci-t2);
    border-radius: 6px;
    text-align: center;
    font-weight: 700;
    font-size: 12px;
    vertical-align: middle;
  }
  .dc-matrix-idx {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    background: #fff;
    border: 1px solid var(--ci-border);
    border-radius: 50%;
    font-size: 11px;
    font-weight: 700;
    color: var(--ci-t2);
  }
  .dc-matrix-row-hd .dc-matrix-idx { margin: 0; }

  .dc-matrix-cell {
    width: 54px;
    height: 42px;
    text-align: center;
    vertical-align: middle;
    border-radius: 6px;
    font-size: 11.5px;
    font-weight: 700;
    transition: transform .12s, box-shadow .12s;
    cursor: default;
  }
  .dc-matrix-cell:hover {
    transform: scale(1.08);
    box-shadow: 0 4px 10px rgba(0,0,0,.08);
    z-index: 2;
    position: relative;
  }
  .dc-cell-self    { background: #f9fafb; color: #d1d5db; cursor: default; }
  .dc-cell-self:hover { transform: none; box-shadow: none; }
  .dc-cell-none    { background: #ecfdf5; color: #065f46; }
  .dc-cell-low     { background: #fef9c3; color: #854d0e; }
  .dc-cell-mid     { background: #fed7aa; color: #9a3412; }
  .dc-cell-high    { background: #fecaca; color: #991b1b; }
  .dc-cell-pct     { display: inline-block; }
  .dc-cell-dash    { opacity: .35; }

  .dc-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 18px;
    padding: 14px 20px 18px;
    border-top: 1px solid var(--ci-border-soft, #f1f4f8);
    font-size: 12px;
    color: var(--ci-t2);
  }
  .dc-legend-item {
    display: inline-flex;
    align-items: center;
    gap: 7px;
  }
  .dc-legend-dot {
    width: 14px;
    height: 14px;
    border-radius: 4px;
    flex: 0 0 auto;
  }

  /* URL-Index Liste */
  .dc-url-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 11px 20px;
    border-bottom: 1px solid var(--ci-border-soft, #f1f4f8);
    font-size: 12.5px;
    transition: background .12s;
  }
  .dc-url-row:last-child { border-bottom: 0; }
  .dc-url-row:hover { background: #fafbfc; }
  .dc-url-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    background: var(--ci-accent-soft);
    color: var(--ci-accent);
    border-radius: 50%;
    font-size: 11px;
    font-weight: 700;
    flex: 0 0 auto;
  }
  .dc-url-link {
    flex: 1 1 auto;
    min-width: 0;
    color: var(--ci-t1);
    text-decoration: none;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: 500;
  }
  .dc-url-link:hover {
    color: var(--ci-accent);
    text-decoration: underline;
  }
  .dc-url-ext {
    color: var(--ci-t3);
    flex: 0 0 auto;
    opacity: .6;
    transition: opacity .12s, color .12s;
  }
  .dc-url-row:hover .dc-url-ext {
    color: var(--ci-accent);
    opacity: 1;
  }

  /* -------------------------------------------------------------
     7. Legacy-Bootstrap-3 Interop (damit alte Markup-Reste
        nicht verwüstet aussehen)
     ------------------------------------------------------------- */
  body.ci-page.ci-intern-page .intern-ci-content .alert {
    padding: 13px 16px;
    border-radius: 10px;
    border: 1px solid transparent;
    font-size: 13px;
    margin-bottom: 16px;
  }
  body.ci-page.ci-intern-page .intern-ci-content .alert-danger {
    background: #fef2f2;
    border-color: #fecaca;
    color: #991b1b;
  }
  body.ci-page.ci-intern-page .intern-ci-content .alert-warning {
    background: #fffbeb;
    border-color: #fde68a;
    color: #92400e;
  }
  body.ci-page.ci-intern-page .intern-ci-content .alert-success {
    background: #f0fdf4;
    border-color: #bbf7d0;
    color: #166534;
  }
  body.ci-page.ci-intern-page .intern-ci-content .alert-info {
    background: #eff6ff;
    border-color: #bfdbfe;
    color: #1e40af;
  }
  body.ci-page.ci-intern-page .intern-ci-content .alert h4,
  body.ci-page.ci-intern-page .intern-ci-content .alert .alert-titleing {
    margin: 0 0 4px 0;
    font-size: 13.5px;
    font-weight: 700;
    color: inherit;
  }

  /* Legacy button .seolyzebtn → accent-primary style */
  body.ci-page.ci-intern-page .intern-ci-content .btn.seolyzebtn,
  body.ci-page.ci-intern-page .intern-ci-content button.seolyzebtn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 9px 18px;
    background: var(--ci-accent);
    color: #fff !important;
    border: 0;
    border-radius: 8px;
    font-weight: 700;
    font-size: 13px;
    text-decoration: none;
    box-shadow: var(--ci-accent-shadow, 0 1px 4px rgba(0,0,0,.15));
    transition: background .15s, box-shadow .15s, transform .12s;
    cursor: pointer;
  }
  body.ci-page.ci-intern-page .intern-ci-content .btn.seolyzebtn:hover,
  body.ci-page.ci-intern-page .intern-ci-content button.seolyzebtn:hover {
    background: var(--ci-accent-hover) !important;
    color: #fff !important;
    box-shadow: 0 3px 10px rgba(0,0,0,.12);
    text-decoration: none;
  }

  /* Large variant of .btn-primary (for CTAs like DC-Start) */
  body.ci-page.ci-intern-page .intern-ci-content .btn-lg {
    padding: 12px 22px;
    font-size: 14px;
  }

  /* -------------------------------------------------------------
     8. READING (Lesbarkeit) — .rd-* Klassen
     ------------------------------------------------------------- */

  /* Top-Score-Row (4 Score-Boxes + Kennzahlen-Spalte) */
  .rd-score-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)) 1.3fr;
    gap: 14px;
    align-items: stretch;
  }
  .rd-score-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 16px 10px 14px;
    background: #fafbfc;
    border: 1px solid var(--ci-border);
    border-radius: 10px;
    text-align: center;
  }
  .rd-sb-good { border-color: #bbf7d0; background: #f0fdf4; }
  .rd-sb-ok   { border-color: #fde68a; background: #fffbeb; }
  .rd-sb-bad  { border-color: #fecaca; background: #fef2f2; }

  .rd-sb-ring {
    position: relative;
    width: 72px;
    height: 72px;
    border-radius: 50%;
    background: conic-gradient(var(--rd-ring-col, var(--ci-accent)) calc(var(--pct,0) * 1%), rgba(0,0,0,.06) 0);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
  }
  .rd-sb-ring::after {
    content: "";
    position: absolute;
    inset: 6px;
    background: #fff;
    border-radius: 50%;
  }
  .rd-sb-good .rd-sb-ring { --rd-ring-col: #22c55e; }
  .rd-sb-ok   .rd-sb-ring { --rd-ring-col: #f59e0b; }
  .rd-sb-bad  .rd-sb-ring { --rd-ring-col: #ef4444; }
  .rd-sb-ring-inv {} /* for inverted-scale values (lower = better) – same ring visuals */

  .rd-sb-val {
    position: relative;
    z-index: 2;
    font-size: 17px;
    font-weight: 800;
    color: var(--ci-t1);
    letter-spacing: -.02em;
  }
  .rd-sb-name {
    font-size: 11.5px;
    font-weight: 700;
    color: var(--ci-t2);
    letter-spacing: .3px;
    text-transform: uppercase;
  }
  .rd-sb-scale {
    font-size: 10.5px;
    color: var(--ci-t3);
  }
  .rd-sb-hint {
    margin-top: 4px;
    font-size: 10.5px;
    font-weight: 600;
    padding: 3px 9px;
    border-radius: 999px;
  }
  .rd-hint-good { background: #dcfce7; color: #15803d; }
  .rd-hint-ok   { background: #fef9c3; color: #92400e; }
  .rd-hint-bad  { background: #fee2e2; color: #991b1b; }

  /* Kennzahlen-Spalte */
  .rd-score-stats {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 14px 16px;
    background: #fff;
    border: 1px solid var(--ci-border);
    border-radius: 10px;
    gap: 6px;
  }
  .rd-ss-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 12px;
    padding: 4px 0;
    border-bottom: 1px dashed var(--ci-border-soft, #f1f4f8);
  }
  .rd-ss-row:last-child { border-bottom: 0; }
  .rd-ss-row > span { color: var(--ci-t3); }
  .rd-ss-row > strong { color: var(--ci-t1); font-weight: 700; }

  /* Detail-Grid (pro URL: Scores links, Silben+Chips rechts) */
  .rd-detail-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 22px;
    align-items: start;
  }
  @media (max-width: 900px) {
    .rd-detail-grid { grid-template-columns: 1fr; }
  }

  .rd-detail-scores { display: flex; flex-direction: column; gap: 13px; }
  .rd-bar-group {
    display: flex;
    flex-direction: column;
    gap: 4px;
  }
  .rd-bar-label {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 12px;
    font-weight: 600;
    color: var(--ci-t1);
  }
  .rd-bv { font-weight: 700; padding: 2px 7px; border-radius: 5px; font-size: 11px; }
  .rd-bv-g { background: #dcfce7; color: #15803d; }
  .rd-bv-o { background: #fef9c3; color: #92400e; }
  .rd-bv-r { background: #fee2e2; color: #991b1b; }

  .rd-bar-track {
    width: 100%;
    height: 8px;
    background: var(--ci-border-soft, #f1f4f8);
    border-radius: 4px;
    overflow: hidden;
  }
  .rd-bar-fill { height: 100%; border-radius: 4px; transition: width .3s; }
  .rd-bf-g { background: #22c55e; }
  .rd-bf-o { background: #f59e0b; }
  .rd-bf-r { background: #ef4444; }
  .rd-ref-val { font-size: 10.5px; color: var(--ci-t3); font-style: italic; }

  /* Silben-Grid (rechte Spalte) */
  .rd-syl-header {
    font-size: 12px;
    font-weight: 700;
    color: var(--ci-t2);
    text-transform: uppercase;
    letter-spacing: .4px;
    margin-bottom: 10px;
  }
  .rd-syl-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 9px;
    margin-bottom: 14px;
  }
  .rd-syl-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
  }
  .rd-syl-wrap {
    width: 30px;
    height: 58px;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    background: #fafbfc;
    border-radius: 5px;
    overflow: hidden;
    position: relative;
  }
  .rd-syl-bar {
    width: 100%;
    border-radius: 4px 4px 0 0;
    transition: height .4s;
  }
  .rd-syl-1 { background: #22c55e; }
  .rd-syl-2 { background: #3b82f6; }
  .rd-syl-3 { background: #f59e0b; }
  .rd-syl-6 { background: #ef4444; }
  .rd-syl-pct { font-size: 11px; font-weight: 700; color: var(--ci-t1); }
  .rd-syl-lbl { font-size: 10.5px; color: var(--ci-t3); }

  .rd-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
  }
  .rd-chip {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 7px 10px;
    min-width: 70px;
    background: #fafbfc;
    border: 1px solid var(--ci-border);
    border-radius: 8px;
  }
  .rd-chip-v { font-size: 13.5px; font-weight: 800; color: var(--ci-t1); }
  .rd-chip-l { font-size: 10.5px; color: var(--ci-t3); margin-top: 1px; white-space: nowrap; }

  /* kf-mode-badge (Referenz-Kennzeichnung) */
  .kf-mode-badge {
    display: inline-flex;
    align-items: center;
    padding: 3px 8px;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .5px;
    text-transform: uppercase;
    border-radius: 6px;
    line-height: 1;
  }
  .kf-mode-ref {
    background: var(--ci-accent-soft);
    color: var(--ci-accent);
    border: 1px solid var(--ci-accent);
  }

  /* -------------------------------------------------------------
     10. OnPage-Detail (onpageDetail.tmpl.html)
     -------------------------------------------------------------
     Ehemals inline <style> im Template. Area-adaptiv:
     Primary-Farben verwenden var(--ci-accent) statt hardcoded #ff8000.
     ------------------------------------------------------------- */

  /* 2-Spalten-Grid für Detail-Seite */
  .op-two-col {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
  }
  @media (max-width: 1100px) {
    .op-two-col { grid-template-columns: 1fr; }
  }
  .op-col { display: flex; flex-direction: column; }

  /* Quick-Stats Grid (oben: Wörter / Title-Zeichen / Desc-Zeichen etc.) */
  .op-stats-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
  }
  @media (max-width: 900px) {
    .op-stats-grid { grid-template-columns: repeat(2, 1fr); }
  }
  .op-stat-card {
    background: #fff;
    border: 1px solid var(--ci-border, #e8eaed);
    border-radius: 12px;
    border-left: 3px solid var(--ci-accent, #ff8f00);
    padding: 14px 16px;
    text-align: center;
    box-shadow: 0 1px 4px rgba(0,0,0,.05);
    transition: box-shadow .15s, border-color .15s;
  }
  .op-stat-card:hover {
    box-shadow: 0 3px 10px rgba(0,0,0,.08);
  }
  .op-stat-card.op-stat-good  { border-color: #86efac; border-left-color: #16a34a; background: #f0fdf4; }
  .op-stat-card.op-stat-warn  { border-color: #fde68a; border-left-color: #d97706; background: #fefce8; }
  .op-stat-card.op-stat-bad   { border-color: #fca5a5; border-left-color: #dc2626; background: #fef2f2; }
  .op-stat-card.op-stat-blue  { border-color: #bfdbfe; border-left-color: #2563eb; background: #eff6ff; }
  .op-stat-val {
    font-family: "Inter", system-ui, sans-serif;
    font-size: 22px;
    font-weight: 800;
    color: var(--ci-t1);
    line-height: 1;
  }
  .op-stat-good .op-stat-val { color: #15803d; }
  .op-stat-warn .op-stat-val { color: #a16207; }
  .op-stat-bad  .op-stat-val { color: #b91c1c; }
  .op-stat-blue .op-stat-val { color: #1d4ed8; }
  .op-stat-label {
    font-family: "Inter", system-ui, sans-serif;
    font-size: 11px;
    font-weight: 600;
    color: var(--ci-t3);
    margin-top: 4px;
    text-transform: uppercase;
    letter-spacing: .04em;
  }

  /* Key-Value-Tabelle (Server-/Meta-/Content-Info) */
  .op-kv-table {
    width: 100%;
    border-collapse: collapse;
  }
  .op-kv-table tr {
    border-bottom: 1px solid var(--ci-border-soft, #f1f4f8);
  }
  .op-kv-table tr:last-child { border-bottom: none; }
  .op-kv-table td {
    padding: 9px 14px;
    font-family: "Inter", system-ui, sans-serif;
    font-size: 12px;
    vertical-align: top;
    color: var(--ci-t1);
  }
  .op-kv-label {
    width: 130px;
    color: var(--ci-t3);
    font-weight: 600;
    white-space: nowrap;
  }
  .op-kv-table tr:nth-child(odd) td { background: #fafafa; }

  /* Status-Badge (200 OK, 404 etc.) */
  .op-status-badge {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    border-radius: 6px;
    font-family: "Inter", system-ui, sans-serif;
    font-size: 11px;
    font-weight: 700;
  }
  .op-status-ok  { background: #dcfce7; color: #15803d; }
  .op-status-err { background: #fee2e2; color: #b91c1c; }

  .op-meta-chip {
    display: inline-flex;
    align-items: center;
    padding: 3px 10px;
    border-radius: 20px;
    background: #f3f4f6;
    font-family: "Inter", system-ui, sans-serif;
    font-size: 11px;
    font-weight: 600;
    color: var(--ci-t2);
  }

  /* URL-Link / generischer Link (Primary-Farbe = area accent) */
  .op-url-link {
    font-family: "Inter", system-ui, sans-serif;
    font-size: 12px;
    font-weight: 600;
    color: var(--ci-accent);
    text-decoration: none;
    word-break: break-all;
  }
  .op-url-link:hover {
    color: var(--ci-accent-hover);
    text-decoration: underline;
  }
  .op-link {
    color: var(--ci-accent) !important;
    text-decoration: none;
    font-size: 12px;
    word-break: break-all;
  }
  .op-link:hover {
    color: var(--ci-accent-hover) !important;
    text-decoration: underline !important;
  }
  .op-na {
    color: var(--ci-t3);
    opacity: .6;
    font-style: italic;
  }

  /* Meta-Text + Char-Badge (Title/Description length) */
  .op-meta-text {
    font-size: 12px;
    color: var(--ci-t1);
    margin-bottom: 4px;
  }
  .op-char-badge {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    border-radius: 6px;
    font-family: "Inter", system-ui, sans-serif;
    font-size: 11px;
    font-weight: 700;
  }
  .op-char-good { background: #dcfce7; color: #15803d; }
  .op-char-warn { background: #fef9c3; color: #a16207; }
  .op-char-bad  { background: #fee2e2; color: #b91c1c; }

  /* Expandable-Rows (H1/H2-Headings, Links-Intern/Extern etc.) */
  .op-expand-row {
    border-bottom: 1px solid var(--ci-border-soft, #f1f4f8);
  }
  .op-expand-row:last-child { border-bottom: none; }
  .op-expand-head {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 0;
    cursor: pointer;
    user-select: none;
  }
  .op-expand-head:hover .op-expand-label {
    color: var(--ci-accent);
  }
  .op-expand-label {
    font-family: "Inter", system-ui, sans-serif;
    font-size: 12px;
    font-weight: 600;
    color: var(--ci-t1);
    flex: 1;
  }
  .op-chev {
    color: var(--ci-t3);
    flex-shrink: 0;
    transition: transform .2s;
  }
  .op-chev.open { transform: rotate(180deg); }
  .op-expand-body { padding: 0 0 10px 38px; }
  .op-expand-item {
    font-family: "Inter", system-ui, sans-serif;
    font-size: 12px;
    color: var(--ci-t1);
    padding: 4px 0;
    border-bottom: 1px dashed var(--ci-border-soft, #f1f4f8);
  }
  .op-expand-item:last-child { border-bottom: none; }

  /* Link-Items (Intern/Extern-Liste) */
  .op-link-item {
    padding: 8px 0;
    border-bottom: 1px dashed var(--ci-border-soft, #f1f4f8);
  }
  .op-link-item:last-child { border-bottom: none; }
  .op-link-anchor {
    font-family: "Inter", system-ui, sans-serif;
    font-size: 12px;
    font-weight: 600;
    color: var(--ci-t1);
    margin-bottom: 2px;
  }
  .op-link-url {
    display: block;
    font-size: 11px;
    color: var(--ci-t2) !important;
    word-break: break-all;
  }
  .op-link-meta {
    font-size: 11px;
    color: var(--ci-t3);
    margin-top: 1px;
  }

/* /end onpage.css — unwrapped 2026-04-22 (Chromium @layer parser bug) */