/* LC-Filter (AFU-370, /filter). Eigene fi-Klassen, Aufbau wie /smith, Farben aus den Variablen von style.css. */

:root {
  --fi-s21: #6aa6ff;
  --fi-swr: #f5b942;
  --fi-norm: #a78bfa;
  --fi-streu: rgba(106, 166, 255, 0.18);
  --fi-fc: #fbbf24;
  --fi-ober: #f472b6;
  --fi-band: rgba(52, 211, 153, 0.16);
  --fi-band-text: #34d399;
  --fi-netz: rgba(138, 147, 179, 0.28);
  --fi-f: #e5e7eb;
  --fi-ok: #34d399;
  --fi-warm: #fbbf24;
  --fi-viel: #f87171;
}
@media (prefers-color-scheme: light) {
  :root {
    --fi-s21: #2f6fed;
    --fi-swr: #c27c0e;
    --fi-norm: #7c5cff;
    --fi-streu: rgba(47, 111, 237, 0.16);
    --fi-fc: #b7791f;
    --fi-ober: #db2777;
    --fi-band: rgba(5, 150, 105, 0.13);
    --fi-band-text: #047857;
    --fi-netz: rgba(70, 82, 110, 0.25);
    --fi-f: #1a2235;
    --fi-ok: #047857;
    --fi-warm: #b45309;
    --fi-viel: #dc2626;
  }
}

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

/* Bühne: links Kurve, Schaltung, Bauteile; rechts Entwurf, Werte, Vorlagen. */
.fi-buehne {
  display: grid; gap: 0.7rem;
  grid-template-columns: minmax(0, 2.2fr) minmax(19rem, 1fr);
  align-items: start;
}
.fi-links, .fi-rechts { display: grid; gap: 0.7rem; min-width: 0; }
@media (max-width: 1000px) {
  .fi-buehne { grid-template-columns: minmax(0, 1fr); }
}
/* AFU-362: ab 1800 px eine Spalte mehr: Kurve | Schaltung nebeneinander, Bauteile über beide, rechts Entwurf, Werte, Vorlagen */
@media (min-width: 1800px) {
  :root:not([data-breite="begrenzt"]) .fi-buehne { grid-template-columns: minmax(0, 2.6fr) minmax(19rem, 1fr); }
  :root:not([data-breite="begrenzt"]) .fi-links {
    grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
    grid-template-areas: "kurve schalt" "teile teile";
    align-items: start;
  }
  :root:not([data-breite="begrenzt"]) .fi-kurve-kasten { grid-area: kurve; }
  :root:not([data-breite="begrenzt"]) .fi-schalt-kasten { grid-area: schalt; }
  :root:not([data-breite="begrenzt"]) .fi-teile-kasten { grid-area: teile; }
}

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

/* Kurve */
.fi-plot { padding: 0.3rem 0.4rem 0; }
#fi-svg { width: 100%; height: auto; display: block; touch-action: none; user-select: none; -webkit-user-select: none; cursor: crosshair; }
#fi-svg.fi-zieht { cursor: ew-resize; }
.fi-grund { fill: var(--bg2); }
.fi-netz { stroke: var(--fi-netz); stroke-width: 0.6; }
.fi-achse { fill: var(--muted); font-size: 10px; font-family: inherit; }
.fi-achse-r { fill: var(--fi-swr); }
.fi-band { fill: var(--fi-band); }
.fi-band-text { fill: var(--fi-band-text); font-size: 9px; }
.fi-k-s21 { fill: none; stroke: var(--fi-s21); stroke-width: 2; stroke-linejoin: round; }
.fi-k-norm { fill: none; stroke: var(--fi-norm); stroke-width: 1.4; stroke-dasharray: 5 3; }
.fi-k-swr { fill: none; stroke: var(--fi-swr); stroke-width: 1.6; stroke-linejoin: round; }
.fi-k-streu { fill: var(--fi-streu); stroke: none; }
.fi-fc-linie { stroke: var(--fi-fc); stroke-width: 2; }
.fi-fc-griff { fill: transparent; cursor: ew-resize; }
.fi-fc-text { fill: var(--fi-fc); font-size: 10px; font-weight: 700; }
.fi-f-linie { stroke: var(--fi-f); stroke-width: 1; stroke-dasharray: 3 3; opacity: 0.7; }
.fi-ober-linie { stroke: var(--fi-ober); stroke-width: 1; stroke-dasharray: 2 2; }
.fi-ober-punkt { fill: var(--fi-ober); }
.fi-ober-text { fill: var(--fi-ober); font-size: 9.5px; font-weight: 600; }
.fi-maus { stroke: var(--muted); stroke-width: 0.8; pointer-events: none; }
.fi-zeiger, .fi-tasten { margin: 0.1rem 0.8rem 0.5rem; font-size: 0.82rem; color: var(--muted); }
.fi-zeiger { color: var(--fg); min-height: 1.3em; font-variant-numeric: tabular-nums; }

/* Schaltbild */
.fi-schalt { padding: 0.3rem 0.5rem 0.4rem; overflow-x: auto; }
#fi-schalt-svg { width: 100%; min-width: 30rem; height: auto; display: block; }
.fi-draht { stroke: var(--fg); stroke-width: 1.6; fill: none; stroke-linecap: round; }
.fi-masse { stroke: var(--muted); stroke-width: 1.6; }
.fi-tor { fill: var(--bg2); stroke: var(--muted); stroke-width: 1.2; }
.fi-tor-text { fill: var(--muted); font-size: 10px; }
.fi-teil { cursor: pointer; }
.fi-teil .fi-sym { stroke: var(--fg); stroke-width: 2; fill: none; stroke-linecap: round; }
.fi-teil .fi-flaeche { fill: transparent; }
.fi-teil text { fill: var(--fg); font-size: 11px; font-weight: 700; }
.fi-teil .fi-wert { fill: var(--muted); font-size: 9.5px; font-weight: 400; }
.fi-teil:hover .fi-sym, .fi-teil:focus .fi-sym { stroke: var(--accent); }
.fi-teil:focus { outline: none; }
.fi-teil.fi-gewaehlt .fi-sym { stroke: var(--accent); stroke-width: 3; }
.fi-teil.fi-gewaehlt text { fill: var(--accent); }

/* Bauteile */
table.fi-tabelle { font-size: 0.86rem; }
table.fi-tabelle th, table.fi-tabelle td { padding: 0.22rem 0.45rem; vertical-align: middle; }
table.fi-tabelle thead th { position: static; }
table.fi-tabelle tbody tr { cursor: pointer; }
table.fi-tabelle tbody tr.fi-gewaehlt { background: var(--card-hover); box-shadow: inset 3px 0 0 var(--accent); }
table.fi-tabelle td:first-child { font-weight: 700; white-space: nowrap; }
table.fi-tabelle input.fi-wert-ein {
  width: 7.5rem; height: 1.7rem; padding: 0 0.35rem; text-align: right; font: inherit; font-variant-numeric: tabular-nums;
  background: var(--bg2); color: var(--fg); border: 1px solid var(--border); border-radius: 6px;
}
table.fi-tabelle input.fi-wert-ein.fi-eigen { border-color: var(--fi-norm); }
table.fi-tabelle input.fi-wert-ein:focus { outline: 2px solid var(--accent); outline-offset: 0; }
.fi-aufbau { font-size: 0.82rem; color: var(--muted); }
.fi-stufe { display: inline-flex; align-items: center; gap: 0.3rem; white-space: nowrap; font-weight: 600; }
.fi-stufe::before { content: ""; width: 0.6rem; height: 0.6rem; border-radius: 50%; background: currentColor; }
.fi-stufe-ok { color: var(--fi-ok); }
.fi-stufe-warm { color: var(--fi-warm); }
.fi-stufe-viel { color: var(--fi-viel); }
.fi-inhalt > .field-hint { margin: 0.45rem 0 0; }

/* Entwurf */
.fi-felder { display: grid; gap: 0.55rem 0.7rem; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.fi-felder + .fi-felder { margin-top: 0.55rem; padding-top: 0.55rem; border-top: 1px solid var(--border); }
.fi-felder .field { margin: 0; min-width: 0; }
.fi-felder .field[hidden] { display: none; }
.fi-felder .field label { font-size: 0.7rem; }
.fi-felder .field input, .fi-felder .field select { width: 100%; min-width: 0; height: 1.95rem; padding-top: 0.1rem; padding-bottom: 0.1rem; font-size: 0.9rem; }
.fi-felder .field select:disabled, .fi-felder .field input:disabled { opacity: 0.55; }

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

/* Vorlagen */
.fi-vorlagen { display: flex; flex-wrap: wrap; gap: 0.35rem; }
.fi-vorlagen .btn-sm.on { border-color: var(--accent); color: var(--accent); }
#fi-link-stand:empty { display: none; }

/* Beispiele */
.fi-beispiele { display: grid; gap: 0.8rem; grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr)); }
.fi-beispiel {
  display: grid; gap: 0.3rem; text-align: left; padding: 0.8rem 0.9rem; cursor: pointer; font: inherit; color: var(--fg);
  border: 1px solid var(--border); border-radius: var(--radius); background: var(--card-bg);
}
.fi-beispiel:hover, .fi-beispiel:focus-visible { border-color: var(--accent); background: var(--card-hover); }
.fi-beispiel strong { font-size: 1rem; }
.fi-beispiel span { color: var(--muted); font-size: 0.88rem; }

@media (max-width: 700px) {
  .fi-felder { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  #fi-buehne .btn-sm, .fi-seg button { min-height: 2.5rem; }
}

/* Übersicht /simulatoren */
.si-kacheln { grid-template-columns: repeat(auto-fill, minmax(min(100%, 20rem), 1fr)); }
.si-kachel h2 { margin: 0; font-size: 1.22rem; }
.si-bild { width: 100%; height: auto; max-height: 9rem; margin: -0.4rem 0 0.8rem; border-radius: 10px; background: var(--bg2); }
.si-netz { fill: none; stroke: var(--fi-netz); stroke-width: 1; }
.si-linie { fill: none; stroke: var(--muted); stroke-width: 1.2; }
.si-weg { fill: none; stroke: var(--fi-s21); stroke-width: 2.4; stroke-linecap: round; }
.si-punkt { fill: #ff6b6b; }
.si-mitte { fill: var(--fg); }
.si-band { fill: var(--fi-band); }
.si-fc { stroke: var(--fi-fc); stroke-width: 2; }
.si-ober { stroke: var(--fi-ober); stroke-width: 1; stroke-dasharray: 2 2; }
.si-punkt-ober { fill: var(--fi-ober); }
.si-text { fill: var(--fi-ober); font-size: 10px; font-weight: 600; }

.fi-kopf .seg button, .fi-kopf .seg .k { white-space: nowrap; }