/* --- BASIS --- */
* { box-sizing: border-box; }
body, html { margin: 0; padding: 0; width: 100%; height: 100%; overflow: hidden; background: #000; }

.view-wrapper {
    position: relative; display: none; margin: auto;
    background-size: cover; background-position: center;
}

/* --- WEICHEN --- */
@media (orientation: portrait) {
    .portrait-wrapper {
        display: block; width: 100vw; height: 177.78vw;
        max-height: 100vh; max-width: 56.25vh;
        background-image: url('background_texture_mobile_portrait.png');
    }
}

@media (orientation: landscape) {
    .landscape-wrapper {
        display: block; width: 100vw; height: 56.25vw;
        max-width: 100vw; max-height: 100vh;
        background-image: url('background_texture_mobile_landscape.png');
    }
}

/* --- FRAMEWORK GEMEINSAM --- */
.title-bar { position: absolute; top: 5%; left: 5%; z-index: 10; }
.title-bg { position: absolute; width: 110%; height: 100%; background: rgba(255, 255, 255, 0.2); z-index: -1; }
.title-bar h1 { font-family: 'Source Sans 3', sans-serif; font-weight: 900; font-size: 1.5rem; margin: 0; }

.outer-frame {
    position: absolute; top: 15%; left: 5%; width: 90%; height: 78%;
    border: 3px solid #ffccff; border-radius: 15px; padding: 3px; z-index: 5;
}
.inner-frame { width: 100%; height: 100%; border: 3px solid white; border-radius: 10px; position: relative; overflow: hidden; }

.control-bar { position: absolute; top: 10px; right: 10px; display: flex; gap: 8px; z-index: 50; }
.control-bar img { height: 35px; cursor: pointer; background: #ffccff; border-radius: 4px; padding: 2px; }

/* MODI */
.content-mode { display: none; width: 100%; height: 100%; }
.content-mode.active { display: block; }
iframe { width: 100%; height: 100%; border: none; }

/* --- LANDSCAPE SPEZIFISCH --- */
.top-logo { position: absolute; top: 5%; right: 5%; height: 40px; z-index: 10; }

.combined-layout { display: flex; width: 100%; height: 100%; background: #ffccff; }
.gallery-half { width: 45%; height: 100%; background: black; position: relative; }
.text-half { width: 55%; height: 100%; position: relative; }

/* SCROLLING */
.scroll-wrapper { width: 100%; height: 100%; overflow-y: auto; -webkit-overflow-scrolling: touch; }
.text-content { padding: 60px 20px 30px 20px; font-family: 'Titillium Web', sans-serif; color: black; line-height: 1.5; }

.scroll-arrow {
    position: absolute; bottom: 10px; left: 50%; transform: translateX(-50%);
    width: 30px; height: 30px; background: rgba(255,255,255,0.5); border-radius: 50%;
    display: flex; justify-content: center; align-items: center; z-index: 40;
    pointer-events: none; animation: bounce 2s infinite;
}
.scroll-arrow.fade-out { opacity: 0; }
@keyframes bounce { 0%, 100% { transform: translateX(-50%) translateY(0); } 50% { transform: translateX(-50%) translateY(-5px); } }

/* GALLERY */
.gallery-wrapper { position: relative; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; }
.gallery-img { width: 100%; height: 100%; object-fit: contain; }
.nav-overlay { position: absolute; bottom: 15px; width: 40px; height: 40px; background: rgba(255,255,255,0.2); display: flex; justify-content: center; align-items: center; cursor: pointer; }
.prev { left: 10px; } .next { right: 10px; }
.nav-overlay span { color: white; font-family: 'Source Sans 3'; font-weight: 900; font-size: 1.5rem; }

/* PORTRAIT LOGO */
.bottom-logo { position: absolute; bottom: 2%; right: 5%; height: 40px; }

/* --- TEXT MODUS HINTERGRUND KORREKTUR --- */
#p-mode-text, .text-half { 
    background-color: #ffccff !important; 
    height: 100%; 
    position: relative; 
}
/* Nur Sortierung: Map -> Pic -> Info -> Home */
.control-bar {
    display: flex;
    flex-direction: row; 
    gap: 8px;
}

.btn-map  { order: 1; }
.btn-pic  { order: 2; }
.btn-info { order: 3; }
.control-bar a { order: 4; }