*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:#0a0908;overflow-x:hidden;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{text-decoration:none;color:inherit}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

.sh-head,.sh-sheet,.pfh-nav,.sba-hd,.sba-nav,.sba-prog,.stb-nav,.sth-hero .sth-top{display:none!important}
.stnav{position:fixed;top:0;left:0;right:0;z-index:120;font-family:'Archivo','Instrument Sans',system-ui,-apple-system,sans-serif;background:rgba(10,9,8,.5);backdrop-filter:blur(16px) saturate(1.1);-webkit-backdrop-filter:blur(16px) saturate(1.1);border-bottom:1px solid rgba(255,255,255,.06);transition:transform .35s cubic-bezier(.16,1,.3,1),background .3s,box-shadow .3s,border-color .3s;will-change:transform}
.stnav.scrolled{background:rgba(10,9,8,.9);box-shadow:0 18px 40px -30px rgba(0,0,0,.9);border-bottom-color:rgba(255,255,255,.09)}
.stnav.hide{transform:translateY(-100%)}
.stnav-in{max-width:1200px;margin:0 auto;padding:12px clamp(20px,5vw,40px);display:flex;align-items:center;gap:clamp(8px,1.4vw,20px)}
.stnav-brand{display:flex;flex-direction:column;line-height:1;margin-right:auto;text-decoration:none}
.stnav-brand .b1{font-family:'Archivo',sans-serif;font-weight:900;font-size:20px;letter-spacing:-.02em;color:#f5f2ea}
.stnav-brand .b1 em{font-style:normal;color:#f97316}
.stnav-brand .b2{margin-top:5px;font-family:'Archivo',sans-serif;font-weight:700;font-size:10px;letter-spacing:.34em;text-transform:uppercase;color:#a8a29e}
.stnav-links{display:flex;align-items:center;gap:clamp(6px,1.1vw,18px)}
.stnav-links a{position:relative;font-family:'Archivo',sans-serif;font-weight:700;font-size:13.5px;letter-spacing:.01em;color:#a8a29e;padding:8px 2px;text-decoration:none;transition:color .25s}
.stnav-links a::after{content:"";position:absolute;left:0;right:100%;bottom:0;height:2px;background:#f97316;border-radius:2px;transition:right .25s cubic-bezier(.16,1,.3,1)}
.stnav-links a:hover{color:#f5f2ea}
.stnav-links a:hover::after,.stnav-links a.on::after{right:0}
.stnav-links a.on{color:#f5f2ea}
.stnav-icon{width:42px;height:42px;border-radius:11px;display:grid;place-items:center;color:#d6d0c6;text-decoration:none;transition:background .25s,color .25s;flex:none}
.stnav-icon:hover{background:rgba(245,242,234,.06);color:#f5f2ea}
.stnav-icon svg{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:1.7}
.stnav-sub{display:inline-flex;align-items:center;gap:8px;font-family:'Archivo',sans-serif;font-weight:800;font-size:13.5px;color:#1c0a02;text-decoration:none;padding:10px 16px;min-height:42px;border-radius:99px;background:linear-gradient(180deg,#fb923c,#ea580c);box-shadow:0 10px 26px -12px rgba(249,115,22,.5);transition:transform .25s,box-shadow .25s;white-space:nowrap}
.stnav-sub:hover{transform:translateY(-2px);box-shadow:0 16px 34px -12px rgba(249,115,22,.65)}
.stnav-sub svg{width:17px;height:17px;fill:#1c0a02;flex:none}
.stnav-burger{display:none;width:42px;height:42px;border-radius:11px;flex-direction:column;gap:4px;align-items:center;justify-content:center;background:none;border:0;cursor:pointer}
.stnav-burger span{width:19px;height:2px;background:#f5f2ea;border-radius:2px}
.stnav-sheet{position:fixed;inset:0;z-index:130;background:rgba(10,9,8,.98);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);transform:translateX(100%);transition:transform .3s cubic-bezier(.16,1,.3,1);display:flex;flex-direction:column;padding:clamp(18px,6vw,30px)}
.stnav-sheet.open{transform:none}
.stnav-sheet-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:24px}
.stnav-sheet-close{width:44px;height:44px;border:1px solid rgba(255,255,255,.1);border-radius:12px;background:none;color:#f5f2ea;font-size:26px;cursor:pointer;display:grid;place-items:center;line-height:1}
.stnav-sheet>a{font-family:'Archivo',sans-serif;font-weight:800;font-size:1.4rem;color:#f5f2ea;padding:14px 2px;border-bottom:1px solid rgba(255,255,255,.07);text-decoration:none;min-height:48px;display:flex;align-items:center}
.stnav-sheet .stnav-sub{margin-top:22px;justify-content:center;font-size:1rem}
@media(max-width:900px){.stnav-links{display:none}.stnav-in>.stnav-sub{display:none}.stnav-burger{display:flex}}
@media(prefers-reduced-motion:reduce){.stnav,.stnav-sheet{transition:none}}

@import url('https://fonts.googleapis.com/css2?family=Archivo:wght@700;800;900&family=Instrument+Sans:wght@400;500;600&display=swap');
/* ===== seroTech Sektion 11 — Newsletter + Footer (Praefix stf-, flat #0a0908) ===== */
.stf-sec,.stf-sec *,.stf-sec *::before,.stf-sec *::after{box-sizing:border-box}
.stf-sec{position:relative;width:100vw;margin-left:calc(50% - 50vw);overflow:hidden;
  background:#0a0908;
  font-family:'Instrument Sans','Archivo',system-ui,-apple-system,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  padding:clamp(72px,8vw,104px) 0 0;-webkit-font-smoothing:antialiased}
.stf-sec .stf-grain{position:absolute;inset:-50%;opacity:.04;mix-blend-mode:overlay;pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
.stf-sec .stf-wrap{position:relative;z-index:2;max-width:1200px;margin:0 auto;padding:0 clamp(20px,5vw,40px)}
/* Newsletter-Glas-Band */
.stf-sec .stf-band{position:relative;overflow:hidden;border-radius:26px;
  padding:clamp(30px,4.5vw,52px);
  background:linear-gradient(180deg,rgba(245,242,234,.055),rgba(245,242,234,.018));
  border:1px solid rgba(255,255,255,.08);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  box-shadow:0 40px 90px -30px rgba(0,0,0,.7), inset 0 1px 0 rgba(245,242,234,.06);
  display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(26px,3.5vw,48px);align-items:center}
.stf-sec .stf-blob{position:absolute;top:-80px;right:-80px;width:280px;height:280px;border-radius:50%;
  background:rgba(249,115,22,.14);filter:blur(64px);pointer-events:none}
.stf-sec .stf-bl,.stf-sec .stf-br{position:relative;z-index:1}
.stf-sec .stf-tag{display:inline-flex;align-items:center;gap:8px;font-family:'Archivo',sans-serif;font-weight:700;
  font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:#2dd4bf;
  padding:7px 14px;border-radius:99px;border:1px solid rgba(20,184,166,.35);background:rgba(20,184,166,.08);margin-bottom:16px}
.stf-sec .stf-tag::before{content:"";width:6px;height:6px;border-radius:50%;background:#14b8a6;flex:none}
.stf-sec h2.stf-h{font-family:'Archivo',sans-serif;font-weight:900;letter-spacing:-.02em;
  font-size:clamp(1.7rem,3.2vw,2.5rem);line-height:1.08;color:#f5f2ea;margin:0;text-wrap:balance}
.stf-sec .stf-sub{margin:12px 0 0;font-size:clamp(.95rem,1.15vw,1.05rem);line-height:1.6;color:#a8a29e;max-width:44ch}
.stf-sec .stf-form{display:flex;gap:10px;flex-wrap:wrap}
.stf-sec .stf-mail{flex:1 1 220px;height:52px;min-height:52px;padding:0 20px;border-radius:99px;
  font-family:'Instrument Sans',sans-serif;font-size:15px;color:#f5f2ea;
  background:rgba(245,242,234,.05);border:1px solid rgba(255,255,255,.1);outline:none;
  transition:border-color .25s}
.stf-sec .stf-mail::placeholder{color:#a8a29e}
.stf-sec .stf-mail:focus{border-color:rgba(249,115,22,.55)}
.stf-sec .stf-go{display:inline-flex;align-items:center;justify-content:center;gap:10px;flex:none;
  font-family:'Archivo',sans-serif;font-weight:700;font-size:15px;padding:15px 26px;min-height:52px;border-radius:99px;
  cursor:pointer;border:1.5px solid transparent;text-decoration:none;white-space:nowrap;
  background:linear-gradient(180deg,#fb923c,#ea580c);color:#1c0a02 !important;
  box-shadow:0 12px 34px -12px rgba(249,115,22,.45);
  transition:transform .25s cubic-bezier(.16,1,.3,1),box-shadow .25s}
.stf-sec .stf-go:hover{transform:translateY(-2px);box-shadow:0 18px 44px -12px rgba(249,115,22,.6)}
.stf-sec .stf-go svg{width:17px;height:17px}
/* Footer */
.stf-sec .stf-foot{margin-top:clamp(56px,7vw,88px);border-top:1px solid rgba(255,255,255,.08);
  padding:clamp(34px,4.5vw,52px) 0 clamp(26px,3.5vw,40px)}
.stf-sec .stf-frow{display:flex;align-items:center;justify-content:space-between;gap:26px;flex-wrap:wrap}
.stf-sec .stf-mark{line-height:1}
.stf-sec .stf-mark .m1{font-family:'Archivo',sans-serif;font-weight:900;font-size:23px;letter-spacing:-.02em;color:#f5f2ea}
.stf-sec .stf-mark .m1 em{font-style:normal;color:#f97316}
.stf-sec .stf-mark .m2{display:block;margin-top:5px;font-family:'Archivo',sans-serif;font-weight:700;
  font-size:11px;letter-spacing:.42em;text-transform:uppercase;color:#a8a29e}
.stf-sec .stf-nav{display:flex;align-items:center;gap:clamp(6px,1.5vw,18px);flex-wrap:wrap}
.stf-sec .stf-nav a{display:inline-block;padding:14px 6px;min-height:44px;font-size:14px;font-weight:500;color:#a8a29e;
  text-decoration:none;transition:color .25s}
.stf-sec .stf-nav a:hover{color:#f5f2ea}
.stf-sec .stf-soc{display:flex;align-items:center;gap:10px}
.stf-sec .stf-soc a{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;
  border:1px solid rgba(255,255,255,.1);color:#d6d0c6;
  background:linear-gradient(180deg,rgba(245,242,234,.05),rgba(245,242,234,.015));
  transition:border-color .25s,color .25s,transform .25s cubic-bezier(.16,1,.3,1)}
.stf-sec .stf-soc a:hover{border-color:rgba(249,115,22,.55);color:#fb923c;transform:translateY(-2px)}
.stf-sec .stf-soc svg{width:19px;height:19px}
.stf-sec .stf-legal{margin-top:clamp(24px,3vw,36px);padding-top:20px;border-top:1px solid rgba(255,255,255,.08);
  font-size:12.5px;color:#8a847b;text-align:center}
@media(max-width:900px){
  .stf-sec .stf-band{grid-template-columns:1fr}
}
@media(max-width:768px){
  .stf-sec{padding-top:64px}
  .stf-sec .stf-frow{flex-direction:column;align-items:flex-start;gap:18px}
  .stf-sec .stf-nav{margin-left:-6px}
}
@media(max-width:480px){
  .stf-sec .stf-form{flex-direction:column}
  .stf-sec .stf-mail{flex:0 0 auto}
  .stf-sec .stf-mail,.stf-sec .stf-go{width:100%}
}
/* Reveal */
.stf-sec .stf-rev{opacity:1;transform:none}
.stf-sec.stf-armed .stf-rev{opacity:0;transform:translateY(26px);
  transition:opacity .8s cubic-bezier(.16,1,.3,1),transform .8s cubic-bezier(.16,1,.3,1)}
.stf-sec.stf-armed .stf-rev.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){
  .stf-sec *{animation:none !important;transition:none !important}
  .stf-sec .stf-rev,.stf-sec.stf-armed .stf-rev{opacity:1 !important;transform:none !important}
}

/* ═══ Produktkarten — gelten global.
   Sie standen nur in shop.css; auf der Produktseite fehlten Grid und Bildproportion,
   dadurch wurden die "Oft zusammen geladen"-Karten riesig. ═══ */
.sh-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(14px,1.8vw,22px)}
.sh-card:hover{transform:translateY(-5px);border-color:var(--acc-line);box-shadow:0 30px 60px -34px rgba(0,0,0,.75)}
.sh-card.is-soon{opacity:.66}
.sh-card.is-soon:hover{transform:translateY(-3px);opacity:.8}
.sh-media{position:relative;aspect-ratio:4/3;overflow:hidden;background:radial-gradient(120% 100% at 50% 12%,#221812,#100c09);display:grid;place-items:center;padding:16px}
.sh-media-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:1;transition:transform .5s cubic-bezier(.16,1,.3,1)}
.sh-card:hover .sh-media-img{transform:scale(1.04)}
.sh-badges{position:absolute;top:10px;left:10px;z-index:3;display:flex;flex-direction:column;gap:5px}
.sh-badge{font-family:'Archivo',sans-serif;font-weight:800;font-size:10px;letter-spacing:.08em;text-transform:uppercase;padding:5px 9px;border-radius:7px;color:#1c0a02}
.sh-badge--best{background:linear-gradient(180deg,var(--acc-hi),#ea580c)}
.sh-badge--free{background:rgba(20,184,166,.16);color:var(--teal-hi);box-shadow:inset 0 0 0 1px rgba(20,184,166,.45)}
.sh-badge--soon{background:rgba(245,242,234,.08);color:var(--muted);box-shadow:inset 0 0 0 1px var(--hair)}
.sh-fav{position:absolute;top:10px;right:10px;z-index:3;width:34px;height:34px;border-radius:10px;display:grid;place-items:center;
  border:1px solid var(--hair);background:rgba(10,9,8,.5);backdrop-filter:blur(6px);transition:all .22s}
.sh-fav svg{width:16px;height:16px;stroke:var(--muted);fill:none;stroke-width:1.8;transition:all .22s}
.sh-fav:hover{border-color:var(--acc-line)}
.sh-fav:hover svg,.sh-fav.on svg{stroke:var(--acc-hi);fill:var(--acc)}
.sh-vbadge svg{width:12px;height:12px;fill:var(--acc-hi);flex:none}
.sh-card-body{padding:14px 16px 16px;display:flex;flex-direction:column;flex:1}
.sh-card-cat{font-family:'Archivo',sans-serif;font-weight:700;font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--dim);margin-bottom:7px}
.sh-card-title{font-family:'Archivo',sans-serif;font-weight:800;font-size:15px;line-height:1.25;color:var(--ink);letter-spacing:-.01em}
.sh-card-benefit{margin-top:8px;font-size:12.5px;color:var(--muted);line-height:1.5}
.sh-card-foot{margin-top:auto;padding-top:16px}
.sh-price{display:flex;align-items:baseline;gap:8px}
.sh-price .p{font-family:'Archivo',sans-serif;font-weight:900;font-size:1.5rem;color:var(--ink);letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.sh-price .p.free{color:var(--teal-hi)}
.sh-price .tax{font-size:11px;color:var(--dim)}
.sh-price .soon{font-family:'Archivo',sans-serif;font-weight:700;font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.sh-add{width:100%;margin-top:12px;display:inline-flex;align-items:center;justify-content:center;gap:9px;min-height:46px;padding:0 16px;border-radius:12px;
  font-family:'Archivo',sans-serif;font-weight:700;font-size:14px;transition:transform .22s var(--ease),box-shadow .22s,background .22s,color .22s,border-color .22s}
.sh-add svg{width:16px;height:16px;flex:none}
.sh-add--buy{background:linear-gradient(180deg,var(--acc-hi),#ea580c);color:#fff;box-shadow:0 10px 26px -12px rgba(249,115,22,.5);text-shadow:0 1px 2px rgba(90,30,0,.35)}
.sh-add--buy:hover{transform:translateY(-2px);box-shadow:0 16px 34px -12px rgba(249,115,22,.65)}
.sh-add--free{border:1.5px solid rgba(20,184,166,.5);color:var(--teal-hi);background:rgba(20,184,166,.06)}
.sh-add--free:hover{border-color:var(--teal-hi);background:rgba(20,184,166,.12);transform:translateY(-2px)}
.sh-add--soon{border:1.5px solid var(--hair);color:var(--muted);background:transparent}
.sh-add--soon:hover{border-color:var(--acc-line);color:var(--ink)}
.sh-add.added{background:#166534 !important;color:#fff !important;border-color:#166534 !important;box-shadow:none !important}
@media(max-width:1000px){.sh-grid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:760px){.sh-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:460px){.sh-grid{grid-template-columns:1fr}}

/* Verwandte Produkte auf der Produktseite: sauberes 3er-Raster mit Rand */
.pdp-sec .sh-grid, .pdp-desc + .pdp-sec .sh-grid { grid-template-columns: repeat(3, 1fr); }
.pdp-sec .sh-wrap { max-width: 1160px; margin: 0 auto; padding: 0 clamp(20px, 5vw, 40px); }
.pdp-sec .sh-h2 { font-family: 'Archivo', sans-serif; font-size: clamp(1.4rem, 2.6vw, 2rem);
  color: #f5f2ea; margin: 0 0 24px; }
.pdp-sec .sh-card { max-width: none; }
.pdp-sec .sh-media { aspect-ratio: 4/3; }
.pdp-sec .sh-card-title { font-size: 15px; line-height: 1.35; }
@media (max-width: 900px) { .pdp-sec .sh-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .pdp-sec .sh-grid { grid-template-columns: 1fr; } }

/* ═══════════════════════════════════════════════════════════════════
   Aus SteamyDrive B2B übernommen, auf seroTech angepasst (Orange statt Gold).
   1) FAQ-Akkordeon   — die FAQs auf Shop/Produkt/Kontakt waren tote Buttons
   2) Spotlight       — Karten leuchten unter dem Cursor auf
   3) Zähl-Animation  — die Kanalzahlen laufen beim Scrollen hoch
   4) Verlauf-Text    — für die großen Überschriften
   ═══════════════════════════════════════════════════════════════════ */

/* ---------- 1) FAQ-Akkordeon ---------- */
.st-faq-item{ border-bottom: 1px solid rgba(255, 255, 255, .08); }
.st-faq-q {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  padding: 22px 4px;
  text-align: left;
  background: none;
  border: 0;
  cursor: pointer;
  color: #f5f2ea;
  font-family: 'Archivo', system-ui, sans-serif;
  font-size: 16.5px;
  font-weight: 700;
  line-height: 1.4;
  transition: color .25s cubic-bezier(.16, 1, .3, 1);
}
.st-faq-q:hover { color: #fb923c; }
/* Plus/Minus-Zeichen, das sich zum Minus dreht */
.st-faq-q .pm { width: 22px; height: 22px; position: relative; flex: 0 0 auto; transition: transform .3s cubic-bezier(.16, 1, .3, 1); }
.st-faq-q .pm::before,
.st-faq-q .pm::after { content: ""; position: absolute; background: #f97316; border-radius: 2px; }
.st-faq-q .pm::before { left: 10px; top: 2px; width: 2px; height: 18px; transition: transform .3s cubic-bezier(.16, 1, .3, 1), opacity .25s; }
.st-faq-q .pm::after  { top: 10px; left: 2px; height: 2px; width: 18px; }
.st-faq-item.open .pm { transform: rotate(180deg); }
.st-faq-item.open .pm::before { transform: scaleY(0); opacity: 0; }

.st-faq-a {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows .38s cubic-bezier(.16, 1, .3, 1);
}
.st-faq-a > div { overflow: hidden; }
.st-faq-item.open .st-faq-a { grid-template-rows: 1fr; }
.st-faq-a p {
  margin: 0;
  padding: 0 4px 24px;
  color: #a8a29e;
  font-size: 15px;
  line-height: 1.65;
  max-width: 62ch;
}

/* ---------- 2) Spotlight: Karte leuchtet unter dem Cursor ---------- */
.st-spot { position: relative; isolation: isolate; }
.st-spot::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  border-radius: inherit;
  pointer-events: none;
  opacity: 0;
  transition: opacity .35s cubic-bezier(.16, 1, .3, 1);
  background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 50%),
              rgba(249, 115, 22, .16), transparent 62%);
}
.st-spot:hover::before { opacity: 1; }
.st-spot > * { position: relative; z-index: 1; }

/* ---------- 3) Zähl-Animation ---------- */
.st-count { font-variant-numeric: tabular-nums; }

/* ---------- 4) Verlauf-Text ---------- */
.st-grad {
  background: linear-gradient(115deg, #fff 6%, #fdba74 46%, #f97316 92%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

@media (prefers-reduced-motion: reduce) {
  .st-faq-a, .st-faq-q .pm, .st-spot::before { transition: none; }
}

/* Das geschlossene Mobile-Menue liegt per translateX(100%) rechts ausserhalb.
   Ohne diese Klammer erzeugt es auf manchen Seiten einen horizontalen Scrollbalken. */
html, body { overflow-x: clip; }
@supports not (overflow: clip) {
  html, body { overflow-x: hidden; }
}

/* Rechtstexte als native Widgets: lesbare Zeilenlaenge.
   (Elementors boxed_width greift bei Containern mit eigenen Klassen nicht zuverlaessig.) */
.st-lesbar {
  max-width: 900px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding: 56px 24px 80px !important;
}
.st-lesbar .elementor-widget-heading { margin-top: 26px; }
.st-lesbar .elementor-widget-heading:first-child { margin-top: 0; }
.st-lesbar h2 { font-family: 'Archivo', sans-serif; font-size: clamp(1.3rem, 2.2vw, 1.7rem); color: #f5f2ea; margin: 0 0 10px; }
.st-lesbar h3 { font-family: 'Archivo', sans-serif; font-size: 1.1rem; color: #f5f2ea; margin: 0 0 8px; }
.st-lesbar p, .st-lesbar li { color: #a8a29e; font-size: 15px; line-height: 1.7; }
.st-lesbar a { color: #f97316; }
.st-lesbar ul, .st-lesbar ol { padding-left: 22px; margin: 8px 0; }

/* ═══════════════════════════════════════════════════════════════════════
   seroTech — Button-System
   Problem: Primärbuttons hatten dunkelbraune Schrift auf hellem Orange.
            Rechnerisch 6,7:1, aber warm-auf-warm = optisch matschig.
            Weiße Schrift auf dem hellen Marken-Orange (#f97316) wäre nur 2,8:1 -> noch schlechter.
   Lösung:  Verlauf ins sattere Orange (#dc5309) + weiße 800er Schrift = 4,0:1 am dunkelsten Punkt.
            Bleibt Marken-Orange, ist aber klar lesbar.
   Signatur: Pill + Pfeil-im-Kreis (von SteamyDrive B2B übernommen).
   ═══════════════════════════════════════════════════════════════════════ */

:root {
  --st-acc: #f97316;
  --st-acc-deep: #dc5309;
  --st-acc-hi: #fb923c;
  --st-ease: cubic-bezier(.16, 1, .3, 1);
}

/* ---------- Primär: orange Pill, weiße Schrift ---------- */
.sh-btn--orange,
.pdp-buy,
.ct-form .forminator-button-submit,
.pfz-form .forminator-button-submit,
.stf-form .forminator-button-submit,
.sh-nl-form .forminator-button-submit,
.wc-mount .woocommerce a.button.alt,
.wc-mount .woocommerce button.button.alt,
.wc-mount .woocommerce #place_order,
.wc-mount .woocommerce .checkout-button,
.stnav-sub,
.sh-add--buy,
.st-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background: linear-gradient(180deg, var(--st-acc-hi), var(--st-acc-deep)) !important;
  color: #fff !important;
  text-shadow: 0 1px 2px rgba(90, 30, 0, .35);
  border: 0 !important;
  border-radius: 100px !important;
  font-family: 'Archivo', system-ui, sans-serif !important;
  font-weight: 800 !important;
  letter-spacing: .005em;
  text-decoration: none;
  cursor: pointer;
  box-shadow: 0 10px 28px -8px rgba(220, 83, 9, .55);
  transition: transform .28s var(--st-ease), box-shadow .28s var(--st-ease), filter .28s var(--st-ease);
}

.sh-btn--orange:hover,
.pdp-buy:hover,
.ct-form .forminator-button-submit:hover,
.pfz-form .forminator-button-submit:hover,
.stf-form .forminator-button-submit:hover,
.wc-mount .woocommerce a.button.alt:hover,
.wc-mount .woocommerce button.button.alt:hover,
.wc-mount .woocommerce #place_order:hover,
.wc-mount .woocommerce .checkout-button:hover,
.stnav-sub:hover,
.sh-add--buy:hover,
.st-btn:hover {
  transform: translateY(-2px);
  filter: saturate(1.08) brightness(1.04);
  box-shadow: 0 18px 42px -10px rgba(220, 83, 9, .7);
}

.sh-btn--orange svg,
.pdp-buy svg,
.sh-add--buy svg { stroke: #fff; }

/* ---------- Sekundär: Glas-Pill, helle Schrift ---------- */
.sh-btn--ghost,
.sh-btn:not(.sh-btn--orange),
.wc-mount .woocommerce a.button:not(.alt),
.wc-mount .woocommerce button.button:not(.alt),
.st-btn--ghost {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background: rgba(245, 242, 234, .05) !important;
  color: #f5f2ea !important;
  border: 1px solid rgba(255, 255, 255, .14) !important;
  border-radius: 100px !important;
  font-family: 'Archivo', system-ui, sans-serif !important;
  font-weight: 700 !important;
  text-decoration: none;
  box-shadow: none !important;
  transition: background .28s var(--st-ease), border-color .28s var(--st-ease), transform .28s var(--st-ease);
}
.sh-btn--ghost:hover,
.sh-btn:not(.sh-btn--orange):hover,
.wc-mount .woocommerce a.button:not(.alt):hover,
.st-btn--ghost:hover {
  background: rgba(245, 242, 234, .1) !important;
  border-color: rgba(249, 115, 22, .5) !important;
  transform: translateY(-2px);
}

/* ═══════════════════════════════════════════════════════════════════════
   Pfeil-im-Kreis (SteamyDrive-B2B-Signatur)
   Ruhe:  Text links, Pfeil-Kreis rechts.
   Hover: heller Grund läuft von rechts ein, der Pfeil wandert nach links
          und dreht sich um 45° — der Text rutscht nach rechts nach.
   ═══════════════════════════════════════════════════════════════════════ */
.st-arrow {
  position: relative;
  display: inline-flex;
  align-items: center;
  height: 52px;
  padding: 0 62px 0 26px;
  border-radius: 100px;
  overflow: hidden;
  white-space: nowrap;
  line-height: 1;
  font-family: 'Archivo', system-ui, sans-serif;
  font-weight: 800;
  font-size: 15px;
  text-decoration: none;
  isolation: isolate;
  background: linear-gradient(180deg, var(--st-acc-hi), var(--st-acc-deep));
  color: #fff;
  text-shadow: 0 1px 2px rgba(90, 30, 0, .35);
  box-shadow: 0 10px 28px -8px rgba(220, 83, 9, .55);
  transition: padding .5s var(--st-ease), box-shadow .3s var(--st-ease), color .35s var(--st-ease);
}
/* Der helle Grund, der beim Hover von rechts einläuft */
.st-arrow::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: #f5f2ea;
  border-radius: inherit;
  pointer-events: none;
  transform: scaleX(0);
  transform-origin: right center;
  transition: transform .5s var(--st-ease);
}
.st-arrow .arr {
  position: absolute;
  right: 5px;
  top: 50%;
  transform: translateY(-50%);
  width: 42px;
  height: 42px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: #12100e;
  color: var(--st-acc-hi);
  transition: right .5s var(--st-ease), transform .5s var(--st-ease), background .35s var(--st-ease);
}
.st-arrow .arr svg { width: 17px; height: 17px; stroke: currentColor; fill: none; stroke-width: 2.2; }

.st-arrow:hover { padding: 0 26px 0 62px; color: #12100e; text-shadow: none; }
.st-arrow:hover::before { transform: scaleX(1); }
.st-arrow:hover .arr {
  right: calc(100% - 47px);
  transform: translateY(-50%) rotate(45deg);
  background: var(--st-acc-deep);
  color: #fff;
}

/* Geister-Variante */
.st-arrow--ghost {
  background: rgba(245, 242, 234, .05);
  color: #f5f2ea;
  text-shadow: none;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14);
}
.st-arrow--ghost::before { background: linear-gradient(180deg, var(--st-acc-hi), var(--st-acc-deep)); }
.st-arrow--ghost .arr { background: rgba(255, 255, 255, .1); color: #f5f2ea; }
.st-arrow--ghost:hover { color: #fff; text-shadow: 0 1px 2px rgba(90, 30, 0, .35); }
.st-arrow--ghost:hover .arr { background: #12100e; color: var(--st-acc-hi); }

@media (prefers-reduced-motion: reduce) {
  .st-arrow, .st-arrow::before, .st-arrow .arr { transition: none; }
}

/* ---------- Kleine orange Elemente: ebenfalls weiße Schrift ---------- */
.sh-badge--best,
.pdp-badge--sale,
.stb-pill[aria-pressed="true"],
.sh-chip.on,
.sh-filter.on {
  background: linear-gradient(180deg, var(--st-acc-hi), var(--st-acc-deep)) !important;
  color: #fff !important;
  border-color: transparent !important;
  text-shadow: 0 1px 1px rgba(90, 30, 0, .3);
}



/* ---------- Die restlichen Primär-Buttons der Mockups (kuratiert, nicht automatisch) ----------
   Bewusst NICHT dabei: .sts-btn.ghost (Geister-Button) und .lg-cta .pool (Deko-Fläche). */
.sth-btn.sth-orange,
.stc-btn.stc-orange,
.stf-band-btn,
.stf-form button,
.pfh-nav-cta,
.pfz-submit,
.sba-btn,
.sba-vbtn,
.sts .sts-btn.org,
.stk-btn,
.dk-btn {
  background: linear-gradient(180deg, var(--st-acc-hi), var(--st-acc-deep)) !important;
  color: #fff !important;
  text-shadow: 0 1px 2px rgba(90, 30, 0, .35) !important;
  border-color: transparent !important;
  font-weight: 800 !important;
}
.sth-btn.sth-orange svg,
.stc-btn.stc-orange svg,
.stf-band-btn svg,
.pfh-nav-cta svg,
.sba-btn svg,
.sts .sts-btn.org svg,
.stk-btn svg { stroke: #fff !important; fill: none; }

.sth-btn.sth-orange:hover,
.stc-btn.stc-orange:hover,
.stf-band-btn:hover,
.pfh-nav-cta:hover,
.sba-btn:hover,
.sts .sts-btn.org:hover,
.stk-btn:hover {
  filter: saturate(1.08) brightness(1.05);
  transform: translateY(-2px);
}

/* Geister-Buttons: heller Rand, helle Schrift - KEIN Orange */
.sts .sts-btn.ghost,
.sth-btn:not(.sth-orange),
.stc-btn:not(.stc-orange) {
  background: rgba(245, 242, 234, .05) !important;
  color: #f5f2ea !important;
  border: 1px solid rgba(255, 255, 255, .14) !important;
  text-shadow: none !important;
}


/* ---------- Pfeil-Button: Maße und Hover-Farbe durchsetzen ----------
   Die Seiten-CSS bringt eigene Paddings und Farben mit (teils !important).
   Ohne diese Regeln überlappt der Pfeil den Text und die Hover-Schrift wird unlesbar. */
a.st-arrow, .st-arrow {
  height: 54px !important;
  padding: 0 68px 0 28px !important;   /* rechts Platz für den Pfeil-Kreis */
  min-width: 0 !important;
  justify-content: flex-start !important;
  gap: 0 !important;
}
a.st-arrow:hover, .st-arrow:hover {
  padding: 0 28px 0 68px !important;   /* Text rutscht nach rechts */
  color: #12100e !important;           /* dunkle Schrift auf dem hellen Grund */
  text-shadow: none !important;
}
a.st-arrow:hover .arr, .st-arrow:hover .arr {
  background: linear-gradient(180deg, var(--st-acc-hi), var(--st-acc-deep)) !important;
  color: #fff !important;
}
a.st-arrow:hover .arr svg, .st-arrow:hover .arr svg { stroke: #fff !important; }
/* Der Pfeil-Kreis darf nie vom Button-Text überdeckt werden */
.st-arrow .arr { z-index: 2; }
.st-arrow > svg { display: none; }        /* altes Inline-Pfeil-SVG ausblenden */

/* Geister-Pfeil-Button */
a.st-arrow--ghost:hover, .st-arrow--ghost:hover { color: #fff !important; text-shadow: 0 1px 2px rgba(90,30,0,.35) !important; }


/* ─────────────────────────────────────────────────────────────────────────
   Das Theme faerbt JEDEN nackten <button> pink: `button { color: #c36 }`.
   Das ist keine seroTech-Farbe. Betroffen waren u.a. die Portfolio-Zahlen
   (01/02/03) und der Menue-Burger. `inherit` holt die Textfarbe des
   Containers zurueck; unsere eigenen Button-Regeln sind spezifischer
   und bleiben davon unberuehrt.
   ───────────────────────────────────────────────────────────────────────── */
button, [type="button"], [type="submit"] { color: inherit; }


/* ══════════════════════════════════════════════════════════════════════════
   Native Elementor-Buttons in die seroTech-Optik ueberfuehren.

   Elementor haengt die CSS-Klasse an den WRAPPER (.elementor-widget-button),
   nicht an das <a>. Ohne diese Datei wuerde der Wrapper zur orangen Pille und
   der eigentliche Button bliebe grau. Und statt des Mockup-Spans .arr rendert
   Elementor einen .elementor-button-icon - der wird hier zum Pfeil-Kreis
   (SteamyDrive-Signatur).
   ══════════════════════════════════════════════════════════════════════════ */

/* 1. Wrapper darf die Button-Optik NICHT selbst tragen */
.elementor-widget-button.sh-btn,
.elementor-widget-button.st-arrow {
  height: auto !important;
  min-height: 0 !important;
  padding: 0 !important;
  background: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  overflow: visible !important;
  display: inline-block !important;
  transform: none !important;
}
.elementor-widget-button.sh-btn::before,
.elementor-widget-button.st-arrow::before,
.elementor-widget-button.sh-btn:hover::before,
.elementor-widget-button.st-arrow:hover::before { content: none !important; }
.elementor-widget-button .elementor-button-wrapper { display: inline-flex; }

/* 2. Grundform auf das echte <a> uebertragen */
.elementor-widget-button.st-arrow .elementor-button {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  height: 54px;
  padding: 0 68px 0 28px;
  border-radius: 100px;
  overflow: hidden;
  white-space: nowrap;
  font-family: 'Instrument Sans', sans-serif;
  font-size: 15px;
  font-weight: 800;
  letter-spacing: .01em;
  text-decoration: none;
  border: 0;
  background: linear-gradient(180deg, var(--st-acc-hi, #fb923c), var(--st-acc-deep, #dc5309));
  color: #fff;
  box-shadow: 0 12px 30px -12px rgba(220, 83, 9, .6);
  transition: padding .38s cubic-bezier(.22,1,.36,1), color .28s ease, transform .28s ease;
}
.elementor-widget-button.st-arrow .elementor-button:hover {
  padding: 0 28px 0 68px;
  color: #12100e;
  transform: translateY(-2px);
}

/* 3. Heller Grund, der beim Hover von rechts einlaeuft.
      z-index: -1 wie im Mockup: liegt ueber dem Verlauf des <a>, aber unter dem Text.
      Der Content-Wrapper darf NICHT position:relative bekommen - sonst wird er zum
      Bezugsrahmen des absolut gesetzten Pfeil-Kreises, und der landet mitten im Text. */
.elementor-widget-button.st-arrow .elementor-button::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: #f5f2ea;
  border-radius: inherit;
  transform: scaleX(0);
  transform-origin: right center;
  transition: transform .42s cubic-bezier(.22,1,.36,1);
  pointer-events: none;
}
.elementor-widget-button.st-arrow .elementor-button:hover::before { transform: scaleX(1); }
.elementor-widget-button.st-arrow .elementor-button-content-wrapper {
  position: static;
  display: flex;
  align-items: center;
}

/* 4. Elementors Icon-Span wird zum Pfeil-Kreis (ersetzt .arr aus dem Mockup) */
.elementor-widget-button.st-arrow .elementor-button-icon {
  position: absolute;
  right: 5px;
  top: 50%;
  transform: translateY(-50%);
  width: 42px; height: 42px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  /* wie im Mockup: dunkler Kreis, oranger Pfeil (NICHT blass-weiss) */
  background: #12100e;
  color: var(--st-acc-hi, #fb923c);
  z-index: 2;
  margin: 0 !important;
  transition: right .38s cubic-bezier(.22,1,.36,1), transform .38s cubic-bezier(.22,1,.36,1),
              background .28s ease, color .28s ease;
}
/* Der Pfeil steht in Ruhe diagonal (nach oben rechts) wie im Mockup. Beim Hover
   dreht der Kreis um 45 Grad - dadurch richtet sich der Pfeil gerade aus. */
.elementor-widget-button.st-arrow .elementor-button-icon svg {
  width: 16px; height: 16px; fill: currentColor;
  transform: rotate(-45deg);
}
.elementor-widget-button.st-arrow .elementor-button-icon i {
  font-size: 15px;
  transform: rotate(-45deg);
}
.elementor-widget-button.st-arrow .elementor-button:hover .elementor-button-icon {
  right: calc(100% - 47px);
  transform: translateY(-50%) rotate(45deg);
  background: linear-gradient(180deg, var(--st-acc-hi, #fb923c), var(--st-acc-deep, #dc5309));
  color: #fff;
}

/* 5. Geister-Variante (sekundaerer Button) */
.elementor-widget-button.sh-btn:not(.st-arrow) .elementor-button {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  height: 54px;
  padding: 0 28px;
  border-radius: 100px;
  background: rgba(245, 242, 234, .05);
  color: #f5f2ea;
  border: 1px solid rgba(255, 255, 255, .14);
  font-family: 'Instrument Sans', sans-serif;
  font-size: 15px;
  font-weight: 700;
  text-decoration: none;
  transition: background .28s ease, border-color .28s ease, transform .28s ease;
}
.elementor-widget-button.sh-btn:not(.st-arrow) .elementor-button:hover {
  background: rgba(245, 242, 234, .1);
  border-color: rgba(249, 115, 22, .5);
  transform: translateY(-2px);
}

/* 6. CTA-Container: Buttons nebeneinander, nicht untereinander */
.st-cta-row { display: flex !important; flex-direction: row !important; flex-wrap: wrap;
              justify-content: center; align-items: center; gap: 14px !important; }