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

.sw-lesson .px-raster {
  display: grid;
  grid-template-columns: repeat(var(--raster-breite, 8), 1fr);
  gap: 2px;
  width: min(100%, 22rem);
  padding: 4px;
  border-radius: var(--radius-md);
  background: var(--color-border);
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
}
.sw-lesson .px-raster__reihe { display: contents; }
.sw-lesson .px-raster__zelle {
  aspect-ratio: 1;
  min-width: 0;
  padding: 0;
  border: 0;
  border-radius: 2px;
  background: var(--color-surface);
  cursor: crosshair;
}
.sw-lesson .px-raster__zelle[aria-pressed="true"] { background: var(--color-text); }
.sw-lesson .px-raster__zelle:focus-visible { outline: 3px solid var(--color-primary); outline-offset: 1px; z-index: 1; }

.sw-lesson .px-editor { display: grid; gap: var(--space-md); grid-template-columns: 1fr; align-items: start; }
@container lektionsspalte (min-width: 36rem) {
  .sw-lesson .px-editor { grid-template-columns: minmax(0, 22rem) 1fr; }
}
.sw-lesson .px-editor__raster { display: grid; gap: var(--space-sm); }
.sw-lesson .px-editor__text { display: grid; gap: var(--space-xs); }
.sw-lesson .px-editor__bits,
.sw-lesson .px-farbtabelle__bits {
  width: 100%;
  margin: 0;
  padding: .6rem .8rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  color: var(--color-text);
  font-family: ui-monospace, "Cascadia Mono", "Consolas", monospace;
  font-size: var(--text-base);
  line-height: 1.5;
  letter-spacing: .08em;
  white-space: pre;
  overflow-x: auto;
  resize: vertical;
}
.sw-lesson .px-editor__bits[aria-invalid="true"] { background: var(--color-primary-pale); }
.sw-lesson .px-editor__fehler { margin: 0; font-size: var(--text-sm); color: var(--color-text-muted); }
.sw-lesson .px-editor__fehler:empty { display: none; }
.sw-lesson .px-editor__spalte { display: grid; gap: var(--space-xs); align-content: start; }
.sw-lesson .px-editor__titel { margin: 0; font-family: var(--font-display); font-weight: var(--fw-semi); font-size: var(--text-sm); }
.sw-lesson .px-editor__hinweis { margin: 0; font-size: var(--text-xs); color: var(--color-text-muted); }
.sw-lesson .px-editor__treffer { margin: 0; font-family: var(--font-display); font-weight: var(--fw-semi); font-size: var(--text-sm); }
.sw-lesson .px-editor__treffer:empty { display: none; }
.sw-lesson .px-editor__treffer.is-fertig { color: var(--color-success); }
@container lektionsspalte (min-width: 44rem) {
  .sw-lesson .px-editor--drei { grid-template-columns: 1fr 1fr 1fr; }
  .sw-lesson .px-editor--drei .px-raster { width: 100%; }
}
.sw-lesson .px-raster--fest { pointer-events: none; }
.sw-lesson .px-raster--fest .px-raster__zelle { cursor: default; }

.sw-lesson .px-palette { display: flex; flex-wrap: wrap; gap: .35rem; }
.sw-lesson .px-palette__farbe {
  display: inline-flex; align-items: center; gap: .35rem;
  min-height: 44px; padding: .3rem .6rem .3rem .35rem;
  border: 0; border-radius: 999px;
  background: var(--color-surface); color: var(--color-text);
  font: inherit; cursor: pointer;
}
.sw-lesson .px-palette__farbe[aria-checked="true"] { background: var(--color-primary-pale); }
.sw-lesson .px-palette__probe { width: 1.5rem; height: 1.5rem; border-radius: 50%; box-shadow: inset 0 0 0 1px var(--color-border); }
.sw-lesson .px-palette__bits { font-size: var(--text-xs); }
.sw-lesson .px-farbtabelle__satz { margin: .25rem 0 0; font-family: var(--font-display); font-weight: var(--fw-semi); }
.sw-lesson .px-farbtabelle__satz--leise { font-weight: 400; color: var(--color-text-muted); font-size: var(--text-sm); }

.sw-lesson .px-rgb__proben { display: grid; gap: var(--space-sm); grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); }
.sw-lesson .px-rgb__probe-block { display: grid; gap: .35rem; }
.sw-lesson .px-rgb__zieltext { margin: 0; font-size: var(--text-sm); color: var(--color-text-muted); }
.sw-lesson .px-rgb__probe { height: 6rem; border-radius: var(--radius-md); box-shadow: inset 0 0 0 1px var(--color-border); }
.sw-lesson .px-rgb__subpixel {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 3px;
  height: 6rem; padding: 4px; border-radius: var(--radius-md);
  background: var(--color-text);
}
.sw-lesson .px-rgb__lampe { border-radius: 3px; }
.sw-lesson .px-rgb__werte { margin: var(--space-sm) 0 0; display: grid; grid-template-columns: max-content 1fr; gap: .25rem var(--space-sm); font-size: var(--text-sm); }
.sw-lesson .px-rgb__werte dt { color: var(--color-text-muted); }
.sw-lesson .px-rgb__werte dd { margin: 0; font-family: ui-monospace, "Cascadia Mono", "Consolas", monospace; overflow-wrap: anywhere; }
.sw-lesson .px-rgb__hex { width: 6.5rem; font-family: ui-monospace, "Cascadia Mono", "Consolas", monospace; }
.sw-lesson .px-rgb__stand { 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 .px-rgb__regler--r { accent-color: var(--color-error); }
.sw-lesson .px-rgb__regler--g { accent-color: var(--color-success); }
.sw-lesson .px-rgb__regler--b { accent-color: var(--color-info); }
@container lektionsspalte (max-width: 30rem) {
  .sw-lesson .px-rgb__werte { grid-template-columns: 1fr; }
}

.sw-lesson .px-groesse__rechnung { margin: 0; display: grid; grid-template-columns: max-content 1fr; gap: .3rem var(--space-sm); font-size: var(--text-sm); }
.sw-lesson .px-groesse__rechnung dt { color: var(--color-text-muted); }
.sw-lesson .px-groesse__rechnung dd { margin: 0; font-family: var(--font-display); font-weight: var(--fw-semi); font-variant-numeric: tabular-nums; }
.sw-lesson .px-groesse__balken { display: grid; grid-template-columns: max-content 1fr; gap: .3rem var(--space-sm); align-items: center; margin-top: var(--space-sm); font-size: var(--text-sm); color: var(--color-text-muted); }
.sw-lesson .px-groesse__spur { display: block; height: 14px; border-radius: 999px; background: var(--color-surface-warm); }
.sw-lesson .px-groesse__spur i { display: block; height: 100%; width: 0; border-radius: 999px; background: var(--color-primary); }
@container lektionsspalte (max-width: 30rem) {
  .sw-lesson .px-groesse__rechnung { grid-template-columns: 1fr; }
}

.sw-lesson .px-fps { display: grid; gap: var(--space-sm); grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); }
.sw-lesson .px-fps__feld { margin: 0; }
.sw-lesson .px-fps__feld canvas { display: block; width: 100%; height: auto; border-radius: var(--radius-md); }
.sw-lesson .px-fps__feld figcaption { margin-top: .25rem; font-size: var(--text-sm); color: var(--color-text-muted); }
.sw-lesson .px-fps__feld strong { font-family: var(--font-display); color: var(--color-text); }
.sw-lesson .px-fps__teil2 { margin-top: var(--space-md); }
.sw-lesson .px-fps__titel { margin: 0 0 var(--space-xs); font-family: var(--font-display); font-weight: var(--fw-semi); font-size: var(--text-sm); }
.sw-lesson .px-fps__rechnung { margin: 0; font-size: var(--text-sm); font-variant-numeric: tabular-nums; }
.sw-lesson .px-fps__urteil { margin: .35rem 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 .px-rgb__reglerblock { display: grid; gap: var(--space-xs); flex: 1 1 100%; }
.sw-lesson .px-rgb__reglerzeile { display: grid; grid-template-columns: 3.5rem 1fr 3rem; align-items: center; flex: none; }
.sw-lesson .px-rgb__reglerzeile .px-tafel__range { min-width: 0; }
.sw-lesson .px-editor--farbtabelle .px-raster { width: min(100%, 14rem); }
.sw-lesson .px-editor--farbtabelle .px-farbtabelle__bits { font-size: var(--text-sm); letter-spacing: .04em; }
@container lektionsspalte (min-width: 36rem) {
  .sw-lesson .px-editor--farbtabelle { grid-template-columns: minmax(0, 15rem) 1fr; }
}
.sw-lesson .px-rechner { margin: 0; display: grid; grid-template-columns: max-content 1fr; gap: .35rem var(--space-sm); font-size: var(--text-sm); }
.sw-lesson .px-rechner dt { font-family: var(--font-display); font-weight: var(--fw-semi); }
.sw-lesson .px-rechner dd { margin: 0; font-variant-numeric: tabular-nums; }
.sw-lesson .px-fps__urteil.is-ruckelt { background: var(--color-error-pale); }
@container lektionsspalte (max-width: 30rem) {
  .sw-lesson .px-rechner { grid-template-columns: 1fr; }
}

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