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


*{

margin:0;
padding:0;
box-sizing:border-box;
font-family:"Segoe UI", Arial, sans-serif;

}



html{

scroll-behavior:smooth;

}



body{

background:#fff;
color:#111;

}



a{

text-decoration:none;

}





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


header{

height:90px;

display:flex;

justify-content:space-between;

align-items:center;

padding:0 8%;

background:white;

position:sticky;

top:0;

z-index:1000;

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

}




.logo{

width:160px;

}





nav a{

color:#111;

font-weight:600;

margin-left:30px;

transition:.3s;

}



nav a:hover{

color:#c90000;

}







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


.button{

display:inline-block;

background:#c90000;

color:white;

padding:15px 35px;

border-radius:10px;

font-weight:bold;

transition:.3s;

border:none;

cursor:pointer;

}




.button:hover{

background:#990000;

transform:translateY(-3px);

}





.secondary{

background:white;

color:#c90000;

border:2px solid #c90000;

margin-left:15px;

}







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


.hero{

min-height:85vh;

display:flex;

align-items:center;

padding:80px 8%;

background:

linear-gradient(
135deg,
#ffffff,
#f1f1f1
);

}



.hero-text{

max-width:900px;

}



.hero h1{

font-size:70px;

line-height:1.1;

margin-bottom:30px;

}



.hero h1 span{

color:#c90000;

}



.hero p{

font-size:22px;

color:#555;

line-height:1.7;

margin-bottom:40px;

}






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


.page-hero{

padding:100px 8%;

background:#111;

color:white;

text-align:center;

}



.page-hero h1{

font-size:55px;

margin-bottom:20px;

}



.page-hero p{

font-size:22px;

color:#ccc;

}







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


section{

padding:90px 8%;

}



.title{

font-size:45px;

text-align:center;

margin-bottom:50px;

}







/* =========================
   INTRO
========================= */


.intro{

text-align:center;

max-width:900px;

margin:auto;

}



.intro h2{

font-size:40px;

margin-bottom:25px;

}



.intro p{

font-size:20px;

color:#555;

line-height:1.8;

}







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


.cards{

display:grid;

grid-template-columns:
repeat(auto-fit,minmax(280px,1fr));

gap:30px;

}





.card{

background:white;

padding:35px;

border-radius:20px;

box-shadow:

0 10px 30px rgba(0,0,0,.1);

border-top:5px solid #c90000;

transition:.3s;

}



.card:hover{

transform:translateY(-8px);

}



.card h3{

color:#c90000;

font-size:26px;

margin-bottom:15px;

}



.card p{

color:#555;

line-height:1.7;

}







/* =========================
   DARK BEREICHE
========================= */


.dark-section{

background:#111;

color:white;

}



.dark-section .card{

color:#111;

}








/* =========================
   CALCULATOR
========================= */


.calculator-page{

background:#f5f5f5;

}



.calculator-box{

max-width:750px;

margin:auto;

background:white;

padding:45px;

border-radius:25px;

box-shadow:

0 15px 40px rgba(0,0,0,.12);

}




.calculator-box h2{

margin:30px 0 20px;

color:#c90000;

}



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


width:100%;

padding:15px;

margin:10px 0;

border-radius:8px;

border:1px solid #ccc;

font-size:16px;

}





.calculator-box label{

display:block;

padding:12px;

font-size:17px;

}



.calculator-box input[type="checkbox"]{

width:auto;

margin-right:10px;

}



.price-result{

margin-top:35px;

background:#111;

color:white;

padding:30px;

border-radius:15px;

text-align:center;

}



.big-price{

font-size:40px;

font-weight:bold;

color:#00c878;

margin-top:15px;

}







/* =========================
   TEAM
========================= */


.team{

display:grid;

grid-template-columns:

repeat(auto-fit,minmax(300px,1fr));

gap:40px;

}



.person{

text-align:center;

padding:35px;

background:white;

border-radius:20px;

box-shadow:

0 10px 30px rgba(0,0,0,.1);

}



.person img{

width:180px;

height:180px;

border-radius:50%;

object-fit:cover;

margin-bottom:20px;

}



.person h2{

margin-bottom:10px;

}



.role{

color:#c90000;

font-weight:bold;

margin-bottom:20px;

}







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


.about-company{

max-width:900px;

margin:auto;

text-align:center;

}



.about-company h2{

font-size:40px;

margin-bottom:30px;

}



.about-company p{

font-size:20px;

line-height:1.8;

color:#555;

}







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


.contact-page{

display:grid;

grid-template-columns:

repeat(auto-fit,minmax(300px,1fr));

gap:50px;

}



.contact-info{

font-size:20px;

line-height:2;

}



.contact-form{

background:#fff;

padding:40px;

border-radius:20px;

box-shadow:

0 10px 30px rgba(0,0,0,.1);

}



textarea{

height:150px;

resize:none;

}







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


.cta{

background:#111;

color:white;

text-align:center;

}



.cta h2{

font-size:45px;

margin-bottom:20px;

}



.cta p{

font-size:20px;

color:#ccc;

}







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


footer{

background:#000;

color:white;

padding:35px;

text-align:center;

line-height:2;

}








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


@media(max-width:900px){


header{

height:auto;

flex-direction:column;

padding:20px;

}



nav{

margin-top:20px;

}



nav a{

display:inline-block;

margin:8px;

}



.hero h1{

font-size:42px;

}



.hero p{

font-size:18px;

}



.page-hero h1{

font-size:38px;

}



.title{

font-size:35px;

}



.secondary{

margin-left:0;

margin-top:15px;

}



}