/* ===================================================================
   meteoCORE — Teaser-Seiten (E16)

   EINE Datei fuer alle neunzehn Teaser-Domains. Sie liegt hier, weil jede
   dieser Domains ein eigenes Dokumentwurzelverzeichnis hat: Eine Datei im
   Teaser-Repo waere neunzehn Kopien, und genau das soll "Eine Quelle, keine
   Kopien" verhindern. Derselbe Host wie das Logo, wie E16 es sagt.

   Die Seiten binden zwei Dateien ein:
     https://images.meteocore.com/files/meteocore.css   Werte und Bausteine
     https://images.meteocore.com/files/teaser.css      diese hier

   Was hier steht, ist NUR das Seitengeruest der Teaser -- Kopf, Bild, Fuss.
   Farben, Groessen und Schriftfamilien kommen aus meteocore.css.
   =================================================================== */

/* Arimo und Plex Mono liegen daneben. Zweite Wahl ist ueberall Arial:
   Arimo ist metrisch kompatibel dazu, und falls der CORS-Header ausfaellt
   (siehe .htaccess), sehen die Seiten nahezu gleich aus. */
@font-face {
  font-family: 'Arimo';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('./schriften/arimo-latin-400.woff2') format('woff2');
}
@font-face {
  font-family: 'Arimo';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('./schriften/arimo-latin-700.woff2') format('woff2');
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('./schriften/ibm-plex-mono-400.woff2') format('woff2');
}

/* Fangnetz, falls meteocore.css nicht ankommt: Eine Teaser-Seite darf nicht
   weiss werden. Zwei feste Werte, dieselbe Ausnahme wie auf den
   Rechtsseiten. */
html {
  background-color: #010A0F;
  color: #EAF3F8;
  color-scheme: dark;
}

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  color: var(--text-primary);
  font-family: var(--font-body);
  line-height: var(--lh-ui);
}

/* Zwei Seitenformen, und der Unterschied sind zwei Werte: wie hoch der leere
   Kopf ist und wie breit das Logo werden darf. Die Standardform traegt nur
   .seitengrund, die grosse zusaetzlich .teaser--gross. */
.teaser--gross {
  --teaser-kopf: 180px;
  --teaser-bild: 1400px;
}

/* Der Kopf ist leer und traegt nur Abstand -- er haelt das Bild aus der
   oberen Bildschirmkante. */
header {
  flex: 0 0 auto;
  height: var(--teaser-kopf, 0px);
}

main {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0 30px;
}

main img {
  width: 100%;
  max-width: var(--teaser-bild, 1000px);
  height: auto;
}

/* Fuss im Stil der Rechtsseiten (E16): Mono, klein, zurueckhaltend.
   --fs-xs statt der dort gesetzten 11,5 px -- die Skala aus E10 kennt 11
   und 12, nichts dazwischen. */
footer {
  flex: 0 0 auto;
  padding: 0 20px 28px;
  text-align: center;
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  color: var(--text-tertiary);
}

footer a {
  color: var(--text-tertiary);
  text-decoration: none;
}

footer a:hover {
  color: var(--text-secondary);
}

/* Der Anspruch ueber den Fusszeilen-Links. Bis 2026-09-08 stand er in 1,2rem
   fett; --fs-2xl ist der naechste Wert der Skala und traegt ihn in
   Fliesstext statt in Mono -- er ist ein Satz, keine Beschriftung. */
footer .claim {
  margin: 0 0 10px;
  font-family: var(--font-body);
  font-size: var(--fs-2xl);
  font-weight: 700;
  color: var(--text-primary);
}

footer p {
  margin: 0;
}

/* Die Blitze (blitze.js). Hinter dem Inhalt, ueber dem Seitengrund. */
#blitze {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  pointer-events: none;
}

header, main, footer {
  position: relative;
  z-index: 2;
}

/* Zwei Logofassungen, eine quer und eine zweistoeckig -- welche gilt,
   entscheidet die Breite, nicht das Geraet. */
@media (min-width: 481px) {
  .logo-quer { display: block; }
  .logo-hoch { display: none; }
}
@media (max-width: 480px) {
  .logo-quer { display: none; }
  .logo-hoch { display: block; }
}