/*
 * Seite ausserhalb des Arbeitsplatzes: Beitritt, Kopfleiste, Rueckfallkarten.
 * Alle Werte kommen aus design.css (Tokens --ds-*, Skala --fs-*). Die Marke erscheint nur
 * als kleines Zeichen in der Kopfleiste; Flaechen und Knoepfe sind neutral.
 */
:root {
  /* Altnamen, die Module und Widgets noch nutzen. Sie zeigen auf das Designsystem. */
  --red: var(--ds-brand);
  --red-dark: #8b1519;
  --gray-dark: var(--ds-text-2);
  --gray-mid: var(--ds-text-3);
  --gray-light: var(--ds-bg-muted);
  --gray-border: var(--ds-border);
  --white: var(--ds-gray-0);
}

* { box-sizing: border-box; }

/* Das hidden-Attribut gewinnt immer. Im Browser schlägt jede Klassenregel mit display
   die Vorgabe des Browsers für [hidden]; so blieb das Startmenü sichtbar, obwohl der
   Code es korrekt verbarg (.ws-startmenu setzt display:flex). Statt je Element eine
   [hidden]-Regel zu ergänzen, gilt diese eine für alle. Der Rauchtest prüft, dass sie
   da ist: jsdom wertet hidden anders als ein Browser und sieht den Fehler selbst nicht. */
[hidden] { display: none !important; }

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--fs-m);
  line-height: var(--lh-base);
  color: var(--ds-text);
  background: var(--ds-bg-muted);
  -webkit-font-smoothing: antialiased;

  /* Der Bildschirm ist eine Spalte: Kopfleiste oben, #app fuellt den Rest. So braucht
     die Hoehe keine Magic Number und stimmt bei jeder Aufloesung. */
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* Kopfleiste der Seite (nur ausserhalb des OS): dunkle Huelle mit Markenzeichen. */
.topbar {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  background: var(--ds-shell-bg);
  color: var(--ds-shell-text);
  padding: 0 var(--sp-6);
  height: 52px;
  flex-shrink: 0;   /* nimmt ihre Hoehe, gibt den Rest an #app */
  border-bottom: 1px solid var(--ds-shell-border);
}
.topbar::before {
  content: '';
  width: 22px; height: 22px; border-radius: var(--r-s);
  background: var(--ds-brand);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.08);
  flex-shrink: 0;
}

/* #app fuellt, was unter der Kopfleiste bleibt. Gilt fuer beide Ansichten: die
   zentrierte Karte (.container) sitzt dann oben, das OS (.container.wide) fuellt ganz. */
#app { flex: 1; min-height: 0; }

.brand { font-size: var(--fs-m); font-weight: var(--fw-semibold); letter-spacing: var(--ls-tight); }
.brand-sub { font-weight: var(--fw-regular); color: var(--ds-shell-text-dim); font-size: var(--fs-s); }

.container {
  max-width: 560px;
  width: 100%;
  margin: var(--sp-12) auto;
  padding: 0 var(--sp-4) var(--sp-12);
}

/* Lab-Ansicht.
 *
 * Zielgeraete sind 1366 x 768 bis 4K. Das OS fuellt den Bildschirm: KEINE Breiten- oder
 * Hoehendeckelung. Die Hoehe ist die Kopfleiste abzueglich vom Viewport; den Rest
 * verteilt Flexbox: der Host-Kasten fuellt, der Arbeitsplatz (.ws) fuellt ihn.
 */
.container.wide {
  max-width: none;
  margin: 0;
  padding: 10px 12px 12px;
  min-height: 0;   /* Hoehe kommt von #app (flex:1), nicht aus Arithmetik */
  display: flex;
  flex-direction: column;
}

.container.wide .lab-header { flex-shrink: 0; }

/* Im OS: keine Kopfleiste der Webseite, kein Rand. Der Arbeitsplatz ist der Bildschirm. */
body.os > .topbar { display: none; }
body.os { background: var(--ds-shell-bg); }
body.os .container.wide { padding: 0; }
body.os .ws { border: 0; border-radius: 0; box-shadow: none; }

/* Laptop in Zoom (1366 x 768 und darunter): Kopfleiste und Rand geben Hoehe an den
   Desktop ab. */
@media (max-height: 820px) {
  .topbar { height: 44px; padding: 0 var(--sp-4); }
  .container.wide { padding: 6px 8px 8px; }
  .container { margin: var(--sp-6) auto; }
}
/* Der Host-Kasten (osHost/widgetHost/widgetResultHost) MUSS in der Flex-Kette liegen,
   sonst faellt der Desktop auf seine Mindesthoehe zusammen. Generisch statt per id. */
.container.wide > div:not(.lab-header) {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}
.container.wide > div:not(.lab-header) > * { flex: 1; min-height: 0; }

.container.wide .lab-header {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 4px 12px;
  margin: 0 0 10px;
}
.container.wide .lab-header h1 { font-size: var(--fs-xl); margin: 0; }
.container.wide .lab-header p { flex: 1 1 100%; font-size: var(--fs-m); margin: 0; max-width: 120ch; }
.container.wide .lab-badge { margin: 0; }

/* ---------- Karte: Beitritt, Entscheidungsschritte, Rueckfallansichten ---------- */
.card {
  background: var(--ds-bg-surface);
  border: var(--bd);
  border-radius: var(--r-l);
  padding: var(--sp-8) var(--sp-8) var(--sp-6);
  margin-bottom: var(--sp-5);
  box-shadow: var(--sh-2);
}

h1 { font-size: var(--fs-xl); font-weight: var(--fw-semibold); letter-spacing: var(--ls-tight); line-height: var(--lh-tight); margin: 0 0 var(--sp-2); color: var(--ds-text); }
h2 { font-size: var(--fs-l); font-weight: var(--fw-semibold); letter-spacing: var(--ls-tight); margin: 0 0 var(--sp-2); color: var(--ds-text); }
p { margin: 0 0 var(--sp-3); }

label { display: block; font-size: var(--fs-s); font-weight: var(--fw-semibold); color: var(--ds-text-2); margin: var(--sp-4) 0 6px; }

:where(input[type=text]) {
  width: 100%;
  height: 38px;
  padding: 0 var(--sp-3);
  border: var(--bd-strong);
  border-radius: var(--r-s);
  font-size: var(--fs-l);
  font-family: inherit;
  color: var(--ds-text);
  background: var(--ds-bg-surface);
  transition: border-color var(--dur-1) var(--ease), box-shadow var(--dur-1) var(--ease);
}
:where(input[type=text])::placeholder { color: var(--ds-gray-500); }
:where(input[type=text]):hover { border-color: var(--ds-gray-400); }
:where(input[type=text]):focus { outline: none; border-color: var(--ds-primary); box-shadow: var(--focus-ring); }
/* Sitzungscode: Monospace, gesperrt, wie ein Schluessel */
#code { font-family: var(--font-mono); letter-spacing: 0.12em; font-size: var(--fs-l); }

:where(button) {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2);
  height: 38px;
  background: var(--ds-primary);
  color: #fff;
  border: 1px solid var(--ds-primary);
  border-radius: var(--r-s);
  padding: 0 var(--sp-5);
  font-size: var(--fs-m);
  font-family: inherit;
  font-weight: var(--fw-semibold);
  cursor: pointer;
  margin-top: var(--sp-5);
  transition: background var(--dur-1) var(--ease), border-color var(--dur-1) var(--ease);
}
:where(button:hover) { background: var(--ds-primary-hover); border-color: var(--ds-primary-hover); }
:where(button:active) { background: var(--ds-primary-active); }
:where(button:focus-visible) { outline: var(--focus-outline); outline-offset: 2px; }
:where(button.secondary) {
  background: var(--ds-bg-surface);
  color: var(--ds-text);
  border: var(--bd-strong);
}
:where(button.secondary:hover) { background: var(--ds-bg-hover); border-color: var(--ds-gray-400); }

.error {
  margin-top: var(--sp-3);
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--r-s);
  background: var(--ds-bad-soft);
  border-left: 3px solid var(--ds-bad);
  color: var(--ds-bad-text);
  font-size: var(--fs-s);
  font-weight: var(--fw-semibold);
}

table {
  width: 100%;
  border-collapse: collapse;
  margin: var(--sp-3) 0;
  font-size: var(--fs-m);
}
th, td {
  border-bottom: var(--bd-subtle);
  padding: var(--sp-2) var(--sp-3);
  text-align: left;
  vertical-align: top;
}
th {
  background: var(--ds-bg-muted);
  font-size: var(--fs-xs); font-weight: var(--fw-bold); text-transform: uppercase; letter-spacing: var(--ls-caps);
  color: var(--ds-text-3);
}

.choice-list { list-style: none; padding: 0; margin: var(--sp-4) 0 0; }
.choice-list li {
  border: var(--bd-strong);
  border-radius: var(--r-m);
  padding: var(--sp-3) var(--sp-4);
  margin-bottom: var(--sp-2);
  cursor: pointer;
  transition: background var(--dur-1) var(--ease), border-color var(--dur-1) var(--ease);
}
.choice-list li:hover { background: var(--ds-bg-hover); border-color: var(--ds-gray-400); }
.choice-list li.selected { border-color: var(--ds-primary); background: var(--ds-primary-soft); }

.narrative {
  background: var(--ds-info-soft);
  border-left: 3px solid var(--ds-info);
  border-radius: var(--r-s);
  padding: var(--sp-3) var(--sp-4);
  margin: var(--sp-4) 0;
  font-size: var(--fs-m);
  color: var(--ds-info-text);
}

.bucket-result h2 { color: var(--ds-text); }

/* Lab-Auswahl als Kachelraster (Rueckfallebene; der Regelfall ist das Startmenue). */
.lab-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 10px;
  margin-bottom: 20px;
}
.lab-tile {
  display: flex; align-items: center; gap: var(--sp-3); text-align: left;
  background: var(--ds-bg-surface); border: var(--bd); border-radius: var(--r-m);
  padding: var(--sp-3) var(--sp-4); cursor: pointer; margin: 0; font-family: inherit; color: var(--ds-text);
  height: auto; font-weight: var(--fw-medium);
}
.lab-tile:hover { background: var(--ds-bg-hover); border-color: var(--ds-primary); }
.lab-tile-block {
  flex-shrink: 0; width: 30px; height: 30px; border-radius: var(--r-s);
  background: var(--ds-primary); color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: var(--fs-l); font-weight: var(--fw-bold);
}
.lab-tile-title { font-size: var(--fs-m); font-weight: var(--fw-semibold); color: var(--ds-text); line-height: var(--lh-snug); }

.muted { color: var(--ds-text-3); font-size: var(--fs-m); }

/* Beitrittskarte: Kicker ueber dem Titel, Hinweis darunter, Knopf in voller Breite. */
.join-kicker { display: block; font-size: var(--fs-xs); font-weight: var(--fw-bold); text-transform: uppercase; letter-spacing: var(--ls-caps); color: var(--ds-text-3); margin-bottom: var(--sp-2); }
.join-card #joinBtn { width: 100%; margin-top: var(--sp-6); }
.join-card .muted { margin-bottom: var(--sp-2); }
.join-foot { margin: var(--sp-4) 0 0; font-size: var(--fs-xs); color: var(--ds-text-3); text-align: center; }

/* Case-Study-Rahmung über einem Lab-Werkzeug ausserhalb des OS (Rueckfallebene) */
.lab-header { margin: 4px 0 20px; }
.lab-badge {
  display: inline-block;
  background: var(--ds-primary-soft);
  color: var(--ds-primary-text);
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  border-radius: var(--r-xs);
  padding: 3px 8px;
  margin-bottom: 10px;
}
.lab-header h1 { font-size: var(--fs-xxl); margin: 0 0 8px; line-height: var(--lh-tight); }
.lab-header p { color: var(--ds-text-3); font-size: var(--fs-l); max-width: 760px; margin: 0; }

/* ---------- Altklassen der Widgets (vuln-board, access-review, log-triage, ...) ----------
   Bleiben erhalten, nehmen aber die Tokens. Die Module bekommen ihren Feinschliff spaeter. */
.vb-section { margin-bottom: 26px; }
.vb-section h3 { margin: 0 0 4px; font-size: var(--fs-l); }
.vb-card-list { list-style: none; padding: 0; margin: 12px 0; counter-reset: none; }
.vb-card {
  display: flex; justify-content: space-between; align-items: flex-start; gap: 14px;
  border: var(--bd); border-radius: var(--r-m); padding: 14px 16px; margin-bottom: 10px;
  background: var(--ds-bg-surface);
}
.vb-card-title { font-weight: var(--fw-bold); margin-bottom: 2px; }
.vb-card-meta { font-size: var(--fs-m); color: var(--ds-text-3); margin-bottom: 6px; }
.vb-card-context { font-size: var(--fs-l); margin-bottom: 10px; }
.vb-class-selector { display: flex; align-items: center; gap: 6px; }
.vb-class-btn {
  background: var(--ds-bg-surface); color: var(--ds-text); border: var(--bd-strong); border-radius: var(--r-s);
  padding: 0 12px; height: var(--ds-control-h-sm); font-weight: var(--fw-semibold); font-size: var(--fs-s); margin: 0; cursor: pointer;
}
.vb-class-btn.active { background: var(--ds-primary); color: #fff; border-color: var(--ds-primary); }
.vb-card-controls { display: flex; flex-direction: column; gap: 6px; flex-shrink: 0; }
.vb-move {
  background: var(--ds-bg-surface); color: var(--ds-text); border: var(--bd-strong); border-radius: var(--r-s);
  padding: 0 10px; height: var(--ds-control-h-sm); margin: 0; cursor: pointer; font-weight: var(--fw-medium);
}
.vb-move:disabled { opacity: 0.3; cursor: default; }

.vb-control-list { list-style: none; padding: 0; margin: 10px 0; }
.vb-control-list li { border: var(--bd); border-radius: var(--r-s); padding: 10px 14px; margin-bottom: 8px; }
.vb-control-list label { display: flex; align-items: center; gap: 10px; font-weight: var(--fw-regular); font-size: var(--fs-m); color: var(--ds-text); margin: 0; cursor: pointer; }
.vb-eff-badge {
  margin-left: auto; font-size: var(--fs-xs); font-weight: var(--fw-semibold); color: var(--ds-text-2);
  background: var(--ds-bg-sunken); border-radius: var(--r-xs); padding: 2px 8px;
}

.playback-lines p {
  padding: 8px 0;
  border-bottom: var(--bd-subtle);
  font-family: var(--font-mono);
  font-size: var(--fs-m);
}

.ar-table { width: 100%; border-collapse: collapse; font-size: var(--fs-m); margin-bottom: 8px; }
.ar-table th, .ar-table td { border-bottom: var(--bd-subtle); padding: 8px 10px; text-align: left; vertical-align: top; }

.ar-crypto-slot { margin-bottom: 14px; }
.ar-crypto-label { font-weight: var(--fw-bold); margin-bottom: 6px; }
.ar-crypto-options { display: flex; flex-wrap: wrap; gap: 8px; }
.ar-crypto-btn {
  background: var(--ds-bg-surface); color: var(--ds-text); border: var(--bd-strong); border-radius: var(--r-s);
  padding: 0 14px; height: var(--ds-control-h); font-size: var(--fs-m); margin: 0; cursor: pointer; font-weight: var(--fw-medium);
}
.ar-crypto-btn.active { background: var(--ds-primary); color: #fff; border-color: var(--ds-primary); }

.lt-log-list { list-style: none; padding: 0; margin: 10px 0; font-family: var(--font-mono); font-size: var(--fs-m); }
.lt-log-line {
  display: flex; align-items: center; gap: 12px;
  border: var(--bd); border-radius: var(--r-s); padding: 8px 12px; margin-bottom: 5px; cursor: pointer;
  background: var(--ds-bg-surface);
}
.lt-log-line:hover { background: var(--ds-bg-hover); }
.lt-log-line.flagged { border-color: var(--ds-bad); background: var(--ds-bad-soft); }
.lt-log-time { color: var(--ds-text-3); flex-shrink: 0; width: 62px; }
.lt-log-text { flex: 1; }
.lt-log-flag { flex-shrink: 0; font-size: var(--fs-s); color: var(--ds-text-3); white-space: nowrap; }
.lt-log-line.flagged .lt-log-flag { color: var(--ds-bad-text); font-weight: var(--fw-bold); }

.ic-severity-row { display: flex; gap: 8px; flex-wrap: wrap; }
.ic-severity-btn {
  background: var(--ds-bg-surface); color: var(--ds-text); border: var(--bd-strong); border-radius: var(--r-s);
  padding: 0 18px; height: var(--ds-control-h); font-weight: var(--fw-semibold); margin: 0; cursor: pointer;
}
.ic-severity-btn.active { background: var(--ds-primary); color: #fff; border-color: var(--ds-primary); }

.rs-snapshot-list { list-style: none; padding: 0; }
.rs-snapshot { border: var(--bd); border-radius: var(--r-s); padding: 10px 14px; margin-bottom: 6px; cursor: pointer; }
.rs-snapshot:hover { background: var(--ds-bg-hover); }
.rs-snapshot.selected { border-color: var(--ds-primary); background: var(--ds-primary-soft); font-weight: var(--fw-semibold); }

.vd-vendor-card { border: var(--bd); border-radius: var(--r-m); padding: 14px 16px; margin-bottom: 12px; }
.vd-vendor-title { font-weight: var(--fw-bold); margin-bottom: 4px; }
.vd-vendor-actions { margin-top: 10px; }

/* ---------- Workplace V3: Beitritt im Auftritt des Arbeitsplatzes ----------
   Ausserhalb des OS liegt die Seite auf demselben Hintergrund wie der Desktop; die Karte
   schwebt darueber wie eine Anmeldung am Firmenrechner. */
body:not(.os) { background: var(--ds-wallpaper); background-attachment: fixed; }
body:not(.os) > .topbar { background: rgba(10, 17, 29, 0.72); border-bottom-color: rgba(255, 255, 255, 0.06); backdrop-filter: blur(12px); }
body:not(.os) > .topbar::before {
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop offset='0' stop-color='%2314b8a6'/%3E%3Cstop offset='1' stop-color='%232563eb'/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect x='1' y='1' width='22' height='22' rx='6' fill='url(%23g)'/%3E%3Cpath d='M8.2 17.2V10.6a3.4 3.4 0 0 1 3.4-3.4h2.6' fill='none' stroke='%23fff' stroke-width='2.6' stroke-linecap='round'/%3E%3Ccircle cx='16' cy='15.6' r='1.9' fill='%23fff'/%3E%3C/svg%3E") center / contain no-repeat;
  box-shadow: none;
}
body:not(.os) .container:not(.wide) { margin-top: max(var(--sp-8), 12vh); max-width: 460px; }
.join-card {
  background: rgba(255, 255, 255, 0.97);
  border: 0;
  border-radius: 16px;
  padding: var(--sp-10) var(--sp-8) var(--sp-8);
  box-shadow: 0 40px 100px -30px rgba(0, 0, 0, 0.75), 0 0 0 1px rgba(255, 255, 255, 0.4);
}
.join-mark { display: inline-flex; width: 44px; height: 44px; margin-bottom: var(--sp-4); }
.join-mark svg { width: 44px; height: 44px; filter: drop-shadow(0 6px 14px rgba(37, 99, 235, 0.35)); }
.join-card h1 { font-size: var(--fs-xxl); letter-spacing: var(--ls-tight); margin: 0 0 var(--sp-4); }
.join-card label { color: var(--ds-text-2); }
.join-card input { height: 42px; border-radius: var(--r-m); }
.join-card #joinBtn { height: 44px; border-radius: var(--r-m); font-size: var(--fs-m); font-weight: var(--fw-semibold); background: linear-gradient(135deg, #2563eb, #1d4ed8); border: 0; box-shadow: 0 8px 20px -8px rgba(37, 99, 235, 0.7); }
.join-card #joinBtn:hover { background: linear-gradient(135deg, #1d4ed8, #1e40af); }