/* ==========================================================================
   Sanquell · Designsystem für das Kategorie-Raster
   Alles unter .sq gekapselt, damit Elementor, WooCommerce und die übrigen
   Plugins nichts überschreiben — und umgekehrt.
   ========================================================================== */

.sq {
  /* Marke */
  --sq-paper:#FFFFFF;
  --sq-surface:#F7F7F7;
  --sq-rule:#E2E2E2;
  --sq-rule-2:#EFEFEF;
  --sq-ink:#454545;
  --sq-ink-2:#5C5C5C;
  --sq-ink-3:#828282;
  --sq-head:#060202;
  --sq-head-2:#1A1A1A;
  --sq-blue:#2578C2;
  --sq-blue-deep:#1B5C97;
  /* Gold aus dem Handbuch-System, wie auf der Legionellenstudie */
  --sq-gold:#A9812E;
  --sq-gold-deep:#8C6A22;
  --sq-gold-soft:#D9BD7A;
  --sq-gold-bg:#FAF6EC;
  --sq-red:#DE0000;
  --sq-red-hover:#B80000;
  --sq-ok:#1F7A45;
  --sq-star:#E8A317;
  --sq-lift:0 4px 14px -4px rgba(0,0,0,.18);
  --sq-sans:"Sofia Sans","Sofia Pro",-apple-system,"Segoe UI",Arial,sans-serif;
  /* Überschriften wie auf der Legionellenstudie und im Handbuch */
  --sq-serif:"Zilla Slab",Georgia,"Times New Roman",serif;
  --sq-heading:#12172A;
  --sq-data:Inter,-apple-system,"Segoe UI",Arial,sans-serif;

  font-family:var(--sq-sans);
  color:var(--sq-ink);
}

.sq *,.sq *::before,.sq *::after{box-sizing:border-box}
.sq img{display:block;max-width:100%;height:auto}
/* Grundgröße für Inline-SVG: verhindert übergroße Icons ohne Maßangabe. */
.sq svg{width:1.1em;height:1.1em;flex:none}
.sq a{color:inherit;text-decoration:none}
.sq :focus-visible{outline:2px solid var(--sq-blue);outline-offset:2px}
.sq [hidden]{display:none!important}

/* ---------- Kategoriekopf ---------- */
.sq-head{padding:2.5rem 0 2rem}
.sq-eyebrow{display:block;font-family:var(--sq-data);font-size:.8rem;font-weight:700;
  letter-spacing:.16em;text-transform:uppercase;color:var(--sq-gold-deep);margin-bottom:.8rem}
.sq-head__titel{font-family:var(--sq-serif);font-size:clamp(1.85rem,3.7vw,2.4rem);font-weight:600;
  text-transform:uppercase;line-height:1.06;letter-spacing:-.015em;color:var(--sq-heading);
  margin:0;max-width:22ch;text-wrap:balance}
.sq-head__text{margin-top:.9rem;max-width:62ch}
.sq-head__text p{font-size:1.08rem;line-height:1.65;color:var(--sq-ink-2);margin:0 0 .7rem}
.sq-head__text p:last-child{margin-bottom:0}

.sq-usp{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem 1.5rem;margin-top:1.75rem;
  padding-top:1.5rem;border-top:1px solid var(--sq-rule-2)}
@media (max-width:880px){.sq-usp{grid-template-columns:1fr 1fr}}
@media (max-width:480px){.sq-usp{grid-template-columns:1fr}}
.sq-usp__item{display:flex;gap:.65rem;align-items:flex-start}
.sq-usp__item>svg{color:var(--sq-blue);margin-top:.15rem;width:18px;height:18px}
.sq-usp__item b{display:block;font-size:1rem;color:var(--sq-head);font-weight:700;line-height:1.35}
.sq-usp__item b+span{display:block;font-size:.9rem;color:var(--sq-ink-3);line-height:1.45;margin-top:.1rem}

/* ---------- Auswahlhelfer ---------- */
.sq-picker{position:sticky;top:0;z-index:20;background:var(--sq-paper);
  border-top:1px solid var(--sq-rule);border-bottom:1px solid var(--sq-rule);padding:.9rem 0}
/* Auf schmalen Schirmen bliebe die Leiste sonst oben kleben und verdeckte
   einen Großteil des Bildschirms. Deshalb ab hier normal mitscrollen - und die
   Filterknöpfe stehen in einer Zeile, die sich seitlich schieben lässt, statt
   auf mehrere Zeilen umzubrechen. */
@media (max-width:900px){
  /* Mit .sq davor, damit die Regeln die weiter unten stehenden Basisregeln
     schlagen - sonst entscheidet die Reihenfolge im Stylesheet. */
  .sq .sq-picker{position:static;top:auto}
  .sq .sq-picker__row{gap:.75rem}

  .sq .sq-chips{flex:1 1 100%;min-width:0;flex-wrap:nowrap;overflow-x:auto;
    scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch;
    scrollbar-width:none;-ms-overflow-style:none;padding-bottom:.15rem}
  .sq .sq-chips::-webkit-scrollbar{display:none}
  .sq .sq-chip{flex:0 0 auto;white-space:nowrap;scroll-snap-align:start}

  .sq .sq-picker__right{flex:1 1 100%;justify-content:space-between}
}
.sq-head+.sq .sq-picker,.sq-head~.sq .sq-picker{border-top:1px solid var(--sq-rule)}
.sq-picker__row{display:flex;align-items:center;gap:1rem;flex-wrap:wrap;justify-content:space-between}
.sq-picker__label{font-family:var(--sq-data);font-size:.7rem;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--sq-ink-3);width:100%}
.sq-chips{display:flex;gap:.45rem;flex-wrap:wrap}
.sq-chip{border:1px solid var(--sq-rule);background:var(--sq-paper);color:var(--sq-ink-2);
  font:inherit;font-size:.92rem;font-weight:600;padding:.55rem 1.05rem;cursor:pointer;border-radius:0;
  transition:border-color .15s,color .15s,background .15s}
.sq-chip:hover{border-color:var(--sq-blue);color:var(--sq-head)}
.sq-chip[aria-pressed="true"]{background:var(--sq-head-2);border-color:var(--sq-head-2);color:#fff}
/* margin-left:auto, damit die Zählung rechts stehen bleibt, auch wenn links
   keine Filterknöpfe sind — bei Kategorien ohne Auswahlhelfer. */
.sq-picker__right{display:flex;align-items:center;gap:.85rem;flex-wrap:wrap;margin-left:auto}
.sq-count{font-family:var(--sq-data);font-size:.88rem;color:var(--sq-ink-3);white-space:nowrap;
  display:flex;align-items:center;gap:.4rem}
.sq-count b{color:var(--sq-head);font-weight:700}
.sq-select{border:1px solid var(--sq-rule);background:var(--sq-paper);color:var(--sq-ink);
  font:inherit;font-size:.9rem;padding:.55rem .75rem;border-radius:0;cursor:pointer}

/* ---------- Raster ---------- */
.sq-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1.25rem;padding:2.5rem 0}
@media (max-width:1120px){.sq-grid{grid-template-columns:repeat(3,1fr)}}
@media (max-width:880px){.sq-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:540px){.sq-grid{grid-template-columns:1fr}}

.sq-card{border:1px solid var(--sq-rule);background:var(--sq-paper);display:flex;flex-direction:column;
  transition:border-color .15s,box-shadow .15s}
.sq-card:hover{border-color:var(--sq-blue);box-shadow:var(--sq-lift)}
.sq-card__img{position:relative;display:block;background:#fff;border-bottom:1px solid var(--sq-rule-2);
  aspect-ratio:1/1;overflow:hidden}
.sq-card__img img{width:100%;height:100%;object-fit:contain;padding:.7rem}
.sq-badge{position:absolute;top:.7rem;z-index:1;font-family:var(--sq-data);font-size:.7rem;
  font-weight:700;letter-spacing:.08em;padding:.3rem .6rem;color:#fff;background:#111;
  max-width:calc(100% - 1.4rem);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* Datenkennzeichen links, Statuskennzeichen rechts - so überlappen sie nie. */
.sq-badge--daten{left:0}
.sq-badge--status{right:0}
.sq-badge--sale{background:var(--sq-red)}
.sq-badge--neu{background:var(--sq-blue)}
@media (max-width:540px){.sq-badge{font-size:.66rem;padding:.25rem .5rem}}

/* Rechts können zwei Kennzeichen stehen — der Status oben, darunter eine
   Angabe aus den Produktdaten, etwa die Passform bei Wechselpatronen. Der
   Stapel hält sie auseinander, statt sie übereinanderzulegen. */
.sq-stapel{position:absolute;top:.7rem;right:0;z-index:1;display:flex;flex-direction:column;
  align-items:flex-end;gap:.35rem;max-width:48%}
/* Stehen links und rechts Kennzeichen, teilen sie sich die Breite - sonst
   schiebt sich das rechte über das linke. */
.sq-card__img:has(.sq-stapel) .sq-badge--daten{max-width:48%}
.sq-stapel .sq-badge{position:static;max-width:100%}
/* Heller als die schwarzen Kennzeichen: Es ist eine Angabe, kein Signal. */
.sq-badge--daten2{background:rgba(255,255,255,.94);color:var(--sq-head);
  border:1px solid var(--sq-rule);font-weight:600;letter-spacing:.02em;
  white-space:normal;text-overflow:clip;line-height:1.3;text-align:right}
.sq-badge--daten2 b{display:block;font-size:.85em;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;color:var(--sq-ink-3)}

.sq-card__body{padding:1rem;display:flex;flex-direction:column;gap:.5rem;flex:1}
.sq-card__kicker{font-family:var(--sq-data);font-size:.7rem;font-weight:700;letter-spacing:.12em;
  text-transform:uppercase;color:var(--sq-gold-deep)}
.sq-card__title{font-size:1.08rem;font-weight:700;color:var(--sq-head);line-height:1.3}
.sq-card__title:hover{color:var(--sq-blue-deep)}
.sq-card__rating{display:flex;align-items:center;gap:.4rem;font-size:.84rem;color:var(--sq-ink-3);
  font-family:var(--sq-data)}
.sq-stars{color:var(--sq-star);font-size:.88rem;letter-spacing:.08em;font-family:var(--sq-sans)}
.sq-card__sku{font-family:var(--sq-data);font-size:.78rem;color:var(--sq-ink-3)}

.sq-specs{display:flex;flex-direction:column;gap:.35rem;font-size:.875rem;color:var(--sq-ink-2);
  border-top:1px solid var(--sq-rule-2);padding-top:.55rem}
.sq-specs div{display:flex;justify-content:space-between;gap:.6rem}
.sq-specs div span:last-child{font-family:var(--sq-data);color:var(--sq-head);font-weight:600;
  font-variant-numeric:tabular-nums;text-align:right}
.sq-na{color:var(--sq-ink-3)!important;font-weight:400!important;cursor:help}

.sq-card__stock{display:flex;align-items:center;gap:.4rem;font-size:.84rem;color:var(--sq-ok);font-weight:600}
.sq-card__stock--out{color:var(--sq-ink-3)}
.sq-dot{width:7px;height:7px;border-radius:50%;background:currentColor;flex:none}

.sq-card__price{margin-top:auto;padding-top:.6rem;font-family:var(--sq-data);
  font-size:1.35rem;font-weight:600;color:var(--sq-head);font-variant-numeric:tabular-nums;
  letter-spacing:-.02em;line-height:1.2}
.sq-card__price del{font-size:.62em;font-weight:400;color:var(--sq-ink-3);margin-right:.35rem}
.sq-card__price ins{text-decoration:none}
.sq-card__price .woocommerce-Price-taxRate,
.sq-card__price small{display:block;font-family:var(--sq-sans);font-size:.76rem;font-weight:400;
  color:var(--sq-ink-3);letter-spacing:0;margin-top:.15rem}

/* --- Warenkorbbereich -----------------------------------------------------
   Groß und rot ist allein der echte Kaufbutton.

   Achtung: Das Angebots-Plugin (AFRFQ) vergibt seinem Knopf dieselben
   WooCommerce-Klassen (add_to_cart_button product_type_simple). Unterscheidbar
   ist er über die eigene Klasse .afrfqbt, das Attribut data-rule_id und das
   Ziel javascript:void(0). Alle drei Merkmale werden geprüft, damit die Regel
   auch nach einem Plugin-Update noch greift.
   -------------------------------------------------------------------------- */
.sq-card__cart{display:flex;flex-direction:column;gap:.5rem}

/* Primär: der echte Kaufbutton. */
.sq-card__cart a[class*="product_type_"]:not(.afrfqbt):not([data-rule_id]):not([href^="javascript"]),
.sq-card__cart a.add_to_cart_button:not(.afrfqbt):not([data-rule_id]):not([href^="javascript"]),
.sq-card__cart button.add_to_cart_button:not(.afrfqbt):not([data-rule_id]),
.sq-card__cart .single_add_to_cart_button,
.sq-card__cart button[name="add-to-cart"]{display:flex!important;align-items:center;
  justify-content:center;width:100%;margin:0!important;padding:.9rem 1rem!important;
  background:var(--sq-red)!important;color:#fff!important;border:0!important;border-radius:0!important;
  font-family:var(--sq-sans)!important;font-size:.95rem!important;font-weight:800!important;
  line-height:1.2!important;text-align:center;text-transform:none!important;cursor:pointer;
  transition:background .15s}
.sq-card__cart a[class*="product_type_"]:not(.afrfqbt):not([data-rule_id]):not([href^="javascript"]):hover,
.sq-card__cart a.add_to_cart_button:not(.afrfqbt):not([data-rule_id]):not([href^="javascript"]):hover,
.sq-card__cart button.add_to_cart_button:not(.afrfqbt):not([data-rule_id]):hover,
.sq-card__cart .single_add_to_cart_button:hover,
.sq-card__cart button[name="add-to-cart"]:hover{background:var(--sq-red-hover)!important}
.sq-card__cart .add_to_cart_button.loading{opacity:.75}

/* Sekundär: „Angebot anfordern" und jeder andere Zusatzknopf. */
.sq-card__cart .afrfqbt,
.sq-card__cart [data-rule_id],
.sq-card__cart a[href^="javascript"],
.sq-card__cart a:not([class*="product_type_"]):not(.add_to_cart_button):not(.added_to_cart),
.sq-card__cart button:not([name="add-to-cart"]):not(.add_to_cart_button){
  display:flex!important;align-items:center;justify-content:center;width:100%;
  margin:0!important;padding:.5rem .9rem!important;
  background:var(--sq-paper)!important;color:var(--sq-ink-2)!important;
  border:1px solid var(--sq-rule)!important;border-radius:0!important;
  font-family:var(--sq-sans)!important;font-size:.86rem!important;font-weight:600!important;
  line-height:1.25!important;letter-spacing:0!important;text-align:center;
  text-transform:none!important;text-decoration:none!important;cursor:pointer;
  transition:border-color .15s,color .15s}
.sq-card__cart .afrfqbt:hover,
.sq-card__cart [data-rule_id]:hover,
.sq-card__cart a[href^="javascript"]:hover,
.sq-card__cart a:not([class*="product_type_"]):not(.add_to_cart_button):not(.added_to_cart):hover,
.sq-card__cart button:not([name="add-to-cart"]):not(.add_to_cart_button):hover{
  background:var(--sq-paper)!important;border-color:var(--sq-blue)!important;
  color:var(--sq-head)!important}

/* Die Bestätigung nach dem Hinzufügen bleibt ein Textlink. */
.sq-card__cart .added_to_cart{display:block!important;width:auto!important;
  margin:.1rem 0 0!important;padding:0!important;background:none!important;border:0!important;
  font-size:.84rem!important;font-weight:600!important;color:var(--sq-blue-deep)!important;
  text-decoration:underline!important;text-align:left}

/* Von WooCommerce eingefügte Hilfstexte für Screenreader nehmen keinen Platz. */
.sq-card__cart .screen-reader-text{position:absolute!important;width:1px;height:1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

.sq-empty{grid-column:1/-1;border:1px dashed var(--sq-rule);padding:2.5rem;text-align:center;
  color:var(--sq-ink-3);font-size:.9rem;display:flex;align-items:center;justify-content:center;
  gap:.75rem;flex-wrap:wrap}

/* ---------- Vergleichstabelle ---------- */
.sq-tablewrap{overflow-x:auto;border:1px solid var(--sq-rule);background:var(--sq-paper)}
.sq-table{width:100%;border-collapse:collapse;font-size:.92rem;min-width:46rem}
.sq-table__caption{text-align:left;font-family:var(--sq-data);font-size:.7rem;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;color:var(--sq-ink-3);padding:.9rem 1rem .2rem}
.sq-table th,.sq-table td{text-align:left;padding:.8rem 1rem;
  border-bottom:1px solid var(--sq-rule-2);vertical-align:top}
.sq-table thead th{font-family:var(--sq-data);font-size:.7rem;letter-spacing:.12em;
  text-transform:uppercase;color:var(--sq-ink-3);font-weight:700;background:var(--sq-surface);
  border-bottom:1.5px solid var(--sq-head-2)}
.sq-table tbody tr:last-child td{border-bottom:0}
.sq-table tbody th{font-weight:700;color:var(--sq-head);font-size:.94rem}
.sq-table tbody th a:hover{color:var(--sq-blue-deep)}
.sq-num{font-family:var(--sq-data);font-variant-numeric:tabular-nums;white-space:nowrap}
.sq-num del{color:var(--sq-ink-3);margin-right:.3rem}
.sq-num ins{text-decoration:none}
.sq-hint{font-size:.86rem;color:var(--sq-ink-3);margin:.8rem 0 0;max-width:66ch}

/* ---------- Fließtext aus der Kategoriebeschreibung ----------
   Steht unter dem Raster. Bewusst schmal: Das ist Lesetext, keine Fläche. */
.sq-langtext{padding:3rem 0 0;max-width:68ch}
.sq-langtext h2,.sq-langtext h3{font-family:var(--sq-serif);color:var(--sq-heading);
  letter-spacing:-.015em;line-height:1.2;margin:2rem 0 .6rem}
.sq-langtext h2{font-size:1.4rem}
.sq-langtext h3{font-size:1.15rem}
.sq-langtext h2:first-child,.sq-langtext h3:first-child{margin-top:0}
.sq-langtext p,.sq-langtext li{font-size:.98rem;line-height:1.7;color:var(--sq-ink-2)}
.sq-langtext p{margin:0 0 .85rem}
.sq-langtext ul,.sq-langtext ol{margin:0 0 .85rem;padding-left:1.2rem}
.sq-langtext a{color:var(--sq-blue-deep);text-decoration:underline;text-underline-offset:2px}
.sq-langtext img{margin:.6rem 0}

/* ==========================================================================
   Statische Blöcke: Anwendungsbereiche, FAQ, Beratung
   ========================================================================== */

.sq-section{padding:3.5rem 0}
.sq-section--fill{background:var(--sq-surface);padding-left:clamp(1rem,4vw,2.5rem);
  padding-right:clamp(1rem,4vw,2.5rem)}
.sq-section__head{display:flex;flex-direction:column;gap:.65rem;max-width:50rem;margin-bottom:2rem}
.sq-section__head--tight{margin-bottom:1.25rem}
.sq-h2{font-family:var(--sq-serif);font-size:clamp(1.25rem,2.2vw,1.5rem);font-weight:600;
  text-transform:uppercase;line-height:1.14;letter-spacing:-.015em;color:var(--sq-heading);
  margin:0;text-wrap:balance}
.sq-lede{font-size:1.05rem;line-height:1.65;color:var(--sq-ink-2);max-width:62ch;margin:0}

/* ---------- Anwendungsbereiche ---------- */
.sq-uses{display:grid;grid-template-columns:repeat(3,1fr);gap:1.25rem}
@media (max-width:900px){.sq-uses{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.sq-uses{grid-template-columns:1fr}}
.sq-use{border:1px solid var(--sq-rule);background:var(--sq-paper);padding:1.35rem;
  display:flex;flex-direction:column;gap:.6rem}
.sq-use__icon{width:36px;height:36px;border:1.5px solid var(--sq-blue);display:grid;
  place-items:center;color:var(--sq-blue);flex:none}
.sq-use__title{font-family:var(--sq-serif);font-size:1.125rem;font-weight:600;line-height:1.22;
  letter-spacing:-.015em;color:var(--sq-heading);margin:0}
.sq-use>p{font-size:.92rem;line-height:1.55;color:var(--sq-ink-2);margin:0}
.sq-ticks{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.3rem;
  font-size:.88rem;color:var(--sq-ink-2)}
.sq-ticks li{display:flex;gap:.5rem;align-items:flex-start}
.sq-ticks li svg{color:var(--sq-ok);margin-top:.22rem}

/* ---------- Aktionen ---------- */
.sq-actions{display:flex;gap:.7rem;flex-wrap:wrap;margin-top:1.5rem}
.sq-btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  background:var(--sq-red);color:#fff;border:1px solid var(--sq-red);
  font-family:var(--sq-sans);font-size:.92rem;font-weight:800;letter-spacing:.01em;
  padding:.85rem 1.5rem;border-radius:0;cursor:pointer;text-align:center;
  transition:background .15s,border-color .15s}
.sq-btn:hover{background:var(--sq-red-hover);border-color:var(--sq-red-hover);color:#fff}
.sq-btn--ghost{background:transparent;color:var(--sq-head);border-color:var(--sq-rule)}
.sq-btn--ghost:hover{background:var(--sq-surface);border-color:var(--sq-head);color:var(--sq-head)}

/* ---------- FAQ ---------- */
.sq-faqlist{max-width:52rem;border-top:1px solid var(--sq-rule-2)}
.sq-faq{border-bottom:1px solid var(--sq-rule-2)}
.sq-faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;
  align-items:center;gap:1.5rem;padding:1.05rem 0;font-family:var(--sq-serif);font-size:1.125rem;
  font-weight:600;line-height:1.22;letter-spacing:-.015em;color:var(--sq-heading)}
.sq-faq summary::-webkit-details-marker{display:none}
/* Absicherung: Sobald summary per display:flex gestaltet wird, blenden manche
   Browser den restlichen Inhalt nicht mehr selbst aus. Deshalb explizit. */
.sq-faq:not([open])>*:not(summary){display:none}
.sq-faq summary:hover{color:var(--sq-blue-deep)}
.sq-chev{color:var(--sq-ink-3);transition:transform .18s}
.sq-faq[open] .sq-chev{transform:rotate(180deg)}
.sq-faq__body{padding:0 0 1.15rem}
.sq-faq__body p{font-size:.96rem;line-height:1.65;color:var(--sq-ink-2);max-width:64ch;margin:0 0 .7rem}
.sq-faq__body p:last-child{margin-bottom:0}
.sq-note{border-left:3px solid var(--sq-gold);background:var(--sq-gold-bg);
  padding:.85rem 1.05rem!important;margin-top:.9rem!important}
.sq-note strong{color:var(--sq-head)}

/* ---------- Beratung ---------- */
.sq-advice{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:3rem;align-items:center}
@media (max-width:900px){.sq-advice{grid-template-columns:1fr;gap:1.75rem}}
.sq-contact{border:1px solid var(--sq-rule);background:var(--sq-paper);margin:0}
.sq-contact__row{display:grid;grid-template-columns:9rem 1fr;gap:1rem;padding:1rem 1.2rem;
  border-bottom:1px solid var(--sq-rule-2);align-items:baseline}
.sq-contact__row:last-child{border-bottom:0}
@media (max-width:480px){.sq-contact__row{grid-template-columns:1fr;gap:.2rem}}
.sq-contact__row dt{font-family:var(--sq-data);font-size:.72rem;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--sq-ink-3)}
.sq-contact__row dd{margin:0;font-size:1rem;font-weight:600;color:var(--sq-head)}
.sq-contact__row dd a{color:var(--sq-blue-deep);border-bottom:1px solid var(--sq-rule)}
.sq-contact__row dd a:hover{border-bottom-color:var(--sq-blue-deep)}
.sq-contact__row dd span{display:block;font-weight:400;font-size:.86rem;color:var(--sq-ink-3);
  margin-top:.2rem;line-height:1.45}

/* ---------- Video ---------- */
.sq-video{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:2.5rem;
  align-items:center}
@media (max-width:900px){.sq-video{grid-template-columns:1fr;gap:1.75rem}}
.sq-video__frame{position:relative;aspect-ratio:16/9;background:#000;
  border:1px solid var(--sq-rule);overflow:hidden}
.sq-video__frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0;display:block}
.sq-video__text{display:flex;flex-direction:column;gap:.65rem}
.sq-video__text .sq-ticks{margin-top:.35rem}

/* ---------- Bekannt aus den Medien ---------- */
.sq-media{margin-top:1.75rem;padding-top:1.5rem;border-top:1px solid var(--sq-rule-2);
  display:flex;align-items:center;gap:1.5rem 2.5rem;flex-wrap:wrap}
.sq-media__label{font-family:var(--sq-data);font-size:.7rem;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--sq-ink-3);flex:none}
.sq-media__logos{display:flex;align-items:center;gap:1.5rem 2.5rem;flex-wrap:wrap}
.sq-media__logos img{height:26px;width:auto;filter:grayscale(1);opacity:.6;
  transition:opacity .15s,filter .15s}
.sq-media__logos img:hover{filter:grayscale(0);opacity:1}

@media (max-width:560px){
  .sq-media{gap:1rem}
  .sq-media__logos{gap:1.25rem 1.75rem}
  .sq-media__logos img{height:22px}
}

/* Nur für Redaktion sichtbarer Hinweis bei Einbaufehlern. */
.sq-warnung{margin:.75rem 0;padding:.7rem .9rem;border-left:3px solid var(--sq-red);
  background:#fff4f4;color:#8c1d1d;font-family:var(--sq-data);font-size:.84rem;line-height:1.5}

/* ==========================================================================
   Farbkorrektur für Links
   Das Elementor-Kit setzt eine globale Linkfarbe über einen Selektor mit
   höherer Spezifität (.elementor-kit-… a). Jede meiner Ein-Klassen-Regeln auf
   einem <a> verliert dagegen. Betroffen sind Kaufknöpfe und Kartentitel.
   Deshalb hier gebündelt und ausdrücklich.
   ========================================================================== */

/* Roter Aktionsknopf */
.sq .sq-btn,
.sq .sq-btn:link,
.sq .sq-btn:visited,
.sq .sq-btn:hover,
.sq .sq-btn:focus,
.sq .sq-btn:active{
  background:var(--sq-red)!important;color:#fff!important;
  border:1px solid var(--sq-red)!important;text-decoration:none!important}
.sq .sq-btn:hover,
.sq .sq-btn:focus{background:var(--sq-red-hover)!important;border-color:var(--sq-red-hover)!important}

/* Zurückhaltende Variante */
.sq .sq-btn--ghost,
.sq .sq-btn--ghost:link,
.sq .sq-btn--ghost:visited,
.sq .sq-btn--ghost:hover,
.sq .sq-btn--ghost:focus,
.sq .sq-btn--ghost:active{
  background:transparent!important;color:var(--sq-head)!important;
  border:1px solid var(--sq-rule)!important;text-decoration:none!important}
.sq .sq-btn--ghost:hover,
.sq .sq-btn--ghost:focus{background:var(--sq-surface)!important;border-color:var(--sq-head)!important}

/* Produkttitel im Raster */
.sq .sq-card__title,
.sq .sq-card__title:link,
.sq .sq-card__title:visited{color:var(--sq-head)!important;text-decoration:none!important}
.sq .sq-card__title:hover,
.sq .sq-card__title:focus{color:var(--sq-blue-deep)!important}

/* Übrige Links in den Blöcken */
.sq .sq-contact__row dd a,
.sq .sq-contact__row dd a:link,
.sq .sq-contact__row dd a:visited{color:var(--sq-blue-deep)!important}
.sq .sq-table tbody th a,
.sq .sq-table tbody th a:link,
.sq .sq-table tbody th a:visited{color:var(--sq-head)!important;text-decoration:none!important}
.sq .sq-table tbody th a:hover{color:var(--sq-blue-deep)!important}

/* --------------------------------------------------------------------------
   Filterknöpfe gegen Theme-Vorgaben absichern.
   Das Theme setzt für <button> unter anderem border:0 und eigene Hover- und
   Aktivfarben. Ohne diese Regeln stehen die nicht gewählten Knöpfe rahmenlos
   wie blanker Text da und färben sich beim Klicken fremd ein.
   Reihenfolge beachten: der gewählte Zustand steht zuletzt.
   -------------------------------------------------------------------------- */
.sq .sq-chip,
.sq .sq-chip:link,
.sq .sq-chip:visited{
  background:var(--sq-paper)!important;color:var(--sq-ink-2)!important;
  border:1px solid var(--sq-rule)!important;border-radius:0!important;
  box-shadow:none!important;text-transform:none!important;letter-spacing:0!important;
  font-family:var(--sq-sans)!important;font-size:.92rem!important;font-weight:600!important;
  padding:.55rem 1.05rem!important;line-height:1.25!important}
.sq .sq-chip:hover,
.sq .sq-chip:focus,
.sq .sq-chip:active{
  background:var(--sq-paper)!important;border-color:var(--sq-blue)!important;
  color:var(--sq-head)!important}
.sq .sq-chip[aria-pressed="true"],
.sq .sq-chip[aria-pressed="true"]:hover,
.sq .sq-chip[aria-pressed="true"]:focus,
.sq .sq-chip[aria-pressed="true"]:active{
  background:var(--sq-head-2)!important;border-color:var(--sq-head-2)!important;
  color:#fff!important}

/* Sortierfeld */
.sq .sq-select{background:var(--sq-paper)!important;color:var(--sq-ink)!important;
  border:1px solid var(--sq-rule)!important;border-radius:0!important;
  font-family:var(--sq-sans)!important;font-size:.9rem!important;font-weight:400!important;
  text-transform:none!important;letter-spacing:0!important;box-shadow:none!important}

/* --------------------------------------------------------------------------
   Gleiche Höhe für den Kaufbutton über alle Karten hinweg.
   Karten ohne zweiten Knopf ("Angebot anfordern") bekommen vom Shortcode die
   Klasse .sq-card__cart--einzeln und reservieren den fehlenden Platz. Damit
   sitzen Preis und roter Button in jeder Karte auf derselben Höhe.
   Die reservierte Höhe wird aus denselben Werten berechnet, mit denen der
   zweite Knopf gestaltet ist - sie bleibt also automatisch stimmig.
   -------------------------------------------------------------------------- */
.sq{--sq-knopf2:calc(.5rem * 2 + .86rem * 1.25 + 2px)}
.sq .sq-card__cart--einzeln::after{content:"";display:block;height:var(--sq-knopf2);flex:none}

/* --------------------------------------------------------------------------
   Vergleichstabelle auf schmalen Schirmen
   Eine Tabelle mit sieben Spalten braucht rund 930 px. Auf dem Handy schiebt
   das die ganze Seite in die Breite, auch wenn der Wrapper für sich scrollt.
   Deshalb wird sie ab 760 px zu gestapelten Blöcken: eine Karte je Modell,
   jede Zeile mit ihrer Spaltenüberschrift aus data-label.
   -------------------------------------------------------------------------- */
@media (max-width:760px){
  .sq .sq-tablewrap{overflow-x:visible;border:0;background:transparent}
  .sq .sq-table{min-width:0;width:100%;display:block;font-size:.9rem}
  .sq .sq-table__caption{display:block;padding:0 0 .8rem}
  .sq .sq-table thead{position:absolute;width:1px;height:1px;overflow:hidden;
    clip:rect(0 0 0 0);white-space:nowrap}
  .sq .sq-table tbody{display:block}
  .sq .sq-table tbody tr{display:block;border:1px solid var(--sq-rule);
    background:var(--sq-paper);margin-bottom:.85rem}
  .sq .sq-table tbody tr:last-child{margin-bottom:0}
  .sq .sq-table tbody th{display:block;padding:.85rem 1rem;
    border-bottom:1px solid var(--sq-rule-2);background:var(--sq-surface);
    font-family:var(--sq-serif);font-size:1.05rem;font-weight:600;letter-spacing:-.015em}
  .sq .sq-table tbody td{display:flex;justify-content:space-between;align-items:baseline;
    gap:1rem;padding:.6rem 1rem;border-bottom:1px solid var(--sq-rule-2);
    text-align:right;white-space:normal}
  .sq .sq-table tbody td:last-child{border-bottom:0}
  .sq .sq-table tbody td::before{content:attr(data-label);flex:none;text-align:left;
    font-family:var(--sq-data);font-size:.8rem;font-weight:400;color:var(--sq-ink-3)}
}