/* =====================================================================
   Liniengrafik auf der Startseite.
   Ein gestalterischer Akzent: dünne Linie, ruhiges Raster, nur der
   Endpunkt betont. Die Farbe kommt aus den Gestaltungswerten.
   ===================================================================== */

.home-chart {
    color: var(--color-primary, #0C5396);
    max-width: 100%;
}

.home-chart__title {
    margin: 0 0 .35rem;
    font-family: var(--font-heading-family, inherit);
    font-size: var(--font-meta-size, .8125rem);
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--color-text-muted, #5A6B7B);
}

/* Gleichmässig skaliert – kein Verzerren der Kurve. Die Höhe ergibt
   sich aus dem Seitenverhältnis der Zeichenfläche. */
.home-chart__svg {
    display: block;
    width: 100%;
    height: auto;
    /* Von Hand einstellbar unter Eckert › Einstellungen › Startseite:
       das Seitenverhältnis bestimmt die Höhe bei voller Breite, die
       Höhenbegrenzung deckelt sie auf schmalen Bildschirmen nach oben. */
    aspect-ratio: var(--home-chart-ratio, 1200 / 230);
    max-height: var(--home-chart-height, 220px);
    overflow: visible;
}

/* Raster: durchgezogene Haarlinien, eine Nuance neben der Fläche –
   niemals gestrichelt, das läse sich als Prognose. */
.home-chart__grid {
    stroke: var(--color-border, #DCE5EE);
    stroke-width: 1;
    vector-effect: non-scaling-stroke;
}

.home-chart__line {
    /* pathLength="1" im SVG normiert die Länge – dadurch zeichnet sich
       jede Kurve gleich schnell, ganz ohne JavaScript. */
    stroke-dasharray: 1;
    stroke-dashoffset: 1;
    animation: home-chart-draw 1.9s cubic-bezier(.22, .61, .36, 1) .25s forwards;
}

.home-chart__area {
    opacity: 0;
    animation: home-chart-fade 1.1s ease 1.1s forwards;
}

/* Der Endpunkt trägt einen Ring in Flächenfarbe statt einer Kontur. */
.home-chart__dot {
    fill: currentColor;
    stroke: var(--color-surface, #fff);
    stroke-width: 2;
    opacity: 0;
    transform-box: fill-box;
    transform-origin: center;
    animation: home-chart-pop .45s cubic-bezier(.34, 1.56, .64, 1) 1.9s forwards;
}

.home-chart__caption {
    margin: .5rem 0 0;
    font-size: var(--font-meta-size, .8125rem);
    color: var(--color-text-muted, #5A6B7B);
}

@keyframes home-chart-draw { to { stroke-dashoffset: 0; } }
@keyframes home-chart-fade { to { opacity: 1; } }
@keyframes home-chart-pop {
    from { opacity: 0; transform: scale(.4); }
    to   { opacity: 1; transform: scale(1); }
}

/* Wer Bewegung reduziert haben möchte, sieht die fertige Grafik. */
/* Mit JavaScript übernimmt der Beobachter die Steuerung: Die Grafik
   startet erst, wenn sie ins Bild kommt – und jedes Mal von Neuem. */
.home-chart--observed .home-chart__line {
    animation: none;
    stroke-dashoffset: 1;
}
.home-chart--observed .home-chart__area,
.home-chart--observed .home-chart__dot {
    animation: none;
    opacity: 0;
}

.home-chart--observed.is-drawing .home-chart__line {
    animation: home-chart-draw 1.9s cubic-bezier(.22, .61, .36, 1) .1s forwards;
}
.home-chart--observed.is-drawing .home-chart__area {
    animation: home-chart-fade 1.1s ease .95s forwards;
}
.home-chart--observed.is-drawing .home-chart__dot {
    animation: home-chart-pop .45s cubic-bezier(.34, 1.56, .64, 1) 1.75s forwards;
}

/* Wer Bewegung reduziert haben möchte, sieht die fertige Grafik. */
@media (prefers-reduced-motion: reduce) {
    .home-chart__line,
    .home-chart--observed .home-chart__line {
        animation: none;
        stroke-dashoffset: 0;
    }
    .home-chart__area,
    .home-chart__dot,
    .home-chart--observed .home-chart__area,
    .home-chart--observed .home-chart__dot {
        animation: none;
        opacity: 1;
    }
}

/* Der Block im Kennzahlen-Band */
.home-chart--band {
    margin-top: 2.5rem;
}

/* -----------------------------------------------------------------
   Bild in der Kontaktkarte des Kopfbereichs.
   Breite und Seitenverhältnis kommen als Variablen aus den
   Einstellungen; die Werte hier sind der Rückfall.
   ----------------------------------------------------------------- */
.hero__card-figure {
    margin: 0 0 1.25rem;
    width: var(--home-image-width, 100%);
    max-width: 100%;
    border-radius: var(--radius-md, 10px);
    overflow: hidden;
    line-height: 0;
}
/* Das Seitenverhältnis steht als Variable fest – auch im
   «Originalformat», wo es aus den Massen des Bildes stammt. Dadurch
   steht die Höhe schon vor dem Laden fest und nichts springt. */
.hero__card-figure img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: var(--home-image-ratio, 4 / 3);
    object-fit: cover;
}