/* ==========================================================================
   Aufwind – Design-Tokens
   Alle Farben, Schriften, Größen, Abstände, Radien, Schatten und Bewegungen
   zentral an einer Stelle. Für einen neuen Kunden zuerst hier anpassen.
   ========================================================================== */

/* --- Schriften (lokal, SIL Open Font License, Latin-Subset) --------------- */
@font-face {
  font-family: "Figtree";
  src: url("../fonts/figtree-var.woff2") format("woff2");
  font-weight: 500 800;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2190-2199, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Atkinson Hyperlegible Next";
  src: url("../fonts/atkinson-hyperlegible-next-var.woff2") format("woff2");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2190-2199, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Ersatzschriften mit angeglichenen Metriken: weniger Layout-Sprung beim Schriftwechsel */
@font-face {
  font-family: "Figtree Ersatz";
  src: local("Arial"), local("Helvetica Neue"), local("Helvetica");
  size-adjust: 102%;
  ascent-override: 93%;
  descent-override: 25%;
}

@font-face {
  font-family: "Atkinson Ersatz";
  src: local("Verdana"), local("Arial");
  size-adjust: 94%;
  ascent-override: 96%;
  descent-override: 24%;
}

:root {
  /* --- Farben ------------------------------------------------------------ */
  --farbe-grund: #fbf8f3;          /* warmes Weiß – Seitenhintergrund */
  --farbe-flaeche: #ffffff;        /* Kacheln, Formulare */
  --farbe-sand: #f3ede3;           /* ruhige Flächen */
  --farbe-sand-200: #e9e0d2;
  --farbe-salbei-100: #e4ecdf;
  --farbe-salbei-200: #cfddc8;
  --farbe-salbei-400: #8fae88;     /* nur Dekor, nicht für Text */
  --farbe-mint-100: #e2f3ea;
  --farbe-mint-200: #c4e8d6;
  --farbe-mint-300: #a6dcc3;
  --farbe-petrol-900: #0b3a40;     /* Überschriften, dunkle Flächen */
  --farbe-petrol-800: #0f4a51;
  --farbe-petrol-700: #155e66;     /* Links */
  --farbe-petrol-500: #2b7a80;     /* Feldrahmen (≥ 3:1) */
  --farbe-text: #16373c;           /* Fließtext, 12:1 auf Grund */
  --farbe-text-leise: #4b6468;     /* Nebentext, 6:1 auf Grund */
  --farbe-koralle-100: #fde6df;
  --farbe-koralle-200: #fbd3c7;
  --farbe-koralle-400: #f4907a;    /* CTA-Grund, Text Petrol-900 = 5,4:1 */
  --farbe-koralle-500: #ef7d63;    /* CTA hover, Text Petrol-900 = 4,6:1 */
  --farbe-koralle-700: #a8432f;    /* Fehlertexte, 5,7:1 auf Grund, 5:1 auf Koralle-100 */
  --farbe-weiss: #ffffff;
  --farbe-gruen-500: #2f9a6b;      /* Status „geöffnet“, freie Plätze – nur Symbol, nicht für Text */
  --farbe-gruen-700: #2f7a55;      /* Häkchen „auf Rezept“, 4,5:1 auf Mint-100, 5,2:1 auf Weiß */
  --farbe-platzhalter: #5f7477;    /* Platzhaltertext in Eingabefeldern, 4,9:1 auf Weiß, 4,8:1 auf Fehler-Grund */
  --farbe-fehler-grund: #fffaf8;   /* Feldhintergrund bei Fehler */

  /* Rollen */
  --farbe-ueberschrift: var(--farbe-petrol-900);
  --farbe-link: var(--farbe-petrol-700);
  --farbe-link-hover: var(--farbe-petrol-900);
  --farbe-linie: #dcd5c8;
  --farbe-feldrahmen: var(--farbe-petrol-500);
  --farbe-fokus: var(--farbe-petrol-900);
  --farbe-fokus-hell: var(--farbe-mint-300);
  --farbe-fehler: var(--farbe-koralle-700);
  --farbe-fehler-flaeche: var(--farbe-koralle-100);
  --farbe-erfolg-flaeche: var(--farbe-mint-100);
  --farbe-markierung: var(--farbe-mint-200);

  /* --- Schrift ----------------------------------------------------------- */
  --schrift-titel: "Figtree", "Figtree Ersatz", system-ui, sans-serif;
  --schrift-text: "Atkinson Hyperlegible Next", "Atkinson Ersatz", system-ui, sans-serif;

  /* Typo-Skala (Major Third), fluid – alles in rem, damit der Schriftgrößen-Umschalter wirkt */
  --text-xs: 0.875rem;
  --text-s: 1rem;
  --text-m: 1.125rem;                                   /* Fließtext 18 px */
  --text-l: clamp(1.25rem, 1.16rem + 0.4vw, 1.5rem);
  --text-xl: clamp(1.5rem, 1.3rem + 0.9vw, 2rem);
  --text-2xl: clamp(1.875rem, 1.5rem + 1.7vw, 2.75rem);
  --text-3xl: clamp(2.25rem, 1.6rem + 2.9vw, 4rem);
  --text-hero: clamp(2.6rem, 1.7rem + 4.2vw, 5.25rem);

  --zeilenhoehe: 1.65;
  --zeilenhoehe-titel: 1.1;
  --zeilenlaenge: 66ch;

  /* --- Abstände ---------------------------------------------------------- */
  --abstand-1: 0.25rem;
  --abstand-2: 0.5rem;
  --abstand-3: 0.75rem;
  --abstand-4: 1rem;
  --abstand-5: 1.5rem;
  --abstand-6: 2rem;
  --abstand-7: 3rem;
  --abstand-8: 4rem;
  --abstand-9: 6rem;
  --abstand-abschnitt: clamp(3.5rem, 2rem + 6vw, 8rem);
  --rand: clamp(1rem, 0.4rem + 2.6vw, 2.5rem);         /* seitlicher Seitenrand */

  /* --- Breiten ------------------------------------------------------------ */
  --breite-max: 84rem;
  --breite-text: 46rem;

  /* --- Formen ------------------------------------------------------------ */
  --radius-s: 0.75rem;
  --radius-m: 1.25rem;
  --radius-l: 2rem;
  --radius-xl: 3rem;
  --radius-pille: 999px;
  /* organische Blob-Form für Fotos und Platzhalter */
  --form-blob: 58% 42% 47% 53% / 52% 46% 54% 48%;
  --form-blob-2: 44% 56% 62% 38% / 47% 58% 42% 53%;

  --klickflaeche: 2.75rem;                               /* mind. 44 px */

  /* --- Schatten (weich, leicht petrol getönt) ----------------------------- */
  --schatten-s: 0 1px 2px rgb(11 58 64 / 0.06), 0 4px 12px -6px rgb(11 58 64 / 0.12);
  --schatten-m: 0 1px 2px rgb(11 58 64 / 0.05), 0 12px 30px -12px rgb(11 58 64 / 0.2);
  --schatten-l: 0 2px 6px rgb(11 58 64 / 0.06), 0 24px 56px -20px rgb(11 58 64 / 0.28);

  /* --- Bewegung ---------------------------------------------------------- */
  --dauer-kurz: 160ms;
  --dauer-mittel: 320ms;
  --dauer-lang: 700ms;
  --kurve-weich: cubic-bezier(0.22, 0.8, 0.3, 1);

  /* --- Ebenen ------------------------------------------------------------ */
  --ebene-kopf: 50;
  --ebene-menue: 60;
}

/* --- Schriftgrößen-Umschalter (A / A+ / A++) --------------------------------
   Klasse am <html>, gesetzt per JS nur nach aktiver Wahl. Alles ist rem-basiert,
   Layout-Wechsel laufen über Container Queries in rem und wachsen daher mit. */
html.schrift-gross { font-size: 117.5%; }
html.schrift-sehr-gross { font-size: 135%; }