/* Süba – Ergänzungen zum Original-CSS. Nutzt nur die Original-Tokens aus :root. */

/* Einblenden (ersetzt framer-motion). Ohne JavaScript bleibt alles sichtbar. */
@media (scripting: enabled) {
  [data-reveal] {
    opacity: 0;
    transform: translateY(var(--ry, 20px));
    transition: opacity .9s cubic-bezier(.2,.7,.2,1), transform .9s cubic-bezier(.2,.7,.2,1);
  }
  [data-reveal].is-in { opacity: 1; transform: none; }
  [data-rotator] { opacity: 0; transform: translateY(100%); transition: opacity .35s ease, transform .35s ease; }
  [data-rotator].is-in { opacity: 1; transform: none; }
}

/* Logo: nur sanftes Einblenden, keine Veränderung von Form, Farbe oder Größe. */
@media (scripting: enabled) and (prefers-reduced-motion: no-preference) {
  .logo-img { animation: logo-fade .6s ease-out both; }
}
@keyframes logo-fade { from { opacity: 0; } to { opacity: 1; } }

/* FAQ-Antworten */
.faq-answer { overflow: hidden; height: 0; opacity: 0; transition: height .35s ease, opacity .35s ease; }
li.is-open .faq-answer { opacity: 1; }
li.is-open button[aria-expanded] > span:last-child { transform: rotate(45deg); }
button[aria-expanded] > span:last-child { transition: transform .3s ease; }

.form-preview-note {
  margin-top: 1rem; padding: .85rem 1rem; border-radius: 1rem;
  border: 1px solid rgba(217,183,121,.35); background: rgba(217,183,121,.08);
  color: var(--fg); font-size: 13px; line-height: 1.5;
}

@media (prefers-reduced-motion: reduce) {
  [data-reveal], [data-rotator] { transition: none !important; }
}

/* ---------- Neue Bausteine (Präfix sx-) ---------- */
.sx-glow { position: absolute; width: 420px; height: 420px; border-radius: 9999px; filter: blur(120px); }
.sx-glow--electric { left: -8rem; top: 25%; background: rgba(124,92,255,.10); }
.sx-glow--gold { right: -8rem; top: 33%; background: rgba(217,183,121,.15); }

/* Rechner */
.sx-calc-grid { display: grid; gap: 3rem; }
@media (min-width: 1024px) { .sx-calc-grid { grid-template-columns: 5fr 7fr; align-items: start; } }
.sx-calc { position: relative; display: grid; gap: 1.5rem; padding: 1.5rem; background: rgba(12,11,14,.95); }
@media (min-width: 768px) { .sx-calc { padding: 2.5rem; } }
.sx-field { display: grid; gap: .75rem; }
.sx-field-row { display: grid; gap: 1.5rem; }
@media (min-width: 640px) { .sx-field-row { grid-template-columns: 1fr 1fr; } }
.sx-range { display: flex; align-items: center; gap: 1rem; }
.sx-range output { min-width: 7.5rem; text-align: right; font-family: var(--font-display); font-size: 1.35rem; color: var(--fg); font-variant-numeric: tabular-nums; }
.sx-range input[type=range] { flex: 1; appearance: none; height: 2px; background: linear-gradient(90deg, var(--gold) var(--p, 50%), rgba(244,239,230,.12) var(--p, 50%)); border-radius: 2px; outline: none; }
.sx-range input[type=range]::-webkit-slider-thumb { appearance: none; width: 20px; height: 20px; border-radius: 50%; background: var(--gold); border: 3px solid #07070A; box-shadow: 0 0 0 1px var(--gold), 0 0 18px -4px rgba(217,183,121,.7); cursor: pointer; }
.sx-range input[type=range]::-moz-range-thumb { width: 16px; height: 16px; border-radius: 50%; background: var(--gold); border: 3px solid #07070A; box-shadow: 0 0 0 1px var(--gold); cursor: pointer; }
.sx-range input[type=range]:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 3px rgba(217,183,121,.5); }
.sx-result { display: grid; gap: 1.25rem; padding: 1.25rem; border-radius: 1.25rem; border: 1px solid rgba(217,183,121,.25); background: linear-gradient(135deg, rgba(217,183,121,.08), rgba(124,92,255,.04)); }
@media (min-width: 640px) { .sx-result { grid-template-columns: auto 1fr; align-items: center; gap: 2rem; } }
.sx-rate { margin-top: .35rem; font-family: var(--font-display); font-size: clamp(40px, 6vw, 56px); line-height: 1; color: var(--gold); font-variant-numeric: tabular-nums; }
.sx-facts { display: grid; gap: .5rem; margin: 0; }
.sx-facts div { display: flex; justify-content: space-between; gap: 1rem; border-bottom: 1px solid var(--line); padding-bottom: .4rem; }
.sx-facts dt { font-family: var(--font-mono); font-size: 10px; text-transform: uppercase; letter-spacing: .18em; color: var(--muted); }
.sx-facts dd { margin: 0; color: var(--fg); font-variant-numeric: tabular-nums; font-size: 14px; }

/* Schritt-Formular */
.sx-steps { display: flex; align-items: center; gap: .5rem; }
.sx-steps span { flex: 1; height: 2px; border-radius: 2px; background: rgba(244,239,230,.12); transition: background .4s ease; }
.sx-steps span.is-done { background: var(--gold); }
.sx-step-label { display: flex; justify-content: space-between; font-family: var(--font-mono); font-size: 10px; text-transform: uppercase; letter-spacing: .18em; color: var(--muted); }
.sx-step-label b { color: var(--gold); font-weight: 400; }
.sx-step { display: grid; gap: 1.5rem; }
.sx-step[hidden] { display: none; }
.sx-step-nav { display: flex; gap: .75rem; }
.sx-step-nav > * { flex: 1; }
.sx-back { border-radius: 9999px; padding: 1rem 1.25rem; font-size: 14px; }
.sx-error { color: #ffb4a0; font-size: 12.5px; margin-top: -.5rem; }
.sx-error:empty { display: none; }

/* ---------- Grundbausteine der neuen Anordnung ---------- */
.sx-sec { padding-top: clamp(4rem, 7vw, 7rem); padding-bottom: clamp(4rem, 7vw, 7rem); }
.sx-eyebrow { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: clamp(2rem, 4vw, 3.5rem); font-family: var(--font-mono), ui-monospace, monospace; font-size: 10px; letter-spacing: .32em; text-transform: uppercase; color: var(--muted); }
.sx-eyebrow > span:last-child { text-align: right; }
.sx-h2 { margin: 0; color: var(--fg); font-size: clamp(36px, 5vw, 68px); }
.sx-lede { margin-top: 1.25rem; max-width: 34rem; font-size: clamp(15px, 1.15vw, 17px); line-height: 1.65; color: rgba(244,239,230,.72); }
.sx-fine { margin-top: 1rem; font-family: var(--font-mono), monospace; font-size: 10px; letter-spacing: .24em; text-transform: uppercase; color: rgba(244,239,230,.45); }
.sx-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem; margin-top: 2rem; }
.sx-trust { display: flex; flex-wrap: wrap; gap: .4rem 1rem; margin-top: 1rem; font-family: var(--font-mono), monospace; font-size: 10px; letter-spacing: .24em; text-transform: uppercase; color: rgba(244,239,230,.55); }
.sx-trust span { white-space: nowrap; }
.sx-sec-head { display: grid; gap: 1rem; margin-bottom: clamp(2rem, 4vw, 3.5rem); }
@media (min-width: 1024px) { .sx-sec-head { grid-template-columns: 1.25fr 1fr; align-items: end; gap: 3rem; } .sx-sec-head .sx-lede { margin: 0 0 .9rem; } }
.sx-split { display: grid; gap: clamp(2.5rem, 5vw, 5rem); }
@media (min-width: 1024px) {
  .sx-split { grid-template-columns: 1fr 1fr; align-items: start; }
  .sx-split--calc { grid-template-columns: 1.1fr .9fr; }
  .sx-split--contact { grid-template-columns: .85fr 1.15fr; }
  .sx-split--faq { grid-template-columns: .8fr 1.2fr; }
}
.sx-split--calc .sx-calc { margin-top: 2rem; }
.sx-mail { font-size: 14px; color: rgba(244,239,230,.7); text-decoration: underline; text-decoration-color: rgba(217,183,121,.4); text-underline-offset: 4px; }
.sx-mail:hover { color: var(--gold); }

/* Leistungskarten mit Higgsfield-Bildern */
.sx-cards { display: grid; gap: 1rem; }
@media (max-width: 767px) {
  .sx-cards { grid-auto-flow: column; grid-auto-columns: 84%; overflow-x: auto; scroll-snap-type: x mandatory; margin-inline: -1.5rem; padding: 0 1.5rem .75rem; scrollbar-width: none; }
  .sx-cards::-webkit-scrollbar { display: none; }
  .sx-card { scroll-snap-align: center; }
}
@media (min-width: 768px) { .sx-cards { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1280px) { .sx-cards { grid-template-columns: repeat(4, 1fr); } }
.sx-card { position: relative; display: flex; flex-direction: column; overflow: hidden; border-radius: 24px; border: 1px solid rgba(244,239,230,.08); background: #0E0E12; transition: border-color .4s ease, box-shadow .5s ease; }
.sx-card:hover { border-color: rgba(217,183,121,.45); box-shadow: 0 30px 80px -40px rgba(217,183,121,.45); }
.sx-card-img { position: relative; display: block; aspect-ratio: 4 / 3; overflow: hidden; }
.sx-card-img img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.02); filter: saturate(.85) brightness(.82); transition: transform 1.2s cubic-bezier(.2,.7,.2,1), filter .6s ease; }
.sx-card:hover .sx-card-img img { transform: scale(1.09); filter: saturate(1) brightness(1); }
.sx-card-img::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to bottom, transparent 55%, #0E0E12); }
.sx-card-body { display: flex; flex: 1; flex-direction: column; gap: .6rem; padding: 1.1rem 1.4rem 1.5rem; }
.sx-card-no { font-family: var(--font-mono), monospace; font-size: 10px; letter-spacing: .24em; text-transform: uppercase; color: var(--gold); }
.sx-card-title { font-family: var(--font-display), serif; font-size: 28px; line-height: 1.15; letter-spacing: -.015em; color: var(--fg); }
.sx-card-text { font-size: 14px; line-height: 1.6; color: rgba(244,239,230,.65); }
.sx-more { margin-top: auto; padding-top: .75rem; font-family: var(--font-mono), monospace; font-size: 10px; letter-spacing: .24em; text-transform: uppercase; color: var(--gold); transition: letter-spacing .4s ease; }
.sx-card:hover .sx-more, .sx-other:hover .sx-more { letter-spacing: .32em; }
.sx-note { margin-top: 2rem; max-width: 46rem; font-size: 14px; line-height: 1.6; color: rgba(244,239,230,.6); }
.sx-note a { color: var(--gold); white-space: nowrap; }

/* Zeitleiste (Ablauf, Warum Süba) */
.sx-timeline { position: relative; display: grid; list-style: none; margin: 0; padding: 0; }
.sx-timeline li { display: grid; grid-template-columns: 3.25rem 1fr; gap: 1rem; padding: 1.35rem 0; border-top: 1px solid var(--line); }
.sx-timeline li:last-child { border-bottom: 1px solid var(--line); }
.sx-tl-no { display: inline-flex; width: 2.6rem; height: 2.6rem; align-items: center; justify-content: center; border-radius: 50%; border: 1px solid rgba(244,239,230,.15); background: rgba(217,183,121,.03); font-family: var(--font-mono), monospace; font-size: 11px; color: var(--gold); transition: border-color .8s ease .3s, box-shadow .8s ease .3s; }
.sx-timeline li.is-in .sx-tl-no { border-color: rgba(217,183,121,.6); box-shadow: 0 0 24px -6px rgba(217,183,121,.6); }
.sx-timeline h3, .sx-point h2 { margin: 0 0 .35rem; font-family: var(--font-display), serif; font-size: 22px; font-weight: 400; line-height: 1.25; letter-spacing: -.01em; color: var(--fg); }
.sx-timeline p, .sx-point p { margin: 0; font-size: 14px; line-height: 1.6; color: rgba(244,239,230,.65); }
.sx-flow .sx-timeline { margin-top: 2rem; }

/* Kontakt + FAQ */
.sx-benefits { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; margin: 2rem 0 0; padding: 0; list-style: none; }
.sx-benefits li { display: grid; gap: .2rem; padding: 1rem; border-radius: 1rem; border: 1px solid rgba(244,239,230,.08); background: rgba(244,239,230,.02); }
.sx-benefits b { font-weight: 500; font-size: 15px; color: var(--fg); }
.sx-benefits span { font-size: 12px; color: rgba(244,239,230,.55); }
.sx-faq-list { margin: 0; padding: 0; list-style: none; border-top: 1px solid rgba(244,239,230,.1); }

/* Unterseiten */
.sx-sub-hero { padding-top: 7.5rem; padding-bottom: 3rem; }
.sx-sub-hero-grid { display: grid; gap: 2.5rem; align-items: center; }
@media (min-width: 1024px) { .sx-sub-hero-grid { grid-template-columns: 1.05fr .95fr; } .sx-sub-hero { padding-top: 9rem; padding-bottom: 5rem; } }
.sx-back-link { display: inline-block; transition: color .2s; }
.sx-back-link:hover { color: var(--gold); }
.sx-sub-media { position: relative; margin: 0; overflow: hidden; aspect-ratio: 4 / 4.2; }
@media (min-width: 1024px) { .sx-sub-media { aspect-ratio: 4 / 4.4; } }
.sx-sub-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform: scale(1.04); will-change: transform; }
.sx-sub-media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, #07070A 0%, rgba(7,7,10,.2) 45%, transparent 70%); }
.sx-sub-media figcaption { position: absolute; left: 1.25rem; bottom: 1.1rem; z-index: 1; }
.sx-points { display: grid; gap: 1rem; }
@media (min-width: 768px) { .sx-points { grid-template-columns: repeat(2, 1fr); } }
.sx-point { display: grid; gap: .9rem; padding: 1.5rem; }
.sx-others { display: grid; gap: 1rem; }
@media (min-width: 768px) { .sx-others { grid-template-columns: repeat(3, 1fr); } }
.sx-other { display: flex; flex-direction: column; gap: .5rem; padding: .75rem .75rem 1.25rem; border-radius: 22px; border: 1px solid rgba(244,239,230,.08); background: rgba(244,239,230,.02); transition: border-color .4s ease; }
.sx-other:hover { border-color: rgba(217,183,121,.4); }
.sx-other > span:not(.sx-other-img) { padding: 0 .5rem; }
.sx-other-img { display: block; aspect-ratio: 16 / 10; overflow: hidden; border-radius: 14px; margin-bottom: .5rem; }
.sx-other-img img { width: 100%; height: 100%; object-fit: cover; filter: brightness(.85); transition: transform 1s cubic-bezier(.2,.7,.2,1), filter .5s; }
.sx-other:hover .sx-other-img img { transform: scale(1.06); filter: brightness(1); }

/* ---------- Menü „Schwebende Pille“ ---------- */
.sx-nav { position: fixed; inset: 0 0 auto; z-index: 70; display: flex; justify-content: center; padding: 14px 12px 0; pointer-events: none; transition: transform .55s cubic-bezier(.2,.7,.2,1); }
.sx-nav.is-hidden { transform: translateY(calc(-100% - 24px)); }
.sx-nav-pill { position: relative; display: flex; align-items: center; gap: .75rem; width: min(100%, 74rem); padding: 8px 8px 8px 18px; border-radius: 999px; border: 1px solid rgba(244,239,230,.08); background: rgba(14,14,18,.38); -webkit-backdrop-filter: blur(18px) saturate(1.2); backdrop-filter: blur(18px) saturate(1.2); box-shadow: 0 20px 60px -30px rgba(0,0,0,.8); pointer-events: auto; transition: width .7s cubic-bezier(.2,.7,.2,1), background .4s ease, border-color .4s ease; }
.sx-nav.is-scrolled .sx-nav-pill { width: min(100%, 62rem); background: rgba(10,10,14,.84); border-color: rgba(217,183,121,.2); }
.sx-nav.is-menu .sx-nav-pill { background: transparent; border-color: transparent; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
.sx-nav-logo { display: block; flex-shrink: 0; height: 32px; }
.sx-nav-logo img { display: block; height: 100%; width: auto; }
@media (min-width: 768px) { .sx-nav-logo { height: 40px; } }
.sx-nav-links { position: relative; z-index: 0; display: none; gap: .15rem; margin: 0 auto; transition: opacity .5s ease; }
@media (min-width: 1024px) { .sx-nav-links { display: flex; } }
.sx-nav-links a { position: relative; display: inline-flex; align-items: center; gap: .5rem; padding: .6rem 1rem; border-radius: 999px; font-size: 13px; letter-spacing: -.01em; color: rgba(244,239,230,.7); transition: color .25s ease; }
.sx-nav-links a::after { content: ""; position: absolute; left: 1rem; right: 1rem; bottom: .35rem; height: 1px; background: var(--gold); transform: scaleX(0); transform-origin: left; transition: transform .4s cubic-bezier(.2,.7,.2,1); }
.sx-nav-links a:hover { color: var(--fg); }
.sx-nav-links a:hover::after { transform: scaleX(1); }
.sx-nav-links a.is-active { color: var(--fg); }
.sx-nav-no { font-family: var(--font-mono), monospace; font-size: 10px; letter-spacing: .1em; color: rgba(244,239,230,.4); transition: color .25s ease; }
.sx-nav-links a:hover .sx-nav-no, .sx-nav-links a.is-active .sx-nav-no { color: var(--gold); }
.sx-nav-ink { position: absolute; z-index: -1; top: 0; left: 0; height: 100%; width: var(--w, 0); transform: translateX(var(--x, 0)); border-radius: 999px; background: linear-gradient(180deg, rgba(217,183,121,.12), rgba(217,183,121,.03)); box-shadow: inset 0 0 0 1px rgba(217,183,121,.28); opacity: 0; pointer-events: none; transition: transform .6s cubic-bezier(.2,.7,.2,1), width .6s cubic-bezier(.2,.7,.2,1), opacity .3s ease; }
.sx-nav-ink::after { content: ""; position: absolute; left: 30%; right: 30%; bottom: -1px; height: 2px; border-radius: 2px; background: var(--gold); box-shadow: 0 0 12px rgba(217,183,121,.8); }
.sx-nav-links.has-active .sx-nav-ink { opacity: 1; }
.sx-nav-actions { display: flex; align-items: center; gap: .5rem; margin-left: auto; }
@media (min-width: 1024px) { .sx-nav-actions { margin-left: 0; } }
.sx-nav-tel { display: none; align-items: center; gap: .4rem; padding: .5rem .75rem; font-size: 13px; color: rgba(244,239,230,.75); transition: color .25s ease, opacity .5s ease; }
.sx-nav-tel:hover { color: var(--gold); }
@media (min-width: 1280px) { .sx-nav-tel { display: inline-flex; } }
.sx-nav-cta { display: inline-flex; align-items: center; gap: .35rem; padding: .7rem 1.15rem; border-radius: 999px; font-size: 13px; font-weight: 600; white-space: nowrap; }
.sx-nav-cta-long { display: none; }
@media (min-width: 480px) { .sx-nav-cta-long { display: inline; } }
.sx-burger { position: relative; display: grid; place-items: center; width: 44px; height: 44px; flex-shrink: 0; border-radius: 50%; border: 1px solid rgba(244,239,230,.15); background: rgba(14,14,18,.7); cursor: pointer; }
.sx-burger span { position: absolute; left: 14px; right: 14px; height: 1.5px; border-radius: 2px; background: var(--fg); transition: transform .45s cubic-bezier(.2,.7,.2,1); }
.sx-burger span:first-child { transform: translateY(-4px); }
.sx-burger span:last-child { transform: translateY(4px); }
.sx-burger[aria-expanded="true"] span:first-child { transform: rotate(45deg); }
.sx-burger[aria-expanded="true"] span:last-child { transform: rotate(-45deg); }
@media (min-width: 1024px) { .sx-burger, .sx-menu { display: none !important; } }
.sx-nav-progress { position: absolute; left: 26px; right: 26px; bottom: -1px; height: 1px; border-radius: 1px; background: linear-gradient(90deg, var(--electric), var(--gold), var(--ember)); transform: scaleX(0); transform-origin: left; pointer-events: none; }
/* Während des Einstiegs bleibt das Menü dezent: nur Logo und Button. */
.sx-in-stage .sx-nav-links, .sx-in-stage .sx-nav-tel { opacity: 0; pointer-events: none; }
.sx-in-stage .sx-nav:not(.is-scrolled) .sx-nav-pill { background: transparent; border-color: transparent; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
.sx-in-stage .sx-dock { opacity: 0 !important; pointer-events: none; }
.sx-dock { transition: opacity .4s ease, transform .9s cubic-bezier(.2,.7,.2,1); }

.sx-menu { position: fixed; inset: 0; z-index: 65; background: rgba(7,7,10,.97); -webkit-backdrop-filter: blur(24px); backdrop-filter: blur(24px); clip-path: circle(0px at var(--cx, calc(100% - 40px)) var(--cy, 40px)); transition: clip-path .65s cubic-bezier(.7,0,.2,1); }
.sx-menu.is-open { clip-path: circle(160% at var(--cx, calc(100% - 40px)) var(--cy, 40px)); }
.sx-menu[hidden] { display: none; }
.sx-menu-inner { display: flex; flex-direction: column; justify-content: center; gap: 2.25rem; height: 100%; padding-top: 6rem; padding-bottom: 2rem; overflow-y: auto; }
.sx-menu-links { display: flex; flex-direction: column; gap: .25rem; }
.sx-menu-links a { display: flex; align-items: baseline; gap: 1rem; font-family: var(--font-display), serif; font-size: clamp(38px, 11vw, 60px); line-height: 1.12; color: var(--fg); }
.sx-menu-links a .sx-nav-no { font-size: 11px; color: var(--gold); }
.sx-menu-services { display: flex; flex-direction: column; gap: .55rem; }
.sx-menu-services a { font-size: 15px; color: rgba(244,239,230,.7); }
.sx-menu-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; }
.sx-menu-mail { font-size: 13px; color: rgba(244,239,230,.6); }
.sx-menu-links a, .sx-menu-services a, .sx-menu-services p, .sx-menu-foot { opacity: 0; transform: translateY(26px); transition: opacity .5s ease, transform .7s cubic-bezier(.2,.7,.2,1); transition-delay: calc(.12s + var(--i, 0) * .05s); }
.sx-menu.is-open .sx-menu-links a, .sx-menu.is-open .sx-menu-services a, .sx-menu.is-open .sx-menu-services p, .sx-menu.is-open .sx-menu-foot { opacity: 1; transform: none; }

/* ---------- Footer mit Abschluss ---------- */
.sx-footer-cta { padding-top: clamp(4.5rem, 9vw, 8rem); padding-bottom: clamp(3rem, 6vw, 5rem); text-align: center; }
.sx-footer-cta .sx-lede { margin-left: auto; margin-right: auto; }
.sx-footer-cta .sx-actions { justify-content: center; }
.sx-footer-cta .sx-h2 { margin-top: 1rem; }
.sx-footer-grid { display: grid; gap: 2rem; padding-top: 2.5rem; padding-bottom: 2rem; border-top: 1px solid rgba(244,239,230,.08); }
@media (min-width: 768px) { .sx-footer-grid { grid-template-columns: 1.6fr 1fr 1fr 1fr; } }
.sx-footer-grid > div { display: flex; flex-direction: column; gap: .5rem; font-size: 14px; color: rgba(244,239,230,.7); }
.sx-footer-grid a { width: fit-content; transition: color .2s ease; }
.sx-footer-grid a:hover { color: var(--gold); }
.sx-footer-logo { display: block; height: 38px; margin-bottom: .5rem; }
.sx-footer-logo img { height: 100%; width: auto; }
.sx-footer-brand p { max-width: 24rem; font-size: 13px; line-height: 1.6; color: rgba(244,239,230,.55); }
.sx-footer-base { display: grid; gap: .75rem; padding-top: 1.5rem; padding-bottom: 7rem; border-top: 1px solid rgba(244,239,230,.08); font-size: 11.5px; line-height: 1.6; color: rgba(244,239,230,.62); }
@media (min-width: 1024px) { .sx-footer-base { padding-bottom: 2.5rem; } }
.sx-cities { font-family: var(--font-mono), monospace; font-size: 10px; letter-spacing: .2em; text-transform: uppercase; color: rgba(244,239,230,.5); }

/* ---------- Einstieg „Vom Plan zum Zuhause“ ---------- */
.sx-stage { position: relative; background: var(--bg); }
.sx-stage-sticky { position: relative; display: flex; min-height: 100svh; overflow: hidden; }
.sx-stage-media { position: absolute; inset: 0; }
.sx-stage-still, .sx-stage-canvas { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.sx-stage-canvas { display: none; opacity: 0; transition: opacity .6s ease; }
.sx-stage-canvas.is-ready { opacity: 1; }
.sx-stage-shade { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(7,7,10,.72) 0%, rgba(7,7,10,.38) 36%, transparent 62%), linear-gradient(to bottom, rgba(7,7,10,.4), transparent 16%, transparent 82%, #07070A); }
.sx-stage-shade::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(7,7,10,.45), rgba(7,7,10,.1) 70%); opacity: var(--dim, 0); }
.sx-beat { text-shadow: 0 2px 28px rgba(7,7,10,.55), 0 1px 3px rgba(7,7,10,.35); }
@media (max-width: 767px) {
  .sx-stage-shade { background: linear-gradient(to bottom, rgba(7,7,10,.6) 0%, rgba(7,7,10,.3) 40%, transparent 60%, rgba(7,7,10,.6) 90%, #07070A); }
}
.sx-stage-ui { position: relative; display: grid; gap: 3rem; align-content: center; width: 100%; padding-top: 8rem; padding-bottom: 5rem; }
.sx-stage-eyebrow { display: flex; align-items: center; gap: .75rem; }
.sx-lead { margin: 1rem 0 0; font-size: clamp(46px, 7.2vw, 108px); color: var(--fg); line-height: 1.05; }
.sx-beat--intro .sx-lede, .sx-beat--finale .sx-lede { color: rgba(244,239,230,.82); }
.sx-beat--chapter { display: flex; align-items: flex-end; gap: 1.5rem; }
.sx-chap-no { font-family: var(--font-display), serif; font-size: clamp(90px, 13vw, 200px); line-height: .8; color: transparent; -webkit-text-stroke: 1.5px rgba(217,183,121,.95); text-shadow: 0 0 50px rgba(217,183,121,.35); }
.sx-chap-title { margin: .6rem 0 0; font-size: clamp(34px, 4.6vw, 64px); color: var(--fg); line-height: 1.1; }
.sx-chap-text { margin-top: .75rem; max-width: 28rem; font-size: clamp(15px, 1.2vw, 18px); line-height: 1.6; color: rgba(244,239,230,.8); }
.sx-slogan { margin: 0; font-size: clamp(44px, 6.4vw, 100px); line-height: 1.12; color: var(--fg); }
.sx-word { display: inline-block; }
.sx-stage-rail, .sx-scroll-cue { display: none; }

/* Bewegungs-Modus: Bühne wird gehalten, Texte kommen und gehen mit dem Scrollen. */
.sx-motion .sx-stage { height: 520svh; }
.sx-motion .sx-stage-sticky { position: sticky; top: 0; height: 100svh; min-height: 0; }
.sx-motion .sx-stage-canvas { display: block; }
.sx-motion .sx-stage-ui { position: absolute; inset: 0; margin: 0 auto; padding-top: 0; padding-bottom: 0; }
.sx-motion .sx-beat { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center; padding-top: 6rem; padding-bottom: 5rem; padding-left: inherit; padding-right: inherit; opacity: var(--o, 0); transform: translate3d(0, calc((1 - var(--o, 0)) * 34px), 0); visibility: hidden; pointer-events: none; will-change: opacity, transform; }
.sx-motion .sx-beat.is-live { pointer-events: auto; }
.sx-motion .sx-beat--chapter { flex-direction: row; align-items: flex-end; justify-content: flex-start; padding-bottom: 14vh; }
.sx-motion .sx-beat--intro .sx-lede { max-width: 30rem; }
.sx-motion .sx-word { --wv: clamp(0, calc(var(--o, 0) * 5 - var(--w)), 1); opacity: var(--wv); transform: translateY(calc((1 - var(--wv)) * .35em)); filter: blur(calc((1 - var(--wv)) * 10px)); }
.sx-motion .sx-scroll-cue { position: absolute; left: 50%; bottom: 1.75rem; display: flex; flex-direction: column; align-items: center; gap: .6rem; transform: translateX(-50%); opacity: calc(1 - var(--p, 0) * 14); font-family: var(--font-mono), monospace; font-size: 10px; letter-spacing: .32em; text-transform: uppercase; color: rgba(244,239,230,.7); }
.sx-scroll-cue i { position: relative; display: block; width: 1px; height: 46px; overflow: hidden; background: rgba(244,239,230,.15); }
.sx-scroll-cue i::after { content: ""; position: absolute; left: 0; top: -40%; width: 1px; height: 40%; background: var(--gold); box-shadow: 0 0 10px var(--gold); animation: sx-drop 1.8s cubic-bezier(.6,0,.4,1) infinite; }
@keyframes sx-drop { to { top: 100%; } }
/* Bemaßungslinie am rechten Rand zeichnet den Fortschritt wie auf einem Bauplan mit. */
@media (min-width: 1024px) {
  .sx-motion .sx-stage-rail { position: absolute; right: clamp(1.5rem, 3vw, 3rem); top: 50%; z-index: 2; display: block; height: 46vh; transform: translateY(-50%); }
  .sx-rail-line { position: absolute; right: 0; top: 0; bottom: 0; width: 1px; background: rgba(244,239,230,.14); }
  .sx-rail-line::before, .sx-rail-line::after { content: ""; position: absolute; right: -5px; width: 11px; height: 1px; background: rgba(244,239,230,.4); }
  .sx-rail-line::before { top: 0; }
  .sx-rail-line::after { bottom: 0; }
  .sx-rail-line i { position: absolute; inset: 0; background: linear-gradient(to bottom, var(--gold), #FFE7BD); box-shadow: 0 0 12px rgba(217,183,121,.8); transform: scaleY(var(--p, 0)); transform-origin: top; }
  .sx-rail-tick { position: absolute; right: 14px; display: flex; align-items: center; gap: .6rem; font-family: var(--font-mono), monospace; font-size: 10px; letter-spacing: .24em; text-transform: uppercase; color: rgba(244,239,230,.35); white-space: nowrap; transform: translateY(-50%); transition: color .4s ease; }
  .sx-rail-tick b { font-weight: 400; }
  .sx-rail-tick::after { content: ""; width: 7px; height: 1px; background: currentColor; }
  .sx-rail-tick[data-rail="0"] { top: 18%; }
  .sx-rail-tick[data-rail="1"] { top: 45%; }
  .sx-rail-tick[data-rail="2"] { top: 72%; }
  .sx-rail-tick.is-on { color: var(--gold); }
}
@media (max-width: 767px) {
  .sx-motion .sx-stage { height: 460svh; }
  .sx-motion .sx-beat { justify-content: flex-start; padding-top: 6.5rem; }
  .sx-motion .sx-beat--chapter { flex-direction: column; align-items: flex-start; justify-content: flex-start; gap: .25rem; padding-bottom: 0; }
  .sx-motion .sx-beat--intro .sx-actions .cta-ghost { display: none; }
  .sx-chap-no { font-size: 84px; }
}
/* Ohne Bewegung: Standbild, alle Texte untereinander, nur ein Button. */
html:not(.sx-motion) .sx-beat--intro .sx-actions { display: none; }
@media (min-width: 1024px) {
  html:not(.sx-motion) .sx-stage-ui { grid-template-columns: repeat(3, 1fr); }
  html:not(.sx-motion) .sx-beat--intro, html:not(.sx-motion) .sx-beat--finale { grid-column: 1 / -1; }
}
html:not(.sx-motion) .sx-beat--chapter { flex-direction: column; align-items: flex-start; }
html:not(.sx-motion) .sx-chap-no { font-size: 64px; }

/* Gold-Licht-Loops (Higgsfield) hinter Warum Süba, Kontakt und Abschluss */
.sx-loop-host { isolation: isolate; }
.sx-loop { position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: .22; }
.sx-loop video { width: 100%; height: 100%; object-fit: cover; }
.sx-loop::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to bottom, #0E0E12, transparent 25%, transparent 75%, #0E0E12); }
@media (prefers-reduced-motion: reduce) { .sx-loop video { display: none; } .sx-menu, .sx-menu a, .sx-menu-foot, .sx-nav { transition: none; } }
.sx-menu a:focus-visible, .sx-nav a:focus-visible, .sx-burger:focus-visible { outline: 1px solid var(--gold); outline-offset: 4px; border-radius: 10px; }
.sx-menu a:focus:not(:focus-visible) { outline: none; }
/* Der Footer hält selbst Platz für die Handy-Leiste frei; der Original-Abstand am body erzeugte einen schwarzen Streifen am Seitenende. */
body { padding-bottom: 0 !important; }
@media (max-width: 1023px) { .sx-footer-base { padding-bottom: calc(7rem + env(safe-area-inset-bottom, 0px)); } }

/* ---------- Profi-Paket (25.09.) ---------- */
.sx-faq-no { color: rgba(244,239,230,.62); }
.sx-card, .sx-other { transition: border-color .4s ease, box-shadow .5s ease, transform .5s cubic-bezier(.2,.7,.2,1); will-change: transform; }
.cta-primary, .cta-ghost { will-change: transform; }

/* Seitenübergänge zwischen den Unterseiten (Chrome, Edge, Safari 18+) */
@view-transition { navigation: auto; }
::view-transition-old(root) { animation: sx-vt-out .35s cubic-bezier(.4,0,.2,1) both; }
::view-transition-new(root) { animation: sx-vt-in .55s cubic-bezier(.2,.7,.2,1) both; }
@keyframes sx-vt-out { to { opacity: 0; transform: translateY(-12px); filter: blur(4px); } }
@keyframes sx-vt-in { from { opacity: 0; transform: translateY(18px); filter: blur(6px); } }
@media (prefers-reduced-motion: reduce) { ::view-transition-old(root), ::view-transition-new(root) { animation: none; } }

/* Überschriften werden beim Einblenden scharf */
@media (scripting: enabled) and (prefers-reduced-motion: no-preference) {
  .sx-h2 { transition: filter 1s ease .1s, letter-spacing 1.2s cubic-bezier(.2,.7,.2,1); }
  [data-reveal]:not(.is-in) .sx-h2 { filter: blur(8px); letter-spacing: .01em; }
}

/* Team */
.sx-team { display: grid; gap: 1rem; }
@media (min-width: 640px) { .sx-team { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .sx-team { grid-template-columns: repeat(3, 1fr); } }
.sx-person { display: flex; flex-direction: column; gap: .5rem; padding: .75rem .75rem 1.5rem; border-radius: 24px; border: 1px solid rgba(244,239,230,.08); background: #0E0E12; }
.sx-person > :not(.sx-person-img) { padding: 0 .75rem; }
.sx-person-img { display: block; aspect-ratio: 4 / 5; overflow: hidden; border-radius: 18px; margin-bottom: .75rem; }
.sx-person-img img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(.25) contrast(1.05); transition: filter .6s ease, transform 1.2s cubic-bezier(.2,.7,.2,1); }
.sx-person:hover .sx-person-img img { filter: none; transform: scale(1.04); }

/* Bewertungen */
.sx-reviews { display: grid; gap: 1rem; }
@media (min-width: 768px) { .sx-reviews { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1280px) { .sx-reviews { grid-template-columns: repeat(3, 1fr); } }
.sx-review { margin: 0; display: flex; flex-direction: column; gap: 1rem; padding: 1.5rem; border-radius: 22px; border: 1px solid rgba(244,239,230,.08); background: rgba(244,239,230,.02); }
.sx-review blockquote { margin: 0; font-family: var(--font-display), serif; font-size: 20px; line-height: 1.45; color: var(--fg); }
.sx-review figcaption { margin-top: auto; font-family: var(--font-mono), monospace; font-size: 10px; letter-spacing: .24em; text-transform: uppercase; color: rgba(244,239,230,.55); }
.sx-stars { color: var(--gold); letter-spacing: .15em; font-size: 14px; }
.sx-review-score { display: flex; align-items: baseline; gap: .75rem; margin: 0 0 .9rem; color: rgba(244,239,230,.7); font-size: 14px; }
.sx-review-score b { font-family: var(--font-display), serif; font-weight: 400; font-size: 56px; line-height: 1; color: var(--gold); }

/* Rückruf */
.sx-callback { display: grid; gap: 1rem; margin-top: 2rem; padding: 1.25rem; background: rgba(12,11,14,.9); }
.sx-callback-row { display: grid; gap: .75rem; }
@media (min-width: 640px) { .sx-callback-row { grid-template-columns: 1fr 1fr; } .sx-callback-row label:last-child { grid-column: 1 / -1; } }
.sx-callback-row label span { display: block; margin-bottom: .35rem; font-family: var(--font-mono), monospace; font-size: 10px; letter-spacing: .2em; text-transform: uppercase; color: rgba(244,239,230,.6); }
.sx-callback input:not([type=checkbox]), .sx-callback select { width: 100%; padding: .8rem 1rem; border-radius: 12px; border: 1px solid rgba(244,239,230,.12); background: rgba(244,239,230,.03); color: var(--fg); font-size: 14px; }
.sx-callback select option { background: #0E0E12; }
.sx-callback input:focus, .sx-callback select:focus { outline: none; border-color: rgba(217,183,121,.6); box-shadow: 0 0 0 3px rgba(217,183,121,.15); }
.sx-consent { display: flex; gap: .6rem; align-items: flex-start; font-size: 12px; line-height: 1.5; color: rgba(244,239,230,.65); }
.sx-consent input { margin-top: .2rem; accent-color: var(--gold); }
.sx-hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.sx-callback .sx-error { margin: 0; }

/* WhatsApp-Knopf */
.sx-wa { position: fixed; right: 1.25rem; bottom: 1.25rem; z-index: 55; display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; color: #07070A; background: linear-gradient(135deg, #FFE7BD, #D9B779); box-shadow: 0 14px 40px -10px rgba(217,183,121,.7); transition: transform .35s cubic-bezier(.2,.7,.2,1); }
.sx-wa:hover { transform: scale(1.08) rotate(-6deg); }
@media (max-width: 1023px) { .sx-wa { bottom: 6.25rem; right: 1rem; width: 50px; height: 50px; } }
.sx-in-stage .sx-wa { opacity: 0; pointer-events: none; }

/* Termin-Fenster */
.sx-modal { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; padding: 1rem; background: rgba(7,7,10,.8); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.sx-modal[hidden] { display: none; }
.sx-modal-card { position: relative; width: min(100%, 760px); max-height: 92svh; overflow: auto; padding: clamp(1.5rem, 4vw, 2.5rem); animation: sx-pop .45s cubic-bezier(.2,.7,.2,1) both; }
@keyframes sx-pop { from { opacity: 0; transform: translateY(16px) scale(.98); } }
.sx-modal-close { position: absolute; right: 1rem; top: 1rem; z-index: 1; width: 40px; height: 40px; border-radius: 50%; border: 1px solid rgba(244,239,230,.15); background: rgba(14,14,18,.8); color: var(--fg); font-size: 22px; line-height: 1; cursor: pointer; }
.sx-cal-frame iframe { width: 100%; height: min(72svh, 680px); border: 0; border-radius: 16px; background: #0E0E12; }

/* Rechtliche Zusatzseiten */
.sx-legal { max-width: 48rem; }
.sx-legal p a { color: var(--gold); }