.elementor-kit-5{--e-global-color-primary:#A3A6A8;--e-global-color-secondary:#A3A6A8;--e-global-color-text:#A3A6A8;--e-global-color-accent:#A3A6A8;--e-global-typography-primary-font-family:"Roboto";--e-global-typography-secondary-font-family:"Roboto";--e-global-typography-text-font-family:"Roboto";--e-global-typography-text-font-weight:normal;--e-global-typography-accent-font-family:"Roboto";background-color:#0C0D0F;}.elementor-kit-5 e-page-transition{background-color:#FFBC7D;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1200px;}.e-con{--container-max-width:1200px;}.elementor-widget:not(:last-child){--kit-widget-spacing:20px;}.elementor-element{--widgets-spacing:20px 20px;--widgets-spacing-row:20px;--widgets-spacing-column:20px;}{}h1.entry-title{display:var(--page-title-display);}@media(max-width:1024px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:1024px;}.e-con{--container-max-width:1024px;}}@media(max-width:767px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:767px;}.e-con{--container-max-width:767px;}}/* Start custom CSS *//* ============================================================
   DEMKE ELECTRONIC – GLOBAL CSS
   Elementor Pro (v3-Widgets auf Elementor 4)
   ------------------------------------------------------------
   INHALT
   01  Design-Tokens (:root)
   02  Basis
   03  Typografie-Skala
   04  Keyframes
   05  Master-Animationsliste
   06  Utility-Klassen (anim-*, Divider, Spot, Hero-Grid)
   07  Link-System (Inhalt animiert / Header-Footer-Meta ruhig)
   08  Icons & Titel
   09  Nested Accordion
   10  Formulare (Elementor Form)
   11  Buttons (1 Primary / 2 Outline / Link)
   12  Cards (Product / Project)
   13  Search-Widget
   14  Blog / Post-Meta
   15  Carousel / Swiper
   16  WS Filter Builder – Dark Skin
   17  Filter Loading State
   18  Logo Color-Mask
   19  Hamburger-Menü
   20  Flip Cards
   21  Produktvergleich 
   22  Produktdetail
  
   99  Reduced Motion (MUSS letzte Sektion bleiben)
   ============================================================ */


/* ============================================================
   01  DESIGN-TOKENS
   Radius: Karten/Container 15px, Bedienelemente 5px.
   Linien: Flächen & Aktionen 2px, Eingabefelder 1px.
   ============================================================ */

:root {
    /* Farben */
    --sw-color-black: #0c0d0f;
    --sw-color-white: #ffffff;
    --sw-color-gray: #a3a6a8;
    --sw-color-gray-light: #c1c4c6;
    --sw-color-yellow: #ffc72c;
    --sw-color-blue: #00bce1;
    --sw-color-green: #48d597;
    --sw-color-pink: #ef426f;

    /* Flächen */
    --sw-color-form-bg: #1b1c1e;
    --sw-color-spot: 29, 37, 45;
    --sw-navbar-search-field-background: var(--sw-color-form-bg);

    /* Input-Borderfarben (bewusst leicht uneinheitlich für Tiefe) */
    --sw-border-input-top: #737577;
    --sw-border-input-side: #646567;
    --sw-border-input-bottom: #6e7072;
    --sw-color-disabled-bg: #3a3b3d;

    /* Radius-System */
    --sw-radius-card: 15px;
    --sw-radius-control: 5px;
    --sw-radius-pill: 999px;

    /* Linien-System */
    --sw-border-w: 2px;
    --sw-border-w-input: 1px;

    /* Animation */
    --sw-anim-duration: 20s;
    --sw-anim-offset: 0s;
}


/* ============================================================
   02  BASIS
   ============================================================ */

html {
    font-size: 16px;
}

body {
    background-color: var(--sw-color-black);
    color: var(--sw-color-gray);
    overflow-x: hidden;
}

a {
    transition: all 0.2s ease-in-out;
    text-decoration: none;
}

::selection {
    background: var(--sw-color-yellow);
    color: var(--sw-color-black);
}


/* ============================================================
   03  TYPOGRAFIE-SKALA
   Pro Größe zwei Regeln:
   a) Fließtext-Elemente (ohne !important, respektiert
      individuelle Elementor-Einstellungen)
   b) UI-Elemente wie Nav-Menü und Icon-Listen (mit !important,
      da Elementor dort font-size direkt auf span/item setzt)
   ============================================================ */

.xxxlarge :is(h1, h2, h3, h4, h5, h6, p, a) {
    font-size: clamp(3.00rem, 2.48276rem + 2.20690vw, 4.00rem);
    line-height: 1.3;
}

.xxlarge :is(h1, h2, h3, h4, h5, h6, p, a) {
    font-size: clamp(2.50rem, 1.98276rem + 2.20690vw, 3.50rem);
    line-height: 1.3;
}

.xlarge :is(h1, h2, h3, h4, h5, h6, p, a) {
    font-size: clamp(2.00rem, 1.48276rem + 2.20690vw, 3.00rem);
    line-height: 1.3;
}

.large :is(h1, h2, h3, h4, h5, h6, p, a) {
    font-size: clamp(1.50rem, 0.98276rem + 2.20690vw, 2.50rem);
    line-height: 1.3;
}

.xmedium :is(h1, h2, h3, h4, h5, h6, p, a) {
    font-size: clamp(1.25rem, 0.86207rem + 1.65517vw, 2.00rem);
    line-height: 1.3;
}

.medium :is(h1, h2, h3, h4, h5, h6, p, a) {
    font-size: clamp(1.19rem, 1.02586rem + 0.68966vw, 1.50rem);
    line-height: 1.3;
}

.small :is(h1, h2, h3, h4, h5, h6, p, a) {
    font-size: clamp(1.13rem, 1.06034rem + 0.27586vw, 1.25rem);
    line-height: 1.3;
}

.xsmall :is(h1, h2, h3, h4, h5, h6, p, a) {
    font-size: clamp(1.00rem, 0.93534rem + 0.27586vw, 1.13rem);
    line-height: 1.3;
}

.xxsmall :is(h1, h2, h3, h4, h5, h6, p, a) {
    font-size: clamp(0.82rem, 0.76681rem + 0.24828vw, 0.94rem);
    line-height: 1.3;
}

/* UI-Elemente + Demke-Shortcodes
   Die Größenklasse wird am Elementor-Widget gesetzt, z. B.
   xxsmall / xsmall / small / medium / xmedium / large / xlarge / xxlarge / xxxlarge.
   .dmk-dl-btn ist explizit enthalten, weil der Download-Block später
   "font: inherit" setzt und sonst die gewählte Clamp-Größe überschreiben kann. */
.xxxlarge :is(span, li, .elementor-icon-list-text, .elementor-item, .e-n-menu-title-text, .dmk-dl-btn) {
    font-size: clamp(3.00rem, 2.48276rem + 2.20690vw, 4.00rem) !important;
    line-height: 1.3;
}

.xxlarge :is(span, li, .elementor-icon-list-text, .elementor-item, .e-n-menu-title-text, .dmk-dl-btn) {
    font-size: clamp(2.50rem, 1.98276rem + 2.20690vw, 3.50rem) !important;
    line-height: 1.3;
}

.xlarge :is(span, li, .elementor-icon-list-text, .elementor-item, .e-n-menu-title-text, .dmk-dl-btn) {
    font-size: clamp(2.00rem, 1.48276rem + 2.20690vw, 3.00rem) !important;
    line-height: 1.3;
}

.large :is(span, li, .elementor-icon-list-text, .elementor-item, .e-n-menu-title-text, .dmk-dl-btn) {
    font-size: clamp(1.50rem, 0.98276rem + 2.20690vw, 2.50rem) !important;
    line-height: 1.3;
}

.xmedium :is(span, li, .elementor-icon-list-text, .elementor-item, .e-n-menu-title-text, .dmk-dl-btn) {
    font-size: clamp(1.25rem, 0.86207rem + 1.65517vw, 2.00rem) !important;
    line-height: 1.3;
}

.medium :is(span, li, .elementor-icon-list-text, .elementor-item, .e-n-menu-title-text, .dmk-dl-btn) {
    font-size: clamp(1.19rem, 1.02586rem + 0.68966vw, 1.50rem) !important;
    line-height: 1.3;
}

.small :is(span, li, .elementor-icon-list-text, .elementor-item, .e-n-menu-title-text, .dmk-dl-btn) {
    font-size: clamp(1.13rem, 1.06034rem + 0.27586vw, 1.25rem) !important;
    line-height: 1.3;
}

.xsmall :is(span, li, .elementor-icon-list-text, .elementor-item, .e-n-menu-title-text, .dmk-dl-btn) {
    font-size: clamp(1.00rem, 0.93534rem + 0.27586vw, 1.13rem) !important;
    line-height: 1.3;
}

.xxsmall :is(span, li, .elementor-icon-list-text, .elementor-item, .e-n-menu-title-text, .dmk-dl-btn) {
    font-size: clamp(0.82rem, 0.76681rem + 0.24828vw, 0.94rem) !important;
    line-height: 1.3;
}


/* ============================================================
   04  KEYFRAMES
   ============================================================ */

@keyframes colorChangeFont {
    0%   { color: var(--sw-color-yellow); }
    25%  { color: var(--sw-color-green); }
    50%  { color: var(--sw-color-blue); }
    75%  { color: var(--sw-color-pink); }
    100% { color: var(--sw-color-yellow); }
}

@keyframes colorChangeBg {
    0%   { background-color: var(--sw-color-yellow); }
    25%  { background-color: var(--sw-color-green); }
    50%  { background-color: var(--sw-color-blue); }
    75%  { background-color: var(--sw-color-pink); }
    100% { background-color: var(--sw-color-yellow); }
}

@keyframes colorChangeBorder {
    0%   { border-color: var(--sw-color-yellow); }
    25%  { border-color: var(--sw-color-green); }
    50%  { border-color: var(--sw-color-blue); }
    75%  { border-color: var(--sw-color-pink); }
    100% { border-color: var(--sw-color-yellow); }
}

@keyframes colorChangeOutline {
    0%   { outline-color: var(--sw-color-yellow); }
    25%  { outline-color: var(--sw-color-green); }
    50%  { outline-color: var(--sw-color-blue); }
    75%  { outline-color: var(--sw-color-pink); }
    100% { outline-color: var(--sw-color-yellow); }
}

@keyframes colorChangeFill {
    0%   { fill: var(--sw-color-yellow); }
    25%  { fill: var(--sw-color-green); }
    50%  { fill: var(--sw-color-blue); }
    75%  { fill: var(--sw-color-pink); }
    100% { fill: var(--sw-color-yellow); }
}

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

/* ============================================================
   CODE EASTER EGG
   ============================================================ */

@keyframes dmkCodeCursorBlink {
    0%,
    48% {
        opacity: 1;
    }

    49%,
    100% {
        opacity: 0;
    }
}

@keyframes dmkCodeTypingIn {
    from {
        opacity: 0;
        transform: translateY(8px) scale(0.985);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* ============================================================
   05  MASTER-ANIMATIONSLISTE
   Setzt Dauer/Timing zentral für alle animierten Elemente.
   WICHTIG: anim-text und anim-title werden in Sektion 08
   gezielt am sichtbaren Textelement gesteuert. Dadurch laufen
   verlinkte Titel nicht doppelt auf Wrapper, Heading und Link.
   ============================================================ */

.demke-flip-animated .elementor-flip-box,
.demke-flip-animated .elementor-flip-box__front,
.demke-flip-animated .elementor-flip-box__back,
.demke-flip-bg-front .elementor-flip-box__front,
.demke-flip-bg-back .elementor-flip-box__back,

.anim-bg,
.anim-border,
.rainbow-divider,
.custom-border,

.button-1 .elementor-button,
.button-1 a.elementor-button,
.button-1 button.elementor-button,

.button-2 .elementor-button,
.button-2 a.elementor-button,
.button-2 button.elementor-button,

.button-link .elementor-button-icon,
.button-link .elementor-button-icon i,
.button-link .elementor-button-icon svg,
.button-link .elementor-button-icon path,
.button-link i,
.button-link svg,
.button-link path,

.elementor-post-info i,
.elementor-post-info svg,
.elementor-post-info path,
.elementor-post-info .elementor-icon-list-icon i,
.elementor-post-info .elementor-icon-list-icon svg,
.elementor-post-info .elementor-icon-list-icon path,
.elementor-post__meta-data i,
.elementor-post__meta-data svg,
.elementor-post__meta-data path,

.demke-logo-color-bottom a::after,
.demke-logo-color-bottom .elementor-widget-container:not(:has(a))::after,

.anim-accordion .e-n-accordion-item,
.anim-accordion .e-n-accordion-item-title-text,
.anim-accordion .e-n-accordion-item-title-icon svg,
.anim-accordion .e-n-accordion-item-title-icon path,
.anim-accordion .e-n-accordion-item-title-icon i,

.elementor-swiper-button,
.elementor-swiper-button i,
.elementor-swiper-button svg,

.elementor-text-editor a,
.elementor-widget-text-editor a {
    animation-duration: var(--sw-anim-duration) !important;
    animation-iteration-count: infinite !important;
    animation-timing-function: linear !important;
    animation-delay: var(--sw-anim-offset) !important;
}


/* ============================================================
   06  UTILITY-KLASSEN
   ============================================================ */

/* anim-text wird bewusst nicht pauschal auf dem Wrapper animiert.
   Die eigentliche Textlogik befindet sich in Sektion 08. */

.anim-bg {
    animation-name: colorChangeBg;
    background-color: var(--sw-color-yellow);
    color: var(--sw-color-black) !important;
}

.anim-border,
.custom-border {
    border: var(--sw-border-w-input) solid var(--sw-color-yellow);
    animation-name: colorChangeBorder;
}

.rainbow-divider {
    height: 2px;
    background-color: var(--sw-color-yellow);
    animation-name: colorChangeBg;
    -webkit-mask-image: linear-gradient(90deg, transparent, black, transparent);
    mask-image: linear-gradient(90deg, transparent, black, transparent);
}

.spot-bg {
    position: relative;
    z-index: 1;
}

.spot-bg::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    height: 80%;
    background: radial-gradient(
        circle closest-side,
        rgba(var(--sw-color-spot), 1) 0%,
        rgba(var(--sw-color-spot), 0) 100%
    );
    z-index: -1;
    pointer-events: none;
}

.hero-grid {
    position: relative;
}

.hero-grid::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image:
        linear-gradient(to right, rgba(255,255,255,0.04) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(255,255,255,0.04) 1px, transparent 1px) !important;
    background-size: 40px 40px !important;
    -webkit-mask-image: radial-gradient(circle at center, black 30%, transparent 80%) !important;
    mask-image: radial-gradient(circle at center, black 30%, transparent 80%) !important;
    z-index: 0 !important;
    pointer-events: none !important;
}

.hero-grid > * {
    position: relative;
    z-index: 1;
}


/* ============================================================
   07  LINK-SYSTEM
   Regel: Links im Inhalt (Fließtext) rotieren im Farbsystem.
   Überschriften-Links (z.B. Beitragstitel-Permalinks in Loops)
   bleiben bewusst ruhig; Ausnahme per .text-link-animated. Links in Header, Footer und Blog-Meta bleiben
   ruhig grau mit Hover auf Hellgrau. Reihenfolge wichtig:
   Orts-Regeln stehen NACH den Inhalts-Regeln.
   ============================================================ */

/* ============================================================
   7.1 INHALT – ANIMIERTE LINKS
   ============================================================ */

/* Normale Elementor-Texteditoren
   → bestehendes, bisher funktionierendes Verhalten */
.elementor-text-editor a,
.elementor-widget-text-editor a {
    color: var(--sw-color-yellow);
    text-decoration: none !important;

    animation:
        colorChangeFont
        var(--sw-anim-duration)
        linear
        infinite
        var(--sw-anim-offset) !important;
}

.elementor-text-editor a:hover,
.elementor-widget-text-editor a:hover {
    opacity: 0.85;
}


/* ------------------------------------------------------------
   Blog-Einzelbeitrag
   Elementor Post Content Widget
   ------------------------------------------------------------ */

.elementor-widget-theme-post-content a {
    color: var(--sw-color-yellow);
    text-decoration: none !important;

    animation:
        colorChangeFont
        var(--sw-anim-duration)
        linear
        infinite
        var(--sw-anim-offset) !important;
}

.elementor-widget-theme-post-content a:hover {
    opacity: 0.85;
}
/* 7.2 Opt-out: ruhig (static) / erzwungen animiert (animated) */
.text-link-static a,
a.text-link-static {
    color: var(--sw-color-gray-light) !important;
    animation-name: none !important;
}

.text-link-animated a,
a.text-link-animated {
    color: var(--sw-color-yellow);
    animation: colorChangeFont var(--sw-anim-duration) linear infinite var(--sw-anim-offset) !important;
}

/* 7.3 Header & Navigation: ruhig grau */
.elementor-location-header a,
.elementor-location-header a span,
.elementor-location-header .elementor-item,
.elementor-location-header .e-n-menu-title-text {
    color: var(--sw-color-gray) !important;
    text-decoration: none !important;
    animation-name: none !important;
}

.elementor-location-header a:hover,
.elementor-location-header a:hover span,
.elementor-location-header .elementor-item:hover,
.elementor-location-header a:hover .e-n-menu-title-text {
    color: var(--sw-color-gray-light) !important;
}

/* 7.4 Footer: ruhig grau */
.elementor-location-footer a,
.elementor-location-footer a span,
.elementor-location-footer .elementor-icon-list-text,
.elementor-location-footer .elementor-icon-list-item a,
.elementor-location-footer .elementor-icon-list-item a span,
.elementor-location-footer .elementor-icon-list-item a .elementor-icon-list-text {
    color: var(--sw-color-gray) !important;
    text-decoration: none !important;
    animation-name: none !important;
}

.elementor-location-footer a:hover,
.elementor-location-footer a:hover span,
.elementor-location-footer .elementor-icon-list-item a:hover,
.elementor-location-footer .elementor-icon-list-item a:hover span,
.elementor-location-footer .elementor-icon-list-item a:hover .elementor-icon-list-text {
    color: var(--sw-color-gray-light) !important;
}

/* 7.5 Blog-Meta: ruhig grau (Icons animieren, siehe Sektion 14) */
.elementor-post__meta-data,
.elementor-post__meta-data a,
.elementor-post-info,
.elementor-post-info a,
.elementor-post-info__terms-list,
.elementor-post-info__terms-list a,
.elementor-post-info__item,
.elementor-post-info__item a,
.elementor-post-date,
.elementor-post-author,
.elementor-post-info__item-prefix,
.elementor-post-info .elementor-icon-list-text,
.elementor-post-info .elementor-icon-list-text a {
    color: var(--sw-color-gray) !important;
    font-weight: 400 !important;
    line-height: 1.4 !important;
    text-decoration: none !important;
    animation-name: none !important;
}

.elementor-post__meta-data a:hover,
.elementor-post-info a:hover,
.elementor-post-info__terms-list a:hover,
.elementor-post-info .elementor-icon-list-text a:hover {
    color: var(--sw-color-gray-light) !important;
}

/* ============================================================
   7.6 BREADCRUMBS – RUHIGE LINKS
   Rank Math Breadcrumbs
   ============================================================ */

.rank-math-breadcrumb,
.rank-math-breadcrumb p {
    color: var(--sw-color-gray);
}

.rank-math-breadcrumb a {
    color: var(--sw-color-gray) !important;

    text-decoration: none !important;

    animation: none !important;
    animation-name: none !important;

    transition:
        color 0.2s ease,
        opacity 0.2s ease;
}

.rank-math-breadcrumb a:hover,
.rank-math-breadcrumb a:focus-visible {
    color: var(--sw-color-gray-light) !important;

    animation: none !important;

    opacity: 1;
}

/* Aktuelle Seite */
.rank-math-breadcrumb .last,
.rank-math-breadcrumb [aria-current="page"] {
    color: var(--sw-color-gray-light) !important;
}

/* ============================================================
   08  ICONS & TITEL

   KLASSENLOGIK
   anim-text  = normales Heading- oder Texteditor-Widget
   anim-title = Titel komplexer Elementor-Widgets
                (Icon Box, Image Box, Flip Box, CTA usw.)

   Bei verlinkten Titeln animiert nur der Link.
   Bei unverlinkten Titeln animiert nur das Titelelement.
   Unterelemente erben die Farbe und starten keine zweite
   Animation. Das verhindert Blinken und Phasenverschiebungen.
   ============================================================ */
/* 8.1 Animierte Icons */
.anim-icon .elementor-icon i,
.anim-icon .elementor-icon-list-icon i,
.anim-icon .elementor-share-btn__icon,
.anim-icon .elementor-share-btn__icon i {
    color: var(--sw-color-yellow);
    animation-name: colorChangeFont !important;
    animation-duration: var(--sw-anim-duration) !important;
    animation-iteration-count: infinite !important;
    animation-timing-function: linear !important;
    animation-delay: var(--sw-anim-offset) !important;
}

.anim-icon .elementor-icon svg,
.anim-icon .elementor-icon path,
.anim-icon .elementor-icon-list-icon svg,
.anim-icon .elementor-icon-list-icon path,
.anim-icon .elementor-share-btn__icon svg,
.anim-icon .elementor-share-btn__icon path {
    fill: var(--sw-color-yellow);
    animation-name: colorChangeFill !important;
    animation-duration: var(--sw-anim-duration) !important;
    animation-iteration-count: infinite !important;
    animation-timing-function: linear !important;
    animation-delay: var(--sw-anim-offset) !important;
}


/* Share-Button Kreis / Border ebenfalls animieren */
.anim-icon .elementor-share-btn {
    background: transparent !important;

    border-color: var(--sw-color-yellow);

    animation-name: colorChangeBorder !important;
    animation-duration: var(--sw-anim-duration) !important;
    animation-iteration-count: infinite !important;
    animation-timing-function: linear !important;
    animation-delay: var(--sw-anim-offset) !important;
}

/* 8.2 anim-text: normales Elementor Heading-Widget */
.elementor-widget-heading.anim-text
.elementor-heading-title:not(:has(> a)) {
    color: var(--sw-color-yellow);
    animation-name: colorChangeFont !important;
    animation-duration: var(--sw-anim-duration) !important;
    animation-iteration-count: infinite !important;
    animation-timing-function: linear !important;
    animation-delay: var(--sw-anim-offset) !important;
}

/* Verlinktes Heading: ausschliesslich der Link animiert. */
.elementor-widget-heading.anim-text
.elementor-heading-title > a {
    color: var(--sw-color-yellow);
    text-decoration: none !important;
    animation-name: colorChangeFont !important;
    animation-duration: var(--sw-anim-duration) !important;
    animation-iteration-count: infinite !important;
    animation-timing-function: linear !important;
    animation-delay: var(--sw-anim-offset) !important;
}

.elementor-widget-heading.anim-text
.elementor-heading-title:has(> a) {
    animation: none !important;
}

.elementor-widget-heading.anim-text
.elementor-heading-title > a :is(span, strong, em, b, i) {
    color: inherit !important;
    animation: none !important;
}

.elementor-widget-heading.anim-text
.elementor-heading-title > a:hover,
.elementor-widget-heading.anim-text
.elementor-heading-title > a:focus-visible {
    color: var(--sw-color-yellow);
    animation-name: colorChangeFont !important;
    opacity: 0.88;
}

/* 8.3 anim-text: Elementor Texteditor */
.elementor-widget-text-editor.anim-text
> .elementor-widget-container,
.elementor-widget-text-editor.anim-text
> .elementor-widget-container > .elementor-text-editor {
    color: var(--sw-color-yellow);
    animation-name: colorChangeFont !important;
    animation-duration: var(--sw-anim-duration) !important;
    animation-iteration-count: infinite !important;
    animation-timing-function: linear !important;
    animation-delay: var(--sw-anim-offset) !important;
}

.elementor-widget-text-editor.anim-text
> .elementor-widget-container
:is(p, a, span, strong, em, b, i),
.elementor-widget-text-editor.anim-text
> .elementor-widget-container > .elementor-text-editor
:is(p, a, span, strong, em, b, i) {
    color: inherit !important;
    animation: none !important;
}

.elementor-widget-text-editor.anim-text
> .elementor-widget-container a:hover,
.elementor-widget-text-editor.anim-text
> .elementor-widget-container a:focus-visible {
    color: inherit !important;
    opacity: 0.88;
}

/* 8.4 anim-title: Titel komplexer Elementor-Widgets */
.anim-title
:is(
    .elementor-icon-box-title,
    .elementor-image-box-title,
    .elementor-flip-box__layer__title,
    .elementor-cta__title,
    .elementor-call-to-action__title
):not(:has(> a)) {
    color: var(--sw-color-yellow);
    animation-name: colorChangeFont !important;
    animation-duration: var(--sw-anim-duration) !important;
    animation-iteration-count: infinite !important;
    animation-timing-function: linear !important;
    animation-delay: var(--sw-anim-offset) !important;
}

/* Verlinkter Widget-Titel: nur der Link animiert. */
.anim-title
:is(
    .elementor-icon-box-title,
    .elementor-image-box-title,
    .elementor-flip-box__layer__title,
    .elementor-cta__title,
    .elementor-call-to-action__title
) > a {
    color: var(--sw-color-yellow);
    text-decoration: none !important;
    animation-name: colorChangeFont !important;
    animation-duration: var(--sw-anim-duration) !important;
    animation-iteration-count: infinite !important;
    animation-timing-function: linear !important;
    animation-delay: var(--sw-anim-offset) !important;
}

.anim-title
:is(
    .elementor-icon-box-title,
    .elementor-image-box-title,
    .elementor-flip-box__layer__title,
    .elementor-cta__title,
    .elementor-call-to-action__title
):has(> a) {
    animation: none !important;
}

.anim-title
:is(
    .elementor-icon-box-title,
    .elementor-image-box-title,
    .elementor-flip-box__layer__title,
    .elementor-cta__title,
    .elementor-call-to-action__title
) > a :is(span, strong, em, b, i) {
    color: inherit !important;
    animation: none !important;
}

.anim-title
:is(
    .elementor-icon-box-title,
    .elementor-image-box-title,
    .elementor-flip-box__layer__title,
    .elementor-cta__title,
    .elementor-call-to-action__title
) > a:hover,
.anim-title
:is(
    .elementor-icon-box-title,
    .elementor-image-box-title,
    .elementor-flip-box__layer__title,
    .elementor-cta__title,
    .elementor-call-to-action__title
) > a:focus-visible {
    color: var(--sw-color-yellow);
    animation-name: colorChangeFont !important;
    opacity: 0.88;
}

/* Post-Navigation */
.elementor-widget-post-navigation.anim-icon i {
    animation: colorChangeFont var(--sw-anim-duration) infinite linear var(--sw-anim-offset) !important;
}

.elementor-widget-post-navigation.anim-icon svg,
.elementor-widget-post-navigation.anim-icon path {
    animation: colorChangeFill var(--sw-anim-duration) infinite linear var(--sw-anim-offset) !important;
}


/* ============================================================
   09  NESTED ACCORDION
   ============================================================ */

.anim-accordion .e-n-accordion-item {
    border-top-width: var(--sw-border-w-input) !important;
    border-top-style: solid !important;
    border-bottom: none !important;
    border-left: none !important;
    border-right: none !important;
    background-color: transparent !important;
    margin-bottom: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    animation: colorChangeBorder var(--sw-anim-duration) infinite linear var(--sw-anim-offset) !important;
}

.anim-accordion .e-n-accordion-item-title {
    border: none !important;
    background-color: transparent !important;
}

.anim-accordion .e-n-accordion-item-title-text,
.anim-accordion .e-n-accordion-item-title-icon {
    animation: colorChangeFont var(--sw-anim-duration) infinite linear var(--sw-anim-offset) !important;
}

.anim-accordion .e-n-accordion-item-title-icon svg,
.anim-accordion .e-n-accordion-item-title-icon path {
    fill: currentColor !important;
    stroke: currentColor !important;
}

.anim-accordion .e-n-accordion-item:not([open]) {
    border-color: var(--sw-color-gray) !important;
}

.anim-accordion .e-n-accordion-item:not([open]) .e-n-accordion-item-title-text,
.anim-accordion .e-n-accordion-item:not([open]) .e-n-accordion-item-title-icon {
    color: var(--sw-color-gray) !important;
}


/* ============================================================
   10  FORMULARE (Elementor Form)
   ============================================================ */

.elementor-form .elementor-field,
.elementor-form input.elementor-field,
.elementor-form textarea.elementor-field,
.elementor-form select.elementor-field {
    background-color: var(--sw-color-form-bg) !important;
    color: var(--sw-color-gray-light) !important;
    border-width: var(--sw-border-w-input) !important;
    border-style: solid !important;
    border-top-color: var(--sw-border-input-top);
    border-left-color: var(--sw-border-input-side);
    border-right-color: var(--sw-border-input-side);
    border-bottom-color: var(--sw-border-input-bottom);
    border-radius: var(--sw-radius-control) !important;
    padding: 10px 12px !important;
    font-weight: 300 !important;
    line-height: 1.4 !important;
    box-shadow: none !important;
    outline: none !important;
}

.elementor-form textarea.elementor-field {
    min-height: 140px;
    resize: vertical;
}

.elementor-form .elementor-field::placeholder,
.elementor-form input::placeholder,
.elementor-form textarea::placeholder {
    color: var(--sw-color-gray) !important;
    opacity: 1 !important;
}

.elementor-form .elementor-field:focus,
.elementor-form input.elementor-field:focus,
.elementor-form textarea.elementor-field:focus,
.elementor-form select.elementor-field:focus {
    background-color: var(--sw-color-form-bg) !important;
    color: var(--sw-color-white) !important;
    border-width: var(--sw-border-w-input) !important;
    border-style: solid !important;
    border-color: var(--sw-color-yellow);
    animation: colorChangeBorder var(--sw-anim-duration) linear infinite var(--sw-anim-offset) !important;
    box-shadow: none !important;
    outline: none !important;
}

.elementor-form input:-webkit-autofill,
.elementor-form input:-webkit-autofill:hover,
.elementor-form input:-webkit-autofill:focus {
    -webkit-text-fill-color: var(--sw-color-gray-light) !important;
    -webkit-box-shadow: 0 0 0 1000px var(--sw-color-form-bg) inset !important;
    transition: background-color 9999s ease-in-out 0s;
}

.elementor-form .elementor-field-label {
    color: var(--sw-color-gray) !important;
    font-weight: 300 !important;
    margin-bottom: 6px;
}

.elementor-form .elementor-mark-required .elementor-field-label::after,
.elementor-form .elementor-field-required .elementor-field-label::after {
    color: var(--sw-color-yellow) !important;
}

.elementor-form .elementor-field-type-checkbox label,
.elementor-form .elementor-field-type-radio label {
    color: var(--sw-color-gray) !important;
    font-weight: 300 !important;
}

.elementor-form .elementor-field-type-checkbox input,
.elementor-form .elementor-field-type-radio input {
    margin-top: 3px;
    accent-color: var(--sw-color-yellow);
}


/* ============================================================
   11  BUTTONS
   ============================================================ */

.button-1,
.button-2 {
    background: transparent !important;
    background-color: transparent !important;
}

.button-1 a.elementor-button,
.button-1 button.elementor-button,
.button-1 .elementor-button,
a.elementor-button.button-1,
button.elementor-button.button-1,
.elementor-button.button-1,
.button-2 a.elementor-button,
.button-2 button.elementor-button,
.button-2 .elementor-button,
a.elementor-button.button-2,
button.elementor-button.button-2,
.elementor-button.button-2 {
    box-sizing: border-box !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-width: var(--sw-border-w) !important;
    border-style: solid !important;
    border-radius: var(--sw-radius-control) !important;
    position: relative;
    overflow: hidden;
    transform: translateY(0);
    filter: brightness(1);
    box-shadow: none !important;
    transition:
        background-color 0.25s ease,
        color 0.25s ease,
        border-color 0.25s ease,
        box-shadow 0.25s ease,
        transform 0.25s ease,
        filter 0.25s ease;
}

/* 11.1 Button 1 – Primary */
.button-1 a.elementor-button,
.button-1 button.elementor-button,
.button-1 .elementor-button,
a.elementor-button.button-1,
button.elementor-button.button-1,
.elementor-button.button-1 {
    background-color: var(--sw-color-yellow);
    color: var(--sw-color-black) !important;
    border-color: transparent !important;
    animation-name: colorChangeBg !important;
}

.button-1 .elementor-button .elementor-button-text,
.elementor-button.button-1 .elementor-button-text {
    color: var(--sw-color-black) !important;
}

.button-1 .elementor-button i,
.button-1 .elementor-button svg {
    color: var(--sw-color-black) !important;
    fill: var(--sw-color-black) !important;
}

.button-1 .elementor-button:hover,
a.elementor-button.button-1:hover,
button.elementor-button.button-1:hover,
.elementor-button.button-1:hover {
    color: var(--sw-color-black) !important;
    transform: translateY(-2px);
    filter: brightness(1.08) saturate(1.08);
    box-shadow: 0 10px 28px rgba(255,255,255,0.14) !important;
}

.button-1 .elementor-button:hover .elementor-button-text,
.elementor-button.button-1:hover .elementor-button-text {
    color: var(--sw-color-black) !important;
}

/* 11.2 Button 2 – Outline */
.button-2 a.elementor-button,
.button-2 button.elementor-button,
.button-2 .elementor-button,
a.elementor-button.button-2,
button.elementor-button.button-2,
.elementor-button.button-2 {
    background-color: transparent !important;
    color: var(--sw-color-white) !important;
    border-color: var(--sw-color-yellow);
    animation-name: colorChangeBorder !important;
}

.button-2 .elementor-button .elementor-button-text,
.elementor-button.button-2 .elementor-button-text {
    color: var(--sw-color-white) !important;
}

.button-2 .elementor-button i,
.button-2 .elementor-button svg {
    color: var(--sw-color-white) !important;
    fill: var(--sw-color-white) !important;
}

.button-2 .elementor-button:hover,
a.elementor-button.button-2:hover,
button.elementor-button.button-2:hover,
.elementor-button.button-2:hover {
    background-color: rgba(255,255,255,0.04) !important;
    color: var(--sw-color-white) !important;
    transform: translateY(-2px);
    filter: brightness(1.08);
    box-shadow: 0 10px 28px rgba(255,255,255,0.12) !important;
}

.button-2 .elementor-button:hover .elementor-button-text,
.elementor-button.button-2:hover .elementor-button-text {
    color: var(--sw-color-white) !important;
}

/* 11.3 Button Link – Text mit animiertem Icon */
.button-link,
.button-link a,
.button-link .elementor-button {
    background: transparent !important;
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
    color: var(--sw-color-gray-light) !important;
    padding: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 0.45em;
    font-weight: 600 !important;
    line-height: 1.2 !important;
    text-decoration: none !important;
    transform: translateX(0);
    transition:
        transform 0.25s ease,
        opacity 0.25s ease;
}

.button-link .elementor-button-text,
.button-link a span:not(.elementor-button-icon),
.button-link span:not(.elementor-button-icon) {
    color: var(--sw-color-gray-light) !important;
    animation-name: none !important;
}

.button-link .elementor-button-icon,
.button-link .elementor-button-icon i,
.button-link i {
    color: var(--sw-color-yellow);
    animation-name: colorChangeFont !important;
    transition:
        transform 0.25s ease,
        opacity 0.25s ease;
}

.button-link .elementor-button-icon svg,
.button-link .elementor-button-icon path,
.button-link svg,
.button-link path {
    fill: var(--sw-color-yellow);
    animation-name: colorChangeFill !important;
    transition:
        transform 0.25s ease,
        opacity 0.25s ease;
}

.button-link:hover,
.button-link a:hover,
.button-link .elementor-button:hover {
    color: var(--sw-color-gray-light) !important;
    transform: translateX(2px);
    opacity: 0.9;
}

.button-link:hover .elementor-button-text,
.button-link a:hover span:not(.elementor-button-icon),
.button-link .elementor-button:hover .elementor-button-text {
    color: var(--sw-color-gray-light) !important;
    animation-name: none !important;
}

.button-link:hover .elementor-button-icon,
.button-link:hover i,
.button-link:hover svg {
    transform: translateX(4px);
}


/* ============================================================
   12  CARDS
   ============================================================ */

.product-card {
    height: 100%;
    display: flex !important;
    flex-direction: column !important;
}

.product-card-inner {
    height: 100%;
    display: flex !important;
    flex-direction: column !important;
}

.product-card-inner .elementor-widget-button {
    margin-top: auto !important;
}

.product-card-inner .elementor-widget-button .elementor-button {
    width: 100%;
}

.project-card {
    height: 100%;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden;
}

.project-card-media {
    height: 320px !important;
    overflow: hidden !important;
    display: block !important;
    flex: 0 0 auto !important;
}

.project-card-media .elementor-widget-container,
.project-card-media a,
.project-card-media picture {
    width: 100% !important;
    height: 100% !important;
    display: block !important;
    overflow: hidden !important;
}

.project-card-media img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center center !important;
    display: block !important;
}

.project-card-content {
    display: flex !important;
    flex-direction: column !important;
    flex: 1 1 auto !important;
}

.project-card-button {
    margin-top: auto !important;
}

@media (max-width: 1024px) {
    .project-card-media {
        height: 260px !important;
    }
}

@media (max-width: 767px) {
    .project-card-media {
        height: 220px !important;
    }
}

/* ============================================================
   13  SEARCH-WIDGET
   Kompakte Suche mit animiertem Such-Icon
   - leer + inaktiv: Lupe sichtbar
   - Fokus: Lupe fährt ein, Eingabefeld übernimmt volle Breite
   - Inhalt vorhanden: Lupe bleibt ausgeblendet
   - leer + Fokus verloren: Lupe erscheint wieder
   ============================================================ */


/* ------------------------------------------------------------
   13.0 Gesamtformular
   Gesamtbreite Desktop: 120px
   ------------------------------------------------------------ */

.elementor-widget-search .e-search-form {
    display: flex !important;
    align-items: center !important;

    width: 120px !important;
    height: 37px !important;

    background: transparent !important;
}


/* ------------------------------------------------------------
   13.1 Such-Icon / linker Bereich
   ------------------------------------------------------------ */

.elementor-widget-search .e-search-label {
    position: relative !important;

    flex: 0 0 36px !important;
    width: 36px !important;
    min-width: 36px !important;
    height: 37px !important;

    box-sizing: border-box !important;

    display: block !important;

    background-color:
        var(--sw-navbar-search-field-background) !important;

    border-top-width: var(--sw-border-w-input) !important;
    border-bottom-width: var(--sw-border-w-input) !important;
    border-left-width: var(--sw-border-w-input) !important;
    border-right-width: 0 !important;

    border-style: solid !important;

    border-top-color: var(--sw-color-gray);
    border-bottom-color: var(--sw-color-gray);
    border-left-color: var(--sw-color-gray);
    border-right-color: transparent;

    border-radius:
        var(--sw-radius-control)
        0
        0
        var(--sw-radius-control) !important;

    color: var(--sw-color-gray) !important;

    padding: 0 !important;
    margin: 0 !important;

    opacity: 1;
    overflow: hidden !important;

    transition:
        width 0.25s ease,
        min-width 0.25s ease,
        flex-basis 0.25s ease,
        opacity 0.18s ease,
        border-color 0.25s ease !important;
}


/* Lupe */

.elementor-widget-search .e-search-label svg {
    position: absolute !important;

    width: 16px !important;
    height: 16px !important;

    left: 8px !important;
    top: 50% !important;

    transform: translateY(-50%) !important;

    margin: 0 !important;

    color: currentColor !important;
    fill: currentColor !important;

    transition:
        opacity 0.15s ease,
        transform 0.25s ease !important;
}


/* ------------------------------------------------------------
   13.2 Eingabebereich
   Normal: 84px
   Aktiv / Inhalt: komplette 120px
   ------------------------------------------------------------ */

.elementor-widget-search .e-search-input-wrapper {
    position: relative !important;

    flex: 1 1 auto !important;

    width: 84px !important;
    min-width: 0 !important;
    height: 37px !important;

    box-sizing: border-box !important;

    display: flex !important;
    align-items: center !important;

    background-color:
        var(--sw-navbar-search-field-background) !important;

    border-top-width: var(--sw-border-w-input) !important;
    border-right-width: var(--sw-border-w-input) !important;
    border-bottom-width: var(--sw-border-w-input) !important;
    border-left-width: 0 !important;

    border-style: solid !important;

    border-top-color: var(--sw-color-gray);
    border-right-color: var(--sw-color-gray);
    border-bottom-color: var(--sw-color-gray);
    border-left-color: transparent;

    border-radius:
        0
        var(--sw-radius-control)
        var(--sw-radius-control)
        0 !important;

    overflow: hidden !important;

    transition:
        width 0.25s ease,
        border-color 0.25s ease,
        border-radius 0.25s ease,
        background-color 0.25s ease !important;
}


/* ------------------------------------------------------------
   13.3 Eingabetext
   35px Innenhöhe bei 37px Gesamtfeld + 1px Border oben/unten
   ------------------------------------------------------------ */

.elementor-widget-search .e-search-input {
    width: 100% !important;
    min-width: 0 !important;

    height: 35px !important;
    min-height: 35px !important;

    box-sizing: border-box !important;

    background: transparent !important;

    color: var(--sw-color-gray-light) !important;
    -webkit-text-fill-color: var(--sw-color-gray-light) !important;

    border: 0 !important;
    outline: 0 !important;
    box-shadow: none !important;

    /*
     * links 7px Abstand
     * rechts 23px reserviert für das X
     */
    padding: 0 23px 0 7px !important;
    margin: 0 !important;

    font-size: inherit !important;
    font-weight: inherit !important;

    /*
     * Text exakt innerhalb der 35px Innenhöhe zentrieren.
     */
    line-height: 35px !important;

    position: static !important;
    top: auto !important;

    vertical-align: middle !important;
}


/* Placeholder im Ruhezustand unsichtbar */
.elementor-widget-search .e-search-input::placeholder {
    color: var(--sw-color-gray) !important;
    -webkit-text-fill-color: var(--sw-color-gray) !important;

    opacity: 0 !important;

    transition: opacity 0.18s ease !important;
}


/* Sobald die Suche aktiv ist und die Lupe verschwindet:
   Placeholder einblenden */
.elementor-widget-search
.e-search-form:focus-within
.e-search-input::placeholder {
    opacity: 0.75 !important;
}
/* ------------------------------------------------------------
   13.4 Clear / X
   ------------------------------------------------------------ */

.elementor-widget-search .e-search-input-wrapper svg {
    position: absolute !important;

    width: 11px !important;
    height: 11px !important;

    right: 6px !important;
    top: 50% !important;

    transform: translateY(-50%) !important;

    margin: 0 !important;

    color: var(--sw-color-gray) !important;
    fill: currentColor !important;

    cursor: pointer !important;

    transition:
        color 0.2s ease,
        opacity 0.2s ease !important;
}


.elementor-widget-search .e-search-input-wrapper svg:hover {
    color: var(--sw-color-gray-light) !important;
}


/* ------------------------------------------------------------
   13.5 AKTIVER ZUSTAND
   Fokus -> Lupe fährt weg
   ------------------------------------------------------------ */

.elementor-widget-search
.e-search-form:focus-within
.e-search-label {
    flex-basis: 0 !important;

    width: 0 !important;
    min-width: 0 !important;

    opacity: 0 !important;

    border-left-width: 0 !important;
}


/* Lupe zusätzlich leicht nach links ausblenden */

.elementor-widget-search
.e-search-form:focus-within
.e-search-label svg {
    opacity: 0 !important;

    transform:
        translate(-8px, -50%) !important;
}


/* Suchfeld erhält bei Fokus linke Rundung + linken Border */

.elementor-widget-search
.e-search-form:focus-within
.e-search-input-wrapper {
    width: 120px !important;

    border-left-width: var(--sw-border-w-input) !important;
    border-left-style: solid !important;
    border-left-color: var(--sw-color-yellow);

    border-radius:
        var(--sw-radius-control) !important;

    border-color: var(--sw-color-yellow);
    animation: colorChangeBorder var(--sw-anim-duration) linear infinite var(--sw-anim-offset) !important;
}


/* ------------------------------------------------------------
   13.6 INHALT VORHANDEN
   Nach Fokusverlust bleibt die Lupe weg,
   solange Text im Input vorhanden ist.

   :placeholder-shown = Input ist leer
   :not(:placeholder-shown) = Input enthält Text
   ------------------------------------------------------------ */

.elementor-widget-search
.e-search-form:has(.e-search-input:not(:placeholder-shown))
.e-search-label {
    flex-basis: 0 !important;

    width: 0 !important;
    min-width: 0 !important;

    opacity: 0 !important;

    border-left-width: 0 !important;
}


.elementor-widget-search
.e-search-form:has(.e-search-input:not(:placeholder-shown))
.e-search-label svg {
    opacity: 0 !important;

    transform:
        translate(-8px, -50%) !important;
}


.elementor-widget-search
.e-search-form:has(.e-search-input:not(:placeholder-shown))
.e-search-input-wrapper {
    width: 120px !important;

    border-left-width: var(--sw-border-w-input) !important;
    border-left-style: solid !important;
    border-left-color: var(--sw-color-gray);

    border-radius:
        var(--sw-radius-control) !important;
}


/* Hat Inhalt UND Fokus -> animierter Fokus-Border */

.elementor-widget-search
.e-search-form:has(.e-search-input:not(:placeholder-shown)):focus-within
.e-search-input-wrapper {
    border-color: var(--sw-color-yellow);
}

/* ------------------------------------------------------------
   13.7 Fokusfarbe der Lupe
   ------------------------------------------------------------ */

.elementor-widget-search
.e-search-form:focus-within
.e-search-label {
    color: var(--sw-color-yellow);
    animation: colorChangeFont var(--sw-anim-duration) linear infinite var(--sw-anim-offset) !important;
}


/* ------------------------------------------------------------
   13.8 Mobile
   Kompakte Header-Suche
   Gesamtbreite: 86px
   ------------------------------------------------------------ */

@media (max-width: 767px) {

    .elementor-widget-search .e-search-form {
        width: 86px !important;
        height: 29px !important;
    }

    /* Linker Bereich mit Lupe */
    .elementor-widget-search .e-search-label {
        flex-basis: 27px !important;

        width: 27px !important;
        min-width: 27px !important;
        height: 29px !important;
    }

    .elementor-widget-search .e-search-label svg {
        width: 12px !important;
        height: 12px !important;

        left: 7px !important;
        top: 50% !important;

        transform: translateY(-50%) !important;
    }

    /* Eingabebereich */
    .elementor-widget-search .e-search-input-wrapper {
        width: 59px !important;
        min-width: 0 !important;
        height: 29px !important;
    }

    /* Eingabetext */
    .elementor-widget-search .e-search-input {
        height: 27px !important;
        min-height: 27px !important;

        padding: 0 18px 0 5px !important;

        font-size: 0.78rem !important;
        line-height: 27px !important;
    }

    /* X */
    .elementor-widget-search .e-search-input-wrapper svg {
        width: 9px !important;
        height: 9px !important;

        right: 5px !important;
        top: 50% !important;

        transform: translateY(-50%) !important;
    }

    /* Fokus / Text vorhanden:
       Lupe verschwindet weiterhin */
    .elementor-widget-search
    .e-search-form:focus-within
    .e-search-label,

    .elementor-widget-search
    .e-search-form:has(.e-search-input:not(:placeholder-shown))
    .e-search-label {
        flex-basis: 0 !important;

        width: 0 !important;
        min-width: 0 !important;
    }

    /* Danach stehen die vollen 86px fürs Suchfeld zur Verfügung */
    .elementor-widget-search
    .e-search-form:focus-within
    .e-search-input-wrapper,

    .elementor-widget-search
    .e-search-form:has(.e-search-input:not(:placeholder-shown))
    .e-search-input-wrapper {
        width: 86px !important;
    }
}
/* ============================================================
   14  BLOG / POST-META ICONS
   Textfarben siehe Link-System 7.5 – hier nur die Icons.
   ============================================================ */

.elementor-post-info i,
.elementor-post-info .elementor-icon-list-icon i,
.elementor-post__meta-data i {
    color: var(--sw-color-yellow);
    animation-name: colorChangeFont !important;
}

.elementor-post-info svg,
.elementor-post-info path,
.elementor-post-info .elementor-icon-list-icon svg,
.elementor-post-info .elementor-icon-list-icon path,
.elementor-post__meta-data svg,
.elementor-post__meta-data path {
    fill: var(--sw-color-yellow);
    animation-name: colorChangeFill !important;
}

/* ============================================================
   14.1 BLOG LOOP – AJAX-SYNCHRONISIERUNG
   ------------------------------------------------------------
   Elementor Taxonomy Filter lädt Loop-Items dynamisch neu.

   Problem:
   .anim-text und .anim-icon würden bei neu geladenen Items
   ihre eigene Animation wieder bei Gelb starten.

   Lösung:
   Innerhalb von .blog-loop laufen Titel, Icons und Button-Pfeile
   weiterhin lokal. Neu geladene Items erhalten per JavaScript
   einen aktuellen negativen Zeitversatz über --sw-anim-offset.
   ============================================================ */


/* ------------------------------------------------------------
   14.1.1 Beitragstitel – anim-text

   Loop-Items werden vom Taxonomy Filter dynamisch neu geladen.
   Der Titel läuft weiterhin lokal; der negative Animations-Delay
   setzt neu geladene Items direkt auf den aktuellen Farbstand.

   Funktioniert für:
   - Überschrift ohne Link
   - Überschrift mit dynamischem Beitrags-Link
   - enthaltene span / strong / etc.
   ------------------------------------------------------------ */

.blog-loop .anim-text .elementor-heading-title,
.blog-loop .anim-text .elementor-heading-title > a,
.blog-loop .anim-text .elementor-heading-title a {
    color: var(--sw-color-yellow);
    animation: colorChangeFont var(--sw-anim-duration) linear infinite var(--sw-anim-offset) !important;
}


/* Unterelemente des Titels erben dieselbe animierte Farbe */
.blog-loop .anim-text .elementor-heading-title
:is(span, strong, em, b, i) {
    color: inherit !important;
    animation: none !important;
}


/* Hover / Tastaturfokus */
.blog-loop .anim-text .elementor-heading-title > a:hover,
.blog-loop .anim-text .elementor-heading-title > a:focus-visible {
    color: var(--sw-color-yellow);
    animation: colorChangeFont var(--sw-anim-duration) linear infinite var(--sw-anim-offset) !important;
    opacity: 0.88;
}

/* ------------------------------------------------------------
   14.1.2 Beitrag Informationen – anim-icon
   ------------------------------------------------------------ */

/* Font-Icons */
.blog-loop
.anim-icon
:is(
    i,
    .elementor-icon-list-icon i
) {
    color: var(--sw-color-yellow);
    animation: colorChangeFont var(--sw-anim-duration) linear infinite var(--sw-anim-offset) !important;
}


/* SVG-Icons */
.blog-loop
.anim-icon
:is(
    svg,
    path,
    .elementor-icon-list-icon svg,
    .elementor-icon-list-icon path
) {
    color: var(--sw-color-yellow);
    fill: var(--sw-color-yellow);
    animation: colorChangeFill var(--sw-anim-duration) linear infinite var(--sw-anim-offset) !important;
}

/* ------------------------------------------------------------
   14.1.3 Beitrag-Button – button-link

   Der Taxonomy Filter lädt auch den Button neu.
   Das animierte Pfeil-Icon startet deshalb keine eigene
   Farbrotation, sondern übernimmt den aktuellen Farbstand per negativem Animations-Delay.
   ------------------------------------------------------------ */


/* Font-Icon */
.blog-loop
.button-link
.elementor-button-icon,
.blog-loop
.button-link
.elementor-button-icon i,
.blog-loop
.button-link i {
    color: var(--sw-color-yellow);
    animation: colorChangeFont var(--sw-anim-duration) linear infinite var(--sw-anim-offset) !important;
}


/* SVG-Icon */
.blog-loop
.button-link
.elementor-button-icon svg,
.blog-loop
.button-link
.elementor-button-icon path,
.blog-loop
.button-link svg,
.blog-loop
.button-link path {
    color: var(--sw-color-yellow);
    fill: var(--sw-color-yellow);
    animation: colorChangeFill var(--sw-anim-duration) linear infinite var(--sw-anim-offset) !important;
}


/* ============================================================
   15  CAROUSEL / SWIPER
   ============================================================ */

.elementor-swiper-button,
.elementor-swiper-button i,
.swiper-button-prev,
.swiper-button-next,
.swiper-button-prev i,
.swiper-button-next i {
    animation: colorChangeFont var(--sw-anim-duration) infinite linear var(--sw-anim-offset) !important;
}

.elementor-swiper-button svg,
.elementor-swiper-button path,
.swiper-button-prev svg,
.swiper-button-next svg,
.swiper-button-prev path,
.swiper-button-next path {
    animation: colorChangeFill var(--sw-anim-duration) infinite linear var(--sw-anim-offset) !important;
}


/* ============================================================
   16  WS FILTER BUILDER – STANDALONE DEMKE SKIN
   ALTES CARD-DESIGN + RESPONSIVE ELEMENTOR-BREITE

   Das PHP-Snippet liefert nur HTML, Zustände und JavaScript.
   Sämtliches Frontend-Layout und Design liegt in diesem Abschnitt.

   Responsive-Prinzip:
   Elementor bestimmt die Filterspalten-Breite.
   Jeder Filter, Select und Slider nutzt exakt 100% dieses Parents.
   Die alten Card-, Hover-, Fokus-, Pill-, Slider- und
   Farbanimationseffekte bleiben erhalten.
   ============================================================ */

body {
    /* Typografie */
    --ws-filter-font-family: inherit;
    --ws-filter-font-size: clamp(0.82rem, 0.76681rem + 0.24828vw, 0.94rem);
    --ws-filter-text-color: var(--sw-color-gray-light);
    --ws-filter-text-weight: 400;

    /* Labels */
    --ws-filter-label-color: var(--sw-color-gray-light);
    --ws-filter-label-bg: transparent;
    --ws-filter-label-hover-bg: transparent;
    --ws-filter-label-weight: 500;
    --ws-filter-label-font-size: clamp(0.82rem, 0.76681rem + 0.24828vw, 0.94rem);
    --ws-filter-label-padding: 0;
    --ws-filter-label-radius: 0;

    /* Layout */
    --ws-filter-gap-between-filters-row: 0px;
    --ws-filter-gap-between-filters-col: 0px;
    --ws-filter-gap-between-pills: 8px;
    --ws-filter-checkbox-gap-row: 8px;
    --ws-filter-checkbox-gap-col: 8px;
    --ws-filter-header-gap: 8px;
    --ws-filter-input-min-width: 0px;

    /* Pills */
    --ws-filter-pill-bg: rgba(255, 255, 255, 0.025);
    --ws-filter-pill-bg-hover: rgba(255, 255, 255, 0.06);
    --ws-filter-pill-bg-active: var(--sw-color-yellow);
    --ws-filter-pill-text: var(--sw-color-gray-light);
    --ws-filter-pill-text-hover: var(--sw-color-white);
    --ws-filter-pill-text-active: var(--sw-color-black);
    --ws-filter-pill-border: 1px solid rgba(255, 255, 255, 0.14);
    --ws-filter-pill-border-active: transparent;
    --ws-filter-pill-radius: var(--sw-radius-pill);
    --ws-filter-pill-padding: 7px 13px;
    --ws-filter-pill-font-size: clamp(0.82rem, 0.76681rem + 0.24828vw, 0.94rem);

    /* Dropdown */
    --ws-filter-dropdown-bg: var(--sw-color-form-bg);
    --ws-filter-dropdown-border: 1px solid var(--sw-border-input-bottom);
    --ws-filter-dropdown-radius: var(--sw-radius-control);
    --ws-filter-dropdown-padding: 9px 12px;
    --ws-filter-dropdown-font-size: clamp(0.82rem, 0.76681rem + 0.24828vw, 0.94rem);
    --ws-filter-dropdown-text-color: var(--sw-color-gray-light);
    --ws-filter-dropdown-hover-bg: var(--sw-color-yellow);
    --ws-filter-dropdown-text-hover: var(--sw-color-black);
    --ws-filter-dropdown-panel-bg: var(--sw-color-form-bg);
    --ws-filter-dropdown-panel-border: rgba(255, 255, 255, 0.22);
    --ws-filter-dropdown-caret-color: var(--sw-color-gray);

    /* Date Range */
    --ws-filter-date-picker-bg: var(--sw-color-form-bg);
    --ws-filter-date-picker-border: 1px solid var(--sw-border-input-bottom);
    --ws-filter-date-picker-radius: var(--sw-radius-control);
    --ws-filter-date-picker-padding: 9px 12px;
    --ws-filter-date-picker-font-size: clamp(0.82rem, 0.76681rem + 0.24828vw, 0.94rem);
    --ws-filter-date-picker-text-color: var(--sw-color-gray-light);
    --ws-filter-date-picker-placeholder-color: var(--sw-color-gray);
    --ws-filter-date-picker-icon-color: var(--sw-color-yellow);
    --ws-filter-date-picker-panel-bg: var(--sw-color-form-bg);
    --ws-filter-date-picker-panel-border: rgba(255, 255, 255, 0.22);
    --ws-filter-date-picker-panel-radius: var(--sw-radius-card);
    --ws-filter-date-picker-panel-shadow: 0 18px 45px rgba(0, 0, 0, 0.45);
    --ws-filter-date-picker-inner-label-color: var(--sw-color-gray);
    --ws-filter-date-picker-inner-field-bg: var(--sw-color-form-bg);
    --ws-filter-date-picker-inner-field-border: 1px solid var(--sw-border-input-bottom);
    --ws-filter-date-picker-inner-field-radius: var(--sw-radius-control);
    --ws-filter-date-picker-inner-field-padding: 9px 12px;
    --ws-filter-date-picker-inner-field-text-color: var(--sw-color-gray-light);
    --ws-filter-date-picker-inner-field-font-size: clamp(0.82rem, 0.76681rem + 0.24828vw, 0.94rem);
    --ws-filter-date-picker-inner-field-icon-color: var(--sw-color-yellow);
    --ws-filter-date-picker-inner-actions-gap: 10px;
    --ws-filter-date-picker-clear-bg: transparent;
    --ws-filter-date-picker-clear-text-color: var(--sw-color-gray-light);
    --ws-filter-date-picker-clear-border: 1px solid rgba(255, 255, 255, 0.22);
    --ws-filter-date-picker-clear-radius: var(--sw-radius-control);
    --ws-filter-date-picker-clear-padding: 8px 12px;
    --ws-filter-date-picker-clear-hover-bg: rgba(255, 255, 255, 0.06);
    --ws-filter-date-picker-clear-hover-text-color: var(--sw-color-white);
    --ws-filter-date-picker-apply-bg: var(--sw-color-yellow);
    --ws-filter-date-picker-apply-text-color: var(--sw-color-black);
    --ws-filter-date-picker-apply-border: 1px solid transparent;
    --ws-filter-date-picker-apply-radius: var(--sw-radius-control);
    --ws-filter-date-picker-apply-padding: 8px 12px;
    --ws-filter-date-picker-apply-hover-bg: var(--sw-color-yellow);
    --ws-filter-date-picker-apply-hover-text-color: var(--sw-color-black);
    --ws-filter-date-picker-apply-disabled-bg: var(--sw-color-disabled-bg);
    --ws-filter-date-picker-apply-disabled-text-color: var(--sw-color-gray);
    --ws-filter-date-picker-preset-bg: transparent;
    --ws-filter-date-picker-preset-text-color: var(--sw-color-gray-light);
    --ws-filter-date-picker-preset-border: 1px solid rgba(255, 255, 255, 0.22);
    --ws-filter-date-picker-preset-radius: var(--sw-radius-pill);
    --ws-filter-date-picker-preset-padding: 7px 11px;
    --ws-filter-date-picker-preset-font-size: clamp(0.78rem, 0.74rem + 0.17vw, 0.88rem);
    --ws-filter-date-picker-preset-hover-bg: rgba(255, 255, 255, 0.06);
    --ws-filter-date-picker-preset-hover-text-color: var(--sw-color-white);
    --ws-filter-date-picker-preset-active-bg: var(--sw-color-yellow);
    --ws-filter-date-picker-preset-active-text-color: var(--sw-color-black);

    /* Checkboxen */
    --ws-filter-checkbox-size: 16px;
    --ws-filter-checkbox-color: var(--sw-color-yellow);
    --ws-filter-checkbox-border-color: rgba(255, 255, 255, 0.3);
    --ws-filter-checkbox-bg: var(--sw-color-form-bg);
    --ws-filter-checkbox-hover-bg: rgba(255, 255, 255, 0.12);
    --ws-filter-checkbox-check-color: var(--sw-color-black);

    /* Slider / Zahlenfelder */
    --ws-filter-slider-track-color: rgba(255, 255, 255, 0.18);
    --ws-filter-slider-track-height: 3px;
    --ws-filter-slider-thumb-color: var(--sw-color-yellow);
    --ws-filter-slider-thumb-size: 16px;
    --ws-filter-slider-thumb-margin-top: -7px;
    --ws-filter-slider-wrapper-width: 100%;
    --ws-filter-input-border: 1px solid var(--sw-border-input-bottom);
    --ws-filter-input-border-radius: var(--sw-radius-control);
    --ws-filter-input-bg: var(--sw-color-form-bg);
    --ws-filter-price-input-width: 88px;
    --ws-filter-price-input-padding: 9px 10px;
    --ws-filter-price-input-font-size: clamp(0.82rem, 0.76681rem + 0.24828vw, 0.94rem);
    --ws-filter-price-input-text-color: var(--sw-color-gray-light);

    /* Reset pro Filter */
    --ws-filter-reset-icon-size: 16px;
    --ws-filter-reset-icon-color: var(--sw-color-gray);
    --ws-filter-reset-icon-color-hover: var(--sw-color-black);
    --ws-filter-reset-btn-bg: transparent;
    --ws-filter-reset-btn-bg-hover: var(--sw-color-yellow);
    --ws-filter-reset-btn-radius: var(--sw-radius-pill);
    --ws-filter-reset-btn-padding: 0;

    /* Reset All */
    --ws-filter-reset-all-bg: transparent;
    --ws-filter-reset-all-bg-hover: rgba(255, 255, 255, 0.04);
    --ws-filter-reset-all-color: var(--sw-color-white);
    --ws-filter-reset-all-color-hover: var(--sw-color-white);
    --ws-filter-reset-all-border: var(--sw-border-w) solid var(--sw-color-yellow);
    --ws-filter-reset-all-radius: var(--sw-radius-control);
    --ws-filter-reset-all-padding: 10px 16px;
    --ws-filter-reset-all-weight: 500;

    /* View Results */
    --ws-filter-view-results-bg: transparent;
    --ws-filter-view-results-bg-hover: rgba(255, 255, 255, 0.04);
    --ws-filter-view-results-color: var(--sw-color-white);
    --ws-filter-view-results-color-hover: var(--sw-color-white);
    --ws-filter-view-results-border: var(--sw-border-w) solid var(--sw-color-yellow);
    --ws-filter-view-results-radius: var(--sw-radius-control);
    --ws-filter-view-results-padding: 10px 16px;
    --ws-filter-view-results-font-size: clamp(0.82rem, 0.76681rem + 0.24828vw, 0.94rem);
    --ws-filter-view-results-font-weight: 500;

    /* Farbswatches */
    --ws-filter-swatch-bg-hover: rgba(255, 255, 255, 0.06);
    --ws-filter-swatch-bg-active: rgba(255, 255, 255, 0.06);
    --ws-filter-swatch-border-active: 2px solid var(--sw-color-yellow);
    --ws-filter-swatch-dot-size: 15px;
    --ws-filter-swatch-dot-radius: 50%;
    --ws-filter-swatch-dot-border: 1px solid rgba(255, 255, 255, 0.35);
    --ws-filter-swatch-dot-margin-right: 6px;
    --ws-filter-swatch-option-font-size: clamp(0.82rem, 0.76681rem + 0.24828vw, 0.94rem);
    --ws-filter-swatch-option-padding: 7px 13px;
    --ws-filter-swatch-option-border: 1px solid rgba(255, 255, 255, 0.14);
    --ws-filter-swatch-option-border-active: 2px solid var(--sw-color-yellow);
}

/* 16.0 Funktions- und Strukturbasis */
.ws-filter-conditional-hidden,
.ws-filter-host-hidden {
    display: none !important;
}

.ws-filter-host-hidden {
    margin: 0 !important;
    padding: 0 !important;
    min-height: 0 !important;
}

.ws-wc-sr-only {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    clip-path: inset(50%) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

.ws-wc-filters-skin.ws-wc-filter-wrapper,
.ws-wc-sort-wrapper {
    font-family: var(--ws-filter-font-family) !important;
    font-size: var(--ws-filter-font-size) !important;
    font-weight: var(--ws-filter-text-weight) !important;
}

.ws-wc-filters-skin .ws-wc-filter-form,
.ws-wc-sort-wrapper .ws-wc-sort-form.ws-wc-filter-form {
    display: flex;
    flex-wrap: wrap;
    gap: var(--ws-filter-gap-between-filters-row) var(--ws-filter-gap-between-filters-col);
    align-items: center;
    justify-content: flex-start;
    width: 100%;
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
}

.ws-wc-filters-skin .ws-wc-filter-control {
    width: 100%;
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
}

.ws-wc-filters-skin .ws-wc-filter-label,
.ws-wc-sort-wrapper .ws-wc-filter-label {
    font-size: var(--ws-filter-label-font-size);
    font-weight: var(--ws-filter-label-weight);
    color: var(--ws-filter-label-color);
    background: var(--ws-filter-label-bg);
    padding: var(--ws-filter-label-padding);
    border-radius: var(--ws-filter-label-radius);
}

.ws-wc-filters-skin .ws-wc-filter-label:hover,
.ws-wc-sort-wrapper .ws-wc-filter-label:hover {
    background: var(--ws-filter-label-hover-bg);
}

/* Reset-X: Funktionsbasis */
.ws-wc-filters-skin .ws-wc-filter-reset {
    appearance: none;
    background: var(--ws-filter-reset-btn-bg);
    border-radius: var(--ws-filter-reset-btn-radius);
    cursor: pointer;
}

.ws-wc-filters-skin .ws-wc-filter-reset span[aria-hidden="true"] {
    color: var(--ws-filter-reset-icon-color);
    font-size: var(--ws-filter-reset-icon-size);
    line-height: 1;
}

.ws-wc-filters-skin .ws-wc-filter-reset:hover {
    background: var(--ws-filter-reset-btn-bg-hover);
}

.ws-wc-filters-skin .ws-wc-filter-reset:hover span[aria-hidden="true"] {
    color: var(--ws-filter-reset-icon-color-hover);
}

/* Native Text-/Zahlenfelder */
.ws-wc-filters-skin .ws-wc-filter-control input[type="text"],
.ws-wc-filters-skin .ws-wc-filter-control input[type="number"] {
    width: 100%;
    min-width: 0;
    max-width: 100%;
    padding: var(--ws-filter-price-input-padding);
    border-radius: var(--ws-filter-input-border-radius);
    border: var(--ws-filter-input-border);
    background: var(--ws-filter-input-bg);
    color: var(--ws-filter-price-input-text-color);
    font-size: var(--ws-filter-price-input-font-size);
    font-weight: var(--ws-filter-text-weight);
    box-sizing: border-box;
}

/* Custom Select / Sortierung */
.ws-wc-filters-skin .ws-custom-select,
.ws-wc-sort-wrapper .ws-custom-select {
    position: relative;
    width: 100%;
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
}

.ws-wc-filters-skin .ws-custom-select-toggle,
.ws-wc-sort-wrapper .ws-custom-select-toggle {
    width: 100%;
    min-width: 0;
    max-width: 100%;
    padding: var(--ws-filter-dropdown-padding);
    border-radius: var(--ws-filter-dropdown-radius);
    border: var(--ws-filter-dropdown-border);
    background: var(--ws-filter-dropdown-bg);
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    color: var(--ws-filter-dropdown-text-color);
    font-size: var(--ws-filter-dropdown-font-size);
    font-family: inherit;
    box-sizing: border-box;
}

.ws-wc-filters-skin .ws-custom-select-label,
.ws-wc-sort-wrapper .ws-custom-select-label {
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ws-wc-filters-skin .ws-custom-select-caret,
.ws-wc-sort-wrapper .ws-custom-select-caret {
    flex: 0 0 auto;
    margin-left: 0.5rem;
    color: var(--ws-filter-dropdown-caret-color);
}

.ws-wc-filters-skin .ws-custom-select-panel,
.ws-wc-sort-wrapper .ws-custom-select-panel {
    position: absolute;
    top: calc(100% + 2px);
    left: 0;
    display: none;
    width: 100%;
    min-width: 0;
    max-width: 100%;
    max-height: 220px;
    overflow-y: auto;
    padding: 0.25rem 0;
    background: var(--ws-filter-dropdown-panel-bg);
    border: 1px solid var(--ws-filter-dropdown-panel-border);
    border-radius: var(--ws-filter-dropdown-radius);
}

.ws-wc-filters-skin .ws-custom-select.is-open .ws-custom-select-panel,
.ws-wc-sort-wrapper .ws-custom-select.is-open .ws-custom-select-panel {
    display: block;
}

.ws-wc-filters-skin .ws-custom-select-option,
.ws-wc-sort-wrapper .ws-custom-select-option {
    width: 100%;
    max-width: 100%;
    padding: 0.5rem 0.75rem;
    border: 0;
    background: transparent;
    color: var(--ws-filter-dropdown-text-color);
    text-align: left;
    cursor: pointer;
    font: inherit;
    white-space: normal;
    overflow-wrap: anywhere;
    box-sizing: border-box;
}

.ws-wc-filters-skin .ws-custom-select-option:hover,
.ws-wc-sort-wrapper .ws-custom-select-option:hover {
    background: var(--ws-filter-dropdown-hover-bg);
    color: var(--ws-filter-dropdown-text-hover);
}

/* Pills */
.ws-wc-filters-skin .ws-wc-filter-multiselect-inline {
    display: flex;
    flex-wrap: wrap;
    gap: var(--ws-filter-gap-between-pills);
    width: 100%;
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
}

.ws-wc-filters-skin .ws-wc-filter-multiselect-option {
    position: relative;
    display: inline-flex;
    align-items: center;
    cursor: pointer;
    border: var(--ws-filter-pill-border);
    border-radius: var(--ws-filter-pill-radius);
    background: var(--ws-filter-pill-bg);
    color: var(--ws-filter-pill-text);
    padding: var(--ws-filter-pill-padding);
    font-size: var(--ws-filter-pill-font-size);
    font-weight: var(--ws-filter-text-weight);
}

.ws-wc-filters-skin .ws-wc-filter-multiselect-option input[type="checkbox"],
.ws-wc-filters-skin .ws-wc-filter-multiselect-option input[type="radio"] {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

.ws-wc-filters-skin .ws-wc-filter-multiselect-option span {
    color: inherit;
    white-space: nowrap;
}

.ws-wc-filters-skin .ws-wc-filter-multiselect-option:hover {
    background: var(--ws-filter-pill-bg-hover);
    color: var(--ws-filter-pill-text-hover);
}

.ws-wc-filters-skin .ws-wc-filter-multiselect-option.is-active {
    background: var(--ws-filter-pill-bg-active);
    color: var(--ws-filter-pill-text-active);
    border-color: var(--ws-filter-pill-border-active);
}

/* Klassische Checkboxen */
.ws-wc-filters-skin .ws-wc-filter-checkbox-group {
    display: flex;
    flex-wrap: wrap;
    gap: var(--ws-filter-checkbox-gap-row) var(--ws-filter-checkbox-gap-col);
}

.ws-wc-filters-skin .ws-wc-filter-checkbox {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    cursor: pointer;
}

.ws-wc-filters-skin .ws-wc-filter-checkbox input[type="checkbox"] {
    width: var(--ws-filter-checkbox-size);
    height: var(--ws-filter-checkbox-size);
    flex: 0 0 var(--ws-filter-checkbox-size);
    appearance: none;
    background-color: var(--ws-filter-checkbox-bg);
    border: 1px solid var(--ws-filter-checkbox-border-color) !important;
    border-radius: 3px;
    cursor: pointer;
    position: relative;
    display: inline-block;
    box-sizing: border-box;
}

.ws-wc-filters-skin .ws-wc-filter-checkbox input[type="checkbox"]::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 5px;
    height: 9px;
    border-right: 2px solid transparent;
    border-bottom: 2px solid transparent;
    transform: translate(-50%, -58%) rotate(45deg) scale(0);
    transform-origin: center;
    transition: border-color 0.15s ease, transform 0.15s ease;
}

.ws-wc-filters-skin .ws-wc-filter-checkbox input[type="checkbox"]:checked {
    background-color: var(--ws-filter-checkbox-color);
}

.ws-wc-filters-skin .ws-wc-filter-checkbox input[type="checkbox"]:checked::before {
    border-right-color: var(--ws-filter-checkbox-check-color);
    border-bottom-color: var(--ws-filter-checkbox-check-color);
    transform: translate(-50%, -58%) rotate(45deg) scale(1);
}

.ws-wc-filters-skin .ws-wc-filter-checkbox input[type="checkbox"]:hover {
    background-color: var(--ws-filter-checkbox-hover-bg);
}

.ws-wc-filters-skin .ws-wc-filter-checkbox input[type="checkbox"]:focus-visible {
    outline: 2px solid var(--sw-color-yellow);
    animation: colorChangeOutline var(--sw-anim-duration) linear infinite var(--sw-anim-offset) !important;
    outline-offset: 3px;
}

/* Farbswatches */
.ws-colour-swatch {
    width: var(--ws-filter-swatch-dot-size);
    height: var(--ws-filter-swatch-dot-size);
    flex: 0 0 var(--ws-filter-swatch-dot-size);
    display: inline-block;
    margin-right: var(--ws-filter-swatch-dot-margin-right);
    border-radius: var(--ws-filter-swatch-dot-radius);
    background: var(--ws-swatch);
    border: var(--ws-filter-swatch-dot-border);
    box-sizing: border-box;
}

.ws-wc-filters-skin .ws-wc-filter-multiselect-option:has(.ws-colour-swatch) {
    padding: var(--ws-filter-swatch-option-padding);
    font-size: var(--ws-filter-swatch-option-font-size);
    border: var(--ws-filter-swatch-option-border);
}

.ws-wc-filters-skin .ws-wc-filter-multiselect-option.is-active:has(.ws-colour-swatch) {
    background: var(--ws-filter-swatch-bg-active);
    border: var(--ws-filter-swatch-option-border-active);
}

/* Range-Grundstruktur */
.ws-wc-filters-skin .ws-price-range-wrapper {
    display: inline-flex;
    flex-direction: column;
    gap: 0.35rem;
}

.ws-price-range-display {
    display: none;
    align-items: center;
    gap: 0.35rem;
}

.ws-price-range-wrapper[data-currency-enabled="1"] .ws-price-range-display {
    display: inline-flex;
}

/* Date Range */
.ws-wc-filters-skin .ws-date-range-group {
    position: relative;
    width: 100%;
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
}

.ws-wc-filters-skin .ws-date-range-trigger {
    width: 100%;
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: var(--ws-filter-date-picker-padding);
    border: var(--ws-filter-date-picker-border);
    border-radius: var(--ws-filter-date-picker-radius);
    background: var(--ws-filter-date-picker-bg);
    color: var(--ws-filter-date-picker-text-color);
    cursor: pointer;
    font: inherit;
    font-size: var(--ws-filter-date-picker-font-size);
    text-align: left;
}

.ws-wc-filters-skin .ws-date-range-trigger-text {
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ws-wc-filters-skin .ws-date-range-trigger-text.is-placeholder {
    color: var(--ws-filter-date-picker-placeholder-color);
}

.ws-wc-filters-skin .ws-date-range-trigger-icon {
    flex: 0 0 auto;
    color: var(--ws-filter-date-picker-icon-color);
}

.ws-wc-filters-skin .ws-date-range-panel {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    z-index: 9999;
    width: 100%;
    min-width: 0;
    max-width: 100%;
    padding: 12px;
    background: var(--ws-filter-date-picker-panel-bg);
    border: 1px solid var(--ws-filter-date-picker-panel-border);
    border-radius: var(--ws-filter-date-picker-panel-radius);
    box-shadow: var(--ws-filter-date-picker-panel-shadow);
}

.ws-wc-filters-skin .ws-date-range-presets {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 12px;
}

.ws-wc-filters-skin .ws-date-range-preset {
    padding: var(--ws-filter-date-picker-preset-padding);
    border: var(--ws-filter-date-picker-preset-border);
    border-radius: var(--ws-filter-date-picker-preset-radius);
    background: var(--ws-filter-date-picker-preset-bg);
    color: var(--ws-filter-date-picker-preset-text-color);
    cursor: pointer;
    font: inherit;
    font-size: var(--ws-filter-date-picker-preset-font-size);
}

.ws-wc-filters-skin .ws-date-range-preset:hover,
.ws-wc-filters-skin .ws-date-range-preset:focus-visible {
    background: var(--ws-filter-date-picker-preset-hover-bg);
    color: var(--ws-filter-date-picker-preset-hover-text-color);
}

.ws-wc-filters-skin .ws-date-range-preset.is-active,
.ws-wc-filters-skin .ws-date-range-preset[aria-pressed="true"] {
    background: var(--ws-filter-date-picker-preset-active-bg);
    color: var(--ws-filter-date-picker-preset-active-text-color);
}

.ws-wc-filters-skin .ws-date-range-panel-row {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
}

.ws-wc-filters-skin .ws-date-range-panel-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
    color: var(--ws-filter-date-picker-inner-label-color);
    font-size: 0.92em;
}

.ws-wc-filters-skin .ws-date-range-input {
    width: 100%;
    padding: var(--ws-filter-date-picker-inner-field-padding);
    border: var(--ws-filter-date-picker-inner-field-border) !important;
    border-radius: var(--ws-filter-date-picker-inner-field-radius);
    background: var(--ws-filter-date-picker-inner-field-bg);
    color: var(--ws-filter-date-picker-inner-field-text-color);
    font-size: var(--ws-filter-date-picker-inner-field-font-size);
    box-sizing: border-box;
}

.ws-wc-filters-skin .ws-date-range-panel-actions {
    display: flex;
    justify-content: space-between;
    gap: var(--ws-filter-date-picker-inner-actions-gap);
    margin-top: 12px;
}

.ws-wc-filters-skin .ws-date-range-clear,
.ws-wc-filters-skin .ws-date-range-apply {
    cursor: pointer;
    font: inherit;
}

.ws-wc-filters-skin .ws-date-range-clear {
    padding: var(--ws-filter-date-picker-clear-padding);
    border: var(--ws-filter-date-picker-clear-border);
    border-radius: var(--ws-filter-date-picker-clear-radius);
    background: var(--ws-filter-date-picker-clear-bg);
    color: var(--ws-filter-date-picker-clear-text-color);
}

.ws-wc-filters-skin .ws-date-range-clear:hover,
.ws-wc-filters-skin .ws-date-range-clear:focus-visible {
    background: var(--ws-filter-date-picker-clear-hover-bg);
    color: var(--ws-filter-date-picker-clear-hover-text-color);
}

.ws-wc-filters-skin .ws-date-range-apply {
    padding: var(--ws-filter-date-picker-apply-padding);
    border: var(--ws-filter-date-picker-apply-border);
    border-radius: var(--ws-filter-date-picker-apply-radius);
    background: var(--ws-filter-date-picker-apply-bg);
    color: var(--ws-filter-date-picker-apply-text-color);
}

.ws-wc-filters-skin .ws-date-range-apply:hover:not([disabled]):not([aria-disabled="true"]),
.ws-wc-filters-skin .ws-date-range-apply:focus-visible:not([disabled]):not([aria-disabled="true"]) {
    background: var(--ws-filter-date-picker-apply-hover-bg);
    color: var(--ws-filter-date-picker-apply-hover-text-color);
}

.ws-wc-filters-skin .ws-date-range-apply[disabled],
.ws-wc-filters-skin .ws-date-range-apply[aria-disabled="true"] {
    background: var(--ws-filter-date-picker-apply-disabled-bg);
    color: var(--ws-filter-date-picker-apply-disabled-text-color);
    cursor: not-allowed;
}

/* Orientation aus dem Filter Builder erhalten */
@media (min-width: 769px) {
    .ws-wc-filter-wrapper[data-desktop-orientation="horizontal"] .ws-wc-filter-form {
        flex-direction: row;
        align-items: center;
    }

    .ws-wc-filter-wrapper[data-desktop-orientation="vertical"] .ws-wc-filter-form {
        flex-direction: column;
        align-items: stretch;
    }

    .ws-wc-filter-wrapper[data-desktop-orientation="vertical"] .ws-wc-filter-multiselect-inline,
    .ws-wc-filter-wrapper[data-desktop-orientation="vertical"] .ws-wc-filter-checkbox-group {
        flex-direction: column;
        align-items: stretch;
    }

    .ws-wc-filter-wrapper[data-desktop-orientation="vertical"] .ws-wc-filter-multiselect-option {
        width: 100%;
        justify-content: flex-start;
    }
}

/* Reset All / Redirect: vollständige Basis */
.ws-wc-filter-reset-all,
.ws-wc-filter-redirect-button {
    appearance: none;
    cursor: pointer;
    font-family: inherit;
}

.ws-wc-filter-reset-all {
    padding: var(--ws-filter-reset-all-padding);
    border: var(--ws-filter-reset-all-border);
    border-radius: var(--ws-filter-reset-all-radius);
    background: var(--ws-filter-reset-all-bg);
    color: var(--ws-filter-reset-all-color);
    font-size: var(--ws-filter-font-size);
    font-weight: var(--ws-filter-reset-all-weight);
}

.ws-wc-filter-reset-all:hover,
.ws-wc-filter-reset-all:focus-visible {
    background: var(--ws-filter-reset-all-bg-hover);
    color: var(--ws-filter-reset-all-color-hover);
}

.ws-wc-filter-redirect-wrap {
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

.ws-wc-filter-redirect-button {
    padding: var(--ws-filter-view-results-padding);
    border: var(--ws-filter-view-results-border);
    border-radius: var(--ws-filter-view-results-radius);
    background: var(--ws-filter-view-results-bg);
    color: var(--ws-filter-view-results-color);
    font-size: var(--ws-filter-view-results-font-size);
    font-weight: var(--ws-filter-view-results-font-weight);
}

.ws-wc-filter-redirect-button:hover,
.ws-wc-filter-redirect-button:focus-visible {
    background: var(--ws-filter-view-results-bg-hover);
    color: var(--ws-filter-view-results-color-hover);
}

/* 16.1 Wrapper */
.product-filter-area {
    width: 100%;
    min-width: 0;
    max-width: 100%;
    position: relative;
    box-sizing: border-box;
}

/*
 * Elementor bestimmt die Spaltenbreite (z. B. 25% / 25% / 100%).
 * Das Shortcode-Widget und jeder Filter nehmen davon exakt 100%.
 */
.elementor-widget-shortcode:has(.ws-wc-filter-wrapper),
.elementor-widget-shortcode:has(.ws-wc-sort-wrapper),
.elementor-widget-html:has(.ws-wc-filter-wrapper),
.elementor-widget-html:has(.ws-wc-sort-wrapper),
.elementor-widget-shortcode:has(.ws-wc-filter-wrapper) > .elementor-widget-container,
.elementor-widget-shortcode:has(.ws-wc-sort-wrapper) > .elementor-widget-container,
.elementor-widget-html:has(.ws-wc-filter-wrapper) > .elementor-widget-container,
.elementor-widget-html:has(.ws-wc-sort-wrapper) > .elementor-widget-container,
.elementor-widget-shortcode:has(.ws-wc-filter-wrapper) .elementor-shortcode,
.elementor-widget-shortcode:has(.ws-wc-sort-wrapper) .elementor-shortcode {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
}

.ws-wc-filters-skin.ws-wc-filter-wrapper,
.ws-wc-sort-wrapper {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    font-family: inherit !important;
    color: var(--sw-color-gray) !important;
    background: rgba(255, 255, 255, 0.025) !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    border-radius: var(--sw-radius-card) !important;
    padding: 12px 14px !important;
    margin: 0 !important;
    box-shadow: none !important;
    transition:
        border-color 0.2s ease,
        background-color 0.2s ease;
}

.ws-wc-filters-skin.ws-wc-filter-wrapper:hover,
.ws-wc-sort-wrapper:hover {
    border-color: rgba(255, 255, 255, 0.22) !important;
    background: rgba(255, 255, 255, 0.035) !important;
}

.ws-wc-filters-skin .ws-wc-filter-header {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 8px !important;
    margin-bottom: 8px !important;
}

.ws-wc-filters-skin .ws-wc-filter-label,
.ws-wc-sort-wrapper .ws-wc-filter-label {
    letter-spacing: 0.02em !important;
    line-height: 1.2 !important;
    text-decoration: none !important;
}

/* 16.2 Reset-X pro Filter */
.ws-wc-filters-skin .ws-wc-filter-reset {
    width: 24px !important;
    height: 24px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border: 1px solid rgba(255, 255, 255, 0.14) !important;
    padding: 0 !important;
    transition:
        color 0.2s ease,
        border-color 0.2s ease,
        background-color 0.2s ease,
        transform 0.2s ease !important;
}

.ws-wc-filters-skin .ws-wc-filter-reset:hover {
    border-color: var(--sw-color-yellow) !important;
    transform: rotate(90deg);
}

.ws-wc-filters-skin .ws-wc-filter-reset:focus-visible {
    outline: 2px solid var(--sw-color-yellow) !important;
    outline-offset: 3px !important;
}

/* 16.3 Inputs */
.ws-wc-filters-skin .ws-wc-filter-control input[type="text"],
.ws-wc-filters-skin .ws-wc-filter-control input[type="number"],
.ws-wc-filters-skin .ws-price-range-input,
.ws-wc-filters-skin .ws-date-range-input {
    background-color: var(--sw-color-form-bg) !important;
    color: var(--sw-color-gray-light) !important;
    border-top: var(--sw-border-w-input) solid var(--sw-border-input-top) !important;
    border-left: var(--sw-border-w-input) solid var(--sw-border-input-side) !important;
    border-right: var(--sw-border-w-input) solid var(--sw-border-input-side) !important;
    border-bottom: var(--sw-border-w-input) solid var(--sw-border-input-bottom) !important;
    border-radius: var(--sw-radius-control) !important;
    font-weight: 300 !important;
    line-height: 1.3 !important;
    box-shadow: none !important;
    outline: none !important;
}

.ws-wc-filters-skin .ws-wc-filter-control input[type="text"]:focus,
.ws-wc-filters-skin .ws-wc-filter-control input[type="number"]:focus,
.ws-wc-filters-skin .ws-price-range-input:focus,
.ws-wc-filters-skin .ws-date-range-input:focus {
    color: var(--sw-color-white) !important;
    border-width: var(--sw-border-w-input) !important;
    border-style: solid !important;
    border-color: var(--sw-color-yellow);
    animation: colorChangeBorder var(--sw-anim-duration) linear infinite var(--sw-anim-offset) !important;
    box-shadow: none !important;
    outline: none !important;
}

/* 16.4 Price-Range-Slider */
.ws-wc-filters-skin .ws-price-range-wrapper {
    --dmk-min-pos: 0%;
    --dmk-max-pos: 100%;
    --dmk-range-left: 0%;
    --dmk-range-width: 100%;
    --dmk-badge-width: 58px;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
}

.ws-wc-filters-skin .ws-price-range-row {
    position: relative !important;
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    padding-top: 30px !important;
    min-height: 58px !important;
    gap: 0 !important;
}

.ws-wc-filters-skin .ws-price-range-separator {
    display: none !important;
}

.ws-wc-filters-skin .ws-price-range-slider-wrapper {
    position: relative !important;

    /*
     * Der Track folgt der Filterbreite.
     * Links/rechts wird nur je eine halbe Thumb-Breite reserviert,
     * damit die runden Handles komplett innerhalb der Card bleiben.
     */
    width: calc(100% - var(--ws-filter-slider-thumb-size, 16px)) !important;
    min-width: 0 !important;
    max-width: calc(100% - var(--ws-filter-slider-thumb-size, 16px)) !important;

    margin-left: calc(var(--ws-filter-slider-thumb-size, 16px) / 2) !important;
    margin-right: calc(var(--ws-filter-slider-thumb-size, 16px) / 2) !important;

    height: 28px !important;
    box-sizing: border-box !important;
    flex: none !important;
}

/* Ruhige Grundlinie */
.ws-wc-filters-skin .ws-price-range-slider-wrapper::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    height: var(--ws-filter-slider-track-height, 3px);
    transform: translateY(-50%);
    background-color: var(--ws-filter-slider-track-color, rgba(255, 255, 255, 0.18));
    border-radius: var(--sw-radius-pill);
    pointer-events: none;
    z-index: 0;
}

/* Aktive Strecke zwischen Minimum und Maximum */
.ws-wc-filters-skin .ws-price-range-slider-wrapper::after {
    content: "";
    position: absolute;
    left: var(--dmk-range-left);
    top: 50%;
    width: var(--dmk-range-width);
    height: var(--ws-filter-slider-track-height, 3px);
    transform: translateY(-50%);
    background-color: var(--sw-color-yellow);
    border-radius: var(--sw-radius-pill);
    opacity: 0;
    pointer-events: none;
    z-index: 1;
}

.ws-wc-filters-skin
.ws-price-range-wrapper.dmk-range-active
.ws-price-range-slider-wrapper::after {
    opacity: 1;
    animation: colorChangeBg var(--sw-anim-duration) linear infinite var(--sw-anim-offset) !important;
}

/* Beide nativen Range-Inputs liegen deckungsgleich übereinander */
.ws-wc-filters-skin .ws-price-range-slider-wrapper .ws-price-range {
    position: absolute !important;
    left: 0 !important;
    right: 0 !important;
    top: 50% !important;
    width: 100% !important;
    margin: 0 !important;
    transform: translateY(-50%) !important;
    background: transparent !important;
    pointer-events: none !important;
    -webkit-appearance: none !important;
    appearance: none !important;
    z-index: 3 !important;
}

.ws-wc-filters-skin .ws-price-range-slider-wrapper .ws-price-range-max {
    z-index: 4 !important;
}

.ws-wc-filters-skin
.ws-price-range-slider-wrapper
.ws-price-range::-webkit-slider-runnable-track {
    height: var(--ws-filter-slider-track-height, 3px) !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: var(--sw-radius-pill) !important;
}

.ws-wc-filters-skin
.ws-price-range-slider-wrapper
.ws-price-range::-moz-range-track {
    height: var(--ws-filter-slider-track-height, 3px) !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: var(--sw-radius-pill) !important;
}

/* Sliderpunkte im neutralen Zustand */
.ws-wc-filters-skin
.ws-price-range-slider-wrapper
.ws-price-range::-webkit-slider-thumb {
    width: var(--ws-filter-slider-thumb-size, 16px) !important;
    height: var(--ws-filter-slider-thumb-size, 16px) !important;
    margin-top: -6.5px !important;
    background-color: var(--sw-color-gray-light);
    background-image: none !important;
    border: 2px solid var(--sw-color-black) !important;
    border-radius: var(--sw-radius-pill) !important;
    cursor: pointer !important;
    pointer-events: auto !important;
    -webkit-appearance: none !important;
    appearance: none !important;
    animation: none;
    box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.06) !important;
}

.ws-wc-filters-skin
.ws-price-range-slider-wrapper
.ws-price-range::-moz-range-thumb {
    width: var(--ws-filter-slider-thumb-size, 16px) !important;
    height: var(--ws-filter-slider-thumb-size, 16px) !important;
    background-color: var(--sw-color-gray-light);
    background-image: none !important;
    border: 2px solid var(--sw-color-black) !important;
    border-radius: var(--sw-radius-pill) !important;
    cursor: pointer !important;
    pointer-events: auto !important;
    animation: none;
    box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.06) !important;
}

/*
 * Sobald der Bereich aktiv ist, animieren BEIDE Punkte synchron
 * mit der aktiven Strecke. Die zusätzlichen Einzelzustände dienen
 * als Fallback, falls ein Browser/JS-Zustand nur min oder max setzt.
 */
.ws-wc-filters-skin
.ws-price-range-wrapper.dmk-range-active
.ws-price-range-min::-webkit-slider-thumb,
.ws-wc-filters-skin
.ws-price-range-wrapper.dmk-range-active
.ws-price-range-max::-webkit-slider-thumb,
.ws-wc-filters-skin
.ws-price-range-wrapper.dmk-min-active
.ws-price-range-min::-webkit-slider-thumb,
.ws-wc-filters-skin
.ws-price-range-wrapper.dmk-max-active
.ws-price-range-max::-webkit-slider-thumb {
    background-color: var(--sw-color-yellow);
    background-image: none !important;
    animation: colorChangeBg var(--sw-anim-duration) linear infinite var(--sw-anim-offset) !important;
    box-shadow:
        0 0 0 4px rgba(255, 255, 255, 0.10),
        0 0 14px rgba(255, 255, 255, 0.12) !important;
}

.ws-wc-filters-skin
.ws-price-range-wrapper.dmk-range-active
.ws-price-range-min::-moz-range-thumb,
.ws-wc-filters-skin
.ws-price-range-wrapper.dmk-range-active
.ws-price-range-max::-moz-range-thumb,
.ws-wc-filters-skin
.ws-price-range-wrapper.dmk-min-active
.ws-price-range-min::-moz-range-thumb,
.ws-wc-filters-skin
.ws-price-range-wrapper.dmk-max-active
.ws-price-range-max::-moz-range-thumb {
    background-color: var(--sw-color-yellow);
    background-image: none !important;
    animation: colorChangeBg var(--sw-anim-duration) linear infinite var(--sw-anim-offset) !important;
    box-shadow:
        0 0 0 4px rgba(255, 255, 255, 0.10),
        0 0 14px rgba(255, 255, 255, 0.12) !important;
}

.ws-wc-filters-skin
.ws-price-range-slider-wrapper
.ws-price-range:active::-webkit-slider-thumb {
    cursor: grabbing !important;
    transform: scale(1.08);
}

.ws-wc-filters-skin
.ws-price-range-slider-wrapper
.ws-price-range:active::-moz-range-thumb {
    cursor: grabbing !important;
    transform: scale(1.08);
}

/* Mitlaufende Min-/Max-Zahlenfelder */
.ws-wc-filters-skin .ws-price-min-input-visible,
.ws-wc-filters-skin .ws-price-max-input-visible {
    position: absolute !important;
    top: 0 !important;
    z-index: 6 !important;
    width: var(--dmk-badge-width) !important;
    min-width: var(--dmk-badge-width) !important;
    max-width: var(--dmk-badge-width) !important;
    height: 24px !important;
    min-height: 24px !important;
    padding: 3px 6px !important;
    background-color: var(--sw-color-form-bg) !important;
    color: var(--sw-color-gray-light) !important;
    -webkit-text-fill-color: var(--sw-color-gray-light) !important;
    caret-color: var(--sw-color-white) !important;
    opacity: 1 !important;
    border: 1px solid rgba(255, 255, 255, 0.22) !important;
    border-radius: var(--sw-radius-control) !important;
    font-size: 0.78rem !important;
    font-weight: 500 !important;
    line-height: 1 !important;
    text-align: center !important;
    text-shadow: none !important;
    box-sizing: border-box !important;
    outline: none !important;
    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.18) !important;
    transition:
        left 0.12s linear,
        background-color 0.18s ease,
        color 0.18s ease,
        border-color 0.18s ease,
        box-shadow 0.18s ease !important;
}

/* clamp verhindert, dass die Zahlenfelder aus der Karte laufen. */
.ws-wc-filters-skin .ws-price-min-input-visible {
    left: clamp(
        calc(var(--dmk-badge-width) / 2),
        var(--dmk-min-pos),
        calc(100% - (var(--dmk-badge-width) / 2))
    ) !important;
    transform: translateX(-50%) !important;
}

.ws-wc-filters-skin .ws-price-max-input-visible {
    left: clamp(
        calc(var(--dmk-badge-width) / 2),
        var(--dmk-max-pos),
        calc(100% - (var(--dmk-badge-width) / 2))
    ) !important;
    transform: translateX(-50%) !important;
}

/*
 * Die Zahlenfelder bleiben auch bei aktivem Filter dunkel und lesbar.
 * Animiert werden ausschließlich Strecke und Sliderpunkte.
 */
.ws-wc-filters-skin
.ws-price-range-wrapper.dmk-range-active
.ws-price-min-input-visible:not(:focus),
.ws-wc-filters-skin
.ws-price-range-wrapper.dmk-range-active
.ws-price-max-input-visible:not(:focus),
.ws-wc-filters-skin
.ws-price-range-wrapper.dmk-min-active
.ws-price-min-input-visible:not(:focus),
.ws-wc-filters-skin
.ws-price-range-wrapper.dmk-max-active
.ws-price-max-input-visible:not(:focus) {
    background-color: var(--sw-color-form-bg) !important;
    color: var(--sw-color-white) !important;
    -webkit-text-fill-color: var(--sw-color-white) !important;
    opacity: 1 !important;
    border-color: rgba(255, 255, 255, 0.30) !important;
    animation: none !important;
    text-shadow: none !important;
    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.24) !important;
}

/* Direkte Eingabe in ein Zahlenfeld */
.ws-wc-filters-skin .ws-price-min-input-visible:focus,
.ws-wc-filters-skin .ws-price-max-input-visible:focus {
    background-color: var(--sw-color-form-bg) !important;
    color: var(--sw-color-white) !important;
    -webkit-text-fill-color: var(--sw-color-white) !important;
    caret-color: var(--sw-color-white) !important;
    border-width: var(--sw-border-w-input) !important;
    border-style: solid !important;
    border-color: var(--sw-color-yellow);
    animation: colorChangeBorder var(--sw-anim-duration) linear infinite var(--sw-anim-offset) !important;
    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.24) !important;
}

/* 16.5 Pills */
.ws-wc-filters-skin .ws-wc-filter-multiselect-option {
    justify-content: center !important;
    line-height: 1.2 !important;
    user-select: none !important;
    transition:
        background-color 0.2s ease,
        color 0.2s ease,
        border-color 0.2s ease,
        transform 0.2s ease !important;
}

.ws-wc-filters-skin .ws-wc-filter-multiselect-option:hover {
    border-color: rgba(255, 255, 255, 0.32) !important;
    transform: translateY(-1px);
}

.ws-wc-filters-skin .ws-wc-filter-multiselect-option.is-active {
    animation-name: colorChangeBg !important;
    animation-duration: var(--sw-anim-duration) !important;
    animation-iteration-count: infinite !important;
    animation-timing-function: linear !important;
    animation-delay: var(--sw-anim-offset) !important;
}

.ws-wc-filters-skin .ws-wc-filter-multiselect-option:focus-within {
    outline: 2px solid var(--sw-color-yellow);
    animation: colorChangeOutline var(--sw-anim-duration) linear infinite var(--sw-anim-offset) !important;
    outline-offset: 3px !important;
}

/* 16.6 Checkboxen */
.ws-wc-filters-skin .ws-wc-filter-checkbox-group {
    display: grid !important;
    gap: 8px !important;
}

.ws-wc-filters-skin .ws-wc-filter-checkbox {
    color: var(--sw-color-gray-light) !important;
    font-weight: 300 !important;
}

/* 16.7 Custom Select / Sortierung */
.ws-wc-filters-skin .ws-custom-select,
.ws-wc-sort-wrapper .ws-custom-select {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
}

.ws-wc-filters-skin .ws-custom-select-toggle,
.ws-wc-sort-wrapper .ws-custom-select-toggle {
    min-height: 40px !important;
    border-top: var(--sw-border-w-input) solid var(--sw-border-input-top) !important;
    border-left: var(--sw-border-w-input) solid var(--sw-border-input-side) !important;
    border-right: var(--sw-border-w-input) solid var(--sw-border-input-side) !important;
    border-bottom: var(--sw-border-w-input) solid var(--sw-border-input-bottom) !important;
    font-weight: 300 !important;
    transition:
        border-color 0.2s ease,
        color 0.2s ease !important;
}

.ws-wc-filters-skin .ws-custom-select-toggle:hover,
.ws-wc-sort-wrapper .ws-custom-select-toggle:hover {
    color: var(--sw-color-white) !important;
    border-color: var(--sw-color-yellow) !important;
}

/* Geöffnet = aktiv: Border übernimmt den synchronisierten Farbstand. */
.ws-wc-filters-skin .ws-custom-select.is-open .ws-custom-select-toggle,
.ws-wc-sort-wrapper .ws-custom-select.is-open .ws-custom-select-toggle {
    color: var(--sw-color-white) !important;
    border-color: var(--sw-color-yellow);
    animation: colorChangeBorder var(--sw-anim-duration) linear infinite var(--sw-anim-offset) !important;
}

.ws-wc-filters-skin .ws-custom-select-panel,
.ws-wc-sort-wrapper .ws-custom-select-panel {
    border-radius: var(--sw-radius-control) !important;
    box-shadow: 0 18px 45px rgba(0, 0, 0, 0.45) !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    z-index: 9999 !important;
}

.ws-wc-filters-skin .ws-custom-select-option,
.ws-wc-sort-wrapper .ws-custom-select-option {
    font-weight: 300 !important;
}

/* 16.8 Reset All / View Results (Button-2-Look) */
.ws-wc-filter-reset-all,
.ws-wc-filter-redirect-button {
    box-sizing: border-box !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 40px !important;
    line-height: 1.2 !important;
    text-decoration: none !important;
    animation-name: colorChangeBorder !important;
    animation-duration: var(--sw-anim-duration) !important;
    animation-iteration-count: infinite !important;
    animation-timing-function: linear !important;
    animation-delay: var(--sw-anim-offset) !important;
    transform: translateY(0);
    filter: brightness(1);
    transition:
        background-color 0.25s ease,
        color 0.25s ease,
        border-color 0.25s ease,
        box-shadow 0.25s ease,
        transform 0.25s ease,
        filter 0.25s ease !important;
}

.ws-wc-filter-reset-all:hover,
.ws-wc-filter-redirect-button:hover,
.ws-wc-filter-reset-all:focus-visible,
.ws-wc-filter-redirect-button:focus-visible {
    transform: translateY(-2px);
    filter: brightness(1.08);
    box-shadow: 0 10px 28px rgba(255, 255, 255, 0.12) !important;
}

/* 16.9 Date-Range Fokus */
.ws-wc-filters-skin .ws-date-range-trigger:focus,
.ws-wc-filters-skin .ws-date-range-input:focus,
.ws-wc-filters-skin .ws-date-range-clear:focus,
.ws-wc-filters-skin .ws-date-range-apply:focus,
.ws-wc-filters-skin .ws-date-range-preset:focus {
    outline: 2px solid var(--sw-color-yellow);
    animation: colorChangeOutline var(--sw-anim-duration) linear infinite var(--sw-anim-offset) !important;
    outline-offset: 2px !important;
}

/* 16.10 Mobile */
@media (max-width: 767px) {
    .product-filter-area .ws-wc-filter-form,
    .product-filter-area .ws-wc-sort-form {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 0 !important;
    }

    .ws-wc-filters-skin.ws-wc-filter-wrapper,
    .ws-wc-sort-wrapper {
        width: 100% !important;
        padding: 12px !important;
    }

    .ws-wc-filters-skin .ws-wc-filter-control,
    .ws-wc-filters-skin .ws-custom-select,
    .ws-wc-sort-wrapper .ws-custom-select,
    .ws-wc-filters-skin .ws-custom-select-toggle,
    .ws-wc-sort-wrapper .ws-custom-select-toggle,
    .ws-wc-filters-skin .ws-price-range-wrapper {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    .ws-wc-filters-skin .ws-price-range-wrapper {
        min-width: 0 !important;
        --dmk-badge-width: 52px;
    }

    .ws-wc-filters-skin .ws-price-range-row {
        padding-top: 28px !important;
        min-height: 54px !important;
    }

    .ws-wc-filters-skin .ws-price-min-input-visible,
    .ws-wc-filters-skin .ws-price-max-input-visible {
        height: 22px !important;
        min-height: 22px !important;
        font-size: 0.74rem !important;
        padding: 2px 5px !important;
    }

    .ws-wc-filter-reset-all,
    .ws-wc-filter-redirect-button {
        width: 100% !important;
    }
}

/* ============================================================
   RANGE BADGES – COLLISION MORPH
   ------------------------------------------------------------
   Min / Max bleiben getrennt, solange genügend Platz vorhanden
   ist.

   Sobald sich beide Felder berühren würden:
   -> kompakter Doppel-Pill
   -> kein Überdecken
   -> weicher Morph
   ============================================================ */

.ws-wc-filters-skin .ws-price-range-wrapper {
    --dmk-badge-merged-width: 43px;
    --dmk-badge-merge-gap: 2px;
}


/* Weicher Übergang */

.ws-wc-filters-skin .ws-price-min-input-visible,
.ws-wc-filters-skin .ws-price-max-input-visible {
    transition:
        left 0.18s ease,
        width 0.18s ease,
        min-width 0.18s ease,
        max-width 0.18s ease,
        transform 0.18s ease,
        border-radius 0.18s ease,
        border-color 0.18s ease,
        background-color 0.18s ease,
        box-shadow 0.18s ease !important;
}


/* ============================================================
   OVERLAP-ZUSTAND
   ============================================================ */

.ws-wc-filters-skin
.ws-price-range-wrapper.dmk-badges-overlap
.ws-price-min-input-visible,

.ws-wc-filters-skin
.ws-price-range-wrapper.dmk-badges-overlap
.ws-price-max-input-visible {

    width:
        var(--dmk-badge-merged-width) !important;

    min-width:
        var(--dmk-badge-merged-width) !important;

    max-width:
        var(--dmk-badge-merged-width) !important;

    z-index: 8 !important;
}


/* ------------------------------------------------------------
   MIN – linker Teil
   ------------------------------------------------------------ */

.ws-wc-filters-skin
.ws-price-range-wrapper.dmk-badges-overlap
.ws-price-min-input-visible {

    left:
        var(--dmk-badge-merge-center) !important;

    transform:
        translateX(
            calc(
                -100% -
                (var(--dmk-badge-merge-gap) / 2)
            )
        ) !important;

    border-radius:
        var(--sw-radius-control)
        2px
        2px
        var(--sw-radius-control)
        !important;
}


/* ------------------------------------------------------------
   MAX – rechter Teil
   ------------------------------------------------------------ */

.ws-wc-filters-skin
.ws-price-range-wrapper.dmk-badges-overlap
.ws-price-max-input-visible {

    left:
        var(--dmk-badge-merge-center) !important;

    transform:
        translateX(
            calc(
                var(--dmk-badge-merge-gap) / 2
            )
        ) !important;

    border-radius:
        2px
        var(--sw-radius-control)
        var(--sw-radius-control)
        2px
        !important;
}

/* ============================================================
   17  FILTER LOADING STATE
   ============================================================ */

.product-results-area {
    position: relative;
}

.product-results-area .dmk-filter-loading-text {
    opacity: 0;
    transition: opacity 0.2s ease;
}

body.is-filter-loading .product-results-area {
    pointer-events: none;
}

body.is-filter-loading .product-results-area::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 50;
    background: linear-gradient(
        180deg,
        rgba(12,13,15,0.62),
        rgba(12,13,15,0.82)
    );
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    border-radius: inherit;
}

body.is-filter-loading .product-results-area::after {
    content: "";
    position: absolute;
    top: 72px;
    left: 50%;
    z-index: 51;
    width: 42px;
    height: 42px;
    margin-left: -21px;
    border-radius: var(--sw-radius-pill);
    border: 3px solid rgba(255,255,255,0.18);
    border-top-color: var(--sw-color-yellow);
    animation:
        dmkFilterSpin 0.75s linear infinite,
        colorChangeBorder var(--sw-anim-duration) linear infinite var(--sw-anim-offset);
    box-shadow: 0 0 24px rgba(255,255,255,0.12);
}

body.is-filter-loading .product-results-area .dmk-filter-loading-text {
    opacity: 1;
}

body.is-filter-loading {
    cursor: progress;
}

@media (max-width: 767px) {
    body.is-filter-loading .product-results-area::after {
        top: 40px;
        width: 34px;
        height: 34px;
        margin-left: -17px;
    }
}


/* ============================================================
   18  LOGO COLOR-MASK
   Deckt Logo mit und ohne Link ab.
   ============================================================ */

.demke-logo-color-bottom {
    position: relative !important;
    overflow: visible !important;
    --demke-logo-color-start: 58%;
}

.demke-logo-color-bottom .elementor-widget-container,
.demke-logo-color-bottom a {
    position: relative !important;
    display: inline-block !important;
    line-height: 0 !important;
    overflow: visible !important;
}

.demke-logo-color-bottom img {
    display: block !important;
    height: auto !important;
    max-width: 100% !important;
    position: relative !important;
    z-index: 1 !important;
}

.demke-logo-color-bottom a::after,
.demke-logo-color-bottom .elementor-widget-container:not(:has(a))::after {
    content: "" !important;
    position: absolute !important;
    inset: 0 !important;
    z-index: 2 !important;
    pointer-events: none !important;
    background-color: var(--sw-color-yellow);
    animation-name: colorChangeBg !important;
    clip-path: inset(var(--demke-logo-color-start) 0 0 0) !important;
    -webkit-mask-image: url("/wp-content/uploads/demke-electronic-gmbh-logo.svg") !important;
    mask-image: url("/wp-content/uploads/demke-electronic-gmbh-logo.svg") !important;
    -webkit-mask-repeat: no-repeat !important;
    mask-repeat: no-repeat !important;
    -webkit-mask-position: center center !important;
    mask-position: center center !important;
    -webkit-mask-size: 100% 100% !important;
    mask-size: 100% 100% !important;
}


/* ============================================================
   18.1 HEADER-NAVIGATION / DROPDOWNS / CTA
   Unterstützt klassisches Elementor Nav Menu und Nested Menu.
   ============================================================ */

/* Header-Grundlinks */
.elementor-location-header .elementor-nav-menu--main .elementor-item,
.elementor-location-header .elementor-nav-menu--dropdown .elementor-item,
.elementor-location-header .e-n-menu-title,
.elementor-location-header .e-n-menu-title-text {
    color: var(--sw-color-gray) !important;
    background-color: transparent !important;
    text-decoration: none !important;
    animation: none !important;
}

.elementor-location-header .elementor-nav-menu--main .elementor-item:hover,
.elementor-location-header .elementor-nav-menu--main .elementor-item:focus-visible,
.elementor-location-header .elementor-nav-menu--dropdown .elementor-item:hover,
.elementor-location-header .elementor-nav-menu--dropdown .elementor-item:focus-visible,
.elementor-location-header .e-n-menu-title:hover,
.elementor-location-header .e-n-menu-title:focus-visible {
    color: var(--sw-color-gray-light) !important;
    background-color: rgba(255,255,255,0.04) !important;
}

/* Klassisches Elementor-Untermenü: kein weisser Hintergrund */
.elementor-location-header .elementor-nav-menu--main .sub-menu,
.elementor-location-header .elementor-nav-menu--dropdown,
.elementor-location-header .elementor-nav-menu--dropdown .sub-menu {
    background-color: var(--sw-color-form-bg) !important;
    border: 1px solid rgba(255,255,255,0.14) !important;
    border-radius: var(--sw-radius-card) !important;
    box-shadow: 0 18px 45px rgba(0,0,0,0.45) !important;
    overflow: hidden !important;
}

.elementor-location-header .elementor-nav-menu--main .sub-menu .elementor-item,
.elementor-location-header .elementor-nav-menu--dropdown .elementor-item {
    min-height: 42px;
    padding: 10px 14px !important;
    color: var(--sw-color-gray-light) !important;
    background-color: transparent !important;
    border: 0 !important;
}

.elementor-location-header .elementor-nav-menu--main .sub-menu .elementor-item:hover,
.elementor-location-header .elementor-nav-menu--dropdown .elementor-item:hover,
.elementor-location-header .elementor-nav-menu--main .sub-menu .elementor-item.elementor-item-active,
.elementor-location-header .elementor-nav-menu--dropdown .elementor-item.elementor-item-active {
    color: var(--sw-color-white) !important;
    background-color: rgba(255,255,255,0.06) !important;
}

/* Nested Menu: geöffneter Inhalt dunkel statt weiss */
.elementor-location-header .e-n-menu-content,
.elementor-location-header [class*="e-n-menu-content"],
.elementor-location-header .e-n-menu-dropdown,
.elementor-location-header [class*="e-n-menu-dropdown"] {
    background-color: var(--sw-color-form-bg) !important;
    color: var(--sw-color-gray-light) !important;
    border-color: rgba(255,255,255,0.14) !important;
    box-shadow: 0 18px 45px rgba(0,0,0,0.45) !important;
}

.elementor-location-header .e-n-menu-content > .e-con,
.elementor-location-header [class*="e-n-menu-content"] > .e-con {
    background-color: var(--sw-color-form-bg) !important;
}

/* Dropdown-Pfeile */
.elementor-location-header .elementor-item .sub-arrow,
.elementor-location-header .elementor-item.has-submenu .sub-arrow,
.elementor-location-header .e-n-menu-title-icon {
    color: currentColor !important;
    fill: currentColor !important;
    animation: none !important;
}

/* Aktive / geöffnete Hauptmenüpunkte */
.elementor-location-header .elementor-item.has-submenu.highlighted,
.elementor-location-header .elementor-item.has-submenu[aria-expanded="true"],
.elementor-location-header .e-n-menu-title[aria-expanded="true"] {
    color: var(--sw-color-white) !important;
    background-color: rgba(255,255,255,0.04) !important;
}

/* Header-CTA: Menü-ID 5184 oder eigene Klasse demke-menu-cta */
.elementor-location-header li.menu-item-5184 > a.elementor-item,
.elementor-location-header li.menu-item-5184 > a.elementor-item.has-submenu,
.elementor-location-header li.demke-menu-cta > a.elementor-item,
.elementor-location-header a.elementor-item.demke-menu-cta,
.elementor-location-header .e-n-menu-title.demke-menu-cta {
    box-sizing: border-box !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 42px;
    padding: 9px 16px !important;
    color: var(--sw-color-white) !important;
    background-color: transparent !important;
    border-width: var(--sw-border-w) !important;
    border-style: solid !important;
    border-color: var(--sw-color-yellow);
    border-radius: var(--sw-radius-control) !important;
    animation-name: colorChangeBorder !important;
    animation-duration: var(--sw-anim-duration) !important;
    animation-iteration-count: infinite !important;
    animation-timing-function: linear !important;
    animation-delay: var(--sw-anim-offset) !important;
    transform: translateY(0);
    box-shadow: none !important;
    transition:
        background-color 0.25s ease,
        color 0.25s ease,
        box-shadow 0.25s ease,
        transform 0.25s ease,
        filter 0.25s ease !important;
}

.elementor-location-header li.menu-item-5184 > a.elementor-item span,
.elementor-location-header li.demke-menu-cta > a.elementor-item span,
.elementor-location-header a.elementor-item.demke-menu-cta span,
.elementor-location-header .e-n-menu-title.demke-menu-cta .e-n-menu-title-text {
    color: inherit !important;
    animation: none !important;
}

.elementor-location-header li.menu-item-5184 > a.elementor-item:hover,
.elementor-location-header li.menu-item-5184 > a.elementor-item:focus-visible,
.elementor-location-header li.demke-menu-cta > a.elementor-item:hover,
.elementor-location-header li.demke-menu-cta > a.elementor-item:focus-visible,
.elementor-location-header a.elementor-item.demke-menu-cta:hover,
.elementor-location-header a.elementor-item.demke-menu-cta:focus-visible,
.elementor-location-header .e-n-menu-title.demke-menu-cta:hover,
.elementor-location-header .e-n-menu-title.demke-menu-cta:focus-visible {
    color: var(--sw-color-white) !important;
    background-color: rgba(255,255,255,0.04) !important;
    transform: translateY(-2px);
    filter: brightness(1.08);
    box-shadow: 0 10px 28px rgba(255,255,255,0.12) !important;
}

@media (max-width: 1200px) {
    .elementor-location-header .elementor-nav-menu--dropdown,
    .elementor-location-header .elementor-nav-menu--dropdown .sub-menu,
    .elementor-location-header .e-n-menu-content,
    .elementor-location-header [class*="e-n-menu-content"] {
        background-color: var(--sw-color-form-bg) !important;
        border-radius: var(--sw-radius-card) !important;
    }

    .elementor-location-header li.menu-item-5184 > a.elementor-item,
    .elementor-location-header li.demke-menu-cta > a.elementor-item,
    .elementor-location-header a.elementor-item.demke-menu-cta,
    .elementor-location-header .e-n-menu-title.demke-menu-cta {
        width: 100% !important;
        margin-top: 10px !important;
    }
}


/* ============================================================
   19  HAMBURGER-MENÜ
   ------------------------------------------------------------
   Kein Rahmen.

   Ruhe-Zustand:
   - drei graue Linien
   - obere und untere Linie 22px breit
   - mittlere Linie 14px breit
   - alle Linien linksbündig
   - vertikal gleichmäßig angeordnet

   Hover:
   - Linien werden hellgrau
   - Icon bewegt sich minimal nach oben

   Offen:
   - mittlere Linie zieht sich ein
   - obere und untere Linie morphen zum X
   - keine Farbrotation

   Nur unterhalb des Menü-Breakpoints aktiv.
   Breakpoint ggf. an das Elementor-Menü anpassen.
   ============================================================ */

@media (max-width: 1200px) {


    /* ------------------------------------------------------------
       19.1 Toggle / Klickfläche

       Die Klickfläche bleibt bewusst 46 × 46px groß.
       Das sichtbare Hamburger-Icon sitzt innerhalb dieser Fläche
       weiter oben, damit es mit Logo und Search sauber aligned ist.
       ------------------------------------------------------------ */

    .demke-hamburger .elementor-menu-toggle,
    .demke-hamburger .e-n-menu-toggle {
        position: relative !important;

        width: 46px !important;
        height: 46px !important;

        align-items: center !important;
        justify-content: center !important;

        background-color: transparent !important;

        border: none !important;
        border-radius: 0 !important;

        padding: 0 !important;

        box-shadow: none !important;

        animation: none !important;

        color: var(--sw-color-gray);

        /*
         * Mittlere Hamburger-Linie
         * linksbündig bei 10px
         * 14px breit
         * vertikal bei 10px
         */
        background-image:
            linear-gradient(currentColor, currentColor) !important;

        background-repeat: no-repeat !important;

        background-size: 14px 2px !important;

        background-position: 10px 10px !important;

        transition:
            background-size 0.25s ease,
            color 0.25s ease,
            transform 0.25s ease !important;
    }


    /* ------------------------------------------------------------
       19.2 Elementor Original-Icons ausblenden

       Das sichtbare Icon wird vollständig über CSS erzeugt.
       ------------------------------------------------------------ */

    .demke-hamburger .elementor-menu-toggle i,
    .demke-hamburger .elementor-menu-toggle svg,
    .demke-hamburger .e-n-menu-toggle i,
    .demke-hamburger .e-n-menu-toggle svg,
    .demke-hamburger .e-n-menu-toggle .e-n-menu-toggle-icon,
    .demke-hamburger .e-n-menu-toggle [class*="eicon"] {
        display: none !important;
    }


    /* ------------------------------------------------------------
       19.3 Obere und untere Hamburger-Linie

       Beide Linien:
       - 22px breit
       - 2px hoch
       - linksbündig bei 10px
       ------------------------------------------------------------ */

    .demke-hamburger .elementor-menu-toggle::before,
    .demke-hamburger .elementor-menu-toggle::after,
    .demke-hamburger .e-n-menu-toggle::before,
    .demke-hamburger .e-n-menu-toggle::after {
        content: "" !important;

        position: absolute !important;

        left: 10px !important;

        width: 22px !important;
        height: 2px !important;

        background-color: currentColor;

        border-radius: var(--sw-radius-pill) !important;

        animation: none !important;

        transition:
            transform 0.25s ease,
            top 0.25s ease !important;
    }


    /* Obere Linie */
    .demke-hamburger .elementor-menu-toggle::before,
    .demke-hamburger .e-n-menu-toggle::before {
        top: 3px !important;
    }


    /* Untere Linie */
    .demke-hamburger .elementor-menu-toggle::after,
    .demke-hamburger .e-n-menu-toggle::after {
        top: 17px !important;
    }


    /* ------------------------------------------------------------
       19.4 Hover

       Linien werden hellgrau.
       Der gesamte Toggle bewegt sich minimal nach oben.
       ------------------------------------------------------------ */

    .demke-hamburger .elementor-menu-toggle:hover,
    .demke-hamburger .e-n-menu-toggle:hover {
        color: var(--sw-color-gray-light);

        transform: translateY(-1px) !important;
    }


    /* ------------------------------------------------------------
       19.5 Geöffneter Zustand

       Mittlere Linie wird eingezogen.
       Farbe bleibt hellgrau.
       Keine Farbrotation.
       ------------------------------------------------------------ */

    .demke-hamburger .elementor-menu-toggle.elementor-active,
    .demke-hamburger .elementor-menu-toggle[aria-expanded="true"],
    .demke-hamburger .e-n-menu-toggle[aria-expanded="true"] {
        background-size: 0px 2px !important;

        color: var(--sw-color-gray-light);

        animation: none !important;
    }


    /* ------------------------------------------------------------
       19.6 X-Morph – obere Linie

       Beide äußeren Linien treffen sich in der Mitte
       und drehen sich zum X.
       ------------------------------------------------------------ */

    .demke-hamburger .elementor-menu-toggle.elementor-active::before,
    .demke-hamburger .elementor-menu-toggle[aria-expanded="true"]::before,
    .demke-hamburger .e-n-menu-toggle[aria-expanded="true"]::before {
        top: 10px !important;

        transform: rotate(45deg) !important;
    }


    /* ------------------------------------------------------------
       19.7 X-Morph – untere Linie
       ------------------------------------------------------------ */

    .demke-hamburger .elementor-menu-toggle.elementor-active::after,
    .demke-hamburger .elementor-menu-toggle[aria-expanded="true"]::after,
    .demke-hamburger .e-n-menu-toggle[aria-expanded="true"]::after {
        top: 10px !important;

        transform: rotate(-45deg) !important;
    }

}

/* ============================================================
   20  DEMKE FLIP CARDS
   Animierte Eigenschaften (border-color, background-color)
   ohne !important – Textfarben (nicht animiert) dürfen
   !important behalten.
   ============================================================ */

.demke-flip-animated .elementor-flip-box__front,
.demke-flip-animated .elementor-flip-box__back {
    border-width: var(--sw-border-w) !important;
    border-style: solid !important;
    border-color: var(--sw-color-yellow);
    border-radius: var(--sw-radius-card) !important;
    animation-name: colorChangeBorder !important;
    animation-duration: var(--sw-anim-duration) !important;
    animation-iteration-count: infinite !important;
    animation-timing-function: linear !important;
    overflow: hidden !important;
}

.demke-flip-animated .elementor-flip-box__layer__overlay {
    border-radius: calc(var(--sw-radius-card) - var(--sw-border-w)) !important;
}

.demke-flip-bg-front .elementor-flip-box__front {
    background-color: var(--sw-color-yellow);
    background-image: none !important;
    animation-name: colorChangeBg, colorChangeBorder !important;
    animation-duration: var(--sw-anim-duration) !important;
    animation-iteration-count: infinite !important;
    animation-timing-function: linear !important;
}

.demke-flip-bg-front .elementor-flip-box__front .elementor-flip-box__layer__title,
.demke-flip-bg-front .elementor-flip-box__front .elementor-flip-box__layer__description,
.demke-flip-bg-front .elementor-flip-box__front i,
.demke-flip-bg-front .elementor-flip-box__front svg {
    color: var(--sw-color-black) !important;
    fill: var(--sw-color-black) !important;
}

.demke-flip-bg-back .elementor-flip-box__back {
    background-color: var(--sw-color-yellow);
    background-image: none !important;
    animation-name: colorChangeBg, colorChangeBorder !important;
    animation-duration: var(--sw-anim-duration) !important;
    animation-iteration-count: infinite !important;
    animation-timing-function: linear !important;
}

.demke-flip-bg-back .elementor-flip-box__back .elementor-flip-box__layer__title,
.demke-flip-bg-back .elementor-flip-box__back .elementor-flip-box__layer__description,
.demke-flip-bg-back .elementor-flip-box__back i,
.demke-flip-bg-back .elementor-flip-box__back svg,
.demke-flip-bg-back .elementor-flip-box__back .elementor-button {
    color: var(--sw-color-black) !important;
    fill: var(--sw-color-black) !important;
}

/* ============================================================
   21  PRODUKTVERGLEICH
   ------------------------------------------------------------
   PHP liefert Logik und Markup.
   Das komplette Frontend-Design liegt hier im globalen CSS.

   Enthält:
   21.1 Compare Toggle auf Produktkarten
   21.2 Schwebende Vergleichsleiste
   21.3 Unterschiede-Schalter
   21.4 Vergleichstabelle
   21.5 Produkt entfernen
   21.6 Responsive

   WICHTIG:
   Diese Section MUSS vor Section 22 Reduced Motion stehen.
   ============================================================ */


/* ============================================================
   21.1 COMPARE TOGGLE AUF PRODUKTKARTEN
   ============================================================ */

.dmk-cmp-btn {
    box-sizing: border-box;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    gap: 0.4rem;

    min-height: 32px;

    padding: 0.32rem 0.7rem;

    background: transparent;

    border:
        var(--sw-border-w-input)
        solid
        rgba(255,255,255,0.22);

    border-radius:
        var(--sw-radius-pill);

    color:
        var(--sw-color-gray);

    font: inherit;

    font-size:
        clamp(
            0.76rem,
            0.72rem + 0.12vw,
            0.82rem
        );

    line-height: 1;

    cursor: pointer;

    transition:
        color 0.2s ease,
        border-color 0.2s ease,
        background-color 0.2s ease,
        transform 0.2s ease,
        box-shadow 0.2s ease,
        filter 0.2s ease;
}


.dmk-cmp-btn svg {
    flex: 0 0 auto;

    width: 16px;
    height: 16px;

    color: currentColor;

    stroke: currentColor;
}


/* Hover */

.dmk-cmp-btn:hover,
.dmk-cmp-btn:focus-visible {
    color:
        var(--sw-color-white);

    border-color:
        rgba(255,255,255,0.45);

    transform:
        translateY(-1px);
}


/* Keyboard Focus */

.dmk-cmp-btn:focus-visible {
    outline:
        2px
        solid
        var(--sw-color-yellow);

    outline-offset:
        2px;
}


/* Ausgewählt */

.dmk-cmp-btn.is-active {
    background-color:
        var(--sw-color-yellow);

    border-color:
        var(--sw-color-yellow);

    color:
        var(--sw-color-black);

    box-shadow:
        0 8px 22px
        rgba(255,255,255,0.08);
}


.dmk-cmp-btn.is-active:hover,
.dmk-cmp-btn.is-active:focus-visible {
    color:
        var(--sw-color-black);

    filter:
        brightness(1.06);
}


/* ------------------------------------------------------------
   21.1.1 Schutz vor Elementor-/Theme-Hoverfarben
   ------------------------------------------------------------ */

button.dmk-cmp-btn:hover,
button.dmk-cmp-btn:focus,
button.dmk-cmp-btn:active {
    background-color:
        transparent !important;

    background-image:
        none !important;

    color:
        var(--sw-color-white) !important;

    border-color:
        rgba(255,255,255,0.45) !important;
}


/* Aktiver Button bleibt bewusst gelb */

button.dmk-cmp-btn.is-active,
button.dmk-cmp-btn.is-active:hover,
button.dmk-cmp-btn.is-active:focus,
button.dmk-cmp-btn.is-active:active {
    background-color:
        var(--sw-color-yellow) !important;

    background-image:
        none !important;

    border-color:
        var(--sw-color-yellow) !important;

    color:
        var(--sw-color-black) !important;
}



/* ============================================================
   21.2 SCHWEBENDE VERGLEICHSLEISTE
   ============================================================ */

.dmk-cmp-bar {
    position: fixed;

    left: 50%;
    bottom: 18px;

    z-index: 9990;

    width:
        min(
            920px,
            calc(100vw - 24px)
        );

    display: flex;
    align-items: center;

    gap: 0.65rem;

    padding:
        0.65rem
        0.75rem;

    background:
        var(--sw-color-form-bg);

    border:
        var(--sw-border-w-input)
        solid
        rgba(255,255,255,0.18);

    border-radius:
        var(--sw-radius-card);

    box-shadow:
        0 18px 45px
        rgba(0,0,0,0.50);

    transform:
        translate(
            -50%,
            calc(100% + 40px)
        );

    opacity: 0;

    visibility: hidden;

    pointer-events: none;

    transition:
        transform 0.3s ease,
        opacity 0.22s ease,
        visibility 0s linear 0.3s;
}


/* Sichtbar */

.dmk-cmp-bar.is-visible {
    transform:
        translate(-50%, 0);

    opacity: 1;

    visibility: visible;

    pointer-events: auto;

    transition-delay:
        0s;
}



/* ------------------------------------------------------------
   21.2.1 Produkt-Chips
   ------------------------------------------------------------ */

.dmk-cmp-bar-chips {
    flex:
        1 1 auto;

    min-width: 0;

    display: flex;
    align-items: center;

    gap: 0.38rem;

    overflow-x: auto;
    overflow-y: hidden;

    scrollbar-width: none;

    -webkit-overflow-scrolling: touch;
}


.dmk-cmp-bar-chips::-webkit-scrollbar {
    display: none;
}


.dmk-cmp-chip {
    flex:
        0 0 auto;

    display: inline-flex;
    align-items: center;

    gap: 0.35rem;

    min-height: 30px;

    padding:
        0.28rem
        0.35rem
        0.28rem
        0.65rem;

    background:
        rgba(255,255,255,0.05);

    border:
        var(--sw-border-w-input)
        solid
        rgba(255,255,255,0.14);

    border-radius:
        var(--sw-radius-pill);

    color:
        var(--sw-color-gray-light);

    font-size:
        clamp(
            0.74rem,
            0.70rem + 0.12vw,
            0.80rem
        );

    line-height: 1;

    white-space: nowrap;
}


/* X innerhalb Chip */

.dmk-cmp-chip button {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 24px;
    height: 24px;

    padding: 0;

    background: transparent;

    border: 0;

    border-radius: 50%;

    color:
        var(--sw-color-gray);

    font: inherit;

    font-size: 1rem;

    line-height: 1;

    cursor: pointer;

    transition:
        color 0.2s ease,
        background-color 0.2s ease;
}


.dmk-cmp-chip button:hover,
.dmk-cmp-chip button:focus-visible {
    color:
        var(--sw-color-white);

    background:
        rgba(255,255,255,0.08);

    outline: none;
}



/* ------------------------------------------------------------
   21.2.2 Vergleichs-CTA
   ------------------------------------------------------------
   Die Farbanimation läuft permanent auf ::before.
   Dadurch bleibt die Animation synchron, auch wenn der Button
   vorher deaktiviert war.
   ------------------------------------------------------------ */

.dmk-cmp-bar-go {
    flex:
        0 0 auto;

    box-sizing: border-box;

    position: relative;

    z-index: 0;

    isolation: isolate;

    overflow: hidden;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-height: 38px;

    padding:
        0.55rem
        0.9rem;

    background:
        transparent !important;

    background-color:
        transparent !important;

    background-image:
        none !important;

    border:
        var(--sw-border-w)
        solid
        transparent;

    border-radius:
        var(--sw-radius-control);

    color:
        var(--sw-color-black) !important;

    font-weight: 600;

    font-size:
        clamp(
            0.80rem,
            0.76rem + 0.12vw,
            0.86rem
        );

    line-height: 1;

    text-decoration:
        none !important;

    white-space: nowrap;

    transform:
        translateY(0);

    filter:
        brightness(1);

    animation:
        none !important;

    transition:
        transform 0.25s ease,
        filter 0.25s ease,
        box-shadow 0.25s ease !important;
}


/* Animierte Fläche */

.dmk-cmp-bar-go::before {
    content: "";

    position: absolute;

    inset: 0;

    z-index: -2;

    border-radius:
        inherit;

    background-color:
        var(--sw-color-yellow);

    animation:
        colorChangeBg
        var(--sw-anim-duration)
        linear
        infinite
        var(--sw-anim-offset)
        !important;
}


/* Disabled Overlay */

.dmk-cmp-bar-go::after {
    content: "";

    position: absolute;

    inset: 0;

    z-index: -1;

    border-radius:
        inherit;

    background-color:
        var(--sw-color-disabled-bg);

    opacity: 0;

    pointer-events: none;

    transition:
        opacity 0.2s ease;
}


/* Kein Elementor-/Theme-Hover */

.dmk-cmp-bar-go:hover,
.dmk-cmp-bar-go:focus-visible,
.dmk-cmp-bar-go:active,
.dmk-cmp-bar-go:visited {
    background:
        transparent !important;

    background-color:
        transparent !important;

    background-image:
        none !important;

    color:
        var(--sw-color-black) !important;

    text-decoration:
        none !important;
}


.dmk-cmp-bar-go:hover,
.dmk-cmp-bar-go:focus-visible {
    transform:
        translateY(-2px);

    filter:
        brightness(1.08)
        saturate(1.08);

    box-shadow:
        0 10px 28px
        rgba(255,255,255,0.14);
}


.dmk-cmp-bar-go:focus-visible {
    outline:
        var(--sw-border-w)
        solid
        var(--sw-color-white);

    outline-offset:
        2px;
}


/* Disabled */

.dmk-cmp-bar-go[aria-disabled="true"] {
    color:
        var(--sw-color-gray) !important;

    border-color:
        transparent;

    filter:
        none;

    box-shadow:
        none;

    transform:
        none;

    pointer-events:
        none;
}


.dmk-cmp-bar-go[aria-disabled="true"]::after {
    opacity:
        1;
}



/* ------------------------------------------------------------
   21.2.3 Leeren
   ------------------------------------------------------------ */

.dmk-cmp-bar-clear {
    flex:
        0 0 auto;

    padding:
        0.4rem
        0.25rem;

    background:
        transparent;

    border:
        0;

    color:
        var(--sw-color-gray);

    font: inherit;

    font-size:
        clamp(
            0.74rem,
            0.70rem + 0.12vw,
            0.80rem
        );

    line-height: 1;

    cursor: pointer;

    transition:
        color 0.2s ease;
}


.dmk-cmp-bar-clear:hover,
.dmk-cmp-bar-clear:focus-visible {
    color:
        var(--sw-color-white);

    outline:
        none;
}



/* ------------------------------------------------------------
   21.2.4 Maximal-Anzahl Meldung
   ------------------------------------------------------------ */

.dmk-cmp-bar-msg {
    display: none;

    flex:
        0 0 auto;

    color:
        var(--sw-color-yellow);

    font-size:
        clamp(
            0.72rem,
            0.69rem + 0.10vw,
            0.78rem
        );

    white-space:
        nowrap;
}


.dmk-cmp-bar.is-full
.dmk-cmp-bar-msg {
    display:
        inline;
}



/* ============================================================
   21.3 UNTERSCHIEDE-SCHALTER
   ============================================================ */

.dmk-cmp-toggle {
    position: relative;

    display: inline-flex;
    align-items: center;

    gap: 0.65rem;

    margin:
        0 0 1rem;

    color:
        var(--sw-color-gray-light);

    font-size:
        clamp(
            0.82rem,
            0.76681rem + 0.24828vw,
            0.94rem
        );

    line-height: 1.3;

    cursor: pointer;

    user-select: none;
}


.dmk-cmp-toggle input {
    position: absolute;

    width: 1px;
    height: 1px;

    opacity: 0;

    pointer-events: none;
}


.dmk-cmp-toggle-ui {
    position: relative;

    flex:
        0 0 auto;

    width: 42px;
    height: 24px;

    background:
        var(--sw-color-form-bg);

    border:
        var(--sw-border-w-input)
        solid
        rgba(255,255,255,0.22);

    border-radius:
        var(--sw-radius-pill);

    transition:
        background-color 0.2s ease,
        border-color 0.2s ease;
}


.dmk-cmp-toggle-ui::after {
    content: "";

    position: absolute;

    top: 3px;
    left: 3px;

    width: 16px;
    height: 16px;

    background:
        var(--sw-color-gray);

    border-radius: 50%;

    transition:
        transform 0.2s ease,
        background-color 0.2s ease;
}


.dmk-cmp-toggle input:checked
+
.dmk-cmp-toggle-ui {
    background:
        rgba(255,199,44,0.12);

    border-color:
        var(--sw-color-yellow);
}


.dmk-cmp-toggle input:checked
+
.dmk-cmp-toggle-ui::after {
    background:
        var(--sw-color-yellow);

    transform:
        translateX(18px);
}


.dmk-cmp-toggle input:focus-visible
+
.dmk-cmp-toggle-ui {
    outline:
        2px
        solid
        var(--sw-color-yellow);

    outline-offset:
        3px;
}



/* ============================================================
   21.4 VERGLEICHSTABELLE
   ============================================================ */

.dmk-cmp-wrap {
    width: 100%;

    overflow-x: auto;
    overflow-y: visible;

    -webkit-overflow-scrolling: touch;

    border-top:
        var(--sw-border-w-input)
        solid
        rgba(255,255,255,0.16);

    border-bottom:
        var(--sw-border-w-input)
        solid
        rgba(255,255,255,0.16);

    scrollbar-color:
        rgba(255,255,255,0.22)
        transparent;
}


.dmk-cmp {
    width:
        max-content;

    min-width:
        100%;

    border-collapse:
        separate;

    border-spacing:
        0;

    color:
        var(--sw-color-gray-light);

    font-size:
        clamp(
            0.82rem,
            0.76681rem + 0.24828vw,
            0.94rem
        );

    line-height:
        1.45;
}


/* Zellen */

.dmk-cmp th,
.dmk-cmp td {
    box-sizing:
        border-box;

    min-width:
        180px;

    padding:
        0.85rem
        1rem;

    border:
        0;

    border-bottom:
        var(--sw-border-w-input)
        solid
        rgba(255,255,255,0.10);

    text-align:
        center;

    vertical-align:
        middle;

    background:
        transparent;
}


/* Tabellenkopf */

.dmk-cmp thead th {
    padding-top:
        1rem;

    padding-bottom:
        1rem;

    background:
        var(--sw-color-black);

    border-bottom-color:
        rgba(255,255,255,0.20);

    vertical-align:
        bottom;
}



/* ------------------------------------------------------------
   21.4.1 Linke Feature-Spalte
   ------------------------------------------------------------ */

.dmk-cmp .dmk-cmp-feature-head,
.dmk-cmp .dmk-cmp-row-label {
    min-width:
        170px;

    width:
        170px;

    text-align:
        left;

    font-weight:
        500;
}


/* ============================================================
   VERGLEICHSTABELLE – STICKY LINKE SPALTE
   ============================================================ */

/* Normale Produktwerte bleiben unter der Sticky-Spalte */
.dmk-cmp tbody tr:not(.dmk-cmp-group) > td {
    position: relative;
    z-index: 1;
}


/* Kopf links: "Merkmal" */
.dmk-cmp thead .dmk-cmp-feature-head {
    position: sticky;
    left: 0;
    z-index: 30;

    min-width: 170px;
    width: 170px;

    background-color: var(--sw-color-black) !important;

    box-shadow:
        1px 0 0 rgba(255, 255, 255, .08);
}


/* Normale linke Merkmalsspalte */
.dmk-cmp tbody tr:not(.dmk-cmp-group) > .dmk-cmp-row-label {
    position: sticky;
    left: 0;
    z-index: 20;

    min-width: 170px;
    width: 170px;

    background-color: var(--sw-color-black) !important;

    box-shadow:
        1px 0 0 rgba(255, 255, 255, .08);
}


/* ============================================================
   GRUPPEN: Eingang / Ausgang / Mechanik usw.
   ============================================================ */

.dmk-cmp .dmk-cmp-group > .dmk-cmp-group-label {
    position: sticky;
    left: 0;
    z-index: 25;

    min-width: 170px;
    width: 170px;

    padding: 1.35rem 1rem .55rem;

    background-color: var(--sw-color-black) !important;

    border-bottom:
        var(--sw-border-w-input)
        solid
        rgba(255, 255, 255, .16);

    box-shadow:
        1px 0 0 rgba(255, 255, 255, .08);

    color: var(--sw-color-yellow);

    font-size:
        clamp(.82rem, .76rem + .20vw, .94rem);

    font-weight: 600;
    line-height: 1.2;

    text-align: left;
    text-transform: uppercase;
    letter-spacing: .08em;

    animation:
        colorChangeFont
        var(--sw-anim-duration)
        linear
        infinite
        var(--sw-anim-offset) !important;
}


/* Rest der Gruppenzeile scrollt normal */
.dmk-cmp .dmk-cmp-group > .dmk-cmp-group-fill {
    position: relative;
    z-index: 1;

    min-width: 0;

    padding: 1.35rem 0 .55rem;

    background-color: var(--sw-color-black);

    border-bottom:
        var(--sw-border-w-input)
        solid
        rgba(255, 255, 255, .16);
}


/* ============================================================
   DIFFERENZ-ZEILEN
   ============================================================ */

/*
 * Wichtig:
 * Werte dürfen beim horizontalen Scrollen niemals über
 * die erste Spalte laufen.
 */
.dmk-cmp .dmk-diff > .dmk-cmp-row-label {
    position: sticky;
    left: 0;
    z-index: 20;

    background-color: var(--sw-color-black) !important;

    color: var(--sw-color-white);
}


/* Produktwerte dürfen hervorgehoben werden */
.dmk-cmp .dmk-diff > td {
    background-color:
        rgba(255, 199, 44, .055);

    box-shadow:
        inset 0 -1px 0
        rgba(255, 199, 44, .16);
}


/* ============================================================
   ROW HOVER
   ============================================================ */

.dmk-cmp tbody tr:not(.dmk-cmp-group):hover > td {
    background-color:
        rgba(255, 255, 255, .025);
}


/*
 * Sticky Merkmal bleibt immer undurchsichtig.
 * Sonst scheint beim Scrollen z.B. "38 V"
 * durch die linke Spalte hindurch.
 */
.dmk-cmp tbody tr:not(.dmk-cmp-group):hover > .dmk-cmp-row-label {
    background-color:
        var(--sw-color-black) !important;
}


/* ============================================================
   MOBILE / TABLET
   ============================================================ */

@media (max-width: 767px) {

    .dmk-cmp thead .dmk-cmp-feature-head,
    .dmk-cmp tbody tr:not(.dmk-cmp-group) > .dmk-cmp-row-label,
    .dmk-cmp .dmk-cmp-group > .dmk-cmp-group-label {
        min-width: 135px;
        width: 135px;
    }

}



/* ------------------------------------------------------------
   21.4.2 Produktkopf
   ------------------------------------------------------------ */

.dmk-cmp-product-head {
    position:
        relative;

    min-width:
        200px !important;

    width:
        200px;

    font-weight:
        400;
}


.dmk-cmp-product-link {
    display:
        flex;

    flex-direction:
        column;

    align-items:
        center;

    gap:
        0.55rem;

    color:
        var(--sw-color-gray-light) !important;

    text-decoration:
        none !important;

    animation:
        none !important;

    transition:
        color 0.2s ease,
        transform 0.2s ease;
}


.dmk-cmp-product-link:hover,
.dmk-cmp-product-link:focus-visible {
    color:
        var(--sw-color-white) !important;

    transform:
        translateY(-2px);

    outline:
        none;
}


.dmk-cmp-product-image {
    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    width:
        100%;

    min-height:
        96px;
}


.dmk-cmp-product-image img {
    display:
        block;

    width:
        auto;

    max-width:
        130px;

    max-height:
        100px;

    height:
        auto;

    margin:
        0 auto;

    border-radius:
        var(--sw-radius-control);

    object-fit:
        contain;
}


.dmk-cmp-product-name {
    display:
        block;

    font-weight:
        600;

    line-height:
        1.3;
}


.dmk-cmp-product-sku {
    display:
        block;

    margin-top:
        0.35rem;

    color:
        var(--sw-color-gray);

    font-size:
        0.78em;

    font-weight:
        400;

    letter-spacing:
        0.02em;
}



/* ------------------------------------------------------------
   21.4.3 Tabellen-Hover
   ------------------------------------------------------------ */

.dmk-cmp tbody
tr:not(.dmk-cmp-group):hover
>
td,

.dmk-cmp tbody
tr:not(.dmk-cmp-group):hover
>
.dmk-cmp-row-label {
    background-color:
        rgba(255,255,255,0.025);
}



/* ------------------------------------------------------------
   21.4.4 Gruppenüberschriften
   ------------------------------------------------------------ */

.dmk-cmp
.dmk-cmp-group
>
th {
    min-width:
        0;

    padding:
        1.35rem
        1rem
        0.55rem;

    background:
        var(--sw-color-black);

    border-bottom:
        var(--sw-border-w-input)
        solid
        rgba(255,255,255,0.16);

    color:
        var(--sw-color-yellow);

    font-size:
        clamp(
            0.82rem,
            0.76rem + 0.20vw,
            0.94rem
        );

    font-weight:
        600;

    line-height:
        1.2;

    text-align:
        left;

    text-transform:
        uppercase;

    letter-spacing:
        0.08em;

    animation:
        colorChangeFont
        var(--sw-anim-duration)
        linear
        infinite
        var(--sw-anim-offset)
        !important;
}



/* ------------------------------------------------------------
   21.4.5 Unterschiede
   ------------------------------------------------------------ */

.dmk-cmp
.dmk-diff
>
td {
    background:
        rgba(255,199,44,0.055);

    box-shadow:
        inset
        0
        -1px
        0
        rgba(255,199,44,0.16);
}


.dmk-cmp
.dmk-diff
>
.dmk-cmp-row-label {
    color:
        var(--sw-color-white);
}



/* ------------------------------------------------------------
   21.4.6 Ja / Nein Features
   ------------------------------------------------------------ */

.dmk-cmp-feature-state {
    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    min-width:
        28px;

    height:
        28px;

    border-radius:
        var(--sw-radius-pill);

    font-weight:
        700;

    line-height:
        1;
}


.dmk-cmp-feature-state.is-yes {
    background:
        rgba(72,213,151,0.10);

    color:
        var(--sw-color-green);
}


.dmk-cmp-feature-state.is-no {
    background:
        rgba(255,255,255,0.04);

    color:
        var(--sw-color-gray);
}



/* ------------------------------------------------------------
   21.4.7 Download-Link
   ------------------------------------------------------------ */

.dmk-cmp-download {
    display:
        inline-flex;

    align-items:
        center;

    gap:
        0.35rem;

    color:
        var(--sw-color-yellow);

    font-weight:
        600;

    text-decoration:
        none !important;

    animation:
        colorChangeFont
        var(--sw-anim-duration)
        linear
        infinite
        var(--sw-anim-offset)
        !important;

    transition:
        opacity 0.2s ease,
        transform 0.2s ease;
}


.dmk-cmp-download:hover,
.dmk-cmp-download:focus-visible {
    opacity:
        0.86;

    transform:
        translateX(2px);

    outline:
        none;
}



/* ------------------------------------------------------------
   21.4.8 Nur Unterschiede
   ------------------------------------------------------------ */

body.dmk-cmp-diffonly
.dmk-cmp
tbody
tr:not(.dmk-diff):not(.dmk-cmp-group) {
    display:
        none;
}



/* ------------------------------------------------------------
   21.4.9 Leerzustand
   ------------------------------------------------------------ */

.dmk-cmp-empty {
    margin:
        0;

    padding:
        1rem
        1.1rem;

    background:
        var(--sw-color-form-bg);

    border:
        var(--sw-border-w-input)
        solid
        rgba(255,255,255,0.14);

    border-radius:
        var(--sw-radius-control);

    color:
        var(--sw-color-gray);

    line-height:
        1.5;
}



/* ============================================================
   21.5 PRODUKT AUS VERGLEICH ENTFERNEN
   ============================================================ */

.dmk-cmp-remove {
    position:
        absolute;

    top:
        8px;

    right:
        8px;

    width:
        28px;

    height:
        28px;

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    padding:
        0;

    margin:
        0;

    border:
        1px
        solid
        rgba(255,255,255,0.14);

    border-radius:
        var(--sw-radius-pill);

    background:
        rgba(255,255,255,0.035);

    color:
        var(--sw-color-gray);

    font:
        inherit;

    font-size:
        1.1rem;

    line-height:
        1;

    cursor:
        pointer;

    transition:
        color 0.2s ease,
        border-color 0.2s ease,
        background-color 0.2s ease,
        transform 0.2s ease;
}


.dmk-cmp-remove:hover,
.dmk-cmp-remove:focus-visible {
    color:
        var(--sw-color-white);

    border-color:
        var(--sw-color-pink);

    background:
        rgba(239,66,111,0.10);

    transform:
        scale(1.08);
}


.dmk-cmp-remove:focus-visible {
    outline:
        2px
        solid
        var(--sw-color-pink);

    outline-offset:
        2px;
}



/* ============================================================
   21.6 RESPONSIVE
   ============================================================ */

@media (max-width: 767px) {

    /* Compare Button */

    .dmk-cmp-btn {
        width:
            34px;

        min-width:
            34px;

        height:
            34px;

        min-height:
            34px;

        padding:
            0;

        border-radius:
            50%;
    }


    .dmk-cmp-btn-txt {
        display:
            none;
    }


    /* Floating Bar */

    .dmk-cmp-bar {
        bottom:
            10px;

        width:
            calc(100vw - 16px);

        gap:
            0.45rem;

        padding:
            0.5rem;

        border-radius:
            12px;
    }


    .dmk-cmp-bar-msg {
        display:
            none !important;
    }


    .dmk-cmp-bar-go {
        min-height:
            36px;

        padding-inline:
            0.7rem;
    }


    .dmk-cmp-bar-clear {
        padding-inline:
            0.15rem;
    }


    /* Tabelle */

    .dmk-cmp th,
    .dmk-cmp td {
        min-width:
            155px;

        padding:
            0.72rem
            0.75rem;
    }


    .dmk-cmp
    .dmk-cmp-feature-head,

    .dmk-cmp
    .dmk-cmp-row-label {
        min-width:
            135px;

        width:
            135px;
    }


    .dmk-cmp-product-head {
        min-width:
            165px !important;

        width:
            165px;
    }


    .dmk-cmp-product-image {
        min-height:
            78px;
    }


    .dmk-cmp-product-image img {
        max-width:
            105px;

        max-height:
            82px;
    }


    .dmk-cmp
    .dmk-cmp-group
    >
    th {
        padding-top:
            1.1rem;
    }
}

/* ============================================================
   22  PRODUKTDETAIL / PRODUCT DISPLAY LAYER
   ------------------------------------------------------------
   Zentrales Frontend-Design für:

   [demke_tech_specs]
   [demke_specs view="detail"]
   [demke_specs view="card"]
   [demke_specs view="hero"]
   [demke_downloads]
   [demke_features]
   [demke_status_badge]
   [demke_eol_notice]
   [demke_debug]

   PHP liefert ausschließlich Daten und HTML.
   Das komplette Frontend-Design liegt hier.

   Typografie der normalen Produktinhalte wird grundsätzlich
   von Elementor geerbt.

   Enthält:
   22.1 Technische Daten
   22.2 Card View
   22.3 Hero View
   22.4 Downloads
   22.5 Features / Zertifizierungen
   22.6 Status
   22.7 Tooltips
   22.8 EOL-Hinweis
   22.9 Icons
   22.10 Debug
   22.11 Anwendungsbeispiele / Produktlisten
   ============================================================ */


/* ============================================================
   22.1 TECHNISCHE DATEN
   ------------------------------------------------------------
   [demke_tech_specs]
   [demke_specs view="detail"]

   Markup:
   .dmk-tech-specs
     .dmk-tech-group
       .dmk-tech-group-title
       .dmk-tech-table
         .dmk-tech-table-row
           .dmk-tech-label
           .dmk-tech-value
   ============================================================ */


/* ============================================================
   22.1 TECHNISCHE DATEN
   ------------------------------------------------------------
   Zentrales Design für:

   [demke_tech_specs]
   [demke_tech_specs group="electrical"]
   [demke_specs view="detail"]
   [demke_key_specs]

   Detailansicht:
   - echte semantische HTML-Tabelle
   - geschlossene Label-/Wert-Struktur
   - feine DEMKE-Linien
   - ruhiger Dark-Look
   - dezenter Hover

   Key Specs:
   - kompakte Flex-Liste
   - bestehende Struktur bleibt kompatibel

   Typografie:
   - unterstützt xxxlarge bis xxsmall
   - Klasse wird am Elementor-Widget gesetzt
   ============================================================ */


/* ============================================================
   22.1.1 TYPOGRAFIE-VARIABLE
   ------------------------------------------------------------
   Ohne Größenklasse wird Elementor geerbt.
   ============================================================ */

.dmk-tech-specs {
    --dmk-tech-font-size: inherit;
}


/* Elementor Größenklassen */

.xxxlarge .dmk-tech-specs {
    --dmk-tech-font-size:
        clamp(3.00rem, 2.48276rem + 2.20690vw, 4.00rem);
}

.xxlarge .dmk-tech-specs {
    --dmk-tech-font-size:
        clamp(2.50rem, 1.98276rem + 2.20690vw, 3.50rem);
}

.xlarge .dmk-tech-specs {
    --dmk-tech-font-size:
        clamp(2.00rem, 1.48276rem + 2.20690vw, 3.00rem);
}

.large .dmk-tech-specs {
    --dmk-tech-font-size:
        clamp(1.50rem, 0.98276rem + 2.20690vw, 2.50rem);
}

.xmedium .dmk-tech-specs {
    --dmk-tech-font-size:
        clamp(1.25rem, 0.86207rem + 1.65517vw, 2.00rem);
}

.medium .dmk-tech-specs {
    --dmk-tech-font-size:
        clamp(1.19rem, 1.02586rem + 0.68966vw, 1.50rem);
}

.small .dmk-tech-specs {
    --dmk-tech-font-size:
        clamp(1.13rem, 1.06034rem + 0.27586vw, 1.25rem);
}

.xsmall .dmk-tech-specs {
    --dmk-tech-font-size:
        clamp(1.00rem, 0.93534rem + 0.27586vw, 1.13rem);
}

.xxsmall .dmk-tech-specs {
    --dmk-tech-font-size:
        clamp(0.82rem, 0.76681rem + 0.24828vw, 0.94rem);
}


/* ============================================================
   22.1.2 BASIS
   ============================================================ */

.dmk-tech-specs,
.dmk-tech-group,
.dmk-tech-table,
.dmk-tech-list,
.dmk-tech-row,
.dmk-tech-label,
.dmk-tech-value {
    box-sizing: border-box;

    font-family: inherit;
    line-height: inherit;
}


.dmk-tech-specs,
.dmk-tech-group,
.dmk-tech-list {
    width: 100%;
    min-width: 0;
}


.dmk-tech-specs {
    font-size:
        var(--dmk-tech-font-size);
}


/* ============================================================
   22.1.3 GRUPPE
   ============================================================ */

.dmk-tech-group {
    margin: 0;
    padding: 0;
}


/* Elektrische Eigenschaften /
   Mechanische Eigenschaften usw. */

.dmk-tech-group-title {
    display: block;

    margin:
        0
        0
        0.55em;

    padding: 0;

    color: inherit;

    font-family: inherit;

    font-size:
        var(--dmk-tech-font-size) !important;

    font-weight: 600;

    line-height: 1.3;
}


/* ============================================================
   22.1.4 DETAILTABELLE
   ------------------------------------------------------------
   WICHTIG:
   Das PHP rendert echte table/tr/th/td.
   ============================================================ */

.dmk-tech-table {
    width: 100%;

    margin: 0;
    padding: 0;

    table-layout: fixed;

    border-collapse: collapse;
    border-spacing: 0;

    border:
        var(--sw-border-w-input)
        solid
        rgba(255,255,255,0.16);

    background:
        transparent;

    color:
        var(--sw-color-gray);

    font-family: inherit;

    font-size:
        var(--dmk-tech-font-size) !important;

    line-height: 1.4;
}


/* ============================================================
   22.1.5 TABELLEN-DISPLAY RESET
   ------------------------------------------------------------
   Sehr wichtig.

   Verhindert, dass spätere globale Regeln oder Elementor
   th / td versehentlich zu flex / inline-flex machen.

   Das behebt insbesondere den schwarzen Zwischenraum.
   ============================================================ */

.dmk-tech-table > tbody {
    display:
        table-row-group !important;
}


.dmk-tech-table
.dmk-tech-table-row {
    display:
        table-row !important;
}


.dmk-tech-table
.dmk-tech-table-row
>
.dmk-tech-label,

.dmk-tech-table
.dmk-tech-table-row
>
.dmk-tech-value {
    display:
        table-cell !important;
}


/* ============================================================
   22.1.6 TABELLENZELLEN
   ============================================================ */

.dmk-tech-table th,
.dmk-tech-table td {
    box-sizing: border-box;

    margin: 0;

    padding:
        0.68em
        0.85em;

    border:
        0;

    border-bottom:
        var(--sw-border-w-input)
        solid
        rgba(255,255,255,0.10);

    background:
        transparent;

    color: inherit;

    font-family: inherit;

    font-size:
        var(--dmk-tech-font-size) !important;

    line-height: 1.4;

    vertical-align:
        middle;

    box-shadow:
        none;
}


/* Letzte Zeile */

.dmk-tech-table
.dmk-tech-table-row:last-child
>
th,

.dmk-tech-table
.dmk-tech-table-row:last-child
>
td {
    border-bottom:
        0;
}


/* ============================================================
   22.1.7 LABEL-SPALTE
   ============================================================ */

.dmk-tech-table
.dmk-tech-label {
    display:
        table-cell !important;

    width:
        58%;

    min-width:
        0;

    position:
        relative;

    padding:
        0.68em
        0.85em;

    border-right:
        var(--sw-border-w-input)
        solid
        rgba(255,255,255,0.10);

    color:
        var(--sw-color-gray);

    font-family:
        inherit;

    font-size:
        var(--dmk-tech-font-size) !important;

    font-weight:
        400;

    line-height:
        1.4;

    text-align:
        left;

    vertical-align:
        middle;

    white-space:
        normal;
}


/* Sichtbarer Labeltext */

.dmk-tech-table
.dmk-tech-label-text {
    min-width: 0;

    color:
        inherit;

    font-family:
        inherit;

    font-size:
        inherit !important;

    font-weight:
        inherit;

    line-height:
        inherit;

    vertical-align:
        middle;

    overflow-wrap:
        break-word;
}


/* ============================================================
   22.1.8 WERT-SPALTE
   ============================================================ */

.dmk-tech-table
.dmk-tech-value {
    display:
        table-cell !important;

    width:
        42%;

    min-width:
        0;

    padding:
        0.68em
        0.85em;

    color:
        var(--sw-color-gray-light);

    font-family:
        inherit;

    font-size:
        var(--dmk-tech-font-size) !important;

    font-weight:
        600;

    line-height:
        1.4;

    text-align:
        right;

    vertical-align:
        middle;

    font-variant-numeric:
        tabular-nums;

    white-space:
        normal;

    overflow-wrap:
        anywhere;
}


/* ============================================================
   22.1.9 ROW HOVER
   ------------------------------------------------------------
   Angelegt wie Produktvergleich:
   sehr dezente Hervorhebung.
   ============================================================ */

.dmk-tech-table
.dmk-tech-table-row:hover
>
.dmk-tech-label,

.dmk-tech-table
.dmk-tech-table-row:hover
>
.dmk-tech-value {
    background-color:
        rgba(255,255,255,0.03);
}


/* ============================================================
   22.1.10 CORE HELP ICON IN TABELLE
   ------------------------------------------------------------
   th bleibt Tabellenzelle.
   Nur das eigentliche Info-Element ist inline-flex.
   ============================================================ */

.dmk-tech-table
.dmk-tech-label
.dmk-core-help {
    display:
        inline-flex !important;

    margin-left:
        6px;

    vertical-align:
        middle;
}


/* ============================================================
   22.1.11 KEY SPECS
   ------------------------------------------------------------
   [demke_key_specs]

   Dieser Shortcode verwendet weiterhin:
   .dmk-tech-list
   .dmk-tech-row
   .dmk-tech-label
   .dmk-tech-value
   ============================================================ */

.dmk-key-specs
.dmk-tech-list {
    width:
        100%;

    margin:
        0;

    padding:
        0;
}


.dmk-key-specs
.dmk-tech-row {
    display:
        flex;

    justify-content:
        space-between;

    align-items:
        baseline;

    gap:
        1rem;

    width:
        100%;

    margin:
        0;

    padding:
        0;
}


.dmk-key-specs
.dmk-tech-row
>
.dmk-tech-label {
    display:
        inline-flex;

    align-items:
        center;

    min-width:
        0;

    color:
        inherit;

    font-family:
        inherit;

    font-size:
        var(--dmk-tech-font-size);

    font-weight:
        inherit;

    line-height:
        inherit;
}


.dmk-key-specs
.dmk-tech-row
>
.dmk-tech-value {
    display:
        inline;

    flex:
        0 0 auto;

    color:
        inherit;

    font-family:
        inherit;

    font-size:
        var(--dmk-tech-font-size);

    font-weight:
        inherit;

    line-height:
        inherit;

    text-align:
        right;
}


/* ============================================================
   22.1.12 MOBILE
   ============================================================ */

@media (max-width: 767px) {

    .dmk-tech-table
    .dmk-tech-label {
        width:
            60%;
    }


    .dmk-tech-table
    .dmk-tech-value {
        width:
            40%;
    }


    .dmk-tech-table th,
    .dmk-tech-table td,

    .dmk-tech-table
    .dmk-tech-label,

    .dmk-tech-table
    .dmk-tech-value {
        padding:
            0.60em
            0.65em;
    }

}

/* ============================================================
   22.2 CARD VIEW
   ------------------------------------------------------------
   [demke_specs view="card"]
   ============================================================ */

.dmk-card-specs,
.dmk-card-spec,
.dmk-card-spec-label,
.dmk-card-spec-value {
    font: inherit;
    line-height: inherit;
}


.dmk-card-specs {
    width: 100%;
}


.dmk-card-spec {
    display: flex;

    justify-content: space-between;
    align-items: baseline;

    gap: 0.75rem;

    width: 100%;
}


.dmk-card-spec-label {
    min-width: 0;

    color: inherit;
}


.dmk-card-spec-value {
    flex: 0 0 auto;

    color: inherit;

    text-align: right;
}



/* ============================================================
   22.3 HERO VIEW
   ------------------------------------------------------------
   [demke_specs view="hero"]
   ============================================================ */

.dmk-hero-specs,
.dmk-hero-spec,
.dmk-hero-spec-value,
.dmk-hero-spec-label {
    font: inherit;
    line-height: inherit;
}


.dmk-hero-specs {
    display: flex;
    flex-wrap: wrap;

    gap: 1.5rem;
}


.dmk-hero-spec {
    display: flex;
    flex-direction: column;

    min-width: 0;
}


.dmk-hero-spec-value,
.dmk-hero-spec-label {
    color: inherit;
}



/* ============================================================
   22.4 DOWNLOADS
   ------------------------------------------------------------
   [demke_downloads]

   - untereinander
   - Aufzählungspunkte
   - Links animiert im Demke-Farbsystem
   - Typografie von Elementor
   ============================================================ */

.dmk-downloads {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;

    align-items: flex-start;

    gap: 0.35em;

    margin: 0;
    padding: 0;

    font: inherit;
    line-height: inherit;
}


.dmk-downloads .dmk-dl-btn {
    position: relative;

    display: block;

    width: fit-content;

    margin: 0;

    padding:
        0
        0
        0
        1.15em;

    color: var(--sw-color-yellow);

    font: inherit;
    line-height: inherit;

    text-decoration: none !important;

    animation:
        colorChangeFont
        var(--sw-anim-duration)
        linear
        infinite
        var(--sw-anim-offset)
        !important;

    transition:
        opacity 0.2s ease,
        transform 0.2s ease;
}


.dmk-downloads .dmk-dl-btn::before {
    content: "•";

    position: absolute;

    top: 0;
    left: 0;

    color: currentColor;

    font: inherit;

    animation: none !important;
}


.dmk-downloads .dmk-dl-btn:hover,
.dmk-downloads .dmk-dl-btn:focus-visible {
    opacity: 0.85;

    transform:
        translateX(2px);
}



/* ============================================================
   22.5 FEATURES / ZERTIFIZIERUNGEN
   ------------------------------------------------------------
   [demke_features]

   PHP bezeichnet die Elemente intern weiterhin als "Badges".
   Visuell werden sie hier als normale Liste dargestellt.

   - untereinander
   - keine Badge-Fläche
   - Aufzählungspunkte
   - normale Textfarbe
   - Typografie von Elementor
   - Tooltip-Funktion bleibt bestehen
   ============================================================ */

.dmk-features {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;

    align-items: flex-start;

    gap: 0.35em;

    margin: 0;
    padding: 0;

    color: inherit;

    font: inherit;
    line-height: inherit;
}


.dmk-features .dmk-feature-badge {
    position: relative;

    display: block;

    width: fit-content;

    margin: 0;

    padding:
        0
        0
        0
        1.15em;

    background: transparent;

    border: 0;
    border-radius: 0;

    color: inherit;

    font: inherit;
    font-size: inherit;
    font-weight: inherit;
    line-height: inherit;
}


.dmk-features .dmk-feature-label {
    color: inherit;

    font: inherit;
    font-size: inherit;
    font-weight: inherit;
    line-height: inherit;
}


.dmk-features .dmk-feature-badge::before {
    content: "•";

    position: absolute;

    top: 0;
    left: 0;

    color: currentColor;

    font: inherit;
}



/* ============================================================
   22.6 STATUS
   ------------------------------------------------------------
   [demke_status_badge]
   ============================================================ */

.dmk-status-badge {
    position: relative;

    display: inline-flex;

    align-items: center;
    justify-content: center;

    width: 1.5em;
    height: 1.5em;

    border:
        var(--sw-border-w)
        solid
        currentColor;

    border-radius: 50%;

    background:
        rgba(255,255,255,0.04);
}


/* MTS */

.dmk-status-mts {
    color:
        var(--sw-color-green);
}


/* BTO */

.dmk-status-bto {
    color:
        var(--sw-color-blue);
}


/* MOQ */

.dmk-status-moq {
    color:
        var(--sw-color-yellow);
}


/* EOL */

.dmk-status-eol {
    color:
        var(--sw-color-pink);
}



/* ============================================================
   22.7 TOOLTIPS
   ------------------------------------------------------------
   Status + Feature Tooltips
   ============================================================ */

.dmk-status-tooltip,
.dmk-feature-tooltip {
    position: absolute;

    top:
        calc(100% + 6px);

    left: 0;

    z-index: 10;

    width:
        max-content;

    max-width:
        min(260px, 80vw);

    padding:
        0.4rem
        0.65rem;

    background:
        var(--sw-color-form-bg);

    border-radius:
        var(--sw-radius-control);

    color:
        var(--sw-color-white);

    font-family:
        inherit;

    font-weight:
        400;

    line-height:
        1.4;

    white-space:
        normal;

    box-shadow:
        0
        2px
        8px
        rgba(0,0,0,0.35);

    pointer-events:
        none;

    opacity:
        0;

    visibility:
        hidden;

    transition:
        opacity
        0.15s
        ease;
}


.dmk-status-badge:hover
.dmk-status-tooltip,

.dmk-status-badge:focus
.dmk-status-tooltip,

.dmk-status-badge:focus-visible
.dmk-status-tooltip,

.dmk-feature-badge:hover
.dmk-feature-tooltip,

.dmk-feature-badge:focus
.dmk-feature-tooltip,

.dmk-feature-badge:focus-visible
.dmk-feature-tooltip {
    opacity:
        1;

    visibility:
        visible;
}

/* ============================================================
   22.7.1 CORE HELP / INFO-TOOLTIPS
   ------------------------------------------------------------
   Hilfstexte aus Demke Product Specs Core.

   Verwendet in:
   - Technische Daten
   - Key Specs
   - Key Features
   - Produktvergleich

   Logik:
   - help_de / help_en leer
     -> PHP erzeugt kein Info-Symbol
   - Hilfstext vorhanden
     -> kleines "i"
     -> Tooltip bei Hover / Tastaturfokus

   WICHTIG:
   Eigene font-size mit !important, da die globalen
   Typografie-Klassen in Sektion 03 alle <span> skalieren.
   ============================================================ */


/* ------------------------------------------------------------
   22.7.1.1 INFO-WRAPPER
   ------------------------------------------------------------ */

.dmk-core-help {
    position: relative;

    display: inline-flex !important;
    align-items: center;
    justify-content: center;

    flex: 0 0 auto;

    width: 18px;
    height: 18px;

    margin-left: 6px;

    vertical-align: middle;

    color: var(--sw-color-gray);

    font-size: 11px !important;
    line-height: 1 !important;

    cursor: help;

    outline: none;

    z-index: 50;
}


/* ------------------------------------------------------------
   22.7.1.2 SICHTBARES "i"
   ------------------------------------------------------------ */

.dmk-core-help-icon {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;

    box-sizing: border-box;

    width: 17px;
    height: 17px;

    border:
        var(--sw-border-w-input)
        solid
        currentColor;

    border-radius: 50%;

    color: inherit;

    font-family: inherit !important;
    font-size: 10px !important;
    font-weight: 700 !important;
    line-height: 1 !important;

    opacity: 0.7;

    transition:
        color 0.2s ease,
        opacity 0.2s ease,
        border-color 0.2s ease,
        background-color 0.2s ease,
        transform 0.2s ease;
}


/* Hover / Fokus */

.dmk-core-help:hover,
.dmk-core-help:focus,
.dmk-core-help:focus-visible {
    color: var(--sw-color-yellow);
}


.dmk-core-help:hover .dmk-core-help-icon,
.dmk-core-help:focus .dmk-core-help-icon,
.dmk-core-help:focus-visible .dmk-core-help-icon {
    opacity: 1;

    background:
        rgba(255,199,44,0.08);

    transform:
        scale(1.05);
}


/* Tastaturfokus */

.dmk-core-help:focus-visible .dmk-core-help-icon {
    outline:
        2px
        solid
        var(--sw-color-yellow);

    outline-offset:
        2px;
}


/* ------------------------------------------------------------
   22.7.1.3 TOOLTIP
   ------------------------------------------------------------ */

.dmk-core-help-tooltip {
    position: absolute;

    left: 50%;
    bottom: calc(100% + 9px);

    z-index: 9999;

    width: max-content;

    max-width:
        min(300px, 75vw);

    padding:
        0.5rem
        0.65rem;

    background:
        var(--sw-color-form-bg);

    border:
        var(--sw-border-w-input)
        solid
        rgba(255,255,255,0.18);

    border-radius:
        var(--sw-radius-control);

    color:
        var(--sw-color-white) !important;

    font-family:
        inherit !important;

    font-size:
        clamp(
            0.76rem,
            0.72rem + 0.12vw,
            0.82rem
        ) !important;

    font-weight:
        400 !important;

    line-height:
        1.45 !important;

    text-align:
        left;

    white-space:
        normal !important;

    overflow-wrap:
        break-word;

    box-shadow:
        0
        12px
        30px
        rgba(0,0,0,0.45);

    pointer-events:
        none;

    opacity:
        0;

    visibility:
        hidden;

    transform:
        translate(-50%, 4px);

    transition:
        opacity 0.15s ease,
        visibility 0.15s ease,
        transform 0.15s ease;
}


/* Kleiner Tooltip-Pfeil */

.dmk-core-help-tooltip::after {
    content: "";

    position: absolute;

    top: 100%;
    left: 50%;

    width: 7px;
    height: 7px;

    background:
        var(--sw-color-form-bg);

    border-right:
        var(--sw-border-w-input)
        solid
        rgba(255,255,255,0.18);

    border-bottom:
        var(--sw-border-w-input)
        solid
        rgba(255,255,255,0.18);

    transform:
        translate(-50%, -4px)
        rotate(45deg);
}


/* Tooltip öffnen */

.dmk-core-help:hover
.dmk-core-help-tooltip,

.dmk-core-help:focus
.dmk-core-help-tooltip,

.dmk-core-help:focus-visible
.dmk-core-help-tooltip {
    opacity: 1;

    visibility: visible;

    transform:
        translate(-50%, 0);
}


/* ============================================================
   22.7.1.4 TECHNISCHE DATEN
   Label + Info sauber nebeneinander.
   ============================================================ */

.dmk-tech-label {
    display: inline-flex;

    align-items: center;

    gap: 0;

    position: relative;
}


.dmk-tech-label-text {
    min-width: 0;
}


/* ============================================================
   22.7.1.5 KEY FEATURES
   ============================================================ */

.dmk-key-feature {
    position: relative;

    display: inline-flex;

    align-items: center;
}


.dmk-key-feature .dmk-core-help {
    margin-left: 6px;
}


/* ============================================================
   22.7.1.6 PRODUKTVERGLEICH
   ------------------------------------------------------------
   th selbst bleibt eine normale Tabellenzelle.
   Deshalb NICHT display:flex auf .dmk-cmp-row-label setzen.
   ============================================================ */

.dmk-cmp-row-label {
    position: sticky;
}


.dmk-cmp-row-label-text {
    vertical-align: middle;
}


.dmk-cmp-row-label .dmk-core-help {
    margin-left: 6px;

    vertical-align: middle;
}


/*
 * Vergleich hat eine Sticky-Spalte.
 * Info-Tooltip muss über den normalen Produktzellen liegen.
 */

.dmk-cmp
.dmk-cmp-row-label:has(.dmk-core-help) {
    z-index: 40;
}


/* ============================================================
   22.7.1.7 MOBILE
   Tooltip etwas kompakter.
   ============================================================ */

@media (max-width: 767px) {

    .dmk-core-help {
        width: 17px;
        height: 17px;

        margin-left: 5px;
    }


    .dmk-core-help-icon {
        width: 16px;
        height: 16px;

        font-size: 9px !important;
    }


    .dmk-core-help-tooltip {
        max-width:
            min(240px, 70vw);

        padding:
            0.45rem
            0.55rem;

        font-size:
            0.76rem !important;
    }

}

/* ============================================================
   22.8 EOL-HINWEIS
   ------------------------------------------------------------
   [demke_eol_notice]
   ============================================================ */

.dmk-eol-notice {
    display: flex;

    align-items: flex-start;

    gap: 0.5rem;

    color:
        var(--sw-color-pink);

    font: inherit;
    line-height: inherit;
}


.dmk-eol-icon {
    display: inline-flex;

    flex: 0 0 auto;
}


.dmk-eol-text {
    color: inherit;

    font: inherit;
    line-height: inherit;
}


.dmk-eol-successor,
.dmk-eol-successor:visited {
    color: inherit !important;

    text-decoration: none !important;
}


.dmk-eol-successor:hover,
.dmk-eol-successor:focus-visible {
    opacity:
        0.85;
}



/* ============================================================
   22.9 ICONS
   ------------------------------------------------------------
   CSS-Masken sind der Standardmodus des Product Display Layers.

   Diese Regeln lagen bisher im PHP-Inline-CSS.
   ============================================================ */

svg.dmk-icon {
    display: block;

    width: 1em;
    height: 1em;
}


i.dmk-icon {
    line-height: 1;
}


.dmk-status-icon,
.dmk-eol-icon {
    display: inline-flex;

    flex: 0 0 auto;
}


i.dmk-icon.dmk-i {
    display: inline-block;

    width: 1em;
    height: 1em;

    background-color:
        currentColor;

    -webkit-mask-repeat:
        no-repeat;

    mask-repeat:
        no-repeat;

    -webkit-mask-position:
        center;

    mask-position:
        center;

    -webkit-mask-size:
        contain;

    mask-size:
        contain;
}



/* Check */

i.dmk-icon.dmk-i-check {
    -webkit-mask-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");

    mask-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
}



/* Gear */

i.dmk-icon.dmk-i-gear {
    -webkit-mask-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12.22 2h-.44a2 2 0 0 0-2 2v.18a2 2 0 0 1-1 1.73l-.43.25a2 2 0 0 1-2 0l-.15-.08a2 2 0 0 0-2.73.73l-.22.38a2 2 0 0 0 .73 2.73l.15.1a2 2 0 0 1 1 1.72v.51a2 2 0 0 1-1 1.74l-.15.09a2 2 0 0 0-.73 2.73l.22.38a2 2 0 0 0 2.73.73l.15-.08a2 2 0 0 1 2 0l.43.25a2 2 0 0 1 1 1.73V20a2 2 0 0 0 2 2h.44a2 2 0 0 0 2-2v-.18a2 2 0 0 1 1-1.73l.43-.25a2 2 0 0 1 2 0l.15.08a2 2 0 0 0 2.73-.73l.22-.39a2 2 0 0 0-.73-2.73l-.15-.08a2 2 0 0 1-1-1.74v-.5a2 2 0 0 1 1-1.74l.15-.09a2 2 0 0 0 .73-2.73l-.22-.38a2 2 0 0 0-2.73-.73l-.15.08a2 2 0 0 1-2 0l-.43-.25a2 2 0 0 1-1-1.73V4a2 2 0 0 0-2-2z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E");

    mask-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12.22 2h-.44a2 2 0 0 0-2 2v.18a2 2 0 0 1-1 1.73l-.43.25a2 2 0 0 1-2 0l-.15-.08a2 2 0 0 0-2.73.73l-.22.38a2 2 0 0 0 .73 2.73l.15.1a2 2 0 0 1 1 1.72v.51a2 2 0 0 1-1 1.74l-.15.09a2 2 0 0 0-.73 2.73l.22.38a2 2 0 0 0 2.73.73l.15-.08a2 2 0 0 1 2 0l.43.25a2 2 0 0 1 1 1.73V20a2 2 0 0 0 2 2h.44a2 2 0 0 0 2-2v-.18a2 2 0 0 1 1-1.73l.43-.25a2 2 0 0 1 2 0l.15.08a2 2 0 0 0 2.73-.73l.22-.39a2 2 0 0 0-.73-2.73l-.15-.08a2 2 0 0 1-1-1.74v-.5a2 2 0 0 1 1-1.74l.15-.09a2 2 0 0 0 .73-2.73l-.22-.38a2 2 0 0 0-2.73-.73l-.15.08a2 2 0 0 1-2 0l-.43-.25a2 2 0 0 1-1-1.73V4a2 2 0 0 0-2-2z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E");
}



/* Info */

i.dmk-icon.dmk-i-info {
    -webkit-mask-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 16v-4'/%3E%3Cpath d='M12 8h.01'/%3E%3C/svg%3E");

    mask-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 16v-4'/%3E%3Cpath d='M12 8h.01'/%3E%3C/svg%3E");
}



/* X */

i.dmk-icon.dmk-i-x {
    -webkit-mask-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 6 6 18'/%3E%3Cpath d='m6 6 12 12'/%3E%3C/svg%3E");

    mask-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 6 6 18'/%3E%3Cpath d='m6 6 12 12'/%3E%3C/svg%3E");
}



/* Alert */

i.dmk-icon.dmk-i-alert {
    -webkit-mask-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3'/%3E%3Cpath d='M12 9v4'/%3E%3Cpath d='M12 17h.01'/%3E%3C/svg%3E");

    mask-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3'/%3E%3Cpath d='M12 9v4'/%3E%3Cpath d='M12 17h.01'/%3E%3C/svg%3E");
}



/* ============================================================
   22.10 DEBUG
   ------------------------------------------------------------
   [demke_debug]

   Nur für eingeloggte Admins.
   Monospace ist hier absichtlich sinnvoll.
   ============================================================ */

.dmk-debug {
    display: grid;

    gap: 1rem;

    font-family:
        monospace;

    font-size:
        0.8rem;
}


.dmk-debug-title {
    margin:
        0
        0
        0.25rem;

    font-size:
        0.8rem;

    text-transform:
        uppercase;
}


.dmk-debug-row {
    display: flex;

    gap: 1rem;

    padding:
        0.15rem
        0;

    border-bottom:
        var(--sw-border-w-input)
        dashed
        rgba(255,255,255,0.15);
}


.dmk-debug-label {
    flex:
        0
        0
        9rem;
}


.dmk-debug-ok
.dmk-debug-value {
    color:
        var(--sw-color-green);
}


.dmk-debug-missing
.dmk-debug-value {
    color:
        var(--sw-color-pink);
}



/* ============================================================
   22.11 ANWENDUNGSBEISPIELE / NORMALE PRODUKTLISTEN
   ------------------------------------------------------------
   Für Elementor-Text-/Listen-Widgets.

   CSS-Klasse am Widget:
   dmk-product-list

   Die Typografie wird vollständig von Elementor übernommen.
   ============================================================ */

.dmk-product-list {
    color: inherit;

    font: inherit;
    line-height: inherit;
}


.dmk-product-list ul {
    margin: 0;
    padding: 0;

    list-style: none;

    color: inherit;

    font: inherit;
    line-height: inherit;
}


.dmk-product-list li {
    position: relative;

    margin: 0;

    padding:
        0
        0
        0
        1.15em;

    color: inherit;

    font: inherit;
    line-height: inherit;
}


.dmk-product-list li + li {
    margin-top:
        0.35em;
}


.dmk-product-list li::before {
    content: "•";

    position: absolute;

    top: 0;
    left: 0;

    color: currentColor;

    font: inherit;
}
/* ============================================================
   99  REDUCED MOTION
   MUSS die letzte Sektion bleiben: gleichspezifische
   !important-Regeln gewinnen nach Reihenfolge – stünde dieser
   Block früher, würden spätere animation-duration-Regeln ihn
   überschreiben und die Barrierefreiheit aushebeln.
   ============================================================ */

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        scroll-behavior: auto !important;
    }
}/* End custom CSS */
/* Start Custom Fonts CSS */@font-face {
	font-family: 'Roboto';
	font-style: normal;
	font-weight: normal;
	font-display: auto;
	src: url('https://demke-electronic.com/wp-content/uploads/Roboto-Regular.woff2') format('woff2');
}
@font-face {
	font-family: 'Roboto';
	font-style: normal;
	font-weight: 500;
	font-display: auto;
	src: url('https://demke-electronic.com/wp-content/uploads/Roboto-Medium.woff2') format('woff2');
}
@font-face {
	font-family: 'Roboto';
	font-style: normal;
	font-weight: 700;
	font-display: auto;
	src: url('https://demke-electronic.com/wp-content/uploads/Roboto-Bold.woff2') format('woff2');
}
@font-face {
	font-family: 'Roboto';
	font-style: normal;
	font-weight: 900;
	font-display: auto;
	src: url('https://demke-electronic.com/wp-content/uploads/Roboto-Black.woff2') format('woff2');
}
@font-face {
	font-family: 'Roboto';
	font-style: normal;
	font-weight: 300;
	font-display: auto;
	src: url('https://demke-electronic.com/wp-content/uploads/Roboto-Light.woff2') format('woff2');
}
@font-face {
	font-family: 'Roboto';
	font-style: normal;
	font-weight: 100;
	font-display: auto;
	src: url('https://demke-electronic.com/wp-content/uploads/Roboto-Thin.woff2') format('woff2');
}
/* End Custom Fonts CSS */