/* ==========================================================================
   REEFMANAGER - ZENTRALES MAIN STYLESHEET (MODULAR V6.0)
   ========================================================================== */

/* --- 1. MODULARE IMPORTE AUS XTRA_STYLES --- */
@import url('xtra_styles/style_navbar.css');
@import url('xtra_styles/style_cards.css');
@import url('xtra_styles/style_slider.css');
@import url('xtra_styles/style_quote.css');
@import url('xtra_styles/style_forms_buttons.css');
@import url('xtra_styles/style_hub_modal.css');
@import url('xtra_styles/style_banner.css');
@import url('xtra_styles/style_footer.css');
@import url('xtra_styles/style_comments.css');
@import url('xtra_styles/style_mobile.css');

/* ==========================================================================
   2. DESIGN TOKENS (BALANCIERTE TRANSPARENZ, 4PX BLUR, WEISSER GLOW)
   ========================================================================== */
:root {
    --primary-color: #ffffff;
    --text-color: #f8fafc;
    --text-color-muted: #cbd5e1;

    /* 1. HAUPTKACHELN */
    --card-opacity: 0.68;
    --glass-bg: rgba(4, 6, 12, var(--card-opacity));
    --glass-bg-hover: rgba(8, 14, 26, 0.82);
    --card-blur: 4px;

    /* 2. INNERE KACHELN & UNTERELEMENTE */
    --inner-glass-bg: rgba(2, 4, 8, 0.42);
    --inner-glass-bg-hover: rgba(6, 10, 18, 0.65);

    /* 3. NAVBAR & FOOTER */
    --nav-opacity: 0.75;
    --nav-bg: rgba(4, 6, 12, var(--nav-opacity));

    /* 4. RAHMEN & LEUCHTSCHIMMER */
    --glass-border: rgba(255, 255, 255, 0.55);
    --glass-border-hover: #ffffff;
    
    --glass-shadow: 0 15px 35px rgba(0, 0, 0, 0.8), 0 0 15px rgba(255, 255, 255, 0.12);
    --glass-shadow-hover: 0 20px 45px rgba(0, 0, 0, 0.9), 0 0 25px rgba(255, 255, 255, 0.35);

    --radius-lg: 20px;
    --radius-md: 14px;
    --radius-sm: 8px;
    --radius-full: 50px;
}

/* ==========================================================================
   3. BASE RESET & HINTERGRUND-SCHICHTEN
   ========================================================================== */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    scroll-behavior: smooth;
    height: 100%;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    color: var(--text-color);
    line-height: 1.65;
    background-color: #020204 !important;
    overflow-x: hidden;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

/* Hintergrundbild */
.background-layer {
    position: fixed;
    width: 120vw;
    height: 120vh;
    left: -10vw;
    top: -10vh;
    background-size: cover;
    background-position: center;
    z-index: -2 !important;
    transform: translate3d(0, 0, 0) scale(1.1);
    opacity: 1 !important;
}

/* Gravity Mesh Overlay */
.gravity-loader-overlay {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    z-index: 0 !important;
    pointer-events: none !important;
}

/* Inhaltsebene */
.content-layer {
    position: relative !important;
    z-index: 20 !important;
    width: 100%;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    padding-top: 70px; /* WICHTIG: Platzhalter für die 70px feste Navbar */
}

.container {
    width: 100%;
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 20px;
}

main.container {
    flex: 1 0 auto;
}

/* ==========================================================================
   4. TYPOGRAFIE & ANIMATIONEN
   ========================================================================== */
h1, h2, h3, h4, h5 {
    color: #ffffff;
    line-height: 1.3;
    font-weight: 700;
}

h1 { font-size: 2.8rem; }
h2 { font-size: 2.1rem; margin-bottom: 1rem; }
h3 { font-size: 1.45rem; }
h4 { font-size: 1.2rem; }

p { margin-bottom: 1rem; color: var(--text-color); }
a { color: var(--primary-color); text-decoration: none; transition: all 0.3s ease; }

@keyframes shimmer-line {
    0%, 100% { opacity: 0.25; filter: drop-shadow(0 0 2px rgba(255, 255, 255, 0.2)); }
    50% { opacity: 0.85; filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.7)); }
}

@keyframes header-glow {
    0%, 100% { text-shadow: 0 0 8px rgba(255, 255, 255, 0.2); }
    50% { text-shadow: 0 0 22px rgba(255, 255, 255, 0.85); }
}