/* ==========================================================
 *  ecf Eventtechnik
 *  Hauptstylesheet
 *  Bereinigte Version
 *  ========================================================== */


/* ==========================================================
 *  ROOT VARIABLEN
 *  ========================================================== */

:root {

    --ecf-blue: #45B4FF;
    --ecf-blue-hover: #63c0ff;

    --bg-dark: #0f0f10;

    --text: #ffffff;
    --text-muted: #bdbdbd;

    --card-bg: rgba(255,255,255,0.05);
    --border: rgba(255,255,255,0.12);
}


/* ==========================================================
 *  RESET
 *  ========================================================== */

* {
    margin:0;
    padding:0;
    box-sizing:border-box;
}


html {

    scroll-behavior:smooth;

    /* Abstand wegen fixiertem Header */
    scroll-padding-top:100px;
}


body {

    font-family:
    Arial,
    Helvetica,
    sans-serif;

    background:var(--bg-dark);

    color:var(--text);

    min-height:100vh;

    display:flex;
    flex-direction:column;
}



/* ==========================================================
 *  HEADER
 *  ========================================================== */


header {

    position:fixed;

    top:0;
    left:0;

    width:100%;

    z-index:1000;


    background:
    linear-gradient(
        rgba(0,0,0,.55),
                    rgba(0,0,0,.55)
    ),
    url("images/menu-background.jpg");


    background-size:cover;

    background-position:center;


    border-bottom:
    1px solid rgba(255,255,255,.1);


    box-shadow:
    0 10px 30px rgba(0,0,0,.4);
}



.navbar {

    max-width:1400px;

    margin:auto;

    padding:
    12px 20px;


    display:flex;

    justify-content:space-between;

    align-items:center;
}



.logo img {

    height:70px;

    display:block;
}



/* ==========================================================
 *  NAVIGATION
 *  ========================================================== */


.nav-links {

    display:flex;

    gap:12px;
}



.nav-links a {

    text-decoration:none;

    color:white;


    background:
    var(--ecf-blue);


    padding:
    12px 18px;


    border-radius:12px;


    font-weight:600;


    transition:.3s ease;


    box-shadow:
    0 4px 12px rgba(0,0,0,.25);
}



.nav-links a:hover {

    background:
    var(--ecf-blue-hover);


    transform:
    translateY(-3px);


    box-shadow:
    0 10px 25px rgba(69,180,255,.35);
}



.nav-links a.active {

    background:
    var(--ecf-blue-hover);


    box-shadow:
    0 0 18px rgba(69,180,255,.35);
}



/* ==========================================================
 *  HAMBURGER MENU
 *  ========================================================== */


.menu-toggle {

    display:none;


    width:48px;

    height:48px;


    position:relative;


    background:none;

    border:none;


    cursor:pointer;


    border-radius:12px;
}



.menu-toggle:hover {

    background:
    rgba(255,255,255,.08);
}



.menu-toggle span {

    position:absolute;


    left:50%;


    width:24px;

    height:2px;


    background:white;


    border-radius:2px;


    transform:
    translateX(-50%);


    transition:.35s ease;
}



.menu-toggle span:nth-child(1) {
    top:16px;
}


.menu-toggle span:nth-child(2) {
    top:23px;
}


.menu-toggle span:nth-child(3) {
    top:30px;
}



.menu-toggle.active span:nth-child(1) {

    top:23px;

    transform:
    translateX(-50%)
    rotate(45deg);
}



.menu-toggle.active span:nth-child(2) {

    opacity:0;
}



.menu-toggle.active span:nth-child(3) {

    top:23px;

    transform:
    translateX(-50%)
    rotate(-45deg);
}



/* ==========================================================
 *  MENU OVERLAY
 *  ========================================================== */


.menu-overlay {

    position:fixed;

    inset:0;


    background:
    rgba(0,0,0,.55);


    backdrop-filter:
    blur(6px);


    opacity:0;

    pointer-events:none;


    transition:.3s ease;


    z-index:900;
}



.menu-overlay.active {

    opacity:1;

    pointer-events:auto;
}



/* ==========================================================
 *  MAIN ABSTAND WEGEN HEADER
 *  ========================================================== */


main {

    padding-top:95px;

    flex:1;
}

/* ==========================================================
 *  HERO
 *  ========================================================== */


.hero {

    min-height:90vh;


    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:center;


    text-align:center;


    gap:20px;


    padding:
    40px 20px;
}



.main-logo {

    width:
    min(90%,700px);

    height:auto;
}



.main-slogan {

    max-width:800px;


    color:
    var(--text-muted);


    line-height:1.6;


    font-size:1.1rem;
}



/* CTA BUTTON */

.cta-button {

    display:inline-block;


    background:
    var(--ecf-blue);


    color:white;


    padding:
    14px 24px;


    border-radius:12px;


    text-decoration:none;


    font-weight:600;


    transition:.3s ease;
}



.cta-button:hover {

    background:
    var(--ecf-blue-hover);


    transform:
    translateY(-3px);


    box-shadow:
    0 10px 25px rgba(69,180,255,.3);
}





/* ==========================================================
 *  ALLGEMEINE SECTIONS
 *  ========================================================== */


.section {

    max-width:1100px;


    margin:auto;


    padding:
    80px 20px;


    text-align:center;
}



.section h2 {

    color:
    var(--ecf-blue);


    margin-bottom:30px;


    font-size:2rem;

    font-weight:700;
}





/* ==========================================================
 *  ABOUT
 *  ========================================================== */


.about-card {

    max-width:900px;


    margin:
    20px auto 0;


    padding:
    30px;


    text-align:left;


    background:
    var(--card-bg);


    border:
    1px solid var(--border);


    border-radius:16px;


    transition:.3s ease;
}



.about-card:hover {

    transform:
    translateY(-6px);


    border-color:
    rgba(69,180,255,.4);
}



.about-card h3 {

    color:
    var(--ecf-blue);


    margin-bottom:12px;


    margin-top:25px;
}



.about-card h3:first-child {

    margin-top:0;
}



.about-card p {

    color:
    var(--text-muted);


    line-height:1.7;


    margin-bottom:14px;
}



.about-list {

    list-style:none;


    margin:
    15px 0;
}



.about-list li {

    color:
    var(--text-muted);


    padding:
    6px 0 6px 22px;


    position:relative;
}



.about-list li::before {

    content:"✓";


    position:absolute;


    left:0;


    color:
    var(--ecf-blue);


    font-weight:bold;
}





/* ==========================================================
 *  SERVICES
 *  ========================================================== */


.services {

    max-width:1400px;


    margin:auto;


    padding:
    60px 20px;


    display:grid;


    grid-template-columns:
    repeat(4,1fr);


    gap:20px;
}



.service-card {

    background:
    var(--card-bg);


    border:
    1px solid var(--border);


    padding:
    25px;


    border-radius:16px;


    text-align:left;


    transition:.3s ease;
}



.service-card:hover {

    transform:
    translateY(-6px);


    border-color:
    rgba(69,180,255,.4);
}



.service-icon {

    width:50px;

    height:50px;


    display:flex;


    justify-content:center;

    align-items:center;


    font-size:2rem;


    background:
    rgba(69,180,255,.15);


    border:
    1px solid rgba(69,180,255,.3);


    border-radius:12px;


    margin-bottom:15px;
}



.service-card h3 {

    color:
    var(--ecf-blue);


    margin-bottom:10px;
}



.service-card p {

    color:
    var(--text-muted);


    line-height:1.6;


    font-size:.95rem;
}





/* ==========================================================
 *  GALERIE
 *  ========================================================== */


.gallery-category {

    margin-bottom:60px;
}



.gallery-category h3 {

    color:
    var(--ecf-blue);


    text-align:left;


    font-size:1.6rem;


    margin-bottom:20px;
}



.gallery {

    display:grid;


    grid-template-columns:
    repeat(4,1fr);


    gap:15px;
}



.gallery-item {

    height:220px;


    overflow:hidden;


    border-radius:16px;


    cursor:pointer;


    background:
    var(--card-bg);


    border:
    1px solid var(--border);


    transition:.3s ease;


    position:relative;
}



.gallery-item:hover {

    transform:
    translateY(-5px);
}



.gallery-item img {

    width:100%;


    height:100%;


    object-fit:cover;


    display:block;


    transition:.4s ease;
}



.gallery-item:hover img {

    transform:
    scale(1.08);
}





/* Galerie Overlay */


.gallery-overlay {

    position:absolute;


    inset:0;


    display:flex;


    flex-direction:column;


    justify-content:flex-end;


    padding:20px;


    background:
    linear-gradient(
        transparent,
        rgba(0,0,0,.85)
    );


    opacity:0;


    transition:.3s ease;
}



.gallery-item:hover .gallery-overlay {

    opacity:1;
}



.gallery-overlay h3 {

    color:
    var(--ecf-blue);


    margin-bottom:5px;
}



.gallery-overlay p {

    color:white;
}





/* ==========================================================
 *  LIGHTBOX
 *  ========================================================== */


#lightbox {

position:fixed;


inset:0;


background:
rgba(0,0,0,.85);


display:none;


justify-content:center;


align-items:center;


z-index:9999;
}



#lightbox img {

max-width:90%;


max-height:90%;


border-radius:12px;
}



.lb-nav {

    position:absolute;


    top:50%;


    transform:
    translateY(-50%);


    background:
    rgba(0,0,0,.4);


    border:
    1px solid rgba(255,255,255,.2);


    color:white;


    font-size:2rem;


    padding:
    10px 15px;


    cursor:pointer;


    border-radius:12px;
}



.lb-nav:hover {

    background:
    rgba(69,180,255,.3);
}



.lb-prev {

    left:20px;
}



.lb-next {

    right:20px;
}

/* ==========================================================
 *  KONTAKT
 *  ========================================================== */


.contact-wrapper {

    max-width:1200px;

    margin:
    40px auto 0;


    display:grid;


    grid-template-columns:
    2fr 1fr;


    gap:30px;
}



.contact-card {

    background:
    var(--card-bg);


    border:
    1px solid var(--border);


    border-radius:18px;


    padding:30px;


    text-align:left;


    backdrop-filter:
    blur(10px);
}



.contact-card h3 {

    color:
    var(--ecf-blue);


    margin-bottom:20px;
}





/* Kontaktformular */


.contact-form {

    display:flex;


    flex-direction:column;


    gap:15px;
}



.contact-form input,
.contact-form textarea {


    width:100%;


    background:
    rgba(255,255,255,.06);


    border:
    1px solid rgba(255,255,255,.1);


    border-radius:12px;


    padding:14px;


    color:white;


    font-size:1rem;
}



.contact-form textarea {

    min-height:180px;


    resize:vertical;
}



.contact-form input::placeholder,
.contact-form textarea::placeholder {

    color:
    rgba(255,255,255,.5);
}



.contact-form input:focus,
.contact-form textarea:focus {

    outline:none;


    border-color:
    var(--ecf-blue);


    box-shadow:
    0 0 15px rgba(69,180,255,.25);
}



.contact-form button {

    background:
    var(--ecf-blue);


    border:none;


    color:white;


    padding:14px;


    border-radius:12px;


    font-weight:600;


    cursor:pointer;


    transition:.3s ease;
}



.contact-form button:hover {

    background:
    var(--ecf-blue-hover);


    transform:
    translateY(-2px);
}





/* Datenschutz Checkbox */


.checkbox {

    display:flex;


    gap:10px;


    align-items:flex-start;


    color:
    var(--text-muted);


    font-size:.9rem;


    line-height:1.5;
}



.checkbox input {

    width:auto;

    margin-top:4px;
}



.privacy-link {

    color:
    var(--ecf-blue);


    text-decoration:none;
}



.privacy-link:hover {

    text-decoration:underline;
}





/* Kontaktinformationen */


.contact-info {

    display:flex;


    flex-direction:column;


    gap:20px;
}



.contact-row {

    display:flex;


    align-items:center;


    gap:10px;


    color:
    var(--text-muted);


    line-height:1.7;
}



.contact-row a {

    margin-left:auto;
}





/* Telefon Buttons */


.call-button {

    display:inline-block;


    background:
    var(--ecf-blue);


    color:white;


    text-decoration:none;


    padding:
    12px 18px;


    border-radius:12px;


    font-weight:600;


    transition:.3s ease;
}



.call-button:hover {

    background:
    var(--ecf-blue-hover);


    transform:
    translateY(-3px);


    box-shadow:
    0 10px 25px rgba(69,180,255,.35);
}





/* ==========================================================
 *  FOOTER
 *  ========================================================== */


footer {

    margin-top:auto;


    padding:25px;


    background:

    linear-gradient(
        rgba(0,0,0,.55),
                    rgba(0,0,0,.65)
    ),

    url("images/menu-background.jpg");


    background-size:cover;


    background-position:center;


    border-top:
    1px solid rgba(255,255,255,.1);


    color:
    var(--text-muted);
}



.footer-container {

    max-width:1400px;


    margin:auto;


    display:grid;


    grid-template-columns:
    1fr auto 1fr;


    align-items:center;
}



.footer-left {

    justify-self:start;
}



.footer-center {

    justify-self:center;


    display:flex;


    align-items:center;


    gap:10px;
}



.footer-center a {

    color:
    var(--text-muted);


    text-decoration:none;


    transition:.3s ease;
}



.footer-center a:hover {

    color:
    var(--ecf-blue);
}



.footer-center span {

    color:
    rgba(255,255,255,.3);
}





/* ==========================================================
 *  SCROLL REVEAL
 *  ========================================================== */


.reveal {

    opacity:0;


    transform:
    translateY(30px);


    transition:
    .8s ease;
}



.reveal.active {

    opacity:1;


    transform:
    translateY(0);
}





/* ==========================================================
 *  PRIVACY OVERLAY
 *  ========================================================== */


.privacy-overlay {


    display:none;


    position:fixed;


    inset:0;


    background:
    rgba(0,0,0,.65);


    backdrop-filter:
    blur(8px);


    z-index:99990;


    pointer-events:all;
}





/* ==========================================================
 *  COOKIE BANNER
 *  ========================================================== */


.cookie-banner {


    position:fixed;


    left:50%;


    bottom:30px;


    transform:
    translateX(-50%);


    width:
    min(90%,700px);


    display:none;


    z-index:100000;


    background:
    rgba(15,15,16,.98);


    border:
    1px solid rgba(69,180,255,.3);


    border-radius:18px;


    padding:20px;


    box-shadow:

    0 20px 50px rgba(0,0,0,.6),

    0 0 25px rgba(69,180,255,.15);


    backdrop-filter:
    blur(12px);
}



.cookie-content {

    display:flex;


    justify-content:space-between;


    align-items:center;


    gap:20px;
}



.cookie-text {

    flex:1;


    color:
    var(--text-muted);


    line-height:1.5;
}



.cookie-actions {

    display:flex;


    gap:10px;
}



.cookie-btn {

    border:none;


    cursor:pointer;


    padding:
    12px 18px;


    border-radius:12px;


    font-weight:600;
}



.cookie-btn.accept {

    background:
    var(--ecf-blue);


    color:white;
}



.cookie-btn.reject {

    background:
    rgba(255,255,255,.08);


    color:white;
}



.cookie-btn:hover {

    transform:
    translateY(-2px);
}

/* ==========================================================
 *  LEGAL / RECHTLICHES
 *  ========================================================== */


.legal-layout {

    max-width:1400px;


    margin:auto;


    padding:
    60px 20px;


    display:grid;


    grid-template-columns:
    260px 1fr;


    gap:40px;
}



.legal-nav {

    position:sticky;


    top:110px;


    display:flex;


    flex-direction:column;


    gap:10px;
}



.legal-nav a {

    text-decoration:none;


    color:white;


    padding:
    12px 14px;


    border-radius:12px;


    background:
    rgba(255,255,255,.05);


    border:
    1px solid rgba(255,255,255,.08);


    transition:.25s ease;
}



.legal-nav a:hover {

    background:
    rgba(69,180,255,.15);


    border-color:
    var(--ecf-blue);
}



.legal-content {

    display:flex;


    flex-direction:column;


    gap:60px;
}



.legal-section {

    background:
    rgba(255,255,255,.04);


    border:
    1px solid rgba(255,255,255,.08);


    padding:
    35px;


    border-radius:18px;
}



.legal-section h2 {

    color:
    var(--ecf-blue);


    margin-bottom:20px;
}



.legal-section p {

    color:
    var(--text-muted);


    line-height:1.7;


    margin-bottom:12px;
}



.back-link {

    color:
    var(--ecf-blue);


    text-decoration:none;
}



.back-link:hover {

    text-decoration:underline;
}





/* ==========================================================
 *  TABLET
 *  ========================================================== */


@media(max-width:1100px){


    .services {

        grid-template-columns:
        repeat(2,1fr);

    }


    .gallery {

        grid-template-columns:
        repeat(3,1fr);

    }

}






/* ==========================================================
 *  MOBILE NAVIGATION
 *  ========================================================== */


@media(max-width:900px){


    .menu-toggle {

        display:block;

    }



    .navbar {

        flex-wrap:wrap;

    }



    .nav-links {

        display:none;


        width:100%;


        flex-direction:column;


        margin-top:15px;


        max-height:60vh;


        overflow-y:auto;
    }



    .nav-links.active {

        display:flex;

    }



    .nav-links a {

        width:100%;


        text-align:center;

    }





    /* Services */


    .services {

        grid-template-columns:
        repeat(2,1fr);

    }





    /* Galerie */


    .gallery {

        grid-template-columns:
        repeat(2,1fr);

    }





    /* Kontakt */


    .contact-wrapper {

        grid-template-columns:
        1fr;

    }





    /* Legal */


    .legal-layout {

        grid-template-columns:
        1fr;

    }



    .legal-nav {

        position:static;


        flex-direction:row;


        flex-wrap:wrap;


        justify-content:center;
    }



    .legal-nav a {

        flex:
        1 1 160px;


        text-align:center;

    }





    /* Footer */


    .footer-container {

        grid-template-columns:
        1fr;


        gap:15px;


        text-align:center;
    }



    .footer-left,
    .footer-center {

        justify-self:center;

    }



    .footer-center {

        flex-wrap:wrap;


        justify-content:center;

    }


}





/* ==========================================================
 *  SMARTPHONE
 *  ========================================================== */


@media(max-width:600px){


    .logo img {

        height:55px;

    }



    main {

        padding-top:80px;

    }



    .hero {

        min-height:80vh;


        padding:
        30px 15px;

    }



    .section {

        padding:
        60px 15px;

    }



    .section h2 {

        font-size:1.7rem;

    }





    .services,
    .gallery {

        grid-template-columns:
        1fr;

    }





    .service-card {

        padding:
        20px;

    }





    .contact-card {

        padding:
        20px;

    }





    .contact-row {

        flex-direction:column;


        align-items:flex-start;

    }



    .contact-row a {

        margin-left:0;

    }





    .cookie-content {

        flex-direction:column;


        align-items:stretch;

    }



    .cookie-actions {

        width:100%;

    }



    .cookie-btn {

        flex:1;

    }





    .lb-nav {

        font-size:1.5rem;

        padding:
        8px 12px;

    }



    .lb-prev {

        left:10px;

    }



    .lb-next {

        right:10px;

    }

}





/* ==========================================================
 *  TOUCH / ACCESSIBILITY
 *  ========================================================== */


button,
a {

    -webkit-tap-highlight-color:
    transparent;
}



button:focus-visible,
a:focus-visible,
input:focus-visible,
textarea:focus-visible {


    outline:
    2px solid var(--ecf-blue);


    outline-offset:
    3px;

}