/* Startseite „Preise & Module“ – Milchglas wie der Einstieg, grüne Knöpfe mit heller Schrift */
#creatorHome .pm-preise { position: relative; font-family: Manrope, "Segoe UI", system-ui, sans-serif; color: #14323a; }
.pm-buehne { position: relative; isolation: isolate; overflow: hidden; overflow: clip; padding: clamp(26px, 4vw, 52px); border-radius: 30px; border: 1px solid #ffffffb3;
  box-shadow: 0 40px 90px -40px #14323a59, 0 2px 0 #ffffffcc inset, 0 0 0 1px #14323a0f; -webkit-backdrop-filter: blur(22px) saturate(160%); backdrop-filter: blur(22px) saturate(160%); }
.pm-buehne::after { content: ""; position: absolute; inset: -30%; z-index: -2; pointer-events: none; filter: blur(50px); opacity: .75;
  background: radial-gradient(26% 30% at 12% 18%, #2f9a83aa, transparent 70%), radial-gradient(24% 30% at 88% 30%, #e7b878aa, transparent 70%), radial-gradient(30% 34% at 50% 92%, #6aa7c766, transparent 70%);
  animation: mg-schweben 26s ease-in-out infinite alternate; }
.pm-buehne::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: linear-gradient(140deg, #ffffffc4, #ffffff8c 50%, #ffffffb8); }

.pm-kopf { max-width: 720px; margin: 0 0 28px; }
.pm-eyebrow { display: inline-flex; align-items: center; gap: 8px; color: #1d6d5e; font-size: 12px; font-weight: 800; letter-spacing: .16em; }
.pm-eyebrow::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: #c99a5b; box-shadow: 0 0 0 4px #c99a5b33; }
.pm-kopf h2 { margin: 10px 0 12px; font-size: clamp(30px, 4vw, 48px); line-height: 1.06; letter-spacing: -.03em; color: #14323a; }
.pm-kopf h2 em { font-style: normal; background: linear-gradient(100deg, #17705f, #2a9079 40%, #b07a3c 95%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.pm-kopf p { margin: 0; font-size: 16px; line-height: 1.6; color: #3d5258; }

/* Standardpreise */
.pm-standard { display: grid; grid-template-columns: 1.25fr 1fr; gap: 18px; margin: 0 0 34px; }
.pm-tafel { position: relative; padding: 22px 22px 18px; border-radius: 22px; background: #ffffffc7; border: 1px solid #ffffff; box-shadow: 0 18px 40px -26px #14323a66; }
.pm-tafel-icon { position: absolute; right: 18px; top: 16px; width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; background: linear-gradient(135deg, #2a9079, #1d6d5e); color: #fff; font-size: 18px; }
.pm-tafel h3 { margin: 0 0 2px; font-size: 19px; color: #14323a; }
.pm-tafel-unter { margin: 0 0 12px; color: #5a6d72; font-size: 13.5px; padding-right: 48px; }
.pm-tafel ul { list-style: none; margin: 0; padding: 0; display: grid; }
.pm-tafel li { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 11px 0; border-top: 1px solid #14323a14; }
.pm-tafel li b { display: block; font-size: 14.5px; color: #14323a; }
.pm-tafel li small { display: block; font-size: 12.5px; color: #66777d; line-height: 1.4; }
.pm-betrag { flex: none; text-align: right; }
.pm-betrag b { font-size: 16px !important; color: #1d6d5e !important; white-space: nowrap; }
.pm-tafel-fuss { margin: 10px 0 0; font-size: 12px; color: #66777d; }

/* Katalog */
.pm-katalog-kopf { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 14px; margin: 0 0 14px; }
.pm-katalog-kopf h3 { margin: 0; font-size: 24px; letter-spacing: -.02em; color: #14323a; }
.pm-katalog-kopf p { margin: 2px 0 0; color: #5a6d72; font-size: 14px; }
.pm-filter { display: flex; flex-wrap: wrap; gap: 6px; padding: 5px; border-radius: 14px; background: #ffffffa6; border: 1px solid #14323a14; }
#creatorHome .pm-filter button { height: 36px; margin: 0; padding: 0 14px; border: 0 !important; border-radius: 10px; background: transparent !important; color: #34474e !important; font: 700 13.5px Manrope, "Segoe UI", system-ui, sans-serif; cursor: pointer; box-shadow: none !important; transition: background .2s, color .2s; }
#creatorHome .pm-filter button:hover { background: #ffffff !important; color: #14323a !important; }
#creatorHome .pm-filter button[aria-selected="true"] { background: linear-gradient(135deg, #2a9079, #1d6d5e) !important; color: #fff !important; box-shadow: 0 8px 18px -10px #1d6d5ecc !important; }

.pm-ziel { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin: 0 0 16px; padding: 12px 14px; border-radius: 16px; background: #ffffff9e; border: 1px solid #14323a12; }
.pm-ziel > b { font-size: 13.5px; color: #14323a; }
.pm-segment { display: inline-flex; gap: 4px; padding: 4px; border-radius: 12px; background: #e8eeeb; }
#creatorHome .pm-segment button { height: 34px; margin: 0; padding: 0 12px; border: 0 !important; border-radius: 9px; background: transparent !important; color: #5f7177 !important; font: 700 13px Manrope, "Segoe UI", system-ui, sans-serif; cursor: pointer; box-shadow: none !important; }
#creatorHome .pm-segment button[aria-checked="true"] { background: #fff !important; color: #14323a !important; box-shadow: 0 4px 12px #14323a1a !important; }
#creatorHome .pm-segment button:disabled { opacity: .45; cursor: not-allowed; }
#creatorHome .pm-projekt { height: 38px; min-width: 200px; max-width: 100%; margin: 0; padding: 0 12px; border-radius: 11px; border: 1.5px solid #cfdcd6; background: #fff; color: #14323a; font: 700 14px Manrope, "Segoe UI", system-ui, sans-serif; }
.pm-ziel-info { font-size: 13px; color: #5a6d72; }

.pm-karten { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 14px; }
.pm-karte { position: relative; display: flex; flex-direction: column; gap: 6px; padding: 16px; border-radius: 20px; background: #ffffffc2; border: 1.5px solid #ffffff; box-shadow: 0 14px 30px -24px #14323a80;
  animation: pm-rein .45s cubic-bezier(.2, .8, .2, 1) both; animation-delay: calc(var(--i, 0) * 30ms); transition: transform .22s cubic-bezier(.2, .8, .2, 1), box-shadow .22s, border-color .22s, background .22s; }
.pm-karte:hover { transform: translateY(-3px); box-shadow: 0 22px 40px -24px #14323a8c; }
.pm-karte.pm-an { border-color: #2a9079; background: linear-gradient(160deg, #ffffff, #eaf6f1); box-shadow: 0 0 0 3px #2a907926, 0 18px 36px -24px #1d6d5ecc; }
.pm-karte.pm-plopp { animation: pm-plopp .38s cubic-bezier(.2, .8, .2, 1); }
@keyframes pm-rein { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@keyframes pm-plopp { 40% { transform: scale(1.035); } }
.pm-karte-kopf { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.pm-icon { width: 42px; height: 42px; border-radius: 13px; display: grid; place-items: center; font-size: 20px; background: linear-gradient(140deg, #eaf5f1, #fbf3e6); border: 1px solid #14323a12; }
.pm-an .pm-icon { background: linear-gradient(140deg, #2a9079, #1d6d5e); color: #fff; }
.pm-tag { padding: 3px 9px; border-radius: 999px; background: #fbf0dd; color: #8a5a2b; font-size: 11px; font-weight: 800; letter-spacing: .02em; }
.pm-tag-leise { background: #eef3f1; color: #5a6d72; }
.pm-name { font-size: 15.5px; color: #14323a; margin-top: 4px; }
.pm-beschreibung { margin: 0; flex: 1; font-size: 13px; line-height: 1.45; color: #5a6d72; }
.pm-karte-fuss { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 36px; margin-top: 4px; }
.pm-preis b { font-size: 18px; color: #14323a; } .pm-preis small { display: block; font-size: 11.5px; color: #66777d; }
.pm-menge { display: inline-flex; align-items: center; border-radius: 11px; background: #fff; border: 1.5px solid #cfdcd6; overflow: hidden; }
#creatorHome .pm-menge button { width: 32px; height: 32px; margin: 0; padding: 0; border: 0 !important; background: transparent !important; color: #1d6d5e !important; font: 800 17px Manrope, sans-serif; cursor: pointer; box-shadow: none !important; }
#creatorHome .pm-menge button:hover { background: #eaf6f1 !important; }
.pm-menge output { min-width: 30px; text-align: center; font-weight: 800; font-size: 14px; color: #14323a; }
#creatorHome .pm-knopf { width: 100%; height: 42px; margin: 6px 0 0; border: 0 !important; border-radius: 12px; background: linear-gradient(135deg, #2a9079, #1d6d5e) !important; color: #fff !important; font: 800 14px Manrope, "Segoe UI", system-ui, sans-serif; cursor: pointer;
  box-shadow: 0 10px 20px -12px #1d6d5ecc !important; transition: transform .18s, background .18s, box-shadow .18s; }
#creatorHome .pm-knopf:hover, #creatorHome .pm-knopf:focus-visible { background: linear-gradient(135deg, #1f7a68, #14323a) !important; color: #fff !important; transform: translateY(-1px); outline: none; }
#creatorHome .pm-knopf:focus-visible { box-shadow: 0 0 0 4px #c99a5b66 !important; }
#creatorHome .pm-knopf[aria-pressed="true"] { background: #14323a !important; color: #fff !important; }
#creatorHome .pm-knopf[aria-pressed="true"]:hover { background: #8a3b32 !important; }
#creatorHome .pm-knopf[aria-pressed="true"]:hover::after { content: " – entfernen"; }
.pm-leer { margin: 0; padding: 18px; border-radius: 16px; background: #ffffffa6; color: #5a6d72; text-align: center; }

/* Leiste mit Summe – klebt beim Scrollen am unteren Rand */
.pm-leiste { position: sticky; bottom: 84px; z-index: 3; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 18px; margin: 20px 0 0; padding: 12px 12px 12px 16px; border-radius: 20px;
  background: linear-gradient(120deg, #14323af2, #1d5c55f2); color: #fff; box-shadow: 0 24px 50px -20px #0b1820b3; -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); transition: transform .3s, box-shadow .3s; }
.pm-leiste.pm-gespeichert { transform: scale(1.015); box-shadow: 0 0 0 4px #c99a5b80, 0 24px 50px -20px #0b1820b3; }
.pm-leiste-text { display: flex; align-items: center; gap: 12px; min-width: 0; flex: 1; }
.pm-zahl { flex: none; width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: #f1d6a8; color: #14323a; font-weight: 800; font-size: 17px; }
.pm-leiste-text b { display: block; font-size: 15px; } .pm-leiste-text small { display: block; color: #cfe0dc; font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pm-summe { margin-left: auto; text-align: right; } .pm-summe small { display: block; color: #cfe0dc; font-size: 11.5px; } .pm-summe b { font-size: 20px; color: #f1d6a8; white-space: nowrap; }
.pm-leiste-knoepfe { display: flex; flex-wrap: wrap; gap: 8px; }
#creatorHome .pm-haupt, #creatorHome .pm-neben { height: 44px; margin: 0; padding: 0 18px; border-radius: 13px; font: 800 14px Manrope, "Segoe UI", system-ui, sans-serif; cursor: pointer; transition: transform .18s, filter .18s, background .18s; }
#creatorHome .pm-haupt { border: 0 !important; background: linear-gradient(135deg, #34a58b, #2a9079) !important; color: #fff !important; box-shadow: 0 10px 22px -10px #000a !important; }
#creatorHome .pm-haupt:hover { filter: brightness(1.1); transform: translateY(-1px); color: #fff !important; }
#creatorHome .pm-neben { border: 1.5px solid #ffffff59 !important; background: #ffffff14 !important; color: #fff !important; box-shadow: none !important; }
#creatorHome .pm-neben:hover { background: #ffffff2b !important; color: #fff !important; }
.pm-leiste-leer .pm-zahl { background: #ffffff26; color: #fff; }

/* Kalkulationsfenster: Modul-Gruppen */
.hwc-gruppe { margin: 14px 0 4px; font-size: 11.5px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: #1d6d5e; }
.hwc-icon { display: inline-block; width: 1.5em; font-style: normal; }

body.dark .pm-buehne::before { background: linear-gradient(140deg, #14323acc, #0e2a30b3); }
body.dark .pm-kopf h2, body.dark .pm-katalog-kopf h3 { color: #f3f7f5; }
body.dark .pm-kopf p, body.dark .pm-katalog-kopf p { color: #c9d8d4; }

@media (max-width: 900px) { .pm-standard { grid-template-columns: 1fr; } }
@media (max-width: 560px) {
  .pm-buehne { padding: 22px 16px; border-radius: 22px; }
  .pm-karten { grid-template-columns: 1fr; }
  .pm-leiste-knoepfe, #creatorHome .pm-haupt { width: 100%; } #creatorHome .pm-neben { flex: 1; } #creatorHome .pm-haupt { flex: 2; }
}
@media (prefers-reduced-motion: reduce) { .pm-buehne::after, .pm-karte, .pm-karte.pm-plopp { animation: none; } }

/* Artikelnummer auf Modul- und Paketkarten */
.pm-art { display: block; margin: -2px 0 2px; font: 700 11px/1.3 ui-monospace, Consolas, monospace; color: #5a6d72; letter-spacing: .02em; }
#creatorHome .sx-package .pm-art { margin: -2px 0 8px; }