/* PROBE-Portal: Design-Tokens (Anhang C 2.1, 2.3, 2.4) und Schriften.
   Text nur in dunklen Toenen; helle Tuerkis-/Gruentoene und #F58220 nur fuer Flaechen, Linien und Grafik. */

@font-face { font-family: "Frutiger LT Com"; font-weight: 300; font-style: normal; font-display: swap;
  src: url("../fonts/frutiger-300.93db4ad2e56c.woff2") format("woff2"); }
@font-face { font-family: "Frutiger LT Com"; font-weight: 400; font-style: normal; font-display: swap;
  src: url("../fonts/frutiger-400.875ea428f8b0.woff2") format("woff2"); }
@font-face { font-family: "Frutiger LT Com"; font-weight: 700; font-style: normal; font-display: swap;
  src: url("../fonts/frutiger-700.a27ce0a86029.woff2") format("woff2"); }
@font-face { font-family: "Source Code Pro"; font-weight: 500; font-style: normal; font-display: swap;
  src: url("../fonts/source-code-pro-500.a730ff7737f9.woff2") format("woff2"); }

:root {
  /* Schriften */
  --font-sans: "Frutiger LT Com", Arial, Helvetica, sans-serif;
  --font-mono: "Source Code Pro", "DejaVu Sans Mono", Consolas, monospace;
  --fw-light: 300; --fw-regular: 400; --fw-bold: 700;

  --fs-xs:   0.8125rem;  /* 13 px: Fusszeile, Metazeilen, Admin-Nebeninfo */
  --fs-sm:   0.875rem;   /* 14 px: Hilfetexte, Admin-Tabellen */
  --fs-base: 1rem;       /* 16 px: Fliesstext, Labels, Eingaben */
  --fs-md:   1.125rem;   /* 18 px: Einleitung (lead) */
  --fs-lg:   1.375rem;   /* 22 px: h2 Abschnitt */
  --fs-xl:   1.75rem;    /* 28 px: h1 Seite (mobil 1.5rem) */
  --fs-2xl:  2.75rem;    /* 44 px: Wortmarke PROBE im Band (mobil 2rem) */

  --lh-tight: 1.2; --lh-base: 1.5; --lh-loose: 1.6;
  --tracking-wordmark: 0.18em;
  --tracking-eyebrow: 0.12em;
  --measure: 68ch;

  /* Text */
  --c-text:          #17242E;
  --c-text-strong:   #0B3F57;
  --c-text-muted:    #3E5164;
  --c-text-subtle:   #4F717F;
  --c-placeholder:   #5E7682;
  --c-link:          #005B7F;
  --c-text-inverse:  #FFFFFF;
  --c-text-inverse-muted: #BEDDE0;
  --c-eyebrow-inverse:    #CFEAE6;
  --c-accent-inverse:     #5CD3D8;

  /* Flaechen */
  --c-bg:            #FFFFFF;
  --c-surface:       #F3F7F8;
  --c-surface-2:     #F7F9FA;
  --c-selected:      #E4F0F3;
  --c-info-bg:       #EEF6F8;
  --c-footer-bg:     #0B3F57;
  --c-neutral-bg:    #F1F5F7;

  /* Linien und Bedienelemente */
  --c-line:          #DCE5E9;
  --c-line-strong:   #A9BBC3;
  --c-control:       #6C8591;
  --c-control-hover: #3E5164;

  /* Aktion */
  --c-primary:       #005B7F;
  --c-primary-hover: #0B3F57;
  --c-focus:         #0B3F57;
  --c-focus-inverse: #FFFFFF;

  /* Zustaende: Text / Flaeche / Linie */
  --c-error:         #B3261E;  --c-error-bg:   #FDEDEC;  --c-error-line:   #B3261E;
  --c-success:       #0E6B55;  --c-success-bg: #E0F2EE;  --c-success-line: #179C7D;
  --c-warning:       #8A4A0B;  --c-warning-bg: #FFF6EE;  --c-warning-line: #F58220;
  --c-info:          #0B3F57;                            --c-info-line:    #157F9B;

  /* Marke: nur Flaechen, Linien, Verlaeufe, Grafik */
  --c-brand-navy:    #0B3F57;
  --c-brand-blue:    #005B7F;
  --c-brand-teal:    #157F9B;
  --c-brand-cyan:    #39C1CD;
  --c-brand-mint:    #6FDCD1;
  --c-brand-green-2: #2BAE93;
  --c-brand-fhg:     #179C7D;
  --c-brand-orange:  #F58220;
  --c-staging-bg:    #FFEFDD;

  --g-band: linear-gradient(120deg, #0B3F57 0%, #005B7F 22%, #157F9B 40%,
            #39C1CD 58%, #6FDCD1 66%, #2BAE93 80%, #179C7D 100%);
  --g-band-veil: linear-gradient(120deg, rgba(3,28,40,.86) 0%, rgba(3,28,40,.68) 30%,
            rgba(4,40,54,.42) 55%, rgba(4,40,54,.13) 78%, rgba(4,40,54,0) 100%);
  --g-line: linear-gradient(90deg, #0B3F57 0%, #005B7F 22%, #157F9B 40%,
            #39C1CD 58%, #6FDCD1 66%, #2BAE93 80%, #179C7D 100%);
  --g-band-mobile: linear-gradient(160deg, #0B3F57 0%, #005B7F 60%, #157F9B 100%);

  /* Abstaende, Radien, Linien, Raster */
  --sp-1: 0.25rem; --sp-2: 0.5rem; --sp-3: 0.75rem; --sp-4: 1rem;
  --sp-5: 1.5rem;  --sp-6: 2rem;   --sp-7: 3rem;    --sp-8: 4rem;

  --r-sm: 4px;
  --r-md: 6px;
  --r-pill: 999px;

  --bw: 1px; --bw-strong: 2px; --bw-accent: 4px;
  --focus-ring: 3px solid var(--c-focus); --focus-offset: 2px;

  --w-form: 44rem;
  --w-page: 60rem;
  --w-admin: 96rem;
  --gutter: clamp(1rem, 4vw, 2rem);
  --target-min: 44px;
  --target-min-inline: 24px;
}