/*
 * Vogelsang KPI Zähler - CSS Stile
 */

.vogelsang-kpi-container {
    width: 100%;
    overflow-x: auto; /* Sorgt für Scrollbarkeit auf sehr kleinen Bildschirmen */
}

.cmp-carKPIs__table {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
}

.cmp-carKPIs__content,
.cmp-carKPIs__label {
    text-align: center;
    vertical-align: top;
    padding: 10px;
}

/* Bereich für den animierten Zähler */
.cmp-carKPIs__animation-section {
    display: flex;
    justify-content: center;
    align-items: baseline; /* Richtet Einheit und Zahl an der Grundlinie aus */
    font-size: 2.5em; /* Avada wird dies wahrscheinlich überschreiben, dient als Fallback */
    font-weight: 600; /* Fett, wie bei Avada üblich */
    line-height: 1;
    height: 1.2em; /* Höhe an die Schriftgröße anpassen, um die Ziffern auszublenden */
    overflow: hidden;
    white-space: nowrap; /* Verhindert Umbruch zwischen Zahl und Einheit */
}

/* Wrapper für die animierten Ziffern-Sets */
.cmp-carKPIs__animation-wrapper {
    display: inline-flex; /* Damit die Sets nebeneinander liegen */
}

/* Ein einzelnes Set von Ziffern (0-9), das vertikal verschoben wird */
.counter-set {
    display: inline-block;
    transition: transform 1.5s cubic-bezier(0.68, -0.55, 0.27, 1.55); /* Smoothe Animation */
}

/* Statische Zeichen wie Komma, Punkt, Bindestrich */
.counter-separator, .counter-static, .counter-space {
    display: inline-block;
    line-height: 1.2em; /* Vertikal zentrieren */
}

.counter-dash {
    margin: 0 0.1em;
}

/* Eine einzelne Ziffer innerhalb eines Sets */
.counter-digit {
    display: block;
    height: 1.2em; /* Muss mit der Höhe der Section und Line-Height übereinstimmen */
    line-height: 1.2em;
}

/* Einheit neben dem Wert */
.cmp-carKPIs__unit {
    font-size: 0.5em; /* Kleinere Schrift für die Einheit */
    font-weight: 400;
    margin-left: 0.2em;
}

/* Bezeichnung unter dem Wert */
.cmp-carKPIs__label {
    padding-top: 5px;
}

.cmp-carKPIs__label-text {
    font-size: 0.8em; /* Kleinere Schrift für die Bezeichnung */
    line-height: 1.4;
    color: inherit; /* Farbe vom Theme übernehmen */
    opacity: 0.8;
}

/* Diagonaler Trennstrich */
.cmp-carKPIs__diagonal {
    width: 2px;
    padding: 0;
}

.cmp-carKPIs__diagonal-element {
    width: 2px;
    height: 90%;
    margin: 5% auto;
    background-color: var(--awb-color8, #e0e0e0); /* Avada-Farbvariable nutzen, mit Fallback */
    transform: skewX(-20deg);
}

/* Responsive Anpassungen */
@media (max-width: 800px) {
    .cmp-carKPIs__animation-section {
        font-size: 1.8em;
    }
    .cmp-carKPIs__label-text {
        font-size: 0.75em;
    }
}