/* ============================================================
   UstaVibe — Frequenz-Shop
   Farbwelt der Coming-Soon-Seite: Tiefschwarz + Gold.
   Aufbau nach Template-Vorlage (Utility-Bar, Logo/Nav,
   Ankündigungsband, Hero mit Textbox, Über Uns, Galerie-Grid).
   ============================================================ */
:root{
  --bg:        #060608;                    /* Tiefschwarz (Coming-Soon) */
  --bg-soft:   #100e14;                    /* Karten / Panels */
  --bg-raise:  #17141d;                    /* Hover */
  --line:      rgba(180,155,80,0.3);       /* goldene Linien */
  --line-soft: rgba(180,155,80,0.15);
  --text:      #ece7db;                    /* warmes Hell */
  --text-dim:  rgba(232,216,160,0.55);     /* gedämpftes Gold */
  --gold:      #c8b060;                    /* Marken-Gold */
  --gold-hi:   #e8d8a0;                    /* helles Gold */
  --gold-grad: linear-gradient(135deg, #a07820 0%, #f0d060 30%, #ffeaa0 50%, #f0d060 70%, #a07820 100%);
  --violet:    #9080e0;                    /* Nebenakzent der Coming-Soon */
  --radius: 4px;
  --wrap: 1160px;
  --font-display: "Cormorant Garamond", Georgia, serif;
  --font-body: "Inter", system-ui, sans-serif;
}

*{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; }
body{
  background:var(--bg); color:var(--text);
  font-family:var(--font-body); font-size:16px; line-height:1.7;
  -webkit-font-smoothing:antialiased;
}
img{ max-width:100%; display:block; }
a{ color:var(--gold); text-decoration:none; }
a:hover{ color:var(--gold-hi); }
:focus-visible{ outline:2px solid var(--gold); outline-offset:3px; }

.wrap{ max-width:var(--wrap); margin:0 auto; padding:0 22px; }

/* ---------- Header (3 Ebenen wie Vorlage) ---------- */
.site-header{ position:sticky; top:0; z-index:50; background:rgba(6,6,8,.96); backdrop-filter:blur(8px); }

/* Ebene 1: Utility-Bar — Warenkorb + Suche rechts */
.utility-bar{ border-bottom:1px solid var(--line-soft); }
.utility-inner{ display:flex; justify-content:flex-end; align-items:center; gap:14px; height:48px; }
.header-search{ display:flex; border-bottom:1px solid var(--line); }
.header-search input{
  background:none; border:0; color:var(--text);
  padding:6px 10px; width:190px; font:inherit; font-size:.86rem;
}
.header-search input::placeholder{ color:var(--text-dim); }
.header-search button{
  background:none; border:0; color:var(--gold); cursor:pointer; font:inherit; font-size:.86rem; padding:6px 8px;
  letter-spacing:.06em;
}
.cart-btn{
  background:none; border:0; color:var(--text); cursor:pointer; font:inherit; font-size:.86rem;
  display:flex; align-items:center; gap:8px; letter-spacing:.04em;
}
.cart-btn .cart-ico{ font-size:1.05rem; }
.cart-btn:hover{ color:var(--gold-hi); }

/* Ebene 2: Logo links, Navigation rechts */
.brand-bar{ }
.brand-inner{ display:flex; align-items:center; justify-content:space-between; height:74px; }
.logo{
  font-family:var(--font-display); font-size:1.5rem; font-weight:600;
  letter-spacing:.28em; text-transform:uppercase; color:var(--text); white-space:nowrap;
}
.logo .vibe{
  background:var(--gold-grad); -webkit-background-clip:text; background-clip:text; color:transparent;
}
.main-nav{ display:flex; gap:26px; }
.main-nav a{
  color:var(--text); font-size:.9rem; letter-spacing:.05em; padding:6px 2px;
  border-bottom:2px solid transparent;
}
.main-nav a:hover, .main-nav a[aria-current="page"]{ color:var(--gold-hi); border-bottom-color:var(--gold); }

/* Ebene 3: goldenes Ankündigungsband */
.announce{
  background:var(--gold); color:#181203; text-align:center;
  font-size:.88rem; letter-spacing:.03em; padding:9px 16px;
}
.announce a{ color:#181203; text-decoration:underline; font-weight:600; }

/* ---------- Hero: Fläche mit Textbox links (wie Vorlage) ---------- */
.hero{
  position:relative; min-height:560px; display:flex; align-items:center;
  background:
    radial-gradient(900px 420px at 78% 30%, rgba(180,155,80,0.14), transparent 70%),
    radial-gradient(700px 380px at 20% 85%, rgba(120,100,200,0.12), transparent 70%),
    var(--bg);
  border-bottom:1px solid var(--line-soft);
  overflow:hidden;
}
.hero-wave{ position:absolute; inset:0; width:100%; height:100%; opacity:.5; pointer-events:none; }
.hero-box{
  position:relative; z-index:2;
  background:rgba(6,6,8,0.88); border:1px solid var(--line);
  max-width:480px; padding:44px 40px; margin:70px 22px;
}
.hero-box h1{
  font-family:var(--font-display); font-weight:500;
  font-size:clamp(1.9rem,4vw,2.7rem); line-height:1.2;
}
.hero-box h1 em{ font-style:normal; background:var(--gold-grad); -webkit-background-clip:text; background-clip:text; color:transparent; }
.hero-box .tagline{
  margin-top:10px; color:var(--text-dim); font-size:.82rem; letter-spacing:.32em; text-transform:uppercase;
}
.hero-box p.lead{ margin-top:18px; color:var(--text); opacity:.85; font-size:.95rem; }
.hz-jump{ margin-top:26px; display:flex; }
.hz-jump input{
  flex:1; min-width:0; background:none; border:1px solid var(--line); border-right:0;
  color:var(--text); padding:11px 16px; font:inherit; font-size:1rem;
}
.hz-jump button{
  background:var(--gold); color:#181203; border:0; padding:11px 20px; cursor:pointer;
  font:inherit; font-weight:600; letter-spacing:.04em;
}
.hz-jump button:hover{ background:var(--gold-hi); }
.hz-jump-hint{ color:var(--text-dim); font-size:.8rem; margin-top:10px; }

/* ---------- Buttons ---------- */
.btn{
  display:inline-block; padding:12px 30px; font-size:.9rem; cursor:pointer; border:0;
  font-family:var(--font-body); letter-spacing:.06em;
}
.btn-gold{ background:var(--gold); color:#181203; font-weight:600; }
.btn-gold:hover{ background:var(--gold-hi); color:#181203; }
.btn-ghost{ background:none; border:1px solid var(--line); color:var(--text); }
.btn-ghost:hover{ border-color:var(--gold); color:var(--gold-hi); }

/* ---------- Sektionen ---------- */
.section{ padding:76px 0; }
.section + .section{ border-top:1px solid var(--line-soft); }

/* zentrierte Serifen-Überschrift mit Goldlinie (wie „Über Uns" der Vorlage) */
.section-title{
  text-align:center; font-family:var(--font-display); font-weight:500;
  font-size:2.1rem; letter-spacing:.04em; margin-bottom:14px;
}
.section-title::after{
  content:""; display:block; width:64px; height:1px; margin:16px auto 0;
  background:linear-gradient(90deg, transparent, rgba(180,155,80,0.6), transparent);
}
.section-sub{ text-align:center; color:var(--text-dim); max-width:640px; margin:0 auto 40px; font-size:.95rem; }
.section-more{ text-align:center; margin-top:36px; }

/* Über uns (zentriert wie Vorlage) */
.about-text{ max-width:780px; margin:0 auto; text-align:center; color:var(--text); opacity:.85; }
.about-text p{ margin-bottom:16px; font-size:.97rem; }
.about-cta{ text-align:center; margin-top:26px; }
.about-stats{
  display:flex; justify-content:center; gap:64px; margin-top:44px; flex-wrap:wrap; text-align:center;
}
.about-stats .big{ font-family:var(--font-display); font-size:2.2rem; color:var(--gold-hi); }
.about-stats .label{ color:var(--text-dim); font-size:.82rem; letter-spacing:.12em; text-transform:uppercase; margin-top:4px; }

/* Kategorien: Galerie-Grid (wie Bildergalerie der Vorlage) */
.cat-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:20px; }
.cat-card{
  position:relative; background:var(--bg-soft); border:1px solid var(--line-soft);
  padding:34px 26px 28px; overflow:hidden;
  transition:border-color .2s ease, background .2s ease;
}
.cat-card:hover{ border-color:var(--line); background:var(--bg-raise); }
.cat-card::before{
  content:""; position:absolute; top:0; left:0; right:0; height:2px;
  background:linear-gradient(90deg, transparent, var(--cat-color, var(--gold)), transparent);
  opacity:.75;
}
.cat-card h3{ font-family:var(--font-display); font-weight:500; font-size:1.45rem; color:var(--text); letter-spacing:.03em; }
.cat-card .count{ color:var(--text-dim); font-size:.85rem; margin-top:8px; display:block; }

/* Produkt-Karten */
.prod-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(250px,1fr)); gap:20px; }
.prod-card{
  background:var(--bg-soft); border:1px solid var(--line-soft);
  padding:26px 24px; display:flex; flex-direction:column; gap:8px; color:var(--text);
  transition:border-color .2s ease, background .2s ease;
}
.prod-card:hover{ border-color:var(--line); background:var(--bg-raise); color:var(--text); }
.prod-card .hz{ font-family:var(--font-display); font-size:1.9rem; color:var(--gold); line-height:1; }
.prod-card .hz small{ font-size:.5em; color:var(--text-dim); margin-left:5px; letter-spacing:.1em; }
.prod-card .name{ font-size:.93rem; line-height:1.45; min-height:2.9em; opacity:.9; }
.prod-card .meta{ display:flex; justify-content:space-between; align-items:center; margin-top:auto; padding-top:10px; border-top:1px solid var(--line-soft); }
.prod-card .kat{ font-size:.74rem; color:var(--text-dim); letter-spacing:.08em; text-transform:uppercase; }
.prod-card .price{ color:var(--gold-hi); font-size:1rem; }
.prod-card.is-solfeggio{ border-color:var(--line); }
.prod-card.is-solfeggio .hz{
  background:var(--gold-grad); -webkit-background-clip:text; background-clip:text; color:transparent;
}

/* ---------- Kategorie-Seite ---------- */
.page-head{ padding:60px 0 26px; text-align:center; }
.page-head h1{ font-family:var(--font-display); font-weight:500; font-size:2.4rem; letter-spacing:.03em; }
.page-head h1::after{
  content:""; display:block; width:64px; height:1px; margin:16px auto 0;
  background:linear-gradient(90deg, transparent, rgba(180,155,80,0.6), transparent);
}
.page-head p{ color:var(--text-dim); margin:14px auto 0; max-width:640px; font-size:.95rem; }
.filter-bar{ display:flex; gap:12px; align-items:center; justify-content:center; flex-wrap:wrap; margin:10px 0 34px; }
.filter-bar label{ color:var(--text-dim); font-size:.85rem; letter-spacing:.05em; }
.filter-bar input{
  width:110px; background:none; border:1px solid var(--line); color:var(--text); padding:8px 12px; font:inherit;
}
.filter-bar .apply{ background:var(--gold); color:#181203; border:0; padding:9px 20px; cursor:pointer; font:inherit; font-weight:600; }
.filter-bar .apply:hover{ background:var(--gold-hi); }
.result-count{ color:var(--text-dim); font-size:.85rem; margin-bottom:20px; text-align:center; letter-spacing:.04em; }
.pagination{ display:flex; gap:8px; justify-content:center; margin:44px 0 24px; flex-wrap:wrap; }
.pagination button{
  background:none; border:1px solid var(--line-soft); color:var(--text);
  padding:8px 14px; cursor:pointer; font:inherit; font-size:.9rem;
}
.pagination button:hover{ border-color:var(--gold); }
.pagination button[aria-current="true"]{ background:var(--gold); color:#181203; border-color:var(--gold); font-weight:600; }

/* ---------- Produkt-Seite ---------- */
.product-hero{
  padding:70px 0 44px; text-align:center; border-bottom:1px solid var(--line-soft);
  background:radial-gradient(800px 380px at 50% 0%, rgba(180,155,80,0.12), transparent 70%), var(--bg);
}
.product-hero .hz-big{
  font-family:var(--font-display); font-size:clamp(3.4rem,9vw,5.6rem); color:var(--gold); line-height:1;
}
.product-hero .hz-big small{ font-size:.3em; color:var(--text-dim); letter-spacing:.14em; }
.product-hero.is-solfeggio .hz-big{
  background:var(--gold-grad); -webkit-background-clip:text; background-clip:text; color:transparent;
}
.product-hero.is-solfeggio .hz-big small{ background:none; -webkit-text-fill-color:var(--text-dim); }
.product-hero h1{ font-family:var(--font-display); font-weight:500; font-size:clamp(1.4rem,3.4vw,2rem); margin-top:16px; letter-spacing:.02em; }
.product-hero .kat-chip{
  display:inline-block; margin-top:16px; font-size:.78rem; color:var(--text-dim);
  border:1px solid var(--line); padding:5px 16px; letter-spacing:.14em; text-transform:uppercase;
}
.product-hero .kat-chip:hover{ color:var(--gold-hi); border-color:var(--gold); }
.product-wave{ width:100%; height:110px; margin-top:28px; }

.product-body{ display:grid; grid-template-columns:1.15fr .85fr; gap:56px; padding:56px 0 84px; }
.product-desc h2{ font-family:var(--font-display); font-weight:500; font-size:1.6rem; margin-bottom:16px; letter-spacing:.02em; }
.product-desc p{ color:var(--text); opacity:.82; }
.buy-box{
  background:var(--bg-soft); border:1px solid var(--line);
  padding:32px; height:fit-content; position:sticky; top:150px;
}
.buy-box .price{ font-family:var(--font-display); font-size:2.4rem; color:var(--gold-hi); }
.buy-box .format{ color:var(--text-dim); font-size:.85rem; margin:6px 0 22px; letter-spacing:.03em; }
.buy-box .snipcart-add-item{ width:100%; }
.preview{ margin-top:26px; padding-top:24px; border-top:1px solid var(--line-soft); }
.preview h3{ font-size:.82rem; margin-bottom:12px; color:var(--text-dim); font-weight:500; letter-spacing:.14em; text-transform:uppercase; }
.preview audio{ width:100%; }
.buy-note{ font-size:.8rem; color:var(--text-dim); margin-top:16px; }

.related{ padding:0 0 84px; }
.related h2{
  font-family:var(--font-display); font-weight:500; font-size:1.8rem; margin-bottom:28px; text-align:center; letter-spacing:.03em;
}

/* ---------- Footer ---------- */
.site-footer{ border-top:1px solid var(--line-soft); padding:48px 0; color:var(--text-dim); font-size:.86rem; }
.footer-inner{ display:flex; justify-content:space-between; gap:20px; flex-wrap:wrap; align-items:center; }
.footer-brand{ font-family:var(--font-display); letter-spacing:.24em; text-transform:uppercase; color:var(--text); }
.footer-inner nav{ display:flex; gap:20px; flex-wrap:wrap; }
.footer-inner a{ color:var(--text-dim); }
.footer-inner a:hover{ color:var(--gold-hi); }
.disclaimer{ margin-top:24px; font-size:.78rem; max-width:760px; line-height:1.6; opacity:.8; }

/* ---------- Responsive ---------- */
@media (max-width: 900px){
  .product-body{ grid-template-columns:1fr; gap:36px; }
  .buy-box{ position:static; }
  .main-nav{ display:none; }
  .header-search input{ width:120px; }
  .brand-inner{ justify-content:center; }
  .hero{ min-height:480px; }
  .hero-box{ margin:50px auto; }
}
@media (prefers-reduced-motion: reduce){
  *{ animation:none !important; transition:none !important; }
}

/* ---------- Rechtstexte (Impressum / Datenschutz) ---------- */
.legal{ max-width:780px; margin:0 auto; padding:24px 0 84px; }
.legal h2{ font-family:var(--font-display); font-weight:500; font-size:1.5rem; margin:38px 0 12px; letter-spacing:.02em; color:var(--gold-hi); }
.legal h3{ font-size:1.02rem; margin:24px 0 8px; color:var(--text); }
.legal p, .legal li{ color:var(--text); opacity:.85; font-size:.95rem; margin-bottom:12px; }
.legal ul{ padding-left:22px; margin-bottom:14px; }
.legal .fill{ color:var(--gold); background:rgba(180,155,80,0.08); padding:0 6px; border:1px dashed var(--line); }

/* ---------- Widerruf-Zustimmung im Kaufbereich ---------- */
.consent{ margin:0 0 18px; }
.consent label{ display:flex; gap:11px; align-items:flex-start; cursor:pointer; }
.consent input{
  appearance:none; flex:0 0 auto; width:18px; height:18px; margin-top:2px;
  border:1px solid var(--line); background:none; cursor:pointer; position:relative;
}
.consent input:checked{ background:var(--gold); border-color:var(--gold); }
.consent input:checked::after{
  content:"✓"; position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  color:#181203; font-size:13px; font-weight:700;
}
.consent span{ font-size:.8rem; line-height:1.55; color:var(--text-dim); }
.consent a{ color:var(--gold); text-decoration:underline; }
.buy-box .btn-gold:disabled,
.buy-box button:disabled{
  background:var(--bg-raise); color:var(--text-dim); cursor:not-allowed; border:1px solid var(--line-soft);
}