/* AFU-378: Rechner (/rechner, /rechner/<name>). Eigene Klassen mit `re-`, die gemeinsamen `.calc`, `.out`
   aus style.css bleiben, wie sie sind (vna, oberwellen und andere nutzen sie mit). Farben nur aus den
   Variablen der Seite, damit hell und dunkel stimmen. */

/* ------------------------------------------------------------ Kartenkopf */
.re-karte .calc-kopf {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 0.7rem;
  margin: 0 0 0.45rem;
}
.re-karte .calc-kopf h2, .re-karte .calc-kopf h3 { margin: 0; }
.re-sym {
  display: inline-grid; place-items: center; width: 2.1rem; height: 2.1rem; border-radius: 10px;
  background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 28%, transparent), color-mix(in srgb, var(--accent2) 22%, transparent));
  color: var(--accent); font-size: 1.1rem; font-weight: 700; line-height: 1;
  border: 1px solid color-mix(in srgb, var(--accent) 35%, var(--border));
}
.re-knoepfe { display: flex; gap: 0.3rem; }
.re-zk {
  display: inline-grid; place-items: center;
  width: 1.9rem; height: 1.9rem; padding: 0;
  border: 1px solid var(--border); border-radius: 50%;
  background: none; color: var(--muted); cursor: pointer;
  font: inherit; font-size: 0.9rem; line-height: 1;
}
.re-zk svg { width: 1rem; height: 1rem; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.re-zk:hover, .re-zk:focus-visible { color: var(--fg); border-color: var(--accent); background: var(--card-hover); }
.re-zk.re-ok { color: var(--accent); border-color: var(--accent); }

/* ----------------------------------------------------------- Eingaben
   Felder einer Reihe auf einer Linie: Beschriftung, Feld und Platz darunter als subgrid, damit eine
   zweizeilige Beschriftung das Feld daneben nicht verschiebt. */
.re-karte .inputs { grid-auto-rows: auto auto; row-gap: 0.25rem; column-gap: 0.9rem; }
.re-karte .inputs .field {
  display: grid; grid-row: span 2; grid-template-rows: subgrid; align-content: end; margin: 0 0 0.45rem;
}
.re-karte .inputs .field label { align-self: end; }
.re-karte .inputs .field[hidden] { display: none; }
/* Das Feld, aus dem gerechnet wird (SWR, dBm, Schwingkreis, Luftspule). */
.re-karte .field.quelle input {
  border-color: var(--accent);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 45%, transparent);
}
.re-karte .field.gerechnet input { color: var(--accent); font-weight: 600; }
.re-karte .field.quelle label::after { content: " ●"; color: var(--accent); font-size: 0.7em; vertical-align: 0.15em; }
.re-zwischen { margin: 1rem 0 0.5rem; }
.re-knopfzeile { margin: 0.8rem 0 0; }

/* ------------------------------------------------------------- Ergebnis */
.calc .out.re-erg {
  white-space: normal; font-family: inherit; line-height: 1.45;
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 15rem); gap: 0.9rem 1.1rem; align-items: start;
  padding: 0.9rem 1rem;
}
.re-erg.re-ohne-bild { grid-template-columns: minmax(0, 1fr); }
.re-werte { display: grid; gap: 0.6rem; align-content: start; min-width: 0; }
.re-haupt { display: grid; gap: 0.1rem; }
.re-haupt-name { color: var(--muted); font-size: 0.82rem; }
.re-haupt-wert {
  color: var(--accent); font-weight: 700; font-size: clamp(1.45rem, 2.4vw, 1.95rem); line-height: 1.15;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; overflow-wrap: anywhere;
}
.re-haupt-neben { color: var(--muted); font-size: 0.85rem; }
.re-kz { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(8.5rem, 100%), 1fr)); gap: 0.4rem; }
.re-kz > div {
  border: 1px solid color-mix(in srgb, var(--border) 80%, transparent); border-radius: 9px;
  padding: 0.35rem 0.55rem; background: color-mix(in srgb, var(--bg) 40%, transparent); min-width: 0;
}
.re-kz dt { color: var(--muted); font-size: 0.75rem; line-height: 1.3; }
.re-kz dd {
  margin: 0.1rem 0 0; font-weight: 600; font-size: 0.92rem; overflow-wrap: anywhere;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
.re-text { margin: 0; color: var(--muted); font-size: 0.86rem; line-height: 1.5; }
.re-text a { color: var(--accent); }
.re-warn { color: var(--fg); border-left: 3px solid #e0a43a; padding-left: 0.55rem; }
.re-ruhe { color: var(--muted); font-style: italic; }
.re-bildplatz { min-width: 0; }
.re-bild { display: block; width: 100%; height: auto; max-height: 11rem; overflow: visible; }

/* Mehrere Ergebnisse in einer Karte (Farbcode und SMD): beide brauchen ihre Lücke. */
.re-karte > .out.re-erg { margin-top: 1rem; }
.re-karte > .re-zwischen + .inputs + .out.re-erg { margin-top: 0.8rem; }

/* Schmale Karte (drei nebeneinander, Handy): Werte über der Grafik statt einer engen Spalte daneben. */
.re-karte { container: re-karte / inline-size; }
@container re-karte (max-width: 32rem) {
  .calc .out.re-erg { grid-template-columns: minmax(0, 1fr); }
  .re-bild { max-width: 17rem; margin-inline: auto; }
}

/* -------------------------------------------------------- Grafiken (SVG) */
.re-bild text { font: 600 10.5px system-ui, sans-serif; fill: var(--fg); }
.re-bild .re-klein { font-size: 9.5px; font-weight: 500; fill: var(--muted); }
.re-bild .re-fett { font-weight: 700; fill: var(--fg); }
.re-bild .re-gross { font-size: 13px; }
.re-bild .re-akzent { fill: var(--accent); }
.re-bild .re-akzent2 { fill: var(--accent2); }
.re-bild .re-rot { fill: #e05555; }
.re-rahmen { fill: none; stroke: var(--border); stroke-width: 1.5; }
.re-netz { stroke: color-mix(in srgb, var(--border) 70%, transparent); stroke-width: 0.6; }
.re-netz-stark { stroke: var(--muted); stroke-width: 1; opacity: 0.7; }
.re-schlecht-strich { stroke: #e05555; stroke-width: 1.2; }
.re-hilf { stroke: var(--accent); stroke-width: 0.8; stroke-dasharray: 2 2; opacity: 0.8; }
.re-feld { opacity: 0.85; }
.re-f { fill: var(--accent); }
.re-f2 { fill: var(--accent2); }
.re-punkt { fill: var(--accent); stroke: var(--bg2); stroke-width: 1.5; }
.re-zeiger { stroke: var(--accent); stroke-width: 2.4; stroke-linecap: round; }
.re-zeiger2 { stroke: var(--accent2); stroke-width: 1.8; stroke-dasharray: 4 3; stroke-linecap: round; }
.re-mass { stroke: var(--muted); stroke-width: 1; }
.re-mass-f { fill: var(--muted); }
.re-draht { fill: none; stroke: var(--fg); stroke-width: 2.4; stroke-linecap: round; }
.re-kabel { stroke: var(--muted); stroke-width: 3; stroke-linecap: round; }
.re-spur { fill: color-mix(in srgb, var(--border) 55%, transparent); }
.re-balken.re-a { fill: var(--accent); }
.re-balken.re-a2 { fill: var(--accent2); }
.re-balken.re-gut { fill: #2fae5f; }
.re-balken.re-mittel { fill: #e0a43a; }
.re-balken.re-schlecht { fill: #e05555; }
.re-marke { stroke: var(--fg); stroke-width: 1.4; stroke-dasharray: 3 2; }
.re-skala { fill: none; stroke-width: 12; }
.re-skala-duenn { fill: none; stroke: var(--muted); stroke-width: 2; }
.re-skala-gut { stroke: #2fae5f; }
.re-skala-mittel { stroke: #e0a43a; }
.re-skala-schlecht, .re-skala-duenn.re-skala-schlecht { stroke: #e05555; }
.re-nadel { stroke: var(--fg); stroke-width: 2.4; stroke-linecap: round; }
.re-nabe { fill: var(--fg); }
.re-zone { fill: color-mix(in srgb, #e05555 18%, transparent); stroke: #e05555; stroke-width: 1.4; }
.re-fern { fill: none; stroke: var(--accent); stroke-width: 1; stroke-dasharray: 4 3; }
.re-spule { fill: none; stroke: var(--accent); stroke-width: 2.4; }
.re-platte { stroke: var(--accent2); stroke-width: 3; }
.re-koerper { fill: color-mix(in srgb, var(--muted) 18%, transparent); stroke: var(--border); }
.re-wdg { stroke: #c87533; stroke-width: 2.2; stroke-linecap: round; }
.re-bein { stroke: var(--muted); stroke-width: 3; }
.re-widerstand { fill: #d8c29a; stroke: #a08a62; stroke-width: 1; }
.re-ring { stroke: rgba(0, 0, 0, 0.25); stroke-width: 0.6; }

/* ----------------------------------------------------- Übersicht: Kacheln */
.re-gruppe-titel { margin: 1.6rem 0 0.6rem; font-size: 1rem; color: var(--muted); font-weight: 600; letter-spacing: 0.02em; }
.re-gruppe-titel:first-child { margin-top: 0.4rem; }
.re-kacheln { display: grid; gap: 0.9rem; grid-template-columns: repeat(auto-fill, minmax(min(15rem, 100%), 1fr)); }
.re-kachel {
  display: grid; grid-template-rows: auto auto 1fr; gap: 0.35rem;
  border: 1px solid var(--border); border-radius: var(--radius); background: var(--card-bg);
  padding: 0.9rem 1rem 1rem; color: var(--fg); text-decoration: none;
  transition: border-color 0.15s, background 0.15s;
}
.re-kachel:hover, .re-kachel:focus-visible { border-color: var(--accent); background: var(--card-hover); }
.re-kachel svg { width: 100%; height: 70px; display: block; }
.re-kachel b { font-size: 1rem; }
.re-kachel span { color: var(--muted); font-size: 0.86rem; line-height: 1.4; }
.re-kachel .re-k-l { fill: none; stroke: var(--accent); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.re-kachel .re-k-l2 { fill: none; stroke: var(--accent2); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.re-kachel .re-k-n { fill: none; stroke: var(--border); stroke-width: 1.2; }
.re-kachel .re-k-p { fill: var(--accent); }
.re-kachel .re-k-t { font: 700 13px system-ui, sans-serif; fill: var(--accent); }
.re-kachel .re-k-m { font: 500 10px system-ui, sans-serif; fill: var(--muted); }
.re-kachel.re-mehr { grid-template-rows: auto 1fr; }

/* ------------------------------------------- Unterseite: Karte und Rechenweg */
.re-reihe { display: grid; gap: 1.1rem; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); align-items: start; }
.re-reihe > .calc { height: auto; }
@media (max-width: 62rem) { .re-reihe { grid-template-columns: minmax(0, 1fr); } }
.re-rechenweg .formeln { margin: 0.5rem 0 0; }

@media print {
  .re-knoepfe, .re-knopfzeile { display: none; }
}