:root {
    --color-dark: #150110;
    --color-primary: #009ee0;
    --color-text-ptimary: #FFFFFF;
    --color-text-secondary: #A5A5A5;
    --color-text-secondary-small: #0A0A0A;
    --color-border: #BA9765;
    --color-bg-body: var(--color-dark);
    --color-imax: #039AD9;
    --color-3d: #E61961;
    --distance-primary: 50px;
    --padding-primary: var(--distance-primary);
    --margin-primary: var(--distance-primary);
    --border-radius-primary: calc(var(--distance-primary)/2);
    --font-family-primary: "Cabin", sans-serif;
    --font-family-secondary-bold: "Cabin-Bold";
    --font-family-title-bold: "Roboto Condensed", sans-serif;
    --font-weight-bold: 700;
    --font-weight-normal: 400;
}

*, *::before, *::after {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
        }

        body {
            font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
            color: #f5f5f5;
            background: #050914;
            line-height: 1.5;
            overflow-x: hidden;
            padding-top: 120px; /* Platz für die fixed Navbar */
        }

        a {
            color: inherit;
            text-decoration: none;
        }

        img {
            max-width: 100%;
            display: block;
        }

        h1, h2, h3 {
            font-weight: 700;
            letter-spacing: 0.04em;
            text-transform: uppercase;
        }

        p {
            opacity: 0.85;
        }

        /* ---------- HEADER / NAVIGATION (Bootstrap Navbar) ---------- */

        header.navbar {
            background: #009ee0;
            backdrop-filter: blur(10px);
            border-bottom: 1px solid rgba(255,255,255,0.06);
        }

        .navbar-brand .imax-logo {
            width: 90%;
            padding: 10px 0;
        }

        .navbar-nav .nav-link {
            text-transform: uppercase;
            letter-spacing: 0.08em;
            font-size: 0.9rem;
            position: relative;
            color: #ffffff;
            font-size: 16px;
            font-weight: 600;
            text-shadow: 0px 1px 1px #6DC7EC;
        }

        .navbar-nav .nav-link:hover {
            color: rgba(0,0,0,0.8);
        }

        .carousel-control-next, .carousel-control-prev {
            top: -330px
        }

        


        /* Unterstreichung nur für normale Links, NICHT für Dropdown */
        .navbar-nav .nav-link:not(.dropdown-toggle)::after {
            content: "";
            position: absolute;
            left: 0;
            bottom: -0.2rem;
            width: 0;
            height: 2px;
            background: rgba(0,0,0,0.8);
            transition: width 0.2s ease-out;
        }

        .navbar-nav .nav-link:not(.dropdown-toggle):hover::after {
            width: 100%;
        }

        /* eigenen weißen Caret-Pfeil für Dropdown setzen */
        /*.navbar .dropdown-toggle::after {
            border: none !important;
            background: none !important;
            content: "\f078";*/ /* Font Awesome: fa-chevron-down */
            /*font-family: "Font Awesome 6 Free";
            font-weight: 900;
            margin-left: 6px;
            font-size: 0.75rem;
            position: relative;
            top: -1px;
            color: #ffffff;
            text-shadow: 0px 1px 1px #6DC7EC;
        }*/

        /* eigenen weißen Caret-Pfeil für Dropdown setzen + Animation */
        .navbar .dropdown-toggle::after {
            border: none !important;
            background: none !important;
            content: "\f078"; /* Font Awesome: fa-chevron-down */
            font-family: "Font Awesome 6 Free";
            font-weight: 900;
            margin-left: 6px;
            font-size: 0.75rem;
            position: relative;
            top: -1px;
            color: #ffffff;
            text-shadow: 0px 1px 1px #6DC7EC;
            transition: transform .2s ease, color .2s ease;
        }

        /* Wenn Dropdown offen ist: Pfeil dreht sich */
        .navbar .dropdown-toggle.show::after,
        .navbar .dropdown-toggle[aria-expanded="true"]::after {
            transform: rotate(180deg);
            color: #000000;
        }

        /* Link-Hintergrund leicht highlighten, wenn Dropdown offen */
        .navbar .dropdown.show > .nav-link {
            background: rgba(0, 0, 0, 0.08);
        }



        

        /* Burger-Icon sichtbar machen / anpassen */
        .navbar-toggler {
            border: 0;
            outline: 0;
        }
        .navbar-toggler:focus {
            box-shadow: none;
        }
        .navbar-toggler-icon {
            /* eigenes weißes Icon, falls das Bootstrap-Default überschrieben wurde */
            background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(255,255,255,1)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
        }


        /* Neuer animierter Hamburger-Button */
        .navbar-toggler.hamburger {
            border: none;
            outline: none;
            padding: 0;
            width: 32px;
            height: 24px;
            position: relative;
        }

        /* 3 Linien */
        .navbar-toggler.hamburger span {
            position: absolute;
            left: 0;
            right: 0;
            height: 2px;
            /*border-radius: 999px;*/
            background: #ffffff;
            box-shadow: 0 1px 1px rgba(0,0,0,.3);
            transition: transform .18s ease, opacity .18s ease, top .18s ease, bottom .18s ease;
        }

        /* Positionen der drei Linien */
        .navbar-toggler.hamburger span:nth-child(1) {
            top: 0;
        }

        .navbar-toggler.hamburger span:nth-child(2) {
            top: 50%;
            transform: translateY(-50%);
        }

        .navbar-toggler.hamburger span:nth-child(3) {
            bottom: 0;
        }

        /* Wenn Menü offen ist: Burger wird zu X */
        .navbar-toggler.hamburger.is-open span:nth-child(1) {
            top: 50%;
            transform: translateY(-50%) rotate(45deg);
        }

        .navbar-toggler.hamburger.is-open span:nth-child(2) {
            opacity: 0;
        }

        .navbar-toggler.hamburger.is-open span:nth-child(3) {
            bottom: 50%;
            transform: translateY(50%) rotate(-45deg);
        }


        /* eigener Primary-Button, nicht Bootstrap .btn-primary überschreiben */
        .imax-btn-primary {
            padding: 0.6rem 1.4rem;
            /*border-radius: 999px;*/
            border: none;
            background: linear-gradient(135deg, #27c5ff, #4b9dff);
            color: #020617;
            font-weight: 600;
            cursor: pointer;
            font-size: 0.9rem;
            text-transform: uppercase;
            letter-spacing: 0.08em;
            box-shadow: 0 12px 30px rgba(39,197,255,0.35);
            transition: transform 0.15s ease, box-shadow 0.15s ease;
            white-space: nowrap;
        }

        .imax-btn-primary:hover {
            transform: translateY(-1px);
            box-shadow: 0 18px 40px rgba(39,197,255,0.45);
        }

        .imax-btn-primary:active {
            transform: translateY(0);
            box-shadow: 0 8px 20px rgba(39,197,255,0.3);
        }

        /* Dropdown-Menü-Style */
        /*.navbar .dropdown-menu.imax-dropdown {
            margin-top: 0;              
            padding: 0;
            border-radius: 0;
            border: none;
            background: rgba(0, 0, 0, 0.85);
            min-width: 230px;
        }*/


        

        .navbar .dropdown-menu.imax-dropdown .dropdown-item {
            text-transform: uppercase;
            letter-spacing: 0.08em;
            font-size: 0.85rem;
            padding: 0.8rem 1.4rem;
            color: #ffffff;
            font-weight: 600;
        }

        .navbar .dropdown-menu.imax-dropdown .dropdown-item:hover,
        .navbar .dropdown-menu.imax-dropdown .dropdown-item:focus {
            background: rgba(0, 0, 0, 0.95);
            color: #ffffff;
        }

        /* Desktop: Dropdown auch bei Hover öffnen */
        /*@media (min-width: 992px) {
            .navbar .dropdown:hover > .dropdown-menu {
                display: block;
            }
        }*/


        /* Dropdown-Menü-Style (einfach & stabil) */
        .navbar .dropdown-menu.imax-dropdown {
            margin-top: 0;
            padding: 0;
            border-radius: 0;
            border: none;
            background: rgba(0, 0, 0, 0.85);
            min-width: 230px;
        }

        .navbar .dropdown-menu.imax-dropdown .dropdown-item {
            text-transform: uppercase;
            letter-spacing: 0.08em;
            font-size: 0.85rem;
            padding: 0.8rem 1.4rem;
            color: #ffffff;
            font-weight: 600;
        }

        .navbar .dropdown-menu.imax-dropdown .dropdown-item:hover,
        .navbar .dropdown-menu.imax-dropdown .dropdown-item:focus {
            background: rgba(0, 0, 0, 0.95);
            color: #ffffff;
        }

        /* Mobile: Dropdown steht untereinander im Fluss */
        @media (max-width: 991.98px) {
            .navbar .dropdown-menu.imax-dropdown {
                position: static;   /* wichtig, sonst "schwebt" es neben dem Menü */
                float: none;
                width: 100%;
                box-shadow: none;
            }
        }

        /* Desktop: Hover öffnet Dropdown (zusätzlich zu Bootstrap-Show) */
        @media (min-width: 992px) {
            .navbar .nav-item.dropdown:hover > .dropdown-menu.imax-dropdown {
                display: block;
            }

            /* Pfeil dreht sich beim Hover */
            .navbar .nav-item.dropdown:hover > .dropdown-toggle::after {
                transform: rotate(180deg);
                transition: transform .18s ease-out;
            }
        }






        /* ---------- IMAX BUTTONS ---------- */
        .imax-btn {
            padding: 10px 24px;
            /*border-radius: 999px;*/
            font-weight: 900;
            letter-spacing: 2px;
            font-size: 12px;
            text-transform: uppercase;
            border: none;
            background: linear-gradient(90deg,#0093ff 0%,#00e4ff 100%);
            color: #fff;
            box-shadow: 0 10px 32px rgba(0,190,255,0.7);
            transition: .2s;
            white-space: nowrap;
        }
        .imax-btn:hover {
            transform: translateY(-2px);
            background: linear-gradient(90deg,#00baff 0%,#49ffff 100%);
            box-shadow: 0 18px 45px rgba(0,210,255,0.9);
        }
        .imax-btn-sm {
            padding: 9px 20px;
            font-size: 11px;
            letter-spacing: 2px;
        }

        /* ---------- HERO + CAROUSEL ---------- */
        .hero-wrapper {
            position: relative;
            height: 100vh;
            min-height: 650px;
            overflow: hidden;
        }

        #imaxCarousel,
        #imaxCarousel .carousel-inner,
        #imaxCarousel .carousel-item {
            height: 100%;
        }

        #imaxCarousel .carousel-item img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            filter: brightness(0.58);
        }

        /* ---------- BOTTOM STRIP + POSTER SLIDER ---------- */
        .hero-bottom-strip {
            position: absolute;
            left: 0;
            right: 0;
            bottom: 0;
            background: rgba(0,0,0,0.85);
            padding: 18px 0;
        }

        .hero-bottom-inner {
            display: flex;
            justify-content: center;
            align-items: center;
            gap: 40px;
        }

        .now-playing-label {
            font-size: 11px;
            letter-spacing: 2px;
            text-transform: uppercase;
            color: #9ca3af;
        }

        .now-playing-title {
            font-size: 24px;
            font-weight: 700;
        }

        .hero-buttons .btn-outline-light {
            /*border-radius: 999px;*/
            border-width: 2px;
            font-size: 12px;
            text-transform: uppercase;
            letter-spacing: 2px;
            padding: .45rem 1.5rem;
        }

        .poster-slider {
            position: relative;
            flex: 1 1 0;
            display: flex;
            align-items: center;
            gap: 10px;
            justify-content: end;
        }

        /* Sichtfenster: einfach 100% breit, alles dahinter wird abgeschnitten */
        .poster-view {
            overflow-x: hidden;
            scroll-behavior: smooth;
            -webkit-overflow-scrolling: touch;
            scrollbar-width: none;
            flex: 1 1 auto;
            max-width: 366px
        }
        .poster-view::-webkit-scrollbar {
            display: none;
        }

        .poster-track {
            display: flex;
            gap: 10px;
            padding-block: 5px;
        }

        .poster-item {
            flex: 0 0 110px;
            height: 180px;
            background: #111827;
            border-radius: 8px;
            overflow: hidden;
            cursor: pointer;
            transition: transform .15s ease, box-shadow .15s ease, outline .15s ease;
            outline: 2px solid transparent;
            outline-offset: 2px;
            opacity: .3;
        }

        .poster-item img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        .poster-item:hover {
            transform: translateY(-4px);
            box-shadow: 0 10px 30px rgba(0,0,0,0.8);
            opacity: 1;
        }

        .poster-item.active {
            outline: 2px solid #00e4ff;
            /*box-shadow: 0 12px 35px rgba(34,211,238,0.8);*/
            box-shadow: 0px 5px 4px rgba(34, 211, 238, 0.8);
            margin: 3px;
            opacity: 1;
        }

        .poster-arrow {
            width: 36px;
            height: 36px;
            border-radius: 999px;
            border: 1px solid rgba(255,255,255,0.7);
            display: flex;
            align-items: center;
            justify-content: center;
            background: rgba(0,0,0,0.5);
            color: #fff;
            cursor: pointer;
            flex: 0 0 auto;
            transition: background .15s, transform .15s;
        }

        .poster-arrow:hover {
            background: rgba(0,0,0,0.8);
            transform: scale(1.06);
        }

        /* Responsiv für kleine Screens */
        @media (max-width: 992px) {
            .hero-bottom-inner {
                flex-direction: column;
                align-items: center;
                gap: 20px;
            }
            .hero-wrapper {
                min-height: 550px;
            }
        }

        /* Startseite Inhalt */
        .main-content {
            background-color: var(--color-dark);
            color: var(--color-text-ptimary);
        }

        .main-content-title {
            font-family: var(--font-family-title-bold);
            font-size: 56px;
            color: var(--color-text-ptimary);
            letter-spacing: 0.2px;
            line-height: 64px;
            text-transform: uppercase;
        }

        .main-content-title-h1 {
            font-family: var(--font-family-title-bold);
            font-size: 26px;
            color: #BA9765;
            padding: 10px;
            border-radius: 5px;
            margin-bottom: 20px;
            text-transform: uppercase;
        }

        .megaplex-card a {
            text-decoration: none;
            position: relative;
        }

        .card-bg-color-dark {
            background-color: var(--color-dark);
            color: var(--color-text-ptimary);
            --bs-card-border-width: 15px;
        }

        .image-box {
            padding-top: 145%;
            position: relative;
            background-color: rgb(45, 45, 45);
            overflow: hidden;
            box-shadow: 0px 2px 15px rgba(0, 0, 0, 0.50);
            border-radius: 5px;
        }

        .image-box img {
            -webkit-transition: all .9s ease;
            -moz-transition: all .9s ease;
            -o-transition: all .9s ease;
            -ms-transition: all .9s ease;
            width: 100%;
            height: 100%;
            position: absolute;
            left: 0px;
            top: 0px;
            object-fit: cover;
        }


        .card-flyer:hover .image-box img {
            opacity: 0.7;
            -webkit-transform: scale(1.15);
            -moz-transform: scale(1.15);
            -ms-transform: scale(1.15);
            -o-transform: scale(1.15);
            transform: scale(1.15);
        }


        .card-title {
            text-transform: uppercase;
            font-size: 18px;
            text-decoration: none;
        }

        .card-text-details {
            font-size: 14px;
            color: var(--color-text-secondary);
            margin-bottom: 1rem;
        }

        .card-text-details-info .card-text-details-info-btn {
            width: 100%;
            margin: 0;
            font-size: 14px;
            display:block;
        }

        .main-content .card-body {
            padding: 1rem 0px ;
            text-align:center;

        }

        .megaplex-kino-primary-btn {
            font-family: var(--font-family-title-bold);
            color: var(--color-text-ptimary);
            padding: 6px;
            font-size: 18px;
            letter-spacing: 0.5px;
            cursor: pointer;
            border: 1px solid var(--color-primary);
            margin: 20px 0;
            background-color: var(--color-primary);
            text-transform: uppercase;
            -webkit-transition: all 0.2s ease-in;
            -moz-transition: all 0.2s ease-in;
            -ms-transition: all 0.2s ease-in;
            -o-transition: all 0.2s ease-in;
            transition: all 0.2s ease-in;
        }

        .megaplex-kino-primary-btn:hover {
            background-color: transparent;
            border: 1px solid var(--color-text-ptimary);
            -webkit-transition: all 0.2s ease-in;
            -moz-transition: all 0.2s ease-in;
            -ms-transition: all 0.2s ease-in;
            -o-transition: all 0.2s ease-in;
            transition: all 0.2s ease-in;
        }


        .card-text-details-info .card-text-details-info-btn {
            width: 100%;
            margin: 0;
            font-size: 14px;
            display:block;
        }


        @media (max-width: 767.98px) {

            .main-content-title {
                font-size: 40px !important;
            }

            .card-highlights-content-time {
                width: 140px;
            }
        }

        

        @media (max-width: 575.98px) {
            .megaplex-card {
                width: 50%;
                padding: 0;
            }
        }



        /* ---------- IMAX FOOTER ---------- */

        .imax-footer {
            background: #009ee0;
            color: #ffffff;
            font-family: "Cabin", "Roboto Condensed", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
            font-size: 0.9rem;
        }

        .imax-footer-heading {
            font-size: 0.9rem;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 0.12em;
            margin-bottom: 1rem;
        }

        .imax-footer-list li + li {
            margin-top: 0.35rem;
        }

        .imax-footer a {
            color: #ffffff;
            text-decoration: none;
        }

        .imax-footer a:hover {
            text-decoration: underline;
        }

        /* Social Icons */
        .imax-footer-social {
            display: flex;
            flex-wrap: wrap;
            gap: 0.6rem;
            margin-top: 0.5rem;
        }

        .imax-footer-social a {
            width: 38px;
            height: 38px;
            border-radius: 50%;
            border: 1px solid rgba(255,255,255,0.7);
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 18px;
            transition: background 0.2s ease, transform 0.2s ease, color 0.2s ease;
        }

        .imax-footer-social a:hover {
            background: #ffffff;
            color: #009ee0;
            transform: translateY(-2px);
            text-decoration: none;
        }

        /* App Badge */
        .imax-footer-appbadge img {
            max-width: 180px;
            height: auto;
            display: block;
            margin-top: 0.75rem;
        }

        /* Divider */
        .imax-footer-divider {
            border-color: rgba(255,255,255,0.3);
        }

        /* Logo & Text */
        .imax-footer-logo {
            height: 40px;
            width: auto;
            filter: brightness(0) invert(1); /* macht Logo weiß, falls es blau ist */
        }

        .imax-footer-copy {
            font-size: 0.8rem;
            opacity: 0.9;
        }

        /* Linkzeile unten */
        .imax-footer-links {
            display: flex;
            flex-wrap: wrap;
            gap: 0.4rem 0.8rem;
            font-size: 0.8rem;
        }

        .imax-footer-links span {
            opacity: 0.8;
        }

        /* Mobile */
        @media (max-width: 767.98px) {
            .imax-footer {
                text-align: left;
            }

            .imax-footer-logo {
                margin-bottom: 0.5rem;
            }
        }



        /* ---------- End IMAX FOOTER ---------- */



        /* --------------------------------------------------
           IMAX Accordion (ganz unten unter dem Footer)
           -------------------------------------------------- */

        .imax-accordion {
            /*background: #009ee0;*/
            background: #fff;
            /*border-top: 1px solid rgba(255,255,255,0.25);*/
            margin-top: 0;
        }

        /* Bootstrap-Rahmen entfernen */
        .imax-accordion .accordion-item {
            border: 0;
            background: transparent;
        }

        /* Header-Button */
        .imax-accordion .accordion-button {
            /*background: #009ee0;*/
            background: #fff;
            color: #000;
            padding: 1.2rem 1.5rem;
            box-shadow: none;
            border-radius: 0;
        }

        /* Hover/Fokus */
        /*.imax-accordion .accordion-button:hover {
            background: #fff;
        }*/

        /* Hintergrund beim Hover über ganzen Balken */
        /*.imax-accordion .accordion-item:hover {
            background: #d7f6ff;
        }*/

        /* Der Button selbst soll auch hellblau werden */
        /*.imax-accordion .accordion-button:hover {
            background: #d7f6ff !important;
        }*/

        /* Wenn geöffnet bleibt Hintergrund hell */
        /*.imax-accordion .accordion-button:not(.collapsed) {
            background: #d7f6ff !important;
        }*/


        /*.imax-accordion .accordion-button:focus {
            box-shadow: 0 0 0 0.1rem rgba(255,255,255,0.25);
        }*/

        /* Standard-Caret entfernen */
        .imax-accordion .accordion-button::after {
            display: none;
        }

        /* Eigener Pfeil rechts */
        .imax-accordion .accordion-button {
            position: relative;
            padding-right: 3rem; /* Platz für den Pfeil */
        }

        .imax-accordion .accordion-button::before {
            content: "\f078"; /* Font Awesome „chevron-down“ */
            font-family: "Font Awesome 6 Free";
            font-weight: 900;
            position: absolute;
            right: 1.4rem;
            top: 50%;
            transform: translateY(-50%);
            font-size: 0.9rem;
            /*color: #ffffff;*/
            color: #000000;
            transition: transform .2s ease, opacity .2s ease;
            opacity: 0.9;
        }

        /* Wenn geöffnet (ohne .collapsed) – Pfeil dreht sich */
        .imax-accordion .accordion-button:not(.collapsed)::before {
            transform: translateY(-50%) rotate(180deg);
            opacity: 1;
        }

        /* Logo & Text im Header */
        .imax-accordion-logo {
            max-width: 160px;
            height: auto;
        }

        .imax-accordion-header-text {
            font-size: 0.9rem;
            line-height: 1.5;
        }

        /* Body-Bereich */
        .imax-accordion .accordion-body {
            /*background: #0084c4;*/
            background: #fff;
            /*color: #f9fafb;*/
            color: #000;
            padding: 1.5rem;
            border-top: 1px solid rgba(255,255,255,0.22);
            font-size: 0.95rem;
            line-height: 1.6;
        }

        .imax-accordion .accordion-body h3 {
            font-size: 0.95rem;
            text-transform: uppercase;
            letter-spacing: 0.08em;
            margin-top: 1.2rem;
            margin-bottom: 0.4rem;
            /*color: #000;*/
            color:#009ee0
        }

        .imax-accordion .accordion-body p {
            margin-bottom: 0.7rem;
        }

        .imax-accordion .accordion-body a {
            /*color: #fff;*/
            color: #009ee0;
            text-decoration: underline;
        }

        .imax-accordion .accordion-body a:hover {
            text-decoration: none;
        }

        /* Mobile: Logo über Text, zentriert */
        @media (max-width: 767.98px) {
            .imax-accordion-logo {
                margin-bottom: 0.5rem;
            }
            .imax-accordion .accordion-button {
                text-align: left;
            }
        }

        /* --------------------------------------------------
           END IMAX Accordion (ganz unten unter dem Footer)
           -------------------------------------------------- */



        /* --------------------------------------------------
            Start IMAX NEWS
           -------------------------------------------------- */



        .imax-news .image-box {
            padding-top: 75%;
        }


        /* --------------------------------------------------
            END IMAX NEWS
           -------------------------------------------------- */





           

        header.navbar {
            background: #150110;
        }

        .imax-btn-primary {
            color: #fff;
        }

        .navbar-nav .nav-link:hover {
            color: #c7b5b5cc;
            
        }


        .heroCarouselButtonNext {
            position: relative;
            z-index: 2;
            display: flex;
        }

        .heroCarouselButtonNext-svg {
            user-select: none;
            width: 1em;
            height: 1em;
            display: inline-block;
            fill: currentcolor;
            flex-shrink: 0;
            font-size: 1.5rem;
            transition: fill 200ms cubic-bezier(0.4, 0, 0.2, 1);
        }
        

        @media (min-width: 48rem) and (max-width: 119.938rem) {
            .heroCarouselButtonNext i {
                margin-bottom: -1.4rem;
                width: 2.4rem;
                height: 2.4rem;
                border-radius: 2rem;
                display: flex;
                flex-direction: column;
                align-items: center;
                justify-content: center;
                width: 3rem;
                height: 3rem;
                color: #63666a;
                font-size: 1rem;
                border: .125rem solid #63666a;
                border-radius: 1.5rem;
            }


            .heroCarouselButtonNext i:hover {
                color: #fff;
                border-color: #fff;
                cursor: pointer;
            }
        }


        .imax-hero-buttons {
            display: flex;
            gap: 18px;
            align-items: center;
            flex-wrap: wrap;
            z-index: 3;
        }

        /* Basis-Button */
        .imax-icon-btn {
            display: flex;
            align-items: center;
            gap: 12px;
            padding: 10px 6px;
            border-radius: 50px;
            font-weight: 700;
            font-size: 14px;
            letter-spacing: 1px;
            /*border: 2px solid rgba(255,255,255,0.4);*/
            color: white;
            background: rgba(0,0,0,0.45);
            backdrop-filter: blur(6px);
            cursor: pointer;
            transition: .25s ease;
        }

        /* Icon selbst */
        .imax-icon-btn i {
            font-size: 18px;
            background: #009ee0;
            color: white;
            width: 38px;
            height: 38px;
            border-radius: 50%;
            display: flex;
            justify-content: center;
            align-items: center;
            box-shadow: 0 6px 18px rgba(0, 132, 255, 0.4);
            transition: .25s ease;
            padding-left: 2px;
        }

        /* Hover-Effekt */
        .imax-icon-btn:hover {
            transform: translateY(-3px);
            border-color: #00c6ff;
        }

        .imax-icon-btn:hover i {
            background: #00c6ff;
            box-shadow: 0 10px 25px rgba(0, 198, 255, .6);
        }

        /* Spezialfarbe für Arrow Button */
        .arrow-btn i {
            background: white;
            color: black;
        }

        .arrow-btn:hover i {
            background: #00e4ff;
            color: black;
        }



        /* Start Imax Programm */

        .megaplex-filmdetails .megaplex-filmdetails-header-box {
            position: relative;
            top: 16%;
        }

        @media (max-width: 991.98px) {
            
            .megaplex-filmdetails .megaplex-filmdetails-header-box {
                position: relative;
                top: 16%;
                max-width: 100%;
                margin: 20px 0;
            }

            .megaplex-filmdetails .megaplex-filmdetails-header .megaplex-filmdetails-header-links {
                margin: 20px 0;
            }

            .megaplex-filmdetails .megaplex-filmdetails-header .megaplex-filmdetails-header-right {
                margin: 20px 0;
            }
        }

        .megaplex-filmdetails .hero-main .img-overlay {
            background-image: linear-gradient(201deg, #e6196100, #e6196100);
        }

        .megaplex-filmdetails .hero-main-content .hero-main {
            height: auto;
            contain: content;
        }

        .megaplex-filmdetails-header-poster {
            border: 3px solid #ba9765;
        }


        .hero-text-details {
            font-size: 14px;
            color: var(--color-text-secondary);
            margin-bottom: 1rem;
        }

        .hero-text-details-slash {
            color: #3E3324;
            font-size: 18px;
            padding: 0 10px;
        }

        .hero-text-details-border {
            border: 1px solid;
            padding: 2px;
            margin: 10px;
            font-size: 10px;
            color: var(--color-border);
            font-weight: var(--font-weight-bold);
        }

        .hero-film-time {
            display: flex;
        }

        .hero-film-time-content {
            border: 2px solid var(--color-border);
            padding: 10px 20px;
            font-size: 14px;
            color: var(--color-text-ptimary);
            font-weight: var(--font-family-secondary-bold);
            margin-right: 14px
        }

        


        /* End Imax Programm */






        :root{
            --bg:#111214;
            --text:#f2f2f2;
            --muted:#b8bcc5;
            --line:rgba(255,255,255,.10);
            --maxw: 980px;
        }

        *{ box-sizing:border-box; }
        .imax-einziel-main{
            margin:0;
            font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
            background: radial-gradient(900px 400px at 50% 0%, rgba(255,255,255,.06), transparent 60%), var(--bg);
            color:var(--text);
            line-height:1.6;
        }

        a{ color:inherit; text-decoration:none; }
        .wrap{ width:min(var(--maxw), 92vw); margin:0 auto; }

        /* Top brand */
        header{
            padding: 26px 0 16px;
        }
        .brand{
            letter-spacing:.12em;
            font-weight:800;
            font-size:.95rem;
            color: rgba(255,255,255,.92);
        }

        /* Big image like the example */
        .hero{
            padding-bottom: 22px;
        }
        .heroImage{
            width:100%;
            border-radius: 4px;
            overflow:hidden;
            border:1px solid var(--line);
            background:#000;
        }
        .heroImage img{
            display:block;
            width:100%;
            height:auto;
        }

        /* Content block */
        .content{
            padding: 18px 0 40px;
        }
        .title{
            margin: 0 0 10px 0;
            font-size: clamp(1.8rem, 3.2vw, 2.4rem);
            letter-spacing:.02em;
            font-weight: 900;
            text-transform: uppercase;
        }
        .text{
            margin:0;
            color: var(--muted);
            max-width: 90ch;
            font-size: 1.02rem;
        }

        .imax-color {
            color: var(--color-primary);
            font-weight:bold;
        }

        /* Video block (optional, similar width) */
        .videoBlock{
            padding: 0 0 44px;
        }
        .videoTitle{
            margin:0 0 12px 0;
            font-size: 1.05rem;
            letter-spacing:.10em;
            text-transform: uppercase;
            color: rgba(255,255,255,.85);
        }
        .videoFrame{
            width:100%;
            aspect-ratio: 16/9;
            border:1px solid var(--line);
            border-radius: 4px;
            overflow:hidden;
            background:#000;
        }
        .videoFrame iframe, .videoFrame video{
            width:100%;
            height:100%;
            border:0;
            display:block;
        }

        footer{
            border-top:1px solid var(--line);
            padding: 18px 0 26px;
            color: rgba(255,255,255,.55);
            font-size: .95rem;
        }

        @media (max-width: 700px){
            header{ padding-top: 18px; }
            .title{ text-transform:none; }
        }