/*! © 2026 Steve Wagner · Toolranzen.de — alle Rechte vorbehalten. Nicht zur Weiterverwendung freigegeben. */

.sw-lesson .mg-check {
  margin-bottom: var(--space-lg);
  padding: var(--space-md) var(--space-lg);
  border-radius: var(--radius-lg);
  background: var(--color-secondary-pale);
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-card);
}
.sw-lesson .mg-check__title {
  margin: 0 0 var(--space-sm);
  font-family: var(--font-display);
  font-size: var(--text-xs);
  font-weight: var(--fw-bold);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--color-secondary-ink);
}
.sw-lesson .mg-check__list {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-sm);
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: mgcheck;
}
@media (min-width: 700px) {
  .sw-lesson .mg-check__list { grid-template-columns: repeat(3, 1fr); }
}
.sw-lesson .mg-check__list li {
  counter-increment: mgcheck;
  display: flex;
  gap: var(--space-sm);
  align-items: flex-start;
  font-size: var(--text-sm);
}
.sw-lesson .mg-check__list li::before {
  content: counter(mgcheck);
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px; height: 24px;
  border-radius: var(--radius-full);
  background: var(--color-surface);
  color: var(--color-secondary-ink);
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: var(--text-xs);
}
.sw-lesson .mg-check__q  { display: block; font-weight: var(--fw-semi); }
.sw-lesson .mg-check__a  { display: block; color: var(--color-text-muted); font-size: var(--text-xs); }

.sw-lesson .mg-check__neu {
  margin: var(--space-md) 0 0;
  padding: var(--space-sm) var(--space-md);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  font-size: var(--text-sm);
  line-height: var(--lh-normal);
}
.sw-lesson .mg-check__marke {
  display: inline-block;
  margin-inline-end: var(--space-xs);
  padding: 1px var(--space-xs);
  border-radius: var(--radius-full);
  background: var(--color-secondary);
  color: var(--color-on-secondary);
  font-family: var(--font-display);
  font-size: var(--text-xs);
  font-weight: var(--fw-bold);
  letter-spacing: .06em;
  text-transform: uppercase;
}

.sw-lesson .mg-check--karte {
  padding: var(--space-sm) var(--space-md);
  background: var(--color-surface-warm);
  box-shadow: none;
}
.sw-lesson .mg-check--karte .mg-check__list { gap: var(--space-xs); }
.sw-lesson .mg-check--karte .mg-check__list li { font-size: var(--text-xs); }
.sw-lesson .mg-check--karte .mg-check__list li::before { width: 20px; height: 20px; }
.sw-lesson .mg-check--karte .mg-check__q { font-weight: var(--fw-semi); }

.sw-lesson .lesson-panel { counter-reset: mg-station; }
.sw-lesson .mg-station {
  counter-increment: mg-station;
  padding: var(--space-lg);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-card);
}
.sw-lesson .mg-station + .mg-station { margin-top: var(--space-2xl); }

.sw-lesson .mg-station__title {
  display: flex; align-items: baseline; gap: var(--space-sm);
}
.sw-lesson .mg-station__title::before {
  content: counter(mg-station);
  flex: 0 0 auto;
  display: inline-flex; align-items: center; justify-content: center;
  inline-size: 1.9em; block-size: 1.9em;
  border-radius: var(--radius-full);
  background: var(--color-primary); color: var(--color-on-primary);
  font-family: var(--font-display); font-weight: var(--fw-bold);
  font-size: .7em; line-height: 1;
}
.sw-lesson .mg-station__kicker {
  margin: 0 0 var(--space-xs);
  font-family: var(--font-display);
  font-size: var(--text-xs);
  font-weight: var(--fw-semi);
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--color-primary-ink);
}
.sw-lesson .mg-station__title { margin: 0 0 var(--space-sm); font-size: var(--text-xl); }
.sw-lesson .mg-station__intro { font-family: var(--font-body); line-height: var(--lh-normal); margin: 0 0 var(--space-sm); }
.sw-lesson .mg-station__lead {
  margin: 0 0 var(--space-lg);
  font-family: var(--font-display);
  font-weight: var(--fw-semi);
}
.sw-lesson .mg-station__task {
  margin: 0 0 var(--space-md);
  padding: var(--space-md) var(--space-lg);
  border-radius: var(--radius-md);
  background: var(--color-primary-pale);
  font-family: var(--font-display);
  font-weight: var(--fw-semi);
}

.sw-lesson .mg-station__howto {
  margin: 0 0 var(--space-md);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

.sw-lesson .mg-station > .mg-merksatz + *:not(.lesson-tasks) { margin-block-start: var(--space-lg); }
.sw-lesson .mg-station > .lesson-tasks + *:not(.lesson-tasks),
.sw-lesson .mg-station > .lesson-callout + *:not(.lesson-tasks),
.sw-lesson .mg-station > .mg-help + :not(.mg-help):not(.lesson-tasks) { margin-block-start: var(--space-md); }

.sw-lesson .mg-kopfbild {
  margin: 0 0 var(--space-xl);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--color-surface-warm);
}
.sw-lesson .mg-kopfbild img {
  display: block; inline-size: 100%; block-size: auto;
  aspect-ratio: 4 / 3; object-fit: cover;
}

.sw-lesson .mg-aufgabenbild {
  margin: 0 auto var(--space-md);
  max-inline-size: 100%;
}
.sw-lesson .mg-aufgabenbild img {
  display: block; inline-size: 100%; block-size: auto;
  aspect-ratio: 4 / 3;
  border-radius: var(--radius-md);
  background: var(--color-surface-warm);
}
.sw-lesson .mg-aufgabenbild figcaption {
  margin-block-start: var(--space-xs);
  font-size: var(--text-sm); color: var(--color-text-muted);
  text-align: center;
}
.sw-lesson .mg-aufgabenbild figcaption b {
  display: block;
  color: var(--color-text);
  font-family: var(--font-display);
}
.sw-lesson .mg-aufgabenbild__hinweis {
  display: block;
  margin-block-start: var(--space-xs);
  max-inline-size: 46rem;
  margin-inline: auto;
  line-height: var(--lh-normal);
  text-wrap: pretty;
}

.sw-lesson .mg-cards {
  display: flex; flex-wrap: wrap; gap: var(--space-sm);
  margin: 0 0 var(--space-md); padding: 0; list-style: none;
}
.sw-lesson .mg-cards li {
  display: inline-flex; align-items: center; gap: var(--space-xs);
  padding: var(--space-xs) var(--space-md);
  min-height: 44px;
  border-radius: var(--radius-full);
  background: var(--color-surface-warm);
  border: 1px solid var(--color-border);
  font-size: var(--text-sm);
}


.sw-lesson .mg-timer:empty { display: none; }
.sw-lesson .mg-timer {
  display: flex; flex-direction: column; align-items: center; gap: var(--space-sm);
  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 .mg-timer .tr-room-timer {
  display: flex; flex-direction: column; align-items: center; gap: var(--space-xs);
  inline-size: min(100%, 20rem);
}
.sw-lesson .mg-timer .tr-room-timer__value {
  font-family: var(--font-display); font-weight: var(--fw-bold);
  font-size: clamp(3rem, 14vw, 5rem); line-height: 1;
  font-variant-numeric: tabular-nums;
}
.sw-lesson .mg-timer .tr-room-timer__value.is-urgent { color: var(--color-primary-ink); }
.sw-lesson .mg-timer .tr-room-timer__track {
  inline-size: 100%; block-size: .5rem;
  border-radius: var(--radius-full);
  background: var(--color-border);
  overflow: hidden;
}
.sw-lesson .mg-timer .tr-room-timer__fill {
  block-size: 100%;
  background: var(--color-primary-ink);
  transition: width .25s linear;
}
.sw-lesson .mg-timer .tr-room-timer__start { min-inline-size: 10rem; }

.sw-lesson .mg-paare {
  display: grid; gap: var(--space-md);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
  margin: var(--space-md) 0;
}
.sw-lesson .mg-paar {
  padding: var(--space-sm) var(--space-md) var(--space-md);
  border-radius: var(--radius-lg);
  background: var(--color-surface-warm);
}
.sw-lesson .mg-paar__titel {
  margin: 0 0 var(--space-xs);
  font-family: var(--font-display); font-weight: var(--fw-semi);
}
.sw-lesson .mg-paar .lesson-figures {
  grid-template-columns: 1fr 1fr; gap: var(--space-sm); margin: 0;
}
.sw-lesson .mg-paar .lesson-figure__art { height: 120px; }
.sw-lesson .mg-paar .lesson-figure__body { font-size: var(--text-sm); }


.sw-lesson .mg-help { margin-top: var(--space-md); }
.sw-lesson .mg-help + .mg-help { margin-top: var(--space-sm); }
.sw-lesson .mg-help > summary {
  cursor: pointer;
  display: flex; align-items: center; gap: var(--space-xs);
  padding: var(--space-sm) var(--space-md);
  min-height: 44px;
  border-radius: var(--radius-full);
  background: var(--color-surface-warm);
  border: 1px solid var(--color-border);
  font-family: var(--font-display);
  font-weight: var(--fw-semi);
  font-size: var(--text-sm);
}
.sw-lesson .mg-help > summary svg { width: 16px; height: 16px; flex: 0 0 auto; }
.sw-lesson .mg-help > div {
  padding: var(--space-md);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  line-height: var(--lh-normal);
}
.sw-lesson .mg-help--pro > summary { background: var(--color-secondary-pale); border-color: var(--color-secondary-light); }

.sw-lesson .mg-merksatz {
  padding: var(--space-lg);
  border-radius: var(--radius-lg);
  border: 2px solid var(--color-primary);
  background: var(--color-surface);
}
.sw-lesson .mg-merksatz__label {
  display: inline-block;
  margin-bottom: var(--space-sm);
  padding: 2px var(--space-sm);
  border-radius: var(--radius-full);
  background: var(--color-primary);
  color: var(--color-on-primary);
  font-family: var(--font-display);
  font-size: var(--text-xs);
  font-weight: var(--fw-bold);
  letter-spacing: .06em;
  text-transform: uppercase;
}
.sw-lesson .mg-merksatz__text {
  margin: 0 0 var(--space-md);
  font-family: var(--font-body);
  font-size: var(--text-lg);
  line-height: var(--lh-normal);
}
.sw-lesson .mg-merksatz__text em { font-style: normal; font-weight: var(--fw-bold); color: var(--color-primary-ink); }
.sw-lesson .mg-words { display: grid; grid-template-columns: 1fr; gap: var(--space-sm); margin: 0; padding: 0; list-style: none; }
@media (min-width: 700px) { .sw-lesson .mg-words { grid-template-columns: repeat(3, 1fr); } }
.sw-lesson .mg-words li {
  padding: var(--space-sm) var(--space-md);
  border-radius: var(--radius-sm);
  background: var(--color-surface-warm);
  font-size: var(--text-sm);
}
.sw-lesson .mg-words b { display: block; font-family: var(--font-display); }
.sw-lesson .mg-words span { color: var(--color-text-muted); }



@media (prefers-reduced-motion: reduce) {
  .sw-lesson .mg-help > summary { transition: none; }
}

/* © 2026 Steve Wagner · Toolranzen.de — alle Rechte vorbehalten. Nicht zur Weiterverwendung freigegeben. */