/* Polarlicht-Übersicht – bewusst eigener Nachthimmel-Look, damit sie in jedem Theme gleich aussieht */
.polarlicht {
    --pl-bg: #0b1426;
    --pl-panel: #13203a;
    --pl-line: #24355a;
    --pl-text: #e8eefc;
    --pl-muted: #93a3c4;
    --pl-none: #4b5a78;
    --pl-low: #3f8f8a;
    --pl-possible: #3ccf91;
    --pl-good: #7cf27a;
    --pl-excellent: #d86cf5;
    --pl-south: #ff8a8a;
    --pl-bar: #6f86b8;
    --pl-moon: #f3e3a3;

    background: var(--pl-bg);
    color: var(--pl-text);
    border-radius: 12px;
    padding: 20px;
    font-size: 14px;
    line-height: 1.45;
    margin-bottom: 20px;
}

.polarlicht a { color: inherit; text-decoration: underline; }
.polarlicht small { color: var(--pl-muted); font-size: .8em; font-weight: normal; }

.polarlicht--none { --pl-c: var(--pl-none); }
.polarlicht--low { --pl-c: var(--pl-low); }
.polarlicht--possible { --pl-c: var(--pl-possible); }
.polarlicht--good { --pl-c: var(--pl-good); }
.polarlicht--excellent { --pl-c: var(--pl-excellent); }

/* Standort */
.polarlicht__location {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 8px;
    margin: 0 0 16px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--pl-line);
    font-size: 15px;
}
.polarlicht__location svg { color: var(--pl-possible); flex: 0 0 auto; }
.polarlicht__location a { color: var(--pl-muted); font-size: 13px; text-decoration: none; }
.polarlicht__location a:hover { color: var(--pl-text); text-decoration: underline; }

/* Jetzt */
.polarlicht__now { display: flex; gap: 24px; align-items: center; }
.polarlicht__gauge {
    flex: 0 0 auto;
    width: 120px;
    height: 120px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background:
        radial-gradient(closest-side, var(--pl-bg) 78%, transparent 80%),
        conic-gradient(var(--pl-c) calc(var(--pl-chance) * 1%), var(--pl-line) 0);
}
.polarlicht__percent { font-size: 28px; font-weight: 700; }
.polarlicht__kicker { margin: 0; color: var(--pl-muted); text-transform: uppercase; letter-spacing: .06em; font-size: 12px; }
.polarlicht__rating { margin: 2px 0 8px; font-size: 26px; font-weight: 700; color: var(--pl-c); }
.polarlicht__hints { margin: 0; padding-left: 18px; }
.polarlicht__hints li { margin: 2px 0; }

/* Kennzahlen */
.polarlicht__stats {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
    gap: 8px;
    margin: 20px 0;
}
.polarlicht__stats > div { background: var(--pl-panel); border-radius: 8px; padding: 10px 12px; }
.polarlicht__stats dt { color: var(--pl-muted); font-size: 12px; font-weight: normal; }
.polarlicht__stats dd { margin: 2px 0 0; font-size: 18px; font-weight: 600; }
.polarlicht__stats dd.polarlicht__south { color: var(--pl-south); }

/* Nächte */
.polarlicht__night { background: var(--pl-panel); border-radius: 10px; padding: 14px 16px; margin-top: 12px; }
.polarlicht__night-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px; }
.polarlicht__night-head h3 { margin: 0; font-size: 17px; color: var(--pl-text); }
.polarlicht__badge {
    border: 1px solid var(--pl-c);
    color: var(--pl-c);
    border-radius: 999px;
    padding: 2px 10px;
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
}
.polarlicht__night-meta { margin: 4px 0 12px; color: var(--pl-muted); font-size: 13px; }

.polarlicht__bars { display: flex; gap: 3px; align-items: stretch; }
.polarlicht__bar { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 3px; }
.polarlicht__bar-chance { font-size: 10px; color: var(--pl-muted); }
.polarlicht__bar-track {
    position: relative;
    width: 100%;
    height: 80px;
    background: var(--pl-bg);
    border-radius: 3px;
    overflow: hidden;
}
.polarlicht__bar-fill { position: absolute; left: 0; right: 0; bottom: 0; background: var(--pl-c); border-radius: 3px 3px 0 0; }
.polarlicht__bar-cloud {
    width: 100%;
    height: 6px;
    border-radius: 2px;
    background: rgba(200, 210, 230, calc(var(--pl-cloud) / 100));
    outline: 1px solid var(--pl-line);
}
.polarlicht__bar-time { font-size: 10px; color: var(--pl-muted); }

.polarlicht__source { margin: 14px 0 0; color: var(--pl-muted); font-size: 12px; }

/* Standortwahl */
.polarlicht__switch {
    background: var(--pl-panel);
    color: var(--pl-text);
    border: 1px solid var(--pl-line);
    border-radius: 6px;
    padding: 3px 6px;
    font-weight: 600;
    font-size: 15px;
}
.polarlicht__geo {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: transparent;
    color: var(--pl-text);
    border: 1px solid var(--pl-line);
    border-radius: 999px;
    padding: 3px 10px;
    font-size: 13px;
    cursor: pointer;
}
.polarlicht__geo:hover, .polarlicht__geo:focus-visible { border-color: var(--pl-possible); }
.polarlicht__geo[disabled] { opacity: .6; cursor: progress; }
.polarlicht__visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* NOAA-Warnungen */
.polarlicht__alerts {
    margin: 16px 0 0;
    padding: 10px 14px;
    border-left: 3px solid var(--pl-excellent);
    background: var(--pl-panel);
    border-radius: 0 8px 8px 0;
}
.polarlicht__alerts p { margin: 2px 0; }

/* Erklärungen für Einsteiger */
.polarlicht__intro { margin: 0 0 8px; color: var(--pl-muted); font-size: 13px; max-width: 60ch; }
.polarlicht .polarlicht__explain { margin: 6px 0 0; color: var(--pl-muted); font-size: 12px; font-weight: normal; line-height: 1.4; }
.polarlicht__night .polarlicht__explain, .polarlicht__panel > .polarlicht__explain { margin: 0 0 10px; }
.polarlicht__guide { background: var(--pl-panel); border-radius: 10px; padding: 12px 16px; margin-top: 12px; }
.polarlicht__guide summary { cursor: pointer; font-weight: 600; font-size: 15px; }
.polarlicht__guide h4 { margin: 14px 0 4px; font-size: 14px; color: var(--pl-text); }
.polarlicht__guide p, .polarlicht__guide ul { margin: 0 0 6px; max-width: 75ch; }
.polarlicht__guide ul { padding-left: 18px; }
.polarlicht__guide li { margin: 3px 0; }

/* Fototipps */
.polarlicht__tips { background: var(--pl-panel); border-radius: 8px; padding: 10px 14px; margin: 0 0 12px; }
.polarlicht__tips summary { cursor: pointer; font-weight: 600; }
.polarlicht__tips ul { margin: 8px 0 0; padding-left: 18px; }
.polarlicht__tips li { margin: 3px 0; }

/* Mond und Legende in den Stundenbalken */
.polarlicht__bar-moon { width: 6px; height: 6px; border-radius: 50%; background: transparent; }
.polarlicht__bar-moon.is-up { background: var(--pl-moon); }
.polarlicht__legend { display: flex; flex-wrap: wrap; gap: 4px 14px; margin: 8px 0 0; color: var(--pl-muted); font-size: 12px; }
.polarlicht__legend span { display: inline-flex; align-items: center; gap: 5px; }
.polarlicht__key { display: inline-block; width: 12px; height: 8px; border-radius: 2px; }
.polarlicht__key--cloud { background: rgba(200, 210, 230, .7); outline: 1px solid var(--pl-line); }
.polarlicht__key--moon { width: 6px; height: 6px; border-radius: 50%; background: var(--pl-moon); }
.polarlicht__key--measured { background: var(--pl-bar); }
.polarlicht__key--predicted { background: var(--pl-bar); opacity: .45; }
.polarlicht__key--above { background: var(--pl-possible); }
.polarlicht__key--oval-low { background: var(--pl-possible); opacity: .3; }
.polarlicht__key--oval-high { background: var(--pl-possible); opacity: .9; }

/* Weitere Bereiche */
.polarlicht__panel { background: var(--pl-panel); border-radius: 10px; padding: 14px 16px; margin-top: 12px; }
.polarlicht__panel h3 { margin: 0 0 8px; font-size: 17px; color: var(--pl-text); }
.polarlicht__panel .polarlicht__stats { margin: 4px 0 8px; }
.polarlicht__panel .polarlicht__stats > div { background: var(--pl-bg); }
.polarlicht__map { height: 360px; border-radius: 8px; overflow: hidden; background: var(--pl-bg); }
.polarlicht__map .leaflet-tile-pane { filter: brightness(.75) saturate(.6); }
.polarlicht__flare { display: inline-block; margin-right: 4px; padding: 0 6px; border-radius: 4px; font-size: 14px; border: 1px solid var(--pl-line); }
.polarlicht__flare--x { border-color: var(--pl-excellent); }

/* Diagramme */
.polarlicht__chart { display: block; width: 100%; height: auto; overflow: visible; }
.polarlicht__chart .pl-grid { stroke: var(--pl-line); stroke-width: 1; }
.polarlicht__chart .pl-zero { stroke: var(--pl-muted); stroke-width: 1; }
.polarlicht__chart .pl-axis { fill: var(--pl-muted); font-size: 11px; }
.polarlicht__chart .pl-label { fill: var(--pl-text); font-size: 11px; }
.polarlicht__chart .pl-bar { fill: var(--pl-bar); }
.polarlicht__chart .pl-bar--predicted { fill-opacity: .45; }
.polarlicht__chart .pl-bar--above { fill: var(--pl-possible); }
.polarlicht__chart .pl-hit { fill: transparent; }
.polarlicht__chart g:hover .pl-bar { stroke: var(--pl-text); stroke-width: 1; }
.polarlicht__chart .pl-threshold { stroke: var(--pl-possible); stroke-width: 1.5; stroke-dasharray: 5 4; }
.polarlicht__chart .pl-now { stroke: var(--pl-text); stroke-width: 1; stroke-dasharray: 2 3; }
.polarlicht__chart .pl-line { fill: none; stroke: var(--pl-text); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.polarlicht__chart .pl-south-area { fill: var(--pl-south); fill-opacity: .25; }
.polarlicht__chart .pl-hit:hover { fill: rgba(255, 255, 255, .06); }

@media (max-width: 560px) {
    .polarlicht { padding: 16px; }
    .polarlicht__now { flex-direction: column; align-items: flex-start; gap: 12px; }
    .polarlicht__gauge { width: 96px; height: 96px; }
    .polarlicht__percent { font-size: 22px; }
    .polarlicht__bar-chance { display: none; }
    .polarlicht__map { height: 280px; }
    .polarlicht__geo { margin-left: 0; }
}