/* Gemeinsames Stylesheet für Impressum und Datenschutzerklärung.
   Bewusst eine eigene Datei statt Inline-CSS wie in index.html: Zwei Seiten
   teilen sich dieselben Regeln, und die Startseite bleibt unangetastet.
   Nur die vier Schnitte, die diese Seiten tatsächlich brauchen. */

@font-face {
  font-family: 'Zilla Slab';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/fonts/zilla-slab-600.woff2') format('woff2');
}
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/ibm-plex-sans-400.woff2') format('woff2');
}
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/fonts/ibm-plex-sans-600.woff2') format('woff2');
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/ibm-plex-mono-400.woff2') format('woff2');
}

:root {
  --paper:      #FBFBF8;
  --paper-alt:  #F3F5EF;
  --rule:       #E0E4DA;
  --rule-firm:  #C3C9BA;
  --ink:        #1C201B;
  --ink-soft:   #5C6358;
  --ink-faint:  #878D80;
  --accent:     #1F4B99;
  --accent-bg:  #E8EEF8;
  --stamp:      #B3352C;

  --measure: 68ch;
  --step--1: clamp(0.82rem, 0.79rem + 0.14vw, 0.9rem);
  --step-0:  clamp(1rem, 0.96rem + 0.2vw, 1.08rem);
  --step-1:  clamp(1.15rem, 1.08rem + 0.35vw, 1.35rem);
  --step-2:  clamp(1.4rem, 1.25rem + 0.7vw, 1.9rem);
  --step-3:  clamp(1.9rem, 1.6rem + 1.4vw, 2.8rem);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper:      #141713;
    --paper-alt:  #1C201B;
    --rule:       #2C312A;
    --rule-firm:  #454C41;
    --ink:        #E9ECE4;
    --ink-soft:   #A5AC9D;
    --ink-faint:  #7C8376;
    --accent:     #86AAEC;
    --accent-bg:  #1B2436;
    --stamp:      #E07C6C;
  }
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: "IBM Plex Sans", ui-sans-serif, system-ui, sans-serif;
  font-size: var(--step-0);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  /* Lange Woerter umbrechen statt die Seite zu sprengen -- hier stehen
     Firmierungen und Paragraphenketten, die kein Leerzeichen enthalten. */
  overflow-wrap: break-word;
}

.wrap { width: min(100% - 2.5rem, 52rem); margin-inline: auto; }

/* anywhere statt break-word: Adressen wie resend.com/legal/subprocessors
   haben keine Trennstelle, an der ein Umbruch erlaubt waere. */
a {
  color: var(--accent);
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
  overflow-wrap: anywhere;
}

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

h1, h2, h3 {
  font-family: "Zilla Slab", Georgia, serif;
  font-weight: 600;
  margin: 0;
  line-height: 1.2;
  text-wrap: balance;
}

h1 { font-size: var(--step-3); letter-spacing: -0.015em; }
h2 { font-size: var(--step-2); letter-spacing: -0.01em; }
h3 { font-size: var(--step-1); }

p, ul, ol, dl { margin: 0; max-width: var(--measure); }

.label {
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: var(--step--1);
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

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

.masthead {
  border-bottom: 1px solid var(--rule-firm);
  padding-block: 1.1rem;
}

.masthead .wrap { display: flex; flex-wrap: wrap; gap: 0.4rem 1.5rem; align-items: baseline; }

.wordmark {
  font-family: "Zilla Slab", Georgia, serif;
  font-size: var(--step-1);
  font-weight: 600;
  color: var(--ink);
  text-decoration: none;
}

main { padding-block: clamp(2.5rem, 6vw, 4rem) 4rem; }

main .wrap { display: flex; flex-direction: column; gap: 2.75rem; }

.seitenkopf { display: flex; flex-direction: column; gap: 0.8rem; }

.seitenkopf p { color: var(--ink-soft); }

section { display: flex; flex-direction: column; gap: 0.9rem; }

section > h2 { padding-top: 1.4rem; border-top: 1px solid var(--rule); }

ul, ol { padding-left: 1.3rem; display: flex; flex-direction: column; gap: 0.4rem; }

li::marker { color: var(--ink-faint); }

strong { font-weight: 600; }

/* ---------- Angaben als Definitionsliste ---------- */

.angaben {
  display: grid;
  /* min(9rem, 35%) statt 9rem: Auf schmalen Schirmen darf die Beschriftungs-
     spalte mitschrumpfen, sonst quetscht sie den Wert hinaus. */
  grid-template-columns: minmax(min(9rem, 35%), auto) 1fr;
  gap: 0.55rem 1.5rem;
  padding: 1.2rem 1.4rem;
  background: var(--paper-alt);
  border: 1px solid var(--rule);
  max-width: var(--measure);
}

.angaben dt {
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: var(--step--1);
  color: var(--ink-faint);
  padding-top: 0.15em;
}

.angaben dd { margin: 0; }

/* ---------- Hinweiskasten ---------- */

.hinweis {
  border-left: 3px solid var(--stamp);
  padding: 0.15rem 0 0.15rem 1.1rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  max-width: var(--measure);
}

.hinweis .label { color: var(--stamp); }

.hinweis p { font-size: var(--step--1); color: var(--ink-soft); }

/* ---------- Tabelle ---------- */

.tabelle-rahmen { overflow-x: auto; max-width: 100%; }

table {
  border-collapse: collapse;
  font-size: var(--step--1);
  min-width: 34rem;
}

th, td {
  text-align: left;
  vertical-align: top;
  padding: 0.55rem 1.2rem 0.55rem 0;
  border-bottom: 1px solid var(--rule);
}

th {
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-weight: 400;
  letter-spacing: 0.04em;
  color: var(--ink-faint);
  border-bottom-color: var(--rule-firm);
}

/* ---------- Fuß ---------- */

footer {
  border-top: 1px solid var(--rule-firm);
  padding-block: 2rem 3rem;
  font-size: var(--step--1);
  color: var(--ink-faint);
}

footer .wrap { display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem; }

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}