/* rechner.css — ausgelagert aus public/rechner.html (09/2026).
 *
 * WARUM AUSGELAGERT: die Seite trug 857 KB in EINER Datei. Das HTML wird von
 * nginx mit no-store ausgeliefert, also bei JEDEM Aufruf komplett neu geladen —
 * auch dieses CSS. Als eigene Datei traegt es einen Cache-Header und wird bei
 * Wiederbesuchen (und im WordPress-Embed, der bei jeder Seitennavigation neu
 * laedt) nicht erneut uebertragen.
 *
 * KASKADE — BINDEND: diese Datei MUSS vor assets/vendor/tailwind-rechner.css
 * eingebunden werden. Frueher hing das Play-CDN sein <style> hinter den inline
 * <style>-Block; bei gleicher Spezifitaet gewann deshalb immer die Utility.
 * Kehrt man die Reihenfolge um, greifen mehrere seit Jahren wirkungslose
 * Eigenregeln auf einen Schlag und das Layout kippt — ohne Fehlermeldung.
 */

        :root {
            --brand-blue: #4cb3d6;
            --brand-green: #48bf91;
        }

        body {
            font-family: 'Montserrat', sans-serif;
            background-color: #121212;
            color: #e0e0e0;
            min-height: 100vh;
            display: flex;
            flex-direction: column;
        }
        h1, .title-font {
            font-family: 'Bebas Neue', sans-serif;
            letter-spacing: 1px;
        }

        /* Calculator h2 and h3 elements use Montserrat */
        .calculator-container h2,
        .calculator-container h3 {
            font-family: 'Montserrat', sans-serif;
        }
        .main-container {
            flex: 1;
            display: flex;
            flex-direction: column;
            justify-content: flex-start;
            align-items: center;
            min-height: auto;
            position: relative;
            padding: clamp(1rem, 2.5vh, 2rem) 0 10rem 0;
        }

        .hero-header {
            margin-bottom: clamp(1.5rem, 3vh, 2.5rem);
        }

        /* ===== Desktop: die vorhandene Breite auch nutzen ==========================
           Die Karte stand auf max-w-4xl (896px) und liess auf einem 1440er-Schirm ueber
           500px links und rechts brachliegen, waehrend Schichtkarten und Kostenaufstellung
           innen gedraengt umbrachen.

           WICHTIG zur Kaskade: das Tailwind-Play-CDN haengt sein <style> NACH diesem
           inline-Block an. Eine Regel `.max-w-4xl` (0,1,0) verlaere deshalb jeden
           Gleichstand gegen die Utility. Alle Regeln hier tragen darum mindestens zwei
           Klassen oder eine ID. Der Embed-Modus bleibt aussen vor: dort bestimmt die
           Gastseite die Breite.

           Nur min-width — die Mobil-Baender (max-width 768/640/480) gelten nie
           gleichzeitig, die Reihenfolge im Stylesheet ist also gefahrlos. */
        @media (min-width: 1024px) {
            html:not(.is-embed) .main-container > .max-w-4xl { max-width: 68rem; }

            /* Der Fortschritt bekommt Luft nach unten — die Beschriftungen ragen aus
               ihrem Kasten heraus und wuerden sonst an der Karte kleben. */
            html:not(.is-embed) .main-container .sc-stepnav-wrap { margin-bottom: 5rem; }
            html:not(.is-embed) #stepProgressHint { margin-bottom: 1rem; }

            /* Mehr Luft in der Karte selbst statt nur breiterer Rand. */
            html:not(.is-embed) .main-container .calculator-container { padding: 2.5rem 3rem; }

            /* Typografie eine Stufe groesser, damit die Breite nicht als Leere wirkt. */
            html:not(.is-embed) .calculator-container h2 { font-size: 1.75rem; line-height: 1.25; }
            html:not(.is-embed) .calculator-container h3 { font-size: 1.2rem; }
            html:not(.is-embed) .calculator-container,
            html:not(.is-embed) .calculator-container .input-field,
            html:not(.is-embed) .calculator-container label { font-size: 1.0625rem; }
            html:not(.is-embed) .calculator-container .input-field { padding-top: 0.9rem; padding-bottom: 0.9rem; }

            /* Die Schichtkarte bekommt den gewonnenen Platz weiter nach innen. */
            html:not(.is-embed) .calculator-container .shift-card .shift-content { padding: 1.5rem; }
            html:not(.is-embed) .calculator-container .shift-card .shift-summary-header { padding: 1.1rem 1.5rem; }

            /* Kostenaufstellung und die Bloecke darunter ziehen mit, sonst steht die
               Ergebnisseite ploetzlich schmaler als der Rechner darueber. */
            html:not(.is-embed) #resultsSection,
            html:not(.is-embed) #serviceOverviewSection,
            html:not(.is-embed) #faqSection { padding: 2.25rem 2.75rem; }
            html:not(.is-embed) #resultsSection .card { padding: 1.5rem; }
        }

        /* Ab 1440px noch eine Stufe — darunter wuerde die Zeile zu lang zum Lesen. */
        @media (min-width: 1440px) {
            html:not(.is-embed) .main-container > .max-w-4xl { max-width: 76rem; }
            html:not(.is-embed) .main-container .calculator-container { padding: 2.75rem 3.5rem; }
        }

        /* ===== Embed mode (iframe): wizard + price result only ===== */
        html.is-embed .hero-header,
        html.is-embed #sc-legal-footer,
        html.is-embed #languageToggle,
        html.is-embed #fomoBanner,
        html.is-embed #background-effect,
        html.is-embed #seo-content,
        html.is-embed #resultsReviewsPanel,
        html.is-embed #resultsContactPanel,
        /* fixed-Elemente landen im autosized Iframe mitten im Inhalt statt am
           Bildschirmrand — im Embed ausblenden (Modals werden stattdessen gepinnt) */
        html.is-embed #runningPriceChip,
        html.is-embed #shareLinkBtnFloating { display: none !important; }
        /* Im Embed ist body auf 0 !important gesetzt — den kleinen Seitenrand traegt
           deshalb hier der Container, sonst saesse der Rahmen samt Schatten der
           Rechner-Karte exakt auf der Iframe-Kante. */
        html.is-embed .main-container { padding: 0 0.5rem 0.75rem 0.5rem; min-height: 0; }
        html.is-embed,
        html.is-embed body {
            background: transparent !important;
            height: auto !important;
            min-height: 0 !important;
            max-height: none !important;
            overflow: visible !important;
            /* OHNE DIESE ZEILE IST DER EINGEBETTETE RECHNER UNBRAUCHBAR.
               Der Rechner ist durchgehend dunkel entworfen: die Karte ist
               rgba(30,30,30,.55) — halbdurchsichtig, gedacht ueber schwarzem
               Grund (#background-effect). Im Embed-Modus wird der Body auf
               transparent gesetzt und #background-effect ausgeblendet, damit
               die Wirtsseite durchscheint.
               Ohne color-scheme malt der Browser die Leinwand eines Dokuments
               aber HELL. Die halbdurchsichtige Karte lag dadurch auf Weiss und
               erschien als grauer Schleier mit kaum lesbarem Text — genau so
               sah die Einbettung auf /personal/ am 28.08.2026 aus.
               color-scheme war bisher nur auf .input-field, input, select und
               textarea gesetzt (Zeile ~348), also nur fuer die nativen
               Bedienelemente, nicht fuer das Dokument selbst. */
            color-scheme: dark;
        }
        html.is-embed body {
            margin: 0 !important;
            padding: 0 !important;
            display: block !important;
        }
        html.is-embed body.min-h-screen { padding: 0 !important; min-height: 0 !important; }
        html.is-embed #app {
            overflow: visible;
            height: auto;
            min-height: 0;
        }
        html.is-embed .main-container { flex: none !important; min-height: 0 !important; }
        html.is-embed .calculator-container { margin-bottom: 0.5rem; }
        html.is-embed .main-container > .max-w-4xl > .flex.justify-center.mb-16 { margin-bottom: 1rem; }

        .hero-logo {
            height: clamp(4.5rem, 12vh, 7rem);
        }

        .calculator-container {
            background: rgba(30, 30, 30, 0.55);
            backdrop-filter: blur(16px);
            -webkit-backdrop-filter: blur(16px);
            border: 1px solid rgba(255, 255, 255, 0.08);
            box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
        }

        @keyframes gentlePulse {
            0%, 100% { border-color: rgba(76, 179, 214, 0.2); box-shadow: 0 0 0 0 rgba(76, 179, 214, 0); }
            50% { border-color: rgba(76, 179, 214, 0.5); box-shadow: 0 0 8px 0 rgba(76, 179, 214, 0.2); }
        }
        #eventAddress:placeholder-shown {
            animation: gentlePulse 2.5s infinite;
        }
        .input-field {
            background-color: #2a2a2a;
            color: #e0e0e0;
            border-color: #3a3a3a;
            transition: all 0.3s ease;
        }
        /* Native UA-Teile (Datums-Picker-Icon, Select-Pfeile, Scrollbars) dunkel rendern —
           ohne color-scheme ist das Kalender-Icon auf dunklem Grund quasi unsichtbar */
        .input-field, input[type="date"], select, textarea {
            color-scheme: dark;
        }
        .input-field:focus {
            transform: translateY(-2px);
            border-color: #4cb3d6;
        }
        /* Personenzahl der Schichtkarte: die nativen Spinner-Pfeile sind neben den
           -/+ Knoepfen ueberfluessig UND schaedlich — Chrome legt sie ueber den
           rechten Rand des Feldes, in einer schmalen Spalte ist die Zahl damit
           angeschnitten. Ohne sie traegt die Mitte des Zaehlers den Wert. */
        .shift-count {
            appearance: textfield;
            -moz-appearance: textfield;
            font-weight: 600;
            font-variant-numeric: tabular-nums;
        }
        .shift-count::-webkit-outer-spin-button,
        .shift-count::-webkit-inner-spin-button {
            -webkit-appearance: none;
            margin: 0;
        }
        .btn-primary-blue {
            background: #4cb3d6;
            transition: all 0.3s ease;
        }
        .btn-primary-blue:hover {
            transform: translateY(-2px);
            box-shadow: 0 10px 15px -3px rgba(76, 179, 214, 0.4);
            background: #3ba3c4;
        }
        .btn-primary-green {
            background: #48bf91;
            transition: all 0.3s ease;
        }
        .btn-primary-green:hover {
            transform: translateY(-2px);
            box-shadow: 0 10px 15px -3px rgba(72, 191, 145, 0.4);
            background: #3aa67a;
        }
        .btn-secondary {
            background-color: #2a2a2a;
            border-color: #3a3a3a;
            transition: all 0.3s ease;
        }
        .btn-secondary:hover {
            transform: translateY(-2px);
            background-color: #3a3a3a;
            border-color: #4a4a4a;
        }

        /* Enhanced button hover effects */
        button:hover {
            transform: translateY(-1px);
            transition: all 0.2s ease;
        }

        .time-increase:hover, .time-decrease:hover,
        .employee-increase:hover, .employee-decrease:hover {
            background-color: #3a3a3a;
            border-color: #4cb3d6;
            color: #4cb3d6;
            transform: translateY(-1px);
        }

        .shift-role-btn:hover {
            border-color: #4cb3d6;
            background-color: #3a3a3a;
        }

        /* Tutorial highlight effect */
        .tutorial-highlight {
            animation: tutorialPulse 2s ease-in-out infinite;
            box-shadow: 0 0 10px rgba(76, 179, 214, 0.4);
            border: 1px solid #4cb3d6 !important;
            background-color: rgba(76, 179, 214, 0.05) !important;
        }

        /* Softer highlight for main buttons */
        .tutorial-highlight-main {
            animation: tutorialBounce 1.5s ease-in-out infinite;
            background-color: rgba(76, 179, 214, 0.15) !important;
            color: #4cb3d6 !important;
        }

        @keyframes tutorialPulse {
            0%, 100% {
                transform: scale(1);
                box-shadow: 0 0 10px rgba(76, 179, 214, 0.4);
            }
            50% {
                transform: scale(1.02);
                box-shadow: 0 0 15px rgba(76, 179, 214, 0.6);
            }
        }

        @keyframes tutorialBounce {
            0%, 100% {
                transform: translateY(0);
                background-color: rgba(76, 179, 214, 0.15);
            }
            50% {
                transform: translateY(-3px);
                background-color: rgba(76, 179, 214, 0.25);
            }
        }
        /* Language Toggle Styles */
        .language-toggle-large {
            position: fixed;
            top: 20px;
            right: 20px;
            display: flex;
            gap: 12px;
            z-index: 1000;
            transition: all 0.3s ease;
        }
        .language-toggle-large .lang-btn {
            padding: 14px 28px;
            font-size: 18px;
            font-weight: 600;
            border: 2px solid rgba(76, 179, 214, 0.3);
            background: rgba(42, 42, 42, 0.95);
            color: #e0e0e0;
            border-radius: 12px;
            cursor: pointer;
            transition: all 0.3s ease;
            display: flex;
            align-items: center;
            gap: 8px;
            backdrop-filter: blur(10px);
        }
        .language-toggle-large .lang-btn:hover {
            border-color: #4cb3d6;
            background: rgba(76, 179, 214, 0.15);
            transform: translateY(-2px);
            box-shadow: 0 4px 12px rgba(76, 179, 214, 0.3);
        }
        .language-toggle-large .lang-btn.active {
            border-color: #4cb3d6;
            background: linear-gradient(135deg, #4cb3d6, #48bf91);
            color: white;
            box-shadow: 0 4px 15px rgba(76, 179, 214, 0.4);
        }
        /* Auf Phones von Anfang an kompakt + unter der Modal-Ebene (Modals sind z-50) */
        @media (max-width: 768px) {
            .language-toggle-large {
                top: 10px;
                right: 10px;
                gap: 6px;
            }
            .language-toggle-large .lang-btn {
                padding: 8px 14px;
                font-size: 14px;
                border-width: 1px;
                border-radius: 8px;
            }
        }
        .language-toggle-large, .language-toggle-small {
            z-index: 40;
        }
        .language-toggle-small {
            position: fixed;
            top: 15px;
            right: 15px;
            display: flex;
            gap: 8px;
            z-index: 1000;
            transition: all 0.3s ease;
        }
        .language-toggle-small .lang-btn {
            padding: 8px 16px;
            font-size: 14px;
            font-weight: 600;
            border: 1px solid rgba(76, 179, 214, 0.3);
            background: rgba(42, 42, 42, 0.95);
            color: #e0e0e0;
            border-radius: 8px;
            cursor: pointer;
            transition: all 0.3s ease;
            display: flex;
            align-items: center;
            gap: 6px;
            backdrop-filter: blur(10px);
        }
        .language-toggle-small .lang-btn:hover {
            border-color: #4cb3d6;
            background: rgba(76, 179, 214, 0.15);
        }
        .language-toggle-small .lang-btn.active {
            border-color: #4cb3d6;
            background: linear-gradient(135deg, #4cb3d6, #48bf91);
            color: white;
        }
        .result-card {
            background: rgba(30, 30, 30, 0.55);
            backdrop-filter: blur(16px);
            -webkit-backdrop-filter: blur(16px);
            border: 1px solid rgba(255, 255, 255, 0.08);
            box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.3);
            transform: translateY(0);
            transition: all 0.5s ease;
        }
        .step-container {
            display: none;
        }
        .step-container.active {
            display: block;
        }
        .step-indicator {
            width: 30px;
            height: 30px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: 600;
            transition: all 0.3s ease;
            background-color: #2a2a2a;
            color: #e0e0e0;
        }
        .step-indicator + span {
            color: #6b7280; /* text-gray-500 */
            font-weight: 500;
        }
        .step-indicator.active {
            background-color: #4cb3d6;
            color: white;
        }
        .step-indicator.active + span {
            color: #4cb3d6; /* text-brand-blue */
            font-weight: 600;
        }
        .step-indicator.completed {
            background-color: #48bf91;
            color: white;
        }
        .step-indicator.completed + span {
            color: #48bf91; /* text-brand-green */
            font-weight: 600;
        }
        .step-indicator.skipped {
            background-color: #2a2a2a;
            color: #fbbf24;
            border: 2px dashed rgba(251, 191, 36, 0.8);
        }
        .ai-fill-btn {
            background: linear-gradient(135deg, #6366f1, #8b5cf6, #a855f7);
            color: #fff;
            border: none;
            box-shadow: 0 0 12px rgba(139, 92, 246, 0.4);
            transition: box-shadow 0.3s, transform 0.15s;
            animation: ai-btn-glow 2.5s ease-in-out infinite;
        }
        .ai-fill-btn:hover {
            box-shadow: 0 0 20px rgba(139, 92, 246, 0.65);
            transform: scale(1.04);
        }
        @keyframes ai-btn-glow {
            0%, 100% { box-shadow: 0 0 12px rgba(139, 92, 246, 0.4); }
            50%      { box-shadow: 0 0 22px rgba(168, 85, 247, 0.6); }
        }
        .shift-card {
            background-color: #2a2a2a;
            transition: all 0.3s ease;
        }
        .shift-card:hover {
            transform: translateY(-2px);
        }
        .time-select {
            appearance: none;
            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%23e0e0e0'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M19 9l-7 7-7-7'%3E%3C/path%3E%3C/svg%3E");
            background-repeat: no-repeat;
            background-position: right 0.5rem center;
            background-size: 1.5em 1.5em;
            padding-right: 2.5rem;
        }
        .tooltip {
            position: relative;
            display: inline-block;
        }
        .tooltip .tooltiptext {
            visibility: hidden;
            width: 200px;
            background-color: #000;
            color: #fff;
            text-align: center;
            border-radius: 6px;
            padding: 5px;
            position: absolute;
            z-index: 1;
            bottom: 125%;
            left: 50%;
            margin-left: -100px;
            opacity: 0;
            transition: opacity 0.3s;
            font-size: 12px;
        }
        .tooltip:hover .tooltiptext,
        .tooltip:focus-within .tooltiptext {
            visibility: visible;
            opacity: 1;
        }
        /* Tipp-Umschalter (Neukunde-ⓘ u.a.): .tooltip-open zeigt den Inhalt am Touchscreen */
        .tooltip-open .sc-tap-tooltip {
            opacity: 1 !important;
            visibility: visible !important;
        }
        .badge {
            display: inline-flex;
            align-items: center;
            padding: 0.25rem 0.75rem;
            border-radius: 9999px;
            font-size: 0.75rem;
            font-weight: 600;
            transition: all 0.2s ease;
        }

        .badge-info-icon {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            margin-left: 0.5rem;
            cursor: pointer;
            color: currentColor;
            opacity: 0.7;
            transition: opacity 0.2s;
        }

        .badge-info-icon:hover {
            opacity: 1;
        }

        .tooltip-bubble {
            position: absolute;
            background: #1f2937;
            color: white;
            padding: 0.75rem;
            border-radius: 0.5rem;
            font-size: 0.75rem;
            line-height: 1.4;
            max-width: 200px;
            box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.5);
            border: 1px solid #374151;
            z-index: 1000;
            pointer-events: none;
            display: none;
        }

        .tooltip-bubble.visible {
            display: block;
        }

        /* User Guidance Animations */
        @keyframes pulse-blue {
            0% { box-shadow: 0 0 0 0 rgba(76, 179, 214, 0.4); }
            70% { box-shadow: 0 0 0 10px rgba(76, 179, 214, 0); }
            100% { box-shadow: 0 0 0 0 rgba(76, 179, 214, 0); }
        }

        .pulse-next {
            animation: pulse-blue 2s infinite;
            border-color: #4cb3d6 !important;
        }

        .field-checkmark {
            position: absolute;
            right: 1rem;
            top: 50%;
            transform: translateY(-50%);
            color: #48bf91;
            opacity: 0;
            transition: all 0.3s ease;
            pointer-events: none;
        }

        .field-checkmark.visible {
            opacity: 1;
            transform: translateY(-50%) scale(1.1);
        }

        .badge-blue {
            background-color: rgba(76, 179, 214, 0.2);
            color: #4cb3d6;
        }
        .badge-green {
            background-color: rgba(72, 191, 145, 0.2);
            color: #48bf91;
        }
        .badge-yellow {
            background-color: rgba(245, 158, 11, 0.2);
            color: #f59e0b;
        }

        /* ── Ruhige Grundelemente (Farbsprache wie clientdashboard.html) ──
           Farbe traegt Bedeutung: gruen = echter Vorteil (gratis/inklusive/Rabatt),
           amber = echter Hinweis, rot = Fehler. Alles andere ist grau — Zuschlaege
           sind Fakten, keine Erfolge, und leuchten deshalb nicht. */
        :root {
            --sc-accent: #4cb3d6;
            --sc-green: #48bf91;
            --sc-amber: #e8b34b;
            --sc-red: #ef6a6a;
            --sc-text-muted: #9b9ba6;
            --sc-border-strong: #34343e;
        }
        .tabular-nums { font-variant-numeric: tabular-nums; }
        .sc-icon { width: 1em; height: 1em; display: inline-block; vertical-align: -0.125em;
                   fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round;
                   stroke-linejoin: round; flex-shrink: 0; }
        /* Neutrales Faktum (Zuschlaege, Transportinfo): grauer Umriss, keine Flaeche */
        .sc-badge { display: inline-flex; align-items: center; gap: 0.3rem; padding: 0.2rem 0.55rem;
                    border-radius: 9999px; font-size: 0.72rem; font-weight: 500; line-height: 1.4;
                    border: 1px solid var(--sc-border-strong); color: var(--sc-text-muted);
                    background: transparent; white-space: nowrap; font-variant-numeric: tabular-nums; }
        /* Teamleitungs-Angebot: im Ruhezustand nur eine Zeile. Der Standard-Marker von
           <summary> ist ein Dreieck, das je nach Browser anders aussitzt — wir zeigen
           stattdessen ein eigenes Chevron rechts. */
        .tl-summary { list-style: none; }
        .tl-summary::-webkit-details-marker { display: none; }
        .sc-badge--green { color: var(--sc-green); border-color: rgba(72,191,145,0.35);
                           background: rgba(72,191,145,0.10); font-weight: 600; }
        .sc-badge--amber { color: var(--sc-amber); border-color: rgba(232,179,75,0.4);
                           background: rgba(232,179,75,0.08); font-weight: 600; }
        /* Bar-Vergleich unter dem Positionsfeld: Hierarchie durch Typografie.
           Die gewaehlte Zeile ist weiss, die Alternative grau und klickbar —
           kein Kasten, keine Flaeche, kein Gelb. */
        .bar-compare { border-top: 1px solid rgba(255,255,255,0.07); margin-top: 0.5rem;
                       padding-top: 0.45rem; font-size: 0.75rem; }
        .bar-compare__row { display: flex; align-items: baseline; gap: 0.5rem; width: 100%;
                            padding: 0.2rem 0; text-align: left; background: none; border: 0; }
        .bar-compare__row--active { color: #fff; }
        .bar-compare__row--alt { color: #6b7280; cursor: pointer; transition: color 0.15s ease; }
        .bar-compare__row--alt:hover, .bar-compare__row--alt:focus-visible { color: #d1d5db; }
        .bar-compare__row--alt:hover .bar-compare__go,
        .bar-compare__row--alt:focus-visible .bar-compare__go { color: var(--sc-accent); }
        .bar-compare__role { flex-shrink: 0; width: 6.2rem; font-weight: 600; white-space: nowrap; }
        .bar-compare__row--alt .bar-compare__role { font-weight: 500; }
        .bar-compare__desc { flex: 1 1 auto; min-width: 0; opacity: 0.85; }
        .bar-compare__price { flex-shrink: 0; font-variant-numeric: tabular-nums; white-space: nowrap; }
        .bar-compare__go { flex-shrink: 0; transition: color 0.15s ease; }
        @media (max-width: 480px) { .bar-compare__desc { display: none; } }
        .input-field.auto-filled {
            border-color: rgba(76, 179, 214, 0.45);
            background-color: rgba(76, 179, 214, 0.04);
        }
        #autoFilledHint:not(.hidden) {
            display: block;
        }
        .card {
            background-color: #2a2a2a;
            border-radius: 0.5rem;
        }

        /* Hide scrollbar for pricing modal */
        .pricing-modal-content {
            scrollbar-width: none; /* Firefox */
            -ms-overflow-style: none; /* IE and Edge */
        }
        .pricing-modal-content::-webkit-scrollbar {
            display: none; /* Chrome, Safari, Opera */
        }


        /* Hintergrund-Bubble-Effekt */
        #background-effect {
            position: fixed;
            top: 0; left: 0; right: 0; bottom: 0;

            overflow: hidden;
            pointer-events: none;
            background-color: black;
            z-index: 1;
        }

        .bubble {
            position: absolute;
            width: 19px;
            height: 19px;
            border-radius: 50%;
            pointer-events: none;
            animation: rise 6s ease-out forwards;
            background: linear-gradient(45deg, var(--brand-blue), var(--brand-green));
            opacity: 0.6;
        }

        @keyframes rise {
            0% {
                transform: translateY(0) scale(1);
                opacity: 0.8;
            }
            100% {
                transform: translateY(-220px) scale(3);
                opacity: 0;
            }
        }

        /* Google Reviews Carousel Styles */
        .carousel-container {
            position: relative;
            overflow: hidden;
            width: 100%;
            height: 320px;
            display: flex;
            align-items: center;
            justify-content: center;
            background: transparent !important;
        }

        .carousel-track {
            display: flex;
            height: 100%;
            align-items: center;
            gap: 20px;
            transition: transform 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
            transform: translateX(0);
            width: max-content;
            padding: 0 200px; /* Add padding to show side cards within container */
            background: transparent !important;
        }

        .carousel-track.paused {
            transition: none;
        }

        /* Override parent backgrounds for Google reviews section */
        #resultsSection > div:last-child {
            background: transparent !important;
            background-color: transparent !important;
        }

        .review-card {
            padding: 26px 24px;
            background: rgba(20, 22, 28, 0.72) !important;
            background-color: rgba(20, 22, 28, 0.72) !important;
            border-radius: 20px;
            border: 1px solid rgba(255, 255, 255, 0.12);
            flex-shrink: 0;
            box-shadow: 0 12px 34px rgba(0, 0, 0, 0.4);
            backdrop-filter: blur(12px);
            -webkit-backdrop-filter: blur(12px);
            width: 400px;
            min-width: 400px;
            height: 260px;
            display: flex;
            flex-direction: column;
            justify-content: flex-start;
            text-align: left;
            position: relative;
            overflow: hidden;
            transition: all 1.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
        }

        /* Center card styling */
        .review-card.center {
            box-shadow: 0 18px 44px rgba(0, 0, 0, 0.55);
            transform: scale(1);
            opacity: 1;
            border-color: rgba(76, 179, 214, 0.45);
        }

        /* Side cards styling */
        .review-card.side {
            transform: scale(0.8);
            opacity: 0.55;
        }

        /* Hidden cards styling */
        .review-card.hidden {
            transform: scale(0.72);
            opacity: 0.4;
        }

        .review-head {
            display: flex;
            align-items: center;
            gap: 12px;
            margin-bottom: 12px;
        }

        .review-avatar {
            width: 42px;
            height: 42px;
            border-radius: 9999px;
            flex-shrink: 0;
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: 700;
            font-size: 15px;
            color: #fff;
            background: linear-gradient(135deg, #4CB3D6, #2b8fb3);
        }

        .review-head-meta { min-width: 0; flex: 1; }

        .review-google { width: 20px; height: 20px; flex-shrink: 0; opacity: 0.95; }

        .review-stars {
            color: #fbbf24;
            font-size: 16px;
            letter-spacing: 2px;
            margin-bottom: 10px;
        }

        .review-text {
            color: #e5e7eb;
            font-size: 13.5px;
            line-height: 1.55;
            display: -webkit-box;
            -webkit-line-clamp: 5;
            line-clamp: 5;
            -webkit-box-orient: vertical;
            overflow: hidden;
        }

        .review-author {
            color: #f9fafb;
            font-size: 14px;
            font-weight: 700;
            line-height: 1.2;
        }

        .review-company {
            color: #9ca3af;
            font-size: 12px;
        }

        .review-when {
            color: #6b7280;
            font-size: 11px;
            margin-top: auto;
            padding-top: 10px;
        }

        /* Staff Photos Diashow Styles */
        .staff-photos-container {
            position: relative;
            width: 100%;
            height: 100%;
            overflow: hidden;
            border-radius: 8px;
        }

        .staff-photo {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            object-fit: cover;
            border-radius: 8px;
            opacity: 0;
            transition: opacity 0.5s ease-in-out;
            z-index: 1;
        }

        .staff-photo.active {
            opacity: 1;
            z-index: 2;
        }

        /* Hide scrollbar */
        .scrollbar-hide {
            -ms-overflow-style: none;  /* Internet Explorer 10+ */
            scrollbar-width: none;  /* Firefox */
        }
        .scrollbar-hide::-webkit-scrollbar {
            display: none;  /* Safari and Chrome */
        }

        /* Background Staff Photos */
        .background-staff-photo {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            object-fit: cover;
            opacity: 0;
            transition: opacity 3s ease-in-out;
            filter: grayscale(100%) brightness(0.4) contrast(1.5);
            z-index: 1;
        }

        .background-staff-photo.active {
            opacity: 1;
            z-index: 2;
        }

        .staff-photo.hidden {
            opacity: 0;
            z-index: 1;
        }

        .staff-photo.loading {
            background: linear-gradient(45deg, #374151, #4b5563);
            display: flex;
            align-items: center;
            justify-content: center;
            color: #9ca3af;
            font-size: 14px;
            border-radius: 8px;
        }

        /* Global loading overlay for long-running actions (offer generation) */
        #globalLoadingOverlay {
            position: fixed;
            inset: 0;
            background: rgba(0, 0, 0, 0.65);
            backdrop-filter: blur(4px);
            display: none;
            align-items: center;
            justify-content: center;
            z-index: 9999;
        }

        #globalLoadingOverlay.active {
            display: flex;
        }

        #globalLoadingOverlay .spinner {
            border-radius: 9999px;
            width: 3rem;
            height: 3rem;
            border: 4px solid rgba(148, 163, 184, 0.5);
            border-top-color: #4cb3d6;
            animation: spin 0.8s linear infinite;
        }

        #globalLoadingOverlay .loading-text {
            margin-top: 1rem;
            color: #e5e7eb;
            font-size: 0.95rem;
        }

        #globalLoadingOverlay .loading-bar-track {
            margin-top: 1.25rem;
            width: 240px;
            height: 6px;
            background: rgba(148, 163, 184, 0.3);
            border-radius: 9999px;
            overflow: hidden;
        }

        #globalLoadingOverlay .loading-bar-fill {
            height: 100%;
            width: 0%;
            background: linear-gradient(90deg, #4cb3d6, #48bf91);
            border-radius: 9999px;
            transition: width 0.25s ease-out;
        }

        .staff-photo.error {
            background: linear-gradient(45deg, #7f1d1d, #991b1b);
            display: flex;
            align-items: center;
            justify-content: center;
            color: #fca5a5;
            font-size: 14px;
            border-radius: 8px;
        }

        /* Mobile Responsive Adjustments */
        @media (max-width: 768px) {
            /* ===== Seitliche Polster auf Phones: EIN Aussenrand, EINE Kartenpolsterung
               Vorher stapelten sich fuenf Ebenen (body 16 + Spalte 4 + Container 8+24 +
               Schichtkarte 14 + Karteninhalt 16 = 82px je Seite): auf einem 360px-Handy
               blieben 196px Inhalt uebrig, 46 % der Breite war Rand.
               WICHTIG fuer alle Regeln hier: Tailwind laeuft als Play-CDN und haengt sein
               <style> ERST an, wenn document.body existiert — also NACH diesem Block.
               Bei gleicher Spezifitaet gewinnt darum immer die Utility (deshalb waren
               `.calculator-container{padding:1rem}` gegen `p-6` und `.card{padding:1rem}`
               gegen `p-4` jahrelang wirkungslos). Neue Regeln muessen die Utility also
               ueberbieten (zwei Klassen / ID / element+klasse) und Laengsschreibweise
               nutzen, damit das vertikale Polster unangetastet bleibt.
               DREI STUFEN: dieser Block ist die ruhige Tablet-Stufe (641-768px),
               darunter greift der 481-640px-Block am Ende der Datei und ganz unten
               der 480px-Block. Ein 768px-Tablet soll NICHT denselben knappen Rand
               bekommen wie ein 360px-Handy.
               Gemessen von harness/rechner-mobile-gutters.test.js. ===== */

            /* Der Aussenrand gehoert genau hierher (body.min-h-screen schlaegt .px-4) */
            body.min-h-screen {
                padding-left: 1rem;
                padding-right: 1rem;
            }

            /* Main container adjustments */
            .main-container {
                padding: 1rem 0 4rem 0;
            }

            /* Calculator container — kein zweiter Aussenrand, schmaleres Polster.
               border-radius gehoert in DIESELBE Regel: als nackte Einzelklasse
               verlaere es den Gleichstand gegen .rounded-2xl (s. Kaskade oben). */
            .main-container .calculator-container {
                margin-left: 0;
                margin-right: 0;
                padding-left: 1.25rem;
                padding-right: 1.25rem;
                border-radius: 1rem;
            }

            /* Typography adjustments */
            h1, .title-font {
                font-size: 1.5rem;
                margin-bottom: 1rem;
                line-height: 1.3;
            }

            .calculator-container h2 {
                font-size: 1.25rem;
                line-height: 1.4;
                margin-bottom: 1.5rem;
            }

            .calculator-container h3 {
                font-size: 1.125rem;
                line-height: 1.4;
                margin-bottom: 1rem;
            }

            /* Text sizing */
            .text-sm {
                font-size: 0.875rem;
                line-height: 1.4;
            }

            .text-xs {
                font-size: 0.75rem;
                line-height: 1.3;
            }

            /* Logo adjustments (frueher .mx-auto.mb-4 — traf statt des Logos die Banner) */
            .hero-logo {
                margin-bottom: 1.5rem;
                max-height: 80px;
            }

            /* Form inputs */
            .input-field {
                padding: 0.875rem 1rem;
                font-size: 16px; /* Prevents zoom on iOS */
                border-radius: 0.5rem;
            }

            /* Buttons: Mindest-Touchziel für alle, das große CTA-Padding nur für echte
               CTA-Klassen — das frühere blanket button{padding} blähte Icon-Knöpfe
               (Schichtkarten-Werkzeuge, Schließen-X, Dropdown-Zeilen) bis zum Overflow auf. */
            button {
                min-height: 44px; /* iOS touch target minimum */
            }
            .btn-primary-blue, .btn-primary-green, .btn-secondary {
                padding: 0.875rem 1.5rem;
                font-size: 1rem;
                border-radius: 0.5rem;
            }

            /* Grid layouts (single backslash — doubled escapes never matched, the rule was dead) */
            .grid-cols-1.md\:grid-cols-2 {
                grid-template-columns: 1fr;
                gap: 1rem;
            }

            /* Step indicators */
            .step-indicator {
                width: 40px;
                height: 40px;
                font-size: 1rem;
            }

            /* Step navigation container */
            .flex.justify-center.mb-16 {
                margin-bottom: 2rem;
                padding: 0 1rem;
            }

            /* Step-Navigation: Kreis + statisches Label als eine Spalte, keine
               absolut haengenden Labels mehr (die krochen unter den Nachbarkreis) */
            #step-line-1, #step-line-2, #step-line-3 {
                display: none;
            }
            #stepNav {
                gap: 0.75rem;
            }
            .step-nav-item {
                flex-direction: column;
            }
            .step-label {
                position: static;
                transform: none;
                margin-top: 0.375rem;
            }

            /* (entfernt: globales .flex.items-center-gap-Override — traf jede
               items-center-Zeile der Seite und quetschte u.a. die Step-Labels) */

            /* Cards and containers (padding-Kurzform verlor gegen .p-4 — jetzt
               zwei Klassen tief und nur horizontal) */
            .card {
                margin-bottom: 1rem;
            }
            /* div.card (0,1,1) statt .calculator-container .card: so greift es AUCH
               auf der Ergebnisseite — dort steht die Kostenaufstellung, die vorher
               als einzige Karte beim vollen p-4 blieb. */
            div.card {
                padding-left: 0.875rem;
                padding-right: 0.875rem;
            }

            /* Address suggestions */
            #addressSuggestions {
                max-height: 200px;
                font-size: 14px;
            }

            /* Review cards — min-width:400px der Basisregel MUSS mit runter,
               sonst sind die width-Overrides wirkungslos (min-width schlaegt width) */
            .review-card {
                min-width: 0;
            }

            .review-card.center {
                width: min(350px, calc(100vw - 3rem));
            }

            .review-card.side {
                width: 175px;
                transform: scale(0.5);
                opacity: 0.5;
            }

            .review-card.hidden {
                width: 175px;
            }

            .review-text {
                font-size: 13px;
            }

            .review-author {
                font-size: 11px;
            }

            .review-company {
                font-size: 10px;
            }

            /* Modal adjustments */
            .modal-content {
                margin: 1rem;
                max-height: calc(100vh - 2rem);
                overflow-y: auto;
            }

            /* Pricing modal mobile optimization */
            .pricing-modal-content {
                margin: 0.5rem;
                max-height: calc(100vh - 1rem);
                padding: 1rem;
                border-radius: 0.75rem;
            }

            /* Multi-day modal mobile optimization */
            #multiDayModal .bg-dark-light {
                margin: 0.5rem;
                max-height: calc(100vh - 1rem);
                padding: 1rem;
                border-radius: 0.75rem;
            }

            /* Callback modal panel height (matches submit modal pattern) */
            #callbackModal .bg-dark-light {
                margin: 0.5rem auto;
                max-height: min(85dvh, calc(100dvh - env(safe-area-inset-top) - env(safe-area-inset-bottom) - 1.5rem));
                min-height: 0;
                padding: 1rem;
                border-radius: 0.75rem;
            }

            /* Modals: scrollable backdrop, safe areas (alignment via Tailwind items-start / md:items-center) */
            #submitOfferModal,
            #callbackModal,
            #multiDayModal,
            #pricingModal,
            #aiFillModal,
            #saveResumeModal,
            #exitIntentModal,
            #thankYouPopup {
                -webkit-overflow-scrolling: touch;
                padding: max(0.5rem, env(safe-area-inset-top)) max(0.5rem, env(safe-area-inset-right)) max(0.75rem, env(safe-area-inset-bottom)) max(0.5rem, env(safe-area-inset-left));
                min-height: 100dvh;
            }

            /* saveResume/exitIntent waren von der Modal-Behandlung ausgenommen:
               ohne inneren Scroller war das X mit offener Tastatur unerreichbar */
            #saveResumeModal, #exitIntentModal {
                align-items: flex-start;
                overflow-y: auto;
            }
            #saveResumeModal > div,
            #exitIntentModal > div,
            #thankYouPopup > div {
                max-height: none;
                margin-top: 0.75rem;
                margin-bottom: 0.75rem;
            }

            #submitOfferModal .bg-dark-light {
                margin: 0.5rem auto;
                max-height: min(90dvh, calc(100dvh - env(safe-area-inset-top) - env(safe-area-inset-bottom) - 1.5rem));
                min-height: 0;
                padding: 1rem;
                border-radius: 0.75rem;
            }

            /* Modal headers */
            .text-xl.font-bold {
                font-size: 1.125rem;
                line-height: 1.3;
            }

            /* Modal close buttons (single backslash — doubled escapes never matched) */
            .text-gray-400.hover\:text-white,
            .text-gray-500.hover\:text-gray-300 {
                padding: 0.5rem;
                min-width: 44px;
                min-height: 44px;
                display: inline-flex;
                align-items: center;
                justify-content: center;
            }

            /* Modal form elements */
            .space-y-4 > * + * {
                margin-top: 1rem;
            }

            /* Wizard only: stack 2-col grids (modals keep their own layout) */
            .calculator-container .grid.grid-cols-2 {
                grid-template-columns: 1fr;
                gap: 0.75rem;
            }

            /* Spacing adjustments */
            .space-y-6 > * + * {
                margin-top: 1.5rem;
            }

            .mb-6 {
                margin-bottom: 1.5rem;
            }

            .mt-8 {
                margin-top: 2rem;
            }

            /* Wizard headers only — dedizierte Klasse statt Utility-Kette: die alte
               Selektorkette traf auch FAQ-Knöpfe und Schichtkarten-Header. */
            .calculator-container .step-header {
                flex-direction: column;
                align-items: flex-start;
                gap: 1rem;
            }

            .calculator-container .step-header button {
                align-self: flex-end;
                font-size: 0.875rem;
                padding: 0.5rem 0.75rem;
            }

            /* Step footers only (Zurück / Weiter) */
            .calculator-container form .mt-8.flex.justify-between {
                flex-direction: column;
                gap: 1rem;
            }

            .calculator-container form .mt-8.flex.justify-between.items-center {
                align-items: stretch;
            }

            .calculator-container form .mt-8 .flex.gap-3.justify-end {
                justify-content: center;
            }

            /* Trust badges */
            .flex.justify-center.gap-3 {
                flex-wrap: wrap;
                gap: 0.5rem;
            }

            .flex.justify-center.gap-3 span {
                font-size: 0.6875rem;
                padding: 0.375rem 0.75rem;
            }
        }

        @media (max-width: 480px) {
            /* Extra small screens — dieselbe Systematik wie im 768px-Block,
               nur eine Stufe knapper (Aussenrand 8px, Kartenpolster 12/10px). */
            body.min-h-screen {
                padding-left: 0.5rem;
                padding-right: 0.5rem;
            }

            .main-container {
                padding: 0.75rem 0 2rem 0;
            }

            .main-container .calculator-container {
                margin-left: 0;
                margin-right: 0;
                padding-left: 0.75rem;
                padding-right: 0.75rem;
            }

            /* Typography for small screens */
            h1, .title-font {
                font-size: 1.25rem;
                line-height: 1.2;
                margin-bottom: 0.75rem;
            }

            .calculator-container h2 {
                font-size: 1.125rem;
                line-height: 1.3;
                margin-bottom: 1rem;
            }

            .calculator-container h3 {
                font-size: 1rem;
                line-height: 1.3;
                margin-bottom: 0.75rem;
            }

            /* (entfernt: .text-sm/.text-xs wurden hier unter die Lesbarkeitsgrenze
               geschrumpft — kleine Screens brauchen eher GROESSERE Schrift) */

            /* Logo adjustments for small screens */
            .hero-logo {
                margin-bottom: 1rem;
                max-height: 60px;
            }

            /* Form inputs for small screens */
            .input-field {
                padding: 0.75rem 0.875rem;
                font-size: 16px;
            }

            /* Buttons for small screens (CTA classes only, see 768px block) */
            .btn-primary-blue, .btn-primary-green, .btn-secondary {
                padding: 0.75rem 1.25rem;
                font-size: 0.875rem;
            }

            /* Step indicators for small screens */
            .step-indicator {
                width: 36px;
                height: 36px;
                font-size: 0.875rem;
            }

            /* Step navigation for small screens */
            .flex.justify-center.mb-16 {
                margin-bottom: 1.5rem;
                padding: 0 0.5rem;
            }

            /* Step-Navigation for small screens */
            #stepNav {
                gap: 0.5rem;
            }
            .step-label {
                font-size: 0.625rem;
            }

            /* (entfernt: globales .flex.items-center-gap-Override, s. 768px-Block) */

            /* Cards for small screens */
            div.card {
                padding-left: 0.625rem;
                padding-right: 0.625rem;
            }

            /* Review cards */
            .review-card {
                min-width: 0;
            }

            .review-card.center {
                width: min(280px, calc(100vw - 2.5rem));
            }

            .review-card.side {
                width: 140px;
                transform: scale(0.5);
                opacity: 0.4;
            }

            .review-card.hidden {
                width: 140px;
            }

            /* Modal for small screens */
            .modal-content {
                margin: 0.5rem;
                max-height: calc(100vh - 1rem);
            }

            /* Pricing modal for small screens */
            .pricing-modal-content {
                margin: 0.25rem;
                max-height: calc(100vh - 0.5rem);
                padding: 0.75rem;
                border-radius: 0.5rem;
            }

            /* Multi-day modal for small screens */
            #multiDayModal .bg-dark-light {
                margin: 0.25rem;
                max-height: calc(100vh - 0.5rem);
                padding: 0.75rem;
                border-radius: 0.5rem;
            }

            /* Callback modal for small screens */
            #callbackModal .bg-dark-light {
                margin: 0.25rem auto;
                max-height: min(82dvh, calc(100dvh - env(safe-area-inset-top) - env(safe-area-inset-bottom) - 1rem));
                padding: 0.75rem;
                border-radius: 0.5rem;
            }

            /* Submit offer modal for small screens */
            #submitOfferModal .bg-dark-light {
                margin: 0.25rem auto;
                max-height: min(88dvh, calc(100dvh - env(safe-area-inset-top) - env(safe-area-inset-bottom) - 1rem));
                padding: 0.75rem;
                border-radius: 0.5rem;
            }

            #submitOfferModal #submitOfferSubmit {
                width: 100%;
                max-width: 100%;
                padding-left: 1rem;
                padding-right: 1rem;
            }

            #submitOfferBtn,
            #callbackBtn {
                width: 100%;
                max-width: 100%;
                box-sizing: border-box;
                padding-left: 1rem;
                padding-right: 1rem;
            }

            /* Modal headers for small screens */
            .text-xl.font-bold {
                font-size: 1rem;
                line-height: 1.2;
            }

            /* Modal close buttons for small screens */
            .text-gray-400.hover\:text-white,
            .text-gray-500.hover\:text-gray-300 {
                padding: 0.375rem;
                min-width: 40px;
                min-height: 40px;
            }

            /* Modal form elements for small screens */
            .space-y-4 > * + * {
                margin-top: 0.75rem;
            }

            /* Reduce spacing on small screens */
            .space-y-6 > * + * {
                margin-top: 1rem;
            }

            .mb-6 {
                margin-bottom: 1rem;
            }

            .mt-8 {
                margin-top: 1.5rem;
            }
        }

        /* Touch-friendly improvements */
        @media (hover: none) and (pointer: coarse) {
            /* Remove hover effects on touch devices (inkl. der spezifischeren Regeln,
               die das blanket button:hover sonst ueberstimmen) */
            button:hover,
            .input-field:focus,
            .btn-primary-blue:hover,
            .btn-primary-green:hover,
            .btn-secondary:hover,
            .time-increase:hover, .time-decrease:hover,
            .employee-increase:hover, .employee-decrease:hover,
            .language-toggle-large .lang-btn:hover,
            .language-toggle-small .lang-btn:hover {
                transform: none;
            }

            /* ⓘ-Ziele: kompakte Optik, aber >=40px Trefferflaeche */
            .badge-info-icon {
                min-width: 40px;
                min-height: 40px;
                justify-content: center;
                margin: -0.65rem -0.65rem -0.65rem -0.15rem;
            }

            /* Hover-Tooltips brauchen am Touchscreen einen Fokus-/Tipp-Pfad */
            .tooltip:focus-within .tooltiptext {
                visibility: visible;
                opacity: 1;
            }

            /* Increase touch targets */
            .time-increase, .time-decrease,
            .employee-increase, .employee-decrease {
                min-width: 44px;
                min-height: 44px;
            }

            /* Make shift role buttons more touch-friendly */
            .shift-role-btn {
                min-height: 44px;
                padding: 0.75rem 1rem;
            }
        }

        /* Mobile-specific button and input optimizations */
        @media (max-width: 768px) {
            /* Time adjustment buttons (44px — muss zu den 44px-Grid-Spuren der
               Schichtkarte passen, 48px quoll aus den Spuren heraus) */
            .time-increase, .time-decrease {
                min-width: 44px;
                min-height: 44px;
                padding: 0.5rem;
                font-size: 1.125rem;
                display: flex;
                align-items: center;
                justify-content: center;
            }

            /* Employee count buttons */
            .employee-increase, .employee-decrease {
                min-width: 44px;
                min-height: 44px;
                padding: 0.5rem;
                font-size: 1.125rem;
                display: flex;
                align-items: center;
                justify-content: center;
            }

            /* Shift role button */
            .shift-role-btn {
                min-height: 48px;
                padding: 0.875rem 1rem;
                font-size: 1rem;
                display: flex;
                align-items: center;
                justify-content: space-between;
            }

            /* Number inputs */
            .shift-count {
                min-height: 48px;
                font-size: 1.125rem;
                text-align: center;
            }

            /* Select dropdowns */
            .time-select {
                min-height: 48px;
                font-size: 1rem;
                padding: 0.875rem 1rem;
            }

            /* Dropdown menus */
            .shift-role-dropdown {
                position: absolute;
                top: 100%;
                left: 0;
                right: 0;
                z-index: 50;
                background-color: #2a2a2a;
                border: 1px solid #3a3a3a;
                border-radius: 0.5rem;
                box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.3);
                max-height: 200px;
                overflow-y: auto;
            }

            .shift-role-dropdown button {
                width: 100%;
                padding: 0.875rem 1rem;
                text-align: left;
                border: none;
                background: transparent;
                color: #e0e0e0;
                font-size: 1rem;
                min-height: 44px;
                display: flex;
                align-items: center;
                gap: 0.75rem;
            }

            .shift-role-dropdown button:hover {
                background-color: #3a3a3a;
            }

            /* Address suggestions dropdown */
            #addressSuggestions {
                position: absolute;
                top: 100%;
                left: 0;
                right: 0;
                z-index: 50;
                background-color: #2a2a2a;
                border: 1px solid #3a3a3a;
                border-radius: 0.5rem;
                box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.3);
                max-height: 280px;
                overflow-y: auto;
                opacity: 0;
                transform: translateY(-10px);
                transition: opacity 0.2s ease, transform 0.2s ease;
            }

            #addressSuggestions:not(.hidden) {
                opacity: 1;
                transform: translateY(0);
            }

            #addressSuggestions > div {
                padding: 0.75rem 1rem;
                cursor: pointer;
                transition: background-color 0.15s ease;
                border-bottom: 1px solid #3a3a3a;
            }

            #addressSuggestions > div:last-child {
                border-bottom: none;
            }

            #addressSuggestions > div:hover,
            #addressSuggestions > div.bg-dark-lighter {
                background-color: #3a3a3a;
            }

            #addressSuggestions button {
                width: 100%;
                padding: 0.875rem 1rem;
                text-align: left;
                border: none;
                background: transparent;
                color: #e0e0e0;
                font-size: 0.875rem;
                min-height: 44px;
                border-bottom: 1px solid #3a3a3a;
            }

            #addressSuggestions button:hover {
                background-color: #3a3a3a;
            }

            #addressSuggestions button:last-child {
                border-bottom: none;
            }

            /* Address input improvements */
            #eventAddress:focus {
                border-color: #3b82f6;
                box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
            }

            #addressLoading {
                transition: opacity 0.2s ease;
            }

            /* Textarea */
            textarea {
                min-height: 120px;
                font-size: 16px; /* Prevents zoom on iOS */
                line-height: 1.5;
            }

            /* Checkbox and radio inputs */
            input[type="checkbox"], input[type="radio"] {
                width: 20px;
                height: 20px;
                margin-right: 0.75rem;
            }

            /* Touch-Ziel nur fuer Auswahl-Labels — das fruehere globale label{}
               schob 44px-Leerraum zwischen jede Feldbeschriftung und ihr Feld */
            label:has(input[type="checkbox"]), label:has(input[type="radio"]) {
                min-height: 44px;
            }
        }

        @media (max-width: 480px) {
            /* Extra small screen button optimizations */
            .time-increase, .time-decrease,
            .employee-increase, .employee-decrease {
                min-width: 44px;
                min-height: 44px;
                padding: 0.625rem;
                font-size: 1rem;
            }

            .shift-role-btn {
                min-height: 44px;
                padding: 0.75rem 0.875rem;
                font-size: 0.875rem;
            }

            .shift-count {
                min-height: 44px;
                font-size: 1rem;
            }

            .time-select {
                min-height: 44px;
                font-size: 0.875rem;
                padding: 0.75rem 0.875rem;
            }

            textarea {
                min-height: 100px;
                font-size: 16px;
            }
        }

        /* Landscape mobile optimization — an der HOEHE festgemacht: moderne Phones sind
           quer 700-950px BREIT, eine max-width-Bedingung feuerte dort praktisch nie */
        @media (max-height: 500px) and (orientation: landscape) {
            .main-container {
                padding: 1rem 0 2rem 0;
            }

            .calculator-container {
                padding: 1rem;
            }

            .calculator-container h2 {
                font-size: 1.125rem;
                margin-bottom: 0.75rem;
            }

            .space-y-6 > * + * {
                margin-top: 1rem;
            }
        }

        /* Additional mobile optimizations */
        @media (max-width: 768px) {
            #shareLinkBtnFloating {
                bottom: max(1.5rem, env(safe-area-inset-bottom, 0px));
                left: max(1.5rem, env(safe-area-inset-left, 0px));
            }

            /* Preis-Chip: Safe-Area + nie breiter als der Platz neben dem FAB */
            #runningPriceChip {
                bottom: max(1rem, env(safe-area-inset-bottom, 0px));
                max-width: calc(100vw - 2rem);
            }

            /* Prevent horizontal scroll */
            body {
                overflow-x: hidden;
            }

            /* Ensure all containers fit within viewport.
               KEIN seitliches Polster mehr: den Aussenrand traegt body.min-h-screen.
               (Die alte padding-Kurzform galt fuer JEDES .max-w-4xl, also auch fuer
               die Spalte und #seo-content. Am Panel des Angebots-Modals blieb sie
               folgenlos — dort gewinnt dessen eigenes p-4 den Gleichstand.) */
            .max-w-4xl {
                max-width: 100%;
            }
            .main-container > .max-w-4xl {
                padding-left: 0;
                padding-right: 0;
            }

            /* Improve touch scrolling */
            .overflow-y-auto {
                -webkit-overflow-scrolling: touch;
            }

            /* Better focus states for mobile */
            .input-field:focus,
            button:focus,
            select:focus {
                outline: 2px solid #4cb3d6;
                outline-offset: 2px;
            }

            /* Improve button spacing */
            .flex.gap-3 {
                gap: 0.75rem;
            }

            /* Schichtkarten: KEIN eigenes Polster (am Desktop haben sie auch keins) —
               das war reine Doppelpolsterung um den ohnehin gepolsterten Karteninhalt.
               Kopf- und Inhaltsblock polstern selbst, zwei Klassen tief gegen .p-4. */
            .shift-card {
                margin-bottom: 1rem;
            }
            .shift-card .shift-content,
            .shift-card .shift-summary-header {
                padding-left: 0.875rem;
                padding-right: 0.875rem;
            }

            /* Streifen INNERHALB des Karteninhalts (Verfuegbarkeit, Besetzungs-Hinweis,
               Teamleitungs-Angebot) legten je 12px auf das Karteninnere obendrauf. */
            .shift-card .shift-availability,
            .shift-card .staffing-hint > div,
            .shift-card .teamleiter-offer > details {
                padding-left: 0.625rem;
                padding-right: 0.625rem;
            }

            /* Karte-in-Karte: Gratis-Wuensche, Prueflisten-Schichten, leerer
               Schichtbereich. Aussen etwas schmaler, innen deutlich schmaler —
               die Zeilen tragen ihren eigenen Rahmen, das reicht als Abgrenzung. */
            .calculator-container .free-perks-card,
            .calculator-container .review-shift-card {
                padding-left: 0.75rem;
                padding-right: 0.75rem;
            }
            .calculator-container .free-perk-option {
                padding-left: 0.625rem;
                padding-right: 0.625rem;
            }
            #shiftEmptyState {
                padding-left: 0.75rem;
                padding-right: 0.75rem;
            }
            /* Reiner Textblock ohne Flaeche und Rahmen — sein p-4 polsterte gegen nichts */
            #step2AddressSummaryBox {
                padding-left: 0;
                padding-right: 0;
            }

            /* Grosse Sektionsboxen tragen p-6 (24px). Per ID ueberbieten wir die
               Utility sicher; #resultsReviewsPanel steckt zusaetzlich IN
               #resultsSection, das waren 48px je Seite allein fuer zwei Rahmen. */
            #resultsSection,
            #serviceOverviewSection,
            #faqSection,
            #seo-content > div,
            /* KEIN 0 fuer das Reviews-Panel: seine eigene Flaeche ist zwar transparent,
               aber #backgroundStaffPhotos malt darin ein randloses Teamfoto (absolute
               inset-0, von padding unberuehrt). Ohne Polster saessen Ueberschrift,
               CTA-Knopf und die angeschnittenen Bewertungskarten direkt auf dessen Kante. */
            #resultsReviewsPanel {
                padding-left: 1.25rem;
                padding-right: 1.25rem;
            }

            /* Dialoge: mx-4 (16px) + p-6/p-8 (24-32px) frassen bis zu 48px je Seite.
               Der Backdrop bringt schon seinen eigenen Rand mit (s. Modal-Block oben).
               `max-width:100%` ist der eigentliche Rettungsanker fuer #thankYouPopup:
               dessen Tafel hat als einzige KEIN w-full, dafuer max-w-md (448px) und
               shrink-0 — sie stand damit auf jedem Handy 44px ueber beide Raender
               hinaus, das Schliessen-X lag ausserhalb des Bildschirms. */
            #saveResumeModal > div,
            #exitIntentModal > div,
            #thankYouPopup > div,
            #pricingModal .bg-dark-light,
            #aiFillModal .bg-dark-light,
            #multiDayModal .bg-dark-light,
            #submitOfferModal .bg-dark-light,
            #callbackModal .bg-dark-light {
                margin-left: auto;
                margin-right: auto;
                max-width: 100%;
                padding-left: 1rem;
                padding-right: 1rem;
            }

            /* Improve date picker mobile experience */
            input[type="date"] {
                min-height: 48px;
                font-size: 16px; /* Prevents zoom on iOS */
            }

            /* Better spacing for transport info */
            .bg-dark-lighter {
                padding: 0.75rem;
                border-radius: 0.5rem;
            }

            /* Improve badge spacing */
            .badge {
                padding: 0.375rem 0.75rem;
                font-size: 0.75rem;
            }
        }

        /* Extra small screen additional optimizations */
        @media (max-width: 480px) {
            /* Even tighter spacing — der Aussenrand bleibt allein bei body.min-h-screen */
            .main-container > .max-w-4xl {
                padding-left: 0;
                padding-right: 0;
            }

            #resultsSection,
            #serviceOverviewSection,
            #faqSection,
            #seo-content > div,
            #resultsReviewsPanel {
                padding-left: 0.75rem;
                padding-right: 0.75rem;
            }

            #saveResumeModal > div,
            #exitIntentModal > div,
            #thankYouPopup > div,
            #pricingModal .bg-dark-light,
            #aiFillModal .bg-dark-light,
            #multiDayModal .bg-dark-light,
            #submitOfferModal .bg-dark-light,
            #callbackModal .bg-dark-light {
                padding-left: 0.875rem;
                padding-right: 0.875rem;
            }

            /* Speichern-FAB nur als Icon — der volle Schriftzug ueberdeckte
               Preis-Chip und Weiter-Knoepfe. Der Knopf sitzt seit 09/2026 unten
               LINKS und traegt .btn-secondary: er stand vorher farbgleich
               (btn-primary-blue) unten rechts direkt auf dem "Weiter"-Knopf. */
            #shareLinkBtnFloating span {
                display: none;
            }
            #shareLinkBtnFloating {
                padding: 0.875rem;
                border-radius: 9999px;
            }
            #shareLinkBtnFloating svg {
                width: 1.25rem;
                height: 1.25rem;
            }
            /* Chip macht dem FAB Platz. Der Chip ist mittig zentriert
               (left-1/2 + -translate-x-1/2), die Reservierung wirkt daher
               BEIDSEITIG je 4.25rem — sie gilt unveraendert, seit der FAB
               von rechts nach links gewandert ist. */
            #runningPriceChip {
                max-width: calc(100vw - 8.5rem);
            }

            /* Smaller gaps */
            .flex.gap-3 {
                gap: 0.5rem;
            }

            /* Tighter shift card spacing (Polster sitzt im Karteninhalt, nicht am Rahmen) */
            .shift-card {
                margin-bottom: 0.75rem;
            }
            .calculator-container .free-perks-card,
            .calculator-container .review-shift-card {
                padding-left: 0.625rem;
                padding-right: 0.625rem;
            }
            .calculator-container .free-perk-option {
                padding-left: 0.5rem;
                padding-right: 0.5rem;
            }
            .shift-card .shift-content,
            .shift-card .shift-summary-header {
                padding-left: 0.625rem;
                padding-right: 0.625rem;
            }

            /* Smaller badges (nur Padding — Schrift unter 12px ist am Handy unlesbar) */
            .badge {
                padding: 0.25rem 0.5rem;
            }
        }

        #configAdvantagesBadge {
            display: none;
            align-items: center;
            gap: 0.35rem;
            margin-bottom: 0.75rem;
            padding: 0.35rem 0.75rem;
            border-radius: 9999px;
            font-size: 0.75rem;
            font-weight: 600;
            letter-spacing: 0.03em;
            text-transform: uppercase;
            color: #a7f3d0;
            background: rgba(16, 185, 129, 0.15);
            border: 1px solid rgba(16, 185, 129, 0.35);
        }

        #configAdvantagesBadge.config-advantages-badge-visible {
            display: inline-flex;
        }

        body.rechner-config-highlight .price-breakdown-row.discounted,
        body.rechner-config-highlight .summary-discount-row {
            outline: 1px solid rgba(16, 185, 129, 0.45);
            background: rgba(16, 185, 129, 0.08);
        }

        .config-pricing-section {
            border-width: 1px;
            border-style: solid;
        }

        .config-pricing-section--discount {
            background: linear-gradient(135deg, rgba(16, 185, 129, 0.14) 0%, rgba(5, 150, 105, 0.06) 100%);
            border-color: rgba(52, 211, 153, 0.45);
            box-shadow: 0 0 0 1px rgba(16, 185, 129, 0.08);
        }

        .config-pricing-section--surcharge {
            background: linear-gradient(135deg, rgba(245, 158, 11, 0.14) 0%, rgba(217, 119, 6, 0.06) 100%);
            border-color: rgba(251, 191, 36, 0.45);
            box-shadow: 0 0 0 1px rgba(245, 158, 11, 0.08);
        }

        .config-pricing-section--discount .config-pricing-section-icon {
            background: rgba(16, 185, 129, 0.22);
            color: #6ee7b7;
        }

        .config-pricing-section--surcharge .config-pricing-section-icon {
            background: rgba(245, 158, 11, 0.22);
            color: #fcd34d;
        }

        .config-pricing-section--discount .config-pricing-section-title {
            color: #a7f3d0;
        }

        .config-pricing-section--surcharge .config-pricing-section-title {
            color: #fde68a;
        }

        .config-pricing-row--discount {
            padding: 0.5rem 0.65rem;
            border-radius: 0.5rem;
            background: rgba(16, 185, 129, 0.1);
            border: 1px solid rgba(52, 211, 153, 0.25);
        }

        .config-pricing-row--discount .config-pricing-row-amount {
            color: #34d399;
        }

        .config-pricing-row--surcharge {
            padding: 0.5rem 0.65rem;
            border-radius: 0.5rem;
            background: rgba(245, 158, 11, 0.1);
            border: 1px solid rgba(251, 191, 36, 0.28);
        }

        .config-pricing-row--surcharge .config-pricing-row-amount {
            color: #fbbf24;
        }

        .config-pricing-savings-card {
            background: linear-gradient(135deg, rgba(16, 185, 129, 0.18) 0%, rgba(5, 150, 105, 0.08) 100%);
            border: 1px solid rgba(52, 211, 153, 0.5);
        }

        body.rechner-config-hide-neukunde [data-neukunde-ui] {
            display: none !important;
        }

        /* ===== Mittlere Phone-Stufe (481-640px): grosse Handys.
           Bewusst als GESCHLOSSENER Bereich statt als weiteres max-width — die
           768er- und 480er-Bloecke stehen in dieser Datei verschachtelt, ein
           ueberlappendes max-width haette je nach Position mal gewonnen, mal
           verloren. So haengt nichts an der Reihenfolge. ===== */
        @media (min-width: 481px) and (max-width: 640px) {
            body.min-h-screen {
                padding-left: 0.625rem;
                padding-right: 0.625rem;
            }
            .main-container .calculator-container {
                padding-left: 0.875rem;
                padding-right: 0.875rem;
            }
            #resultsSection,
            #serviceOverviewSection,
            #faqSection,
            #seo-content > div,
            #resultsReviewsPanel {
                padding-left: 0.875rem;
                padding-right: 0.875rem;
            }
        }

        /* Reduzierte Bewegung: Endlos-Animationen und Transitions stilllegen
           (Carousel-Autoplay + Bubble-Spawner werden zusaetzlich im JS gegated) */
        @media (prefers-reduced-motion: reduce) {
            *, *::before, *::after {
                animation-duration: 0.01ms !important;
                animation-iteration-count: 1 !important;
                transition-duration: 0.01ms !important;
            }
        }

        /* ------------------------------------------------------------------
           Rendering-Entlastung auf Beruehrgeraeten (09/2026)

           .calculator-container umschliesst das GESAMTE Formular und trug einen
           16px-Backdrop-Blur; .result-card ebenso. Ein Backdrop-Filter muss neu
           gerechnet werden, sobald sich der Hintergrund ODER der Inhalt darueber
           aendert — und hinter dem Kasten liegt #background-effect mit den
           dauerhaft animierten .bubble-Elementen (alle 600 ms eine neue, je 6 s
           Laufzeit). Der Blur wurde damit praktisch in jedem Frame ueber einer
           grossen Flaeche neu berechnet, waehrend der Kunde tippt.

           Auf Beruehrgeraeten und schmalen Bildschirmen — wo die Last am
           groessten und die GPU am schwaechsten ist — entfaellt er deshalb.
           Der Hintergrund ist ohnehin nahezu schwarz; damit der Kasten ohne
           Blur nicht durchscheinend wirkt, steigt die Deckkraft von 0.55 auf
           0.92. Am Desktop bleibt der Look unveraendert.
           ------------------------------------------------------------------ */
        @media (max-width: 1024px), (pointer: coarse) {
            .calculator-container,
            .result-card {
                background: rgba(30, 30, 30, 0.92);
                backdrop-filter: none;
                -webkit-backdrop-filter: none;
            }
        }

        /* Wer Bewegung reduziert haben will, bekommt auch keinen Blur ueber
           einer animierten Ebene. */
        @media (prefers-reduced-motion: reduce) {
            .calculator-container,
            .result-card {
                backdrop-filter: none;
                -webkit-backdrop-filter: none;
            }
        }