/* ------------------------------------------------------------------
   VAASERA – gemeinsame Grundlage aller Seiten.
   Enthält alles, was Startseite und Impressum teilen müssen, damit
   das Logo beim Seitenwechsel weder springt noch seine Grösse ändert:
   Schrift, Farben, die Skalierungseinheit und das Logo selbst.
   1u = 1 % der Entwurfsbreite = 19,2 Entwurfspixel.
   ------------------------------------------------------------------ */

@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 100 900;
  font-stretch: 100%;
  font-display: swap;
  src: url('fonts/roboto-latin-variable.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
                 U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  --navy:  #133040;
  --lilac: #c49fcc;
  --dew:   #f5f8f1;

  /* Skalierungseinheit: feste Stufen pro Breakpoint, nicht fluid.
     19.2px = Entwurfsmass (Headline 100px, Fliesstext 30px).
     --uw stuft nach Breite, --uh nach Höhe; die kleinere gewinnt, damit
     die Textspalte auf flachen Screens nicht aus dem Viewport läuft. */
  --uw: 19.2px;
  --uh: 19.2px;
  --u: min(var(--uw), var(--uh));

  /* Stufen der Hochformat-Ansicht */
  --pad: 44px;  --h1: 72px;  --body: 22px;  --logo: 260px;
  --gap-h1: 34px;  --gap-body: 28px;
}

/* Stufen nach Breite */
@media (max-width: 1599px) { :root { --uw: 17.3px; } }   /* Headline 90px */
@media (max-width: 1399px) { :root { --uw: 15.4px; } }   /* Headline 80px */
@media (max-width: 1199px) { :root { --uw: 13.4px; } }   /* Headline 70px */
@media (max-width: 1023px) { :root { --uw: 11.5px; } }   /* Headline 60px */

/* Stufen nach Höhe */
@media (max-height:  949px) { :root { --uh: 17.3px; } }
@media (max-height:  859px) { :root { --uh: 15.4px; } }
@media (max-height:  769px) { :root { --uh: 13.4px; } }
@media (max-height:  669px) { :root { --uh: 11.5px; } }
@media (max-height:  559px) { :root { --uh:  9.6px; } }
@media (max-height:  459px) { :root { --uh:  8.0px; } }

/* Feste Stufen der Hochformat-Ansicht */
@media (max-width: 599px) {
  :root { --pad: 32px; --h1: 56px; --body: 19px; --logo: 220px;
          --gap-h1: 26px; --gap-body: 22px; }
}
@media (max-width: 479px) {
  :root { --pad: 24px; --h1: 44px; --body: 17px; --logo: 180px;
          --gap-h1: 21px; --gap-body: 17px; }
}
@media (max-width: 379px) {
  :root { --pad: 20px; --h1: 38px; --body: 16px; --logo: 155px;
          --gap-h1: 18px; --gap-body: 15px; }
}

* { box-sizing: border-box; }

/* Logo – identisch auf jeder Seite. Der Abstand zur Seitenkante wird
   vom umgebenden Element gesetzt, ist aber überall 3.894u bzw. --pad. */
.logo {
  display: block;
  width: calc(19.651 * var(--u));
  height: auto;
}

@media (max-aspect-ratio: 1/1), (max-width: 720px) {
  .logo { width: var(--logo); }
}