/* ==========================================================================
   AnaGraph — Stylesheet

   Bauart und Aufbau folgen den Schwesterseiten (fontissoft.de, doestat.com):
   ein einziges Stylesheet, kein Framework, dunkler Grund, ein Akzent, Inter
   als Textschrift.

   DIE FARBIGKEIT IST EIGENS UND ABSICHTLICH ANDERS. fontissoft.de traegt ein
   blaulila #9184d9, doestat.com ein gedecktes Blau auf hellem Grund. Diese
   Seite traegt Petrol/Teal. Drei Produkte aus einem Haus duerfen verwandt
   aussehen, aber wer zwei Tabs offen hat, muss sie auseinanderhalten koennen.

   ZWEI DINGE, DIE `_headers` ERZWINGT:

   1. KEINE style="…"-ATTRIBUTE. Die CSP setzt `style-src 'self'` ohne
      'unsafe-inline'; der Browser verwirft Inline-Styles stillschweigend.
      Alles Sichtbare gehoert hierher, das HTML traegt nur Klassen.

   2. KEIN FREMDER FONT-HOST. `default-src 'self'` blockt fonts.googleapis.com
      — und das soll so bleiben: ein fremder Font-Host sieht die IP-Adresse
      jedes Besuchers, und diesen Drittanbieter-Zugriff deckt die
      Datenschutzerklaerung nicht. Inter liegt deshalb selbst unter
      /assets/fonts/.

   Der Cache-Buster rechnet sich aus dem INHALT dieser Datei
   (tools/build.py, asset_version()) — hier ist also nichts hochzuzaehlen.
   ========================================================================== */

/* ---------------------------------- Schrift --------------------------------
   Inter, selbst gehostet. Die Dateien stammen von fonts.gstatic.com (Inter
   v20, variabel im Bereich 400–700) und liegen unter /assets/fonts/; die
   Lizenz (SIL OFL 1.1) liegt als OFL.txt daneben und muss dort bleiben — die
   OFL verlangt, dass sie die Schrift begleitet.

   `unicode-range` teilt in latin und latin-ext. Der Browser laedt nur, was
   auf der Seite vorkommt — deutscher und englischer Text liegt komplett in
   latin, latin-ext (85 KB) wird also nur bei Bedarf geholt.

   ACHTUNG BEIM AUSTAUSCHEN: `_headers` cacht /assets/* 24 Stunden, und diese
   URLs tragen keinen Cache-Buster (`{{v}}` gilt nur fuer style.css und
   main.js). Eine neue Schriftfassung bekommt deshalb einen neuen Dateinamen.
   --------------------------------------------------------------------------- */

@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("/assets/fonts/inter-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191,
    U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("/assets/fonts/inter-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7,
    U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F,
    U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F,
    U+A720-A7FF;
}

:root {
  /* --- Grundfarben ---------------------------------------------------------
     Kontraste gegen den Grund #14161f nachgerechnet; WCAG 2.1 AA verlangt
     4,5:1 fuer Fliesstext:
       --text     #e8eaf0   15,0:1
       --accent   #4fd3b4    9,7:1  (Links, Eyebrow, Ziffern)
       --muted    #8a8d96    5,4:1  (Fussnoten, Footer)
     Wer eine Stelle noch leiser haben will, nimmt eine kleinere Rolle, nicht
     eine dunklere Farbe: unter 4,5:1 faellt der Text durch die Pruefung. */
  --bg: #14161f;
  --surface: #1e2130;
  --surface-2: #262a3b;
  --text: #e8eaf0;
  --muted: #8a8d96;
  --accent: #4fd3b4;
  --accent-300: #b9f1e4;
  --accent-900: #16342c;
  --divider: color-mix(in srgb, #e8eaf0 14%, transparent);

  --font: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --mono: ui-monospace, "Cascadia Mono", "SFMono-Regular", Consolas,
    "Liberation Mono", monospace;

  --radius: 10px;
  --radius-lg: 16px;

  /* Ein Mass fuer beide: der Inhalt und der Seitenrand des Kopfes muessen auf
     derselben Linie stehen, sonst haengt die Wortmarke schief. */
  --measure: 1120px;
  --gutter: clamp(20px, 5vw, 64px);
}

* { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  /* Der Kopf klebt oben und wuerde das Ziel eines Ankersprungs verdecken. */
  scroll-padding-top: 84px;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  margin: 0;
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.6;
  color: var(--text);
  text-wrap: pretty;
  -webkit-font-smoothing: antialiased;
  /* Zwei Lichter auf dem Grund: ein Schein oben rechts hinter der
     Ueberschrift, eine Verdunkelung unten links. Fest am Dokument, nicht am
     Bild — sie wandern also mit dem Scrollen davon. */
  background:
    radial-gradient(1100px 700px at 84% -180px,
      color-mix(in srgb, var(--accent-900) 85%, transparent), transparent 62%),
    radial-gradient(1000px 760px at -10% 100%,
      color-mix(in srgb, black 34%, transparent), transparent 55%),
    var(--bg);
  background-repeat: no-repeat;
}

.container {
  max-width: var(--measure);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

/* Sicherheitsnetz: Was der Generator uebersehen haette, bleibt wenigstens
   unsichtbar. Im Normalfall greift diese Regel nie — build.py bricht ab, wenn
   nach der Sprachtrennung noch fremdsprachige Bloecke uebrig sind. */
html[lang="de"] [lang="en"],
html[lang="en"] [lang="de"] { display: none; }

a {
  color: var(--accent);
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}
a:hover { color: var(--accent-300); }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 4px;
}

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  padding: 10px 16px;
  background: var(--accent);
  color: #08110e;
  font-weight: 600;
}
.skip-link:focus { left: 8px; top: 8px; }

/* ---------------------------------- Kopf ---------------------------------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--divider);
}

.header-inner {
  display: flex;
  align-items: center;
  gap: 16px;
  min-height: 64px;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--text);
  text-decoration: none;
  font-size: 19px;
  letter-spacing: -0.01em;
}
/* Die Wortmarke: mager plus fett, ein Wort als zwei gelesen. Die Teilung
   steht als Markup in WORDMARK (tools/build.py) und nicht hier, weil sie zum
   Namen gehoert und nicht zur Gestaltung. */
.brand-name { font-weight: 400; }
.brand-name b { font-weight: 700; }

/* Die Kachel ist eine PLATZHALTER-Marke, kein Logo: zwei Balken als
   angedeutetes Diagramm, gesetzt aus derselben Geometrie wie favicon.svg.
   Sobald ein echtes Logo vorliegt, wird sie ersetzt — inline und nicht als
   <img>, damit sie die Farben von hier bekommt und auf Papier mitkippt. */
.brand-mark {
  width: 26px;
  height: 26px;
  flex: none;
}
.brand-mark .mark-bg { fill: var(--accent-900); }
.brand-mark .mark-bar { fill: var(--accent); }

.site-nav {
  display: flex;
  align-items: center;
  gap: 22px;
  margin-left: auto;
  font-size: 15px;
}
.site-nav a {
  color: var(--text);
  text-decoration: none;
  opacity: 0.86;
  white-space: nowrap;
}
.site-nav a:hover { opacity: 1; color: var(--accent); }

.lang-switch {
  display: inline-flex;
  gap: 2px;
  border: 1px solid var(--divider);
  border-radius: 999px;
  padding: 2px;
}
.lang-btn {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  padding: 4px 9px;
  border-radius: 999px;
  color: var(--muted);
  text-decoration: none;
}
.lang-btn:hover { color: var(--text); }
.lang-btn[aria-current="page"] {
  background: var(--accent);
  color: #08110e;
}

.nav-toggle {
  display: none;
  margin-left: auto;
  width: 42px; height: 38px;
  background: transparent;
  border: 1px solid var(--divider);
  border-radius: 8px;
  cursor: pointer;
  padding: 9px 10px;
}
.nav-toggle .bar {
  display: block;
  height: 2px;
  background: var(--text);
  border-radius: 2px;
}
.nav-toggle .bar + .bar { margin-top: 4px; }

@media (max-width: 900px) {
  .nav-toggle { display: block; }
  .site-nav {
    display: none;
    position: absolute;
    left: 0; right: 0; top: 100%;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 8px var(--gutter) 18px;
    background: var(--bg);
    border-bottom: 1px solid var(--divider);
  }
  .site-nav.open { display: flex; }
  .site-nav a { padding: 11px 0; border-bottom: 1px solid var(--divider); }
  .site-nav .btn { margin-top: 14px; text-align: center; }
  .header-inner { position: relative; flex-wrap: wrap; }
  .lang-switch { order: -1; margin-left: auto; }
  .nav-toggle { margin-left: 10px; }
}

/* --------------------------------- Knoepfe -------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 11px 20px;
  border-radius: 999px;
  border: 1px solid var(--divider);
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
  color: var(--text);
}
.btn:hover { border-color: var(--accent); color: var(--accent); }
.btn-primary {
  background: var(--accent);
  border-color: var(--accent);
  color: #08110e;
}
.btn-primary:hover {
  background: var(--accent-300);
  border-color: var(--accent-300);
  color: #08110e;
}

/* ---------------------------------- Hero ---------------------------------- */

.hero { padding: clamp(56px, 9vw, 108px) 0 clamp(40px, 6vw, 72px); }

.eyebrow {
  margin: 0 0 18px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--accent);
}

.hero h1 {
  margin: 0 0 22px;
  font-size: clamp(34px, 6.2vw, 62px);
  line-height: 1.06;
  letter-spacing: -0.025em;
  font-weight: 600;
  max-width: 17ch;
}
/* Der Zeilenumbruch der Schlagzeile ist gesetzt und nicht der Spaltenbreite
   ueberlassen — im Englischen liegt er an anderer Stelle, deshalb stehen in
   der Quelle zwei vollstaendige Fassungen. */
.hero h1 .line { display: block; }

.hero-sub {
  margin: 0 0 30px;
  max-width: 62ch;
  font-size: clamp(17px, 2vw, 20px);
  color: color-mix(in srgb, var(--text) 88%, transparent);
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
}

.hero-note {
  margin: 22px 0 0;
  font-size: 14px;
  color: var(--muted);
  max-width: 62ch;
}

/* Zahlenband unter dem Hero. Jede Zahl ist aus dem Quellrepo belegt — siehe
   README, „Woher die Zahlen stammen". Wer eine aendert, aendert sie dort mit. */
.figures {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 1px;
  margin-top: 52px;
  background: var(--divider);
  border: 1px solid var(--divider);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.figure {
  background: var(--bg);
  padding: 22px 20px;
}
.figure dt {
  font-size: 13px;
  color: var(--muted);
  margin-bottom: 6px;
}
.figure dd {
  margin: 0;
  font-size: 27px;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--accent);
  font-feature-settings: "tnum";
}

/* -------------------------------- Abschnitte ------------------------------- */

.section { padding: clamp(52px, 7vw, 88px) 0; }
.section-alt {
  background: color-mix(in srgb, var(--surface) 60%, transparent);
  border-top: 1px solid var(--divider);
  border-bottom: 1px solid var(--divider);
}

.section h2 {
  margin: 0 0 14px;
  font-size: clamp(26px, 3.6vw, 38px);
  line-height: 1.18;
  letter-spacing: -0.02em;
  font-weight: 600;
  max-width: 24ch;
}

.section .lead {
  margin: 0 0 36px;
  max-width: 68ch;
  font-size: 17px;
  color: color-mix(in srgb, var(--text) 85%, transparent);
}

/* --------------------------------- Karten --------------------------------- */

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

.card {
  background: var(--surface);
  border: 1px solid var(--divider);
  border-radius: var(--radius-lg);
  padding: 24px 22px;
}
.card h3 {
  margin: 0 0 10px;
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -0.01em;
}
.card p { margin: 0 0 12px; font-size: 15px; color: color-mix(in srgb, var(--text) 84%, transparent); }
.card p:last-child { margin-bottom: 0; }

.card-kicker {
  display: block;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 10px;
}

/* Listen von Verfahren und Diagrammtypen. Bewusst als Aufzaehlung und nicht
   als Fliesstext: wer eine Statistik-Software sucht, sucht nach dem Namen
   eines Verfahrens und will ihn finden, nicht umschrieben lesen. */
.tag-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}
.tag-list li {
  font-size: 13.5px;
  line-height: 1.35;
  padding: 5px 11px;
  border: 1px solid var(--divider);
  border-radius: 999px;
  color: color-mix(in srgb, var(--text) 88%, transparent);
  background: color-mix(in srgb, var(--surface) 70%, transparent);
}

.group { margin-bottom: 26px; }
.group:last-child { margin-bottom: 0; }
.group h3 {
  margin: 0 0 12px;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}

/* --------------------------- Diagramm-Galerie ------------------------------
   Drei Spalten ab 1000 px, zwei ab 640, sonst eine. Die Kacheln liegen auf
   hellem Grund und nicht auf --surface: die Diagramme selbst haben einen
   weissen Hintergrund (so exportiert Plotly, und so gehoeren sie in eine
   Veroeffentlichung). Eine dunkle Kachel darunter waere ein harter Rand um
   jedes Bild.
   --------------------------------------------------------------------------- */

.gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 290px), 1fr));
  gap: 18px;
  margin: 0 0 26px;
}

.shot { margin: 0; }

/* Der Knopf ist der Bildrahmen. Ein <button> und kein <a>: das Ziel ist
   keine Adresse, sondern eine Ansicht auf derselben Seite. Ohne JavaScript
   passiert beim Klick nichts — das Bild ist dann trotzdem vollstaendig da,
   nur eben in Kachelgroesse. */
.shot-btn {
  display: block;
  width: 100%;
  padding: 0;
  border: 1px solid var(--divider);
  border-radius: var(--radius);
  overflow: hidden;
  background: #fff;
  cursor: zoom-in;
  line-height: 0;
}
.shot-btn:hover { border-color: var(--accent); }

.shot-btn img {
  display: block;
  width: 100%;
  height: auto;
}

.shot figcaption {
  margin-top: 9px;
  font-size: 13.5px;
  line-height: 1.45;
  color: var(--muted);
}
.shot figcaption b { color: var(--text); font-weight: 600; }

.gallery-note {
  margin: 0 0 36px;
  max-width: 74ch;
  font-size: 14px;
  color: var(--muted);
}

/* ------------------------------- Lightbox ---------------------------------
   Kein Fremdpaket: ein <dialog> plus zwanzig Zeilen in assets/main.js. Der
   Browser bringt Modalitaet, Fokusfalle und Esc-zum-Schliessen selbst mit —
   eine Bibliothek dafuer waere die zweite Abhaengigkeit dieser Seite und die
   erste, die JavaScript zur Voraussetzung machte.
   --------------------------------------------------------------------------- */

.lightbox {
  border: 0;
  padding: 0;
  background: transparent;
  max-width: 96vw;
  max-height: 94vh;
  overflow: visible;
}
.lightbox::backdrop {
  background: rgba(8, 10, 16, 0.86);
}
.lightbox img {
  display: block;
  max-width: 96vw;
  max-height: 88vh;
  width: auto;
  height: auto;
  border-radius: var(--radius);
  background: #fff;
}
.lightbox-close {
  position: absolute;
  top: -14px;
  right: -14px;
  width: 40px;
  height: 40px;
  border-radius: 999px;
  border: 1px solid var(--divider);
  background: var(--surface);
  color: var(--text);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
}
.lightbox-close:hover { border-color: var(--accent); color: var(--accent); }

.lightbox-caption {
  margin: 10px 2px 0;
  font-size: 14px;
  color: var(--accent-300);
  max-width: 96vw;
}

@media (max-width: 640px) {
  .lightbox-close { top: -8px; right: -8px; width: 34px; height: 34px; font-size: 17px; }
}

/* ------------------------------ Vier Oberflaechen -------------------------- */

.surfaces {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 18px;
}
.surface-card {
  background: var(--surface);
  border: 1px solid var(--divider);
  border-radius: var(--radius-lg);
  padding: 24px 22px;
  display: flex;
  flex-direction: column;
}
.surface-card h3 { margin: 0 0 8px; font-size: 18px; font-weight: 600; }
.surface-card p { margin: 0 0 16px; font-size: 15px; color: color-mix(in srgb, var(--text) 84%, transparent); }
.surface-card pre { margin: auto 0 0; }

pre {
  background: #0e1017;
  border: 1px solid var(--divider);
  border-radius: var(--radius);
  padding: 13px 15px;
  overflow-x: auto;
  font-family: var(--mono);
  font-size: 12.5px;
  line-height: 1.65;
  color: var(--accent-300);
}
code { font-family: var(--mono); font-size: 0.92em; }
p code, li code, td code {
  background: color-mix(in srgb, var(--surface-2) 80%, transparent);
  padding: 1px 5px;
  border-radius: 5px;
}

/* -------------------------------- Tabellen -------------------------------- */

.table-wrap { overflow-x: auto; }

table {
  width: 100%;
  border-collapse: collapse;
  font-size: 15px;
  min-width: 520px;
}
th, td {
  text-align: left;
  padding: 13px 14px;
  border-bottom: 1px solid var(--divider);
  vertical-align: top;
}
thead th {
  font-size: 13px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 600;
}
tbody th { font-weight: 600; }

/* ---------------------------- Offene-Punkte-Kasten ------------------------- */

/* Der Kasten macht sichtbar, was auf dieser Seite noch nicht entschieden ist.
   Er steht dort, wo eine fertige Seite Preise haette. Das ist besser als eine
   Zahl, die niemand eingeloest hat — und besser als gar kein Abschnitt, denn
   „was kostet es" ist die Frage, mit der Besucher kommen. */
.notice {
  border: 1px solid color-mix(in srgb, var(--accent) 40%, transparent);
  background: color-mix(in srgb, var(--accent-900) 55%, transparent);
  border-radius: var(--radius-lg);
  padding: 22px 24px;
  max-width: 74ch;
}
.notice h3 { margin: 0 0 10px; font-size: 17px; font-weight: 600; }
.notice p { margin: 0 0 12px; font-size: 15px; }
.notice p:last-child { margin-bottom: 0; }
.notice ul { margin: 0 0 12px; padding-left: 20px; font-size: 15px; }
.notice li { margin-bottom: 6px; }

/* --------------------------------- Kontakt -------------------------------- */

.contact-box {
  display: flex;
  flex-wrap: wrap;
  gap: 20px 40px;
  align-items: center;
  justify-content: space-between;
  background: var(--surface);
  border: 1px solid var(--divider);
  border-radius: var(--radius-lg);
  padding: 30px 28px;
}
.contact-box p { margin: 0; max-width: 52ch; font-size: 16px; }
.contact-mail {
  font-size: clamp(18px, 2.4vw, 24px);
  font-weight: 600;
  letter-spacing: -0.01em;
}
.contact-ways { display: flex; flex-direction: column; gap: 6px; }
.contact-phone {
  font-size: 15px;
  color: var(--muted);
}
/* Die Nummer bekommt Tabellenziffern: sonst tanzen die Gruppen einer
   Rufnummer in Inters proportionalen Ziffern sichtbar auf und ab. */
.contact-phone a {
  color: var(--text);
  font-feature-settings: "tnum";
  white-space: nowrap;
}
.contact-phone a:hover { color: var(--accent); }

/* ---------------------------------- Fuss ---------------------------------- */

.site-footer {
  border-top: 1px solid var(--divider);
  padding: 40px 0 56px;
  font-size: 14px;
  color: var(--muted);
}
.footer-inner {
  display: flex;
  flex-wrap: wrap;
  gap: 14px 28px;
  align-items: center;
  justify-content: space-between;
}
.footer-links { display: flex; flex-wrap: wrap; gap: 20px; }
.site-footer a { color: var(--muted); text-decoration: none; }
.site-footer a:hover { color: var(--accent); }

/* --------------------------- Rechtstexte (Fliesstext) ---------------------- */

.legal { padding: clamp(44px, 6vw, 72px) 0 clamp(52px, 7vw, 88px); }
.legal .container { max-width: 760px; }
.legal h1 {
  margin: 0 0 10px;
  font-size: clamp(28px, 4vw, 40px);
  letter-spacing: -0.02em;
  font-weight: 600;
}
.legal h2 {
  margin: 40px 0 12px;
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -0.01em;
}
.legal h3 { margin: 26px 0 8px; font-size: 16px; font-weight: 600; }
.legal p, .legal li { font-size: 15.5px; }
.legal ul { padding-left: 20px; }
.legal address { font-style: normal; }

/* [PLATZHALTER] sichtbar machen. Eine Luecke, die aussieht wie Text, wird
   uebersehen — und genau diese Luecken sind der Grund, warum die Seite noch
   `noindex` traegt. */
.ph {
  background: color-mix(in srgb, var(--accent) 22%, transparent);
  border-bottom: 1px dashed var(--accent);
  padding: 0 3px;
  border-radius: 3px;
  font-weight: 600;
}

.draft-banner {
  background: color-mix(in srgb, var(--accent-900) 70%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 45%, transparent);
  border-radius: var(--radius);
  padding: 14px 18px;
  margin: 0 0 34px;
  font-size: 14.5px;
}
.draft-banner p { margin: 0; }

/* ---------------------------------- 404 ----------------------------------- */

.notfound {
  min-height: 68vh;
  display: flex;
  align-items: center;
  text-align: center;
}
.notfound h1 { font-size: clamp(30px, 5vw, 46px); margin: 0 0 14px; font-weight: 600; }
.notfound p { margin: 0 0 26px; color: var(--muted); }
.notfound .container { max-width: 620px; }
/* text-align: center wirkt nicht auf Flex-Kinder — der Knopfpaar-Container
   braucht die Zentrierung eigens, sonst haengt er links unter der
   zentrierten Zeile. */
.notfound .hero-actions { justify-content: center; }

/* --------------------------------- Drucken --------------------------------
   Die Zielgruppe druckt: Ein Beschaffungsvorgang landet in einer Akte, die
   Seite des Anbieters gleich mit. Browser drucken Hintergruende NICHT,
   Schriftfarben schon — ohne diesen Block kommt der helle Text der dunklen
   Seite auf weissem Papier heraus, also nichts.
   --------------------------------------------------------------------------- */

@media print {
  :root {
    --bg: #fff;
    --surface: #fff;
    --surface-2: #fff;
    --text: #101216;
    --muted: #444;
    --accent: #0d6f5c;
    --accent-300: #0d6f5c;
    --divider: #bbb;
  }
  body { background: #fff; font-size: 11pt; }
  .site-header, .site-nav, .nav-toggle, .lang-switch, .skip-link,
  .hero-actions, .btn { display: none !important; }
  .section, .hero, .legal { padding: 14pt 0; }
  .card, .surface-card, .notice, .contact-box, .figures, .figure {
    border-color: #bbb;
    background: #fff;
  }
  pre { background: #f3f3f3; color: #101216; }
  a { color: #101216; text-decoration: underline; }
  /* Die Galerie darf mit aufs Papier — die Diagramme SIND das Argument.
     Zwei Spalten statt drei, damit die Achsenbeschriftung lesbar bleibt,
     und ein Seitenumbruch mitten durch eine Kachel waere ein halbes Bild. */
  .gallery { grid-template-columns: 1fr 1fr; gap: 10pt; }
  .shot { break-inside: avoid; }
  .shot-btn { border-color: #bbb; }
  /* Der Dialog ist zu, solange niemand klickt — auf Papier gibt es keinen
     Klick. Sicherheitshalber trotzdem: ein offener <dialog> im Ausdruck
     legte sich sonst ueber alles. */
  .lightbox { display: none !important; }
  /* Wer die gedruckte Seite in der Hand hat, hat den Link nicht. */
  main a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 9pt; }
}