/* QFH-Antennenrechner (Baustein [[qfh-rechner]]) und Polarisations-Animation (Baustein [[polarisation]]) auf den Funk-Seiten.
   Farben aus style.css; alle Regeln unter .qfh bzw. .pol, damit nichts auf den Rest der Seite wirkt. */
.qfh { --q1: #9fd4ff; --q2: #7fd6a4; --qwarn: #ffc24a; --qerr: #ff8a80; margin: 1.4em 0; }
.qfh .card { background: var(--panel); border: 1px solid var(--rule); padding: 18px; }
.qfh .layout { display: grid; grid-template-columns: minmax(250px, 300px) 1fr; gap: 16px; align-items: start; }
.qfh .results { display: grid; gap: 16px; }
.qfh .loops { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 860px) { .qfh .layout, .qfh .loops { grid-template-columns: 1fr; } }
.kb .qfh h2 { margin: 0 0 12px; font: 500 1rem/1.3 var(--display); letter-spacing: .08em; text-transform: uppercase; color: var(--ink); }
.kb .qfh h2.abstand { margin-top: 22px; }
.qfh .field { margin-bottom: 14px; }
.qfh .field label { display: block; color: var(--ink); font-size: .9rem; margin-bottom: 4px; }
.qfh .field .hint { font-size: .8rem; line-height: 1.45; color: var(--soft); margin-top: 3px; }
.qfh .field .hint.warn { color: var(--qwarn); }
.qfh .field .hint.error { color: var(--qerr); }
.qfh .inputwrap { display: flex; align-items: center; gap: 8px; }
.qfh input[type="text"], .qfh select { width: 100%; font: inherit; font-size: .95rem; color: var(--ink); background: var(--bg); border: 1px solid var(--rule); padding: 7px 10px; }
.qfh input[type="text"]:focus, .qfh select:focus { outline: 1px solid var(--volt); outline-offset: 0; border-color: var(--volt); }
.qfh input:disabled, .qfh select:disabled { opacity: .55; }
.qfh input.invalid { border-color: var(--qerr); }
.qfh .unit { color: var(--soft); min-width: 2.6em; font-size: .9rem; }
.qfh .actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 4px; }
.qfh button, #qfh-plan .planbar button { padding: 8px 14px; background: none; border: 1px solid var(--rule); color: var(--soft); font: 500 .78rem/1.2 var(--display); letter-spacing: .08em; text-transform: uppercase; cursor: pointer; }
.qfh button:hover, .qfh button:focus-visible, #qfh-plan .planbar button:hover, #qfh-plan .planbar button:focus-visible { border-color: var(--volt); color: #fff; outline: 0; }
.qfh button#qfh-showplan, #qfh-plan .planbar button#qfh-planprint { border-color: var(--volt); color: #fff; }
.qfh button#qfh-showplan:hover, .qfh button#qfh-showplan:focus-visible, #qfh-plan .planbar button#qfh-planprint:hover { background: rgba(159, 212, 255, .1); }
.qfh .summary { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
@media (max-width: 520px) { .qfh .summary { grid-template-columns: 1fr; } }
.qfh .stat { border: 1px solid var(--rule); padding: 10px 12px; }
.qfh .stat .k { font-size: .78rem; color: var(--soft); }
.qfh .stat .v { font-size: 1.2rem; color: var(--ink); font-variant-numeric: tabular-nums; }
.kb .qfh .loop h2 { display: flex; align-items: center; gap: 8px; }
.qfh .dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; }
.qfh .loop1 .dot { background: var(--q1); } .qfh .loop2 .dot { background: var(--q2); }
.qfh .loopbody { display: grid; grid-template-columns: 120px 1fr; gap: 12px; align-items: start; }
@media (max-width: 420px) { .qfh .loopbody { grid-template-columns: 1fr; } .qfh .loopbody svg { max-width: 160px; margin: 0 auto; } }
.kb .qfh table { width: 100%; min-width: 0; margin: 0; font-size: .86rem; }
.kb .qfh td { padding: 5px 0; width: auto; color: var(--text); border-bottom: 1px solid var(--rule); vertical-align: baseline; white-space: normal; }
.kb .qfh tr:last-child td { border-bottom: 0; }
.kb .qfh td.sym { color: var(--soft); white-space: nowrap; padding: 5px 8px; }
.kb .qfh td.val { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; color: var(--ink); }
.kb .qfh tr.key td.val { color: var(--volt); }
.qfh svg { display: block; width: 100%; height: auto; }
.qfh svg .mast { fill: rgba(159, 212, 255, .14); }
.qfh svg .support { stroke: var(--soft); stroke-width: 3; stroke-linecap: round; }
.qfh svg .wire { fill: none; stroke-width: 2.5; stroke-linecap: round; }
.qfh .loop1 svg .wire { stroke: var(--q1); } .qfh .loop2 svg .wire { stroke: var(--q2); }
.qfh svg .dim { stroke: var(--soft); stroke-width: 1; fill: none; }
.qfh svg text { fill: var(--text); font-size: 11px; font-family: inherit; }
.qfh details { margin-top: 16px; }
.qfh summary { cursor: pointer; color: var(--ink); }
.qfh dl { margin: 12px 0 0; }
.qfh dt { color: var(--ink); margin-top: 10px; }
.qfh dd { margin: 2px 0 0; color: var(--soft); font-size: .92rem; }
.kb .qfh .qfh-fuss { margin-top: 12px; font-size: .82rem; color: var(--soft); }

/* ---- Bauplan (A4): eigene Ansicht über der ganzen Seite ---- */
#qfh-plan { display: none; overflow-x: auto; }
body.qfh-planmodus > :not(#qfh-plan) { display: none !important; }
body.qfh-planmodus #qfh-plan { display: block; }
body.qfh-planmodus { background: #6b7280; }
#qfh-plan .planbar { position: sticky; top: 0; z-index: 2; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; padding: 10px 16px; background: var(--panel); border-bottom: 1px solid var(--rule); }
#qfh-plan .planbar span { color: var(--soft); font-size: .88rem; }
#qfh-plan .sheet { page: plan; position: relative; box-sizing: border-box; background: #fff; color: #14181d; width: 210mm; height: 297mm; margin: 14px auto; padding: 13mm 15mm 12mm;
  box-shadow: 0 2px 14px rgba(0, 0, 0, .35); font: 9.6pt/1.4 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; -webkit-print-color-adjust: exact; print-color-adjust: exact; overflow: hidden; }
#qfh-plan .sheet h1 { font-size: 20pt; font-weight: 700; margin: 0; letter-spacing: -.01em; color: #14181d; text-transform: none; }
#qfh-plan .sheet .sub { color: #56616f; margin: 1mm 0 4mm; }
#qfh-plan .sheet h3 { font-size: 11pt; font-weight: 700; margin: 4mm 0 1.5mm; padding-bottom: 1mm; border-bottom: .4mm solid #14181d; color: #14181d; }
#qfh-plan .sheet h3.first { margin-top: 0; }
#qfh-plan .sheet p { margin: 0 0 2mm; }
#qfh-plan .sheet ol { margin: 0; padding-left: 5mm; list-style: decimal; }
#qfh-plan .sheet li { margin-bottom: .7mm; }
#qfh-plan .sheet b { color: #14181d; }
#qfh-plan .sheet .chips { display: flex; flex-wrap: wrap; gap: 2mm; margin-bottom: 4mm; }
#qfh-plan .sheet .chip { border: .3mm solid #c9ced6; border-radius: 2mm; padding: .8mm 2.5mm; }
#qfh-plan .sheet .chip b { font-variant-numeric: tabular-nums; }
#qfh-plan .sheet .cols { display: grid; grid-template-columns: 78mm 1fr; gap: 7mm; align-items: start; }
#qfh-plan .sheet .cols2 { display: grid; grid-template-columns: 1fr 1fr; gap: 7mm; align-items: start; }
#qfh-plan .sheet table { width: 100%; border-collapse: collapse; font-size: 9.2pt; }
#qfh-plan .sheet th { text-align: right; font-weight: 700; padding: 1.2mm 0 1.2mm 2mm; border-bottom: .4mm solid #14181d; white-space: nowrap; color: #14181d; }
#qfh-plan .sheet th:first-child { text-align: left; padding-left: 0; }
#qfh-plan .sheet td { padding: 1.1mm 0 1.1mm 2mm; border-bottom: .2mm solid #d5d9df; color: #14181d; }
#qfh-plan .sheet td:first-child { padding-left: 0; }
#qfh-plan .sheet td.n { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
#qfh-plan .sheet tr.sum td { font-weight: 700; border-top: .4mm solid #14181d; border-bottom: 0; }
#qfh-plan .sheet .big { color: #0b5cad; } #qfh-plan .sheet .small { color: #17803f; }
#qfh-plan .sheet .note { color: #56616f; font-size: 8.4pt; }
#qfh-plan .sheet .note.mt { margin-top: 2mm; }
#qfh-plan .sheet .warn { border-left: 1mm solid #c2410c; padding: 1mm 0 1mm 3mm; margin: 3mm 0 2mm; }
#qfh-plan .sheet .drill { width: 66mm; margin: 0 auto; }
#qfh-plan .sheet .feed { width: 44mm; margin: 0 auto 1mm; }
#qfh-plan .sheet .inner-t { color: #c0262d; }
#qfh-plan .sheet svg { display: block; width: 100%; height: auto; }
#qfh-plan .sheet svg text { fill: #14181d; font-size: 9px; }
#qfh-plan .sheet svg.feed-svg { font-weight: 600; }
#qfh-plan .sheet svg.feed-svg text { font-size: 12px; }
#qfh-plan .sheet svg text.t-inner { fill: #c0262d; }
#qfh-plan .sheet svg text.t-shield { fill: #56616f; }
#qfh-plan .sheet svg .hole-big, #qfh-plan .sheet svg .hole-small { fill: #fff; stroke-width: 2; }
#qfh-plan .sheet svg .hole-big { stroke: #0b5cad; } #qfh-plan .sheet svg .hole-small { stroke: #17803f; }
#qfh-plan .sheet svg .mast { fill: #e3e6ea; stroke: #9aa3ad; stroke-width: .6; }
#qfh-plan .sheet svg .w1 { fill: none; stroke: #0b5cad; stroke-width: 2.4; stroke-linecap: round; }
#qfh-plan .sheet svg .w2 { fill: none; stroke: #17803f; stroke-width: 2.4; stroke-linecap: round; }
#qfh-plan .sheet svg .dim { stroke: #56616f; stroke-width: .7; fill: none; }
#qfh-plan .sheet svg .grid { stroke: #9aa3ad; stroke-width: .6; stroke-dasharray: 3 2; fill: none; }
#qfh-plan .sheet svg .inner { stroke: #c0262d; fill: none; stroke-width: 2.4; stroke-linecap: round; }
#qfh-plan .sheet svg .shield { stroke: #56616f; fill: none; stroke-width: 2.4; stroke-linecap: round; }
#qfh-plan .sheet .foot { position: absolute; left: 15mm; right: 15mm; bottom: 8mm; display: flex; justify-content: space-between; gap: 6mm; color: #56616f; font-size: 7.8pt; border-top: .2mm solid #c9ced6; padding-top: 1.5mm; }
#qfh-plan .sheet .foot span:last-child { white-space: nowrap; }
@page plan { size: A4; margin: 0; }
@media print {
  body.qfh-planmodus { background: #fff; }
  #qfh-plan .planbar { display: none; }
  #qfh-plan .sheet { margin: 0; box-shadow: none; break-after: page; }
  #qfh-plan .sheet:last-child { break-after: auto; }
  .qfh .actions, .qfh details { display: none; }
}

/* ---- Polarisation: Animation der Funkwelle ---- */
.pol { margin: 1.4em 0; padding: 16px 18px 14px; background: var(--panel); border: 1px solid var(--rule); }
.pol-wahl { display: flex; flex-wrap: wrap; gap: 0; margin-bottom: 12px; }
.pol-wahl button, .pol-halt { padding: 8px 14px; background: none; border: 1px solid var(--rule); color: var(--soft); font: 500 .78rem/1.2 var(--display); letter-spacing: .08em; text-transform: uppercase; cursor: pointer; }
.pol-wahl button + button { border-left: 0; }
.pol-wahl button:hover, .pol-wahl button:focus-visible, .pol-halt:hover, .pol-halt:focus-visible { background: rgba(159, 212, 255, .1); color: #fff; outline: 0; }
.pol-wahl button[aria-pressed="true"] { border-color: var(--volt); color: #fff; background: rgba(159, 212, 255, .14); }
.pol-halt { margin-left: 12px; }
.pol-bild { display: grid; grid-template-columns: 1fr 190px; gap: 16px; align-items: center; }
@media (max-width: 640px) { .pol-bild { grid-template-columns: 1fr; } }
.pol canvas { display: block; width: 100%; height: auto; }
.pol-ende { max-width: 190px; margin: 0 auto; }
.kb .pol-text { margin: 10px 0 0; color: var(--soft); font-size: .9rem; line-height: 1.55; }
.pol-wahl .pol-halt { border-left: 1px solid var(--rule); }
.pol-wahl .pol-halt:first-child { margin-left: 0; }