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

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

.sw-lesson .bc-gehaeuse { display: block; width: 100%; max-width: 32rem; height: auto; margin: 0 auto; }
.sw-lesson .bc-gehaeuse * { stroke-linejoin: round; }
.sw-lesson .bc-z-gehaeuse { fill: var(--color-text); }
.sw-lesson .bc-z-innen { fill: var(--color-border); stroke: var(--color-text); stroke-width: 2; }
.sw-lesson .bc-z-schacht { fill: var(--color-surface-warm); stroke: var(--color-text); stroke-width: 2; }
.sw-lesson .bc-z-schachtlinie { stroke: var(--color-border); stroke-width: 3; stroke-linecap: round; }
.sw-lesson .bc-z-platine { fill: var(--color-text); stroke: var(--color-text); stroke-width: 2; }
.sw-lesson .bc-z-hell { fill: var(--color-border); stroke: var(--color-text); stroke-width: 2; }
.sw-lesson .bc-z-weiss { fill: var(--color-surface); stroke: var(--color-text); stroke-width: 2; }
.sw-lesson .bc-z-dunkel { fill: var(--color-text); stroke: var(--color-text); stroke-width: 1.5; }
.sw-lesson .bc-z-fluegel { fill: var(--color-text-muted); }
.sw-lesson .bc-z-nabe { fill: var(--color-border); stroke: var(--color-text); stroke-width: 1.5; }
.sw-lesson .bc-z-ring { fill: none; stroke: var(--color-border); stroke-width: 1.5; }
.sw-lesson .bc-z-bahn { fill: none; stroke: var(--color-text-muted); stroke-width: 1.5; }
.sw-lesson .bc-z-schraube { fill: var(--color-surface-warm); stroke: var(--color-text); stroke-width: 1; }
.sw-lesson .bc-z-rippe, .sw-lesson .bc-z-kante { stroke: var(--color-text); stroke-width: 1.5; fill: none; }
.sw-lesson .bc-z-kontakt { stroke: var(--color-text-muted); stroke-width: 3; }
.sw-lesson .bc-z-arm { stroke: var(--color-text); stroke-width: 4; stroke-linecap: round; }
.sw-lesson .bc-z-kabel { fill: none; stroke: var(--color-text); stroke-width: 5; stroke-linecap: round; opacity: .85; }
.sw-lesson .bc-gehaeuse__kabel { pointer-events: none; }
.sw-lesson .bc-teil { cursor: pointer; }
.sw-lesson .bc-teil__treffer { fill: transparent; }
.sw-lesson .bc-teil__flaeche { transition: fill .15s; }
.sw-lesson .bc-teil:hover .bc-teil__flaeche { fill: var(--color-primary-pale); }
.sw-lesson .bc-teil--hauptplatine:hover .bc-teil__flaeche { fill: var(--color-text-muted); }
.sw-lesson .bc-teil:focus-visible .bc-teil__treffer { fill: var(--color-primary-pale); }
.sw-lesson .bc-teil.is-gewaehlt .bc-teil__flaeche,
.sw-lesson .bc-teil.is-richtig .bc-teil__flaeche { fill: var(--color-primary); }
.sw-lesson .bc-teil.is-gesucht .bc-teil__flaeche { fill: var(--color-primary-pale); }
.sw-lesson .bc-teil.is-gesucht .bc-teil__treffer { fill: var(--color-primary); opacity: .35; }
.sw-lesson .bc-gehaeuse__namen { display: none; pointer-events: none; }
.sw-lesson .bc-gehaeuse.zeigt-namen .bc-gehaeuse__namen { display: inline; }
.sw-lesson .bc-gehaeuse__name { font: 700 13px var(--font-display, sans-serif); fill: var(--color-text); paint-order: stroke; stroke: var(--color-surface); stroke-width: 4px; }
.sw-lesson .bc-gehaeuse__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 .bc-gehaeuse__info { margin: var(--space-sm) 0 0; padding: .5rem .7rem; border-radius: var(--radius-md); background: var(--color-primary-pale); }
.sw-lesson .bc-gehaeuse__info:empty { display: none; }
.sw-lesson .bc-gehaeuse__mehr { color: var(--color-text-muted); }

.sw-lesson .bc-mem { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: var(--space-sm); }
.sw-lesson .bc-mem__strom { margin: 0 0 var(--space-xs); font-family: var(--font-display); font-weight: var(--fw-semi); }
.sw-lesson .bc-mem__strom.is-aus { color: var(--color-text-muted); }
.sw-lesson .bc-mem__fach { padding: var(--space-sm); border-radius: var(--radius-md); background: var(--color-surface-warm); }
.sw-lesson .bc-mem__fach--ram { background: var(--color-primary-pale); }
.sw-lesson .bc-tafel.is-aus .bc-mem__fach--ram { background: var(--color-surface-warm); }
.sw-lesson .bc-mem__titel { margin: 0 0 var(--space-xs); font-size: var(--text-base); font-family: var(--font-display); }
.sw-lesson .bc-mem__art, .sw-lesson .bc-mem__unter { margin: .2rem 0; font-size: var(--text-sm); color: var(--color-text-muted); }
.sw-lesson .bc-mem__art:empty { display: none; }
.sw-lesson .bc-mem__liste { list-style: none; margin: 0 0 var(--space-xs); padding: 0; display: grid; gap: .3rem; }
.sw-lesson .bc-mem__eintrag {
  display: grid; grid-template-columns: max-content 1fr max-content; align-items: center; gap: .45rem;
  padding: .25rem .4rem .25rem .6rem; border-radius: var(--radius-md); background: var(--color-surface);
  font-size: var(--text-sm);
}
.sw-lesson .bc-mem__liste[aria-label="Gespeicherte Dateien"] .bc-mem__eintrag { grid-template-columns: 1fr max-content; }
.sw-lesson .bc-mem__knopf { min-height: 44px; padding: .3rem .8rem; }
.sw-lesson .bc-mem__punkt { width: .9rem; height: .9rem; border-radius: 3px; }
.sw-lesson .bc-mem__leer { color: var(--color-text-muted); font-size: var(--text-sm); }
.sw-lesson .bc-mem__belegt { margin: 0 0 var(--space-xs); font-size: var(--text-sm); }
.sw-lesson .bc-mem__fach--ram.is-voll .bc-mem__belegt { font-weight: var(--fw-semi); color: var(--color-primary-ink); }
.sw-lesson .bc-mem__raster { display: grid; grid-template-columns: repeat(8, 1fr); gap: 4px; }
.sw-lesson .bc-mem__platz { aspect-ratio: 1; min-height: 1.4rem; border-radius: 4px; background: var(--color-surface); }
.sw-lesson .bc-mem__platz--spiel, .sw-lesson .bc-mem__eintrag--spiel .bc-mem__punkt { background: var(--color-primary); }
.sw-lesson .bc-mem__platz--browser, .sw-lesson .bc-mem__eintrag--browser .bc-mem__punkt { background: var(--color-text); }
.sw-lesson .bc-mem__platz--musik, .sw-lesson .bc-mem__eintrag--musik .bc-mem__punkt { background: var(--color-text-muted); }
.sw-lesson .bc-mem__platz--text, .sw-lesson .bc-mem__eintrag--text .bc-mem__punkt { background: var(--color-primary-ink); }
.sw-lesson .bc-tafel.is-ruckelt .bc-mem__raster { animation: bc-ruckeln .5s steps(2) infinite; }
@keyframes bc-ruckeln { 50% { transform: translateX(2px); } }
@media (prefers-reduced-motion: reduce) { .sw-lesson .bc-tafel.is-ruckelt .bc-mem__raster { animation: none; } }
.sw-lesson .bc-mem__lade { margin-top: var(--space-xs); height: .6rem; border-radius: 999px; background: var(--color-surface); overflow: hidden; }
.sw-lesson .bc-mem__lade-balken { height: 100%; width: 0; background: var(--color-primary); }
.sw-lesson .bc-mem__text { margin-top: var(--space-xs); }
.sw-lesson .bc-mem__text:empty { display: none; }
.sw-lesson .bc-mem__text-titel { margin: 0; font-size: var(--text-xs); color: var(--color-text-muted); }
.sw-lesson .bc-mem__satz { margin: .15rem 0 0; padding: .25rem .5rem; border-radius: var(--radius-md); background: var(--color-surface); font-size: var(--text-sm); }

.sw-lesson .bc-tafel__canvas { display: block; width: 100%; max-width: 40rem; height: auto; margin: 0 auto; border-radius: var(--radius-md); }

.sw-lesson .bc-staffel__reihe {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 6px;
}
@container lektionsspalte (max-width: 36rem) {
  .sw-lesson .bc-staffel__reihe { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.sw-lesson .bc-staffel__karte {
  display: grid; justify-items: center; gap: .2rem; padding: .55rem .3rem;
  border-radius: var(--radius-md); background: var(--color-surface-warm); text-align: center;
  font-size: var(--text-sm); transition: background .2s;
}
.sw-lesson .bc-staffel__nr {
  display: grid; place-items: center; width: 1.7rem; height: 1.7rem; border-radius: 50%;
  background: var(--color-surface); font-family: var(--font-display); font-weight: var(--fw-semi);
}
.sw-lesson .bc-staffel__name { font-family: var(--font-display); font-weight: var(--fw-semi); overflow-wrap: anywhere; hyphens: auto; }
.sw-lesson .bc-staffel__karte.is-fertig { background: var(--color-primary-pale); }
.sw-lesson .bc-staffel__karte.is-aktiv { background: var(--color-primary); color: var(--color-on-primary); }
.sw-lesson .bc-staffel__karte.is-aktiv .bc-staffel__nr { color: var(--color-text); }
.sw-lesson .bc-staffel__karte.is-abbruch { background: var(--color-text); color: var(--color-surface); }
.sw-lesson .bc-staffel__karte.is-abbruch .bc-staffel__nr { color: var(--color-text); }
.sw-lesson .bc-staffel__karte.is-fehlt { opacity: .45; text-decoration: line-through; }
.sw-lesson .bc-staffel__platine {
  margin: 6px 0 0; padding: .45rem .6rem; border-radius: var(--radius-md);
  background: var(--color-surface-warm); text-align: center; font-size: var(--text-sm);
}
.sw-lesson .bc-staffel__platine.is-aktiv { background: var(--color-primary-pale); }
.sw-lesson .bc-staffel__platine.is-fehlt { opacity: .45; text-decoration: line-through; }
.sw-lesson .bc-staffel__text { margin: var(--space-sm) 0 0; padding: .5rem .7rem; border-radius: var(--radius-md); background: var(--color-surface-warm); }
.sw-lesson .bc-staffel__fehlt { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; flex-basis: 100%; }
.sw-lesson .bc-staffel__fehlt .bc-tafel__knopf { min-height: 44px; padding: .35rem .8rem; font-size: var(--text-sm); }

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

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