/* ==========================================================================
   lux.css — Globale Premium-Schicht (Hochzeitsfarben.de)
   --------------------------------------------------------------------------
   Wird auf ALLEN Seiten nach style.css (kompiliertes Tailwind) geladen.
   Veredelt Bestehendes — fügt keinen Content ein. Eigener Namespace,
   keine neuen Tailwind-Klassen. Vollständig reversibel (Datei + 2 Zeilen
   Einbindung entfernen). Ästhetik: editorial, luxuriös-zurückhaltend.
   Startseite lädt zusätzlich refine.css (Hero-Spezifisches, konfliktfrei).
   Cache-Hinweis: 180 Tage immutable — Änderungen brauchen neuen ?v=.
   ========================================================================== */

:root {
  --lux-ink: 30 10% 11%;          /* tiefes warmes Ink (dunkler als --foreground) */
  --lux-gold: 34 40% 72%;         /* Champagner — Linien & Akzente auf dunkel     */
  --lux-gold-deep: 34 38% 38%;    /* Antik-Gold — lesbarer Text auf hell (≥4.5:1) */
  --lux-paper: 40 12% 97%;        /* = --background                               */
  --lux-ease: cubic-bezier(0.22, 1, 0.36, 1);
}

/* --- 1. Typografie & Textur ---------------------------------------------- */

html { scroll-behavior: smooth; }
body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
.font-serif {
  font-feature-settings: "liga" 1, "dlig" 1, "kern" 1;
  letter-spacing: -0.012em;
}
::selection { background: hsl(var(--lux-gold) / 0.35); color: hsl(30 10% 14%); }
:focus-visible { outline: 2px solid hsl(var(--lux-gold-deep)); outline-offset: 3px; }

/* --- 2. Gold als roter Faden ---------------------------------------------- */

/* Uppercase-Kicker (bisher Braun) → Antik-Gold. Nur .text-primary-Kicker,
   damit Kicker auf dunklen Flächen (text-white) unberührt bleiben. */
/* !important nötig: style.css enthält eine spätere Kontrast-Fix-Regel,
   die .text-primary hart auf Dunkelbronze setzt. */
#main-content p.text-primary[class*="tracking-"] {
  color: hsl(var(--lux-gold-deep)) !important;
}

/* Harte graue Sektions-Trenner → zentrierte Gold-Hairline */
#main-content section[class*="border-t"] {
  border-top-color: transparent !important;
  position: relative;
}
#main-content section[class*="border-t"]::before {
  content: "";
  position: absolute;
  top: 0; left: 50%;
  transform: translateX(-50%);
  width: min(220px, 40vw);
  height: 1px;
  background: linear-gradient(to right,
              transparent, hsl(var(--lux-gold) / 0.55), transparent);
}

/* --- 3. Header: Glas verfeinert ------------------------------------------- */

header.fixed {
  background: hsl(var(--lux-paper) / 0.86) !important;
  -webkit-backdrop-filter: blur(14px) saturate(1.15);
  backdrop-filter: blur(14px) saturate(1.15);
  border-bottom-color: transparent !important;
  box-shadow: 0 1px 0 hsl(30 10% 14% / 0.04), 0 12px 32px -18px hsl(30 10% 14% / 0.18) !important;
}
header.fixed::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1px;
  background: linear-gradient(to right,
              transparent 4%, hsl(var(--lux-gold) / 0.45) 50%, transparent 96%);
  pointer-events: none;
}
/* Nav-Links: Gold-Unterstreichung, die sich beim Hover aus der Mitte aufbaut */
header nav a:not([class*="bg-primary"]):not(:has(img)) {
  background-image: linear-gradient(hsl(var(--lux-gold-deep)), hsl(var(--lux-gold-deep)));
  background-repeat: no-repeat;
  background-position: 50% calc(100% - 0.1em);
  background-size: 0% 1px;
  transition: background-size 0.45s var(--lux-ease), color 0.3s ease;
}
header nav a:not([class*="bg-primary"]):not(:has(img)):hover {
  background-size: 100% 1px;
}

/* --- 4. Footer: dunkler Anker --------------------------------------------- */

footer {
  background: hsl(var(--lux-ink)) !important;
  border-top: none !important;
  position: relative;
}
footer::before {
  content: "";
  position: absolute;
  top: 0; left: 50%;
  transform: translateX(-50%);
  width: min(280px, 50vw);
  height: 1px;
  background: linear-gradient(to right,
              transparent, hsl(var(--lux-gold) / 0.5), transparent);
}
footer [class*="text-foreground"] { color: hsl(var(--lux-paper) / 0.58) !important; }
footer p[class*="uppercase"] { color: hsl(var(--lux-gold) / 0.85) !important; }
footer a { transition: color 0.3s ease; }
footer a:hover { color: hsl(var(--lux-gold)) !important; }
footer [class*="border-t"],
footer [class*="border-b"],
footer [class*="border-border"] { border-color: hsl(var(--lux-paper) / 0.12) !important; }

/* --- 5. Buttons: ruhiger Lift statt Bounce -------------------------------- */

a[class*="bg-primary"], button[class*="bg-primary"] {
  letter-spacing: 0.04em;
  box-shadow: 0 8px 24px hsl(33 20% 31% / 0.22),
              inset 0 1px 0 hsl(0 0% 100% / 0.12);
  transition: transform 0.5s var(--lux-ease), box-shadow 0.5s var(--lux-ease),
              background-color 0.4s ease !important;
}
a[class*="bg-primary"]:hover, button[class*="bg-primary"]:hover {
  transform: translateY(-3px) !important;      /* ersetzt scale-105-Bounce */
  box-shadow: 0 16px 40px hsl(33 20% 31% / 0.30),
              inset 0 1px 0 hsl(0 0% 100% / 0.18);
}

/* --- 6. Bilder: langsamer, edler Zoom -------------------------------------- */

#main-content a[class*="overflow-hidden"] { display: block; }
#main-content a[class*="overflow-hidden"] img {
  transition: transform 1s var(--lux-ease), filter 0.6s ease;
  will-change: transform;
}
#main-content a[class*="overflow-hidden"]:hover img {
  transform: scale(1.04);
  filter: saturate(1.04);
}

/* --- 7. Motion: Reveal, Stagger, View Transitions -------------------------- */

.lux-reveal {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 0.9s var(--lux-ease), transform 0.9s var(--lux-ease);
}
.lux-reveal.is-visible { opacity: 1; transform: none; }

/* Grid-Kinder: kaskadierendes Aufblenden (JS setzt --lux-i pro Kind) */
.lux-stagger > * {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.7s var(--lux-ease), transform 0.7s var(--lux-ease);
  transition-delay: calc(var(--lux-i, 0) * 60ms);
}
.lux-stagger.is-visible > * { opacity: 1; transform: none; }

/* Weicher Fade zwischen Seiten (moderne Browser, rein progressiv) */
@view-transition { navigation: auto; }
::view-transition-old(root) { animation-duration: 0.18s; }
::view-transition-new(root) { animation-duration: 0.26s; }

/* --- 8. Einheitlicher Sektionsrhythmus ------------------------------------- */

@media (min-width: 768px) {
  #main-content section[class*="md:py-20"] {
    padding-top: 6rem;
    padding-bottom: 6rem;
  }
}

/* --- 9. Reduced Motion: alles ruhigstellen --------------------------------- */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .lux-reveal, .lux-stagger > * {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  #main-content a[class*="overflow-hidden"] img { transition: none; }
  a[class*="bg-primary"]:hover, button[class*="bg-primary"]:hover { transform: none !important; }
  ::view-transition-old(root), ::view-transition-new(root) { animation: none; }
}

/* ── Kostenrechner-Navlink (Desktop): erst ab 1120px einblenden —
   darunter reicht der Platz neben dem Logo nicht (0px Luft bei 1150px);
   im Mobile-Menü ist der Kostenrechner ohnehin enthalten. ── */
.mt-nav-rechner { display: none; }
@media (min-width: 1200px) { .mt-nav-rechner { display: inline-block; } }