/* ------------------------------------------------------------------
   VAASERA – Rechtliche Seiten (Impressum)
   Setzt base.css voraus (Schrift, Farben, Einheit --u, Logo).
   styles.css wird hier bewusst nicht geladen: darin steckt die
   eingebettete Freisteller-Maske des Fotos (~45 kB).
   ------------------------------------------------------------------ */

:root {
  /* Eigene Stufen für den Lesetext. Bewusst ohne Höhenstufung –
     diese Seite darf scrollen. */
  --l-pad:  64px;
  --l-h1:   60px;
  --l-body: 20px;
}

@media (max-width: 1199px) { :root { --l-pad: 52px; --l-h1: 52px; --l-body: 19px; } }
@media (max-width:  767px) { :root { --l-pad: 40px; --l-h1: 42px; --l-body: 18px; } }
@media (max-width:  479px) { :root { --l-pad: 24px; --l-h1: 34px; --l-body: 17px; } }

html { margin: 0; }

body {
  margin: 0;
  padding: 0;
  min-height: 100dvh;
  background: var(--navy);
  color: var(--dew);
  font-family: 'Roboto', 'Helvetica Neue', Arial, sans-serif;
  font-size: var(--l-body);
  line-height: 1.55;
  font-synthesis: none;
  -webkit-font-smoothing: antialiased;
}

/* Logo rechts oben. Abstände identisch zur Startseite (.content dort),
   damit es beim Seitenwechsel weder springt noch die Grösse wechselt.
   Steht ausserhalb der Textspalte, sonst würde es an deren 46em-Marke
   kleben statt an der Seitenkante. */
.legal-head {
  text-align: right;
  padding: calc(3.894 * var(--u)) calc(3.894 * var(--u)) 0;
}

@media (max-aspect-ratio: 1/1), (max-width: 720px) {
  .legal-head { padding: var(--pad) var(--pad) 0; }
}

.logo-link { display: inline-block; }

.legal {
  max-width: 46em;
  padding: 0 var(--l-pad) var(--l-pad);
}

.legal h1 {
  margin: calc(1.6 * var(--l-body)) 0 calc(1.8 * var(--l-body));
  font-size: var(--l-h1);
  font-weight: 900;
  line-height: 1;
  letter-spacing: 0.035em;
  text-transform: uppercase;
  color: var(--lilac);
}

.legal h2 {
  margin: calc(1.8 * var(--l-body)) 0 0;
  font-size: 1em;
  font-weight: 700;
  line-height: inherit;
  color: var(--lilac);
}

.legal p,
.legal address {
  margin: 0;
  font-style: normal;      /* address wird sonst kursiv gesetzt */
}

.legal a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 0.18em;
}

.legal a:hover,
.legal a:focus-visible { color: var(--lilac); }