/* Modulation und Superhet (AFU-375, /modulation). Eigene mo-Klassen, Aufbau wie /empfangskette, Farben aus style.css. */

:root {
  --mo-sig: #6aa6ff;
  --mo-huelle: #fbbf24;
  --mo-nf: #a78bfa;
  --mo-im: #f87171;
  --mo-rausch: #a3a3a3;
  --mo-gut: #34d399;
  --mo-schlecht: #f87171;
  --mo-band99: rgba(106, 166, 255, 0.16);
  --mo-bandx: #34d399;
  --mo-netz: rgba(138, 147, 179, 0.24);
  --mo-rund: rgba(167, 139, 250, 0.16);
  --mo-afu: rgba(52, 211, 153, 0.14);
  --mo-flug: rgba(248, 113, 113, 0.14);
}
@media (prefers-color-scheme: light) {
  :root {
    --mo-sig: #2f6fed;
    --mo-huelle: #b45309;
    --mo-nf: #7c5cff;
    --mo-im: #dc2626;
    --mo-rausch: #6b7280;
    --mo-gut: #047857;
    --mo-schlecht: #dc2626;
    --mo-band99: rgba(47, 111, 237, 0.12);
    --mo-bandx: #047857;
    --mo-netz: rgba(70, 82, 110, 0.2);
    --mo-rund: rgba(124, 92, 255, 0.12);
    --mo-afu: rgba(4, 120, 87, 0.1);
    --mo-flug: rgba(220, 38, 38, 0.1);
  }
}

.mo-rahmen { padding-top: 0.4rem; padding-bottom: 2.5rem; }

.mo-buehne {
  display: grid; gap: 0.7rem;
  grid-template-columns: minmax(0, 2.1fr) minmax(23rem, 1fr);
  align-items: start;
}
.mo-links, .mo-rechts { display: grid; gap: 0.7rem; min-width: 0; align-items: start; }
@media (max-width: 1000px) {
  .mo-buehne { grid-template-columns: minmax(0, 1fr); }
}
/* AFU-362: ab 1800 px rechts zwei Spalten */
@media (min-width: 1800px) {
  :root:not([data-breite="begrenzt"]) .mo-buehne { grid-template-columns: minmax(0, 2.2fr) minmax(0, 1.5fr); }
  :root:not([data-breite="begrenzt"]) .mo-rechts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Kästen */
.mo-kasten { border: 1px solid var(--border); border-radius: var(--radius); background: var(--card-bg); min-width: 0; overflow: hidden; }
.mo-kopf {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.3rem 0.7rem;
  min-height: 2rem; padding: 0.15rem 0.7rem; border-bottom: 1px solid var(--border);
}
.mo-titel { font-size: 0.76rem; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; color: var(--muted); }
.mo-luft { flex: 1 1 auto; }
.mo-inhalt { padding: 0.55rem 0.7rem; }
.mo-haken { display: inline-flex; align-items: center; gap: 0.3rem; font-size: 0.82rem; cursor: pointer; white-space: nowrap; }
.mo-haken input[type="checkbox"] { accent-color: var(--accent); margin: 0; }
.mo-seg button { padding: 0.1rem 0.55rem; font-size: 0.8rem; min-height: 1.75rem; white-space: nowrap; }
.mo-seg[hidden] { display: none; }
.mo-seg button[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: #fff; }
.mo-arten { margin-bottom: 0.55rem; flex-wrap: wrap; }
.mo-rahmen .btn-sm { min-height: 1.75rem; padding: 0.1rem 0.6rem; font-size: 0.8rem; }
select.mo-klein { height: 1.75rem; padding: 0 0.3rem; font-size: 0.82rem; background: var(--bg2); color: var(--fg);
  border: 1px solid var(--border); border-radius: 6px; }
.mo-legende { font-size: 0.8rem; color: var(--muted); }
.mo-legende span { font-weight: 600; }
.mo-l-sig { color: var(--mo-sig); }
.mo-l-huelle { color: var(--mo-huelle); }
.mo-l-nf { color: var(--mo-nf); }
.mo-l-ton { color: var(--mo-sig); }
.mo-l-im { color: var(--mo-im); }
.mo-l-rausch { color: var(--mo-rausch); }

/* Felder */
.mo-felder { display: grid; gap: 0.55rem 0.7rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 10rem), 1fr)); }
.mo-felder:empty { display: none; }
.mo-felder + .mo-felder { margin-top: 0.55rem; }
.mo-felder .field { margin: 0; min-width: 0; }
.mo-felder .field label { font-size: 0.7rem; }
.mo-felder .field input, .mo-felder .field select {
  width: 100%; min-width: 0; height: 1.95rem; padding-top: 0.1rem; padding-bottom: 0.1rem; font-size: 0.9rem; }
.mo-felder .field input[type="range"] { height: 1.2rem; padding: 0; margin-top: 0.2rem; accent-color: var(--accent); border: 0; background: none; }
.mo-felder .mo-breit { grid-column: 1 / -1; }
.mo-felder .field-hint, .mo-feldhilfe { display: block; font-size: 0.72rem; color: var(--muted); margin: 0.1rem 0 0; }
.mo-felder input.mo-falsch { border-color: var(--mo-schlecht); }
.mo-feld-seg { display: flex; flex-wrap: wrap; }
.mo-inhalt > .field-hint { margin: 0.45rem 0 0; }
.mo-inhalt > .field-hint:empty { display: none; }
.mo-warn { color: var(--mo-huelle); }
.mo-zf { display: flex; flex-wrap: wrap; gap: 0.3rem; margin-top: 0.5rem; }
.mo-zf .btn-sm.on, .mo-vorlagen .btn-sm.on { border-color: var(--accent); color: var(--accent); }

/* Plots */
.mo-plot { padding: 0.3rem 0.4rem 0; }
.mo-plot svg { width: 100%; height: auto; display: block; touch-action: pan-y; }
.mo-flaeche { fill: var(--bg2); }
.mo-netz { stroke: var(--mo-netz); stroke-width: 0.7; }
.mo-achse { fill: var(--muted); font-size: 10.5px; }
.mo-achse-titel { fill: var(--muted); font-size: 10.5px; font-style: italic; }
.mo-traeger { fill: none; stroke: var(--mo-sig); stroke-width: 1; opacity: 0.8; }
.mo-band { fill: var(--mo-sig); opacity: 0.45; }
.mo-huelle { fill: none; stroke: var(--mo-huelle); stroke-width: 2.2; stroke-linejoin: round; }
.mo-huelle-flaeche { fill: var(--mo-huelle); opacity: 0.22; }
.mo-nf { fill: none; stroke: var(--mo-nf); stroke-width: 1.4; stroke-dasharray: 4 3; }
.mo-spur { fill: none; stroke: var(--mo-sig); stroke-width: 1.6; stroke-linejoin: round; }
.mo-spur-flaeche { fill: var(--mo-sig); opacity: 0.12; }
.mo-b99 { fill: var(--mo-band99); }
.mo-bx { stroke: var(--mo-bandx); stroke-width: 1.4; stroke-dasharray: 5 3; }
.mo-bx-text { fill: var(--mo-bandx); font-size: 10.5px; font-weight: 600; }
.mo-b99-text { fill: var(--mo-sig); font-size: 10.5px; font-weight: 600; }
.mo-schwelle { stroke: var(--mo-bandx); stroke-width: 0.8; opacity: 0.6; }
.mo-zeiger-linie { stroke: var(--fg); stroke-width: 0.8; opacity: 0.5; pointer-events: none; }
.mo-zeiger { margin: 0.1rem 0.8rem 0.6rem; font-size: 0.85rem; font-variant-numeric: tabular-nums; min-height: 1.3em; }
.mo-linie-ton { stroke: var(--mo-sig); stroke-width: 3; }
.mo-linie-im { stroke: var(--mo-im); stroke-width: 3; }
.mo-linie-rest { stroke: var(--mo-rausch); stroke-width: 2; }
.mo-rauschflur { stroke: var(--mo-rausch); stroke-width: 1.4; stroke-dasharray: 6 4; }
.mo-rauschflaeche { fill: var(--mo-rausch); opacity: 0.12; }
.mo-gerade-ton { stroke: var(--mo-sig); stroke-width: 1.2; stroke-dasharray: 5 4; fill: none; }
.mo-gerade-im { stroke: var(--mo-im); stroke-width: 1.2; stroke-dasharray: 5 4; fill: none; }
.mo-kurve-ton { stroke: var(--mo-sig); stroke-width: 2.4; fill: none; stroke-linejoin: round; }
.mo-kurve-im { stroke: var(--mo-im); stroke-width: 2.4; fill: none; stroke-linejoin: round; }
.mo-ip { fill: var(--fg); }
.mo-jetzt { stroke: var(--accent); stroke-width: 1.4; }
.mo-sfdr { stroke: var(--mo-gut); stroke-width: 2; }
.mo-text-klein { fill: var(--fg); font-size: 10.5px; }
.mo-text-stark { fill: var(--fg); font-size: 11px; font-weight: 600; }
.mo-im-text { fill: var(--mo-im); font-size: 10.5px; font-weight: 600; }
.mo-gut-text { fill: var(--mo-gut); font-size: 10.5px; font-weight: 600; }
.mo-klickbar { cursor: crosshair; }

/* Superhet */
.mo-vs { fill: none; stroke: var(--accent); stroke-width: 2.2; stroke-linejoin: round; }
.mo-vs-flaeche { fill: var(--accent); opacity: 0.08; }
.mo-b-rund { fill: var(--mo-rund); }
.mo-b-afu, .mo-b-cb { fill: var(--mo-afu); }
.mo-b-flug { fill: var(--mo-flug); }
.mo-b-text { fill: var(--muted); font-size: 9.5px; }
.mo-stelle { stroke-width: 2.2; }
.mo-stelle-nutz { stroke: var(--mo-gut); fill: var(--mo-gut); }
.mo-stelle-spiegel { stroke: var(--mo-im); fill: var(--mo-im); }
.mo-stelle-rest { stroke: var(--mo-huelle); fill: var(--mo-huelle); }
.mo-stelle-text { font-size: 10.5px; font-weight: 600; }
.mo-blk { fill: var(--bg2); stroke: var(--border); stroke-width: 1.4; }
.mo-blk-vs { stroke: var(--accent); }
.mo-blk-lo { stroke: var(--mo-huelle); }
.mo-blk-zf { stroke: var(--mo-gut); }
.mo-blk-text { fill: var(--fg); font-size: 12px; font-weight: 600; }
.mo-blk-f { fill: var(--muted); font-size: 11px; font-variant-numeric: tabular-nums; }
.mo-pfeil { stroke: var(--muted); stroke-width: 1.4; fill: none; }
.mo-pfeil-spitze { fill: var(--muted); }

/* Tabelle */
.mo-tabelle-rolle { overflow-x: auto; }
table.mo-tabelle { width: 100%; border-collapse: collapse; font-size: 0.85rem; }
.mo-tabelle th, .mo-tabelle td { padding: 0.3rem 0.6rem; border-bottom: 1px solid var(--border); text-align: left; white-space: nowrap; }
.mo-tabelle th { font-size: 0.72rem; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: 0.05em; }
.mo-tabelle .zahl { text-align: right; font-variant-numeric: tabular-nums; }
.mo-tabelle tbody tr { cursor: pointer; }
.mo-tabelle tbody tr:hover, .mo-tabelle tbody tr.gewaehlt { background: var(--bg2); }
.mo-tabelle td.mo-wie { color: var(--muted); }

/* Werte */
dl.mo-werte { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0.25rem 0.8rem; margin: 0; font-size: 0.88rem; }
dl.mo-werte dt { color: var(--muted); }
dl.mo-werte dd { margin: 0; text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; }
.mo-gut { color: var(--mo-gut); }
.mo-schlecht { color: var(--mo-schlecht); }

/* Vorlagen */
.mo-vorlagen { display: flex; flex-wrap: wrap; gap: 0.35rem; }

/* Text */
.mo-formel { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.95rem; }

@media (max-width: 700px) {
  .mo-rahmen .btn-sm, .mo-seg button, select.mo-klein { min-height: 2.5rem; }
}

/* Kachel auf /simulatoren */
.si-mo-traeger { fill: none; stroke: var(--mo-sig); stroke-width: 1.2; }
.si-mo-huelle { fill: none; stroke: var(--mo-huelle); stroke-width: 2.2; }
.si-mo-spek { fill: none; stroke: var(--mo-sig); stroke-width: 2; stroke-linejoin: round; }
.si-mo-klick { fill: none; stroke: var(--mo-im); stroke-width: 1.6; stroke-dasharray: 3 3; }