/* Gemeinsames Stylesheet für impressum.html und datenschutz.html.
   index.html bleibt bewusst self-contained (eine Datei, ein Request), verwendet
   aber dieselben Werte – wird dort etwas an der Palette geändert, gehört es
   hier mitgeändert. Grundlage ist der Dunkelmodus der Ankaufsseite
   (ankauf/src/app/globals.css, Block `.dark`). */
@font-face { font-family: 'Geist'; font-style: normal; font-weight: 100 900; font-display: swap; src: url('fonts/geist-100-900.woff2') format('woff2'); }
@font-face { font-family: 'Bebas Neue'; font-style: normal; font-weight: 400; font-display: swap; src: url('fonts/bebas-neue-400.woff2') format('woff2'); }
@font-face { font-family: 'JetBrains Mono'; font-style: normal; font-weight: 400 500; font-display: swap; src: url('fonts/jetbrains-mono-400-500.woff2') format('woff2'); }

:root {
  --background: oklch(0.1834 0.0068 78.14);        /* #14120f */
  --foreground: oklch(0.9475 0.0131 82.4);         /* #f2ede4 */
  --card:       oklch(0.2186 0.0082 84.59);        /* #1c1a16 */
  --surface:    oklch(0.2565 0.0095 84.5);

  --brand:            oklch(0.6172 0.1922 32.69);  /* #e14a2e */
  --signal:           oklch(0.8464 0.1568 92.86);  /* #f0c93a */
  --signal-foreground:oklch(0.1547 0.0045 84.57);
  --muted-foreground: oklch(0.6712 0.0156 84.59);  /* #9a958b – AA auf dunkel */

  --border: oklch(1 0 0 / 12%);
  --ring:   oklch(0.6172 0.1922 32.69);

  --radius: 0.5rem;
  --r-sm: calc(var(--radius) * 0.6);
  --r-lg: var(--radius);
  --r-xl: calc(var(--radius) * 1.4);

  --sans:    'Geist', system-ui, -apple-system, sans-serif;
  --display: 'Bebas Neue', sans-serif;
  --mono:    'JetBrains Mono', ui-monospace, monospace;

  --shell: 48rem;
  --gutter: 1.5rem;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { overflow-x: hidden; -webkit-text-size-adjust: 100%; }
body {
  background: var(--background); color: var(--foreground);
  font-family: var(--sans); font-size: 1rem; line-height: 1.6;
  overflow-x: hidden; -webkit-font-smoothing: antialiased;
}
::selection { background: var(--signal); color: var(--signal-foreground); }

.field-label { font-family: var(--mono); font-size: 0.625rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted-foreground); }
.gradient-text {
  background-image: linear-gradient(160deg, var(--brand), color-mix(in oklch, var(--signal) 42%, var(--brand)));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

.skip-link { position: fixed; top: 0.75rem; left: 0.75rem; z-index: 300; background: var(--signal); color: var(--signal-foreground); font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.12em; text-transform: uppercase; padding: 0.75rem 1.25rem; border-radius: var(--r-lg); text-decoration: none; transform: translateY(-250%); }
.skip-link:focus { transform: none; }
a:focus-visible, button:focus-visible { outline: 2px solid var(--ring); outline-offset: 3px; border-radius: var(--r-sm); }

/* Kopfzeile – dieselben Maße wie auf der Startseite */
.legal-nav {
  position: sticky; top: 0; z-index: 200;
  border-bottom: 1px solid color-mix(in oklch, var(--border) 70%, transparent);
  background: color-mix(in oklch, var(--background) 85%, transparent);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  display: flex; justify-content: space-between; align-items: center; gap: 1rem;
  height: 4rem; padding: 0 var(--gutter);
}
.nav-logo { display: flex; align-items: center; gap: 0.625rem; color: var(--foreground); text-decoration: none; min-width: 0; }
.nav-logo img { width: 32px; height: 32px; object-fit: contain; border-radius: 50%; flex-shrink: 0; transition: box-shadow 0.25s; }
.nav-logo:hover img { box-shadow: 0 0 0 4px color-mix(in oklch, var(--brand) 25%, transparent); }
/* Der Text steht in einem eigenen Element, sonst zieht der Flex-gap „rotbart“
   und „.IT“ auseinander. */
.nav-logo span { font-family: var(--display); font-size: 1.25rem; letter-spacing: 0.02em; }
.nav-logo em { color: var(--brand); font-style: normal; }
.legal-nav .back {
  display: inline-flex; align-items: center; gap: 0.4rem;
  font-size: 0.875rem; font-weight: 500; color: var(--muted-foreground); text-decoration: none;
  padding: 0.5rem 0.7rem; border-radius: var(--r-lg);
  transition: background-color 0.2s, color 0.2s;
}
.legal-nav .back:hover { background: color-mix(in oklch, var(--foreground) 8%, transparent); color: var(--foreground); }

/* Fließtext */
.legal-main { max-width: var(--shell); margin: 0 auto; padding: 4rem var(--gutter) 6rem; }
.legal-tag { display: flex; align-items: center; gap: 0.625rem; font-family: var(--mono); font-size: 0.625rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted-foreground); }
.legal-tag::before { content: ''; display: block; width: 1.5rem; height: 1px; background: linear-gradient(to right, var(--brand), transparent); }
.legal-main h1 { font-family: var(--display); font-weight: 400; letter-spacing: 0.02em; line-height: 0.92; font-size: clamp(2.6rem, 8vw, 4rem); margin: 0.75rem 0 2.5rem; }
.legal-main h2 { font-family: var(--display); font-weight: 400; letter-spacing: 0.02em; line-height: 1; font-size: 1.6rem; margin: 2.75rem 0 0.85rem; }
.legal-main p, .legal-main li { font-size: 0.95rem; line-height: 1.8; color: var(--muted-foreground); margin-bottom: 0.85rem; }
.legal-main ul { padding-left: 1.25rem; }
.legal-main li::marker { color: var(--brand); }
.legal-main strong { color: var(--foreground); font-weight: 500; }
.legal-main a { color: var(--brand); text-underline-offset: 4px; }
/* Anschrift und Kontaktdaten als abgesetzte Karte – wie die Asset-Tag-Karte
   auf der Startseite, nur ruhiger. */
.legal-main address {
  font-style: normal; font-family: var(--mono); font-size: 0.85rem; line-height: 1.9;
  color: var(--foreground);
  border-radius: var(--r-xl); border: 1px solid var(--border);
  border-left: 3px solid var(--signal);
  background: color-mix(in oklch, var(--surface) 60%, transparent);
  padding: 1.15rem 1.4rem; margin-bottom: 0.85rem;
}
.legal-updated { font-family: var(--mono); font-size: 0.65rem; letter-spacing: 0.1em; color: var(--muted-foreground); margin-top: 3.5rem; padding-top: 1.25rem; border-top: 1px solid var(--border); }

/* Fußzeile */
.legal-footer {
  border-top: 1px solid color-mix(in oklch, var(--border) 70%, transparent);
  background: color-mix(in oklch, var(--surface) 50%, transparent);
  padding: 1.75rem var(--gutter);
  display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap;
}
.legal-footer p { font-family: var(--mono); font-size: 0.625rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted-foreground); }
.legal-footer ul { list-style: none; display: flex; gap: 1.25rem; }
.legal-footer a { font-size: 0.875rem; color: var(--foreground); text-decoration: none; }
.legal-footer a:hover { color: var(--brand); }

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

@media (max-width: 900px) {
  :root { --gutter: 1.25rem; }
  .legal-main { padding: 3rem var(--gutter) 4rem; }
}

@media print {
  .legal-nav, .legal-footer, .skip-link { display: none; }
  body { background: #fff; color: #000; }
  .legal-main p, .legal-main li, .legal-main address { color: #000; }
  .legal-main address { background: #fff; border-color: #ccc; }
  a::after { content: ' (' attr(href) ')'; font-size: 9pt; }
}