/* factory.css — die öffentliche Fläche.
 *
 * ZWEI SCHALEN, eine Entscheidung aus den Designer-Antworten (§11.1):
 *
 *   Product Chrome   Navigation, Suche, Create Another — sachlich, serifenlos,
 *                    dicht. Ein Werkzeug soll effizient sein.
 *   Editorial        Report und Slide — Serifen, mehr Weißraum, Belege am Rand.
 *                    Ein Argument soll glaubwürdig sein.
 *
 * DREI REGELN, die aus der Prüfung des Mockups kommen:
 *
 *   1. Logische Eigenschaften statt links/rechts. Persisch ist eine aktive
 *      Sprache; `margin-left` wäre dort schlicht die falsche Seite. Das ist
 *      kein Nachrüsten wert — es kostet hier nichts und dort das halbe Layout.
 *   2. 12 px ist die Untergrenze für alles, was Produktinformation trägt.
 *      Belege, Quellen und Anker standen im Mockup bei 9,5 px — ausgerechnet
 *      das Material, das den Unterschied zum Dashboard ausmacht.
 *   3. Keine Deko über Inhalt. Das Zierkreissegment der Pack-Karten lag ohne
 *      z-index über dem Icon. Dekoration, die Inhalt überlagert, fällt weg.
 *
 * Schriften: bewusst System-Stack. Eine deklarierte, aber nie geladene Schrift
 * (`Inter` in v1/v2) rendert bei fast allen Besuchern als Segoe UI — der
 * entworfene Zustand war nie der ausgelieferte.
 */

/* ── Tokens ──────────────────────────────────────────────────────────────── */
:root {
  --paper:#f7f6f2;  --card:#fff;      --editorial:#fbfaf7;  --sand:#f2efe7;
  --ink:#111820;    --muted:#66717b;  --line:#dce1e5;       --navy:#0b1622;

  --blue:#315fce;   --blue-soft:#eef3fb;
  --green:#2f7c59;  --green-soft:#edf5f1;
  --amber:#a86c18;  --amber-soft:#faf2e5;
  --violet:#66547a; --violet-soft:#f3eef7;
  --red:#9e3741;    --red-soft:#faecee;

  --shadow:0 16px 44px rgba(17,24,32,.08);
  --sans:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;
  --serif:Georgia,"Times New Roman",serif;
  --mono:"SFMono-Regular",Consolas,"Liberation Mono",monospace;

  --wrap:1460px;
  --gutter:26px;
}

/* Japanisch und Persisch brauchen eigene Stapel. fonts-noto-cjk und Vazirmatn
 * liegen im Image (siehe factory/Dockerfile) — ohne sie werden die Decks zu
 * Kästchen. Georgia trägt kein CJK, deshalb erbt :lang(ja) auch im
 * Editorial-Teil den serifenlosen Stapel. */
:root:lang(ja) { --serif:"Noto Serif CJK JP","Noto Sans CJK JP",system-ui,serif; }
:root:lang(fa) { --sans:Vazirmatn,"Noto Naskh Arabic",system-ui,sans-serif;
                 --serif:"Noto Naskh Arabic",Georgia,serif; }

* { box-sizing:border-box }
html { scroll-behavior:smooth }

body {
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--sans);
  font-size:15px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
}

a { color:inherit }
button, input, select, textarea { font:inherit }
img, svg { max-width:100% }

/* Untergrenze durchsetzen: kein Produkttext unter 12 px. */
small, .meta, .kicker, figcaption { font-size:12px }

/* ── Sprungmarke ─────────────────────────────────────────────────────────── */
.skip {
  position:absolute;
  inset-inline-start:-9999px;
  top:0;
  z-index:200;
  background:var(--navy);
  color:#fff;
  padding:11px 15px;
  border-radius:0 0 8px 0;
  text-decoration:none;
  font-weight:750;
}
.skip:focus { inset-inline-start:0 }

/* Sichtbarer Fokus überall. Die Mockups hatten Navigationselemente ohne href —
 * unerreichbar mit der Tastatur. Wenn alles ein echter Link ist, muss der
 * Fokus auch zu sehen sein. */
:focus-visible {
  outline:2px solid var(--blue);
  outline-offset:2px;
  border-radius:3px;
}

/* ── Topbar ──────────────────────────────────────────────────────────────── */
.topbar {
  position:sticky; top:0; z-index:70;
  background:rgba(247,246,242,.96);
  backdrop-filter:blur(12px);
  border-bottom:1px solid rgba(17,24,32,.09);
}
.topbar-in {
  max-width:var(--wrap); margin:auto;
  min-height:66px;
  padding-inline:var(--gutter);
  display:flex; align-items:center; gap:22px;
}

.brand {
  display:flex; align-items:center; gap:10px;
  text-decoration:none; font-weight:850; white-space:nowrap;
}
.brandmark {
  width:28px; height:28px; border-radius:7px;
  background:var(--navy); position:relative; flex:0 0 auto;
}
.brandmark:after {
  content:""; position:absolute;
  inset-inline-start:6px; bottom:6px;
  width:5px; height:9px; background:#fff; border-radius:1px;
  box-shadow:7px -5px 0 #a9bad2, 14px -11px 0 #6381c4;
}
.brand small { color:var(--muted); font-weight:650 }

.nav { display:flex; gap:17px; flex:1 }
.nav a {
  text-decoration:none; font-size:13px; color:#424d57;
  padding-block:8px; border-bottom:2px solid transparent;
}
.nav a:hover { color:var(--ink); border-color:var(--line) }
.nav a[aria-current="page"] { color:var(--ink); border-color:var(--ink) }

.top-actions { display:flex; align-items:center; gap:8px; margin-inline-start:auto }

/* ── Schaltflächen ───────────────────────────────────────────────────────── */
.btn {
  border:1px solid var(--line); background:#fff; color:var(--ink);
  padding:10px 13px; border-radius:8px;
  font-weight:750; font-size:12.5px;
  cursor:pointer; text-decoration:none;
  display:inline-flex; align-items:center; justify-content:center; gap:7px;
}
.btn:hover { border-color:#b6bec5 }
.btn.dark  { background:var(--navy); color:#fff; border-color:var(--navy) }
.btn.blue  { background:var(--blue); color:#fff; border-color:var(--blue) }
.btn.small { padding:7px 9px; font-size:12px }
.btn[aria-disabled="true"] { opacity:.45; cursor:not-allowed }

/* ── Sprachwähler ────────────────────────────────────────────────────────── */
/* Echte Links, kein JavaScript-Zustand. Die Method-Seite des Mockups forderte
 * das ausdrücklich („real links, not JS-only state") und der Umschalter
 * daneben war ein <button> — Crawler und Tastatur sahen ihn nicht. */
.langbox { position:relative }
.langbox > summary {
  list-style:none;
  border:1px solid var(--line); background:#fff; border-radius:8px;
  padding:8px 10px; font-size:12px; font-weight:800; cursor:pointer;
  white-space:nowrap;
}
.langbox > summary::-webkit-details-marker { display:none }
.langpanel {
  position:absolute; inset-inline-end:0; top:44px; width:min(280px,80vw);
  background:#fff; border:1px solid var(--line); border-radius:12px;
  box-shadow:var(--shadow); padding:7px; z-index:90;
}
.langpanel a {
  display:grid; grid-template-columns:auto 1fr; gap:3px 10px;
  padding:9px 10px; border-radius:8px; text-decoration:none;
}
.langpanel a:hover { background:var(--paper) }
.langpanel a[aria-current="true"] { background:var(--blue-soft) }
.langpanel b { font-size:13px }
.langpanel .code { font-family:var(--mono); font-size:12px; color:var(--muted) }
.langpanel .review { grid-column:1 / -1; font-size:12px; color:var(--muted) }
.langpanel .review.unreviewed { color:var(--amber) }

/* ── Mobiles Menü ────────────────────────────────────────────────────────── */
/* Im Mockup wurde die Navigation unter 720 px ersatzlos ausgeblendet —
 * Explore, Method und Engine waren auf dem Telefon nicht erreichbar. Und
 * Community-Verkehr aus Foren ist überwiegend mobil. */
.mobile-menu { display:none; position:relative }
.mobile-menu > summary {
  list-style:none; cursor:pointer;
  border:1px solid var(--line); background:#fff; border-radius:8px;
  padding:8px 11px; font-size:15px;
}
.mobile-menu > summary::-webkit-details-marker { display:none }
.mobilepanel {
  position:absolute; inset-inline-end:0; top:44px; width:min(260px,84vw);
  background:#fff; border:1px solid var(--line); border-radius:12px;
  box-shadow:var(--shadow); padding:7px; z-index:90;
}
.mobilepanel a {
  display:block; padding:11px 12px; border-radius:8px;
  text-decoration:none; font-size:14px; font-weight:650;
}
.mobilepanel a:hover { background:var(--paper) }

/* ── Grundgerüst ─────────────────────────────────────────────────────────── */
main { max-width:var(--wrap); margin:auto; padding-inline:var(--gutter); padding-bottom:80px }

.eyebrow {
  font-size:12px; font-weight:800; letter-spacing:.15em;
  text-transform:uppercase; color:var(--blue); margin-bottom:14px;
}
.card {
  background:var(--card); border:1px solid var(--line);
  border-radius:14px; padding:22px;
}

/* Beschriftungszeilen: KEINE feste Labelspalte. 100 px trägt „Object", aber
 * nicht „Quellenabdeckung" und schon gar nicht „Couverture des sources". */
.metaline {
  display:grid; grid-template-columns:auto minmax(0,1fr); gap:12px;
  padding-block:8px; border-top:1px solid var(--line); font-size:12.5px;
}
.metaline:first-of-type { border-top:0 }
.metaline > span { color:var(--muted) }

/* ── Fußbereich ──────────────────────────────────────────────────────────── */
.footer {
  max-width:var(--wrap); margin:70px auto 0;
  padding:30px var(--gutter) 64px;
  border-top:1px solid var(--line);
  display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:38px;
  color:var(--muted); font-size:12.5px;
}
.footer b { color:var(--ink); display:block; margin-bottom:8px }
.footer a { color:var(--ink) }
.foot-links { display:flex; gap:14px; flex-wrap:wrap; margin-top:12px }
.foot-pending { color:var(--amber); margin-top:8px }

/* ── Zustandsmarken ──────────────────────────────────────────────────────── */
/* Drei öffentliche Reifegrade, nicht sechs Roadmap-Vokabeln. Farbe und
 * Bedeutung sind gekoppelt: grün = live, blau = Pilot, violett = Preview. */
.chip {
  display:inline-flex; align-items:center; gap:5px;
  border-radius:999px; padding:5px 9px;
  font-size:12px; font-weight:750;
  background:var(--sand); color:#4c555e;
}
.chip.live    { background:var(--green-soft);  color:var(--green) }
.chip.pilot   { background:var(--blue-soft);   color:var(--blue) }
.chip.preview { background:var(--violet-soft); color:var(--violet) }
.chip.fixture { background:var(--amber-soft);  color:var(--amber) }

/* Die Fixture-Marke ist ein eigenes Bauteil, kein Fließtext. Sie steht auf
 * Karten, die eine Gestalt zeigen und keinen veröffentlichten Report — und sie
 * muss ohne Lesen der Bildunterschrift erkennbar sein. */
.fixture-note {
  border-inline-start:3px solid var(--amber);
  background:var(--amber-soft); color:#6b522d;
  padding:11px 13px; border-radius:0 5px 5px 0;
  font-size:12.5px;
}

/* ── Intern ──────────────────────────────────────────────────────────────── */
/* Die Werkzeuge der Review tragen einen eigenen Rand, damit auf einem
 * Bildschirmfoto sofort erkennbar ist, dass das nicht die öffentliche Seite
 * ist. */
.internal-bar {
  background:var(--navy); color:#fff;
  padding:9px var(--gutter);
  font-size:12.5px; display:flex; gap:14px; align-items:center; flex-wrap:wrap;
}
.internal-bar a { color:#c3cfdb }
.internal-bar a:hover { color:#fff }
.internal-bar .tag {
  font-family:var(--mono); font-size:12px;
  background:rgba(255,255,255,.13); padding:2px 7px; border-radius:4px;
}

/* ── Vorbehalte ──────────────────────────────────────────────────────────── */
/* Alpha, maschinelle Erzeugung, keine Anlageberatung. Drei Aussagen, die für
 * die ganze Fläche gelten — und deshalb nicht in einer Ecke stehen dürfen.
 *
 * Amber, nicht Rot: Die Seite ist unfertig, nicht kaputt. Und nicht Grau, denn
 * Grau ist die Farbe, in der man Kleingedrucktes überliest. */
.alphamark {
  margin-inline-start:-12px; align-self:center; flex:0 0 auto;
  text-decoration:none; white-space:nowrap;
  font-size:11px; font-weight:800; letter-spacing:.08em; text-transform:uppercase;
  color:var(--amber); background:var(--amber-soft);
  border:1px solid rgba(168,108,24,.30); border-radius:999px; padding:3px 8px;
}
.alphamark:hover { background:#f6e9cf }

/* Das Band steht ZWISCHEN Kopf und Ware, nicht darunter: Wer den Titel liest,
 * hat es gesehen, bevor er die erste Zahl sieht. Die Kurzzeile nennt alle drei
 * Punkte beim Namen — eine Zusammenfassung, die einen davon weglässt, ist die
 * häufigste Art, einen Vorbehalt unwirksam zu machen. */
.caveat {
  margin:18px 0 0;
  border:1px solid rgba(168,108,24,.34);
  background:var(--amber-soft);
  border-radius:12px;
}
.caveat summary {
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  padding:11px 14px; cursor:pointer; list-style:none;
  font-size:13px; line-height:1.45; color:#5d4310;
}
.caveat summary::-webkit-details-marker { display:none }
.caveat-mark {
  flex:0 0 auto; width:18px; height:18px; border-radius:50%;
  background:var(--amber); color:#fff;
  font-size:12px; font-weight:800; line-height:18px; text-align:center;
}
.caveat-line { flex:1 1 240px; min-width:0 }
.caveat-more {
  flex:0 0 auto; font-size:12px; font-weight:750; color:var(--amber);
  text-decoration:underline; text-underline-offset:2px;
}
.caveat-body {
  padding:12px 14px 14px;
  border-top:1px solid rgba(168,108,24,.22);
  display:grid; gap:13px;
}
.caveat-body h3 { margin:0 0 4px; font-size:13.5px; font-weight:800; color:#4a350c }
.caveat-body p { margin:0; font-size:13px; line-height:1.6; color:#5d4310; max-width:78ch }
.caveat-auth { font-style:italic }
.caveat-auth a { color:#5d4310 }

.foot-caveat { color:var(--amber); font-weight:700 }

/* Die Rechtsseite: eine Spalte, damit die Reihenfolge die Aussage trägt —
 * erst was gilt, dann was fehlt. */
.legal { display:grid; gap:14px; max-width:80ch }
.legal .card { scroll-margin-top:82px }   /* sonst liegt das Sprungziel unter der Kopfleiste */
.legal .card h2 {
  font-family:var(--serif); font-weight:400; font-size:22px;
  letter-spacing:-.01em; margin:0 0 8px;
}
.legal .card p { margin:0 0 10px; font-size:14px; line-height:1.65; color:#4c5761 }
.legal .card p:last-child { margin-bottom:0 }
.legal .pending { border-color:rgba(168,108,24,.34); background:var(--amber-soft) }
.legal .pending h2, .legal .pending p { color:#5d4310 }

/* Die Rechtstexte kommen aus Markdown-Dateien und bringen ihre eigene
 * Gliederung mit: `##` wird zu h3, weil h2 der Dokumenttitel ist. */
.legal .card h3 {
  font-size:15px; font-weight:800; color:var(--ink);
  margin:22px 0 6px; letter-spacing:0;
}
.legal .card h3:first-of-type { margin-top:12px }
.legal .card ul { margin:8px 0 12px; padding-inline-start:20px }
.legal .card li { font-size:14px; line-height:1.6; color:#4c5761; margin-bottom:4px }
.legal .card blockquote {
  margin:12px 0; padding:10px 14px;
  border-inline-start:3px solid var(--line); background:var(--sand);
}
.legal .card blockquote p { margin:0 }
.legal .card code {
  font-family:var(--mono); font-size:12.5px;
  background:var(--sand); padding:1px 5px; border-radius:4px;
}
.legal .card strong { color:var(--ink) }

/* Sprungmarken oben auf der Seite — fünf Dokumente sind zu viele zum Scrollen. */
.legal-nav { display:flex; flex-wrap:wrap; gap:8px; margin:26px 0 0 }
.legal-nav a {
  font-size:13px; text-decoration:none; color:#424d57;
  border:1px solid var(--line); border-radius:999px; padding:6px 12px;
  background:var(--card);
}
.legal-nav a:hover { border-color:var(--ink); color:var(--ink) }

/* Der Übersetzungshinweis. Er steht über den Texten, nicht darunter: Wer sie
 * liest, soll vorher wissen, welche Fassung im Zweifel gilt. */
.uebersetzt {
  margin:22px 0 0; padding:10px 14px;
  border:1px solid rgba(168,108,24,.30); background:var(--amber-soft);
  border-radius:10px; color:#5d4310; font-size:13px;
}

/* ── Schmale Geräte ──────────────────────────────────────────────────────── */
@media (max-width:860px) {
  :root { --gutter:16px }
  .nav { display:none }
  .mobile-menu { display:block }
  .top-actions .btn.wide-only { display:none }

  /* Die Kopfleiste lief bei 375 px auf 446 px hinaus — gemessen, nicht
   * geschätzt. Drei `white-space:nowrap` in einer Flex-Zeile (.brand,
   * .langbox > summary, .alphamark) setzen die min-content-Breite auf die
   * volle Textbreite: Diese Kinder KÖNNEN nicht schrumpfen. Dazu kein
   * flex-wrap und kein min-width:0 als Netz.
   *
   *   .brand 235 + .alphamark 61 + .top-actions 98 + 2 x 22 Lücke = 446
   *
   * Der Name der Firma bleibt, der Zusatz geht — er ist auf dem Telefon der
   * am wenigsten nötige Teil der Zeile und der breiteste Einzelposten. */
  .topbar-in { gap:10px }
  .brand small { display:none }
  .brand { min-width:0; overflow:hidden }
  .brand span:last-child { overflow:hidden; text-overflow:ellipsis }

  /* Die Marke bleibt vollständig. Sie ist der Reifegrad, nicht Zierrat — und
     auf dem Telefon wird geteilt gelesen. */
  .alphamark { margin-inline-start:0 }
}

/* ── Druck ───────────────────────────────────────────────────────────────── */
/* Reports werden ausgedruckt und weitergereicht; das ist in dieser Zielgruppe
 * der Normalfall. Ein klebender Kopf und ein Sprachwähler gehören nicht aufs
 * Papier. */
@media print {
  .topbar, .mobile-menu, .langbox, .skip, .internal-bar { display:none !important }
  body { background:#fff }
  main { padding:0; max-width:none }
  .card { border-color:#bbb; break-inside:avoid }
  a[href]:after { content:"" }

  /* Der Vorbehalt gehört aufs Papier, und zwar ganz. Die Kopfleiste mit der
   * Alpha-Marke ist hier ausgeblendet, und ein zugeklapptes <details> druckt
   * sonst nur die Kurzzeile — ein weitergereichter Ausdruck trüge dann drei
   * Stichworte statt des Wortlauts. */
  .caveat details > *:not(summary) { display:block !important }
  .caveat, .caveat summary { break-inside:avoid }
  .caveat summary { cursor:auto }
  .caveat-more { display:none }
}

/* ── Bewegung ────────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion:reduce) {
  html { scroll-behavior:auto }
  * { animation-duration:.01ms !important; transition-duration:.01ms !important }
}

/* ═══ Report-first: Startseite, Objekt, Report, Folie ═════════════════════ */

/* ── Hero ────────────────────────────────────────────────────────────────── */
.hero { padding:72px 0 44px; border-bottom:1px solid var(--line); max-width:900px }
.hero h1 {
  font-family:var(--serif); font-weight:400;
  font-size:clamp(32px, 6vw, 56px); line-height:1.04;
  letter-spacing:-.03em; margin:0 0 18px;
}
.hero p { font-size:clamp(15px, 2.2vw, 18px); color:#4c5761; margin:0; max-width:70ch }

.section { padding:46px 0 0 }
.section > h2 {
  font-family:var(--serif); font-weight:400; font-size:clamp(24px, 4vw, 34px);
  letter-spacing:-.02em; margin:0 0 18px;
}

/* ── Artefaktkarten ──────────────────────────────────────────────────────── */
.cards { display:grid; grid-template-columns:repeat(auto-fit,minmax(310px,1fr)); gap:16px }
.artifact {
  background:var(--card); border:1px solid var(--line); border-radius:14px;
  padding:20px; display:flex; flex-direction:column; gap:12px;
  text-decoration:none; color:inherit;
}
a.artifact:hover { border-color:#b9c1c8; box-shadow:var(--shadow) }
.artifact .topline { display:flex; justify-content:space-between; gap:10px; align-items:start }
.artifact h3 {
  font-family:var(--serif); font-weight:400; font-size:21px;
  line-height:1.22; margin:0;
}
.artifact .object { font-size:12.5px; color:var(--muted); font-family:var(--mono) }
.artifact .foot {
  margin-top:auto; padding-top:12px; border-top:1px solid var(--line);
  display:flex; justify-content:space-between; gap:10px;
  font-size:12.5px; color:var(--muted);
}
.artifact .foot b { color:var(--ink) }
/* Eine Fixture ist keine Ware. Sie sieht aus wie eine Karte und sagt es. */
.artifact.is-fixture { border-style:dashed; background:#fdfcf9 }

/* ── Coverage-Matrix ─────────────────────────────────────────────────────── */
.coverage { width:100%; border-collapse:collapse; font-size:12.5px; margin-top:12px }
.coverage th {
  text-align:start; font-size:12px; letter-spacing:.06em; text-transform:uppercase;
  color:var(--muted); font-weight:600; padding:8px 10px 8px 0;
  border-bottom:2px solid var(--ink);
}
.coverage td { padding:10px 10px 10px 0; border-bottom:1px solid var(--line); vertical-align:top }
.coverage .st { white-space:nowrap; font-weight:700 }
.coverage .available { color:var(--green) }
.coverage .partial   { color:var(--amber) }
.coverage .missing   { color:var(--muted) }
.coverage .beleg { color:var(--muted); font-family:var(--mono); font-size:12px }

/* ── Reportseite ─────────────────────────────────────────────────────────── */
.report { display:grid; grid-template-columns:minmax(0,1fr) 320px; gap:32px; padding-top:26px }
.report-head { padding:26px 0 20px; border-bottom:1px solid var(--line) }
.report-head h1 {
  font-family:var(--serif); font-weight:400;
  font-size:clamp(26px, 4.6vw, 42px); line-height:1.1;
  letter-spacing:-.02em; margin:0 0 14px; max-width:24ch;
}
.report-meta { display:flex; flex-wrap:wrap; gap:8px; font-family:var(--mono); font-size:12px }
.report-meta span {
  background:var(--sand); border-radius:5px; padding:4px 8px; color:#4d5760;
}

.editions { display:flex; gap:6px; flex-wrap:wrap; align-items:center; margin:20px 0 8px }
.editions a {
  border:1px solid var(--line); background:#fff; border-radius:999px;
  padding:8px 13px; font-size:12.5px; font-weight:700; text-decoration:none;
}
.editions a[aria-current="true"] { background:var(--navy); color:#fff; border-color:var(--navy) }
.editions .note { font-size:12px; color:var(--muted) }

.slidecard {
  background:var(--card); border:1px solid var(--line); border-radius:14px;
  padding:18px; margin-bottom:16px; overflow:hidden;
}
.slidecard > .kicker {
  font-family:var(--mono); font-size:12px; color:var(--muted);
  text-transform:uppercase; letter-spacing:.07em; margin-bottom:8px;
}
.slidecard > h3 {
  font-family:var(--serif); font-weight:400; font-size:clamp(18px,2.6vw,25px);
  line-height:1.25; margin:0 0 14px;
}
.slidecard .actions { display:flex; gap:7px; flex-wrap:wrap; margin-top:14px }

/* Die Folie selbst. Das Deck zeichnet auf eine feste Fläche von 1280×800; hier
 * wird sie proportional in die verfügbare Breite skaliert. Nichts wird neu
 * gezeichnet — was der Besucher sieht, ist das ausgelieferte Artefakt. */
.deckframe {
  container-type:inline-size;
  position:relative; aspect-ratio:16/10; overflow:hidden;
  border:1px solid var(--line); border-radius:9px; background:#fff;
}
.deckframe .deck {
  position:absolute; top:0; left:0;
  width:1280px; height:800px;
  transform-origin:top left;
  transform:scale(var(--s));

  /* Rückfall für Browser ohne CSS-Trigonometrie. Grobe Stufen sind hier
   * richtig: Sie treffen die Spaltenbreite ungefähr, und `overflow:hidden`
   * am Rahmen verhindert, dass etwas ausbricht. */
  --s:.64;
}
@media (max-width:900px) { .deckframe .deck { --s:.52 } }
@media (max-width:620px) { .deckframe .deck { --s:.30 } }

/* Der genaue Wert. `scale()` braucht eine ZAHL — und aus einer Länge lässt
 * sich in CSS keine dimensionslose Zahl dividieren; `calc(100cqw / 1280)`
 * ergibt wieder eine Länge und wird stillschweigend verworfen. Der Umweg über
 * den Arkustangens liefert das Verhältnis als reine Zahl:
 *
 *     tan(atan2(Breite, 1280px))  =  Breite / 1280px
 *
 * Gemessen: Rahmen 823×514, Folie 821×513. */
@supports (transform: scale(tan(atan2(100cqw, 1280px)))) {
  .deckframe .deck { --s: tan(atan2(100cqw, 1280px)) }
}
/* Das Deck bringt eigene Regeln für seinen Rahmen mit; im Web soll die Folie
 * die Fläche füllen und keinen Schlagschatten werfen. */
.deckframe .deck .page { padding:0 !important; display:block !important }
.deckframe .deck .frame { box-shadow:none !important }

/* ── Seitenspalte ────────────────────────────────────────────────────────── */
.aside { position:sticky; top:86px; align-self:start; display:grid; gap:14px }
.aside .card { padding:18px }
.aside h3 {
  font-size:12px; text-transform:uppercase; letter-spacing:.09em;
  color:var(--muted); margin:0 0 12px; font-weight:700;
}
.dl { display:grid; gap:7px }
.dl a {
  border:1px solid var(--line); border-radius:8px; padding:10px 11px;
  text-decoration:none; display:flex; justify-content:space-between; gap:10px;
  font-size:12.5px; align-items:baseline;
}
.dl a:hover { border-color:#aeb6bf }
.dl a b { font-weight:700 }
.dl a span { color:var(--muted); font-family:var(--mono); font-size:12px }

/* ── ORF-Handoff ─────────────────────────────────────────────────────────── */
.orf { margin-top:34px; padding:26px 0 0; border-top:1px solid var(--line) }
.orf h2 {
  font-family:var(--serif); font-weight:400; font-size:26px; margin:0 0 8px;
}
.orf > p { color:var(--muted); max-width:72ch; margin:0 0 18px; font-size:13px }
.orf-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:10px }
.orf-grid a, .orf-grid div {
  border:1px solid var(--line); background:#fff; border-radius:11px;
  padding:14px; text-decoration:none; display:block;
}
.orf-grid a:hover { border-color:#aeb6bf }
.orf-grid b { display:block; font-size:13px; margin-bottom:4px }
.orf-grid span { font-size:12px; color:var(--muted) }
/* Die vierte Kachel ist ein Ziel, kein Link — solange es sie nicht gibt. */
.orf-grid .pending { opacity:.6; background:var(--sand) }

/* ── Folienseite ─────────────────────────────────────────────────────────── */
.breadcrumb {
  display:flex; gap:8px; align-items:center; flex-wrap:wrap;
  font-size:12.5px; color:var(--muted); padding:22px 0 0;
}
.breadcrumb a { color:var(--muted) }
.slide-nav { display:flex; gap:8px; flex-wrap:wrap; margin-top:18px }

/* ── Leerzustände ────────────────────────────────────────────────────────── */
.empty {
  border:1px dashed var(--line); border-radius:12px;
  padding:34px 22px; text-align:center; color:var(--muted);
}

/* ── Schmale Geräte ──────────────────────────────────────────────────────── */
@media (max-width:900px) {
  .report { grid-template-columns:1fr; gap:22px }
  .aside { position:static }
}

@media print {
  .editions, .orf, .aside, .breadcrumb, .slide-nav { display:none !important }
  .report { grid-template-columns:1fr }
  .slidecard { border:0; padding:0; break-inside:avoid; page-break-inside:avoid }
}

/* ═══ Create Another, Jobzustand, Filter ══════════════════════════════════ */

/* ── Formular ────────────────────────────────────────────────────────────── */
.feld { display:grid; gap:6px; margin-bottom:16px }
.feld label { font-size:13px }
.feld input, .feld select {
  border:1px solid #cfd5da; border-radius:8px; padding:11px 12px;
  background:#fff; width:100%; font-size:15px;
}
.feld input:focus, .feld select:focus {
  border-color:var(--blue); outline:0; box-shadow:0 0 0 3px rgba(49,95,206,.11);
}
/* Ein festes Feld sieht nicht aus wie ein bedienbares. Sonst versucht es
 * jemand — und wundert sich, dass nichts passiert. */
.feld input[readonly] { background:var(--sand); color:#5a636c; cursor:default }
.feld small { color:var(--muted); font-size:12px }
.feld-paar { display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:14px }

.hinweis-fest {
  color:var(--muted); font-size:12.5px; margin:0 0 18px; max-width:70ch;
}
.hinweis-warn {
  border-inline-start:3px solid var(--amber); background:var(--amber-soft);
  color:#6b522d; padding:11px 13px; border-radius:0 5px 5px 0;
  font-size:12.5px; margin:12px 0 0;
}
.limitation {
  border-inline-start:3px solid var(--amber); background:var(--amber-soft);
  color:#6b522d; padding:12px 14px; border-radius:0 5px 5px 0; font-size:12.5px;
}

/* ── Zustandsmaschine ────────────────────────────────────────────────────── */
/* Erledigte Stufen sind gesetzt, die aktuelle traegt Farbe, kommende bleiben
 * blass. Kein Spinner: Der Zustand IST die Information. */
.zustaende { list-style:none; margin:22px 0 0; padding:0; display:grid; gap:2px }
.zustaende li {
  position:relative; padding:16px 18px 16px 46px;
  background:#fff; border:1px solid var(--line);
}
.zustaende li:first-child { border-radius:12px 12px 0 0 }
.zustaende li:last-child  { border-radius:0 0 12px 12px }
.zustaende li + li { border-top:0 }
.zustaende li:before {
  content:""; position:absolute; inset-inline-start:18px; top:19px;
  width:12px; height:12px; border-radius:50%;
  border:2px solid var(--line); background:#fff;
}
.zustaende li b { display:block; font-size:14px }
.zustaende li span { display:block; font-size:12.5px; color:var(--muted); margin-top:4px }
.zustaende li span.leise { color:#9aa3ab }

.zustaende li.erledigt:before { background:var(--green); border-color:var(--green) }
.zustaende li.erledigt b { color:var(--muted); font-weight:600 }
.zustaende li.jetzt { border-color:var(--blue); background:var(--blue-soft) }
.zustaende li.jetzt:before { background:var(--blue); border-color:var(--blue) }
.zustaende li.offen b { color:#9aa3ab }

.grund {
  background:#161b22; color:#dce3ea; border-radius:9px; padding:13px;
  font:12.5px/1.55 var(--mono); white-space:pre-wrap; overflow:auto;
  max-height:260px; margin:12px 0 0;
}

/* ── Filterzeile ─────────────────────────────────────────────────────────── */
.filter {
  display:flex; gap:10px; align-items:center; flex-wrap:wrap;
  margin-bottom:18px;
}
.filter label { font-size:12.5px; color:var(--muted) }
.filter select {
  border:1px solid var(--line); border-radius:8px; padding:9px 11px;
  background:#fff; font-size:13px;
}

/* ═══ Method ══════════════════════════════════════════════════════════════ */
.gates { list-style:none; margin:0; padding:0; display:grid; gap:2px }
.gates li {
  background:#fff; border:1px solid var(--line); padding:16px 18px;
  display:grid; grid-template-columns:minmax(0,190px) minmax(0,1fr); gap:8px 22px;
}
.gates li:first-child { border-radius:12px 12px 0 0 }
.gates li:last-child  { border-radius:0 0 12px 12px }
.gates li + li { border-top:0 }
.gates b { font-size:14px }
.gates span { color:#4c5761; font-size:13.5px }

.adressen { display:grid; gap:5px }
.adressen code {
  font-family:var(--mono); font-size:12.5px; color:#4d5760;
  background:var(--sand); border-radius:6px; padding:6px 9px;
  word-break:break-all;
}

/* Die vier Zahlen. Eine davon ist die wichtige, und das sieht man. */
.zahlen { display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:12px }
.zahl {
  background:#fff; border:1px solid var(--line); border-radius:12px; padding:18px;
}
.zahl b { display:block; font-family:var(--serif); font-size:38px; line-height:1 }
.zahl span { display:block; font-size:13px; margin-top:8px }
.zahl small { display:block; color:var(--muted); margin-top:4px }
.zahl.wichtig { border-color:var(--blue); background:var(--blue-soft) }
.zahl.wichtig b { color:var(--blue) }

@media (max-width:720px) {
  .gates li { grid-template-columns:1fr; gap:4px }
}

/* ── Fehler melden ───────────────────────────────────────────────────────── */
/* Der Rückweg. Er steht am Report und an der Folie, nicht nur im Fußbereich:
 * Wer eine falsche Zahl sieht, sieht sie dort. */
.melden { margin:28px 0 0 }
.melden a {
  font-size:13px; color:var(--blue); text-decoration:underline;
  text-underline-offset:3px;
}
.melden a:hover { color:var(--ink) }

.feedback { max-width:70ch }
.feedback textarea {
  border:1px solid #cfd5da; border-radius:8px; padding:11px 12px;
  font:inherit; font-size:14px; width:100%; resize:vertical;
}
.feedback textarea:focus { border-color:var(--blue); outline:2px solid var(--blue-soft) }
.feedback label b { color:var(--red) }
.hinweis { font-size:12px; color:var(--muted); line-height:1.55 }

/* Der Weg zur Quelle. Zwei Ziele, deshalb zweizeilig — und sichtbar als Link,
 * nicht als graue Metazeile: Er ist das eingelöste Versprechen des Vorbehalts,
 * kein Beiwerk. */
.metaline.quelle { align-items:start }
.metaline.quelle b { font-weight:600 }
.metaline.quelle a { color:var(--blue); text-decoration:underline; text-underline-offset:2px }
.metaline.quelle a:hover { color:var(--ink) }