/* Ausbreitung (AFU-372, /ausbreitung). Eigene ab-Klassen, Aufbau wie /filter, Farben aus den Variablen von style.css. */

:root {
  --ab-strahl: #fbbf24;
  --ab-durch: #8a93b3;
  --ab-wahl: #f8fafc;
  --ab-f2: 167, 139, 250;          /* als r, g, b für die Deckkraft je Höhe */
  --ab-e: 96, 165, 250;
  --ab-d: rgba(251, 191, 36, 0.20);
  --ab-d-text: #fbbf24;
  --ab-erde: #1f6f4a;
  --ab-erde-rand: #34d399;
  --ab-tot: #f87171;
  --ab-land: #34d399;
  --ab-sender: #ff6b6b;
  --ab-netz: rgba(138, 147, 179, 0.28);
  --ab-dia: #6aa6ff;
  --ab-dia-fl: rgba(106, 166, 255, 0.18);
  --ab-zurueck: rgba(52, 211, 153, 0.14);
}
@media (prefers-color-scheme: light) {
  :root {
    --ab-strahl: #c27c0e;
    --ab-durch: #7a839f;
    --ab-wahl: #111827;
    --ab-f2: 124, 92, 255;
    --ab-e: 47, 111, 237;
    --ab-d: rgba(194, 124, 14, 0.18);
    --ab-d-text: #b45309;
    --ab-erde: #a7d8bf;
    --ab-erde-rand: #047857;
    --ab-tot: #dc2626;
    --ab-land: #047857;
    --ab-sender: #dc2626;
    --ab-netz: rgba(70, 82, 110, 0.25);
    --ab-dia: #2f6fed;
    --ab-dia-fl: rgba(47, 111, 237, 0.14);
    --ab-zurueck: rgba(5, 150, 105, 0.12);
  }
}

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

/* Bühne: links Strahlengang und Antenne; rechts Sender, Ionosphäre, Ergebnis, Vorlagen. */
.ab-buehne {
  display: grid; gap: 0.7rem;
  grid-template-columns: minmax(0, 2.2fr) minmax(19rem, 1fr);
  align-items: start;
}
.ab-links, .ab-rechts { display: grid; gap: 0.7rem; min-width: 0; align-items: start; }
@media (max-width: 1000px) {
  .ab-buehne { grid-template-columns: minmax(0, 1fr); }
}
/* AFU-362: ab 1800 px eine Spalte mehr: rechts zwei Spalten (Sender/Ionosphäre | Ergebnis/Vorlagen) */
@media (min-width: 1800px) {
  :root:not([data-breite="begrenzt"]) .ab-buehne { grid-template-columns: minmax(0, 2.3fr) minmax(0, 1.4fr); }
  :root:not([data-breite="begrenzt"]) .ab-rechts { display: block; columns: 2; column-gap: 0.7rem; }
  :root:not([data-breite="begrenzt"]) .ab-rechts > .ab-kasten { break-inside: avoid; margin-bottom: 0.7rem; }
}

/* Kästen */
.ab-kasten {
  border: 1px solid var(--border); border-radius: var(--radius);
  background: var(--card-bg); min-width: 0; overflow: hidden;
}
.ab-kopf {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.3rem 0.8rem;
  min-height: 2rem; padding: 0.15rem 0.7rem;
  border-bottom: 1px solid var(--border);
}
.ab-titel { font-size: 0.76rem; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; color: var(--muted); }
.ab-luft { flex: 1 1 auto; }
.ab-haken { display: inline-flex; align-items: center; gap: 0.3rem; font-size: 0.82rem; cursor: pointer; white-space: nowrap; }
.ab-haken input { accent-color: var(--accent); margin: 0; }
.ab-haken-zeile { margin-top: 0.55rem; }
.ab-inhalt { padding: 0.55rem 0.7rem; }
.ab-seg button { padding: 0.1rem 0.55rem; font-size: 0.8rem; min-height: 1.75rem; white-space: nowrap; }
#ab-buehne .btn-sm { min-height: 1.75rem; padding: 0.1rem 0.6rem; font-size: 0.8rem; }
select.ab-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; }

/* Strahlengang */
.ab-plot { padding: 0.3rem 0.4rem 0; }
#ab-svg { width: 100%; height: auto; display: block; touch-action: manipulation; user-select: none; -webkit-user-select: none; cursor: crosshair; }
#ab-svg:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; border-radius: 6px; }
.ab-himmel { fill: var(--bg2); }
.ab-schicht-text { font-size: 10.5px; font-weight: 600; }
.ab-f2-text { fill: rgb(var(--ab-f2)); }
.ab-e-text { fill: rgb(var(--ab-e)); }
.ab-d { fill: var(--ab-d); }
.ab-d-text { fill: var(--ab-d-text); font-size: 10px; font-weight: 600; }
.ab-erde { fill: var(--ab-erde); stroke: var(--ab-erde-rand); stroke-width: 1.4; }
.ab-netz { stroke: var(--ab-netz); stroke-width: 0.6; fill: none; }
.ab-achse { fill: var(--muted); font-size: 10px; }
.ab-s { fill: none; stroke: var(--ab-strahl); stroke-width: 1.3; stroke-linejoin: round; stroke-linecap: round; }
.ab-s-durch { fill: none; stroke: var(--ab-durch); stroke-width: 1; stroke-dasharray: 4 3; }
.ab-s-wahl { fill: none; stroke: var(--ab-wahl); stroke-width: 2.6; stroke-linejoin: round; stroke-linecap: round; }
.ab-s-wahl.ab-s-durch { stroke-dasharray: 6 4; stroke-width: 2; }
.ab-s-griff { fill: none; stroke: transparent; stroke-width: 9; cursor: pointer; }
.ab-tot { stroke: var(--ab-tot); stroke-width: 5; stroke-linecap: butt; }
.ab-tot-text { fill: var(--ab-tot); font-size: 10.5px; font-weight: 700; }
.ab-land { fill: var(--ab-land); stroke: var(--bg2); stroke-width: 1.5; }
.ab-land-text { fill: var(--ab-land); font-size: 10.5px; font-weight: 700; }
.ab-land-db { fill: var(--muted); font-size: 10px; font-variant-numeric: tabular-nums; }
.ab-ziel { stroke: var(--fg); stroke-width: 1.2; }
.ab-ziel-text { fill: var(--fg); font-size: 10px; }
.ab-sender { fill: var(--ab-sender); }
.ab-sender-text { fill: var(--ab-sender); font-size: 11px; font-weight: 700; }
.ab-durch-text { fill: var(--ab-durch); font-size: 10px; font-style: italic; }
.ab-maus { stroke: var(--muted); stroke-width: 0.8; pointer-events: none; }
.ab-zeiger, .ab-tasten { margin: 0.1rem 0.8rem 0.5rem; font-size: 0.82rem; color: var(--muted); }
.ab-hinweis { margin: 0.1rem 0.8rem 0.5rem; padding: 0.35rem 0.6rem; font-size: 0.85rem; border-left: 3px solid rgb(var(--ab-e)); background: var(--bg2); display: flex; flex-wrap: wrap; gap: 0.3rem 0.7rem; align-items: center; }
.ab-hinweis[hidden] { display: none; }
.ab-hinweis span { flex: 1 1 22rem; }
.ab-zeiger { color: var(--fg); min-height: 1.3em; font-variant-numeric: tabular-nums; }

/* Antenne */
.ab-antenne { display: grid; grid-template-columns: minmax(13rem, 1fr) minmax(0, 2fr); gap: 0.4rem 0.9rem; padding: 0.55rem 0.7rem; align-items: start; }
@media (max-width: 700px) { .ab-antenne { grid-template-columns: minmax(0, 1fr); } }
.ab-felder-ant { grid-template-columns: minmax(0, 1fr); }
.ab-dia svg { width: 100%; max-width: 34rem; height: auto; display: block; }
.ab-dia-text { margin: 0.2rem 0 0; font-size: 0.85rem; color: var(--muted); }
.ab-dia-netz { fill: none; stroke: var(--ab-netz); stroke-width: 0.8; }
.ab-dia-zurueck { fill: var(--ab-zurueck); }
.ab-dia-kurve { fill: var(--ab-dia-fl); stroke: var(--ab-dia); stroke-width: 2; stroke-linejoin: round; }
.ab-dia-w { stroke: var(--ab-strahl); stroke-width: 2; }
.ab-dia-boden { stroke: var(--ab-erde-rand); stroke-width: 2; }
.ab-dia-achse { fill: var(--muted); font-size: 10px; }

/* Felder */
.ab-felder { display: grid; gap: 0.55rem 0.7rem; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ab-felder .field { margin: 0; min-width: 0; }
.ab-felder .field[hidden] { display: none; }
.ab-felder .field label, .ab-winkel-feld label, .ab-muf .field label { font-size: 0.7rem; }
.ab-felder .field input, .ab-felder .field select, .ab-muf .field input {
  width: 100%; min-width: 0; height: 1.95rem; padding-top: 0.1rem; padding-bottom: 0.1rem; font-size: 0.9rem; }
.ab-winkel-feld { margin: 0.55rem 0 0; }
.ab-winkel-feld input[type="range"] { width: 100%; accent-color: var(--ab-strahl); }
.ab-jetzt { margin-top: 0.6rem; padding-top: 0.55rem; border-top: 1px solid var(--border); }
.ab-jetzt .field-hint { margin: 0.35rem 0 0; }

/* Ergebnis */
.ab-muf { display: grid; grid-template-columns: 7rem minmax(0, 1fr); gap: 0.7rem; align-items: end; margin-bottom: 0.6rem; }
.ab-muf .field { margin: 0; }
.ab-muf-wert { font-size: 1.5rem; font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1.2; }
.ab-muf-wert small { display: block; font-size: 0.78rem; font-weight: 400; color: var(--muted); }
dl.ab-werte { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0.25rem 0.8rem; margin: 0; font-size: 0.88rem; }
dl.ab-werte dt { color: var(--muted); }
dl.ab-werte dd { margin: 0; text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; }
dl.ab-werte dd.ab-gut { color: var(--ab-land); }
dl.ab-werte dd.ab-schlecht { color: var(--ab-tot); }

/* Vorlagen */
.ab-vorlagen { display: flex; flex-wrap: wrap; gap: 0.35rem; }
.ab-vorlagen .btn-sm.on { border-color: var(--accent); color: var(--accent); }
#ab-link-stand:empty, #ab-vorlage-text:empty { display: none; }
.ab-inhalt > .field-hint { margin: 0.45rem 0 0; }

@media (max-width: 700px) {
  #ab-buehne .btn-sm, .ab-seg button { min-height: 2.5rem; }
}

/* Kachel auf /simulatoren */
.si-ion { fill: none; stroke: rgb(var(--ab-f2)); stroke-width: 6; opacity: 0.35; }
.si-strahl { fill: none; stroke: var(--ab-strahl); stroke-width: 2; stroke-linecap: round; }
.si-erde { fill: none; stroke: var(--ab-erde-rand); stroke-width: 1.6; }