/* ============================================================
   IN MY LENS Wedding — Editorial-Look (fest eingebaut 19.07.2026)
   Monochrom auf Stein, Cormorant + Montserrat. Liegt als Schicht
   über styles.css; löst die Mauve-Ära ab.
   ============================================================ */

@font-face {
  font-family: "MontserratVarLocal";
  src: url("/assets/fonts/bodoni-moda/montserrat-var.woff2") format("woff2");
  font-weight: 300 500;
  font-display: swap;
}

/* ── Farben ──────────────────────────────────────────────── */
:root {
  --mauve: #1A1A1A;
  --mauveDark: #000000;
  --bg: #E6E6DD; /* warmer Stein/Leinen */
}
body { background: #E6E6DD !important; }
header, .hero, section { background-color: transparent !important; }
.justified img, .justified video, .galleryItem { background: transparent !important; }

/* ── Schriften-System ─────────────────────────────────────
   Lese-Text: EB Garamond (Serife, wie kreativ-wedding/Mina Kuskaya)
   Bedienung (Menü, Buttons, Formulare, Labels): zarte Montserrat  */
@font-face {
  font-family: "GaramondTextLocal";
  src: url("/assets/fonts/bodoni-moda/ebgaramond-var.woff2") format("woff2");
  font-weight: 400 600;
  font-display: swap;
}
@font-face {
  font-family: "GaramondTextLocal";
  src: url("/assets/fonts/bodoni-moda/ebgaramond-italic.woff") format("woff");
  font-style: italic;
  font-weight: 400;
  font-display: swap;
}

body, span, a:not(.brandLogo) {
  font-family: "MontserratVarLocal", -apple-system, "Helvetica Neue", Arial, sans-serif !important;
}
body { font-weight: 300; }

/* Erzählender Text: Serife, eine Stufe größer (Garamond läuft klein) */
p, li, blockquote, .lead, .hinweis {
  font-family: "GaramondTextLocal", "CormorantLocal", ui-serif, Georgia, serif !important;
  font-weight: 400 !important;
  letter-spacing: .01em;
  font-size: 17.5px;
}
/* Links IM Text sind Text — sie erben die Garamond ihres Absatzes
   (Montserrat gilt nur für Bedienung: Menü, Buttons, Formulare) */
p a, li a, blockquote a, .lead a, .hinweis a {
  font-family: inherit !important;
  font-weight: inherit;
}
blockquote, em { font-style: italic; }

/* Bedien-Elemente bleiben klar und modern */
label, input, textarea, select, button, .btn,
.navlinks a, .mobilePanel a, .cookieBox, .cookieBox p {
  font-family: "MontserratVarLocal", -apple-system, "Helvetica Neue", Arial, sans-serif !important;
}
.cookieBox p { font-size: 13.5px; }

/* ── Navigation: gesperrte Kapitälchen ───────────────────── */
.navlinks a,
.mobilePanel a {
  font-weight: 300 !important;
  font-size: 12px !important;
  letter-spacing: .22em !important;
  text-transform: uppercase !important;
}

/* ── Logo: Cormorant-Wortmarke + WEDDING-Zeile ───────────── */
.brandImg { display: none !important; }
.brandLogo {
  display: inline-flex !important;
  flex-direction: column;
  align-items: center;
  text-decoration: none !important;
  color: #1A1A1A !important;
}
.brandLogo::before {
  content: "IN MY LENS";
  font-family: "CormorantLocal", ui-serif, Georgia, serif;
  font-weight: 500;
  font-size: 40px;
  letter-spacing: .26em;
  text-indent: .26em;
  white-space: nowrap;
}
.brandLogo::after {
  content: "WEDDING";
  font-family: "MontserratVarLocal", -apple-system, sans-serif;
  font-weight: 300;
  font-size: 12.5px;
  letter-spacing: .58em;
  text-indent: .58em;
  margin-top: 4px;
  white-space: nowrap;
}
@media (max-width: 700px) {
  .brandLogo::before { font-size: 30px; }
  .brandLogo::after { font-size: 10.5px; }
}

/* ── Überschriften: Cormorant, weit gesperrt wie das Logo ── */
h1, h2, h3,
.faqTitle,
.contactCardTitle {
  font-family: "CormorantLocal", ui-serif, Georgia, serif !important;
  font-weight: 500 !important; /* gleiches Gewicht wie das Logo */
  letter-spacing: .2em;
  line-height: 1.45;
}
/* Klarere Hierarchie: h2/h3 waren mit 16px kaum größer als der Text */
h2 { font-size: clamp(19px, 2vw, 25px) !important; }
h3 { font-size: clamp(16px, 1.6vw, 19px) !important; }

/* Kursive Akzent-Wörter in Überschriften (<em>) — weich und klein
   gesetzt zwischen den gesperrten Versalien */
h1 em, h2 em, h3 em {
  font-family: "CormorantLocal", ui-serif, Georgia, serif;
  font-style: italic;
  font-weight: 500;
  letter-spacing: .1em;
  text-transform: uppercase; /* Großbuchstaben bleiben — nur eben kursiv */
  font-size: 1.2em;
  line-height: 1;
}

p strong, .lead strong { font-weight: 600; } /* Garamond-Halbfett — bleibt zart */

/* ── Buttons: schmal und leise; 1 Schleier-CTA, Rest Linie ─ */
.btn {
  border-radius: 0 !important;
  box-shadow: none !important;
  background: #1A1A1A !important;
  padding: 10px 22px !important;
  font-weight: 300 !important;
  font-size: 11.5px !important;
  letter-spacing: .24em !important;
  text-indent: .24em !important;
}
.btn::before { display: none !important; }
.btn:hover {
  background: #000 !important;
  transform: none !important;
  box-shadow: none !important;
}
.btn.primary {
  background: rgba(255, 255, 255, .55) !important; /* zarter Schleier */
  color: #1A1A1A !important;
  border: 1px solid rgba(26, 26, 26, .25) !important;
}
.btn.primary:hover {
  background: #1A1A1A !important;
  color: #fff !important;
  border-color: #1A1A1A !important;
}
.btn:not(.primary) {
  background: transparent !important;
  color: #1A1A1A !important;
  border: 1px solid rgba(26, 26, 26, .45) !important;
}
.btn:not(.primary):hover {
  background: #1A1A1A !important;
  color: #fff !important;
}

.btnWhatsApp {
  background: #1A1A1A !important;
  border-color: #1A1A1A !important;
  color: #fff !important;
  box-shadow: none !important;
}
.btnWhatsApp:hover { background: #000 !important; border-color: #000 !important; }
.waFloat {
  background: #1A1A1A !important;
  box-shadow: 0 2px 10px rgba(0, 0, 0, .15) !important;
}
.toTop {
  background: #1A1A1A !important;
  border-radius: 0 !important;
}
.toTop:hover { background: #000 !important; }

/* ── Cookie-Banner: weiß, feine Linie, kantig ────────────── */
.cookieBox {
  background: #FFFFFF !important;
  border: 1px solid rgba(0, 0, 0, .14) !important;
  color: #1A1A1A !important;
  border-radius: 0 !important;
}
.cookieText, .cookieBox a { color: #1A1A1A !important; }
.cookieBtn {
  background: #fff !important;
  color: #1A1A1A !important;
  border: 1px solid #1A1A1A !important;
  border-radius: 0 !important;
}
.cookieBtnPrimary {
  background: #1A1A1A !important;
  color: #fff !important;
}

/* ── Hero-Wechselbilder (Startseite, hero-fade.js) ───────── */
.heroImage { position: relative; overflow: hidden; }
.heroImage .heroFadeLayer {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 1.3s ease;
}
.heroImage .heroFadeLayer.heroFadeAktiv { opacity: 1; }

/* ── Bordeaux-Tinte: nur auf hellen Flächen (Kontaktseite) ─ */
main a[href^="mailto:"],
main a[href^="tel:"],
.contactInfoValue {
  color: #781D17 !important;
}
main a[href^="mailto:"]:hover,
main a[href^="tel:"]:hover,
.contactInfoValue:hover {
  color: #571510 !important;
}