/* ============================================
		   DIVI THEME OVERRIDE
		   Divi setzt global padding:2px, border:1px solid #bbb, color:#4a4a4a
		   auf alle input/select/textarea. Diese Regel überschreibt das.
		   ============================================ */
		.wizard-container input[type="text"],
		.wizard-container input[type="email"],
		.wizard-container input[type="tel"],
		.wizard-container input[type="number"],
		.wizard-container input[type="date"],
		.wizard-container input[type="password"],
		.wizard-container input.title,
		.wizard-container select,
		.wizard-container textarea {
			padding: 15px !important;
			border: 2px solid #e1e5e9 !important;
			border-radius: 12px !important;
			background-color: #fafbfc !important;
			color: #333 !important;
			font-size: 16px !important;
			box-sizing: border-box !important;
			width: 100% !important;
		}

		/* Betriebsferien Info-Banner */
		.holiday-notice {
			background: linear-gradient(135deg, #ff9800 0%, #f57c00 100%);
			color: #fff;
			padding: 12px 15px;
			border-radius: 10px;
			margin: 15px 0;
			box-shadow: 0 3px 10px rgba(255, 152, 0, 0.2);
		}

		.holiday-notice .icon {
			font-size: 20px;
			margin-bottom: 8px;
			display: block;
			text-align: center;
		}

		.holiday-notice .content strong {
			display: block;
			font-size: 15px;
			margin-bottom: 8px;
			text-align: center;
			font-weight: 700;
		}

		.holiday-notice .content .holiday-item {
			background: rgba(255, 255, 255, 0.15);
			padding: 8px 10px;
			border-radius: 6px;
			margin-bottom: 6px;
			font-size: 13px;
			line-height: 1.4;
		}

		.holiday-notice .content .holiday-item:last-of-type {
			margin-bottom: 0;
		}

		.holiday-notice .content .holiday-item strong {
			display: inline;
			font-size: 13px;
			margin: 0;
		}

		.holiday-notice .dhl-info {
			margin-top: 8px;
			padding-top: 8px;
			border-top: 1px solid rgba(255, 255, 255, 0.3);
			font-size: 12px;
			text-align: center;
			opacity: 0.95;
		}

		/* Desktop: nebeneinander Layout */
		@media (min-width: 768px) {
			.holiday-notice {
				display: flex;
				align-items: flex-start;
				gap: 12px;
				padding: 15px 20px;
			}

			.holiday-notice .icon {
				font-size: 24px;
				flex-shrink: 0;
				margin-bottom: 0;
			}

			.holiday-notice .content {
				flex: 1;
			}

			.holiday-notice .content strong {
				font-size: 16px;
				text-align: left;
			}

			.holiday-notice .content .holiday-item {
				font-size: 14px;
				padding: 10px 12px;
			}

			.holiday-notice .dhl-info {
				text-align: left;
				font-size: 13px;
			}
		}
            /* Container and header */
        .wizard-container {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            background: #ffffff;
            border-radius: 20px;
            box-shadow: 0 25px 50px rgba(0,0,0,0.15);
            width: 100%;
            /* Increase default max width; the previous values were too narrow on
               desktop.  This base width is about 30 % größer als 700 px and
               will expand further on larger viewports. */
            /* Base width increased significantly to provide 30 % more space on
               desktop; previous attempts may have been cached. */
            max-width: 900px;
            overflow: hidden;
            position: relative;
            min-height: 600px;
            margin: 20px auto;
        }

        /* On larger screens, widen the wizard container for a more spacious
           layout.  This prevents the shipping cards from appearing too narrow
           and emulating a mobile layout on desktop. */
        @media (min-width: 992px) {
            .wizard-container {
                max-width: 1200px;
            }
        }
        @media (min-width: 1200px) {
            .wizard-container {
                max-width: 1400px;
            }
        }
        .wizard-header {
            background: linear-gradient(135deg, #5cb3cc 0%, #4a9db8 100%);
            padding: 15px 25px 25px;
            text-align: center;
            color: #fff;
        }
        /* Promo banner */
        .promo-banner {
            margin: -15px -25px 20px -25px;
            padding: 20px 25px;
            display: flex;
            justify-content: center;
            align-items: center;
            box-shadow: 0 4px 15px rgba(74, 157, 184, 0.3);
            position: relative;
            overflow: hidden;
            border-bottom: 3px solid rgba(255,255,255,0.2);
        }
        .promo-banner::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background-size: 30px 30px;
            animation: shimmer 4s linear infinite;
        }
        @keyframes shimmer {
            0% { transform: translateX(-30px); }
            100% { transform: translateX(30px); }
        }
        .promo-text {
            text-align: center;
            position: relative;
            z-index: 2;
        }
        .promo-main {
            font-size: 1.4rem;
            /* Allow the browser to wrap at whitespace only. The previous
               declaration used `word-break: break-word` which could break
               inside long words on some mobile browsers. Removing it and
               relying on normal word wrapping avoids mid‑word breaks. */
            white-space: normal;
            line-height: 1.2;
            text-transform: uppercase;
            letter-spacing: 1px;
            margin-bottom: 5px;
            text-shadow: 2px 2px 4px rgba(0,0,0,0.2);
            color: #fff;
        }

        /* Guarantee banner styles */
        .guarantee-banner {
            display: flex;
            /* Remove word‑break overrides here. Let the global styles (defined
               later in this sheet) control breaking behaviour to prevent
               mid‑word splits. */
            flex-direction: column;
            align-items: center;
            justify-content: center;
            background: linear-gradient(135deg, #5cb3cc 0%, #4a9db8 100%);
            border-radius: 12px;
            padding: 12px 20px;
            margin-top: 8px;
            color: #fff;
            /* subtle blinking animation to draw attention */
            animation: subtleBlink 3s linear infinite;
            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
        }
        .guarantee-header {
            display: flex;
            /* Rely on inherited word break behaviour; remove explicit
               word‑break property that could split words unnaturally. */
            align-items: center;
            gap: 8px;
            font-size: 20px;
            font-weight: 900;
        }
        .guarantee-icon {
            font-size: 24px;
        }
        .guarantee-title {
            font-weight: 900;
            /* Do not override word‑break here; inherit from container. */
        }
        .guarantee-body {
            margin-top: 4px;
            text-align: center;
            /* Remove word‑break override to avoid mid‑word line breaks. */
            font-size: 16px;
            line-height: 1.3;
        }
        .guarantee-body strong {
            display: block;
            /* Remove word‑break override; rely on global rule. */
            font-size: 18px;
            font-weight: 900;
            color: #ffeb3b;
        }

        /* Guarantee summary box displayed in the summary step */
        .guarantee-summary {
            margin-top: 20px;
            padding: 20px 24px;
            background: linear-gradient(135deg, #f8fbfc 0%, #ffffff 100%);
            border: 2px solid #e0f2f7;
            box-shadow: 0 4px 12px rgba(92, 179, 204, 0.08);
            display: flex;
            align-items: center;
            gap: 16px;
            border-radius: 16px;
            font-size: 15px;
            line-height: 1.6;
            color: #2c3e50;
            transition: all 0.3s ease;
        }
        .guarantee-summary:hover {
            box-shadow: 0 6px 16px rgba(92, 179, 204, 0.12);
            transform: translateY(-2px);
        }
        .guarantee-summary .icon {
            font-size: 32px;
            line-height: 1;
            flex-shrink: 0;
            filter: drop-shadow(0 2px 4px rgba(92, 179, 204, 0.3));
        }
        .guarantee-summary span {
            flex: 1;
        }
        .guarantee-summary strong {
            color: #5cb3cc;
            font-weight: 700;
            font-size: 16px;
            display: block;
            margin-bottom: 4px;
        }
        
        /* Variante für Entsorgungskosten (negative Beträge) */
        .guarantee-summary.warning {
            background: linear-gradient(135deg, #fff8f6 0%, #ffffff 100%);
            border: 2px solid #ffe8e0;
            box-shadow: 0 4px 12px rgba(231, 76, 60, 0.08);
        }
        .guarantee-summary.warning:hover {
            box-shadow: 0 6px 16px rgba(231, 76, 60, 0.12);
        }
        .guarantee-summary.warning .icon {
            filter: drop-shadow(0 2px 4px rgba(231, 76, 60, 0.3));
        }
        .guarantee-summary.warning strong {
            color: #e74c3c;
        }


        
        /* Payout note shown in QR-return flow on the summary step */
        .payout-note-summary {
            margin-top: 12px;
            padding: 14px 16px;
            background: #f8fbfc;
            border: 1px solid #e0f2f7;
            border-radius: 10px;
            font-size: 14px;
            line-height: 1.4;
            color: #2c3e50;
        }

        /* Define a subtle blinking animation for the tagline */
        @keyframes subtleBlink {
            0%, 80%, 100% { opacity: 1; }
            40%, 60% { opacity: 0.7; }
        }
        .promo-sub {
            /* Make the Emission Partner Garantie tagline more prominent */
            /* Adjust the guarantee tagline styling to better match the design */
            font-size: 20px;
            font-weight: 800;
            color: #ffffff;
            line-height: 1.3;
            /* Use the corporate teal gradient instead of orange */
            background: linear-gradient(135deg, #5cb3cc 0%, #4a9db8 100%);
            padding: 8px 16px;
            border-radius: 12px;
            display: inline-block;
            margin-top: 8px;
            text-shadow: 1px 1px 4px rgba(0,0,0,0.25);
            /* Subtle blinking effect to draw attention */
            animation: subtleBlink 3s linear infinite;
        }
        .wizard-header h1 {
            font-size: 24px;
            margin-bottom: 8px;
            font-weight: 600;
        }
        .wizard-header p {
            opacity: 0.9;
            font-size: 14px;
        }
        /* Progress bar */
        .progress-container {
            margin-top: 20px;
            position: relative;
        }
        .progress-steps {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 15px;
            position: relative;
        }
        .progress-step {
            width: 30px;
            height: 30px;
            border-radius: 50%;
            background: rgba(255,255,255,0.3);
            color: #fff;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 12px;
            font-weight: bold;
            position: relative;
            z-index: 2;
            transition: all 0.3s ease;
        }
        .progress-step.active {
            background: #fff;
            color: #5cb3cc;
            transform: scale(1.1);
        }
        .progress-step.completed {
            background: #2ecc71;
            color: #fff;
        }
        .progress-line {
            position: absolute;
            top: 15px;
            left: 15px;
            right: 15px;
            height: 2px;
            background: rgba(255,255,255,0.3);
            z-index: 1;
        }
        .progress-fill {
            height: 100%;
            background: #fff;
            width: 0%;
            transition: width 0.5s ease;
            border-radius: 1px;
        }

        /* Core layout */
        .wizard-content {
            /* The wizard content is padded but uses normal block layout.  We avoid
               forcing a minimum height or flexbox here because it created large
               empty space above the forms in later steps.  Removing the flex
               properties lets each step naturally size itself and prevents the
               vertical shift observed on steps 3–6. */
            padding: 30px 20px;
        }

        /* Provide consistent left/right padding within each step to prevent the
           content from touching the card edges on narrow screens.  This
           complements the padding on .wizard-content and improves the
           appearance of steps 3–6. */
        .step {
            padding-left: 20px;
            padding-right: 20px;
        }

        /* Ensure the navigation buttons always remain clickable, even if a
           flipped shipping card or other overlay sets pointer-events to none
           elsewhere on the page. */
        #prevBtn, #nextBtn {
            pointer-events: auto;
        }
        .step {
            display: none;
            animation: slideIn 0.4s ease;
            text-align: center;
        }
        .step.active {
            display: block;
        }
        @keyframes slideIn {
            from { opacity: 0; transform: translateX(30px); }
            to { opacity: 1; transform: translateX(0); }
        }
        .step-icon {
            font-size: 48px;
            margin-bottom: 20px;
            color: #5cb3cc;
        }
        .recycling-icon {
            width: 240px;
            height: 240px;
            object-fit: contain;
        }
        .step-title {
            font-size: 24px;
            color: #333;
            margin-bottom: 15px;
            font-weight: 600;
        }
        .step-subtitle {
            font-size: 16px;
            color: #666;
            margin-bottom: 30px;
            line-height: 1.5;
        }

        /* Enhanced Shipping Options Styles */
        .shipping-options {
            display: grid;
            /* Mobile: 1 Spalte, Tablet: 2 Spalten, Desktop: 3 Spalten als kompakte Kacheln */
            grid-template-columns: 1fr;
            gap: 20px;
            margin: 30px 0;
        }
        
        /* Tablet: 2 Spalten */
        @media (min-width: 768px) {
            .shipping-options {
                grid-template-columns: repeat(2, 1fr);
            }
        }
        
        /* Desktop: 3 schöne Kacheln nebeneinander */
        @media (min-width: 992px) {
            .shipping-options {
                grid-template-columns: repeat(3, 1fr);
                max-width: 1000px;
                margin: 30px auto;
            }
        }
        
        .shipping-option {
            position: relative;
            z-index: 2;
            border: 2px solid #e1e5e9;
            border-radius: 12px;
            overflow: hidden;
            transition: all 0.3s ease;
            background: #fff;
            cursor: pointer;
            min-height: 220px;
        }
        .shipping-option:hover {
            border-color: #5cb3cc;
            transform: translateY(-2px);
            box-shadow: 0 8px 25px rgba(92, 179, 204, 0.15);
        }
        .shipping-option.selected {
            border-color: #5cb3cc;
            box-shadow: 0 8px 25px rgba(92, 179, 204, 0.25);
        }
        .shipping-option.disabled {
            opacity: 0.5;
            background: #f0f0f0;
            /* Do not prevent pointer events on disabled cards so users can still select other options */
        }

        /* Card Front (Summary View) */
        .shipping-card-front {
            padding: 20px;
            text-align: center;
            background: #fafbfc;
            transition: all 0.3s ease;
            height: 100%;
            display: flex;
            flex-direction: column;
            justify-content: center;
            position: relative;
        }
        .shipping-option.selected .shipping-card-front {
            background: linear-gradient(135deg, #5cb3cc 0%, #4a9db8 100%);
            color: #fff;
        }
        .shipping-option.flipped .shipping-card-front {
            transform: rotateY(180deg);
            opacity: 0;
        }

        /* Card Back (Detail View) */
        .shipping-card-back {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            padding: 20px;
            background: #fff;
            transform: rotateY(180deg);
            opacity: 0;
            transition: all 0.3s ease;
            overflow-y: auto;
            max-height: 400px;
        }
        .shipping-option.flipped .shipping-card-back {
            transform: rotateY(0deg);
            opacity: 1;
        }

        /* Wenn die Karte umgedreht ist, sollen Klicks nicht als Auswahl zählen und das Backend
           soll scrollbar bleiben.  Durch pointer-events verhindern wir das Auslösen der
           selectShippingOption-Funktion, während gleichzeitig das Detail-Panel bedienbar ist. */
        .shipping-option.flipped {
            pointer-events: none;
        }
        .shipping-option.flipped .shipping-card-back {
            pointer-events: auto;
        }
        .shipping-option.selected .shipping-card-back {
            background: #f8f9ff;
        }

        .shipping-option h4 {
            margin: 8px 0;
            font-size: 16px;
            font-weight: 700;
        }
        .shipping-option p {
            font-size: 12px;
            opacity: 0.8;
            margin: 5px 0;
        }
        .shipping-icon {
            font-size: 32px;
            margin-bottom: 8px;
        }
        .price-info {
            font-weight: bold;
            color: #4caf50;
            margin: 8px 0;
            font-size: 14px;
        }
        .shipping-option.selected .price-info {
            color: #fff;
        }
        /* Externe Versandformulare */
        .external-shipping-form {
            position: relative;
            z-index: 0;
            margin: 20px 0;
            padding: 20px;
            background: #f8f9fa;
            border-radius: 12px;
            border-left: 4px solid #5cb3cc;
            animation: slideIn 0.4s ease;
        }

        .external-shipping-form h6 {
            color: #333;
            font-size: 16px;
            font-weight: 700;
            margin-bottom: 15px;
            border-bottom: 2px solid #5cb3cc;
            padding-bottom: 5px;
        }
        /* Flip Button */
        .flip-button {
            position: absolute;
            top: 10px;
            right: 10px;
            background: #5cb3cc;
            color: #fff;
            border: none;
            border-radius: 50%;
            width: 30px;
            height: 30px;
            font-size: 14px;
            cursor: pointer;
            transition: all 0.3s ease;
            display: flex;
            align-items: center;
            justify-content: center;
            z-index: 10;
        }
        .flip-button:hover {
            background: #4a9db8;
            transform: scale(1.1);
        }

        /* Pointer events: ensure that clicking anywhere on a shipping card triggers its selection
           except for the flip button which opens the details. */
        .shipping-option * {
            pointer-events: none;
        }
        .shipping-option .flip-button {
            pointer-events: auto;
        }

        /* Detail Content Styles */
        .shipping-detail-content {
            text-align: left;
            font-size: 14px;
            line-height: 1.6;
        }
        .shipping-detail-content h5 {
            color: #333;
            font-size: 16px;
            font-weight: 700;
            margin-bottom: 15px;
            border-bottom: 2px solid #5cb3cc;
            padding-bottom: 5px;
        }
        .shipping-detail-content ul {
            margin: 10px 0;
            padding-left: 20px;
        }
        .shipping-detail-content ul li {
            margin-bottom: 8px;
        }
        .highlight-box {
            background: #e3f2fd;
            border-left: 4px solid #2196f3;
            padding: 15px;
            margin: 15px 0;
            border-radius: 6px;
        }
        .warning-box {
            background: #fff3e0;
            border-left: 4px solid #ff9800;
            padding: 15px;
            margin: 15px 0;
            border-radius: 6px;
        }

        /* DHL Packaging Checkbox */
        .packaging-option {
            background: #f8f9fa;
            border: 2px solid #e9ecef;
            border-radius: 8px;
            padding: 15px;
            margin: 15px 0;
            transition: all 0.3s ease;
        }
        .packaging-option:hover {
            border-color: #5cb3cc;
        }
        .packaging-option.selected {
            border-color: #5cb3cc;
            background: #e8f4f8;
        }
        .packaging-checkbox {
            display: flex;
            align-items: center;
            gap: 10px;
        }
        .packaging-checkbox input[type="checkbox"] {
            width: auto;
            margin: 0;
        }

        /* Spedition Form */
        .spedition-form {
            background: #f8f9fa;
            padding: 20px;
            border-radius: 12px;
            margin-top: 15px;
        }
        .spedition-form h6 {
            color: #333;
            font-size: 14px;
            font-weight: 700;
            margin-bottom: 15px;
        }
        .spedition-form .form-group {
            margin-bottom: 15px;
        }
        .spedition-form label {
            font-size: 13px;
            margin-bottom: 5px;
        }
        .spedition-form input,
        .spedition-form select,
        .spedition-form textarea {
            padding: 10px;
            font-size: 14px;
        }

        /* Pickup Date/Time Picker */
        .pickup-scheduler {
            background: #f8f9fa;
            padding: 20px;
            border-radius: 12px;
            margin-top: 15px;
        }
        .pickup-scheduler h6 {
            color: #333;
            font-size: 14px;
            font-weight: 700;
            margin-bottom: 15px;
        }
        .datetime-picker {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 15px;
            margin-bottom: 15px;
        }
        .address-info {
            background: #e3f2fd;
            padding: 15px;
            border-radius: 8px;
            margin-top: 15px;
        }
        .address-info h6 {
            color: #1976d2;
            font-size: 14px;
            font-weight: 700;
            margin-bottom: 10px;
        }
        .address-info address {
            font-style: normal;
            line-height: 1.5;
        }

        /* Form element basics */
        .form-group {
            margin-bottom: 25px;
            text-align: left;
            position: relative;
        }
        .form-group label {
            display: block;
            margin-bottom: 8px;
            font-weight: 600;
            color: #555;
            font-size: 14px;
        }
        .required {
            color: #ff4757;
            font-weight: bold;
        }
        .required-label {
            display: block;
            margin-bottom: 8px;
            font-size: 14px;
            color: #555;
            font-weight: 600;
        }
        .form-group input,
        .form-group select,
        .form-group textarea {
            width: 100% !important;
            padding: 15px !important;
            border: 2px solid #e1e5e9 !important;
            border-radius: 12px !important;
            font-size: 16px !important;
            transition: all 0.3s ease;
            background: #fafbfc !important;
            box-sizing: border-box !important;
            color: #333 !important;
        }
        .form-group input:focus,
        .form-group select:focus,
        .form-group textarea:focus {
            outline: none !important;
            border-color: #5cb3cc !important;
            background: #fff !important;
            box-shadow: 0 0 0 3px rgba(92, 179, 204, 0.1) !important;
            transform: translateY(-1px);
        }
        .form-group input.error,
        .form-group select.error,
        .form-group textarea.error {
            border-color: #ff4757 !important;
            background: #fff5f5 !important;
        }

        /* Highlight checkbox containers when invalid */
        .checkbox-fancy.error {
            border-color: #ff4757;
            background: #fff5f5;
        }

        /* Customer type selection */
        .customer-type-selection {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 15px;
            margin: 30px 0;
        }
        .customer-type-card {
            padding: 20px;
            border: 2px solid #e1e5e9;
            border-radius: 12px;
            cursor: pointer;
            transition: all 0.3s ease;
            text-align: center;
            background: #fafbfc;
        }
        .customer-type-card:hover {
            border-color: #5cb3cc;
            transform: translateY(-2px);
            box-shadow: 0 8px 25px rgba(92, 179, 204, 0.15);
        }
        .customer-type-card.selected {
            border-color: #5cb3cc;
            background: linear-gradient(135deg, #5cb3cc 0%, #4a9db8 100%);
            color: #fff;
        }
        .customer-type-card h4 {
            margin: 10px 0 5px;
            font-size: 16px;
        }
        .customer-type-card p {
            font-size: 12px;
            opacity: 0.8;
            margin: 0;
        }
        .customer-icon {
            font-size: 24px;
            margin-bottom: 10px;
        }

        /* Info boxes */
        .info-box {
            display: flex;
            align-items: flex-start;
            gap: 12px;
            padding: 15px;
            border-radius: 10px;
            margin: 20px 0;
            background: #e3f2fd;
            border-left: 4px solid #2196f3;
        }
        .info-box.calculation-info {
            background: #f3e5f5;
            border-left-color: #9c27b0;
        }

        /* Warning box for SCR catalysts */
        .info-box.scr-warning {
            background: #fdecea;
            border-left-color: #e74c3c;
            /* Make SCR warnings bolder and more prominent */
            border-left-width: 6px;
            font-weight: 700;
        }
        .info-box.scr-warning .info-icon {
            color: #e74c3c;
        }
        .info-icon {
            font-size: 20px;
            flex-shrink: 0;
            margin-top: 2px;
        }
        .info-text {
            flex: 1;
            font-size: 14px;
            line-height: 1.4;
        }
        /* Error messages */
        .error-message {
            display: flex;
            align-items: flex-start;
            gap: 12px;
            padding: 15px;
            border-radius: 10px;
            margin: 20px 0;
            background: #ffebee;
            border-left: 4px solid #f44336;
            animation: slideIn 0.4s ease;
        }
        .error-icon {
            font-size: 20px;
            flex-shrink: 0;
            margin-top: 2px;
            color: #f44336;
        }
        .error-text {
            flex: 1;
            font-size: 14px;
            line-height: 1.4;
            color: #d32f2f;
        }
        /* Catalog */
        .catalog-list {
            margin: 20px 0;
        }
        .catalog-item {
            border: 2px solid #e1e5e9;
            border-radius: 12px;
            padding: 20px;
            margin-bottom: 15px;
            background: #fafbfc;
            animation: slideIn 0.4s ease;
        }
        /* Highlight SCR items with a red accent bar */
        .catalog-item.scr-item {
            border-left-color: #e74c3c;
            border-left-width: 6px;
        }
        .catalog-item-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 15px;
        }
        .catalog-item-title {
            font-weight: 600;
            color: #333;
            font-size: 16px;
        }
        .remove-item-btn {
            background: #ff4757;
            color: #fff;
            border: none;
            border-radius: 50%;
            width: 30px;
            height: 30px;
            cursor: pointer;
            font-size: 18px;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: all 0.3s ease;
        }
        .remove-item-btn:hover {
            background: #ff3838;
            transform: scale(1.1);
        }
        .catalog-item-form {
            display: flex;
            flex-wrap: wrap;
            gap: 20px 15px;
        }
        .catalog-item-form .form-group {
            flex: 1 1 calc(50% - 15px);
            margin-bottom: 0;
        }
        /* Address rows: on desktop use a two-column grid for each row */
        .form-row {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 20px;
        }
        /* Reset column span for street/house inputs on desktop */
        .form-row .street-group,
        .form-row .house-number-group {
            grid-column: auto;
        }
        /* Ensure inputs inside the catalog form remain responsive */
        .catalog-item-form .form-group input,
        .catalog-item-form .form-group select,
        .catalog-item-form .form-group textarea {
            min-width: 0;
        }
        .add-item-container {
            text-align: center;
            margin: 20px 0;
        }
        .btn-add {
            background: linear-gradient(135deg, #5cb3cc 0%, #4a9db8 100%);
            color: #fff;
            border: none;
            padding: 15px 30px;
            border-radius: 25px;
            font-size: 16px;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.3s ease;
        }
        .btn-add:hover {
            transform: translateY(-2px);
            box-shadow: 0 8px 20px rgba(92, 179, 204, 0.3);
        }
        /* Calculation preview */
        .calculation-preview {
            background: linear-gradient(135deg, #5cb3cc 0%, #4a9db8 100%);
            color: #fff;
            padding: 25px;
            border-radius: 15px;
            text-align: center;
            margin: 20px 0;
            animation: pulse 0.6s ease;
        }
        .final-calculation {
            background: linear-gradient(135deg, #2ecc71 0%, #27ae60 100%);
        }
        @keyframes pulse {
            0% { transform: scale(0.95); }
            50% { transform: scale(1.02); }
            100% { transform: scale(1); }
        }
        .calculation-preview h3 {
            font-size: 18px;
            margin-bottom: 10px;
            color: #fff;
            font-weight: 700;
        }
        .calculation-preview .amount {
            font-size: 32px;
            font-weight: 700;
            margin: 10px 0;
            color: #fff;
        }
        .calculation-details {
            font-size: 14px;
            margin-top: 15px;
            color: #fff;
        }
        .calculation-details > div {
            margin: 5px 0;
        }
        .final-amount {
            font-size: 16px;
            font-weight: bold;
            border-top: 1px solid rgba(255,255,255,0.3);
            padding-top: 10px;
            margin-top: 10px;
        }
        /* Shipping recommendation banner */
        .shipping-recommendation {
            background: linear-gradient(135deg, #4caf50 0%, #45a049 100%);
            color: #fff;
            padding: 15px;
            border-radius: 12px;
            margin: 20px 0;
        }
        .recommendation-content {
            display: flex;
            align-items: center;
            gap: 12px;
        }
        .recommendation-icon {
            font-size: 24px;
        }
        .recommendation-text {
            font-size: 14px;
            font-weight: 600;
        }
        /* Summary sections */
        .summary-section {
            margin: 0 0 20px;
            background: #fff;
            border-radius: 16px;
            padding: 24px;
            box-shadow: 0 2px 16px rgba(0,0,0,0.06);
            border: 1px solid #f0f2f5;
        }
        .summary-section h4 {
            color: #1a1a1a;
            margin-bottom: 16px;
            font-size: 16px;
            font-weight: 600;
        }
        .summary-item {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 12px 0;
            font-size: 15px;
        }
        .summary-item .label {
            color: #666;
            font-weight: 500;
        }
        .summary-item .value {
            font-weight: 700;
            color: #333;
        }
        .summary-list {
            display: flex;
            flex-direction: column;
            gap: 12px;
        }
        .summary-list-item {
            display: flex;
            flex-direction: column;
            gap: 4px;
        }
        .summary-list-label {
            font-weight: 600;
            color: #666;
            font-size: 13px;
        }
        .summary-list-value {
            font-weight: 600;
            color: #1a1a1a;
            font-size: 15px;
        }
        .calculation-summary {
            background: linear-gradient(135deg, #5cb3cc 0%, #4a9db8 100%);
            padding: 20px;
            border-radius: 16px;
            margin: 24px 0;
            color: #fff;
        }
        /* Checkbox styling */
        .checkbox-fancy {
            display: flex;
            align-items: flex-start;
            gap: 10px;
            padding: 15px;
            border: 2px solid #e1e5e9;
            border-radius: 12px;
            cursor: pointer;
            transition: all 0.3s ease;
            margin: 15px 0;
        }
        .checkbox-fancy:hover {
            border-color: #5cb3cc;
            background: #fafbfc;
        }
        .checkbox-fancy input[type="checkbox"] {
            width: auto;
            margin: 0;
        }
        .checkbox-fancy label {
            margin: 0;
            cursor: pointer;
            line-height: 1.4;
            font-size: 14px;
        }
        /* Navigation */
        .wizard-nav {
            padding: 20px;
            border-top: 1px solid #e1e5e9;
            display: flex;
            justify-content: space-between;
            align-items: center;
            /* Use a white background for the navigation bar so it doesn't look
               like a disabled or greyed‑out area. */
            background: #ffffff;
        }
        .btn {
            padding: 12px 25px;
            border: none;
            border-radius: 25px;
            font-size: 14px;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.3s ease;
            text-transform: uppercase;
            letter-spacing: 0.5px;
            min-width: 120px;
        }
        .btn-primary {
            background: linear-gradient(135deg, #5cb3cc 0%, #4a9db8 100%);
            color: #fff;
        }
        .btn-primary:hover {
            transform: translateY(-2px);
            box-shadow: 0 8px 20px rgba(92, 179, 204, 0.3);
        }
        .btn-secondary {
            background: #e1e5e9;
            color: #666;
        }
        .btn-secondary:hover {
            background: #d1d5d9;
        }
        .step-counter {
            font-size: 12px;
            color: #999;
            font-weight: normal;
        }
        /* Success animation */
        .success-animation {
            font-size: 64px;
            color: #2ecc71;
            margin-bottom: 20px;
            animation: bounceIn 0.8s ease;
        }
        @keyframes bounceIn {
            0% { transform: scale(0.3); opacity: 0; }
            50% { transform: scale(1.05); }
            70% { transform: scale(0.9); }
            100% { transform: scale(1); opacity: 1; }
        }
        /* Submission message styles */
        .submission-message {
            margin-top: 20px;
            text-align: center;
            font-weight: 700;
            font-size: 14px;
        }
        .submission-message.success {
            color: #2ecc71;
        }
        .submission-message.error {
            color: #e74c3c;
        }
        /* Submit overlay styles */
        .submit-overlay {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.35);
            display: flex;
            align-items: center;
            justify-content: center;
            z-index: 9999;
        }
        .submit-overlay-box {
            background: #fff;
            border-radius: 12px;
            padding: 20px 24px;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
            min-width: 260px;
            display: flex;
            gap: 12px;
            align-items: center;
        }
        .submit-spinner {
            width: 22px;
            height: 22px;
            border-radius: 50%;
            border: 3px solid #e5e7eb;
            border-top-color: #2563eb;
            animation: submitSpin .9s linear infinite;
        }
        @keyframes submitSpin {
            to { transform: rotate(360deg); }
        }
        .submit-overlay-text {
            font-weight: 500;
        }

        /* UST-ID Container */
        /* Styles für neue Adresssektionen */
        .address-section {
            margin: 20px 0;
            padding: 20px;
            border: 1px solid #e1e5e9;
            border-radius: 12px;
            background: #fafbfc;
        }

        .address-section h3 {
            margin-top: 0;
            color: #333;
            font-size: 16px;
        }

        /* Responsive adjustments */
        @media (max-width: 768px) {
            .wizard-container {
                margin: 0;
                max-width: 100%;
                width: 100%;
                border-radius: 0;
                box-shadow: none;
                min-height: 100vh;
                /* Remove horizontal padding on mobile to reduce spacing near the screen edges */
                padding-left: 0;
                padding-right: 0;
                /* Pull the container outwards to compensate for theme‑level
                   padding on the surrounding layout.  These negative
                   margins help the wizard fill the viewport width on
                   narrow screens, reducing the “white border” around
                   the card. Adjust the values to match your theme’s
                   horizontal padding. */
                margin-left: -15px;
                margin-right: -15px;
            }
            .wizard-header {
                /* Reduce left/right padding on mobile to minimise the space
                   between the form and the edges of small screens. */
                padding: 15px 5px 20px;
            }
            .promo-banner {
                /* Rework the promo banner on mobile: remove negative margins
                   and stack its contents vertically. This prevents the
                   guarantee banner from overlapping the main headline. */
                margin: 0 0 10px 0;
                padding: 10px 0;
                flex-direction: column;
                align-items: center;
                justify-content: center;
                box-shadow: none;
                border-bottom: none;
            }
            .promo-main {
                /* Reduce the font size of the banner headline on mobile to
                   prevent text from wrapping awkwardly. */
                font-size: 1.1rem;
                line-height: 1.2;
            }
            .promo-sub {
                font-size: 14px;
            }
            .wizard-content {
                /* Reduce default padding on mobile even further.  Smaller
                   horizontal padding prevents the form from shrinking and
                   adds more space for content without cutting words at line
                   breaks. */
                padding: 15px 5px;
            }
            .catalog-item-form {
                flex-direction: column;
            }
            .catalog-item-form .form-group {
                flex: 1 1 100%;
            }
            .customer-type-selection {
                grid-template-columns: 1fr;
            }
            .shipping-options {
                grid-template-columns: 1fr;
            }
            .datetime-picker {
                grid-template-columns: 1fr;
            }
            .form-row {
                grid-template-columns: 1fr;
            }
            .form-row .street-group {
                grid-column: 1;
            }
            .form-row .house-number-group {
                grid-column: 1;
            }
            .wizard-nav {
                /* Reduce horizontal padding on mobile navigation bar. */
                padding: 15px 5px;
                flex-direction: column;
                gap: 10px;
            }
            .step-counter {
                order: -1;
            }
            #nextBtn {
                order: 1;
            }
            #prevBtn {
                order: 2;
            }
            /* Override padding on each step container for mobile.  Even
               smaller left/right padding reduces the perceived margin to
               the screen edges. */
            .step {
                padding-left: 5px;
                padding-right: 5px;
            }

            /* Shrink the guarantee banner and its typography on mobile to
               prevent text from overflowing. */
            .guarantee-banner {
                margin-top: 4px;
                padding: 10px 15px;
                box-shadow: none;
            }
            .guarantee-header {
                font-size: 16px;
            }
            .guarantee-body {
                font-size: 14px;
            }
            .guarantee-body strong {
                font-size: 14px;
            }
        }
    /* Global word break fixes: ensure text breaks only at natural word
       boundaries.  Avoid splitting words across lines on small screens.
       `overflow-wrap: break-word` ensures extremely long unbroken strings
       wrap gracefully without breaking mid-word, while `word-break: normal`
       prevents arbitrary character breaks. */
    .wizard-container, .wizard-container * {
        word-break: normal;
        overflow-wrap: break-word;
    }