/* ===== Mibaut Startseite ===== */

/* Hero */
.hero{background:linear-gradient(180deg,var(--bg-soft),#fff);border-bottom:1px solid var(--line);overflow:hidden}
.hero-grid{display:grid;grid-template-columns:1.05fr 1fr;gap:48px;align-items:center;max-width:var(--maxw);margin:0 auto;padding:64px 24px}
.hero-eyebrow{font-family:'Montserrat';font-weight:700;font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;color:var(--blau);display:inline-flex;align-items:center;gap:10px;margin-bottom:18px}
.hero-eyebrow::before{content:"";width:30px;height:2px;background:var(--gold)}
.hero h1{font-size:clamp(2.1rem,4.4vw,3.3rem);line-height:1.08;margin:0 0 18px}
.hero h1 em{font-style:normal;color:var(--blau)}
.hero-lead{font-size:1.1rem;color:var(--text-soft);max-width:30em;margin:0 0 28px}
.hero-cta{display:flex;gap:14px;flex-wrap:wrap;margin-bottom:26px}
.hero-mini{display:flex;gap:22px;flex-wrap:wrap;font-size:.86rem;color:var(--text-soft)}
.hero-mini span{display:flex;align-items:center;gap:7px}
.hero-mini .ic{color:var(--blau)}
.hero-media{position:relative}

/* Foto-Platzhalter (überall wiederverwendbar) */
.ph{position:relative;background:var(--bg-muted);border:1px dashed #c4ccd6;border-radius:var(--radius-lg);display:grid;place-items:center;color:var(--text-mute);overflow:hidden}
.ph::after{content:"";position:absolute;inset:0;background-image:linear-gradient(var(--line-soft) 1px,transparent 1px),linear-gradient(90deg,var(--line-soft) 1px,transparent 1px);background-size:30px 30px;opacity:.5;pointer-events:none}
.ph .ph-label{position:relative;z-index:1;font-family:'Montserrat';font-weight:600;font-size:.82rem;letter-spacing:.04em;text-align:center;padding:8px 14px;background:rgba(255,255,255,.7);border-radius:8px}
.hero-media .ph{aspect-ratio:4/3}

/* Section-Grundlagen */
.section{max-width:var(--maxw);margin:0 auto;padding:64px 24px}
.section-head{text-align:center;max-width:42em;margin:0 auto 44px}
.section-head .eyebrow{font-family:'Montserrat';font-weight:700;font-size:.76rem;letter-spacing:.14em;text-transform:uppercase;color:var(--blau);display:block;margin-bottom:12px}
.section-head h2{font-size:clamp(1.7rem,3.2vw,2.5rem);margin:0 0 14px}
.section-head p{color:var(--text-soft);font-size:1.04rem;margin:0}

/* Trust-Leiste */
.trustbar{background:#fff;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.trustbar-in{max-width:var(--maxw);margin:0 auto;padding:20px 24px;display:flex;gap:34px;flex-wrap:wrap;justify-content:center;align-items:center}
.trust-item{display:flex;align-items:center;gap:10px;font-size:.9rem;color:var(--text-soft)}
.trust-item .ic{width:34px;height:34px;border-radius:9px;background:var(--bg-muted);color:var(--blau);display:grid;place-items:center;flex:none}
.trust-item b{color:var(--anthrazit);font-family:'Montserrat'}
.trust-stars{color:var(--gold);display:inline-flex;gap:1px}

/* USP – Goldener Mittelweg */
.usp{background:var(--bg-soft)}
.usp-cols{display:grid;grid-template-columns:1fr 1fr 1fr;gap:20px;margin-top:8px}
.usp-card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:28px 24px;position:relative}
.usp-card.is-mibaut{border-color:var(--gold);box-shadow:var(--shadow-md);transform:translateY(-6px)}
.usp-card h3{font-size:1.12rem;margin:0 0 4px}
.usp-card .usp-tag{font-family:'Montserrat';font-weight:700;font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:var(--text-mute);margin-bottom:14px;display:block}
.usp-card.is-mibaut .usp-tag{color:var(--gold)}
.usp-card ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px;font-size:.92rem}
.usp-card li{display:flex;gap:9px;align-items:flex-start;color:var(--text-soft)}
.usp-card li .ic{flex:none;margin-top:2px}
.usp-card .ic-yes{color:#16a34a}.usp-card .ic-no{color:#cdd3db}
.usp-badge{position:absolute;top:-12px;left:50%;transform:translateX(-50%);background:var(--gold);color:var(--anthrazit);font-family:'Montserrat';font-weight:700;font-size:.72rem;padding:5px 14px;border-radius:30px;white-space:nowrap}

/* Produkte */
.prod-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px}
.prod-card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;display:flex;flex-direction:column;transition:transform .2s,box-shadow .2s;text-decoration:none;color:inherit}
.prod-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-md);border-color:var(--blau)}
.prod-card .ph{aspect-ratio:4/3;border:none;border-radius:0;border-bottom:1px solid var(--line)}
.prod-body{padding:18px 18px 20px;display:flex;flex-direction:column;gap:6px;flex:1}
.prod-body h3{font-size:1.08rem;margin:0}
.prod-body .pd{font-size:.86rem;color:var(--text-soft);flex:1}
.prod-price{display:flex;align-items:baseline;gap:8px;margin-top:6px}
.prod-price .now{font-family:'Montserrat';font-weight:800;font-size:1.18rem;color:var(--anthrazit)}
.prod-price .was{font-size:.85rem;color:var(--text-mute);text-decoration:line-through}
.prod-price .from{font-size:.78rem;color:var(--text-mute)}
.prod-badge{align-self:flex-start;background:#fef3e2;color:var(--gold-dark);font-family:'Montserrat';font-weight:700;font-size:.72rem;padding:3px 9px;border-radius:6px}
.prod-link{font-family:'Montserrat';font-weight:600;font-size:.88rem;color:var(--blau);display:inline-flex;align-items:center;gap:6px;margin-top:8px}

/* So funktioniert's */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.step{text-align:center;padding:0 12px}
.step-num{width:54px;height:54px;border-radius:50%;background:var(--blau);color:#fff;font-family:'Montserrat';font-weight:800;font-size:1.3rem;display:grid;place-items:center;margin:0 auto 16px}
.step h3{font-size:1.1rem;margin:0 0 8px}
.step p{color:var(--text-soft);font-size:.94rem;margin:0}

/* Montage & Service split */
.split{display:grid;grid-template-columns:1fr 1fr;gap:44px;align-items:center}
.split .ph{aspect-ratio:5/4}
.split h2{font-size:clamp(1.6rem,3vw,2.3rem);margin:0 0 16px}
.split p{color:var(--text-soft);margin:0 0 16px}
.split ul{list-style:none;margin:0 0 24px;padding:0;display:flex;flex-direction:column;gap:12px}
.split li{display:flex;gap:11px;align-items:flex-start}
.split li .ic{flex:none;color:var(--blau);margin-top:2px}

/* Vertrauen / Garantie */
.guarantee{background:var(--anthrazit);color:rgba(255,255,255,.8)}
.guarantee .section-head h2{color:#fff}
.guarantee .section-head p{color:rgba(255,255,255,.7)}
.guar-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px}
.guar-card{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);border-radius:var(--radius);padding:26px 22px;text-align:center}
.guar-card .ic{width:46px;height:46px;border-radius:11px;background:rgba(245,158,11,.15);color:var(--gold);display:grid;place-items:center;margin:0 auto 14px}
.guar-card h3{color:#fff;font-size:1.04rem;margin:0 0 7px}
.guar-card p{font-size:.88rem;margin:0;color:rgba(255,255,255,.65)}

/* Bewertungen */
.reviews{background:var(--bg-soft)}
.rev-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.rev-card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:24px;display:flex;flex-direction:column;gap:12px}
.rev-stars{color:var(--gold);display:inline-flex;gap:1px}
.rev-text{font-size:.94rem;color:var(--text-soft);line-height:1.6;flex:1}
.rev-author{font-family:'Montserrat';font-weight:600;font-size:.86rem;color:var(--anthrazit)}
.rev-summary{text-align:center;margin-bottom:30px;display:flex;flex-direction:column;align-items:center;gap:6px}
.rev-summary .score{font-family:'Montserrat';font-weight:800;font-size:2.4rem;color:var(--anthrazit);line-height:1}
.rev-summary .meta{font-size:.9rem;color:var(--text-soft)}

/* FAQ */
.faq-list{max-width:780px;margin:0 auto;display:flex;flex-direction:column;gap:12px}
.faq-item{background:#fff;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}
.faq-item summary{cursor:pointer;padding:18px 22px;font-family:'Montserrat';font-weight:600;font-size:1rem;color:var(--anthrazit);list-style:none;display:flex;justify-content:space-between;align-items:center;gap:12px}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::after{content:"+";font-size:1.4rem;color:var(--blau);font-weight:400;flex:none;transition:transform .2s}
.faq-item[open] summary::after{transform:rotate(45deg)}
.faq-item .faq-a{padding:0 22px 20px;color:var(--text-soft);font-size:.95rem;line-height:1.6}

/* CTA-Abschluss */
.cta{background:linear-gradient(120deg,var(--blau),var(--blau-dark));color:#fff;text-align:center}
.cta .section{padding-top:60px;padding-bottom:60px}
.cta h2{color:#fff;font-size:clamp(1.8rem,3.4vw,2.6rem);margin:0 0 14px}
.cta p{color:rgba(255,255,255,.85);font-size:1.08rem;max-width:34em;margin:0 auto 28px}
.cta .hero-cta{justify-content:center}

/* Responsive */
@media(max-width:980px){
  .prod-grid{grid-template-columns:repeat(2,1fr)}
  .guar-grid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:860px){
  .hero-grid{grid-template-columns:1fr;gap:32px;padding:44px 24px}
  .hero-media{order:-1}
  .usp-cols{grid-template-columns:1fr}
  .usp-card.is-mibaut{transform:none}
  .steps{grid-template-columns:1fr;gap:32px}
  .split{grid-template-columns:1fr;gap:28px}
  .rev-grid{grid-template-columns:1fr}
}
@media(max-width:560px){
  .prod-grid{grid-template-columns:1fr}
  .guar-grid{grid-template-columns:1fr}
  .section{padding:44px 20px}
}