/* ─── Micro-Shop josecco.shop – öffentliche Seiten ─────────────────────────
   Design 1:1 an der Landingpage weinhandel.johannes-deck.ch orientiert:
   Deep-Blue #0f1c2e als Basis, Gold #E1B53E, Great-Vibes-Hero,
   Cormorant-Garamond-Titel, Montserrat-Text, eckige Gold-Buttons,
   cremefarbene Karten mit Goldrahmen (Kontakt-Modal der Landingpage).
   Schriften lokal (kein Google-Fonts-Request): Montserrat und Cormorant
   sind variable Fonts (latin), daher je ein @font-face mit Gewichtsbereich.
   Great Vibes: latin-Subset (2026-10-23 ersetzt – vorher cyrillic-ext,
   nur 9 Glyphen, dadurch fiel der Hero-Titel auf eine Serifenschrift zurück). */

@font-face {
  font-family: "Cormorant Garamond";
  src: url("../fonts/CormorantGaramond-400.c47ff12887a3.woff2") format("woff2");
  font-weight: 300 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Cormorant Garamond";
  src: url("../fonts/CormorantGaramond-400i.aa6bdaf51a40.woff2") format("woff2");
  font-weight: 400; font-style: italic; font-display: swap;
}
@font-face {
  font-family: "Great Vibes";
  src: url("../fonts/GreatVibes-Regular.51c0e8c2cd33.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Montserrat";
  src: url("../fonts/Montserrat-400.311d352d9323.woff2") format("woff2");
  font-weight: 100 900; font-style: normal; font-display: swap;
}

:root {
  --deep-blue: #0f1c2e;
  --gold: #E1B53E;
  --text-light: #ffffff;
  --text-muted-light: #dddddd;
  --text-dark: #2c2c2c;
  --text-muted-dark: #666666;
  --bg-modal: #faf9f6;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body.shop-seite {
  margin: 0;
  font-family: "Montserrat", sans-serif;
  color: var(--text-dark);
  background-color: var(--deep-blue);
  line-height: 1.8;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  overflow-x: hidden;
}

/* ── Hintergrund aller Seiten: fixierte Ebene statt fixiertem Hintergrundbild
      (das funktioniert auf iOS nicht). Der JPG-Wert ist der Fallback ohne image-set. ── */
body.shop-seite::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  background-color: var(--deep-blue);
  background-image:
    linear-gradient(to right, rgba(15, 28, 46, 0.92) 0%, rgba(15, 28, 46, 0.60) 50%, rgba(15, 28, 46, 0.35) 100%),
    url("../img/josecco-hintergrund-2400.df7652828470.jpg");
  background-image:
    linear-gradient(to right, rgba(15, 28, 46, 0.92) 0%, rgba(15, 28, 46, 0.60) 50%, rgba(15, 28, 46, 0.35) 100%),
    image-set(url("../img/josecco-hintergrund-2400.879590da6122.webp") type("image/webp"),
              url("../img/josecco-hintergrund-2400.df7652828470.jpg") type("image/jpeg"));
  background-size: cover;
  background-position: center right;
  background-repeat: no-repeat;
}
@media (max-width: 768px) {
  body.shop-seite::before {
    background-image:
      linear-gradient(to bottom, rgba(15, 28, 46, 0.90) 0%, rgba(15, 28, 46, 0.75) 100%),
      url("../img/josecco-hintergrund-1200.27ced841c33c.jpg");
    background-image:
      linear-gradient(to bottom, rgba(15, 28, 46, 0.90) 0%, rgba(15, 28, 46, 0.75) 100%),
      image-set(url("../img/josecco-hintergrund-1200.ac3de4fdfc67.webp") type("image/webp"),
                url("../img/josecco-hintergrund-1200.27ced841c33c.jpg") type("image/jpeg"));
    background-position: center;
  }
}

h1, h2, h3, h4 { font-weight: 400; margin: 0; }

/* Scrollbar wie die Landingpage */
::-webkit-scrollbar { width: 10px; }
::-webkit-scrollbar-track { background: var(--deep-blue); }
::-webkit-scrollbar-thumb { background: rgba(225, 181, 62, 0.4); border-radius: 5px; }
::-webkit-scrollbar-thumb:hover { background: var(--gold); }

/* ── Einblend-Animationen wie die Landingpage (ohne JS) ── */
.fade-in { opacity: 0; animation: shopFadeIn 1s ease-out forwards; }
.delay-1 { animation-delay: 0.2s; }
.delay-2 { animation-delay: 0.5s; }
.delay-3 { animation-delay: 0.8s; }
.delay-4 { animation-delay: 1.1s; }
@keyframes shopFadeIn {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .fade-in { animation: none; opacity: 1; }
  html { scroll-behavior: auto; }
}

/* ── Kopf: weisser Streifen wie die Landingpage, Logo zentriert ── */
.shop-kopf {
  position: relative;
  background-color: #ffffff;
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
  padding: 1.5rem 5%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.shop-marke { display: inline-flex; justify-content: center; }
.shop-marke img { height: 90px; width: auto; display: block; }
.shop-kopf-ausgleich { display: none; }

/* Zurueck-Link absolut links, damit das Logo exakt mittig bleibt (wie Landingpage) */
.shop-zurueck {
  position: absolute;
  left: 5%;
  top: 50%;
  transform: translateY(-50%);
  text-align: center;
  text-decoration: none;
  font-size: 0.75rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: var(--deep-blue);
  border: 1px solid var(--gold);
  padding: 0.6rem 1.1rem;
  white-space: nowrap;
  transition: all 0.4s ease;
}
.shop-zurueck:hover { background-color: var(--gold); }

@media (max-width: 600px) {
  .shop-kopf { padding: 1rem 16px; }
  .shop-marke img { height: 60px; }
  .shop-zurueck { left: 16px; padding: 0.4rem 0.6rem; font-size: 0.62rem; letter-spacing: 1px; }
}

/* ── Hinweis (SHOP_HINWEIS_TEXT) im Stil des Datenschutz-Banners ── */
.shop-bauhinweis {
  background: var(--deep-blue);
  color: var(--text-muted-light);
  text-align: center;
  font-size: 0.85rem;
  padding: 0.75rem 16px;
  border-bottom: 1px solid var(--gold);
}

/* ── Inhalt ── */
.shop-inhalt { flex: 1; width: 100%; }

/* ── Hero wie die Landingpage (.immersive-hero), transparent auf dem Seitenhintergrund ── */
.shop-hero {
  position: relative;
  width: 100%;
  min-height: 85vh;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding: 6rem 10%;
  color: var(--text-light);
}
.shop-hero-inhalt { max-width: 600px; text-align: left; z-index: 2; }

.shop-hero-titel {
  font-family: "Great Vibes", cursive;
  color: var(--gold);
  font-size: 6.5rem;
  line-height: 1.1;
  letter-spacing: 2px;
  text-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
  margin-bottom: 1.5rem;
}

.shop-tags {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-wrap: wrap;
  gap: 15px;
  font-size: 0.95rem;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: var(--text-light);
  margin-bottom: 3rem;
}
.shop-tags .tag {
  border: 1px solid rgba(225, 181, 62, 0.5);
  padding: 5px 15px;
  border-radius: 50px;
  background: rgba(15, 28, 46, 0.3);
  backdrop-filter: blur(2px);
  font-weight: 500;
  transition: all 0.3s ease;
  cursor: default;
}
.shop-tags .tag:hover {
  transform: translateY(-3px);
  background: rgba(225, 181, 62, 0.2);
  border-color: var(--gold);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
}

.shop-hero-text { font-size: 1.1rem; font-weight: 300; color: var(--text-muted-light); margin-bottom: 3rem; }
.shop-hero-text h2 {
  font-size: 2.2rem;
  color: var(--text-light);
  margin-bottom: 1rem;
  font-family: "Cormorant Garamond", serif;
}
.shop-hero-text p { margin: 0 0 1rem; }

/* Preiszeile: Spezifitaet bewusst hoeher als .shop-hero-text p */
.shop-hero-text .shop-preis-hero {
  font-family: "Cormorant Garamond", serif;
  font-size: 2.4rem;
  font-weight: 600;
  line-height: 1.2;
  color: var(--gold);
  margin: 1.8rem 0 0;
  font-variant-numeric: lining-nums;
}
.shop-hero-text .shop-preis-hero span {
  display: block;
  margin-top: 0.4rem;
  font-family: "Montserrat", sans-serif;
  font-size: 0.8rem;
  font-weight: 300;
  color: var(--text-muted-light);
  letter-spacing: 1px;
}

.shop-aktionen { display: flex; gap: 1.5rem; flex-wrap: wrap; justify-content: flex-start; }

@media (max-width: 1024px) {
  .shop-hero { padding: 6rem 5%; }
  .shop-hero-titel { font-size: 5rem; }
}
@media (max-width: 768px) {
  .shop-hero {
    min-height: auto;
    padding: 4rem 1rem;
    flex-direction: column;
    justify-content: center;
    text-align: center;
  }
  .shop-hero-inhalt { text-align: center; max-width: 100%; }
  .shop-hero-titel { font-size: 4rem; }
  .shop-tags { justify-content: center; gap: 10px; font-size: 0.85rem; }
  .shop-hero-text { font-size: 1rem; margin-bottom: 2.5rem; }
  .shop-hero-text h2 { font-size: 1.8rem; }
  .shop-aktionen { justify-content: center; flex-direction: column; gap: 1rem; }
  .shop-aktionen .btn { width: 100%; }
}

/* ── Karten: Kontakt-Modal der Landingpage (Creme, Goldrahmen) ── */
.shop-karte {
  background-color: var(--bg-modal);
  border: 1px solid var(--gold);
  border-radius: 4px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.35);
  max-width: 560px;
  margin: 4rem auto;
  padding: 3rem;
  color: var(--deep-blue);
  text-align: left;
  scroll-margin-top: 2rem;
}
.shop-karte-zentriert { text-align: center; }

.shop-karte h1, .shop-karte h3 {
  font-family: "Cormorant Garamond", serif;
  font-size: 2.2rem;
  color: var(--deep-blue);
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  padding-bottom: 10px;
  margin-bottom: 1.5rem;
}
.shop-text { font-size: 0.95rem; line-height: 1.6; color: #444; margin: 0 0 1rem; }
.shop-hinweis { font-size: 0.8rem; line-height: 1.5; color: var(--text-muted-dark); margin: 6px 0 0; }
.shop-hinweis-zentriert { text-align: center; }
.shop-karte a:not(.btn) { color: var(--deep-blue); text-decoration-color: var(--gold); text-underline-offset: 2px; }

/* ── Formular wie das Kontakt-Formular der Landingpage ── */
.shop-form { display: flex; flex-direction: column; gap: 1.2rem; }
.shop-feld label {
  display: block;
  font-size: 0.72rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: var(--deep-blue);
  margin-bottom: 6px;
}
.shop-feld input[type="number"],
.shop-feld input[type="text"],
.shop-feld input[type="email"],
.shop-feld input[type="tel"],
.shop-feld select {
  width: 100%;
  max-width: 100%;
  padding: 12px;
  border: 1px solid #ccc;
  border-radius: 0;
  font-family: "Montserrat", sans-serif;
  font-size: 1rem;
  color: var(--text-dark);
  background-color: transparent;
  transition: border-color 0.3s;
}
.shop-feld input:focus { outline: none; border-color: var(--gold); }
.shop-feld input[type="number"] { max-width: 140px; text-align: center; }
.shop-feld-check label {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  font-size: 0.9rem;
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
  color: var(--text-dark);
  cursor: pointer;
  line-height: 1.5;
}
.shop-feld-check input { width: 18px; height: 18px; margin: 1px 0 0; flex-shrink: 0; accent-color: var(--gold); }

.shop-zahlungsart {
  margin: 0;
  padding: 12px;
  border: 1px solid #ccc;
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--text-dark);
}
.shop-preis-hinweis { font-size: 0.78rem; color: var(--text-muted-dark); }

.shop-fehler {
  color: #b02a26;
  font-size: 0.85rem;
  margin: 6px 0 0;
  font-weight: 500;
}

/* ── Buttons exakt wie die Landingpage ── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 1rem 2.5rem;
  font-size: 0.9rem;
  text-transform: uppercase;
  letter-spacing: 2px;
  text-decoration: none;
  transition: all 0.4s ease;
  cursor: pointer;
  border: none;
  border-radius: 0;
  font-family: "Montserrat", sans-serif;
  font-weight: 400;
}
.btn-outline-gold { background-color: transparent; color: var(--gold); border: 1px solid var(--gold); }
.btn-outline-gold:hover { background-color: var(--gold); color: var(--deep-blue); }
.btn-solid { background-color: var(--gold); color: var(--deep-blue); border: 1px solid var(--gold); font-weight: 600; }
.btn-solid:hover { background-color: transparent; color: var(--gold); }
/* Auf hellen Karten waere Gold-auf-Creme beim Hover unlesbar */
.shop-karte .btn-solid:hover { background-color: var(--deep-blue); border-color: var(--deep-blue); color: var(--gold); }
.shop-karte .btn-outline-gold { color: var(--deep-blue); }

.shop-button { width: 100%; margin-top: 10px; }
.shop-button-gross { font-size: 1rem; padding: 1.1rem 2.5rem; }
.shop-karte .btn { margin-top: 1rem; }

@media (max-width: 768px) {
  .shop-karte { margin: 2rem 16px; padding: 1.75rem 1.5rem; }
  .btn { width: 100%; text-align: center; padding: 1rem 1.25rem; letter-spacing: 1.5px; }
}

/* ── Abholung ── */
.shop-abholung-titel { border-bottom: none; margin-bottom: 0.5rem; }
.shop-abholung form { margin-top: 8px; }
.shop-abholung-anleitung { font-weight: 500; color: var(--deep-blue); }

/* ── Fuss: halbtransparentes Navy, das Bild scheint durch ── */
.shop-fuss {
  text-align: center;
  padding: 4rem 1rem;
  color: var(--text-muted-light);
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  background-color: rgba(15, 28, 46, 0.85);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
.shop-fuss p { font-size: 0.85rem; margin: 0.3rem 0; }
.shop-fuss strong {
  color: var(--gold);
  font-family: "Cormorant Garamond", serif;
  font-size: 1.1rem;
  font-weight: 600;
}
.shop-fuss a { color: var(--text-muted-light); text-decoration: none; transition: color 0.3s; }
.shop-fuss a:hover { color: var(--gold); }
.shop-fuss-links { margin-top: 20px !important; }
.shop-fuss-klein { font-size: 0.75rem !important; opacity: 0.8; }

/* ── Rechtliches ── */
.shop-recht-titel {
  font-family: "Montserrat", sans-serif;
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--deep-blue);
  margin: 1.5rem 0 0.5rem;
}
.shop-recht-titel:first-of-type { margin-top: 0; }

/* ── Integrierte Zahlungsseite (Payrexx-iFrame) ── */
.shop-zahlung { max-width: 640px; }
.shop-zahlung-rahmen {
  margin-top: 1rem;
  /* bewusst ohne Rahmen/Hintergrund: die Payrexx-Seite ist via Look & Feel
     bereits creme (#faf9f6) und verschmilzt so nahtlos mit der Karte */
}
.shop-zahlung-rahmen iframe { display: block; border: 0; }
@media (max-width: 590px) {
  .shop-zahlung-rahmen iframe { height: 100vh !important; }
}

/* ── Warteseite: Spinner + Polling-Hinweis ── */
.shop-wartet {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.8rem;
  padding: 1rem 0 0.5rem;
}
.shop-spinner {
  width: 44px;
  height: 44px;
  border: 3px solid rgba(225, 181, 62, 0.35);
  border-top-color: var(--gold);
  border-radius: 50%;
  animation: shopDreht 0.9s linear infinite;
}
@keyframes shopDreht { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .shop-spinner { animation-duration: 2.5s; }
}

/* Fortschrittsbalken «Meine Bestellung» (Bestellt → Bezahlt → Bereit → Abgeholt) */
.shop-fortschritt {
  display: flex; gap: 4px; list-style: none; margin: 0 0 1.5rem; padding: 0;
  font-size: 0.75rem; color: var(--text-muted-dark);
}
.shop-fortschritt li {
  flex: 1; padding-top: 8px; text-align: center;
  border-top: 3px solid #d9d6cf;
}
.shop-fortschritt li.erreicht { border-top-color: var(--gold); color: var(--deep-blue); }
.shop-fortschritt li.aktuell { font-weight: 600; }

/* Auswahl der Zahlungsart */
.shop-feld .shop-zahlungsoption {
  display: flex; gap: 10px; align-items: flex-start; margin-bottom: 8px; cursor: pointer;
  font-size: 0.9rem; font-weight: 400; text-transform: none; letter-spacing: 0;
  color: var(--text-dark); line-height: 1.5;
}
.shop-zahlungsoption input { width: 18px; height: 18px; margin: 1px 0 0; flex-shrink: 0; accent-color: var(--gold); }