.example-section {
      display: flex;
     flex-direction: row;
     justify-content: space-between;
      margin: 30px 0;
      padding: 20px;
      border: 1px solid #eee;
      border-radius: 4px;
    }
    
     
    input.demo-input {
      padding: 15px 12px;
      border: 1px solid #ccc;
      border-radius: 4px;
      font-size: 14px;
      width: 250px;
    }


/* =============================================================================
   VERTICAL VALUE VISUALIZER
   ============================================================================= */

:root {
  --vertVaVi-font-family: 'Lato', Arial;
  --vertVaVi-font-size: 8px;
  --vertVaVi-color-bg: transparent;
  --vertVaVi-color-text: #333;
  --vertVaVi-color-border: transparent;
  --vertVaVi-color-progress-bg: rgba(80, 80, 150, 0.3);
  --vertVaVi-color-exceeded: rgba(0, 204, 204, 1);
  --vertVaVi-remain-color: #ff6b6b;
  --vertVaVi-depart-color: #4ecdc4;
  --vertVaVi-radius: 1px;
  --vertVaVi-percent-font-size: 7px;
  --vertVaVi-percent-font-weight: 500;
  --vertVaVi-progress-height: 2px;
  --vertVaVi-vertical-container-width: 25px;
  --vertVaVi-vertical-element-spacing: 1px;
  --vertVaVi-percent-height: 10px;
  --vertVaVi-animation-blink: blink 0.6s ease-in-out infinite alternate;
}
/*
@keyframes blink {
  from { opacity: 1; }
  to { opacity: 0.4; }
}*/

/* =============================================================================
   CONTAINER-STRUKTUR
   ============================================================================= */

.vertVaVi-fieldContainer {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--vertVaVi-vertical-element-spacing);
  align-items: flex-start;
  margin: 0;
  padding: 0;
}

/* Container-Ausrichtung */
.vertVaVi-fieldContainer[data-orientation="vertical"][data-position="right"] {
  flex-direction: row;
  align-items: center;
}

.vertVaVi-fieldContainer[data-orientation="vertical"][data-position="left"] {
  flex-direction: row;
  align-items: center;
}

.vertVaVi-fieldContainer[data-orientation="horizontal"][data-position="bottom"] {
  flex-direction: column;
}

.vertVaVi-fieldContainer[data-orientation="horizontal"][data-position="top"] {
  flex-direction: column-reverse;
}

/* =============================================================================
   OUTPUT-CONTAINER
   ============================================================================= */

.vertVaVi-output-container {
  display: flex;
  align-items: center;
  width: auto;
  min-height: 0;
  margin: 0;
  padding: 0;
  font-family: var(--vertVaVi-font-family);
  font-size: var(--vertVaVi-percent-font-size);
  font-weight: var(--vertVaVi-percent-font-weight);
  background: var(--vertVaVi-color-bg);
  box-sizing: border-box;
  line-height: 1;
  flex: 0 0 auto;
}

/* =============================================================================
   HORIZONTALE AUSRICHTUNG (Vorbereitung)
   ============================================================================= */

.vertVaVi-output-container[data-orientation="horizontal"] {
  flex-direction: row;
  width: 100%;
}

.vertVaVi-output-container[data-orientation="horizontal"].vertVaVi-both {
  justify-content: space-between;
}

/* =============================================================================
   VERTIKALE AUSRICHTUNG - FERTIGE KOMBINATIONEN
   ============================================================================= */

/* -----------------------------------------------------------------------------
   VERTIKAL BOTH MODUS (4 KOMBINATIONEN FERTIG)
   Vertical | right/left | both | depart/remain
   ----------------------------------------------------------------------------- */

.vertVaVi-output-container[data-orientation="vertical"] {
  flex-direction: column;
  height: 100%;
  width: var(--vertVaVi-vertical-container-width);
  min-width: var(--vertVaVi-vertical-container-width);
  justify-content: space-between;
  align-items: center;
  gap: calc(0.5 * var(--vertVaVi-vertical-element-spacing));
}

.vertVaVi-output-container[data-orientation="vertical"].vertVaVi-both {
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  gap: calc(0.5 * var(--vertVaVi-vertical-element-spacing));
}

/* Element-Reihenfolge: Standard (Progressbar oben, Zahl unten) */
.vertVaVi-output-container[data-orientation="vertical"].vertVaVi-both .vertVaVi-progress {
  order: 1;
}

.vertVaVi-output-container[data-orientation="vertical"].vertVaVi-both .vertVaVi-percent {
  order: 2;
}

/* Remain-Modus: Reihenfolge umkehren (Zahl oben, Progressbar unten) */
.vertVaVi-output-container[data-orientation="vertical"].vertVaVi-both[data-type="remain"] .vertVaVi-progress {
  order: 2;
}

.vertVaVi-output-container[data-orientation="vertical"].vertVaVi-both[data-type="remain"] .vertVaVi-percent {
  order: 1;
}

/* Vertikale Progressbar - dynamische Höhe */
.vertVaVi-output-container[data-orientation="vertical"] .vertVaVi-progress {
  width: var(--vertVaVi-progress-height);
  height: calc(100% - var(--vertVaVi-percent-height) - (0.5 * var(--vertVaVi-vertical-element-spacing)));
  flex: none;
  min-width: auto;
  min-height: 15px;
  position: relative;
  background: var(--vertVaVi-color-progress-bg);
  border-radius: var(--vertVaVi-radius);
  overflow: hidden;
}

/* Vertikale Progress Bar - Position */
.vertVaVi-output-container[data-orientation="vertical"] .vertVaVi-progress-bar {
  width: 100%;
  height: 0%;
  position: absolute;
  bottom: 0;
}

/* Remain-Typ: Progress Bar von oben wachsend */
.vertVaVi-output-container[data-orientation="vertical"][data-type="remain"] .vertVaVi-progress-bar {
  background: var(--vertVaVi-remain-color);
  top: 0;
  bottom: auto;
}

/* -----------------------------------------------------------------------------
   VERTIKAL PROGRESS-ONLY MODUS (4 KOMBINATIONEN FERTIG)
   Nur Progressbar vertical | right/left | progress | depart/remain
   ----------------------------------------------------------------------------- */

.vertVaVi-output-container[data-orientation="vertical"].vertVaVi-progress-only {
  justify-content: center;
  align-items: center;
  margin: 0;
}

/* Progress-only: Volle Höhe */
.vertVaVi-output-container[data-orientation="vertical"].vertVaVi-progress-only .vertVaVi-progress {
  width: var(--vertVaVi-progress-height);
  height: 100%;
  flex: none;
  min-width: auto;
  min-height: 20px;
  position: relative;
  background: var(--vertVaVi-color-progress-bg);
  border-radius: var(--vertVaVi-radius);
  overflow: hidden;
}

/* Progress-only Bar */
.vertVaVi-output-container[data-orientation="vertical"].vertVaVi-progress-only .vertVaVi-progress-bar {
  width: 100%;
  height: 0%;
  position: absolute;
  bottom: 0;
}

/* Progress-only Positionsspezifisch */
.vertVaVi-output-container[data-orientation="vertical"][data-position="right"].vertVaVi-progress-only {
  justify-content: center;
  align-items: flex-start;
  margin-left: 2px;
}

.vertVaVi-output-container[data-orientation="vertical"][data-position="left"].vertVaVi-progress-only {
  justify-content: center;
  align-items: flex-end;
  margin-right: 2px;
}

/* -----------------------------------------------------------------------------
   VERTIKAL PERCENT-ONLY MODUS (4 KOMBINATIONEN FERTIG)
   Nur Prozentzahl vertical | right/left | percent | depart/remain
   ----------------------------------------------------------------------------- */

.vertVaVi-output-container.vertVaVi-percent-only {
  justify-content: center;
  align-items: center;
}

/* Prozentzahl-only Typ-spezifisch */
.vertVaVi-output-container[data-type="depart"].vertVaVi-percent-only {
  justify-content: flex-end; /* Unten */
}

.vertVaVi-output-container[data-type="remain"].vertVaVi-percent-only {
  justify-content: flex-start; /* Oben */
}

/* Prozentzahl Element */
.vertVaVi-output-container .vertVaVi-percent {
  height: var(--vertVaVi-percent-height);
  width: 100%;
  text-align: center;
  font-size: var(--vertVaVi-percent-font-size);
  color: var(--vertVaVi-color-text);
  white-space: nowrap;
  padding: 0;
  margin: 0;
  display: flex;
  align-items: flex-end; /* Standard für depart */
  justify-content: center;
}

/* Prozentzahl Typ-spezifisch */
.vertVaVi-output-container[data-type="remain"] .vertVaVi-percent {
  align-items: flex-start; /* Für remain */
}

/* Spezielle Ausnahme: remain percent-only mit Position */
.vertVaVi-output-container[data-type="remain"].vertVaVi-percent-only[data-position="right"] .vertVaVi-percent,
.vertVaVi-output-container[data-type="remain"].vertVaVi-percent-only[data-position="left"] .vertVaVi-percent {
  align-items: flex-end; /* Unten ausrichten */
}

/* Vertikale Prozentzahl */
.vertVaVi-output-container[data-orientation="vertical"] .vertVaVi-percent {
  padding: 0;
  text-align: center;
  width: 100%;
  height: var(--vertVaVi-percent-height);
  display: flex;
  align-items: flex-end;
  justify-content: center;
}

.vertVaVi-output-container[data-orientation="vertical"][data-type="remain"] .vertVaVi-percent {
  align-items: flex-start;
}

/* =============================================================================
   GLOBALE STYLES
   ============================================================================= */

/* Progress Element Basis */
.vertVaVi-output-container .vertVaVi-progress {
  flex: 1;
  height: var(--vertVaVi-progress-height);
  background: var(--vertVaVi-color-progress-bg);
  border-radius: var(--vertVaVi-radius);
  overflow: hidden;
  position: relative;
  margin: 0;
  min-width: 20px;
}

/* Progress Bar Basis */
.vertVaVi-output-container .vertVaVi-progress-bar {
  height: 100%;
  width: 0%;
  background: var(--vertVaVi-depart-color);
  transition: width 0.1s ease, background 0.1s ease, height 0.1s ease;
  border-radius: var(--vertVaVi-radius);
  margin: 0;
  position: absolute;
  bottom: 0;
}

/* Depart-Typ Standardfarbe */
.vertVaVi-output-container[data-type="depart"] .vertVaVi-progress-bar {
  background: var(--vertVaVi-depart-color);
}

/* Exceeded State */
.vertVaVi-output-container .vertVaVi-progress-bar.vertVaVi-exceeded {
  background: var(--vertVaVi-color-exceeded) !important;
  animation: var(--vertVaVi-animation-blink);
}

/* Remain Kennzeichnung */
.vertVaVi-output-container[data-type="remain"] .vertVaVi-percent::before {
  content: "";
  margin-right: 0px;
}

/* Blinken für beide Elemente bei Überschreitung */
.vertVaVi-output-container .vertVaVi-progress-bar.vertVaVi-exceeded {
  background: var(--vertVaVi-color-exceeded) !important;
  animation: var(--vertVaVi-animation-blink);
}

.vertVaVi-output-container .vertVaVi-percent.vertVaVi-exceeded {
  color: var(--vertVaVi-color-exceeded) !important;
  animation: var(--vertVaVi-animation-blink);
}