/* ============================================================
   webservice - Modul-spezifische Styles (Website-Service-Monitoring)
   ------------------------------------------------------------
   Additiv zu den Shared-Patterns (idf-list-grid, idf-hub-card,
   idf-stat-card). Nur Spalten-Grids, Pillen-Color-Modifier,
   Karten-Extras (Live-Link, Badges) und Modal-Bausteine
   (Toggles, Info-Block) - Tokens, kein Hex (Ausnahme: der
   dokumentierte --yellow-text-Fallback wie in vertraege.css).
   ============================================================ */

/* ---- Dashboard-Main (Kachelwand) ----
   Muster safeguard #sg-dashboard-page: vollflaechig ohne 1280-Deckel
   (mehr Kacheln pro Zeile auf grossen Monitoren), Standard-Padding.
   Die Listen-Seiten brauchen das nicht - sie nutzen die Shared-Klasse
   .idf-list-page. */
.ws-main {
  max-width: none;
  padding: var(--space-8) var(--space-8) var(--space-12);
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}

@media (max-width: 1100px) {
  .ws-main {
    padding: var(--space-5) var(--space-4) var(--space-8);
    gap: var(--space-5);
  }
}

/* ---- Websites-Liste: Spalten-Grid (10) ----
   Name · Kunde · Typ · Status · Findings · Sync · Gebucht · Reaktion ·
   DSGVO · Löschen
   Die BETRIEBS-Ampel hat keine Spalte: sie faerbt die Zeile
   (.idf-ampel-row). Der DSGVO-Score dagegen ist eine eigene, halbjaehrliche
   Kennzahl und bekommt eine eigene Pille - bewusst NICHT an die Toenung
   gekoppelt (Joerg 2026-07-28), sonst waeren alle Zeilen gelb und ein echter
   Ausfall ginge darin unter.
   Der Verantwortliche hat seit v0.4.1 keine Spalte mehr (Pflege im Modal). */
.wsw-grid {
  grid-template-columns: var(--wsw-cols, minmax(200px, 1fr) 170px 110px 130px 100px 130px 148px 148px 80px 52px);
}

@media (max-width: 1100px) {
  /* Gebucht, Reaktion und DSGVO bleiben sichtbar: Pillen kosten kaum Platz
     und sind der Grund, warum man die Liste ueberhaupt aufmacht. */
  .wsw-grid { grid-template-columns: minmax(160px, 1fr) 140px 120px 148px 148px 70px 52px; }
  /* Typ (3.) / Findings (5.) / Sync (6.) ausblenden */
  #wsw-thead .wsw-grid > div:nth-child(3),
  #wsw-thead .wsw-grid > div:nth-child(5),
  #wsw-thead .wsw-grid > div:nth-child(6),
  .wsw-row .wsw-grid > .wsw-cell-typ,
  .wsw-row .wsw-grid > .wsw-cell-findings,
  .wsw-row .wsw-grid > .wsw-cell-sync { display: none; }
  .idf-colresize-layer { display: none; }
  .idf-colresize-scroll .idf-list-thead,
  .idf-colresize-scroll .idf-list-rows { width: auto; min-width: 0; }
}

/* ---- Findings-Liste: Spalten-Grid (8) ----
   Schweregrad · Titel · Website · Komponente · Version · CVE · Status · Erkannt */
.wsf-grid {
  grid-template-columns: var(--wsf-cols, 130px minmax(220px, 1fr) 170px 180px 150px 160px 150px 110px);
}

@media (max-width: 1100px) {
  .wsf-grid { grid-template-columns: 110px minmax(160px, 1fr) 140px 130px; }
  /* Komponente (4.) / Version (5.) / CVE (6.) / Erkannt (8.) ausblenden */
  #wsf-thead .wsf-grid > div:nth-child(4),
  #wsf-thead .wsf-grid > div:nth-child(5),
  #wsf-thead .wsf-grid > div:nth-child(6),
  #wsf-thead .wsf-grid > div:nth-child(8),
  .wsf-row .wsf-grid > .wsf-cell-komponente,
  .wsf-row .wsf-grid > .wsf-cell-version,
  .wsf-row .wsf-grid > .wsf-cell-cve,
  .wsf-row .wsf-grid > .wsf-cell-erkannt { display: none; }
}

/* ---- Zellen ---- */
.wsw-cell-kunde,
.wsw-cell-typ,
.wsw-cell-status,
.wsw-cell-findings,
.wsw-cell-sync,
.wsf-cell-sev,
.wsf-cell-version,
.wsf-cell-status,
.wsf-cell-erkannt {
  display: flex;
  align-items: center;
  min-width: 0;
  gap: 6px;
}
.wsw-cell-kunde > span {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}
/* Leer-Zustand gedaempft. Bei den zweizeiligen Zellen muss die Regel den
   Text-Span treffen: der traegt die eigene Farbe aus dem Shared-Baustein. */
.wsw-cell-kunde.is-empty > span,
.wsw-cell-findings.is-empty > span,
.wsw-cell-sync.is-empty,
.wsf-cell-bezug.is-empty .idf-list-cell-two-line-text,
.wsf-cell-komponente.is-empty .wsf-komponente,
.wsf-cell-cve.is-empty .wsf-cve { color: var(--mid); }

/* Bezug-Zelle ist zweizeilig wie Komponente und CVE: Name oben, Bezugs-Typ
   als Sublabel darunter (Shared `.idf-list-cell-two-line`). Das frueher hier
   liegende Inline-Label `.wsf-bezug-typ` vor dem Namen ist entfallen. */

/* Bezug-Block im Finding-Modal: die vier exklusiven Combos als 2x2-Raster.
   Der Selektor nennt `.idf-form >` mit, weil `.idf-form > .idf-form-row-full`
   (blocks/forms) `display: grid` UND `gap: var(--space-1)` mit (0,2,0) setzt -
   ohne das verliert der Block-Abstand hier (0,1,0). Gleiche Ursache wie bei
   den Hinweis-Boxen (v0.6.2). */
.idf-form > .idf-form-row-full.ws-bezug-block,
.ws-bezug-block { display: flex; flex-direction: column; gap: .45rem; }
/* Die Ueberschrift ist ein direktes <span> der row-full und wird sonst von
   `.idf-form > .idf-form-row-full > span` als Feld-Label behandelt: grau und
   14 px. Sie ist aber eine Abschnitts-Ueberschrift, also --ink in
   Fliesstext-Groesse; grau bleibt nur der Zusatz im <em>. */
.idf-form > .idf-form-row-full > span.ws-bezug-caption,
.ws-bezug-caption { font-weight: 600; color: var(--ink); font-size: var(--font-base); }
.ws-bezug-caption em { font-weight: 400; font-style: normal; color: var(--mid); }
.ws-bezug-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .55rem .8rem; }
@media (max-width: 640px) { .ws-bezug-grid { grid-template-columns: 1fr; } }

.wsw-cell-delete,
.wsw-cell-delete-head {
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Komponente + CVE sind zweizeilig: Geometrie kommt komplett aus der
   Shared-Zelle `.idf-list-cell-two-line` (+ `-row`/`-text`/`-sub`), hier
   bleibt nur die gedaempfte Farbe im Leer-Zustand. Der frueher hier
   liegende Spalten-Flex-Nachbau hat NICHT gegriffen: die Body-Cell-Regel
   `.idf-list-rows .idf-list-row .idf-list-grid > div { align-items: center }`
   hat hoehere Spezifitaet und zentrierte den Inhalt waagerecht. */
.wsf-fix-arrow { color: var(--mid); }
.wsf-exploited { color: var(--primary); }

/* Findings-Zaehler in der Websites-Liste */
.ws-findings-count {
  font-weight: var(--weight-bold);
  color: var(--primary);
}

/* Live-Link in der Namens-Zelle (nur bei Row-Hover sichtbar, wie die Pens). */
.ws-row-link {
  color: var(--mid);
  opacity: 0;
  transition: opacity 120ms ease, color 120ms ease;
  flex: 0 0 auto;
}
.idf-list-row:hover .ws-row-link { opacity: 0.7; }
.ws-row-link:hover { opacity: 1; color: var(--accent); }

/* ---- Gebuchte Leistungen + Reaktionszeit (Websites-Liste) ----
   Klickbare flag-check-Pillen, je Gruppe EINE Spalte (Muster aufgaben /
   netzwerk-ring-flags). Geometrie und Aktiv-Farbe kommen aus dem Shared-
   Baustein, hier steht nur die Anordnung. „Reaktion" ist eine Radio-Gruppe
   (IDF.flagPills.mountRadio), sieht aber bewusst genauso aus: dass sich die
   Auswahl gegenseitig ausschliesst, zeigt das Verhalten beim Klick, nicht
   eine zweite Pillen-Art. */
.wsw-cell-gebucht,
.wsw-cell-reaktion,
.wsw-cell-dsgvo {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
}

/* ---- DSGVO-Score-Pille (Websites-Liste) ----
   Zweite Kennzahl neben der Betriebs-Ampel, bewusst mit eigenem Traeger
   statt Zeilen-Toenung (siehe Grid-Kommentar oben). Die Stufe kommt aus
   `dsgvo_ampel`, berechnet wird sie im dsgvo-Flow. */
.wsw-cell-dsgvo.is-empty > span { color: var(--mid); }
.ws-dsgvo-badge { font-variant-numeric: tabular-nums; }
.ws-dsgvo-badge.is-gruen { background: var(--tint-confirm); color: var(--confirm); }
.ws-dsgvo-badge.is-gelb  { background: color-mix(in srgb, var(--yellow-text, #b58600) 14%, transparent); color: var(--yellow-text, #b58600); }
.ws-dsgvo-badge.is-rot   { background: var(--tint-primary); color: var(--primary); }

/* ---- Typ-Pille ---- */
.ws-typ-badge.is-website { background: var(--neutral-bg); color: var(--mid); }
.ws-typ-badge.is-shop    { background: var(--tint-accent); color: var(--accent); }

/* ---- Website-Status-Pille ---- */
.ws-status-badge.is-aktiv    { background: var(--tint-confirm); color: var(--confirm); }
.ws-status-badge.is-pausiert { background: var(--neutral-bg);   color: var(--mid); }

/* Die Ampel-Pille der Websites-Liste ist entfallen: die Ampel faerbt seit
   v0.3.11 die ZEILE (Shared .idf-ampel-row), es gibt keine Ampel-Spalte
   mehr. Die Kachel-Ampel des Dashboards laeuft ueber hub-card. */

/* ---- Schweregrad-Pille (Findings) ---- */
.ws-sev-badge.is-kritisch { background: var(--tint-primary); color: var(--primary); }
.ws-sev-badge.is-hoch     { background: var(--tint-orange);  color: var(--orange); }
.ws-sev-badge.is-mittel   { background: color-mix(in srgb, var(--yellow-text, #b58600) 14%, transparent); color: var(--yellow-text, #b58600); }
.ws-sev-badge.is-niedrig  { background: var(--tint-accent);  color: var(--accent); }
.ws-sev-badge.is-info     { background: var(--neutral-bg);   color: var(--mid); }

/* ---- Finding-Status-Pille ---- */
.ws-fstatus-badge.is-neu            { background: var(--tint-primary); color: var(--primary); }
.ws-fstatus-badge.is-gemeldet       { background: var(--tint-accent);  color: var(--accent); }
.ws-fstatus-badge.is-in_bearbeitung { background: var(--tint-orange);  color: var(--orange); }
.ws-fstatus-badge.is-behoben        { background: var(--tint-confirm); color: var(--confirm); }
.ws-fstatus-badge.is-akzeptiert     { background: color-mix(in srgb, var(--yellow-text, #b58600) 14%, transparent); color: var(--yellow-text, #b58600); }
.ws-fstatus-badge.is-ignoriert      { background: var(--neutral-bg);   color: var(--soft); }

/* ---- Dashboard-Karten: Live-Link + Hinweis-Badges ---- */
.ws-card { cursor: default; }

.ws-card-link {
  margin-left: auto;
  flex-shrink: 0;
  color: var(--mid);
  font-size: var(--font-md);
  opacity: 0;
  transition: opacity 120ms ease, color 120ms ease;
}
.ws-card:hover .ws-card-link { opacity: 0.7; }
.ws-card-link:hover { opacity: 1; color: var(--accent); }

.ws-card-badges {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}
.ws-card-badge.is-offline { background: var(--tint-primary); color: var(--primary); }
.ws-card-badge.is-warnung { background: var(--tint-orange);  color: var(--orange); }
.ws-card-badge.is-neutral { background: var(--neutral-bg);   color: var(--mid); }

/* ---- Modal: Sektions-Titel, Toggles, Info-Block ---- */
/* `.ws-modal-hint` ist ersatzlos weg (v0.6.2): die Hinweis-Box ist jetzt der
   Shared-Baustein `_shared/blocks/hint` (`.idf-hint`). Der Modul-Nachbau war
   ein Flex-Container und hat im Formular ohnehin nie gewonnen - dort setzt
   `.idf-form > .idf-form-row-full` (blocks/forms) `display: grid` mit
   hoeherer Spezifitaet, weshalb das Icon immer auf einer eigenen Zeile ueber
   dem Text stand. Der Shared-Kasten ist ein Textblock mit absolut
   positioniertem Icon und vertraegt deshalb auch <strong> im Satz. */

.ws-form-hint {
  margin-top: var(--space-2);
  /* --font-sm wie .idf-form-help; --font-xs sind 11px und fuer Header-Caps
     gedacht, nicht fuer Text, den jemand lesen soll (Joerg 2026-07-27). */
  font-size: var(--font-sm);
  color: var(--mid);
  line-height: 1.4;
}

/* Kein eigener Toggle-Skin mehr (v0.3.18): `.ws-toggle-wrap` und
   `.ws-modal-toggle` beschrieben Pillen-Geometrie nach, die es in Shared
   laengst gibt - `.idf-flag-group` (blocks/flag-check) fuer die Reihe und
   `.idf-form .idf-flag-check` (functions/detail-modal) fuer die Form-Hoehe.
   Die Schalter im Website- und im Finding-Modal laufen jetzt ueber
   IDF.createFlagCheck bzw. IDF.flagCheck.radioGroup. */

/* Readonly-Info-Block (Sync-Stand im Basics-Tab, Zeitpunkte im Finding). */
.ws-modal-info {
  padding: var(--space-3);
  background: var(--neutral-bg);
  border-radius: var(--idf-form-radius);
}
.ws-info-grid {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: var(--space-1) var(--space-4);
  font-size: var(--font-sm);
}
.ws-info-grid > span { color: var(--mid); }
.ws-info-grid > strong { font-weight: var(--weight-semi); color: var(--ink); overflow-wrap: anywhere; }

/* Vertrag-/AV-Status-Badges im Vertraege&AV-Tab.
   Der Selektor nennt `.idf-form >` mit, weil `.idf-form > .idf-form-row-full`
   (blocks/forms) `display: grid` mit (0,2,0) setzt - ein blosses
   `.ws-av-status { display: flex }` (0,1,0) verliert und die beiden Badges
   standen untereinander statt nebeneinander. Gleiche Ursache wie bei der
   Hinweis-Box (v0.6.2). */
.idf-form > .idf-form-row-full.ws-av-status,
.ws-av-status {
  display: flex;
  gap: var(--space-2);
  flex-wrap: wrap;
}
.ws-av-badge.is-ok    { background: var(--tint-confirm); color: var(--confirm); }
.ws-av-badge.is-fehlt { background: var(--tint-orange);  color: var(--orange); }

/* ---- Modal: Eskalations-Reiter (eskalation-tab.js) ----
   Das Ablaufdiagramm selbst kommt als SVG aus dem Shared-Baustein
   IDF.mermaid (Klassen .idf-mermaid-*). Hier nur der Rahmen: Ladezustand,
   Abstand um das Diagramm und die Detail-Liste darunter. */
.ws-esk-loading {
  display: flex;
  gap: var(--space-2);
  align-items: center;
  color: var(--mid);
  font-size: var(--font-sm);
  padding: var(--space-3);
}

/* Der Reiter ist kein Formular, seine Bloecke sollen untereinander stehen.
   Ohne das fallen sie in das zweispaltige .idf-form-Raster: Hinweis links,
   Diagramm rechts, und die Hinweis-Box wird auf die Diagramm-Hoehe
   gestreckt (grosse graue Flaeche). Die .idf-form-Klasse bleibt trotzdem
   am Wrapper, weil .idf-hint und .ws-esk-vorgang die --idf-form-*
   Custom-Properties von dort erben. */
.ws-esk > * { grid-column: 1 / -1; }

/* Kroki liefert ein SVG mit eigener Breite; bei schmalen Diagrammen sonst
   linksbuendig im breiten Modal. Scrollen bei zu breiten uebernimmt
   .idf-mermaid-svg (overflow-x). */
.ws-esk-diagramm .idf-mermaid-svg svg { margin: 0 auto; }

/* Hinweise unter dem Diagramm: was das SVG nicht sagen kann (fehlender
   Zustaendiger, fehlender Monitor, nicht eskalierende Risiken). */
.ws-esk-hinweise {
  margin: 0;
  padding-left: var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  font-size: var(--font-sm);
  color: var(--mid);
  line-height: 1.45;
}
.ws-esk-hinweise strong { color: var(--ink); font-weight: var(--weight-semi); }

.ws-esk-vorgaenge {
  margin-top: var(--space-2);
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}
.ws-esk-vorgang {
  display: flex;
  gap: var(--space-2);
  align-items: center;
  flex-wrap: wrap;
  padding: var(--space-2) var(--space-3);
  background: var(--neutral-bg);
  border-radius: var(--idf-form-radius);
  /* Vorgangs-Zeilen unter dem Diagramm sind Sekundaerinfo, aber Lesetext:
     --font-sm statt der 11px aus --font-xs. */
  font-size: var(--font-sm);
}
.ws-esk-vorgang-label {
  color: var(--ink);
  font-weight: var(--weight-semi);
  overflow-wrap: anywhere;
  flex: 1 1 12rem;
  min-width: 0;
}
.ws-esk-vorgang-am { color: var(--mid); white-space: nowrap; }
.ws-esk-task {
  display: inline-flex;
  gap: var(--space-1);
  align-items: center;
  white-space: nowrap;
  color: var(--accent);
  text-decoration: none;
}
.ws-esk-task:hover { text-decoration: underline; }
.ws-esk-task.is-wartet { color: var(--mid); }

/* ============================================================
   Etappe 2 (v0.2.0): Inventar- (Plugins/Themes), Risiken- und
   Logbuch-Listen. Nur Grid-Spalten + Pillen-Farben (additiv),
   Geometrie/Verhalten kommen aus den Shared-Listen-Bausteinen.
   ============================================================ */

/* Spaltenfolge nach Listen-Standard: erst der Name/Titel, dann die
   Eigenschaften, Zustands-Pillen am Ende (Risiken: die Behoben-Pille als
   Check am Zeilenanfang, wie der Erledigt-Toggle in Aufgaben). */
/* Aktiv(Check) · Name · Website · Version · Zuerst · Zuletzt · Hinweis */
.wsk-grid {
  grid-template-columns: var(--wsk-cols, 44px minmax(220px, 1fr) 180px 170px 120px 120px 130px);
}
/* Behoben(Check) · Titel · Stufe · Typ · Website · Erkannt */
.wsr-grid {
  grid-template-columns: var(--wsr-cols, 44px minmax(220px, 1fr) 90px 170px 180px 110px);
}
/* Zeitpunkt · Titel · Typ · Website · Quelle */
.wsl-grid {
  grid-template-columns: var(--wsl-cols, 140px minmax(240px, 1fr) 150px 180px 120px);
}

@media (max-width: 1100px) {
  /* Zuerst/Zuletzt gesehen weg, Aktiv-Check und Hinweis bleiben. */
  .wsk-grid { grid-template-columns: 44px minmax(160px, 1fr) 140px 130px 130px; }
  #wsk-thead .wsk-grid > div:nth-child(5),
  #wsk-thead .wsk-grid > div:nth-child(6),
  .wsk-row .wsk-grid > .wsk-cell-zuerst,
  .wsk-row .wsk-grid > .wsk-cell-zuletzt { display: none; }

  .wsr-grid { grid-template-columns: 44px minmax(160px, 1fr) 90px; }
  #wsr-thead .wsr-grid > div:nth-child(4),
  #wsr-thead .wsr-grid > div:nth-child(5),
  #wsr-thead .wsr-grid > div:nth-child(6),
  .wsr-row .wsr-grid > .wsr-cell-typ,
  .wsr-row .wsr-grid > .wsr-cell-website,
  .wsr-row .wsr-grid > .wsr-cell-erkannt { display: none; }

  .wsl-grid { grid-template-columns: 130px minmax(160px, 1fr) 140px; }
  #wsl-thead .wsl-grid > div:nth-child(3),
  #wsl-thead .wsl-grid > div:nth-child(5),
  .wsl-row .wsl-grid > .wsl-cell-typ,
  .wsl-row .wsl-grid > .wsl-cell-quelle { display: none; }
}

.wsk-cell-website, .wsk-cell-version, .wsk-cell-zuerst, .wsk-cell-zuletzt,
.wsr-cell-website, .wsr-cell-erkannt,
.wsl-cell-zeit, .wsl-cell-website, .wsl-cell-quelle {
  font-size: var(--font-base);
  color: var(--dark);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.wsk-cell-website.is-empty,
.wsr-cell-website.is-empty,
.wsl-cell-website.is-empty { color: var(--mid); }

/* Website-Spalte = Domain als Link ins neue Fenster (Renderer:
   webservice-cells.js). Pfeil-Icon nur als Ziel-Hinweis, gedaempft; Hover
   nutzt den Akzent-Token wie der Live-Link in der Websites-Liste. */
.ws-domain-link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  min-width: 0;
  color: var(--dark);
  text-decoration: none;
}
.ws-domain-link i { color: var(--mid); font-size: var(--font-xs); flex: 0 0 auto; }
.ws-domain-link:hover { color: var(--accent); text-decoration: underline; }
.ws-domain-link:hover i { color: var(--accent); }

.wsk-update { color: var(--orange); font-weight: var(--weight-semi); }

/* Hinweis-Spalte der Komponenten: Wort-Pillen, nur wenn es etwas zu sagen
   gibt (leere Zelle bleibt leer). Nur Farben - Geometrie/Font kommen aus
   .idf-pill-tag. Aktiv/Inaktiv sitzt als Check-Pille vorne und braucht
   hier gar keine Pille mehr. */
.wsk-cell-hinweis { display: flex; align-items: center; gap: var(--space-1); flex-wrap: wrap; }
.ws-hinweis-pill.is-abandoned { background: var(--tint-orange); color: var(--orange); }
.ws-hinweis-pill.is-entfernt  { background: var(--neutral-bg);  color: var(--soft); }

/* Risiko-Stufen (gelb = Warnung, rot = Alarm) */
.ws-risk-badge.is-gelb { background: color-mix(in srgb, var(--yellow-text, #b58600) 14%, transparent); color: var(--yellow-text, #b58600); }
.ws-risk-badge.is-rot  { background: var(--tint-primary); color: var(--primary); }
.wsr-row.is-behoben .wsr-cell-titel { color: var(--mid); }

/* Logbuch-Typ-Pillen: neutral, semantische Faelle getoent */
.ws-log-badge { background: var(--neutral-bg); color: var(--mid); }
.ws-log-badge.is-finding_behoben,
.ws-log-badge.is-entwarnung { background: var(--tint-confirm); color: var(--confirm); }
.ws-log-badge.is-ausfall,
.ws-log-badge.is-verstoss   { background: var(--tint-primary); color: var(--primary); }
.ws-log-badge.is-update,
.ws-log-badge.is-eingriff   { background: var(--tint-accent);  color: var(--accent); }
.ws-log-badge.is-finding_neu { background: var(--tint-orange); color: var(--orange); }

/* ---- Reiter "DSGVO" im Website-Modal (dsgvo-tab.js) ----
   Read-only-Ansicht des Datenschutz-Stands. Farben kommen aus den Tokens,
   die Ampel-Schwellen aus dem Flow (Ampel-SSOT in ARCHITECTURE.md). */
.ws-dsgvo-loading { color: var(--mid); padding: var(--space-4) 0; }

/* Kopfzeile: grosse Score-Zahl links, Termine rechts. Getoent wird nur bei
   Problem (Design-Regel "Ampel-Kacheln nur bei Problem faerben"). */
.ws-dsgvo-kopf {
  display: flex;
  align-items: center;
  gap: var(--space-6);
  padding: var(--space-4);
  border-radius: var(--idf-form-radius);
  background: var(--neutral-bg);
}
.ws-dsgvo-kopf.is-gelb { background: var(--tint-yellow); }
.ws-dsgvo-kopf.is-rot  { background: var(--tint-red); }

.ws-dsgvo-score { display: flex; align-items: baseline; gap: var(--space-2); }
.ws-dsgvo-score-zahl  { font-size: 2.4rem; font-weight: var(--weight-black); line-height: 1; color: var(--ink); }
.ws-dsgvo-score-label { font-size: var(--font-sm); color: var(--mid); }
.ws-dsgvo-kopf-meta   { display: flex; flex-direction: column; gap: var(--space-1); font-size: var(--font-sm); }

/* Kategorie-Balken. Bewusst schlicht: die Zahl ist die Aussage, der Balken
   macht den Vergleich zwischen den fuenf Kategorien auf einen Blick lesbar. */
.ws-dsgvo-kats { display: flex; flex-direction: column; gap: var(--space-2); }
.ws-dsgvo-kat {
  display: grid;
  grid-template-columns: minmax(140px, 220px) 1fr 40px;
  align-items: center;
  gap: var(--space-3);
  font-size: var(--font-sm);
}
.ws-dsgvo-kat-bar {
  height: 8px;
  border-radius: var(--radius-xs);
  background: var(--shade-08);
  overflow: hidden;
}
.ws-dsgvo-kat-bar > span { display: block; height: 100%; background: var(--accent); }
.ws-dsgvo-kat-wert { text-align: right; font-weight: var(--weight-bold); }

/* Befunde. Der farbige Streifen links traegt die Stufe, damit die Liste beim
   Ueberfliegen sortiert wirkt, ohne dass jede Karte eingefaerbt ist. */
.ws-dsgvo-befunde { display: flex; flex-direction: column; gap: var(--space-3); }
.ws-dsgvo-befund {
  padding: var(--space-3);
  border-left: 3px solid var(--border);
  background: var(--neutral-bg);
  border-radius: var(--idf-form-radius);
  font-size: var(--font-sm);
}
.ws-dsgvo-befund.is-critical { border-left-color: var(--primary); }
.ws-dsgvo-befund.is-warning  { border-left-color: var(--orange); }
.ws-dsgvo-befund.is-info     { border-left-color: var(--mid); }
.ws-dsgvo-befund.is-ok       { border-left-color: var(--confirm); }

.ws-dsgvo-befund-kopf   { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
.ws-dsgvo-befund-text   { margin-top: var(--space-2); color: var(--mid); }
.ws-dsgvo-befund-beleg  { margin-top: var(--space-2); font-family: var(--font-mono, monospace); font-size: var(--font-xs); word-break: break-all; }
.ws-dsgvo-befund-tipp   { margin-top: var(--space-2); color: var(--ink); }
.ws-dsgvo-befund-tipp i { color: var(--accent); margin-right: 4px; }

.ws-dsgvo-sev.is-critical { background: var(--tint-primary); color: var(--primary); }
.ws-dsgvo-sev.is-warning  { background: var(--tint-orange);  color: var(--orange); }
.ws-dsgvo-sev.is-info     { background: var(--neutral-bg);   color: var(--mid); }
.ws-dsgvo-sev.is-ok       { background: var(--tint-confirm); color: var(--confirm); }
.ws-dsgvo-sev.is-gruen    { background: var(--tint-confirm); color: var(--confirm); }
.ws-dsgvo-sev.is-gelb     { background: var(--tint-yellow);  color: var(--yellow-text, #b58600); }
.ws-dsgvo-sev.is-rot      { background: var(--tint-primary); color: var(--primary); }

.ws-dsgvo-anzahl {
  display: inline-block;
  padding: 0 6px;
  border-radius: 8px;
  background: var(--tint-primary);
  color: var(--primary);
  font-size: var(--font-xs);
  font-weight: var(--weight-bold);
}

.ws-dsgvo-bestanden { margin-top: var(--space-3); }
.ws-dsgvo-bestanden > summary { cursor: pointer; color: var(--mid); font-size: var(--font-sm); }
.ws-dsgvo-bestanden > div { margin-top: var(--space-3); }

/* Historie: eine Zeile je Pruefung, Datum - Score-Pille - Ausloeser. */
.ws-dsgvo-hist { display: flex; flex-direction: column; gap: var(--space-2); }
.ws-dsgvo-hist-zeile {
  display: grid;
  grid-template-columns: 110px 60px 1fr;
  align-items: center;
  gap: var(--space-3);
  font-size: var(--font-sm);
}
.ws-dsgvo-hist-ausloeser { color: var(--mid); }

/* ---- Kopf des DSGVO-Reiters: Score links, Termine rechts ----
   Gestapelte Angaben kosten drei Zeilen Hoehe und lassen rechts alles frei
   (Joerg 2026-07-28). Die Felder stehen deshalb nebeneinander und ruecken
   erst auf schmalem Schirm untereinander. */
.ws-dsgvo-kopf {
  justify-content: space-between;
  flex-wrap: wrap;
}
.ws-dsgvo-kopf-meta {
  flex-direction: row;
  align-items: center;
  gap: var(--space-6);
  flex-wrap: wrap;
}
.ws-dsgvo-meta-feld { display: flex; flex-direction: column; gap: 2px; }
.ws-dsgvo-meta-label {
  font-size: var(--font-xs);
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--mid);
}
.ws-dsgvo-meta-wert { font-weight: var(--weight-semi); }
.ws-dsgvo-bericht-link { white-space: nowrap; }

/* "Jetzt pruefen" (#379). Der Knopf sitzt im Kopf neben den Terminen, weil er
   genau die dort stehenden Werte erneuert. Keine eigene Knopf-Optik - das ist
   der Shared-Baustein .idf-btn, hier steht nur die Ausrichtung in der
   Meta-Zeile (die Geschwister sind zweizeilige Label/Wert-Paare). */
.ws-dsgvo-aktion { display: flex; }
.ws-dsgvo-kopf-meta .ws-dsgvo-pruefen { align-self: center; white-space: nowrap; }

@media (max-width: 700px) {
  .ws-dsgvo-kopf-meta { flex-direction: column; align-items: flex-start; gap: var(--space-2); }
}


/* ---- Reiter "Komponenten": Plugins und Themes nebeneinander ----
   Modul-eigen sind hier NUR die zweispaltige Anordnung der beiden Bloecke
   und die Farb-Modifier der Pillen. Zeilen-Geometrie, Abstaende, Hover und
   Schriftgroesse kommen komplett aus dem Shared-Baustein
   `.idf-sa-relation-list` / `.idf-sa-relation-item` (functions/detail-modal),
   also aus demselben Baustein, den die Relations-Reiter dieses Modals
   ohnehin benutzen. Ein Eigenbau hier hatte kleinere Schrift und schob die
   Marker in eine zweite Rasterzeile - beides Abweichungen vom Standard
   (Joerg 2026-07-28). */
/* Ladezeile: Spinner und Text in einer Zeile. Ohne den `.idf-form >`-Teil
   greift `.idf-form > .idf-form-row-full { display: grid }` (0,2,0) und
   stellt den Spinner ueber den Text. */
.idf-form > .idf-form-row-full.wsk-loading { display: block; }
.wsk-loading { color: var(--mid); padding: var(--space-4) 0; }

/* Zwei Spalten (Plugins | Themes). `display: grid` und die Spalten stimmen
   auch ohne Qualifizierung, aber das `gap: var(--space-1)` aus
   `.idf-form > .idf-form-row-full` (0,2,0) schlug den Abstand hier (0,1,0):
   die beiden Spalten standen 4 px statt 24 px auseinander. */
.idf-form > .idf-form-row-full.wsk-spalten,
.wsk-spalten {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-6);
  align-items: start;
}
@media (max-width: 900px) {
  .wsk-spalten { grid-template-columns: 1fr; }
}

.wsk-spalte { min-width: 0; }

/* Die Ueberschrift steht hier oben in ihrer Spalte, nicht zwischen zwei
   Abschnitten eines Formulars: der margin-top des Bausteins wuerde die
   beiden Spalten gegeneinander verschieben. Nur der Abstand, die Optik
   bleibt (Issue 771). */
.wsk-spalte > .idf-form-abschnitt { margin-top: 0; }

/* Version rechts am Zeilenende, Ziffern gleich breit fuer ruhige Kanten. */
.wsk-version { color: var(--mid); font-variant-numeric: tabular-nums; }

/* Inaktive gedaempft: installiert, aber ohne Wirkung auf der Site. */
.idf-sa-relation-item.is-inaktiv .idf-sa-relation-label { color: var(--mid); }

/* Nur Farbe, keine Geometrie - die Pillen-Form kommt aus .idf-pill-tag. */
.wsk-pill.is-update    { background: var(--tint-orange);  color: var(--orange); }
.wsk-pill.is-abandoned { background: var(--tint-primary); color: var(--primary); }
.wsk-pill.is-inaktiv   { background: var(--neutral-bg);   color: var(--mid); }