/* Block: Marken-Intro (Logo + Text)
   ------------------------------------------------------------------
   Gemessen an .figma-ref/20.08/Wandverblender.png: Logo auf den ersten
   drei Rasterspalten (rund 290 px breit), Text ab Spalte 4.
   Die Überschrift zieht ihre Farbe aus --color-heading und ist damit auf
   den DE-RYCK-Seiten rot.

   Tablet/Mobil abgeleitet: Logo oben, Text darunter.
   ------------------------------------------------------------------ */

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

.brand-intro-row {
    --bs-gutter-y: 24px;
}

.brand-intro-logo-img {
    width: auto;
    max-width: 290px;
    height: auto;
}

.brand-intro-headline {
    margin: 0 0 var(--space-sm);
    color: var(--color-heading);
    /* Literata SemiBold 25/35, ab 1200 40/50 – User 2026-09-16. Gilt auch,
       wenn die Überschrift als H1 ausgegeben wird (vorher dann 64px Bold). */
    font-family: var(--font-heading);
    font-weight: var(--fw-semibold);
    font-size: 25px;
    line-height: 35px;
}

@media (min-width: 1200px) {
    .brand-intro-headline {
        font-size: 40px;
        line-height: 50px;
    }
}

.brand-intro-text {
    max-width: 70ch;
    margin: 0;
    font-size: var(--fs-copy-s);
    line-height: 1.6;
    color: var(--color-text);
}

/* ══ Mobil: erst Text, dann Logo (seit 2.9.0) ══════════════════════════════
   Figma-Stand 2026-09-16 (Wandverblender mobil), Werte vom User:
   Logo 249 × 215, innerhalb des Elements 24px – Überschrift → Text und
   Text → Logo. Vorher stand das Logo oben. Tablet bleibt wie der Entwurf
   (Logo links, Text rechts ab 992, darunter gestapelt mit Logo oben). */
@media (max-width: 767.98px) {
    .brand-intro-logo {
        order: 2;
    }

    .brand-intro-headline {
        margin-bottom: 24px;
    }

    .brand-intro-logo-img {
        width: 249px;
        max-width: 100%;
    }
}