@charset "utf-8";

/*
=====================================================
IMMOMARKETINGPLUS
STYLE.CSS
=====================================================
*/


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

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


/* =====================================================
   GRUNDLAGEN
===================================================== */

body{

    font-family:Arial, Helvetica, sans-serif;
    background:#ffffff;
    color:#444;
    line-height:1.8;

}


.container{

    width:90%;
    max-width:1400px;
    margin:0 auto;

}


img{

    max-width:100%;
    display:block;

}


a{

    transition:.3s;

}


/* =====================================================
   TYPOGRAFIE
===================================================== */

h1,
h2,
h3{

    font-family:Georgia, "Times New Roman", serif;
    color:#0F2E4D;
    font-weight:bold;

}


h1{

    font-size:56px;
    line-height:1.15;
    margin-bottom:25px;

}


h2{

    font-size:40px;
    position:relative;
    display:inline-block;
    padding-bottom:18px;
    margin-bottom:45px;

}


h2::after{

    content:"";
    position:absolute;
    left:0;
    bottom:0;

    width:90px;
    height:4px;

    background:#C89B3C;

    border-radius:10px;

}


h3{

    font-size:26px;
    margin-bottom:15px;

}


p{

    margin-bottom:20px;

}


.subtitle{

    display:inline-block;

    color:#C89B3C;

    font-size:14px;

    text-transform:uppercase;

    letter-spacing:2px;

    font-weight:bold;

    margin-bottom:20px;

}



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


header{

    position:sticky;
    top:0;

    background:#ffffff;

    z-index:999;

    box-shadow:0 3px 12px rgba(0,0,0,.08);

}


header .container{

     display:flex;
    justify-content:space-between;
    align-items:center;
    padding:12px 0;

}


.logo img{

    height:90px;
    width:auto;

}


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


nav ul{

    list-style:none;

    display:flex;

    gap:30px;

}


nav a{

    color:#0F2E4D;

    text-decoration:none;

    font-weight:bold;

}


nav a:hover{

    color:#C89B3C;

}



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


.hero{

    padding:90px 0;

}


.hero-grid{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:70px;

    align-items:center;

}


.hero p{

    font-size:19px;

}


.hero-image img{

    width:100%;

    border-radius:18px;

    box-shadow:0 20px 50px rgba(0,0,0,.18);

}



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


.button{

    display:inline-block;

    padding:16px 38px;

    background:#C89B3C;

    color:#ffffff;

    text-decoration:none;

    border-radius:40px;

    font-weight:bold;

    box-shadow:0 12px 30px rgba(200,155,60,.35);

}


.button:hover{

    background:#A97D27;

    transform:translateY(-4px);

}



/* =====================================================
   LEISTUNGEN / CARDS
===================================================== */


.leistungen{

    padding:100px 0;

    background:#f7f7f7;

}


.cards{

    display:grid;

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

    gap:30px;

}



.card{

    background:#ffffff;

    padding:35px;

    border-radius:16px;

    position:relative;

    overflow:hidden;

    box-shadow:0 8px 25px rgba(0,0,0,.08);

    transition:.35s;

}


.card::before{

    content:"";

    position:absolute;

    left:0;

    top:0;

    width:100%;

    height:5px;

    background:#C89B3C;

    transform:scaleX(0);

    transition:.35s;

}



.card:hover{

    transform:translateY(-10px);

    box-shadow:0 25px 45px rgba(0,0,0,.18);

}



.card:hover::before{

    transform:scaleX(1);

}



.card a{

    text-decoration:none;

    color:#0F2E4D;

    font-weight:bold;

}



.card a:hover{

    color:#C89B3C;

}



/* =====================================================
   WARUM IMMOMARKETINGPLUS
===================================================== */


.why{

    padding:100px 0;

}



.why-grid{

    display:grid;

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

    gap:30px;

}



.why-item{

    text-align:center;

    padding:35px;

    border-radius:16px;

    box-shadow:0 8px 25px rgba(0,0,0,.06);

    transition:.35s;

}



.why-item:hover{

    transform:translateY(-8px);

    box-shadow:0 20px 40px rgba(0,0,0,.15);

}



.icon{

    width:80px;

    height:80px;

    margin:0 auto 25px;

    border-radius:50%;

    background:#C89B3C;

    color:#ffffff;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:32px;

}



/* =====================================================
   SEO BEREICH
===================================================== */


.seo{

    padding:100px 0;

}



/* =====================================================
   CTA
===================================================== */


.cta{

    padding:100px 0;

    background:#0F2E4D;

    color:#ffffff;

    text-align:center;

}



.cta h2{

    color:#ffffff;

}



.cta h2::after{

    left:50%;

    transform:translateX(-50%);

}



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


footer{

    background:#09233B;

    color:#ffffff;

    padding:50px 0;

}



.footer{

    display:flex;

    justify-content:space-between;

    align-items:center;

}



.footer-logo{

    height:55px;

    margin-bottom:15px;

}



footer a{

    display:block;

    color:#ffffff;

    text-decoration:none;

    margin:8px 0;

}



footer a:hover{

    color:#C89B3C;

}



/* =====================================================
   RESPONSIVE
===================================================== */


@media(max-width:1100px){


    .hero-grid{

        grid-template-columns:1fr;

        text-align:center;

    }


    .cards{

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

    }


    .why-grid{

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

    }


    nav ul{

        gap:15px;

        flex-wrap:wrap;

        justify-content:center;

    }


    h1{

        font-size:44px;

    }


}



@media(max-width:700px){


    .cards,
    .why-grid{

        grid-template-columns:1fr;

    }


    header .container{

        flex-direction:column;

        gap:20px;

    }


    nav ul{

        justify-content:center;

    }


    .footer{

        flex-direction:column;

        text-align:center;

        gap:30px;

    }


    .logo img{

        height:65px;

    }


    h1{

        font-size:34px;

    }


    h2{

        font-size:30px;

    }


}

/* =====================================
   PREISE SEITE
===================================== */


.page-hero{

    padding:80px 0;
    background:#f7f7f7;

}



.preise{

    padding:100px 0;

}



.price-grid{

    display:grid;

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

    gap:30px;

}



.price-card{

    background:#fff;

    padding:40px 30px;

    border-radius:18px;

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

    text-align:center;

    transition:.35s;

}



.price-card:hover{

    transform:translateY(-10px);

    box-shadow:0 25px 45px rgba(0,0,0,.18);

}



.price-card h3{

    font-size:30px;

}



.price{

    color:#C89B3C;

    font-size:32px;

    font-weight:bold;

    margin:20px 0;

}



.price-card ul{

    list-style:none;

    margin-bottom:30px;

}



.price-card li{

    margin:12px 0;

}



.hinweis,
.drohnen-hinweis{

    padding:80px 0;

}



.drohnen-hinweis{

    background:#f7f7f7;

}




@media(max-width:1100px){


.price-grid{

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

}


}



@media(max-width:700px){


.price-grid{

    grid-template-columns:1fr;

}


}

/* =====================================
   KONTAKT BOX PREISE SEITE
===================================== */


.kontakt-box{

    padding:90px 0;
    background:#f7f7f7;
    text-align:center;

}



.kontakt-box h2{

    color:#0F2E4D;

}



.kontakt-box p{

    max-width:750px;
    margin:0 auto 35px;

}



.kontakt-buttons{

    display:flex;
    justify-content:center;
    gap:25px;
    flex-wrap:wrap;

}



.contact-button{

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

    min-width:220px;

    padding:16px 35px;

    border-radius:8px;

    color:white;

    text-decoration:none;

    font-weight:bold;

    transition:.3s;

}



.contact-button:hover{

    transform:translateY(-4px);

    box-shadow:0 10px 25px rgba(0,0,0,.15);

}



.phone{

    background:#0F2E4D;

}



.email{

    background:#C89B3C;

}



.whatsapp{

    background:#25D366;

}



.kontakt-info{

    margin-top:35px;

    font-size:16px;

    color:#555;

}



@media(max-width:700px){


.contact-button{

    width:100%;

}


}

/* =====================================
   REFERENZEN
===================================== */


.referenz{

padding:80px 0;

}



.gallery{

padding:90px 0;

background:#f7f7f7;

}



.gallery-grid{

display:grid;

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

gap:25px;

}



.gallery-grid img{

width:100%;

height:260px;

object-fit:cover;

border-radius:16px;

transition:.4s;

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

}



.gallery-grid img:hover{

transform:scale(1.05);

box-shadow:0 20px 40px rgba(0,0,0,.22);

}





/* =====================================
   YOUTUBE VIDEOS
===================================== */


.videos{

    padding:90px 0;

}



.video-grid{

    display:grid;

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

    gap:35px;

    align-items:stretch;

}



.video{

    width:100%;

    aspect-ratio:16 / 9;

    position:relative;

    overflow:hidden;

    border-radius:16px;

    background:#000;

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

}



.video iframe{

    position:absolute;

    top:0;

    left:0;

    width:100%;

    height:100%;

    display:block;

    border:0;

}




@media(max-width:1100px){


.video-grid{

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

}


}



@media(max-width:700px){


.video-grid{

    grid-template-columns:1fr;

}


}

/* =====================================
   ÜBER UNS
===================================== */


.about{

padding:90px 0;

}



.about-grid{

display:grid;

grid-template-columns:1fr 1fr;

gap:60px;

align-items:center;

}



.about-image img{

width:100%;

border-radius:18px;

box-shadow:0 20px 50px rgba(0,0,0,.18);

}



.about-text p{

margin-bottom:20px;

}



.polish-box{

margin-top:35px;

padding:30px;

background:#f7f7f7;

border-left:5px solid #C89B3C;

border-radius:12px;

}



.about-values{

padding:90px 0;

background:#f7f7f7;

}





@media(max-width:900px){


.about-grid{

grid-template-columns:1fr;

}


}

.polish-card{

border-top:4px solid #C89B3C;

}

.international-box{

margin-top:40px;

padding:40px;

background:#fff;

border-radius:16px;

border-left:6px solid #C89B3C;

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

}



.international-box h3{

color:#0F2E4D;

margin-bottom:20px;

}



.polish-text{

margin-top:25px;

font-style:italic;

color:#555;

}

/* =====================================
   KONTAKTSEITE
===================================== */


.kontakt{

padding:90px 0;

}



.kontakt-grid{

display:grid;

grid-template-columns:1fr 1fr;

gap:60px;

}



.kontakt-info a{

color:#0F2E4D;

font-weight:bold;

}



.formular{

background:#f7f7f7;

padding:40px;

border-radius:18px;

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

}



.formular input,
.formular textarea{

width:100%;

padding:15px;

margin-bottom:18px;

border:1px solid #ddd;

border-radius:8px;

font-family:inherit;

font-size:16px;

}



.formular textarea{

resize:vertical;

}



.checkbox{

display:flex;

gap:10px;

font-size:14px;

margin-bottom:20px;

}



.checkbox input{

width:auto;

}



.honeypot{

display:none!important;

}



@media(max-width:900px){

.kontakt-grid{

grid-template-columns:1fr;

}

}

/* =====================================
   KONTAKT OHNE FORMULAR
===================================== */


.kontakt{

padding:90px 0;

}



.kontakt-box{

max-width:700px;

margin:0 auto;

background:#f7f7f7;

padding:45px;

border-radius:18px;

text-align:center;

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

}



.kontakt-box a{

color:#0F2E4D;

font-weight:bold;

text-decoration:none;

}



.kontakt-buttons{

display:flex;

justify-content:center;

gap:20px;

flex-wrap:wrap;

margin-top:40px;

}



.contact-button{

padding:16px 30px;

border-radius:8px;

color:white;

text-decoration:none;

font-weight:bold;

transition:.3s;

}



.phone{

background:#0F2E4D;

}



.email{

background:#C89B3C;

}



.whatsapp{

background:#25D366;

}



.contact-button:hover{

transform:translateY(-3px);

}



.kontakt-region{

padding:80px 0;

background:#f7f7f7;

}



@media(max-width:650px){


.kontakt-buttons{

flex-direction:column;

}


.contact-button{

text-align:center;

}


}
/* =====================================
   RECHTLICHE SEITEN
===================================== */


.legal{

padding:90px 0;

}


.legal h2{

margin-top:45px;

}


.legal p{

max-width:900px;

line-height:1.8;

}

/* Datenschutz Listen */

.legal ul{

max-width:900px;

margin:20px 0 30px 25px;

line-height:1.8;

}


.legal li{

margin-bottom:8px;

}



.legal a{

color:#0F2E4D;

font-weight:bold;

text-decoration:none;

}


.legal a:hover{

color:#C89B3C;

}
/* =====================================
/* =====================================
   IMMOBILIENFOTOGRAFIE UNTERSEITE
   eigene Klassen ohne Konflikte
===================================== */


/* Kopfbereich Unterseite */

.foto-header{

    padding:80px 0;

    background:#f7f7f7;

    text-align:center;

}


.foto-header h1{

    color:#0F2E4D;

    margin-bottom:20px;

}



.foto-header p{

    max-width:800px;

    margin:0 auto;

    font-size:19px;

}






/* SEO Text */

.foto-seo{

    padding:90px 0;

}



.foto-seo h2{

    margin-bottom:35px;

}



.foto-seo p{

    max-width:950px;

    font-size:18px;

    margin-bottom:22px;

}






/* Bild/Text Bereich */


.foto-split{

    padding:90px 0;

    background:#f7f7f7;

}



.foto-split-grid{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:60px;

    align-items:center;

}



.foto-split-grid img{

    width:100%;

    border-radius:18px;

    box-shadow:0 20px 50px rgba(0,0,0,.15);

}



.foto-split-grid p{

    font-size:18px;

}






/* Leistungskarten */


.foto-leistungen{

    padding:100px 0;

}



.foto-card-grid{

    display:grid;

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

    gap:30px;

}



.foto-card{

    background:#ffffff;

    padding:35px;

    border-radius:16px;

    box-shadow:0 8px 25px rgba(0,0,0,.08);

    border-top:5px solid #C89B3C;

    transition:.3s;

}



.foto-card:hover{

    transform:translateY(-8px);

}



.foto-card h3{

    margin-bottom:15px;

}






/* Kontakt Fotografie */


.foto-kontakt{

    padding:90px 0;

    background:#0F2E4D;

    text-align:center;

}



.foto-kontakt h2{

    color:white;

}



.foto-kontakt p{

    color:white;

    font-size:18px;

}



.foto-kontakt-buttons{

    display:flex;

    justify-content:center;

    gap:20px;

    flex-wrap:wrap;

    margin-top:35px;

}



.foto-kontakt-buttons a{

    background:#C89B3C;

    color:white;

    padding:16px 35px;

    border-radius:8px;

    text-decoration:none;

    font-weight:bold;

}



.foto-kontakt-buttons a:hover{

    background:#A97D27;

}







/* Responsive */

@media(max-width:900px){


.foto-split-grid{

    grid-template-columns:1fr;

}



.foto-card-grid{

    grid-template-columns:1fr;

}


}



@media(max-width:700px){


.foto-header h1{

    font-size:34px;

}



.foto-kontakt-buttons a{

    width:90%;

}


}