/* Theme-Variablen */
:root {
--bg:            #121212;
--panel:         #11131a;
--panel-elev:    #151827;
--border:        #262a40;
--text:          #cccccc;
--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;
--nohrd-logo:      #666666;
--nohra-back:      none;
--nohra-b-border:  none;
--nohra-text:      #cccccc;
--nohra-input-h:   300px;  /* Höhe des Input-Bereichs mobil */
--nohra-input-h-screen:   340px;  /* Höhe des Input-Bereichs */
}

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

.fa-nohrd-logo {
    color: var(--nohrd-logo);
    width: 80%;
}

@media (max-width: 900px) {            
    .fa-nohrd-logo {
        width:50% !important;
    }
    .page-main {
        margin-top:15px !important;
    }
}

.nohra-container {
  display: flex;
  flex-direction: column;
}

.nohra-container,
.nohra-container * {
  min-height: 0;
}

.nohra-chat-log {
  display: block;
  overflow-y: auto;
  overflow-x: hidden;
  scroll-behavior: smooth;
  padding: 16px 20px;
  width: 75%;
  margin-left: 0px !important;
  margin-right: 0px !important;
  margin: 0 auto !important;
  height: calc(100vh - var(--nohra-input-h-screen));
}
@media (max-width: 992px){
.nohra-chat-log {
  display: block;
  overflow-y: auto;
  overflow-x: hidden;
  scroll-behavior: smooth;
  padding: 16px 20px;
  width:100%;
  height: calc(100vh - var(--nohra-input-h));
}
}

@supports (height: 100dvh) {
  .nohra-chat-log {
    height: calc(100dvh - var(--nohra-input-h-screen));
  }
}

@supports (height: 100dvh) {
    @media (max-width: 992px){
  .nohra-chat-log {
    height: calc(100dvh - var(--nohra-input-h));
  }
}
}

.nohra-chat-input {
  position: fixed;
  bottom: 0px;
  left: 20px;
  right: 20px;
  background: var(--bg);
  padding: 10px;
  display: block;
  width: 50%;
  margin: 0 auto;
}

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

.nohra-user::after,
.nohra-assistant::after,
.nohra-chat-log::after {
  content: "";
  display: block;
  clear: both;
}

.nohra-chat-input input,
.nohra-chat-input textarea {
  width: 100%;
  height: 100%;
  border: 0;
  outline: 0;
  resize: none;
  background: transparent;
  font: inherit;
}

.nohra-chat-input__inner{
  flex: 1 1 auto;
  min-width: 0;
  width: 100%;
  box-sizing: border-box;
  display: block;
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow);
    padding: 0px;
    transition: box-shadow .2s ease, border-color .2s ease, transform .06s ease;
    will-change: box-shadow, border-color, transform;
}

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

/* Extra Info unten */
.nohra-extra-info {
    position: fixed;
    bottom: 2px;
    z-index: 10;
    color: #ccc !important;
    width: 100% !important;
}
.nohra-extra-info-link {
    color: #ccc !important;
}
.nohra-extra-info-link:hover {
    color: var(--accent) !important;
}

.nohra-head {
    color: var(--text);
    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: 992px) {
    .nohra-head {
        font-size: 20px;
    }
}

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

.nohra-subhead {
    color: var(--text);
    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: 992px) {
    .nohra-subhead {
        font-size: 12px;
        padding-top: 5px;
        padding-left: 5px;
        padding-right: 5px;
    }
}

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

.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: 992px) {
    .nohra-user-text {
        padding-right: 5px !important;
    }
}

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

.nohra-assistant-text {
    background-color: var(--nohra-back);
    border: 1px solid var(--nohra-b-border);
    color: var(--nohra-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: 992px) {
    .nohra-assistant-text {
        max-width: 100%;
        font-size: 14px;
        padding-left: 5px;
        padding-right: 5px !important;
    }
}

.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;
    aspect-ratio:1;
    border-radius:50%;
    overflow:visible;
    margin: 0 auto;
    margin-top: 30px;
    margin-bottom: 40px;
    }

@media (max-width: 992px) {
.nohra-image {
    width: 180px;
    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;
    padding:14px;
    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: 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;
    filter:blur(18px);
    opacity:.6;
    z-index:-1;
    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: 992px) {
.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;
    padding:8px;
    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-image-small-listen {
    position:relative;
    width: 200px;
    aspect-ratio:1;
    border-radius:50%;
    overflow:visible;
    margin: 0 auto;
    margin-top: 15px;
    margin-bottom: 10px;
}

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

.nohra-image-small-listen::before{
    content:"";
    position:absolute;
    inset:6px;
    padding:16px;
    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-image-small-talk {
    position:relative;
    width: 200px;
    aspect-ratio:1;
    border-radius:50%;
    overflow:visible;
    margin: 0 auto;
    margin-top: 15px;
    margin-bottom: 10px;
}

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

.nohra-image-small-talk::before{
    content:"";
    position:absolute;
    inset:6px;
    padding:16px;
    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: spin 2s linear infinite;
}

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

.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;
}

@media (max-width: 992px) {
.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;
    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;
        aspect-ratio: 3 / 2 !important;
    }
    @media (max-width: 992px) {
        .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: 992px) {
    .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: 992px) {
    .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: 992px) {
    .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;
        min-height: 55vh;
        max-width: 40%;
    }

    @media (max-width: 992px) {
    .voice-product-container {
        position: relative;
        min-height: 55vh;
        max-width: 100%;
        }
    }

    .voice-product-img {
        border-radius: 8px;
        width: 100%;
        height: auto;
    }

    .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: var(--accent) !important;
        border-radius: 4px;
        border: none;
        color:white;
    }
    .voice-product-cart-button:hover {
        color:white !important;
    }
    .voice-product-cart-button:active {
        background-color: var(--accent) !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: 992px) {
    .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: 992px) {
    .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: relative;
        bottom: 2px;
        left: 20px;
        text-align: left;
        cursor: pointer;
        z-index: 100;
    }

    @media (max-width: 992px) {
        .nohra-small-icons {
            position: relative;
            bottom: 2px;
            left:20px;
            z-index: 100;
        }
    }

    .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; }
    }