/* LightMapr - Oberflaeche. Keine Inline-Stile im HTML noetig (CSP: style-src 'self'). */

:root {
  --bg: #eef1f5;
  --panel: rgba(255, 255, 255, 0.96);
  --panel-solid: #ffffff;
  --text: #17202e;
  --muted: #566074;
  --line: #d5dbe5;
  --accent: #1f4fcf;
  --accent-text: #ffffff;
  --ts-base: #9aa4b2;   /* Schiene des Zeitreglers ohne Markierung */
  --ts-hit: #1fa354;    /* Farbmarkierung: im Kartenausschnitt ist "sehr gut" zu sehen */
  --focus: #ff9d00;
  --warn-bg: #fff3cf;
  --warn-text: #5c4100;
  --warn-line: #e5c35a;
  --err-bg: #fde5e2;
  --err-text: #6d1a12;
  --err-line: #e59a92;
  --info-bg: #e3edff;
  --info-text: #12306f;
  --info-line: #a9c1f2;
  --shadow: 0 2px 10px rgba(15, 25, 45, 0.25);
  --band-very_bad: #8c2f39;
  --band-bad: #c2622d;
  --band-medium: #d1a31a;
  --band-good: #3e8f50;
  --band-very_good: #1c6a3d;
  --band-medium-text: #1b1500;
  --radius: 10px;
  --bottom-h: 170px;
  --top-h: 56px;
  /* Breiten der Info-Karte (ausgeklappt / eingeklappt), aktuelle Breite und der Werkzeugleiste links davon */
  --info-w: 420px;
  --info-wc: 420px;
  --info-cur: var(--info-w);
  --tools-w: 94px;
  --lg-shift: 0px;
}
body:has(#pp-point.collapsed) { --info-cur: var(--info-wc); }

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #12161d;
    --panel: rgba(25, 31, 42, 0.96);
    --panel-solid: #1a212d;
    --text: #e7ebf2;
    --muted: #a3adbf;
    --line: #333d4f;
    --accent: #7ca2ff;
    --accent-text: #0c1633;
    --ts-hit: #4fd98a;
    --warn-bg: #3d3210;
    --warn-text: #ffe29a;
    --warn-line: #7a6320;
    --err-bg: #461d19;
    --err-text: #ffcdc7;
    --err-line: #85413a;
    --info-bg: #17284d;
    --info-text: #c9dbff;
    --info-line: #35508f;
    --shadow: 0 2px 12px rgba(0, 0, 0, 0.6);
    --band-very_bad: #b84a55;
    --band-bad: #d6783f;
    --band-good: #4fa862;
    --band-very_good: #2f8a55;
  }
}

:root[data-theme="dark"] {
  --bg: #12161d;
  --panel: rgba(25, 31, 42, 0.96);
  --panel-solid: #1a212d;
  --text: #e7ebf2;
  --muted: #a3adbf;
  --line: #333d4f;
  --accent: #7ca2ff;
  --accent-text: #0c1633;
  --ts-hit: #4fd98a;
  --warn-bg: #3d3210;
  --warn-text: #ffe29a;
  --warn-line: #7a6320;
  --err-bg: #461d19;
  --err-text: #ffcdc7;
  --err-line: #85413a;
  --info-bg: #17284d;
  --info-text: #c9dbff;
  --info-line: #35508f;
  --shadow: 0 2px 12px rgba(0, 0, 0, 0.6);
  --band-very_bad: #b84a55;
  --band-bad: #d6783f;
  --band-good: #4fa862;
  --band-very_good: #2f8a55;
}

*, *::before, *::after { box-sizing: border-box; }

[hidden] { display: none !important; }

html, body { height: 100%; margin: 0; }

body.pp-body {
  font: 15px/1.45 system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  color: var(--text);
  background: var(--bg);
  overflow: hidden;
  -webkit-text-size-adjust: 100%;
}

.pp-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

.pp-i { width: 1.25em; height: 1.25em; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; vertical-align: -0.2em; }
.pp-i .f, .pp-i.f { fill: currentColor; stroke: none; }

.pp-skip { position: absolute; left: 8px; top: -60px; z-index: 3000; background: var(--panel-solid); color: var(--text); padding: 8px 12px; border-radius: 6px; }
.pp-skip:focus { top: 8px; }

.pp-noscript { position: fixed; inset: 0; z-index: 4000; background: var(--panel-solid); color: var(--text); padding: 2em; font-size: 1.2em; }

:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }

/* ------------------------------------------------------------ Aufbau */

.pp-app { position: fixed; inset: 0; }
.pp-map { position: absolute; inset: 0; background: #cfd8e3; z-index: 1; }
.leaflet-container { font: inherit; }
/* Massstab ueber der Fusszeile (nicht darunter); wo das 880 px breite Zeitpanel ihn verdecken wuerde, entfaellt er */
.leaflet-bottom.leaflet-left { bottom: var(--attrib-h, 24px); }
@media (max-width: 1099px) { .leaflet-control-scale { display: none; } }

.pp-top {
  position: absolute; z-index: 1000; top: 10px; left: 10px;
  display: flex; align-items: center; gap: 6px;
  background: var(--panel); border-radius: var(--radius); box-shadow: var(--shadow);
  padding: 4px 6px 4px 10px;
}
.pp-brand { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 16px; letter-spacing: 0.01em; font-weight: 700; }
.pp-logo { width: 28px; height: 28px; border-radius: 7px; display: block; flex: none; }
.pp-topnav { display: flex; gap: 2px; }

/* ------------------------------------------------------------ Schaltflaechen und Felder */

.pp-btn {
  font: inherit; color: var(--text); background: transparent;
  border: 1px solid var(--line); border-radius: 8px;
  min-height: 38px; padding: 6px 12px; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
}
.pp-btn:hover { border-color: var(--accent); }
.pp-btn:disabled { opacity: 0.5; cursor: default; }
.pp-btn.pp-primary { background: var(--accent); color: var(--accent-text); border-color: var(--accent); }
.pp-iconbtn { padding: 6px; min-width: 38px; }
.pp-navbtn { border-color: transparent; }
.pp-navbtn span { white-space: nowrap; } /* eine Beschriftung bricht nie um (sonst drei Zeilen „Wetter & Licht“); passt sie nicht, bleiben nur die Symbole (app.js fitNav) */
.pp-navbtn[aria-expanded="true"] { background: var(--info-bg); color: var(--info-text); }
.pp-link { font: inherit; background: none; border: 0; color: var(--accent); text-decoration: underline; cursor: pointer; padding: 2px 4px; min-height: 24px; }

.pp-input, select.pp-input {
  font: inherit; color: var(--text); background: var(--panel-solid);
  border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px; min-height: 40px; width: 100%;
}
.pp-label { display: block; font-weight: 600; margin: 0 0 4px; }
.pp-hint { color: var(--muted); font-size: 13px; margin: 4px 0 8px; }
.pp-msg { margin: 8px 0; padding: 8px 10px; border-radius: 8px; background: var(--info-bg); color: var(--info-text); border: 1px solid var(--info-line); }
.pp-msg.warn { background: var(--warn-bg); color: var(--warn-text); border-color: var(--warn-line); }
.pp-field { margin: 0 0 14px; }
.pp-check { display: flex; align-items: center; gap: 8px; cursor: pointer; }
.pp-check input { width: 18px; height: 18px; }
.pp-inputrow { display: flex; gap: 6px; }
.pp-actions { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0; }
.pp-seg { display: flex; gap: 0; }
.pp-segbtn { flex: 1 1 0; min-height: 44px; gap: 6px; border-radius: 0; }
.pp-segbtn:first-child { border-radius: 10px 0 0 10px; }
.pp-segbtn:last-child { border-radius: 0 10px 10px 0; border-left-width: 0; }
.pp-segbtn[aria-pressed="true"] { background: var(--accent); color: var(--accent-text); border-color: var(--accent); }
.pp-modes + .pp-search { padding-top: 12px; border-top: 1px solid var(--line); }

input[type="range"] { width: 100%; min-height: 24px; accent-color: var(--accent); }

/* ------------------------------------------------------------ Seitenpanel */

.pp-panel {
  position: absolute; z-index: 900;
  background: var(--panel); color: var(--text);
  border-radius: var(--radius); box-shadow: var(--shadow);
  display: flex; flex-direction: column; min-height: 0;
}
.pp-side { top: calc(var(--top-h) + 10px); left: 10px; width: 370px; max-height: calc(100% - var(--top-h) - var(--bottom-h) - 24px); }
.pp-point { top: 10px; right: 10px; width: var(--info-w); max-width: calc(100% - 20px); max-height: calc(100% - 10px - var(--bottom-h) - 14px); } /* oben rechts, feste Breite; Werkzeuge und Zoom links daneben */
.pp-point.collapsed { width: var(--info-wc); max-height: none; }
.pp-panel-head { display: flex; align-items: center; justify-content: space-between; gap: 6px; padding: 6px 8px; border-bottom: 1px solid var(--line); }
.pp-panel-body { overflow: auto; padding: 10px 12px 14px; min-height: 0; overscroll-behavior: contain; }

.pp-panel-title { margin: 0; padding: 4px 6px; font-size: 16px; font-weight: 700; line-height: 1.3; }

/* ------------------------------------------------------------ Layerliste */

/* Tools: Zwischenüberschriften trennen Wetter, Sonne & Mond und Licht in einer Liste */
.pp-layer-sep { margin: 12px 0 6px; padding: 0 2px 4px; font-size: 12.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); border-bottom: 1px solid var(--line); }
.pp-layer-sep:first-child, .pp-layer-none + .pp-layer-sep { margin-top: 8px; }
.pp-layer-extra { padding: 0 10px 8px 36px; display: flex; flex-direction: column; gap: 6px; }
.pp-layer-extra .pp-variants { margin: 0; }
.pp-layer-status.inner { margin: 0; }
.pp-toggle { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; font-size: 14px; min-height: 32px; }
.pp-toggle input { width: 18px; height: 18px; accent-color: var(--accent); }
.pp-layer { border: 1px solid var(--line); border-radius: 10px; margin: 0 0 8px; background: var(--panel-solid); }
.pp-layer.on { border-color: var(--accent); }
.pp-layer-head { display: flex; align-items: center; gap: 6px; padding: 6px 8px; }
.pp-layer-name { flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px; cursor: pointer; font-weight: 600; }
.pp-layer-name input { width: 20px; height: 20px; flex: none; accent-color: var(--accent); }
.pp-nowrap { white-space: nowrap; }
.pp-layer-text { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; min-width: 0; }
.pp-layer-title { overflow-wrap: anywhere; }
.pp-swatch { width: 34px; height: 12px; border-radius: 3px; flex: none; border: 1px solid var(--line); }
.pp-badge { font-size: 11px; padding: 1px 6px; border-radius: 99px; background: var(--warn-bg); color: var(--warn-text); border: 1px solid var(--warn-line); white-space: nowrap; }
.pp-badge.off { background: var(--err-bg); color: var(--err-text); border-color: var(--err-line); }
.pp-layer-body { padding: 4px 10px 10px; border-top: 1px dashed var(--line); font-size: 13.5px; }
.pp-layer-body p { margin: 6px 0; }
.pp-layer-status { margin: 4px 8px 8px 36px; font-size: 13px; color: var(--muted); }
.pp-layer-status.warn { color: var(--warn-text); background: var(--warn-bg); padding: 4px 8px; border-radius: 6px; }
/* Hinter dem Info-Knopf: Vermerk "experimentell" und Hinweise zum gezeigten Kartenbild (statt gelber Marken in der Liste) */
.pp-layer-body .pp-layer-exp { color: var(--muted); }
.pp-layer-notes { margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--line); font-size: 13px; }
.pp-layer-notes p { margin: 0 0 6px; overflow-wrap: anywhere; }
.pp-layer-notes .pp-layer-notes-h { font-weight: 650; }
.pp-kv { display: grid; grid-template-columns: auto 1fr; gap: 2px 10px; margin: 8px 0; }
.pp-kv dt { color: var(--muted); }
.pp-kv dd { margin: 0; overflow-wrap: anywhere; }
.pp-variants { display: flex; flex-wrap: wrap; gap: 4px; margin: 8px 0; }
.pp-chip { font: inherit; font-size: 13px; padding: 4px 10px; border-radius: 99px; border: 1px solid var(--line); background: transparent; color: var(--text); cursor: pointer; min-height: 32px; }
.pp-chip[aria-pressed="true"] { background: var(--accent); color: var(--accent-text); border-color: var(--accent); }
.pp-chip:disabled { opacity: 0.55; cursor: not-allowed; text-decoration: line-through; }


/* ------------------------------------------------------------ Suche, Bereichsanalyse */

.pp-results { list-style: none; margin: 6px 0 0; padding: 0; }
.pp-results li { margin: 0; }
.pp-results button { width: 100%; text-align: left; font: inherit; color: var(--text); background: transparent; border: 0; border-bottom: 1px solid var(--line); padding: 9px 6px; cursor: pointer; display: block; min-height: 44px; }
.pp-results button:hover, .pp-results button:focus-visible { background: var(--info-bg); }
.pp-results small { display: block; color: var(--muted); }

.pp-area h3, .pp-area h2 { font-size: 14px; margin: 14px 0 4px; }
.pp-stack { display: flex; height: 14px; border-radius: 7px; overflow: hidden; border: 1px solid var(--line); margin: 6px 0; }
.pp-stack span { display: block; height: 100%; }
.pp-hot { list-style: none; padding: 0; margin: 6px 0; }
.pp-hot button { width: 100%; text-align: left; font: inherit; color: var(--text); background: transparent; border: 1px solid var(--line); border-radius: 8px; padding: 6px 8px; margin: 3px 0; cursor: pointer; display: flex; justify-content: space-between; gap: 8px; min-height: 40px; align-items: center; }

/* ------------------------------------------------------------ Punktpanel */

.pp-sec { margin: 0 0 14px; }
.pp-sec h3, .pp-sec h2 { font-size: 13px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); margin: 0 0 6px; }
.pp-sub { margin: 0 0 8px; color: var(--muted); font-size: 13.5px; }
.pp-rows { width: 100%; border-collapse: collapse; font-size: 14px; }
.pp-rows th, .pp-rows td { text-align: left; padding: 5px 4px; border-bottom: 1px solid var(--line); vertical-align: top; }
.pp-rows th { font-weight: 500; color: var(--muted); width: 44%; }
.pp-rows td.num { text-align: right; font-variant-numeric: tabular-nums; }
.pp-rows .na { color: var(--muted); font-style: italic; }
.pp-band { display: inline-block; padding: 1px 8px; border-radius: 99px; font-size: 12.5px; font-weight: 600; color: #fff; white-space: nowrap; }
.pp-band.very_bad { background: var(--band-very_bad); }
.pp-band.bad { background: var(--band-bad); }
.pp-band.medium { background: var(--band-medium); color: var(--band-medium-text); }
.pp-band.good { background: var(--band-good); }
.pp-band.very_good { background: var(--band-very_good); }
.pp-band.neutral { background: transparent; color: var(--muted); border: 1px solid var(--line); font-weight: 400; }
.pp-score { font-variant-numeric: tabular-nums; font-weight: 600; margin-right: 6px; }
.pp-why { font: inherit; font-size: 12.5px; background: none; border: 0; color: var(--accent); text-decoration: underline; cursor: pointer; padding: 4px 0 4px 6px; min-height: 24px; }
.pp-explain { background: var(--bg); border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px; margin: 4px 0 8px; font-size: 13.5px; }
.pp-factor { display: grid; grid-template-columns: 1fr auto; gap: 2px 8px; padding: 4px 0; border-bottom: 1px solid var(--line); }
.pp-factor:last-of-type { border-bottom: 0; }
.pp-bar { grid-column: 1 / -1; height: 6px; background: var(--line); border-radius: 3px; overflow: hidden; }
.pp-bar i { display: block; height: 100%; background: var(--accent); }
.pp-flags { display: flex; flex-wrap: wrap; gap: 4px; margin: 6px 0; }
.pp-flag { font-size: 12px; padding: 1px 7px; border-radius: 99px; background: var(--warn-bg); color: var(--warn-text); border: 1px solid var(--warn-line); }

.pp-strip { display: grid; grid-template-columns: 7.5em 1fr; gap: 2px 8px; align-items: center; font-size: 12.5px; margin: 2px 0; }
.pp-strip canvas { width: 100%; height: 18px; display: block; border-radius: 4px; cursor: pointer; background: var(--bg); }
.pp-strip .pp-strip-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }


/* ------------------------------------------------------------ Zeitleiste */

.pp-time {
  position: absolute; z-index: 950; left: 50%; transform: translateX(-50%);
  bottom: calc(var(--attrib-h, 24px) + 6px); width: min(880px, calc(100% - 20px));
  background: var(--panel); border-radius: var(--radius); box-shadow: var(--shadow);
  padding: 8px 12px 10px;
}
.pp-statement { margin: 0 0 4px; font-size: 17px; font-weight: 650; line-height: 1.3; }
/* Zeiten von Sonne und Mond des gewählten Tages (seit 1.9.1). Schmal (Handy, Tablet hoch): zwei Spalten dicht beieinander, links die Sonne
   (Aufgang über Untergang), rechts der Mond (Aufgang über Untergang), als Block mittig im Panel. Breit (ab 900 px, Desktop) und im Handy-Querformat:
   alles in einer Zeile, Sonne und Mond als zwei Gruppen mit Abstand, jede „Aufgang – Untergang“.
   Klein und ruhig; die Scheiben gleichen denen am Fadenkreuz. */
.pp-evbox { display: grid; grid-auto-flow: column; grid-template-rows: auto auto; grid-auto-columns: max-content; justify-content: center; justify-items: start; align-items: center; column-gap: 36px; row-gap: 4px; margin: 0 auto 8px; padding: 0 6px; box-sizing: border-box; }
.pp-evbox[hidden] { display: none; }
.pp-evrow { display: contents; }
.pp-evrow > .pp-evsep { display: none; }
.pp-evitem { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
@media (min-width: 900px) and (min-height: 521px) {
  .pp-evbox { display: flex; justify-content: center; align-items: center; column-gap: 56px; padding: 0; margin: 0 0 8px; }
  .pp-evrow { display: flex; align-items: center; gap: 16px; }
  .pp-evrow > .pp-evsep { display: inline; }
}
.pp-evic { flex: none; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: #2c1d0e; box-shadow: 0 0 0 1px var(--line); }
.pp-evic .pp-i { width: 17px; height: 17px; vertical-align: 0; stroke: #ffe9b0; stroke-width: 2.1; }
.pp-evic.moonrise, .pp-evic.moonset { background: #17224a; }
.pp-evic.sunrise .pp-i { stroke: #ffd84d; }
.pp-evic.sunset .pp-i { stroke: #ff9f86; }
.pp-evic.moonrise .pp-i, .pp-evic.moonset .pp-i { stroke: #d6e2ff; }
.pp-evtime { font-size: 13px; font-weight: 600; line-height: 1.3; letter-spacing: 0.01em; font-variant-numeric: tabular-nums; color: var(--text); }
.pp-evtime.none { color: var(--muted); font-weight: 500; }
.pp-evsep { color: var(--muted); font-size: 13px; }
.pp-timemeta { margin: 4px 0 0; font-size: 13px; line-height: 1.35; color: var(--muted); }
.pp-timemeta:empty { display: none; }
.pp-hit-sw { display: inline-block; width: 28px; height: 6px; margin-right: 7px; vertical-align: middle; border-radius: 3px;
  background: var(--ts-hit); }
/* Zeitwahl in zwei Ebenen: oben der Tag (Heute, Morgen, ...), darunter die Zeitpunkte dieses Tages. Links steht, was die Zeile ist. */
.pp-timectl { display: flex; flex-direction: column; gap: 5px; }
.pp-trow { display: grid; grid-template-columns: 2.6em minmax(0, 1fr); align-items: center; gap: 8px; }
.pp-trow:has(> :empty) { display: none; }
.pp-tlabel { font-size: 12px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
.pp-tdays, .pp-tbtns {
  min-width: 0; display: grid; grid-auto-flow: column; justify-content: start; gap: 4px;
  overflow-x: auto; overflow-y: hidden; scrollbar-width: thin; overscroll-behavior-x: contain;
}
.pp-tdays { grid-auto-columns: minmax(66px, 118px); }
.pp-tdays.night { grid-auto-columns: minmax(92px, 150px); }
.pp-tbtns { grid-auto-columns: minmax(66px, 150px); padding-bottom: 2px; }
.pp-tdays:empty, .pp-tbtns:empty { min-height: 0; }

.pp-tday {
  display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 40px; padding: 2px 6px;
  font: inherit; color: var(--text); background: transparent; cursor: pointer; border: 1px solid var(--line); border-radius: 10px;
}
.pp-tday:hover { border-color: var(--accent); }
.pp-tday-name { font-size: 14px; font-weight: 650; line-height: 1.2; white-space: nowrap; }
.pp-tday-date { font-size: 12px; line-height: 1.2; color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.pp-tday[aria-pressed="true"] { background: var(--accent); color: var(--accent-text); border-color: var(--accent); }
.pp-tday[aria-pressed="true"] .pp-tday-date { color: var(--accent-text); }

/* Zeitpunkte: Uhrzeit mit Symbol oben, der Name darunter; der farbige Streifen oben zeigt die Art (Sonnenaufgang, Blaue Stunde, ...) */
.pp-tbtn {
  --tk: var(--line);
  display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 48px; padding: 2px 6px 3px;
  font: inherit; color: var(--text); background: transparent; cursor: pointer;
  border: 1px solid var(--line); border-top: 4px solid var(--tk); border-radius: 10px;
}
.pp-tbtn:hover { border-color: var(--accent); border-top-color: var(--tk); }
.pp-tbtn-time { display: flex; align-items: center; gap: 4px; font-size: 15px; font-weight: 650; line-height: 1.25; white-space: nowrap; font-variant-numeric: tabular-nums; }
.pp-tbtn-time .pp-i { width: 1.05em; height: 1.05em; }
.pp-tbtn-name { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; line-height: 1.25; color: var(--muted); }
.pp-tbtn[aria-pressed="true"] { background: var(--accent); color: var(--accent-text); border-color: var(--accent); border-top-color: var(--tk); }
.pp-tbtn[aria-pressed="true"] .pp-tbtn-name { color: var(--accent-text); }
.pp-tbtn.nodata { opacity: 0.5; border-left-style: dashed; border-right-style: dashed; border-bottom-style: dashed; }
.pp-tbtn.nodata[aria-pressed="true"] { opacity: 0.8; }
.pp-tk-now { --tk: #6b7686; }
.pp-tk-sunrise { --tk: #e8892b; }
.pp-tk-sunset { --tk: #c9482f; }
.pp-tk-noon { --tk: #d9b11a; }
.pp-tk-blue_am, .pp-tk-blue_pm { --tk: #3a78d6; }
.pp-tk-midnight { --tk: #4a4f8f; }
.pp-tk-dark_pm, .pp-tk-dark_am { --tk: #2b3a8c; }

/* ------------------------------------------------------------ Fusszeile: Stand, Rechtstexte (falls eingerichtet) und "Quellen und Lizenzen" (die Quellenangaben stehen im Dialog) */

.pp-attrib {
  position: absolute; z-index: 1000; left: 0; right: 0; bottom: 0;
  background: var(--panel); color: var(--text); font-size: 12px; line-height: 1.3;
  padding: 4px 10px; border-top: 1px solid var(--line);
  display: flex; flex-wrap: wrap; align-items: center; gap: 2px 6px;
  padding-bottom: calc(4px + env(safe-area-inset-bottom, 0px));
}
.pp-attrib a { color: var(--accent); }
.pp-attrib-stand { font-weight: 600; }
.pp-attrib-stand:empty, .pp-attrib-stand:empty + .pp-attrib-sep { display: none; }
/* Platzhalter in der Breite des Stands: die Fusszeile bricht vor und nach dem Laden gleich um (kein Layoutsprung) */
.pp-stand-ph { visibility: hidden; }

/* ------------------------------------------------------------ Dialog */

.pp-dialog { border: 1px solid var(--line); border-radius: 12px; padding: 0; width: min(720px, calc(100% - 24px)); max-height: calc(100% - 40px); background: var(--panel-solid); color: var(--text); box-shadow: var(--shadow); }
.pp-dialog::backdrop { background: rgba(10, 15, 25, 0.55); }
.pp-dialog-form { display: flex; flex-direction: column; max-height: calc(100vh - 44px); }
.pp-dialog-head { display: flex; align-items: center; justify-content: space-between; padding: 8px 12px; border-bottom: 1px solid var(--line); }
.pp-dialog-head h2 { font-size: 17px; margin: 0; }
.pp-dialog-body { overflow: auto; padding: 10px 14px 16px; }
.pp-dialog-body h3 { font-size: 15px; margin: 14px 0 2px; }
.pp-dialog-body p { margin: 4px 0; }
.pp-dialog-body a { color: var(--accent); }

/* ------------------------------------------------------------ Impressum und Datenschutz (Dialog), Kontaktformular (1.10.0). Farben nur aus den Themenwerten oben: hell und dunkel passen automatisch. */

.pp-dialog-legal { width: min(780px, calc(100% - 24px)); }
.pp-legal-nav { display: flex; flex-wrap: wrap; gap: 2px 10px; margin: -10px -14px 0; padding: 8px 14px; background: var(--panel-solid); border-bottom: 1px solid var(--line); }
.pp-legal-sec { padding-top: 4px; scroll-margin-top: 6px; outline: none; }
/* Die Sprungleiste bleibt nur dort oben stehen, wo sie in eine Zeile passt (sonst verdeckt sie zwei Zeilen Text) */
@media (min-width: 640px) and (min-height: 560px) {
  .pp-legal-nav { position: sticky; top: -10px; z-index: 2; } /* -10px gleicht den oberen Innenabstand des Dialogkörpers aus */
  .pp-legal-sec { scroll-margin-top: 46px; }
}
.pp-legal-sec + .pp-legal-sec { margin-top: 10px; border-top: 1px solid var(--line); }
.pp-legal-sec .pp-lh1 { font-size: 17px; margin: 14px 0 2px; }
.pp-legal .pp-lh2 { font-size: 14px; margin: 14px 0 2px; }
.pp-legal p { margin: 4px 0 8px; line-height: 1.5; overflow-wrap: anywhere; }
.pp-legal-sub { color: var(--muted); font-size: 13px; }
.pp-legal-none { color: var(--muted); font-style: italic; }
.pp-legal-dl { display: grid; grid-template-columns: max-content 1fr; gap: 2px 12px; margin: 6px 0 10px; }
.pp-legal-dl dt { color: var(--muted); }
.pp-legal-dl dd { margin: 0; overflow-wrap: anywhere; }
.pp-cform { margin: 8px 0; padding: 12px 14px; border: 1px solid var(--line); border-radius: 10px; background: var(--bg); }
.pp-cf-row { margin: 0 0 10px; }
.pp-cf-row label { display: block; margin: 0 0 4px; font-weight: 600; }
.pp-cform textarea.pp-input { min-height: 140px; resize: vertical; line-height: 1.4; }
.pp-cform .pp-input[aria-invalid="true"] { border-color: var(--err-line); box-shadow: 0 0 0 2px var(--err-line); }
.pp-req { color: var(--err-text); }
.pp-cf-actions { margin: 8px 0 0; }
.pp-cf-msg { margin: 10px 0 0; padding: 8px 10px; border-radius: 8px; border: 1px solid var(--info-line); background: var(--info-bg); color: var(--info-text); }
.pp-cf-msg.pp-cf-err { background: var(--err-bg); color: var(--err-text); border-color: var(--err-line); }
.pp-cf-msg.pp-cf-ok { border-color: var(--band-good); }
/* Honigtopf: für Menschen unsichtbar (außerhalb des Bildes, nicht per display:none, damit Bots es nicht überspringen); Hilfstechnik ignoriert es (aria-hidden, tabindex -1) */
.pp-hp { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }

/* ------------------------------------------------------------ Karte: Marker und Tooltips */

/* Pin (seit 1.8.0): gezeichnet wird er im Kreuz-Overlay (.pp-x-pin), hier steht nur der unsichtbare Griff darüber (Klick, Ziehen, Tastatur) */
.pp-pinhit { background: none; border: 0; border-radius: 50%; cursor: grab; }
.pp-pinhit:active, .leaflet-dragging .pp-pinhit { cursor: grabbing; }
.pp-pinhit:focus-visible { outline: 3px solid var(--focus); outline-offset: 0; }
.pp-storm-tip { font-size: 13px; line-height: 1.35; }
.pp-storm-tip b { font-weight: 650; }
.leaflet-tooltip.pp-storm-tooltip { white-space: normal; max-width: 260px; }

/* ------------------------------------------------------------ Hilfsklassen */

/* nur visuell ausblenden: der Text bleibt fuer Screenreader und Sprachsteuerung erhalten */
.pp-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }

@media (pointer: coarse) {
  .pp-btn, .pp-chip { min-height: 44px; }
  input[type="range"] { height: 36px; }
  .pp-tbtn { min-height: 52px; }
  .pp-tday { min-height: 44px; }
}

@media (prefers-reduced-motion: reduce) {
  * { scroll-behavior: auto !important; transition: none !important; animation: none !important; }
}

/* ------------------------------------------------------------ Legende (Skala mit Transparenzregler) */

/* Zwischen Kopfleiste und Werkzeugen; --lg-shift (app.js) schiebt die Legende zur Bildschirmmitte, soweit der Platz reicht */
.pp-lg-wrap {
  position: absolute; z-index: 940; top: 10px; left: var(--top-w, 400px); right: calc(var(--info-cur) + var(--tools-w) + 30px);
  display: flex; justify-content: center; align-items: flex-start; pointer-events: none; container: lg / inline-size;
}
.pp-lg {
  pointer-events: auto; width: min(100%, 470px); transform: translateX(var(--lg-shift, 0px));
  background: var(--panel); color: var(--text); border-radius: var(--radius); box-shadow: var(--shadow);
  padding: 6px 12px 7px;
  display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 14px; row-gap: 3px; align-items: center;
  grid-template-areas: "head tr" "scale scale" "more more";
}
/* schmaler Platz (z. B. viele Knöpfe in der Kopfleiste): der Transparenzregler rutscht unter die Skala */
@container lg (max-width: 360px) {
  .pp-lg { grid-template-columns: minmax(0, 1fr); grid-template-areas: "head" "scale" "more" "tr"; }
  .pp-lg-tr { justify-content: flex-start; }
  .pp-lg-tr input[type="range"] { flex: 1 1 0; min-width: 0; width: auto; }
}
.pp-lg-head { grid-area: head; display: flex; align-items: center; gap: 6px; min-width: 0; }
.pp-lg-title { margin: 0; font-size: 14px; font-weight: 650; line-height: 1.3; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.pp-lg-toggle { display: none; background: none; border: 0; color: var(--text); padding: 0; min-width: 32px; min-height: 32px; cursor: pointer; }
/* Varianten des aktiven Layers (z. B. Wolken: Gesamt / Tief / Mittel / Hoch) rechts neben dem Titel; reicht der Platz nicht, rutschen sie in eine zweite Zeile */
.pp-lg-head { flex-wrap: wrap; row-gap: 3px; }
.pp-lg-title { flex: 1 1 auto; }
.pp-lg-variants { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 3px; margin-left: auto; flex: 0 1 auto; min-width: 0; }
.pp-lg-variants[hidden] { display: none; }
.pp-lg-chip { font: inherit; font-size: 12px; line-height: 1.2; padding: 3px 9px; min-height: 26px; border-radius: 99px; border: 1px solid var(--line); background: transparent; color: var(--text); cursor: pointer; white-space: nowrap; }
.pp-lg-chip[aria-pressed="true"] { background: var(--accent); color: var(--accent-text); border-color: var(--accent); }
.pp-lg-chip:disabled { opacity: 0.55; cursor: not-allowed; text-decoration: line-through; }
@media (pointer: coarse) { .pp-lg-chip { min-height: 34px; padding: 4px 11px; } }
/* mit Varianten steht alles untereinander (Kopf mit Schaltern, Skala, Stufen, Transparenz): so bleibt die Kopfzeile in jeder Breite lesbar, auch im Handy-Querformat */
.pp-lg:has(.pp-lg-variants:not([hidden])) { grid-template-columns: minmax(0, 1fr); grid-template-areas: "head" "scale" "more" "tr"; }
.pp-lg:has(.pp-lg-variants:not([hidden])) .pp-lg-tr { justify-content: flex-start; }
.pp-lg:has(.pp-lg-variants:not([hidden])) .pp-lg-track { margin-top: 11px; } /* die Wertmarke (Dreieck, ragt 7 px über die Skala) darf die Schalter darüber nicht berühren */
.pp-lg:has(.pp-lg-variants:not([hidden])) .pp-lg-tr input[type="range"] { flex: 1 1 0; min-width: 0; width: auto; }
.pp-lg-scale { grid-area: scale; min-width: 0; }
.pp-lg-more { grid-area: more; min-width: 0; }
.pp-lg-tr { grid-area: tr; display: flex; align-items: center; justify-content: flex-end; gap: 6px; font-size: 12.5px; color: var(--muted); }
.pp-lg-tr label { white-space: nowrap; }
.pp-lg-tr input[type="range"] { width: 112px; min-height: 24px; margin: 0; }
.pp-lg-tr output { min-width: 3.1em; text-align: right; font-variant-numeric: tabular-nums; color: var(--text); }
.pp-lg-track { position: relative; margin: 7px 0 1px; }
.pp-lg-bar { height: 13px; border-radius: 7px; border: 1px solid var(--line); }
.pp-lg-mark {
  position: absolute; top: -7px; width: 0; height: 0; transform: translateX(-50%); pointer-events: none;
  border-left: 6px solid transparent; border-right: 6px solid transparent; border-top: 8px solid var(--text);
}
.pp-lg-names { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); font-size: 11px; color: var(--muted); text-align: center; line-height: 1.3; }
.pp-lg-names span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pp-lg-nums { position: relative; height: 14px; font-size: 11px; color: var(--muted); font-variant-numeric: tabular-nums; }
.pp-lg-nums span { position: absolute; top: 0; transform: translateX(-50%); white-space: nowrap; }
.pp-lg-nums span.first { transform: none; }
.pp-lg-nums span.last { transform: translateX(-100%); }
.pp-lg-classes { display: flex; flex-wrap: wrap; gap: 3px 12px; font-size: 13px; margin: 5px 0 1px; }
.pp-lg-classes i { display: inline-block; width: 14px; height: 14px; border-radius: 3px; border: 1px solid var(--line); vertical-align: -2px; margin-right: 4px; }
@container lg (max-width: 420px) {
  .pp-lg { grid-template-columns: minmax(0, 1fr); grid-template-areas: "head" "scale" "more" "tr"; }
  .pp-lg-names { display: none; }
  .pp-lg-tr { justify-content: flex-start; }
  .pp-lg-tr input[type="range"] { flex: 1 1 0; min-width: 0; width: auto; }
}

/* ------------------------------------------------------------ Werkzeuge: Zoom, Sonne/Mond, Positionierung (links neben der Info-Karte) */

.pp-tools {
  position: absolute; z-index: 940; top: 10px; right: calc(var(--info-cur) + 20px); width: var(--tools-w);
  display: flex; flex-direction: column; gap: 8px;
}
/* Computer und Tablet quer (Info-Karte oben rechts): ist die Info-Karte eingeklappt, bauen sich die Werkzeuge am rechten Rand unter ihr auf
   (--point-bottom: Unterkante der Karte plus Abstand, misst app.js); klappt die Karte auf, rücken sie links neben sie (Grundregel oben).
   Die Legende endet dann vor der Karte statt vor den Werkzeugen. Handy und Handy quer behalten ihre eigene Anordnung. */
@media (min-width: 900px) and (min-height: 521px) {
  body:has(#pp-point.collapsed) .pp-tools, body:has(#pp-point[hidden]) .pp-tools { right: 10px; top: var(--point-bottom, 10px); }
  body:has(#pp-point.collapsed) .pp-lg-wrap { right: calc(var(--info-cur) + 20px); }
  body:has(#pp-point[hidden]) .pp-lg-wrap { right: calc(var(--tools-w) + 30px); }
}
.pp-toolbtns { display: contents; } /* Handy hochkant: waagerechte Reihe über dem Zeitpanel (siehe unten); sonst Teil der Spalte */
.pp-toolbtn {
  flex-direction: column; gap: 3px; min-height: 58px; padding: 6px 2px 5px; width: 100%;
  font-size: 12px; line-height: 1.2; text-align: center;
  background: var(--panel); box-shadow: var(--shadow); border-radius: 10px;
}
.pp-toolbtn .pp-i { width: 24px; height: 24px; }
.pp-toolbtn-l { display: block; max-width: 100%; white-space: nowrap; font-weight: 600; }
.pp-toolbtn[aria-pressed="true"] { background: var(--accent); color: var(--accent-text); border-color: var(--accent); }
.pp-toolbtn[hidden] { display: none; } /* Knöpfe, die bei der gewählten Ebene nichts tun (Position außerhalb der Himmelsröte), verschwinden */
.pp-toolbtn:disabled { background: var(--panel); color: var(--muted); opacity: 0.7; cursor: default; }
.pp-toolbtn:disabled[aria-pressed="true"] { background: var(--accent); color: var(--accent-text); border-color: var(--accent); opacity: 0.65; } /* z. B. Sonne/Mond ist im Layer "Sonne und Mond" immer an */
.pp-tools .leaflet-control-zoom {
  float: none; clear: none; margin: 0; width: 100%; display: flex; border: 0; border-radius: 10px; box-shadow: var(--shadow); overflow: hidden; background: var(--panel);
}
.pp-tools .leaflet-control-zoom a {
  flex: 1; display: block; width: auto; height: 42px; line-height: 42px; font-size: 24px; border: 0; border-radius: 0;
  background: var(--panel); color: var(--text); text-align: center; text-decoration: none;
}
.pp-tools .leaflet-control-zoom a + a { border-left: 1px solid var(--line); }
.pp-tools .leaflet-control-zoom a:hover { background: var(--info-bg); color: var(--info-text); }
.pp-tools .leaflet-control-zoom a.leaflet-disabled { opacity: 0.45; background: var(--panel); cursor: default; }

/* ------------------------------------------------------------ Nachtkarte (Lichtverschmutzung) */

/* Grundkarte dunkel (Umkehr der Helligkeit bei erhaltenen Farbtönen), das Nachtlicht-Bild wird darüber aufgehellt: dunkle Stellen zeigen die Karte,
   helle leuchten. Die Klasse pp-night setzt app.js, solange der Layer Lichtverschmutzung aktiv ist. */
#map.pp-night { background: #0e1118; }
#map.pp-night .pp-basemap { filter: invert(1) hue-rotate(180deg) brightness(0.95) contrast(0.92) saturate(0.75); }
#map.pp-night .leaflet-pp-raster-pane { mix-blend-mode: screen; }

/* ------------------------------------------------------------ Fadenkreuz */

.pp-cross { position: absolute; inset: 0; z-index: 500; pointer-events: none; overflow: hidden; }
.pp-cross-svg { position: absolute; left: 0; top: 0; display: block; overflow: visible; }
.pp-x-halo { stroke: rgba(255, 255, 255, 0.9); fill: none; stroke-linecap: round; }
.pp-x-cross { stroke: #0e1522; stroke-width: 2; stroke-linecap: round; }
.pp-x-halo.pp-x-cross { stroke: rgba(255, 255, 255, 0.9); stroke-width: 5; }
.pp-x-dot { fill: #0e1522; stroke: none; }
.pp-x-pin { fill: #e3442f; stroke: #fff; stroke-width: 2.4; stroke-linejoin: round; paint-order: stroke; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.55)); }
.pp-x-pindot { fill: #fff; stroke: none; }
.pp-x-pintip { fill: #0e1522; stroke: #fff; stroke-width: 1.2; }
.pp-x-halo.pp-x-dot { fill: rgba(255, 255, 255, 0.9); stroke: rgba(255, 255, 255, 0.9); stroke-width: 4; }
.pp-x-sun { stroke: #ff9f0a; stroke-width: 3.6; stroke-linecap: round; }
.pp-x-moon { stroke: #4f66c8; stroke-width: 3.6; stroke-linecap: round; }
.pp-x-day { stroke: #d1480d; stroke-width: 3; stroke-dasharray: 9 5; stroke-linecap: butt; }
.pp-x-moonday { stroke: #4f66c8; stroke-width: 3; stroke-dasharray: 9 5; stroke-linecap: butt; }
.pp-x-sun.below, .pp-x-moon.below { stroke-dasharray: 3 8; stroke-linecap: round; }
/* Saum (weiß) und Rand (dunkel) sind durchgehend, auch wenn der Kern gestrichelt ist */
.pp-x-halo.pp-x-sun, .pp-x-halo.pp-x-moon { stroke: rgba(255, 255, 255, 0.95); stroke-width: 7.6; stroke-dasharray: none; stroke-linecap: round; }
.pp-x-halo.pp-x-day, .pp-x-halo.pp-x-moonday { stroke: rgba(255, 255, 255, 0.95); stroke-width: 6.4; stroke-dasharray: none; stroke-linecap: round; }
.pp-x-case { fill: none; stroke: rgba(10, 16, 28, 0.62); stroke-dasharray: none; stroke-linecap: round; }
.pp-x-case.pp-x-sun, .pp-x-case.pp-x-moon { stroke-width: 10.6; stroke-dasharray: none; }
.pp-x-case.pp-x-day, .pp-x-case.pp-x-moonday { stroke-width: 9.2; stroke-dasharray: none; }
.pp-x-sunbg { fill: #ffd24a; stroke: #b86a00; stroke-width: 1.6; }
.pp-x-sunbg.below { fill: rgba(255, 255, 255, 0.9); stroke-dasharray: 3 3; }
.pp-x-sunico { fill: none; stroke: #6b3d00; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.pp-x-moonbg { fill: rgba(255, 255, 255, 0.94); stroke: #4a5d9f; stroke-width: 1.6; }
.pp-x-moonbg.below { stroke-dasharray: 3 3; }
/* Auf- und Untergänge (seit 1.9.1): dunkle Scheibe mit weißem Rand und hellem Zeichen. Aufgang gelb, Untergang lachsrot, Mond bläulich;
   die Sonne selbst bleibt gelb gefüllt, so verdeckt sie ein Ereignis nie und ist nicht mit ihm zu verwechseln. */
.pp-x-icobg { fill: #2c1d0e; stroke: #fff; stroke-width: 1.6; }
.pp-x-icobg.moonrise, .pp-x-icobg.moonset { fill: #17224a; }
.pp-x-ico { fill: none; stroke: #ffe9b0; stroke-width: 2.1; stroke-linecap: round; stroke-linejoin: round; }
.pp-x-ico.sunrise { stroke: #ffd84d; }
.pp-x-ico.sunset { stroke: #ff9f86; }
.pp-x-ico.moonrise, .pp-x-ico.moonset { stroke: #d6e2ff; }

/* Positionierungs-Tool: Viertelkreise (Farbe als Attribut, Beschriftung entlang des Bogens) */
.pp-x-arc { fill: none; stroke-linecap: round; }
.pp-x-arc-halo { fill: none; stroke: rgba(255, 255, 255, 0.95); stroke-linecap: round; }
.pp-x-arc-label { font: 700 12.5px system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif; fill: #0e1522; stroke: #fff; stroke-width: 4px; paint-order: stroke; stroke-linejoin: round; }

/* Mondphase (Fadenkreuz, Zeitfeld, Info-Karte) */
.pp-moon-dark { fill: #2f3860; }
.pp-moon-lit { fill: #f4edc8; }
.pp-moon-rim { fill: none; stroke: #1b2240; stroke-width: 1; }
.pp-moon-svg { flex: none; display: block; }

/* ------------------------------------------------------------ Info-Karte (oben rechts, feste Breite) */

.pp-point-head { margin: 0; font-size: inherit; font-weight: inherit; }
.pp-point-toggle {
  display: flex; align-items: center; gap: 8px; width: 100%; min-height: 50px; padding: 6px 12px;
  font: inherit; text-align: left; color: var(--text); background: none; border: 0; border-radius: var(--radius); cursor: pointer;
}
.pp-point:not(.collapsed) .pp-point-toggle { border-radius: var(--radius) var(--radius) 0 0; }
.pp-point-ttl { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.pp-point-title { font-size: 15px; font-weight: 650; line-height: 1.3; overflow-wrap: anywhere; }
.pp-point-sum { font-size: 13px; color: var(--muted); line-height: 1.3; overflow-wrap: anywhere; }
.pp-point-sum:empty { display: none; }
.pp-point-chev { transition: transform 0.15s; }
.pp-point-toggle[aria-expanded="true"] .pp-point-chev { transform: rotate(180deg); }
/* Gradangaben, Sonnenleiste und Bewertungen scrollen zusammen (nur der Kopf bleibt stehen): so laeuft bei niedrigen Fenstern nichts aus der Karte */
.pp-point-scroll { flex: 1 1 auto; min-height: 0; overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; scrollbar-gutter: stable; }
.pp-point .pp-panel-body { overflow: visible; }
.pp-point.busy .pp-point-toggle { box-shadow: inset 0 3px 0 var(--accent); }
.pp-point .pp-rows { table-layout: fixed; }
.pp-point .pp-rows th { width: 42%; overflow-wrap: anywhere; }
.pp-point .pp-rows td { overflow-wrap: anywhere; }
.pp-point .pp-explain, .pp-point .pp-explain * { min-width: 0; overflow-wrap: anywhere; }
.pp-point .pp-factor { grid-template-columns: minmax(0, 1fr) auto; }
.pp-point .pp-rows tr.active > th, .pp-point .pp-rows tr.active > td { background: var(--info-bg); }
.pp-point .pp-rows tr.active > th { color: var(--info-text); font-weight: 650; }
.pp-point .pp-strip canvas { max-width: 100%; }
.pp-point .pp-msg { font-size: 13px; line-height: 1.4; margin: 0 0 10px; }

/* Gradangaben (Ort, Zeit, Sonne, Mond) unter dem Kopf */
.pp-deg { padding: 6px 12px 8px; border-top: 1px solid var(--line); }
.pp-degl { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 3px 12px; margin: 0; font-size: 13.5px; line-height: 1.35; }
.pp-degl dt { color: var(--muted); }
.pp-degl dd { margin: 0; overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
.pp-deg-coord { color: var(--muted); font-size: 12.5px; }
.pp-deg-phase { display: inline-flex; align-items: center; gap: 6px; }
.pp-deg .pp-sub { margin: 4px 0 0; }
.pp-poslist { list-style: none; margin: 0 0 6px; padding: 0; display: grid; gap: 4px; font-size: 14px; }
.pp-poslist li { display: flex; align-items: center; gap: 8px; }
.pp-poslist-name { flex: 1; min-width: 0; }
.pp-poslist-val { display: inline-flex; align-items: center; gap: 6px; flex: none; }
.pp-rayline { display: block; margin-top: 3px; color: var(--muted); font-size: 12.5px; line-height: 1.3; }
.pp-poslist-dot { width: 14px; height: 14px; border-radius: 50%; border: 2px solid #fff; box-shadow: 0 0 0 1px var(--line); flex: none; }

.pp-sunbar { padding: 6px 12px 8px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.pp-sunbar-day { margin: 0 0 4px; font-size: 12px; color: var(--muted); }
.pp-sunbar-row { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 4px; }
.pp-sunbar-btn {
  --tk: var(--line);
  display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 46px; padding: 2px 1px;
  font: inherit; color: var(--text); background: transparent; cursor: pointer;
  border: 1px solid var(--line); border-top: 4px solid var(--tk); border-radius: 8px;
}
.pp-sunbar-btn:hover { border-color: var(--accent); border-top-color: var(--tk); }
.pp-sunbar-plain .pp-sunbar-btn { cursor: default; border-color: transparent; border-top: 3px solid var(--tk); border-radius: 3px; }
.pp-sunbar-name { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11px; color: var(--muted); line-height: 1.25; }
.pp-sunbar-time { font-size: 15px; font-weight: 650; font-variant-numeric: tabular-nums; line-height: 1.3; }

.pp-det { border-top: 1px solid var(--line); margin: 0 0 4px; }
.pp-det > summary {
  display: flex; align-items: center; gap: 8px; min-height: 40px; padding: 4px 2px; cursor: pointer; list-style: none;
  font-size: 13px; text-transform: uppercase; letter-spacing: 0.06em; font-weight: 600; color: var(--muted);
}
.pp-det > summary::-webkit-details-marker { display: none; }
.pp-det > summary::before { content: ""; width: 7px; height: 7px; border: solid currentColor; border-width: 0 2px 2px 0; transform: rotate(-45deg); transition: transform 0.15s; flex: none; margin: 0 3px 0 2px; }
.pp-det[open] > summary::before { transform: rotate(45deg); }

/* ------------------------------------------------------------ Zeitfeld: Regler fuer Sonne und Mond (48 Stunden, 15-Minuten-Schritte) */

.pp-tslider { margin: 2px 0 0; }
.pp-ts-row { display: flex; align-items: flex-start; gap: 10px; }
.pp-ts-now { flex: none; }
.pp-ts-main { flex: 1; min-width: 0; --ts-thumb: 24px; }
/* Regler: eigener Griff und Schiene, damit die Skala (Datum oben, Stundenstriche unten) genau zur Stellung passt */
.pp-ts-main input[type="range"] { display: block; margin: 0; height: 28px; width: 100%; background: transparent; cursor: pointer; -webkit-appearance: none; appearance: none; }
.pp-ts-main input[type="range"]::-webkit-slider-runnable-track { height: 6px; border-radius: 3px; background: var(--ts-track, var(--ts-base)); }
.pp-ts-main input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: var(--ts-thumb); height: var(--ts-thumb); margin-top: -9px; border-radius: 50%; background: var(--accent); border: 3px solid var(--panel-solid); box-shadow: 0 0 0 1.5px var(--accent), 0 1px 5px rgba(0, 0, 0, 0.4); }
.pp-ts-main input[type="range"]::-moz-range-track { height: 6px; border-radius: 3px; background: var(--ts-track, var(--ts-base)); }
.pp-ts-main input[type="range"]::-moz-range-thumb { box-sizing: border-box; width: var(--ts-thumb); height: var(--ts-thumb); border-radius: 50%; background: var(--accent); border: 3px solid var(--panel-solid); box-shadow: 0 0 0 1.5px var(--accent), 0 1px 5px rgba(0, 0, 0, 0.4); }
.pp-ts-main input[type="range"]:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 6px; }
/* Skala: beide Leisten sind um den halben Griff eingerückt, so liegt ein Strich genau unter der Stellung des Griffs */
.pp-ts-dates, .pp-ts-scale { position: relative; margin: 0 calc(var(--ts-thumb) / 2); font-variant-numeric: tabular-nums; color: var(--muted); }
.pp-ts-dates { height: 18px; font-size: 12.5px; font-weight: 600; margin-bottom: 2px; }
.pp-ts-dates .dt { position: absolute; top: 0; height: 18px; line-height: 18px; overflow: hidden; white-space: nowrap; padding-left: 4px; box-sizing: border-box; color: var(--text); }
.pp-ts-dates .dt.sep { border-left: 1px solid var(--muted); }
.pp-ts-scale { height: 36px; font-size: 12px; }
.pp-ts-scale .tk { position: absolute; top: 4px; width: 1px; height: 5px; margin-left: -0.5px; background: var(--muted); opacity: 0.8; }
.pp-ts-scale .tk.lab { height: 8px; opacity: 1; }
.pp-ts-scale .tk.mid { height: 12px; width: 2px; margin-left: -1px; background: var(--text); opacity: 1; }
.pp-ts-scale .tk.now { height: 8px; width: 2px; margin-left: -1px; background: var(--accent); opacity: 1; }
.pp-ts-scale .hr { position: absolute; top: 15px; transform: translateX(-50%); line-height: 16px; white-space: nowrap; }
.pp-ts-scale .dark { position: absolute; top: 0; height: 4px; border-radius: 2px; background: #3d4fc4; opacity: 0.9; }
.pp-ts-scale .selt { position: absolute; top: 0; width: 2px; height: 14px; margin-left: -1px; background: var(--accent); }
.pp-ts-scale .sel { position: absolute; top: 14px; transform: translateX(-50%); z-index: 2; padding: 0 7px; min-width: 44px; box-sizing: border-box; text-align: center; line-height: 20px; border-radius: 10px; background: var(--accent); color: var(--accent-text); font-size: 13px; font-weight: 700; white-space: nowrap; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.35); }
.pp-ts-now { margin-top: 18px; }
.pp-lg-ends { display: flex; justify-content: space-between; font-size: 11px; color: var(--muted); margin-top: 2px; }
.pp-ts-card { display: flex; align-items: center; gap: 12px; margin: 6px 0 0; padding: 6px 10px; border-radius: 10px; background: var(--bg); border: 1px solid var(--line); }
.pp-ts-card:empty { display: none; }
.pp-ts-info { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.pp-ts-phase { font-size: 14px; }
.pp-ts-ev { display: flex; flex-wrap: wrap; gap: 3px 16px; }
.pp-ts-chip { display: inline-flex; align-items: center; gap: 5px; font-size: 14px; font-weight: 600; font-variant-numeric: tabular-nums; }
.pp-ts-chip .pp-i { width: 1.15em; height: 1.15em; }

/* ------------------------------------------------------------ Kopfleiste: Marke nur ab mittlerer Breite ausgeschrieben, Info-Knopf nur auf kleinen Bildschirmen */

.pp-navinfo { display: none; }

/* ------------------------------------------------------------ Computer (ab 1200 px): Info-Karte oben rechts, Werkzeuge links daneben */

@media (min-width: 1200px) and (max-width: 1399px) {
  :root { --info-w: 380px; --info-wc: 380px; }
}

/* ------------------------------------------------------------ Tablet quer (900 bis 1199 px): schmale Leisten, hoechstens ein Fuenftel der Breite im eingeklappten Zustand */

@media (min-width: 900px) and (max-width: 1199px) {
  :root { --info-w: min(300px, 30vw); --info-wc: max(180px, 20vw); --tools-w: 82px; }
  .pp-side { width: max(180px, 20vw); }
  .pp-panel-body { padding: 8px 6px 12px; }
  .pp-panel-title { font-size: 15px; }
  .pp-layer-head { padding: 4px 4px; gap: 4px; }
  .pp-layer-name { gap: 6px; font-size: 13px; }
  .pp-layer-name input { width: 18px; height: 18px; }
  .pp-swatch { display: none; }
  .pp-layer-head .pp-iconbtn { min-width: 30px; padding: 4px; }
  .pp-layer-status { margin: 2px 6px 6px 8px; }
  .pp-layer-body { padding: 4px 6px 8px; }
  .pp-kv { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .pp-kv dd { margin-bottom: 4px; }
  .pp-hint { font-size: 12px; }
  .pp-point-toggle { padding: 6px 8px; gap: 6px; }
  .pp-point-title { font-size: 14px; }
  .pp-point-sum { font-size: 12px; }
  .pp-toolbtn { font-size: 11px; }
  .pp-degl { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .pp-degl dd { margin-bottom: 4px; }
}
/* der Name macht Platz für die Legende: mit Motive, Tools, Ort und Einstellungen ist die Kopfleiste breit, bis 1359 px bliebe der Legende sonst weniger als 240 px */
@media (min-width: 900px) and (max-width: 1359px) {
  .pp-brand-name { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
}

/* ------------------------------------------------------------ Handy und kleine Tablets (bis 899 px) sowie Handy quer: Blaetter am unteren Rand */

@media (max-width: 899px), (max-height: 520px) and (orientation: landscape) {
  :root { --top-h: 52px; }
  .pp-top { left: 0; right: 0; top: 0; border-radius: 0; padding: 4px 6px 4px 10px; justify-content: space-between; }
  /* nur visuell ausblenden: der Seitenname bleibt fuer Screenreader die Hauptueberschrift */
  .pp-brand-name { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
  .pp-topnav { flex: 1; justify-content: flex-end; }
  .pp-navbtn span { font-size: 14px; }
  .pp-navinfo { display: inline-flex; }
  /* keine feste Info-Spalte: das Info-Blatt erscheint auf Wunsch (Knopf "Info") */
  .pp-side, .pp-point, .pp-point.collapsed {
    left: 0; right: 0; top: auto; width: auto; max-width: none;
    bottom: var(--bottom-h); max-height: min(50vh, calc(100% - var(--top-h) - var(--legend-h, 0px) - var(--bottom-h)));
    border-radius: 16px 16px 0 0;
  }
  .pp-time { width: calc(100% - 12px); padding: 6px 8px 8px; }
  .pp-statement { font-size: 15px; }
  .pp-btn { min-height: 44px; }
  .pp-iconbtn { min-width: 44px; }
  .pp-input, select.pp-input { min-height: 44px; font-size: 16px; }
  .pp-layer-name input { width: 24px; height: 24px; }

  /* Legende: Streifen unter der Kopfleiste */
  .pp-lg-wrap { left: 0; right: 54px; top: calc(var(--top-h) - 12px); justify-content: flex-start; }
  .pp-lg { width: 100%; border-radius: 0 0 12px 0; padding: 5px 10px 6px; transform: none; }
  .pp-lg { position: relative; }
  .pp-lg-toggle { display: inline-flex; align-items: center; justify-content: center; position: absolute; top: 2px; right: 6px; }
  .pp-lg-title { line-height: 30px; } /* die erste Zeile ist so hoch wie der Pfeil: die Varianten-Schalter darunter liegen nie unter seiner Fläche */
  .pp-lg[data-collapsed="1"] .pp-lg-more, .pp-lg[data-collapsed="1"] .pp-lg-tr { display: none; }
  .pp-lg[data-collapsed="0"] .pp-lg-toggle .pp-i { transform: rotate(180deg); }
  .pp-lg-head { justify-content: space-between; min-height: 32px; padding-right: 36px; } /* der Pfeil steht fest oben rechts, die Varianten-Schalter wandern bei Platzmangel in die zweite Zeile */

  /* Werkzeuge: schmale Spalte am rechten Rand neben dem Legendenstreifen, nur Symbole (Beschriftung nur fuer Screenreader) */
  .pp-tools { top: calc(var(--top-h) + 6px); right: 8px; width: 44px; gap: 6px; }
  .pp-toolbtn { min-height: 44px; min-width: 44px; padding: 4px; border-radius: 10px; }
  .pp-toolbtn-l { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
  .pp-tools .leaflet-control-zoom { flex-direction: column; }
  .pp-tools .leaflet-control-zoom a { height: 44px; line-height: 44px; }
  .pp-tools .leaflet-control-zoom a + a { border-left: 0; border-top: 1px solid var(--line); }
  /* ein offenes Blatt (Ebenen/Ort/Einstellungen oder Info) deckt den Kartenrand ab: Werkzeuge ausblenden, statt Knoepfe zu ueberlagern */
  body:has(#pp-side:not([hidden])) .pp-tools, body:has(#pp-point:not([hidden]):not(.collapsed)) .pp-tools { visibility: hidden; }

  .pp-ts-row { gap: 8px; }
}

/* Handy und Tablet hochkant (seit 1.9.2): Der Zoom steht allein am rechten Rand, etwas höher (6 px unter der Kopfleiste). Pin, Sonne, Mond und Position
   bilden eine waagerechte Reihe mittig über dem Zeitpanel, nicht mehr eine Spalte am Rand, die Karte und Fadenkreuz verdeckt. Mit Beschriftung, solange
   die Höhe reicht; auf niedrigen Handys (bis 700 px) nur Symbole. Die Reihe verschwindet wie die Spalte, solange ein Blatt (Ebenen, Ort, Info) offen ist. */
@media (max-width: 899px) and (min-height: 521px) {
  .pp-tools { top: calc(var(--top-h) - 6px); }
  .pp-toolbtns {
    position: fixed; z-index: 940; left: 50%; transform: translateX(-50%); bottom: calc(var(--bottom-h) - 20px); /* --bottom-h endet 28 px über der Oberkante des Zeitpanels: 8 px Abstand */
    display: flex; gap: 8px;
  }
  .pp-toolbtn { width: min(76px, calc((100vw - 40px) / 4)); min-width: 0; min-height: 52px; padding: 5px 2px 4px; gap: 2px; }
  .pp-toolbtn .pp-i { width: 22px; height: 22px; }
  .pp-toolbtn-l { position: static; width: auto; height: auto; overflow: visible; clip: auto; clip-path: none; font-size: 11.5px; }
}
@media (max-width: 899px) and (min-height: 521px) and (max-height: 700px) {
  .pp-toolbtn { width: 46px; min-height: 44px; padding: 4px; }
  .pp-toolbtn-l { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
}

/* Kopfleiste nur mit Symbolen: bis 599 px immer, darüber, sobald die Beschriftungen nicht mehr hineinpassen (app.js setzt die Klasse) */
.pp-nav-icons .pp-navbtn span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
@media (max-width: 599px) {
  .pp-navbtn span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
}
@media (max-width: 480px) {
  /* nur visuell ausblenden, damit die Knoepfe fuer Screenreader und Sprachsteuerung einen Namen behalten */
  .pp-navbtn span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
  .pp-strip { grid-template-columns: 6em 1fr; }
  .pp-ts-now span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
  .pp-ts-chip { font-size: 13px; }
}

/* schmale Bildschirme: keine Zeilenbeschriftung (Tag oben, Zeitpunkte darunter ergeben sich aus der Anordnung), Knoepfe teilen die Breite */
@media (max-width: 599px) {
  .pp-tlabel { display: none; }
  .pp-trow { grid-template-columns: minmax(0, 1fr); }
  .pp-tdays { grid-auto-columns: minmax(56px, 1fr); }
  .pp-tdays.night { grid-auto-columns: minmax(max-content, 1fr); }
  .pp-tbtns { grid-auto-columns: minmax(max-content, 1fr); }  /* nie abgeschnitten: wird es zu viel, rollt die Zeile (wie die Tage) */
  .pp-tday { padding-left: 3px; padding-right: 3px; }
  .pp-tbtn { padding-left: 4px; padding-right: 4px; }
  .pp-tbtn-name { font-size: 11.5px; }
}

/* niedrige Hochformat-Handys (z. B. 320 x 568): Zeitpanel schlanker, damit Legende, Blaetter und Karte nebeneinander Platz haben */
@media (max-width: 899px) and (max-height: 700px) and (orientation: portrait) {
  .pp-statement { font-size: 14px; }
  .pp-timemeta { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  /* Sonne und Mond: Karte mit Mondphase und Zeiten schlanker (die Fusszeile braucht hier mehr Platz) */
  .pp-ts-card { margin-top: 4px; padding: 4px 8px; gap: 8px; }
  .pp-ts-phase { font-size: 13px; }
  .pp-ts-ev { gap: 2px 6px; }
  .pp-ts-chip { font-size: 12px; gap: 3px; }
}

/* Handy quer (niedrige Fenster): Zeitpanel schlank, Blaetter als Seitenspalten statt Bodenblatt, Legende als schmale Zeile rechts neben der Kopfleiste,
   Werkzeuge am linken Rand; so bleibt moeglichst viel Karte (die Legende reserviert hier keine Hoehe: --legend-h ist 0) */
@media (max-height: 520px) and (orientation: landscape) {
  .pp-timemeta { display: none; }
  .pp-tlabel { display: none; }
  .pp-trow { grid-template-columns: minmax(0, 1fr); }
  /* Zeitpanel (seit 1.9.2 deutlich kleiner): schmal und links neben den Werkzeugen statt über die ganze Breite; Zeiten-Box oben in einer kleinen Zeile,
     darunter Tage und Zeitpunkte nebeneinander in einer Zeile (etwa ein Fünftel der Höhe statt gut einem Drittel) */
  .pp-timectl { flex-direction: row; align-items: center; justify-content: center; gap: 8px; }
  .pp-trow { flex: 0 1 auto; min-width: 0; }
  .pp-tdays { grid-auto-columns: minmax(54px, 84px); }
  .pp-tdays.night { grid-auto-columns: minmax(80px, 120px); }
  .pp-tbtns { grid-auto-columns: minmax(max-content, 112px); padding-bottom: 0; }
  .pp-tday { min-height: 34px; gap: 0; padding: 1px 4px; border-radius: 8px; }
  .pp-tday-name { font-size: 12.5px; }
  .pp-tday-date { font-size: 11px; }
  .pp-tbtn { min-height: 36px; padding: 1px 6px 2px; border-top-width: 3px; border-radius: 8px; }
  .pp-tbtn-time { font-size: 13.5px; }
  .pp-tbtn-name { font-size: 11px; }
  .pp-statement { font-size: 13px; margin: 0 0 3px; }
  .pp-evbox { display: flex; justify-content: center; align-items: center; column-gap: 32px; padding: 0; margin: 0 0 3px; }
  .pp-evrow { display: flex; align-items: center; gap: 8px; }
  .pp-evrow > .pp-evsep { display: inline; }
  .pp-evic { width: 20px; height: 20px; }
  .pp-evic .pp-i { width: 14px; height: 14px; }
  .pp-evtime, .pp-evsep { font-size: 12px; }
  .pp-side, .pp-point, .pp-point.collapsed {
    top: calc(var(--top-h) + var(--legend-h, 0px) + 6px); bottom: auto; width: min(380px, 48vw);
    max-height: calc(100% - var(--top-h) - var(--legend-h, 0px) - var(--bottom-h) - 12px); border-radius: var(--radius);
  }
  .pp-side { left: 6px; right: auto; }
  .pp-point, .pp-point.collapsed { right: 6px; left: auto; }
  .pp-top { right: auto; border-radius: 0 0 12px 0; }
  .pp-topnav { flex: none; }
  .pp-lg-wrap { top: 8px; left: var(--top-w, 300px); right: 10px; width: auto; justify-content: flex-start; }
  .pp-lg { width: 100%; border-radius: 10px; padding: 3px 10px; grid-template-columns: auto minmax(110px, 1fr); column-gap: 12px;
    grid-template-areas: "head scale" "more more" "tr tr"; align-items: center; }
  .pp-lg-track { margin: 4px 0 0; }
  .pp-lg-names, .pp-lg-nums { display: none; }
  .pp-lg-chip { min-height: 26px; padding: 2px 8px; font-size: 11.5px; } /* niedrige Anzeige: kleinere Varianten-Schalter (mindestens 24 px hoch) */
  .pp-lg-head { min-height: 28px; }
  .pp-lg-tr input[type="range"] { flex: 1 1 0; min-width: 0; width: auto; }
  .pp-tools { top: calc(var(--top-h) + 6px); left: 10px; right: auto; gap: 4px; }
  .pp-toolbtn { min-height: 38px; padding-top: 2px; padding-bottom: 2px; } /* sechs Knoepfe muessen in die niedrige Karte passen */
  .pp-tools .leaflet-control-zoom a { height: 34px; line-height: 34px; }
  /* die zweizeilige Zeitwahl ist hoeher als der Platz unter den Werkzeugen: sie beginnt rechts neben deren Spalte */
  .pp-time { left: 62px; transform: none; width: min(calc(100% - 68px), 540px); padding: 4px 8px 5px; }
  .pp-ts-card { display: none; }
}
@media (max-height: 360px) and (orientation: landscape) {
  /* sehr niedrige Handys quer (z. B. 568 x 320): sechs Knoepfe (Zoom +/-, Pin, Sonne, Mond, Position) muessen untereinander passen */
  .pp-tools { gap: 3px; }
  .pp-toolbtn { min-height: 32px; }
  .pp-tools .leaflet-control-zoom a { height: 30px; line-height: 30px; }
}

/* Handy hochkant und quer: die Varianten-Schalter stehen in der Skalenbox immer in einer eigenen, vollen Zeile unter dem Titel (der Pfeil bleibt oben rechts) */
@media (max-width: 599px) and (orientation: portrait), (max-height: 520px) and (orientation: landscape) {
  .pp-lg-head { padding-right: 0; }
  .pp-lg-title { margin-right: 36px; }
  .pp-lg-variants { flex: 1 0 100%; justify-content: stretch; margin-left: 0; }
  .pp-lg-chip { flex: 1 1 auto; text-align: center; padding-left: 8px; padding-right: 8px; }
}