/** Shopify CDN: Minification failed

Line 693:43 Unexpected "*"

**/
/* VIOLEX – Luxury Brand Theme (Navigation + Homepage Startscreen) */

:root {
  /* ── Marken-Grundfarben (29.08.2026) ──────────────────────────────────────
     Die beiden Werte aus der Markenvorgabe, bisher ueberall als Literal
     wiederholt: #fdf8ee kommt 41-mal im Theme vor, #140a1f 42-mal. Ab jetzt
     als globale Tokens, damit "das Creme-Weiss" und "das Violett" eine
     einzige Quelle haben. Bewusst NICHT #f8f7f2 (nur 9 Vorkommen, der
     leicht andere Ton der Navigationsleiste) - gemeint ist das Creme-Weiss
     der Marke.

     Bestehende Literale sind absichtlich nicht flaechendeckend ersetzt: das
     waere eine Umbauaktion quer durch alle Dateien mit entsprechendem
     Regressionsrisiko. Neue Regeln sollten die Tokens verwenden. */
  --violex-cream: #fdf8ee;
  --violex-violet: #140a1f;

  --violex-bg-deep: #130419;
  --violex-bg-mid: #1a0620;
  --violex-bg-glow: #3a0a45;
  --violex-nav-bg: #0a0210;
  --violex-gold: #d6b35a;
  --violex-gold-soft: rgba(214, 179, 90, 0.45);
  --violex-gold-bright: #f3d26b;

  /* Metallischer Gold-Verlauf fuer Schrift. Die Stops sind aus den echten
     Gold-Toenen der Grafiken gemessen (Spade-Raender + Rose-Emblem), nicht
     geschaetzt - deshalb blasser und gelblicher statt orange-gesaettigt. */
  --violex-gold-metal: linear-gradient(
    180deg,
    #fef8dc 0%,
    #fcefcc 25%,
    #dfc392 50%,
    #be9f71 78%,
    #ddc08e 100%
  );

  /* Poliertes Gold fuer grosse Schrift. Struktur ist aus einem Querschnitt
     durch die echten Goldraender gemessen (violex-edition-spade.png): dort
     faellt die Helligkeit vom Glanzlicht L=244 innerhalb von 3 px auf L=51
     und steigt weiter innen nochmal auf L=197 - dieser harte Wechsel und das
     zweite Glanzlicht sind es, was "glaenzend" ausmacht. Ein weicher Verlauf
     wie oben wirkt dagegen matt. Die dunklen Baender sind bewusst kurz und
     bleiben goldbraun statt schwarz, damit die Schrift lesbar bleibt. */
  --violex-gold-metal-strong: linear-gradient(
    180deg,
    #fffdf0 0%,
    #ffffff 8%,
    #ffeeae 22%,
    #f0cc63 34%,
    #d9ad48 46%,
    #f5da85 58%,
    #fffaea 68%,
    #e3bb59 82%,
    #ffe9a6 100%
  );
}

/* ---------- Navigation im Editions-Look (jetzt ueberall, 29.08.2026) ----------

   Bis 28.08.2026 gab es zwei Nav-Varianten: dunkler Gold-Look als Standard,
   cremefarbener "Editions-Look" (Wortmarke statt Rosen-Emblem, kein
   Dashboard-Link) nur auf Day/Night Edition + den Night-Utility-Seiten
   (Contact/Thank-You/Privacy/Legal). Wunsch Tomas (29.08.2026): der
   Editions-Look soll die EINZIGE Nav-Variante sein, ueberall. Die frueher
   editionsspezifischen Regeln (siehe Git-Historie violex-edition.css, Block
   "Nav-Bar im Editions-Look") sind daher hier zur neuen Basis geworden, ohne
   Body-Klassen-Bedingung - .vxnav-wordmark & Co. sind aus violex-edition.css
   hierher gewandert. */
.violex-nav {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 100;
  background: #f8f7f2;
  border-bottom: 1px solid rgba(20, 10, 31, 0.12);
  transition: transform 0.35s cubic-bezier(0.25, 0.8, 0.25, 1);
}

/* Die goldene Zierlinie gehoerte zum alten dunklen Look und wuerde auf Creme
   schmutzig wirken - die border-bottom oben uebernimmt den Abschluss.
   display:none statt Entfernen aus header.liquid, falls das Bild spaeter
   doch wieder gebraucht wird. */
.violex-nav__rule {
  display: none;
}

.violex-nav.is-hidden {
  transform: translateY(-100%);
}

/* ---------- Main content offset ---------- */

/* Basis-Abstand fuer #MainContent, damit die fixed Nav den Seiteninhalt nicht
   verdeckt. Einzelne Sections (Dashboard, Story, Gallery, Cart, usw.) ziehen
   var(--violex-nav-height) in ihrem eigenen padding/margin ab und rechnen hier
   nur noch ihren zusaetzlichen Abstand, damit sich am bisherigen Layout nichts
   aendert. Wichtig v.a. fuer native/unstylte Shopify-Seiten ohne eigene
   Section (z.B. /challenge-Captcha, 404, Kunden-Login), die vorher direkt
   unter der Nav und damit unsichtbar gerendert wurden. 8.5rem statt der
   frueheren 11rem: die cremefarbene Nav ist flacher als der alte dunkle
   Balken (siehe .violex-nav__inner unten). */
#MainContent {
  padding-top: var(--violex-nav-height, 8.5rem);
}

.violex-nav__inner {
  max-width: 1800px;
  margin: 0 auto;
  padding: 1.4rem 2rem 1.1rem;
  transition: padding 0.45s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.violex-nav.is-scrolled .violex-nav__inner {
  padding: 1.15rem 2rem;
}

@media (max-width: 600px) {
  :root {
    --violex-nav-height: 7rem;
  }
}

/* 3-Spalten-Raster: die Wortmarke sitzt dadurch exakt in der Seitenmitte -
   unabhaengig davon, ob Warenkorb ueberhaupt gerendert wird (backup_mode).
   Bei einem simplen flex/space-between waere es nur "irgendwo in der Mitte"
   und wuerde springen. */
.violex-nav__bar {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 1.5rem;
}

/* ---------- Icon-/Button-Gruppen links/rechts neben der Wortmarke ----------
   2. Fassung (29.08.2026, Wunsch Tomas, Vorbild Gucci): keine einzelnen
   Seiten-Textlinks mehr direkt in der Bar - links nur noch der Such-Button,
   rechts Profil-/Warenkorb-Icon, der Menu-Button (oeffnet das Panel mit
   ALLEN Seiten, siehe .vxm__* weiter unten) und ganz aussen ein eigener
   Contact-Button. Zwei Container statt einer Liste, weil CSS Grid pro Spalte
   nur ein direktes Kind sauber positioniert - .violex-nav__col--left sitzt
   in Spalte 1, .violex-nav__col--right in Spalte 3. */
.violex-nav__col {
  display: flex;
  align-items: center;
  gap: clamp(0.6rem, 1.6vw, 1.4rem);
}

.violex-nav__col--left {
  grid-column: 1;
  justify-self: start;
}

.violex-nav__col--right {
  grid-column: 3;
  justify-self: end;
}

.violex-nav__icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #140a1f;
  background: none;
  border: none;
  padding: 0.4rem;
  /* 44px Mindest-Tippflaeche (Apple HIG, WCAG 2.5.8) - dasselbe Argument wie
     bei .vxe__size in violex-edition.css. Das SVG darin ist 20px, mit dem
     Padding kam der Knopf auf ~33px: sichtbar, aber mit dem Daumen schlecht
     zu treffen. Rein transparenter Zuwachs (background:none), das Icon
     bleibt optisch unveraendert - betrifft Such- und Warenkorb-Icon in der
     Navigation, also jede Seite. */
  min-width: 44px;
  min-height: 44px;
  cursor: pointer;
  text-decoration: none;
  opacity: 0.75;
  transition: color 0.2s ease, opacity 0.2s ease;
}

.violex-nav__icon-btn:hover,
.violex-nav__cart--active {
  opacity: 1;
  color: #4a2358;
}

.violex-nav__icon-btn svg {
  width: 20px;
  height: 20px;
  display: block;
}

.violex-nav__menu-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: 'Italiana', 'Playfair Display', Georgia, 'Times New Roman', serif;
  font-size: clamp(0.72rem, 0.95vw, 0.85rem);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #140a1f;
  background: none;
  border: 1px solid rgba(20, 10, 31, 0.35);
  border-radius: 2px;
  padding: 0.5rem 1rem;
  /* 44px Mindest-Tippflaeche (Apple HIG, WCAG 2.5.8), wie .vxe__size und
     .violex-nav__icon-btn. Aus Schriftgroesse + Padding ergaben sich nur
     31px Hoehe - der sichtbare Rahmen waechst hier also mit, anders als bei
     den randlosen Icon-Knoepfen. Das ist gewollt: der Menu-Knopf sitzt
     direkt neben dem 44px hohen Warenkorb-Icon und fluchtet so sauber. */
  min-height: 44px;
  cursor: pointer;
  white-space: nowrap;
  transition: border-color 0.2s ease, opacity 0.2s ease;
  opacity: 0.85;
}

.violex-nav__menu-btn:hover {
  opacity: 1;
  border-color: #140a1f;
}

.violex-nav__contact-btn {
  font-family: 'Italiana', 'Playfair Display', Georgia, 'Times New Roman', serif;
  font-size: clamp(0.72rem, 0.95vw, 0.88rem);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  text-indent: 0.12em;
  color: #140a1f;
  text-decoration: none;
  white-space: nowrap;
  opacity: 0.75;
  transition: opacity 0.2s ease, color 0.2s ease;
}

.violex-nav__contact-btn:hover,
.violex-nav__contact-btn--active {
  opacity: 1;
  color: #4a2358;
}

.violex-nav__contact-btn--active {
  border-bottom: 1px solid currentColor;
}

/* ---------- Ausklappbares Suchfeld ---------- */

.violex-nav__search {
  max-width: 1800px;
  margin: 0 auto;
  padding: 0 2rem 1.1rem;
}

.violex-nav__search-form {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  max-width: 360px;
  border-bottom: 1px solid rgba(20, 10, 31, 0.35);
  padding-bottom: 0.4rem;
}

.violex-nav__search-input {
  flex: 1 1 auto;
  border: none;
  background: none;
  outline: none;
  font-family: 'Cochin', 'Big Caslon', Georgia, 'Times New Roman', serif;
  /* 1rem/16px statt 0.95rem/15.2px: unter 16px zoomt iOS Safari beim
     Antippen automatisch in die Seite hinein. Gleiche Begruendung wie bei
     den Contact-Feldern in violex-pages.css - hier zusaetzlich unangenehm,
     weil die Suche in der fixierten Navigation sitzt und der Zoom damit die
     ganze Kopfzeile verschiebt. */
  font-size: 1rem;
  color: #140a1f;
}

.violex-nav__search-input::placeholder {
  color: rgba(20, 10, 31, 0.5);
}

.violex-nav__search-submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  color: #140a1f;
  cursor: pointer;
  padding: 0.2rem;
  opacity: 0.75;
  transition: opacity 0.2s ease;
}

.violex-nav__search-submit:hover {
  opacity: 1;
}

/* ---------- Wortmarke (jetzt die einzige Marke in der Nav) ---------- */

.vxnav-wordmark {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.15rem;
  grid-column: 2;
  justify-self: center;
  text-decoration: none;
  color: #140a1f;
  max-width: 100%;
  /* Tippflaeche auf 44px Hoehe bringen: unter 480px wird die Script-Zeile
     ("Lost in Roses") ausgeblendet, dann bleibt nur der ~23px hohe
     VIOLEX-Schriftzug als Link zur Startseite uebrig. Rein vertikaler,
     transparenter Zuwachs - die Nav-Leiste ist durch die 44px hohen
     Icon-Knoepfe ohnehin schon so hoch, die Optik aendert sich also nicht. */
  min-height: 44px;
}

.vxnav-wordmark__name {
  font-family: 'Bodoni Moda', 'Playfair Display', Georgia, serif;
  font-weight: 500;
  font-size: clamp(1.6rem, 3.4vw, 2.9rem);
  line-height: 1;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.vxnav-wordmark__line {
  display: flex;
  align-items: center;
  gap: clamp(0.6rem, 2vw, 1.6rem);
  width: 100%;
}

.vxnav-wordmark__rule {
  flex: 1 1 auto;
  height: 1px;
  background: #140a1f;
  opacity: 0.55;
  min-width: clamp(1.5rem, 8vw, 9rem);
}

.vxnav-wordmark__script {
  font-family: 'Sloop Script Pro', 'Lost in Roses', 'Pinyon Script', 'Playfair Display', Georgia, serif;
  font-size: clamp(0.95rem, 1.9vw, 1.5rem);
  line-height: 1.1;
  white-space: nowrap;
  /* Schreibschriften sitzen optisch zu hoch zwischen den Linien. */
  transform: translateY(-0.08em);
}

@media (max-width: 700px) {
  .violex-nav__inner {
    padding: 1.15rem 1.5rem;
  }

  .violex-nav.is-scrolled .violex-nav__inner {
    padding: 0.7rem 1.5rem;
  }

  .violex-nav__col {
    gap: 0.8rem 1.2rem;
  }
}

/* ---------- Handy: alles in EINER Zeile ----------
   29.08.2026, Wunsch Tomas: auf dem Handy reichte die Zeile vorher nicht -
   die Bar fiel auf eine gestapelte Spalte zurueck und "Contact" landete
   dabei als eigene Extra-Zeile unter Suche/Wortmarke/Icons. Jetzt bleibt das
   3-Spalten-Grid (Suche | Wortmarke | Icons) auch auf dem Handy EINE Zeile:
   Contact ist raus (steht ohnehin im Menu-Panel, siehe .vxm__list), die
   Wortmarke zeigt nur noch "VIOLEX" ohne die Schreibschrift-Zeile darunter,
   und Icon-Groessen/Abstaende sind knapper bemessen. */
@media (max-width: 480px) {
  .violex-nav__contact-btn {
    display: none;
  }

  .violex-nav__bar {
    gap: 0.5rem;
  }

  .violex-nav__col {
    gap: 0.3rem;
  }

  .violex-nav__icon-btn {
    padding: 0.25rem;
  }

  .violex-nav__icon-btn svg {
    width: 18px;
    height: 18px;
  }

  .violex-nav__menu-btn {
    gap: 0.3rem;
    padding: 0.4rem 0.6rem;
    font-size: 0.65rem;
  }

  .vxnav-wordmark__name {
    font-size: clamp(1.05rem, 6vw, 1.5rem);
  }

  .vxnav-wordmark__line {
    display: none;
  }
}

/* ---------- Cart icon ---------- */

.violex-nav__cart {
  position: relative;
}

.violex-nav__cart-count {
  position: absolute;
  top: -4px;
  right: -6px;
  background: #140a1f;
  color: #f8f7f2;
  font-family: Georgia, serif;
  font-size: 0.65rem;
  font-weight: 700;
  min-width: 17px;
  height: 17px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 3px;
  line-height: 1;
}

/* ---------- Nav transparent auf der Startseite (2. Fassung, 29.08.2026) ----------
   Wunsch Tomas: das Vollbild-Foto soll bis UNTER die Nav reichen und dort
   sichtbar durchscheinen - die sonst cremefarben gefuellte Bar (.violex-nav
   oben, ueberall sonst im Shop) wird auf der Startseite komplett transparent,
   nur ihre Texte/Icons bleiben stehen. Deren Farbe war ueberall #140a1f
   (dunkles Violett, passend auf dem cremefarbenen Grund) - auf dem jetzt
   durchscheinenden dunklen Foto waere das unsichtbar, deshalb hier auf
   Cremeweiss gedreht. Gleiches :has()-Muster wie der Rest dieser Datei. */
.template-index:has(.violex-home) .violex-nav {
  background: transparent;
  border-bottom-color: transparent;
}

.template-index:has(.violex-home) .vxnav-wordmark,
.template-index:has(.violex-home) .violex-nav__icon-btn,
.template-index:has(.violex-home) .violex-nav__menu-btn,
.template-index:has(.violex-home) .violex-nav__contact-btn,
.template-index:has(.violex-home) .violex-nav__search-input,
.template-index:has(.violex-home) .violex-nav__search-submit {
  color: #fdf8ee;
}

.template-index:has(.violex-home) .vxnav-wordmark__rule {
  background: #fdf8ee;
}

.template-index:has(.violex-home) .violex-nav__menu-btn {
  border-color: rgba(253, 248, 238, 0.45);
}

.template-index:has(.violex-home) .violex-nav__search-form {
  border-bottom-color: rgba(253, 248, 238, 0.45);
}

.template-index:has(.violex-home) .violex-nav__search-input::placeholder {
  color: rgba(253, 248, 238, 0.5);
}

.template-index:has(.violex-home) .violex-nav__icon-btn:hover,
.template-index:has(.violex-home) .violex-nav__menu-btn:hover,
.template-index:has(.violex-home) .violex-nav__contact-btn:hover,
.template-index:has(.violex-home) .violex-nav__contact-btn--active,
.template-index:has(.violex-home) .violex-nav__cart--active {
  color: #fff;
}

.template-index:has(.violex-home) .violex-nav__menu-btn:hover {
  border-color: #fff;
}

.template-index:has(.violex-home) .violex-nav__cart-count {
  background: #fdf8ee;
  color: #140a1f;
}

/* ---------- Nav auf der Night Edition (29.08.2026) ----------
   5. Fassung, Wunsch Igor: zurueck auf dunklen Grund (#0c0616, derselbe Ton
   wie --vxe-page-bg/die restliche Seite) mit hellerem Violett (#8b5a9e,
   derselbe Ton wie --vxe-page-ink) - "genau wie der Rest der Page". Ersetzt
   die 4. Fassung (Wunsch Tomas, cremefarbener Grund) wieder. Hover geht auf
   Cremeweiss statt auf ein dunkleres Violett (wie in der 4. Fassung) - ein
   dunkleres Violett wuerde auf dem jetzt dunklen Grund kaum noch auffallen.
   Scoped weiterhin nur auf .template-page--night-edition (nicht Day Edition
   oder die Night-Utility-Seiten wie Contact) - dort bleibt die Nav wie
   ueberall cremefarben mit dunklem Inhalt (#140a1f). */
body.template-page--night-edition .violex-nav {
  background: #0c0616;
  border-bottom-color: rgba(139, 90, 158, 0.3);
}

body.template-page--night-edition .vxnav-wordmark,
body.template-page--night-edition .violex-nav__icon-btn,
body.template-page--night-edition .violex-nav__menu-btn,
body.template-page--night-edition .violex-nav__contact-btn,
body.template-page--night-edition .violex-nav__search-input,
body.template-page--night-edition .violex-nav__search-submit {
  color: #8b5a9e;
}

body.template-page--night-edition .vxnav-wordmark__rule {
  background: #8b5a9e;
}

body.template-page--night-edition .violex-nav__menu-btn {
  border-color: rgba(139, 90, 158, 0.55);
}

body.template-page--night-edition .violex-nav__search-form {
  border-bottom-color: rgba(139, 90, 158, 0.55);
}

body.template-page--night-edition .violex-nav__search-input::placeholder {
  color: rgba(139, 90, 158, 0.55);
}

body.template-page--night-edition .violex-nav__icon-btn:hover,
body.template-page--night-edition .violex-nav__menu-btn:hover,
body.template-page--night-edition .violex-nav__contact-btn:hover,
body.template-page--night-edition .violex-nav__contact-btn--active,
body.template-page--night-edition .violex-nav__cart--active {
  color: #fdf8ee;
}

body.template-page--night-edition .violex-nav__menu-btn:hover {
  border-color: #fdf8ee;
}

body.template-page--night-edition .violex-nav__cart-count {
  background: #8b5a9e;
  color: #fdf8ee;
}

/* ---------- Menu-Panel (alle Seiten) ----------
   29.08.2026, Wunsch Tomas: Menu-Button rechts in der Nav oeffnet ein
   Slide-in-Panel von rechts mit ALLEN Seiten. Gleiches Grundmuster wie der
   Warenkorb (.vxd in violex-cart-drawer.css), eigene Klassen (vxm__*) um
   Ueberschneidungen zu vermeiden, feste Marken-Palette (Cremeweiss auf
   Violett) statt seitenabhaengiger --vxd-*-Variablen - das Menu sieht auf
   JEDER Seite gleich aus, unabhaengig vom Editions-Look der Seite dahinter. */
.vxm[hidden] {
  display: none;
}

.vxm {
  position: fixed;
  inset: 0;
  z-index: 10000;
}

.vxm__backdrop {
  position: absolute;
  inset: 0;
  z-index: 0;
  background: rgba(6, 1, 11, 0.78);
  opacity: 0;
  transition: opacity 0.28s ease;
}

.vxm__panel {
  position: absolute;
  top: 0;
  right: 0;
  height: 100%;
  width: clamp(300px, 85vw, 400px);
  z-index: 1;
  background: #140a1f;
  border-left: 1px solid rgba(253, 248, 238, 0.22);
  box-shadow: -28px 0 70px rgba(0, 0, 0, 0.55);
  padding: 1.75rem 1.75rem 2rem;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  overflow-y: auto;
  transform: translateX(100%);
  transition: transform 0.32s cubic-bezier(0.2, 0.7, 0.3, 1);
  color: #fdf8ee;
}

.vxm.is-open .vxm__backdrop {
  opacity: 1;
}

.vxm.is-open .vxm__panel {
  transform: translateX(0);
}

@media (prefers-reduced-motion: reduce) {
  .vxm__backdrop,
  .vxm__panel {
    transition: none;
  }
}

.vxm__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 1rem;
  border-bottom: 1px solid rgba(253, 248, 238, 0.18);
}

.vxm__title {
  font-family: 'Bodoni Moda', 'Playfair Display', Georgia, serif;
  font-weight: 500;
  font-size: 1.3rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  margin: 0;
}

.vxm__close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  background: none;
  border: none;
  color: #fdf8ee;
  font-size: 1.6rem;
  line-height: 1;
  cursor: pointer;
  opacity: 0.75;
  transition: opacity 0.2s ease;
}

.vxm__close:hover {
  opacity: 1;
}

.vxm__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.vxm__list a {
  display: block;
  font-family: 'Cochin', 'Big Caslon', Georgia, 'Times New Roman', serif;
  font-size: 1.05rem;
  letter-spacing: 0.03em;
  color: #fdf8ee;
  text-decoration: none;
  opacity: 0.78;
  padding: 0.65rem 0;
  border-bottom: 1px solid rgba(253, 248, 238, 0.12);
  transition: opacity 0.2s ease;
}

.vxm__list a:hover,
.vxm__list a.is-active {
  opacity: 1;
}

.vxm__list a.is-active {
  color: #f3d26b;
}

/* ---------- Hero / Startscreen ---------- */

/* Neue Startseite 1:1 nach Vorlage (prototype/fotos/Home Page/): Cremeweiss
   (#fdf8ee) und Violett (#140a1f) exakt wie von Tomas vorgegeben - bewusst
   als literale Hex-Werte statt eigener --vxh-*-Custom-Properties (erste
   Fassung setzte sie auf .violex-home und las sie per var() in den
   Kind-Regeln; in Tests blieben sie dabei zuverlaessig leer/unresolved -
   Ursache nicht abschliessend geklaert, evtl. Interaktion mit den bereits
   vorhandenen --violex-bg-*/--violex-gold-*-Variablen im :root weiter oben
   in dieser Datei). Literale Werte sind hier ohnehin passender: Cremeweiss/
   Violett sind einmalige Marken-Farben nur fuer diese eine Section, keine
   wiederverwendeten Theme-Variablen. */
.violex-home {
  background: #140a1f;
}

/* Frueher war die Startseite auf genau einen Bildschirm gesperrt (kein
   Scrollen). Bleibt als DEFAULT fuer die anderen Start-Varianten
   (.violex-beginning-hero, das unbenutzte .violex-hero-Template) - die neue
   Startseite (sections/violex-home.liquid, 29.08.2026) hebt den Lock aber
   gezielt wieder auf: Wunsch Tomas war ausdruecklich "Nav bar bleibt, das
   Design kommt darunter, auch wenn man ein wenig scrollen muesste". Gleiches
   :has()-Muster wie body.template-index.template-page--giveaway in
   violex-giveaway.css. */
html.template-index--lock,
.template-index {
  background: var(--violex-bg-deep);
  height: 100%;
  margin: 0;
  overflow: hidden;
}

html.template-index--lock:has(.violex-home),
.template-index:has(.violex-home) {
  height: auto;
  min-height: 100vh;
  overflow: visible;
}

/* Kein Nav-Abstand oben (2. Fassung, Wunsch Tomas: Foto ganz nach oben, bis
   UNTER die transparente Nav) - gilt jetzt fuer die ganze Startseite
   einheitlich, die fruehere Extra-Regel fuer .violex-home (Foto faengt ERST
   unter der Nav an) ist damit wieder raus. */
.template-index #MainContent {
  padding-top: 0;
}

/* Footer auf der Startseite (29.08.2026, Wunsch Tomas: "Footer auch auf die
   Homepage dazu") - vorher ausgeblendet (war die Quelle der ueberschuessigen
   Scroll-Hoehe der alten, gesperrten Startseite - diese Sperre gibt es seit
   dem Vollbild-Hero-Redesign nicht mehr, siehe .template-index:has(.violex-home)
   weiter unten). Keine Extra-Regel mehr noetig, der Footer erscheint jetzt
   wie auf jeder anderen Seite am Ende des normalen Seitenflusses.
   Explore-Links im Footer sind auf der Startseite trotzdem ausgeblendet
   (siehe footer.liquid, {%- unless request.page_type == 'index' -%}) - das
   bleibt unveraendert, nur das komplette Verstecken der Section ist raus. */

/* -- 2) Vollbild-Foto -------------------------------------------------------
   2. Fassung (29.08.2026, Wunsch Tomas): nicht mehr auf eine duenne
   Panorama-Leiste zugeschnitten (aspect-ratio 2400/501) - stattdessen das
   GANZE Foto als Vollbild-Hero, min-height:100svh fuellt jede Bildschirm-
   groesse (100svh statt 100vh: auf iOS Safari zaehlt 100vh die von der
   Adressleiste verdeckte Flaeche mit, 100svh nicht - Fallback 100vh fuer
   Browser ohne svh-Support). object-fit:cover auf dem <img> darunter
   verhindert Verzerrung, egal wie das Seitenverhaeltnis vom Viewport
   abweicht. Kein Nav-Abstand mehr (siehe #MainContent weiter oben) - das
   Foto beginnt bei y=0 und reicht bis UNTER die jetzt transparente Nav
   (siehe .template-index:has(.violex-home) .violex-nav weiter unten). */
.violex-home__photo {
  position: relative;
  width: 100%;
  min-height: 100vh;
  min-height: 100svh;
  overflow: hidden;
}

.violex-home__photo img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* -- 3) Day/Night-Edition ---------------------------------------------------
   3. Fassung (29.08.2026, Wunsch Tomas): keine eigene Zeile mehr unter dem
   Foto, kein Rosen-Emblem dazwischen - die Buttons sitzen jetzt DIREKT auf
   dem Vollbild-Foto, links/rechts, vertikal mittig (position:absolute auf
   .violex-home__photo, das dafuer schon position:relative hat). */
.violex-home__edition-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: 'Cochin', 'Big Caslon', Georgia, 'Times New Roman', serif;
  font-size: clamp(0.85rem, 1.5vw, 1.2rem);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #fdf8ee;
  text-decoration: none;
  white-space: nowrap;
  border: 1px solid #fdf8ee;
  padding: 0.7em 1.5em;
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.violex-home__edition-btn--day {
  left: clamp(1.5rem, 8vw, 9rem);
}

.violex-home__edition-btn--night {
  right: clamp(1.5rem, 8vw, 9rem);
}

.violex-home__edition-btn:hover {
  background: #fdf8ee;
  color: #140a1f;
}

@media (max-width: 600px) {
  .violex-home__edition-btn {
    font-size: 0.78rem;
    padding: 0.6em 1em;
    /* Schriftgroesse und Padding sind hier bewusst kleiner, damit beide
       Knoepfe links und rechts neben dem Foto Platz haben. Dadurch kamen sie
       aber nur noch auf 31px Hoehe - und das sind die beiden HAUPT-Einstiege
       der Startseite. min-height hebt die Tippflaeche auf 44px (Apple HIG,
       WCAG 2.5.8), ohne Schrift oder Rahmenbreite zu aendern: das
       inline-flex + align-items:center der Grundregel zentriert den Text in
       der groesseren Flaeche. */
    min-height: 44px;
  }

  .violex-home__edition-btn--day {
    left: 1rem;
  }

  .violex-home__edition-btn--night {
    right: 1rem;
  }
}

.violex-hero {
  position: relative;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 11rem 2rem 3rem;
  background: radial-gradient(ellipse at center, var(--violex-bg-glow) 0%, var(--violex-bg-mid) 45%, var(--violex-bg-deep) 100%);
  overflow: hidden;
}

.violex-hero__row {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  width: 100%;
  max-width: 1800px;
}

.violex-hero__button {
  justify-self: center;
  display: inline-flex;
  transition: filter 0.2s ease, transform 0.2s ease;
}

.violex-hero__button img {
  width: clamp(170px, 18vw, 260px);
  height: auto;
  display: block;
}

.violex-hero__button:hover {
  filter: brightness(1.15);
  transform: translateY(-2px);
}

.violex-hero__brand {
  justify-self: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
}

.violex-hero__logo {
  width: clamp(280px, 33vw, 500px);
  height: auto;
  display: block;
}

.violex-hero__title-link {
  text-decoration: none;
}

.violex-hero__title {
  margin: 0;
  font-family: 'Cinzel', 'Playfair Display', Georgia, serif;
  font-weight: 700;
  font-size: clamp(2.6rem, 6.5vw, 5rem);
  letter-spacing: 0.06em;
  text-align: center;
  color: var(--violex-bg-deep);
  -webkit-text-stroke: 2px var(--violex-gold-bright);
  text-stroke: 2px var(--violex-gold-bright);
  text-shadow: 0 2px 1px rgba(0, 0, 0, 0.5), 0 0 14px rgba(243, 210, 107, 0.3);
}

@media (max-width: 768px) {
  .template-index {
    height: auto;
    overflow: visible;
  }

  .violex-hero {
    height: auto;
    min-height: 100vh;
    padding: 9.5rem 1.5rem 3rem;
  }

  .violex-hero__row {
    display: flex;
    flex-direction: column;
    gap: 2.5rem;
  }

  .violex-hero__brand {
    order: -1;
  }

  .violex-hero__logo {
    width: clamp(260px, 60vw, 340px);
  }

  .violex-hero__button img {
    width: clamp(220px, 62vw, 300px);
  }
}

/* ---------- Footer ----------
   Cremeweiss/dunkles-Violett-Stil (29.08.2026, Wunsch Igor: "eins zu eins
   die Farben von der Nav-Bar uebernehmen") - Footer bekommt jetzt exakt die
   Nav-Palette (#f8f7f2 Grund, #140a1f Text, siehe .violex-nav oben), statt
   wie vorher (Wunsch Tomas) umgekehrt dunkles Violett mit weiss/creme Text.
   Bodoni Moda fuer Marke/Ueberschriften, Cochin fuer Links/Fliesstext -
   dieselben Fonts wie ueberall sonst im neuen Stil. Gilt fuer JEDE Seite
   (auch die Startseite, siehe Kommentar weiter oben, wo die vorherige
   .template-index-Ausblendung entfernt wurde) - die Editions-Seiten (Day/
   Night) und die Night-Utility-Seiten ueberschreiben das weiterhin gezielt
   auf ihre eigene (dunkle) Palette (siehe violex-edition.css, "Footer im
   Editions-Look") - Night bleibt damit wie gewuenscht dunkelviolett, nur
   der Rest des Shops wechselt auf Creme. */
.violex-footer {
  position: relative;
  /* 29.08.2026 (Wunsch Tomas): "alle Pages ausser Homepage und Night
     Edition muessen einen weissen Footer haben" - und zwar im
     Marken-Creme-Weiss, nicht im leicht abweichenden Nav-Ton #f8f7f2, der
     hier vorher stand. Die Ausnahmen stehen weiter unten (Startseite) bzw.
     in violex-edition.css (Night Edition). */
  background: var(--violex-cream);
  padding: 2.5rem 3.5rem 1.5rem;
}

/* ── Startseite: violetter Footer ──────────────────────────────────────────
   29.08.2026 (Wunsch Tomas). Einzige Seite mit dunklem Footer neben der
   Night Edition. Die Textfarben muessen mitgedreht werden, sonst stuende
   dunkler Text auf dunklem Grund - dieselben Rollen wie im
   Night-Edition-Block in violex-edition.css, nur mit den globalen
   Marken-Tokens statt den seitenspezifischen --vxe-page-*. */
body.template-index .violex-footer {
  background: var(--violex-violet);
}

body.template-index .violex-footer__brand,
body.template-index .violex-footer__heading {
  color: var(--violex-cream);
}

body.template-index .violex-footer__tagline,
body.template-index .violex-footer__text,
body.template-index .violex-footer__links a {
  color: rgba(253, 248, 238, 0.75);
}

body.template-index .violex-footer__links a:hover,
body.template-index .violex-footer__legal-links a:hover {
  color: var(--violex-cream);
}

body.template-index .violex-footer__bottom {
  border-top-color: rgba(253, 248, 238, 0.18);
}

body.template-index .violex-footer__bottom p,
body.template-index .violex-footer__legal-links a,
body.template-index .violex-footer__legal-links-disabled {
  color: rgba(253, 248, 238, 0.5);
}

.violex-footer__inner {
  max-width: 1800px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: 2.5rem;
}

.violex-footer__brand {
  font-family: 'Bodoni Moda', 'Playfair Display', Georgia, serif;
  font-weight: 500;
  font-size: 1.6rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #140a1f;
  margin: 0 0 0.6rem;
}

.violex-footer__tagline {
  font-family: 'Cochin', 'Big Caslon', Georgia, 'Times New Roman', serif;
  font-size: 0.9rem;
  color: rgba(20, 10, 31, 0.65);
  margin: 0;
  max-width: 320px;
}

.violex-footer__heading {
  font-family: 'Cochin', 'Big Caslon', Georgia, 'Times New Roman', serif;
  font-size: 0.85rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #140a1f;
  margin: 0 0 1rem;
}

.violex-footer__links {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, auto);
  gap: 0.5rem 2rem;
}

.violex-footer__links a {
  font-family: 'Cochin', 'Big Caslon', Georgia, 'Times New Roman', serif;
  font-size: 0.9rem;
  color: rgba(20, 10, 31, 0.75);
  text-decoration: none;
  /* Gleiche Begruendung wie bei .violex-footer__legal-links a: reine
     Textzeilen sind nur 16px hoch, WCAG 2.5.8 (AA) verlangt 24px. Padding
     statt groesserer Schrift, inline-block damit die Zeilenhoehe mitwaechst.
     Auf dem Handy sind das die Hauptlinks zu allen Seiten (die Nav zeigt
     dort nur Icons + Menu-Panel), entsprechend wichtig zum Treffen. */
  display: inline-block;
  padding: 0.4rem 0;
}

.violex-footer__links a:hover {
  color: #140a1f;
}

.violex-footer__text {
  font-family: 'Cochin', 'Big Caslon', Georgia, 'Times New Roman', serif;
  font-size: 0.9rem;
  color: rgba(20, 10, 31, 0.75);
  margin: 0 0 0.5rem;
}

.violex-footer__bottom {
  max-width: 1800px;
  margin: 1.5rem auto 0;
  padding-top: 1rem;
  border-top: 1px solid rgba(20, 10, 31, 0.18);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.violex-footer__bottom p {
  font-family: 'Cochin', 'Big Caslon', Georgia, 'Times New Roman', serif;
  font-size: 0.8rem;
  color: rgba(20, 10, 31, 0.5);
  margin: 0;
  letter-spacing: 0.02em;
}

.violex-footer__legal-links {
  display: flex;
  /* flex-wrap fehlte, Default ist nowrap: die vier Rechtslinks
     (Teilnahmebedingungen / Datenschutzerklaerung / Impressum / AGB) ergaben
     nebeneinander 436px und haben damit auf dem Handy die GANZE Seite
     aufgeblaeht - die Nav ist position:fixed mit width:100%, bezieht sich
     also auf den dadurch 460px breiten Layout-Viewport und lief sichtbar
     ueber den rechten Rand hinaus. Umbruch loest beides an der Wurzel
     (29.08.2026, gemessen im Handy-Viewport). */
  flex-wrap: wrap;
  gap: 0.5rem 1.5rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.violex-footer__legal-links a {
  font-family: 'Cochin', 'Big Caslon', Georgia, 'Times New Roman', serif;
  font-size: 0.8rem;
  color: rgba(20, 10, 31, 0.5);
  text-decoration: none;
  letter-spacing: 0.02em;
  /* Reine Textzeilen sind nur 15px hoch - unter den 24px, die WCAG 2.5.8
     (AA) fuer Tippflaechen verlangt. Etwas vertikales Padding statt einer
     groesseren Schrift, damit die Fusszeile optisch unveraendert bleibt.
     inline-block, weil ein inline-Element vertikales Padding zwar zeichnet,
     aber die Zeilenhoehe (und damit die Trefferflaeche) nicht mitwaechst.
     Moeglich wurde das erst durch flex-wrap oben - vorher haette die
     zusaetzliche Hoehe die Links weiter aus der Seite gedraengt. */
  display: inline-block;
  padding: 0.4rem 0;
  transition: color 0.2s ease;
}

.violex-footer__legal-links a:hover {
  color: #140a1f;
}

/* Platzhalter fuer Links ohne Ziel-Seite (aktuell nur "AGB", siehe
   footer.liquid) - gleiche Optik wie die echten Links, aber kein Hover/
   Cursor-Pointer, damit nicht faelschlich Klickbarkeit suggeriert wird. */
.violex-footer__legal-links-disabled {
  font-family: 'Cochin', 'Big Caslon', Georgia, 'Times New Roman', serif;
  font-size: 0.8rem;
  color: rgba(20, 10, 31, 0.3);
  letter-spacing: 0.02em;
  cursor: default;
}

@media (max-width: 700px) {
  .violex-footer__bottom {
    flex-direction: column;
    align-items: flex-start;
  }
}

@media (max-width: 700px) {
  .violex-footer {
    padding: 2rem 1.5rem 1.25rem;
  }

  .violex-footer__inner {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }
}

/* ---------- Shopify Bot-Check (/challenge) ---------- */

/* Diese Seite kommt komplett unstyled/nativ von Shopify (kein eigenes
   Template, kein Zugriff auf die interne Markup-Struktur) - Body-Klasse
   wird per Pfad-Check in violex-session.js gesetzt. Generische Selektoren
   statt Shopify-eigener Klassennamen, damit es nicht von deren interner
   Struktur abhaengt. Der hCaptcha-Widget-Inhalt selbst (Checkbox/Branding)
   bleibt ein fremdes iFrame und ist nicht stylebar - nur Seiten-Chrome
   drumherum. */
body.vx-challenge-page {
  background:
    radial-gradient(ellipse 130% 85% at 50% 45%, rgba(255, 255, 255, 0.03) 0%, transparent 70%),
    var(--violex-bg-deep, #130419);
  min-height: 100vh;
}

body.vx-challenge-page #MainContent {
  display: flex;
  justify-content: center;
}

body.vx-challenge-page #MainContent > * {
  width: 100%;
  max-width: 440px;
  margin: 0 auto;
  padding: 2.5rem 2rem 3rem;
  text-align: center;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--violex-gold-soft, rgba(214, 179, 90, 0.45));
  border-radius: 4px;
}

body.vx-challenge-page #MainContent p {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 1.05rem;
  line-height: 1.6;
  color: rgba(232, 224, 240, 0.9);
  margin: 0 0 1.75rem;
}

body.vx-challenge-page #MainContent form {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.5rem;
}

body.vx-challenge-page #MainContent .h-captcha {
  display: flex;
  justify-content: center;
}

body.vx-challenge-page #MainContent button[type='submit'],
body.vx-challenge-page #MainContent input[type='submit'] {
  font-family: 'Cinzel', Georgia, serif;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-size: 0.82rem;
  color: #14060a;
  background: linear-gradient(180deg, var(--violex-gold-bright, #f3d26b), var(--violex-gold, #d6b35a));
  border: none;
  border-radius: 4px;
  padding: 0.8rem 2.5rem;
  cursor: pointer;
  transition: filter 0.25s ease, transform 0.15s ease;
}

body.vx-challenge-page #MainContent button[type='submit']:hover,
body.vx-challenge-page #MainContent input[type='submit']:hover {
  filter: brightness(1.08);
}

body.vx-challenge-page #MainContent button[type='submit']:active,
body.vx-challenge-page #MainContent input[type='submit']:active {
  transform: translateY(1px);
}