/* Weser Theme – Block: Mauersystem-Teaser („Unsere Mauern mit System. Deine Wahl.")
   ==========================================================================
   Foto + Überschrift links, zwei überlappende Steinpaneele rechts, dazwischen
   ein dekorativer Winkel. Steht auf fünf Stellen: Startseite, /mauersysteme/,
   /planungsservice/, jeder Inspirations-Detailseite und jeder Kategorieseite.

   VORLAGE: `.figma-ref/Wandsysteme/Desktop.png` (1728x618),
            `tablet.png` (768x875), `mobil.png` (390x1321).
   Alle Zahlen unten sind mit `px.mjs` an diesen drei Dateien gemessen, nicht
   geschätzt. Ergänzend Figma `pIECeIvA3k8iqJjGr8R7Gl`, Nodes #435:8662 (D)
   und #445:21527 (T).

   -- SO IST ES GEBAUT ------------------------------------------------------
   Der Entwurf ist ein 1728er-Rahmen mit festen Pixelmaßen, der Inhaltsbereich
   des Themes schrumpft aber von 1468 abwärts. Die alte Fassung mischte
   Prozent-Breiten mit FESTEN Pixel-Höhen – daher verzerrte jedes
   Seitenverhältnis, sobald das Fenster nicht exakt der Entwurfsbreite entsprach.

   Jetzt gilt durchgehend:
     Breiten   -> % der Containerbreite
     Höhen     -> aspect-ratio, nie feste px
     senkrechte Abstände und die Karten-Überlappung -> % bei margin/padding

   ⚠️ Der letzte Punkt ist der Trick und sieht aus wie ein Fehler:
   `padding-block: 8.307%` und `margin-top: -8.307%` rechnen in CSS gegen die
   BREITE des umgebenden Elements, nicht gegen die Höhe. Genau deshalb skaliert
   die senkrechte Geometrie im selben Takt wie die waagerechte – ohne
   Container-Queries. Wer das in px umrechnet, baut die alte Verzerrung wieder ein.

   ⚠️ Die Typografie skaliert BEWUSST NICHT mit (Entwurf: 36px Desktop,
   25/35 Tablet, 22/30 Mobil). Die Überschrift ist im Entwurf „hug" und ragt
   absichtlich aus ihrer Spalte heraus – auf Weiß fällt das nicht auf.

   ⚠️ Breakpoint-Wechsel ab 1200px, nicht mehr bei 992px. Das war ein Sonderweg;
   das übrige Theme (Raster, Abstände, Typo) schaltet bei 1200.

   -- SOLLWERTE -------------------------------------------------------------
   Desktop (Rahmen 1728, Inhalt 130…1598 = 1468 breit)
     Foto              x 318…893   y  45…350    576x301  = 1.914:1
     Einzug links      183 (im Entwurf ein weißes Rechteck – auf Weiß unsichtbar)
     Überschrift       x ab 133    y 380…475    Literata 700, 36px
     Label „Vario"     rechtsbündig bis 1372, y 133…160
     Vario-Bild        x 852…1372  y 167…286    520x118  = 4.407:1
     Label „Trend"     rechtsbündig bis 1595, y 228…255
     Trend-Bild        x 1073…1595 y 262…380
     Überlappung       24 senkrecht, 299 waagerecht
     Winkel            x 739…1006  y 144…511    267x367  -> viewBox 270x369 ✓

   Tablet (Rahmen 768, Inhalt 24…744 = 720 breit)
     Überschrift STEHT ÜBER DEM FOTO (Reihenfolge dreht sich!)
     Foto              x 207…783 (blutet rechts aus) y 112…413   301 hoch
     Vario-Bild        x 114…640   y 546…664
     Trend-Bild        x 218…738   y 640…758
     Winkel            x 141…289   y 300…505    148x205
     Überschrift       Literata 600, 25px / 35px

   Mobil (Rahmen 390) – hier ändert sich die KOMPOSITION, nicht nur die Größe
     Überschrift       x ab 29     y  45…105
     Foto              x 86…(blutet rechts aus)  y 147…359
     Vario-Karte       (blutet links aus)…251    y 346…404
     Trend-Karte       (blutet links aus)…328    y 405…484
     Labels stehen WEISS IM Bild, rechts unten – nicht dunkelblau darüber
     Winkel: NUR der grüne Teil, x 136…286, grüner Arm y 307…367
   ========================================================================== */

/* Abstand oberhalb/unterhalb der Sektion: assets/css/section-spacing.css */
.block-wall-system-teaser {
    background-color: var(--color-white);
    color: var(--color-text);
    position: relative;
    /* Pflicht, nicht Kosmetik: Foto und Karten laufen absichtlich über den
       Container hinaus. Ohne das gäbe es waagerechtes Scrollen. */
    overflow: hidden;
}

.wall-system-stage {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 15px;                                 /* Entwurf: Spalten-/Zeilenlücke */
}

/* == Spalte A: Foto und Überschrift ====================================== */
.wall-system-intro {
    display: flex;
    flex-direction: column;
    gap: 24px;
    /* Pflicht: Flex-Elemente haben min-width:auto. Ohne das hier würde die
       Ueberschrift mit `width: max-content` die Spalte aufblaehen und die
       Karten nach rechts schieben (gemessen: 502 statt 481 Breite). */
    min-width: 0;
}

/* Die Bilderzeile ist im Entwurf breiter als ihre Spalte und ragt heraus.
   Auf Tablet und Mobil blutet sie rechts aus dem Container. */
.wall-system-media {
    display: flex;
}

.wall-system-photo-wrap {
    flex: 0 0 auto;
    aspect-ratio: 576 / 301;
    border-radius: var(--radius-md);
    overflow: hidden;
    background-color: var(--color-light);
}

.wall-system-photo {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Überschrift: auf Mobil und Tablet ÜBER dem Foto (Entwurf), ab Desktop darunter. */
.wall-system-headline {
    order: -1;
    margin: 0;
    font-family: var(--font-heading);
    font-weight: var(--fw-semibold);            /* 600 – Stil „H2 Mobile" */
    font-size: 25px;
    line-height: 35px;
    color: var(--color-heading);
}

.wall-system-caption {
    margin: 0;
    font-family: var(--font-body);
    font-size: var(--fs-copy-s);                /* 16px */
    line-height: 1.6;
    color: var(--color-text);
}

/* == Spalte B: die beiden Steinpaneele + der Winkel ====================== */
.wall-system-lines {
    position: relative;                         /* Anker des Winkels */
    display: flex;
    flex-direction: column;
    align-items: center;
}

.wall-system-line {
    display: flex;                              /* verhindert Margin-Collapse am Label */
    flex-direction: column;
    position: relative;
    margin: 0;
}

.wall-system-line-img {
    display: block;
    width: 100%;
    aspect-ratio: 520 / 118;
    object-fit: cover;
    border-radius: var(--radius-md);
    box-shadow: 0 4px 4px rgba(0, 0, 0, 0.25);  /* Entwurfs-Komponente „Produkt_Card" */
    transition: transform var(--transition);
}

.wall-system-line-label {
    font-family: var(--font-heading);
    font-weight: var(--fw-bold);                /* 700 */
    color: var(--color-heading);
    text-align: right;
    overflow-wrap: anywhere;                    /* kein nowrap – lange Namen brechen um */
}

/* == Das ganze Modul ist ein Link (seit 2.8.0) ============================
   Kundenfeedback 01, A18. Vorher trug jede Steinkarte ihren eigenen Link.
   Die Fläche liegt über der Bühne; die Hover-Bewegung der Karten bleibt,
   ausgelöst jetzt vom ganzen Modul. Ohne Link (auf /mauersysteme/ selbst)
   bewegt sich nichts – dort gibt es nichts zu klicken. */
.wall-system-link {
    position: absolute;
    inset: 0;
    z-index: 3;
    border-radius: var(--radius-md);
}

.wall-system-link:focus-visible {
    outline: 3px solid var(--color-heading);
    outline-offset: 3px;
}

.has-link .wall-system-stage:hover .wall-system-line-img,
.has-link .wall-system-stage:focus-within .wall-system-line-img {
    transform: scale(1.02);
}

@media (prefers-reduced-motion: reduce) {
    .wall-system-line-img { transition: none; }
    .has-link .wall-system-stage:hover .wall-system-line-img,
    .has-link .wall-system-stage:focus-within .wall-system-line-img { transform: none; }
}

/* == Der dekorative Winkel ===============================================
   Form und Seitenverhältnis der Pfade stimmen: am Entwurf nachgemessen sind es
   267x367 gegenüber viewBox 270x369 – zwei Pixel Abweichung. Geändert wird nur
   die Platzierung.

   `top: 0` plus prozentualer `margin-top`: `top` in Prozent würde gegen die
   HÖHE der Spalte rechnen, und die hängt am Inhalt. `margin-top` rechnet gegen
   die Breite und skaliert damit mit dem Rest. */
.wall-system-frame {
    position: absolute;
    top: 0;
    width: 20.556%;                             /* 148/720 */
    left: 16.250%;                              /* (141-24)/720 */
    margin-top: -6.944%;                        /* Oberkante über der Spalte */
    aspect-ratio: 270 / 369;
    height: auto;
    pointer-events: none;
}

/* == MOBIL (bis 767) =====================================================
   Andere Komposition: Foto blutet nach rechts, Karten bluten nach links,
   Labels weiß im Bild. */
@media (max-width: 767.98px) {
    .wall-system-stage { gap: 42px; }           /* 147-105 gemessen */

    .wall-system-intro { gap: 0; }

    /* Foto: linke Kante bei 86 im 390er-Rahmen; Inhalt beginnt bei 16
       (--grid-margin) ⇒ Einzug 70/358 = 19.553%. Das Foto behält seine
       Entwurfsbreite und läuft rechts aus dem Container. */
    .wall-system-media { width: 100%; }
    .wall-system-photo-wrap {
        margin-left: 19.553%;                   /* 70/358 – linke Kante bei x 86 */
        width: 113.408%;                        /* 406/358 – läuft rechts aus dem Rahmen */
    }

    /* Schrift wie die Grundregel: „H2 Mobile", Literata SemiBold 25/35 –
       Figma-Wert vom User, 2026-09-16. Stand vorher auf 22/30. */
    .wall-system-headline {
        margin-bottom: 42px;
    }

    .wall-system-caption { margin-top: 16px; }

    .wall-system-lines {
        align-items: flex-start;
        padding-block: 0;
        margin-top: -55px;                      /* Karten überlappen die Fotounterkante */
    }

    /* Karten laufen links aus dem Container. Breite und Versatz aus
       mobil.png: Vario endet bei 251, Trend bei 328, Inhalt 16…374. */
    /* ⚠️ Vario liegt auf Mobil OBEN, Trend darunter – Kundenfeedback 01 vom
       2026-09-09: „die Vario Line Flaeche sollte ueber die Trend Line Flaeche
       ueberlappen". Vorher trug Trend `z-index: 2` und lag oben.
       Nur hier geaendert: Auf Tablet und Desktop bleibt Trend oben, dazu sagt
       das Feedback nichts, und der Desktop-Entwurf zeigt es so. */
    .wall-system-line--vario {
        width: 71.508%;                         /* 256/358 – rechte Kante bei x 251 */
        margin-left: -5.866%;                   /* -21/358 – rechte Kante bei x 251 */
        position: relative;
        z-index: 2;
    }
    .wall-system-line--trend {
        width: 97.207%;                         /* 348/358 – rechte Kante bei x 328 */
        margin-left: -10.056%;                  /* -36/358 – rechte Kante bei x 328 */
        margin-top: -0.5%;
        z-index: 1;
    }

    /* Beide Steinflaechen 80px hoch – User 2026-09-09 aus dem Figma-Mobilframe
       („Die dinger sind 80px hoch"). Vorher ergab das Seitenverhaeltnis
       520/118 zwei UNTERSCHIEDLICHE Hoehen, weil die Flaechen verschieden
       breit sind: Vario 58, Trend 79. Deshalb hier feste Hoehe statt
       aspect-ratio; `object-fit: cover` haelt den Bildausschnitt sauber. */
    .wall-system-line-img {
        aspect-ratio: auto;
        height: 80px;
    }

    /* Label weiß IM Bild, rechts unten. Der Verlauf sichert den Kontrast auf
       hellem Stein – im Entwurf steht der Text ohne Fläche, das trägt bei
       diesen Motiven nicht zuverlässig. */
    .wall-system-line-label {
        position: absolute;
        right: 16px;
        bottom: 10px;
        z-index: 2;
        color: var(--color-white);
        font-size: 22px;                        /* Literata Bold 22/26 – User 2026-09-16 */
        line-height: 26px;
        text-shadow: 0 1px 6px rgba(0, 0, 0, 0.55);
    }

    /* Nur der grüne Winkel, über dem Foto. */
    .wall-system-frame {
        width: 41.900%;                         /* 150/358 */
        left: 33.520%;                          /* (136-16)/358 */
        margin-top: -51.41%;                    /* grüner Arm endet bei y 367 im Entwurf */
        z-index: 3;
    }
    /* Auf Mobil ist der große Arm WEISS, nicht dunkelblau – er liegt hier über
       dem Foto, das nach rechts aus dem Rahmen blutet, und wäre in Dunkelblau
       darauf nicht zu erkennen. Bis 1.41.0 war er deshalb ausgeblendet; der
       vom User am 2026-08-25 gelieferte Mobil-Export zeigt ihn aber sehr wohl,
       nur eben weiß.

       Kein zweites SVG nötig: Der gelieferte Pfad (viewBox 151×207) ist
       derselbe wie der eingebaute (270×369), nur um Faktor 1,788 kleiner –
       nachgerechnet an drei Punkten, Abweichung unter einem Pixel. Es ändert
       sich ausschließlich die Füllung, und CSS schlägt das fill-Attribut
       am Pfad. */
    .wall-system-frame-blue { fill: var(--color-white); }
}

/* == TABLET (768–1199) =================================================== */
@media (min-width: 768px) {
    .wall-system-media { width: 105.417%; }     /* 759/720 – ragt rechts heraus */

    .wall-system-photo-wrap {
        margin-left: 24.111%;                   /* 183/759 – der Einzug */
        width: 75.889%;                         /* 576/759 */
    }

    .wall-system-lines { padding-block: 11.111%; }   /* 80/720 */

    .wall-system-line { width: 72.222%; }       /* 520/720 */
    .wall-system-line--trend {
        align-self: flex-end;
        margin-top: -11.111%;                   /* -80/720 */
        z-index: 2;
    }

    .wall-system-line-label {
        margin: 18px 0 8px;
        font-size: 24px;
        line-height: 30px;
    }
}

/* == DESKTOP (ab 1200) =================================================== */
@media (min-width: 1200px) {
    .wall-system-stage {
        flex-direction: row;
        align-items: center;
        justify-content: center;
        gap: 1.022%;                            /* 15/1468 */
    }

    .wall-system-intro { flex: 0 0 32.766%; }   /* 481/1468 */
    .wall-system-media { width: 157.796%; }     /* 759/481 */

    /* Ab hier steht die Überschrift UNTER dem Foto und darf – wie im Entwurf –
       breiter sein als ihre Spalte. Der Deckel fängt zu lange Redaktionstexte
       ab, bevor sie in die Karten laufen. */
    .wall-system-headline {
        order: 0;
        width: max-content;
        max-width: 190%;
        font-weight: var(--fw-bold);            /* 700 – Entwurf */
        font-size: 36px;
        line-height: 50px;
    }

    .wall-system-caption { max-width: 190%; }

    .wall-system-lines {
        flex: 0 0 65.600%;                      /* 963/1468 */
        padding-block: 8.307%;                  /* 80/963 */
    }

    .wall-system-line { width: 53.998%; }       /* 520/963 */
    .wall-system-line--trend { margin-top: -8.307%; }   /* -80/963 */

    .wall-system-frame {
        width: 27.726%;                         /* 267/963 */
        left: 11.319%;                          /* (739-630.5)/963 */
        margin-top: 4.153%;                     /* (144-104)/963, feinjustiert */
    }
}