/* ==========================================================
   VITAL CARE PLUS
   STYLE.CSS
========================================================== */

:root{

--blue:#123E7C;
--gold:#D4A11E;
--gold-dark:#BE8E18;

--text:#5F6B7A;

--light:#F7F9FC;

--white:#ffffff;

--shadow-sm:0 10px 30px rgba(0,0,0,.05);
--shadow-md:0 20px 50px rgba(0,0,0,.08);
--shadow-lg:0 30px 70px rgba(0,0,0,.12);

--radius:30px;

}

*{

margin:0;
padding:0;

box-sizing:border-box;

}

html{

scroll-behavior:smooth;

}

body{

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

font-size:16px;

line-height:1.7;

background:#fff;

color:var(--text);

overflow-x:hidden;

}

img{

display:block;

max-width:100%;

height:auto;

}

a{

text-decoration:none;

color:inherit;

}

ul{

list-style:none;

}

.container{

max-width:1200px;

width:92%;

margin:0 auto;

}

section{

padding:110px 0;

}

.section-light{

background:var(--light);

}
/* ==========================================================
   TYPOGRAPHIE
========================================================== */

h1,h2,h3,h4{

font-weight:800;

line-height:1.08;

color:var(--blue);

}

h1{

font-size:72px;

margin-bottom:30px;

}

h2{

font-size:54px;

margin-bottom:25px;

text-align:center;

}

h3{

font-size:30px;

margin-bottom:20px;

}

p{

font-size:21px;

line-height:1.8;

}

.badge{

display:inline-flex;

align-items:center;

padding:10px 24px;

background:#FFF6E5;

border-radius:999px;

color:var(--gold);

font-size:14px;

font-weight:700;

letter-spacing:.5px;

margin-bottom:24px;

text-transform:uppercase;

}

.section-title{

text-align:center;

max-width:760px;

margin:0 auto 70px;

}

.section-title p{

margin-top:20px;

}

.divider{

width:80px;

height:4px;

margin:30px auto 0;

background:var(--gold);

border-radius:30px;

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

.button-primary{

display:inline-flex;

align-items:center;

justify-content:center;

padding:18px 34px;

border-radius:999px;

background:var(--gold);

color:#fff;

font-size:18px;

font-weight:700;

transition:.25s;

box-shadow:0 18px 45px rgba(212,161,30,.28);

}

.button-primary:hover{

background:var(--gold-dark);

transform:translateY(-3px);

}

.button-secondary{

display:inline-flex;

align-items:center;

justify-content:center;

padding:18px 34px;

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

border-radius:999px;

font-size:18px;

font-weight:700;

color:var(--blue);

transition:.25s;

}

.button-secondary:hover{

background:var(--blue);

color:#fff;

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

.header{

position:sticky;
top:0;
left:0;
width:100%;

background:#fff;

box-shadow:0 10px 35px rgba(0,0,0,.05);

z-index:9999;

}

.navbar{

display:flex;

align-items:center;

justify-content:space-between;

height:100px;

gap:40px;

}

.logo{

flex:0 0 auto;

}

.logo img{

width:90px;

height:auto;

display:block;

}

.nav-menu{

display:flex;

align-items:center;

justify-content:center;

gap:34px;

flex:1;

margin:0 35px;

}

.nav-menu li{

list-style:none;

}

.nav-menu a{

font-size:18px;

font-weight:600;

color:var(--blue);

white-space:nowrap;

position:relative;

transition:.25s;

}

.nav-menu a:hover{

color:var(--gold);

}

.nav-menu a::after{

content:"";

position:absolute;

left:0;

bottom:-8px;

width:0;

height:3px;

background:var(--gold);

transition:.25s;

border-radius:10px;

}

.nav-menu a:hover::after{

width:100%;

}

.header .button-primary{

padding:18px 30px;

font-size:17px;

white-space:nowrap;

flex:0 0 auto;

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

.hero{

padding:90px 0;

background:linear-gradient(180deg,#ffffff 0%,#F7F9FC 100%);

overflow:hidden;

}

.hero-grid{

display:grid;

grid-template-columns:1.1fr .9fr;

align-items:center;

gap:70px;

}

.hero-content{

max-width:650px;

animation:fadeLeft .8s ease;

}

.hero-content p{

margin-bottom:40px;

}

.hero-buttons{

display:flex;

gap:20px;

margin-top:35px;

flex-wrap:wrap;

}

.hero-image{

position:relative;

animation:fadeRight .8s ease;

}

.hero-main-image{

width:100%;

border-radius:32px;

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

}
/* ==========================================================
   FLOATING CARD
========================================================== */

.floating-card{

position:absolute;

left:-35px;

bottom:45px;

background:#ffffff;

padding:26px 34px;

border-radius:24px;

box-shadow:0 20px 55px rgba(0,0,0,.12);

z-index:5;

animation:floatCard 4s ease-in-out infinite;

}

.floating-number{

font-size:44px;

font-weight:800;

line-height:1;

color:var(--blue);

margin-bottom:8px;

}

.floating-text{

font-size:18px;

line-height:1.45;

color:var(--text);

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

@keyframes fadeLeft{

from{

opacity:0;

transform:translateX(-60px);

}

to{

opacity:1;

transform:translateX(0);

}

}

@keyframes fadeRight{

from{

opacity:0;

transform:translateX(60px);

}

to{

opacity:1;

transform:translateX(0);

}

}

@keyframes floatCard{

0%{

transform:translateY(0);

}

50%{

transform:translateY(-12px);

}

100%{

transform:translateY(0);

}

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

.services-grid{

display:grid;

grid-template-columns:repeat(3,360px);

justify-content:center;

justify-items:center;

gap:40px;

max-width:1160px;

margin:70px auto 0;

}

.service-box{

background:#fff;

border-radius:30px;

overflow:hidden;

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

transition:.3s;

display:flex;

flex-direction:column;

}

.service-box:hover{

transform:translateY(-10px);

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

}

.service-box img{

width:100%;

height:250px;

object-fit:cover;

display:block;

}

.service-content{

padding:35px;

display:flex;

flex-direction:column;

flex:1;

}

.service-badge{

display:inline-block;

padding:8px 18px;

background:#FFF7E5;

color:var(--gold);

border-radius:30px;

font-size:13px;

font-weight:700;

margin-bottom:20px;

}

.service-content h3{

font-size:32px;

line-height:1.2;

margin-bottom:20px;

}

.service-content p{

font-size:18px;

margin-bottom:25px;

flex:1;

}

.service-list{

margin-bottom:30px;

}

.service-list li{

margin-bottom:12px;

font-size:17px;

color:var(--text);

}
/* ==========================================================
   VORTEILE
========================================================== */

.cards{

display:grid;

grid-template-columns:repeat(3,360px);

justify-content:center;

justify-items:center;

gap:40px;

width:100%;

max-width:1160px;

margin:70px auto 0;

}

/* ==========================================================
   4 SPALTEN KARTEN
========================================================== */

.cards-4{

display:grid;

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

gap:40px;

max-width:1280px;

margin:70px auto 0;

justify-items:center;

}

.cards-4 .card{

width:100%;

max-width:280px;

}

.card{

background:#fff;

padding:45px;

border-radius:30px;

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

text-align:center;

display:flex;

flex-direction:column;

align-items:center;

justify-content:flex-start;

min-height:420px;

}

.card:hover{

transform:translateY(-10px);

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

}

.card-icon{

font-size:56px;

margin-bottom:25px;

}

.card h3{

margin-bottom:20px;

font-size:28px;

}

.card p{

font-size:18px;

line-height:1.7;

}
/* ==========================================================
   ABLAUF
========================================================== */

.steps-grid{

display:grid;

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

gap:40px;

max-width:900px;

margin:70px auto 0;

}

.step{

background:#fff;

padding:45px;

border-radius:30px;

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

min-height:220px;

display:flex;

flex-direction:column;

justify-content:flex-start;

transition:.3s;

}

.step:hover{

transform:translateY(-8px);

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

}

.step:hover{

transform:translateY(-10px);

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

}

.step-number{

width:74px;

height:74px;

margin:0 auto 28px;

border-radius:50%;

background:var(--gold);

color:#fff;

font-size:30px;

font-weight:800;

display:flex;

align-items:center;

justify-content:center;

}

.step h3{

margin-bottom:18px;

font-size:28px;

}

.step p{

font-size:18px;

line-height:1.7;

}
/* ==========================================================
   CALL TO ACTION
========================================================== */

.cta{

background:linear-gradient(180deg,#123E7C 0%,#0F3468 100%);

padding:120px 0;

}

.cta-box{

max-width:900px;

margin:auto;

text-align:center;

color:#fff;

}

.cta .badge{

background:rgba(255,255,255,.12);

color:#fff;

}

.cta h2{

color:#fff;

margin-bottom:30px;

}

.cta p{

max-width:760px;

margin:0 auto 45px;

font-size:22px;

opacity:.95;

}

.cta .button-primary{

font-size:20px;

padding:22px 50px;

}
/* ==========================================================
   KUNDENSTIMMEN
========================================================== */

.review-slider{

position:relative;

max-width:900px;

margin:70px auto 0;

}

.review-card{

background:#fff;

border-radius:30px;

padding:70px 60px;

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

text-align:center;

}

.review-stars{

font-size:34px;

color:var(--gold);

letter-spacing:6px;

margin-bottom:30px;

}

.review-card h3{

font-size:42px;

margin-bottom:25px;

}

.review-card p{

font-size:21px;

max-width:700px;

margin:0 auto 35px;

}

.review-author{

font-size:22px;

font-weight:700;

color:var(--blue);

}

.review-prev,
.review-next{

position:absolute;

top:50%;

transform:translateY(-50%);

width:64px;

height:64px;

border:none;

border-radius:50%;

background:var(--blue);

color:#fff;

font-size:32px;

cursor:pointer;

transition:.25s;

}

.review-prev{

left:-95px;

}

.review-next{

right:-95px;

}

.review-prev:hover,
.review-next:hover{

background:var(--gold);

}

.review-dots{

display:flex;

justify-content:center;

gap:14px;

margin-top:40px;

}

.review-dots span{

width:14px;

height:14px;

border-radius:50%;

background:#D9DEE7;

cursor:pointer;

transition:.25s;

}

.review-dots span.active{

background:var(--gold);

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

.footer{

background:#123E7C;

padding:90px 0 30px;

color:#fff;

}

.footer-grid{

display:grid;

grid-template-columns:2fr 1fr 1fr;

gap:70px;

margin-bottom:60px;

}

.footer-logo img{

width:180px;

margin-bottom:25px;

}

.footer-headline{

font-size:24px;

font-weight:700;

margin-bottom:20px;

color:#fff;

}

.footer p{

font-size:17px;

line-height:1.8;

opacity:.95;

}

.footer h3{

color:#fff;

font-size:24px;

margin-bottom:25px;

}

.footer-links{

display:flex;

flex-direction:column;

gap:14px;

}

.footer-links a{

transition:.25s;

}

.footer-links a:hover{

color:var(--gold);

}

.footer-bottom{

border-top:1px solid rgba(255,255,255,.15);

padding-top:30px;

display:flex;

justify-content:space-between;

align-items:center;

font-size:15px;

}

.footer-bottom-links{

display:flex;

gap:25px;

}

.footer-bottom a{

transition:.25s;

}

.footer-bottom a:hover{

color:var(--gold);

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

@media (max-width:1100px){

.hero-grid{

grid-template-columns:1fr;

gap:60px;

}

.hero-content{

max-width:100%;
text-align:center;

}

.hero-buttons{

justify-content:center;

}

.hero-image{

max-width:700px;
margin:auto;

}

.floating-card{

left:20px;
bottom:20px;

}

.services-grid,
.cards,
.steps-grid,
.footer-grid{

grid-template-columns:1fr 1fr;

}

.footer-bottom{

flex-direction:column;

gap:20px;

text-align:center;

}

}

@media (max-width:768px){

.header{

position:relative;

}

.navbar{

flex-direction:column;

height:auto;

padding:20px 0;

gap:20px;

}

.nav-menu{

flex-wrap:wrap;

justify-content:center;

margin:0;

gap:20px;

}

.hero{

padding:70px 0;

}

.hero h1{

font-size:48px;

}

.hero p{

font-size:18px;

}

.section-title h2{

font-size:38px;

}

.services-grid,
.cards,
.steps-grid,
.footer-grid{

grid-template-columns:1fr;

}

.service-content,
.card,
.step{

padding:30px;

}

.review-card{

padding:40px 30px;

}

.review-prev{

left:-20px;

}

.review-next{

right:-20px;

}

.review-prev,
.review-next{

width:46px;
height:46px;
font-size:24px;

}

.cta{

padding:80px 0;

}

.cta h2{

font-size:38px;

}

.footer{

padding-top:70px;

}

}

@media (max-width:480px){

.hero h1{

font-size:40px;

}

.button-primary,
.button-secondary{

width:100%;

}

.hero-buttons{

flex-direction:column;

}

.floating-card{

display:none;

}

.review-card{

padding:30px 20px;

}

.review-stars{

font-size:26px;

}

.review-card h3{

font-size:30px;

}

.review-card p{

font-size:17px;

}

}

/* ==========================================================
   GKV
========================================================== */

.gkv-grid{

display:grid;

grid-template-columns:repeat(4,minmax(240px,300px));

justify-content:center;

gap:35px;

margin-top:60px;

}

.gkv-steps{

display:grid;

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

gap:40px;

max-width:900px;

margin:60px auto 0;

}
/* ==========================================================
   GKV VERGLEICH
========================================================== */

.compare-grid{

display:grid;

grid-template-columns:repeat(2,420px);

justify-content:center;

gap:40px;

margin:70px auto 0;

}

.compare-box{

background:#fff;

padding:45px;

border-radius:30px;

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

min-height:220px;

display:flex;

flex-direction:column;

justify-content:flex-start;

transition:.3s;

}

.compare-box:hover{

transform:translateY(-8px);

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

}

.compare-box h3{

font-size:28px;

margin-bottom:18px;

}

.compare-box p{

font-size:18px;

line-height:1.75;

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

.faq{

max-width:950px;

margin:60px auto 0;

display:flex;

flex-direction:column;

gap:25px;

}

.faq-item{

background:#fff;

padding:35px 40px;

border-radius:24px;

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

}

.faq-item h3{

font-size:26px;

margin-bottom:15px;

color:var(--blue);

}

.faq-item p{

font-size:18px;

line-height:1.8;

margin:0;

}
/* ==========================================================
   GKV RESPONSIVE
========================================================== */

@media (max-width:1100px){

.gkv-grid,

}

@media (max-width:768px){

.gkv-grid,
.compare-grid,
.gkv-steps{

grid-template-columns:1fr;

}

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

.contact-grid{

display:grid;

grid-template-columns:1fr 1.3fr;

gap:60px;

margin-top:60px;

}

.contact-card,
.contact-form{

background:#fff;

padding:45px;

border-radius:30px;

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

}

.contact-card h3{

margin-bottom:25px;

}

.contact-card p{

margin-bottom:25px;

}

.contact-form form{

display:flex;

flex-direction:column;

gap:20px;

}

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

width:100%;

padding:18px 22px;

border:1px solid #DCE3EC;

border-radius:16px;

font-size:17px;

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

outline:none;

transition:.25s;

}

.contact-form input:focus,
.contact-form textarea:focus{

border-color:var(--gold);

}

.contact-form textarea{

resize:vertical;

min-height:180px;

}
.card-icon{

height:80px;

display:flex;

align-items:center;

justify-content:center;

font-size:56px;

margin-bottom:25px;

}
/* ==========================================================
   GKV ABLAUF (3 SCHRITTE)
========================================================== */

.gkv-process{

display:grid;

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

gap:40px;

max-width:1200px;

margin:70px auto 0;

justify-items:center;

}

.gkv-process .step{

width:100%;

max-width:340px;

}
/* ==========================================================
   STARTSEITE - ABLAUF
========================================================== */

.home-steps{

display:grid;

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

gap:40px;

max-width:1200px;

margin:70px auto 0;

justify-items:center;

}

.home-steps .step{

width:100%;

max-width:340px;

}
/* ==========================================================
   INFO BOX
========================================================== */

.info-box{

max-width:900px;

margin:0 auto;

text-align:center;

}

.info-box h2{

margin-bottom:30px;

}

.info-box p{

color:var(--text);

font-size:21px;

line-height:1.8;

max-width:850px;

margin:0 auto;

}
/* ==========================================================
   DATENSCHUTZ
========================================================== */

.info-box{

max-width:950px;

margin:0 auto;

}

.info-box h2{

margin-top:50px;

margin-bottom:20px;

font-size:34px;

text-align:left;

}

.info-box p{

font-size:19px;

line-height:1.9;

margin-bottom:20px;

color:var(--text);

}

.privacy-list{

margin:25px 0;

padding-left:25px;

}

.privacy-list li{

list-style:disc;

margin-bottom:12px;

font-size:18px;

color:var(--text);

}

.info-box hr{

margin:45px 0;

border:none;

border-top:1px solid #E3E8EF;

}
/* ==========================================================
   FORMULAR DSGVO
========================================================== */

.form-consent{

margin:15px 0 25px;

}

.form-consent label{

display:flex;

align-items:flex-start;

gap:15px;

cursor:pointer;

}

.form-consent input{

margin-top:5px;

transform:scale(1.2);

}

.form-consent span{

font-size:15px;

line-height:1.7;

color:var(--text);

}

.form-consent a{

color:var(--blue);

font-weight:700;

text-decoration:underline;

}