/* ==========================================================================
   dela Akademie - Basisschicht, fuer alle fuenf Entwuerfe gleich
   Farben kommen ausschliesslich aus palettes.css. Hier stehen keine Farbwerte.
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important; animation-iteration-count: 1 !important;
    transition-duration: .01ms !important; scroll-behavior: auto !important;
  }
}
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img, svg, video { max-width: 100%; height: auto; display: block; }
h1, h2, h3, h4 { font-family: var(--font-display); margin: 0; }
p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
a { color: inherit; }
button { font: inherit; color: inherit; }

:where(a, button, select, summary, input, [tabindex]):focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 3px;
  border-radius: 2px;
}

.wrap { width: min(100% - 2.5rem, var(--maxw, 1240px)); margin-inline: auto; }
@media (max-width: 640px) { .wrap { width: min(100% - 2rem, var(--maxw, 1240px)); } }

.nur-fuer-screenreader {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
}
.sprungmarke {
  position: absolute; left: 1rem; top: -4rem; z-index: 100;
  background: var(--accent); color: var(--on-accent);
  padding: .75rem 1.25rem; font-weight: 600; text-decoration: none;
  transition: top .15s ease;
}
.sprungmarke:focus { top: 1rem; }

/* --- Leiste zum Umschalten von Farbwelt und Modus ------------------------- */
.markenleiste {
  position: fixed; z-index: 90; inset-inline-end: 1.25rem; inset-block-end: 1.25rem;
  display: flex; gap: .5rem; align-items: center;
  padding: .5rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-sm, 6px);
  box-shadow: 0 10px 34px rgb(0 0 0 / .22);
  font-family: var(--font-body);
  font-size: .8125rem;
}
.markenleiste__titel { color: var(--text-muted); font-weight: 600; letter-spacing: .02em; }
.markenleiste button {
  display: inline-flex; align-items: center; gap: .35rem;
  padding: .4rem .7rem; cursor: pointer; font: inherit; font-weight: 600;
  color: var(--text); background: var(--surface);
  border: 1px solid var(--border); border-radius: var(--r-sm, 6px);
}
.markenleiste button:hover { border-color: var(--accent); }

/* --- Waehler mit Farbtupfern ----------------------------------------------
   Ersetzt das fruehere select. Ein natives select kann keine Farbflaechen
   zeigen, deshalb eine eigene Liste mit role="listbox". Bedienbar mit Maus,
   Tastatur und Screenreader. */
.waehler { position: relative; }
.waehler__knopf { justify-content: flex-start; gap: .5rem; }
.waehler__pfeil {
  flex: none; margin-inline-start: auto;
  width: 0; height: 0;
  border-inline: 4px solid transparent; border-top: 5px solid currentColor;
}
.waehler__name { white-space: nowrap; }
.waehler__liste {
  position: absolute; z-index: 2; inset-inline: 0 auto; inset-block-end: calc(100% + .4rem);
  min-width: 100%; margin: 0; padding: .3rem; list-style: none;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-sm, 6px); box-shadow: 0 14px 40px rgb(0 0 0 / .28);
  max-height: min(calc(100dvh - 5.5rem), 26rem); overflow-y: auto;
}
.waehler__liste li {
  display: flex; align-items: center; gap: .5rem;
  padding: .4rem .5rem; cursor: pointer; white-space: nowrap;
  border-radius: var(--r-sm, 6px); color: var(--text); font-weight: 600;
}
.waehler__liste li:hover { background: var(--bg-alt); }
.waehler__liste li[aria-selected="true"] { background: var(--accent-soft); color: var(--accent-text); }
.waehler__liste li:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }

/* Die drei Toene einer Farbwelt: getoente Flaeche, Akzent, dunkler Gegenpol.
   Die Werte kommen aus palettes.css und gelten unabhaengig davon, welche
   Farbwelt die Seite gerade traegt. */
.tupfer { display: inline-flex; flex: none; }
.tupfer i {
  width: 11px; height: 11px; border-radius: 50%;
  border: 1px solid rgb(128 128 128 / .35);
  margin-inline-start: -3px;
}
.tupfer i:first-child { margin-inline-start: 0; }

@media (max-width: 720px) {
  .markenleiste { inset-inline: 1rem auto; inset-block: auto 1rem; width: calc(100% - 2rem); justify-content: space-between; }
  .markenleiste__titel { display: none; }
  .waehler { flex: 1; }
  .waehler__knopf { width: 100%; }
}
@media print { .markenleiste, .sprungmarke { display: none; } }
.ohne-markenleiste .markenleiste { display: none; }

/* --- Wortmarke ------------------------------------------------------------
   Die Wortmarke der dela Akademie als eingebundenes SVG. Sie uebernimmt ueber
   currentColor die Textfarbe der jeweiligen Farbwelt und funktioniert damit
   in allen zehn Kits, hell wie dunkel. Der Zusatz "Akademie" steht daneben
   in der Schrift des Kits.
   Quelle: dela-brand-design/logo/wortmarke-violett-kurz.svg, Farbe ersetzt. */
.marke {
  display: inline-flex; align-items: center; gap: .6rem;
  text-decoration: none; color: var(--text); flex: none;
}
.marke__logo {
  height: 22px; width: auto; aspect-ratio: 90 / 24;
  color: var(--text); fill: currentColor; display: block;
}
.marke__zusatz {
  font-family: var(--font-body);
  font-size: .9375rem; font-weight: 500; color: var(--text-muted);
  letter-spacing: .01em; white-space: nowrap;
  padding-inline-start: .6rem; border-inline-start: 1px solid var(--border);
}
.marke:hover .marke__logo { color: var(--accent-text); }
@media (max-width: 560px) { .marke__zusatz { display: none; } }