/* Betriebssystem Optionen — seitenspezifische Komponenten
   Ausgelagert aus betriebssystem-optionen.html (Task P1-02, 03.08.2026).
   Hero-Systemkarte, Cockpit, Ebenen, Modul-Karte. Basis: assets/css/base.css */

/* Seitenspezifische Komponenten (Hero-Systemkarte, Cockpit, Ebenen, Modul-Karte) */
/* Red-Team RT06 (06.09.2026): Hero kompakter, damit CTA und Signaturbild bei
   1366x768 im ersten Bildschirm stehen. Kein 100vh-Zwang mehr. */
.hero-grid {
  min-height: auto;
  padding: 40px 0 56px;
  display: grid;
  grid-template-columns: minmax(0, .93fr) minmax(420px, 1.07fr);
  align-items: start;
  gap: 44px;
}

.hero-grid h1 { margin-bottom: 14px; font-size: clamp(40px, 4.3vw, 62px); line-height: 1.02; }
.hero-grid .lead { margin-bottom: 18px; font-size: clamp(18px, 1.55vw, 22px); }
.hero-grid .trust-row { margin-top: 18px; }

.hero-system-card {
  position: relative;
  min-height: 460px;
  border: 1px solid rgba(216, 199, 173, .88);
  border-radius: var(--radius-lg);
  background: var(--dark);
  box-shadow: 0 28px 70px rgba(34, 26, 12, .12);
  overflow: hidden;
}

.hero-system-card img {
  width: 100%;
  height: 100%;
  min-height: 460px;
  object-fit: cover;
  object-position: 40% center;
}

.hero-system-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(255, 253, 248, .02) 36%, rgba(18, 18, 15, .78) 100%),
    linear-gradient(90deg, rgba(18, 18, 15, .20), transparent 56%);
  pointer-events: none;
}

.image-readout {
  position: absolute;
  left: 18px;
  right: 18px;
  bottom: 18px;
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  padding: 14px;
  border: 1px solid rgba(255, 253, 247, .18);
  border-radius: var(--radius);
  background: rgba(18, 18, 15, .76);
  backdrop-filter: blur(14px);
}

.image-readout div {
  min-height: 84px;
  padding: 14px;
  border: 1px solid rgba(47, 111, 151, .36);
  border-radius: var(--radius);
  background: rgba(255, 253, 247, .065);
}

.image-readout b {
  display: block;
  color: var(--blue-2);
  font-family: var(--mono);
  font-size: 15px;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.image-readout span { display: block; margin-top: 6px; color: #fffdf7; font-size: 15px; line-height: 1.25; }

.cockpit {
  display: grid;
  grid-template-columns: minmax(280px, .82fr) minmax(0, 1.18fr);
  gap: 28px;
  align-items: stretch;
  margin-top: 34px;
}

.cockpit-radar {
  position: relative;
  min-height: 440px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(216, 199, 173, .88);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 50%, rgba(47, 111, 151, .14), transparent 34%),
    linear-gradient(rgba(47, 111, 151, .045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(47, 111, 151, .04) 1px, transparent 1px),
    rgba(18, 18, 15, .96);
  background-size: auto, 32px 32px, 32px 32px, auto;
  box-shadow: 0 24px 56px rgba(34, 26, 12, .09);
  perspective: 950px;
}

.cockpit-radar .radar-core {
  width: min(70vw, 320px);
  /* Kranz aus 7 Knoten ist um Mittelpunkt 50%/42% verteilt (nicht 50%/50%),
     damit der unterste Knotenring nicht mit dem Readout-Panel kollidiert
     (bottom:18px, ca. 80px Panelhöhe). Core-Kreis wird um denselben Betrag
     nach oben versetzt, damit Knoten-Kranz und Kreisgrafik konzentrisch
     bleiben statt optisch zu versetzt zu wirken. */
  margin-top: -35px;
  border-color: rgba(227, 178, 63, .34);
  background:
    radial-gradient(circle, rgba(227, 178, 63, .5) 0 3px, transparent 4px),
    radial-gradient(circle,
      transparent 0 22%, rgba(255, 253, 247, .14) 22.5% 23%,
      transparent 23.5% 44%, rgba(255, 253, 247, .14) 44.5% 45%,
      transparent 45.5% 66%, rgba(255, 253, 247, .14) 66.5% 67%,
      transparent 67.5% 88%, rgba(255, 253, 247, .18) 88.5% 89%, transparent 89.5%);
  box-shadow: inset 0 0 64px rgba(47, 111, 151, .16), 0 0 58px rgba(227, 178, 63, .13);
  transform: rotateX(58deg) rotateZ(var(--radar-tilt, -2deg));
  transform-origin: center;
  transform-style: preserve-3d;
  transition: transform .5s ease;
}

.cockpit-radar .radar-core::before { background: linear-gradient(90deg, rgba(227, 178, 63, .95), transparent); }
.cockpit-radar .radar-core::after { background: conic-gradient(from 90deg, rgba(227, 178, 63, .14), transparent 70deg); }

/* 7 Knoten auf der 3D-Radarplatte — Positionierung per --x/--y (im HTML gesetzt),
   gleiche Custom-Property-Technik wie .checkpoint (Fahrschule-Route). Ersetzt die
   generische nth-of-type-Positionierung von .radar-node, weil 7 Knoten auf einer
   Kreisbahn eine gleichmäßige geometrische Verteilung brauchen statt vier fester
   Kanten-Positionen. Rund + kompakt (2-stellige Nummer) statt Fließtext-Label,
   damit unterschiedliche Beschriftungslängen keine Kollisionen erzeugen. */
.cockpit-radar .radar-node {
  left: var(--x);
  top: var(--y);
  min-width: 0;
  width: 40px;
  height: 40px;
  padding: 0;
  border-radius: 999px;
  color: #fffdf7;
  background: rgba(18, 18, 15, .84);
  border-color: rgba(255, 253, 247, .22);
  font-size: 15px;
  font-weight: 600;
  transform: translate(-50%, -50%) rotateZ(calc(var(--radar-tilt, -2deg) * -1)) rotateX(-58deg);
}

.cockpit-radar .radar-node:hover,
.cockpit-radar .radar-node:focus-visible {
  transform: translate(-50%, -50%) rotateZ(calc(var(--radar-tilt, -2deg) * -1)) rotateX(-58deg) translateY(-2px);
}

.cockpit-radar .radar-node.is-active {
  color: var(--gold-2);
  border-color: rgba(227, 178, 63, .7);
  box-shadow: 0 0 0 3px rgba(227, 178, 63, .16);
  transform: translate(-50%, -50%) rotateZ(calc(var(--radar-tilt, -2deg) * -1)) rotateX(-58deg) translateZ(14px);
}

.cockpit-radar .radar-readout {
  background: rgba(18, 18, 15, .9);
  border-color: rgba(227, 178, 63, .34);
}

.cockpit-radar .radar-readout b { color: var(--gold-2); }
.cockpit-radar .radar-readout span { color: rgba(255, 253, 247, .85); }

.sequence-panel { padding: 26px; border: 1px solid rgba(216, 199, 173, .88); border-radius: var(--radius-lg); background: rgba(255, 253, 248, .86); box-shadow: 0 24px 56px rgba(34, 26, 12, .09); }
.sequence-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 18px; }

.levels-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }

.level-card {
  position: relative;
  min-height: 170px;
  padding: 20px;
  border: 1px solid rgba(216, 199, 173, .88);
  border-radius: var(--radius);
  background: rgba(255, 253, 248, .82);
  box-shadow: var(--shadow-soft);
}

.level-card small {
  display: inline-grid;
  place-items: center;
  width: 34px;
  height: 34px;
  margin-bottom: 14px;
  border-radius: 50%;
  color: #fffdf7;
  background: var(--blue);
  font-family: var(--mono);
  font-weight: 600;
}

.level-card h4 { font-size: 17px; min-height: 42px; }
.level-card p { margin: 0; font-size: 15px; line-height: 1.45; }

.module-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }

.module-card {
  padding: 18px;
  border: 1px solid rgba(216, 199, 173, .86);
  border-radius: var(--radius);
  background: rgba(255, 253, 248, .8);
}

.module-card b { display: block; color: var(--blue); font-family: var(--mono); font-size: 15px; letter-spacing: .07em; text-transform: uppercase; }
.module-card h4 { margin: 8px 0 0; font-size: 17px; line-height: 1.25; }

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

/* Credentials in der schmalen Founder-Spalte: gestapelt statt Dreierreihe —
   ~120px Spaltenbreite clippen Titel wie "Systemarchitekt" (overflow:hidden) */
.markus-card .credential-grid { grid-template-columns: 1fr; }

/* 3D-Radar vs. Levels-Fallback-Sektion: Desktop zeigt nur das interaktive
   Radar (Cockpit-Sektion), die separate Levels-Sektion darunter ist dort
   verborgen, um dieselbe Botschaft nicht doppelt zu zeigen. Ab 760px kippt
   das Verhältnis um (Owner-Vorgabe: kein 3D auf Mobile, siehe unten). */
.levels-fallback-section { display: none; }

@media (max-width: 1040px) {
  .hero-grid, .cockpit, .fit-grid { grid-template-columns: 1fr; }
  .levels-grid, .module-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 760px) {
  .hero-grid { min-height: auto; padding: 44px 0 60px; gap: 30px; }
  .levels-grid, .module-grid, .sequence-grid { grid-template-columns: 1fr; }
  .hero-system-card { min-height: 420px; overflow: visible; }
  .hero-system-card img { min-height: 380px; border-radius: var(--radius-lg) var(--radius-lg) 0 0; }
  .image-readout {
    position: static;
    grid-template-columns: 1fr;
    margin: 0;
    padding: 10px;
    border-radius: 0 0 var(--radius-lg) var(--radius-lg);
    background: rgba(18, 18, 15, .92);
  }
  .image-readout div { display: grid; grid-template-columns: 92px 1fr; gap: 10px; align-items: center; min-height: auto; padding: 10px 12px; }
  .image-readout span { margin-top: 0; font-size: 15px; }
  .cockpit-radar { min-height: 380px; }

  /* Kein 3D auf Mobile (Owner-Vorgabe): das gesamte Cockpit (3D-Radar + Sequence-Panel, beide
     zeigen dieselben 7 Ebenen) wird ausgeblendet. Die separate Levels-Sektion
     (bereits eine strikt flache Kartenreihe, vorgabekonform) übernimmt als
     einziger sichtbarer Systemebenen-Block — verhindert doppelte Darstellung
     derselben 7 Ebenen in zwei unterschiedlichen Kartenformaten auf Mobile. */
  .cockpit { display: none; }
  .levels-fallback-section { display: block; }
}
  

/* Proof of Work — System-Artefakt (Task P1-01, 03.08.2026).
   Bewusst als Klassen statt Inline-Styles: Voraussetzung fuer eine spaetere CSP. */
.artifact { border-left: 4px solid var(--blue); }

/* Modellrechnung in der Arbeitsprobe (Red-Team RT05, 06.09.2026): fuenf Schritte
   in einer Reihe, Kartenoptik von .level-card wiederverwendet. */
.model-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 22px; }
@media (min-width: 1500px) { .model-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
.model-grid .level-card { min-height: 0; }
.model-grid .level-card h4 { min-height: 0; }
.model-grid .level-card p + p { margin-top: 8px; }
.model-note { margin: 16px 0 0; color: var(--muted); font-size: 15px; line-height: 1.5; }
@media (max-width: 1040px) { .model-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 760px) { .model-grid { grid-template-columns: 1fr; } }
.artifact-flow {
  display: grid;
  /* Sieben Schritte sind eine Kette - auf Desktop stehen sie in einer Reihe.
     auto-fit ergab 6 Spalten, der siebte Schritt stand allein in Reihe zwei. */
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 10px;
  margin-top: 20px;
}
.artifact-step {
  padding: 14px 14px 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: rgba(255, 253, 248, .72);
}
.artifact-step .num {
  display: block;
  margin-bottom: 7px;
  font-family: var(--mono);
  font-size: 15px;
  letter-spacing: .14em;
  color: var(--blue);
}
.artifact-step b { display: block; font-size: 15.5px; }
.artifact-step small {
  display: block;
  margin-top: 4px;
  font-size: 15px;
  line-height: 1.45;
  color: var(--muted);
}
.artifact-close { margin-top: 18px; font-size: 15.5px; max-width: 68ch; }
@media (max-width: 1040px) {
  .artifact-flow { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 620px) {
  .artifact-flow { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ==========================================================================
   VEREDELUNG RUNDE 2 — 03.08.2026
   Korrekturen zu belegten Befunden aus dem Screenshot- und DOM-Durchgang.
   Steht hier statt in base.css, weil dieses Stylesheet nach base.css laedt.
   ========================================================================== */

/* Kontrast: Blau als Schrift auf Papier. #2f6f97 erreicht 5,12:1 und bleibt,
   die Mono-Marker in 12–13px bekommen die dunklere Stufe. */
.module-card b, .artifact-step .num { color: var(--blue-ink); }

/* Schriftgrade: die 11–13px-Stufen der Seitenkomponenten anheben.
   .artifact-step .num stand mit 11px auf dem kleinsten Wert der ganzen Site. */
.artifact-step .num { font-size: 15px; letter-spacing: .1em; }
.artifact-step b { font-size: 16px; }
.artifact-step small { font-size: 15px; }
.artifact-close { font-size: 16px; }
.level-card p { font-size: 15px; }
.level-card h4 { font-size: 18px; min-height: 0; margin-bottom: 8px; }
.module-card b { font-size: 15px; }
.module-card h4 { font-size: 18px; }
.image-readout b { font-size: 15px; }
.image-readout span { font-size: 15px; }
.image-readout div { min-height: 92px; }
.sequence-panel { padding: 28px; }
.sequence-grid { gap: 14px; }

/* Trefferflaeche: die Radar-Knoten massen 41x37px nach der 3D-Transformation. */
.cockpit-radar .radar-node { width: 44px; height: 44px; font-size: 15px; }

/* Restreihe: sieben Schritte in vier Spalten ergaben 4+3. Flex mit zentrierter
   Restreihe statt angebrochener Rasterzeile. */
.artifact-flow { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.artifact-flow > * { flex: 0 1 calc(14.285% - 10.3px); min-width: 150px; }

/* Vier statt vorher fuenf Ebenen-Karten pro Reihe bleiben — bei 1320px
   Container sind das rund 315px je Karte statt 275px. */
.levels-grid, .module-grid { gap: 14px; }

@media (max-width: 1040px) {
  .artifact-flow > * { flex: 0 1 calc(33.333% - 8px); }
}

@media (max-width: 620px) {
  .artifact-flow > * { flex: 1 1 100%; min-width: 0; }
}

/* --------------------------------------------------------------------------
   Cockpit-Radar: Knotenkranz und Radarplatte lagen auseinander
   --------------------------------------------------------------------------
   Befund (Screenshot betriebssystem-optionen@1280): die sieben Knoten standen
   weit ausserhalb der Radarscheibe, vier davon in leerer Flaeche. Zwei
   Ursachen, beide strukturell:
   1) Die Knoten waren in Prozent der .cockpit-radar-Kachel positioniert. Die
      Kachel steht in einem Grid mit align-items:stretch und wurde von der
      Nachbarspalte auf 845px Hoehe gezogen — die Prozentwerte zogen den Kranz
      mit auseinander, waehrend die Scheibe bei 320px blieb.
   2) Die Scheibe war per rotateX(58deg) gekippt (Hoehe x cos58 = 0,53), der
      Knotenkranz war ein ungekippter Kreis. Zwei Geometrien, eine Flaeche.
   Fix: eigener quadratischer .cockpit-board traegt Scheibe UND Kranz und wird
   als Ganzes gekippt — die Knoten landen dadurch automatisch auf der Ellipse.
   Die Knoten richten sich per Gegenrotation wieder auf (Technik unveraendert).
   -------------------------------------------------------------------------- */
.cockpit { align-items: start; }

.cockpit-radar {
  display: grid;
  grid-template-rows: 1fr auto;
  place-items: stretch;
  gap: 14px;
  padding: 18px;
  min-height: 420px;
}

.cockpit-board {
  position: relative;
  width: min(100%, 360px);
  aspect-ratio: 1;
  /* Die Kippung staucht die sichtbare Hoehe auf rund 53 % — die negativen
     Aussenabstaende holen den dadurch entstehenden Leerraum zurueck. */
  margin: -12% auto -14%;
  transform: rotateX(58deg) rotateZ(var(--radar-tilt, -2deg));
  transform-origin: center;
  transform-style: preserve-3d;
  transition: transform .5s ease;
}

.cockpit-radar .radar-core {
  position: absolute;
  inset: 4%;
  width: auto;
  min-width: 0;
  margin: 0;
  transform: none;
}

.cockpit-radar .radar-readout { position: static; margin: 0; }

@media (max-width: 1040px) {
  .cockpit-board { width: min(100%, 320px); }
}

/* Die Radarplatte ist um 58 Grad gekippt — 44px Knoten projizieren sich
   dadurch auf rund 39x41px. 50px im Modellraum ergeben die geforderten 44px
   in der Flaeche. */
.cockpit-radar .radar-node { width: 50px; height: 50px; }

/* ==========================================================================
   HAERTUNG 01.09.2026 — Inline-Styles abgeloest (CSP-Schritt, s. base.css §20)
   ========================================================================== */

/* Cockpit-Radar: Positionsdaten der sieben Ebenen-Knoten aus dem Markup
   hierher ueberfuehrt. nth-of-type zaehlt nur die <button>-Geschwister —
   der .radar-core (<div>) davor ist ein anderer Elementtyp.
   Reihenfolge = Ebenenfolge 01..07. */
.cockpit-board .radar-node:nth-of-type(1) { --x: 50%;   --y: 12%; }
.cockpit-board .radar-node:nth-of-type(2) { --x: 79.7%; --y: 26.3%; }
.cockpit-board .radar-node:nth-of-type(3) { --x: 87%;   --y: 58.5%; }
.cockpit-board .radar-node:nth-of-type(4) { --x: 66.5%; --y: 84.2%; }
.cockpit-board .radar-node:nth-of-type(5) { --x: 33.5%; --y: 84.2%; }
.cockpit-board .radar-node:nth-of-type(6) { --x: 13%;   --y: 58.5%; }
.cockpit-board .radar-node:nth-of-type(7) { --x: 20.3%; --y: 26.3%; }

/* Achte Ebenen-Karte "Ein Ablauf": Zusammenfassung, kein eigenes Modul —
   gestrichelter Rahmen und neutraler Marker statt Blau. */
.level-card.is-summary { border-style: dashed; background: rgba(255, 253, 248, .6); }
.level-card.is-summary small { background: var(--muted); }

/* Status-Pill im Offer-Panel bleibt inhaltsbreit statt gestreckt. */
.offer-actions .status-pill { justify-self: start; }

/* Hinweiszeile unter der Modul-Uebersicht */
.module-note { margin-top: 16px; font-size: 15px; }