@font-face { font-family: "Instrument Sans"; src: url("schriften/instrumentsans.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }
/* Gemeinsames Gerüst für Impressum und Datenschutz.
   Erbt die Tokens aus dem Hauptentwurf, damit die Seiten nicht wie Fremdkörper wirken. */

:root {
  --color-paper:        oklch(99% 0.002 250);
  --color-paper-2:      oklch(94.2% 0.008 250);
  --color-paper-3:      oklch(89.8% 0.008 250);
  --color-ink:          oklch(24.5% 0.008 250);
  --color-ink-2:        oklch(44.0% 0.008 250);
  --color-ink-3:        oklch(55.0% 0.008 250);
  --color-accent:       oklch(45% 0.15 27);
  --color-marke:        oklch(45% 0.15 27);
  --color-accent-wash:  oklch(93.5% 0.008 250);
  --color-rule:         oklch(85.5% 0.008 250);
  --color-focus:      oklch(45% 0.16 250);
  --color-warn:         oklch(87% 0.115 92);
  --color-warn-ink:     oklch(33% 0.075 72);

  --font-display: "Instrument Sans", -apple-system, "Helvetica Neue", sans-serif;
  --font-body:    "Instrument Sans", -apple-system, "Helvetica Neue", sans-serif;
  --font-mono:    Menlo, "SF Mono", Consolas, monospace;

  --space-2xs: 4px;  --space-xs: 8px;   --space-sm: 12px;
  --space-md:  20px; --space-lg: 32px;  --space-xl: 52px;
  --space-2xl: 84px;

  --text-xs: 0.75rem;  --text-sm: 0.875rem; --text-base: 1.0625rem;
  --text-lg: 1.25rem;  --text-xl: 1.5rem;   --text-2xl: 2rem;  --text-3xl: 2.75rem;

  --rule-hair: 1px;
  --radius-sm: 2px;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast: 130ms;
}

*, *::before, *::after { box-sizing: border-box; }
html, body { overflow-x: clip; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--color-paper); color: var(--color-ink);
  font-family: var(--font-body); font-size: var(--text-base); line-height: 1.65;
  font-style: normal;
}

h1, h2, h3 {
  font-family: var(--font-display); font-style: normal; font-weight: 400;
  line-height: 1.12; letter-spacing: -0.015em;
  overflow-wrap: anywhere; min-width: 0; margin: 0;
}
h1 { font-size: var(--text-3xl); }
h2 { font-size: var(--text-xl); margin: var(--space-xl) 0 var(--space-sm); }
h3 { font-size: var(--text-lg); margin: var(--space-lg) 0 var(--space-xs); }
p, li { max-width: 68ch; }
p { margin: 0 0 var(--space-md); }
ul { padding-left: 20px; margin: 0 0 var(--space-md); }
li { margin-bottom: var(--space-xs); }
a { color: var(--color-accent); }
:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 3px; border-radius: var(--radius-sm); }

.wrap { max-width: 860px; margin: 0 auto; padding: 0 var(--space-md); }
@media (min-width: 861px) { .wrap { padding: 0 var(--space-xl); } }

.muster {
  background: var(--color-warn); color: var(--color-warn-ink);
  font-size: var(--text-sm); padding: var(--space-sm) var(--space-md);
  text-align: center; font-weight: 600;
}
mark.ph { background: var(--color-warn); color: var(--color-warn-ink); padding: 0 3px; border-radius: var(--radius-sm); font-weight: 600; }

/* Marker aus (Standard, Sven 03.09.2026). Der Text bleibt stehen und liest sich normal,
   nur die gelbe Auszeichnung und die Kaesten "Fuer uns, nicht fuer die Seite"
   verschwinden. Bewusst ueber CSS und nicht ueber Jinja: die Markierung liegt in den
   Rechtsseiten teils um ECHTEN Inhalt (Hetzner Anschrift, Speicherfristen). Wer sie im
   HTML entfernt, entfernt dort den Text mit. So bleibt sie im Quelltext, und
   hochladen.sh findet die offenen Stellen weiterhin und fragt nach. */
.marker-aus mark.ph { background: none; color: inherit; padding: 0; font-weight: inherit; }
.marker-aus .hinweis { display: none; }

.kopfleiste {
  border-bottom: var(--rule-hair) solid var(--color-rule);
  padding: var(--space-sm) 0;
}
.kopfleiste__row { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-md); }
/* Wortmarke wie auf der Startseite: nachgezeichnetes Zeichen plus Schriftzug.
   Einfarbig über currentColor, die Blattader ist ein Loch im Blatt. */
.marke { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: var(--color-marke); }
.marke__zeichen { width: auto; height: 28px; fill: currentColor; flex: none; }
.marke__wort { font-family: var(--font-display); font-size: var(--text-xl); letter-spacing: -0.02em; white-space: nowrap; }
.zurueck { font-size: var(--text-sm); text-decoration: none; white-space: nowrap; border-bottom: var(--rule-hair) solid var(--color-rule); }
.zurueck:hover { border-bottom-color: var(--color-accent); }

main { padding: var(--space-xl) 0 var(--space-2xl); }
.stand { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--color-ink-3); letter-spacing: 0.02em; margin-top: var(--space-sm); }

/* Angabenblock: Bezeichnung und Wert nebeneinander, damit es nach Register aussieht */
.angaben { border-top: var(--rule-hair) solid var(--color-rule); margin: var(--space-md) 0 var(--space-lg); }
.angaben > div {
  display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-2xs);
  padding: var(--space-sm) 0; border-bottom: var(--rule-hair) solid var(--color-rule);
}
@media (min-width: 640px) {
  .angaben > div { grid-template-columns: minmax(0, 220px) minmax(0, 1fr); gap: var(--space-md); align-items: baseline; }
}
.angaben dt { font-family: var(--font-mono); font-size: var(--text-xs); text-transform: uppercase; letter-spacing: 0.05em; color: var(--color-ink-3); }
.angaben dd { margin: 0; font-size: var(--text-sm); }

/* Hinweiskasten für uns, nicht für den Endkunden */
.hinweis {
  background: var(--color-accent-wash);
  border-left: 3px solid var(--color-accent);
  padding: var(--space-md);
  margin: var(--space-lg) 0;
  font-size: var(--text-sm);
}
.hinweis strong { display: block; margin-bottom: var(--space-2xs); font-family: var(--font-mono); font-size: var(--text-xs); text-transform: uppercase; letter-spacing: 0.05em; color: var(--color-accent); }
.hinweis p:last-child { margin-bottom: 0; }

.fuss { border-top: 2px solid var(--color-ink); padding: var(--space-lg) 0 var(--space-xl); }
.fuss__zeile { display: flex; flex-wrap: wrap; gap: var(--space-md); font-size: var(--text-sm); color: var(--color-ink-2); }
.fuss__zeile a { text-decoration: none; border-bottom: var(--rule-hair) solid var(--color-rule); color: inherit; }
.fuss__zeile a:hover { border-bottom-color: var(--color-accent); color: var(--color-accent); }

@media (prefers-reduced-motion: reduce) { * { animation-duration: 0.01ms !important; transition-duration: 120ms !important; } }