@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 one – Nachbau standed.de/de/one (v6)
   Dunkle Sektionen: Hero, Intro, Office, Technologie
   Helle/Cream-Sektionen: Finish&Format, 360°, Erweiterungen
   ============================================================ */

/* 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;
}

/* Alle Full-Width-Sektionen */
#zs-uebersicht .kiosk-sec1,
#zs-uebersicht .kiosk-intro,
#zs-uebersicht .kiosk-farben,
#zs-uebersicht .kiosk-showcase,
#zs-uebersicht .kiosk-360,
#zs-uebersicht .kiosk-technik,
#zs-uebersicht .kiosk-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 .kiosk-sec1,
  #zs-uebersicht .kiosk-intro,
  #zs-uebersicht .kiosk-farben,
  #zs-uebersicht .kiosk-showcase,
  #zs-uebersicht .kiosk-360,
  #zs-uebersicht .kiosk-technik,
  #zs-uebersicht .kiosk-ext {
    margin-left:calc(50% - 50vw + 16px) !important;
    margin-right:calc(50% - 50vw - 16px) !important;
  }
}

/* ---------- SEGMENT 1: HERO (dunkel, Bild LINKS, Text RECHTS) ---------- */
#zs-uebersicht .kiosk-sec1{
  position:relative;height:100svh;min-height:640px;background:#000000 !important;color:#fafafa;overflow:hidden;display:flex;align-items:stretch;
}
#zs-uebersicht .kiosk-sec1 .zs-hero-bg{
  position:absolute;top:0;bottom:0;left:0;z-index:1;width:55%;display:flex;align-items:center;justify-content:center;overflow:hidden;
}
#zs-uebersicht .kiosk-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.756) translateX(50px) translateY(-20px);
  transform-origin:center;
}
#zs-uebersicht .kiosk-sec1 .zs-hero-grad{
  position:absolute;inset:0;z-index:2;pointer-events:none;
  background:linear-gradient(to left, rgba(0,0,0,0.3) 0%, rgba(0,0,0,0.1) 50%, rgba(0,0,0,0) 100%);
}
#zs-uebersicht .kiosk-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-end;
}
@media (min-width:768px){
  #zs-uebersicht .kiosk-sec1 .zs-hero-content{padding:0 64px;}
}
#zs-uebersicht .kiosk-sec1 .zs-hero-text{max-width:48%;text-align:right;display:flex;flex-direction:column;align-items:flex-end;margin-left:auto;}
#zs-uebersicht .kiosk-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 .kiosk-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 .kiosk-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 .kiosk-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 .kiosk-sec1 .zs-scroll svg{width:34px;height:auto;}

/* ---------- SEGMENT 2: INTRO (schwarz, Produktbild rechts, Text links) ---------- */
#zs-uebersicht .kiosk-intro{
  position:relative;background:#000000 !important;color:#f4f2ee;overflow:hidden;
  min-height:70vh;display:flex;align-items:center;
}
#zs-uebersicht .kiosk-intro .zs-intro-bg{
  position:absolute;inset:0;z-index:0;
}
#zs-uebersicht .kiosk-intro .zs-intro-bg{
  position:absolute;inset:0;z-index:0;display:block;
}
#zs-uebersicht .kiosk-intro .zs-intro-bg img{
  width:100%;height:100%;object-fit:contain;object-position:center;display:block;
  transform:scale(1.4) translateX(40px) translateY(-75px);
}
#zs-uebersicht .kiosk-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;
}
#zs-uebersicht .kiosk-intro .zs-intro-text{
  width:100%;max-width:48%;text-align:left;padding:0;
}
#zs-uebersicht .kiosk-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 .kiosk-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 .kiosk-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, kleine Bilder, SVG-Outlines) ---------- */
#zs-uebersicht .kiosk-farben{
  background:#ebe8e2 !important;color:#111;padding:80px 0;text-align:center;
}
#zs-uebersicht .kiosk-farben-kopf{text-align:center;margin-bottom:40px;}
#zs-uebersicht .kiosk-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 .kiosk-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 .kiosk-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 .kiosk-finish-card .zs-finish-imgwrap{
  width:100%;height:260px;display:flex;align-items:center;justify-content:center;overflow:hidden;
}
#zs-uebersicht .kiosk-finish-card img{
  height:220px;width:auto;max-width:100%;object-fit:contain;display:block;
  transition:transform 1200ms ease-out;
}
#zs-uebersicht .kiosk-finish-card:hover img{transform:scale(1.05);}
#zs-uebersicht .kiosk-finish-card .zs-finish-namewrap{text-align:center;margin-top:24px;transition:transform 700ms;}
#zs-uebersicht .kiosk-finish-card:hover .zs-finish-namewrap{transform:translateY(-4px);}
#zs-uebersicht .kiosk-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 .kiosk-finish-card .zs-finish-line{
  width:32px;height:1px;background:rgba(17,17,17,.3);margin:0 auto;transition:all 700ms;
}
#zs-uebersicht .kiosk-finish-card:hover .zs-finish-line{width:64px;background:rgba(17,17,17,.6);}
#zs-uebersicht .kiosk-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 24px !important;
}
#zs-uebersicht .kiosk-size-grid{
  display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:32px;max-width:1400px;margin:0 auto;padding:0 6vw;box-sizing:border-box;align-items:start;
}
#zs-uebersicht .kiosk-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 .kiosk-size-card:hover{transform:scale(1.03) translateY(-4px);}
#zs-uebersicht .kiosk-size-card .zs-size-svgwrap{
  height:130px;display:flex;align-items:flex-end;justify-content:center;width:100%;margin-bottom:8px;overflow:hidden;
}
#zs-uebersicht .kiosk-size-card svg{height:auto;color:#111;display:block;max-width:100%;}
#zs-uebersicht .kiosk-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 .kiosk-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 .kiosk-size-card .zs-size-ipads div{margin:0 !important;}

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

/* ---------- SEGMENT 5: 360° (cream, kein Border, Auto-Rotation) ---------- */
#zs-uebersicht .kiosk-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 .kiosk-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 .kiosk-360-stage img{
  width:100%;height:auto;display:block;pointer-events:none;
}
#zs-uebersicht .kiosk-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 Tabelle mit feinen Linien) ---------- */
#zs-uebersicht .kiosk-technik{
  background:#000000 !important;color:#fff;min-height:0;display:flex;align-items:center;justify-content:normal;padding:0;overflow:hidden;
}
#zs-uebersicht .kiosk-technik-inner{width:100%;max-width:1400px;margin:0 auto;padding:128px 6vw;min-height:100svh;box-sizing:border-box;}
#zs-uebersicht .kiosk-technik-kopf{max-width:768px;text-align:left;margin-bottom:48px;}
#zs-uebersicht .kiosk-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 .kiosk-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 .kiosk-technik-grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:1px;
  background:rgba(255,255,255,.06) !important;border:1px solid rgba(255,255,255,.06);
}
#zs-uebersicht .kiosk-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 .kiosk-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 .kiosk-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, horizontal, keine Boxen) ---------- */
#zs-uebersicht .kiosk-ext{
  background:#ebe8e2 !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 .kiosk-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 .kiosk-ext-kopf{max-width:672px;text-align:right;margin-left:auto;margin-bottom:48px;}
#zs-uebersicht .kiosk-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 .kiosk-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 .kiosk-ext-grid{
  display:grid;grid-template-columns:repeat(2,1fr);gap:48px;align-items:start;
}
#zs-uebersicht .kiosk-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 .kiosk-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 .kiosk-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 .kiosk-ext-card:hover img{transform:scale(1.10);}
#zs-uebersicht .kiosk-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 .kiosk-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;
}

/* ---------- Mobile ---------- */
@media (max-width:1024px){
  #zs-uebersicht .kiosk-sec1 .zs-hero-bg img{max-width:70%;}
  #zs-uebersicht .kiosk-size-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;}
  #zs-uebersicht .kiosk-intro .zs-intro-text{max-width:70%;}
}
@media (max-width:760px){
  #zs-uebersicht .kiosk-sec1 .zs-hero-bg img{max-width:100%;opacity:.5;}
  #zs-uebersicht .kiosk-sec1 .zs-hero-text{max-width:90%;}
  #zs-uebersicht .kiosk-intro .zs-intro-text{max-width:100%;padding:0;}
  #zs-uebersicht .kiosk-finish-grid{grid-template-columns:1fr;}
  #zs-uebersicht .kiosk-size-grid{grid-template-columns:repeat(2,1fr);}
  #zs-uebersicht .kiosk-technik-grid{grid-template-columns:1fr;}
  #zs-uebersicht .kiosk-ext-grid{grid-template-columns:1fr;}
  #zs-uebersicht .kiosk-technik{padding:0;}
  #zs-uebersicht .kiosk-ext{padding:0;}
}
/* Desktop-Feinjustierung (muss nach den Mobile-Queries kommen) */
@media (min-width:768px){
  #zs-uebersicht .kiosk-finish-card .zs-finish-imgwrap{height:320px;}
  #zs-uebersicht .kiosk-finish-card img{height:280px;}
}

/* wpautop-Artefakte: leere <p> ohne Inhalt entfernen (stören Flex/Sektionen) */
#zs-uebersicht p:empty{display:none !important;}
/* ============================================================
   VIVEROO one – Technik-Zellen Icon-Badges (CSS-only Nachbau der Quelle)
   Badge 44x44, rounded-full, border-white/15, Icon in currentColor
   ============================================================ */

/* Basis-Badge fuer alle Tech-Zellen */
#zs-uebersicht .kiosk-tech-item{
  position:relative;
  min-height:228px;
}

/* Gegen content-visibility/containment der Seite (sonst wird 2. Zeile nicht gerendert) */
#zs-uebersicht .kiosk-tech-item,
#zs-uebersicht .kiosk-technik-grid{
  content-visibility:visible !important;
  contain:none !important;
}

/* Badge-Container oben links in jeder Zelle (wie Quelle: badge + h3 + p) */
#zs-uebersicht .kiosk-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;
}

/* Icons je Zelle – Badge-PNG als Hintergrund (44x44, Kreis+Icon im Bild) */





/* Leeres <p> in den Zellen entfernen (wpautop) */
#zs-uebersicht .kiosk-technik-grid > p:empty{display:none !important;}
#zs-uebersicht .kiosk-tech-item p:empty{display:none !important;}

/* Auf Mobile kleinere Badges wie Quelle (md:w-11) * /
/* (Kein Stick – Quelle nutzt 44px auch auf Mobile, bis Sm.) */



/* Icons je Zelle – Lucide-SVG (Laden=sicher, sicher=shield, Tischständer=hand) */
#zs-uebersicht .kiosk-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="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 .kiosk-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="M20 13c0 5-3.5 7.5-7.66 8.95a1 1 0 0 1-.67-.01C7.5 20.5 4 18 4 13V6a1 1 0 0 1 1-1c2 0 4.5-1.2 6.24-2.72a1.17 1.17 0 0 1 1.52 0C14.51 3.81 17 5 19 5a1 1 0 0 1 1 1z"></path></svg>');
}
#zs-uebersicht .kiosk-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="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>');
}

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