/* btclevels — siehe DESIGN.md */

/* Work Sans, selbst gehostet (SIL OFL, Lizenz in fonts/OFL.txt). Eine
   variable Datei deckt alle Gewichte ab; kein CDN, keine Anfrage an Dritte. */
@font-face {
  font-family: "Work Sans";
  src: url("/static/fonts/work-sans-latin-wght.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  color-scheme: dark;

  /* Raum hinter dem Glas: tiefes Petrol-Blau, unten warm (Vorlage design3.jpg) */
  --wall:      oklch(0.21 0.03 235);
  --wall-deep: oklch(0.17 0.025 240);

  /* Glas: großes Panel, darin hellere Glas-Kacheln. Alles halbtransparent,
     die Kanten sind nur ein Hauch heller als die Fläche. */
  --glass-edge: oklch(1 0 0 / 0.14);
  --tile:       oklch(1 0 0 / 0.075);
  --tile-top:   oklch(1 0 0 / 0.11);
  --tile-hover: oklch(1 0 0 / 0.12);
  --tile-edge:  oklch(1 0 0 / 0.07);
  --bg-solid:   oklch(0.27 0.02 232);
  --bg-inset:   oklch(0.21 0.018 235);
  --border:        oklch(1 0 0 / 0.08);
  --border-strong: oklch(1 0 0 / 0.18);

  /* Text */
  --text:         oklch(0.985 0.002 240);
  --text-heading: oklch(0.985 0.002 240);
  --text-dim:     oklch(0.94 0.005 240);
  --text-faint:   oklch(0.89 0.007 240);

  /* Akzent (Himmelblau aus dem Ring der Vorlage) und Status */
  --accent:       oklch(0.7 0.14 237);
  --accent-hover: oklch(0.75 0.13 237);
  --accent-ink:   oklch(0.2 0.04 240);
  --ok:   oklch(0.87 0.13 155);
  --warn: oklch(0.9 0.15 108);
  --err:  oklch(0.88 0.075 22);

  /* Pillen: gefüllt wie „On Going"/„Complete" in der Vorlage, aber mit
     dunkler Schrift (weiß auf Lindgrün erreicht kein 4.5:1) */
  --ok-fill:   oklch(0.72 0.14 155);
  --warn-fill: oklch(0.8 0.16 112);
  --pill-ink:  oklch(0.2 0.03 140);
  --neutral-tint: oklch(1 0 0 / 0.12);
  --ok-tint:   oklch(0.82 0.15 155 / 0.16);
  --warn-tint: oklch(0.88 0.16 108 / 0.14);
  --err-tint:  oklch(0.76 0.15 25 / 0.16);
  --ok-line:   oklch(0.82 0.15 155 / 0.45);
  --warn-line: oklch(0.88 0.16 108 / 0.4);
  --err-line:  oklch(0.76 0.15 25 / 0.45);

  /* Skalen und Scrollbars */
  --rule:       oklch(1 0 0 / 0.16);
  --rule-hover: oklch(1 0 0 / 0.26);
  --track:      oklch(1 0 0 / 0.1);

  --radius: 999px;          /* Buttons und Pillen sind ganz rund */
  --radius-panel: 28px;
  --radius-card: 18px;
  --radius-chip: 999px;
  --gap: 1rem;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

* { box-sizing: border-box; }

html, body { margin: 0; }

/* Scrollbars passend zum Theme (Firefox + Chromium) */
html {
  scrollbar-color: var(--rule) transparent;
  scrollbar-width: thin;
}
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: var(--rule);
  border-radius: 999px;
  border: 2px solid var(--wall-deep);
}
::-webkit-scrollbar-thumb:hover { background: var(--rule-hover); }
::-webkit-scrollbar-corner { background: transparent; }

/* Der „Raum" hinter dem Glas: weiches Licht von oben, warmer Boden unten,
   ein gedämpftes Grün links (die Pflanzen der Vorlage, als Licht statt Foto).
   fixed, damit das Glas beim Scrollen über ruhigem Hintergrund liegt. */
body {
  background:
    radial-gradient(60rem 36rem at 45% -12%, oklch(0.55 0.05 225 / 0.55), transparent 70%),
    radial-gradient(34rem 30rem at 4% 82%, oklch(0.45 0.08 140 / 0.35), transparent 70%),
    radial-gradient(40rem 26rem at 96% 62%, oklch(0.42 0.06 245 / 0.4), transparent 70%),
    radial-gradient(90rem 30rem at 50% 118%, oklch(0.58 0.06 70 / 0.45), transparent 70%),
    linear-gradient(180deg, var(--wall-deep), var(--wall) 55%, oklch(0.24 0.02 70));
  background-attachment: fixed;
  color: var(--text);
  font: 400 1rem/1.5 "Work Sans", "Segoe UI", system-ui, sans-serif;
  font-variant-numeric: tabular-nums;
  min-height: 100dvh;
}

/* Das große Glas-Panel trägt die ganze Seite. Lichtverlauf: oben links
   kühl-hell, nach unten neutral-warm — wie das Raumlicht der Vorlage. */
.glass {
  width: min(1320px, 100% - 3rem);
  margin: 2.5rem auto;
  padding: 1.75rem 1.75rem 2rem;
  border: 1px solid var(--glass-edge);
  border-radius: var(--radius-panel);
  background:
    radial-gradient(48rem 22rem at 18% 0%, oklch(1 0 0 / 0.07), transparent 70%),
    linear-gradient(165deg,
      oklch(0.5 0.035 220 / 0.55) 0%,
      oklch(0.37 0.02 225 / 0.5) 45%,
      oklch(0.3 0.008 80 / 0.55) 75%,
      oklch(0.36 0.01 85 / 0.55) 100%);
  -webkit-backdrop-filter: blur(28px) saturate(1.15);
  backdrop-filter: blur(28px) saturate(1.15);
}

h1, h2 { margin: 0; font-weight: 600; }
h1 {
  font-size: 1.5rem;
  letter-spacing: -0.005em;
  color: var(--text-heading);
}
h2 { font-size: 1rem; }
.label-sub {
  font-size: 0.8125rem;
  font-weight: 400;
  color: var(--text-faint);
  margin-left: 0.5rem;
}

/* Nur für Screenreader (Live-Meldung bei Wert-Updates) */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Glas-Kacheln im Panel: etwas heller als das Panel, oben ein Hauch mehr
   Licht. Kein Schatten — die Kachel hebt sich nur über die Helligkeit ab. */
.level-cell,
.panel-foot,
.sentiment-cell {
  background: linear-gradient(170deg, var(--tile-top), var(--tile) 60%);
  border: 1px solid var(--tile-edge);
  border-radius: var(--radius-card);
}

/* ---------- Topbar ---------- */

/* Kopfzeile des Panels: Wortmarke groß und fett wie der Titel der Vorlage,
   der Preis als Glas-Pille rechts. */
.topbar {
  margin: 0 0 1.75rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.wordmark {
  font-size: 2.25rem;
  font-weight: 500;
  letter-spacing: -0.01em;
  line-height: 1.1;
  color: var(--text-dim);
  display: flex;
  align-items: center;
  gap: 0.7rem;
  user-select: none;
}
.wordmark b { color: var(--text); font-weight: 700; margin-left: -0.15em; }
.wordmark-tick {
  width: 2.5rem; height: 2.5rem;
  flex: none;
  display: block;
}

.topbar-status { display: flex; align-items: center; gap: 1rem; }

.btc-price {
  font-weight: 600;
  font-size: 1.125rem;
  color: var(--text);
  white-space: nowrap;
  padding: 0.45rem 1.05rem;
  border-radius: 999px;
  background: var(--tile-top);
  border: 1px solid var(--tile-edge);
}

/* ---------- Buttons ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font: inherit;
  font-size: 0.875rem;
  font-weight: 600;
  border-radius: var(--radius);
  border: 1px solid transparent;
  padding: 0.5rem 1.05rem;
  cursor: pointer;
  transition: background-color 0.18s var(--ease), border-color 0.18s var(--ease),
              color 0.18s var(--ease), transform 0.12s var(--ease);
}
.btn:active { transform: translateY(1px); }
.btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.btn:disabled { opacity: 0.45; cursor: default; transform: none; }

.btn-primary {
  background: var(--accent);
  color: var(--accent-ink);
}
.btn-primary:hover:not(:disabled) { background: var(--accent-hover); }
.btn-primary.copied { background: var(--ok); }

.btn-ghost {
  background: oklch(1 0 0 / 0.1);
  color: var(--text);
  border-color: oklch(1 0 0 / 0.08);
}
.btn-ghost:hover:not(:disabled) {
  background: oklch(1 0 0 / 0.16);
  border-color: var(--border-strong);
}
.btn-ghost[aria-expanded="true"] { background: oklch(1 0 0 / 0.18); }
/* Erfolgszustand auch für den sekundären Copy-Button. Muss die Hover-Regel
   überschreiben — nach dem Klick steht der Zeiger ja noch auf dem Button. */
.btn-ghost.copied,
.btn-ghost.copied:hover:not(:disabled) {
  color: var(--ok);
  border-color: var(--ok-line);
  background: var(--ok-tint);
}

.icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.9rem;
  height: 1.9rem;
  flex: none;
  border: 1px solid transparent;
  border-radius: 50%;
  background: transparent;
  color: var(--text-dim);
  cursor: pointer;
  transition: background-color 0.18s var(--ease), color 0.18s var(--ease);
}
.icon-btn:hover { background: oklch(1 0 0 / 0.14); color: var(--text); }
.icon-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ---------- Notice ---------- */

.notice {
  margin: 0 0 1.25rem;
  padding: 0.6rem 1rem;
  border: 1px solid var(--warn-line);
  background: var(--warn-tint);
  color: var(--warn);
  border-radius: var(--radius-card);
  font-size: 0.875rem;
}
.notice.error {
  border-color: var(--err-line);
  background: var(--err-tint);
  color: var(--err);
}

/* ---------- Levels ---------- */

.levels-head { margin-bottom: 1rem; }

/* Fünf einzelne Karten, darunter die PineScript-Leiste als eigene Karte.
   Das Raster bleibt fünfspaltig — der Sentiment-Abschnitt richtet sich
   daran aus. */
.levels-strip {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: var(--gap);
}

.panel-foot {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-top: var(--gap);
  padding: 0.75rem 0.85rem 0.75rem 1.4rem;
}
.panel-foot .foot-title { font-size: 1rem; font-weight: 600; color: var(--text); }
.panel-foot .label-sub { font-size: 0.8125rem; margin-left: 0.45rem; }

.level-cell {
  padding: 1.1rem 1rem 1.05rem;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  min-width: 0;
  transition: background-color 0.15s var(--ease), border-color 0.15s var(--ease);
}
.level-cell:hover { background: var(--tile-hover); border-color: var(--border); }

.level-name {
  display: flex;
  flex-wrap: wrap;            /* breitester Fall (Datums-Badge): Badge bricht um, Name bleibt ganz */
  align-items: center;
  gap: 0.25rem 0.45rem;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--text);
  white-space: nowrap;
  min-width: 0;
}
.level-dot {
  width: 0.55rem; height: 0.55rem;
  border-radius: 50%;
  flex: none;
}

.level-value {
  font-size: 1.75rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.15;
  margin-top: 0.15rem;
}
.level-value.flash { animation: flash 0.9s var(--ease); }
@keyframes flash { 0% { color: var(--accent); } 100% { color: inherit; } }

.level-cell.stale .level-value { color: var(--warn); }

.level-meta {
  font-size: 0.75rem;
  letter-spacing: -0.01em;
  color: var(--text-faint);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.level-delta { font-size: 0.75rem; letter-spacing: -0.01em; color: var(--text-dim); }
/* Work Sans läuft breiter: wird die Zeile zu lang, bricht sie als Ganzes vor
   „7T" um statt mitten in einer Zahl */
.level-delta b, .level-trend { white-space: nowrap; }
.level-delta .above { color: var(--ok); }
.level-delta .below { color: var(--err); }

/* Chips: gefüllte Pillen wie in der Vorlage — Grün „erledigt", Lindgrün
   „läuft/Achtung", neutral als Glas-Pille */
.day-badge, .stale-badge, .sent-badge {
  font-size: 0.6875rem;
  font-weight: 600;
  line-height: 1.4;
  border-radius: var(--radius-chip);
  padding: 0.1rem 0.55rem;
  flex: none;
}
.day-badge { margin-left: auto; }
.day-badge.today { color: var(--pill-ink); background: var(--ok-fill); }
.day-badge.prev  { color: var(--text-dim); background: var(--neutral-tint); }
.day-badge.old, .stale-badge { color: var(--pill-ink); background: var(--warn-fill); }
.stale-badge { margin-left: 0.3rem; }

.level-cell.skeleton { height: 7rem; justify-content: center; }
.level-cell.skeleton span, .sentiment-cell.skeleton span {
  display: block;
  height: 0.9rem;
  width: 70%;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--track) 25%, var(--rule) 50%, var(--track) 75%);
  background-size: 200% 100%;
  animation: shimmer 1.4s infinite linear;
}
.level-cell.skeleton span:first-child,
.sentiment-cell.skeleton span:first-child { width: 45%; }
@keyframes shimmer { to { background-position: -200% 0; } }

/* ---------- BTC Sentiment ---------- */

.sentiment { margin-top: 2.25rem; }

/* Zwei Karten im selben 5-Spalten-Raster wie die Levels: der
   Realized-P/L-Block über drei Spalten, die Trendbestätigung über zwei —
   so fluchten die Kanten mit den Kacheln darüber. */
.sentiment-panel {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: var(--gap);
}
.sentiment-panel > .sentiment-cell:nth-child(1) { grid-column: span 3; }
.sentiment-panel > .sentiment-cell:nth-child(2) { grid-column: span 2; }
/* Nur eine Kachel vorhanden (die andere Quelle fehlt) — dann volle Breite */
.sentiment-panel.single > .sentiment-cell { grid-column: 1 / -1; }

/* Innerhalb einer Karte: drei Facetten derselben Aussage, nur durch
   Weißraum getrennt. Ungleiche Spalten, weil Zone 1 Name + Badge trägt. */
.sentiment-cell {
  display: grid;
  grid-template-columns: 1.45fr 1.1fr 0.95fr;
  gap: 1.5rem;
  padding: 1.15rem 1.4rem 1.1rem;
  min-height: 140px;
  min-width: 0;
}

.sent-zone { display: flex; flex-direction: column; min-width: 0; }

.sent-label {
  display: flex;
  flex-wrap: wrap;            /* wie .level-name: lieber Badge umbrechen als Name kürzen */
  align-items: center;
  gap: 0.25rem 0.5rem;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--text);
  white-space: nowrap;
  min-width: 0;
}
.sent-label > span:first-child { overflow: hidden; text-overflow: ellipsis; }

.sent-value {
  font-size: 1.625rem;
  font-weight: 600;
  letter-spacing: 0.005em;
  line-height: 1.15;
  margin-top: 0.3rem;
}
.sent-value.active { color: var(--warn); }

/* gleiche Grundlinie wie der Wert in Zone 1 */
.sent-value-row { display: flex; align-items: baseline; gap: 0.5rem; min-width: 0; margin-top: 0.3rem; }
.sent-value-row .sent-value { margin-top: 0; }

.sent-note {
  font-size: 0.75rem;
  color: var(--text-faint);
  overflow: hidden;
  text-overflow: ellipsis;
}
.sent-note.push { margin-top: auto; }
.sent-note + .sent-note { margin-top: 0.15rem; }
.sent-stale { color: var(--warn); }

.sent-badge {
  margin-left: auto;
  color: var(--text-dim);
  background: var(--neutral-tint);
}
.sent-badge.active { color: var(--pill-ink); background: var(--warn-fill); }
/* „bestätigt" = Bedingung erfüllt, nicht „gut" — dieselbe Lesart wie die
   Häkchen in der Bedingungsliste. */
.sent-badge.met { color: var(--pill-ink); background: var(--ok-fill); }

/* Abstands-Skala: die Kreuzung (0 %) ist ein fester Anker, links davon liegt
   der Bereich mit aktivem Bodensignal. Beide Seiten im selben Maßstab. */
.gap-meter { margin-top: 0.8rem; }

.gap-track {
  position: relative;
  height: 10px;
  background: var(--track);
  border-radius: 999px;
}
.gap-zone-active {
  position: absolute;
  left: 0; top: 0; bottom: 0;
  background: var(--rule);
  border-radius: 999px 0 0 999px;
}
.gap-fill {
  position: absolute;
  top: 0; bottom: 0;
  background: var(--warn);
  opacity: 0.9;
}
.gap-anchor {
  position: absolute;
  top: -3px; bottom: -3px;
  width: 2px;
  background: var(--text-dim);
}
.gap-marker {
  position: absolute;
  top: -4px;
  width: 3px;
  height: 18px;
  transform: translateX(-50%);
  border-radius: 2px;
  background: var(--text);
}
.gap-anchor-label {
  position: absolute;
  top: 0.7rem;
  transform: translateX(-50%);
  font-size: 0.75rem;
  color: var(--text-faint);
  white-space: nowrap;
}
/* Liegt der Abstand über der Skalengrenze (historisch der Normalfall), tritt
   dieses Zeichen an die Stelle der Marke — sonst würde eine Marke am Anschlag
   „genau 25 %" vortäuschen. */
.gap-clamped {
  position: absolute;
  top: -6px;
  right: -2px;
  font-size: 0.8125rem;
  line-height: 1;
  color: var(--text);
}

/* Kreuzungsspanne: Fenster-Band als Strecke, Heute und Basistermin als Marken */
.range { margin-top: 0.6rem; }
.range-track {
  position: relative;
  height: 6px;
  background: var(--rule);
  border-radius: 999px;
}
.range-today {
  position: absolute;
  top: -4px;
  width: 2px;
  height: 13px;
  transform: translateX(-50%);
  background: var(--text-dim);
}
.range-base {
  position: absolute;
  top: -5px;
  width: 3px;
  height: 15px;
  transform: translateX(-50%);
  border-radius: 2px;
  background: var(--warn);
}
.range-ends {
  display: flex;
  justify-content: space-between;
  font-size: 0.75rem;
  color: var(--text-faint);
  margin-top: 0.4rem;
}

/* Zweite Karte: Zustand links, Bedingungsliste rechts. Links mehr Platz, weil
   die Zeile „fehlt bis 55 über 200" die Zahl erklärt und nicht umbrechen soll. */
.sentiment-cell.trend { grid-template-columns: 1.6fr 1fr; gap: 1.25rem; }

.cond-list {
  list-style: none;
  margin: 0.4rem 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}
.cond-list li {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.75rem;
  color: var(--text-faint);
  white-space: nowrap;
}
/* Erfüllt/offen unterscheidet sich in der Form des Zeichens, nicht nur in
   der Farbe — Farbe allein wäre als einziger Träger nicht zulässig. */
.cond-list li.met { color: var(--text-dim); }
.cond-icon { flex: none; color: var(--text-faint); }
.cond-list li.met .cond-icon { color: var(--ok); }

.sentiment-cell.skeleton {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.55rem;
}

/* ---------- PineScript ---------- */

/* wrap: drei Buttons passen auf schmalen Breiten nicht mehr in eine Zeile */
.pine-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin-left: auto;
}

/* Das Script liegt in einem schwebenden Fenster (non-modal <dialog>): die Seite
   bleibt bedienbar, „Script kopieren" also auch bei offenem Fenster klickbar.
   Deckende Fläche (kein Glas), weil es über Inhalt liegt und Code lesbar
   bleiben muss; getrennt über die hellere Kante statt über einen Schatten. */
.pine-dialog {
  position: fixed;
  top: 6vh;
  left: 50%;
  transform: translateX(-50%);
  z-index: 50;
  margin: 0;
  padding: 0;
  width: min(920px, 100% - 3rem);
  max-height: 80vh;
  display: none;
  flex-direction: column;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-card);
  background: var(--bg-solid);
  color: var(--text);
  overflow: hidden;
}
.pine-dialog[open] { display: flex; animation: pine-in 0.18s var(--ease); }
@keyframes pine-in {
  from { opacity: 0; transform: translate(-50%, -8px); }
  to   { opacity: 1; transform: translate(-50%, 0); }
}

/* Das Fenster zeigt nur den Code; das × schwebt darüber statt in einer
   eigenen Kopfleiste. Der eigene Hintergrund hält es lesbar, wenn Code
   darunter durchscrollt. */
.pine-close {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  z-index: 1;
  background: var(--bg-inset);
}

/* Existiert nur im Fenster — Rahmen und Radius trägt der Dialog. Code bleibt
   bewusst in Monospace. */
.pine-code {
  flex: 1;
  min-height: 0;
  margin: 0;
  background: var(--bg-inset);
  /* rechts Platz, damit keine Codezeile unter dem × verschwindet */
  padding: 0.9rem 3.1rem 0.9rem 1.1rem;
  font: 400 0.8125rem/1.55 ui-monospace, "Cascadia Mono", Consolas, monospace;
  color: var(--text-dim);
  overflow: auto;
  white-space: pre;
}
.pine-code:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }

/* ---------- Responsive ---------- */

/* Breakpoints in em statt px: em bezieht sich in Media Queries auf die
   Standard-Schriftgröße des Browsers, nicht auf :root. Wer die Schrift
   hochsetzt, bekommt dadurch früher weniger Spalten, statt dass der Text
   aus den Kacheln läuft (WCAG 2.2 SC 1.4.4). Bei den üblichen 16px
   entsprechen 79em/40em exakt 1264px/640px. Unter 79em passt „Wert vom …"
   in Work Sans nicht mehr in fünf Kacheln nebeneinander. */
@media (max-width: 79em) {
  .glass { padding: 1.25rem 1.25rem 1.5rem; }
  .level-cell { padding-inline: 0.9rem; }
  /* Nebeneinander würden beide Sentiment-Karten zu schmal */
  .sentiment-panel { grid-template-columns: 1fr; }
  .sentiment-panel > .sentiment-cell:nth-child(n) { grid-column: 1 / -1; }
  .levels-strip { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 40em) {
  :root { --gap: 0.75rem; --radius-panel: 22px; }
  .glass { width: calc(100% - 1rem); margin: 0.5rem auto; padding: 1.1rem 0.9rem 1.25rem; }
  .topbar { margin-bottom: 1.25rem; flex-wrap: wrap; row-gap: 0.75rem; }
  .wordmark { font-size: 1.6rem; gap: 0.55rem; }
  .wordmark-tick { width: 2rem; height: 2rem; }
  .btc-price { font-size: 1rem; padding: 0.35rem 0.8rem; }
  h1 { font-size: 1.3rem; }
  .pine-dialog { top: 4vh; width: calc(100% - 1.5rem); max-height: 88vh; }
  .panel-foot { flex-direction: column; align-items: flex-start; gap: 0.6rem; }
  .pine-actions { margin-left: 0; }
  /* Drei Zonen nebeneinander sind bei dieser Breite nicht mehr lesbar */
  .sentiment-cell,
  .sentiment-cell.trend {
    grid-template-columns: 1fr;
    gap: 1.1rem;
    min-height: 0;
  }
  .sent-note.push { margin-top: 0.15rem; }
  /* Die Beschriftung „0 %" hängt absolut unter der Skala — Platz dafür
     freihalten, sonst überlappt sie die Zeile darunter */
  .gap-meter { padding-bottom: 1.35rem; }
  /* Fingerbediente Trefferflächen (44px) statt der Desktop-Kompaktgrößen */
  .btn { min-height: 44px; padding: 0.5rem 0.9rem; }
  .icon-btn { width: 44px; height: 44px; }
  .pine-code { padding-right: 3.75rem; }   /* Platz für das größere × */
  .levels-strip { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  /* Der Wert-Flash ist Information ("dieser Wert hat sich gerade geändert"),
     keine Zierde. Ohne Bewegung bleibt er als statische Einfärbung stehen,
     bis der nächste Poll die Kachel neu zeichnet. */
  .level-value.flash { animation: none !important; color: var(--accent); }
}