/* ============================================================================
 * DIE NEBENSEITEN: Datenschutz, Support, Impressum.
 *
 * WARUM EINE EIGENE DATEI und nicht styles.css: Diese drei Seiten sind reiner
 * Text. Sie brauchen nichts von der Startseite außer Farben und Schrift — und
 * sie sollen weiterlaufen, egal wie sich die Gestaltung der Startseite noch
 * dreht. 4 KB statt 44 KB, und keine Klasse, die unter ihnen wegbrechen kann.
 *
 * Die sieben Farben sind aus styles.css übernommen (Stand 03.09.2026). Ändert
 * sich dort die Palette, muss dieser Block nachziehen — es sind zehn Zeilen.
 * ========================================================================== */

@font-face {
  font-family: 'Trakki Archivo';
  src: url('assets/schrift/trakki-archivo.woff2') format('woff2-variations');
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-style: normal;
  font-display: swap;
}

:root {
  --weiss: #ffffff;
  --nacht: #141751;
  --tuerkis: #207f8c;
  --tuerkis-hell: #45afc5;
  --gold: #f1aa1c;

  --grund: #f2f2f6;
  --flaeche: var(--weiss);
  --tinte: var(--nacht);
  --tinte-leise: #565882;
  --linie: #dcdce5;
  --akzent: var(--tuerkis);

  --schrift: 'Trakki Archivo', ui-sans-serif, system-ui, -apple-system,
    'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --rund: 20px;
  --schatten: 0 10px 30px -18px rgba(20, 23, 81, 0.35);
  color-scheme: light;
}

/* Dunkel: entweder weil das Gerät es so will — oder weil auf der Startseite
 * der Schalter umgelegt wurde. Beide Wege setzen dieselben acht Werte. */
@media (prefers-color-scheme: dark) {
  :root:not([data-thema='hell']) {
    --grund: var(--nacht);
    --flaeche: #1d2064;
    --tinte: var(--weiss);
    --tinte-leise: #a6a7bd;
    --linie: #35386b;
    --akzent: var(--tuerkis-hell);
    --schatten: none;
    color-scheme: dark;
  }
}

:root[data-thema='dunkel'] {
  --grund: var(--nacht);
  --flaeche: #1d2064;
  --tinte: var(--weiss);
  --tinte-leise: #a6a7bd;
  --linie: #35386b;
  --akzent: var(--tuerkis-hell);
  --schatten: none;
  color-scheme: dark;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--grund);
  color: var(--tinte);
  font-family: var(--schrift);
  font-size: 17px;
  line-height: 1.6;
  -webkit-text-size-adjust: 100%;
}

.huelle {
  max-width: 46rem;
  margin: 0 auto;
  padding: 0 1.25rem;
}

/* --- Kopf: nur die Marke, die zurück auf die Startseite führt ------------- */
.kopf {
  padding: 1.5rem 0;
  border-bottom: 1px solid var(--linie);
}

.marke {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  color: inherit;
  text-decoration: none;
  font-weight: 640;
  font-size: 1.15rem;
  letter-spacing: -0.01em;
  min-height: 44px;
}

/* Das App-Symbol hat einen weissen Grund. Ohne Radius steht es als
 * sichtbares Kaestchen auf dem grauen Papier. */
.marke img {
  display: block;
  border-radius: 7px;
}

/* --- Der Text ------------------------------------------------------------ */
.blatt { padding: 2.5rem 0 3rem; }

.blatt h1 {
  margin: 0;
  font-size: clamp(1.9rem, 1.3rem + 2.4vw, 2.6rem);
  line-height: 1.15;
  letter-spacing: -0.02em;
  font-weight: 700;
}

.stand {
  margin: 0.5rem 0 0;
  color: var(--tinte-leise);
  font-size: 0.95rem;
}

.blatt > p { margin: 1.25rem 0 0; }

.blatt section {
  margin-top: 1.25rem;
  padding: 1.25rem 1.4rem;
  background: var(--flaeche);
  border: 1px solid var(--linie);
  border-radius: var(--rund);
  box-shadow: var(--schatten);
}

.blatt section h2 {
  margin: 0;
  font-size: 1.1rem;
  font-weight: 640;
  letter-spacing: -0.01em;
}

.blatt section h3 {
  margin: 1.5rem 0 0;
  font-size: 1rem;
  font-weight: 640;
}

.blatt section h3:first-of-type { margin-top: 1.25rem; }

.blatt section p,
.blatt section address {
  margin: 0.5rem 0 0;
  color: var(--tinte-leise);
  font-size: 0.98rem;
  font-style: normal;
}

.blatt section h2 + p,
.blatt section h3 + p { margin-top: 0.4rem; }

.blatt dl { margin: 0.75rem 0 0; }

.blatt dt {
  margin-top: 0.9rem;
  font-weight: 640;
  font-size: 0.95rem;
}

.blatt dd {
  margin: 0.15rem 0 0;
  color: var(--tinte-leise);
  font-size: 0.98rem;
}

a { color: var(--akzent); text-underline-offset: 0.2em; }

/* Verweise, die allein in einer Zeile stehen, brauchen eine Trefferfläche. */
.blatt section > a,
.verweise a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-weight: 600;
}

.verweise {
  display: flex;
  flex-wrap: wrap;
  gap: 0 1.5rem;
  margin-top: 0.75rem;
}

/* --- Fuß: der Weg zu den jeweils anderen beiden Seiten -------------------- */
.fuss {
  margin-top: 2.5rem;
  padding: 1.5rem 0 3rem;
  border-top: 1px solid var(--linie);
  display: flex;
  flex-wrap: wrap;
  gap: 0 1.5rem;
  align-items: center;
  font-size: 0.95rem;
}

.fuss a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-weight: 600;
}

.fuss .jahr {
  color: var(--tinte-leise);
  margin-left: auto;
}

@media (max-width: 30rem) {
  .fuss .jahr { margin-left: 0; width: 100%; }
}

:focus-visible {
  outline: 2px solid var(--akzent);
  outline-offset: 3px;
  border-radius: 4px;
}