/* Shared styling for the legal pages (Impressum, Datenschutzerklärung).
 *
 * These are documents, not marketing pages, so the layout is a single
 * readable column rather than the landing page's sections. The tokens,
 * typography and language mechanics are the landing page's, so following a
 * footer link does not feel like leaving the site.
 *
 * Self-hosted fonts: loading them from Google would send every visitor's IP
 * to a US server before they consent to anything -- the single most
 * frequently abgemahnt issue on German sites (LG München I, 3 O 17493/20).
 * One family, Inter, at its natural width, matching index.html. */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(/fonts/Inter-var-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(/fonts/Inter-var-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root{
  --paper:#FFFFFF;
  --paper-2:#F7F9FA;
  --ink:#0B1215;
  --ink-2:#4E5C65;
  --ink-3:#5E6B75;
  --line:#E4E9EC;
  --accent:#0B5FCE;
  --radius:14px;
  --max:760px;
  --ease:cubic-bezier(0.22, 1, 0.36, 1);
}

/* Follows the device, exactly like index.html, and with the same reasoning:
   a warmer, lighter dark than the light theme's ink, and borders instead of
   shadows. */
@media (prefers-color-scheme: dark){
  :root{
    --paper:#0F161A;
    --paper-2:#141C21;
    --ink:#EDF2F5;
    --ink-2:#AFBCC4;
    --ink-3:#84949E;
    --line:#243038;
    --accent:#6BA6FF;
  }
}

*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth; -webkit-text-size-adjust:100%;}
body{
  background:var(--paper);
  color:var(--ink);
  font-family:'Inter',system-ui,sans-serif;
  -webkit-font-smoothing:antialiased;
  font-size:1rem;
  line-height:1.7;
}
h1,h2,h3{
  font-family:'Inter',sans-serif;
  font-weight:700;
  letter-spacing:-0.022em;
  color:var(--ink);
  text-wrap:balance;
}
a{color:inherit;}
:focus-visible{outline:2px solid var(--accent); outline-offset:3px; border-radius:4px;}

.wrap{max-width:var(--max); margin:0 auto; padding:0 clamp(20px,5vw,28px);}

/* Language visibility — identical mechanics to index.html, so an element
   marked [lang-de] behaves the same on every page of the site. */
[lang-en],[lang-de]{display:none;}
.lang-en-active [lang-en]{display:revert;}
.lang-de-active [lang-de]{display:revert;}
.lang-en-active span[lang-en],.lang-en-active em[lang-en],.lang-en-active strong[lang-en]{display:inline;}
.lang-de-active span[lang-de],.lang-de-active em[lang-de],.lang-de-active strong[lang-de]{display:inline;}

.skip-link{
  position:absolute; left:16px; top:-64px; z-index:100;
  background:var(--ink); color:var(--paper); padding:12px 18px;
  border-radius:999px; font-size:0.9rem; font-weight:600; text-decoration:none;
  transition:top .18s var(--ease);
}
.skip-link:focus-visible{top:12px;}

/* The header is sticky, so an anchor jump would park the heading under it.
   Scoped to the things anchors actually point at -- `[id]` on its own would
   put a scroll margin on every element that happens to carry an id. */
main[id], h1[id], h2[id], h3[id], section[id]{scroll-margin-top:88px;}

/* ---------- header ---------- */
header{
  border-bottom:1px solid var(--line);
  background:var(--paper);
  position:sticky; top:0; z-index:10;
}
header .wrap{
  display:flex; align-items:center; justify-content:space-between;
  gap:16px; min-height:72px; flex-wrap:wrap;
}
.logo{
  font-family:'Inter',sans-serif; font-weight:700; font-size:1.18rem;
  letter-spacing:-0.03em; color:var(--ink);
  display:flex; align-items:baseline; gap:6px; text-decoration:none;
  /* Standalone navigation link, so it owes a full 44px target. The inline
     links inside the prose below are exempt under WCAG 2.5.8. */
  min-height:44px; align-items:center;
}
.logo span{font-weight:500; color:var(--ink-3);}

.lang-toggle{
  display:flex; align-items:center; gap:2px;
  border:1px solid var(--line); border-radius:999px; padding:2px;
}
.lang-toggle a{
  display:inline-flex; align-items:center; min-height:40px; padding:0 14px;
  font-size:0.79rem; font-weight:600; letter-spacing:0.02em;
  color:var(--ink-3); text-decoration:none; border-radius:999px;
  transition:background .18s var(--ease), color .18s var(--ease);
}
.lang-toggle a:hover{background:var(--ink); color:var(--paper);}

/* ---------- document body ---------- */
main{padding:clamp(40px,6vw,72px) 0 clamp(64px,8vw,104px);}
.label{
  font-size:0.79rem; letter-spacing:0.02em; text-transform:none;
  color:var(--ink-3); font-weight:600;
}
h1{font-size:clamp(1.9rem,1.3rem + 2.2vw,2.7rem); line-height:1.1; margin:12px 0 8px;}
.updated{font-size:0.82rem; color:var(--ink-3); margin-bottom:clamp(32px,4vw,52px);}
h2{font-size:1.24rem; margin:44px 0 12px; line-height:1.3;}
h3{font-size:1rem; margin:26px 0 8px; font-weight:650;}
p{margin-bottom:14px; max-width:68ch; color:var(--ink-2);}
p strong{color:var(--ink); font-weight:650;}
ul{margin:0 0 16px 0; padding-left:0; list-style:none;}
li{margin-bottom:9px; padding-left:18px; position:relative; color:var(--ink-2); max-width:68ch;}
li::before{
  content:''; position:absolute; left:0; top:0.72em;
  width:6px; height:1.5px; background:var(--accent); border-radius:1px;
}

/* A block of facts — an address, a controller. Set apart from the prose
   because it is the part people actually came to copy down. */
.card{
  background:var(--paper-2);
  border:1px solid var(--line);
  border-left:3px solid var(--accent);
  border-radius:var(--radius);
  padding:22px 24px;
  margin:20px 0 28px;
}
.card p{margin-bottom:4px; color:var(--ink);}
.card p:last-child{margin-bottom:0;}
.card a{color:var(--accent);}

.note{
  font-size:0.9rem; color:var(--ink-3);
  border-top:1px solid var(--line); padding-top:14px; margin-top:10px;
}

/* ---------- footer ---------- */
footer{border-top:1px solid var(--line); padding:30px 0 46px;}
.foot-links{display:flex; flex-wrap:wrap; gap:4px 22px; margin-bottom:10px;}
/* Same specificity trap as index.html's .foot-legal: `.foot-links a` is
   0,1,1 and would beat `[lang-en]{display:none}` at 0,1,0, printing both
   languages at once. Only the language-scoped rules set `display`.
   The build strips every lang- attribute, so set it on the base selector. */
.foot-links a, .foot-links .foot-lang a{
  display:inline-flex; align-items:center; min-height:44px;
  font-size:0.9rem; color:var(--ink-2); text-decoration:none;
  transition:color .18s var(--ease);
}
.foot-links .foot-lang a{text-decoration:underline; text-underline-offset:3px;}
.foot-links a:hover{color:var(--ink);}
.foot-bottom{font-size:0.82rem; color:var(--ink-3);}

@media (max-width:560px){
  .card{padding:18px;}
}
@media (prefers-reduced-motion: reduce){
  *{transition:none !important; scroll-behavior:auto !important;}
}