/* ==========================================================================
   EWB Radar -- tooltips.css
   Sprechblasen der Knöpfe über das Attribut data-t-tooltip: die Ebene
   #tooltip-layer und die Grundregel der Blasen, die noch am `::after` ihres
   Trägers stehen (Auswahlbahn, Farbmischer, Haftungshinweis; ihre Lage
   steht in deren Stylesheets).
   Das Attribut setzen die Komponenten an ihren Elementen; hier steht allein
   die Darstellung.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Die Ebene der Sprechblasen: #tooltip-layer (tooltip_layer.js)

   Ein Popover im Top-Layer, das das Skript mit dem Text eines Trägers füllt
   und an ihn setzt; es liegt damit vor jedem Element der Seite. Welche Träger
   es nutzen, steht in TOOLTIP_GROUPS; für sie steht hier keine Regel am
   `::after`.

   Die Vorgaben des Browsers für ein Popover (mittig über `inset` und
   `margin`, Rahmen, Innenabstand, Farben) sind zurückgesetzt, wie beim
   schwebenden Feld. Am Element steht keine `display`-Angabe: geschlossen
   blendet die Regel des Browsers für `[popover]` es aus.

   Einblenden: der Übergang auf `opacity` startet am Ausgangsstil aus
   `@starting-style`. Der Block steht NACH der Regel für das gezeigte Popover,
   sonst gewänne diese mit gleichem Gewicht, und es liefe kein Übergang.
   Ausblenden ist hart: das Skript verbirgt das Popover sofort.
   -------------------------------------------------------------------------- */
#tooltip-layer {
  position: fixed;
  inset: auto;
  margin: 0;
  overflow: visible;
  white-space: normal;
  width: max-content;
  height: auto;
  max-width: min(200px, 90vw);
  overflow-wrap: break-word;
  /* Mittig wie der Text eines Knopfes; unter `body` gälte sonst der linksbündige
     der Seite. */
  text-align: center;
  background: var(--glass-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  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;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  opacity: 0;
  transition: opacity var(--transition-fast);
}
#tooltip-layer:popover-open {
  opacity: 1;
}
@starting-style {
  #tooltip-layer:popover-open {
    opacity: 0;
  }
}

/* --------------------------------------------------------------------------
   Grundregel der Blasen am `::after` eines Trägers

   Ersetzt das native title-Attribut: kein Browser-Delay, konsistentes Styling.
   Lage und Sichtbarkeit setzt je Träger sein eigenes Stylesheet.

   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);
}

/* --------------------------------------------------------------------------
   Klemmen an einer Grenze -- EINE Rechnung für jede Sprechblase, die längs
   mittig an ihrem Träger steht (über ihm: quer, neben ihm: hoch).

   clampTooltip() (tooltip_clamp.js) setzt am Träger die Achse
   (data-tooltip-clamp) und die Abstände seiner Mitte zu den zwei Grenzen:
   --tooltip-room-start nach links bzw. oben, --tooltip-room-end nach rechts
   bzw. unten. Die Blase bleibt mittig (-50%), bis eine ihrer Kanten die
   Grenze erreicht; dann endet sie dort. `min` hält sie vor der Grenze am Ende,
   `max` danach vor der am Anfang -- ist sie breiter als der Raum zwischen
   beiden, bleibt ihr Anfang stehen. Prozent zählen in der Breite bzw. Höhe der
   Blase; deshalb rechnet das Stylesheet und nicht das Skript. Eine Seite ohne
   Abstand ist offen; einen Abstand, der keine endliche Zahl ist, setzt das
   Skript gar nicht erst. Ein Abstand unter null -- die Mitte des Trägers liegt
   jenseits dieser Grenze -- geht durch dieselbe Rechnung: die Blase steht dann
   ganz neben der Mitte, an der Grenze.

   Die Regeln der Träger lesen das Ergebnis als var(--tooltip-shift, -50%):
   ohne die Marke bleibt die Blase mittig.

   ⚠️ --carrier-scale: ein Knopf, der unter dem Zeiger wächst oder gedrückt
   schrumpft (buttons.css), skaliert seine Blase und deren Abstand mit. Die
   Abstände gelten am unskalierten Knopf und werden deshalb durch den Faktor
   geteilt; so endet die Blase in jedem Zustand des Knopfes an derselben
   Grenze.
   -------------------------------------------------------------------------- */
[data-tooltip-clamp="x"] {
  --tooltip-shift: max(
    calc(-1 * var(--tooltip-room-start, 100vw) / var(--carrier-scale, 1)),
    min(-50%, calc(var(--tooltip-room-end, 100vw) / var(--carrier-scale, 1) - 100%)));
}
[data-tooltip-clamp="y"] {
  --tooltip-shift: max(
    calc(-1 * var(--tooltip-room-start, 100vh) / var(--carrier-scale, 1)),
    min(-50%, calc(var(--tooltip-room-end, 100vh) / var(--carrier-scale, 1) - 100%)));
}

/* --------------------------------------------------------------------------
   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;
  }
}

/* Links im Warn-Tooltip (Adressen in der Beschreibung, der Name des Dienstes):
   blau und unterstrichen, damit sie in gedämpfter wie in normaler Schrift als
   Link erkennbar sind. Eine lange Adresse bricht an jeder Stelle um, statt den
   Tooltip über seine Breite hinaus zu dehnen. */
.alert-tooltip__link {
  color:           var(--color-link);
  text-decoration: underline;
  overflow-wrap:   anywhere;
}

/* Touch: die Tippfläche des Links wächst nach oben und unten über die Zeile
   hinaus. Polster an einem Inline-Element vergrößern die Fläche, die den Tap
   annimmt, ohne die Zeilenhöhe zu ändern -- der Text steht wie ohne. Der Link
   nimmt den Tap an, auch wo der Rest des Tooltips es nicht tut (breite
   Touch-Geräte, die Zeile mit dem Dienst). */
@media (hover: none) {
  .alert-tooltip__link {
    padding-block:  0.4em;
    pointer-events: auto;
  }
}

/* Desktop: Klicks nimmt nur der gepinnte Tooltip an (is-pinned, alerts_layer.js),
   und dort nur seine Links. Ein Klick daneben fällt weiter auf die Karte und
   löst den Pin wie zuvor; der Hover-Tooltip folgt dem Zeiger und bleibt ohne
   Klicks (Leaflets pointer-events: none), sein Link ist sichtbar, aber nicht
   klickbar. */
.leaflet-tooltip.alerts-tt.is-pinned .alert-tooltip__link {
  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;
  }
}