/* Windows-Updates - Gestaltung
   Formensprache: Fluent, wie /pdf. Ruhige Grundflaeche, weisse Karten mit
   feiner Kontur, ein Akzentblau. Die Wichtigkeit bekommt eigene, gedaempfte
   Farben (Rot fuer kritisch, Bernstein fuer wichtig) - das ist hier Inhalt,
   nicht Schmuck.

   Alle Farben liegen als Token auf :root. Die dunkle Fassung ueberschreibt nur
   Token, nie einzelne Bausteine. */

:root {
  color-scheme: light;

  --grund:        #f3f3f3;
  --karte:        #ffffff;
  --leiste:       #ffffff;
  --senke:        #fafafa;

  --text:         #1b1b1b;
  --text-leise:   #616161;
  --text-fein:    #8a8a8a;
  --text-aus:     #a6a6a6;

  --kontur:       rgba(0, 0, 0, .0578);
  --kontur-klar:  #e0e0e0;
  --trenner:      #e5e5e5;

  --akzent:       #0078d4;
  --akzent-hover: #106ebe;
  --akzent-tief:  #005a9e;
  --auf-akzent:   #ffffff;
  --akzent-hauch: #eff6fc;
  --akzent-rand:  #a9d3f2;

  --warn:         #c42b1c;
  --warn-hauch:   #fdf3f2;
  --warn-rand:    #f1b8b2;

  --amber:        #9d5d00;
  --amber-hauch:  #fff8e6;
  --amber-rand:   #f2d48c;

  --gruen:        #0f7b0f;
  --gruen-hauch:  #f0f9f0;
  --gruen-rand:   #b5dfb5;

  --fuellung-hover:  rgba(0, 0, 0, .0373);
  --fuellung-druck:  rgba(0, 0, 0, .0241);

  --schatten-karte:  0 1px 2px rgba(0, 0, 0, .06);

  --schrift: 'Segoe UI Variable Text', 'Segoe UI', system-ui, -apple-system,
             'Helvetica Neue', Arial, sans-serif;
  --anzeige: 'Segoe UI Variable Display', 'Segoe UI Semibold', 'Segoe UI',
             system-ui, -apple-system, Arial, sans-serif;
  --fest: 'Cascadia Mono', Consolas, 'SF Mono', ui-monospace, monospace;

  --eck: 4px;
  --eck-karte: 8px;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;

    --grund:        #1f1f1f;
    --karte:        #2b2b2b;
    --leiste:       #272727;
    --senke:        #202020;

    --text:         #ffffff;
    --text-leise:   #c7c7c7;
    --text-fein:    #9a9a9a;
    --text-aus:     #6f6f6f;

    --kontur:       rgba(255, 255, 255, .0698);
    --kontur-klar:  #3d3d3d;
    --trenner:      #383838;

    --akzent:       #60cdff;
    --akzent-hover: #7fd8ff;
    --akzent-tief:  #4cc2ff;
    --auf-akzent:   #003a50;
    --akzent-hauch: #133a4d;
    --akzent-rand:  #2f6d8a;

    --warn:         #ff99a4;
    --warn-hauch:   #442726;
    --warn-rand:    #6e3a3a;

    --amber:        #fce100;
    --amber-hauch:  #433519;
    --amber-rand:   #6b5a2a;

    --gruen:        #6ccb5f;
    --gruen-hauch:  #1f3a22;
    --gruen-rand:   #2f5a34;

    --fuellung-hover:  rgba(255, 255, 255, .0605);
    --fuellung-druck:  rgba(255, 255, 255, .0419);

    --schatten-karte:  0 1px 2px rgba(0, 0, 0, .3);
  }
}

:root[data-theme="dark"] {
  color-scheme: dark;

  --grund:        #1f1f1f;
  --karte:        #2b2b2b;
  --leiste:       #272727;
  --senke:        #202020;

  --text:         #ffffff;
  --text-leise:   #c7c7c7;
  --text-fein:    #9a9a9a;
  --text-aus:     #6f6f6f;

  --kontur:       rgba(255, 255, 255, .0698);
  --kontur-klar:  #3d3d3d;
  --trenner:      #383838;

  --akzent:       #60cdff;
  --akzent-hover: #7fd8ff;
  --akzent-tief:  #4cc2ff;
  --auf-akzent:   #003a50;
  --akzent-hauch: #133a4d;
  --akzent-rand:  #2f6d8a;

  --warn:         #ff99a4;
  --warn-hauch:   #442726;
  --warn-rand:    #6e3a3a;

  --amber:        #fce100;
  --amber-hauch:  #433519;
  --amber-rand:   #6b5a2a;

  --gruen:        #6ccb5f;
  --gruen-hauch:  #1f3a22;
  --gruen-rand:   #2f5a34;

  --fuellung-hover:  rgba(255, 255, 255, .0605);
  --fuellung-druck:  rgba(255, 255, 255, .0419);

  --schatten-karte:  0 1px 2px rgba(0, 0, 0, .3);
}

/* --- Grundlage ----------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }

html { scroll-padding-top: 120px; }

body {
  margin: 0;
  min-height: 100dvh;
  font-family: var(--schrift);
  font-size: 14px;
  line-height: 1.45;
  color: var(--text);
  background: var(--grund);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 { margin: 0; font-family: var(--anzeige); font-weight: 600; }
p { margin: 0; }
a { color: var(--akzent); }
a:hover { color: var(--akzent-hover); }

.nurlesbar {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.sinnbilder { position: absolute; width: 0; height: 0; overflow: hidden; }

.sym {
  width: 16px; height: 16px;
  flex: 0 0 auto;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

:where(button, input, select, [tabindex]):focus-visible {
  outline: 2px solid var(--text);
  outline-offset: 1px;
  border-radius: var(--eck);
}

.sprungmarke {
  position: fixed;
  top: 8px; left: 8px;
  z-index: 90;
  transform: translateY(-200%);
  padding: 8px 14px;
  background: var(--akzent);
  color: var(--auf-akzent);
  font-weight: 600;
  text-decoration: none;
  border-radius: var(--eck);
}
.sprungmarke:focus { transform: none; }

/* --- Knoepfe -------------------------------------------------------------- */

.knopf {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  background: var(--karte);
  border: 1px solid var(--kontur-klar);
  border-radius: var(--eck);
  padding: 5px 12px;
  min-height: 32px;
  cursor: pointer;
  white-space: nowrap;
  transition: background-color .1s ease, border-color .1s ease;
}
.knopf:hover:not(:disabled) { background: var(--fuellung-hover); }
.knopf:active:not(:disabled) { background: var(--fuellung-druck); }
.knopf:disabled { color: var(--text-aus); cursor: default; }

.rundknopf {
  display: grid;
  place-items: center;
  width: 32px; height: 32px;
  padding: 0;
  font: inherit;
  color: var(--text-leise);
  background: transparent;
  border: 0;
  border-radius: var(--eck);
  cursor: pointer;
  transition: background-color .1s ease, color .1s ease;
}
.rundknopf:hover { background: var(--fuellung-hover); color: var(--text); }
.rundknopf:active { background: var(--fuellung-druck); }
.rundknopf:disabled { color: var(--text-aus); cursor: default; }

.knopf-leise {
  font: inherit;
  font-size: 13px;
  color: var(--akzent);
  background: transparent;
  border: 0;
  padding: 2px 4px;
  cursor: pointer;
  border-radius: var(--eck);
}
.knopf-leise:hover { background: var(--akzent-hauch); }

/* --- Kopf ----------------------------------------------------------------- */

/* Kopf, Werkzeuge und Liste teilen sich dieselbe Spalte - sonst klebt der
   Kopf links am Rand, waehrend die Liste in der Mitte steht. */
.innen { max-width: 1080px; margin: 0 auto; padding: 0 16px; }

.seitenkopf {
  background: var(--leiste);
  border-bottom: 1px solid var(--trenner);
}

.kopf-zeile {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 24px;
  min-height: 64px;
  padding-top: 12px;
  padding-bottom: 12px;
}

.marke { display: flex; align-items: center; gap: 10px; }
.marke-zeichen { width: 26px; height: 26px; }
.mz-feld { fill: var(--text-fein); }
.mz-akzent { fill: var(--akzent); }
.marke-wort { font-size: 20px; font-weight: 600; letter-spacing: -.01em; }

.untertitel {
  flex: 1 1 360px;
  font-size: 13.5px;
  color: var(--text-leise);
  text-wrap: pretty;
}

.titel-rechts { margin-left: auto; display: flex; align-items: center; gap: 8px; }

.stand { font-size: 12.5px; color: var(--text-fein); white-space: nowrap; }
.stand.laeuft { color: var(--akzent); }
.stand.fehler { color: var(--warn); }

.rundknopf.dreht .sym { animation: drehen 1s linear infinite; }
@keyframes drehen { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .rundknopf.dreht .sym { animation: none; } }

/* --- Werkzeuge ------------------------------------------------------------ */

.werkzeuge {
  position: sticky;
  top: 0;
  z-index: 19;
  background: var(--leiste);
  border-bottom: 1px solid var(--trenner);
}

.werkzeuge-zeile {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 16px;
  padding-top: 10px;
  padding-bottom: 10px;
}

.versionen { display: flex; flex-wrap: wrap; gap: 6px; }

.suchfeld {
  flex: 1 1 240px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 10px;
  min-height: 34px;
  background: var(--karte);
  border: 1px solid var(--kontur-klar);
  border-bottom-color: var(--text-fein);
  border-radius: var(--eck);
  color: var(--text-fein);
}
.suchfeld:focus-within { border-bottom: 2px solid var(--akzent); }
.suchfeld input {
  flex: 1 1 auto;
  min-width: 0;
  font: inherit;
  color: var(--text);
  background: transparent;
  border: 0;
  outline: 0;
  padding: 0;
}
.suchfeld input::placeholder { color: var(--text-fein); }
.suchfeld input::-webkit-search-cancel-button { -webkit-appearance: none; }

.chip {
  font: inherit;
  font-size: 13.5px;
  color: var(--text);
  background: var(--karte);
  border: 1px solid var(--kontur-klar);
  border-radius: 999px;
  padding: 4px 14px;
  min-height: 32px;
  cursor: pointer;
  white-space: nowrap;
  transition: background-color .1s ease, border-color .1s ease, color .1s ease;
}
.chip:hover { background: var(--fuellung-hover); }
.chip[aria-pressed="true"] {
  background: var(--akzent);
  border-color: transparent;
  color: var(--auf-akzent);
  font-weight: 600;
}

.haken { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; color: var(--text-leise); cursor: pointer; white-space: nowrap; }
.haken input { width: 16px; height: 16px; margin: 0; accent-color: var(--akzent); }

/* --- Inhalt --------------------------------------------------------------- */

.inhalt {
  max-width: 1080px;
  margin: 0 auto;
  padding: 16px 16px 40px;
}

.kopfzeile-liste {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 6px 16px;
  margin-bottom: 12px;
}

.zusammenfassung { font-size: 13px; color: var(--text-fein); }
.zusammenfassung b { color: var(--text-leise); font-weight: 600; }

.legende { font-size: 13px; flex: 1 1 100%; }
.legende summary {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  cursor: pointer;
  color: var(--akzent);
  list-style: none;
  user-select: none;
}
.legende summary::-webkit-details-marker { display: none; }
.legende summary:hover { text-decoration: underline; }
.legende summary .sym { width: 14px; height: 14px; }
.legende dl {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  gap: 8px 16px;
  margin: 12px 0 4px;
  padding: 14px 16px;
  background: var(--karte);
  border: 1px solid var(--kontur-klar);
  border-radius: var(--eck-karte);
  color: var(--text-leise);
}
.legende dt { font-weight: 600; color: var(--text); }
.legende dd { margin: 0; }
@media (max-width: 560px) {
  .legende dl { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .legende dd { margin-bottom: 8px; }
}

.meldung {
  display: flex; align-items: flex-start; gap: 8px;
  font-size: 13px;
  color: var(--amber);
  background: var(--amber-hauch);
  border: 1px solid var(--amber-rand);
  border-radius: var(--eck);
  padding: 8px 10px;
  margin-bottom: 12px;
}

.leer { color: var(--text-fein); padding: 32px 0; text-align: center; }

.nachladen { display: flex; justify-content: center; padding: 16px 0 0; }

/* Tagesgruppen */

.tag { margin-bottom: 20px; }
.tag-kopf {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 6px 0;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-leise);
}
.tag-kopf .hinweis {
  font-size: 11.5px;
  font-weight: 600;
  color: var(--akzent);
  background: var(--akzent-hauch);
  border-radius: 999px;
  padding: 1px 8px;
}
.tag-kopf .anzahl { font-weight: 400; color: var(--text-fein); }

/* Eintraege */

.eintrag {
  background: var(--karte);
  border: 1px solid var(--kontur-klar);
  border-radius: var(--eck-karte);
  box-shadow: var(--schatten-karte);
  margin-bottom: 6px;
}
.eintrag.offen { border-color: var(--akzent-rand); }

.kopf {
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr) auto 24px;
  grid-template-areas: "kb haupt meta pfeil" "kb unten meta pfeil";
  align-items: center;
  column-gap: 12px;
  row-gap: 3px;
  width: 100%;
  padding: 10px 12px 10px 14px;
  font: inherit;
  text-align: left;
  color: inherit;
  background: transparent;
  border: 0;
  border-radius: var(--eck-karte);
  cursor: pointer;
}
.kopf:hover { background: var(--fuellung-hover); }
.eintrag.offen .kopf { border-radius: var(--eck-karte) var(--eck-karte) 0 0; }

.kb {
  grid-area: kb;
  font-family: var(--fest);
  font-size: 13.5px;
  font-weight: 600;
  color: var(--text);
  white-space: nowrap;
}

.haupt { grid-area: haupt; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; min-width: 0; }
.produkte { font-weight: 600; overflow-wrap: anywhere; }
.produkte .mehr { font-weight: 400; color: var(--text-fein); }

.unten { grid-area: unten; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 12.5px; color: var(--text-fein); min-width: 0; }
.unten .titel { color: var(--text-leise); }

.meta {
  grid-area: meta;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
  font-size: 12.5px;
  color: var(--text-fein);
  white-space: nowrap;
}
.meta .cvss { font-family: var(--fest); }

.pfeil { grid-area: pfeil; color: var(--text-fein); transition: transform .15s ease; }
.eintrag.offen .pfeil { transform: rotate(180deg); }

/* Marken */

.marke-leiste { display: inline-flex; flex-wrap: wrap; gap: 4px; }

.mk {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11.5px;
  font-weight: 600;
  line-height: 1.2;
  padding: 2px 7px;
  border-radius: var(--eck);
  border: 1px solid var(--kontur-klar);
  color: var(--text-leise);
  background: var(--senke);
  white-space: nowrap;
}
.mk .sym { width: 12px; height: 12px; stroke-width: 2; }

.mk-kritisch  { color: var(--warn);   background: var(--warn-hauch);   border-color: var(--warn-rand); }
.mk-wichtig   { color: var(--amber);  background: var(--amber-hauch);  border-color: var(--amber-rand); }
.mk-mittel,
.mk-niedrig   { color: var(--text-leise); }
.mk-ausgenutzt{ color: var(--warn); border-color: var(--warn); background: transparent; }
.mk-problem   { color: var(--amber);  background: var(--amber-hauch);  border-color: var(--amber-rand); }
.mk-problem-behoben { color: var(--text-leise); }
.mk-behebt    { color: var(--gruen);  background: var(--gruen-hauch);  border-color: var(--gruen-rand); }
.mk-neu       { color: var(--auf-akzent); background: var(--akzent); border-color: transparent; }
.mk-art       { font-weight: 400; }

/* Status der bekannten Probleme */
.st-bestaetigt, .st-untersuchung, .st-offen { color: var(--warn); background: var(--warn-hauch); border-color: var(--warn-rand); }
.st-abgemildert { color: var(--amber); background: var(--amber-hauch); border-color: var(--amber-rand); }
.st-behoben, .st-behoben-extern { color: var(--gruen); background: var(--gruen-hauch); border-color: var(--gruen-rand); }
.st-artikel { color: var(--text-leise); }

/* --- Detail --------------------------------------------------------------- */

.detail {
  border-top: 1px solid var(--trenner);
  padding: 14px 16px 16px;
  display: grid;
  gap: 18px;
}
.detail[hidden] { display: none; }

.detail-kopf { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 16px; }
.detail-kopf h3 { font-size: 15px; }
.detail-kopf .links { display: flex; flex-wrap: wrap; gap: 14px; font-size: 13px; }
.detail-kopf .links a { display: inline-flex; align-items: center; gap: 4px; text-decoration: none; }
.detail-kopf .links a:hover { text-decoration: underline; }
.detail-kopf .links .sym { width: 13px; height: 13px; }

.abschnitt h3 {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--text-fein);
  margin-bottom: 8px;
}
.abschnitt h3 .anzahl { font-weight: 400; text-transform: none; letter-spacing: 0; }

.lade { color: var(--text-fein); font-size: 13px; }
.fehl { color: var(--warn); font-size: 13px; }

.fakten { display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: 13px; color: var(--text-leise); }
.fakten b { color: var(--text); font-weight: 600; }

/* Probleme */

.problem {
  border: 1px solid var(--kontur-klar);
  border-radius: var(--eck);
  padding: 10px 12px;
  margin-bottom: 8px;
  background: var(--senke);
}
.problem-kopf { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.problem-kopf .titel { font-weight: 600; flex: 1 1 260px; }
.problem-meta { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 12.5px; color: var(--text-fein); margin-top: 4px; }
.problem-meta button { font-size: 12.5px; padding: 0 2px; }
.problem-kurz { margin-top: 6px; color: var(--text-leise); }

.problem details { margin-top: 6px; }
.problem summary { cursor: pointer; font-size: 13px; color: var(--akzent); user-select: none; }
.problem summary:hover { text-decoration: underline; }

.fremd { font-size: 13.5px; color: var(--text); margin-top: 8px; overflow-wrap: anywhere; }
.fremd p, .fremd ul, .fremd ol, .fremd pre, .fremd table { margin: 0 0 8px; }
.fremd ul, .fremd ol { padding-left: 22px; }
.fremd li { margin-bottom: 2px; }
.fremd code { font-family: var(--fest); font-size: 12.5px; background: var(--fuellung-hover); padding: 0 4px; border-radius: 3px; }
.fremd pre { font-family: var(--fest); font-size: 12.5px; background: var(--fuellung-hover); padding: 8px 10px; border-radius: var(--eck); overflow-x: auto; }
.fremd pre code { background: none; padding: 0; }
.fremd table { border-collapse: collapse; font-size: 13px; max-width: 100%; }
.fremd th, .fremd td { border: 1px solid var(--kontur-klar); padding: 4px 8px; text-align: left; vertical-align: top; }
.fremd h3, .fremd h4 { font-size: 13.5px; margin: 10px 0 4px; }
.fremd details { margin-bottom: 8px; }
.fremd summary { cursor: pointer; font-weight: 600; }

.keine { font-size: 13px; color: var(--text-leise); display: inline-flex; align-items: center; gap: 6px; }
.keine .sym { color: var(--gruen); }

/* CVE-Tabelle */

.cves { width: 100%; border-collapse: collapse; font-size: 13px; }
.cves th { text-align: left; font-weight: 600; color: var(--text-fein); font-size: 12px; padding: 4px 8px 6px 0; border-bottom: 1px solid var(--trenner); }
.cves td { padding: 5px 8px 5px 0; border-bottom: 1px solid var(--kontur); vertical-align: top; }
.cves td.cve { font-family: var(--fest); white-space: nowrap; }
.cves td.cve a { text-decoration: none; }
.cves td.cve a:hover { text-decoration: underline; }
.cves td.wert { font-family: var(--fest); text-align: right; white-space: nowrap; }
.cves .flaggen { display: inline-flex; gap: 4px; margin-left: 6px; vertical-align: middle; }

.tabelle-rahmen { overflow-x: auto; }

/* Produkte im Detail */
.produktliste { display: flex; flex-wrap: wrap; gap: 4px; }
.produktliste span {
  font-size: 12.5px;
  padding: 2px 8px;
  border-radius: 999px;
  border: 1px solid var(--kontur-klar);
  color: var(--text-leise);
}

.fuss {
  max-width: 1080px;
  margin: 0 auto;
  padding: 0 16px 32px;
  font-size: 12px;
  color: var(--text-fein);
}

/* --- Schmale Bildschirme -------------------------------------------------- */

@media (max-width: 720px) {
  html { scroll-padding-top: 16px; }
  .stand { display: none; }
  .untertitel { order: 3; flex-basis: 100%; }   /* Titel und Knopf in einer Zeile, Erklaerung darunter */
  .werkzeuge { position: static; }
  .kopf {
    grid-template-columns: minmax(0, 1fr) 24px;
    grid-template-areas: "kb pfeil" "haupt pfeil" "unten pfeil" "meta pfeil";
    row-gap: 4px;
  }
  .meta { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 4px 10px; white-space: normal; }
  .detail { padding: 12px 12px 14px; }
}

.mk[title] { cursor: help; }

.sprachwahl {
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: .03em;
  color: var(--text-leise);
  text-decoration: none;
  padding: 5px 8px;
  border: 1px solid var(--kontur-klar);
  border-radius: var(--eck);
}
.sprachwahl:hover { background: var(--fuellung-hover); color: var(--text); }