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

.sw-lesson .ng-merkhilfe {
  display: flex; flex-direction: column; gap: 2px;
  margin: var(--space-lg) 0;
  padding: var(--space-md) var(--space-lg);
  border-radius: var(--radius-md);
  border-left: 4px solid var(--color-accent);
  background: var(--color-accent-soft);
  font-family: var(--font-body);
  font-size: var(--text-lg);
  line-height: var(--lh-normal);
}
.sw-lesson .ng-merkhilfe__label {
  font-family: var(--font-display);
  font-size: var(--text-xs);
  font-weight: var(--fw-bold);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--color-secondary-ink);
}

.sw-lesson .ng-abschnitt { margin-top: var(--space-lg); }
.sw-lesson .ng-abschnitt__titel {
  display: flex; align-items: center; gap: var(--space-sm);
  margin: 0 0 var(--space-md); padding-bottom: var(--space-sm);
  border-bottom: 1px solid var(--color-border);
  font-size: var(--text-lg);
}

.sw-lesson .ng-gefahren { margin: 0; padding-left: 1.3em; font-family: var(--font-body); }
.sw-lesson .ng-gefahren li { margin-bottom: var(--space-xs); }
.sw-lesson .ng-gefahren li::marker { color: var(--color-error); }

.sw-lesson .ng-ampel {
  display: flex; gap: var(--space-xs);
  margin: 0 0 var(--space-sm); padding: 0; list-style: none;
}
.sw-lesson .ng-ampel__stufe {
  display: flex; align-items: center; justify-content: center;
  width: 40px; height: 40px;
  border-radius: var(--radius-sm);
  border: 2px solid var(--color-border);
  background: var(--color-surface);
  font-family: var(--font-display); font-weight: var(--fw-bold);
  color: var(--color-text-light);
}
.sw-lesson .ng-ampel[data-ng-stufe="1"] .ng-ampel__stufe.is-an {
  background: var(--color-success); border-color: var(--color-success); color: #fff;  /* bewusst: Text auf gesättigter Signalfläche */
}
.sw-lesson .ng-ampel[data-ng-stufe="2"] .ng-ampel__stufe.is-an {
  background: var(--color-warning); border-color: var(--color-warning); color: var(--color-text);
}
.sw-lesson .ng-ampel[data-ng-stufe="3"] .ng-ampel__stufe.is-an {
  background: var(--color-error); border-color: var(--color-error); color: #fff;  /* bewusst, siehe oben */
}
.sw-lesson .ng-ampel__text { margin: 0; font-size: var(--text-sm); }
.sw-lesson .ng-ampel__hinweis { margin: var(--space-xs) 0 0; font-size: var(--text-xs); color: var(--color-text-muted); }

.sw-lesson .ng-regionen {
  display: grid; grid-template-columns: 1fr; gap: var(--space-md);
  margin: var(--space-md) 0 0; padding: 0; list-style: none;
}
@media (min-width: 700px) { .sw-lesson .ng-regionen { grid-template-columns: 1fr 1fr; } }
.sw-lesson .ng-region {
  padding: var(--space-lg);
  border-radius: var(--radius-md);
  background: var(--color-surface-warm);
  border-left: 4px solid var(--color-primary);
}
.sw-lesson .ng-region[data-ng-region="karst"] { border-left-color: var(--color-success); }
.sw-lesson .ng-region[data-ng-region="feuer"] { border-left-color: var(--color-error); }
.sw-lesson .ng-region[data-ng-region="sturm"] { border-left-color: var(--color-secondary); }
.sw-lesson .ng-region__titel {
  display: flex; align-items: center; gap: var(--space-sm);
  margin: 0 0 var(--space-sm); font-size: var(--text-lg);
}
.sw-lesson .ng-region__icon { display: inline-flex; color: var(--color-primary); }
.sw-lesson .ng-region__icon svg { width: 20px; height: 20px; }
.sw-lesson .ng-region p { margin: 0 0 var(--space-sm); font-family: var(--font-body); }
.sw-lesson .ng-region__link { margin: 0; font-size: var(--text-sm); }

.sw-lesson .ng-begriffe {
  display: grid; grid-template-columns: 1fr; gap: var(--space-md); margin: 0;
}
@media (min-width: 700px) { .sw-lesson .ng-begriffe { grid-template-columns: 1fr 1fr; } }
.sw-lesson .ng-begriff {
  padding: var(--space-lg);
  border-radius: var(--radius-md);
  background: var(--color-surface-warm);
  border-left: 4px solid var(--color-info);
}
.sw-lesson .ng-begriff dt {
  margin-bottom: var(--space-xs);
  font-family: var(--font-display); font-weight: var(--fw-bold); font-size: var(--text-lg);
}
.sw-lesson .ng-begriff dd { margin: 0; font-family: var(--font-body); }

.sw-lesson .ng-sim {
  margin-top: var(--space-lg);
  padding: var(--space-lg);
  border-radius: var(--radius-lg);
  background: var(--color-secondary-pale);
  border: 1px solid var(--color-border);
}
.sw-lesson .ng-sim__fallback { margin: 0; font-size: var(--text-sm); color: var(--color-text-muted); }
.sw-lesson .ng-sim.is-bereit .ng-sim__fallback { display: none; }

.sw-lesson .ng-sim__buehne {
  position: relative; overflow: hidden;
  height: 200px; margin-bottom: var(--space-md);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
}
.sw-lesson .ng-sim__regler { display: flex; align-items: center; gap: var(--space-md); flex-wrap: wrap; }
.sw-lesson .ng-sim__regler input[type="range"] { flex: 1 1 12rem; min-width: 10rem; }
.sw-lesson .ng-sim__wert {
  font-family: var(--font-display); font-weight: var(--fw-bold); font-size: var(--text-lg);
  font-variant-numeric: tabular-nums; min-width: 6.5rem;
}
.sw-lesson .ng-sim__lage { margin: var(--space-sm) 0 0; font-size: var(--text-sm); }
.sw-lesson .ng-sim__knopf {
  min-height: 44px; padding: var(--space-xs) var(--space-lg);
  border-radius: var(--radius-full);
  border: 2px solid transparent;
  background: var(--color-primary); color: var(--color-on-primary);
  font-family: var(--font-display); font-weight: var(--fw-semi);
  cursor: pointer;
}
.sw-lesson .ng-sim__knopf:disabled { opacity: .55; cursor: default; }

.sw-lesson .ng-haus {
  position: absolute; left: 50%; bottom: 20px; translate: -50% 0;
  width: 90px; height: 80px;
  background: var(--color-surface-warm);
  border: 2px solid var(--color-text-muted);
  border-radius: 4px 4px 0 0;
  transform-origin: bottom center;
}
.sw-lesson .ng-haus::before {
  content: ""; position: absolute; left: -12px; top: -26px;
  border-left: 57px solid transparent; border-right: 57px solid transparent;
  border-bottom: 26px solid var(--color-primary);
}
.sw-lesson .ng-boden {
  position: absolute; inset: auto 0 0 0; height: 20px;
  background: var(--color-border);
}
.sw-lesson .ng-baum {
  position: absolute; bottom: 20px; width: 6px; height: 50px;
  background: var(--color-text-muted); transform-origin: bottom center;
}

.sw-lesson .ng-welle {
  position: absolute; bottom: 20px; left: 0;
  height: 14px; width: 60px; border-radius: var(--radius-full);
  background: var(--color-info);
}
.sw-lesson .ng-strand {
  position: absolute; bottom: 0; right: 0; width: 35%; height: 60px;
  background: var(--color-surface-warm);
}

.sw-lesson .ng-auto {
  position: absolute; bottom: 26px; left: 0;
  width: 54px; height: 24px; border-radius: 6px;
  background: var(--color-primary);
}
.sw-lesson .ng-strasse {
  position: absolute; inset: auto 0 0 0; height: 26px;
  background: var(--color-text-muted);
}
.sw-lesson .ng-strasse.is-glatt { background: var(--color-info); }
.sw-lesson .ng-ziel {
  position: absolute; bottom: 26px; width: 4px; height: 60px;
  background: var(--color-error);
}

.sw-lesson .ng-nebel {
  position: absolute; inset: 0;
  background: var(--color-surface);
  pointer-events: none;
}
.sw-lesson .ng-schild {
  position: absolute; left: 50%; bottom: 30px; translate: -50% 0;
  width: 70px; height: 70px; border-radius: var(--radius-full);
  border: 6px solid var(--color-error);
  background: var(--color-surface);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-weight: var(--fw-bold); font-size: var(--text-xl);
}

@media (prefers-reduced-motion: reduce) {
  .sw-lesson .ng-haus,
  .sw-lesson .ng-baum,
  .sw-lesson .ng-welle,
  .sw-lesson .ng-auto { transition: none !important; animation: none !important; }
}

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