/* Leistungsseiten /website/ und /e-mail-domain/.
   Baut auf styles-v2.css auf. Die Seiten verzichten bewusst auf .reveal und die
   zeilenweise animierten Ueberschriften: Der Text ist sofort lesbar, auch fuer
   Crawler und mit reduzierter Bewegung. */

/* Kopfzeile immer dunkel: Mit reduzierter Bewegung setzt site-v2.js die Klasse
   .scrolled nie, und das weisse Logo laege sonst transparent ueber hellen Abschnitten. */
.sp header{background:rgba(8,8,8,.88);backdrop-filter:blur(12px);box-shadow:0 1px 0 var(--line)}

/* Einstieg */
.sp-hero{background:linear-gradient(180deg,#050505,#0c0c0c 60%,#101010);color:var(--white);padding:clamp(7.5rem,16vh,10rem) 0 clamp(3.5rem,8vh,5.5rem)}
.crumbs{list-style:none;display:flex;flex-wrap:wrap;gap:.5rem;padding:0;margin:0 0 1.8rem;font-size:.85rem;color:var(--muted)}
.crumbs li+li::before{content:"/";margin-right:.5rem;color:#5c5c58}
.crumbs a{border-bottom:1px solid #3d3d3a;transition:color .25s ease}
.crumbs a:hover{color:var(--sage)}
.crumbs [aria-current]{color:#bdbdb8}
.sp-hero h1{font-size:clamp(2.3rem,5.2vw,4.4rem);line-height:1.03;font-weight:700;max-width:15ch;text-wrap:balance;margin-bottom:1.4rem}
.sp-lead{font-size:clamp(1.08rem,1.5vw,1.3rem);color:#d4d4d0;max-width:640px;margin-bottom:2.2rem}
.sp-lead .ex{background:rgba(120,187,139,.18);color:var(--sage-bright);border-radius:7px;padding:.05rem .42rem;font-weight:700;white-space:nowrap}
.sp-facts{display:flex;flex-wrap:wrap;gap:1.1rem 3.2rem;margin:0 0 2.4rem;padding:1.3rem 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);max-width:820px}
.sp-facts dt{font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);font-weight:700;margin-bottom:.25rem}
.sp-facts dd{margin:0;font-weight:700;font-size:clamp(1.15rem,1.8vw,1.45rem);letter-spacing:-.02em;line-height:1.2}
.sp-facts small{display:block;font-size:.8rem;font-weight:400;letter-spacing:0;color:#bdbdb8}
.sp-cta-row{display:flex;gap:1rem 1.6rem;align-items:center;flex-wrap:wrap}
.sp-link{font-weight:700;border-bottom:2px solid var(--sage);transition:color .25s ease}
.sp-link:hover{color:var(--sage)}
@media(max-width:760px){.sp-hero{padding-top:6.5rem}.sp-cta-row .button{width:100%}.sp-facts{gap:1rem 2rem}}

/* Inhalt: links die Frage, rechts die Antwort */
.sp-body{padding:clamp(3.5rem,9vh,6.5rem) 0}
.sp-row{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,7fr);gap:1.1rem 4rem;padding:2.8rem 0;border-top:1px solid var(--line-light)}
.sp-row:first-child{border-top:0;padding-top:0}
.sp-row:last-child{padding-bottom:0}
.sp-row h2,.sp-h2{font-size:clamp(1.6rem,2.8vw,2.3rem);letter-spacing:-.04em;line-height:1.08;text-wrap:balance}
.sp-text p{color:var(--ink-soft);font-size:1.08rem;margin-bottom:1rem;max-width:640px}
.sp-text p:last-child{margin-bottom:0}
.sp-text strong{color:var(--ink)}
.sp-text a,.sp .faq details p a{color:var(--ink);font-weight:700;border-bottom:2px solid var(--sage);transition:color .25s ease}
.sp-text a:hover,.sp .faq details p a:hover{color:#2f6b45}
.sp-text .ex{background:rgba(120,187,139,.18);color:#2f6b45;border-radius:7px;padding:.05rem .42rem;font-weight:700;white-space:nowrap}
.sp-list{list-style:none;padding:0;margin:0 0 1.4rem;max-width:640px}
.sp-list li{position:relative;padding:.6rem 0 .6rem 1.7rem;border-top:1px solid var(--line-light);font-size:1.05rem;line-height:1.45;color:var(--ink)}
.sp-list li:last-child{border-bottom:1px solid var(--line-light)}
.sp-list li::before{content:"✓";position:absolute;left:0;top:.6rem;color:#3f7a55;font-weight:700}
@media(max-width:860px){.sp-row{grid-template-columns:1fr;padding:2.2rem 0}}

/* Preis */
.sp-price{display:flex;flex-wrap:wrap;align-items:baseline;gap:.4rem 1.2rem;background:var(--paper-bright);border:1px solid var(--line-light);border-radius:18px;padding:1.3rem 1.5rem;margin-bottom:1.5rem;max-width:640px}
.sp-price b{font-size:clamp(2rem,4vw,2.9rem);letter-spacing:-.045em;line-height:1;color:var(--ink)}
.sp-price span{color:var(--ink-soft);font-size:.98rem}

/* Ansprechpartner */
.sp-me{display:grid;grid-template-columns:112px minmax(0,1fr);gap:1.4rem;align-items:start}
.sp-me picture{display:block;position:relative;isolation:isolate}
.sp-me picture::after{content:"";position:absolute;right:-7px;bottom:-7px;width:32%;height:32%;background:var(--sage);z-index:-1}
.sp-me img{width:112px;height:auto;aspect-ratio:4/5;object-fit:cover}
.sp-me .sp-text{min-width:0}
@media(max-width:480px){.sp-me{grid-template-columns:84px minmax(0,1fr);gap:1.1rem}.sp-me img{width:84px}}

/* Ablauf und Fragen */
.sp-steps{padding-top:0;padding-bottom:clamp(1.5rem,4vh,3rem)}
.sp-steps .sp-h2,.sp .faq .sp-h2{margin-bottom:2rem}
.sp .faq{padding-top:clamp(2.5rem,6vh,4rem)}
.sp .faq details p{font-size:1.04rem}

/* Abschluss */
.sp-end{background:var(--forest-2);color:var(--white)}
.sp-end h2{font-size:clamp(2.2rem,5vw,4rem);letter-spacing:-.05em;max-width:16ch;text-wrap:balance}
.sp-end-grid{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:2.5rem 4rem;align-items:end}
.sp-end-grid>div>p{color:#d4d4d0;font-size:1.08rem;margin:1.4rem 0 2rem;max-width:560px}
.sp-end .direct{margin-top:0}
.sp-more{margin-top:2.6rem;padding-top:1.6rem;border-top:1px solid var(--line);color:#bdbdb8;font-size:1rem;display:flex;flex-wrap:wrap;gap:.6rem 2.4rem}
.sp-more a{color:var(--white);font-weight:700;border-bottom:2px solid var(--sage);transition:color .25s ease}
.sp-more a:hover{color:var(--sage)}
@media(max-width:900px){.sp-end-grid{grid-template-columns:1fr;align-items:start}}

/* Sprungziele: Lenis ignoriert scroll-margin, darum sitzt der Anker als leerer Block
   oberhalb des Inhalts; so verschwindet die Ueberschrift nicht unter der festen Kopfzeile. */
.anchor{display:block;position:relative;top:-88px;height:0;visibility:hidden}