/* ============================================================
   HERZRAUM — Raum für Ruhe und Balance
   Yoga · Haut & Beauty · Make-up & Visagistik
   Shared design system  —  Olivgrün · Gold · Creme
   ============================================================ */

/* ---- Schriften: selbst gehostet (DSGVO — kein Google-CDN) ----
   Variable Fonts: eine Datei deckt die ganze Weight-Range ab. */
@font-face{
  font-family:"Cormorant Garamond";
  font-style:normal;
  font-weight:400 600;
  font-display:swap;
  src:url("fonts/cormorant-garamond.woff2") format("woff2");
}
@font-face{
  font-family:"Mulish";
  font-style:normal;
  font-weight:400 700;
  font-display:swap;
  src:url("fonts/mulish.woff2") format("woff2");
}
@font-face{
  font-family:"Pinyon Script";
  font-style:normal;
  font-weight:400;
  font-display:swap;
  src:url("fonts/pinyon-script.woff2") format("woff2");
}
@font-face{
  font-family:"Marcellus";
  font-style:normal;
  font-weight:400;
  font-display:swap;
  src:url("fonts/marcellus.woff2") format("woff2");
}

/* ---- Palettes (switchable via [data-palette]) ---- */
:root,
:root[data-palette="wald"]{
  --green-deep: #3B4330;   /* hero / footer / dark bands */
  --green:      #454E39;
  --green-soft: #5A6248;
  --gold:       #C2A04E;   /* primary accent */
  --gold-soft:  #D8C088;
  --gold-deep:  #A6863A;
  --cream:      #F4ECDB;   /* page background */
  --cream-2:    #EFE6D2;   /* alt card-section background */
  --cream-card: #FBF6EC;   /* cards / surfaces */
  --ink:        #423D2E;   /* body text on cream */
  --ink-soft:   #6A6450;
  --muted:      #6F6952;
  --on-green:   #ECE3CD;   /* text on green */
  --on-green-soft: #C9C3A8;
  --line:       rgba(66,61,46,.16);
  --line-soft:  rgba(66,61,46,.08);
  --line-gold:  rgba(194,160,78,.4);
  --erfolg:     #5A6248;
  --fehler:     #9A4B3A;
}
:root[data-palette="salbei"]{
  --green-deep: #4B5742;
  --green:      #566145;
  --green-soft: #6B7556;
  --gold:       #C2A04E;
  --gold-soft:  #DAC494;
  --gold-deep:  #A6863A;
  --cream:      #F6F1E6;
  --cream-2:    #EDE9DB;
  --cream-card: #FCF9F1;
  --ink:        #41402F;
  --ink-soft:   #65624e;
  --muted:      #716C58;
  --on-green:   #EEE7D4;
  --on-green-soft: #CDC8AE;
  --line:       rgba(65,64,47,.15);
  --line-soft:  rgba(65,64,47,.07);
  --line-gold:  rgba(194,160,78,.4);
  --erfolg:     #5A6248;
  --fehler:     #9A4B3A;
}
:root[data-palette="sand"]{
  --green-deep: #4A4636;   /* warm taupe-brown instead of green */
  --green:      #57523F;
  --green-soft: #6E674F;
  --gold:       #C0974A;
  --gold-soft:  #DcC18A;
  --gold-deep:  #A47E34;
  --cream:      #F7F0E2;
  --cream-2:    #F1E8D6;
  --cream-card: #FDF9F0;
  --ink:        #463F2E;
  --ink-soft:   #6b6149;
  --muted:      #776E57;
  --on-green:   #EFE6D1;
  --on-green-soft: #D0C6AA;
  --line:       rgba(70,63,46,.16);
  --line-soft:  rgba(70,63,46,.08);
  --line-gold:  rgba(192,151,74,.42);
  --erfolg:     #6E674F;
  --fehler:     #96483A;
}

/* ---- Fonts (switchable via [data-font]) ---- */
:root{
  --font-display: "Cormorant Garamond", Georgia, serif;
  --font-script: "Pinyon Script", "Cormorant Garamond", cursive;
  --font-body: "Mulish", system-ui, sans-serif;
  --max: 1200px;
  --pad: clamp(20px, 5vw, 60px);
  --radius-img: clamp(10px, 1.3vw, 16px);   /* dezente, einheitliche Bildrundung (site-weit) */
  --photo-filter: saturate(.9) contrast(1.02) brightness(1.01);  /* dezenter, einheitlicher Foto-Look */
}
:root[data-font="schlicht"]{
  --font-display: "Marcellus", Georgia, serif;
}

/* ---- deco toggle ---- */
:root[data-deko="aus"] .deco{ display:none !important; }

/* ============================================================ */
*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body{
  margin:0;
  font-family:var(--font-body);
  font-weight:400;
  color:var(--ink);
  background:var(--cream);
  line-height:1.75;
  font-size:16.5px;
  -webkit-font-smoothing:antialiased;
}
img{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }

h1,h2,h3,h4{ font-family:var(--font-display); font-weight:500; line-height:1.1;
  margin:0; color:var(--ink); }
h1{ font-size:clamp(2.6rem,6vw,4.4rem); font-weight:500; }
h2{ font-size:clamp(2rem,4vw,3rem); font-weight:500; }
h3{ font-size:clamp(1.4rem,2.4vw,1.9rem); }
p{ margin:0 0 1em; color:var(--ink-soft); text-wrap:pretty; }

.script{ font-family:var(--font-script); font-weight:400; color:var(--gold-deep); line-height:1; }

.eyebrow{
  font-family:var(--font-body); font-size:.72rem; font-weight:700;
  letter-spacing:.3em; text-transform:uppercase; color:var(--gold-deep);
}
.lead{ font-size:1.16rem; color:var(--ink-soft); line-height:1.7; }
.section-sub{ max-width:48ch; }

.wrap{ max-width:var(--max); margin:0 auto; padding-left:var(--pad); padding-right:var(--pad); }
section{ padding:clamp(60px,9vw,118px) 0; }

/* ---- ornament: gold rule with heart ---- */
.orn{ display:flex; align-items:center; justify-content:center; gap:14px; }
.orn::before, .orn::after{ content:""; height:1px; width:clamp(40px,8vw,90px); background:var(--gold); opacity:.6; }
.orn svg{ width:16px; height:16px; color:var(--gold); flex:none; }
.orn.left{ justify-content:flex-start; }
.orn.left::before{ display:none; }
.orn.left::after{ width:clamp(40px,7vw,80px); }

/* ---- Buttons ---- */
.btn{
  display:inline-flex; align-items:center; gap:.7em;
  font-family:var(--font-body); font-weight:600; font-size:.78rem;
  letter-spacing:.18em; text-transform:uppercase; padding:1.05em 2em; border-radius:2px;
  border:1.5px solid var(--gold); cursor:pointer; transition:all .3s ease;
  background:transparent; color:var(--gold-deep); line-height:1;
}
.btn svg{ width:15px; height:15px; }
.btn:hover{ background:var(--gold); color:#fff; }
.btn--solid{ background:var(--gold); color:#fff; }
.btn--solid:hover{ background:var(--gold-deep); border-color:var(--gold-deep); }
.btn--on-green{ border-color:var(--gold-soft); color:var(--on-green); }
.btn--on-green:hover{ background:var(--gold); border-color:var(--gold); color:#fff; }
.link-gold{ font-family:var(--font-body); font-weight:700; font-size:.74rem; letter-spacing:.16em;
  text-transform:uppercase; color:var(--gold-deep); display:inline-flex; align-items:center; gap:.7em; transition:gap .25s; }
.link-gold svg{ width:18px; height:9px; }
.link-gold:hover{ gap:1.1em; }

/* ============================================================
   HEADER
   ============================================================ */
/* Default = OVER the dark hero: solid green header, light links */
.site-head{
  position:sticky; top:0; z-index:60;
  background:var(--green-deep);
  border-bottom:1px solid rgba(236,227,205,.12); transition:background .3s, border-color .3s, box-shadow .3s;
}
/* Scrolled PAST the hero: cream header, dark links */
.site-head.solid{ background:color-mix(in srgb, var(--cream) 94%, transparent);
  -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px);
  border-color:var(--line); box-shadow:0 4px 26px -18px rgba(59,67,48,.5); }
.head-inner{ max-width:1320px; margin:0 auto; padding:15px var(--pad);
  display:flex; align-items:center; justify-content:space-between; gap:20px; }
.head-brand{ display:flex; align-items:center; gap:10px; flex:none; }
.head-brand .head-mark{ height:34px; width:auto; }
.head-brand b{ font-family:var(--font-display); font-size:1.35rem; font-weight:600; letter-spacing:.02em; color:var(--on-green); }
/* Sieben Menüpunkte, zwei davon lang ("Haut & Beauty", "Make-up & Visagistik").
   Gap und Laufweite sind darauf abgestimmt — sonst reißt die Zeile den Header auf. */
.nav{ display:flex; align-items:center; gap:clamp(12px,1.5vw,26px); }
/* base (over hero) = light links */
.nav a{ font-size:.74rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--on-green);
  position:relative; padding:6px 0; transition:color .2s; white-space:nowrap; }
.nav a:hover, .nav a.active{ color:var(--gold-soft); }
.nav a.active::after{ content:""; position:absolute; left:0; right:0; bottom:0; height:1.5px; background:var(--gold-soft); }
/* solid (scrolled) = dark links */
.site-head.solid .head-brand b{ color:var(--ink); }
.site-head.solid .nav a{ color:var(--ink-soft); }
.site-head.solid .nav a:hover, .site-head.solid .nav a.active{ color:var(--gold-deep); }
.site-head.solid .nav a.active::after{ background:var(--gold); }
/* Untermenü (z. B. Yoga-Kurse) — Desktop-Dropdown.
   Öffnet bei Hover UND Tastatur-Fokus (:focus-within), bleibt also bedienbar ohne Maus. */
.nav-item{ position:relative; display:flex; align-items:center; }
.subnav{ position:absolute; top:100%; left:50%; z-index:60; margin:0; padding:.45rem 0; list-style:none;
  min-width:215px; transform:translateX(-50%) translateY(6px);
  background:var(--cream-card); border:1px solid var(--line); border-radius:12px;
  box-shadow:0 26px 48px -26px rgba(59,67,48,.6);
  opacity:0; visibility:hidden; pointer-events:none;
  transition:opacity .22s ease, transform .22s ease, visibility .22s; }
/* unsichtbare Brücke, damit der Mausweg nach unten das Menü nicht schließt */
.subnav::before{ content:""; position:absolute; left:0; right:0; top:-10px; height:10px; }
.nav-item:hover .subnav, .nav-item:focus-within .subnav{
  opacity:1; visibility:visible; pointer-events:auto; transform:translateX(-50%) translateY(0); }
.nav .subnav a{ display:block; padding:.62rem 1.15rem; font-size:.7rem; letter-spacing:.09em;
  color:var(--ink-soft); white-space:nowrap; }
.nav .subnav a:hover, .nav .subnav a.active{ color:var(--gold-deep);
  background:color-mix(in srgb, var(--gold) 14%, transparent); }
.nav .subnav a.active::after{ display:none; }

.head-cta{ display:flex; align-items:center; gap:14px; flex:none; }
.head-cta .btn{ padding:.85em 1.5em; color:var(--on-green); border-color:var(--gold-soft); }
.head-cta .btn:hover{ background:var(--gold); border-color:var(--gold); color:#fff; }
.site-head.solid .head-cta .btn{ color:var(--gold-deep); border-color:var(--gold); }
.site-head.solid .head-cta .btn:hover{ background:var(--gold); color:#fff; }
.burger{ display:none; position:relative; width:46px; height:46px; border:1px solid rgba(236,227,205,.32); border-radius:50%;
  background:transparent; cursor:pointer; padding:0; -webkit-tap-highlight-color:transparent;
  transition:background .3s, border-color .3s, transform .35s cubic-bezier(.68,-0.6,.28,1.6); }
.burger:hover{ background:rgba(236,227,205,.12); }
.burger:active{ transform:scale(.92); }
.site-head.solid .burger{ border-color:var(--line); }
.site-head.solid .burger:hover{ background:rgba(66,61,46,.06); }
.burger span{ position:absolute; left:50%; top:50%; width:19px; height:1.6px; background:var(--on-green); border-radius:2px;
  transform-origin:center; transition:transform .45s cubic-bezier(.68,-0.6,.28,1.6), opacity .22s ease, width .35s ease, background .3s; }
.burger span:nth-child(1){ transform:translate(-50%, calc(-50% - 5.5px)); }
.burger span:nth-child(2){ transform:translate(-50%, -50%); width:13px; }
.burger span:nth-child(3){ transform:translate(-50%, calc(-50% + 5.5px)); }
.site-head.solid .burger span{ background:var(--ink); }
.burger:hover span:nth-child(2){ width:19px; }
.burger.open{ border-color:var(--gold); }
.burger.open span:nth-child(1){ transform:translate(-50%,-50%) rotate(45deg); width:20px; background:var(--gold); }
.burger.open span:nth-child(2){ opacity:0; transform:translate(-50%,-50%) scaleX(0); }
.burger.open span:nth-child(3){ transform:translate(-50%,-50%) rotate(-45deg); width:20px; background:var(--gold); }

.mobile-nav{ display:none; }
/* Unter 1400px wird die Kopfzeile eng: Innenabstand und Spaltenabstand zurücknehmen,
   damit Marke, Navigation und Termin-Button nebeneinander passen. */
@media (max-width:1400px){
  .head-inner{ padding-left:clamp(16px,3vw,40px); padding-right:clamp(16px,3vw,40px); gap:14px; }
}
/* 1200px statt 1180px: Die Media Query misst die Viewport-Breite, das Layout steht aber
   nur in der um die Scrollbar verringerten Breite zur Verfügung. */
@media (max-width:1200px){
  .nav, .head-cta .btn{ display:none; }
  .burger{ display:block; }

  /* ---- Menü-Panel ---- */
  .mobile-nav{ display:flex; flex-direction:column; position:fixed; inset:0 0 0 auto;
    width:min(90vw,400px); z-index:70; overflow-y:auto;
    padding:clamp(88px,14vh,116px) clamp(26px,6vw,42px) clamp(28px,5vh,40px);
    color:var(--on-green);
    background:
      radial-gradient(120% 60% at 100% 0%, rgba(90,98,72,.55), transparent 60%),
      var(--green-deep);
    border-left:1px solid var(--line-gold);
    box-shadow:-30px 0 80px -40px rgba(0,0,0,.7);
    transform:translateX(100%);
    transition:transform .5s cubic-bezier(.62,.03,.2,1), visibility .5s;
    visibility:hidden; }
  .mobile-nav.open{ transform:translateX(0); visibility:visible; }

  /* Panel-Kopf: Herz-Mark + Tagline */
  .mnav-head{ display:flex; flex-direction:column; align-items:flex-start; gap:10px;
    padding-bottom:22px; margin-bottom:8px; border-bottom:1px solid rgba(236,227,205,.14);
    opacity:0; transform:translateY(-8px); transition:opacity .5s ease .08s, transform .5s ease .08s; }
  .mobile-nav.open .mnav-head{ opacity:1; transform:none; }
  .mnav-head .mnav-mark{ height:46px; width:auto; }
  .mnav-head .mnav-tagline{ font-size:.58rem; font-weight:700; letter-spacing:.24em;
    text-transform:uppercase; color:var(--gold-soft); }

  /* Link-Liste */
  .mnav-links{ list-style:none; margin:0; padding:0; flex:1; display:flex; flex-direction:column;
    justify-content:center; gap:2px; }
  .mnav-links li{ overflow:hidden; }
  .mnav-links a{ display:flex; align-items:baseline; gap:16px; padding:15px 0;
    border-bottom:1px solid rgba(236,227,205,.1);
    font-family:var(--font-display); font-size:clamp(1.5rem,6vw,2rem); font-weight:500; line-height:1;
    color:var(--on-green);
    opacity:0; transform:translateX(26px);
    transition:opacity .5s ease, transform .55s cubic-bezier(.4,0,.2,1), color .25s; }
  /* gestaffeltes Einblenden — Reihenfolge über --i, funktioniert für jede Link-Anzahl */
  .mobile-nav.open .mnav-links a{ opacity:1; transform:none;
    transition-delay:calc(0.16s + var(--i) * 0.055s); }
  .mnav-label{ flex:1; }
  .mnav-arrow{ display:flex; align-items:center; color:var(--gold-soft);
    opacity:0; transform:translateX(-8px); transition:opacity .3s, transform .3s; }
  .mnav-arrow svg{ width:22px; height:11px; }
  .mnav-links a:hover, .mnav-links a:focus-visible{ color:var(--gold-soft); }
  .mnav-links a:hover .mnav-arrow, .mnav-links a:focus-visible .mnav-arrow{ opacity:1; transform:none; }
  .mnav-links a.active{ color:var(--gold-soft); }
  .mnav-links a.active .mnav-arrow{ opacity:1; transform:none; }

  /* Unterpunkte (Yoga-Kurse): eingerückt, kleiner, mit dünner Gold-Linie als Zugehörigkeit */
  .mnav-links li.mnav-sub{ position:relative; padding-left:16px; }
  .mnav-links li.mnav-sub::before{ content:""; position:absolute; left:2px; top:0; bottom:1px;
    width:1px; background:rgba(194,160,78,.4); }
  .mnav-links li.mnav-sub a{ padding:10px 0; font-size:clamp(1rem,3.6vw,1.18rem); color:rgba(236,227,205,.82); }
  .mnav-links li.mnav-sub a:hover, .mnav-links li.mnav-sub a:focus-visible,
  .mnav-links li.mnav-sub a.active{ color:var(--gold-soft); }
  .mnav-links li.mnav-sub .mnav-arrow svg{ width:16px; height:8px; }

  /* Untermenü (Yoga) im Handy-Menü: zu by default, per Pfeil-Button aufklappbar */
  .mnav-links li.mnav-hassub{ display:block; }
  .mnav-row{ display:flex; align-items:center; gap:6px; }
  .mnav-row > a{ flex:1; }
  .mnav-toggle{ flex:none; background:transparent; border:0; cursor:pointer; padding:12px 4px;
    display:flex; align-items:center; color:var(--gold-soft); }
  .mnav-chev{ display:flex; opacity:.75; transition:transform .28s cubic-bezier(.2,.7,.2,1), opacity .2s; }
  .mnav-chev svg{ width:18px; height:18px; }
  .mnav-toggle:hover .mnav-chev{ opacity:1; }
  .mnav-hassub.open .mnav-toggle .mnav-chev{ transform:rotate(180deg); opacity:1; }
  .mnav-subwrap{ list-style:none; margin:0; padding:0; display:none; }
  .mnav-hassub.open .mnav-subwrap{ display:block; }

  /* Panel-Fuß: Button + Kontakt */
  .mnav-foot{ margin-top:24px; padding-top:24px; border-top:1px solid rgba(236,227,205,.14);
    opacity:0; transform:translateY(14px);
    transition:opacity .5s ease .5s, transform .55s cubic-bezier(.4,0,.2,1) .5s; }
  .mobile-nav.open .mnav-foot{ opacity:1; transform:none; }
  .mnav-foot .btn{ width:100%; justify-content:center; color:var(--on-green); border-color:var(--gold-soft); }
  .mnav-foot .btn:hover{ background:var(--gold); border-color:var(--gold); color:#fff; }
  .mnav-contact{ display:flex; align-items:center; justify-content:space-between; gap:14px; margin-top:18px; }
  .mnav-contact > a{ font-family:var(--font-display); font-size:1.15rem; color:var(--on-green); transition:color .2s; }
  .mnav-contact > a:hover{ color:var(--gold-soft); }
  .mnav-social{ display:flex; gap:10px; }
  .mnav-social a{ width:38px; height:38px; border:1px solid var(--line-gold); border-radius:50%;
    display:flex; align-items:center; justify-content:center; transition:.25s; }
  .mnav-social a:hover{ background:var(--gold); border-color:var(--gold); }
  .mnav-social svg{ width:16px; height:16px; color:var(--gold-soft); }
  .mnav-social a:hover svg{ color:#fff; }

  .scrim{ position:fixed; inset:0; background:rgba(33,38,26,.5); z-index:69; opacity:0;
    pointer-events:none; transition:opacity .45s; -webkit-backdrop-filter:blur(3px); backdrop-filter:blur(3px); }
  .scrim.open{ opacity:1; pointer-events:auto; }
}
@media (max-width:420px){
  .head-brand b{ font-size:1.18rem; }
  .head-brand .head-mark{ height:30px; }
  .head-inner{ padding:12px var(--pad); }
}
@media (prefers-reduced-motion: reduce){
  .mobile-nav, .mnav-head, .mnav-links a, .mnav-foot{ transition-duration:.01ms !important; }
  .mnav-links a{ opacity:1; transform:none; }
}

/* ============================================================
   HERO  (dark green, centered logo)
   ============================================================ */
.hero{ position:relative; color:var(--on-green); overflow:hidden;
  text-align:center; padding:clamp(120px,17vh,180px) 0 clamp(80px,12vh,130px);
  background:var(--green-deep) url("images/hero-studio-wand.webp") center/cover no-repeat; }
/* Scrim: hält den Text auch über dem Foto lesbar (Vase/Kerze sitzen links). */
.hero::before{ content:""; position:absolute; inset:0;
  background:
    radial-gradient(120% 90% at 50% 18%, rgba(90,98,72,.42), transparent 60%),
    linear-gradient(90deg, rgba(59,67,48,.55) 0%, rgba(59,67,48,.72) 42%, rgba(59,67,48,.72) 58%, rgba(59,67,48,.35) 100%); }
.hero-deco{ position:absolute; inset:0; z-index:0; pointer-events:none; overflow:hidden; }
.hero-deco svg{ position:absolute; color:var(--gold); opacity:.13; }
.hero-deco .d-left{ left:-60px; top:40px; width:300px; height:auto; transform:rotate(-8deg); }
.hero-deco .d-right{ right:-80px; bottom:-30px; width:380px; height:auto; transform:rotate(6deg) scaleX(-1); opacity:.1; }
.hero::before{ z-index:1; }
.hero-inner{ position:relative; z-index:2; max-width:760px; margin:0 auto; padding:0 var(--pad); }

/* ---- Hero auf schmalen Schirmen ----------------------------------------
   Problem: Vase und Kerze sitzen LINKS im Foto. Mit center/cover schneidet
   das Handy beide weg — übrig bleibt leere Wand plus die goldene Ranke.
   Lösung: Foto horizontal spiegeln, dann kommt die Vase von RECHTS ins Bild.
   Der Scrim wird mitgedreht: dunkel oben links (Text), licht unten rechts (Vase).
   Die Vektor-Ranke entfällt hier — das echte Motiv trägt die Fläche allein. */
@media (max-width:760px){
  .hero{ background-image:none; }
  .hero::after{
    content:""; position:absolute; inset:0; z-index:0;
    background:url("images/hero-studio-wand.webp") left center/cover no-repeat;
    transform:scaleX(-1);
  }
  .hero::before{
    background:
      radial-gradient(130% 85% at 42% 22%, rgba(59,67,48,.58), transparent 68%),
      linear-gradient(200deg, rgba(59,67,48,.86) 0%, rgba(59,67,48,.74) 48%, rgba(59,67,48,.28) 100%);
  }
  .hero-deco{ display:none; }
}
/* Die <h1> ist das Logo — der alt-Text trägt die Überschrift, kein doppelter Wortlaut. */
.hero-title{ margin:0; font-size:0; line-height:0; }
.hero-logo{ width:clamp(260px,32vw,400px); height:auto; margin:0 auto clamp(18px,3vw,30px);
  filter:drop-shadow(0 8px 30px rgba(0,0,0,.25)); }
.hero .tagline{ font-family:var(--font-body); font-size:clamp(.72rem,1.3vw,.84rem); font-weight:600;
  letter-spacing:.34em; text-transform:uppercase; color:var(--gold-soft); margin:0 0 clamp(20px,3vw,30px); }
.hero .script-line{ font-family:var(--font-script); font-size:clamp(2.4rem,5vw,3.4rem); color:var(--gold-soft);
  line-height:1; margin:0 0 1.1rem; }
.hero .hero-lead{ font-size:clamp(1rem,1.5vw,1.15rem); color:var(--on-green); opacity:.92; max-width:46ch; margin:0 auto 2.2rem; }
.hero .btn{ }

/* ============================================================
   THREE AREAS — Yoga / Beauty / Styling
   ============================================================ */
.areas{ background:var(--cream-2); }
.area-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(20px,2.5vw,34px); }
.area-card{ background:var(--cream-card); box-shadow:0 4px 24px -14px rgba(59,67,48,.4);
  display:flex; flex-direction:column; transition:transform .35s ease, box-shadow .35s ease; }
.area-card:hover{ transform:translateY(-6px); box-shadow:0 30px 50px -28px rgba(59,67,48,.5); }
.area-card .ac-img{ position:relative; }
.area-card .ac-imgwrap{ aspect-ratio:16/11; overflow:hidden; }
.area-card .ac-imgwrap img{ width:100%; height:100%; object-fit:cover; filter:var(--photo-filter); transition:transform .8s cubic-bezier(.2,.7,.2,1); }
.area-card:hover .ac-imgwrap img{ transform:scale(1.06); }
.area-card .ac-badge{ position:absolute; left:50%; bottom:0; transform:translate(-50%,50%);
  width:62px; height:62px; border-radius:50%; background:var(--green-deep); display:flex; align-items:center; justify-content:center;
  box-shadow:0 8px 20px -6px rgba(33,38,26,.5); z-index:3; border:3px solid var(--cream-card);
  transition:transform .4s cubic-bezier(.68,-0.4,.28,1.5); }
.area-card:hover .ac-badge{ transform:translate(-50%,50%) scale(1.08) rotate(-6deg); }
.area-card .ac-badge svg{ width:28px; height:28px; color:var(--gold-soft); }
.area-card .ac-body{ padding:48px clamp(22px,2.4vw,34px) clamp(28px,3vw,38px); text-align:center; display:flex; flex-direction:column; align-items:center; gap:.8rem; flex:1; }
.area-card h3{ font-size:1.7rem; letter-spacing:.04em; text-transform:uppercase; font-weight:500; color:var(--ink); }
.area-card .ac-body p{ font-size:.96rem; color:var(--ink-soft); margin:0; flex:1; }
.area-card .link-gold{ margin-top:.4rem; }
@media (max-width:860px){ .area-grid{ grid-template-columns:1fr; max-width:460px; margin:0 auto; } }

/* intro above areas */
.areas-intro{ text-align:center; max-width:600px; margin:0 auto clamp(40px,5vw,64px); }
.areas-intro h2{ margin:1rem 0 .6rem; }

/* ============================================================
   ABOUT (split, oval photo)
   ============================================================ */
.about{ background:var(--cream-2); position:relative; }
.about-inner{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(36px,6vw,84px); align-items:center; }
/* Solo: ohne Porträt-Bild — Text als ruhiger, zentrierter Einspalter (linksbündig gesetzt) */
.about-inner.solo{ display:block; max-width:760px; margin-inline:auto; }
.about-text .orn{ margin-bottom:1.4rem; }
.about-text h2{ margin-bottom:1.4rem; }
.about-text p{ font-size:1.02rem; }
.about-figure{ position:relative; }
.about-figure .oval{ border-radius:var(--radius-img); overflow:hidden; aspect-ratio:4/5;
  box-shadow:0 30px 60px -34px rgba(59,67,48,.6); }
.about-figure .oval img{ width:100%; height:100%; object-fit:cover; object-position:50% 22%; display:block;
  filter:var(--photo-filter); }
.about-figure .deco{ position:absolute; right:-26px; top:50%; transform:translateY(-50%); width:120px; color:var(--gold); opacity:.55; z-index:-1; }
@media (max-width:820px){ .about-inner{ grid-template-columns:1fr; } .about-figure{ max-width:420px; margin:0 auto; } }

/* ============================================================
   VALUES BAND (dark green, 4 cols)
   ============================================================ */
.values{ background:var(--green-deep); color:var(--on-green); }
.values-grid{ display:grid; grid-template-columns:repeat(4,1fr); }
.values-grid .v{ text-align:center; padding:clamp(20px,2.5vw,30px) clamp(16px,2vw,28px); position:relative; }
.values-grid .v + .v::before{ content:""; position:absolute; left:0; top:18%; bottom:18%; width:1px; background:rgba(236,227,205,.18); }
.values-grid .v .v-ico{ width:34px; height:34px; color:var(--gold-soft); margin:0 auto 14px; }
.values-grid .v h4{ font-family:var(--font-body); font-size:.78rem; font-weight:700; letter-spacing:.2em; text-transform:uppercase;
  color:var(--gold-soft); margin:0 0 .5rem; }
.values-grid .v p{ font-size:.92rem; color:var(--on-green); opacity:.8; margin:0; }
@media (max-width:760px){ .values-grid{ grid-template-columns:1fr 1fr; gap:1px; }
  .values-grid .v + .v::before{ display:none; }
  .values-grid .v{ border-top:1px solid rgba(236,227,205,.14); } }

/* ============================================================
   CARD GRID (subpage offerings)
   ============================================================ */
.section-head{ max-width:640px; margin-bottom:clamp(34px,4vw,54px); }
.section-head.center{ margin-inline:auto; text-align:center; }
.section-head .orn{ margin-bottom:1.2rem; }
.section-head.center .orn{ justify-content:center; }
.section-head h2{ margin-bottom:.7rem; }

/* Flexbox statt starrem Grid: eine unvollständige letzte Reihe (z. B. 5 Karten in
   3 Spalten) steht so zentriert unter den oberen statt links zu kleben.
   Kartenbreite exakt wie zuvor — über --n (Spaltenzahl) und --g (Abstand) berechnet. */
.card-grid{ --n:3; --g:clamp(18px,2.2vw,28px); display:flex; flex-wrap:wrap; justify-content:center; gap:var(--g); }
.card-grid.cols-4{ --n:4; }
.card-grid > *{ flex:0 1 calc((100% - (var(--n) - 1) * var(--g)) / var(--n)); }
@media (max-width:980px){ .card-grid.cols-3, .card-grid.cols-4{ --n:2; } }
@media (max-width:620px){ .card-grid.cols-3, .card-grid.cols-4{ --n:1; } }

.card{ background:var(--cream-card); overflow:hidden; box-shadow:0 3px 18px -10px rgba(59,67,48,.35);
  transition:transform .3s, box-shadow .3s; display:flex; flex-direction:column; }
.card:hover{ transform:translateY(-5px); box-shadow:0 26px 46px -26px rgba(59,67,48,.5); }
/* Karten-Bilder bleiben eckig — Bild+Text bilden eine klare Einheit */
/* Sprungmarken: der Header klebt oben, sonst landet das Ziel darunter. */
section[id]{ scroll-margin-top:clamp(70px,9vh,96px); }

/* ---- Spezialgebiete (beauty.html) ---- */
.spezial-grid{ --n:3; --g:clamp(16px,2vw,26px); display:flex; flex-wrap:wrap; justify-content:center; gap:var(--g); margin-top:clamp(28px,4vw,48px); }
.spezial-grid > *{ flex:0 1 calc((100% - (var(--n) - 1) * var(--g)) / var(--n)); }
@media (max-width:900px){ .spezial-grid{ --n:2; } }
@media (max-width:600px){ .spezial-grid{ --n:1; } }
.spezial{ background:var(--cream-card); border:1px solid var(--line-gold);
  padding:clamp(22px,2.4vw,30px); display:flex; flex-direction:column; gap:.7rem;
  box-shadow:0 3px 18px -12px color-mix(in srgb, var(--green-deep) 45%, transparent); }
.spezial-badge{ align-self:flex-start; font-size:.62rem; font-weight:700; letter-spacing:.16em;
  text-transform:uppercase; color:var(--gold-deep); padding:.35em .8em;
  border:1px solid var(--line-gold); border-radius:999px; }
.spezial h3{ font-size:1.4rem; font-weight:500; }
.spezial p{ font-size:.95rem; color:var(--ink-soft); margin:0; flex:1; }
.spezial .card-mehr{ align-self:flex-start; margin-top:.2rem; font-size:.82rem; color:var(--green-deep);
  border-bottom:1px solid transparent; transition:border-color .25s; }
.spezial .card-mehr:hover{ border-bottom-color:var(--gold-deep); }

/* ---- Wochenplan (yoga.astro) ---- */
.visually-hidden{ position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip-path:inset(50%); white-space:nowrap; border:0; }

.plan-wrap{ overflow-x:auto; background:var(--cream-card); border:1px solid var(--line-gold);
  box-shadow:0 3px 18px -12px color-mix(in srgb, var(--green-deep) 55%, transparent); }
.plan{ width:100%; border-collapse:collapse; min-width:520px; }
.plan th, .plan td{ padding:.85rem 1.1rem; text-align:left; font-size:.95rem;
  border-bottom:1px solid color-mix(in srgb, var(--gold) 22%, transparent); }
.plan thead th{ font-size:.7rem; font-weight:700; letter-spacing:.16em; text-transform:uppercase;
  color:var(--green-deep); background:color-mix(in srgb, var(--gold) 12%, transparent); }
.plan tbody th{ font-weight:600; color:var(--green-deep); white-space:nowrap; }
.plan tbody td{ color:var(--ink-soft); }
.plan tbody tr:last-child th, .plan tbody tr:last-child td{ border-bottom:0; }
.plan-note{ margin:.9rem 0 0; font-size:.85rem; color:var(--muted); text-align:center; }
@media (max-width:560px){
  .plan{ min-width:430px; }
  .plan th, .plan td{ padding:.65rem .7rem; font-size:.88rem; }
}

.card .card-img{ aspect-ratio:4/3; overflow:hidden; position:relative; }
.card .card-platzhalter{ position:absolute; top:12px; left:12px; z-index:2;
  font-size:.62rem; font-weight:700; letter-spacing:.16em; text-transform:uppercase;
  padding:.4em .8em; color:var(--green-deep); background:color-mix(in srgb, var(--cream-card) 88%, transparent);
  border:1px solid var(--line-gold); -webkit-backdrop-filter:blur(2px); backdrop-filter:blur(2px); }
.card .card-img img{ width:100%; height:100%; object-fit:cover; object-position:var(--img-fokus,50% 50%); filter:var(--photo-filter); transition:transform .6s cubic-bezier(.2,.7,.2,1); }
.card:hover .card-img img{ transform:scale(1.06); }
.card .card-body{ padding:clamp(20px,2vw,28px); display:flex; flex-direction:column; gap:.55rem; flex:1; }
.card .when{ font-size:.7rem; font-weight:700; letter-spacing:.18em; text-transform:uppercase; color:var(--gold-deep); }
.card h3{ font-size:1.45rem; font-weight:500; }
.card p{ font-size:.94rem; color:var(--ink-soft); margin:0; flex:1; }
/* Meta-Fuß der Karte: Kurstage-Link + Preis, durch dünne Gold-Linie abgesetzt */
.card .card-meta{ margin-top:.4rem; padding-top:.8rem; border-top:1px solid color-mix(in srgb, var(--gold) 34%, transparent);
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:.5rem .9rem; }
.card .card-mehr{ font-size:.82rem; color:var(--green-deep); text-decoration:none; border-bottom:1px solid transparent; transition:border-color .25s; }
.card .card-mehr:hover{ border-bottom-color:var(--gold-deep); }
.card .card-preis{ font-size:.92rem; font-weight:700; color:var(--gold-deep); white-space:nowrap; }
.card h3 .card-titel-link{ color:inherit; text-decoration:none; transition:color .25s; }
.card h3 .card-titel-link:hover{ color:var(--gold-deep); }

/* ============================================================
   FEATURE STRIP (image + text)
   ============================================================ */
.strip{ background:var(--cream-2); }
.strip-inner{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(28px,5vw,72px); align-items:center; }
/* Frei stehende, große Bilder: nur weiche Rundung, kein Rahmen */
.strip-figure{ border-radius:var(--radius-img); box-shadow:0 26px 52px -32px rgba(59,67,48,.55); }
.strip-figure img{ width:100%; height:clamp(320px,40vw,470px); object-fit:cover; display:block;
  object-position:var(--fig-pos,50% 50%); border-radius:var(--radius-img); filter:var(--photo-filter); }
.strip ul{ list-style:none; padding:0; margin:1.4rem 0 0; display:flex; flex-direction:column; gap:.7rem; }
.strip li{ padding-left:1.8rem; position:relative; color:var(--ink-soft); }
.strip li::before{ content:""; position:absolute; left:0; top:.62em; width:8px; height:8px; transform:rotate(45deg); background:var(--gold); }
/* Zentrierte Variante ohne Bild: Text mittig, Aufzählung als zentrierter Block */
.strip-centered-inner{ max-width:680px; margin-inline:auto; text-align:center; }
.strip-centered-inner .lead{ margin-inline:auto; }
.strip-centered ul{ display:inline-flex; margin-inline:auto; text-align:left; }
/* Zickzack: umgedrehter Streifen zeigt das Bild links, Text rechts (nur Desktop) */
.strip-flip .strip-figure{ order:-1; }
@media (max-width:820px){
  .strip-inner{ grid-template-columns:1fr; }
  .strip-figure, .strip-flip .strip-figure{ order:0; }   /* mobil immer: Text zuerst, dann Bild */
}

/* ============================================================
   QUOTE / CTA band (green)
   ============================================================ */
.cta-band{ background:var(--green-deep); color:var(--on-green); text-align:center; }
.cta-band .orn{ margin-bottom:1.4rem; }
.cta-band .orn::before, .cta-band .orn::after{ background:var(--gold-soft); }
.cta-band h2{ color:var(--on-green); max-width:20ch; margin:0 auto .6rem; }
.cta-band .script-line{ font-family:var(--font-script); font-size:clamp(2rem,4vw,2.8rem); color:var(--gold-soft); margin:0 0 1.2rem; }
.cta-band p{ color:var(--on-green); opacity:.85; max-width:44ch; margin:0 auto 2.2rem; }

/* ============================================================
   PAGE HERO (subpages) — green
   ============================================================ */
.page-hero{ background:var(--green-deep); color:var(--on-green); text-align:center;
  padding:clamp(140px,18vh,200px) 0 clamp(56px,8vw,86px); position:relative; overflow:hidden; }
.page-hero::before{ content:""; position:absolute; inset:0;
  background:radial-gradient(120% 100% at 50% 0%, rgba(90,98,72,.4), transparent 62%); }
.page-hero .wrap{ position:relative; z-index:2; }
.page-hero .orn{ margin-bottom:1.2rem; }
.page-hero .orn::before, .page-hero .orn::after{ background:var(--gold-soft); }
.page-hero .eyebrow{ color:var(--gold-soft); }
.page-hero h1{ color:var(--on-green); margin:.6rem 0 0; }
.page-hero p{ color:var(--on-green); opacity:.86; max-width:54ch; margin:1.1rem auto 0; }

/* ============================================================
   PRICE LISTS (angebote)
   ============================================================ */
.price-block{ margin-bottom:clamp(34px,5vw,56px); }
.price-block h3{ display:flex; align-items:baseline; gap:.7rem; margin-bottom:1.1rem; }
.price-block h3 .tag{ font-family:var(--font-body); font-size:.68rem; font-weight:700; letter-spacing:.18em;
  text-transform:uppercase; color:var(--gold-deep); }
.price-list{ border-top:1px solid var(--gold); }
.price-line{ display:flex; justify-content:space-between; align-items:baseline; gap:20px;
  padding:15px 0; border-bottom:1px solid var(--line-soft); }
.price-line .pl-name{ font-weight:600; color:var(--ink); }
.price-line .pl-name span{ display:block; font-weight:400; font-size:.86rem; color:var(--muted); margin-top:2px; }
.price-line .pl-price{ font-family:var(--font-display); font-size:1.35rem; white-space:nowrap; color:var(--gold-deep); }

/* ============================================================
   CONTACT
   ============================================================ */
.contact-grid{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(30px,5vw,64px); }
@media (max-width:820px){ .contact-grid{ grid-template-columns:1fr; } }
.contact-info{ display:flex; flex-direction:column; gap:1.5rem; }
.contact-info .ci{ display:flex; flex-direction:column; gap:.15rem; }
.contact-info .ci .lbl{ font-size:.72rem; font-weight:700; letter-spacing:.18em; text-transform:uppercase; color:var(--gold-deep); }
.contact-info .ci .val{ font-family:var(--font-display); font-size:1.4rem; color:var(--ink); }
.hours{ list-style:none; padding:0; margin:0; border-top:1px solid var(--gold); }
.hours li{ display:flex; justify-content:space-between; padding:11px 0; border-bottom:1px solid var(--line-soft); font-size:.95rem; }
.hours li span:first-child{ color:var(--ink); font-weight:600; }
.hours li span:last-child{ color:var(--muted); }
.form{ display:flex; flex-direction:column; gap:1rem; background:var(--cream-card); padding:clamp(26px,3vw,40px);
  border:1px solid var(--line); }
.form label{ font-size:.7rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--gold-deep); margin-bottom:.4rem; display:block; }
.form input, .form textarea, .form select{ width:100%; font-family:var(--font-body); font-size:1rem;
  padding:.85em 1em; border:1px solid var(--line); border-radius:2px; background:var(--cream); color:var(--ink); }
/* Nur bei Maus-/Touch-Fokus die Kontur ausblenden — Tastaturnutzer behalten den
   globalen :focus-visible-Ring (sonst ist das Formular ohne Maus nicht navigierbar). */
/* DSGVO-Einwilligung: Checkbox neben Fließtext — bewusst NICHT im Versalien-Label-Stil,
   damit der Einwilligungstext lesbar bleibt (Anforderung an Transparenz). */
.form-consent{ display:flex; align-items:flex-start; gap:.7rem; }
.form-consent input[type="checkbox"]{ width:1.05rem; height:1.05rem; flex:none; margin-top:.28rem;
  accent-color:var(--gold-deep); cursor:pointer; }
.form-consent label{ font-size:.86rem; font-weight:400; letter-spacing:0; text-transform:none;
  color:var(--ink-soft); line-height:1.55; margin:0; cursor:pointer; }
.form-consent label a{ color:var(--gold-deep); text-decoration:underline; text-underline-offset:2px; }
.form-consent label a:hover{ color:var(--green-deep); }

.form input:focus:not(:focus-visible), .form textarea:focus:not(:focus-visible), .form select:focus:not(:focus-visible){ outline:none; }
.form input:focus, .form textarea:focus, .form select:focus{ border-color:var(--gold); }
.form .btn{ align-self:flex-start; margin-top:.4rem; }

/* prose */
.prose{ max-width:64ch; }
.prose p{ font-size:1.05rem; }
.prose h3{ margin:2rem 0 .6rem; }

/* placeholder pill */
.placeholder-pill{ display:inline-block; font-size:.66rem; font-weight:700; letter-spacing:.08em;
  text-transform:uppercase; color:var(--gold-deep); background:color-mix(in srgb, var(--gold) 20%, transparent);
  padding:.2em .7em; border-radius:999px; margin-left:.5em; vertical-align:middle; }

/* ============================================================
   FOOTER (warm cream)
   ============================================================ */
.site-foot{ background:var(--cream-2); color:var(--ink); padding:clamp(54px,7vw,82px) 0 30px; border-top:1px solid var(--line-soft); }
.foot-top{ display:grid; grid-template-columns:1.4fr 1fr 1.3fr; gap:clamp(26px,4vw,48px); padding-bottom:42px;
  border-bottom:1px solid var(--line); }
.foot-brand .foot-mark{ height:60px; width:auto; margin-bottom:12px; }
.foot-brand b{ font-family:var(--font-display); font-size:1.6rem; font-weight:600; display:block; color:var(--ink); }
.foot-brand .tagline{ font-size:.6rem; font-weight:700; letter-spacing:.22em; text-transform:uppercase; color:var(--gold-deep); margin-top:.35rem; }
.foot-col h5{ font-size:.7rem; font-weight:700; letter-spacing:.2em; text-transform:uppercase; color:var(--gold-deep);
  margin:0 0 1.2rem; font-family:var(--font-body); }
.foot-col ul{ list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:.65rem; }
.foot-col a, .foot-col li{ color:var(--ink-soft); font-size:.92rem; }
.foot-col a:hover{ color:var(--gold-deep); }
.foot-nav-cols{ display:grid; grid-template-columns:1fr; gap:.65rem 20px; }
.foot-contact li{ display:flex; gap:.6rem; align-items:flex-start; }
.foot-contact svg{ width:16px; height:16px; color:var(--gold-deep); flex:none; margin-top:3px; }
.foot-social{ display:flex; gap:12px; }
.foot-social a{ width:42px; height:42px; border:1px solid var(--gold); border-radius:50%;
  display:flex; align-items:center; justify-content:center; transition:.25s; }
.foot-social a:hover{ background:var(--gold); border-color:var(--gold); }
.foot-social svg{ width:18px; height:18px; color:var(--gold-deep); }
.foot-social a:hover svg{ color:#fff; }
.foot-bottom{ display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:14px;
  padding-top:24px; font-size:.8rem; color:var(--muted); }
.foot-bottom .legal{ display:flex; gap:8px; flex-wrap:wrap; align-items:center; }
.foot-bottom .legal a:hover{ color:var(--gold-deep); }
.foot-bottom .sign{ font-family:var(--font-script); font-size:1.8rem; color:var(--gold-deep); }
/* Dezenter Design-Credit — ganz leise, ohne vom HerzRaum-Auftritt abzulenken. */
.foot-credit{ margin:14px 0 0; text-align:center; font-size:.74rem; letter-spacing:.04em;
  color:var(--muted); }
.foot-credit a{ color:var(--muted); border-bottom:1px solid transparent; transition:color .25s, border-color .25s; }
.foot-credit a:hover{ color:var(--gold-deep); border-bottom-color:var(--gold-deep); }
@media (max-width:820px){ .foot-top{ grid-template-columns:1fr 1fr; row-gap:34px; } .foot-brand{ grid-column:1/-1; } }
/* Handy: alles untereinander statt gequetscht nebeneinander */
@media (max-width:560px){ .foot-top{ grid-template-columns:1fr; } .foot-nav-cols{ grid-template-columns:1fr; } }

/* ============================================================
   PORTRÄT-BAND  (Startseite: großes Bild + ein Satz)
   ============================================================ */
.portrait-band{ background:var(--cream); text-align:center;
  padding:clamp(56px,8vw,110px) 0 clamp(40px,6vw,80px); }
.portrait-band .portrait{ position:relative; max-width:460px; margin:0 auto clamp(30px,4vw,52px); }
.portrait-band .portrait img{ width:100%; height:auto; display:block;
  border-radius:var(--radius-img); box-shadow:0 30px 60px -34px rgba(59,67,48,.55); filter:var(--photo-filter); }
.portrait-band .portrait .deco{ position:absolute; right:-56px; bottom:-10px; width:120px; height:auto;
  color:var(--gold); opacity:.55; pointer-events:none; }
.portrait-band .lead-one{ font-family:var(--font-display); font-size:clamp(1.35rem,2.6vw,1.9rem);
  line-height:1.5; color:var(--ink); max-width:34ch; margin:0 auto; }
@media (max-width:620px){ .portrait-band .portrait .deco{ display:none; } }

/* ============================================================
   WARUM HERZRAUM?  (Zitat + drei Spalten)
   ============================================================ */
.warum{ background:var(--cream-2); }
.warum .quote{ font-family:var(--font-display); font-size:clamp(1.5rem,3.2vw,2.3rem); line-height:1.4;
  color:var(--gold-deep); text-align:center; max-width:26ch; margin:0 auto clamp(44px,6vw,72px);
  font-style:italic; }
.warum-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(24px,3vw,48px); }
.warum-grid .w{ text-align:center; padding:0 clamp(4px,1.5vw,18px); }
.warum-grid .w + .w{ border-left:1px solid var(--line-gold); }
.warum-grid .w h3{ font-family:var(--font-display); font-size:clamp(1.4rem,2.2vw,1.75rem);
  margin:0 0 .7rem; color:var(--ink); }
.warum-grid .w p{ margin:0; color:var(--ink-soft); }
@media (max-width:760px){
  .warum-grid{ grid-template-columns:1fr; gap:34px; }
  .warum-grid .w + .w{ border-left:0; border-top:1px solid var(--line-gold); padding-top:32px; }
}

/* ============================================================
   reveal-on-scroll
   ============================================================ */
@media (prefers-reduced-motion: no-preference){
  .reveal{ opacity:0; transform:translateY(22px); transition:opacity .7s ease, transform .7s ease; }
  .reveal.in{ opacity:1; transform:none; }
}

/* ============================================================
   TWEAKS PANEL
   ============================================================ */
#twk{ position:fixed; right:16px; bottom:16px; z-index:2147483646; width:262px;
  background:rgba(244,236,219,.9); -webkit-backdrop-filter:blur(22px) saturate(140%); backdrop-filter:blur(22px) saturate(140%);
  border:1px solid var(--line-gold); border-radius:8px; box-shadow:0 14px 44px rgba(59,67,48,.3); color:var(--ink);
  font-family:var(--font-body); font-size:12px; display:none; flex-direction:column; overflow:hidden; }
#twk.show{ display:flex; }
#twk .twk-hd{ display:flex; align-items:center; justify-content:space-between; padding:11px 10px 11px 15px; cursor:move;
  border-bottom:1px solid var(--line-soft); }
#twk .twk-hd b{ font-size:12.5px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--gold-deep); }
#twk .twk-x{ border:0; background:transparent; color:var(--muted); width:24px; height:24px; border-radius:5px; cursor:pointer; font-size:15px; }
#twk .twk-x:hover{ background:rgba(0,0,0,.06); color:var(--ink); }
#twk .twk-body{ padding:6px 15px 16px; display:flex; flex-direction:column; gap:13px; }
#twk .sect{ font-size:10px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); margin-top:6px; }
#twk .sect:first-child{ margin-top:0; }
#twk .seg{ display:flex; padding:2px; border-radius:5px; background:rgba(66,61,46,.08); gap:2px; }
#twk .seg button{ flex:1; border:0; background:transparent; color:var(--ink-soft); font:inherit; font-weight:600;
  padding:6px 4px; border-radius:4px; cursor:pointer; transition:.15s; }
#twk .seg button.on{ background:var(--cream-card); color:var(--ink); box-shadow:0 1px 3px rgba(0,0,0,.12); }
#twk .swatches{ display:flex; gap:8px; }
#twk .sw{ flex:1; height:34px; border-radius:5px; cursor:pointer; border:2px solid transparent; display:flex; overflow:hidden; }
#twk .sw.on{ border-color:var(--gold-deep); }
#twk .sw i{ flex:1; }