/* ZahnExtra 24 – schlichte Startseite (ersetzt die Scroll-Animation) */
.brand .zx-word{font-family:var(--f-display);font-weight:400;font-size:32px;letter-spacing:.005em;line-height:1;color:var(--atelier-forest,#15372c);display:inline-flex;align-items:baseline;white-space:nowrap}
.brand .zx-word em{font-style:italic;color:var(--atelier-gold,#a08b60);margin-left:.02em}
.brand .zx-word b{font-weight:400;font-size:1em;letter-spacing:0;margin-left:.16em;color:var(--atelier-forest,#15372c)}
.brandname{letter-spacing:0}
.brandname em{font-style:italic;color:var(--atelier-gold,#a08b60)}
.wordmark em{font-style:italic}
@media (max-width:760px){.brand .zx-word{font-size:26px}}
.zx-hero{padding:56px 0 64px;background:var(--atelier-ivory,#f6f3eb)}
.zx-hero-grid{display:grid;grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr);gap:52px;align-items:center}
.zx-hero-copy{display:flex;flex-direction:column;gap:22px;align-items:flex-start}
.zx-hero h1{font-size:clamp(38px,4.4vw,62px);line-height:1.04;letter-spacing:-.01em;color:var(--atelier-forest,#15372c)}
.zx-hero h1 em{font-style:italic;color:var(--atelier-gold,#a08b60)}
.zx-lead{font-size:18px;line-height:1.6;color:var(--atelier-muted,#687269);max-width:34em}
.zx-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:4px}
.zx-trust{list-style:none;margin:10px 0 0;padding:18px 0 0;border-top:1px solid #243c3122;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 28px;width:100%;font-size:15px;color:var(--atelier-muted,#687269)}
.zx-trust b{color:var(--atelier-forest,#15372c);font-weight:600}
.zx-hero-media{border-radius:14px;overflow:hidden;aspect-ratio:3/2;background:#e6dfd2;justify-self:end;width:100%;box-shadow:0 24px 60px -32px #15372c66}
.zx-hero-media img{width:100%;height:100%;object-fit:cover;object-position:50% 30%;display:block}
.zx-hero-media img.is-fallback{object-position:62% 50%}

.zx-steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin-top:8px}
.zx-step{background:#fff;border:1px solid #243c311f;border-radius:12px;padding:26px;display:flex;flex-direction:column;gap:10px}
.zx-step-k{font-size:13px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--atelier-muted,#687269)}
.zx-step strong{font-family:var(--f-display);font-weight:400;font-size:clamp(40px,4.4vw,60px);line-height:1;color:var(--atelier-forest,#15372c);font-variant-numeric:tabular-nums}
.zx-step-d{font-size:14px;line-height:1.5;color:var(--atelier-muted,#687269)}
.zx-step-main{background:var(--atelier-forest,#15372c);border-color:var(--atelier-forest,#15372c)}
.zx-step-main .zx-step-k,.zx-step-main .zx-step-d{color:#d9e2da}
.zx-step-main strong{color:#fff}
.zx-kal{display:flex;gap:8px;margin-top:8px}
.zx-kal button{flex:1;min-height:44px;border-radius:8px;border:1px solid #ffffff55;background:transparent;color:#fff;font-weight:600;font-size:15px}
.zx-kal button.on{background:#fff;color:var(--atelier-forest,#15372c);border-color:#fff}
.zx-kal button:focus-visible{outline:2px solid #fff;outline-offset:2px}

.zx-benefits{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}
.zx-benefits .tile{gap:8px}
.zx-benefits h3{font-size:22px}
.zx-num{font-size:14px;color:var(--atelier-muted,#687269)}
.zx-num b{font-family:var(--f-display);font-weight:400;font-size:34px;color:var(--atelier-forest,#15372c);line-height:1}
.zx-quick{display:flex;flex-direction:column;gap:18px}
.facts span svg{color:var(--atelier-forest,#15372c)}

@media (max-width:980px){
  .zx-hero{padding:32px 0 44px}
  .zx-hero-grid{grid-template-columns:minmax(0,1fr);gap:28px}
  .zx-hero-media{aspect-ratio:3/2;order:-1}
  .zx-steps{grid-template-columns:minmax(0,1fr)}
  .zx-benefits{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:560px){
  .zx-benefits{grid-template-columns:minmax(0,1fr)}
  .zx-trust{grid-template-columns:minmax(0,1fr)}
  .zx-actions .btn{width:100%}
}

/* ---------- Rechnung per WhatsApp: Handy mit Chat ---------- */
[data-page="start"]>.section.zx-claim{background:var(--atelier-forest,#15372c);color:#e9ede4;overflow:hidden}
.zx-claim-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.9fr);gap:64px;align-items:center}
.zx-claim-copy{display:flex;flex-direction:column;gap:20px;align-items:flex-start}
.zx-claim .eyebrow{color:#cdb98a}
.zx-claim h2{font-size:clamp(36px,3.7vw,54px);line-height:1.08;letter-spacing:-.02em;color:#f6f3eb;margin:0}
.zx-claim h2 em{font-style:italic;color:#cdb98a}
.zx-claim-lead{font-size:17px;line-height:1.75;color:#cfd8cd;margin:0;max-width:540px}
.zx-claim-steps{list-style:none;margin:6px 0 8px;padding:0;display:grid;gap:14px;counter-reset:zx;width:100%;max-width:540px}
.zx-claim-steps li{counter-increment:zx;display:grid;grid-template-columns:38px minmax(0,1fr);column-gap:14px;align-items:start}
.zx-claim-steps li::before{content:counter(zx);grid-row:1/3;width:38px;height:38px;border-radius:50%;border:1px solid #cdb98a66;color:#cdb98a;display:grid;place-items:center;font-family:var(--f-display);font-size:20px;line-height:1}
.zx-claim-steps b{font-weight:600;color:#f6f3eb;font-size:16px;line-height:1.35}
.zx-claim-steps span{color:#b9c5b8;font-size:14px;line-height:1.6}
.zx-claim .btn{background:#f6f3eb;color:var(--atelier-forest,#15372c);border-color:#f6f3eb}
.zx-claim .btn:hover{background:#fff}
.zx-more{white-space:nowrap;font-weight:600;text-decoration:underline;text-underline-offset:3px}

.zx-claim-visual{position:relative;display:flex;flex-direction:column;align-items:center;gap:30px;padding:40px 0 0}
.zx-claim-visual::before{content:"";position:absolute;left:50%;top:50%;width:520px;height:520px;max-width:120%;transform:translate(-50%,-52%);border-radius:50%;background:radial-gradient(closest-side,#cdb98a3d,#cdb98a00);pointer-events:none}
.zx-phone{position:relative;width:310px;max-width:82vw;background:#0b1410;border-radius:46px;padding:10px;box-shadow:0 0 0 1px #3a5a4c,0 40px 80px -30px #000c,0 18px 36px -18px #0009}
.zx-phone::before{content:"";position:absolute;top:19px;left:50%;transform:translateX(-50%);width:84px;height:24px;border-radius:14px;background:#0b1410;z-index:3}
.zx-phone-screen{min-height:616px;border-radius:37px;overflow:hidden;background:#efe9df;display:flex;flex-direction:column;font-family:var(--f-body,inherit);color:#1d2a24}
.zx-ph-status{display:flex;justify-content:space-between;align-items:center;padding:13px 26px 6px;font-size:12px;font-weight:600;background:#f7f5f0}
.zx-ph-sig{display:inline-flex;align-items:flex-end;gap:2px}
.zx-ph-sig i{width:3px;background:#1d2a24;border-radius:1px}.zx-ph-sig i:nth-child(1){height:4px}.zx-ph-sig i:nth-child(2){height:6px}.zx-ph-sig i:nth-child(3){height:8px}.zx-ph-sig i:nth-child(4){height:10px}
.zx-ph-sig b{width:20px;height:10px;border-radius:3px;border:1.5px solid #1d2a24;margin-left:5px;background:linear-gradient(90deg,#1d2a24 72%,transparent 72%) padding-box}
.zx-ph-head{display:flex;align-items:center;gap:9px;padding:8px 14px 10px 8px;background:#f7f5f0;border-bottom:1px solid #1d2a2414}
.zx-ph-back{color:#1f8a5b;flex:none}.zx-ph-call{color:#1f8a5b;flex:none;margin-left:auto}
.zx-ph-head img{width:40px;height:40px;border-radius:50%;object-fit:cover;flex:none;box-shadow:0 0 0 1.5px #fff,0 0 0 3px #1f8a5b55}
.zx-ph-who{display:flex;flex-direction:column;min-width:0;line-height:1.25}
.zx-ph-who strong{font-size:14px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.zx-ph-who small{font-size:11px;color:#1f8a5b}
.zx-ph-chat{flex:1;min-height:0;display:flex;flex-direction:column;gap:7px;padding:10px 10px 12px;background-color:#efe9df;background-image:radial-gradient(#1d2a240d 1px,transparent 1.2px);background-size:14px 14px}
.zx-ph-day{align-self:center;font-size:10px;font-weight:500;color:#5d6a63;background:#ffffffd9;border-radius:7px;padding:3px 9px;box-shadow:0 1px 0 #0000000d}
.zx-msg{max-width:84%;border-radius:12px;padding:6px 9px 5px;font-size:12.5px;line-height:1.4;box-shadow:0 1px 0 #00000012;position:relative}
.zx-msg p{margin:0;font-size:inherit;line-height:inherit;color:#1d2a24}
.zx-msg time{display:flex;justify-content:flex-end;align-items:center;gap:3px;font-size:9.5px;color:#7b8781;margin-top:1px;line-height:1}
.zx-msg.in{align-self:flex-start;background:#fff;border-top-left-radius:3px}
.zx-msg.out{align-self:flex-end;background:#d7f5cf;border-top-right-radius:3px}
.zx-msg.out time svg{color:#3b9be0}
.zx-msg-photo{padding:4px 4px 5px;width:78%}
.zx-msg-photo p{padding:5px 5px 0}.zx-msg-photo time{padding:0 5px}
.zx-bill{height:150px;border-radius:9px;overflow:hidden;background:linear-gradient(135deg,#c9b594,#a98f69);display:grid;place-items:center}
.zx-bill-paper{width:66%;background:#fffdf8;border-radius:2px;padding:10px 10px 11px;transform:rotate(-4deg);box-shadow:0 8px 16px -6px #0000005c;display:flex;flex-direction:column;gap:4px;font-size:7px;line-height:1.2;color:#34423b}
.zx-bill-h{font-weight:700;font-size:7.5px;letter-spacing:.02em}
.zx-bill-t{font-family:var(--f-display);font-size:13px;line-height:1;margin-bottom:2px;color:#15372c}
.zx-bill-r{display:flex;justify-content:space-between;gap:6px}.zx-bill-r i{font-style:normal}.zx-bill-r b{font-weight:500;font-variant-numeric:tabular-nums}
.zx-bill-l{height:3px;border-radius:2px;background:#34423b1f}.zx-bill-l.s{width:60%}
.zx-bill-r.sum{border-top:1px solid #34423b55;padding-top:4px;margin-top:1px;font-weight:700}.zx-bill-r.sum b{font-weight:700}
.zx-ph-input{display:flex;align-items:center;gap:8px;padding:8px 10px 14px;background:#f7f5f0}
.zx-ph-input span{flex:1;background:#fff;border:1px solid #1d2a2414;border-radius:18px;padding:8px 13px;font-size:12px;color:#8b958f}
.zx-ph-input i{width:34px;height:34px;border-radius:50%;background:#1f8a5b;color:#fff;display:grid;place-items:center;flex:none}

.zx-float{position:absolute;display:flex;align-items:center;gap:11px;background:#fffdf8;color:#1d2a24;border-radius:16px;padding:10px 16px 10px 10px;box-shadow:0 22px 44px -18px #000000a6,0 0 0 1px #ffffff1f;z-index:4;line-height:1.3}
.zx-float span{display:flex;flex-direction:column}
.zx-float b{font-size:13.5px;font-weight:600}.zx-float small{font-size:12px;color:#5d6a63}
.zx-float img{width:46px;height:46px;border-radius:50%;object-fit:cover;flex:none}
.zx-float i{width:34px;height:34px;border-radius:50%;background:#1f8a5b;color:#fff;display:grid;place-items:center;flex:none}
.zx-phone-wrap{position:relative}
.zx-float{white-space:nowrap}
.zx-float-a{top:-48px;left:-128px}
.zx-float-b{bottom:-16px;right:-118px}
.zx-claim-note{margin:0;font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:#8fa193}
@media (prefers-reduced-motion:no-preference){
  .zx-float-a{animation:zxFloat 6s ease-in-out infinite}.zx-float-b{animation:zxFloat 7s ease-in-out -2s infinite}
  @keyframes zxFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
}
@media (max-width:1180px){.zx-float-a{left:-44px}.zx-float-b{right:-40px}}
@media (max-width:980px){
  .zx-claim-grid{grid-template-columns:minmax(0,1fr);gap:40px}
  .zx-float-a{left:-110px}.zx-float-b{right:-100px}
}
@media (max-width:620px){.zx-float-a{left:-40px}.zx-float-b{right:-40px}}
@media (max-width:560px){
  .zx-claim-lead{font-size:15px}
  .zx-phone{width:280px}
  .zx-float{padding:8px 12px 8px 8px;border-radius:14px;gap:9px}
  .zx-float b{font-size:12px}.zx-float small{font-size:11px}
  .zx-float img{width:38px;height:38px}.zx-float i{width:30px;height:30px}
  .zx-float-a{top:-40px}
  .zx-claim-visual{padding-top:44px}
}
@media (max-width:400px){.zx-float-a{left:-14px}.zx-float-b{right:-14px}}

/* ---------- Handy-Abschnitt: Einflug beim Scrollen (nur wenn Bewegung erwünscht ist; ohne JavaScript ist alles sofort sichtbar) ---------- */
.zx-anim .zx-phone{transition:opacity .7s ease,transform 1.1s cubic-bezier(.16,1,.3,1)}
.zx-anim:not(.is-in) .zx-phone{opacity:0;transform:translateY(110px) rotate(7deg) scale(.92)}
.zx-anim .zx-ph-chat>*{transition:opacity .4s ease,transform .6s cubic-bezier(.2,.9,.3,1.25)}
.zx-anim .zx-ph-chat>.in{transform-origin:0 100%}.zx-anim .zx-ph-chat>.out{transform-origin:100% 100%}
.zx-anim:not(.is-in) .zx-ph-chat>*{opacity:0;transform:translateY(22px) scale(.82)}
.zx-anim:not(.is-in) .zx-ph-chat>.in{transform:translate(-26px,18px) scale(.82)}
.zx-anim:not(.is-in) .zx-ph-chat>.out{transform:translate(26px,18px) scale(.82)}
.zx-anim.is-in .zx-ph-chat>:nth-child(1){transition-delay:.75s}
.zx-anim.is-in .zx-ph-chat>:nth-child(2){transition-delay:1.15s}
.zx-anim.is-in .zx-ph-chat>:nth-child(3){transition-delay:2.15s}
.zx-anim.is-in .zx-ph-chat>:nth-child(4){transition-delay:3s}
.zx-anim.is-in .zx-ph-chat>:nth-child(5){transition-delay:3.8s}
.zx-anim .zx-bill-paper{transition:transform .8s cubic-bezier(.2,.9,.3,1.2) 1.35s,opacity .4s ease 1.35s}
.zx-anim:not(.is-in) .zx-bill-paper{opacity:0;transform:translateY(-34px) rotate(9deg) scale(1.15);transition-delay:0s}
.zx-anim .zx-float{transition:opacity .5s ease,translate .9s cubic-bezier(.16,1,.3,1),scale .9s cubic-bezier(.2,.9,.3,1.3)}
.zx-anim:not(.is-in) .zx-float{opacity:0;scale:.8}
.zx-anim:not(.is-in) .zx-float-a{translate:-90px -20px}
.zx-anim:not(.is-in) .zx-float-b{translate:90px 30px}
.zx-anim.is-in .zx-float-a{transition-delay:.45s}
.zx-anim.is-in .zx-float-b{transition-delay:4.5s}
.zx-anim .zx-claim-visual::before{transition:opacity 1.4s ease .2s}
.zx-anim:not(.is-in) .zx-claim-visual::before{opacity:0}
.zx-anim .zx-claim-note{transition:opacity .6s ease 1s}.zx-anim:not(.is-in) .zx-claim-note{opacity:0}
@media (min-width:981px){.zx-anim .zx-phone-wrap{translate:0 calc(var(--zx-p,0) * -34px)}}

/* ---------- WhatsApp-Karten (ersetzen die früheren Kurzformulare) ---------- */
.zx-wa-card{gap:14px}
.zx-wa-card .btn{width:100%}
.zx-wa-note{color:var(--ink-3);line-height:1.6}
.zx-wa-note a{text-decoration:underline;text-underline-offset:2px}
.zx-wa-preview{background:#edf2e9;border:1px solid #d8e2d4;border-radius:14px 14px 14px 4px;padding:12px 15px;display:flex;flex-direction:column;gap:5px}
.zx-wa-preview .lbl{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:#687269}
.zx-wa-preview p{margin:0;font-size:15px;line-height:1.55;color:#15372c}

/* Spalten dürfen schmaler werden als ihr Inhalt (verhindert seitliches Scrollen am Handy, z. B. auf „Beratung“) */
.split>*{min-width:0}

/* Kontakt: vier Wege nebeneinander (WhatsApp, Telefon, E-Mail, Vor Ort) */
.grid-3.zx-contact-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
.zx-contact-grid .tile p{overflow-wrap:anywhere}
@media (max-width:1100px){.grid-3.zx-contact-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){.grid-3.zx-contact-grid{grid-template-columns:1fr}}

/* Kleingedrucktes direkt bei den Werbeaussagen */
.zx-fine{font-size:11.5px;line-height:1.65;color:var(--ink-3);max-width:560px;margin-top:16px}
.zx-fine.zx-fine-wide{max-width:none;margin-top:22px}
.zx-hero-media{position:relative}
.zx-ai-note{position:absolute;right:10px;bottom:10px;font-size:10px;line-height:1;letter-spacing:.02em;color:#fff;background:rgba(11,20,16,.55);padding:5px 8px;border-radius:999px;pointer-events:none}
.zx-claim-fine{font-size:11.5px;line-height:1.65;color:rgba(255,255,255,.72);max-width:520px;margin-top:18px}
.zx-claim-fine a{color:inherit;text-decoration:underline;text-underline-offset:3px}
