Scene Panels

<section class="scene scene-panels bg-dark"
         data-panels-layout="4col"
         data-panels-height="65vh"
         data-panels-height-mobile="50vh">

    <div class="scene-panel" data-panel="expand">
        <img src="/Assets/img/portfolio/projekt.webp" alt="Beschreibung">
        <div class="scene-panel__info">
            <span class="scene-panel__title">Tapetendruck</span>
            <span class="scene-panel__type">Wohnzimmer</span>
        </div>
    </div>
    <!-- weitere .scene-panel ... -->

</section>

<!-- Layouts: 2col | 3col | 4col | 5col | featured | 2x2 | mosaic -->

<!-- WICHTIG: Alle Panels bekommen dasselbe Bild! -->
<!-- JS berechnet automatisch Ausschnitt pro Panel -->
<section class="scene scene-panels bg-dark"
         data-panels-layout="4col"
         data-panels-height="65vh">

    <div class="scene-panel" data-panel="panorama">
        <img src="/Assets/img/portfolio/panorama.webp" alt="...">
        <div class="scene-panel__info">
            <span class="scene-panel__title">Panel 1</span>
            <span class="scene-panel__type">Linker Bereich</span>
        </div>
    </div>

    <div class="scene-panel" data-panel="panorama">
        <img src="/Assets/img/portfolio/panorama.webp" alt="..."> <!-- GLEICHES BILD -->
        <div class="scene-panel__info">
            <span class="scene-panel__title">Panel 2</span>
            <span class="scene-panel__type">Mitte links</span>
        </div>
    </div>

    <!-- ... weitere Panels mit GLEICHEM Bild -->

</section>

<!-- Mathematik (automatisch per JS):
     N=4 Panels → img width: 400%
     Panel 0 → left: 0%
     Panel 1 → left: -100%
     Panel 2 → left: -200%
     Panel 3 → left: -300%
     Beim Hover → Ausschnitt verschiebt sich mit -->

<div class="scene-panel" data-panel="zoom">
    <img src="..." alt="...">

    <!-- Overlay erscheint beim Hover (optional) -->
    <div class="scene-panel__overlay">
        <div style="text-align:center;">
            <span class="scene-panel__title">Titel</span>
            <span class="scene-panel__type">Typ</span>
        </div>
    </div>

    <!-- Info unten (immer sichtbar nach Hover) -->
    <div class="scene-panel__info">
        <span class="scene-panel__title">Titel</span>
        <span class="scene-panel__type">Typ</span>
    </div>
</div>

<div class="scene-panel" data-panel="reveal">
    <!-- Bild 1: Ruhezustand (z.B. Schwarzweiß / Vorher) -->
    <img src="/img/projekt-sw.webp" alt="Vorher">

    <!-- Overlay: fährt von unten rein beim Hover -->
    <!-- Kann zweites Bild, Text, Button enthalten -->
    <div class="scene-panel__overlay" style="background:rgba(var(--primary-rgb),0.92);">
        <span class="scene-panel__title">Nach der Beschriftung</span>
        <a href="/projekt">Mehr sehen</a>
    </div>
</div>

<!-- Overlay-Farben: -->
style="background: rgba(0,0,0,0.85);"              ← dunkel
style="background: rgba(var(--primary-rgb),0.92);" ← Primärfarbe
style="background: rgba(var(--dark-rgb),0.9);"     ← dark

<div class="scene-panel" data-panel="flip">
    <div class="scene-panel__inner">

        <!-- Vorderseite: Bild -->
        <div class="scene-panel__front">
            <img src="/img/projekt.webp" alt="...">
            <div class="scene-panel__info" style="opacity:1;transform:none;">
                <span class="scene-panel__title">Tapetendruck</span>
                <span class="scene-panel__type">Wohnzimmer</span>
            </div>
        </div>

        <!-- Rückseite: beliebiger Inhalt -->
        <div class="scene-panel__back bg-primary">
            <span>Tapetendruck München</span>
            <p>Individuelle Wandgestaltung...</p>
            <a href="/tapetendruck">Mehr erfahren</a>
        </div>

    </div>
</div>

<!-- Mosaic: erstes Panel nimmt 2 Zeilen ein -->
<section class="scene scene-panels bg-dark"
         data-panels-layout="mosaic"
         data-panels-height="70vh">

    <!-- Panel 1: groß (2 Zeilen) -->
    <div class="scene-panel" data-panel="zoom">...</div>

    <!-- Panel 2-4: klein (je 1 Zeile) -->
    <div class="scene-panel" data-panel="zoom">...</div>
    <div class="scene-panel" data-panel="zoom">...</div>
    <div class="scene-panel" data-panel="zoom">...</div>

</section>

<!-- CSS Grid Layout:
     grid-template-columns: 2fr 1fr 1fr
     grid-template-rows: 1fr 1fr
     .scene-panel:first-child → grid-row: 1 / 3 (groß)
-->

<!-- Panels innerhalb einer normalen Scene -->
<section class="scene scene-about bg-light py-section-md">
    <div class="auto-container">
        <div class="row align-items-center g-4">

            <!-- Text links -->
            <div class="col-lg-5">
                <h2>Wir setzen Deine Werbung in Szene</h2>
                <p>...</p>
            </div>

            <!-- 2x2 Panel-Grid rechts -->
            <div class="col-lg-7">
                <div style="display:grid;grid-template-columns:1fr 1fr;gap:8px;height:400px;">
                    <div class="scene-panel" data-panel="zoom">...</div>
                    <div class="scene-panel" data-panel="zoom">...</div>
                    <div class="scene-panel" data-panel="zoom">...</div>
                    <div class="scene-panel" data-panel="zoom">...</div>
                </div>
            </div>

        </div>
    </div>
</section>