/* Leistungsseiten (include/service-page.php). Nutzt die Tokens aus style.css. */

.svx-section {
    --svx-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
    --svx-ease: cubic-bezier(0.16, 1, 0.3, 1);
    --svx-line: color-mix(in srgb, var(--text-bright) 12%, transparent);
    --svx-glass: linear-gradient(160deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.015));
    padding: clamp(48px, 7vw, 96px) 0;
}
.svx-section + .svx-section { padding-top: clamp(24px, 4vw, 56px); }

/* ── Hero: Abstände der Elemente ── */
.svx-hero .hero-badges { margin: 20px 0 0; }
.svx-hero-cta { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; margin-top: 28px; }
.svx-hero .page-hero-text { margin-bottom: 0; }

/* ── Überschriften ── */
.svx-head { max-width: 760px; margin: 0 0 clamp(28px, 4vw, 48px); }
.svx-eyebrow {
    display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px; border-radius: 100px;
    font-size: 12px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase;
    color: var(--accent-primary); background: rgba(124, 92, 255, 0.1); border: 1px solid rgba(124, 92, 255, 0.25);
}
.svx-title, .svx-cta h2 { margin: 16px 0 12px; font-size: clamp(1.9rem, 4.2vw, 3.1rem); font-weight: 700; line-height: 1.1; letter-spacing: -0.03em; color: var(--text-bright); text-wrap: balance; }
.svx-title em, .svx-cta h2 em, .svx-article h2 em {
    font-family: var(--font-accent); font-style: italic; font-weight: 400;
    background: linear-gradient(135deg, var(--accent-primary), var(--accent-secondary));
    -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}
.svx-sub { margin: 0; max-width: 56ch; font-size: clamp(1rem, 1.3vw, 1.125rem); line-height: 1.65; color: var(--text-secondary); }

/* ── Kurz erklärt + Fakten ── */
.svx-intro { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: clamp(16px, 2vw, 24px); align-items: stretch; }
.svx-lede {
    position: relative; padding: clamp(28px, 4vw, 48px); border-radius: 28px; overflow: hidden;
    background: radial-gradient(120% 100% at 0% 0%, rgba(124, 92, 255, 0.2), transparent 60%), var(--svx-glass);
    border: 1px solid rgba(124, 92, 255, 0.28);
}
.svx-lede::after { content: '“'; position: absolute; right: 24px; top: -8px; font-family: var(--font-accent); font-size: 9rem; line-height: 1; color: rgba(124, 92, 255, 0.14); pointer-events: none; }
.svx-lede p { margin: 18px 0 0; font-size: clamp(1.1rem, 1.7vw, 1.4rem); font-weight: 500; line-height: 1.6; letter-spacing: -0.01em; color: var(--text-bright); }

.svx-facts { margin: 0; padding: clamp(8px, 1vw, 12px) clamp(20px, 2.4vw, 32px); border-radius: 28px; background: var(--svx-glass); border: 1px solid rgba(255, 255, 255, 0.09); }
.svx-facts > div { display: grid; grid-template-columns: minmax(96px, 0.38fr) minmax(0, 1fr); gap: 4px 20px; padding: 16px 0; }
.svx-facts > div + div { border-top: 1px solid var(--svx-line); }
.svx-facts dt { font-size: 12px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent-primary); padding-top: 3px; }
.svx-facts dd { margin: 0; font-size: 0.98rem; line-height: 1.6; color: var(--text-secondary); }
.svx-facts a { color: var(--accent-primary); font-weight: 600; }

/* ── Spotlight-Karten (Vorteile, Weiterlesen) ── */
.svx-spot { --mx: 50%; --my: 0%; position: relative; isolation: isolate; overflow: hidden; }
.svx-spot::before, .svx-spot::after { content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity 0.4s var(--svx-ease); }
.svx-spot::before { z-index: -1; background: radial-gradient(380px circle at var(--mx) var(--my), rgba(124, 92, 255, 0.2), transparent 65%); }
.svx-spot::after {
    padding: 1px; background: radial-gradient(240px circle at var(--mx) var(--my), var(--accent-primary), transparent 70%);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
    mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
}
.svx-spot:hover::before, .svx-spot:hover::after, .svx-spot:focus-visible::before, .svx-spot:focus-visible::after { opacity: 1; }

/* ── Vorteile ── */
.svx-benefits { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(12px, 1.6vw, 20px); }
.svx-benefit { padding: clamp(24px, 2.6vw, 34px); border-radius: 24px; background: var(--svx-glass); border: 1px solid rgba(255, 255, 255, 0.08); transition: transform 0.5s var(--svx-spring); }
.svx-benefit:hover { transform: translateY(-6px); }
.svx-index {
    display: block; margin-bottom: 18px; font-size: clamp(2.4rem, 4vw, 3.4rem); font-weight: 800; line-height: 1; letter-spacing: -0.05em;
    color: transparent; -webkit-text-stroke: 1.5px color-mix(in srgb, var(--accent-primary) 85%, transparent);
}
.svx-benefit h3 { margin: 0 0 10px; font-size: 1.15rem; font-weight: 700; line-height: 1.3; color: var(--text-bright); }
.svx-benefit p { margin: 0; font-size: 0.98rem; line-height: 1.65; color: var(--text-secondary); }

/* ── Ablauf: Zeitleiste ── */
.svx-process { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: clamp(32px, 6vw, 88px); align-items: start; }
.svx-process-side { position: sticky; top: 110px; }
.svx-side-btn { margin-top: 8px; }
.svx-steps { --p: 1; position: relative; list-style: none; margin: 0; padding: 0; display: grid; gap: 18px; }
.svx-steps::before, .svx-steps::after { content: ''; position: absolute; left: 27px; top: 28px; width: 2px; border-radius: 2px; }
.svx-steps::before { bottom: 28px; background: var(--svx-line); }
.svx-steps::after { height: calc((100% - 56px) * var(--p)); background: linear-gradient(180deg, var(--accent-primary), var(--accent-secondary)); transition: height 0.3s linear; }
.svx-step { position: relative; display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: clamp(14px, 2vw, 22px); align-items: start; }
.svx-node {
    position: relative; z-index: 1; display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%;
    font-size: 1.15rem; font-weight: 800; color: #fff; background: linear-gradient(135deg, var(--accent-primary), var(--accent-secondary));
    box-shadow: 0 0 0 6px var(--bg-void), 0 14px 30px -10px rgba(124, 92, 255, 0.7);
}
.svx-step-body { padding: 20px 24px; border-radius: 20px; background: var(--svx-glass); border: 1px solid rgba(255, 255, 255, 0.08); transition: transform 0.5s var(--svx-spring), border-color 0.3s; }
.svx-step:hover .svx-step-body { transform: translateX(6px); border-color: rgba(124, 92, 255, 0.4); }
.svx-step h3 { margin: 0 0 8px; font-size: 1.12rem; font-weight: 700; color: var(--text-bright); }
.svx-step p { margin: 0; font-size: 0.98rem; line-height: 1.7; color: var(--text-secondary); }
.svx-step a { color: var(--accent-primary); font-weight: 600; }

/* ── Wissensteil mit Inhaltsverzeichnis ── */
.svx-learn { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: clamp(32px, 6vw, 80px); align-items: start; }
.svx-toc { position: sticky; top: 110px; padding: 22px 8px 22px 0; }
.svx-toc-title { margin: 0 0 14px; font-size: 12px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-muted); }
.svx-toc ol { list-style: none; margin: 0; padding: 0; border-left: 1px solid var(--svx-line); }
.svx-toc a { display: block; margin-left: -1px; padding: 8px 0 8px 16px; border-left: 2px solid transparent; font-size: 0.92rem; line-height: 1.4; color: var(--text-secondary); text-decoration: none; transition: color 0.25s, border-color 0.25s, padding-left 0.3s var(--svx-spring); }
.svx-toc a:hover { color: var(--text-bright); }
.svx-toc a.is-active { color: var(--text-bright); font-weight: 600; border-left-color: var(--accent-primary); padding-left: 20px; }
.svx-toc a:focus-visible { outline: 2px solid var(--accent-primary); outline-offset: 2px; }

.svx-prose { max-width: 760px; }
.svx-article { margin-bottom: clamp(48px, 6vw, 80px); scroll-margin-top: 110px; }
.svx-article:last-child { margin-bottom: 0; }
.svx-article h2 { margin: 0 0 20px; font-size: clamp(1.6rem, 3vw, 2.2rem); font-weight: 700; line-height: 1.15; letter-spacing: -0.025em; color: var(--text-bright); text-wrap: balance; }
.svx-article > p { margin: 0 0 20px; font-size: 1.0625rem; line-height: 1.85; color: var(--text-secondary); max-width: 68ch; }
.svx-article a, .svx-faq a, .svx-note a { color: var(--accent-primary); font-weight: 600; }

.svx-list { list-style: none; margin: 8px 0 24px; padding: 0; display: grid; gap: 10px; }
.svx-list li { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 14px; align-items: start; padding: 14px 18px; border-radius: 16px; background: var(--svx-glass); border: 1px solid rgba(255, 255, 255, 0.07); font-size: 0.98rem; line-height: 1.65; color: var(--text-secondary); }
.svx-list li strong { color: var(--text-bright); }
.svx-list svg { width: 22px; height: 22px; margin-top: 2px; padding: 3px; border-radius: 50%; color: var(--accent-tertiary); background: rgba(0, 212, 170, 0.14); }

.svx-note { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 14px; align-items: start; margin: 8px 0 0; padding: 18px 22px; border-radius: 18px; background: rgba(124, 92, 255, 0.08); border: 1px solid rgba(124, 92, 255, 0.24); }
.svx-note svg { width: 22px; height: 22px; margin-top: 2px; color: var(--accent-primary); }
.svx-note p { margin: 0; font-size: 0.96rem; line-height: 1.7; color: var(--text-secondary); }
.svx-disclaimer { max-width: 860px; margin: clamp(28px, 4vw, 48px) auto 0; }

/* ── Passt / passt nicht ── */
.svx-fit-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(12px, 1.6vw, 20px); }
.svx-fit { padding: clamp(24px, 3vw, 36px); border-radius: 26px; background: var(--svx-glass); border: 1px solid rgba(255, 255, 255, 0.08); }
.svx-fit h3 { display: flex; align-items: center; gap: 12px; margin: 0 0 18px; font-size: 1.2rem; font-weight: 700; color: var(--text-bright); }
.svx-fit-icon { display: inline-grid; place-items: center; width: 36px; height: 36px; border-radius: 12px; flex-shrink: 0; }
.svx-fit-icon svg { width: 20px; height: 20px; }
.svx-fit--yes { border-color: rgba(0, 212, 170, 0.28); background: radial-gradient(100% 80% at 0% 0%, rgba(0, 212, 170, 0.1), transparent 60%), var(--svx-glass); }
.svx-fit--yes .svx-fit-icon { color: var(--accent-tertiary); background: rgba(0, 212, 170, 0.14); }
.svx-fit--no .svx-fit-icon { color: var(--accent-secondary); background: rgba(255, 107, 157, 0.14); }
.svx-fit ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.svx-fit li { position: relative; padding-left: 20px; font-size: 0.98rem; line-height: 1.65; color: var(--text-secondary); }
.svx-fit li::before { content: ''; position: absolute; left: 0; top: 0.65em; width: 7px; height: 7px; border-radius: 50%; background: var(--accent-tertiary); }
.svx-fit--no li::before { background: var(--accent-secondary); }

/* ── Stolpersteine ── */
.svx-pits { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(12px, 1.6vw, 20px); }
.svx-pit { display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: 18px; align-items: start; padding: clamp(20px, 2.4vw, 28px); border-radius: 22px; background: var(--svx-glass); border: 1px solid rgba(255, 255, 255, 0.08); transition: transform 0.5s var(--svx-spring), border-color 0.3s; }
.svx-pit:hover { transform: translateY(-4px); border-color: rgba(255, 179, 71, 0.45); }
.svx-pit-icon { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 14px; color: var(--accent-warm); background: rgba(255, 179, 71, 0.12); border: 1px solid rgba(255, 179, 71, 0.3); }
.svx-pit-icon svg { width: 24px; height: 24px; }
.svx-pit h3 { margin: 2px 0 8px; font-size: 1.08rem; font-weight: 700; color: var(--text-bright); }
.svx-pit p { margin: 0; font-size: 0.96rem; line-height: 1.65; color: var(--text-secondary); }

/* ── Weiterlesen ── */
.svx-pit:last-child:nth-child(odd) { grid-column: 1 / -1; }
.svx-related { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: clamp(12px, 1.6vw, 20px); }
.svx-rel { display: grid; gap: 8px; align-content: start; min-height: 150px; padding: 24px 56px 24px 24px; border-radius: 22px; text-decoration: none; background: var(--svx-glass); border: 1px solid rgba(255, 255, 255, 0.08); transition: transform 0.5s var(--svx-spring); }
.svx-rel:hover { transform: translateY(-5px); }
.svx-rel:active { transform: scale(0.98); }
.svx-rel:focus-visible { outline: 2px solid var(--accent-primary); outline-offset: 3px; }
.svx-rel strong { font-size: 1.08rem; color: var(--text-bright); }
.svx-rel span { font-size: 0.94rem; line-height: 1.55; color: var(--text-secondary); }
.svx-rel-arrow { position: absolute; right: 18px; top: 18px; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, 0.16); color: var(--text-secondary); transition: transform 0.5s var(--svx-spring), background 0.3s, color 0.3s; }
.svx-rel-arrow svg { width: 16px; height: 16px; }
.svx-rel:hover .svx-rel-arrow { transform: rotate(45deg); background: var(--accent-primary); border-color: var(--accent-primary); color: #fff; }

/* ── FAQ ── */
.svx-faq-wrap { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: clamp(32px, 6vw, 88px); align-items: start; }
.svx-faq-side { position: sticky; top: 110px; }
.svx-contact { display: grid; gap: 10px; margin-top: 8px; }
.svx-contact a { display: inline-flex; align-items: center; gap: 12px; width: fit-content; padding: 10px 18px 10px 14px; border-radius: 100px; font-weight: 600; text-decoration: none; color: var(--text-bright); background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.12); transition: transform 0.4s var(--svx-spring), border-color 0.25s; }
.svx-contact a:hover { transform: translateX(4px); border-color: var(--accent-primary); }
.svx-contact a:focus-visible { outline: 2px solid var(--accent-primary); outline-offset: 2px; }
.svx-contact svg { width: 20px; height: 20px; color: var(--accent-primary); }
.svx-faq { display: grid; gap: 12px; }
.svx-faq .faq-static-item { margin: 0; padding: 22px 26px 22px 28px; border-radius: 20px; border: 1px solid rgba(255, 255, 255, 0.08); border-left: 3px solid var(--accent-primary); background: var(--svx-glass); }
.svx-faq .faq-static-item h3 { margin: 0 0 10px; font-size: 1.05rem; font-weight: 700; line-height: 1.4; color: var(--text-bright); }
.svx-faq .faq-static-item p { margin: 0; font-size: 0.98rem; line-height: 1.7; color: var(--text-secondary); }

/* ── CTA ── */
.svx-cta { padding: clamp(56px, 8vw, 112px) 0 clamp(40px, 6vw, 72px); }
.svx-cta-card { position: relative; overflow: hidden; max-width: 860px; margin: 0 auto; padding: clamp(36px, 6vw, 72px); text-align: center; border-radius: 32px; background: radial-gradient(90% 120% at 50% 0%, rgba(124, 92, 255, 0.28), transparent 60%), linear-gradient(135deg, rgba(124, 92, 255, 0.1), rgba(255, 107, 157, 0.06)); border: 1px solid rgba(124, 92, 255, 0.28); }
.svx-cta-card::before { content: ''; position: absolute; inset: 0 0 auto; height: 3px; background: linear-gradient(90deg, var(--accent-primary), var(--accent-secondary), var(--accent-tertiary)); }
.svx-cta-card p { margin: 0 auto; max-width: 52ch; font-size: 1.0625rem; line-height: 1.7; color: var(--text-secondary); }

/* ── Responsiv ── */
@media (max-width: 1100px) {
    .svx-intro, .svx-process, .svx-faq-wrap { grid-template-columns: minmax(0, 1fr); }
    .svx-process-side, .svx-faq-side { position: static; }
    .svx-benefits { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
    .svx-learn { grid-template-columns: minmax(0, 1fr); gap: 20px; }
    .svx-toc { position: static; padding: 0; }
    .svx-toc ol { display: flex; gap: 8px; overflow-x: auto; border-left: 0; padding-bottom: 6px; scrollbar-width: none; }
    .svx-toc ol::-webkit-scrollbar { display: none; }
    .svx-toc li { flex-shrink: 0; }
    .svx-toc a { margin: 0; padding: 8px 14px; border: 1px solid var(--svx-line); border-radius: 100px; }
    .svx-toc a.is-active { padding-left: 14px; border-color: var(--accent-primary); }
}
@media (max-width: 680px) {
    .svx-benefits, .svx-fit-grid, .svx-pits { grid-template-columns: minmax(0, 1fr); }
    .svx-facts > div { grid-template-columns: minmax(0, 1fr); }
    .svx-step { grid-template-columns: 44px minmax(0, 1fr); }
    .svx-node { width: 44px; height: 44px; font-size: 1rem; }
    .svx-steps::before, .svx-steps::after { left: 21px; }
    .svx-step-body { padding: 16px 18px; }
    .svx-hero-cta .btn { flex: 1 1 100%; justify-content: center; }
}

/* ── Bewegung & Themes ── */
@media (hover: none) { .svx-spot::before, .svx-spot::after { display: none; } }
@media (prefers-reduced-motion: reduce) {
    .svx-benefit, .svx-step-body, .svx-pit, .svx-rel, .svx-rel-arrow, .svx-contact a, .svx-toc a, .svx-steps::after { transition: none; }
    .svx-benefit:hover, .svx-step:hover .svx-step-body, .svx-pit:hover, .svx-rel:hover, .svx-contact a:hover { transform: none; }
}
[data-theme="light"] .svx-section { --svx-glass: linear-gradient(160deg, #fff, rgba(0, 0, 0, 0.02)); }
[data-theme="light"] .svx-benefit, [data-theme="light"] .svx-step-body, [data-theme="light"] .svx-pit, [data-theme="light"] .svx-rel,
[data-theme="light"] .svx-fit, [data-theme="light"] .svx-facts, [data-theme="light"] .svx-list li, [data-theme="light"] .svx-faq .faq-static-item { border-color: rgba(0, 0, 0, 0.09); }
[data-theme="light"] .svx-node { box-shadow: 0 0 0 6px var(--bg-void), 0 14px 30px -10px rgba(124, 92, 255, 0.5); }
[data-theme="light"] .svx-contact a { background: rgba(0, 0, 0, 0.03); border-color: rgba(0, 0, 0, 0.12); }