@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700&display=swap');
@font-face{font-family:'Surgena';src:url('https://www.asera.ch/wp-content/uploads/bilder/produktbilder/viveroo/Surgena-Regular.ttf') format('truetype');font-weight:400;font-style:normal;font-display:swap;}

/* ============================================================
   VIVEROO free – Nachbau standed.de/de/free (v1)
   Dunkel: Hero, Intro, Foyer, Technologie
   Cream:  Finish & Format, 360°, Erweiterungen
   Layout-Unterschiede zu one: Hero gespiegelt (Bild LINKS, Text
   RECHTS, text-right), Intro Text LINKS, Groessen-SVG als Bild.
   ============================================================ */

/* Grundpanel - im Standardfluss lassen (wie Referenz thevios):
   Tab-Wrapper + Panel NICHT auf 100vw ziehen! Nur transparent
   und ohne Padding, damit die Sektionen selbst full-bleed sind. */
#zs-uebersicht.woocommerce-Tabs-panel,
#zs-uebersicht {
  background:transparent !important;
  max-width:100% !important;
  width:auto !important;
  padding:0 !important;
  margin:0 !important;
  color:#111111 !important;
}
.single-product .woocommerce-tabs.wc-tabs-wrapper:has(#zs-uebersicht) {
  max-width:100% !important;
  width:auto !important;
  padding:0 !important;
  margin:0 !important;
}

/* Full-Width-Sektionen (nur Sektionen, NICHT div.product/Galerie/Summary!)
   Desktop: Panel zentriert -> calc(50% - 50vw) startet exakt 0.
   Mobile:  div.product ist 16px schmaler als der Viewport ->
   Panel-Mitte = 50vw-16 -> +16px Korrektur. */
#zs-uebersicht .flex-sec1,
#zs-uebersicht .flex-intro,
#zs-uebersicht .flex-farben,
#zs-uebersicht .flex-showcase,
#zs-uebersicht .flex-360,
#zs-uebersicht .flex-technik,
#zs-uebersicht .flex-ext {
  width:100vw !important;
  margin-left:calc(50% - 50vw) !important;
  margin-right:calc(50% - 50vw) !important;
  max-width:100vw !important;
  box-sizing:border-box !important;
}
@media (max-width:768px){
  #zs-uebersicht .flex-sec1,
  #zs-uebersicht .flex-intro,
  #zs-uebersicht .flex-farben,
  #zs-uebersicht .flex-showcase,
  #zs-uebersicht .flex-360,
  #zs-uebersicht .flex-technik,
  #zs-uebersicht .flex-ext {
    margin-left:calc(50% - 50vw + 16px) !important;
    margin-right:calc(50% - 50vw - 16px) !important;
  }
}

/* ---------- SEGMENT 1: HERO (dunkel, Bild RECHTS, Text LINKS) ---------- */
#zs-uebersicht .flex-sec1{
  position:relative;height:100svh;min-height:640px;background:#000000 !important;color:#fafafa;overflow:hidden;display:flex;align-items:stretch;
}
#zs-uebersicht .flex-sec1 .zs-hero-bg{
  position:absolute;top:0;bottom:0;right:0;z-index:1;width:55%;display:flex;align-items:center;justify-content:center;overflow:hidden;
}
#zs-uebersicht .flex-sec1 .zs-hero-bg img{
  width:auto;height:auto;max-width:95%;max-height:95%;object-fit:contain;display:block;
  margin:0;
  transform:scale(0.8) translateX(-50px);
  transform-origin:center;
}
#zs-uebersicht .flex-sec1 .zs-hero-grad{
  position:absolute;inset:0;z-index:2;pointer-events:none;
  background:linear-gradient(to right, rgba(0,0,0,0.3) 0%, rgba(0,0,0,0.1) 50%, rgba(0,0,0,0) 100%);
}
#zs-uebersicht .flex-sec1 .zs-hero-content{
  position:relative;z-index:3;width:100%;max-width:1400px;margin:0 auto;padding:0 6vw;box-sizing:border-box;
  display:flex;flex-direction:column;justify-content:center;align-items:flex-start;
}
@media (min-width:768px){
  #zs-uebersicht .flex-sec1 .zs-hero-content{padding:0 64px;}
}
#zs-uebersicht .flex-sec1 .zs-hero-text{max-width:48%;text-align:left;display:flex;flex-direction:column;align-items:flex-start;margin-left:0;}
#zs-uebersicht .flex-sec1 h1{
  font-family:'Surgena','Poppins',sans-serif !important;font-weight:400 !important;
  font-size:clamp(5rem,12vw,10.8rem) !important;line-height:0.92 !important;
  letter-spacing:0.06em !important;text-transform:none !important;
  color:#fafafa !important;margin:0 0 .12em !important;border:0 !important;
}
#zs-uebersicht .flex-sec1 .zs-hero-p{
  font-family:'Poppins',sans-serif !important;font-weight:300 !important;font-size:16px !important;
  line-height:1.5 !important;color:rgba(255,255,255,.85) !important;margin:0 0 .4em !important;
}
#zs-uebersicht .flex-sec1 .zs-hero-p2{
  font-family:'Poppins',sans-serif !important;font-weight:300 !important;font-size:14px !important;
  line-height:1.6 !important;color:rgba(255,255,255,.65) !important;max-width:46ch !important;margin:0 !important;
}
#zs-uebersicht .flex-sec1 .zs-scroll{
  position:absolute;bottom:110px;left:50%;transform:translateX(-50%);z-index:4;
  width:76px;height:45px;display:flex;justify-content:center;align-items:flex-start;opacity:.7;
}
#zs-uebersicht .flex-sec1 .zs-scroll svg{width:34px;height:auto;}

/* ---------- SEGMENT 2: INTRO (schwarz, Text LINKS) ---------- */
#zs-uebersicht .flex-intro{
  position:relative;background:#000000 !important;color:#f4f2ee;overflow:hidden;
  min-height:70vh;display:flex;align-items:center;
}
#zs-uebersicht .flex-intro .zs-intro-bg{
  position:absolute;inset:0;z-index:0;
}
#zs-uebersicht .flex-intro .zs-intro-bg{
  position:relative;z-index:0;display:block;flex:1 1 55%;min-width:0;order:2;
}
#zs-uebersicht .flex-intro .zs-intro-bg img{
  width:100%;height:auto;max-height:520px;object-fit:contain;object-position:center;display:block;
  transform:none;
}
#zs-uebersicht .flex-intro .zs-intro-inner{
  position:relative;z-index:2;width:100%;max-width:1400px;margin:0 auto;padding:0 6vw;box-sizing:border-box;
  display:flex;justify-content:flex-start;align-items:center;gap:48px;
}
#zs-uebersicht .flex-intro .zs-intro-text{
  flex:0 0 40%;max-width:40%;text-align:left;padding:0;position:relative;z-index:3;order:1;
}
#zs-uebersicht .flex-intro .zs-intro-kicker{
  font-family:'Poppins',sans-serif !important;font-weight:500 !important;font-size:14px !important;
  letter-spacing:0.02em !important;text-transform:none !important;color:rgba(255,255,255,.5) !important;
  display:block;margin:0 0 12px !important;
}
#zs-uebersicht .flex-intro h2{
  font-family:'Poppins',sans-serif !important;font-weight:200 !important;
  font-size:clamp(2.5rem,5vw,4.5rem) !important;line-height:1.15 !important;
  color:#f4f4f0 !important;margin:0 0 .5em !important;border:0 !important;letter-spacing:0 !important;
}
#zs-uebersicht .flex-intro .zs-intro-p{
  font-family:'Poppins',sans-serif !important;font-weight:300 !important;font-size:16px !important;
  line-height:1.6 !important;color:rgba(255,255,255,.75) !important;margin:0 0 1em !important;
}

/* ---------- SEGMENT 3: FINISH & FORMAT (cream) ---------- */
#zs-uebersicht .flex-farben{
  background:#ebe8e2 !important;color:#111;padding:80px 0;text-align:center;
}
#zs-uebersicht .flex-farben-kopf{text-align:center;margin-bottom:40px;}
#zs-uebersicht .flex-farben-kopf h2{
  font-family:'Poppins',sans-serif !important;font-weight:200 !important;font-size:30px !important;
  letter-spacing:0.22em !important;color:#111 !important;margin:0 !important;border:0 !important;
}
#zs-uebersicht .flex-finish-grid{
  display:grid;grid-template-columns:repeat(2,1fr);gap:32px;max-width:1400px;margin:0 auto 48px;padding:0 6vw;box-sizing:border-box;
}
#zs-uebersicht .flex-finish-card{
  display:flex;flex-direction:column;align-items:center;cursor:pointer;background:transparent !important;border:0 !important;border-radius:0 !important;padding:0 !important;box-shadow:none !important;
}
#zs-uebersicht .flex-finish-card .zs-finish-imgwrap{
  width:100%;height:260px;display:flex;align-items:center;justify-content:center;overflow:hidden;
}
#zs-uebersicht .flex-finish-card img{
  height:220px;width:auto;max-width:100%;object-fit:contain;display:block;
  transition:transform 1200ms ease-out;
}
#zs-uebersicht .flex-finish-card:hover img{transform:scale(1.05);}
#zs-uebersicht .flex-finish-card .zs-finish-namewrap{text-align:center;margin-top:24px;transition:transform 700ms;}
#zs-uebersicht .flex-finish-card:hover .zs-finish-namewrap{transform:translateY(-4px);}
#zs-uebersicht .flex-finish-card h3{
  font-family:'Poppins',sans-serif !important;font-weight:200 !important;font-size:30px !important;
  letter-spacing:0.02em !important;color:#111 !important;margin:0 0 10px !important;border:0 !important;
}
#zs-uebersicht .flex-finish-card .zs-finish-line{
  width:32px;height:1px;background:rgba(17,17,17,.3);margin:0 auto;transition:all 700ms;
}
#zs-uebersicht .flex-finish-card:hover .zs-finish-line{width:64px;background:rgba(17,17,17,.6);}
#zs-uebersicht .flex-size-label{
  font-family:'Poppins',sans-serif !important;font-weight:300 !important;font-size:10px !important;
  letter-spacing:0.35em !important;text-transform:uppercase !important;color:#6b6b6b !important;
  text-align:center;margin:0 0 36px !important;
}
#zs-uebersicht .flex-size-grid{
  display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:24px;max-width:1250px;margin:0 auto;padding:72px 32px 0;box-sizing:border-box;align-items:start;
}
#zs-uebersicht .flex-size-card{
  display:flex;flex-direction:column;align-items:center;text-align:center;padding:8px 0;min-width:0;width:100%;
  background:transparent !important;border:0 !important;border-radius:0 !important;box-shadow:none !important;
  transition:transform 500ms;
}
#zs-uebersicht .flex-size-card:hover{transform:scale(1.03) translateY(-4px);}
#zs-uebersicht .flex-size-card .zs-size-svgwrap{
  height:110px;display:flex;align-items:flex-end;justify-content:center;width:100%;margin-bottom:14px;
}
#zs-uebersicht .flex-size-card .zs-size-svgwrap img{
  filter:brightness(0) saturate(0);height:auto;display:block;
}
#zs-uebersicht .flex-size-card .zs-size-dim{
  font-family:'Poppins',sans-serif !important;font-weight:400 !important;font-size:13px !important;
  letter-spacing:0 !important;color:#111 !important;margin:0 0 4px !important;
}
#zs-uebersicht .flex-size-card .zs-size-ipads{
  font-family:'Poppins',sans-serif !important;font-weight:300 !important;font-size:11px !important;
  line-height:1.5 !important;color:#555 !important;
}
#zs-uebersicht .flex-size-card .zs-size-ipads div{margin:0 !important;}

/* ---------- SEGMENT 4: FOYER (schwarz, object-cover center) ---------- */
#zs-uebersicht .flex-showcase{
  position:relative;height:100svh;min-height:600px;background:#000 !important;overflow:hidden;display:block;
}
#zs-uebersicht .flex-showcase img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center center;display:block;
}

/* ---------- SEGMENT 5: 360° (cream) ---------- */
#zs-uebersicht .flex-360{
  background:#ebe8e2 !important;color:#111;min-height:100svh;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:40px 0;
}
#zs-uebersicht .flex-360-stage{
  position:relative;max-width:1115px;width:100%;padding:0 6vw;box-sizing:border-box;cursor:grab;
  border:0 !important;border-radius:0 !important;background:transparent !important;
  touch-action:pan-y;user-select:none;-webkit-user-drag:none;
}
#zs-uebersicht .flex-360-stage img{
  width:100%;height:auto;display:block;pointer-events:none;
}
#zs-uebersicht .flex-360-label{
  font-family:'Poppins',sans-serif !important;font-weight:300 !important;font-size:16px !important;
  letter-spacing:0.2em !important;text-transform:uppercase !important;color:rgba(0,0,0,.6) !important;
  text-align:center;margin-top:24px;
}

/* ---------- SEGMENT 6: TECHNOLOGIE (schwarz, 2×2) ---------- */
#zs-uebersicht .flex-technik{
  background:#000000 !important;color:#fff;min-height:0;display:flex;align-items:center;justify-content:normal;padding:0;overflow:hidden;
}
#zs-uebersicht .flex-technik-inner{width:100%;max-width:1400px;margin:0 auto;padding:128px 6vw;min-height:100svh;box-sizing:border-box;}
#zs-uebersicht .flex-technik-kopf{max-width:768px;text-align:left;margin-bottom:48px;}
#zs-uebersicht .flex-technik-kopf .zs-tech-kicker{
  font-family:'Poppins',sans-serif !important;font-weight:300 !important;font-size:10px !important;
  letter-spacing:0.35em !important;text-transform:uppercase !important;color:rgba(255,255,255,.55) !important;
  display:block;margin:0 0 16px !important;
}
#zs-uebersicht .flex-technik-kopf h2{
  font-family:'Poppins',sans-serif !important;font-weight:200 !important;
  font-size:clamp(2.5rem,5vw,4.5rem) !important;line-height:1.1 !important;
  color:#e8e4dd !important;margin:0 !important;border:0 !important;letter-spacing:0 !important;
}
#zs-uebersicht .flex-technik-grid{
  display:grid;grid-template-columns:repeat(2,1fr);gap:1px;
  background:rgba(255,255,255,.06) !important;border:1px solid rgba(255,255,255,.06);
}
#zs-uebersicht .flex-tech-item{
  background:#000 !important;padding:32px;display:flex;flex-direction:column;gap:12px;
  border:0 !important;border-radius:0 !important;box-shadow:none !important;
}
#zs-uebersicht .flex-tech-item h3{
  font-family:'Poppins',sans-serif !important;font-weight:200 !important;font-size:20px !important;
  line-height:1.4 !important;color:#f4f4f0 !important;margin:0 !important;border:0 !important;
}
#zs-uebersicht .flex-tech-item p{
  font-family:'Poppins',sans-serif !important;font-weight:300 !important;font-size:14px !important;
  line-height:1.63 !important;color:rgba(255,255,255,.75) !important;margin:0 !important;
}

/* ---------- SEGMENT 7: ERWEITERUNGEN (cream, Header RECHTS) ---------- */
#zs-uebersicht .flex-ext{
  background:#ffffff !important;color:#111;min-height:0;height:auto;display:flex;flex-direction:column;justify-content:flex-start;align-items:stretch;padding:0;overflow:hidden;
}
#zs-uebersicht .flex-ext-inner{width:100%;max-width:1400px;margin:0 auto;padding:96px 6vw 128px;min-height:0;box-sizing:border-box;align-self:flex-start;}
#zs-uebersicht .flex-ext-kopf{max-width:672px;text-align:right;margin-left:auto;margin-bottom:48px;}
#zs-uebersicht .flex-ext-kopf .zs-ext-kicker{
  font-family:'Poppins',sans-serif !important;font-weight:300 !important;font-size:10px !important;
  letter-spacing:0.35em !important;text-transform:uppercase !important;color:#6b6b6b !important;
  display:block;margin:0 0 16px !important;
}
#zs-uebersicht .flex-ext-kopf h2{
  font-family:'Poppins',sans-serif !important;font-weight:200 !important;
  font-size:clamp(2.5rem,5vw,4.5rem) !important;line-height:1.1 !important;
  color:#111 !important;margin:0 !important;border:0 !important;letter-spacing:0 !important;
}
#zs-uebersicht .flex-ext-grid{
  display:grid;grid-template-columns:repeat(2,1fr);gap:48px;align-items:start;
}
#zs-uebersicht .flex-ext-card{
  display:flex;flex-direction:column;min-width:0;
  background:transparent !important;border:0 !important;border-radius:0 !important;box-shadow:none !important;padding:0 !important;
}
#zs-uebersicht .flex-ext-card .zs-ext-imgwrap{
  height:320px;display:flex;align-items:center;justify-content:center;margin-bottom:16px;overflow:hidden;
  background:#fff;border:1px solid rgba(17,17,17,.08);
}
#zs-uebersicht .flex-ext-card img{
  width:100%;height:100%;max-width:100%;object-fit:cover;object-position:center;display:block;
  transition:transform 500ms ease-out;
}
#zs-uebersicht .flex-ext-card:hover img{transform:scale(1.10);}
#zs-uebersicht .flex-ext-card h3{
  font-family:'Poppins',sans-serif !important;font-weight:200 !important;font-size:24px !important;
  letter-spacing:0.22em !important;color:#111 !important;margin:0 0 12px !important;border:0 !important;
}
#zs-uebersicht .flex-ext-card p{
  font-family:'Poppins',sans-serif !important;font-weight:300 !important;font-size:16px !important;
  line-height:1.63 !important;color:#333 !important;margin:0 !important;
}

/* Badges: Icon in 44x44 Kreis, wie Quelle */
#zs-uebersicht .flex-tech-item{
  position:relative;min-height:228px;
  content-visibility:visible !important;contain:none !important;
}
#zs-uebersicht .flex-tech-item::before{
  content:"";
  display:block;
  width:44px;height:44px;margin:0 0 14px;
  border-radius:50%;
  border:1px solid rgba(255,255,255,.15);
  background-color:transparent;
  background-size:18px 18px;
  background-repeat:no-repeat;
  background-position:center;
}
#zs-uebersicht .flex-tech-item:nth-child(1)::before{
  background-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%23f4f4f0" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M18 11V6a2 2 0 0 0-2-2a2 2 0 0 0-2 2"></path><path d="M14 10V4a2 2 0 0 0-2-2a2 2 0 0 0-2 2v2"></path><path d="M10 10.5V6a2 2 0 0 0-2-2a2 2 0 0 0-2 2v8"></path><path d="M18 8a2 2 0 1 1 4 0v6a8 8 0 0 1-8 8h-2c-2.8 0-4.5-.86-5.99-2.34l-3.6-3.6a2 2 0 0 1 2.83-2.82L7 15"></path></svg>');
}
#zs-uebersicht .flex-tech-item:nth-child(2)::before{
  background-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%23f4f4f0" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M6.3 20.3a2.4 2.4 0 0 0 3.4 0L12 18l-6-6-2.3 2.3a2.4 2.4 0 0 0 0 3.4Z"></path><path d="m2 22 3-3"></path><path d="M7.5 13.5 10 11"></path><path d="M10.5 16.5 13 14"></path><path d="m18 3-4 4h6l-4 4"></path></svg>');
}
#zs-uebersicht .flex-tech-item:nth-child(3)::before{
  background-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%23f4f4f0" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M12 2v20"></path><path d="m15 19-3 3-3-3"></path><path d="m19 9 3 3-3 3"></path><path d="M2 12h20"></path><path d="m5 9-3 3 3 3"></path><path d="m9 5 3-3 3 3"></path></svg>');
}
#zs-uebersicht .flex-tech-item:nth-child(4)::before{
  background-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%23f4f4f0" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><rect width="18" height="11" x="3" y="11" rx="2" ry="2"></rect><path d="M7 11V7a5 5 0 0 1 10 0v4"></path></svg>');
}
#zs-uebersicht .flex-technik-grid > p:empty{display:none !important;}
#zs-uebersicht .flex-tech-item p:empty{display:none !important;}

/* ---------- Mobile ---------- */
@media (max-width:1024px){
  #zs-uebersicht .flex-sec1 .zs-hero-bg img{max-width:70%;}
  #zs-uebersicht .flex-size-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;}
  #zs-uebersicht .flex-intro .zs-intro-text{max-width:70%;}
}
@media (max-width:760px){
  #zs-uebersicht .flex-sec1 .zs-hero-bg img{max-width:100%;opacity:.5;}
  #zs-uebersicht .flex-sec1 .zs-hero-text{max-width:90%;}
  #zs-uebersicht .flex-intro .zs-intro-text{max-width:100%;padding:0;}
  #zs-uebersicht .flex-finish-grid{grid-template-columns:1fr;}
  #zs-uebersicht .flex-size-grid{grid-template-columns:repeat(2,1fr);}
  #zs-uebersicht .flex-technik-grid{grid-template-columns:1fr;}
  #zs-uebersicht .flex-ext-grid{grid-template-columns:1fr;}
  #zs-uebersicht .flex-technik{padding:0;}
  #zs-uebersicht .flex-ext{padding:0;}
}
@media (min-width:768px){
  #zs-uebersicht .flex-finish-card .zs-finish-imgwrap{height:320px;}
  #zs-uebersicht .flex-finish-card img{height:280px;}
}
#zs-uebersicht p:empty{display:none !important;}



/* Hero-Bild direkt */
#zs-uebersicht .flex-sec1 .flex-hero-img{
  width:auto;height:auto;max-width:95%;max-height:95%;object-fit:contain;display:block;
  margin:0;transform:scale(0.8) translateX(-50px);transform-origin:center;
}