/* Lable – Stil: Schrift, Größen, Farben. Schriftgrößen nach Material 3, eigene Farbe: Petrol.
   (Die Namen --blau* sind geblieben, damit alle Seiten weiter passen – die Farbe ist Petrol.) */
@font-face {
  font-family: "Google Sans Flex";
  src: url("fonts/GoogleSansFlex.ttf") format("truetype");
  font-weight: 1 1000;
  font-display: swap;
}

:root {
  /* ---------- Farben ---------- */
  --blau: #0b7b75;          /* Knöpfe, Links, Fokus */
  --blau-dunkel: #075e5a;   /* Knopf beim Drüberfahren */
  --blau-hell: #9fd8d2;     /* Fläche beim Drüberfahren */
  --blau-zart: #d4efec;     /* ausgewählt, Hinweise */
  --schwarz: #000000;       /* große Titel */
  --text: #1f1f1f;          /* normaler Text */
  --text-grau: #444746;     /* Nebentext, Beschriftungen */
  --text-hell: #747775;     /* Platzhalter, deaktiviert */
  --seite: #f2f5f5;         /* Hintergrund */
  --box: #ffffff;           /* Box, Felder */
  --rahmen: #747775;        /* Rand von Feldern */
  --linie: #c4c7c5;         /* Trennlinien */
  --fehler: #b3261e;
  --fehler-zart: #f9dedc;
  --erfolg: #146c2e;
  --erfolg-zart: #c4eed0;

  /* ---------- Schrift (Material 3): Dicke Größe/Zeilenhöhe ---------- */
  --schrift: "Google Sans Flex", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --display-gross:  400 57px/64px var(--schrift);
  --display-mittel: 400 45px/52px var(--schrift);
  --display-klein:  400 36px/44px var(--schrift);   /* Titel der Anmeldung („Anmeldung“) */
  --headline-gross: 400 32px/40px var(--schrift);
  --headline-mittel:400 28px/36px var(--schrift);
  --headline-klein: 400 24px/32px var(--schrift);
  --titel-gross:    400 22px/28px var(--schrift);
  --titel-mittel:   500 16px/24px var(--schrift);
  --titel-klein:    500 14px/20px var(--schrift);
  --text-gross:     400 16px/24px var(--schrift);   /* Untertitel, Eingaben, normaler Text */
  --text-mittel:    400 14px/20px var(--schrift);   /* Nebentext, Hinweise */
  --text-klein:     400 12px/16px var(--schrift);   /* Fehlertext, Kleingedrucktes */
  --label-gross:    500 14px/20px var(--schrift);   /* Knöpfe, Links */
  --label-mittel:   500 12px/16px var(--schrift);   /* Beschriftung im Feldrand */
  --label-klein:    500 11px/16px var(--schrift);

  /* ---------- Abstände, Rundungen, Bewegung ---------- */
  --rund-feld: 4px;
  --rund-box: 28px;
  --rund-pille: 999px;
  --ease: cubic-bezier(.2, 0, 0, 1);
}

@media (max-width: 640px) {
  :root { --display-klein: 400 28px/36px var(--schrift); }
}