/* ── 002 · Luft vor deiner Tür ── */

/* Indexklassen des UBA-Luftqualitätsindex, immer zusammen mit dem Klassennamen */
.lqi-vgood { --q: #2bb3a8; }
.lqi-good  { --q: #0ca30c; }
.lqi-mod   { --q: #fab219; }
.lqi-bad   { --q: #ec835a; }
.lqi-vbad  { --q: #d03b3b; }

.status.lqi { color: var(--q); border: 1px solid color-mix(in srgb, var(--q) 35%, transparent); }

.warnbox {
    font-size: 0.82rem;
    color: var(--fg);
    border-left: 2px solid #fab219;
    padding: 0.4rem 0 0.4rem 0.75rem;
    margin-bottom: 1rem;
}

.stat-value.ok  { color: #34d399; }
.stat-value.off { color: #f59e0b; }

/* ── Diagramme ── */

.chart { margin: 1.25rem 0 0.5rem; }

.legend {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem 1rem;
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.65rem;
    color: var(--muted);
    margin-bottom: 0.5rem;
}
.legend span { display: inline-flex; align-items: center; gap: 0.4rem; }

.key {
    display: inline-block;
    width: 16px;
    height: 0;
    border-top: 2px solid var(--c);
    vertical-align: middle;
}
.key.dash { border-top-style: dashed; }

.sw {
    display: inline-block;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--q);
}
.sw.humid { border-radius: 1px; background: #262a33; border: 1px solid #353a45; }

.chart-wrap { position: relative; }
.chart-wrap svg { display: block; width: 100%; height: auto; touch-action: pan-y; outline: none; }
.chart-wrap svg:focus-visible { outline: 1px solid var(--accent); outline-offset: 2px; }

.chart-wrap .gl   { stroke: var(--border); stroke-width: 1; }
.chart-wrap .tk   { stroke: #2a2d34; stroke-width: 1; }
.chart-wrap .band { fill: #1a1d24; }
.chart-wrap .ref  { stroke: #6b5a2a; stroke-width: 1; }
.chart-wrap .ax   { font-family: 'JetBrains Mono', monospace; font-size: 10px; fill: var(--muted); }
.chart-wrap .ref-t { fill: #b8a26a; }
.chart-wrap .ln   { fill: none; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.chart-wrap .ln.dash { stroke-dasharray: 5 4; }
.chart-wrap .xh   { stroke: #5a5f6a; stroke-width: 1; }
.chart-wrap .dot  { stroke: var(--bg); stroke-width: 2; }

.tip {
    position: absolute;
    top: 0;
    pointer-events: none;
    background: #15171d;
    border: 1px solid #2a2d34;
    padding: 0.45rem 0.6rem;
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.66rem;
    color: var(--muted);
    line-height: 1.6;
    white-space: nowrap;
    z-index: 2;
}
.tip .tip-h { color: var(--muted); margin-bottom: 0.15rem; }
.tip b { color: var(--fg); font-weight: 600; margin: 0 0.15rem 0 0.4rem; }
.tip .tip-x { margin-top: 0.15rem; opacity: 0.8; }

/* ── Umgebungskarte ── */

.radar { margin: 1.5rem 0 0.75rem; }
.radar svg { display: block; width: 100%; max-width: 380px; height: auto; margin: 0 auto; }
.radar .ring { fill: none; stroke: var(--border); stroke-width: 1; }
.radar .ax   { font-family: 'JetBrains Mono', monospace; font-size: 9px; fill: var(--muted); opacity: 0.7; }
.radar .dir  { font-size: 10px; opacity: 1; }
.radar .wind { stroke: #8a909c; stroke-width: 1.5; }
.radar .wind-h { fill: #8a909c; }
.radar .sn .hit { fill: transparent; }
.radar .sn .m { fill: var(--q); stroke: var(--bg); stroke-width: 1.5; }
.radar .sn:hover .m, .radar .sn:focus .m { stroke: var(--fg); }
.radar .sn.mine .m { stroke: var(--fg); stroke-width: 2; }
.radar .sn:focus { outline: none; }
.radar .sn.sel .m { stroke: var(--fg); stroke-width: 2.5; }
.radar .sn { cursor: pointer; -webkit-tap-highlight-color: transparent; }
.radar-pick {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.72rem;
    color: var(--muted);
    text-align: center;
    min-height: 2.4em;
    margin-top: 0.5rem;
}
.radar-pick .sw { margin-right: 0.4rem; }
.radar-pick span, .radar-pick a { white-space: nowrap; }
.radar .you { fill: var(--fg); stroke: var(--bg); stroke-width: 2; }
.radar figcaption {
    font-size: 0.75rem;
    color: var(--muted);
    margin-top: 0.6rem;
}
.radar figcaption .legend { justify-content: center; margin-bottom: 0.4rem; }

/* ── Tabelle ── */

.table-view summary {
    cursor: pointer;
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.7rem;
    color: var(--muted);
    margin-top: 0.75rem;
}
.table-view summary:hover { color: var(--accent); }

table.data {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.8rem;
    margin-top: 0.6rem;
}
table.data th {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.6rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--muted);
    font-weight: 400;
    text-align: left;
    padding: 0.35rem 0.5rem 0.35rem 0;
    border-bottom: 1px solid var(--border);
}
table.data td {
    padding: 0.4rem 0.5rem 0.4rem 0;
    border-bottom: 1px solid var(--border);
}
table.data td.num { font-family: 'JetBrains Mono', monospace; font-variant-numeric: tabular-nums; }

/* ── Mein Sensor ── */

.id-input { width: auto; flex: 1; min-width: 0; margin-bottom: 0; }

.notes {
    list-style: none;
    margin-top: 0.85rem;
    font-size: 0.85rem;
}
.notes li {
    padding: 0.4rem 0 0.4rem 0.85rem;
    border-left: 2px solid var(--border);
    margin-bottom: 0.35rem;
}

/* ── Bauanleitung ── */

h3.sub {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--fg);
    margin: 1.75rem 0 0.6rem;
}

.parts { border-top: 1px solid var(--border); }
.parts div {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.45rem 0;
    border-bottom: 1px solid var(--border);
    font-size: 0.85rem;
}
.parts div span:last-child { color: var(--muted); font-size: 0.78rem; text-align: right; }

.wiring {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
}
.wiring .field-label { margin-top: 0; }
.pin {
    display: flex;
    justify-content: space-between;
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.78rem;
    padding: 0.3rem 0;
    border-bottom: 1px solid var(--border);
}
.pin span:last-child { color: var(--accent); }
.wiring .hint { font-size: 0.72rem; color: var(--muted); margin-top: 0.4rem; }

code {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.8em;
    color: var(--fg);
    background: #1a1d24;
    padding: 0.05rem 0.3rem;
}

@media (max-width: 480px) {
    .wiring { grid-template-columns: 1fr; gap: 1rem; }
    .parts div { flex-direction: column; gap: 0; }
    .parts div span:last-child { text-align: left; }
}

.ic {
    width: 0.85em;
    height: 0.85em;
    vertical-align: -0.08em;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.2;
    margin-right: 0.15em;
}

.video-link { margin-bottom: 0.5rem; }