/* Antennenrechner – Gestaltung „Messplatz“
   Gehäusegrau und Frontplatte wie bei Mess- und Funkgeräten, rechteckige Tasten,
   ein dunkles Anzeigefeld mit Leuchtspur. Schrift: B612 (für Cockpit-Anzeigen entwickelt). */

@font-face { font-family: "B612"; src: url("/static/fonts/B612-Regular.woff") format("woff"); font-weight: 400; font-display: swap; }
@font-face { font-family: "B612"; src: url("/static/fonts/B612-Bold.woff") format("woff"); font-weight: 700; font-display: swap; }
@font-face { font-family: "B612 Mono"; src: url("/static/fonts/B612Mono-Regular.woff") format("woff"); font-weight: 400; font-display: swap; }
@font-face { font-family: "B612 Mono"; src: url("/static/fonts/B612Mono-Bold.woff") format("woff"); font-weight: 700; font-display: swap; }

:root {
  /* Gehäuse und Frontplatte */
  --case: #cfd2cc;          /* Gehäusegrau, Seitenhintergrund */
  --plate: #e6e8e3;         /* Frontplatte, Bedienfeld */
  --plate-hi: #f3f4f0;      /* Eingabefelder, Tastenlicht */
  --engrave: #a9ada6;       /* gravierte Linien */
  --engrave-hi: #f7f8f5;    /* Lichtkante der Gravur */
  --ink: #23292c;           /* Beschriftung */
  --ink-soft: #545c60;
  --ink-faint: #7b8387;
  /* Tasten */
  --key-top: #f1f2ee;
  --key-bot: #d8dbd5;
  --key-edge: #8d928b;
  --key-blue: #2e5a84;      /* Funktionstaste */
  --key-blue-dk: #224567;
  --led: #3fbf5f;           /* Leuchtpunkt aktiv */
  /* Anzeige */
  --scr: #18211f;
  --scr-2: #1f2a27;
  --scr-grid: #34443f;
  --scr-text: #b9cbc3;
  --scr-dim: #7d918a;
  --trace: #8fe0a0;         /* Phosphorspur */
  --trace-2: #e3b55c;       /* zweite Spur, Bernstein */
  --trace-3: #7fb2e5;
  --warn: #c98a1e;
  --bad: #b8402f;
  --good: #2f8a4b;
  --mono: "B612 Mono", "DejaVu Sans Mono", monospace;
  --sans: "B612", "DejaVu Sans", sans-serif;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --case: #1d2123; --plate: #2a2f32; --plate-hi: #343a3d; --engrave: #171a1c; --engrave-hi: #3b4246;
    --ink: #dfe3df; --ink-soft: #aab2b0; --ink-faint: #848d8c;
    --key-top: #3a4044; --key-bot: #2c3134; --key-edge: #121516; --key-blue: #3d6d9b; --key-blue-dk: #2b5276;
    --scr: #111816; --scr-2: #172019; --good: #4fb56a; color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --case: #1d2123; --plate: #2a2f32; --plate-hi: #343a3d; --engrave: #171a1c; --engrave-hi: #3b4246;
  --ink: #dfe3df; --ink-soft: #aab2b0; --ink-faint: #848d8c;
  --key-top: #3a4044; --key-bot: #2c3134; --key-edge: #121516; --key-blue: #3d6d9b; --key-blue-dk: #2b5276;
  --scr: #111816; --scr-2: #172019; --good: #4fb56a; color-scheme: dark;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
.i18n-wait body { visibility: hidden; }
html, body { margin: 0; }
body { background: var(--case); color: var(--ink); font: 14px/1.5 var(--sans); }
button, input, select { font: inherit; color: inherit; }
a { color: var(--key-blue); }
:focus-visible { outline: 2px solid var(--key-blue); outline-offset: 2px; }

/* ------------------------------------------------------------------ Tasten */
button, .key {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-height: 32px; padding: 4px 12px; cursor: pointer; text-decoration: none; color: var(--ink);
  background: linear-gradient(var(--key-top), var(--key-bot));
  border: 1px solid var(--key-edge); border-radius: 3px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.55), 0 1px 0 var(--key-edge);
}
button:hover, .key:hover { background: linear-gradient(var(--plate-hi), var(--key-bot)); }
button:active, .key:active { transform: translateY(1px); box-shadow: inset 0 1px 2px rgba(0,0,0,.25); }
button:disabled { opacity: .55; cursor: progress; transform: none; }
button.primary {
  color: #fff; background: linear-gradient(var(--key-blue), var(--key-blue-dk)); border-color: var(--key-blue-dk);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.25), 0 1px 0 var(--key-blue-dk); font-weight: 700;
}
button.primary:hover { background: linear-gradient(#36689a, var(--key-blue-dk)); }
button.link { min-height: 0; padding: 0; border: 0; background: none; box-shadow: none; color: var(--key-blue); text-decoration: underline; font-weight: 700; }

/* ------------------------------------------------------------------ Kopf = Typenschild */
.top {
  display: flex; align-items: center; gap: 14px 18px; flex-wrap: wrap; padding: 10px 18px;
  background: var(--plate); border-bottom: 3px double var(--engrave); position: sticky; top: 0; z-index: 20;
}
.brand { display: grid; grid-template-columns: auto auto auto; grid-template-rows: auto auto; column-gap: 9px; align-items: center; text-decoration: none; color: var(--ink); }
.brand svg { grid-row: 1 / 3; width: 30px; height: 30px; fill: none; stroke: var(--ink); stroke-width: 2.2; stroke-linecap: square; }
.brand .name { font-weight: 700; font-size: 18px; letter-spacing: -.01em; line-height: 1.1; }
.stamp {
  justify-self: start; font-weight: 700; font-size: 11.5px; line-height: 1; padding: 3px 6px 2px; color: var(--bad);
  border: 1.5px solid var(--bad); border-radius: 2px; transform: rotate(-4deg);
}
.brand .sub { grid-column: 2 / 4; font-size: 12px; color: var(--ink-soft); line-height: 1.2; }
.ident { display: flex; gap: 8px; flex: 1 1 280px; max-width: 420px; }
.pname, .pcall, .inp {
  background: var(--plate-hi); border: 1px solid var(--engrave); border-radius: 2px;
  box-shadow: inset 0 1px 2px rgba(0,0,0,.12);
}
.pname, .pcall { padding: 5px 9px; min-width: 0; }
.pname { flex: 1 1 auto; }
.pcall { width: 120px; font-family: var(--mono); text-transform: uppercase; }
.actions { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; margin-left: auto; }
.actions .sep { width: 1px; height: 26px; background: var(--engrave); box-shadow: 1px 0 0 var(--engrave-hi); margin: 0 4px; }

/* ------------------------------------------------------------------ Aufteilung */
.layout { display: grid; grid-template-columns: 370px minmax(0, 1fr); align-items: start; }
.side {
  background: var(--plate); border-right: 1px solid var(--engrave); padding: 6px 18px 0;
  position: sticky; top: 64px; max-height: calc(100vh - 64px); overflow-y: auto;
}
.main { padding: 16px 18px 48px; display: flex; flex-direction: column; gap: 16px; min-width: 0; }

/* ------------------------------------------------------------------ Bedienfeld */
.grp { padding: 14px 0 16px; border-bottom: 1px solid var(--engrave); box-shadow: 0 1px 0 var(--engrave-hi); }
.grp h3 { margin: 0 0 8px; font-size: 15px; font-weight: 700; }
.desc { font-size: 12.5px; color: var(--ink-soft); margin: 8px 0 0; }
.field { display: grid; grid-template-columns: 1fr 158px; align-items: center; gap: 3px 10px; margin: 7px 0; }
.field > label { font-size: 13.5px; }
.field .help { grid-column: 1 / -1; font-size: 12px; color: var(--ink-faint); }
.field.wide { grid-template-columns: 1fr; }
.inp { display: flex; align-items: stretch; overflow: hidden; }
.inp:focus-within { border-color: var(--key-blue); }
.inp input, .inp select { border: 0; background: transparent; padding: 4px 7px; width: 100%; min-width: 0; outline: none; }
.inp input[type=number] { font-variant-numeric: tabular-nums; text-align: right; }
.inp .unit { padding: 4px 7px 4px 0; color: var(--ink-faint); font-size: 12px; white-space: nowrap; align-self: center; }
.row3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-top: 4px; }
.row3 .mini label { display: block; font-size: 12px; color: var(--ink-soft); margin-bottom: 2px; }

/* Bandtasten mit Leuchtpunkt */
.chips { display: grid; grid-template-columns: repeat(auto-fill, minmax(62px, 1fr)); gap: 4px; margin-top: 8px; }
.chip { min-height: 28px; padding: 2px 6px; font-size: 12.5px; white-space: nowrap; justify-content: flex-start; gap: 5px; }
.chip::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: #8c918a; box-shadow: inset 0 1px 1px rgba(0,0,0,.4); flex: none; }
.chip.on::before { background: var(--led); box-shadow: 0 0 4px var(--led); }
.btnrow { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 12px; }
.btnrow button { flex: 1 1 auto; }
.calc { position: sticky; bottom: 0; background: var(--plate); padding: 12px 0 14px; border-top: 1px solid var(--engrave); }
.calc .primary { width: 100%; min-height: 42px; font-size: 16px; }
.note { font-size: 12.5px; color: var(--ink-soft); margin: 8px 0 0; }

/* Tabellen-Editor */
.tbl-scroll { overflow-x: auto; }
.tbl-edit { width: 100%; border-collapse: collapse; font-size: 12.5px; margin-top: 4px; }
.tbl-edit th { text-align: left; font-weight: 400; color: var(--ink-soft); font-size: 12px; padding: 3px; border-bottom: 1px solid var(--engrave); }
.tbl-edit td { padding: 2px; }
.tbl-edit input { width: 100%; min-width: 0; border: 1px solid var(--engrave); background: var(--plate-hi); border-radius: 2px; padding: 3px 5px; font-size: 12.5px; text-align: right; }
.tbl-edit input[type=number] { min-width: 62px; }
.tbl-edit input.txt { text-align: left; font-family: var(--sans); min-width: 90px; }
.tbl-edit .del { min-height: 24px; padding: 0 7px; font-size: 13px; }

/* ------------------------------------------------------------------ Anzeige (das eine kräftige Element) */
.display {
  background: var(--plate); border: 1px solid var(--engrave); border-radius: 4px; padding: 10px;
  box-shadow: inset 0 1px 0 var(--engrave-hi);
}
.screen {
  position: relative; height: min(58vh, 600px); min-height: 330px; background: radial-gradient(ellipse at 50% 40%, var(--scr-2), var(--scr) 75%);
  border-radius: 6px; border: 2px solid #0d1211; box-shadow: inset 0 0 0 1px #2c3935, inset 0 2px 14px rgba(0,0,0,.6);
  overflow: hidden; color: var(--scr-text);
}
.viewport { position: absolute; inset: 0; }
.viewport canvas { display: block; width: 100%; height: 100%; outline: none; }
.vp-tools { position: absolute; top: 10px; left: 10px; right: 10px; display: flex; gap: 8px; flex-wrap: wrap; align-items: center; pointer-events: none; font-size: 12.5px; }
.vp-tools > * { pointer-events: auto; }
.seg { display: inline-flex; border: 1px solid #3c4c47; border-radius: 3px; overflow: hidden; }
.seg button { min-height: 26px; padding: 2px 10px; border: 0; border-radius: 0; background: rgba(24,33,31,.85); color: var(--scr-text); box-shadow: none; font-size: 12.5px; }
.seg button + button { border-left: 1px solid #3c4c47; }
.seg button.on { background: #2b3a35; color: var(--trace); }
.chk { display: inline-flex; gap: 5px; align-items: center; padding: 3px 8px; border: 1px solid #3c4c47; border-radius: 3px; background: rgba(24,33,31,.85); color: var(--scr-text); }
.chk input { accent-color: var(--trace); }
.chk.rng input { width: 90px; }
.legend { position: absolute; right: 12px; bottom: 30px; width: 200px; padding: 6px 8px; font-size: 11px; color: var(--scr-text); background: rgba(24,33,31,.85); border: 1px solid #3c4c47; border-radius: 3px; }
.legend .bar { height: 8px; background: linear-gradient(90deg, #1e3a8a, #0ea5e9 35%, #22c55e 60%, #facc15 80%, #dc2626); }
.legend .lbl { display: flex; justify-content: space-between; margin-top: 3px; }
.vp-hint { position: absolute; left: 12px; bottom: 8px; font-size: 11.5px; color: var(--scr-dim); }
.busy { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 10px; background: rgba(17,24,22,.72); color: var(--trace); }
.spin { width: 28px; height: 28px; border: 3px solid #2c3935; border-top-color: var(--trace); border-radius: 50%; animation: sp .8s linear infinite; }
@keyframes sp { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .spin { animation-duration: 3s; } }

/* Messwerte unter der Anzeige, wie die Zeilen eines Messgeräts */
.readout {
  margin-top: 10px; background: var(--scr); border: 2px solid #0d1211; border-radius: 4px; padding: 8px 14px;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 28px; color: var(--scr-text);
}
.readout .empty { grid-column: 1 / -1; margin: 6px 0; color: var(--scr-dim); }
.rd { display: grid; grid-template-columns: 1fr auto; align-items: baseline; gap: 2px 10px; padding: 6px 0; border-bottom: 1px dashed #2f3d39; }
.rd .k { font-size: 12.5px; color: var(--scr-dim); }
.rd .v { font-weight: 700; font-size: 17px; font-variant-numeric: tabular-nums; color: var(--trace); text-align: right; white-space: nowrap; }
.rd .s { grid-column: 1 / -1; font-size: 11.5px; color: var(--scr-dim); text-align: right; }
.rd.mid .v { color: var(--trace-2); }
.rd.bad .v { color: #f07a63; }
.readout .warn { grid-column: 1 / -1; color: var(--trace-2); font-size: 12.5px; padding-top: 6px; }

/* ------------------------------------------------------------------ Ergebnisse */
.stale { background: var(--plate-hi); border: 1px solid var(--warn); border-left-width: 4px; padding: 6px 10px; font-size: 13.5px; }
.tabs { display: flex; gap: 4px; flex-wrap: wrap; border-bottom: 3px double var(--engrave); padding-bottom: 6px; }
.tabs button { font-size: 13.5px; }
.tabs button.on { background: var(--key-bot); box-shadow: inset 0 1px 3px rgba(0,0,0,.3); font-weight: 700; }
.tabpane { display: none; padding-top: 4px; }
.tabpane.on { display: block; }
.plots2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
figure { margin: 0; background: var(--scr); border: 2px solid #0d1211; border-radius: 4px; padding: 10px; }
figure canvas { width: 100%; display: block; }
.plots2 canvas { aspect-ratio: 1 / .9; }
figure.wide canvas { aspect-ratio: 3 / 1; min-height: 220px; }
figure.wide + figure.wide { margin-top: 14px; }
figcaption { font-size: 12.5px; color: var(--scr-dim); margin-top: 6px; text-align: center; }

.plan { background: var(--plate); border: 1px solid var(--engrave); border-radius: 4px; padding: 6px 18px 16px; }
.plan h4 { margin: 18px 0 8px; font-size: 15px; }
.plan table { border-collapse: collapse; width: 100%; max-width: 880px; font-size: 13.5px; background: var(--plate-hi); }
.plan th { text-align: left; font-weight: 700; padding: 6px 9px; border-bottom: 2px solid var(--ink); }
.plan td { padding: 5px 9px; border-bottom: 1px solid var(--engrave); font-variant-numeric: tabular-nums; }
.plan tr.sel td { background: color-mix(in srgb, var(--led) 20%, var(--plate-hi)); font-weight: 700; }
.plan ul { margin: 4px 0; padding-left: 20px; max-width: 72ch; }
.plan p { max-width: 72ch; }

.toast { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); background: var(--scr); color: var(--scr-text); border: 1px solid #3c4c47; border-left: 4px solid var(--trace); padding: 10px 16px; border-radius: 3px; max-width: min(640px, 92vw); z-index: 50; white-space: pre-line; box-shadow: 0 6px 18px rgba(0,0,0,.3); }
.toast.err { border-left-color: #f07a63; }

/* ------------------------------------------------------------------ Infoseite */
.info { max-width: 860px; margin: 22px auto 60px; padding: 8px 28px 28px; background: var(--plate); border: 1px solid var(--engrave); border-radius: 4px; }
.info h1 { font-size: 26px; margin: 18px 0 2px; }
.info h2 { font-size: 18px; margin: 34px 0 10px; padding-bottom: 6px; border-bottom: 3px double var(--engrave); }
.info .lead { color: var(--ink-soft); margin: 0; }
.notice { border: 1.5px solid var(--bad); padding: 12px 14px; margin-top: 18px; background: var(--plate-hi); }
.notice b { display: block; color: var(--bad); margin-bottom: 2px; }
.dev { display: grid; grid-template-columns: auto 1fr; gap: 5px 18px; margin: 0; }
.dev dt { color: var(--ink-soft); }
.dev dd { margin: 0; }
.dev .text { grid-column: 1 / -1; margin-top: 8px; max-width: 70ch; }
.rel { padding: 4px 0 10px; }
.rel + .rel { border-top: 1px solid var(--engrave); }
.rel h3 { margin: 10px 0 4px; font-size: 15px; }
.rel h3 time { font-weight: 400; color: var(--ink-soft); margin-left: 8px; }
.rel ul { margin: 0; padding-left: 20px; }
.rel li { margin: 3px 0; max-width: 72ch; }
.tblwrap { overflow-x: auto; }
.sw { width: 100%; border-collapse: collapse; font-size: 13.5px; background: var(--plate-hi); }
.sw th { text-align: left; padding: 6px 10px; border-bottom: 2px solid var(--ink); }
.sw td { padding: 6px 10px; border-bottom: 1px solid var(--engrave); vertical-align: top; }
.sw td.v { white-space: nowrap; }

/* ------------------------------------------------------------------ Schmale Bildschirme */
@media (max-width: 1100px) { .readout { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 980px) {
  .layout { grid-template-columns: 1fr; }
  .side { position: static; max-height: none; border-right: 0; border-top: 1px solid var(--engrave); order: 2; }
  .main { order: 1; }
  .calc { position: static; }
  .top { position: static; }
}
@media (max-width: 640px) {
  .top { padding: 8px 12px; }
  .ident { flex-basis: 100%; max-width: none; }
  .actions { margin-left: 0; }
  .main { padding: 10px 8px 30px; }
  .display { padding: 6px; }
  .screen { height: 55vh; }
  .readout { grid-template-columns: 1fr; }
  .plots2 { grid-template-columns: 1fr; }
  .side { padding: 4px 12px 0; }
  .info { margin: 0; border: 0; padding: 4px 16px 24px; }
  .vp-hint { display: none; }
}

/* ------------------------------------------------------------------ Info-Taste und Sprachwahl */
.key.info-key, .key.info-key:hover {
  color: #f3f4f0; font-weight: 700; gap: 7px; padding-left: 10px;
  background: linear-gradient(#3a4247, #23292c); border-color: #151a1c;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.15), 0 1px 0 #151a1c;
}
.key.info-key:hover { background: linear-gradient(#465057, #2b3236); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .key.info-key { border-color: #e3b55c; } }
:root[data-theme="dark"] .key.info-key { border-color: #e3b55c; }
.key.info-key svg { width: 18px; height: 18px; fill: none; stroke: #e3b55c; stroke-width: 2; stroke-linecap: round; }
.seg-lang { display: inline-flex; border: 1px solid var(--key-edge); border-radius: 3px; overflow: hidden; box-shadow: 0 1px 0 var(--key-edge); }
.seg-lang button { min-height: 30px; padding: 2px 9px; border: 0; border-radius: 0; box-shadow: none; font-size: 13px; font-weight: 700; }
.seg-lang button + button { border-left: 1px solid var(--key-edge); }
.seg-lang button.on { background: var(--key-blue); color: #fff; box-shadow: inset 0 1px 2px rgba(0,0,0,.3); }

/* Links zu weiteren Seiten auf der Infoseite */
.dev .links { display: flex; flex-wrap: wrap; gap: 6px 14px; }
.dev .links a { white-space: nowrap; }

/* ------------------------------------------------------------------ Hilfeseite */
html[lang="en"] [data-help="de"], html:not([lang="en"]) [data-help="en"] { display: none; }
.help h2 { scroll-margin-top: 80px; }
.toc { display: flex; flex-wrap: wrap; gap: 6px; margin: 18px 0 4px; }
.toc a { padding: 3px 9px; border: 1px solid var(--engrave); border-radius: 3px; background: var(--plate-hi); text-decoration: none; font-size: 13px; color: var(--ink); }
.toc a:hover { border-color: var(--key-blue); }
.steps { padding-left: 22px; }
.steps li { margin: 5px 0; max-width: 72ch; }
.help-list { display: grid; grid-template-columns: minmax(150px, 210px) 1fr; gap: 8px 20px; margin: 0; }
.help-list dt { font-weight: 700; }
.help-list dd { margin: 0; max-width: 72ch; }
.help-list dd ul { margin: 6px 0 0; padding-left: 18px; }
.help-list dd li { margin: 3px 0; }
.pdf-note { border-color: var(--key-blue); border-left-width: 5px; }
.pdf-note b { display: inline; color: inherit; margin: 0; }
.pdf-note > b:first-child { display: block; color: var(--key-blue); margin-bottom: 4px; }
.pdf-note ul { margin: 8px 0; padding-left: 20px; }
.help-tips li { margin: 4px 0; max-width: 72ch; }
.help code { font-family: var(--sans); font-weight: 700; }
@media (max-width: 640px) { .help-list { grid-template-columns: 1fr; gap: 2px; } .help-list dd { margin-bottom: 8px; } }