/* --- BASIS (Behalte deinen Code von Kronberger/Research) --- */
* { 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 (Behalte deinen Code) */
@media (orientation: portrait) {
    .portrait-wrapper { display: block; width: 100vw; height: 177.78vw; max-height: 100vh; max-width: 56.25vh; }
}
/* LANDSCAPE 16:9 (Behalte deinen Code) */
@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 & MODI (Behalte deinen Code) */
.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; }
.content-mode { display: none; width: 100%; height: 100%; position: relative; }
.content-mode.active { display: block; }
.mode-rosa { background-color: #ffccff !important; }
iframe { width: 100%; height: 100%; border: none; }

.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; }

/* SEEDS PORTRAIT START LAYOUT (2/3 Web, 1/3 Text) */
.p-start-layout { display: flex; flex-direction: column; height: 100%; }
.p-start-site { flex: 2; position: relative; border-bottom: 2px solid white; }
.p-start-text { flex: 1; padding: 15px; font-family: 'Titillium Web'; font-size: 0.9rem; line-height: 1.4; color: black; overflow-y: auto; }

/* SEEDS LANDSCAPE START LAYOUT (2/3 Web Links, 1/3 Text Rechts) */
.l-start-layout { display: flex; width: 100%; height: 100%; }
.l-start-site { width: 66.66%; position: relative; border-right: 2px solid white; }
.l-start-text { width: 33.33%; padding: 20px; font-family: 'Titillium Web'; font-size: 0.9rem; line-height: 1.4; color: black; overflow-y: auto; }

/* Expand Symbol */
.expand-trigger {
    position: absolute; bottom: 10px; right: 10px;
    width: 35px; height: 35px; background: rgba(255,255,255,0.5);
    border-radius: 50%; display: flex; justify-content: center; align-items: center;
    cursor: pointer; z-index: 10; border: 2px solid white;
}
.expand-trigger span { color: black; font-weight: bold; }

/* TEXT & SCROLLING (Wie Kronberger) */
.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; }

/* GALLERY & COMBINED */
.dual-gallery-container { display: flex; flex-direction: column; height: 100%; }
.gallery-half-p { flex: 1; border-bottom: 2px solid white; position: relative; }
.combined-layout { display: flex; width: 100%; height: 100%; }
.gallery-half { width: 45%; background: black; position: relative; }
.text-half { width: 55%; background: #ffccff; position: relative; border-left: 2px solid white; }

.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; }

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

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

/* 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; }