/* ============================================================
   SteelPhraze — gemeinsames Stylesheet für Impressum, Datenschutz,
   Kontakt. Teilt Variablen/Typografie/Header/Footer mit index.html,
   ohne dessen Demo-spezifisches CSS zu duplizieren.
   ============================================================ */
@font-face {
  font-family: "D-DIN Condensed";
  src: url("fonts/D-DINCondensed.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "D-DIN Condensed";
  src: url("fonts/D-DINCondensed-Bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Barlow";
  src: url("fonts/Barlow-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Barlow";
  src: url("fonts/Barlow-Medium.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Barlow";
  src: url("fonts/Barlow-SemiBold.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "IBM Plex Mono";
  src: url("fonts/IBMPlexMono-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "IBM Plex Mono";
  src: url("fonts/IBMPlexMono-Medium.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
:root {
  --steel-bg: #EDEFF1;
  --steel-panel: #F7F8F9;
  --steel-line: #C9CED3;
  --graphite: #1B1F23;
  --graphite-soft: #4A5158;
  --etch-red: #C0392B;
  --etch-blue: #2E5D8C;
  --btc: #E8820C;
  --radius: 3px;
  --maxw: 1120px;
  --font-display: "D-DIN Condensed", "Arial Narrow", sans-serif;
  --font-body: "Barlow", "Segoe UI", sans-serif;
  --font-mono: "IBM Plex Mono", "Consolas", monospace;
}
* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}
body {
  font-family: var(--font-body);
  color: var(--graphite);
  background: var(--steel-bg);
  background-image: repeating-linear-gradient(
    90deg,
    rgba(255,255,255,0.35) 0px, rgba(255,255,255,0.35) 1px,
    transparent 1px, transparent 3px
  );
  line-height: 1.6;
  font-size: 17px;
}
a { color: inherit; }
:focus-visible { outline: 2px solid var(--etch-blue); outline-offset: 3px; }
.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 24px; }
@media (max-width: 720px) { .wrap { padding: 0 32px; } }

/* ---------- Header ---------- */
header {
  border-bottom: 1px solid var(--steel-line);
  background: rgba(247,248,249,0.92);
  backdrop-filter: blur(6px);
  position: sticky; top: 0; z-index: 20;
}
.header-inner {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap;
  /* nur vertikal padden: der seitliche Abstand kommt aus .wrap,
     sonst wuerde die Shorthand-0 den Rand des Logos auf 0 setzen */
  padding-top: 11px; padding-bottom: 11px;
}
.wordmark {
  display: flex; align-items: center; gap: 12px;
  text-decoration: none;
  color: var(--graphite);
}
.wordmark-icon { width: 38px; height: auto; flex-shrink: 0; }
.wordmark-text {
  display: flex; flex-direction: column;
  line-height: 1.15;
}
.wordmark-text strong {
  font-family: var(--font-body);
  font-weight: 800;
  font-size: 27.5px;
  color: var(--graphite);
}
.wordmark-text small {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 14.5px;
  color: var(--graphite);
}
nav a {
  text-decoration: none;
  font-size: 17px;
  font-weight: 500;
  color: var(--graphite-soft);
  margin-left: 22px;
}
nav a:hover { color: var(--graphite); }
@media (max-width: 720px) {
  nav {
    width: 100%;
    display: flex; flex-wrap: wrap;
    margin-top: 10px;
  }
  nav a { margin-left: 0; margin-right: 18px; }
}

/* ---------- Rechtstext-Sektionen ---------- */
.legal-hero { padding: 56px 0 8px; }
.eyebrow {
  font-family: var(--font-mono);
  font-size: 12.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--graphite-soft);
  display: inline-flex; align-items: center; gap: 10px;
  margin-bottom: 20px;
}
.eyebrow::before {
  content: ""; width: 28px; height: 1px; background: var(--etch-red);
}
h1 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(32px, 4.4vw, 46px);
  line-height: 1.08;
  text-transform: uppercase;
  margin-bottom: 8px;
}
section.legal { padding: 32px 0 84px; }
section.legal .wrap { max-width: 78ch; }
section.legal h2 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 22px;
  text-transform: uppercase;
  margin: 40px 0 12px;
}
section.legal h2:first-child { margin-top: 0; }
section.legal h3 {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 16.5px;
  margin: 22px 0 8px;
}
section.legal p { color: var(--graphite-soft); margin-bottom: 12px; }
section.legal ul { color: var(--graphite-soft); margin: 0 0 12px 20px; }
section.legal li { margin-bottom: 4px; }
section.legal a.inline { color: var(--etch-blue); text-decoration: underline; }
section.legal .updated {
  font-family: var(--font-mono);
  font-size: 12.5px;
  color: var(--graphite-soft);
  margin-bottom: 32px;
  display: block;
}
.legal-box {
  background: var(--steel-panel);
  border: 1px solid var(--steel-line);
  border-radius: var(--radius);
  padding: 20px 24px;
  margin-bottom: 12px;
}
.legal-box p:last-child { margin-bottom: 0; }
.legal-box .label {
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--graphite-soft);
  display: block;
  margin-bottom: 4px;
}
.legal-box strong { color: var(--graphite); }

/* ---------- Footer ---------- */
footer {
  border-top: 1px solid var(--steel-line);
  padding: 40px 0 48px;
  font-size: 14px;
  color: var(--graphite-soft);
}
.footer-inner { display: flex; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
footer a { color: var(--graphite-soft); text-decoration: none; margin-right: 20px; }
footer a:hover { color: var(--graphite); }