@font-face {
  font-family: 'Barlow Semi Condensed';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url('BarlowSemiCondensed-Light.ttf') format('truetype');
}

@font-face {
  font-family: 'Barlow Semi Condensed';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('BarlowSemiCondensed-Bold.ttf') format('truetype');
}

@font-face {
  font-family: 'Barlow Semi Condensed';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url('BarlowSemiCondensed-ExtraBold.ttf') format('truetype');
}

:root {
  --ce-diagram-font-heading: 'Barlow Semi Condensed', sans-serif;
  --ce-diagram-font-body: 'Barlow Semi Condensed', sans-serif;
  --ce-diagram-loader-bg: transparent;
  --ce-diagram-padding: 0;
  --ce-diagram-ruler-color: #000;
  /* Gleiches „Milchglas“ wie Balken-Tooltip (.ce-diagram-tooltip): fixed + body montiert → Backdrop zuverlässiger */
  --ce-glass-bg: rgba(255, 255, 255, 0.72);
  --ce-glass-blur: 10px;
  --ce-glass-border: rgba(255, 255, 255, 0.5);
  --ce-glass-shadow: 0 4px 20px rgba(0, 0, 0, 0.12);
}

.ce-diagram-tooltip {
  position: fixed;
  left: 0; top: 0;
  background: var(--ce-glass-bg);
  backdrop-filter: blur(var(--ce-glass-blur));
  -webkit-backdrop-filter: blur(var(--ce-glass-blur));
  border: 1px solid var(--ce-glass-border);
  border-radius: 12px;
  padding: 1rem 1.25rem;
  max-width: 400px;
  box-shadow: var(--ce-glass-shadow);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: opacity 0.2s ease, transform 0.2s ease;
  pointer-events: none;
  z-index: 2147483647;
  font-family: var(--ce-diagram-font-body);
  font-size: 1.2rem;
  /* Nicht vom Theme (body) erben: Tooltip liegt oft direkt unter body */
  text-align: left;
}

.ce-diagram-wrapper {
  position: relative;
  display: flex;
  flex-direction: column;
  align-self: stretch;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  height: 100%;
  /* Gegen Theme text-align:center — Legende, Toolbar-Labels, Vollbild-Subtree */
  text-align: left;
  /* Kein volles Viewport-min-height: sonst wirkt das Diagramm in schmalen WP-Spalten + Theme-Padding winzig.
     Höhe setzt init.js (calcStageHeight); Fallback nur bis Skript läuft. */
  min-height: 200px;
  padding: var(--ce-diagram-padding);
  box-sizing: border-box;
  background: transparent;
  opacity: 0;
  animation: ce-diagram-wrapper-in 0.75s ease forwards;
  overflow: visible;
  /* Rechter Rand für Titel/Subtitle: .ce-diagram-top-actions sitzt position:absolute oben rechts */
  --ce-header-reserve-top-actions: max(2rem, calc(1rem + 40px + 0.5rem));
}
@media (max-width: 768px) {
  .ce-diagram-wrapper {
    --ce-header-reserve-top-actions: max(2rem, calc(0.75rem + 36px + 0.5rem));
  }
}
@media (max-width: 480px) {
  .ce-diagram-wrapper {
    --ce-header-reserve-top-actions: max(2rem, calc(0.5rem + 32px + 0.5rem));
  }
}
/* When PHP provides an aspect-ratio hint, let it drive the initial height
   instead of the fixed min-height fallback. init.js clears both on first
   calcStageHeight, switching to the computed min-height. */
.ce-diagram-wrapper[data-aspect-hint] {
  height: auto;
  min-height: 0;
}
@keyframes ce-diagram-wrapper-in {
  to { opacity: 1; }
}

.ce-diagram-header {
  box-sizing: border-box;
  padding: 2rem var(--ce-header-reserve-top-actions, max(2rem, calc(1rem + 40px + 0.5rem))) 0.5rem 2rem;
  min-width: 0;
  position: relative;
  z-index: 2;
  text-align: var(--ce-header-align, left);
}
.ce-diagram-chart-title {
  font-family: var(--ce-diagram-font-heading);
  font-weight: 800;
  font-size: 1.5rem;
  line-height: 1.3;
  color: var(--ce-header-color, #111);
  overflow-wrap: break-word;
}
.ce-diagram-chart-subtitle {
  font-family: var(--ce-diagram-font-body);
  font-weight: 300;
  font-size: 1rem;
  line-height: 1.35;
  color: var(--ce-header-color, #555);
  margin-top: 0.15rem;
  overflow-wrap: break-word;
}

.ce-diagram-footnote {
  flex: 0 0 auto;
  font-family: var(--ce-diagram-font-body);
  font-weight: 300;
  font-size: 0.82rem;
  line-height: 1.35;
  color: var(--ce-header-color, #777);
  padding: 0.35rem 1.25rem 0.5rem;
  z-index: 2;
  text-align: var(--ce-header-align, left);
  background: transparent;
}

.ce-diagram-wrapper.alignfull { max-width: none; }
.ce-diagram-wrapper.aligncenter { margin-left: auto; margin-right: auto; }
.ce-diagram-wrapper.alignleft { float: left; margin-right: 1.5em; }
.ce-diagram-wrapper.alignright { float: right; margin-left: 1.5em; }

.ce-diagram-wrapper.ce-diagram-interaction-disabled .interactive-2d-3d-charts { touch-action: pan-y pan-x; }
.ce-diagram-wrapper.ce-diagram-interaction-disabled .ce-diagram-icon-wrapper { display: none; }

/* Snapshot-Overlay oder Hibernate: gleiche Zeiger-/Touch-Hinweise (DOM hat `ce-diagram-hibernate-snapshot`). */
.ce-diagram-wrapper--hibernating .interactive-2d-3d-charts,
.ce-diagram-wrapper--snapshot-overlay .interactive-2d-3d-charts {
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.ce-diagram-wrapper--hibernating img.ce-diagram-hibernate-snapshot,
.ce-diagram-wrapper--hibernating img.ce-diagram-hibernate-shot,
.ce-diagram-wrapper--snapshot-overlay img.ce-diagram-hibernate-snapshot,
.ce-diagram-wrapper--snapshot-overlay img.ce-diagram-hibernate-shot {
  user-select: none;
  -webkit-user-drag: none;
  -webkit-tap-highlight-color: transparent;
}
/* Über ownCanvas (z-index 3), bis Wake das Overlay entfernt — auch kurz ohne --hibernating. */
img.ce-diagram-hibernate-snapshot,
img.ce-diagram-hibernate-shot {
  z-index: 4;
  opacity: 1;
  transition: none;
}

/* Mobile „Tap to interact“: Scroll durch Vollflächen-Chart; Pill über dem Snapshot */
.ce-diagram-wrapper--tap-interact.ce-diagram-wrapper--hibernating .interactive-2d-3d-charts,
.ce-diagram-wrapper--tap-interact.ce-diagram-wrapper--snapshot-overlay .interactive-2d-3d-charts {
  touch-action: pan-x pan-y;
}
.ce-diagram-tap-hint {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 20;
  max-width: calc(100% - 1.5rem);
  padding: 0.45rem 0.95rem;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.62);
  color: #ffffff;
  font-family: var(--ce-diagram-font-body);
  font-size: 0.8125rem;
  font-weight: 600;
  line-height: 1.25;
  text-align: center;
  pointer-events: auto;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
  -webkit-tap-highlight-color: transparent;
}
.ce-diagram-tap-hint__label {
  display: block;
  color: #ffffff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ce-diagram-loader {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
  background: var(--ce-diagram-loader-bg, transparent);
  transition: opacity 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}
.ce-diagram-wrapper.loaded .ce-diagram-loader { opacity: 0; pointer-events: none; }
/* WebGL context recovery: Loader bleibt sichtbar wie beim ersten Laden (kein „Fehler“-Look). */
.ce-diagram-wrapper.loaded .ce-diagram-loader.ce-diagram-loader-recovering { opacity: 1; pointer-events: none; }
.ce-diagram-loader.ce-diagram-loader-recovering { opacity: 1; flex-direction: column; gap: 0.5rem; }
.ce-diagram-loader-recover-msg {
  margin: 0; padding: 0 1.5rem;
  font-family: var(--ce-diagram-font-body);
  font-size: 0.95rem; line-height: 1.5; color: #666; text-align: center; max-width: 320px;
}
.ce-diagram-loader.ce-diagram-loader-error { opacity: 1; flex-direction: column; gap: 0.5rem; }
.ce-diagram-loader-error-msg {
  margin: 0; padding: 0 1.5rem;
  font-family: var(--ce-diagram-font-body);
  font-size: 0.95rem; line-height: 1.5; color: #666; text-align: left; max-width: 320px;
}

.ce-diagram-loader-bar {
  width: 80px; height: 3px;
  background: rgba(0, 0, 0, 0.12);
  border-radius: 2px; overflow: hidden;
}
.ce-diagram-loader-bar::after {
  content: ''; display: block;
  width: 40%; height: 100%;
  background: rgba(0, 0, 0, 0.35);
  border-radius: 2px;
  animation: ce-diagram-loader 1.2s ease-in-out infinite;
}
@keyframes ce-diagram-loader {
  0%, 100% { transform: translateX(0); }
  50% { transform: translateX(150%); }
}

/* Canvas + optional legend: row layout (legend left, chart right). */
.ce-diagram-inner {
  flex: 1 1 0;
  position: relative;
  display: flex;
  flex-direction: row;
  align-items: stretch;
  min-width: 0;
  min-height: 0;
}

.interactive-2d-3d-charts {
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  min-height: 0;
  opacity: 0;
}
.interactive-2d-3d-charts canvas {
  display: block;
  width: 100%;
  height: 100%;
  will-change: contents;
  z-index: 3;
  -webkit-tap-highlight-color: transparent;
  /* Vereinheitlicht Touch: Browser scrollt die Seite nicht vor eigenem Pan/Zoom */
  touch-action: none;
}
.ce-diagram-wrapper.loaded .interactive-2d-3d-charts { opacity: 1; }

.ce-diagram-legend {
  flex: 0 0 auto;
  box-sizing: border-box;
  max-width: min(30%, 12rem);
  /* Volle Höhe wie Canvas-Zeile; scroll nur wenn Inhalt höher als der Container */
  align-self: stretch;
  max-height: none;
  min-height: 0;
  /* padding-inline-end: Abstand zum Scrollbar; padding-block: Luft oben/unten beim Scrollen */
  padding-block: 0.875rem;
  padding-inline: 0.875rem 1.25rem;
  margin: 0;
  overflow-x: hidden;
  overflow-y: auto;
  font-family: var(--ce-diagram-font-body);
  font-size: 0.8125rem;
  font-weight: 600;
  line-height: 1.42;
  color: var(--ce-legend-color, #333);
  /* wie Vollbild: kurze Listen vertikal mittig, lange listen scrollen zuverlässig */
  display: flex;
  flex-direction: column;
  justify-content: safe center;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: rgba(0, 0, 0, 0.28) transparent;
}
.ce-diagram-legend::-webkit-scrollbar {
  width: 6px;
}
.ce-diagram-legend::-webkit-scrollbar-track {
  background: transparent;
}
.ce-diagram-legend::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.22);
  border-radius: 3px;
}
.ce-diagram-legend::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, 0.38);
}
/* WP-Themes setzen oft aside/[hidden] zurück — Legende nur über diese Regeln wirklich ausblenden */
.ce-diagram-wrapper.ce-diagram-wrapper--legend-hidden .ce-diagram-legend,
.ce-diagram-wrapper .ce-diagram-legend[hidden] {
  display: none !important;
}
.ce-diagram-legend__row {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 0.45rem;
  padding: 0.15rem 0;
  color: inherit;
}
.ce-diagram-legend__swatch {
  flex: 0 0 auto;
  width: 0.75rem;
  height: 0.75rem;
  border-radius: 50%;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.12);
}
.ce-diagram-legend__text {
  flex: 1 1 auto;
  min-width: 0;
  word-break: break-word;
  color: inherit;
}

.ce-diagram-legend__footnote {
  font-size: 0.875rem;
  font-weight: 500;
  color: inherit;
  line-height: 1.45;
  padding-bottom: 0.45rem;
  margin-bottom: 0.35rem;
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

/* Surface: color bar + value ticks (matches WebGL heat ramp in surface.js) */
.ce-diagram-legend__surface {
  margin-bottom: 0.15rem;
  color: inherit;
}
.ce-diagram-legend__surface-title {
  font-size: 1.05rem;
  font-weight: 700;
  color: inherit;
  line-height: 1.3;
  margin-bottom: 0.4rem;
}
.ce-diagram-legend__surface-row {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  gap: 0.58rem;
  margin-bottom: 0.6rem;
  color: inherit;
}
.ce-diagram-legend__surface-ramp {
  flex: 0 0 12px;
  width: 12px;
  min-height: 4.85rem;
  border-radius: 2px;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.18);
}
.ce-diagram-legend__surface-ticks {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 4.85rem;
  font-size: 0.875rem;
  font-weight: 600;
  color: inherit;
  line-height: 1.25;
  padding: 0.08rem 0;
  min-width: 0;
}
.ce-diagram-legend__surface-ticks > span {
  color: inherit;
}
.ce-diagram-legend__surface-ticks--single {
  justify-content: center;
}
.ce-diagram-legend__surface .ce-diagram-legend__footnote--surface {
  border-bottom: none;
  padding-bottom: 0;
  margin-bottom: 0;
  padding-top: 0.35rem;
  margin-top: 0.15rem;
  border-top: 1px solid rgba(0, 0, 0, 0.08);
}

.ce-diagram-legend-icon {
  width: 20px;
  height: 20px;
  display: block;
  flex-shrink: 0;
  object-fit: contain;
}

@media (max-width: 768px) {
  .ce-diagram-inner {
    flex-direction: column-reverse;
  }
  /* On mobile both left and bottom legend share the same horizontal wrap layout */
  .ce-diagram-legend {
    max-width: none;
    max-height: 20%;
    width: 100%;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 0 0.6rem;
    padding-block: 0.4rem;
    padding-inline: 0.6rem;
    align-self: stretch;
    font-size: 0.875rem;
    overflow-y: auto;
  }
  .ce-diagram-legend__row {
    flex: 0 0 auto;
    padding: 0.08rem 0;
  }
  .ce-diagram-legend__swatch {
    width: 0.75rem;
    height: 0.75rem;
  }
  .ce-diagram-legend__text {
    flex: 0 0 auto;
  }
  .ce-diagram-legend__footnote {
    font-size: 0.75rem;
    flex-basis: 100%;
    border-bottom: none;
    padding-bottom: 0;
    margin-bottom: 0.15rem;
  }
  .ce-diagram-legend__surface-title {
    font-size: 0.875rem;
  }
  .ce-diagram-legend__surface {
    max-width: 22rem;
  }
  .ce-diagram-legend__surface-row {
    flex-direction: column;
    align-items: stretch;
    gap: 0.35rem;
  }
  .ce-diagram-legend__surface-ramp {
    flex: 0 0 12px;
    width: 100%;
    height: 12px;
    min-height: 0;
  }
  .ce-diagram-legend__surface-ticks {
    font-size: 0.75rem;
    flex-direction: row;
    justify-content: space-between;
    min-height: 0;
    padding: 0;
  }
  .ce-diagram-legend__surface-ticks--single {
    justify-content: center;
  }
  .ce-diagram-legend__surface .ce-diagram-legend__footnote--surface {
    border-top: none;
    padding-top: 0.2rem;
    margin-top: 0.1rem;
  }
}

/* ── Legend position: bottom ── */
.ce-diagram-wrapper--legend-bottom .ce-diagram-inner {
  flex-direction: column-reverse;
}
.ce-diagram-wrapper--legend-bottom .ce-diagram-legend {
  max-width: none;
  width: 100%;
  max-height: 17%;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 0.12rem 0.55rem;
  padding-block: 0.4rem;
  padding-inline: 0.875rem;
  overflow-y: auto;
}
/* ── Legend outside chart (opt-in): legend as flex child between inner & footnote ── */
.ce-diagram-wrapper--legend-external > .ce-diagram-legend {
  flex: 0 0 auto;
  max-height: none;
  overflow-y: visible;
}
.ce-diagram-wrapper--legend-bottom .ce-diagram-legend__row {
  flex: 0 0 auto;
  padding: 0rem 0;
}
.ce-diagram-wrapper--legend-bottom .ce-diagram-legend__text {
  flex: 0 0 auto;
}
.ce-diagram-wrapper--legend-bottom .ce-diagram-legend__footnote {
  flex-basis: 100%;
  border-bottom: none;
  padding-bottom: 0;
  margin-bottom: 0.15rem;
}
/* Surface ramp: horizontal when legend is at bottom */
.ce-diagram-wrapper--legend-bottom .ce-diagram-legend__surface {
  max-width: 22rem;
}
.ce-diagram-wrapper--legend-bottom .ce-diagram-legend__surface-row {
  flex-direction: column;
  align-items: stretch;
  gap: 0.28rem;
}
.ce-diagram-wrapper--legend-bottom .ce-diagram-legend__surface-ramp {
  flex: 0 0 11px;
  width: 100%;
  height: 11px;
  min-height: 0;
  border-radius: 2px;
}
.ce-diagram-wrapper--legend-bottom .ce-diagram-legend__surface-ticks {
  flex-direction: row;
  justify-content: space-between;
  min-height: 0;
  padding: 0;
}
.ce-diagram-wrapper--legend-bottom .ce-diagram-legend__surface-ticks--single {
  justify-content: center;
}
.ce-diagram-wrapper--legend-bottom .ce-diagram-legend__surface .ce-diagram-legend__footnote--surface {
  border-top: none;
  padding-top: 0.2rem;
  margin-top: 0.1rem;
}

.ce-diagram-top-actions {
  position: absolute;
  top: 0.875rem;
  right: 0.875rem;
  z-index: 10;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.4rem;
  pointer-events: none;
}
.ce-diagram-top-actions > * {
  pointer-events: auto;
}

/**
 * Mobile Tap-to-interact / Snapshot: Action-Leiste ausblenden wenn (a) JS-Klasse gesetzt,
 * (b) Wrapper hibernate-markiert, (c) Deep-Dispose mit Tap-Reinit (`data-ce-pd-await-tap` — dann kein laufendes init.js).
 * `!important` gegen Theme-Styles. Einblend-Animation nur ohne Hibernate/Suppress.
 */
.ce-diagram-wrapper--tap-interact .ce-diagram-top-actions {
  transition: opacity 0.6s ease;
}
.ce-diagram-wrapper--tap-interact .ce-diagram-top-actions.ce-diagram-top-actions--ce-suppressed {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  transition: opacity 0s ease !important;
}
.ce-diagram-wrapper--tap-interact .ce-diagram-top-actions.ce-diagram-top-actions--ce-suppressed > * {
  pointer-events: none !important;
}
/* DOM-Zustand Hibernate: Reinscrollen, auch wenn IO/JS die --ce-suppressed-Klasse verpasst */
.ce-diagram-wrapper--tap-interact.ce-diagram-wrapper--hibernating .ce-diagram-top-actions {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  transition: opacity 0s ease !important;
}
.ce-diagram-wrapper--tap-interact.ce-diagram-wrapper--hibernating .ce-diagram-top-actions > * {
  pointer-events: none !important;
}
/* Nach Deep-Dispose: kein Scene/IO — nur Snapshot + Tap wartet; Leiste wie Tap-to-interact aus */
.ce-diagram-wrapper[data-ce-pd-await-tap] .ce-diagram-top-actions {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  transition: opacity 0s ease !important;
}
.ce-diagram-wrapper[data-ce-pd-await-tap] .ce-diagram-top-actions > * {
  pointer-events: none !important;
}

/* Mobile: Action-Menü erst nach Ladephase (nicht über Ladebalken/Fehler/Context-Recovery) */
@media (max-width: 768px) {
  .ce-diagram-wrapper:not(.loaded) .ce-diagram-top-actions,
  .ce-diagram-wrapper:has(.ce-diagram-loader.ce-diagram-loader-recovering) .ce-diagram-top-actions,
  .ce-diagram-wrapper:has(.ce-diagram-loader.ce-diagram-loader-error) .ce-diagram-top-actions {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    transition: opacity 0s ease !important;
  }
  .ce-diagram-wrapper:not(.loaded) .ce-diagram-top-actions > *,
  .ce-diagram-wrapper:has(.ce-diagram-loader.ce-diagram-loader-recovering) .ce-diagram-top-actions > *,
  .ce-diagram-wrapper:has(.ce-diagram-loader.ce-diagram-loader-error) .ce-diagram-top-actions > * {
    pointer-events: none !important;
  }
}

/* Sort: gleiche Pill wie Fullscreen/Legende — nur Icon sichtbar; Body bleibt im Flex-Flow, damit max-width weich animiert (kein position:absolute beim Zu) */
.ce-diagram-expand-btn.ce-diagram-viewer-sort {
  position: relative;
  transition: max-width 0.32s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.18s ease, background 0.18s ease, border-color 0.18s ease;
}
.ce-diagram-expand-btn.ce-diagram-viewer-sort:focus-within {
  max-width: min(19rem, calc(100vw - 2.5rem));
  --ce-expand-glass-bg: rgba(255, 255, 255, 0.82);
  border-color: rgba(255, 255, 255, 0.62);
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.14);
  overflow: visible;
}
@media (hover: hover) and (pointer: fine) {
  .ce-diagram-expand-btn.ce-diagram-viewer-sort:hover {
    overflow: visible;
  }
  .ce-diagram-wrapper--transparent-bg .ce-diagram-expand-btn.ce-diagram-viewer-sort:hover {
    --ce-expand-glass-bg: rgba(255, 255, 255, 0.9);
    border-color: rgba(255, 255, 255, 0.72);
  }
}
.ce-diagram-wrapper--transparent-bg .ce-diagram-expand-btn.ce-diagram-viewer-sort:focus-within,
.ce-diagram-wrapper--transparent-bg .ce-diagram-expand-btn.ce-diagram-viewer-sort.ce-diagram-expand-btn--touch-open {
  --ce-expand-glass-bg: rgba(255, 255, 255, 0.9);
  border-color: rgba(255, 255, 255, 0.72);
}
.ce-diagram-expand-btn.ce-diagram-viewer-sort.ce-diagram-expand-btn--touch-open {
  overflow: visible;
}
.ce-diagram-viewer-sort__body {
  display: flex;
  align-items: center;
  flex: 0 1 auto;
  min-width: 0;
  max-width: 100%;
  padding: 0 0.15rem 0 0.75rem;
  overflow: hidden;
  cursor: default;
}
/* Eingeklappt: kein Text im Kreis; opacity ergänzt Clip bei nativem <select> */
@media (hover: hover) and (pointer: fine) {
  .ce-diagram-expand-btn.ce-diagram-viewer-sort:not(:hover):not(:focus-within):not(.ce-diagram-expand-btn--touch-open) .ce-diagram-viewer-sort__select {
    opacity: 0;
    transition: opacity 0.2s ease;
  }
  .ce-diagram-expand-btn.ce-diagram-viewer-sort:hover .ce-diagram-viewer-sort__select {
    opacity: 1;
    min-width: 7rem;
    transition: opacity 0.18s ease 0.06s;
  }
}
.ce-diagram-expand-btn.ce-diagram-viewer-sort:focus-within .ce-diagram-viewer-sort__select,
.ce-diagram-expand-btn.ce-diagram-viewer-sort.ce-diagram-expand-btn--touch-open .ce-diagram-viewer-sort__select {
  opacity: 1;
  min-width: 7rem;
  transition: opacity 0.18s ease 0.06s;
}
.ce-diagram-viewer-sort__select {
  max-width: min(11rem, calc(100vw - 5rem));
  min-width: 0;
  padding: 0.2rem 0.35rem;
  border-radius: 0.35rem;
  border: 1px solid rgba(0, 0, 0, 0.15);
  background: rgba(255, 255, 255, 0.96);
  font-family: var(--ce-diagram-font-body, inherit);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: #333;
  cursor: pointer;
}
.ce-diagram-expand-btn__icon .ce-diagram-viewer-sort__glyph {
  position: absolute;
  left: 50%;
  top: 50%;
  width: var(--ce-expand-glyph, 20px);
  height: var(--ce-expand-glyph, 20px);
  transform: translate(-50%, -50%);
  margin: 0;
  color: #222;
  pointer-events: none;
}

/* Top-bar controls: gleiche Glas-Rezeptur wie .ce-diagram-tooltip; hover/focus = Pill klappt auf */
.ce-diagram-expand-btn {
  --ce-expand-icon: 40px;
  --ce-expand-glyph: 20px;
  --ce-expand-glass-bg: var(--ce-glass-bg);
  --ce-expand-glass-blur: var(--ce-glass-blur);
  position: static;
  display: inline-flex;
  flex-direction: row;
  align-items: stretch;
  justify-content: flex-end;
  box-sizing: border-box;
  width: auto;
  height: var(--ce-expand-icon);
  min-height: var(--ce-expand-icon);
  max-width: var(--ce-expand-icon);
  margin: 0;
  padding: 0;
  border: 1px solid var(--ce-glass-border);
  border-radius: 9999px;
  background: var(--ce-expand-glass-bg);
  backdrop-filter: blur(var(--ce-expand-glass-blur));
  -webkit-backdrop-filter: blur(var(--ce-expand-glass-blur));
  box-shadow: var(--ce-glass-shadow);
  cursor: pointer;
  color: #222;
  overflow: hidden;
  -webkit-tap-highlight-color: transparent;
  transition: max-width 0.32s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.18s ease, background 0.18s ease, border-color 0.18s ease;
}
@media (hover: hover) and (pointer: fine) {
  .ce-diagram-expand-btn:hover {
    max-width: min(19rem, calc(100vw - 2.5rem));
    --ce-expand-glass-bg: rgba(255, 255, 255, 0.82);
    border-color: rgba(255, 255, 255, 0.62);
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.14);
  }
}
.ce-diagram-expand-btn:focus-visible {
  max-width: min(19rem, calc(100vw - 2.5rem));
  --ce-expand-glass-bg: rgba(255, 255, 255, 0.82);
  border-color: rgba(255, 255, 255, 0.62);
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.14);
  outline: 2px solid #333;
  outline-offset: 2px;
}
.ce-diagram-expand-btn--touch-open {
  max-width: min(19rem, calc(100vw - 2.5rem)) !important;
  --ce-expand-glass-bg: rgba(255, 255, 255, 0.82);
  border-color: rgba(255, 255, 255, 0.62);
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.14);
}

/* Transparenter WebGL-Hintergrund: etwas dichteres Glas (Blur/Deckung), Rand wie Tooltip */
.ce-diagram-wrapper--transparent-bg .ce-diagram-expand-btn {
  --ce-expand-glass-bg: rgba(255, 255, 255, 0.82);
  --ce-expand-glass-blur: 12px;
}
@media (hover: hover) and (pointer: fine) {
  .ce-diagram-wrapper--transparent-bg .ce-diagram-expand-btn:hover {
    --ce-expand-glass-bg: rgba(255, 255, 255, 0.9);
    border-color: rgba(255, 255, 255, 0.72);
  }
}
.ce-diagram-wrapper--transparent-bg .ce-diagram-expand-btn:focus-visible,
.ce-diagram-wrapper--transparent-bg .ce-diagram-expand-btn--touch-open {
  --ce-expand-glass-bg: rgba(255, 255, 255, 0.9);
  border-color: rgba(255, 255, 255, 0.72);
}

/* Modal liegt oft unter body; Klasse setzt init.js. Ohne echten Backdrop-Blur: bewusst dichtere Dim-Schicht. */
.ce-diagram-data-modal.ce-diagram-data-modal--transparent-bg {
  background: rgba(12, 14, 18, 0.78);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.ce-diagram-expand-btn__label {
  flex: 0 1 auto;
  align-self: center;
  padding: 0 0.12rem 0 0.75rem;
  white-space: nowrap;
  font-family: var(--ce-diagram-font-body);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: #333;
}
.ce-diagram-expand-btn__icon {
  position: relative;
  flex: 0 0 var(--ce-expand-icon);
  width: var(--ce-expand-icon);
  min-width: var(--ce-expand-icon);
  height: var(--ce-expand-icon);
  flex-shrink: 0;
}
.ce-diagram-expand-btn__icon > .ce-diagram-fullscreen-icon {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  margin: 0;
}
.ce-diagram-expand-btn__icon > .ce-diagram-data-table-icon {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  margin: 0;
}
.ce-diagram-expand-btn__icon > .ce-diagram-legend-icon {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  margin: 0;
}
.ce-diagram-expand-btn__icon > .ce-diagram-png-download-icon {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  margin: 0;
}
.ce-diagram-expand-btn__icon > .ce-diagram-projection-icon {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  margin: 0;
}

/* 2D/3D-Toggle: Semantik „Aktion" — das sichtbare Icon zeigt das ZIEL des Klicks.
 * aria-pressed="false" = Chart ist aktuell 3D → zeige „zu 2D wechseln"-Icon.
 * aria-pressed="true"  = Chart ist aktuell 2D → zeige „zu 3D wechseln"-Icon. */
.ce-diagram-projection-icon {
  width: 20px;
  height: 20px;
  display: block;
  flex-shrink: 0;
  object-fit: contain;
}
.ce-diagram-projection-btn[aria-pressed="false"] .ce-diagram-projection-icon--to-3d,
.ce-diagram-projection-btn[aria-pressed="true"]  .ce-diagram-projection-icon--to-2d {
  display: none;
}

/* Dauer des Kamera-Tweens (2D⇄3D). Pro-Block überschreibbar via inline-style oder
 * Theme-CSS; der Defaultwert wird in projectionToggle.js gelesen. */
.ce-diagram-wrapper {
  --ce-diagram-projection-tween-ms: 800;
}

.ce-diagram-data-table-icon {
  width: 20px;
  height: 20px;
  display: block;
  flex-shrink: 0;
  object-fit: contain;
}
.ce-diagram-png-download-icon {
  width: 20px;
  height: 20px;
  display: block;
  flex-shrink: 0;
  object-fit: contain;
}

/* Modal */
.ce-diagram-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.ce-diagram-data-modal {
  position: fixed;
  inset: 0;
  z-index: 2147483646;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: max(16px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) max(16px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));
  box-sizing: border-box;
  background: rgba(20, 22, 26, 0.42);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.22s ease, visibility 0.22s ease;
}
.ce-diagram-data-modal.ce-diagram-data-modal--open {
  opacity: 1;
  visibility: visible;
}
.ce-diagram-data-modal-panel {
  position: relative;
  width: min(920px, 100%);
  max-height: min(85vh, 100%);
  overflow: auto;
  background: #fafafa;
  border-radius: 14px;
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.18);
  border: 1px solid rgba(255, 255, 255, 0.65);
  font-family: var(--ce-diagram-font-body);
  color: #222;
  text-align: left;
}
.ce-diagram-data-modal-close {
  position: sticky;
  top: 0;
  float: right;
  z-index: 1;
  margin: 0.65rem 0.65rem 0 0;
  width: 40px;
  height: 40px;
  border: none;
  border-radius: 9999px;
  background: rgba(255, 255, 255, 0.9);
  color: #333;
  font-size: 1.35rem;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 1px 8px rgba(0, 0, 0, 0.08);
  transition: background 0.15s ease;
}
.ce-diagram-data-modal-close:hover {
  background: #fff;
}
.ce-diagram-data-modal-close:focus-visible {
  outline: 2px solid #333;
  outline-offset: 2px;
}
.ce-diagram-data-modal-inner {
  padding: 0 1.35rem 1.35rem;
  clear: both;
}
.ce-diagram-data-table-wrap {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.ce-diagram-data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9rem;
  line-height: 1.45;
}
.ce-diagram-data-table caption {
  caption-side: top;
  text-align: left;
  font-family: var(--ce-diagram-font-heading);
  font-weight: 800;
  font-size: 1.05rem;
  letter-spacing: 0.02em;
  padding: 1.1rem 0 0.85rem;
  color: #111;
}
.ce-diagram-data-table thead th {
  text-align: left;
  font-weight: 700;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #666;
  padding: 0.5rem 0.65rem 0.5rem 0;
  border-bottom: 1px solid #ddd;
  white-space: nowrap;
}
.ce-diagram-data-table thead th:first-child {
  width: 2.5rem;
  padding-left: 0;
}
.ce-diagram-data-table tbody tr {
  border-bottom: 1px solid #eee;
}
.ce-diagram-data-table tbody tr:last-child {
  border-bottom: none;
}
.ce-diagram-data-table td {
  padding: 0.65rem 0.65rem 0.65rem 0;
  vertical-align: top;
}
.ce-diagram-data-table td:first-child {
  padding-left: 0;
  width: 2.5rem;
}
.ce-diagram-data-table-swatch {
  display: block;
  width: 1rem;
  height: 1rem;
  border-radius: 3px;
  border: 1px solid rgba(0, 0, 0, 0.12);
  flex-shrink: 0;
}
.ce-diagram-data-table-search {
  display: block;
  width: 100%;
  max-width: 320px;
  padding: 0.45rem 0.65rem;
  margin-bottom: 0.75rem;
  font-family: var(--ce-diagram-font-body);
  font-size: 0.85rem;
  border: 1px solid #ccc;
  border-radius: 6px;
  outline: none;
  box-sizing: border-box;
}
.ce-diagram-data-table-search:focus {
  border-color: #666;
  box-shadow: 0 0 0 2px rgba(0,0,0,0.08);
}
.ce-diagram-data-table thead th[aria-sort] {
  user-select: none;
  -webkit-user-select: none;
}
.ce-diagram-data-table thead th[aria-sort]::after {
  content: ' \2195';
  opacity: 0.35;
  font-size: 0.8em;
}
.ce-diagram-data-table thead th[aria-sort="ascending"]::after {
  content: ' \2191';
  opacity: 0.7;
}
.ce-diagram-data-table thead th[aria-sort="descending"]::after {
  content: ' \2193';
  opacity: 0.7;
}
.ce-diagram-data-table-value {
  font-family: var(--ce-diagram-font-heading);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  min-width: 4rem;
}
.ce-diagram-data-table-title {
  font-family: var(--ce-diagram-font-heading);
  font-weight: 700;
  color: #111;
}
.ce-diagram-data-table-desc {
  font-weight: 300;
  color: #333;
}
.ce-diagram-data-table-small {
  font-size: 0.78rem;
  font-weight: 300;
  color: #555;
}
.ce-diagram-fullscreen-icon {
  width: 20px;
  height: 20px;
  display: block;
  flex-shrink: 0;
  object-fit: contain;
}
.ce-diagram-fullscreen-icon--exit {
  display: none;
}
.ce-diagram-wrapper--fullscreen .ce-diagram-fullscreen-icon--enter {
  display: none;
}
.ce-diagram-wrapper--fullscreen .ce-diagram-fullscreen-icon--exit {
  display: block;
}
.ce-diagram-wrapper:fullscreen,
.ce-diagram-wrapper:-webkit-full-screen {
  max-height: none !important;
  min-height: 100% !important;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
}

/* Header / Footnote: im Vollbild größere Typo */
.ce-diagram-wrapper--fullscreen .ce-diagram-header,
.ce-diagram-wrapper:fullscreen .ce-diagram-header,
.ce-diagram-wrapper:-webkit-full-screen .ce-diagram-header {
  padding: 1.5rem var(--ce-header-reserve-top-actions, max(2rem, calc(1rem + 40px + 0.5rem))) 0.85rem 2.75rem;
}
.ce-diagram-wrapper--fullscreen .ce-diagram-chart-title,
.ce-diagram-wrapper:fullscreen .ce-diagram-chart-title,
.ce-diagram-wrapper:-webkit-full-screen .ce-diagram-chart-title {
  font-size: clamp(1.65rem, 3vmin, 2.5rem);
}
.ce-diagram-wrapper--fullscreen .ce-diagram-chart-subtitle,
.ce-diagram-wrapper:fullscreen .ce-diagram-chart-subtitle,
.ce-diagram-wrapper:-webkit-full-screen .ce-diagram-chart-subtitle {
  font-size: clamp(1.05rem, 2vmin, 1.6rem);
}
.ce-diagram-wrapper--fullscreen .ce-diagram-footnote,
.ce-diagram-wrapper:fullscreen .ce-diagram-footnote,
.ce-diagram-wrapper:-webkit-full-screen .ce-diagram-footnote {
  font-size: clamp(0.85rem, 1.4vmin, 1.1rem);
  padding: 0.5rem 2rem 0.75rem;
}

/* Legende: im Vollbild größere Typo + luftige Abstände (Höhe/Stretch wie Basis .ce-diagram-legend) */
.ce-diagram-wrapper--fullscreen .ce-diagram-legend,
.ce-diagram-wrapper:fullscreen .ce-diagram-legend,
.ce-diagram-wrapper:-webkit-full-screen .ce-diagram-legend {
  font-size: clamp(1.05rem, 1.65vmin, 1.3125rem);
  line-height: 1.48;
  padding-block: 2.125rem;
  padding-inline: 2rem 2.5rem;
  max-width: min(52%, 28rem);
}
.ce-diagram-wrapper--fullscreen .ce-diagram-legend__row,
.ce-diagram-wrapper:fullscreen .ce-diagram-legend__row,
.ce-diagram-wrapper:-webkit-full-screen .ce-diagram-legend__row {
  gap: 0.85rem;
  padding: 0.42rem 0;
}
.ce-diagram-wrapper--fullscreen .ce-diagram-legend__swatch,
.ce-diagram-wrapper:fullscreen .ce-diagram-legend__swatch,
.ce-diagram-wrapper:-webkit-full-screen .ce-diagram-legend__swatch {
  width: 1.0625rem;
  height: 1.0625rem;
}
.ce-diagram-wrapper--fullscreen .ce-diagram-legend__footnote,
.ce-diagram-wrapper:fullscreen .ce-diagram-legend__footnote,
.ce-diagram-wrapper:-webkit-full-screen .ce-diagram-legend__footnote {
  font-size: clamp(0.95rem, 1.35vmin, 1.0625rem);
  line-height: 1.5;
  padding-bottom: 0.85rem;
  margin-bottom: 0.55rem;
}
.ce-diagram-wrapper--fullscreen .ce-diagram-legend__surface-title,
.ce-diagram-wrapper:fullscreen .ce-diagram-legend__surface-title,
.ce-diagram-wrapper:-webkit-full-screen .ce-diagram-legend__surface-title {
  font-size: clamp(1.05rem, 1.65vmin, 1.3125rem);
  margin-bottom: 0.75rem;
}
.ce-diagram-wrapper--fullscreen .ce-diagram-legend__surface-row,
.ce-diagram-wrapper:fullscreen .ce-diagram-legend__surface-row,
.ce-diagram-wrapper:-webkit-full-screen .ce-diagram-legend__surface-row {
  gap: 0.85rem;
  margin-bottom: 0.75rem;
}
.ce-diagram-wrapper--fullscreen .ce-diagram-legend__surface-ramp,
.ce-diagram-wrapper:fullscreen .ce-diagram-legend__surface-ramp,
.ce-diagram-wrapper:-webkit-full-screen .ce-diagram-legend__surface-ramp {
  flex-basis: 18px;
  width: 18px;
  min-height: 6.5rem;
}
.ce-diagram-wrapper--fullscreen .ce-diagram-legend__surface-ticks,
.ce-diagram-wrapper:fullscreen .ce-diagram-legend__surface-ticks,
.ce-diagram-wrapper:-webkit-full-screen .ce-diagram-legend__surface-ticks {
  min-height: 6.5rem;
  font-size: clamp(0.95rem, 1.35vmin, 1.0625rem);
  line-height: 1.35;
}
.ce-diagram-wrapper--fullscreen .ce-diagram-legend__surface .ce-diagram-legend__footnote--surface,
.ce-diagram-wrapper:fullscreen .ce-diagram-legend__surface .ce-diagram-legend__footnote--surface,
.ce-diagram-wrapper:-webkit-full-screen .ce-diagram-legend__surface .ce-diagram-legend__footnote--surface {
  padding-top: 0.65rem;
  margin-top: 0.35rem;
}
@media (max-width: 768px) {
  .ce-diagram-wrapper--fullscreen .ce-diagram-legend,
  .ce-diagram-wrapper:fullscreen .ce-diagram-legend,
  .ce-diagram-wrapper:-webkit-full-screen .ce-diagram-legend {
    max-width: none;
    width: 100%;
    max-height: min(32vh, 16rem);
    font-size: 0.875rem;
    line-height: 1.38;
    padding-block: 0.5rem;
    padding-inline: 0.7rem 1rem;
  }
  .ce-diagram-wrapper--fullscreen .ce-diagram-legend__row,
  .ce-diagram-wrapper:fullscreen .ce-diagram-legend__row,
  .ce-diagram-wrapper:-webkit-full-screen .ce-diagram-legend__row {
    gap: 0.5rem;
    padding: 0.12rem 0;
  }
  .ce-diagram-wrapper--fullscreen .ce-diagram-legend__swatch,
  .ce-diagram-wrapper:fullscreen .ce-diagram-legend__swatch,
  .ce-diagram-wrapper:-webkit-full-screen .ce-diagram-legend__swatch {
    width: 0.75rem;
    height: 0.75rem;
  }
  .ce-diagram-wrapper--fullscreen .ce-diagram-legend__footnote,
  .ce-diagram-wrapper:fullscreen .ce-diagram-legend__footnote,
  .ce-diagram-wrapper:-webkit-full-screen .ce-diagram-legend__footnote {
    font-size: 0.75rem;
    padding-bottom: 0.3rem;
    margin-bottom: 0.2rem;
  }
}
/* Fullscreen + legend-bottom: keep horizontal flow, override side-panel max-width */
.ce-diagram-wrapper--legend-bottom.ce-diagram-wrapper--fullscreen .ce-diagram-legend,
.ce-diagram-wrapper--legend-bottom:fullscreen .ce-diagram-legend,
.ce-diagram-wrapper--legend-bottom:-webkit-full-screen .ce-diagram-legend {
  max-width: none;
  width: 100%;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 0.3rem 1.75rem;
  padding-block: 1.1rem;
  padding-inline: 2rem;
  max-height: min(40vh, 22rem);
  font-size: clamp(1.25rem, 2vmin, 1.55rem);
}
.ce-diagram-wrapper--legend-bottom.ce-diagram-wrapper--fullscreen .ce-diagram-legend__text,
.ce-diagram-wrapper--legend-bottom:fullscreen .ce-diagram-legend__text,
.ce-diagram-wrapper--legend-bottom:-webkit-full-screen .ce-diagram-legend__text {
  flex: 0 0 auto;
}
.ce-diagram-wrapper--legend-bottom.ce-diagram-wrapper--fullscreen .ce-diagram-legend__swatch,
.ce-diagram-wrapper--legend-bottom:fullscreen .ce-diagram-legend__swatch,
.ce-diagram-wrapper--legend-bottom:-webkit-full-screen .ce-diagram-legend__swatch {
  width: 1.125rem;
  height: 1.125rem;
}
/* Fullscreen + bottom: keep surface ramp horizontal */
.ce-diagram-wrapper--legend-bottom.ce-diagram-wrapper--fullscreen .ce-diagram-legend__surface,
.ce-diagram-wrapper--legend-bottom:fullscreen .ce-diagram-legend__surface,
.ce-diagram-wrapper--legend-bottom:-webkit-full-screen .ce-diagram-legend__surface {
  max-width: 36rem;
}
.ce-diagram-wrapper--legend-bottom.ce-diagram-wrapper--fullscreen .ce-diagram-legend__surface-row,
.ce-diagram-wrapper--legend-bottom:fullscreen .ce-diagram-legend__surface-row,
.ce-diagram-wrapper--legend-bottom:-webkit-full-screen .ce-diagram-legend__surface-row {
  flex-direction: column;
  align-items: stretch;
  gap: 0.35rem;
}
.ce-diagram-wrapper--legend-bottom.ce-diagram-wrapper--fullscreen .ce-diagram-legend__surface-ramp,
.ce-diagram-wrapper--legend-bottom:fullscreen .ce-diagram-legend__surface-ramp,
.ce-diagram-wrapper--legend-bottom:-webkit-full-screen .ce-diagram-legend__surface-ramp {
  flex: 0 0 18px;
  width: 100%;
  height: 18px;
  min-height: 0;
}
.ce-diagram-wrapper--legend-bottom.ce-diagram-wrapper--fullscreen .ce-diagram-legend__surface-ticks,
.ce-diagram-wrapper--legend-bottom:fullscreen .ce-diagram-legend__surface-ticks,
.ce-diagram-wrapper--legend-bottom:-webkit-full-screen .ce-diagram-legend__surface-ticks {
  flex-direction: row;
  justify-content: space-between;
  min-height: 0;
}
@media (max-width: 768px) {
  .ce-diagram-wrapper--legend-bottom.ce-diagram-wrapper--fullscreen .ce-diagram-legend,
  .ce-diagram-wrapper--legend-bottom:fullscreen .ce-diagram-legend,
  .ce-diagram-wrapper--legend-bottom:-webkit-full-screen .ce-diagram-legend {
    font-size: 0.875rem;
    gap: 0.15rem 0.8rem;
    padding-block: 0.45rem;
    padding-inline: 0.7rem;
    max-height: min(28vh, 14rem);
  }
  .ce-diagram-wrapper--legend-bottom.ce-diagram-wrapper--fullscreen .ce-diagram-legend__swatch,
  .ce-diagram-wrapper--legend-bottom:fullscreen .ce-diagram-legend__swatch,
  .ce-diagram-wrapper--legend-bottom:-webkit-full-screen .ce-diagram-legend__swatch {
    width: 0.75rem;
    height: 0.75rem;
  }
}

.ce-diagram-icon-wrapper {
  position: absolute;
  bottom: 1rem; right: 1rem;
  z-index: 3;
  display: flex; flex-direction: column; align-items: flex-end;
  pointer-events: auto;
  transition: opacity 0.4s ease;
  isolation: isolate;
  overflow: visible;
}
/* Schein: Mittelpunkt an Canvas-Ecke unten rechts (Icon 1rem eingerückt → -1rem), expliziter Kreisradius vermeidet harte Quadratkanten; blendet mit dem Icon aus */
.ce-diagram-icon-wrapper::before {
  content: '';
  position: absolute;
  z-index: 0;
  pointer-events: none;
  bottom: -1rem;
  right: -1rem;
  width: 168px;
  height: 168px;
  background: radial-gradient(
    circle 104px at 100% 100%,
    rgba(255, 255, 255, 0.48) 0%,
    rgba(255, 255, 255, 0.2) 54%,
    rgba(255, 255, 255, 0) 100%
  );
}
.ce-diagram-icon-tooltip {
  position: fixed;
  z-index: 2147483647;
  padding: 1rem 1.25rem;
  /* Same root scale as .ce-diagram-tooltip; hint span mirrors init.js bar desc (0.96em, 300, line-height 1.4) */
  font-size: 1.2rem;
  line-height: 1.5;
  font-family: var(--ce-diagram-font-body);
  color: #222;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  background: var(--ce-glass-bg);
  backdrop-filter: blur(var(--ce-glass-blur));
  -webkit-backdrop-filter: blur(var(--ce-glass-blur));
  border: 1px solid var(--ce-glass-border);
  border-radius: 12px;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.15);
  white-space: normal;
  width: min(380px, calc(100vw - 24px));
  text-align: left;
  opacity: 0; visibility: hidden;
  transition: opacity 0.2s ease, visibility 0.2s ease;
  pointer-events: none;
}
.ce-diagram-icon-tooltip.ce-diagram-icon-tooltip-visible { opacity: 1; visibility: visible; }
.ce-diagram-icon-tooltip p {
  margin: 0 0 0.5em;
  line-height: 1.4;
}
.ce-diagram-icon-tooltip p:last-child { margin-bottom: 0; }
/* Action label: same 0.96em-of-root relation as bar secondary lines */
.ce-diagram-icon-tooltip strong {
  font-family: var(--ce-diagram-font-heading);
  font-size: 0.96em;
  font-weight: 700;
  font-synthesis: none;
  color: #222;
}
/* Same as bar tooltip description div (init.js descHtml): 0.96em, 300, 1.4 */
.ce-diagram-icon-tooltip-hint {
  font-family: var(--ce-diagram-font-body);
  font-size: 0.96em;
  font-weight: 300;
  line-height: 1.4;
  color: #222;
  font-synthesis: none;
}

.ce-diagram-icon {
  position: relative;
  z-index: 1;
  width: 74px; height: auto;
  pointer-events: auto;
  transition: opacity 0.4s ease;
  opacity: 0;
  filter:

    drop-shadow(0 2px 26px rgb(255, 255, 255));
}
.ce-diagram-wrapper.loaded .ce-diagram-icon { opacity: 1; }
.ce-diagram-wrapper.loaded .ce-diagram-icon-wrapper.ce-diagram-icon-faded { opacity: 0; pointer-events: none; }

@media (max-width: 768px) {
  .ce-diagram-icon-wrapper {
    bottom: 0.75rem;
    right: 0.75rem;
  }
  .ce-diagram-icon-wrapper::before {
    bottom: -0.75rem;
    right: -0.75rem;
    width: 124px;
    height: 124px;
    background: radial-gradient(
      circle 76px at 100% 100%,
      rgba(255, 255, 255, 0.48) 0%,
      rgba(255, 255, 255, 0.2) 54%,
      rgba(255, 255, 255, 0) 100%
    );
  }
  .ce-diagram-icon {
    width: 54px;
    filter:
      drop-shadow(0 2px 18px rgb(255, 255, 255));
  }
  .ce-diagram-top-actions {
    top: 0.65rem;
    right: 0.65rem;
    gap: 0.35rem;
  }
  .ce-diagram-expand-btn {
    --ce-expand-icon: 36px;
    --ce-expand-glyph: 18px;
  }
  .ce-diagram-data-table-icon {
    width: 18px;
    height: 18px;
  }
  .ce-diagram-fullscreen-icon {
    width: 18px;
    height: 18px;
  }
  .ce-diagram-projection-icon,
  .ce-diagram-png-download-icon,
  .ce-diagram-legend-icon {
    width: 18px;
    height: 18px;
  }
  .ce-diagram-tooltip { font-size: 0.86rem; }
  /* Smaller than bar tooltip: large copy + fixed max width clips on narrow phones */
  .ce-diagram-icon-tooltip {
    font-size: 0.7rem;
    line-height: 1.45;
    padding: 0.65rem 0.85rem;
    width: min(300px, calc(100vw - 12px));
  }
  .ce-diagram-icon-tooltip p { line-height: 1.35; }
}
@media (max-width: 480px) {
  .ce-diagram-icon-wrapper {
    bottom: 0.5rem;
    right: 0.5rem;
  }
  .ce-diagram-icon-wrapper::before {
    bottom: -0.5rem;
    right: -0.5rem;
    width: 100px;
    height: 100px;
    background: radial-gradient(
      circle 60px at 100% 100%,
      rgba(255, 255, 255, 0.48) 0%,
      rgba(255, 255, 255, 0.2) 54%,
      rgba(255, 255, 255, 0) 100%
    );
  }
  .ce-diagram-icon {
    width: 42px;
    filter:
      drop-shadow(0 2px 14px rgb(255, 255, 255));
  }
  .ce-diagram-top-actions {
    top: 0.45rem;
    right: 0.45rem;
    gap: 0.3rem;
  }
  .ce-diagram-expand-btn {
    --ce-expand-icon: 32px;
    --ce-expand-glyph: 16px;
  }
  .ce-diagram-data-table-icon {
    width: 16px;
    height: 16px;
  }
  .ce-diagram-fullscreen-icon {
    width: 16px;
    height: 16px;
  }
  .ce-diagram-projection-icon,
  .ce-diagram-png-download-icon,
  .ce-diagram-legend-icon {
    width: 16px;
    height: 16px;
  }
  .ce-diagram-icon-tooltip {
    font-size: 0.68rem;
    padding: 0.55rem 0.7rem;
    width: min(280px, calc(100vw - 10px));
  }
}