/* ==========================================================================
   EWB Radar -- tooltips.css
   Generische Button-Tooltips via data-t-tooltip-Attribut (richtungsabhängig je
   Container: right-controls, controls, overflow, legend, theme-toggle, panel,
   attr-info-btn).
   Das Attribut setzen die Komponenten an ihren Elementen; hier steht allein
   die Darstellung.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Generische Button-Tooltips via data-t-tooltip-Attribut

   Ersetzt das native title-Attribut: kein Browser-Delay, konsistentes Styling.
   Richtung je nach Container:
     #right-controls    → Tooltip erscheint LINKS  (Buttons sind rechts am Rand)
     #controls          → Tooltip erscheint OBEN   (Buttons sind unten)
     #controls-overflow → Tooltip erscheint LINKS  (Menü ist rechts am Rand)
     .dbz-legend        → Tooltip erscheint RECHTS (Legende ist links am Rand)
     #theme-toggle      → Tooltip erscheint LINKS  (Button ist rechts am Rand)
     #attr-info-btn     → Tooltip erscheint LINKS  (Button ist rechts am Rand)
     .side-panel        → Tooltip erscheint LINKS  (Panel ist rechts am Rand)

   Rand-Schutz: max-width + white-space:normal + overflow-wrap verhindern
   dass Tooltips über den Viewport-Rand laufen.
   Sanfte Einblend-Animation via opacity + translateX/Y.
   -------------------------------------------------------------------------- */
[data-t-tooltip] {
  position: relative;
}

[data-t-tooltip]::after {
  content: attr(data-t-tooltip);
  position: absolute;
  /* Rand-Schutz: umbrechen statt über den Viewport-Rand laufen */
  white-space: normal;
  width: max-content;
  max-width: min(200px, 90vw);
  overflow-wrap: break-word;
  background: var(--glass-bg);
  color: var(--color-text);
  font-size: var(--text-xs);
  font-weight: 500;
  padding: 3px 8px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-sm);
  pointer-events: none;
  opacity: 0;
  transition: opacity var(--transition-fast), transform var(--transition-fast);
  z-index: 10500;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

/* right-controls: Tooltip links erscheinen */
#right-controls [data-t-tooltip]::after {
  right: calc(100% + 8px);
  top: 50%;
  transform: translateY(-50%) translateX(4px);
}
#right-controls [data-t-tooltip]:hover::after,
#right-controls [data-t-tooltip]:focus-visible::after {
  opacity: 1;
  transform: translateY(-50%) translateX(0);
}

/* controls (bottom-bar): Tooltip oben erscheinen */
#controls [data-t-tooltip]::after {
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%) translateY(4px);
}
#controls [data-t-tooltip]:hover::after,
#controls [data-t-tooltip]:focus-visible::after {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* controls-overflow: Tooltip links erscheinen (Menü ist rechts am Rand) */
#controls-overflow [data-t-tooltip]::after {
  right: calc(100% + 8px);
  top: 50%;
  transform: translateY(-50%) translateX(-4px);
}
#controls-overflow [data-t-tooltip]:hover::after,
#controls-overflow [data-t-tooltip]:focus-visible::after {
  opacity: 1;
  transform: translateY(-50%) translateX(0);
}

/* dbz-legend: Tooltip rechts erscheinen (Legende ist links am Rand) */
.dbz-legend[data-t-tooltip]::after {
  left: calc(100% + 8px);
  right: auto;
  top: 50%;
  bottom: auto;
  transform: translateY(-50%) translateX(-4px);
}
.dbz-legend[data-t-tooltip]:hover::after,
.dbz-legend[data-t-tooltip]:focus-visible::after {
  opacity: 1;
  transform: translateY(-50%) translateX(0);
}

/* attr-info-btn: Tooltip links erscheinen (Button ist rechts am Rand).
   ⚠️ Der Knopf steht nur auf schmalen Bildschirmen -- das heißt NICHT, dass
   niemand ihn mit einem Zeiger erreicht: eine eingebettete Karte (Dashboard)
   ist schmal und liegt trotzdem auf einer Desktop-Seite. Ohne diese Regel
   bliebe der Tooltip auf Deckkraft 0, weil die generische Regel oben nur das
   Aussehen setzt und die Sichtbarkeit je Container kommt. */
#attr-info-btn[data-t-tooltip]::after {
  right: calc(100% + 8px);
  left: auto;
  top: 50%;
  bottom: auto;
  transform: translateY(-50%) translateX(4px);
}
#attr-info-btn[data-t-tooltip]:hover::after,
#attr-info-btn[data-t-tooltip]:focus-visible::after {
  opacity: 1;
  transform: translateY(-50%) translateX(0);
}

/* theme-toggle: Tooltip links erscheinen (Button ist rechts am Rand) */
#theme-toggle[data-t-tooltip]::after {
  right: calc(100% + 8px);
  left: auto;
  top: 50%;
  bottom: auto;
  transform: translateY(-50%) translateX(4px);
}
#theme-toggle[data-t-tooltip]:hover::after,
#theme-toggle[data-t-tooltip]:focus-visible::after {
  opacity: 1;
  transform: translateY(-50%) translateX(0);
}

/* side-panel: Tooltip links erscheinen (Panel ist rechts am Rand).
   Gilt für den Toggle-Button sowohl im ausgeklappten als auch
   im eingeklappten Zustand (.side-panel--collapsed). */
.side-panel [data-t-tooltip]::after {
  right: calc(100% + 8px);
  left: auto;
  top: 50%;
  bottom: auto;
  transform: translateY(-50%) translateX(4px);
}
.side-panel [data-t-tooltip]:hover::after,
.side-panel [data-t-tooltip]:focus-visible::after {
  opacity: 1;
  transform: translateY(-50%) translateX(0);
}

/* Kamera-Button-Tooltip unterdrücken wenn das Format-Flyout offen ist.
   .screenshot-flyout--open ist direkter Vorgänger des Kamera-Buttons im DOM --
   der +-Selektor (adjacent sibling) trifft ihn exakt. */
.screenshot-flyout--open + [data-t-tooltip]::after {
  display: none !important;
}

/* Such-Button-Tooltip unterdrücken wenn Suchleiste offen ist.
   .geocoder-wrap--open ist direkter Vorgänger des Such-Buttons im DOM --
   der +-Selektor (adjacent sibling) trifft ihn exakt. */
.geocoder-wrap--open + [data-t-tooltip]::after {
  display: none !important;
}

/* Controls-Bar: Tooltip für den Anker-Button (höchste button_order, ganz rechts)
   rechtsbündig ausrichten, damit er nicht über den Viewport-Rand läuft.
   Das data-tooltip-align="right"-Attribut wird von features.js auf dem
   Anker-Button gesetzt (Button mit der höchsten order in der Controls-Bar). */
#controls [data-tooltip-align="right"][data-t-tooltip]::after {
  left: auto;
  right: 0;
  width: max-content;
  transform: translateX(0) translateY(4px);
}
#controls [data-tooltip-align="right"][data-t-tooltip]:hover::after,
#controls [data-tooltip-align="right"][data-t-tooltip]:focus-visible::after {
  opacity: 1;
  transform: translateX(0) translateY(0);
}

/* leaflet-zoom: Tooltip rechts erscheinen (Buttons sind links am Rand) */
.leaflet-control-zoom a[data-t-tooltip]::after {
  left: calc(100% + 8px);
  right: auto;
  top: 50%;
  bottom: auto;
  transform: translateY(-50%) translateX(-4px);
  /* border-radius explizit wiederholen -- im <a>-Kontext sonst eckig */
  border-radius: var(--radius-sm);
  /* Body-Font (Inter) erzwingen -- die Zoom-<a> erben Leaflets Monospace,
     das schlüge sonst auf den Tooltip durch (andere Tooltips erben Inter vom Host). */
  font-family: var(--font-body);
}
.leaflet-control-zoom a[data-t-tooltip]:hover::after,
.leaflet-control-zoom a[data-t-tooltip]:focus-visible::after {
  opacity: 1;
  transform: translateY(-50%) translateX(0);
}

/* --------------------------------------------------------------------------
   Leaflet-Sprechblasen (Warnungen, Marker, Standort-Pins) folgen dem Theme.

   Leaflets eigenes Stylesheet setzt Grund und Rahmen hart auf #fff und die
   Schrift auf #222. Über die Design-Tokens wird beides theme-treu: --color-*
   stehen im :root auf den Dark-Werten, [data-theme="light"] überschreibt sie.
   Eine eigene [data-theme="dark"]-Regel braucht es deshalb nicht.

   --color-surface ist im Light-Mode exakt #ffffff -- der Grund bleibt dort also
   unverändert. Trennlinien und gedämpfte Schrift übernehmen die Token-Werte und
   verschieben sich dabei minimal (0,12 -> 0,10 und 0,2 -> 0,18 Alpha, #444 ->
   #57606a); dafür sind sie theme-konsistent mit dem Rest der Oberfläche.
   Rahmen bewusst in derselben Farbe wie der Grund (wie bei Leaflet): eine
   abgesetzte Kante wäre ein neues Gestaltungselement, kein Dark-Mode.

   Der Zipfel ist ein ::before mit gefärbtem Rahmen -- er braucht je Richtung
   eine eigene Regel, sonst klebt ein weißes Dreieck am dunklen Kasten.
   Ausgenommen ist der Lineal-Tooltip: er ist bewusst in beiden Themes dunkel
   und bringt seine eigenen Farben mit (ruler.css); seinen Zipfel blendet er
   ohnehin aus.

   Beide Klassen stehen absichtlich in den Zipfel-Selektoren, obwohl die
   Richtungsklasse allein trifft: Leaflets eigene Regel hat dieselbe Form, und
   mit gleicher Spezifität entschiede allein die Reihenfolge der <link>-Tags in
   index.html. Wer die einmal umstellt, hätte wieder weiße Dreiecke an dunklen
   Kästen, ohne dass hier eine Regel falsch aussähe. Die zusätzliche Klasse
   sitzt am selben Element (Leaflet setzt beide) und macht die Regel
   reihenfolgeunabhängig. Aus demselben Grund trägt die Hauptregel :not() --
   dort deckt es zusätzlich die Ausnahme ab.
   -------------------------------------------------------------------------- */
.leaflet-tooltip:not(.ruler-tooltip) {
  background-color: var(--color-surface);
  border-color:     var(--color-surface);
  color:            var(--color-text);
}

.leaflet-tooltip.leaflet-tooltip-top::before    { border-top-color:    var(--color-surface); }
.leaflet-tooltip.leaflet-tooltip-bottom::before { border-bottom-color: var(--color-surface); }
.leaflet-tooltip.leaflet-tooltip-left::before   { border-left-color:   var(--color-surface); }
.leaflet-tooltip.leaflet-tooltip-right::before  { border-right-color:  var(--color-surface); }

/* --------------------------------------------------------------------------
   Warnungen-Tooltip (alerts_layer.js: buildAlertTooltip)

   Aufbau: Warnart / Stufe / Beschreibung / Zeitraum im Leaflet-Tooltip.
   Trennlinien und gedämpfte Schrift kommen aus denselben Tokens wie der Grund
   und wechseln damit mit dem Theme.

   Breite: fester rem-Deckel gegen absurde Breite, darunter viewport-anteilig.
   Reine vw-Breakpoints würden invertieren -- 20vw auf breitem Desktop (1440px =
   288px) ist SCHMALER als 40vw auf schmalem Desktop (1000px = 400px) -- und wären
   auf sehr breiten Schirmen absurd breit. min(75vw, 34rem) deckelt den Tooltip auf
   jedem Desktop bei ~34rem (~544px) und fällt erst auf kleinen Viewports auf 75vw
   zurück (mobil). So bricht die lange Beschreibung über mehrere Zeilen, ohne
   Inversion und ohne absurde Breite.

   Die Breite MUSS am Leaflet-Wrapper (.leaflet-tooltip.alerts-tt) sitzen, nicht
   am inneren div: der Wrapper ist shrink-to-fit (position:absolute). max-width
   allein DECKELT nur -- ohne width kollabiert der Wrapper auf die min-content-
   Breite (das längste Wort). Deshalb width:max-content (Wrapper will die volle
   Zeilenbreite) + max-width (gedeckelt), genau wie die Button-Tooltips oben.
   white-space:normal hebt Leaflets nowrap auf, damit der Text im Deckel umbricht.
   className "alerts-tt" kommt aus bindTooltip() (alerts_layer.js). */
.leaflet-tooltip.alerts-tt {
  /* Schriften NUR auf Mobile (max-width 600px) hochskaliert; Desktop bleibt
     original (beide Faktoren Default 1). --tt-scale: Titel/Stufe/Zeitraum
     (erben die font-size-Basis, gesetzt im 600px-Block). --tt-desc-scale:
     der Warntext (Beschreibung), bewusst etwas kleiner als der Rest. */
  --tt-scale:      1;
  --tt-desc-scale: 1;
  white-space:   normal;
  width:         max-content;
  max-width:     min(75vw, 34rem);
  overflow-wrap: break-word;
}

/* Kopfzeile eines Warnblocks: Warnart und Stufe auf dunklem Grund, in BEIDEN
   Themes. Zweck ist die Stufenfarbe -- sie ist für Flächen gedacht und auf
   hellem Grund als Schrift kaum lesbar; auf dunklem Grund trägt sie selbst,
   Gelb bleibt Gelb und Orange bleibt Orange. Nebeneffekt im Light-Mode: bei
   mehreren gestapelten Warnungen trennen die dunklen Bänder die Blöcke
   sichtbar voneinander.

   Die Regel bleibt token-treu; dauerhaft dunkel wird sie über einen
   Scope-Override der Tokens weiter unten. Ohne den bekäme die Kopfzeile im
   Light-Mode dunkle Schrift auf dunklem Grund.

   Randlos bis an die Tooltip-Kanten: die negativen Margins heben Leaflets
   Innenabstand von 6px auf, das padding stellt ihn innerhalb des Bandes wieder
   her. Die 3px oben spiegeln Leaflets border-radius am Tooltip. */
.alert-tooltip__head {
  display:       block;
  margin:        -6px -6px 0;
  padding:       6px;
  border-radius: 3px 3px 0 0;
  background:    var(--color-bg);
  color:         var(--color-text);
}

/* Folgeblöcke: der Partner-Trenner bleibt sichtbar, das Band beginnt darunter
   und läuft nur noch seitlich bis an die Kante. */
.alert-tooltip__partner .alert-tooltip__head {
  margin-top:    0;
  border-radius: 0;
}

/* Der Scope-Override: innerhalb der Kopfzeile gelten im Light-Mode die
   Dark-Werte der Tokens (style.css, :root). So bleibt die Regel oben
   token-basiert, statt Farben fest zu verdrahten. Bekommt die Kopfzeile
   Kinder, die weitere Tokens nutzen (etwa --color-text-muted für eine
   gedämpfte Zeile), gehören deren Dark-Werte hier ebenfalls hinein. */
[data-theme="light"] .alert-tooltip__head {
  --color-bg:   #0d1117;
  --color-text: #e6edf3;
}

/* Beschreibung (DWD-description): eigener Block unter der Stufe, gedämpft und
   linksbündig. pre-line erhält die DWD-Zeilenumbrüche (\n) und bricht
   zusätzlich am Rand um; Mehrfach-Leerzeichen kollabieren. */
.alert-tooltip__description {
  display:       block;
  margin-top:    4px;
  padding-top:   4px;
  border-top:    1px solid var(--color-border);
  text-align:    left;
  white-space:   pre-line;
  font-size:     calc(var(--text-xs) * var(--tt-desc-scale));
  color:         var(--color-text-muted);
}

/* Touch-Geräte (kein Hover): der getappte Tooltip bleibt stehen und die
   Beschreibung wächst voll aus (kein Höhen-Cap/Scroll -- Scrollen im Tooltip
   ist auf dem Telefon schlechte UX). pointer-events reaktivieren die Berührung
   an der Beschreibung, damit ein Tap darauf sie nicht schließt; der übrige
   Tooltip bleibt none, ein Tap daneben schließt. */
@media (hover: none) {
  .alert-tooltip__description {
    pointer-events: auto;
  }
}

/* Überlappen sich an einer Stelle mehrere Warnungen/Vorabinformationen, listet
   der Tooltip alle dort geltenden, distinkten Meldungen -- jeder Block nach dem
   ersten trägt diese Klasse. Deutlich abgesetzt unter dem vorherigen Text. */
.alert-tooltip__partner {
  margin-top:  6px;
  padding-top: 6px;
  border-top:  2px solid var(--color-border-hover);
  text-align:  left;
}

/* Touch: alle weiteren Blöcke wachsen ebenfalls voll aus (kein Höhen-Cap/
   Scroll); pointer-events wie bei der Beschreibung. */
@media (hover: none) {
  .alert-tooltip__partner {
    pointer-events: auto;
  }
}

/* Schmale Viewports (Telefon-Hochformat): die Beschreibung startet EINGEKLAPPT,
   ein Tap auf den offenen Tooltip klappt sie auf, jeder weitere toggelt
   auf/zu. Der Breakpoint spiegelt
   OVERFLOW_BREAKPOINT_PX (features.js) bzw. den CSS-Portrait-Breakpoint --
   Achse ist die BREITE, nicht die Hover-Fähigkeit: auch ein schmales
   Maus-Fenster klappt ein (Aufklappen dort per Klick auf den Tooltip).

   Mechanik: alerts_layer.js setzt die Klasse is-expanded auf den persistenten
   Leaflet-Wrapper (.leaflet-tooltip.alerts-tt) -- NICHT auf das innere div,
   das der punktabhängige Partner-Rebuild (setTooltipContent) neu erzeugt.
   Aufgeklappt werden ALLE Beschreibungen gemeinsam (jeder Block des Tooltips):
   ein Zustand für den ganzen Tooltip, keine halb offenen Mischformen.

   pointer-events am Wrapper, damit der Tap den Aufklapp-Handler erreicht,
   statt auf die Karte durchzufallen (der Karten-Klick würde schließen; ein
   Tap NEBEN den Tooltip trifft weiter die Karte und schließt wie gehabt).
   Oberhalb des Breakpoints gilt Leaflets Default pointer-events:none, der
   Desktop bleibt komplett unberührt (Beschreibung sofort sichtbar).

   Aufgeklappt wächst die Beschreibung voll aus (kein Höhen-Cap). Die
   hover:none-Regeln bleiben eigenständig für breite Touch-Geräte
   (Tablet-Querformat: Beschreibung sichtbar, kein Collapse). */
@media (max-width: 600px) {
  .leaflet-tooltip.alerts-tt {
    /* Mobile: alle Schriften hoch; der Warntext (Beschreibung) etwas weniger. */
    --tt-scale:      1.5;
    --tt-desc-scale: 1.25;
    font-size:       calc(var(--text-xs) * var(--tt-scale));
    pointer-events:  auto;
  }
  .alerts-tt .alert-tooltip__description {
    display: none;
  }
  .alerts-tt.is-expanded .alert-tooltip__description {
    display:     block;
  }
}

/* --------------------------------------------------------------------------
   KONRAD3D-Infofenster (konrad_layer.js: buildCellTooltip)

   Aufbau: Kopfzeile mit Zellbezeichnung und eingefärbter Stufe, darunter
   Beschriftung/Wert-Paare. Spiegelt den Warnungen-Tooltip bewusst in Mechanik
   und Breakpoint, nicht in der Darstellung: dort ist der Inhalt Fließtext,
   hier eine Werteliste.

   Breite wie bei .alerts-tt am Leaflet-WRAPPER, aus demselben Grund: der
   Wrapper ist shrink-to-fit, ohne width kollabiert er auf das längste Wort.

   ⚠️ Der Deckel liegt mit 30rem BEWUSST zwischen den früheren 26rem und den
   34rem der Warnungen, und beide Grenzen tragen einen eigenen Grund:

   Nach oben: die unterschiedliche Breite ist ein ERKENNUNGSMERKMAL. Man sieht am
   Umriss, ob eine Warnung oder eine Konvektionszelle offen ist, bevor man liest.
   Bei 34rem wäre das weg -- wer beide später "harmonisiert", zerstört also eine
   bewusste Unterscheidung, keinen Zufall.

   Nach unten: 26rem stammen aus der Zeit vor den Trend-Zusätzen. Die Zeilen
   tragen jetzt zusätzlich einen eingeklammerten Wert, und die alte Begründung
   ("kein langer Fließtext, der die Breite bräuchte") galt für einen Inhalt, den
   es so nicht mehr gibt. */
.leaflet-tooltip.konrad-tt {
  --tt-scale:    1;
  white-space:   normal;
  width:         max-content;
  /* KEINE Mindestbreite: die Breite bestimmt der Inhalt. Eine feste Untergrenze
     war der erste Versuch und war falsch -- sie erzeugt leeren Raum zwischen
     Beschriftung und Wert, sobald die Zellwerte kürzer ausfallen als gedacht,
     und sie müsste bei jeder neuen Zeile neu geraten werden. Der Abstand
     zwischen den beiden Spalten leistet dasselbe inhaltsabhängig, siehe
     .konrad-tooltip__row.

     ⚠️ Der Deckel allein ändert am Erscheinungsbild NICHTS: mit
     width:max-content bleibt eine Werteliste aus kurzen Zeilen weit darunter.
     Er greift nur, wenn eine Zeile ungewöhnlich lang wird. Die Warnungen wirken
     nur deshalb breiter, weil sie langen Fließtext tragen und ihren Deckel
     wirklich erreichen. Wer das Infofenster breiter haben will, ändert also den
     Abstand oder den Inhalt, nicht diese Zeile. */
  max-width:     min(75vw, 30rem);
  overflow-wrap: break-word;
}

/* Kopfzeile: dauerhaft dunkles Band wie bei den Warnungen, damit die
   Stufenfarbe auch im Light-Mode trägt. Randlos bis an die Tooltip-Kanten --
   die negativen Margins heben Leaflets 6px-Innenabstand auf, das padding
   stellt ihn innerhalb des Bandes wieder her. */
.konrad-tooltip__head {
  display:       block;
  margin:        -6px -6px 4px;
  padding:       6px;
  border-radius: 3px 3px 0 0;
  background:    var(--color-bg);
  color:         var(--color-text);
  text-align:    left;
}

/* Scope-Override wie bei .alert-tooltip__head: im Light-Mode gelten INNERHALB
   der Kopfzeile die Dark-Werte der Tokens. Ohne ihn stünde dunkle Schrift auf
   dunklem Grund. */
[data-theme="light"] .konrad-tooltip__head {
  --color-bg:   #0d1117;
  --color-text: #e6edf3;
}

/* Zellart in Großbuchstaben -- auf Kundenwunsch (Sichtbarkeit auf buntem Echo).

   GLEICHE OPTIK WIE DIE WARNUNGEN, ANDERE HERKUNFT. Das ist keine Abweichung:
   alerts_layer.js:648 setzt seinen Titel selbst auf Versalien
   (`raw.toLocaleUpperCase(lang)`), weil die deutsche Quelle die Warnart schon
   groß liefert und die englische klein. Beide Infofenster sehen damit gleich
   aus; nur der Weg dorthin ist ein anderer.

   Hier über text-transform statt über den Text, weil die Ausgangslage eine
   andere ist: die KONRAD-Bezeichnung kommt nicht aus Fremddaten, sondern aus
   presets/translations und ist dort ein normal geschriebener Eigenname. Der
   soll es bleiben. Ein toUpperCase() im Code müsste zudem vor dem Maskieren
   laufen und würde bei einem ß je nach Browser zu "SS" -- unauffällig falsch,
   auch wenn "Konvektive Zelle" heute keines enthält. */
.konrad-tooltip__head strong {
  text-transform: uppercase;
  /* Versalien stehen ohne etwas Laufweite gedrängt; klein genug, um die
     Zeilenbreite nicht spürbar zu ändern. */
  letter-spacing: 0.03em;
}

/* Beschriftung und Wert nebeneinander, Wert rechtsbündig: die Zahlen stehen
   damit untereinander und sind zwischen zwei Zellen vergleichbar. */
.konrad-tooltip__row {
  display:         flex;
  /* Der Abstand ist zugleich der MINDESTPUFFER zwischen Beschriftung und Wert.
     Weil die Breite des Infofensters aus max-content kommt, bestimmt ihn die
     längste Zeile -- ohne spürbaren Abstand stießen dort die längste
     Beschriftung ("Kernfläche (45 dBZ)") und der längste Wert
     ("59 dBZ (±0) · Ø 51 dBZ") fast aneinander.

     Deshalb hier der Puffer statt einer festen Mindestbreite: er wächst mit dem
     Inhalt mit, statt eine Zahl zu setzen, die bei anderer Zellenlage wieder
     nicht passt. */
  gap:             var(--space-6, 24px);
  justify-content: space-between;
  text-align:      left;
}

.konrad-tooltip__label {
  color: var(--color-text-muted);
}

.konrad-tooltip__value {
  text-align:  right;
  white-space: nowrap;
}

/* Die Reflektivitäts-Zeile trägt als einzige ZWEI Zahlen und ist damit die
   längste. Auf schmalen Viewports passt sie nicht mehr in den Kasten: dort
   deckelt 75vw die Breite, während --tt-scale die Schrift um die Hälfte
   vergrößert. Mit nowrap läuft der Wert seitlich über den Kasten hinaus.

   Deshalb darf genau dieser Wert umbrechen -- und nur an einer Stelle. Die
   beiden Hälften stehen je in einem Teil, der seinerseits nicht umbricht
   (konrad_layer.js, buildCellTooltip): Maximum samt Trend, Durchschnitt samt
   dem Mittelpunkt davor. Umbrechen kann damit allein das Leerzeichen zwischen
   den Teilen. Ohne die Teile bräche der Wert auch zwischen Zahl und Einheit
   oder zwischen Zahl und Trend -- der Trend stünde dann allein auf der zweiten
   Zeile und läse sich als Angabe zum Durchschnitt.

   Der Umbruch am flex-Element wirkt zugleich auf die Zeilenbreite: mit normal
   sinkt seine Mindestbreite auf den längsten Teil, statt auf die ganze Zeile --
   erst dadurch passt die Zeile überhaupt in den gedeckelten Kasten. */
.konrad-tooltip__value--wrap {
  white-space: normal;
}

.konrad-tooltip__part {
  white-space: nowrap;
}

/* Schmale Viewports: nur das Wichtigste steht sofort da -- Zeitpunkt,
   Position und die drei Schwere-Angaben. Die Messwerte tragen die Klasse
   __detail und erscheinen erst nach einem Tap auf das Infofenster.

   Mechanik identisch zu den Warnungen: konrad_layer.js setzt is-expanded auf
   den persistenten Leaflet-Wrapper, nicht auf das innere div. pointer-events
   am Wrapper, damit der Tap den Aufklapp-Handler erreicht statt auf die Karte
   durchzufallen. Achse ist die BREITE, nicht die Hover-Fähigkeit -- auch ein
   schmales Maus-Fenster klappt ein. */
@media (max-width: 600px) {
  .leaflet-tooltip.konrad-tt {
    --tt-scale:     1.5;
    font-size:      calc(var(--text-xs) * var(--tt-scale));
    pointer-events: auto;
  }
  .konrad-tt .konrad-tooltip__detail {
    display: none;
  }
  .konrad-tt.is-expanded .konrad-tooltip__detail {
    display: flex;
  }
}