@import url('./tokens.css');
@import url('./main-layout.css');
@import url('./views/angelegte-fälle-view.css');
@import url('./views/k-is-suche-view.css');
@import url('./views/aktueller-fall-view.css');
@import url('./views/aktueller-fall-v2-view.css');
@import url('./views/dashboard-view.css');
@import url('./views/stationsboard-view.css');
@import url('./views/pfad-editor-view.css');

/* =========================================================================
   Marken-Schriftart "Manrope" (wie copimed.de) – lokal gehostet
   (kein externer CDN / DSGVO). Dateien unter ./fonts/ (WOFF2).
   font-display: swap => kein Text-Flash.
   ========================================================================= */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('./fonts/manrope-latin-400-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('./fonts/manrope-latin-500-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('./fonts/manrope-latin-600-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('./fonts/manrope-latin-700-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url('./fonts/manrope-latin-800-normal.woff2') format('woff2');
}

/* =========================================================================
   Zentrale Design-Tokens (Lumo-Variablen).
   WICHTIG: Hier werden NUR neutrale/strukturelle Tokens angefasst.
   Die MDR-relevanten Status-/Timer-/Checklisten-Farben liegen in
   main-layout.css bzw. copi-animations.css und bleiben unveraendert.
   ========================================================================= */
html {
  /* Primaerfarbe (unveraendert) + abgeleitete Transparenzstufen */
  --lumo-primary-color: hsl(214, 89%, 23%);
  --lumo-primary-color-50pct: hsla(214, 89%, 23%, 0.5);
  --lumo-primary-color-10pct: hsla(214, 89%, 23%, 0.1);

  /* Marken-Schrift als globale Font-Family */
  --lumo-font-family: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI',
    Roboto, 'Helvetica Neue', Arial, sans-serif;

  /* Weichere, modernere Radien */
  --lumo-border-radius-s: 6px;
  --lumo-border-radius-m: 10px;
  --lumo-border-radius-l: 16px;

  /* Dezentere, weichere Schatten (im flachen Website-Stil) */
  --lumo-box-shadow-xs: 0 1px 2px 0 rgba(20, 40, 80, 0.08);
  --lumo-box-shadow-s: 0 2px 6px -1px rgba(20, 40, 80, 0.10);
  --lumo-box-shadow-m: 0 4px 16px -4px rgba(20, 40, 80, 0.14);
  --lumo-box-shadow-l: 0 8px 28px -6px rgba(20, 40, 80, 0.18);

  /* Ruhigerer, leicht blaustichig-neutraler Seitenhintergrund */
  --lumo-shade-5pct: rgba(20, 40, 80, 0.04);
  --lumo-shade-10pct: rgba(20, 40, 80, 0.07);

  /* -----------------------------------------------------------------------
     Touch-first Density: die App laeuft im klinischen Landscape-Tablet-
     Einsatz (teils mit Handschuhen). Komponenten-Groessen werden global
     angehoben, damit Tap-Ziele verlaesslich ~44-48px erreichen.
     --lumo-size-* steuert die Hoehe von Buttons/Feldern; --lumo-icon-size-*
     die Icon-Groessen. (Nur Groessen/Abstaende – keine Farben/Logik.)
     ----------------------------------------------------------------------- */
  --lumo-size-xl: 4rem;
  --lumo-size-l: 3.25rem;
  --lumo-size-m: 2.75rem;      /* Standard-Feld-/Buttonhoehe: 44px */
  --lumo-size-s: 2.25rem;
  --lumo-size-xs: 1.875rem;

  --lumo-icon-size-m: 1.75rem;
  --lumo-icon-size-s: 1.375rem;
  --lumo-icon-size-l: 2.25rem;
}

/* Typografie-Hierarchie: klarere, konsistente Ueberschriften.
   (rein optisch – keine Layout-/Funktionsaenderung)
   Die Abstaende sind hier zentral definiert, damit nicht jede View eigene
   Magic-Werte setzt (vorher u.a. 40px / 80px / 150px je Ansicht). */
h1, h2, h3, h4, h5, h6 {
  letter-spacing: -0.01em;
  margin-top: var(--lumo-space-l);
  margin-bottom: var(--lumo-space-s);
}
h1 { font-weight: 700; }
h2, h3 { font-weight: 600; }
h4 { font-weight: 600; }

/* Die erste Ueberschrift eines Containers braucht oben keinen Abstand. */
h1:first-child, h2:first-child, h3:first-child,
h4:first-child, h5:first-child, h6:first-child {
  margin-top: 0;
}