/* Reset and Base Styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

:root {
    --primary: #2c3e50;
    --secondary: rgb(0, 159, 227);
    --accent: #e73c94;
    --light: #ecf0f1;
    --light-alpha-30: rgb(255, 255, 255, 0.3);
    --dark-alpha-10: rgb(0, 0, 0, 0.1);
    --dark: #2c3e50;
    --gray: #95a5a6;
    --text-dark: #333;
    --success: #2ecc71;
    --lighten: #ffe760;
    --shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    --transition: all 0.3s ease;

    --theme-bg-secondary: #f8f9fa;
    --theme-trans: rgba(0, 0, 0, 0.01);
    --theme-cyan: rgb(33, 76, 88);
    --theme-magenta: rgb(219, 0, 121);
    --theme-yellow: rgb(99.6, 92.9, 0, 1.0);
    --theme-yellow-bg: rgb(255, 217, 0, 0.2);
    --theme-yellow-border: rgb(255, 217, 0, 0.6);

    --theme-cyan-30: rgb(0, 159, 227, .3);
    --theme-cyan-60: rgb(0, 159, 227, .3);

    --theme-linear-bg-cyan: linear-gradient(135deg, rgb(0, 134, 192) 50%, rgba(0.1, 23.3, 33.3, 0.7) 100%);
    --theme-linear-cyan-magenta: linear-gradient(135deg, rgb(0, 134, 192) 50%, rgba(255, 51, 0, 0.7) 100%);
    --theme-linear-img-bg-cyan: linear-gradient(135deg, rgba(0, 174, 255, 0.7) 0%, rgba(255, 51, 0, 0.7) 100%), url("assets/img/hero/grafik-zentrum_hero.png");
    --theme-linear-bg-magenta: linear-gradient(135deg, var(--theme-magenta) 0%, var(--lighten) 100%);
    --theme-linear-bg-light: linear-gradient(rgba(255, 255, 255, 0.027), rgba(236, 236, 236, 0.5));
    --theme-linear-img-bg: linear-gradient(rgba(8, 8, 8, 0.7), rgba(236, 236, 236, 0.5)), url("assets/img/pool/soziale-medien.jpg");
    --theme-linear-beratung: linear-gradient(135deb, rgba(7, 86, 255, 0.5) 0%, rgba(224, 0, 112, 0.5) 100%);
}

html {
    scroll-behavior: smooth;
}

/* Content Container */
.content-container {
    padding: 0;
    max-width: 1200px;
    margin: 0 auto;
}

/* Modal Styles */
.modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    height: 100vh;
    width: 100%;
    background: rgba(0, 0, 0, 0.8);
    backdrop-filter: blur(5px);
    z-index: 1100;
}

.modal.active {
    display: flex;
    align-items: center;
    justify-content: center;
}

.modal-content {
    size: 1rem;
    margin: 1rem auto;
    background: transparent;
    width: 100%;
    max-width: 800px;
    height: 100vh;
    border-radius: 15px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    color: #FFF;
}

.modal-header {
    padding: 10px;
    color: white;
    display: flex;
    justify-content: space-between;
    align-items: center;

    background: var(--primary);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(10px);
    z-index: 1000;
    opacity: .7;
}

.modal-body {
    flex: 1;
    overflow: hidden;
}

#contentFrame {
    width: 100%;
    height: 100%;
    border: none;
    display: block;
}

.close-modal {
    align-self: flex-end;
    background: transparent;
    color: #e74c3c;
    border: none;
    font-size: 1.5rem;
    cursor: pointer;
    align-items: end;
    justify-content: right;
    transition: all 0.3s;
    padding: 3px 8px;
}

.close-modal:hover {
    border: none;
    background-color: rgb(231, 60, 148, .6);
    padding: 3px 8px;
    border-radius: 50%;
    color: #ffffff;
    transition: all 0.3s;
}

/* Responsive Design */
@media (max-width: 768px) {
    .hidden-nav {
        width: 100%;
        right: -100%;
    }

    .hero-content h1 {
        font-size: 2.5rem;
    }

    .hero-content p {
        font-size: 1.1rem;
    }

    .modal-content {
        width: 100%;
        height: 100vh;
    }

    /* Updated for mobile */
    .nav-trigger-btn,
    .footer-trigger-btn {
        font-size: 2rem;
    }
}

@media (max-width: 480px) {
    .modal-content {
        margin: 0px;
    }

    .hero-content h1 {
        font-size: 2rem;
    }

    .sticky-nav-trigger {
        top: 10px;
        right: 10px;
    }

    .sticky-footer-trigger {
        bottom: 10px;
        right: 10px;
    }
}