/* Theme-Variablen */
        :root {
        --bg:            #0b0c0f;
        --panel:         #11131a;
        --panel-elev:    #151827;
        --border:        #262a40;
        --text:          #e6e8ef;
        --muted:         #a7acc0;
        --accent:        #8d1b8b;
        --accent-ink:    #0b1027;
        --shadow:        0 6px 24px rgba(0,0,0,.35), 0 1px 0 rgba(255,255,255,.02) inset;
        --radius-lg:     16px;
        --radius-sm:     10px;
        --gap:           10px;
        --font:          din-2014, sans-serif, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji";
        --nohra-mic1:      #8d1b8b;
        --nohra-mic2:      #7c3af8;
        --user-back:       #eee;
        --user-text:       #333;
        --user-t-border:   #eee;
        --nohra-back:      none;
        --nohra-b-border:  none;
        --nohra-text:      black;
        }

        @media (prefers-color-scheme: light) {
        :root {
            --bg:          #f7f8fb;
            --panel:       #ffffff;
            --panel-elev:  #ffffff;
            --border:      #e5e8f0;
            --text:        #0b1020;
            --muted:       #5a6278;
            --accent:      #8d1b8b;
            --accent-ink:  #ffffff;
            --shadow:      0 8px 28px rgba(15,20,35,.08);
        }
        }

        .nohra-container {
            position: relative;
            min-height: 150px;
            text-align: center;
            margin-top: 15px;
            padding-bottom: 30px;
        }

        @media (max-width: 900px) {
            .nohra-container {
                min-height: 100px;
                text-align: center;
                height: auto;
                max-height: 55dvh;
            }
        }

        .nohra-head {
            color: #000;
            font-family: din-2014, sans-serif;
            font-weight: 200;
            font-style: normal;
            font-size: 24px;
            opacity: 1;
            transition: opacity 0.5s ease;
        }

        @media (max-width: 900px) {
            .nohra-head {
                font-size: 20px;
            }
        }

        .nohra-head-hidden {
            display: none;
        }

        .nohra-subhead {
            color: #ccc;
            font-family: din-2014, sans-serif;
            font-weight: 400;
            font-style: normal;
            padding-top: 25px;
            font-size: 16px;
            opacity: 1;
            transition: opacity 0.5s ease;
        }

        .nohra-subhead-hidden {
            display: none;
        }

        @media (max-width: 900px) {
            .nohra-subhead {
                font-size: 12px;
                padding-top: 5px;
                padding-left: 5px;
                padding-right: 5px;
            }
        }


        .nohra-user {
            margin-bottom: 10px;
        }

        .nohra-user-text {
            background-color: var(--user-back);
            color: var(--user-text);
            border: 1px solid var(--user-t-border);
            border-radius: 10px;
            padding: 10px;
            margin-right: 30px;
            float: right;
            white-space: pre-wrap;
            text-align: right;
            max-width: 75%;
        }

        @media (max-width: 900px) {
            .nohra-user-text {
                padding-right: 5px !important;
            }
        }

        .nohra-assistant {
            margin-bottom: 10px;
            text-align: left;
        }

        .nohra-assistant-text {
            background-color: var(--nohra-back);
            border: 1px solid var(--nohra-b-border);
            color: var(--text);
            padding: 10px;  
            float: left;
            white-space: pre-wrap;
            text-align: left !important;
            max-width: 70%;
            font-family: din-2014, sans-serif;
            font-weight: 400;
            font-style: normal;
            font-size: 16px;
            padding-left: 30px;
        }

        @media (max-width: 900px) {
            .nohra-assistant-text {
                max-width: 100%;
                font-size: 14px;
                padding-left: 5px;
                padding-right: 5px !important;
            }
        }

        /* Container klebt am unteren Rand einer Seite/App */
        .nohra-chat-input {
            position: absolute;
            bottom: 0px;
            inset-inline: 0;
            background: linear-gradient(to top, color-mix(in oklab, var(--bg) 92%, transparent), transparent 0%);
            backdrop-filter: saturate(140%) blur(8px);
            z-index: 50;
            margin: 0 auto;
            width: 75%;
            margin-top: 30px;
        }

        @media (max-width: 900px) {
        .nohra-chat-input {
            width: 100%;
            position: fixed;
            bottom: 30px;
            z-index: 100;
        }
        }

        .nohra-chat-log {
            background-color: white;
            min-height: 300px;
            height: 50vh;
            margin-top: 50px;
            margin: 0 auto;
            width: 75%;
            justify-content: center;
            display: inline-block;
            overflow-y: auto;
            overflow-x: hidden;
            margin-bottom: 110px;
        }

        @media (max-width: 900px) {
        .nohra-chat-log {
            background-color: white;
            min-height: 300px;
            max-height: 20vh;
            margin-top: 50px;
            margin: 0 auto;
            justify-content: center;
            display: contents;
            overflow-y: auto;
            overflow-x: hidden;
            width: auto;
        }
    }

        /* Karte um Textarea + Buttons */
        .nohra-chat-input__inner {
            display: block;
            background: var(--panel);
            border: 1px solid var(--border);
            border-radius: var(--radius-lg);
            box-shadow: var(--shadow);
            padding: 10px;
            transition: box-shadow .2s ease, border-color .2s ease, transform .06s ease;
            will-change: box-shadow, border-color, transform;
            width: 100%;
        }

        @media (max-width: 900px) {
        .nohra-chat-input__inner {
            width: auto;
        }
        }

        /* Hervorhebung beim Fokus irgendwo im Inneren */
        .nohra-chat-input__inner:focus-within {
            border-color: color-mix(in oklab, var(--accent) 40%, var(--border));
            box-shadow:
            0 0 0 3px color-mix(in oklab, var(--accent) 22%, transparent),
            var(--shadow);
        }

        /* Textbereich */
        .nohra-chat-input__textarea {
            grid-column: 1 / 2;
            width: 100%;
            max-height: 36dvh;
            min-height: auto !important;
            height: auto;
            resize: none;
            overflow: auto;
            padding: 15px 12px !important;
            background: none !important;
            color: var(--text);
            border: 0px solid var(--border) !important;
            border-radius: var(--radius-sm);
            outline: none;
            font: var(--font);
            font-size: 16px !important;
            caret-color: var(--accent);
            transition: border-color .15s ease, background-color .2s ease;
        }

        /* Placeholder */
        .nohra-chat-input__textarea::placeholder {
        color: var(--muted);
        opacity: .8;
        }

        /* Fokus im Textbereich */
        .nohra-chat-input__textarea:focus {
        border-color: color-mix(in oklab, var(--accent) 38%, var(--border));
        /* background: color-mix(in oklab, var(--panel-elev) 92%, var(--accent) 8%); */
        }

        /* Tools/Buttons rechts */
        .nohra-chat-input__tools {
        grid-column: 2 / 3;
        display: flex;
        align-items: center;
        gap: 8px;
        padding: 6px;
        }

        /* Icon-Buttons (z.B. Anhängen, Emoji) */
        .nohra-chat-input__icon {
        appearance: none;
        border: 1px solid var(--border);
        background: var(--panel-elev);
        color: var(--muted);
        border-radius: 999px;
        padding: 8px;
        min-width: 36px;
        min-height: 36px;
        line-height: 0;
        cursor: pointer;
        transition: transform .06s ease, border-color .15s ease, background-color .2s ease, color .2s ease;
        }
        .nohra-chat-input__icon:hover { color: var(--text); border-color: color-mix(in oklab, var(--border) 70%, var(--accent)); }
        .nohra-chat-input__icon:active { transform: translateY(1px) scale(.98); }

        /* Senden-Button */
        .nohra-chat-input__send {
        appearance: none;
        border: 1px solid color-mix(in oklab, var(--accent) 55%, var(--border));
        background: linear-gradient(180deg, color-mix(in oklab, var(--accent) 92%, #fff 8%), var(--accent));
        color: var(--accent-ink);
        font-weight: 600;
        border-radius: 999px;
        padding: 0 14px;
        height: 38px;
        min-width: 40px;
        cursor: pointer;
        box-shadow: 0 6px 14px color-mix(in oklab, var(--accent) 20%, transparent);
        transition: transform .06s ease, box-shadow .2s ease, filter .2s ease, opacity .2s ease;
        }

        /* Disabled-Zustand (Standard, wenn Textarea leer) */
        .nohra-chat-input__send[disabled] {
        opacity: .5;
        filter: saturate(.6);
        cursor: not-allowed;
        box-shadow: none;
        }

        /* Active/Pressed */
        .nohra-chat-input__send:not([disabled]):active {
        transform: translateY(1px) scale(.99);
        }

        /* Automatisches Aktivieren des Sendens, wenn Text vorhanden ist (moderne Browser) */
        .nohra-chat-input__inner:has(textarea:not(:placeholder-shown)) .chat-input__send[disabled] {
        opacity: 1;
        filter: none;
        cursor: pointer;
        box-shadow: 0 6px 14px color-mix(in oklab, var(--accent) 20%, transparent);
        /* Hinweis: Entferne das disabled-Attribut per JS für echte Form-Submit-Logik */
        }

        /* Kleine Screens: Tools unter die Textarea */
        @media (max-width: 520px) {
        .nohra-chat-input__inner {
            grid-template-columns: 1fr;
        }
        .nohra-chat-input__tools {
            justify-content: flex-end;
            padding-top: 4px;
        }
        }


    .nohra-image {
    position:relative;
    width: 250px;               /* Größe anpassen */
    aspect-ratio:1;
    border-radius:50%;
    overflow:visible;
    margin: 0 auto;
    margin-top: 30px;
    margin-bottom: 40px;
    }

    @media (max-width: 900px) {
    .nohra-image {
        width: 180px;               /* Größe anpassen */
        aspect-ratio:1;
        border-radius:50%;
        overflow:visible;
        margin: 0 auto;
        margin-top: 20px;
        margin-bottom: 20px;
    }
    }

    .nohra-image::before{
    content:"";
    position:absolute;
    inset:6px;               /* Abstand nach außen (macht den „Rand“ dicker) */
    padding:14px;              /* Randstärke */
    border-radius:50%;
    background:
        conic-gradient(
        /* #ff00d4, #7b61ff, #00d2ff, #00ff9c, #ffe700, #ff6a00, #ff00d4 */
        #ff00d4, #7b61ff, #00d2ff, #ff00d4
        );
    /* Loch in die Mitte „stanzen“, sodass nur der Ring bleibt */
    -webkit-mask:
        linear-gradient(#000 0 0) content-box,
        linear-gradient(#000 0 0);
    -webkit-mask-composite:xor;
            mask-composite:exclude;

    /* Animation: Ring langsam drehen */
    animation: spin 20s linear infinite;
    }

    /* Sanfter farbiger Schein (optional) */
    .nohra-image::after{
    content:"";
    position:absolute;
    inset:-18px;
    border-radius:50%;
    background:inherit;       /* gleiche conic-gradient wie ::before */
    filter:blur(18px);
    opacity:.6;
    z-index:-1;               /* hinter den Ring legen */
    animation: spin 5s linear infinite reverse;
    }

    .nohra-image-small {
    position:relative;
    width:120px;
    aspect-ratio:1;
    border-radius:50%;
    overflow:visible;
    margin: 0 auto;
    margin-bottom: 10px;
    margin-top: 20px;
    }

    @media (max-width: 900px) {
    .nohra-image-small {
        width: 90px;
        aspect-ratio:1;
        border-radius:50%;
        overflow:visible;
        margin: 0 auto;
        margin-bottom: 5px;
        margin-top: 5px;
    }
    }

    .nohra-image-small::before {
    content:"";
    position:absolute;
    inset:0px;               /* Abstand nach außen (macht den „Rand“ dicker) */
    padding:8px;              /* Randstärke */
    border-radius:50%;
    background:
        conic-gradient(
        /* #ff00d4, #7b61ff, #00d2ff, #00ff9c, #ffe700, #ff6a00, #ff00d4 */
        #ff00d4, #7b61ff, #00d2ff, #ff00d4
        );
    /* Loch in die Mitte „stanzen“, sodass nur der Ring bleibt */
    -webkit-mask:
        linear-gradient(#000 0 0) content-box,
        linear-gradient(#000 0 0);
    -webkit-mask-composite:xor;
            mask-composite:exclude;

    /* Animation: Ring langsam drehen */
    animation: spin 20s linear infinite;
    }


    .nohra-image-small-listen {
    position:relative;
    width: 240px;               /* Größe anpassen */
    aspect-ratio:1;
    border-radius:50%;
    overflow:visible;
    margin: 0 auto;
    margin-top: 30px;
    margin-bottom: 40px;
    }

    @media (max-width: 900px) {
    .nohra-image-small-listen {
        width: 180px;               /* Größe anpassen */
        aspect-ratio:1;
        border-radius:50%;
        overflow:visible;
        margin: 0 auto;
        margin-top: 0px;
        margin-bottom: 20px;
    }
    }

    .nohra-image-small-listen::before{
    content:"";
    position:absolute;
    inset:6px;               /* Abstand nach außen (macht den „Rand“ dicker) */
    padding:16px;              /* Randstärke */
    border-radius:50%;
    background:
        conic-gradient(
        /* #ff00d4, #7b61ff, #00d2ff, #00ff9c, #ffe700, #ff6a00, #ff00d4 */
        #ff00d4, #7b61ff, #00d2ff, #ff00d4
        );
    /* Loch in die Mitte „stanzen“, sodass nur der Ring bleibt */
    -webkit-mask:
        linear-gradient(#000 0 0) content-box,
        linear-gradient(#000 0 0);
    -webkit-mask-composite:xor;
            mask-composite:exclude;

    /* Animation: Ring langsam drehen */
    animation: spin 20s linear infinite;
    }

    .nohra-image-small-talk {
    position:relative;
    width: 240px;               /* Größe anpassen */
    aspect-ratio:1;
    border-radius:50%;
    overflow:visible;
    margin: 0 auto;
    margin-top: 30px;
    margin-bottom: 40px;
    }

    @media (max-width: 900px) {
    .nohra-image-small-talk {
        width: 180px;               /* Größe anpassen */
        aspect-ratio:1;
        border-radius:50%;
        overflow:visible;
        margin: 0 auto;
        margin-top: 0px;
        margin-bottom: 20px;
    }
    }

    .nohra-image-small-talk::before{
    content:"";
    position:absolute;
    inset:6px;               /* Abstand nach außen (macht den „Rand“ dicker) */
    padding:16px;              /* Randstärke */
    border-radius:50%;
    background:
        conic-gradient(
        /* #ff00d4, #7b61ff, #00d2ff, #00ff9c, #ffe700, #ff6a00, #ff00d4 */
        #ff00d4, #7b61ff, #00d2ff, #ff00d4
        );
    /* Loch in die Mitte „stanzen“, sodass nur der Ring bleibt */
    -webkit-mask:
        linear-gradient(#000 0 0) content-box,
        linear-gradient(#000 0 0);
    -webkit-mask-composite:xor;
            mask-composite:exclude;

    /* Animation: Ring langsam drehen */
    animation: spin 2s linear infinite;
    }

    @keyframes spin {
    to { transform: rotate(360deg); }
    }

    /* Gemeinsamer Container */
    .nohra-image-large-listen,
    .nohra-image-large-talk {
    position: relative;
    width: 400px;
    aspect-ratio: 1;
    border-radius: 50%;
    overflow: visible;
    margin: 30px auto 40px;
    isolation: isolate; /* saubere Ebenen */
    }

    @media (max-width: 900px) {
    .nohra-image-large-listen,
    .nohra-image-large-talk {
        width: 250px;
        aspect-ratio: 1;
        border-radius: 50%;
        overflow: visible;
        margin: 20px auto 20px;
    }
    }

    /* --- Layer 1: LANGSAMER Ring (läuft immer) --- */
    .nohra-image-large-listen::before,
    .nohra-image-large-talk::before {
    content: "";
    position: absolute;
    inset: 3px;
    padding: 24px;
    border-radius: 50%;
    background:
        conic-gradient(#ff00d4, #7b61ff, #00d2ff, #ff00d4);
    -webkit-mask:
        linear-gradient(#000 0 0) content-box,
        linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
            mask-composite: exclude;

    animation: spin-slow 20s linear infinite;
    opacity: 1; /* im Listen-State sichtbar */
    transition: opacity 300ms ease;
    will-change: transform, opacity;
    z-index: 0;
    }

    /* --- Layer 2: SCHNELLER Ring (läuft immer, aber ausgeblendet) --- */
    .nohra-image-large-listen::after,
    .nohra-image-large-talk::after {
    content: "";
    position: absolute;
    inset: 3px;
    padding: 24px;
    border-radius: 50%;
    background:
        conic-gradient(#ff00d4, #7b61ff, #00d2ff, #ff00d4);
    -webkit-mask:
        linear-gradient(#000 0 0) content-box,
        linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
            mask-composite: exclude;

    animation: spin-fast 2s linear infinite;
    opacity: 0; /* im Listen-State unsichtbar */
    transition: opacity 300ms ease;
    will-change: transform, opacity;
    z-index: 1;
    }

    /* Beim TALK: schneller Ring ein, langsamer aus → weicher Crossfade */
    .nohra-image-large-talk::after { opacity: 1; }
    .nohra-image-large-talk::before { opacity: 0; }

    /* Optional: leichtes „Aufwachen“ beim Talk */
    .nohra-image-large-talk { filter: saturate(1.05); transition: filter 200ms ease; }

    @keyframes spin-slow { to { transform: rotate(360deg); } }
    @keyframes spin-fast { to { transform: rotate(360deg); } }

    /* Respektiere Nutzer, die weniger Bewegung wollen */
    @media (prefers-reduced-motion: reduce) {
        .nohra-image-large-listen::before,
        .nohra-image-large-listen::after,
        .nohra-image-large-talk::before,
        .nohra-image-large-talk::after { animation: none; }
    }

 
    /* Bild selbst */
    .nohra-image img {
        width:100%;
        height:100%;
        display:block;
        border-radius:50%;
    }

    .nohra-microphone {
        color: white;        
    }

    .nohra-microphone-slash {
        color: white;       
        left:-3px; 
        position: relative;
    }

    .chat-product-image {
        width: 100%;
        border-radius: 8px;
        position: relative;
        float: left;
        margin-left:15px;
    }
    @media (max-width: 900px) {
        .chat-product-image {
            margin-left:0px;
        }
    }

    .chat-product-name {
        display: block; 
        font-size: 18px; 
        font-weight: 500; 
        margin: 10px 0px 5px 0px;
        font-family: var(--font);
    }

    .chat-product-price {
        font-size: 14px;
        color: #666;
        font-family: var(--font);
    }

    /* Barrierefreiheit: reduzierte Bewegung */
    @media (prefers-reduced-motion: reduce) {
        * { transition: none !important; }
        * { animation: none !important; }
    }

    .nohra-switch-voice-button {
        border: none;
        color: white;
        cursor: pointer;
        border-radius: 50%;
        left: 10px;
        position: relative;
        aspect-ratio: 1 / 1;
        background: linear-gradient(to top, color-mix(in oklab, var(--nohra-mic1) 92%, transparent), var(--nohra-mic2) 92%);
    }

    @media (max-width: 900px) {
    .nohra-switch-voice-button {
        left: 0px;
        }
    }

    .nohra-switch-voice-button:hover {
        background: linear-gradient(to bottom, color-mix(in oklab, var(--nohra-mic1) 92%, transparent), var(--nohra-mic2) 92%);
        color: #ddd;
        border: 1px solid var(--nohra-mic2);
        aspect-ratio: 1 / 1;
    }

    .form-control {
        -webkit-box-shadow: none !important;
        box-shadow: none !important;
        
    }

    .tooltip-wrap {
        position: relative; /* Container für den Tooltip */
        cursor: pointer;
    }

    .tooltip-text {
        visibility: hidden;
        opacity: 0;
        position: absolute;
        bottom: 125%; /* Tooltip oberhalb vom Button */
        left: 50%;
        transform: translateX(-50%);
        background: #333;
        color: #fff;
        padding: 6px 10px;
        border-radius: 4px;
        font-size: 13px;
        white-space: nowrap;
        z-index: 100;

    }

    @media (max-width: 900px) {
    .tooltip-text {
        font-size: 11px;
        left: -110%;
        visibility: hidden;
        opacity: 0;
        }
    }

    /* kleiner Pfeil */
    .tooltip-text::after {
        content: "";
        position: absolute;
        top: 100%; /* unterhalb des Tooltips */
        left: 50%;
        transform: translateX(-50%);
        border-width: 6px;
        border-style: solid;
        border-color: #333 transparent transparent transparent;
    }

    @media (max-width: 900px) {
    .tooltip-text::after {
        content: "";
        position: absolute;
        top: 100%; /* unterhalb des Tooltips */
        left: 90%;
        transform: translateX(-50%);
        border-width: 6px;
        border-style: solid;
        border-color: #333 transparent transparent transparent;
        }
    }   

    /* Sichtbar beim Hover */
    .tooltip-wrap:hover .tooltip-text {
        visibility: visible;
        animation: fade-tooltip 3s forwards;
    }

    @keyframes fade-tooltip {
        0%   { opacity: 0; }
        10%  { opacity: 1; }   /* schnell einblenden */
        70%  { opacity: 1; }   /* sichtbar bleiben */
        100% { opacity: 0; }   /* langsam ausblenden */
    }

    .typing-dots {
        display: inline-flex;
        gap: 6px;
        vertical-align: middle;
    }

    .typing-dots span {
        width: 7px;
        height: 7px;
        border-radius: 50%;
        background:
    conic-gradient(
    /* #ff00d4, #7b61ff, #00d2ff, #00ff9c, #ffe700, #ff6a00, #ff00d4 */
    #ff00d4, #7b61ff, #00d2ff, #ff00d4
    );
        opacity: 0.35;
        animation: typing-bounce 1s infinite ease-in-out;
    }

    .typing-dots span:nth-child(2) { 
        animation-delay: 0.15s; 
    }

    .typing-dots span:nth-child(3) { 
        animation-delay: 0.30s; 
    }

    @keyframes 
    typing-bounce {
        0%, 80%, 100% { 
            transform: translateY(0); 
            opacity: 0.35; }
        40% { 
            transform: translateY(-6px); 
            opacity: 1; }
    }

    @media (min-width: 992px) {
    .modal-dialog.modal-xl { width: 1100px; }
    }
    @media (min-width: 1200px) {
    .modal-dialog.modal-xl { width: 1200px; }
    }

    .nohra-modal-title {
        color: #000;
        font-family: din-2014, sans-serif;
        font-weight: 200;
        font-style: normal;
        font-size: 24px;
    }
    .nohra-modal-body {
        padding: 20px;
        background-color: #efefef;
    }
    .nohra-upload-button {
        max-width: 400px !important;
        background-color: transparent !important;
        float: left !important;
        box-shadow: none !important;
        height: auto !important;
        border:0px !important;
    }
    .nohra-close-button {
        background-color: #fff;
        color: #000;
        font-family: din-2014, sans-serif;
        font-weight: 200;
        font-style: normal;
        font-size: 16px;
        border: 1px solid #000;
    } 
    .nohra-send-button {
        background-color: #ba30d5 !important;
        color: #fff;
        font-family: din-2014, sans-serif;
        font-weight: 200;
        font-style: normal;
        font-size: 16px;
        border: none;
        margin-left:20px;
    }
    .nohra-form-group {
        text-align: left;
    }    
    .nohra-form-control {
        padding-top: 0px !important
    }

    .support-modal-footer {
        display: flex;
        justify-content: flex-end;
        padding: 1rem;
        border-top: 1px solid #ddd;
        margin-top: 10px;
    }

    /* VOICE */
    .voice-product-container {
        position: relative;
        top:-30px;
        min-height: 50vh;
        max-width: 50%;
    }

    @media (max-width: 900px) {
    .voice-product-container {
        position: relative;
        top:-30px;
        min-height: 50vh;
        max-width: 100%;
        }
    }

    .voice-product-img {
        border-radius: 8px;
        width: 100%;
    }
    .voice-product-name {
        margin-top:10px;
        display: block;
        font-size: 18px;
        font-weight: 500;
        margin: 10px 0px 5px 0px;
        font-family: var(--font);
        text-align: left;
    }
    .voice-product-price {
        font-size: 14px;
        color: #666;
        font-family: var(--font);
        text-align: left;
    }
    .voice-product-cart-button {
        width: 100%;
        margin-top: 5px;
        background-color: #ba30d5 !important;
        border-radius: 4px;
        border: none;
        color:white;
    }
    .voice-product-cart-button:hover {
        color:white !important;
    }
    .voice-product-cart-button:active {
        background-color: #6b1c7b !important;
    }
    .voice-product-cart-text {
        color: #fff;
        font-family: din-2014, sans-serif;
        font-weight: 200;
        font-style: normal;
        font-size: 14px;
    }

    .nohra-icon {
    position:absolute;
    width: 24px;
    aspect-ratio:1;
    border-radius:50%;
    overflow:visible;
    right:150px;
    top:0px;
    }

    @media (max-width: 991px) {
    .nohra-icon {
    position:absolute;
    width: 24px;
    aspect-ratio:1;
    border-radius:50%;
    overflow:visible;
    right:0px;
    top:7px;
        }
    }


    .nohra-icon::before{
    content:"";
    position:absolute;
    inset:1px;
    padding:3px;
    border-radius:50%;
    background:
        conic-gradient( #ff00d4, #7b61ff, #00d2ff, #ff00d4
        );
    /* Loch in die Mitte „stanzen“, sodass nur der Ring bleibt */
    -webkit-mask:
        linear-gradient(#000 0 0) content-box,
        linear-gradient(#000 0 0);
    -webkit-mask-composite:xor;
            mask-composite:exclude;

    /* Animation: Ring langsam drehen */
    animation: spin 20s linear infinite;
    }

    .nohra-product-row {
        margin: 30px 0px 20px 0px !important;
        position: relative;
    }

    .nohra-product-icon {
    position:absolute;
    aspect-ratio:1;
    width: 24px;
    border-radius:50%;
    overflow:visible;
    }

    @media (max-width: 991px) {
    .nohra-product-icon {
    position:absolute;
    width: 24px;
    aspect-ratio:1;
    border-radius:50%;
    overflow:visible;
    }
    }

    .nohra-product-icon::before{
    content:"";
    position:absolute;
    inset:1px;
    padding:3px;
    border-radius:50%;
    background: conic-gradient( #ff00d4, #7b61ff, #00d2ff, #ff00d4);
    -webkit-mask:
        linear-gradient(#000 0 0) content-box,
        linear-gradient(#000 0 0);
    -webkit-mask-composite:xor;
            mask-composite:exclude;
    animation: spin 20s linear infinite;
    }

    .ask-nohra {
        position: relative;
        margin-left: 30px;
        text-transform: uppercase;
    }

    .nohra-product-button {
        background-color: #eee;
        border-radius: 4px;
        font-family: var(--font);
        font-size: 16px;
        color: black;
        padding:10px;
        width: 100%;
    }

    .nohra-product-button:hover {
        color: var(--accent) !important;
        text-transform: uppercase;
        text-decoration: none !important;
    }

    .nohra-small-icons {
        position: absolute !important;
        bottom: 80px;
        left:10%;
        text-align: left !important;
        cursor: pointer !important;
        z-index: 1;
    }

    @media (max-width: 900px) {
        .nohra-small-icons {
            position: fixed !important;
            bottom: 105px !important;
            left:0px !important;
        }
    }
    .nohra-small-icons {
        text-align: center;
    }
    .nohra-small-icon {
        font-size: 14px;
        margin: 0 10px;
        cursor: pointer;
        padding:5px;
        background-color: transparent;
        border-radius: 3px;
    }
    .nohra-small-icon:hover {
        background-color: #eee;
        margin: 0 10px;
        padding:5px;
        border-radius: 3px;
    }

    .nohra-cart-badge {
        border-radius: 50%;
        background: linear-gradient(to top, color-mix(in oklab, var(--nohra-mic1) 92%, transparent), var(--nohra-mic2) 92%);
        color: white;
        aspect-ratio: 1/1;
        position: absolute;
        height: 23px;
        width: 23px;
        margin-left: -20px;
        top: -10px;
        font-size: 12px;
        padding:2px 8px;
        font-family: var(--font);
        }

    .badge-pop-enter-active {
    animation: badge-pop .4s ease forwards;
    }

    @keyframes badge-pop {
    0%   { transform: scale(0.6); opacity: 0; }
    60%  { transform: scale(1.5); opacity: 0.5; } /* Zwischenschritt */
    100% { transform: scale(1);   opacity: 1; }
    }