* {
  :root {
    --bg: #f1f5f9; /* etwas weniger „blau-stichig“, ruhiger Hintergrund */
    --white: #ffffff;

    /* Navigation: dunkler für besseren Kontrast */
    --nav: #0f172a;
    --nav-hover: #1e293b;

    /* Primary: etwas dunkler für besseren Kontrast auf Weiß */
    --primary: #1d4ed8;
    --primary-hover: #1e40af;

    /* Text: deutlich dunkler (wichtig für Accessibility) */
    --text: #0f172a;
    --text-light: #334155;

    /* Border: etwas stärker sichtbar */
    --border: #cbd5e1;
  }

  /* =========================
     Body
  ========================= */

  body {
    font-family: "Segoe UI", Arial, sans-serif;
    background-color: var(--bg);
    color: var(--text);
  }

  /* =========================
     Header / Nav
  ========================= */

  header,
  nav {
    background-color: var(--nav);
  }

  /* =========================
     Links
  ========================= */

  a {
    color: var(--primary);
    transition: 0.25s ease;
  }

  a:hover {
    color: var(--primary-hover);
    text-decoration: underline; /* wichtig für Screenreader + Klarheit */
  }

  /* =========================
     Navigation Links
  ========================= */

  nav a {
    color: #f8fafc;
    border-radius: 10px;
  }

  nav a:hover {
    background-color: var(--nav-hover);
    color: #ffffff;
  }

  /* =========================
     Buttons
  ========================= */

  button {
    background-color: var(--primary);
    color: white;
    border-radius: 12px;
    font-weight: 600;
    transition: 0.25s ease;
  }

  /* klarer Hover-Kontrast */

  button:hover {
    background-color: var(--primary-hover);
    transform: translateY(-2px);
  }

  /* Tastatur-Fokus (SEHR wichtig für Accessibility) */

  button:focus,
  nav a:focus,
  input:focus {
    outline: 3px solid #93c5fd;
    outline-offset: 2px;
  }

  /* =========================
     Inputs
  ========================= */

  input[type="text"],
  input[type="search"] {
    border: 1px solid var(--border);
    border-radius: 12px;
    background-color: white;
    color: var(--text);
  }

  /* =========================
     Texte
  ========================= */

  p {
    color: var(--text-light);
    line-height: 1.8;
    font-size: 1.08rem;
  }
}