/* Weser Theme – Inspiration Detailseite */

/* ── Hero: Kategorie-Tag ── */
.insp-hero .container-xl {
    position: relative;
}
.insp-hero-tag {
    position: absolute;
    /* An der Content-Kante ausrichten statt an der Container-Außenkante –
       sonst klebt das Tag bei Viewports ≥ Container-max-width am Bildrand. */
    right: var(--grid-margin);
    bottom: 8px;
    display: inline-block;
    padding: 6px 16px;
    border: 1.5px solid var(--color-primary);
    border-radius: 6px;
    color: var(--color-white);
    background: rgba(38, 56, 100, 0.35);
    font-family: var(--font-body);
    font-size: var(--fs-copy-s);
    backdrop-filter: blur(2px);
}

/* Mobil: Das Tag lag absolut unten rechts – und damit über dem Untertitel,
   sobald der zweizeilig wurde (nachgemessen 2026-09-16, bestand schon vor
   2.8.0). Unter 768px steht es deshalb im Fluss unter dem Text, auf der
   Textkante (Einzug der Hero-Klammer, 42px). */
@media (max-width: 767.98px) {
    .insp-hero-tag {
        position: static;
        margin: 16px 0 0 42px;
    }
}

/* ── Intro (zentriert) ── */
.insp-intro {
    padding: var(--space-section) 0 var(--space-section-sm);
    background: var(--color-white);
}
/* Figma: T/M 25px/35px · Desktop 40px/auto (vorher clamp = krummer Zwischenwert) */
.insp-intro-headline {
    font-family: var(--font-heading);
    font-weight: var(--fw-semibold);
    color: var(--color-heading);
    font-size: 25px;
    line-height: 35px;
    margin-bottom: 20px;
    text-align: center;
}
@media (min-width: 1200px) {
    .insp-intro-headline {
        font-size: 40px;
        line-height: normal;
    }
}
.insp-intro-text {
    font-family: var(--font-body);
    font-size: 16px;
    line-height: normal;
    color: var(--color-text);
    max-width: 900px;
    margin: 0 auto;
}

/* ── Gemeinsame Sektions-Überschrift (linksbündig) ── */
.insp-section {
    padding: var(--space-section-sm) 0;
    background: var(--color-white);
}
/* Basis = „Besonders" und Related: T/M 22px/26px · Desktop 34px/auto.
   Die Galerie hat eine eigene, größere Stufe (siehe unten). */
.insp-section-headline {
    font-family: var(--font-heading);
    font-weight: var(--fw-semibold);
    color: var(--color-heading);
    font-size: 22px;
    line-height: 26px;
    margin-bottom: 28px;
}

@media (min-width: 1200px) {
    .insp-section-headline {
        font-size: 34px;
        line-height: normal;
    }
}

/* Galerie „So sieht draußen aus": T/M 25px/35px · Desktop 40px/auto */
.insp-gallery .insp-section-headline {
    font-size: 25px;
    line-height: 35px;
}

@media (min-width: 1200px) {
    .insp-gallery .insp-section-headline {
        font-size: 40px;
        line-height: normal;
    }
}

/* ── Galerie (Figma: 2 Bilder oben, 3 unten) ── */
.insp-gallery-grid {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-auto-rows: 320px;
    gap: 24px;
    grid-template-areas:
        "a a a a b b b b b b b b"
        "c c c c c d d d e e e e";
}
.insp-gallery-cell {
    margin: 0;
    border-radius: var(--radius-md);
    overflow: hidden;
}
.insp-gallery-cell img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.insp-gallery-cell.g-a { grid-area: a; }
.insp-gallery-cell.g-b { grid-area: b; }
.insp-gallery-cell.g-c { grid-area: c; }
.insp-gallery-cell.g-d { grid-area: d; }
.insp-gallery-cell.g-e { grid-area: e; }
.insp-gallery-cell.g-f { grid-area: e; } /* Fallback: 6. Bild teilt sich die letzte Spalte */

@media (max-width: 991px) {
    .insp-gallery-grid {
        grid-auto-rows: 220px;
        gap: 16px;
    }
}
@media (max-width: 767px) {
    .insp-gallery-grid {
        grid-template-columns: 1fr 1fr;
        grid-auto-rows: 150px;
        grid-template-areas:
            "a a"
            "b b"
            "c d"
            "e e";
    }
}

/* ── „Das macht draußen so besonders" ── */
.insp-meta-row {
    display: flex;
    flex-wrap: wrap;
    gap: 16px 48px;
    margin-bottom: 32px;
}
.insp-meta {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    font-family: var(--font-body);
    font-size: 20px;
    line-height: normal;
    color: var(--color-text);
}
.insp-meta strong {
    font-weight: var(--fw-semibold);
}
/* Symbol dunkelblau mit gruenem Quadrat dahinter – Kundenfeedback 01 vom
   2026-09-09: „da fehlt das gruene quadrat und das icon soll blau sein".
   Stand vorher auf `--color-primary` (gruen) und ganz ohne Quadrat.

   Das Quadrat sitzt als Pseudo-Element unten rechts HINTER dem Strichbild –
   dieselbe Anordnung wie bei den Icon-Karten, wo es Teil der SVG ist. Hier
   ist die SVG im Template eingebettet und traegt keins, deshalb per CSS. */
.insp-meta-icon {
    position: relative;
    display: inline-flex;
    color: var(--color-icon-outline);
}

.insp-meta-icon::before {
    content: '';
    position: absolute;
    right: -4px;
    bottom: -4px;
    width: 14px;
    height: 14px;
    background-color: var(--color-accent);
    z-index: 0;
}

.insp-meta-icon svg {
    position: relative;
    z-index: 1;
}
/* Farbfeld quadratisch – der Entwurf zeigt ein Quadrat, die Datei ist
   150x100. Ohne feste Hoehe UND `object-fit` kaeme sie liegend heraus. */
.insp-meta-swatch {
    width: 28px;
    height: 28px;
    border-radius: 4px;
    object-fit: cover;
    flex-shrink: 0;
}

/* Farbe (Kunde 09.11.): Symbol, „Farbe:“, dann je Farbe Kachel + Name.
   Eine Farbe bricht nie in sich um; die zweite rückt bei Platzmangel unter
   die erste (bündig mit ihr, nicht unter das Symbol). */
.insp-meta--farbe {
    align-items: flex-start;
}
.insp-meta--farbe > .insp-meta-icon,
.insp-meta--farbe > strong {
    flex: 0 0 auto;
}
.insp-meta--farbe > .insp-meta-icon {
    margin-top: 3px;             /* mittig zur ersten Zeile (30 hoch) */
}
.insp-farben {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 24px;
    min-width: 0;
}
.insp-farbe {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    white-space: nowrap;
}
.insp-info-card {
    background: var(--color-white);
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: var(--radius-md);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
    padding: 28px;
    height: 100%;
}
/* Figma: T/M 18px/20px · Desktop 24px/30px */
.insp-info-card h3 {
    font-family: var(--font-heading);
    font-weight: var(--fw-bold);
    color: var(--color-heading);
    font-size: 18px;
    line-height: 20px;
    margin-bottom: 14px;
}

@media (min-width: 1200px) {
    .insp-info-card h3 {
        font-size: 24px;
        line-height: 30px;
    }
}

.insp-info-card p {
    font-family: var(--font-body);
    font-size: var(--fs-copy-s);
    line-height: 1.7;
    color: var(--color-text);
    margin-bottom: 22px;
}

/* `.btn-blue` ist nach buttons.css umgezogen (global), weil Sprint-2-Blöcke ihn
   ebenfalls brauchen und single-inspiration.css nur auf Inspirationsseiten lädt. */

/* ── Related-Slider ── */
.insp-related {
    padding: var(--space-section-sm) 0;
    background: var(--color-white);
}

/* Mauersystem-Teaser = geteiltes Element `block-wall-system-teaser`
   (Markup via weser_wall_system_teaser(), CSS in blocks/wall-system-teaser.css). */

/* ── Final-CTA ── (nutzt .block-text-cta-Stile; hier nur Sicherstellung) */
.insp-cta {
    background: var(--color-white);
}

/* Figma: Inspirations-CTA hat auf Desktop 34px/auto – abweichend vom
   text-cta-Block auf normalen Seiten (32px/48px). T/M sind identisch (22/26). */
@media (min-width: 1200px) {
    .insp-cta .text-cta-headline {
        font-size: 34px;
        line-height: normal;
    }
}

@media (max-width: 767px) {
    .insp-meta-row { flex-direction: column; gap: 14px; }

    /* Handy: Farben untereinander unter „Farbe:“, eingerückt um Symbol +
       Abstand (24 + 12) – lange Namen wie „M43 Beigegrün nuanciert“
       passen so auch bei 360px ohne Umbruch. */
    .insp-meta--farbe { flex-wrap: wrap; row-gap: 8px; }
    .insp-farben { flex-basis: 100%; flex-direction: column; padding-left: 36px; }
}

/* ── Kategorie-Hero: kein dunkles Panel-Overlay wie die Detailseite (Figma), ── */
/*    nur leichte Abdunklung + Textschatten für Lesbarkeit auf hellen Bildern.  */
.block-hero.insp-cat-page-hero.has-overlay::before {
    background: linear-gradient(
        to top,
        rgba(0, 0, 0, 0.42) 0%,
        rgba(0, 0, 0, 0.18) 45%,
        rgba(0, 0, 0, 0.04) 100%
    );
}
.insp-cat-page-hero .hero-headline,
.insp-cat-page-hero .hero-subline {
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.4);
}

/* Intro-WYSIWYG: saubere Absatz-Abstände (Feinschliff-Details folgen). */
.insp-intro-text > :first-child { margin-top: 0; }
.insp-intro-text > :last-child { margin-bottom: 0; }

/* Detail-Related-Slider: Querformat-Karten (Figma 473×300), abweichend vom
   Hochkant-Slider auf normalen Seiten (Produkt-/Mauerabdeckungsseite). */
.insp-related .inspiration-slide-card .inspiration-card-img-wrap {
    aspect-ratio: 473 / 300;
}

/* Related-Kartentitel: T/M 18px/20px · Desktop 24px/30px.
   Nur hier – der Hochkant-Slider auf normalen Seiten behält 22/26 bzw. 24/30. */
.insp-related .inspiration-slide-card .inspiration-card-title {
    font-size: 18px;
    line-height: 20px;
}

@media (min-width: 1200px) {
    .insp-related .inspiration-slide-card .inspiration-card-title {
        font-size: 24px;
        line-height: 30px;
    }
}

/* ── Kategorie-Grid → Slider auf Tablet/Mobil, Grid auf Desktop ── */
@media (min-width: 992px) {
    /* Desktop: Swiper ist deaktiviert (JS), Karten als 3er-Grid (Flexbox). */
    .category-swiper .swiper-wrapper {
        flex-wrap: wrap;
        gap: 24px;
        transform: none !important;
    }
    .category-swiper .swiper-slide {
        width: calc((100% - 48px) / 3);
        margin: 0 !important;
        height: auto;
    }
}
.category-swiper .swiper-slide { height: auto; }
.category-swiper .swiper-slide > .inspiration-card { height: 100%; }

/* Pagination wie bei den anderen Slidern: blaue Kästchen, rechtsbündig. */
.category-swiper .swiper-pagination {
    position: static;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 8px;
    width: 100%;
    margin-top: 24px;
}
.category-swiper .swiper-pagination-bullet {
    width: 18px;
    height: 18px;
    margin: 0 !important;
    border-radius: var(--radius-sm);
    background: var(--color-white);
    border: 1.5px solid var(--color-pagination);
    opacity: 1;
    transition: background-color var(--transition);
}
.category-swiper .swiper-pagination-bullet-active {
    background: var(--color-pagination);
}

/* Mobil mittig – Kundenfeedback 01, Mobil 18 (Chris, 21.09.). */
@media (max-width: 767.98px) {
    .category-swiper .swiper-pagination {
        justify-content: center;
    }
}

/* Ab 992px gibt es keinen Slider mehr (JS zerstört ihn) → Pagination komplett weg.
   Muss NACH der allgemeinen Pagination-Regel stehen, sonst gewinnt deren display:flex. */
@media (min-width: 992px) {
    .category-swiper .swiper-pagination {
        display: none;
    }
}

/* ══ Bildergalerie: Hover-Skalierung + Lightbox ══════════════════════════
   Kundenfeedback 01 vom 2026-09-09: „Die Bilder sollten sich beim Mouseover
   leicht skalieren (wie auf anderen Seiten bereits umgesetzt) und sich bei
   Klick vergroessern (Lightbox)."

   Die 1.04 sind vom Mauersystem-Teaser uebernommen (dort 1.02 auf einer
   deutlich breiteren Flaeche) – bei diesen kleineren Kacheln traegt etwas
   mehr, ohne unruhig zu wirken. Skaliert wird das BILD, nicht die Zelle:
   Die Zelle hat `overflow: hidden`, dadurch bleibt die Rasterkante stehen
   und das Motiv waechst nur hinein. */
.insp-gallery-trigger {
    display: block;
    width: 100%;
    height: 100%;
    padding: 0;
    border: 0;
    background: none;
    cursor: zoom-in;
}

.insp-gallery-trigger img {
    transition: transform var(--transition);
}

.insp-gallery-trigger:hover img,
.insp-gallery-trigger:focus-visible img {
    transform: scale(1.04);
}

.insp-gallery-trigger:focus-visible {
    outline: 3px solid var(--color-heading);
    outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
    .insp-gallery-trigger img { transition: none; }
    .insp-gallery-trigger:hover img,
    .insp-gallery-trigger:focus-visible img { transform: none; }
}

/* ── Die Lightbox selbst ─────────────────────────────────────────────────
   Liegt direkt im <body> (lightbox.js haengt sie dorthin), damit kein
   `overflow: hidden` und kein `transform` eines Vorfahren sie einsperrt. */
.weser-lightbox {
    position: fixed;
    inset: 0;
    z-index: 2000;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 24px;
    background: rgba(0, 0, 0, 0.85);
}

/* Der Seitengrund darf nicht mitscrollen, solange die Lightbox offen ist. */
body.weser-lightbox-offen {
    overflow: hidden;
}

.weser-lightbox-figur {
    margin: 0;
    max-width: 100%;
    max-height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}

.weser-lightbox-bild {
    max-width: 100%;
    /* 100dvh statt vh: Auf Mobilgeraeten schoebe die dynamische Browserleiste
       das Bild sonst unter den Rand. Dieselbe Falle wie beim Offcanvas. */
    max-height: calc(100dvh - 140px);
    object-fit: contain;
    border-radius: var(--radius-md);
    display: block;
}

.weser-lightbox-zaehler {
    color: var(--color-white);
    font-family: var(--font-body);
    font-size: var(--fs-copy-s);
}

.weser-lightbox-close,
.weser-lightbox-nav {
    flex: none;
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.12);
    color: var(--color-white);
    cursor: pointer;
    transition: background var(--transition);
}

.weser-lightbox-close:hover,
.weser-lightbox-nav:hover,
.weser-lightbox-close:focus-visible,
.weser-lightbox-nav:focus-visible {
    background: rgba(255, 255, 255, 0.28);
}

.weser-lightbox-close:focus-visible,
.weser-lightbox-nav:focus-visible {
    outline: 3px solid var(--color-accent);
    outline-offset: 2px;
}

.weser-lightbox-close {
    position: absolute;
    top: 16px;
    right: 16px;
}

.weser-lightbox-close svg,
.weser-lightbox-nav svg {
    width: 24px;
    height: 24px;
}

/* Auf schmalen Schirmen ruecken die Blaetterknoepfe unter das Bild – seitlich
   davon ist kein Platz, ohne das Motiv zu quetschen. */
@media (max-width: 575.98px) {
    .weser-lightbox {
        flex-wrap: wrap;
        padding: 16px;
    }
    .weser-lightbox-figur {
        order: -1;
        flex: 0 0 100%;
    }
    .weser-lightbox-bild {
        max-height: calc(100dvh - 200px);
    }
}