/* meteo365 v4 — Earthquakes Page */

/* ===== Layout: Map-First-Stage (Karte = 100% minus Header, Muster start.php) ===== */
.eq-stage {
  position: fixed;
  inset: var(--header-height) 0 0 0;
  display: block;
}
.eq-map {
  position: absolute;
  inset: 0;
  z-index: 1;
  isolation: isolate;
  background: var(--bg);
}
/* Canvas transparent lassen: im Flach-Modus füllt die GL-Background-Ebene (mapBg)
   die Canvas ohnehin; im Globe-Modus MUSS sie transparent sein, sonst überdeckt die
   Canvas-Farbe den Sternen-/Himmel-Hintergrund (meteo-space) rund um die Kugel.
   Lade-Flash deckt der .eq-map-Hintergrund (var(--bg)) ab. */
.eq-map .maplibregl-canvas { background: transparent; }

/* Live-Titel: schwebende Glass-Pill oben mittig */
.eq-title-pill {
  position: absolute;
  top: 12px; left: 50%;
  transform: translateX(-50%);
  z-index: 25;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 16px;
  background: var(--bg-elev); border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  box-shadow: var(--shadow-soft);
  backdrop-filter: blur(14px);
  white-space: nowrap;
  max-width: calc(100% - 24px);
}
.eq-title-pill .eq-live-dot { margin-right: 0; }
.eq-title-live {
  color: var(--accent-alt);   /* Magenta (globale LIVE-Farbe) */
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .1em;
  font-size: 11px;
}
.eq-title-text {
  font-size: 13px; font-weight: 600;
  color: var(--text);
  overflow: hidden; text-overflow: ellipsis;
}

/* Tsunami-Banner schwebt unter dem Live-Titel */
.eq-tsunami-wrap {
  position: absolute;
  top: 56px; left: 50%;
  transform: translateX(-50%);
  z-index: 30;
  width: min(720px, calc(100% - 24px));
  pointer-events: none;
}
.eq-tsunami-wrap .eq-tsunami-banner { pointer-events: auto; margin: 0; }

.eq-side-card--filters { width: 286px; max-width: 286px; padding: 15px 16px; }

.eq-panel-left {
  position: absolute; z-index: 500;
  top: 14px; left: 14px;
  max-height: calc(100% - 28px);
  overflow-y: auto;
  /* Die !important hier waren Reste der entfernten .eq-panel-Basisklasse und
     überstimmten nichts mehr (2026-07-19 bereinigt). */
  background: transparent;
  border: 0;
  box-shadow: none;
  backdrop-filter: none;
  padding: 0;
  display: flex; flex-direction: column;
  align-items: flex-start;             /* Karten ihre natürliche Breite */
  gap: 10px;
}
.eq-side-card {
  background: var(--bg-elev); border: 1px solid var(--line);
  border-radius: var(--radius); box-shadow: var(--shadow-soft);
  backdrop-filter: blur(14px);
  padding: 12px 14px;
  width: max-content;                  /* nimmt nur so viel Platz wie nötig */
  max-width: 260px;
}
.eq-side-card h3 {
  margin: 0 0 8px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: none;
  color: var(--text);
}

/* Magnitude-Card breiter, damit alle 6 Chips komfortabel in einer Reihe passen */
/* ===== Filter-Block (Magnitude + Zeitraum) ===== */
.eq-filter-sec + .eq-filter-divider { margin-top: 12px; }
.eq-filter-divider {
  height: 1px;
  background: rgba(var(--eq-fg-rgb), .10);
  margin: 12px 0;
}
.eq-filter-label {
  display: flex; align-items: center; gap: 6px;
  margin: 0 0 9px;
  font-size: 10.5px; font-weight: 800;
  letter-spacing: .14em; text-transform: uppercase;
  color: rgba(var(--eq-fg-rgb), .55);
}
.eq-filter-info {
  display: inline-flex; align-items: center; justify-content: center;
  width: 16px; height: 16px; padding: 0;
  border: 0; background: none; cursor: help;
  color: rgba(var(--eq-fg-rgb), .4);
  transition: color .15s;
}
.eq-filter-info:hover { color: rgba(var(--eq-fg-rgb), .8); }
.eq-filter-info svg {
  width: 15px; height: 15px;
  fill: none; stroke: currentColor; stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round;
}

/* Auto-Track-Toggle (iOS-Switch, theme-aware via --eq-fg-rgb) */
.eq-track { display: flex; align-items: center; gap: 10px; cursor: pointer; margin: 0; }
.eq-track-text { display: flex; flex-direction: column; gap: 2px; flex: 1 1 auto; min-width: 0; }
.eq-track-title {
  font-size: 10.5px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase;
  color: rgba(var(--eq-fg-rgb), .6);
}
.eq-track-hint { font-size: 10px; line-height: 1.3; color: rgba(var(--eq-fg-rgb), .5); }
.eq-track-input { position: absolute; opacity: 0; width: 0; height: 0; pointer-events: none; }
.eq-track-sw {
  flex: 0 0 auto; position: relative;
  width: 38px; height: 22px; border-radius: 11px;
  background: rgba(var(--eq-fg-rgb), .20);
  transition: background .18s ease;
}
.eq-track-sw::after {
  content: ""; position: absolute; top: 2px; left: 2px;
  width: 18px; height: 18px; border-radius: 50%;
  background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .35);
  transition: transform .18s ease;
}
.eq-track-input:checked + .eq-track-sw { background: var(--brand-cyan, #68c2e3); }
.eq-track-input:checked + .eq-track-sw::after { transform: translateX(16px); }
.eq-track-input:focus-visible + .eq-track-sw { outline: 2px solid var(--brand-cyan, #68c2e3); outline-offset: 2px; }
/* "Aktualisiert"-Fußzeile in der Filter-Karte */
.eq-filter-updated { display: flex; align-items: center; gap: 9px; }
.eq-filter-updated > svg {
  width: 18px; height: 18px; flex: 0 0 auto;
  color: var(--mag-1);
  fill: none; stroke: currentColor; stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round;
}
.eq-fu-body { min-width: 0; display: grid; gap: 1px; }
.eq-fu-label {
  font-size: 9px; font-weight: 700;
  letter-spacing: .09em; text-transform: uppercase;
  color: var(--muted);
}
.eq-fu-val { font-size: 13px; font-weight: 700; white-space: nowrap; }
.eq-fu-local { font-size: 10px; color: var(--muted); font-style: italic; margin-left: 6px; }
.eq-fu-local:empty { display: none; }

/* "Alle anzeigen"-Link am Ende der Recent-Liste */
.eq-recent-viewall {
  text-align: center;
  padding: 10px;
  font-weight: 700;
  font-size: 13px;
  color: var(--brand-cyan);
  text-decoration: none;
  border-top: 1px solid var(--line);
  margin-top: 8px;
}
.eq-recent-viewall:hover { text-decoration: underline; }

/* ===== Right-Stack (Map-Buttons, Muster start.php) ===== */
.eq-right-stack {
  position: absolute;
  top: 14px; right: 14px;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 10px;
  z-index: 20;
}
.map-btn {
  width: 42px; height: 42px;
  border: 0;
  border-radius: 12px;
  background: var(--map-control-bg);
  color: var(--map-control-ink);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  position: relative;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .18),
    0 10px 24px rgba(8, 49, 69, .24);
  transition: background var(--t) var(--ease),
              transform var(--t) var(--ease);
}
.map-btn:hover {
  background: var(--map-control-bg-hover);
  transform: translateY(-1px);
}
.map-btn.is-active {
  background: linear-gradient(180deg, var(--brand-sun), var(--brand-sun-2));
  color: var(--accent-ink);
}
.map-btn svg {
  width: 20px; height: 20px;
  fill: none; stroke: currentColor;
  stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
}
/* Text-Button (3D-Globus-Toggle: zeigt „3D" flach / „2D" auf der Kugel).
   1:1 aus pages/start.css — die lädt diese Seite nicht mit. */
.map-btn-text {
  font-family: var(--font-display, inherit);
  font-weight: 600;
  font-size: 14px;
  letter-spacing: .04em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.map-btn[data-tooltip]::after {
  content: attr(data-tooltip);
  position: absolute;
  right: calc(100% + 10px);
  top: 50%;
  transform: translateY(-50%);
  background: rgba(8, 49, 69, .92);
  color: #fff;
  font-size: 11.5px; font-weight: 600;
  padding: 5px 9px;
  border-radius: 8px;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transition: opacity 140ms ease;
}
.map-btn[data-tooltip]:hover::after { opacity: 1; }

/* ===== Ereignis-Drawer rechts (Alert + Stärkste + Recent) ===== */
.eq-drawer {
  position: absolute;
  top: 14px; right: 70px;          /* neben dem Right-Stack */
  bottom: 78px;                    /* endet über der Magnituden-Skala */
  z-index: 18;
  width: 330px;
  max-width: calc(100% - 84px);
  display: flex; flex-direction: column;
  gap: 10px;
  padding: 12px;
  overflow: hidden;
  background: var(--bg-elev);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  backdrop-filter: blur(14px);
  transform: translateX(calc(100% + 84px));
  opacity: 0;
  pointer-events: none;
  transition: transform 220ms cubic-bezier(.2, .7, .2, 1), opacity 180ms ease;
}
.eq-drawer.is-open {
  transform: none;
  opacity: 1;
  pointer-events: auto;
}
.eq-drawer .eq-strongest { flex: 0 0 auto; }
.eq-drawer .eq-recent { flex: 1; min-height: 0; }
/* "Alle anzeigen"-Link im Drawer (zwischen Alert und Letzte Ereignisse) */
.eq-drawer-viewall {
  flex: 0 0 auto;
  display: block; text-align: center;
  padding: 9px 12px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--line);
  background: var(--surface);
  color: rgb(var(--eq-fg-rgb)); font-size: 13px; font-weight: 700;
  text-decoration: none;
  transition: border-color .15s, background .15s;
}
.eq-drawer-viewall:hover { border-color: rgba(var(--eq-fg-rgb), .45); background: rgba(var(--eq-fg-rgb), .12); }

/* Magnitude-Filter: alle in eine Reihe, je Pille in eigener Magnituden-Farbe.
   --c trägt die Farbe; color-mix erzeugt getönte Border/Fill/Glow daraus. */
.eq-mag-row { display: flex; flex-wrap: nowrap; gap: 6px; }
.eq-mag-row label { flex: 1; min-width: 0; }
.eq-mag-row label input { display: none; }
.eq-mag-row label[data-mag="all"] { --c: var(--brand-cyan); }
.eq-mag-row label[data-mag="2"]   { --c: var(--mag-2); }
.eq-mag-row label[data-mag="3"]   { --c: var(--mag-3); }
.eq-mag-row label[data-mag="4"]   { --c: var(--mag-4); }
.eq-mag-row label[data-mag="5"]   { --c: var(--mag-5); }
.eq-mag-row label[data-mag="6"]   { --c: var(--mag-6); }
.eq-mag-row label span {
  display: block; text-align: center;
  padding: 7px 0; border-radius: 10px;
  border: 1.5px solid color-mix(in srgb, var(--c) 60%, transparent);
  background: color-mix(in srgb, var(--c) 12%, transparent);
  color: var(--c);
  font-size: 11px; font-weight: 800;
  cursor: pointer;
  transition: background .15s ease, color .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.eq-mag-row label:hover span {
  background: color-mix(in srgb, var(--c) 24%, transparent);
  border-color: color-mix(in srgb, var(--c) 80%, transparent);
}
.eq-mag-row label input:checked + span {
  background: var(--c); border-color: var(--c); color: #fff;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .35);   /* weiß auf Orange lesbar */
}
/* Gelb (M2+) braucht dunklen Text für Kontrast (kein Schatten) */
.eq-mag-row label[data-mag="2"] input:checked + span { color: #1c1c1c; text-shadow: none; }
/* „Alle" = Türkis-Funke als Verlauf (Lagune 300 → 500), weißer Text.
   color/text-shadow explizit, damit die Regel auch den Light-Mode-Block unten schlägt. */
.eq-mag-row label[data-mag="all"] input:checked + span {
  background: linear-gradient(180deg, #68c2e3, #158dbd);
  border-color: rgba(104, 194, 227, .6);
  color: #fff;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .35);
}

/* Zeitraum-Buttons nebeneinander */
.eq-time-row { display: flex; gap: 6px; }
.eq-time-row .eq-chip { flex: 1; justify-content: center; text-align: center; padding: 7px 4px; white-space: nowrap; }

/* Floating Skala unten rechts (wie auf der Startseite); Drawer endet darüber */
.eq-scale-bar {
  position: absolute; z-index: 15;
  bottom: 14px; right: 14px;
  background: var(--bg-elev); border: 1px solid var(--line);
  border-radius: var(--radius); box-shadow: var(--shadow-soft);
  backdrop-filter: blur(14px);
  padding: 10px 14px;
  display: flex; flex-direction: column; gap: 6px;
  max-width: calc(100% - 28px);
}
.eq-scale-bar h3 {
  margin: 0;
  font-size: 11px; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--muted);
}
.eq-scale-items {
  display: flex; flex-wrap: wrap; gap: 10px;
  align-items: center;
  font-size: 11px;
  color: var(--menu-text);
}
.eq-scale-items .item {
  display: inline-flex; align-items: center; gap: 5px;
  white-space: nowrap;
}
.eq-scale-items .dot {
  width: 11px; height: 11px; border-radius: 50%;
  border: 1px solid rgba(0,0,0,.15);
}

.eq-drawer h3 {
  margin: 0 0 8px;
  font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  color: var(--muted);
}

.eq-chip {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 6px 10px; border-radius: 10px;
  border: 1px solid var(--menu-input-border); background: var(--menu-input-bg);
  color: var(--menu-text);
  font-size: 12px; font-weight: 600; cursor: pointer;
  transition: background var(--t) var(--ease), color var(--t) var(--ease);
}
.eq-chip:hover { background: var(--menu-hover); }
.eq-chip.is-active {
  background: linear-gradient(180deg, #68c2e3, #158dbd);
  color: #fff; border-color: rgba(104, 194, 227, .6);
  text-shadow: 0 1px 2px rgba(0, 0, 0, .35);
}

/* ===== Right panel: alert + recent list ===== */
/* Neon-Glass-Alert: dunkles Glas + magnituden-getönter Glow + Seismik-Ringe.
   --alert-rgb wird per JS pro Beben gesetzt (renderAlert). */
.eq-alert {
  --alert-rgb: 255, 45, 63;
  position: relative;
  overflow: hidden;
  padding: 11px 13px;
  border-radius: 14px;
  border: 1px solid rgba(var(--alert-rgb), .55);
  /* Verlauf: kräftiger Farb-Glow (oben rechts) → Lagune-800 (#0a415d) → 900 (#083145) statt Navy/Schwarz */
  background:
    radial-gradient(135% 100% at 88% -12%, rgba(var(--alert-rgb), .62), transparent 60%),
    linear-gradient(165deg, rgba(10, 65, 93, .97), rgba(8, 49, 69, .98));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .05),
    0 10px 30px rgba(0, 0, 0, .45),
    0 0 32px rgba(var(--alert-rgb), .38);
}
/* konzentrische Seismik-Ringe oben rechts (thematisch passend zur Erdbebenwelle) */
.eq-alert::after {
  content: "";
  position: absolute;
  top: -72px; right: -72px;
  width: 210px; height: 210px;
  border-radius: 50%;
  background: repeating-radial-gradient(circle,
    rgba(var(--alert-rgb), .34) 0 1.5px,
    transparent 1.5px 21px);
  -webkit-mask: radial-gradient(circle, #000 36%, transparent 72%);
          mask: radial-gradient(circle, #000 36%, transparent 72%);
  pointer-events: none;
  opacity: .85;
}
.eq-alert > * { position: relative; z-index: 1; }
.eq-alert-head {
  display: flex; align-items: center; gap: 7px;
  font-size: 11px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase;
  color: rgb(var(--alert-rgb));
}
.eq-alert-head::before {
  content: "";
  width: 8px; height: 8px; border-radius: 50%;
  background: rgb(var(--alert-rgb));
  box-shadow: 0 0 8px rgba(var(--alert-rgb), .9);
}
.eq-alert-mag {
  font-family: var(--font-display); font-size: 27px; font-weight: 600; line-height: 1;
  margin-top: 5px;
  color: rgb(var(--alert-rgb));
  text-shadow: 0 0 20px rgba(var(--alert-rgb), .55);
}
.eq-alert-region { color: var(--text); font-weight: 600; margin-top: 4px; }
.eq-alert-meta {
  display: grid; grid-template-columns: auto 1fr; gap: 3px 9px;
  font-size: 11.5px; color: var(--muted); margin-top: 6px;
}
.eq-alert-meta dt { font-weight: 600; }
.eq-alert-meta dd { margin: 0; color: var(--text); }
.eq-alert-time-local { font-size: 11px; opacity: .75; font-style: italic; }
.eq-alert-time-local:empty { display: none; }
.eq-alert-cta {
  position: relative;
  margin-top: 9px;
  width: 100%;
  padding: 8px 14px;
  border-radius: 999px;
  border: 1px solid rgba(var(--alert-rgb), .70);
  background: linear-gradient(180deg, rgba(var(--alert-rgb), .44), rgba(var(--alert-rgb), .22));
  color: #fff;
  font-weight: 700; font-size: 13px; letter-spacing: .02em;
  cursor: pointer;
  box-shadow: 0 0 20px rgba(var(--alert-rgb), .42), inset 0 1px 0 rgba(255, 255, 255, .14);
  transition: filter 160ms, box-shadow 160ms, transform 160ms;
}
.eq-alert-cta:hover {
  filter: brightness(1.12);
  box-shadow: 0 0 28px rgba(var(--alert-rgb), .52), inset 0 1px 0 rgba(255, 255, 255, .14);
  transform: translateY(-1px);
}

/* Light Mode: Alert auf hellem Glas, Magnituden-Glow + Seismik-Ringe bleiben als
   Akzent. Text wird über die hellen Drawer-Tokens (var(--text)/--muted) dunkel.
   Gleiches Scope-Muster wie die Panels (data-theme=light + OS-Light). */
html[data-theme="light"] .eq-alert {
  background:
    radial-gradient(135% 100% at 88% -12%, rgba(var(--alert-rgb), .26), transparent 60%),
    linear-gradient(165deg, rgba(255, 255, 255, .94), rgba(255, 255, 255, .97));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .6),
    0 10px 30px rgba(8, 49, 69, .16),
    0 0 26px rgba(var(--alert-rgb), .26);
}
/* CTA im Light Mode (fast) deckend → weißer Text bleibt lesbar (sonst pastellig) */
html[data-theme="light"] .eq-alert-cta {
  background: linear-gradient(180deg, rgba(var(--alert-rgb), .95), rgba(var(--alert-rgb), .82));
  border-color: rgba(var(--alert-rgb), .9);
}

.eq-recent {
  flex: 1; min-height: 0;
  display: flex; flex-direction: column; gap: 8px;
  overflow: hidden;
}
.eq-recent-list {
  flex: 1; min-height: 0;
  overflow-y: auto;
  /* max-content + align-content:start: sonst bläht ein Grid mit WENIGEN
     Zeilen jede Kachel auf volle Höhe auf (align-content Standard = stretch).
     Gemessen: bei 2 Items sonst 297 px statt 41 px pro Kachel. */
  display: grid; grid-auto-rows: max-content; align-content: start; gap: 6px;
  padding-right: 6px;
}

/* ===== Eigene Scrollbar fuer die Ereignis-Liste (passt ins Blau-Glas) =====
   Blauer Thumb auf transparenter Spur statt grauer Browser-Default. */
.eq-recent-list,
.eq-drawer,
.eq-panel-left {
  scrollbar-width: thin;
  scrollbar-color: rgba(21, 141, 189, .55) transparent;
}
.eq-recent-list::-webkit-scrollbar,
.eq-drawer::-webkit-scrollbar,
.eq-panel-left::-webkit-scrollbar { width: 8px; }
.eq-recent-list::-webkit-scrollbar-track,
.eq-drawer::-webkit-scrollbar-track,
.eq-panel-left::-webkit-scrollbar-track { background: transparent; }
.eq-recent-list::-webkit-scrollbar-thumb,
.eq-drawer::-webkit-scrollbar-thumb,
.eq-panel-left::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, rgba(21, 141, 189, .65), rgba(10, 65, 93, .75));
  border-radius: 6px;
  border: 2px solid transparent;
  background-clip: padding-box;
}
.eq-recent-list::-webkit-scrollbar-thumb:hover,
.eq-drawer::-webkit-scrollbar-thumb:hover,
.eq-panel-left::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, rgba(104, 194, 227, .85), rgba(14, 98, 136, .9));
  background-clip: padding-box;
}
.eq-recent-item {
  display: grid; grid-template-columns: 56px 1fr auto; gap: 8px;
  align-items: center;
  padding: 8px 10px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--line);
  background: var(--surface);
  cursor: pointer;
  transition: transform var(--t) var(--ease);
  /* Button-Reset (Zeilen sind jetzt <button> statt <a>) */
  font: inherit; color: inherit; text-align: left; width: 100%;
}
.eq-recent-mag {
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-weight: 700; font-size: 14px;
  color: #fff; height: 32px; border-radius: 6px;
  /* leichter Schatten → weiße Schrift bleibt auch auf hellem Gelb lesbar */
  text-shadow: 0 1px 2px rgba(0, 0, 0, .45);
}
.eq-recent-region {
  font-size: 13px; font-weight: 600; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.eq-recent-meta {
  font-size: 11px; color: var(--muted); text-align: right;
  display: grid; gap: 2px;
}
.eq-source-badge {
  display: inline-block; padding: 1px 6px; border-radius: 4px;
  font-size: 10px; font-weight: 700; text-transform: uppercase;
  background: var(--menu-card-bg); color: var(--muted); border: 1px solid var(--menu-card-border);
}

/* ===== Alert-Level + Tsunami-Badges ===== */
.eq-alert-badge {
  display: inline-block; padding: 1px 6px; border-radius: 4px;
  font-size: 9px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
  color: #fff; margin-left: 4px; vertical-align: 1px;
}
.eq-alert-badge.is-green  { background: #2bb673; }
.eq-alert-badge.is-yellow { background: #e8c020; color: #2a2200; }   /* dunkle Schrift: weiss ist auf Gelb nicht lesbar */
.eq-alert-badge.is-orange { background: #f5a623; }
.eq-alert-badge.is-red    { background: #c0392b; }
.eq-tsunami-pill {
  display: inline-block; padding: 1px 6px; border-radius: 4px;
  font-size: 10px; font-weight: 700; color: #fff;
  background: #1f78b4; margin-left: 4px; vertical-align: 1px;
}


/* ===== Unten links: Timeline-Chart + Stärkste-Erdbeben-Panel nebeneinander ===== */
.eq-bottomleft {
  position: absolute;
  bottom: 14px; left: 14px;
  z-index: 15;
  display: flex;
  align-items: stretch;
  gap: 10px;
  /* rechts Platz lassen für Drawer (330+70) + Luft */
  max-width: calc(100% - 450px);
}
.eq-timeline-tray {
  width: min(440px, 32vw);
  min-width: 300px;
  display: flex; flex-direction: column;
  background: var(--bg-elev); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 10px 14px;
  box-shadow: var(--shadow-soft);
  backdrop-filter: blur(14px);
}
.eq-strongest-panel {
  width: 380px;
  background: var(--bg-elev); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 10px 14px;
  box-shadow: var(--shadow-soft);
  backdrop-filter: blur(14px);
}
/* Stats-Zeile unter dem Chart (füllt den freien Raum): Anzahl · Tiefstes · Aktualisiert */
.eq-tl-stats {
  flex: 0 0 auto;
  padding-top: 11px;
  display: flex; gap: 10px;
}
.eq-tl-stats .eq-sumstat {
  flex: 1; min-width: 0;
  padding: 9px 11px;
  border: 1px solid rgba(var(--eq-fg-rgb), .13);
  border-radius: 11px;
  background: rgba(var(--eq-fg-rgb), .045);
}
.eq-tl-stats .eq-sumstat .meta { display: none; }   /* Region/Lokalzeit in der schmalen Box weglassen */
.eq-sumstat {
  display: flex; align-items: center; gap: 9px;
  min-height: 0;
}
.eq-sumstat .ic {
  flex: 0 0 auto;
  width: 32px; height: 32px; border-radius: 9px;
  display: flex; align-items: center; justify-content: center;
}
.eq-sumstat .ic svg {
  width: 18px; height: 18px;
  fill: none; stroke: currentColor; stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round;
}
.eq-sumstat-body { min-width: 0; }
.eq-sumstat .lbl {
  font-size: 9px; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase;
  color: var(--muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.eq-sumstat .val {
  font-family: var(--font-display);
  font-size: 17px; font-weight: 700; line-height: 1.15;
  white-space: nowrap;
}
.eq-sumstat .meta {
  font-size: 10px; color: var(--muted);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.eq-sumstat .meta:empty { display: none; }
.eq-timeline-tray h2,
.eq-strongest h2 {
  font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: var(--muted); margin: 0 0 6px;
  display: flex; align-items: baseline; gap: 8px;
}
.eq-timeline-tray h2 .period,
.eq-strongest h2 .period {
  font-weight: 600; color: var(--text); text-transform: none; letter-spacing: 0;
  font-size: 11px;
}
.eq-timeline-svg {
  width: 100%;
  flex: 1 1 0;             /* basis 0 → Chart treibt die Höhe NICHT, füllt nur den Rest */
  min-height: 70px;
  display: block;
}

.eq-strongest {
  display: flex; flex-direction: column; gap: 6px;
}
/* Top-3 nebeneinander (User-Wunsch 2026-06-12) */
.eq-strongest-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}
.eq-strongest-card {
  display: flex; flex-direction: column; align-items: flex-start; gap: 5px;
  padding: 8px 10px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--line);
  background: var(--surface);
  cursor: pointer;
  min-width: 0;
  /* Button-Reset (Cards sind jetzt <button> statt <a>) */
  font: inherit; color: inherit; text-align: left; width: 100%;
}
.eq-strongest-mag {
  display: inline-flex; align-items: center; justify-content: center;
  height: 32px; padding: 0 8px; flex: 0 0 auto;
  font-family: var(--font-display); font-weight: 700; font-size: 14px; color: #fff;
  border-radius: 6px;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .45);
}
.eq-strongest-info { min-width: 0; width: 100%; display: grid; gap: 2px; }
.eq-strongest-region {
  font-weight: 600; font-size: 12px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.eq-strongest-time { font-size: 11px; color: var(--muted); }
.eq-strongest-time.local { font-size: 10.5px; opacity: .8; font-style: italic; }
@media (max-width: 540px) {
  .eq-strongest-list { grid-template-columns: 1fr; }
}


/* ===== Map-Popup (MapLibre) — Neon-Glass-Karte mit Magnituden-Badge =====
   --tip-rgb wird per JS aufs Popup-Element gesetzt (Badge + Glow + Border). */
.eq-ml-popup .maplibregl-popup-content {
  position: relative;
  background:
    radial-gradient(130% 90% at 82% -10%, rgba(var(--tip-rgb, 255, 45, 63), .26), transparent 60%),
    linear-gradient(168deg, rgba(14, 98, 136, .96), rgba(10, 65, 93, .97));
  -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px);
  border: 1px solid rgba(var(--tip-rgb, 255, 45, 63), .34);
  border-radius: 16px;
  padding: 13px 15px;
  color: #fff;
  box-shadow: 0 16px 40px rgba(0, 0, 0, .5), 0 0 26px rgba(var(--tip-rgb, 255, 45, 63), .16);
  min-width: 220px;
  max-width: 300px;
  /* Vordergrund-RGB für die „auf-Glas"-Feinheiten; im Light-Block unten gekippt. */
  --eq-fg-rgb: 255, 255, 255;
}
/* Statt des MapLibre-Pfeils eine eigene Verbindungslinie in Markerfarbe.
   Sitzt an der Popup-Unterkante und überbrückt den Offset (40px) bis zum
   Marker — da der Anker fix 'bottom' ist, trifft sie ihn automatisch. */
.eq-ml-popup .maplibregl-popup-tip { display: none; }
.eq-ml-popup .maplibregl-popup-content::after {
  content: "";
  position: absolute;
  left: 50%; bottom: -40px;
  transform: translateX(-50%);
  width: 2px; height: 40px;
  border-radius: 2px;
  background: linear-gradient(to bottom,
    rgb(var(--tip-rgb, 255, 45, 63)),
    rgba(var(--tip-rgb, 255, 45, 63), .35));
  box-shadow: 0 0 7px rgba(var(--tip-rgb, 255, 45, 63), .6);
  pointer-events: none;
}
/* Close-Button als Kreis oben rechts */
.eq-ml-popup .maplibregl-popup-close-button {
  top: 9px; right: 9px;
  width: 26px; height: 26px;
  border-radius: 50%;
  /* Text-× ausblenden — Kreuz wird perfekt zentriert per Pseudo-Linien gezeichnet */
  font-size: 0; color: transparent; padding: 0;
  border: 1px solid rgba(var(--eq-fg-rgb), .22);
  background: rgba(var(--eq-fg-rgb), .05);
  transition: background .15s;
}
.eq-ml-popup .maplibregl-popup-close-button::before,
.eq-ml-popup .maplibregl-popup-close-button::after {
  content: "";
  position: absolute;
  top: 50%; left: 50%;
  width: 11px; height: 1.6px; border-radius: 2px;
  background: rgba(var(--eq-fg-rgb), .75);
}
.eq-ml-popup .maplibregl-popup-close-button::before { transform: translate(-50%, -50%) rotate(45deg); }
.eq-ml-popup .maplibregl-popup-close-button::after  { transform: translate(-50%, -50%) rotate(-45deg); }
.eq-ml-popup .maplibregl-popup-close-button:hover { background: rgba(var(--eq-fg-rgb), .16); }
.eq-ml-popup .maplibregl-popup-close-button:hover::before,
.eq-ml-popup .maplibregl-popup-close-button:hover::after { background: rgb(var(--eq-fg-rgb)); }

.eq-tip-top {
  display: flex; align-items: center; gap: 12px;
  padding-right: 26px;          /* Platz für den ×-Button */
}
.eq-tip-badge {
  flex: 0 0 auto;
  font-family: var(--font-display);
  font-weight: 700; font-size: 17px; color: #fff;
  padding: 6px 12px; border-radius: 10px;
  letter-spacing: -.01em;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .45);
  background: linear-gradient(160deg,
    rgb(var(--tip-rgb, 255, 45, 63)),
    rgba(var(--tip-rgb, 255, 45, 63), .72));
  box-shadow: 0 2px 12px rgba(var(--tip-rgb, 255, 45, 63), .5);
}
.eq-tip-region {
  font-weight: 700; font-size: 13.5px; line-height: 1.22;
  text-transform: uppercase; letter-spacing: .01em;
  color: rgb(var(--eq-fg-rgb));
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}
.eq-tip-sub {
  display: flex; flex-wrap: wrap; gap: 5px 14px;
  margin-top: 7px;
  font-size: 11.5px;
  color: rgba(var(--eq-fg-rgb), .66);
  letter-spacing: .01em;
}
.eq-tip-sub-item { display: inline-flex; align-items: center; gap: 5px; }
.eq-tip-sub-item svg {
  color: rgb(var(--tip-rgb, 255, 45, 63));   /* Icon in Magnitude-Farbe */
  flex: 0 0 auto;
}
.eq-tip-pills { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 9px; }
.eq-tip-pill {
  display: inline-block;
  padding: 2px 7px; border-radius: 5px;
  font-size: 10px; font-weight: 800;
  letter-spacing: .06em; text-transform: uppercase;
  color: #fff;
}
.eq-tip-pill.is-green  { background: #2bb673; }
.eq-tip-pill.is-orange { background: #f5a623; }
.eq-tip-pill.is-red    { background: #c0392b; }
.eq-tip-pill.is-tsunami{ background: #1f78b4; }
.eq-tip-divider {
  height: 1px; margin: 11px 0;
  background: rgba(var(--eq-fg-rgb), .12);
}
.eq-tip-bottom {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
}
.eq-tip-time {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12px; color: rgba(var(--eq-fg-rgb), .60);
  min-width: 0;
}
.eq-tip-time svg { opacity: .8; flex: 0 0 auto; }
.eq-tip-details {
  flex: 0 0 auto;
  display: inline-flex; align-items: center; gap: 5px;
  padding: 5px 13px;
  border-radius: 999px;
  border: 1px solid rgba(var(--tip-rgb, 255, 45, 63), .55);
  background: linear-gradient(180deg,
    rgba(var(--tip-rgb, 255, 45, 63), .32),
    rgba(var(--tip-rgb, 255, 45, 63), .15));
  color: #fff;
  font-size: 12px; font-weight: 700;
  text-decoration: none; white-space: nowrap;
  box-shadow: 0 0 12px rgba(var(--tip-rgb, 255, 45, 63), .25),
              inset 0 1px 0 rgba(255, 255, 255, .12);
  transition: filter .15s, box-shadow .15s;
}
.eq-tip-details:hover {
  filter: brightness(1.12);
  box-shadow: 0 0 18px rgba(var(--tip-rgb, 255, 45, 63), .42),
              inset 0 1px 0 rgba(255, 255, 255, .14);
  text-decoration: none;
}

/* Light Mode: Popup auf hellem Glas (analog Alert-Karte). Text kippt über
   --eq-fg-rgb auf dunkles Slate; Badge/Pills/Verbindungslinie/Icons bleiben
   farbig. CTA wird (fast) deckend, damit der weiße Text trägt. */
html[data-theme="light"] .eq-ml-popup .maplibregl-popup-content {
  background:
    radial-gradient(130% 90% at 82% -10%, rgba(var(--tip-rgb, 255, 45, 63), .20), transparent 60%),
    linear-gradient(168deg, rgba(255, 255, 255, .95), rgba(255, 255, 255, .97));
  border-color: rgba(var(--tip-rgb, 255, 45, 63), .45);
  color: #083145;
  box-shadow: 0 16px 40px rgba(8, 49, 69, .20), 0 0 24px rgba(var(--tip-rgb, 255, 45, 63), .14);
  --eq-fg-rgb: 8, 49, 69;
}
html[data-theme="light"] .eq-tip-details {
  background: linear-gradient(180deg, rgba(var(--tip-rgb, 255, 45, 63), .95), rgba(var(--tip-rgb, 255, 45, 63), .82));
  border-color: rgba(var(--tip-rgb, 255, 45, 63), .9);
}

/* (Plattengrenzen-Toggle ist jetzt ein .map-btn im Right-Stack) */

/* ===== Tsunami Banner ===== */
.eq-tsunami-banner {
  display: none;
  background: linear-gradient(90deg, #c0392b, #e74c3c);
  color: #fff;
  padding: 10px 18px;
  border-radius: var(--radius-sm);
  margin: 12px 0;
  font-weight: 600;
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  box-shadow: 0 4px 14px rgba(192, 57, 43, .35);
}
.eq-tsunami-banner.is-info     { background: linear-gradient(90deg, #2c3e50, #34495e); }
.eq-tsunami-banner.is-watch    { background: linear-gradient(90deg, #d68910, #f5a623); }
.eq-tsunami-banner.is-advisory { background: linear-gradient(90deg, #ca6f1e, #e85d4a); }
.eq-tsunami-banner.is-warning  { background: linear-gradient(90deg, #b03a2e, #c0392b); }
.eq-tsunami-banner.is-cancel   { background: linear-gradient(90deg, #5d6d7e, #708090); }
.eq-tsunami-icon {
  font-size: 24px; line-height: 1;
  flex: 0 0 auto;
}
.eq-tsunami-body { flex: 1; min-width: 0; font-size: 13px; line-height: 1.4; }
.eq-tsunami-status {
  font-weight: 800; letter-spacing: .14em; text-transform: uppercase;
  font-size: 11px;
}
.eq-tsunami-link {
  color: #fff; text-decoration: underline; font-size: 12px;
  flex: 0 0 auto; cursor: pointer; background: transparent; border: 0; padding: 0;
}
.eq-tsunami-banner { cursor: pointer; }
.eq-tsunami-banner:hover { filter: brightness(1.05); }

/* ===== Tsunami Bulletin Modal ===== */
.eq-bulletin-modal {
  position: fixed; inset: 0; z-index: 2100;
  background: rgba(0, 0, 0, .6);
  display: none; align-items: center; justify-content: center;
  padding: 20px;
}
.eq-bulletin-modal.is-open { display: flex; }
.eq-bulletin-panel {
  background: var(--surface); color: var(--text);
  border: 1px solid var(--line); border-radius: var(--radius);
  width: min(820px, 100%); max-height: 90dvh;
  display: flex; flex-direction: column;
  box-shadow: var(--shadow);
}
.eq-bulletin-head {
  padding: 14px 18px; border-bottom: 1px solid var(--line);
  display: flex; justify-content: space-between; align-items: center;
}
.eq-bulletin-head h3 { margin: 0; font-size: 16px; }
.eq-bulletin-head .meta { font-size: 12px; color: var(--muted); }

.eq-bulletin-tabs {
  display: flex; gap: 6px; flex-wrap: wrap;
  padding: 8px 18px;
  border-bottom: 1px solid var(--line);
  background: var(--menu-card-bg);
}
.eq-bulletin-tab {
  font-size: 11px; font-weight: 600;
  padding: 5px 10px; border-radius: var(--radius-pill);
  border: 1px solid var(--menu-input-border); background: var(--menu-input-bg);
  color: var(--menu-text); cursor: pointer;
  white-space: nowrap;
}
.eq-bulletin-tab:hover { background: var(--menu-hover); }
.eq-bulletin-tab.is-active {
  background: linear-gradient(180deg, var(--brand-cyan), var(--brand-deep));
  color: #fff; border-color: rgba(104, 194, 227, .4);
}
.eq-bulletin-close {
  background: transparent; border: 0; font-size: 22px;
  width: 32px; height: 32px; border-radius: 50%;
  cursor: pointer; color: var(--muted);
}
.eq-bulletin-close:hover { background: var(--menu-hover); color: var(--text); }
.eq-bulletin-body {
  padding: 16px 18px; overflow-y: auto; flex: 1;
}
.eq-bulletin-body pre {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 1.5;
  white-space: pre-wrap;
  word-break: break-word;
  color: var(--text);
}
.eq-bulletin-foot {
  padding: 10px 18px; border-top: 1px solid var(--line);
  font-size: 12px; color: var(--muted);
  display: flex; justify-content: space-between; align-items: center;
}
.eq-bulletin-foot a { color: var(--brand-cyan); }

/* ===== Marker-Pulse für frische Beben (< 60 min) =====
   Drei kaskadierte Ringe + zentraler Core mit optionalem M-Label.
   Größe + Pulse-Reichweite skalieren mit der Magnitude (via CSS-Variable).
*/
.eq-pulse-icon {
  /* MUSS absolute bleiben: das Element ist gleichzeitig ein .maplibregl-marker,
     der position:absolute braucht (Start 0,0 + transform an die Pixel-Position).
     position:relative würde MapLibre überschreiben → Marker fließen gestapelt und
     der transform addiert sich auf die Flow-Position → versetzte Marker.
     Die zentrierten Kinder funktionieren relativ zu einem absoluten Vorfahren genauso. */
  position: absolute;
  pointer-events: none;
}
/* Ring nimmt komplette Icon-Bounding-Box ein und skaliert vom Zentrum.
   So bleibt das Wachstum perfekt zentriert. */
.eq-pulse-icon .ring {
  position: absolute;
  left: 50%; top: 50%;
  width: 100%; height: 100%;
  border-radius: 50%;
  border: 2px solid currentColor;
  background: transparent;
  pointer-events: none;
  transform: translate(-50%, -50%) scale(0.2);
  animation: eq-pulse-ring 3.2s cubic-bezier(.2, .65, .35, 1) infinite;
}
.eq-pulse-icon .ring.r2 { animation-delay: -1.07s; }
.eq-pulse-icon .ring.r3 { animation-delay: -2.13s; }
@keyframes eq-pulse-ring {
  0%   { transform: translate(-50%, -50%) scale(0.18); opacity: 0.85; }
  100% { transform: translate(-50%, -50%) scale(1);    opacity: 0;    }
}
.eq-pulse-icon .core {
  position: absolute; left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  box-shadow: 0 2px 6px rgba(0, 0, 0, .25);
  pointer-events: auto;
  cursor: pointer;
}
.eq-pulse-icon .label {
  position: absolute; left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  font-family: var(--font-display);
  font-weight: 500;
  color: #fff;
  text-shadow: 0 1px 3px rgba(0, 0, 0, .55);
  pointer-events: none;
  white-space: nowrap;
  letter-spacing: -.01em;
}
/* MapLibre-Puls-Marker: komplett klick-transparent, damit Klicks an den
   WebGL-Beben-Layer darunter durchgehen (der den Detail-Klick behandelt). */
.eq-pulse-ml, .eq-pulse-ml .core { pointer-events: none !important; cursor: default; }

/* Bewegungsreduzierung respektieren: keine Dauer-Animationen (Akku/Lüfter). */
@media (prefers-reduced-motion: reduce) {
  .eq-pulse-icon .ring { animation: none; opacity: 0; }
  .eq-live-dot { animation: none; }
}

/* Hover-Mikro-Animation auf Recent-Items + Stat-Cards */
.eq-recent-item, .eq-strongest-card {
  transition: transform 180ms cubic-bezier(.2,.7,.2,1),
              box-shadow 180ms cubic-bezier(.2,.7,.2,1),
              border-color 180ms;
}
.eq-recent-item:hover {
  transform: translateY(-1px) translateX(-2px);
  box-shadow: 0 4px 14px rgba(0,0,0,.08);
  border-color: var(--brand-cyan);
}
.eq-strongest-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(0,0,0,.10);
  border-color: var(--brand-cyan);
}

/* ===== Live indicator ===== */
.eq-live-dot {
  display: inline-block;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--accent-alt);   /* Magenta (globale LIVE-Farbe) */
  margin-right: 6px;
  vertical-align: middle;
  box-shadow: 0 0 0 0 rgba(225, 29, 116, .7);
  animation: eq-pulse 2s infinite;
}
@keyframes eq-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(225, 29, 116, .55); }
  70%  { box-shadow: 0 0 0 8px rgba(225, 29, 116, 0); }
  100% { box-shadow: 0 0 0 0 rgba(225, 29, 116, 0); }
}

/* ===== Panel-Look: gleicher Petrol-Verlauf wie die Map-Buttons (User-Wunsch 2026-06-12) =====
   Ein zentraler Override für alle Floating-Panels. Die lokalen CSS-Variablen
   mappen die Token-Farben auf Weiß-Abstufungen, damit alle Kind-Elemente
   (Tiles, Listen, Chips, Labels) ohne Einzelanpassung lesbar bleiben. */
.eq-side-card,
.eq-drawer,
.eq-timeline-tray,
.eq-strongest-panel,
.eq-scale-bar,
.eq-title-pill {
  /* Verlauf Lagune-700 (#0e6288) → Lagune-800 (#0a415d), passend zum Blue-Mode-Meer.
     Alpha .85 + Blur behalten das Glas-Feeling. */
  background: linear-gradient(160deg, rgba(14, 98, 136, .85), rgba(10, 65, 93, .85));
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border-color: rgba(255, 255, 255, .10);
  color: #fff;
  box-shadow: 0 12px 30px rgba(0, 0, 0, .35);
  /* Vordergrund-RGB für die „auf-Glas"-Feinheiten (Divider/Labels/Hover/Tiles).
     Dark = weiß; im Light-Block unten auf dunkles Slate gekippt. */
  --eq-fg-rgb: 255, 255, 255;
  --text: #ffffff;
  --muted: rgba(255, 255, 255, .72);
  --line: rgba(255, 255, 255, .18);
  --surface: rgba(255, 255, 255, .08);
  --bg-elev: rgba(255, 255, 255, .06);
  --menu-text: #ffffff;
  --menu-input-bg: rgba(255, 255, 255, .10);
  --menu-input-border: rgba(255, 255, 255, .28);
  --menu-hover: rgba(255, 255, 255, .16);
  --menu-card-bg: rgba(255, 255, 255, .08);
  --menu-card-border: rgba(255, 255, 255, .22);
}
.eq-side-card h3,
.eq-drawer h3,
.eq-timeline-tray h2,
.eq-strongest-panel h2 { color: rgba(var(--eq-fg-rgb), .85); }
.eq-title-text { color: rgb(var(--eq-fg-rgb)); }
/* Mag-Filter: Hover-Aufhellung (dark) bzw. -Abdunkelung (light) via fg-rgb */
.eq-mag-row label:hover span { background: rgba(var(--eq-fg-rgb), .10); }
/* Recent-Items/Stat-Tiles/Strongest-Cards: Hover-Rand via fg-rgb */
.eq-recent-item:hover { border-color: rgba(var(--eq-fg-rgb), .45); }
.eq-strongest-card:hover { border-color: rgba(var(--eq-fg-rgb), .45); }

/* ===== Light Mode: helle Panele statt Blau-Glas (Dark bleibt 1:1) =====
   Nutzt die globale helle Hintergrundfarbe als Glas und kippt die lokalen
   Tokens + --eq-fg-rgb auf dunkles Slate. Greift bei data-theme="light" und
   bei OS-Light (auto / kein data-theme). Alert-Karte + Map-Popup bleiben als
   Neon-Glas-Design bewusst in beiden Themes dunkel. */
html[data-theme="light"] :is(.eq-side-card, .eq-drawer, .eq-timeline-tray, .eq-strongest-panel, .eq-scale-bar, .eq-title-pill) {
  background: rgba(255, 255, 255, .85);
  border-color: rgba(8, 49, 69, .12);
  color: #083145;
  box-shadow: 0 12px 30px rgba(8, 49, 69, .16);
  --eq-fg-rgb: 8, 49, 69;
  --text: #083145;
  --muted: rgba(8, 49, 69, .64);
  --line: rgba(8, 49, 69, .14);
  --surface: rgba(8, 49, 69, .045);
  --bg-elev: rgba(8, 49, 69, .03);
  --menu-text: #083145;
  --menu-input-bg: rgba(8, 49, 69, .05);
  --menu-input-border: rgba(8, 49, 69, .22);
  --menu-hover: rgba(8, 49, 69, .08);
  --menu-card-bg: rgba(255, 255, 255, .6);
  --menu-card-border: rgba(8, 49, 69, .12);
}
/* Mag-Filter-Pills: Magnitudenfarbe als Text ist auf Weiß zu hell → Richtung Slate
   abdunkeln — NUR inaktiv; die aktive Pille behält volle Farbe + weißen Text.
   Das `input:not(:checked) +` ist nötig, nicht bloß Kosmetik: die frühere Fassung
   zielte auf `label span` und traf damit auch die aktive Pille. Sie hatte dieselbe
   Spezifität wie die :checked-Regel, stand aber später → gewann. Ergebnis: aktive
   M3…M6-Pillen hatten im Light-Mode dunklen statt weißen Text (2026-07-19 gefixt). */
html[data-theme="light"] .eq-mag-row label input:not(:checked) + span {
  color: color-mix(in srgb, var(--c) 60%, #083145);
}

/* ===== Vollbild: die ganze Stage wird Fullscreen-Element (Muster start.php) ===== */
.eq-stage:fullscreen { width: 100%; height: 100%; }
.eq-stage:-webkit-full-screen { width: 100%; height: 100%; }
.eq-stage.is-fullscreen { inset: 0; }

/* ===== Mittlere Breiten: Stärkste-Panel weicht zuerst (Stats bleiben), dann Chart ===== */
@media (max-width: 1440px) {
  .eq-strongest-panel { display: none; }
}
@media (max-width: 1100px) {
  /* Drawer ist hier default zu → Chart darf breiter, Stats bleiben daneben */
  .eq-timeline-tray { width: min(520px, calc(100vw - 360px)); }
}

/* Filter-FAB nur ≤1024px (Tablet+Handy). Desktop/Laptop: Filter immer sichtbar. */
.eq-filter-fab { display: none; }
@media (max-width: 1024px) {
  .eq-filter-fab {
    display: flex;
    position: absolute; z-index: 600;
    top: 14px; left: 14px;
  }
  /* Filter-Karte standardmäßig eingeklappt (nach links rausgeschoben) → Karte frei.
     Tap auf den FAB schiebt sie ein (.is-open). */
  .eq-panel-left {
    top: 62px; left: 14px; right: auto;
    transform: translateX(calc(-100% - 28px));
    transition: transform .22s ease;
    max-height: calc(100% - 76px);
  }
  .eq-panel-left.is-open { transform: none; }
  /* Zeitleiste + Stärkste (unten links) ≤1024 ausblenden → mehr Karte */
  .eq-bottomleft { display: none; }
}

/* ===== Mobile (≤720px): Panels stapeln ===== */
@media (max-width: 720px) {
  .eq-filter-fab { top: 10px; left: 10px; }
  .eq-panel-left { top: 56px; left: 10px; right: auto; gap: 6px; align-items: stretch; }
  .eq-side-card,
  .eq-side-card--filters { width: min(86vw, 320px); max-width: none; }
  .eq-right-stack { top: 10px; right: 10px; gap: 8px; }
  .map-btn { width: 38px; height: 38px; }
  .map-btn[data-tooltip]::after { display: none; }
  .eq-bottomleft { display: none; }         /* Chart + Stärkste mobil weglassen */
  .eq-scale-bar { display: none; }
  /* Live-Titel kompakt, klebt unter den Filter-Cards? Nein — bleibt oben, nur kleiner */
  .eq-title-pill { display: none; }         /* mobil: Live-Status steckt im Header-Kontext, Platz sparen */
  /* Drawer wird zum Bottom-Sheet */
  .eq-drawer {
    top: auto; left: 10px; right: 10px; bottom: 10px;
    width: auto; max-width: none;
    height: 70dvh;
    transform: translateY(calc(100% + 24px));
    /* GANZE Schublade scrollt als eine Einheit. Mobil war die Liste in ein
       ~37px-Guckloch gesperrt (Alarmkarte fraß den Rest) — sie WAR scrollbar,
       fühlte sich aber unscrollbar an. Jetzt scrollt Alarm→Liste in einem Zug. */
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
  }
  .eq-drawer.is-open { transform: none; }
  /* Kinder der scrollenden Schublade dürfen NICHT schrumpfen — sonst quetscht
     Flexbox die Alarmkarte auf ihre Kopfzeile zusammen (war der „zu klein"-Bug). */
  .eq-drawer > * { flex: 0 0 auto; }
  /* Liste nicht mehr in ein eigenes Mini-Fenster einsperren: natürliche Höhe,
     kein verschachteltes Scrollen — die Schublade selbst scrollt. */
  .eq-drawer .eq-recent { flex: 0 0 auto; overflow: visible; }
  .eq-drawer .eq-recent-list { flex: 0 0 auto; min-height: 0; overflow: visible; }
  /* Offene Schublade (Bottom-Sheet) verdeckt fast die ganze Karte: die rechten
     Kartenknöpfe lagen sonst ÜBER der Liste und schnitten Zeit/Quelle ab. Solange
     offen: Filter-Knopf + alle Rechts-Knöpfe AUSSER dem Schublade-Knopf ausblenden.
     Der bleibt oben rechts stehen und dient als Schließen-Knopf. */
  body.eq-drawer-open .eq-filter-fab { display: none; }
  body.eq-drawer-open .eq-right-stack > :not([data-map-action="drawer"]) { display: none; }
  .eq-tsunami-wrap { top: auto; bottom: 10px; }
  /* Info-/NTWC-Banner lag unten ÜBER der Liste. Solange die Schublade offen ist,
     ausblenden — die Liste soll bis unten frei sein (kommt zurück beim Schließen). */
  body.eq-drawer-open .eq-tsunami-wrap { display: none; }

  /* Alarmkarte mobil = kompakte, klickbare Pillen-Leiste (Desktop behält die
     volle Karte). Die Magnitude wird zur magnitudenfarbenen Pille, Region daneben;
     Zeit/Tiefe + Details-Knopf entfallen — Klick auf die Leiste zoomt aufs Beben. */
  .eq-alert { padding: 10px 12px; }
  .eq-alert-head { margin-bottom: 7px; }
  .eq-alert-mag {
    display: inline-block; margin-top: 0;
    font-size: 15px; line-height: 1;
    padding: 4px 11px; border-radius: 999px;
    color: #fff; background: rgb(var(--alert-rgb));
    text-shadow: 0 1px 2px rgba(0, 0, 0, .45);   /* weiße Schrift auch auf Gelb lesbar */
    box-shadow: 0 0 14px rgba(var(--alert-rgb), .45);
    vertical-align: middle;
  }
  .eq-alert-region {
    display: inline; vertical-align: middle;
    margin: 0 0 0 9px; font-size: 14px;
  }
  .eq-alert-meta, .eq-alert-cta { display: none; }
  .eq-alert::after { width: 140px; height: 140px; top: -50px; right: -50px; }
}

/* ===== Kurze Viewports (Handy Querformat): Panels begrenzen, nicht überlaufen ===== */
@media (max-height: 540px) {
  .eq-panel-left { max-height: calc(100dvh - var(--header-height, 56px) - 86px); }
  .eq-drawer { max-height: calc(100dvh - var(--header-height, 56px) - 24px); }
}

/* Statistik-Anreisser am Ende der Schublade — fuehrt zur eigenen Seite,
   damit die Schublade schlank bleibt (dort ist kein Platz fuer Diagramme). */
.eq-stats-teaser {
  display: flex; flex-direction: column; gap: 10px;
  margin-top: 10px; padding: 12px 14px; border-radius: 14px;
  text-decoration: none; color: var(--ink); flex: none;
  background:
    radial-gradient(130% 120% at 100% 0%, rgba(104, 194, 227, .12), transparent 58%),
    var(--menu-card-bg);
  border: 1px solid var(--line);
  box-shadow: 0 1px 2px rgba(0, 0, 0, .16);
  transition: transform .16s ease, border-color .16s ease, box-shadow .16s ease;
}
.eq-stats-teaser:hover {
  transform: translateY(-1px);
  border-color: rgba(104, 194, 227, .55);
  box-shadow: 0 8px 22px rgba(0, 0, 0, .30);
}
.eq-stats-head { display: flex; align-items: center; gap: 8px; }
.eq-stats-ico { display: inline-flex; width: 20px; height: 20px; flex: none; color: var(--brand-cyan); }
.eq-stats-ico svg { width: 100%; height: 100%; display: block; }
.eq-stats-title { font-size: 12.5px; font-weight: 700; color: var(--ink); line-height: 1.25; }
/* Pfeil im runden Chip — Orange/Cyan als FLÄCHE mit dunklem Pfeil (nicht als
   Schrift), passt zur Kontrast-Linie. Rutscht beim Hover. */
.eq-stats-arrow {
  margin-left: auto; flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; border-radius: 50%;
  background: rgba(104, 194, 227, .16); color: var(--brand-cyan);
  font-size: 15px; font-weight: 700; line-height: 1;
  transition: transform .16s ease, background .16s ease, color .16s ease;
}
.eq-stats-teaser:hover .eq-stats-arrow {
  background: var(--brand-cyan); color: #06212e; transform: translateX(3px);
}
.eq-stats-figs { display: flex; gap: 8px; }
.eq-stat {
  flex: 1; min-width: 0;
  display: flex; flex-direction: column; gap: 2px;
  padding: 8px 10px; border-radius: 10px;
  background: var(--surface); border: 1px solid var(--line);
}
.eq-stat-n {
  font-family: var(--font-display); font-weight: 700; font-size: 20px; line-height: 1;
  color: var(--ink); font-variant-numeric: tabular-nums;
}
.eq-stat-l { font-size: 10px; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; line-height: 1.2; }

/* ============================================================ Meldung klein
   Der Banner klappt nach 2 Minuten von selbst zusammen (oder per Knopf) und
   geht bei einer NEUEN Meldung wieder auf. Die Klasse haengt am Wrap, damit
   auch dessen Breite mitschrumpft. */
.eq-tsunami-min {
  margin-left: auto; flex: none; display: inline-flex; align-items: center;
  justify-content: center; width: 26px; height: 26px; padding: 0; cursor: pointer;
  border: 1px solid rgba(255,255,255,.32); border-radius: 8px;
  background: rgba(255,255,255,.14); color: #fff;
}
.eq-tsunami-min:hover { background: rgba(255,255,255,.26); }
.eq-tsunami-min svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2.2; }
.eq-tsunami-min svg:last-child { display: none; }          /* Plus erst im kleinen Zustand */

.eq-tsunami-wrap.is-min { width: auto; }
.eq-tsunami-wrap.is-min .eq-tsunami-banner { padding: 6px 8px 6px 14px; gap: 10px; }
.eq-tsunami-wrap.is-min .eq-tsunami-text,
.eq-tsunami-wrap.is-min .eq-tsunami-link { display: none; }
.eq-tsunami-wrap.is-min .eq-tsunami-min svg:first-child { display: none; }
.eq-tsunami-wrap.is-min .eq-tsunami-min svg:last-child  { display: inline; }

/* ============================================ Logo im Vollbild (oben mittig) */
.eq-fs-logo { display: none; }
.eq-stage.is-fullscreen .eq-fs-logo {
  display: block; position: absolute; top: 62px; left: 50%; transform: translateX(-50%);
  z-index: 24; height: 34px; width: auto; pointer-events: none;
  filter: drop-shadow(0 2px 10px rgba(0, 0, 0, .55));
}
/* Der Banner muss im Vollbild unter das Logo rutschen, sonst ueberdecken sie sich. */
.eq-stage.is-fullscreen .eq-tsunami-wrap { top: 108px; }

@media (max-width: 720px) {
  /* Mobil ist die Titel-Pille aus -> Logo nach oben; der Banner bleibt unten. */
  .eq-stage.is-fullscreen .eq-fs-logo { top: 12px; height: 28px; }
  .eq-stage.is-fullscreen .eq-tsunami-wrap { top: auto; }
}

/* ================================= Listen-Filter: alle / nur im Kartenausschnitt */
.eq-recent-scope { display: flex; gap: 6px; margin: 0 0 8px; }
.eq-recent-scope .eq-scope-pill {
  flex: 1; justify-content: center; text-align: center;
  padding: 6px 8px; font-size: 11.5px; font-weight: 600;
  border-radius: 999px; cursor: pointer; white-space: nowrap;
  color: var(--menu-text);
}

/* ===== Luftlinie: Abstand-zu-mir-Knopf + Notiz + Abstands-Pillen ===== */
.eq-dist-bar { display: flex; align-items: center; gap: 8px; margin: 0 0 8px; flex-wrap: wrap; }
.eq-dist-btn { padding: 5px 11px; font-size: 11.5px; border-radius: 999px; }
.eq-dist-sort { padding: 5px 11px; font-size: 11.5px; border-radius: 999px; gap: 5px; }
.eq-dist-btn .eq-dist-ico { font-size: 12px; }

/* Standort-Marker — IDENTISCH zur Startseite (.geo-me: türkiser Punkt + Halo +
   3× Puls). Genutzt vom Orten-Knopf UND als Abstands-Bezugspunkt. Favorit-
   Rückfall = orange Variante (.geo-me--fav), damit „hier bin ich" vs „ab Favorit"
   unterscheidbar bleibt. */
.geo-me { width: 0; height: 0; pointer-events: none; }
.geo-me-dot {
  position: absolute; left: -8px; top: -8px;
  width: 16px; height: 16px; border-radius: 50%;
  background: var(--brand-cyan, #68c2e3);
  border: 3px solid #fff;
  box-shadow: 0 2px 7px rgba(0, 0, 0, .5);
}
.geo-me-halo {
  position: absolute; left: -22px; top: -22px;
  width: 44px; height: 44px; border-radius: 50%;
  background: radial-gradient(circle, rgba(104, 194, 227, .40), rgba(104, 194, 227, 0) 68%);
}
.geo-me-pulse {
  position: absolute; left: -8px; top: -8px;
  width: 16px; height: 16px; border-radius: 50%;
  border: 2px solid var(--brand-cyan, #68c2e3);
  animation: geo-me-ping 1.6s ease-out 3 forwards;
}
@keyframes geo-me-ping {
  0%   { transform: scale(1);   opacity: .65; }
  100% { transform: scale(3.6); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) { .geo-me-pulse { animation: none; opacity: 0; } }
/* Favorit-Rückfall: orange statt türkis */
.geo-me--fav .geo-me-dot   { background: #f5a623; }
.geo-me--fav .geo-me-halo  { background: radial-gradient(circle, rgba(245, 166, 35, .40), rgba(245, 166, 35, 0) 68%); }
.geo-me--fav .geo-me-pulse { border-color: #f5a623; }
.eq-dist-note { font-size: 11px; color: var(--muted); font-style: italic; min-width: 0; }
.eq-dist-note.is-hint { color: var(--accent); font-style: normal; font-weight: 600; }
/* Abstand in der Listenzeile (rechte Meta-Spalte, über Alter/Quelle) */
.eq-recent-dist {
  font-size: 11px; font-weight: 800; color: rgb(var(--eq-fg-rgb));
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
/* Abstand in der Alarmkarte (nach der Region) */
.eq-alert-dist {
  display: inline-block; margin-top: 3px;
  font-size: 12px; font-weight: 700; color: rgb(var(--alert-rgb));
  font-variant-numeric: tabular-nums;
}

/* ===== Reservierte Scrollbalken-Spur auf der Vollbild-Kartenseite entfernen =====
   base.css setzt global `html { scrollbar-gutter: stable }` (verhindert Layout-
   sprünge auf scrollbaren Seiten). Die Kartenseite scrollt aber vertikal NICHT —
   die reservierte Spur blieb leer und zeigte rechts eine dunkle Spalte. Nur hier
   auf auto zurück; NICHT auf event.php (das scrollt als Detailseite und braucht
   die stabile Spur). Scope über die Body-Klasse. */
html:has(body.page-earthquakes) { scrollbar-gutter: auto; }

/* ===== Niedrige Fensterhöhe am Desktop: Alarm + Statistik kompakt, damit die
   Ereignisliste lesbar/scrollbar bleibt (statt nur 1 Zeile eingequetscht).
   Greift ab ≤820px Höhe und NUR am Desktop (>720px Breite; mobil regelt der
   Bottom-Sheet). ===== */
@media (min-width: 721px) and (max-height: 820px) {
  /* Alarmkarte → kompakte Pillen-Leiste (wie mobil): Magnitude als Pille,
     Region daneben; Zeit/Tiefe + Details-Knopf entfallen. Klick zoomt weiter. */
  .eq-alert { padding: 10px 12px; }
  .eq-alert-head { margin-bottom: 6px; }
  .eq-alert-mag {
    display: inline-block; margin-top: 0; font-size: 15px; line-height: 1;
    padding: 4px 11px; border-radius: 999px; color: #fff; background: rgb(var(--alert-rgb));
    text-shadow: 0 1px 2px rgba(0, 0, 0, .45); box-shadow: 0 0 14px rgba(var(--alert-rgb), .45);
    vertical-align: middle;
  }
  .eq-alert-region { display: inline; vertical-align: middle; margin: 0 0 0 9px; font-size: 14px; }
  .eq-alert-meta, .eq-alert-cta { display: none; }
  .eq-alert::after { width: 130px; height: 130px; top: -46px; right: -46px; }
  /* Oberer „Alle anzeigen"-Link raus — die Liste hat unten ihren eigenen. */
  .eq-drawer-viewall { display: none; }
  /* Statistik-Karte flacher */
  .eq-stats-teaser { padding: 8px 12px; gap: 6px; }
  .eq-stats-figs { gap: 6px; }
  .eq-stat { padding: 5px 9px; }
  .eq-stat-n { font-size: 16px; }
  .eq-stat-l { font-size: 9px; }
}