/* ==============================
   IMPERIAL SYNDICATE – Gesamt-CSS (bereinigt)
   ============================== */

/* --- Navigation Styling --- */
header nav ul{
  display:flex; justify-content:center; gap:30px;
  list-style:none; margin:60px 0 40px; padding:0;
}
header nav li{ display:inline-block; position:relative; }
header nav a{
  color:#fff; text-decoration:none; font-weight:bold; font-size:16px;
  transition:color .3s; white-space:nowrap;
}
header nav a:hover{ color:gold; }

/* === DROPDOWN: überlagert, dichter dran, links verschoben, HINTERGRUND TRANSPARENT === */
header nav li > ul,
header nav ul ul,
nav .sub-menu,
.navigation ul ul{
  position:absolute !important;
  top:100% !important;
  left:0 !important; right:auto !important;
  transform:translate(-180px, -60px) !important;
  display:none;
  min-width:220px;
  margin:0; padding:4px 0;
  list-style:none;
  white-space:nowrap;
  z-index:9999;
  background:transparent !important;
  backdrop-filter:none !important;
  box-shadow:none !important;
  border:none !important;
  transition:opacity .2s ease, transform .2s ease;
}

/* Dropdown zeigen */
header nav li:hover > ul,
header nav li:focus-within > ul{ display:block; }

/* Untermenü-Links */
header nav li > ul > li{ display:block; }
header nav li > ul a{
  display:block;
  padding:6px 14px;
  line-height:1.1;
  color:#fff !important;
  background:transparent !important;
  text-shadow:0 0 6px rgba(0,0,0,.6);
  transition:color .25s ease, text-shadow .25s ease;
}
header nav li > ul a:hover{
  color:gold !important;
  text-shadow:0 0 10px rgba(255,215,0,.35);
}

/* Hauptleiste */
header nav > ul > li > a{ line-height:1; padding:12px 0; }

@media (min-width:769px){
  header nav li:last-child > ul{ left:0 !important; right:auto !important; }
}

/* ==============================
   HOTFIX – Navigation immer horizontal
   ============================== */
header nav ul{
  display:flex !important; flex-direction:row !important; justify-content:center !important;
  gap:30px !important; list-style:none !important; padding:0 !important; margin:60px 0 40px !important;
}
header nav li{ display:inline-block !important; }
header nav a{ white-space:nowrap !important; }

/* --- Hero Bereich (Startseite) --- */
.split-hero{ display:flex; justify-content:center; align-items:stretch; margin:80px 0; gap:0; }
.split-hero .split{ flex:1; position:relative; overflow:hidden; }
.split-hero img{ width:100%; height:auto; display:block; }
.split-hero .left img{ border-radius:5px 0 0 5px; }
.split-hero .right img{ border-radius:0 5px 5px 0; }

.hero-btn{
  position:absolute; left:50%; bottom:17%; transform:translate(-50%,30px);
  padding:14px 46px; background:rgba(0,0,0,.85); color:#fff; text-decoration:none;
  font-weight:800; font-size:15px; letter-spacing:.4px; border-radius:8px; border:2px solid #fff;
  opacity:0; animation:slideUp 1s ease forwards .5s;
  transition:background .3s ease, color .3s ease, transform .25s ease, border-color .3s ease;
}
.hero-btn:hover,.hero-btn:focus-visible{
  background:rgba(0,0,0,.95); color:gold; border-color:gold;
  transform:translate(-50%,0) scale(1.08); outline:none;
}
@keyframes slideUp{
  from{ opacity:0; transform:translate(-50%,30px); }
  to{ opacity:1; transform:translate(-50%,0); }
}
@media(max-width:768px){
  .split-hero{ flex-direction:column; gap:20px; }
  .hero-btn{ bottom:16%; padding:12px 32px; font-size:14px; animation-delay:.3s; }
}

/* ==============================
   IMPERIAL DIVIDER – Black & Gold Edition
   ============================== */
.imperial-divider{
  border:none; height:4px; width:85%; margin:20px auto 18px;
  display:block; border-radius:4px; position:relative; overflow:hidden;
  background:linear-gradient(to right,rgba(0,0,0,.85),rgba(255,215,0,.9),rgba(0,0,0,.85));
  box-shadow:0 0 22px rgba(255,215,0,.25),0 0 6px rgba(0,0,0,.65) inset;
  opacity:.98; transform:scaleX(.3); animation:dividerReveal 1.4s ease forwards;
}
@keyframes dividerReveal{
  from{ transform:scaleX(.3); opacity:0; }
  to{ transform:scaleX(1); opacity:1; }
}
.imperial-divider::before{
  content:""; position:absolute; top:0; left:-30%; width:30%; height:100%;
  background:linear-gradient(120deg,rgba(255,255,255,0)0%,rgba(255,255,255,.85)50%,rgba(255,255,255,0)100%);
  transform:skewX(-25deg); animation:imperialLight 4s linear infinite; opacity:.3;
}
@keyframes imperialLight{ 0%{left:-30%;} 50%{left:100%;} 100%{left:100%;} }
.imperial-divider:hover{ box-shadow:0 0 30px rgba(255,215,0,.45),0 0 8px rgba(0,0,0,.75) inset; transition:box-shadow .4s; }
@media(max-width:768px){ .imperial-divider{ width:90%; height:3px; margin:15px auto 12px; } }

/* ==============================
   NEWS TITLE – LIQUID GOLD
   ============================== */
.imperial-news-title{ text-align:center; margin:40px 0 28px; position:relative; }
.luxury-news{
  font-family:"Cinzel",serif; font-size:64px; font-weight:700; letter-spacing:6px; text-transform:uppercase;
  display:inline-block; margin:0; color:#d6b206; text-shadow:0 0 10px rgba(214,178,6,.35);
  opacity:0; transform:translateY(24px); animation:fadeUpLuxury 1s ease forwards; position:relative;
}
@supports((-webkit-background-clip:text) or (background-clip:text)){
  .luxury-news{
    color:transparent;
    background-image:
      linear-gradient(90deg,#8a6a03 0%,#e9c74f 25%,#fff1b0 50%,#e9c74f 75%,#8a6a03 100%),
      linear-gradient(115deg,rgba(255,255,255,0)35%,rgba(255,255,255,.35)50%,rgba(255,255,255,0)65%);
    background-size:200% 100%,300% 100%;
    -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
    animation:fadeUpLuxury 1s ease forwards, liquidGold 6s ease-in-out infinite;
  }
}
@keyframes fadeUpLuxury{ from{opacity:0; transform:translateY(24px);} to{opacity:1; transform:translateY(0);} }
@keyframes liquidGold{ 0%{background-position:0% 50%,-30% 50%;} 50%{background-position:100% 50%,130% 50%;} 100%{background-position:0% 50%,-30% 50%;} }
.luxury-news::after{
  content:""; position:absolute; left:50%; transform:translateX(-50%) scaleX(0);
  bottom:-14px; height:3px; width:60%; border-radius:3px;
  background:linear-gradient(to right,rgba(0,0,0,.85),rgba(255,215,0,.95),rgba(0,0,0,.85));
  box-shadow:0 0 18px rgba(255,215,0,.35); animation:underlineReveal .9s .2s ease-out forwards;
}
@keyframes underlineReveal{ to{ transform:translateX(-50%) scaleX(1); } }
.luxury-news:hover{ text-shadow:0 0 22px rgba(255,215,0,.55); transition:text-shadow .35s; }
@media(max-width:768px){
  .luxury-news{ font-size:42px; letter-spacing:4px; }
  .luxury-news::after{ bottom:-10px; height:2px; width:70%; }
  .imperial-news-title{ margin:28px 0 20px; }
}

/* ==============================
   IMPERIAL LOUNGE – TEASER CARDS
   ============================== */
.imperial-cards{
  display:flex; justify-content:center; align-items:stretch; gap:24px;
  margin:40px auto; max-width:1200px; padding:0 16px; flex-wrap:wrap;
}
.imperial-card{
  flex:1 1 320px; max-width:360px; text-align:center; color:#fff; text-decoration:none;
  border:1px solid rgba(255,215,0,.22); border-radius:14px; padding:26px 24px;
  background:rgba(0,0,0,.28); box-shadow:0 10px 34px rgba(0,0,0,.35);
  transition:transform .25s, box-shadow .25s, border-color .25s;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
}
.imperial-card:hover,.imperial-card:focus-visible{
  transform:translateY(-3px); box-shadow:0 18px 44px rgba(255,180,0,.35);
  border-color:#ffd98a; outline:none;
}
.imperial-card h3{
  margin:0 0 10px; font-weight:800; letter-spacing:.06em; color:#ffb400;
  text-transform:uppercase; font-size:28px; line-height:1.2;
}
.imperial-card p{ margin:0 0 18px; opacity:.95; font-size:17px; line-height:1.55; color:#eee; }
.imperial-btn{
  display:inline-block; padding:13px 30px; border-radius:999px; border:1px solid #ffb400;
  font-weight:800; letter-spacing:.02em; color:#fff;
  background:linear-gradient(180deg,rgba(255,180,0,.18),rgba(255,180,0,.08)),rgba(0,0,0,.6);
  box-shadow:0 8px 26px rgba(255,180,0,.22); transition:all .25s;
}
.imperial-card:hover .imperial-btn,.imperial-card:focus-visible .imperial-btn{
  background:#ffb400; color:#000; border-color:#ffd98a;
}
@media(max-width:900px){
  .imperial-cards{ gap:20px; }
  .imperial-card{ flex:1 1 100%; max-width:none; }
}

/* ==============================
   PAGE LOCKS
   ============================== */
.show-only{ display:none !important; }
body.page--home .show-only[data-page="home"],
body.page--first-look .show-only[data-page="first-look"],
body.page--imperial-lounge .show-only[data-page="imperial-lounge"],
body.page--syndicate-tattoo .show-only[data-page="syndicate-tattoo"],
body.page--imperial-experience .show-only[data-page="imperial-experience"],
body.page--coffee-x-art .show-only[data-page="coffee-x-art"],
body.page--private-booking .show-only[data-page="private-booking"]{ display:block !important; }

/* ==============================
   FORMULARE & TEXTFARBE – Standard (Kontakt etc.)
   ============================== */

/* Allgemeine Textfarbe auf dunklem Hintergrund */
body {
  color: #fff;
}

/* Eingabefelder – Standard (Kontaktseiten etc.) */
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="url"],
input[type="password"],
textarea {
  background-color: rgba(0, 0, 0, 0.6);
  color: #fff;
  border: 1px solid rgba(255, 215, 0, 0.35);
  border-radius: 6px;
  padding: 10px 14px;
  width: 100%;
  box-sizing: border-box;
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

/* Hover- und Fokuszustände */
input:focus,
textarea:focus {
  border-color: gold;
  box-shadow: 0 0 10px rgba(255, 215, 0, 0.35);
  outline: none;
}

/* Platzhaltertext (z. B. Name, E-Mail, Nachricht) */
input::placeholder,
textarea::placeholder {
  color: rgba(255, 255, 255, 0.65);
}

/* Labels über den Eingabefeldern */
label {
  display: block;
  margin-bottom: 6px;
  color: #f8f8f8;
  font-weight: 600;
  letter-spacing: 0.3px;
}

/* Buttons */
button,
input[type="submit"] {
  background: linear-gradient(180deg, rgba(255,215,0,0.9), rgba(180,140,0,0.85));
  color: #000;
  border: none;
  border-radius: 30px;
  padding: 12px 28px;
  font-weight: 800;
  letter-spacing: 0.6px;
  box-shadow: 0 6px 18px rgba(255, 215, 0, 0.3);
  cursor: pointer;
  transition: all 0.3s ease;
}

button:hover,
input[type="submit"]:hover {
  background: gold;
  box-shadow: 0 0 25px rgba(255, 215, 0, 0.5);
  transform: translateY(-1px);
}

/* Fehlermeldungen, Pflichtfelder etc. */
form .error,
form span,
form small {
  color: #ffcc00 !important;
  font-size: 13px;
}

/* Dropdown-Felder (select) */
select {
  background-color: rgba(0, 0, 0, 0.6);
  color: #fff;
  border: 1px solid rgba(255, 215, 0, 0.35);
  border-radius: 6px;
  padding: 10px;
}

/* Links im Formular */
form a {
  color: #ffd700;
  text-decoration: none;
}
form a:hover {
  text-decoration: underline;
}

/* ==============================
   SHOP – Produktname in Gold
   ============================== */
.cc-shop span.fn {
  color: #ffd700 !important;
  text-shadow: 0 0 8px rgba(255, 215, 0, 0.45);
}

/* Produktname auf der Produktdetailseite */
.cc-shop-product-desc span.fn {
  color: #ffd700 !important;
  text-shadow: 0 0 8px rgba(255, 215, 0, 0.45);
}

/* ==============================
   SHOP / CHECKOUT – lesbare Felder & Texte
   ============================== */

/* Nur Formulare im Shop-Bereich (Checkout) überschreiben */
.cc-shop form input[type="text"],
.cc-shop form input[type="email"],
.cc-shop form input[type="tel"],
.cc-shop form input[type="password"],
.cc-shop form input[type="number"],
.cc-shop form input[type="search"],
.cc-shop form textarea,
.cc-shop form select {
  background-color: #ffffff !important;  /* Weißer Hintergrund im Checkout */
  color: #000000 !important;             /* Schwarze Schrift */
  border: 1px solid #888 !important;
}

/* Platzhaltertext in den Feldern (Shop) */
.cc-shop form input::placeholder,
.cc-shop form textarea::placeholder {
  color: #777777 !important;
}

/* Labels bei den Feldern im Shop */
.cc-shop form label {
  color: #000000 !important;
}

/* Text in der Bestellübersicht (Warenkorb/Kasse) */
.cc-shop .order-summary,
.cc-shop .order-summary *,
.cc-shop table td,
.cc-shop table th,
.cc-shop .price,
.cc-shop .price *,
.cc-shop .vat,
.cc-shop .vat *,
.cc-shop .total,
.cc-shop .total *,
.cc-shop .shipping,
.cc-shop .shipping * {
  color: #000000 !important;
}
/* =========================================
   FIX: Checkout Schritt 2 – Adresseingabe sichtbar machen
   ========================================= */

/* Alle Formular-Labels, Texte und Platzhalter im Checkout-Schritt 2 */
body.page--checkout form label,
body.page--checkout form,
body.page--checkout form * {
  color: #000 !important; /* Schwarze Schrift */
}

/* Eingabefelder im Checkout Schritt 2 */
body.page--checkout form input[type="text"],
body.page--checkout form input[type="email"],
body.page--checkout form input[type="tel"],
body.page--checkout form input[type="password"],
body.page--checkout form input[type="number"],
body.page--checkout form input[type="search"],
body.page--checkout form textarea,
body.page--checkout form select {
  background-color: #fff !important;  /* Weißer Hintergrund */
  color: #000 !important;             /* Schwarzer Text */
  border: 1px solid #888 !important;
}

/* Platzhalter sichtbar */
body.page--checkout form input::placeholder,
body.page--checkout form textarea::placeholder {
  color: #777 !important;
}
/* =========================================
   UNIVERSAL FIX – Checkout Adresse sichtbar machen
   (ohne Kontaktformulare zu beeinflussen)
   ========================================= */

/* Alle bekannten Checkout-Container */
.cc-shop,
.cc-shop-checkout,
.cc-shop-order-address,
.cc-shop-order,
.cc-shop-checkout-step,
.cc-shop form,
.cc-shop form * {
  color: #000 !important; /* Schwarze Schrift */
}

/* Eingabefelder im Checkout */
.cc-shop input[type="text"],
.cc-shop input[type="email"],
.cc-shop input[type="tel"],
.cc-shop input[type="password"],
.cc-shop input[type="number"],
.cc-shop textarea,
.cc-shop select,
.cc-shop-checkout input[type="text"],
.cc-shop-checkout input[type="email"],
.cc-shop-checkout input[type="tel"],
.cc-shop-checkout input[type="number"],
.cc-shop-checkout textarea,
.cc-shop-checkout select {
  background: #ffffff !important;
  color: #000000 !important;
  border: 1px solid #888 !important;
}

/* Platzhalter sichtbar */
.cc-shop input::placeholder,
.cc-shop textarea::placeholder,
.cc-shop-checkout input::placeholder,
.cc-shop-checkout textarea::placeholder {
  color: #777 !important;
}

/* Labels im Checkout */
.cc-shop label,
.cc-shop-checkout label,
.cc-shop-order-address label {
  color: #000 !important;
}
/* =========================================
   FIX: Checkout lesbar machen (nur im Shop)
   ========================================= */

/* Labels im Checkout */
.j-checkout label,
.cc-checkout-addressform-mandatory,
.cc-checkout-addressform-mandatory *,
.cc-checkout-shipping-address-form label,
.cc-checkout-billing-address-form label {
    color: #000 !important;
}

/* Eingabefelder im Checkout */
.j-checkout input[type="text"],
.j-checkout input[type="email"],
.j-checkout input[type="tel"],
.j-checkout input[type="password"],
.j-checkout input[type="number"],
.j-checkout textarea,
.j-checkout select {
    background: #ffffff !important;
    color: #000 !important;
    border: 1px solid #999 !important;
}

/* Platzhalter */
.j-checkout input::placeholder,
.j-checkout textarea::placeholder {
    color: #666 !important;
}

/* Überschriften + kleine Texte */
.j-checkout .cc-checkout-subheadings,
.j-checkout .cc-shop-label {
    color: #000 !important;
}

/* Tabellen & Beträge */
.j-checkout table td,
.j-checkout table th,
.j-checkout .price,
.j-checkout .price *,
.j-checkout .order-summary,
.j-checkout .order-summary * {
    color: #000 !important;
}
/* Checkout – Gold-Zwang entfernen */
.cc-shop small,
.cc-shop small *,
.cc-shop td small,
.cc-shop .cc-checkout-total small,
.cc-shop .cc-checkout-products small {
    color: #000 !important;
}
/* Checkout – Preise schwarz erzwingen */
.cc-shop span.product-entry-total,
.cc-shop td.cc-checkout-number span,
.cc-shop td.cc-checkout-total,
.cc-shop td.cc-checkout-total *,
.cc-shop .product-entry-total {
    color: #000000 !important;
}
/* --- FINAL: erzwingt schwarze Preise im Checkout --- */

.cc-shop table td[class*="checkout"],
.cc-shop table td[class*="checkout"] *,
.cc-shop .cc-checkout-number,
.cc-shop .cc-checkout-number *,
.cc-shop .cc-checkout-total,
.cc-shop .cc-checkout-total *,
.cc-shop .cc-checkout-label *,
.cc-shop span.product-entry-total,
.cc-shop span.product-entry-total *,
.cc-shop .product-entry-total,
.cc-shop .product-entry-total *,
.cc-shop .price,
.cc-shop .price *,
.cc-shop small,
.cc-shop small *,
.cc-shop td,
.cc-shop td *,
.cc-shop .cc-right,
.cc-shop .cc-right * {
    color: #000 !important;
}
/* Nur im CHECKOUT Farben überschreiben */
body.j-shop #cc-checkout,
body.j-shop #cc-checkout * {
    color: #000 !important;
}

/* Preise, Summen, MwSt nur im Checkout */
body.j-shop .cc-checkout-number span,
body.j-shop td.cc-checkout-number,
body.j-shop td.cc-checkout-number *,
body.j-shop .product-entry-total,
body.j-shop .product-entry-total *,
body.j-shop td.cc-checkout-total,
body.j-shop td.cc-checkout-total *,
body.j-shop .cc-checkout-products td,
body.j-shop .cc-checkout-products td * {
    color: #000 !important;
}

/* Inline-Farben nur im Checkout überschreiben */
body.j-shop span[style*="color"] {
    color: #000 !important;
}