/* =========================================================
   JACKIE | Sängerin für Hochzeiten & Events
   Eigenständige Bühnen-Ästhetik: warmes Creme, dunkle Bühne,
   Kupfer aus dem Logo, Cormorant Garamond (Überschriften),
   Cinzel (Wortmarke), Jost (Fließtext). Alle Schriften lokal.
   ========================================================= */

@font-face{ font-family:'Cormorant Garamond'; font-weight:300; font-style:normal; font-display:swap; src:url('../fonts/cormorant-garamond-latin-300-normal.woff2') format('woff2'); }
@font-face{ font-family:'Cormorant Garamond'; font-weight:300; font-style:italic; font-display:swap; src:url('../fonts/cormorant-garamond-latin-300-italic.woff2') format('woff2'); }
@font-face{ font-family:'Cormorant Garamond'; font-weight:400; font-style:normal; font-display:swap; src:url('../fonts/cormorant-garamond-latin-400-normal.woff2') format('woff2'); }
@font-face{ font-family:'Cormorant Garamond'; font-weight:400; font-style:italic; font-display:swap; src:url('../fonts/cormorant-garamond-latin-400-italic.woff2') format('woff2'); }
@font-face{ font-family:'Cormorant Garamond'; font-weight:500; font-style:normal; font-display:swap; src:url('../fonts/cormorant-garamond-latin-500-normal.woff2') format('woff2'); }
@font-face{ font-family:'Cinzel'; font-weight:400; font-style:normal; font-display:swap; src:url('../fonts/cinzel-latin-400-normal.woff2') format('woff2'); }
@font-face{ font-family:'Jost'; font-weight:300; font-style:normal; font-display:swap; src:url('../fonts/jost-latin-300-normal.woff2') format('woff2'); }
@font-face{ font-family:'Jost'; font-weight:400; font-style:normal; font-display:swap; src:url('../fonts/jost-latin-400-normal.woff2') format('woff2'); }
@font-face{ font-family:'Jost'; font-weight:500; font-style:normal; font-display:swap; src:url('../fonts/jost-latin-500-normal.woff2') format('woff2'); }

/* ---------- Tokens ---------- */
:root{
  --cream:      #F9F3EC;
  --cream-2:    #F1E7DB;
  --stage:      #1C1210;   /* warme Bühnen-Dunkelheit */
  --stage-2:    #2A1B17;
  --text:       #33261F;
  --text-soft:  #75655A;
  --text-on-dark:#F6EEE6;
  --soft-on-dark:#C4B4A6;

  --copper:        #A56A45;  /* aus dem Logo */
  --copper-light:  #C9956C;
  --copper-glow:   #E0B18A;

  --line:      #E3D6C6;
  --line-dark: rgba(246,238,230,.16);

  --font-display: 'Cormorant Garamond', Georgia, serif;
  --font-brand:   'Cinzel', 'Cormorant Garamond', Georgia, serif;
  --font-body:    'Jost', 'Segoe UI', system-ui, sans-serif;

  --wrap: 1140px;
  --gutter: clamp(20px, 5vw, 56px);
  --section: clamp(72px, 10vw, 120px);
  --nav-h: 84px;

  --fs-label: .78rem;
  --fs-nav:   .82rem;
  --fs-small: .92rem;
  --ls-label: .22em;
}

*{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; }
/* Ankerziele unter der fixen Leiste freihalten */
[id]{ scroll-margin-top: calc(var(--nav-h) + 16px); }
/* Leiste bekommt beim Scrollen eine feine Kante */
.site-header{ transition: box-shadow .25s ease; }
.site-header.is-scrolled{ box-shadow: 0 6px 24px rgba(33,29,24,.08); }

body{
  margin:0;
  font-family:var(--font-body); font-weight:300;
  font-size:1.0625rem; line-height:1.7;
  color:var(--text); background:var(--cream);
}
img{ max-width:100%; height:auto; display:block; }
a{ color:var(--copper); text-decoration:none; transition:color .2s; }
a:hover{ color:var(--copper-light); }
p{ margin:0 0 1.1em; }
strong{ font-weight:500; color:var(--text); }

h1,h2,h3,h4{
  font-family:var(--font-display); font-weight:400;
  line-height:1.08; margin:0 0 .5em; color:var(--text);
}
h1{ font-size:clamp(2.8rem, 6vw, 5rem); font-weight:300; letter-spacing:.01em; }
h2{ font-size:clamp(2.1rem, 4vw, 3.2rem); font-weight:300; letter-spacing:.01em; }
h3{ font-size:1.5rem; font-weight:400; line-height:1.2; }
.em{ font-style:italic; font-weight:300; color:var(--copper); }

/* Kapitälchen-Label mit kurzer Kupferlinie davor */
.eyebrow{
  display:flex; align-items:center; gap:14px;
  font-family:var(--font-body); font-weight:500;
  font-size:var(--fs-label); letter-spacing:var(--ls-label); text-transform:uppercase;
  color:var(--copper); margin-bottom:1.3em;
}
.eyebrow::before{ content:""; width:34px; height:1px; background:var(--copper); flex:none; }
.section-head .eyebrow{ justify-content:center; }

.lead{ font-size:1.2rem; line-height:1.6; }
.soft{ color:var(--text-soft); }

.wrap{ width:100%; max-width:var(--wrap); margin:0 auto; padding:0 var(--gutter); }
.wrap--narrow{ max-width:760px; }

.section{ padding:var(--section) 0; }
.section--alt{ background:var(--cream-2); }
.section--dark{ background:var(--stage); color:var(--soft-on-dark); }
.section--dark h1,.section--dark h2,.section--dark h3,.section--dark strong{ color:var(--text-on-dark); }
.section--dark .eyebrow,.section--dark .em{ color:var(--copper-glow); }
.section--dark .eyebrow::before{ background:var(--copper-glow); }
.section--dark a{ color:var(--copper-glow); }
.section--dark a:hover{ color:var(--text-on-dark); }
.section--dark .lead{ color:var(--text-on-dark); }

.section-head{ max-width:680px; margin:0 auto clamp(40px, 6vw, 72px); text-align:center; }
.section-head p{ color:var(--text-soft); }

/* ---------- Buttons ---------- */
.btn{
  display:inline-block;
  font-family:var(--font-body); font-weight:500;
  font-size:var(--fs-nav); letter-spacing:.18em; text-transform:uppercase;
  padding:16px 34px;
  border:1px solid var(--copper); background:var(--copper); color:#fff;
  transition:background .2s, border-color .2s, color .2s; cursor:pointer;
}
.btn:hover{ background:var(--copper-light); border-color:var(--copper-light); color:#fff; }
.btn--ghost{ background:transparent; color:var(--copper); }
.btn--ghost:hover{ background:var(--copper); color:#fff; }
.section--dark .btn{ background:var(--copper-glow); border-color:var(--copper-glow); color:var(--stage); }
.section--dark .btn:hover{ background:var(--text-on-dark); border-color:var(--text-on-dark); color:var(--stage); }
.section--dark .btn--ghost{ background:transparent; color:var(--copper-glow); }
.section--dark .btn--ghost:hover{ background:var(--copper-glow); color:var(--stage); }
.btn-row{ display:flex; flex-wrap:wrap; gap:12px 14px; margin-top:28px; }

:focus-visible{ outline:2px solid var(--copper); outline-offset:3px; }
.skip-link{ position:absolute; left:-9999px; top:0; background:var(--copper); color:#fff; padding:10px 16px; z-index:200; }
.skip-link:focus{ left:16px; top:16px; }

/* ---------- Navigation ---------- */
.site-header{
  position:sticky; top:0; z-index:100;
  background:rgba(249,243,236,.92);
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
  border-bottom:1px solid var(--line);
}
.site-header .wrap{ max-width:1280px; }
.nav{ display:flex; align-items:center; justify-content:space-between; min-height:var(--nav-h); }
.brand{
  display:flex; align-items:center; gap:16px;
  font-family:var(--font-brand); font-weight:400;
  font-size:1.2rem; letter-spacing:.3em; text-transform:uppercase; color:var(--text);
}
.brand:hover{ color:var(--text); }
.brand img{ width:48px; height:48px; }
.brand small{
  font-family:var(--font-brand); font-weight:400;
  font-size:inherit; letter-spacing:inherit;
  color:var(--copper); padding-left:16px; border-left:1px solid var(--line); line-height:1.2;
}
.nav-links{
  display:flex; gap:clamp(16px, 2vw, 28px); list-style:none; margin:0; padding:0; white-space:nowrap;
  font-family:var(--font-body); font-weight:500; font-size:var(--fs-nav); letter-spacing:.14em; text-transform:uppercase;
}
.nav-links a{ color:var(--text); padding:6px 0; border-bottom:1px solid transparent; }
.nav-links a:hover,.nav-links a.is-active{ color:var(--copper); border-bottom-color:var(--copper); }
.nav-toggle{ display:none; background:none; border:0; cursor:pointer; padding:8px; color:var(--text); }
.nav-toggle span{ display:block; width:28px; height:1.5px; background:currentColor; margin:5px 0; transition:transform .2s, opacity .2s; }
.nav-toggle[aria-expanded="true"] span:nth-child(1){ transform:translateY(6.5px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3){ transform:translateY(-6.5px) rotate(-45deg); }
@media (max-width: 1180px){
  .brand{ font-size:1.05rem; gap:12px; } .brand img{ width:42px; height:42px; }
  .nav-toggle{ display:block; }
  .nav-links{
    position:absolute; left:0; right:0; top:100%; flex-direction:column; gap:0;
    background:var(--cream); border-bottom:1px solid var(--line);
    max-height:0; overflow:hidden; transition:max-height .3s ease;
  }
  .nav-links.is-open{ max-height:600px; }
  .nav-links li{ border-top:1px solid var(--line); }
  .nav-links a{ display:block; padding:18px var(--gutter); border-bottom:0; font-size:1rem; }
}

/* ---------- Hero: die Bühne ---------- */
.hero{
  position:relative; overflow:hidden;
  background:
    radial-gradient(ellipse 60% 70% at 78% 30%, rgba(201,149,108,.28), transparent 65%),
    radial-gradient(ellipse 50% 60% at 15% 100%, rgba(165,106,69,.14), transparent 70%),
    var(--stage);
  color:var(--soft-on-dark);
  padding:clamp(64px, 9vw, 120px) 0 clamp(72px, 10vw, 128px);
}
.hero .wrap{ position:relative; z-index:1; }
.hero h1{ color:var(--text-on-dark); }
.hero .em{ color:var(--copper-glow); }
.hero .eyebrow{ color:var(--copper-glow); } .hero .eyebrow::before{ background:var(--copper-glow); }
.hero .lead{ color:var(--text-on-dark); max-width:520px; }
.hero .btn{ background:var(--copper-glow); border-color:var(--copper-glow); color:var(--stage); }
.hero .btn:hover{ background:var(--text-on-dark); border-color:var(--text-on-dark); }
.hero .btn--ghost{ background:transparent; color:var(--copper-glow); }
.hero .btn--ghost:hover{ background:var(--copper-glow); color:var(--stage); }
.hero-grid{ display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(40px, 6vw, 96px); align-items:center; }
/* Der Sprenkel-Ring aus dem Logo als große Bühnenkulisse hinter dem Foto */
.hero-mark{
  position:absolute; z-index:0; pointer-events:none; user-select:none;
  width:min(62vw, 760px); right:-8%; top:50%; transform:translateY(-50%);
  opacity:.38;
}
@media (max-width: 900px){
  .hero-grid{ grid-template-columns:1fr; }
  .hero-media{ order:-1; max-width:440px; margin:0 auto; }
  .hero-mark{ width:120vw; right:-30%; top:8%; transform:none; opacity:.35; }
}

/* ---------- Bildrahmen mit Kupfer-Kontur (Signatur) ---------- */
.media{
  position:relative; margin:0; overflow:visible; isolation:isolate;
  background:linear-gradient(135deg, var(--cream-2), var(--line));
}
.media::after{
  content:""; position:absolute; inset:0; transform:translate(14px, 14px);
  border:1px solid var(--copper); pointer-events:none; z-index:-1;
}
.hero .media::after{ border-color:var(--copper-glow); opacity:.7; }
.media img{ width:100%; height:100%; object-fit:cover; }
.media figcaption{
  display:none; position:absolute; inset:0; align-items:center; justify-content:center; text-align:center;
  padding:16px; font-family:var(--font-body); font-weight:500; font-size:var(--fs-label); letter-spacing:.14em; text-transform:uppercase; color:var(--text-soft);
}
.media.is-missing img{ display:none; }
.media.is-missing figcaption{ display:flex; }
.media--portrait{ aspect-ratio:4/5; }
.media--card{ aspect-ratio:4/3; }
@media (max-width: 900px){ .hero-media{ aspect-ratio:4/3; } }

/* ---------- Über mich ---------- */
.split{ display:grid; grid-template-columns:.85fr 1.15fr; gap:clamp(44px, 7vw, 100px); align-items:center; }
@media (max-width: 900px){ .split{ grid-template-columns:1fr; } .split .media{ max-width:440px; } }

/* ---------- Anlässe: Galerie statt Kacheln ---------- */
.grid{ display:grid; gap:clamp(28px, 4vw, 48px) clamp(24px, 3vw, 36px); }
.grid--3{ grid-template-columns:repeat(3, 1fr); }
.grid--2{ grid-template-columns:repeat(2, 1fr); }
@media (max-width: 960px){ .grid--3{ grid-template-columns:repeat(2, 1fr); } }
@media (max-width: 600px){ .grid--3,.grid--2{ grid-template-columns:1fr; } }
.card{ background:none; border:0; }
.card .media{ margin-bottom:26px; }
.card-body{ padding:0 14px 0 0; }
.card-body h3{ margin-bottom:.45em; }
.card-body p{ margin:0; color:var(--text-soft); }

/* ---------- Hörproben: Setlist ---------- */
.audio-grid{ display:grid; grid-template-columns:repeat(2, 1fr); gap:0 clamp(32px, 5vw, 72px); }
@media (max-width: 760px){ .audio-grid{ grid-template-columns:1fr; } }
.audio-item{
  display:grid; grid-template-columns:44px 1fr; grid-template-rows:auto auto auto; column-gap:14px;
  padding:22px 0; border-top:1px solid var(--line); counter-increment:track;
}
.audio-item::before{
  content:counter(track, decimal-leading-zero); grid-row:1 / span 3;
  font-family:var(--font-display); font-size:1.6rem; font-weight:300; color:var(--copper); line-height:1.1;
}
.audio-grid{ counter-reset:track; }
.audio-item h3{ margin:0 0 2px; font-size:1.35rem; }
.audio-item .meta{ font-family:var(--font-body); font-weight:500; font-size:var(--fs-label); letter-spacing:var(--ls-label); text-transform:uppercase; color:var(--text-soft); margin-bottom:12px; }
.audio-item audio{ width:100%; }
.audio-note{ text-align:center; margin-top:44px; }

/* ---------- Repertoire ---------- */
.repertoire:not(.is-open) .repertoire-list li:nth-child(n+19){ display:none; }
.repertoire-list{ list-style:none; margin:0; padding:0; columns:3 240px; column-gap:40px; }
.repertoire-list li{ break-inside:avoid; padding:10px 0; border-bottom:1px solid var(--line); color:var(--text-soft); font-size:.98rem; }
.repertoire-list li strong{ display:block; font-family:var(--font-display); font-weight:400; font-size:1.25rem; line-height:1.15; color:var(--text); }
.repertoire-toggle{ text-align:center; margin-top:32px; }

/* ---------- Ablauf ---------- */
.steps{ display:grid; grid-template-columns:repeat(3, 1fr); gap:clamp(28px, 4vw, 56px); counter-reset:step; }
@media (max-width: 800px){ .steps{ grid-template-columns:1fr; } }
.step{ position:relative; padding-left:22px; border-left:1px solid var(--copper); }
.step::before{
  counter-increment:step; content:"0" counter(step);
  display:block; font-family:var(--font-display); font-size:2.4rem; font-weight:300; color:var(--copper); line-height:1; margin-bottom:12px;
}
.step h3{ margin-bottom:.45em; }
.step p{ margin:0; color:var(--text-soft); }

/* ---------- Stimmen ---------- */
.quote{ margin:0; padding:28px 0 0 26px; border-left:1px solid var(--copper); }

.quote p{ font-family:var(--font-display); font-style:italic; font-weight:300; font-size:1.3rem; line-height:1.45; color:var(--text); }
.quote cite{ display:block; margin-top:14px; font-style:normal; font-family:var(--font-body); font-weight:500; font-size:var(--fs-label); letter-spacing:var(--ls-label); text-transform:uppercase; color:var(--copper); }

/* ---------- Klangatelier: Panel ---------- */
.ka-panel{
  position:relative; isolation:isolate; background:#fff; border:1px solid var(--line);
  padding:clamp(36px, 5vw, 64px);
}
.ka-panel::after{ content:""; position:absolute; inset:0; transform:translate(14px,14px); border:1px solid var(--copper); pointer-events:none; z-index:-1; }
.ka-grid{ display:grid; grid-template-columns:1.15fr .85fr; gap:clamp(36px, 5vw, 72px); align-items:start; }
@media (max-width: 900px){ .ka-grid{ grid-template-columns:1fr; } }
.ka-list{ list-style:none; margin:0; padding:0; }
.ka-list li{ padding:20px 0; border-top:1px solid var(--line); }
.ka-list li:last-child{ border-bottom:1px solid var(--line); }
.ka-list h3{ margin-bottom:.35em; font-size:1.3rem; }
.ka-list p{ margin:0; color:var(--text-soft); }

/* ---------- Badges (transparent, ohne Kasten) ---------- */
.badges{ display:flex; flex-wrap:wrap; gap:22px 30px; align-items:center; justify-content:center; }
.badge{
  display:flex; align-items:center; justify-content:center;
  height:104px; max-width:130px;
  font-family:var(--font-body); text-align:center; color:var(--text-soft);
}
.badge--wide{ max-width:200px; }
.badge img{ max-height:100%; max-width:100%; width:auto; mix-blend-mode:multiply; }
.badge.is-missing img{ display:none; }
.badge span{ display:none; font-size:.66rem; letter-spacing:.04em; }
.badge.is-missing span{ display:block; }

/* ---------- Kontakt ---------- */
.contact-form{ max-width:720px; margin:0 auto; }
.contact-direct{
  max-width:720px; margin:clamp(44px, 6vw, 72px) auto 0; text-align:center;
  padding-top:clamp(32px, 4vw, 44px); border-top:1px solid var(--line);
}
.contact-direct h3{ margin-bottom:.9em; }
.contact-inline{
  list-style:none; margin:0 0 30px; padding:0;
  display:flex; flex-wrap:wrap; justify-content:center; gap:8px 18px;
}
.contact-inline li{ display:flex; align-items:center; gap:18px; }
.contact-inline li:not(:last-child)::after{ content:"·"; color:var(--copper); }

.field{ margin-bottom:18px; }
.field label{ display:block; margin-bottom:7px; font-family:var(--font-body); font-weight:500; font-size:var(--fs-label); letter-spacing:var(--ls-label); text-transform:uppercase; color:var(--text); }
.field input,.field textarea,.field select{
  width:100%; padding:13px 15px; border:1px solid var(--line); background:#fff; color:var(--text);
  font-family:var(--font-body); font-weight:300; font-size:1rem; line-height:1.5; border-radius:0;
}
.field input:focus,.field textarea:focus,.field select:focus{ outline:none; border-color:var(--copper); box-shadow:0 0 0 3px rgba(165,106,69,.15); }
.field select{
  appearance:none; -webkit-appearance:none;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'><path d='M1 1l6 6 6-6' fill='none' stroke='%23A56A45' stroke-width='1.5'/></svg>");
  background-repeat:no-repeat; background-position:right 15px center; padding-right:42px; cursor:pointer;
}
.field input[type="date"]{ min-height:50px; }
.field--check{ display:flex; gap:12px; align-items:flex-start; color:var(--text-soft); }
.field--check input{ width:18px; height:18px; margin-top:4px; flex:none; accent-color:var(--copper); }
.field--check label{ font-weight:300; font-size:var(--fs-small); letter-spacing:0; text-transform:none; color:var(--text-soft); margin:0; }
.field-row{ display:grid; grid-template-columns:1fr 1fr; gap:0 18px; }
@media (max-width: 560px){ .field-row{ grid-template-columns:1fr; } }
.form-note{ font-size:var(--fs-small); color:var(--text-soft); margin-top:14px; }
.hp{ position:absolute; left:-9999px; top:-9999px; height:0; overflow:hidden; }
.alert{ padding:16px 18px; margin-bottom:22px; font-size:var(--fs-small); border:1px solid; }
.alert--error{ background:#fbeeee; color:#7c2b2b; border-color:#efc9c9; }
.alert--success{ background:#edf4ea; color:#2f5233; border-color:#cfe2c9; }

.radius{ margin-top:clamp(48px, 7vw, 80px); padding-top:40px; border-top:1px solid var(--line); }
.radius p{ color:var(--text-soft); }
.radius-list{
  list-style:none; margin:16px 0 0; padding:0; display:flex; flex-wrap:wrap; gap:6px 0;
  font-family:var(--font-body); font-weight:500; font-size:var(--fs-label); letter-spacing:.14em; text-transform:uppercase; color:var(--text-soft);
}
.radius-list li::after{ content:"·"; margin:0 10px; color:var(--copper); }
.radius-list li:last-child::after{ content:none; }

/* ---------- Danke / Rechtliches ---------- */
.legal h2{ font-size:1.6rem; margin-top:2em; }
.legal p{ color:var(--text-soft); }
.legal p.address{ color:var(--text); }
.center{ text-align:center; }
.center .eyebrow{ justify-content:center; }

/* ---------- Footer ---------- */
.site-footer{ background:var(--stage); color:var(--soft-on-dark); padding:clamp(56px, 7vw, 80px) 0 28px; }
.site-footer a{ color:var(--text-on-dark); }
.site-footer a:hover{ color:var(--copper-glow); }
.footer-grid{ display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:40px; }
@media (max-width: 760px){ .footer-grid{ grid-template-columns:1fr; gap:32px; } }
.footer-brand{ display:flex; align-items:center; gap:16px; margin-bottom:18px; font-family:var(--font-brand); font-size:1.2rem; letter-spacing:.3em; text-transform:uppercase; color:var(--text-on-dark); }
.footer-brand img{ width:48px; height:48px; }
.footer-brand small{ font-family:var(--font-brand); font-weight:400; font-size:inherit; letter-spacing:inherit; color:var(--copper-glow); padding-left:16px; border-left:1px solid var(--line-dark); line-height:1.2; }
.site-footer h4{ font-family:var(--font-body); font-weight:500; font-size:var(--fs-label); letter-spacing:var(--ls-label); text-transform:uppercase; color:var(--copper-glow); margin-bottom:1.2em; }
.site-footer ul{ list-style:none; margin:0; padding:0; }
.site-footer li{ margin-bottom:10px; }
.site-footer p{ max-width:360px; }
.site-footer .footer-cross{ margin-top:48px; padding-top:28px; border-top:1px solid var(--line-dark); max-width:none; }
.footer-bottom{
  margin-top:28px; padding-top:22px; border-top:1px solid var(--line-dark);
  font-family:var(--font-body); font-weight:500; font-size:var(--fs-label); letter-spacing:.14em; text-transform:uppercase; color:var(--soft-on-dark);
  display:flex; flex-wrap:wrap; justify-content:space-between; gap:10px;
}

/* ---------- Sanftes Einblenden ---------- */
@media (prefers-reduced-motion: no-preference){
  .reveal{ opacity:0; transform:translateY(14px); transition:opacity .7s ease, transform .7s ease; }
  .reveal.is-visible{ opacity:1; transform:none; }
}