:root {
            --primary: #B5126C;
            --secondary: #900e55;
            --bg: #f4f7f6;
            --text: #333;
            --card-bg: #fff;
        }
        body {
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
            background: linear-gradient(160deg, #fdf2f8 0%, #f0e4f0 40%, #e8daf0 100%);
            min-height: 100vh;
            color: var(--text);
            margin: 0;
            padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
            display: flex;
            justify-content: center;
            -webkit-tap-highlight-color: transparent;
        }
        .container {
            width: 100%;
            max-width: 600px;
            background: var(--card-bg);
            padding: 20px;
            min-height: 100vh;
            box-sizing: border-box;
            position: relative;
        }

        .top-nav {
            position: fixed;
            top: 0; left: 0; right: 0;
            z-index: 10001;
            display: none;
            grid-template-columns: 1fr auto 1fr;
            align-items: center;
            gap: 8px;
            padding: max(8px, env(safe-area-inset-top)) 14px 8px;
            background: #fff;
            border-bottom: 1px solid #eee;
            box-shadow: 0 1px 4px rgba(0,0,0,0.04);
        }
        body.has-top-nav { padding-top: calc(56px + env(safe-area-inset-top)); }
        #top-nav-logo {
            grid-column: 2;
            justify-self: center;
            /* Die Wortmarke ist breiter als das blosse Zeichen -
               etwas niedriger, damit sie zwischen Abmelden und
               Warenkorb passt. */
            height: 30px; width: auto; max-width: 190px;
            display: block;
            object-fit: contain;
        }
        .top-nav-right {
            grid-column: 3;
            justify-self: end;
            display: inline-flex;
            align-items: center;
            gap: 4px;
        }
        #logout-btn {
            grid-column: 1;
            justify-self: start;
            background: transparent;
            border: none;
            color: var(--primary);
            padding: 6px;
            cursor: pointer;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            transition: color 0.18s ease, transform 0.12s ease;
        }
        #logout-btn svg { width: 26px; height: 26px; }
        #logout-btn:hover { color: var(--secondary); }
        #logout-btn:active { transform: scale(0.92); }
        #cart-btn {
            grid-column: 3;
            justify-self: end;
            background: transparent;
            color: var(--primary);
            border: none;
            padding: 6px;
            cursor: pointer;
            position: relative;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            transition: transform 0.2s ease;
            box-shadow: none;
            width: auto;
            flex-shrink: 0;
        }
        .cart-bag-icon { width: 32px; height: 32px; color: var(--primary); }
        .cart-badge {
            position: absolute;
            top: -2px;
            right: -2px;
            background: var(--primary);
            color: #fff;
            min-width: 18px;
            height: 18px;
            border-radius: 9px;
            font-size: 11px;
            font-weight: 700;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 0 5px;
            box-shadow: 0 1px 3px rgba(0,0,0,0.18);
            line-height: 1;
        }

        .header {
            text-align: center;
            margin-bottom: 30px;
            display: flex;
            flex-direction: column;
            align-items: center;
        }
        .logo {
            max-width: 200px;
            height: auto;
            margin-bottom: 15px;
            cursor: pointer;
        }
        h1 { color: var(--primary); margin: 0; font-size: 24px; font-weight: 800; }
        p.subtitle { color: #666; margin-top: 5px; font-size: 14px; }

        /* Begruessung oben auf der Startseite ("Willkommen, <Name>"). */
        .welcome-greeting {
            margin: 22px 6px 0;
            font-size: 22px;
            font-weight: 700;
            color: var(--primary);
            text-align: center;
            line-height: 1.25;
            overflow-wrap: anywhere;
        }
        .welcome-greeting:empty { display: none; }

        .upload-area { margin-top: 6vh;
            border: 2px dashed var(--primary);
            border-radius: 12px;
            padding: 30px 20px;
            text-align: center;
            background: #fdf2f8;
            display: flex;
            flex-direction: column;
            gap: 15px;
        }

        .upload-row {
            background: #fff;
            border-radius: 8px;
            padding: 15px;
            box-shadow: 0 2px 4px rgba(181,18,108,0.1);
            position: relative;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 10px;
            transition: background-color 0.2s;
        }

        .upload-row:active { transform: scale(0.98); background: #f8f9fa; }

        .upload-row input[type="file"] {
            position: absolute;
            top: 0; left: 0;
            width: 100%; height: 100%;
            opacity: 0;
            cursor: pointer;
            z-index: 10;
        }

        .upload-icon { width: 28px; height: 28px; flex-shrink: 0; color: var(--primary); }
        .cart-btn-icon { width: 20px; height: 20px; vertical-align: middle; }
        .cart-h2-icon { width: 28px; height: 28px; vertical-align: -4px; color: var(--primary); }
        .upload-text { font-size: 16px; font-weight: bold; color: var(--primary); margin: 0; }
        .upload-row.gallery .upload-text { color: #555; }
        .upload-row.gallery { box-shadow: 0 2px 4px rgba(0,0,0,0.05); }

        #preview-container { display: none; margin-top: 20px; text-align: center; }
        #preview-image { max-width: 100%; max-height: 300px; border-radius: 12px; box-shadow: 0 4px 12px rgba(0,0,0,0.15); object-fit: contain; }

        .btn-container { text-align: center; margin-top: 20px; display: flex; flex-direction: column; gap: 10px; }
        button { background-color: var(--primary); color: white; border: none; padding: 16px; font-size: 18px; border-radius: 12px; font-weight: bold; width: 100%; box-shadow: 0 4px 6px rgba(181,18,108,0.2); cursor: pointer; box-sizing: border-box; }
        button:active:not(:disabled) { background-color: var(--secondary); transform: scale(0.98); }
        button:disabled { background-color: #ccc; box-shadow: none; }
        .btn-outline { background-color: transparent; color: var(--primary); border: 2px solid var(--primary); box-shadow: none; }
        .btn-outline:active:not(:disabled) { background-color: #fdf2f8; }
        .btn-with-icon { display: flex; align-items: center; justify-content: center; gap: 8px; }
        .btn-icon { width: 20px; height: 20px; flex-shrink: 0; }
        /* Beschriftung mit eigenem Umbruch: "In den Warenkorb" bleibt zusammen. */
        .btn-text { text-align: center; line-height: 1.3; }
        /* Der Kamera-Umriss steht sonst am zweizeiligen Text an. */
        #add-more-btn { gap: 14px; }
        .btn-outline .btn-icon { color: var(--primary); }

        .btn-danger { background-color: transparent; color: #dc3545; border: 2px solid #dc3545; box-shadow: none; margin-top: 15px; }
        .btn-danger:active:not(:disabled) { background-color: #f8d7da; }

        .loader { display: none; border: 4px solid #f3f3f3; border-top: 4px solid var(--primary); border-radius: 50%; width: 40px; height: 40px; animation: spin 1s linear infinite; margin: 20px auto; }
        @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }

        /* Scan-Animation während Produkterkennung */
        #preview-container { position: relative; overflow: hidden; border-radius: 12px; }
        #preview-container.scanning::before {
            content: '';
            position: absolute; left: 0; right: 0; top: 0;
            height: 3px;
            background: linear-gradient(90deg, transparent, var(--primary) 30%, var(--primary) 70%, transparent);
            box-shadow: 0 0 14px var(--primary), 0 0 6px var(--primary);
            animation: scanBeam 1.8s cubic-bezier(0.65, 0, 0.35, 1) infinite;
            z-index: 5;
            pointer-events: none;
        }
        #preview-container.scanning::after {
            content: '';
            position: absolute; inset: 0;
            background: linear-gradient(180deg, rgba(181,18,108,0.04), rgba(181,18,108,0.10));
            pointer-events: none;
            z-index: 4;
        }
        @keyframes scanBeam {
            0%   { top: 0%;   opacity: 0.2; }
            10%  { opacity: 1; }
            50%  { top: calc(100% - 3px); opacity: 1; }
            90%  { opacity: 1; }
            100% { top: 0%;   opacity: 0.2; }
        }

        /* Drei pulsende Dots im Scan-Status */
        .scan-dots { display: inline-flex; gap: 6px; }
        .scan-dots span {
            width: 8px; height: 8px;
            border-radius: 50%;
            background: var(--primary);
            animation: scanDot 1.2s ease-in-out infinite;
        }
        .scan-dots span:nth-child(2) { animation-delay: 0.15s; }
        .scan-dots span:nth-child(3) { animation-delay: 0.30s; }
        @keyframes scanDot {
            0%, 80%, 100% { transform: scale(0.7); opacity: 0.4; }
            40%           { transform: scale(1.2); opacity: 1; }
        }

        /* ── PWA-Animationen: View-Wechsel, Tabs, Card-Pop ────────────────── */
        /* Universelle Fade-Up bei View-Anzeige (wirkt sobald display: none → block/flex wechselt) */
        @keyframes pwaViewEnter {
            from { opacity: 0; transform: translateY(8px); }
            to   { opacity: 1; transform: translateY(0); }
        }
        @keyframes pwaSlideInRight {
            from { opacity: 0; transform: translateX(24px); }
            to   { opacity: 1; transform: translateX(0); }
        }
        @keyframes pwaSlideInLeft {
            from { opacity: 0; transform: translateX(-24px); }
            to   { opacity: 1; transform: translateX(0); }
        }
        @keyframes pwaCardPop {
            0%   { opacity: 0; transform: scale(0.96) translateY(6px); }
            100% { opacity: 1; transform: scale(1) translateY(0); }
        }

        #main-view,
        #scan-history-view,
        #order-history-view,
        #order-confirmation,
        #logout-view {
            animation: pwaViewEnter 0.28s cubic-bezier(0.22, 0.61, 0.36, 1) both;
        }
        /* Warenkorb von rechts hineinwischen — fühlt sich wie "Weiterleitung" an */
        #cart-view {
            animation: pwaSlideInRight 0.32s cubic-bezier(0.22, 0.61, 0.36, 1) both;
        }
        /* Login von links zurückwischen */
        #login-view {
            animation: pwaSlideInLeft 0.32s cubic-bezier(0.22, 0.61, 0.36, 1) both;
        }
        /* Cart-Items und History-Cards einzeln einblenden (Cascade) */
        .cart-item, .order-card, .scan-history-card {
            animation: pwaCardPop 0.25s cubic-bezier(0.22, 0.61, 0.36, 1) both;
        }
        .cart-item:nth-child(2),   .order-card:nth-child(2),   .scan-history-card:nth-child(2)   { animation-delay: 0.04s; }
        .cart-item:nth-child(3),   .order-card:nth-child(3),   .scan-history-card:nth-child(3)   { animation-delay: 0.08s; }
        .cart-item:nth-child(4),   .order-card:nth-child(4),   .scan-history-card:nth-child(4)   { animation-delay: 0.12s; }
        .cart-item:nth-child(5),   .order-card:nth-child(5),   .scan-history-card:nth-child(5)   { animation-delay: 0.16s; }
        .cart-item:nth-child(n+6), .order-card:nth-child(n+6), .scan-history-card:nth-child(n+6) { animation-delay: 0.18s; }

        /* Bottom-Nav: aktiver Tab-Button schubst nach oben */
        .bottom-nav .nav-btn {
            transition: color 0.18s ease, transform 0.15s ease;
        }
        .bottom-nav .nav-btn.active .nav-icon {
            animation: pwaCardPop 0.25s cubic-bezier(0.22, 0.61, 0.36, 1);
        }
        .bottom-nav .nav-btn:active { transform: scale(0.94); }

        @keyframes loginShake {
            0%, 100% { transform: translateX(0); }
            20%, 60% { transform: translateX(-6px); }
            40%, 80% { transform: translateX(6px); }
        }
        .login-error.shake-anim { animation: loginShake 0.45s ease; }
        .cart-item { transition: box-shadow 0.18s ease, transform 0.18s ease; }
        .cart-item:hover { box-shadow: 0 4px 14px rgba(0,0,0,0.08); transform: translateY(-1px); }

        /* Buttons: leichtes Drücken-Feedback (falls noch nicht durch :active gesetzt) */
        button { transition: transform 0.12s ease, box-shadow 0.15s ease, background-color 0.15s ease; }
        button:not(:disabled):active { transform: scale(0.97); }

        /* Upload-Karten: Hover-Lift + Tap-Bounce + Icon-Wiggle */
        .upload-row {
            transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
        }
        .upload-row:hover {
            transform: translateY(-2px);
            box-shadow: 0 6px 16px rgba(181,18,108,0.12);
        }
        .upload-row:active {
            transform: translateY(0) scale(0.98);
        }
        .upload-row .upload-icon {
            transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
        }
        .upload-row:hover .upload-icon {
            transform: scale(1.15) rotate(-6deg);
        }

        /* Cart-Badge & Cart-Button Bump bei Add */
        @keyframes cartBump {
            0%   { transform: scale(1); }
            30%  { transform: scale(1.25) rotate(-4deg); }
            55%  { transform: scale(0.95) rotate(3deg); }
            80%  { transform: scale(1.08) rotate(-1deg); }
            100% { transform: scale(1) rotate(0); }
        }
        #cart-btn.cart-bump { animation: cartBump 0.55s cubic-bezier(0.34, 1.56, 0.64, 1); }

        /* Fly-to-Cart: Produktbild fliegt zum Warenkorb */
        .fly-clone {
            position: fixed;
            z-index: 9000;
            pointer-events: none;
            border-radius: 12px;
            box-shadow: 0 6px 20px rgba(0,0,0,0.25);
            object-fit: contain;
            background: #fff;
            will-change: transform, opacity;
            transition: transform 0.7s cubic-bezier(0.55, -0.1, 0.85, 0.4), opacity 0.7s ease-in;
        }

        /* "+1" Floating-Indicator */
        @keyframes floatUp {
            0%   { transform: translateY(0) scale(1); opacity: 1; }
            100% { transform: translateY(-40px) scale(1.2); opacity: 0; }
        }
        .plus-one-indicator {
            position: fixed;
            z-index: 9001;
            pointer-events: none;
            font-weight: 700;
            font-size: 18px;
            color: var(--primary);
            text-shadow: 0 2px 4px rgba(255,255,255,0.8);
            animation: floatUp 0.9s ease-out forwards;
        }

        /* Reduced-Motion: alle Animationen deaktivieren */
        @media (prefers-reduced-motion: reduce) {
            #main-view, #cart-view, #login-view, #scan-history-view, #order-history-view,
            #order-confirmation, #logout-view, .cart-item, .order-card, .scan-history-card,
            .bottom-nav .nav-btn.active .nav-icon, #cart-btn.cart-bump, .fly-clone, .plus-one-indicator,
            .upload-row:hover .upload-icon { animation: none !important; transition: none !important; transform: none !important; }
            button:not(:disabled):active { transform: none; }
        }

        #result-container { display: none; margin-top: 20px; border-top: 2px solid #eee; padding-top: 20px; }
        .result-title { margin: 0 0 5px 0; font-size: 20px; color: var(--primary); font-weight: bold; line-height: 1.3; }
        .info-box { background: #f8f9fa; padding: 15px; border-radius: 10px; border-left: 5px solid var(--primary); margin-bottom: 15px; }
        .info-box span { display: block; font-size: 12px; color: #666; text-transform: uppercase; margin-bottom: 5px; }
        .info-box strong { font-size: 20px; color: var(--text); }
        .order-section { background: #fdf2f8; padding: 20px; border-radius: 12px; margin-top: 20px; text-align: center; border: 1px solid #f8bbd0; }
        .quantity-wrapper { display: flex; justify-content: center; align-items: center; gap: 15px; margin-bottom: 20px; }
        .quantity-wrapper label { font-size: 18px; font-weight: bold; color: var(--primary); }
        .quantity-wrapper input { width: 80px; padding: 12px; font-size: 20px; text-align: center; border: 2px solid #ccc; border-radius: 8px; }

        .variant-section {
            padding: 15px;
            border-radius: 10px;
            margin-bottom: 20px;
            text-align: left;
            transition: all 0.3s ease;
        }

        .variant-section.warning-mode {
            background: #fff3cd;
            border: 2px solid #ffeeba;
        }

        .variant-section.success-mode {
            background: #e8f5e9;
            border: 1px solid #c8e6c9;
        }

        .variant-section label {
            font-size: 14px; font-weight: bold; display:block; margin-bottom: 8px;
        }

        .warning-mode label { color: #856404; }
        .success-mode label { color: #2e7d32; font-weight: normal; font-size: 13px; }

        .variant-section select {
            width: 100%; padding: 12px; border-radius: 8px; font-size: 16px; background: #fff;
        }

        .warning-mode select { border: 2px solid #856404; }
        .success-mode select { border: 1px solid #81c784; color: #2e7d32; }

        .not-found-banner { background: #fff3cd; color: #856404; border: 1px solid #ffeeba; padding: 15px; border-radius: 10px; margin-bottom: 20px; text-align: center; font-weight: bold; display: none; }
        .error { color: #dc3545; background: #f8d7da; padding: 15px; border-radius: 10px; margin-top: 20px; display: none; text-align: left; font-size: 14px; word-wrap: break-word; }

        #cart-view { display: none; }
        .cart-item { background: #fff; border: 1px solid #ddd; border-radius: 10px; padding: 15px; margin-bottom: 15px; display: flex; align-items: flex-start; gap: 15px; box-shadow: 0 2px 4px rgba(0,0,0,0.05); }
        .cart-item-img { width: 76px; height: 76px; object-fit: contain; border-radius: 8px; border: 1px solid #eee; flex-shrink: 0; }
        .cart-item-details { flex-grow: 1; min-width: 0; }
        .cart-item-title { margin: 0 0 4px 0; font-size: 15px; font-weight: bold; color: var(--primary); word-break: break-word; line-height: 1.3; }
        .cart-item-nr { margin: 0 0 4px 0; font-size: 12px; color: #666; }
        .cart-item-qty { margin: 0; font-size: 14px; font-weight: bold; }
        .cart-item-price { margin: 0 0 6px 0; font-size: 15px; font-weight: bold; color: #28a745; }
        .cart-item-qty-row { display: flex; align-items: center; gap: 6px; margin: 4px 0 0 0; }
        .cart-qty-btn { width: 30px; height: 30px; border-radius: 6px; border: 1px solid #ccc; background: #f5f5f5 !important; font-size: 18px; font-weight: bold; color: #333; cursor: pointer; display: flex; align-items: center; justify-content: center; padding: 0; min-width: 30px; box-shadow: none !important; }
        .cart-qty-btn:active { background: #e0e0e0 !important; }
        .cart-qty-input { width: 50px; height: 30px; text-align: center; border: 1px solid #ccc; border-radius: 6px; font-size: 14px; font-weight: bold; -moz-appearance: textfield; }
        .cart-qty-input::-webkit-outer-spin-button, .cart-qty-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
        .cart-qty-label { font-size: 13px; color: #666; }
        .cart-staffel-hint { margin: 6px 0 0 0; padding: 4px 8px; background: #fff3cd; border-radius: 6px; font-size: 12px; color: #856404; line-height: 1.3; }
        /* Mengenvorschlag aus der Bestellhistorie: reine Begruendung unter
           dem Feld, damit die vorbelegte Zahl nicht aus dem Nichts kommt. */
        .historie-hinweis {
            font-size: 12px; color: #8a8f94; margin: -6px 0 12px 0; line-height: 1.35;
        }
        #search-qty-sheet .historie-hinweis { font-size: 15px; color: #555; margin: 0 0 14px 0; text-align: center; }

        /* Zubehoer: bewusst leise. Kein Kartenrahmen, keine Signalfarbe, kein
           Vollflaechen-Button — es soll als Hinweis lesbar sein, nicht als Werbung. */
        .zubehoer-block { margin: 4px 0 14px 0; padding: 12px 2px 2px 2px; border-top: 1px solid #e8e8e8; }
        .zubehoer-titel { font-size: 12px; letter-spacing: .04em; text-transform: uppercase; color: #8a8f94; margin-bottom: 8px; font-weight: 600; }
        .zubehoer-zeile { display: flex; align-items: center; gap: 10px; padding: 6px 0; }
        .zubehoer-bild { width: 36px; height: 36px; object-fit: contain; border-radius: 6px; border: 1px solid #eee; flex-shrink: 0; background: #fff; }
        .zubehoer-text { flex: 1; min-width: 0; }
        .zubehoer-name { font-size: 13px; color: #3a3d41; line-height: 1.3; }
        .zubehoer-meta { font-size: 11px; color: #9aa0a6; margin-top: 1px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
        .zubehoer-preis { color: #6d7278; }
        .zubehoer-add {
            flex-shrink: 0; width: 30px; height: 30px; border-radius: 50%; padding: 0;
            display: inline-flex; align-items: center; justify-content: center;
            border: 1px solid #d8d3d6; background: #fff; color: #7a7f85;
            cursor: pointer; min-width: 0; box-shadow: none;
        }
        .zubehoer-add:hover { border-color: var(--primary); color: var(--primary); }
        .zubehoer-add:active { background: #faf2f6; }

        .cart-summary { background: #f8f9fa; border: 2px solid #ddd; border-radius: 10px; padding: 15px; margin-top: 5px; }
        .cart-summary-row { display: flex; justify-content: space-between; align-items: center; padding: 4px 0; font-size: 14px; color: #333; }
        .cart-summary-total { border-top: 2px solid var(--primary); padding-top: 8px; margin-top: 6px; font-size: 17px; font-weight: bold; color: var(--primary); }
        .cart-summary-note { font-size: 12px; color: #888; font-style: italic; padding-top: 4px; }
        .cart-item-delete { background: none !important; border: none !important; color: var(--primary); padding: 0 5px; box-shadow: none !important; width: auto; min-width: 0; flex-shrink: 0; cursor: pointer; display: flex; align-items: center; justify-content: center; }
        .cart-item-delete svg { width: 22px; height: 22px; }
        .empty-cart-msg { text-align: center; color: #888; padding: 40px 20px; font-size: 16px; }

        #multi-product-list > div:active { transform: scale(0.98); background: #f8f9fa !important; }

        .cart-header-container {
            display: flex;
            align-items: center;
            border-bottom: 2px solid #eee;
            padding-bottom: 10px;
            margin-bottom: 20px;
        }

        .cart-header-container h2 {
            color: var(--primary);
            margin: 0;
            flex-grow: 1;
        }

        .cart-logo-small {
            height: 30px;
            cursor: pointer;
        }


/* Versteckt den Hinweis, wenn die App als PWA über das Icon geöffnet wird */
@media all and (display-mode: standalone) {
    #install-instructions {
        display: none !important;
    }
}
@media all and (display-mode: fullscreen) {
    #install-instructions {
        display: none !important;
    }
}

/* PWA Install Banner */
#pwa-banner {
    display: none;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 999999;
    padding: 0 12px max(12px, env(safe-area-inset-bottom)) 12px;
    pointer-events: none;
}
#pwa-banner.visible {
    display: block;
}
#pwa-banner-inner {
    pointer-events: auto;
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 -2px 20px rgba(0,0,0,0.15);
    padding: 16px;
    display: flex;
    align-items: center;
    gap: 14px;
    max-width: 500px;
    margin: 0 auto;
    position: relative;
}
#pwa-banner-icon {
    width: 52px;
    height: 52px;
    border-radius: 12px;
    border: 1px solid #eee;
    flex-shrink: 0;
    background: #fff;
}
#pwa-banner-text {
    flex: 1;
    font-size: 14px;
    line-height: 1.45;
    color: #222;
}
#pwa-banner-text strong {
    display: block;
    font-size: 15px;
    color: #BD0068;
    margin-bottom: 3px;
}
#pwa-banner-close {
    position: absolute;
    top: 4px;
    right: 4px;
    width: 26px;
    height: 26px;
    border: 1.5px solid #BD0068;
    border-radius: 50%;
    background: #fff;
    color: #BD0068;
    font-size: 15px;
    font-weight: 600;
    line-height: 1;
    cursor: pointer;
    padding: 0;
    min-width: 44px;
    min-height: 44px;
    box-sizing: content-box;
    margin: -9px -9px 0 0;
    display: flex;
    align-items: center;
    justify-content: center;
}
#pwa-banner-btn {
    background: #BD0068;
    color: #fff;
    border: none;
    padding: 10px 20px;
    border-radius: 20px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    flex-shrink: 0;
}
/* Pfeil unten mittig, zeigt auf Safari Share-Button */
#pwa-banner-arrow {
    display: none;
    position: absolute;
    bottom: -10px;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-left: 12px solid transparent;
    border-right: 12px solid transparent;
    border-top: 10px solid #fff;
    filter: drop-shadow(0 2px 3px rgba(0,0,0,0.1));
}

/* Toast Notifications */
.toast {
    position: fixed;
    bottom: 80px;
    left: 16px;
    right: 16px;
    max-width: 500px;
    margin: 0 auto;
    padding: 14px 18px;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 500;
    text-align: center;
    z-index: 100000;
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.3s, transform 0.3s;
    pointer-events: none;
}
.toast.show {
    opacity: 1;
    transform: translateY(0);
}
.toast.success {
    background: #d4edda;
    color: #155724;
    border: 1px solid #c3e6cb;
}
.toast.warning {
    background: #fff3cd;
    color: #856404;
    border: 1px solid #ffeaa7;
}
.toast.error {
    background: #f8d7da;
    color: #721c24;
    border: 1px solid #f5c6cb;
}

/* Scan-Historie */
.history-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 12px;
    border-bottom: 1px solid #eee;
    font-size: 14px;
}
.history-item:last-child { border-bottom: none; }
.history-name { color: var(--text); flex: 1; }
.history-nr { color: var(--primary); font-weight: 600; margin-left: 8px; white-space: nowrap; }
.history-cart-btn {
    background: var(--primary);
    color: white;
    border: none;
    border-radius: 50%;
    width: 30px;
    height: 30px;
    font-size: 14px;
    cursor: pointer;
    margin-left: 8px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s, transform 0.1s;
    padding: 0;
}
.history-cart-btn:hover { background: var(--secondary); }
.history-cart-btn:active { transform: scale(0.9); }

/* ── Login View (Staging) ─────────────────────────────────────── */
#login-view {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(160deg, #fdf2f8 0%, #f0e4f0 40%, #e8daf0 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    /* Safe-Area respektieren */
    padding-top:    max(24px, calc(env(safe-area-inset-top) + 24px));
    padding-bottom: max(24px, calc(env(safe-area-inset-bottom) + 24px));
    padding-left:   max(16px, env(safe-area-inset-left));
    padding-right:  max(16px, env(safe-area-inset-right));
    box-sizing: border-box;
    z-index: 10000;
    overflow-y: auto;
}

/* Goodbye-View ebenso */
#logout-view {
    padding-top:    max(24px, calc(env(safe-area-inset-top) + 24px)) !important;
    padding-bottom: max(24px, calc(env(safe-area-inset-bottom) + 24px)) !important;
    padding-left:   max(16px, env(safe-area-inset-left)) !important;
    padding-right:  max(16px, env(safe-area-inset-right)) !important;
    box-sizing: border-box;
}

.login-container {
    width: 100%;
    max-width: 400px;
    animation: loginFadeIn 0.5s ease-out;
}

@keyframes loginFadeIn {
    from { opacity: 0; transform: translateY(16px); }
    to { opacity: 1; transform: translateY(0); }
}

.login-logo {
    text-align: center;
    margin-bottom: 28px;
}

.login-logo-img {
    /* Nur noch die Bildmarke - der Schriftzug steht jetzt als Text darunter,
       damit er sich aendern laesst, ohne die Vektordatei anzufassen. */
    max-width: 132px;
    height: auto;
    margin-bottom: 10px;
}

/* ── Wortmarke ────────────────────────────────────────────────────────────
   Harry Fat, eingedampft auf die sechs Buchstaben von "KaniScan" (K a n i S c).
   Aus 37980 Byte werden so 1068 - und es verlaesst nur das den Server, was
   auch auf dem Schirm steht, keine vollstaendige Schriftdatei.
   Ausgangsdatei: Harry-Fat.otf                                             */
@font-face {
    font-family: "Harry Fat";
    src: url(data:font/woff2;base64,d09GMk9UVE8AAAQsAAwAAAAABxgAAAPgAAIAAAAAAAAAAAAAAAAAAAAAAAAAAAAADYRhG4FIHGAGYABcEQgBNgIkAyAEBgWCWAcgG0QGKB6D424JymQyxfjzwaSuxMN/a6/3zezfAKOKUEBFdgjGVEboCFuUgI5dFaueCgN41JYuZ8JZaB2uZhGiTi1uJEfcnxVTH5qN9D+Av+2pUznZmICNTZbzgEVkzc5B1QesdRv+lcotPnUBhnrFas8DXDCpuTU2aPQRDBqHLAMd+/Tq7cOP0XIoEoogNGNri2EcX41e0F/sjsQehNhTh37QEpGRBuikwXhBi1+LmxxKDDN/fDdDswnJg5C5j502m7V3vCVeTfXQ+sXFwLM/jtCNy5+IFM0wg1UNtYaFBdt3kWh/jQ9/fbdNrkdP3tuaVT+aE/Yx4/jq8/9GiHkugoQYJdJk1QmFbN4Y930JKWFPZC4jL38P+s9SuG8bC33hjgLS8R05eCtwLfwAAe7JsacCR+BTcnLcjyhIp0Duf8pzNR2/WF4+O3Pp3m6HDq478uJi1mQa+ipXrxVOi+6O1Rgt/yax+V3M+UbmcoN83Y09dRndsoXKlLARyzck0LivcvI7/h9QP+9AT5pc9cMGRRSYBnzHJmwcMGC/nvw8AeS1e1sm01VgUOIaUFJxGQdOnT4gwv6M2LjM+xgSO8GUTvtAm6UILD6+/8Cm43cZ9DnY0ssPM5j+6wcWhnzzo5nau3Xr3r0FW3m+oIDntxbsZS63NlNiMLZrDVaSebARxlB4DNjBGCV09ryBCSzx5HBnuvAdh7a2Hti/rCCNJrEWHotLqVeht5ydQ0JcnK+HvNy/bsVkuvm9ErNvqLyydTu2rd+wfduG0vzc0vJ8hgTOTsyhEIFaszxIV7mwOGR3vlIoQnZX+OpSZEcG7xB3Waicq6BfrpAQqiXHyHBKNYVSHv3/okJeaXrmNun/n8iSEEq4qGAxo3ABVsHClzCM/Xkcns5JJ/niakRer7QZABIkLPwQjQjHh9IvPpIVsSOPUSHdT5OwqY6J91gtKFvDU9sPcQg9NlppPvdvB5LfRpRRFDfTsmLYpZiQi/ZovuJlts0aVburY6dYvBwFSv8LrNlst8pKSywoXIH431ETvyfRuXgjM9Pg81eF8leIF59EBJ+/Rf7sOPBW6aa8CqUEAv/pcwtr/+omhup4hU7VD8YlpnjHECwyuKMhNuuMJKRhH1SNKidIRaFGbALU0GqKmjTaUrNJWw4Lo1rR61ZVpVZfBCtTrkGlAnnyVbPaaBjLkRPWUHIFc7mUrYFVnHyCzBqUE4pTpkYpG0GlqlpzmDDB7OGBihWzNiqqUCYoTEDVEtjYG4FXqZJRHF61GII8NYrLgGXP8TjtbaQ4HO9KalgjwQmsQJlS1rSuoieVnf7vbQEA) format("woff2");
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

.login-wordmark {
    margin: 0;
    /* Ersatzschrift bewusst fett: faellt die Schrift aus, bleibt es eine Wortmarke */
    font-family: "Harry Fat", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    font-size: 36px;
    font-weight: 400;
    color: #be0068;          /* exakt das Magenta des K aus der Bildmarke */
    line-height: 1.15;
}

/* Wortmarke auf dem Anmeldebildschirm: dasselbe Zeichen wie in der
   Kopfzeile, nur groesser. Zeichen und Schriftzug sind ein Element -
   sie koennen dadurch nicht mehr gegeneinander verrutschen. */
.login-lockup {
    display: block;
    width: 100%;
    max-width: 280px;
    height: auto;
    margin: 0 auto 12px;
}

.login-title {
    color: var(--primary);
    margin: 0;
    font-size: 24px;
    font-weight: 800;
}

.login-subtitle {
    color: #666;
    margin: 5px 0 0 0;
    font-size: 14px;
    font-weight: 400;
}

.login-form {
    background: #fdf2f8;
    border: 2px dashed var(--primary);
    border-radius: 12px;
    padding: 28px 24px;
    width: 100%;
    box-sizing: border-box;
}

.login-heading {
    color: var(--primary);
    font-size: 20px;
    font-weight: 700;
    margin: 0 0 24px 0;
    text-align: center;
}

.login-field {
    margin-bottom: 18px;
}

.login-field label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: #555;
    margin-bottom: 6px;
}

.login-field input {
    width: 100%;
    padding: 15px;
    font-size: 16px;
    border: none;
    border-radius: 8px;
    box-sizing: border-box;
    outline: none;
    transition: box-shadow 0.2s;
    -webkit-appearance: none;
    background: #fff;
    box-shadow: 0 2px 4px rgba(181,18,108,0.1);
}

.login-field input:focus {
    box-shadow: 0 2px 8px rgba(181,18,108,0.2);
}

/* Passwort-Feld mit integriertem Auge: Wrapper sieht aus wie das Input,
   Input selbst ist randlos, Auge ist Flex-Sibling am Ende. */
.login-pw-wrap {
    display: flex;
    align-items: stretch;
    width: 100%;
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(181,18,108,0.1);
    transition: box-shadow 0.2s;
    overflow: hidden;
    box-sizing: border-box;
}
.login-pw-wrap:focus-within {
    box-shadow: 0 2px 8px rgba(181,18,108,0.2);
}
.login-pw-wrap input#login-password {
    flex: 1;
    min-width: 0;
    background: transparent;
    box-shadow: none !important;
    border: none;
    padding: 15px;
    font-size: 16px;
    outline: none;
    border-radius: 0;
    -webkit-appearance: none;
}
.login-pw-wrap input#login-password:focus { box-shadow: none !important; }
#login-pw-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    background: transparent;
    border: none;
    cursor: pointer;
    color: #888;
    padding: 0;
    flex-shrink: 0;
    transition: color 0.15s;
}
#login-pw-toggle:hover { color: var(--primary, #B5126C); }
#login-pw-icon { width: 20px; height: 20px; }

.login-error {
    background: #f8d7da;
    color: #721c24;
    border: 1px solid #f5c6cb;
    border-radius: 10px;
    padding: 12px 16px;
    font-size: 14px;
    margin-bottom: 16px;
    text-align: center;
}

.login-btn {
    width: 100%;
    padding: 16px;
    background: var(--primary);
    color: #fff;
    border: none;
    border-radius: 12px;
    font-size: 18px;
    font-weight: 700;
    cursor: pointer;
    margin-top: 8px;
    box-shadow: 0 4px 6px rgba(181,18,108,0.2);
    transition: transform 0.1s;
}

.login-btn:active:not(:disabled) {
    background: var(--secondary);
    transform: scale(0.98);
}

.login-btn:disabled {
    background: #ccc;
    box-shadow: none;
    cursor: default;
}

.login-register-link {
    text-align: center;
    font-size: 14px;
    color: #888;
    margin: 20px 0 0 0;
}

.login-register-link a {
    color: var(--primary);
    font-weight: 600;
    text-decoration: none;
}

.login-register-link a:hover {
    text-decoration: underline;
}

/* Logout Button in top-nav */
.logout-btn {
    background: transparent;
    color: #888;
    border: 1.5px solid #ddd;
    padding: 10px 16px;
    border-radius: 25px;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    width: auto;
    box-shadow: none;
    min-width: 0;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s, color 0.2s;
}

.logout-btn:hover {
    background: #f5f5f5;
    color: #555;
}

.logout-btn:active {
    background: #eee !important;
    transform: scale(0.97);
}
/* Push-Button in top-nav — Glocke + kompaktes Label rechts neben Warenkorb */
#push-enable-btn {
    background: rgba(181,18,108,0.08);
    color: var(--primary);
    border: 1px solid rgba(181,18,108,0.25);
    border-radius: 18px;
    padding: 5px 10px 5px 8px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 11px;
    font-weight: 600;
    line-height: 1.15;
    text-align: left;
    max-width: 130px;
    transition: background 0.2s, transform 0.15s;
}
#push-enable-btn:hover { background: rgba(181,18,108,0.16); }
#push-enable-btn .push-icon { width: 16px; height: 16px; flex-shrink: 0; }
#push-enable-btn .push-label {
    display: inline-block;
    white-space: normal;
    word-break: break-word;
}
/* Auf sehr engen Viewports nur die Glocke zeigen */
@media (max-width: 380px) {
    #push-enable-btn .push-label { display: none; }
    #push-enable-btn {
        background: transparent;
        border: none;
        border-radius: 50%;
        padding: 6px;
        max-width: none;
    }
    #push-enable-btn .push-icon { width: 22px; height: 22px; }
}
#push-enable-btn.push-active { background: var(--primary); color: #fff; }
/* ── End Login View ───────────────────────────────────────────── */

/* ── Geführte PWA-Installation ───────────────────────────────── */
#pwa-install-fab-wrap {
    position: fixed;
    right: 12px;
    bottom: calc(82px + env(safe-area-inset-bottom));
    z-index: 9998;
    display: none;
    max-width: calc(100vw - 24px);
    animation: pwa-fab-in 0.4s ease-out;
}
#pwa-install-fab-wrap.visible { display: inline-block; }

#pwa-install-fab {
    background: var(--primary);
    color: #fff;
    border: none;
    border-radius: 24px;
    padding: 8px 14px 8px 10px;
    box-shadow: 0 4px 14px rgba(189,0,104,0.35);
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    max-width: 100%;
}
#pwa-install-fab svg { width: 18px; height: 18px; flex-shrink: 0; }

#pwa-fab-close {
    position: absolute;
    top: -8px;
    right: -8px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: none;
    background: #fff;
    color: #555;
    font-size: 16px;
    line-height: 1;
    cursor: pointer;
    box-shadow: 0 2px 6px rgba(0,0,0,0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
}
#pwa-fab-close:hover { color: #000; }

@keyframes pwa-fab-in {
    from { transform: translateY(20px) scale(0.9); opacity: 0; }
    to   { transform: none; opacity: 1; }
}

#pwa-install-modal {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.55);
    z-index: 100000;
    align-items: flex-end;
    justify-content: center;
    animation: pwa-modal-fade 0.25s ease-out;
}
#pwa-install-modal.visible { display: flex; }
@keyframes pwa-modal-fade { from { opacity: 0; } to { opacity: 1; } }

#pwa-install-sheet {
    background: #fff;
    width: 100%;
    max-width: 520px;
    border-radius: 18px 18px 0 0;
    padding: 18px 20px max(20px, env(safe-area-inset-bottom)) 20px;
    max-height: 88vh;
    overflow-y: auto;
    animation: pwa-sheet-up 0.32s cubic-bezier(0.22,1,0.36,1);
    box-shadow: 0 -8px 30px rgba(0,0,0,0.25);
}
@keyframes pwa-sheet-up { from { transform: translateY(100%); } to { transform: none; } }
@media (min-width: 600px) {
    #pwa-install-modal { align-items: center; }
    #pwa-install-sheet { border-radius: 18px; max-width: 460px; }
}

.pwa-sheet-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 14px;
}
.pwa-sheet-head h3 {
    margin: 0;
    font-size: 18px;
    color: var(--primary);
    font-weight: 700;
}
.pwa-sheet-close {
    background: transparent;
    border: none;
    color: #999;
    font-size: 22px;
    line-height: 1;
    padding: 2px 6px;
    cursor: pointer;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.pwa-sheet-intro {
    font-size: 14px;
    color: #444;
    margin: 0 0 16px;
    line-height: 1.5;
}
.pwa-sheet-intro b { color: var(--primary); }

.pwa-step {
    display: flex;
    gap: 12px;
    margin-bottom: 14px;
    align-items: flex-start;
}
.pwa-step-num {
    flex-shrink: 0;
    width: 28px; height: 28px;
    border-radius: 50%;
    background: var(--primary);
    color: #fff;
    font-weight: 700;
    font-size: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.pwa-step-body {
    flex: 1;
    font-size: 14px;
    line-height: 1.5;
    color: #222;
    padding-top: 3px;
}
.pwa-step-body svg.pwa-inline-icon {
    width: 18px; height: 18px;
    vertical-align: -4px;
    color: var(--primary);
    margin: 0 2px;
}
.pwa-step-body .pwa-kbd {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 6px;
    background: #f4f4f4;
    border: 1px solid #ddd;
    font-size: 13px;
    font-weight: 600;
    color: #333;
    margin: 0 1px;
}

.pwa-sheet-cta {
    width: 100%;
    background: var(--primary);
    color: #fff;
    border: none;
    padding: 13px 20px;
    border-radius: 10px;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    margin-top: 6px;
}
.pwa-sheet-cta:disabled { background: #ccc; cursor: default; }
.pwa-sheet-secondary {
    width: 100%;
    background: #fff;
    color: var(--primary);
    border: 1.5px solid var(--primary);
    padding: 11px 20px;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    margin-top: 8px;
}
.pwa-note {
    margin-top: 12px;
    padding: 10px 12px;
    background: #fff5fa;
    border: 1px solid #ffd5e8;
    border-radius: 8px;
    font-size: 13px;
    line-height: 1.45;
    color: #6a0040;
}
/* ── End PWA-Installation ─────────────────────────────────────── */

/* ── Shopware Sync-Indikator ─────────────────────────────────── */
#sw-sync-indicator {
    display: inline-block;
    font-size: 11px;
    font-weight: 600;
    padding: 1px 7px;
    border-radius: 8px;
    vertical-align: middle;
    margin-left: 6px;
    opacity: 0;
    transition: opacity 0.3s;
}
#sw-sync-indicator[data-state="syncing"] { opacity: 1; color: #888; background: #f4f4f4; }
#sw-sync-indicator[data-state="ok"]      { opacity: 1; color: #2e7d32; background: #e8f5e9; }
#sw-sync-indicator[data-state="error"]   { opacity: 1; color: var(--primary); background: #fff0f5; }
#sw-sync-indicator[data-state="idle"]    { opacity: 0; }
/* ── End Shopware Sync-Indikator ─────────────────────────────── */

/* ── Manuelle Produktsuche im Scanner ───────────────────────── */
#manual-search-section {
    margin: 14px 0 0;
    position: relative;
}
/* "— oder —" Trenner */
#manual-search-section::before {
    content: "— oder —";
    display: block;
    text-align: center;
    font-size: 12px;
    color: #bbb;
    letter-spacing: .04em;
    margin-bottom: 10px;
}
.manual-search-wrap {
    display: flex; align-items: center; gap: 8px;
    border: 1.5px solid #e0e0e0; border-radius: 12px;
    padding: 11px 14px; background: #fff;
    transition: border-color .2s, box-shadow .2s;
}
.manual-search-wrap:focus-within {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(181,18,108,.08);
}
.manual-search-icon { color: #bbb; flex-shrink: 0; }
.manual-search-wrap:focus-within .manual-search-icon { color: var(--primary); }
#manual-search-input {
    flex: 1; border: none; outline: none;
    font-size: 15px; background: transparent; min-width: 0;
    color: var(--text);
}
#manual-search-input::placeholder { color: #bbb; }
.manual-search-clear {
    background: none; border: none; cursor: pointer;
    width: 20px; height: 20px; border-radius: 50%;
    background: #e8e8e8; color: #888;
    font-size: 12px; line-height: 20px; text-align: center;
    padding: 0; flex-shrink: 0;
    transition: background .15s;
}
.manual-search-clear:active { background: #d0d0d0; }

/* Ergebnisliste */
.manual-search-results {
    list-style: none; margin: 6px 0 0; padding: 0;
    background: #fff;
    border: 1.5px solid #ececec;
    border-radius: 12px;
    overflow: hidden;          /* kein overflow-y scroll — Seite scrollt */
    box-shadow: 0 6px 20px rgba(0,0,0,.07);
}
.search-result-item {
    display: flex; align-items: center; gap: 12px;
    padding: 10px 14px;
    border-bottom: 1px solid #f5f5f5;
    transition: background .12s;
}
.search-result-item:last-child { border-bottom: none; }
.search-result-item:active { background: #fdf3f8; }
.search-result-img {
    width: 44px; height: 44px; object-fit: contain;
    border-radius: 6px; flex-shrink: 0;
    background: #f8f8f8; border: 1px solid #f0f0f0;
}
.search-result-info {
    flex: 1; min-width: 0;
    display: flex; flex-direction: column; gap: 2px;
}
.search-result-name {
    font-size: 13px; font-weight: 600;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    color: var(--text);
}
.search-result-nr {
    font-size: 11px; color: #aaa;
    font-variant-numeric: tabular-nums;
}
.search-add-btn {
    width: 34px; height: 34px; flex-shrink: 0;
    border-radius: 50%; border: none; cursor: pointer;
    background: var(--primary);
    position: relative;
    transition: transform .1s, background .2s;
    box-shadow: 0 2px 6px rgba(181,18,108,.25);
    padding: 0;
}
/* + Icon via CSS — kein SVG nötig */
.search-add-btn::before,
.search-add-btn::after {
    content: '';
    position: absolute;
    background: #fff;
    border-radius: 2px;
    top: 50%; left: 50%;
    transition: opacity .15s, transform .15s;
}
.search-add-btn::before { width: 2px; height: 14px; transform: translate(-50%, -50%); }
.search-add-btn::after  { width: 14px; height: 2px;  transform: translate(-50%, -50%); }
/* ✓ Zustand */
.search-add-btn--added {
    background: #2e7d32;
    box-shadow: 0 2px 6px rgba(46,125,50,.3);
}
.search-add-btn--added::before {
    content: '✓';
    width: auto; height: auto;
    background: transparent;
    color: #fff;
    font-size: 17px;
    font-weight: 700;
    line-height: 1;
    transform: translate(-50%, -50%);
}
.search-add-btn--added::after { opacity: 0; }
.search-add-btn:active { transform: scale(.88); }
.search-no-result {
    padding: 16px; text-align: center;
    color: #aaa; font-size: 13px;
}
/* ── End Manuelle Produktsuche ──────────────────────────────── */

/* ── Mengen-Modal (Produktsuche) ─────────────────────────────── */
#search-qty-modal {
    display: none;
    position: fixed; inset: 0;
    background: rgba(0,0,0,0.45);
    z-index: 1200;
    align-items: flex-end;
    justify-content: center;
}
#search-qty-modal.visible { display: flex; }
#search-qty-sheet {
    background: #fff;
    width: 100%; max-width: 480px;
    border-radius: 18px 18px 0 0;
    padding: 20px 20px max(20px, env(safe-area-inset-bottom)) 20px;
    animation: pwa-sheet-up 0.28s cubic-bezier(0.22,1,0.36,1);
}
.search-qty-product {
    display: flex; align-items: center; gap: 14px;
    padding: 12px 0 18px;
    border-bottom: 1px solid #f0f0f0;
    margin-bottom: 20px;
}
#search-qty-img {
    width: 56px; height: 56px; object-fit: contain;
    border-radius: 8px; border: 1px solid #f0f0f0;
    background: #fafafa; flex-shrink: 0;
}
.search-qty-product-info { flex: 1; min-width: 0; }
.search-qty-product-info #search-qty-name {
    margin: 0 0 3px; font-size: 14px; font-weight: 700;
    color: var(--text); line-height: 1.3;
}
.search-qty-product-info #search-qty-nr {
    margin: 0; font-size: 12px; color: #aaa;
}
.search-qty-controls {
    justify-content: center;
    margin-bottom: 20px;
    gap: 10px;
    position: relative;
}
.search-qty-controls .cart-qty-btn {
    width: 42px; height: 42px; font-size: 20px;
}
.search-qty-controls .cart-qty-input {
    width: 64px; height: 42px; font-size: 18px; text-align: center;
}
/* "Stueck" aus dem Flexfluss loesen, sonst schoebe es die -/+/Input-Gruppe
   nach links und die Auswahl saesse nicht mittig im Modal. */
.search-qty-controls .cart-qty-label {
    font-size: 15px;
    position: absolute;
    right: 16px;
    top: 50%;
    transform: translateY(-50%);
}
#search-qty-confirm {
    width: 100%;
    padding: 14px;
    background: var(--primary); color: #fff;
    border: none; border-radius: 12px;
    font-size: 16px; font-weight: 700;
    cursor: pointer;
    transition: opacity .15s;
}
#search-qty-confirm:active { opacity: .85; }
/* ── End Mengen-Modal ────────────────────────────────────────── */

/* ── Checkout-Entscheidung (abschließen vs. Handelsvertreter) ── */
.checkout-decision-overlay {
    position: fixed; inset: 0; z-index: 100001;
    background: rgba(0,0,0,0.55);
    display: flex; align-items: center; justify-content: center;
    padding: 20px;
}
.checkout-decision-box {
    background: #fff; border-radius: 16px; padding: 24px 20px;
    width: 100%; max-width: 360px; box-shadow: 0 10px 40px rgba(0,0,0,0.3);
    text-align: center;
}
.checkout-decision-box h3 { margin: 0 0 6px; font-size: 1.15rem; color: #222; }
.checkout-decision-box p { margin: 0 0 18px; font-size: .9rem; color: #777; }
.cd-btn {
    display: block; width: 100%; margin: 8px 0; padding: 13px 16px;
    border: none; border-radius: 10px; font-size: 15px; font-weight: 600;
    cursor: pointer; line-height: 1.25; transition: opacity .15s, background .2s;
}
.cd-btn-primary { background: var(--primary); color: #fff; }
.cd-btn-hv { background: #f6eef3; color: var(--primary); border: 1.5px solid var(--primary); }
.cd-btn-hv[disabled] { background: #f3f3f3; color: #aaa; border: 1.5px solid #ddd; cursor: not-allowed; }
/* Merker direkt unter dem Ansprechpartner-Knopf - er gehoert zu dieser
   Entscheidung, nicht zum Abschluss daneben. Bewusst leise gehalten. */
.cd-merken {
    display: flex; align-items: center; gap: 9px;
    margin: -4px 2px 12px; padding: 0 2px;
    font-size: 13px; color: #666; line-height: 1.35;
    text-align: left; cursor: pointer;
}
.cd-merken input { width: 17px; height: 17px; flex-shrink: 0; accent-color: var(--primary); margin: 0; }
.cd-btn-cancel { background: none; color: #888; font-weight: 500; padding: 8px; }
.cd-btn .cd-sub { display: block; font-size: 12px; font-weight: 400; opacity: .8; margin-top: 2px; }
.cd-btn:active:not([disabled]) { opacity: .85; }
/* ── End Checkout-Entscheidung ────────────────────────────────── */