/* Prueftstand-Oberflaeche.
   Eine Kante: alles sitzt in .wrap mit derselben Maximalbreite. Farben liegen
   als Merkmale auf :root, die dunkle Fassung tauscht nur deren Werte. */

:root {
  --bg: #f7f7f5;
  --surface: #ffffff;
  --surface-2: #f0efec;
  --ink: #1a1a18;
  --ink-2: #5c5b56;
  --line: #dcdad4;
  --accent: #b8461f;
  --accent-ink: #ffffff;
  --ok: #1d6b3f;
  --bad: #a32b1c;
  --radius: 10px;
  --wrap: 76rem;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #161614;
    --surface: #1f1e1b;
    --surface-2: #272521;
    --ink: #efece6;
    --ink-2: #a9a49a;
    --line: #383530;
    --accent: #e0714a;
    --accent-ink: #1a1a18;
    --ok: #58c98a;
    --bad: #f08b78;
  }
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 16px/1.6 ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
}

.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 1.25rem; }

h1, h2, h3 { line-height: 1.2; letter-spacing: -0.015em; margin: 0 0 0.5rem; }
h1 { font-size: clamp(2rem, 5vw, 3rem); }
h2 { font-size: 1.35rem; }
h3 { font-size: 1.05rem; }
p { margin: 0 0 0.75rem; }
code { font-family: ui-monospace, "Cascadia Code", Consolas, monospace; font-size: 0.9em;
       background: var(--surface-2); padding: 0.1em 0.35em; border-radius: 4px; }

.kicker { font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.09em;
          color: var(--accent); font-weight: 650; margin-bottom: 0.35rem; }
.lede { font-size: 1.05rem; color: var(--ink-2); max-width: 52rem; }
.proof {
  margin-top: 1.4rem;
  max-width: 46rem;
  padding: 1rem 1.1rem;
  border: 1px solid var(--line);
  border-left: 4px solid var(--accent);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: 0 10px 32px color-mix(in srgb, var(--ink) 7%, transparent);
}
.proof__eyebrow, .proof__method { margin: 0; color: var(--ink-2); }
.proof__eyebrow { font-size: 0.76rem; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; }
.proof__lanes { display: flex; align-items: center; gap: 1rem; margin: 0.55rem 0 0.45rem; }
.proof__lane { display: flex; align-items: baseline; gap: 0.38rem; flex-wrap: wrap; }
.proof__lane strong { font-size: 1.75rem; line-height: 1; font-variant-numeric: tabular-nums; }
.proof__name { flex-basis: 100%; font-weight: 700; }
.proof__arrow { color: var(--accent); font-size: 1.5rem; font-weight: 800; }
.proof__reject, .proof__clean { margin-left: 0.35rem; padding: 0.1rem 0.42rem; border-radius: 999px; font-size: 0.78rem; }
.proof__reject { color: var(--bad); background: color-mix(in srgb, var(--bad) 10%, transparent); }
.proof__clean { color: var(--ok); background: color-mix(in srgb, var(--ok) 10%, transparent); }
.proof__method { font-size: 0.78rem; line-height: 1.45; }
.muted { color: var(--ink-2); }
.small { font-size: 0.85rem; }

/* ---- Kopf ---- */
.masthead { padding: 3.5rem 0 2rem; border-bottom: 1px solid var(--line); }

.status { display: inline-flex; align-items: center; gap: 0.55rem; margin-top: 1rem;
          padding: 0.45rem 0.85rem; border: 1px solid var(--line); border-radius: 999px;
          background: var(--surface); font-size: 0.9rem; }
.status__dot { width: 0.6rem; height: 0.6rem; border-radius: 50%; background: var(--ink-2); flex: none; }
.status--on .status__dot { background: var(--ok); }
.status--off .status__dot { background: var(--accent); }

/* ---- Flaechen ---- */
.panel { padding: 2rem 0; border-bottom: 1px solid var(--line); }

/* ---- Live Challenge Console ---- */
.mission {
  display: grid;
  margin: 2rem 0 0.5rem;
  overflow: hidden;
  color: #f5f2eb;
  background: #171714;
  border: 1px solid #38352f;
  border-radius: 6px;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.18);
}
@media (min-width: 58rem) { .mission { grid-template-columns: 1.18fr 0.82fr; } }
.mission__brief { padding: clamp(1.25rem, 3vw, 2rem); background-image: linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px); background-size: 28px 28px; }
.mission__kicker { margin: 0 0 0.35rem; color: #e0714a; font: 700 0.75rem/1.2 ui-monospace, Consolas, monospace; letter-spacing: 0.12em; text-transform: uppercase; }
.mission h2 { font-size: clamp(1.45rem, 3vw, 2.1rem); }
.mission__lede { max-width: 46rem; color: #b9b4a9; }
.terminal { margin-top: 1.1rem; overflow: hidden; border: 1px solid #48443d; border-radius: 4px; background: #0d0d0b; }
.terminal__bar { display: flex; align-items: center; gap: 0.38rem; padding: 0.55rem 0.7rem; border-bottom: 1px solid #38352f; color: #8f8a80; font: 0.68rem/1 ui-monospace, Consolas, monospace; }
.terminal__bar span { width: 8px; height: 8px; border-radius: 50%; background: #5a554c; }
.terminal__bar span:first-child { background: #b8461f; }
.terminal__bar b { margin-left: 0.35rem; font-weight: 600; letter-spacing: 0.06em; }
.terminal code { display: block; max-height: 11rem; overflow: auto; padding: 0.9rem; color: #e8e3d9; background: transparent; white-space: pre-wrap; overflow-wrap: anywhere; font-size: 0.79rem; line-height: 1.55; }
.mission__copy { margin-top: 0.8rem; border-color: #e0714a; color: #fff; background: #b8461f; }
.mission__route { margin: 0.8rem 0 0; color: #9d978d; font-size: 0.75rem; line-height: 1.5; }
.mission__route strong { color: #f5f2eb; }
.mission__pipeline { display: flex; align-items: stretch; gap: 0.45rem; margin-top: 1rem; }
.mission__pipeline span { min-width: 0; flex: 1 1 0; padding: 0.55rem; border: 1px solid #38352f; background: rgba(13,13,11,.72); }
.mission__pipeline b, .mission__pipeline i { display: block; font: 0.64rem/1.3 ui-monospace, Consolas, monospace; }
.mission__pipeline b { color: #e0714a; }
.mission__pipeline i { margin-top: 0.18rem; color: #c7c1b7; font-style: normal; text-transform: uppercase; letter-spacing: .04em; }
.mission__pipeline em { align-self: center; color: #aaa499; font-style: normal; }
.mission__learning { display: grid; grid-template-columns: auto 1fr; gap: 0.08rem 0.65rem; margin: 0.9rem 0 0; padding: 0.7rem 0.8rem; border-left: 2px solid #58c98a; background: #141b16; }
.mission__learning > span { grid-row: 1 / 3; color: #58c98a; font: 1.3rem/1 ui-monospace, Consolas, monospace; }
.mission__learning strong, .mission__learning i { display: block; font-style: normal; }
.mission__learning strong { color: #f5f2eb; font-size: 0.78rem; }
.mission__learning i { color: #aaa499; font-size: 0.72rem; line-height: 1.45; }
.mission__monitor { min-width: 0; padding: clamp(1.25rem, 3vw, 2rem); border-top: 1px solid #38352f; background: #11110f; }
@media (min-width: 58rem) { .mission__monitor { border-top: 0; border-left: 1px solid #38352f; } }
.mission__monitor-head { display: flex; justify-content: space-between; gap: 1rem; padding-bottom: 0.75rem; border-bottom: 1px solid #38352f; color: #8f8a80; font: 0.72rem/1.3 ui-monospace, Consolas, monospace; text-transform: uppercase; letter-spacing: 0.08em; }
.mission__monitor-head strong { color: #e0714a; }
.mission__objectives { display: grid; gap: 0.55rem; min-height: 9.5rem; margin-top: 0.85rem; }
.mission-objective { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 0.7rem; padding: 0.7rem 0; border-bottom: 1px solid #2d2b27; }
.mission-objective__n { display: grid; place-items: center; width: 1.75rem; height: 1.75rem; border: 1px solid #565148; border-radius: 50%; color: #aaa499; font: 0.75rem ui-monospace, Consolas, monospace; }
.mission-objective__title { min-width: 0; font-size: 0.88rem; }
.mission-objective__state { color: #8f8a80; font: 0.68rem ui-monospace, Consolas, monospace; text-transform: uppercase; }
.mission-objective--active .mission-objective__n { border-color: #e0714a; color: #e0714a; box-shadow: 0 0 0 3px rgba(224,113,74,.12); }
.mission-objective--active .mission-objective__state { color: #e0714a; }
.mission-objective--done .mission-objective__n { border-color: #58c98a; color: #58c98a; }
.mission-objective--done .mission-objective__state { color: #58c98a; }
.mission__activity { margin-top: 1rem; color: #8f8a80; font: 0.7rem/1.5 ui-monospace, Consolas, monospace; text-transform: uppercase; letter-spacing: 0.07em; }
.mission__activity ol { min-height: 1.45rem; margin: 0.55rem 0 0; padding: 0; list-style: none; color: #c7c1b7; text-transform: none; letter-spacing: 0; }
.mission__activity li { padding: 0.28rem 0 0.28rem 0.65rem; border-left: 2px solid #48443d; overflow-wrap: anywhere; }
.mission__activity li:last-child { border-left-color: #e0714a; color: #f5f2eb; }

.tasks { display: grid; gap: 0.75rem; margin-top: 1rem; }
@media (min-width: 62rem) { .tasks { grid-template-columns: repeat(3, 1fr); } }
.task { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
        padding: 1rem 1.15rem; display: grid; gap: 0.5rem; }
.task__top { display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: baseline;
             justify-content: space-between; }
.task__title { font-weight: 650; }
.task__goal { color: var(--ink-2); }
.task__trap { font-size: 0.88rem; color: var(--ink-2); border-left: 2px solid var(--accent);
              padding-left: 0.7rem; }
.task__actions { display: flex; flex-wrap: wrap; gap: 0.5rem; }

.btn { appearance: none; border: 1px solid var(--line); background: var(--surface);
       color: var(--ink); font: inherit; font-size: 0.92rem; padding: 0.5rem 0.9rem;
       border-radius: 8px; cursor: pointer; text-decoration: none; display: inline-block; }
.btn:hover { border-color: var(--accent); }
.btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.btn--primary { background: var(--accent); border-color: var(--accent); color: var(--accent-ink);
                font-weight: 600; }
.btn--ghost { background: transparent; }
.btn:disabled { opacity: 0.45; cursor: not-allowed; }

/* ---- Buehne ---- */
.stage-head { display: flex; justify-content: space-between; align-items: flex-start;
              gap: 1rem; flex-wrap: wrap; }
.stage { margin-top: 1rem; background: var(--surface); border: 1px solid var(--line);
         border-radius: var(--radius); padding: 1.15rem; }
.meter { display: flex; flex-wrap: wrap; gap: 1.25rem; margin-top: 0.75rem;
         font-size: 0.9rem; color: var(--ink-2); }
.meter b { color: var(--ink); font-variant-numeric: tabular-nums; }

.field { display: grid; gap: 0.3rem; margin-bottom: 0.9rem; max-width: 22rem; }
.field label { font-size: 0.88rem; font-weight: 600; }
.field select, .field input { font: inherit; padding: 0.45rem 0.55rem; border-radius: 7px;
                              border: 1px solid var(--line); background: var(--bg); color: var(--ink); }

.row { display: flex; gap: 0.75rem; align-items: center; flex-wrap: wrap;
       padding: 0.6rem 0; border-bottom: 1px solid var(--line); }
.row:last-child { border-bottom: 0; }
.row__grow { flex: 1 1 12rem; min-width: 0; }
.tag { font-size: 0.78rem; padding: 0.15rem 0.5rem; border-radius: 999px;
       border: 1px solid var(--line); color: var(--ink-2); white-space: nowrap; }
.tag--bad { color: var(--bad); border-color: var(--bad); }
.tag--ok { color: var(--ok); border-color: var(--ok); }

.note { margin-top: 0.9rem; padding: 0.7rem 0.9rem; border-radius: 8px;
        background: var(--surface-2); font-size: 0.92rem; }
.note--bad { color: var(--bad); }
.note--ok { color: var(--ok); }

/* ---- Messung ---- */
.scoreboard { display: grid; gap: 0.75rem; margin-top: 1rem; min-width: 0; }
.score { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
         padding: 1rem 1.15rem; min-width: 0; overflow-x: auto; }
.score__grid { display: grid; grid-template-columns: 8rem repeat(3, minmax(4rem, 1fr));
               gap: 0.4rem 1rem; min-width: 23rem; margin-top: 0.6rem; font-variant-numeric: tabular-nums; }
.score__grid > * { font-size: 0.92rem; }
.score__head { color: var(--ink-2); font-size: 0.8rem; text-transform: uppercase;
               letter-spacing: 0.05em; }
.score__win { color: var(--ok); font-weight: 650; }

/* ---- Werkzeugliste ---- */
.tools { display: grid; gap: 0.5rem; margin-top: 1rem; }
@media (min-width: 52rem) { .tools { grid-template-columns: 1fr 1fr; } }
.tool { background: var(--surface); border: 1px solid var(--line); border-radius: 8px;
        padding: 0.75rem 0.95rem; }
.tool__name { font-family: ui-monospace, Consolas, monospace; font-weight: 600;
              color: var(--accent); font-size: 0.92rem; }
.tool__desc { color: var(--ink-2); font-size: 0.9rem; margin-top: 0.25rem; }

/* ---- Nova ---- */
.nova { background: var(--surface); border-top: 1px solid var(--line); padding: 3.5rem 0; }
.learning-loop { margin: 1.75rem 0; padding: 1rem; border: 1px solid var(--line); border-radius: var(--radius); background: var(--bg); }
.learning-loop__label { margin: 0 0 0.8rem; color: var(--accent); font: 700 0.75rem/1.3 ui-monospace, Consolas, monospace; letter-spacing: 0.09em; text-transform: uppercase; }
.learning-loop__steps { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) auto minmax(0, 1fr); align-items: stretch; gap: 0.7rem; }
.learning-loop__steps > div { min-width: 0; padding: 0.8rem; border-left: 2px solid var(--line); }
.learning-loop__steps > div:nth-of-type(3) { border-left-color: var(--ok); }
.learning-loop__steps b, .learning-loop__steps strong, .learning-loop__steps span { display: block; }
.learning-loop__steps b { color: var(--accent); font: 0.68rem/1 ui-monospace, Consolas, monospace; }
.learning-loop__steps strong { margin-top: 0.35rem; }
.learning-loop__steps span { margin-top: 0.25rem; color: var(--ink-2); font-size: 0.87rem; }
.learning-loop__steps > i { align-self: center; color: var(--accent); font-style: normal; font-size: 1.2rem; }
.learning-loop__proof { margin: 0.85rem 0 0; padding-top: 0.75rem; border-top: 1px solid var(--line); color: var(--ink-2); font-size: 0.8rem; }
.facts { display: flex; flex-wrap: wrap; gap: 2.5rem; margin: 1.75rem 0; }
.fact { display: grid; }
.fact__n { font-size: 2.25rem; font-weight: 700; line-height: 1; letter-spacing: -0.03em;
           color: var(--accent); font-variant-numeric: tabular-nums; }
.fact__l { font-size: 0.85rem; color: var(--ink-2); margin-top: 0.3rem; }

.cards { display: grid; grid-template-columns: 1fr; gap: 1rem; margin: 1.5rem 0 2rem; }
@media (min-width: 46rem) {
  /* Zwei Spalten statt auto-fit: vier Karten ergeben so 2x2 und keine
     einzelne Waise in der zweiten Reihe. */
  .cards { grid-template-columns: 1fr 1fr; }
}
.card { background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius);
        padding: 1.15rem; }
.card p { color: var(--ink-2); font-size: 0.93rem; margin: 0; }

.cta { display: flex; flex-wrap: wrap; gap: 0.65rem; margin-bottom: 0.75rem; }

/* ---- Fuss ---- */
.foot { padding: 2rem 0 3rem; color: var(--ink-2); font-size: 0.9rem; }
.foot a, .nova a:not(.btn) { color: var(--accent); }
.foot a { display: inline-block; min-height: 24px; padding-block: 0.15rem; }

/* Breite Inhalte duerfen im eigenen Kasten scrollen, die Seite selbst nie. */
.scroll-x { overflow-x: auto; }

/* ---- Sprachumschalter ---- */
.masthead__top { display: flex; justify-content: space-between; align-items: center;
                 gap: 1rem; flex-wrap: wrap; margin-bottom: 0.5rem; }
.lang { display: flex; gap: 0.35rem; }
.lang .btn { padding: 0.3rem 0.65rem; font-size: 0.82rem; letter-spacing: 0.03em; }


/* ---- Gegenueberstellung der beiden Spuren ----
   Die linke Spur ist absichtlich laenger als die rechte: der Hoehenunterschied
   IST die Aussage, deshalb werden die Spalten nicht auf gleiche Hoehe gezwungen. */
.duel__grid { display: grid; gap: 1rem; margin-top: 1.25rem; align-items: start; }
@media (min-width: 52rem) { .duel__grid { grid-template-columns: 1fr 1fr; } }

.lane { border: 1px solid var(--line); border-radius: var(--radius);
        background: var(--surface); padding: 1.15rem; min-width: 0; }
.lane--tools { border-color: var(--accent); }
.lane__head { display: flex; justify-content: space-between; align-items: baseline;
              gap: 0.75rem; flex-wrap: wrap; margin-bottom: 0.85rem;
              padding-bottom: 0.7rem; border-bottom: 1px solid var(--line); }
.lane__tag { font-size: 0.8rem; font-weight: 650; text-transform: uppercase;
             letter-spacing: 0.06em; color: var(--ink-2); }
.lane__tag--on { color: var(--accent); }
.lane__score { font-size: 0.88rem; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.lane__score b { color: var(--ink); font-size: 1.05rem; }

.steps { margin: 0; padding-left: 1.15rem; display: grid; gap: 0.5rem; }
.steps li { font-size: 0.92rem; color: var(--ink-2); }
.steps__bad { color: var(--bad); font-weight: 600; }
.steps--code li { list-style: none; margin-left: -1.15rem; min-width: 0; }
.steps--code code { display: block; background: var(--surface-2); border-radius: 6px;
                    padding: 0.45rem 0.6rem; font-size: 0.85rem; color: var(--ink);
                    overflow-x: auto; white-space: pre; }
.steps__out { display: block; margin-top: 0.3rem; font-size: 0.85rem; color: var(--ok); }
.lane__note { margin: 0.9rem 0 0; font-size: 0.89rem; color: var(--ink-2); }
.duel__foot { margin-top: 1.15rem; padding: 0.85rem 1rem; border-left: 3px solid var(--accent);
              background: var(--surface-2); border-radius: 0 8px 8px 0;
              font-size: 0.93rem; }
.duel__method { margin: 0.75rem 0 0; color: var(--ink-2); font-size: 0.82rem; }

@media (max-width: 42rem) {
  .mission__pipeline { display: grid; grid-template-columns: 1fr 1fr; }
  .mission__pipeline em { display: none; }
  .learning-loop__steps { grid-template-columns: 1fr; }
  .learning-loop__steps > i { transform: rotate(90deg); justify-self: center; }
  .proof__lanes { align-items: stretch; gap: 0.55rem; }
  .proof__lane { flex: 1 1 0; }
  .proof__arrow { align-self: center; }
}