/*! Urheber: Steve Wagner, toolranzen.de — 2026. Jede Nutzung außerhalb von toolranzen.de bedarf der Erlaubnis. */

.sw-lesson .lesson-body {
  container-type: inline-size;
  container-name: lektionsspalte;
}

.sw-lesson .di-wortspeicher {
  margin: 0 0 var(--space-md);
  padding: var(--space-md) var(--space-lg);
  border-radius: var(--radius-lg);
  background: var(--color-surface-warm);
}
.sw-lesson .di-wortspeicher > h3 {
  margin: 0 0 var(--space-sm);
  font-size: var(--text-sm);
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--color-text-muted);
}
.sw-lesson .di-wortspeicher dl {
  margin: 0;
  display: grid;
  gap: var(--space-xs) var(--space-md);
  grid-template-columns: 1fr;
}
.sw-lesson .di-wortspeicher dt {
  font-family: var(--font-display);
  font-weight: var(--fw-semi);
  margin-top: var(--space-xs);
}
.sw-lesson .di-wortspeicher dd { margin: 0; }
.sw-lesson .di-wortspeicher dd em { color: var(--color-text-muted); font-style: normal; }
@container lektionsspalte (min-width: 34rem) {
  .sw-lesson .di-wortspeicher dl { grid-template-columns: max-content 1fr; }
  .sw-lesson .di-wortspeicher dt { margin-top: 0; }
}

.sw-lesson .di-kette {
  list-style: none;
  margin: 0 0 var(--space-md);
  padding: 0;
  display: grid;
  gap: var(--space-sm);
  grid-template-columns: 1fr;
  counter-reset: kette;
}
.sw-lesson .di-kette > li {
  position: relative;
  padding: var(--space-md) var(--space-md) var(--space-md) 3.4rem;
  border-radius: var(--radius-lg);
  background: var(--color-surface-warm);
  counter-increment: kette;
}
.sw-lesson .di-kette > li::before {
  content: counter(kette);
  position: absolute;
  left: var(--space-md);
  top: var(--space-md);
  width: 1.8rem; height: 1.8rem;
  border-radius: 50%;
  display: grid; place-items: center;
  background: var(--color-primary);
  color: var(--color-on-primary);
  font-family: var(--font-display);
  font-weight: var(--fw-semi);
  font-size: var(--text-sm);
}
.sw-lesson .di-kette > li.is-kopie { background: var(--color-accent-soft); }
.sw-lesson .di-kette > li strong { display: block; font-family: var(--font-display); }
.sw-lesson .di-kette > li p { margin: var(--space-xs) 0 0; font-size: var(--text-sm); }
@container lektionsspalte (min-width: 40rem) {
  .sw-lesson .di-kette { grid-template-columns: repeat(3, 1fr); }
}

.sw-lesson .di-tabelle__scroll { overflow-x: auto; margin: 0 0 var(--space-md); }
.sw-lesson .di-tabelle {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-sm);
}
.sw-lesson .di-tabelle caption {
  text-align: left;
  font-family: var(--font-display);
  font-weight: var(--fw-semi);
  padding: 0 0 var(--space-xs);
}
.sw-lesson .di-tabelle th,
.sw-lesson .di-tabelle td {
  padding: var(--space-xs) var(--space-sm);
  text-align: left;
  vertical-align: top;
  background: var(--color-surface);
}
.sw-lesson .di-tabelle th { background: var(--color-surface-warm); font-family: var(--font-display); }
.sw-lesson .di-tabelle tr + tr td { border-top: 1px solid var(--color-border); }
.sw-lesson .di-tabelle td.is-offen {
  background: var(--color-accent-soft);
  min-width: 7rem;
}
.sw-lesson .di-tabelle td.is-offen::after {
  content: "…";
  color: var(--color-text-muted);
}
.sw-lesson .di-tabelle td.is-offen.is-geloest {
  color: var(--color-primary-ink);
  font-weight: var(--fw-semi);
}
.sw-lesson .di-tabelle td.is-offen.is-geloest::after { content: none; }
.sw-lesson .di-wortangebot {
  margin: 0 0 var(--space-md);
  display: flex; flex-wrap: wrap; gap: var(--space-xs);
}
.sw-lesson .di-wortangebot span {
  padding: .15rem .6rem;
  border-radius: 999px;
  background: var(--color-surface-warm);
  font-size: var(--text-sm);
}

.sw-lesson .di-baum { margin: 0 0 var(--space-md); }
.sw-lesson .di-baum details {
  margin: 0 0 var(--space-xs);
  border-radius: var(--radius-lg);
  background: var(--color-surface-warm);
  padding: var(--space-sm) var(--space-md);
}
.sw-lesson .di-baum details details { background: var(--color-surface); margin-top: var(--space-xs); }
.sw-lesson .di-baum summary {
  cursor: pointer;
  font-family: var(--font-display);
  font-weight: var(--fw-semi);
  min-height: 44px;
  display: flex; align-items: center; gap: var(--space-sm);
}
.sw-lesson .di-baum summary::marker { color: var(--color-accent); }
.sw-lesson .di-baum p { margin: var(--space-xs) 0 0; }
.sw-lesson .di-baum .is-ja { background: var(--color-primary-pale); }
.sw-lesson .di-baum .is-nein { background: var(--color-accent-soft); }

.sw-lesson .di-produkte {
  display: grid;
  gap: var(--space-md);
  grid-template-columns: 1fr;
  margin: 0 0 var(--space-md);
}
@container lektionsspalte (min-width: 40rem) {
  .sw-lesson .di-produkte { grid-template-columns: repeat(2, 1fr); }
}
.sw-lesson .di-produkt {
  border-radius: var(--radius-lg);
  background: var(--color-surface-warm);
  padding: var(--space-md);
  display: grid;
  gap: var(--space-xs);
  align-content: start;
}
.sw-lesson .di-produkt__kopf { display: flex; align-items: center; gap: var(--space-sm); }
.sw-lesson .di-produkt__kopf img { width: 56px; height: 45px; object-fit: contain; }
.sw-lesson .di-produkt h3 { margin: 0; font-size: var(--text-lg); }
.sw-lesson .di-produkt__aufwand {
  margin-left: auto;
  font-size: var(--text-xs);
  letter-spacing: .1em;
  color: var(--color-accent);
  white-space: nowrap;
}
.sw-lesson .di-produkt dl { margin: 0; font-size: var(--text-sm); }
.sw-lesson .di-produkt dt { font-family: var(--font-display); font-weight: var(--fw-semi); margin-top: var(--space-xs); }
.sw-lesson .di-produkt dd { margin: 0; }
.sw-lesson .di-produkt__auftraege {
  margin: var(--space-xs) 0 0;
  padding: var(--space-sm) var(--space-md);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  font-size: var(--text-sm);
}
.sw-lesson .di-produkt__auftraege strong { font-family: var(--font-display); }
.sw-lesson .di-produkt__auftraege ol { margin: var(--space-xs) 0 0; padding-left: 1.2rem; }
.sw-lesson .di-produkt__auftraege li + li { margin-top: .2rem; }

.sw-lesson .di-tafel {
  margin: 0 0 var(--space-md);
  padding: var(--space-md);
  border-radius: var(--radius-lg);
  background: var(--color-surface-warm);
}
.sw-lesson .di-tafel__fallback { margin: 0; font-size: var(--text-sm); color: var(--color-text-muted); }
.sw-lesson .di-tafel.is-bereit .di-tafel__fallback { display: none; }
.sw-lesson .di-tafel__buehne {
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  padding: var(--space-sm);
  overflow: hidden;
}
.sw-lesson .di-tafel__svg { display: block; width: 100%; height: auto; }
.sw-lesson .di-tafel__canvas { display: block; width: 100%; height: auto; border-radius: var(--radius-md); }
.sw-lesson .di-tafel__regler {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-sm) var(--space-md);
  margin: var(--space-sm) 0 0;
}
.sw-lesson .di-tafel__regler:empty { display: none; }
.sw-lesson .di-tafel__label { font-family: var(--font-display); font-weight: var(--fw-semi); }
.sw-lesson .di-tafel__range { flex: 1 1 10rem; min-width: 9rem; min-height: 44px; }
.sw-lesson .di-tafel__wert {
  min-width: 5.5rem;
  font-variant-numeric: tabular-nums;
  font-family: var(--font-display);
  font-weight: var(--fw-semi);
}
.sw-lesson .di-tafel__zeile { margin: var(--space-sm) 0 0; font-size: var(--text-sm); }
.sw-lesson .di-tafel__zeile:empty { display: none; }
.sw-lesson .di-tafel__zeile strong { font-family: var(--font-display); }
.sw-lesson .di-tafel__knopf {
  min-height: 44px;
  padding: .5rem 1rem;
  border: 0;
  border-radius: 999px;
  background: var(--color-primary);
  color: var(--color-on-primary);
  font-family: var(--font-display);
  font-weight: var(--fw-semi);
  cursor: pointer;
}
.sw-lesson .di-tafel__knopf:disabled { opacity: .55; cursor: default; }
.sw-lesson .di-tafel__knopf--leise {
  background: var(--color-surface);
  color: var(--color-text);
}
.sw-lesson .di-tafel__knopf--schalter[aria-pressed="true"] {
  background: var(--color-primary-pale);
  color: var(--color-text);
}
.sw-lesson .di-tafel__datei { position: relative; overflow: hidden; display: inline-flex; align-items: center; }
.sw-lesson .di-tafel__datei-input {
  position: absolute; inset: 0; width: 100%; height: 100%;
  opacity: 0; cursor: pointer;
}
.sw-lesson .di-tafel__datei:has(.di-tafel__datei-input:focus-visible) {
  outline: 3px solid var(--color-primary); outline-offset: 2px;
}
.sw-lesson .di-tafel__datei-name { font-size: var(--text-sm); color: var(--color-text-muted); }
.sw-lesson .di-labor__bilder { display: grid; gap: var(--space-sm); grid-template-columns: 1fr; }
@container lektionsspalte (min-width: 36rem) {
  .sw-lesson .di-labor__bilder { grid-template-columns: 2fr 1fr; align-items: start; }
}
@container lektionsspalte (min-width: 36rem) {
  .sw-lesson .di-labor__bilder--gleich { grid-template-columns: 1fr 1fr; }
}
.sw-lesson .di-labor__bild { margin: 0; }
.sw-lesson .di-labor__bild figcaption { font-size: var(--text-xs); color: var(--color-text-muted); margin-top: .25rem; }
.sw-lesson .di-labor__mass {
  display: grid; grid-template-columns: max-content 1fr max-content;
  gap: var(--space-xs) var(--space-sm); align-items: center;
  margin-top: var(--space-sm); font-size: var(--text-sm);
}
.sw-lesson .di-labor__mass-label { color: var(--color-text-muted); }
.sw-lesson .di-labor__mass-wert { font-family: var(--font-display); font-weight: var(--fw-semi); font-variant-numeric: tabular-nums; min-width: 4.5rem; text-align: right; }
.sw-lesson .di-labor__balken { height: 14px; border-radius: 999px; background: var(--color-surface); }
.sw-lesson .di-labor__balken i {
  display: block; height: 100%; width: 0; border-radius: 999px;
  background: var(--color-accent);
}
.sw-lesson .di-labor__balken--roh i { background: var(--color-border); }
.sw-lesson .di-probe__seite {
  display: grid; gap: var(--space-sm);
  grid-template-columns: repeat(3, 1fr);
  padding: var(--space-sm);
  border-radius: var(--radius-md);
  background: var(--color-surface);
}
.sw-lesson .di-probe__seite figure { margin: 0; }
.sw-lesson .di-probe__seite img { width: 100%; height: auto; display: block; }
.sw-lesson .di-probe__seite figure.is-dran img { outline: 4px solid var(--color-accent); outline-offset: 2px; border-radius: 6px; }
.sw-lesson .di-probe__text {
  margin: var(--space-sm) 0 0;
  padding: var(--space-sm) var(--space-md);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  min-height: 3.2em;
  font-family: var(--font-display);
}

.sw-lesson .di-checkliste {
  list-style: none; margin: 0 0 var(--space-md); padding: 0;
  display: grid; gap: var(--space-xs);
}
.sw-lesson .di-checkliste li {
  display: grid; grid-template-columns: 1.5rem 1fr; gap: var(--space-sm); align-items: start;
  padding: var(--space-xs) var(--space-sm);
  border-radius: var(--radius-md);
  background: var(--color-surface-warm);
}
.sw-lesson .di-checkliste li::before {
  content: "";
  width: 1.2rem; height: 1.2rem; margin-top: .15rem;
  border-radius: 4px;
  background: var(--color-surface);
  box-shadow: inset 0 0 0 2px var(--color-border);
}
.sw-lesson .di-checkliste strong { font-family: var(--font-display); }

.sw-lesson .di-persona__fakten { margin: var(--space-xs) 0 0; padding: 0; list-style: none; font-size: var(--text-sm); }
.sw-lesson .di-persona__fakten li + li { margin-top: .15rem; }
.sw-lesson .di-persona__fakten b { font-family: var(--font-display); font-weight: var(--fw-semi); }

.sw-lesson .di-abtastung { margin: 0 0 var(--space-md); }
.sw-lesson .di-abtastung svg { display: block; width: 100%; height: auto; }
.sw-lesson .di-abtastung figcaption { font-size: var(--text-sm); color: var(--color-text-muted); margin-top: var(--space-xs); }

.sw-lesson .di-heft {
  margin: 0 0 var(--space-md);
  padding: var(--space-md) var(--space-lg) var(--space-lg);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
}
.sw-lesson .di-heft__label {
  display: block;
  margin: 0 0 var(--space-xs);
  font-family: var(--font-display);
  font-size: var(--text-xs);
  font-weight: var(--fw-bold);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}
.sw-lesson .di-heft__hinweis { margin: 0 0 var(--space-sm); font-size: var(--text-sm); color: var(--color-text-muted); }
.sw-lesson .di-heft__titel {
  margin: var(--space-sm) 0 var(--space-xs);
  font-size: var(--text-base);
  font-family: var(--font-display);
}
.sw-lesson .di-heft__liste {
  margin: 0; padding-left: 1.2rem;
  line-height: 1.9;
  font-size: var(--text-base);
  background: repeating-linear-gradient(
    to bottom,
    transparent 0,
    transparent calc(1.9em - 1px),
    var(--color-border) calc(1.9em - 1px),
    var(--color-border) 1.9em
  );
}
.sw-lesson .di-heft__liste li { margin: 0; }

/* Urheber: Steve Wagner, toolranzen.de — 2026. Jede Nutzung außerhalb von toolranzen.de bedarf der Erlaubnis. */