/* Oberfläche des Ranktrackers. Farben, Schrift und Bedienelemente stammen aus dem SEO-Cockpit
   (seo-cockpit/static/styles.css), die Tabellen folgen dem Vorbild gängiger Rank-Tracker:
   ruhige Zeilen, Zahl groß und rechtsbündig, Meta-Angabe klein darunter, feste Spaltenbreiten.
   Standard ist dunkel; das Bootstrap-Skript in base.html setzt data-theme vor dem ersten Rendern. */

:root { --bg:#0d1117; --panel:#161b22; --bd:#30363d; --fg:#e6edf3; --mut:#8b949e; --accent:#3b82c4;
        --gut:#3fb950; --acht:#d29922; --schlecht:#f85149;
        /* Gefüllte Flächen mit weißer Schrift (Chip, primäre Schaltfläche) brauchen einen dunkleren
           Ton: --accent trägt Weiß nur mit 3,5:1, dieser Ton mit 5,6:1 (WCAG AA ab 4,5:1). */
        --accent-tief:#2f6ba3; }
[data-theme="light"] { --bg:#fff; --panel:#f6f8fa; --bd:#d0d7de; --fg:#1f2328; --mut:#59636e; --accent:#3b82c4;
                       --accent-tief:#2f6ba3; }
/* Ohne Skript (data-theme fehlt) entscheidet die Systemeinstellung. */
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) { --bg:#fff; --panel:#f6f8fa; --bd:#d0d7de; --fg:#1f2328; --mut:#59636e; }
}
/* Tag-Farben (Stufe 8): acht Töne, die Nummer kommt aus dem Text des Tags (Filter tagfarbe in
   web/__init__.py). Hell sind es dunklere Fassungen derselben Töne. Geprüft gegen --panel und gegen
   den getönten Chip-Hintergrund: der Text mischt 80 % Tagfarbe mit --fg (siehe .tagchip weiter unten)
   und erreicht so in beiden Themes mindestens 4,6:1. */
:root { --tag-0:#3b82c4; --tag-1:#3fb950; --tag-2:#d29922; --tag-3:#f85149; --tag-4:#a371f7;
        --tag-5:#39c5cf; --tag-6:#db61a2; --tag-7:#e3b341; }
[data-theme="light"] { --tag-0:#0969da; --tag-1:#1a7f37; --tag-2:#9a6700; --tag-3:#cf222e;
                       --tag-4:#8250df; --tag-5:#0e7490; --tag-6:#bf3989; --tag-7:#7d4e00; }
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) { --tag-0:#0969da; --tag-1:#1a7f37; --tag-2:#9a6700; --tag-3:#cf222e;
                                   --tag-4:#8250df; --tag-5:#0e7490; --tag-6:#bf3989; --tag-7:#7d4e00; }
}

/* KD-Stufen der Keyword-Recherche (Stufe 9, Spec 2 „KD"; Ruling 2 zu Task 4): sechs Töne von grün (1, sehr
   leicht) über gelb und orange bis dunkelrot (6, kaum möglich); Stufe 0 „kein Wert" nutzt --bd und --mut. Hell
   sind es kräftigere Fassungen derselben Töne (Vorlage: output/_intern/ranktracker-mockups/tp2/mockup.css).
   Je Stufe die Schrift des Badges (--kd-n-schrift): dunkel auf den hellen Tönen, Weiß auf den dunklen - in
   jedem Block mindestens 4,5:1 (Fix-Runde 1, geprüft in test_web_recherche.py). */
:root { --kd-1:#3fb950; --kd-2:#9ccc3c; --kd-3:#e3b341; --kd-4:#f0883e; --kd-5:#f85149; --kd-6:#b62324;
        --kd-1-schrift:#1f2328; --kd-2-schrift:#1f2328; --kd-3-schrift:#1f2328; --kd-4-schrift:#1f2328;
        --kd-5-schrift:#1f2328; --kd-6-schrift:#ffffff; }
[data-theme="light"] { --kd-1:#2da44e; --kd-2:#7fb03a; --kd-3:#d4a72c; --kd-4:#e3762a; --kd-5:#d1242f;
                       --kd-6:#8e1519; --kd-1-schrift:#1f2328; --kd-2-schrift:#1f2328; --kd-3-schrift:#1f2328;
                       --kd-4-schrift:#1f2328; --kd-5-schrift:#ffffff; --kd-6-schrift:#ffffff; }
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) { --kd-1:#2da44e; --kd-2:#7fb03a; --kd-3:#d4a72c; --kd-4:#e3762a; --kd-5:#d1242f;
                                   --kd-6:#8e1519; --kd-1-schrift:#1f2328; --kd-2-schrift:#1f2328;
                                   --kd-3-schrift:#1f2328; --kd-4-schrift:#1f2328; --kd-5-schrift:#ffffff;
                                   --kd-6-schrift:#ffffff; }
}

* { box-sizing: border-box; }
/* Ein Element mit dem Attribut `hidden` bleibt unsichtbar, auch wenn eine Klasse weiter unten ein
   display setzt: die Auswahl-Leiste (display: flex) und der versteckte Standard-Knopf des
   Formulars (button { display: inline-block }) waren sonst sichtbar, obwohl sie es nicht sein
   sollten. */
[hidden] { display: none !important; }
body { margin: 0; background: var(--bg); color: var(--fg);
       font: 13px/1.5 -apple-system, "Segoe UI", Roboto, sans-serif; }
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
h1 { font-size: 18px; font-weight: 600; margin: 0 0 6px; }
h2 { font-size: 15px; font-weight: 600; margin: 22px 0 8px; }
h3 { font-size: 12.5px; font-weight: 600; color: var(--mut); text-transform: uppercase;
     letter-spacing: .04em; margin: 16px 0 6px; }
p { margin: 0 0 10px; }
code { background: var(--panel); border: 1px solid var(--bd); border-radius: 4px; padding: 0 4px;
       font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .92em; }

/* ---- Kopf und Tabs ---- */
/* Kopf und Tab-Leiste stehen zusammen in einem klebenden Block; so gibt es keine feste Höhe,
   an der sich die zweite Leiste ausrichten müsste (und nichts kann sich überlappen). */
.kopfbereich { position: sticky; top: 0; z-index: 30; }
header { display: flex; align-items: center; gap: 10px;
         padding: 8px 12px; background: var(--panel); border-bottom: 1px solid var(--bd); }
header .logo { font-weight: 700; color: var(--fg); }
header .logo:hover { color: var(--accent); text-decoration: none; }
header .kunde { color: var(--accent); font-weight: 600; }
header .trenner { color: var(--bd); }
header .luecke { flex: 1; }
/* Der Link zur Systemseite sieht aus wie eine Schaltfläche, bleibt aber ein schlichtes a-Element. */
header .kopflink a { display: inline-block; background: var(--bg); color: var(--fg);
                     border: 1px solid var(--bd); border-radius: 5px; padding: 3px 10px; }
header .kopflink a:hover { border-color: var(--accent); text-decoration: none; }
nav.tabs { display: flex; flex-wrap: wrap; gap: 2px;
           padding: 0 12px; background: var(--bg); border-bottom: 1px solid var(--bd); }
.tab > a { display: inline-block; padding: 7px 10px; color: var(--mut);
           border-bottom: 2px solid transparent; }
.tab > a:hover { color: var(--fg); text-decoration: none; }
.tab.aktiv > a { color: var(--fg); font-weight: 600; border-bottom-color: var(--accent); }

main { padding: 14px 16px 30px; }
section { margin: 0 0 20px; }

/* ---- Bedienelemente ---- */
button, .knopf { display: inline-block; background: var(--bg); color: var(--fg);
                 border: 1px solid var(--bd); border-radius: 5px; padding: 4px 10px;
                 font: inherit; line-height: 1.35; cursor: pointer; white-space: nowrap; }
button:hover, .knopf:hover { border-color: var(--accent); text-decoration: none; }
button.primaer { background: var(--accent-tief); border-color: var(--accent-tief); color: #fff;
                 font-weight: 600; }
button.primaer:hover { filter: brightness(1.12); }
button.klein, .knopf.klein { padding: 1px 7px; font-size: 11px; }
input[type="text"], input[type="number"], input[type="search"], input[type="password"], select, textarea {
  background: var(--bg); color: var(--fg); border: 1px solid var(--bd); border-radius: 5px;
  padding: 4px 7px; font: inherit; max-width: 100%; }
input:hover, select:hover, textarea:hover { border-color: var(--accent); }
input:focus, select:focus, textarea:focus, button:focus-visible { outline: 2px solid var(--accent);
  outline-offset: -1px; }
input[type="checkbox"] { accent-color: var(--accent); }
textarea { resize: vertical; }

/* ---- Filterleiste ---- */
form.filter { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 8px 12px;
              background: var(--panel); border: 1px solid var(--bd); border-radius: 6px;
              padding: 10px; margin: 0 0 12px; }
form.filter label { display: flex; flex-direction: column; gap: 3px; font-size: 10px;
                    text-transform: uppercase; letter-spacing: .05em; color: var(--mut); }
form.filter label.schalter { flex-direction: row; align-items: center; gap: 6px; font-size: 12px;
                             text-transform: none; letter-spacing: 0; color: var(--fg);
                             padding-bottom: 5px; }
form.filter label.weit { flex-basis: 100%; }
form.filter textarea { min-height: 74px; }
form.filter button { align-self: flex-end; }
form.filter .rechts { margin-left: auto; display: flex; align-items: center; gap: 12px;
                      align-self: flex-end; padding-bottom: 4px; }

/* ---- Overlay des Neustarts (Muster: seo-cockpit) ---- */
.overlay { position: fixed; inset: 0; z-index: 90; display: flex; align-items: center;
           justify-content: center; background: color-mix(in srgb, var(--bg) 82%, transparent); }
.overlay[hidden] { display: none; }
.overlay .ovbox { background: var(--panel); border: 1px solid var(--bd); border-radius: 8px;
                  padding: 22px 26px; max-width: 430px; text-align: center; font-size: 15px;
                  line-height: 1.6; }
.overlay .ovbox small { color: var(--mut); }
header form.neustart { display: inline-flex; margin: 0; }

/* ---- Login (Stufe A, Task 3): Kopf mit Name und „Abmelden“, Formular der Seite /login ---- */
header .angemeldet { color: var(--mut); font-size: 12px; }
header form.abmelden { display: inline-flex; margin: 0; }
form.anmeldung { display: flex; flex-direction: column; gap: 10px; max-width: 340px; margin: 0 0 12px; }
form.anmeldung label { display: flex; flex-direction: column; gap: 3px; font-size: 10px; text-transform: uppercase;
                       letter-spacing: .05em; color: var(--mut); }
form.anmeldung button { align-self: flex-start; }

/* ---- Panel ---- */
.panel { background: var(--panel); border: 1px solid var(--bd); border-radius: 6px; padding: 10px 12px; }
.erklaerung { color: var(--mut); font-size: 11.5px; max-width: 130ch; margin: 0 0 12px; }
.takte { color: var(--mut); font-size: 11.5px; margin: 0 0 8px; }
.panel.gespeichert { color: var(--gut); border-color: color-mix(in srgb, var(--gut) 45%, var(--bd));
                     margin: 0 0 12px; }
.liste { margin: 0 0 12px; padding-left: 18px; font-size: 12.5px; }
.liste li { margin: 0 0 6px; }

/* ---- Tabellen ---- */
.wrap { overflow: auto; border: 1px solid var(--bd); border-radius: 6px; background: var(--bg); }
.wrap.hoch { max-height: calc(100vh - 250px); }
/* Lange Nebenlisten (Läufe, Buchungen) scrollen in sich, damit die Abschnitte darunter erreichbar bleiben. */
.wrap.begrenzt { max-height: 520px; }
table { width: 100%; border-collapse: separate; border-spacing: 0;
        font-variant-numeric: tabular-nums; }
thead th { position: sticky; top: 0; z-index: 2; background: var(--panel); color: var(--mut);
           font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
           text-align: left; vertical-align: bottom; padding: 7px 9px; white-space: normal;
           box-shadow: inset 0 -1px var(--bd); }
thead th a { color: var(--accent); }
tbody td { padding: 7px 9px; vertical-align: top; border-bottom: 1px solid var(--bd); }
tbody tr:last-child td { border-bottom: none; }
tbody tr:nth-child(even) { background: var(--panel); }
tbody tr:hover { background: color-mix(in srgb, var(--accent) 12%, transparent); }
th.zahl, td.zahl { text-align: right; }
.zahlgross { font-size: 15px; font-weight: 600; line-height: 1.25; }
.meta { display: block; font-size: 11px; line-height: 1.35; color: var(--mut); }
.meta.eng { line-height: 1.25; }
a.meta { color: var(--accent); }
a.meta.warn { color: var(--acht); }
.hinweis { color: var(--mut); font-size: 11.5px; }
.warn { color: var(--acht); }
.gut { color: var(--gut); }
.schlecht { color: var(--schlecht); }
/* Lange URLs bleiben einzeilig und laufen nie über die Zellgrenze hinaus. */
.kuerzen { display: block; max-width: 100%; overflow: hidden; text-overflow: ellipsis;
           white-space: nowrap; }
/* Gegenstück dazu: die Adresse bricht mehrzeilig um und wird NICHT abgeschnitten - überall dort, wo
   die vollständige URL das Wesentliche ist (Ziel-URL, rankende Seiten, Empfehlung). */
.urlbruch { display: block; max-width: 100%; overflow-wrap: anywhere; line-height: 1.35; }
.stark { font-weight: 600; }
tbody tr.eigen td:first-child { box-shadow: inset 3px 0 var(--accent); }
tbody tr.eigen td { background: color-mix(in srgb, var(--accent) 8%, transparent); }

/* ---- Marken (Badges) ---- */
.marke { display: inline-block; max-width: 100%; padding: 1px 7px; border-radius: 999px;
         font-size: 10.5px; line-height: 1.5; border: 1px solid var(--bd); background: var(--bg);
         color: var(--mut); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
         vertical-align: bottom; }
.marke.ok { color: var(--gut); border-color: color-mix(in srgb, var(--gut) 45%, var(--bd)); }
.marke.acht { color: var(--acht); border-color: color-mix(in srgb, var(--acht) 45%, var(--bd)); }
.marke.stopp { color: var(--schlecht); border-color: color-mix(in srgb, var(--schlecht) 45%, var(--bd)); }
.plus, .minus, .neutral { display: inline-block; padding: 1px 7px; border-radius: 999px;
                          font-size: 12px; font-weight: 600; white-space: nowrap; }
.plus { color: var(--gut); background: color-mix(in srgb, var(--gut) 16%, transparent); }
.minus { color: var(--schlecht); background: color-mix(in srgb, var(--schlecht) 16%, transparent); }
.neutral { color: var(--mut); background: color-mix(in srgb, var(--mut) 16%, transparent); }

/* Zeile mit einer beanstandeten Eingabe (Vorschlagsseite nach einem 422): eigene Klasse statt der
   Markierung "eigen", die für die eigene Domain steht. */
tbody tr.fehlerzeile td { background: color-mix(in srgb, var(--schlecht) 12%, transparent); }
tbody tr.fehlerzeile td:first-child { box-shadow: inset 3px 0 var(--schlecht); }
/* Pfeil an der aktiven Sortierspalte: klein und ruhig, damit er die Beschriftung nicht überlagert. */
.pfeil { font-size: 9px; line-height: 1; vertical-align: baseline; }
/* Nachladen der Tracking-Seite (static/tracking.js): die Seite dimmt, bis der neue Inhalt steht. */
.tracking-seite.laedt { opacity: .55; transition: opacity .15s; cursor: progress; }

/* Zeilenaktion: seit Stufe 6 IMMER sichtbar (B1). Vorher erschien sie erst unter dem Mauszeiger -
   auf einer Tabelle voller Zeilen war schlicht nicht zu sehen, dass es die Aktion überhaupt gibt
   (und mit dem Finger auf dem Trackpad-Tablet gar nicht). Sie bleibt klein und ruhig. */
.zeilenaktion { display: inline-block; }
.zeilenaktion button { opacity: .75; }
tbody tr:hover .zeilenaktion button, .zeilenaktion button:focus-visible { opacity: 1; }

/* ---- Kacheln (Kennzahlen) ---- */
.kacheln { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px;
           margin: 0 0 6px; }
.kachel { display: flex; flex-direction: column; gap: 4px; background: var(--panel);
          border: 1px solid var(--bd); border-radius: 6px; padding: 9px 11px; min-height: 84px; }
.kachel dt { font-size: 10px; text-transform: uppercase; letter-spacing: .04em; color: var(--mut);
             line-height: 1.35; }
.kachel dd { margin: 0; font-size: 19px; font-weight: 600; line-height: 1.2; }
.kachel dd .meta, .kachel dd .hinweis, .kachel dd .marke { font-weight: 400; }
.kachel dd .hinweis { font-size: 12px; }

/* ---- Chips (Stammdaten eines Keywords) ---- */
.chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 14px; padding: 0; list-style: none; }
.chip { display: inline-block; background: var(--panel); border: 1px solid var(--bd);
        border-radius: 999px; padding: 2px 10px; font-size: 11.5px; max-width: 46ch;
        overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: bottom; }
.chip b { color: var(--mut); font-weight: 700; font-size: 9.5px; text-transform: uppercase;
          letter-spacing: .05em; margin-right: 5px; }

/* ---- Verlauf ---- */
.chart { height: 320px; background: var(--panel); border: 1px solid var(--bd); border-radius: 6px;
         padding: 10px; }

/* ---- Aktionen als Leiste kompakter Formulare ---- */
.aktionsleiste { display: flex; flex-wrap: wrap; gap: 8px; align-items: flex-end; }
form.aktion { display: flex; align-items: flex-end; gap: 6px; margin: 0; }
form.aktion label { display: flex; flex-direction: column; gap: 3px; font-size: 10px;
                    text-transform: uppercase; letter-spacing: .05em; color: var(--mut); }

/* ---- Zweispaltiges Formular (Stammdaten) ---- */
.formular { display: grid; grid-template-columns: max-content minmax(200px, 460px); gap: 10px 16px;
            align-items: center; }
.formular > .beschriftung { color: var(--mut); font-size: 11.5px; text-align: right; }
.formular > .weit { grid-column: 1 / -1; }
.formular input[type="text"], .formular select { width: 100%; }

/* ---- Schlanke Scrollbalken wie im Cockpit ---- */
* { scrollbar-width: thin; scrollbar-color: var(--bd) transparent; }
::-webkit-scrollbar { width: 9px; height: 9px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--bd); border-radius: 10px;
                            border: 2.5px solid transparent; background-clip: content-box; }
::-webkit-scrollbar-thumb:hover { background: var(--mut); background-clip: content-box; }
::-webkit-scrollbar-corner { background: transparent; }

/* ---- Rankings: Kopf, Übersicht, Schnellfilter, einzeilige Tabelle (Stufe 6) ---- */

/* Kopfzeile: links Titel und Stand der Daten, rechts CSV, Spaltenwahl und Hilfe. */
.seitenkopf { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 8px 16px; margin: 0 0 8px; }
.seitenkopf .seitentitel { flex: 1; min-width: 260px; }
.seitenkopf .stand { color: var(--mut); font-size: 11.5px; margin: 0; }
.kopfaktionen { display: flex; align-items: flex-start; gap: 6px; }
/* Die Spaltenwahl klappt unter ihrer Schaltfläche auf und liegt über der Seite, ohne sie zu schieben. */
.spaltenwahl { position: relative; }
.spaltenwahl > summary { list-style: none; cursor: pointer; }
.spaltenwahl > summary::-webkit-details-marker { display: none; }
.spaltenwahl .spaltenform { position: absolute; right: 0; top: 26px; z-index: 40; width: 230px;
                            display: flex; flex-direction: column; gap: 4px; background: var(--panel);
                            border: 1px solid var(--bd); border-radius: 6px; padding: 10px;
                            box-shadow: 0 8px 20px rgba(0, 0, 0, .28); }
.spaltenwahl .spaltenform p { margin: 0; }
.spaltenwahl label.schalter { display: flex; align-items: center; gap: 6px; font-size: 12px; }
.spaltenknoepfe { display: flex; gap: 6px; margin-top: 4px; }

/* Übersicht: Kacheln, Verteilungsbalken, Trend. */
.uebersicht .kacheln { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
.uebersicht .kachel dd { display: flex; flex-direction: column; gap: 2px; }
.uebersicht .kachel dd .plus, .uebersicht .kachel dd .minus, .uebersicht .kachel dd .neutral {
  font-size: 13px; }
.uebersicht .kachel .trennzeichen { color: var(--mut); font-weight: 400; }
/* Zwei Zahlen nebeneinander (Top 3 / Top 10, verbessert / verschlechtert): sie sollen in EINER Zeile
   stehen und nicht als Spalte der Kachel auseinandergezogen werden. */
.uebersicht .kachel dd .paar { display: flex; align-items: baseline; gap: 7px; }
.verteilung { display: flex; height: 12px; border-radius: 999px; overflow: hidden;
              background: var(--panel); border: 1px solid var(--bd); margin: 4px 0 6px; }
.verteilung .segment { display: block; height: 100%; }
.verteilung-legende { display: flex; flex-wrap: wrap; gap: 4px 16px; margin: 0 0 14px; padding: 0;
                      list-style: none; font-size: 11.5px; color: var(--mut); }
.verteilung-legende b { color: var(--fg); }
.verteilung-legende .punkt { display: inline-block; width: 9px; height: 9px; border-radius: 3px;
                             margin-right: 5px; vertical-align: baseline; }
/* Eine Farbfolge von "gut" nach "nicht rankend" - dieselben Töne wie in den Marken. */
.segment.top3, .punkt.top3 { background: var(--gut); }
.segment.top4_10, .punkt.top4_10 { background: color-mix(in srgb, var(--gut) 55%, var(--accent)); }
.segment.top11_20, .punkt.top11_20 { background: var(--accent); }
.segment.top21_50, .punkt.top21_50 { background: var(--acht); }
.segment.top51_100, .punkt.top51_100 { background: color-mix(in srgb, var(--acht) 55%, var(--schlecht)); }
.segment.keine, .punkt.keine { background: color-mix(in srgb, var(--mut) 55%, transparent); }
.trendkopf { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 12px; }
.trendkopf h2 { margin: 4px 0 6px; }
.trendwahl { display: flex; flex-wrap: wrap; gap: 4px; margin-left: auto; }
/* Eine Schaltfläche, deren Zustand gerade gilt (Zeitraum des Trends, gesetzter Filter im
   Aufklapper): sie bekommt die Akzentfarbe, bleibt aber eine Schaltfläche. */
.knopf.aktiv, summary.knopf.aktiv { border-color: var(--accent); color: var(--accent); }
.chart.trend { height: 220px; }

/* Schnellfilter: Chips links, Suche und die selteneren Filter rechts. */
.chipleiste { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0 0 10px; }
.chip.filterchip { color: var(--fg); cursor: pointer; }
.chip.filterchip:hover { border-color: var(--accent); text-decoration: none; }
.chip.filterchip.aktiv { background: var(--accent-tief); border-color: var(--accent-tief);
                         color: #fff; font-weight: 600; }
.chipleiste form.filter.schmal { display: flex; flex-wrap: nowrap; align-items: center; gap: 6px;
                                 margin: 0 0 0 auto; padding: 0; background: none; border: none; }
.chipleiste form.filter.schmal input[type="search"] { width: 210px; }
details.weitere { position: relative; }
details.weitere > summary { list-style: none; cursor: pointer; }
details.weitere > summary::-webkit-details-marker { display: none; }
details.weitere .weiterefelder { position: absolute; right: 0; top: 28px; z-index: 40; width: 640px;
                                 max-width: 88vw; display: flex; flex-wrap: wrap; align-items: flex-end;
                                 gap: 8px 12px; background: var(--panel); border: 1px solid var(--bd);
                                 border-radius: 6px; padding: 10px;
                                 box-shadow: 0 8px 20px rgba(0, 0, 0, .28); }
details.weitere .weiterefelder label { display: flex; flex-direction: column; gap: 3px; font-size: 10px;
                                       text-transform: uppercase; letter-spacing: .05em; color: var(--mut); }
details.weitere .weiterefelder .rechts { margin-left: auto; display: flex; align-items: center; gap: 12px; }

/* Die Tabelle: EINE Zeile je Keyword, feste Zeilenhöhe, nichts bricht um. */
table.rankings { table-layout: fixed; min-width: 1180px; }
table.rankings col.c-check { width: 30px; }
table.rankings col.c-stern { width: 28px; }
table.rankings col.c-kw { width: 270px; }
table.rankings col.c-og { width: 100px; }
table.rankings col.c-pos { width: 84px; }
table.rankings col.c-delta { width: 86px; }   /* Platz für „▼ -24,0" samt Pfeil */
table.rankings col.c-best { width: 64px; }
table.rankings col.c-zahl { width: 70px; }
table.rankings col.c-kd { width: 48px; }
table.rankings col.c-live { width: 120px; }
table.rankings col.c-url { width: 250px; }
table.rankings col.c-spark { width: 104px; }
table.rankings col.c-hinweis { width: 112px; }
table.rankings col.c-menu { width: 40px; }
table.rankings td { height: 34px; padding: 4px 9px; vertical-align: middle;
                    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
table.rankings th.mitte, table.rankings td.mitte { text-align: center; padding-left: 4px;
                                                   padding-right: 4px; }
table.rankings .zahlgross { font-size: 14px; }
/* Keyword-Zelle: der Text schrumpft, die Marken daneben behalten ihre Breite. */
td.kwzelle { display: flex; align-items: center; gap: 5px; }
td.kwzelle > a { flex: 0 1 auto; min-width: 0; }
td.kwzelle .marke, td.kwzelle .tagchip { flex: none; }
.tagchip { display: inline-block; padding: 0 6px; border-radius: 4px; font-size: 10.5px;
           line-height: 17px; background: color-mix(in srgb, var(--accent) 16%, transparent);
           color: var(--fg); max-width: 12ch; overflow: hidden; text-overflow: ellipsis; }
/* Quellenmarke der Positionsspalte: L, M oder G als kleines Kürzel neben der Zahl. */
.quelle { display: inline-block; min-width: 15px; margin-left: 3px; border: 1px solid var(--bd);
          border-radius: 3px; font-size: 10.5px; line-height: 14px; text-align: center;
          color: var(--mut); cursor: help; }
/* Ein Wert, den es nicht gibt (keine Daten, keine Vergleichsmessung). */
.ohnewert { color: var(--mut); }
.zahlgross.schwach { font-size: 12.5px; font-weight: 600; color: var(--mut); }
td.urlzelle .kuerzen { display: inline-block; max-width: calc(100% - 34px); vertical-align: bottom; }
td.urlzelle .mehr { font-size: 11px; margin-left: 4px; }
td.urlzelle .marke { margin-left: 4px; }
td.sparkzelle { color: var(--accent); padding-top: 8px; padding-bottom: 6px; }
.sparkline { display: block; width: 100%; height: 22px; }
/* Der Stern in der Zeile ist ein Knopf, sieht aber nicht danach aus. */
button.stern { background: none; border: none; padding: 0 2px; font-size: 14px; line-height: 1;
               color: var(--mut); }
button.stern:hover { color: var(--acht); }
button.stern.an { color: var(--acht); }
/* Das Zeilenmenü klappt über der Tabelle auf; die Zelle ist sein Bezugspunkt. Der Selektor nennt die
   Tabelle mit, weil die einzeilige Regel darüber (table.rankings td) sonst die stärkere ist und das
   aufgeklappte Menü an der Zellkante abschneidet. */
table.rankings td.menuzelle { position: relative; overflow: visible; }
details.menu > summary { list-style: none; cursor: pointer; color: var(--mut); }
details.menu > summary:hover { color: var(--fg); }
details.menu > summary::-webkit-details-marker { display: none; }
details.menu .menuinhalt { position: absolute; right: 4px; top: 24px; z-index: 20; display: flex;
                           flex-direction: column; gap: 4px; min-width: 118px; background: var(--panel);
                           border: 1px solid var(--bd); border-radius: 6px; padding: 7px 10px;
                           box-shadow: 0 8px 20px rgba(0, 0, 0, .28); }
/* Bei den letzten Zeilen klappt das Menü nach OBEN auf - nach unten stünde es außerhalb des
   scrollenden Tabellen-Containers und wäre nur mit einem weiteren Scrollen zu erreichen. */
tbody tr:nth-last-child(-n+4) details.menu .menuinhalt { top: auto; bottom: 22px; }

/* Auswahl-Leiste: erscheint, sobald Zeilen markiert sind. */
/* Die Leiste klebt am unteren Rand: bei einer langen Tabelle war sie sonst außer Sicht, sobald man
   zum letzten markierten Keyword gescrollt hatte. */
.auswahlleiste { position: sticky; bottom: 0; z-index: 25; display: flex; flex-wrap: wrap;
                 align-items: center; gap: 6px 8px; margin: 8px 0 0; background: var(--panel);
                 border: 1px solid var(--accent); border-radius: 6px; padding: 8px 10px;
                 box-shadow: 0 -4px 14px color-mix(in srgb, var(--bg) 70%, transparent); }
.auswahlleiste .anzahl { margin-right: 6px; color: var(--mut); }
.auswahlleiste .anzahl b { color: var(--fg); font-size: 14px; }
.auswahlleiste .tagfeld { display: flex; align-items: center; gap: 5px; margin-left: 6px; }

/* ---- Tabellen mit festen Spalten (Seiten, Live-Items, Läufe) ---- */
table.fest { table-layout: fixed; }
table.fest td { overflow-wrap: break-word; }
col.c-schmal { width: 96px; }
col.c-mittel { width: 130px; }
col.c-breit { width: 200px; }

/* ---- Explorer- und Systemtabellen ---- */
table.mittel { min-width: 760px; }
table.breit { min-width: 1100px; }
/* Kannibalisierung: eigene Breiten, damit Suchanfrage und Seiten-Detail immer Platz behalten. */
table.kanni { table-layout: fixed; min-width: 1400px; }
table.kanni col.n-query { width: 200px; }
table.kanni col.n-grad { width: 110px; }
table.kanni col.n-zahl { width: 76px; }
table.kanni col.n-seite { width: 240px; }
table.kanni col.n-ziel { width: 180px; }
table.kanni td { overflow-wrap: anywhere; }
.empfehlungszeile td { background: color-mix(in srgb, var(--accent) 10%, transparent);
                       box-shadow: inset 3px 0 var(--accent); }
.empfehlung { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; }
.empfehlung .urlbruch { display: inline-block; max-width: 60ch; font-weight: 600; }
.empfehlung .meta { display: inline; }
.empfehlung form.aktion { margin-left: auto; }
.empfehlung label.urlfeld { flex-direction: row; align-items: baseline; gap: 6px; }
.empfehlung label.urlfeld input { width: 28ch; }

/* Job-Läufe: die Fehlerspalte bekommt den Rest, deshalb eine eigene Mindestbreite. */
table.laeufe { table-layout: fixed; min-width: 1400px; }
table.laeufe td { overflow-wrap: break-word; }

/* Kandidaten: viele Spalten, deshalb eigene Breiten - bei 1440 passt alles ohne Scrollen. */
table.kandidaten { table-layout: fixed; min-width: 1360px; }
table.kandidaten col.k-check { width: 30px; }
table.kandidaten col.k-kw { width: 175px; }
table.kandidaten col.k-ort { width: 92px; }
table.kandidaten col.k-herkunft { width: 105px; }
table.kandidaten col.k-tags { width: 95px; }
table.kandidaten col.k-grund { width: 115px; }
table.kandidaten col.k-zahl { width: 70px; }
table.kandidaten col.k-sv { width: 55px; }
table.kandidaten col.k-kd { width: 48px; }
table.kandidaten col.k-top { width: 170px; }
table.kandidaten col.k-url { width: 265px; }
table.kandidaten td { overflow-wrap: break-word; }
td.zielzelle input[type="text"] { margin-bottom: 3px; }
/* Eingabefelder in Tabellenzellen bleiben in ihrer Spalte. */
td input[type="text"] { width: 100%; }
td.langtext { max-width: 380px; overflow-wrap: anywhere; }

/* ---- Tägliche News (Stufe 7) ---- */

/* Der aktive Kopflink (Tägliche News, System) trägt dieselbe Akzentkante wie ein aktiver Tab. */
header .kopflink a.aktiv { border-color: var(--accent); color: var(--accent); font-weight: 600; }

/* Datumsnavigation: Vor, Zurück und der Archiv-Aufklapper in EINER Zeile. */
.datumsnav { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0 0 10px; }
details.archiv { position: relative; }
details.archiv > summary { list-style: none; cursor: pointer; }
details.archiv > summary::-webkit-details-marker { display: none; }
.archivbox { position: absolute; left: 0; top: 26px; z-index: 40; width: 320px; max-width: 90vw;
             max-height: 60vh; overflow: auto; background: var(--panel);
             border: 1px solid var(--bd); border-radius: 6px; padding: 10px;
             box-shadow: 0 8px 20px rgba(0, 0, 0, .28); }
.archivbox p { margin: 0 0 6px; }
.archivliste { margin: 0; padding: 0; list-style: none; font-size: 12px; }
.archivliste li { padding: 3px 0; border-bottom: 1px solid var(--bd); }
.archivliste li:last-child { border-bottom: none; }
.archivliste li.jetzt { font-weight: 600; }
.archivliste .meta { display: inline; margin-left: 6px; }

/* Zähler im Filter-Chip: im aktiven Chip steht er auf gefüllter Fläche und braucht Weiß. */
.chip .zaehler { color: var(--mut); margin-left: 3px; font-variant-numeric: tabular-nums; }
.chip.filterchip.aktiv .zaehler { color: #fff; }

/* Meldungen als Karten: der Stern links, der Inhalt daneben. Bis zu news_max_meldungen Karten je Tag
   (Standard 20) - deshalb kompakt, mit ruhigen Abständen und ohne Rahmen-Schatten. */
.gruppentitel { display: flex; align-items: baseline; gap: 8px; margin: 18px 0 8px; }
.gruppentitel .meta { display: inline; text-transform: none; letter-spacing: 0; }
.meldungen { display: flex; flex-direction: column; gap: 8px; margin: 0 0 16px; max-width: 130ch; }
.meldung { display: flex; align-items: flex-start; gap: 8px; background: var(--panel);
           border: 1px solid var(--bd); border-radius: 6px; padding: 9px 12px; }
.meldung.wichtig { border-color: color-mix(in srgb, var(--acht) 55%, var(--bd)); }
.meldung form.sternform { margin: 0; flex: none; }
.meldung .meldungsinhalt { flex: 1; min-width: 0; }
.meldung h3.meldungstitel { margin: 0 0 4px; font-size: 13.5px; font-weight: 600; color: var(--fg);
                            text-transform: none; letter-spacing: 0; line-height: 1.35; }
.meldung h3.meldungstitel a { color: var(--fg); }
.meldung h3.meldungstitel a:hover { color: var(--accent); }
.meldung .meldungstext { margin: 0 0 4px; color: var(--fg); }
.meldung .relevanz { margin: 0 0 4px; color: var(--mut); }
.meldung .relevanz .marke { margin-right: 5px; color: var(--accent);
                            border-color: color-mix(in srgb, var(--accent) 45%, var(--bd)); }
.meldung .meldungsfuss { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px;
                         margin: 0; }
.meldung .meldungsfuss .meta { display: inline; }
.meldung .quellenname { font-size: 11px; color: var(--mut); font-weight: 600; }

/* Quellentabelle: feste Breiten, damit Adresse und Fehlertext nebeneinander lesbar bleiben. */
table.newsquellen { table-layout: fixed; min-width: 1360px; }
table.newsquellen col.q-name { width: 175px; }
table.newsquellen col.q-url { width: 240px; }
table.newsquellen col.q-typ { width: 54px; }
table.newsquellen col.q-kat { width: 130px; }
table.newsquellen col.q-spr { width: 62px; }
table.newsquellen col.q-aktiv { width: 52px; }
table.newsquellen col.q-abruf { width: 120px; }
table.newsquellen col.q-status { width: 82px; }
table.newsquellen col.q-fehler { width: 220px; }
table.newsquellen col.q-zahl { width: 74px; }
table.newsquellen col.q-aktion { width: 230px; }
table.newsquellen td { overflow-wrap: anywhere; }
table.newsquellen tbody tr.ruht td:first-child { box-shadow: inset 3px 0 var(--mut); }
table.newsquellen tbody tr.ruht { color: var(--mut); }
button.warnknopf { border-color: color-mix(in srgb, var(--schlecht) 55%, var(--bd));
                   color: var(--schlecht); }
button.warnknopf:hover { border-color: var(--schlecht); }
/* Das Formular „Quelle hinzufügen": die Adresse braucht mehr Platz als Name oder Sprache. */
form.filter label.weit-halb { flex: 1 1 320px; }
form.filter label.weit-halb input[type="text"] { width: 100%; }
form.filter label.name-feld input[type="text"] { width: 210px; }

/* Tracking-Seite (Stufe 8, Vorbild Mangools SERPWatcher): die Seite füllt die Fensterhöhe, Tabelle
   und Panel teilen sich die Breite 50/50 und scrollen je in ihrem eigenen Fenster. Vorlage:
   output/_intern/ranktracker-mockups/tp1/mockup.css. */
body.festehoehe { height: 100vh; overflow: hidden; display: flex; flex-direction: column; }
body.festehoehe .kopfbereich { flex: none; }
body.festehoehe main { flex: 1; min-height: 0; display: flex; flex-direction: column; padding-bottom: 12px; }
body.festehoehe main > .panel.gespeichert { flex: none; }
.tracking-seite { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.tracking-seite > .seitenkopf, .tracking-seite > .chipleiste, .tracking-seite > .panel { flex: none; }
.tracking-layout { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
                   gap: 14px; align-items: stretch; }
.tracking-haupt { min-width: 0; min-height: 0; display: flex; flex-direction: column; }
.tracking-haupt form.tabellenform { flex: 1; min-height: 0; display: flex; flex-direction: column; margin: 0; }
.tracking-haupt .wrap.scrollfenster { flex: 1; min-height: 0; overflow: auto; }
.tracking-haupt .auswahlleiste { flex: none; position: static; }
.tracking-panel.scrollfenster { min-width: 0; min-height: 0; overflow: auto; display: flex; flex-direction: column;
                                gap: 12px; padding-right: 2px; }
.explorer.scrollfenster { flex: 1; min-height: 0; overflow: auto; }
/* Fester Fuß unter der Tabelle: Zähler links, Tag, Export und Archivieren rechts. */
.tabellenfuss { flex: none; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; padding: 6px 2px 0; }
.tabellenfuss .fussaktionen { margin-left: auto; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.tabellenfuss .tagfeld { display: flex; align-items: center; gap: 5px; }
.tabellenfuss input[type="text"] { padding: 1px 6px; font-size: 11px; }
.knopf.primaer-link { background: var(--accent-tief); border-color: var(--accent-tief); color: #fff; font-weight: 600; }
/* Die Tabelle der Tracking-Seite: feste Spalten nach dem Mockup. Ihre Breite ist die Summe der
   Spalten (table-layout: fixed). Die Standardauswahl samt Takt, SERP und GSC neben Rank passt bei 1440 px ins halbe
   Fenster (695 px), mit und ohne SF-Spalte (geprüft in test_browser_tracking.py: Spaltensumme ohne SF 658 px, mit SF 692 px); jede zugeschaltete Spalte verbreitert sie, und das Scrollfenster
   scrollt dann waagrecht. Gekürzt wird nie der Inhalt: SERP-Zelle ("> 100 M"), Best und Change passen ohne
   Auslassungspunkte. Dafür tragen die Zahlspalten 4 px statt 6 px Innenabstand. */
table.rankings.tracking { min-width: 0; }
table.rankings.tracking col.c-check { width: 24px; }
table.rankings.tracking col.c-stern { width: 26px; }
table.rankings.tracking col.c-kw { width: 184px; }   /* 14.10.: + 34 px der SF-Spalte (jetzt zuschaltbar) */
table.rankings.tracking col.c-serp { width: 34px; }          /* SF: nur Zeichen */
table.rankings.tracking col.c-pos { width: 62px; }
table.rankings.tracking col.c-messung { width: 56px; }       /* SERP-Messung: "> 100 M" */
table.rankings.tracking col.c-gscpos { width: 42px; }        /* GSC Ø 7 T */
table.rankings.tracking col.c-delta { width: 74px; }
table.rankings.tracking col.c-best { width: 42px; }
table.rankings.tracking col.c-zahl { width: 44px; }
table.rankings.tracking col.c-menu { width: 26px; }
table.rankings.tracking td.kwzelle .tagchip { max-width: 9ch; }
/* Auftraggeber 14.10. („alles sauber lesbar"): wird es eng, gibt zuerst der Tag-Chip nach (bis auf 4 Zeichen mit
   Auslassungspunkten), erst danach das Keyword; der volle Tag steht im title. */
table.rankings.tracking td.kwzelle .tagchip { flex: 0 1000 auto; min-width: 4ch; overflow: hidden; text-overflow: ellipsis;
                                             white-space: nowrap; }
table.rankings.tracking th:not(.mitte), table.rankings.tracking td:not(.mitte) { padding-left: 6px; padding-right: 6px; }
table.rankings.tracking th.zahl, table.rankings.tracking td.zahl { padding-left: 4px; padding-right: 4px; }
table.rankings.tracking .quelle { min-width: 12px; margin-left: 2px; font-size: 9.5px; line-height: 12px; }
table.rankings.tracking .zahlgross.schwach { font-size: 11.5px; }
table.rankings.tracking td.zahl .plus, table.rankings.tracking td.zahl .minus, table.rankings.tracking td.zahl .neutral { font-size: 11px; padding: 1px 4px; }
table.rankings.tracking tbody tr.gewaehlt td { background: color-mix(in srgb, var(--accent) 14%, transparent); }
table.rankings.tracking tbody tr.gewaehlt td:first-child { box-shadow: inset 3px 0 var(--accent); }
/* SERP-Features: ein kleines Zeichen je Typ, der Name steht im title. */
td.serpzelle { color: var(--mut); }
.serpfeature { display: inline-block; min-width: 15px; margin-right: 1px; padding: 0 2px; border: 1px solid var(--bd);
               border-radius: 3px; font-size: 10px; line-height: 15px; text-align: center; cursor: help; }
/* Chip-Leisten: Beschriftung klein davor, der freie Zeitraum als schmales Formular in der Leiste. */
.chipleiste .chipbeschriftung { font-size: 10px; text-transform: uppercase; letter-spacing: .05em; color: var(--mut);
                                margin-right: 2px; }
.chipleiste.tagleiste { margin-bottom: 6px; }
.chipleiste form.filter.schmal.zeitraumfrei { margin: 0 14px 0 0; }
/* Der Chip „frei" ist ein label (er setzt den Fokus ins erste Datumsfeld) - ohne die Formatierung
   der Formularbeschriftungen. */
.chipleiste form.zeitraumfrei label.chip { display: inline-block; font-size: 11.5px; text-transform: none;
                                          letter-spacing: 0; color: var(--fg); }
.chipleiste form.zeitraumfrei label.chip.aktiv { color: #fff; }
.chipleiste form.zeitraumfrei input[type="date"] { background: var(--bg); color: var(--fg); border: 1px solid var(--bd);
                                                   border-radius: 5px; padding: 2px 6px; font: inherit; font-size: 12px; }
:root:not([data-theme="light"]) input[type="date"] { color-scheme: dark; }
[data-theme="light"] input[type="date"] { color-scheme: light; }
/* Tag-Farben: die Klasse farbe-n setzt nur die Farbe, Chip und Marke entscheiden, wie sie aussehen.
   Text = 80 % Tagfarbe und 20 % Schriftfarbe (hält 4,5:1 auf getöntem Grund in beiden Themes). */
.farbe-0 { --tagfarbe: var(--tag-0); } .farbe-1 { --tagfarbe: var(--tag-1); }
.farbe-2 { --tagfarbe: var(--tag-2); } .farbe-3 { --tagfarbe: var(--tag-3); }
.farbe-4 { --tagfarbe: var(--tag-4); } .farbe-5 { --tagfarbe: var(--tag-5); }
.farbe-6 { --tagfarbe: var(--tag-6); } .farbe-7 { --tagfarbe: var(--tag-7); }
.tagchip[class*="farbe-"], .chip.tagfilter[class*="farbe-"] {
  color: color-mix(in srgb, var(--tagfarbe) 80%, var(--fg));
  background: color-mix(in srgb, var(--tagfarbe) 16%, transparent); }
.chip.filterchip[class*="farbe-"] { border-color: var(--tagfarbe); color: color-mix(in srgb, var(--tagfarbe) 80%, var(--fg)); }
.chip.filterchip[class*="farbe-"]:hover { border-color: var(--tagfarbe); }
.chip.filterchip[class*="farbe-"].aktiv { background: var(--tagfarbe); border-color: var(--tagfarbe); color: var(--bg); }
/* Kompakte Kacheln im Panel (zwei je Zeile, im Keyword-Detail vier). */
.kacheln.kompakt { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: 0; flex: none; }
.kacheln.kompakt.vier { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.kacheln.kompakt .kachel { min-height: 64px; padding: 7px 10px; }
.kacheln.kompakt .kachel dd { font-size: 16px; display: flex; flex-direction: column; gap: 2px; }
.kacheln.kompakt .kachel dd .paar { display: flex; flex-wrap: wrap; gap: 6px; align-items: baseline; }
.kacheln.kompakt .kachel dd .plus, .kacheln.kompakt .kachel dd .minus,
.kacheln.kompakt .kachel dd .neutral { font-size: 12.5px; }
.kacheln.kompakt .trennzeichen { color: var(--mut); font-weight: 400; }
/* Panelblöcke: Überschrift klein, Chart auf dem Seitenhintergrund, Kennzahlen darunter. */
section.panelblock { margin: 0; }
.panelblock { background: var(--panel); border: 1px solid var(--bd); border-radius: 6px; padding: 10px 12px;
              min-width: 0; flex: none; }
.panelblock h2 { margin: 0 0 8px; font-size: 13px; display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.panelblock h2 .meta { display: inline; font-weight: 400; text-transform: none; letter-spacing: 0; }
.chart.panelchart { height: 210px; padding: 6px; background: var(--bg); }
.indexhinweis { margin: 0; padding: 26px 12px; text-align: center; background: var(--bg); border: 1px dashed var(--bd);
                border-radius: 6px; }
.kennzahlzeile { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 18px; margin: 8px 0 4px; }
.kennlabel { display: block; font-size: 10px; text-transform: uppercase; letter-spacing: .04em; color: var(--mut); }
.kennzahlzeile .wert { font-size: 22px; font-weight: 600; line-height: 1.15; margin-right: 4px; }
.kennzahlzeile .wert.leer { font-size: 15px; font-weight: 400; color: var(--mut); }
.kennzahlzeile .meta { display: inline; }
.kennzahlzeile .meta .plus, .kennzahlzeile .meta .minus, .kennzahlzeile .meta .neutral { font-size: 11px; }
.erklaerung.klein { font-size: 11px; margin: 8px 0 0; }
/* Gainer/Loser: zwei Blöcke nebeneinander, je Zeile Keyword, Rank mit Change und der Beitrag. */
.zweispalt { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; flex: none; }
.gainer { margin: 0; padding: 0; list-style: none; }
.gainer li { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 6px; align-items: center; padding: 4px 0;
             border-bottom: 1px solid var(--bd); font-size: 12px; }
.gainer li:last-child { border-bottom: none; }
.gainer .rang { white-space: nowrap; font-variant-numeric: tabular-nums; }
.gainer .rang .plus, .gainer .rang .minus, .gainer .rang .neutral { font-size: 10.5px; padding: 0 5px; }
.gainer .rang .marke { vertical-align: baseline; }
.gainer .beitrag { font-weight: 600; font-variant-numeric: tabular-nums; background: none; padding: 0; min-width: 40px;
                   text-align: right; font-size: 12px; }
/* Keyword-Detail im Panel: Kopf mit Aktionen, rankende URLs, SERP (Block „SERP" weiter unten bei .serpblock), Tags. */
.detailkopf { display: flex; align-items: center; gap: 8px 10px; flex-wrap: wrap; flex: none; }
.detailkopf h2 { margin: 0; font-size: 15px; font-weight: 400; display: flex; align-items: center; gap: 6px;
                 flex-wrap: wrap; min-width: 0; }
.detailkopf h2 b { font-weight: 600; }
.detailaktionen { margin-left: auto; display: flex; flex-wrap: wrap; gap: 6px; }
.detailaktionen .schliessen { border-color: var(--accent); color: var(--accent); }
table.urls { min-width: 0; }
table.urls col.c-schmal { width: 66px; }
table.urls td { vertical-align: middle; }
.panelblock .chips { margin: 0; }
form.aktion.inline { display: flex; align-items: center; gap: 6px; margin: 8px 0 0; }
form.tagform input[type="text"] { flex: 1; min-width: 0; }

/* ---- Dashboard (Stufe 8, Task 4): eine Kachel je Funktion, darunter die Kontingente ---- */
.kacheln.funktionen { grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px; margin-bottom: 14px; }
.kacheln.funktionen .kachel { min-height: 118px; }
.kacheln.funktionen .kachel dd { display: flex; flex-direction: column; gap: 3px; }
.kacheln.funktionen .kontingent { color: var(--fg); }
.wrap.kontingente { max-width: 900px; }
table.kontingente { min-width: 640px; }

/* ---- Trackings-Übersicht (Stufe 8, Task 4): zwei Karten je Zeile, große Sparkline, 7/30 je Karte
   (Vorbild Mangools SERPWatcher; Vorlage output/_intern/ranktracker-mockups/tp1/mockup.css) ---- */
.kopfaktionen form.filter.schmal { display: flex; flex-wrap: nowrap; align-items: center; gap: 6px; margin: 0;
                                   padding: 0; background: none; border: none; }
.kopfaktionen form.filter.schmal input[type="search"] { width: 210px; }
.karten { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin: 0 0 16px;
          align-items: start; }
.karte { display: flex; flex-direction: column; gap: 12px; min-width: 0; background: var(--panel);
         border: 1px solid var(--bd); border-radius: 6px; padding: 14px 16px; min-height: 168px; }
.karte.leise { color: var(--mut); min-height: 0; }
.karte .hinweis { margin: 0; }
.kartenkopf { display: flex; align-items: center; gap: 12px; }
.kartenkopf > div { flex: 1; min-width: 0; }
.kartenkopf .domain { display: block; font-weight: 600; font-size: 16px; color: var(--fg);
                      overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kartenkopf .domain:hover { color: var(--accent); text-decoration: none; }
/* Buchstaben-Marke: Grund in der Tag-Farbe des Kundennamens, Schrift in --bg wie beim aktiven Tag-Chip.
   Die Tag-Töne sind im hellen Theme dunkel und im dunklen hell - so hält der Kontrast in beiden
   mindestens 4,5:1 (weiße Schrift läge im dunklen Theme auf Gelb oder Grün weit darunter). */
.marke-domain { flex: none; position: relative; width: 34px; height: 34px; border-radius: 8px; display: inline-flex;
                align-items: center; justify-content: center; font-weight: 700; font-size: 15px; color: var(--bg);
                overflow: hidden; background: var(--tagfarbe, var(--accent-tief)); }
/* Das echte Favicon liegt über der Buchstaben-Marke; lädt es nicht, entfernt onerror das Bild und der
   Buchstabe bleibt. Weißer Grund, weil viele Favicons für helle Tabs gezeichnet sind. */
.marke-domain img.favicon { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain;
                            background: #fff; padding: 4px; border-radius: 8px; }
/* 7/30-Umschalter je Karte ohne Skript: zwei Radio-Felder, die Beschriftungen sind die Knöpfe. */
.tageswahl { display: inline-flex; gap: 2px; flex: none; }
.tageswahl input { position: absolute; opacity: 0; pointer-events: none; }
.tageswahl label { display: inline-block; min-width: 26px; text-align: center; padding: 1px 6px; font-size: 11px;
                   border: 1px solid var(--bd); border-radius: 999px; color: var(--mut); cursor: pointer; }
.tageswahl label:hover { border-color: var(--accent); }
.tageswahl input:checked + label { border-color: var(--accent); color: var(--accent); font-weight: 600; }
.tageswahl input:focus-visible + label { outline: 2px solid var(--accent); outline-offset: 1px; }
.karte .s7, .karte .delta.d7 { display: none; }
.karte:has(input[id^="t7-"]:checked) .s7, .karte:has(input[id^="t7-"]:checked) .delta.d7 { display: block; }
.karte:has(input[id^="t7-"]:checked) .s30, .karte:has(input[id^="t7-"]:checked) .delta.d30 { display: none; }
details.kartenmenu { position: relative; flex: none; }
details.kartenmenu > summary { padding: 0 4px; font-size: 16px; }
details.kartenmenu .menuinhalt { right: 0; top: 24px; min-width: 160px; }
.kartenwerte { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 16px; align-items: end; }
.kartenindex { display: flex; flex-direction: column; gap: 2px; }
.kartenlabel { display: block; font-size: 10px; text-transform: uppercase; letter-spacing: .04em; color: var(--mut); }
.karte .pizeile { display: flex; align-items: baseline; gap: 4px; }
.karte .pizeile .meta { display: inline; }
.karte .pi { font-size: 30px; font-weight: 600; line-height: 1.1; }
.karte .pi.leer { font-size: 15px; font-weight: 400; line-height: 2.2; color: var(--mut); }
.karte .delta { margin-top: 4px; }
.karte .delta.d30 { display: block; }
/* Auftraggeber 14.10.2026: der Performance Index klein unter der GSC-Sichtbarkeit; seine Veränderung steht in derselben
   Zeile und folgt demselben Schalter 7 | 30. */
.karte .kartenpi { display: block; margin-top: 6px; font-size: 11.5px; white-space: nowrap; }
.kartenwerte:has(.kartenpi) { grid-template-columns: 220px minmax(0, 1fr); }
.karte .kartenpi .delta.d7, .karte .kartenpi .delta.d30 { display: none; margin-left: 4px; font-size: 11px; }
.karte:not(:has(input[id^="t7-"]:checked)) .kartenpi .delta.d30 { display: inline; }
.karte:has(input[id^="t7-"]:checked) .kartenpi .delta.d7 { display: inline; }
.karte .delta .meta { display: inline; }
.kartenspark { min-width: 0; }
.kartenspark .sparkline.wert { display: block; width: 100%; height: 84px; color: var(--accent); }
/* Die Linie der großen Sparkline etwas kräftiger als in der Tabelle (die Breite bleibt dank
   vector-effect in Bildschirmpixeln, auch wenn das SVG in die Breite gezogen wird). */
.kartenspark .sparkline.wert path[fill="none"] { stroke-width: 2; }

/* Trackings archivieren (31.10.2026, Entwurf archiv-entwurf.html): Archiv-Karten gestrichelt und gedämpft (auch
   Marke und Verlauf grau), Button unter den Karten, Rückfrage, Leiste auf den Seiten eines archivierten Kunden. */
.karte.archiv { border-style: dashed; color: var(--mut); }
.karte.archiv .marke-domain { background: var(--mut); }
.karte.archiv .kartenspark .sparkline.wert { color: var(--mut); }
.fussaktionen { margin-top: 16px; }
.panel.rueckfrage { max-width: 760px; }
.archivleiste { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }

/* ---- Neues Tracking (Stufe 8, Task 4): zweispaltiges Formular, Meldung unter dem Feld ---- */
form.neutracking { max-width: 760px; margin: 0 0 14px; }
form.neutracking > .feld { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
form.neutracking textarea { width: 100%; }
form.neutracking label.schalter { display: flex; align-items: center; gap: 6px; }
form.neutracking .feld .meta { margin-top: 4px; }
form.neutracking .feld > button { align-self: flex-start; }
.feldfehler { display: block; color: var(--schlecht); font-size: 11.5px; }

/* ---- Theme-Umschalter: die Beschriftung nennt das Ziel, nicht den Zustand ---- */
[data-theme="light"] .nur-dunkel { display: none; }
:root:not([data-theme="light"]) .nur-hell { display: none; }

/* Unter 1100 px eine Spalte: Tabelle zuerst, Panel darunter, die Seite scrollt wieder normal. */
@media (max-width: 1100px) {
  .karten { grid-template-columns: minmax(0, 1fr); }
  body.festehoehe { height: auto; overflow: visible; display: block; }
  body.festehoehe main { display: block; padding-bottom: 24px; }
  .tracking-seite { display: block; }
  .tracking-layout { grid-template-columns: minmax(0, 1fr); }
  .tracking-haupt .wrap.scrollfenster { max-height: 70vh; }
  .tracking-panel.scrollfenster, .explorer.scrollfenster { overflow: visible; }
  .kacheln.kompakt { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .kacheln.kompakt, .kacheln.kompakt.vier { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .zweispalt { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 1024px) {
  main { padding: 12px 12px 24px; }
  header { flex-wrap: wrap; row-gap: 4px; }
  .kopfbereich { position: static; }
  .wrap.hoch { max-height: none; }
  .kacheln { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); }
  .uebersicht .kacheln { grid-template-columns: repeat(auto-fit, minmax(165px, 1fr)); }
  .formular { grid-template-columns: 1fr; }
  .formular > .beschriftung { text-align: left; }
  /* Auf dem schmalen Fenster steht die Suche unter den Chips statt neben ihnen. */
  .chipleiste form.filter.schmal { margin-left: 0; flex-basis: 100%; }
  .chipleiste form.filter.schmal input[type="search"] { flex: 1; width: auto; }
  /* Punkt 2 der Fix-Runde 1: links verankert lief das Panel bei 1024 px über den rechten Rand
     hinaus und die letzten Felder waren nicht erreichbar. Es bleibt rechtsbündig und passt sich der
     Fensterbreite an. */
  details.weitere .weiterefelder { right: 0; left: auto; width: auto;
                                   max-width: calc(100vw - 24px); }
  .kopfaktionen { flex-wrap: wrap; }
  /* Einspaltig braucht eine leere Beschriftung (Folgezeile der Radio-Felder) keine eigene Zeile. */
  .formular > .beschriftung:empty { display: none; }
}
@media (max-width: 640px) {
  .kartenwerte { grid-template-columns: minmax(0, 1fr); }
  .kopfaktionen form.filter.schmal input[type="search"] { width: 150px; }
}

/* ---- Keyword-Recherche (Stufe 9, Task 4): Suchleiste, durchsuchbare Listen, Verlauf, KD-Stufen ----
   Vorlage: output/_intern/ranktracker-mockups/tp2/mockup.css (Fassungen 2 bis 5); die Ergebnis-Seite und die
   Keyword-Datenbank ergänzen ihre Klassen in Task 5 und 6. */

/* Suchleiste: Tabs „Nach Keyword" / „Nach Domain" (ohne Script Links), darunter EINE Zeile aus Seed, Ort,
   Sprache und Knopf. */
.suchleiste { padding: 8px 12px 10px; margin: 0 0 12px; }
.formtabs { display: flex; gap: 2px; margin-bottom: 10px; border-bottom: 1px solid var(--bd); }
.formtab { display: inline-block; background: none; border: 0; border-bottom: 2px solid transparent;
           padding: 6px 12px; color: var(--mut); font: inherit; font-weight: 600; cursor: pointer; }
.formtab:hover { color: var(--fg); text-decoration: none; }
.formtab.aktiv { color: var(--fg); border-bottom-color: var(--accent); }
.formtabs.klein { margin-bottom: 6px; }
.formtabs.klein .formtab { padding: 3px 10px; font-size: 12px; }
form.recherche.zeile { display: flex; flex-wrap: nowrap; gap: 8px; align-items: center; margin: 0; }
form.recherche.zeile .seedfeld { flex: 1 1 auto; min-width: 0; font-size: 15px; padding: 7px 10px;
                                 border-radius: 6px; }
form.recherche.zeile select { padding: 7px 9px; border-radius: 6px; width: 100%; }
form.recherche.zeile .landfeld { flex: none; width: 230px; }
form.recherche.zeile .sprachfeld { flex: none; width: 170px; }
form.recherche.zeile button.primaer { flex: none; padding: 7px 14px; }
.suchleiste .feldfehler { margin: 6px 0 0; }
.suchleiste .suchhinweis { margin: 6px 0 0; }
.suchleiste .suchhinweis b { color: var(--fg); font-weight: 600; }
.chipleiste.domainchips { margin: 6px 0 0; }
.flagge { font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif; }

/* Durchsuchbare Liste (static/combobox.js): Knopf mit Flagge und Name, aufgeklappt Suchfeld, Liste mit dem Typ
   rechts und ein Hinweis darunter. Ohne Script bleibt das <select> darunter sichtbar. */
.combobox { position: relative; }
.combobox .comboknopf { width: 100%; text-align: left; background: var(--bg); color: var(--fg);
                        border: 1px solid var(--bd); border-radius: 6px; padding: 7px 9px; font: inherit;
                        font-size: 13px; cursor: pointer; display: flex; align-items: center; gap: 6px; }
.combobox .comboknopf .name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.combobox .comboknopf .pfeil { margin-left: auto; color: var(--mut); font-size: 11px; }
.combobox.offen .comboknopf { border-color: var(--accent); }
.comboliste { position: absolute; top: calc(100% + 4px); left: 0; z-index: 40; width: 320px; max-width: 90vw;
              background: var(--panel); border: 1px solid var(--bd); border-radius: 8px;
              box-shadow: 0 8px 24px rgba(0, 0, 0, .18); padding: 8px; }
.sprachfeld .comboliste { width: 240px; }
.comboliste input[type="search"] { width: 100%; padding: 6px 8px; margin-bottom: 6px; border-radius: 6px; }
.comboliste ul { list-style: none; margin: 0; padding: 0; max-height: 230px; overflow: auto; }
.comboliste li { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: 5px; cursor: pointer;
                 font-size: 12.5px; }
.comboliste li:hover, .comboliste li.aktiv { background: color-mix(in srgb, var(--accent) 12%, transparent); }
.comboliste li.gewaehlt .name { font-weight: 700; }
.comboliste li .typ { margin-left: auto; font-size: 10px; color: var(--mut); text-transform: uppercase;
                      letter-spacing: .04em; white-space: nowrap; }
.comboliste li.leer { cursor: default; color: var(--mut); }
.comboliste .meta { margin: 6px 2px 0; font-size: 10.5px; }

/* Verlauf der Recherchen. */
section.panelblock.verlauf { margin: 0 0 16px; }
.panelblock.verlauf form.filter.schmal { display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
                                         margin: 0 0 8px; padding: 0; background: none; border: none; }
.panelblock.verlauf form.filter.schmal input[type="search"] { width: 210px; }
table.verlauf td, table.verlauf th { white-space: nowrap; }
table.verlauf td { vertical-align: middle; }
table.verlauf td.seedzelle { white-space: normal; min-width: 180px; }
table.verlauf td.seedzelle a b { font-weight: 600; }
table.verlauf th.mitte, table.verlauf td.mitte { text-align: center; }
table.verlauf form.neuladen { justify-content: center; }
.verlaufsfuss { margin: 6px 0 0; }

/* KD-Badge (Liste der Ergebnis-Seite und der Keyword-Datenbank, Task 5/6): Zahl auf dem Ton der Stufe, Schrift
   aus --kd-n-schrift (siehe Tokens oben). Ohne Wert (Stufe 0) „–" in --mut auf dem Seitengrund mit Rahmen -
   so hält auch der Strich den Kontrast. */
.kd { display: inline-block; min-width: 30px; text-align: center; padding: 1px 6px; border-radius: 10px;
      border: 1px solid transparent; font-weight: 700; font-size: 11.5px; line-height: 1.4; color: #fff; }
.kd.kd-0 { background: transparent; border-color: var(--bd); color: var(--mut); font-weight: 600; }
.kd.kd-1 { background: var(--kd-1); color: var(--kd-1-schrift); }
.kd.kd-2 { background: var(--kd-2); color: var(--kd-2-schrift); }
.kd.kd-3 { background: var(--kd-3); color: var(--kd-3-schrift); }
.kd.kd-4 { background: var(--kd-4); color: var(--kd-4-schrift); }
.kd.kd-5 { background: var(--kd-5); color: var(--kd-5-schrift); }
.kd.kd-6 { background: var(--kd-6); color: var(--kd-6-schrift); }

/* Wartezustand (Platzhalter der Ergebnis-Seite, später auch Panel und SERP). */
.ladezustand { display: flex; align-items: center; gap: 10px; padding: 18px 12px; color: var(--mut); }
.spinner { flex: none; width: 16px; height: 16px; border: 2px solid var(--bd); border-top-color: var(--accent);
           border-radius: 50%; animation: dreh 1s linear infinite; }
@keyframes dreh { to { transform: rotate(360deg); } }
.panel.schlecht form.neuladen { display: inline-flex; margin-left: 8px; vertical-align: middle; }

/* Unter 900 px bricht die Suchleiste um: Seed über die ganze Breite, Ort, Sprache und Knopf darunter. */
@media (max-width: 900px) {
  form.recherche.zeile { flex-wrap: wrap; }
  form.recherche.zeile .seedfeld { flex-basis: 100%; }
  form.recherche.zeile .landfeld, form.recherche.zeile .sprachfeld { flex: 1 1 160px; width: auto; }
}

/* ---- Keyword-Recherche, Ergebnis-Seite (Stufe 9, Task 5; Spec 6.2) ----
   Vorlage: output/_intern/ranktracker-mockups/tp2/mockup.css (Fassungen 2 bis 5) und die Screenshots
   shot_recherche_ergebnis_*_1440.png / shot_recherche_domain_*_1440.png. Nur neue Klassen bzw. Klassen unter
   .recherche-seite, .kwpanel und table.recherche / table.serp - die Tracking-Seite bleibt unberührt. */
body.festehoehe main > .suchleiste { flex: none; }
.recherche-seite { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.recherche-seite > .chipleiste, .recherche-seite > .panel { flex: none; }
.recherche-seite.laedt, .kwpanel.laedt { opacity: .55; transition: opacity .15s; cursor: progress; }
.chipleiste.zeilenkopf { margin-bottom: 6px; position: relative; }
.chipleiste .stand.rechts { margin-left: auto; font-size: 11px; color: var(--mut); }
.chipleiste .stand.rechts .linkknopf { font-size: 11px; }
.linkknopf { background: none; border: 0; padding: 0; color: var(--accent); font: inherit; cursor: pointer; }
.linkknopf:hover { text-decoration: underline; }
.chip.filterchip.inaktiv { opacity: .55; cursor: not-allowed; }
.chip.filterchip.gesetzt { border-color: var(--accent); color: var(--accent); }
.chip.klein { padding: 1px 7px; font-size: 10.5px; }
.chip.intent { border-color: var(--accent); color: var(--accent); }
.meta.inline { display: inline; }
/* Filterleiste: klappt unter dem Knopf auf (wie „Weitere Filter" der Tracking-Seite). */
details.filterklappe { position: relative; }
details.filterklappe > summary { list-style: none; }
details.filterklappe > summary::-webkit-details-marker { display: none; }
details.filterklappe .filterleiste { position: absolute; left: 0; top: 28px; z-index: 40; width: 620px; max-width: 88vw;
                                    display: flex; flex-wrap: wrap; align-items: flex-end; gap: 8px 12px;
                                    background: var(--panel); border: 1px solid var(--bd); border-radius: 6px;
                                    padding: 10px; box-shadow: 0 8px 20px rgba(0, 0, 0, .28); }
.filterleiste label { display: flex; flex-direction: column; gap: 3px; font-size: 10px; text-transform: uppercase;
                      letter-spacing: .05em; color: var(--mut); }
.filterleiste label.schalter { flex-direction: row; align-items: center; gap: 6px; font-size: 12px; text-transform: none;
                              letter-spacing: 0; color: var(--fg); padding-bottom: 5px; }
.filterleiste .vonbis { display: flex; gap: 4px; }
.filterleiste input.zahlfeld { width: 74px; }
.filterleiste input[type="search"] { width: 150px; }
.filterleiste .filterleeren { align-self: center; font-size: 12px; }

/* Trefferliste: kompakt, feste Spalten (Mockup), SV-Umschalter über die Klasse .bereinigt der Seite. */
table.rankings.recherche { min-width: 0; }
table.rankings.recherche col.c-check { width: 26px; }
table.rankings.recherche col.c-kw { width: auto; }
table.rankings.recherche col.c-trend { width: 150px; }
table.rankings.recherche col.c-pos { width: 48px; }
table.rankings.recherche col.c-zahl { width: 64px; }
table.rankings.recherche col.c-ppc { width: 44px; }
table.rankings.recherche col.c-kd { width: 46px; }
table.recherche.kompakt td, table.recherche.kompakt th { padding: 3px 7px; line-height: 1.25; }
table.recherche.kompakt td { height: 30px; }
table.recherche td.trendzelle { white-space: nowrap; }
table.recherche tbody tr.gewaehlt td { background: color-mix(in srgb, var(--accent) 14%, transparent); }
table.recherche tbody tr.gewaehlt td:first-child { box-shadow: inset 3px 0 var(--accent); }
.sparkbars { display: inline-block; width: 64px; height: 18px; vertical-align: middle; fill: var(--accent); opacity: .8; }
.trendprozent { display: inline-block; min-width: 50px; font-size: 10.5px; margin-right: 6px; vertical-align: middle; }
.trendprozent .plus, .trendprozent .minus, .trendprozent .neutral { font-size: 10.5px; padding: 0 4px; }
.sv-bereinigt { display: none; }
.recherche-seite.bereinigt .sv-bereinigt { display: inline; }
.recherche-seite.bereinigt .sv-ads { display: none; }
.marke.frage, .marke.intent { border-color: var(--accent); color: var(--accent); }
.marke.variante { border-style: dashed; }
.marke.kunde { border-color: var(--gut); color: var(--gut); font-weight: 700; }
.hinweis.mehr { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px 10px;
                padding: 10px; text-align: center; }

/* Keyword-Panel: Kopf, Kennzahlreihe (KD-Ring, Suchvolumen), SERP-Übersicht - enger als das Tracking-Panel, damit
   bei 1440 × 900 Kopf, Kennzahlen und die ersten SERP-Zeilen ohne Scrollen zu sehen sind (Spec 6.2). */
.tracking-panel.kwpanel { gap: 8px; }
.kwpanel .kwkopf { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; flex: none; }
.kwpanel .kwkopf h2 { margin: 0; font-size: 17px; }
.kwpanel .kwkopf .meta { display: inline; }
.kwpanel .kwkopf .detailaktionen { margin-left: auto; }
.kwpanel .kwkunden { margin: 0; flex: none; }
.kwreihe { display: grid; grid-template-columns: 170px minmax(0, 1fr); gap: 8px; flex: none; }
.kwreihe .kachel { padding: 8px 10px; min-height: 0; }
.kdring { display: flex; flex-direction: column; align-items: center; }
.kdring svg { width: 88px; height: 88px; }
.kdring .ringgrund { stroke: var(--bd); }
.kdring.kd-0 { color: var(--mut); } .kdring.kd-1 { color: var(--kd-1); } .kdring.kd-2 { color: var(--kd-2); }
.kdring.kd-3 { color: var(--kd-3); } .kdring.kd-4 { color: var(--kd-4); } .kdring.kd-5 { color: var(--kd-5); }
.kdring.kd-6 { color: var(--kd-6); }
.kdring .ringzahl { fill: var(--fg); font-size: 22px; font-weight: 700; }
.kdring .ringlabel { fill: var(--mut); font-size: 9px; }
.kdring .ringstufe { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; margin-top: 2px; }
.kdring .ringtitel { font-size: 10.5px; color: var(--mut); }
.svkachel .chart.svchart { height: 96px; padding: 2px; background: var(--bg); }
.svkachel .svleer { margin: 0; padding: 30px 8px; text-align: center; }
.svzeile { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin-top: 4px; font-size: 11px; }
.svzeile .svwert { font-size: 17px; font-weight: 700; }
.svzeile .umschalter { margin-left: auto; display: flex; gap: 3px; }
.serpblock .serpkopf { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin: 0 0 6px; }
.serpblock .serpkopf h2 { margin: 0; }
.serpblock .serpkopf .detailaktionen { align-items: center; }
.serpblock .serpfeatures { display: inline-flex; flex-wrap: wrap; gap: 4px; }
.serpblock form.serpaktion { display: inline-flex; margin: 0; }
.knopf.inaktiv { opacity: .65; cursor: default; }
.knopf.inaktiv:hover { border-color: var(--bd); }
.spinner.klein { display: inline-block; width: 10px; height: 10px; border-width: 2px; vertical-align: middle; }
.ladezustand.inline { display: inline-flex; padding: 0; }
table.serp.kompakt td, table.serp.kompakt th { padding: 3px 6px; line-height: 1.3; white-space: nowrap; vertical-align: middle; }
table.serp.kompakt col.c-pos { width: 30px; }
table.serp.kompakt col.c-fav { width: 28px; }
table.serp.kompakt col.c-metrik { width: 50px; }
table.serp.kompakt td.urlzelle { max-width: 0; overflow: hidden; }
table.serp.kompakt .urlzeile { display: flex; align-items: center; gap: 5px; min-width: 0; }
table.serp.kompakt .urlzeile .kuerzen { flex: 0 1 auto; min-width: 0; max-width: none; display: block; }
table.serp.kompakt .urlzeile .marke { flex: none; }
table.serp.kompakt td.urlzelle a b { font-weight: 600; }
table.serp.kompakt td.pos { color: var(--mut); font-weight: 600; }
table.serp.kompakt td.paa { white-space: normal; font-size: 11px; line-height: 1.35; }
table.serp.kompakt .marke-domain { width: 18px; height: 18px; border-radius: 4px; font-size: 10px; vertical-align: middle; }
table.serp.kompakt .marke-domain img.favicon { padding: 1px; border-radius: 4px; }
table.serp.kompakt tr.serpfeature-zeile td { background: color-mix(in srgb, var(--accent) 7%, transparent); }
table.serp.kompakt tr.kundenzeile td { background: color-mix(in srgb, var(--gut) 14%, transparent); }
table.serp.kompakt tr.kundenzeile td:first-child { box-shadow: inset 3px 0 var(--gut); }
.abgleich { margin: 0 0 8px; padding: 8px 10px; border: 1px solid color-mix(in srgb, var(--gut) 50%, var(--bd));
            border-left: 3px solid var(--gut); border-radius: 6px; font-size: 11.5px; line-height: 1.5; }
.abgleich .minus, .abgleich .neutral { font-size: 11px; }
.abgleichzeile { margin: 0 0 6px; }
/* Fix-Runde 1: EV je Index-Quelle, gescheitertes „Neu laden", Deckel der Liste, gesperrter Kostenknopf. */
table.abgleichtabelle { width: auto; min-width: 0; margin: 4px 0; font-size: 11px; }
table.abgleichtabelle th, table.abgleichtabelle td { padding: 1px 10px 1px 0; border: 0; background: none; }
table.abgleichtabelle thead th { position: static; box-shadow: none; background: none; padding-bottom: 2px; }
table.abgleichtabelle tbody tr:nth-child(even), table.abgleichtabelle tbody tr:hover { background: none; }
.serpblock .serpfehler { margin: 0 0 8px; font-size: 11.5px; }
.serpblock .serpsperre { margin: 0 0 8px; }
/* Block „SERP" im Keyword-Detail der Tracking-Seite (01.11.2026): die Kopfzeile der Messung (Quelle, Zeitpunkt, Kennzahlen,
   Feature-Chips) bricht um, die Chips stehen ohne Einzug hinter den Kennzahlen. */
.serpblock.messung .messungkopf { display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: center; margin: 0 0 6px; }
.serpblock.messung .serpfeatures { margin-left: 0; }
/* SERP-Seite eines Keywords (01.11.2026): jede ältere Messung als zugeklappte Zeile <details class="messung"> mit ihrer
   Kopfzeile als summary; die Feature-Chips brechen in der Kopfzeile um wie im Block „SERP" des Keyword-Details. */
details.messung { border-top: 1px solid var(--bd); padding: 6px 0; }
details.messung > summary { list-style: none; cursor: pointer; display: flex; flex-wrap: wrap; gap: 4px 8px;
                            align-items: center; }
details.messung > summary::-webkit-details-marker { display: none; }
details.messung[open] > summary { margin-bottom: 6px; }
/* display: flex nimmt dem summary den nativen Aufklapp-Marker: eigener Marker (▸ zu, ▾ offen), 01.11.2026. Den nativen
   Marker setzen list-style und ::-webkit-details-marker wie bei den übrigen summary-Regeln zurück, sonst zeigt WebKit
   (Safari) zwei Dreiecke (Final-Review F5, 01.11.2026). */
details.messung > summary::before { content: "▸"; width: 1em; color: var(--mut); }
details.messung[open] > summary::before { content: "▾"; }
/* Nur die neueste Messung der SERP-Seite; der Block „SERP" der Tracking-Seite (section.panelblock.serpblock.messung) hat die
   Regel schon über .serpblock .serpfeatures. */
section.messung.neueste .serpfeatures, details.messung .serpfeatures { display: inline-flex; flex-wrap: wrap; gap: 4px; }
.hinweis.mehr .deckelhinweis { flex-basis: 100%; margin: 0 0 4px; font-size: 11.5px; text-align: left; }
.recherche-seite button.laedt { opacity: .7; cursor: progress; }
.serpfuss { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin-top: 6px; font-size: 11px; }
.serpwarten { padding: 22px 10px; }
@media (max-width: 1100px) {
  .chipleiste .stand.rechts { margin-left: 0; flex-basis: 100%; }
}

/* ---- Keyword-Datenbank (Stufe 9, Task 6; Spec 9) ----
   Vorlage: output/_intern/ranktracker-mockups/tp2/keyword_datenbank.html und shot_keyword_datenbank_*_1440.png. Die
   Tabelle nutzt ohne Panel die volle Breite (.einspaltig); mit Panel (?keyword=) teilt sie sich die Breite 50/50 und
   blendet Ausschmückungen aus (.nur-breit), damit das Keyword lesbar bleibt. Keywords werden nie gekürzt; die
   Unterzeile „Herkunft" steht klein hinter dem Keyword und bricht als Ganzes um. Nur neue Klassen. */
body.festehoehe main > .seitenkopf { flex: none; }
.keywords-seite { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.tracking-layout.einspaltig { grid-template-columns: minmax(0, 1fr); }
.keywords-liste > .chipleiste, .keywords-liste > .panel { flex: none; }
.keywords-liste.laedt { opacity: .55; transition: opacity .15s; cursor: progress; }
.keywords-layout.einspaltig .nur-schmal, .keywords-layout:not(.einspaltig) .nur-breit { display: none; }
details.kundenklappe .chipauswahl { gap: 4px 6px; align-items: center; max-height: 50vh; overflow: auto; }
table.rankings.datenbank { min-width: 0; }
table.rankings.datenbank col.c-check { width: 26px; }
table.rankings.datenbank col.c-kw { width: auto; }
table.rankings.datenbank col.c-land { width: 64px; }
table.rankings.datenbank col.c-zahl { width: 68px; }
table.rankings.datenbank col.c-trend { width: 140px; }
table.rankings.datenbank col.c-ppc { width: 46px; }
table.rankings.datenbank col.c-kd { width: 46px; }
table.rankings.datenbank col.c-intent { width: 104px; }
table.rankings.datenbank col.c-serps { width: 52px; }
.keywords-layout:not(.einspaltig) table.rankings.datenbank col.c-land { width: 36px; }
.keywords-layout:not(.einspaltig) table.rankings.datenbank col.c-zahl { width: 60px; }
.keywords-layout:not(.einspaltig) table.rankings.datenbank col.c-trend { width: 64px; }
.keywords-layout:not(.einspaltig) table.rankings.datenbank col.c-intent { width: 48px; }
.keywords-layout:not(.einspaltig) table.rankings.datenbank col.c-serps { width: 42px; }
table.datenbank.kompakt td, table.datenbank.kompakt th { padding: 4px 7px; line-height: 1.3; }
table.datenbank td.kwdb { white-space: normal; overflow: visible; text-overflow: clip; overflow-wrap: anywhere; }
table.datenbank td.kwdb a.kwlink { font-weight: 600; }
table.datenbank .unterzeile { display: inline-block; margin-left: 6px; font-size: 10.5px; line-height: 1.35;
                              color: var(--mut); }
table.datenbank .unterzeile b { font-weight: 600; color: var(--fg); }
table.datenbank .unterzeile a { color: inherit; }
table.datenbank .unterzeile a:hover b { color: var(--accent); text-decoration: underline; }
table.datenbank .unterzeile .marke { vertical-align: baseline; padding: 0 5px; font-size: 10px; }
table.datenbank td.gsczelle { white-space: normal; font-size: 11.5px; }
table.datenbank td.trendzelle { white-space: nowrap; }
table.datenbank tbody tr.gewaehlt td { background: color-mix(in srgb, var(--accent) 14%, transparent); }
table.datenbank tbody tr.gewaehlt td:first-child { box-shadow: inset 3px 0 var(--accent); }
.keywords-seite.bereinigt .sv-bereinigt { display: inline; }
.keywords-seite.bereinigt .sv-ads { display: none; }
.seitenleiste .knopf.klein { min-width: 110px; }

/* ---- Stufe 10, Task 6 (Spec 2026-10-11 Abschnitt 5): Spalte „Takt" der Tracking-Seite, Reiter der Keyword-Datenbank,
   Quelle der Ziel-URL auf der Vorschlagsseite und der Block „Tracking-Hebel" der System-Seite. Nur neue Regeln.
   Fix-Runde 1 (Ruling): Badge kompakt („W · 20"), die Takt-Spalte schmal und die Keyword-Spalte der Tabelle mit Takt
   (Klasse mit-takt, nur von der neuen Vorlage gesetzt) schmaler, damit die Standardauswahl samt SF-, SERP- und GSC-Spalte bei
   1440 px weiter ins halbe Fenster passt (geprüft in test_browser_tracking.py, kein waagrechter Überlauf). */
table.rankings.tracking col.c-takt { width: 52px; }
table.rankings.tracking.mit-takt col.c-kw { width: 158px; }   /* 14.10.: + 34 px der SF-Spalte */
/* Auftraggeber 14.10. („alles sauber lesbar"): ohne Zusatzspalten (Klasse kw-flex) bekommt die Keyword-Spalte die ganze
   übrige Breite, statt dass der Browser den Überschuss auf alle Spalten verteilt; die Mindestbreite der Tabelle ist die
   Spaltensumme mit der bisherigen Keyword-Breite (mit Takt 534 + 158 = 692 px, ohne 482 + 184 = 666 px), im halben Fenster
   bei 1440 px also wie bisher. Mit Zusatzspalten bleibt die feste Breite, das Fenster scrollt dann waagrecht. */
table.rankings.tracking.kw-flex col.c-kw { width: auto; }
table.rankings.tracking.kw-flex { min-width: 666px; }
table.rankings.tracking.kw-flex.mit-takt { min-width: 692px; }
.chipleiste .taktlegende { font-size: 11px; }
.marke.takt { max-width: none; overflow: visible; text-overflow: clip; font-variant-numeric: tabular-nums; }
.marke.optimiert { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 45%, var(--bd)); }
.chipleiste.dbreiter { gap: 8px; margin-bottom: 6px; }
.chip.filterchip.reiter { font-weight: 600; padding: 3px 12px; }
.marke.zielquelle, .marke.nichtlive { margin: 2px 4px 0 0; vertical-align: baseline; }
table.hebel tr.summe td { font-weight: 600; border-top: 1px solid var(--bd); }

/* ---- SERP-Checker (Stufe 11, Task 3; Spec 2026-10-11 Abschnitte 5 und 6) ----
   Vorlage: output/_intern/ranktracker-mockups/tp3/tp3.css und die Screenshots shot_serp*_1440.png; Farben nur über die
   Tokens (hell und dunkel). Nur neue Klassen bzw. Regeln unter .serpsuche, .serpkacheln, .serptabelle, table.serp.gross
   und .spaltenklappe - die Recherche und das Keyword-Panel bleiben unberührt. */
.serpsuche form.recherche.zeile { gap: 8px; }
/* Gerät als Umschalter: zwei Radio-Knöpfe in Chips; das Feld bleibt für Tastatur und Vorleser erreichbar. */
.geraetwahl { display: inline-flex; flex: none; gap: 4px; }
.geraetwahl .chip { position: relative; }
.geraetwahl .chip input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.geraetwahl .chip.aktiv { font-weight: 600; }
.geraetwahl .chip:focus-within { outline: 2px solid var(--accent); outline-offset: 1px; }
.serpsuche form.recherche.zeile button[name="sofort"] { flex: none; padding: 7px 12px; }
.chipleiste .chipgruppe { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px; }
/* Kopf und Kacheln der Ergebnis-Seite. */
.serpkopf.gross .kopfaktionen { flex-wrap: wrap; align-items: center; }
.serpkopf.gross .kopfaktionen form.serpaktion { display: inline-flex; margin: 0; }
.kacheln.serpkacheln { margin: 8px 0 10px; }
.kacheln.serpkacheln .kachel { min-height: 118px; }
.kacheln.serpkacheln .kachel.kdkachel dd { display: flex; align-items: center; justify-content: center; }
.kacheln.serpkacheln .kdring svg { width: 68px; height: 68px; }
.kacheln.serpkacheln .kdring .ringzahl { font-size: 18px; }
.kacheln.serpkacheln form.kdform { display: inline-flex; margin: 4px 0 0; }
.impactwert { font-size: 22px; font-weight: 700; }
.impactwert .meta { font-size: 12px; font-weight: 400; }
.impactchips { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 2px; }
.serpkunden { margin: 0 0 8px; }
.serpneu { padding: 10px 12px; }
/* Klappen „Spalten" und „Stände" im Kopf. */
.spaltenklappe { position: relative; }
.spaltenklappe > summary { list-style: none; cursor: pointer; }
.spaltenklappe > summary::-webkit-details-marker { display: none; }
.spaltenklappe .spaltenliste { position: absolute; right: 0; top: 30px; z-index: 40; min-width: 240px; display: flex;
                               flex-direction: column; gap: 6px; background: var(--panel); border: 1px solid var(--bd);
                               border-radius: 6px; padding: 10px; box-shadow: 0 8px 20px rgba(0, 0, 0, .28);
                               font-size: 12px; }
.spaltenklappe .spaltenliste label { display: flex; gap: 6px; align-items: center; }
.spaltenklappe .spaltenliste .meta { margin: 0; }
.spaltenklappe.staende .spaltenliste { min-width: 460px; }
.spaltenklappe.staende table tr.gewaehlt td { background: color-mix(in srgb, var(--accent) 14%, transparent); }
/* Ergebnistabelle: zwei Zeilen in der Seitenzelle (Titel fett, darunter Domain fett und Pfad grau). */
table.serp.gross td.seitenzelle { max-width: 0; overflow: hidden; }
table.serp.gross td.seitenzelle .titel { display: block; font-weight: 600; max-width: none; }
table.serp.gross td.seitenzelle .urlzeile { display: flex; align-items: center; gap: 5px; min-width: 0; }
table.serp.gross td.seitenzelle .url { display: block; flex: 0 1 auto; min-width: 0; font-size: 11px; color: var(--mut);
                                       max-width: none; }
table.serp.gross td.seitenzelle .url b { color: var(--fg); font-weight: 600; }
table.serp.gross td.seitenzelle .marke { flex: none; }
table.serp.gross td.seitenzelle .marke.kunde { margin-left: 6px; }
table.serp.gross td, table.serp.gross th { vertical-align: middle; }
table.serp.gross col.c-breit-metrik { width: 78px; }
table.serp.gross col.c-titel { width: 26%; }
table.serp.gross tbody tr td { height: 38px; }
table.serp.gross td.featurezelle { white-space: normal; font-size: 11.5px; line-height: 1.4; }
table.serp.gross td.sp-titel { max-width: 0; overflow: hidden; }
table.serp.gross td.sp-titel .kuerzen { display: block; max-width: none; }
/* Spaltenwahl (static/serp.js, localStorage rt_serp_spalten): ohne-sp-<name> am Block blendet die Spalte aus; mit der
   Spalte „Titel" zeigt die Seitenzelle nur Domain und Pfad. */
.ohne-sp-spam .sp-spam, .ohne-sp-backlinks .sp-backlinks, .ohne-sp-typ .sp-typ, .ohne-sp-titel .sp-titel { display: none; }
.serptabelle:not(.ohne-sp-titel) .titel-in-seite { display: none; }
.serptabelle .serpfuss { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin-top: 8px; }
.serptabelle .serpfuss .rechts { margin-left: auto; }
.serptabelle .serpfuss form.serpaktion { display: inline-flex; gap: 6px; margin: 0; }
/* Kostenknöpfe während des Abrufs (static/serp.js): gesperrt, mit Spinner. */
.serpchecker button.laedt { opacity: .7; cursor: progress; }
.serpchecker .serpfehler.vomscript { margin: 6px 0; font-size: 11.5px; }
.serpwartebereich .aktionsleiste { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.serpwartebereich form.serpaktion { display: inline-flex; margin: 0; }
@media (max-width: 900px) {
  .geraetwahl { flex: 1 1 160px; }
  .kacheln.serpkacheln { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .spaltenklappe .spaltenliste, .spaltenklappe.staende .spaltenliste { right: auto; left: 0; min-width: 0;
                                                                        max-width: 92vw; }
}

/* ---- Site-Explorer (Stufe 12a, Task 3; Spec 2026-10-11 Abschnitte 6.1 und 7) ----
   Vorlage: output/_intern/ranktracker-mockups/tp4a/tp4a.css und shot_explorer_*_1440.png; Farben nur über die Tokens
   (hell und dunkel). Einstieg: Modus-Umschalter, Zuordnung, Verlauf mit Favicon-Marke; Kopf der Analyse. Task 4 und 5
   ergänzen die Klassen der Übersicht und der Keyword-Tabelle. */
.explorersuche form.recherche.zeile { gap: 8px; }
/* Modus als Umschalter (Radio-Knöpfe in Chips wie .geraetwahl): der gewählte Chip folgt dem Feld auch ohne Script. */
.explorersuche .modiwahl .chip:has(input:checked) { background: var(--accent-tief); border-color: var(--accent-tief);
                                                    color: #fff; font-weight: 600; }
/* Zuordnung: Kunde und Zweck als zwei schmale Auswahlfelder nebeneinander. */
.explorersuche .zuordnung { display: inline-flex; flex: none; gap: 6px; }
.explorersuche form.recherche.zeile .zuordnung select { width: auto; max-width: 180px; }
.explorersuche .zuordnung .comboknopf { min-width: 160px; }
/* Verlauf: kleine Favicon-Marke vor dem Ziel. */
table.verlauf .marke-domain { width: 18px; height: 18px; border-radius: 4px; font-size: 10px; vertical-align: middle;
                              margin-right: 4px; }
table.verlauf .marke-domain img.favicon { padding: 1px; border-radius: 4px; }
/* Kopf einer Analyse (Mockup explorer_uebersicht.html). */
.explorerkopf h1 { display: flex; align-items: center; gap: 8px; }
.explorerkopf h1 .marke-domain { width: 28px; height: 28px; font-size: 13px; }
.explorerkopf .kopfaktionen { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.explorerkopf .stand .marke { vertical-align: middle; padding: 0 6px; font-size: 11px; }
.panel.analysefertig { padding: 12px; }
@media (max-width: 900px) {
  .explorersuche .zuordnung { flex: 1 1 100%; }
  .explorersuche form.recherche.zeile .zuordnung select { flex: 1 1 0; max-width: none; }
}

/* ---- Site-Explorer, Übersicht „Allgemein" (Stufe 12a, Task 4; Spec 2026-10-11 Abschnitte 6.2 und 7) ----
   Vorlage: output/_intern/ranktracker-mockups/tp4a/tp4a.css und shot_explorer_uebersicht_*_1440.png (Klassen 1:1,
   ergänzt um die Formulare der Kostenknöpfe). --anteil tönt die Balkenzellen (Standort, Intention, Backlinks, TLD);
   hell ein dunklerer Akzent, damit die Fläche auf Weiß sichtbar bleibt. */
:root { --anteil: rgba(88, 166, 255, .16); }
[data-theme="light"] { --anteil: rgba(59, 130, 196, .14); }
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) { --anteil: rgba(59, 130, 196, .14); }
}
.explorer .chipgruppe { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.explorer .chipgruppe .chipbeschriftung { font-size: 10px; text-transform: uppercase; letter-spacing: .05em;
                                          color: var(--mut); }
.explorer form.aktion.inline { display: inline-flex; align-items: center; margin: 0; vertical-align: middle; }
.explorerkopf .stand form.beobachten { display: inline; margin: 0 0 0 6px; }
.explorerkopf .stand form.beobachten input { vertical-align: middle; margin: 0 2px 0 0; }
.explorerkopf .kopfaktionen form.aktion { margin: 0; }
.explorer .panel.warn.teilhinweis { margin: 0 0 8px; padding: 6px 10px; font-size: 12px;
                                    border-color: color-mix(in srgb, var(--acht) 45%, var(--bd)); }
.explorer .panel.warn.teilhinweis form.aktion { margin-left: 8px; }
.kacheln.explorerkacheln { margin: 8px 0 10px; }
.kacheln.explorerkacheln.drei { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.kacheln.explorerkacheln .kachel { min-height: 150px; }
.kacheln.explorerkacheln .kachel dd .paar { display: flex; flex-wrap: wrap; gap: 6px; align-items: baseline;
                                            font-size: 13px; font-weight: 400; margin-bottom: 4px; }
.kacheln.explorerkacheln .kachel dd .paar b { font-size: 15px; }
.kacheln.explorerkacheln .kachel dd .paar b.gross { font-size: 22px; }
.kacheln.explorerkacheln .kachel dd .minitab { width: 100%; font-size: 11px; margin: 4px 0 6px;
                                               border-collapse: collapse; }
.kacheln.explorerkacheln .kachel dd .minitab th,
.kacheln.explorerkacheln .kachel dd .minitab td { padding: 1px 4px; border-bottom: 1px solid var(--bd); font-weight: 400;
                                                  color: var(--mut); }
.kacheln.explorerkacheln .kachel dd .minitab th { text-transform: uppercase; letter-spacing: .03em; font-size: 10px; }
.kachel dd a.kachellink { color: inherit; text-decoration: none; border-bottom: 1px dotted var(--accent); }
.kachel dd a.kachellink:hover { color: var(--accent); }
.zweispaltig.explorer { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 12px;
                        align-items: start; }
.zweispaltig.explorer .spalte { min-width: 0; display: flex; flex-direction: column; gap: 12px; }
.zweispaltig.explorer .panelblock { margin: 0; }
.zweispaltig.explorer .backlinkbloecke { display: flex; flex-direction: column; gap: 12px; }
.zweispaltig.explorer .rechts table, .zweispaltig.explorer .rechts .wrap { min-width: 0; width: 100%; }
.zweispaltig.explorer .rechts table th, .zweispaltig.explorer .rechts table td { white-space: nowrap; }
.explorerchart .explorerchartbox { height: 240px; padding: 6px; background: var(--bg); }
.explorerchart .gruppenchartbox { height: 170px; padding: 6px; background: var(--bg); }
.explorerchart .gruppenblock { margin-top: 10px; }
.explorerchart .gruppenblock h3 { margin: 0; font-size: 13px; }
.chipgruppe.metriken { margin: 6px 0 8px; }
/* Das Kästchen bleibt fokussierbar (Tab, Leertaste schaltet), ist aber nur visuell versteckt (sr-only-Muster); der
   Chip zeigt den Fokus. */
.chipgruppe.metriken .chip { position: relative; }
.chipgruppe.metriken .chip input { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0;
                                   overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
.chipgruppe.metriken .chip:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 1px; }
.chipgruppe.metriken .chip b { font-weight: 600; margin-left: 2px; }
.chipgruppe.metriken .chip.aktiv b { color: #fff; }
.konkurrenten .konkurrentenchartbox { height: 260px; padding: 6px; background: var(--bg); }
.konkurrenten .punkt { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 6px;
                       vertical-align: middle; }
.konkurrenten .punkt.zielpunkt { background: var(--fg); }
table.konktab td { white-space: nowrap; }
table.konktab td.domainzelle .marke-domain { width: 18px; height: 18px; font-size: 10px; margin-right: 4px;
                                             vertical-align: middle; }
table.konktab tr.mehr { display: none; }
table.konktab tr.mehr.offen { display: table-row; }
.ueberschneidung { display: inline-block; height: 8px; width: 120px; background: var(--bd); border-radius: 4px;
                   overflow: hidden; vertical-align: middle; }
.ueberschneidung i { display: block; height: 100%; background: var(--accent); }
td.balkenzelle { background-repeat: no-repeat; }
table.kompakt tr.trenner td { padding: 0; height: 6px; border: 0; }
.formtab.inaktiv { opacity: .5; cursor: default; }
.explorer .marktform { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 8px 0 4px; }
.explorer .marktform .combobox { flex: 1 1 130px; min-width: 0; }
.explorer .marktform .combobox .comboliste { width: 280px; max-width: 80vw; }
.explorer .blockfuss { margin-top: 6px; }
.explorer .blockfuss form.aktion { display: inline-flex; margin: 0; vertical-align: middle; }
/* Kostenknöpfe während des Abrufs (static/explorer.js): gesperrt, wartend. */
.explorer button.laedt { opacity: .7; cursor: progress; }
@media (max-width: 900px) {
  .kacheln.explorerkacheln.drei, .zweispaltig.explorer { grid-template-columns: minmax(0, 1fr); }
  .explorerkopf .kopfaktionen { justify-content: flex-start; }
}
/* Standortnamen dürfen umbrechen („Vereinigtes Königreich"), damit die schmale rechte Spalte alle Zahlen zeigt. */
.zweispaltig.explorer .rechts table.standorttab td.standortname { white-space: normal; }

/* ---- Site-Explorer, Reiter Organische Keywords (Stufe 12a, Task 5; Spec 2026-10-11 Abschnitt 6.3) ----
   Vorlage: output/_intern/ranktracker-mockups/tp4a/tp4a.css (table.explorerkw, Spaltenbreiten, Traffic-Balken) und
   shot_explorer_keywords_*_1440.png. Spaltenwahl über ohne-sp-<name> am Block [data-spalten] (static/explorer.js,
   localStorage rt_explorer_spalten). Farben nur über die Tokens. */
table.explorerkw col.c-check { width: 26px; }
table.explorerkw col.c-kw { width: 260px; }
table.explorerkw col.c-land { width: 44px; }
table.explorerkw col.c-sf { width: 40px; }
table.explorerkw col.c-zahl { width: 86px; }
table.explorerkw col.c-kd { width: 46px; }
table.explorerkw col.c-cpc { width: 60px; }
table.explorerkw col.c-traffic { width: 118px; }
table.explorerkw col.c-pos { width: 84px; }
table.explorerkw col.c-akt { width: 130px; }
table.explorerkw col.c-datum { width: 92px; }
table.explorerkw td { white-space: nowrap; }
table.explorerkw td.kwzelle, table.explorerkw td.urlzelle { overflow: hidden; text-overflow: ellipsis; }
/* Die Zelle bleibt eine Tabellenzelle (td.kwzelle ist sonst flex und verschiebt die Zeilenlinie); den Inhalt
   ordnet .kwinhalt. */
table.explorerkw td.kwzelle { display: table-cell; }
table.explorerkw .kwinhalt { display: flex; align-items: center; gap: 6px; min-width: 0; }
table.explorerkw .kwinhalt a { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis;
                               white-space: nowrap; }
table.explorerkw .kwinhalt .marke { flex: 0 0 auto; }
table.explorerkw td.urlzelle a.kuerzen, table.explorerkw td.urlzelle span.kuerzen { display: inline-block;
                                                                                    max-width: 100%;
                                                                                    vertical-align: middle; }
table.explorerkw td.urlzelle .marke.weitere { font-size: 10px; vertical-align: middle; }
table.explorerkw td.datum { color: var(--mut); font-size: 11px; }
table.explorerkw td.poszelle .plus, table.explorerkw td.poszelle .minus,
table.explorerkw td.poszelle .neutral { font-size: 10.5px; padding: 0 4px; }
table.explorerkw td.knopfzelle .knopf.klein { padding: 1px 6px; }
.trafficbalken { display: inline-block; height: 6px; width: 48px; margin-right: 6px; opacity: .8;
                 background: var(--bd); border-radius: 3px; overflow: hidden; vertical-align: middle; }
.trafficbalken i { display: block; height: 100%; background: var(--accent); }
table.explorerkw .marke.ctrmarke { font-size: 9.5px; padding: 0 3px; margin-left: 3px; }
.ohne-sp-land .sp-land, .ohne-sp-sf .sp-sf, .ohne-sp-cpc .sp-cpc,
.ohne-sp-aktualisiert .sp-aktualisiert { display: none; }
.explorerkeywords .chipleiste.zeilenkopf .chipgruppe { margin-right: 6px; }
.explorerkeywords .mangoolshinweis { margin: 0 0 8px; padding: 6px 10px; font-size: 12px; }
.explorerkeywords .serpfuss .rechts { margin-left: auto; }
.explorerkeywords .serpfuss input.tagsfeld { width: 140px; }
.explorerkeywords .serpfuss .combobox.kundenwahl { display: inline-block; min-width: 170px; }
.explorerkeywords .serpfuss .combobox.kundenwahl .comboknopf { padding: 3px 8px; font-size: 12px; }
/* Am Seitenende klappt die Kundenliste nach oben auf. */
.explorerkeywords .serpfuss .combobox.kundenwahl .comboliste { top: auto; bottom: calc(100% + 4px); width: 260px; }
.explorerkeywords .serpfuss .uebernahmehinweis { color: var(--schlecht); }
/* Die Filterleiste steht rechts in der Chipzeile und klappt deshalb nach links auf. */
.explorerkeywords details.filterklappe .filterleiste { left: auto; right: 0; }
@media (max-width: 900px) {
  table.explorerkw { min-width: 1000px; }
  .explorerkeywords .serpfuss .rechts { margin-left: 0; flex-basis: 100%; }
  /* Schmal: die Filterleiste steht unter der Chipzeile im Fluss statt schwebend (sonst ragt sie aus dem Bild). */
  .explorerkeywords details.filterklappe[open] { flex-basis: 100%; }
  .explorerkeywords details.filterklappe .filterleiste { position: static; width: auto; max-width: none;
                                                        margin-top: 6px; }
  .explorerkeywords .spaltenklappe .spaltenliste { min-width: 240px; }
}

/* ---- Site-Explorer, Reiter Backlink-Profil und Listen (Stufe 12b, Task 4; Spec 2026-10-12 Abschnitt 6) ----
   Vorlage: output/_intern/ranktracker-mockups/tp4b/tp4b.css und shot_explorer_backlinks_*_1440.png. Die Listen
   (table.explorerliste, static/explorer.js Abschnitt 8) erben die Zellen-Regeln von table.explorerkw; Spaltenwahl über
   ohne-sp-<name> am Block [data-spalten] (localStorage rt_explorer_liste_spalten_<name>). Badges über .kd .kd-1 bis
   .kd-6 (DA/PA) und .marke ok | acht | stopp (Spam). Farben nur über die Tokens. */
.explorerbacklinks .unterchips { margin: 6px 0 10px; }
.explorerbacklinks .unterchips .chipgruppe { gap: 4px; }
.kacheln.explorerkacheln.fuenf { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; }
.kacheln.explorerkacheln.fuenf .kachel { min-height: 110px; }
.kacheln.explorerkacheln.fuenf .kachel dd .meta { display: block; }
.explorerbacklinks .backlinkbloecke.dreispaltig { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
                                                  gap: 12px; align-items: start; margin-bottom: 10px; }
.explorerbacklinks .backlinkbloecke.dreispaltig .panelblock { margin: 0; }
.explorerbacklinks .backlinkbloecke.dreispaltig table, .explorerbacklinks .backlinkbloecke.dreispaltig .wrap {
  min-width: 0; width: 100%; }
.explorerbacklinks .backlinkbloecke.dreispaltig td { white-space: nowrap; }
.explorerbacklinks .listenblock .chipleiste.zeilenkopf .chipgruppe { margin-right: 6px; }
.explorerbacklinks .listenblock .teilhinweis form.aktion { margin-left: 8px; }
/* Die Filterleiste steht rechts in der Chipzeile und klappt deshalb nach links auf. */
.explorerbacklinks .listenblock details.filterklappe .filterleiste { left: auto; right: 0; }
.explorerbacklinks .listenfuss .rechts { margin-left: auto; }
table.explorerliste col.c-quelle { width: 300px; }
table.explorerliste col.c-domain { width: 280px; }
table.explorerliste col.c-da { width: 48px; }
table.explorerliste col.c-spam { width: 60px; }
table.explorerliste col.c-rank { width: 88px; }
table.explorerliste col.c-text { width: 240px; }
table.explorerliste col.c-knopf { width: 70px; }
table.explorerliste col.c-gesehen { width: 128px; }
table.explorerliste col.c-anteil { width: 76px; }
table.explorerliste col.c-tld { width: 60px; }
table.explorerliste col.c-plattform { width: 110px; }
table.explorerliste col.c-art { width: 96px; }
table.explorerliste td.quellzelle { white-space: normal; overflow: hidden; }
table.explorerliste td.quellzelle > .meta { display: block; }
table.explorerliste td.quellzelle .kwinhalt a .meta.inline { margin-left: 3px; }
table.explorerliste td.quellzelle .marke-domain { width: 18px; height: 18px; font-size: 10px; flex: 0 0 auto; }
table.explorerliste td.ankerzelle { white-space: normal; overflow: hidden; }
table.explorerliste td.ankerzelle .anker { font-weight: 500; overflow-wrap: anywhere; }
table.explorerliste td.ankerzelle .meta { display: block; overflow: hidden; text-overflow: ellipsis;
                                          white-space: nowrap; }
table.explorerliste td.textzelle { white-space: normal; font-size: 11px; }
table.explorerliste td.datum .meta { display: block; }
table.explorerliste th .meta { display: block; font-weight: 400; text-transform: none; letter-spacing: 0;
                               white-space: nowrap; }
table.explorerliste td.sp-rank, table.explorerliste th.sp-rank { font-size: 11px; }
table.explorerliste .marke { font-size: 10.5px; }
.ohne-sp-rank .sp-rank, .ohne-sp-text .sp-text, .ohne-sp-plattform .sp-plattform { display: none; }
/* Vorrat für Link-Lücke und Linkziele (Tasks 5 und 6 der Stufe 12b, Mockups tp4b/explorer_luecke.html und
   linkziele.html): Spalten je Ziel, die hinterlegte Kundenspalte, Linkbroker-Marke und -Zelle, Aktionen. */
.kacheln.explorerkacheln.vier { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
table.explorerliste col.c-lzdomain { width: 320px; }
table.explorerliste col.c-status { width: 92px; }
table.explorerliste col.c-lb { width: 290px; }
table.explorerliste col.c-aktionen { width: 160px; }
table.explorerliste col.c-ziel { width: 104px; }
table.explorerliste col.c-ziele { width: 170px; }
table.explorerliste th.zielkopf { font-size: 10.5px; text-transform: none; letter-spacing: 0; }
table.explorerliste td.zielspalte { font-variant-numeric: tabular-nums; }
table.explorerliste th.kundenspalte,
table.explorerliste td.kundenspalte { background: color-mix(in srgb, var(--accent) 9%, transparent); }
table.explorerliste td.domainzelle { white-space: normal; }
table.explorerliste td.domainzelle > .meta { display: block; }
table.explorerliste td.lbzelle { white-space: nowrap; }
table.explorerliste td.aktionen { white-space: nowrap; }
table.explorerliste td.aktionen .knopf { margin-right: 3px; }
table.explorerliste input.notiz { width: 100%; }
.marke.lb { border-color: var(--accent); color: var(--accent); }
.zielmarken .marke.ziel { padding: 0 5px; font-size: 10px; }
.luecke-ziele { display: flex; flex-wrap: wrap; gap: 6px; padding: 6px 0; }
.luecke-ziele .chip { cursor: pointer; }
@media (max-width: 1200px) {
  .kacheln.explorerkacheln.fuenf { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .kacheln.explorerkacheln.fuenf, .kacheln.explorerkacheln.vier, .explorerbacklinks .backlinkbloecke.dreispaltig {
    grid-template-columns: minmax(0, 1fr); }
  table.explorerliste { min-width: 1000px; }
  .explorerbacklinks .listenfuss .rechts { margin-left: 0; flex-basis: 100%; }
  .explorerbacklinks .listenblock details.filterklappe[open] { flex-basis: 100%; }
  .explorerbacklinks .listenblock details.filterklappe .filterleiste { position: static; width: auto; max-width: none;
                                                                       margin-top: 6px; }
}

/* ---- Site-Explorer, Link-Lücke und Kundenseite Linkziele (Stufe 12b, Task 5; v18) ----
   Vorlage: output/_intern/ranktracker-mockups/tp4b/explorer_luecke.html und linkziele.html (tp4b.css); der Vorrat aus
   Task 4 (Spalten c-lzdomain, c-status, c-lb, c-aktionen, c-ziel, Kundenspalte, .marke.ziel, .luecke-ziele) gilt
   weiter. Farben nur über die Tokens. */
.luecke-ziele label.chip:has(input:checked) { background: var(--accent-tief); border-color: var(--accent-tief);
                                              color: #fff; font-weight: 600; }
.luecke-ziele label.chip input { margin: 0 3px 0 0; vertical-align: middle; }
.luecke-ziele label.chip:has(input:checked) .meta { color: inherit; opacity: .75; }
table.explorerliste.luecke col.c-domain { width: 250px; }
table.explorerliste.luecke col.c-knopf { width: 96px; }
.luecke-ziele button.primaer { margin-left: 4px; }
.explorer .luecke-modus { margin: 0 0 6px; }
.explorer .luecke-hinweis form.zuordnung { display: inline-flex; gap: 6px; margin-left: 8px; }
.explorer .luecke-hinweis .combobox.kundenwahl { display: inline-block; min-width: 170px; }
table.explorerliste col.c-ueberschneidung { width: 84px; }
table.explorerliste th.kundenspalte { font-size: 10.5px; text-transform: none; letter-spacing: 0; text-align: right; }
table.explorerliste td.zahl > .meta { display: block; }
.ohne-sp-tld .sp-tld { display: none; }
.explorer .auswahlfuss .rechts { margin-left: auto; }
.explorer .auswahlfuss .auswahlhinweis { color: var(--schlecht); }
.linkzieleseite .listenblock .chipleiste.zeilenkopf .chipgruppe { margin-right: 6px; }
.linkzieleseite .listenblock details.filterklappe .filterleiste { left: auto; right: 0; }
.linkzieleseite form.linkzielneu .seedfeld { width: 230px; }
.linkzieleseite form.linkzielneu .notizfeld { width: 140px; padding: 7px 9px; }
.linkzieleseite .kacheln.explorerkacheln.vier .kachel dd .meta { display: block; }
table.explorerliste.linkziele td.domainzelle .meta .marke.ziel { margin-left: 3px; }
table.explorerliste.linkziele form.statusform { gap: 3px; }
@media (max-width: 900px) {
  .linkzieleseite form.linkzielneu { flex-wrap: wrap; }
  .linkzieleseite form.linkzielneu .seedfeld, .linkzieleseite form.linkzielneu .notizfeld { width: 100%; }
  .linkzieleseite .listenblock details.filterklappe[open] { flex-basis: 100%; }
  .linkzieleseite .listenblock details.filterklappe .filterleiste { position: static; width: auto; max-width: none;
                                                                    margin-top: 6px; }
  .explorer .auswahlfuss .rechts { margin-left: 0; flex-basis: 100%; }
}

/* ---- Site-Explorer, Top-Seiten und Bezahlte Suche (Stufe 12b, Task 6; v19) ----
   Vorlage: output/_intern/ranktracker-mockups/tp4b/explorer_seiten.html und explorer_bezahlt.html (tp4b.css). Beide
   Reiter tragen .explorerseiten; die Listen erben table.explorerkw und table.explorerliste (Task 4). Spaltenwahl über
   ohne-sp-<name> (Wert, Bezahlt, Änderungszähler). Farben nur über die Tokens. */
.explorerseiten .kacheln.explorerkacheln.vier .kachel dd .meta { display: block; }
.explorerseiten .listenblock .chipleiste.zeilenkopf .chipgruppe { margin-right: 6px; }
.explorerseiten .listenblock details.filterklappe .filterleiste { left: auto; right: 0; }
.explorerseiten .listenfuss .rechts { margin-left: auto; }
table.explorerliste.seiten col.c-wert { width: 104px; }
table.explorerliste.seiten col.c-posgruppe { width: 52px; }
table.explorerliste.seiten col.c-topkw { width: 230px; }
table.explorerliste.seiten col.c-bezahlt { width: 70px; }
table.explorerliste.seiten col.c-knopf { width: 92px; }
table.explorerliste.seiten td.trafficzelle .meta { display: block; text-align: right; }
table.explorerliste.seiten td.kwzelle { white-space: normal; }
table.explorerliste.seiten td.kwzelle div { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
table.explorerliste.seiten td.kwzelle .meta { display: block; }
table.explorerliste.seiten td .plus, table.explorerliste.seiten td .minus { font-size: 10.5px; padding: 0 4px; }
table.explorerliste.bezahlt td.anzeige { white-space: normal; overflow: hidden; }
table.explorerliste.bezahlt td.anzeige .meta { display: block; overflow: hidden; text-overflow: ellipsis; }
table.explorerliste tfoot tr.summenzeile td { font-weight: 600; border-top: 1px solid var(--bd); }
.ohne-sp-wert .sp-wert, .ohne-sp-paid .sp-paid, .ohne-sp-aenderungen .sp-aenderungen { display: none; }
@media (max-width: 900px) {
  .explorerseiten .listenfuss .rechts { margin-left: 0; flex-basis: 100%; }
  .explorerseiten .listenblock details.filterklappe[open] { flex-basis: 100%; }
  .explorerseiten .listenblock details.filterklappe .filterleiste { position: static; width: auto; max-width: none;
                                                                    margin-top: 6px; }
}

/* ---- Site-Explorer, Kundenziel und GSC-Chip „Organische Keywords" (Stufe 14, Task 4; Spec 2026-10-13, 5) ----
   Vorlage: output/_intern/ranktracker-mockups/stufe14/explorer_keywords_gsc.html und
   shot_explorer_keywords_gsc_*_1440.png. Quellen-Chips „DataForSEO n | GSC n" mit Zeitraum und Stand-Zeile unter
   dem Kopf (.unterchips.quellen), die Marke „Kunde: …" als Link (a.marke.kunde), die Seiten-Einschränkung
   (.seitenfilter), die Liste table.explorerliste.gsc (erbt table.explorerkw und table.explorerliste); Spaltenwahl
   über ohne-sp-<name> (CTR, Δ, weitere Seiten), eine unsichere Position (unter 10 Impressionen) gedämpft. Farben nur
   über die Tokens. */
.explorer .unterchips.quellen { margin: 6px 0 8px; }
.explorer .unterchips.quellen .chipgruppe { margin-right: 6px; }
a.marke.kunde:hover { text-decoration: none; border-color: var(--gut); }
.explorer p.seitenfilter { margin: 0 0 8px; }
.explorer .marke.seitenfilter a { margin-left: 4px; color: var(--mut); }
.explorer .marke.seitenfilter a:hover { color: var(--schlecht); text-decoration: none; }
table.explorerliste.gsc col.c-ctr { width: 72px; }
table.explorerliste.gsc col.c-delta { width: 72px; }
table.explorerliste.gsc col.c-knopf { width: 70px; }
table.explorerliste.gsc td.poszelle .schwach { color: var(--mut); font-weight: 400; }
table.explorerliste.gsc td.sp-delta .plus, table.explorerliste.gsc td.sp-delta .minus { font-size: 10.5px;
                                                                                         padding: 0 4px; }
.ohne-sp-ctr .sp-ctr, .ohne-sp-delta .sp-delta, .ohne-sp-seiten .sp-seiten { display: none; }
/* Stufe 14, Task 5: GSC-Chip der Top-Seiten (Vorlage stufe14/explorer_seiten_gsc.html und
   shot_explorer_seiten_gsc_*_1440.png): table.explorerliste.seiten.gsc erbt die Top-Seiten (Balken mit Anteil) und den
   GSC-Chip (CTR, Δ); Suchanfragen-Zahl schmal, der Knopf „Suchanfragen" breiter als „SERP", die Top-Suchanfrage
   zweizeilig (Klicks und Position darunter). */
table.explorerliste.seiten.gsc col.c-anfragen { width: 80px; }
table.explorerliste.seiten.gsc col.c-topkw { width: 250px; }
table.explorerliste.seiten.gsc col.c-knopf { width: 108px; }
table.explorerliste.seiten.gsc td.kwzelle .kwinhalt { display: block; overflow: hidden; text-overflow: ellipsis;
                                                      white-space: nowrap; }
/* Ohne Chips steht „Filter" gleich hinter dem Titel: die Filterleiste öffnet nach rechts (die Top-Seiten öffnen sie
   wegen der Status-Chips nach links und schnitten sie hier am linken Rand ab). */
.explorerseiten .listenblock.liste-gsc_seiten details.filterklappe .filterleiste { left: 0; right: auto; }

/* ---- Content-Lücke (Stufe 13, Tasks 3 und 4; Spec 2026-10-12 Abschnitt 6, Mockups tp5/) ----
   Vorlage: output/_intern/ranktracker-mockups/tp5/tp5.css und shot_content_luecke_*_1440.png. Einstieg
   (content_luecke.html: .luecke-suche, Verlauf mit Konkurrenten-Chips), Ergebnis (content_luecke_ergebnis.html, im
   Block .explorer: Warteblock mit Spinner, Matrix mx-0 bis mx-4 als Anteil am größten Wert, Kacheln je Konkurrent,
   Keyword-Liste table.luecke-kw mit Spaltengruppen je Konkurrent: Trennlinie .gruppe, Position mit Rang .rankt
   hellblau, ohne Rang .leer, Intent-Kurzbadge .intentkurz). Farben als Tokens: dunkel Standard, hell über
   data-theme="light" bzw. die Systemeinstellung (Muster --anteil). Spaltenwahl über ohne-sp-<name> (Intention, CPC und
   SF wie die Keyword-Liste, dazu Konkurrenten, beste Position, Traffic); ohne Traffic ersetzt der einspaltige
   Gruppenkopf .nur-ohne-traffic den zweispaltigen (colspan lässt sich in CSS nicht ändern). */
:root { --mx-1: rgba(255, 177, 92, .12); --mx-2: rgba(255, 177, 92, .26); --mx-3: rgba(255, 177, 92, .45);
        --mx-4: rgba(255, 177, 92, .7); --mx-4-schrift: #1a1000; --rankt: rgba(59, 130, 246, .2);
        --intent-i: #8ab4f8; --intent-i-rand: #3b5a8a; --intent-k: #f5a079; --intent-k-rand: #7a4a35;
        --intent-t: #7fd69a; --intent-t-rand: #2f6a44; --stern: #e3b341; }
[data-theme="light"] { --mx-1: #fff6e8; --mx-2: #ffe6c2; --mx-3: #ffcf8f; --mx-4: #ffb15c; --mx-4-schrift: #3a2400;
                       --rankt: #e9f2ff; --intent-i: #2f6fd6; --intent-i-rand: #b9cff2; --intent-k: #c2410c;
                       --intent-k-rand: #f1c2a6; --intent-t: #15803d; --intent-t-rand: #b7e1c3; --stern: #b07d00; }
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) { --mx-1: #fff6e8; --mx-2: #ffe6c2; --mx-3: #ffcf8f; --mx-4: #ffb15c;
                                   --mx-4-schrift: #3a2400; --rankt: #e9f2ff; --intent-i: #2f6fd6;
                                   --intent-i-rand: #b9cff2; --intent-k: #c2410c; --intent-k-rand: #f1c2a6;
                                   --intent-t: #15803d; --intent-t-rand: #b7e1c3; --stern: #b07d00; }
}
/* Einstieg */
.luecke-suche form.recherche { display: flex; flex-direction: column; gap: 8px; }
.luecke-suche .zeile { display: flex; align-items: center; gap: 8px; flex-wrap: nowrap; }
.luecke-suche .feldlabel { min-width: 104px; font-size: 12px; color: var(--mut); }
.luecke-suche .zeile .seedfeld { flex: 0 0 auto; min-width: 0; max-width: none; }
.luecke-suche .hauptfeld { width: 420px; }
.luecke-suche .konkfeld { width: 190px; }
.luecke-suche .zeile .combobox { flex: 0 0 auto; width: auto; min-width: 0; }
.luecke-suche .zahlfeldlabel { font-size: 12px; white-space: nowrap; }
.luecke-suche .zahlfeldlabel .zahlfeld { width: 56px; margin-left: 4px; }
table.verlauf td.chips .chip { margin: 1px 2px 1px 0; font-size: 11px; }
/* Ergebnis: Kopf, Warteblock */
.luecke-ergebnis .seitenkopf form.kundenwahl { gap: 4px; margin-left: 4px; }
.luecke-ergebnis .seitenkopf form.kundenwahl select,
.luecke-liste form.auswahlfuss select { padding: 1px 6px; font-size: 11.5px; width: auto; }
.luecke-ergebnis .seitenkopf .stand .chip { margin: 0 2px 0 0; font-size: 11px; }
.warteblock .warten { display: flex; gap: 14px; align-items: center; padding: 18px; }
.warteblock .spinner { flex: 0 0 auto; width: 22px; height: 22px; border: 3px solid var(--bd);
                       border-top-color: var(--accent); border-radius: 50%;
                       animation: luecke-dreh .9s linear infinite; }
@keyframes luecke-dreh { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .warteblock .spinner { animation: none; } }
/* Matrix und Kacheln */
.matrixzeile-layout { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 14px;
                      align-items: start; }
table.matrix { border-collapse: separate; border-spacing: 2px; font-size: 12.5px; }
table.matrix th { font-weight: 500; text-align: left; white-space: nowrap; padding: 4px 8px; }
table.matrix th.matrixkopf { text-align: right; font-size: 11px; text-transform: none; letter-spacing: 0; }
table.matrix td { padding: 6px 10px; text-align: right; min-width: 72px; border-radius: 4px;
                  vertical-align: middle; }
table.matrix td.diagonale { background: transparent; }
table.matrix td.mx-0 { color: var(--mut); }
table.matrix td.mx-1 { background: var(--mx-1); }
table.matrix td.mx-2 { background: var(--mx-2); }
table.matrix td.mx-3 { background: var(--mx-3); }
table.matrix td.mx-4 { background: var(--mx-4); color: var(--mx-4-schrift); }
.kacheln.luecke-kacheln { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.luecke-kacheln .kachel .kachelkopf { font-weight: 500; font-size: 12.5px; white-space: nowrap; overflow: hidden;
                                      text-overflow: ellipsis; }
.luecke-kacheln .kachel .kachelwert { font-size: 22px; font-weight: 600; margin: 4px 0 2px; }
.luecke-kacheln .kachel .kachelfuss { margin-top: 6px; }
/* Keyword-Liste */
h2 .info { cursor: help; font-weight: 400; margin-left: 4px; }
.luecke-liste .chipleiste.zeilenkopf .chipgruppe { margin-right: 6px; }
.luecke-liste details.filterklappe .filterleiste select.klein { width: auto; }
table.luecke-kw col.c-intent { width: 44px; }
table.luecke-kw col.c-sf { width: 44px; }
table.luecke-kw col.c-sv { width: 84px; }
table.luecke-kw col.c-kd { width: 50px; }
table.luecke-kw col.c-cpc { width: 60px; }
table.luecke-kw col.c-konk { width: 56px; }
table.luecke-kw col.c-beste { width: 64px; }
table.luecke-kw col.c-serp { width: 58px; }
table.luecke-kw col.c-pos { width: 62px; }
table.luecke-kw col.c-traffic { width: 74px; }
table.luecke-kw th.unterkopf { font-size: 10.5px; text-transform: none; letter-spacing: 0; font-weight: 400; }
table.luecke-kw th.zielkopf { text-align: left; font-weight: 500; text-transform: none; letter-spacing: 0;
                              font-size: 12px; padding-bottom: 2px; white-space: nowrap; overflow: hidden;
                              text-overflow: ellipsis; }
table.luecke-kw th.zielkopf .marke-domain { width: 16px; height: 16px; font-size: 10px; line-height: 16px;
                                            vertical-align: -3px; }
table.luecke-kw th.gruppe, table.luecke-kw td.gruppe { border-left: 1px solid var(--bd); }
table.luecke-kw td.zielspalte.rankt { background: var(--rankt); }
table.luecke-kw td.zielspalte.rankt b { font-size: 12.5px; }
table.luecke-kw td.zielspalte.leer, table.luecke-kw td.zielspalte.traffic { color: var(--mut); }
table.luecke-kw td.zielspalte.traffic { font-size: 11.5px; }
table.luecke-kw a.serpknopf { padding: 1px 6px; font-size: 11px; }
table.luecke-kw .stern { color: var(--stern); font-size: 11px; }
table.luecke-kw th.nur-ohne-traffic { display: none; }
.ohne-sp-traffic table.luecke-kw th.nur-ohne-traffic { display: table-cell; }
.intentkurz { display: inline-block; min-width: 18px; height: 18px; line-height: 16px; border-radius: 4px;
              font-size: 11px; font-weight: 600; text-align: center; border: 1px solid var(--bd); color: var(--mut); }
.intentkurz.intent-i { color: var(--intent-i); border-color: var(--intent-i-rand); }
.intentkurz.intent-k { color: var(--intent-k); border-color: var(--intent-k-rand); }
.intentkurz.intent-t { color: var(--intent-t); border-color: var(--intent-t-rand); }
/* Stufe 13, Abschluss-Fixwelle: eigene Klasse statt .tagfeld (die Hüllen der Tracking-Seite, Datenbank und Recherche). */
.luecke-tagfeld { width: 120px; }
.ohne-sp-intent .sp-intent, .ohne-sp-ziele .sp-ziele, .ohne-sp-beste .sp-beste,
.ohne-sp-traffic .sp-traffic { display: none; }
@media (max-width: 900px) {
  .matrixzeile-layout { grid-template-columns: minmax(0, 1fr); }
  .luecke-suche .zeile { flex-wrap: wrap; }
  .luecke-suche .hauptfeld, .luecke-suche .konkfeld { width: 100%; }
  .luecke-liste details.filterklappe[open] { flex-basis: 100%; }
  .luecke-liste details.filterklappe .filterleiste { position: static; width: auto; max-width: none; margin-top: 6px; }
}

/* ---- Mangools-Ernte (Stufe 15, Task 6; Mockup output/_intern/ranktracker-mockups/stufe15/ernte_tab.html) ----
   Kacheln der Pools mit Balken (genutzt im Verhältnis zum Tageskontingent beider Keys) und roter Marke am Beginn der
   Reserve; .unter färbt den Balken, wenn manuelle Nutzung einen Key unter die Reserve gedrückt hat. Die Farben der
   Diagramm-Reihen stehen in static/ernte.js (wie die übrigen Charts der App). */
.ernte-pools .kachel dd .paar { display: block; }
.ernte-pools .balken { position: relative; height: 8px; background: var(--bd); border-radius: 4px; margin: 6px 0; }
.ernte-pools .balken span { display: block; height: 100%; max-width: 100%; background: var(--accent); border-radius: 4px; }
.ernte-pools .balken.unter span { background: var(--acht); }
.ernte-pools .balken i { position: absolute; top: -3px; width: 2px; height: 14px; margin-left: -1px;
                         background: var(--schlecht); }
.ernte h2 .meta, .ernte-system h2 .meta { font-weight: 400; }
.ernte-system .panel { padding: 12px 14px 4px; }
.ernte-system .panel h2 { margin-top: 4px; }
.ernte-system .kacheln .kachel { background: var(--bg); }
.ernte .chipleiste .chipgruppe { margin-right: 10px; }
.ernte .chart.erntechart { height: 300px; margin: 0 0 6px; }
.ernte .seitenkopf .kopfaktionen form.aktion { margin: 0; }
.ernte section h3 { margin-top: 14px; }
.ernte table.ernte-runden td .meta { white-space: nowrap; }
.ernte table.ernte-tage td, .ernte table.ernte-arten td.zahl, .ernte table.ernte-kunden td.zahl { white-space: nowrap; }

/* ---- Site-Explorer, Mangools-Chip des Backlink-Profils (Stufe 15, Task 7; Mockup
   output/_intern/ranktracker-mockups/stufe15/explorer_backlinks_mangools.html) ----
   Chipgruppe „Quelle" vorn im Listenkopf, Spalten Follow und Status der LinkMiner-Liste, SiteProfiler-Kacheln mit
   Mini-Verlauf (sparkline in der Akzentfarbe). */
.listenkopf .chipgruppe.quellen { margin-right: 6px; }
table.explorerliste col.c-follow { width: 92px; }
table.explorerliste col.c-lmstatus { width: 84px; }
table.explorerliste.linkminer col.c-gesehen { width: 168px; }
table.explorerliste.linkminer td.ankerzelle .kwinhalt { white-space: nowrap; }
table.explorerliste.linkminer td.ankerzelle .anker { flex: 0 1 auto; min-width: 0; max-width: 60%; overflow: hidden;
                                                     text-overflow: ellipsis; }
.explorerbacklinks .siteprofiler .kachel { min-height: 0; }
.explorerbacklinks .siteprofiler .kachel dd .meta { display: block; }
.explorerbacklinks .siteprofiler .kachel .sparkline { color: var(--accent); height: 28px; margin: 4px 0 2px; }

/* ---- SERP-Historie (Stufe 15, Task 8; Mockup output/_intern/ranktracker-mockups/stufe15/serp_historie.html) ----
   Reiter „Ergebnis | Historie" der Ergebnis-Seite des SERP-Checkers; Tabelle Abruf × Platz, eigene Domain blau
   hinterlegt und fett, Mitbewerber rot hinterlegt (dieselben Töne wie im Mockup, durchscheinend für hell und dunkel);
   dieselben Klassen im Abschnitt „SERP-Historie" des Keyword-Panels. Die Farben der Linien stehen in static/serp.js. */
.chipleiste.serpreiter { gap: 8px; margin: 2px 0 10px; }
#serp-historie-ziel.laedt { opacity: .55; transition: opacity .15s; cursor: progress; }
.serp-historie { margin: 0 0 12px; }
.serp-historie .historiekopf h2 { margin: 4px 0 8px; }
.serp-historie .historiekopf h2 .meta { display: inline; font-weight: 400; }
.serp-historie .chipleiste { margin-bottom: 8px; }
.serp-historie .chipleiste .chipgruppe { margin-right: 10px; }
.serp-historie .chipleiste .rechts { margin-left: auto; }
table.historietabelle { table-layout: fixed; }
table.historietabelle col.c-abruf { width: 104px; }
table.historietabelle col.c-quelle { width: 112px; }
table.historietabelle th, table.historietabelle td { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
table.historietabelle td { font-size: 12px; vertical-align: middle; }
table.historietabelle td.eigen { background: rgba(37, 99, 235, .14); }
table.historietabelle td.mitbewerber { background: rgba(220, 38, 38, .09); }
table.historietabelle td.leer { color: var(--mut); }
table.historietabelle tbody tr.gewaehlt td:first-child { box-shadow: inset 3px 0 var(--accent); font-weight: 600; }
/* Top 20: die Tabelle wird breiter als das Fenster und scrollt in ihrem Rahmen, statt jede Domain abzuschneiden. */
table.historietabelle.top-20 { min-width: 2100px; }
table.historietabelle.top-20 td { font-size: 11.5px; }
.marke.mitbewerber { color: var(--fg); border-color: color-mix(in srgb, var(--schlecht) 45%, var(--bd)); }
.serp-historie .historielegende { margin: 8px 0; }
.serp-historie .chart.historiechart { height: 260px; padding: 6px; }
.panelblock.serphistorie { margin-top: 10px; }
.panelblock.serphistorie .serpkopf { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin: 0 0 6px; }
.panelblock.serphistorie .serpkopf h2 { margin: 0; }
.panelblock.serphistorie .serpkopf .detailaktionen { margin-left: auto; }
table.historietabelle.kompakt col.c-abruf { width: 88px; }
table.historietabelle.kompakt col.c-quelle { width: 104px; }
table.historietabelle.kompakt col.c-eigen { width: 52px; }
table.historietabelle.kompakt td { font-size: 11.5px; padding: 5px 7px; }
table.historietabelle.kompakt th { padding: 6px 7px; }
.panelblock.serphistorie > .meta { margin-top: 6px; }

/* Speicherplatz auf der System-Seite (Sofortmaßnahmen 15.10.2026, Review G3): ok grün, knapp gelb, kritisch rot. */
.platz-ok { color: var(--gut); font-weight: 600; }
.platz-knapp { color: var(--acht); font-weight: 600; }
.platz-kritisch { color: var(--schlecht); font-weight: 700; }

/* Stufe 17: KI-Antworten (Übersicht, Fragen, Frage, Wettbewerber, Berichte). Vorlage: output/_intern/ranktracker-mockups/tp6/tp6.css;
   .marke.schlecht entfällt (der Bestand kennt .marke.stopp), .tp6-mut heißt hier .ki-mut. Fix-Runde 1: .marke.ok und .marke.acht entfallen
   (der Bestand genügt); jede Regel auf eine schon vorhandene Klasse (.marke.*, .chips .chip, .quellen, td.trendzelle) steht unter .kiseite,
   dem Wurzelelement der KI-Seiten, damit die übrigen Seiten unverändert bleiben. Neue KI-Klassen (.ki-*, .kauf-zeile usw.) gelten global. */
.chipleiste.unterreiter { margin: 0 0 12px; }
.ki-kacheln { grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); }
.ki-kacheln .kachel.ki-gesamt { grid-column: span 2; border-color: var(--accent); }
.ki-kacheln .kachel.beobachtet dt::before { content: "◆ "; color: var(--acht); }
.ki-kacheln .kachel .meta.kontingent { white-space: normal; }
.ki-delta { font-weight: 600; } .ki-delta.plus { color: var(--gut); } .ki-delta.minus { color: var(--schlecht); } .ki-delta.null { color: var(--mut); font-weight: 400; } .ki-delta.ohne { color: var(--mut); font-weight: 400; }
.ki-charts { gap: 14px; align-items: start; } .ki-charts .panelchart { height: 260px; }
.ki-mut { color: var(--mut); font-size: 11.5px; }
table.bewegungen col.c-marke { width: 96px; } table.bewegungen col.c-frage { width: auto; } table.bewegungen col.c-engine { width: 110px; } table.bewegungen col.c-url { width: 300px; } table.bewegungen col.c-hinweis { width: 190px; }
table.fehltbei col.c-frage { width: 46%; } table.fehltbei col.c-engine { width: 110px; } table.fehltbei col.c-urls { width: auto; }
ol.quellenliste .marke-domain { width: 18px; height: 18px; line-height: 18px; font-size: 10px; margin: 0; border-radius: 4px; }
.ki-einstellungen form.recherche { display: flex; flex-wrap: wrap; gap: 14px; align-items: flex-end; }
.ki-einstellungen .feld { display: flex; flex-direction: column; gap: 4px; }
.ki-einstellungen .feld > span:first-child { font-size: 10px; text-transform: uppercase; letter-spacing: .05em; color: var(--mut); }
.ki-einstellungen .feld select, .ki-einstellungen .feld input { background: var(--bg); color: var(--fg); border: 1px solid var(--bd); border-radius: 6px; padding: 6px 9px; font: inherit; }
.ki-einstellungen .feld input.zahlfeld { width: 64px; }
.ki-einstellungen .kostenvorschau { max-width: 420px; } .ki-einstellungen .kostenvorschau b { font-size: 13px; }
.kiseite .marke.quelle { font-size: 10.5px; } .kiseite .marke.quelle.q-bing_ki { border-color: var(--acht); color: var(--acht); } .kiseite .marke.quelle.q-manuell { border-color: var(--accent); color: var(--accent); }
.kiseite .marke.intent { font-size: 10.5px; min-width: 44px; text-align: center; } .kiseite .marke.intent.kauf { border-color: var(--accent); color: var(--accent); font-weight: 600; } .kiseite .marke.intent.wissen { opacity: .7; }
.kachel .kauf-zeile { color: var(--accent); }
.kiseite .marke.klein { font-size: 10px; padding: 0 5px; } .kiseite .marke.wett { border-color: var(--schlecht); color: var(--schlecht); } .kiseite .marke.leer { opacity: .6; }
table.ki-fragen th.ki-kopf, table.ki-wettbewerber th.ki-kopf { font-size: 10.5px; text-transform: none; letter-spacing: 0; text-align: center; }
table.ki-fragen col.c-check { width: 34px; } table.ki-fragen col.c-frage { width: auto; } table.ki-fragen col.c-quelle { width: 76px; } table.ki-fragen col.c-vol { width: 160px; } table.ki-fragen col.c-engine { width: 84px; } table.ki-fragen col.c-datum { width: 84px; }
td.ki-zelle { font-size: 15px; font-weight: 700; } td.ki-zelle sub { font-size: 9px; font-weight: 600; margin-left: 1px; }
td.ki-zelle.zit { color: var(--gut); background: color-mix(in srgb, var(--gut) 12%, transparent); }
td.ki-zelle.erw { color: var(--acht); } td.ki-zelle.nicht { color: var(--schlecht); opacity: .75; } td.ki-zelle.leer, td.ki-zelle.keine { color: var(--mut); font-weight: 400; font-size: 12px; }
td.ki-zelle.keine { font-size: 14px; }
.kiseite td.trendzelle .sparkline.trend { width: 80px; height: 20px; color: var(--accent); vertical-align: middle; margin-right: 6px; }
td.fragezelle a { font-weight: 500; } td.fragezelle .meta.inline { display: block; font-size: 10.5px; }
tr.vorschlag td { color: var(--mut); } tr.vorschlag td.kwzelle { color: var(--fg); }
tr.trennzeile td { background: var(--panel); border-top: 2px solid var(--bd); padding: 6px 8px; }
.serpfuss .eigenefrage { margin-left: auto; display: flex; gap: 6px; align-items: center; } .serpfuss .fragefeld { width: 360px; }
.serpfuss .eigenefrage input { background: var(--bg); color: var(--fg); border: 1px solid var(--bd); border-radius: 6px; padding: 4px 7px; font-size: 12px; }
table.ki-verlauf th { white-space: nowrap; } table.ki-verlauf td.ki-zelle { font-size: 13px; }
.ki-antwort h2 .marke { margin-left: 8px; vertical-align: 2px; }
.antwortlayout { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 18px; align-items: start; }
.antwort p { margin: 0 0 6px; line-height: 1.55; font-size: 13px; max-width: 80ch; }
.antwort mark { border-radius: 3px; padding: 0 2px; background: transparent; font-weight: 600; }
.antwort mark.marke { color: var(--gut); box-shadow: inset 0 -2px 0 var(--gut); } .antwort mark.wett { color: var(--schlecht); box-shadow: inset 0 -2px 0 color-mix(in srgb, var(--schlecht) 60%, transparent); }
.kiseite .quellen h3 { font-size: 11px; text-transform: uppercase; letter-spacing: .05em; color: var(--mut); margin: 0 0 6px; } .kiseite .quellen h3 + .chips, .kiseite .quellen ol + h3 { margin-top: 10px; }
ol.quellenliste { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
ol.quellenliste li { display: grid; grid-template-columns: 18px 22px minmax(0, 1fr); column-gap: 6px; align-items: center; padding: 4px 6px; border-radius: 6px; border: 1px solid var(--bd); }
ol.quellenliste li .pos { color: var(--mut); font-size: 11px; text-align: right; } ol.quellenliste li a { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
ol.quellenliste li .meta { grid-column: 3; font-size: 10.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } ol.quellenliste li .marke { grid-column: 3; justify-self: start; margin-top: 2px; }
ol.quellenliste li.eigen { border-color: var(--gut); background: color-mix(in srgb, var(--gut) 10%, transparent); } ol.quellenliste li.wett { border-color: color-mix(in srgb, var(--schlecht) 50%, var(--bd)); }
select.laufwahl { background: var(--bg); color: var(--fg); border: 1px solid var(--bd); border-radius: 6px; padding: 1px 4px; font: inherit; font-size: 12px; }
table.ki-wettbewerber tr.eigen td { background: color-mix(in srgb, var(--gut) 10%, transparent); } table.ki-wettbewerber col.c-domain { width: 300px; } table.ki-wettbewerber col.c-engine { width: 84px; }
table.ki-wettbewerber col.c-zahl { width: 90px; } table.ki-wettbewerber col.c-delta { width: 120px; } table.ki-wettbewerber td .ki-delta.ohne { font-size: 11px; } /* 120 statt 70 px: „kein Vergleichswert“ lief in die Fragen-Spalte (Betriebsprüfung 19.10.2026, P6) */ table.ki-wettbewerber td.chips .chip.klein { padding: 0 6px; font-size: 11px; margin: 1px 2px 1px 0; }
table.fehltbei td.chips .chip.klein { font-size: 11px; margin: 1px 3px 1px 0; max-width: 300px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: middle; }
table.fehltbei td.chips .chip.klein .marke-domain { width: 14px; height: 14px; line-height: 14px; font-size: 9px; vertical-align: -2px; }
.berichte-kacheln { grid-template-columns: repeat(4, minmax(0, 1fr)); }
table.ki-berichte th.gruppe, table.ki-berichte td.kennung { border-left: 1px solid var(--bd); } table.ki-berichte th.unterkopf { font-size: 10.5px; text-transform: none; letter-spacing: 0; font-weight: 400; }
table.ki-berichte col.c-kunde { width: 260px; } table.ki-berichte col.c-bis { width: 120px; } table.ki-berichte col.c-status { width: 190px; } table.ki-berichte col.c-drop { width: 230px; }
table.ki-berichte td { vertical-align: top; } table.ki-berichte .meta.block { display: block; font-size: 10.5px; margin-top: 2px; }
.dropzone { border: 1.5px dashed var(--bd); border-radius: 8px; padding: 8px 10px; text-align: center; color: var(--mut); cursor: pointer; display: flex; flex-direction: column; gap: 2px; }
.dropzone:hover, .dropzone.aktiv { border-color: var(--accent); color: var(--fg); background: color-mix(in srgb, var(--accent) 8%, transparent); } .dropzone .dz-text { font-weight: 600; font-size: 12px; }
p.meta.grenze { margin: 8px 0 0; } p.meta.grenze code { font-size: 11px; }
.kiseite .chips .chip { margin: 2px 4px 2px 0; }