:root {
  /* Farben – Basis */
  --blue-dark:    #155a89;
  --blue-mid:     #1f6fa6;
  --blue-light:   #f0f9ff;

  --bg:           #f6f9fe;
  --surface:      #ffffff;
  --border:       #d9e2ec;

  --text:         #0f172a;
  --muted:        #5b6778;
  --shell-text:   #ffffff;

  /* Interaktive Zustände */
  --focus:        rgba(31, 111, 166, 0.18);

  /* Statusfarben */
  --ok:           #0a7a0a;
  --err:          #b00020;

  --green:        #16a34a;
  --green-bg:     #f0fdf4;
  --red:          #dc2626;
  --red-bg:       #fef2f2;

  /* Zusatzfarben */
  --shell-bg:     #0f3d5e;
  --badge-bg:     #dceefa;
  --badge-text:   #155a89;

  /* Portal-/Kachel-Farben */
  --stripe-mgmt:  #155a89;
  --stripe-med:   #1f6fa6;
  --stripe-learn: #2c8cbf;

  /* Form / Layout */
  --radius:       0.75rem;
  --tile-min:     185px;

  /* Schatten */
  --shadow-card:  0 2px 8px rgba(15, 23, 42, 0.08), 0 0 0 1px rgba(15, 23, 42, 0.04);
  --shadow-tile:  0 2px 8px rgba(15, 23, 42, 0.08), 0 0 0 1px rgba(15, 23, 42, 0.04);
  --shadow-hover: 0 8px 24px rgba(21, 90, 137, 0.22), 0 0 0 2px var(--blue-dark);

  /* Optional: wiederkehrende direkte Farbtöne aus Komponenten */
  --white:        #ffffff;
  --black:        #000000;

  --border-info:  #bae6fd;
  --border-ok:    #86efac;
  --text-ok:      #166534;

  --bg-error:     #fff1f2;
  --border-error: #fca5a5;
  --text-error:   #9f1239;

  --border-red:   #fecaca;
  --border-green: #bbf7d0;

  --thumb-shadow: 0 4px 12px rgba(15, 23, 42, 0.18);
  --overlay-dark: rgba(0, 0, 0, 0.82);
}