/* Shared fonts and styles for the text pages (Impressum, Datenschutz, …).
   Fonts are self-hosted: no requests to Google or other third parties. */
@font-face {
  font-family: 'Barlow';
  src: url('fonts/Barlow-Regular.ttf') format('truetype');
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: 'Barlow Condensed';
  src: url('fonts/BarlowCondensed-SemiBold.ttf') format('truetype');
  font-weight: 600;
  font-display: swap;
}
@font-face {
  font-family: 'Rubik';
  src: url('fonts/rubik-900.woff2') format('woff2');
  font-weight: 900;
  font-display: block;
}

:root {
  --bg: #000;
  --ice: #b8ecf0;
  --text: #f2f0eb;
  --muted: #8a8f91;
  --line: rgba(184, 236, 240, .16);
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html { background: var(--bg); }
body {
  background: var(--bg);
  color: var(--text);
  font: 400 15px/1.65 'Barlow', system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
}

.top {
  width: min(100% - 32px, 720px);
  margin: 0 auto;
  padding: 28px 0 0;
}
/* Back link left, logo centred */
.top { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; }
.top .back { color: var(--muted); text-decoration: none; padding: 8px 0; }
.top .back:hover { color: var(--text); }
.top .home { display: inline-block; color: var(--ice); }
.top svg { display: block; width: 36px; height: auto; fill: currentColor; }

main.text {
  width: min(100% - 32px, 720px);
  margin: 0 auto;
  padding: 40px 0 64px;
  flex: 1 0 auto;
}
.text h1 {
  font: 600 clamp(34px, 7vw, 46px)/1.05 'Barlow Condensed', system-ui, sans-serif;
  margin-bottom: 8px;
}
.text .stand { color: var(--muted); margin-bottom: 36px; }
.text h2 {
  font: 600 22px/1.2 'Barlow Condensed', system-ui, sans-serif;
  color: var(--ice);
  margin: 36px 0 10px;
}
.text h3 { font-size: inherit; font-weight: 400; color: var(--ice); margin: 22px 0 4px; }
.text p, .text ul { margin-bottom: 12px; }
.text ul { padding-left: 20px; }
.text li { margin-bottom: 4px; }
.text a { color: var(--ice); text-underline-offset: 3px; }
.text address { font-style: normal; margin-bottom: 12px; }
.text .muted { color: var(--muted); }

footer {
  padding: 24px 12px calc(24px + env(safe-area-inset-bottom));
  border-top: 1px solid var(--line);
  display: flex;
  justify-content: center;
  /* Always one row: spacing and size shrink on narrow phones */
  gap: clamp(8px, 3.6vw, 28px);
  font-size: clamp(11px, 3.4vw, 14px);
  white-space: nowrap;
  color: var(--muted);
}
footer a { color: inherit; text-decoration: none; }
footer a:hover, footer a[aria-current] { color: var(--text); }

/* Placeholder still to be filled in before going live */
mark { background: var(--ice); color: #000; padding: 0 4px; }