/* ==========================================
   MARIO BERG - MARITIME STYLE ENGINE (ULTIMATE)
   ========================================== */

html, body {
    width: 100%; max-width: 100%; margin: 0; padding: 0;
    overflow-x: hidden !important; box-sizing: border-box;
}

body {
    font-family: 'Plus Jakarta Sans', -apple-system, sans-serif;
    background-color: #020617;
    background-image: linear-gradient(to bottom, rgba(2, 6, 23, 0.9), rgba(15, 23, 42, 0.95)), 
                      url('bg_mario.jpg');
    background-size: cover; background-position: center; background-attachment: fixed;
    position: relative; color: #f1f5f9;
}

/* ==========================================
   TYPOGRAFIE & LOGO (Strikte Baseline)
   ========================================== */
@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@700&family=Plus+Jakarta+Sans:wght@800&display=swap');

.brand-title-container { 
    overflow: visible !important; position: relative; z-index: 50; display: flex; 
    align-items: baseline; justify-content: center; text-align: center;
    -webkit-user-select: none; user-select: none; -webkit-touch-callout: none;
}

.letter-base { display: inline-block; color: #f1f5f9; position: relative; transition: all 0.3s ease; }

.brand-mario { font-family: 'Plus Jakarta Sans', sans-serif; font-size: 2.2rem; font-weight: 800; -webkit-text-stroke: 1.2px white; letter-spacing: 0.15em; margin-right: -0.05em; }
.brand-mario .first-letter { font-size: 2.6rem; }

.o-wrapper { 
    position: relative; display: inline-flex; align-items: baseline; justify-content: center; 
    font-family: 'Plus Jakarta Sans', sans-serif; font-size: 2.2rem; font-weight: 800; 
    -webkit-text-stroke: 1.2px white; margin: 0 0.1em;
}

.brand-berg { font-family: 'Cinzel', serif; font-weight: 700; letter-spacing: -0.02em; margin-left: -0.03em; font-size: 2.45rem; color: #38bdf8; -webkit-text-fill-color: #38bdf8; -webkit-text-stroke: 0; }
.brand-berg .first-letter { font-size: 3.0rem; }

/* ==========================================
   DER PERFEKTE, SPITZE LICHTKEGEL
   ========================================== */
.beam {
    position: absolute; bottom: 50%; left: 50%; width: 400px; height: 350px;
    background: conic-gradient(
        from 330deg at 50% 100%, transparent 0deg, rgba(56, 189, 248, 0.05) 10deg,
        rgba(16, 185, 129, 0.3) 20deg, rgba(56, 189, 248, 0.8) 30deg,
        rgba(16, 185, 129, 0.3) 40deg, rgba(56, 189, 248, 0.05) 50deg, transparent 60deg
    );
    -webkit-mask-image: linear-gradient(to top, black 0%, transparent 100%);
    mask-image: linear-gradient(to top, black 0%, transparent 100%);
    transform: translateX(-50%) rotate(0deg); transform-origin: bottom center;
    opacity: 0; pointer-events: none; z-index: 10; mix-blend-mode: screen; transition: opacity 0.5s ease;
}

body.lighthouse-scanning .beam, .force-beam .beam {
    -webkit-mask-image: linear-gradient(to bottom, black 0%, transparent 100%);
    mask-image: linear-gradient(to bottom, black 0%, transparent 100%);
    top: 50%; bottom: auto; transform-origin: top center;
    background: conic-gradient(
        from 150deg at 50% 0%, transparent 0deg, rgba(56, 189, 248, 0.05) 10deg,
        rgba(16, 185, 129, 0.3) 20deg, rgba(56, 189, 248, 0.8) 30deg,
        rgba(16, 185, 129, 0.3) 40deg, rgba(56, 189, 248, 0.05) 50deg, transparent 60deg
    );
}

#eshare-3d-stage { position: absolute; inset: 0; perspective: 1000px; pointer-events: none; z-index: -1; display: flex; align-items: center; justify-content: center; }
.swift-text {
    position: absolute; font-family: 'Cinzel', serif; font-variant: small-caps; font-size: 1.1rem; font-weight: 700; white-space: nowrap; color: rgba(255, 255, 255, 0.65);
    text-shadow: 0 0 10px rgba(56, 189, 248, 0.8), 0 0 20px rgba(16, 185, 129, 0.6); opacity: 0; visibility: hidden; transition: all 0.5s ease; transform: scale(0.5); 
}
.text-laden { left: -140px; top: -10px;}
.text-teilen { right: -140px; top: -10px;}

body.js-loaded .beam { animation: mysteryBlinkUp 2.5s ease-out 1; }
@keyframes mysteryBlinkUp { 0% { opacity: 0; transform: translateX(-50%) rotate(-10deg); } 50% { opacity: 0.6; transform: translateX(-50%) rotate(10deg); } 100% { opacity: 0; transform: translateX(-50%) rotate(0deg); } }
body.input-focused .beam, .brand-title-container:hover .beam { opacity: 1; animation: sweep-beam-up 4s ease-in-out infinite alternate; }
@keyframes sweep-beam-up { 0% { transform: translateX(-50%) rotate(-25deg); } 100% { transform: translateX(-50%) rotate(25deg); } }
body.lighthouse-scanning .beam, .force-beam .beam { opacity: 1; animation: sweep-beam-down 4s ease-in-out infinite alternate; }
@keyframes sweep-beam-down { 0% { transform: translateX(-50%) rotate(-25deg); } 100% { transform: translateX(-50%) rotate(25deg); } }

.brand-title-container:hover .swift-text { opacity: 1 !important; visibility: visible !important; transform: scale(1); }
.brand-title-container:hover #eshare-3d-stage .text-laden { animation: burstOutLaden 3s infinite cubic-bezier(0.4, 0, 0.2, 1); }
.brand-title-container:hover #eshare-3d-stage .text-teilen { animation: burstOutTeilen 3s infinite cubic-bezier(0.4, 0, 0.2, 1); animation-delay: -1.5s; }
@keyframes burstOutLaden { 0% { transform: translateZ(-200px) scale(0.5) translateX(50px); opacity: 0; } 20% { opacity: 1; } 80% { transform: translateZ(100px) scale(1.1) translateX(0); opacity: 1; filter: blur(0px); } 100% { transform: translateZ(200px) scale(1.3) translateX(-20px); opacity: 0; filter: blur(4px); } }
@keyframes burstOutTeilen { 0% { transform: translateZ(-200px) scale(0.5) translateX(-50px); opacity: 0; } 20% { opacity: 1; } 80% { transform: translateZ(100px) scale(1.1) translateX(0); opacity: 1; filter: blur(0px); } 100% { transform: translateZ(200px) scale(1.3) translateX(20px); opacity: 0; filter: blur(4px); } }

/* ==========================================
   SPRACH-BUTTON & HAMBURGER MENÜ (Wiederhergestellt)
   ========================================== */
.globe-btn { position: fixed; top: 15px; left: 20px; z-index: 10001; font-size: 1.5rem; cursor: pointer; transition: transform 0.2s ease; background: rgba(15, 23, 42, 0.7); border: 1px solid rgba(56, 189, 248, 0.3); border-radius: 50%; width: 45px; height: 45px; display: flex; align-items: center; justify-content: center; backdrop-filter: blur(10px); }
.globe-btn:hover { transform: scale(1.1); border-color: #38bdf8; }
.lang-menu { position: fixed; top: 70px; left: 20px; background: rgba(15, 23, 42, 0.95); border: 1px solid rgba(56, 189, 248, 0.3); border-radius: 12px; padding: 10px; display: none; flex-direction: column; gap: 5px; z-index: 10001; backdrop-filter: blur(10px); }
.lang-menu.show { display: flex; animation: fadeIn 0.2s ease-out forwards; }
.lang-menu a { color: #cbd5e1; font-size: 12px; font-weight: bold; text-transform: uppercase; text-decoration: none; padding: 8px 15px; border-radius: 6px; text-align: center; }
.lang-menu a:hover, .lang-menu a.active { background: rgba(56, 189, 248, 0.2); color: #38bdf8; }

.hamburger-btn {
    position: fixed; top: 15px; right: 20px; z-index: 10001;
    background: rgba(15, 23, 42, 0.7); border: 1px solid rgba(56, 189, 248, 0.3); backdrop-filter: blur(10px);
    border-radius: 50%; width: 45px; height: 45px; display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 5px; cursor: pointer; transition: all 0.3s ease; box-shadow: 0 0 15px rgba(0,0,0,0.5);
}
.hamburger-btn span { display: block; width: 22px; height: 2px; background-color: #38bdf8; transition: 0.3s; border-radius: 2px; }
.hamburger-btn.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.hamburger-btn.open span:nth-child(2) { opacity: 0; }
.hamburger-btn.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

#visitenkarte-menu {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 10000;
    background-color: rgba(2, 6, 23, 0.95); backdrop-filter: blur(15px);
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1.5rem;
    opacity: 0; visibility: hidden; transition: opacity 0.4s ease, visibility 0.4s;
}
#visitenkarte-menu.open { opacity: 1; visibility: visible; }
.visitenkarte-link {
    font-family: 'Plus Jakarta Sans', sans-serif; font-size: 1.2rem; font-weight: 700; color: #e2e8f0; text-decoration: none;
    padding: 15px 30px; border: 1px solid rgba(56, 189, 248, 0.2); border-radius: 50px;
    background: rgba(15, 23, 42, 0.6); min-width: 250px; text-align: center;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); text-transform: uppercase; letter-spacing: 2px;
    transform: translateY(20px); opacity: 0; cursor: pointer;
}
#visitenkarte-menu.open .visitenkarte-link { transform: translateY(0); opacity: 1; }
#visitenkarte-menu.open .visitenkarte-link:nth-child(2) { transition-delay: 0.1s; }
#visitenkarte-menu.open .visitenkarte-link:nth-child(3) { transition-delay: 0.2s; }
#visitenkarte-menu.open .visitenkarte-link:nth-child(4) { transition-delay: 0.3s; }
#visitenkarte-menu.open .visitenkarte-link:nth-child(5) { transition-delay: 0.4s; }
.visitenkarte-link:hover { border-color: #38bdf8; background: rgba(56, 189, 248, 0.1); transform: scale(1.05); box-shadow: 0 0 20px rgba(56, 189, 248, 0.2); }

@keyframes fadeIn { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: translateY(0); } }

/* ==========================================
   RESTLICHES UI (Tabs & Modals)
   ========================================== */
nav { position: relative; z-index: 30; }
.tab-btn .expand-text { max-width: 0; opacity: 0; overflow: hidden; white-space: nowrap; transition: max-width 0.4s ease, opacity 0.3s ease; display: inline-block; vertical-align: bottom; }
.tab-btn:hover .expand-text, .tab-btn.active .expand-text { max-width: 120px; opacity: 1; }

@keyframes crt-turn-on { 0% { transform: scale(1, 0.001); filter: brightness(10); opacity: 0; } 40% { transform: scale(1, 0.001); filter: brightness(10); opacity: 1; } 70% { transform: scale(1, 1); filter: brightness(2); opacity: 1; } 100% { transform: scale(1, 1); filter: brightness(1); opacity: 1; } }
.progressive-load { animation: crt-turn-on 0.6s cubic-bezier(0.23, 1, 0.32, 1) forwards; }

.target-found { border-color: rgba(16, 185, 129, 0.8); box-shadow: 0 0 15px rgba(16, 185, 129, 0.4); }
.dyndns-bg { background-image: linear-gradient(to bottom, rgba(15,23,42,0.85), rgba(15,23,42,0.95)), url('https://images.unsplash.com/photo-1498036882173-b41c28af5f27?q=80&w=800&auto=format&fit=crop'); background-size: cover; background-position: center; }
.modal-bg { background: rgba(15, 23, 42, 0.85); backdrop-filter: blur(8px); }
.modal-container { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; position: fixed; inset: 0; z-index: 99999; }
.modal-box { margin: 0 auto; }

/* ==========================================
   IMPRESSUM & FOOTER (Mit NoScript-Fallback)
   ========================================== */
.impressum-container { margin-top: 15px; font-size: 10px; color: #64748b; text-align: center; }
.impressum-container a { color: #94a3b8; text-decoration: none; font-weight: bold; cursor: pointer; transition: color 0.3s ease; }
.impressum-container a:hover { color: #38bdf8; }
.impressum-content { max-height: 0; overflow: hidden; transition: max-height 0.5s ease; opacity: 0; }
.impressum-content.open { max-height: 200px; opacity: 1; margin-top: 10px; }
.noscript-impressum:hover .impressum-content { max-height: 200px; opacity: 1; margin-top: 10px; }

/* ==========================================
   GAMIFICATION: LAYERED OZEAN
   ========================================== */
#eshare-stage {
    position: absolute; bottom: 0; left: 0; width: 100%; height: 120px; overflow: hidden; pointer-events: none; z-index: 10;
}

/* 1. DER FISCH (Ganz nach hinten, z-index: 5) */
#game-fish {
    position: absolute; bottom: 40px; right: -50px; font-size: 24px;
    animation: swimBothWays 20s linear infinite; pointer-events: none;
    z-index: 5; 
}
@keyframes swimBothWays { 
    0%   { right: -50px; bottom: 30px; transform: scaleX(1); } 
    10%  { bottom: 80px; transform: scaleX(1) rotate(-10deg); }
    20%  { bottom: 40px; transform: scaleX(1) rotate(10deg); }
    30%  { bottom: 90px; transform: scaleX(1) rotate(-10deg); }
    40%  { bottom: 50px; transform: scaleX(1) rotate(10deg); }
    49%  { right: 110vw; bottom: 60px; transform: scaleX(1); } 
    50%  { right: 110vw; bottom: 60px; transform: scaleX(-1); }
    60%  { bottom: 40px; transform: scaleX(-1) rotate(10deg); }
    70%  { bottom: 80px; transform: scaleX(-1) rotate(-10deg); }
    80%  { bottom: 30px; transform: scaleX(-1) rotate(10deg); }
    90%  { bottom: 70px; transform: scaleX(-1) rotate(-10deg); }
    99%  { right: -50px; bottom: 40px; transform: scaleX(-1); }
    100% { right: -50px; bottom: 30px; transform: scaleX(1); } 
}

/* 2. DIE WELLE (Unendlich, z-index: 15. Liegt VOR dem Fisch) */
.ocean-waves { 
    position: absolute; bottom: 0; left: 0; width: 200%; height: 120px; 
    background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000 120"><path d="M0,60 Q125,0 250,60 T500,60 T750,60 T1000,60 V120 H0 Z" fill="rgba(14,165,233,0.15)"/></svg>') repeat-x bottom; 
    background-size: 500px 120px; animation: wave-drift 20s linear infinite; pointer-events: none;
    z-index: 15; 
}
@keyframes wave-drift { 0% { transform: translateX(0); } 100% { transform: translateX(-500px); } }

/* 3. DER INTERAKTIVE HAI (z-index: 20. Liegt VOR der Welle) */
#game-shark {
    position: fixed; bottom: 50px; left: 50%; transform: translateX(-50%);
    width: 70px; height: 50px; cursor: grab; z-index: 20; pointer-events: auto;
    touch-action: none; transition: transform 0.2s ease;
}
#game-shark:active { cursor: grabbing; }

/* Der fette HI! Effekt */
#splash-hi {
    position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%) scale(0);
    font-family: 'Cinzel', serif; font-size: 8rem; font-weight: 900; color: #38bdf8;
    text-shadow: 0 0 40px rgba(56, 189, 248, 0.8);
    opacity: 0; z-index: 99999; pointer-events: none;
}
.splash-animate { animation: splashHiAnim 1s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards !important; }
@keyframes splashHiAnim { 0% { transform: translate(-50%, -50%) scale(0); opacity: 0; } 50% { transform: translate(-50%, -50%) scale(1.2); opacity: 1; } 100% { transform: translate(-50%, -50%) scale(1); opacity: 0; } }

/* ==========================================
   NOSCRIPT FALLBACK (Pure CSS Funkkontakt)
   ========================================= */
.noscript-container { position: relative; display: inline-block; pointer-events: auto; }
.noscript-label { cursor: pointer; }
#noscript-toggle { display: none; }
#noscript-toggle:checked ~ #noscript-contact-modal { opacity: 1; visibility: visible; }
#noscript-toggle:checked ~ #noscript-contact-modal .modal-box { transform: scale(1); }

#noscript-contact-modal {
    position: fixed; inset: 0; width: 100vw; height: 100vh;
    background: rgba(15, 23, 42, 0.9); backdrop-filter: blur(10px);
    display: flex; align-items: center; justify-content: center;
    opacity: 0; visibility: hidden; transition: all 0.3s ease; z-index: 99999;
}