/* Veneers – Ergänzungen zu zahnimplantate.css / pzr.css / labor.css (gleiche Bausteine wie Labor- und CEREC-Seite). Stand 03.10.2026 */

/* Hero: kurze Überschrift, moderate Größe, Lead begrenzt */
.vn-hero .imp-hero-bg{filter:saturate(.94);}
.vn-hero h1{font-size:clamp(2.6rem,5.2vw,4.8rem);}
.vn-hero p.lead{max-width:580px;}
.vn-hero .kpis{margin-top:44px;}
@media (max-width:640px){ .vn-hero h1{font-size:clamp(2.4rem,11vw,3rem);} }

/* Geeignet / nicht geeignet: zwei Spalten mit Häkchen bzw. Hinweis */
.vn-fit{display:grid; grid-template-columns:1fr 1fr; gap:18px;}
.vn-fit-col{background:var(--card); border:1px solid var(--rule); border-radius:var(--radius-lg); padding:30px 28px;}
:root:not([data-theme="dark"]) .vn-fit-col{background:rgba(255,253,249,.78);}
.vn-fit-col h3{font-size:22px; margin:0 0 16px;}
.vn-fit-col ul{list-style:none; margin:0; padding:0; display:grid; gap:12px;}
.vn-fit-col li{position:relative; padding-left:34px; font-size:15.5px; line-height:1.5; color:var(--fg);}
.vn-fit-col li::before{content:""; position:absolute; left:0; top:1px; width:22px; height:22px; border-radius:50%; background-position:center; background-repeat:no-repeat; background-size:14px;}
.vn-fit-col.yes li::before{background-color:rgba(31,122,77,.12); background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231F7A4D' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><path d='M5 12.5l4.5 4.5L19 7.5'/></svg>");}
.vn-fit-col.no li::before{background-color:var(--hl); background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231E56D6' stroke-width='2.5' stroke-linecap='round'><path d='M12 7v6'/><circle cx='12' cy='17' r='.8' fill='%231E56D6'/></svg>");}
.vn-fit-col li small{display:block; color:var(--dim); font-size:13.5px; margin-top:2px;}
.vn-fit-col li a{color:var(--accent);}
@media (max-width:760px){ .vn-fit{grid-template-columns:1fr; gap:12px;} .vn-fit-col{padding:20px 18px;} }

/* Kapitel 01: Veneer-Nahaufnahme zweispaltig (Muster .device der PZR-Seite), Bild links ≈ 45 % – nie auf voller Breite */
.vn-device{grid-template-columns:.9fr 1.1fr; margin-top:40px;}
.vn-device figure img{aspect-ratio:4/3; height:auto; object-fit:cover; object-position:50% 50%;}
.vn-device h3 em{font-style:italic; color:var(--accent);}
.vn-device > div > p a{color:var(--accent);}
@media (max-width:900px){ .vn-device{grid-template-columns:1fr; gap:22px; margin-top:28px;} }
@media (max-width:640px){
  .vn-device{display:grid; gap:14px; margin-top:16px;}
  .vn-device figure{border-radius:var(--r,18px); overflow:hidden; position:relative; margin:0;}
  .vn-device figure img{width:100%; display:block; aspect-ratio:16/10;}
  .vn-device figcaption{position:absolute; left:0; right:0; bottom:0; padding:12px 14px; font:500 11.5px 'Inter',sans-serif; color:rgba(255,255,255,.9); background:linear-gradient(0deg, rgba(28,25,22,.72), rgba(28,25,22,0));}
  .vn-device h3{font-size:22px; margin:8px 0 10px;} .vn-device > div > p{font-size:15px; color:var(--dim); margin-bottom:10px;}
}

/* Kapitel 03: fünf Schritte, zwei Detailbilder nebeneinander, flach beschnitten */
.vn-steps{grid-template-columns:repeat(5,1fr);}
@media (max-width:1100px){ .vn-steps{grid-template-columns:repeat(3,1fr);} }
@media (max-width:760px){ .vn-steps{grid-template-columns:1fr;} }
.vn-figs .lab-figure img{aspect-ratio:16/9; max-height:340px;}
@media (max-width:640px){ .vn-figs .lab-figure img{max-height:220px;} }

/* Varianten-Karten: Bilder im Querformat */
.lab-tech-item img.wide{aspect-ratio:3/2; height:auto;}

/* Kosten: Textblock und nummerierte Liste */
.vn-cost{display:grid; grid-template-columns:1.1fr .9fr; gap:40px; align-items:center; margin-top:28px; background:linear-gradient(160deg, #F3ECDF 0%, #EAF4F7 100%); border-radius:var(--radius-lg); padding:44px 48px;}
:root[data-theme="dark"] .vn-cost{background:var(--bg3); border:1px solid var(--rule);}
.vn-cost h3{font-size:clamp(1.6rem,2.6vw,2.2rem); margin:12px 0 12px; line-height:1.1;}
.vn-cost p{color:var(--dim); font-size:15.5px; line-height:1.6;}
.vn-cost ul{list-style:none; margin:0; padding:0; display:grid; gap:14px;}
.vn-cost li{display:grid; grid-template-columns:34px 1fr; gap:14px; align-items:start; font-size:15.5px; line-height:1.5; color:var(--fg);}
.vn-cost li b{display:grid; place-items:center; width:34px; height:34px; border-radius:50%; background:var(--card); border:1px solid var(--rule); font:500 15px 'Fraunces',serif; color:var(--accent);}
.vn-cost li small{display:block; color:var(--dim); font-size:13.5px;}
@media (max-width:900px){ .vn-cost{grid-template-columns:1fr; gap:24px; padding:28px 24px;} }
@media (max-width:640px){ .vn-cost{margin-top:14px; padding:22px 18px; border-radius:var(--r,18px);} }

/* Verweise unter den FAQ */
.vn-more{margin-top:40px;}
@media (max-width:640px){ .vn-more{margin-top:24px;} }

/* Kapitel 02: echtes Vorher-/Nachher-Foto der Praxis, zwei flache Hälften nebeneinander, nie auf voller Breite als Makro */
.vn-ba{margin-top:28px; display:grid; grid-template-columns:1fr 1fr; gap:18px;}
.vn-ba figure{margin:0; position:relative; border-radius:var(--radius-lg); overflow:hidden; background:var(--bg3);}
.vn-ba figure img{width:100%; display:block; aspect-ratio:16/9; object-fit:cover; max-height:340px;}
.vn-ba figcaption{position:absolute; left:14px; top:14px; padding:6px 12px; border-radius:999px; font:600 11.5px/1 'Inter',sans-serif; letter-spacing:.12em; text-transform:uppercase; color:#fff; background:rgba(28,25,22,.62); backdrop-filter:blur(4px);}
.vn-ba-note{margin:12px 0 0; font-size:13.5px; color:var(--dim); max-width:720px;}
@media (max-width:640px){ .vn-ba{grid-template-columns:1fr 1fr; gap:10px; margin-top:16px;} .vn-ba figure{border-radius:var(--r,18px);} .vn-ba figure img{aspect-ratio:4/3; max-height:220px;} .vn-ba figcaption{left:10px; top:10px; padding:5px 9px; font-size:10.5px;} }