/* ==========================================================================
   refine.css — Premium-Feinschliff für die Startseite (Hochzeitsfarben.de)
   --------------------------------------------------------------------------
   Eigenständige Veredelungs-Schicht. Wird NUR auf index.html nach style.css
   geladen. Greift NICHT in das kompilierte Tailwind ein, nutzt aber dessen
   HSL-Design-Tokens. Vollständig reversibel (Datei + 1 <link> entfernen).
   Aesthetik: editorial / luxuriös-zurückhaltend. Champagner als Gold-Akzent.
   ========================================================================== */

:root {
  --gold: var(--champagne);                 /* 34 40% 72% – warmer Gold-Akzent */
  --ease-lux: cubic-bezier(0.22, 1, 0.36, 1);
  --rhythm: clamp(4rem, 9vw, 8.5rem);       /* großzügiger Sektionsrhythmus    */
}

/* --- 1. Globale Veredelung ------------------------------------------------ */

html { scroll-behavior: smooth; }

body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* Editorial-Serifen: aktivierte Ligaturen + ausgewogene Mediävalziffern,
   minimal engeres Tracking, optisch ruhigere Versalhöhe. */
.font-serif {
  font-feature-settings: "liga" 1, "dlig" 1, "kern" 1;
  letter-spacing: -0.012em;
}

/* Markierungs- und Fokus-Farben in der Markenwelt. */
::selection { background: hsl(var(--gold) / 0.35); color: hsl(var(--foreground)); }
:focus-visible { outline: 2px solid hsl(var(--gold)); outline-offset: 3px; }

/* --- 2. Wiederverwendbarer Gold-Eyebrow + Hairline ----------------------- */
/* Kleines, getracktes Versal-Label mit Goldlinie – das "edle" Signal über
   Überschriften. Wird per HTML-Hook .lux-eyebrow gesetzt (optional). */
.lux-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.85rem;
  font-family: var(--font-sans);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: hsl(var(--gold));
}
.lux-eyebrow::before {
  content: "";
  width: 2.25rem;
  height: 1px;
  background: hsl(var(--gold) / 0.7);
}

/* --- 3. Hero: kinematischer Feinschliff ---------------------------------- */
#main-content > section:first-of-type {
  /* Sanfte Vignette für mehr Tiefe und edlen Foto-Look */
}
#main-content > section:first-of-type::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: radial-gradient(120% 90% at 50% 30%,
              transparent 55%, rgba(0,0,0,0.28) 100%);
}
/* Inhalt über die Vignette heben */
#main-content > section:first-of-type > .relative.z-10 { z-index: 5; }

/* Ken-Burns ruhiger & gediegener (länger, geringerer Hub) */
.ken-burns { animation-duration: 32s !important; }

/* H1-Schatten weicher/edler statt hart */
#main-content > section:first-of-type h1 {
  text-shadow: 0 1px 2px rgba(0,0,0,0.25), 0 12px 40px rgba(0,0,0,0.35) !important;
}

/* Script-Eyebrow mit dezenter Goldlinie veredeln */
#main-content > section:first-of-type .font-script {
  display: inline-flex;
  align-items: center;
  gap: 1rem;
  color: hsl(var(--gold) / 0.92) !important;
}
#main-content > section:first-of-type .font-script::before {
  content: "";
  width: 2.5rem;
  height: 1px;
  background: hsl(var(--gold) / 0.6);
}

/* Eleganter Scroll-Hinweis am unteren Hero-Rand */
#main-content > section:first-of-type::before {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 1.75rem;
  z-index: 6;
  width: 1px;
  height: 3.25rem;
  transform: translateX(-50%);
  background: linear-gradient(to bottom, transparent, rgba(255,255,255,0.65));
  animation: lux-scroll-cue 2.4s var(--ease-lux) infinite;
}
@keyframes lux-scroll-cue {
  0%   { opacity: 0; transform: translateX(-50%) scaleY(0.3); transform-origin: top; }
  40%  { opacity: 1; }
  100% { opacity: 0; transform: translateX(-50%) scaleY(1);  transform-origin: top; }
}

/* --- 4. Buttons: edle Pille statt Bounce --------------------------------- */
a.bg-primary {
  letter-spacing: 0.04em;
  box-shadow: 0 8px 24px hsl(var(--primary) / 0.22),
              inset 0 1px 0 hsl(0 0% 100% / 0.12);
  transition: transform 0.5s var(--ease-lux), box-shadow 0.5s var(--ease-lux),
              background-color 0.4s ease !important;
}
a.bg-primary:hover {
  transform: translateY(-3px) !important;     /* ruhiger Lift statt scale-105 */
  box-shadow: 0 16px 40px hsl(var(--primary) / 0.30),
              inset 0 1px 0 hsl(0 0% 100% / 0.18);
}

/* --- 5. Sektions-Rhythmus & Hairline-Trenner ----------------------------- */
/* Vorhandene border-t-Trenner zu zentrierter Gold-Hairline veredeln */
#main-content > section.border-t { border-top-color: transparent !important; position: relative; }
#main-content > section.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(--gold) / 0.55), transparent);
}

/* --- 6. Bilder in der Galerie: edler Hover ------------------------------- */
#portfolio a { overflow: hidden; }
#portfolio img,
#portfolio picture img {
  transition: transform 0.9s var(--ease-lux), filter 0.6s ease;
  will-change: transform;
}
#portfolio a:hover img { transform: scale(1.045); filter: saturate(1.04); }

/* --- 7. Links: edle Unterstreichung ------------------------------------- */
#main-content a.underline { text-underline-offset: 0.35em; }

/* --- 8. Sanftes Scroll-Reveal (per IntersectionObserver getoggelt) ------- */
.lux-reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.9s var(--ease-lux), transform 0.9s var(--ease-lux);
}
.lux-reveal.is-visible { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .ken-burns { animation: none !important; }
  #main-content > section:first-of-type::before { animation: none; opacity: 0.5; }
  .lux-reveal { opacity: 1 !important; transform: none !important; transition: none; }
}

/* --- 9. Hero-Text rechtsbündig (sonst wie zuvor: weiß, unten) ----------- */
#main-content > section:first-of-type .max-w-3xl{
  margin-left: auto;           /* Textblock an den rechten Rand */
  text-align: right;
}
#main-content > section:first-of-type .max-w-3xl p[class*="max-w-xl"]{
  margin-left: auto;           /* Fließtext rechtsbündig im Block */
}
#main-content > section:first-of-type .flex.flex-col{
  justify-content: flex-end;   /* Buttons nach rechts (Desktop-Reihe) */
  align-items: flex-end;       /* Buttons nach rechts (Mobile-Spalte) */
}

/* --- 9b. Hero-Crop: Köpfe oben nicht abschneiden + Text weiter rechts --- */
/* Zoom-nur Ken-Burns, über den Köpfen verankert (kein Aufwärts-Translate) */
@keyframes lux-ken-burns { from { transform: scale(1.015); } to { transform: scale(1.085); } }
#main-content > section:first-of-type img.ken-burns{
  object-position: 50% 10% !important;   /* Ausschnitt nach oben → Köpfe sichtbar */
  transform-origin: 50% 14% !important;  /* Zoom oberhalb der Köpfe verankert */
  animation-name: lux-ken-burns !important;
}
/* Textblock näher an den rechten Viewport-Rand */
#main-content > section:first-of-type > .relative.z-10{
  max-width: none !important;                       /* container-1400px-Cap aufheben */
  padding-right: clamp(1.5rem, 4vw, 4rem) !important;
}

/* --- 11. Section 01: Blöcke abwechselnd dezent an die Ränder lehnen ------
   Nur Desktop (≥1024px). Block 1+3 (Bild links) leicht nach links,
   Block 2 (Bild rechts) leicht nach rechts. Größe bleibt unverändert. */
@media (min-width: 1024px){
  #portfolio .max-w-6xl > div:nth-of-type(odd){ transform: translateX(-5%); }
  #portfolio .max-w-6xl > div:nth-of-type(even){ transform: translateX(5%); }
}

/* --- 12. Konsistenter Sektions-Rhythmus (Whitespace-Vereinheitlichung) ---
   Drei Inhalts-Sektionen nutzen ab Tablet md:py-20 (5rem) statt des sonst
   durchgängigen md:py-24 (6rem). Das lässt die Seite beim Scrollen ungleich
   „atmen". Hier auf denselben großzügigen Rhythmus angeglichen — rein
   Abstände, kein Eingriff in Inhalt/Layout. Mobil (py-16) bleibt unberührt. */
@media (min-width: 768px){
  #main-content > section[class*="md:py-20"]{
    padding-top: 6rem;
    padding-bottom: 6rem;
  }
}

/* ───────── Schnellanfrage-Formular (Startseite, Sektion 05 Kontakt) ───────── */
.hf-qf{
  margin-top: 4rem;
  border: 1px solid hsl(var(--primary) / .18);
  background: hsl(var(--card));
  border-radius: calc(var(--radius) - .25rem);
  padding: 2rem 1.5rem;
  box-shadow: 0 1px 2px hsl(var(--foreground) / .04);
}
@media (min-width: 768px){
  .hf-qf{ padding: 3rem; margin-top: 5rem; }
}
.hf-qf-head{ max-width: 34rem; margin-bottom: 2rem; }
.hf-qf-grid{ display: grid; gap: 1.25rem 2rem; }
@media (min-width: 768px){
  .hf-qf-grid{ grid-template-columns: repeat(3, 1fr); }
}
.hf-qf label{
  display: block; font-size: 11px; text-transform: uppercase;
  letter-spacing: .3em; color: hsl(var(--foreground) / .45);
  margin-bottom: .5rem; font-weight: 400;
}
.hf-qf input[type="text"], .hf-qf input[type="email"], .hf-qf input[type="date"], .hf-qf textarea{
  width: 100%; background: transparent; border: 0; border-radius: 0;
  border-bottom: 1px solid hsl(var(--input));
  padding: .5rem 0 .65rem; font-size: .95rem;
  color: hsl(var(--foreground)); font-family: var(--font-sans);
  transition: border-color .3s ease;
}
.hf-qf ::placeholder{ color: hsl(var(--foreground) / .35); }
.hf-qf input:focus, .hf-qf textarea:focus{ outline: none; border-bottom-color: hsl(var(--primary)); }
.hf-qf textarea{ resize: vertical; min-height: 4.5rem; }
.hf-qf-row{ margin-top: 1.5rem; }
.hf-qf-privacy{ display: flex; gap: .65rem; align-items: flex-start; margin-top: 1.5rem; }
.hf-qf-privacy input{ margin-top: .2rem; accent-color: hsl(var(--primary)); }
.hf-qf-actions{ margin-top: 1.75rem; display: flex; flex-wrap: wrap; align-items: center; gap: 1.25rem; }
.hf-qf-note{ font-size: .8rem; color: hsl(var(--foreground) / .5); }