/* ============================================================
   SANQUELL · sq-design.css
   Stilblatt des .sq-Designsystems – ausgegliedert aus den HTML-Widgets.

   ABLAGE     wp-content/themes/hello-elementor-child/sq/sq-design.css
   EINBINDEN  siehe sq-design/README.md (wp_enqueue_style in der
              functions.php des Child-Themes)

   Alles ist unter .sq gekapselt: ohne den Umschlag <div class="sq"> greift
   keine einzige Regel. Das Theme und alle übrigen Seiten bleiben unberührt.

   AUFBAU
     1  Schriften        lokal, kein Google-Fonts-Aufruf
     2  Designsystem     Merkmale, Sektionen, Bausteine – auf allen .sq-Seiten gleich
     3  Produktgitter    WooCommerce-Karten im .sq-Gewand
     4  Startseite       nur für / – heller Hero, Medienleiste, Ratgeberkarten,
                         Kontaktblock, rote Knöpfe

   Abschnitt 4 ändert unter anderem die Knopffarbe (--cta). Wird dieses Blatt
   später auch von anderen .sq-Seiten geladen, bekommen die dort ebenfalls rote
   Knöpfe statt goldener. Das ist beabsichtigt, aber gut zu wissen.

   Stand: 2026-09-12 · Rev. A
   ============================================================ */


/* ============================================================
   1 · SCHRIFTEN (DSGVO) – KEIN GOOGLE-FONTS-AUFRUF
   Dateien nach  /wp-content/uploads/sq-fonts/  hochladen.
   Anderer Pfad? Einmal FONT-PFAD suchen und ersetzen.
   ============================================================ */

@font-face{font-family:'Zilla Slab';font-style:normal;font-weight:600;font-display:swap;
  src:url('/wp-content/uploads/sq-fonts/zilla-slab-latin-ext-600.woff2') format('woff2');   /* FONT-PFAD */
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Zilla Slab';font-style:normal;font-weight:600;font-display:swap;
  src:url('/wp-content/uploads/sq-fonts/zilla-slab-latin-600.woff2') format('woff2');   /* FONT-PFAD */
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Zilla Slab';font-style:normal;font-weight:700;font-display:swap;
  src:url('/wp-content/uploads/sq-fonts/zilla-slab-latin-ext-700.woff2') format('woff2');   /* FONT-PFAD */
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Zilla Slab';font-style:normal;font-weight:700;font-display:swap;
  src:url('/wp-content/uploads/sq-fonts/zilla-slab-latin-700.woff2') format('woff2');   /* FONT-PFAD */
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:500;font-display:swap;
  src:url('/wp-content/uploads/sq-fonts/ibm-plex-mono-latin-ext-500.woff2') format('woff2');   /* FONT-PFAD */
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:500;font-display:swap;
  src:url('/wp-content/uploads/sq-fonts/ibm-plex-mono-latin-500.woff2') format('woff2');   /* FONT-PFAD */
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:600;font-display:swap;
  src:url('/wp-content/uploads/sq-fonts/ibm-plex-mono-latin-ext-600.woff2') format('woff2');   /* FONT-PFAD */
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:600;font-display:swap;
  src:url('/wp-content/uploads/sq-fonts/ibm-plex-mono-latin-600.woff2') format('woff2');   /* FONT-PFAD */
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Public Sans';font-style:normal;font-weight:400 700;font-display:swap;
  src:url('/wp-content/uploads/sq-fonts/public-sans-latin-ext-400-700.woff2') format('woff2');   /* FONT-PFAD */
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Public Sans';font-style:normal;font-weight:400 700;font-display:swap;
  src:url('/wp-content/uploads/sq-fonts/public-sans-latin-400-700.woff2') format('woff2');   /* FONT-PFAD */
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}

/* ============================================================
   2 · DESIGNSYSTEM · 3 · PRODUKTGITTER · 4 · STARTSEITE
   ============================================================ */
/* ===================== TOKENS & RESET (gekapselt) ===================== */
.sq{
  --navy-900:#12172A; --navy-800:#1B2A4A; --navy-700:#16233A;
  --seal-600:#8C6A22; --seal-400:#A9812E; --seal-300:#D9BD7A; --seal-50:#FAF6EC;
  --ink:#1F2937; --ink-2:#4B5563; --ink-3:#6B7280;
  --rule:#D7E1EC; --rule-2:#EDF1F6; --surface:#F3F5F9; --surface-2:#F7F8FA;
  --alert:#832F21; --alert-bg:#FBF1EE; --ok:#2F6B4F;
  --d1:#12172A; --d2:#2C3E63; --d3:#5A6E93; --d4:#A8B4C8; --hi:#A9812E;
  --pad:clamp(20px,5vw,64px);
  font-family:"Public Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;
  font-size:17px; line-height:1.6; color:var(--ink);
  background:#fff; -webkit-font-smoothing:antialiased;
}
.sq *,.sq *::before,.sq *::after{box-sizing:border-box}
.sq p,.sq h1,.sq h2,.sq h3,.sq h4,.sq ul,.sq ol,.sq li,.sq figure,.sq table{margin:0;padding:0}
.sq ul,.sq ol{list-style:none}
.sq img{max-width:100%;display:block}
.sq a{color:inherit;text-decoration:none}

.sq h1,.sq h2,.sq h3{font-family:'Zilla Slab',Georgia,"Times New Roman",serif;font-weight:600;
  color:var(--navy-900);letter-spacing:-.015em;line-height:1.14;text-wrap:balance}
.sq h1{font-size:clamp(30px,5.2vw,58px);line-height:1.05}
.sq h2{font-size:clamp(24px,3.4vw,38px)}
.sq h3{font-size:clamp(18px,2.1vw,23px);line-height:1.22}
.sq h4{font-family:"Public Sans",sans-serif;font-weight:700;font-size:16px;
  line-height:1.3;color:var(--navy-900)}

.sq-eyebrow{font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:12px;font-weight:600;
  letter-spacing:.2em;text-transform:uppercase;color:var(--seal-600)}
.sq-mono{font-family:"IBM Plex Mono",ui-monospace,monospace;font-variant-numeric:tabular-nums}
.sq-lede{font-size:clamp(18px,2vw,21px);line-height:1.5;color:var(--ink-2)}
.sq-small{font-size:14.5px;line-height:1.5}
.sq-muted{color:var(--ink-3)}
.sq-rule{height:3px;width:56px;background:var(--seal-400);border:0}

/* ===================== SEKTIONEN ===================== */
.sq-sec{padding:clamp(48px,7vw,96px) var(--pad);max-width:1240px;margin:0 auto}
.sq-sec--wide{max-width:none}
.sq-band{background:var(--surface-2)}
.sq-band--seal{background:var(--seal-50)}
.sq-dark{background:var(--navy-900);color:#E7EAF1}
.sq-dark h2,.sq-dark h3,.sq-dark h4{color:#fff}
.sq-dark .sq-eyebrow{color:var(--seal-300)}
.sq-dark .sq-lede{color:#B9C1D0}
.sq-dark a{color:var(--seal-300)}
.sq-head{max-width:820px;display:flex;flex-direction:column;gap:16px;
  margin-bottom:clamp(28px,4vw,48px)}

/* ===================== HERO ===================== */
.sq-hero{position:relative;background:var(--navy-900);color:#fff;overflow:hidden}
.sq-hero__bg{position:absolute;inset:0;
  background:
    radial-gradient(120% 90% at 12% 0%,rgba(169,129,46,.30) 0%,rgba(18,23,42,0) 58%),
    radial-gradient(90% 80% at 92% 12%,rgba(43,62,99,.85) 0%,rgba(18,23,42,0) 60%),
    linear-gradient(168deg,#1B2A4A 0%,#12172A 100%);
  background-color:#12172A}
.sq-hero__grid{position:absolute;inset:0;opacity:.16;
  background-image:linear-gradient(rgba(217,189,122,.35) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(217,189,122,.35) 1px,transparent 1px);
  background-size:64px 64px;
  mask-image:radial-gradient(120% 80% at 50% 0%,#000 0%,transparent 70%);
  -webkit-mask-image:radial-gradient(120% 80% at 50% 0%,#000 0%,transparent 70%)}
.sq-hero__in{position:relative;max-width:1240px;margin:0 auto;
  padding:clamp(52px,8vw,110px) var(--pad) clamp(0px,1vw,8px)}
.sq-hero h1{color:#fff;max-width:19ch}
.sq-hero__sub{font-size:clamp(17px,2vw,21px);line-height:1.5;color:#C3CBDA;max-width:60ch;
  margin-top:22px}
.sq-badge{display:inline-flex;align-items:center;gap:10px;
  border:1px solid rgba(217,189,122,.45);border-radius:999px;padding:7px 16px;
  font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:11.5px;font-weight:600;
  letter-spacing:.16em;text-transform:uppercase;color:var(--seal-300)}
.sq-badge i{width:6px;height:6px;background:var(--seal-300);border-radius:50%;flex:none}

/* KPI-Band im Hero */
.sq-kpis{position:relative;max-width:1240px;margin:0 auto;padding:0 var(--pad);
  transform:translateY(clamp(28px,4vw,48px))}
.sq-kpis__in{display:grid;gap:1px;background:var(--rule);
  grid-template-columns:repeat(auto-fit,minmax(210px,1fr));
  border:1px solid var(--rule);box-shadow:0 24px 60px rgba(18,23,42,.28)}
.sq-kpi{background:#fff;padding:clamp(20px,2.4vw,30px)}
.sq-kpi__n{font-family:'Zilla Slab',Georgia,serif;font-weight:600;font-variant-numeric:tabular-nums;
  font-size:clamp(30px,3.6vw,44px);line-height:1;color:var(--navy-800);
  display:flex;align-items:baseline;gap:4px}
.sq-kpi__n small{font-size:.46em;font-weight:600;color:var(--seal-600)}
.sq-kpi__l{font-size:14.5px;line-height:1.42;color:var(--ink-2);margin-top:12px}
.sq-kpi__s{font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:10.5px;
  letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);margin-top:10px}
.sq-kpi--hi{background:var(--navy-900)}
.sq-kpi--hi .sq-kpi__n{color:var(--seal-300)}
.sq-kpi--hi .sq-kpi__l{color:#C3CBDA}
.sq-kpi--hi .sq-kpi__s{color:#8892A4}
.sq-after-kpis{padding-top:clamp(76px,9vw,120px)}

/* ===================== RASTER ===================== */
.sq-g2{display:grid;gap:clamp(24px,3vw,44px);grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}
@media (min-width:1000px){.sq-g2{grid-template-columns:repeat(2,minmax(0,1fr))}}
.sq-g3{display:grid;gap:clamp(20px,2.4vw,32px);grid-template-columns:repeat(auto-fit,minmax(250px,1fr))}
@media (min-width:1040px){.sq-g3--3{grid-template-columns:repeat(3,minmax(0,1fr))}}
.sq-split{display:grid;gap:clamp(28px,4vw,56px);grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);
  align-items:start}
@media (max-width:900px){.sq-split{grid-template-columns:1fr}}
.sq-stack{display:flex;flex-direction:column;gap:16px}

/* ===================== KARTEN ===================== */
.sq-card{background:#fff;border:1px solid var(--rule);padding:clamp(20px,2.4vw,30px);
  display:flex;flex-direction:column;gap:12px}
.sq-card--fill{background:var(--surface);border-color:transparent}
.sq-card--seal{border-left:3px solid var(--seal-400)}
.sq-card--alert{border-left:3px solid var(--alert);background:var(--alert-bg);border-color:transparent}
.sq-card--ok{border-left:3px solid var(--ok);background:#EEF5F1;border-color:transparent}
.sq-num{font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:12px;font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;color:var(--seal-600)}

/* Große Zahlkarte */
.sq-stat{background:#fff;border:1px solid var(--rule);padding:clamp(22px,2.6vw,32px);
  position:relative;overflow:hidden}
.sq-stat__n{font-family:'Zilla Slab',Georgia,serif;font-weight:600;font-variant-numeric:tabular-nums;
  font-size:clamp(44px,6vw,74px);line-height:.95;color:var(--alert);letter-spacing:-.02em}
.sq-stat--ok .sq-stat__n{color:var(--ok)}
.sq-stat--seal .sq-stat__n{color:var(--seal-600)}
.sq-stat--navy .sq-stat__n{color:var(--navy-800)}
.sq-stat p{margin-top:14px;font-size:15.5px;line-height:1.45;color:var(--ink-2)}
.sq-stat__t{position:absolute;right:-14px;top:-22px;font-family:'Zilla Slab',serif;font-weight:700;
  font-size:clamp(86px,17vw,130px);line-height:1;color:var(--rule-2);z-index:0;user-select:none}
.sq-stat>*{position:relative;z-index:1}

/* ===================== ABBILDUNGEN ===================== */
.sq-fig{background:#fff;border:1px solid var(--rule);padding:clamp(18px,2.2vw,28px);
  display:flex;flex-direction:column;gap:18px}
.sq-fig--fill{background:var(--surface-2);border-color:transparent}
.sq-fig__h{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;
  gap:4px 16px;border-bottom:1px solid var(--rule);padding-bottom:12px}
.sq-fig__t{font-weight:700;font-size:15.5px;line-height:1.3;color:var(--navy-900);
  min-width:0;flex:1 1 190px}
.sq-fig__n{font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:10.5px;
  letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);white-space:nowrap;flex:none}
.sq-fig__c{font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:11px;line-height:1.45;
  color:var(--ink-3)}

/* Rangbalken */
.sq-bars{display:flex;flex-direction:column;gap:10px}
.sq-bar{display:grid;grid-template-columns:minmax(96px,var(--lw,190px)) minmax(0,1fr);
  gap:14px;align-items:center}
.sq-bar__l{font-size:14px;line-height:1.25;color:var(--ink-2);text-align:right}
.sq-bar__t{display:grid;grid-template-columns:minmax(0,1fr) max-content;gap:10px;align-items:center}
.sq-bar__b{height:13px;background:var(--d2);border-radius:0 4px 4px 0;width:var(--w);
  animation:sqgrow 1s cubic-bezier(.2,.85,.2,1) both}
.sq-bar__v{font-family:"IBM Plex Mono",ui-monospace,monospace;font-variant-numeric:tabular-nums;
  font-size:14px;font-weight:600;color:var(--navy-800);white-space:nowrap}
.sq-bar--hi .sq-bar__l{color:var(--navy-900);font-weight:600}
.sq-bar--hi .sq-bar__b{background:var(--hi)}
.sq-bar--hi .sq-bar__v{color:var(--seal-600)}
.sq-bar--mute .sq-bar__b{background:var(--d4)}
.sq-bar--mute .sq-bar__l,.sq-bar--mute .sq-bar__v{color:var(--ink-3)}
@keyframes sqgrow{from{width:0}to{width:var(--w)}}
@media (max-width:640px){
  .sq-bar{grid-template-columns:1fr;gap:5px}
  .sq-bar__l{text-align:left}
}
@media (max-width:860px){
  .sq-share__s{font-size:12px;letter-spacing:-.01em}
  .sq-colsx span{font-size:11.5px}
}

/* Säulen für Skalen */
.sq-cols{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:10px;
  align-items:end;height:clamp(120px,16vw,170px);border-bottom:2px solid var(--navy-800)}
.sq-col{display:flex;flex-direction:column;justify-content:flex-end;align-items:center;
  gap:8px;height:100%}
.sq-col__v{font-family:"IBM Plex Mono",ui-monospace,monospace;font-variant-numeric:tabular-nums;
  font-size:15px;font-weight:600;color:var(--navy-800)}
.sq-col__b{width:100%;background:var(--d2);border-radius:4px 4px 0 0;height:var(--h);
  animation:sqrise 1s cubic-bezier(.2,.85,.2,1) both}
.sq-col--hi .sq-col__b{background:var(--hi)}
.sq-col--hi .sq-col__v{color:var(--seal-600)}
@keyframes sqrise{from{height:0}to{height:var(--h)}}
.sq-colsx{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:10px;padding-top:10px}
.sq-colsx span{font-size:12.5px;line-height:1.25;color:var(--ink-2);text-align:center}
.sq-colsx span.hi{color:var(--navy-900);font-weight:600}

/* Anteilsbalken */
.sq-share{display:flex;height:44px;gap:2px}
.sq-share__s{display:flex;align-items:center;justify-content:center;overflow:hidden;min-width:0;
  font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:13px;font-weight:600;
  white-space:nowrap;padding:0 4px}
.sq-share__s:first-child{border-radius:4px 0 0 4px}
.sq-share__s:last-child{border-radius:0 4px 4px 0}
.sq-legend{display:flex;flex-wrap:wrap;gap:10px 24px}
.sq-legend span{display:inline-flex;align-items:center;gap:8px;font-size:14px;color:var(--ink-2)}
.sq-legend i{width:11px;height:11px;flex:none;border-radius:2px}
.sq-legend b{color:var(--navy-900)}
.sq-legend em{font-family:"IBM Plex Mono",ui-monospace,monospace;font-style:normal;
  font-weight:600;color:var(--navy-800)}
.f1{background:var(--d1)}.f2{background:var(--d2)}.f3{background:var(--d3)}
.f4{background:var(--d4)}.fh{background:var(--hi)}
.on-d{color:#fff}.on-l{color:var(--navy-900)}

/* Temperaturskala */
.sq-scale{display:flex;flex-direction:column;border:1px solid var(--rule);background:#fff}
.sq-scale__r{display:grid;grid-template-columns:minmax(120px,170px) 1fr;
  border-bottom:1px solid var(--rule)}
.sq-scale__r:last-child{border-bottom:0}
.sq-scale__v{padding:18px 20px;border-right:1px solid var(--rule);
  display:flex;flex-direction:column;gap:4px}
.sq-scale__v b{font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:18px;font-weight:600;
  color:var(--navy-900)}
.sq-scale__v span{font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:10.5px;
  letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3)}
.sq-scale__d{padding:18px 20px;display:flex;flex-direction:column;gap:6px}
.sq-scale__d p{font-size:14.5px;line-height:1.45;color:var(--ink-2)}
.s-ok{border-left:8px solid var(--ok)}
.s-bad{border-left:8px solid var(--alert)}
@media (max-width:560px){
  .sq-scale__r{grid-template-columns:1fr}
  .sq-scale__v{border-right:0;border-bottom:1px solid var(--rule-2)}
}

/* Listen */
.sq-ticks{display:flex;flex-direction:column;gap:12px}
.sq-ticks li{position:relative;padding-left:30px;font-size:16px;line-height:1.5;color:var(--ink-2)}
.sq-ticks li::before{content:"";position:absolute;left:0;top:7px;width:14px;height:14px;
  border:2px solid var(--seal-400);border-radius:3px}
.sq-dots{display:flex;flex-direction:column;gap:10px}
.sq-dots li{position:relative;padding-left:22px;font-size:15.5px;line-height:1.5;color:var(--ink-2)}
.sq-dots li::before{content:"";position:absolute;left:0;top:9px;width:8px;height:8px;
  background:var(--seal-400)}
.sq-dark .sq-dots li{color:#B9C1D0}

/* Schritte */
.sq-steps{display:flex;flex-direction:column;gap:22px;counter-reset:s}
.sq-steps li{counter-increment:s;position:relative;padding-left:56px}
.sq-steps li::before{content:counter(s,decimal-leading-zero);position:absolute;left:0;top:0;
  width:38px;height:38px;background:var(--navy-800);color:#fff;
  font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:14px;font-weight:600;
  display:flex;align-items:center;justify-content:center;border-radius:3px}
.sq-steps p{margin-top:6px;font-size:15.5px;line-height:1.5;color:var(--ink-2)}

/* Tabelle */
.sq-tbl{width:100%;border-collapse:collapse;font-size:14.5px}
.sq-tbl th{text-align:left;font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:11px;
  font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--navy-900);
  border-bottom:2px solid var(--navy-800);padding:0 14px 10px 0;vertical-align:bottom}
.sq-tbl td{border-bottom:1px solid var(--rule);padding:12px 14px 12px 0;
  vertical-align:top;color:var(--ink-2)}
.sq-tbl tr:last-child td{border-bottom:0}
.sq-tbl td:last-child,.sq-tbl th:last-child{padding-right:0}
.sq-scroll{overflow-x:auto}
.sq-tbl--dark th{color:#fff;border-bottom-color:rgba(255,255,255,.4)}
.sq-tbl--dark td{color:#CBD3E0;border-bottom-color:rgba(255,255,255,.14)}
.sq-tbl--dark td.sq-mono{color:var(--seal-300);font-weight:600}

/* CTA */
.sq a.sq-cta{display:inline-flex;align-items:center;gap:12px;background:var(--seal-400);
  color:#12172A!important;text-decoration:none!important;
  font-weight:700;font-size:16px;line-height:1.2;padding:16px 28px;border-radius:3px;
  transition:background .18s ease,transform .18s ease}
.sq a.sq-cta:hover,.sq a.sq-cta:focus{background:var(--seal-300);color:#12172A!important;transform:translateY(-1px)}
.sq a.sq-cta--ghost,.sq .sq-ctarow a.sq-cta--ghost{background:transparent;
  color:#fff!important;border:1px solid rgba(255,255,255,.45)}
.sq a.sq-cta--ghost *{color:#fff!important}
.sq a.sq-cta--ghost:hover,.sq a.sq-cta--ghost:focus{background:rgba(255,255,255,.12);color:#fff!important}
.sq a.sq-cta svg{flex:none}
.sq-ctarow{display:flex;flex-wrap:wrap;gap:14px;align-items:center}

/* Zitatkasten */
.sq-quote{border-left:3px solid var(--seal-400);padding-left:clamp(20px,3vw,34px)}
.sq-quote p{font-family:'Zilla Slab',Georgia,serif;font-size:clamp(20px,2.6vw,30px);line-height:1.3;
  color:var(--navy-900);letter-spacing:-.01em}
.sq-dark .sq-quote p{color:#fff}

/* Fußnote / Quellen */
.sq-src{font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:11.5px;line-height:1.6;
  color:var(--ink-3)}
.sq-src a{color:var(--ink-3);border-bottom:1px solid var(--rule)}
.sq-src a:hover{color:var(--navy-800)}

@media (prefers-reduced-motion:reduce){
  .sq *{animation:none!important;transition:none!important}
  .sq-bar__b{width:var(--w)!important}
  .sq-col__b{height:var(--h)!important}
}

/* ============ WEITERE KOMPONENTEN DES DESIGNSYSTEMS ============ */
.f5{background:#C9D2E0}

/* Ja/Nein in Vergleichstabellen */
.sq-tbl td.sq-c,.sq-tbl th.sq-c{text-align:center}
.sq-yes,.sq-no{font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:13px;font-weight:600}
.sq-yes{color:var(--ok)}
.sq-no{color:var(--ink-3)}
.sq-tbl tr.sq-grp td{background:var(--surface-2);border-bottom:1px solid var(--rule);
  font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:10.5px;font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;color:var(--navy-900);padding:10px 14px 10px 0}
.sq-tbl td:first-child,.sq-tbl th:first-child,.sq-tbl tr.sq-grp td{padding-left:14px}
.sq-tbl--dark tr.sq-grp td{background:rgba(255,255,255,.06);color:#fff}

/* Preis-/Angebotsblock */
.sq-price{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 16px}
.sq-price__n{font-family:'Zilla Slab',Georgia,serif;font-weight:600;font-variant-numeric:tabular-nums;
  font-size:clamp(38px,5.4vw,62px);line-height:1;color:var(--seal-300);letter-spacing:-.02em}
.sq-price__n small{font-size:.42em;font-weight:600}
.sq-price__old{font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:16px;
  color:#8892A4;text-decoration:line-through}
.sq-price__save{font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:11.5px;font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;color:var(--seal-300);
  border:1px solid rgba(217,189,122,.45);border-radius:999px;padding:5px 12px}
.sq-price--light .sq-price__n{color:var(--navy-800)}
.sq-price--light .sq-price__save{color:var(--seal-600);border-color:rgba(140,106,34,.35)}

/* Merkmalszeile (Versand, Garantie, Lager …) */
.sq-pills{display:flex;flex-wrap:wrap;gap:8px}
.sq-pills li{font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:11px;font-weight:600;
  letter-spacing:.1em;text-transform:uppercase;color:var(--ink-2);
  border:1px solid var(--rule);border-radius:999px;padding:6px 13px}
.sq-dark .sq-pills li{color:#C3CBDA;border-color:rgba(255,255,255,.22)}

/* Abbildungen mit Foto */
.sq-shot{background:var(--surface-2);border:1px solid var(--rule);overflow:hidden}
.sq-shot img{width:100%;height:100%;object-fit:cover;aspect-ratio:4/3}
.sq-shot--fill{display:flex;flex-direction:column;height:100%}
.sq-shot--fill img{flex:1 1 auto;aspect-ratio:auto;height:auto;min-height:210px}
/* Bildspalte gibt die Zeilenhoehe nicht vor – die Abbildung daneben tut es */
.sq-split--eq{align-items:stretch}
.sq-split--eq>.sq-fig{justify-content:space-between}
.sq-split--eq>.sq-shot--fill{min-height:0}
.sq-split--eq>.sq-shot--fill img{height:0;min-height:190px}
@media (max-width:900px){
  .sq-split--eq>.sq-shot--fill img{height:auto;min-height:0;aspect-ratio:4/3}
  .sq-split--eq>.sq-fig{justify-content:flex-start}
}
.sq-shot--contain img{object-fit:contain;background:#fff;padding:clamp(6px,1vw,14px)}
.sq-shot__c{padding:12px 16px 14px;font-family:"IBM Plex Mono",ui-monospace,monospace;
  font-size:11px;line-height:1.45;color:var(--ink-3);background:#fff;border-top:1px solid var(--rule)}

/* FAQ */
.sq-faq{border-top:1px solid var(--rule)}
.sq-faq details{border-bottom:1px solid var(--rule)}
.sq-faq summary{list-style:none;cursor:pointer;padding:18px 44px 18px 0;position:relative;
  font-weight:700;font-size:16.5px;line-height:1.35;color:var(--navy-900)}
.sq-faq summary::-webkit-details-marker{display:none}
.sq-faq summary::after{content:"";position:absolute;right:10px;top:24px;width:11px;height:11px;
  border-right:2px solid var(--seal-600);border-bottom:2px solid var(--seal-600);
  transform:rotate(45deg);transition:transform .18s ease}
.sq-faq details[open] summary::after{transform:rotate(-135deg);top:27px}
.sq-faq summary:hover{color:var(--seal-600)}
.sq-faq__b{padding:0 0 22px;max-width:78ch}
.sq-faq__b p{font-size:15.5px;line-height:1.55;color:var(--ink-2);margin-bottom:10px}
.sq-faq__b p:last-child{margin-bottom:0}
.sq-faq__b ul{display:flex;flex-direction:column;gap:8px;margin:4px 0 12px}
.sq-faq__b li{position:relative;padding-left:22px;font-size:15.5px;line-height:1.5;color:var(--ink-2)}
.sq-faq__b li::before{content:"";position:absolute;left:0;top:9px;width:8px;height:8px;
  background:var(--seal-400)}
.sq-faq__b a{border-bottom:1px solid var(--rule);color:var(--navy-800)}

/* Sekundaerer Button auf hellem Grund */
.sq a.sq-cta--line{background:transparent;color:var(--navy-900)!important;border:1px solid var(--rule)}
.sq a.sq-cta--line *{color:var(--navy-900)!important}
.sq a.sq-cta--line:hover,.sq a.sq-cta--line:focus{background:#fff;border-color:var(--navy-800);
  color:var(--navy-900)!important}

/* Kompaktes Zitat fuer Kundenstimmen */
.sq-quote--sm p{font-size:clamp(17px,1.9vw,20px);line-height:1.4}

/* Icons (Inline-SVG, Strichstaerke wie Text) */
.sq-ico{display:inline-flex;width:34px;height:34px;align-items:center;justify-content:center;
  color:var(--seal-600);flex:none}
.sq-ico svg{width:26px;height:26px;stroke:currentColor;fill:none;stroke-width:1.6;
  stroke-linecap:round;stroke-linejoin:round}
.sq-dark .sq-ico,.sq-card--ok .sq-ico{color:var(--seal-600)}
.sq-dark .sq-ico{color:var(--seal-300)}
.sq-ico--lg{width:44px;height:44px}
.sq-ico--lg svg{width:34px;height:34px}

/* Karte mit randlosem Bild oben */
.sq-card--img>.sq-thumb{width:calc(100% + 2*clamp(20px,2.4vw,30px));max-width:none;
  margin:calc(-1*clamp(20px,2.4vw,30px)) calc(-1*clamp(20px,2.4vw,30px)) 4px;
  aspect-ratio:16/9;object-fit:cover;background:var(--surface)}

/* Produktgalerie */
.sq-gal{display:grid;gap:clamp(16px,2vw,24px);
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
.sq-gal figure{background:#fff;border:1px solid var(--rule);display:flex;flex-direction:column}
.sq-gal img{width:100%;aspect-ratio:4/3;object-fit:cover;background:var(--surface-2)}
.sq-gal figcaption{padding:12px 16px 16px;font-family:"IBM Plex Mono",ui-monospace,monospace;
  font-size:11px;line-height:1.5;color:var(--ink-3)}

/* Strichgrafiken der Ventile (transparente PNG, dunkle Linien auf Weiss) */
.sq-drw{width:calc(100% + 2*clamp(20px,2.4vw,30px));max-width:none;
  margin:calc(-1*clamp(20px,2.4vw,30px)) calc(-1*clamp(20px,2.4vw,30px)) 8px;
  aspect-ratio:5/3;object-fit:contain;background:#fff;padding:16px 20px;
  border-bottom:1px solid var(--rule-2)}

/* Ratgeber-Teaser */
.sq-post{display:flex;flex-direction:column;background:#fff;border:1px solid var(--rule);
  transition:border-color .18s ease,transform .18s ease}
.sq-post:hover{border-color:var(--seal-400);transform:translateY(-2px)}
.sq-post img{width:100%;aspect-ratio:16/10;object-fit:cover;background:var(--surface-2)}
.sq-post__b{padding:18px 20px 22px;display:flex;flex-direction:column;gap:10px}
.sq-post__k{font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:10.5px;font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;color:var(--seal-600)}
.sq-post h4{line-height:1.35}

/* Dokumentenliste (Zertifikate, Gutachten) */
.sq-docs{display:flex;flex-direction:column}
.sq-docs a{display:flex;align-items:flex-start;gap:11px;padding:10px 0;
  border-top:1px solid var(--rule-2);font-size:14.5px;line-height:1.35;color:var(--ink-2)}
.sq-docs a:first-child{border-top:0}
.sq-docs a:hover b{color:var(--seal-600)}
.sq-docs svg{width:15px;height:15px;flex:none;margin-top:2px;stroke:var(--seal-600);fill:none;
  stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.sq-docs b{font-weight:600;color:var(--navy-900);display:block}
.sq-docs em{font-style:normal;font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:10.5px;
  letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3);display:block;margin-top:3px}

/* KPI-Band darf aus dem Hero herausragen (sonst schneidet overflow:hidden lange Labels ab) */
.sq-hero{overflow:visible}

/* Der Block darf seinen Elementor-Container niemals aufweiten.
   In Elementor liegt er in .e-con-inner mit display:flex. Ein Flex-Element hat
   von Haus aus min-width:auto und waechst auf die Breite seines breitesten
   Inhalts. Die Seite bekommt dadurch einen Querlauf, und der Header rutscht
   seitlich aus dem Bild. overflow-x:clip erzeugt keinen Scrollcontainer, laesst
   also position:sticky und nach unten ragende Elemente unberuehrt. */
.sq{min-width:0;max-width:100%;overflow-x:clip}

/* Scroll-Container darf Flex-/Grid-Eltern nicht aufweiten */
.sq-scroll{min-width:0;max-width:100%}

/* Einspaltiges Raster darf von breiten Tabellen nicht aufgeweitet werden */
@media (max-width:900px){.sq-split{grid-template-columns:minmax(0,1fr)}}

/* µ nicht von text-transform:uppercase erfassen lassen –
   Unicode bildet U+00B5 sonst auf das griechische Μ ab und aus µm wird MM. */
.sq-mu{text-transform:none}


/* ============================================================
   WOOCOMMERCE-PRODUKTGITTER  ·  Shortcode  products ids="…"
   Der Shortcode liefert  .woocommerce > ul.products > li.product.
   Alles darunter wird auf die sq-Karten umgestellt. Die Knöpfe des
   AFRFQ-Angebotsplugins (.afrfqbt, data-rule_id, href="javascript:void(0)")
   bleiben als Zweitknopf sichtbar – geprüft werden alle drei Merkmale,
   damit die Regel ein Plugin-Update übersteht.
   ============================================================ */
.sq-wc{margin-top:18px}
.sq-wc .woocommerce{margin:0!important;padding:0!important}
.sq-wc .woocommerce-notices-wrapper{display:none}
.sq-wc ul.products{display:grid!important;gap:1px!important;margin:0!important;padding:0!important;
  list-style:none!important;background:var(--rule);border:1px solid var(--rule);
  grid-template-columns:repeat(2,minmax(0,1fr))}
.sq-wc ul.products.columns-1{grid-template-columns:minmax(0,1fr)}
.sq-wc ul.products.columns-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.sq-wc ul.products.columns-4{grid-template-columns:repeat(4,minmax(0,1fr))}
@media (max-width:940px){.sq-wc ul.products.columns-3,
  .sq-wc ul.products.columns-4{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:720px){.sq-wc ul.products{grid-template-columns:minmax(0,1fr)!important}}
.sq-wc ul.products::before,.sq-wc ul.products::after{content:none!important;display:none!important}
.sq-wc ul.products li.product{width:auto!important;max-width:none!important;float:none!important;
  margin:0!important;padding:clamp(18px,2.2vw,26px)!important;background:#fff;position:relative;
  display:flex;flex-direction:column;gap:10px;text-align:left!important;clear:none!important}
.sq-wc li.product a img,.sq-wc li.product img{width:100%!important;height:auto;margin:0 0 4px!important;
  aspect-ratio:1/1;object-fit:contain;background:var(--surface-2)}
.sq-wc li.product .woocommerce-loop-product__title,
.sq-wc li.product h2,.sq-wc li.product h3{font-family:"Public Sans",sans-serif!important;
  font-weight:700!important;font-size:15.5px!important;line-height:1.35!important;
  color:var(--navy-900)!important;padding:0!important;margin:0!important;letter-spacing:0!important}
.sq-wc li.product .sku_wrapper,.sq-wc li.product .sku{font-family:"IBM Plex Mono",ui-monospace,monospace;
  font-size:11px;letter-spacing:.12em;color:var(--ink-3)}
.sq-wc li.product .price{font-family:'Zilla Slab',Georgia,serif!important;font-weight:600!important;
  font-size:21px!important;line-height:1.2!important;color:var(--navy-800)!important;
  font-variant-numeric:tabular-nums;margin:0!important}
.sq-wc li.product .price del{font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:13px;
  font-weight:400;color:var(--ink-3);opacity:1;margin-right:6px}
.sq-wc li.product .price ins{text-decoration:none;color:var(--alert)}
.sq-wc li.product .price small,
.sq-wc li.product .woocommerce-price-suffix,
.sq-wc li.product .wc-gzd-additional-info{display:block;font-family:"Public Sans",sans-serif;
  font-size:12px;font-weight:400;line-height:1.4;color:var(--ink-3);margin-top:4px}
.sq-wc li.product .star-rating{font-size:.82em!important;color:var(--seal-600)!important;
  margin:0!important;float:none!important}
.sq-wc li.product .onsale{position:absolute!important;top:0!important;right:0!important;left:auto!important;
  margin:0!important;min-width:0!important;min-height:0!important;border-radius:0!important;
  padding:5px 11px!important;background:var(--alert)!important;color:#fff!important;
  font-family:"IBM Plex Mono",ui-monospace,monospace!important;font-size:10.5px!important;
  font-weight:600!important;letter-spacing:.14em!important;text-transform:uppercase;line-height:1.2!important}

/* Erstknopf: der echte Warenkorb-Knopf */
.sq-wc li.product a.button:not(.afrfqbt):not([data-rule_id]):not([href^="javascript"]),
.sq-wc li.product button.button:not(.afrfqbt):not([data-rule_id]){
  display:flex!important;align-items:center;justify-content:center;width:100%;
  margin:auto 0 0!important;padding:13px 18px!important;border:0!important;border-radius:3px!important;
  background:var(--seal-400)!important;color:#12172A!important;
  font-family:"Public Sans",sans-serif!important;font-size:15px!important;font-weight:700!important;
  line-height:1.2!important;letter-spacing:0!important;text-transform:none!important;
  text-decoration:none!important;cursor:pointer;transition:background .18s ease}
.sq-wc li.product a.button:not(.afrfqbt):not([data-rule_id]):not([href^="javascript"]):hover,
.sq-wc li.product button.button:not(.afrfqbt):not([data-rule_id]):hover{background:var(--seal-300)!important}

/* Zweitknopf: "Angebot anfordern" aus dem AFRFQ-Plugin */
.sq-wc li.product a.afrfqbt,
.sq-wc li.product a[data-rule_id],
.sq-wc li.product a.button[href^="javascript"],
.sq-wc li.product button.afrfqbt,
.sq-wc li.product button[data-rule_id]{
  display:flex!important;align-items:center;justify-content:center;width:100%;
  margin:8px 0 0!important;padding:11px 18px!important;border-radius:3px!important;
  background:#fff!important;color:var(--navy-900)!important;border:1px solid var(--rule)!important;
  font-family:"Public Sans",sans-serif!important;font-size:14px!important;font-weight:600!important;
  line-height:1.2!important;text-transform:none!important;text-decoration:none!important;
  cursor:pointer;transition:border-color .18s ease}
.sq-wc li.product a.afrfqbt:hover,
.sq-wc li.product a[data-rule_id]:hover,
.sq-wc li.product a.button[href^="javascript"]:hover,
.sq-wc li.product button.afrfqbt:hover,
.sq-wc li.product button[data-rule_id]:hover{border-color:var(--navy-800)!important}

/* Bestätigung nach dem Hinzufügen bleibt ein Textlink */
.sq-wc li.product a.added_to_cart{display:block!important;width:auto!important;
  margin:8px 0 0!important;padding:0!important;background:none!important;border:0!important;
  font-size:14px!important;font-weight:600!important;color:var(--seal-600)!important;
  text-decoration:underline!important}
.sq-wc li.product .button.loading{opacity:.7}


/* ============================================================
   ERGÄNZUNGEN NUR FÜR DIE STARTSEITE – gleiche Tokens wie oben
   ============================================================ */

/* ---------- Heller Hero ----------
   Die übrigen .sq-Seiten tragen den dunklen Hero. Die Startseite behält
   ihren weißen Hero: geändert werden nur Fläche und Textfarben, Aufbau,
   Abstände und das KPI-Band bleiben identisch.
   Kein Verlauf, kein Raster – reines Weiß bis zum Abschnitt "Bekannt aus". */
.sq-hero--light{background:#fff;color:var(--ink)}
.sq-hero--light .sq-hero__bg{background:#fff;background-color:#fff}
.sq-hero--light .sq-hero__grid{display:none}
/* Über der Augenbraue stand deutlich mehr Weißraum als unter dem Textblock
   (110px gegen 56px). Der Kopfbereich rückt damit nach oben und der Textblock
   sitzt optisch mittig zwischen Seitenkopf und KPI-Band. Die gemeinsame Regel
   in Abschnitt 2 bleibt unangetastet – der dunkle Hero der übrigen Seiten
   behält seinen Anlauf. */
.sq-hero--light .sq-hero__in{padding-top:clamp(30px,3.6vw,56px)}
/* Der kräftige Schlagschatten des KPI-Bands ist für die dunkle Fläche gemacht.
   Auf reinem Weiß wirkt er wie ein Verlauf – hier deutlich zurückgenommen. */
.sq-hero--light .sq-kpis__in{box-shadow:0 14px 34px rgba(18,23,42,.09)}
.sq-hero--light h1{color:var(--navy-900)}
.sq-hero--light .sq-hero__sub{color:var(--ink-2)}
.sq-hero--light .sq-badge{color:var(--seal-600);background:var(--seal-50);
  border-color:rgba(140,106,34,.42)}
.sq-hero--light .sq-badge i{background:var(--seal-600)}
/* Das eine rote Wort aus der bisherigen Startseite · Farbe siehe --cta unten */

/* Zwei Spalten im Hero: Text links, Produktfoto rechts */
.sq-hero__cols{display:grid;gap:clamp(20px,3.4vw,52px);align-items:center;
  grid-template-columns:minmax(0,1.16fr) minmax(0,.84fr)}
@media (max-width:900px){.sq-hero__cols{grid-template-columns:1fr}}
.sq-hero__cols h1{max-width:16ch}
.sq-hero__shot a{display:block}
.sq-hero__shot img{width:100%;height:auto;object-fit:contain;
  transition:transform .45s cubic-bezier(.2,.85,.2,1)}
.sq-hero__shot a:hover img,.sq-hero__shot a:focus-visible img{transform:scale(1.025)}
/* Das Foto ist seit dem engeren Beschnitt hochformatig (0,8 : 1). Die
   Deckel sind deshalb kleiner als beim früheren Quadrat – sonst würde der
   Hero allein durch das Seitenverhältnis höher. */
/* "figure" muss im Selektor stehen: der Grund-Reset .sq figure{margin:0}
   ist sonst der spezifischere und die Ausrichtung greift nicht. */
@media (max-width:900px){.sq figure.sq-hero__shot{max-width:380px;margin:0 auto}}

/* Ab 1200px bekommt das Produktfoto spürbar mehr Platz: die Textspalte bleibt
   am 1240er-Raster der übrigen Abschnitte stehen – Augenbraue, Überschrift und
   Knöpfe fluchten weiterhin mit dem KPI-Band und allem darunter –, die
   Bildspalte läuft dagegen nach rechts aus. Der Deckel bei 520px verhindert,
   dass der Duschkopf auf sehr breiten Schirmen ins Riesenhafte wächst (520 px
   Breite ergeben bei 0,8 : 1 rund 650 px Höhe). */
@media (min-width:1200px){
  .sq-hero__in{max-width:none;margin:0;
    padding-left:calc(max(0px,(100vw - 1240px) / 2) + var(--pad));
    padding-right:0}
  .sq-hero__cols{grid-template-columns:minmax(0,600px) minmax(0,1fr);
    gap:clamp(28px,3vw,52px)}
  /* Links bündig, nicht rechts: so bleibt der Duschkopf auch auf sehr
     breiten Schirmen neben dem Text stehen statt an den Rand zu wandern.
     Der Weißraum läuft nach rechts aus – auf weißem Grund unsichtbar. */
  .sq figure.sq-hero__shot{max-width:520px;margin-left:0}
}
/* Lagerhinweis unter dem Knopf */
.sq-live{display:inline-flex;align-items:center;gap:10px;margin-top:20px;
  font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:11px;font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3)}
.sq-live i{width:8px;height:8px;border-radius:50%;background:var(--ok);flex:none;
  box-shadow:0 0 0 4px rgba(47,107,79,.14)}

/* Zweitknopf auf heller Fläche (der Geisterknopf ist für dunkle Flächen gedacht) */
.sq a.sq-cta--line{background:transparent;color:var(--navy-900)!important;border:1px solid var(--rule)}
.sq a.sq-cta--line *{color:var(--navy-900)!important}
.sq a.sq-cta--line:hover,.sq a.sq-cta--line:focus{background:#fff;border-color:var(--navy-800);
  color:var(--navy-900)!important}

/* ---------- Bekannt aus: Logoleiste ---------- */
/* "ul" muss im Selektor stehen: der Grund-Reset .sq ul{padding:0} ist sonst
   der spezifischere und die Leiste bliebe ein enger Streifen. */
.sq ul.sq-logos{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;
  gap:clamp(30px,5.5vw,78px);background:#fff;border:1px solid var(--rule);
  padding:clamp(34px,4.4vw,54px) clamp(28px,4vw,56px)}
.sq-logos li{flex:0 0 auto;line-height:0}
.sq-logos img{height:clamp(24px,3vw,36px);width:auto;
  filter:grayscale(1);opacity:.74;transition:filter .18s ease,opacity .18s ease}
.sq-logos li:hover img{filter:grayscale(0);opacity:1}

/* Medienzitat */
.sq-mq{font-family:'Zilla Slab',Georgia,serif;font-weight:600;
  font-size:clamp(17px,1.8vw,20px);line-height:1.36;color:var(--navy-900);letter-spacing:-.01em}
.sq-mq b{font-weight:700;box-shadow:inset 0 -.42em 0 var(--seal-50)}
.sq-by{font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:11px;font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);margin-top:auto;padding-top:6px}

/* ---------- Bewertungen ---------- */
.sq-score{display:flex;flex-wrap:wrap;align-items:center;gap:clamp(14px,3vw,36px);
  border:1px solid var(--rule);background:#fff;padding:clamp(20px,2.6vw,30px)}
.sq-score__n{font-family:'Zilla Slab',Georgia,serif;font-weight:600;font-variant-numeric:tabular-nums;
  font-size:clamp(40px,5.2vw,60px);line-height:1;color:var(--navy-800);letter-spacing:-.02em}
.sq-score__n small{font-size:.38em;font-weight:600;color:var(--ink-3)}
.sq-score__m{display:flex;flex-direction:column;gap:6px}
.sq-stars{color:var(--seal-400);font-size:19px;letter-spacing:.14em;line-height:1}
.sq-score__t{font-size:15px;line-height:1.4;color:var(--ink-2)}
.sq-score__g{margin-left:auto;text-align:right}
@media (max-width:640px){.sq-score__g{margin-left:0;text-align:left}}

/* Karten und Bewertungsblock auf dunkler Fläche */
.sq-dark .sq-card{background:rgba(255,255,255,.045);border-color:rgba(255,255,255,.15)}
.sq-dark .sq-card p{color:#C3CBDA}
.sq-dark .sq-score{background:rgba(255,255,255,.045);border-color:rgba(255,255,255,.15)}
.sq-dark .sq-score__n{color:#fff}
.sq-dark .sq-score__n small{color:#8892A4}
.sq-dark .sq-score__t{color:#B9C1D0}
.sq-dark .sq-by{color:#8892A4}
.sq-dark .sq-small{color:#B9C1D0}
.sq-dark .sq-mq{color:#fff}
.sq-dark .sq-mq b{box-shadow:inset 0 -.42em 0 rgba(169,129,46,.34)}
.sq-dark .sq-ticks li{color:#C3CBDA}
.sq-dark .sq-steps p{color:#B9C1D0}
.sq-dark .sq-tbl td{color:#CBD3E0}

/* Kundenzitat mit Namenskreis */
.sq-voice{display:flex;flex-direction:column;gap:14px;height:100%}
.sq-voice__q{font-size:15.5px;line-height:1.55;color:var(--ink-2)}
.sq-dark .sq-voice__q{color:#C3CBDA}
.sq-voice__q b{color:var(--navy-900);font-weight:700}
.sq-dark .sq-voice__q b{color:#fff}
.sq-voice__p{display:flex;align-items:center;gap:12px;margin-top:auto;padding-top:4px}
.sq-voice__a{width:38px;height:38px;flex:none;border-radius:50%;background:var(--seal-50);
  color:var(--seal-600);display:flex;align-items:center;justify-content:center;
  font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:12.5px;font-weight:600;
  letter-spacing:.04em}
.sq-dark .sq-voice__a{background:rgba(169,129,46,.22);color:var(--seal-300)}
.sq-voice__n{font-weight:700;font-size:15px;line-height:1.25;color:var(--navy-900)}
.sq-dark .sq-voice__n{color:#fff}
.sq-voice__r{font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:10.5px;
  letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3)}
.sq-dark .sq-voice__r{color:#8892A4}

/* ---------- Ratgeber-Karten · Ausgabe von [sq_blog] ---------- */
.sq-posts{display:grid;gap:clamp(20px,2.4vw,32px);
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
@media (min-width:1040px){.sq-posts--3{grid-template-columns:repeat(3,minmax(0,1fr))}}
.sq .sq-post{display:flex;flex-direction:column;height:100%;background:#fff;
  border:1px solid var(--rule);overflow:hidden;
  transition:border-color .18s ease,transform .18s ease,box-shadow .18s ease}
.sq .sq-post:hover,.sq .sq-post:focus-visible{border-color:var(--seal-400);transform:translateY(-2px);
  box-shadow:0 14px 34px rgba(18,23,42,.09)}
.sq-post__img{background:var(--surface-2);overflow:hidden}
.sq-post__img img{width:100%;height:auto;aspect-ratio:16/10;object-fit:cover;
  transition:transform .5s cubic-bezier(.2,.85,.2,1)}
.sq .sq-post:hover .sq-post__img img{transform:scale(1.03)}
.sq-post__b{display:flex;flex-direction:column;gap:11px;flex:1 1 auto;
  padding:clamp(18px,2.2vw,24px)}
.sq-post__k{display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px;
  font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:10.5px;font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;color:var(--seal-600)}
.sq-post__k time{font-weight:500;color:var(--ink-3)}
.sq-post__t{font-family:'Zilla Slab',Georgia,serif;font-weight:600;
  font-size:clamp(18px,1.9vw,21px);line-height:1.24;color:var(--navy-900);letter-spacing:-.01em}
.sq-post__x{font-size:14.5px;line-height:1.5;color:var(--ink-2)}
.sq-post__m{display:inline-flex;align-items:center;gap:8px;margin-top:auto;padding-top:6px;
  font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:10.5px;font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;color:var(--navy-900)}
.sq .sq-post:hover .sq-post__m{color:var(--seal-600)}
.sq-post__m svg{flex:none}

/* ---------- Tabelle „Was wir zusagen" ----------
   Das Theme legt Zellen einen Rahmen und eine Hintergrundfarbe unter; dadurch
   klebte die Schrift an den Linien. Hier zurückgesetzt und großzügiger
   ausgepolstert, damit die Tabelle wie die übrigen Bausteine aussieht. */
.sq .sq-tbl--zusage{border-collapse:collapse;width:100%}
.sq .sq-tbl--zusage td{background:transparent;border:0;
  border-bottom:1px solid var(--rule);
  padding:16px 20px;vertical-align:middle}
.sq .sq-tbl--zusage tr:last-child td{border-bottom:0}
.sq .sq-tbl--zusage td:first-child{padding-left:4px;white-space:nowrap}
.sq .sq-tbl--zusage td:last-child{padding-right:4px}
@media (max-width:520px){.sq .sq-tbl--zusage td{padding:13px 10px}}

/* ---------- Vorausgewählte Ausführung über dem Warenkorb-Knopf ----------
   Ausgabe von [sq_bestseller]: bei den variablen Produkten steht dort, welche
   Ausführung der Knopf in den Warenkorb legt. Ohne diese Zeile bliebe offen,
   ob der Duschkopf mit 7 oder 15 cm Brause kommt. */
.sq-wc li.product .sq-aus{display:flex;flex-direction:column;gap:3px;
  margin:auto 0 12px}
.sq-wc li.product .sq-aus__l{font-family:"IBM Plex Mono",ui-monospace,monospace;
  font-size:10px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-3)}
.sq-wc li.product .sq-aus__v{font-size:13.5px;line-height:1.35;font-weight:600;
  color:var(--navy-900)}
.sq-wc li.product .sq-aus+a.button{margin-top:0!important}

/* ---------- Handlungsknöpfe in Signalrot statt Gold ----------
   Gold bleibt die Akzentfarbe für Augenbrauen, Siegel, Ränder und Zahlen.
   Rot ist ab hier ausschließlich den Knöpfen vorbehalten – dadurch ist auf
   einen Blick zu sehen, was anklickbar ist und was nur Auszeichnung ist.
   Beide Töne stehen als Merkmal ganz oben: einmal ändern genügt.
   Weiß auf --cta ergibt einen Kontrast von 5,4:1, auf --cta-hover 6,8:1 –
   beides über der Vorgabe 4,5:1 der WCAG für normalen Text. */
.sq{--cta:#CE2317;--cta-hover:#B31E12}

.sq a.sq-cta:not(.sq-cta--ghost):not(.sq-cta--line){background:var(--cta);color:#fff!important}
.sq a.sq-cta:not(.sq-cta--ghost):not(.sq-cta--line) *{color:#fff!important}
.sq a.sq-cta:not(.sq-cta--ghost):not(.sq-cta--line):hover,
.sq a.sq-cta:not(.sq-cta--ghost):not(.sq-cta--line):focus{background:var(--cta-hover);color:#fff!important}

/* Das eine rote Wort in der Überschrift nimmt denselben Ton auf. */
.sq-hi{color:var(--cta)}

/* „In den Warenkorb“ aus WooCommerce zieht mit. */
.sq-wc li.product a.button:not(.afrfqbt):not([data-rule_id]):not([href^="javascript"]),
.sq-wc li.product button.button:not(.afrfqbt):not([data-rule_id]){
  background:var(--cta)!important;color:#fff!important}
.sq-wc li.product a.button:not(.afrfqbt):not([data-rule_id]):not([href^="javascript"]):hover,
.sq-wc li.product button.button:not(.afrfqbt):not([data-rule_id]):hover{
  background:var(--cta-hover)!important}

/* ---------- Kontakt ---------- */
.sq-kontakt{display:grid;gap:1px;background:rgba(255,255,255,.16);
  border:1px solid rgba(255,255,255,.16);
  grid-template-columns:repeat(auto-fit,minmax(230px,1fr))}
.sq-kontakt__i{background:var(--navy-900);padding:clamp(20px,2.4vw,28px);
  display:flex;flex-direction:column;gap:7px}
.sq-kontakt__l{font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:10.5px;
  font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--seal-300)}
.sq-kontakt__v{font-family:'Zilla Slab',Georgia,serif;font-weight:600;
  font-size:clamp(19px,2.1vw,24px);line-height:1.16;color:#fff;letter-spacing:-.01em}
.sq .sq-kontakt__v a{color:#fff}
.sq .sq-kontakt__v a:hover{color:var(--seal-300)}
.sq-kontakt__s{font-size:14px;line-height:1.45;color:#8892A4}