/* BWLernen | eine Datei für die ganze Seite
   Palette und Schrift stammen aus dem bestehenden Auftritt und wurden am 10.09.2026
   aus der Live-Seite ausgelesen. Zwei Werte sind bewusst angepasst, siehe Kommentar. */

:root {
  --grund:    #faf7e9;  /* Body-Hintergrund der bestehenden Seite */
  --flaeche:  #fffdf5;  /* leicht heller für abgesetzte Kästen */
  --text:     #1a1423;  /* Textfarbe der bestehenden Seite */
  --gedaempft:#666066;  /* war #777777, auf #faf7e9 nur 4,1:1. Jetzt 5,2:1, damit Fließtext lesbar bleibt */
  --linie:    #e6e1cf;
  --akzent:   #797ae0;  /* Markenfarbe der bestehenden Seite, für Flächen und Marken */
  --akzent-tx:#5f60d2;  /* dieselbe Farbe leicht abgedunkelt für Text und Menü. #797ae0 als Text erreicht auf #faf7e9 nur 3,5:1, #5f60d2 erreicht 4,8:1 */
  --gold:     #e0cd79;  /* Textmarker der Überschriften, wie auf der bisherigen Seite */
  --akzent-bg:#eeeefb;
  --knopf:    #5f60d2;
  --hell:     #797ae0;  /* Hover: das hellere Violett der Palette */

  --schrift: "Roboto", system-ui, -apple-system, "Segoe UI", sans-serif;
  --display: "Playfair Display", Georgia, "Times New Roman", serif;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --mass: 36rem;         /* Zeilenmaß */
  --rand: 1.25rem;
}

/* Roboto liegt auf dem eigenen Server. Keine Anfrage an Google Fonts.
   Nur die zwei benoetigten Schnitte, als woff2, zusammen rund 150 kB. */
@font-face { font-family: "Roboto"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("/fonts/roboto-latin-ext-400-normal.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: "Roboto"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("/fonts/roboto-latin-400-normal.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: "Roboto"; font-style: italic; font-weight: 400; font-display: swap;
  src: url("/fonts/roboto-latin-ext-400-italic.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: "Roboto"; font-style: italic; font-weight: 400; font-display: swap;
  src: url("/fonts/roboto-latin-400-italic.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: "Roboto"; font-style: normal; font-weight: 700; font-display: swap;
  src: url("/fonts/roboto-latin-ext-700-normal.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: "Roboto"; font-style: normal; font-weight: 700; font-display: swap;
  src: url("/fonts/roboto-latin-700-normal.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: "Roboto"; font-style: italic; font-weight: 700; font-display: swap;
  src: url("/fonts/roboto-latin-ext-700-italic.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: "Roboto"; font-style: italic; font-weight: 700; font-display: swap;
  src: url("/fonts/roboto-latin-700-italic.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: "Playfair Display"; font-style: normal; font-weight: 700; font-display: swap;
  src: url("/fonts/playfair-display-latin-ext-700-normal.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: "Playfair Display"; font-style: normal; font-weight: 700; font-display: swap;
  src: url("/fonts/playfair-display-latin-700-normal.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; }

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

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--grund);
  color: var(--text);
  font: 400 1rem/1.75 var(--schrift);
  padding-inline: var(--rand);
}

.huelle { max-width: 62rem; margin-inline: auto; }

/* ---------------------------------------------------------------- Kopf */

.kopf {
  display: flex; align-items: center; gap: 0.75rem 2rem; flex-wrap: wrap;
  padding-block: 1.5rem;
}
.wortmarke { display: inline-flex; align-items: center; color: var(--text); text-decoration: none; min-height: 44px; }
.wortmarke svg { height: 32px; width: auto; display: block; }

.menue { display: flex; gap: 0.25rem 1.5rem; flex-wrap: wrap; margin-inline-start: auto; }
.menue a {
  color: var(--akzent-tx); text-decoration: none;
  min-height: 44px; display: inline-flex; align-items: center;
  border-bottom: 2px solid transparent;
}
.menue a:hover { color: var(--hell); }
.menue a[aria-current="page"] { color: var(--text); border-bottom-color: var(--gold); }

@media (max-width: 40rem) {
  .kopf { justify-content: center; padding-block: 1rem 0.5rem; }
  .menue { margin-inline: 0; justify-content: center; gap: 0 1rem; }
}

/* ---------------------------------------------------------------- Text */

main { padding-block: 2.5rem 4rem; }
.schmal { max-width: var(--mass); }

h1, h2, h3 { font-family: var(--display); font-weight: 700; }
h1 { font-size: clamp(1.9rem, 1.3rem + 2.2vw, 2.5rem); line-height: 1.25; margin: 0 0 1rem; }
h2 { font-size: clamp(1.45rem, 1.2rem + 1vw, 1.9rem); line-height: 1.3; margin: 2.75rem 0 0.9rem; }
h3 { font-size: 1.25rem; line-height: 1.35; margin: 1.9rem 0 0.5rem; }
h4 { font-size: 1rem; margin: 1.5rem 0 0.4rem; }

/* Der goldene Textmarker hinter den Hauptüberschriften. Drei von Hand gezeichnete Striche mit
   unruhigen Kanten und einem zweiten, blasseren Zug darüber, damit nicht jede Überschrift
   gleich aussieht. Die Schrift im Marker bleibt immer dunkel, auch im dunklen Design. */
mark, .markiert {
  background: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 200 40%22 preserveAspectRatio=%22none%22%3E%3Cpath fill='%23e0cd79' fill-opacity='.85' d='M2 8C30 5 70 9 120 6s60 1 77 3l1 22c-25 4-60 1-100 3S30 33 3 35Z'/%3E%3Cpath fill='%23e0cd79' fill-opacity='.45' d='M6 4c50 3 120-2 190 2l-2 9C140 12 60 16 5 13Z'/%3E%3C/svg%3E") no-repeat center / 100% 100%;
  color: #1a1423; padding: 0.08em 0.55em 0.12em; margin-inline: -0.3em;
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
}
h2:nth-of-type(3n+1) mark, .abschnitt:nth-of-type(3n+2) > h2 mark { background-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 200 40%22 preserveAspectRatio=%22none%22%3E%3Cpath fill='%23e0cd79' fill-opacity='.8' d='M4 6c40 4 90-2 140 1s40 2 54 0l-2 27c-30-3-70 3-110 1S20 36 1 33Z'/%3E%3Cpath fill='%23e0cd79' fill-opacity='.5' d='M3 24c60 3 130-3 195 1l-1 11C130 33 70 38 2 36Z'/%3E%3C/svg%3E"); }
h2:nth-of-type(3n+2) mark, .abschnitt:nth-of-type(3n) > h2 mark { background-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 200 40%22 preserveAspectRatio=%22none%22%3E%3Cpath fill='%23e0cd79' fill-opacity='.9' d='M1 10c35-5 80 1 130-2s50 3 67-1l1 24c-40 5-80-1-125 3S25 33 2 36Z'/%3E%3Cpath fill='%23e0cd79' fill-opacity='.4' d='M10 3c60 4 110-1 180 3l1 12C120 14 70 19 9 15Z'/%3E%3C/svg%3E"); }
.abschnitt:nth-of-type(3n+1) > h2 mark { background-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 200 40%22 preserveAspectRatio=%22none%22%3E%3Cpath fill='%23e0cd79' fill-opacity='.85' d='M2 8C30 5 70 9 120 6s60 1 77 3l1 22c-25 4-60 1-100 3S30 33 3 35Z'/%3E%3Cpath fill='%23e0cd79' fill-opacity='.45' d='M6 4c50 3 120-2 190 2l-2 9C140 12 60 16 5 13Z'/%3E%3C/svg%3E"); }
p, ul, ol { margin: 0 0 1.1rem; }
ul, ol { padding-inline-start: 1.35rem; }
li { margin-bottom: 0.35rem; }

a { color: var(--akzent-tx); text-underline-offset: 0.15em; }
a { transition: color .12s ease; }
a:hover { color: var(--hell); }

.vorspann { font-size: 1.15rem; line-height: 1.6; color: var(--text); }
.gedaempft { color: var(--gedaempft); }
.klein { font-size: 0.875rem; }

/* Marke links neben einer Liste, statt Aufzählungszeichen */
.marke {
  font: 700 0.7rem/1 var(--mono); letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--gedaempft);
}

/* ---------------------------------------------------------------- Kästen */

.kasten {
  background: var(--flaeche); border: 1px solid var(--linie);
  padding: 1.25rem 1.35rem; margin: 1.75rem 0;
}
.kasten > :last-child { margin-bottom: 0; }
.kasten h2, .kasten h3 { margin-top: 0; }

.definition { border-inline-start: 3px solid var(--akzent); background: var(--akzent-bg); }

.video { display: block; position: relative; aspect-ratio: 16 / 9; max-width: 100%; margin: 1.25rem 0; }
.video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* Vorschaltflaeche: das Video laedt erst auf Klick, vorher gibt es keine Verbindung
   zum Videoserver. Deshalb steht hier eine Schaltflaeche statt eines Rahmens. */
.videostart {
  position: absolute; inset: 0; width: 100%; height: 100%;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 0.75rem; text-align: center; padding: 1rem 1.25rem;
  font: inherit; color: var(--text); cursor: pointer;
  background: var(--akzent-bg); background-size: cover; background-position: center;
  border: 1px solid var(--linie);
}
.videostart.hatbild { color: #fff; text-shadow: 0 1px 3px rgba(0,0,0,.7); border-color: transparent; }
.videostart.hatbild::before { content: ""; position: absolute; inset: 0; background: rgba(26,20,35,.45); }
.videostart:hover, .videostart:focus-visible { border-color: var(--akzent); }
.videostart:hover .videopfeil, .videostart:focus-visible .videopfeil { transform: scale(1.08); }

.videopfeil {
  position: relative; flex: none;
  width: 3.5rem; height: 2.5rem; border-radius: 0.6rem;
  background: var(--akzent); transition: transform .12s ease;
}
.videopfeil::after {
  content: ""; position: absolute; top: 50%; left: 50%; transform: translate(-40%, -50%);
  border-style: solid; border-width: 0.5rem 0 0.5rem 0.85rem;
  border-color: transparent transparent transparent #fff;
}
.videowort { position: relative; max-width: 32rem; font-weight: 500; line-height: 1.3; }
.videowort small { display: block; margin-top: 0.35rem; font-weight: 400; font-size: 0.8rem; opacity: .8; }
.videostart:not(.hatbild) .videowort small { color: var(--gedaempft); opacity: 1; }
.videoersatz { position: absolute; inset: auto 0 0 0; margin: 0; padding: 0.75rem; }

.material { list-style: none; padding: 0; margin: 0; }
.material li { margin-bottom: 0.5rem; }
.material a { display: inline-flex; gap: 0.5rem; align-items: baseline; }
.material .typ { font: 700 0.7rem var(--mono); color: var(--gedaempft); }

/* ---------------------------------------------------------------- A bis Z */

.suchfeld {
  width: 100%; max-width: 28rem; font: inherit; padding: 0.7rem 0.85rem;
  border: 1px solid var(--linie); background: var(--flaeche); color: inherit;
}
.suchfeld:focus-visible { outline: 2px solid var(--akzent); outline-offset: 1px; }

.buchstaben { display: flex; flex-wrap: wrap; gap: 0.35rem; margin: 1.5rem 0 2rem; padding: 0; list-style: none; }
.buchstaben a {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 2.25rem; min-height: 2.25rem; text-decoration: none;
  border: 1px solid var(--linie); background: var(--flaeche); color: var(--text);
  font-weight: 700; font-size: 0.9rem;
}
.buchstaben a:hover { border-color: var(--hell); color: var(--hell); }

.gruppe { margin-bottom: 1.75rem; scroll-margin-top: 1rem; }
.gruppe > h2 {
  margin: 0 0 0.6rem; font-size: 1.25rem; color: var(--akzent-tx);
  border-bottom: 1px solid var(--linie); padding-bottom: 0.3rem;
}
.eintraege { list-style: none; padding: 0; margin: 0; columns: 3 14rem; column-gap: 2rem; }
.eintraege li { break-inside: avoid; margin-bottom: 0.4rem; }

.treffer { list-style: none; padding: 0; margin: 1.5rem 0 0; }
.treffer li { padding-block: 0.6rem; border-bottom: 1px solid var(--linie); }
.treffer .kurz { display: block; color: var(--gedaempft); font-size: 0.9rem; }

/* ---------------------------------------------------------------- Kurse */

.kapitel { list-style: none; padding: 0; margin: 0; }
.kapitel li { border-bottom: 1px solid var(--linie); }
.kapitel a { display: flex; gap: 1rem; align-items: baseline; padding: 0.9rem 0; text-decoration: none; color: var(--text); }
.kapitel a:hover .name { color: var(--hell); }
.kapitel .nr { font: 700 0.85rem var(--mono); color: var(--gedaempft); min-width: 2rem; }
.kapitel .name { font-weight: 700; }
.kapitel .zusatz { margin-inline-start: auto; color: var(--gedaempft); font-size: 0.85rem; white-space: nowrap; }

/* ---------------------------------------------------------------- Fuß */

.fuss {
  padding-block: 2.5rem 3rem; text-align: center;
  color: var(--gedaempft); font-size: 0.9rem;
}
.fuss nav { color: var(--gedaempft); }
.fuss nav a { color: var(--text); text-decoration: none; display: inline-block; padding: 0.6rem 0.35rem; }
.fuss nav a:hover { color: var(--hell); }
.fuss .foerderung { max-width: 40rem; margin: 0.75rem auto 0; }

/* ---------------------------------------------------------------- Tabellen und Code */

.tabelle { overflow-x: auto; margin: 1.5rem 0; }
table { border-collapse: collapse; width: 100%; font-size: 0.95rem; }
th, td { text-align: left; padding: 0.55rem 0.75rem; border-bottom: 1px solid var(--linie); }
th { font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--gedaempft); }

code { font-family: var(--mono); font-size: 0.9em; background: var(--flaeche); padding: 0.1em 0.35em; border: 1px solid var(--linie); }

.formel { font-family: var(--mono); background: var(--flaeche); border: 1px solid var(--linie); padding: 0.9rem 1rem; overflow-x: auto; }

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

/* ---------------------------------------------------------------- Zugänglichkeit */

:focus-visible { outline: 2px solid var(--akzent-tx); outline-offset: 2px; }

.sprung {
  position: absolute; left: -9999px;
  background: var(--text); color: var(--grund); padding: 0.75rem 1rem;
}
.sprung:focus { left: var(--rand); top: 0.5rem; z-index: 10; }

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

@media (max-width: 40rem) {
  .eintraege { columns: 1; }
}

/* ---------------------------------------------------------------- Hinweisband */

.hinweisband {
  margin: 0 calc(var(--rand) * -1);
  padding: 0.5rem var(--rand);
  background: var(--akzent-bg);
  border-bottom: 1px solid var(--akzent);
  color: var(--text);
  font-size: 0.9rem;
  text-align: center;
}

/* ---------------------------------------------------------------- Aufklappbares */

details {
  border: 1px solid var(--linie);
  background: var(--flaeche);
  margin: 0.75rem 0;
}
details[open] { border-color: var(--akzent); }
summary {
  cursor: pointer;
  padding: 0.7rem 0.9rem;
  font-weight: 700;
  font-size: 0.95rem;
  list-style: none;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 44px;
}
summary::-webkit-details-marker { display: none; }
summary::before {
  content: "+";
  font: 700 1.1rem/1 var(--mono);
  color: var(--akzent-tx);
  width: 1rem;
  text-align: center;
}
details[open] summary::before { content: "−"; }
summary:hover { color: var(--hell); }
details > :not(summary) { padding-inline: 0.9rem; }
details > :last-child { padding-bottom: 0.9rem; margin-bottom: 0; }

.weiter {
  margin-top: 3rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--linie);
}

/* ---------------------------------------------------------------- Material */

.materialgruppe { max-width: none; }
.materialgruppe > summary { font-weight: 500; }
.materialgruppe .anzahl {
  font: 400 0.8rem var(--mono); color: var(--gedaempft); margin-left: 0.4rem;
}
.materialgruppe .material { padding: 0.25rem 0 0.5rem 0; }

/* Sprungmarke der alten Unterseiten. Sie soll keinen Abstand erzeugen. */
p:has(> span[id]:only-child:empty) { margin: 0; height: 0; }

/* ---------------------------------------------------------------- Startseite */

.buehne { text-align: center; max-width: 46rem; margin: 1.5rem auto 0; }
.buehne p { font-size: 1.05rem; }
.mittig { text-align: center; }

.karten {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
  gap: 1.5rem; list-style: none; padding: 0; margin: 1.5rem 0 0;
}
.karte {
  position: relative; border: 1px solid var(--text); padding: 1.5rem 1.6rem 1.4rem;
  transition: background-color .15s ease;
}
.karte:hover, .karte:focus-within { background: var(--flaeche); }
.karte > * { position: relative; z-index: 1; }
/* Hintergrundbild der Kachel: die blassen Fotos der bisherigen Seite, liegen unter /material/ */
.karte.bild::before {
  content: ""; position: absolute; inset: 0; z-index: 0;
  background: var(--bild) center / cover no-repeat; opacity: .9; mix-blend-mode: multiply;
  transition: opacity .15s ease;
}
.karte.bild:hover::before, .karte.bild:focus-within::before { opacity: .55; }
.karte.bild { min-height: 13rem; display: flex; flex-direction: column; justify-content: flex-end; }
.karte h3 { margin: 0.1rem 0 0.4rem; font-size: 1.6rem; }
.karte h3 a { color: var(--text); text-decoration: none; }
.karte h3 a::after { content: ""; position: absolute; inset: 0; z-index: 2; }   /* ganze Karte klickbar */
.karte h3 a:focus-visible { outline: none; }
.karte:focus-within { outline: 2px solid var(--akzent-tx); outline-offset: 2px; }
.karte .oben { margin: 0; color: var(--gedaempft); font-size: 0.95rem; }
.karte .unten { margin: 0; font-size: 0.95rem; }
.karte .zahlen { margin: 0.6rem 0 0; color: var(--gedaempft); font-size: 0.85rem; }

.weitere { text-align: center; margin-top: 1.75rem; }
.knopf {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0.55rem 1.25rem;
  background: var(--knopf); color: #fff; text-decoration: none;
}
.knopf:hover, .knopf:focus-visible { background: var(--hell); color: #1a1423; }

.autor { display: grid; grid-template-columns: 9rem 1fr; gap: 1.5rem; align-items: center; max-width: 46rem; margin: 1.5rem auto 0; }
.autor img { width: 9rem; height: 11.25rem; object-fit: cover; display: block; }
.autor h3 { margin-top: 0; }
@media (max-width: 34rem) { .autor { grid-template-columns: 1fr; justify-items: center; text-align: center; } }

.abschnitt { margin-top: 4rem; }
.abschnitt > h2 { text-align: center; }
.autor-links { margin-inline: 0; }
.foerderlogo img { width: 300px; max-width: 100%; height: auto; }
.weiter { display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem; justify-content: space-between; }
.weiter a { min-height: 44px; display: inline-flex; align-items: center; }
.marke a { color: inherit; text-decoration: none; }
.marke a:hover { color: var(--hell); }

/* ---------------------------------------------------------------- Dunkles Design
   Dunkles Lila aus der Textfarbe der Seite abgeleitet, kein Schwarz. Umschalter im Menü.
   Die Wahl merkt sich der Browser lokal, ohne Cookie. */

:root[data-theme="dark"] {
  --grund:    #211a2e;
  --flaeche:  #2b2340;
  --text:     #f3efe0;
  --gedaempft:#b6aec2;
  --linie:    #40365a;
  --akzent:   #797ae0;
  --akzent-tx:#abacf3;
  --hell:     #79b1e0;  /* Hover im dunklen Design: das Blau der Palette */
  --akzent-bg:#2f2850;
  color-scheme: dark;
}
:root[data-theme="dark"] .foerderlogo img { filter: invert(1); }
:root[data-theme="dark"] .karte { border-color: var(--linie); }
:root[data-theme="dark"] .karte.bild::before { filter: invert(1); mix-blend-mode: screen; opacity: .22; }
:root[data-theme="dark"] .karte.bild:hover::before { opacity: .12; }
:root[data-theme="dark"] .ratgeberkarte img { opacity: .85; }

.wortmarke svg g { fill: currentColor; }

.themaknopf {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; margin-inline-start: -0.5rem; padding: 0;
  background: none; border: 0; cursor: pointer; color: var(--akzent-tx);
}
.themaknopf:hover { color: var(--hell); }
.themaknopf[aria-pressed="true"] { color: var(--gold); }

/* ---------------------------------------------------------------- Startseite, Ergänzungen */

.zahlenreihe {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 0.5rem 2.25rem;
  list-style: none; padding: 0; margin: 1.75rem 0 0;
}
.zahlenreihe li { margin: 0; text-align: center; }
.zahlenreihe strong { display: block; font: 700 1.9rem/1.1 var(--display); }
.zahlenreihe span { font-size: 0.85rem; color: var(--gedaempft); }

.schritte {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: 1.5rem;
  list-style: none; padding: 0; margin: 1.5rem 0 0; counter-reset: schritt;
}
.schritte li { margin: 0; padding: 1.25rem 1.35rem; background: var(--flaeche); border: 1px solid var(--linie); counter-increment: schritt; }
.schritte li::before { content: counter(schritt); display: block; font: 700 2rem/1 var(--display); color: var(--akzent-tx); margin-bottom: 0.5rem; }
.schritte h3 { margin: 0 0 0.35rem; font-size: 1.15rem; }
.schritte p { margin: 0; font-size: 0.95rem; }

.themen { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.5rem; list-style: none; padding: 0; margin: 1.25rem auto 0; max-width: 50rem; }
.themen li { margin: 0; }
.themen a {
  display: inline-flex; align-items: center; min-height: 40px; padding: 0.3rem 0.9rem;
  border: 1px solid var(--linie); background: var(--flaeche); color: var(--text); text-decoration: none; font-size: 0.95rem;
}
.themen a:hover, .themen a:focus-visible { border-color: var(--hell); color: var(--hell); }
.themenkopf { text-align: center; margin: 1.75rem 0 0; font: 700 0.75rem/1 var(--mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--gedaempft); }

.ratgeberkarten { display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); gap: 1.5rem; list-style: none; padding: 0; margin: 1.5rem 0 0; }
.ratgeberkarte { position: relative; margin: 0; border: 1px solid var(--linie); background: var(--flaeche); }
.ratgeberkarte img { display: block; width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
.ratgeberkarte h3, .ratgeberkarte h2 { margin: 0; padding: 0.85rem 1rem 1rem; font-size: 1.1rem; }
.ratgeberkarte a { color: var(--text); text-decoration: none; }
.ratgeberkarte a::after { content: ""; position: absolute; inset: 0; }
.ratgeberkarte:hover, .ratgeberkarte:focus-within { border-color: var(--akzent); }

/* ---------------------------------------------------------------- Über-Seite: Zeitstrahl und Teamfoto */

.zeitstrahl { list-style: none; padding: 0; margin: 1.5rem 0 2rem; border-inline-start: 2px solid var(--gold); }
.zeitstrahl li { position: relative; margin: 0; padding: 0 0 1.35rem 1.5rem; }
.zeitstrahl li:last-child { padding-bottom: 0; }
.zeitstrahl li::before {
  content: ""; position: absolute; left: -0.45rem; top: 0.45rem; width: 0.75rem; height: 0.75rem;
  border-radius: 50%; background: var(--gold); border: 2px solid var(--grund);
}
.zeitstrahl time { display: block; font: 700 0.75rem/1.6 var(--mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--gedaempft); }
.zeitstrahl .danach::before { background: var(--akzent); }
.zeitstrahl p { margin: 0; }
.teamfoto { margin: 1.5rem 0; }
.teamfoto img { display: block; width: 100%; height: auto; }
.teamfoto figcaption { margin-top: 0.5rem; font-size: 0.875rem; color: var(--gedaempft); }

/* ---------------------------------------------------------------- BWLexikon: Fach am Eintrag */
.fach { font: 700 0.65rem/1 var(--mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--gedaempft); border: 1px solid var(--linie); padding: 0.15em 0.4em; white-space: nowrap; }
.marke a { text-decoration: none; }
.fotos { display: grid; gap: 0.25rem 1.5rem; }
.teamfoto a { color: inherit; }
.kursfoto { margin: 1.5rem 0 0.5rem; max-width: 46rem; }
.kursfoto img { display: block; width: 100%; height: auto; }

.karte:hover h3 a, .ratgeberkarte:hover a { color: var(--hell); }