/* =========================================================
   ENTWURF 2 · ABENDLICHT – dunkel, filmisch, Kerzenlicht & Gold
   ========================================================= */
.theme-abendlicht {
  --bg: #0d0b09; --bg-alt: #13100d; --surface: #1a1612; --field: rgba(241,231,216,.05); --field-hover: rgba(241,231,216,.08);
  --ink: #f1e7d8; --ink-2: #dcd0bf; --muted: #a2968a; --line: rgba(241,231,216,.1);
  --accent: #d8b06a; --accent-hover: #e8c27c; --on-accent: #1a140c; --accent-soft: rgba(216,176,106,.14); --accent-text: #e2bd78;
  --dark-bg: #070605; --dark-surface: #12100d; --dark-ink: #f1e7d8; --dark-muted: #a2968a; --dark-accent-text: #e2bd78; --dark-line: rgba(241,231,216,.1);
  --font-display: "Palatino Linotype", Palatino, "Book Antiqua", "Iowan Old Style", Georgia, serif;
  --display-weight: 400; --display-tracking: -.025em; --display-leading: 1.02;
  --r-xl: 22px; --r-lg: 18px; --r-md: 12px;
  --shadow: 0 30px 80px -30px rgba(0,0,0,.9);
  color-scheme: dark;
}
.theme-abendlicht h3 { font-family: var(--font-display); font-weight: 400; font-size: 1.4rem; letter-spacing: 0; }
.theme-abendlicht .logo { font-family: var(--font-display); font-weight: 400; font-size: 1.3rem; letter-spacing: .02em; }
.theme-abendlicht .logo-mark { background: radial-gradient(circle at 50% 60%, #3a2c18, #120e0a); color: var(--accent); box-shadow: 0 0 20px rgba(216,176,106,.35); }
.theme-abendlicht .nav-toggle { background: var(--accent); } .theme-abendlicht .burger, .theme-abendlicht .burger::before, .theme-abendlicht .burger::after { background: #1a140c; }
.theme-abendlicht .nav-toggle[aria-expanded="true"] .burger { background: transparent; }
.theme-abendlicht .kicker { color: var(--accent-text); letter-spacing: .3em; }
.theme-abendlicht em { background: linear-gradient(180deg, #f3d9a2, #c8963e); -webkit-background-clip: text; background-clip: text; color: transparent; padding-right: .06em; }
.theme-abendlicht .btn-primary { background: linear-gradient(180deg, #e7c47e, #c99a4b); box-shadow: 0 10px 30px -10px rgba(216,176,106,.6), inset 0 1px 0 rgba(255,255,255,.4); }
.theme-abendlicht .btn-primary:hover { box-shadow: 0 14px 40px -8px rgba(216,176,106,.75), inset 0 1px 0 rgba(255,255,255,.4); }
.theme-abendlicht .btn-ghost { border-color: rgba(216,176,106,.45); color: var(--ink); }
.theme-abendlicht .btn-ghost:hover { border-color: var(--accent); background: rgba(216,176,106,.08); }
.theme-abendlicht .section { background: radial-gradient(70% 40% at 50% 0%, rgba(216,176,106,.06), transparent 70%), var(--bg); }
.theme-abendlicht .section--alt { background: radial-gradient(70% 40% at 50% 0%, rgba(216,176,106,.07), transparent 70%), var(--bg-alt); }
.theme-abendlicht .section--dark { background: var(--dark-bg); }
.theme-abendlicht .glow { background: #b4782e; opacity: .22; }
.theme-abendlicht .section-head { text-align: center; margin-inline: auto; }
.theme-abendlicht .section-head .kicker { justify-content: center; }
.theme-abendlicht .section-head::after { content: ""; display: block; width: 1px; height: 56px; margin: 28px auto 0; background: linear-gradient(var(--accent), transparent); }
.theme-abendlicht .ba-layout header, .theme-abendlicht .faq-head, .theme-abendlicht .candle-copy { text-align: left; }
.theme-abendlicht .site-header.is-scrolled { background: rgba(13,11,9,.82); }
.theme-abendlicht .review-bar { background: #000; }
.theme-abendlicht .chip.is-active { background: var(--accent); color: #1a140c; }
.theme-abendlicht .opt input:checked + .opt-body { border-color: var(--accent); background: rgba(216,176,106,.08); }
.theme-abendlicht .opt-body::after { background: var(--accent); color: #1a140c; }
.theme-abendlicht .swatch input:checked + .dot { box-shadow: 0 0 0 3px var(--bg), 0 0 0 5px var(--accent); }
.theme-abendlicht .model, .theme-abendlicht .info-card, .theme-abendlicht .care, .theme-abendlicht .quote-card, .theme-abendlicht .tip, .theme-abendlicht .cfg-step, .theme-abendlicht .faq details, .theme-abendlicht .partner-card, .theme-abendlicht .contact-card {
  background: linear-gradient(180deg, rgba(241,231,216,.045), rgba(241,231,216,.015)); border-color: rgba(216,176,106,.16); }
.theme-abendlicht .model:hover { border-color: rgba(216,176,106,.5); box-shadow: 0 30px 60px -30px rgba(216,176,106,.35); }
.theme-abendlicht .model-media img, .theme-abendlicht .bento img { filter: saturate(.85) contrast(1.05); }
.theme-abendlicht .t-num { -webkit-text-stroke: 1px var(--accent); font-family: var(--font-display); font-weight: 400; }
.theme-abendlicht .timeline li::after { background: linear-gradient(90deg, var(--accent), transparent); }
.theme-abendlicht .story-media-2 img { border-color: var(--bg); }
.theme-abendlicht .story-quote, .theme-abendlicht .quote-card blockquote { font-family: var(--font-display); }
.theme-abendlicht .faq summary { font-family: var(--font-display); font-weight: 400; font-size: 1.15rem; }
.theme-abendlicht .faq details[open] summary::after { background: var(--accent); color: #1a140c; }
.theme-abendlicht .inq-form { background: rgba(241,231,216,.03); }
.theme-abendlicht .wordmark { font-family: var(--font-display); font-weight: 400; letter-spacing: -.02em; background: linear-gradient(180deg, rgba(216,176,106,.35), rgba(216,176,106,.02)); -webkit-background-clip: text; background-clip: text; }
.theme-abendlicht .footer-claim { font-weight: 400; }
.theme-abendlicht .progress span { background: linear-gradient(90deg, #c99a4b, #f3d9a2); }

/* Hero */
.hero-abend { position: relative; min-height: calc(100svh - 100px); display: flex; flex-direction: column; justify-content: center; padding: 40px 0 90px; overflow: hidden;
  background: radial-gradient(50% 60% at 72% 50%, rgba(214,140,60,.22), transparent 70%), radial-gradient(30% 30% at 72% 62%, rgba(255,190,110,.18), transparent 70%), #0d0b09; }
.hero-abend .hero-grid { display: grid; grid-template-columns: 1fr 1.1fr; gap: clamp(24px, 4vw, 64px); align-items: center; position: relative; z-index: 1; }
.hero-abend .display { font-size: clamp(3.2rem, 8.5vw, 7.4rem); }
.hero-abend .hero-media { margin: 0; position: relative; animation: rise 1.6s .2s var(--ease) both; }
.hero-abend .hero-media img { width: 100%; aspect-ratio: 1; object-fit: cover;
  -webkit-mask-image: radial-gradient(ellipse 62% 62% at 50% 50%, #000 52%, transparent 100%); mask-image: radial-gradient(ellipse 62% 62% at 50% 50%, #000 52%, transparent 100%);
  filter: brightness(.82) contrast(1.12) sepia(.15); animation: breathe 7s ease-in-out infinite; }
@keyframes breathe { 50% { filter: brightness(.9) contrast(1.12) sepia(.18); } }
.hero-abend figcaption { position: absolute; bottom: 8%; right: 12%; font-size: .7rem; color: var(--muted); }
.embers { position: absolute; inset: 0; pointer-events: none; z-index: 0; }
.embers i { position: absolute; bottom: -10px; width: 3px; height: 3px; border-radius: 50%; background: #ffcf80; box-shadow: 0 0 8px 2px rgba(255,190,100,.6); opacity: 0; animation: ember 12s linear infinite; }
.embers i:nth-child(3n) { width: 2px; height: 2px; }
@keyframes ember { 0% { transform: translate(0, 0); opacity: 0; } 10% { opacity: .9; } 70% { opacity: .5; } 100% { transform: translate(40px, -90vh); opacity: 0; } }
.scroll-hint { position: absolute; left: 50%; bottom: 24px; transform: translateX(-50%); display: grid; justify-items: center; gap: 8px; font-size: .7rem; letter-spacing: .3em; text-transform: uppercase; color: var(--muted); text-decoration: none; z-index: 1; }
.scroll-hint i { width: 1px; height: 40px; background: linear-gradient(var(--accent), transparent); animation: drop 2.2s ease-in-out infinite; transform-origin: top; }
@keyframes drop { 0% { transform: scaleY(0); } 50% { transform: scaleY(1); } 100% { transform: scaleY(1); opacity: 0; } }

@media (max-width: 820px) {
  .hero-abend { min-height: 0; padding-top: 16px; }
  .hero-abend .hero-grid { grid-template-columns: 1fr; }
  .hero-abend .hero-media { order: -1; margin: -20px -40px -40px; }
  .scroll-hint { display: none; }
}

/* Hero-Diashow: Bilder liegen übereinander und blenden weich ineinander */
.hero-slides { display: grid; }
.hero-slides .slide { grid-area: 1 / 1; opacity: 0; transition: opacity 1.2s ease-in-out; }
.hero-slides .slide.is-active { opacity: 1; }
.hero-slides img { transform: scale(1.0); }
.hero-slides .slide.is-active img { animation: breathe 7s ease-in-out infinite, drift-in 2.4s ease-out both; }
@keyframes drift-in { from { transform: scale(1.035); } to { transform: scale(1); } }
.hero-slides figcaption { z-index: 2; transition: opacity .6s; }