/*
╔══════════════════════════════════╗
║      ᚺ  ᚢ  ᚷ  ᛁ  ᚾ  ᛋ  ᛟ  ᚾ      ║
║         H  U  G  I  N  S  O  N    ║
╚══════════════════════════════════╝
   THOMAS W. BECKERT — Light Theme "Atelier Hell" (PRODUKTIV seit 2026-07-22)
   Helles Farbschema: warmes Elfenbein, dunkles Braun-Schwarz
   als Text, abgedunkeltes Gold.
   Wird NACH style.css geladen und überschreibt die Tokens.
*/

/* ── TOKEN-FLIP ── */
:root {
  --navy: #f6f2ea;            /* Seitenhintergrund: warmes Elfenbein */
  --navy-light: #fdfbf7;      /* Karten / Modals: fast weiß */
  --navy-mid: #ece5d8;        /* erhöhte Flächen */
  --gold: #9c7a35;            /* Gold abgedunkelt für Kontrast auf hell */
  --gold-light: #7f6228;
  --gold-dim: rgba(156,122,53,0.12);
  --cream: #292317;           /* Primärtext: warmes Braun-Schwarz */
  --cream-dim: #6d665a;       /* Sekundärtext */
  --warm-white: #3a332a;
  --text: #5f594e;            /* Fließtext */
  --leather: #d9c9b4;
  --leather-light: #c9b69d;
  --border: rgba(122,95,42,0.18);
  --border-hover: rgba(122,95,42,0.38);
}

body {
  background: var(--navy);
  color: var(--cream);
}

/* ── NAVIGATION (hartcodierte dunkle Hintergründe) ── */
nav {
  background: rgba(246,242,234,0.92);
  border-bottom: 1px solid rgba(122,95,42,0.15);
}
nav.scrolled {
  background: rgba(246,242,234,0.97);
  box-shadow: 0 2px 20px rgba(60,45,20,0.08);
}
.mobile-menu {
  background: rgba(246,242,234,0.98);
}

/* Logos: Original ist dunkel, invert(1) war nur fürs dunkle Theme nötig */
.nav-logo,
.footer-logo {
  filter: none;
}
/* Footer-Logo: style.css dimmt auf 0.3 (Geist auf dunkel) — auf hell zu blass */
.footer-logo { opacity: 0.75; }

/* ── HERO: Overlay bleibt DUNKEL wie im Original (DANY 2026-07-22:
      kein helles Auslaufen) — style.css-Overlay gilt unverändert ── */
/* Hero-Text bleibt hell — er steht auf dem Foto, nicht auf der Seite */
.hero h1 { color: #f4efe6; }
.hero h1 em { color: #d8b671; }
.hero-kicker { color: #d8b671; }
.hero-sub { color: #d9d2c4; }
.hero-logo { filter: invert(1); }
.hero-slider-dot { background: rgba(246,242,234,0.4); border-color: rgba(122,95,42,0.5); }
.hero-scroll small { color: #8a8272; }

/* ── WORKSHOP-TEASER (Startseite): Text steht auf Foto mit dunklem
      Overlay — Tokens lokal zurück auf hell drehen ── */
.workshop-teaser-content {
  --cream: #f4efe6;
  --cream-dim: #d9d2c4;
  --gold: #d8b671;
}

/* ── BUTTONS ── */
.btn-filled { color: #fdfbf7; }
.btn-outline:hover { color: #fdfbf7; }

/* ── WhatsApp-Button (Shop): Button bleibt dunkelgrau, Schrift muss
      weiß bleiben (style.css nutzt var(--cream) = jetzt dunkel) ── */
.btn-wa { color: #fdfbf7 !important; }
.btn-wa:hover { color: #d8b671 !important; }

/* ── KARTEN & SCHATTEN weicher ── */
.card:hover {
  box-shadow: 0 12px 32px rgba(80,62,30,0.14);
}

/* ── FOOTER ── */
footer { border-top-color: rgba(122,95,42,0.15); }
.footer-bottom { border-top-color: rgba(122,95,42,0.15); }
.footer-bottom p { color: #8a8272; }

/* ── CONSENT-BANNER ── */
.consent-banner {
  background: rgba(246,242,234,0.97);
  border-top: 1px solid rgba(122,95,42,0.2);
  box-shadow: 0 -4px 24px rgba(60,45,20,0.1);
}

/* ── CART / MODALS: Overlays etwas heller, Inhalte erben Tokens ── */
.cart-overlay { background: rgba(41,35,23,0.35); }
.modal-overlay { background: rgba(41,35,23,0.45); }

/* ── Formularfelder (Checkout) ── */
.checkout-form input,
.checkout-form textarea {
  background: #ffffff;
  color: var(--cream);
  border: 1px solid rgba(122,95,42,0.3);
}
.checkout-form input::placeholder,
.checkout-form textarea::placeholder { color: #9a917f; }

/* ── Mail-Fallback-Modal (Styles kommen per JS nach dieser Datei,
      darum body-Präfix für höhere Spezifität) ── */
body .mf-overlay { background: rgba(41,35,23,0.5); }
body .mf-modal { background: var(--navy-light); color: var(--cream); border-color: rgba(122,95,42,0.4); }
body .mf-close { color: var(--cream); }
body .mf-addr, body .mf-body { background: rgba(122,95,42,0.08); border-color: rgba(122,95,42,0.25); }
body .mf-btn { color: var(--cream); }
body .mf-btn:hover { color: #fdfbf7; }
body .mf-btn.mf-primary { color: #fdfbf7; }
body .mf-btn.mf-primary:hover { color: var(--cream); }

/* ── Anfrage-Formular-Modal (Styles kommen per JS nach dieser Datei,
      darum body-Präfix für höhere Spezifität) ── */
body .af-overlay { background: rgba(41,35,23,0.5); }
body .af-form input,
body .af-form textarea {
  background: #ffffff;
  color: var(--cream);
  border: 1px solid rgba(122,95,42,0.3);
}
body .af-form input::placeholder,
body .af-form textarea::placeholder { color: #9a917f; }
body .af-close { color: var(--cream); }
body .af-btn { color: #fdfbf7; }
body .af-btn:hover { background: transparent; color: var(--cream); }
body .af-alt { border: 1px solid rgba(122,95,42,0.4); color: var(--cream); }
body .af-alt:hover { background: rgba(122,95,42,0.08); }
body .af-error { color: #b04a3a; }