label.required:after {
    content: " *";
    color: red;
}

.modal-backdrop.contact-backdrop{z-index:1060;}
#contact-modal,#logo-modal{z-index:1061;}
#ansprechpartner-table tbody tr{cursor:pointer;}

/* Ensure image popups appear above modals */
.mfp-bg{z-index:1080!important;}
.mfp-wrap{z-index:1081!important;}

.variant-card{width:150px;height:150px;transition:transform .2s,background-color .2s;}
.variant-card:hover{transform:scale(1.1);background-color:#f5f5f5;}
.variant-card.new-variant{border:2px solid #28a745;}
.katalog-card{width:350px;height:600px;transition:transform .2s,background-color .2s;cursor:pointer;display:flex;flex-direction:column;}
.katalog-card:hover{transform:scale(1.02);background-color:#f5f5f5;}
.katalog-card .card-slider{position:relative;width:100%;height:180px;}
.katalog-card .card-slider img{width:100%;height:180px;object-fit:cover;}
/* ensure slider items keep full image height */
.katalog-card .card-slider .owl-stage-outer,
.katalog-card .card-slider .owl-stage,
.katalog-card .card-slider .owl-item,
.katalog-card .card-slider .item{height:180px;}
.katalog-card .card-slider .item a img,
#ofen-view-modal .modal-slider .item a img{cursor:zoom-in;}
.katalog-card .aktiv-toggle{position:absolute;top:4px;right:4px;}
.katalog-card.inactive{background-color:#f0f0f0;opacity:.6;}
.katalog-card.inactive:hover{background-color:#f5f5f5;transform:scale(1.02);}
.katalog-card.exhibition{border:2px solid #34c38f!important; box-shadow:0 0 0 2px rgba(52,195,143,.2);} 
.katalog-card .exhibition-badge{position:absolute; left:8px; top:8px; z-index:3;}
/* Exhibition toggle is rendered as a pill under the logo now */
.katalog-card .exhibition-toggle{position:static; top:auto; left:auto; z-index:auto;}
.katalog-card .owl-nav{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:2;}
.katalog-card .owl-nav button{position:absolute;top:0;bottom:0;width:20%;height:100%;margin:0;background:transparent;border:none;color:#000;cursor:pointer;pointer-events:auto;}
.katalog-card .owl-nav button.owl-prev{left:0;}
.katalog-card .owl-nav button.owl-next{right:0;}
.katalog-card .owl-nav button span{position:absolute;top:50%;transform:translateY(-50%);font-size:1.25rem;}
.katalog-card .owl-nav button.owl-prev span{left:5px;}
.katalog-card .owl-nav button.owl-next span{right:5px;}
.hersteller-logo{max-width:130px;object-fit:contain;filter: drop-shadow(0 0 0.3px #000);max-height: 50px;}
.katalog-card .data-lists{flex-grow:1;overflow:hidden;min-height:0;}
.katalog-card .data-lists ul{overflow-y:auto;min-height:0;height:100%;}
.katalog-card ul{padding-left:0;list-style:none;max-width:50%;}
.katalog-card ul ul{max-width:100%;}
.katalog-card .data-lists ul ul{height:auto;overflow:visible;}

/* Tech data chips on cards */
.katalog-card .tech-chips, .katalog-card ul { flex-wrap: wrap; }
.katalog-card .tech-chip-li { list-style: none; display: inline-block; margin: 0 6px 6px 0; padding: 0; }
.katalog-card .tech-chip {
    display: inline-block;
    background: #f1f3f5;
    color: #333;
    border-radius: 14px;
    padding: 2px 8px;
    font-size: 12px;
    line-height: 1.4;
}
.katalog-card .tech-chip .tech-key { font-weight: 600; }
.katalog-card .tech-chip .tech-val { font-weight: 400; }

/* Hover states: hebe Chips/Pills sichtbar hervor */
.katalog-card:hover .tech-chip,
.katalog-card:hover .feature-pill {
    background: #e9ecef;
    color: #222;
}

/* Feature category pills */
.katalog-card .feature-pill {
    list-style: none;
    display: inline-block;
    background: #f1f3f5;
    color: #333;
    border-radius: 14px;
    padding: 2px 8px;
    font-size: 12px;
    line-height: 1.4;
    margin: 0 6px 6px 0;
}
.katalog-card .feature-pill .pill-title { font-weight: 600; margin-right: 4px; }

/* Modal meta views pointer + hover (nur im Modal) */
#ofen-modal .ofen-meta .ofen-views { cursor: pointer; }
#ofen-modal .ofen-meta .ofen-views:hover { text-decoration: underline; }
@media (max-width: 575.98px) {
  #ofen-modal .ofen-meta .ofen-views { cursor: default; }
  #ofen-modal .ofen-meta .ofen-views:hover { text-decoration: none; }
}

.modal-slider{position:relative;}
.modal-slider .owl-nav{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:2;}
.modal-slider .owl-nav button{position:absolute;top:0;bottom:0;width:20%;height:100%;margin:0;background:transparent;border:none;color:#000;cursor:pointer;pointer-events:auto;}
.modal-slider .owl-nav button.owl-prev{left:0;}
.modal-slider .owl-nav button.owl-next{right:0;}
.modal-slider .owl-nav button span{position:absolute;top:50%;transform:translateY(-50%);font-size:1.25rem;}
.modal-slider .owl-nav button.owl-prev span{left:5px;}
.modal-slider .owl-nav button.owl-next span{right:5px;}


.ts-wrapper.form-select {
    padding: 2px 0!important;
}

.ts-control {
    display: flex;
    flex-wrap: wrap !important;
    overflow: visible;
}

.ts-control.placeholder {
    display: flex !important;
}

.ts-wrapper.multi .ts-control > div {
    margin: 3px 6px 3px 0;
    padding: 0 6px;
}

.ts-item {
    cursor: default;
}

.dropzone .dz-message {
    text-align: center;
    margin: 0 0;
}

.placeholder .ts-control {
    background: #342947;
}

.owl-theme .owl-nav [class*=owl-]:hover {
    background: #0d0d0d0d;
    color: #000000;
    text-decoration: none;
}

/* Katalog-View Styles */
.filter-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    padding: 1rem;
    background-color: #43affc;
    border-radius: 0.5rem;
    margin-bottom: 3rem;
    justify-content: center;
}

.filter-bar .filter-group {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    border-radius: 4px;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
    border: 1px solid #e1e1e1;
    padding: 7px;
    background: #fff;
}

/* Center the switches vertically within the filter bar */
.filter-bar .form-check.form-switch { align-self: center; }

#ofen-cards {
    gap: 1rem;
}

.ofen-card {
    background: #ffffff;
    border-radius: 0.75rem;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
    border: 1px solid #e1e1e1;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: opacity 0.4s ease, transform 0.4s ease;
    animation: pop-in 0.4s ease;
}

.ofen-card.hidden {
    opacity: 0;
    transform: scale(0.8);
    pointer-events: none;
}

.ofen-card img {
    width: 100%;
    height: 180px;
    object-fit: contain;
}

.ofen-card .info {
    padding: 1rem;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.ofen-card .info h3 {
    margin: 0;
    font-size: 1.1rem;
    color: #333;
}

.ofen-card .info p {
    margin: 0;
    font-size: 0.9rem;
    color: #555;
}

.category-container {
    display: flex;
    gap: 1rem;
    margin: 10px 0;
}

.category { flex: 1; }

#pagination {
    display: flex;
    justify-content: center;
    gap: 0.5rem;
    margin-top: 2rem;
}

#pagination button {
    padding: 0.5rem 0.75rem;
    background-color: #e2e8f0;
    border: 1px solid #cbd5e0;
    border-radius: 0.375rem;
    font-size: 0.9rem;
    cursor: pointer;
    transition: background-color 0.2s ease, color 0.2s ease;
}

#pagination button:hover { background-color: #cbd5e0; }

#pagination button.active {
    background-color: #2b6cb0;
    color: #fff;
    border-color: #2b6cb0;
}

/* Variant pills */
.variant-pills{margin: 0 0 .25rem 0; display:flex; flex-wrap:wrap; gap:6px;}
.variant-pills .badge{font-size:.7rem;}

.modal-tech li,
.modal-features li {
    background: #f8f9fa;
    margin-bottom: 0.25rem;
    padding: 0.25rem 0.5rem;
    border-radius: 0.25rem;
    transition: transform 0.2s ease, background-color 0.2s ease;
}

.modal-tech li:hover,
.modal-features li:hover {
    background: #e9ecef;
    transform: scale(1.02);
}

.ts-wrapper.plugin-remove_button:not(.rtl) .item {
    transition: background-color 0.2s ease, transform 0.2s ease;
}
.ts-wrapper.plugin-remove_button:not(.rtl) .item {
    margin: 3px;
    cursor: pointer;
}
.ts-wrapper.plugin-remove_button:not(.rtl) .item:hover {
    background: #dddddd;
    scale: 1.02;
}

/* Favorisierte TomSelect-Items deutlich markieren (Fallback, falls Bootstrap subtle-Farben nicht greifen) */
.ts-wrapper .item.fav-item {
    background-color: var(--bs-warning-bg-subtle, #fff3cd) !important;
    color: var(--bs-warning-text-emphasis, #664d03) !important;
}

@keyframes pop-in {
    from { opacity: 0; transform: scale(0.8); }
    to { opacity: 1; transform: scale(1); }
}

@media (max-width: 600px) {
    .filter-bar { flex-direction: column; }
    .filter-bar .filter-group { flex-wrap: wrap; }
    .category-container { flex-direction: column; }
}

/* Rainbow-Ring: dreht sich nahtlos um das Input (Pastell wie Button) */
@property --ring-angle {
    syntax: '<angle>';
    inherits: false;
    initial-value: 0deg;
}

#artikel-url,
#impressum-url {
    position: relative;
    border: 2px solid transparent;
    border-radius: .25rem;
    background:
        linear-gradient(var(--bs-body-bg, #fff), var(--bs-body-bg, #fff)) padding-box,
        conic-gradient(from var(--ring-angle),
            #ffb3ba,
            #ffdfba,
            #ffffba,
            #baffc9,
            #bae1ff,
            #d4bfff,
            #ffb3f0,
            #ffb3ba
        ) border-box;
    background-clip: padding-box, border-box;
    animation: ring-spin 6s linear infinite;
}

#artikel-scan,
#impressum-scan {
    background-image: linear-gradient(
        90deg,
        #ffb3ba,
        #ffdfba,
        #ffffba,
        #baffc9,
        #bae1ff,
        #d4bfff,
        #ffb3f0
    );
    background-size: 200% 100%;
    border: none;
    color: #a200ff;
    animation: rainbow-bg 5s linear infinite;
}

#artikel-scan:hover,
#impressum-scan:hover {
    filter: brightness(0.9);
}

@keyframes ring-spin {
    to { --ring-angle: 360deg; }
}

@keyframes rainbow-bg {
    from { background-position: 0% 0%; }
    to   { background-position: 200% 0%; }
}

/* Hersteller-Logo Placeholder nur ausblenden, wenn Bild erfolgreich geladen */
#logo-wrapper.logo-loaded #logo-placeholder { display: none !important; }
#logo-wrapper.logo-loaded #logo-preview { display: block !important; }