/* Block: Download-Bereich (Kategorien + PDFs)
   Sollwerte am Figma-Screenshot ausgemessen (.figma-ref/Sprint 2/Infomaterial*.png
   mit .figma-ref/px.mjs und .figma-ref/ink.mjs), 2026-08-12:

   Gruppenkopf   96px hoch · Titel 24px Poppins SemiBold #263864
                 Chevron-Kreis 40 × 40 grün, 24px Abstand zum Titel
                 zugeklappt Grund #F4F5F7, aufgeklappt weiß
                 D/T randlos über die volle Breite, Mobil nur Inhaltsbreite
   Gruppenabstand 16px
   Karten        Grund #F5F5F5 · Rahmen 1px #263864 · Radius 4px
                 Titel 16px/24px SemiBold · Meta 14px Regular
                 Download-Icon 18 × 18, rechts, vertikal mittig
                 Innenabstand 12px 16px
   Raster        D 3 Spalten, Spaltenabstand 48px, Zeilenabstand 32px
                 (Karte wird damit 458px breit wie im Figma)
                 T/M 1 Spalte, Abstand 24px
   Keine clamp()-Größen – feste Stufen je Breakpoint. */

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

.dl-group + .dl-group {
    margin-top: 16px;
}

/* ── Gruppenkopf ─────────────────────────────────────────── */

.dl-group-head {
    /* h2 – Vorgaben aus typography.css zurücksetzen, das Aussehen macht der Button. */
    margin: 0;
    font: inherit;
    background-color: var(--color-surface);    /* #F4F5F7 */
}

/* Aufgeklappt steht der Kopf im Figma auf Weiß. */
.dl-group.is-open > .dl-group-head {
    background-color: transparent;
}

.dl-group-toggle {
    display: flex;
    align-items: center;
    gap: 24px;
    width: 100%;
    min-height: 96px;
    /* .container-xl liefert bereits max-width und die seitlichen Ränder.
       Der Innenabstand oben/unten greift erst, wenn eine lange Kategorie
       mehrzeilig umbricht – bei einer Zeile bestimmt min-height die Höhe. */
    padding-top: 24px;
    padding-bottom: 24px;
    background: none;
    border: 0;
    text-align: left;
    cursor: pointer;
}

.dl-group-title {
    font-family: var(--font-body);
    font-weight: var(--fw-semibold);
    font-size: 24px;
    line-height: 30px;
    color: var(--color-dark);
}

.dl-group-icon {
    flex: 0 0 auto;
    display: inline-flex;
    color: var(--color-green);
}

/* Zugeklappt zeigt der Pfeil nach unten – das SVG ist nach oben gezeichnet. */
.dl-group:not(.is-open) .dl-group-icon {
    transform: rotate(180deg);
}

.dl-group-toggle:focus-visible {
    outline: 2px solid var(--color-dark);
    outline-offset: -2px;
}

/* ── Karten ──────────────────────────────────────────────── */

.dl-group-panel {
    padding-top: 0;
    padding-bottom: 24px;
}

/* .dl-cards.row statt nur .dl-cards: base.css setzt den Gutter über
   `.row:not([class*="g-"])` und schlägt mit zwei Selektoren eine einfache
   Klasse – sonst bleibt --bs-gutter-x auf dem globalen Wert stehen. */
.dl-cards.row {
    list-style: none;
    margin-bottom: 0;
    padding: 0;
    --bs-gutter-x: 0px;
    --bs-gutter-y: 24px;
}

.dl-card {
    display: flex;
    align-items: center;
    gap: 16px;
    height: 100%;
    padding: 12px 16px;
    background-color: #F5F5F5;
    border: 1px solid var(--color-dark);
    border-radius: 4px;
    text-decoration: none;
    color: var(--color-dark);
    transition: background-color 0.15s ease;
}

.dl-card:hover,
.dl-card:focus-visible {
    background-color: #ebebeb;
    color: var(--color-dark);
}

.dl-card-text {
    flex: 1 1 auto;
    min-width: 0;
}

.dl-card-title {
    display: block;
    font-family: var(--font-body);
    font-weight: var(--fw-semibold);
    font-size: var(--fs-copy-s);               /* 16px */
    line-height: 24px;
}

.dl-card-meta {
    display: block;
    font-family: var(--font-body);
    font-weight: var(--fw-normal);
    font-size: var(--fs-copy-xs);              /* 14px */
    line-height: 21px;
}

/* Figma setzt zwischen Dateityp und Größe eine feste Lücke, kein Leerzeichen. */
.dl-card-size {
    margin-left: 12px;
}

.dl-card-icon {
    flex: 0 0 auto;
    width: 18px;
    height: 18px;
}

/* ── Mobil: Bänder nur über die Inhaltsbreite ────────────── */
@media (max-width: 767.98px) {
    .dl-group-head {
        margin-left: var(--grid-margin);
        margin-right: var(--grid-margin);
    }

    /* Das Band ist hier schon eingerückt – der Titel braucht trotzdem
       24px Luft, sonst klebt er am Rand (Figma: Text bei 40px). */
    .dl-group-toggle {
        padding-left: 24px;
        padding-right: 24px;
    }
}

/* ── Desktop (≥1200px) ───────────────────────────────────── */
@media (min-width: 1200px) {
    .dl-cards.row {
        --bs-gutter-x: 48px;                   /* ergibt genau 458px Kartenbreite */
        --bs-gutter-y: 32px;
    }

    /* Karten sind im Figma NICHT gleich hoch – sie wachsen mit dem Titel. */
    .dl-card {
        height: auto;
    }
}

/* Lange Kategorien („Leistungserklärungen und Sicherheitsdatenblätter") liefen
   mobil bis zu 91px aus dem Kopf (2026-09-16). Der Titel ist ein Flex-Element
   und wurde ohne min-width:0 nie schmaler als sein längstes Wort; die
   Silbentrennung aus typography.css erbt er vom h2. */
.dl-group-title {
    min-width: 0;
}