@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: ENTFERNT 10.09.2026 ----------------------------- */
/* Die Attrappe aus der Vorlage (9:41, WLAN, Batterie) ist auf Anweisung
 * raus — eine echte Web-App bekommt die Statusleiste vom Geraet. Damit
 * die Screens oben nicht am Rand kleben, uebernimmt .telefon die Luft,
 * die vorher die Leiste einnahm (safe-area fuer den PWA-Vollbildfall). */
.telefon { padding-top: max(10px, env(safe-area-inset-top)); }

/* --- 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;
}

/* SAMMELREGEL GEGEN EINE FALLE, DIE IN DIESEM PROJEKT SCHON DREIMAL ZEIT
 * GEKOSTET HAT (Ospella 1 beim Leerzustand des Decks, hier beim Leerzustand
 * der Tafelrunde, und am 09.09.2026 beim leeren Profilbild):
 *
 * Ein Element mit `[hidden]`, das im CSS ein eigenes `display` bekommt,
 * BLEIBT SICHTBAR. Die eigene Regel schlägt die Browser-Vorgabe für
 * `[hidden]` — das Attribut sieht dann aus, als täte es nichts.
 * Gemessen: `<img data-foto hidden>` stand als kaputtes Bildsymbol im
 * Profilbau, weil `.profilbau__gross img { display: block }` gewann.
 *
 * `!important` ist hier kein Holzhammer, sondern die Bedeutung des
 * Attributs: Es gibt keinen Fall, in dem `[hidden]` etwas anderes heißen
 * soll als „nicht anzeigen". Wer ein Element ein- und ausblenden will,
 * ohne dass es verschwindet, nimmt eine Klasse — nicht `hidden`. */
[hidden] { display: none !important; }