/* =========================
ALLGEMEIN
========================= */

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

body{
font-family:Arial, Helvetica, sans-serif;
background:#fff;
color:#222;
overflow-x:hidden;
}

.container{
width:92%;
max-width:1280px;
margin:auto;
}
@media(max-width:1100px){

section div[style*="grid-template-columns:repeat(4,1fr)"]{
grid-template-columns:repeat(2,1fr) !important;
}

}

@media(max-width:768px){

section div[style*="grid-template-columns:repeat(4,1fr)"]{
grid-template-columns:1fr !important;
}

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

.nav-link{
display:flex;
align-items:center;
justify-content:center;
height:52px;
padding:0 24px;
border-radius:14px;
text-decoration:none;
font-size:15px;
font-weight:800;
color:#00195c;
transition:.3s ease;
background:transparent;
}

.nav-link:hover{
background:#f2f5fb;
transform:translateY(-2px);
}

.nav-highlight{
background:#00195c;
color:#fff !important;
box-shadow:0 15px 35px rgba(0,25,92,.16);
}

.nav-highlight:hover{
background:#00195c !important;
}

.mobile-link{
display:flex;
align-items:center;
height:56px;
padding:0 18px;
border-radius:14px;
text-decoration:none;
font-size:16px;
font-weight:800;
color:#00195c;
background:#f6f8fc;
}

.mobile-highlight{
background:#00195c;
color:#fff;
}

/* =========================
CONTENT
========================= */

.content{
padding:90px 20px;
}

.content h2{
font-size:42px;
color:#00195c;
margin-bottom:25px;
}

.content p{
font-size:22px;
line-height:1.9;
}

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

.main-footer{
background:#ececec;
margin-top:0;
}

.footer-wrapper{
display:grid;
grid-template-columns:1.3fr 1fr 1fr;
gap:60px;
padding:70px 0;
}

.footer-box img{
width:220px;
margin-bottom:25px;
}

.footer-box h3{
font-size:22px;
margin-bottom:25px;
color:#00195c;
}

.footer-box p{
font-size:18px;
line-height:1.7;
}

.footer-links ul{
list-style:none;
}

.footer-links ul li{
margin-bottom:18px;
}

.footer-links ul li a{
text-decoration:none;
color:#00195c;
font-size:18px;
transition:.3s ease;
}

.footer-links ul li a:hover{
opacity:.7;
}

.footer-bottom{
background:#00195c;
padding:22px 15px;
text-align:center;
}

.footer-bottom p{
color:#fff;
font-size:20px;
}

/* =========================
FORMULAR
========================= */

#bewertung-formular label{
display:block;
margin-bottom:8px;
font-weight:700;
color:#4d4d4d;
font-size:15px;
}

#bewertung-formular input,
#bewertung-formular select{
width:100%;
height:52px;
border:1px solid #cfcfcf;
padding:12px 14px;
font-size:15px;
border-radius:10px;
background:#fff;
outline:none;
}

#bewertung-formular input:focus,
#bewertung-formular select:focus{
border-color:#00195c;
}

.form-grid{
display:grid;
grid-template-columns:repeat(4,1fr);
gap:20px;
}

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

@media(max-width:1100px){

section div[style*="grid-template-columns:1fr 1fr"],
section div[style*="grid-template-columns:520px 1fr"],
section div[style*="grid-template-columns:450px 1fr"],
section div[style*="grid-template-columns:1fr 420px"],
section div[style*="grid-template-columns:repeat(2,1fr)"],
section div[style*="grid-template-columns:repeat(3,1fr)"]{
grid-template-columns:1fr !important;
}

section div[style*="position:sticky"]{
position:relative !important;
top:auto !important;
}

section h1{
font-size:72px !important;
line-height:1 !important;
}

section h2{
font-size:52px !important;
line-height:1.1 !important;
}

section h3{
font-size:34px !important;
line-height:1.2 !important;
}

.hero-grid{
grid-template-columns:1fr !important;
gap:40px !important;
}

.hero-grid img{
height:420px !important;
}

.steps-grid{
grid-template-columns:1fr !important;
gap:24px !important;
}

.text-grid{
grid-template-columns:1fr !important;
gap:45px !important;
}

.info-box{
padding:70px 50px !important;
}

.footer-wrapper{
grid-template-columns:1fr;
gap:40px;
text-align:center;
}

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

.desktop-nav{
display:none !important;
}

.mobile-toggle{
display:flex !important;
}

}

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

@media(max-width:768px){

section{
padding:80px 15px !important;
}

section h1{
font-size:46px !important;
line-height:1 !important;
}

section h2{
font-size:36px !important;
line-height:1.1 !important;
}

section h3{
font-size:28px !important;
line-height:1.2 !important;
}

section h4{
font-size:20px !important;
}

section p{
font-size:16px !important;
line-height:1.9 !important;
}

section a{
width:100% !important;
}

section img{
min-height:320px !important;
}

section div[style*="padding:80px"]{
padding:35px !important;
}

section div[style*="padding:50px"]{
padding:30px !important;
}

section div[style*="padding:45px"]{
padding:28px !important;
}

section div[style*="padding:40px"]{
padding:25px !important;
}

section div[style*="padding:32px"]{
padding:22px !important;
font-size:17px !important;
}

section div[style*="font-size:120px"]{
font-size:58px !important;
}

section div[style*="font-size:92px"]{
font-size:54px !important;
}

section div[style*="font-size:82px"]{
font-size:46px !important;
}

section div[style*="font-size:78px"]{
font-size:42px !important;
}

section div[style*="font-size:76px"]{
font-size:40px !important;
}

section div[style*="font-size:58px"]{
font-size:40px !important;
}

.hero-grid h1{
font-size:40px !important;
}

.hero-grid p{
font-size:16px !important;
}

.hero-grid img{
height:320px !important;
}

.steps-grid > div{
padding:35px 25px !important;
}

.text-grid > div:last-child{
padding:35px 25px !important;
}

.info-box{
padding:40px 25px !important;
}

.info-box h2{
font-size:34px !important;
}

.header-wrap{
padding:14px 15px !important;
}

.header-wrap img{
height:46px !important;
}

.mobile-toggle{
width:46px !important;
height:46px !important;
font-size:24px !important;
}

.logo-area img{
width:230px;
margin:auto;
}

.contact-btn{
width:100%;
max-width:340px;
padding:18px 20px;
font-size:18px;
border-radius:16px;
}

.footer-box img{
margin:auto;
margin-bottom:25px;
}

.footer-box h3{
font-size:24px;
}

.footer-box p,
.footer-links ul li a{
font-size:17px;
}

.footer-bottom p{
font-size:16px;
}

.form-grid{
grid-template-columns:1fr;
gap:16px;
}

#bewertung-formular button{
width:100%;
}

#cookie-popup{
padding:15px !important;
}

#cookie-popup > div{
padding:35px 24px !important;
border-radius:26px !important;
}

#cookie-popup h3{
font-size:28px !important;
}

#cookie-popup p{
font-size:15px !important;
line-height:1.9 !important;
}

#cookie-popup button,
#cookie-popup a{
width:100% !important;
}

}