/* Block: Auswahl der Verlegeart (2.21.0)
   ------------------------------------------------------------------
   Figma-Werte vom User, 19.10. (Desktop, Board „04_Update:
   Produktbereich-Mauerabdeckungen_DeRyck“):

     Überschrift      Literata 700, 42 / 42, #263864
     Abstände         Überschrift → Intro 16 · Intro → Kacheln 32
     Intro            Poppins 400 16 / 25.6, fett = 600
     Kachel           Rand 2px #263864, Radius 32 (Kunde 29.10.: alle Ecken
                      rund, Figma hatte oben links 0), Innenabstand 24,
                      Zeilen 20, Spalten 24, Abstand der Kacheln 32
     Bild             220 × 154, Rand 1px #263864, ohne Schatten (Kunde
                      29.10.; Figma: x -6 y 0 Blur 11.9 #000 25 %)
     Symbol           24px, immer gefüllt (Chris 28.10.: aktiv erkennt man
                      nur am Knopf)
     Titel            Poppins 700 20 / 26 · Symbol → Titel 12 · Titel → Text 8
     Beschreibung     Poppins 600 17 / 24.65
     Trennlinie       2px #263864
     Liste            2 Spalten, Zeilen 10, Spalten 24,
                      Poppins 500 16 / 21 #050d22, Symbol 11 × 11
     Liste → Knopf    24
     Knopf            8/16, Radius 8, Poppins 600 15 / 21 – aktiv grün,
                      inaktiv blau mit grüner Schrift
     Band             ab der Trennlinie, Radius unten 24,
                      Innenabstand 22 24, Text ↔ Knopf 32,
                      Text Poppins 600 19 / 28.5
     Broschüre-Knopf  10/16, #6BE381, Rand 1px, Radius 8, 600 15 / 21

   Tablet (768–1199) und Mobil (< 768), Figma-Exporte vom 28.10.:
     - Kachelinhalt untereinander: Bild volle Breite (Seitenverhältnis wie
       Desktop), Symbol + Titel, Text, Linie, Liste einspaltig, Knopf volle
       Breite. Alle vier Ecken rund.
     - Das Band liegt hinter den GANZEN Kacheln (beginnt an der Oberkante).
       Umgesetzt als dunkler Grund des Rasters selbst – der dunkle Rand der
       Kacheln verschmilzt damit.
     - Tablet: Kacheln nebeneinander, Broschürenzeile Text links / Knopf
       rechts. Mobil: Kacheln untereinander, Text über dem Knopf (volle
       Breite).
     - Zeilenumbrüche aus dem Desktop gelten in der Liste nicht, beim Titel
       nur bis Tablet.

   Tablet/Mobil, Figma-Werte vom User 28.10.:
     Überschrift      Tablet Literata 600 25 / 35 (mobil h2 = dasselbe)
     Raster           Tablet Zeilen/Spalten 24, Radius 24 wie die Kacheln
     Kachel           Innenabstand 16, Rand 2, Radius 24, Zeilen 16
     Knopf            min. 48 hoch, 10/12, Radius 8
     Broschürenzeile  Tablet Zeilen/Spalten 24, Text Poppins 600 16 / 24,
                      Symbol 20 × 20
   Nicht in Figma gepflegt, aus den Exporten gemessen (28.10.):
     Intro → Kacheln 24 (Intro 16 / 24) · Linie → Liste 10 · Hinweise 16 / 22,
     Abstand 10 · Mobil Kachel ↔ Kachel 8, Broschürenzeile 16 rundum.

   Poppins 500 (Liste): Der Schnitt ist seitenweit NICHT geladen – sonst
   würden Menü, Selektor und Shop, die heute 500 anfordern und 400 zeigen,
   sichtbar fetter (Prüfung 19.10.). Deshalb liegt er nur für diese Liste
   im Theme, unter eigenem Namen (assets/fonts, Latin, 7,7 KB, OFL).
   ------------------------------------------------------------------ */

@font-face {
    font-family: 'Weser Poppins Medium';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url(../../fonts/poppins-500-latin.woff2) format('woff2');
}

.block-verlegeart {
    background-color: var(--color-white);
}

.verlegeart-headline {
    margin: 0 0 16px;
    color: var(--color-heading);
}

.verlegeart-intro {
    max-width: 980px;
    margin-bottom: 24px;
    font-size: var(--fs-copy-s);
    line-height: 24px;
    color: var(--color-text);
}

.verlegeart-intro p {
    margin: 0;
}

.verlegeart-intro strong,
.verlegeart-intro b {
    font-weight: var(--fw-semibold);
}

/* ══ MOBIL (Grundlage) ════════════════════════════════════════════════ */

/* Raster = Band: dunkler Grund hinter Kacheln und Broschürenzeile. */
.vl-grid {
    position: relative;
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
    border-radius: 24px;
    background-color: var(--color-dark);
}

.vl-card {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    /* Zeilen 10 = Linie → Liste; davor und danach je 16 über margin-top
       an Linie und Knopf (Export: Text → Linie 16, Linie → Liste 10). */
    gap: 10px;
    padding: 16px;
    background-color: var(--color-white);
    border: 2px solid var(--color-dark);
    border-radius: 24px;
    cursor: pointer;            /* ganze Kachel klickbar (verlegeart.js) */
    /* Angehoben wird über `top`, nicht über transform (Chris 19.10.): Mit
       transform verschiebt der Browser die Kachel als eigene Grafikebene, das
       Bild lief dabei sichtbar verzögert hinterher; will-change machte sie
       zusätzlich unscharf. Über `top` wird alles gemeinsam gezeichnet, auf
       ganze Pixel gerundet – bei 2px nicht zu sehen, aber scharf. */
    top: 0;
    transition: top var(--transition), box-shadow var(--transition);
}

/* Aus dem Figma-Make-Video (19.10., Bild für Bild): Die aktive Kachel hat
   einen weichen Schatten, die Kachel unter der Maus hebt sich um rund 2px. */
.vl-card.is-active {
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.10);
}

.vl-card:hover {
    top: -2px;
}

@media (prefers-reduced-motion: reduce) {
    .vl-card:hover {
        top: 0;
    }
}

.vl-card-top {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.vl-card-media {
    width: 100%;
    aspect-ratio: 220 / 154;
    border: 1px solid var(--color-dark);
    background-color: var(--color-white);
    overflow: hidden;
}

.vl-card-img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.vl-card-head {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    min-width: 0;
}

/* Symbol: Farbe je Verlegeart, immer gefüllt. */
.vl-symbol {
    flex: 0 0 auto;
    stroke: currentColor;
    fill: currentColor;
}

.vl-card--verzahnung { --vl-farbe: var(--color-dark); }
.vl-card--flach      { --vl-farbe: var(--color-green); }

.vl-card-symbol {
    width: 24px;
    height: 24px;
    margin-top: 1px;            /* mittig zur ersten Titelzeile (26) */
    color: var(--vl-farbe);
}

.vl-card-heading {
    min-width: 0;
}

.vl-card-title {
    margin: 0 0 8px;
    font-family: var(--font-body);
    font-size: 20px;
    font-weight: var(--fw-bold);
    line-height: 26px;
    color: var(--color-dark);
}

/* Mobil bricht der Titel frei um („Verlegung mit flacher / Unterseite“). */
.vl-card-title br {
    display: none;
}

.vl-card-text {
    margin: 0;
    font-size: 17px;
    font-weight: var(--fw-semibold);
    line-height: 24.65px;
    color: var(--color-dark);
}

.vl-card-rule {
    height: 2px;
    margin-top: 6px;
    background-color: var(--color-dark);
}

/* Liste zeilenweise: Auf Desktop links, rechts, links … – auf Tablet und
   Mobil dieselbe Reihenfolge untereinander (Figma 28.10.). */
.vl-list {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px 24px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.vl-list-item {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    font-family: 'Weser Poppins Medium', var(--font-body);
    font-size: var(--fs-copy-s);
    font-weight: 500;
    line-height: 22px;
    color: #050d22;
}

/* Die Umbrüche gehören zur Zweispaltigkeit auf Desktop. */
.vl-list-item br {
    display: none;
}

.vl-list-symbol {
    width: 11px;
    height: 11px;
    margin-top: 5px;            /* mittig zur ersten Zeile (22 bzw. 21) */
    color: var(--vl-farbe);
}

.vl-card-foot {
    display: flex;
    margin-top: 6px;
}

/* Knopf: aktiv grün, inaktiv blau mit grüner Schrift. Hover invertiert
   wie alle Knöpfe der Seite (buttons.css) – schon beim Überfahren der
   Kachel, weil die ganze Kachel klickt. Ohne sichtbaren Rand (Kunde 29.10.:
   auf Weiß nicht nötig); der Rand bleibt transparent, damit die Größe
   gleich bleibt. */
.vl-card-btn {
    flex: 1 1 auto;
    min-height: 48px;
    padding: 10px 12px;
    border: 1px solid transparent;
    border-radius: 8px;
    background-color: var(--color-dark);
    color: var(--color-green);
    font-family: var(--font-body);
    font-size: 15px;
    font-weight: var(--fw-semibold);
    line-height: 21px;
    cursor: pointer;
    transition: background-color var(--transition), border-color var(--transition), color var(--transition), box-shadow var(--transition);
}

/* Schatten unter dem Knopf beim Überfahren – Figma-Make-Video. */
.vl-card:hover .vl-card-btn,
.vl-card-btn:focus-visible {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.20);
}

.vl-card.is-active .vl-card-btn {
    background-color: var(--color-green);
    color: var(--color-dark);
}

.vl-card:hover .vl-card-btn,
.vl-card-btn:focus-visible {
    background-color: var(--color-green);
    color: var(--color-dark);
}

.vl-card.is-active:hover .vl-card-btn,
.vl-card.is-active .vl-card-btn:focus-visible {
    background-color: var(--color-dark);
    color: var(--color-green);
}

.vl-card-btn:focus-visible {
    outline: 2px solid var(--color-dark);
    outline-offset: 2px;
}

/* ── Band und Broschüre ───────────────────────────────────────── */
/* Nur Desktop: dort beginnt das Band erst an der Trennlinie. */
.vl-band {
    display: none;
}

.vl-cta {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 16px;
    padding: 8px 16px 16px;             /* + 8 Rasterabstand = 16 */
}

.vl-cta-text {
    margin: 0;
    font-size: var(--fs-copy-s);
    font-weight: var(--fw-semibold);
    line-height: 24px;
    color: var(--color-white);
}

.vl-cta-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 48px;
    padding: 10px 16px;
    border: 1px solid var(--color-green);
    border-radius: 8px;
    background-color: var(--color-green);
    color: var(--color-dark);
    font-size: 15px;
    font-weight: var(--fw-semibold);
    line-height: 21px;
    text-decoration: none;
    white-space: nowrap;
    transition: background-color var(--transition), color var(--transition);
}

/* Invertieren auf blauem Grund: Der grüne Rand hält den Knopf sichtbar. */
.vl-cta-btn:hover,
.vl-cta-btn:focus-visible {
    background-color: var(--color-dark);
    color: var(--color-green);
}

.vl-cta-btn:focus-visible {
    outline: 2px solid var(--color-white);
    outline-offset: 2px;
}

.vl-cta-icon {
    flex: 0 0 auto;
}

/* ══ TABLET (768–1199) ════════════════════════════════════════════════ */
@media (min-width: 768px) {
    .vl-grid {
        grid-template-columns: 1fr 1fr;
        gap: 24px;
    }

    .vl-card-title br {
        display: inline;
    }

    .vl-cta {
        grid-column: 1 / -1;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        gap: 24px;
        padding: 0 24px 24px;
    }
}

/* Nur Tablet: Beide Kacheln teilen sich die Zeilen des Rasters – Bild und
   Titel, Linie, JEDEN Hinweis einzeln und den Knopf (subgrid, zwei Ebenen).
   So stehen Linien, Hinweise und Knöpfe nebeneinander auf einer Höhe, auch
   wenn ein Hinweis in einer Kachel zweizeilig ist (Figma 28.10.: rechts steht
   „Dehnungsfugen“ auf Höhe von „Stoßfugen“ links). --vl-punkte = größte
   Hinweiszahl beider Kacheln, setzt das Template. */
@media (min-width: 768px) and (max-width: 1199.98px) {
    .verlegeart-headline {
        font-size: 25px;
        font-weight: var(--fw-semibold);
        line-height: 35px;
    }

    .vl-grid {
        grid-template-rows: auto auto repeat(var(--vl-punkte, 5), auto) auto auto;
    }

    .vl-card {
        display: grid;
        grid-row: 1 / span calc(var(--vl-punkte, 5) + 3);
        grid-template-rows: subgrid;
        row-gap: 10px;                  /* wie Mobil */
    }

    .vl-card--verzahnung { grid-column: 1; }
    .vl-card--flach      { grid-column: 2; }

    .vl-list {
        grid-row: span var(--vl-punkte, 5);
        grid-template-rows: subgrid;
        row-gap: 10px;
        /* Die verschachtelte Liste erbt die 24er Spuren des Rasters, der
           Browser rechnet ihr oben die Hälfte der Differenz zu (gemessen 16
           statt 10) – hier zurückgenommen. */
        margin-top: -6px;
    }

    .vl-card-foot {
        align-self: end;
    }

    .vl-cta {
        grid-row: calc(var(--vl-punkte, 5) + 4);
    }
}

/* ══ DESKTOP (ab 1200) ════════════════════════════════════════════════
   Zeilen: 1 Bild/Titel · 2 Trennlinie · 3 Liste · 4 Knopf · 5 Broschüre.
   Die Kacheln laufen über die Zeilen 1–4 und übernehmen sie (subgrid);
   das Band liegt in den Zeilen 2–5 dahinter. */
@media (min-width: 1200px) {
    .verlegeart-headline {
        font-size: 42px;
        font-weight: var(--fw-bold);
        line-height: 1;
    }

    .verlegeart-intro {
        margin-bottom: 32px;
        line-height: 25.6px;
    }

    .vl-grid {
        grid-template-rows: auto auto auto auto auto;
        column-gap: 32px;
        row-gap: 20px;
        border-radius: 0;
        background-color: transparent;
    }

    .vl-card {
        display: grid;
        grid-row: 1 / 5;
        grid-template-rows: subgrid;
        gap: 20px;
        padding: 24px;
        border-radius: 32px;
    }

    .vl-card--verzahnung { grid-column: 1; }
    .vl-card--flach      { grid-column: 2; }

    .vl-card-top {
        flex-direction: row;
        flex-wrap: wrap;
        align-items: flex-start;
        gap: 20px 24px;
    }

    .vl-card-media {
        flex: 0 0 220px;
        width: 220px;
        height: 154px;
        aspect-ratio: auto;
    }

    .vl-card-head {
        flex: 1 1 260px;
    }

    .vl-card-rule {
        margin-top: 0;
    }

    .vl-list {
        grid-template-columns: 1fr 1fr;
    }

    .vl-list-item {
        line-height: 21px;
    }

    .vl-list-item br {
        display: inline;
    }

    .vl-card-foot {
        justify-content: flex-end;
        align-self: end;
        margin-top: 4px;        /* 20 Zeilenabstand + 4 = 24 Liste → Knopf */
    }

    .vl-card-btn {
        flex: 0 0 auto;
        min-height: 0;
        padding: 8px 16px;
    }

    .vl-band {
        display: block;
        grid-column: 1 / -1;
        grid-row: 2 / 6;
        border-radius: 0 0 24px 24px;
        background-color: var(--color-dark);
    }

    /* Liegt im Band. Der Zeilenabstand des Rasters (20) gehört nicht dazu –
       der Innenabstand 22 zählt ab der Kachelunterkante. */
    .vl-cta {
        position: relative;
        z-index: 1;
        grid-row: 5;
        justify-content: center;
        gap: 32px;
        margin-top: -20px;
        padding: 22px 24px;
    }

    .vl-cta-text {
        font-size: 19px;
        line-height: 28.5px;
    }

    .vl-cta-btn {
        min-height: 0;
    }
}