body { background: #f5f6f8; }

/* ---------- Toasts ---------- */
.toast-container {
  position: fixed; top: 1rem; right: 1rem; z-index: 1080;
  display: flex; flex-direction: column; gap: .5rem; max-width: 400px;
  pointer-events: none; /* leerer Bereich faengt keine Klicks ab */
}
.app-toast {
  pointer-events: auto; /* Toast selbst klickbar (Bootstrap .toast-container setzt none) */
  background: #fff; border-radius: .5rem; box-shadow: 0 6px 24px rgba(0,0,0,.12);
  border-left: 4px solid #6c757d; padding: .7rem .9rem; font-size: .9rem;
  display: flex; gap: .6rem; align-items: flex-start;
}
.app-toast.success { border-left-color: #198754; }
.app-toast.error   { border-left-color: #dc3545; }
.app-toast.info    { border-left-color: #0d6efd; }
.app-toast .toast-msg { flex: 1; white-space: pre-wrap; word-break: break-word; }
.app-toast .toast-actions { display: flex; gap: .25rem; flex-shrink: 0; }
.app-toast .toast-actions button {
  border: 1px solid rgba(0,0,0,.18); background: #f1f3f5; cursor: pointer; color: #495057;
  font-size: .78rem; padding: .15rem .5rem; border-radius: .3rem; line-height: 1.2;
}
.app-toast .toast-actions button:hover { background: #e2e6ea; border-color: rgba(0,0,0,.32); }

/* ---------- Eigenes Modal ---------- */
.modal-backdrop-custom {
  position: fixed; inset: 0; background: rgba(0,0,0,.45); z-index: 1090;
  display: flex; align-items: center; justify-content: center; padding: 1rem;
}
.modal-card-custom {
  background: #fff; border-radius: .6rem; max-width: 440px; width: 100%;
  box-shadow: 0 10px 40px rgba(0,0,0,.2); overflow: hidden;
}
.modal-card-custom .mc-body { padding: 1.25rem 1.25rem .25rem; }
.modal-card-custom .mc-title { font-weight: 600; margin-bottom: .4rem; font-size: 1.05rem; }
.modal-card-custom .mc-msg { color: #444; font-size: .95rem; white-space: pre-wrap; }
.modal-card-custom .mc-foot { display: flex; justify-content: flex-end; gap: .5rem; padding: 1rem 1.25rem; }

/* Der graue Nebenknopf (Abbrechen, Schliessen, Kopieren). Bootstraps `btn-light` traegt
   einen Rand in der eigenen Fuellfarbe -- auf weissem Grund sieht der Knopf dadurch aus
   wie blosser Text. Ueber die Knopf-Variablen gesetzt, damit hover/active/focus mitkommen;
   frueher stand das nur fuer `.mc-cancel` im eigenen Dialog und fehlte allen anderen. */
.btn-light {
  --bs-btn-bg: #e9ecef;
  --bs-btn-border-color: #ced4da;
  --bs-btn-color: #343a40;
  --bs-btn-hover-bg: #d3d4d6;
  --bs-btn-hover-border-color: #c6c7c8;
  --bs-btn-hover-color: #343a40;
  --bs-btn-active-bg: #c6c7c8;
  --bs-btn-active-border-color: #adb5bd;
  --bs-btn-active-color: #343a40;
}

/* ---------- Admin-Debug-Panel ---------- */
.debug-panel {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 1070;
  background: #1e1e1e; color: #e6e6e6;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .78rem;
  box-shadow: 0 -4px 20px rgba(0,0,0,.25);
  max-height: 45vh; display: flex; flex-direction: column;
}
.debug-panel.collapsed .debug-body { display: none; }
.debug-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: .35rem .6rem; background: #2a2a2a; gap: .5rem;
}
.debug-head .btn { padding: .05rem .45rem; font-size: .72rem; }
.debug-body { overflow: auto; padding: .4rem .6rem; }
.debug-entry { border-bottom: 1px solid #333; padding: .35rem 0; }
.debug-entry .de-label { color: #7fd1ff; }
.debug-entry.is-error { border-left: 3px solid #ef4444; padding-left: .5rem; }
.debug-entry.is-error .de-label { color: #ff8a8a; }
.debug-entry pre { margin: .2rem 0 0; white-space: pre-wrap; word-break: break-word; color: #cfcfcf; }

/* ---------- Ranking-Badges / Charts (AWR-Stil) ---------- */
.pos-badge {
  display: inline-block; min-width: 2.1rem; text-align: center;
  background: #2f6bff; color: #fff; border-radius: .4rem;
  padding: .15rem .5rem; font-weight: 600; font-size: .95rem;
}
.delta { font-size: .82rem; font-weight: 600; margin-left: .4rem; white-space: nowrap; }
.delta.up   { color: #16a34a; }
.delta.down { color: #dc2626; }
.delta.flat { color: #6b7280; }
.chart-wrap { position: relative; height: 190px; }
.kw-lupe { color: #b0b4bb; text-decoration: none; }
.kw-lupe:hover { color: #2f6bff; }

/* ---------- Navigation (klare Menuepunkte + aktiver Zustand) ---------- */
.navbar .nav-link.ntnav {
  color: #4b5563; font-weight: 500; padding: .3rem .7rem !important;
  border-radius: .45rem; line-height: 1.2; transition: background .12s, color .12s;
}
.navbar .nav-link.ntnav:hover { background: #f3f4f6; color: #111827; }
.navbar .nav-link.ntnav.active { background: #eaf0ff; color: #2f6bff; font-weight: 600; }

/* ---------- GSC-Tasks: kopierte Zeile hervorheben ---------- */
#gscBody tr.gsc-copied td { background-color: #fff3cd !important; transition: background-color .3s; }

/* ---------- Jobs (Haupttask + Subtasks) ---------- */
.btn-xs { padding: .05rem .35rem; font-size: .72rem; line-height: 1.3; border-radius: .35rem; }
.job-ctx { font-weight: 600; }
.job-ctx:first-child { margin-top: 0 !important; }
.job-sub.is-done .sub-title,
.job-sub.is-done .small { text-decoration: line-through; opacity: .55; }
.job-md {
  background: #f6f8fa; border: 1px solid rgba(0,0,0,.08); border-radius: .35rem;
  padding: .15rem .4rem; color: #24292f; white-space: pre-wrap; word-break: break-word; font-size: .78rem;
}
.min-w-0 { min-width: 0; }

/* ---------- Keyword-Mini-Liste (Artikel-Uebersicht) ---------- */
.kw-mini { border-collapse: collapse; font-size: .8rem; line-height: 1.35; }
.kw-mini td { padding: 1px 0; vertical-align: middle; white-space: nowrap; }
.kw-mini-name { font-weight: 500; padding-right: 14px !important; }
.kw-mini-num { text-align: right; padding-right: 12px !important; font-variant-numeric: tabular-nums; }
.kw-mini-pos { text-align: right; }
.kw-mini-pos .pos-badge { min-width: 1.7rem; font-size: .78rem; padding: .05rem .35rem; }
.kw-mini-pos .badge { font-size: .7rem; }

/* ---------- Gruppen-Filter (AWR-Stil) ---------- */
.group-filter { position: relative; }
.group-filter-btn {
  display: inline-flex; align-items: center; gap: .5rem;
  background: #fff; border: 1px solid rgba(0,0,0,.15); border-radius: .5rem;
  padding: .3rem .7rem; font-size: .9rem; cursor: pointer; color: #1f2937; max-width: 260px;
}
.group-filter-btn:hover { border-color: #2f6bff; }
.group-filter-btn span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.group-filter-panel {
  position: absolute; top: calc(100% + 4px); left: 0; z-index: 1050;
  width: 320px; max-height: 62vh; overflow-y: auto;
  background: #fff; border: 1px solid rgba(0,0,0,.12); border-radius: .6rem;
  box-shadow: 0 10px 30px rgba(0,0,0,.12); padding: .4rem; display: none;
}
.group-filter-panel.open { display: block; }
.gf-item {
  display: flex; align-items: center; justify-content: space-between; gap: .5rem;
  padding: .4rem .6rem; border-radius: .4rem; text-decoration: none; color: #1f2937; font-size: .9rem;
}
.gf-item:hover { background: #f1f4f9; color: #1f2937; }
.gf-item.active { background: #e7efff; color: #2855cc; font-weight: 600; }
.gf-search-wrap { padding: .4rem .3rem; }
.gf-section {
  font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
  color: #6b7280; padding: .5rem .6rem .25rem; display: flex; align-items: center; gap: .4rem;
}
.gf-list { display: flex; flex-direction: column; }
.gf-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gf-empty { padding: .5rem .6rem; color: #6b7280; font-size: .85rem; }
.gf-subsection {
  font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .03em;
  color: #9099a5; padding: .5rem .6rem .2rem; border-top: 1px solid #eef0f3; margin-top: .2rem;
}
.gf-list .gf-subsection:first-child { border-top: none; margin-top: 0; }

/* ---------- OnPage-Score / Stern ---------- */
.onpage-score {
  width: 56px; height: 56px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.4rem; font-weight: 700; flex-shrink: 0;
}
.star-btn { background: none; border: none; padding: 0; font-size: 1.1rem; line-height: 1; color: #c7ccd3; cursor: pointer; }
.star-btn:hover { color: #e0a800; }
.star-btn.is-primary { color: #f0ad00; }

/* ---------- Tabelle mit fixiertem Kopf ---------- */
/* Nur waagrecht scrollen. Ein Hoehendeckel hier erzeugt einen zweiten, senkrechten
   Scrollbalken neben dem der Seite -- der fixierte Kopf ist das nicht wert. */
.sticky-head { overflow-x: auto; }
.sticky-head thead th {
  position: sticky; top: 0; z-index: 3; background: #fff;
  box-shadow: inset 0 -1px 0 rgba(0,0,0,.12);
}

/* ---------- Menue: Zusatz in Klammern auch im aktiven Eintrag lesbar ---------- */
.dropdown-item.active .text-muted,
.dropdown-item:active .text-muted { color: rgba(255,255,255,.78) !important; }
.dropdown-item.active .badge,
.dropdown-item:active .badge {
  background: rgba(255,255,255,.22) !important;
  color: #fff !important;
  border-color: rgba(255,255,255,.45) !important;
}

/* ---------- Platzhalter klar von eingegebenem Text unterscheiden ----------
   Bootstrap-Default (#6c757d) wirkt zu dunkel -> wird mit echtem Text verwechselt.
   Heller + kursiv: bleibt als Hinweis lesbar, ist aber eindeutig kein Inhalt. */
.form-control::placeholder,
textarea::placeholder {
  color: #b6bbc2 !important;
  font-style: italic;
  opacity: 1;                 /* Firefox setzt sonst zusaetzliche Transparenz */
}

/* ---- Keyword-Inbox: Inline-Edit und Zaehlkarten ----
   Gleiches Signal wie .ro-ce in der Routing-Tabelle: Werte sehen aus wie Werte, nicht wie
   Formularfelder. Ein Auswahlfeld je Zeile laesst eine Datentabelle wie eine Eingabemaske
   aussehen -- das war der Hauptgrund, warum die Seite alt wirkte. */
.ki-ce { padding: .1rem .3rem; border-radius: .25rem; cursor: pointer; min-height: 1.6rem; }
.ki-ce:hover { background: var(--bs-secondary-bg); }
.ki-ce:focus-visible { outline: 2px solid var(--bs-primary); outline-offset: 1px; }
.ki-karte { border-color: var(--bs-border-color); transition: border-color .12s ease, background-color .12s ease; }
.ki-karte:hover { border-color: var(--bs-secondary); background: var(--bs-secondary-bg); }
.ki-karte.active { border-width: 2px; background: var(--bs-secondary-bg); }
/* Oben ausrichten, sobald Zellen mehrzeilig werden (CLAUDE.md, Tabellen-Regel 2).
   Mittig laesst einzeilige Zellen neben langen Notizen schweben. */
.ki-table > :not(caption) > * > * { vertical-align: top; }
.ki-table td { padding-top: .5rem; padding-bottom: .5rem; }
/* Zahlenspalten auf gemeinsamer Ziffernbreite -- sonst tanzen die Kommastellen. */
.ki-table .text-end { font-variant-numeric: tabular-nums; }
/* Notiz: drei Zeilen in der Anzeige. Der volle Text steht beim Klick im Editor,
   nicht hinter einem Hover -- gekuerzt wird die Ansicht, nie der Inhalt. */
.ki-klemm { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
/* Quelle unter dem Keyword: kleiner als der Rest, sie ist Herkunft und nicht Inhalt. */
.ki-quelle { font-size: .75rem; line-height: 1.25; }
/* Wettbewerbs-Meter, gleiche Bauart wie der Conf.-Meter in der Routing-Tabelle:
   fester Track mit Rahmen, damit er auch bei Zeilen-Hover sichtbar bleibt. */
.ki-meter { height: 5px; width: 2.8rem; background: #e4e7eb; border: 1px solid #c2c8cf;
            border-radius: 3px; overflow: hidden; margin-top: .15rem; }
.ki-meter .ki-fill { height: 100%; }
/* Mitlaufende Kopfzeile OHNE zweiten Scrollbalken.
   Der uebliche Weg (Rahmen mit max-height + overflow) laesst die Kopfzeile am Kasten kleben
   und bringt damit einen zweiten senkrechten Balken ins Bild. Hier scrollt stattdessen die
   Seite selbst: der Rahmen bekommt gar keinen Ueberlauf, dadurch klebt die Kopfzeile am
   Fenster. Ist die Tabelle breiter als das Fenster, scrollt die Seite waagerecht -- ein
   Balken je Richtung, beide dort, wo man sie erwartet. */
.ki-scroll { overflow: visible; }
.ki-scroll thead th {
  position: sticky; top: 0; z-index: 3; background: #fff;
  box-shadow: inset 0 -1px 0 rgba(0,0,0,.12);
}

/* ---------- Tabellen: Hervorhebung faerbt keine Bedienelemente mehr ----------
   Bootstrap legt die Hover-Farbe der Zeile als Hintergrund auf die Zelle. Outline-Knoepfe
   sind durchsichtig und nehmen sie an -- der Knopf wechselt beim Ueberfahren der ZEILE die
   Innenfarbe, obwohl er selbst gar nicht gemeint ist. Eine eigene Flaeche loest das, ohne
   Hover- und Aktiv-Zustaende des Knopfes anzutasten (Bootstrap regelt die ueber andere
   Variablen). Gilt fuer alle Tabellen im Werkzeug, nicht nur die Keyword-Inbox. */
.table [class*="btn-outline-"] { --bs-btn-bg: var(--bs-body-bg); }

/* Zeilen-Hervorhebung dezenter, Trennstrich dafuer deutlicher: die Zeile soll sich beim
   Ueberfahren andeuten, nicht aufleuchten -- getrennt werden die Zeilen ohnehin vom Strich. */
.table { --bs-table-hover-bg: rgba(15, 23, 42, .025); }
.table > :not(caption) > * > * { border-bottom-color: #d3d8de; }

/* Bewertung: entfaerbt und blass, solange nicht bewertet wurde. */
.ki-bew .btn { --bs-btn-active-bg: var(--bs-body-bg); --bs-btn-active-color: inherit;
               --bs-btn-active-border-color: var(--bs-secondary); }
.ki-bew .btn:not(.active) { filter: grayscale(1); opacity: .45; }
.ki-bew .btn.active { filter: none; opacity: 1; border-color: var(--bs-secondary); }

/* ---------- Rettungsring neben der Ueberschrift ----------
   Der Weg zurueck zu einem ausgeblendeten Erklaerblock. Dezent, aber an der Stelle,
   an der man nach Hilfe zu dieser Seite sucht: an ihrem Namen. */
.hilfe-ring { font-size: .78em; line-height: 1; opacity: .6; vertical-align: middle; }
.hilfe-ring:hover, .hilfe-ring:focus-visible { opacity: 1; }

/* ---------- Fortschritt im Bilder-Werkzeug ----------
   Fuenf Stationen, drei Seiten. Die Leiste ist bewusst kraeftig: sie ist das einzige,
   was verraet, dass hinter dem Zuschneiden noch drei Schritte kommen. Deshalb eigener
   Kasten mit Rahmen, gefuellte Ziffernkreise und eine durchgezogene Verbindung, die
   bis zum aktuellen Schritt farbig ist -- ein Balken, kein Text mit Punkten davor.
   Waagrecht scrollbar statt umbrechend: ein Weg in zwei Zeilen liest sich nicht mehr
   als Reihenfolge. */
.bi-weg {
  overflow-x: auto;
  background: var(--bs-body-bg);
  border: 1px solid var(--bs-border-color);
  border-radius: .5rem;
  padding: .75rem 1rem;
}
.bi-weg ol {
  display: flex; align-items: center; gap: 0;
  list-style: none; margin: 0; padding: 0; width: max-content; min-width: 100%;
}
.bi-weg li { display: flex; align-items: center; flex: 1 1 auto; }
/* Die Verbindung gehoert zum Schritt DAVOR: sie ist farbig, wenn der erledigt ist. */
.bi-weg li + li::before {
  content: ""; flex: 1 1 1.5rem; min-width: 1.5rem; height: 3px; border-radius: 2px;
  background: var(--bs-border-color); margin: 0 .5rem;
}
.bi-weg-jetzt::before, .bi-weg-fertig::before { background: var(--bs-primary) !important; }

.bi-weg li > a {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .35rem .5rem; border-radius: .375rem;
  font-size: .875rem; line-height: 1.2; white-space: nowrap; text-decoration: none;
}
.bi-weg-nr {
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  width: 1.75rem; height: 1.75rem; border-radius: 50%;
  font-size: .8125rem; font-weight: 700;
  background: var(--bs-secondary-bg); color: var(--bs-secondary-color);
}

.bi-weg-offen > a { color: var(--bs-secondary-color); }
.bi-weg-offen > a:hover { color: var(--bs-body-color); }

.bi-weg-fertig > a { color: var(--bs-body-color); font-weight: 500; }
.bi-weg-fertig > a:hover { background: var(--bs-secondary-bg); }
.bi-weg-fertig .bi-weg-nr { background: var(--bs-primary); color: #fff; }
/* Erledigt zeigt einen Haken statt der Ziffer -- die Nummer hat man hinter sich. */
.bi-weg-fertig .bi-weg-nr { font-size: 0; }
.bi-weg-fertig .bi-weg-nr::after { content: "\2713"; font-size: .95rem; }

.bi-weg-jetzt > a {
  color: var(--bs-primary); background: var(--bs-primary-bg-subtle);
  font-weight: 700; box-shadow: inset 0 0 0 1px var(--bs-primary-border-subtle);
}
.bi-weg-jetzt .bi-weg-nr { background: var(--bs-primary); color: #fff; }
.bi-weg li > a:focus-visible { outline: 2px solid var(--bs-primary); outline-offset: 2px; }

/* ---------- Sperrender Fortschritt (showBusy) ----------
   Baut auf dem Dialog-Kasten auf, damit beides gleich aussieht -- nur der Kopf ist anders:
   Kringel links, Titel und Zaehler rechts daneben. */
.busy-card .busy-kopf { display: flex; align-items: center; gap: .85rem; margin-bottom: .75rem; }
.busy-card .mc-title { margin-bottom: .1rem; }
.busy-card .busy-zahl {
  font-size: .875rem; color: var(--bs-secondary-color);
  font-variant-numeric: tabular-nums;
}
.busy-card .busy-balken { height: 6px; margin-bottom: .6rem; }
.busy-card .busy-text { min-height: 1.4em; }
.busy-card .mc-foot { padding-top: .75rem; }

/* Sprachfahnen in der Kopfzeile. Die Fahne allein waere ein Zustand nur ueber Farbe --
   der aktive bekommt deshalb auch einen Rahmen und volle Deckkraft, der inaktive ist
   blass. Beschriftet sind alle, nur unsichtbar (visually-hidden) fuer Vorlesegeraete. */
.nt-fahne {
  display: inline-flex; align-items: center; justify-content: center;
  width: 1.9rem; height: 1.9rem; border-radius: .3rem; font-size: 1.05rem;
  line-height: 1; text-decoration: none; opacity: .45;
  border: 1px solid transparent; transition: opacity .12s ease, border-color .12s ease;
}
.nt-fahne:hover { opacity: .85; background: var(--bs-secondary-bg); }
.nt-fahne-an { opacity: 1; border-color: var(--bs-primary); background: var(--bs-primary-bg-subtle); }
.nt-fahne:focus-visible { outline: none; box-shadow: 0 0 0 .2rem rgba(13, 110, 253, .4); }