@font-face{font-family:"Cormorant Garamond";src:url(fonts/cormorant-garamond-var.woff2) format("woff2");font-weight:300 700;font-style:normal;font-display:swap}
@font-face{font-family:"Manrope";src:url(fonts/manrope-var.woff2) format("woff2");font-weight:200 800;font-style:normal;font-display:swap}

:root{
  --bg:#101314; --text:#F5F0E7; --muted:#C9C4BC; --gold:#CC9D49; --btn-text:#1D1D1B; --line:#706044;
  --lam-shadow:#080B0C; --lam-face:#141819; --lam-edge:#202425;
  --pad:clamp(24px,5vw,72px);
  --serif:"Cormorant Garamond",Georgia,"Times New Roman",serif;
  --sans:"Manrope",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--bg);color:var(--text);font:400 17px/1.6 var(--sans)}
img{display:block;max-width:100%;height:auto}
h1,h2,h3,p,address,ul{margin:0}
ul{padding:0;list-style:none}
address{font-style:normal}
a{color:inherit}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.defs{position:absolute}
.skip{position:absolute;left:var(--pad);top:-100px;background:var(--gold);color:var(--btn-text);padding:12px 16px;z-index:10;font-weight:700}
.skip:focus{top:8px}
:focus-visible{outline:3px solid var(--gold);outline-offset:3px}
.btn:focus-visible{outline-color:var(--text)}

.gold{color:var(--gold)}
.eyebrow{font-size:12px;line-height:1.4;letter-spacing:.16em;text-transform:uppercase;color:var(--gold)}
.meta{font-size:14px;line-height:1.4;color:var(--muted)}
.rule{width:64px;height:1px;margin:0;border:0;background:var(--gold)}
.tel{white-space:nowrap;text-decoration:none}
.gold-link{color:var(--gold)}
h1,h2,h3{font-family:var(--serif);font-weight:400}
h2{font-size:clamp(34px,10vw,43px);line-height:1.1}

.btn{display:inline-flex;align-items:center;justify-content:center;min-height:52px;padding:0 24px;background:var(--gold);color:var(--btn-text);
  font-weight:700;font-size:16px;text-decoration:none;white-space:nowrap}
.btn [aria-hidden]{margin-left:.35em}
.btn:hover{background:#d9ac5a}
.btn--small{min-height:44px;padding:0 16px;font-size:14px}
.btn--outline{background:transparent;color:var(--gold);box-shadow:inset 0 0 0 2px var(--gold)}
.btn--outline:hover{background:rgba(204,157,73,.14)}
.btn--outline:focus-visible{outline-color:var(--gold)}

/* Header */
.head{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 24px;padding:20px var(--pad);min-height:90px}
.head__logo{display:block;width:216px;max-width:100%}
.head__nav{display:none}
.head{flex-wrap:nowrap}
.head__logo{flex:0 1 216px;min-width:0}
.head__aktionen{display:flex;align-items:center;gap:8px;flex:none}
.head__tel{display:inline-flex;align-items:center;justify-content:center;min-width:44px;min-height:44px;color:var(--gold);text-decoration:none;font-weight:700;font-size:15px;white-space:nowrap}
.head__tel-icon{width:24px;height:24px;fill:none;stroke:var(--gold);stroke-width:1.6;stroke-linejoin:round}
.head__tel-nr{display:none}
.head__tel:hover .head__tel-nr{text-decoration:underline}
.btn--small .lg{display:none}

/* Hero */
.hero{background:var(--bg) repeating-linear-gradient(90deg,var(--lam-shadow) 0 7px,var(--lam-edge) 7px 8px,var(--lam-face) 8px 20px)}
.hero__text{padding:36px var(--pad) 28px}
.hero h1{margin-top:14px;letter-spacing:0}
.hero h1 span{display:block}
.h1-ort{font-size:clamp(24px,7.18vw,31px);line-height:1.15;color:var(--text);margin-bottom:12px}
.h1-zeile{font-size:clamp(48px,calc(17.143vw - 6.857px),66px);line-height:1.083}
.hero .rule{margin:20px 0 22px}
.lead{max-width:30em;color:var(--text);line-height:1.6}
.hero__cta{display:flex;flex-wrap:wrap;align-items:center;gap:16px 20px;margin-top:30px}
.hero .meta{margin-top:18px}
.hero__photo{position:relative;margin-top:12px}
.hero__photo img{width:100%;aspect-ratio:430/355;object-fit:cover;clip-path:url(#clip-m)}
.arc{position:absolute;pointer-events:none;fill:none;stroke:var(--gold);stroke-width:2;overflow:visible}
.arc--mobile{left:0;top:0;width:100%;height:calc(100% * 130 / 355)}
.arc:not(.arc--mobile){display:none}

/* Leistungen */
.leistungen{padding:64px var(--pad) 60px}
.leistungen h2{margin-top:12px}
.cards{display:grid;gap:36px;margin-top:40px}
.cards li{display:flex;gap:20px;align-items:flex-start}
.cards h3{font-size:33px;line-height:1.1;margin-top:4px}
.cards p{margin-top:8px;color:var(--muted);font-size:16px;line-height:1.55;max-width:13em}
.icon{flex:none;width:46px;height:46px;fill:none;stroke:var(--gold);stroke-width:1.5}

/* Salon */
.salon__photo{width:100%;aspect-ratio:3/2;object-fit:cover}
.salon__text{padding:40px var(--pad) 56px}
.salon h2 br{display:none}
.salon h2{margin-top:14px;font-size:clamp(34px,9.3vw,40px)}
.salon .rule{margin:20px 0 26px;width:60px}
.salon__text>p:not(.eyebrow):not(.name){max-width:24em;color:var(--muted);color:#E3DED5}
.name{margin-top:24px;font-family:var(--serif);font-size:36px;line-height:1.1;color:var(--gold)}
.name+.eyebrow{margin-top:8px}

/* Kontakt */
.kontakt{padding:20px var(--pad) 56px;display:grid;gap:40px}
.kontakt h2{margin-top:14px}
.kontakt address{margin-top:18px;color:var(--text)}
.kontakt .gold-link{display:inline-block;margin-top:22px}
.kontakt__direkt{margin-top:22px;line-height:1.3}
.kontakt__direkt a{text-decoration:none}
.kontakt__nr{display:block;font-family:var(--serif);font-size:clamp(34px,10vw,43px);line-height:1.1;color:var(--gold)}
.kontakt__direkt .meta{display:block;margin-top:6px}
.kontakt__direkt a:hover,.kontakt .tel:hover{text-decoration:underline}
.zeiten{margin:10px 0 20px;font-size:21px;line-height:1.4}
.kontakt .meta{margin-top:18px}
.kontakt__photo{display:none}

/* Footer */
.foot{padding:0 var(--pad) 64px}
.foot__inner{border-top:1px solid var(--gold);padding-top:36px;display:grid;gap:44px}
.foot__logo{width:260px;max-width:100%}
.foot .meta{margin-top:20px}
.foot nav{display:flex;flex-wrap:wrap;gap:4px 56px}
.foot nav a{display:inline-block;padding:10px 0;font-size:16px;text-decoration:none}
.foot nav a:hover{text-decoration:underline}

/* Platzhalterseiten */
.platzhalter{padding:72px var(--pad) 120px}
.platzhalter h1{margin-top:14px;font-size:clamp(46px,12vw,66px);line-height:1.1}
.platzhalter .rule{margin:24px 0}
.platzhalter .gold-link{display:inline-block;margin-top:28px}

/* Kleine Breiten: Telefon bleibt einzeilig, Knöpfe dürfen umbrechen, nie die Nummer */
@media (max-width:599px){
  .hero__cta{flex-direction:column;align-items:stretch}
  .hero__cta .btn{width:100%}
}
@media (max-width:389px){
  .btn{padding:0 18px}
  .btn--small{padding:0 12px}
}
@media (min-width:600px){
  .head__tel-nr{display:inline}
  .head__tel{padding:0 8px;gap:8px}
  .btn--small .lg{display:inline}
}

@media (min-width:900px){
  body{font-size:18px}
  h2{font-size:clamp(40px,4vw,58px)}
  .head{min-height:112px;padding-top:0;padding-bottom:0;flex-wrap:nowrap}
  .head__logo{width:clamp(250px,23.6vw,340px)}
  .head__nav{display:flex;gap:32px;margin-left:auto;margin-right:clamp(24px,6vw,96px);font-size:16px}
  .head__nav a{text-decoration:none;padding:12px 0}
  .head__nav a:hover{text-decoration:underline;text-underline-offset:6px}
  .btn{min-height:54px;padding:0 28px}
  .btn--small{min-height:54px;padding:0 28px;font-size:16px}

  .hero{display:grid;grid-template-columns:minmax(0,43fr) minmax(0,57fr);min-height:clamp(560px,48.6vw,700px)}
  .hero__text{padding:clamp(48px,5.6vw,78px) 0 60px var(--pad);align-self:center}
  .eyebrow{font-size:13px}
  .hero h1{margin-top:clamp(20px,3vw,36px)}
  .h1-ort{font-size:clamp(20px,2.78vw,40px);line-height:1.1}
  .h1-zeile{font-size:clamp(44px,6.39vw,92px);line-height:1.065}
  .hero .rule{width:78px;margin:clamp(24px,2.4vw,34px) 0}
  .lead{font-size:clamp(18px,1.46vw,21px);line-height:1.52}
  .hero__cta{margin-top:clamp(36px,4vw,56px);flex-wrap:wrap}
  .hero__photo{margin:0;min-height:100%;}
  .hero__photo img{height:100%;aspect-ratio:auto;clip-path:url(#clip-d)}
  .arc--mobile{display:none}
  .arc:not(.arc--mobile){display:block;inset:0;width:100%;height:100%}

  .leistungen{padding:clamp(72px,8vw,112px) var(--pad) clamp(80px,9vw,128px)}
  .cards{grid-template-columns:repeat(4,minmax(0,1fr));gap:0;margin-top:clamp(40px,4vw,56px)}
  .cards li{flex-direction:column;gap:20px;padding:0 24px 0 32px;border-left:1px solid var(--line)}
  .cards li:first-child{padding-left:0;border-left:0}
  .cards h3{font-size:39px;margin-top:0}
  .cards p{margin-top:12px;font-size:17px}

  .salon{display:grid;grid-template-columns:52.5fr 47.5fr;align-items:center}
  .salon__photo{height:100%;min-height:360px}
  .salon__text{padding:48px var(--pad) 48px clamp(40px,5.3vw,76px)}
  .salon h2{font-size:clamp(44px,4vw,57px);line-height:1.05;}
  .salon h2 br{display:inline}
  .salon .rule{width:80px;margin:26px 0 30px}
  .salon__text>p:not(.eyebrow):not(.name){font-size:18px;line-height:1.67}
  .name{font-size:39px}

  .kontakt{grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);padding:clamp(72px,7vw,104px) 0 clamp(72px,7vw,104px) var(--pad);align-items:start;gap:40px 40px}
  .kontakt__zeiten{padding-right:var(--pad)}
  .kontakt h2{font-size:clamp(38px,3.4vw,49px)}
  .zeiten{font-size:24px;margin:34px 0 28px}

  .foot{padding-bottom:72px}
  .foot__inner{grid-template-columns:1fr auto;align-items:end;padding-top:44px}
  .foot__logo{width:min(310px,100%)}
  .foot nav{gap:0 48px}
}
@media (min-width:1100px){
  .kontakt{grid-template-columns:minmax(0,488fr) minmax(0,370fr) minmax(0,510fr);gap:0 40px;padding-right:0}
  .kontakt__zeiten{padding-right:0}
  .kontakt__photo{display:block;width:100%;aspect-ratio:510/360;object-fit:cover;margin-top:0}
}

/* Rechtstexte */
.recht{padding:72px var(--pad) 72px;max-width:calc(46em + 2 * var(--pad))}
.recht h1{margin-top:14px;font-size:clamp(34px,9vw,66px);line-height:1.1}
.recht h1,.recht h2,.recht h3,.recht h4{overflow-wrap:anywhere;hyphens:auto}
.recht .rule{margin:24px 0 8px}
.recht h2{margin:56px 0 12px;font-size:clamp(24px,6vw,38px);line-height:1.2}
.recht h3{margin:36px 0 10px;font-size:clamp(22px,4.5vw,26px);line-height:1.25}
.recht h4{margin:28px 0 8px;font-size:18px;line-height:1.3;letter-spacing:.02em}
.recht p,.recht li{max-width:42em;line-height:1.7;color:#E3DED5;overflow-wrap:anywhere}
.recht p{margin:0 0 16px}
.recht ul{margin:0 0 16px;padding-left:1.2em}
.recht li{margin-bottom:12px}
.recht a{color:var(--gold);text-underline-offset:3px}
.foot--recht{padding-top:0}
.foot--recht nav{border-top:1px solid var(--gold);padding-top:24px}

/* Leistungsseite */
.head__nav a[aria-current]{color:var(--gold)}
.leistungen__alle{margin-top:40px}
.seitenkopf{padding:48px var(--pad) 24px}
.seitenkopf h1{margin-top:14px;font-size:clamp(46px,12vw,66px);line-height:1.1}
.seitenkopf .rule{margin:24px 0}
.seitenkopf__unter{font-family:var(--serif);font-size:clamp(26px,6vw,34px);line-height:1.2;color:var(--gold)}
.seitenkopf__text{margin-top:20px;max-width:34em;color:#E3DED5}
.gruppe{padding:48px var(--pad);border-top:1px solid var(--line)}
.gruppe__kopf{display:flex;align-items:center;gap:20px}
.gruppe h2{font-size:clamp(38px,10vw,48px)}
.gruppe__intro{margin-top:24px;max-width:34em;color:#E3DED5}
.seitenkopf__text+.seitenkopf__text,.gruppe__intro+.gruppe__intro{margin-top:16px}
.lst{margin-top:28px;max-width:40em}
.lst li{display:grid;gap:4px 24px;padding:18px 0;border-top:1px solid var(--line)}
.lst li:last-child{border-bottom:1px solid var(--line)}
.lst__name{font-family:var(--serif);font-size:28px;line-height:1.15;color:var(--text)}
.lst__text{color:var(--muted);font-size:16px;line-height:1.55}
.termin{padding:56px var(--pad) 72px;border-top:1px solid var(--line)}
.termin h2{margin-bottom:16px}
.termin p{max-width:34em;color:#E3DED5}
@media (min-width:900px){
  .seitenkopf{padding-top:72px;padding-bottom:40px}
  .gruppe{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,8fr);gap:0 clamp(40px,6vw,96px);padding-top:72px;padding-bottom:72px;align-items:start}
  .gruppe__intro{margin-top:0}
  .gruppe__intro+.gruppe__intro{margin-top:16px}
  .gruppe__inhalt .lst{margin-top:32px}
  .lst li{grid-template-columns:minmax(0,15em) minmax(0,1fr);align-items:baseline}
  .lst{max-width:none}
  .lst__name{font-size:30px}
  .lst__text{font-size:17px}
  .termin{padding-top:80px;padding-bottom:96px}
}