@font-face {
  font-family: 'Playfair Display';
  src: url('../vendor/fonts/Playfair_Display.woff2') format('woff2');
  font-weight: 400 900;      /* variable Schrift: Bereich ist Pflicht */
  font-display: swap;
}
@font-face {
  font-family: 'Inter';
  src: url('../vendor/fonts/Inter.woff2') format('woff2');
  font-weight: 100 900;
  font-display: swap;
}

*, *::before, *::after { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
}

body {
  background: var(--creme);
  color: var(--text);
  font-family: var(--schrift-text);
  font-size: 16px;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
  font-variant-numeric: lining-nums;   /* Mediaevalziffern sonst in Versalzeilen */
}

/* Der Telefonrahmen. Am Mini gemessen wird in einem iframe 390 x 745;
 * auf dem Geraet fuellt die App den Bildschirm. */
.telefon {
  position: relative;
  width: 100%;
  min-height: 100dvh;
  margin: 0 auto;
  overflow: hidden;
  background: var(--creme);
  display: flex;
  flex-direction: column;
}

/* --- Statusleiste ------------------------------------------------- */
/* Die Vorlage zeigt sie auf jedem Screen. Sie ist Attrappe: eine echte
 * Web-App bekommt sie vom Geraet. Hier steht sie, damit der Bildvergleich
 * mit der Vorlage aufgeht. */
.statusleiste {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px var(--rand) 0;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.2px;
  flex: 0 0 auto;
}
.statusleiste .zeichen { display: flex; gap: 5px; align-items: center; }

/* --- Knoepfe ------------------------------------------------------- */
.knopf {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: var(--knopf-hoehe);
  padding: 0 20px;
  border: none;
  border-radius: var(--knopf-radius);
  font-family: var(--schrift-text);
  font-size: 16px;
  font-weight: 500;
  cursor: pointer;
  text-decoration: none;
}

/* Hauptknopf. Flaeche GEMESSEN an der Vorlage (#C85B2A), nicht aus der
 * Legende genommen — siehe tokens.css. Weisze Schrift darauf misst 4,21:1
 * und liegt damit unter dem AA-Wert 4,5. Das ist eine bewusste Abweichung
 * vom Grenzwert zugunsten der Vorlagentreue, gemeldet und freigegeben. */
.knopf--haupt {
  background: var(--knopf);
  color: var(--text-auf-knopf);
}

/* Nebenknopf: Creme-Fuellung mit duennem Rand — nicht "background: none". */
.knopf--neben {
  background: var(--creme);
  color: var(--text);
  border: 1px solid var(--linie);
}

/* --- Schriftrollen ------------------------------------------------- */
.titel {
  font-family: var(--schrift-anzeige);
  font-weight: 500;
  font-size: 34px;
  line-height: 1.16;
  letter-spacing: -0.3px;
  margin: 0;
  color: var(--text);
}
.unterzeile {
  font-size: 16px;
  line-height: 1.45;
  color: var(--text-leise);
  margin: 0;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

@font-face {
  font-family: 'Satisfy';
  src: url('../vendor/fonts/Satisfy.woff2') format('woff2');
  font-weight: 400;
  font-display: swap;
}