/* Impressum und Datenschutz: Kopf und Fuß wie auf der Landingpage (Werte aus index.html), der Text kommt von Dieter */
@font-face { font-family: "IBM Plex Sans"; src: url(fonts/ibm-plex-sans-latin-400-normal.woff2) format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "IBM Plex Sans"; src: url(fonts/ibm-plex-sans-latin-600-normal.woff2) format("woff2"); font-weight: 600; font-display: swap; }

:root {
  --color-paper: oklch(97.4% 0.03 125);
  --color-surface: oklch(99.2% 0.008 125);
  --color-rule: oklch(90% 0.03 130);
  --color-ink: oklch(22% 0.025 150);
  --color-ink-soft: oklch(38% 0.025 150);
  --color-focus: oklch(48% 0.16 255);
  --font-body: "IBM Plex Sans", system-ui, sans-serif;
  --space-xs: 8px; --space-sm: 12px; --space-md: 16px; --space-lg: 24px; --space-xl: 40px;
  --text-sm: 0.9375rem; --text-base: 1.0625rem;
  --radius-sm: 10px;
}

*, *::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.55;
}
img { display: block; max-width: 100%; height: auto; }

.top {
  display: flex; justify-content: center; align-items: center;
  min-height: 56px;
  padding-block: var(--space-xs);
  padding-left: max(var(--space-md), env(safe-area-inset-left, 0px));
  padding-right: max(var(--space-md), env(safe-area-inset-right, 0px));
  background: var(--color-paper);
  box-shadow: 0 1px 0 var(--color-rule);
}
.logo { display: inline-flex; align-items: center; gap: var(--space-xs); text-decoration: none; border-radius: var(--radius-sm); }
.logo__icon { width: 32px; height: 32px; }
.logo__word { width: 140px; height: auto; }
.logo:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 3px; }

.legal { padding-block: var(--space-lg) var(--space-xl); min-height: 60vh; }
.legal .contractDetails { font-family: var(--font-body); }

.foot { display: grid; justify-items: center; gap: var(--space-sm); padding: var(--space-xl) max(var(--space-md), env(safe-area-inset-right, 0px)) calc(var(--space-xl) + env(safe-area-inset-bottom, 0px)) max(var(--space-md), env(safe-area-inset-left, 0px)); box-shadow: 0 -1px 0 var(--color-rule); text-align: center; }
.foot__links { margin: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 0 var(--space-lg); font-size: var(--text-sm); }
.foot__links a { color: var(--color-ink-soft); text-decoration: underline; text-underline-offset: 3px; padding: var(--space-xs) 0; }
.foot__links a:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 2px; border-radius: 4px; }