/* ==========================================================================
   ImmoPass24 — gemeinsame Design-Tokens für Landingpage und Portal
   Richtung 2a "Kobalt — Raster" nach dem Design-Handoff.
   Diese Datei ist die einzige Stelle, an der Farben definiert werden.
   ========================================================================== */
:root{
  /* ---------- Marke ---------- */
  --ip-ink:           #18233c;
  --ip-ink-2:         #24325180;
  --ip-kobalt:        #3357b1;
  --ip-kobalt-hover:  #23459d;
  --ip-kobalt-200:    #c7d1e5;
  --ip-kobalt-300:    #89acfa;
  --ip-kobalt-700:    #455577;

  /* ---------- Flächen und Linien ---------- */
  --ip-paper:         #eceff2;
  --ip-surface:       #ffffff;
  --ip-surface-blue:  #f2f5fb;
  --ip-border:        #d4d8dd;
  --ip-border-soft:   #e1e5ea;

  /* ---------- Text ---------- */
  --ip-text:          #18233c;
  --ip-text-muted:    #4f565e;
  --ip-text-subtle:   #7c8186;

  /* ---------- Ampel ----------------------------------------------------
     Vierstufig, weil die Methodik vier Zustandsstufen kennt. Je Stufe gibt
     es einen kräftigen Ton für Punkte, Ränder und Marken sowie eine
     pastellige Fläche für Hinterlegungen. Auf der Fläche steht immer
     dunkler Text, nie weißer — das hält den Kontrast auch bei Gelb.
     Farbe steht nie allein: neben jeder Fläche steht ein Textlabel.
     -------------------------------------------------------------------- */
  --ip-k1:            #2e9e52;   /* sehr guter Zustand      */
  --ip-k2:            #8fb43f;   /* guter Zustand           */
  --ip-k3:            #e8a200;   /* Instandsetzung nötig    */
  --ip-k4:            #d33b36;   /* kritischer Zustand      */
  --ip-kn:            #d4d8dd;   /* keine Daten, gestrichelt */

  --ip-k1-bg:         #e6f3ea;
  --ip-k2-bg:         #eff4e1;
  --ip-k3-bg:         #fcf1d9;
  --ip-k4-bg:         #fae8e7;
  --ip-kn-bg:         transparent;

  /* Ränder der Pastellflächen, eine Spur kräftiger als die Fläche */
  --ip-k1-li:         #b9dcc5;
  --ip-k2-li:         #d5e2b3;
  --ip-k3-li:         #f0d79a;
  --ip-k4-li:         #eeb9b6;

  /* ---------- Typografie ---------- */
  --ip-font-sans: 'Archivo', -apple-system, 'Segoe UI', Helvetica, Arial, sans-serif;
  --ip-font-mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  /* ---------- Radien ---------- */
  --ip-radius-sm:   2px;
  --ip-radius-md:   4px;
  --ip-radius-pill: 20px;

  /* ---------- Abstände ---------- */
  --ip-space-1: 4px;  --ip-space-2: 8px;  --ip-space-3: 12px;
  --ip-space-4: 16px; --ip-space-5: 24px; --ip-space-6: 32px;
  --ip-space-7: 48px; --ip-space-8: 64px;
}

/* Fokus ist überall sichtbar und wird nie entfernt. */
:where(a,button,input,select,textarea,[tabindex]):focus-visible{
  outline:2px solid var(--ip-kobalt);
  outline-offset:2px;
}

/* Wer Bewegung reduziert haben will, bekommt keine. */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition-duration:0ms!important;animation-duration:0ms!important}
}