/* Sommer Design System 2.0 – Komponenten (Präfix .ds-). Nur Tokens, Radius 0, keine Schatten außer
   --elevation-overlay. Zustände: hover, active, focus-visible, disabled, invalid, warning, readonly, loading.
   Spezifikation: design-system/components.md */

/* ---------- Symbole (SVG-Sprite icons/icons.svg) ---------- */
.ds-icon { width: var(--size-icon-sm); height: var(--size-icon-sm); flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: square; stroke-linejoin: miter; vertical-align: -0.15em; }
.ds-icon--md { width: var(--size-icon-md); height: var(--size-icon-md); }

/* ---------- Knöpfe ---------- */
.ds-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2xs);
  min-height: var(--size-control-height); min-width: var(--size-target-min);
  padding: 0 var(--space-sm); border: var(--size-border-control) solid transparent; border-radius: var(--radius-base);
  font-family: var(--type-app-control-family); font-size: var(--type-app-control-size); font-weight: var(--type-app-control-weight);
  line-height: var(--type-app-control-leading); text-decoration: none; cursor: pointer; white-space: nowrap;
  transition: background-color var(--motion-duration-fast) var(--motion-easing-transition), border-color var(--motion-duration-fast) var(--motion-easing-transition);
}
.ds-btn--primary { background: var(--color-action-primary); color: var(--color-text-on-action); }
.ds-btn--primary:hover { background: var(--color-action-primary-hover); color: var(--color-text-on-action); }
.ds-btn--secondary { background: var(--color-action-secondary); color: var(--color-text-primary); border-color: var(--color-border-control); }
.ds-btn--secondary:hover { background: var(--color-action-secondary-hover); color: var(--color-text-primary); }
.ds-btn--tertiary { background: transparent; color: var(--color-text-link); padding: 0 var(--space-3xs); }
.ds-btn--tertiary:hover { color: var(--color-text-primary); text-decoration: underline; text-underline-offset: 3px; }
.ds-btn--cta { background: var(--color-action-cta); color: var(--color-text-on-action); min-height: var(--size-target-touch); padding: 0 var(--space-md); }
.ds-btn--cta:hover { background: var(--color-action-cta-hover); color: var(--color-text-on-action); }
.ds-btn--danger { background: var(--color-action-danger); color: var(--color-text-on-action); }
.ds-btn--danger:hover { background: var(--color-action-danger-hover); color: var(--color-text-on-action); }
.ds-btn:active { transform: translateY(1px); }
.ds-btn:disabled, .ds-btn[aria-disabled="true"] {
  background: var(--color-bg-subtle); color: var(--color-text-muted); border-color: var(--color-border-hairline); cursor: not-allowed; transform: none; text-decoration: none;
}
.ds-btn.is-loading { cursor: progress; }
.ds-btn.is-loading::after { content: ''; width: 0.9em; height: 0.9em; border: 2px solid currentColor; border-right-color: transparent; animation: ds-spin 700ms linear infinite; }
@keyframes ds-spin { to { transform: rotate(360deg); } }

/* ---------- Formularfelder ---------- */
.ds-field { display: flex; flex-direction: column; gap: var(--space-3xs); margin: 0 0 var(--space-xs); min-width: 0; }
.ds-field__label { font-size: var(--type-app-caption-size); font-weight: var(--type-app-caption-weight); color: var(--color-text-secondary); }
.ds-field__hint { font-size: var(--type-app-small-size); color: var(--color-text-muted); }
.ds-input {
  width: 100%; min-height: var(--size-control-height); padding: var(--space-3xs) var(--space-2xs);
  font: inherit; font-size: var(--type-app-body-size); color: var(--color-text-primary);
  background: var(--color-bg-field); border: var(--size-border-control) solid var(--color-border-control); border-radius: var(--radius-base);
}
textarea.ds-input { min-height: calc(var(--size-control-height) * 2); resize: vertical; }
select.ds-input { cursor: pointer; }
.ds-input:hover { border-color: var(--color-border-strong); }
.ds-input:focus-visible { outline: var(--size-focus-ring) solid var(--color-border-focus); outline-offset: var(--size-focus-offset); }
.ds-input:disabled { background: var(--color-bg-subtle); color: var(--color-text-muted); border-color: var(--color-border-hairline); cursor: not-allowed; }
.ds-input[readonly] { background: var(--color-bg-subtle); border-style: dashed; }
.ds-field.is-invalid .ds-input, .ds-input[aria-invalid="true"] { border: var(--size-border-emphasis) solid var(--color-danger); }
.ds-field.is-warning .ds-input { border: var(--size-border-emphasis) solid var(--color-warning); }
.ds-field__message { display: flex; gap: var(--space-3xs); align-items: flex-start; font-size: var(--type-app-small-size); line-height: var(--type-app-small-leading); }
.ds-field__message:empty { display: none; }
.ds-field.is-invalid .ds-field__message { color: var(--color-danger); }
.ds-field.is-warning .ds-field__message { color: var(--color-warning); }

.ds-fieldset { border: 0; padding: 0; margin: 0 0 var(--space-xs); min-width: 0; }
.ds-fieldset.is-invalid { border-left: var(--size-border-emphasis) solid var(--color-danger); padding-left: var(--space-2xs); }
.ds-fieldset.is-warning { border-left: var(--size-border-emphasis) solid var(--color-warning); padding-left: var(--space-2xs); }
.ds-check { display: inline-flex; align-items: center; gap: var(--space-2xs); min-height: var(--size-target-min); cursor: pointer; }
.ds-check input { width: 18px; height: 18px; margin: 0; accent-color: var(--color-action-primary); }

/* ---------- Status: Badges und Banner (immer Symbol + Text) ---------- */
.ds-badge {
  display: inline-flex; align-items: center; gap: var(--space-3xs); padding: 1px var(--space-2xs);
  font-size: var(--type-app-caption-size); font-weight: var(--type-app-caption-weight); line-height: var(--type-app-caption-leading);
  border: var(--size-border-hairline) solid currentColor; white-space: nowrap; font-variant-numeric: tabular-nums;
}
.ds-badge--success { color: var(--color-success); background: var(--color-success-bg); }
.ds-badge--warning { color: var(--color-warning); background: var(--color-warning-bg); }
.ds-badge--danger { color: var(--color-danger); background: var(--color-danger-bg); }
.ds-badge--info { color: var(--color-info); background: var(--color-info-bg); }
.ds-badge--neutral { color: var(--color-text-secondary); background: var(--color-bg-subtle); }

.ds-banner { display: flex; gap: var(--space-xs); align-items: flex-start; padding: var(--space-xs) var(--space-sm); color: var(--color-text-primary); border-left: var(--size-accent-bar) solid; }
.ds-banner--info { background: var(--color-info-bg); border-color: var(--color-info); }
.ds-banner--success { background: var(--color-success-bg); border-color: var(--color-success); }
.ds-banner--warning { background: var(--color-warning-bg); border-color: var(--color-warning); }
.ds-banner--danger { background: var(--color-danger-bg); border-color: var(--color-danger); }
.ds-banner > .ds-icon { margin-top: 0.15em; }
.ds-banner p { margin: 0; }
.ds-banner--info > .ds-icon { color: var(--color-info); }
.ds-banner--success > .ds-icon { color: var(--color-success); }
.ds-banner--warning > .ds-icon { color: var(--color-warning); }
.ds-banner--danger > .ds-icon { color: var(--color-danger); }

/* ---------- Stepper (Schrittleiste) ---------- */
/* Text bündig mit der Kante: Abstand über gap, nicht über Innenabstand. Mit .ds-band an der gemeinsamen Kante. */
.ds-stepper { display: flex; flex-wrap: wrap; gap: 0 var(--space-lg); background: var(--color-bg-surface); border-bottom: var(--size-border-hairline) solid var(--color-border-hairline); }
.ds-stepper__item {
  position: relative; display: inline-flex; align-items: center; gap: 5px;
  min-height: var(--size-target-touch); padding: 0; color: var(--color-text-secondary); text-decoration: none;
  font-size: var(--type-app-control-size); font-weight: 500; border-top: 3px solid transparent; border-bottom: 3px solid transparent;
}
.ds-stepper__item:hover { color: var(--color-text-primary); }
.ds-stepper__item[aria-current="step"], .ds-stepper__item[aria-current="page"] { color: var(--color-text-primary); font-weight: 600; border-bottom-color: var(--color-accent); }
@media (max-width: 600px) {
  .ds-stepper { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; gap: 0 var(--space-md); }
  .ds-stepper::-webkit-scrollbar { display: none; }
  .ds-stepper__item { flex: none; }
}

/* ---------- Menü (details/summary) ---------- */
.ds-menu { position: relative; }
.ds-menu > summary { list-style: none; }
.ds-menu > summary::-webkit-details-marker { display: none; }
.ds-menu__panel {
  position: absolute; right: 0; top: calc(100% + var(--space-3xs)); z-index: var(--layer-overlay); min-width: 13rem;
  display: flex; flex-direction: column; background: var(--color-bg-surface);
  border: var(--size-border-control) solid var(--color-border-control); box-shadow: var(--elevation-overlay);
}
.ds-menu__item {
  display: flex; align-items: center; gap: var(--space-2xs); min-height: var(--size-target-touch); padding: 0 var(--space-xs);
  background: none; border: 0; border-bottom: var(--size-border-hairline) solid var(--color-border-hairline);
  color: var(--color-text-primary); font: inherit; font-size: var(--type-app-control-size); text-align: left; cursor: pointer;
}
.ds-menu__item:last-child { border-bottom: 0; }
.ds-menu__item:hover { background: var(--color-bg-subtle); }

/* ---------- Karten (auch zuklappbar mit details) ---------- */
.ds-card { background: var(--color-bg-surface); border: var(--size-border-hairline) solid var(--color-border-hairline); padding: var(--size-module-padding); }
.ds-card--accent { border-top: var(--size-accent-bar) solid var(--color-accent); }
details.ds-card { padding: 0; }
details.ds-card > summary {
  display: flex; gap: var(--space-xs); align-items: center; min-height: var(--size-target-touch); padding: var(--space-2xs) var(--size-module-padding);
  cursor: pointer; list-style: none;
}
details.ds-card > summary::-webkit-details-marker { display: none; }
details.ds-card > summary .ds-card__chevron { transition: transform var(--motion-duration-fast) var(--motion-easing-transition); }
details.ds-card[open] > summary .ds-card__chevron { transform: rotate(90deg); }
details.ds-card[open] > summary { border-bottom: var(--size-border-hairline) solid var(--color-border-hairline); }
details.ds-card > .ds-card__body { padding: var(--size-module-padding); }

/* ---------- Tabelle ---------- */
.ds-table-wrap { overflow-x: auto; }
.ds-table { width: 100%; border-collapse: collapse; background: var(--color-bg-surface); font-size: var(--type-app-small-size); }
.ds-table th, .ds-table td { padding: var(--space-2xs) var(--space-xs); border: var(--size-border-hairline) solid var(--color-border-hairline); text-align: left; vertical-align: top; }
.ds-table th { background: var(--color-bg-subtle); font-weight: var(--type-app-control-weight); }
.ds-table .ds-numeric, .ds-table td.is-number { text-align: right; font-variant-numeric: tabular-nums; }

/* ---------- Kennzahlen, Meter, Balken ---------- */
.ds-kpi { display: flex; flex-direction: column; gap: 2px; background: var(--color-bg-surface); border: var(--size-border-hairline) solid var(--color-border-hairline); border-top: 3px solid var(--color-accent); padding: var(--space-xs) var(--space-sm); }
.ds-kpi__label { font-size: var(--type-app-small-size); color: var(--color-text-secondary); }
.ds-kpi__value { font-size: var(--type-app-numeric-size); font-weight: var(--type-app-numeric-weight); line-height: var(--type-app-numeric-leading); font-variant-numeric: tabular-nums; }
.ds-kpi__sub { font-size: var(--type-app-caption-size); color: var(--color-text-secondary); }
.ds-meter { display: block; height: 12px; background: var(--color-data-seq-track); }
.ds-bar { display: block; height: 12px; }
.ds-meter__fill, .ds-bar__fill { display: block; height: 100%; background: var(--color-data-seq); border-radius: 0 4px 4px 0; }

/* ---------- Statuszeile, leerer Zustand, Linien ---------- */
.ds-statusline { margin: 0; padding: var(--space-3xs) var(--space-md); font-size: var(--type-app-small-size); color: var(--color-text-secondary); background: var(--color-bg-page); }
.ds-statusline:empty { display: none; }
.ds-empty { display: flex; flex-direction: column; align-items: center; gap: var(--space-xs); padding: var(--space-xl) var(--space-md); text-align: center; color: var(--color-text-secondary); border: var(--size-border-hairline) dashed var(--color-border-control); }
.ds-accent-bar { height: var(--size-accent-bar); background: var(--color-accent); }
.ds-divider { height: var(--size-border-hairline); background: var(--color-border-hairline); border: 0; margin: var(--space-md) 0; }

/* ================= Seitenbausteine (aus dem Pilot AEVO Didaktik, 08.11.2026) ================= */

/* ---------- Seitenkopf: Wortmarke, Navigation auf deren Grundlinie, Hilfsfunktionen mit Trenner ---------- */
.ds-header {
  display: flex; flex-wrap: wrap; gap: var(--space-xs) var(--space-md); align-items: last baseline; justify-content: space-between;
  padding-top: var(--space-sm); padding-bottom: var(--space-sm); background: var(--color-bg-page); border-bottom: var(--size-border-hairline) solid var(--color-border-hairline);
}
.ds-header__brand { display: flex; flex-direction: column; gap: 2px; text-decoration: none; color: var(--color-text-primary); }
.ds-header__person {
  font-size: var(--type-label-caps-size); font-weight: var(--type-label-caps-weight); letter-spacing: var(--type-label-caps-tracking);
  line-height: var(--type-label-caps-leading); text-transform: uppercase; color: var(--color-text-secondary);
}
.ds-header__title { display: block; font-family: var(--font-display); font-size: var(--type-app-subheading-size); font-weight: 650; line-height: 1.25; letter-spacing: -0.005em; }
.ds-header__brand:hover .ds-header__title { color: var(--color-text-link); }
/* Variante mit Logo (wie azav-kalkulation.dipl-ing-sommer.de): Logo links, Wortmarke rechts daneben */
.ds-header__brand--logo { flex-direction: row; align-items: center; gap: var(--space-xs); }
.ds-header__wortmarke { display: flex; flex-direction: column; gap: 2px; }
.ds-header__logo { display: block; width: 34px; height: auto; flex: none; }
.ds-header__logo--dark { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .ds-header__logo--light { display: none; }
  :root:not([data-theme="light"]) .ds-header__logo--dark { display: block; }
}
:root[data-theme="dark"] .ds-header__logo--light { display: none; }
:root[data-theme="dark"] .ds-header__logo--dark { display: block; }
.ds-nav { display: flex; flex-wrap: wrap; gap: var(--space-3xs) var(--space-md); align-items: baseline; }
.ds-nav a {
  display: inline-block; padding: var(--space-3xs) 0; color: var(--color-text-secondary); text-decoration: none;
  font-weight: 500; font-size: var(--type-app-control-size); line-height: var(--type-app-control-leading);
}
.ds-nav a:hover { color: var(--color-text-primary); text-decoration: underline; text-underline-offset: 0.25em; }
.ds-nav a[aria-current="page"] { color: var(--color-text-link); text-decoration: underline; text-underline-offset: 0.25em; text-decoration-thickness: 2px; }
.ds-nav__divider { align-self: center; width: 1px; height: 16px; background: var(--color-border-control); }
@media (max-width: 600px) {
  .ds-header { padding-top: var(--space-xs); padding-bottom: var(--space-2xs); gap: var(--space-2xs); }
  .ds-nav { flex-wrap: nowrap; overflow-x: auto; width: 100%; scrollbar-width: none; }
  /* Wisch-Hinweis: Rand weich ausblenden, solange dort weitere Einträge liegen (Maske, ohne JS).
     Mit scroll-gesteuerter Animation verschwindet die Ausblendung am Ende und erscheint links nach dem Wischen;
     ohne diese Unterstützung bleibt nur die rechte Kante. */
  .ds-nav, .ds-stepper {
    -webkit-mask-image: linear-gradient(to right, transparent 0, black var(--ds-wisch-l), black calc(100% - var(--ds-wisch-r)), transparent 100%);
    mask-image: linear-gradient(to right, transparent 0, black var(--ds-wisch-l), black calc(100% - var(--ds-wisch-r)), transparent 100%);
  }
  @supports (animation-timeline: scroll()) {
    .ds-nav, .ds-stepper { animation: ds-wisch linear both; animation-timeline: scroll(self inline); }
  }
  .ds-nav::-webkit-scrollbar { display: none; }
  .ds-nav > * { flex: none; }
}

/* Wisch-Hinweis (siehe .ds-nav, .ds-stepper): Breite der weichen Kanten links/rechts */
@property --ds-wisch-l { syntax: '<length>'; inherits: false; initial-value: 0px; }
@property --ds-wisch-r { syntax: '<length>'; inherits: false; initial-value: 32px; }
@keyframes ds-wisch {
  0% { --ds-wisch-l: 0px; --ds-wisch-r: 32px; }
  10% { --ds-wisch-l: 32px; }
  90% { --ds-wisch-r: 32px; }
  100% { --ds-wisch-l: 32px; --ds-wisch-r: 0px; }
}

/* ---------- Hell/Dunkel-Umschalter: Symbol + Wort des Ziels; nur der passende Teil ist sichtbar und benennt den Knopf ---------- */
.ds-theme-toggle { position: relative; align-self: center; min-height: var(--size-target-min); padding: 0; color: var(--color-text-secondary); font-weight: 500; font-size: var(--type-app-control-size); }
.ds-theme-toggle:hover { color: var(--color-text-primary); }
.ds-theme-toggle__option { display: inline-flex; align-items: center; gap: var(--space-3xs); }
.ds-theme-toggle__to-light { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .ds-theme-toggle__to-dark { display: none; }
  :root:not([data-theme="light"]) .ds-theme-toggle__to-light { display: inline-flex; }
}
:root[data-theme="dark"] .ds-theme-toggle__to-dark { display: none; }
:root[data-theme="dark"] .ds-theme-toggle__to-light { display: inline-flex; }
@media (max-width: 600px) {
  .ds-theme-toggle__word { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}

/* ---------- Werkzeugleiste: Titel (20 px) mit Untertitel (13 px), Aktionen rechts ---------- */
.ds-toolbar {
  display: flex; flex-wrap: wrap; gap: var(--space-xs) var(--space-md); align-items: center; justify-content: space-between;
  padding-top: var(--space-sm); padding-bottom: var(--space-sm); background: var(--color-bg-surface); border-bottom: var(--size-border-hairline) solid var(--color-border-hairline);
}
.ds-toolbar__title > h1 { font-size: var(--type-app-heading-size); line-height: 1.2; }
.ds-toolbar__title > p { margin: var(--space-3xs) 0 0; color: var(--color-text-secondary); font-size: var(--type-app-small-size); }
.ds-toolbar__actions { display: flex; flex-wrap: wrap; gap: var(--space-2xs); align-items: center; }
@media (max-width: 600px) {
  .ds-toolbar { padding-top: var(--space-xs); padding-bottom: var(--space-xs); }
  .ds-toolbar__title > p { display: none; }
  .ds-toolbar__actions { flex-wrap: nowrap; width: 100%; }
  .ds-toolbar__actions > * { flex: none; }
}

/* ---------- Kennzeile und Akzentlinie ---------- */
.ds-kicker {
  margin: 0 0 var(--space-2xs); font-size: var(--type-label-caps-size); font-weight: var(--type-label-caps-weight); letter-spacing: var(--type-label-caps-tracking);
  line-height: var(--type-label-caps-leading); text-transform: uppercase; color: var(--color-text-muted);
}
.ds-accent-rule { width: 40px; height: var(--size-accent-bar); background: var(--color-accent); margin: 0 0 var(--space-sm); }

/* ---------- Einstieg (Hero): Text links, Bild rechts (ab 900 px 7:5, Abstand 56 px wie der Master), höchstens eine CTA ---------- */
.ds-hero { display: grid; grid-template-columns: 1fr; gap: var(--space-lg); align-items: center; margin: 0 0 var(--space-xl); }
.ds-hero__title { font-size: clamp(2rem, 1.5rem + 2.5vw, var(--type-h1-size)); margin: 0 0 var(--space-md); }
.ds-hero__title > span { display: block; }
.ds-hero__title > .ds-hero__accent { color: var(--color-accent-text); }
.ds-hero__lead { max-width: 46ch; margin: 0 0 var(--space-md); font-size: var(--type-body-lg-size); line-height: var(--type-body-lg-leading); color: var(--color-text-secondary); }
.ds-hero__lead strong { color: var(--color-text-primary); font-weight: 650; }
.ds-hero__action { display: flex; flex-wrap: wrap; gap: var(--space-2xs) var(--space-sm); align-items: center; margin: 0 0 var(--space-md); }
.ds-hero__note { font-size: var(--type-app-small-size); color: var(--color-text-secondary); }
.ds-hero__figure { margin: 0; }
.ds-hero__figure img { display: block; width: 100%; height: auto; border: var(--size-border-hairline) solid var(--color-border-hairline); border-top: var(--size-accent-bar) solid var(--color-accent); background: var(--color-bg-surface); }
.ds-hero__figure figcaption { margin-top: var(--space-2xs); font-size: var(--type-app-small-size); color: var(--color-text-secondary); }
.ds-hero__figure .ds-hero__img--dark { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .ds-hero__figure .ds-hero__img--light { display: none; }
  :root:not([data-theme="light"]) .ds-hero__figure .ds-hero__img--dark { display: block; }
}
:root[data-theme="dark"] .ds-hero__figure .ds-hero__img--light { display: none; }
:root[data-theme="dark"] .ds-hero__figure .ds-hero__img--dark { display: block; }
@media (min-width: 900px) {
  .ds-hero { grid-template-columns: 7fr 5fr; gap: 56px; padding-top: var(--space-md); }
}

/* ---------- Pfeil-Links (Verweise mit Pfeil, Pfeil rückt bei Hover) ---------- */
.ds-links { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-2xs); }
.ds-links > li { margin: 0; }
.ds-link-arrow { display: inline-flex; align-items: center; gap: var(--space-3xs); min-height: var(--size-target-min); font-weight: 600; }
.ds-link-arrow .ds-icon { transition: transform var(--motion-duration-fast) var(--motion-easing-transition); }
.ds-link-arrow:hover .ds-icon { transform: translateX(3px); }
.ds-links__note { margin-left: var(--space-2xs); font-size: var(--type-app-small-size); color: var(--color-text-secondary); }

/* ---------- Kartenraster (Titel + Text, 4 → 2 → 1 Spalten) ---------- */
.ds-modules { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(250px, 100%), 1fr)); gap: var(--space-sm); margin: var(--space-md) 0 var(--space-lg); }
.ds-modules > li { display: flex; flex-direction: column; gap: var(--space-2xs); margin: 0; max-width: none; padding: var(--space-md); background: var(--color-bg-surface); border: var(--size-border-hairline) solid var(--color-border-hairline); }
.ds-modules__title { font-family: var(--font-display); font-size: var(--type-h4-size); font-weight: var(--type-h4-weight); line-height: var(--type-h4-leading); letter-spacing: var(--type-h4-tracking); color: var(--color-text-primary); }
.ds-modules__text { color: var(--color-text-secondary); }
@media (max-width: 600px) { .ds-modules > li { padding: var(--space-sm); } }

/* ---------- Punktreihe (Spalten mit Haarlinie links, ohne Fläche) ---------- */
.ds-points { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(230px, 100%), 1fr)); gap: var(--space-md) var(--space-lg); margin: var(--space-md) 0 var(--space-lg); }
.ds-points > li { margin: 0; max-width: none; padding: var(--space-3xs) 0 var(--space-3xs) var(--space-sm); border-left: var(--size-border-hairline) solid var(--color-border-control); }

/* ---------- Schritte-Grafik (nummeriert; ab 1000 px Spalten mit Akzentbalken oben, darunter Liste mit Balken links) ---------- */
.ds-steps { list-style: none; counter-reset: ds-step; display: grid; grid-template-columns: 1fr; gap: var(--space-xs); margin: var(--space-lg) 0 var(--space-xl); padding: 0; max-width: none; }
.ds-steps > li {
  counter-increment: ds-step; display: grid; grid-template-columns: 2.25rem 1fr; column-gap: var(--space-sm); align-items: baseline;
  background: var(--color-bg-surface); border: var(--size-border-hairline) solid var(--color-border-hairline); border-left: var(--size-accent-bar) solid var(--color-accent);
  padding: var(--space-sm) var(--space-md) var(--space-sm) var(--space-sm); margin: 0; max-width: none;
}
.ds-steps > li::before { content: counter(ds-step); grid-row: 1 / span 2; font-family: var(--font-display); font-size: var(--type-h3-size); font-weight: 700; line-height: 1; color: var(--color-text-link); }
.ds-steps__title { display: block; font-family: var(--font-display); font-size: 1.125rem; font-weight: 650; line-height: 1.3; hyphens: auto; overflow-wrap: break-word; }
.ds-steps__text { display: block; grid-column: 2; margin-top: var(--space-3xs); font-size: var(--type-app-body-size); color: var(--color-text-secondary); line-height: 1.5; hyphens: auto; }
@media (min-width: 1000px) {
  .ds-steps { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--space-sm); }
  .ds-steps > li { grid-template-columns: 1fr; align-content: start; border-left-width: var(--size-border-hairline); border-top: var(--size-accent-bar) solid var(--color-accent); padding: var(--space-md) var(--space-sm) var(--space-md); }
  .ds-steps > li::before { grid-row: auto; margin-bottom: var(--space-xs); font-size: var(--type-h2-size); }
  .ds-steps__text { grid-column: 1; margin-top: var(--space-2xs); }
}

@media (forced-colors: active) {
  .ds-btn, .ds-badge, .ds-meter, .ds-kpi { border: 1px solid CanvasText; }
  .ds-meter__fill, .ds-bar__fill { background: Highlight; }
}

/* ================= Seitenbausteine 2 (aus dem Pilot AEVO Didaktik, 11.11.2026) ================= */

/* ---------- Porträt .ds-portrait: 4:5 mit Akzentbalken; ab 760 px rechts neben dem Text (folgende Überschrift mit clear: both) ---------- */
.ds-portrait { margin: 0 0 var(--space-md); width: min(260px, 70vw); border-top: var(--size-accent-bar) solid var(--color-accent); background: var(--color-bg-surface); }
.ds-portrait img { display: block; width: 100%; height: auto; }
@media (min-width: 760px) { .ds-portrait { float: right; margin: var(--space-2xs) 0 var(--space-md) var(--space-lg); } }
/* Umgebender Block (Karte, Abschnitt): umschließt das schwebende Porträt, auch wenn der Text kürzer ist als das Bild */
.ds-with-portrait { display: flow-root; }

/* ---------- Bild neben dem Text .ds-figure-side: hell/dunkel; ab 900 px rechts, darunter über dem Text ---------- */
.ds-figure-side { margin: 0 0 var(--space-md); max-width: 100%; border-top: var(--size-accent-bar) solid var(--color-accent); }
.ds-figure-side img { display: block; width: 100%; height: auto; }
.ds-figure-side__img--dark { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .ds-figure-side__img--light { display: none; }
  :root:not([data-theme="light"]) .ds-figure-side__img--dark { display: block; }
}
:root[data-theme="dark"] .ds-figure-side__img--light { display: none; }
:root[data-theme="dark"] .ds-figure-side__img--dark { display: block; }
@media (min-width: 900px) { .ds-figure-side { float: right; width: min(420px, 38%); margin: var(--space-2xs) 0 var(--space-md) var(--space-lg); } }

/* ---------- Dezenter Verweis .ds-next („Weiterführend“): Haarlinie, Kennzeile, Satz mit Pfeil-Link; kein Knopf ---------- */
.ds-next { max-width: var(--size-reading-max); margin: var(--space-xl) 0 0; padding-top: var(--space-sm); border-top: var(--size-border-hairline) solid var(--color-border-hairline); }
.ds-next p { margin: 0 0 var(--space-2xs); color: var(--color-text-secondary); }
.ds-next .ds-next__label { font-size: var(--type-label-caps-size); font-weight: var(--type-label-caps-weight); letter-spacing: var(--type-label-caps-tracking); text-transform: uppercase; }
.ds-next .ds-link-arrow { min-height: 0; }

/* ---------- Sprungmarken .ds-toc („Auf dieser Seite“) für lange Seiten ---------- */
.ds-toc { max-width: var(--size-reading-max); margin: var(--space-md) 0 var(--space-lg); padding: var(--space-xs) 0; border-top: var(--size-border-hairline) solid var(--color-border-hairline); border-bottom: var(--size-border-hairline) solid var(--color-border-hairline); }
.ds-toc__label { margin: 0 0 var(--space-3xs); font-size: var(--type-label-caps-size); font-weight: var(--type-label-caps-weight); letter-spacing: var(--type-label-caps-tracking); text-transform: uppercase; color: var(--color-text-secondary); }
.ds-toc__list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--space-3xs) var(--space-md); }
.ds-toc__list a { display: inline-block; padding: var(--space-3xs) 0; }

/* ---------- Erläuterung .ds-help („?“ neben der Beschriftung, nicht im <label>) und .ds-help-panel; .ds-field__head hält beides im Textfluss ---------- */
.ds-field__head { display: block; }
.ds-field__head label { display: inline; }
.ds-help {
  position: relative; flex: none; display: inline-grid; place-items: center; width: 20px; height: 20px; padding: 0; margin-left: 4px; border-radius: 50%;
  border: var(--size-border-hairline) solid var(--color-border-control); background: var(--color-bg-surface); color: var(--color-text-secondary);
  font: 700 0.75rem/1 var(--font-text); cursor: pointer; vertical-align: middle;
}
.ds-help::after { content: ""; position: absolute; inset: -8px; } /* Trefferfläche 36 px ohne größeres Zeichen */
.ds-help:hover, .ds-help[aria-expanded="true"] { background: var(--color-action-primary); border-color: var(--color-action-primary); color: var(--color-text-on-action); }
.ds-help-panel { margin: 2px 0; padding: 8px 10px; font-size: var(--type-body-sm-size); line-height: 1.45; color: var(--color-text-primary); background: var(--color-bg-subtle); border-left: 3px solid var(--color-accent); }
.ds-help-panel p { margin: 0; }

/* ---------- Nur im Druck sichtbar ---------- */
.ds-print-only { display: none; }

/* ---------- Druck: immer hell (die Dunkelwerte der Tokens gelten nur auf dem Bildschirm), ohne Bedienelemente ---------- */
/* Grundregeln für jede Seite; Projekte ergänzen eigene Regeln (z. B. @page, Berichtslayout). Linkziele nur mit .ds-print-urls. */
@media print {
  body { background: none; color: var(--color-text-primary); font-size: 10.5pt; line-height: 1.45; }
  .ds-sprite, .ds-nav, .ds-theme-toggle, .ds-help, .ds-next, .no-print { display: none !important; }
  .ds-print-only { display: block; }
  h1, h2, h3, h4 { break-after: avoid; }
  p, li { orphans: 3; widows: 3; }
  tr, figure, img, .ds-kpi, .ds-banner { break-inside: avoid; }
  thead { display: table-header-group; }
  .ds-table-wrap { overflow: visible; }
  .ds-badge, .ds-banner, .ds-meter, .ds-bar { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  /* Helle Bildvarianten, auch wenn data-theme="dark" gesetzt ist */
  .ds-header__logo--light, .ds-hero__figure .ds-hero__img--light, .ds-figure-side__img--light { display: block !important; }
  .ds-header__logo--dark, .ds-hero__figure .ds-hero__img--dark, .ds-figure-side__img--dark { display: none !important; }
  .ds-print-urls a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 8pt; color: var(--color-text-secondary); word-break: break-all; }
}