/**
 * MoebiuscubesCL – Widget-Styles
 *
 * WICHTIG: Die Höhe des Containers wird durch Elementor-Responsive-Controls
 * über das `height`-CSS-Property gesetzt (via Selector).
 * Als Fallback dient min-height.
 */

/* ------------------------------------------------------------------ */
/*  Container                                                           */
/* ------------------------------------------------------------------ */

.moebiuscubescl-container {
    position:         relative;
    display:          block;
    width:            100%;
    /* Explizite Standardhöhe – wird von Elementor-Slider überschrieben */
    height:           600px;
    min-height:       200px;
    overflow:         hidden;
    background-color: #000000;
    box-sizing:       border-box;
    /* Verhindert, dass der Container kollabiert */
    flex-shrink:      0;
}

/* Elementor-Wrapper soll sich der Inhaltshöhe anpassen */
.elementor-widget-moebiuscubes .elementor-widget-container {
    height: 100%;
    display: block;
}

.elementor-widget-moebiuscubes {
    /* Wichtig: Widget nimmt die volle Höhe ein */
    display: block;
}

/* ------------------------------------------------------------------ */
/*  Canvas (wird von Three.js erzeugt)                                 */
/* ------------------------------------------------------------------ */

.moebiuscubescl-container canvas {
    display:             block;
    /* Canvas füllt den Container zu 100% aus */
    position:            absolute;
    top:                 0;
    left:                0;
    width:               100% !important;
    height:              100% !important;
    outline:             none;
    user-select:         none;
    -webkit-user-select: none;
    touch-action:        none;
}

/* ------------------------------------------------------------------ */
/*  Elementor-Editor-Placeholder                                       */
/* ------------------------------------------------------------------ */

.moebiuscubescl-editor-preview {
    display:         flex;
    align-items:     center;
    justify-content: center;
    background:      linear-gradient(135deg, #0a0a1a 0%, #1a1a3e 100%);
    min-height:      200px;
}

.moebiuscubescl-placeholder {
    display:         flex;
    align-items:     center;
    justify-content: center;
    flex-direction:  column;
    gap:             12px;
    text-align:      center;
    padding:         24px;
}

/* ------------------------------------------------------------------ */
/*  Tablet & Mobil Fallback (wird von Elementor-Responsive übersteuert)*/
/* ------------------------------------------------------------------ */

@media (max-width: 1024px) {
    .moebiuscubescl-container {
        height: 500px;
    }
}

@media (max-width: 767px) {
    .moebiuscubescl-container {
        height: 380px;
    }
}