/* Gemeinsame Bausteine: Aufbau und Verhalten. Farben, Schrift und Maße kommen aus den Variablen,
   die jedes Design in designs/<name>/design.css setzt; die Werte hier sind neutrale Vorgaben. */

/* Grundschrift IBM Plex Sans (Jörg 2026-11-02; OFL, schrift/OFL-IBMPlex.txt, npm @ibm/plex-sans 1.1.0, Teil-Dateien Latin1 + Pi).
   Ihre Ziffern sind von sich aus gleich breit: Zahlen stehen bündig, eine Monospace braucht es nicht (falls doch: Intel One Mono, Jörg). */
@font-face { font-family: "Plex Sans"; src: url("../schrift/IBMPlexSans-Regular-Latin1.woff2") format("woff2"); font-weight: 400; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2013-2014, U+2018-201A, U+201C-201E, U+2020-2022, U+2026, U+2030, U+2039-203A, U+2044, U+2074, U+20AC, U+2122, U+2212, U+FB01-FB02; }
@font-face { font-family: "Plex Sans"; src: url("../schrift/IBMPlexSans-Regular-Pi.woff2") format("woff2"); font-weight: 400; font-display: swap; unicode-range: U+2032-2033, U+2070, U+2075-2079, U+2080-2089, U+2113, U+2116, U+2126, U+212E, U+2150-215E, U+2190-2199, U+21A9-21BB, U+21C4, U+21C6, U+2202, U+2206, U+220F, U+2211, U+221A, U+221E, U+222B, U+2248, U+2260, U+2264-2265, U+25CA, U+2713, U+274C; }
@font-face { font-family: "Plex Sans"; src: url("../schrift/IBMPlexSans-SemiBold-Latin1.woff2") format("woff2"); font-weight: 600; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2013-2014, U+2018-201A, U+201C-201E, U+2020-2022, U+2026, U+2030, U+2039-203A, U+2044, U+2074, U+20AC, U+2122, U+2212, U+FB01-FB02; }
@font-face { font-family: "Plex Sans"; src: url("../schrift/IBMPlexSans-SemiBold-Pi.woff2") format("woff2"); font-weight: 600; font-display: swap; unicode-range: U+2032-2033, U+2070, U+2075-2079, U+2080-2089, U+2113, U+2116, U+2126, U+212E, U+2150-215E, U+2190-2199, U+21A9-21BB, U+21C4, U+21C6, U+2202, U+2206, U+220F, U+2211, U+221A, U+221E, U+222B, U+2248, U+2260, U+2264-2265, U+25CA, U+2713, U+274C; }
@font-face { font-family: "Plex Sans"; src: url("../schrift/IBMPlexSans-Bold-Latin1.woff2") format("woff2"); font-weight: 700; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2013-2014, U+2018-201A, U+201C-201E, U+2020-2022, U+2026, U+2030, U+2039-203A, U+2044, U+2074, U+20AC, U+2122, U+2212, U+FB01-FB02; }
@font-face { font-family: "Plex Sans"; src: url("../schrift/IBMPlexSans-Bold-Pi.woff2") format("woff2"); font-weight: 700; font-display: swap; unicode-range: U+2032-2033, U+2070, U+2075-2079, U+2080-2089, U+2113, U+2116, U+2126, U+212E, U+2150-215E, U+2190-2199, U+21A9-21BB, U+21C4, U+21C6, U+2202, U+2206, U+220F, U+2211, U+221A, U+221E, U+222B, U+2248, U+2260, U+2264-2265, U+25CA, U+2713, U+274C; }
/* Latin Extended (Jörg 06.11.2026: Polnisch/Tschechisch; Fontsource 5.3.0 von npm, Prüfsumme geprüft) – nur die Zeichen, die Latin1 fehlen */
@font-face { font-family: "Plex Sans"; src: url("../schrift/IBMPlexSans-Regular-LatinExt.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 Sans"; src: url("../schrift/IBMPlexSans-SemiBold-LatinExt.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 Sans"; src: url("../schrift/IBMPlexSans-Bold-LatinExt.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 (Fontsource 5.3.0 „cyrillic“, für uk) */
@font-face { font-family: "Plex Sans"; src: url("../schrift/IBMPlexSans-Regular-Cyrillic.woff2") format("woff2"); font-weight: 400; font-display: swap; unicode-range: U+0400-045F, U+0490-0491; }
@font-face { font-family: "Plex Sans"; src: url("../schrift/IBMPlexSans-SemiBold-Cyrillic.woff2") format("woff2"); font-weight: 600; font-display: swap; unicode-range: U+0400-045F, U+0490-0491; }
@font-face { font-family: "Plex Sans"; src: url("../schrift/IBMPlexSans-Bold-Cyrillic.woff2") format("woff2"); font-weight: 700; font-display: swap; unicode-range: U+0400-045F, U+0490-0491; }

:root {
    --ll-grund: #f4f3ef;
    --ll-flaeche: #ffffff;
    --ll-text: #1d1d1b;
    --ll-text-2: #57544d;
    --ll-linie: #d6d3ca;
    --ll-akzent: #1f4a7a;
    --ll-akzent-text: #ffffff;
    --ll-kopf-grund: #2b3440;
    --ll-kopf-text: #f1efe8;
    --ll-fuss-grund: #2b3440;
    --ll-fuss-text: #f1efe8;
    --ll-markierung: #c0392b;
    --ll-schrift: "Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
    --ll-schrift-zahl: var(--ll-schrift);
    --ll-radius: 6px;
    --ll-abstand: 12px;

    /* Mondhelligkeit (D-H3): Stufen 1–4 für alle Designs und Classic gleich (Classic-Farben, Betreiber 2026-10-29),
       Schrift passend. h0 (kein Mondlicht) und Tageslicht setzt jedes Design selbst. */
    --ll-h0: #24415b; --ll-h0-text: #c9d4de;
    --ll-h1: #325c81; --ll-h1-text: #ffffff;
    --ll-h2: #4c7aa2; --ll-h2-text: #ffffff; /* Jörg 2026-11-05: weiße Schrift auf etwas dunklerem Blau (Classic #5a90bf mit schwarzer Schrift), 4,6:1 */
    --ll-h3: #a3c1db; --ll-h3-text: #000000;
    --ll-h4: #edf3f8; --ll-h4-text: #000000;
    /* Sonne & Mond im Monat: Spaltenfarben wie Classic (BL, SA/SU, MP, MA/MU) */
    --ll-sm-bl: #fff7cc; --ll-sm-sasu: #ffd700; --ll-sm-mp: #ffffff; --ll-sm-mamu: #a3c1db; --ll-sm-text: #000000; --ll-sm-heute: #e0001b; --ll-sm-heute-breite: 2px;
    --ll-sonne: #fff7cc; --ll-sonne-text: #6b5a12;

    /* Solunar */
    --ll-major: #00e673; --ll-major-text: #10301f;
    --ll-minor: #80ffbf; --ll-minor-text: #10301f;
    --ll-stern: #d9a400;

    /* Ereignisse SU/SA, BL, MA/MU/MP, HM: für alle Designs gleich. Als Füllung mit dunkler Schrift (.ll-e-*),
       so auf hellem und dunklem Grund lesbar; vier klar getrennte Farbtöne. */
    --ll-e-sonne: #ffc53d; --ll-e-bl: #e07cf0; --ll-e-mond: #6fc0ff; --ll-e-hm: #f6f1e4; --ll-e-text: #16181c;

    /* Monatsrelief in allen Designs in der Skala der Mondhelligkeit (Jörg 2026-10-30): dunkel (kein Mondlicht) bis Mondweiß,
       Stufen 1–4 aus --ll-h1…h4 dazwischen gestuft; Höhenlinien dunkel (Messtischblatt: Sepia) */
    --ll-relief-0: #1d2433; --ll-relief-1: #325c81; --ll-relief-2: #43739f; --ll-relief-3: #5a90bf; --ll-relief-4: #7ea8cf;
    --ll-relief-5: #a3c1db; --ll-relief-6: #c4d7e8; --ll-relief-7: #dce7f1; --ll-relief-8: #f3f7fb;
    --ll-relief-schraffur: #c9ced6; --ll-relief-kante: #15171a; --ll-relief-kante-stark: #15171a;
}

.ll-unsichtbar {
    position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}

[hidden] { display: none !important; }

/* Knöpfe: immer als Knopf, nie unterstrichener Link */
.ll-knopf {
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    min-height: 36px; padding: 6px 12px; border: 1px solid var(--ll-linie); border-radius: var(--ll-radius);
    background: var(--ll-flaeche); color: var(--ll-text); font: inherit; font-size: 0.95em; line-height: 1.2;
    text-decoration: none; cursor: pointer; white-space: nowrap;
}
.ll-knopf:hover { border-color: var(--ll-akzent); }
.ll-knopf:focus-visible, .ll-tag-knopf:focus-visible, [role="tab"]:focus-visible, .ll-treffer-eintrag:focus-visible {
    outline: 2px solid var(--ll-akzent); outline-offset: 2px;
}
.ll-knopf:disabled { opacity: 0.5; cursor: default; }
.ll-knopf--haupt { background: var(--ll-akzent); border-color: var(--ll-akzent); color: var(--ll-akzent-text); }
.ll-knopf--symbol { width: 36px; padding: 0; }
/* Kopfschalter (Jörg 2026-10-31): Designwahl links neben hell/dunkel, rechts daneben Symbol-Buttons an/aus */
/* eigener Pfeil (Jörg 2026-10-31): senkrecht mittig, Abstand zum Rand wie links; Rahmen-span trägt Rand und Pfeil */
.ll-designwahl { position: relative; display: inline-flex; height: 36px; max-width: 11em; font-size: 0.92em;
    border: 1px solid color-mix(in srgb, currentColor 35%, transparent); border-radius: var(--ll-radius); }
.ll-designwahl::after { content: ""; position: absolute; right: 13px; top: 50%; width: 6px; height: 6px; pointer-events: none;
    border: solid currentColor; border-width: 0 1.5px 1.5px 0; transform: translateY(-70%) rotate(45deg); }
.ll-designwahl select { flex: 1 1 auto; min-width: 0; height: 100%; padding: 0 32px 0 12px; border: 0; border-radius: inherit;
    -webkit-appearance: none; appearance: none; background: transparent; color: inherit; font: inherit; cursor: pointer; text-overflow: ellipsis; }
.ll-designwahl select:focus-visible { outline: 2px solid var(--ll-akzent); outline-offset: 3px; }
.ll-designwahl option { color: #1d1d1b; background: #ffffff; }
.ll-kopfschalter[aria-pressed="false"] svg { opacity: 0.38; }
.ll-symbol.ll-symbol.ll-tropfen { width: 1.15em; height: 1.15em; vertical-align: -0.22em; }
.ll-kopfschalter[aria-pressed="true"] { box-shadow: inset 0 -3px 0 currentColor; }
/* Ko-fi wie in Classic: blaue Pille mit dem Ko-fi-Becher, oben rechts im Kopf (Jörg 2026-10-31) */
/* Werkzeuge im Kopf (Jörg 2026-10-31): nur Symbole mit Erklärung beim Zeigen; am PC mit Abstand, am Handy über die Zeile verteilt (Designs) */
.ll-werkzeuge .ll-knopf--symbol { position: relative; }
.ll-werkzeuge .ll-punkt { position: absolute; top: 5px; right: 5px; }
.ll-kofi { display: inline-flex; align-items: center; justify-content: center; height: 40px; padding: 0 16px; border-radius: 999px; background: #00b9fe; flex: none; }
.ll-kofi img { display: block; width: 36px; height: auto; }
.ll-kofi:hover { background: #29c6ff; }
.ll-kofi:focus-visible { outline: 2px solid var(--ll-akzent); outline-offset: 2px; }
.ll-knopf svg, .ll-dialog svg, .ll-fuss svg {
    width: 16px; height: 16px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round;
}

.ll-reihe { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.ll-reihe--ende { justify-content: flex-end; }
.ll-wachsen { flex: 1 1 12rem; }

/* Formulare */
.ll-formular { display: grid; gap: var(--ll-abstand); }
.ll-formular label:not(.ll-schalter), .ll-koordinaten label:not(.ll-schalter) { display: grid; gap: 4px; }
.ll-formular label > span, .ll-koordinaten label > span { font-size: 0.85em; color: var(--ll-text-2); }
.ll-dialog input:not([type="checkbox"]), .ll-dialog select, .ll-koordinaten input, .ll-platzwahl select, .ll-datum input {
    min-height: 36px; padding: 6px 8px; border: 1px solid var(--ll-linie); border-radius: var(--ll-radius);
    background: var(--ll-flaeche); color: var(--ll-text); font: inherit; width: 100%; min-width: 0;
}
.ll-schalter { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; }
.ll-schalter input { width: 18px; height: 18px; accent-color: var(--ll-akzent); margin: 0; }
.ll-hinweis, .ll-adresse { margin: 0; font-size: 0.9em; color: var(--ll-text-2); }
.ll-meldung { margin: 8px 0; color: var(--ll-text-2); }
.ll-radar-aussen { display: block; margin-top: 2px; font-size: 0.85em; }
.ll-radar-aussen[hidden] { display: none; }
.ll-koordinaten .ll-bereich-meldung { grid-column: 1 / -1; margin: 2px 0 0; font-size: 0.9em; }
.ll-laden { margin: 8px 0; color: var(--ll-text-2); }
.ll-laden::before {
    content: ""; display: inline-block; width: 12px; height: 12px; margin-right: 8px; vertical-align: -1px;
    border: 2px solid var(--ll-linie); border-top-color: var(--ll-akzent); border-radius: 50%; animation: ll-drehen 0.8s linear infinite;
}
@keyframes ll-drehen { to { rotate: 360deg; } }

/* Nichts markier- und kopierbar, kein Textcursor beim Klick, auch in Hilfe und Neuigkeiten (Jörg 2026-11-03);
   nur Eingabefelder bleiben markierbar, Links und Buttons klickbar */
body, dialog { -webkit-user-select: none; user-select: none; } /* dialog: Firefox setzt offene Fenster sonst auf text */
:is(input, textarea, [contenteditable="true"]) { -webkit-user-select: text; user-select: text; }
/* Textcursor (auch der Textcursor-Steuerung F7 nach Klick auf Buttons) nur in Eingabefeldern sichtbar (Jörg 2026-11-03) */
html, body *:not(input, textarea, [contenteditable="true"]) { caret-color: transparent; }
:where(input, textarea, [contenteditable="true"]) { caret-color: auto; }

/* Fenster */
.ll-dialog {
    width: min(560px, calc(100vw - 32px)); max-height: calc(100dvh - 32px); padding: 0;
    border: 1px solid var(--ll-linie); border-radius: calc(var(--ll-radius) * 1.5);
    background: var(--ll-flaeche); color: var(--ll-text); font-family: var(--ll-schrift);
    box-shadow: 0 18px 50px rgb(0 0 0 / 0.3);
}
.ll-dialog--klein { width: min(420px, calc(100vw - 32px)); }
.ll-dialog--text { width: min(720px, calc(100vw - 32px)); }
/* Monatsübersicht Mondhelligkeit (Popup): so breit wie die Tabelle */
.ll-dialog--monathell { width: fit-content; max-width: calc(100vw - 32px); }
.ll-dialog--monathell .ll-monat-kopf { justify-content: center; }
/* Handy: alle 15 Stunden ohne seitliches Wischen (kleine Ziffern, feste Spalten; BL-Zeit nur in der Erklärung) */
@media (max-width: 560px) {
    .ll-dialog.ll-dialog--monathell { width: calc(100vw - 12px); max-width: none; max-height: calc(100dvh - 12px); }
    .ll-dialog--monathell .ll-dialog-rumpf { padding: 10px 6px 12px; }
    .ll-dialog--monathell .ll-tabelle--hell { table-layout: fixed; width: 100%; }
    .ll-dialog--monathell .ll-tabelle--hell :is(td, th) { padding: 0; }
    .ll-dialog--monathell .ll-tabelle--hell th:first-child { width: 50px; text-align: left; white-space: nowrap; }
    .ll-dialog--monathell tr[data-hm] th[scope="row"] .ll-tn::after { content: none; } /* HM steht in der Legende */
    .ll-dialog--monathell .ll-tabelle--hell .ll-max { width: 28px; padding-right: 3px; font-size: 0.7rem; text-align: right; }
    /* feine Fuge zwischen den Zellen, sonst verschmelzen gleichfarbige Werte (19 Stunden im Winter) */
    .ll-dialog--monathell .ll-tabelle--hell td.ll-std { min-width: 0; padding: 0 0.5px; background-clip: content-box; font-size: 0.62rem; letter-spacing: -0.04em; text-align: center; }
    .ll-dialog--monathell .ll-tabelle--hell td.ll-std.ll-sonne { font-size: 0; }
    .ll-dialog--monathell .ll-tabelle--hell thead th:not(:first-child) { font-size: 0.62rem; }
}
@media (max-width: 340px) { .ll-dialog--monathell .ll-tabelle--hell td.ll-std { font-size: 0.56rem; letter-spacing: -0.06em; } }
.ll-dialog::backdrop { background: rgb(10 14 20 / 0.45); }
.ll-dialog-kopf {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    padding: 10px 10px 10px 18px; border-bottom: 1px solid var(--ll-linie); cursor: move; user-select: none;
}
.ll-dialog-kopf h2 { margin: 0; font-size: 1.1rem; }
/* Neuigkeiten und Hilfe: Fenstertitel und Abschnittsköpfe größer und fett (Jörg 2026-11-03) */
.ll-dialog--text .ll-dialog-kopf h2 { font-size: 1.45rem; font-weight: 700; }
.ll-dialog--text .ll-dialog-rumpf h3 { font-size: 1.3rem; font-weight: 700; }
.ll-dialog-zu { border-color: transparent; background: transparent; cursor: pointer; }
.ll-dialog-rumpf { padding: 16px 18px 20px; overflow: auto; max-height: calc(100dvh - 100px); }
.ll-dialog-rumpf:focus { outline: none; } /* bekommt beim Öffnen den Fokus (dialog.js), Rahmen wäre nur störend */
.ll-dialog--wetter .ll-dialog-rumpf { display: flex; flex-direction: column; overflow: hidden; }
.ll-dialog--wetter .ll-wetter-inhalt { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; }
.ll-dialog--wetter .ll-rollen { flex: 1 1 auto; min-height: 0; max-height: none; }
/* Standard für Wetterwerte (Jörg 2026-10-31, gilt überall): Temperatur samt Kopf linksbündig, gefühlt gleich groß daneben;
   Niederschlag linksbündig, die Menge klein daneben mit Abstand */
:is(.ll-tabelle--wetter, .ll-tabelle--wettertage) :is(td.ll-tempzelle, th.ll-tempkopf, td.ll-niederschlag, th.ll-niederkopf) { text-align: left; padding-left: 8px; }
:is(.ll-tabelle--wetter, .ll-tabelle--wettertage) td.ll-tempzelle small { font-size: inherit; margin-left: 4px; }
:is(.ll-tabelle--wetter, .ll-tabelle--wettertage) td.ll-niederschlag .ll-menge { margin-left: 8px; }
.ll-kp-links { text-align: left !important; padding-left: 8px !important; }
.ll-kp-menge { margin-left: 8px; font-size: 0.78em; vertical-align: 3px; }
/* Wetterfenster (alle Designs): Solunar als Feld über die Spaltenbreite, Wolken mit Classic-Symbol, Dunst/Nebel hinterlegt wie Classic */
.ll-dialog--wetter .ll-solunar-zelle { display: block; width: auto; min-width: 22px; height: 18px; line-height: 18px; margin: 0 1px; }
.ll-wolken-symbol { width: 16px; height: 16px; margin-right: 3px; vertical-align: -3px; }
.ll-dialog--wetter .ll-windpfeil { margin-right: 3px; vertical-align: middle; }
.ll-dialog--wetter .ll-windpfeil svg { width: 12px; height: 12px; }
/* Tageszeile in „Stunden“: links und höher, damit der neue Tag ins Auge fällt (Jörg 2026-10-31) */
.ll-dialog--wetter .ll-wetter-tag th { height: auto; padding: 12px 6px 6px !important; text-align: left !important; font-size: 1.08em; white-space: normal; }
.ll-dialog--wetter td.ll-sicht-dunst { background: #808080 !important; color: #ffffff; }
.ll-dialog--wetter td.ll-sicht-nebel { background: #b3b3b3 !important; color: #000000; }
/* Wetterfenster schmal (Handy): weniger wichtige Spalten aus, statt seitlich zu wischen; alle Werte bleiben in der Erklärung am Wettersymbol */
.ll-dialog--wetter .ll-wetter-inhalt { container-type: inline-size; }
/* Am PC so breit wie der Inhalt, Spalten näher beisammen; Tage mit höheren Zeilen, Wetter linksbündig (Jörg 2026-10-31) */
@media (min-width: 701px) {
    .ll-dialog.ll-dialog--wetter { width: fit-content; max-width: calc(100vw - 32px); }
    .ll-dialog--wetter .ll-wetter-inhalt { container-type: normal; }
    .ll-dialog--wetter :is(.ll-tabelle--wetter, .ll-tabelle--wettertage) { width: auto; }
    .ll-dialog--wetter :is(.ll-tabelle--wetter, .ll-tabelle--wettertage) :is(td, th) { padding-left: 6px; padding-right: 6px; }
    /* die Tageszeile bricht um, statt die Tabelle zu verbreitern */
    .ll-dialog--wetter .ll-wetter-tag th { contain: inline-size; }
}
.ll-dialog--wetter .ll-tabelle--wettertage :is(td, th) { height: 30px; }
.ll-dialog--wetter .ll-tabelle--wettertage :is(td, th):nth-child(2) { text-align: left; }
@container (max-width: 700px) { .ll-dialog--wetter .ll-p4 { display: none; } }
@container (max-width: 520px) { .ll-dialog--wetter .ll-p3 { display: none; } }
@media (max-width: 560px) { .ll-dialog--wetter :is(.ll-p3, .ll-p4) { display: none; } }
@media (max-width: 700px) {
    .ll-dialog--wetter { width: calc(100vw - 12px); max-height: calc(100dvh - 12px); }
    .ll-dialog--wetter .ll-dialog-rumpf { padding: 10px 6px 12px; max-height: calc(100dvh - 76px); }
    .ll-dialog--wetter :is(.ll-tabelle--wetter, .ll-tabelle--wettertage) :is(td, th) { padding-left: 2px; padding-right: 2px; }
    .ll-dialog--wetter thead th { white-space: normal; line-height: 1.1; }
    .ll-dialog--wetter .ll-sterne svg { width: 12px; height: 12px; }
}
@media (max-width: 380px) { .ll-dialog--wetter table { font-size: 0.9em; } }
/* Tage gestapelt: Höchst- über Tiefstwert, daneben das Mittel (Wetterfenster am Handy, Design Wetter) */
.ll-tabelle--gestapelt .ll-mm { display: inline-flex; flex-direction: column; vertical-align: middle; line-height: 1.15; text-align: right; }
.ll-tabelle--gestapelt .ll-mm > span + span { opacity: 0.8; }
.ll-tabelle--gestapelt .ll-mm > span + span .ll-temp { margin-top: 1px; }
.ll-tabelle--gestapelt .ll-mittel { display: inline-block; margin-left: 5px; vertical-align: middle; opacity: 0.85; }
.ll-dialog-rumpf h3 { margin: 18px 0 6px; font-size: 1rem; }
.ll-dialog-rumpf section:first-child h3, .ll-dialog-rumpf article:first-child h3 { margin-top: 0; }
.ll-frage-text { margin: 0 0 16px; }
.ll-liste { display: grid; grid-template-columns: max-content 1fr; gap: 4px 14px; margin: 8px 0; }
.ll-liste dt { font-weight: 600; }
.ll-liste dd { margin: 0; overflow-wrap: anywhere; }
.ll-suche section + section { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--ll-linie); }
.ll-suche [data-tun^="geo"] { margin-top: 8px; }
/* Hinweis beim Erstbesuch (ortswahl.js ersthinweis): Text, darunter bzw. daneben die Buttons; Farben je Design */
.ll-ersthinweis { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; }
.ll-ersthinweis p { margin: 0; flex: 1 1 20em; line-height: 1.45; }
.ll-ersthinweis-knoepfe { display: flex; flex-wrap: wrap; gap: 8px; }
/* schmal: „Mein Standort“ über die ganze Breite, die anderen beiden gleich breit darunter */
@media (max-width: 480px) {
    .ll-ersthinweis-knoepfe { flex: 1 1 100%; }
    .ll-ersthinweis-knoepfe .ll-knopf { flex: 1 1 0; }
    .ll-ersthinweis-knoepfe .ll-knopf--haupt { flex-basis: 100%; }
}
.ll-treffer ul { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 4px; }
.ll-treffer-eintrag {
    width: 100%; text-align: left; padding: 8px 10px; border: 1px solid var(--ll-linie); border-radius: var(--ll-radius);
    background: transparent; color: inherit; font: inherit; cursor: pointer;
}
.ll-treffer-eintrag:hover { border-color: var(--ll-akzent); }
.ll-admin { border: 1px dashed var(--ll-linie); border-radius: var(--ll-radius); padding: 8px 12px 12px; }
.ll-neuigkeiten-gelesen { display: flex; margin-bottom: 16px; padding-bottom: 12px; border-bottom: 1px solid var(--ll-linie); }
.ll-datum-zeile { margin: -4px 0 8px; font-size: 0.85em; color: var(--ll-text-2); }

/* Erklärung (Hover, Fokus, Tippen) */
.ll-info {
    position: fixed; inset: 0 auto auto 0; margin: 0; border: 0; overflow: visible; z-index: 3000; max-width: min(340px, calc(100vw - 16px));
    padding: 8px 10px; border-radius: var(--ll-radius); background: #1b1f26; color: #f2f1ec;
    font: 13.5px/1.4 var(--ll-schrift); white-space: pre-line; pointer-events: none;
    box-shadow: 0 6px 20px rgb(0 0 0 / 0.3);
}
:root[data-schema="dunkel"] .ll-info { box-shadow: 0 8px 24px rgb(0 0 0 / 0.55); } /* hebt die hellere Blase im Dunkeln ab */

/* Karte */
.ll-karte { position: relative; min-height: 240px; }
.ll-karte-flaeche { position: absolute; inset: 0; border-radius: inherit; }
.ll-karte--fehlt { display: grid; place-items: center; padding: 12px; text-align: center; font-size: 0.9em; opacity: 0.8; }
.ll-karte-gross { position: absolute; top: 10px; right: 10px; z-index: 1000; box-shadow: 0 1px 4px rgb(0 0 0 / 0.3); }
.ll-karte--gross { position: fixed; inset: 0; z-index: 2000; border-radius: 0; }
.ll-karte-offen { overflow: hidden; }
.ll-karte-info dl { display: grid; grid-template-columns: max-content max-content; gap: 2px 10px; margin: 0 0 6px; font-family: var(--ll-schrift-zahl); }
.ll-karte-info dd { margin: 0; text-align: right; }
.ll-karte-info p { margin: 0; }
/* Windströmung (js/windstroemung.js): Button unter „Karte vergrößern“, Kurzhinweis oben links neben dem Zoom, Karte grau gedimmt */
.ll-wind-knopf { position: absolute; top: 52px; right: 10px; z-index: 1000; box-shadow: 0 1px 4px rgb(0 0 0 / 0.3); }
/* Richtungen von Sonne und Mond (richtungen.js): Button unter der Windströmung, Beschriftung am Ende der Strahlen */
.ll-richtung-knopf { position: absolute; top: 94px; right: 10px; z-index: 1000; box-shadow: 0 1px 4px rgb(0 0 0 / 0.3); }
.ll-richtung-knopf[aria-pressed="true"] { background: var(--ll-akzent); border-color: var(--ll-akzent); color: var(--ll-akzent-text, #fff); }
.ll-richtung-marke-anker { background: none; border: 0; }
.ll-richtung-marke { position: absolute; transform: translate(-50%, -50%); white-space: nowrap; text-align: center; padding: 1px 5px; border-radius: 3px;
    font: 700 12px/16px "Plex Sans", system-ui, sans-serif; color: #1b1406; box-shadow: 0 1px 2px rgb(0 0 0 / 0.35); pointer-events: none; }
.ll-richtung-marke--sonne { background: #f2b13a; } .ll-richtung-marke--mond { background: #8fb8ff; } .ll-richtung-marke--stunde { background: #2456a6; color: #fff; }
/* Stundenleiste unter der Karte (richtungen.js): Stunde und Mondhelligkeit, angeklickt = Mondstrahl; vergrößert unten über der Karte
   (Abstand zu Quellenzeile, Minikarte und Windlegende setzt richtungen.js) */
.ll-richtung-leiste { display: flex; gap: 1px; margin: 4px 0 6px; font-size: 11px; line-height: 1.25; font-variant-numeric: tabular-nums; }
.ll-richtung-leiste[hidden] { display: none; }
.ll-richtung-leiste button { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center; padding: 1px 0 2px; border: 0; border-radius: 2px;
    font: inherit; cursor: pointer; }
.ll-richtung-leiste small { font-size: 10px; }
.ll-richtung-leiste b { min-height: 1.25em; font-size: 9.5px; font-weight: 400; letter-spacing: -0.02em; } /* klein: „0,2“ stieß an den Rand (Jörg 05.11.) */
.ll-richtung-leiste .ll-rl-tag { background: var(--ll-linie); color: var(--ll-text); } /* Kontrast (Prüfung 06.11.: 3,8:1) */
/* schmale Felder (Cockpit 1024/1280 px, 9–13 px je Stunde): nur gerade Stunden beschriften, unter 12 px ohne Wert (Farbe bleibt, Wert im Hover) */
.ll-richtung-leiste button { container-type: inline-size; }
@container (max-width: 15.5px) { .ll-richtung-leiste .ll-rl-ug small { visibility: hidden; } }
@container (max-width: 11.5px) { .ll-richtung-leiste b { visibility: hidden; } }
/* Touch (Handy/Tablet): Felder mindestens 24 px breit und 32 px hoch, Stunden auf zwei gleich lange Zeilen (--sp aus richtungen.js) */
@media (pointer: coarse) {
    .ll-richtung-leiste { display: grid; grid-template-columns: repeat(var(--sp, 10), minmax(0, 1fr)); gap: 2px; }
    .ll-richtung-leiste button { min-height: 32px; justify-content: center; }
}
.ll-richtung-leiste button[aria-pressed="true"] { box-shadow: inset 0 0 0 1px #fff, inset 0 0 0 2px rgb(0 0 0 / 0.45); } /* innen: außen verdeckten die Nachbarn den Rahmen (Jörg 05.11.) */
.ll-karte--gross ~ .ll-richtung-leiste { position: fixed; left: 10px; right: 10px; bottom: 30px; z-index: 2001; max-width: 900px; margin: 0; padding: 3px;
    border-radius: 4px; background: rgb(255 255 255 / 0.92); box-shadow: 0 1px 4px rgb(0 0 0 / 0.3); font-size: 13px; }
.ll-karte--gross ~ .ll-richtung-leiste small { font-size: 11px; } .ll-karte--gross ~ .ll-richtung-leiste b { font-size: 12px; }
.ll-wind-knopf[aria-pressed="true"] { background: var(--ll-akzent); border-color: var(--ll-akzent); color: var(--ll-akzent-text, #fff); }
.ll-wind-stand { position: absolute; top: 10px; left: 50px; z-index: 1000; max-width: calc(100% - 110px); padding: 2px 8px; border-radius: 4px;
    background: rgb(255 255 255 / 0.92); color: #1d2125; font-size: 12px; line-height: 1.45; box-shadow: 0 1px 4px rgb(0 0 0 / 0.3);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* mit Auswahlfeld: umbrechen statt abschneiden (feste Leerzeichen, nur vor „Böen“), z. B. Woche/Wetter am Handy */
.ll-wind-stand:has(select) { white-space: normal; }
/* Zeitwahl: Uhrzeit als kleines Auswahlfeld im Kurzhinweis */
.ll-wind-stand select.ll-wind-zeit { min-height: 0; height: auto; width: auto; margin: 0; padding: 0 2px; border: 1px solid rgb(0 0 0 / 0.3); border-radius: 3px;
    background: #fff; color: inherit; font: inherit; line-height: 1.3; vertical-align: baseline; cursor: pointer; field-sizing: content; }
.ll-karte.ll-karte--wind .leaflet-pane.leaflet-tile-pane { filter: grayscale(1) brightness(0.6) contrast(1.1); }
.velocity-overlay { position: absolute; z-index: 1; } /* aus leaflet-velocity.css */
.ll-wind-legende { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 10px; margin: 4px 0 8px; font-size: 0.8em; line-height: 1.4; }
.ll-dialog .ll-wind-legende { margin: 4px 0; font-size: inherit; } /* in der Hilfe */
.ll-wind-legende[hidden] { display: none; }
.ll-wind-legende span { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }
.ll-wind-legende i { width: 14px; height: 4px; border-radius: 2px; box-shadow: 0 0 0 1px rgb(0 0 0 / 0.25); }
/* vergrößerte Karte: Legende unten links über der Karte */
.ll-karte--gross + .ll-wind-legende { position: fixed; left: 10px; bottom: 30px; z-index: 2001; margin: 0; padding: 2px 8px; border-radius: 4px;
    background: rgb(255 255 255 / 0.92); color: #1d2125; box-shadow: 0 1px 4px rgb(0 0 0 / 0.3); }
.ll-huepfen { animation: ll-huepfen 0.45s ease-out 2; }
@keyframes ll-huepfen { 40% { translate: 0 -22px; } 70% { translate: 0 -6px; } }
@media (prefers-reduced-motion: reduce) { .ll-huepfen { animation: none; } }

/* Platzwahl, Koordinaten, Datum */
.ll-platzwahl { display: flex; gap: 6px; align-items: center; min-width: 0; }
.ll-platzwahl-feld { flex: 1 1 auto; min-width: 0; }
.ll-platzwahl .ll-knopf { flex: none; }
.ll-platzwahl select { text-overflow: ellipsis; }
/* Platzwahl als eigene Liste mit Flaggen (Jörg 2026-11-12, statt <select>): Kopf wie das Auswahlfeld, Menü über die ganze Zeile */
.ll-platzwahl:has(> .ll-platzwahl-feld) { position: relative; }
.ll-pw-kopf { list-style: none; position: relative; display: flex; align-items: center; gap: 8px; min-height: 36px; padding: 0 28px 0 9px;
    border: 1px solid var(--ll-linie); border-radius: var(--ll-radius); background: var(--ll-flaeche); color: var(--ll-text); cursor: pointer; white-space: nowrap; }
.ll-pw-kopf::-webkit-details-marker { display: none; }
.ll-pw-kopf::after { content: ""; position: absolute; right: 11px; top: 50%; width: 6px; height: 6px; pointer-events: none;
    border: solid currentColor; border-width: 0 1.5px 1.5px 0; transform: translateY(-70%) rotate(45deg); }
.ll-platzwahl-feld[open] > .ll-pw-kopf::after { transform: translateY(-30%) rotate(225deg); }
.ll-pw-kopf:focus-visible { outline: 2px solid var(--ll-akzent); outline-offset: 2px; }
.ll-pw-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ll-pw-flagge { flex: none; display: inline-flex; width: 21px; height: 14px; box-sizing: border-box; }
.ll-pw-flagge .ll-flagge { display: block; width: 21px; height: 14px; object-fit: cover; }
.ll-pw-flagge--frei { border: 1px dashed color-mix(in srgb, currentColor 40%, transparent); border-radius: 2px; }
.ll-pw-menue { position: absolute; left: 0; right: 0; top: calc(100% + 4px); z-index: 1700; margin: 0; padding: 4px; list-style: none;
    max-height: min(420px, 70dvh); overflow-y: auto; overscroll-behavior: contain; background: var(--ll-flaeche); color: var(--ll-text);
    border-radius: var(--ll-radius); box-shadow: 0 4px 16px rgb(0 0 0 / 0.28); font-size: 0.95rem; font-weight: 400; }
.ll-pw-option { display: flex; align-items: center; gap: 9px; width: 100%; min-height: 36px; padding: 4px 10px; border: 0; border-radius: 4px;
    background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.ll-pw-option:hover, .ll-pw-option:focus-visible { background: color-mix(in srgb, var(--ll-akzent) 12%, transparent); outline: none; }
.ll-pw-option[aria-selected="true"] { font-weight: 600; }
.ll-pw-option[aria-selected="true"]::after { content: "✓"; margin-left: auto; padding-left: 12px; }
.ll-pw-option--frei .ll-pw-name { color: var(--ll-text-2); }
.ll-pw-nr { flex: none; width: 1.1em; text-align: right; color: var(--ll-text-2); font-variant-numeric: tabular-nums; }
.ll-plaetze .ll-pw-flagge { margin-right: 6px; }
.ll-reihenfolge { list-style: none; margin: 0 0 var(--ll-abstand); padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 4px; }
.ll-reihenfolge li { display: flex; align-items: center; gap: 6px; padding: 2px 4px; border-radius: var(--ll-radius); }
.ll-reihenfolge--aktiv { background: color-mix(in srgb, var(--ll-akzent) 14%, transparent); }
.ll-reihenfolge .ll-platz-nr { flex: none; width: 1.4em; text-align: right; color: var(--ll-text-2); }
.ll-reihenfolge .ll-platz-name { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ll-reihenfolge .ll-platz--frei { color: var(--ll-text-2); font-style: italic; }
.ll-reihenfolge .ll-knopf { flex: none; }
/* Ziehen am Griff (Jörg 2026-11-12, statt Pfeil-Buttons): Griff links 40 px breit für Maus und Finger; nur dort touch-action: none */
.ll-reihenfolge li { position: relative; transition: transform 0.15s ease; }
.ll-griff { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 40px; min-height: 36px; margin: -2px 0 -2px -4px;
    padding: 0; border: 0; border-radius: var(--ll-radius); background: none; color: var(--ll-text-2); cursor: grab; touch-action: none; }
.ll-griff:hover { background: color-mix(in srgb, var(--ll-akzent) 12%, transparent); color: var(--ll-text); }
.ll-griff:focus-visible { outline: 2px solid var(--ll-akzent); outline-offset: -2px; }
.ll-griff-symbol { width: 18px; height: 18px; fill: currentColor; }
.ll-reihenfolge--zieht, .ll-reihenfolge--zieht .ll-griff { cursor: grabbing; user-select: none; }
.ll-reihenfolge li.ll-reihenfolge--gezogen { z-index: 2; transition: none; background: var(--ll-flaeche); box-shadow: 0 6px 18px rgb(0 0 0 / 0.25); }
.ll-koordinaten { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 8px 12px; align-items: end; }
.ll-koordinaten input { font-family: var(--ll-schrift-zahl); }
.ll-hoehe { font-size: 0.9em; color: var(--ll-text-2); align-self: center; }
.ll-datum { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; max-width: 100%; }
.ll-datum label { display: flex; align-items: center; gap: inherit; } /* Abstand Wochentag–Datum wie Pfeil–Wochentag */
.ll-datum-wt { color: var(--ll-text-2); text-align: center; }
.ll-datum-wt { min-width: 1.6em; } /* kurz (Mo, Di …), fest breit und mittig zwischen Pfeil und Datum: Pfeile bleiben beim Blättern stehen (Jörg 2026-11-04) */
.ll-datum input { width: auto; font-family: var(--ll-schrift-zahl); }

/* Monatsfeld */
.ll-monat-kopf { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; margin-bottom: 10px; }
.ll-reiter { display: flex; flex-wrap: wrap; gap: 4px; }
.ll-reiter [role="tab"] {
    min-height: 34px; padding: 6px 12px; border: 1px solid var(--ll-linie); border-radius: var(--ll-radius);
    background: transparent; color: var(--ll-text-2); font: inherit; font-size: 0.92em; cursor: pointer;
}
.ll-reiter [aria-selected="true"] { background: var(--ll-akzent); border-color: var(--ll-akzent); color: var(--ll-akzent-text); }
.ll-monat-nav { display: flex; align-items: center; gap: 6px; }
.ll-monat-titel { margin: 0; min-width: 9.5em; text-align: center; font-size: 1rem; }
/* Feste Köpfe (Jörg 2026-10-30): Ist eine Tabelle höher als der Bildschirm, scrollt sie in sich – so bleiben Kopfzeile
   und erste Spalte stehen (ein seitlich wischbarer Behälter hält sonst keinen Kopf am Bildschirmrand) */
.ll-rollen { overflow: auto; max-height: calc(100svh - 16px); }
.ll-tabelle { border-collapse: collapse; width: 100%; font-size: 0.88em; font-variant-numeric: tabular-nums; }
.ll-tabelle th, .ll-tabelle td { padding: 3px 5px; text-align: center; border-bottom: 1px solid var(--ll-linie); white-space: nowrap; }
.ll-tabelle thead th { font-weight: 600; color: var(--ll-text-2); position: sticky; top: 0; z-index: 2; background: var(--ll-flaeche); }
.ll-tabelle tr > :first-child { position: sticky; left: 0; z-index: 1; }
.ll-tabelle thead tr > :first-child { z-index: 3; }
:where(.ll-tabelle tr > :first-child) { background-color: var(--ll-flaeche); } /* Grund, falls das Design keinen setzt */
.ll-tabelle th[scope="row"] { text-align: left; padding: 0; }
/* Wetter 10 Tage: enge Zeilen; Niederschlagsmenge wie Classic klein und hochgestellt, Regen und Schnee übereinander */
:is(.ll-tabelle--wetter, .ll-tabelle--wettertage) :is(td, th) { padding-top: 1px; padding-bottom: 1px; line-height: 1.2; }
.ll-menge { font-size: 0.68em; vertical-align: 4px; line-height: 1; margin-left: 3px; }
.ll-menge--zwei { display: inline-flex; flex-direction: column; align-items: flex-end; vertical-align: middle; }
.ll-tag-knopf {
    display: inline-flex; gap: 4px; align-items: baseline; width: 100%; padding: 3px 6px; border: 0; border-radius: 4px;
    background: transparent; color: inherit; font: inherit; cursor: pointer; text-align: left;
}
.ll-tag-knopf:hover { background: color-mix(in srgb, var(--ll-akzent) 12%, transparent); }
@media (pointer: coarse) { .ll-tag-knopf { min-height: 28px; align-items: center; } } /* Tippziel (Wetter: 23 px) */
.ll-wt { color: var(--ll-text-2); min-width: 1.6em; }
.ll-sonntag .ll-wt, .ll-sonntag .ll-tn { color: var(--ll-markierung); }
.ll-heute .ll-tn { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 3px; }
/* der rote Rahmen des gewählten Tags reicht, dann keine Unterstreichung (Jörg 2026-10-31) */
.ll-heute.ll-gewaehlt .ll-tn { text-decoration: none; }
tr.ll-gewaehlt > * { box-shadow: inset 0 2px 0 var(--ll-akzent), inset 0 -2px 0 var(--ll-akzent); }
.ll-std { min-width: 2.4em; }
/* Kalender: Helligkeit, Sonne & Mond und Solunar in einer Tabelle (monatsfeld zusammen) */
.ll-tabelle--kalender :is(th, td) { padding-left: 2px; padding-right: 2px; }
.ll-tabelle--kalender .ll-std { min-width: 2.1em; }
/* Gruppenzeile über den Köpfen (Sonne, Mond, Mondhelligkeit …) und feine Linien vor jeder Gruppe, wie im Taschenkalender (Jörg 2026-10-30: für alle) */
.ll-tabelle thead .ll-gruppen th { position: static; padding-top: 4px; padding-bottom: 3px; font-size: 0.78em; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; color: var(--ll-text); border-bottom: 1px solid var(--ll-linie); }
.ll-tabelle .ll-g { border-left: 1px solid var(--ll-linie); }
.ll-tabelle--kalender .ll-gruppe { border-left: 2px solid var(--ll-text-2); padding-left: 5px; }
.ll-mitternacht { border-left: 2px solid var(--ll-text-2) !important; }
.ll-h0 { background: var(--ll-h0); color: var(--ll-h0-text); }
/* Classic-Skalenfarben (Temperatur, UV, Regen) kommen als --f; Vorgabe Textfarbe, ein Design kann Plaketten daraus machen */
.ll-skala { color: var(--f); }
/* Windpfeil wie Classic: gefüllt in Orange (--ll-windpfeil) */
.ll-windpfeil svg { fill: var(--ll-windpfeil, #ff9900); stroke: none; }
.ll-windpfeil { display: inline-grid; margin-right: 0.35em; } /* inline-grid: nur so wirkt rotate (im Wetter-Design zeigten alle Pfeile nach Süden, Rückmeldung 2026-10-31) */
/* Temperatur-Plakette: gleich breit, Wert mittig (alle Designs) */
.ll-temp { display: inline-block; min-width: 2.2em; padding: 0 4px; border-radius: 3px; background: var(--f); color: var(--s); font-weight: 700; line-height: 1.3; text-align: center; }
.ll-h1 { background: var(--ll-h1); color: var(--ll-h1-text); }
.ll-h2 { background: var(--ll-h2); color: var(--ll-h2-text); }
.ll-h3 { background: var(--ll-h3); color: var(--ll-h3-text); }
.ll-h4 { background: var(--ll-h4); color: var(--ll-h4-text); }
/* Mond vermutlich hinter Wolken (wetterliste.js verdecktTeile): Schraffur über das ganze Feld, Streifen je Stufe von der Schriftfarbe
   weg getönt (unter weißer Schrift dunkler, unter schwarzer heller), Kontrast Schrift/Streifen 8,8–16,8:1 (Jörg 2026-11-05) */
:root { --ll-vs1: rgb(0 0 0 / 0.38); --ll-vs2: rgb(0 0 0 / 0.38); --ll-vs3: rgb(255 255 255 / 0.62); --ll-vs4: rgb(0 0 0 / 0.16); }
.ll-h1 { --vs: var(--ll-vs1); } .ll-h2 { --vs: var(--ll-vs2); } .ll-h3 { --vs: var(--ll-vs3); } .ll-h4 { --vs: var(--ll-vs4); }
.ll-verdeckt { background-image: repeating-linear-gradient(135deg, var(--vs) 0 2px, transparent 2px 5px) !important; }
.ll-sonne { background: var(--ll-sonne); color: var(--ll-sonne-text); }
.ll-std.ll-sonne { font-size: 0.85em; }
tr[data-hm] th[scope="row"] .ll-tn::after { content: "HM"; margin-left: 3px; font-size: 0.7em; font-weight: 700; color: var(--ll-markierung); }
.ll-hm { font-weight: 700; color: var(--ll-markierung); }
.ll-tabelle--sonnemond td.ll-sm { color: var(--ll-sm-text); box-shadow: inset -1px 0 0 var(--ll-flaeche); }
.ll-tabelle--sonnemond .ll-sm-bl { background: var(--ll-sm-bl); }
.ll-tabelle--sonnemond .ll-sm-sasu { background: var(--ll-sm-sasu); }
.ll-tabelle--sonnemond .ll-sm-mp { background: var(--ll-sm-mp); }
.ll-tabelle--sonnemond .ll-sm-mamu { background: var(--ll-sm-mamu); }
.ll-tabelle--sonnemond tr.ll-woche-b > td.ll-sm { filter: brightness(0.9); }
.ll-tabelle--sonnemond tr.ll-wochenstart > * { border-top: 1px solid var(--ll-linie); }
/* Solunar im Monat wie Sonne & Mond: Wochen abgesetzt, farbige Felder der zweiten Woche etwas dunkler (Jörg 2026-10-31) */
.ll-tabelle--solunar tr.ll-woche-b > :is(td.ll-major, td.ll-minor) { filter: brightness(0.92); }
.ll-tabelle--solunar tr.ll-wochenstart > * { border-top: 1px solid var(--ll-linie); }
/* Monat Solunar, Kurzform „Beginn“: auf schmalen Handys ohne Strich hinter der Zeit, damit nichts seitlich übersteht (2026-11-04) */
@media (max-width: 380px) { .ll-tabelle--solunar .ll-sol-strich { display: none; } }
/* MP mit Mondsymbol (zu- oder abnehmend); helle Classic-Fläche mit feiner Kante */
.ll-tabelle--sonnemond td.ll-sm-mp { white-space: nowrap; }
.ll-sm-mp .ll-mondphase { width: 14px; height: 14px; vertical-align: -2px; margin-right: 4px; }
.ll-mondphase-dunkel { fill: #2b3038; stroke: #2b3038; stroke-width: 1; }
.ll-mondphase-hell { fill: #f4e7b0; }
/* gewählter Tag rot umrandet wie Classic (alle Monatstabellen) */
.ll-monat .ll-tabelle tr.ll-gewaehlt.ll-tag > * { --b: var(--ll-sm-heute-breite); box-shadow: inset 0 var(--b) 0 var(--ll-sm-heute), inset 0 calc(-1 * var(--b)) 0 var(--ll-sm-heute); }
.ll-monat .ll-tabelle tr.ll-gewaehlt.ll-tag > :first-child { box-shadow: inset 0 var(--b) 0 var(--ll-sm-heute), inset 0 calc(-1 * var(--b)) 0 var(--ll-sm-heute), inset var(--b) 0 0 var(--ll-sm-heute); }
.ll-monat .ll-tabelle tr.ll-gewaehlt.ll-tag > :last-child { box-shadow: inset 0 var(--b) 0 var(--ll-sm-heute), inset 0 calc(-1 * var(--b)) 0 var(--ll-sm-heute), inset calc(-1 * var(--b)) 0 0 var(--ll-sm-heute); }
/* Mondhelligkeit der Nacht als Streifen 17–7 Uhr: Stundenkopf, Mitternacht als Strich, Tageslicht schraffiert */
th.ll-streifen-kopf { padding-left: 4px !important; padding-right: 4px !important; }
.ll-streifen-stunden, td.ll-streifen { display: grid; grid-template-columns: repeat(var(--ll-stunden, 15), minmax(0, 1fr)); gap: 1px; }
.ll-streifen-stunden span { font-size: 0.85em; font-weight: 500; text-align: center; }
.ll-streifen-stunden span.ll-ug { color: transparent; }
.ll-streifen-stunden .ll-mn { color: var(--ll-text); font-weight: 700; }
td.ll-streifen { padding: 3px 4px !important; min-width: 150px; align-items: stretch; }
.ll-streifen i { min-width: 0; min-height: 12px; border-radius: 1px; }
.ll-streifen i.ll-sonne { background: var(--ll-sonne-schraffur, repeating-linear-gradient(135deg, color-mix(in srgb, var(--ll-sonne-text) 40%, var(--ll-sonne)) 0 1.5px, var(--ll-sonne) 1.5px 6px)); }
.ll-streifen i.ll-mn { box-shadow: inset 1.5px 0 0 var(--ll-text-2); }
.ll-streifen i.ll-h4 { box-shadow: inset 0 0 0 1px var(--ll-linie); }
.ll-e-sonne, .ll-e-bl, .ll-e-mond, .ll-e-hm { color: var(--ll-e-text); }
.ll-e-sonne { background: var(--ll-e-sonne); } .ll-e-bl { background: var(--ll-e-bl); }
.ll-e-mond { background: var(--ll-e-mond); } .ll-e-hm { background: var(--ll-e-hm); box-shadow: inset 0 0 0 1px rgb(0 0 0 / 0.35); }
.ll-major { background: var(--ll-major); color: var(--ll-major-text); }
.ll-minor { background: var(--ll-minor); color: var(--ll-minor-text); }
.ll-betont { font-weight: 700; }
.ll-sterne { display: inline-flex; gap: 1px; vertical-align: -2px; }
.ll-stern { width: 14px; height: 14px; }
/* Farbe mit .ll-sterne davor: schlägt die allgemeine Regel für Symbole in Fenstern (.ll-dialog svg, ohne Füllung) */
.ll-sterne .ll-stern { fill: var(--ll-stern); stroke: var(--ll-stern); stroke-width: 1; }
.ll-sterne .ll-stern--leer, .ll-sterne .ll-stern-rand { fill: none; }
.ll-max { font-weight: 600; }
.ll-max--0 { color: var(--ll-text-2); font-weight: 400; }
.ll-legende { display: flex; flex-wrap: wrap; gap: 6px 14px; margin: 10px 0 0; font-size: 0.85em; color: var(--ll-text-2); }
.ll-legende-eintrag { display: inline-flex; align-items: center; gap: 6px; font-weight: 400; }
.ll-legende-eintrag i { width: 14px; height: 14px; border-radius: 3px; border: 1px solid var(--ll-linie); }
.ll-legende-hm { color: var(--ll-markierung); font-weight: 600; }

/* Relief: Tagesspalten mind. 24 px, damit die Wertzeilen lesbar bleiben; ist der Platz kleiner (Handy, Cockpit), wird seitlich gewischt.
   Achse und Zeilentitel bleiben dabei links stehen. */
.ll-relief-rollen { overflow-x: hidden; overscroll-behavior-x: contain; }
.ll-relief-rollen--wisch { overflow-x: auto; } /* setzt monatsfeld.js, wenn wirklich zu schmal */
.ll-relief { display: grid; grid-template-columns: 4.5em minmax(0, 1fr); gap: 4px 0; align-items: center; }
.ll-relief-titel { align-self: stretch; display: flex; align-items: center; justify-content: flex-end; }
.ll-relief-achse, .ll-relief-titel { position: sticky; left: 0; z-index: 2; }
.ll-relief-rollen--wisch :is(.ll-relief-achse, .ll-relief-titel) { background: var(--ll-relief-grund, var(--ll-flaeche)); } /* Grund hinter dem Monat */
.ll-relief-achse { height: 100%; }
.ll-relief-achse span { position: absolute; right: 8px; translate: 0 -50%; font-size: 0.8em; color: var(--ll-text-2); }
.ll-relief-bild { position: relative; }
.ll-relief canvas { width: 100%; height: clamp(160px, 28vh, 300px); border-radius: 4px; display: block; touch-action: pan-x pan-y; }
.ll-relief-spalte, .ll-relief-zeile, .ll-relief-zeiger { position: absolute; pointer-events: none; }
.ll-relief-spalte { top: 0; bottom: 0; background: color-mix(in srgb, var(--ll-akzent) 22%, transparent); }
.ll-relief-zeile { left: 0; right: 0; background: color-mix(in srgb, var(--ll-akzent) 16%, transparent); }
.ll-relief-zeiger { outline: 2px solid var(--ll-akzent); border-radius: 2px; }
.ll-relief-titel { font-size: 0.75em; color: var(--ll-text-2); text-align: right; padding-right: 8px; }
.ll-relief-reihe { display: grid; text-align: center; font-size: 0.75em; font-variant-numeric: tabular-nums; }
.ll-relief-reihe > * { padding: 2px 0; border-radius: 3px; min-width: 0; overflow: hidden; }
.ll-relief-reihe .ll-tag-knopf { flex-direction: column; align-items: center; gap: 0; padding: 2px 0; text-align: center; }
.ll-relief-ablesung { grid-column: 2; justify-self: start; position: sticky; left: 4.5em; margin: 6px 0 0; font-size: 0.85em; color: var(--ll-text-2); min-height: 1.4em; }

/* Fußzeile: eigene Fläche; ein mittiger Block aus Marke, Knöpfen übereinander, Open-Meteo und Zähler (flach) */
.ll-fuss { padding: 18px max(16px, 4vw); background: var(--ll-fuss-grund); color: var(--ll-fuss-text); }
.ll-fuss-innen {
    /* Gleicher Abstand zwischen allen Teilen; beim Umbruch zentriert */
    display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 18px clamp(28px, 4vw, 64px);
    max-width: 1200px; margin: 0 auto;
}
.ll-fuss-marke { display: flex; align-items: center; gap: 14px; }
/* Wappen so hoch wie der Namensblock daneben */
.ll-fuss-wappen, .ll-fuss-name { height: var(--ll-fuss-marke-hoehe, 76px); width: auto; }
.ll-fuss-mitte { display: flex; flex-direction: column; justify-content: center; align-items: stretch; gap: 6px; }
.ll-fuss-knoepfe { display: flex; flex-direction: column; gap: 6px; }
.ll-fuss .ll-knopf { justify-content: flex-start; min-height: 32px; padding: 4px 12px; background: transparent; color: inherit; border-color: color-mix(in srgb, currentColor 35%, transparent); }
.ll-fuss .ll-knopf:hover { border-color: currentColor; }
/* Blauer Knopf wie Classic (Bootstrap primary): E-Mail in der Fußzeile, Datenschutz in der Hilfe */
.ll-knopf.ll-knopf--blau { background: #0d6efd; border-color: #0d6efd; color: #ffffff; }
.ll-knopf.ll-knopf--blau:hover { background: #0b5ed7; border-color: #0a58ca; color: #ffffff; }
/* Aktuelle Uhrzeit: rote Linie in den Stundenwerten der Nacht (jetzt.js), aktuelle Stunde im Wetterfenster */
.ll-jetzt { position: absolute; z-index: 4; pointer-events: none; background: var(--ll-sm-heute); }
.ll-jetzt--senkrecht { top: 0; bottom: 0; width: 2px; margin-left: -1px; }
.ll-jetzt--waagerecht { left: 0; height: 2px; margin-top: -1px; }
.ll-jetzt-zeile > td:first-child { box-shadow: inset 4px 0 0 var(--ll-sm-heute); }
.ll-hilfe-ende { margin: 1.4em 0 0; padding-top: 1em; border-top: 1px solid var(--ll-linie); }
.ll-hilfe-stufen { border-collapse: separate; border-spacing: 0 3px; margin: 8px 0; }
.ll-hilfe-stufen td { padding: 3px 10px; }
/* Hilfe und Neuigkeiten sind Fließtext: in allen Designs IBM Plex Sans mit normalen Ziffern (Jörg 2026-11-04: „immer Plex“;
   die Design-Schriften Plex Cond bzw. Atkinson mit Null-Strich wirkten dort fremd) */
.ll-dialog--text { font-family: "Plex Sans", system-ui, sans-serif; font-variant-numeric: normal; }
.ll-hilfe-stufen td:first-child { border-radius: 4px; text-align: center; white-space: nowrap; }
/* Beispielwert neben langem Text: so hoch wie die anderen Stufen, oben bündig (Jörg 2026-11-05) */
.ll-hilfe-stufen td.ll-hilfe-chip { padding: 0; vertical-align: top; }
.ll-hilfe-chip > span { display: block; padding: 3px 10px; border-radius: 4px; }
/* Hilfe: Abschnittsköpfe deutlich über den Begriffen; Bilder mit nummerierten Bereichen, Vorschau der Designs */
.ll-dialog--hilfe .ll-dialog-rumpf h3 { margin: 30px 0 10px; padding-bottom: 4px; border-bottom: 2px solid #e6c766; }
.ll-dialog--hilfe .ll-dialog-rumpf section:first-child h3 { margin-top: 0; }
.ll-hilfe-bild { position: relative; margin: 12px 0 14px; }
.ll-hilfe-bild img { display: block; width: 100%; height: auto; border: 1px solid #e6c766; border-radius: 6px; }
.ll-hilfe-bild .ll-hilfe-nr { position: absolute; }
.ll-hilfe-nr { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%;
    background: #e0001b; color: #ffffff; font-size: 13px; font-weight: 700; line-height: 1;
    box-shadow: 0 0 0 2px #ffffff; vertical-align: -5px; }
dt .ll-hilfe-nr { margin-right: 8px; }
.ll-hilfe-designs { display: grid; gap: 12px; margin: 10px 0; }
.ll-hilfe-design { display: grid; grid-template-columns: 170px 1fr; gap: 14px; align-items: start; }
.ll-hilfe-design p { margin: 0; }
.ll-hilfe-design img { display: block; width: 100%; aspect-ratio: 16 / 10; object-fit: cover; object-position: left top;
    border: 1px solid #e6c766; border-radius: 6px; }

.ll-hilfe-dname { display: block; font-size: 1.05rem; font-weight: 700; }
.ll-dialog--hilfe .ll-dialog-rumpf h4 { margin: 16px 0 6px; font-size: 1rem; display: flex; align-items: center; gap: 8px; }
.ll-dialog--hilfe .ll-dialog-rumpf h3 { display: flex; align-items: center; justify-content: space-between; gap: 12px; scroll-margin-top: 8px; }
.ll-hilfe-hoch { display: inline-grid; place-items: center; width: 28px; height: 28px; border: 1px solid #e6c766; border-radius: 6px; flex: none; }
.ll-hilfe-hoch:hover { background: color-mix(in srgb, #e6c766 30%, transparent); }
.ll-hilfe-inhalt { margin: 4px 0 8px; padding: 10px 14px; border: 1px solid #e6c766; border-radius: 6px; scroll-margin-top: 8px; }
.ll-hilfe-inhalt ul { margin: 6px 0 0; padding: 0; list-style: none; columns: 2; column-gap: 24px; }
.ll-hilfe-inhalt li { padding: 2px 0; break-inside: avoid; }
@media (max-width: 520px) { .ll-hilfe-inhalt ul { columns: 1; } }
.ll-hilfe-theorie { font-style: italic; font-size: 0.92em; }
.ll-hilfe-tendenz { border-collapse: collapse; margin: 8px 0; }
.ll-hilfe-tendenz th { text-align: left; padding: 0 0 4px; }
.ll-hilfe-tendenz td { padding: 2px 10px 2px 0; }
.ll-hilfe-tendenz svg { display: block; width: 24px; height: 24px; }
.ll-hilfe-marke { display: inline-block; min-width: 2.4em; padding: 1px 6px; border-radius: 4px; font-size: 0.85em; font-weight: 700; text-align: center; }
@media (max-width: 520px) {
    .ll-dialog--hilfe .ll-liste { grid-template-columns: 1fr; gap: 0; }
    .ll-dialog--hilfe .ll-liste dd { margin-bottom: 8px; }
    .ll-hilfe-design { grid-template-columns: 110px 1fr; gap: 10px; }
    .ll-hilfe-bild .ll-hilfe-nr { width: 15px; height: 15px; font-size: 9.5px; box-shadow: 0 0 0 1.5px #ffffff; }
}
/* Hilfefenster: Grund wie das Design (hell/dunkel), Gelb nur als Streifen oben, Symbolkreise und Linien
   (Jörg 2026-11-04: ganz Hellgelb war zu heftig und blendete nachts); dunkel etwas heller als die Fenster des Designs */
.ll-dialog.ll-dialog--hilfe { border-top: 5px solid #e6c766; }
/* Hilfe und Neuigkeiten (Jörg 2026-11-04: Neuigkeiten mit demselben Grund); dunkel seit 2026-11-05 alle Fenster so (Jörg: „wie CL“) */
:root[data-schema="dunkel"] .ll-dialog.ll-dialog { --ll-dialog-grund: color-mix(in srgb, #f3d98a 5%, color-mix(in srgb, var(--ll-text) 11%, var(--ll-flaeche))); background: var(--ll-dialog-grund); }
:root[data-schema="dunkel"] .ll-dialog .ll-tabelle thead th { background: var(--ll-dialog-grund); } /* stehende Spaltenköpfe im Wetter 10 Tage */
:root[data-schema="dunkel"] .ll-dialog.ll-dialog--text { background: color-mix(in srgb, #f3d98a 5%, color-mix(in srgb, var(--ll-text) 11%, var(--ll-flaeche))); }
.ll-dialog--hilfe :is(.ll-dialog-kopf, .ll-dialog-rumpf) { background: transparent; color: inherit; }
.ll-dialog--hilfe a:not(.ll-knopf) { color: inherit; text-decoration-color: currentColor; }
.ll-dialog--hilfe :focus-visible { outline-color: #e6c766; }
.ll-fuss-openmeteo img { width: 96px; height: auto; display: block; }
/* Besucherzähler: chCounter liefert eine Bootstrap-Tabelle; flach als Zahlenreihe (Zahl groß, Bezeichnung darunter) */
.ll-fuss-zaehler { display: flex; flex-direction: column; justify-content: center; }
.ll-fuss-zaehler .chcTable, .ll-fuss-zaehler .chcTable thead, .ll-fuss-zaehler .chcTable tbody,
.ll-fuss-zaehler .chcTable tr, .ll-fuss-zaehler .chcTable td { display: block; border: 0 !important; background: none !important; color: inherit !important; padding: 0; }
.ll-fuss-zaehler .chcTable { margin: 0; font-variant-numeric: tabular-nums; }
.ll-fuss-zaehler .chcTable thead td { font-size: 0.78em; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; opacity: 0.85; margin-bottom: 6px; text-align: left; }
.ll-fuss-zaehler .chcTable tbody { display: grid; grid-template-columns: repeat(6, auto); gap: 6px 26px; }
.ll-fuss-zaehler .chcTable tr { display: flex; flex-direction: column-reverse; }
.ll-fuss-zaehler .chcTable td:last-child { font-size: 1.2em; font-weight: 700; text-align: left; line-height: 1.15; }
.ll-fuss-zaehler .chcTable td:first-child { font-size: 0.8em; opacity: 0.85; }
@media (max-width: 1100px) {
    .ll-fuss-zaehler .chcTable tbody { grid-template-columns: repeat(3, auto); }
}
@media (max-width: 480px) {
    .ll-fuss-innen { flex-direction: column; }
    /* E-Mail und Links gleich breit (Jörg 11.11.): zwei gleiche Spalten, so breit wie der längere Text, Inhalt mittig */
    .ll-fuss-knoepfe { display: grid; grid-template-columns: repeat(2, 1fr); width: max-content; max-width: 100%; margin-inline: auto; }
    .ll-fuss-knoepfe .ll-knopf { justify-content: center; }
    .ll-fuss-knoepfe > :only-child { grid-column: 1 / -1; } /* ohne Links-Button: E-Mail allein mittig */
}

/* Name: helle Schrift auf dunkler Fußzeile (Standard), dunkle Schrift, wenn das Design .ll-fuss--hell setzt */
.ll-name-dunkelschrift, .ll-fuss--hell .ll-name-hellschrift { display: none; }
.ll-fuss--hell .ll-name-dunkelschrift { display: block; }

/* Mail-Button mit Vorlage in Neuigkeit Nr. 16 (js/rueckmeldung.js mailEinbauen; Freitext und Classic-Frage entfernt 2026-11-07) */
.ll-mail { margin: 4px 0 8px; }

/* Hilfe und Neuigkeiten luftiger und klarer gegliedert (Jörg 2026-11-04: Zeilenabstand zu gering);
   Symbole an Abschnittsköpfen, Inhalt und Changelog-Datum setzt js/inhalte.js */
.ll-dialog--text .ll-dialog-rumpf { padding: 22px 28px 30px; line-height: 1.6; }
:where(.ll-dialog--text .ll-dialog-rumpf) p { margin: 0 0 0.9em; } /* :where: Klassenregeln (Datum, Trenner) gehen vor */
:where(.ll-dialog--text .ll-dialog-rumpf) :is(ul, ol) { margin: 0 0 1em; padding-left: 1.3em; }
:where(.ll-dialog--text .ll-dialog-rumpf) li + li { margin-top: 0.4em; }
.ll-text-symbol { width: 1em; height: 1em; flex: none; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
/* Hilfe: Abschnittskopf mit Symbol im Kreis, mehr Luft davor */
.ll-dialog--hilfe .ll-dialog-rumpf h3 { margin: 46px 0 16px; padding-bottom: 8px; }
.ll-hilfe-kopf { display: inline-flex; align-items: center; gap: 12px; }
.ll-hilfe-kopf .ll-text-symbol { box-sizing: border-box; width: 34px; height: 34px; padding: 7px; border-radius: 50%; background: #ffe08a; color: #664d03; stroke-width: 1.4; }
.ll-dialog--hilfe .ll-dialog-rumpf h4 { margin: 24px 0 8px; }
.ll-hilfe-inhalt { margin: 8px 0 12px; padding: 14px 18px 12px; }
.ll-hilfe-inhalt ul { margin-top: 10px; column-gap: 32px; }
.ll-hilfe-inhalt li { padding: 2px 0; margin: 0 !important; }
.ll-hilfe-inhalt a { display: inline-flex; align-items: center; gap: 9px; }
.ll-hilfe-inhalt .ll-text-symbol { width: 16px; height: 16px; opacity: 0.8; }
/* Begriffe als Zeilen mit feiner Trennlinie */
.ll-dialog--hilfe .ll-liste { gap: 0; margin: 14px 0 18px; }
.ll-dialog--hilfe .ll-liste > dt { padding-right: 20px; } /* Abstand im Feld, sonst hat die Trennlinie eine Lücke */
.ll-dialog--hilfe .ll-liste > :is(dt, dd) { padding-block: 10px; border-top: 1px solid var(--ll-linie); }
.ll-dialog--hilfe .ll-liste > :is(dt, dd):nth-child(-n+2) { padding-top: 0; border-top: 0; }
.ll-dialog--hilfe .ll-liste dt { line-height: 1.6; }
.ll-hilfe-bild { margin: 16px 0 22px; }
.ll-hilfe-designs { gap: 18px; margin: 16px 0; }
.ll-hilfe-stufen, .ll-hilfe-tendenz { margin: 12px 0 18px; }
.ll-hilfe-ende { margin-top: 2em; padding-top: 1.4em; }
@media (max-width: 520px) {
    .ll-dialog--text .ll-dialog-rumpf { padding: 16px 16px 24px; }
    .ll-dialog--hilfe .ll-dialog-rumpf h3 { margin-top: 38px; }
    .ll-hilfe-kopf .ll-text-symbol { width: 30px; height: 30px; padding: 6px; }
    .ll-dialog--hilfe .ll-liste > dt { padding: 12px 0 2px; }
    .ll-dialog--hilfe .ll-liste > dt:first-child { padding-top: 0; }
    .ll-dialog--hilfe .ll-liste > dd { margin-bottom: 0; padding: 0 0 4px; border-top: 0; }
    .ll-changelog li { padding: 9px 11px 10px; }
}

/* Neuigkeiten: Changelog unter der neuesten Meldung, je Datum eine Zeile mit Linie, je Eintrag eine Karte */
.ll-changelog { margin-top: 32px; padding-top: 20px; border-top: 2px solid var(--ll-linie); }
.ll-changelog .ll-datum-zeile { display: flex; align-items: center; gap: 8px; margin: 28px 0 12px; font-size: 0.95em; font-weight: 700; color: var(--ll-text); }
.ll-changelog h3 + .ll-datum-zeile { margin-top: 14px; }
.ll-changelog .ll-datum-zeile .ll-text-symbol { width: 16px; height: 16px; color: var(--ll-text-2); }
.ll-changelog .ll-datum-zeile::after { content: ""; flex: 1; height: 1px; background: var(--ll-linie); }
.ll-changelog ul { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.ll-changelog li + li { margin-top: 0; }
.ll-changelog li, .ll-dialog--text article[data-nr]:not(.ll-changelog) { padding: 10px 14px 11px; border: 1px solid var(--ll-linie); border-left: 3px solid var(--ll-akzent); border-radius: var(--ll-radius);
    background: color-mix(in srgb, var(--ll-text) 3%, transparent); }
.ll-cl-kopf { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin-bottom: 4px; }
.ll-cl-kopf strong { font-size: 1.04em; }
.ll-cl-marke { display: inline-flex; align-items: center; gap: 5px; padding: 0 9px; border-radius: 999px; font-size: 0.78em; font-weight: 600; line-height: 1.75;
    background: color-mix(in srgb, var(--ll-akzent) 16%, transparent); }
.ll-cl-trenner { margin: 40px 0 0; padding-top: 16px; border-top: 2px solid var(--ll-linie);
    font-size: 0.8em; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ll-text-2); }
.ll-changelog .ll-cl-trenner + .ll-datum-zeile { margin-top: 12px; }
/* dunkel: Karten heller als das Fenster, feiner hellerer Rand (Jörg 2026-11-04) */
/* erste Meldung (Nr. 16 mit dem Freitext) als Karte wie die Einträge (Jörg 2026-11-04) */
.ll-dialog--text article[data-nr]:not(.ll-changelog) { padding: 16px 20px 18px; }
@media (max-width: 520px) { .ll-dialog--text article[data-nr]:not(.ll-changelog) { padding: 12px 12px 14px; } }
/* dunkel: Karten etwas heller als der Fenstergrund, feiner hellerer Rand */
:root[data-schema="dunkel"] :is(.ll-changelog li, .ll-dialog--text article[data-nr]:not(.ll-changelog)) {
    background: color-mix(in srgb, #f3d98a 5%, color-mix(in srgb, var(--ll-text) 18%, var(--ll-flaeche)));
    border-color: color-mix(in srgb, var(--ll-text) 26%, var(--ll-flaeche)); border-left-color: var(--ll-akzent); }

/* Standorte teilen (teilen.js) */
.ll-dialog--teilen { width: min(460px, calc(100vw - 24px)); }
.ll-teilen p { margin: 0 0 10px; }
.ll-teilen-wahl { display: grid; gap: 6px; margin: 0 0 12px; padding: 0; border: 0; }
.ll-teilen-wahl .ll-schalter span { overflow-wrap: anywhere; }
.ll-teilen-link { width: 100%; box-sizing: border-box; margin: 0 0 8px; padding: 5px 8px; font: inherit; font-size: 0.85em; border: 1px solid var(--ll-linie); border-radius: var(--ll-radius);
    background: var(--ll-flaeche); color: var(--ll-text); user-select: text; }
.ll-teilen-meldung { font-size: 0.9em; color: var(--ll-text-2); }
.ll-teilen-qr { margin-top: 12px; text-align: center; }
.ll-teilen-qr svg { width: min(240px, 70vw); height: auto; background: #fff; padding: 6px; border-radius: 4px; }
.ll-teilen-qr p, .ll-teilen-klein { margin: 4px 0 0; font-size: 0.85em; color: var(--ll-text-2); }
.ll-teilen-aktionen[hidden] { display: none; }
/* Monat: ganze Zeile wählt den Tag (monatsfeld zeile, Woche/Wetter) */
.ll-monat--zeile tbody tr:has(.ll-tag-knopf) { cursor: pointer; }
/* Hilfe: Icons der Buttons im Text (inhalte.js knoepfeEinsetzen) */
.ll-hilfe-knopf { display: inline-grid; place-items: center; min-width: 1.5em; height: 1.5em; box-sizing: border-box; margin: 0 0.1em; padding: 0 0.3em;
    vertical-align: text-bottom; border: 1px solid var(--ll-linie); border-radius: 4px; background: var(--ll-flaeche); color: var(--ll-text); line-height: 1; font-style: normal; } /* unten bündig zur Schrift (Jörg 05.11.) */
.ll-hilfe-knopf svg { width: 1em !important; height: 1em !important; }
.ll-hilfe-knopf img { width: auto; height: 1.05em; } /* Ko-fi-Becher */
.ll-hilfe-knopf--text { font-size: 0.85em; font-weight: 600; height: calc(1.5em / 0.85); }
.ll-hilfe-knopf:has(svg + svg) { grid-auto-flow: column; gap: 0.25em; } /* Sonne und Mond */
/* Regenradar (regenradar.js): Button unter den Richtungen, Kasten oben links (unter dem Wind, wenn beide an) */
.ll-radar-knopf { position: absolute; top: 136px; right: 10px; z-index: 1000; box-shadow: 0 1px 4px rgb(0 0 0 / 0.3); }
/* gedrückte Karten-Buttons auch beim Darüberfahren (Hover der Designs färbte den Grund hell, das Symbol blieb weiß) */
.ll-karte :is(.ll-wind-knopf, .ll-richtung-knopf, .ll-radar-knopf)[aria-pressed="true"] { background: var(--ll-akzent); border-color: var(--ll-akzent); color: var(--ll-akzent-text, #fff); }
.ck-karte .ll-radar-knopf { top: 102px; right: 6px; width: 26px; min-height: 26px; }
.ll-wind-stand.ll-radar-stand { white-space: normal; }
.ll-karte--wind .ll-radar-stand { top: 44px; }
.ck-karte.ll-karte--wind .ll-radar-stand { top: 36px; }
.ll-radar-legende { display: flex; flex-wrap: wrap; gap: 0 6px; margin-top: 2px; font-size: 11px; }
.ll-radar-legende span { display: inline-flex; align-items: center; gap: 3px; }
.ll-radar-legende i { width: 10px; height: 8px; border-radius: 2px; box-shadow: 0 0 0 1px rgb(0 0 0 / 0.2); }
/* Regenradar Layout A (Jörg 11.11., für alle seit 12.11.): runde ▶-Taste, Uhrzeit groß, gemessen/Vorhersage, Zeitleiste, Spinner */
.ll-wind-stand.ll-radar-stand.ll-ra-an { width: min(280px, calc(100% - 100px)); max-width: none; padding: 6px 8px; border-radius: 6px; }
.ll-ra-kopf { display: flex; align-items: center; gap: 8px; min-height: 26px; }
.ll-radar-stand .ll-ra-spiel { flex: none; display: grid; place-items: center; width: 26px; height: 26px; padding: 0; border: 0; border-radius: 50%;
    background: #0d6efd; color: #fff; font-size: 11px; line-height: 1; }
.ll-radar-stand .ll-ra-spiel:disabled { cursor: progress; }
.ll-wind-stand.ll-radar-stand.ll-ra-an { overflow: visible; } /* Tempo-Menü ragt heraus */
.ll-ra-tempowahl { position: relative; flex: none; margin-left: auto; }
.ll-radar-stand .ll-ra-tempo { display: inline-flex; align-items: center; gap: 3px; height: 22px; padding: 0 6px 0 8px; border: 1px solid rgb(0 0 0 / 0.25); border-radius: 999px;
    background: #fff; color: #1d2125; font: inherit; font-size: 11px; font-weight: 600; font-variant-numeric: tabular-nums; cursor: pointer; }
.ll-radar-stand .ll-ra-tempo svg { width: 9px; height: 9px; fill: none; stroke: currentColor; stroke-width: 1.6; }
.ll-radar-stand .ll-ra-tempo:hover, .ll-radar-stand .ll-ra-tempo[aria-expanded="true"] { border-color: #0d6efd; color: #0d6efd; }
.ll-ra-tempomenue { position: absolute; top: calc(100% + 4px); right: 0; z-index: 2; display: grid; min-width: 64px; padding: 4px; border-radius: 6px;
    background: #fff; box-shadow: 0 4px 14px rgb(0 0 0 / 0.25); }
.ll-ra-tempomenue[hidden] { display: none; }
.ll-radar-stand .ll-ra-tempomenue button { display: flex; align-items: center; gap: 6px; min-height: 28px; padding: 2px 8px; border: 0; border-radius: 4px; background: none;
    color: #1d2125; font: inherit; font-size: 12px; font-variant-numeric: tabular-nums; text-align: left; cursor: pointer; }
.ll-radar-stand .ll-ra-tempomenue svg { width: 10px; height: 10px; fill: none; stroke: currentColor; stroke-width: 1.8; visibility: hidden; }
.ll-radar-stand .ll-ra-tempomenue button[aria-checked="true"] { font-weight: 700; color: #0d6efd; }
.ll-radar-stand .ll-ra-tempomenue button[aria-checked="true"] svg { visibility: visible; }
.ll-radar-stand .ll-ra-tempomenue button:hover, .ll-radar-stand .ll-ra-tempomenue button:focus-visible { background: #e3ecfb; outline: none; }
.ll-radar-stand .ll-ra-icon { display: block; width: 12px; height: 12px; fill: currentColor; stroke: none; }
.ll-ra-zeit { font-size: 18px; line-height: 1; font-variant-numeric: tabular-nums; }
.ll-ra-zeit:empty { display: none; }
.ll-ra-art { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11px; color: #555; }
.ll-ra-art--gem, .ll-ra-art--vor { padding: 1px 6px; border-radius: 999px; font-weight: 600; }
.ll-ra-art--gem { background: #e3ecfb; color: #1d4f9c; }
.ll-ra-art--vor { background: #fbefd5; color: #7a4d00; }
.ll-ra-spin { width: 16px; height: 16px; border: 2.5px solid rgb(255 255 255 / 0.35); border-top-color: #fff; border-radius: 50%; animation: ll-drehen 0.8s linear infinite; }
.ll-ra-leiste { display: block; position: relative; margin-top: 4px; }
.ll-ra-felder { display: flex; gap: 2px; }
.ll-radar-stand .ll-ra-felder button { position: relative; flex: 1; min-width: 0; height: 20px; padding: 0; border: 0; background: none; cursor: pointer; }
.ll-ra-felder button::after { content: ""; position: absolute; inset: 6px 0; border-radius: 2px; background: #6d8fc4; }
.ll-ra-felder button.ll-ra-v::after { background: repeating-linear-gradient(135deg, #e0a630 0 3px, #f6dfae 3px 6px); }
.ll-ra-felder button.ll-ra-fehlt::after { background: #d9dde3; }
.ll-ra-felder button[aria-current]::after { inset: 1px 0; outline: 2px solid #1d2125; outline-offset: -1px; }
.ll-ra-felder button:hover::after { inset: 3px 0; }
.ll-ra-achse { display: block; position: relative; height: 12px; font-size: 10px; line-height: 12px; color: #555; }
.ll-ra-achse span { position: absolute; top: 0; translate: -50% 0; }
.ll-ra-jetzt { position: absolute; top: -18px; width: 2px; height: 18px; margin-left: -1px; border-radius: 1px; background: #d6336c; pointer-events: none; }
.ll-ra-an .ll-radar-legende { margin-top: 2px; }
.ll-radar--kacheln, .ll-radar--bild { transition: opacity 0.25s; } /* Wechsel der Uhrzeit überblenden (Yr, DWD) */
.ll-ra-quelle { display: block; margin-top: 1px; font-size: 10px; color: #666; }
.ll-radar-fehlt .ll-ra-kopf::after { content: attr(data-fehlt); color: #b42318; font-size: 11px; } /* Text übersetzt aus regenradar.js */
.ll-karte .ll-radar-knopf.ll-laedt svg { opacity: 0.2; }
.ll-karte .ll-radar-knopf.ll-laedt::after { content: ""; position: absolute; top: 50%; left: 50%; width: 12px; height: 12px; margin: -8px 0 0 -8px;
    border: 2px solid rgb(13 110 253 / 0.25); border-top-color: #0d6efd; border-radius: 50%; animation: ll-drehen 0.8s linear infinite; }
/* Amtliche Warnungen des DWD (wetterliste.js dwdMarken): Marke in der Farbe der Warnstufe (gelb, orange, rot, violett) */
.ll-dwd { display: inline-block; padding: 0 5px; border: 1px solid color-mix(in srgb, var(--dwd) 72%, #000); border-radius: 2px; font-weight: 700; line-height: 17px;
    background: var(--dwd); color: #1d2125; white-space: nowrap; } /* 1-px-Rand wie Glätte/Frost: gleich hoch (Jörg 05.11.) */
.ll-dwd--3, .ll-dwd--4 { color: #fff; }
/* „DWD“ in der eigenen Marke (Frost, Glätte, Sturm), wenn der DWD dazu warnt: Farbe der Warnstufe */
.ll-dwd-zusatz { color: var(--dwd); font-size: 0.78em; font-weight: 700; letter-spacing: 0.02em; } /* nur Schrift in der Farbe der Warnstufe (Jörg 05.11.: Hintergrund zu fett) */
:root:not([data-schema="dunkel"]) .ll-dwd-zusatz { color: color-mix(in srgb, var(--dwd) 46%, #000); } /* hell: Gelb abgedunkelt, sonst unlesbar (46 %: Kontrast ≥ 4,5:1) */
/* Marke mit „DWD“: Inhalt als Zeile, DWD vertikal mittig (Jörg 05.11.) */
:is(.ck-frost, .ck-warn, .wb-frost, .wb-warn, .we-frost, .we-warn):has(.ll-dwd-zusatz) { display: inline-flex; align-items: center; gap: 0.3em; }
/* Werte in den Marken Frost, Glätte, Sturm (Stunden, min/max) */
.ll-marke-wert { font-weight: 400; white-space: nowrap; }

/* Sprungleiste am Handy (js/sprungleiste.js): unter dem Kopf, bleibt beim Scrollen oben; Farben wie der Kopf, aktueller Bereich unterstrichen */
.ll-sprung { display: none; }
@media (max-width: 820px) {
    .ll-sprung { position: sticky; top: 0; z-index: 1500; display: flex; background: var(--ll-kopf-grund); color: var(--ll-kopf-text);
        box-shadow: 0 1px 3px rgb(0 0 0 / 0.25); }
    .ll-sprung button { flex: 1 1 0; min-width: 0; height: 40px; padding: 0 2px; border: 0; background: none; color: inherit; font: 600 13px/1 var(--ll-schrift);
        opacity: 0.72; cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; -webkit-tap-highlight-color: transparent; }
    .ll-sprung button[aria-current] { opacity: 1; box-shadow: inset 0 -3px 0 currentColor; }
    .ll-sprung button:focus-visible { outline: 2px solid currentColor; outline-offset: -4px; }
}

/* Hilfe: Nachbildung der Sprungleiste (inhalt/hilfe-<design>.html) */
.ll-hilfe-sprung { display: inline-flex; flex-wrap: wrap; margin: 2px 0 4px; border-radius: 3px; background: var(--ll-kopf-grund); color: var(--ll-kopf-text);
    font: 600 0.85em/1 var(--ll-schrift); vertical-align: middle; }
.ll-hilfe-sprung b { padding: 7px 9px 6px; font-weight: inherit; opacity: 0.72; }
.ll-hilfe-sprung b[aria-current] { opacity: 1; box-shadow: inset 0 -3px 0 currentColor; }

/* Rotlicht (js/farbschema.js, data-rot aus lib/farbschema.php): dunkles Schema, alles nur noch in Rot. Zwei Schichten über allem:
   „saturation“ mit Grau macht Graustufen (Helligkeit bleibt), „multiply“ mit Rot lässt nur den Rotkanal (85 %); Grün und Blau = 0.
   (Ein SVG-Filter auf <html> greift in Firefox nicht.) Fenster und Erklärungen liegen in der obersten Ebene und bekommen eigene Schichten. */
:root[data-rot]::before, :root[data-rot]::after { content: ""; position: fixed; inset: 0; z-index: 2147483647; pointer-events: none; }
:root[data-rot] :is(dialog[open], .ll-info)::before, :root[data-rot] :is(dialog[open], .ll-info)::after {
    content: ""; position: absolute; inset: 0; z-index: 2147483647; border-radius: inherit; pointer-events: none; }
:root[data-rot]::before, :root[data-rot] :is(dialog[open], .ll-info)::before { background: #808080; mix-blend-mode: saturation; }
:root[data-rot]::after, :root[data-rot] :is(dialog[open], .ll-info)::after { background: rgb(217 0 0); mix-blend-mode: multiply; }
:root[data-rot] .ll-dialog::backdrop { background: rgb(0 0 0 / 0.6); }
/* Button: hell → Mond, dunkel → roter Mond (schaltet auf Rotlicht), Rotlicht → Sonne */
.ll-schema-rot { display: none; }
.ll-schema-rot path { fill: #e5484d; stroke: #e5484d; }
@media (pointer: coarse) { /* nur Handy/Tablet */
    :root[data-schema="dunkel"]:not([data-rot]) .ll-schema-rot { display: block; }
    :root[data-schema="dunkel"]:not([data-rot]) :is(.ck-schema-sonne, .wb-schema-sonne, .we-schema-sonne) { display: none; }
}
/* Was die Schichten nicht erreichen (Rahmen der Fenster, aufgeklappte Auswahllisten, Bildlaufleisten des Browsers), direkt in Rot */
:root[data-rot] :is(dialog, .ll-info) { border-color: rgb(90 0 0) !important; box-shadow: none !important; }
/* Felder selbst liegen unter den Schichten (helle Schrift wird dort hellrot; reines Rot würde dunkel); die aufgeklappte Liste zeichnet der
   Browser außerhalb der Seite, sie bekommt Rot direkt */
:root[data-rot] :is(select, input, textarea) { color-scheme: dark; }
:root[data-rot] :is(option, optgroup) { background-color: #000 !important; color: rgb(217 0 0) !important; }
:root[data-rot] { accent-color: rgb(170 0 0); scrollbar-color: rgb(90 0 0) #000; }
:root[data-rot] * { scrollbar-color: rgb(90 0 0) #000; }
/* Hilfe: kleines Bild vom Rotlicht neben dem Text (Jörg 05.11.: „sonst probiert das niemand“) */
.ll-hilfe-rotbild { float: right; margin: 10px 10px 10px 16px; }
.ll-hilfe-rotbild img { display: block; width: 96px; height: auto; border: 1px solid #e6c766; border-radius: 6px; }
.ll-liste dd:has(.ll-hilfe-rotbild) { display: flow-root; }
/* Hilfe: lange Einträge in Absätze gegliedert (Jörg 05.11.: „Texte besser strukturieren“) */
.ll-liste dd > p { margin: 0 0 0.5em; }
.ll-liste dd > p:last-child { margin-bottom: 0; }

/* Offline (js/offline.js): unten mittig, solange Daten aus der Kopie im Browser stammen */
.ll-offline { position: fixed; left: 50%; bottom: max(12px, env(safe-area-inset-bottom)); translate: -50% 0; z-index: 1600; padding: 6px 12px;
    border-radius: 999px; background: #3a2a00; color: #ffe08a; border: 1px solid #b8932e; font: 600 13px/1.2 var(--ll-schrift); white-space: nowrap;
    box-shadow: 0 2px 8px rgb(0 0 0 / 0.35); }
.ll-offline[hidden] { display: none; }

/* Wind am Ansitz (js/richtungen.js): ▶ vorn in der Stundenleiste, Zeile darunter (Pfeil in Zugrichtung, Streuung klein) */
.ll-richtung-leiste .ll-rl-spiel { flex: 0 0 22px; justify-content: center; background: var(--ll-flaeche); color: var(--ll-text); box-shadow: inset 0 0 0 1px var(--ll-linie); }
.ll-richtung-leiste .ll-rl-spiel svg { width: 12px; height: 12px; }
/* Pfeil links, Text daneben und nur in seiner Spalte umbrochen; mindestens 50 px hoch, damit beim Tageswechsel nichts springt (Jörg 2026-11-07) */
.ll-richtung-wind { display: flex; align-items: flex-start; gap: 4px; margin: 0; font-size: 12px; line-height: 1.35; min-height: 35px; color: var(--ll-text); } 
.ll-rw-text { flex: 1; min-width: 0; }
/* Datum der Nacht in der Windzeile nur am Handy: dort steht die Karte weit unter dem Datum im Kopf (Jörg 08.11.) */
.ll-rw-datum { display: none; }
@media (max-width: 820px) { .ll-rw-datum { display: block; font-weight: 600; } }
.ll-richtung-wind[hidden] { display: none; }
.ll-rw-pfeil { flex: none; margin-top: 1px; width: 15px; height: 15px; fill: none; stroke: #ff8a00; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.ll-rw-still { flex: none; margin: 3px 2px 0; width: 11px; height: 11px; border: 2px dashed #ff8a00; border-radius: 50%; }
.ll-rw-streu { color: var(--ll-text-2); }
.ll-karte--gross ~ .ll-richtung-wind { display: none; } /* vergrößert: nur der Kegel */
/* vergrößerte Karte: gewählte Stunde mit kräftigem orangem Rahmen außen (über den Nachbarn), sonst beim Abspielen schwer zu finden;
   Weiß hob sich zu wenig ab, Orange wie der Windkegel (Jörg 05.11.) */
.ll-karte--gross ~ .ll-richtung-leiste button[aria-pressed="true"] { position: relative; z-index: 1; outline: 3px solid #ff8a00; outline-offset: 0;
    box-shadow: 0 0 0 4px rgb(0 0 0 / 0.6); }

/* Finsternisse (js/finsternis.js): Kürzel MF/SF neben dem Tag im Monat und in der Legende */
:root { --ll-fin: #b4441c; }
:root[data-schema="dunkel"] { --ll-fin: #ff9a76; }
/* Sonne bleibt darüber/darunter statt Uhrzeit (js/polar.js sonnenWert, 2026-11-10) */
.ll-ohne { display: inline-block; width: 1em; height: 1em; vertical-align: -0.14em; }
.ll-ohne svg { display: block; width: 100%; height: 100%; }
.ll-fin-tag { margin-left: 3px; font-size: 0.7em; font-weight: 700; color: var(--ll-fin); }
.ll-legende-fin { color: var(--ll-fin); font-weight: 600; }

/* Pegel (js/pegel.js): Zeile unter den Koordinaten, Hochwasser rot */
.ll-pegel { margin: 6px 0 0; font-size: 12.5px; line-height: 1.45; color: var(--ll-text); }
.ll-pegel[hidden] { display: none; }
.ll-pegel svg { display: inline-block; vertical-align: -3px; width: 15px; height: 15px; margin-right: 5px; fill: none; stroke: #3f86c9; stroke-width: 1.6; stroke-linecap: round; }
.ll-pegel small { color: var(--ll-text-2); font-size: 1em; }
.ll-pegel a { color: inherit; }
.ll-pegel--hoch b { color: var(--ll-markierung); }
.ll-pegel--laedt { opacity: 0.55; }
/* Erklärung mit Tabelle bzw. Aufzählung (js/erklaerung.js fuellen) */
.ll-info-punkt { padding-left: 0.85em; text-indent: -0.85em; }
.ll-info-tabelle { border-collapse: collapse; margin: 0 0 2px; white-space: normal; font-variant-numeric: tabular-nums; }
.ll-info-tabelle th { font-weight: 600; text-align: left; color: #b9bec5; border-bottom: 1px solid rgb(255 255 255 / 0.25); }
.ll-info-tabelle :is(th, td) { padding: 2px 6px; vertical-align: top; }
.ll-info-tabelle :is(th, td):first-child { padding-left: 0; }
.ll-info-tabelle :is(th, td):not(:first-child) { text-align: right; white-space: nowrap; }
.ll-info-tabelle :is(th, td):last-child { text-align: left; padding-right: 0; }
.ll-info-tabelle tr + tr td { border-top: 1px solid rgb(255 255 255 / 0.1); }

/* Changelog mit Appetizer (js/inhalte.js changelogGliedern): Bild der Funktion rechts, am Handy oben; Symbol des Buttons vor dem Thema */
.ll-cl-mitbild { display: grid; grid-template-columns: minmax(0, 1fr) 190px; gap: 8px 16px; align-items: start; }
.ll-cl-text { grid-column: 1; grid-row: 1; }
.ll-cl-bild { grid-column: 2; grid-row: 1; display: block; width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; border: 1px solid var(--ll-linie); border-radius: 6px; }
.ll-cl-kopf .ll-hilfe-knopf { margin: 0; }
/* langer Titel neben dem Symbol bricht selbst um, statt in eine eigene Zeile zu rutschen (Handy) */
.ll-cl-kopf .ll-hilfe-knopf + strong { flex: 1 1 0; min-width: 9em; }
@media (max-width: 560px) {
    .ll-cl-mitbild { grid-template-columns: minmax(0, 1fr); }
    .ll-cl-bild { grid-column: 1; grid-row: 1; }
    .ll-cl-text { grid-row: 2; }
}
/* Hilfe mit Erklärgrafik (Jörg 05.11.: grafisch statt Zeitung): inline-SVG, Farben aus dem Design (hell/dunkel), Legende daneben bzw. darunter */
.ll-hilfe-grafik { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; margin: 10px 0 12px; }
.ll-hilfe-grafik > svg { flex: 0 1 340px; width: 100%; max-width: 340px; height: auto; stroke: none; stroke-width: 1; fill: none; }
.ll-hilfe-legende svg { stroke: none; fill: none; }
.ll-hilfe-grafik .hg-grund { fill: color-mix(in srgb, var(--ll-text) 7%, transparent); }
.ll-hilfe-grafik .hg-feld { fill: var(--ll-flaeche); stroke: var(--ll-linie); }
.ll-hilfe-grafik .hg-voll { fill: var(--ll-text); }
.ll-hilfe-grafik .hg-linie { stroke: var(--ll-text-2); stroke-width: 1; }
.ll-hilfe-grafik .hg-text { fill: var(--ll-text); font-size: 11px; }
.ll-hilfe-grafik .hg-leise { fill: var(--ll-text-2); }
.ll-hilfe-grafik .hg-chip { font-size: 10px; font-weight: 600; }
.ll-hilfe-grafik .hg-klein { font-size: 10px; font-variant-numeric: tabular-nums; }
.ll-hilfe-legende { flex: 1 1 200px; display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; font-size: 0.92em; line-height: 1.35; }
.ll-hilfe-legende li { display: flex; align-items: center; gap: 10px; }
.ll-hilfe-legende svg { flex: 0 0 26px; width: 26px; height: 12px; }
.ll-hilfe-grafik .hg-strich { fill: none; stroke: var(--ll-text); stroke-width: 1.4; }
.ll-hilfe-grafik .hg-fett { font-weight: 700; }
.ll-hilfe-grafik--schmal > svg { flex: 0 0 150px; max-width: 150px; }
.ll-hilfe-grafik .hg-tag { fill: var(--ll-linie); }
.ll-hilfe-grafik .hg-dunkel { fill: var(--ll-h0, #24415b); }
.ll-hilfe-grafik .hg-null { stroke: var(--ll-text); stroke-width: 2; }
.ll-hilfe-grafik .hg-major, .ll-hilfe-legende .hg-major { fill: var(--ll-major); }
.ll-hilfe-grafik .hg-minor, .ll-hilfe-legende .hg-minor { fill: var(--ll-minor); }
.ll-hilfe-knopf--anzeige { border-color: transparent; background: none; } /* Anzeige statt Button (Pegel): ohne Rahmen */
/* Hilfe: Leiste der Standort-Buttons (echte Symbole über data-knopf), Beschriftung darunter */
.ll-hilfe-leiste { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 10px 14px; padding: 10px 12px; border-radius: 6px;
    background: color-mix(in srgb, var(--ll-text) 7%, transparent); }
.ll-hilfe-leiste > span { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.ll-hilfe-leiste .ll-hilfe-knopf { font-size: 1.15em; margin: 0; }
.ll-hilfe-leiste small { font-size: 0.8em; color: var(--ll-text-2); }
.ll-hilfe-leiste-feld b .ll-flagge { display: inline-block; width: 21px; height: 14px; object-fit: cover; vertical-align: -2px; margin-right: 7px; } /* Platzwahl mit Flagge (2026-11-12) */
.ll-hilfe-leiste-feld b { display: block; min-width: 10em; padding: 3px 26px 3px 8px; border: 1px solid var(--ll-linie); border-radius: 4px; background: var(--ll-flaeche);
    font-weight: 400; line-height: 1.45; position: relative; }
.ll-hilfe-leiste-feld b::after { content: "▾"; position: absolute; right: 8px; color: var(--ll-text-2); }
.ll-hilfe-grafik .hg-wolke { fill: var(--ll-text-2); }
/* Farbskalen Temperatur/Niederschlag in der Hilfe (statt in der Legende des Cockpits, Jörg 08.11.2026): Farben wie js/skalen.js, Zahlen am Anfang ihrer Stufe */
.ll-hilfe-skala { display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); column-gap: 1px; row-gap: 3px; max-width: 340px; margin: 4px 0 2px; }
.ll-hilfe-skala i { grid-row: 1; height: 14px; box-shadow: inset 0 0 0 1px rgb(0 0 0 / 0.12); }
.ll-hilfe-skala b { grid-row: 2; justify-self: start; transform: translateX(-50%); font-weight: 400; font-size: 0.85em; white-space: nowrap; }
.ll-hilfe-skala b:first-of-type { transform: none; }
.ll-hilfe-skala b:last-of-type { justify-self: end; transform: none; grid-column-end: -1 !important; }
.ll-hilfe-sicht { display: inline-block; padding: 0 6px; border-radius: 3px; font-size: 0.9em; }
/* Luftdrucktendenz als Kacheln (Symbol über dem Namen) statt langer Tabelle */
.ll-hilfe-kacheln { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 6px; margin: 10px 0 16px; }
.ll-hilfe-kacheln > span { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 8px 4px; border-radius: 6px; text-align: center;
    font-size: 0.85em; line-height: 1.3; background: color-mix(in srgb, var(--ll-text) 7%, transparent); }
.ll-hilfe-kacheln svg { width: 28px; height: 28px; }

/* Sprachwahl (lib/sprache.php, Jörg 06.11.): Dropdown im Kopf wie die Designwahl – Button mit Flagge + Kürzel, Menü mit Flagge + Name */
.ll-sprachwahl { position: relative; }
.ll-sprachwahl > summary { list-style: none; position: relative; display: inline-flex; align-items: center; gap: 7px; height: 36px; padding: 0 30px 0 10px;
    font-size: 0.92em; border: 1px solid color-mix(in srgb, currentColor 35%, transparent); border-radius: var(--ll-radius); cursor: pointer; user-select: none; }
.ll-sprachwahl > summary::-webkit-details-marker { display: none; }
.ll-sprachwahl > summary::after { content: ""; position: absolute; right: 12px; top: 50%; width: 6px; height: 6px; pointer-events: none;
    border: solid currentColor; border-width: 0 1.5px 1.5px 0; transform: translateY(-70%) rotate(45deg); }
.ll-sprachwahl[open] > summary::after { transform: translateY(-30%) rotate(225deg); }
.ll-sprachwahl > summary:focus-visible { outline: 2px solid var(--ll-akzent); outline-offset: 3px; }
.ll-flagge { flex: none; width: 21px; height: 14px; border-radius: 2px; box-shadow: 0 0 0 1px rgb(0 0 0 / 0.3); }
.ll-sprachmenue { position: absolute; left: 0; top: calc(100% + 4px); z-index: 1700; min-width: 9.5em; margin: 0; padding: 4px; list-style: none;
    background: #ffffff; color: #1d1d1b; border-radius: var(--ll-radius); box-shadow: 0 4px 16px rgb(0 0 0 / 0.28); font-size: 0.95rem; }
.ll-sprachmenue a { display: flex; align-items: center; gap: 9px; padding: 8px 10px; border-radius: 4px; color: inherit; text-decoration: none; white-space: nowrap; }
.ll-sprachmenue a:hover, .ll-sprachmenue a:focus-visible { background: #e9eef3; outline: none; }
.ll-sprachmenue a[aria-current] { font-weight: 600; }
.ll-sprachmenue a[aria-current]::after { content: "✓"; margin-left: auto; padding-left: 12px; }
/* geplante Sprachen (Jörg 06.11.2026): ausgegraut, nicht wählbar; Hinweis „In Vorbereitung“ per data-info */
.ll-sprachmenue { max-height: calc(100dvh - 70px); overflow-y: auto; overscroll-behavior: contain; }
/* zwei Spalten (Jörg 07.11.2026): alphabetisch erst die linke, dann die rechte Spalte */
.ll-sprachmenue { column-count: 2; column-gap: 4px; }
.ll-sprachmenue li { break-inside: avoid; }
/* Bulgarisch (Probe 2026-11-10): ohne die bulgarischen Glyphenformen (OpenType locl) – die sind breiter, die Stundenliste der Woche ragte bei 360 px
   um 9 px heraus; Buchstaben dann wie Ukrainisch/Russisch (Jörg entscheidet beim Freischalten, Glossar bg) */
html:lang(bg) { font-feature-settings: "locl" 0; }
.ll-sprache-bald { display: flex; align-items: center; gap: 9px; padding: 8px 10px; white-space: nowrap; color: #8a8a86; cursor: default; }
.ll-sprache-bald .ll-flagge { opacity: 0.4; filter: grayscale(0.6); }
@media (max-width: 820px) { /* Handy: 20 Sprachen passen ohne Scrollen unter den Kopf, sonst scrollt das Menü selbst */
    .ll-sprachmenue { max-height: calc(100dvh - 160px); }
    .ll-sprachmenue a, .ll-sprache-bald { padding-top: 5px; padding-bottom: 5px; } }

/* Nächste Finsternisse am Standort (Jörg 2026-11-11, js/finsternisliste.js): Button neben „Wetter 10 Tage“, Fenster mit Karten */
.ll-fin-symbol-sonne { fill: currentColor; fill-opacity: 0.22; }
.ll-fin-symbol-schatten { fill: currentColor; stroke: none; }
.ll-dialog--fin { width: min(500px, calc(100vw - 24px)); }
.ll-fin-liste { display: grid; gap: 12px; }
.ll-fin-ort { margin: 0; color: var(--ll-text-2); font-size: 0.9rem; line-height: 1.45; }
.ll-fin-ort b { display: block; color: var(--ll-text); font-size: 1rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ll-fin-eintraege { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.ll-fin-eintrag {
    --fin-farbe: var(--ll-fin);
    display: grid; grid-template-columns: 52px minmax(0, 1fr) 16px; align-items: center; gap: 12px; width: 100%;
    padding: 10px 12px 10px 10px; border: 1px solid var(--ll-linie); border-left: 4px solid var(--fin-farbe); border-radius: 10px;
    background: var(--ll-flaeche); color: var(--ll-text); font: inherit; text-align: left; cursor: pointer;
    transition: border-color 0.15s, box-shadow 0.15s, transform 0.15s;
}
.ll-fin-eintrag--sonne { --fin-farbe: #e8a317; }
.ll-fin-eintrag:hover, .ll-fin-eintrag:focus-visible { border-color: var(--fin-farbe); box-shadow: 0 4px 14px rgb(0 0 0 / 0.12); transform: translateY(-1px); outline: none; }
.ll-fin-eintrag[aria-current] { background: color-mix(in srgb, var(--fin-farbe) 9%, var(--ll-flaeche)); }
.ll-dialog .ll-fin-bild svg { display: block; width: 52px; height: 52px; stroke: none; }
.ll-fin-mondscheibe { fill: #e9e3d3; }
.ll-fin-kernschatten { fill: #2e201c; opacity: 0.9; }
.ll-fin-mondschatten { fill: #1d2026; }
.ll-fin-hof { fill: #ffc53d; opacity: 0.2; }
.ll-fin-hof--rot { fill: #c8643a; opacity: 0.22; }
:root[data-schema="dunkel"] .ll-fin-mondschatten { fill: #07080a; }
.ll-fin-text { display: grid; gap: 2px; min-width: 0; }
.ll-fin-datum { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; }
.ll-fin-datum b { font-size: 1.02rem; font-variant-numeric: tabular-nums; }
.ll-fin-bald { padding: 0 8px; border-radius: 999px; background: color-mix(in srgb, var(--fin-farbe) 14%, transparent);
    color: color-mix(in srgb, var(--fin-farbe) 75%, var(--ll-text)); font-size: 0.78rem; font-weight: 600; line-height: 1.6; }
.ll-fin-art { font-weight: 600; }
.ll-fin-eintrag--total .ll-fin-art { color: color-mix(in srgb, var(--fin-farbe) 80%, var(--ll-text)); }
.ll-fin-groesse { margin-left: 8px; font-weight: 400; color: var(--ll-text-2); font-size: 0.9em; }
.ll-fin-zeiten { font-size: 0.88rem; color: var(--ll-text-2); font-variant-numeric: tabular-nums; }
.ll-fin-sicht { font-size: 0.82rem; color: var(--ll-text-2); font-style: italic; }
.ll-dialog .ll-fin-pfeil { width: 16px; height: 16px; color: var(--ll-text-2); }
.ll-fin-eintrag:hover .ll-fin-pfeil { color: var(--fin-farbe); }
.ll-fin-hinweis { margin: 0; color: var(--ll-text-2); font-size: 0.82rem; line-height: 1.45; }
.ll-fin-warnung { margin: 0; padding: 6px 10px; border-radius: 6px; background: color-mix(in srgb, #e8a317 16%, transparent); font-size: 0.82rem; font-weight: 600; }
@media (max-width: 420px) {
    .ll-fin-eintrag { grid-template-columns: 40px minmax(0, 1fr); gap: 10px; padding: 8px 10px 8px 8px; }
    .ll-dialog .ll-fin-pfeil { display: none; }
    .ll-dialog .ll-fin-bild svg { width: 40px; height: 40px; }
}

/* Links (Jörg 2026-11-11, js/linkliste.js): Button unter „E-Mail“ in der Fußzeile, Fenster mit Seiten, die LunaLink verlinken (nach Ländern) */
.ll-dialog--lk { width: min(640px, calc(100vw - 24px)); }
/* feste Größe: Filtern auf ein Land lässt das Fenster nicht schrumpfen (Jörg 11.11.) */
.ll-dialog--lk[open] { display: flex; flex-direction: column; height: min(860px, calc(100dvh - 32px)); }
.ll-dialog--lk .ll-dialog-rumpf { flex: 1 1 auto; min-height: 0; max-height: none; }
.ll-lk-eintrag.ll-lk-probe { border-style: dashed; } /* nur Admin/Sprachprobe: Seite hat noch nicht zugestimmt */
/* Überschrift und Hinweis so groß wie in Hilfe und Neuigkeiten (Jörg 11.11.2026) */
.ll-dialog--lk .ll-dialog-kopf h2 { font-size: 1.45rem; font-weight: 700; }
.ll-lk-hinweis { margin: 0 0 12px; color: var(--ll-text-2); font-size: 1em; line-height: 1.45; }
.ll-dialog svg.ll-flagge { width: 21px; height: 14px; stroke: none; }
/* Länderwahl als Auswahlfeld (Jörg 12.11.2026): wie die Sprachwahl – Flagge, Land, Anzahl rechts; Menü schwebt über der Liste */
.ll-lk-wahl { position: relative; margin: 0 0 4px; }
.ll-lk-wahl > summary { list-style: none; position: relative; display: flex; align-items: center; gap: 9px; width: min(100%, 320px); min-height: 40px;
    padding: 0 34px 0 12px; border: 1px solid var(--ll-linie); border-radius: var(--ll-radius); background: var(--ll-flaeche); color: var(--ll-text);
    font-size: 0.95rem; cursor: pointer; user-select: none; }
.ll-lk-wahl > summary::-webkit-details-marker { display: none; }
.ll-lk-wahl > summary::after { content: ""; position: absolute; right: 14px; top: 50%; width: 6px; height: 6px; pointer-events: none;
    border: solid currentColor; border-width: 0 1.5px 1.5px 0; transform: translateY(-70%) rotate(45deg); }
.ll-lk-wahl[open] > summary::after { transform: translateY(-30%) rotate(225deg); }
.ll-lk-wahl > summary:hover { border-color: #0d6efd; }
.ll-lk-wahl > summary:focus-visible { outline: 2px solid var(--ll-akzent); outline-offset: 2px; }
.ll-lk-wahl small { margin-left: auto; padding-left: 12px; color: var(--ll-text-2); font-size: 0.85rem; font-variant-numeric: tabular-nums; }
.ll-dialog .ll-lk-welt { flex: none; width: 21px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.2; color: var(--ll-text-2); }
.ll-lk-wahlmenue { position: absolute; left: 0; top: calc(100% + 4px); z-index: 5; width: min(100%, 320px); max-height: min(480px, 60dvh); overflow-y: auto;
    overscroll-behavior: contain; margin: 0; padding: 4px; list-style: none; border: 1px solid var(--ll-linie); border-radius: var(--ll-radius);
    background: var(--ll-flaeche); box-shadow: 0 6px 20px rgb(0 0 0 / 0.22); }
.ll-lk-option { display: flex; align-items: center; gap: 9px; width: 100%; min-height: 36px; padding: 4px 10px; border: 0; border-radius: 4px;
    background: none; color: var(--ll-text); font: inherit; font-size: 0.95rem; text-align: left; cursor: pointer; }
.ll-lk-option:hover, .ll-lk-option:focus-visible { background: color-mix(in srgb, #0d6efd 12%, transparent); outline: none; }
.ll-lk-option[aria-selected="true"] { font-weight: 600; }
.ll-lk-option[aria-selected="true"] small { color: var(--ll-text); }
.ll-lk-land h3 { display: flex; align-items: center; gap: 8px; margin: 16px 0 8px; color: var(--ll-text-2); font-size: 0.8rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; }
.ll-lk-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.ll-lk-eintrag { display: grid; grid-template-columns: 64px minmax(0, 1fr) 16px; align-items: center; gap: 12px; padding: 10px 12px;
    border: 1px solid var(--ll-linie); border-radius: 10px; background: var(--ll-flaeche); color: var(--ll-text); text-decoration: none;
    transition: border-color 0.15s, box-shadow 0.15s; }
.ll-lk-eintrag:hover, .ll-lk-eintrag:focus-visible { border-color: #0d6efd; box-shadow: 0 4px 14px rgb(0 0 0 / 0.12); outline: none; color: var(--ll-text); }
/* Hover 3 px (Jörg 11.11.), Strichart bleibt (Probe gestrichelt); Polster 2 px weniger → nichts springt */
/* Hover (Jörg 11.11.): Bestand blau, neu (4 Wochen) gold, beide durchgezogen 3 px */
.ll-lk-eintrag.ll-lk-eintrag--neu:is(:hover, :focus-visible) { border-color: #8a5a12; }
:root[data-schema="dunkel"] .ll-lk-eintrag.ll-lk-eintrag--neu:is(:hover, :focus-visible) { border-color: #f3d98a; }
.ll-lk-eintrag:is(:hover, :focus-visible) { border-width: 3px; border-style: solid; padding: 8px 10px; }
.ll-lk-eintrag img { width: 64px; height: 64px; border-radius: 10px; background: #fff; box-shadow: 0 0 0 1px rgb(0 0 0 / 0.1); }
.ll-lk-text { display: grid; gap: 2px; min-width: 0; }
.ll-lk-text b { font-size: 1rem; overflow-wrap: anywhere; }
/* Marke „neu“ (4 Wochen nach der Aufnahme) rechts oben, gold (Jörg 11.11.); unten 0.12em mehr Polster: „neu“ hat nur Mittellänge → optisch mittig */
.ll-lk-neu { float: right; display: inline-flex; align-items: center; height: 1.45em; margin: 0 0 0 8px; padding: 0 0.6em 0.12em; border: 2px solid currentColor;
    border-radius: 999px; color: #8a5a12; font-size: 0.72rem; font-style: normal; font-weight: 600; line-height: 1; letter-spacing: 0.02em; }
:root[data-schema="dunkel"] .ll-lk-neu { color: #f3d98a; }
.ll-lk-text span { color: var(--ll-text-2); font-size: 0.88rem; line-height: 1.4; }
.ll-lk-text small { color: var(--ll-text-2); font-size: 0.8rem; }
.ll-dialog .ll-lk-pfeil { width: 16px; height: 16px; color: var(--ll-text-2); }
.ll-lk-eintrag:hover .ll-lk-pfeil { color: #0d6efd; }
.ll-lk-eintrag--neu:hover .ll-lk-pfeil { color: #8a5a12; }
:root[data-schema="dunkel"] .ll-lk-eintrag--neu:hover .ll-lk-pfeil { color: #f3d98a; }
@media (max-width: 420px) {
    .ll-lk-eintrag { grid-template-columns: 48px minmax(0, 1fr); gap: 10px; padding: 8px 10px; }
    .ll-lk-eintrag:is(:hover, :focus-visible) { padding: 6px 8px; }
    .ll-lk-eintrag img { width: 48px; height: 48px; }
    .ll-dialog .ll-lk-pfeil { display: none; }
}

/* Legende als Blase (Probe 11.11.2026, js/legendetipp.js): Auslöser gepunktet unterstrichen, Blase mit dem Grund der Erklärungen */
.ll-legende-tipp { margin: 0; padding: 0; border: 0; background: none; color: inherit; font: inherit; cursor: help;
    text-decoration: underline dotted; text-underline-offset: 3px; }
.ll-legende-tipp:hover, .ll-legende-tipp[aria-expanded="true"] { color: var(--ll-text); }
.ll-legende-blase { white-space: normal; padding: 10px 12px; }
.ll-legende-blase > * { display: flex !important; flex-direction: column; align-items: stretch; gap: 5px !important; margin: 0 !important; padding: 0 !important;
    border: 0 !important; list-style: none; color: inherit !important; font-size: inherit !important; }
.ll-legende-blase > * > * { display: flex !important; flex-wrap: wrap; align-items: center; gap: 2px 8px !important; white-space: normal !important; }
.ll-legende-blase i { flex: none; width: 22px !important; height: 13px !important; border-radius: 3px; }
.ll-legende-blase i.ll-h0 { box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.35); }
.ll-legende-blase small { flex-basis: 100%; padding-left: 30px; color: #b9bec5; font-size: 0.9em; }