/* ==========================================================
   Isabelle Jane – Hair & Permanent Make Up Aesthetic
   ========================================================== */

/* ---------- Gekaufte Schriften (Lizenz: Isabelle Jane) ---------- */
@font-face{
  font-family:"TAN Pearl";
  src:url("../fonts/tan-pearl.woff2") format("woff2"),
      url("../fonts/tan-pearl.woff") format("woff");
  font-weight:400; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"Beautifully Delicious Script";
  src:url("../fonts/beautifully-delicious-script.woff") format("woff");
  font-weight:400; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"TAN Mon Cheri";
  src:url("../fonts/tan-mon-cheri.woff") format("woff");
  font-weight:400; font-style:normal; font-display:swap;
}

:root{
  --bg-0:#100e0b;
  --bg-1:#181510;
  --bg-2:#221e17;
  --bg-3:#2b261d;
  --ivory:#f4efe3;
  --ivory-dim:#cabfa9;
  --line:rgba(244,239,227,.14);
  --line-strong:rgba(244,239,227,.28);

  --f-display:"TAN Pearl","Italiana",Georgia,serif;      /* grosse Ueberschriften */
  --f-sub:"TAN Mon Cheri","Italiana",Georgia,serif;      /* edle, duenne Zwischenueberschriften */
  --f-script:"Beautifully Delicious Script",cursive;     /* Schreibschrift / Sprueche */
  --f-body:"Jost",system-ui,sans-serif;                    /* Fliesstext & Labels */
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  background:
    radial-gradient(ellipse 900px 500px at 50% -10%, rgba(255,224,180,.07), transparent 60%),
    var(--bg-0);
  color:var(--ivory);
  font-family:var(--f-body);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{max-width:100%;}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  *{animation-duration:.001ms !important; transition-duration:.001ms !important;}
}

::selection{background:var(--ivory); color:var(--bg-0);}

h1,h2,h3{
  font-family:var(--f-display); font-weight:400; font-synthesis:none;
  text-wrap:balance; margin:0; line-height:1.1;
}
h2,h3,.story-title{
  font-family:var(--f-display); font-weight:400; font-synthesis:none;
  text-transform:uppercase; letter-spacing:.02em;
}
.quote{font-family:var(--f-sub); font-style:normal; color:var(--ivory-dim); text-transform:uppercase; letter-spacing:.06em;}
.script{font-family:var(--f-script); line-height:1.1; letter-spacing:.01em;}
.wordmark{font-family:"Italiana",Georgia,serif; letter-spacing:.28em;}
.label{
  font-family:var(--f-body); text-transform:uppercase; letter-spacing:.22em;
  font-size:.72rem; color:var(--ivory-dim);
}
p, .body-copy{
  font-family:var(--f-body); text-transform:uppercase; letter-spacing:.02em;
  line-height:1.9; color:var(--ivory-dim); font-size:.92rem;
  max-width:62ch;
}
a{color:inherit;}
button{font-family:inherit; cursor:pointer;}
:focus-visible{outline:2px solid var(--ivory-dim); outline-offset:3px;}

.wrap{max-width:1180px; margin:0 auto; padding-inline:clamp(20px,5vw,64px);}
section{padding:clamp(64px,10vw,120px) 0;}
.nowrap{white-space:nowrap;}
/* Einzeiler: bleiben immer auf einer Zeile, Schrift wird bei Platzmangel per JS verkleinert */
.fit{white-space:nowrap !important; max-width:100%;}
.fit.fit-wrap{white-space:normal !important;}
.script, .overlay-script{-webkit-text-stroke:.3px currentColor;}
@media(max-width:600px){ .price-sub{letter-spacing:.08em;} }
.story-heading .fit{max-width:100%;}
.price-cat > summary .fit{flex:1 1 auto; min-width:0;}

/* ---------- NAV ---------- */
header.site-nav{
  position:sticky; top:0; z-index:40;
  background:rgba(16,14,11,.82); backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
.nav-inner{
  max-width:1180px; margin:0 auto; padding:18px clamp(20px,5vw,64px);
  display:flex; align-items:center; justify-content:space-between; gap:24px;
}
.nav-links{display:flex; align-items:center; gap:clamp(14px,3vw,34px); list-style:none; margin:0; padding:0;}
.nav-links a, .nav-links button{
  background:none; border:0; color:var(--ivory-dim);
  font-size:.7rem; text-transform:uppercase; letter-spacing:.18em;
  text-decoration:none; padding:6px 0; position:relative;
}
.nav-links a:hover, .nav-links button:hover{color:var(--ivory);}
.nav-links .price-btn{
  color:var(--ivory); border:1px solid var(--line-strong); padding:9px 18px; border-radius:2px;
  transition:background .25s, border-color .25s;
}
.nav-links .price-btn:hover{background:var(--bg-2); border-color:var(--ivory-dim);}
.nav-wordmark{font-size:1rem; white-space:nowrap;}

@media(max-width:700px){
  .nav-inner{flex-wrap:wrap; row-gap:12px; padding-top:16px; padding-bottom:16px;}
  .nav-wordmark{font-size:.8rem; letter-spacing:.2em;}
  .nav-links{width:100%; justify-content:center; gap:10px 16px; row-gap:10px; flex-wrap:wrap;}
  .nav-links a, .nav-links button{font-size:.62rem; letter-spacing:.12em;}
  .nav-links .price-btn{padding:7px 14px;}
}

/* ---------- HERO ---------- */
.hero{
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; padding:clamp(16px,4vw,40px) 20px clamp(48px,8vw,72px); position:relative;
}
.hero-logo{
  width:clamp(220px,32vw,380px); height:auto; display:block; margin:0 auto 10px;
  mix-blend-mode:screen;
}
.hero .label{margin-bottom:22px;}
.hero .script{font-size:clamp(2.8rem,7vw,4.3rem); color:var(--ivory); margin-top:0;}
.hero .rating{
  margin-top:38px; display:flex; align-items:center; gap:10px;
  font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; color:var(--ivory-dim);
}
.hero .stars{color:var(--ivory); letter-spacing:.15em;}
.cta{
  display:inline-flex; align-items:center; gap:10px;
  border:1px solid var(--line-strong); padding:15px 34px; text-decoration:none;
  font-size:.72rem; text-transform:uppercase; letter-spacing:.22em; color:var(--ivory);
  transition:background .25s, border-color .25s;
}
.cta:hover{background:var(--bg-2); border-color:var(--ivory-dim);}
.hero .cta{margin-top:34px;}

/* quick pill nav to the 4 sections */
.pillnav{display:flex; flex-wrap:wrap; justify-content:center; gap:10px; margin-top:56px;}
.pillnav a{
  border:1px solid var(--line); padding:9px 20px; border-radius:999px; text-decoration:none;
  font-size:.68rem; text-transform:uppercase; letter-spacing:.16em; color:var(--ivory-dim);
  transition:border-color .25s, color .25s;
}
.pillnav a:hover{border-color:var(--ivory-dim); color:var(--ivory);}

/* ---------- STORY / SERVICE CARDS (photo as star) ---------- */
.story{padding-top:clamp(40px,8vw,80px); padding-bottom:clamp(40px,8vw,80px);}
.story-grid{display:grid; grid-template-columns:minmax(0,1fr); gap:28px;}
.story-card{
  position:relative; border:0; padding:0; margin:0; background:none; text-align:left;
  display:block; width:100%; border-radius:2px; overflow:hidden;
  aspect-ratio:16/10; min-height:340px; max-width:100%;
  isolation:isolate; color:var(--ivory);
}
.story-card img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  transform:scale(1.02); transition:transform 1.1s cubic-bezier(.22,.68,0,1), filter .6s;
  filter:saturate(.9) contrast(1.02);
}
/* PMU-Bild so verschoben, dass die Nadel sichtbar ist */
.story-card img.pos-pmu, .overlay-hero img.pos-pmu{object-position:50% 20%;}
.story-card:hover img, .story-card:focus-visible img{transform:scale(1.08);}
.story-card::after{
  content:"";
  position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(16,14,11,0) 35%, rgba(16,14,11,.86) 100%);
  z-index:1;
}
.story-card .story-meta{
  position:absolute; left:0; right:0; bottom:0; z-index:2;
  padding:clamp(20px,4vw,44px);
  display:flex; align-items:flex-end;
}
/* Titel (TAN Pearl) + Spruch in Schreibschrift daneben */
.story-heading{
  display:flex; flex-wrap:wrap; align-items:baseline; column-gap:clamp(14px,2vw,24px); row-gap:6px;
  min-width:0; flex:1 1 auto;
}
.story-title{font-size:clamp(1.7rem,3.8vw,3rem); line-height:1.08; color:var(--ivory);}
.story-quote{
  font-family:var(--f-script); font-size:clamp(2.4rem,4.6vw,3.8rem); line-height:1.05;
  color:#fff; -webkit-text-stroke:.35px #fff;
  text-shadow:0 1px 3px rgba(16,14,11,.95), 0 0 22px rgba(16,14,11,.85);
}
.story-card:focus-visible{outline:2px solid var(--ivory-dim); outline-offset:4px;}

@media(min-width:760px){
  .story-card{aspect-ratio:21/9; min-height:420px;}
}

/* ---------- generic section heading ---------- */
.section-head{display:flex; flex-direction:column; gap:12px; margin-bottom:44px; max-width:640px;}
.section-head .quote{font-size:clamp(1.2rem,2.4vw,1.6rem);}

/* ---------- ABOUT ---------- */
.about-head{margin-bottom:clamp(40px,6vw,64px); display:flex; flex-direction:column; gap:14px;}
.about-head h2{font-size:clamp(2.6rem,6vw,4.2rem); line-height:1;}
.about-head .subhead-fine{margin:clamp(48px,6vw,82px) 0 0;}
.about-head .script{font-size:clamp(2.8rem,6vw,4.3rem); color:var(--ivory);}
.about-grid{display:grid; grid-template-columns:minmax(0,1fr); gap:48px; align-items:start;}
@media(min-width:860px){ .about-grid{grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);} }
.about-photo{
  display:block; width:100%; object-fit:cover; border:1px solid var(--line-strong);
  filter:grayscale(1) sepia(.22) saturate(1.15) contrast(1.05) brightness(.95);
}
.about-photo-a{aspect-ratio:4/5; max-width:420px;}
/* edle, duenne Zwischenueberschrift in Versalien */
.subhead-fine{
  font-family:var(--f-sub); font-weight:400; font-synthesis:none;
  text-transform:uppercase; letter-spacing:.04em; line-height:1.35;
  font-size:clamp(1.15rem,2vw,1.45rem); color:var(--ivory);
  margin:0 0 26px; max-width:none; text-wrap:balance;
}
.about-text{min-width:0;}
.about-text p{margin:0 0 26px;}
.about-skills{margin-top:34px; padding-top:22px; border-top:1px solid var(--line);}
.about-skills .subhead-fine{margin-bottom:10px; font-size:clamp(1rem,1.6vw,1.2rem);}
.about-skills p{margin:0;}

.photo-slot{
  aspect-ratio:4/5; border:1px solid var(--line); background:var(--bg-1);
  display:flex; align-items:center; justify-content:center; text-align:center;
  color:var(--ivory-dim); font-size:.66rem; letter-spacing:.2em; text-transform:uppercase;
  position:relative; overflow:hidden; max-width:100%;
}
.photo-slot::before{
  content:""; position:absolute; inset:0;
  background:repeating-linear-gradient(135deg, transparent 0 18px, rgba(244,239,227,.03) 18px 19px);
}

/* ---------- EXCLUSIVE PARTNER BRANDS ---------- */
.brand-grid{display:grid; grid-template-columns:minmax(0,1fr); gap:24px;}
@media(min-width:600px){ .brand-grid{grid-template-columns:repeat(2,minmax(0,1fr));} }
.brand-card{border:1px solid var(--line); background:var(--bg-1); text-align:center; overflow:hidden; min-width:0;}
.brand-card p{margin-inline:auto;}
.brand-cover{aspect-ratio:1/1; overflow:hidden; position:relative; background:var(--bg-0);}
.brand-cover img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block;
  filter:saturate(.9) contrast(1.02);
  transition:transform 1.1s cubic-bezier(.22,.68,0,1);
}
.brand-card:hover .brand-cover img{transform:scale(1.04);}
.brand-text{padding:clamp(24px,3.5vw,36px) clamp(20px,3.5vw,36px) clamp(28px,4vw,40px);}
.brand-card h3{font-size:1.5rem; margin-bottom:10px;}

/* ---------- STANDORT ---------- */
.notice{
  background:var(--bg-1); border:1px solid var(--line-strong);
  padding:clamp(28px,5vw,44px) clamp(24px,5vw,48px);
  max-width:820px;
}
.notice .label{display:block; margin-bottom:14px;}
.notice p{
  margin:0; max-width:none; color:var(--ivory); font-size:clamp(.95rem,1.8vw,1.15rem);
  letter-spacing:.03em; line-height:1.7;
}
.book-row{
  margin-top:clamp(28px,4vw,40px);
  display:flex; flex-wrap:wrap; align-items:center; gap:16px 24px;
}
.book-row .book-line{
  white-space:nowrap;
  font-family:var(--f-sub); font-weight:400; font-synthesis:none;
  text-transform:uppercase; letter-spacing:.12em; color:var(--ivory);
  font-size:clamp(1rem,1.8vw,1.25rem);
  display:inline-flex; align-items:center; gap:14px;
}
.book-row .arrow{width:46px; height:10px; flex-shrink:0; color:var(--ivory-dim);}
@media(max-width:480px){
  .book-row .book-line{font-size:.95rem; letter-spacing:.05em; gap:10px;}
  .book-row .arrow{width:30px;}
}

/* ---------- PRICE CTA (inline entry point) ---------- */
.price-cta-box{
  border:1px solid var(--line); padding:clamp(32px,6vw,60px); text-align:center;
  display:flex; flex-direction:column; align-items:center; gap:20px;
}
.price-cta-title{font-size:clamp(1.8rem,3.8vw,2.6rem); line-height:1.4;}
.btn-outline{
  display:inline-block; text-decoration:none;
  border:1px solid var(--line-strong); padding:16px 40px; background:none; color:var(--ivory);
  font-size:.72rem; text-transform:uppercase; letter-spacing:.22em;
  transition:background .25s, border-color .25s;
}
.btn-outline:hover{background:var(--bg-2); border-color:var(--ivory-dim);}

/* ---------- PORTFOLIO ---------- */
/* 3 Spalten, quadratisch – Reihenfolge nach Isabelles Anordnung */
.portfolio-grid{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(3px,.6vw,8px); max-width:1080px; margin-inline:auto;}
.pf-item{
  position:relative; display:block; width:100%; aspect-ratio:1/1; overflow:hidden;
  border:0; padding:0; margin:0; background:var(--bg-1); cursor:zoom-in;
}
.pf-item img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block;
  filter:saturate(.92) contrast(1.02);
  transition:transform .9s cubic-bezier(.22,.68,0,1), filter .5s;
}
.pf-item::after{content:""; position:absolute; inset:0; background:rgba(16,14,11,0); transition:background .4s;}
.pf-item:hover img, .pf-item:focus-visible img{transform:scale(1.05); filter:saturate(1) contrast(1.04);}
.pf-item:hover::after{background:rgba(16,14,11,.12);}
.pf-item:focus-visible{outline:2px solid var(--ivory-dim); outline-offset:-2px;}

/* Lightbox */
.lightbox{overflow:hidden; display:flex; align-items:center; justify-content:center;}
.lb-stage{margin:0; padding:clamp(76px,9vh,96px) clamp(12px,8vw,120px); width:100%; height:100%; display:flex; align-items:center; justify-content:center;}
.lb-stage img{max-width:100%; max-height:100%; object-fit:contain; display:block; border:1px solid var(--line); box-shadow:0 30px 80px rgba(0,0,0,.5);}
.lb-nav{
  position:fixed; top:50%; transform:translateY(-50%); z-index:5;
  width:48px; height:48px; border-radius:50%; border:1px solid var(--line-strong);
  background:rgba(16,14,11,.55); backdrop-filter:blur(6px); color:var(--ivory);
  font-size:1rem; display:flex; align-items:center; justify-content:center; cursor:pointer;
  transition:background .25s, border-color .25s;
}
.lb-nav:hover{background:var(--bg-2); border-color:var(--ivory-dim);}
.lb-prev{left:clamp(12px,3vw,40px);}
.lb-next{right:clamp(12px,3vw,40px);}
.lb-count{
  position:fixed; bottom:26px; left:50%; transform:translateX(-50%);
  font-size:.68rem; letter-spacing:.22em; color:var(--ivory-dim); font-family:var(--f-body);
}
@media(max-width:699px){
  .lb-stage{padding:76px 12px 90px;}
  .lb-nav{top:auto; bottom:14px; transform:none;}
  .lb-count{bottom:30px;}
}

/* ---------- KONTAKT (links Text, rechts Formular) ---------- */
.kontakt-grid{display:grid; grid-template-columns:minmax(0,1fr); gap:clamp(48px,7vw,80px); align-items:start;}
@media(min-width:900px){ .kontakt-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr);} }
.kontakt-cta{display:flex; flex-direction:column; align-items:flex-start; text-align:left; margin:0 0 clamp(40px,6vw,56px);}
.kontakt-cta .label{margin-bottom:18px;}
.kontakt-cta h2{font-size:clamp(2rem,5.2vw,3.5rem); line-height:1.12;}
.kontakt-cta .script{font-size:clamp(2.4rem,5.2vw,3.5rem); color:var(--ivory); margin-top:12px;}
.kontakt-phone{
  display:inline-flex; flex-wrap:wrap; align-items:baseline; gap:6px 14px;
  margin-top:clamp(34px,5vw,46px);
  text-decoration:none; color:var(--ivory);
  font-family:var(--f-body); font-size:1.02rem; letter-spacing:.14em; line-height:1.3;
  transition:color .25s;
}
.kontakt-phone span{
  font-size:.72rem; letter-spacing:.22em; text-transform:uppercase; color:var(--ivory-dim);
}
.kontakt-phone:hover{color:var(--ivory-dim);}
.kontakt-cta .btn-outline{margin-top:clamp(26px,3.6vw,32px); font-size:.78rem; padding:18px 48px; letter-spacing:.24em;}
.contact-list{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:16px; max-width:520px;}
.contact-list a{text-decoration:none; border-bottom:1px solid var(--line); padding-bottom:14px; display:block;}
.contact-list a:hover{color:var(--ivory); border-color:var(--ivory-dim);}

.contact-form{
  background:var(--bg-1); border:1px solid var(--line-strong);
  padding:clamp(28px,4vw,48px); display:flex; flex-direction:column; gap:22px;
}
.form-title{font-size:clamp(1.4rem,2.4vw,1.9rem); margin:0 0 4px;}
.form-row{display:grid; grid-template-columns:minmax(0,1fr); gap:22px;}
@media(min-width:560px){ .form-row{grid-template-columns:repeat(2,minmax(0,1fr));} }
.field{display:flex; flex-direction:column; gap:8px; min-width:0;}
.field label, .consent span{
  font-family:var(--f-body); text-transform:uppercase; letter-spacing:.18em;
  font-size:.68rem; color:var(--ivory-dim);
}
.field input, .field select, .field textarea{
  width:100%; font:inherit; font-family:var(--f-body); font-size:.95rem; letter-spacing:.02em;
  color:var(--ivory); background:transparent;
  border:0; border-bottom:1px solid var(--line-strong); border-radius:0;
  padding:10px 2px; transition:border-color .25s;
}
.field textarea{resize:vertical; min-height:120px; border:1px solid var(--line-strong); padding:12px;}
.field select{appearance:none; -webkit-appearance:none; cursor:pointer;
  background-image:linear-gradient(45deg, transparent 50%, var(--ivory-dim) 50%), linear-gradient(135deg, var(--ivory-dim) 50%, transparent 50%);
  background-position:calc(100% - 12px) 50%, calc(100% - 7px) 50%; background-size:5px 5px; background-repeat:no-repeat; padding-right:28px;}
.field select option{background:var(--bg-1); color:var(--ivory);}
.field input::placeholder{color:rgba(202,191,169,.45);}
.field input:focus, .field select:focus, .field textarea:focus{outline:none; border-color:var(--ivory);}
.field input.is-invalid, .field textarea.is-invalid, .consent.is-invalid span{border-color:#d49a8a; color:#e7b3a6;}
.consent{display:flex; gap:12px; align-items:flex-start; cursor:pointer;}
.consent input{margin:2px 0 0; width:16px; height:16px; accent-color:var(--ivory); flex-shrink:0;}
.consent span{letter-spacing:.06em; line-height:1.7; text-transform:none; font-size:.8rem;}
.contact-form .btn-outline{align-self:flex-start; cursor:pointer;}
.form-status{margin:0; max-width:none; font-size:.8rem; line-height:1.7; color:var(--ivory); min-height:1.2em;}
.hp{position:absolute; left:-9999px; width:1px; height:1px; opacity:0;}

footer{padding:40px 0 60px; text-align:center;}
.footer-logo{width:clamp(90px,12vw,130px); height:auto; display:inline-block; mix-blend-mode:screen; opacity:.9;}

/* ==========================================================
   OVERLAY ("eigene Seite" beim Klick auf die Bilder)
   ========================================================== */
.overlay{
  position:fixed; inset:0; z-index:100;
  background:var(--bg-0);
  opacity:0; visibility:hidden; pointer-events:none;
  transform:translateY(14px);
  transition:opacity .45s ease, transform .45s ease, visibility 0s linear .45s;
  overflow-y:auto;
}
.overlay.is-open{
  opacity:1; visibility:visible; pointer-events:auto; transform:translateY(0);
  transition:opacity .45s ease, transform .45s ease;
}
.overlay-bg{
  position:fixed; inset:0;
  background:
    radial-gradient(ellipse 900px 500px at 50% -10%, rgba(255,224,180,.06), transparent 60%),
    var(--bg-0);
  z-index:-1;
}
.overlay-hero{position:relative; height:min(52vh,480px); overflow:hidden;}
.overlay-hero img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover;}
.overlay-hero::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(16,14,11,.15) 0%, var(--bg-0) 100%);
}
.overlay-close{
  position:fixed; top:22px; right:clamp(20px,5vw,64px); z-index:5;
  width:46px; height:46px; border-radius:50%; border:1px solid var(--line-strong);
  background:rgba(16,14,11,.55); backdrop-filter:blur(6px);
  color:var(--ivory); font-size:1.1rem; display:flex; align-items:center; justify-content:center;
  transition:background .25s, border-color .25s;
}
.overlay-close:hover{background:var(--bg-2); border-color:var(--ivory-dim);}
.overlay-body{max-width:760px; margin:0 auto; padding:48px clamp(20px,5vw,64px) 100px;}
.overlay-body > .label{margin-bottom:14px; display:block;}
.overlay-body h2{font-size:clamp(2.4rem,6vw,3.6rem); line-height:1.02; margin-bottom:18px;}
.overlay-body .overlay-script{
  display:block; font-family:var(--f-script); line-height:1.1;
  font-size:clamp(2.6rem,6vw,3.9rem); color:var(--ivory);
  margin-bottom:clamp(40px,6vw,56px);
}
.overlay-body p{margin:0 0 26px; max-width:none;}
/* Zwischenueberschrift in der Schrift des kleinen Labels, Versalien */
.overlay-body .subhead{
  font-family:var(--f-body); font-weight:400; text-transform:uppercase;
  letter-spacing:.22em; line-height:1.7; color:var(--ivory);
  font-size:clamp(.9rem,1.5vw,1rem);
  margin:0 0 22px; max-width:none;
}
.overlay-body .subhead + .subhead{margin-top:-4px;}
.overlay-body p + .subhead{margin-top:44px;}
.overlay-body .consult{margin-top:4px;}
/* Cosmetic Menu: zwei Spalten wie in der Vorlage */
.cols{display:grid; grid-template-columns:minmax(0,1fr); gap:0 44px;}
@media(min-width:700px){ .cols{grid-template-columns:repeat(2,minmax(0,1fr));} }
.cols .subhead{margin-bottom:12px;}
.cols p + .subhead{margin-top:36px;}
.cols > div > .subhead:first-child{margin-top:0;}
@media(max-width:699px){ .cols > div + div{margin-top:36px;} }
.overlay-back{
  display:inline-flex; align-items:center; gap:8px; margin-top:20px;
  font-size:.68rem; letter-spacing:.18em; text-transform:uppercase; color:var(--ivory-dim);
  background:none; border:0; padding:0;
}
.overlay-back:hover{color:var(--ivory);}

/* ==========================================================
   PREISLISTE – Kategorien zum Aufklappen
   ========================================================== */
.price-cats{display:flex; flex-direction:column; border-top:1px solid var(--line-strong); margin-top:12px;}
.price-cat{border-bottom:1px solid var(--line-strong);}
.price-cat > summary{
  list-style:none; cursor:pointer;
  display:flex; align-items:center; justify-content:space-between; gap:20px;
  padding:22px 0;
  font-family:var(--f-display); text-transform:uppercase; letter-spacing:.02em;
  font-size:clamp(1.1rem,2.2vw,1.4rem); color:var(--ivory); line-height:1.3;
}
.price-cat > summary::-webkit-details-marker{display:none;}
.price-cat > summary:hover{color:#fff;}
.price-cat > summary .toggle{
  position:relative; width:18px; height:18px; flex-shrink:0;
}
.price-cat > summary .toggle::before,
.price-cat > summary .toggle::after{
  content:""; position:absolute; left:0; right:0; top:50%; height:1px; background:var(--ivory-dim);
  transition:transform .3s ease;
}
.price-cat > summary .toggle::after{transform:rotate(90deg);}
.price-cat[open] > summary .toggle::after{transform:rotate(0deg);}
.price-cat-body{padding:0 0 30px;}
.price-sub{
  font-family:var(--f-body); text-transform:uppercase; letter-spacing:.16em;
  font-size:.74rem; color:var(--ivory); font-weight:500; line-height:1.6;
  margin:26px 0 4px;
}
.price-sub:first-child{margin-top:4px;}
.price-row{
  display:flex; justify-content:space-between; align-items:baseline; gap:20px; padding:12px 0;
  border-bottom:1px solid var(--line);
}
.price-row .name{color:var(--ivory-dim); font-family:var(--f-body); text-transform:uppercase; letter-spacing:.04em; font-size:.8rem; line-height:1.5;}
.price-row .amount{
  color:var(--ivory); font-family:var(--f-body); letter-spacing:.06em; font-size:.84rem;
  white-space:nowrap; font-variant-numeric:tabular-nums; text-transform:uppercase;
}
.price-row .amount .sep{color:var(--ivory-dim); margin:0 .35em;}
.price-note{
  font-family:var(--f-body); text-transform:uppercase; letter-spacing:.04em;
  font-size:.74rem; line-height:1.8; color:var(--ivory-dim); margin:16px 0 0; max-width:none;
}
/* Special Services */
.special{padding:22px 0; border-bottom:1px solid var(--line);}
.special:first-child{padding-top:6px;}
.special-head{display:flex; justify-content:space-between; align-items:baseline; gap:20px; flex-wrap:wrap;}
.special-head h4{
  margin:0; font-family:var(--f-body); text-transform:uppercase; letter-spacing:.16em;
  font-size:.8rem; font-weight:500; color:var(--ivory);
}
.special-head .amount{color:var(--ivory); font-size:.84rem; letter-spacing:.06em; white-space:nowrap; font-variant-numeric:tabular-nums;}
.special-head .amount .sep{color:var(--ivory-dim); margin:0 .35em;}
.special p{margin:10px 0 0; font-size:.8rem; line-height:1.8; max-width:none;}
.special p.incl{color:var(--ivory); opacity:.8; font-size:.74rem; letter-spacing:.05em;}
.price-footnote{margin-top:40px; max-width:none;}
.price-footnote p{margin:0; font-size:.7rem; letter-spacing:.06em; line-height:1.9; max-width:none;}
.price-footnote strong{color:var(--ivory); font-weight:500; letter-spacing:.14em;}
.overlay-body .price-intro{display:block; font-size:clamp(1.15rem,2.4vw,1.5rem); margin-bottom:34px;}
.price-sub + .special{padding-top:10px;}
.special + .price-note{margin-bottom:6px;}