/*
 * XT-Viewer UI
 * ------------
 * Bewusst eigenstaendiges, lokal ausgeliefertes Stylesheet ohne Bootstrap,
 * CDN, Webfont oder sonstige externe Abhaengigkeit. Farbwelt, Abstaende und
 * Controls orientieren sich an Bootstrap 5, damit die Oberflaeche technisch,
 * ruhig und langfristig wartbar bleibt.
 */

:root {
  --xtv-body-bg: #f4f6f8;
  --xtv-surface: #ffffff;
  --xtv-surface-soft: #f8f9fa;
  --xtv-border: #ced4da;
  --xtv-border-soft: #dee2e6;
  --xtv-text: #212529;
  --xtv-muted: #6c757d;
  --xtv-primary: #0d6efd;
  --xtv-primary-dark: #0b5ed7;
  --xtv-primary-soft: #e7f1ff;
  --xtv-danger: #b02a37;
  --xtv-success: #198754;
  --xtv-success-dark: #157347;
  --xtv-info: #0b7285;
  --xtv-info-soft: #e7f5f8;
  --xtv-purple: #6f42c1;
  --xtv-purple-soft: #f0eaf9;
  --xtv-secondary: #5c636a;
  --xtv-secondary-soft: #f1f3f5;
  --xtv-radius: 0.35rem;
  --xtv-shadow-sm: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
  --xtv-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
}

html,
body {
  margin: 0;
  min-height: 100%;
  background: var(--xtv-body-bg);
  color: var(--xtv-text);
  font-family: var(--xtv-font);
  font-size: 14px;
}

* {
  box-sizing: border-box;
}

button,
input,
select {
  font: inherit;
}

button {
  min-height: 30px;
  padding: 0.35rem 0.7rem;
  border: 1px solid var(--xtv-border);
  border-radius: var(--xtv-radius);
  background: var(--xtv-surface);
  color: var(--xtv-text);
  cursor: pointer;
  transition:
    background-color 0.12s ease,
    border-color 0.12s ease,
    box-shadow 0.12s ease,
    opacity 0.12s ease;
}

button:hover:not(:disabled) {
  background: #eef2f5;
  border-color: #adb5bd;
}

button:focus-visible,
input:focus-visible,
select:focus-visible {
  outline: 0;
  border-color: #86b7fe;
  box-shadow: 0 0 0 0.2rem rgba(13, 110, 253, 0.2);
}

button:disabled {
  cursor: default;
  opacity: 0.5;
}

input,
select {
  min-height: 30px;
  padding: 0.3rem 0.5rem;
  border: 1px solid var(--xtv-border);
  border-radius: var(--xtv-radius);
  background: var(--xtv-surface);
  color: var(--xtv-text);
}

/* Unteres Informationspanel: Pegelstatus und aktive Zeitreihen. */
#WebPanelNavigation {
  background: var(--xtv-surface);
  border: 1px solid var(--xtv-border-soft);
  border-radius: var(--xtv-radius);
  box-shadow: var(--xtv-shadow-sm);
  overflow: hidden;
  min-height: 110px !important;
}

#lblStationTitle {
  color: var(--xtv-text);
  font-size: 15px;
  font-weight: 600;
}

#lblViewerStatus {
  color: var(--xtv-muted);
  font-size: 12px;
}

#lblSeriesTitle {
  color: var(--xtv-muted);
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.035em;
}

#WebPanelLegend {
  border: 1px solid var(--xtv-border-soft);
  border-radius: var(--xtv-radius);
  background: var(--xtv-surface-soft);
  overflow: hidden;
  min-height: 62px !important;
}

/* Dynamisch erzeugte Zeitreihenbuttons. Die Serienfarbe wird weiterhin
   absichtlich inline vom Viewer gesetzt; CSS definiert Form und Typografie. */
#WebPanelLegend button,
#WebPanelLegend input[type="button"] {
  overflow: hidden;
  padding: 0.35rem 0.65rem;
  border: 1px solid rgba(0, 0, 0, 0.18);
  border-radius: var(--xtv-radius);
  box-shadow: none;
  color: #fff;
  font-size: 12px;
  font-weight: 500;
  text-align: left;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Oberes Bedienpanel: alle aktiven Viewersteuerungen in einer Zeile. */
#WebPanelBottom {
  position: relative;
  background: var(--xtv-surface);
  border: 1px solid var(--xtv-border-soft);
  border-radius: var(--xtv-radius);
  box-shadow: var(--xtv-shadow-sm);
  overflow: hidden;
}

#btnBack {
  background: var(--xtv-success);
  border-color: var(--xtv-success);
  color: #fff;
  font-weight: 600;
}

#btnBack:hover:not(:disabled) {
  background: var(--xtv-success-dark);
  border-color: var(--xtv-success-dark);
  color: #fff;
}

#btnPrevious,
#btnNext,
#btnJumpDate,
#btnJumpWeek,
#btnCoordinateSystem,
#btnMultiSheet,
#btnCurveMode {
  padding-left: 0;
  padding-right: 0;
  font-size: 16px;
  font-weight: 700;
}

#btnPrevious,
#btnNext {
  background: var(--xtv-primary);
  border-color: var(--xtv-primary);
  color: #fff;
}

#btnPrevious:hover:not(:disabled),
#btnNext:hover:not(:disabled) {
  background: var(--xtv-primary-dark);
  border-color: var(--xtv-primary-dark);
}

#btnJumpDate,
#btnJumpWeek {
  background: #e8f5ee;
  border-color: #a3cfbb;
  color: var(--xtv-success);
}

#btnJumpDate:hover:not(:disabled),
#btnJumpWeek:hover:not(:disabled) {
  background: var(--xtv-success);
  border-color: var(--xtv-success-dark);
  color: #fff;
}

#btnCoordinateSystem {
  background: var(--xtv-info-soft);
  border-color: #9eeaf9;
  color: var(--xtv-info);
}

#btnCoordinateSystem:hover:not(:disabled) {
  background: #cff4fc;
  border-color: #6edff6;
}

#btnMultiSheet {
  background: var(--xtv-purple-soft);
  border-color: #c5b3e6;
  color: var(--xtv-purple);
}

#btnMultiSheet:hover:not(:disabled) {
  background: #e2d9f3;
  border-color: #a98eda;
}


#WebPanelTools {
  background: var(--xtv-surface-soft);
  border: 1px solid var(--xtv-border-soft);
  border-radius: var(--xtv-radius);
  overflow: hidden;
}

#WebPanelTools button,
#WebPanelTools input[type="button"] {
  box-sizing: border-box;
  padding: 0 !important;
}

#lblJumpDate,
#lblJumpWeek,
#lblJumpBarcode {
  color: var(--xtv-muted);
  font-size: 12px;
}


#WebScrollBoxViewer {
  background: #e9ecef;
  border: 0;
}

/* Startseite */
#btnOpenViewer {
  background: var(--xtv-primary);
  border-color: var(--xtv-primary);
  color: #fff;
  font-weight: 600;
}

#btnOpenViewer:hover:not(:disabled) {
  background: var(--xtv-primary-dark);
  border-color: var(--xtv-primary-dark);
}

#lblStatus {
  color: var(--xtv-muted);
  font-size: 12px;
}

#WebCheckListBoxSeries,
#WebComboBoxStation {
  border-radius: var(--xtv-radius);
}

/* Keine externen Icons: Buttonsymbole sind Unicode-Zeichen aus dem normalen
   Systemfont. Dadurch gibt es auch nach Jahren keine CDN-/Font-Abhaengigkeit. */

/* Kompakte untere Bedienleiste: farbliche Akzente helfen bei schneller
   Orientierung, ohne die technische Oberflaeche bunt oder verspielt wirken
   zu lassen. Symbole erben jeweils die definierte Buttonfarbe. */
#WebPanelBottom button {
  box-shadow: none;
}

#WebPanelTools {
  padding: 0;
}

#btnCurveMode {
  background: #fff3e6;
  border-color: #ffc078;
  color: #c05600;
}

#btnCurveMode:hover:not(:disabled) {
  background: #ffe8cc;
  border-color: #ffa94d;
}

/* Einheitliche Geometrie der aktiven Controls. */
#WebPanelBottom > button,
#WebPanelBottom > input,
#WebPanelBottom > select {
  box-sizing: border-box;
  min-height: 28px !important;
  height: 28px !important;
  border-radius: var(--xtv-radius);
}

#lblJumpDate,
#lblJumpWeek,
#lblJumpBarcode {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  height: 28px !important;
  line-height: 28px !important;
  text-align: center !important;
  vertical-align: middle !important;
  padding: 0 !important;
  margin: 0 !important;
}

#edtJumpDate,
#edtJumpWeek,
#edtJumpBarcode {
  text-align: center;
}


#WebPanelLegend button,
#WebPanelLegend input[type="button"] {
  border-radius: calc(var(--xtv-radius) - 0.05rem);
}

/* Die aktiven Zeitreihen sitzen mit gleichem Innenabstand im Legendenrahmen. */
#WebPanelLegend {
  padding: 0;
}

/* Blaetternavigation als eigene Toolbar-Sektion. */
#btnPrevious,
#btnNext {
  min-width: 72px !important;
  width: 72px !important;
  height: 28px !important;
}



/* ==========================================================================
   TMS-Komponentenklassen nach dem bewaehrten ROMS-Muster
   ========================================================================== */

/* Entspricht dem ROMS-Card-Prinzip: die Klasse sitzt direkt per
   ElementClassName am TWebPanel. Dadurch landet border-radius am tatsaechlichen
   Panel-DOM-Element und nicht nur an einem zufaelligen Kindknoten. */
.xtv-frame {
  background: #fff !important;
  border: 1px solid #e3e6f0 !important;
  border-radius: var(--xtv-radius) !important;
  box-shadow: 0 .125rem .25rem rgba(0,0,0,.075) !important;
  overflow: hidden !important;
}

.xtv-frame-body,
.xtv-series-frame-body,
.xtv-tool-frame-body {
  border-radius: inherit !important;
  overflow: hidden !important;
  background: transparent !important;
}

.xtv-series-frame {
  background: #f8f9fc !important;
  border-radius: var(--xtv-radius) !important;
}

.xtv-series-frame-body {
  background: #f8f9fc !important;
}

/* Zeitreihen bleiben in einer einzigen horizontalen Reihe. Bei schmalen
   Viewports wird horizontal gescrollt statt in eine zweite Zeile umzubrechen. */
.xtv-series-frame,
.xtv-series-frame-body {
  overflow-x: auto !important;
  overflow-y: hidden !important;
  white-space: nowrap !important;
}

/* Auch die obere Bedienleiste ist bewusst einzeilig. Auf kleinen Viewports
   bleibt die komplette Werkzeugleiste per horizontalem Scroll erreichbar. */
.xtv-control-frame,
.xtv-control-frame .xtv-frame-body {
  overflow-x: auto !important;
  overflow-y: hidden !important;
  white-space: nowrap !important;
}

/* Dynamische Serienbuttons erhalten die Klasse direkt beim Erzeugen. */
.xtv-series-btn {
  height: 28px !important;
  min-height: 28px !important;
  border-radius: var(--xtv-radius) !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

/* Toolgruppe: gleicher sichtbarer Rand rund um die drei quadratischen Buttons. */
.xtv-tool-frame {
  background: #f8f9fc !important;
  border-radius: var(--xtv-radius) !important;
}

.xtv-tool-btn {
  box-sizing: border-box !important;
  width: 20px !important;
  min-width: 20px !important;
  height: 20px !important;
  min-height: 20px !important;
  padding: 0 !important;
  line-height: 18px !important;
  text-align: center !important;
  border-radius: var(--xtv-radius) !important;
  font-size: 12px !important;
}

/* ROMS nutzt fuer vertikale Zentrierung eine Flex-Hilfsklasse.
   Hier wird dasselbe Prinzip direkt auf Zoom/Datum/KW angewendet. */
.xtv-control-label {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  height: 28px !important;
  min-height: 28px !important;
  padding: 0 !important;
  margin: 0 !important;
  line-height: normal !important;
  text-align: center !important;
  vertical-align: middle !important;
}

.xtv-input-control,
.xtv-action-btn,
.xtv-main-action-btn,
.xtv-nav-btn {
  box-sizing: border-box !important;
  height: 28px !important;
  min-height: 28px !important;
  border-radius: var(--xtv-radius) !important;
}

.xtv-main-action-btn {
  background-color: #198754 !important;
  border-color: #198754 !important;
  color: #fff !important;
}

.xtv-main-action-btn:hover:not(:disabled) {
  background-color: #157347 !important;
  border-color: #146c43 !important;
}

.xtv-nav-btn {
  width: 72px !important;
  min-width: 72px !important;
  background-color: #0d6efd !important;
  border-color: #0d6efd !important;
  color: #fff !important;
}


/* ==========================================================================
   Windows-Toolbar-artige Sektionen
   ========================================================================== */

/* Keine "Box" um jede Gruppe: nur senkrechte Trenner ueber die volle Hoehe
   des Bedienpanels. Der Abstand entsteht durch die im DFM gesetzten
   Zwischenraeume. */
.xtv-toolbar-section {
  height: 46px !important;
  min-height: 46px !important;
  background: transparent !important;
  border-top: 0 !important;
  border-bottom: 0 !important;
  border-left: 1px solid #d1d3e2 !important;
  border-right: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  overflow: visible !important;
}

.xtv-toolbar-section-body {
  height: 100% !important;
  min-height: 100% !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  overflow: visible !important;
}

/* Die drei Werkzeugbuttons sind jetzt exakt so hoch wie die restlichen
   Toolbar-Controls und wegen gleicher Breite quadratisch. */
.xtv-tool-btn {
  box-sizing: border-box !important;
  width: 28px !important;
  min-width: 28px !important;
  height: 28px !important;
  min-height: 28px !important;
  padding: 0 !important;
  line-height: 26px !important;
  text-align: center !important;
  border-radius: var(--xtv-radius) !important;
  font-size: 14px !important;
}

/* Die Sektionen selbst sollen bewusst keine abgerundete Umrandung besitzen:
   die einzigen sichtbaren Kanten sind die vertikalen Toolbar-Trenner. */
.xtv-tool-section,
.xtv-zoom-section,
.xtv-jump-section {
  border-radius: 0 !important;
}

.xtv-tool-section {
  border-left: 0 !important;
}


/* Eigene Toolbar-Icons statt fontabhaengiger Unicode-Symbole.
   Sie erben currentColor und reagieren damit automatisch auf aktiv/inaktiv. */
.xtv-grid-icon {
  position: relative !important;
  font-size: 0 !important;
}

/* Raster: bewusst gross und klar mit genau zwei senkrechten und zwei
   waagrechten Linien. */
.xtv-grid-icon::before {
  content: "" !important;
  position: absolute !important;
  left: 5px !important;
  top: 5px !important;
  width: 16px !important;
  height: 16px !important;
  background:
    linear-gradient(
      to right,
      transparent 0,
      transparent 29%,
      currentColor 29%,
      currentColor 35%,
      transparent 35%,
      transparent 65%,
      currentColor 65%,
      currentColor 71%,
      transparent 71%,
      transparent 100%
    ),
    linear-gradient(
      to bottom,
      transparent 0,
      transparent 29%,
      currentColor 29%,
      currentColor 35%,
      transparent 35%,
      transparent 65%,
      currentColor 65%,
      currentColor 71%,
      transparent 71%,
      transparent 100%
    ) !important;
}

/* Mehrblatt: ein einzelnes schmales Symbol im nativen Buttontext.
   Anders als ::before/::after auf TWebButton ist das in allen von TMS
   erzeugten DOM-Varianten positionsstabil. */
.xtv-multisheet-glyph {
  font-size: 16px !important;
  line-height: 26px !important;
  text-align: center !important;
  letter-spacing: 0 !important;
  padding: 0 !important;
}


/* ==========================================================================
   ExtendedTools: Masterreihe, Uebergangspruefung und Lupe
   ========================================================================== */

.xtv-magnifier-btn {
  width: 28px !important;
  min-width: 28px !important;
  font-size: 18px !important;
  line-height: 26px !important;
  text-align: center !important;
}

.xtv-zoom-toggle-btn {
  width: 52px !important;
  min-width: 52px !important;
  font-size: 11px !important;
}

/* Master und Sichtbarkeit bilden optisch genau einen Legendeneintrag. */
.xtv-series-group {
  position: absolute !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: var(--xtv-radius) !important;
  box-shadow: none !important;
  overflow: hidden !important;
}

.xtv-series-group > div,
.xtv-series-group > span {
  border-radius: inherit !important;
}

.xtv-master-btn {
  box-sizing: border-box !important;
  height: 28px !important;
  min-height: 28px !important;
  padding: 0 !important;
  border-radius: var(--xtv-radius) 0 0 var(--xtv-radius) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  text-align: center !important;
  z-index: 2 !important;
}

.xtv-series-group .xtv-series-btn {
  border-left-width: 0 !important;
  border-radius: 0 var(--xtv-radius) var(--xtv-radius) 0 !important;
  text-align: left !important;
}

/* Masterstatus ist unabhängig von der Kurvensichtbarkeit.
   Die Lupe folgt nur einer aktivierten Masterreihe. */
.xtv-master-btn {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}
.xtv-master-btn::before {
  content: "";
  display: block;
  width: 18px;
  height: 18px;
  background-position: center;
  background-repeat: no-repeat;
  background-size: 18px 18px;
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%2393a4b6%22%20stroke-width%3D%221.4%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M10.6%205.1A11%2011%200%200%201%2012%205c6.4%200%2010%207%2010%207a16%2016%200%200%201-2.5%203.4%22%2F%3E%3Cpath%20d%3D%22M6.5%206.5A16%2016%200%200%200%202%2012s3.6%207%2010%207a11%2011%200%200%200%205.5-1.4%22%2F%3E%3Cpath%20d%3D%22M10.6%2010.6a2%202%200%200%200%202.8%202.8%22%2F%3E%3Cpath%20d%3D%22M3%203l18%2018%22%2F%3E%3C%2Fsvg%3E");
}
.xtv-master-btn[data-master="active"]::before {
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23ffffff%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M2%2012s3.6-7%2010-7%2010%207%2010%207-3.6%207-10%207S2%2012%202%2012Z%22%2F%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%223%22%2F%3E%3C%2Fsvg%3E");
}
.xtv-master-btn[data-master="inactive"]::before {
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%2393a4b6%22%20stroke-width%3D%221.4%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M10.6%205.1A11%2011%200%200%201%2012%205c6.4%200%2010%207%2010%207a16%2016%200%200%201-2.5%203.4%22%2F%3E%3Cpath%20d%3D%22M6.5%206.5A16%2016%200%200%200%202%2012s3.6%207%2010%207a11%2011%200%200%200%205.5-1.4%22%2F%3E%3Cpath%20d%3D%22M10.6%2010.6a2%202%200%200%200%202.8%202.8%22%2F%3E%3Cpath%20d%3D%22M3%203l18%2018%22%2F%3E%3C%2Fsvg%3E");
}

/* Echte SVG-Infografik: nach ElementClassName selektieren, nicht nach
   Designer-Komponentenname (das gerenderte HTML hat keine feste id). */
.xtv-info-toggle-btn {
  box-sizing: border-box !important;
  width: 28px !important;
  min-width: 28px !important;
  height: 28px !important;
  min-height: 28px !important;
  padding: 0 !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  background-size: 23px 23px !important;
}
.xtv-info-toggle-btn,
.xtv-info-toggle-btn[data-info-active="false"] {
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cg%20fill%3D%22%23084298%22%3E%3Ccircle%20cx%3D%2215.8%22%20cy%3D%224.35%22%20r%3D%222.45%22%2F%3E%3Cpath%20d%3D%22M13.2%209.4c-1.6.05-3.1.5-4.35%201.2l-.55%201.4%201.6-.38c.55-.1.8.2.65.77l-2.35%206.15c-.73%201.92.3%202.85%202.18%202.5%201.53-.29%202.88-1.22%203.76-2.43l.33-.9c-.94.67-1.55.88-1.85.61-.19-.17-.2-.45-.07-.79l2.49-6.48c.4-1.05-.15-1.68-1.84-1.65Z%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E") !important;
}
.xtv-info-toggle-btn[data-info-active="true"] {
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cg%20fill%3D%22%23ffffff%22%3E%3Ccircle%20cx%3D%2215.8%22%20cy%3D%224.35%22%20r%3D%222.45%22%2F%3E%3Cpath%20d%3D%22M13.2%209.4c-1.6.05-3.1.5-4.35%201.2l-.55%201.4%201.6-.38c.55-.1.8.2.65.77l-2.35%206.15c-.73%201.92.3%202.85%202.18%202.5%201.53-.29%202.88-1.22%203.76-2.43l.33-.9c-.94.67-1.55.88-1.85.61-.19-.17-.2-.45-.07-.79l2.49-6.48c.4-1.05-.15-1.68-1.84-1.65Z%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E") !important;
}

.xtv-info-close-btn {
  z-index: 2 !important;
  box-sizing: border-box !important;
  border: 0 !important;
  border-radius: 4px !important;
  background: #eef2f6 !important;
  color: #667788 !important;
  padding: 0 !important;
  font-size: 17px !important;
  font-weight: 500 !important;
  line-height: 23px !important;
  text-align: center !important;
}
.xtv-info-close-btn:hover {
  background: #dce7f1 !important;
  color: #212529 !important;
}

/* Zweite Toolbarzeile fuer Bogenuebergaenge. */
.xtv-inspect-section {
  border-radius: 0 !important;
}

/* Zwischen Uebergangs- und Sprungsektion nur die linke Begrenzung
   der Sprungsektion zeichnen, damit keine doppelte Trennlinie entsteht. */
.xtv-inspect-section {
  border-right: 0 !important;
}

.xtv-nav-section {
  margin-left: 0 !important;
  border-left: 0 !important;
}

#lblOverlap,
#lblOpacity,
#lblOpacityValue {
  color: var(--xtv-muted);
  font-size: 11px;
}

.xtv-overlap-side-btn,
.xtv-layer-btn {
  box-sizing: border-box !important;
  height: 28px !important;
  min-height: 28px !important;
  padding: 0 0.35rem !important;
  font-size: 11px !important;
  font-weight: 600 !important;
}

.xtv-overlap-side-btn {
  width: 28px !important;
  min-width: 28px !important;
  padding: 0 !important;
}

/* Ebenenreihenfolge nur als kompaktes Symbol (⇅). */
.xtv-layer-btn {
  width: 32px !important;
  min-width: 32px !important;
  padding: 0 !important;
  font-size: 16px !important;
}

.xtv-opacity-slider {
  box-sizing: border-box !important;
  height: 24px !important;
  min-height: 24px !important;
  padding: 0 !important;
  margin: 0 !important;
  accent-color: var(--xtv-purple);
}

.xtv-opacity-value {
  justify-content: flex-end !important;
  font-variant-numeric: tabular-nums;
}

/* Die Toolbar besitzt in ExtendedTools zwei gleich hohe Zeilen. */
#WebPanelBottom {
  min-height: 92px !important;
}

#WebPanelJumpSection,
#WebPanelInspectSection {
  height: 46px !important;
  min-height: 46px !important;
}

/* Schwebende Messwertkarte: beeinflusst niemals die Canvasgroesse. */
.xtv-extrema-panel {
  position: absolute !important;
  z-index: 30 !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  background: rgba(255,255,255,0.97) !important;
  border: 1px solid #ced4da !important;
  border-radius: 6px !important;
  box-shadow: 0 3px 12px rgba(0,0,0,0.16) !important;
  pointer-events: auto;
}
.xtv-extrema-panel span, .xtv-extrema-panel label {
  white-space: pre-line !important;
  line-height: 1.55 !important;
  font-variant-numeric: tabular-nums;
}

/* Ein Maximum kann als Messpunktziel direkt aus dem Overlay angesprungen
   werden. Die transparenten Zeilen belegen keinen Platz im Canvas. */
.xtv-info-max-btn {
  position: absolute !important;
  padding: 0 !important;
  height: 21px !important;
  min-height: 21px !important;
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
  color: #0b5ed7 !important;
  font-size: 13px !important;
  font-weight: 400 !important;
  line-height: 20px !important;
  text-align: left !important;
  text-decoration: underline !important;
  cursor: pointer !important;
  white-space: nowrap !important;
}
.xtv-info-max-btn:hover {
  color: #063970 !important;
  text-decoration: underline !important;
}

/* Alle Zeilen und klickbaren Maxima haben denselben 21px-Rasterabstand.
   Keine CSS-Line-Height-Abweichung zwischen Label und TMS-Button. */
.xtv-extrema-panel .xtv-info-row {
  margin: 0 !important;
  padding: 0 !important;
  height: 21px !important;
  min-height: 21px !important;
  line-height: 21px !important;
  font-size: 13px !important;
  font-weight: 400 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  font-variant-numeric: tabular-nums !important;
}
.xtv-extrema-panel .xtv-info-title {
  font-weight: 600 !important;
  font-size: 13px !important;
  height: 21px !important;
  line-height: 21px !important;
}
.xtv-extrema-panel .xtv-info-max-btn {
  font-family: inherit !important;
  font-size: 13px !important;
  font-weight: 400 !important;
  line-height: 21px !important;
}