/* ═══════════════════════════════════════════════════════════════════════
   GRC_theme.css — Designsystem Risk Control
   Stand 24.07.2026 · helle Fassung, von Yilmaz festgelegt
   ───────────────────────────────────────────────────────────────────────
   EINE Quelle für Farben, Größen und Abstände. Vorher lag die Palette
   achtmal im Bestand — in jeder Seite eine eigene Kopie. Jede Anpassung
   kostete acht Änderungen und bot acht Gelegenheiten zur stillen Drift.
   Dieselbe Lehre wie bei GRC_nav.js und _headers.

   Einbinden als ERSTES Stylesheet, vor dem seiteneigenen <style>:
     <link rel="stylesheet" href="/GRC_theme.css">

   CSP: durch style-src 'self' abgedeckt, keine Regeländerung nötig.
   Deploy: gehört dauerhaft in JEDEN Satz. Fehlt die Datei, verlieren
   alle Seiten Farben und Maße — der Vollständigkeits-Check fängt das ab.
   ═══════════════════════════════════════════════════════════════════════ */

:root{

  /* ── FARBEN ──────────────────────────────────────────────────────────
     Grundsatz: Die Akzentfarbe trägt NUR Handlung und Herkunft
     (Paketname, Knopf, Marke). Preise, Zahlen und Fließtext stehen
     neutral dunkel. Dadurch wirkt die Oberfläche sachlich statt werblich.
     Gold ist gegenüber der dunklen Fassung abgedunkelt (#C9A84C → #8A6A15):
     der helle Originalton erreicht auf Weiß nur 2,1:1 und ist unlesbar. */
  --bg:            #F4F6F9;   /* Seitengrund, kühles Hellgrau         */
  --surface:       #FFFFFF;   /* Karten und Flächen                   */
  --card:          #FFFFFF;   /* eingelassene Bereiche — bewusst WEISS:
                                 #F8FAFC lag nur 3 % neben Weiss und las sich
                                 als schmutziges Weiss statt als eigene Ebene.
                                 Die Abgrenzung traegt jetzt allein der Rahmen. */
  --border:        #E3E8EF;   /* Haarlinien                           */
  --text:          #0F1D2E;   /* Fließtext, Zahlen — 17,0:1 auf Weiß  */
  --muted:         #5A6B80;   /* Nebentext        —  5,5:1 auf Weiß   */
  --accent:        #8A6A15;   /* Marke, Handlung  —  5,1:1 auf Weiß   */
  --accent-soft:   #FAF5E6;   /* Gold-Unterlegung                     */
  --accent2:       #2A5C8A;   /* zweite Auszeichnung, sparsam         */
  --success:       #0E7A4D;   /* Ersparnis        —  4,8:1            */
  --success-soft:  #E9F5EF;
  /* Meldungsfarben fuer TEXT. Sie sind bewusst dunkler als die
     gleichnamigen Ampelfarben: --sev-orange (#E85D04) erreicht als
     Schrift auf Weiss nur 3,5:1 und waere unlesbar. Ampelfarben
     tragen Flaechen, Meldungsfarben tragen Buchstaben. */
  --warn:          #B4530A;   /* Warnhinweis      —  5,0:1            */
  --danger:        #A8110A;   /* Fehlermeldung    —  7,6:1            */
  --danger-soft:   #FCEDEC;

  /* ── AMPELN — Produkt-Identität, das Warnsystem ──────────────────────
     Durchgerechnet, nicht geschätzt: kleinster Farbabstand 100 zwischen
     den vier Stufen, 95 zum Markengold. Eine erste Variante hatte
     Gelb/Orange bei 67 und Orange/Rot bei 60 — die Stufen wären
     verschwommen.
     WICHTIG: Diese Farben tragen die LAMPE, nicht den Text. Als
     Textfarbe erreichen Grün, Gelb und Orange auf Weiß nur 3,4 / 2,3 /
     3,6 zu 1 und sind unlesbar; Orange läge zudem zu nah am Markengold.
     Beschriftungen stehen deshalb neutral — nur Rot darf farbig sein
     (4,98:1), weil dort zusätzliche Dringlichkeit gerechtfertigt ist. */
  --sev-green:  #0F8F52;
  --sev-yellow: #F5C518;
  --sev-orange: #E85D04;
  --sev-red:    #A8110A;
  /* Symbolfarbe INNERHALB der Lampe, je Stufe einzeln gemessen.
     Ein pauschal dunkles Symbol wäre auf Rot bei 3,4:1 fast unsichtbar. */
  --on-green:  #FFFFFF;   /* 4,14:1 */
  --on-yellow: #0F1D2E;   /* 10,43:1 */
  --on-orange: #0F1D2E;   /* 4,86:1 */
  --on-red:    #FFFFFF;   /* 7,64:1 */

  /* ── SCHRIFT ─────────────────────────────────────────────────────────
     Eine Familie in zwei Stärken. Die frühere Anzeigeschrift (Syne)
     entfiel auf Yilmaz-Vorgabe: ihre Ziffern waren bei fetter
     Auszeichnung schwer zu lesen — und diese Oberfläche zeigt vor allem
     Zahlen. DM Sans hat klare Ziffern und trägt beide Rollen. */
  --f:  'DM Sans', system-ui, -apple-system, sans-serif;
  --fd: 'DM Sans', system-ui, -apple-system, sans-serif;

  /* Größenstufen. Vorher 13 Werte mit Zwischengrößen wie 1,0625rem —
     gewachsen, nicht entworfen. Jetzt acht Stufen mit klaren Rollen.
     Grundgröße 15px, deshalb sind die Pixelwerte krumm; das ist gewollt
     und auf allen Seiten identisch. */
  --t-display: 2.25rem;    /* Preis, große Zahl        34 px */
  --t-title:   1.75rem;    /* Seitenüberschrift        26 px */
  --t-head:    1.375rem;   /* Paketname, Abschnitt     21 px */
  --t-sub:     1.125rem;   /* Kartenüberschrift        17 px */
  --t-lead:    1rem;       /* hervorgehobener Text     15 px */
  --t-body:    .875rem;    /* Fließtext                13 px */
  --t-small:   .75rem;     /* Nebentext                11 px */
  --t-micro:   .6875rem;   /* Etiketten, Fußnoten      10 px */

  --w-normal: 400;
  --w-medium: 700;   /* Beschriftungen, Knöpfe */
  --w-strong: 800;   /* Überschriften, Zahlen  */

  /* ── ABSTÄNDE ────────────────────────────────────────────────────────
     Vorher 21 verschiedene Werte, darunter .1rem, .15rem, .3rem und
     .4rem — Einzelfälle ohne System. Jetzt neun Stufen. */
  --s-1: .25rem;
  --s-2: .375rem;
  --s-3: .5rem;
  --s-4: .75rem;
  --s-5: 1rem;
  --s-6: 1.25rem;
  --s-7: 1.5rem;
  --s-8: 2rem;
  --s-9: 2.5rem;

  /* ── RADIEN ──────────────────────────────────────────────────────────
     Vorher sechs kaum unterscheidbare Werte zwischen .375 und 1rem. */
  --r-s: .5rem;      /* Knöpfe, Etiketten  */
  --r-m: .75rem;     /* eingelassene Felder */
  --r-l: 1rem;       /* Karten             */
  --r-pill: 999px;
  --r-round: 50%;

  /* ── ERHEBUNG ────────────────────────────────────────────────────────
     Auf hellem Grund heben sich Flächen durch Schatten, nicht durch
     Leuchten — ein Glühen gehört zu dunklen Oberflächen und wirkt auf
     Weiß schmutzig. */
  --shadow-s: 0 1px 2px rgba(15,29,46,.06);
  --shadow-m: 0 4px 16px rgba(15,29,46,.07);
}

/* ═══ GRUNDVERHALTEN ═══════════════════════════════════════════════════ */

*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0 }

html{ font-size:15px }

body{
  font-family:var(--f);
  background:var(--bg);
  color:var(--text);
  min-height:100dvh;
  -webkit-font-smoothing:antialiased;
}

button{ font:inherit; cursor:pointer; border:none; background:none; color:inherit }
a{ color:var(--accent) }
[hidden]{ display:none !important }

/* Sichtbarer Tastatur-Fokus. Wer ohne Maus bedient, muss sehen, wo er
   steht — auf der Preisseite fehlte das bisher ganz. Der Ring liegt
   außerhalb des Elements, damit er nichts überdeckt. */
*:focus-visible{
  outline:2px solid var(--accent);
  outline-offset:2px;
  border-radius:var(--r-s);
}

/* Wer im Betriebssystem weniger Bewegung eingestellt hat, hat meist
   einen Grund dafür — Schwindel, Migräne, Reizempfindlichkeit. Der
   Ladekreisel drehte sich bisher trotzdem. */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
    scroll-behavior:auto !important;
  }
}

/* Berührungsflächen: 44px ist die kleinste Fläche, die sich auf einem
   Telefon zuverlässig treffen lässt. Gilt für alles Anklickbare. */
@media (pointer: coarse){
  button, a[role="button"], .tier-cta, .btn{ min-height:44px }

  /* Texteingaben mindestens 16px. Safari auf dem iPhone zoomt die Seite
     automatisch hinein, sobald ein Eingabefeld mit kleinerer Schrift
     angetippt wird — der Nutzer muss nach jedem Feld herauszoomen.
     ABSOLUTE 16px, NICHT 1rem: die Wurzel steht auf 15px (Zeile 127),
     1rem waere hier 15px und damit weiter unter der Schwelle. Safaris
     Grenze ist absolut; eine Untergrenze fuer Bedienbarkeit darf nicht
     an der Design-Skala haengen, die sich aendern kann.
     :not(checkbox):not(radio) — die beiden nehmen keinen Text entgegen,
     loesen den Zoom also nicht aus. Sie mitzunehmen wuerde 7 Kaestchen
     veraendern und kein einziges Zoom-Problem loesen.
     !important ist Absicht: die Seitenregel .field input[type="text"]
     hat hoehere Spezifitaet UND steht spaeter im Dokument — ohne
     !important bliebe die Zeile aus zwei Gruenden wirkungslos.
     Gilt nur fuer Zeigegeraete ohne Maus; am Schreibtisch unveraendert. */
  input:not([type="checkbox"]):not([type="radio"]),
  textarea, select{ font-size:16px !important }
}