/* Design „Cockpit“: Graphit, Bernstein als einziger Akzent, schmale Grotesk, Haarlinien.
   Dunkel (Vorgabe ohne JS) mit heller Variante (data-schema="hell"): gleiche Teile, nur andere Werte. */

@font-face { font-family: "Plex Cond"; src: url("schrift/plex-cond-400.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Plex Cond"; src: url("schrift/plex-cond-500.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Plex Cond"; src: url("schrift/plex-cond-600.woff2") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Plex Cond"; src: url("schrift/plex-cond-700.woff2") format("woff2"); font-weight: 700; font-display: swap; }
/* Latin Extended für Polnisch/Tschechisch (06.11.2026, Fontsource 5.3.0) */
@font-face { font-family: "Plex Cond"; src: url("schrift/plex-cond-400-latin-ext.woff2") format("woff2"); font-weight: 400; font-display: swap; unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1E9F, U+1EF2-1EFF, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Plex Cond"; src: url("schrift/plex-cond-500-latin-ext.woff2") format("woff2"); font-weight: 500; font-display: swap; unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1E9F, U+1EF2-1EFF, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Plex Cond"; src: url("schrift/plex-cond-600-latin-ext.woff2") format("woff2"); font-weight: 600; font-display: swap; unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1E9F, U+1EF2-1EFF, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Plex Cond"; src: url("schrift/plex-cond-700-latin-ext.woff2") format("woff2"); font-weight: 700; font-display: swap; unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1E9F, U+1EF2-1EFF, U+2C60-2C7F, U+A720-A7FF; }
/* Kyrillisch (IBM @ibm/plex-sans-condensed 2.0.0, split „Cyrillic“, für uk; Fontsource hat keine Grundmenge) */
@font-face { font-family: "Plex Cond"; src: url("schrift/plex-cond-400-cyrillic.woff2") format("woff2"); font-weight: 400; font-display: swap; unicode-range: U+0400-045F, U+0490-0491; }
@font-face { font-family: "Plex Cond"; src: url("schrift/plex-cond-500-cyrillic.woff2") format("woff2"); font-weight: 500; font-display: swap; unicode-range: U+0400-045F, U+0490-0491; }
@font-face { font-family: "Plex Cond"; src: url("schrift/plex-cond-600-cyrillic.woff2") format("woff2"); font-weight: 600; font-display: swap; unicode-range: U+0400-045F, U+0490-0491; }
@font-face { font-family: "Plex Cond"; src: url("schrift/plex-cond-700-cyrillic.woff2") format("woff2"); font-weight: 700; font-display: swap; unicode-range: U+0400-045F, U+0490-0491; }

:root {
    color-scheme: dark;
    --grund: #0f1113; --pan: #16191c; --pan2: #1d2125; --pan3: #272c32;
    --linie: #2c3238; --linie2: #3b424a;
    --t1: #ecebe6; --t2: #b9b7af; --t3: #908e87;
    --akzent: #f2b13a; --akzent-flaeche: #f2b13a; --akzent-tinte: #1b1406; --akzent-weich: rgb(242 177 58 / 0.16);
    /* Ereignisfarben aus den Bausteinen (für alle Designs gleich) */
    --c-sonne: var(--ll-e-sonne); --c-bl: var(--ll-e-bl); --c-mond: var(--ll-e-mond); --c-hm: var(--ll-e-hm);
    --rahmen: #202c39; --rahmen-linie: #34465a;
    --warn: #ff8a73; --frost: #8fd3ff; --schnee: #d6c8ff;
    --symbol: #d6dade; --stark: #ffb15c; --menge: #7fc4ff; --regen1: #8fd0ff; --regen2: #4fb1ff; --regen3: #2f8fff;
    --tk1: #7c9cbc; --tk2: #8cb8e0; --tk3: #b9d2e8; --tk4: #edf3f8;
    --phase-dunkel: #3a3f46; --phase-hell: #f4ecd2; --info-grund: #353c44; --info-linie: #4f5862;
    --karte-grund: #20251f; --karte-filter: brightness(0.85) saturate(0.85); --karte-vermerk: rgb(15 17 19 / 0.8);
    --hm-grund: none; --hm-text: var(--c-hm); --hm-rand: color-mix(in srgb, var(--c-hm) 45%, transparent);

    /* Maße: alles auf einen Bildschirm */
    --fs: 14px; --lueck: 10px; --pol: 10px;
    --et: 84px; --su: 280px; --zeile: 19px; --balken: 88px; --nzeile: 21px; --karte-h: 300px;

    /* Bausteine */
    --ll-grund: var(--grund); --ll-flaeche: var(--pan2); --ll-text: var(--t1); --ll-text-2: var(--t2); --ll-linie: var(--linie2);
    --ll-akzent: var(--akzent); --ll-akzent-text: var(--akzent-tinte); --ll-markierung: #ff9b7d;
    --ll-kopf-grund: var(--rahmen); --ll-kopf-text: var(--t1); --ll-fuss-grund: var(--rahmen); --ll-fuss-text: var(--t2);
    --ll-schrift: "Plex Cond", "Arial Narrow", system-ui, sans-serif; --ll-schrift-zahl: var(--ll-schrift);
    --ll-radius: 6px;
    --ll-h0: #1b1f23; --ll-h0-text: var(--t3);
    --ll-sonne: #2a2618; --ll-sonne-text: #c9b27a;
    --ll-stern: var(--akzent);
    --ll-relief-0: #0d1219; --ll-relief-schraffur: #2b323c;
    --tag-schraffur: repeating-linear-gradient(135deg, rgb(242 177 58 / 0.14) 0 2px, transparent 2px 6px);
}
/* Helle Variante: Tageslicht-Instrument – helles Grau, weiße Paneele, Graphit-Schrift; Bernstein als Fläche bleibt,
   als Schrift und Linie dunkler, damit er auf Weiß lesbar ist */
:root[data-schema="hell"] {
    color-scheme: light;
    --grund: #e9ebee; --pan: #ffffff; --pan2: #f3f4f6; --pan3: #e4e7eb;
    --linie: #dfe2e6; --linie2: #c2c8cf;
    --t1: #15181b; --t2: #434950; --t3: #5f666e;
    --akzent: #9a5c00; --akzent-weich: rgb(154 92 0 / 0.12);
    --rahmen: #dfe3e8; --rahmen-linie: #c3cad2;
    --warn: #b42318; --frost: #1f63a8; --schnee: #6447b8;
    --symbol: #4a525b; --stark: #b45309; --menge: #1f6fb5; --regen1: #1f6fb5; --regen2: #1658a0; --regen3: #0b3f80;
    --tk1: var(--t1); --tk2: var(--t1); --tk3: var(--t1); --tk4: var(--t1);
    --phase-dunkel: #3b4760; --phase-hell: #f6e7b4; --info-grund: #1b1f26; --info-linie: var(--linie2);
    --karte-grund: #e8e6df; --karte-filter: none; --karte-vermerk: rgb(255 255 255 / 0.85);
    --hm-grund: var(--c-hm); --hm-text: #1a1a1a; --hm-rand: rgb(0 0 0 / 0.35);
    --ll-akzent-text: #ffffff; --ll-markierung: #c2412d;
    --ll-h0: #1d2228; --ll-h0-text: #a7afb8;
    --ll-windpfeil: #e07800;
    --ll-sonne: #f7f0db; --ll-sonne-text: #6f5a17;
    --ll-stern: #b07a00;
    --ll-relief-0: #1d2433; --ll-relief-schraffur: #c9ced6;
    --tag-schraffur: repeating-linear-gradient(135deg, rgb(190 130 0 / 0.18) 0 2px, transparent 2px 6px);
}
/* hellste Stufe (fast weiß) auf weißem Paneel: feine Kante; Fallinien kräftiger */
:root[data-schema="hell"] .ll-h4 { box-shadow: inset 0 0 0 1px var(--linie2); }
:root[data-schema="hell"] .ck-logo-design { color: #a34d00; }
:root[data-schema="hell"] .ck-marke::after { opacity: 0.75; }
/* Skalenwerte (Regen %): im Dunkeln Schriftfarbe, im Hellen Plakette – helle Skalenfarben wären als Schrift auf Weiß unlesbar */
:root[data-schema="hell"] .ll-skala { display: inline-block; padding: 0 4px; border-radius: 3px; background: var(--f); color: #0f1d2c; font-weight: 600; line-height: 1.35; box-shadow: inset 0 0 0 1px rgb(0 0 0 / 0.1); min-width: 2em; text-align: center; }
:root[data-schema="hell"] .ck-nsum .ll-skala { min-width: 3.3em; }

* { box-sizing: border-box; }
html { background: var(--grund); color: var(--t1); font: 400 var(--fs)/1.35 var(--ll-schrift); font-variant-numeric: tabular-nums;
    -webkit-font-smoothing: antialiased; scrollbar-color: var(--pan3) var(--grund); }
:is(input, textarea) { caret-color: var(--akzent); }
body { margin: 0; min-height: 100vh; display: flex; flex-direction: column; }
::selection { background: var(--akzent-flaeche); color: var(--akzent-tinte); }
:focus-visible { outline: 2px solid var(--akzent); outline-offset: 2px; }
a { color: var(--t1); text-underline-offset: 3px; text-decoration-color: var(--t3); }
a:hover { color: var(--akzent); }
b { font-weight: 600; }
small { font-size: 0.86em; }
h2, h3 { font-weight: 600; letter-spacing: 0; }

/* Knöpfe im Cockpit */
.ll-knopf { min-height: 30px; padding: 0 11px; background: var(--pan2); border-color: var(--linie2); font-weight: 500; font-size: 1em; }
.ll-knopf:hover { background: var(--pan3); border-color: var(--linie2); color: var(--t1); }
.ll-knopf--haupt, .ll-knopf--haupt:hover { background: var(--akzent-flaeche); border-color: var(--akzent-flaeche); color: var(--akzent-tinte); font-weight: 600; }
.ll-knopf--haupt:hover { background: #ffc35a; }
.ll-knopf--symbol { width: 30px; padding: 0; }
.ck-leise { background: none; border-color: transparent; color: var(--t2); }
.ck-leise:hover { background: var(--pan3); border-color: transparent; }
.ck-klein { min-height: 26px; padding: 0 9px; }

/* Kopfleiste: eigene Fläche */
.ck-kopf { display: flex; align-items: center; gap: 14px; min-height: 50px; padding: 6px 14px; background: var(--rahmen); border-bottom: 1px solid var(--rahmen-linie); flex-wrap: wrap; }
.ck-logo { display: inline-flex; align-items: center; gap: 9px; color: var(--t1); text-decoration: none; margin-right: 10px; }
.ck-logo svg { width: 26px; height: 26px; fill: var(--akzent); }
.ck-logo b { font-size: 24px; font-weight: 700; letter-spacing: -0.01em; line-height: 1; }
.ck-logo-design { font-size: 16px; font-weight: 600; color: #ffa500; /* Designname orange wie in allen Designs (Jörg 2026-10-31) */ padding-left: 10px; margin-left: 2px; border-left: 2px solid currentColor; line-height: 1.1; }
.ck-kopf .ll-datum-wt { color: var(--t1); font-weight: 600; } /* Wochentag weiß wie in allen Designs (Jörg 2026-10-31; hell: Schriftfarbe) */
.ck-kopf .ll-datum input { background: var(--grund); border-color: var(--linie2); height: 30px; min-height: 30px; padding: 0 8px; }
.ck-werkzeuge { display: flex; align-items: center; gap: 14px; margin-left: auto; flex-wrap: wrap; }
.ck-punkt { width: 7px; height: 7px; border-radius: 50%; background: var(--akzent); }
/* Knopf zeigt, wohin er schaltet: im Hellen den Mond, im Dunkeln die Sonne */
.ck-schema-mond, [data-schema="hell"] .ck-schema-sonne { display: none; }
[data-schema="hell"] .ck-schema-mond { display: block; }

/* Raster der drei Spalten */
/* Breite Bildschirme: Seitenspalten wachsen mit (ab 1600 px, links stärker für die Karte), die Mitte nimmt nicht allein den Rest */
.ck-deck { flex: 1; display: grid; grid-template-columns: clamp(400px, 25vw, 560px) minmax(0, 1fr) clamp(336px, 21vw, 480px); /* links breiter als rechts, Mitte schmaler (Jörg 2026-11-08, Variante A) */ gap: var(--lueck); padding: var(--lueck) 14px; align-items: start; }
.ck-spalte { display: flex; flex-direction: column; gap: var(--lueck); min-width: 0; }
.ck-paneel { background: var(--pan); border: 1px solid var(--linie); border-radius: 8px; padding: var(--pol); min-width: 0; }
.ck-ph { display: flex; align-items: baseline; gap: 10px; margin: 0 0 6px; min-height: 22px; }
/* Hinweis beim Erstbesuch über „Heute Nacht“, am Handy unter der Standortwahl (gleiche order wie .ck-nacht, steht davor) */
.ck-erst { border-color: var(--akzent); background: var(--akzent-weich); }
.ck-ph h2 { margin: 0; font-size: 15px; }
.ck-ph h2.ck-gross { font-size: 19px; }
.ck-ph-r { margin-left: auto; color: var(--t3); display: flex; align-items: center; gap: 8px; }
.ck-unter { color: var(--t2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
#ck-nacht-unter { white-space: normal; overflow: visible; line-height: 1.6; } /* Warnungen mit Werten: umbrechen statt „…“ (Jörg 05.11.) */
.ck-ph h2 { flex: none; white-space: nowrap; }
.ck-leiser { color: var(--t3); }

/* Standort */
/* Platz als Auswahlfeld mit den drei Knöpfen in einer Zeile; die Karte bekommt den Platz */
.ll-platzwahl { margin-bottom: 8px; }
.ll-platzwahl select { min-height: 30px; height: 30px; padding: 0 6px; background: var(--grund); }
.ll-pw-kopf { min-height: 30px; height: 30px; padding-left: 7px; background: var(--grund); } /* wie das Auswahlfeld bis 12.11. */
.ck-karte { height: var(--karte-h); min-height: 0; border-radius: 6px; overflow: hidden; border: 1px solid var(--linie2); }
.ck-karte .leaflet-container { background: var(--karte-grund); font: inherit; }
.ck-karte .leaflet-tile-pane { filter: var(--karte-filter); }
.ck-karte .leaflet-control-attribution { font-size: 10px; background: var(--karte-vermerk); color: var(--t2); }
.ck-karte .leaflet-control-attribution a { color: var(--t1); }
.ck-karte .leaflet-control-zoom a { width: 24px; height: 24px; line-height: 22px; background: var(--pan); color: var(--t1); border-color: var(--linie2); }
.ck-karte .leaflet-control-minimap { display: none; }
.ck-karte.ll-karte--gross .leaflet-control-minimap { display: block; }
.ck-karte .ll-karte-gross { top: 6px; right: 6px; width: 26px; min-height: 26px; }
.ck-karte .ll-wind-knopf { top: 38px; right: 6px; width: 26px; min-height: 26px; }
.ck-karte .ll-richtung-knopf { top: 70px; right: 6px; width: 26px; min-height: 26px; }
.ck-karte .ll-wind-stand { top: 6px; left: 40px; max-width: calc(100% - 84px); }
.ck-karte.ll-karte--gross { height: auto; border: 0; border-radius: 0; }
#koordinaten { margin-top: 8px; grid-template-columns: 1fr 1fr; gap: 6px 8px; }
#koordinaten label:nth-child(3) { grid-column: 1; }
#koordinaten input { min-height: 28px; height: 28px; padding: 0 7px; background: var(--grund); }
#koordinaten label > span { font-size: 0.85em; }
#koordinaten .ll-schalter { align-self: end; height: 28px; }
#koordinaten .ll-hoehe { grid-column: 1 / -1; color: var(--t2); }

/* Legende */
.ck-legende { display: grid; grid-template-columns: minmax(0, 1fr); gap: 3px; }
.ck-li { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 7px; line-height: 1.2; } /* umbrechen: Plaketten ragten bei 1024/1280 px aus dem Paneel */
.ck-li i { width: 22px; height: 13px; border-radius: 3px; flex: none; }
.ck-li i.ck-tag { background: var(--pan2) var(--tag-schraffur); border: 1px solid var(--linie2); }

/* Gemeinsames Stundenraster: Etikett | Stunden (--std, je nach SU/SA 8–23) | Zusammenfassung */
.ck-raster { display: grid; grid-template-columns: var(--et) repeat(var(--std, 15), minmax(0, 1fr)) var(--su); }
/* Die Nacht ohne Summenspalte: die Stunden bekommen die Breite */
.ck-nacht-raster { grid-template-columns: var(--et) repeat(var(--std, 15), minmax(0, 1fr)); }
.ck-raster > * { min-width: 0; }
.ck-et { color: var(--t2); padding-right: 6px; display: flex; flex-direction: column; justify-content: center; line-height: 1.12; border-top: 1px solid var(--linie); min-height: var(--zeile); }
.ck-et small { color: var(--t3); }
.ck-z { display: flex; align-items: center; justify-content: center; gap: 2px; border-top: 1px solid var(--linie); min-height: var(--zeile); white-space: nowrap; position: relative; }
.ck-su { border-top: 1px solid var(--linie); border-left: 1px solid var(--linie); padding: 0 0 0 10px; display: flex; align-items: center; gap: 6px; min-height: var(--zeile); white-space: nowrap; overflow: hidden; }
.ck-achse, .ck-raster > .ck-et:first-child { border-top: 0; color: var(--t3); min-height: 18px; }
.ck-z.ck-achse.ck-mitternacht { color: var(--t1); font-weight: 600; }
.ck-mitternacht { box-shadow: inset 1px 0 0 var(--linie2); }
.ck-mehrzeilig { flex-direction: column; align-items: flex-start; justify-content: center; gap: 1px; white-space: normal; line-height: 1.25; }
.ck-tag { background-image: var(--tag-schraffur); }

/* Ereignismarken */
.ck-marken { grid-column: span var(--std, 15); position: relative; height: calc(var(--reihen, 1) * 19px + 3px); }
.ck-marke { position: absolute; top: calc(var(--reihe) * 19px + 2px); translate: -50% 0; height: 17px; line-height: 17px; padding: 0 4px;
    border-radius: 3px; font-weight: 700; font-size: 0.86em; white-space: nowrap; }
/* Fallinie durch alle Zeilen der Nacht, damit man das Wetter zum Zeitpunkt ablesen kann; endet am Rasterende */
.ck-nacht-raster { position: relative; overflow: clip; } /* clip statt hidden: sonst hielten die festen Köpfe nicht */
.ck-marke::after { content: ""; position: absolute; left: 50%; top: 100%; height: 2000px; border-left: 1px dashed var(--linie-farbe); opacity: 0.45; pointer-events: none; }
/* am Rand nach innen ausgerichtet; die Fallinie bleibt an der Uhrzeit */
.ck-marke--links { translate: 0 0; } .ck-marke--links::after { left: 0; }
.ck-marke--rechts { translate: -100% 0; } .ck-marke--rechts::after { left: auto; right: 0; }
.ll-e-sonne { --linie-farbe: var(--ll-e-sonne); } .ll-e-bl { --linie-farbe: var(--ll-e-bl); } .ll-e-mond { --linie-farbe: var(--ll-e-mond); }

/* Helligkeitsbalken */
.ck-balken { height: var(--balken); flex-direction: column; justify-content: flex-end; gap: 2px; padding: 0 2px; }
.ck-bar { display: block; width: 100%; border-radius: 3px 3px 0 0; }
.ck-bw { font-weight: 600; line-height: 1; font-size: 0.93em; }
.ck-st0 .ck-bw { color: var(--t3); font-weight: 400; }
.ck-st1 .ck-bw, .ck-tk1 { color: var(--tk1); } .ck-st2 .ck-bw, .ck-tk2 { color: var(--tk2); }
.ck-st3 .ck-bw, .ck-tk3 { color: var(--tk3); } .ck-st4 .ck-bw, .ck-tk4 { color: var(--tk4); }
.ck-balken-summe b { font-size: 1.15em; }
.ck-mondstand { flex-direction: column; gap: 0; line-height: 1.05; padding: 2px 0; }
.ck-mondstand small { color: var(--t2); }

/* Wetterzeilen */
.ck-wx .ll-symbol { width: 19px; height: 19px; color: var(--symbol); }
.ck-wx .ll-wetter--sonne, .ck-wx .ll-wetter--teilsTag { color: var(--c-sonne); }
.ck-wx .ll-wetter--mond, .ck-wx .ll-wetter--teilsNacht { color: var(--c-mond); }
.ck-wx .ll-wetter--gewitter, .ck-wx .ll-wetter--gefrierend { color: var(--warn); }
.ck-gefuehlt::after { content: ""; position: absolute; top: 3px; right: 3px; width: 4px; height: 4px; border-radius: 50%; background: var(--t2); }
.ll-windpfeil { display: inline-grid; }
.ll-windpfeil .ll-symbol { width: 12px; height: 12px; }
.ck-wind { gap: 1px; }
/* Lange Nächte (bis 22 Spalten, Bereich bis 62° N seit 2026-11-06): in schmalen Zellen Pfeil über der Zahl, sonst verdeckt er sie */
.ck-nacht-raster .ck-z.ck-wind { container-type: inline-size; }
@container (max-width: 33.9px) { .ck-wind > .ck-zi { flex-direction: column; gap: 0; line-height: 1.05; padding: 1px 0; } }
.ll-stufe-dezent { color: var(--akzent); }
.ll-stufe-stark { color: var(--stark); font-weight: 600; }
.ll-stufe-sturm { color: var(--warn); font-weight: 700; }
.ck-menge { color: var(--menge); }
.ll-regen--leicht { color: var(--regen1); } .ll-regen--maessig { color: var(--regen2); font-weight: 600; } .ll-regen--stark { color: var(--regen3); font-weight: 700; }
.ll-schnee { color: var(--schnee); }
.ck-menge.ll-regen--kein { color: var(--t3); }
.ck-wolken { color: var(--t2); }
.ck-sicht-dunst { background: rgb(160 168 178 / 0.16); }
.ck-sicht-nebel { background: rgb(200 206 214 / 0.30); }
.ck-druck .ll-symbol { width: 18px; height: 18px; color: var(--t2); }
.ck-warn, .ck-frost { display: inline-block; padding: 0 5px; border-radius: 2px; font-weight: 600; line-height: 17px; }
.ck-warn { border: 1px solid var(--warn); color: var(--warn); }
.ck-frost { border: 1px solid var(--frost); color: var(--frost); }
.ck-schnee { display: inline-block; padding: 0 5px; border-radius: 2px; font-weight: 600; line-height: 17px; border: 1px solid var(--schnee); color: var(--schnee); }
.ck-alt { color: var(--warn); }
.ck-ohne { display: flex; align-items: center; border-top: 1px solid var(--linie); color: var(--t3); padding-left: 8px; min-height: calc(var(--zeile) * 2); }

/* Solunar auf der Nachtachse */
.ck-solunar { grid-column: span var(--std, 15); position: relative; border-top: 1px solid var(--linie); min-height: 32px; }
.ck-spanne { position: absolute; top: 3px; bottom: 3px; border-radius: 4px; display: flex; align-items: center; justify-content: center; overflow: hidden; white-space: nowrap; font-size: 0.9em; }
.ck-spanne--eng { flex-direction: column; line-height: 1; font-size: 0.82em; }
.ck-spanne:not(.ck-spanne--eng) .ck-bis::before { content: "–"; }
.ck-betont { font-weight: 700; }
.ll-sterne { gap: 1px; }
.ll-stern { width: 13px; height: 13px; }
.ll-stern--leer, .ll-stern-rand { stroke: var(--t3); }

/* Nächste Nächte */
.ck-naechte-raster .ck-et, .ck-naechte-raster .ck-z, .ck-naechte-raster .ck-su { min-height: var(--nzeile); }
.ck-nknopf { border: 0; background: none; color: var(--t1); font: inherit; text-align: left; padding: 0 0 0 4px; cursor: pointer; height: 100%; display: flex; align-items: center; gap: 4px; border-radius: 4px; }
.ck-nknopf:hover { color: var(--akzent); }
.ck-nknopf[aria-pressed="true"] { background: var(--akzent-flaeche, var(--akzent)); color: var(--akzent-tinte, #1b1406); padding-right: 4px; }
.ck-nknopf[aria-pressed="true"] .ck-wt { color: inherit; }
.ck-wt { color: var(--t2); width: 1.5em; display: inline-block; }
.ck-sonntag .ck-wt { color: var(--ll-markierung); }
.ck-nz { padding: 1px; }
.ck-nz > i { display: grid; place-items: center; width: 100%; height: 100%; border-radius: 2px; font-style: normal; font-weight: 500; font-size: 0.92em; }
/* Schmale Stundenspalten (8–23 Stunden je nach SU/SA, Jörg 2026-11-01): kleinere Werte, unter 18 px nur die Farbe
   (Wert im Hinweis) und auf der Achse nur gerade Stunden */
.ck-naechte-raster .ck-nz, .ck-naechte-raster .ck-achse[data-std] { container-type: inline-size; }
@container (max-width: 23.9px) { .ck-nz > i { font-size: 0.74em; letter-spacing: -0.03em; } .ck-achs-zahl { font-size: 0.86em; letter-spacing: -0.03em; } }
@container (max-width: 17.9px) { .ck-nz > i { font-size: 0; } .ck-achs-zahl--ungerade { visibility: hidden; } }
/* Niederschlag mit Tropfen statt Wort (Jörg 2026-10-31: Spalte war unnötig breit) */
.ck-nsum { display: grid; grid-template-columns: 50px 106px 58px minmax(46px, 1fr); column-gap: 4px; padding-left: 8px; }
.ck-nsum > span { white-space: nowrap; overflow: hidden; }
.ck-nwetter { display: inline-flex; align-items: center; gap: 3px; }
.ck-nwetter .ll-symbol { width: 17px; height: 17px; color: var(--symbol); flex: none; }
.ck-nwetter small { color: var(--t3); }
.ck-nwetter .ll-temp, .ck-temp .ll-temp { padding: 0 3px; }
/* Temperaturen der Nächte gleich breit, Ziffern rechtsbündig */
.ck-nwetter .ll-temp { min-width: 2.5em; }

/* Sonne & Mond */
.ck-zeiten { width: 100%; border-collapse: collapse; }
.ck-zeiten th, .ck-zeiten td { padding: 0; height: 21px; border-top: 1px solid var(--linie); font-weight: 400; }
.ck-zeiten thead th { border-top: 0; color: var(--t3); font-weight: 400; text-align: right; height: 20px; padding-left: 8px; white-space: nowrap; }
.ck-zeiten tbody th { text-align: left; color: var(--t2); padding-left: 38px; text-indent: -38px; } /* bricht nur um, wenn die Sprache längere Bezeichnungen hat (hu bei 1280 px); 2. Zeile bündig hinter dem Kürzel */
.ck-zeiten .ck-code { text-indent: 0; }
.ck-zeiten td { text-align: right; color: var(--t1); font-weight: 600; font-size: 1.07em; padding-left: 8px; white-space: nowrap; }
.ck-zeiten td small { color: var(--t3); font-weight: 400; font-size: 0.8em; }
.ck-code { display: inline-block; min-width: 31px; margin-right: 7px; padding: 0 3px; border-radius: 3px; text-align: center; font-weight: 700; line-height: 18px; font-size: 0.9em; }
.ck-phase { display: inline-flex; align-items: center; gap: 5px; }
.ll-mondphase { width: 15px; height: 15px; }
.ll-mondphase-dunkel { fill: var(--phase-dunkel); }
.ll-mondphase-hell { fill: var(--phase-hell); }
.ck-hmknopf { border: 1px solid var(--hm-rand); border-radius: 4px; background: var(--hm-grund); color: var(--hm-text); font: inherit; font-weight: 600; cursor: pointer; padding: 0 5px; line-height: 1.3; }
.ck-hmknopf:hover { border-color: var(--hm-text); }
@media (pointer: coarse) { .ck-hmknopf { padding: 3px 7px; } } /* Tippziel */

/* Monatsfeld im schmalen Paneel */
.ck-monat .ll-monat-kopf { margin-bottom: 6px; gap: 6px; }
.ck-monat .ll-reiter { gap: 2px; }
.ck-monat .ll-reiter [role="tab"] { min-height: 26px; padding: 0 7px; font-size: 0.92em; }
.ck-monat .ll-monat-nav { margin-left: auto; gap: 4px; }
.ck-monat .ll-monat-nav .ll-knopf--symbol { width: 26px; min-height: 26px; }
.ck-monat .ll-monat-titel { min-width: 7.5em; font-size: 14px; }
.ck-monat .ll-tabelle { font-size: 0.86em; }
.ck-monat .ll-tabelle th, .ck-monat .ll-tabelle td { padding: 0 3px; height: 13px; line-height: 13px; border-bottom: 0; }
.ck-monat .ll-tabelle tbody th { font-size: 0.95em; }
.ck-monat .ll-tabelle thead th { background: var(--pan); }
/* Helligkeit: feste Spalten, damit das Raster beim Blättern nicht springt */
.ck-monat .ll-tabelle--hell { table-layout: fixed; }
/* Klick auf einen Helligkeitswert (Monat, Heute Nacht) öffnet die Monatsübersicht mit Werten (Popup) */
#nacht .ck-balken:not(.ck-tag), #ck-std-liste .ck-kp-licht:not(.ck-kp-tag), .ck-monat .ll-tabelle--hell td.ll-std:not(.ll-sonne) { cursor: pointer; }
.ck-monat .ll-tabelle--hell th:first-child { width: 70px; }
.ck-monat .ll-tabelle--hell .ll-max { width: 30px; text-align: right; padding: 0 0 0 4px; }
.ll-max--1 { color: var(--tk1); } .ll-max--2 { color: var(--tk2); } .ll-max--3 { color: var(--tk3); } .ll-max--4 { color: var(--tk4); }
.ck-monat .ll-tabelle--solunar td { padding: 0 2px; }
.ck-monat .ll-tabelle--hell td.ll-std { font-size: 0; min-width: 0; padding: 1px 0.5px; background-clip: content-box; }
.ck-monat .ll-tabelle--hell th[scope="col"]:not(:first-child) { font-size: 0.8em; color: var(--t3); padding: 0; }
.ck-monat .ll-tabelle--hell thead th.ll-ug:not(:first-child) { color: transparent; }
.ck-monat .ll-tag-knopf { padding: 0 3px; }
.ck-monat .ll-streifen-kopf, .ck-monat .ll-streifen { display: none; }
/* Sonne & Mond: feste, gleich breite Spalten, Wochen abwechselnd hinterlegt und mit Abstand abgesetzt */
.ck-monat .ll-tabelle--sonnemond { table-layout: fixed; }
.ck-monat { --ll-sm-heute-breite: 1px; }
.ck-monat .ll-tabelle--sonnemond th:first-child, .ck-monat .ll-sp-tag { width: 44px; }
/* MP mit Mondsymbol und bis zu „100“ (fett am HM-Tag) braucht mehr Platz als die Zeiten (Jörg 2026-10-31: Spalte zu schmal);
   Werte mit wenig Innenabstand, damit auch in der 300-px-Spalte alle Zeiten passen */
.ck-monat .ll-sp-mp { width: 42px; }
.ck-monat .ll-sp-streifen { width: 0; visibility: collapse; } /* Streifen ist im Cockpit ausgeblendet */
.ck-monat .ll-tabelle--sonnemond td.ll-sm { padding: 0 1px; }
.ck-monat .ll-tabelle--sonnemond tr.ll-woche-b > :not(.ll-sm) { background: var(--pan2); }
.ck-monat .ll-tabelle--sonnemond tr.ll-wochenstart > * { border-top: 4px solid var(--pan); }
.ck-monat .ll-legende { display: none; }
/* Sonne & Mond, Solunar: Zeilen 20 px (Jörg 2026-10-31: waren zu niedrig) */
.ck-monat .ll-tabelle--sonnemond :is(th, td) { height: 20px; line-height: 18px; padding-bottom: 2px; }
/* Köpfe von Sonne & Mond und Solunar mit Luft (Jörg 2026-10-31: wirkten gequetscht) */
.ck-monat :is(.ll-tabelle--sonnemond, .ll-tabelle--solunar) thead th { height: auto; line-height: 1.25; padding-top: 3px; padding-bottom: 3px; }
.ck-monat .ll-tabelle thead .ll-gruppen th { height: auto; line-height: 1.25; padding-top: 5px; padding-bottom: 4px; }
/* Solunar wie Sonne & Mond (Jörg 2026-10-31): Wochenblöcke mit Abstand, jede zweite Woche schattiert, keine Linie je Zeile */
.ck-monat .ll-tabelle--solunar :is(th, td) { height: 20px; line-height: 18px; padding-bottom: 2px; border-bottom: 0; }
.ck-monat .ll-tabelle--solunar tr.ll-woche-b > :not(.ll-major, .ll-minor) { background: var(--pan2); }
.ck-monat .ll-tabelle--solunar tr.ll-woche-b > :is(.ll-major, .ll-minor) { filter: brightness(0.9); }
.ck-monat .ll-tabelle--solunar tr.ll-wochenstart > * { border-top: 4px solid var(--pan); }
.ck-monat .ll-mitternacht { border-left-width: 1px !important; }
.ck-monat .ll-relief canvas { height: 420px; }
.ck-monat .ll-relief-reihe { font-size: 0.66em; }

/* Stundenzeiger */
.ck-zeiger { box-shadow: inset 0 0 0 100px rgb(242 177 58 / 0.14); }
.ck-achse.ck-zeiger, th.ck-zeiger { color: var(--akzent) !important; font-weight: 700; box-shadow: none; }
.ck-nz.ck-zeiger > i, td.ck-zeiger { outline: 1px solid var(--akzent); outline-offset: -1px; }

/* Fenster im Cockpit-Ton */
.ll-dialog { background: var(--pan2); border-color: var(--linie2); }
.ll-wetter-kopf { margin-bottom: 10px; }
.ll-tabelle--wetter .ll-symbol, .ll-tabelle--wettertage .ll-symbol { width: 18px; height: 18px; vertical-align: -4px; }
.ll-wetter-tag th { text-align: left !important; padding-top: 10px !important; color: var(--t1); }
.ll-wetter-tagwerte { color: var(--t2); font-weight: 400; margin-left: 8px; }
.ll-mondwert { padding: 0 4px; border-radius: 3px; }
.ll-bl { color: var(--c-bl); font-weight: 700; }
.ll-solunar-zelle { display: inline-block; width: 14px; height: 14px; border-radius: 3px; text-align: center; line-height: 14px; }
.ll-sicht-dunst { background: rgb(160 168 178 / 0.16); }
.ll-sicht-nebel { background: rgb(200 206 214 / 0.30); }
.ll-info { background: var(--info-grund); border: 1px solid var(--info-linie); color: #f2f1ec; } /* dunkel heller als Fenster und Karten, sonst ein Loch (Jörg 11.11.) */

/* Fußzeile mit Luft, abgesetzte Fläche */
.ll-fuss { border-top: 1px solid var(--rahmen-linie); }
.ll-fuss-zaehler { color: var(--t2); }

/* Mittlere Breiten: Seitenspalten schmaler, damit die 15 Stunden lesbar bleiben */
@media (max-width: 1400px) {
    :root { --su: 244px; --et: 72px; }
    .ck-deck { grid-template-columns: 360px minmax(0, 1fr) 300px; } /* links 60 px breiter (Jörg 2026-11-08) */
    .ck-nsum { grid-template-columns: 42px 106px 50px minmax(38px, 1fr); column-gap: 2px; padding-left: 4px; }
    .ck-nsum--kopf, .ck-achse.ck-nsum { font-size: 0.82em; }
    /* schmale Mitte: Werte der Stundenfelder kleiner, damit sie nicht ineinanderlaufen */
    .ck-nz > i { font-size: 0.74em; letter-spacing: -0.03em; }
    .ck-nsum .ll-stern { width: 12px; height: 12px; }
    /* Monat Solunar in der 300-px-Spalte ohne seitliches Wischen (lief 3 px über) */
    .ck-monat .ll-tabelle--solunar td { padding: 0 1px; }
}
/* Schmale Bildschirme: Spalten untereinander (Handy folgt in Phase 8) */
@media (max-width: 1180px) {
    .ck-deck { grid-template-columns: 228px minmax(0, 1fr); }
    .ck-rechts { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}
/* schmale linke Spalte (228 px): Standortauswahl in eigener Zeile, Buttons darunter (sonst nur 26 px breit) */
@media (min-width: 821px) and (max-width: 1180px) { .ck-links .ll-platzwahl { flex-wrap: wrap; } .ck-links .ll-platzwahl-feld { flex-basis: 100%; } }
@media (max-width: 820px) {
    .ck-deck { grid-template-columns: minmax(0, 1fr); padding: var(--lueck) 10px; }
    .ck-mitte { order: -2; } .ck-rechts { order: -1; }
    .ck-rechts { grid-template-columns: minmax(0, 1fr); }
    .ck-mitte .ck-paneel { overflow-x: auto; }
    .ck-raster { min-width: 760px; }
    .ck-werkzeuge { margin-left: 0; flex: 1 1 100%; justify-content: space-between; gap: 4px; }
    /* Kopf dreizeilig statt vierzeilig (Jörg 2026-11-01): Designwahl rechts neben dem Logo */
    .ck-kopf { position: relative; row-gap: 8px; padding-top: 8px; }
    .ck-logo { min-height: 36px; }
    .ck-werkzeuge .ll-designwahl { position: absolute; top: 8px; right: 14px; width: 7.6em; }
    /* Reihenfolge (Jörg 2026-11-01): Standortwahl oben, dann Nacht, nächste Nächte, Sonne & Mond, Karte, Monat (Legende seit 11.11. als Blase) */
    .ck-spalte { display: contents; }
    .ck-deck > .ck-plaetze-oben { display: block; order: 0; padding: 8px 10px; }
    .ck-erst, .ck-nacht { order: 1; } .ck-naechte { order: 2; } .ck-zeiten { order: 3; }
    .ck-standort { order: 4; } .ck-monat { order: 5; }
    /* Titel einzeilig, Unterzeile darunter in voller Breite */
    .ck-ph { flex-wrap: wrap; row-gap: 2px; }
    .ck-ph h2 { white-space: nowrap; }
    .ck-ph .ck-unter { order: 3; flex: 1 1 100%; white-space: normal; line-height: 1.6; } /* Handy: umbrechen, sonst fielen Warnungen hinter „…“ weg */
}
.ck-plaetze-oben { display: none; }
.ck-nur-handy { display: none; }
@media (max-width: 820px) { .ck-nur-pc { display: none; } .ck-nur-handy { display: inline; } }

/* Fallinien laufen hinter den Werten: Wert und Balkenzahl decken die Linie ab, im Farbton der Zelle (--zi) */
.ck-zi, .ck-nacht-raster .ck-bw { background: var(--zi, var(--pan)); padding: 0 1px; border-radius: 2px; }
.ck-zi { display: inline-flex; flex-direction: inherit; align-items: center; gap: inherit; line-height: inherit; }
.ck-sicht-dunst { --zi: color-mix(in srgb, var(--pan), rgb(160 168 178) 16%); }
.ck-sicht-nebel { --zi: color-mix(in srgb, var(--pan), rgb(200 206 214) 30%); }
.ck-zeiger > .ck-zi, .ck-zeiger > .ck-bw { background: color-mix(in srgb, var(--zi, var(--pan)), rgb(242 177 58) 14%); }

/* Feste Köpfe (Jörg 2026-10-30): Beschriftung links bleibt beim seitlichen Wischen stehen, die Stundenachse oben */
.ck-raster > .ck-et { position: sticky; left: 0; z-index: 5; background: var(--pan); box-shadow: calc(-1 * var(--pol)) 0 0 var(--pan); } /* deckt auch den Innenabstand links */
.ck-raster > .ck-achse { position: sticky; top: 0; z-index: 4; background: var(--pan); }
.ck-raster > .ck-et:first-child { top: 0; z-index: 6; }

/* Mondhelligkeit je Stunde: Wert als Plakette in der Stufenfarbe (gleich groß, auch bei kleinen Werten auf einen Blick
   erkennbar, Rückmeldung 2026-10-30), der Balken darunter zeigt die Höhe */
.ck-nacht-raster .ck-balken .ck-bw { width: 100%; padding: 3px 0; border-radius: 3px; text-align: center; background: var(--chip); color: var(--chip-text); }
.ck-balken.ck-st0 { --chip: var(--ll-h0); --chip-text: var(--ll-h0-text); }
/* Streifen der Schraffur (.ll-verdeckt) passend zur Stufe des Chips */
.ck-balken.ck-st1 .ck-bw { --vs: var(--ll-vs1); } .ck-balken.ck-st2 .ck-bw { --vs: var(--ll-vs2); }
.ck-balken.ck-st3 .ck-bw { --vs: var(--ll-vs3); } .ck-balken.ck-st4 .ck-bw { --vs: var(--ll-vs4); }
.ck-balken.ck-st1 { --chip: var(--ll-h1); --chip-text: var(--ll-h1-text); }
.ck-balken.ck-st2 { --chip: var(--ll-h2); --chip-text: var(--ll-h2-text); }
.ck-balken.ck-st3 { --chip: var(--ll-h3); --chip-text: var(--ll-h3-text); }
.ck-balken.ck-st4 { --chip: var(--ll-h4); --chip-text: var(--ll-h4-text); box-shadow: none; }
.ck-nacht-raster .ck-balken.ck-st4 .ck-bw { box-shadow: inset 0 0 0 1px var(--linie2); }

/* Handy (Jörg 2026-10-31, statt Kompakt): bis 820 px die Nacht als Instrumentenliste und die nächsten Nächte als Tabelle statt Raster, kein seitliches Wischen.
   Spalten nach Vorrang (.ck-p2 ab 480 px, .ck-p3 ab 600 px, .ck-p4 ab 760 px) */
.ck-std-liste { display: none; }
@media (max-width: 820px) {
    .ck-nacht-raster, .ck-naechte-raster { display: none; }
    .ck-std-liste { display: block; }
}

.ck-kp-stunden { position: relative; }
.ck-kp-stunden, .ck-kp-nliste { container-type: inline-size; }
.ck-kp-tab { width: 100%; border-collapse: collapse; }
.ck-kp-tab th, .ck-kp-tab td { height: 30px; padding: 0 4px; border-top: 1px solid var(--linie); text-align: center; white-space: nowrap; font-weight: 400; }
.ck-kp-tab thead th { position: sticky; top: 0; z-index: 2; height: auto; padding-bottom: 5px; border-top: 0; background: var(--pan); color: var(--t3); font-size: 0.9em; line-height: 1.15; vertical-align: bottom; white-space: normal; }
.ck-kp-tab thead small { display: block; font-size: 0.86em; }
.ck-kp-tab tbody th { padding-right: 8px; color: var(--t2); font-weight: 600; text-align: right; }
.ck-kp-tab .ck-kp-mitternacht > * { border-top: 1px solid var(--t3); }
/* Kürzel SU, BL−, BL+, SA neben der Stunde (Jörg 2026-11-04): Stunde rechtsbündig, Kürzel in fester Spalte daneben; zwei untereinander */
.ck-kp-tab tbody th.ck-kp-uhr { padding-right: 3px; text-align: left; }
.ck-kp-std { display: inline-block; min-width: 1.1em; text-align: right; vertical-align: middle; }
.ck-kp-marken { display: inline-flex; flex-direction: column; gap: 1px; width: 22px; margin-left: 3px; vertical-align: middle; }
.ck-kp-marke { height: 15px; border-radius: 3px; font-size: 9.5px; font-weight: 700; line-height: 15px; text-align: center; }
.ck-kp-marken--zwei .ck-kp-marke { height: 13px; font-size: 9px; line-height: 13px; }
.ck-kp-tab tbody tr:hover > * { background-color: var(--akzent-weich); }

.ck-kp-licht { width: 30%; text-align: left !important; }
.ck-kp-wert { display: inline-block; min-width: 2.7em; padding: 0 3px; border-radius: 3px; font-weight: 700; line-height: 21px; text-align: center; }
.ck-kp-wert.ll-h4 { box-shadow: inset 0 0 0 1px var(--linie2); }
.ck-kp-bar { display: inline-block; width: calc(100% - 3.6em); height: 8px; margin-left: 6px; border-radius: 2px; background: var(--pan2); vertical-align: middle; overflow: hidden; }
.ck-kp-bar i { display: block; height: 100%; }
.ck-kp-tag { background-image: var(--tag-schraffur); color: var(--t3); }
.ck-kp-tag span { display: inline-block; min-width: 2.7em; text-align: center; }
.ck-kp-mond small { margin-left: 3px; color: var(--t3); }

.ck-kp-tab .ck-wx .ll-symbol { width: 21px; height: 21px; vertical-align: middle; }
.ck-kp-tab .ck-wind { color: var(--t1); }
.ck-kp-tab .ck-wind .ll-windpfeil { margin-right: 3px; vertical-align: middle; }
.ck-kp-tab .ll-temp { display: inline-block; min-width: 2.3em; padding: 0 3px; text-align: center; }
.ck-kp-sicht { display: inline-flex; align-items: center; gap: 2px; color: var(--t2); }
.ck-kp-sicht .ll-symbol { width: 16px; height: 16px; }
.ck-kp-sicht--nebel { color: var(--t1); font-weight: 600; }
.ck-kp-sicht small { font-size: 0.8em; }
.ck-kp-solzelle { padding: 0 !important; width: 3.8em; }
.ck-kp-sol { display: flex; align-items: center; justify-content: center; height: 100%; min-height: 29px; font-weight: 600; }
.ck-kp-sol small { font-size: 0.78em; }
.ck-kp-ohne { min-height: 0; padding: 8px; border-top: 0; }

.ck-kp-naechte th, .ck-kp-naechte td { height: 32px; }
.ck-kp-naechte tbody th { text-align: left; }
.ck-kp-naechte .ck-nknopf { padding: 0 4px 0 0; }
.ck-kp-naechte small { color: var(--t3); }
/* Verlauf gleich breit, egal wie viele Stunden (--std) */
.ck-kp-verlauf { display: inline-grid; grid-template-columns: repeat(var(--std, 15), minmax(0, 1fr)); gap: 1px; width: 119px; vertical-align: middle; }
.ck-kp-verlauf i { height: 16px; border-radius: 1px; }
.ck-kp-verlauf i.ck-tag { background: var(--pan2) var(--tag-schraffur); }
.ck-kp-nwetter .ll-symbol { width: 19px; height: 19px; margin-right: 2px; vertical-align: middle; color: var(--symbol); }
.ck-kp-nwetter small { margin: 0 1px; }
.ck-kp-tab .ll-sterne { color: var(--ll-stern); }

@media (max-width: 380px) { .ck-kp-naechte { font-size: 0.92em; } .ck-kp-naechte .ck-kp-wert { min-width: 2.3em; } }
/* Nächste Nächte ohne Überstand (gemessen 2026-11-01: 4 px bei 360/390 px, 12 px bei 640 px, 44 px bei 320 px; Sterne rechts angeschnitten) */
.ck-kp-naechte tbody th { padding-right: 4px; }
.ck-kp-naechte td.ll-kp-links { padding-left: 4px !important; } /* bausteine.css setzt 8 px mit !important */
@container (max-width: 640px) { .ck-kp-naechte .ck-kp-verlauf { width: 100px; } }
@container (max-width: 310px) {
    .ck-kp-naechte { font-size: 0.84em; }
    .ck-kp-naechte .ll-temp { min-width: 1.9em; padding: 0 2px; }
    .ck-kp-naechte .ck-kp-wert { min-width: 2.1em; }
    .ck-kp-naechte .ck-kp-nwetter .ll-symbol { width: 16px; height: 16px; margin-right: 1px; }
}
@media (max-width: 759px) { .ck-kp-tab .ck-p4 { display: none; } }
@media (max-width: 599px) { .ck-kp-tab .ck-p3 { display: none; } }
@container (max-width: 720px) { .ck-kp-tab .ck-p4 { display: none; } }
@container (max-width: 580px) { .ck-kp-tab .ck-p3 { display: none; } }
@container (max-width: 460px) { .ck-kp-tab .ck-p2 { display: none; } }
/* Handy: in der Spalte Sicht nur das Symbol, das Wort steht im Hinweis (sonst zu breit, z. B. uk „Серпанок“ bei 390 px; 2026-11-10) */
.ck-kp-sichtsymbol { display: none; }
.ck-kp-sichtsymbol .ll-symbol { width: 16px; height: 16px; vertical-align: middle; }
@container (max-width: 460px) { .ck-kp-sicht small, .ck-kp-sichttext { display: none; } .ck-kp-sichtsymbol { display: inline; } }
@media (max-width: 479px) {
    .ck-kp-tab .ck-p2 { display: none; }
    .ck-mitte .ck-paneel { padding: 8px 6px; }
    .ck-kp-tab th, .ck-kp-tab td { padding: 0 2px; }
    .ck-kp-sicht small { display: none; }
    .ck-kp-solzelle { width: 2.9em; }
    .ck-kp-bis { display: none; }
    .ck-kp-licht { width: auto; }
    /* Platz für die Kürzel neben der Stunde (2026-11-04): Wertfelder etwas schmaler */
    .ck-kp-tab .ll-temp { min-width: 2em; }
    .ck-kp-wert, .ck-kp-tag span { min-width: 2.3em; }
    .ck-kp-bar { width: 26px; }
    .ck-kp-sterne .ll-stern { width: 11px; height: 11px; }
    .ck-kp-nwetter small { margin: 0; }
}
/* sehr schmale Handys (360 px): Nachtliste ohne seitliches Wischen */
@media (max-width: 380px) {
    .ck-mitte .ck-paneel { padding: 8px 4px; }
    .ck-kp-tab :is(td, th).ll-kp-links { padding-left: 3px; }
    .ck-kp-bar { width: 18px; margin-left: 4px; }
    /* Spalte Sicht (Nebel/Dunst) passte bei 360 px nicht ganz (2026-11-04: +2 px) */
    .ck-kp-tab:not(.ck-kp-naechte) :is(th, td) { padding: 0 1px; }
}
/* Handys unter 350 px (320/340): „Heute Nacht“ ohne angeschnittene Solunar-Spalte (gemessen 2026-11-04: +39 px bei 320, +19 bei 340) */
@media (max-width: 349px) {
    .ck-kp-tab:not(.ck-kp-naechte) { font-size: 0.9em; }
    .ck-kp-tab:not(.ck-kp-naechte) :is(th, td) { padding: 0 1px; }
    .ck-kp-tab .ck-wx .ll-symbol { width: 18px; height: 18px; }
    .ck-kp-tab .ll-temp { min-width: 1.8em; padding: 0 2px; }
    .ck-kp-wert, .ck-kp-tag span { min-width: 2.1em; }
    .ck-kp-bar { width: 12px; margin-left: 3px; }
}

/* Finsternis im Kopf der Nacht (js/finsternis.js), wie die Schnee-Marke */
.ck-fin { display: inline-block; padding: 0 5px; border-radius: 2px; font-weight: 600; line-height: 17px; border: 1px solid var(--ll-fin); color: var(--ll-fin); white-space: nowrap; }
.ck-ph-r .ll-fin-knopf { width: 30px; padding: 0; } /* Nächste Finsternisse (2026-11-11) */

/* Linke Spalte (Jörg 11.11.2026, PC ab 1181 px): Länge, Breite, Locator, Fixiert in einer Zeile; die Legende ist eine Blase an „Legende“
   neben „Die nächsten 9 Nächte“ (cockpit.js legendeAlsTipp), dafür füllt die Karte die Spalte bis zur Höhe der Mitte (mindestens 500 px).
   Ab 1401 px linke Spalte breiter (darunter würde die Mitte zu schmal: Solunar-Zeit verschwindet, Feuchte „100100“) */
.ck-legende-r { color: var(--t2); }
@media (min-width: 1181px) {
    .ck-links { align-self: stretch; }
    .ck-standort { flex: 1; display: flex; flex-direction: column; }
    .ck-standort .ck-karte { flex: 1 1 500px; height: auto; min-height: 500px; }
    #koordinaten { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1.15fr) minmax(0, 0.9fr) auto; gap: 4px 8px; }
    #koordinaten label:nth-child(3) { grid-column: auto; }
}
@media (min-width: 1401px) {
    .ck-deck { grid-template-columns: clamp(440px, 28vw, 600px) minmax(0, 1fr) clamp(336px, 21vw, 480px); }
}