/* Winteredition-Startbereich für vino-neustadt.at (Plugin „Winteredition-Startseite“).
   Gilt nur, solange <body> die Klasse vn-we-aktiv trägt (Startseite, bis zum Event).
   Design: winteredition.at – Nachtblau, Polarlicht, Schnee, Poiret One + Jost.

   Aufbau im Theme (OnePress, Layout 1):
   #hero > .container > .hero__content
     h2.hero-large-text   → Logo + „Powered by“ Sparkasse   (rechts / am Handy oben)
     div.hero-small-text  → Datum, Zeile, Eckdaten          (links)
     div.vn-we-btns       → die zwei Buttons (setzt startseite.js)
     p.vn-we-countdown    → „Noch X Tage“ (setzt startseite.js) */

@font-face {
  font-family: "VN WE Poiret One";
  src: url("../fonts/poiret-one-latin.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "VN WE Jost";
  src: url("../fonts/jost-latin.woff2") format("woff2");
  font-weight: 300 600;
  font-style: normal;
  font-display: swap;
}

body.vn-we-aktiv #hero {
  --vn-we-ice-200: #cfdff5;
  --vn-we-ice-300: #a9c6ef;
  --vn-we-berry: #c86a86;
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background: linear-gradient(180deg, #060b1c 0%, #0b1430 34%, #131f4a 70%, #1b2b60 100%) !important;
  color: #eef2fb;
  font-family: "VN WE Jost", "Avenir Next", "Helvetica Neue", Arial, sans-serif;
}
/* Weinberg-Foto des normalen Hero aus */
body.vn-we-aktiv #hero .backstretch { display: none !important; }

/* Polarlicht */
body.vn-we-aktiv #hero::before {
  content: "";
  position: absolute;
  inset: -10% -10% auto;
  height: 75%;
  z-index: 0;
  background:
    radial-gradient(38% 42% at 22% 30%, rgba(64, 100, 190, .55), transparent 70%),
    radial-gradient(34% 40% at 74% 22%, rgba(150, 120, 230, .28), transparent 70%),
    radial-gradient(40% 36% at 55% 48%, rgba(96, 140, 214, .30), transparent 72%);
  filter: blur(40px);
  pointer-events: none;
}
/* Schneewehe unten – Übergang in den hellen Abschnitt „Über uns“ (#f8f9f9) */
body.vn-we-aktiv #hero::after {
  content: "" !important;
  position: absolute !important;
  top: auto !important;
  left: 0 !important;
  right: 0 !important;
  bottom: -1px !important;
  width: 100% !important;
  height: clamp(40px, 7vw, 110px) !important;
  z-index: 1;
  background-color: transparent !important;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 120' preserveAspectRatio='none'%3E%3Cpath fill='%23f8f9f9' fill-opacity='.35' d='M0,64 C240,18 480,102 720,70 C960,38 1200,92 1440,48 L1440,121 L0,121 Z'/%3E%3Cpath fill='%23f8f9f9' d='M0,88 C260,42 520,112 760,86 C1000,60 1240,102 1440,74 L1440,121 L0,121 Z'/%3E%3C/svg%3E");
  pointer-events: none;
}
body.vn-we-aktiv #hero .vn-we-snow {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
body.vn-we-aktiv #hero .container {
  position: relative;
  z-index: 2;
}

/* ---------- Raster: links Text, rechts Logo ---------- */
/* OnePress setzt den kleinen Hero-Text kursiv – hier alles aufrecht */
body.vn-we-aktiv #hero .hero__content,
body.vn-we-aktiv #hero .hero__content * { font-style: normal; }
body.vn-we-aktiv #hero .hero__content {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
  grid-template-areas:
    "text  brand"
    "btns  brand"
    "cd    brand";
  grid-template-rows: auto auto 1fr;
  align-items: center;
  column-gap: clamp(32px, 6vw, 96px);
  max-width: 1080px;
  margin: 0 auto;
  padding-bottom: clamp(48px, 7vw, 100px); /* Platz über der Schneewehe */
  text-align: left;
}
body.vn-we-aktiv #hero .hero-small-text { grid-area: text; align-self: end; }
body.vn-we-aktiv #hero .vn-we-btns      { grid-area: btns; }
body.vn-we-aktiv #hero .vn-we-countdown { grid-area: cd; align-self: start; justify-self: start; }
body.vn-we-aktiv #hero .hero-large-text { grid-area: brand; }

/* ---------- Logo + „Powered by“ ---------- */
body.vn-we-aktiv #hero .hero-large-text {
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  font-size: 1rem;
  line-height: 1;
  text-transform: none;
  letter-spacing: 0;
  color: #fff;
}
body.vn-we-aktiv #hero .vn-we-logo {
  display: block;
  width: auto;
  height: clamp(190px, 33vh, 320px);
  max-width: 100%;
  filter: drop-shadow(0 10px 40px rgba(127, 168, 224, .25));
}
body.vn-we-aktiv #hero .vn-we-powered {
  margin-top: clamp(14px, 2.4vh, 24px);
  display: flex;
  flex-direction: column;
  align-items: center;
}
/* Eis-Linie mit Flocke – wie auf winteredition.at und im App-Splash */
body.vn-we-aktiv #hero .vn-we-rule {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 230px;
  max-width: 78vw;
  height: 22px;
}
body.vn-we-aktiv #hero .vn-we-rule::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 1.4px;
  background: linear-gradient(90deg, rgba(169, 198, 239, 0), rgba(169, 198, 239, .78), rgba(169, 198, 239, 0));
}
body.vn-we-aktiv #hero .vn-we-flake {
  position: relative;
  display: block;
  width: 33px;
  height: 17px;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a9c6ef' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3v18M5.2 7.5l13.6 9M5.2 16.5l13.6-9'/%3E%3Cpath d='m12 3-1.8 1.8M12 3l1.8 1.8M12 21l-1.8-1.8M12 21l1.8-1.8'/%3E%3C/svg%3E") center / 17px 17px no-repeat,
    linear-gradient(90deg, rgba(14, 24, 56, 0), rgba(14, 24, 56, .9), rgba(14, 24, 56, 0));
}
body.vn-we-aktiv #hero .vn-we-powered-label {
  margin-top: 10px;
  font-family: "VN WE Jost", "Avenir Next", Arial, sans-serif;
  font-size: .69rem;
  font-weight: 600;
  letter-spacing: .23em;
  text-transform: uppercase;
  color: var(--vn-we-ice-300);
}
body.vn-we-aktiv #hero .vn-we-powered-logo {
  display: block;
  margin-top: 10px;
  width: clamp(150px, 13vw, 200px);
  height: auto;
  filter: drop-shadow(0 10px 26px rgba(7, 13, 31, .45));
}

/* ---------- Text links ---------- */
body.vn-we-aktiv #hero .hero-small-text {
  margin: 0;
  color: rgba(238, 242, 251, .88);
  text-align: inherit; /* Theme zentriert den kleinen Hero-Text */
}
body.vn-we-aktiv #hero .hero-small-text p { margin: 0; text-align: inherit; }
body.vn-we-aktiv #hero .vn-we-kicker {
  display: flex;
  align-items: center;
  gap: 14px;
  font-family: "VN WE Jost", "Avenir Next", Arial, sans-serif;
  font-size: clamp(.72rem, 1.2vw, .86rem);
  font-weight: 600;
  letter-spacing: .32em;
  text-transform: uppercase;
  color: var(--vn-we-ice-300);
}
body.vn-we-aktiv #hero .vn-we-kicker::before {
  content: "";
  width: 34px;
  height: 1px;
  background: currentColor;
  opacity: .6;
}
body.vn-we-aktiv #hero .vn-we-lead {
  margin-top: 16px !important;
  font-family: "VN WE Poiret One", "Century Gothic", Futura, sans-serif;
  font-size: clamp(2rem, 3.6vw, 3.2rem);
  font-weight: 400;
  letter-spacing: .03em;
  line-height: 1.12;
  color: #fff;
  text-wrap: balance;
}
body.vn-we-aktiv #hero .vn-we-facts {
  margin-top: 18px !important;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 22px;
  font-size: clamp(.92rem, 1.3vw, 1.05rem);
  font-weight: 300;
  letter-spacing: .02em;
}
body.vn-we-aktiv #hero .vn-we-facts span {
  display: inline-flex;
  align-items: center;
  gap: 9px;
}
body.vn-we-aktiv #hero .vn-we-facts span::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--vn-we-ice-300);
  opacity: .8;
}

/* ---------- Buttons: Pillen wie auf winteredition.at ---------- */
body.vn-we-aktiv #hero .vn-we-btns {
  margin-top: clamp(24px, 3.6vh, 34px);
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
body.vn-we-aktiv #hero .hero__content .btn {
  margin: 0;
  padding: 14px 28px;
  border-radius: 999px;
  font-family: "VN WE Jost", "Avenir Next", Arial, sans-serif;
  font-size: 1rem;
  font-weight: 500;
  letter-spacing: .02em;
  text-transform: none;
  line-height: 1.2;
  transition: transform .22s cubic-bezier(.22, .61, .36, 1), background-color .22s ease, color .22s ease, border-color .22s ease;
}
body.vn-we-aktiv #hero .hero__content .btn-theme-primary {
  background: #fff;
  border: 1px solid #fff;
  color: #0b1430;
}
body.vn-we-aktiv #hero .hero__content .btn-theme-primary:hover,
body.vn-we-aktiv #hero .hero__content .btn-theme-primary:focus {
  background: var(--vn-we-ice-200);
  border-color: var(--vn-we-ice-200);
  color: #0b1430;
  transform: translateY(-2px);
}
body.vn-we-aktiv #hero .hero__content .btn-secondary-outline {
  background: rgba(238, 242, 251, .06);
  border: 1px solid rgba(238, 242, 251, .45);
  color: #eef2fb;
}
body.vn-we-aktiv #hero .hero__content .btn-secondary-outline:hover,
body.vn-we-aktiv #hero .hero__content .btn-secondary-outline:focus {
  background: rgba(238, 242, 251, .16);
  border-color: rgba(238, 242, 251, .8);
  color: #fff;
  transform: translateY(-2px);
}
body.vn-we-aktiv #hero .hero__content .btn:focus-visible {
  outline: 2px solid var(--vn-we-ice-300);
  outline-offset: 3px;
}

/* ---------- Countdown ---------- */
body.vn-we-aktiv #hero .vn-we-countdown {
  margin: clamp(18px, 3vh, 26px) 0 0;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 7px 16px;
  border-radius: 999px;
  background: rgba(238, 242, 251, .08);
  border: 1px solid rgba(238, 242, 251, .2);
  font-size: .9rem;
  font-weight: 400;
  letter-spacing: .04em;
  color: rgba(238, 242, 251, .9);
}
body.vn-we-aktiv #hero .vn-we-countdown strong { font-weight: 600; color: #fff; }
body.vn-we-aktiv #hero .vn-we-countdown::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--vn-we-berry);
  box-shadow: 0 0 0 4px rgba(200, 106, 134, .22);
}

/* ---------- Tablet & Handy: eine Spalte, Logo oben, alles mittig ---------- */
@media (max-width: 860px) {
  /* Der Inhalt bestimmt die Höhe – nichts wird abgeschnitten. Das Theme
     zentriert .container per top:50% + translateY(-50%); bei automatischer
     Höhe greift top:50% nicht mehr, die Verschiebung aber schon – der
     Inhalt rutschte um die halbe Höhe nach oben. Darum beides aus. */
  body.vn-we-aktiv #hero { height: auto !important; min-height: 0 !important; }
  body.vn-we-aktiv #hero .container {
    top: auto !important;
    transform: none !important;
    padding-top: clamp(28px, 6vw, 48px);
  }
  body.vn-we-aktiv #hero .hero__content {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "brand" "text" "btns" "cd";
    grid-template-rows: none;
    justify-items: center;
    text-align: center;
    padding-bottom: clamp(64px, 14vw, 100px);
  }
  body.vn-we-aktiv #hero .hero-small-text { margin-top: 26px; }
  body.vn-we-aktiv #hero .vn-we-kicker { justify-content: center; }
  body.vn-we-aktiv #hero .vn-we-kicker::after {
    content: "";
    width: 34px;
    height: 1px;
    background: currentColor;
    opacity: .6;
  }
  body.vn-we-aktiv #hero .vn-we-facts { justify-content: center; }
  body.vn-we-aktiv #hero .vn-we-btns { justify-content: center; }
  body.vn-we-aktiv #hero .vn-we-countdown { justify-self: center; }
}

@media (max-width: 560px) {
  body.vn-we-aktiv #hero .vn-we-logo { height: clamp(150px, 42vw, 200px); }
  body.vn-we-aktiv #hero .vn-we-powered { margin-top: 12px; }
  body.vn-we-aktiv #hero .vn-we-rule { width: 190px; }
  body.vn-we-aktiv #hero .vn-we-powered-logo { width: 140px; margin-top: 8px; }
  body.vn-we-aktiv #hero .vn-we-kicker { gap: 10px; letter-spacing: .22em; font-size: .72rem; }
  body.vn-we-aktiv #hero .vn-we-kicker::before,
  body.vn-we-aktiv #hero .vn-we-kicker::after { width: 20px; }
  body.vn-we-aktiv #hero .vn-we-lead { margin-top: 12px !important; font-size: 1.7rem; }
  body.vn-we-aktiv #hero .vn-we-facts { margin-top: 14px !important; gap: 6px 16px; font-size: .92rem; }
  /* Buttons untereinander, gleich breit, gut zu treffen */
  body.vn-we-aktiv #hero .vn-we-btns { flex-direction: column; align-items: stretch; width: min(100%, 300px); gap: 10px; }
  body.vn-we-aktiv #hero .hero__content .btn { padding: 14px 20px; text-align: center; }
}

@media (prefers-reduced-motion: reduce) {
  body.vn-we-aktiv #hero .hero__content .btn { transition: none; }
}