/* ==========================================================================
   YALU LASER — Design-System
   Idee: helles, luftiges Beauty-Studio in Berlin-Kreuzberg.
   Champagner-Weiß als Grundfläche, Rosé-Gold als Akzent, dunkles Kakao-Braun
   für Text. Editorialer Serif für große Statements, klarer geometrischer Sans
   für Text.
   ========================================================================== */

/* Selbst gehostete Schriften (keine Verbindung zu Google) */
@font-face{font-family:'Fraunces';font-style:normal;font-weight:300 600;font-display:swap;src:url('../fonts/fraunces-normal.woff2') format('woff2');}
@font-face{font-family:'Fraunces';font-style:italic;font-weight:450;font-display:swap;src:url('../fonts/fraunces-italic.woff2') format('woff2');}
@font-face{font-family:'Sora';font-style:normal;font-weight:400 700;font-display:swap;src:url('../fonts/sora-normal.woff2') format('woff2');}

:root{
  --ink:        #33262A;   /* dunkles Kakao-Braun mit Rosé-Unterton */
  --ink-70:     rgba(51,38,42,.72);
  --ink-45:     rgba(51,38,42,.5);
  --paper:      #FCF8F4;   /* Champagner-Weiß */
  --paper-dim:  #F6EBE3;   /* Puder, für abgesetzte Flächen */
  --blush:      #F0DCD3;   /* kräftigeres Puder für große Flächen */
  --skin:       #C08A6B;   /* Rosé-Gold, warm */
  --skin-deep:  #A66F52;
  --rose:       #B3737C;   /* Rosé, gedeckt */
  --rose-deep:  #8C5058;   /* Rosé-Gold dunkel, für Text auf Hell (AA) */
  --line:       rgba(51,38,42,.14);

  /* Gold: drei Abstufungen, damit Schrift auf jedem Grund lesbar bleibt.
     --gold nur auf dunklem Grund, --gold-head für große Überschriften,
     --gold-ink für Lauftext und Links auf hellem Grund. */
  --gold:       #C9A227;
  --gold-head:  #A9763C;
  --gold-ink:   #8C6B2F;
  --gold-deep:  #74581F;   /* kleine Texte, Eyebrows, Preisspalten */
  --rose-bg:    #F7E6E1;   /* Rosé als Grundfläche der Frauen-Welt */

  /* Dunkle Welt (Männer-Band) */
  --night:      #17120F;
  --night-soft: #221B17;
  --night-ink:  #EDE3D6;
  --night-line: rgba(201,162,39,.28);

  --serif: 'Fraunces', 'Iowan Old Style', serif;
  --sans:  'Sora', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  --maxw: 1180px;
}

*{ box-sizing: border-box; }
html{ scroll-behavior: smooth; scroll-padding-top: 134px; }
body{
  margin:0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  padding-top: 123px; /* 44px Eröffnungsbanner + 78px Header + 1px Rahmen */
}
img{ max-width:100%; display:block; }
a{ color:inherit; }

.wrap{ max-width: var(--maxw); margin:0 auto; padding: 0 28px; }

h1,h2,h3{
  font-family: var(--serif);
  font-weight: 450;
  line-height: 1.05;
  margin: 0 0 .4em;
  letter-spacing: -0.01em;
}
h1{ font-size: clamp(2.6rem, 6vw, 5.2rem); font-weight: 450; }
h2{ font-size: clamp(1.9rem, 3.6vw, 3rem); color: var(--gold-head); }
h3{ font-size: 1.35rem; }
p{ margin: 0 0 1em; max-width: 62ch; }
.lede{ font-size: 1.15rem; color: var(--ink-70); max-width: 46ch; }

/* Fokus sichtbar halten */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible{
  outline: 2px solid var(--rose);
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce){
  *{ animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

/* ---------- Kopfzeile ---------- */
/* ---------- Eröffnungs-Banner: Laserstrahl schreibt den Text ---------- */
.opening-banner{
  position: fixed; top:0; left:0; right:0; height:44px; z-index: 60;
  display:flex; align-items:center; justify-content:center; overflow:hidden;
  background: linear-gradient(90deg,#17120F 0%,#2C231B 50%,#17120F 100%);
  color:#F6EBE3; border-bottom:1px solid rgba(201,162,39,.35);
}
.opening-laser-stage{ position:relative; display:inline-block; padding:0 10px; }
.opening-laser-text{
  display:inline-block; white-space:nowrap; color:#C9A227; font-size:.92rem; font-weight:700;
  clip-path: inset(0 100% 0 0);
  animation: openingWrite 7s cubic-bezier(.55,.03,.45,.97) infinite;
}
.opening-laser-short{ display:none; }
.opening-laser-beam{
  position:absolute; top:-16px; bottom:-16px; left:0; width:2px; opacity:0; pointer-events:none;
  background: linear-gradient(180deg,transparent,#fff 20%,#7de9ff 50%,#fff 80%,transparent);
  box-shadow: 0 0 14px 4px rgba(125,233,255,.8);
  animation: openingSweep 7s cubic-bezier(.55,.03,.45,.97) infinite;
}
.opening-laser-spark{
  position:absolute; top:50%; left:0; width:8px; height:8px; margin:-4px 0 0 -4px; border-radius:50%;
  background: radial-gradient(circle,#fff 0%,#7de9ff 45%,transparent 72%);
  animation: openingSpark 7s cubic-bezier(.55,.03,.45,.97) infinite;
}
@keyframes openingWrite{
  0%   { clip-path: inset(0 100% 0 0); }
  58%  { clip-path: inset(0 0 0 0); }
  86%  { clip-path: inset(0 0 0 0); }
  100% { clip-path: inset(0 100% 0 0); }
}
@keyframes openingSweep{
  0%   { left:0%;   opacity:0; }
  4%   { opacity:1; }
  58%  { left:100%; opacity:1; }
  64%  { opacity:0; }
  100% { left:100%; opacity:0; }
}
@keyframes openingSpark{
  0%   { left:0%;   opacity:0; }
  6%   { opacity:.95; }
  58%  { left:100%; opacity:.95; }
  62%  { opacity:0; }
  100% { left:100%; opacity:0; }
}
.opening-cta{
  position:absolute; right:20px; top:50%; transform:translateY(-50%); z-index:3;
  font-size:.8rem; font-weight:600; color:#17120F; background:#C9A227;
  border-radius:999px; padding:6px 14px; text-decoration:none; white-space:nowrap;
}
.opening-cta:hover{ background:#fff; }
/* Laserpunkt (JS-Modus) */
.opening-laser-point{
  position:absolute; top:50%; left:0; width:11px; height:11px; margin:-5.5px 0 0 -5.5px;
  border-radius:50%; opacity:0; pointer-events:none; z-index:2;
  background: radial-gradient(circle,#fff 0%,#7de9ff 45%,rgba(125,233,255,0) 72%);
  box-shadow: 0 0 16px 5px rgba(125,233,255,.75);
  transition: left 110ms linear;   /* ruhiges Wandern von Buchstabe zu Buchstabe */
}
.opening-laser-stage[data-laser="js"] .opening-laser-text{ animation:none; clip-path:none; }
.opening-laser-stage[data-laser="js"] .opening-laser-spark{ display:none; }
.opening-laser-stage[data-laser="js"] .opening-laser-beam{ animation:none; opacity:0; }
.opening-laser-stage[data-laser="off"] .opening-laser-text{ animation:none; clip-path:none; }
.opening-laser-stage[data-laser="off"] .opening-laser-beam,
.opening-laser-stage[data-laser="off"] .opening-laser-spark{ display:none; }


/* ---------- Eröffnungs-Banner: SVG-Schreibschrift mit Laser ---------- */
.opening-svg-wrap{ position:relative; display:flex; align-items:center; justify-content:center; max-width:78%; height:100%; }
.opening-art{ display:block; height:30px; width:auto; }
.opening-art path{ fill:#C9A227; }
.opening-art-short{ display:none; }
.opening-sr{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.opening-dot{
  position:absolute; top:50%; left:0; width:11px; height:11px; margin:-5.5px 0 0 -5.5px; border-radius:50%;
  opacity:0; pointer-events:none; z-index:4;
  background: radial-gradient(circle,#fff 0%,#C9A227 45%,rgba(201,162,39,0) 72%);
  box-shadow: 0 0 16px 5px rgba(201,162,39,.75);
}
.opening-beam{
  position:absolute; top:-6px; bottom:-6px; width:1px; opacity:0; pointer-events:none; z-index:3;
  background: linear-gradient(180deg,transparent,#fff 30%,#C9A227 50%,#fff 70%,transparent);
  box-shadow: 0 0 10px 3px rgba(201,162,39,.65);
}
@media (max-width:760px){
  .opening-svg-wrap{ max-width:64%; }
  .opening-art-full{ display:none; }
  .opening-art-short{ display:block; height:26px; }
}
@media (prefers-reduced-motion: reduce){
  .opening-dot, .opening-beam{ display:none; }
}

@media (max-width:760px){
  .opening-laser-full{ display:none; }
  .opening-laser-short{ display:inline-block; }
  .opening-laser-text{ font-size:.8rem; }
  .opening-cta{ font-size:.74rem; padding:5px 11px; right:12px; }
}
@media (prefers-reduced-motion: reduce){
  .opening-laser-text{ animation:none; clip-path:none; }
  .opening-laser-beam, .opening-laser-spark{ display:none; }
}

.site-header{
  position: fixed; top:44px; left:0; right:0; z-index: 40;
  background: rgba(252,248,244,.9);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
.site-header .wrap{
  display:flex; align-items:center; justify-content:space-between;
  height: 78px;
}
.logo{
  font-family: var(--serif);
  font-size: 1.5rem;
  text-decoration:none;
  display:flex; align-items:baseline; gap:.15em;
}
.logo em{ font-style: normal; color: var(--gold-ink); }
.logo img{ height: 1.5em; width: auto; display:block; }
.nav{ display:flex; align-items:center; gap: 17px; }
.nav a{
  text-decoration:none;
  font-size: .96rem;
  color: var(--ink-70);
  position:relative;
  padding: 4px 0;
}
.nav a:hover, .nav a.active{ color: var(--ink); }
.nav a.btn{ color: #fff; padding: 11px 24px; font-weight:600; background: var(--rose-deep); border-color: var(--rose-deep); }
.nav a.btn:hover{ background: var(--ink); border-color: var(--ink); transform: translateY(-1px); }
.nav a.active::after{
  content:""; position:absolute; left:0; right:0; bottom:-2px; height:2px;
  background: var(--rose);
}
.nav a.btn.active::after{ content:none; }
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  gap:.5em;
  padding: 13px 26px;
  border-radius: 999px;
  background: var(--ink);
  color: #fff;
  text-decoration:none;
  font-family: var(--sans);
  font-weight:600;
  font-size: .95rem;
  border: 1px solid var(--ink);
  cursor:pointer;
  transition: background .18s ease, color .18s ease, transform .18s ease;
}
.btn:hover{ background: var(--gold-ink); border-color: var(--gold-ink); }
.btn:active{ transform: translateY(1px); }
.btn.btn-outline{
  background: transparent; color: var(--ink); border-color: var(--ink);
}
.btn.btn-outline:hover{ background: var(--ink); color: #fff; }
.btn.btn-light{
  background: var(--gold-ink); color: #fff; border-color: var(--gold-ink);
}
.btn.btn-light:hover{ background: var(--ink); color:#fff; border-color: var(--ink); }
.burger{ display:none; }

/* ---------- Hero ---------- */
.hero{
  position: relative;
  background: var(--rose-bg);
  color: var(--ink);
  overflow:hidden;
  padding: 92px 0 110px;
}
.hero::before{
  content:"";
  position:absolute; inset: -30% -12% auto auto;
  width: 62vw; height: 62vw; max-width: 900px; max-height: 900px;
  background: radial-gradient(circle at 30% 30%, var(--blush) 0%, rgba(192,138,107,.35) 55%, transparent 74%);
  filter: blur(50px);
}
.hero .wrap{ position:relative; z-index:1; }
.hero-eyebrow{
  color: var(--gold-deep);
  font-weight: 600;
  font-size: .95rem;
  margin-bottom: 18px;
}
.hero h1{ max-width: 14ch; margin-bottom: .3em; }
.hero h1{ color: var(--gold-head); }
.hero h1 i{ font-style: italic; color: var(--gold-head); }
.hero .lede{ color: var(--ink-70); font-size: 1.2rem; max-width: 52ch; margin-bottom: 28px; }
/* Wortmarke im Hero - transparent direkt auf dem Rosé */
.hero-mark{
  display:block; width: 230px; height:auto;
  margin: 0 0 22px;
}
.hero-actions{ display:flex; gap: 16px; flex-wrap:wrap; }
.hero-meta{
  margin-top: 64px;
  display:grid; grid-template-columns: repeat(3,auto); gap: 40px;
  border-top: 1px solid var(--line);
  padding-top: 28px;
  max-width: 680px;
}
.hero-meta div b{ display:block; font-family: var(--serif); font-size:1.5rem; font-weight:450;}
.hero-meta div span{ color: var(--ink-70); font-size:.85rem; }

/* ---------- Sektionen allgemein ---------- */
section{ padding: 96px 0; scroll-margin-top: 90px; }
[id]{ scroll-margin-top: 90px; }
.section-head{ margin-bottom: 52px; max-width: 640px; }
.section-tag{ color: var(--gold-deep); font-weight:600; font-size:.95rem; margin-bottom:10px; letter-spacing:.02em; }

/* ---------- Leistungen: editoriale Liste statt Card-Grid ---------- */
.service-list{ border-top: 1px solid var(--line); }
.service-row{
  display:flex; align-items:baseline; justify-content:space-between; gap: 24px;
  padding: 26px 0;
  border-bottom: 1px solid var(--line);
  text-decoration:none; color:inherit;
}
.service-row .name{ font-family: var(--serif); font-size: 1.4rem; }
.service-row .desc{ color: var(--ink-45); font-size: .95rem; margin-top:4px; max-width: 48ch;}
.service-row .price{
  font-family: var(--serif); font-size: 1.3rem; white-space:nowrap; color: var(--rose-deep);
}

/* ---------- Über uns / Split ---------- */
.split{ display:grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items:center; }
.founders{ display:grid; gap: 28px; }
.founder-card{
  border: 1px solid var(--line);
  border-radius: 22px;
  padding: 26px;
  background: var(--paper-dim);
}
.founder-card h3{ margin-bottom: 4px; }
.founder-role{ color: var(--rose-deep); font-size: .88rem; font-weight:600; margin-bottom: 10px; }

/* ---------- Warum-Kacheln (bewusst unregelmäßig, keine Uniform-Cards) ---------- */
.why-grid{ display:grid; grid-template-columns: 1.3fr 1fr 1fr; gap: 22px; }
.why-item{ padding: 30px; border-radius: 26px; }
.why-item.big{ background: var(--rose-bg); color: var(--ink); grid-row: span 2; display:flex; flex-direction:column; justify-content:flex-end; min-height:340px;}
.why-item.big h3{ color: var(--gold-head); }
.why-item:not(.big){ background: var(--paper-dim); border:1px solid var(--line); }

/* ---------- CTA-Band ---------- */
.cta-band{
  background: var(--gold-ink);
  color: #fff;
  border-radius: 32px;
  padding: 64px;
  display:flex; align-items:center; justify-content:space-between; gap:40px; flex-wrap:wrap;
}
.cta-band h2{ margin:0; max-width: 12ch; color:#fff; }
.cta-band p{ color: rgba(255,255,255,.85); }

/* ---------- Standort ---------- */
.map-box{
  border-radius: 26px; overflow:hidden; border:1px solid var(--line); height: 100%; min-height: 320px;
}
.map-box iframe{ width:100%; height:100%; min-height:320px; border:0; filter: grayscale(.25) contrast(1.05); }
.map-consent{ height:100%; min-height:320px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:16px; text-align:center; padding:30px; background:var(--paper-dim); }
.map-consent p{ margin:0; max-width:46ch; font-size:.9rem; color:var(--ink-70); }

/* ---------- Preisliste ---------- */
.price-hero{ background: var(--paper-dim); padding: 70px 0 40px; }
.price-note{
  background: var(--paper-dim);
  border-radius: 20px;
  padding: 22px 26px;
  font-size: .92rem;
  color: var(--ink-70);
  margin: 10px 0 60px;
}
.price-group{ margin-bottom: 54px; }
.price-group h2{ font-size: 1.6rem; color: var(--ink); border-bottom: 2px solid var(--gold-ink); padding-bottom: 10px; margin-bottom: 6px; }
.price-table{ width:100%; border-collapse: collapse; }
.price-table tr{ border-bottom: 1px solid var(--line); }
.price-table td{ padding: 15px 4px; }
.price-table td:first-child{ font-size: 1.02rem; }
.price-table .sub{ color: var(--ink-70); font-size: .84rem; }
.price-table td:last-child{ text-align:right; font-family: var(--serif); font-size: 1.15rem; white-space:nowrap; color: var(--rose-deep); }
.package-box{
  background: var(--blush); color: var(--ink);
  border-radius: 26px; padding: 40px;
  display:grid; grid-template-columns: 1fr auto; gap: 30px; align-items:center;
}
.package-box .price{ font-family: var(--serif); font-size: 2.6rem; color: var(--gold-ink); text-align:right; }
.package-box .price small{ display:block; font-family: var(--sans); font-size:.85rem; color: var(--ink-70); font-weight:400;}

/* ---------- Buchung ---------- */
.booking-shell{
  display:grid; grid-template-columns: 1fr 1.15fr; gap: 0;
  border: 1px solid var(--line); border-radius: 28px; overflow:hidden;
  background: var(--paper-dim);
}
.booking-side{ background: var(--blush); color: var(--ink); padding: 44px; }
.booking-side ul{ list-style:none; margin:26px 0 0; padding:0; display:grid; gap:16px; }
.booking-side li{ display:flex; gap:12px; color: var(--ink-70); font-size:.95rem;}
.booking-side li b{ color: var(--gold-ink); font-family: var(--serif); font-size:1.1rem;}
.booking-main{ padding: 44px; }
.b-field{ margin-bottom: 22px; }
.b-field label{ display:block; font-weight:600; font-size:.9rem; margin-bottom:8px; }
.b-field select, .b-field input, .b-field textarea{
  width:100%; padding: 13px 16px; border-radius: 12px; border: 1px solid var(--line);
  background: var(--paper); font-family: var(--sans); font-size: .98rem; color: var(--ink);
}
.b-field textarea{ resize: vertical; min-height: 80px; }
.slot-grid{ display:grid; grid-template-columns: repeat(auto-fill,minmax(84px,1fr)); gap: 10px; margin-top: 6px; }
.slot-btn{
  padding: 10px 6px; border-radius: 10px; border: 1px solid var(--line);
  background: var(--paper); font-family: var(--sans); font-size: .92rem; cursor:pointer;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.slot-btn:hover:not(:disabled){ border-color: var(--rose); }
.slot-btn.selected{ background: var(--gold-ink); color: #fff; border-color: var(--gold-ink); }
.slot-btn:disabled{ opacity:.3; cursor:not-allowed; text-decoration: line-through; }
.slot-empty{ color: var(--ink-45); font-size:.9rem; }
.b-summary{
  background: var(--paper); border:1px solid var(--line); border-radius:14px; padding:16px 18px; margin: 22px 0;
  font-size:.92rem;
}
.b-msg{ border-radius:14px; padding:16px 18px; margin-top:18px; font-size:.94rem; display:none; }
.b-msg.show{ display:block; }
.b-msg.ok{ background:#e8f3ea; color:#20522b; }
.b-msg.err{ background:#f6e3e3; color:#7a2020; }

/* ---------- Footer ---------- */
.site-footer{ background: var(--paper-dim); color: var(--ink-70); padding: 64px 0 34px; border-top: 1px solid var(--line); }
.footer-grid{ display:grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 40px; margin-bottom: 44px; }
.site-footer h4{ color: var(--ink); font-family: var(--sans); font-size:.85rem; letter-spacing:.02em; margin-bottom: 16px;}
.site-footer a{ text-decoration:none; color: inherit; }
.site-footer a:hover{ color: var(--gold-ink); }
.footer-list{ list-style:none; margin:0; padding:0; display:grid; gap:10px; font-size:.92rem; }
.footer-bottom{
  border-top: 1px solid var(--line); padding-top: 24px;
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px;
  font-size:.82rem; color: var(--ink-45);
}

/* ---------- Legal-Seiten ---------- */
.legal{ padding: 80px 0 100px; max-width: 74ch; }
.legal h2{ margin-top: 1.6em; font-size:1.4rem; color: var(--ink); }

/* ---------- Responsive ---------- */
@media (max-width: 1180px){
  .nav{ position:fixed; top:78px; right:0; bottom:0; left:0; height:calc(100dvh - 78px); background: var(--paper); flex-direction:column; align-items:flex-start; padding: 30px 28px; gap:22px; transform: translateX(100%); transition: transform .25s ease; overflow-y:auto; }
  .nav.open{ transform: translateX(0); }
  .burger{ display:block; background:none; border:0; cursor:pointer; padding:6px; }
  .burger svg{ width:26px; height:26px; }
  .split, .why-grid, .booking-shell, .footer-grid{ grid-template-columns: 1fr; }
  .why-item.big{ grid-row:auto; min-height:220px; }
  .package-box{ grid-template-columns: 1fr; text-align:left; }
  .package-box .price{ text-align:left; }
  .hero-meta{ grid-template-columns: repeat(3,1fr); gap:20px; }
  section{ padding: 64px 0; }
  .cta-band{ padding: 40px; flex-direction:column; align-items:flex-start; }
}

/* ---------- Zielgruppen-Duo (Frauen / Männer) ---------- */
.audience-grid{ display:grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.audience-card{
  border:1px solid var(--line); border-radius: 26px; padding: 34px;
  background: var(--paper-dim); display:flex; flex-direction:column; gap: 14px;
}
.audience-card h3{ margin:0; }
.audience-card ul{ list-style:none; margin:0; padding:0; display:grid; gap:10px; font-size:.96rem; }
.audience-card li{ display:flex; justify-content:space-between; gap:18px; border-bottom:1px solid var(--line); padding-bottom:8px; }
.audience-card li span:last-child{ color: var(--gold-deep); font-weight:600; white-space:nowrap; }
.audience-card .btn{ align-self:flex-start; margin-top: 8px; }

/* ---------- Gerät ---------- */
.device{ display:grid; grid-template-columns: 1.1fr .9fr; gap: 56px; align-items:center; }
.device-specs{ list-style:none; margin:26px 0 0; padding:0; display:grid; gap:14px; }
.device-specs li{ display:grid; grid-template-columns: 12ch 1fr; gap:18px; border-top:1px solid var(--line); padding-top:14px; font-size:.98rem; }
.device-specs b{ font-weight:600; color: var(--gold-deep); }

/* ---------- Gerätefoto im Technik-Abschnitt ---------- */
.device-photo{
  margin: 0;
  background: var(--rose-bg);
  border: 1px solid var(--line);
  border-radius: 26px;
  padding: 26px 26px 0;
  position: relative;
  overflow: hidden;
}
/* Goldstreifen oben am Gerätebild entfernt */
.device-photo img{
  display:block; width:100%; height:auto;
  max-height: 520px; object-fit: contain;
  mix-blend-mode: multiply;   /* weiches Einbetten des hellen Studiohintergrunds */
}
.device-photo figcaption{
  font-size:.84rem; line-height:1.5; color: var(--ink-70);
  border-top: 1px solid var(--line);
  margin-top: 18px; padding: 14px 0 18px;
}

/* Platzhalter für noch fehlende Fotos */
.photo-slot{
  border-radius: 26px; min-height: 320px;
  border: 1px solid var(--line);
  background:
    repeating-linear-gradient(135deg, var(--paper-dim) 0 14px, var(--blush) 14px 28px);
  display:flex; align-items:flex-end; padding: 22px;
}
.photo-slot span{
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: .78rem; color: var(--ink-70);
  background: var(--paper); border-radius: 999px; padding: 7px 14px;
}

/* ---------- Preisliste: Dauer-Spalte ---------- */
.price-table td.dur{ text-align:right; color: var(--ink-70); font-size:.88rem; white-space:nowrap; font-family: var(--sans); }
.price-group h3{
  font-family: var(--sans); font-size:.82rem; font-weight:700; letter-spacing:.08em;
  text-transform:uppercase; color: var(--ink-45); margin: 30px 0 6px;
}
.price-lead{ font-size:1.02rem; color: var(--ink-70); max-width: 60ch; margin: 0 0 30px; }

@media (max-width: 900px){
  .audience-grid, .device{ grid-template-columns: 1fr; gap: 22px; }
  .device-specs li{ grid-template-columns: 1fr; gap:2px; }
}

/* ---------- Buchung: Bereichsauswahl (Schritt 1) ---------- */
.choice-row{ display:flex; gap:10px; flex-wrap:wrap; }
.choice-btn{
  flex:1 1 140px; padding: 14px 18px; border-radius: 14px; border:1px solid var(--line);
  background: var(--paper); font-family: var(--sans); font-size:.98rem; font-weight:600;
  color: var(--ink); cursor:pointer; transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.choice-btn:hover{ border-color: var(--rose); }
.choice-btn[aria-pressed="true"]{ background: var(--gold-ink); border-color: var(--gold-ink); color:#fff; }
.b-hint{ font-size:.85rem; color: var(--ink-70); margin-top:8px; }
.b-check{ display:flex; align-items:flex-start; gap:10px; }
.b-check input{ width:auto; margin-top:4px; }
.b-check label{ font-weight:400; margin:0; }

/* ---------- Yalu for Men: dunkles Band mit Goldschrift ---------- */
.men-band{
  background: var(--night);
  color: var(--night-ink);
  padding: 92px 0;
  /* Eigene Akzentfarbe nur für den Männer-Bereich */
  --gold: #d0af12;
  --night-line: rgba(208,175,18,.30);
}
.men-band a{ color: var(--gold); }
.men-band a:hover{ color: #fff; }
.men-head{ display:flex; gap: 40px; align-items:center; flex-wrap:wrap; margin-bottom: 44px; }
.men-mark{
  width: 200px; height: auto; flex:0 0 auto;
  object-fit: contain;
}
.men-band .section-tag{ color: var(--gold); }
.men-band h3{ color: var(--gold); }
.men-band h2{ color: var(--gold); margin-bottom: 10px; }
.men-band .lede{ color: var(--night-ink); max-width: 56ch; }
.men-claim{
  font-family: var(--serif); font-style: italic;
  font-size: clamp(1.1rem, 2vw, 1.4rem); color: var(--gold);
  margin: 0;
}
.men-grid{ display:grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.men-card{
  background: var(--night-soft); border:1px solid var(--night-line);
  border-radius: 18px; padding: 26px 24px;
}
.men-card h3{ color: var(--gold); font-size:1.05rem; margin:0 0 8px; }
.men-card p{ margin:0; font-size:.94rem; color: var(--night-ink); }
.men-prices{ margin-top: 44px; display:grid; grid-template-columns: 1fr 1fr; gap: 0 50px; }
.men-prices div{
  display:flex; justify-content:space-between; gap:20px;
  padding: 13px 0; border-bottom: 1px solid var(--night-line);
  font-size: 1rem;
}
.men-prices b{ color: var(--gold); font-weight:600; white-space:nowrap; }
.men-actions{ display:flex; gap:14px; flex-wrap:wrap; margin-top: 40px; align-items:center; }
.men-band .btn{ background: var(--gold); color: #17120F; border-color: var(--gold); font-weight:600; }
.men-band .btn:hover{ background: #fff; border-color:#fff; color:#17120F; }
.men-band .btn-outline{ background:transparent; color: var(--gold); border-color: var(--night-line); }
.men-band .btn-outline:hover{ background: var(--gold); color:#17120F; border-color: var(--gold); }

@media (max-width: 900px){
  .men-grid{ grid-template-columns: 1fr 1fr; }
  .men-prices{ grid-template-columns: 1fr; gap:0; }
}
@media (max-width: 560px){
  .men-grid{ grid-template-columns: 1fr; }
}

/* =====================================================================
   "Für Männer" – metallische Premium-Farbwelt
   AUSSCHLIESSLICH in diesem Bereich (.men-band / #fuer-maenner).
   Keine globalen Regeln, kein :root, keine anderen Seiten betroffen.
   ===================================================================== */
.men-band{
  --gold: #E8C583;                  /* kleine Überschriften, Preise, Slogan, Outline-Button */
  --night-line: #786248;            /* Trennlinien der Preisliste */
  background: #191515;              /* Espresso */
  color: #E9E1D8;                   /* Cremeweiß */
}
.men-band .lede,
.men-band p{ color: #E9E1D8; }      /* Einleitung + Kartentexte */
.men-card{
  background: #2A2322;              /* Kartenhintergrund */
  border: 1px solid #786248;        /* Bronze-Rahmen */
}
.men-prices span{ color: #E9E1D8; } /* Leistungsbezeichnungen */
.men-prices b{ color: #E8C583; }    /* Preise */
.men-band .btn{ background: #C4A477; color: #191515; border-color: #C4A477; }
.men-band .btn:hover{ background: #D4B78A; border-color: #D4B78A; color: #191515; }
.men-band .btn-outline{ background: transparent; color: #E8C583; border-color: #786248; }
.men-band .btn-outline:hover{ background: rgba(120,98,72,.18); color: #E8C583; border-color: #786248; }

/* Metallische Hauptüberschrift (nur das große h2 im Männer-Bereich) */
.men-band h2{ color: #E8C583; }     /* Fallback */
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .men-band h2{
    background-image: linear-gradient(110deg,
      #8D6738 0%, #C59A55 22%, #F4DCA5 45%, #E8C583 60%, #A77C42 82%, #D8AD63 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
  }
}

/* =====================================================================
   Laufbanner (nur .opening-banner): metallischer Goldverlauf für den
   Banner-Text + Goldverlauf für den Button "Termin buchen" oben rechts.
   Keine globalen Regeln, keine anderen Elemente betroffen.
   ===================================================================== */
.opening-banner .opening-art-full  path{ fill:#E8C583; }          /* Fallback */
.opening-banner .opening-art-full  path{ fill:url(#goldTextFull); } /* Verlauf */
.opening-banner .opening-art-short path{ fill:#E8C583; }
.opening-banner .opening-art-short path{ fill:url(#goldTextShort); }

.opening-banner .opening-cta{
  background-color:#D8AD63;
  background-image:linear-gradient(110deg,#B88A48 0%,#D8AD63 35%,#F4DCA5 55%,#C59A55 100%);
  color:#211719;
}
.opening-banner .opening-cta:hover{
  background-color:#C59A55;
  background-image:none;
  color:#211719;
}

/* =====================================================================
   Laufbanner – Text darf nie abgeschnitten werden (nur .opening-banner).
   Ursache war: der Schreibschrift-Text war breiter als sein Container.
   ===================================================================== */
.opening-art{ max-width:100%; }   /* Text skaliert auf die verfügbare Breite */

@media (max-width:760px){
  .opening-svg-wrap{ max-width:none; flex:1 1 auto; min-width:0; padding-left:12px; }
  .opening-cta{ position:static; transform:none; margin:0 10px 0 8px; right:auto; }
}

/* =====================================================================
   Navigation – Variante 7 "Pillen mit Licht-Trail" (nur der Header-Nav).
   Der Button "Termin buchen" (.btn) bleibt unverändert.
   ===================================================================== */
.site-header .nav > a:not(.btn){
  position:relative; z-index:0; overflow:hidden;
  padding:8px 11px; border-radius:999px;
  transition:color .3s ease;
}
.site-header .nav > a:not(.btn)::after{ content:none; }        /* alte Unterstreichung aus */
.site-header .nav > a:not(.btn)::before{
  content:''; position:absolute; inset:0; border-radius:999px; opacity:0; z-index:-1;
  background-image:linear-gradient(110deg,#F6E7C4 0%,#E8C583 40%,#C59A55 58%,#F4DCA5 100%);
  background-size:220% 100%;
  transition:opacity .32s ease;
}
.site-header .nav > a:not(.btn):hover{ color:#191515; }
.site-header .nav > a:not(.btn):hover::before{ opacity:1; animation:navTrail 1.7s linear infinite; }
.site-header .nav > a.active:not(.btn){ color:#191515; }
.site-header .nav > a.active:not(.btn)::before{ opacity:1; }
@keyframes navTrail{ from{ background-position:0% 0; } to{ background-position:200% 0; } }

@media (min-width:1181px){ .site-header .nav{ gap:3px; } }     /* Pills brauchen weniger Abstand */
@media (prefers-reduced-motion: reduce){
  .site-header .nav > a:not(.btn):hover::before{ animation:none; }
}

/* Button "Termin buchen" im Header – Variante 7 (goldener Verlauf, dunkle Schrift).
   Nur der Header-Button; alle anderen Buttons der Website bleiben unverändert. */
.site-header .nav > a.btn{
  background-color:transparent;
  background-image:linear-gradient(110deg,#B88A48 0%,#D8AD63 35%,#F4DCA5 55%,#C59A55 100%);
  background-size:220% 100%;
  color:#191515; border-color:transparent;
}
.site-header .nav > a.btn:hover{
  background-image:linear-gradient(110deg,#F6E7C4 0%,#E8C583 40%,#C59A55 60%,#F4DCA5 100%);
  color:#191515; border-color:transparent;
  animation:navTrail 1.7s linear infinite;
}
@media (prefers-reduced-motion: reduce){
  .site-header .nav > a.btn:hover{ animation:none; }
}

/* =====================================================================
   VORSCHAU – Einheitliche metallische Goldgestaltung
   Referenz: Überschrift "Laser-Haarentfernung für Männer" (dort auf DUNKLEM Grund).
   Auf hellem Grund wird derselbe Charakter mit dunkleren Goldtönen genutzt,
   damit Überschriften und Preise klar lesbar bleiben.
   ===================================================================== */
:root{
  /* Zentraler Metallverlauf (hell-lesbar) */
  --gold-grad: linear-gradient(110deg,#694F27 0%,#B99458 26%,#DFBC7C 46%,#C59A55 62%,#96773F 82%,#694F27 100%);
  /* Referenzverlauf für dunkle Flächen */
  --gold-grad-dark: linear-gradient(110deg,#8D6738 0%,#C59A55 22%,#F4DCA5 45%,#E8C583 60%,#A77C42 82%,#D8AD63 100%);
  /* Warme Grundtöne (Ränder, Linien, Hover) */
  --gold:      #C09A52;
  --gold-head: #B08A45;
  --gold-ink:  #9A7838;
  --gold-deep: #7E6230;
}

/* --- Goldene Texte bekommen den Metallverlauf --- */
@supports ((-webkit-background-clip:text) or (background-clip:text)){
  .logo em,
  .hero-eyebrow,
  .hero h1,
  .hero h1 i,
  .section-tag,
  .why-item.big h3,
  .booking-side li b,
  .audience-card li span:last-child,
  .device-specs b,
  .package-box .price,
  h2{
    background-image: var(--gold-grad);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
  }
  /* Dunkle Flächen: Original-Metallic der Männer-Überschrift */
  .site-footer h2,
  .cta-band h2{ background-image: var(--gold-grad-dark); }
}
/* Ausnahmen: nicht golden */
.price-group h2{
  background-image:none; -webkit-text-fill-color: currentColor; color: var(--ink);
}
.cta-band h2{ background-image:none; -webkit-text-fill-color: currentColor; color:#fff; }

/* --- Goldene Buttons/Flächen: Metallverlauf statt Vollton --- */
.btn:hover,
.btn.btn-light,
.slot-btn.selected,
.choice-btn[aria-pressed="true"]{
  background-color: transparent;
  background-image: var(--gold-grad);
}
.btn:hover,
.btn.btn-light,
.slot-btn.selected,
.choice-btn[aria-pressed="true"]{ color:#2A2018; }
.cta-band{ background-image: var(--gold-grad); background-color: transparent; }
.cta-band h2, .cta-band p{ color:#2A2018; }

/* =====================================================================
   Männer-Bereich: restliche Goldelemente auf den Metallverlauf der
   Referenz-Überschrift umgestellt. NUR .men-band.
   Referenz-Überschrift (.men-band h2) und Logo bleiben unverändert.
   ===================================================================== */

/* Goldene Schriften & Preisangaben -> Metallverlauf */
@supports ((-webkit-background-clip:text) or (background-clip:text)){
  .men-band .section-tag,
  .men-band .men-card h3,
  .men-band .men-prices b,
  .men-band .men-claim{
    background-image: var(--gold-grad-dark);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
  }
}

/* Button-Fläche "Termin buchen" -> Goldverlauf */
.men-band .btn{
  background-color: transparent;
  background-image: var(--gold-grad-dark);
  color:#191515;
  border-color: transparent;
}
.men-band .btn:hover{
  background-image: linear-gradient(110deg,#F4DCA5 0%,#E8C583 40%,#C59A55 62%,#D8AD63 100%);
  color:#191515; border-color: transparent;
}

/* Button "Vollständige Preisliste": Verlaufsrahmen (mit runden Ecken) */
.men-band .btn-outline{
  color:#E8C583;
  border:1px solid transparent;
  background-image: linear-gradient(#1C1414,#1C1414), var(--gold-grad-dark);
  background-origin: border-box;
  background-clip: padding-box, border-box;
}
.men-band .btn-outline:hover{
  color:#191515;
  background-image: var(--gold-grad-dark), var(--gold-grad-dark);
}

/* Kartenrahmen -> Verlaufsrahmen */
.men-band .men-card{
  border:1px solid transparent;
  background-image: linear-gradient(#2A2322,#2A2322), var(--gold-grad-dark);
  background-origin: border-box;
  background-clip: padding-box, border-box;
}

/* Trennlinien der Preisliste -> Goldverlauf */
.men-band .men-prices div{
  border-width: 0 0 1px 0;
  border-style: solid;
  border-color: transparent;
  border-image: var(--gold-grad-dark) 1;
}