/* Shared by impressum.html and datenschutz.html. Lived inline in the privacy
   page until the two were split; a copy in each would drift, which is exactly
   what happened to the accent colour once already. */
:root {
  --blue:  #dbe8fb;
  --blue2: #4f8ff0;
  --blue3: #6ea8ff;
  --bg:    #05080f;
  --bg2:   #0c1424;
  --text:  #e7edf6;
  --text2: #9fb0c8;
  --text3: #6b7d99;
  --border:rgba(255,255,255,0.09);
  --teal:  #2bd9c4;
  --serif: 'Source Serif 4', Georgia, serif;
  --sans:  'Source Sans 3', sans-serif;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--sans);
  font-size: 18px;
  line-height: 1.7;
}

/* NAV — the same floating island as the main page */
nav {
  position: fixed;
  top: 14px; left: 50%;
  transform: translateX(-50%);
  z-index: 500;
  width: calc(100% - 48px);
  max-width: 1160px;
  height: 60px;
  background: rgba(10,17,30,0.72);
  backdrop-filter: blur(20px) saturate(1.35);
  -webkit-backdrop-filter: blur(20px) saturate(1.35);
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 10px;
  box-shadow: 0 6px 28px rgba(0,0,0,0.42);
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 16px 0 10px;
}
.nav-logo {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 0 6px;
  text-decoration: none;
}
.nav-logo img { height: 36px; width: 36px; display: block; object-fit: contain; }
.nav-logo-text {
  font-family: var(--sans);
  font-size: 17px;
  font-weight: 600;
  letter-spacing: 1.6px;
  color: var(--blue);
  line-height: 1;
  white-space: nowrap;
}
.nav-logo-text span {
  margin-left: 5px;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 1.2px;
  color: var(--text3);
}
.nav-back {
  font-size: 15px;
  color: var(--text3);
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 6px;
  transition: color 0.2s;
}
.nav-back:hover { color: var(--blue2); }
.nav-back::before { content: '←'; }

/* HERO BAR
   Home of the board photograph, in the treatment the old start page gave it:
   screen blend over the dark ground, saturation pulled back, a left-weighted
   scrim so the type stays readable. The band is tall enough to show the board
   rather than a cropped strip of it — at 122px it was mostly padding. */
.page-hero {
  background: radial-gradient(900px 400px at 80% -20%, rgba(43,217,196,0.10), transparent 60%), #0a1120;
  padding: 156px 56px 64px;
  min-height: clamp(360px, 34vw, 480px);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  position: relative;
  overflow: hidden;
}
.page-hero-bg {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center center;
  opacity: 0.34;
  filter: saturate(0.7) brightness(0.9);
  mix-blend-mode: screen;
}
/* The Impressum's STM32L4 capture is a dark layout render, not a photograph:
   at the photo's settings it all but disappears. It wants lifting, not
   dimming — same band, opposite direction. */
.page-hero-bg--capture {
  opacity: 0.5;
  filter: saturate(0.5) brightness(1.5) contrast(0.95);
}
.page-hero > :not(img) { position: relative; z-index: 1; }
/* Scrim over the capture, plus the accent rule along the bottom edge as the
   first background layer. The capture is dense enough to fight the headline
   on its own, so the ramp is heaviest on the left where the type sits and
   opens up to the right, where the board is worth seeing. */
.page-hero::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(to right, var(--blue2), var(--blue3)) bottom / 100% 4px no-repeat,
    linear-gradient(to right, rgba(10,17,32,0.90) 0%, rgba(10,17,32,0.62) 52%, rgba(10,17,32,0.24) 100%),
    linear-gradient(to top, rgba(10,17,32,0.72) 0%, transparent 46%);
}
.page-hero-label {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: var(--blue3);
  margin-bottom: 12px;
  display: block;
}
.page-hero h1 {
  font-family: var(--serif);
  font-size: clamp(30px, 4.2vw, 51px);
  font-weight: 400;
  color: #fff;
  line-height: 1.1;
  margin-bottom: 12px;
  animation: none;
  opacity: 1;
  transform: none;
}
.page-hero p {
  font-size: 17px;
  color: rgba(255,255,255,0.5);
}

/* LAYOUT */
.container {
  max-width: 820px;
  margin: 0 auto;
  padding: 72px 56px;
}

/* CONTENT */
.toc {
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 28px 32px;
  margin-bottom: 56px;
}
.toc h2 {
  font-size: 15px;
  font-weight: 700;
  color: var(--text3);
  letter-spacing: 1.5px;
  text-transform: uppercase;
  margin-bottom: 14px;
  font-family: var(--sans);
}
.toc ol {
  padding-left: 20px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.toc ol li a {
  font-size: 16px;
  color: var(--blue2);
  text-decoration: none;
  transition: color 0.2s;
}
.toc ol li a:hover { color: var(--blue); text-decoration: underline; }

.section-block {
  margin-bottom: 52px;
  padding-bottom: 52px;
  border-bottom: 1px solid var(--border);
}
.section-block:last-child { border-bottom: none; }

.section-block h2 {
  font-family: var(--serif);
  font-size: 28px;
  font-weight: 600;
  color: var(--blue);
  margin-bottom: 20px;
  line-height: 1.2;
}

.section-block h3 {
  font-family: var(--sans);
  font-size: 18px;
  font-weight: 600;
  color: var(--text);
  margin-top: 24px;
  margin-bottom: 10px;
}

.section-block p {
  font-size: 17px;
  color: var(--text2);
  margin-bottom: 14px;
  line-height: 1.8;
}
.section-block p:last-child { margin-bottom: 0; }

.section-block ul, .section-block ol {
  padding-left: 20px;
  margin-bottom: 14px;
}
.section-block li {
  font-size: 17px;
  color: var(--text2);
  margin-bottom: 6px;
  line-height: 1.7;
}

.info-box {
  background: rgba(79,143,240,0.08);
  border-left: 3px solid var(--teal);
  border-radius: 0 4px 4px 0;
  padding: 16px 20px;
  margin: 20px 0;
}
.info-box p {
  font-size: 16px;
  color: var(--text);
  margin: 0;
}

/* Consent panel. This page carries no consent dialog of its own — it has no
   scripts and loads no external fonts — but the withdrawal must work from
   here too, so the panel reads the same localStorage key the start page
   writes and can clear it. */
.consent-box {
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 20px 22px;
  margin: 20px 0;
}
.consent-box strong { color: var(--text); }
.consent-state {
  font-size: 16px;
  color: var(--text2);
  margin: 8px 0 16px;
}
.consent-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.consent-btn {
  font: inherit;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.2;
  padding: 10px 18px;
  border-radius: 4px;
  border: 1px solid var(--blue2);
  background: var(--blue2);
  color: #fff;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.2s, border-color 0.2s, color 0.2s;
}
.consent-btn:hover { background: #1e4a94; border-color: #1e4a94; }
.consent-btn[disabled] {
  background: none;
  border-color: var(--border);
  color: var(--text3);
  cursor: default;
}
.consent-btn-ghost {
  background: none;
  border-color: var(--border);
  color: var(--text);
}
.consent-btn-ghost:hover { background: none; border-color: var(--blue3); color: var(--blue3); }

.contact-card {
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 24px 28px;
  margin-top: 20px;
}
.contact-card p {
  font-size: 17px;
  color: var(--text);
  margin-bottom: 8px;
  font-weight: 500;
}
.contact-card span {
  display: block;
  font-size: 16px;
  color: var(--text2);
  margin-bottom: 4px;
}

/* Standen bis zur CSP als style="" im HTML. Inline-Styles sind mit
   style-src 'self' nicht mehr erlaubt, also leben die zwei Abstaende hier. */
.contact-card span.spaced { margin-top: 12px; }
.section-block > p.spaced { margin-top: 16px; }

/* FOOTER */
footer {
  background: #0d1f33;
  padding: 32px 56px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  border-top: 3px solid var(--blue2);
}
.footer-name {
  font-family: var(--serif);
  font-size: 16px;
  font-weight: 600;
  color: rgba(255,255,255,0.5);
}
.footer-copy {
  font-size: 14px;
  color: rgba(255,255,255,0.25);
}
.footer-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 20px; list-style: none; }
.footer-links a {
  font-size: 14px;
  color: rgba(255,255,255,0.35);
  text-decoration: none;
  transition: color 0.2s;
}
.footer-links a:hover { color: rgba(255,255,255,0.7); }

@media (max-width: 768px) {
  nav { width: calc(100% - 32px); height: 56px; padding: 0 12px 0 8px; }
  .nav-logo img { height: 32px; width: 32px; }
  .nav-logo-text { font-size: 16px; letter-spacing: 1.2px; }
  .nav-back { font-size: 14px; }
  .page-hero { padding: 120px 24px 40px; min-height: clamp(260px, 52vw, 340px); }
  .container { padding: 48px 24px; }
  footer { padding: 28px 20px; flex-direction: column; text-align: center; }
  .footer-links { justify-content: center; }
}