/* =====================================================
   BLUE DOLPHIN WASSERSPORT
   Main Stylesheet
===================================================== */


/* ==========================
   ROOT VARIABLES
========================== */

:root {

    --primary: #00aeea;
    --primary-dark: #0077b6;

    --secondary: #003b63;

    --dark: #06283d;

    --light: #f4fbff;

    --white: #ffffff;

    --text: #193b52;

    --gray: #6b7c89;

    --shadow:
    0 20px 50px rgba(0,0,0,0.12);

    --shadow-soft:
    0 10px 30px rgba(0,0,0,0.08);


    --radius: 25px;

    --transition:
    all .35s ease;

}






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


* {

    margin:0;
    padding:0;
    box-sizing:border-box;

}


html {

    scroll-behavior:smooth;

}


body {

    font-family:'Montserrat', sans-serif;

    background:
    var(--light);

    color:var(--text);

    overflow-x:hidden;

}


img {

    max-width:100%;
    display:block;

}


a {

    text-decoration:none;

    color:inherit;

}


ul {

    list-style:none;

}


button,
input,
textarea,
select {

    font-family:inherit;

}






/* ==========================
   CONTAINER
========================== */


.container {

    width:90%;

    max-width:1200px;

    margin:auto;

}


.section {

    padding:100px 0;

}





/* ==========================
   SECTION TITLES
========================== */


.section-title {

    text-align:center;

    margin-bottom:60px;

}


.section-title span {

    color:var(--primary);

    font-weight:700;

    letter-spacing:3px;

    text-transform:uppercase;

    font-size:.85rem;

}


.section-title h2 {

    font-size:3rem;

    margin-top:15px;

    color:var(--secondary);

    font-weight:800;

}







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


.header {

    position:absolute;

    top:0;

    width:100%;

    z-index:1000;

}


.navbar {

    width:90%;

    max-width:1200px;

    margin:auto;

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:25px 0;

}



.logo img {

    width:160px;

}



.nav-links {

    display:flex;

    gap:40px;

}


.nav-links a {

    color:white;

    font-weight:600;

    transition:var(--transition);

}


.nav-links a:hover {

    color:var(--primary);

}



.menu-toggle {

    display:none;

}








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


.hero {

    height:100vh;

    min-height:700px;

    position:relative;

    display:flex;

    align-items:center;

    justify-content:center;

    text-align:center;

    color:white;

    background:

    linear-gradient(
    rgba(0,45,75,.65),
    rgba(0,20,40,.75)
    ),

    url("../assets/images/hero.webp")
    center/cover no-repeat;

}



.hero-content {

    position:relative;

    z-index:2;

    max-width:900px;

}



.hero .subtitle {

    letter-spacing:5px;

    font-size:.9rem;

    font-weight:700;

    margin-bottom:25px;

}



.hero h1 {

    font-size:5rem;

    line-height:1.05;

    font-weight:800;

    margin-bottom:30px;

}



.hero p {

    font-size:1.25rem;

    max-width:700px;

    margin:auto;

    opacity:.95;

}




.hero-buttons {

    margin-top:45px;

    display:flex;

    justify-content:center;

    gap:20px;

}





/* ==========================
   BUTTONS
========================== */


.btn {

    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:16px 35px;

    border-radius:50px;

    font-weight:700;

    transition:var(--transition);

    border:none;

    cursor:pointer;

}



.btn.primary {

    background:

    linear-gradient(
    135deg,
    var(--primary),
    #00d4ff
    );

    color:white;

}



.btn.primary:hover {

    transform:translateY(-5px);

    box-shadow:
    0 15px 30px rgba(0,174,234,.4);

}




.btn.secondary {

    border:2px solid white;

    color:white;

}


.btn.secondary:hover {

    background:white;

    color:var(--secondary);

}









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


.about-content {

    display:grid;

    grid-template-columns:
    1fr 1fr;

    gap:60px;

    align-items:center;

}



.about-text p {

    font-size:1.15rem;

    line-height:1.8;

    margin-bottom:25px;

}



.about-image img {

    border-radius:var(--radius);

    box-shadow:var(--shadow);

}






/* ==========================
   FEATURES
========================== */


.features {

    background:white;

}


.feature-grid {

    display:grid;

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

    gap:30px;

}



.feature-card {

    background:white;

    padding:40px 30px;

    text-align:center;

    border-radius:var(--radius);

    box-shadow:var(--shadow-soft);

    transition:var(--transition);

}



.feature-card:hover {

    transform:translateY(-10px);

}



.feature-card .icon {

    font-size:3rem;

    margin-bottom:25px;

}



.feature-card h3 {

    color:var(--secondary);

    margin-bottom:15px;

}






/* ==========================
   OPENING
========================== */


.opening-grid {

    display:grid;

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

    gap:30px;

}



.opening-card {

    background:

    linear-gradient(
    135deg,
    var(--secondary),
    #006494
    );

    color:white;

    padding:45px;

    border-radius:var(--radius);

    text-align:center;

}



.opening-card h3 {

    font-size:1.5rem;

    margin-bottom:15px;

}







/* ==========================
   PRICES
========================== */


.price-grid {

    display:grid;

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

    gap:40px;

}



.price-card {

    background:white;

    padding:50px 40px;

    border-radius:var(--radius);

    box-shadow:var(--shadow-soft);

    text-align:center;

}



.price-card.featured {

    background:

    linear-gradient(
    135deg,
    #003b63,
    #006494
    );

    color:white;

}



.price-card h3 {

    font-size:2rem;

    margin-bottom:25px;

}



.price {

    font-size:4rem;

    font-weight:800;

    color:var(--primary);

}



.price span {

    font-size:1rem;

}



.price-card ul {

    margin:30px 0;

}


.price-card li {

    margin:15px 0;

}









/* ==========================
   GALLERY
========================== */


.gallery {

    background:white;

}


.gallery-grid {

    display:grid;

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

    gap:20px;

}



.gallery-grid img {

    height:280px;

    width:100%;

    object-fit:cover;

    border-radius:20px;

    transition:var(--transition);

}



.gallery-grid img:hover {

    transform:scale(1.05);

}







/* ==========================
   FAQ
========================== */


.faq-box {

    background:white;

    padding:30px;

    margin-bottom:20px;

    border-radius:20px;

    box-shadow:var(--shadow-soft);

}



.faq-box h3 {

    color:var(--secondary);

    margin-bottom:10px;

}








/* ==========================
   CONTACT
========================== */


.contact-form {

    max-width:700px;

    margin:auto;

    display:grid;

    gap:20px;

}



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


    width:100%;

    padding:18px;

    border:none;

    background:white;

    border-radius:15px;

    box-shadow:var(--shadow-soft);

    font-size:1rem;

}



.contact-form textarea {

    min-height:150px;

    resize:none;

}

.hidden-field{

position:absolute;

left:-9999px;

height:1px;

width:1px;

opacity:0;

}




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


.footer {

    background:

    #03283d;

    color:white;

    text-align:center;

    padding:70px 0;

}



.footer h3 {

    font-size:2rem;

    margin-bottom:15px;

}



.footer a {

    color:var(--primary);

}



.copyright {

    margin-top:30px;

    opacity:.7;

}


/* =====================================================
   LOCATION SECTION
===================================================== */


.location {

    background:
    linear-gradient(
    180deg,
    #f4fbff,
    #ffffff
    );

}



.location-grid {

    display:grid;

    grid-template-columns:
    1fr 1fr;

    gap:50px;

    align-items:center;

}



.location-info {

    background:white;

    padding:45px;

    border-radius:var(--radius);

    box-shadow:var(--shadow-soft);

}



.location-info h3 {

    color:var(--secondary);

    font-size:2rem;

    margin-bottom:25px;

}



.location-info p {

    line-height:1.8;

    margin-bottom:25px;

}



.location-info .btn.secondary {

    border-color:var(--primary);

    color:var(--primary-dark);

}



.location-info .btn.secondary:hover {

    background:var(--primary);

    color:white;

}






/* ==========================
   GOOGLE MAP
========================== */


.map-container {

    height:450px;

    border-radius:var(--radius);

    overflow:hidden;

    box-shadow:var(--shadow);

}



.map-container iframe {

    width:100%;

    height:100%;

    border:0;

}






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


.cookie-banner {

    position:fixed;

    bottom:25px;

    left:50%;

    transform:

    translateX(-50%);


    width:

    min(90%,650px);


    background:

    rgba(3,40,61,.95);


    backdrop-filter:

    blur(15px);


    color:white;


    padding:25px 30px;


    border-radius:25px;


    display:flex;


    justify-content:space-between;


    align-items:center;


    gap:20px;


    box-shadow:

    0 20px 60px rgba(0,0,0,.3);


    z-index:99999;


}



.cookie-banner p {

    font-size:.95rem;

    line-height:1.5;

}




.cookie-banner button {


    border:none;


    background:

    var(--primary);


    color:white;


    padding:

    12px 30px;


    border-radius:30px;


    font-weight:700;


    cursor:pointer;


    transition:.3s;


}



.cookie-banner button:hover {


    background:#00d4ff;


    transform:translateY(-3px);


}








/* ==========================
   INSTAGRAM BUTTON
========================== */


.instagram-btn {


    display:inline-flex;

    align-items:center;

    gap:10px;


    background:

    linear-gradient(
    135deg,
    #833ab4,
    #fd1d1d,
    #fcb045
    );


    color:white;


    padding:

    15px 30px;


    border-radius:50px;


    font-weight:700;


    transition:.35s;


}



.instagram-btn:hover {


    transform:

    translateY(-5px);


    box-shadow:

    0 15px 35px rgba(253,29,29,.35);


}








/* ==========================
   PREMIUM DETAILS
========================== */


.section {

    position:relative;

}



.location::before {


    content:"";


    position:absolute;


    top:0;

    left:0;


    width:100%;


    height:1px;


    background:

    linear-gradient(

    90deg,

    transparent,

    var(--primary),

    transparent

    );


}






/* ==========================
   MOBILE LOCATION
========================== */


@media(max-width:992px){


.location-grid {


    grid-template-columns:1fr;


}



.location-info {


    padding:35px;


}



.map-container {


    height:350px;


}


}






@media(max-width:600px){


.cookie-banner {


    flex-direction:column;


    text-align:center;


    bottom:15px;


    padding:20px;


}



.cookie-banner button {


    width:100%;


}



.location-info h3 {


    font-size:1.6rem;


}



.map-container {


    height:280px;


}



}

/* =====================================================
   THANK YOU PAGE
===================================================== */

.thankyou-page{

    margin:0;
    min-height:100vh;

    font-family:'Montserrat',sans-serif;

    background:#f5fbff;

    display:flex;
    align-items:center;
    justify-content:center;

    overflow:hidden;
    position:relative;

}

/* leichte Farbflächen */

.thankyou-page::before{

    content:"";

    position:absolute;

    top:-200px;
    right:-200px;

    width:550px;
    height:550px;

    background:rgba(0,180,216,.08);

    border-radius:50%;

}

.thankyou-page::after{

    content:"";

    position:absolute;

    bottom:-180px;
    left:-180px;

    width:500px;
    height:500px;

    background:rgba(0,59,92,.05);

    border-radius:50%;

}

.thankyou-wrapper{

    width:100%;
    max-width:700px;

    padding:30px;

    position:relative;
    z-index:2;

}

.thankyou-card{

    background:#fff;

    border-radius:28px;

    padding:60px;

    text-align:center;

    box-shadow:
    0 20px 60px rgba(0,0,0,.08);

}

.success-circle{

    width:110px;
    height:110px;

    margin:0 auto 30px;

    border-radius:50%;

    background:#00b4d8;

    color:#fff;

    display:flex;
    align-items:center;
    justify-content:center;

    font-size:3rem;
    font-weight:700;

    box-shadow:
    0 15px 35px rgba(0,180,216,.3);

}

.thankyou-card h1{

    color:#003b5c;

    font-size:3rem;

    margin-bottom:15px;

}

.subtitle{

    color:#00a6d6;

    font-size:1.3rem;

    font-weight:600;

    margin-bottom:25px;

}

.thankyou-card p{

    color:#555;

    line-height:1.8;

    font-size:1.05rem;

}

.thank-buttons{

    margin-top:40px;

    display:flex;

    justify-content:center;

    gap:20px;

    flex-wrap:wrap;

}

.thank-buttons .btn{

    min-width:220px;

}

@media(max-width:768px){

.thankyou-card{

padding:40px 25px;

}

.thankyou-card h1{

font-size:2.2rem;

}

.success-circle{

width:90px;
height:90px;

font-size:2.5rem;

}

/* =====================================================
   FOOTER SOCIAL LOGOS
===================================================== */

.footer .social{
    display:flex;
    justify-content:center;
    align-items:center;
    flex-wrap:wrap;
    gap:30px;
    margin:35px 0;
}

.footer .social a{
    display:flex;
    justify-content:center;
    align-items:center;
    text-decoration:none;
}

.footer .social img{
    display:block;
    width:auto !important;
    height:55px !important;
    max-width:180px !important;
    object-fit:contain;
    transition:0.3s ease;
}

.footer .social img:hover{
    transform:scale(1.08);
}

/* einzelne Logos anpassen */

.footer .social img[alt="Blue Dolphin Wassersport Logo"]{
    height:70px !important;
}

.footer .social img[alt="Eventmakler"]{
    height:45px !important;
}

.footer .social img[alt="Weber Media Verleih & Events"]{
    height:45px !important;
}

}

/* Footer fix */
.footer .social{
display:flex!important;
flex-direction:row!important;
justify-content:center!important;
align-items:center!important;
gap:30px!important;
flex-wrap:wrap!important;
margin:30px 0!important;
}
.footer .social a{display:inline-flex!important;align-items:center!important;justify-content:center!important;}
.footer .social img{height:50px!important;width:auto!important;max-width:180px!important;display:block!important;object-fit:contain!important;}