:root {

  --dapi-neutral-50:  #FAFAFA;
  --dapi-neutral-100: #F4F4F5;
  --dapi-neutral-200: #E3E4E7;
  --dapi-neutral-300: #C6C8CE;
  --dapi-neutral-400: #A0A4AE;
  --dapi-neutral-500: #757C89;
  --dapi-neutral-600: #4A5364;
  --dapi-neutral-700: #313B4D;
  --dapi-neutral-800: #1E283B;
  --dapi-neutral-900: #0F172A;

  --dapi-akzent:        #007F4C;
  --dapi-akzent-dunkel: #006D3B;
  --dapi-akzent-hell:   #E7F8EF;
  --dapi-logo-gruen:    #10B981;

  --dapi-grund:        var(--dapi-neutral-50);
  --dapi-flaeche:      var(--dapi-neutral-100);

  --dapi-grund-hoch:   #FFFFFF;
  --dapi-text:         var(--dapi-neutral-900);
  --dapi-text-gedimmt: var(--dapi-neutral-600);
  --dapi-text-invers:  #FFFFFF;

  --dapi-linie:        var(--dapi-neutral-200);
  --dapi-linie-bedien: var(--dapi-neutral-500);

  --dapi-fokus: var(--dapi-akzent-dunkel);

  --dapi-schrift:      "Manrope", "Segoe UI", system-ui, -apple-system, sans-serif;

  --dapi-schrift-mono: var(--dapi-schrift);

  --dapi-auszeichnung: 600;

  --dapi-text-micro: 0.656rem;
  --dapi-text-klein: 0.844rem;
  --dapi-text-basis: 1rem;
  --dapi-text-lead:  1.25rem;
  --dapi-text-h3:    1.5625rem;
  --dapi-text-h2:    1.953rem;
  --dapi-text-h1:    2.875rem;

  --dapi-zeile-eng:   1.06;
  --dapi-zeile-mittel:1.35;
  --dapi-zeile-weit:  1.6;

  --dapi-sperr-eng:  -0.028em;
  --dapi-sperr-null:  0;
  --dapi-sperr-weit:  0.15em;

  --dapi-gewicht-normal: 400;
  --dapi-gewicht-mittel: 500;
  --dapi-gewicht-halb:   600;

  --dapi-zeilenlaenge: 65ch;

  --dapi-space-3xs: 0.25rem;
  --dapi-space-2xs: 0.5rem;
  --dapi-space-xs:  0.75rem;
  --dapi-space-sm:  1rem;
  --dapi-space-md:  1.5rem;
  --dapi-space-lg:  2rem;
  --dapi-space-xl:  3rem;
  --dapi-space-2xl: 4rem;
  --dapi-space-3xl: 6rem;

  --dapi-breite:      1100px;
  --dapi-rand:        clamp(1rem, 4vw, 2.75rem);
  --dapi-nav-hoehe:   68px;

  --dapi-radius: 11px;

  --dapi-schatten: 0 1px 2px rgba(13, 23, 42, 0.06),
                   0 8px 24px rgba(13, 23, 42, 0.07);

  --dapi-dauer-schnell: 120ms;
  --dapi-dauer-basis:   180ms;
  --dapi-kurve: cubic-bezier(0.2, 0, 0.2, 1);
}

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

html, body { overflow-x: clip; }

body {
  margin: 0;
  background: var(--dapi-grund);
  color: var(--dapi-text);
  font-family: var(--dapi-schrift);
  font-size: var(--dapi-text-basis);
  line-height: var(--dapi-zeile-weit);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  margin: 0;
  font-weight: var(--dapi-gewicht-halb);
  text-wrap: balance;
}
h1 { font-size: clamp(1.75rem, 3.6vw, var(--dapi-text-h1)); line-height: var(--dapi-zeile-eng);   letter-spacing: var(--dapi-sperr-eng); }
h2 { font-size: clamp(1.3125rem, 2.5vw, var(--dapi-text-h2)); line-height: 1.12; letter-spacing: -0.02em; }
h3 { font-size: var(--dapi-text-h3); line-height: var(--dapi-zeile-mittel); letter-spacing: -0.012em; }
h4 { font-size: 1rem; line-height: var(--dapi-zeile-mittel); letter-spacing: -0.008em; }

p { margin: 0; max-width: var(--dapi-zeilenlaenge); }

img, svg, video { max-width: 100%; height: auto; }

:focus-visible {
  outline: 2px solid var(--dapi-fokus);
  outline-offset: 2px;
  border-radius: calc(var(--dapi-radius) - 7px);
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

.dapi-wrap {
  max-width: var(--dapi-breite);
  margin-inline: auto;
  padding-inline: var(--dapi-rand);
}

.dapi-eyebrow {
  font-family: var(--dapi-schrift);
  font-weight: var(--dapi-auszeichnung);
  font-size: var(--dapi-text-micro);
  letter-spacing: var(--dapi-sperr-weit);
  text-transform: uppercase;
  color: var(--dapi-text-gedimmt);
  margin: 0;
}

.dapi-gedimmt { color: var(--dapi-text-gedimmt); }

.dapi-link {
  color: var(--dapi-akzent);
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
  transition: color var(--dapi-dauer-schnell) var(--dapi-kurve);
}
.dapi-link:hover { color: var(--dapi-akzent-dunkel); }
.dapi-link:active { color: var(--dapi-akzent-dunkel); }

.dapi-btn {
  display: inline-block;
  background: var(--dapi-akzent);
  color: var(--dapi-text-invers);
  border: 1px solid var(--dapi-akzent);
  border-radius: var(--dapi-radius);
  padding: var(--dapi-space-2xs) calc(var(--dapi-space-sm) + 1px);
  font: inherit;
  font-size: var(--dapi-text-klein);
  font-weight: var(--dapi-gewicht-mittel);
  line-height: 1.5;
  white-space: nowrap;
  text-decoration: none;
  cursor: pointer;
  transition: background var(--dapi-dauer-schnell) var(--dapi-kurve),
              transform  var(--dapi-dauer-schnell) var(--dapi-kurve);
}
.dapi-btn:hover  { background: var(--dapi-akzent-dunkel); border-color: var(--dapi-akzent-dunkel); }
.dapi-btn:active { transform: translateY(1px); }
.dapi-btn[disabled], .dapi-btn[aria-disabled="true"] {
  background: var(--dapi-neutral-300);
  border-color: var(--dapi-neutral-300);
  color: var(--dapi-neutral-600);
  cursor: not-allowed;
  transform: none;
}

.dapi-btn-ghost {
  display: inline-block;
  background: transparent;
  color: var(--dapi-text);
  border: 1px solid var(--dapi-linie-bedien);
  border-radius: var(--dapi-radius);
  padding: var(--dapi-space-2xs) calc(var(--dapi-space-sm) + 1px);
  font: inherit;
  font-size: var(--dapi-text-klein);
  font-weight: var(--dapi-gewicht-mittel);
  line-height: 1.5;
  white-space: nowrap;
  text-decoration: none;
  cursor: pointer;
  transition: border-color var(--dapi-dauer-schnell) var(--dapi-kurve),
              background   var(--dapi-dauer-schnell) var(--dapi-kurve),
              transform    var(--dapi-dauer-schnell) var(--dapi-kurve);
}
.dapi-btn-ghost:hover  { border-color: var(--dapi-text); background: var(--dapi-flaeche); }
.dapi-btn-ghost:active { transform: translateY(1px); }

.dapi-feld { display: flex; flex-direction: column; gap: var(--dapi-space-2xs); }
.dapi-feld > label {
  font-size: var(--dapi-text-klein);
  font-weight: var(--dapi-gewicht-mittel);
  color: var(--dapi-text);
}
.dapi-feld > input,
.dapi-feld > textarea,
.dapi-feld > select {
  font: inherit;
  color: var(--dapi-text);
  background: var(--dapi-grund-hoch);
  border: 1px solid var(--dapi-linie-bedien);
  border-radius: var(--dapi-radius);
  padding: var(--dapi-space-xs) var(--dapi-space-sm);
  transition: border-color var(--dapi-dauer-schnell) var(--dapi-kurve);
}
.dapi-feld > textarea { min-height: 7.5rem; resize: vertical; }
.dapi-feld > :is(input, textarea, select):hover { border-color: var(--dapi-neutral-600); }
.dapi-feld > :is(input, textarea)::placeholder {
  color: var(--dapi-text-gedimmt);
}
.dapi-feld > :is(input, textarea, select)[aria-invalid="true"] { border-color: var(--dapi-akzent-dunkel); }
.dapi-feld > :is(input, textarea, select)[disabled] {
  background: var(--dapi-flaeche);
  color: var(--dapi-text-gedimmt);
  cursor: not-allowed;
}
.dapi-hilfe   { font-size: var(--dapi-text-klein); color: var(--dapi-text-gedimmt); }
.dapi-fehler  { font-size: var(--dapi-text-klein); color: var(--dapi-akzent-dunkel); }

.dapi-karte {
  background: var(--dapi-grund);
  border: 1px solid var(--dapi-linie);
  border-radius: var(--dapi-radius);
  padding: var(--dapi-space-md);
}
.dapi-hinweis {
  background: var(--dapi-akzent-hell);
  border-radius: var(--dapi-radius);
  padding: var(--dapi-space-md);
  color: var(--dapi-text);
}
.dapi-trenner { border: 0; border-top: 1px solid var(--dapi-linie); margin: 0; }

.dapi-sec {
  padding-block: clamp(var(--dapi-space-xl), 5vw, var(--dapi-space-2xl));
  border-top: 1px solid var(--dapi-linie);
}

.dapi-skelett {
  background: var(--dapi-neutral-200);
  border-radius: calc(var(--dapi-radius) - 5px);
  min-height: 1em;
}

.dapi-leer::after { content: "-"; color: var(--dapi-text-gedimmt); }

.dapi-scrollbar { overflow-x: auto; }