/* ==========================================================
   Abendlicht — Lea Kontos
   Dunkel, filmisch, würdevoll. Nachtblau, Kerzengold, Creme.
   ========================================================== */
:root {
  --bg:          #16191d;
  --bg-elevated: #1f2328;
  --bg-alt:      #1b1e23;
  --text:        #f0ebe2;   /* 14.6:1 auf --bg */
  --text-muted:  #b6b0a4;   /* 8.0:1 auf --bg */
  --accent:      #d9ae6a;   /* Kerzengold, 8.6:1 auf --bg */
  --accent-hover:#ecc78d;
  --accent-soft: rgba(217, 174, 106, .13);
  --gold:        #d9ae6a;
  --night:       #0f1114;
  --night-text:  #f0ebe2;
  --night-muted: #b6b0a4;
  --hairline:    rgba(240, 235, 226, .13);
  --shadow:      0 24px 60px rgba(0, 0, 0, .45);
}
body { background: var(--bg); }
::selection { background: var(--accent); color: #1a1510; }
:focus-visible { outline-color: var(--accent); }
a { color: var(--accent); }
a:hover { color: var(--accent-hover); }
.fill { background: #3a3120; color: #f3d9a4; border-color: #8a7040; }
.preview-banner { background: #0b0c0e; color: var(--text-muted); }
.preview-banner a { color: var(--accent); }

/* ---------- Kopf ---------- */
.site-header { background: rgba(22, 25, 29, .82); border-bottom: 1px solid var(--hairline); }
.brand-name { letter-spacing: .005em; }
.brand-sub { color: var(--accent); opacity: .85; }
.nav-links a { position: relative; }
.nav-links > li > a:not(.btn)::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -6px; height: 1px;
  background: var(--accent); transform: scaleX(0); transform-origin: left;
  transition: transform .4s var(--ease);
}
.nav-links > li > a:not(.btn):hover::after,
.nav-links > li > a[aria-current="true"]::after,
.nav-links > li > a[aria-current="page"]::after { transform: scaleX(1); }
.nav-links > li > a[aria-current="true"] { color: var(--accent); }
.nav-toggle { border-color: rgba(240,235,226,.28); }

.btn-primary, .nav-links .btn { background: var(--accent); color: #1a1510; }
.btn-primary:hover, .nav-links .btn:hover { background: var(--accent-hover); color: #1a1510; }
.btn-ghost { border-color: rgba(240, 235, 226, .3); color: var(--text); }
.btn-ghost:hover { background: rgba(240, 235, 226, .07); color: var(--text); }
.btn-light { background: var(--accent); color: #1a1510; }
.btn-light:hover { background: var(--accent-hover); color: #1a1510; }

/* ---------- Hero: Foto über die ganze Breite ---------- */
.hero {
  position: relative; min-height: min(100svh - 72px, 860px);
  display: flex; align-items: flex-end;
  padding-block: var(--s-7) var(--s-6);
  overflow: hidden; isolation: isolate;
}
.hero-grid { grid-template-columns: minmax(0, 600px); justify-content: end; position: static; gap: 0; }
.hero-media { position: absolute; inset: 0; z-index: -2; max-width: none; margin: 0; }
.hero-media picture { display: contents; }
.hero-media img {
  width: 100%; height: 100%; aspect-ratio: auto; object-fit: cover; object-position: 28% 28%;
  border-radius: 0; box-shadow: none; background: var(--bg);
}
.hero-media::after {
  content: ""; position: absolute; inset: 0; border: 0; border-radius: 0; opacity: 1;
  background:
    linear-gradient(270deg, rgba(22,25,29,.96) 0%, rgba(22,25,29,.86) 38%, rgba(22,25,29,.22) 70%, rgba(22,25,29,.05) 100%),
    linear-gradient(0deg, rgba(22,25,29,1) 0%, rgba(22,25,29,0) 38%);
}
.hero-quote { display: none; }
.hero h1 { font-size: clamp(2.9rem, 6.4vw, 5.2rem); font-weight: 300; line-height: 1.02; }
.hero h1 em { color: var(--accent); }
.hero .lead { color: #ded8cc; }
.hero-meta { border-top: 1px solid var(--hairline); padding-top: 1.1rem; }
.hero-meta svg { color: var(--accent); }

.scroll-cue {
  position: absolute; left: 50%; bottom: 1.4rem; transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: .35rem;
  color: var(--text-muted); text-decoration: none; font-size: .68rem;
  letter-spacing: .24em; text-transform: uppercase;
}
.scroll-cue svg { width: 18px; height: 18px; animation: cue 2.6s var(--ease) infinite; }
@keyframes cue { 0%, 100% { transform: translateY(0); opacity: .55; } 50% { transform: translateY(5px); opacity: 1; } }

@media (max-width: 860px) {
  /* Auf dem Handy steht das Foto als eigener Block über dem Text – kein Text auf dem Gesicht */
  .hero { display: block; min-height: 0; padding-block: 0 var(--s-5); overflow: visible; }
  .hero-grid { grid-template-columns: 1fr; justify-content: stretch; gap: var(--s-4); }
  .hero-media { position: relative; inset: auto; z-index: 0; order: -1; margin-bottom: var(--s-2); }
  .hero-media img { aspect-ratio: 4 / 5; height: auto; object-position: 50% 22%; border-radius: 3px; }
  .hero-media::after { background: linear-gradient(0deg, rgba(22,25,29,1) 2%, rgba(22,25,29,.25) 45%, rgba(22,25,29,.1) 100%); }
  .scroll-cue { display: none; }
}

/* ---------- Über mich ---------- */
.about-img img { filter: saturate(.88) contrast(1.03); }
.about-text blockquote { border-left-color: var(--accent); color: var(--accent); }
.signature span:first-child { color: var(--accent); }

/* ---------- Hörproben ---------- */
.samples { background: var(--bg-alt); border-block: 1px solid var(--hairline); }
.sample-grid video { box-shadow: var(--shadow); border: 1px solid var(--hairline); }
.sample-grid figcaption strong { color: var(--text); }

/* ---------- Zitat ---------- */
.quote-band { border-top: 1px solid var(--hairline); }
.quote-big { color: var(--text); }
.quote-sub::before { background: var(--accent); }
.quote-name { color: var(--accent); }

/* ---------- Angebote ---------- */
.package.featured {
  background: linear-gradient(180deg, rgba(217,174,106,.07), rgba(31,35,40,.9));
  border: 1px solid rgba(217, 174, 106, .38); box-shadow: var(--shadow);
}
.package li::before { border-color: var(--accent); }
.price { color: var(--text); }
.badge { background: rgba(217,174,106,.16); color: #f2dab0; border: 1px solid rgba(217,174,106,.4); }
.extra { background: var(--bg-elevated); border: 1px solid var(--hairline); }
.extra .icon { color: var(--accent); }
.vat-note { color: var(--text-muted); }

/* ---------- Ablauf ---------- */
.steps-section { background: var(--bg-alt); border-block: 1px solid var(--hairline); }
.steps li::before { color: var(--accent); }
.steps li::after { background: var(--hairline); }

/* ---------- Repertoire ---------- */
.rep-col { background: var(--bg-elevated); border-color: var(--hairline); transition: border-color .4s var(--ease); }
.rep-col:hover { border-color: rgba(217,174,106,.35); }
.rep-col h3 { color: var(--accent); }

/* ---------- Bestatter ---------- */
.partner { background: linear-gradient(150deg, #241f16 0%, #1b1e23 55%); border: 1px solid rgba(217, 174, 106, .28); }
.partner li { border-color: var(--hairline); }
.partner li svg { color: var(--accent); }

/* ---------- FAQ ---------- */
.faq details { transition: border-color .4s var(--ease); }
.faq details[open] { border-bottom-color: rgba(217,174,106,.4); }
.faq summary::after { border-color: var(--accent); }

/* ---------- Kontakt ---------- */
.contact { background: var(--bg-alt); }
.contact-ways a { background: var(--bg-elevated); border-color: var(--hairline); }
.contact-ways a:hover { border-color: rgba(217,174,106,.4); }
.contact-ways svg { color: var(--accent); }
form.card { background: var(--bg-elevated); border: 1px solid var(--hairline); }
input, select, textarea { background: #14171a; color: var(--text); border-color: rgba(240, 235, 226, .22); }
input::placeholder, textarea::placeholder { color: #8d887e; }
input[type="date"] { color-scheme: dark; }
.field.invalid input, .field.invalid select, .field.invalid textarea { border-color: #f0a398; }
.error { color: #f0a398; }
.check input { accent-color: var(--accent); }

/* ---------- Fuß ---------- */
.site-footer { background: var(--night); }
.site-footer .slogan { color: var(--accent); }
.to-top { color: var(--night-muted); text-decoration: none; }
.to-top:hover { color: var(--accent); }

/* ---------- Repertoire-Seite ---------- */
.chip { background: var(--bg-elevated); color: var(--text); border-color: var(--hairline); }
.chip:hover { border-color: rgba(217,174,106,.4); }
.chip[aria-pressed="true"] { background: var(--accent); color: #1a1510; border-color: var(--accent); }
.song-list li { border-color: var(--hairline); }
.song-list .cat { background: var(--accent-soft); color: var(--accent); }

.call-bar { background: rgba(22, 25, 29, .96); border-top: 1px solid var(--hairline); }

/* Größere Tippflächen auf dem Handy */
@media (max-width: 760px) {
  .site-footer li a { display: inline-block; padding-block: .62rem; }
  .footer-bottom { gap: var(--s-2) var(--s-3); }
  .to-top { padding-block: .45rem; }
}

/* ---------- Druck ---------- */
@media print {
  .site-header, .call-bar, .preview-banner, .scroll-cue, .nav-toggle, form.card, .samples { display: none !important; }
  body { background: #fff; color: #000; }
  .hero-media { display: none; }
  a[href^="tel"]::after { content: " (" attr(href) ")"; }
}

/* ---------- Ratgeber ---------- */
.guides { background: var(--bg-alt); }
.guide-card { background: var(--bg-elevated); }
.guide-card h3 { color: var(--text); transition: color .4s var(--ease); }
.guide-card:hover { border-color: rgba(217,174,106,.42); }
.guide-card:hover h3 { color: var(--accent); }
.guide-card .more { color: var(--accent); }
.article h1 em, .article h2 { color: var(--text); }
.article em { color: #e6dfd1; }
.breadcrumb a { color: var(--text-muted); }
.breadcrumb a:hover { color: var(--accent); }