/* Vitamin Düsseldorf — Clean Medical White */
:root {
  --blue: #1762D9;
  --blue-dark: #0F4FB5;
  --blue-pale: #ECF2FF;
  --gold: #1762D9;
  --gold-light: #4B8FF2;
  --dark: #08152A;
  --mid: #0F2240;
  --white: #FFFFFF;
  --off: #F4F7FB;
  --off2: #EBF2FF;
  --gray: #5B6B85;
  --gray2: #8B97AA;
  --border: #D6E0EE;
  --text: #18253C;
  --green: #059669;
  --nav-h: 68px;
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;}
body{font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;font-size:16px;line-height:1.6;color:var(--text);background:var(--white);}
a{color:inherit;text-decoration:none;}
img{display:block;max-width:100%;}
h1,h2,h3,h4{font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;font-weight:700;line-height:1.2;}
em{font-style:normal;color:var(--blue);}

/* NAV */
nav{position:sticky;top:0;z-index:100;height:var(--nav-h);background:rgba(255,255,255,0.98);border-bottom:1px solid var(--border);backdrop-filter:blur(10px);}
.nav-inner{max-width:1160px;margin:0 auto;padding:0 24px;height:100%;display:flex;align-items:center;justify-content:space-between;}
.nav-logo{font-size:1.1rem;font-weight:800;color:var(--dark);letter-spacing:-0.02em;}
.nav-logo span{color:var(--blue);}
.nav-links{display:flex;align-items:center;gap:28px;list-style:none;}
.nav-links a{font-size:0.84rem;font-weight:500;color:var(--gray);letter-spacing:0.01em;transition:color 0.18s;}
.nav-links a:hover,.nav-links a.active{color:var(--blue);}
.nav-cta{background:var(--blue)!important;color:#fff!important;padding:8px 20px;border-radius:6px;font-weight:700;font-size:0.83rem!important;transition:background 0.18s!important;}
.nav-cta:hover{background:var(--blue-dark)!important;color:#fff!important;}

/* BUTTONS */
.btn-primary{display:inline-block;background:var(--blue);color:#fff;font-size:0.88rem;font-weight:700;letter-spacing:0.02em;padding:13px 28px;border-radius:7px;border:none;cursor:pointer;transition:background 0.18s,transform 0.15s;text-decoration:none;}
.btn-primary:hover{background:var(--blue-dark);color:#fff;transform:translateY(-1px);}
.btn-secondary{display:inline-block;background:transparent;color:var(--blue);font-size:0.88rem;font-weight:600;padding:12px 28px;border-radius:7px;border:2px solid var(--blue);cursor:pointer;transition:background 0.18s,color 0.18s;text-decoration:none;}
.btn-secondary:hover{background:var(--blue-pale);color:var(--blue-dark);}
.btn-gold{display:inline-block;background:#fff;color:var(--blue);font-size:0.88rem;font-weight:700;padding:12px 28px;border-radius:7px;border:2px solid rgba(255,255,255,0.4);cursor:pointer;transition:background 0.18s;text-decoration:none;}
.btn-gold:hover{background:var(--blue-pale);color:var(--blue-dark);}

/* LAYOUT */
.container{max-width:1160px;margin:0 auto;padding:0 24px;}
section{width:100%;}
.off-section{background:var(--off);}
.dark-section{background:var(--dark);color:#fff;}
.dark-section .section-tag{color:var(--gold-light);}
.dark-section .section-title{color:#fff;}
.dark-section .section-sub{color:rgba(255,255,255,0.62);}
.dark-section p{color:rgba(255,255,255,0.7);}
.dark-section h3{color:#fff;}

/* SECTION ELEMENTS */
.section-tag{font-size:0.72rem;font-weight:700;letter-spacing:0.15em;text-transform:uppercase;color:var(--blue);margin-bottom:14px;}
.section-title{font-size:2.1rem;color:var(--dark);margin-bottom:16px;line-height:1.15;font-weight:800;}
.section-sub{font-size:1rem;color:var(--gray);max-width:600px;margin-bottom:44px;line-height:1.7;}

/* BADGE */
.badge{display:inline-flex;align-items:center;gap:8px;background:var(--blue-pale);border:1px solid rgba(23,98,217,0.2);border-radius:100px;padding:6px 14px;font-size:0.78rem;font-weight:600;color:var(--blue);margin-bottom:20px;letter-spacing:0.02em;}
.badge::before{content:"";width:6px;height:6px;background:var(--blue);border-radius:50%;flex-shrink:0;}

/* CARDS */
.card{background:var(--white);border:1px solid var(--border);border-radius:10px;padding:28px;transition:box-shadow 0.2s,transform 0.2s;}
.card:hover{box-shadow:0 6px 28px rgba(23,98,217,0.09);transform:translateY(-2px);}
.dosage{display:inline-block;background:var(--blue-pale);color:var(--blue);font-size:0.76rem;font-weight:700;letter-spacing:0.04em;padding:4px 12px;border-radius:100px;}

/* STEPS */
.steps{list-style:none;display:flex;flex-direction:column;gap:24px;}
.step{display:flex;gap:20px;align-items:flex-start;}
.step-num{width:36px;height:36px;border-radius:50%;background:var(--blue);display:flex;align-items:center;justify-content:center;font-size:0.75rem;font-weight:800;color:#fff;flex-shrink:0;letter-spacing:0.05em;}
.step-title{font-size:0.95rem;font-weight:700;color:var(--dark);margin-bottom:5px;}
.step-text{font-size:0.87rem;color:var(--gray);line-height:1.65;}

/* STAT BOXES */
.stat-box{background:rgba(255,255,255,0.06);border:1px solid rgba(255,255,255,0.12);border-radius:10px;padding:22px 20px;text-align:center;}
.stat-num{font-size:1.8rem;font-weight:800;color:#fff;line-height:1;margin-bottom:8px;}
.stat-label{font-size:0.78rem;color:rgba(255,255,255,0.5);line-height:1.4;}

/* PULL QUOTE */
.pull{border-left:3px solid rgba(255,255,255,0.2);padding-left:24px;margin-top:22px;}
.pull p{font-size:1rem;color:rgba(255,255,255,0.78);line-height:1.7;font-style:italic;margin-bottom:10px;}
.pull cite{font-size:0.78rem;color:rgba(255,255,255,0.42);font-style:normal;}

/* GRIDS */
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:40px;}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;}

/* CTA SECTION */
.cta-section{text-align:center;padding:80px 0;}
.cta-section .section-sub{margin-left:auto;margin-right:auto;}
.cta-location{display:inline-flex;align-items:center;gap:8px;font-size:0.86rem;color:var(--gray);margin-top:16px;}
.cta-dot{width:7px;height:7px;background:var(--blue);border-radius:50%;display:inline-block;}
.cta-actions{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin-top:28px;}

/* PAGE HERO */
.page-hero{background:var(--white);border-bottom:1px solid var(--border);padding:72px 0 64px;}
.page-hero-inner{max-width:700px;margin:0 auto;padding:0 24px;}
.page-hero .section-tag{color:var(--blue);}
.page-hero h1{font-size:2.6rem;color:var(--dark);margin-bottom:18px;line-height:1.12;font-weight:800;}
.page-hero p{font-size:1rem;color:var(--gray);max-width:560px;line-height:1.68;}

/* CONTENT SECTIONS */
.content-section{padding:80px 0;background:var(--white);}
.content-section.bg-off{background:var(--off);}
.content-section.bg-dark{background:var(--dark);color:#fff;}

/* THREE COL */
.three-col{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;}
.feature-card{background:var(--white);border:1px solid var(--border);border-radius:10px;padding:28px;}
.dark-card{background:rgba(255,255,255,0.05);border-color:rgba(255,255,255,0.1);}
.feature-card-num{font-size:0.7rem;font-weight:700;letter-spacing:0.14em;text-transform:uppercase;color:var(--blue);margin-bottom:10px;}
.feature-card h3{font-size:1.02rem;color:var(--dark);margin-bottom:10px;font-weight:700;}
.dark-card h3{color:#fff;}
.feature-card p{font-size:0.88rem;color:var(--gray);line-height:1.62;}
.dark-card p{color:rgba(255,255,255,0.58);}

/* VITAMIN GRID */
.vitamine-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:24px;margin-top:36px;}
.vitamin-item{display:flex;gap:18px;align-items:flex-start;background:var(--white);border:1px solid var(--border);border-radius:10px;padding:24px;}
.vitamin-letter{font-size:1.8rem;font-weight:800;color:var(--blue);line-height:1;min-width:44px;text-align:center;}
.vitamin-item h3{font-size:0.96rem;color:var(--dark);margin-bottom:7px;font-weight:700;}
.vitamin-item p{font-size:0.86rem;color:var(--gray);line-height:1.6;}

/* STATS ROW */
.stats-row{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-bottom:20px;}

/* FULL PRODUCT GRID */
.produkt-full-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:24px;margin-top:36px;}
.produkt-full-card{border:1px solid var(--border);border-radius:12px;overflow:hidden;background:var(--white);}
.produkt-full-top{background:var(--blue-pale);padding:24px 28px;display:flex;align-items:center;border-bottom:1px solid var(--border);}
.produkt-full-top .produkt-letter{font-size:2rem;font-weight:800;color:var(--blue);}
.produkt-letter{font-size:2.5rem;font-weight:800;color:var(--blue);line-height:1;}
.produkt-full-body{padding:28px;}
.produkt-full-body h3{font-size:1.15rem;color:var(--dark);margin-bottom:10px;font-weight:700;}
.dosage-badge{display:inline-block;background:var(--blue-pale);border:1px solid rgba(23,98,217,0.25);color:var(--blue);font-size:0.76rem;font-weight:700;letter-spacing:0.04em;padding:4px 12px;border-radius:100px;margin-bottom:10px;}
.produkt-full-body .produkt-tag{margin-bottom:12px;}
.produkt-full-body p{font-size:0.88rem;color:var(--gray);line-height:1.65;margin-bottom:14px;}
.why-high{background:var(--off);border-left:3px solid var(--blue);padding:12px 16px;font-size:0.82rem;color:var(--text);line-height:1.55;border-radius:0 6px 6px 0;}
.produkt-tag{font-size:0.7rem;font-weight:700;letter-spacing:0.1em;text-transform:uppercase;color:var(--blue);margin-bottom:6px;}

/* QUALITAT GRID */
.qualitaet-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;margin-top:36px;}
.qualitaet-item{text-align:center;}
.qualitaet-icon{width:52px;height:52px;background:var(--blue-pale);border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:1.3rem;font-weight:800;color:var(--blue);margin:0 auto 14px;}
.qualitaet-item h3{font-size:0.96rem;color:var(--dark);margin-bottom:8px;font-weight:700;}
.qualitaet-item p{font-size:0.86rem;color:var(--gray);line-height:1.6;}

/* DR PROFIL */
.dr-profil{display:grid;grid-template-columns:300px 1fr;gap:56px;align-items:start;}
.dr-profil-visual{position:sticky;top:calc(var(--nav-h) + 20px);}
.dr-profil-visual-inner{background:var(--blue-pale);border:1px solid rgba(23,98,217,0.2);border-radius:12px;padding:48px 32px;text-align:center;}
.dr-initial{font-size:5rem;font-weight:800;color:var(--blue);line-height:1;margin-bottom:14px;}
.dr-caption{font-size:0.86rem;color:var(--gray);line-height:1.5;}
.dr-profil-text h2{font-size:1.9rem;color:var(--dark);margin-bottom:8px;font-weight:800;}
.dr-title{font-size:0.88rem;color:var(--blue);font-weight:600;letter-spacing:0.03em;margin-bottom:22px;}
.dr-profil-text p{font-size:0.93rem;color:var(--gray);line-height:1.72;margin-bottom:16px;}

/* METHODE */
.methode-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:24px;margin-top:36px;}
.methode-item{background:rgba(255,255,255,0.05);border:1px solid rgba(255,255,255,0.1);border-radius:10px;padding:26px;}
.methode-item h3{font-size:1.02rem;color:var(--gold-light);margin-bottom:10px;font-weight:700;}
.methode-item p{font-size:0.88rem;color:rgba(255,255,255,0.62);line-height:1.65;}

/* ARZT */
.arzt-grid{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center;margin-top:36px;}
.arzt-facts{display:flex;flex-direction:column;gap:18px;}
.arzt-fact{border-left:3px solid var(--gold-light);padding-left:18px;}
.arzt-fact h3{font-size:0.96rem;color:var(--gold-light);margin-bottom:5px;font-weight:700;}
.arzt-fact p{font-size:0.88rem;color:rgba(255,255,255,0.62);line-height:1.55;}

/* STEPS TIMELINE */
.steps-timeline{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-top:44px;position:relative;}
.timeline-step{background:var(--white);border:1px solid var(--border);border-radius:10px;padding:26px 22px;}
.timeline-num{width:42px;height:42px;border-radius:50%;background:var(--blue);display:flex;align-items:center;justify-content:center;font-size:1rem;font-weight:800;color:#fff;margin-bottom:14px;}
.timeline-step h3{font-size:0.96rem;color:var(--dark);margin-bottom:8px;font-weight:700;}
.timeline-step p{font-size:0.86rem;color:var(--gray);line-height:1.6;}

/* ABLAUF STEPS */
.ablauf-steps{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-top:44px;}
.step-circle{width:52px;height:52px;border-radius:50%;background:var(--blue);display:flex;align-items:center;justify-content:center;font-size:1.2rem;font-weight:800;color:#fff;margin:0 auto 14px;}

/* KONTAKT */
.kontakt-grid{display:grid;grid-template-columns:1fr 1fr;gap:56px;margin-top:36px;align-items:start;}
.kontakt-info h3{font-size:1.15rem;color:var(--dark);margin-bottom:22px;font-weight:700;}
.kontakt-line{display:flex;gap:14px;padding:13px 0;border-bottom:1px solid var(--border);}
.kontakt-label{font-size:0.76rem;font-weight:700;letter-spacing:0.1em;text-transform:uppercase;color:var(--blue);min-width:100px;}
.kontakt-value{font-size:0.9rem;color:var(--text);line-height:1.55;}
.kontakt-value a{color:var(--text);}
.kontakt-value a:hover{color:var(--blue);}
.map-placeholder{margin-top:22px;background:var(--off);border:1px solid var(--border);border-radius:8px;padding:28px;text-align:center;color:var(--gray);font-size:0.86rem;}
.contact-form{background:var(--white);border:1px solid var(--border);border-radius:12px;padding:34px;}
.contact-form h3{font-size:1.15rem;color:var(--dark);margin-bottom:22px;font-weight:700;}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:14px;}
.form-group{display:flex;flex-direction:column;gap:5px;margin-bottom:14px;}
.form-group label{font-size:0.78rem;font-weight:700;letter-spacing:0.06em;text-transform:uppercase;color:var(--text);}
.form-group input,.form-group textarea{padding:11px 14px;border:1px solid var(--border);border-radius:6px;font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;font-size:0.9rem;color:var(--text);background:var(--off);transition:border-color 0.18s;outline:none;}
.form-group input:focus,.form-group textarea:focus{border-color:var(--blue);background:var(--white);}
.form-group textarea{min-height:100px;resize:vertical;}

/* PRODUKTE */
.produkt-name{font-size:1.02rem;color:var(--dark);font-weight:700;margin-bottom:7px;}
.produkt-desc{font-size:0.86rem;color:var(--gray);line-height:1.55;margin-bottom:10px;}
.produkt-dosage{font-size:0.76rem;color:var(--blue);font-weight:700;letter-spacing:0.04em;}
.produkte-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:44px;}
.produkt-card{border:1px solid var(--border);border-radius:10px;overflow:hidden;background:var(--white);transition:box-shadow 0.2s;}
.produkt-card:hover{box-shadow:0 6px 28px rgba(23,98,217,0.09);}
.produkt-top{background:var(--blue-pale);padding:28px;display:flex;align-items:center;justify-content:center;border-bottom:1px solid var(--border);}
.produkt-body{padding:22px;}

/* QUIZ */
.quiz-wrap{max-width:680px;margin:0 auto;padding:48px 24px;}
.progress-bar-outer{height:4px;background:var(--border);border-radius:2px;margin-bottom:44px;}
.progress-bar-inner{height:100%;background:var(--blue);border-radius:2px;transition:width 0.4s ease;}
.quiz-step{display:none;}
.quiz-step.active{display:block;}
.quiz-q-num{font-size:0.72rem;font-weight:700;letter-spacing:0.13em;text-transform:uppercase;color:var(--blue);margin-bottom:10px;}
.quiz-q-text{font-size:1.55rem;font-weight:700;color:var(--dark);line-height:1.28;margin-bottom:28px;}
.quiz-options{display:flex;flex-direction:column;gap:10px;}
.quiz-option{display:flex;align-items:center;gap:14px;padding:14px 18px;border:2px solid var(--border);border-radius:8px;cursor:pointer;font-size:0.93rem;color:var(--text);background:var(--white);transition:border-color 0.18s,background 0.18s;text-align:left;width:100%;}
.quiz-option:hover{border-color:var(--blue);background:var(--blue-pale);}
.quiz-option.selected{border-color:var(--blue);background:var(--blue-pale);color:var(--dark);}
.quiz-option-letter{width:30px;height:30px;border-radius:50%;background:var(--off);border:1px solid var(--border);display:flex;align-items:center;justify-content:center;font-size:0.78rem;font-weight:700;color:var(--gray);flex-shrink:0;transition:background 0.18s,color 0.18s,border-color 0.18s;}
.quiz-option.selected .quiz-option-letter{background:var(--blue);color:#fff;border-color:var(--blue);}
.quiz-nav{display:flex;justify-content:space-between;align-items:center;margin-top:28px;}
.quiz-result{display:none;}
.quiz-result.active{display:block;}
.result-headline{font-size:1.9rem;font-weight:800;color:var(--dark);margin-bottom:8px;margin-top:14px;}
.result-sub{font-size:0.96rem;color:var(--gray);margin-bottom:32px;}
.result-cards{display:flex;flex-direction:column;gap:18px;margin-bottom:36px;}
.result-card{display:flex;gap:18px;align-items:flex-start;background:var(--white);border:1px solid var(--border);border-radius:10px;padding:22px;}
.result-letter{font-size:1.8rem;font-weight:800;color:var(--blue);min-width:46px;text-align:center;line-height:1;}
.result-card h3{font-size:0.96rem;color:var(--dark);margin-bottom:5px;font-weight:700;}
.result-card p{font-size:0.86rem;color:var(--gray);line-height:1.6;}
.result-cta{text-align:center;background:var(--off);border-radius:10px;padding:28px;}
.result-cta p{font-size:0.93rem;color:var(--gray);margin-bottom:18px;}

/* FOOTER */
footer{background:var(--dark);color:rgba(255,255,255,0.58);padding:60px 0 0;}
.footer-inner{max-width:1160px;margin:0 auto;padding:0 24px 48px;display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:36px;}
.footer-logo{font-size:1.05rem;font-weight:800;color:#fff;margin-bottom:10px;letter-spacing:-0.01em;}
.footer-logo span{color:var(--gold-light);}
.footer-tagline{font-size:0.83rem;line-height:1.58;margin-bottom:14px;}
.footer-address{font-size:0.81rem;line-height:1.7;color:rgba(255,255,255,0.38);}
.footer-col h4{font-size:0.7rem;font-weight:700;letter-spacing:0.14em;text-transform:uppercase;color:var(--gold-light);margin-bottom:14px;}
.footer-col ul{list-style:none;}
.footer-col li{margin-bottom:9px;font-size:0.86rem;}
.footer-col a{color:rgba(255,255,255,0.48);transition:color 0.18s;}
.footer-col a:hover{color:rgba(255,255,255,0.85);}
.footer-bottom{border-top:1px solid rgba(255,255,255,0.08);padding:18px 24px;max-width:1160px;margin:0 auto;display:flex;justify-content:space-between;align-items:center;font-size:0.76rem;color:rgba(255,255,255,0.3);}

/* WUNDERWERK (legacy compat) */
.wunderwerk{background:var(--off);}
.wunderwerk-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;margin-top:44px;}
.ww-item{background:var(--white);border:1px solid var(--border);border-radius:10px;padding:28px;}
.ww-num{font-size:0.7rem;font-weight:700;letter-spacing:0.12em;color:var(--blue);margin-bottom:10px;}
.ww-title{font-size:1.1rem;color:var(--dark);margin-bottom:10px;font-weight:700;}
.ww-text{font-size:0.9rem;color:var(--gray);line-height:1.65;margin-bottom:12px;}
.ww-highlight{font-size:0.8rem;color:var(--blue);font-weight:600;border-left:2px solid var(--blue);padding-left:12px;}

/* ARZT QUOTE */
.arzt-quote{border-left:3px solid var(--gold-light);padding-left:26px;}
.arzt-quote blockquote{font-size:1.15rem;color:rgba(255,255,255,0.86);font-style:italic;line-height:1.6;margin-bottom:14px;}
.arzt-quote cite{font-size:0.8rem;color:var(--gold-light);font-style:normal;}

/* HERO page-level */
.page-hero-tag{display:inline-block;background:var(--blue-pale);color:var(--blue);font-size:0.72rem;font-weight:700;letter-spacing:0.14em;text-transform:uppercase;padding:5px 12px;border-radius:4px;margin-bottom:16px;}

/* RESPONSIVE */
@media(max-width:960px){
  .hero-inner{grid-template-columns:1fr;}
  .hero-visual,.hero-cards{display:none;}
  .hero h1{font-size:2.3rem;}
  .grid-2{grid-template-columns:1fr;}
  .grid-3{grid-template-columns:1fr;}
  .three-col{grid-template-columns:1fr;}
  .vitamine-grid{grid-template-columns:1fr;}
  .stats-row{grid-template-columns:1fr;}
  .produkt-full-grid{grid-template-columns:1fr;}
  .qualitaet-grid{grid-template-columns:repeat(2,1fr);}
  .dr-profil{grid-template-columns:1fr;}
  .dr-profil-visual{position:static;}
  .methode-grid{grid-template-columns:1fr;}
  .steps-timeline{grid-template-columns:repeat(2,1fr);}
  .ablauf-steps{grid-template-columns:repeat(2,1fr);}
  .kontakt-grid{grid-template-columns:1fr;}
  .footer-inner{grid-template-columns:1fr 1fr;}
  .footer-bottom{flex-direction:column;gap:8px;text-align:center;}
  .nav-links{display:none;}
  .section-title{font-size:1.72rem;}
  .page-hero h1{font-size:2rem;}
  .produkte-grid{grid-template-columns:repeat(2,1fr);}
  .arzt-grid{grid-template-columns:1fr;}
  .wunderwerk-grid{grid-template-columns:1fr;}
}
@media(max-width:600px){
  .produkte-grid{grid-template-columns:1fr;}
  .form-row{grid-template-columns:1fr;}
  .qualitaet-grid{grid-template-columns:1fr;}
  .steps-timeline{grid-template-columns:1fr;}
  .footer-inner{grid-template-columns:1fr;}
  .ablauf-steps{grid-template-columns:1fr;}
  .hero h1{font-size:1.95rem;}
}

/* ADDITIONAL */
.lead{font-size:1.05rem;color:var(--gray);line-height:1.72;max-width:600px;}
.card-gold-top{border-top:3px solid var(--blue);}
section{padding:80px 0;}
section.off-section{background:var(--off);}
section .container{position:relative;}

/* IMAGE GALLERIES — responsive */
@media(max-width:820px){
  .img-gallery-3{grid-template-columns:1fr 1fr !important;}
  .img-gallery-4{grid-template-columns:1fr 1fr !important;}
  .img-gallery-bento{grid-template-columns:1fr !important;}
}
@media(max-width:560px){
  .img-gallery-3{grid-template-columns:1fr !important;}
  .img-gallery-4{grid-template-columns:1fr 1fr !important;}
}


/* =============================================
   HERO — Video Background
   ============================================= */
.v-hero {
  position: relative;
  min-height: 92vh;
  display: flex;
  align-items: center;
  overflow: hidden;
  background: var(--dark);
}
.v-hero-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
  opacity: 0.38;
}
.v-hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(8,21,42,0.92) 0%, rgba(8,21,42,0.6) 60%, rgba(23,98,217,0.18) 100%);
  z-index: 1;
}
.v-hero-content {
  position: relative;
  z-index: 2;
  max-width: 1160px;
  margin: 0 auto;
  padding: 120px 40px 100px;
  width: 100%;
}
.v-tag {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(147, 189, 255, 0.9);
  margin-bottom: 20px;
}
.v-hero-h1 {
  font-size: 5rem;
  font-weight: 800;
  color: #fff;
  line-height: 1.02;
  margin-bottom: 24px;
  letter-spacing: -0.03em;
  max-width: 640px;
}
.v-accent {
  color: #93BDFF;
}
.v-hero-sub {
  font-size: 1.05rem;
  color: rgba(255, 255, 255, 0.68);
  max-width: 520px;
  line-height: 1.72;
  margin-bottom: 40px;
}
.v-hero-actions {
  display: flex;
  gap: 14px;
  align-items: center;
  flex-wrap: wrap;
  margin-bottom: 56px;
}
.btn-ghost-white {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 13px 24px;
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 7px;
  color: rgba(255, 255, 255, 0.82);
  font-size: 0.88rem;
  font-weight: 600;
  text-decoration: none;
  transition: border-color 0.18s, background 0.18s;
}
.btn-ghost-white:hover {
  border-color: rgba(255, 255, 255, 0.5);
  background: rgba(255, 255, 255, 0.06);
  color: #fff;
}
.btn-ghost {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 12px 24px;
  border: 1px solid var(--border);
  border-radius: 7px;
  color: var(--gray);
  font-size: 0.88rem;
  font-weight: 600;
  text-decoration: none;
  transition: border-color 0.18s, color 0.18s;
}
.btn-ghost:hover {
  border-color: var(--blue);
  color: var(--blue);
}
.v-hero-meta {
  display: flex;
  align-items: center;
  gap: 32px;
  padding-top: 32px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}
.v-meta-item {
  display: flex;
  align-items: baseline;
  gap: 8px;
}
.v-meta-num {
  font-size: 1.5rem;
  font-weight: 800;
  color: #fff;
  line-height: 1;
  white-space: nowrap;
}
.v-meta-label {
  font-size: 0.76rem;
  color: rgba(255, 255, 255, 0.45);
  line-height: 1.35;
}
.v-meta-sep {
  width: 1px;
  height: 36px;
  background: rgba(255, 255, 255, 0.12);
  flex-shrink: 0;
}

/* =============================================
   TRUST BAR
   ============================================= */
.v-trust {
  background: var(--off);
  border-bottom: 1px solid var(--border);
  padding: 16px 0;
}
.v-trust-inner {
  display: flex;
  align-items: center;
  gap: 0;
  flex-wrap: wrap;
  justify-content: center;
}
.v-trust-item {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 0.81rem;
  font-weight: 600;
  color: var(--gray);
  padding: 6px 18px;
}
.v-trust-dot {
  width: 4px;
  height: 4px;
  background: var(--border);
  border-radius: 50%;
  flex-shrink: 0;
}

/* =============================================
   FUER WEN SECTION
   ============================================= */
.fuerwen-section {
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 600px;
}
.fuerwen-img-col {
  position: relative;
  overflow: hidden;
}
.fuerwen-img-col img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.fuerwen-caption {
  position: absolute;
  bottom: 24px;
  left: 24px;
  right: 24px;
  background: rgba(8, 21, 42, 0.82);
  border-radius: 8px;
  padding: 16px 20px;
  backdrop-filter: blur(6px);
}
.fuerwen-caption-label {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #93BDFF;
  margin-bottom: 5px;
}
.fuerwen-caption-text {
  font-size: 0.88rem;
  color: rgba(255, 255, 255, 0.8);
  line-height: 1.5;
}
.fuerwen-text-col {
  padding: 72px 64px;
  background: var(--white);
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.fuerwen-list {
  display: flex;
  flex-direction: column;
  gap: 0;
}
.fuerwen-list-item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 0;
  border-bottom: 1px solid var(--border);
  font-size: 0.93rem;
  font-weight: 600;
  color: var(--dark);
}
.fuerwen-dot {
  width: 7px;
  height: 7px;
  background: var(--blue);
  border-radius: 50%;
  flex-shrink: 0;
}

/* =============================================
   STATS SECTION (dark)
   ============================================= */
.stats-section {
  background: var(--dark);
  padding: 72px 0;
}
.stats-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2px;
  margin-top: 44px;
}
.stat-item {
  padding: 36px 32px;
  border: 1px solid rgba(255, 255, 255, 0.07);
  text-align: center;
}
.stat-number {
  font-size: 3.2rem;
  font-weight: 800;
  color: #fff;
  line-height: 1;
  margin-bottom: 10px;
  letter-spacing: -0.03em;
}
.stat-text {
  font-size: 0.84rem;
  color: rgba(255, 255, 255, 0.45);
  line-height: 1.5;
  max-width: 180px;
  margin: 0 auto;
}

/* =============================================
   SPLIT SECTIONS
   ============================================= */
.v-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 72px;
  align-items: center;
  padding: 80px 0;
}
.v-split-rev {
  direction: rtl;
}
.v-split-rev > * {
  direction: ltr;
}
.v-split-text {
  display: flex;
  flex-direction: column;
  gap: 0;
}
.v-split-visual {
  border-radius: 12px;
  overflow: hidden;
}
.v-split-visual img,
.v-split-visual video {
  width: 100%;
  display: block;
  object-fit: cover;
}

/* =============================================
   FULL VIDEO (dark background)
   ============================================= */
.v-fullvid {
  position: relative;
  overflow: hidden;
  padding: 100px 0;
}
.v-fullvid video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
  opacity: 0.3;
}
.v-fullvid-overlay {
  position: absolute;
  inset: 0;
  background: rgba(8, 21, 42, 0.78);
  z-index: 1;
}
.v-fullvid-quote {
  position: relative;
  z-index: 2;
}
.v-quote {
  font-size: 1.6rem;
  color: #fff;
  font-style: italic;
  line-height: 1.5;
  font-weight: 400;
  margin-bottom: 16px;
}
.v-dr-badge {
  display: inline-flex;
  flex-direction: column;
  gap: 2px;
}
.v-dr-badge-label {
  font-size: 0.86rem;
  color: rgba(255, 255, 255, 0.55);
}
.v-dr-badge-sub {
  font-size: 0.76rem;
  color: rgba(255, 255, 255, 0.35);
}

/* =============================================
   BENTO GRID
   ============================================= */
.bento-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  grid-template-rows: 260px 260px;
  gap: 12px;
}
.bento-large {
  grid-row: span 2;
  border-radius: 12px;
  overflow: hidden;
  position: relative;
}
.bento-sm {
  border-radius: 12px;
  overflow: hidden;
  position: relative;
}
.bento-large img,
.bento-sm img,
.bento-large video,
.bento-sm video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.bento-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: linear-gradient(to top, rgba(8,21,42,0.72) 0%, transparent 100%);
  padding: 20px 18px 16px;
}
.bento-overlay-label {
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #93BDFF;
  margin-bottom: 3px;
}
.bento-overlay-text {
  font-size: 0.85rem;
  font-weight: 700;
  color: #fff;
}

/* =============================================
   PRAXIS ROW
   ============================================= */
.praxis-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-top: 12px;
}
.praxis-img {
  border-radius: 10px;
  overflow: hidden;
  aspect-ratio: 16/9;
}
.praxis-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* =============================================
   PRAEPARATE PREVIEW GRID
   ============================================= */
.v-praep-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-top: 36px;
}
.v-praep-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 24px;
  transition: box-shadow 0.2s, transform 0.2s;
  text-decoration: none;
}
.v-praep-card:hover {
  box-shadow: 0 6px 28px rgba(23, 98, 217, 0.1);
  transform: translateY(-2px);
}
.v-praep-tag {
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--blue);
  margin-bottom: 8px;
}
.v-praep-name {
  font-size: 1.02rem;
  font-weight: 700;
  color: var(--dark);
  margin-bottom: 8px;
}
.v-praep-body {
  font-size: 0.84rem;
  color: var(--gray);
  line-height: 1.6;
}

/* =============================================
   PROCESS STEPS
   ============================================= */
.v-process {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  margin-top: 44px;
}
.v-process-step {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.v-process-num {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: var(--blue);
}
.v-process-title {
  font-size: 0.96rem;
  font-weight: 700;
  color: var(--dark);
}
.v-process-text {
  font-size: 0.86rem;
  color: var(--gray);
  line-height: 1.62;
}
.v-process-sub {
  font-size: 0.76rem;
  color: var(--blue);
  font-weight: 600;
}

/* =============================================
   VIDEO CARD
   ============================================= */
.v-video-card {
  border-radius: 12px;
  overflow: hidden;
  position: relative;
}
.v-video-card video {
  width: 100%;
  display: block;
  max-height: 420px;
  object-fit: cover;
}
.v-video-caption {
  padding: 20px 24px;
  background: var(--dark);
}
.v-video-caption-tag {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #93BDFF;
  margin-bottom: 6px;
}
.v-video-caption-text {
  font-size: 0.9rem;
  color: rgba(255, 255, 255, 0.65);
  line-height: 1.55;
}

/* =============================================
   CTA DARK
   ============================================= */
.cta-dark {
  background: var(--dark);
  padding: 80px 0;
  text-align: center;
}
.cta-footer-info {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-size: 0.82rem;
  color: rgba(255, 255, 255, 0.35);
  margin-top: 20px;
}
.btn-phone-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 13px 22px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 7px;
  color: rgba(255, 255, 255, 0.7);
  font-size: 0.87rem;
  font-weight: 600;
  text-decoration: none;
  transition: border-color 0.18s, color 0.18s;
}
.btn-phone-cta:hover {
  border-color: rgba(255, 255, 255, 0.4);
  color: #fff;
}

/* =============================================
   RESPONSIVE OVERRIDES
   ============================================= */
@media (max-width: 960px) {
  .v-hero-h1 { font-size: 3rem; }
  .v-hero-content { padding: 80px 24px 70px; }
  .fuerwen-section { grid-template-columns: 1fr; }
  .fuerwen-img-col { min-height: 360px; }
  .fuerwen-text-col { padding: 48px 24px; }
  .stats-grid { grid-template-columns: 1fr; gap: 0; }
  .bento-grid {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto;
  }
  .bento-large { grid-row: span 1; aspect-ratio: 16/9; }
  .praxis-row { grid-template-columns: 1fr 1fr; }
  .v-praep-grid { grid-template-columns: 1fr 1fr; }
  .v-process { grid-template-columns: repeat(2, 1fr); }
  .v-hero-meta { flex-wrap: wrap; gap: 20px; }
  .v-split { grid-template-columns: 1fr; gap: 40px; }
  .v-split-rev { direction: ltr; }
}
@media (max-width: 600px) {
  .v-hero-h1 { font-size: 2.3rem; }
  .v-hero-content { padding: 60px 20px 50px; }
  .bento-grid { grid-template-columns: 1fr; grid-template-rows: auto; }
  .praxis-row { grid-template-columns: 1fr; }
  .v-praep-grid { grid-template-columns: 1fr; }
  .v-process { grid-template-columns: 1fr; }
  .v-trust-inner { gap: 4px; }
  .v-trust-dot { display: none; }
  .stat-number { font-size: 2.4rem; }
}

/* PATCH: v-quote on light bg, v-dr-badge positioning */
.v-quote {
  font-size: 1.15rem;
  color: var(--dark);
  font-style: italic;
  line-height: 1.65;
  border-left: 3px solid var(--blue);
  padding-left: 20px;
  margin-top: 24px;
}
.v-quote cite {
  display: block;
  font-size: 0.78rem;
  color: var(--gray2);
  font-style: normal;
  margin-top: 10px;
}
.v-fullvid .v-quote {
  color: rgba(255,255,255,0.9);
  border-left-color: rgba(255,255,255,0.3);
}
.v-dr-badge {
  position: absolute;
  bottom: 18px;
  right: 18px;
  background: rgba(8,21,42,0.82);
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: 7px;
  padding: 10px 16px;
  text-align: right;
  backdrop-filter: blur(4px);
}
.v-dr-badge-label {
  font-size: 1.1rem;
  font-weight: 800;
  color: #fff;
}
.v-dr-badge-sub {
  font-size: 0.72rem;
  color: rgba(255,255,255,0.5);
  font-weight: 600;
  letter-spacing: 0.06em;
}


/* v-fullvid fix */
.v-fullvid {
  position: relative;
  min-height: 460px;
  display: flex;
  align-items: center;
  overflow: hidden;
  background: var(--dark);
}
.v-fullvid video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
  opacity: 0.32;
}
.v-fullvid-overlay {
  position: absolute;
  inset: 0;
  background: rgba(8,21,42,0.72);
  z-index: 1;
  display: flex;
  align-items: center;
}
.v-fullvid-quote {
  font-size: 1.55rem;
  color: rgba(255,255,255,0.92);
  font-style: italic;
  line-height: 1.58;
  font-weight: 400;
  max-width: 740px;
  border-left: 3px solid rgba(147,189,255,0.5);
  padding-left: 28px;
  margin: 0;
}
.v-fullvid-quote cite {
  display: block;
  font-size: 0.82rem;
  color: rgba(255,255,255,0.38);
  font-style: normal;
  margin-top: 16px;
  letter-spacing: 0.04em;
}

/* Mobile nav */
.nav-hamburger {
  display: none;
  flex-direction: column;
  gap: 5px;
  cursor: pointer;
  padding: 6px;
  background: none;
  border: none;
  z-index: 200;
}
.nav-hamburger span {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--dark);
  border-radius: 2px;
  transition: transform 0.22s, opacity 0.18s;
}
.nav-hamburger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-hamburger.open span:nth-child(2) { opacity: 0; }
.nav-hamburger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.nav-mobile-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(8,21,42,0.96);
  z-index: 150;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0;
}
.nav-mobile-overlay.open {
  display: flex;
}
.nav-mobile-overlay a {
  font-size: 1.5rem;
  font-weight: 700;
  color: rgba(255,255,255,0.85);
  padding: 18px 0;
  border-bottom: 1px solid rgba(255,255,255,0.07);
  width: 100%;
  text-align: center;
  text-decoration: none;
  transition: color 0.18s;
}
.nav-mobile-overlay a:hover { color: #93BDFF; }
.nav-mobile-overlay a.nav-cta-mobile {
  margin-top: 24px;
  border: 2px solid var(--blue);
  border-radius: 8px;
  padding: 16px 40px;
  color: #fff;
  font-size: 1.1rem;
  width: auto;
  border-bottom: 2px solid var(--blue);
  background: var(--blue);
}
.nav-mobile-close {
  position: absolute;
  top: 20px;
  right: 20px;
  background: none;
  border: none;
  color: rgba(255,255,255,0.5);
  font-size: 1.8rem;
  cursor: pointer;
  line-height: 1;
}

@media(max-width:960px) {
  .nav-hamburger { display: flex; }
  .nav-links { display: none !important; }

  /* fullvid smaller on mobile */
  .v-fullvid { min-height: 320px; }
  .v-fullvid-quote { font-size: 1.1rem; padding-left: 18px; }

  /* stat item less padding on mobile */
  .stat-item { padding: 36px 28px; }
}
@media(max-width:600px) {
  .v-fullvid { min-height: 260px; }
  .v-fullvid-quote { font-size: 1rem; }
  .stat-item { padding: 28px 20px; }
  .v-meta-sep { display: none; }
  .v-hero-meta { flex-direction: column; gap: 12px; align-items: flex-start; }
  .v-meta-item { gap: 10px; }
}


/* ======================================================
   MOBILE-FIRST — ebenbürdiges Design für alle Screens
   ====================================================== */

/* 1 ─ FORCE SECTION PADDING via !important (inline styles override) */
@media (max-width: 820px) {
  section[style*="padding:100px"],
  section[style*="padding: 100px"] {
    padding-top: 56px !important;
    padding-bottom: 56px !important;
  }
  section[style*="padding:80px"],
  section[style*="padding: 80px"] {
    padding-top: 48px !important;
    padding-bottom: 48px !important;
  }
  section[style*="padding:72px"],
  section[style*="padding: 72px"] {
    padding-top: 44px !important;
    padding-bottom: 44px !important;
  }
  section[style*="padding:48px"],
  section[style*="padding: 48px"] {
    padding-top: 36px !important;
    padding-bottom: 36px !important;
  }
  .content-section { padding: 48px 0 !important; }
  .cta-dark        { padding: 60px 0 !important; }
  .stats-section   { padding: 0 !important; }
}

/* 2 ─ CONTAINER */
@media (max-width: 820px) {
  .container { padding: 0 20px; }
}

/* 3 ─ HERO — bleibt imposant auf Mobile */
@media (max-width: 820px) {
  .v-hero { min-height: 90vh; }
  .v-hero-content {
    padding: 100px 24px 60px;
    display: flex;
    flex-direction: column;
  }
  .v-hero-h1 {
    font-size: clamp(2.4rem, 9vw, 3.2rem);
    letter-spacing: -0.035em;
    line-height: 1.0;
    margin-bottom: 18px;
  }
  .v-tag { font-size: 0.68rem; margin-bottom: 16px; }
  .v-hero-sub {
    font-size: 0.96rem;
    line-height: 1.68;
    margin-bottom: 32px;
    max-width: 100%;
  }
  .v-hero-actions {
    flex-direction: column;
    gap: 10px;
    margin-bottom: 40px;
  }
  .v-hero-actions .btn-primary,
  .v-hero-actions .btn-ghost-white {
    width: 100%;
    text-align: center;
    justify-content: center;
    padding: 15px 20px !important;
    font-size: 0.95rem;
  }
  .v-hero-meta {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 16px 24px;
    padding-top: 24px;
  }
  .v-meta-sep { display: none; }
  .v-meta-num { font-size: 1.2rem; }
  .v-meta-label { font-size: 0.7rem; }
}

/* 4 ─ TRUST BAR — horizontal scroll */
@media (max-width: 820px) {
  .v-trust { padding: 0; border-bottom: 1px solid var(--border); }
  .v-trust-inner {
    flex-wrap: nowrap;
    overflow-x: auto;
    justify-content: flex-start;
    padding: 12px 20px;
    gap: 0;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .v-trust-inner::-webkit-scrollbar { display: none; }
  .v-trust-item {
    white-space: nowrap;
    flex-shrink: 0;
    padding: 4px 14px;
    font-size: 0.78rem;
  }
  .v-trust-dot { flex-shrink: 0; }
}

/* 5 ─ FÜR WEN — mobile stack */
@media (max-width: 820px) {
  .fuerwen-section {
    grid-template-columns: 1fr !important;
    min-height: auto !important;
  }
  .fuerwen-img-col img {
    min-height: 300px !important;
    max-height: 360px !important;
  }
  .fuerwen-text-col {
    padding: 40px 20px !important;
  }
  .fuerwen-caption { padding: 20px !important; }
  .fuerwen-caption-text { font-size: 0.88rem !important; }
}

/* 6 ─ SECTION TITLES — mobile scale */
@media (max-width: 820px) {
  .section-title {
    font-size: clamp(1.5rem, 6vw, 2rem) !important;
    line-height: 1.15 !important;
  }
  .section-sub { font-size: 0.9rem; }
  .page-hero h1 {
    font-size: clamp(1.8rem, 7vw, 2.4rem) !important;
    line-height: 1.1 !important;
  }
  .page-hero { padding: 52px 0 44px !important; }
  .page-hero-inner { padding: 0 20px !important; }
}

/* 7 ─ STATS — mobile single column, big numbers */
@media (max-width: 820px) {
  .stats-grid {
    grid-template-columns: 1fr !important;
    gap: 0 !important;
  }
  .stat-item {
    padding: 36px 24px !important;
    text-align: left;
    border-bottom: 1px solid rgba(255,255,255,0.07);
  }
  .stat-item:last-child { border-bottom: none; }
  .stat-number {
    font-size: clamp(2.4rem, 8vw, 3.2rem) !important;
  }
  .stat-text { max-width: 100% !important; text-align: left !important; }
}

/* 8 ─ V-SPLIT — visual before text on mobile */
@media (max-width: 820px) {
  .v-split, .v-split-rev {
    grid-template-columns: 1fr !important;
    direction: ltr !important;
    gap: 32px !important;
  }
  .v-split-rev > *:first-child { order: 2; }
  .v-split-rev > *:last-child  { order: 1; }
  .v-split-text { gap: 12px; }
}

/* 9 ─ BENTO GRID — 2 cols on mobile */
@media (max-width: 820px) {
  .bento-grid {
    grid-template-columns: 1fr 1fr !important;
    grid-template-rows: 180px 180px 180px !important;
    gap: 8px !important;
  }
  .bento-large {
    grid-column: span 2 !important;
    grid-row: span 1 !important;
    min-height: 220px;
  }
  .bento-sm { min-height: 180px; }
  .bento-overlay-text { font-size: 0.82rem; }
}
@media (max-width: 820px) {
  .praxis-row {
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
  }
  .praxis-row .praxis-img:last-child { display: none; }
}

/* 10 ─ PRÄPARATE GRID — 2 cols */
@media (max-width: 820px) {
  .v-praep-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 10px !important;
  }
  .v-praep-card { padding: 0 !important; }
  .v-praep-body { padding: 14px !important; }
  .v-praep-name { font-size: 0.88rem !important; }
}

/* 11 ─ PROCESS STEPS — 2 cols on mobile */
@media (max-width: 820px) {
  .v-process {
    grid-template-columns: 1fr 1fr !important;
    gap: 24px 16px !important;
  }
  .v-process-num { font-size: 0.68rem; }
  .v-process-title { font-size: 0.9rem; }
  .v-process-text { font-size: 0.82rem; }
}

/* 12 ─ FULLVID — mobile aspect */
@media (max-width: 820px) {
  .v-fullvid { min-height: 280px !important; }
  .v-fullvid-quote {
    font-size: 1rem !important;
    padding-left: 16px !important;
  }
}

/* 13 ─ DARK GRID (Brücke section) */
@media (max-width: 820px) {
  div[style*="grid-template-columns:1fr 1fr"] {
    display: flex !important;
    flex-direction: column !important;
    gap: 32px !important;
  }
}

/* 14 ─ CTA DARK — mobile buttons */
@media (max-width: 820px) {
  .cta-dark .container > div[style*="flex"] {
    flex-direction: column !important;
  }
  .cta-dark .btn-primary,
  .cta-dark .btn-phone-cta {
    width: 100% !important;
    justify-content: center !important;
    text-align: center !important;
  }
  .cta-footer-info {
    flex-direction: column !important;
    gap: 8px !important;
    align-items: center !important;
  }
}

/* 15 ─ INNER PAGE GRIDS — praeparate, arzt, etc. */
@media (max-width: 820px) {
  .grid-2 { grid-template-columns: 1fr !important; gap: 32px !important; }
  .grid-3 { grid-template-columns: 1fr !important; gap: 16px !important; }
  .three-col { grid-template-columns: 1fr !important; }
  .produkte-grid { grid-template-columns: repeat(2, 1fr) !important; }
  .steps-timeline { grid-template-columns: 1fr 1fr !important; }
  .vitamine-grid { grid-template-columns: 1fr !important; }
}

/* 16 ─ INTERNAL LINK GRIDS — 2 cols on mobile */
@media (max-width: 820px) {
  div[style*="grid-template-columns:repeat(4,1fr)"] {
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
  }
  div[style*="grid-template-columns:repeat(3,1fr)"] {
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
  }
}

/* 17 ─ BUTTONS — full width on narrow screens */
@media (max-width: 480px) {
  .cta-actions {
    flex-direction: column;
    align-items: stretch;
  }
  .cta-actions .btn-primary,
  .cta-actions .btn-secondary {
    text-align: center;
  }
  /* Beratung form */
  .form-row { grid-template-columns: 1fr !important; }
}

/* 18 ─ FOOTER */
@media (max-width: 820px) {
  .footer-inner { grid-template-columns: 1fr 1fr !important; gap: 28px !important; }
}
@media (max-width: 480px) {
  .footer-inner { grid-template-columns: 1fr !important; }
  .footer-bottom { flex-direction: column; gap: 8px; text-align: center; font-size: 0.72rem; }
}

/* 19 ─ INFUSION PAGE — mobile grid */
@media (max-width: 820px) {
  div[style*="grid-template-columns:repeat(3,1fr)"][style*="gap:16px"] {
    grid-template-columns: 1fr !important;
  }
}

/* 20 ─ BERATUNG — photo grid */
@media (max-width: 820px) {
  div[style*="grid-template-columns:1.6fr 1fr 1fr"] {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }
  div[style*="grid-template-columns:1.6fr 1fr 1fr"] > div:not(:first-child) {
    display: none !important;
  }
}

/* 21 ─ TYPOGRAPHY — reading comfort mobile */
@media (max-width: 820px) {
  p, .section-sub { line-height: 1.72; }
  body { font-size: 15px; }
  h2 { line-height: 1.15; }
  .dr-profil { grid-template-columns: 1fr !important; }
  .dr-profil-visual { position: static !important; }
  .dr-initial { font-size: 3.5rem; }
}

/* 22 ─ VIDEO — proper display on mobile */
@media (max-width: 820px) {
  .v-video-card video { max-height: 240px !important; }
  video[style*="max-height:480px"] { max-height: 260px !important; }
  video[style*="max-height:420px"] { max-height: 240px !important; }
}

/* 23 ─ CARD SHADOWS reduced on mobile (perf) */
@media (max-width: 820px) {
  .card:hover { transform: none; }
  .v-praep-card:hover { transform: none; }
}

/* 24 ─ OVERFLOW PROTECTION */
@media (max-width: 820px) {
  body { overflow-x: hidden; }
  .v-hero, .fuerwen-section { overflow: hidden; }
}