/* ═══════════════════════════════════════════════════════════
   BABYLON Friseursalon — Luxus-Design (hell)
   Palette: Warmes Beige / Creme / Messing-Gold / Espresso — passend zum Logo
   Typo: Cinzel (gravierte Labels) · Cormorant Garamond (Display) · Jost (Body)
   ═══════════════════════════════════════════════════════════ */

:root{
  --bg:       #e9dcc4;            /* warmes Sand-Beige — Grundfläche */
  --bg-soft:  #dfd0b2;            /* tieferes Beige — Alt-Sektionen */
  --surface:  #f6efe1;            /* Creme — Karten */
  --dark:     #0e0b08;            /* Nachtschwarz — Hero/Nav/Footer */
  --dark-2:   #171208;
  --text:     #241c13;            /* Espresso — Fließtext */
  --heading:  #171109;
  --muted:    #5a4c39;
  --gold:     #96703a;            /* Messing dunkel — auf Beige lesbar */
  --gold-deep:#74582e;
  --gold-hi:  #c9a962;            /* Messing hell — auf Dunkel */
  --champ:    #f0e6cf;
  --ivory:    #f4efe6;
  --line:     rgba(150,112,58,.4);
  --line-soft:rgba(150,112,58,.22);
  --line-dark:rgba(201,169,98,.22);
  --line-dark-soft:rgba(201,169,98,.12);
  --shadow:   0 24px 70px rgba(60,42,18,.18);
  --shadow-dark:0 30px 80px rgba(0,0,0,.55);
  --label:'Cinzel', serif;
  --serif:'Cormorant Garamond', serif;
  --sans: 'Jost', sans-serif;
  --ease: cubic-bezier(.22,.61,.2,1);
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  background:var(--bg);
  color:var(--text);
  font-family:var(--sans);
  font-weight:400;
  font-size:16.5px;
  line-height:1.7;
  letter-spacing:.01em;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
/* feines Papierkorn auf dem Beige */
body::before{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:1;opacity:.4;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.05'/%3E%3C/svg%3E");
}
::selection{background:var(--gold);color:#fff}
img,svg,iframe{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:none;cursor:pointer}

.wrap{width:min(1240px,92vw);margin-inline:auto;position:relative;z-index:2}
@media(min-width:2200px){ .wrap{width:min(1560px,80vw)} body{font-size:19px} }

:focus-visible{outline:1.5px solid var(--gold);outline-offset:3px;border-radius:2px}

/* ── Reveal-Animationen ─────────────────────────── */
.reveal{opacity:0;transform:translateY(28px);transition:opacity 1s var(--ease),transform 1s var(--ease);transition-delay:var(--d,0s)}
.reveal.in{opacity:1;transform:none}
.reveal-load{opacity:0;transform:translateY(24px);animation:rise 1.1s var(--ease) forwards;animation-delay:var(--d,0s)}
@keyframes rise{to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){
  .reveal,.reveal-load{opacity:1;transform:none;animation:none;transition:none}
  html{scroll-behavior:auto}
  *{animation-duration:.001s !important;transition-duration:.001s !important}
}

/* ── Buttons ────────────────────────────────────── */
.btn{
  display:inline-block;position:relative;overflow:hidden;
  font-family:var(--label);font-weight:500;font-size:.78rem;
  letter-spacing:.3em;text-transform:uppercase;text-indent:.3em;
  padding:1.15em 2.6em;border:1px solid var(--gold);
  transition:color .5s var(--ease),background .5s var(--ease),border-color .5s var(--ease);
}
.btn-gold{background:linear-gradient(160deg,#d3b571,#a07c42);color:#fff;border-color:transparent}
.btn-gold:hover{background:linear-gradient(160deg,#e0c684,#b28d4e)}
.btn-ghost{color:var(--gold-deep);background:transparent;border-color:var(--gold)}
.btn-ghost:hover{background:rgba(160,124,66,.10)}
/* Ghost-Button auf dunklem Grund (Hero) */
.hero .btn-ghost{color:var(--champ);border-color:var(--gold-hi)}
.hero .btn-ghost:hover{background:rgba(201,169,98,.14)}
.btn::after{ /* Gold-Shine */
  content:"";position:absolute;top:0;left:-80%;width:50%;height:100%;
  background:linear-gradient(105deg,transparent,rgba(255,255,255,.4),transparent);
  transform:skewX(-20deg);transition:left .8s var(--ease);
}
.btn:hover::after{left:130%}
.btn-block{display:block;width:100%;text-align:center}
.btn:disabled{opacity:.5;cursor:not-allowed}

/* ── Navigation (dunkel, Glas) ──────────────────── */
.nav{
  position:fixed;inset:0 0 auto 0;z-index:100;
  transition:background .6s var(--ease),border-color .6s var(--ease),backdrop-filter .6s;
  border-bottom:1px solid transparent;
}
.nav.scrolled{
  background:rgba(247,241,230,.82);
  -webkit-backdrop-filter:blur(18px) saturate(1.2);
  backdrop-filter:blur(18px) saturate(1.2);
  border-bottom-color:var(--line-soft);
}
.nav-inner{width:min(1400px,94vw);margin-inline:auto;display:flex;align-items:center;justify-content:space-between;padding:1rem 0}
.nav.scrolled .nav-inner{padding:.6rem 0}
.nav-logo{display:flex;align-items:center;gap:.75rem}
.nav-logo img{width:46px;height:auto;transition:filter .6s var(--ease)}
/* über dem dunklen Hero: goldener Schimmer, damit sich das schwarze Logo abhebt */
.nav:not(.scrolled) .nav-logo img{filter:drop-shadow(0 2px 12px rgba(201,169,98,.45))}
.nav.scrolled .nav-logo img{filter:drop-shadow(0 2px 8px rgba(60,42,18,.25))}
.nav-menu{display:flex;align-items:center;gap:1.9rem}

/* ── Navigation hell auf dem dunklen Hero … ────── */
.nav-wordmark{font-family:var(--label);font-weight:500;font-size:1.15rem;letter-spacing:.3em;color:var(--champ);transition:color .5s var(--ease)}
.nav-menu a{
  font-family:var(--label);font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;color:var(--ivory);
  position:relative;padding:.3em 0;opacity:.9;transition:opacity .4s,color .5s var(--ease);
}
.nav-menu a::after{content:"";position:absolute;left:0;bottom:0;width:0;height:1px;background:var(--gold-hi);transition:width .5s var(--ease)}
.nav-menu a:hover{opacity:1}
.nav-menu a:hover::after{width:100%}
.nav-cta{border:1px solid var(--gold-hi);padding:.55em 1.3em !important;color:var(--gold-hi) !important;transition:background .4s,color .4s,border-color .4s}
.nav-cta::after{display:none}
.nav-cta:hover{background:var(--gold-hi);color:var(--dark) !important}
.nav-burger{display:none;flex-direction:column;gap:7px;padding:6px;z-index:110}
.nav-burger span{width:26px;height:1.5px;background:var(--gold-hi);transition:transform .45s var(--ease),background .5s}

/* … und dunkel, sobald sie über hellem Inhalt liegt */
.nav.scrolled .nav-wordmark{color:var(--heading)}
.nav.scrolled .nav-menu a{color:var(--text)}
.nav.scrolled .nav-menu a::after{background:var(--gold-deep)}
.nav.scrolled .nav-cta{border-color:var(--gold);color:var(--gold-deep) !important}
.nav.scrolled .nav-cta:hover{background:var(--gold);color:#fff !important}
.nav.scrolled .nav-burger span{background:var(--gold-deep)}
.nav-burger[aria-expanded="true"] span:first-child{transform:translateY(4.2px) rotate(45deg)}
.nav-burger[aria-expanded="true"] span:last-child{transform:translateY(-4.2px) rotate(-45deg)}

@media(max-width:960px){
  .nav-burger{display:flex}
  .nav-menu{
    position:fixed;inset:0;flex-direction:column;justify-content:center;gap:2.2rem;
    background:rgba(247,241,230,.97);-webkit-backdrop-filter:blur(24px);backdrop-filter:blur(24px);
    opacity:0;pointer-events:none;transition:opacity .5s var(--ease);
  }
  .nav-menu.open{opacity:1;pointer-events:auto}
  .nav-menu a{font-size:.95rem}
  /* helles Vollbild-Overlay → dunkle Schrift, egal ob gescrollt */
  .nav-menu.open a{color:var(--text)}
  .nav-menu.open a::after{background:var(--gold-deep)}
  .nav-menu.open .nav-cta{border-color:var(--gold);color:var(--gold-deep) !important}
  .nav-menu.open .nav-cta:hover{background:var(--gold);color:#fff !important}
}

/* ── Hero (dunkel — Bühne für das Logo) ─────────── */
.hero{position:relative;min-height:100svh;display:grid;place-items:center;overflow:hidden;
  background:
    radial-gradient(ellipse 90% 60% at 50% 115%, rgba(201,169,98,.20), transparent 60%),
    radial-gradient(ellipse 60% 45% at 50% -10%, rgba(201,169,98,.08), transparent 65%),
    linear-gradient(180deg,#0e0b08,#161007 70%,#1a1309);
}
.hero-bg{position:absolute;inset:0;pointer-events:none}
.hero-arches{position:absolute;inset:auto 0 0 0;width:100%;height:100%;will-change:transform}
.arch{stroke-width:1;stroke-dasharray:3200;stroke-dashoffset:3200;animation:draw 3.4s var(--ease) forwards}
.a2{animation-delay:.25s}.a3{animation-delay:.5s}.a4{animation-delay:.75s}
@keyframes draw{to{stroke-dashoffset:0}}
.hero-glow{
  position:absolute;width:560px;height:560px;border-radius:50%;
  background:radial-gradient(circle,rgba(201,169,98,.12),transparent 65%);
  transform:translate(-50%,-50%);left:50%;top:55%;transition:left 1.4s var(--ease),top 1.4s var(--ease);
}
.hero-grain{position:absolute;inset:0;opacity:.5;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.06'/%3E%3C/svg%3E");
}
.hero-content{position:relative;text-align:center;padding:7.5rem 6vw 5rem}
.hero-logo img{
  width:clamp(240px,32vw,380px);height:auto;margin-inline:auto;
  filter:drop-shadow(0 24px 70px rgba(201,169,98,.28));
}
.hero-sub{margin-top:1.4rem;font-family:var(--serif);font-style:italic;font-size:clamp(1.05rem,2.2vw,1.4rem);color:#b3a68c;letter-spacing:.06em}
.hero-actions{margin-top:2.8rem;display:flex;gap:1.2rem;justify-content:center;flex-wrap:wrap}
.hero-rule{display:flex;align-items:center;justify-content:center;gap:1rem;margin-top:2.2rem}
.hero-rule i{display:block;width:min(160px,22vw);height:1px;background:linear-gradient(90deg,transparent,var(--gold-hi));}
.hero-rule i:last-child{background:linear-gradient(270deg,transparent,var(--gold-hi))}
.hero-rule svg{width:14px;height:14px;fill:var(--gold-hi)}
.hero-scroll{position:absolute;bottom:2.4rem;left:50%;transform:translateX(-50%);width:1px;height:64px;overflow:hidden}
.hero-scroll span{position:absolute;inset:0;background:linear-gradient(180deg,transparent,var(--gold-hi));animation:drop 2.2s var(--ease) infinite}
@keyframes drop{0%{transform:translateY(-100%)}60%,100%{transform:translateY(100%)}}

/* ── Intro ──────────────────────────────────────── */
.intro{padding:clamp(5rem,10vw,8rem) 0 clamp(1.5rem,3vw,2.5rem);text-align:center}
.intro-line{font-family:var(--serif);font-size:clamp(1.35rem,2.8vw,2rem);line-height:1.85;color:var(--muted);font-weight:400}
.intro-line em{color:var(--gold-deep);font-style:italic}
@media(max-width:720px){.bp-desk{display:none}}

/* ── Sections ───────────────────────────────────── */
.section{padding:clamp(4.5rem,9vw,7.5rem) 0;position:relative}
.section-alt{background:linear-gradient(180deg,transparent,var(--bg-soft) 14%,var(--bg-soft) 86%,transparent)}
.sec-head{text-align:center;margin-bottom:clamp(2.8rem,6vw,4.2rem)}
.sec-eyebrow{font-family:var(--label);font-weight:600;font-size:.74rem;letter-spacing:.45em;text-indent:.45em;text-transform:uppercase;color:var(--gold-deep);margin-bottom:1rem}
.sec-title{font-family:var(--serif);font-weight:600;font-size:clamp(2.3rem,5vw,3.6rem);letter-spacing:.08em;text-indent:.08em;color:var(--heading)}
.sec-rule{display:flex;align-items:center;justify-content:center;gap:.9rem;margin-top:1.2rem}
.sec-rule i{width:70px;height:1px;background:linear-gradient(90deg,transparent,var(--gold))}
.sec-rule i:last-child{background:linear-gradient(270deg,transparent,var(--gold))}
.sec-rule svg{width:11px;height:11px;fill:var(--gold)}
.sec-sub{margin-top:1.1rem;font-family:var(--serif);font-style:italic;font-size:1.1rem;color:var(--muted)}
/* Kopf auf dunklem Grund (Buchung) */
.sec-head-dark .sec-title{color:var(--champ)}
.sec-head-dark .sec-eyebrow{color:var(--gold-hi)}
.sec-head-dark .sec-sub{color:#b3a68c}
.sec-head-dark .sec-rule i{background:linear-gradient(90deg,transparent,var(--gold-hi))}
.sec-head-dark .sec-rule i:last-child{background:linear-gradient(270deg,transparent,var(--gold-hi))}
.sec-head-dark .sec-rule svg{fill:var(--gold-hi)}

/* ── Leistungen (Bildkarten) ────────────────────── */
.svc-group{
  display:flex;align-items:center;gap:1.4rem;
  font-family:var(--label);font-weight:600;font-size:1.05rem;letter-spacing:.4em;text-indent:.4em;
  text-transform:uppercase;color:var(--gold-deep);
  margin:clamp(2.2rem,5vw,3.4rem) 0 1.4rem;
}
.svc-group::before,.svc-group::after{content:"";flex:1;height:1px;background:linear-gradient(90deg,transparent,var(--line))}
.svc-group::after{background:linear-gradient(270deg,transparent,var(--line))}

.services{display:grid;grid-template-columns:repeat(4,1fr);gap:1.2rem}
.services-5{grid-template-columns:repeat(5,1fr)}
@media(max-width:1080px){.services,.services-5{grid-template-columns:repeat(3,1fr)}}
@media(max-width:700px){.services,.services-5{grid-template-columns:repeat(2,1fr);gap:.8rem}}

.service{
  position:relative;overflow:hidden;text-align:left;aspect-ratio:4/5;
  border:1px solid var(--line-soft);background:var(--surface);
  box-shadow:0 10px 34px rgba(60,42,18,.10);
  transition:box-shadow .6s var(--ease),transform .6s var(--ease);
}
.service:hover{transform:translateY(-6px);box-shadow:0 24px 54px rgba(60,42,18,.22)}
.service img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  transition:transform 1.2s var(--ease);
}
.service:hover img{transform:scale(1.06)}
.service::after{ /* goldene Innenlinie */
  content:"";position:absolute;inset:10px;border:1px solid rgba(201,169,98,.0);
  transition:border-color .6s var(--ease);pointer-events:none;
}
.service:hover::after{border-color:rgba(201,169,98,.55)}
.service-name{
  position:absolute;left:0;right:0;bottom:0;z-index:2;
  padding:2.6rem 1.1rem .95rem;
  background:linear-gradient(180deg,transparent,rgba(10,7,4,.88));
  font-family:var(--label);font-weight:500;font-size:clamp(.72rem,1.4vw,.88rem);
  letter-spacing:.18em;text-transform:uppercase;color:var(--champ);
}
.service-note{
  position:absolute;top:.9rem;left:.9rem;z-index:2;
  font-family:var(--serif);font-style:italic;font-size:.85rem;color:var(--champ);
  background:rgba(10,7,4,.55);padding:.2em .8em;border:1px solid var(--line-dark);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
}

/* ── Preise (helle Creme-Tafel mit Gold-Rahmen) ── */
.price-board{
  max-width:900px;margin-inline:auto;
  background:linear-gradient(170deg,var(--surface),#f8f2e5 55%,var(--surface));
  border:1px solid var(--line);box-shadow:var(--shadow);
  padding:clamp(1.6rem,4vw,3.2rem);
}
.price-tabs{display:flex;flex-wrap:wrap;justify-content:center;gap:.35rem;margin-bottom:2.4rem}
.ptab{
  font-family:var(--label);font-size:.68rem;letter-spacing:.22em;text-transform:uppercase;text-indent:.22em;
  padding:.75em 1.3em;color:var(--muted);border:1px solid transparent;
  transition:color .4s,border-color .4s,background .4s;
}
.ptab:hover{color:var(--heading)}
.ptab.active{color:var(--gold-deep);border-color:var(--line);background:rgba(160,124,66,.07)}
.price-panel{min-height:280px}
.price-group{animation:fadeUp .7s var(--ease)}
@keyframes fadeUp{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
.price-cols{display:grid;grid-template-columns:1fr auto;gap:.4rem 2rem;align-items:baseline;
  font-family:var(--label);font-size:.66rem;letter-spacing:.22em;text-transform:uppercase;color:var(--gold-deep);
  padding:0 .2rem .9rem;border-bottom:1px solid var(--line-soft);margin-bottom:.4rem}
.price-cols .tiers{display:grid;grid-template-columns:repeat(3,4.2rem);text-align:right;gap:.6rem}
.price-row{
  display:grid;grid-template-columns:1fr auto;gap:.2rem 2rem;align-items:baseline;
  padding:.95rem .2rem;border-bottom:1px solid rgba(160,124,66,.12);
}
.price-row .p-name{font-family:var(--serif);font-size:1.25rem;font-weight:500;color:var(--heading)}
.price-row .p-vals{display:grid;grid-template-columns:repeat(3,4.2rem);gap:.6rem;text-align:right;font-family:var(--serif);font-size:1.2rem;color:var(--gold-deep)}
.price-row .p-vals.single{grid-template-columns:auto}
.price-note{text-align:center;margin-top:2.2rem;font-size:.85rem;color:var(--muted)}
.price-note em{color:var(--gold-deep);font-style:normal}
@media(max-width:640px){
  .price-cols .tiers,.price-row .p-vals{grid-template-columns:repeat(3,3.1rem);gap:.4rem;font-size:.95rem}
  .price-cols{gap:.4rem 1rem}
  .price-row{gap:.2rem 1rem}
  .price-row .p-name{font-size:1.05rem}
}

/* ── Galerie ────────────────────────────────────── */
.masonry{columns:3;column-gap:1.2rem}
@media(max-width:960px){.masonry{columns:2}}
@media(max-width:560px){.masonry{columns:1}}
.m-item{
  break-inside:avoid;margin-bottom:1.2rem;position:relative;overflow:hidden;cursor:zoom-in;
  border:1px solid var(--line-soft);background:var(--surface);
  box-shadow:0 10px 30px rgba(60,42,18,.12);width:100%;padding:0;display:block;
}
.m-item img{width:100%;height:auto;display:block;transition:transform 1.2s var(--ease)}
.m-item:hover img{transform:scale(1.05)}
.m-item .m-tag{
  position:absolute;left:0;right:0;bottom:0;padding:2.2rem 1.2rem .9rem;
  background:linear-gradient(180deg,transparent,rgba(10,7,4,.85));
  font-family:var(--label);font-size:.68rem;letter-spacing:.24em;text-transform:uppercase;color:var(--champ);
  opacity:0;transform:translateY(8px);transition:opacity .6s var(--ease),transform .6s var(--ease);
  text-align:left;
}
.m-item:hover .m-tag{opacity:1;transform:none}

/* ── Bewertungen ────────────────────────────────── */
.rating-summary{margin-top:1.6rem;font-size:1rem;color:var(--muted)}
.rating-summary strong{font-family:var(--serif);font-size:1.5rem;color:var(--heading);font-weight:600;margin:0 .2em}
.stars{color:var(--gold);letter-spacing:.25em;font-size:1.05rem}
.reviews{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:1.4rem}
.review{
  padding:2.2rem 2rem;border:1px solid var(--line-soft);background:var(--surface);
  box-shadow:0 12px 36px rgba(60,42,18,.10);
  display:flex;flex-direction:column;gap:1rem;
}
.review .stars{font-size:.9rem}
.review-text{font-family:var(--serif);font-size:1.18rem;font-style:italic;line-height:1.75;color:var(--text);flex:1}
.review-meta{display:flex;align-items:center;gap:.9rem}
.review-avatar{width:38px;height:38px;border-radius:50%;border:1px solid var(--line);display:grid;place-items:center;font-family:var(--serif);font-weight:600;color:var(--gold-deep);font-size:1rem;background:var(--bg-soft)}
.review-name{font-size:.85rem;letter-spacing:.08em;color:var(--heading);font-weight:400}
.review-src{font-size:.68rem;letter-spacing:.2em;text-transform:uppercase;color:var(--muted)}

/* ── Instagram ──────────────────────────────────── */
.insta-slider{
  display:flex;gap:1.1rem;overflow-x:auto;padding:0 max(4vw,calc((100vw - 1240px)/2)) 1.4rem;
  justify-content:safe center;
  scroll-snap-type:x mandatory;scrollbar-width:thin;scrollbar-color:var(--line) transparent;
  position:relative;z-index:2;
}
.insta-tile{flex:0 0 min(330px,70vw);aspect-ratio:1;scroll-snap-align:start;position:relative;overflow:hidden;border:1px solid var(--line-soft);box-shadow:0 10px 30px rgba(60,42,18,.12)}
.insta-tile img{width:100%;height:100%;object-fit:cover;transition:transform 1.1s var(--ease)}
.insta-tile:hover img{transform:scale(1.06)}
.insta-tile .ig-ico{position:absolute;top:.9rem;right:.9rem;width:20px;height:20px;stroke:#fff;fill:none;stroke-width:1.6;opacity:.9;filter:drop-shadow(0 1px 4px rgba(0,0,0,.5))}

/* ── Terminbuchung (helle Bühne, dunkle Termin-Karte) ── */
.booking-sec{
  background:linear-gradient(180deg,transparent,var(--bg-soft) 14%,var(--bg-soft) 86%,transparent);
}
.booking{
  display:grid;grid-template-columns:1.5fr 1fr;gap:1px;
  border:1px solid var(--line);background:var(--line-soft);
  box-shadow:var(--shadow);
}
@media(max-width:960px){.booking{grid-template-columns:1fr}}
.booking-left{background:var(--surface);padding:clamp(1.6rem,4vw,3rem);display:flex;flex-direction:column;gap:2.4rem}
.booking-right{background:linear-gradient(160deg,#ddcdac,#e8dbc2 60%);padding:clamp(1.6rem,4vw,3rem)}
.bk-label{font-family:var(--label);font-weight:600;font-size:.72rem;letter-spacing:.24em;text-transform:uppercase;color:var(--gold-deep);margin-bottom:1.1rem;display:flex;align-items:center;gap:.9em}
.bk-num{font-family:var(--serif);font-weight:600;font-size:1.3rem;font-style:italic;color:var(--heading);letter-spacing:0}
.bk-label::after{content:"";flex:1;height:1px;background:var(--line-soft)}

.bk-staff{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:.7rem}
.bk-chip{
  padding:1rem .9rem;border:1px solid var(--line-soft);text-align:center;background:transparent;
  transition:border-color .4s,background .4s;display:flex;flex-direction:column;gap:.15rem;
}
.bk-chip:hover{border-color:var(--line)}
.bk-chip.sel{border-color:var(--gold);background:rgba(160,124,66,.10)}
.bk-chip b{font-family:var(--serif);font-weight:600;font-size:1.1rem;letter-spacing:.04em;color:var(--heading)}
.bk-chip small{font-family:var(--label);font-weight:600;font-size:.64rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}

.bk-select{
  width:100%;appearance:none;background:transparent;border:1px solid var(--line-soft);
  color:var(--text);font-family:var(--serif);font-weight:600;font-size:1.14rem;padding:.9em 1.1em;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23a07c42' stroke-width='1.5'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 1.1em center;cursor:pointer;
}
.bk-select:focus{border-color:var(--gold);outline:none}
.bk-select option{background:var(--surface);color:var(--text)}

.bk-cal{border:1px solid var(--line-soft)}
.bk-cal-head{display:flex;align-items:center;justify-content:space-between;padding:.9rem 1.1rem;border-bottom:1px solid var(--line-soft)}
.bk-cal-head span{font-family:var(--label);font-weight:600;letter-spacing:.18em;font-size:.88rem;color:var(--heading);text-transform:uppercase}
.bk-cal-head button{font-size:1.4rem;color:var(--gold-deep);padding:0 .6rem;transition:transform .3s var(--ease)}
.bk-cal-head button:hover{transform:scale(1.25)}
.bk-cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:2px;padding:.8rem}
.bk-cal-grid .dow{font-family:var(--label);font-weight:600;font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);text-align:center;padding:.5em 0}
.bk-day{aspect-ratio:1;display:grid;place-items:center;font-family:var(--serif);font-weight:600;font-size:1.12rem;color:var(--text);position:relative;transition:background .3s,color .3s}
.bk-day:not(:disabled):hover{background:rgba(160,124,66,.12)}
.bk-day:disabled{color:rgba(125,111,90,.30);cursor:default}
.bk-day.sel{background:var(--gold);color:#fff;font-weight:600}
.bk-day.today::after{content:"";position:absolute;bottom:15%;width:4px;height:4px;border-radius:50%;background:var(--gold)}
.bk-day.full:disabled{color:rgba(125,111,90,.30);text-decoration:line-through;text-decoration-color:rgba(160,124,66,.5)}

.bk-slots{display:grid;grid-template-columns:repeat(auto-fill,minmax(78px,1fr));gap:.55rem;min-height:64px}
.bk-slot{padding:.65em 0;border:1px solid var(--line-soft);text-align:center;font-family:var(--serif);font-weight:600;font-size:1.06rem;color:var(--text);transition:border-color .3s,background .3s,color .3s}
.bk-slot:hover{border-color:var(--gold)}
.bk-slot.sel{background:var(--gold);color:#fff;border-color:var(--gold);font-weight:600}
.bk-hint{grid-column:1/-1;font-size:.92rem;color:var(--muted);font-style:italic;font-family:var(--serif)}

.bk-summary{position:sticky;top:96px}
.bk-sum-eyebrow{font-family:var(--label);font-weight:600;font-size:.72rem;letter-spacing:.36em;text-transform:uppercase;color:var(--gold-deep);text-align:center;margin-bottom:1.6rem}
.bk-sum-rows{display:flex;flex-direction:column;gap:.75rem}
.bk-sum-row{display:flex;justify-content:space-between;gap:1rem;align-items:baseline;font-size:.86rem}
.bk-sum-row span{font-family:var(--label);font-weight:600;letter-spacing:.1em;text-transform:uppercase;font-size:.66rem;color:var(--muted)}
.bk-sum-row strong{font-family:var(--serif);font-weight:600;font-size:1.14rem;color:var(--heading);text-align:right}
.bk-sum-price strong{color:var(--gold-deep);font-size:1.35rem}
.bk-sum-rule{display:flex;align-items:center;gap:.8rem;margin:1.8rem 0}
.bk-sum-rule i{flex:1;height:1px;background:linear-gradient(90deg,transparent,var(--line))}
.bk-sum-rule i:last-child{background:linear-gradient(270deg,transparent,var(--line))}
.bk-sum-rule svg{width:10px;height:10px;fill:var(--gold)}

.bk-field{position:relative;margin-bottom:1.1rem}
.bk-field input,.bk-field textarea{
  width:100%;background:transparent;border:none;border-bottom:1px solid var(--line-soft);
  color:var(--text);font-family:var(--serif);font-weight:600;font-size:1.12rem;padding:1.15em 0 .5em;
  transition:border-color .4s;resize:none;
}
.bk-field input:focus,.bk-field textarea:focus{outline:none;border-color:var(--gold)}
.bk-field label{
  position:absolute;left:0;top:1.05em;font-size:.97rem;font-weight:500;color:var(--muted);pointer-events:none;
  transition:top .35s var(--ease),font-size .35s var(--ease),color .35s,letter-spacing .35s;
}
.bk-field input:focus + label,.bk-field input:not(:placeholder-shown) + label,
.bk-field textarea:focus + label,.bk-field textarea:not(:placeholder-shown) + label{
  top:-.35em;font-size:.62rem;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--gold-deep);font-family:var(--label);
}
/* Honeypot — unsichtbar für Menschen */
.bk-hp{position:absolute !important;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden;opacity:0;pointer-events:none}

.bk-msg{margin-top:1rem;font-size:.9rem;text-align:center;min-height:1.4em;color:var(--text)}
.bk-msg.ok{color:var(--gold-deep)}
.bk-msg.err{color:#a04545}

/* ── Kontakt ────────────────────────────────────── */
.contact{display:grid;grid-template-columns:1fr 1.1fr;gap:3rem;align-items:start}
@media(max-width:900px){.contact{grid-template-columns:1fr}}
.contact-info{display:flex;flex-direction:column;gap:1.05rem}
.c-row{display:flex;justify-content:space-between;gap:2rem;align-items:baseline;padding-bottom:1rem;border-bottom:1px solid var(--line-soft)}
.c-key{font-family:var(--label);font-weight:600;font-size:.68rem;letter-spacing:.22em;text-transform:uppercase;color:var(--gold-deep);white-space:nowrap}
.c-val{font-family:var(--serif);font-size:1.2rem;color:var(--heading);text-align:right}
a.c-val:hover{color:var(--gold-deep)}
.c-hours{margin-top:1.4rem}
.c-hours .c-key{display:block;margin-bottom:1rem}
.c-hours .c-row{font-family:var(--serif);font-size:1.1rem;color:var(--text)}
.contact-map{border:1px solid var(--line-soft);padding:8px;background:var(--surface);box-shadow:var(--shadow)}
.contact-map iframe{width:100%;height:420px;border:0;filter:sepia(.35) saturate(.8)}
/* DSGVO-Zustimmung vor dem Laden der Karte */
.map-consent{
  min-height:420px;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:.9rem;text-align:center;padding:2.5rem 2rem;
  background:linear-gradient(160deg,var(--bg-soft),var(--surface));
}
.map-consent svg{width:44px;height:44px;fill:none;stroke:var(--gold);stroke-width:1.4}
.mc-title{font-family:var(--label);font-size:.8rem;letter-spacing:.4em;text-indent:.4em;text-transform:uppercase;color:var(--gold-deep)}
.mc-text{max-width:400px;font-size:.88rem;color:var(--muted);line-height:1.7}
.mc-text a{color:var(--gold-deep);text-decoration:underline}
.mc-text a:hover{color:var(--gold)}
.map-consent .btn{margin-top:.4rem}
.mc-addr{font-family:var(--serif);font-size:1.05rem;color:var(--text);margin-top:.4rem}

/* ── Footer (hell) ──────────────────────────────── */
.footer{padding:0 0 2.6rem;margin-top:3rem;background:linear-gradient(180deg,var(--bg-soft),#e9dec7);position:relative;z-index:2}
.footer-rule{display:flex;align-items:center;gap:1.2rem;padding-top:3rem;margin-bottom:3rem}
.footer-rule i{flex:1;height:1px;background:linear-gradient(90deg,transparent,var(--gold))}
.footer-rule i:last-child{background:linear-gradient(270deg,transparent,var(--gold))}
.footer-rule svg{width:13px;height:13px;fill:var(--gold)}
.footer-inner{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:2.2rem}
.footer-logo{display:flex;align-items:center;gap:1rem}
.footer-logo img{width:52px;height:auto;filter:drop-shadow(0 2px 8px rgba(60,42,18,.20))}
.footer-logo span{font-family:var(--label);letter-spacing:.28em;font-size:1rem;color:var(--heading);display:flex;flex-direction:column;line-height:1.4}
.footer-logo small{font-family:var(--serif);font-style:italic;font-size:.8rem;letter-spacing:.06em;color:var(--muted);text-transform:none}
.footer-nav{display:flex;flex-wrap:wrap;gap:1.6rem}
.footer-nav a{font-family:var(--label);font-size:.66rem;letter-spacing:.22em;text-transform:uppercase;color:var(--muted);transition:color .4s}
.footer-nav a:hover{color:var(--gold-deep)}
.footer-social{display:flex;gap:1rem}
.footer-social a{width:40px;height:40px;border:1px solid var(--line-soft);display:grid;place-items:center;transition:border-color .4s,background .4s}
.footer-social a:hover{border-color:var(--gold);background:rgba(160,124,66,.08)}
.footer-social svg{width:17px;height:17px;fill:none;stroke:var(--gold-deep);stroke-width:1.5}
.footer-copy{text-align:center;margin-top:3rem;font-size:.78rem;letter-spacing:.1em;color:var(--muted)}
.footer-copy a:hover{color:var(--gold-deep)}
/* Design-Credit */
.footer-credit{
  text-align:center;margin-top:1.1rem;font-family:var(--label);font-weight:600;
  font-size:.64rem;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);
}
.footer-credit a{color:var(--gold-deep);border-bottom:1px solid rgba(150,112,58,.35);padding-bottom:1px;transition:color .4s,border-color .4s}
.footer-credit a:hover{color:var(--gold);border-bottom-color:var(--gold)}

/* ── WhatsApp Floating-Button ───────────────────── */
.wa-float{
  position:fixed;right:1.4rem;bottom:1.4rem;z-index:150;
  width:60px;height:60px;border-radius:50%;
  background:#fff;display:grid;place-items:center;
  box-shadow:0 10px 30px rgba(0,0,0,.30),0 0 0 1px rgba(37,211,102,.25);
  transition:transform .4s var(--ease),box-shadow .4s var(--ease);
}
.wa-float svg{width:38px;height:38px}
.wa-float:hover{transform:translateY(-4px) scale(1.06);box-shadow:0 16px 40px rgba(0,0,0,.35),0 0 0 1px rgba(37,211,102,.4)}
.wa-float::before{ /* sanfter Puls */
  content:"";position:absolute;inset:-6px;border-radius:50%;
  border:1.5px solid rgba(37,211,102,.45);
  animation:waPulse 2.6s var(--ease) infinite;
}
@keyframes waPulse{
  0%{transform:scale(.85);opacity:.9}
  70%,100%{transform:scale(1.25);opacity:0}
}
@media(prefers-reduced-motion:reduce){.wa-float::before{animation:none;opacity:0}}
.wa-tip{
  position:absolute;right:calc(100% + 14px);top:50%;transform:translateY(-50%) translateX(6px);
  white-space:nowrap;background:var(--dark);color:var(--champ);
  font-family:var(--label);font-size:.62rem;letter-spacing:.2em;text-transform:uppercase;
  padding:.7em 1.2em;border:1px solid var(--line-dark);
  opacity:0;pointer-events:none;transition:opacity .4s var(--ease),transform .4s var(--ease);
}
.wa-float:hover .wa-tip,.wa-float:focus-visible .wa-tip{opacity:1;transform:translateY(-50%)}
@media(max-width:640px){.wa-tip{display:none}.wa-float{width:54px;height:54px;right:1.1rem;bottom:1.1rem}.wa-float svg{width:34px;height:34px}}

/* ── Rechtsseiten (Impressum / Datenschutz) ─────── */
.legal-hero{padding:9rem 0 3.5rem;text-align:center;
  background:linear-gradient(180deg,var(--bg-soft),transparent);
}
.legal-hero .sec-eyebrow{color:var(--gold-deep)}
.legal-hero h1{font-family:var(--serif);font-weight:600;font-size:clamp(2.2rem,5vw,3.2rem);letter-spacing:.08em;color:var(--heading)}
.legal{max-width:820px;margin-inline:auto;padding:clamp(3rem,6vw,5rem) 0 5rem}
.legal h2{
  font-family:var(--serif);font-weight:600;font-size:1.55rem;color:var(--heading);
  margin:2.8rem 0 1rem;padding-bottom:.6rem;border-bottom:1px solid var(--line-soft);
}
.legal h3{font-family:var(--label);font-size:.78rem;letter-spacing:.24em;text-transform:uppercase;color:var(--gold-deep);margin:2rem 0 .7rem}
.legal p,.legal li{font-size:.98rem;line-height:1.85;color:var(--text);margin-bottom:.9rem}
.legal ul{padding-left:1.3rem;margin-bottom:1rem}
.legal a{color:var(--gold-deep);text-decoration:underline;text-underline-offset:3px}
.legal a:hover{color:var(--gold)}
.legal .legal-card{
  background:var(--surface);border:1px solid var(--line-soft);box-shadow:0 12px 36px rgba(60,42,18,.10);
  padding:2rem 2.2rem;margin:1.5rem 0;
}
.legal .legal-card p{margin-bottom:.3rem}
.legal .legal-card .lc-name{font-family:var(--serif);font-size:1.35rem;font-weight:600;color:var(--heading)}
.legal-note{font-size:.85rem;color:var(--muted);font-style:italic}
.legal-back{display:inline-block;margin-top:3rem}

/* ── Lightbox ───────────────────────────────────── */
.lightbox{
  position:fixed;inset:0;z-index:200;display:grid;place-items:center;padding:5vh 5vw;
  background:rgba(10,7,4,.92);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  animation:fadeUp .4s var(--ease);
}
.lightbox[hidden]{display:none}
.lb-body{max-width:min(860px,92vw);max-height:76vh;border:1px solid var(--line-dark)}
.lb-body img{max-height:76vh;width:auto;max-width:100%}
.lb-caption{margin-top:1.2rem;font-family:var(--label);font-size:.7rem;letter-spacing:.3em;text-transform:uppercase;color:var(--champ)}
.lb-close{position:absolute;top:1.4rem;right:1.8rem;font-size:1.5rem;color:var(--gold-hi);transition:transform .4s var(--ease)}
.lb-close:hover{transform:rotate(90deg)}