/* ==========================================
   FINANZHAUS VORSFELDE
   PREMIUM LANDINGPAGE
========================================== */

:root{

    --gold:#C8A14A;
    --goldHover:#D8B56A;
    --black:#0B0B0B;
    --dark:#141414;
    --card:#1B1B1B;
    --white:#FFFFFF;
    --text:#D7D7D7;

}

*{

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

}

html{

    scroll-behavior:smooth;

}

body{

    background:var(--black);
    color:var(--white);
    font-family:'Montserrat',sans-serif;
    overflow-x:hidden;
opacity:0;

transition:1s;

}

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

.navbar{

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

    margin:0 auto;

    padding:35px 60px;

    display:flex;

    justify-content:space-between;

    align-items:center;

}

.topContact{

    display:flex;

    align-items:center;

    gap:10px;

    color:#fff;

    font-size:20px;

    font-weight:600;

    letter-spacing:.5px;

}

.topContact span{

    padding:12px 24px;

    border:1px solid rgba(200,161,74,.35);

    border-radius:12px;

    transition:.3s;

}

.topContact span:hover{

    background:rgba(200,161,74,.08);

    border-color:#C8A14A;

}

.logo{

    width:290px;

    height:auto;

}

.navButton{

    background:var(--gold);

    color:black;

    text-decoration:none;

    padding:16px 34px;

    border-radius:10px;

    font-weight:700;

    transition:.35s;

}

.navButton:hover{

    background:var(--goldHover);

    transform:translateY(-3px);

}

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

.hero{

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

    margin:0 auto;

    display:grid;

    grid-template-columns:52% 48%;

    align-items:center;

    gap:40px;

    padding:10px 60px 80px;

}

.heroLeft h1{

    font-size:96px;

    line-height:.95;

    font-weight:800;

    margin:20px 0 35px;

}

.heroLeft h1 span{

    color:var(--gold);

}

.goldText{

    color:var(--gold);

    letter-spacing:3px;

    font-weight:700;

}

.heroLeft h1{
    font-size:74px;
    line-height:0.95;
    font-weight:700;

}

.heroImage{
    width:125%;
    max-width:820px;
    margin-left:auto;
    transform: translateX(80px);   /* 80–150px ausprobieren */
    display:block;
    border-radius:28px;
    box-shadow:0 40px 90px rgba(0,0,0,.55);
}

.heroLogo{
    margin:20px 0 35px;
    position:relative;
    z-index:100;
    padding-left:0;
    text-align:left;
}
.heroLogo img{
    width:510px;
    height:auto;
    display:block;
    position:relative;
    z-index:100;
}
/* ===========================
   BUTTONS
=========================== */

.buttons{

    display:flex;

    gap:20px;

    margin-top:45px;

}

.goldButton{

    background:var(--gold);

    color:black;

    padding:18px 40px;

    border-radius:10px;

    font-weight:700;

    text-decoration:none;

    transition:.3s;

}

.goldButton:hover{

    background:var(--goldHover);

    transform:translateY(-4px);

}

.darkButton{

    border:2px solid var(--gold);

    color:white;

    text-decoration:none;

    padding:18px 40px;

    border-radius:10px;

    transition:.3s;

}

.darkButton:hover{

    background:var(--gold);

    color:black;

}
/* ==========================================
   SECTIONEN
========================================== */

section{

    padding:120px 8%;

}

.sectionTitle{

    text-align:center;

    max-width:800px;

    margin:0 auto 80px auto;

}

.sectionTitle span{

    color:var(--gold);

    font-size:14px;

    font-weight:700;

    letter-spacing:4px;

    text-transform:uppercase;

}

.sectionTitle h2{

    font-size:52px;

    margin:20px 0;

    font-weight:800;

}

.sectionTitle p{

    font-size:18px;

    color:#bfbfbf;

    line-height:1.8;

}

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

.serviceGrid{

    display:grid;

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

    gap:30px;

}

.serviceCard{

    background:#171717;

    border:1px solid #242424;

    border-radius:22px;

    padding:40px;

    transition:.35s;

}

.serviceCard:hover{

    transform:translateY(-10px);

    border-color:var(--gold);

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

}

.serviceIcon{

    width:70px;

    height:70px;

    border-radius:18px;

    display:flex;

    justify-content:center;

    align-items:center;

    background:rgba(200,161,74,.08);

    color:var(--gold);

    font-size:34px;

    margin-bottom:25px;

}

.serviceCard h3{

    margin-bottom:18px;

    font-size:26px;

}

.serviceCard p{

    color:#bdbdbd;

    line-height:1.8;

}

/* ==========================================
   WARUM WIR
========================================== */

.whyGrid{

    display:grid;

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

    gap:35px;

}

.whyCard{

    background:#161616;

    border-radius:20px;

    padding:40px;

    border-left:5px solid var(--gold);

    transition:.35s;

}

.whyCard:hover{

    transform:translateY(-8px);

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

}

.whyCard h3{

    color:var(--gold);

    margin-bottom:15px;

    font-size:24px;

}

.whyCard p{

    color:#cfcfcf;

    line-height:1.8;

}

/* ==========================================
   FABIAN
========================================== */

.about{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:70px;

    align-items:center;

}

.aboutImage img{

    width:100%;

    border-radius:25px;

    box-shadow:0 30px 70px rgba(0,0,0,.45);

}

.aboutContent span{

    color:var(--gold);

    font-weight:700;

    letter-spacing:3px;

}

.aboutContent h2{

    font-size:58px;

    line-height:1.15;

    margin:25px 0;

}

.goldLine{

    width:120px;

    height:4px;

    background:var(--gold);

    margin-bottom:35px;

    border-radius:20px;

}

.aboutContent p{

    color:#d0d0d0;

    line-height:2;

    font-size:18px;

}

.quote{

    margin-top:35px;

    padding:25px;

    border-left:4px solid var(--gold);

    background:#171717;

    border-radius:10px;

    color:white;

    font-style:italic;

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

.contact{

    padding:140px 8%;

}

.contactContainer{

    max-width:900px;

    margin:auto;

    text-align:center;

    background:linear-gradient(135deg,#171717,#101010);

    border:1px solid rgba(200,161,74,.25);

    border-radius:30px;

    padding:80px 60px;

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

}

.contactContainer span{

    color:var(--gold);

    font-weight:700;

    letter-spacing:4px;

    text-transform:uppercase;

}

.contactContainer h2{

    font-size:58px;

    margin:25px 0;

}

.contactContainer p{

    color:#cfcfcf;

    line-height:1.9;

    max-width:650px;

    margin:auto;

}

.contactButtons{

    display:flex;

    justify-content:center;

    gap:25px;

    margin-top:45px;

}

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

footer{

    padding:60px 8%;

    border-top:1px solid #222;

    text-align:center;

}

.footerLogo{

    width:180px;

    margin-bottom:20px;

}

footer p{

    color:#8f8f8f;

    margin-bottom:20px;

}

.footerLinks{

    display:flex;

    justify-content:center;

    gap:35px;

}

.footerLinks a{

    color:var(--gold);

    text-decoration:none;

    transition:.3s;

}

.footerLinks a:hover{

    color:white;

}

/* ==========================================
   ANIMATIONEN
========================================== */

.serviceCard,
.whyCard,
.aboutImage,
.aboutContent,
.contactContainer{

    opacity:0;

    transform:translateY(40px);

    transition:all .8s ease;

}

.show{

    opacity:1 !important;

    transform:translateY(0) !important;

}

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

@media (max-width:1100px){

.hero{
    grid-template-columns:1fr;
    text-align:center;
    padding:40px 30px 70px;
    gap:40px;
}

.heroLeft h1{
    font-size:60px;
}

.heroLogo{
    text-align:center;
}

.heroLogo img{
    width:320px;
    margin:0 auto;
}

.heroImage{
    width:100%;
    max-width:700px;
    margin:0 auto;
    transform:none;
}

.buttons{
    justify-content:center;
}

.serviceGrid{
    grid-template-columns:repeat(2,1fr);
}

.about{
    grid-template-columns:1fr;
    text-align:center;
}

.goldLine{
    margin:30px auto;
}

.whyGrid{
    grid-template-columns:1fr;
}

.contactButtons{
    justify-content:center;
}

}

@media (max-width:700px){

.navbar{
    padding:20px;
    flex-direction:column;
    gap:18px;
}

.logo{
    width:180px;
}

.hero{
    grid-template-columns:1fr;
    padding:25px 20px 45px;
    gap:30px;
}

.goldText{
    font-size:13px;
    letter-spacing:2px;
}

.heroLeft h1{
    font-size:44px;
    line-height:1.05;
    margin:15px 0 20px;
}

.heroLogo{
    text-align:center;
}

.heroLogo img{
    width:220px;
    margin:0 auto;
}

.heroImage{
    width:100%;
    max-width:100%;
    transform:none;
    margin:0 auto;
}

.buttons{
    flex-direction:column;
    gap:15px;
}

.goldButton,
.darkButton{
    width:100%;
    text-align:center;
}

section{
    padding:70px 20px;
}

.sectionTitle h2{
    font-size:34px;
}

.sectionTitle p{
    font-size:16px;
}

.serviceGrid,
.about,
.whyGrid{
    grid-template-columns:1fr;
}

.aboutContent h2,
.contactContainer h2{
    font-size:34px;
}

.contactContainer{
    padding:40px 25px;
}

.contactButtons,
.footerLinks{
    flex-direction:column;
    gap:15px;
}
/* ==========================================
   Partnerlogos Footer
========================================== */

.partner-wrapper{
    position:relative;
    width:700px;
    max-width:95%;
    margin:40px auto 30px;
}

.partner-image{
    width:100%;
    display:block;
    transition:0.3s ease;
}

.partner-image:hover{
    transform:scale(1.02);
}

.partner-link{
    position:absolute;
    top:0;
    height:100%;
    display:block;
    z-index:10;
}

/* Link Schöningen */
.partner-left{
    left:0;
    width:34%;
}

/* Link Vorsfelde */
.partner-right{
    right:0;
    width:34%;
}