/**
 * GC 2.0 - MASTER DESIGN SYSTEM (FINAL ARCHITECTURE COMPLETE)
 * Architecture: Senior Frontend / UI/UX Lead
 * Logic: Strictly Variable-Based / Anti-Agency / Soft Ocean Theme
 * Status: 13/13 Sections Complete
 */

/* ---------------------------------------------------------
   1. FONTS & IMPORTS
   --------------------------------------------------------- */
@import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css');
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap');

/* ---------------------------------------------------------
   2. GLOBAL DESIGN TOKENS (ROOT ONLY)
   --------------------------------------------------------- */
:root {
    /* --- Foundation --- */
    --bg-main: #0b0d12;
    --bg-surface: rgba(255, 255, 255, 0.03);
    --bg-surface-hover: rgba(255, 255, 255, 0.06);
    --bg-dark-depth: #07090d;
    
    /* --- Soft Ocean & Dystopie Palette (Refined) --- */
    --gc-sky-cream: rgba(142, 200, 226, 0.897);   
    --gc-milky-ocean: #45b0ff;   /* Entsättigtes, weiches Ozean-Blau */
    --gc-ocean-glow: rgba(91, 188, 198, 0.15);
    --gc-cream-glow: rgba(235, 220, 203, 0.08);
    --gc-accent-cream: #ebdccb;   
    --gc-space-dust: #a1e3e9;     
    --gc-gold: #c9a96e;    

    /* --- Typography & Borders --- */
    --text-primary: #f3f2f3;
    --text-muted: rgba(255, 255, 255, 0.6);
    --text-dimmed: rgba(255, 255, 255, 0.4);
    --border-subtle: rgba(255, 255, 255, 0.08);
    --border-bright: rgba(255, 255, 255, 0.15);

    /* --- Brand Mapping --- */
    --primary-color: var(--gc-milky-ocean);
    --primary-hover: var(--gc-sky-cream);
    --primary-glow: var(--gc-ocean-glow);
    --accent-gradient: linear-gradient(135deg, var(--gc-sky-cream) 0%, var(--gc-milky-ocean) 100%);
    
    --font-main: 'Inter', sans-serif;

    /* --- Spacing & UI --- */
    --header-top-gap: 3.5rem; 
    --border-radius-pill: 50px;
    --border-radius-card: 16px;
    --section-spacing: 6rem;
    --section-spacing-mobile: 3rem;
}

/* ---------------------------------------------------------
   3. BASE LAYOUT & AMBIENT BACKGROUND
   --------------------------------------------------------- */
html { scroll-behavior: smooth; height: 100%; }

body {
    margin: 0;
    font-family: var(--font-main) !important;
    background-color: var(--bg-main);
    color: var(--text-muted);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    
    background-image: 
        radial-gradient(circle at 20% 20%, var(--gc-ocean-glow) 0%, transparent 40%),
        radial-gradient(circle at 80% 80%, var(--gc-cream-glow) 0%, transparent 45%),
        linear-gradient(180deg, var(--bg-main) 0%, var(--bg-dark-depth) 100%);
    background-attachment: fixed;
    background-size: cover;
}

.dialog-off-canvas-main-canvas {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

.layout-container {
    flex: 1 0 auto;
    display: flex;
    flex-direction: column;
}

main#content {
    margin-top: calc(var(--header-top-gap) + 4rem); 
}

.section {
    padding-top: var(--section-spacing-mobile) !important;
    padding-bottom: var(--section-spacing-mobile) !important;
    position: relative;
    width: 100%;
}

@media (min-width: 992px) {
    .section {
        padding-top: var(--section-spacing) !important;
        padding-bottom: var(--section-spacing) !important;
    }
}

.full-section {
    min-height: 100vh;
    display: flex;
    align-items: center;
    position: relative;
}

/* ---------------------------------------------------------
   4. TYPOGRAPHY
   --------------------------------------------------------- */
h1, h2, h3, h4, .h1, .h2, .h3 {
    font-family: var(--font-main) !important;
    color: var(--text-primary);
    font-weight: 300 !important; 
    letter-spacing: -0.04em;
    margin-bottom: 2rem;
}

.massive-headline {
    font-size: clamp(3.2rem, 9vw, 6.5rem);
    line-height: 1.15;
}

.text-gradient {
    background: var(--accent-gradient);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    display: inline-block; /* Wichtig für korrekten Gradient auf Inline-Elementen */
    filter: drop-shadow(0 0 15px rgba(148, 210, 248, 0.25)); /* Der Dystopie Glow */
}

a { color: var(--primary-color); transition: 0.3s ease; }
a:hover { color: var(--text-primary); }

.text-muted { color: var(--text-muted) !important; }
.text-primary { color: var(--primary-color) !important; }
.text-dimmed { color: var(--text-dimmed) !important; }

/* ---------------------------------------------------------
   5. HEADER & NAVIGATION (Centered Pill)
   --------------------------------------------------------- */
#navbar-main {
       position: absolute !important;  /* fixed damit es mitscrollt, absolut bleibt oben */
       top: var(--header-top-gap) !important;
       left: 50% !important;
       transform: translateX(-50%) !important; /* Exakte Zentrierung */
       z-index: 1040;
       
       background-color: rgba(15, 20, 28, 0.4) !important;
       backdrop-filter: blur(25px);
       -webkit-backdrop-filter: blur(25px);
       border: 1px solid var(--border-subtle) !important;
       border-radius: var(--border-radius-pill) !important;
       padding: 0.7rem 1.8rem !important;
       
       width: max-content !important; 
       max-width: 90vw; /* Fallback für kleine Screens */
       box-shadow: 0 20px 50px rgba(0,0,0,0.5);
}

.nav-link {
    color: var(--text-muted) !important;
    font-weight: 400 !important;
    font-size: 0.95rem;
    padding: 0.5rem 1.4rem !important;
}

.nav-link:hover, .nav-link.active {
    color: var(--text-primary) !important;
}

.navbar {
    pointer-events: auto;
    background-color: rgba(15, 20, 28, 0.4) !important;
    backdrop-filter: blur(25px);
    -webkit-backdrop-filter: blur(25px);
    border: 1px solid var(--border-subtle) !important;
    border-radius: var(--border-radius-pill) !important;
    padding: 0.7rem 1.8rem !important;
    width: max-content !important; 
    margin: 0 auto;
    box-shadow: 0 20px 50px rgba(0,0,0,0.5);
}

/* ---------------------------------------------------------
   6. CARDS & BENTO GRID
   --------------------------------------------------------- */
.card {
       background-color: var(--bg-surface);
       backdrop-filter: blur(20px);
       border: 1px solid var(--border-subtle) !important;
       border-radius: var(--border-radius-card);
       color: var(--text-muted) !important; /* Bootstrap Override Fix */
       transition: all 0.6s cubic-bezier(0.16, 1, 0.3, 1);
   }
   
   .card:hover {
       border-color: var(--border-bright) !important;
       transform: translateY(-10px);
       background-color: var(--bg-surface-hover);
       box-shadow: 0 40px 80px rgba(0,0,0,0.6);
   }

/* ---------------------------------------------------------
   7. FOOTER (Optimized)
   --------------------------------------------------------- */
footer, .site-footer {
    background-color: transparent !important;
    padding: 8rem 0 4rem !important;
    margin-top: auto;
}

.site-footer .block, 
.site-footer .region {
    border: none !important;
    background: transparent !important;
}

footer .h6, footer h5 {
    color: var(--text-primary) !important; 
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    font-size: 0.8rem;
    margin-bottom: 2rem;
}

footer p, footer li {
    color: var(--text-muted) !important;
    font-size: 0.95rem;
}

.social-links ul {
    display: flex !important;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 15px;
    padding: 0 !important;
    margin: 1rem 0 0 0 !important;
    list-style: none !important;
}

.social-links li {
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
}

.social-links a {
    width: 44px; 
    height: 44px;
    display: flex !important; 
    align-items: center; 
    justify-content: center;
    background: var(--bg-surface) !important;
    border: 1px solid var(--border-subtle) !important;
    border-radius: 50% !important;
    color: var(--text-primary) !important;
    transition: all 0.4s ease !important;
    text-decoration: none !important;
}

.social-links a:hover {
    background: var(--primary-color) !important;
    border-color: var(--primary-color) !important;
    color: var(--bg-main) !important;
    transform: translateY(-5px);
    box-shadow: 0 10px 20px var(--primary-glow) !important;
}

/* ---------------------------------------------------------
   8. BUTTONS (Refined Hover)
   --------------------------------------------------------- */
.btn {
    border-radius: var(--border-radius-pill);
    padding: 1.1rem 2.8rem;
    font-weight: 600;
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    font-size: 0.95rem;
}

.btn-primary {
    background: var(--accent-gradient) !important;
    border: none !important;
    color: var(--text-primary) !important;
}

.btn-primary:hover {
    transform: scale(1.05) translateY(-2px);
    box-shadow: 0 15px 30px var(--primary-glow);
    background: var(--gc-sky-cream) !important; 
}

.btn-outline-primary {
    border: 1px solid var(--border-bright);
    color: var(--text-primary);
    background: transparent;
}

.btn-outline-primary:hover {
    border-color: var(--primary-color);
    background: var(--primary-glow);
    color: var(--primary-color);
}

/* ---------------------------------------------------------
   9. DRUPAL SPECIFIC OVERRIDES
   --------------------------------------------------------- */
.breadcrumb { background: transparent; padding: 2rem 0; margin-bottom: 2rem; }
.breadcrumb-item a { color: var(--text-dimmed); text-decoration: none; }
.breadcrumb-item a:hover { color: var(--text-primary); }
.breadcrumb-item.active { color: var(--text-muted); }

.region-content, .region-footer, .block {
    background: transparent !important;
    box-shadow: none !important;
}

/* ---------------------------------------------------------
   10. PAGE SPECIFIC OVERRIDES
   --------------------------------------------------------- */
body.page-node-11 { --primary-color: #e2626b !important; }
body.page-node-10 { --primary-color: #cf1010 !important; }
body.page-node-8 { --primary-color: #4587ff !important; }
body.page-node-4 { --primary-color: var(--gc-milky-ocean) !important; }
body.page-node-9 { --primary-color: var(--gc-gold) !important; }
body.page-node-27 { --primary-color: #9333ea !important; }

/* ---------------------------------------------------------
   11. DRUPAL MESSAGES & HIGHLIGHTED REGION
   --------------------------------------------------------- */
.highlighted .section, 
.region-highlighted .section {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    margin: 0 !important;
    min-height: 0 !important;
}

/* ---------------------------------------------------------
   12. MEGA MENU STYLES (GC 2.0 Refined)
   --------------------------------------------------------- */
@media (min-width: 992px) {
    .nav-item.dropdown { position: static; }

    .dropdown-menu.mega-menu {
        width: 700px; max-width: 90vw; 
        left: 50% !important; right: auto !important;
        transform: translateX(-50%) translateY(10px); 
        margin-top: 0;
        border-radius: var(--border-radius-card);
        background-color: rgba(11, 13, 18, 0.95) !important; /* Deep dark glass */
        backdrop-filter: blur(25px);
        border: 1px solid var(--border-subtle);
        border-top: 2px solid var(--primary-color);
        padding: 2rem;
        display: block; visibility: hidden; opacity: 0;
        transition: all 0.3s ease;
        box-shadow: 0 25px 60px rgba(0,0,0,0.6);
    }

    .full-dropdown-menu.full-mega-menu {
        width: 100%; left: 0; right: 0; margin-top: 0;
        border-radius: 0 0 var(--border-radius-card) var(--border-radius-card);
        background-color: rgba(11, 13, 18, 0.95) !important; 
        backdrop-filter: blur(25px);
        border-top: 2px solid var(--primary-color);
        padding: 3rem 2rem;
        opacity: 0; transform: translateY(10px);
        transition: all 0.3s ease;
        display: block; visibility: hidden;
    }

    .full-nav-item.dropdown:hover .full-dropdown-menu.mega-menu,
    .nav-item.dropdown:hover .dropdown-menu.mega-menu {
        visibility: visible; opacity: 1;
        transform: translateX(-50%) translateY(0); 
    }

    .dropdown-menu.mega-menu .row { margin-right: -10px; margin-left: -10px; }
    .dropdown-menu.mega-menu .mega-col {
        padding: 0 10px;
        border-right: 1px solid var(--border-subtle);
    }

    .nav-item.simple-dropdown { position: relative; }
    .nav-item.simple-dropdown .dropdown-menu.mega-menu {
        width: auto; min-width: 200px;
        left: auto; right: 0; 
        padding: 1rem;
        border-top: 1px solid var(--primary-color);
        display: block; visibility: hidden;
    }
    .nav-item.simple-dropdown:hover .dropdown-menu.mega-menu { visibility: visible; }

    .nav-item.simple-dropdown .container-fluid,
    .nav-item.simple-dropdown .row {
        display: block !important; width: 100%; margin: 0; padding: 0;
    }
    .nav-item.simple-dropdown .mega-col {
        width: 100%; max-width: 100%; border-right: none;
        margin-bottom: 0.5rem; padding: 0;
    }

    .nav-item.simple-dropdown h6 {
        margin-bottom: 0; border-bottom: none;
        padding: 0.5rem 1rem; font-size: 0.95rem;
        color: var(--text-muted); cursor: pointer;
        transition: 0.2s; border-radius: 8px;
    }
    .nav-item.simple-dropdown h6:hover {
        background-color: var(--bg-surface); color: var(--primary-color);
    }
}

.dropdown-menu.mega-menu h6 {
    font-size: 0.85rem;
    color: var(--text-primary);
    border-bottom: 1px solid var(--border-subtle);
    padding-bottom: 10px;
}

.dropdown-item.hover-white { background: transparent !important; transition: transform 0.2s ease, color 0.2s ease; }
.dropdown-item.hover-white:hover {
    color: var(--text-primary) !important;
    transform: translateX(5px);
    background: transparent !important;
}

@media (max-width: 991px) {
    .dropdown-menu.mega-menu {
        position: static; float: none; width: 100%;
        background: transparent !important; border: none; box-shadow: none; padding-left: 1rem;
    }
    .mega-col { margin-bottom: 2rem; border: none; }
    .mega-col h6 { color: var(--text-primary) !important; font-size: 1rem; margin-top: 1rem; }
    .navbar-collapse {
        background-color: var(--bg-main); padding: 1rem;
        border-top: 1px solid var(--border-subtle);
        max-height: 80vh; overflow-y: auto; 
    }
}

/* ---------------------------------------------------------
   13. GC 2.0 HIGH-END FORM INTERFACE
   --------------------------------------------------------- */
.webform-submission-form {
    background-color: var(--bg-surface) !important;
    border: 1px solid var(--border-subtle);
    border-top: 3px solid var(--primary-color) !important;
    padding: 3rem !important;
    border-radius: var(--border-radius-card);
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.4);
    backdrop-filter: blur(15px);
}

.webform-submission-form .js-form-item,
.webform-submission-form .form-item {
    margin-bottom: 1.5rem;
}

.webform-submission-form label {
    color: var(--text-muted) !important;
    text-transform: none; 
    font-weight: 500;
    font-size: 0.95rem;
    margin-bottom: 8px;
    display: block;
}

.webform-submission-form .form-control,
.webform-submission-form input[type="text"],
.webform-submission-form input[type="email"],
.webform-submission-form select,
.webform-submission-form textarea {
    background-color: rgba(0,0,0,0.2) !important;
    border: 1px solid var(--border-subtle) !important;
    color: var(--text-primary) !important; 
    border-radius: 8px !important;
    padding: 12px 15px !important;
    transition: all 0.3s ease-in-out;
}

.webform-submission-form .form-control:focus,
.webform-submission-form input:focus,
.webform-submission-form textarea:focus {
    border-color: var(--primary-color) !important;
    box-shadow: 0 0 0 3px var(--primary-glow) !important; 
    background-color: rgba(0,0,0,0.4) !important;
    outline: none;
}

.webform-submission-form .form-submit {
    background: var(--accent-gradient) !important;
    color: var(--bg-main) !important;
    font-weight: 600;
    border: none !important;
    border-radius: var(--border-radius-pill) !important;
    padding: 1rem 2.5rem !important;
    width: 100%;
    cursor: pointer;
    transition: all 0.3s ease;
}

.webform-submission-form .form-submit:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 20px var(--primary-glow);
    filter: brightness(1.1);
}

.webform-submission-form .form-type-checkbox { margin-top: 2rem; }
.webform-submission-form .form-type-checkbox label {
    font-weight: 400; color: var(--text-muted) !important;
    display: inline; padding-left: 10px;
}