/* ==========================================================================
   CareMobil gGmbH — Design-Tokens
   Version 2.0, September 2026. Abgeleitet aus dem Logo.
   Vollständige Beschreibung: brand/DESIGN.md
   Kontrastwerte in den Kommentaren, geprüft gegen WCAG 2.2 AA.
   ========================================================================== */

:root {

  /* --- Flächen ----------------------------------------------------------- */
  --cm-himmel:        #F6F9FC;  /* Seitengrund. NICHT durch Weiß ersetzen. */
  --cm-papier:        #FFFFFF;  /* Karten, Felder, alles Schwebende */
  --cm-blau-zart:     #EFF5FA;  /* abgesetzte Sektionen */
  --cm-blau-hell:     #E4EEF7;  /* hervorgehobene Karten, aktive Zustände */
  --cm-gruen-hell:    #EBF2E1;  /* Icon-Flächen */
  --cm-blau-tief:     #002B4F;  /* Fußbereich, dunkle Sektionen. Weiß darauf 14,4:1 */

  /* --- Aktion ------------------------------------------------------------ */
  --cm-blau:          #0058A0;  /* Primäraktion, Links. Weiß darauf 7,2:1 */
  --cm-blau-dunkel:   #004176;  /* Hover. Weiß darauf 10,4:1 */
  --cm-gruen-aktion:  #54792C;  /* Sekundäraktion = Anruf. Weiß darauf 5,1:1 */
  --cm-gruen-tief:    #41601F;  /* Hover. Weiß darauf 7,2:1 */

  /* --- Marke, nie klickbar ----------------------------------------------- */
  --cm-gruen:         #83B544;  /* Icons, Illustration. NIE Text, NIE Buttonfläche. */
  --cm-sonne:         #FDC65B;  /* Sonne im Logo. Auf der Oberflaeche derzeit ohne
                                   Verwendung, siehe DESIGN.md. NIE Textfarbe. */
  --cm-himmelblau:    #B0C9DB;  /* Illustration, Stadtsilhouette */

  /* --- Text -------------------------------------------------------------- */
  --cm-tinte:         #16212B;  /* Fließtext. Auf Himmel 15,5:1 */
  --cm-tinte-2:       #3E4C59;  /* betonter Sekundärtext. 8,3:1 */
  --cm-tinte-3:       #5A6874;  /* Hilfetext, Bildunterschriften. 5,4:1 */
  --cm-text-invers:   #FFFFFF;
  --cm-text-invers-2: #B0C9DB;  /* Sekundärtext auf Blau tief, 8,4:1 */

  /* --- Struktur ---------------------------------------------------------- */
  --cm-rahmen-feld:   #7C8B98;  /* Feldrahmen im Ruhezustand. 3,3:1 */
  --cm-rahmen-chip:   #7C8B98;  /* Chip-Rahmen, angehoben auf 3,3:1 (WCAG 1.4.11) */
  --cm-linie:         #DCE4EB;  /* dekorative Trennlinien */
  --cm-linie-invers:  rgba(255, 255, 255, 0.22);  /* Trennlinien auf Blau tief */
  --cm-kiesel:        #A3B0BB;  /* deaktivierte Elemente */

  /* --- Signale ----------------------------------------------------------- */
  --cm-erfolg:        #2A7134;  /* auf Erfolg hell 5,0:1 */
  --cm-erfolg-hell:   #E7F3E9;
  --cm-fehler:        #B32424;
  --cm-fehler-hell:   #FBEAEA;

  /* --- Typografie -------------------------------------------------------- */
  --cm-font: "Source Sans 3", "Segoe UI", system-ui, -apple-system,
             "Helvetica Neue", Arial, sans-serif;

  --cm-fs-display: clamp(2.5rem,  1.9rem + 2.6vw, 3.75rem);  /* 40 → 60 px */
  --cm-fs-h2:      clamp(1.75rem, 1.5rem + 1.1vw, 2.375rem); /* 28 → 38 px */
  --cm-fs-h3:      clamp(1.375rem, 1.28rem + 0.4vw, 1.6875rem); /* 22 → 27 px */
  --cm-fs-h4:      1.25rem;    /* 20 px */
  --cm-fs-lead:    1.3125rem;  /* 21 px */
  --cm-fs-body:    1.125rem;   /* 18 px — Basis, bewusst über dem Üblichen */
  --cm-fs-klein:   1rem;       /* 16 px */
  --cm-fs-control: 1.0625rem;  /* 17 px — Buttons, Felder, Chips, siehe DESIGN.md */
  --cm-fs-mini:    0.875rem;   /* 14 px, Bildunterschriften und Rechtstexte */

  --cm-lh-display: 1.1;
  --cm-lh-titel:   1.2;
  --cm-lh-text:    1.65;

  --cm-fw-normal:  400;
  --cm-fw-halb:    600;
  --cm-fw-fett:    700;

  --cm-ls-titel:    0.01em;

  /* --- Abstände, Vielfache von 4 ----------------------------------------- */
  --cm-s-1:  0.25rem;   /*   4 */
  --cm-s-2:  0.5rem;    /*   8 */
  --cm-s-3:  0.75rem;   /*  12 */
  --cm-s-4:  1rem;      /*  16 */
  --cm-s-5:  1.5rem;    /*  24 */
  --cm-s-6:  2rem;      /*  32 */
  --cm-s-7:  3rem;      /*  48 */
  --cm-s-8:  4rem;      /*  64 */
  --cm-s-9:  6rem;      /*  96 */
  --cm-s-10: 8rem;      /* 128 */

  --cm-sektion-y:    clamp(5rem, 3.5rem + 5vw, 7.5rem);  /* 80 → 120 px, auf Wunsch luftiger */
  --cm-karte-pad:    clamp(2rem, 1.6rem + 1.2vw, 2.5rem); /* 32 → 40 px */
  --cm-welle-hoehe:  clamp(20px, 3.4vw, 48px);  /* geschwungene Sektionsübergänge */
  --cm-breite-max:   82.5rem; /* 1320 px, auf Wunsch etwas breiter als die 1200 px in DESIGN.md */
  --cm-breite-text:  40rem;   /*  640 px, rund 70 Zeichen */

  /* --- Radien ------------------------------------------------------------ */
  --cm-r-s:    8px;   /* kleine Marker und verschachtelte Elemente */
  --cm-r-m:   20px;   /* Felder, Kacheln, Bilder — auf Wunsch mit den Karten vereinheitlicht */
  --cm-r-l:   20px;   /* Karten und Flächen */
  --cm-r-voll: 999px; /* Kopfleiste, Buttons, Chips */

  /* --- Schatten, blau getönt --------------------------------------------- */
  --cm-schatten-s: 0 1px 3px rgba(0, 43, 79, 0.08);
  --cm-schatten-m: 0 4px 14px rgba(0, 43, 79, 0.09);
  --cm-schatten-l: 0 12px 32px rgba(0, 43, 79, 0.11);

  /* --- Interaktion ------------------------------------------------------- */
  --cm-kopf-hoehe:   88px;  /* schwebende Kopfleiste, der CTA rechts ist genauso hoch */
  --cm-kopf-abstand: 24px;  /* Luft über und unter der schwebenden Leiste */
  --cm-kopf-breite:  calc(var(--cm-breite-max) + 2 * var(--cm-s-7));  /* Leiste breiter als der Inhalt */
  --cm-touch-min:   48px;
  --cm-button-hoch: 56px;
  --cm-btn-pad-x:   26px;   /* Button-Innenabstand, siehe DESIGN.md Primärbutton */
  --cm-feld-pad-x:  18px;   /* Feld-Innenabstand, siehe DESIGN.md Eingabefeld */
  --cm-icon-rund:   44px;   /* runde Icon-Fläche */
  --cm-icon-rund-gross: 64px;

  /* Icongrößen. Vier Stufen, mehr braucht die Seite nicht.
     s  in Zeilen: Buttons, Links, Fehlermeldungen, alles neben Fließtext
     m  neben Überschriften und in der runden Fläche
     l  in Kacheln und in der großen runden Fläche
     xl einmalig, in der Bestätigung nach dem Absenden */
  --cm-icon-s:   20px;
  --cm-icon-m:   24px;
  --cm-icon-l:   32px;
  --cm-icon-xl:  52px;
  --cm-fokus-schein: rgba(0, 88, 160, 0.3);  /* Schein um fokussierte Felder */
  --cm-schleier:     rgba(0, 43, 79, 0.55);   /* Hintergrund hinter Dialogen */
  --cm-fokus-ring:  0 0 0 2px #FFFFFF, 0 0 0 5px #0058A0;  /* weißer Abstand plus Markenblau, schlank */
  --cm-transition:  160ms ease;
}

/* Grundlagen ---------------------------------------------------------------- */

body {
  background: var(--cm-himmel);
  color: var(--cm-tinte);
  font-family: var(--cm-font);
  font-size: var(--cm-fs-body);
  line-height: var(--cm-lh-text);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  line-height: var(--cm-lh-titel);
  letter-spacing: var(--cm-ls-titel);
  text-wrap: balance;
}

/* Fokus bleibt sichtbar, auch bei Tastaturbedienung. Niemals entfernen. */
:is(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: none;
  box-shadow: var(--cm-fokus-ring);
  border-radius: var(--cm-r-s);
}

/* Wer Bewegung reduziert haben will, bekommt keine. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}