/* ===== Design tokens + fonts + logo component — shared by index.html, impressum.html, datenschutz.html ===== */

:root{
  --bg: #E8E2D6;
  --bg-alt: #DED4C1;
  --surface: #F4F0E6;
  --surface-dark: #2B2621;
  --ink: #332E28;
  --ink-soft: #6E6255;
  --ink-on-dark: #F4F0E6;
  --ink-on-dark-soft: #C9BFAF;
  --teal: #2F8F76;
  --teal-deep: #1F6B57;
  --rust: #C4622D;
  --rust-deep: #9C4B22;
  --line: rgba(51,46,40,0.14);
  --line-on-dark: rgba(244,240,230,0.16);
  --radius: 2px;
  --max: 1180px;
  --display: 'Space Grotesk', sans-serif;
  --body: 'Inter', sans-serif;
}

@font-face{
  font-family: 'Space Grotesk';
  src: url('fonts/space-grotesk-latin-400-normal.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face{
  font-family: 'Space Grotesk';
  src: url('fonts/space-grotesk-latin-500-normal.woff2') format('woff2');
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face{
  font-family: 'Space Grotesk';
  src: url('fonts/space-grotesk-latin-600-normal.woff2') format('woff2');
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face{
  font-family: 'Space Grotesk';
  src: url('fonts/space-grotesk-latin-700-normal.woff2') format('woff2');
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face{
  font-family: 'Inter';
  src: url('fonts/inter-latin-400-normal.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face{
  font-family: 'Inter';
  src: url('fonts/inter-latin-500-normal.woff2') format('woff2');
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face{
  font-family: 'Inter';
  src: url('fonts/inter-latin-600-normal.woff2') format('woff2');
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face{
  font-family: 'Inter';
  src: url('fonts/inter-latin-700-normal.woff2') format('woff2');
  font-weight: 700; font-style: normal; font-display: swap;
}

/* Logo lockup: a single <picture> swaps the actual image requested per
   breakpoint (see markup), this just sizes whichever one was fetched —
   used on the homepage header and on the legal pages. */
.logo-mark{
  height: 46px;
  width: auto;
  display: block;
}
@media (max-width: 1060px){
  .logo-mark{ height: 34px; }
}