/* MySRA – Design-Tokens. Einzige Stelle für Farben, Radien, Abstände, Schrift.
   Seitengerüst 4.0 (Auftrag Stil Swisscom, 13.11.2026, Vorlagen data/ux-referenz/stil/, stil.css):
   Kopfzeile mit Navigation · Seitenkopf im Verlauf · mittige Spalte mit Karten · Fusszeile.
   Blau nur für Bedienung, Türkis und Orange nur für das Ergebnis. Jede Farbe genau eine Bedeutung. */

/* Schrift Source Sans 3, lokal (SIL Open Font License, siehe fonts/OFL-SourceSans3.txt) – seit
   12.11.2026 Platzhalter für TheSans Swisscom (Auftrag Swisscom-Auftritt); wird TheSans Swisscom
   freigegeben, wechselt nur --schrift. Die Inter-Dateien bleiben liegen, werden aber nicht geladen. */
@font-face { font-family: "Source Sans 3"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("fonts/source-sans-3-latin-400-normal.bab398e040a4.woff2") format("woff2"); }
@font-face { font-family: "Source Sans 3"; font-style: normal; font-weight: 600; font-display: swap;
  src: url("fonts/source-sans-3-latin-600-normal.8befd6f435e5.woff2") format("woff2"); }
@font-face { font-family: "Source Sans 3"; font-style: normal; font-weight: 700; font-display: swap;
  src: url("fonts/source-sans-3-latin-700-normal.63a951688119.woff2") format("woff2"); }

:root {
  /* --- Seitengerüst 4.0: Swisscom-Anwendungsstil ------------------------------------------ */
  --navy: #001155;                  /* Titel, Navigation, Fusszeile, Zahlen */
  --band: #001155;                  /* (Name aus 3.x) Navy: Text der Hauptaktion im Seitenkopf */
  --band-grund: #0A1A8C;            /* Grundfarbe unter dem Verlaufsbild des Seitenkopfs */
  --band-verlauf: linear-gradient(105deg, #001155 0%, #0E3E9E 48%, #573CE4 100%);
  --band-leise: #E6ECFA;            /* Nebentext im Seitenkopf */
  --band-linie: rgba(255, 255, 255, 0.3);    /* Linie im Seitenkopf */
  --band-umriss: rgba(255, 255, 255, 0.7);   /* Umriss der Nebenaktionen im Seitenkopf */
  --band-hover: rgba(255, 255, 255, 0.14);   /* Nebenaktion im Seitenkopf mit Maus */
  --band-unterstrich: rgba(255, 255, 255, 0.6);
  --band-feld: rgba(255, 255, 255, 0.08);    /* Adressfeld der Startseite */
  --band-feld-rand: rgba(255, 255, 255, 0.5);
  --weiss: #FFFFFF;
  --tinte: #001155;                 /* Titel (Navy) */
  --text: #333333;                  /* Fliesstext */
  --leise: #666666;                 /* Beschriftung, Nebentext */
  --rand-karte: #BBBBBB;            /* Rand der Karten */
  --rand-feld: #8C8C8C;             /* Rand von Feld, Auswahl, Kästchen */
  --rand-feld-hover: #333333;       /* Feld mit Maus */
  --linie: #E4E9EC;                 /* Zeilen, Abschnitte */
  --linie-leise: #E4E9EC;
  --kopfzeile-linie: #DDE1E5;       /* Linie unter der Kopfzeile */
  --flaeche-1: #F7F8FB;             /* Kartenkopf, Zeile mit Maus */
  --flaeche-2: #EEF2F6;             /* Spaltenkopf, Fazit, Startseite unten, Platzhalter */
  --hellblau: #D9E8F7;              /* Zahl im Kreis, Pille */
  --spalte: #FFFFFF;                /* (Name aus 3.x) rechte Karte: weiss */
  --spalte-rand: #BBBBBB;
  --wahl-flaeche: #FFFFFF;
  --gruppe: #F7F8FB;                /* Gruppenzeile = Fläche 1 */
  --fazit: #EEF2F6;                 /* Fazit = Fläche 2 */
  --aktion: #0445C8;                /* gefüllter Knopf, Links, Pfeile, gewählte Felder, Fokus */
  --aktion-dunkel: #0339A6;         /* Aktion mit Maus */
  --aktion-gefuellt: #0445C8;
  --aktion-hell: #F7F8FB;
  --conf: #1ABBA7;                  /* Confidence-Kreise (Türkis) */
  --conf-text: #001155;             /* Confidence: Wort und Zahl in Navy */
  --conf-band: #FFFFFF;             /* Confidence im Seitenkopf: weiss */
  --gut-grafik: #1ABBA7;            /* gut: Grafik (Balken, Kreise) */
  --gut: #0A7A6C;                   /* gut: Text */
  --schlecht-grafik: #E96F49;       /* schlecht: Grafik */
  --schlecht: #C23B1E;              /* schlecht: Text, Fehlermeldungen */
  --teils: #333333;                 /* teils: keine Farbe */
  --balken-grund: #DDE3E8;          /* Grund im Balken (auch «teils») */
  --teils-ring: #8C8C8C;
  --feld-rand: #8C8C8C;
  --zitat-linie: #BBBBBB;           /* Linie links an Fragen und Zitaten */
  --balken: #DDE3E8;
  --zeile-hover: #F7F8FB;
  --tip: #1A1A1A;                   /* Hinweis (Tooltip) */
  --pfeil-bild: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M3.5 7.5L10 14l6.5-6.5' fill='none' stroke='%230445C8' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");  /* Pfeil in Auswahlfeldern, Aktion-Blau */
  --haken-bild: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 22'%3E%3Cpath d='M5.5 11.5l3.6 3.6 7.4-8' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");  /* Haken im gewählten Kästchen */
  --schatten: 0 4px 16px rgba(0, 17, 85, 0.14);  /* nur Maus auf Karte und schwebende Ebenen */
  /* Spannlinie (Entscheid 06.11.2026): Verlauf über die Skala 1–5 */
  --swisscom-rot: #DD1122;
  --verlauf-mitte: #899F9D;

  /* --- Bestehende Bausteine (Formulare, Dialoge, Stapel, Verwaltung): auf die neuen Werte -- */
  --bg: #EEF2F6;
  --flaeche: #FFFFFF;
  --rand: #BBBBBB;
  --rand-stark: #8C8C8C;
  --text-leise: #666666;
  --text-schwach: #666666;
  --auf-aktion: #FFFFFF;
  --gut-flaeche: #E6F7F4;
  --teils-flaeche: #F7F8FB;
  --schlecht-flaeche: #FDF0EC;
  --neutral-flaeche: #EEF2F6;
  --fuss-flaeche: #F7F8FB;
  --rand-gestrichelt: #B9C2CC;
  --teils-band: #FFF8EA;
  --teils-rand: #F0D9A8;
  --teils-zeile: #FFFBF2;
  --schlecht-rand: #F0C9C5;
  --schlecht-zeile: #FFFBFB;
  --schlecht-band: #FEF4F3;
  --schlecht-linie: #F6D9D6;
  --gut-rand: #B7DFC6;
  --aktion-rand-pille: #B9D3E6;
  --teils-rand-pille: #E9C98F;
  --schlecht-rand-pille: #F0B4AE;
  --schatten-fenster: 0 4px 16px rgba(0, 17, 85, 0.14);
  --aktion-linie: #C3D4E2;
  --teils-rahmen: #E8D5AE;
  --kreis-leer: #BBBBBB;
  --abdunkeln: rgba(18, 22, 27, 0.38);
  --schatten-dialog: 0 4px 16px rgba(0, 17, 85, 0.14);
  --radius-dialog: 8px;
  --treppe-leer: #9AA3AE;
  --na-rand: #8A929E;
  --schatten-schieber: 0 1px 3px rgba(18, 22, 27, 0.14);
  /* Radien */
  --radius: 8px;                    /* Karten, Knöpfe, Felder */
  --radius-karte: 8px;
  --radius-spaltenkopf: 6px;
  --radius-klein: 4px;              /* Kästchen, Hinweis */
  --radius-chip: 999px;
  --radius-lese: 8px;
  --radius-lese-feld: 8px;
  --radius-filter: 8px;
  /* Abstände (4-px-Raster) */
  --a1: 4px; --a2: 8px; --a3: 12px; --a4: 16px; --a5: 20px; --a6: 24px; --a7: 28px; --a8: 32px;
  --a10: 40px; --a12: 48px; --a14: 56px;
  /* Schrift Source Sans 3 (Platzhalter für TheSans Swisscom), sechs Stufen (Seitengerüst 4.0);
     andere Grössen gibt es nicht, nichts unter 14 px (ein Test wacht darüber). */
  --schrift: "Source Sans 3", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --s-neben: 14px;      /* 14/20: Beschriftung, Spaltenkopf, Nebentext */
  --s-text: 16px;       /* 16/24: Text, Bedienung, Navigation */
  --s-lese: 16px;       /* 16/26: Lesetext */
  --s-gross: 18px;      /* 18/29: Einstieg, Fazit, Absatztitel */
  --s-dienst: 22px;     /* 22/28: Kartentitel, Thema, Dienstname; Einstieg im Bericht 22/34 */
  --s-satz-detail: 28px; /* 28/36: Satz auf Detailseiten, Titel von Anmelden und Fehlerseiten */
  --s-satz: 32px;       /* 32/40: Satz auf Listenseiten */
  --s-start: 40px;      /* 40/48: nur der Titel der Startseite */
  --s-start-fliessend: clamp(28px, calc((100vw - 80px) * 0.04), var(--s-start));
  --s-leiste: 14px;     /* (Name aus 3.x) */
  --s-marke: 18px;      /* «MySRA» in der Kopfzeile, 700 */
  --sperrung: 0.07em;
  --zeile-neben: 20px;
  --zeile: 24px;
  --zeile-lese: 26px;
  --kopf-hoehe: 76px;
  --knopf-hoehe: 48px;
  --knopf-klein: 40px;
  /* Breiten */
  --breite-seite: 1264px;   /* mittige Spalte mit 32 px Innenabstand (Inhalt 1200 px) */
  --breite-allein: 1200px;  /* Inhalt ohne rechte Karte */
  --breite-spalte: 384px;   /* rechte Karte */
  --breite-spalte-breit: 400px; /* rechte Karte der Management Summary */
  --breite-formular: 720px; /* Formulare */
  --breite-bericht: 760px;  /* Lesespalte des Berichts */
  --breite-start: 1080px;   /* Startseite */
}