/* MyHundegeschirr – Geschirr-Konfigurator UI (Vollbild-App) */
:root {
	--mcf-olive: #5a623a; --mcf-olive-d: #474e2c; --mcf-brown: #816036; --mcf-cream: #f8f5f1; --mcf-sand: #efe8dd;
	--mcf-ink: #2f2a24; --mcf-muted: #8a8174; --mcf-line: #e6ded2; --mcf-warn: #c8492c;
	--mcf-top: 64px; --mcf-panel: 480px; --mcf-bar: 132px; --mcf-ease: cubic-bezier(.2, .8, .2, 1);
}
html:has(body.mcf-on), body.mcf-on { overflow: hidden !important; height: 100%; }
body.myhg-cfg.mcf-on { background: var(--mcf-cream) !important; }
/* Seiten-Chrome ausblenden – die App hat eigene Kopf- und Aktionsleiste */
body.mcf-on #brx-header, body.mcf-on #brx-footer, body.mcf-on .eu-owb-order-withdraw-from-contract-button, body.mcf-on #preloader-section, body.mcf-on #preloader-container,
body.myhg-cfg.mcf-on .product_totals, body.myhg-cfg.mcf-on form.cart > .quantity, body.myhg-cfg.mcf-on form.cart > .myhg-custom-made, body.myhg-cfg.mcf-on .myhg-gpsr, body.myhg-cfg.mcf-on .mcf-intro,
body.myhg-cfg.mcf-on #gform_fields_11 > li.gsection, body.myhg-cfg.mcf-on #gform_fields_13 > li.gsection, body.myhg-cfg.mcf-on #gform_fields_15 > li.gsection { display: none !important; }
body.myhg-cfg.mcf-on .brxe-section:not(:has(form.cart)) { display: none !important; }

/* Kopfzeile */
.mcf-top { position: fixed; z-index: 1000; top: 0; left: 0; right: 0; height: var(--mcf-top); display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; padding: 0 22px; background: #fff; border-bottom: 1px solid var(--mcf-line); font-family: Poppins, system-ui, sans-serif; }
body:not(.myhg-cfg) .mcf-top, body:not(.myhg-cfg) .mcf-stage, body:not(.myhg-cfg) .mcf-bar { display: none; }
body.admin-bar .mcf-top { top: 32px; }
.mcf-back { justify-self: start; display: inline-flex; align-items: center; gap: 6px; color: var(--mcf-ink) !important; text-decoration: none !important; font-size: 14px; padding: 8px 12px 8px 6px; border-radius: 10px; transition: background .2s; }
.mcf-back:hover { background: var(--mcf-cream); }
.mcf-top svg, .mcf-guide svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.mcf-title { text-align: center; line-height: 1.25; }
.mcf-title strong { display: block; font-size: 15px; font-weight: 600; color: var(--mcf-ink); }
.mcf-title span { font-size: 12px; color: var(--mcf-muted); }
.mcf-brand { justify-self: end; font-weight: 600; color: var(--mcf-olive) !important; text-decoration: none !important; }

/* Bühne mit Live-Vorschau */
.mcf-stage { position: fixed; z-index: 1; top: var(--mcf-top); left: 0; right: var(--mcf-panel); bottom: 0; display: grid; place-items: center; background: radial-gradient(110% 90% at 50% 40%, #fff 0%, var(--mcf-cream) 60%, var(--mcf-sand) 100%); }
body.admin-bar .mcf-stage { top: calc(var(--mcf-top) + 32px); }
.mcf-stage-card { position: relative; width: min(calc(100vw - var(--mcf-panel) - 96px), calc(100vh - var(--mcf-top) - 96px), 860px); aspect-ratio: 1; border-radius: 28px; background: #fff; overflow: hidden; box-shadow: 0 30px 60px -36px rgba(60, 40, 15, .45), 0 0 0 1px var(--mcf-line); }
.mcf-cv { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; transition: opacity .3s var(--mcf-ease); }
.mcf-cv.is-front { opacity: 1; }
/* Ebenen-Pool: unsichtbare Datenquelle (GF schaltet display um, Bilder laden trotzdem) */
.mcf-pool { position: absolute; width: 1px; height: 1px; overflow: hidden; opacity: 0; pointer-events: none; left: 0; top: 0; }
body.mcf-on .mcf-pool > li.gfield { position: absolute !important; width: 1px !important; height: 1px !important; margin: 0 !important; padding: 0 !important; transform: none !important; }
body.mcf-on .mcf-pool > li.gfield img { width: 1px !important; height: 1px !important; }
.mcf-stage-skel { position: absolute; inset: 0; background: linear-gradient(100deg, #fff 30%, var(--mcf-cream) 50%, #fff 70%); background-size: 200% 100%; animation: mcf-shimmer 1.3s linear infinite; transition: opacity .4s; }
.mcf-stage-card.is-ready .mcf-stage-skel { opacity: 0; pointer-events: none; }
@keyframes mcf-shimmer { to { background-position: -200% 0; } }

/* Panel = Gravity-Forms-Wrapper */
body.myhg-cfg.mcf-on [id^="gform_wrapper_"] { position: fixed !important; z-index: 2; top: var(--mcf-top) !important; right: 0 !important; bottom: var(--mcf-bar) !important; left: auto !important; width: var(--mcf-panel) !important; max-width: 100vw !important; margin: 0 !important; padding: 0 28px 28px !important; overflow-y: auto; overscroll-behavior: contain; background: #fff; border-left: 1px solid var(--mcf-line); font-family: Poppins, system-ui, sans-serif; color: var(--mcf-ink); }
body.admin-bar.myhg-cfg [id^="gform_wrapper_"] { top: calc(var(--mcf-top) + 32px) !important; }
body.myhg-cfg.mcf-on form.cart { position: static !important; }
body.myhg-cfg.mcf-on .gform_body, body.myhg-cfg.mcf-on .gform_fields { width: 100% !important; max-width: none !important; margin: 0 !important; padding: 0 !important; }

/* Schritt-Navigation */
.mcf-steps { position: sticky; top: 0; z-index: 3; display: flex; gap: 6px; margin: 0 -28px 0; padding: 14px 28px 16px; background: #fff; overflow-x: auto; scrollbar-width: none; border-bottom: 1px solid var(--mcf-line); }
.mcf-steps::-webkit-scrollbar { display: none; }
.mcf-step { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 8px; border: 0; background: var(--mcf-cream); color: var(--mcf-muted); border-radius: 999px; padding: 7px 14px 7px 7px; font: 500 13px/1 Poppins, sans-serif; cursor: pointer; transition: background .25s, color .25s, transform .2s; }
.mcf-step:hover { transform: translateY(-1px); color: var(--mcf-ink); }
.mcf-step-n { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: #fff; font-size: 11.5px; font-weight: 600; transition: background .25s, color .25s; }
.mcf-step.is-done { color: var(--mcf-olive); }
.mcf-step.is-done .mcf-step-n { background: var(--mcf-olive); color: #fff; font-size: 0; }
.mcf-step.is-done .mcf-step-n::after { content: "✓"; font-size: 12px; }
.mcf-step.is-cur { background: var(--mcf-olive); color: #fff; box-shadow: 0 6px 14px -8px rgba(90, 98, 58, .8); }
.mcf-step.is-cur .mcf-step-n { background: rgba(255, 255, 255, .22); color: #fff; }
.mcf-steps-bar { position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: transparent; }
.mcf-steps-bar span { display: block; height: 100%; width: 0; background: var(--mcf-olive); transition: width .45s var(--mcf-ease); }
.mcf-step-head { padding: 22px 0 6px; }
.mcf-step-head span { font-size: 12px; font-weight: 500; color: var(--mcf-muted); letter-spacing: .04em; text-transform: uppercase; }
.mcf-step-head h2 { margin: 2px 0 0; font-size: 26px; font-weight: 600; letter-spacing: -.02em; color: var(--mcf-ink); }

/* Nur aktueller Schritt sichtbar */
body.mcf-on .collapsible-sections-collapsible-body { display: none !important; }
body.mcf-on .collapsible-sections-collapsible-body.mcf-cur { display: block !important; height: auto !important; overflow: visible !important; animation: mcf-in .4s var(--mcf-ease); padding: 0 !important; margin: 0 !important; border: 0 !important; background: none !important; }
@keyframes mcf-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* Felder */
body.mcf-on .mcf-cur > li.gfield { margin: 22px 0 0 !important; padding: 0 !important; list-style: none; }
body.mcf-on .mcf-cur .gfield_label, body.mcf-on .mcf-cur legend.gfield_label { display: flex !important; align-items: baseline; justify-content: space-between; gap: 10px; width: 100%; margin: 0 0 10px !important; font: 600 15px/1.3 Poppins, sans-serif !important; color: var(--mcf-ink) !important; }
.mcf-val { font-weight: 500; font-size: 13px; color: var(--mcf-olive); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 55%; }
body.mcf-on .mcf-cur .gfield_description { font-size: 12.5px !important; color: var(--mcf-muted) !important; line-height: 1.5; padding: 0 0 8px !important; }
body.mcf-on .mcf-cur .gfield_required { color: var(--mcf-brown) !important; }
/* Farbfelder / Bildauswahl als Swatches */
body.mcf-on .mcf-cur .image-choices-field .gfield_radio { display: flex !important; flex-wrap: wrap; gap: 12px 8px !important; margin: 0 !important; padding: 0 !important; }
body.mcf-on .mcf-cur .image-choices-field li.gchoice { position: relative; margin: 0 !important; padding: 0 !important; width: 60px !important; list-style: none; }
body.mcf-on .mcf-cur .image-choices-field li.gchoice > input { position: absolute !important; opacity: 0 !important; width: 1px !important; height: 1px !important; pointer-events: none; }
body.mcf-on .mcf-cur .image-choices-field li.gchoice > label { display: flex !important; flex-direction: column; align-items: center; gap: 7px; width: 60px !important; max-width: none !important; padding: 0 !important; margin: 0 !important; border: 0 !important; background: none !important; box-shadow: none !important; cursor: pointer; }
body.mcf-on .mcf-cur .image-choices-choice-image-wrap { position: relative; display: block !important; width: 46px !important; height: 46px !important; margin: 0 !important; padding: 0 !important; border-radius: 50% !important; overflow: hidden; background-size: cover !important; background-position: center !important; border: 0 !important; box-shadow: 0 0 0 1px rgba(0, 0, 0, .1) inset, 0 2px 6px rgba(0, 0, 0, .08); transition: transform .2s var(--mcf-ease), box-shadow .2s; }
body.mcf-on .mcf-cur .image-choices-choice-image-wrap img { opacity: 0 !important; }
body.mcf-on .mcf-cur li.gchoice > label:hover .image-choices-choice-image-wrap { transform: scale(1.07); }
body.mcf-on .mcf-cur li.gchoice > input:checked + label .image-choices-choice-image-wrap { box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--mcf-olive), 0 6px 14px -6px rgba(0, 0, 0, .4) !important; transform: scale(1.04); }
body.mcf-on .mcf-cur li.gchoice > input:checked + label .image-choices-choice-image-wrap::after { content: ""; position: absolute; inset: 0; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12 5 5 9-10'/%3E%3C/svg%3E") center / 20px no-repeat; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .6)); }
body.mcf-on .mcf-cur .image-choices-choice-text { position: static !important; display: block !important; transform: none !important; opacity: 1 !important; visibility: visible !important; background: none !important; padding: 0 !important; margin: 0 !important; border-radius: 0 !important; box-shadow: none !important; font: 400 10.5px/1.2 Poppins, sans-serif !important; color: var(--mcf-muted) !important; text-align: center; white-space: normal; width: 60px; }
body.mcf-on .mcf-cur .image-choices-choice-text::before, body.mcf-on .mcf-cur .image-choices-choice-text::after { display: none !important; }
body.mcf-on .mcf-cur li.gchoice > input:checked + label .image-choices-choice-text { color: var(--mcf-ink) !important; font-weight: 600 !important; }
body.mcf-on .mcf-cur .image-choices-field li.gchoice > input:focus-visible + label .image-choices-choice-image-wrap { box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--mcf-brown) !important; }
/* Auswahllisten */
body.mcf-on .mcf-cur select { width: 100% !important; height: 50px !important; border: 1px solid #d6d0c6 !important; border-radius: 12px !important; padding: 0 40px 0 14px !important; font: 15px Poppins, sans-serif !important; background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235a623a' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 14px center / 18px !important; appearance: none !important; color: var(--mcf-ink) !important; }
body.mcf-on .mcf-cur input[type="text"], body.mcf-on .mcf-cur input[type="number"] { height: 50px !important; border: 1px solid #d6d0c6 !important; border-radius: 12px !important; padding: 0 14px !important; font: 16px Poppins, sans-serif !important; background: #fff !important; box-shadow: none !important; transition: border-color .15s, box-shadow .15s; width: 100% !important; }
body.mcf-on .mcf-cur input:focus, body.mcf-on .mcf-cur select:focus { outline: 0 !important; border-color: var(--mcf-olive) !important; box-shadow: 0 0 0 4px rgba(90, 98, 58, .14) !important; }
/* Größen-Umschalter (Segment) */
body.mcf-on .mcf-cur .button-styled-radio-selection .gfield_radio { display: grid !important; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 8px !important; }
body.mcf-on .mcf-cur .button-styled-radio-selection label { display: block !important; text-align: center; padding: 12px 10px !important; border: 1px solid #d6d0c6 !important; border-radius: 12px !important; font-size: 14px !important; background: #fff !important; color: var(--mcf-ink) !important; transition: all .2s; width: auto !important; }
body.mcf-on .mcf-cur .button-styled-radio-selection input:checked + label { background: var(--mcf-olive) !important; border-color: var(--mcf-olive) !important; color: #fff !important; }
/* Fehler / fehlende Pflichtangaben */
body.mcf-on li.gfield_error { background: none !important; border: 0 !important; }
body.mcf-on li.gfield_error input, body.mcf-on li.mcf-missing input { border-color: var(--mcf-warn) !important; }
body.mcf-on li.mcf-missing { animation: mcf-shake .45s var(--mcf-ease); }
@keyframes mcf-shake { 25% { transform: translateX(-5px); } 75% { transform: translateX(5px); } }
body.mcf-on .validation_message { color: var(--mcf-warn) !important; font-size: 12.5px !important; padding: 4px 0 0 !important; background: none !important; border: 0 !important; }
body.mcf-on .gform_validation_errors, body.mcf-on .validation_error { border-radius: 12px !important; margin: 16px 0 0 !important; font-size: 13px !important; }

.mcf-guide { display: flex; align-items: center; gap: 12px; margin: 18px 0 0; padding: 14px 16px; border-radius: 14px; background: var(--mcf-cream); color: var(--mcf-ink) !important; text-decoration: none !important; font-size: 13.5px; line-height: 1.4; transition: background .2s, transform .2s; }
.mcf-guide:hover { background: var(--mcf-sand); transform: translateY(-1px); }
.mcf-guide svg { flex: 0 0 auto; color: var(--mcf-olive); width: 26px; height: 26px; }
.mcf-summary:empty { display: none; }
.mcf-summary { margin: 18px 0 0; padding: 16px 18px; border-radius: 16px; background: var(--mcf-cream); }
.mcf-summary h3 { margin: 0 0 8px; font-size: 14px; font-weight: 600; }
.mcf-summary ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 4px; font-size: 13px; }
.mcf-summary li { display: flex; justify-content: space-between; gap: 12px; }
.mcf-summary li span { color: var(--mcf-muted); }
.mcf-summary li strong { font-weight: 500; text-align: right; }
.mcf-link { margin-top: 8px; border: 0; background: none; padding: 0; color: var(--mcf-olive); font: 500 13px Poppins, sans-serif; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }

/* Aktionsleiste */
.mcf-bar { position: fixed; z-index: 1000; right: 0; bottom: 0; width: var(--mcf-panel); height: var(--mcf-bar); display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 6px 14px; padding: 14px 28px 12px; background: #fff; border-top: 1px solid var(--mcf-line); border-left: 1px solid var(--mcf-line); font-family: Poppins, system-ui, sans-serif; box-shadow: 0 -12px 30px -24px rgba(60, 40, 15, .5); }
.mcf-bar-price span { display: block; font-size: 12px; color: var(--mcf-muted); }
.mcf-bar-price strong { display: block; font-size: 25px; font-weight: 600; color: var(--mcf-olive); letter-spacing: -.02em; line-height: 1.15; }
.mcf-bar-price small { display: block; font-size: 11.5px; color: var(--mcf-muted); white-space: nowrap; }
.mcf-bar-actions { display: flex; gap: 8px; justify-content: flex-end; }
.mcf-btn { height: 50px; border-radius: 14px !important; border: 0 !important; padding: 0 20px !important; font: 600 14.5px/1 Poppins, sans-serif !important; cursor: pointer; white-space: nowrap; transition: background .2s, transform .2s, box-shadow .2s; letter-spacing: .01em; }
.mcf-btn[hidden] { display: none !important; }
.mcf-btn-ghost { background: var(--mcf-cream) !important; color: var(--mcf-ink) !important; }
.mcf-btn-ghost:hover { background: var(--mcf-sand) !important; }
.mcf-btn-primary { background: var(--mcf-olive) !important; color: #fff !important; position: static !important; transform: none !important; margin: 0 !important; width: auto !important; }
.mcf-btn-primary:hover { background: var(--mcf-olive-d) !important; transform: translateY(-1px); box-shadow: 0 12px 24px -12px rgba(90, 98, 58, .8); }
body.mcf-on .mcf-submit { display: none !important; }
body.mcf-on.mcf-last .mcf-submit { display: inline-flex !important; align-items: center; justify-content: center; position: fixed !important; z-index: 1001 !important; right: 28px !important; left: auto !important; top: auto !important; bottom: calc(var(--mcf-bar) - 14px - 50px) !important; width: 210px !important; height: 50px !important; }
body.mcf-on.mcf-last .mcf-bar-actions { padding-right: 222px; }
/* Bestell-Button (WC-Button, Theme setzt z-index 995) über die Leiste heben; Klicks gehen durch die leeren Flächen der Leiste */
html body.mcf-on.mcf-last form.cart button.mcf-submit, body.mcf-on.mcf-last #gform_submit_button_11, body.mcf-on.mcf-last #gform_submit_button_13, body.mcf-on.mcf-last #gform_submit_button_15 { z-index: 1002 !important; }
/* Im letzten Schritt kompakter Zurück-Pfeil, damit der Bestell-Button Platz hat */
body.mcf-on.mcf-last .mcf-bar [data-mcf-prev] { width: 48px; min-width: 48px; padding: 0 !important; font-size: 0 !important; display: inline-flex; align-items: center; justify-content: center; }
body.mcf-on.mcf-last .mcf-bar [data-mcf-prev]::before { content: ""; width: 10px; height: 10px; border: solid currentColor; border-width: 0 0 2px 2px; transform: translateX(2px) rotate(45deg); }
body.mcf-on.mcf-last .mcf-bar, body.mcf-on.mcf-last .mcf-bar-actions { pointer-events: none; }
body.mcf-on.mcf-last .mcf-bar a, body.mcf-on.mcf-last .mcf-bar button { pointer-events: auto; }
body.mcf-on.mcf-last [data-mcf-next] { display: none !important; }
.mcf-legal { grid-column: 1 / -1; margin: 0; font-size: 10.5px; color: var(--mcf-muted); text-align: right; }
.mcf-legal a { color: var(--mcf-muted) !important; }
.is-bump { animation: mcf-bump .45s var(--mcf-ease); }
@keyframes mcf-bump { 40% { transform: scale(.94); } 70% { transform: scale(1.04); } }

/* Mobil / Tablet hoch */
@media (max-width: 979px) {
	:root { --mcf-top: 56px; --mcf-panel: 100vw; --mcf-bar: 118px; --mcf-stage-h: 38vh; }
	.mcf-top { grid-template-columns: auto 1fr; padding: 0 12px; }
	.mcf-back span, .mcf-brand { display: none; }
	.mcf-title { text-align: left; }
	.mcf-stage { right: 0; bottom: auto; height: var(--mcf-stage-h); border-bottom: 1px solid var(--mcf-line); }
	.mcf-stage-card { width: min(calc(var(--mcf-stage-h) - 20px), calc(100vw - 32px)); border-radius: 20px; }
	body.myhg-cfg.mcf-on [id^="gform_wrapper_"] { top: calc(var(--mcf-top) + var(--mcf-stage-h)) !important; left: 0 !important; width: 100vw !important; border-left: 0; padding: 0 18px 24px !important; }
	body.admin-bar.myhg-cfg [id^="gform_wrapper_"] { top: calc(var(--mcf-top) + var(--mcf-stage-h) + 46px) !important; }
	body.admin-bar .mcf-top { top: 46px; } body.admin-bar .mcf-stage { top: calc(var(--mcf-top) + 46px); }
	.mcf-steps { margin: 0 -18px; padding: 10px 18px 12px; }
	.mcf-step-head { padding-top: 16px; }
	.mcf-step-head h2 { font-size: 22px; }
	.mcf-bar { left: 0; width: 100vw; height: var(--mcf-bar); padding: 10px 16px calc(8px + env(safe-area-inset-bottom)); border-left: 0; }
	body.mcf-on.mcf-last .mcf-submit, body.mcf-on.mcf-last #gform_submit_button_11, body.mcf-on.mcf-last #gform_submit_button_13, body.mcf-on.mcf-last #gform_submit_button_15 { right: 16px !important; bottom: calc(var(--mcf-bar) - 10px - 48px) !important; width: 180px !important; min-width: 0 !important; max-width: 180px !important; height: 48px !important; }
	body.mcf-on.mcf-last .mcf-bar-actions { padding-right: 190px; }
	.mcf-bar-price strong { font-size: 21px; }
	.mcf-btn { height: 48px; padding: 0 16px !important; font-size: 14px !important; }
	.mcf-legal { text-align: center; font-size: 9.5px; }
}
@media (min-width: 980px) and (max-width: 1240px) { :root { --mcf-panel: 420px; } }
@media (prefers-reduced-motion: reduce) { .mcf-stage *, [id^="gform_wrapper_"] * { animation: none !important; transition: none !important; } }

/* Altes Mobil-Vorschaubild des Formulars – die Vorschau übernimmt die Bühne */
body.mcf-on li.myhundegeschirr-konfiguration-base-bild-mobil { display: none !important; }

/* =====================================================================================
   Motion & Feedback (v1.1): Goo-Indikatoren, Richtungs-Übergänge, Plausibilisierung
   ===================================================================================== */
:root { --mcf-spring: cubic-bezier(.34, 1.56, .64, 1); --mcf-amber: #b7791f; --mcf-amber-bg: #fdf5e6; --mcf-amber-line: #f1dcb4; --mcf-ok: #4f7a3a; }

/* Schritte als Track, aktiver Schritt = Goo-Blob, der sich zwischen den Schritten zieht */
.mcf-step { position: relative; z-index: 1; background: transparent; }
.mcf-step:hover { background: var(--mcf-cream); }
.mcf-steps:has(.mcf-goo.is-on) .mcf-step.is-cur { background: transparent; box-shadow: none; }
.mcf-goo { position: absolute; inset: 0; z-index: 0; pointer-events: none; filter: url(#mcf-goo-f); opacity: 0; transition: opacity .3s; }
.mcf-goo.is-on { opacity: 1; }
.mcf-goo i { position: absolute; left: 0; top: 0; border-radius: 999px; background: var(--mcf-olive); will-change: transform, width; transition: transform .42s var(--mcf-spring), width .42s var(--mcf-spring), height .3s; }
.mcf-goo i + i { transition-duration: .62s, .62s, .3s; transition-timing-function: cubic-bezier(.6, 0, .2, 1); }
.mcf-step-n { position: relative; }
.mcf-step-n b { font-weight: 600; transition: opacity .2s, transform .3s var(--mcf-spring); }
.mcf-step-n svg { position: absolute; inset: 0; margin: auto; width: 13px; height: 13px; fill: none; stroke: #fff; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 24; stroke-dashoffset: 24; }
.mcf-step.is-done .mcf-step-n { font-size: 11.5px; }
.mcf-step.is-done .mcf-step-n::after { content: none; }
.mcf-step.is-done .mcf-step-n b { opacity: 0; transform: scale(.4); }
.mcf-step.is-done .mcf-step-n svg { animation: mcf-draw .45s .08s var(--mcf-ease) forwards; }
@keyframes mcf-draw { to { stroke-dashoffset: 0; } }
.mcf-step.has-warn .mcf-step-n { background: var(--mcf-amber) !important; color: #fff !important; }
.mcf-step.has-warn .mcf-step-n b { opacity: 1; transform: none; }
.mcf-step.has-warn .mcf-step-n svg { display: none; }
.mcf-step.has-warn .mcf-step-n::before { content: ""; position: absolute; inset: -3px; border-radius: 50%; border: 2px solid var(--mcf-amber); animation: mcf-ping 1.6s var(--mcf-ease) infinite; }
@keyframes mcf-ping { 0% { transform: scale(.8); opacity: .9; } 100% { transform: scale(1.6); opacity: 0; } }

/* Schrittwechsel: richtungsabhängig, Felder laufen gestaffelt ein */
body.mcf-on .collapsible-sections-collapsible-body.mcf-cur { animation: none; }
body.mcf-on .collapsible-sections-collapsible-body.mcf-cur > * { animation: mcf-in-f .55s var(--mcf-ease) both; animation-delay: calc(var(--mcf-i, 0) * 45ms); }
body.mcf-on[data-mcf-dir="back"] .collapsible-sections-collapsible-body.mcf-cur > * { animation-name: mcf-in-b; }
@keyframes mcf-in-f { from { opacity: 0; transform: translateX(26px); } to { opacity: 1; transform: none; } }
@keyframes mcf-in-b { from { opacity: 0; transform: translateX(-26px); } to { opacity: 1; transform: none; } }
.mcf-step-head span, .mcf-step-head h2 { display: block; animation: mcf-rise .5s var(--mcf-ease) both; }
.mcf-step-head h2 { animation-delay: .05s; }
@keyframes mcf-rise { from { opacity: 0; transform: translateY(10px); filter: blur(4px); } to { opacity: 1; transform: none; filter: none; } }

/* Labels: Pflicht-Stern direkt am Text, Wert rechts */
body.mcf-on .mcf-cur .gfield_label { justify-content: flex-start !important; }
body.mcf-on .mcf-cur .gfield_label .gfield_required { margin-left: 1px; font-size: 13px; }
body.mcf-on .mcf-cur .gfield_label .mcf-val { margin-left: auto; }
.mcf-val.is-flip { animation: mcf-flip .4s var(--mcf-ease); }
@keyframes mcf-flip { from { opacity: 0; transform: translateY(7px); } to { opacity: 1; transform: none; } }

/* Farb-Swatches: Federn, Haken zeichnet sich, Welle */
body.mcf-on .mcf-cur li.gchoice > label .image-choices-choice-image-wrap { transition: transform .35s var(--mcf-spring), box-shadow .25s; }
body.mcf-on .mcf-cur li.gchoice > label:active .image-choices-choice-image-wrap { transform: scale(.9); }
body.mcf-on .mcf-cur li.gchoice > input:checked + label .image-choices-choice-image-wrap { animation: mcf-pop .5s var(--mcf-spring); }
body.mcf-on .mcf-cur li.gchoice > input:checked + label .image-choices-choice-image-wrap::after { animation: mcf-wipe .35s .12s var(--mcf-ease) both; }
@keyframes mcf-pop { 0% { transform: scale(.82); } 100% { transform: scale(1.04); } }
@keyframes mcf-wipe { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
.mcf-ripple { position: absolute; top: 0; left: 50%; width: 46px; height: 46px; margin-left: -23px; border-radius: 50%; pointer-events: none; animation: mcf-ripple .6s var(--mcf-ease) forwards; }
@keyframes mcf-ripple { from { box-shadow: 0 0 0 0 rgba(90, 98, 58, .45); } to { box-shadow: 0 0 0 16px rgba(90, 98, 58, 0); } }

/* Segment-Auswahl (Größe/Modus): Goo-Blob gleitet zur Auswahl */
body.mcf-on .mcf-cur .mcf-seg { position: relative; }
body.mcf-on .mcf-cur .mcf-seg li.gchoice { position: relative; z-index: 1; margin: 0 !important; }
body.mcf-on .mcf-cur .mcf-seg .mcf-goo i { border-radius: 12px; }
body.mcf-on .mcf-cur .mcf-seg:has(.mcf-goo.is-on) input:checked + label { background: transparent !important; border-color: transparent !important; color: #fff !important; }
body.mcf-on .mcf-cur .mcf-seg label { transition: color .25s, border-color .25s, background .25s !important; }
body.mcf-on .mcf-cur .mcf-seg label:hover { border-color: var(--mcf-olive) !important; }
body.mcf-on .mcf-cur .mcf-seg label:active { transform: scale(.97); }

/* Maßfelder: Fokus, gültig (Haken), ungültig (rot), auffällig (Hinweis, bernstein) */
body.mcf-on .mcf-cur li.mass-eingabe .ginput_container { position: relative; }
body.mcf-on .mcf-cur li.mass-eingabe input { transition: border-color .2s, box-shadow .25s, background .25s !important; }
body.mcf-on .mcf-cur li.mass-eingabe:focus-within .gform-field-label__text { color: var(--mcf-olive); }
body.mcf-on .mcf-cur li.mass-eingabe .ginput_container::before { content: ""; position: absolute; z-index: 2; top: 50%; right: 60px; width: 20px; height: 20px; margin-top: -10px; border-radius: 50%; background: var(--mcf-ok) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 12.5 4 4 8-9'/%3E%3C/svg%3E") center / 13px no-repeat; transform: scale(0); transition: transform .4s var(--mcf-spring); pointer-events: none; }
body.mcf-on .mcf-cur li.mass-eingabe.mcf-ok:not(.mcf-warned):not(:focus-within) .ginput_container::before { transform: scale(1); }
body.mcf-on .mcf-cur li.mcf-invalid input { border-color: var(--mcf-warn) !important; box-shadow: 0 0 0 4px rgba(200, 73, 44, .12) !important; }
body.mcf-on .mcf-cur li.mcf-warned input { border-color: var(--mcf-amber) !important; background: var(--mcf-amber-bg) !important; }
.mcf-hint { font-size: 12.5px; color: var(--mcf-warn); padding: 6px 2px 0; animation: mcf-flip .3s var(--mcf-ease); }
.mcf-hint:empty { display: none; }

/* Plausibilitäts-Hinweise aus Gravity Forms als Karten */
body.mcf-on .mcf-cur > li.mcf-warn { position: relative; margin: 10px 0 0 !important; padding: 12px 14px 12px 42px !important; border-radius: 14px; background: var(--mcf-amber-bg) !important; border: 1px solid var(--mcf-amber-line) !important; color: #6b4a12 !important; font: 400 13px/1.5 Poppins, sans-serif !important; animation: mcf-warn-in .5s var(--mcf-spring) both !important; }
body.mcf-on li.mcf-warn .konfigurator-warnung, body.mcf-on li.mcf-warn * { color: inherit !important; font: inherit !important; background: none !important; padding: 0 !important; margin: 0 !important; border: 0 !important; }
.mcf-warn-i { position: absolute; left: 14px; top: 13px; width: 18px !important; height: 18px !important; fill: none; stroke: var(--mcf-amber) !important; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
@keyframes mcf-warn-in { from { opacity: 0; transform: translateY(-6px) scale(.97); } to { opacity: 1; transform: none; } }
li.mcf-warn.mcf-pulse { animation: mcf-warn-pulse 1.2s var(--mcf-ease) !important; }
@keyframes mcf-warn-pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(183, 121, 31, 0); } 30% { box-shadow: 0 0 0 6px rgba(183, 121, 31, .25); } }

/* Zeichenzähler */
.mcf-has-count { position: relative; }
.mcf-has-count input { padding-right: 58px !important; }
.mcf-count { position: absolute; right: 14px; top: 50%; transform: translateY(-50%); font: 500 12px Poppins, sans-serif; color: var(--mcf-muted); pointer-events: none; transition: color .2s; }
.mcf-count.is-full { color: var(--mcf-brown); animation: mcf-bump .4s var(--mcf-ease); }
body.mcf-on .mcf-cur .charleft, body.mcf-on .mcf-cur .ginput_counter { display: none !important; }

/* Bestätigungs-Sheet vor dem Bestellen */
.mcf-sheet { position: fixed; inset: 0; z-index: 3000; display: grid; place-items: center; font-family: Poppins, system-ui, sans-serif; }
.mcf-sheet[hidden] { display: none; }
.mcf-sheet-bg { position: absolute; inset: 0; background: rgba(36, 28, 18, .42); backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px); opacity: 0; transition: opacity .28s; }
.mcf-sheet-card { position: relative; width: min(440px, calc(100vw - 32px)); padding: 26px 24px 20px; border-radius: 24px; background: #fff; box-shadow: 0 40px 80px -30px rgba(40, 25, 10, .5); opacity: 0; transform: translateY(18px) scale(.96); transition: opacity .28s, transform .45s var(--mcf-spring); }
.mcf-sheet.is-open .mcf-sheet-bg { opacity: 1; }
.mcf-sheet.is-open .mcf-sheet-card { opacity: 1; transform: none; }
.mcf-sheet-ico { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 16px; background: var(--mcf-amber-bg); color: var(--mcf-amber); margin-bottom: 12px; }
.mcf-sheet-ico svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.mcf-sheet h3 { margin: 0 0 6px; font-size: 20px; font-weight: 600; letter-spacing: -.01em; color: var(--mcf-ink); }
.mcf-sheet p { margin: 0 0 12px; font-size: 13.5px; line-height: 1.5; color: var(--mcf-muted); }
.mcf-sheet ul { margin: 0 0 18px; padding: 0; list-style: none; display: grid; gap: 8px; }
.mcf-sheet li { position: relative; padding: 10px 12px 10px 32px; border-radius: 12px; background: var(--mcf-amber-bg); font-size: 13px; line-height: 1.45; color: #6b4a12; }
.mcf-sheet li::before { content: "!"; position: absolute; left: 10px; top: 10px; width: 16px; height: 16px; border-radius: 50%; background: var(--mcf-amber); color: #fff; font: 700 11px/16px Poppins, sans-serif; text-align: center; }
.mcf-sheet-act { display: grid; gap: 8px; }
.mcf-sheet-act .mcf-btn { width: 100% !important; display: flex; align-items: center; justify-content: center; }
@media (max-width: 979px) {
	.mcf-sheet { place-items: end center; }
	.mcf-sheet-card { width: 100vw; border-radius: 24px 24px 0 0; padding-bottom: calc(20px + env(safe-area-inset-bottom)); transform: translateY(100%); transition: opacity .2s, transform .45s var(--mcf-ease); }
}

/* Buttons: Druck-Feedback, Weiter-Pfeil, Glanz + Ladezustand beim Bestellen */
.mcf-btn:active { transform: scale(.97) !important; }
[data-mcf-next]::after { content: ""; display: inline-block; width: 7px; height: 7px; margin-left: 10px; border: solid currentColor; border-width: 2px 2px 0 0; transform: translateY(-1px) rotate(45deg); transition: transform .3s var(--mcf-spring); }
[data-mcf-next]:hover::after { transform: translate(4px, -1px) rotate(45deg); }
body.mcf-on.mcf-last button.mcf-submit { overflow: hidden !important; }
body.mcf-on.mcf-last button.mcf-submit::after { content: ""; position: absolute; top: 0; bottom: 0; left: -60%; width: 40%; background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .28), transparent); transform: skewX(-18deg); animation: mcf-shine 3.6s 1s var(--mcf-ease) infinite; pointer-events: none; }
@keyframes mcf-shine { 0%, 55% { left: -60%; } 85%, 100% { left: 130%; } }
body.mcf-on button.mcf-submit.is-loading { color: transparent !important; pointer-events: none; }
body.mcf-on button.mcf-submit.is-loading > * { opacity: 0; }
body.mcf-on button.mcf-submit.is-loading::before { content: ""; position: absolute; left: 50%; top: 50%; width: 20px; height: 20px; margin: -10px 0 0 -10px; border-radius: 50%; border: 2.5px solid rgba(255, 255, 255, .35); border-top-color: #fff; animation: mcf-spin .7s linear infinite; }
@keyframes mcf-spin { to { transform: rotate(360deg); } }
.mcf-bar-price strong { transform-origin: left center; font-variant-numeric: tabular-nums; }

/* Bühne: 3D-Neigung mit Lichtreflex, weicher Bildwechsel */
.mcf-stage-card { transform: perspective(1400px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: transform .5s var(--mcf-ease); }
.mcf-stage-card::after { content: ""; position: absolute; inset: 0; z-index: 3; pointer-events: none; background: radial-gradient(600px circle at var(--gx, 50%) var(--gy, 30%), rgba(255, 255, 255, .22), transparent 45%); mix-blend-mode: soft-light; }
.mcf-stage-card.is-swap .mcf-cv.is-front { animation: mcf-swap .6s var(--mcf-ease); }
@keyframes mcf-swap { from { transform: scale(1.018); filter: blur(2px) saturate(1.1); } to { transform: none; filter: none; } }

@media (prefers-reduced-motion: reduce) {
	.mcf-goo i, .mcf-sheet-card, .mcf-stage-card, .mcf-step-head * { transition: none !important; animation: none !important; }
	body.mcf-on button.mcf-submit::after { display: none; }
}

/* Fix: Haken der Farbwahl mittig (gf-image-choices / Theme setzen Größe + Position des ::after) */
body.mcf-on .mcf-cur li.gchoice > input:checked + label .image-choices-choice-image-wrap::after { inset: 0 !important; top: 0 !important; left: 0 !important; right: 0 !important; bottom: 0 !important; width: auto !important; height: auto !important; margin: 0 !important; padding: 0 !important; transform: none !important; border: 0 !important; border-radius: 50% !important; background-color: transparent !important; background-position: center !important; background-size: 20px 20px !important; background-repeat: no-repeat !important; font-size: 0 !important; line-height: 0 !important; }
body.mcf-on .mcf-cur li.gchoice > input:checked + label .image-choices-choice-image-wrap::before { display: none !important; }
/* Fix: Aktionsleiste darf nie überlaufen */
.mcf-bar-actions { min-width: 0; }
.mcf-bar-actions .mcf-btn { min-width: 0; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
/* Haken mit dunkler Kontur – auch auf hellen Farben (Weiß, Sandbeige, Silber) gut lesbar */
body.mcf-on .mcf-cur li.gchoice > input:checked + label .image-choices-choice-image-wrap::after { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12 5 5 9-10' stroke='%232f2a24' stroke-opacity='.55' stroke-width='5.5'/%3E%3Cpath d='m5 12 5 5 9-10' stroke='white' stroke-width='3'/%3E%3C/svg%3E") !important; filter: none !important; }

/* =====================================================================================
   v1.2 – alles auf einer Seite: Abschnitte untereinander, Scrollspy-Navigation, Bestell-Button immer sichtbar
   ===================================================================================== */
body.mcf-flow .mcf-step-head { display: none; }
body.mcf-flow [id^="gform_wrapper_"] { scroll-behavior: smooth; scroll-padding-top: 90px; }
.mcf-sec-h { display: flex; align-items: center; gap: 12px; margin: 34px 0 0; padding-top: 30px; border-top: 1px solid var(--mcf-line); }
form.cart .gform_fields > .mcf-sec-h:first-of-type, .gform_body .mcf-sec-h:first-of-type { margin-top: 8px; padding-top: 18px; border-top: 0; }
.mcf-sec-h h2 { margin: 0 !important; font: 600 22px/1.2 Poppins, sans-serif !important; letter-spacing: -.02em; color: var(--mcf-ink) !important; }
.mcf-sec-n { display: grid; place-items: center; flex: 0 0 auto; width: 30px; height: 30px; border-radius: 50%; background: var(--mcf-cream); color: var(--mcf-olive); font: 700 13px/1 Poppins, sans-serif; transition: background .3s, color .3s; }
body.mcf-flow .collapsible-sections-collapsible-body.mcf-cur > * { animation: mcf-fade .35s var(--mcf-ease) both; animation-delay: 0s; }
@keyframes mcf-fade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
body.mcf-flow .mcf-cur > li.gfield:first-child { margin-top: 16px !important; }
.mcf-reveal { opacity: 0; transform: translateY(18px); transition: opacity .7s var(--mcf-ease), transform .7s var(--mcf-ease); }
.mcf-reveal.is-in { opacity: 1; transform: none; }
body.mcf-flow form.cart .gform_body { padding-bottom: 28px !important; }
/* Leiste: nur Preis + großer Bestell-Button */
body.mcf-flow .mcf-bar [data-mcf-prev], body.mcf-flow .mcf-bar [data-mcf-next] { display: none !important; }
body.mcf-flow .mcf-bar-actions { padding-right: 0 !important; }
html body.mcf-on.mcf-flow.mcf-last form.cart button.mcf-submit, html body.mcf-on.mcf-flow.mcf-last #gform_submit_button_11, html body.mcf-on.mcf-flow.mcf-last #gform_submit_button_13, html body.mcf-on.mcf-flow.mcf-last #gform_submit_button_15 {
	width: 250px !important; max-width: 250px !important; height: 56px !important; bottom: calc(var(--mcf-bar) - 14px - 56px) !important; border-radius: 16px !important;
	font-size: 15.5px !important; box-shadow: 0 14px 30px -14px rgba(71, 78, 44, .9) !important;
}
@media (max-width: 979px) {
	body.mcf-flow [id^="gform_wrapper_"] { scroll-padding-top: 70px; }
	.mcf-sec-h { margin-top: 26px; padding-top: 24px; }
	.mcf-sec-h h2 { font-size: 19px !important; }
	html body.mcf-on.mcf-flow.mcf-last form.cart button.mcf-submit, html body.mcf-on.mcf-flow.mcf-last #gform_submit_button_11, html body.mcf-on.mcf-flow.mcf-last #gform_submit_button_13, html body.mcf-on.mcf-flow.mcf-last #gform_submit_button_15 {
		right: 16px !important; width: min(230px, calc(100vw - 172px)) !important; max-width: none !important; min-width: 0 !important; height: 52px !important; bottom: calc(var(--mcf-bar) - 10px - 52px) !important; font-size: 15px !important;
	}
}

/* =====================================================================================
   v1.3 – clean & weiß: rahmenlose Vorschau, Logo, Lupe, Vertrauens-Zeile, Preisdetails
   ===================================================================================== */
body.myhg-cfg.mcf-on, .mcf-stage { background: #fff !important; }
.mcf-stage { grid-template-rows: 1fr auto; padding-bottom: 18px; }
.mcf-stage-card { align-self: center; justify-self: center; background: #fff; border-radius: 0; box-shadow: none !important; transform: none !important; transition: none; width: min(calc(100vw - var(--mcf-panel) - 80px), calc(100vh - var(--mcf-top) - 120px), 900px); }
.mcf-stage-card::after { display: none; }
.mcf-top { border-bottom-color: #f1ede7; }
body.myhg-cfg.mcf-on [id^="gform_wrapper_"], .mcf-bar { border-left-color: #f1ede7; }
.mcf-bar { box-shadow: 0 -10px 30px -26px rgba(60, 40, 15, .35); border-top-color: #f1ede7; }
/* Logo */
.mcf-brand { display: inline-flex; align-items: center; }
.mcf-brand img { display: block; height: 34px; width: auto; transition: opacity .2s; }
.mcf-brand:hover img { opacity: .75; }
/* Lupe */
.mcf-stage-card.is-zoom { cursor: zoom-in; }
.mcf-cv { transform-origin: var(--zx, 50%) var(--zy, 50%); transition: opacity .3s var(--mcf-ease), transform .35s var(--mcf-ease); }
.mcf-stage-card.is-zoom .mcf-cv.is-front { transform: scale(2); }
.mcf-stage-card.is-zoom.is-swap .mcf-cv.is-front { animation: none; }
.mcf-zoom-hint { position: absolute; left: 50%; top: calc(var(--mcf-top) * 0 + 14px); transform: translateX(-50%); font: 500 11.5px Poppins, sans-serif; color: var(--mcf-muted); opacity: .8; transition: opacity .3s; pointer-events: none; }
.mcf-stage:has(.is-zoom) .mcf-zoom-hint { opacity: 0; }
/* Vertrauens-Zeile unter dem Bild */
.mcf-trust { display: flex; justify-content: center; gap: 10px 26px; flex-wrap: wrap; margin: 0; padding: 0 20px; list-style: none; font: 500 12.5px Poppins, sans-serif; color: var(--mcf-muted); }
.mcf-trust li { display: inline-flex; align-items: center; gap: 7px; margin: 0; }
.mcf-trust svg { width: 17px; height: 17px; fill: none; stroke: var(--mcf-olive); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
/* Info-Button statt „| mehr Infos“ */
body.mcf-on .mcf-cur .gfield_description.mcf-desc-only-info { padding: 0 !important; margin: -4px 0 8px !important; }
body.mcf-on a.mcf-info { display: inline-flex; align-items: center; gap: 5px; height: 26px; padding: 0 10px 0 7px; border-radius: 99px; background: var(--mcf-cream); color: var(--mcf-olive) !important; font: 500 12px/1 Poppins, sans-serif; text-decoration: none !important; transition: background .2s, transform .2s var(--mcf-spring); vertical-align: middle; }
body.mcf-on a.mcf-info:hover { background: var(--mcf-sand); transform: translateY(-1px); }
body.mcf-on a.mcf-info svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
/* Preis + Details */
.mcf-bar-price { position: relative; }
.mcf-price-btn { display: inline-flex; align-items: center; gap: 6px; border: 0; background: none; padding: 0; margin: 0; cursor: pointer; color: inherit; font: inherit; }
.mcf-price-btn svg { width: 16px; height: 16px; fill: none; stroke: var(--mcf-muted); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform .3s var(--mcf-spring); }
.mcf-price-btn[aria-expanded="true"] svg { transform: rotate(180deg); }
.mcf-price-btn:hover strong { color: var(--mcf-olive-d); }
.mcf-bar-price small a { color: var(--mcf-muted) !important; text-decoration: underline; text-underline-offset: 2px; }
.mcf-breakdown { position: absolute; left: -8px; bottom: calc(100% + 18px); width: 300px; padding: 16px 18px 14px; border-radius: 18px; background: #fff; box-shadow: 0 24px 60px -20px rgba(40, 25, 10, .35), 0 0 0 1px #f1ede7; font: 13px/1.4 Poppins, sans-serif; color: var(--mcf-ink); opacity: 0; transform: translateY(8px) scale(.98); transform-origin: 20% 100%; transition: opacity .2s, transform .35s var(--mcf-spring); z-index: 5; }
.mcf-breakdown.is-open { opacity: 1; transform: none; }
.mcf-breakdown ul { margin: 0 0 10px; padding: 0; list-style: none; display: grid; gap: 6px; }
.mcf-breakdown li, .mcf-bd-sum { display: flex; justify-content: space-between; gap: 14px; margin: 0; }
.mcf-breakdown li span { color: var(--mcf-muted); }
.mcf-bd-sum { padding-top: 10px; border-top: 1px solid var(--mcf-line); font-weight: 600; font-size: 14px; }
.mcf-breakdown p { margin: 8px 0 0; font-size: 10.5px; color: var(--mcf-muted); }
@media (max-width: 979px) {
	.mcf-stage { grid-template-rows: 1fr; padding-bottom: 0; transition: height .35s var(--mcf-ease); }
	.mcf-trust, .mcf-zoom-hint { display: none; }
	.mcf-stage-card { width: min(calc(var(--mcf-stage-h) - 12px), calc(100vw - 32px)); transition: width .35s var(--mcf-ease); }
	.mcf-brand { display: inline-flex !important; justify-self: end; }
	.mcf-brand img { height: 24px; }
	.mcf-top { grid-template-columns: auto 1fr auto; }
	body.myhg-cfg.mcf-on [id^="gform_wrapper_"] { transition: top .35s var(--mcf-ease); }
	body.mcf-compact { --mcf-stage-h: 22vh; }
	.mcf-breakdown { width: calc(100vw - 32px); left: 0; }
}
.mcf-price-btn:focus { outline: 0 !important; box-shadow: none !important; }
.mcf-price-btn:focus-visible { outline: 2px solid var(--mcf-olive) !important; outline-offset: 4px; border-radius: 8px; }
.mcf-brand img { height: 38px; }
.mcf-bar-price small { line-height: 1.45; }
@media (max-width: 979px) { .mcf-brand img { height: 26px; } }
.mcf-bar-price > span a { color: var(--mcf-muted) !important; text-decoration: underline; text-underline-offset: 2px; }
@media (max-width: 979px) { .mcf-title span { display: none; } .mcf-title strong { font-size: 16px; } }
@media (max-width: 979px) { .mcf-noun { display: none; } .mcf-stage { border-bottom-color: #f1ede7; } }

/* Kein Fortschritts-Unterstrich unter der Schritt-Leiste */
.mcf-steps-bar { display: none !important; }