/* Design-Tokens — verbindliche Werte laut Designkonzept (Spec Abschnitt 2)
   und Premium-Neufassung (Spec 04.07.2026) */
:root {
  /* Markenfarben (exakt) */
  --navy: #081B3D;
  --cyan: #009EE3;
  --blau: #1863DC;
  /* Säulen-Akzente: -akzent nur dekorativ, -text für Text (AA-geprüft) */
  --gold-akzent: #C9A227;
  --gold-text: #7A611C;
  --gruen-akzent: #4C7A5C;
  --gruen-text: #2F5741;
  --rot-akzent: #B3452F;
  /* Neutrale Töne */
  --grau-90: #212529;
  --grau-60: #5B6470;
  --grau-10: #F4F5F7;
  --linie: #E9ECF1; /* feine Trennlinien statt Rahmen */
  /* Schrift */
  --schrift-titel: "Montserrat", sans-serif;
  --schrift-text: "Inter", system-ui, sans-serif;
  /* Maße */
  --breite-inhalt: 72rem;
  --rand: clamp(1.5rem, 5vw, 4rem); /* Seitenrand links/rechts, wächst mit dem Fenster */
  --rundung: 8px; /* kleine Elemente (Merksatz-Ecke u. ä.) */
  --rundung-knopf: 999px; /* Test-Effekt 2: Pill-Knöpfe (vorher: 8px) */
  --rundung-karte: 20px; /* Test-Effekt 4: weichere Karten (vorher: 14px) */
  --uebergang: .25s cubic-bezier(.4, 0, .2, 1); /* sanfter Standard-Übergang */
  /* Karten-Flächen nach Apple-Art: Verlauf, weicher Schatten,
     beim Überfahren sanftes Anheben ("Ausbeulen" nach oben) */
  --flaeche-verlauf: linear-gradient(180deg, #FFFFFF 0%, #EAEEF4 100%); /* auf weißem Grund */
  --flaeche-verlauf-hell: linear-gradient(180deg, #FFFFFF 0%, #F7F9FB 100%); /* auf grauem Grund */
  --flaeche-schatten:
    inset 0 1px 0 rgba(255, 255, 255, .9),
    0 1px 2px rgba(8, 27, 61, .06),
    0 14px 36px rgba(8, 27, 61, .08);
  --flaeche-schatten-hover:
    inset 0 1px 0 rgba(255, 255, 255, .9),
    0 2px 4px rgba(8, 27, 61, .05),
    0 22px 52px rgba(8, 27, 61, .13);
}

* { box-sizing: border-box; }

body {
  font-family: var(--schrift-text);
  font-size: 1.125rem;
  line-height: 1.7;
  color: var(--grau-90);
  margin: 0;
  overflow-wrap: break-word; /* lange Fachwörter brechen um statt überzulaufen */
}

/* Auf Handys zusätzlich Silbentrennung (greift dank lang="de" korrekt) */
@media (max-width: 599px) {
  body { hyphens: auto; }
}

h1, h2, h3 {
  font-family: var(--schrift-titel);
  font-weight: 600; /* halbfett: Wirkung durch Größe und Luft, nicht Fettdruck */
  line-height: 1.15;
}

a { color: var(--blau); }

.knopf {
  background: var(--blau);
  color: #fff;
  border-radius: var(--rundung-knopf);
  padding: .85rem 1.75rem;
  font-weight: 600;
  font-size: 1rem;
  text-decoration: none;
  display: inline-block;
  transition: background var(--uebergang), box-shadow var(--uebergang);
}
.knopf:hover { background: #1554BC; box-shadow: 0 8px 24px rgba(24, 99, 220, .22); }

.knopf--umriss {
  background: transparent;
  color: var(--blau);
  border: 1px solid rgba(24, 99, 220, .45);
}
.knopf--umriss:hover { background: rgba(24, 99, 220, .06); border-color: var(--blau); box-shadow: none; }