/* ===================================================================
   DASHBOARD-CSS — KONSOLIDIERTE FASSUNG v34, 18.08.2026
   Ersetzt den GESAMTEN Inhalt des Oxygen-Elements `CSS Code` (Seite 11).

   Was das ist: der geflattete Endzustand der bisherigen Schichten
   dieses Elements (Basis + Haertung + Nutzer-Gestaltung, Glas v2,
   LifeOS-Monochrom v31, Innenpolster v32, Rot/Gruen v33). Jede Regel
   und jedes Token steht nur noch EINMAL — es gibt keine Overrides
   mehr. Maschinell erzeugt und verifiziert (Property-Karten-Diff
   Schicht- vs. Endfassung: 0 Abweichungen) -> konsolidierung.md.

   NICHT HIER: Die Sprungnavigation (Abschnitt 24 v30) liegt im
   EIGENEN Element `Menu CSS` und bleibt unveraendert. Lokales
   Spiegelbild: dashboard-css-navigation-zusatz.css.

   Gewollte Aenderungen gegenueber dem Live-Stand vor v34:
     - --viz-gut:      #006300 -> #04b404   (User-Entscheid 18.08.)
     - --viz-kritisch: #d03b3b -> #f84444
     - --viz-div-*-Rampen aus den neuen Endfarben abgeleitet
       (OKLab-Mischung von --viz-div-neutral zur Endfarbe).
   Entfernt ohne Wirkungsaenderung: alle @supports-Glasbloecke (Token
   --viz-surface-glas/#fff und --viz-blur/none machten sie inert; die
   Token selbst bleiben definiert, Abschnitt 1).

   PFLEGE AB JETZT: Aenderungen direkt an der jeweiligen Stelle
   vornehmen, nicht mehr anhaengen — die Historie liegt in Git
   (dashboards-Repo) und in backup-design-2026-08-18/.
   =================================================================== */
@font-face{
  font-family: "Figtree";
  font-style: normal;
  font-weight: 300 900;
  font-display: swap;
  src: url("https://tvhp6g7shv-art.github.io/arbeitsmarkt-at/fonts/figtree-latin-wght-normal.woff2")
       format("woff2");
  unicode-range:
    U+0-FF, U+131, U+152-153, U+2BB-2BC, U+2C6, U+2DA, U+2DC,
    U+304, U+308, U+329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family: "Figtree";
  font-style: normal;
  font-weight: 300 900;
  font-display: swap;
  src: url("https://tvhp6g7shv-art.github.io/arbeitsmarkt-at/fonts/figtree-latin-ext-wght-normal.woff2")
       format("woff2");
  unicode-range:
    U+100-2BA, U+2BD-2C5, U+2C7-2CC, U+2CE-2D7, U+2DD-2FF,
    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;
}
/* -------------------------------------------------------------------
   1. Design-Token — EINZIGE Definitionsstelle
   kern.js liest alle Farben/Schriften beim Laden per getComputedStyle;
   Aenderungen hier wirken daher auch auf alle ECharts-Grafiken.
   Ausnahmen per JS-Nachfaerbung (Element `JavaScript Code`):
   Fluss rot/gruen, Zeitreihe Maenner blau / Frauen rosa.
   ------------------------------------------------------------------- */

.viz-root,
#dashboard {
  color-scheme: light;
  --viz-surface-glas-blur: 12px;
  --viz-surface-glas-border: rgb(255 255 255 / .35);
  --viz-fs-achse: 11px;
  --viz-fs-label: 11.5px;
  --viz-fs-serie: 12px;
  --viz-fs-tooltip: 12.5px;
  --viz-fs-eng: 10.5px;
  --viz-fw-normal: 400;
  --viz-fw-mittel: 500;
  --viz-fw-kraeftig: 600;
  --viz-fw-kpi: 650;
  --viz-gap: var(--m, 1.25rem);
  color: var(--viz-text);
  font-family: var(--viz-font);
  --viz-surface: #ffffff;
  --viz-plane: #fafafa;
  --viz-surface-glas: #ffffff;
  --viz-blur: none;
  --viz-text: #0a0a0a;
  --viz-text-2: #0a0a0a;
  --viz-muted: #767676;
  --viz-grid: #ececec;
  --viz-axis: #d9d9d9;
  --viz-border: #e5e5e5;
  --viz-series-1: #0a0a0a;
  --viz-series-2: #9a9a9a;
  --viz-series-3: #c9c9c9;
  --viz-series-4: #4d4d4d;
  --viz-series-5: #e0e0e0;
  --viz-series-6: #737373;
  --viz-seq-1: #f2f2f2;
  --viz-seq-2: #d9d9d9;
  --viz-seq-3: #b3b3b3;
  --viz-seq-4: #8c8c8c;
  --viz-seq-5: #595959;
  --viz-seq-6: #262626;
  --viz-font: ui-monospace, "SF Mono", "SFMono-Regular", Menlo,
              Consolas, "Liberation Mono", monospace;
  --viz-font-display: var(--viz-font);
  /* v41: Figtree bleibt fuer Titel und Fliesstext-Beiwerk (h1, h2,
     .viz-unterzeile, .viz-fuss). Diagrammtext, KPI und Etiketten
     bleiben monospace. @font-face steht in Abschnitt 1. */
  --viz-font-titel: "Figtree", system-ui, -apple-system, "Segoe UI", sans-serif;
  --viz-radius: 8px;
  --viz-radius-s: 6px;
  --viz-glas-fill: #ffffff;
  --viz-glas-blur: 0px;
  --viz-glas-rim: transparent;
  --viz-glas-edge: var(--viz-border);
  --viz-glas-radius: 8px;
  --viz-gut: #04b404;
  --viz-kritisch: #f84444;
  --viz-div-neutral: #f0efec;
  --viz-div-gut-1: #d4e7ce;
  --viz-div-gut-2: #a5d89e;
  --viz-div-gut-3: #77ca6f;
  --viz-div-gut-4: #3cbb36;
  --viz-div-schlecht-1: #f7d7d1;
  --viz-div-schlecht-2: #fcafa6;
  --viz-div-schlecht-3: #fd887e;
  --viz-div-schlecht-4: #fa5b56;
}
/* -------------------------------------------------------------------
   2. Typografie
   H1 humanistisch-serifenlos, H2/Etiketten Versalien-Monospace.
   ------------------------------------------------------------------- */

.viz-root h1 {
  margin: 0 0 var(--xxs, 0.4rem);
  font-size: var(--l, 1.56rem);
  font-family: var(--viz-font-titel);   /* v41: Figtree zurueck */
  font-weight: 600;
  letter-spacing: -0.02em;
}
.viz-root h2 {
  margin: 0;
  font-size: var(--xs, 0.8rem);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}
.viz-lead {
  font-size: var(--xs);
  color: var(--viz-muted);
}

.h2 {
    font-family: var(--viz-font-titel);   /* v41: Figtree zurueck */
}
/* -------------------------------------------------------------------
   3. Karten und KPI-Kacheln
   Weisse Flaeche, 1 px Linie, 8 px Radius (LifeOS).
   ------------------------------------------------------------------- */

.viz-karte {
  margin-bottom: var(--viz-gap);
  padding: var(--xxxxl, 1.25rem);
  background: #ffffff;
  border: 1px solid var(--viz-border);
  border-radius: var(--viz-radius);
}
.viz-kopfzeile {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--r, 1rem);
  margin-bottom: var(--s, 0.8rem);
}
.viz-unterzeile {
  margin: 0;
  font-family: var(--viz-font-titel);   /* v41: Figtree zurueck */
  font-size: var(--xs, 0.8rem);
  color: var(--viz-muted);
}
.viz-kpis {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));   /* v35: immer 4 oder 2, nie ungerade */
  gap: var(--viz-gap);
  margin-bottom: var(--viz-gap);
}
.viz-kpi {
  padding: var(--r, 1rem) var(--m, 1.25rem);
  position: relative;
  container-type: inline-size;   /* v39: cqw-Bezug fuer den Wert */
  color: var(--viz-text);
  box-shadow: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  background: #ffffff;
  border: 1px solid var(--viz-border);
  border-radius: var(--viz-radius);
}
.viz-kpi-titel {
  margin: 0 0 var(--xxs, 0.4rem);
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--viz-text);
}
.viz-kpi-wert {
  font-family: var(--viz-font-display);
  white-space: nowrap;                             /* v39: Zahlen brechen nie um */
  font-size: var(--xl, 1.9rem);                    /* Rueckfall ohne cq-Support */
  font-size: min(var(--xl, 1.9rem), 11.5cqw);      /* v39: schrumpft statt umzubrechen */
  font-weight: var(--viz-fw-kpi);
  line-height: 1.05;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}
.viz-kpi-delta {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-top: var(--xxs, 0.4rem);
  font-size: var(--xs, 0.8rem);
  font-variant-numeric: tabular-nums;
  color: var(--viz-muted);
}
.viz-delta-hoch {
  color: var(--viz-kritisch);
}
.viz-delta-runter {
  color: var(--viz-gut);
}
/* -------------------------------------------------------------------
   4. Diagrammflaechen
   ------------------------------------------------------------------- */

.viz-chart {
  width: 100%;
  height: 340px;
}
.viz-chart-hoch {
  height: 420px;
}
.viz-chart-karte {
  height: 560px;
}
.viz-chart-karte-eu {
  height: 700px;
}
/* -------------------------------------------------------------------
   5. Schalter und Knoepfe
   Aktiver Modus als schwarze Pille mit weisser Schrift.
   ------------------------------------------------------------------- */

.viz-knopfreihe {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--xxs, 0.4rem);
}
.viz-tabelle-schalter,
.viz-einbetten {
  padding: var(--xxs, 0.4rem) var(--s, 0.8rem);
  font: inherit;
  color: var(--viz-text-2);
  background: none;
  border: 1px solid var(--viz-border);
  cursor: pointer;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  border-radius: var(--viz-radius-s);
}
.viz-tabelle-schalter:hover,
.viz-einbetten:hover {
  color: var(--viz-text);
}
.viz-modus {
  display: inline-flex;
  overflow: hidden;
  border: 1px solid var(--viz-border);
  border-radius: var(--viz-radius-s);
}
.viz-modus button {
  padding: var(--xxs, 0.4rem) var(--s, 0.8rem);
  font: inherit;
  color: var(--viz-text-2);
  background: none;
  border: 0;
  cursor: pointer;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.viz-modus button[aria-pressed="true"] {
  font-weight: var(--viz-fw-kraeftig);
  color: #ffffff;
  background: #0a0a0a;
}
.viz-tabelle-schalter:focus-visible,
.viz-modus button:focus-visible,
.viz-einbetten:focus-visible,
dialog.viz-dialog button:focus-visible {
  outline: 2px solid var(--viz-series-1);
  outline-offset: 2px;
}
.viz-verborgen,
.viz-tabelle-schalter:not([data-ziel="t-bezirke"]) {
  display: none;
}
/* -------------------------------------------------------------------
   6. Tabellen
   ------------------------------------------------------------------- */

table.viz-tabelle {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--xs, 0.8rem);
  font-variant-numeric: tabular-nums;
}
table.viz-tabelle th {
  padding: var(--xxs, 0.4rem) var(--xs, 0.8rem);
  text-align: left;
  font-weight: var(--viz-fw-kraeftig);
  color: var(--viz-text-2);
  border-bottom: 1px solid var(--viz-axis);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
table.viz-tabelle td {
  padding: var(--xxs, 0.4rem) var(--xs, 0.8rem);
  color: var(--viz-text);
  border-bottom: 1px solid var(--viz-grid);
}
table.viz-tabelle th.num,
table.viz-tabelle td.num {
  text-align: right;
}
.viz-spark-zelle {
  width: 130px;
}
/* -------------------------------------------------------------------
   7. Hinweiskasten und Fusszeile
   ------------------------------------------------------------------- */

.viz-hinweis {
  margin-bottom: var(--viz-gap);
  padding: var(--s, 0.8rem) var(--r, 1rem);
  font-size: var(--xs, 0.8rem);
  color: var(--viz-text-2);
  background: var(--viz-surface);
  border: 1px solid var(--viz-border);
  border-left: 3px solid var(--viz-series-2);
  border-radius: var(--viz-radius);
  border-left-width: 3px;
}
.viz-fuss {
  font-family: var(--viz-font-titel);   /* v41: Figtree zurueck */
  font-size: var(--xs, 0.8rem);
  line-height: 1.6;
  color: var(--viz-muted);
}
.viz-fuss a {
  color: inherit;
}
/* -------------------------------------------------------------------
   8. Kopfzeilen-Varianten der Sektionen
   ------------------------------------------------------------------- */

#s-verlauf .viz-kopfzeile,
.viz-karte[data-chart="zeitreihe"] .viz-kopfzeile,
.viz-karte[data-chart="ausbildung"] .viz-kopfzeile {
  grid-column: 1;
  align-self: center;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  margin-bottom: 0;
  padding-top: 0;
  gap: var(--r, 1rem);
}
#s-verlauf .viz-knopfreihe {
  width: 100%;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--s, 0.8rem);
}
#s-verlauf .viz-tabelle-schalter {
  margin-left: auto;
}
/* -------------------------------------------------------------------
   9. Einbetten-Dialog
   ------------------------------------------------------------------- */

dialog.viz-dialog {
  width: calc(100% - 40px);
  max-width: var(--container-s, 640px);
  padding: var(--m, 1.4rem);
  font-family: var(--viz-font);
  color: var(--viz-text);
  background: var(--viz-surface);
  border: 1px solid var(--viz-border);
  border-radius: var(--viz-radius);
}
dialog.viz-dialog::backdrop {
  background: rgb(0 0 0 / 0.35);
}
dialog.viz-dialog h3 {
  margin: 0 0 var(--xxs, 0.4rem);
  font-family: var(--viz-font-display);
  font-size: var(--s, 1rem);
  font-weight: var(--viz-fw-kraeftig);
}
dialog.viz-dialog p {
  margin: 0 0 var(--s, 0.8rem);
  font-size: var(--xs, 0.8rem);
  line-height: 1.55;
  color: var(--viz-text-2);
}
dialog.viz-dialog textarea {
  width: 100%;
  height: 128px;
  padding: var(--xs, 0.8rem);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: var(--xs, 0.8rem);
  line-height: 1.5;
  color: var(--viz-text);
  background: var(--viz-plane);
  border: 1px solid var(--viz-border);
  border-radius: var(--viz-radius);
  resize: vertical;
}
dialog.viz-dialog .viz-dialog-fuss {
  display: flex;
  gap: var(--xxs, 0.4rem);
  justify-content: flex-end;
  margin-top: var(--s, 0.8rem);
}
dialog.viz-dialog button {
  padding: var(--xxs, 0.4rem) var(--s, 0.8rem);
  font: inherit;
  font-size: var(--xs, 0.8rem);
  border-radius: var(--viz-radius);
  cursor: pointer;
}
dialog.viz-dialog button.primaer {
  color: #fff;
  background: var(--viz-series-1);
  border: 0;
}
dialog.viz-dialog button.sekundaer {
  color: var(--viz-text-2);
  background: none;
  border: 1px solid var(--viz-border);
}
/* -------------------------------------------------------------------
   10. Sektionsgeometrie — zweispaltige Karten
   Sektion traegt das Polster, Innenkacheln stehen auf 0
   (einheitlich 83 px sichtbarer Innenabstand, messend abgenommen).
   ------------------------------------------------------------------- */

.viz-karte[data-chart="zeitreihe"],
#s-verlauf,
#s-generationen,
.viz-karte[data-chart="ausbildung"],
#s-laender,
#s-fluss,
#s-dauer,
#s-stellen,
#s-schulung,
#s-branche,
#s-eurang,
#s-eukarte {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  column-gap: var(--viz-gap);
  align-items: start;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  padding: var(--xxxxl, 1.25rem);
  background: #ffffff;
}
.viz-karte[data-chart="zeitreihe"] .viz-chart {
  grid-column: 2 / -1;
  box-sizing: border-box;
  height: auto;
  background: var(--viz-surface);
  padding: 0;
  min-height: 340px;
}
.viz-karte[data-chart="zeitreihe"] #t-zeitreihe,
#s-verlauf #t-verlauf,
#s-generationen #t-generationen,
.viz-karte[data-chart="ausbildung"] #t-ausbildung,
#s-fluss #t-fluss,
#s-dauer #t-dauer,
#s-stellen #t-stellen,
#s-schulung #t-schulung,
#s-branche #t-branche,
#s-eurang #t-eurang,
#s-eukarte #t-eukarte {
  grid-column: 1 / -1;
  box-sizing: border-box;
  background: var(--viz-surface);
  padding: 0;
  margin-top: var(--viz-gap, 1.25rem);
}
#s-verlauf .viz-einbetten {
  margin-left: 0;
}
#s-verlauf .viz-chart,
.viz-karte[data-chart="ausbildung"] .viz-chart {
  grid-column: 2 / -1;
  box-sizing: border-box;
  height: auto;
  background: var(--viz-surface);
  padding: 0;
  min-height: 420px;
}
#s-generationen .viz-chart,
#s-fluss .viz-chart {
  grid-column: 1 / 4;
  grid-row: 1 / span 2;
  box-sizing: border-box;
  height: auto;
  background: var(--viz-surface);
  padding: 0;
  min-height: 340px;
}
#s-generationen .viz-kopfzeile {
  grid-column: 4;
  grid-row: 1;
  align-self: center;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  margin-bottom: 0;
  padding-top: 0;
  gap: var(--r, 1rem);
}
#s-generationen #h-generationen,
#s-fluss #h-fluss {
  grid-column: 4;
  grid-row: 2;
  align-self: center;
}
.viz-kopfzeile > div:not(.viz-knopfreihe) {
  display: flex;
  flex-direction: column;
  gap: var(--xxs, 0.4rem);
}
.viz-karte[data-chart="karte"] {
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  padding: var(--xxxxl, 1.25rem);
  background: #ffffff;
}
#s-laender .viz-kopfzeile {
  grid-column: 1;
  align-self: center;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  gap: var(--r, 1rem);
  margin-bottom: 0;
}
#s-laender #t-laender {
  grid-column: 2 / -1;
  box-sizing: border-box;
  background: var(--viz-surface);
  padding: 0;
}
#s-fluss .viz-kopfzeile {
  grid-column: 4;
  grid-row: 1;
  align-self: center;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  gap: var(--r, 1rem);
  margin-bottom: 0;
}
#s-dauer .viz-chart,
#s-stellen .viz-chart,
#s-eurang .viz-chart {
  grid-row: 1 / span 2;
  box-sizing: border-box;
  height: auto;
  background: var(--viz-surface);
  grid-column: 2 / -1;
  padding: 0;
  min-height: 340px;
}
#s-schulung .viz-chart {
  grid-row: 1 / span 2;
  box-sizing: border-box;
  height: auto;
  background: var(--viz-surface);
  grid-column: 1 / 4;
  padding: 0;
  min-height: 340px;
}
#s-branche .viz-chart {
  grid-row: 1 / span 2;
  box-sizing: border-box;
  height: auto;
  background: var(--viz-surface);
  grid-column: 1 / 4;
  padding: 0;
  min-height: 420px;
}
#s-dauer .viz-kopfzeile,
#s-stellen .viz-kopfzeile,
#s-eurang .viz-kopfzeile {
  grid-row: 1;
  align-self: center;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  gap: var(--r, 1rem);
  margin-bottom: 0;
  grid-column: 1;
}
#s-schulung .viz-kopfzeile,
#s-branche .viz-kopfzeile,
#s-eukarte .viz-kopfzeile {
  grid-row: 1;
  align-self: center;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  gap: var(--r, 1rem);
  margin-bottom: 0;
  grid-column: 4;
}
#s-dauer #h-dauer,
#s-stellen #h-stellen,
#s-eurang #h-eurang {
  grid-row: 2;
  align-self: center;
  grid-column: 1;
}
#s-schulung #h-schulung,
#s-branche #h-branche,
#s-eukarte #h-eukarte {
  grid-row: 2;
  align-self: center;
  grid-column: 4;
}
#s-eukarte .viz-chart {
  grid-row: 1 / span 2;
  box-sizing: border-box;
  height: auto;
  background: var(--viz-surface);
  padding: 0;
  min-height: 700px;
  grid-column: 1 / 4;
}
/* -------------------------------------------------------------------
   11. Glas-Utility — stillgelegt
   Bleibt fuer evtl. Markup-Nutzung erhalten; Token sind neutral
   (weiss/0), sichtbar ist nur noch eine weisse Flaeche mit Linie.
   ------------------------------------------------------------------- */

.glas {
  position: relative;
  border-radius: var(--viz-glas-radius);
  color: var(--viz-text);
  box-shadow: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  background: #ffffff;
}
.glas::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  border: 1px solid var(--viz-glas-edge);
  pointer-events: none;
}
/* -------------------------------------------------------------------
   12. Schmale Fenster: 768 px, 480 px, 960 px
   Die Nav-Media-Queries (960/961) liegen im Element `Menu CSS`.
   ------------------------------------------------------------------- */

@media (max-width: 768px) {
  .viz-karte {
    padding: var(--s, 0.8rem);
    min-height: calc(260px + 2 * var(--s, 0.8rem));
  }
  .viz-kopfzeile {
    flex-wrap: wrap;
    gap: var(--xxs, 0.4rem);
  }
  .viz-chart-karte {
    height: 300px;
  }
  .viz-chart-karte-eu {
    height: 480px;
  }
  .viz-chart {
    height: 260px;
  }
  table.viz-tabelle {
    display: block;
    overflow-x: auto;
    white-space: nowrap;
    -webkit-overflow-scrolling: touch;
  }
  table.viz-tabelle th,
  table.viz-tabelle td {
    padding: var(--xxs, 0.4rem) var(--xxs, 0.4rem);
  }
  .viz-spark-zelle {
    width: 90px;
  }
}
@media (max-width: 480px) {
  .viz-kpis {
    grid-template-columns: repeat(2, minmax(0, 1fr));   /* v35: nie ungerade */
  }
  .viz-chart-karte {
    height: 240px;
  }
  .viz-chart-karte-eu {
    height: 380px;
  }
  .viz-chart {
    height: 230px;
  }
  .viz-kopfzeile .viz-knopfreihe {
    width: 100%;
  }
}
@media (max-width: 960px) {
  .viz-kpis {
    grid-template-columns: repeat(2, minmax(0, 1fr));   /* v35: 4 -> 2 Spalten */
  }
  .viz-karte[data-chart="zeitreihe"],
  #s-verlauf,
  #s-generationen,
  .viz-karte[data-chart="ausbildung"],
  #s-laender,
  #s-fluss,
  #s-dauer,
  #s-stellen,
  #s-schulung,
  #s-branche,
  #s-eurang,
  #s-eukarte {
    grid-template-columns: 1fr;
    padding: var(--s, 0.8rem);
  }
  .viz-karte[data-chart="zeitreihe"] .viz-kopfzeile {
    grid-column: 1;
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-start;
    padding-top: 0;
    margin-bottom: var(--s, 0.8rem);
  }
  .viz-karte[data-chart="zeitreihe"] .viz-chart,
  #s-verlauf .viz-chart,
  .viz-karte[data-chart="ausbildung"] .viz-chart {
    grid-column: 1;
    padding: 0;
    min-height: 260px;
  }
  #s-verlauf .viz-kopfzeile {
    grid-column: 1;
    padding-top: 0;
    margin-bottom: var(--s, 0.8rem);
  }
  #s-verlauf .viz-knopfreihe {
    flex-direction: row;
    align-items: center;
  }
  #s-verlauf .viz-einbetten {
    margin-left: auto;
  }
  #s-generationen .viz-chart,
  #s-fluss .viz-chart,
  #s-dauer .viz-chart,
  #s-stellen .viz-chart,
  #s-schulung .viz-chart,
  #s-branche .viz-chart,
  #s-eurang .viz-chart {
    grid-column: 1;
    grid-row: auto;
    padding: 0;
    min-height: 260px;
  }
  #s-generationen .viz-kopfzeile {
    grid-column: 1;
    grid-row: auto;
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-start;
    padding-top: 0;
    margin-bottom: var(--s, 0.8rem);
  }
  #s-generationen #h-generationen,
  #s-fluss #h-fluss,
  #s-dauer #h-dauer,
  #s-stellen #h-stellen,
  #s-schulung #h-schulung,
  #s-branche #h-branche,
  #s-eurang #h-eurang,
  #s-eukarte #h-eukarte {
    grid-column: 1;
    grid-row: auto;
  }
  .viz-karte[data-chart="ausbildung"] .viz-kopfzeile,
  #s-laender .viz-kopfzeile {
    grid-column: 1;
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: var(--s, 0.8rem);
  }
  #s-laender #t-laender {
    grid-column: 1;
    padding: 0;
  }
  #s-fluss .viz-kopfzeile,
  #s-dauer .viz-kopfzeile,
  #s-stellen .viz-kopfzeile,
  #s-schulung .viz-kopfzeile,
  #s-branche .viz-kopfzeile,
  #s-eurang .viz-kopfzeile,
  #s-eukarte .viz-kopfzeile {
    grid-column: 1;
    grid-row: auto;
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: var(--s, 0.8rem);
  }
  #s-eukarte .viz-chart {
    grid-column: 1;
    grid-row: auto;
    padding: 0;
    min-height: 480px;
  }
  .viz-karte[data-chart="karte"] {
    padding: var(--s, 0.8rem);
  }
}

/* -------------------------------------------------------------------
   13. Menuezeile ueber dem Dashboard (v35, 18.08.2026)
   Statisches Markup im ersten HTML-Code-Element. Trenner zwischen den
   Listenpunkten sind border-left (rein visuell, Screenreader-neutral).
   ------------------------------------------------------------------- */
.viz-menu {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: var(--xxs, 0.4rem) var(--r, 1rem);
  margin-bottom: var(--m, 1.25rem);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter,
               system-ui, sans-serif;
  font-size: 0.95rem;
  color: var(--viz-text, #0a0a0a);
}
.viz-menu p {
  margin: 0;
}
.viz-menu ul {
  display: flex;
  align-items: center;
  margin: 0;
  padding: 0;
  list-style: none;
}
.viz-menu li {
  display: flex;
}
.viz-menu li + li {
  border-left: 1px solid var(--viz-text, #0a0a0a);
}
.viz-menu a {
  padding: 2px 10px;
  color: inherit;
  text-decoration: none;
}
.viz-menu p a {
  padding: 2px 0;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.viz-menu li:last-child a {
  padding-right: 0;
}
.viz-menu a:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}
.viz-menu a:focus-visible {
  outline: 2px solid var(--viz-text, #0a0a0a);
  outline-offset: 2px;
}
/* v36: Menuezeile steht ausserhalb der weissen Flaeche (JS hebt sie vor
   den Container). Gleiche Aussenbreite wie der Container (--container-r),
   Text buendig mit dessen Kante. */
.viz-root > .viz-menu {
  box-sizing: border-box;
  width: 100%;
  max-width: var(--container-r, 96rem);
  margin: var(--m, 1.25rem) auto var(--s, 0.8rem);
  padding: 0;
}
/* v37: Menue-Knopf und Flyout der Sprungnavigation in der Kopfzeile.
   Die Leiste ist keine Rasterspalte mehr (volle Grafikbreite); das
   JS haengt .viz-nav in .viz-menu-flyout. Interner Kopf/Klappknopf
   der Leiste entfallen im Flyout. */
.viz-menu {
  position: relative;
}
.viz-menu-mit-knopf {
  justify-content: flex-start;
}
.viz-menu-mit-knopf ul {
  margin-left: auto;
}
.viz-menu-knopf {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: 0 14px;
  font-family: var(--viz-font, ui-monospace, monospace);
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--viz-text, #0a0a0a);
  background: var(--viz-surface, #ffffff);
  border: 1px solid var(--viz-border, #e5e5e5);
  border-radius: var(--viz-radius-s, 6px);
  cursor: pointer;
}
.viz-menu-knopf[aria-expanded="true"] {
  color: #ffffff;
  background: #0a0a0a;
  border-color: #0a0a0a;
}
.viz-menu-knopf:focus-visible {
  outline: 2px solid var(--viz-text, #0a0a0a);
  outline-offset: 2px;
}
.viz-menu-flyout {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  z-index: 60;
  width: min(320px, calc(100vw - 32px));
}
.viz-menu-flyout .viz-nav {
  position: static;
  margin: 0;   /* v40: 960er-Regel aus Menu CSS gibt sonst margin-bottom 20px */
  max-height: min(60vh, 480px);
  box-shadow: 0 12px 32px rgb(0 0 0 / 0.12);
}
.viz-menu-flyout .viz-nav-kopf {
  display: none;
}
.viz-menu-flyout .viz-nav ol {
  display: block !important;
}
/* v38: Mittelachse und Mobile. Theme gibt p/ul margin-bottom 16px —
   Flex zentriert die Margin-Box, Texte hingen 8px zu hoch. Unter
   700px wandern Impressum/Datenschutz ins Flyout (Klon per JS),
   die Kopfzeile bleibt einzeilig. */
.viz-root .viz-menu p {
  margin: 0 !important;   /* Theme-Margins kommen mit hoeherer Spezifitaet */
}
.viz-root .viz-menu-mit-knopf > ul {
  margin: 0 0 0 auto !important;   /* rechtsbuendig; Theme-Margin weg */
}
.viz-menu p {
  min-width: 0;
}
.viz-root .viz-menu .viz-menu-flyout-links {
  display: none;   /* muss .viz-menu ul (display:flex) schlagen */
  list-style: none;
  margin: 0 !important;   /* v40: buendig an den Grafiken-Block */
  padding: 6px 0;
  background: var(--viz-surface, #ffffff);
  border: 1px solid var(--viz-border, #e5e5e5);
  border-radius: var(--viz-radius-s, 6px);
  box-shadow: 0 12px 32px rgb(0 0 0 / 0.12);
}
.viz-menu-flyout-links li {
  display: block;
}
.viz-root .viz-menu .viz-menu-flyout-links li + li {
  border-left: 0;
}
.viz-menu-flyout-links a {
  display: block;
  padding: 10px 14px;
}
@media (max-width: 700px) {
  .viz-root > .viz-menu {
    margin: 0 auto var(--s, 0.8rem);   /* v40: kein Abstand ueber der Zeile */
    padding: 0 var(--s, 0.8rem);       /* v40: seitliche Luft am Viewportrand */
  }
  .viz-menu-mit-knopf > ul {
    display: none;
  }
  .viz-root .viz-menu .viz-menu-flyout-links {
    display: block;
  }
  .viz-menu {
    flex-wrap: nowrap;
  }
}

p {
	margin-top: unset;
	margin-bottom: var(--r);
}

/* ===================================================================
   Abschnitt 24 — Sprungnavigation IM CONTAINER (NUR ANGEHAENGT)
   Version v30, 17.08.2026   (ersetzt v28/v29 dieses Abschnitts)

   ANHAENGEN, NICHT ERSETZEN. Dieser Block kommt UNTEN an das
   bestehende Oxygen-Element `CSS Code` (Live-Stand: Abschnitte 1-23,
   dashboard-css-live.css). Oberhalb wird nichts geaendert.
   Steht dort noch Abschnitt 24 in der Fassung v28/v29: nur diesen
   Abschnitt loeschen und durch den hier ersetzen.

   WAS SICH GEGENUEBER v29 GEAENDERT HAT
   Die Leiste hing am <body>, klebte an der Fensterkante und rueckte
   ueber `body { padding-left }` die ganze Seite ein — Header und Footer
   inbegriffen. Sie steht jetzt IM Container des Dashboards:

     - `.viz-nav-raster` (die Klasse setzt das Skript auf den Container,
       in den es die Leiste eingehaengt hat) wird ab 961 px zu einem
       zweispaltigen Raster: Spalte 1 = Leiste, Spalte 2 = alles andere.
     - Die Leiste ist `position: sticky` statt `fixed`. Sie laeuft mit
       dem Container, bleibt am oberen Rand stehen und endet mit ihm.
       Kein `position: fixed` mehr — damit entfaellt auch das Problem
       aus v28, dass ein Vorfahre mit transform/backdrop-filter den
       Bezugsrahmen an sich zieht. `sticky` bezieht sich auf den
       naechsten scrollenden Vorfahren, hier das Dokument.
     - Kein `padding-left` am <body> mehr: Header, Footer und der Rest
       der Seite stehen wieder wie vorher.
     - Unter 960 px kein fixierter Burger und kein Schirm mehr. Die
       Leiste bleibt im Fluss, klappt als schmale Zeile oben im
       Container zusammen und wird per Knopf in ihrer eigenen Kopfzeile
       geoeffnet.

   Preis der Umstellung: die Grafikspalte wird um Leistenbreite plus
   Luecke schmaler (bei 1267 px Fenster: 827 -> 547 px). Stellschrauben
   dafuer stehen in 24.1.

   Was hier steht:
     24.1  Masse und Signalfarbe
     24.2  Zweispaltiges Raster im Container
     24.3  Die Leiste selbst
     24.4  Eintraege und Aktivmarkierung
     24.5  Sprungziel-Abstand der Karten
     24.6  Schmale Fenster (unter 960 px)
     24.7  Druck und reduzierte Bewegung
   =================================================================== */

/* -------------------------------------------------------------------
   24.1 Masse und Signalfarbe
   Zentral an einer Stelle. `--viz-nav-w` bestimmt die Spaltenbreite,
   `--viz-nav-luecke` den Abstand zur Grafikspalte. Wer den Grafiken
   mehr Platz geben will, verkleinert beides — oder erhoeht
   `--container-r` des Themes, dann wird der Container breiter.
   ------------------------------------------------------------------- */
:root {
  --viz-nav-w: 248px;          /* Breite der Menuespalte */
  --viz-nav-luecke: 32px;      /* Abstand Leiste <-> Grafiken */
  --viz-nav-bruch: 960px;      /* darunter: eingeklappt (nur Doku,
                                  Media Queries brauchen feste Werte) */
  --viz-nav-abstand: 24px;     /* Luft ueber dem angesprungenen Titel;
                                  das Skript ueberschreibt den Wert mit
                                  gemessener Leistenhoehe + LUFT_OBEN */
  --viz-nav-boden: 24px;       /* Luft unter der Leiste am Fensterrand */
}

/* -------------------------------------------------------------------
   24.2 Zweispaltiges Raster im Container

   `.viz-nav-raster` setzt das Skript auf genau das Element, in das es
   die Leiste eingehaengt hat (`.viz-root > .container`, sonst
   `.viz-root`). Deshalb steht hier kein Oxygen-Klassenname — das
   Raster sitzt immer da, wo die Leiste wirklich haengt.

   `grid-row` der Leiste setzt das Skript auf die genaue Zahl der
   Geschwister; `span 999` hier ist nur der Rueckfall, falls das Skript
   den Wert nicht setzen kann. Leere Zeilen sind 0 px hoch.

   Zum Abstandsverhalten: Rasterelemente bilden einen eigenen
   Formatierungskontext, die 24-px-Aussenabstaende der Karten fallen
   also nicht mehr aus ihren Oxygen-Huellen heraus, sondern zaehlen zu
   deren Hoehe. Der sichtbare Abstand bleibt derselbe.
   ------------------------------------------------------------------- */
@media (min-width: 961px) {
  .viz-nav-raster {
    display: grid;
    grid-template-columns: var(--viz-nav-w) minmax(0, 1fr);
    column-gap: var(--viz-nav-luecke);
    align-items: start;
  }
  .viz-nav-raster > * {
    grid-column: 2;
    min-width: 0;   /* sonst sprengen breite ECharts-Leinwaende die Spalte */
  }
  .viz-nav-raster > .viz-nav {
    grid-column: 1;
    grid-row: 1 / span 999;
  }
}

/* ALTERNATIVE (alter Stand v29): Leiste am Fensterrand statt im
   Container. Dann in oxygen-navigation-javascript.txt das Einhaengen
   auf document.body zurueckstellen und hier ergaenzen:
     @media (min-width: 961px) { body.viz-nav-aktiv { padding-left: var(--viz-nav-w); } }
     .viz-nav { position: fixed; top: 0; left: 0; height: 100dvh; }
*/

/* -------------------------------------------------------------------
   24.3 Die Leiste selbst
   `sticky` mit `align-self: start`: die Leiste ist nur so hoch wie ihr
   Inhalt und wandert innerhalb ihrer Rasterzelle mit. `max-height`
   deckelt sie auf die Fensterhoehe, damit auch eine lange Liste
   vollstaendig erreichbar bleibt — dann scrollt sie in sich selbst.
   ------------------------------------------------------------------- */
.viz-nav {
  --viz-nav-signal: var(--viz-series-1, #2a78d6);
  position: sticky;
  top: var(--viz-nav-abstand, 24px);
  z-index: 5;
  align-self: start;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: var(--s, 0.8rem);
  max-height: calc(100dvh - var(--viz-nav-abstand, 24px) - var(--viz-nav-boden, 24px));
  padding: var(--m, 1.25rem) var(--s, 0.8rem);
  overflow-y: auto;
  overscroll-behavior: contain;
  font-family: var(--viz-font, system-ui, -apple-system, "Segoe UI", sans-serif);
  color: var(--viz-text, #000);
  background: var(--viz-surface, #fcfcfb);
  border: 1px solid var(--viz-border, #5a5a5a);
  border-radius: var(--viz-radius-m, var(--viz-radius-s, 10px));
}
/* Milchglas nur, wo der Browser es kann — dieselbe Regel wie bei
   .viz-karte in Abschnitt 5. Als Kind von .viz-root ist das jetzt
   unbedenklich: die Leiste ist nicht mehr `fixed`, ein eigener
   Bezugsrahmen stoert sie nicht. */
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .viz-nav {
    background: var(--viz-surface-glas, rgb(252 252 251 / .8));
    -webkit-backdrop-filter: var(--viz-blur, blur(12px) saturate(1.4));
    backdrop-filter: var(--viz-blur, blur(12px) saturate(1.4));
  }
}

/* Kopfzeile: Titel und — nur schmal — der Klappknopf */
.viz-nav-kopf {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--xs, 0.6rem);
}
.viz-nav-titel {
  margin: 0;
  padding: 0 10px;
  font-family: var(--viz-font-display, var(--viz-font, sans-serif));
  font-size: var(--xxs, 0.72rem);
  font-weight: var(--viz-fw-kraeftig, 600);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--viz-muted, #000);
}
.viz-nav ol {
  margin: 0;
  padding: 0;
  list-style: none;
}
.viz-nav li[hidden] {
  display: none;   /* Karten, deren Daten noch nicht geladen sind */
}
.viz-nav[hidden] {
  display: none;
}

/* -------------------------------------------------------------------
   24.4 Eintraege und Aktivmarkierung
   Die Signalfarbe wirkt dreifach: Schriftfarbe, Balken links,
   getoenter Grund. Farbe allein waere zu wenig — WCAG 1.4.1.
   ------------------------------------------------------------------- */
.viz-nav a {
  display: block;
  padding: 7px 10px;
  font-size: var(--xs, 0.8rem);
  font-weight: var(--viz-fw-normal, 400);
  line-height: 1.35;
  color: var(--viz-text-2, #000);
  text-decoration: none;
  border-left: 2px solid transparent;
  transition: color .15s ease, background-color .15s ease, border-color .15s ease;
}
.viz-nav a:hover {
  background: var(--viz-plane, #f9f9f7);
}
.viz-nav a[aria-current="true"] {
  color: var(--viz-nav-signal);
  font-weight: var(--viz-fw-kraeftig, 600);
  border-left-color: var(--viz-nav-signal);
  background: var(--viz-plane, #f9f9f7);   /* Rueckfall */
  background: color-mix(in srgb, var(--viz-nav-signal) 10%, transparent);
}
.viz-nav a:focus-visible {
  outline: 2px solid var(--viz-nav-signal);
  outline-offset: -2px;
}
/* Zaehlung vor dem Titel — hilft beim Wiederfinden, wenn zwei Karten
   aehnlich heissen. Nicht anwaehlbar, damit sie nicht mitkopiert wird. */
.viz-nav ol {
  counter-reset: viz-nav;
}
.viz-nav li {
  counter-increment: viz-nav;
}
.viz-nav a::before {
  content: counter(viz-nav) "\00a0\00a0";
  font-variant-numeric: tabular-nums;
  color: var(--viz-muted, #666);
  -webkit-user-select: none;
  user-select: none;
}
.viz-nav a[aria-current="true"]::before {
  color: var(--viz-nav-signal);
}

/* -------------------------------------------------------------------
   24.5 Sprungziel-Abstand
   Ohne scroll-margin klebt der angesprungene Titel an der Fensterkante.
   Den Wert setzt das Skript aus der gemessenen Hoehe fixierter Leisten
   am oberen Rand (Adminleiste, klebriger Theme-Kopf) plus LUFT_OBEN —
   derselbe Wert, den die Leiste als `top` benutzt.
   ------------------------------------------------------------------- */
.viz-root .viz-karte,
.viz-root .viz-kpis {
  scroll-margin-top: var(--viz-nav-abstand, 24px);
}

/* -------------------------------------------------------------------
   24.6 Schmale Fenster (unter 960 px)
   Einspaltig. Die Leiste bleibt im Fluss ganz oben im Container und
   klappt auf eine Zeile zusammen; der Knopf sitzt in ihrer Kopfzeile.
   Kein fixierter Knopf, kein Schirm — alles bleibt im Container.
   ------------------------------------------------------------------- */
.viz-nav-schalter {
  display: none;   /* ab 961 px steht die Liste ohnehin offen */
}
@media (max-width: 960px) {
  .viz-nav-raster {
    display: block;
  }
  .viz-nav {
    position: sticky;
    top: var(--viz-nav-abstand, 24px);
    margin-bottom: var(--m, 1.25rem);
    max-height: min(70dvh, calc(100dvh - var(--viz-nav-abstand, 24px) - var(--viz-nav-boden, 24px)));
  }
  /* eingeklappt: nur die Kopfzeile, kein Eigenscroll */
  .viz-nav:not(.viz-nav-offen) {
    overflow: hidden;
  }
  .viz-nav:not(.viz-nav-offen) ol {
    display: none;
  }
  .viz-nav-schalter {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    box-sizing: border-box;
    min-width: 44px;   /* 44 px = Mindestgroesse fuer Fingerziele, WCAG 2.5.5 */
    min-height: 44px;
    padding: 0 12px;
    font: inherit;
    font-size: var(--xs, 0.8rem);
    color: var(--viz-text, #000);
    background: var(--viz-plane, #f9f9f7);
    border: 1px solid var(--viz-border, #5a5a5a);
    border-radius: var(--viz-radius-s, 6px);
    cursor: pointer;
  }
  .viz-nav-schalter::after {
    content: "";
    width: 8px;
    height: 8px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: translateY(-2px) rotate(45deg);
    transition: transform .2s ease;
  }
  .viz-nav-schalter[aria-expanded="true"] {
    border-color: var(--viz-series-1, #2a78d6);
  }
  .viz-nav-schalter[aria-expanded="true"]::after {
    transform: translateY(2px) rotate(-135deg);
  }
  .viz-nav-schalter:focus-visible {
    outline: 2px solid var(--viz-series-1, #2a78d6);
    outline-offset: 2px;
  }
}

/* -------------------------------------------------------------------
   24.7 Druck und reduzierte Bewegung
   ------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .viz-nav,
  .viz-nav a,
  .viz-nav-schalter::after {
    transition: none;
  }
}
@media print {
  .viz-nav {
    display: none !important;
  }
  .viz-nav-raster {
    display: block !important;
  }
}

/* ===================================================================
   Abschnitt 25 — TABLET-UMBRUCH 1024 px (NUR ANGEHAENGT)
   Version v42, 18.08.2026

   ANHAENGEN, NICHT ERSETZEN. Dieser Block kommt UNTEN an idl.css,
   hinter Abschnitt 24 (Sprungnavigation). Oberhalb wird nichts
   geaendert. Lokales Spiegelbild: idl-css-zusatz-v42.css.

   WARUM
   Drei Umbruchpunkte lagen zu niedrig, und dazwischen entstanden
   genau die Fehler, die auf dem iPad sichtbar waren:

     960 px  Sektionsgeometrie. Bei 1024 px (iPad quer) galt noch das
             vierspaltige Raster — die Kopfzeilen standen links oder
             rechts NEBEN der Grafik statt darueber, und die
             Zeichenflaeche schrumpfte auf rund 480 px. Daher die
             abgeschnittenen Kategorienamen und Achsenzahlen.
     961 px  Sprungnavigation. Ihre Spalte (248 px + 32 px Luecke)
             blieb bei 1024 px stehen und nahm 280 px der 1024 weg —
             der eigentliche Grund fuer die enge Grafikspalte.
     700 px  Menuezeile. Bei 768 px fehlte das seitliche Polster, und
             Impressum/Datenschutz standen noch in der Kopfzeile, wo
             sie ueber den rechten Rand hinausliefen.

   Alle drei ziehen auf 1024 px bzw. 768 px nach. Die bestehenden
   Bloecke bleiben unangetastet; weil dieser Abschnitt spaeter in der
   Datei steht, gewinnt er bei gleicher Spezifitaet.

   NICHT NUR CSS: In der Sprungnavigation (Oxygen-Element
   `JavaScript Code`) steht die Konstante BRUCH_MOBIL auf 960. Die
   Zahl muss zur Media Query in 25.2 passen, sonst schliesst sich das
   Flyout zwischen 961 und 1024 px nach einem Klick nicht von selbst.
   Auf 1024 aendern.

   Was hier steht:
     25.1  Sektionsgeometrie einspaltig bis 1024 px
     25.2  Sprungnavigation eingeklappt bis 1024 px
     25.3  Menuezeile bis 768 px
   =================================================================== */

/* -------------------------------------------------------------------
   25.1 Sektionsgeometrie einspaltig bis 1024 px
   Inhaltsgleich mit dem bestehenden 960er-Block in Abschnitt 12, nur
   mit hoeherer Schwelle. Zwischen 0 und 960 px greifen beide und sagen
   dasselbe — kein Konflikt.
   ------------------------------------------------------------------- */
@media (max-width: 1024px) {
  .viz-kpis {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .viz-karte[data-chart="zeitreihe"],
  #s-verlauf,
  #s-generationen,
  .viz-karte[data-chart="ausbildung"],
  #s-laender,
  #s-fluss,
  #s-dauer,
  #s-stellen,
  #s-schulung,
  #s-branche,
  #s-eurang,
  #s-eukarte {
    grid-template-columns: 1fr;
    padding: var(--s, 0.8rem);
  }
  .viz-karte[data-chart="zeitreihe"] .viz-kopfzeile {
    grid-column: 1;
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-start;
    padding-top: 0;
    margin-bottom: var(--s, 0.8rem);
  }
  .viz-karte[data-chart="zeitreihe"] .viz-chart,
  #s-verlauf .viz-chart,
  .viz-karte[data-chart="ausbildung"] .viz-chart {
    grid-column: 1;
    padding: 0;
    min-height: 260px;
  }
  #s-verlauf .viz-kopfzeile {
    grid-column: 1;
    padding-top: 0;
    margin-bottom: var(--s, 0.8rem);
  }
  #s-verlauf .viz-knopfreihe {
    flex-direction: row;
    align-items: center;
  }
  #s-verlauf .viz-einbetten {
    margin-left: auto;
  }
  #s-generationen .viz-chart,
  #s-fluss .viz-chart,
  #s-dauer .viz-chart,
  #s-stellen .viz-chart,
  #s-schulung .viz-chart,
  #s-branche .viz-chart,
  #s-eurang .viz-chart {
    grid-column: 1;
    grid-row: auto;
    padding: 0;
    min-height: 260px;
  }
  #s-generationen .viz-kopfzeile {
    grid-column: 1;
    grid-row: auto;
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-start;
    padding-top: 0;
    margin-bottom: var(--s, 0.8rem);
  }
  #s-generationen #h-generationen,
  #s-fluss #h-fluss,
  #s-dauer #h-dauer,
  #s-stellen #h-stellen,
  #s-schulung #h-schulung,
  #s-branche #h-branche,
  #s-eurang #h-eurang,
  #s-eukarte #h-eukarte {
    grid-column: 1;
    grid-row: auto;
  }
  .viz-karte[data-chart="ausbildung"] .viz-kopfzeile,
  #s-laender .viz-kopfzeile {
    grid-column: 1;
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: var(--s, 0.8rem);
  }
  #s-laender #t-laender {
    grid-column: 1;
    padding: 0;
  }
  #s-fluss .viz-kopfzeile,
  #s-dauer .viz-kopfzeile,
  #s-stellen .viz-kopfzeile,
  #s-schulung .viz-kopfzeile,
  #s-branche .viz-kopfzeile,
  #s-eurang .viz-kopfzeile,
  #s-eukarte .viz-kopfzeile {
    grid-column: 1;
    grid-row: auto;
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: var(--s, 0.8rem);
  }
  #s-eukarte .viz-chart {
    grid-column: 1;
    grid-row: auto;
    padding: 0;
    min-height: 480px;
  }
  .viz-karte[data-chart="karte"] {
    padding: var(--s, 0.8rem);
  }
}

/* -------------------------------------------------------------------
   25.2 Sprungnavigation eingeklappt bis 1024 px
   Inhaltsgleich mit 24.6, nur mit hoeherer Schwelle. `display: block`
   schaltet das zweispaltige Raster aus 24.2 ab; die dortigen
   grid-column/grid-row-Angaben (auch die, die das Skript inline setzt)
   sind in einem Block-Container wirkungslos.
   ------------------------------------------------------------------- */
:root {
  --viz-nav-bruch: 1024px;   /* nur Doku, siehe 24.1 */
}
@media (max-width: 1024px) {
  .viz-nav-raster {
    display: block;
  }
  .viz-nav {
    position: sticky;
    top: var(--viz-nav-abstand, 24px);
    margin-bottom: var(--m, 1.25rem);
    max-height: min(70dvh, calc(100dvh - var(--viz-nav-abstand, 24px) - var(--viz-nav-boden, 24px)));
  }
  .viz-nav:not(.viz-nav-offen) {
    overflow: hidden;
  }
  .viz-nav:not(.viz-nav-offen) ol {
    display: none;
  }
  .viz-nav-schalter {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    box-sizing: border-box;
    min-width: 44px;
    min-height: 44px;
    padding: 0 12px;
    font: inherit;
    font-size: var(--xs, 0.8rem);
    color: var(--viz-text, #000);
    background: var(--viz-plane, #f9f9f7);
    border: 1px solid var(--viz-border, #5a5a5a);
    border-radius: var(--viz-radius-s, 6px);
    cursor: pointer;
  }
  .viz-nav-schalter::after {
    content: "";
    width: 8px;
    height: 8px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: translateY(-2px) rotate(45deg);
    transition: transform .2s ease;
  }
  .viz-nav-schalter[aria-expanded="true"] {
    border-color: var(--viz-series-1, #2a78d6);
  }
  .viz-nav-schalter[aria-expanded="true"]::after {
    transform: translateY(2px) rotate(-135deg);
  }
  .viz-nav-schalter:focus-visible {
    outline: 2px solid var(--viz-series-1, #2a78d6);
    outline-offset: 2px;
  }
}

/* -------------------------------------------------------------------
   25.3 Menuezeile bis 768 px
   Inhaltsgleich mit dem 700er-Block am Ende von Abschnitt 13. 768 px
   ist die Hochkantbreite des iPad — dort fehlte bisher das seitliche
   Polster, und Impressum/Datenschutz liefen aus der Zeile heraus.
   ------------------------------------------------------------------- */
@media (max-width: 768px) {
  .viz-root > .viz-menu {
    margin: 0 auto var(--s, 0.8rem);
    padding: 0 var(--s, 0.8rem);
  }
  .viz-menu-mit-knopf > ul {
    display: none;
  }
  .viz-root .viz-menu .viz-menu-flyout-links {
    display: block;
  }
  .viz-menu {
    flex-wrap: nowrap;
  }
}