/*
 * Embedded Make-or-buy Kit — Darstellung.
 *
 * Bewusst ohne Schriftdatei von aussen (INV-3: der Browser spricht nur mit unserer
 * eigenen Herkunft). Die Systemschrift-Kette trifft die ruhige Anmutung der Seite gut
 * genug; eine geladene Schrift wäre ein Fremdaufruf für einen kleinen optischen Gewinn.
 */

:root {
  color-scheme: light dark;
  --ground: #faf9f7;
  --surface: #ffffff;
  --ink: #1a1a18;
  --soft: #4a4a45;
  --muted: #7a7a72;
  --line: #e4e1db;
  --accent: #8a6a3b;
  --make: #2f6b4f;
  --buy: #3b5f8a;
  --hybrid: #7a5c8a;
}

@media (prefers-color-scheme: dark) {
  :root {
    --ground: #14140f;
    --surface: #1c1c17;
    --ink: #f2f0ea;
    --soft: #c3c0b6;
    --muted: #8f8c82;
    --line: #2e2e26;
    --accent: #c9a678;
    --make: #6fae8c;
    --buy: #7fa3d1;
    --hybrid: #b394c4;
  }
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font:
    16px/1.6 -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    Roboto,
    Helvetica,
    Arial,
    sans-serif;
}

.wrap {
  max-width: 60rem;
  margin: 0 auto;
  padding: 2.5rem 1.5rem 5rem;
}

.head {
  margin-bottom: 2.5rem;
}

.back {
  display: inline-block;
  margin-bottom: 1.5rem;
  color: var(--muted);
  text-decoration: none;
  font-size: 0.875rem;
}

.back:hover {
  color: var(--ink);
}

.eyebrow {
  margin: 0;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--accent);
}

h1 {
  margin: 0.75rem 0 0;
  font-size: clamp(1.75rem, 4vw, 2.5rem);
  font-weight: 500;
  line-height: 1.15;
  letter-spacing: -0.02em;
}

h2 {
  margin: 0 0 1rem;
  font-size: 1.25rem;
  font-weight: 600;
}

h3 {
  margin: 0;
  font-size: 1rem;
  font-weight: 600;
}

.lede {
  max-width: 62ch;
  margin: 1.25rem 0 0;
  font-size: 1.0625rem;
  color: var(--soft);
}

.note,
.hint {
  max-width: 68ch;
  font-size: 0.875rem;
  color: var(--muted);
}

a {
  color: var(--accent);
}

.card {
  margin-bottom: 1.5rem;
  padding: 1.75rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 0.875rem;
}

.grid {
  display: grid;
  gap: 1.25rem;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
}

label {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
  font-size: 0.875rem;
  font-weight: 600;
}

label small {
  font-weight: 400;
  color: var(--muted);
}

input,
select {
  padding: 0.625rem 0.75rem;
  font: inherit;
  font-size: 0.9375rem;
  color: var(--ink);
  background: var(--ground);
  border: 1px solid var(--line);
  border-radius: 0.5rem;
}

input:focus-visible,
select:focus-visible,
button:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.staffing {
  display: grid;
  gap: 1.25rem;
  grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
}

.staffing-row small {
  font-size: 0.8125rem;
}

.actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin: 2rem 0;
}

button {
  padding: 0.75rem 1.25rem;
  font: inherit;
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 0.5rem;
  cursor: pointer;
}

button:hover {
  border-color: var(--accent);
}

button.primary {
  color: var(--ground);
  background: var(--ink);
  border-color: var(--ink);
}

.summary p {
  max-width: 68ch;
  margin: 0;
  color: var(--soft);
}

.summary p + p {
  margin-top: 0.75rem;
}

/* Die Übergabe an den Ledger ist ein Nebenweg, kein Aufruf: leiser als die Knöpfe oben,
   und sie steht am Fuss der Karte, nachdem die Begründung gelesen ist. */
.uebernahme {
  margin-top: 1rem;
  padding: 0.4rem 0.75rem;
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--soft);
}

.uebernahme:hover {
  color: var(--ink);
}

.block-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0.875rem;
}

.badge {
  padding: 0.1875rem 0.625rem;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  border: 1px solid currentColor;
  border-radius: 999px;
}

.badge-make {
  color: var(--make);
}
.badge-buy {
  color: var(--buy);
}
.badge-hybrid {
  color: var(--hybrid);
}
.badge-offen {
  color: var(--muted);
}

.block p,
.block li {
  max-width: 72ch;
  font-size: 0.9375rem;
  color: var(--soft);
}

.block ul {
  margin: 0.875rem 0 0;
  padding-left: 1.125rem;
}

.block li {
  margin-bottom: 0.375rem;
}

.driver {
  margin: 0;
}

.model,
.open,
.tie {
  margin-top: 0.875rem;
  padding-top: 0.875rem;
  border-top: 1px dashed var(--line);
}

.open strong {
  color: var(--accent);
}

.foot {
  margin-top: 3rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--line);
  font-size: 0.875rem;
  color: var(--muted);
}

/* Das Entscheidungsrecht steht optisch auf einer Stufe mit der Empfehlung, nicht darunter:
   eine Empfehlung ohne Zuständigkeit ist eine Meinung. */
.rights {
  margin-top: 0.875rem;
  padding-top: 0.875rem;
  border-top: 1px dashed var(--line);
}
.rights em {
  font-style: normal;
  font-weight: 600;
  color: var(--ink);
}


/* ── Die Marktlage je Baustein ─────────────────────────────────────────────────
   Aufgeklappt sichtbar, zugeklappt eine Zeile: der Zustand der quelloffenen Lage
   steht schon im Deckel, weil das die Angabe ist, die eine Entscheidung dreht. */
.marktlage { grid-column: 1 / -1; margin-top: .5rem; padding: .5rem .75rem;
  background: var(--ground); border: 1px solid var(--line); border-radius: .5rem; }
.marktlage summary { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem;
  font-size: .75rem; font-weight: 600; color: var(--muted); cursor: pointer; }
.marktlage summary:hover { color: var(--ink); }
.marktlage p { margin: .5rem 0 0; font-size: .78rem; line-height: 1.5; color: var(--soft); }
.marktlage p strong { color: var(--ink); }
.qref { color: var(--accent); font-variant-numeric: tabular-nums; }
.lage { padding: .05rem .45rem; font-size: .68rem; font-weight: 700; letter-spacing: .03em;
  border: 1px solid currentColor; border-radius: 999px; }
.lage-keine, .lage-gesperrt { color: var(--buy); }
.lage-im-aufbau, .lage-teils-lebendig { color: var(--hybrid); }
.lage-entfällt, .lage-entfällt-teilweise, .lage-keine-geschlossene { color: var(--muted); }
.lage-achtung { color: var(--accent); }


/* ── Der ARXML-Aufriss ─────────────────────────────────────────────────────────
   Zahlen zuerst und gross: das ist die Ausgabe, die es sonst nirgends gibt. */
.ablage { position: relative; margin: 1rem 0; padding: 1.75rem 1rem; text-align: center;
  border: 2px dashed var(--line); border-radius: .75rem; transition: border-color .15s, background .15s; }
.ablage.ueber { border-color: var(--accent); background: var(--ground); }
.ablage input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.ablage label { display: block; font-size: .9375rem; font-weight: 600; color: var(--soft); cursor: pointer; }
.aufriss-kopf { margin: 1rem 0 0; font-size: .78rem; color: var(--muted);
  font-variant-numeric: tabular-nums; }
.zahlen { display: grid; gap: .5rem; grid-template-columns: repeat(auto-fit, minmax(7rem, 1fr));
  margin: .875rem 0 0; }
.zahl { padding: .75rem .5rem; text-align: center; background: var(--ground);
  border: 1px solid var(--line); border-radius: .5rem; }
.zahl strong { display: block; font-size: 1.5rem; font-weight: 600; line-height: 1.1;
  color: var(--ink); font-variant-numeric: tabular-nums; }
.zahl span { display: block; margin-top: .2rem; font-size: .7rem; letter-spacing: .04em;
  text-transform: uppercase; color: var(--muted); }
.aufriss-titel { margin: 1.5rem 0 .5rem; font-size: .7rem; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase; color: var(--accent); }
.schichten { display: grid; gap: .375rem; }
.schicht { padding: .625rem .875rem; background: var(--ground); border-left: 3px solid var(--buy);
  border-radius: 0 .4rem .4rem 0; }
.schicht strong { display: block; font-size: .875rem; color: var(--ink); }
.schicht span { display: block; margin-top: .2rem; font-size: .75rem; color: var(--muted); }
.befund { margin-bottom: .5rem; padding: .75rem 1rem; border-left: 3px solid var(--line);
  background: var(--ground); border-radius: 0 .4rem .4rem 0; }
.befund-schwer { border-left-color: var(--accent); }
.befund-leicht { border-left-color: var(--make); }
.befund strong { display: block; font-size: .875rem; color: var(--ink); }
.befund span { display: block; margin-top: .3rem; font-size: .8125rem; line-height: 1.55; color: var(--soft); }