/* Block: Werte-Karten (aufklappbar, 3 Spalten)
   Sollwerte (User, 2026-08-07):
   Sektions-Überschrift  D 34px/normal · T/M 22px/26px · Literata Bold #263864
   Kartentitel           D 34px/normal · T/M 22px/26px · Literata Bold
                         offen  = #6BE381 auf blauem Grund #263864
                         zu     = #263864 auf weißem Grund
   Kartentext            Poppins 16px/1.6 weiß
   Karte                 Padding 32px · Titel→Text 32px · Eckenradius 16px
   Breiten Desktop       offen 50%, zugeklappt 25% (Gutter 24px frisst daraus
                         die im Figma gemessenen 48% / 23,5%)
   Unter 1200px          alle Karten offen und blau, untereinander
   Keine clamp()-Größen – feste Stufen je Breakpoint. */

/* Abstand oberhalb/unterhalb der Sektion: assets/css/section-spacing.css */

.value-cards-headline {
    font-family: var(--font-heading);
    font-weight: var(--fw-semibold);
    color: var(--color-dark);
    font-size: 22px;
    line-height: 26px;
    margin-top: 0;
    margin-bottom: var(--space-md);            /* 32px */
}

/* ── Spalten ─────────────────────────────────────────────── */
/* Basis = Mobile: jede Karte volle Breite, alle offen. */
.value-card-col {
    flex: 0 0 auto;
    width: 100%;
}

/* ── Karte ───────────────────────────────────────────────── */
.value-card {
    background-color: var(--color-dark);
    border: 1px solid var(--color-dark);
    border-radius: var(--radius-lg);           /* 16px */
    padding: var(--space-md);                  /* 32px */
    overflow: hidden;
}

.value-card-title {
    font-family: var(--font-heading);
    font-weight: var(--fw-semibold);
    font-size: 22px;
    line-height: 26px;
    margin: 0;
}

/* Der Button trägt keine eigene Optik – die Überschrift soll aussehen wie Text. */
.value-card-toggle {
    display: block;
    width: 100%;
    padding: 0;
    border: 0;
    background: none;
    text-align: left;
    font: inherit;
    color: var(--color-green);
    cursor: pointer;
}

.value-card-body {
    margin-top: var(--space-md);               /* 32px Abstand Titel → Text */
}

.value-card-text {
    font-family: var(--font-body);
    font-weight: var(--fw-normal);
    font-size: var(--fs-copy-s);               /* 16px */
    line-height: 1.6;
    color: var(--color-white);
    margin: 0;
}

/* ── Desktop (≥1200px): eine Karte offen, zwei zugeklappt ── */
@media (min-width: 1200px) {
    .value-cards-headline {
        font-size: 34px;
        line-height: normal;
    }

    .value-card-col {
        width: 25%;
        transition: width var(--transition);
    }

    .value-card-col.is-open {
        width: 50%;
    }

    .value-card-title {
        font-size: 34px;
        line-height: 40px;                     /* Figma (Karriere): Literata Semibold 34/40 */
        /* Zugeklappte Karten sind nur 25 % breit. Zwischen 1200 und 1440px
           standen einzelne lange Wörter bis zu 95px über den Rand
           („Raumdenkend", „Verwurzelt", „Mitdenken statt ausführen";
           gemessen 2026-09-22). Deshalb Silbentrennung wie in typography.css,
           aber schon ab 8 Zeichen – „Raumdenkend" hat nur 11.
           ⚠️ Bewusst OHNE overflow-wrap: break-word. Fehlt dem Browser das
           deutsche Trennwörterbuch (so im Headless-Testbrowser), zerschnitt
           es die Wörter ohne Strich („Raumde / nkend") – schlimmer als der
           Überstand. Die eigentliche Lösung (kleinere Schrift zugeklappter
           Karten zwischen 1200 und 1440px?) ist eine Gestaltungsfrage an Chris. */
        hyphens: auto;
        hyphenate-limit-chars: 8 3 3;
    }

    /* Zugeklappt: weiße Karte, dunkelblauer Titel, Text ausgeblendet. */
    .value-card-col:not(.is-open) .value-card {
        background-color: var(--color-white);
        border-color: var(--color-border);
    }

    .value-card-col:not(.is-open) .value-card-toggle {
        color: var(--color-dark);
    }

    .value-card-col:not(.is-open) .value-card-body {
        display: none;
    }

    /* ⚠️ Der Textkoerper wird ERST EINGEBLENDET, WENN die Spalte fertig
       gewachsen ist.

       Kundenfeedback 01 vom 2026-09-09, zwei Meldungen mit derselben Ursache:
         „Wenn ein Teaser geklickt wird, dann sieht man wie der Text so
          ausfaehrt…"                                    (Weserwaben)
         „Beim Wechsel der Tabs kommt es zu einem Bildspringer"  (Karriere)

       Grund: Die Breite laeuft ueber 0,2s von 25% auf 50%, der Koerper
       erscheint aber schlagartig (`display: none` ist nicht animierbar). Der
       Text stand dadurch zuerst in der SCHMALEN Spalte, brach dort um und
       wurde beim Wachsen sichtbar umgebrochen – genau das, was der Kunde als
       Ausfahren und Springen beschreibt.

       Die Verzoegerung von 0,2s entspricht der Dauer von `--transition`.
       Sie steht hier als feste Zahl, weil `--transition` die Kurzschreibweise
       „0.2s ease" ist und als Verzoegerungswert ungueltig waere. Wer die
       Dauer aendert, zieht diese Zahl mit.

       `both` haelt den Anfangswert schon waehrend der Verzoegerung – ohne das
       blitzte der Text im ersten Bild doch auf. */
    .value-card-col.is-open .value-card-body {
        animation: weser-value-card-ein 0.2s ease 0.2s both;
    }

    /* Zweiter Teil (2.15.9): Die Verzoegerung verhinderte nur, dass man den
       Umbruch SIEHT – die Hoehe sprang trotzdem, weil der unsichtbare Text in
       der schmalen Spalte vielzeilig stand. value-cards.js misst deshalb die
       Textbreite der offenen Karte und die Hoehe des laengsten Textes vorab:
       Der Text bricht von Anfang an endgueltig um (die Karte schneidet ihn per
       overflow: hidden ab, solange sie waechst), und jede offene Karte ist
       gleich hoch – die Reihe und alles darunter bleiben stehen.
       Ohne JavaScript fehlen die Variablen; dann gilt das Verhalten von vorher. */
    .value-card-body {
        width: var(--vc-text-breite, auto);
    }

    .value-card-col.is-open .value-card-body {
        min-height: var(--vc-text-hoehe, 0);
    }

    /* Dritter Teil (05.10.): Die Ueberschrift bekommt ab dem Klick ihre
       endgueltige Breite, statt waehrend der Animation umzubrechen (zwei-
       zeilige Titel wie „Qualitaet als Haltung" ruckten). Die aufklappende
       Karte schneidet den breiteren Titel ab, solange sie waechst – wie
       beim Text. Offene Titel sind gleich hoch, damit die Reihe steht.
       Masse aus value-cards.js; ohne JavaScript gilt `auto`. */
    .value-card-col.is-open .value-card-title {
        width: var(--vc-titel-offen, auto);
        min-height: var(--vc-titel-hoehe, 0);
    }

    .value-card-col:not(.is-open) .value-card-title {
        width: var(--vc-titel-zu, auto);
    }

    @keyframes weser-value-card-ein {
        from { opacity: 0; }
        to   { opacity: 1; }
    }

    /* Wer Bewegung reduziert haben will, bekommt den harten Wechsel: keine
       Breitenanimation, also auch nichts, worauf zu warten waere. */
    @media (prefers-reduced-motion: reduce) {
        .value-card-col { transition: none; }
        .value-card-col.is-open .value-card-body { animation: none; }
    }
}

/* ── Zwischenstufen unterhalb der Entwurfsbreite ─────────────
   Der Figma-Frame ist 1700px breit; dort trägt eine zugeklappte Karte
   („Raumdenkend", das längste Wort) die 34px mühelos. Darunter wird sie so
   eng, dass das Wort überstünde – es kann nicht umbrechen, und auf
   Silbentrennung ist kein Verlass (Browser ohne deutsches Trennwörterbuch
   zerschneiden es oder lassen es überstehen; im Test griff sie nie).
   Deshalb drei Stufen, jeweils nachgemessen bis kein Überstand mehr bleibt,
   Zeilenhöhe im Figma-Verhältnis 40/34. 26px war die Vorgabe von Chris
   (23.09.) – nachgemessen trägt sie erst ab rund 1300px, deshalb die feinere
   Staffel: 22px bis 1279, 25px bis 1439, 30px bis 1699, ab 1700 die 34px
   aus dem Entwurf.
   Die Polsterung geht unterhalb von 1700px von 32 auf 24px; die 8px je Seite
   sind genau das, was bei 1440px noch fehlte.
   Tablet und Mobil bleiben bei 22/26. */
@media (min-width: 1200px) and (max-width: 1699.98px) {
    .value-card {
        padding: 24px;
    }
}

@media (min-width: 1200px) and (max-width: 1279.98px) {
    .value-card-title {
        font-size: 22px;
        line-height: 26px;
    }
}

@media (min-width: 1280px) and (max-width: 1439.98px) {
    .value-card-title {
        font-size: 25px;
        line-height: 29px;
    }
}

@media (min-width: 1440px) and (max-width: 1699.98px) {
    .value-card-title {
        font-size: 30px;
        line-height: 35px;
    }
}