/* The legal pages - one stylesheet, copied verbatim into every surface.
 *
 * Deliberately SELF-CONTAINED rather than leaning on site.css / qr.css /
 * epk.css: the Impressum and the Datenschutzerklaerung are the same document
 * wherever they are served, so they must look the same on all three
 * subdomains, and a legal page must never break because a page-specific
 * stylesheet was refactored. The tokens are lifted verbatim from
 * web/site/assets/css/site.css so it still reads as ours.
 *
 * Generated: do not edit a copy under a site's assets/css/ - edit
 * legal/legal.css and run `node legal/build.mjs`.
 */
:root{
  color-scheme: dark;
  --ink:#05090a;
  --ink-2:#0a1214;
  --fog:#8fa3a4;
  --fog-dim:#5d6f70;
  --paper:#dfe8e5;
  --teal:#0ea87b;
  --teal-lit:#3fdcaa;
  --amber:#ffd9a0;
  --line:rgba(143,163,164,.18);
  --mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, "Roboto Mono", monospace;
  --serif: Georgia, "Iowan Old Style", "Times New Roman", serif;
  --sans: -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
  --gutter: clamp(22px, 6vw, 48px);
}
*{box-sizing:border-box}
body{
  margin:0;background:var(--ink);color:var(--paper);
  font-family:var(--serif);-webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
a{color:inherit}
:focus-visible{outline:2px solid var(--teal);outline-offset:3px}

main{width:100%;max-width:760px;margin:0 auto;padding:clamp(26px,5vh,56px) var(--gutter) 120px}

.tele{
  font-family:var(--mono);font-size:10.5px;letter-spacing:.22em;
  text-transform:uppercase;color:var(--fog-dim);margin:0;font-weight:400;
}
.tele-teal{color:var(--teal-lit)}

/* --- masthead: back to the surface this page belongs to, plus the language
       toggle. The wordmark is text, not an image, so a legal page pulls in no
       asset at all and works on every surface without copying files. --- */
.top{
  display:flex;align-items:baseline;justify-content:space-between;gap:16px;
  flex-wrap:wrap;padding-bottom:16px;border-bottom:1px solid var(--line);
}
.top a{text-decoration:none}
.top a:hover{color:var(--teal-lit)}
.home{font-family:var(--sans);font-weight:800;letter-spacing:-.02em;font-size:17px}
.langs{display:flex;gap:14px;align-items:baseline}

/* ⚠️ NO `text-wrap:balance` here, and that is the whole fix for a bug that
   looked like a font-size problem. "Datenschutzerklärung" is one word carrying
   a soft hyphen, and the balancer treats that ­ as a legal break
   opportunity - so it split the heading across two lines at every width,
   including 1440px where the word needs 567px inside a 664px box and plainly
   fits. Measured, not guessed. Balance is for headings with several words;
   h2/h3 below keep it, this one must never have it.

   The size came down at the same time (Dave, 2026-09-05). The floor matters as
   much as the cap: at 375px the word needs ~294px of the ~330px available, so
   the ­ stays as the safety net for the narrowest phones rather than being
   the thing that fires on a desktop. */
h1{
  font-family:var(--sans);font-weight:800;text-transform:uppercase;
  letter-spacing:-.03em;line-height:.94;margin:clamp(28px,5vh,48px) 0 6px;
  font-size:clamp(27px,5.6vw,44px);hyphens:auto;
}
.stamp{margin-bottom:clamp(26px,4vh,40px)}

h2{
  font-family:var(--sans);font-weight:700;font-size:clamp(18px,2.4vw,23px);
  letter-spacing:-.01em;line-height:1.2;margin:2.4em 0 .5em;
  padding-top:.9em;border-top:1px solid var(--line);text-wrap:balance;
}
h2:first-of-type{border-top:0;padding-top:0;margin-top:1.4em}
h3{
  font-family:var(--sans);font-weight:700;font-size:clamp(15px,1.7vw,17.5px);
  line-height:1.3;margin:1.9em 0 .4em;color:var(--paper);text-wrap:balance;
}
h4{
  font-family:var(--mono);font-size:11px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--teal-lit);font-weight:400;
  margin:1.6em 0 .35em;
}

p{font-size:15.5px;line-height:1.75;color:#c2d0cd;margin:0 0 1.1em;max-width:66ch}
ul{margin:0 0 1.1em;padding-left:1.15em;max-width:66ch}
li{font-size:15.5px;line-height:1.75;color:#c2d0cd;margin:0 0 .55em}
a[href]{color:var(--teal-lit);text-decoration:underline;text-underline-offset:3px;
  /* the boilerplate prints full URLs as link text; let them break rather than
     forcing a horizontal scrollbar on a 360px phone */
  overflow-wrap:anywhere;
}

address{
  font-style:normal;font-size:15.5px;line-height:1.65;color:var(--paper);
  margin:0 0 1.2em;padding-left:14px;border-left:2px solid var(--teal);
}

/* The two Art. 21 paragraphs are set in capitals in the source document on
   purpose - that emphasis is part of the legal text. Kept as capitals, but
   given air and a smaller size so a wall of caps stays readable. */
.caps{
  font-size:13px;line-height:1.7;letter-spacing:.015em;color:var(--fog);
  background:var(--ink-2);border-left:2px solid var(--line);
  padding:14px 16px;margin:0 0 1.1em;max-width:none;
}

.src{margin-top:2.4em;padding-top:1.2em;border-top:1px solid var(--line);
  font-family:var(--mono);font-size:11px;letter-spacing:.06em;color:var(--fog-dim)}

/* Matomo opt-out. Our Matomo is self-hosted and cookieless, so there is
   nothing to consent to - but e-recht24's own guidance for a Matomo install
   run without a consent banner is to offer the opt-out anyway, and it costs a
   first-party iframe to the same host the tracker already loads from. */
.optout{margin-top:2.6em;padding-top:1.4em;border-top:1px solid var(--line)}
.optout iframe{width:100%;min-height:200px;border:0;background:transparent}

footer.legal-foot{
  margin-top:3.2em;padding-top:1.4em;border-top:1px solid var(--line);
  display:flex;gap:18px;flex-wrap:wrap;align-items:baseline;
}
footer.legal-foot a{text-decoration:none}
footer.legal-foot a:hover{color:var(--teal-lit)}