/* =====================================
   Accessibility / User Preferences
===================================== */

/* =====================================
   Font Preference
===================================== */

.font-default {
  --font-sans: var(--font-sans-default);
}

.font-dyslexic {
  --font-sans: var(--font-sans-dyslexic);
  font-family: var(--font-sans-dyslexic);
}

/* =====================================
   Font Size Preference
   Keep steps conservative so layouts survive large text.
===================================== */

.font-size-default {
  --font-size-1: 0.95rem;
  --font-size-2: 1.1rem;
  --font-size-3: 1.35rem;
  --font-size-4: 1.8rem;
  --font-size-5: 2.2rem;

  --font-size-body: var(--font-size-1);
  --font-size-lead: var(--font-size-2);
  --font-size-heading-1: var(--font-size-5);
  --font-size-heading-2: var(--font-size-4);
  --font-size-heading-3: var(--font-size-3);
}

.font-size-large {
  --font-size-1: 1.08rem;
  --font-size-2: 1.24rem;
  --font-size-3: 1.5rem;
  --font-size-4: clamp(1.75rem, 3vw, 2.05rem);
  --font-size-5: clamp(2rem, 4vw, 2.55rem);

  --font-size-body: var(--font-size-1);
  --font-size-lead: var(--font-size-2);
  --font-size-heading-1: var(--font-size-5);
  --font-size-heading-2: var(--font-size-4);
  --font-size-heading-3: var(--font-size-3);
  --font-size-hero-title: clamp(2rem, 4.4vw, 3rem);
  --font-size-hero-lead: clamp(1.2rem, 2.4vw, 1.55rem);
}

.font-size-xlarge {
  --font-size-1: 1.2rem;
  --font-size-2: 1.38rem;
  --font-size-3: 1.65rem;
  --font-size-4: clamp(1.85rem, 3.5vw, 2.25rem);
  --font-size-5: clamp(2.1rem, 5vw, 2.75rem);

  --font-size-body: var(--font-size-1);
  --font-size-lead: var(--font-size-2);
  --font-size-heading-1: var(--font-size-5);
  --font-size-heading-2: var(--font-size-4);
  --font-size-heading-3: var(--font-size-3);
  --font-size-hero-title: clamp(2.05rem, 4.8vw, 3rem);
  --font-size-hero-lead: clamp(1.25rem, 2.8vw, 1.6rem);
}

/* =====================================
   Theme Base
   theme-auto is internal only. It is not shown in the menu.
===================================== */

.theme-light {
  color-scheme: light;

  --color-bg: #ffffff;
  --color-surface: #ffffff;
  --color-surface-muted: #f6f7f8;

  --color-text: #16181d;
  --color-text-muted: #4b5563;

  --color-heading: #006633;
  --color-heading-inverse: #ffffff;

  --color-primary: #1b6f4a;
  --color-primary-strong: #006633;
  --color-primary-light: #90ba4d;
  --color-primary-contrast: #ffffff;

  --color-accent: #fdaa02;
  --color-accent-contrast: #16181d;

  --color-border: rgba(0, 0, 0, 0.14);
  --border-1: 1px solid var(--color-border);

  --color-section-default: var(--color-surface);
  --color-section-muted: var(--color-surface-muted);
  --color-section-inverse: var(--color-primary-strong);
  --color-section-inverse-text: #ffffff;
  --color-section-on-light: #16181d;
  --color-section-on-strong: #ffffff;

  --color-footer-bg: #002A00;
  --color-footer-text: #f8f3eb;

  --color-footer-fachtag-bg: #B6B72A;
  --color-footer-fachtag-text: #1f1f1f;
  --color-footer-fachtag-sky: #ffffff;

}

.theme-dark {
  color-scheme: dark;

  --color-bg: #0d120f;
  --color-surface: #151c18;
  --color-surface-muted: #1f2923;

  --color-text: #f4f1ea;
  --color-text-muted: #c8c3b8;

  --color-heading: #b8df72;
  --color-heading-inverse: #f4f1ea;

  --color-primary: #b8df72;
  --color-primary-strong: #d6f28d;
  --color-primary-light: #9dcc57;
  --color-primary-contrast: #101510;

  --color-accent: #fdaa02;
  --color-accent-contrast: #16181d;

  --color-danger: #ffb4ab;
  --color-danger-bg: #4d1715;

  --color-border: rgba(255, 255, 255, 0.18);
  --border-1: 1px solid var(--color-border);

  --color-section-default: var(--color-bg);
  --color-section-muted: var(--color-surface-muted);
  --color-section-inverse: #18261d;
  --color-section-inverse-text: #f4f1ea;
  --color-section-on-light: #f4f1ea;
  --color-section-on-strong: #ffffff;

--color-footer-bg: #07110f;
--color-footer-text: #f4f1ea;

--color-section-default: #0d120f;
--color-section-muted: #151c18;

--color-section-yellow: #5f5700;
--color-section-orange: #6f4300;
--color-section-coral: #6b2c24;
--color-section-pink: #613044;
--color-section-blue: #233b63;
--color-section-green: #18261d;
--color-section-green-light: #26391f;
--color-section-green-brown: #2a1d12;

--color-section-inverse: #18261d;
--color-section-inverse-text: #f4f1ea;
--color-section-on-light: #f4f1ea;
--color-section-on-strong: #f4f1ea;

  --color-footer-bg: #07110f;
  --color-footer-text: #f4f1ea;

  --color-footer-fachtag-bg: #18261d;
  --color-footer-fachtag-text: #f4f1ea;
  --color-footer-fachtag-sky: #0d120f;

}

/* =====================================
   Images Off
===================================== */

.images-off img:not([data-ignore-a11y]) {
  display: none !important;
}

.images-off main img {
  display: none !important;
}

.images-off .hero__media,
.images-off .slider-split__media {
  background-image: none !important;
  background-color: var(--color-surface-muted);
}

.images-off .hero-illustration {
  display: none !important;
}

/* =====================================
   Images Grayscale
===================================== */

.images-bw img:not([data-ignore-a11y]) {
  filter: grayscale(100%) !important;
}

.images-bw .hero__media,
.images-bw .slider-split__media,
.images-bw .hero-illustration {
  filter: grayscale(100%) !important;
}