/*! Toolranzen.de · Steve Wagner · 2026. Geschütztes Werk; Weiterverwendung, auch auszugsweise, ist nicht gestattet. */

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

.sw-lesson .sp-tafel {
  margin: 0 0 var(--space-md);
  padding: var(--space-md);
  border-radius: var(--radius-lg);
  background: var(--color-surface-warm);
}
.sw-lesson .sp-tafel__fallback { margin: 0; font-size: var(--text-sm); color: var(--color-text-muted); }
.sw-lesson .sp-tafel.is-bereit .sp-tafel__fallback { display: none; }
.sw-lesson .sp-tafel__buehne {
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  padding: var(--space-sm);
  overflow: hidden;
}
.sw-lesson .sp-tafel__svg { display: block; width: 100%; height: auto; }
@container lektionsspalte (max-width: 30rem) {
  .sw-lesson .sp-tafel { padding: var(--space-sm); }
  .sw-lesson .sp-tafel__buehne { padding: 4px; }
}
.sw-lesson .sp-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 .sp-tafel__regler:empty { display: none; }
.sw-lesson .sp-tafel__gruppe { display: flex; flex-wrap: wrap; gap: var(--space-xs); }
.sw-lesson .sp-tafel__feld { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-xs) var(--space-sm); flex: 1 1 14rem; }
.sw-lesson .sp-tafel__label { font-family: var(--font-display); font-weight: var(--fw-semi); }
.sw-lesson .sp-tafel__range { flex: 1 1 8rem; min-width: 8rem; min-height: 44px; }
.sw-lesson .sp-tafel__wert {
  min-width: 6rem;
  font-variant-numeric: tabular-nums;
  font-family: var(--font-display);
  font-weight: var(--fw-semi);
}
.sw-lesson .sp-tafel__zahl,
.sw-lesson .sp-tafel__auswahl {
  min-height: 44px; padding: .35rem .6rem;
  border: 1px solid var(--color-border); border-radius: var(--radius-md);
  background: var(--color-surface); color: var(--color-text);
  font: inherit; font-variant-numeric: tabular-nums; width: 7rem;
}
.sw-lesson .sp-tafel__zeile { margin: var(--space-sm) 0 0; font-size: var(--text-sm); }
.sw-lesson .sp-tafel__zeile:empty { display: none; }
.sw-lesson .sp-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 .sp-tafel__knopf:disabled { opacity: .55; cursor: default; }
.sw-lesson .sp-tafel__knopf--leise { background: var(--color-surface); color: var(--color-text); }
.sw-lesson .sp-tafel__knopf--schalter { background: var(--color-surface); color: var(--color-text); }
.sw-lesson .sp-tafel__knopf--schalter[aria-pressed="true"] { background: var(--color-primary-pale); color: var(--color-text); }

.sw-lesson .sp-schalter {
  display: grid; grid-template-columns: repeat(8, 1fr); gap: var(--space-xs);
}
@container lektionsspalte (max-width: 30rem) {
  .sw-lesson .sp-schalter { grid-template-columns: repeat(4, 1fr); }
}
.sw-lesson .sp-schalter__knopf {
  display: grid; justify-items: center; gap: .25rem;
  min-height: 44px; padding: .5rem .25rem;
  border: 0; border-radius: var(--radius-md);
  background: var(--color-surface-warm); color: var(--color-text);
  font: inherit; cursor: pointer;
}
.sw-lesson .sp-schalter__knopf[aria-checked="true"] { background: var(--color-primary-pale); }
.sw-lesson .sp-schalter__wert { font-size: var(--text-xs); color: var(--color-text-muted); }
.sw-lesson .sp-schalter__lampe {
  width: 1.4rem; height: 1.4rem; border-radius: 50%;
  background: var(--color-border);
}
.sw-lesson .sp-schalter__knopf[aria-checked="true"] .sp-schalter__lampe { background: var(--color-primary); }
.sw-lesson .sp-schalter__bit { font-family: var(--font-display); font-weight: var(--fw-semi); font-size: var(--text-lg); }
.sw-lesson .sp-schalter__ausgabe { margin-top: var(--space-sm); }
.sw-lesson .sp-schalter__rechnung { margin: 0; color: var(--color-text-muted); font-variant-numeric: tabular-nums; }
.sw-lesson .sp-schalter__ergebnis { margin: .25rem 0 0; font-family: var(--font-display); font-weight: var(--fw-semi); font-size: var(--text-lg); }

.sw-lesson .sp-treppe { list-style: none; margin: 0; padding: 0; display: grid; gap: .3rem; }
.sw-lesson .sp-treppe__stufe {
  display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-sm);
  margin-inline-start: calc(var(--stufe, 0) * 1.4rem);
  padding: .45rem .8rem; border-radius: var(--radius-md);
  background: var(--color-surface-warm);
}
.sw-lesson .sp-treppe__stufe.is-gewaehlt { background: var(--color-primary-pale); }
.sw-lesson .sp-treppe__name { font-family: var(--font-display); font-weight: var(--fw-semi); }
.sw-lesson .sp-treppe__wert { font-variant-numeric: tabular-nums; text-align: right; }
.sw-lesson .sp-treppe__pfeil { margin: var(--space-sm) 0 0; font-size: var(--text-sm); color: var(--color-text-muted); }
@container lektionsspalte (max-width: 30rem) {
  .sw-lesson .sp-treppe__stufe { margin-inline-start: calc(var(--stufe, 0) * .6rem); flex-wrap: wrap; }
}

.sw-lesson .sp-waage__skala {
  display: grid; grid-template-columns: repeat(9, 1fr);
  font-size: var(--text-xs); color: var(--color-text-muted); text-align: center;
  margin: 0 0 .3rem;
}
.sw-lesson .sp-waage__liste { list-style: none; margin: 0; padding: 0; display: grid; gap: .4rem; }
.sw-lesson .sp-waage__zeile {
  display: grid; grid-template-columns: 11rem 1fr; gap: .2rem var(--space-sm); align-items: center;
  padding: .4rem .6rem; border-radius: var(--radius-md); background: var(--color-surface-warm);
}
.sw-lesson .sp-waage__zeile.is-bewegt { background: var(--color-primary-pale); }
.sw-lesson .sp-waage__name { font-family: var(--font-display); font-weight: var(--fw-semi); font-size: var(--text-sm); }
.sw-lesson .sp-waage__steuer { display: flex; align-items: center; gap: .4rem; }
.sw-lesson .sp-waage__pfeil {
  min-width: 44px; min-height: 44px; border: 0; border-radius: 999px;
  background: var(--color-surface); color: var(--color-text); font: inherit; cursor: pointer;
}
.sw-lesson .sp-waage__pfeil:disabled { opacity: .4; cursor: default; }
.sw-lesson .sp-waage__spur { position: relative; flex: 1 1 auto; height: 10px; border-radius: 999px; background: var(--color-border); }
.sw-lesson .sp-waage__marke {
  position: absolute; top: 50%; left: 50%; width: 18px; height: 18px;
  border-radius: 50%; background: var(--color-primary); transform: translate(-50%, -50%);
}
.sw-lesson .sp-waage__marke--wahr { background: var(--color-success); width: 12px; height: 12px; }
.sw-lesson .sp-waage__stand { grid-column: 1 / -1; font-size: var(--text-xs); color: var(--color-text-muted); }
.sw-lesson .sp-waage__zeile[data-punkte="2"] .sp-waage__stand { color: var(--color-success); }
@container lektionsspalte (max-width: 34rem) {
  .sw-lesson .sp-waage__zeile { grid-template-columns: 1fr; }
  .sw-lesson .sp-waage__skala { display: none; }
}

.sw-lesson .sp-handy__rahmen {
  padding: .6rem; border-radius: var(--radius-lg); background: var(--color-surface-warm);
}
.sw-lesson .sp-handy__balken {
  display: flex; height: 2.2rem; border-radius: 999px; overflow: hidden; background: var(--color-surface);
}
.sw-lesson .sp-handy__segment { display: block; height: 100%; width: 0; }
.sw-lesson .sp-handy__segment--system { background: var(--color-border); }
.sw-lesson .sp-handy__segment--fotos { background: var(--color-primary); }
.sw-lesson .sp-handy__segment--video { background: var(--color-accent); }
.sw-lesson .sp-handy__segment--apps { background: var(--color-info); }
.sw-lesson .sp-handy__segment--spiele { background: var(--color-warning); }
.sw-lesson .sp-handy__segment--ueber { background: var(--color-error); }
.sw-lesson .sp-handy__legende {
  list-style: none; margin: var(--space-sm) 0 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: .3rem var(--space-md); font-size: var(--text-sm);
}
.sw-lesson .sp-handy__legende li { display: inline-flex; align-items: center; gap: .35rem; }
.sw-lesson .sp-handy__punkt { width: .8rem; height: .8rem; border-radius: 50%; }
.sw-lesson .sp-handy__meldung {
  margin: var(--space-sm) 0 0; padding: .5rem .8rem; border-radius: var(--radius-md);
  background: var(--color-surface-warm); font-family: var(--font-display); font-weight: var(--fw-semi);
}
.sw-lesson .sp-tafel.is-voll .sp-handy__meldung { background: var(--color-error); color: var(--color-on-primary); }

.sw-lesson .sp-download__ergebnis { margin: var(--space-sm) 0 0; display: grid; grid-template-columns: max-content 1fr; gap: .3rem var(--space-sm); font-size: var(--text-sm); }
.sw-lesson .sp-download__ergebnis dt { color: var(--color-text-muted); }
.sw-lesson .sp-download__ergebnis dd { margin: 0; font-family: var(--font-display); font-weight: var(--fw-semi); font-variant-numeric: tabular-nums; }
.sw-lesson .sp-download--streaming { margin-top: var(--space-md); }
.sw-lesson .sp-download__titel { margin: 0 0 var(--space-xs); font-family: var(--font-display); font-weight: var(--fw-semi); }
.sw-lesson .sp-download__balken {
  display: grid; grid-template-columns: max-content 1fr max-content;
  gap: var(--space-xs) var(--space-sm); align-items: center; font-size: var(--text-sm);
}
.sw-lesson .sp-download__balken-label { color: var(--color-text-muted); }
.sw-lesson .sp-download__balken-spur { display: block; height: 14px; border-radius: 999px; background: var(--color-surface-warm); }
.sw-lesson .sp-download__balken-spur i { display: block; height: 100%; width: 0; border-radius: 999px; background: var(--color-border); }
.sw-lesson .sp-download__balken-spur i.is-gewaehlt { background: var(--color-primary); }
.sw-lesson .sp-download__balken-wert { font-family: var(--font-display); font-weight: var(--fw-semi); font-variant-numeric: tabular-nums; min-width: 4rem; text-align: right; }
@container lektionsspalte (max-width: 30rem) {
  .sw-lesson .sp-download__ergebnis { grid-template-columns: 1fr; }
}

/* Toolranzen.de · Steve Wagner · 2026. Geschütztes Werk; Weiterverwendung, auch auszugsweise, ist nicht gestattet. */