/* Ableitungen + Bootstrap 5 Overrides */
:root{
  /* Farbvarianten (SASS lighten/darken Ersatz) */
  --c1-d5:  color-mix(in srgb, var(--c1) 95%, black 5%);
  --c1-d10: color-mix(in srgb, var(--c1) 90%, black 10%);
  --c2-d5:  color-mix(in srgb, var(--c2) 95%, black 5%);
  --c3-l10: color-mix(in srgb, var(--c3) 90%, white 10%);
  --c3-l15: color-mix(in srgb, var(--c3) 85%, white 15%);
  --c3-d85: color-mix(in srgb, var(--c3) 91.5%, black 8.5%);
  --gray-900-l75: color-mix(in srgb, var(--gray-900) 92.5%, white 7.5%);

  /* Textfarben aus SASS */
  --text-primary: color-mix(in srgb, var(--c1) 80%, black 20%);
  --text-success: color-mix(in srgb, var(--base-success) 80%, black 20%);
  --text-info:    color-mix(in srgb, var(--base-info) 80%, black 20%);
  --text-warning: color-mix(in srgb, var(--base-warning) 80%, black 20%);
  --text-danger:  color-mix(in srgb, var(--base-danger) 80%, black 20%);

  /* Spacing-Skala */
  --space-1: calc(var(--space) * .25);
  --space-2: calc(var(--space) * .5);
  --space-3: calc(var(--space) * .75);
  --space-4: var(--space);
  --space-5: calc(var(--space) * 1.25);
  --space-6: calc(var(--space) * 1.5);
  --space-8: calc(var(--space) * 2);

  /* Headings – aus SASS h1-font-size etc. */
  --h1-size: calc(var(--font-base-size) * var(--h1-factor));
  --h2-size: calc(var(--font-base-size) * var(--h2-factor));
  --h3-size: calc(var(--font-base-size) * var(--h3-factor));
  --h4-size: calc(var(--font-base-size) * var(--h4-factor));
  --h5-size: calc(var(--font-base-size) * var(--h5-factor));
  --h6-size: calc(var(--font-base-size) * var(--h6-factor));

/* Bootstrap 5: zentrale Overrides */
  --bs-body-color: var(--text);
  --bs-body-bg: var(--white);
  --bs-body-font-family: var(--font-base);
  --bs-body-font-size: var(--font-base-size);
  --bs-body-line-height: var(--line-height-base);
  --bs-border-radius: var(--radius);
  --bs-border-radius-sm: var(--radius-sm);
  --bs-border-radius-lg: var(--radius-lg);
  --bs-border-width: var(--border-width);
  --bs-primary: var(--c1);
  --bs-secondary: var(--c2);
  --bs-success: var(--base-success);
  --bs-info: var(--base-info);
  --bs-warning: var(--base-warning);
  --bs-danger: var(--base-danger);
  --bs-light: var(--gray-100);
  --bs-dark: var(--gray-800);
  --bs-link-color: color-mix(in srgb, var(--c4) 85%, black 15%);
  --bs-link-hover-color: color-mix(in srgb, var(--bs-link-color) 85%, black 15%);
  --bs-white: var(--white);
  --bs-black: var(--black);
  --bs-gray: var(--gray-600);
  --bs-gray-dark: var(--gray-800);
  --bs-gray-100: var(--gray-100);
  --bs-gray-200: var(--gray-200);
  --bs-gray-300: var(--gray-300);
  --bs-gray-400: var(--gray-400);
  --bs-gray-500: var(--gray-500);
  --bs-gray-600: var(--gray-600);
  --bs-gray-700: var(--gray-700);
  --bs-gray-800: var(--gray-800);
  --bs-gray-900: var(--gray-900);
  --bs-font-sans-serif: var(--font-sans);
  --bs-font-monospace: var(--font-mono);
  --bs-body-font-weight: 400;

  /* Border-Erweiterungen */
  --bs-border-style: solid;
  --bs-border-color: var(--gray-300);
  --bs-border-color-translucent: rgb(var(--bs-black-rgb, 0, 0, 0) / .175);
  --bs-border-radius-xl: calc(var(--radius-lg) * 1.25)
  --bs-border-radius-xxl: calc(var(--radius-lg) * 1.5);
  --bs-border-radius-2xl: var(--bs-border-radius-xxl);
  --bs-border-radius-pill: 50rem;

  /* Body-/Text-Helfer */
  --bs-emphasis-color: var(--black);
  --bs-secondary-color: rgb(var(--bs-body-color-rgb, 17, 17, 17) / .75);
  --bs-secondary-bg: var(--gray-200);
  --bs-tertiary-color: rgb(var(--bs-body-color-rgb, 17, 17, 17) / .5);
  --bs-tertiary-bg: var(--gray-100);
  --bs-heading-color: inherit;

  /* Links / Code / Highlight */
  --bs-link-decoration: underline;
  --bs-code-color: #d63384;
  --bs-highlight-color: var(--text);
  --bs-highlight-bg: var(--c3-l10);

  /* Bootstrap 5.3 emphasis/subtle */
  --bs-primary-text-emphasis: var(--text-primary);
  --bs-secondary-text-emphasis: var(--gray-700);
  --bs-success-text-emphasis: var(--text-success);
  --bs-info-text-emphasis: var(--text-info);
  --bs-warning-text-emphasis: var(--text-warning);
  --bs-danger-text-emphasis: var(--text-danger);
  --bs-light-text-emphasis: var(--gray-700);
  --bs-dark-text-emphasis: var(--gray-700);

  --bs-primary-bg-subtle: var(--c3-l15);
  --bs-secondary-bg-subtle: var(--gray-200);
  --bs-success-bg-subtle: color-mix(in srgb, var(--base-success) 15%, white);
  --bs-info-bg-subtle: color-mix(in srgb, var(--base-info) 15%, white);
  --bs-warning-bg-subtle: color-mix(in srgb, var(--base-warning) 15%, white);
  --bs-danger-bg-subtle: color-mix(in srgb, var(--base-danger) 15%, white);
  --bs-light-bg-subtle: #fcfcfd;
  --bs-dark-bg-subtle: var(--gray-400);

  --bs-primary-border-subtle: color-mix(in srgb, var(--c1) 35%, white);
  --bs-secondary-border-subtle: var(--gray-300);
  --bs-success-border-subtle: color-mix(in srgb, var(--base-success) 35%, white);
  --bs-info-border-subtle: color-mix(in srgb, var(--base-info) 35%, white);
  --bs-warning-border-subtle: color-mix(in srgb, var(--base-warning) 35%, white);
  --bs-danger-border-subtle: color-mix(in srgb, var(--base-danger) 35%, white);
  --bs-light-border-subtle: var(--gray-200);
  --bs-dark-border-subtle: var(--gray-500);

  /* Optional, aber passend zu Bootstrap 5.3 */
  --bs-gradient: linear-gradient(180deg, rgba(255,255,255,.15), rgba(255,255,255,0));
  --bs-box-shadow: 0 .5rem 1rem rgba(0,0,0,.15);
}

/* Typografie anwenden (Bootstrap setzt nicht alles über Variablen) */
h1{ font-size: var(--h1-size); }
h2{ font-size: var(--h2-size); }
h3{ font-size: var(--h3-size); }
h4{ font-size: var(--h4-size); }
h5{ font-size: var(--h5-size); }
h6{ font-size: var(--h6-size); }
h1,h2,h3,h4,h5,h6{ font-family: var(--font-headings); font-weight: var(--headings-weight); line-height: var(--headings-line-height); }

.frame-box-default,
.frame-box-elevated,
.frame-box-filled-soft,
.frame-box-brand,
.frame-box-accent,
.frame-box-success,
.frame-box-danger,
.frame-box-orbit-gradient,
.frame-box-panel-brand,
.frame-box-header-inset {
  box-shadow: var(--box-shadow);
}

.frame-box-gradient-border,
.frame-box-editorial-stripe,
.frame-box-quote-display,
.frame-box-ribbon-edge,
.frame-box-split-tone,
.frame-box-frame-within-frame,
.frame-box-poster,
.frame-box-header-contrast,
.frame-box-double-frame,
.frame-box-ticket-perforation {
  box-shadow: none;
}