/* KVES Frontend Runtime Styles — keine externen Fonts, kein @import */

.kves-scene-container {
    position:   relative;
    overflow:   hidden;
    display:    block;
}

.kves-scene-container--background {
    position: absolute;
    inset:    0;
    z-index:  0;
}

.kves-canvas {
    position: absolute;
    top:      0;
    left:     0;
    width:    100%;
    height:   100%;
    display:  block;
}

.kves-scene-fallback {
    position:   absolute;
    inset:      0;
    z-index:    -1;
    transition: opacity .3s ease;
}

.kves-scene-container[data-kves-ready] .kves-scene-fallback {
    opacity: 0;
    pointer-events: none;
}

/* ===== Motion Toggle ===== */
.kves-motion-toggle {
    display:         inline-flex;
    align-items:     center;
    gap:             6px;
    padding:         8px 12px;
    background:      rgba(38,49,66,.85);
    color:           #fff;
    border-radius:   24px;
    cursor:          pointer;
    user-select:     none;
    font-size:       13px;
    font-weight:     500;
    backdrop-filter: blur(8px);
    border:          1px solid rgba(255,255,255,.15);
    transition:      background .2s ease, transform .1s ease;
    z-index:         9999;
}

.kves-motion-toggle:hover { background: rgba(38,49,66,.95); }
.kves-motion-toggle:active { transform: scale(.97); }

.kves-motion-toggle:focus-visible {
    outline:        2px solid #F2C94C;
    outline-offset: 2px;
}

.kves-motion-toggle--bottom-right {
    position: fixed;
    bottom:   20px;
    right:    20px;
}

.kves-motion-toggle--bottom-left {
    position: fixed;
    bottom:   20px;
    left:     20px;
}

.kves-motion-toggle--top-right {
    position: fixed;
    top:      80px;
    right:    20px;
}

.kves-motion-toggle--top-left {
    position: fixed;
    top:      80px;
    left:     20px;
}

.kves-motion-toggle--inline {
    position: absolute;
    bottom:   12px;
    right:    12px;
}

.kves-motion-toggle__icon {
    flex-shrink: 0;
    color:       #ffaa44;
}

.kves-motion-toggle__label { line-height: 1; }

/* Deaktiviert-Zustand */
.kves-motion-toggle[aria-pressed="false"],
.kves-motion-toggle--off {
    color:      rgba(255,255,255,.5);
}
.kves-motion-toggle[aria-pressed="false"] .kves-motion-toggle__icon { color: rgba(255,170,68,.4); }

/* Reduziert-Zustand */
.kves-motion-toggle--reduced .kves-motion-toggle__icon { color: #fcd34d; }

/* ===== Disable Button ===== */
.kves-disable-btn {
    display:       inline-flex;
    align-items:   center;
    padding:       6px 14px;
    border:        1px solid currentColor;
    border-radius: 4px;
    cursor:        pointer;
    font-size:     13px;
    background:    transparent;
    transition:    background .15s, color .15s;
}

.kves-disable-btn:hover {
    background: rgba(0,0,0,.05);
}

/* ===== Accessibility: prefers-reduced-motion ===== */
@media (prefers-reduced-motion: reduce) {
    .kves-canvas { display: none !important; }
    .kves-scene-fallback {
        opacity: 1 !important;
        z-index: 0 !important;
    }
    .kves-motion-toggle { display: none; }
}

/* ===== No CLS: reserve space ===== */
.kves-scene-container[style*="height"] canvas {
    position: absolute;
}

/* ===== Auto Injector ===== */
.kves-auto-inject {
    pointer-events: none;
}

.kves-auto-inject--fullscreen {
    position:   fixed;
    inset:      0;
    z-index:    -1;
    overflow:   hidden;
}

.kves-auto-inject--fullscreen .kves-scene-container--auto {
    position: absolute;
    inset:    0;
}

.kves-auto-inject--overlay {
    position: fixed;
    inset:    0;
    z-index:  -1;
    overflow: hidden;
}

.kves-auto-inject--overlay .kves-scene-container--auto {
    position: absolute;
    inset:    0;
}

.kves-scene-container--auto .kves-canvas {
    width:  100%;
    height: 100%;
}