/* Landingpage Zahnimplantate – eigene Styles, ergänzt styles.css. Stand 06.09.2026 */
/* Gemeinsame Bausteine der drei Implantat-Landingpage-Entwürfe (Stand 06.09.2026) */
:root{--lp-max:1180px;}
body{background:var(--cream); color:var(--ink); font-family:'Inter',sans-serif; -webkit-font-smoothing:antialiased;}
.lp-wrap{width:min(var(--lp-max),calc(100% - 48px)); margin:0 auto;}
h1,h2,h3,.serif{font-family:'Fraunces',serif; font-weight:500; letter-spacing:-0.01em; line-height:1.08;}
h1 em,h2 em,h3 em{font-style:italic; color:var(--blue); font-weight:500;}
p{line-height:1.7;}
.eyebrow{display:inline-flex; align-items:center; gap:10px; font:600 12.5px 'Inter',sans-serif; letter-spacing:.16em; text-transform:uppercase; color:var(--blue);}
.eyebrow::before{content:""; width:22px; height:1.5px; background:var(--blue);}

/* Buttons der Landingpage */
.lp-btn{display:inline-flex; align-items:center; justify-content:center; gap:9px; padding:14px 26px; border-radius:999px; font:600 15px 'Inter',sans-serif; text-decoration:none; cursor:pointer; border:1px solid transparent; transition:transform .25s ease, box-shadow .25s ease, background .25s ease, filter .25s ease; white-space:nowrap;}
.lp-btn svg{width:16px; height:16px; flex-shrink:0;}
.lp-btn-primary{background:var(--blue); color:#fff; box-shadow:0 14px 30px -14px rgba(30,86,214,.7);}
.lp-btn-primary:hover{transform:translateY(-2px); box-shadow:0 20px 34px -14px rgba(30,86,214,.75);}
.lp-btn-ghost{background:transparent; color:var(--ink); border-color:var(--line);}
.lp-btn-ghost:hover{background:var(--white);}
.lp-btn-light{background:var(--white); color:var(--ink); border-color:transparent;}
.lp-btn-whatsapp{background:#25D366; color:#fff;}
.lp-btn-sm{padding:11px 18px; font-size:14px;}

/* Vertrauensleiste */
.lp-trust{display:grid; grid-template-columns:repeat(4,1fr); gap:0; border:1px solid var(--line); border-radius:var(--radius-md); background:var(--white); overflow:hidden;}
.lp-trust > div{padding:18px 22px; border-left:1px solid var(--line); display:flex; gap:12px; align-items:center;}
.lp-trust > div:first-child{border-left:0;}
.lp-trust strong{display:block; font:600 14px 'Inter',sans-serif; color:var(--ink);}
.lp-trust span{font-size:12.5px; color:var(--ink-soft);}
.lp-trust svg{width:26px; height:26px; color:var(--blue); flex-shrink:0;}
.lp-trust img{width:44px; height:44px; border-radius:12px; flex-shrink:0; object-fit:cover; background:var(--cream); box-shadow:0 6px 14px -8px rgba(42,38,34,.35);}
@media (max-width:900px){ .lp-trust{grid-template-columns:1fr 1fr;} .lp-trust > div:nth-child(3){border-left:0;} .lp-trust > div:nth-child(n+3){border-top:1px solid var(--line);} }

/* Sektionen */
.lp-section{padding:96px 0;}
.lp-section-head{max-width:720px; margin-bottom:44px;}
.lp-section-head h2{font-size:clamp(2rem,4vw,3rem); margin:14px 0 16px;}
.lp-section-head p{font-size:17px; color:var(--ink-soft);}
.lp-section-head.center{margin-left:auto; margin-right:auto; text-align:center;}
.lp-section-head.center .eyebrow{justify-content:center;}

/* Schrittfolge (Behandlungsweg) */
.lp-steps{display:grid; grid-template-columns:repeat(5,1fr); gap:18px; counter-reset:step;}
.lp-step{background:var(--white); border:1px solid var(--line); border-radius:var(--radius-md); padding:24px 22px 26px; position:relative;}
.lp-step .num{font:500 42px/1 'Fraunces',serif; color:var(--blue); letter-spacing:-.02em;}
.lp-step .dur{display:inline-block; margin-top:10px; font:600 11.5px 'Inter',sans-serif; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-soft);}
.lp-step h3{font-size:20px; margin:12px 0 8px;}
.lp-step p{font-size:14.5px; color:var(--ink-soft); line-height:1.6;}
@media (max-width:1000px){ .lp-steps{grid-template-columns:repeat(2,1fr);} }
@media (max-width:560px){ .lp-steps{grid-template-columns:1fr;} }

/* FAQ */
.lp-faq{max-width:820px; margin:0 auto;}
.lp-faq details{border-top:1px solid var(--line);}
.lp-faq details:last-child{border-bottom:1px solid var(--line);}
.lp-faq summary{list-style:none; cursor:pointer; display:flex; justify-content:space-between; align-items:center; gap:20px; padding:22px 4px; font:500 20px 'Fraunces',serif; color:var(--ink);}
.lp-faq summary::-webkit-details-marker{display:none;}
.lp-faq summary::after{content:"+"; font:300 28px/1 'Fraunces',serif; color:var(--blue); transition:transform .3s ease;}
.lp-faq details[open] summary::after{transform:rotate(45deg);}
.lp-faq details p{padding:0 4px 24px; max-width:720px; color:var(--ink-soft); font-size:15.5px;}

/* Abschluss-CTA mit Kurzformular */
.lp-final{background:var(--ink); color:var(--cream); border-radius:var(--radius-lg); padding:64px; display:grid; grid-template-columns:1.1fr .9fr; gap:56px; align-items:center; position:relative; overflow:hidden;}
.lp-final::before{content:""; position:absolute; inset:auto -20% -60% auto; width:70%; aspect-ratio:1; border-radius:50%; background:radial-gradient(closest-side, rgba(66,198,222,.35), transparent 70%); pointer-events:none;}
.lp-final h2{font-size:clamp(2rem,3.6vw,2.8rem); margin:14px 0 14px; color:#fff;}
.lp-final h2 em{color:var(--blue-light);}
.lp-final p{color:rgba(246,241,232,.75); font-size:16px;}
.lp-final .eyebrow{color:var(--blue-light);} .lp-final .eyebrow::before{background:var(--blue-light);}
.lp-final-actions{display:flex; gap:12px; flex-wrap:wrap; margin-top:26px;}
.lp-form{background:rgba(255,253,249,.06); border:1px solid rgba(255,253,249,.14); border-radius:var(--radius-md); padding:26px; display:grid; gap:12px; position:relative;}
.lp-form label{display:grid; gap:6px; font:600 12px 'Inter',sans-serif; letter-spacing:.1em; text-transform:uppercase; color:rgba(246,241,232,.7);}
.lp-form input,.lp-form select{width:100%; padding:13px 14px; border-radius:12px; border:1px solid rgba(255,253,249,.18); background:rgba(255,253,249,.08); color:#fff; font:400 15px 'Inter',sans-serif;}
.lp-form input::placeholder{color:rgba(246,241,232,.4);}
.lp-form small{color:rgba(246,241,232,.55); font-size:12px; line-height:1.5;}
@media (max-width:900px){ .lp-final{grid-template-columns:1fr; padding:40px 28px;} }

/* Mobile Sticky-Leiste */
.lp-sticky{position:fixed; left:0; right:0; bottom:0; z-index:60; display:none; gap:10px; padding:10px 14px calc(10px + env(safe-area-inset-bottom)); background:rgba(255,253,249,.94); backdrop-filter:blur(12px); border-top:1px solid var(--line);}
.lp-sticky .lp-btn{flex:1; padding:13px 10px; font-size:14px;}
@media (max-width:760px){ .lp-sticky{display:flex;} body{padding-bottom:74px;} }

/* Scroll-Reveal */
.rv{opacity:0; transform:translateY(22px); transition:opacity .7s ease, transform .7s ease;}
.rv.in{opacity:1; transform:none;}
@media (prefers-reduced-motion:reduce){ .rv{opacity:1; transform:none; transition:none;} }



:root{--cream:#F6F1E8;--cream-deep:#EFE7D9;--ink:#2A2622;--ink-deep:#1C1916;--ink-soft:#726B60;--blue:#1E56D6;--blue-light:#42C6DE;--leather:#8C5A38;--line:#E1D6C3;--white:#FFFDF9;--radius-lg:28px;--radius-md:18px;}
/* Helles Thema */
:root{--bg:var(--cream);--bg2:var(--white);--bg3:var(--cream-deep);--fg:var(--ink);--fg-strong:var(--ink);--dim:var(--ink-soft);--rule:var(--line);--card:var(--white);--accent:var(--blue);--accent2:var(--blue-light);--num:rgba(42,38,34,.28);--header:rgba(246,241,232,.86);--shadow:0 40px 80px -40px rgba(42,38,34,.45);--good:#1F7A4D;--bad:#A54B2B;--hl:rgba(66,198,222,.14);--dark-panel:var(--ink);--dark-panel-fg:var(--cream);}
/* Dunkles Thema */
:root[data-theme="dark"]{--bg:var(--ink-deep);--bg2:#231F1B;--bg3:#2A2622;--fg:var(--cream);--fg-strong:#fff;--dim:rgba(246,241,232,.62);--rule:rgba(246,241,232,.14);--card:rgba(255,253,249,.04);--accent:var(--blue-light);--accent2:var(--blue-light);--num:rgba(246,241,232,.35);--header:rgba(28,25,22,.82);--shadow:0 40px 80px -40px rgba(0,0,0,.7);--good:#6FCF97;--bad:#E58F6B;--hl:rgba(66,198,222,.12);--dark-panel:var(--cream);--dark-panel-fg:var(--ink);}
*{box-sizing:border-box;margin:0;padding:0;} html{scroll-behavior:smooth;}
body{background:var(--bg); color:var(--fg);}
h1,h2,h3{color:var(--fg-strong);} h1 em,h2 em,h3 em{color:var(--accent);}
.eyebrow{color:var(--accent);} .eyebrow::before{background:var(--accent);}
.lp-header{background:var(--header); border-bottom-color:var(--rule);}
.lp-phone{background:transparent; color:var(--fg); border-color:var(--rule);}
:root[data-theme="dark"] header.scrolled{background:rgba(28,25,22,.9); border-bottom-color:var(--rule);} :root[data-theme="dark"] header .logo-text{filter:brightness(0) invert(1);} :root[data-theme="dark"] header nav.main-nav > ul > li > a, :root[data-theme="dark"] header details.nav-dropdown summary, :root[data-theme="dark"] header .header-phone, :root[data-theme="dark"] header .lang-switch summary{color:var(--cream); text-shadow:none;}
.lp-btn-ghost{color:var(--fg); border-color:var(--rule);} .lp-btn-ghost:hover{background:var(--card);}
.stars{color:#E8A13A; letter-spacing:1px;}

/* HERO */
.imp-hero{position:relative; min-height:100vh; padding-top:var(--header-h,84px); display:grid; align-items:center; overflow:hidden; background:var(--bg3);}
.imp-hero-bg{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:72% 40%;}
.imp-hero-grad{position:absolute; inset:0;}
:root:not([data-theme="dark"]) .imp-hero-grad{background:linear-gradient(90deg, rgba(246,241,232,.95) 0%, rgba(246,241,232,.82) 38%, rgba(246,241,232,0) 64%), linear-gradient(0deg, var(--cream) 0%, rgba(246,241,232,0) 22%);}
:root[data-theme="dark"] .imp-hero-grad{background:linear-gradient(90deg, rgba(28,25,22,.97) 0%, rgba(28,25,22,.88) 36%, rgba(28,25,22,.1) 66%), linear-gradient(0deg, var(--ink-deep) 0%, rgba(28,25,22,0) 26%);}
.imp-hero-inner{position:relative; z-index:2; padding:70px 0 120px; max-width:660px;}
.imp-hero h1{font-size:clamp(3rem,7vw,6.4rem); line-height:.98; letter-spacing:-.025em; margin:22px 0 24px;}
.imp-hero p.lead{font-size:clamp(1.05rem,1.5vw,1.25rem); color:var(--dim); max-width:520px;}
.imp-hero-cta{display:flex; gap:12px; flex-wrap:wrap; margin-top:32px;}
.kpis{display:grid; grid-template-columns:repeat(4,auto); gap:40px; margin-top:56px; justify-content:start;}
.kpis-mobile{display:none;}
.kpi b{display:block; font:500 clamp(2.2rem,3.6vw,3.2rem)/1 'Fraunces',serif; letter-spacing:-.02em; color:var(--fg-strong);}
.kpi span{display:block; margin-top:8px; font:600 11px 'Inter',sans-serif; letter-spacing:.14em; text-transform:uppercase; color:var(--dim);}
@media (max-width:900px){
  .imp-hero{min-height:100svh; display:flex; flex-direction:column; justify-content:flex-end; padding:var(--header-h,72px) 0 26px;}
  .imp-hero-bg{position:absolute; inset:0; width:100%; height:100%; object-position:62% 12%; will-change:opacity,transform;}
  :root:not([data-theme="dark"]) .imp-hero-grad{background:linear-gradient(to bottom, rgba(246,241,232,.18) 0%, rgba(246,241,232,0) 14%, rgba(246,241,232,0) 30%, rgba(246,241,232,.55) 42%, rgba(246,241,232,.9) 54%, var(--cream) 66%);}
  :root[data-theme="dark"] .imp-hero-grad{background:linear-gradient(to bottom, rgba(28,25,22,.2) 0%, rgba(28,25,22,0) 14%, rgba(28,25,22,0) 30%, rgba(28,25,22,.55) 42%, rgba(28,25,22,.9) 54%, var(--ink-deep) 66%);}
  .imp-hero-inner{margin-top:0; padding:0; max-width:none;}
  .imp-hero h1{font-size:clamp(2.5rem,11.5vw,3.1rem); margin:12px 0 14px; text-wrap:balance;}
  .imp-hero p.lead{font-size:15.5px; max-width:34ch;}
  .imp-hero-cta{margin-top:20px; gap:10px;} .imp-hero-cta .lp-btn{width:100%; min-height:50px;}
  .imp-hero-hours{margin-top:12px; font-size:11px;}
  .imp-hero .kpis{display:none;}
  .kpis-mobile{display:grid; grid-template-columns:1fr 1fr; gap:18px 14px; padding:26px 22px; margin:18px auto 0; background:var(--card); border:1px solid var(--rule); border-radius:var(--radius-md);}
}

/* Lösungsfinder, überlappt den Hero */
.finder-wrap{margin-top:-80px; position:relative; z-index:3;}
.finder{background:var(--bg2); border:1px solid var(--rule); border-radius:var(--radius-lg); box-shadow:var(--shadow); padding:34px; display:grid; grid-template-columns:.9fr 1.1fr; gap:40px; align-items:start;}
.finder-intro h2{font-size:clamp(1.7rem,2.8vw,2.3rem); margin:12px 0 10px;} .finder-intro p{color:var(--dim); font-size:15px;}
.finder-head{display:flex; justify-content:space-between; align-items:center; margin-bottom:14px;}
.dots{display:flex; gap:6px;} .dots i{width:22px; height:4px; border-radius:2px; background:var(--rule); transition:background .3s;} .dots i.on{background:var(--accent);}
.finder h3{font-size:24px; margin-bottom:6px;} .finder p.q{font-size:14px; color:var(--dim); margin-bottom:14px;}
.choices{display:grid; gap:10px;}
.choice{display:grid; grid-template-columns:52px 1fr auto; align-items:center; gap:14px; text-align:left; background:var(--card); border:1px solid var(--rule); border-radius:14px; padding:12px 16px; cursor:pointer; font:inherit; color:var(--fg); transition:border-color .2s, transform .2s;}
.choice:hover{border-color:var(--accent); transform:translateX(3px);}
.choice b{display:block; font:600 15px 'Inter',sans-serif; color:var(--fg-strong);} .choice span{font-size:13px; color:var(--dim);}
.choice svg{width:44px; height:44px;} .choice-ico{width:52px; height:52px; border-radius:14px; object-fit:cover; background:var(--cream); box-shadow:0 6px 14px -8px rgba(42,38,34,.35);} .choice .arrow{width:16px; height:16px; color:var(--accent);}
.choice svg .ico-line{stroke:var(--fg);} .choice svg .ico-fill{fill:var(--bg3);} .choice svg .ico-acc{stroke:var(--accent);} .choice svg .ico-accf{fill:var(--accent);}
.result h3{font-size:24px;} .result .rec{background:var(--bg3); border-radius:14px; padding:18px; margin:14px 0; font-size:14.5px; line-height:1.6; color:var(--fg);}
.result .rec b{display:block; font:600 16px 'Inter',sans-serif; margin-bottom:4px; color:var(--fg-strong);}
.result .note{font-size:13.5px; color:var(--dim); margin-bottom:16px; line-height:1.55;}
.result .actions{display:flex; gap:10px; flex-wrap:wrap;}
.restart{background:none; border:0; color:var(--dim); font:600 12.5px 'Inter',sans-serif; cursor:pointer; text-decoration:underline; margin-top:14px;}
@media (max-width:900px){ .finder-wrap{margin-top:0;} .finder{grid-template-columns:1fr; padding:26px 22px;} }

/* Vertrauensleiste */
.lp-trust{background:var(--card); border-color:var(--rule); margin-top:22px;}
.lp-trust > div{border-color:var(--rule);} .lp-trust strong{color:var(--fg-strong);} .lp-trust span{color:var(--dim);} .lp-trust svg{color:var(--accent);}

/* Kapitel-Navigation */
.chapnav{position:fixed; left:22px; top:50%; transform:translateY(-50%); z-index:40; display:grid; gap:12px;}
.chapnav a{display:flex; align-items:center; gap:10px; text-decoration:none; color:var(--dim); font:600 10.5px 'Inter',sans-serif; letter-spacing:.14em; text-transform:uppercase;}
.chapnav a i{width:22px; height:1px; background:var(--dim); transition:width .3s, background .3s;}
.chapnav a span{opacity:0; transform:translateX(-6px); transition:opacity .3s, transform .3s;}
.chapnav a.on{color:var(--fg-strong);} .chapnav a.on i{width:40px; background:var(--accent);} .chapnav a.on span,.chapnav a:hover span{opacity:1; transform:none;}
@media (max-width:1320px){ .chapnav{display:none;} }

/* Kapitel */
.chapter{padding:110px 0; border-top:1px solid var(--rule);}
.chapter.alt{background:var(--bg2);}
.chapter-head{display:grid; grid-template-columns:120px 1fr; gap:30px; align-items:start; margin-bottom:54px;}
.chapter-head .no{font:500 clamp(4rem,8vw,7rem)/0.9 'Fraunces',serif; color:transparent; -webkit-text-stroke:1px var(--num); letter-spacing:-.03em;}
.chapter-head h2{font-size:clamp(2.2rem,4.4vw,3.6rem); margin:10px 0 14px; max-width:16ch;}
.chapter-head p{color:var(--dim); font-size:17px; max-width:640px;}
@media (max-width:760px){ .chapter{padding:70px 0;} .chapter-head{grid-template-columns:1fr; gap:6px;} }

/* 01 Anatomie */
.anat{display:grid; grid-template-columns:1fr 1fr; gap:50px; align-items:center;}
.anat figure{border-radius:var(--radius-lg); overflow:hidden; background:var(--cream);} .anat img{width:100%; display:block;}
.part{display:grid; grid-template-columns:52px 1fr; gap:18px; padding:22px 0; border-top:1px solid var(--rule);} .part:last-child{border-bottom:1px solid var(--rule);}
.part b{font:500 30px/1 'Fraunces',serif; color:var(--accent);} .part h3{font-size:22px; margin-bottom:6px;} .part p{color:var(--dim); font-size:15px;}
@media (max-width:900px){ .anat{grid-template-columns:1fr;} }

/* 02 Zahnkarte */
.arch-grid{display:grid; grid-template-columns:1fr 1fr; gap:50px; align-items:center;}
.arch-box{background:var(--bg3); border-radius:var(--radius-lg); padding:30px 24px 14px; text-align:center;}
.arch{width:100%; max-width:520px; height:auto;} .arch-line{stroke:var(--rule);}
.arch .tooth{cursor:pointer;} .arch .tooth ellipse{fill:var(--bg2); stroke:var(--fg); stroke-width:1.6; transition:fill .2s, stroke .2s;}
.arch .tooth text{font:600 10px 'Inter',sans-serif; fill:var(--dim); pointer-events:none;}
.arch .tooth:hover ellipse{stroke:var(--accent);}
.arch .tooth.missing ellipse{fill:transparent; stroke:var(--rule); stroke-dasharray:3 3;} .arch .tooth.missing text{fill:var(--rule);}
.arch .tooth:focus{outline:none;} .arch .tooth:focus ellipse{stroke:var(--accent); stroke-width:2.4;}
.arch-hint{font:600 11.5px 'Inter',sans-serif; letter-spacing:.12em; text-transform:uppercase; color:var(--dim); margin-top:6px;}
.arch-msg{font-family:'Fraunces',serif; font-size:clamp(1.3rem,2.2vw,1.7rem); line-height:1.4; min-height:3em; color:var(--fg-strong);} .arch-msg a{color:var(--accent);}
@media (max-width:900px){ .arch-grid{grid-template-columns:1fr; gap:26px;} }

/* 03 Vergleich */
.seg{display:inline-flex; background:var(--bg3); border:1px solid var(--rule); border-radius:999px; padding:4px; gap:4px; margin-bottom:26px;}
.seg button{border:0; background:transparent; padding:10px 18px; border-radius:999px; font:600 14px 'Inter',sans-serif; color:var(--dim); cursor:pointer;}
.seg button.on{background:var(--dark-panel); color:var(--dark-panel-fg);}
.cmp-table{width:100%; border-collapse:separate; border-spacing:0; background:var(--card); border:1px solid var(--rule); border-radius:var(--radius-md); overflow:hidden;}
.cmp-table th,.cmp-table td{padding:16px 18px; text-align:left; border-top:1px solid var(--rule); font-size:14.5px; vertical-align:top;}
.cmp-table thead th{border-top:0; font:600 12px 'Inter',sans-serif; letter-spacing:.12em; text-transform:uppercase; color:var(--dim); background:var(--bg3);}
.cmp-table td:first-child{font-weight:600; color:var(--fg-strong); width:22%;} .cmp-table td{color:var(--dim); transition:background .3s;}
.cmp-table .hl{background:var(--hl); color:var(--fg-strong);} .cmp-table .good{color:var(--good); font-weight:600;} .cmp-table .bad{color:var(--bad); font-weight:600;}
@media (max-width:760px){ .cmp-table th:not(.hl):not(:first-child),.cmp-table td:not(.hl):not(:first-child){display:none;} .cmp-table td:first-child{width:45%;} }

/* 04 Eingriff */
.tl{display:grid; grid-template-columns:repeat(5,1fr); border-top:1px solid var(--rule);}
.tl > div{padding:26px 22px 0 0; border-right:1px solid var(--rule); position:relative;} .tl > div:last-child{border-right:0;}
.tl > div::before{content:""; position:absolute; left:0; top:-1px; width:44px; height:2px; background:var(--accent);}
.tl .t{font:600 11.5px 'Inter',sans-serif; letter-spacing:.14em; text-transform:uppercase; color:var(--accent);}
.tl h3{font-size:21px; margin:10px 0 8px;} .tl p{font-size:14.5px; color:var(--dim);}
@media (max-width:900px){ .tl{grid-template-columns:1fr; border-top:0;} .tl > div{border-right:0; border-top:1px solid var(--rule); padding:22px 0 26px;} }
.plan{margin-top:70px; display:grid; grid-template-columns:1.1fr .9fr; gap:40px; align-items:center;}
.plan figure{border-radius:var(--radius-lg); overflow:hidden;} .plan img{width:100%; display:block;}
.plan h3{font-size:clamp(1.6rem,2.6vw,2.2rem); margin:12px 0 12px;} .plan p{color:var(--dim); font-size:15.5px; margin-bottom:10px;}
@media (max-width:900px){ .plan{grid-template-columns:1fr;} }
.dayhead{margin:80px 0 30px;} .dayhead h3{font-size:clamp(1.6rem,2.6vw,2.2rem); margin:12px 0 10px;} .dayhead p{color:var(--dim); max-width:640px;}
.dayline{position:relative; display:grid; grid-template-columns:repeat(6,1fr);}
.dayline::before{content:""; position:absolute; left:0; right:0; top:22px; height:2px; background:var(--rule);}
.slot{padding:0 14px 0 0; position:relative;}
.slot i{display:block; width:14px; height:14px; border-radius:50%; background:var(--bg); border:3px solid var(--accent); margin:16px 0 14px; position:relative; z-index:1;}
.slot .t{font:600 12px 'Inter',sans-serif; letter-spacing:.12em; color:var(--accent);} .slot h3{font-size:18px; margin:6px 0 6px;} .slot p{font-size:13.5px; color:var(--dim);}
.slot.big i{background:var(--accent);}
@media (max-width:900px){ .dayline{grid-template-columns:1fr; padding-left:26px;} .dayline::before{left:6px; right:auto; top:0; bottom:0; width:2px; height:auto;} .slot{padding:0 0 26px;} .slot i{position:absolute; left:-26px; top:0; margin:0;} }

/* 05 Ehrlich gesagt */
.honest-grid{display:grid; grid-template-columns:1fr 1fr; gap:22px;}
.hcard{border:1px solid var(--rule); border-radius:var(--radius-lg); padding:36px 34px; background:var(--card);}
.hcard .q{font:500 clamp(1.4rem,2.2vw,1.8rem)/1.3 'Fraunces',serif; color:var(--fg-strong); margin-bottom:16px;} .hcard p{color:var(--dim); font-size:15px;}
.hcard.accent{background:var(--dark-panel); color:var(--dark-panel-fg); border-color:transparent;} .hcard.accent .q{color:var(--dark-panel-fg);} .hcard.accent .q em{color:var(--blue-light); font-style:italic;} :root[data-theme="dark"] .hcard.accent .q em{color:var(--blue);} .hcard.accent p{opacity:.75; color:inherit;}
@media (max-width:900px){ .honest-grid{grid-template-columns:1fr;} }
.fullbleed{margin:80px 0 0; position:relative; min-height:68vh; display:flex; align-items:flex-end; overflow:hidden; border-radius:var(--radius-lg);}
.fullbleed img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover;}
.fullbleed::after{content:""; position:absolute; inset:0; background:linear-gradient(0deg, rgba(28,25,22,.88) 0%, rgba(28,25,22,.05) 60%);}
.fullbleed .cap{position:relative; z-index:2; padding:40px; max-width:640px;}
.fullbleed .cap p{font:500 clamp(1.5rem,3vw,2.4rem)/1.25 'Fraunces',serif; color:#fff;}
.fullbleed .cap small{display:block; margin-top:12px; font:600 11.5px 'Inter',sans-serif; letter-spacing:.14em; text-transform:uppercase; color:rgba(246,241,232,.7);}

/* 06 Arzt + Rezensionen */
.doc{display:grid; grid-template-columns:.85fr 1.15fr; gap:56px; align-items:center;}
.doc figure{border-radius:var(--radius-lg); overflow:hidden; aspect-ratio:4/5;} .doc img{width:100%; height:100%; object-fit:cover; display:block;}
.doc h2{font-size:clamp(2rem,3.6vw,3rem); margin:12px 0 6px;}
.doc .role{font:600 12px 'Inter',sans-serif; letter-spacing:.12em; text-transform:uppercase; color:var(--dim); margin-bottom:22px;}
.doc blockquote{font:500 clamp(1.3rem,2vw,1.6rem)/1.4 'Fraunces',serif; color:var(--fg-strong); margin-bottom:24px;}
.creds{list-style:none; display:grid; gap:10px; margin-bottom:24px;}
.creds li{display:grid; grid-template-columns:70px 1fr; gap:12px; font-size:14.5px; color:var(--fg); padding-top:10px; border-top:1px solid var(--rule);}
.creds li span:first-child{font:600 11.5px 'Inter',sans-serif; letter-spacing:.12em; color:var(--accent); padding-top:3px;}
.logos{display:inline-flex; gap:22px; align-items:center; background:var(--cream); border-radius:14px; padding:12px 18px;} .logos img{height:34px; width:auto;}
@media (max-width:900px){ .doc{grid-template-columns:1fr;} .doc figure{aspect-ratio:4/3;} }
.reviews{display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-top:44px;}
.review{border:1px solid var(--rule); border-radius:var(--radius-md); padding:26px; background:var(--card);}
.review p{font-family:'Fraunces',serif; font-size:18px; line-height:1.4; color:var(--fg-strong); margin:10px 0 12px;} .review small{font-size:12.5px; color:var(--dim);}
@media (max-width:900px){ .reviews{grid-template-columns:1fr;} }

/* Kosten-Styles (Kapitel entfernt, bleibt für später) */
.cost{display:grid; grid-template-columns:repeat(3,1fr); border:1px solid var(--rule); border-radius:var(--radius-lg); overflow:hidden; background:var(--card);}
.cost > div{padding:32px; border-left:1px solid var(--rule);} .cost > div:first-child{border-left:0;}
.cost h3{font-size:20px;} .cost .price{font:500 clamp(1.8rem,3vw,2.5rem)/1 'Fraunces',serif; color:var(--accent); letter-spacing:-.02em; margin:14px 0 6px;}
.cost small{display:block; font:600 11px 'Inter',sans-serif; letter-spacing:.12em; text-transform:uppercase; color:var(--dim); margin-bottom:10px;} .cost p{font-size:14px; color:var(--dim);}
@media (max-width:900px){ .cost{grid-template-columns:1fr;} .cost > div{border-left:0; border-top:1px solid var(--rule);} .cost > div:first-child{border-top:0;} }
.calc{display:grid; grid-template-columns:1fr 1fr; gap:50px; align-items:center; margin-top:60px;}
.calc-box{background:var(--dark-panel); color:var(--dark-panel-fg); border-radius:var(--radius-lg); padding:36px;}
.calc-box label{display:block; font:600 11.5px 'Inter',sans-serif; letter-spacing:.14em; text-transform:uppercase; opacity:.65; margin-bottom:10px;}
.calc-box input[type=range]{width:100%; accent-color:var(--blue); margin-bottom:8px;} :root:not([data-theme="dark"]) .calc-box input[type=range]{accent-color:var(--blue-light);}
.calc-box .ticks{display:flex; justify-content:space-between; font-size:11px; opacity:.55; margin-bottom:26px;}
.calc-box .out-label{font:600 14px 'Inter',sans-serif;}
.calc-box .out{font:500 clamp(2rem,4vw,3rem) 'Fraunces',serif; letter-spacing:-.02em; color:var(--blue-light); margin:4px 0 14px;} :root[data-theme="dark"] .calc-box .out{color:var(--blue);}
.calc-box select{background:transparent; color:inherit; border:1px solid currentColor; border-radius:10px; padding:9px 12px; font:inherit; opacity:.9;}
.calc-box .rate{margin-top:12px; font-size:14px; opacity:.85;} .calc-box small{display:block; margin-top:18px; font-size:11.5px; opacity:.5; line-height:1.5;}
.calc-copy h3{font-size:clamp(1.6rem,2.8vw,2.3rem); margin:12px 0 14px;} .calc-copy p{color:var(--dim); margin-bottom:12px;}
@media (max-width:900px){ .calc{grid-template-columns:1fr;} }

/* 08 FAQ */
.lp-faq details{border-color:var(--rule);} .lp-faq summary{color:var(--fg-strong);} .lp-faq summary::after{color:var(--accent);} .lp-faq details p{color:var(--dim);}

/* Final: immer Kontrastpanel */
.lp-final{background:var(--dark-panel); color:var(--dark-panel-fg);}
.lp-final h2{color:inherit;} .lp-final h2 em{color:var(--blue-light);} :root[data-theme="dark"] .lp-final h2 em{color:var(--blue);} .lp-final p{color:inherit; opacity:.75;}
.lp-final .lp-btn-ghost{color:inherit; border-color:currentColor; opacity:.9;} .lp-final .eyebrow{color:var(--blue-light);} .lp-final .eyebrow::before{background:var(--blue-light);} :root[data-theme="dark"] .lp-final .eyebrow{color:var(--blue);} :root[data-theme="dark"] .lp-final .eyebrow::before{background:var(--blue);}
:root[data-theme="dark"] .lp-form{background:var(--white); border-color:var(--line);} :root[data-theme="dark"] .lp-form label{color:var(--ink-soft);} :root[data-theme="dark"] .lp-form input,:root[data-theme="dark"] .lp-form select{background:var(--cream); color:var(--ink); border-color:var(--line);} :root[data-theme="dark"] .lp-form small{color:var(--ink-soft);}
:root[data-theme="dark"] .lp-btn-light{background:var(--ink); color:#fff;}

.imp-hero-hours{margin-top:16px; font:600 12px 'Inter',sans-serif; letter-spacing:.08em; text-transform:uppercase; color:var(--dim);}
.callcard{display:grid; gap:6px; justify-items:start; text-decoration:none; color:inherit; background:rgba(255,253,249,.08); border:1px solid rgba(255,253,249,.16); border-radius:var(--radius-md); padding:30px; position:relative; transition:transform .25s ease;}
.callcard:hover{transform:translateY(-3px);}
.callcard-label{font:600 11.5px 'Inter',sans-serif; letter-spacing:.14em; text-transform:uppercase; opacity:.7;}
.callcard-number{font:500 clamp(2.4rem,4.4vw,3.6rem)/1 'Fraunces',serif; letter-spacing:-.02em; color:inherit; margin:6px 0 4px;}
.callcard-hours{font-size:13.5px; opacity:.7;}
.callcard-btn{margin-top:16px; display:inline-flex; align-items:center; gap:9px; background:var(--blue); color:#fff; border-radius:999px; padding:14px 26px; font:600 15px 'Inter',sans-serif; box-shadow:0 14px 30px -14px rgba(30,86,214,.7);} .callcard-btn svg{width:16px; height:16px;}
:root[data-theme="dark"] .callcard{background:var(--white); border-color:var(--line);}
@media (max-width:640px){ .lp-header .lp-btn-ghost{display:none;} .lp-header .lp-btn-primary{display:inline-flex;} }

/* Lebendiger Hintergrund (nur helles Thema): Lichtband, Farbnebel, Papierkorn */
:root:not([data-theme="dark"]) body{background:
  radial-gradient(1100px 700px at 8% -10%, rgba(66,198,222,.22), transparent 60%),
  radial-gradient(900px 600px at 100% 12%, rgba(30,86,214,.10), transparent 60%),
  var(--cream);}
:root:not([data-theme="dark"]) body::before{content:""; position:fixed; inset:0; pointer-events:none; z-index:0; opacity:.5; mix-blend-mode:multiply; background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.16 0 0 0 0 0.15 0 0 0 0 0.13 0 0 0 .08 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");}
main,footer,.finder-wrap{position:relative; z-index:1;}
:root:not([data-theme="dark"]) .imp-hero{background:var(--cream-deep);}
.imp-ribbon{position:absolute; left:-8%; top:-12%; width:70%; min-width:620px; height:auto; z-index:1; pointer-events:none; opacity:.85; -webkit-mask-image:linear-gradient(90deg,#000 40%,transparent 78%); mask-image:linear-gradient(90deg,#000 40%,transparent 78%);}
.imp-ribbon .thin{opacity:.55;}
@media (max-width:900px){ .imp-ribbon{display:none;} }
:root:not([data-theme="dark"]) .chapter.alt{background:linear-gradient(180deg, var(--white) 0%, #FBF7F0 100%);}
:root:not([data-theme="dark"]) .chapter{position:relative; overflow:hidden;}
:root:not([data-theme="dark"]) .chapter::before{content:""; position:absolute; width:720px; height:720px; border-radius:50%; right:-260px; top:-200px; background:radial-gradient(closest-side, rgba(66,198,222,.16), rgba(66,198,222,0) 72%); pointer-events:none;}
:root:not([data-theme="dark"]) .chapter:nth-of-type(even)::before{right:auto; left:-300px; top:auto; bottom:-260px; background:radial-gradient(closest-side, rgba(30,86,214,.10), rgba(30,86,214,0) 72%);}
:root:not([data-theme="dark"]) .chapter > .lp-wrap{position:relative; z-index:1;}
.chapter-ribbon{position:absolute; right:-6%; top:6%; width:46%; min-width:420px; height:auto; pointer-events:none; opacity:.5;}
@media (max-width:900px){ .chapter-ribbon{display:none;} }
:root:not([data-theme="dark"]) .chapter-head .no{-webkit-text-stroke:0; color:transparent; background:linear-gradient(135deg, rgba(66,198,222,.7), rgba(30,86,214,.55)); -webkit-background-clip:text; background-clip:text;}
:root:not([data-theme="dark"]) .arch-box{background:linear-gradient(160deg, #F3ECDF 0%, #EAF4F7 100%);}
:root:not([data-theme="dark"]) .finder{background:linear-gradient(180deg, var(--white) 0%, #FBF8F2 100%);}
:root:not([data-theme="dark"]) .lp-trust{background:rgba(255,253,249,.7); backdrop-filter:blur(8px);}
:root:not([data-theme="dark"]) .hcard:not(.accent){background:rgba(255,253,249,.75);}
:root:not([data-theme="dark"]) .review{background:rgba(255,253,249,.75);}


/* Mobile-Feinschliff */
@media (max-width:760px){
  .lp-draftbar{top:auto; bottom:calc(76px + env(safe-area-inset-bottom)); border-radius:0 10px 0 0; font-size:9.5px;}
    .chapter-head .no{font-size:3.4rem; line-height:1;}
  .chapter-head h2{font-size:clamp(1.9rem,8vw,2.4rem);} .chapter-head p{font-size:15.5px;}
  .imp-hero h1{font-size:clamp(2.6rem,12vw,3.2rem);}
  .imp-hero p.lead{font-size:16px;}
  .imp-hero-cta .lp-btn{width:100%;}
  .kpi b{font-size:2rem;}
  .finder{padding:22px 18px;} .finder-intro h2{font-size:1.5rem;}
  .choice{padding:14px 14px; min-height:64px;}
  .arch-box{padding:14px 4px 8px; border-radius:20px;}
  .arch{max-width:none;} .arch .tooth text{font-size:12px;}
  .cmp-table th,.cmp-table td{padding:14px 12px; font-size:14px;}
  .seg{display:flex;} .seg button{flex:1; padding:12px 6px;}
  .fullbleed{min-height:120vw;} .fullbleed .cap{padding:22px;}
  .hcard{padding:26px 22px;}
  .doc figure{aspect-ratio:1;}
  .lp-final{padding:32px 22px;} .callcard{padding:22px;} .callcard-number{font-size:2.2rem;} .callcard-btn{width:100%; justify-content:center;}
  .lp-faq summary{font-size:18px; padding:18px 2px;}
  .lp-footer .row{flex-direction:column; gap:8px;}
  .lp-final-actions .lp-btn{flex:1;}
}
.lp-sticky .lp-btn-primary{flex:1.4;}
.lp-btn:focus-visible,.choice:focus-visible,a:focus-visible,button:focus-visible{outline:3px solid var(--blue-light); outline-offset:2px;}


/* Drei Wege (aus Entwurf A übernommen) */
.paths{display:grid; grid-template-columns:repeat(3,1fr); gap:18px;}
.path{background:var(--card); border:1px solid var(--rule); border-radius:var(--radius-lg); overflow:hidden; text-decoration:none; color:inherit; display:flex; flex-direction:column; transition:transform .3s ease, box-shadow .3s ease;}
.path:hover{transform:translateY(-4px); box-shadow:var(--shadow);}
.path figure{aspect-ratio:4/3; background:var(--cream-deep); overflow:hidden;}
.path img{width:100%; height:100%; object-fit:cover; display:block; transition:transform .6s ease;}
.path:hover img{transform:scale(1.04);}
.path .body{padding:24px 26px 28px; display:grid; gap:8px;}
.path .tag{font:600 11.5px 'Inter',sans-serif; letter-spacing:.14em; text-transform:uppercase; color:var(--accent);}
.path h3{font-size:24px;}
.path p{font-size:14.5px; color:var(--dim);}
.path .more{margin-top:8px; font:600 14px 'Inter',sans-serif; color:var(--fg-strong); display:inline-flex; gap:8px; align-items:center;}
.path .more svg{width:15px; height:15px; transition:transform .25s ease;} .path:hover .more svg{transform:translateX(4px);}
:root:not([data-theme="dark"]) .path{background:rgba(255,253,249,.8);}
@media (max-width:900px){ .paths{grid-template-columns:1fr;} .path figure{aspect-ratio:16/9;} .path .body{padding:20px 20px 24px;} }

.lp-footer{padding:44px 0 34px; border-top:1px solid var(--rule); font-size:13.5px; color:var(--dim);}
.lp-footer .row{display:flex; justify-content:space-between; gap:20px; flex-wrap:wrap;} .lp-footer a{color:var(--dim);} .lp-footer b{color:var(--fg-strong);}
.lp-sticky{background:var(--header); border-top-color:var(--rule);}


/* Hell/Dunkel-Schalter */
.theme-toggle{position:fixed; right:18px; bottom:22px; z-index:70; display:inline-flex; align-items:center; gap:8px; padding:10px 16px 10px 12px; border-radius:999px; border:1px solid var(--rule); background:var(--card); color:var(--fg); font:600 12.5px 'Inter',sans-serif; letter-spacing:.08em; text-transform:uppercase; cursor:pointer; box-shadow:0 14px 30px -16px rgba(42,38,34,.5); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);}
.theme-toggle svg{width:16px; height:16px;} .theme-toggle .sun{display:none;}
:root[data-theme="dark"] .theme-toggle .sun{display:block;} :root[data-theme="dark"] .theme-toggle .moon{display:none;}
:root:not([data-theme="dark"]) .theme-toggle{background:rgba(255,253,249,.85);}
@media (max-width:760px){ .theme-toggle{bottom:calc(80px + env(safe-area-inset-bottom)); right:12px; padding:9px 13px 9px 11px; font-size:11.5px;} }
/* Website-Header im dunklen Thema */
:root[data-theme="dark"] header .logo-text{filter:brightness(0) invert(1);}
:root[data-theme="dark"] header .logo-icon{content:url("images/icon-white.webp");}
:root[data-theme="dark"] header nav.main-nav > ul > li > a, :root[data-theme="dark"] header details.nav-dropdown summary, :root[data-theme="dark"] header .header-phone, :root[data-theme="dark"] header .lang-switch summary{color:var(--cream); text-shadow:none;}
:root[data-theme="dark"] header .menu-toggle span{background:var(--cream);}
:root[data-theme="dark"] header .lang-switch summary{background:rgba(255,253,249,.08); border-color:var(--rule);}
:root[data-theme="dark"] header .header-phone{border-color:var(--rule);}
:root[data-theme="dark"] header.scrolled{background:rgba(28,25,22,.92); border-bottom-color:var(--rule);}
:root[data-theme="dark"] header .dropdown-panel, :root[data-theme="dark"] header nav.main-nav.nav-open, :root[data-theme="dark"] header .lang-list{background:#231F1B; color:var(--cream); border-color:var(--rule);}
:root[data-theme="dark"] header .dropdown-panel a, :root[data-theme="dark"] header .dropdown-panel h4, :root[data-theme="dark"] header nav.main-nav.nav-open a, :root[data-theme="dark"] header .lang-list button{color:var(--cream);}

/* SEO-Ergänzungen: Kicker in der H1, weiterführende Seiten */
.h1-kicker{display:flex; font-size:12.5px; line-height:1; letter-spacing:.16em; margin-bottom:22px; font-style:normal; width:100%;}
.related{display:flex; flex-wrap:wrap; gap:8px; align-items:center; margin-top:44px;}
.related-label{font:600 11.5px 'Inter',sans-serif; letter-spacing:.14em; text-transform:uppercase; color:var(--dim); margin-right:6px;}
.related a{font:500 13.5px 'Inter',sans-serif; color:var(--fg); text-decoration:none; padding:8px 14px; border:1px solid var(--rule); border-radius:999px; background:var(--card); transition:border-color .2s, transform .2s;}
.related a:hover{border-color:var(--accent); transform:translateY(-1px);}
.plan p a{color:var(--accent); text-decoration:underline; text-underline-offset:3px;}

/* Auf dem Handy wandert der Hell/Dunkel-Schalter in die Sticky-Leiste */
.lp-sticky .theme-toggle{position:static; flex:0 0 auto; padding:0; width:46px; height:46px; justify-content:center; box-shadow:none; backdrop-filter:none;}
.lp-sticky .theme-toggle span{display:none;}

/* Checkliste „Passt das zu mir?“ auf den Unterseiten */
.checks{list-style:none; display:grid; gap:12px; margin:4px 0 22px; padding:0;}
.checks li{display:grid; grid-template-columns:24px 1fr; gap:12px; font-size:15.5px; line-height:1.5; color:var(--fg);}
.checks li::before{content:""; width:22px; height:22px; border-radius:50%; margin-top:1px; background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><circle cx='12' cy='12' r='12' fill='%231E56D6'/><path fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round' d='M6 12.5l4 4L18 8'/></svg>") center/100% no-repeat;}
:root[data-theme="dark"] .checks li::before{background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><circle cx='12' cy='12' r='12' fill='%2342C6DE'/><path fill='none' stroke='%231C1916' stroke-width='3' stroke-linecap='round' stroke-linejoin='round' d='M6 12.5l4 4L18 8'/></svg>");}
.finder .actions .lp-btn{white-space:normal; text-align:center;}

.creds{gap:6px;} .creds li{font-size:13.5px; padding-top:7px;}
.doc-bio{font-size:15px; color:var(--dim); margin:-4px 0 20px; line-height:1.6;} .doc-bio a{color:var(--accent); text-decoration:underline; text-underline-offset:3px;}
