/* Projektbasis für aevo.dipl-ing-sommer.de. Tokens, Schriften, Fokus und Komponenten (.ds-) kommen aus dem
   Sommer Design System 2.0 (design-system/, im Build nach dist/ds/). Einbindung: tokens.css → base.css → components.css → basis.css.
   Die deutschen Namen sind Übergangs-Aliase (design-system/MIGRATION.md) und werden schrittweise ersetzt. Keine Hex-Farben hier. */
:root {
  --font-titel: var(--font-display);
  --bg: var(--color-bg-page); --flaeche: var(--color-bg-surface); --flaeche-2: var(--color-bg-subtle); --eingabe: var(--color-bg-field);
  --text: var(--color-text-primary); --text-2: var(--color-text-secondary);
  --rand: var(--color-border-hairline); --rand-bedien: var(--color-border-control);
  --akzent: var(--color-action-primary); --akzent-text: var(--color-text-on-action); --akzent-flaeche: var(--color-accent-tint);
  --marke: var(--color-accent); --marke-text: var(--color-text-link); --fokus: var(--color-border-focus);
  --daten: var(--color-data-seq); --daten-spur: var(--color-data-seq-track);
  --gut: var(--color-success); --gut-bg: var(--color-success-bg); --warn: var(--color-warning); --warn-bg: var(--color-warning-bg);
  --schlecht: var(--color-danger); --schlecht-bg: var(--color-danger-bg);
  color-scheme: light;
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { color-scheme: dark; } }
:root[data-theme="dark"] { color-scheme: dark; }

/* Überschriften: Schrift, Größe, Gewicht und Laufweite aus den Tokens (design-system/css/base.css); hier nur Abstände */
h2 { margin: 0 0 8px; }
[data-density="compact"] h4 { color: var(--text-2); }
p { margin: 1em 0; }
.skip { position: absolute; left: -999px; }
.skip:focus { left: 16px; top: 8px; z-index: var(--layer-dialog); background: var(--flaeche); padding: 6px 10px; }
.unsichtbar { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Seitenkopf, Werkzeugleiste, Schritte, Hell/Dunkel und Raster (eine linke Kante, .ds-band/.ds-container) kommen aus dem
   Designpaket (components.css, base.css). Hier nur Projektspezifisches. */

.hinweisleiste { background: var(--akzent-flaeche); border-bottom: 1px solid var(--rand); padding: 10px var(--ds-edge); font-size: var(--type-body-sm-size); }
.hinweisleiste p { margin: 0; max-width: 1100px; }

/* Knöpfe: .ds-btn (components.css). „Entfernen“ ist ein tertiärer Knopf in Fehlerfarbe */
.btn-entfernen, .btn-entfernen:hover { color: var(--color-danger); }
/* Erklärabschnitt unter Werkstatt und Übung (statisches HTML, auch ohne JavaScript lesbar) */
.seiten-info { padding-top: var(--space-lg); padding-bottom: var(--space-lg); border-top: 1px solid var(--rand); color: var(--text-2); }
.seiten-info > * { max-width: var(--size-reading-max); }
.seiten-info h2 { font-size: var(--type-h3-size); color: var(--text); margin: 0 0 var(--space-2xs); }
.seiten-info p, .seiten-info li { font-size: 0.92rem; }
.seiten-info ul { padding-left: 1.3em; }
.fuss { padding-top: var(--space-sm); padding-bottom: var(--space-sm); color: var(--text-2); font-size: 0.8rem; border-top: 1px solid var(--rand); }


.entwurf { background: var(--warn-bg); border-bottom: 1px solid var(--warn); padding-top: var(--space-2xs); padding-bottom: var(--space-2xs); font-size: var(--type-app-small-size); }
.entwurf p { margin: 0; }

/* Aufklappmenü: .ds-menu (details/summary, components.css); Pfeil dreht beim Öffnen */
.ds-menu[open] > summary .menue-pfeil { transform: rotate(180deg); }
@media (max-width: 600px) {
  .ds-menu__panel { right: auto; left: 0; }
}