/* 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(98.8% 0.006 95);
  --color-paper-2:      oklch(94.2% 0.020 145);
  --color-paper-3:      oklch(89.8% 0.026 145);
  --color-ink:          oklch(24.5% 0.026 145);
  --color-ink-2:        oklch(44.0% 0.022 145);
  --color-ink-3:        oklch(55.0% 0.018 145);
  --color-accent:       oklch(45.0% 0.077 145);
  --color-marke:        oklch(52.0% 0.085 145);
  --color-accent-wash:  oklch(93.5% 0.030 145);
  --color-rule:         oklch(85.5% 0.016 145);
  --color-focus:      oklch(45% 0.16 250);
  --color-warn:         oklch(87% 0.115 92);
  --color-warn-ink:     oklch(33% 0.075 72);

  --font-display: "Iowan Old Style", Charter, Georgia, "Times New Roman", serif;
  --font-body:    "Avenir Next", "Avenir", "Segoe UI", system-ui, 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; } }