/* ============================================================
   Die Inklusionsbegleiter GmbH
   main.css — Design-Tokens, Reset, Basis-Typografie, Layout
   CI-Status: Verbindlich (Übergabedokument 05.06.2026)
   ============================================================ */

/* ── DM Sans — lokal gehostet (DSGVO-konform) ──────────────── */
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/dm-sans/dm-sans-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/fonts/dm-sans/dm-sans-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/fonts/dm-sans/dm-sans-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/dm-sans/dm-sans-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/fonts/dm-sans/dm-sans-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/fonts/dm-sans/dm-sans-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ── Design-Tokens ─────────────────────────────────────────── */
:root {
  /* Leitfarbe Blau (dominiert jede Seite — min. 60% Bildwirkung) */
  --blue-900: #0F2A45;
  --blue-800: #1A3A5C;
  --blue-700: #2A5A82;
  --blue-600: #3A7CA5;
  --blue-400: #5BA0C9;
  --blue-200: #A3CDE4;
  --blue-100: #D4E8F4;
  --blue-50:  #E8F1F8;

  /* Geschäftsfeld-Akzente — NUR Sekundärfarbe, NIE dominante Fläche */
  --teal-800:   #1B5E7F;  --teal-500:   #5BA8C4;  --teal-100:   #DDEBF2;
  --purple-800: #5C3D7A;  --purple-500: #9B7BB8;  --purple-100: #F0E8F5;
  --amber-800:  #8A5D1A;  --amber-500:  #E8A948;  --amber-100:  #FEF3E6;
  --coral-800:  #8A3D20;  --coral-500:  #D4866A;  --coral-100:  #FAECE7;
  --green-800:  #2D7A42;  --green-500:  #7BBF8E;  --green-100:  #EBF5EE;

  /* Neutrale */
  --text:           #1C1C1C;
  --text-s:         #555555;
  --text-t:         #999999;
  --border:         #E4E4E2;
  --bg:             #F7F7F5;
  --white:          #FFFFFF;
  --color-required: #A01E1E;

  /* Typografie */
  --font-sans: 'DM Sans', 'Aptos', Calibri, system-ui, sans-serif;

  /* Radius */
  --radius-sm:   8px;
  --radius-md:   12px;
  --radius-lg:   16px;
  --radius-pill: 999px;

  /* Schatten */
  --shadow-sm:  0 1px 2px rgba(15,42,69,0.06);
  --shadow-md:  0 6px 24px rgba(15,42,69,0.08);
  --shadow-nav: 0 1px 0 rgba(15,42,69,0.08);

  /* Layout */
  --container: 1180px;

  /* Easing (Dignity over Dynamism) */
  --ease: cubic-bezier(.4,0,.2,1);

  /* Utility — semitransparente Weiß-Werte für dunkle Flächen */
  --white-35: rgba(255,255,255,0.35);
  --white-14: rgba(255,255,255,0.14);
  --white-12: rgba(255,255,255,0.12);
  --white-10: rgba(255,255,255,0.10);

  /* Semantische Farben */
  --color-required: #A01E1E;
  --blue-focus-shadow: rgba(91,160,201,0.18);
}

/* ── Reset ─────────────────────────────────────────────────── */
*, *::before, *::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: inherit;
  line-height: 1.7;
  color: var(--text);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img, svg {
  display: block;
  max-width: 100%;
}

a {
  color: inherit;
  text-decoration: none;
}

button {
  font-family: inherit;
  cursor: pointer;
}

ul, ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

/* ── Layout ─────────────────────────────────────────────────── */
.container {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 24px;
}

section {
  padding: 96px 0;
}

.section-head {
  max-width: 700px;
  margin-bottom: 52px;
}

.section-head.center {
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

/* ── Typografie ─────────────────────────────────────────────── */
h1, h2, h3, h4 {
  color: var(--blue-800);
  margin: 0 0 .5em;
  letter-spacing: -0.01em;
  text-wrap: balance;
}

h1 {
  font-size: clamp(2.125rem, 4.6vw, 3.25rem);
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: -0.02em;
}

h2 {
  font-size: clamp(1.625rem, 3.2vw, 2.125rem);
  font-weight: 700;
  line-height: 1.18;
  letter-spacing: -0.015em;
}

h3 {
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.3;
}

p {
  margin: 0 0 1em;
  color: var(--text-s);
  text-wrap: pretty;
}

p:last-child {
  margin-bottom: 0;
}

.lead {
  font-size: 1.125rem;
  line-height: 1.65;
  max-width: 58ch;
}

.eyebrow {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--blue-600);
  display: inline-block;
  margin-bottom: 14px;
}

/* "Teilhabe gestalten." — immer mit Punkt, letter-spacing 0.02em */
.claim {
  letter-spacing: 0.02em;
}

/* ── Skip-to-Content (Barrierefreiheit) ─────────────────────── */
.skip-link {
  position: absolute;
  top: -100%;
  left: 16px;
  z-index: 999;
  background: var(--blue-800);
  color: var(--white);
  padding: 12px 20px;
  border-radius: 0 0 var(--radius-sm) var(--radius-sm);
  font-weight: 700;
  font-size: 0.875rem;
  transition: top .15s;
}

.skip-link:focus {
  top: 0;
  outline: 4px solid var(--amber-500);
  outline-offset: 2px;
}

/* ── Focus-Indikatoren (WCAG 2.1 AA) ───────────────────────── */
:focus-visible {
  outline: 3px solid var(--amber-500);
  outline-offset: 3px;
}

/* ── Reveal-Animation (nur Fade — Dignity over Dynamism) ────── */
.reveal {
  opacity: 0;
  transition: opacity .6s var(--ease);
}

.reveal.is-visible {
  opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
  .reveal {
    opacity: 1;
    transition: none;
  }
  html {
    scroll-behavior: auto;
  }
}

/* ── Barrierefreiheits-Zustände ─────────────────────────────── */

/* Hoher Kontrast: gesamte Farbpalette für WCAG AA überschreiben.
   Strategie: helle Flächen → schwarz auf weiß; dunkle Flächen →
   reines Schwarz mit weißem Text; farbige Akzente → umrandet statt gefüllt. */
body.a11y-contrast {
  --text:    #000000;
  --text-s:  #000000;
  --text-t:  #1C1C1C;
  --border:  #767676;
  --blue-900: #000000;
  --blue-800: #000000;
  --blue-700: #000000;
  --blue-600: #005A8E;   /* 5.74:1 auf Weiß — besteht WCAG AA */
  --blue-400: #0070AE;   /* 4.59:1 auf Weiß — besteht WCAG AA */
  --blue-200: #FFFFFF;
  --blue-100: #F0F0F0;
  --blue-50:  #F0F0F0;
}

/* Dunkle Sektionen (Blue-800-Hintergrund) → Schwarz */
body.a11y-contrast .hero,
body.a11y-contrast .stats,
body.a11y-contrast .career,
body.a11y-contrast footer {
  background: #000000 !important;
}

body.a11y-contrast .hero *,
body.a11y-contrast .stats *,
body.a11y-contrast .career *,
body.a11y-contrast footer * {
  color: #FFFFFF !important;
}

body.a11y-contrast .hero a,
body.a11y-contrast footer a,
body.a11y-contrast .career a {
  text-decoration: underline;
}

/* Leistungskarten: sichtbare Umrandung */
body.a11y-contrast .field-card {
  border: 2px solid #000000 !important;
}

body.a11y-contrast .field-card.teal,
body.a11y-contrast .field-card.purple,
body.a11y-contrast .field-card.amber,
body.a11y-contrast .field-card.coral,
body.a11y-contrast .field-card.green {
  border-top-color: #000000 !important;
}

/* Farbige Icons → Umkehren */
body.a11y-contrast .field-icon {
  background: #FFFFFF !important;
  border: 2px solid #000000 !important;
  color: #000000 !important;
}

body.a11y-contrast .step-num {
  background: #000000 !important;
  color: #FFFFFF !important;
  border-color: #000000 !important;
}

body.a11y-contrast .trust-icon {
  background: #FFFFFF !important;
  border: 2px solid #000000 !important;
  color: #000000 !important;
}

/* Buttons */
body.a11y-contrast .btn-primary {
  background: #000000 !important;
  color: #FFFFFF !important;
  border-color: #000000 !important;
}

body.a11y-contrast .btn-ghost {
  color: #000000 !important;
  border-color: #000000 !important;
}

body.a11y-contrast .btn-on-dark {
  background: #FFFFFF !important;
  color: #000000 !important;
  border-color: #FFFFFF !important;
}

body.a11y-contrast .btn-ghost-dark {
  color: #FFFFFF !important;
  border-color: #FFFFFF !important;
}

/* Formularfelder */
body.a11y-contrast .form-group input,
body.a11y-contrast .form-group select,
body.a11y-contrast .form-group textarea {
  border: 2px solid #000000 !important;
}

/* FAQ */
body.a11y-contrast .faq-q .chev {
  background: #FFFFFF !important;
  border: 2px solid #000000 !important;
  color: #000000 !important;
}

body.a11y-contrast .faq-q[aria-expanded="true"] .chev {
  background: #000000 !important;
  color: #FFFFFF !important;
}

/* Navigation Dropdown */
body.a11y-contrast .nav-dropdown-menu {
  border: 2px solid #000000 !important;
  background: #FFFFFF !important;
}

body.a11y-contrast .nav-dropdown-menu a {
  color: #000000 !important;
}

body.a11y-contrast .nav-dropdown-menu a:hover,
body.a11y-contrast .nav-dropdown-menu a:focus {
  background: #000000 !important;
  color: #FFFFFF !important;
  outline: 3px solid #000000 !important;
}

body.a11y-contrast .nav-toggle[aria-expanded="true"],
body.a11y-contrast .nav-toggle:hover,
body.a11y-contrast .nav-toggle:focus {
  background: #000000 !important;
  color: #FFFFFF !important;
}

/* Widget selbst bleibt lesbar */
body.a11y-contrast .a11y-btn {
  background: #000000 !important;
  border: 2px solid #FFFFFF !important;
  color: #FFFFFF !important;
}

body.a11y-contrast .a11y-panel {
  border: 2px solid #000000 !important;
}

body.a11y-contrast .a11y-controls button[aria-pressed="true"] {
  background: #000000 !important;
  border-color: #000000 !important;
  color: #FFFFFF !important;
}

/* Weniger Bewegung */
body.a11y-no-motion *,
body.a11y-no-motion *::before,
body.a11y-no-motion *::after {
  transition: none !important;
  animation: none !important;
}

body.a11y-no-motion .reveal {
  opacity: 1 !important;
  transform: none !important;
}

/* ── Responsive Basis ───────────────────────────────────────── */
@media (max-width: 820px) {
  section {
    padding: 72px 0;
  }
}

@media (max-width: 560px) {
  section {
    padding: 56px 0;
  }
}