/* --- BASIS & FRAMEWORK --- */
* { box-sizing: border-box; }
body, html {
    margin: 0; padding: 0; width: 100%; height: 100%; overflow: hidden;
    background-image: url('background_texture_mobile_portrait.png');
    background-size: cover; background-position: center;
    display: flex; justify-content: center; align-items: center; background-color: #000;
}
.view-wrapper { position: relative; display: none; margin: auto; }

/* PORTRAIT 9:16 */
@media (orientation: portrait) {
    .portrait-wrapper { display: block; width: 100vw; height: 177.78vw; max-height: 100vh; max-width: 56.25vh; }
}
/* LANDSCAPE 16:9 */
@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');
    }
}

/* TITEL & RAHMEN */
.title-bar { position: absolute; top: 8%; 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.8rem; margin: 0; }
.outer-frame { position: absolute; top: 15%; left: 5%; width: 90%; height: 75%; 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: 100; }
.control-bar img { height: 35px; cursor: pointer; background: #ffccff; border-radius: 4px; padding: 2px; }

/* PORTRAIT START (Fix) */
.start-content { display: flex; flex-direction: column; height: 100%; }
.start-top-img { width: 100%; height: 40%; object-fit: cover; }
.separator-line { width: 100%; height: 6px; border-top: 3px solid white; border-bottom: 3px solid #ffccff; }
.start-text { padding: 15px; font-family: 'Titillium Web'; font-size: 0.95rem; line-height: 1.4; color: black; overflow-y: auto; }

/* LANDSCAPE START (Neu: Bild LINKS, Text RECHTS) */
.l-start-layout { display: flex; width: 100%; height: 100%; padding: 20px; align-items: center; background-color: #ffccff; }
.l-start-img-box { width: 45%; height: 80%; }
.l-start-img-box img { width: 100%; height: 100%; object-fit: contain; }
.l-start-text { width: 55%; padding-left: 30px; font-family: 'Titillium Web'; font-size: 1rem; color: black; overflow-y: auto; height: 80%; }

/* TEXT & GALLERY GEMEINSAM */
.content-mode { display: none; width: 100%; height: 100%; position: relative; }
.content-mode.active { display: block; }
.mode-rosa { background-color: #ffccff !important; }
.scroll-wrapper { width: 100%; height: 100%; overflow-y: auto; -webkit-overflow-scrolling: touch; }
.text-content { padding: 60px 20px 40px 20px; font-family: 'Titillium Web'; color: black; line-height: 1.5; }
.nav-overlay { position: absolute; bottom: 10px; width: 45px; height: 45px; background: rgba(255,255,255,0.2); display: flex; justify-content: center; align-items: center; cursor: pointer; z-index: 10; }
.prev { left: 10px; } .next { right: 10px; }

/* DUAL GALLERY PORTRAIT */
.dual-gallery-container { display: flex; flex-direction: column; width: 100%; height: 100%; }
.gallery-half-p { flex: 1; border-bottom: 2px solid white; overflow: hidden; position: relative; }
.gallery-wrapper { width: 100%; height: 100%; position: relative; display: flex; align-items: center; justify-content: center; background: black; }
.gallery-img { width: 100%; height: 100%; object-fit: contain; }

/* LOGOS */
.footer-logos { position: absolute; bottom: 2%; width: 90%; left: 5%; display: flex; justify-content: space-between; align-items: center; }
.footer-logos img, .top-logos-landscape img { height: 30px; object-fit: contain; }
.top-logos-landscape { position: absolute; top: 5%; right: 5%; display: flex; gap: 15px; }

/* PFEIL */
.scroll-arrow { position: absolute; bottom: 15px; left: 50%; transform: translateX(-50%); animation: bounce 2s infinite; pointer-events: none; transition: 0.3s; }
.scroll-arrow.fade-out { opacity: 0; }
@keyframes bounce { 0%, 100% { transform: translateX(-50%) translateY(0); } 50% { transform: translateX(-50%) translateY(-5px); } }

/* 1. Icons sortieren (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; }

/* 2. Map-Button nur auf dieser Seite unsichtbar machen */
.btn-map {
    display: none !important;
}