/* Die Regeln für .hive-mode-toggle / .hive-toolbar / .hive-tool-btn stehen in
   components.css: kvkmapGroup.js rendert den Modus-Umschalter auch auf
   kvkmap-group.html, und diese Seite lädt hive.css nicht. */

/* ---- Karten-Ansicht: randlos, bündig am Header, füllt den kompletten Bereich
   unter Header/Nav. Die Bedienelemente schweben als Overlay AUF der Karte (siehe
   .map-overlay), statt Platz im normalen Fluss zu beanspruchen. Greift nur,
   solange die Kartenansicht offen ist (:has) -- andere Tabs (Spieler, Notes,
   Einstellungen, ...) behalten normales Seitenlayout samt Scrollen. Seit die
   Truppen-Verhältnis-Notiz (KvK) in einen eigenen Tab umgezogen ist, hat die
   Kartenansicht selbst keinen variabel hohen Inhalt mehr über der Karte --
   overflow:hidden ist daher unproblematisch (nichts kann die Karte mehr aus dem
   Viewport drücken). */
body:has(#view-map:not(.hidden)) { overflow: hidden; }
body:has(#view-map:not(.hidden)) #app { height: 100dvh; display: flex; flex-direction: column; }
body:has(#view-map:not(.hidden)) .page-content { flex: 1; min-height: 0; max-width: none; padding: 0; }
#view-map { position: relative; height: 100%; }

.hive-map-wrap { position: absolute; inset: 0; }

/* Bedienelemente-Overlay: nutzt die verfügbare Breite bis zu den Lupe-/
   Zentrieren-Buttons aus, dabei bewusst stark transparent -- die Kartenzellen
   darunter sollen gut sichtbar bleiben. pointer-events:none auf dem Panel +
   pointer-events:auto NUR auf den Kindern lässt Klicks/Drags durch jeden
   leeren Bereich hindurch zur Karte durch, obwohl das Panel optisch die volle
   Breite einnimmt -- kein "totes" klickfangendes Leerfeld trotz voller Breite. */
.map-overlay {
  /* right hält die Spalte der Zoom-Knöpfe frei: 8px Abstand zum Rand
     + Knopfbreite (--tap) + 12px Luft dazwischen. */
  position: absolute; top: 8px; left: 8px; right: calc(20px + var(--tap)); z-index: 6;
  display: flex; flex-direction: column; gap: 6px;
  pointer-events: none;
  /* Falls mal viele nicht platzierte Spieler in der Liste stehen: das Overlay
     selbst scrollt, statt unbegrenzt zu wachsen und die ganze Karte zu verdecken. */
  max-height: calc(100% - 16px); overflow-y: auto;
}
.map-overlay > * { pointer-events: auto; margin: 0; }
.map-controls {
  display: flex; flex-wrap: wrap; align-items: center; gap: 5px;
  background: color-mix(in srgb, var(--surface) 55%, transparent);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  border: 1px solid var(--border-soft); border-radius: var(--r-sm);
  padding: 6px 8px; box-shadow: var(--shadow);
}
.map-controls > * { margin: 0; }
.map-overlay input[type="text"] {
  min-height: 26px; padding: 0 8px; font-size: .8rem; max-width: 200px;
  background: color-mix(in srgb, var(--surface-2) 55%, transparent);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}

/* Karte: dezenter Rahmen ringsum (Kante überall sichtbar), abgerundet. Reines
   Sichtfenster (overflow:hidden) -- geschwenkt wird ausschließlich über eine
   Transform auf .hive-map-pad (siehe mapView.js), NICHT über natives Scrollen,
   damit sich die Karte beliebig weit verschieben lässt (auch ganz aus dem
   Sichtbereich heraus) statt an den Content-Rand geklemmt zu werden. */
.hive-map-scroll {
  height: 100%; overflow: hidden;
  border: 1px solid var(--border-soft); border-radius: var(--r); background: var(--surface);
  touch-action: none;
  /* Ohne dies markiert jeder Zieh-Vorgang (Pan/Drag) versehentlich Text auf der Karte. */
  user-select: none; -webkit-user-select: none; -ms-user-select: none;
}
.hive-map-pad { padding: 140px; width: max-content; }
.hive-map-grid {
  display: grid; gap: 1px; background: var(--border-soft);
  transform: rotate(45deg); transform-origin: center;
}

.hive-zoom-controls { position: absolute; top: 8px; right: 8px; display: flex; flex-direction: column; gap: 4px; z-index: 5; }
/* Volles Touch-Ziel (--tap): die drei Knöpfe sind auf Hive-/KvK-/TAC-Karte die
   einzige Zoom-Bedienung neben Pinch und werden am Handy bedient. Sie schweben
   frei über der Karte und drängen nichts weg -- die Spalte wächst von 104px auf
   122px Höhe, das ist auf jedem Kartenausschnitt Platz. Nur .map-overlay muss
   den 6px breiteren Streifen rechts freihalten (siehe dort). */
.hive-zoom-controls button {
  width: var(--tap); height: var(--tap); border-radius: 50%; border: 1px solid var(--border); background: var(--surface-2);
  color: var(--text); font-size: 1rem; font-weight: 700; cursor: pointer; box-shadow: var(--shadow);
  display: inline-flex; align-items: center; justify-content: center; padding: 0;
}
.hive-zoom-controls button svg { width: 16px; height: 16px; }
.hive-zoom-controls button:hover { background: var(--surface-3); }

.hive-cell {
  width: var(--hive-cell, 18px); height: var(--hive-cell, 18px); background: var(--surface-2); cursor: pointer; position: relative;
}
.hive-cell:hover { background: var(--surface-3); }
.hive-cell.drop-target { background: var(--accent-bg); outline: 2px dashed var(--accent); outline-offset: -2px; }

/* Schriftgrößen sind relativ zu --hive-cell (Basis 18px) statt fest in px --
   sonst wächst beim Zoomen nur die Zelle, nicht ihr Inhalt (Text/Icons blieben
   optisch gleich groß und wirkten bei hohem Zoom winzig, bei niedrigem Zoom
   unproportional groß). */
.hive-obj {
  position: relative; display: flex; align-items: center; justify-content: center;
  border-radius: 3px; cursor: pointer; font-size: calc(var(--hive-cell, 18px) * 0.4444); overflow: hidden;
}
/* Name + Fallen-/Punkte-Abzeichen stehen in .hive-obj-stack -- die Regel dafür
   steht in components.css, gemeinsam mit der zeichengleichen .kvk-obj-stack. */
/* --name-scale: von JS gesetzter Verkleinerungsfaktor (renderGrid, UI.fitNameToTile
   in ui.js) für lange Namen, die sonst über den Kachelrand hinauslaufen würden --
   als Multiplikator auf die normale, zoom-relative Größe (1em = geerbt von
   .hive-obj) statt fixer Pixelwert, damit es beim Zoomen korrekt mitskaliert.
   Kurze Namen bleiben unverändert bei --name-scale:1 (Default), werden also NIE
   größer als bisher. */
.hive-obj .obj-label { white-space: nowrap; font-weight: 700; font-size: calc(1em * var(--name-scale, 1)); }
.hive-obj .tile-badge {
  font-size: calc(var(--hive-cell, 18px) * 0.3333); line-height: 1; color: var(--text-dim); white-space: nowrap;
}
.hive-obj.type-bear_trap { background: var(--brown-bg); border: 1px solid var(--brown); }
.hive-obj.type-flag { background: var(--accent-bg); border: 1px solid var(--accent); }
.hive-obj.type-city { background: var(--info-bg); border: 1px solid var(--info); }
/* "Blocked Area" (ex Berg/See/Gebäude): rot + durchgestrichen, damit sie nicht mit einer
   freien Zelle verwechselt wird. Äußere Grenze kommt separat aus blockedAreaOutline. */
.hive-obj.type-blocked {
  background: var(--danger-bg); border: 1px solid var(--danger);
  background-image: repeating-linear-gradient(45deg, var(--danger) 0 2px, transparent 2px 6px);
}
.hive-obj.search-match { outline: 3px solid var(--accent); animation: hive-pulse 1s infinite; }
.hive-obj.dragging { opacity: .55; }
@keyframes hive-pulse { 0%,100%{ outline-color: var(--accent); } 50%{ outline-color: transparent; } }

/* Farb-Leiste (5 Swatches + "keine Farbe"): ursprünglich KvK-Map-only, jetzt
   hierher verschoben (V-map-textfields), weil Hive sie ab jetzt ebenfalls für
   den Textfeld-Farbwähler braucht (siehe hive.js openTextFieldModal). */
.kvk-color-bar { display: flex; gap: 6px; align-items: center; }
.kvk-swatch {
  width: 28px; height: 28px; border-radius: 50%; border: 2px solid var(--border);
  cursor: pointer; padding: 0; flex-shrink: 0;
}
.kvk-swatch.active { border-color: var(--text); box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--text); }
.kvk-swatch[data-color="red"]    { background: var(--zone-red); }
.kvk-swatch[data-color="blue"]   { background: var(--zone-blue); }
.kvk-swatch[data-color="green"]  { background: var(--zone-green); }
.kvk-swatch[data-color="orange"] { background: var(--zone-orange); }
.kvk-swatch[data-color="purple"] { background: var(--zone-purple); }
.kvk-swatch[data-color=""] {
  background: repeating-linear-gradient(45deg, var(--surface-3) 0 4px, var(--surface) 4px 8px);
}

/* Freie Textfelder (KvK-Map + Hive), siehe docs/superpowers/specs/2026-08-21-
   map-textfields-design.md. Liegen optisch ÜBER allen anderen Kartenobjekten
   (spätere DOM-Position in renderGrid genügt, kein eigener z-index nötig).
   .hive-obj liefert bereits Basis-Optik (Flex-Zentrierung, Radius, Cursor,
   Zoom-relative Schriftgröße) -- ohne .zc-*-Klasse bleibt der Hintergrund
   transparent ("keine Farbe"), kein eigenes Default-Styling nötig. */
.map-textfield.zc-red    { background: color-mix(in srgb, var(--zone-red) 24%, transparent); border: 1px solid var(--zone-red); }
.map-textfield.zc-blue   { background: color-mix(in srgb, var(--zone-blue) 24%, transparent); border: 1px solid var(--zone-blue); }
.map-textfield.zc-green  { background: color-mix(in srgb, var(--zone-green) 24%, transparent); border: 1px solid var(--zone-green); }
.map-textfield.zc-orange { background: color-mix(in srgb, var(--zone-orange) 24%, transparent); border: 1px solid var(--zone-orange); }
.map-textfield.zc-purple { background: color-mix(in srgb, var(--zone-purple) 24%, transparent); border: 1px solid var(--zone-purple); }

/* Gegenrotation wie bei .hive-obj-stack/.kvk-obj-stack: Default ("horizontal")
   steht aufrecht. .tf-diagonal lässt die Gegenrotation bewusst weg, der Text
   folgt dann der 45°-Diagonale des Grids selbst -- kein freies Drehen, nur
   dieser eine Schalter (siehe kvkmap.js/hive.js openTextFieldModal). */
.tf-stack { transform: rotate(-45deg); display: flex; align-items: center; justify-content: center; pointer-events: none; width: 100%; }
.map-textfield.tf-diagonal .tf-stack { transform: none; }
.tf-text { font-weight: 700; color: var(--text); text-align: center; font-size: calc(1em * var(--name-scale, 1)); }
.map-textfield.tf-fit .tf-text { white-space: nowrap; }
.map-textfield.tf-wrap .tf-text { white-space: normal; word-break: break-word; }

/* Während irgendein anderes Objekt gezogen wird, sind Textfelder klick-/greif-
   durchlässig (siehe mapView.js beginObjectDrag/endObjectDrag) -- die
   Zielzellen-Erkennung "sieht" so durch sie hindurch zum Grid darunter. Im
   Ruhezustand sind Textfelder ganz normal klickbar/ziehbar. */
.dragging-object .map-textfield { pointer-events: none; }

/* In Ansicht/öffentlich haben Textfelder keine Interaktion (kein Klick-Handler
   gebunden, siehe renderGrid()) -- ohne pointer-events:none würden sie trotzdem
   Klicks auf Städte/Spieler darunter abfangen (kein Effekt, blockiert nur). */
.map-textfield.tf-passive { pointer-events: none; cursor: default; }

.hive-popover {
  position: fixed; z-index: 120; transform: translate(-50%, -110%);
  background: var(--surface); border: 1px solid var(--border-soft); border-radius: var(--r-sm);
  box-shadow: var(--shadow); padding: 8px 12px; font-size: .82rem; white-space: nowrap;
}

.unplaced-list { display: flex; flex-wrap: wrap; gap: 6px; }
.unplaced-chip { display: flex; align-items: center; gap: 6px; }

/* ---- Fallen-Zuordnung: EIN dezenter Regler statt Falle-1/Falle-2/Split-Kästchen.
   Linie im Ton der ID-Spalte (--text-faint), der Punkt im Ton des Namens (--text) --
   bewusst KEINE Akzentfarbe, das soll optisch zurückhaltend bleiben. Passt in eine
   normale Tabellenzeile (die Höhe kommt weiterhin von den --tap-Textfeldern daneben). */
.hp-trap-cell { min-width: 128px; }
.trap-slider { display: flex; flex-direction: column; align-items: center; gap: 3px; }
.trap-slider-label { font-size: .68rem; font-weight: 700; line-height: 1.1; white-space: nowrap; min-height: 1.1em; color: var(--text); }
.trap-slider-label.is-ratio { font-size: .62rem; font-weight: 600; color: var(--text-dim); }
.trap-slider-label.is-unset { color: var(--text-faint); font-style: italic; font-weight: 400; }

.trap-slider-track { position: relative; width: 100px; height: 22px; display: flex; align-items: center; justify-content: space-between; }
.trap-slider-track::before {
  content: ''; position: absolute; left: 0; right: 0; top: 50%; height: 1px;
  background: var(--text-faint); transform: translateY(-50%); pointer-events: none;
}
.trap-tick { position: relative; width: 1.5px; border-radius: 1px; background: var(--text-faint); pointer-events: none; }
.trap-tick-end { height: 14px; }
.trap-tick-mid { height: 10px; }
.trap-tick-q { height: 7px; }

/* Überschreibt components.css' generische Formularfeld-Regel
   (input:not([type=checkbox]):not([type=radio])), die sonst min-height:var(--tap)
   und Padding erzwingt -- ein Range-Input braucht das nicht. */
input[type="range"].trap-range {
  position: absolute; inset: 0; width: 100%; height: 22px; margin: 0; padding: 0; min-height: 0;
  background: transparent; cursor: grab; -webkit-appearance: none; appearance: none;
  /* Wert 100 (= volle Falle 1, siehe bear_trap_ratio) soll LINKS liegen, 0 (Falle 2)
     RECHTS -- ein <input type="range"> zeigt min immer links/max rechts. direction:rtl
     spiegelt nur die Anzeige-/Zeigerichtung; der gespeicherte Wert (0-100) bleibt exakt
     wie in der DB/hiveOptimize.js definiert unverändert. */
  direction: rtl;
}
input[type="range"].trap-range::-webkit-slider-runnable-track { height: 22px; background: transparent; }
input[type="range"].trap-range::-moz-range-track { height: 22px; background: transparent; border: none; }
input[type="range"].trap-range::-webkit-slider-thumb {
  -webkit-appearance: none; width: 8px; height: 15px; border-radius: 50%;
  background: var(--text); border: none; margin-top: 4px; cursor: grab;
}
input[type="range"].trap-range::-moz-range-thumb { width: 8px; height: 15px; border-radius: 50%; background: var(--text); border: none; cursor: grab; }
input[type="range"].trap-range:active::-webkit-slider-thumb { cursor: grabbing; }

.power-table td, .power-table th { text-align: right; }
.power-table td:first-child, .power-table th:first-child { text-align: left; }
.power-metric-badge {
  display: inline-flex; align-items: center; gap: 4px; padding: 4px 10px; border-radius: 999px;
  font-size: .8rem; font-weight: 700;
}
.power-metric-badge.metric-power { color: var(--amber); background: var(--amber-bg); }
.power-metric-badge.metric-bear { color: var(--brown); background: var(--brown-bg); }
.hint.metric-power { color: var(--amber); }
.hint.metric-bear { color: var(--brown); }
.btn.metric-power { border-color: var(--amber); color: var(--amber); }
.btn.metric-bear { border-color: var(--brown); color: var(--brown); }

.hint { color: var(--text-dim); font-size: .85rem; }
.suggestion-regression { border: 1px solid var(--danger); border-radius: var(--r-sm); padding: 4px 8px; background: var(--danger-bg); }

/* Nachrichtenzeilen sind der Sonderfall, den .list-row-main ausdruecklich NICHT
   abdeckt (siehe components.css: "NICHT fuer Inhalte mit Freitext/variabler
   Struktur"): drei Stockwerke statt Name+Meta nebeneinander. Deshalb hier
   umgestellt auf gestapelt, mit vollstaendig sichtbarem Text -- abgeschnitten
   waere eine Nachricht wertlos, kopiert wird genau das, was dasteht. */
/* Der durchsichtige Balken sitzt auf JEDER Zeile, nicht nur auf den
   hervorgehobenen: sonst ruecken markierte Zeilen um 3px ein und die Liste
   zappelt, sobald ein Termin von "morgen" auf "heute" wechselt.
   border-inline-start statt border-left, damit der Balken auf Arabisch (rtl)
   auf der richtigen Seite steht. */
.hive-msg-row { align-items: flex-start; padding: 8px 10px; border-inline-start: 3px solid transparent; }

/* Eine Farbe in zwei Staerken statt zweier Farben: das liest sich als Skala
   der Dringlichkeit und nicht als zwei unabhaengige Kategorien. Bernstein und
   nicht das Violett der Knoepfe -- eine violette Zeile saehe anklickbar aus --
   und nicht Rot, das als Warnung zu laut waere fuer etwas Planmaessiges. */
.hive-msg-row.hive-msg-today {
  border-inline-start-color: var(--amber);
  background: var(--amber-bg);
}
.hive-msg-row.hive-msg-today .list-row-meta { color: var(--amber); font-weight: 600; }

.hive-msg-row.hive-msg-tomorrow {
  border-inline-start-color: color-mix(in srgb, var(--amber) 45%, transparent);
}
.hive-msg-row.hive-msg-tomorrow .list-row-meta { color: var(--amber); }
.hive-msg-row .list-row-main {
  flex-direction: column; align-items: flex-start; gap: 3px; overflow: visible;
}
.hive-msg-row .list-row-main strong,
.hive-msg-row .list-row-meta {
  white-space: normal; overflow: visible; text-overflow: clip; overflow-wrap: anywhere;
}
.hive-msg-body { white-space: pre-wrap; overflow-wrap: anywhere; }

/* Das aus {{today}} eingesetzte Datum. Dezent gepunktet unterstrichen: im
   Listenbild soll erkennbar sein, welche Stelle sich von selbst mitzieht --
   ohne dass es wie ein Link aussieht. In der Zwischenablage landet ohnehin
   nur der nackte Text ohne diese Auszeichnung. */
.hive-msg-token { border-bottom: 1px dotted currentColor; }

/* Eingekreistes i neben den Einfuege-Knoepfen. Bewusst klein und rund: es steht
   in einer Reihe mit zwei Textknoepfen und soll die nicht ueberstrahlen. */
.hive-info-btn {
  border-radius: 50%; width: var(--tap-dense); min-width: var(--tap-dense);
  height: var(--tap-dense); font-style: italic; font-weight: 700;
  /* Ans Zeilenende: bricht die Reihe auf schmalen Geraeten um, steht das i
     rechts fuer sich statt an einem der beiden Knoepfe zu kleben. */
  margin-inline-start: auto;
}
.hive-token-example { margin-top: 6px; }
.hive-token-example code {
  background: var(--bg-soft, rgba(127,127,127,.15)); padding: 1px 6px; border-radius: 4px;
}
/* Ein {{day}} ohne Termin bleibt stehen und wird als Fehler ausgezeichnet --
   sichtbar, bevor die Nachricht kopiert und an die Allianz geschickt wird. */
.hive-msg-token-missing { color: var(--danger, #d9534f); border-bottom: 1px dotted currentColor; }

/* ---- Nachrichten-Editor: kompakter als das Standardformular ----
   Alles unter #form-hive-msg gekapselt, damit die uebrigen Formulare der
   Plattform ihre gewohnten Abstaende behalten. Ziel ist Platz fuer das
   Nachrichtenfeld: ohne Scrollen sollen Kopf und Text zusammen sichtbar sein. */
#form-hive-msg { gap: 7px; }

/* Der Editor streckt sich ueber die volle erlaubte Hoehe, und das
   Nachrichtenfeld bekommt allen Platz, der nach Kopf und Knoepfen uebrig
   bleibt -- es ist der eigentliche Arbeitsbereich. Ohne feste Hoehe am Kasten
   koennte das Feld nicht wachsen: Flex verteilt nur Platz, der auch da ist. */
.hive-msg-modal { height: 90vh; display: flex; flex-direction: column; }
.hive-msg-modal #form-hive-msg { flex: 1 1 auto; min-height: 0; }
/* Beschriftung, Textfeld und die Einfuege-Knoepfe liegen im selben Block, damit
   der ganze Block waechst. Ohne eigenen Abstand klebten Textfeld und Knopfzeile
   direkt aneinander -- der Block hat als Flex-Spalte keinen von aussen. */
.hive-msg-body-field { display: flex; flex-direction: column; gap: 7px; }
.hive-msg-modal .hive-msg-body-field { flex: 1 1 auto; min-height: 0; }
.hive-msg-modal #msg-body { flex: 1 1 auto; min-height: 80px; }

/* Das X von openModal steht absolut oben rechts und liegt damit in der Zeile
   mit Notiz/Termin. Der Platz rechts haelt die beiden Knoepfe davon frei, und
   im vollen Textton ist es deutlich zu sehen -- es ist hier der einzige Weg
   raus ausser Speichern. */
.hive-msg-modal #msg-kind-toggle { padding-inline-end: 40px; }
.hive-msg-modal .modal-close-x { color: var(--text); font-size: 1.25rem; }

/* Das freie Intervall-Feld sitzt als fuenfter Knopf in derselben Zeile und ist
   genauso gross wie die festen Werte. Die Pfeilchen des Zahlenfeldes wuerden
   auf dieser Breite alles zerdruecken. */
/* Alle Elemente der Intervall-Zeile auf gleiche Hoehe strecken. Die globale
   .row zentriert senkrecht; dabei sass das Eingabefeld ein paar Pixel tiefer
   als die Knoepfe, weil ein input und ein button unterschiedliche Eigenhoehen
   mitbringen. */
#msg-interval-chips { align-items: stretch; }
/* Knopf und Eingabefeld bringen unterschiedliche Eigenhoehen mit (45 gegen 38),
   und align-items reicht nicht, um ein Formularfeld auf Knopfhoehe zu ziehen.
   Beide bekommen deshalb dieselbe feste Hoehe -- die Zeile steht damit gerade
   und ist nebenbei 7px flacher. */
#msg-interval-chips .hv-msg-int,
#msg-interval-chips #msg-interval-custom { height: var(--tap); min-height: var(--tap); }
#msg-interval-custom {
  flex: 0 0 auto; align-self: stretch; width: 62px; min-width: 0; text-align: center; padding-inline: 4px;
  /* --tap (38px) wie die Knoepfe daneben, NICHT --tap-dense (30px): sonst sitzt
     das Feld 8px tiefer als die Reihe und die Zeile wirkt schief. */
  min-height: var(--tap);
}
#msg-interval-custom::-webkit-outer-spin-button,
#msg-interval-custom::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
#msg-interval-custom { -moz-appearance: textfield; appearance: textfield; }

/* Das Datumsfeld war auf schmalen Geraeten breiter als alle anderen Felder:
   input[type=date] bringt durch den eingebauten Kalenderknopf eine eigene
   Mindestbreite mit, die width:100% nicht unterschreiten darf. */
#msg-date { min-width: 0; }
/* .field bringt von Haus aus 10px Abstand nach unten mit; zusammen mit dem
   Flex-Abstand des Formulars waren das 18px pro Block. Den Abstand macht jetzt
   ausschliesslich der Flex-Abstand, damit er ueberall gleich gross ist. */
#form-hive-msg .field { margin-bottom: 0; }

/* Das Nachrichtenfeld ist der eigentliche Arbeitsbereich und war mit den
   globalen 68px zu klein. Waechst mit der Fensterhoehe, bleibt aber auf kleinen
   Geraeten begrenzt, damit die Knoepfe darunter erreichbar bleiben. */
#msg-body { min-height: clamp(150px, 30vh, 280px); }

/* Speichern und Loeschen nebeneinander statt uebereinander -- spart eine ganze
   Zeile Hoehe. Speichern bekommt doppelte Breite: es ist die haeufige Aktion,
   und der groessere Abstand zum Loeschen macht einen Fehlgriff unwahrscheinlicher
   (die Rueckfrage bleibt zusaetzlich bestehen). Ohne Loeschen-Knopf beim Anlegen
   fuellt Speichern die Zeile von allein. */
/* Speichern nimmt die Zeile, Loeschen schrumpft auf ein Symbol: der Eimer sagt
   es kuerzer als das Wort, und der gewonnene Platz geht ans Nachrichtenfeld.
   Die Rueckfrage vor dem Loeschen bleibt bestehen. */
.hive-msg-actions { flex-wrap: nowrap; margin-top: 2px; flex: 0 0 auto; }
.hive-msg-actions .btn { flex: 1 1 auto; }
/* Innerhalb der Zeile qualifiziert, sonst gewinnt die allgemeinere Regel
   ".hive-msg-actions .btn" darueber und der Eimer dehnt sich mit. */
.hive-msg-actions .hive-msg-del { flex: 0 0 auto; width: 52px; padding: 0; font-size: 1.1rem; }