* {
    box-sizing: border-box;
}

html,
body {
    min-height: 100%;
}

body {
    margin: 0;
    background: var(--page-bg);
    color: var(--text);
    font-family: var(--font-main);
}

body,
button,
input,
select,
textarea {
    font-family: var(--font-main);
}

.container {
    width: 100%;
    max-width: 1800px;
    margin: 0 auto;
    padding: 48px 80px;
}

.hero {
    display: grid;
    grid-template-columns: minmax(420px, 1fr) minmax(700px, 900px);
    gap: 160px;
    align-items: center;
}

.hero-content {
    min-width: 0;
    max-width: 700px;
}

.logo {
    display: block;
    max-width: 220px;
    max-height: 95px;
    width: auto;
    height: auto;
    object-fit: contain;
    margin-bottom: 34px;
}

.logo-text {
    display: block;
    margin-bottom: 34px;
    font-size: 22px;
    font-weight: 800;
}

.eyebrow {
    margin: 0 0 18px;
    color: var(--secondary);
    text-transform: uppercase;
    letter-spacing: .24em;
    font-size: 13px;
    font-weight: 800;
}

h1 {
    color: var(--primary);
    font-size: clamp(42px, 5.6vw, 60px);
    line-height: .95;
    margin: 0 0 28px;
    max-width: 680px;
}

.lead {
    color: var(--text);
    font-size: 18px;
    line-height: 1.65;
    margin: 0;
    max-width: 620px;
}

.card {
    position: relative;
    width: 100%;
    background: var(--card-bg);
    color: var(--card-text);
    border-radius: var(--radius-card);
    padding: 56px 32px 32px;
    box-shadow: var(--shadow-card);
    overflow: visible;
}

.card-progress {
    margin-top: 18px;
    text-align: center;
    color: var(--card-text);
    opacity: .75;
    font-size: 14px;
    font-weight: 400;
}

.card h2 {
    margin: 0 0 26px;
    color: var(--card-text);
    font-size: 28px;
    line-height: 1.2;
}

label {
    display: block;
    margin-bottom: 20px;
    color: var(--card-text);
    font-size: 15px;
    font-weight: 600;
}

input,
select,
textarea {
    display: block;
    width: 100%;
    margin-top: 9px;
    padding: 15px 16px;
    border-radius: var(--radius-input);
    border: 0;
    background: var(--input-bg);
    color: var(--input-text);
    font-size: 16px;
    line-height: 1.3;
}

input::placeholder,
textarea::placeholder {
    color: var(--input-placeholder);
    opacity: 1;
}

input[type="date"] {
    color: var(--input-text);
}

.button {
    display: block;
    width: 100%;
    background: var(--button-bg);
    color: var(--button-text);
    border: 0;
    padding: 16px 18px;
    border-radius: var(--radius-input);
    cursor: pointer;
    font-size: 16px;
    font-weight: 800;
    line-height: 1.3;
}

.button:hover {
    opacity: .9;
}

.package-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 28px;
}

.package-card {
    display: flex;
    flex-direction: column;
    height: 100%;
min-height: 520px;
    padding: 18px;
    border-radius: var(--radius-input);
    background: rgba(255,255,255,.12);
}

.package-image {

    width: 100%;

    height: 180px;


    border-radius: calc(var(--radius-input) - 2px);

    overflow: hidden;


    background: rgba(255,255,255,.12);


    margin-bottom: 16px;

}


.package-image img {

    width: 100%;

    height: 100%;


    object-fit: cover;

    display: block;

}

.package-card strong {
    display: block;
    color: var(--card-text);
    font-size: 19px;
    margin-bottom: 8px;
}

.package-card p {
    margin: 0 0 14px;
    color: var(--card-text);
    opacity: .82;
    line-height: 1.45;
}

.package-price {
    margin-top: auto;
    margin-bottom: 24px;
    color: var(--card-text);
    font-size: 24px;
    font-weight: 900;
}

.package-price span {
    font-size: 13px;
    font-weight: 600;
    opacity: .75;
}1~.package-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
}

.package-card {
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: 18px;
    border-radius: var(--radius-input);
    background: rgba(255,255,255,.12);
}

.package-image {
    width: 100%;
    aspect-ratio: 16 / 10;
    border-radius: calc(var(--radius-input) - 2px);
    background: rgba(255,255,255,.18);
    margin-bottom: 16px;
    overflow: hidden;
}

.package-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.package-card strong {
    display: block;
    color: var(--card-text);
    font-size: 19px;
    margin-bottom: 8px;
}

.package-card p {
    margin: 0 0 14px;
    color: var(--card-text);
    opacity: .82;
    line-height: 1.45;
}

.package-price {
    margin-top: auto;
    margin-bottom: 16px;
    color: var(--card-text);
    font-size: 24px;
    font-weight: 900;
}

.package-price span {
    font-size: 13px;
    font-weight: 600;
    opacity: .75;
}

.package-contents {
    white-space: pre-line;
    line-height: 1.7;
    margin: 16px 0;
    color: var(--card-text);
    opacity: .9;
}

.step-navigation {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 24px;
}

.back-button {
    background: transparent;
    border: 0;
    color: var(--card-text);
    opacity: .8;
    cursor: pointer;
    font-size: 14px;
    font-weight: 500;
    padding: 0;
}

.back-button:hover {
    opacity: 1;
}

.wizard {
    width: 100%;
    max-width: 1500px;
    margin: 0 auto;
}

.wizard-card {
    width: 100%;
    background: var(--card-bg);
    color: var(--card-text);
    border-radius: var(--radius-card);
    padding: 40px;
    box-shadow: var(--shadow-card);
}

.stepper {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 8px;
    margin-bottom: 34px;
}

.stepper-item {
    padding: 10px 8px;
    border-radius: 999px;
    background: rgba(255,255,255,.14);
    color: var(--card-text);
    opacity: .65;
    text-align: center;
    font-size: 12px;
    font-weight: 600;
}

.stepper-item.active {
    background: var(--button-bg);
    color: var(--button-text);
    opacity: 1;
}

.wizard-header {
    margin-bottom: 34px;
}

.wizard-header h1 {
    color: var(--card-text);
    font-size: clamp(34px, 4vw, 56px);
    margin-bottom: 16px;
}

.wizard-header p {
    max-width: 760px;
    margin: 0;
    color: var(--card-text);
    opacity: .82;
    line-height: 1.6;
}

.selection-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
}

.selection-card {
    padding: 18px;
    border-radius: var(--radius-input);
    background: rgba(255,255,255,.12);
}

.selection-card strong {
    display: block;
    margin-bottom: 8px;
    font-size: 18px;
}

.selection-card p {
    margin: 0;
    opacity: .82;
    line-height: 1.5;
}

@media (max-width: 960px) {
    .container {
        padding: 32px 20px;
    }

    .hero {
        grid-template-columns: 1fr;
        gap: 40px;
        align-items: start;
    }

    .logo {
        margin-bottom: 28px;
    }
}

@media (max-width: 520px) {
    .card {
        padding: 54px 22px 24px;
    }

    h1 {
        font-size: 42px;
    }

    .card-progress {
        right: 22px;
    }
}

/* Progress Steps */
.configurator-progress {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin: 0 0 28px;
}

.progress-step {
    width: 34px;
    height: 34px;
    border-radius: 999px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #e5e5e5;
    color: var(--text-color);
    font-size: 14px;
    font-weight: 700;
}

.progress-step.is-active {
    background: var(--accent);
    color: var(--button-text-color);
}

/* Wide Wizard */
.container-wide {
    max-width: 1180px;
}

.wizard-wide {
    width: 100%;
}

.wizard-card {
    width: 100%;
}

.wizard-header {
    max-width: 100%;
    margin-bottom: 32px;
}

/* Selection Cards */
.selection-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
}

.selection-option {
    cursor: pointer;
    transition: 0.2s ease;
}

.selection-option input {
    display: none;
}

.selection-option.is-selected {
    background: var(--accent);
    color: var(--button-text-color);
    border-color: var(--accent);
}

.selection-option.is-selected p,
.selection-option.is-selected strong {
    color: var(--button-text-color);
}

.selection-option:hover {
    transform: translateY(-2px);
}

.rule-list {
    display: flex;
    flex-direction: column;
    gap: 34px;
}

.rule-header {
    margin-bottom: 14px;
}

.rule-header h2 {
    margin-bottom: 6px;
}

.product-badge {
    display: inline-flex;
    width: fit-content;
    margin-top: 10px;
    padding: 5px 9px;
    border-radius: 999px;
    background: rgba(255,255,255,0.22);
    font-size: 12px;
    font-weight: 700;
}

@media (max-width: 900px) {
    .selection-grid {
        grid-template-columns: 1fr;
    }

    .configurator-progress {
        gap: 6px;
    }

    .progress-step {
        width: 30px;
        height: 30px;
        font-size: 13px;
    }
}

/* Step 3 clickable selection cards */
.selection-card.selection-option {
    position: relative;
    border: 2px solid transparent;
    cursor: pointer;
    user-select: none;
}

.selection-card.selection-option::after {
    content: "Auswählen";
    display: inline-flex;
    margin-top: 16px;
    padding: 7px 12px;
    border-radius: 999px;
    background: rgba(255,255,255,0.14);
    color: inherit;
    font-size: 12px;
    font-weight: 800;
}

.selection-card.selection-option.is-selected {
    background: var(--accent) !important;
    border-color: var(--accent);
    color: var(--button-text-color) !important;
}

.selection-card.selection-option.is-selected::after {
    content: "Ausgewählt";
    background: rgba(255,255,255,0.24);
}

.selection-card.selection-option.is-selected strong,
.selection-card.selection-option.is-selected p {
    color: var(--button-text-color) !important;
}

.selection-option input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.configurator-progress {
    margin-bottom: 34px;
}

.progress-step {
    opacity: 0.85;
}

.progress-step.is-active {
    transform: scale(1.08);
}

/* Food rule counters and surcharge display */
.rule-header {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    align-items: flex-start;
}

.rule-counter {
    flex-shrink: 0;
    padding: 8px 12px;
    border-radius: 999px;
    background: rgba(255,255,255,0.1);
    font-size: 13px;
    font-weight: 800;
}

.rule-counter.is-complete {
    background: var(--accent);
    color: var(--button-text-color);
}

.paid-products-section {
    margin-top: 22px;
}

.paid-products-section h3 {
    margin-bottom: 14px;
    font-size: 18px;
}

.selection-price-label {
    display: inline-flex;
    width: fit-content;
    margin-top: 14px;
    padding: 7px 11px;
    border-radius: 999px;
    background: rgba(255,255,255,0.16);
    font-size: 13px;
    font-weight: 800;
}

.selection-option.is-extra-selection {
    border-color: var(--accent);
}

.button:disabled,
.button.is-disabled {
    opacity: 0.35;
    cursor: not-allowed;
    pointer-events: none;
}

@media (max-width: 700px) {
    .rule-header {
        flex-direction: column;
    }
}

/* Hide empty price pills */
.selection-price-label:empty {
    display: none;
}

.selection-card.selection-option .selection-price-label:empty {
    display: none !important;
}

/* Progress Bar V2 */
.configurator-progress {
    position: relative;
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 0;
    width: 100%;
    margin: 0 0 34px;
}

.configurator-progress::before {
    content: "";
    position: absolute;
    top: 17px;
    left: 24px;
    right: 24px;
    height: 3px;
    background: var(--secondary);
    z-index: 0;
}

.progress-step {
    position: relative;
    z-index: 1;
    margin: 0 auto;
    background: var(--secondary);
    border: 3px solid var(--secondary);
}

.progress-step.is-active {
    background: var(--accent);
    border-color: var(--accent);
}

/* Step 3 full width */
.container-wide {
    max-width: 1600px;
    width: 100%;
}

.wizard-wide {
    width: 100%;
}

.wizard-card {
    width: 100%;
}

/* Step navigation */
.step-navigation {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
}

.back-button {
    white-space: nowrap;
}

#foodNextButton {
    width: auto;
    min-width: 220px;
    padding-inline: 24px;
}

#drinkNextButton {
    width: auto;
    min-width: 220px;
    padding-inline: 24px;
}

/* Contact & Extras */
.extras-section {
    margin-top: 28px;
}

.extras-section h3 {
    margin-bottom: 14px;
}

.extras-list {
    display: grid;
    gap: 12px;
}

.extra-option {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    padding: 14px;
    border-radius: var(--radius-card);
    background: rgba(255,255,255,0.08);
    cursor: pointer;
}

.extra-option input {
    margin-top: 4px;
}

.extra-option span {
    display: grid;
    gap: 4px;
}

.extra-option small {
    opacity: 0.8;
}

.extra-option em {
    font-style: normal;
    font-weight: 800;
    color: var(--accent);
}

/* Extras as clickable cards */
.extras-grid {
    margin-top: 14px;
}

.extra-option {
    position: relative;
    display: block;
    border: 2px solid transparent;
    cursor: pointer;
    user-select: none;
}

.extra-option input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.extra-option.is-selected {
    background: var(--accent) !important;
    border-color: var(--accent);
    color: var(--button-text-color) !important;
}

.extra-option.is-selected strong,
.extra-option.is-selected small,
.extra-option.is-selected em {
    color: var(--button-text-color) !important;
}

.extra-option span {
    display: grid;
    gap: 8px;
}

.extra-option::after {
    content: "Auswählen";
    display: inline-flex;
    margin-top: 16px;
    padding: 7px 12px;
    border-radius: 999px;
    background: rgba(255,255,255,0.14);
    color: inherit;
    font-size: 12px;
    font-weight: 800;
}

.extra-option.is-selected::after {
    content: "Ausgewählt";
    background: rgba(255,255,255,0.24);
}

.extra-option {
    border-radius: var(--radius-card) !important;
    overflow: hidden;
}

.extra-option::after {
    border-radius: 999px;
}

/* Branding controlled logo size */
.logo {
    width: var(--logo-width);
    height: auto;
    max-width: 100%;
}

/* Branding controlled inactive progress color */
.configurator-progress::before {
    background: var(--progress-inactive) !important;
}

.progress-step {
    background: var(--progress-inactive) !important;
    border-color: var(--progress-inactive) !important;
}

.progress-step.is-active {
    background: var(--accent) !important;
    border-color: var(--accent) !important;
}

/* Progress Bar Dynamic Fill */
.configurator-progress::before {
    background: var(--progress-inactive) !important;
}

.configurator-progress::after {
    content: "";
    position: absolute;
    top: 17px;
    left: 24px;
    height: 3px;
    width: calc(100% - 48px);
    background: linear-gradient(
        to right,
        var(--accent) 0%,
        var(--accent) var(--progress-percent),
        transparent var(--progress-percent),
        transparent 100%
    );
    z-index: 0;
    pointer-events: none;
}

.progress-step {
    z-index: 2;
}

/* Progress fine tuning */
.configurator-progress::before,
.configurator-progress::after {
    top: 50% !important;
    transform: translateY(-50%);
}

.configurator-progress::after {
    width: calc((100% - 48px) * var(--progress-percent) / 100);
    background: var(--accent) !important;
}

.progress-step {
    box-shadow: 0 0 0 6px var(--card-bg);
}

/* Progress final reset */
.configurator-progress {
    position: relative !important;
    display: grid !important;
    grid-template-columns: repeat(7, 1fr) !important;
    align-items: center !important;
    width: 100% !important;
    margin: 0 0 34px !important;
}

.configurator-progress::before {
    content: "" !important;
    position: absolute !important;
    top: 50% !important;
    left: calc(100% / 14) !important;
    right: calc(100% / 14) !important;
    height: 3px !important;
    transform: translateY(-50%) !important;
    background: var(--progress-inactive) !important;
    z-index: 0 !important;
}

.configurator-progress::after {
    content: "" !important;
    position: absolute !important;
    top: 50% !important;
    left: calc(100% / 14) !important;
    height: 3px !important;
    width: calc((100% - (100% / 7)) * var(--progress-percent) / 100) !important;
    transform: translateY(-50%) !important;
    background: var(--accent) !important;
    z-index: 1 !important;
    pointer-events: none !important;
}

.progress-step {
    position: relative !important;
    z-index: 2 !important;
    width: 34px !important;
    height: 34px !important;
    margin: 0 auto !important;
    border-radius: 999px !important;
    background: var(--progress-inactive) !important;
    border: 0 !important;
    box-shadow: 0 0 0 8px var(--card-bg) !important;
}

.progress-step.is-active {
    background: var(--accent) !important;
}

/* Progress V2 segmented */
.configurator-progress,
.configurator-progress::before,
.configurator-progress::after {
    display: none !important;
}

.configurator-progress-v2 {
    display: grid;
    grid-template-columns: 34px repeat(6, 1fr 34px);
    align-items: center;
    width: 100%;
    margin: 0 0 34px;
}

.progress-step-v2 {
    width: 34px;
    height: 34px;
    border-radius: 999px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--progress-inactive);
    color: var(--button-text);
    font-size: 14px;
    font-weight: 800;
    z-index: 2;
}

.progress-step-v2.is-active {
    background: var(--accent);
}

.progress-line-v2 {
    height: 3px;
    background: var(--progress-inactive);
}

.progress-line-v2.is-active {
    background: var(--accent);
}

@media (max-width: 700px) {
    .configurator-progress-v2 {
        grid-template-columns: 28px repeat(6, 1fr 28px);
    }

    .progress-step-v2 {
        width: 28px;
        height: 28px;
        font-size: 12px;
    }
}

/* Package overview: 3 cards per row */
.wizard-wide .package-list {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
}

.wizard-wide .package-list form {
    height: 100%;
}

.wizard-wide .package-card {
    height: 100%;
}

@media (max-width: 1100px) {
    .wizard-wide .package-list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 700px) {
    .wizard-wide .package-list {
        grid-template-columns: 1fr;
    }
}

/* Summary layout */
.summary-price-box {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 24px;
    margin: 0 0 28px;
    padding: 20px 24px;
    border-radius: var(--radius-card);
    background: var(--accent);
    color: var(--button-text);
}

.summary-price-box span {
    font-weight: 800;
}

.summary-price-box strong {
    font-size: clamp(28px, 4vw, 44px);
    line-height: 1;
}

.summary-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px;
}

.summary-card {
    padding: 24px;
    border-radius: var(--radius-card);
    background: rgba(255,255,255,0.08);
}

.summary-card-wide {
    grid-column: 1 / -1;
}

.summary-card h2 {
    margin-bottom: 18px;
}

.summary-card p {
    margin: 0 0 10px;
}

.summary-group {
    margin-top: 18px;
}

.summary-group h3 {
    margin-bottom: 8px;
    font-size: 16px;
}

.summary-card ul {
    margin: 0;
    padding-left: 20px;
}

.summary-card li {
    margin-bottom: 6px;
}

.summary-card li span {
    margin-left: 8px;
    font-weight: 800;
    color: var(--accent);
}

@media (max-width: 900px) {
    .summary-grid {
        grid-template-columns: 1fr;
    }

    .summary-price-box {
        align-items: flex-start;
        flex-direction: column;
    }
}

/* Summary header wider */
.summary-price-box span {
    white-space: nowrap;
}

.summary-price-box {
    align-items: center;
}

@media (min-width: 901px) {
    .summary-price-box span {
        min-width: 360px;
    }
}

.summary-price-note {
    margin: -12px 0 28px;
    font-size: 13px;
    line-height: 1.5;
    opacity: .85;
}

.summary-price-note span {
    display: inline-block;
    margin-right: 12px;
}

/* Summary headline one-line on wide screens */
@media (min-width: 1200px) {
    .summary-page .wizard-header h1 {
        white-space: nowrap;
        font-size: clamp(42px, 3.6vw, 62px);
    }
}

/* Summary headline wider */
@media (min-width: 1200px) {
    .summary-page .wizard-header h1 {
        white-space: nowrap;
        font-size: clamp(42px, 3.6vw, 62px);
        max-width: none;
    }

    .summary-page .wizard-header {
        max-width: none;
    }
}

/* Thank you page */
.thank-you-container {
    min-height: 100vh;
    display: grid;
    place-items: center;
}

.thank-you-section {
    width: 100%;
    display: grid;
    place-items: center;
}

.thank-you-card {
    width: min(900px, 100%);
    padding: clamp(38px, 6vw, 76px);
    border-radius: var(--radius-card);
    background: var(--accent);
    color: var(--text);
    text-align: center;
    box-shadow: var(--shadow-card);
}

.thank-you-logo {
    display: block;
    width: min(260px, 70%);
    height: auto;
    margin: 0 auto 34px;
}

.thank-you-card h1 {
    color: var(--text);
    margin-bottom: 20px;
}

.thank-you-text {
    font-size: clamp(18px, 2vw, 24px);
    line-height: 1.55;
}

/* Thank you text color from card text branding */
.thank-you-card {
    color: var(--card-text) !important;
}

.thank-you-card h1,
.thank-you-text {
    color: var(--card-text) !important;
}

/* Layout 1: text column aligns to top of configurator */
.hero {
    align-items: start !important;
}

/* Package cards use branding card background */
.package-card,
.wizard-wide .package-card {
    background: var(--card-bg) !important;
    border-radius: var(--radius-card) !important;
}

.package-image {
    border-radius: calc(var(--radius-card) - 6px) !important;
}

/* Package cards custom branding background */
.package-card,
.wizard-wide .package-card {
    background: var(--package-card-bg) !important;
}


/* Product cards with images, icons and meta */
.wizard-header-full p {
    max-width: 100% !important;
}

.no-package-note {
    margin: -18px 0 28px;
    color: var(--card-text);
    opacity: .72;
    font-size: 13px;
    line-height: 1.5;
}

.selection-card {
    position: relative;
    overflow: hidden;
}

.product-card-image {
    width: calc(100% + 36px);
    height: 170px;
    margin: -18px -18px 18px;
    background: rgba(255,255,255,.16);
    overflow: hidden;
}

.product-card-image img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}

.product-card-icons {
    position: absolute;
    top: 12px;
    right: 12px;
    display: flex;
    gap: 6px;
    z-index: 2;
}

.product-icon {
    width: 30px;
    height: 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: rgba(255,255,255,.88);
    color: #1f1f1f;
    font-size: 16px;
    box-shadow: 0 8px 18px rgba(0,0,0,.18);
}

.product-meta-sup {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 16px;
    height: 16px;
    margin-left: 4px;
    border-radius: 999px;
    background: rgba(255,255,255,.2);
    color: inherit;
    font-size: 10px;
    font-weight: 900;
    line-height: 1;
    vertical-align: super;
}

.product-meta-line {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-top: 12px;
    font-size: 11px;
    line-height: 1.35;
    opacity: .76;
}

.product-meta-line sup {
    font-weight: 900;
}

.selection-card.selection-option.is-selected .product-meta-line,
.selection-card.selection-option.is-selected .product-meta-sup {
    color: var(--button-text-color) !important;
}

.selection-card.selection-option.is-selected .product-meta-sup {
    background: rgba(255,255,255,.24);
}

.selection-card.selection-option.is-selected .product-icon {
    background: rgba(255,255,255,.95);
    color: #1f1f1f;
}

.selection-card:not(.selection-option)::after {
    display: none;
}

@media (max-width: 900px) {
    .product-card-image {
        height: 190px;
    }

    .no-package-note {
        text-align: center;
    }
}


/* Branding uploaded vegan / vegetarian icons */
.product-icon {
    overflow: hidden;
    padding: 5px;
}

.product-icon img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: contain;
}

.product-card-image img[src=""],
.product-card-image img:not([src]) {
    display: none;
}

.product-meta-line {
    display: none !important;
}

/* Mobile optimization collected */
@media (max-width: 900px) {
    body {
        text-align: center;
    }

    .container,
    .container-wide {
        max-width: 100%;
        padding: 22px 14px;
    }

    .hero,
    .wizard,
    .wizard-wide {
        width: 100%;
        max-width: 100%;
    }

    .hero {
        grid-template-columns: 1fr;
        gap: 24px;
        justify-items: center;
    }

    .hero-content {
        max-width: 100%;
        text-align: center;
    }

    .logo {
        margin-left: auto;
        margin-right: auto;
    }

    .lead,
    .wizard-header p,
    h1,
    .wizard-header h1 {
        max-width: 100% !important;
        text-align: center;
    }

    .card,
    .wizard-card {
        width: 100%;
        max-width: 100%;
        padding: 34px 14px 22px;
        overflow: hidden;
    }

    label {
        text-align: left;
    }

    input,
    select,
    textarea {
        max-width: 100%;
        width: 100%;
        min-width: 0;
    }

    input[type="date"] {
        appearance: none;
        -webkit-appearance: none;
        width: 100%;
        min-width: 0;
        box-sizing: border-box;
    }

    .package-list,
    .selection-grid,
    .extras-grid,
    .summary-grid {
        grid-template-columns: 1fr !important;
        width: 100%;
        gap: 14px;
        justify-items: center;
    }

    .package-card,
    .selection-card,
    .extra-option,
    .summary-card {
        width: 100%;
        max-width: 100%;
        text-align: center;
    }

    .package-card {
        min-height: auto;
        padding: 16px;
    }

    .selection-card {
        padding: 16px;
    }

    .product-card-image {
        height: 190px;
    }

    .rule-header {
        align-items: center;
        text-align: center;
        gap: 10px;
    }

    .rule-counter {
        margin-left: auto;
        margin-right: auto;
    }

    .step-navigation {
        flex-direction: column-reverse;
        align-items: stretch;
        gap: 14px;
        margin-top: 22px;
    }

    .step-navigation .button,
    .step-navigation form,
    #foodNextButton,
    #drinkNextButton {
        width: 100% !important;
        min-width: 0 !important;
    }

    .back-button {
        display: block;
        width: 100%;
        text-align: center;
        white-space: normal;
        padding: 8px 0;
    }

    .summary-page .wizard-header {
        margin-bottom: 22px;
        padding-top: 8px;
    }

    .summary-page .wizard-header h1 {
        margin-bottom: 18px;
        line-height: 1.08;
    }

    .summary-card {
        padding: 16px;
    }

    .summary-card h2 {
        margin-bottom: 10px;
    }

    .summary-card p,
    .summary-card li {
        margin-top: 4px;
        margin-bottom: 4px;
        line-height: 1.45;
    }

    .summary-group {
        margin-top: 12px;
    }

    .summary-group h3 {
        margin-bottom: 6px;
    }

    .summary-price-box {
        text-align: center;
        padding: 22px 16px;
        margin-bottom: 18px;
        border: 2px solid var(--accent);
        box-shadow: 0 12px 30px rgba(0,0,0,.12);
    }

    .summary-price-box strong {
        font-size: 34px;
        line-height: 1.1;
    }
}

@media (max-width: 520px) {
    .container,
    .container-wide {
        padding: 16px 10px;
    }

    .card,
    .wizard-card {
        padding-left: 12px;
        padding-right: 12px;
    }

    h1,
    .wizard-header h1 {
        font-size: 34px;
    }

    .eyebrow {
        font-size: 11px;
        letter-spacing: .18em;
    }

    .package-image,
    .product-card-image {
        height: 170px;
    }
}


/* Mobile: Paketkarten Schritt 2 + 4 gleich breit */
@media (max-width: 900px) {
    .package-list {
        justify-items: stretch !important;
    }

    .package-card {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
    }
}


/* Final UI cleanup */
.no-package-form {
    margin-top: 18px;
    text-align: center;
}

.no-package-button {
    appearance: none;
    border: 0;
    background: transparent;
    color: var(--card-text);
    opacity: .76;
    font-size: 13px;
    font-weight: 700;
    text-decoration: underline;
    cursor: pointer;
    padding: 8px 10px;
}

.no-package-button:hover {
    opacity: 1;
}

.hero .step-navigation .button,
.card .step-navigation .button {
    width: auto;
    min-width: 220px;
    padding-inline: 24px;
}

@media (max-width: 900px) {
    .hero .step-navigation .button,
    .card .step-navigation .button {
        width: 100% !important;
        min-width: 0 !important;
    }

    .summary-card ul,
    .summary-card ol,
    .summary-group ul,
    .summary-group ol {
        list-style: none !important;
        padding-left: 0 !important;
        margin-left: 0 !important;
    }

    .summary-card li,
    .summary-group li {
        list-style: none !important;
        padding-left: 0 !important;
        margin-left: 0 !important;
    }

    .summary-card li::marker,
    .summary-group li::marker {
        content: "" !important;
        display: none !important;
    }
}

/* Kein Paket gewünscht unten rechts */
.no-package-form-bottom {
    display: flex;
    justify-content: flex-end;
    margin-top: 18px;
}

@media (max-width: 900px) {
    .no-package-form-bottom {
        justify-content: center;
    }
}


/* Thank You Button Abstand */
.thank-you-button {
    margin-top: 40px;
}


/* Kein-Paket-Kachel nur so hoch wie Inhalt */
.package-card.no-package-card {
    min-height: auto !important;
    height: auto !important;
}


/* Geschätzter Preis ab Schritt 3 */


/* Preisbox ab Schritt 3 - Branding aus Button-Design */


/* Preisbox korrekt aus Button-Branding ziehen */


/* Preisbox oben rechts platzieren, ohne Content nach unten zu drücken */
.wizard-card {
    position: relative;
}


/* Schritt 7: Mehr Abstand zwischen Fortschritt und Preisbox */
.summary-page .summary-price-box {
    margin-top: 24px;
}


/* Schritt 7: Mehr Abstand zwischen Fortschritt und Preisbox */

.summary-page .summary-price-box {

    margin-top: 36px; 

}


/* Schritt 7: Abstand Fortschritt zu Preisbox erzwingen */
.wizard-card.summary-page .summary-price-box,
.summary-price-box {
    margin-top: 36px !important;
}


/* Schritt 7 Preisbox oben rechts unter Fortschritt */
.wizard-card.summary-page {
    position: relative;
}

.wizard-card.summary-page .summary-price-box {
    position: absolute !important;
    top: 105px !important;
    right: 28px !important;
    z-index: 5;
    width: auto !important;
    min-width: 220px;
    display: inline-flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 6px !important;
    margin: 0 !important;
    padding: 14px 20px !important;
    border-radius: var(--radius-button, var(--radius-card)) !important;
    background: var(--button-bg) !important;
    color: var(--button-text) !important;
}

.wizard-card.summary-page .summary-price-box span,
.wizard-card.summary-page .summary-price-box strong {
    color: var(--button-text) !important;
}

.wizard-card.summary-page .summary-price-box strong {
    font-size: clamp(24px, 3vw, 34px) !important;
}

@media (max-width: 900px) {
    .wizard-card.summary-page .summary-price-box {
        position: static !important;
        width: 100% !important;
        min-width: 0;
        align-items: center !important;
        text-align: center;
        margin: 0 0 24px !important;
    }
}


/* Schritt 6: Preisbox mit mehr Abstand zum Fortschritt */


/* Schritt 7 wieder Standard */
.summary-price-box {
    position: static !important;
    margin: 0 0 28px !important;
}

/* Schritt 6 etwas tiefer */


/* Schritt 7 komplett auf Ursprungszustand zurück */
.summary-price-box {
    position: static !important;
    top: auto !important;
    right: auto !important;
    width: auto !important;
    min-width: 0 !important;
    z-index: auto !important;
    margin: 0 0 28px !important;
}


/* Schritt 7: große Preisbox wiederherstellen */
.wizard-card.summary-page .summary-price-box {
    position: static !important;
    display: flex !important;
    flex-direction: row !important;
    justify-content: space-between !important;
    align-items: center !important;
    gap: 24px !important;
    width: 100% !important;
    min-width: 0 !important;
    margin: 0 0 28px !important;
    padding: 20px 24px !important;
    border-radius: var(--radius-card) !important;
    background: var(--accent) !important;
    color: var(--button-text) !important;
}

.wizard-card.summary-page .summary-price-box span {
    font-weight: 800 !important;
    white-space: nowrap !important;
}

.wizard-card.summary-page .summary-price-box strong {
    font-size: clamp(28px, 4vw, 44px) !important;
    line-height: 1 !important;
}

@media (max-width: 900px) {
    .wizard-card.summary-page .summary-price-box {
        align-items: flex-start !important;
        flex-direction: column !important;
        width: 100% !important;
    }
}


/* Fortschritt: vergangene Schritte klickbar */
.configurator-progress a.progress-step {
    text-decoration: none;
}

.progress-step.is-completed {
    background: var(--accent) !important;
    border-color: var(--accent) !important;
    color: var(--button-text) !important;
}

.progress-step.is-clickable {
    cursor: pointer;
}

.progress-step.is-clickable:hover {
    transform: scale(1.08);
    opacity: .9;
}


/* Fix: Fortschrittsleiste nach klickbaren Schritten sichtbar halten */
.configurator-progress {
    display: grid !important;
    grid-template-columns: repeat(7, 1fr) !important;
}

.progress-step,
a.progress-step,
span.progress-step {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 36px !important;
    height: 36px !important;
    border-radius: 999px !important;
    text-decoration: none !important;
    color: var(--button-text) !important;
}

.progress-step.is-active,
.progress-step.is-completed {
    background: var(--accent) !important;
    border-color: var(--accent) !important;
}

.progress-step:not(.is-active):not(.is-completed) {
    background: var(--progress-inactive, var(--secondary)) !important;
    border-color: var(--progress-inactive, var(--secondary)) !important;
}


/* Fix: Linien der klickbaren Fortschrittsleiste wieder anzeigen */
.configurator-progress::before {
    content: "" !important;
    display: block !important;
    position: absolute !important;
    top: 50% !important;
    left: calc(100% / 14) !important;
    right: calc(100% / 14) !important;
    height: 3px !important;
    transform: translateY(-50%) !important;
    background: var(--progress-inactive) !important;
    z-index: 0 !important;
}

.configurator-progress::after {
    content: "" !important;
    display: block !important;
    position: absolute !important;
    top: 50% !important;
    left: calc(100% / 14) !important;
    height: 3px !important;
    width: calc((100% - (100% / 7)) * var(--progress-percent) / 100) !important;
    transform: translateY(-50%) !important;
    background: var(--accent) !important;
    z-index: 1 !important;
    pointer-events: none !important;
}

.progress-step,
a.progress-step,
span.progress-step {
    position: relative !important;
    z-index: 2 !important;
    box-shadow: 0 0 0 8px var(--card-bg) !important;
}


/* Klickbare Progress V2 */
.configurator-progress-v2 a.progress-step-v2 {
    text-decoration: none !important;
}

.progress-step-v2.is-clickable {
    cursor: pointer;
}

.progress-step-v2.is-clickable:hover {
    transform: scale(1.08);
    opacity: .9;
}


/* Fortschritt: besuchte Schritte / letzter erreichter Schritt */
.progress-step-v2.is-visited {
    background: var(--accent) !important;
    color: var(--button-text) !important;
    opacity: .62;
}

.progress-step-v2.is-current {
    background: var(--accent) !important;
    color: var(--button-text) !important;
    opacity: 1;
    transform: scale(1.08);
}

.progress-step-v2.is-last-reached {
    opacity: 1;
    box-shadow: 0 0 0 4px rgba(0,0,0,.08);
}

.progress-step-v2.is-clickable {
    cursor: pointer;
}

.progress-step-v2.is-clickable:hover {
    transform: scale(1.08);
    opacity: 1;
}

.progress-line-v2.is-visited {
    background: var(--accent) !important;
    opacity: .62;
}

.progress-line-v2.is-active {
    background: var(--accent) !important;
    opacity: 1;
}

/* Mobile: Preisbox in Schritt 3-6 sticky unten */
@media (max-width: 900px) {
    

    

    

    .step-navigation {
        margin-bottom: 18px;
    }
}


/* Mobile: Preisbox volle Bildschirmbreite */


/* Desktop + Mobile: Preisbox ab Schritt 3 sticky am unteren Bildschirmrand */


.privacy-checkbox{
    display:flex;
    gap:12px;
    align-items:flex-start;
    margin-top:24px;
    margin-bottom:24px;
}

.privacy-checkbox input{
    margin-top:4px;
}

.privacy-checkbox a{
    color:var(--accent);
    font-weight:700;
}


/* Desktop: Preisbox als Floating-Warenkorb rechts unten */


.privacy-checkbox{
    display:flex;
    gap:12px;
    align-items:flex-start;
    margin-top:24px;
    margin-bottom:24px;
}

.privacy-checkbox input{
    margin-top:4px;
}

.privacy-checkbox a{
    color:var(--accent);
    font-weight:700;
}


/* Desktop wieder wie Mobile: Preisbox unten über volle Breite */


/* Preisbox unten: nur so hoch wie Inhalt */


/* Fix: Sticky Preisbox darf nicht von Schritt-6-Top-Regel gestreckt werden */


/* Schritt 6: Datenschutz direkt unter Zusatzleistungen links ausrichten */
.privacy-checkbox {
    justify-content: flex-start !important;
    align-items: flex-start !important;
    width: 100% !important;
    max-width: 520px !important;
    margin: 22px 0 26px 0 !important;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
    color: var(--card-text) !important;
}

.privacy-checkbox input {
    margin: 4px 10px 0 0 !important;
    width: auto !important;
    min-width: 16px !important;
    height: 16px !important;
}

.privacy-checkbox span {
    display: block !important;
    max-width: 460px !important;
    line-height: 1.45 !important;
}


/* Datenschutztext über volle Breite */
.privacy-checkbox {
    max-width: none !important;
    width: 100% !important;
}

.privacy-checkbox span {
    max-width: none !important;
    width: 100% !important;
}

/* Link zur Datenschutzerklärung */
.privacy-checkbox a {
    color: var(--accent) !important;
    font-weight: 700 !important;
    text-decoration: underline !important;
}

.privacy-checkbox a:hover {
    opacity: .85;
}


/* Branding: aktive Auswahl-Kacheln */
.selection-card.selection-option.is-selected,
.selection-option.is-selected,
.extra-option.is-selected {
    background: var(--selection-active-bg) !important;
    border-color: var(--selection-active-border) !important;
    color: var(--selection-active-text) !important;
}

.selection-card.selection-option.is-selected strong,
.selection-card.selection-option.is-selected p,
.selection-card.selection-option.is-selected small,
.selection-card.selection-option.is-selected em,
.selection-card.selection-option.is-selected .product-meta-line,
.selection-card.selection-option.is-selected .product-meta-sup,
.extra-option.is-selected strong,
.extra-option.is-selected small,
.extra-option.is-selected em {
    color: var(--selection-active-text) !important;
}

.product-icon,
.selection-card.selection-option.is-selected .product-icon {
    background: var(--product-icon-bg) !important;
    color: var(--product-icon-text) !important;
}


/* Schritt 2 & 4 Header über komplette Breite */
.wizard-header-full {
    max-width: 100% !important;
    width: 100% !important;
}

.wizard-header-full p,
.wizard-header-full h1,
.wizard-header-full .eyebrow {
    max-width: 100% !important;
}


/* Kennzeichnungen Legende */
.product-label-legend {
    width: 100%;
    margin: 26px 0 0;
    color: var(--text);
    font-family: var(--font);
    font-size: 12px;
    line-height: 1.55;
    opacity: .82;
    text-align: left;
}

.product-label-legend div + div {
    margin-top: 10px;
}

.product-label-legend strong {
    display: block;
    margin-bottom: 4px;
    color: var(--text);
    font-size: 12px;
    font-weight: 800;
}

.product-label-legend p {
    margin: 0;
    color: var(--text);
}

.product-label-legend span {
    display: inline-block;
    margin-right: 12px;
}

.product-meta-sup {
    width: auto !important;
    min-width: 16px !important;
    padding: 0 4px !important;
}

/* Finale Korrektur: Preisbox sauber über Powered-by platzieren */


/* FINAL: iFrame Preisbox + Powered-by Reihenfolge sauber */


/* Desktop: Preisbox rechts oben ohne Layout zu verschieben */
@media (min-width: 901px) {

    

    .step-content,
    .food-selection-wrapper,
    .drink-selection-wrapper,
    main {
        position: relative;
    }
}


/* Finale Desktop-Position Preisbox */
@media (min-width: 901px) {

    .wizard-card {
        position: relative !important;
    }

    
}


/* Schritt 6: Preisbox nicht über Kontaktformular legen */


/* Schritt 6: Preisbox rechts oben, ohne Formular zu überdecken */


/* FINAL Schritt 6: Preisbox rechts ohne Progress/Formular zu überdecken */
@media (min-width: 901px) {
    .card {
        position: relative !important;
    }

    

    
}


/* Schritt 7 mobil: Preis p.P. sauber zentrieren */
@media (max-width: 900px) {
    .summary-price-box,
    .wizard-card.summary-page .summary-price-box {
        text-align: center !important;
        align-items: center !important;
        justify-content: center !important;
    }

    .summary-price-box span,
    .summary-price-box strong,
    .wizard-card.summary-page .summary-price-box span,
    .wizard-card.summary-page .summary-price-box strong {
        display: block !important;
        width: 100% !important;
        text-align: center !important;
    }
}


/* Schritt 7 mobil: Preis sauber zentrieren */
@media (max-width: 900px) {
    .summary-price-box,
    .wizard-card.summary-page .summary-price-box {
        text-align: center !important;
        align-items: center !important;
        justify-content: center !important;
    }

    .summary-price-box span,
    .summary-price-box strong,
    .wizard-card.summary-page .summary-price-box span,
    .wizard-card.summary-page .summary-price-box strong {
        display: block !important;
        width: 100% !important;
        text-align: center !important;
    }
}


/* Danke-Seite sauber zentrieren */
.thank-you-section {
    display: flex;
    justify-content: center;
    align-items: center;
}

.thank-you-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 24px;
    text-align: center;
}

.thank-you-text {
    margin: 0 !important;
    max-width: 700px;
}


/* Fortschritt: aktiver Punkt analog Buttonhintergrund */
.progress-step-v2.is-active,
.progress-step.is-active {
    background: var(--button-bg) !important;
    border-color: var(--button-bg) !important;
    color: var(--button-text) !important;
}

.progress-line-v2.is-active {
    background: var(--button-bg) !important;
}

/* Mobile: kompakte dauerhafte Preisbar */


/* Mobile Preisbar etwas größer */


/* Im iFrame mobil interne Preisbar ausblenden, externe Host-Bar übernimmt */


/* Paketkarten: separate Textfarbe aus dem Kunden-Branding */
.package-card,
.package-card h2,
.package-card strong,
.package-card p,
.package-card .package-short-description,
.package-card .package-contents,
.package-card .package-price,
.package-card .package-price span,
.package-card.no-package-card {
    color: var(--package-card-text) !important;
}

/* Paketkarten: Inhalte fett und Preis größer */
.package-card .package-contents {
    font-weight: 700 !important;
}

.package-card .package-price {
    font-size: 36px !important;
}


/************************************************
 FOOD / DRINK CARDS
************************************************/

.selection-card{
    background:var(--food-card-bg)!important;
}

.drink-selection-card{
    background:var(--drink-card-bg)!important;
}

/************************************************
 BADGES
************************************************/

.selection-price-label{
    box-shadow:none!important;
}

.product-icon{
    box-shadow:none!important;
}


/* =========================================================
   JSON BRANDING – ALLGEMEIN, KORRIGIERT
   ========================================================= */

/* Offene Schritte */
.configurator-progress-v2 .progress-step-v2:not(.is-active):not(.is-current):not(.is-visited),
.configurator-progress-v2 span.progress-step-v2:not(.is-active):not(.is-current):not(.is-visited),
.configurator-progress-v2 a.progress-step-v2:not(.is-active):not(.is-current):not(.is-visited) {
    background: var(--general-progress-open-bg) !important;
    border-color: var(--general-progress-open-bg) !important;
    color: var(--general-progress-open-text) !important;
}

/* Offene Linien */
.configurator-progress-v2 .progress-line-v2:not(.is-active):not(.is-visited) {
    background: var(--general-progress-open-bg) !important;
}

/* Aktiver und besuchter Fortschritt */
.configurator-progress-v2 .progress-step-v2.is-active,
.configurator-progress-v2 .progress-step-v2.is-current,
.configurator-progress-v2 .progress-step-v2.is-visited {
    background: var(--general-progress-active-bg) !important;
    border-color: var(--general-progress-active-bg) !important;
    color: var(--general-progress-active-text) !important;
}

.configurator-progress-v2 .progress-line-v2.is-active,
.configurator-progress-v2 .progress-line-v2.is-visited {
    background: var(--general-progress-active-bg) !important;
}


/* =========================================================
   JSON BRANDING – SCHRITT 1, KORRIGIERT
   ========================================================= */

body.configurator-step-1 .configurator-step-one .eyebrow,
body.configurator-step-1 .eyebrow {
    color: var(--step1-eyebrow) !important;
}

body.configurator-step-1 .configurator-step-one h1,
body.configurator-step-1 .hero-content h1 {
    color: var(--step1-headline) !important;
}

body.configurator-step-1 .configurator-step-one .lead,
body.configurator-step-1 .hero-content .lead,
body.configurator-step-1 .hero-content > p {
    color: var(--step1-description) !important;
}

/* Rechte Eventdaten-Kachel */
body.configurator-step-1 .configurator-step-one form,
body.configurator-step-1 .configurator-step-one .event-card,
body.configurator-step-1 .configurator-step-one .form-card,
body.configurator-step-1 .hero > form,
body.configurator-step-1 .hero .card {
    background: var(--step1-card-bg) !important;
    color: var(--step1-card-text) !important;
}

/* Texte und Labels innerhalb der Eventdaten-Kachel */
body.configurator-step-1 .configurator-step-one form h2,
body.configurator-step-1 .configurator-step-one form h3,
body.configurator-step-1 .configurator-step-one form label,
body.configurator-step-1 .configurator-step-one .event-card h2,
body.configurator-step-1 .configurator-step-one .event-card label,
body.configurator-step-1 .hero form h2,
body.configurator-step-1 .hero form h3,
body.configurator-step-1 .hero form label,
body.configurator-step-1 .hero .card h2,
body.configurator-step-1 .hero .card label {
    color: var(--step1-card-text) !important;
}

/* Eingabefelder */
body.configurator-step-1 .configurator-step-one input,
body.configurator-step-1 .configurator-step-one select,
body.configurator-step-1 .configurator-step-one textarea {
    background: var(--step1-input-bg) !important;
    color: var(--step1-input-text) !important;
}

body.configurator-step-1 .configurator-step-one input::placeholder,
body.configurator-step-1 .configurator-step-one textarea::placeholder {
    color: var(--step1-input-placeholder) !important;
    opacity: 1 !important;
}

/* Flatpickr-Feld ebenfalls */
body.configurator-step-1 .configurator-step-one .flatpickr-input,
body.configurator-step-1 .configurator-step-one input[type="date"] {
    background: var(--step1-input-bg) !important;
    color: var(--step1-input-text) !important;
}

/* Button */
body.configurator-step-1 .configurator-step-one .button,
body.configurator-step-1 .configurator-step-one button,
body.configurator-step-1 .hero form .button,
body.configurator-step-1 .hero form button[type="submit"] {
    background: var(--step1-button-bg) !important;
    color: var(--step1-button-text) !important;
}


/* =========================================================
   SCHRITT 1 – EXAKTE HTML-SELEKTOREN
   ========================================================= */

.configurator-step-one .hero-content .eyebrow {
    color: var(--step1-eyebrow) !important;
}

.configurator-step-one .hero-content h1 {
    color: var(--step1-headline) !important;
}

.configurator-step-one .hero-content .lead {
    color: var(--step1-description) !important;
}

.configurator-step-one .hero > .card {
    background: var(--step1-card-bg) !important;
    color: var(--step1-card-text) !important;
}

.configurator-step-one .hero > .card h2,
.configurator-step-one .hero > .card label,
.configurator-step-one .hero > .card .card-progress {
    color: var(--step1-card-text) !important;
}

.configurator-step-one .hero > .card input,
.configurator-step-one .hero > .card select,
.configurator-step-one .hero > .card textarea {
    background-color: var(--step1-input-bg) !important;
    color: var(--step1-input-text) !important;
}

.configurator-step-one .hero > .card input::placeholder,
.configurator-step-one .hero > .card textarea::placeholder {
    color: var(--step1-input-placeholder) !important;
    opacity: 1 !important;
}

.configurator-step-one .hero > .card .button,
.configurator-step-one .hero > .card button[type="submit"] {
    background: var(--step1-button-bg) !important;
    border-color: var(--step1-button-bg) !important;
    color: var(--step1-button-text) !important;
}


/* =========================================================
   JSON BRANDING – SCHRITTE 2–7, GEMEINSAM
   ========================================================= */

/*
|--------------------------------------------------------------------------
| Gemeinsame Überschriften für Schritt 2–5
|--------------------------------------------------------------------------
*/

body.configurator-step-2 .wizard-header .eyebrow,
body.configurator-step-3 .wizard-header .eyebrow,
body.configurator-step-4 .wizard-header .eyebrow,
body.configurator-step-5 .wizard-header .eyebrow {
    color: var(--step-eyebrow) !important;
}

body.configurator-step-2 .wizard-header h1,
body.configurator-step-3 .wizard-header h1,
body.configurator-step-4 .wizard-header h1,
body.configurator-step-5 .wizard-header h1 {
    color: var(--step-headline) !important;
}

body.configurator-step-2 .wizard-header > p:not(.eyebrow),
body.configurator-step-3 .wizard-header > p:not(.eyebrow),
body.configurator-step-4 .wizard-header > p:not(.eyebrow),
body.configurator-step-5 .wizard-header > p:not(.eyebrow) {
    color: var(--step-description) !important;
}


/*
|--------------------------------------------------------------------------
| Hauptkachel Schritt 2–6
|--------------------------------------------------------------------------
*/

body.configurator-step-2 .wizard-card,
body.configurator-step-3 .wizard-card,
body.configurator-step-4 .wizard-card,
body.configurator-step-5 .wizard-card {
    background: var(--step-card-bg) !important;
    color: var(--step-card-text) !important;
}


/*
|--------------------------------------------------------------------------
| Schritt 2 und 4 – Paketkarten
|--------------------------------------------------------------------------
*/

body.configurator-step-2 .package-card,
body.configurator-step-4 .package-card {
    background: var(--step-box-bg) !important;
    color: var(--step-box-text) !important;
}

body.configurator-step-2 .package-card h2,
body.configurator-step-2 .package-card strong,
body.configurator-step-2 .package-card p,
body.configurator-step-2 .package-card .package-short-description,
body.configurator-step-2 .package-card .package-contents,
body.configurator-step-2 .package-card .package-price,
body.configurator-step-2 .package-card .package-price span,
body.configurator-step-4 .package-card h2,
body.configurator-step-4 .package-card strong,
body.configurator-step-4 .package-card p,
body.configurator-step-4 .package-card .package-short-description,
body.configurator-step-4 .package-card .package-contents,
body.configurator-step-4 .package-card .package-price,
body.configurator-step-4 .package-card .package-price span {
    color: var(--step-box-text) !important;
}


/*
|--------------------------------------------------------------------------
| Schritt 3 und 5 – Produktkarten
|--------------------------------------------------------------------------
*/

body.configurator-step-3 .selection-card,
body.configurator-step-5 .selection-card,
body.configurator-step-3 .drink-selection-card,
body.configurator-step-5 .drink-selection-card {
    background: var(--step-box-bg) !important;
    color: var(--step-box-text) !important;
    border-color: var(--step-box-bg) !important;
}

body.configurator-step-3 .selection-card strong,
body.configurator-step-3 .selection-card p,
body.configurator-step-3 .selection-card small,
body.configurator-step-3 .selection-card em,
body.configurator-step-3 .selection-card .product-meta-line,
body.configurator-step-3 .selection-card .product-meta-sup,
body.configurator-step-5 .selection-card strong,
body.configurator-step-5 .selection-card p,
body.configurator-step-5 .selection-card small,
body.configurator-step-5 .selection-card em,
body.configurator-step-5 .selection-card .product-meta-line,
body.configurator-step-5 .selection-card .product-meta-sup {
    color: var(--step-box-text) !important;
}

body.configurator-step-3 .selection-card.is-selected,
body.configurator-step-3 .selection-card.selection-option.is-selected,
body.configurator-step-5 .selection-card.is-selected,
body.configurator-step-5 .selection-card.selection-option.is-selected {
    background: var(--step-box-active-bg) !important;
    border-color: var(--step-box-active-bg) !important;
    color: var(--step-box-active-text) !important;
}

body.configurator-step-3 .selection-card.is-selected strong,
body.configurator-step-3 .selection-card.is-selected p,
body.configurator-step-3 .selection-card.is-selected small,
body.configurator-step-3 .selection-card.is-selected em,
body.configurator-step-3 .selection-card.is-selected .product-meta-line,
body.configurator-step-3 .selection-card.is-selected .product-meta-sup,
body.configurator-step-5 .selection-card.is-selected strong,
body.configurator-step-5 .selection-card.is-selected p,
body.configurator-step-5 .selection-card.is-selected small,
body.configurator-step-5 .selection-card.is-selected em,
body.configurator-step-5 .selection-card.is-selected .product-meta-line,
body.configurator-step-5 .selection-card.is-selected .product-meta-sup {
    color: var(--step-box-active-text) !important;
}


/*
|--------------------------------------------------------------------------
| Vegetarisch- und Vegan-Icons
|--------------------------------------------------------------------------
*/

body.configurator-step-3 .product-icon[title="Vegetarisch"],
body.configurator-step-3 .product-icon[aria-label="Vegetarisch"] {
    color: var(--step-vegetarian-icon) !important;
}

body.configurator-step-3 .product-icon[title="Vegan"],
body.configurator-step-3 .product-icon[aria-label="Vegan"] {
    color: var(--step-vegan-icon) !important;
}


/*
|--------------------------------------------------------------------------
| Preislabels innerhalb der Produktkarten
|--------------------------------------------------------------------------
*/

body.configurator-step-3 .selection-price-label,
body.configurator-step-5 .selection-price-label {
    background: var(--step-price-bg) !important;
    color: var(--step-price-text) !important;
}


/*
|--------------------------------------------------------------------------
| Auswahlzähler
|--------------------------------------------------------------------------
*/

body.configurator-step-3 .rule-counter,
body.configurator-step-5 .rule-counter {
    background: var(--step-counter-bg) !important;
}

body.configurator-step-3 .rule-counter.is-complete,
body.configurator-step-3 .rule-counter.is-active,
body.configurator-step-5 .rule-counter.is-complete,
body.configurator-step-5 .rule-counter.is-active {
    background: var(--step-counter-active-bg) !important;
}


/*
|--------------------------------------------------------------------------
| Geschätzter Preis Schritt 3–6
|--------------------------------------------------------------------------
*/


/*
|--------------------------------------------------------------------------
| Schritt 6 – Überschriften und Kontaktkachel
|--------------------------------------------------------------------------
*/

body.configurator-step-6 .hero-content .eyebrow {
    color: var(--step-eyebrow) !important;
}

body.configurator-step-6 .hero-content h1 {
    color: var(--step-headline) !important;
}

body.configurator-step-6 .hero-content .lead,
body.configurator-step-6 .hero-content > p:not(.eyebrow) {
    color: var(--step-description) !important;
}

body.configurator-step-6 .hero > .card {
    background: var(--step-card-bg) !important;
    color: var(--step-card-text) !important;
}

body.configurator-step-6 .hero > .card h2,
body.configurator-step-6 .hero > .card h3,
body.configurator-step-6 .hero > .card label {
    color: var(--step-card-text) !important;
}


/*
|--------------------------------------------------------------------------
| Schritt 6 – Eingabefelder
|--------------------------------------------------------------------------
*/

body.configurator-step-6 .hero > .card input,
body.configurator-step-6 .hero > .card select,
body.configurator-step-6 .hero > .card textarea {
    background: var(--step-input-bg) !important;
    color: var(--step-input-text) !important;
}

body.configurator-step-6 .hero > .card input::placeholder,
body.configurator-step-6 .hero > .card textarea::placeholder {
    color: var(--step-input-placeholder) !important;
    opacity: 1 !important;
}


/*
|--------------------------------------------------------------------------
| Schritt 6 – Extras
|--------------------------------------------------------------------------
*/

body.configurator-step-6 .extra-option,
body.configurator-step-6 .extras-grid .selection-card {
    background: var(--step-extra-box-bg) !important;
    color: var(--step-extra-box-text) !important;
    border-color: var(--step-extra-box-bg) !important;
}

body.configurator-step-6 .extra-option strong,
body.configurator-step-6 .extra-option small,
body.configurator-step-6 .extra-option em {
    color: var(--step-extra-box-text) !important;
}

body.configurator-step-6 .extra-option.is-selected,
body.configurator-step-6 .extras-grid .selection-card.is-selected {
    background: var(--step-extra-box-active-bg) !important;
    color: var(--step-extra-box-active-text) !important;
    border-color: var(--step-extra-box-active-bg) !important;
}

body.configurator-step-6 .extra-option.is-selected strong,
body.configurator-step-6 .extra-option.is-selected small,
body.configurator-step-6 .extra-option.is-selected em {
    color: var(--step-extra-box-active-text) !important;
}


/*
|--------------------------------------------------------------------------
| Gemeinsame Buttons Schritt 2–7
|--------------------------------------------------------------------------
*/

body.configurator-step-2 .button,
body.configurator-step-2 button.button,
body.configurator-step-3 .button,
body.configurator-step-3 button.button,
body.configurator-step-4 .button,
body.configurator-step-4 button.button,
body.configurator-step-5 .button,
body.configurator-step-5 button.button,
body.configurator-step-6 .button,
body.configurator-step-6 button.button,
body.configurator-step-7 .button,
body.configurator-step-7 button.button {
    background: var(--step-button-bg) !important;
    border-color: var(--step-button-bg) !important;
    color: var(--step-button-text) !important;
}


/*
|--------------------------------------------------------------------------
| Schritt 7 – Zusammenfassung
|--------------------------------------------------------------------------
*/

body.configurator-step-7 .wizard-card,
body.configurator-step-7 .wizard-card.summary-page,
body.configurator-step-7 .summary-card,
body.configurator-step-7 .summary-card h1,
body.configurator-step-7 .summary-card h2,
body.configurator-step-7 .summary-card h3,
body.configurator-step-7 .summary-card p,
body.configurator-step-7 .summary-card li,
body.configurator-step-7 .summary-card span,
body.configurator-step-7 .summary-card strong,
body.configurator-step-7 .wizard-header,
body.configurator-step-7 .wizard-header h1,
body.configurator-step-7 .wizard-header p {
    color: var(--step-card-text) !important;
}

body.configurator-step-7 .summary-price-box,
body.configurator-step-7 .wizard-card.summary-page .summary-price-box {
    background: var(--step-price-bg) !important;
    color: var(--step-card-text) !important;
    font-family: var(--step-price-font) !important;
}

body.configurator-step-7 .summary-price-box span,
body.configurator-step-7 .summary-price-box strong,
body.configurator-step-7 .wizard-card.summary-page .summary-price-box span,
body.configurator-step-7 .wizard-card.summary-page .summary-price-box strong {
    color: var(--step-card-text) !important;
    font-family: var(--step-price-font) !important;
}

/* =========================================================
   PREISBOX – ZENTRALE REGELN
   ========================================================= */

.card,
.wizard-card {
    position: relative;
}

.estimated-price-box {
    position: absolute;
    top: 110px;
    right: 32px;
    z-index: 100;

    display: inline-flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;

    width: 320px;
    max-width: calc(100% - 64px);
    min-height: 0;
    height: auto;
    margin: 0;
    padding: 18px 22px;

    border-radius: var(--radius-card);
    background: var(--step-price-bg, var(--button-bg));
    color: var(--step-price-text, var(--button-text));
    box-shadow: var(--shadow-card);
    text-align: left;
}

.estimated-price-box span,
.estimated-price-box strong {
    color: inherit;
    font-family: var(--step-price-font, var(--font-main));
}

.estimated-price-box span {
    font-size: 13px;
    font-weight: 700;
    line-height: 1.25;
    opacity: .88;
}

.estimated-price-box strong {
    font-size: clamp(26px, 3vw, 36px);
    line-height: 1;
    white-space: nowrap;
}

/* Schritt 6 besitzt einen eigenen Positions-Wrapper. */
.step-6-price-wrapper {
    position: absolute;
    top: 100px;
    right: 32px;
    z-index: 100;

    width: 320px;
    max-width: calc(100% - 64px);
    margin: 0;
    padding: 0;
}

.step-6-price-wrapper .estimated-price-box {
    position: static;
    width: 100%;
    max-width: 100%;
}

/* Mobil: kompakte Preisleiste am unteren Bildschirmrand. */
@media (max-width: 900px) {
    body:has(.estimated-price-box) {
        padding-bottom: 92px;
    }

    .step-6-price-wrapper {
        position: static;
        width: auto;
        max-width: none;
        margin: 0;
    }

    .estimated-price-box,
    .step-6-price-wrapper .estimated-price-box {
        position: fixed;
        top: auto;
        left: 10px;
        right: 10px;
        bottom: calc(env(safe-area-inset-bottom) + 10px);
        z-index: 9999;

        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        gap: 14px;

        width: auto;
        max-width: none;
        min-height: 0;
        height: auto;
        margin: 0;
        padding: 14px 18px;

        border-radius: 999px;
        text-align: left;
        box-shadow: 0 10px 34px rgba(0, 0, 0, .22);
    }

    .estimated-price-box span {
        font-size: 13px;
        white-space: nowrap;
    }

    .estimated-price-box strong {
        font-size: 26px;
        text-align: right;
    }

    /* Im eingebetteten Konfigurator übernimmt die externe Host-Preisleiste. */
    body.is-iframe-embedded:has(.estimated-price-box) {
        padding-bottom: 0;
    }

    body.is-iframe-embedded .estimated-price-box,
    body.is-iframe-embedded .step-6-price-wrapper .estimated-price-box {
        position: static;
        visibility: hidden;
        width: 0;
        height: 0;
        min-height: 0;
        margin: 0;
        padding: 0;
        overflow: hidden;
        box-shadow: none;
    }
}

/* =========================================================
   POWERED BY – ZENTRALE REGELN
   ========================================================= */

.configurator-powered-by {
    position: relative;
    z-index: 1;

    width: 100%;
    margin: 34px auto 0;
    padding: 0 20px 24px;

    color: var(--general-powered-by-color, var(--text));
    font-family: var(--font);
    font-size: 13px;
    line-height: 1.4;
    text-align: center;
    opacity: .82;
}

.configurator-powered-by a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;

    color: inherit;
    font: inherit;
    font-weight: 700;
    text-decoration: none;
}

.configurator-powered-by img {
    display: block;
    width: auto;
    max-width: min(520px, 80vw);
    height: 176px;
    object-fit: contain;
}

.configurator-powered-by a:hover {
    opacity: .8;
}

/* Auf mobilen Geräten kompakter. */
@media (max-width: 900px) {
    .configurator-powered-by {
        margin-top: 28px;
        padding-right: 12px;
        padding-bottom: 18px;
        padding-left: 12px;
    }

    .configurator-powered-by img {
        max-width: min(420px, 78vw);
        height: 140px;
    }
}

/* Im eingebetteten Konfigurator keine unnötige Zusatzhöhe. */
body.is-iframe-embedded .configurator-powered-by {
    margin-top: 28px;
    padding-bottom: 0;
}

/* Danke-Seite im iFrame besonders kompakt halten. */
body.is-thank-you-iframe .configurator-powered-by {
    margin-top: 28px;
    margin-bottom: 0;
    padding-bottom: 0;
}