/* ===========================================================
   Fix: Konflikte zwischen dem alten "Kacheln"-Vorlagen-CSS
   (css/style.css, scripts/bootstrap/css/bootstrap.css) und dem
   eigentlichen Theme (assets/app/css/main.css) auf den
   Technik-Seiten mit Kacheln-Block.
   Muss NACH allen anderen Stylesheets eingebunden werden.
   =========================================================== */

/* 1) Footer-Hintergrund: css/style.css setzt für JEDES <footer>
   einen hellgrauen Hintergrund (#F5F5F5). Das überschreibt den
   dunklen Footer-Hintergrund des echten Theme. Zurücksetzen,
   damit die eigene Hintergrundgrafik (.ms-footer3-wrap) wieder
   sichtbar ist. */
footer {
    background-color: transparent !important;
}

/* 2) Kacheln-Bilder: Das FlexSlider-Plugin blendet Bilder nur
   per JavaScript ein (alle <li> sind per CSS erst unsichtbar).
   Falls die Slider-Initialisierung durch den doppelten
   jQuery-Stack nicht sauber greift, bleiben die Bilder sonst
   dauerhaft unsichtbar. Deshalb hier das erste Bild jeder
   Kachel als verlässlichen Hintergrund erzwingen, unabhängig
   vom Slider-JavaScript. */
.sec-twoside-wrap .background-page,
.sec-twoside-wrap .background-page .flexslider,
.sec-twoside-wrap .background-page .flexslider .slides {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

.sec-twoside-wrap .background-page .flexslider .slides > li:first-child {
    display: block !important;
    width: 100%;
    height: 100%;
}

.sec-twoside-wrap .background-page .flexslider .slides > li .bg-cover {
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
}

/* 3) Footer-Spalten springen zu früh in 2 Zeilen um: Auf diesen
   Seiten lädt zusätzlich das alte Bootstrap aus dem Kacheln-Paket
   (scripts/bootstrap/css/bootstrap.css). Es definiert dieselben
   Klassen (.col-lg-*, .col-md-*, .col-xxl-*) wie das echte Theme,
   aber mit anderen Bildschirmbreiten-Grenzen und arbeitet mit
   float statt Flexbox. Footer-Spalten hier wieder gegen die
   korrekten, modernen Werte absichern. */
footer [class*="col-"] {
    float: none !important;
}

@media (min-width: 768px) {
    footer .col-md-6 { flex: 0 0 auto !important; width: 50% !important; }
}
@media (min-width: 992px) {
    footer .col-lg-3 { flex: 0 0 auto !important; width: 25% !important; }
    footer .col-lg-5 { flex: 0 0 auto !important; width: 41.66666667% !important; }
}
@media (min-width: 1400px) {
    footer .col-xxl-2 { flex: 0 0 auto !important; width: 16.66666667% !important; }
    footer .col-xxl-4 { flex: 0 0 auto !important; width: 33.33333333% !important; }
}

/* 4) Kachel-Beschreibungstext (.scroll-content, data-height="338") wird von
   einem JS-Scrollbar-Plugin erwartet, das die Höhe begrenzt und einen eigenen
   Scrollbalken einbaut. Springt dieses Plugin auf den Technik-Seiten nicht
   sauber an (z. B. weil das Panel beim Initialisieren noch unsichtbar ist),
   läuft längerer Text ungebremst über den sichtbaren Bereich hinaus, ohne
   dass man scrollen kann (Beispiel: Block 4 "dbx AFS2" auf dj-technik.html).
   Deshalb hier zusätzlich eine reine CSS-Lösung, die unabhängig vom
   JS-Plugin funktioniert: feste Höhe + normaler Browser-Scrollbalken. */
.sec-twoside-wrap .scroll-content {
    max-height: 520px !important;
    overflow-y: auto !important;
    padding-right: 12px !important;
    scrollbar-width: thin;
    scrollbar-color: rgba(255,255,255,.35) transparent;
}

.sec-twoside-wrap .scroll-content::-webkit-scrollbar {
    width: 5px;
}

.sec-twoside-wrap .scroll-content::-webkit-scrollbar-track {
    background: transparent;
}

.sec-twoside-wrap .scroll-content::-webkit-scrollbar-thumb {
    background-color: rgba(255,255,255,.35);
    border-radius: 10px;
}

.sec-twoside-wrap .scroll-content::-webkit-scrollbar-thumb:hover {
    background-color: rgba(255,255,255,.55);
}

/* Auf Mobilgeräten (<=768px) wird das ganze Panel laut fullpage.twoside.css
   ohnehin zu einem normal scrollbaren Block (kein Vollbild-Overlay mehr) --
   dort braucht der Text keine eigene, zusätzlich verschachtelte Scrollbox,
   er soll einfach normal mitlaufen. */
@media (max-width: 768px) {
    .sec-twoside-wrap .scroll-content {
        max-height: none !important;
        overflow-y: visible !important;
        padding-right: 0 !important;
    }
}

/* 5) Video in der Kacheln-Gallery (z. B. laser.html #laser-gallery-video):
   Das "Twoside"-Template öffnet Kacheln per CSS-3D-Transform (Flip-Effekt).
   Bekannter Chrome/Chromium-Bug: <video>-Elemente innerhalb eines
   3D-transformierten Vorfahren bleiben visuell auf dem Posterbild stehen
   (Ton/Zeit laufen im Hintergrund normal weiter), weil der Compositing-
   Layer des Videos an der Transform-Berechnung hängen bleibt. Fix: dem
   Video eine eigene, von der Transform-Kette unabhängige Compositing-
   Ebene geben. */
.sec-twoside-wrap video.img-box {
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
    backface-visibility: visible;
    -webkit-backface-visibility: visible;
    will-change: transform;
}