/* =============================================================
   Rettungsdienst Spree-Neiße GmbH — Design-Tokens
   Übernommen aus dem Corporate-Design-Styleguide (Stand 08/2026).
   Farbwerte, Schriftzuordnung und Regeln unverändert; die
   Schriftgrößen sind für eine Anwendungsoberfläche kompakter
   gesetzt als die Website-Werte (dort H1 60px).

   Schriften liegen lokal — der Styleguide untersagt die
   Live-Verbindung zu Google-Servern (Datenschutz).
   ============================================================= */

/* ---- Schriften, lokal eingebunden ---- */
@font-face {
  font-family: "Barlow Semi Condensed";
  src: url("../assets/spn/barlow-semi-condensed-400.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Barlow Semi Condensed";
  src: url("../assets/spn/barlow-semi-condensed-500.woff2") format("woff2");
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Barlow Semi Condensed";
  src: url("../assets/spn/barlow-semi-condensed-600.woff2") format("woff2");
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Barlow Semi Condensed";
  src: url("../assets/spn/barlow-semi-condensed-700.woff2") format("woff2");
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Barlow Condensed";
  src: url("../assets/spn/barlow-condensed-400.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Barlow Condensed";
  src: url("../assets/spn/barlow-condensed-500.woff2") format("woff2");
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Lato";
  src: url("../assets/spn/lato-400.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Lato";
  src: url("../assets/spn/lato-700.woff2") format("woff2");
  font-weight: 700; font-style: normal; font-display: swap;
}

:root {
  /* ---- Kernfarben (Styleguide Kapitel 02) ---- */
  --spn-blau:    #004799;   /* Primär: Überschriften, Navigation, Links */
  --spn-rot:     #BC1010;   /* Signal: Primär-Buttons, aktiv — sparsam */
  --spn-marine:  #08236A;   /* Flächen, Overlay, theme-color */
  --spn-tief:    #061746;   /* Fließtext auf Weiß, nie reines Schwarz */
  --spn-wein:    #751834;   /* Verlaufsende */
  --spn-weiss:   #FFFFFF;

  /* Tints, ausschließlich auf Weiß */
  --spn-blau-10: #E6ECF5;
  --spn-blau-20: #CCDAEB;
  --spn-blau-40: #99B5D6;
  --spn-rot-8:   #FBEDED;
  --spn-meta:    #5A6B8C;   /* Metainformationen */

  --spn-flaeche-dunkel: rgba(255,255,255,.06);
  --spn-rahmen-dunkel:  rgba(255,255,255,.14);
  --spn-verlauf: linear-gradient(100deg, #08236A 0%, #08236A 45%, #751834 100%);

  --spn-gruen:   #0B6B3A;   /* Bestätigung */

  /* ---- Typografie (Styleguide Kapitel 03) ---- */
  --spn-font-display: "Barlow Semi Condensed", "Arial Narrow", Helvetica, sans-serif;
  --spn-font-subline: "Barlow Condensed", "Arial Narrow", Helvetica, sans-serif;
  --spn-font-text:    Lato, "Helvetica Neue", Helvetica, Arial, sans-serif;

  /* Für die Oberfläche kompakter als die Website-Werte */
  --spn-h1: 30px;
  --spn-h2: 22px;
  --spn-h3: 17px;
  --spn-text: 15px;
  --spn-text-klein: 13px;
  --spn-label: 11px;
  --spn-zeilenabstand: 1.55;   /* Website: 1.7, hier dichter für Listen */
  --spn-sperrung: 0.08em;      /* Buttons und Labels */

  /* ---- Raster (Styleguide Kapitel 04) ---- */
  --spn-raster: 8px;
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 16px;
  --sp-4: 24px;
  --sp-5: 32px;
  --sp-6: 48px;
  --spn-gutter: 24px;
  --spn-radius: 0px;           /* Systemwert */
  --spn-radius-kachel: 6px;    /* nur Kennzahl-Kacheln */
  --spn-header: 64px;

  /* ---- Bewegung ---- */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast: 160ms;
  --dur: 300ms;

  /* ---- Ebenen ---- */
  --z-nav: 50;
  --z-overlay: 80;
}