/* Philosophie – Ergänzungen zu zahnimplantate.css. Stand 12.09.2026 */

/* Kapitel 01: vier Schritte statt fünf */
.lp-steps.steps-4{grid-template-columns:repeat(4,1fr);}
.lp-step{background:var(--card); border-color:var(--rule);}
.lp-step .num{color:var(--accent);}
.lp-step .dur{color:var(--dim);}
.lp-step p{color:var(--dim);}
@media (max-width:1000px){ .lp-steps.steps-4{grid-template-columns:repeat(2,1fr);} }
@media (max-width:560px){ .lp-steps.steps-4{grid-template-columns:1fr;} }

/* Kapitel 03: Haltungs-Karten */
.stance{display:grid; grid-template-columns:repeat(3,1fr); gap:18px;}
.stance > div{border:1px solid var(--rule); border-radius:var(--radius-md); padding:26px 24px 28px; background:var(--card);}
.stance b{display:block; font:500 30px/1 'Fraunces',serif; color:var(--accent); letter-spacing:-.02em;}
.stance strong{display:block; font:600 15px 'Inter',sans-serif; color:var(--fg-strong); margin:12px 0 8px;}
.stance p{font-size:14.5px; color:var(--dim); line-height:1.6;}
@media (max-width:760px){ .stance{grid-template-columns:1fr;} }

/* Kapitel 04: Technik-Kacheln */
.techs{display:grid; grid-template-columns:repeat(4,1fr); gap:18px;}
.techs a{display:block; text-decoration:none; color:inherit; border:1px solid var(--rule); border-radius:var(--radius-md); background:var(--card); overflow:hidden; transition:transform .25s ease, border-color .25s ease;}
.techs a:hover{transform:translateY(-3px); border-color:var(--accent);}
.techs img{width:100%; aspect-ratio:1/1; object-fit:cover; display:block; background:var(--bg3);}
.techs .tb{padding:20px 20px 24px;}
.techs .instead{display:block; font:600 11.5px 'Inter',sans-serif; letter-spacing:.14em; text-transform:uppercase; color:var(--accent); margin-bottom:10px;}
.techs h3{font-size:19px; margin-bottom:8px;}
.techs p{font-size:14px; color:var(--dim); line-height:1.6;}
@media (max-width:900px){ .techs{grid-template-columns:1fr 1fr;} }
@media (max-width:520px){ .techs{grid-template-columns:1fr;} }

/* Kapitel 05: Angst, Sprache, Zeit */
.hurdles{display:grid; grid-template-columns:repeat(3,1fr); gap:0; border:1px solid var(--rule); border-radius:var(--radius-lg); overflow:hidden; background:var(--card);}
.hurdles > div{padding:30px 28px 34px; border-left:1px solid var(--rule);}
.hurdles > div:first-child{border-left:0;}
.hurdles .ph{display:flex; align-items:center; gap:10px; font:600 11.5px 'Inter',sans-serif; letter-spacing:.16em; text-transform:uppercase; color:var(--accent);}
.hurdles .ph::before{content:""; width:18px; height:1.5px; background:var(--accent);}
.hurdles h3{font-size:23px; margin:12px 0 12px;}
.hurdles p{font-size:14.5px; color:var(--dim); line-height:1.65; margin-bottom:10px;}
.hurdles a.more{font:600 13.5px 'Inter',sans-serif; color:var(--accent); text-decoration:none; border-bottom:1px solid transparent;}
.hurdles a.more:hover{border-bottom-color:currentColor;}
@media (max-width:900px){ .hurdles{grid-template-columns:1fr;} .hurdles > div{border-left:0; border-top:1px solid var(--rule);} .hurdles > div:first-child{border-top:0;} }

/* Zitat des Praxisgründers */
.credo-quote{display:grid; grid-template-columns:.75fr 1.25fr; gap:52px; align-items:center; margin-top:70px; padding-top:60px; border-top:1px solid var(--rule);}
.credo-quote figure{border-radius:var(--radius-lg); overflow:hidden; aspect-ratio:4/5; background:var(--bg3);}
.credo-quote img{width:100%; height:100%; object-fit:cover; display:block;}
.credo-quote blockquote{font:500 clamp(1.3rem,2.2vw,1.85rem)/1.32 'Fraunces',serif; color:var(--fg-strong); margin-bottom:20px;}
.credo-quote .who{font:600 12px 'Inter',sans-serif; letter-spacing:.14em; text-transform:uppercase; color:var(--dim);}
.credo-quote p{color:var(--dim); font-size:15.5px; margin-top:16px;}
@media (max-width:900px){ .credo-quote{grid-template-columns:1fr; gap:26px; margin-top:44px; padding-top:40px;} .credo-quote figure{aspect-ratio:4/3;} }

/* Kapitel 02: Bild + Punkte */
.anat .part b{font:500 34px/1 'Fraunces',serif; color:var(--num); letter-spacing:-.02em;}

/* Hero-Ausschnitt: Beraterin rechts, Schrift links frei */
.imp-hero-bg{object-position:25% 50%;}
@media (max-width:900px){ .imp-hero-bg{object-position:62% 45%;} }