/* Startseite: alle bisher dunkelgrünen Flächen als Milchglas – heller Schleier, schwebende Farbflächen dahinter,
   dunkle gut lesbare Schrift, Knöpfe grün mit heller Schrift. */

/* Kein seitliches Verrutschen durch Laufbänder und schwebende Flächen */
#creatorHome { overflow-x: hidden !important; }

/* ---------- Pakete ---------- */
#creatorHome .sx-packages { position: relative; isolation: isolate; }
#creatorHome .sx-packages::before { content: ""; position: absolute; inset: 60px 0 -20px; z-index: -1; pointer-events: none; filter: blur(60px); opacity: .7;
  background: radial-gradient(26% 40% at 18% 40%, #2f9a83aa, transparent 70%), radial-gradient(24% 40% at 52% 30%, #e7b878bb, transparent 70%), radial-gradient(26% 40% at 86% 70%, #6aa7c788, transparent 70%);
  animation: mg-schweben 24s ease-in-out infinite alternate; }
#creatorHome .sx-package, #creatorHome .sx-package.sx-featured { background: linear-gradient(150deg, #ffffffd1, #ffffff94) !important; color: #14323a !important; border: 1px solid #ffffffe6 !important;
  box-shadow: 0 30px 60px -36px #14323a73, 0 1px 0 #fff inset !important; -webkit-backdrop-filter: blur(20px) saturate(160%); backdrop-filter: blur(20px) saturate(160%); padding: 26px 24px 22px !important; }
#creatorHome .sx-package.sx-featured { border: 1.5px solid #d4a868 !important; box-shadow: 0 0 0 5px #d4a86826, 0 34px 70px -34px #a96f2c8c, 0 1px 0 #fff inset !important; }
#creatorHome .sx-package:hover { box-shadow: 0 34px 70px -32px #14323a8c, 0 1px 0 #fff inset !important; }
#creatorHome .sx-package.sx-featured:hover { box-shadow: 0 0 0 6px #d4a86833, 0 40px 80px -32px #a96f2ca6, 0 1px 0 #fff inset !important; }
#creatorHome .sx-package > i, #creatorHome .sx-featured > i { background: linear-gradient(135deg, #2a9079, #1d6d5e) !important; color: #fff !important; box-shadow: 0 10px 20px -10px #1d6d5ecc; }
#creatorHome .sx-featured > i { background: linear-gradient(135deg, #e2b878, #a96f2c) !important; }
#creatorHome .sx-package h3, #creatorHome .sx-featured h3 { color: #14323a !important; font-size: 19px; }
#creatorHome .sx-package > p, #creatorHome .sx-featured > p { color: #3d5258 !important; }
#creatorHome .sx-package .sx-price, #creatorHome .sx-featured .sx-price { border-color: #14323a1a !important; }
#creatorHome .sx-package .sx-price b, #creatorHome .sx-featured .sx-price b { color: #14323a !important; font-size: 27px; }
#creatorHome .sx-package .sx-price small, #creatorHome .sx-featured .sx-price small { color: #5a6d72 !important; }
#creatorHome .sx-badge { background: linear-gradient(135deg, #f6e2bf, #d4a868) !important; color: #14323a !important; font-weight: 800 !important; box-shadow: 0 8px 18px -8px #a96f2c99; }

/* Leistungen im Vordergrund */
.sx-leistungen-titel { display: block; margin: 2px 0 10px; font-size: 11.5px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: #1d6d5e; }
#creatorHome .sx-package ul.sx-leistungen { gap: 9px; margin: 0 0 14px; align-content: start; }
#creatorHome .sx-package .sx-leistungen li, #creatorHome .sx-featured .sx-leistungen li { align-items: center; gap: 10px; padding: 7px 10px; border-radius: 11px; background: #ffffffb3; border: 1px solid #14323a0f;
  color: #14323a !important; font-size: 14px; font-weight: 600; line-height: 1.35; transition: transform .2s, background .2s; }
#creatorHome .sx-package .sx-leistungen li:hover { transform: translateX(3px); background: #fff; }
#creatorHome .sx-package .sx-leistungen li::before, #creatorHome .sx-featured .sx-leistungen li::before { width: 22px; height: 22px; font-size: 12px; background: linear-gradient(135deg, #2a9079, #1d6d5e) !important; color: #fff !important; }
#creatorHome .sx-packages.dx-in .sx-leistungen li { animation: mga-rein .5s cubic-bezier(.2, .8, .2, 1) both; animation-delay: calc(.15s + var(--i, 0) * 60ms); }
@keyframes mga-rein { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
#creatorHome .sx-module-link { display: block; margin: 0 0 14px; color: #16564b; font-size: 13.5px; font-weight: 800; text-decoration: none; }
#creatorHome .sx-module-link:hover { text-decoration: underline; text-underline-offset: 3px; }
#creatorHome .sx-featured .sx-artikel, #creatorHome .sx-artikel { background: #ffffffb3 !important; border-color: #14323a14 !important; color: #34474e !important; }
#creatorHome .sx-featured .sx-artikel b { color: #14323a !important; }
/* Knöpfe: grün mit heller Schrift – auch bei der Empfehlung */
#creatorHome .sx-package.sx-featured button { background: linear-gradient(135deg, #2a9079, #1d6d5e) !important; color: #fff !important; box-shadow: 0 12px 26px -12px #1d6d5ecc !important; }
#creatorHome .sx-package.sx-featured button:hover, #creatorHome .sx-package.sx-featured button:focus-visible { background: linear-gradient(135deg, #1f7a68, #14323a) !important; color: #fff !important; }
#creatorHome .sx-note { color: #3d5258 !important; }

/* ---------- Funktionen: großes Feld „Projekt-Assistent“ ---------- */
#creatorHome .sp-feature-grid article:nth-child(1) { position: relative; isolation: isolate; overflow: hidden; background: linear-gradient(140deg, #ffffffc7, #ffffff8a) !important; border: 1px solid #ffffffe6 !important;
  box-shadow: 0 30px 60px -36px #14323a73, 0 1px 0 #fff inset; -webkit-backdrop-filter: blur(20px) saturate(160%); backdrop-filter: blur(20px) saturate(160%); }
#creatorHome .sp-feature-grid article:nth-child(1) > :not(i) { position: relative; z-index: 2; }
#creatorHome .sp-feature-grid article:nth-child(1)::after { z-index: 0; color: #14323a14 !important; }
#creatorHome .sp-feature-grid article:nth-child(1) h3 { color: #14323a !important; }
#creatorHome .sp-feature-grid article:nth-child(1) p { color: #3d5258 !important; }
#creatorHome .sp-feature-grid article:nth-child(1) i { background: linear-gradient(135deg, #2a9079, #1d6d5e) !important; color: #fff !important; position: relative; z-index: 2; }
#creatorHome .sp-feature-grid { position: relative; isolation: isolate; }
#creatorHome .sp-feature-grid::before { content: ""; position: absolute; left: 0; top: 0; width: 55%; height: 75%; z-index: -1; pointer-events: none; filter: blur(55px); opacity: .7;
  background: radial-gradient(40% 50% at 30% 40%, #2f9a83aa, transparent 70%), radial-gradient(40% 50% at 75% 65%, #e7b878aa, transparent 70%); animation: mg-schweben 22s ease-in-out infinite alternate; }
#creatorHome .sp-feature-grid i { background: linear-gradient(135deg, #2a9079, #1d6d5e) !important; color: #fff !important; }

/* ---------- „In drei Schritten online“ ---------- */
#creatorHome .sp-steps { position: relative; isolation: isolate; overflow: hidden; background: transparent !important; color: #14323a !important; border: 1px solid #ffffffb3;
  box-shadow: 0 40px 90px -40px #14323a66, 0 2px 0 #ffffffcc inset, 0 0 0 1px #14323a0f; -webkit-backdrop-filter: blur(24px) saturate(160%); backdrop-filter: blur(24px) saturate(160%); }
#creatorHome .sp-steps::after { content: ""; position: absolute; inset: -30%; z-index: -2; pointer-events: none; filter: blur(50px); opacity: .85;
  background: radial-gradient(26% 34% at 16% 30%, #2f9a83aa, transparent 70%), radial-gradient(26% 34% at 82% 24%, #e7b878aa, transparent 70%), radial-gradient(30% 38% at 60% 86%, #6aa7c788, transparent 70%);
  animation: mg-schweben 22s ease-in-out infinite alternate; }
#creatorHome .sp-steps::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; border-radius: inherit; background: linear-gradient(135deg, #ffffffb3, #ffffff73 45%, #ffffffa1); }
#creatorHome .sp-steps h2, #creatorHome .sp-steps h3 { color: #14323a !important; }
#creatorHome .sp-steps h2 { font-size: clamp(28px, 3.2vw, 40px) !important; line-height: 1.08; letter-spacing: -.03em; margin: 10px 0 18px; }
#creatorHome .sp-steps .hs-eyebrow { color: #1d6d5e !important; }
#creatorHome .sp-steps p { color: #3d5258 !important; }
#creatorHome .sp-steps li { background: #ffffffb8 !important; border: 1px solid #ffffff !important; box-shadow: 0 14px 30px -22px #14323a80; transition: transform .2s; }
#creatorHome .sp-steps li:hover { transform: translateX(4px); }
#creatorHome .sp-steps li > span { color: #fff !important; width: 42px; height: 42px; border-radius: 13px; display: grid; place-items: center; font-size: 16px !important; background: linear-gradient(135deg, #2a9079, #1d6d5e); }
#creatorHome .sp-step-actions button { border: 1.5px solid #14323a40 !important; background: #ffffffb3 !important; color: #14323a !important; font-weight: 700; }
#creatorHome .sp-step-actions button:hover { background: #fff !important; border-color: #14323a !important; }
#creatorHome .sp-step-actions .sp-primary { border: 0 !important; background: linear-gradient(135deg, #2a9079, #1d6d5e) !important; color: #fff !important; box-shadow: 0 12px 24px -12px #1d6d5ecc; }
#creatorHome .sp-step-actions .sp-primary:hover { background: linear-gradient(135deg, #1f7a68, #14323a) !important; color: #fff !important; }

/* ---------- Domain ---------- */
#creatorHome .dd-buehne { color: #14323a; background: transparent; border: 1px solid #ffffffb3;
  box-shadow: 0 40px 90px -40px #14323a66, 0 2px 0 #ffffffcc inset, 0 0 0 1px #14323a0f; -webkit-backdrop-filter: blur(24px) saturate(160%); backdrop-filter: blur(24px) saturate(160%); }
#creatorHome .dd-buehne::before { width: auto; height: auto; inset: 0; right: 0; top: 0; filter: none; border-radius: inherit; animation: none; background: linear-gradient(135deg, #ffffffb3, #ffffff73 45%, #ffffffa1); z-index: -1; }
#creatorHome .dd-buehne::after { width: auto; height: auto; inset: -30%; left: -30%; bottom: -30%; border-radius: 0; z-index: -2; filter: blur(50px); opacity: .85;
  background: radial-gradient(26% 34% at 18% 26%, #2f9a83aa, transparent 70%), radial-gradient(24% 32% at 80% 20%, #e7b878aa, transparent 70%), radial-gradient(30% 36% at 60% 88%, #6aa7c788, transparent 70%);
  animation: mg-schweben 22s ease-in-out infinite alternate; }
#creatorHome .dd-eyebrow { background: #ffffffb3; border-color: #14323a1a; color: #1d6d5e; }
#creatorHome .dd-kopf h2 { color: #14323a; }
#creatorHome .dd-kopf h2 em { background: linear-gradient(100deg, #17705f, #2a9079 40%, #b07a3c 95%); -webkit-background-clip: text; background-clip: text; color: transparent; }
#creatorHome .dd-kopf p { color: #3d5258; }
#creatorHome .dd-leiste { box-shadow: 0 18px 40px -20px #14323a80, 0 0 0 1px #14323a14; }
#creatorHome .dd-leiste:focus-within { box-shadow: 0 22px 50px -20px #14323a99, 0 0 0 4px #2a907940; }
#creatorHome .dd-los { background: linear-gradient(135deg, #2a9079, #1d6d5e) !important; color: #fff !important; box-shadow: 0 12px 24px -12px #1d6d5ecc !important; }
#creatorHome .dd-los:hover { background: linear-gradient(135deg, #1f7a68, #14323a) !important; filter: none; }
.dd-endungen span { color: #3d5258; }
#creatorHome .dd-endungen button { border: 1px solid #14323a26 !important; background: #ffffffa6 !important; color: #34474e !important; }
#creatorHome .dd-endungen button:hover { background: #fff !important; }
#creatorHome .dd-endungen button[aria-pressed="true"] { background: linear-gradient(135deg, #2a9079, #1d6d5e) !important; color: #fff !important; border-color: transparent !important; }
#creatorHome .dd-endungen button[aria-pressed="true"]::before { color: #fff; }
.dd-vertrauen { color: #16564b; }
.dd-ziel { background: #ffffffa6; border-color: #14323a14; }
.dd-segment { background: #e8eeeb; }
#creatorHome .dd-segment button { color: #5f7177 !important; }
#creatorHome .dd-segment button[aria-checked="true"] { background: #fff !important; color: #14323a !important; box-shadow: 0 4px 12px #14323a1a !important; }
#creatorHome .dd-ziel select { border: 1.5px solid #cfdcd6; }
.dd-ziel-info, .dd-alt, .dd-laedt { color: #3d5258; }
.dd-laedt span { border-color: #1d6d5e26; border-top-color: #1d6d5e; }
#creatorHome .dd-alt button { border-color: #a96f2c !important; color: #8a5a2b !important; background: #ffffffa6 !important; }
.dd-karte { box-shadow: 0 14px 30px -20px #14323a80; }

/* ---------- Preise: Summen-Leiste als Glas ---------- */
#creatorHome .pm-leiste { background: linear-gradient(120deg, #ffffffe0, #ffffffb8); color: #14323a; border: 1px solid #fff; box-shadow: 0 24px 50px -22px #14323a99, 0 0 0 1px #14323a0f;
  -webkit-backdrop-filter: blur(18px) saturate(160%); backdrop-filter: blur(18px) saturate(160%); }
#creatorHome .pm-leiste-text small, #creatorHome .pm-summe small { color: #5a6d72; }
#creatorHome .pm-summe b { color: #1d6d5e; }
#creatorHome .pm-zahl { background: linear-gradient(135deg, #e2b878, #a96f2c); color: #fff; }
#creatorHome .pm-leiste-leer .pm-zahl { background: #e8eeeb; color: #5a6d72; }
#creatorHome .pm-haupt { background: linear-gradient(135deg, #2a9079, #1d6d5e) !important; box-shadow: 0 10px 22px -10px #1d6d5ecc !important; }
#creatorHome .pm-haupt:hover { background: linear-gradient(135deg, #1f7a68, #14323a) !important; filter: none; }
#creatorHome .pm-neben { border: 1.5px solid #14323a40 !important; background: #ffffffb3 !important; color: #14323a !important; }
#creatorHome .pm-neben:hover { background: #fff !important; color: #14323a !important; border-color: #14323a !important; }

/* Lesbarkeit: kleine Schriften und Goldflächen kräftiger */
#creatorHome .sx-packages .hs-eyebrow { color: #1d6d5e !important; }
#creatorHome .sx-featured > i, #creatorHome .pm-zahl { background: linear-gradient(135deg, #b07a3c, #7a4f22) !important; color: #fff !important; }
#creatorHome .dd-www { color: #5f7177; }
#creatorHome :is(.pm-segment, .dd-segment) button:not([aria-checked="true"]) { color: #45585e !important; }
#creatorHome .pm-preis small, #creatorHome .pm-betrag small, #creatorHome .pm-tafel li small { color: #536469; }

/* Gewähltes Modul: sattes Grün statt Dunkelblau */
#creatorHome .pm-knopf[aria-pressed="true"] { background: #16564b !important; }
/* Abschluss-Kasten: Hauptknopf grün */
#creatorHome .sx-final .sx-primary { background: linear-gradient(135deg, #2a9079, #1d6d5e) !important; color: #fff !important; border-color: transparent !important; box-shadow: 0 12px 26px -12px #1d6d5ecc !important; }
#creatorHome .sx-final .sx-primary:hover { background: linear-gradient(135deg, #1f7a68, #14323a) !important; color: #fff !important; }

@media (prefers-reduced-motion: reduce) {
  #creatorHome .sx-packages::before, #creatorHome .sp-feature-grid::before, #creatorHome .sp-steps::after, #creatorHome .dd-buehne::after, #creatorHome .sx-leistungen li { animation: none !important; }
}