/* Startseite Ausbaustufe 2: Live-Demo, Laufband, Pakete, Fragen, Abschluss, modernere Gestaltung */

/* ---------- Live-Demo im Bildfenster ---------- */
.sd-host { display: flex !important; flex-direction: column; justify-content: center; gap: 14px; padding: 34px 30px 30px !important; height: auto !important; min-width: 0; background: radial-gradient(ellipse at 55% 40%, #2f566a66, transparent 70%) !important; }
.sd-scene { --sd-accent: #1d5c55; position: relative; width: 100%; aspect-ratio: 16 / 11.2; container-type: inline-size; font-family: Inter, "Segoe UI", Arial, sans-serif; }
.sd-scene * { box-sizing: border-box; }

/* Bildschirm */
.sd-monitor { position: absolute; left: 27%; top: 2%; width: 71%; }
.sd-screen { position: relative; aspect-ratio: 16 / 10; border-radius: 1.6cqw; padding: 1.1cqw; background: linear-gradient(160deg, #2b3c47, #0e1820); box-shadow: 0 3cqw 6cqw #0006, inset 0 0 0 1px #ffffff1c; }
.sd-stand { width: 18%; height: 4.5cqw; margin: 0 auto; background: linear-gradient(#24343e, #121d24); clip-path: polygon(22% 0, 78% 0, 100% 100%, 0 100%); }
.sd-site { height: 100%; border-radius: .8cqw; overflow: hidden; background: #fbf9f4; color: #1f2b30; transition: background .5s; }
.sd-nav { display: flex; align-items: center; gap: 1.6cqw; padding: 1.4cqw 2.2cqw; border-bottom: 1px solid #00000010; }
.sd-nav b { margin-right: auto; font-size: 1.55cqw; letter-spacing: -.02em; transition: font-family .3s; }
.sd-nav span { width: 4.5cqw; height: .7cqw; border-radius: 1cqw; background: #00000018; }
.sd-hero { display: grid; grid-template-columns: 1fr 1fr; gap: 2cqw; padding: 2.4cqw 2.2cqw 1.6cqw; align-items: center; }
.sd-copy small { display: block; font-size: .95cqw; letter-spacing: .12em; color: var(--sd-accent); font-weight: 700; margin-bottom: 1cqw; transition: color .5s; }
.sd-scene h4 { margin: 0 0 1.2cqw; font-size: 3.1cqw; line-height: 1.05; letter-spacing: -.04em; font-weight: 650; min-height: 3.3cqw; }
.sd-scene h4 i, .sd-scene p i { display: block; height: 2.2cqw; margin-bottom: .9cqw; border-radius: .5cqw; background: #00000012; }
.sd-scene h4 i:last-child { width: 70%; }
.sd-scene p { margin: 0 0 1.5cqw; font-size: 1.2cqw; line-height: 1.45; color: #4b585c; }
.sd-scene p i { height: 1cqw; margin-bottom: .6cqw; }
.sd-scene p i:last-child { width: 60%; }
.sd-scene h4.filled, .sd-scene p.filled { animation: sd-pop .35s ease; }
.sd-scene em[data-sd-btn] { display: inline-block; font-style: normal; font-size: 1.15cqw; font-weight: 600; color: #fff; background: var(--sd-accent); padding: .9cqw 1.8cqw; border-radius: .8cqw; transition: background .5s; }
.sd-monitor .sd-img { order: -1; }
.sd-monitor .sd-hero { grid-template-columns: .9fr 1.1fr; }
.sd-img { position: relative; aspect-ratio: 4 / 3.2; border-radius: 1.2cqw; overflow: hidden; background: #e7e2d8; }
.sd-img img { width: 100%; height: 100%; object-fit: cover; transition: opacity .25s, transform 6s ease; }
.sd-img img.swap { opacity: 0; }
.sd-running .sd-img img { transform: scale(1.06); }
.sd-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.4cqw; padding: 0 2.2cqw; }
.sd-cards span { height: 4.4cqw; border-radius: .8cqw; border: 1px solid #00000010; background: linear-gradient(#fff, #f7f4ee); }
.sd-magazin .sd-site { background: #f6f1e7; }
.sd-serif .sd-nav b, .sd-serif h4 { font-family: "Playfair Display", Georgia, serif; font-weight: 600; letter-spacing: -.02em; }

/* Handy */
.sd-phone { position: absolute; right: 0; bottom: 3%; width: 19%; aspect-ratio: 9 / 18.5; padding: .9cqw; border-radius: 3cqw; background: #0f1a21; box-shadow: 0 2.5cqw 5cqw #0007, inset 0 0 0 1px #ffffff26; z-index: 2; }
.sd-phone-screen { height: 100%; border-radius: 2.2cqw; overflow: hidden; }
.sd-site-m .sd-nav { padding: 1.1cqw 1.4cqw; }
.sd-site-m .sd-nav b { font-size: 1.1cqw; }
.sd-site-m .sd-nav span { width: auto; height: auto; background: none; font-size: 1.1cqw; }
.sd-site-m .sd-img { margin: 1.2cqw; aspect-ratio: 1; border-radius: 1cqw; }
.sd-site-m h4 { font-size: 1.75cqw; margin: 0 1.3cqw 1cqw; min-height: 2cqw; }
.sd-site-m h4 i { height: 1.3cqw; }
.sd-site-m em[data-sd-btn] { margin: 0 1.3cqw; font-size: .9cqw; padding: .7cqw 1.2cqw; }

/* Assistenten-Fenster */
.sd-panel { position: absolute; left: 0; top: 9%; width: 45%; border-radius: 1.6cqw; background: #fffdf8; color: #1f3236; box-shadow: 0 3cqw 7cqw #00000059, 0 0 0 1px #ffffff40; overflow: hidden; z-index: 3; }
.sd-panel-head { display: flex; gap: 1.2cqw; align-items: center; padding: 1.4cqw 1.6cqw; background: linear-gradient(110deg, #182c3a, #1d4049); color: #fff; }
.sd-panel-head span { flex: none; display: grid; place-items: center; width: 4.2cqw; height: 4.2cqw; border-radius: 50%; background: #d9b38c; color: #182c3a; font-weight: 800; font-size: 2cqw; }
.sd-panel-head b { display: block; font-size: 2.1cqw; }
.sd-panel-head small { font-size: 1.4cqw; color: #a9c0c4; }
.sd-panel-body { padding: 1.8cqw 2cqw 2.2cqw; min-height: 27cqw; font-size: 1.6cqw; }
.sd-panel-body.sd-enter > * { animation: sd-in .45s ease both; }
.sd-panel-body.sd-enter > *:nth-child(2) { animation-delay: .07s; }
.sd-panel-body.sd-enter > *:nth-child(3) { animation-delay: .14s; }
.sd-panel-body label { display: block !important; margin: 1.2cqw 0 0 !important; padding: 0 !important; font-size: 1.45cqw !important; line-height: 1.3 !important; font-weight: 600 !important; color: #5a6d70 !important; letter-spacing: 0 !important; text-transform: none !important; }
.sd-input { display: block; min-height: 3.9cqw; margin-top: .5cqw; padding: .75cqw 1cqw; border: 1px solid #dbe3df; border-radius: .8cqw; background: #fff; color: #1f3236; font-size: 1.7cqw; font-weight: 500; }
.sd-input:empty::after, .sd-running .sd-input:not(:empty)::after { content: "|"; color: var(--sd-accent); animation: sd-blink 1s steps(1) infinite; }
.sd-area { min-height: 6cqw; }
.sd-tools { display: grid; grid-template-columns: 1fr 1fr; gap: .7cqw; }
.sd-tools span, .sd-chips span, .sd-profiles span, .sd-fonts span { padding: .7cqw .9cqw; border: 1px solid #dbe3df; border-radius: .8cqw; background: #fff; font-size: 1.5cqw; font-weight: 600; transition: .25s; }
.sd-tools .on, .sd-chips .on, .sd-profiles .on, .sd-fonts .on { border-color: var(--sd-accent); background: #e3efeb; box-shadow: inset 0 0 0 1px var(--sd-accent); }
.sd-chips { display: flex; flex-wrap: wrap; gap: .6cqw; }
.sd-chips span { border-radius: 99px; }
.sd-profiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: .7cqw; margin-top: 1.4cqw; }
.sd-profiles i { display: block; height: 3.2cqw; margin-bottom: .5cqw; border-radius: .5cqw; background: linear-gradient(90deg, #c9d6d0 55%, #e9eeeb 55%); }
.sd-snip { display: inline-block; margin-top: .6cqw; padding: .4cqw 1cqw; border-radius: 99px; border: 1px solid #d9b38c; background: #fff8ef; color: #8a5a2b; font-style: normal; font-size: 1.35cqw; font-weight: 700; transition: .25s; }
.sd-snip.on { background: #d9b38c; color: #182c3a; transform: scale(1.05); }
.sd-label { display: block; margin: 1.4cqw 0 .7cqw; font-size: 1.35cqw; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #5a6d70; }
.sd-label:first-child { margin-top: 0; }
.sd-swatches { display: flex; gap: .9cqw; }
.sd-swatches i { width: 4.4cqw; height: 4.4cqw; border-radius: 50%; box-shadow: 0 0 0 .35cqw #fff, 0 0 0 calc(.35cqw + 1px) #dbe3df; transition: .25s; }
.sd-swatches i.on { box-shadow: 0 0 0 .35cqw #fff, 0 0 0 .6cqw #1f3236; transform: scale(1.08); }
.sd-fonts { display: grid; grid-template-columns: repeat(3, 1fr); gap: .7cqw; }
.sd-fonts span { display: flex; flex-direction: column; align-items: center; font-size: 3cqw; line-height: 1.1; }
.sd-fonts small { font-size: 1.15cqw; font-weight: 500; color: #5a6d70; }
.sd-serif-f { font-family: "Playfair Display", Georgia, serif; }
.sd-price { padding: 1.2cqw 1.4cqw; border-radius: 1cqw; background: linear-gradient(120deg, #182c3a, #1d4049); color: #fff; }
.sd-price small { display: block; font-size: 1.35cqw; color: #a9c0c4; }
.sd-price b { display: block; font-size: 4.4cqw; letter-spacing: -.03em; color: #f3e3cf; font-variant-numeric: tabular-nums; }
.sd-price span { font-size: 1.3cqw; color: #c9d6da; }
.sd-check { list-style: none; margin: 1.2cqw 0; padding: 0; display: grid; gap: .5cqw; }
.sd-check li { display: flex; gap: .9cqw; align-items: center; font-size: 1.55cqw; color: #8a989b; transition: color .25s; }
.sd-check li::before { content: ""; width: 2.3cqw; height: 2.3cqw; border-radius: 50%; border: 1px solid #dbe3df; display: grid; place-items: center; font-size: 1cqw; transition: .25s; }
.sd-check li.on { color: #1f3236; }
.sd-check li.on::before { content: "✓"; background: #1d5c55; border-color: #1d5c55; color: #fff; }
.sd-cta { display: block; text-align: center; padding: 1cqw; border-radius: .9cqw; background: #1d5c55; color: #fff; font-weight: 700; font-size: 1.6cqw; transition: .2s; }
.sd-cta.on { transform: scale(.97); background: #164a44; }

/* Zeiger und Meldung */
.sd-cursor { position: absolute; left: 0; top: 0; width: 2.2cqw; height: 2.2cqw; z-index: 5; pointer-events: none; opacity: 0; transition: transform .55s cubic-bezier(.3, .9, .3, 1), opacity .3s; }
.sd-cursor::before { content: ""; position: absolute; inset: 0; background: #fff; clip-path: polygon(0 0, 0 78%, 22% 60%, 38% 95%, 52% 88%, 37% 55%, 66% 55%); filter: drop-shadow(0 .2cqw .3cqw #0008); }
.sd-cursor::after { content: ""; position: absolute; left: -1.1cqw; top: -1.1cqw; width: 2.2cqw; height: 2.2cqw; border-radius: 50%; border: .25cqw solid #d9b38c; opacity: 0; transform: scale(.4); }
.sd-cursor.on { opacity: 1; }
.sd-cursor.click::after { animation: sd-ripple .45s ease-out; }
.sd-toast { position: absolute; right: 22%; top: 4%; z-index: 6; padding: 1.2cqw 2cqw; border-radius: 99px; background: #1d5c55; color: #fff; font-size: 1.7cqw; font-weight: 700; box-shadow: 0 1.2cqw 3cqw #0005; opacity: 0; transform: translateY(-1cqw); transition: .35s; }
.sd-toast.on { opacity: 1; transform: none; }

/* Steuerung */
.sd-controls { display: flex; align-items: center; gap: 10px; }
@media (min-width: 901px) { .sp-home .hs-hero { grid-template-columns: .92fr 1.08fr; } }
.sd-host { align-items: stretch !important; }
.sd-steps { flex: 1; display: flex; gap: 6px; min-width: 0; }
.sd-steps button { flex: 0 0 auto; }
.sd-steps button.active { flex: 1 1 auto; }
.sd-steps button:not(.active) em { display: none; }
.sd-steps button { position: relative; display: flex; align-items: center; gap: 7px; min-width: 0; padding: 8px 8px 11px !important; border: 1px solid #ffffff1f !important; border-radius: 10px !important; background: #ffffff0a !important; color: #a9c0c4 !important; font: 600 11.5px/1.2 inherit !important; text-align: left; cursor: pointer; overflow: hidden; min-height: 0 !important; box-shadow: none !important; }
.sd-steps button span { flex: none; display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: #ffffff1a; font-size: 11px; }
.sd-steps button em { font-style: normal; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sd-steps button i { position: absolute; left: 0; bottom: 0; height: 3px; width: 0; background: #d9b38c; }
.sd-steps button.done i { width: 100%; opacity: .45; }
.sd-steps button.active { border-color: #d9b38c80 !important; background: #ffffff14 !important; color: #fff !important; }
.sd-steps button.active span { background: #d9b38c; color: #182c3a; }
.sd-running .sd-steps button.active i { animation: sd-progress var(--sd-step-ms, 5200ms) linear forwards; }
.sd-play { flex: none; width: 38px; height: 38px; border-radius: 50% !important; border: 1px solid #ffffff33 !important; background: transparent !important; color: #fff !important; font-size: 12px !important; cursor: pointer; padding: 0 !important; min-height: 0 !important; }
.sd-caption { margin: 0; text-align: center; color: #c9d6da; font-size: 13.5px; min-height: 1.4em; }

@keyframes sd-pop { from { opacity: .3; transform: translateY(.4cqw); } to { opacity: 1; transform: none; } }
@keyframes sd-in { from { opacity: 0; transform: translateY(1cqw); } to { opacity: 1; transform: none; } }
@keyframes sd-blink { 50% { opacity: 0; } }
@keyframes sd-ripple { from { opacity: 1; transform: scale(.4); } to { opacity: 0; transform: scale(1.6); } }
@keyframes sd-progress { from { width: 0; } to { width: 100%; } }
@media (prefers-reduced-motion: reduce) {
  .sd-scene *, .sd-scene *::before, .sd-scene *::after, .sd-steps i { animation: none !important; transition: none !important; }
}

/* ---------- Einstieg: Vorteils-Hinweise ---------- */
.sx-trust { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 18px; }
.sx-trust span { font-size: 12.5px; color: #c9d6da; }

/* ---------- Branchen-Laufband ---------- */
.sx-marquee { margin-top: 18px; overflow: hidden; border-radius: 16px; background: #fff; border: 1px solid #e3e8e4; mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.sx-marquee-track { display: flex; width: max-content; animation: sx-marquee 60s linear infinite; }
.sx-marquee:hover .sx-marquee-track { animation-play-state: paused; }
.sx-marquee-row { display: flex; align-items: center; gap: 18px; padding: 14px 9px; white-space: nowrap; }
.sx-marquee-row span { font-size: 15px; font-weight: 600; color: #34474b; }
.sx-marquee-row i { font-style: normal; color: #d9b38c; font-size: 11px; }
@keyframes sx-marquee { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .sx-marquee-track { animation: none; } }

/* ---------- Funktionen als Bento-Raster ---------- */
.sp-feature-grid { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }
.sp-feature-grid article { position: relative; overflow: hidden; transition: transform .2s, box-shadow .2s; }
.sp-feature-grid article:hover { transform: translateY(-3px); box-shadow: 0 14px 34px #12303a17; }
.sp-feature-grid article:nth-child(1) { grid-column: span 2; grid-row: span 2; display: flex; flex-direction: column; justify-content: center; padding: 34px 32px; background: linear-gradient(135deg, #182c3a, #1d4049); border: 0; }
.sp-feature-grid article:nth-child(1) h3 { font-size: 26px !important; }
.sp-feature-grid article:nth-child(1) h3 { color: #fff; font-size: 20px; }
.sp-feature-grid article:nth-child(1) p { color: #c9d6da; font-size: 15px; max-width: 420px; }
.sp-feature-grid article:nth-child(1) i { background: #d9b38c; color: #182c3a; }
.sp-feature-grid article:nth-child(1)::after { content: "1 · 2 · 3 · 4 · 5"; position: absolute; right: 22px; bottom: 16px; font-size: 26px; font-weight: 800; letter-spacing: .1em; color: #ffffff14; }
.sp-feature-grid article:nth-child(2) { background: linear-gradient(135deg, #fff8ef, #fff); border-color: #ecd9c2; }
.sp-feature-grid article:nth-child(3) { background: linear-gradient(135deg, #eef6f3, #fff); }
@media (max-width: 1100px) { .sp-feature-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } }
@media (max-width: 560px) { .sp-feature-grid { grid-template-columns: 1fr !important; } .sp-feature-grid article:nth-child(1) { grid-column: auto; grid-row: auto; padding: 24px; } }

/* ---------- Pakete ---------- */
.sx-package-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; align-items: stretch; }
.sx-package { position: relative; display: flex; flex-direction: column; padding: 24px 22px 22px; border-radius: 20px; background: #fff; border: 1px solid #e3e8e4; }
.sx-package > i { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 13px; background: #f2f6f3; color: #1d5c55; font-style: normal; font-size: 19px; font-weight: 700; }
.sx-package h3 { margin: 16px 0 6px; font-size: 18px; }
.sx-package > p { margin: 0; min-height: 3.2em; color: #5a6d70; font-size: 13.5px; line-height: 1.5; }
.sx-price { margin: 16px 0 14px; padding: 12px 0; border-block: 1px solid #edf1ee; }
.sx-price b { font-size: 24px; letter-spacing: -.02em; color: #1f3236; }
.sx-price small { color: #5a6d70; font-size: 12.5px; }
.sx-package ul { list-style: none; margin: 0 0 18px; padding: 0; display: grid; gap: 8px; flex: 1; }
.sx-package li { display: flex; gap: 9px; font-size: 13.5px; color: #34474b; line-height: 1.4; }
.sx-package li::before { content: "✓"; flex: none; width: 18px; height: 18px; border-radius: 50%; background: #e3efeb; color: #1d5c55; display: grid; place-items: center; font-size: 11px; font-weight: 700; }
.sx-package button { padding: 11px 16px; border-radius: 12px; border: 1px solid #1f3236; background: #fff; color: #1f3236; font: 600 14px/1 inherit; cursor: pointer; transition: .15s; }
.sx-package button:hover { background: #1f3236; color: #fff; }
.sx-featured { background: linear-gradient(170deg, #182c3a, #1d4049); border-color: #182c3a; color: #fff; box-shadow: 0 22px 50px #12303a30; }
.sx-featured h3, .sx-featured .sx-price b { color: #fff; }
.sx-featured > p, .sx-featured .sx-price small, .sx-featured li { color: #c9d6da; }
.sx-featured .sx-price { border-color: #ffffff1f; }
.sx-featured > i { background: #d9b38c; color: #182c3a; }
.sx-featured li::before { background: #d9b38c; color: #182c3a; }
.sx-featured button { background: #d9b38c; border-color: #d9b38c; color: #182c3a; }
.sx-featured button:hover { background: #f0cfa9; color: #182c3a; }
.sx-badge { position: absolute; top: -11px; right: 18px; padding: 5px 11px; border-radius: 99px; background: #d9b38c; color: #182c3a; font-size: 11.5px; font-weight: 700; }
.sx-note { margin: 12px 0 0; font-size: 12.5px; color: #5a6d70; }
@media (max-width: 1100px) { .sx-package-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .sx-package-grid { grid-template-columns: 1fr; } }

/* ---------- Fragen & Antworten ---------- */
.sx-faq { display: grid; grid-template-columns: minmax(240px, .75fr) 1.25fr; gap: 40px; align-items: start; }
.sx-faq h2 { margin: 8px 0 0; }
.sx-faq-list { display: grid; gap: 10px; }
.sx-faq details { border: 1px solid #e3e8e4; border-radius: 16px; background: #fff; transition: border-color .2s; }
.sx-faq details[open] { border-color: #1d5c5555; box-shadow: 0 10px 28px #12303a12; }
.sx-faq summary { display: flex; justify-content: space-between; gap: 16px; align-items: center; padding: 17px 20px; cursor: pointer; list-style: none; font-weight: 650; font-size: 15.5px; color: #1f3236; }
.sx-faq summary::-webkit-details-marker { display: none; }
.sx-faq summary span { flex: none; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: #f2f6f3; color: #1d5c55; font-size: 18px; transition: transform .25s; }
.sx-faq details[open] summary span { transform: rotate(45deg); background: #1d5c55; color: #fff; }
.sx-faq details p { margin: 0; padding: 0 20px 18px; color: #4b5c60; font-size: 14.5px; line-height: 1.65; }
@media (max-width: 860px) { .sx-faq { grid-template-columns: 1fr; gap: 18px; } }

/* ---------- Abschluss ---------- */
.sx-final { position: relative; overflow: hidden; display: flex; align-items: center; justify-content: space-between; gap: 30px; margin-top: 56px; padding: 44px 46px; border-radius: 26px; background: linear-gradient(115deg, #d9b38c, #e9cba6 45%, #f4e3cc); color: #182c3a; }
.sx-final::after { content: ""; position: absolute; right: -60px; top: -80px; width: 280px; height: 280px; border-radius: 50%; border: 40px solid #ffffff38; }
.sx-final .hs-eyebrow { color: #7a4f24 !important; }
.sx-final h2 { margin: 8px 0 10px; color: #182c3a; font-size: clamp(26px, 3.2vw, 38px); letter-spacing: -.02em; }
.sx-final p { margin: 0; max-width: 560px; color: #3f3426; font-size: 15px; line-height: 1.6; }
.sx-final-actions { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 10px; flex: none; }
.sx-final-actions button { padding: 14px 22px !important; border-radius: 14px !important; border: 1px solid #182c3a !important; background: transparent !important; color: #182c3a !important; font: 650 15px/1 inherit !important; cursor: pointer; min-height: 0 !important; }
.sx-final-actions .sx-primary { background: #182c3a !important; color: #fff !important; box-shadow: 0 12px 28px #182c3a40 !important; }
.sx-final-actions button:not(.sx-primary):hover { background: #ffffff66 !important; }
.sx-faq h2 { font-size: clamp(26px, 2.6vw, 34px) !important; letter-spacing: -.02em; color: #1b303b !important; }
@media (max-width: 760px) { .sx-final { flex-direction: column; align-items: flex-start; padding: 28px 24px; } .sx-final-actions { width: 100%; } }

/* ---------- Mobil: Demo unter dem Text ---------- */
@media (max-width: 900px) {
  .sd-host { padding: 6px 18px 24px !important; }
  .sd-steps button em { display: none; }
  .sd-steps button { justify-content: center; }
  .sd-caption { font-size: 12.5px; }
}

/* Vorspann der Live-Demo: Logo Hahne Digital groß und deutlich, danach startet die Demo */
.sd-intro { position: absolute; inset: 0; z-index: 9; display: grid; place-items: center; border-radius: 2cqw; overflow: hidden; pointer-events: none; opacity: 0; visibility: hidden;
  background: radial-gradient(circle at 50% 40%, #ffffff, #f2f6f8 60%, #e4ecef); box-shadow: inset 0 0 0 1px #ffffffaa; }
.sd-intro.on { visibility: visible; animation: sd-intro-rein .6s cubic-bezier(.2, .8, .2, 1) forwards; }
.sd-intro.weg { animation: sd-intro-raus .5s ease forwards; }
@keyframes sd-intro-rein { from { opacity: 0; } to { opacity: 1; } }
@keyframes sd-intro-raus { from { opacity: 1; } to { opacity: 0; transform: scale(1.04); filter: blur(4px); } }
.sd-intro-licht { position: absolute; inset: -20%; background: radial-gradient(circle at 30% 30%, #1f7fd433, transparent 35%), radial-gradient(circle at 75% 70%, #2a907926, transparent 40%); }
.sd-intro.on .sd-intro-licht { animation: sd-intro-licht 3.2s ease-in-out forwards; }
@keyframes sd-intro-licht { to { transform: translate(6%, -4%) rotate(8deg); } }
.sd-intro-inhalt { position: relative; display: grid; justify-items: center; gap: 1.6cqw; width: 78%; }
.sd-intro-logo { display: block; width: 100%; height: auto; aspect-ratio: 1800 / 486; filter: drop-shadow(0 1.4cqw 2.4cqw #14323a2e); }
.sd-intro.on .sd-intro-logo { animation: sd-intro-logo 1.1s cubic-bezier(.2, .9, .25, 1.15) both; }
@keyframes sd-intro-logo { from { opacity: 0; transform: scale(.82) translateY(2cqw); filter: blur(10px); } to { opacity: 1; transform: none; filter: drop-shadow(0 1.4cqw 2.4cqw #14323a2e); } }
.sd-intro-inhalt::after { content: ""; position: absolute; top: 0; left: 0; width: 100%; aspect-ratio: 1800 / 486; pointer-events: none;
  background: linear-gradient(105deg, transparent 35%, #ffffffcc 50%, transparent 65%); background-size: 250% 100%; background-position: 130% 0; mix-blend-mode: soft-light; }
.sd-intro.on .sd-intro-inhalt::after { animation: sd-intro-glanz 1.2s .9s ease-in-out both; }
@keyframes sd-intro-glanz { to { background-position: -30% 0; } }
.sd-intro-linie { width: 0; height: .35cqw; border-radius: 1cqw; background: linear-gradient(90deg, #1f7fd4, #2a9079); }
.sd-intro.on .sd-intro-linie { animation: sd-intro-linie .7s 1s cubic-bezier(.2, .8, .2, 1) forwards; }
@keyframes sd-intro-linie { to { width: 44%; } }
.sd-intro-titel { font: 800 3.4cqw/1.1 Manrope, Inter, "Segoe UI", sans-serif; letter-spacing: .04em; color: #1f2933; opacity: 0; }
.sd-intro-live { display: inline-flex; align-items: center; gap: 1cqw; padding: .9cqw 2.2cqw; border-radius: 99px; background: #14323a; color: #fff; font: 800 1.9cqw/1 Manrope, Inter, sans-serif; letter-spacing: .14em; opacity: 0; }
.sd-intro-live i { width: 1.2cqw; height: 1.2cqw; border-radius: 50%; background: #ff4d4d; box-shadow: 0 0 0 0 #ff4d4d99; animation: sd-intro-puls 1.2s infinite; }
@keyframes sd-intro-puls { 70% { box-shadow: 0 0 0 1.4cqw #ff4d4d00; } 100% { box-shadow: 0 0 0 0 #ff4d4d00; } }
.sd-intro.on .sd-intro-titel { animation: sd-intro-auf .6s 1.25s ease forwards; }
.sd-intro.on .sd-intro-live { animation: sd-intro-auf .6s 1.6s ease forwards; }
@keyframes sd-intro-auf { from { opacity: 0; transform: translateY(1.2cqw); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .sd-intro { display: none; } }