/* WilfaScope – Gestaltung nach dem wilfatec Markenhandbuch 2026
   (Desktop\Claude\Design\Wilfatec Designmaterial\wt-markenhandbuch-2026.pdf):
   - Farben RGB: Nacht, Schnee, Korn, Dodge. Schnee-Text nur auf Nacht, auf anderen Farbflächen Weiß.
   - Rechtecke mit großem Eckenradius, Pillen nur für Knöpfe.
   - Verläufe zwischen den Blautönen für den Kopfbereich, Notizblock-Raster in Schnee, nie dominant.
   - Schrift: Author (Hauptschrift), für Technisches TBJ Interval. Beide werden nicht eingebettet
     (Lizenz für Weitergabe ungeklärt): Author, wenn installiert, sonst Segoe UI; statt TBJ Cascadia Mono.
   Zustandsfarben ok/warnung/alarm aus wilfatec ui/dashboard/design-system.md, nur für Zustände. */
:root {
  --nacht: #00163d;
  --schnee: #edf2fd;
  --korn: #4186ff;
  --dodge: #005efe;
  --dodge-tief: #0049c7;
  --weiss: #ffffff;

  --text: var(--nacht);
  --text-gedimmt: #4a5878;
  --linie: #d3def5;
  --linie-kraeftig: #b9c9ec;

  --ok: #2fbf71;
  --ok-text: #157a46;
  --warnung: #ffb020;
  --warnung-flaeche: #fff5df;
  --alarm: #e5484d;
  --alarm-text: #b3242a;
  --alarm-flaeche: #fdecec;

  --radius-flaeche: 20px;
  --radius-element: 12px;
  --radius-klein: 6px;

  --schrift: "Author Variable", "Author", "Segoe UI Variable Text", "Segoe UI", system-ui, sans-serif;
  --schrift-technik: "Cascadia Mono", Consolas, ui-monospace, monospace;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; } /* sonst überschreiben Klassen mit display das hidden-Attribut */

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  color: var(--text);
  font: 400 15px/1.5 var(--schrift);
  font-variant-numeric: tabular-nums;
  background-color: var(--weiss);
  /* Notizblock-Raster in Schnee */
  background-image:
    linear-gradient(var(--schnee) 1px, transparent 1px),
    linear-gradient(90deg, var(--schnee) 1px, transparent 1px);
  background-size: 32px 32px;
}

a { color: var(--dodge); text-decoration: none; }
a:hover { text-decoration: underline; }
button, input, select { font: inherit; color: inherit; }
strong, b { font-weight: 500; }

:focus-visible { outline: 2px solid var(--dodge); outline-offset: 2px; }

.sr {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* Dachzeile (Headline 3): Versalien, weite Laufweite */
.dachzeile {
  margin: 0 0 6px; font-size: 12px; font-weight: 400; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--text-gedimmt);
}
/* Notiz: technische Angaben in der Technik-Schrift */
.notiz, .unterzeile {
  font-family: var(--schrift-technik); font-weight: 300; font-size: 12px; line-height: 1.55; color: var(--text-gedimmt);
}
/* Längere Hilfetexte in der Hauptschrift, sonst zu zäh zu lesen */
.hilfe { font-size: 13px; line-height: 1.5; color: var(--text-gedimmt); }

/* ---------- Kopfbereich mit Verlauf ---------- */
.kopf {
  color: var(--weiss);
  background:
    radial-gradient(55% 140% at 92% -20%, rgba(0, 94, 254, 0.95) 0%, rgba(0, 94, 254, 0) 70%),
    radial-gradient(40% 110% at 62% 125%, rgba(65, 134, 255, 0.6) 0%, rgba(65, 134, 255, 0) 72%),
    radial-gradient(35% 90% at 0% 0%, rgba(0, 94, 254, 0.35) 0%, rgba(0, 94, 254, 0) 70%),
    var(--nacht);
}
.kopf :focus-visible { outline-color: var(--weiss); }
.kopf-leiste, .kopf-buehne { max-width: 1320px; margin: 0 auto; padding: 0 32px; }
.kopf-leiste { display: flex; align-items: center; gap: 28px; min-height: 72px; flex-wrap: wrap; }

.marke { display: inline-flex; align-items: center; gap: 6px; color: var(--weiss); margin-left: -8px; }
.marke:hover { text-decoration: none; }
.marke img { display: block; }
.marke-name { font-size: 22px; font-weight: 300; letter-spacing: 0.01em; }
.marke-name span { font-weight: 500; color: var(--korn); }

.hauptnav { display: flex; gap: 18px; }
.hauptnav a {
  color: rgba(255, 255, 255, 0.72); padding: 24px 6px 22px; border-bottom: 2px solid transparent; font-weight: 400;
}
.hauptnav a.aktiv { color: var(--weiss); border-bottom-color: var(--korn); }
.hauptnav a:hover { color: var(--weiss); text-decoration: none; }

.kopf-rechts { margin-left: auto; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 12px 0; }

.modus { display: inline-flex; border: 1px solid rgba(255, 255, 255, 0.4); border-radius: 999px; padding: 3px; }
.modus button {
  border: 0; background: transparent; color: rgba(255, 255, 255, 0.85); padding: 5px 14px;
  border-radius: 999px; cursor: pointer; font-size: 13px; font-weight: 400;
}
.modus button[aria-pressed="true"] { background: var(--weiss); color: var(--dodge); font-weight: 500; }
.modus button:hover:not([aria-pressed="true"]) { color: var(--weiss); background: rgba(255, 255, 255, 0.12); }

/* Sekundärer Knopf auf Farbfläche: weiße Kontur-Pille */
.knopf-kopf {
  border: 1px solid rgba(255, 255, 255, 0.55); background: transparent; color: var(--weiss);
  border-radius: 999px; padding: 6px 14px; cursor: pointer; font-size: 13px;
  display: inline-flex; align-items: center; gap: 8px;
}
.knopf-kopf:hover { background: rgba(255, 255, 255, 0.12); border-color: var(--weiss); }
.punkt { width: 8px; height: 8px; border-radius: 50%; background: rgba(255, 255, 255, 0.6); flex: none; }
.punkt.ok { background: var(--ok); }
.punkt.warnung { background: var(--warnung); }
.punkt.alarm { background: var(--alarm); }

.kopf-buehne { padding-top: 28px; padding-bottom: 36px; }
.kopf-buehne .dachzeile { color: rgba(255, 255, 255, 0.78); }
.kopf-titel { margin: 0 0 22px; font-size: 40px; line-height: 1.12; font-weight: 300; letter-spacing: -0.01em; }
.kopf-titel strong { font-weight: 500; }

.suche { display: flex; gap: 10px; max-width: 860px; }
.suche input, .suche select {
  border: 0; border-radius: var(--radius-element); background: var(--weiss); color: var(--text); height: 50px;
}
.suche input { flex: 1; min-width: 0; padding: 0 18px; font-size: 16px; }
.suche input::placeholder { color: #7a87a3; }
.suche select { padding: 0 12px; }
.suche input:focus, .suche select:focus { outline: 3px solid rgba(255, 255, 255, 0.55); outline-offset: 0; }

/* ---------- Knöpfe: immer Pillen ---------- */
.knopf {
  border: 1px solid var(--linie-kraeftig); background: var(--weiss); color: var(--nacht);
  border-radius: 999px; padding: 9px 20px; cursor: pointer; font-weight: 500; font-size: 14px;
  display: inline-flex; align-items: center; gap: 8px; white-space: nowrap;
}
.knopf:hover { border-color: var(--nacht); }
.knopf.primaer { background: var(--dodge); border-color: var(--dodge); color: var(--weiss); }
.knopf.primaer:hover { background: var(--dodge-tief); border-color: var(--dodge-tief); }
.knopf.hell { background: var(--weiss); border-color: var(--weiss); color: var(--dodge); height: 50px; padding: 0 28px; font-size: 15px; }
.knopf.hell:hover { background: var(--schnee); }
.knopf.klein { padding: 6px 15px; font-size: 13px; }
.knopf.gefahr { color: var(--alarm-text); }
.knopf.gefahr:hover { border-color: var(--alarm-text); }
.knopf:disabled { opacity: 0.55; cursor: not-allowed; }

.link-knopf {
  border: 0; background: none; padding: 0; color: var(--dodge); cursor: pointer; font-weight: 500; text-align: left;
}
.link-knopf:hover { text-decoration: underline; }

/* ---------- Seite ---------- */
.seite { max-width: 1320px; margin: 0 auto; padding: 28px 32px 8px; }

.meldungen { display: grid; gap: 10px; margin-bottom: 20px; }
.meldungen:empty { display: none; }
.meldung {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  border-radius: var(--radius-element); padding: 14px 18px; background: var(--schnee);
}
.meldung .meldung-text { flex: 1; min-width: 240px; }
.meldung .meldung-text strong { display: block; font-weight: 500; }
.meldung .meldung-aktionen { display: flex; gap: 8px; flex-wrap: wrap; }
.meldung.info strong { color: var(--dodge); }
.meldung.warnung { background: var(--warnung-flaeche); }
.meldung.alarm { background: var(--alarm-flaeche); color: var(--alarm-text); }
.meldung.ok { background: #e6f7ee; }
.meldung ul { margin: 6px 0 0; padding-left: 18px; }

/* Zustand „nicht echt“: bewusst in der Zustandsfarbe, damit niemand Beispielwerte weitergibt */
.beispiel-band {
  background: var(--warnung); color: var(--nacht); font-weight: 500; border-radius: var(--radius-element);
  padding: 10px 18px; display: flex; gap: 10px; align-items: center; flex-wrap: wrap;
}
.beispiel-band span { font-weight: 400; }

.inhalt { display: grid; gap: 20px; }

.titelzeile { display: flex; align-items: flex-end; gap: 16px; flex-wrap: wrap; padding: 4px 0; }
.domain-titel { margin: 0; font-size: 30px; line-height: 1.2; font-weight: 300; word-break: break-word; }
.domain-titel strong { font-weight: 500; }
.unterzeile { margin: 6px 0 0; }
.titelzeile .titel-aktionen { margin-left: auto; display: flex; gap: 8px; flex-wrap: wrap; }

/* Flächen */
.karte { background: var(--schnee); border-radius: var(--radius-flaeche); padding: 22px 24px; min-width: 0; }
.karte h3 {
  margin: 0 0 14px; font-size: 17px; font-weight: 400; display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
}
.karte h3 .hinweis { font-family: var(--schrift-technik); font-weight: 300; color: var(--text-gedimmt); font-size: 12px; }

/* Kennzahlen als einzelne Flächen, die erste auf Nacht */
.kennzahlen { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; }
.kennzahl { background: var(--schnee); border-radius: var(--radius-flaeche); padding: 18px 20px; min-width: 0; }
.kennzahl .name { display: block; font-size: 13px; color: var(--text-gedimmt); }
.kennzahl .wert { display: flex; align-items: center; gap: 10px; font-size: 30px; font-weight: 500; line-height: 1.25; margin: 4px 0 2px; }
.kennzahl .zusatz { font-size: 12.5px; color: var(--text-gedimmt); }
.kennzahl.dunkel { background: var(--nacht); color: var(--schnee); }
.kennzahl.dunkel .name, .kennzahl.dunkel .zusatz { color: rgba(237, 242, 253, 0.72); }
.kennzahl.dunkel .staerke .spur { stroke: rgba(237, 242, 253, 0.18); }
.kennzahl.dunkel .staerke .wertbogen { stroke: var(--korn); }

.kennzahlen.vier { grid-template-columns: repeat(4, minmax(0, 1fr)); }
/* Wettbewerbslücken: Spalten je Wettbewerber, „–“ für „rankt dort nicht“ */
td.wettbewerber-spalte { white-space: nowrap; }
.leer-wert { color: var(--text-gedimmt); }
.raster-2-1.oben { align-items: start; }

.raster-2-1 { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 20px; }
.raster-1-1 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px; }

/* Diagramm */
.reiter { display: inline-flex; gap: 6px; margin-left: auto; }
.reiter button {
  border: 1px solid var(--linie-kraeftig); background: transparent; border-radius: 999px;
  padding: 3px 12px; font-size: 12.5px; cursor: pointer; color: var(--nacht);
}
.reiter button[aria-pressed="true"] { background: var(--nacht); color: var(--schnee); border-color: var(--nacht); }
.diagramm { position: relative; min-height: 240px; }
.diagramm svg { display: block; width: 100%; overflow: visible; }
.diagramm .achse { fill: var(--text-gedimmt); font-family: var(--schrift-technik); font-size: 11px; font-weight: 300; }
.diagramm .gitter { stroke: var(--weiss); stroke-width: 1.5; }
.diagramm .linie { fill: none; stroke: var(--dodge); stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; }
.diagramm .flaeche { fill: var(--korn); opacity: 0.18; }
.diagramm .markierung { stroke: var(--nacht); stroke-width: 1; stroke-dasharray: 3 4; opacity: 0.45; }
.diagramm .punkt-svg { fill: var(--weiss); stroke: var(--dodge); stroke-width: 2.5; }
.diagramm .tooltip {
  position: absolute; pointer-events: none; background: var(--nacht); color: var(--schnee);
  border-radius: 8px; padding: 6px 10px; font-size: 12.5px; white-space: nowrap;
  transform: translate(-50%, -100%); margin-top: -12px;
}
.diagramm .tooltip[hidden] { display: none; }
.diagramm-leer { color: var(--text-gedimmt); padding: 40px 0; text-align: center; }

/* Positionsverteilung */
.balken-liste { display: grid; gap: 12px; }
.balken-zeile { display: grid; grid-template-columns: 88px minmax(0, 1fr) 56px; align-items: center; gap: 12px; }
.balken-zeile .bereich { font-family: var(--schrift-technik); font-weight: 300; font-size: 12px; color: var(--text-gedimmt); white-space: nowrap; }
.balken-zeile .spur { background: var(--weiss); border-radius: 999px; height: 12px; overflow: hidden; }
.balken-zeile .fuellung { background: var(--dodge); height: 100%; border-radius: 999px; }
.balken-zeile:nth-child(n+3) .fuellung { background: var(--korn); }
.balken-zeile .anzahl { text-align: right; font-weight: 500; }

/* Domain-Stärke */
.staerke svg { display: block; }
.staerke .spur { stroke: var(--weiss); }
.staerke .wertbogen { stroke: var(--dodge); }

/* Tabellen */
.tabellen-kopf { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-bottom: 10px; }
.tabellen-kopf input {
  border: 1px solid var(--linie-kraeftig); background: var(--weiss); border-radius: var(--radius-element);
  padding: 7px 14px; min-width: 220px;
}
.tabelle-rahmen { overflow-x: auto; }
table { border-collapse: collapse; width: 100%; font-size: 13.5px; }
th, td {
  padding: 9px 10px; border-bottom: 1px solid var(--linie); text-align: left; vertical-align: top; white-space: nowrap;
}
th {
  color: var(--text-gedimmt); font-weight: 400; font-size: 11.5px; letter-spacing: 0.1em; text-transform: uppercase;
  border-bottom-color: var(--linie-kraeftig);
}
td.keyword { white-space: normal; min-width: 150px; font-weight: 500; }
th.zahl, td.zahl { text-align: right; }
th button { all: unset; cursor: pointer; display: inline-flex; gap: 4px; align-items: center; }
th button:focus-visible { outline: 2px solid var(--dodge); outline-offset: 2px; }
th[aria-sort="ascending"] button::after { content: "▲"; font-size: 8px; color: var(--dodge); }
th[aria-sort="descending"] button::after { content: "▼"; font-size: 8px; color: var(--dodge); }
tbody tr:hover td { background: rgba(255, 255, 255, 0.65); }
td .url {
  color: var(--dodge); display: inline-block; max-width: 260px; overflow: hidden;
  text-overflow: ellipsis; vertical-align: bottom;
}
.mehr { margin-top: 12px; }

.marke-klein {
  display: inline-block; border-radius: var(--radius-klein); padding: 1px 8px; font-size: 11.5px;
  background: var(--weiss); color: var(--nacht);
}
.merkmale { display: inline-flex; gap: 4px; flex-wrap: wrap; }
.marke-klein.dofollow { color: var(--dodge); }
.marke-klein.nofollow { color: var(--text-gedimmt); }
.marke-klein.neu { color: var(--ok-text); }
.marke-klein.defekt { color: var(--alarm-text); }
td.breit { white-space: normal; min-width: 240px; }
td.umbruch { white-space: normal; min-width: 110px; max-width: 260px; }
.quelle { display: grid; gap: 1px; }
.quelle-titel { font-weight: 500; }
td .quelle .url { max-width: 340px; font-size: 12.5px; }

/* Google-Top 10 */
.serp { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.serp li { display: flex; gap: 12px; align-items: baseline; min-width: 0; }
.serp-pos { font-family: var(--schrift-technik); font-weight: 300; color: var(--text-gedimmt); width: 22px; text-align: right; flex: none; }
.serp-text { display: grid; min-width: 0; }
.serp-titel { font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.serp-text .link-knopf { font-weight: 400; font-size: 13px; justify-self: start; }

.veraenderung.hoch { color: var(--ok-text); }
.veraenderung.runter { color: var(--alarm-text); }
.veraenderung.neu { color: var(--dodge); font-weight: 500; }
.kd { display: inline-flex; align-items: center; gap: 6px; justify-content: flex-end; }

/* Leer- und Ladezustand */
.leer { padding: 40px 32px; }
.leer p { color: var(--text-gedimmt); margin: 10px 0 18px; max-width: 620px; }
.leer .dachzeile { margin-bottom: 6px; }
.zuletzt { display: flex; gap: 8px; flex-wrap: wrap; }
.laden { display: flex; align-items: center; gap: 12px; padding: 48px; color: var(--text-gedimmt); }
.kreisel {
  width: 22px; height: 22px; border-radius: 50%; border: 3px solid var(--weiss);
  border-top-color: var(--dodge); animation: drehen 0.8s linear infinite;
}
@keyframes drehen { to { transform: rotate(360deg); } }
/* CSV-Knopf rechts neben dem Filter */
.tabellen-kopf .csv { margin-left: auto; }

/* Keyword-Ideen: Filterleiste, häufige Begriffe, Aktionen */
.filterleiste { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end; margin-bottom: 12px; }
.filterleiste label { display: grid; gap: 3px; font-size: 12px; color: var(--text-gedimmt); }
.filterleiste input, .filterleiste select {
  border: 1px solid var(--linie-kraeftig); background: var(--weiss); border-radius: var(--radius-klein);
  padding: 6px 10px; font-size: 13.5px; color: var(--text); height: 34px;
}
.filterleiste input[type="search"] { width: 190px; }
.filterleiste input[type="number"] { width: 92px; }
.begriffe { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-bottom: 10px; }
.begriffe-titel { font-size: 12px; color: var(--text-gedimmt); margin-right: 2px; }
.chip {
  border: 1px solid var(--linie-kraeftig); background: var(--weiss); border-radius: 999px; padding: 3px 11px;
  font-size: 12.5px; color: var(--nacht); cursor: pointer; display: inline-flex; gap: 6px; align-items: center;
}
.chip[aria-pressed="true"], .chip.aktiv-filter { background: var(--nacht); color: var(--schnee); border-color: var(--nacht); }
.chip.still { cursor: default; background: var(--schnee); border-color: var(--linie); }
.chip-zahl { font-size: 11px; opacity: 0.7; }
.ideen-aktionen { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 10px; }
.ideen-aktionen .reiter { margin-left: 0; }
.zaehler { font-size: 13px; color: var(--text-gedimmt); margin-right: auto; }
.stern { border: 0; background: none; cursor: pointer; font-size: 16px; line-height: 1; color: var(--dodge); padding: 0 2px; }
td.stern-spalte { width: 28px; padding-right: 0; }

/* Was Google zeigt */
.serp-inhalte { display: grid; gap: 16px; }
.serp-abschnitt h4 { margin: 0 0 6px; font-size: 14px; font-weight: 600; }
.serp-abschnitt p { margin: 0 0 6px; font-size: 14px; line-height: 1.55; }
.ki-text { white-space: pre-line; background: var(--schnee); border-radius: var(--radius-element); padding: 12px 14px; }
.snippet-titel { font-weight: 600; }
.quellen { font-size: 12.5px; color: var(--text-gedimmt); }
.fragen-liste { margin: 0; padding: 0; list-style: none; display: grid; gap: 6px; font-size: 14px; }
.fragen-liste li { display: flex; flex-wrap: wrap; gap: 4px; align-items: baseline; }

/* Merkliste im Kopf und als breiter Dialog */
.zahl-marke:not(:empty) {
  background: var(--korn); color: var(--weiss); border-radius: 999px; padding: 0 7px; font-size: 11.5px; margin-left: 2px;
}
dialog.breit { width: min(980px, calc(100vw - 32px)); }

/* Parent-Keyword: Text statt Zahl in der Kachel, Adresse der Top-Seite */
.kennzahl .wert-text { font-size: 19px; line-height: 1.3; overflow-wrap: anywhere; }
.top-seite { margin: 0 0 6px; font-size: 14px; overflow-wrap: anywhere; }

/* Anmeldung: solange niemand angemeldet ist, nur die Anmeldekarte zeigen */
body[data-zustand="laedt"] > :not(dialog), body[data-zustand="abgemeldet"] > :not(#anmeldung):not(dialog) { display: none; }
body:not([data-zustand="abgemeldet"]) #anmeldung { display: none; }
.anmelde-seite { min-height: 100vh; display: grid; place-items: center; padding: 24px 16px; background: var(--nacht); }
.anmelde-karte { background: var(--weiss); border-radius: var(--radius-flaeche); padding: 28px 28px 22px; width: min(420px, 100%); display: grid; gap: 14px; }
.anmelde-karte h1 { margin: 0; font-size: 26px; font-weight: 400; }
.anmelde-karte h1 span { color: var(--dodge); }
.anmelde-karte form { display: grid; gap: 12px; }
.anmelde-karte input { border: 1px solid var(--linie-kraeftig); border-radius: var(--radius-klein); padding: 9px 12px; font-size: 15px; }
.drei-felder { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; align-items: end; }
.drei-felder .zeile { grid-column: 1 / -1; }
.feld input[type="email"], .feld select { border: 1px solid var(--linie-kraeftig); border-radius: var(--radius-klein); padding: 7px 10px; font-size: 14px; }
.grenze-feld { width: 70px; border: 1px solid var(--linie-kraeftig); border-radius: var(--radius-klein); padding: 3px 6px; text-align: right; }
#einmal-passwort code { font-family: var(--schrift-technik); font-size: 15px; background: var(--weiss); padding: 1px 6px; border-radius: 4px; user-select: all; }
@media (max-width: 680px) { .drei-felder { grid-template-columns: 1fr; } }

/* Verlauf und Vergleich */
.stand-hinweis { margin: 6px 0 0; font-size: 13px; background: var(--warnung-flaeche); border-radius: var(--radius-klein); padding: 4px 10px; display: inline-block; }
.kennzahl.vergleich-besser .zusatz { color: var(--ok-text); font-weight: 600; }
.kennzahl.vergleich-schlechter .zusatz { color: var(--alarm-text); font-weight: 600; }
.verlauf-filter { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end; }
.verlauf-filter label { display: grid; gap: 3px; font-size: 12px; color: var(--text-gedimmt); }
.verlauf-filter input, .verlauf-filter select { border: 1px solid var(--linie-kraeftig); border-radius: var(--radius-klein); padding: 6px 10px; font-size: 13.5px; height: 34px; }
.vergleich-leer { margin: 4px 2px; }

/* Tooltip für Erklärungen (data-tip) */
.tipp {
  position: fixed; z-index: 1000; max-width: min(300px, calc(100vw - 16px)); padding: 9px 12px;
  background: var(--nacht); color: var(--schnee); border-radius: 10px; font-size: 12.5px; line-height: 1.45;
  white-space: pre-line; pointer-events: none; box-shadow: 0 10px 30px rgba(0, 22, 61, 0.28);
}
.tipp[hidden] { display: none; }
th.mit-tipp button, th.mit-tipp { text-decoration: underline dotted rgba(0, 22, 61, 0.35); text-underline-offset: 3px; }

/* Kacheln: Info-Zeichen, klickbar mit Sprungziel */
.info-zeichen {
  display: inline-grid; place-items: center; width: 14px; height: 14px; margin-left: 6px; vertical-align: 1px;
  border: 1px solid currentColor; border-radius: 50%; font-size: 9.5px; font-style: italic; font-weight: 600; opacity: 0.6;
}
.kennzahl { position: relative; }
.kennzahl.klickbar { cursor: pointer; transition: box-shadow 0.15s, transform 0.15s; }
.kennzahl.klickbar:hover, .kennzahl.klickbar:focus-visible { box-shadow: 0 0 0 2px var(--korn); }
.kennzahl.klickbar:focus-visible { outline: none; }
.kennzahl .sprung { display: block; margin-top: 6px; font-size: 12px; color: var(--dodge); opacity: 0; transition: opacity 0.15s; }
.kennzahl.dunkel .sprung { color: var(--korn); }
.kennzahl.klickbar:hover .sprung, .kennzahl.klickbar:focus-visible .sprung { opacity: 1; }
@media (hover: none) { .kennzahl .sprung { opacity: 1; } }

/* Rangbereiche als Knöpfe */
button.balken-zeile { all: unset; box-sizing: border-box; display: grid; grid-template-columns: 88px minmax(0, 1fr) 56px; align-items: center; gap: 12px; cursor: pointer; border-radius: 8px; padding: 2px 4px; margin: -2px -4px; }
button.balken-zeile:hover .spur, button.balken-zeile:focus-visible .spur { box-shadow: 0 0 0 2px var(--korn); }
button.balken-zeile:focus-visible { outline: 2px solid var(--dodge); outline-offset: 2px; }

/* Ziel eines Sprungs kurz hervorheben */
@keyframes aufblitzen { from { box-shadow: 0 0 0 3px var(--korn); } to { box-shadow: 0 0 0 3px rgba(65, 134, 255, 0); } }
.aufblitzen { animation: aufblitzen 1.4s ease-out; }
.serp-abschnitt { border-radius: var(--radius-element); }
.filter-marke-platz:empty { display: none; }

@media (prefers-reduced-motion: reduce) { .kreisel { animation-duration: 2.4s; } .aufblitzen { animation: none; } }

/* Fuß */
.fuss {
  max-width: 1320px; margin: 0 auto; padding: 28px 32px 40px; display: flex; gap: 24px; align-items: center; flex-wrap: wrap;
}
.fuss-logo { display: block; height: 76px; width: auto; margin: -14px -10px; } /* Logo-Datei hat viel Weißraum */
.fuss .notiz { margin: 0; }

/* ---------- Einstellungen ---------- */
dialog {
  border: 0; border-radius: var(--radius-flaeche); padding: 0; width: min(580px, calc(100vw - 32px));
  color: var(--text); box-shadow: 0 24px 60px rgba(0, 22, 61, 0.32); overflow: hidden;
}
dialog::backdrop { background: rgba(0, 22, 61, 0.55); }
.dialog-kopf {
  display: flex; align-items: center; gap: 12px; padding: 16px 22px; background: var(--nacht); color: var(--schnee);
}
.dialog-kopf h2 { margin: 0; font-size: 19px; font-weight: 400; }
.dialog-kopf .knopf-kopf { margin-left: auto; }
.dialog-inhalt { padding: 20px 22px; display: grid; gap: 14px; max-height: 70vh; overflow-y: auto; }
.dialog-fuss { display: flex; gap: 8px; justify-content: flex-end; padding: 14px 22px; border-top: 1px solid var(--linie); }
fieldset { border: 0; padding: 16px 18px; margin: 0; display: grid; gap: 10px; background: var(--schnee); border-radius: 14px; }
legend { float: left; width: 100%; font-weight: 500; font-size: 15px; padding: 0; margin-bottom: 2px; }
legend + * { clear: both; }
.feld { display: grid; gap: 4px; }
.feld label { font-size: 13px; font-weight: 500; }
.feld input[type="text"], .feld input[type="password"], .feld input[type="number"] {
  border: 1px solid var(--linie-kraeftig); background: var(--weiss); border-radius: 10px; padding: 8px 12px;
}
.hilfe { margin: 0; }
.haken { display: flex; gap: 8px; align-items: flex-start; font-size: 13px; }
.zeile { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.zwei-felder { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.ergebnis { font-size: 13px; }
.ergebnis.ok { color: var(--ok-text); }
.ergebnis.alarm { color: var(--alarm-text); }
.protokoll { font-size: 12px; }
.protokoll td, .protokoll th { padding: 5px 6px; }

/* ---------- Schmale Bildschirme ---------- */
@media (max-width: 1180px) {
  .kennzahlen { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .raster-2-1, .raster-1-1 { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 680px) {
  .kopf-leiste, .kopf-buehne, .seite, .fuss { padding-left: 16px; padding-right: 16px; }
  .kopf-leiste { gap: 12px; }
  .hauptnav { order: 3; width: 100%; overflow-x: auto; gap: 14px; }
  .hauptnav a { padding: 8px 4px 10px; white-space: nowrap; }
  .kopf-rechts { margin-left: 0; }
  .kennzahlen.vier { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kopf-titel { font-size: 30px; }
  .suche { flex-wrap: wrap; }
  .suche input { flex-basis: 100%; }
  .kennzahlen { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kennzahl .wert { font-size: 24px; }
  .zwei-felder { grid-template-columns: 1fr; }
  .titelzeile .titel-aktionen { margin-left: 0; }
  .domain-titel { font-size: 24px; }
}