/**
 * SmartHomeConsulting - Panorama Viewer Styles (Final v3)
 * Name: Arthur Peter Lorenzen
 * Adresse: Bachtelstrasse 68, 8342 Wernetshausen, Schweiz
 * Telefon: +41 44 938 07 15
 * E-Mail: info@smarthomeconsulting.ch
 * web: www.smarthomeconsulting.ch
 *
 * DESCRIPTION: Randloser Viewer (Überprüfung Elternelemente!).
 *              Mobile Thumbnails vergrößert & Pfeilhöhe angepasst.
 */

/* ======================================= */
/*   0. VARIABLEN (Spezifisch für Viewer)  */
/* ======================================= */
:root {
    /* Definiert die Standardhöhe der Kontrollleiste */
    --viewer-controls-height: 90px;
    --viewer-controls-height-tablet: 80px;
    --viewer-controls-height-mobile: 70px; /* Höhe der Leiste bleibt, Inhalt wird größer */
    --viewer-controls-height-small-mobile: 65px; /* Höhe der Leiste bleibt, Inhalt wird größer */

    /* Definiert die Höhe der Vorschaubilder (NEUE MOBILE WERTE) */
    --thumbnail-height: 70px;
    --thumbnail-height-desktop: 70px;
    --thumbnail-height-tablet: 70px;
    --thumbnail-height-mobile: 70px;  /* Erhöht für Standard-Mobile */
    --thumbnail-height-small-mobile: 70px; /* Erhöht für kleine Mobile (gute Touch-Größe) */

    /* Breite der Navigationspfeile */
    --arrow-width: 22px;
    --arrow-width-desktop: 22px;
    --arrow-width-mobile: 30px;
    --arrow-width-touch: 40px;

    /* Abstand zwischen Pfeil und Thumbnail-Scrollbereich */
    --thumbnail-arrow-gap: 5px;
    /* Dynamischer Abstand zum Footer (wird per JS gesetzt) */
    --footer-offset: var(--footer-height);
}


/* ======================================= */
/*   1. PANORAMA VIEWER BASIS              */
/* ======================================= */

/* 1.1 Panorama-Container - Füllt den gesamten Bildschirm RANDLOS */
#panorama {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important; /* Explizit 0 */
    right: 0 !important; /* Explizit 0 */
    bottom: 0 !important;
    width: 100vw !important; /* Erzwingt Viewport-Breite */
    height: 100vh !important; /* Erzwingt Viewport-Höhe */
    margin: 0 !important;
    padding: 0 !important;
    background-color: #000;
    z-index: var(--z-index-base, 1);
    border: none !important;
    box-sizing: border-box !important; /* Sicherstellen, dass Border/Padding eingerechnet wären (sind aber 0) */
    /* !!! WICHTIGER HINWEIS ZUM LINKEN PADDING !!! */
    /* Wenn weiterhin links ein Abstand ist, liegt es sehr wahrscheinlich */
    /* an einem übergeordneten Element (body, html, #app, wrapper div etc.). */
    /* Bitte dieses Element mit den Browser-Entwicklertools untersuchen */
    /* und dessen padding-left, margin-left oder max-width korrigieren! */
}

/* 1.2 Steuerelemente Container */
.controls {
    position: fixed !important;
    bottom: var(--footer-offset) !important;
    left: 0;
    right: 0;
    width: 100%;
    /* Höhe exakt auf Thumbnail-Höhe begrenzen */
    height: var(--thumbnail-height);
    /* Über dem Footer, damit Pfeile klickbar bleiben */
    z-index: calc(var(--z-index-footer, 100) + 1);
    background-color: rgba(0, 0, 0, 0.1);
    margin: 0;
    padding: 0;
    overflow: visible; /* nichts abschneiden */
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* Überschrift innerhalb der Controls ausblenden, damit nichts abgeschnitten wird */
.controls .section-title { display: none !important; height: 0 !important; margin: 0 !important; padding: 0 !important; }

/* ======================================= */
/*   2. CAROUSEL & THUMBNAILS (Flexbox Layout) */
/* ======================================= */

.carousel-container {
    position: relative;
    width: 100%;
    max-width: 100%;
    margin: 0;
    padding: 0 var(--spacing-sm);
    box-sizing: border-box;
    display: flex;
    align-items: center;
    gap: var(--thumbnail-arrow-gap);
    /* Höhe basiert auf aktueller Thumbnail-Höhe */
    height: var(--thumbnail-height);
    min-height: var(--thumbnail-height);
}

/* 2.4 Navigationspfeile (Flex-Item) */
.carousel-nav {
    display: flex;
    width: var(--arrow-width);
    /* Höhe passt sich automatisch an Thumbnail-Höhe an */
    height: var(--thumbnail-height);
    background-color: rgba(0, 0, 0, 0.6);
    color: var(--text-color-inverted);
    border: 1px solid rgba(255, 255, 255, 0.3);
    box-shadow: var(--shadow-sm);
    border-radius: 5px;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: calc(var(--z-index-content, 10) + 30);
    transition: var(--transition-default);
    flex-shrink: 0;
    flex-grow: 0;
}


/* Wrapper für Thumbnails (Flex-Item) */
.carousel-wrapper {
    flex-grow: 1; flex-shrink: 1;
    overflow-x: auto; overflow-y: hidden;
    scroll-behavior: smooth; -webkit-overflow-scrolling: touch;
    padding: 0; margin: 0; display: flex; align-items: center;
    height: 100%;
}

/* Thumbnail-Liste */
.panorama-thumbnails {
    display: flex; gap: var(--spacing-sm); padding: 0 var(--spacing-xs);
    justify-content: flex-start; align-items: center; height: 100%;
    flex-shrink: 0;
}

/* Einzelnes Thumbnail */
.panorama-thumbnail {
    flex: 0 0 auto;
    /* Breite wird responsiv angepasst */
    width: 100px;
    /* Höhe nutzt die Variable und wird responsiv angepasst */
    height: var(--thumbnail-height);
    border-radius: var(--border-radius-small); cursor: pointer;
    border: 1px solid var(--text-color-inverted); object-fit: cover;
    transition: var(--transition-default); box-shadow: var(--shadow-sm);
    position: relative; z-index: calc(var(--z-index-content, 10) + 30);
}
.panorama-thumbnail:hover { transform: translateY(-2px); box-shadow: var(--shadow); }
.panorama-thumbnail.active { border-color: var(--primary-color); border-width: 2px; box-shadow: 0 0 8px rgba(139, 0, 0, 0.7); }

/* Beschriftungen ausblenden */
.panorama-thumbnail-caption, .thumbnail-label, .thumbnail-caption,
.panorama-thumbnails .caption, .panorama-thumbnails figcaption,
.panorama-thumbnails .title, .panorama-thumbnails span { display: none !important; }


/* ======================================= */
/*   3. BUTTONS & STEUERELEMENTE           */
/* ======================================= */
/* Unverändert */
.button-container { display: flex; gap: var(--spacing-md); margin: var(--spacing-xs) 0 0 0; padding: 0 var(--spacing-md) var(--spacing-xs) var(--spacing-md); justify-content: center; flex-wrap: wrap; background-color: transparent; flex-grow: 1; align-items: center; }
.button-container .btn { min-width: 150px; text-align: center; padding: var(--spacing-sm) var(--spacing-lg); font-weight: var(--font-weight-bold); border-radius: var(--border-radius); text-transform: uppercase; box-shadow: var(--shadow-sm); background-color: rgba(0, 0, 0, 0.7); color: var(--text-color-inverted); border: 1px solid var(--text-color-inverted); }
#normalViewFullscreenBtn, #detailBtn, #contactBtn { min-width: 150px; border-radius: var(--border-radius); background-color: rgba(139, 0, 0, 0.8); color: var(--text-color-inverted); border-color: transparent; }
.controls .icon-btn { background: none; border: 1px solid var(--text-color-inverted); border-radius: var(--border-radius); width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: var(--transition-default); position: relative; background-color: rgba(0, 0, 0, 0.5); padding: 0; }
.controls .icon-btn svg { stroke: var(--text-color-inverted); fill: none; width: 20px; height: 20px; transition: var(--transition-default); }
.controls .icon-btn:hover { background-color: rgba(139, 0, 0, 0.7); transform: translateY(-2px); border-color: var(--text-color-inverted); }
.controls .icon-btn::after { content: attr(title); position: absolute; top: -30px; left: 50%; transform: translateX(-50%); background-color: rgba(0, 0, 0, 0.8); color: var(--text-color-inverted); padding: 5px 8px; border-radius: var(--border-radius-small); font-size: var(--font-size-smaller); opacity: 0; visibility: hidden; transition: var(--transition-default); white-space: nowrap; z-index: 1; }
.controls .icon-btn:hover::after { opacity: 1; visibility: visible; }

/* ======================================= */
/*   4. FULLSCREEN CONTROLS                */
/* ======================================= */
/* Unverändert */
.fullscreen-controls { position: fixed; bottom: var(--spacing-lg); left: 0; right: 0; background-color: rgba(0, 0, 0, 0.7); padding: var(--spacing-md); display: none; justify-content: center; align-items: center; z-index: var(--z-index-fullscreen); transition: transform 0.3s ease, opacity 0.3s ease; border-radius: var(--border-radius); margin: 0 auto; max-width: 500px; opacity: 0; transform: translateY(100%); }
.fullscreen-controls.visible { display: flex; opacity: 1; transform: translateY(0); animation: fadeInControls 0.3s forwards; }
@keyframes fadeInControls { from { opacity: 0; transform: translateY(var(--spacing-lg)); } to { opacity: 1; transform: translateY(0); } }
.fullscreen-controls .control-icons { display: flex; gap: var(--spacing-md); }
.fullscreen-controls .icon-btn { background: none; border: 1px solid var(--text-color-inverted); border-radius: var(--border-radius); width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; transition: var(--transition-default); position: relative; background-color: rgba(0, 0, 0, 0.7); padding: 0; }
.fullscreen-controls .icon-btn svg { stroke: var(--text-color-inverted); fill: none; width: 20px; height: 20px; transition: var(--transition-default); }
.fullscreen-controls .icon-btn:hover { background-color: rgba(139, 0, 0, 0.7); border-color: var(--text-color-inverted); transform: translateY(-2px) scale(1.05); box-shadow: var(--shadow); }
.fullscreen-controls .icon-btn::after { content: attr(title); position: absolute; top: -30px; left: 50%; transform: translateX(-50%); background-color: rgba(0, 0, 0, 0.8); color: var(--text-color-inverted); padding: 5px 8px; border-radius: var(--border-radius-small); font-size: var(--font-size-smaller); opacity: 0; visibility: hidden; transition: var(--transition-default); white-space: nowrap; z-index: 1; }
.fullscreen-controls .icon-btn:hover::after { opacity: 1; visibility: visible; }

/* ======================================= */
/*   5. HOTSPOTS & PANNELLUM               */
/* ======================================= */
/* Unverändert */
.pnlm-hotspot { transition: transform 0.2s; } .pnlm-hotspot:hover { transform: scale(1.2); } .pnlm-hotspot-base.scene { background-color: rgba(113, 1, 1, 0.7); border-radius: 50%; } .pnlm-hotspot-base.info { background-color: rgba(139, 0, 0, 0.7); border-radius: 50%; } .pnlm-controls-container { top: 50% !important; transform: translateY(-50%) !important; bottom: auto !important; left: var(--spacing-sm) !important; z-index: var(--z-index-overlay) !important; } .pnlm-fullscreen-toggle-button { display: none !important; } .pnlm-container { position: relative !important; transform-style: preserve-3d; } .pnlm-hotspot-container { position: absolute !important; z-index: var(--z-index-overlay); top: 0; left: 0; right: 0; bottom: 0; pointer-events: none; will-change: transform; transform: translateZ(0); } .pnlm-hotspot { pointer-events: auto; transform: translate3d(0, 0, 0); }

/* ======================================= */
/*   6. ÜBERGÄNGE & LADEANIMATIONEN        */
/* ======================================= */
/* Unverändert */
.little-planet-enabled { transition: all 0.5s ease; } .room-transition { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0); z-index: var(--z-index-overlay); opacity: 0; transition: opacity 0.5s ease; pointer-events: none; } .room-transition.active { opacity: 1; background-color: rgba(0, 0, 0, 0.7); } .preloader { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.7); display: flex; justify-content: center; align-items: center; z-index: var(--z-index-modal); opacity: 0; visibility: hidden; transition: all 0.5s ease; } .preloader.active { opacity: 1; visibility: visible; } .loader { width: 50px; height: 50px; border: 5px solid rgba(255, 255, 255, 0.3); border-top: 5px solid var(--primary-color); border-radius: 50%; animation: spin 1s linear infinite; } @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }

/* ======================================= */
/*   7. RESPONSIVE DESIGN                  */
/* ======================================= */

/* 7.0 Desktop */
@media (min-width: 992px) {
    :root {
        --thumbnail-height: var(--thumbnail-height-desktop);
        --arrow-width: var(--arrow-width-desktop);
    }
    .controls { height: var(--viewer-controls-height); }
    .carousel-container { height: var(--thumbnail-height); min-height: var(--thumbnail-height); }
    .panorama-thumbnail { width: 120px; }
}

/* 7.1 Tablet */
@media (max-width: 992px) {
    :root {
        --thumbnail-height: var(--thumbnail-height-tablet);
        --arrow-width: var(--arrow-width);
    }
    .controls { height: var(--viewer-controls-height-tablet); bottom: var(--footer-offset) !important; }
    .carousel-container { height: var(--thumbnail-height); min-height: var(--thumbnail-height); padding: var(--spacing-xs) var(--spacing-sm); }
    .panorama-thumbnail { width: 90px; } /* Breite angepasst */
    .button-container .btn, #normalViewFullscreenBtn, #detailBtn, #contactBtn { min-width: 140px; padding: var(--spacing-sm) var(--spacing-md); font-size: 0.95rem; }
    .controls .icon-btn { width: 35px; height: 35px; } .controls .icon-btn svg { width: 18px; height: 18px; }
    .fullscreen-controls { width: calc(100% - 2 * var(--spacing-lg)); } .fullscreen-controls .icon-btn { width: 35px; height: 35px; } .fullscreen-controls .icon-btn svg { width: 18px; height: 18px; }
}

/* 7.2 Mobile */
@media (max-width: 768px) {
    :root {
        /* Verwende die größeren mobilen Thumbnail-Höhen */
        --thumbnail-height: var(--thumbnail-height-mobile);
        --arrow-width: var(--arrow-width-mobile);
        /* Höhe der Controls-Leiste leicht anpassen, falls Thumbnails größer werden */
        --viewer-controls-height: var(--viewer-controls-height-mobile);
    }
    .controls { height: var(--viewer-controls-height); bottom: var(--footer-offset) !important; }
    .carousel-container { height: var(--thumbnail-height); min-height: var(--thumbnail-height); padding: var(--spacing-xs) var(--spacing-xs); }
    .carousel-nav { border-radius: 4px; }
    .panorama-thumbnail { width: 80px; } /* Breite leicht erhöht */
    .fullscreen-controls.always-visible { bottom: var(--spacing-sm); padding: var(--spacing-sm); } .fullscreen-controls .icon-btn { width: 40px; height: 40px; } .fullscreen-controls .icon-btn svg { width: 20px; height: 20px; }
}

/* 7.3 Mobile Portrait */
@media (max-width: 480px) {
     :root {
        /* Verwende die größeren (klein-)mobilen Thumbnail-Höhen */
        --thumbnail-height: var(--thumbnail-height-small-mobile);
        --arrow-width: var(--arrow-width-mobile);
         /* Höhe der Controls-Leiste leicht anpassen */
        --viewer-controls-height: var(--viewer-controls-height-small-mobile);
     }
     .controls { height: var(--viewer-controls-height); bottom: var(--footer-offset) !important; }
    .carousel-container { height: var(--thumbnail-height); min-height: var(--thumbnail-height); padding: var(--spacing-xs); }
    .panorama-thumbnail { width: 70px; } /* Breite erhöht */
    .button-container { gap: 8px; } .button-container .btn, #normalViewFullscreenBtn, #detailBtn, #contactBtn { min-width: 100px; padding: 8px var(--spacing-sm); font-size: 0.85rem; }
    .fullscreen-controls { width: calc(100% - 2 * var(--spacing-sm)); padding: 8px; } .fullscreen-controls .control-icons { gap: 8px; } .fullscreen-controls .icon-btn { width: 36px; height: 36px; } .fullscreen-controls .icon-btn svg { width: 18px; height: 18px; }
}

/* Precache Modal (farben an Design-Variablen) */
.precache-modal {
    position: fixed;
    bottom: calc(var(--footer-offset) + 10px);
    left: 50%;
    transform: translateX(-50%);
    background: var(--container-bg-color);
    color: var(--text-color);
    border: 1px solid var(--border-color-light);
    border-radius: 10px;
    box-shadow: var(--shadow-lg);
    z-index: calc(var(--z-index-footer, 100) + 2);
    max-width: 520px;
    width: calc(100% - 20px);
}
.precache-modal .precache-title { font-weight: var(--font-weight-bold); }
.precache-modal .precache-actions { display:flex; gap:8px; margin-top:12px; }
.precache-btn-primary { flex:1; background: var(--primary-color); color: #fff; border: none; padding: 8px 12px; border-radius: 6px; cursor: pointer; font-size: 14px; }
.precache-btn-secondary { flex:1; background: #f0f0f0; color: var(--text-color); border: none; padding: 8px 12px; border-radius: 6px; cursor: pointer; font-size: 14px; }
.precache-progress-bar { background: #e0e0e0; height: 4px; border-radius: 2px; overflow: hidden; }
.precache-progress { background: var(--primary-color); height: 100%; width: 0%; transition: width 0.3s; }

/* 7.4 Touch-Unterstützung */
@media (pointer: coarse) {
    /* Stelle sicher, dass die Pfeilbreite für Touch groß genug ist */
    :root { --arrow-width: var(--arrow-width-touch); }
    .controls .icon-btn, .fullscreen-controls .icon-btn { min-width: 44px; min-height: 44px; }
}

/* ======================================= */
/*   8. SPEZIFISCHE ÜBERSCHREIBUNGEN       */
/* ======================================= */
/* Unverändert */
#panorama.fullscreen, #panorama.fullscreen-fallback { position: fixed !important; top: 0 !important; left: 0 !important; width: 100% !important; height: 100% !important; margin: 0 !important; z-index: var(--z-index-fullscreen) !important; background-color: #000 !important; height: 100vh !important; bottom: 0 !important; }
body.fullscreen-active .controls:not(.fullscreen-controls), #panorama.fullscreen ~ .controls:not(.fullscreen-controls) { display: none !important; }
.controls.hidden-in-fullscreen { display: none !important; }
.fullscreen-controls.always-visible { display: flex !important; opacity: 1 !important; transform: translateY(0) !important; bottom: var(--spacing-lg); border: 1px solid rgba(255, 255, 255, 0.2); box-shadow: var(--shadow); z-index: var(--z-index-fullscreen); }
.direction-feedback { animation: pulse 0.5s ease-in-out; }

/* WebApp-Stile wurden in webapp.css zentralisiert */