/* Kronen mit CEREC – Ergänzungen zu zahnimplantate.css / pzr.css / labor.css (gleiche Bausteine wie die Laborseite). Stand 03.10.2026 */

/* Hero: Bildausschnitt etwas ruhiger, Überschrift moderater als auf Implantat-/Laborseite */
.cx-hero .imp-hero-bg{filter:saturate(.92);}
.cx-hero h1{font-size:clamp(2.6rem,5.2vw,4.8rem);}
.cx-hero p.lead{max-width:560px;}
.cx-hero .kpis{margin-top:44px;}
@media (max-width:640px){ .cx-hero h1{font-size:clamp(2.4rem,11vw,3rem);} }

/* Geeignet / nicht geeignet: zwei Spalten mit Häkchen bzw. Hinweis */
.cx-fit{display:grid; grid-template-columns:1fr 1fr; gap:18px;}
.cx-fit-col{background:var(--card); border:1px solid var(--rule); border-radius:var(--radius-lg); padding:30px 28px;}
:root:not([data-theme="dark"]) .cx-fit-col{background:rgba(255,253,249,.78);}
.cx-fit-col h3{font-size:22px; margin:0 0 16px;}
.cx-fit-col ul{list-style:none; margin:0; padding:0; display:grid; gap:12px;}
.cx-fit-col li{position:relative; padding-left:34px; font-size:15.5px; line-height:1.5; color:var(--fg);}
.cx-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;}
.cx-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>");}
.cx-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>");}
.cx-fit-col li small{display:block; color:var(--dim); font-size:13.5px; margin-top:2px;}
.cx-fit-col li a{color:var(--accent);}
@media (max-width:760px){ .cx-fit{grid-template-columns:1fr; gap:12px;} .cx-fit-col{padding:20px 18px;} }

/* Kapitel 01: Block und Krone zweispaltig (Muster .device der PZR-Seite), Bild links ≈ 45 % */
.cx-device{grid-template-columns:.9fr 1.1fr; margin-top:40px;}
.cx-device figure img{aspect-ratio:4/3; height:auto; object-fit:cover; object-position:50% 55%;}
.cx-device h3 em{font-style:italic; color:var(--accent);}
.cx-device > div > p a{color:var(--accent);}
@media (max-width:900px){ .cx-device{grid-template-columns:1fr; gap:22px; margin-top:28px;} }
@media (max-width:640px){
  .cx-device{display:grid; gap:14px; margin-top:16px;}
  .cx-device figure{border-radius:var(--r,18px); overflow:hidden; position:relative; margin:0;}
  .cx-device figure img{width:100%; display:block; aspect-ratio:16/10;}
  .cx-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));}
  .cx-device h3{font-size:22px; margin:8px 0 10px;} .cx-device > div > p{font-size:15px; color:var(--dim); margin-bottom:10px;}
}
/* Kapitel 02: zwei Detailbilder nebeneinander, flach beschnitten statt groß */
.cx-figs .lab-figure img{aspect-ratio:16/9; max-height:340px;}
@media (max-width:640px){ .cx-figs .lab-figure img{max-height:220px;} }

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

/* Kosten: Textblock und nummerierte Liste */
.cx-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"] .cx-cost{background:var(--bg3); border:1px solid var(--rule);}
.cx-cost h3{font-size:clamp(1.6rem,2.6vw,2.2rem); margin:12px 0 12px; line-height:1.1;}
.cx-cost p{color:var(--dim); font-size:15.5px; line-height:1.6;}
.cx-cost ul{list-style:none; margin:0; padding:0; display:grid; gap:14px;}
.cx-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);}
.cx-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);}
.cx-cost li small{display:block; color:var(--dim); font-size:13.5px;}
@media (max-width:900px){ .cx-cost{grid-template-columns:1fr; gap:24px; padding:28px 24px;} }
@media (max-width:640px){ .cx-cost{margin-top:14px; padding:22px 18px; border-radius:var(--r,18px);} }

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