/*! 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 .sm-computer h3 { display: flex; align-items: center; gap: .45rem; }
.sw-lesson .sm-computer h3 svg { width: 1.25rem; height: 1.25rem; flex: none; }
.sw-lesson .sm-computer p { margin: 0; }

.sw-lesson .sm-tafel {
  margin: 0 0 var(--space-md);
  padding: var(--space-md);
  border-radius: var(--radius-lg);
  background: var(--color-surface-warm);
}
.sw-lesson .sm-tafel__fallback { margin: 0; font-size: var(--text-sm); color: var(--color-text-muted); }
.sw-lesson .sm-tafel.is-bereit .sm-tafel__fallback { display: none; }
.sw-lesson .sm-tafel__buehne {
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  padding: var(--space-sm);
  overflow: hidden;
}
@container lektionsspalte (max-width: 30rem) {
  .sw-lesson .sm-tafel { padding: var(--space-sm); }
  .sw-lesson .sm-tafel__buehne { padding: 4px; }
}
.sw-lesson .sm-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 .sm-tafel__regler:empty { display: none; }
.sw-lesson .sm-tafel__gruppe { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-xs); }
.sw-lesson .sm-tafel__feld { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-xs) var(--space-sm); flex: 1 1 14rem; }
.sw-lesson .sm-tafel__range { flex: 1 1 10rem; min-height: 44px; accent-color: var(--color-primary); }
.sw-lesson .sm-tafel__wert { min-width: 5rem; font-family: var(--font-display); font-weight: var(--fw-semi); }
.sw-lesson .sm-tafel__label { font-family: var(--font-display); font-weight: var(--fw-semi); margin-inline-end: .25rem; }
.sw-lesson .sm-tafel__zeile { margin: var(--space-sm) 0 0; font-size: var(--text-sm); }
.sw-lesson .sm-tafel__zeile:empty { display: none; }
.sw-lesson .sm-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 .sm-tafel__knopf:disabled { opacity: .55; cursor: default; }
.sw-lesson .sm-tafel__knopf--leise { background: var(--color-surface); color: var(--color-text); }
.sw-lesson .sm-tafel__knopf--schalter { background: var(--color-surface); color: var(--color-text); }
.sw-lesson .sm-tafel__knopf--schalter[aria-pressed="true"] { background: var(--color-primary); color: var(--color-on-primary); }
.sw-lesson .sm-tafel [hidden] { display: none !important; }

.sw-lesson .sm-z-rahmen { fill: var(--color-text); }
.sw-lesson .sm-z-innenraum { fill: var(--color-border); }
.sw-lesson .sm-z-platine { fill: var(--color-text-muted); stroke: var(--color-text); stroke-width: 2; }
.sw-lesson .sm-z-bahn { fill: none; stroke: var(--color-border); stroke-width: 1.5; }
.sw-lesson .sm-z-chip { fill: var(--color-text); stroke: var(--color-border); stroke-width: 1.5; }
.sw-lesson .sm-z-chipkern { fill: var(--color-border); }
.sw-lesson .sm-z-akku { fill: var(--color-surface); stroke: var(--color-text); stroke-width: 2; }
.sw-lesson .sm-z-etikett { fill: var(--color-border); }
.sw-lesson .sm-z-modul { fill: var(--color-surface-warm); stroke: var(--color-text); stroke-width: 2; }
.sw-lesson .sm-z-linse { fill: var(--color-text); stroke: var(--color-border); stroke-width: 3; }
.sw-lesson .sm-z-linsenkern { fill: var(--color-text-muted); }
.sw-lesson .sm-z-antenne { fill: var(--color-border); }
.sw-lesson .sm-z-loch { fill: var(--color-text); }
.sw-lesson .sm-z-glas { fill: var(--color-surface); stroke: var(--color-text); stroke-width: 1.5; }
.sw-lesson .sm-z-display { fill: var(--color-text-muted); }
.sw-lesson .sm-z-innen { fill: var(--color-border); stroke: var(--color-text); stroke-width: 1.5; }
.sw-lesson .sm-z-rueck { fill: var(--color-text); }
.sw-lesson .sm-z-geraet { fill: var(--color-surface-warm); stroke: var(--color-text); stroke-width: 2; }
.sw-lesson .sm-z-schirm { fill: var(--color-border); }
.sw-lesson .sm-z-buegel { fill: none; stroke: var(--color-text); stroke-width: 4; stroke-linecap: round; }
.sw-lesson .sm-z-hand { fill: var(--color-primary-pale); stroke: var(--color-text); stroke-width: 2; }
.sw-lesson .sm-z-panel { fill: var(--color-text-muted); stroke: var(--color-text); stroke-width: 1.5; }

.sw-lesson .sm-aufbau { display: block; width: 100%; max-width: 30rem; height: auto; margin: 0 auto; }
.sw-lesson .sm-teil { cursor: pointer; }
.sw-lesson .sm-teil__flaeche { transition: fill .15s; }
.sw-lesson .sm-teil:hover .sm-teil__flaeche { fill: var(--color-primary-pale); }
.sw-lesson .sm-teil:focus-visible .sm-teil__flaeche { fill: var(--color-primary-pale); }
.sw-lesson .sm-teil.is-gewaehlt .sm-teil__flaeche,
.sw-lesson .sm-teil.is-richtig .sm-teil__flaeche { fill: var(--color-primary); }
.sw-lesson .sm-teil.is-gesucht .sm-teil__flaeche { fill: var(--color-primary-pale); }
.sw-lesson .sm-aufbau__namen { display: none; pointer-events: none; }
.sw-lesson .sm-aufbau.zeigt-namen .sm-aufbau__namen { display: inline; }
.sw-lesson .sm-aufbau__nummer circle { fill: var(--color-surface); stroke: var(--color-text); stroke-width: 2; }
.sw-lesson .sm-aufbau__nummer text { font: 700 11px var(--font-display, sans-serif); fill: var(--color-text); }
.sw-lesson .sm-aufbau__liste {
  margin: var(--space-sm) 0 0; padding: 0 0 0 1.6rem;
  columns: 2 12rem; column-gap: var(--space-md);
  font-size: var(--text-sm);
}
.sw-lesson .sm-aufbau__liste li { break-inside: avoid; padding: .1rem 0; }
.sw-lesson .sm-aufbau__liste li::marker { font-family: var(--font-display); font-weight: var(--fw-semi); }
.sw-lesson .sm-aufbau__auftrag { margin: 0 0 var(--space-xs); font-family: var(--font-display); font-weight: var(--fw-semi); font-size: var(--text-lg, 1.15rem); text-align: center; }
.sw-lesson .sm-aufbau__legende { margin: var(--space-xs) 0 0; font-size: var(--text-sm); color: var(--color-text-muted); text-align: center; }
.sw-lesson .sm-aufbau__info,
.sw-lesson .sm-sensoren__info { margin: var(--space-sm) 0 0; padding: .5rem .7rem; border-radius: var(--radius-md); background: var(--color-primary-pale); }
.sw-lesson .sm-aufbau__info:empty,
.sw-lesson .sm-sensoren__info:empty { display: none; }

.sw-lesson .sm-chip__anzeige { display: grid; gap: var(--space-md); grid-template-columns: 1fr; align-items: center; }
@container lektionsspalte (min-width: 34rem) {
  .sw-lesson .sm-chip__anzeige { grid-template-columns: 11rem 1fr; }
}
.sw-lesson .sm-chip { display: block; width: 100%; max-width: 11rem; height: auto; margin: 0 auto; }
.sw-lesson .sm-chip__koerper { fill: var(--color-text); transition: fill .3s; }
.sw-lesson .sm-chip__kern { fill: var(--color-border); }
.sw-lesson .sm-chip__bein { stroke: var(--color-text-muted); stroke-width: 3; }
.sw-lesson .sm-chip__welle { fill: none; stroke: var(--color-primary); stroke-width: 3; stroke-linecap: round; opacity: 0; transition: opacity .3s; }
.sw-lesson .sm-chip[data-stufe="2"] .sm-chip__welle,
.sw-lesson .sm-chip[data-stufe="3"] .sm-chip__welle { opacity: .4; }
.sw-lesson .sm-chip[data-stufe="4"] .sm-chip__welle,
.sw-lesson .sm-chip[data-stufe="5"] .sm-chip__welle,
.sw-lesson .sm-chip[data-stufe="6"] .sm-chip__welle,
.sw-lesson .sm-chip[data-stufe="7"] .sm-chip__welle { opacity: 1; }
.sw-lesson .sm-chip[data-stufe="4"] .sm-chip__koerper,
.sw-lesson .sm-chip[data-stufe="5"] .sm-chip__koerper,
.sw-lesson .sm-chip[data-stufe="6"] .sm-chip__koerper,
.sw-lesson .sm-chip[data-stufe="7"] .sm-chip__koerper { fill: var(--color-primary); }
.sw-lesson .sm-chip__balken { display: grid; gap: var(--space-sm); }
.sw-lesson .sm-balken { display: grid; grid-template-columns: 8.5rem 1fr 7rem; gap: var(--space-sm); align-items: center; font-size: var(--text-sm); }
@container lektionsspalte (max-width: 30rem) {
  .sw-lesson .sm-balken { grid-template-columns: 1fr; gap: .2rem; }
}
.sw-lesson .sm-balken__titel { font-family: var(--font-display); font-weight: var(--fw-semi); }
.sw-lesson .sm-balken__spur { display: block; height: 16px; border-radius: 999px; background: var(--color-surface-warm); overflow: hidden; }
.sw-lesson .sm-balken__spur i { display: block; height: 100%; border-radius: 999px; background: var(--color-text-muted); transition: width .3s; }
.sw-lesson .sm-balken.is-heiss .sm-balken__spur i { background: var(--color-primary); }
.sw-lesson .sm-balken__wert { font-family: var(--font-display); font-weight: var(--fw-semi); }

.sw-lesson .sm-dinge { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-xs); grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); }
.sw-lesson .sm-ding { display: grid; align-content: start; gap: .15rem; padding: .6rem .8rem; border-radius: var(--radius-md); background: var(--color-surface-warm); transition: background .2s, opacity .2s; }
.sw-lesson .sm-ding__name { font-family: var(--font-display); }
.sw-lesson .sm-ding__ort { font-size: var(--text-sm); color: var(--color-text-muted); }
.sw-lesson .sm-ding__status { font-size: var(--text-sm); font-weight: var(--fw-semi); }
.sw-lesson .sm-ding.is-weg { background: var(--color-surface); opacity: .7; }
.sw-lesson .sm-ding.is-weg .sm-ding__status { color: var(--color-text); }

.sw-lesson .sm-akku { display: block; width: 100%; max-width: 18rem; height: auto; margin: 0 auto; }
.sw-lesson .sm-akku__huelle { fill: var(--color-surface); stroke: var(--color-text); stroke-width: 4; }
.sw-lesson .sm-akku__pol { fill: var(--color-text); }
.sw-lesson .sm-akku__fuell { fill: var(--color-text-muted); transition: width .35s; }
.sw-lesson .sm-akku[data-stand="knapp"] .sm-akku__fuell { fill: var(--color-primary); }

.sw-lesson .sm-touch { display: block; width: 100%; max-width: 15rem; height: auto; margin: 0 auto; touch-action: manipulation; cursor: pointer; }
.sw-lesson .sm-touch__glas { fill: var(--color-surface-warm); }
.sw-lesson .sm-touch__bahn { stroke: var(--color-text-muted); stroke-opacity: .35; stroke-width: 1.5; transition: stroke .15s; }
.sw-lesson .sm-touch__bahn.is-an { stroke: var(--color-primary); stroke-opacity: 1; stroke-width: 4; }
.sw-lesson .sm-touch__finger { fill: var(--color-primary); opacity: .55; }
.sw-lesson .sm-touch__finger.is-stumm { fill: var(--color-text-muted); }

.sw-lesson .sm-sensor {
  display: grid; grid-template-columns: repeat(var(--sensor-breite, 10), 1fr); gap: 2px;
  width: min(100%, 30rem); margin: 0 auto; padding: 3px; border-radius: var(--radius-md);
  background: var(--color-text);
}
.sw-lesson .sm-sensor__punkt {
  aspect-ratio: 1; display: grid; place-items: center; border-radius: 2px;
  background: rgb(var(--hell, 128) var(--hell, 128) var(--hell, 128));
  color: var(--color-text); font-size: clamp(.55rem, 2.2cqi, .8rem); font-variant-numeric: tabular-nums;
}
.sw-lesson .sm-sensor__punkt:not(.is-hell) { color: var(--color-surface); }
.sw-lesson .sm-sensor.nur-zahlen .sm-sensor__punkt { background: var(--color-surface); color: var(--color-text); }

.sw-lesson .sm-sensoren { display: grid; gap: var(--space-sm); grid-template-columns: 1fr; align-items: center; }
@container lektionsspalte (min-width: 34rem) {
  .sw-lesson .sm-sensoren { grid-template-columns: 12rem 1fr; }
}
.sw-lesson .sm-sensoren__bild { display: block; width: 100%; max-width: 12rem; height: auto; margin: 0 auto; }
.sw-lesson .sm-sensoren__geraet,
.sw-lesson .sm-sensoren__inhalt { transform-box: fill-box; transform-origin: center; transition: transform .45s; }
.sw-lesson .sm-sensoren__schirm { fill: var(--color-surface-warm); transition: fill .3s, opacity .3s; }
.sw-lesson .sm-sensoren__schirm.is-dunkel { opacity: .45; }
.sw-lesson .sm-sensoren__schirm.is-aus { fill: var(--color-text); }
.sw-lesson .sm-sensoren__motiv { fill: var(--color-primary); }
.sw-lesson .sm-sensoren__tuer { fill: var(--color-text); }
.sw-lesson .sm-sensoren__nadel { fill: var(--color-primary); transform-box: fill-box; transform-origin: center; transition: transform .45s; }
.sw-lesson .sm-sensoren__text { font: 700 10px var(--font-display, sans-serif); fill: var(--color-text); }
.sw-lesson .sm-sensoren__wahl { flex: 1 1 100%; }
.sw-lesson .sm-richtig, .sw-lesson .sm-falsch { font-weight: var(--fw-semi); }

.sw-lesson .sm-uebertragung { display: block; width: 100%; height: auto; }
.sw-lesson .sm-leitung { fill: none; stroke: var(--color-text); stroke-width: 6; stroke-linecap: round; }
.sw-lesson .sm-leitung--glas { stroke: var(--color-primary-pale); stroke-width: 8; }
.sw-lesson .sm-strahl { fill: none; stroke: var(--color-primary); stroke-width: 3; stroke-dasharray: 8 6; opacity: .6; }
.sw-lesson .sm-welle { fill: none; stroke: var(--color-primary); stroke-width: 2.5; }
.sw-lesson .sm-paket__kasten { fill: var(--color-primary); }
.sw-lesson .sm-paket__bit { font: 700 12px ui-monospace, "Cascadia Mono", Consolas, monospace; fill: var(--color-on-primary); }
.sw-lesson .sm-paket { transition: opacity .2s; }
.sw-lesson .sm-uebertragung__karte { display: grid; gap: var(--space-xs); margin-top: var(--space-xs); }
.sw-lesson .sm-uebertragung__daten { margin: 0; display: grid; grid-template-columns: max-content 1fr; gap: .3rem var(--space-sm); font-size: var(--text-sm); align-items: center; }
.sw-lesson .sm-uebertragung__daten dt { color: var(--color-text-muted); }
.sw-lesson .sm-uebertragung__daten dd { margin: 0; font-family: var(--font-display); font-weight: var(--fw-semi); }
.sw-lesson .sm-uebertragung__beispiel { margin: 0; padding: .5rem .7rem; border-radius: var(--radius-md); background: var(--color-surface-warm); font-size: var(--text-sm); }
.sw-lesson .sm-stufen { display: inline-flex; gap: 3px; vertical-align: middle; }
.sw-lesson .sm-stufen i { width: 14px; height: 10px; border-radius: 3px; background: var(--color-border); }
.sw-lesson .sm-stufen i.is-an { background: var(--color-primary); }

.sw-lesson .sm-gps { display: block; width: 100%; height: auto; }
.sw-lesson .sm-gps__boden { fill: var(--color-surface-warm); stroke: var(--color-border); stroke-width: 2; }
.sw-lesson .sm-gps__kreis { fill: none; stroke: var(--color-primary); stroke-width: 2; stroke-dasharray: 6 5; opacity: .75; }
.sw-lesson .sm-gps__kreis.is-fertig { stroke-dasharray: none; opacity: .9; }
.sw-lesson .sm-gps__punkt { fill: none; stroke: var(--color-text); stroke-width: 3; }
.sw-lesson .sm-gps__handy { transition: opacity .4s; }
.sw-lesson .sm-gps__nr { font: 700 11px var(--font-display, sans-serif); fill: var(--color-text); }
.sw-lesson .sm-gps__frage { font: 700 18px var(--font-display, sans-serif); fill: var(--color-text-muted); }

.sw-lesson .sm-staffel { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-xs); grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); }
.sw-lesson .sm-staffel__station { display: grid; grid-template-columns: auto 1fr; align-content: start; gap: .1rem .5rem; padding: .55rem .7rem; border-radius: var(--radius-md); background: var(--color-surface-warm); transition: background .2s; }
.sw-lesson .sm-staffel__nr { grid-row: span 2; display: grid; place-items: center; width: 1.8rem; height: 1.8rem; border-radius: 50%; background: var(--color-surface); font-family: var(--font-display); font-weight: var(--fw-semi); }
.sw-lesson .sm-staffel__name { font-family: var(--font-display); }
.sw-lesson .sm-staffel__tut { font-size: var(--text-sm); color: var(--color-text-muted); }
.sw-lesson .sm-staffel__station.is-dran { background: var(--color-primary-pale); }
.sw-lesson .sm-staffel__station.is-dran .sm-staffel__nr { background: var(--color-primary); color: var(--color-on-primary); }
.sw-lesson .sm-staffel__station.is-ausgelassen,
.sw-lesson .sm-staffel__station.is-fehlt { opacity: .5; }
.sw-lesson .sm-staffel__station.is-bruch { background: var(--color-text); color: var(--color-surface); opacity: 1; }
.sw-lesson .sm-staffel__station.is-bruch .sm-staffel__tut { color: var(--color-surface); }

@media (prefers-reduced-motion: reduce) {
  .sw-lesson .sm-sensoren__geraet, .sw-lesson .sm-sensoren__nadel, .sw-lesson .sm-teil__flaeche { transition: none; }
}

.sw-lesson .sm-bauteilbild { max-inline-size: 30rem; }

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