/* Online-Shop Banner */
/* ============================================================
   Online-Shop: Einstiegs-Banner (klappt in den Menuepunkt "Online-Shop")
   Wolfram Industrie Design System, sharp edges override:
   border-radius 0, keine Schatten, Rahmen nur in Neutralgrau.
   Typografie wie im Theme: Source Sans Pro 300 / 700.
   ============================================================ */

:root{
  --wi-gruen:#00847e;
  --wi-gruen-hover:#006d68;
  --wi-gruen-pressed:#00534f;
  --wi-grau-60:#d2d7d7;
  --wi-grau-20:#f0f2f2;
  --wi-negative:#c0392b;
  --wi-font:'Source Sans Pro',sans-serif;
  --wi-shop-top:120px;
  --wi-shop-right:0px;
  --wi-shop-img:url('https://wolfram-industrie.de/wp-content/uploads/2024/09/wolfram-industrie-schweiss-elektroden-orbistar-detail.jpg');
}

/* ---------- Inhalt ----------
   Die Sprachvariante liefert das Plugin selbst (DE- bzw. EN-Tab). Hier wird
   NICHT zusaetzlich nach html[lang] gefiltert: das Theme liefert auch unter
   /en/ ein lang="de", damit waere der englische Block unsichtbar. */
.wi-shop-banner__content{display:block;position:relative;z-index:1;}
/* Sicherheitsnetz, falls doch zwei Bloecke auf einer Seite landen */
.wi-shop-banner__content ~ .wi-shop-banner__content{display:none;}

/* ---------- Banner ---------- */
.wi-shop-banner[hidden]{display:none !important;}

.wi-shop-banner{
  position:fixed;
  top:var(--wi-shop-top);
  right:var(--wi-shop-right,0px);
  z-index:60;
  width:820px;
  max-width:calc(100vw - var(--wi-shop-right,0px) - 24px);
  box-sizing:border-box;
  padding:64px 72px 68px;
  background-color:var(--wi-gruen-pressed);
  background-image:
    linear-gradient(103deg,
      rgba(0,83,79,.94) 0%,
      rgba(0,83,79,.90) 58%,
      rgba(0,132,126,.66) 82%,
      rgba(0,132,126,.46) 100%),
    var(--wi-shop-img);
  background-repeat:no-repeat,no-repeat;
  background-size:cover,cover;
  background-position:center,82% 42%;
  border:0;
  border-radius:0;
  box-shadow:none;
  overflow:hidden;
  font-family:var(--wi-font);
  transform-origin:100% 0;
  will-change:transform,opacity;
}
.wi-shop-banner *{border-radius:0 !important;box-shadow:none !important;text-shadow:none !important;}

.wi-shop-banner.is-entering{animation:wi-shop-in 420ms cubic-bezier(.16,.84,.44,1) both;}
@keyframes wi-shop-in{
  from{opacity:0;transform:translate3d(0,-18px,0);}
  to{opacity:1;transform:none;}
}
/* Auf- und Zuklappen wird per JS animiert (Inline-Transition). */

.wi-shop-banner__close{
  position:absolute;
  top:0;
  right:0;
  z-index:2;
  width:46px;
  height:46px;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:0;
  margin:0;
  background:transparent;
  border:0;
  border-radius:0;
  box-shadow:none;
  cursor:pointer;
  opacity:.8;
  transition:opacity 150ms ease-out,background-color 150ms ease-out;
}
.wi-shop-banner__close:hover{opacity:1;background:rgba(0,83,79,.75);}
.wi-shop-banner__close:focus-visible{outline:2px solid #ffffff;outline-offset:-4px;}
.wi-shop-banner__close svg{width:16px;height:16px;}
.wi-shop-banner__close svg path{stroke:#ffffff;stroke-width:1.8;fill:none;}

/* ---------- Banner-Typografie (Theme-Skala) ---------- */
.wi-shop-banner__title{
  margin:0 0 18px;
  font-family:var(--wi-font);
  font-size:48px;
  font-weight:700;
  line-height:56px;
  text-transform:uppercase;
  letter-spacing:normal;
  color:#ffffff;
  hyphens:none;
}

/* "LIVE"-Badge im Titel: rotes Blockzeichen mit Kamera-Nase */
.wi-shop-banner__title .wi-shop-live{
  display:inline-block;
  margin-left:.14em;
  padding:.10em .74em .10em .40em;
  background:var(--wi-negative);
  color:#ffffff;
  font-size:.70em;
  font-weight:700;
  line-height:1.18;
  letter-spacing:.04em;
  text-transform:uppercase;
  vertical-align:.06em;
  border:0;
  border-radius:0;
  box-shadow:none;
  -webkit-clip-path:polygon(0 0, calc(100% - .44em) 0, calc(100% - .44em) 30%, 100% 4%, 100% 96%, calc(100% - .44em) 70%, calc(100% - .44em) 100%, 0 100%);
  clip-path:polygon(0 0, calc(100% - .44em) 0, calc(100% - .44em) 30%, 100% 4%, 100% 96%, calc(100% - .44em) 70%, calc(100% - .44em) 100%, 0 100%);
}
.wi-shop-banner__text{
  margin:0 0 32px;
  max-width:none;
  text-wrap:balance;
  font-family:var(--wi-font);
  font-size:20px;
  font-weight:300;
  line-height:32px;
  color:rgba(255,255,255,.95);
}

.wi-shop-banner__cta{
  display:inline-block;
  box-sizing:border-box;
  min-width:240px;
  padding:14px 28px;
  background:#ffffff;
  color:var(--wi-gruen) !important;
  border:0;
  border-radius:0;
  box-shadow:none;
  font-family:var(--wi-font);
  font-size:17px;
  font-weight:700;
  line-height:27px;
  letter-spacing:normal;
  text-align:center;
  text-transform:uppercase;
  text-decoration:none !important;
  transition:background-color 150ms ease-out,color 150ms ease-out;
}
.wi-shop-banner__cta:hover{background:var(--wi-grau-20);color:var(--wi-gruen-hover) !important;}
.wi-shop-banner__cta:active{background:var(--wi-grau-60);color:var(--wi-gruen-pressed) !important;}
.wi-shop-banner__cta:focus-visible{outline:2px solid #ffffff;outline-offset:2px;}

@media (max-width:1280px){
  .wi-shop-banner{width:640px;padding:48px 52px 52px;}
  .wi-shop-banner__title{font-size:36px;line-height:42px;}
  .wi-shop-banner__text{font-size:18px;line-height:28px;margin-bottom:26px;}
}
@media (max-width:760px){
  .wi-shop-banner{left:0;right:0;width:auto;max-width:none;padding:32px 26px 34px;}
  .wi-shop-banner__title{font-size:28px;line-height:34px;margin-bottom:12px;}
  .wi-shop-banner__text{font-size:17px;line-height:26px;margin-bottom:22px;max-width:34ch;}
  .wi-shop-banner__cta{min-width:0;width:100%;}
}

@media (prefers-reduced-motion:reduce){
  .wi-shop-banner.is-entering{animation:none !important;}
}

@media print{.wi-shop-banner{display:none !important;}}


/* ---------- Sichtbarer Shop-Link im Titel (Google-Sichtbarkeit) ---------- */
.wi-shop-banner__title .wi-shop-banner__url{
  display:inline-block;
  margin-left:.24em;
  color:#ffffff !important;
  font-family:var(--wi-font);
  font-size:.40em;
  font-weight:400;
  line-height:1.2;
  letter-spacing:normal;
  text-transform:none;
  vertical-align:.34em;
  border:0;
  border-radius:0;
  box-shadow:none;
  text-decoration:underline !important;
  text-underline-offset:3px;
  text-decoration-thickness:1px;
  transition:opacity 150ms ease-out;
}
.wi-shop-banner__title .wi-shop-banner__url:hover{opacity:.72;}
.wi-shop-banner__title .wi-shop-banner__url:focus-visible{outline:2px solid #ffffff;outline-offset:2px;}

@media (max-width:760px){
  .wi-shop-banner__title .wi-shop-banner__url{
    display:block;
    margin-left:0;
    margin-top:.30em;
    vertical-align:baseline;
    font-size:.46em;
  }
}

/* ---------- Menuepunkt "Online-Shop" (MainNav.astro) ----------
   Ein normaler Menuepunkt mit dem Stil des Themes. Zwischen 1281px und
   1399px passen sechs Punkte nicht in die festen Breiten des Themes: dort
   nimmt jeder Punkt seine natuerliche Breite, mit gleichem Abstand, damit
   das Menue eine Zeile bleibt (darunter ist es ohnehin im Burger-Menue). */
@media (min-width:1281px) and (max-width:1399px){
  #main-menu ul.main-level{margin-right:60px;}
  #main-menu ul.main-level > li{width:auto;margin-left:20px;padding-right:0;}
}