:root {
  /* ===== Abstände ===== */
  --container-pad: 3rem;
  --container-pad-mobile: 1.75rem;
  --section-pad-top: 2rem;
  --section-pad-bottom: 2.5rem;
  --section-pad-top-mobile: 1.5rem;
  --section-pad-bottom-mobile: 1.75rem;

  --nav-h: 90px;
  --nav-h-mobile: 72px;
  --menu-center-fix: 4px;
  --mb-btn: 1.25rem;

  /* ===== Farben ===== */

  /* neutrale Farben */
  --white: #fff;
  --black: #1d1d1f;
  --bg-white: rgb(255, 255, 255);
  --bg-off-white: rgb(250, 250, 250);
  --bg-dark: rgb(29, 29, 31);
  --gray-light: rgb(245, 245, 247);
  --gray-on-white: rgb(110,110,115); /* #6e6e73 */
  --gray-on-light-gray: var(--gray-on-white);
  --gray-on-black: rgb(134,134,139);   /* #86868b */
  --gray-on-red: var(--gray-light);
  --gray-medium: var(--gray-on-black);
  --gray-dark: rgb(66,66,69);      /* #424245 */

  /* farbige Farben */
  --yellow: rgb(255,214,0);
  --yellow-light: rgb(254,223,67);
  --orange: rgba(255, 90, 0);
  --orange-light: rgba(255,160,86);
  --red: rgb(233, 21, 45);
  --red-dark: rgb(177, 15, 34);
  --red-light: rgb(255, 36, 81);
  --pink-red: rgb(243, 90, 123);
  --pink: rgb(255, 45, 85);
  --violet: rgb(124, 50, 255);
  --violet-blue: rgb(91, 43, 229);
  --blue-light: rgb(144, 200, 255);
  --bg-blue: rgb(0, 102, 204);
  --turquoise: rgb(20, 125, 137);
  --green: rgb(13, 145, 110);
  --green-dark: rgb(12, 131, 99);


    /* Hintergründe */
  --section-bg: var(--bg-white);
  --section-alt-bg: var(--gray-light);
  --section-red-bg: var(--red-dark);
  --section-blue-bg: var(--bg-blue);

    /* Textfarben */
  --text: var(--black);
  --error: var(--red);
  --success: var(--green);
  --warning: var(--orange);
  --text-light-gray: rgb(210, 210, 215);
  --text-h-blue: rgb(0, 49, 234);
  --text-blue: rgb(0, 102, 204);
  --text-light-blue: var(--blue-light);
  --line-blue: var(--text-blue);
  --text-red: var(--red);
  --text-light-red: var(--red-light);

  /* Buttons */
  --btn-text: var(--red-light);
  --btn-text-hover: var(--white);
  --btn-bg-hover: var(--btn-text);
  --btn-bg-active: var(--btn-bg-hover);
  --btn-border-color: var(--btn-text);
  --btn-focus-color: var(--line-blue);
  --btn-blue: rgb(0, 113, 227);
  --btn-blue-hover: rgb(0, 118, 223);
  --btn-blue-active: rgb(0, 110, 219);
  --btn-red: var(--red);        /* #e9152d */
  --btn-red-hover: rgb(233, 22, 50);  /* #e91632 */
  --btn-red-active: rgb(218, 19, 42); /* #da132a */
  --btn-red-alt: rgb(202, 23, 44);        /* #ca172c */
  --btn-red-alt-hover: rgb(207, 29, 50);  /* #cf1d32 */
  --btn-red-alt-active: rgb(187, 19, 41); /* #bb1329 */

  /* Pills */
  --pill-text: var(--white);
  --pill-bg: var(--gray-medium);
  --pill-bg-hover: var(--btn-red-hover);
  --pill-border: var(--gray-light);

   /* Logo */
  --logo-primary: var(--btn-red-alt);
  --logo-secondary: var(--white);

  /* Schatten */
  --card-shadow: 2px 4px 12px #00000014;
  --card-shadow-hover: 2px 4px 16px #00000029;
  --img-shadow: 1px 2px 14px #00000050;
  --img-shadow-hover: 1px 2px 18px #00000065;
  --btn-shadow: var(--card-shadow, 2px 4px 12px #00000014);
  --btn-shadow-hover: var(--card-shadow-hover, 2px 4px 16px #00000029);

  /* Eckenradius */
  --btn-border-radius: 980px;
  --card-border-radius: 18px;
  --pill-border-radius: 980px;
  --nav-border-radius: 9px;

  /* Bullet-Points */
  --bullet-point-size: 0.35em;

  /* Textgrößen */
  --text-small: 0.875rem;
  --text-x-small: 0.75rem;
}