:root{--color-black:#020202;--color-dark:#001d1b;--color-white:#f7f4ef;--color-paper:#f3f0ea;--color-gold:#a57a2c;--color-gold-dark:#876326;--color-text:#2e2e2e;--font-text:"Jost",Arial,sans-serif;--font-display:"Marcellus",Georgia,serif}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--color-black);color:var(--color-white);font-family:var(--font-text);font-weight:300;line-height:1.55}.skip-link{position:absolute;left:1rem;top:1rem;z-index:9999;transform:translateY(-160%);background:var(--color-white);color:var(--color-black);padding:.75rem 1rem}.skip-link:focus{transform:translateY(0)}a{color:inherit;text-underline-offset:.25em}a:focus-visible,button:focus-visible{outline:3px solid var(--color-gold);outline-offset:5px}.site-header{position:absolute;top:0;left:0;right:0;z-index:1040}.site-header__inner{display:flex;justify-content:flex-end;align-items:flex-start;gap:1.2rem;padding:2.1rem 4.9rem 0}.btn-booking{display:inline-flex;align-items:center;justify-content:center;min-width:7.7rem;height:2.1rem;border:1px solid rgba(165,122,44,.82);color:var(--color-white);font-size:.58rem;letter-spacing:.12em;text-transform:uppercase;text-decoration:none}.btn-booking:hover{background:var(--color-gold);color:#fff}.menu-toggle{width:2.65rem;height:2.1rem;border:0;background:transparent;padding:.18rem 0;display:flex;flex-direction:column;justify-content:center;align-items:flex-end;gap:.33rem;color:var(--color-gold)}.menu-toggle__line{display:block;height:2px;background:currentColor}.menu-toggle__line--long{width:1.9rem}.menu-toggle__line--medium{width:1.45rem}.menu-toggle__line--short{width:.95rem}.offcanvas-backdrop.show{opacity:.72}.site-menu{width:min(39rem,38vw);border-left:0;background:#f7f6f3;color:var(--color-text)}.site-menu__close-wrap{position:absolute;right:4.9rem;top:2.1rem;width:2.65rem;height:2.1rem;display:flex;align-items:center;justify-content:flex-end}.site-menu__close{position:relative;width:2.65rem;height:2.1rem;border:0;background:transparent;color:var(--color-gold-dark);font-size:0;line-height:1;padding:0}.site-menu__close:before,.site-menu__close:after{content:"";position:absolute;right:0;top:50%;width:1.9rem;height:2px;background:currentColor;transform-origin:center}.site-menu__close:before{transform:translateY(-50%) rotate(45deg)}.site-menu__close:after{transform:translateY(-50%) rotate(-45deg)}.site-menu__body{padding:10.1rem 5.65rem 3rem}.site-menu__nav{list-style:none;margin:0 0 4.1rem;padding:0}.site-menu__nav a{display:inline-block;padding:.52rem 0;color:#4d4d4d;text-decoration:none;font-size:1.48rem;letter-spacing:.025em}.site-menu__nav a:hover,.site-menu__nav a.is-active{color:var(--color-gold-dark)}.site-menu__contact{font-style:normal;font-size:.82rem;line-height:1.85;color:#555}.site-menu__contact strong{font-weight:400;color:#444}.site-menu__contact a{color:var(--color-gold-dark);text-decoration:none}.site-menu__social{display:flex;gap:.9rem;margin-top:2.2rem}.site-menu__social a{font-size:1.2rem;color:var(--color-gold-dark)}.section-hero{position:relative;min-height:100vh;min-height:100dvh;max-height:none;background:url("../img/hero.jpg") center/cover no-repeat;display:grid;place-items:center;isolation:isolate;overflow:hidden}.section-hero:before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(0,0,0,.47),rgba(0,25,23,.36)),linear-gradient(0deg,rgba(0,0,0,.42),rgba(0,0,0,.14));z-index:-1}.section-hero__content{transform:translateY(5rem)}.logo-display{font-family:var(--font-display);font-size:clamp(3.8rem,7.7vw,8.8rem);letter-spacing:.085em;text-transform:uppercase;line-height:.95;margin:0 0 1.9rem;color:#fff;text-shadow:0 0 1px rgba(255,255,255,.2)}.logo-location{letter-spacing:.74em;text-transform:uppercase;font-size:clamp(.9rem,1.65vw,1.85rem);margin:0;color:#fff}.hero-scroll{position:absolute;left:50%;bottom:3rem;transform:translateX(-50%);color:var(--color-gold);font-size:1.35rem;text-decoration:none}.section-inner{padding:clamp(4.5rem,9vw,8rem) 0}.section-dark{background:var(--color-black);color:var(--color-white)}.section-marker{position:relative;--marker-top:clamp(4.5rem,9vw,8rem);--marker-height:8.9rem}.section-kicker{position:absolute;left:-3.35rem;top:var(--marker-top);z-index:2;display:flex;flex-direction:column;align-items:center;gap:1.5rem;color:var(--color-gold);line-height:1;pointer-events:none}.section-kicker__text{display:block;writing-mode:vertical-rl;text-orientation:mixed;transform:rotate(180deg);transform-origin:center;text-transform:uppercase;font-size:.72rem;letter-spacing:.18em;font-weight:400;white-space:nowrap}.section-kicker__line{display:block;width:1px;height:var(--marker-height);background:currentColor}.section-split__content.section-marker,.section-contact__content.section-marker{--marker-top:clamp(4rem,8vw,7rem)}.section-split__content .section-kicker{left:auto;right:clamp(3.4rem,5vw,6rem)}.lead-text{max-width:none;font-size:clamp(1.25rem,2.3vw,2rem);line-height:1.25}.section-split{background:var(--color-paper);color:var(--color-black)}.section-split__image img,.section-contact__image img{width:100%;height:100%;min-height:560px;object-fit:cover;display:block}.section-split__content,.section-contact__content{padding:clamp(4rem,8vw,7rem);display:flex;flex-direction:column;justify-content:center}.section-split h2,.section-services h2,.section-contact h2,.section-gallery h2,.section-social h2{font-family:var(--font-text);font-weight:300;font-size:clamp(2.4rem,5vw,4.4rem);line-height:1.08;margin-bottom:2rem}.section-split h2,.section-services h2,.service-accordion .accordion-button{color:var(--color-gold-dark)}.btn-outline-brand{border:1px solid var(--color-gold);color:var(--color-gold-dark);border-radius:0;padding:.7rem 1.3rem;align-self:flex-start}.btn-outline-brand:hover{background:var(--color-gold);color:var(--color-white)}.social-grid img{width:100%;aspect-ratio:3/4;object-fit:cover;display:block}.social-profile-link{display:inline-flex;align-items:center;gap:.55rem;margin-top:1.05rem;color:var(--color-gold);font-size:1.25rem;line-height:1;text-decoration:none}.social-profile-link:hover{color:var(--color-white)}.social-profile-link__icon{width:2.45rem;height:2.45rem;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;background:var(--color-gold);color:var(--color-black);font-size:1.25rem;flex:0 0 auto}.social-profile-link .fa-arrow-right{font-size:1.05rem}.social-intro{margin:3rem 0 2rem;font-size:1.25rem;color:var(--color-white)}.social-actions{display:flex;gap:1.65rem;flex-wrap:wrap}.btn-social{display:inline-flex;align-items:center;gap:.85rem;min-width:8.9rem;border:1px solid var(--color-gold);border-radius:0;color:var(--color-gold);padding:.95rem 1.4rem;font-size:1rem}.btn-social:hover{background:var(--color-gold);color:var(--color-black)}.section-services{background:var(--color-paper);color:var(--color-black)}.section-services .section-inner{padding-top:clamp(4.5rem,8vw,7rem);padding-bottom:clamp(4.5rem,8vw,7rem)}.service-accordion{max-width:none}.service-accordion__item{background:transparent;border:0;border-bottom:1px solid rgba(0,0,0,.55);border-radius:0}.service-accordion__button{background:transparent;color:var(--color-gold-dark);font-size:clamp(2.2rem,5vw,4.9rem);font-weight:300;line-height:1.06;padding:2.4rem 0 2.15rem;display:flex;align-items:center;gap:1.75rem}.service-accordion__item:first-child .service-accordion__button{padding-top:0}.service-accordion__button::after{display:none}.service-accordion__button:not(.collapsed){background:transparent;color:var(--color-gold-dark);box-shadow:none}.service-accordion__button:focus{box-shadow:none}.accordion-icon{width:2.05rem;min-width:2.05rem;text-align:center;font-size:clamp(1.2rem,2.3vw,2rem);line-height:1;color:var(--color-gold-dark)}.service-accordion__body{padding:0 0 3.5rem}.price-list{max-width:none}.price-list h3,.section-contact h3{font-size:1.25rem;font-weight:600;text-transform:none;letter-spacing:.01em;margin-bottom:2rem}.price-list__item{border-bottom:1px solid rgba(168,124,45,.65);padding:0 0 1.55rem;margin-bottom:1.75rem}.price-list__item--last{border-bottom:0}.price-list p{border:0;padding:0;margin:0 0 1.3rem;font-size:1.08rem;line-height:1.45}.price-list p:last-child{margin-bottom:0}.price-list strong{display:inline-block;font-size:1.15rem;font-weight:400;letter-spacing:.045em;text-transform:uppercase}.accordion-item{background:transparent}.accordion-button{background:transparent}.accordion-button:not(.collapsed){box-shadow:none}.accordion-button:focus{box-shadow:none}.gallery-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem;max-width:none}.gallery-grid img{width:100%;aspect-ratio:1;object-fit:cover}.section-contact{background:var(--color-gold);color:var(--color-white)}.section-contact .section-kicker{color:var(--color-white)}.section-contact a{text-decoration:none}.opening-hours{display:grid;grid-template-columns:max-content 1fr;gap:.25rem 1.5rem}.opening-hours dd{margin:0}.site-footer{padding:2rem 0}.logo-wordmark{font-family:var(--font-display);font-size:1.25rem;letter-spacing:.12em;text-transform:uppercase}.logo-wordmark span{display:block;font-family:var(--font-text);font-size:.5rem;letter-spacing:.45em}.site-footer nav{display:flex;gap:1.5rem;flex-wrap:wrap}.site-footer a{font-size:.85rem;text-transform:uppercase;letter-spacing:.12em;text-decoration:none}@media (max-width:1199.98px){.site-header__inner{padding-right:2rem}.site-menu{width:min(31rem,84vw)}.site-menu__body{padding-left:4rem}.section-hero{min-height:100vh;min-height:100dvh}.section-hero__content{transform:translateY(4rem)}}@media (max-width:991.98px){.site-header__inner{padding:1.25rem 1.25rem 0}.btn-booking{background:rgba(0,0,0,.35)}.site-menu__close-wrap{right:1.25rem;top:1.25rem}.site-menu__body{padding:7rem 2.2rem 2rem}.section-kicker{display:none}.section-split__content,.section-contact__content{padding:4rem 1.5rem}.section-inner{padding:4rem 1.5rem}.gallery-grid{grid-template-columns:repeat(2,1fr)}}@media (max-width:575.98px){.btn-booking{min-width:auto;padding:0 .8rem}.section-hero{min-height:100vh;min-height:100dvh}.section-hero__content{transform:translateY(2.5rem)}.hero-scroll{bottom:1.5rem}.logo-display{font-size:3.1rem}.logo-location{letter-spacing:.35em}.section-split__image img,.section-contact__image img{min-height:380px}.social-grid{--bs-gutter-x:1rem;--bs-gutter-y:1.5rem}.opening-hours{grid-template-columns:1fr}.gallery-grid{gap:.75rem}}

/* Contact section – aligned to Milano-Sali design reference */
.section-contact {
  background: var(--color-gold-dark, #a87c2d);
  color: var(--color-white, #fff);
}
.section-contact .row {
  min-height: 43.5vw;
}
.section-contact__content {
  background: var(--color-gold-dark, #a87c2d);
  padding: clamp(4rem, 5.7vw, 6.7rem) clamp(4.5rem, 8.6vw, 10.5rem) clamp(4rem, 5.7vw, 6.7rem);
  justify-content: flex-start;
}
.section-contact__content.section-marker {
  --marker-top: clamp(4rem, 5.7vw, 6.7rem);
  --marker-height: 9rem;
}
.section-contact .section-kicker {
  color: var(--color-white, #fff);
  left: clamp(2.8rem, 5.2vw, 5.5rem);
}
.section-contact .section-kicker__text {
  transform: rotate(180deg);
  transform-origin: center;
}
.contact-content {
  width: 100%;
  max-width: 41rem;
  margin-left: auto;
}
.section-contact h2 {
  color: var(--color-white, #fff);
  font-size: clamp(3.2rem, 5.25vw, 6.1rem);
  line-height: .98;
  margin: 0 0 clamp(2.3rem, 3.2vw, 3.8rem);
}
.contact-info-row {
  margin-bottom: clamp(3.2rem, 5.1vw, 6rem);
}
.contact-address,
.contact-map-link,
.contact-social a,
.opening-hours {
  color: var(--color-white, #fff);
}
.contact-address {
  font-style: normal;
  margin: 0;
  font-size: clamp(1.05rem, 1.25vw, 1.35rem);
  line-height: 1.35;
}
.contact-address strong {
  font-weight: 400;
}
.section-contact a {
  color: var(--color-white);
  text-decoration: none;
}
.section-contact a:hover,
.section-contact a:focus-visible {
  color: var(--color-white, #fff);
  text-decoration: underline;
}
.contact-links {
  padding-top: .15rem;
}
.contact-map-link {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  font-size: clamp(1.05rem, 1.25vw, 1.35rem);
  line-height: 1.25;
  margin-bottom: 1.55rem;
}
.contact-map-link i {
  font-size: 1.45em;
  line-height: 1;
}
.contact-social {
  display: flex;
  align-items: center;
  gap: .9rem;
}
.contact-social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.35rem;
  line-height: 1;
}
.contact-hours-wrap h3 {
  color: var(--color-white, #fff);
  font-size: clamp(1.05rem, 1.28vw, 1.35rem);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .01em;
  margin: 0 0 .55rem;
}
.opening-hours {
  display: grid;
  grid-template-columns: 9.4rem 1fr;
  gap: .05rem 1.6rem;
  margin: 0;
  font-size: clamp(1.05rem, 1.25vw, 1.35rem);
  line-height: 1.3;
}
.opening-hours dt {
  font-weight: 400;
}
.opening-hours dd {
  margin: 0;
}
.section-contact__image img {
  height: 100%;
  min-height: 43.5vw;
  object-fit: cover;
  object-position: center;
}
@media (max-width: 991.98px) {
  .section-contact .row {
    min-height: 0;
  }
  .section-contact__content {
    padding: 4rem 1.5rem;
  }
  .contact-content {
    margin-left: 0;
    max-width: none;
  }
  .section-contact__image img {
    min-height: 380px;
  }
}
@media (max-width: 575.98px) {
  .contact-info-row {
    margin-bottom: 3rem;
  }
  .opening-hours {
    grid-template-columns: 1fr;
    gap: .1rem;
  }
  .opening-hours dd:not(:last-child) {
    margin-bottom: .4rem;
  }
}

/* Hero wordmark – original Milano-Sali logo (SVG) instead of text */
.hero-logo {
  margin: 0;
  line-height: 0;
}
.hero-logo img {
  width: clamp(16rem, 46vw, 46rem);
  height: auto;
  display: inline-block;
}
.hero-scroll {
  transition: color .25s ease;
}
.hero-scroll i {
  display: inline-block;
  transform: rotate(90deg);
  transition: transform .25s ease;
}
.hero-scroll:hover {
  color: var(--color-white);
  animation: scrollHint .85s ease-in-out infinite;
}
.hero-scroll:hover i {
  transform: rotate(90deg) scale(1.18);
}
@keyframes scrollHint {
  0%, 100% { transform: translateX(-50%) translateY(0); }
  50%      { transform: translateX(-50%) translateY(8px); }
}
@media (max-width: 575.98px) {
  .hero-logo img {
    width: clamp(13rem, 78vw, 20rem);
  }
}

/* ===================================================================
   Wiederverwendbarer Text-Block mit vertikalem „Kicker“.
   Ein Layout für ALLE Breiten (Kicker bleibt schmal & vertikal neben
   dem Text) – keine Breakpoint-Sonderfälle nötig.
   Modifier:  .kicker-row--right  → Kicker rechts
              Section .section-dark / .section-textblock--light steuert
              Hintergrund & Schriftfarbe (hell/dunkel).
   =================================================================== */
.section-intro {
  display: grid;
  place-items: center;
  min-height: clamp(22rem, 56vh, 38rem);
  padding: clamp(7.5rem, 8vh, 6.5rem) 0;
}
/* Schmale Geräte: Abstände wie section-social (.section-inner) – 4rem,
   ohne erzwungene Mindesthöhe (sonst zu viel Luft oben/unten). */
@media (max-width: 991.98px) {
  .section-intro {
    min-height: 0;
    padding: 4rem 0;
  }
}
.section-textblock--light {
  background: var(--color-paper);
  color: var(--color-black);
}

.kicker-row {
  display: flex;
  align-items: stretch;
  gap: clamp(1.4rem, 3vw, 3.25rem);
  width: 100%;
  max-width: 72rem;
  margin-inline: auto;
}
.kicker-row--right {
  flex-direction: row-reverse;
}

.kicker-rail {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.25rem;
  color: var(--color-gold);
}
.section-textblock--light .kicker-rail {
  color: var(--color-gold-dark);
}
.kicker-rail__text {
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  text-transform: uppercase;
  letter-spacing: .2em;
  font-size: .78rem;
  font-weight: 400;
  white-space: nowrap;
}
.kicker-rail__line {
  width: 1px;
  flex: 1 1 auto;
  min-height: 3rem;
  background: currentColor;
}

.kicker-row__content {
  flex: 1 1 auto;
  min-width: 0;
}
.section-intro .lead-text {
  margin: 0;
  max-width: none;
  font-size: clamp(1.5rem, 2.5vw, 2.3rem);
  line-height: 1.32;
}

/* Einheitliches Button-System – orientiert an den Social-Media-Buttons */
.btn-booking,
.btn-outline-brand,
.btn-social {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: auto;
  min-width: 0;
  min-height: 3.55rem;
  height: auto;
  padding: 0.95rem 1.4rem;
  border: 1px solid var(--color-gold);
  border-radius: 0;
  font-family: var(--font-text);
  font-size: 1rem;
  font-weight: 300;
  line-height: 1;
  letter-spacing: 0;
  text-transform: none;
  text-decoration: none;
  transition: background-color .25s ease, color .25s ease, border-color .25s ease;
}

.btn-booking {
  color: var(--color-white);
  background: transparent;
}

.btn-outline-brand,
.btn-social {
  color: var(--color-gold-dark);
  background: transparent;
}

.section-dark .btn-social {
  color: var(--color-gold);
}

.btn-booking:hover,
.btn-booking:focus,
.btn-outline-brand:hover,
.btn-outline-brand:focus,
.btn-social:hover,
.btn-social:focus {
  background: var(--color-gold);
  border-color: var(--color-gold);
  color: var(--color-black);
}

.btn-social {
  gap: .85rem;
}

@media (max-width: 575.98px) {
  .btn-booking,
  .btn-outline-brand,
  .btn-social {
    min-height: 3.55rem;
    padding: 0.95rem 1.2rem;
    font-size: 1rem;
  }
}

/* ===================================================================
   Header bar – Logo links · Navigation mittig · Aktionen rechts
   =================================================================== */
/* Höhe des kompakten (gescrollten) Headers – einzige Quelle für
   Header-Layout UND Anker-Offset (scroll-padding-top). */
:root {
  --header-h: 4.75rem;
}
@media (max-width: 991.98px) {
  :root {
    --header-h: 4.25rem;
  }
}
html {
  scroll-padding-top: var(--header-h);
}
.site-header {
  position: fixed;
  transition: background-color .3s ease, backdrop-filter .3s ease;
}
.site-header.is-scrolled {
  background: rgba(0, 0, 0, .6);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.site-header.is-scrolled .site-header__inner {
  min-height: var(--header-h);
  padding-top: 0;
  padding-bottom: 0;
}
.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 1.5rem clamp(1.25rem, 3vw, 3rem) 0;
  transition: min-height .3s ease, padding .3s ease;
}
.site-header__logo {
  flex: 0 0 auto;
  line-height: 0;
}
.site-header__logo img {
  width: clamp(8.5rem, 11vw, 12rem);
  height: auto;
  display: block;
}
.site-header__nav {
  flex: 1 1 auto;
}
.site-header__nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: clamp(1.1rem, 2vw, 2.4rem);
}
.site-header__nav a {
  display: inline-block;
  color: var(--color-white);
  text-decoration: none;
  text-transform: uppercase;
  font-size: .72rem;
  font-weight: 400;
  letter-spacing: .16em;
  padding: .35rem 0;
  transition: color .25s ease;
}
.site-header__nav a:hover,
.site-header__nav a.is-active {
  color: var(--color-gold);
}
.site-header__actions {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 1rem;
}
.site-header__actions .btn-booking {
  min-height: 2.6rem;
  padding: .6rem 1.2rem;
}
/* Burger nur mobil, Inline-Nav nur Desktop */
.site-header__nav { display: block; }
.menu-toggle { display: none; }
@media (max-width: 991.98px) {
  .site-header__inner { padding-top: 1.1rem; }
  .site-header__nav { display: none; }
  .menu-toggle { display: flex; }
  .site-header__logo img { width: 8.5rem; }
}

/* ===================================================================
   Hero-Slider – Fader + Ken Burns + „Scheiben“-Reveal
   =================================================================== */
.section-hero { background: var(--color-black); }
/* Overlay aus dem Grid-Fluss nehmen, sonst entsteht eine zweite Grid-Zeile
   und der Hero-Inhalt wird nach unten gedrückt (statt echt zentriert). */
.section-hero__overlay {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}
.hero-slider {
  position: absolute;
  inset: 0;
  z-index: -2;
  overflow: hidden;
}
.hero-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
  transition: opacity 1.2s ease;
}
.hero-slide.is-active {
  opacity: 1;
  pointer-events: auto;
}
.hero-slide__kb {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  transform: scale(1);
  will-change: transform;
  animation: kenburns 18s ease-in-out infinite alternate;
  animation-play-state: paused;
}
.hero-slide__kb--img1 {
  background-image: url('../img/hero.jpg');
}
.hero-slide.is-active .hero-slide__kb {
  animation-play-state: running;
}
@keyframes kenburns {
  from { transform: scale(1); }
  to   { transform: scale(1.12); }
}
.hero-slide__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* „Scheiben“-Reveal: durchgehendes Bild + Masken-Balken, die gestaffelt
   wegblenden – so bleibt das Bild darunter nahtlos (keine Schnittkanten). */
.hero-reveal {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}
.hero-reveal__bar {
  position: absolute;
  top: 0;
  height: 100%;
  /* 1px Überlappung, damit zwischen den Balken keine Lücke entsteht */
  width: calc(100% / var(--slices) + 1px);
  left: calc(var(--i) * 100% / var(--slices));
  background: var(--color-black);
  opacity: 1;
}
.hero-slide--sliced.is-active .hero-reveal__bar {
  animation: barOut 1s ease forwards;
  animation-delay: calc(var(--i) * .14s);
}
@keyframes barOut {
  from { opacity: 1; }
  to   { opacity: 0; }
}

/* Pfeile */
.hero-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 3;
  width: 3.2rem;
  height: 3.2rem;
  border: 0;
  background: transparent;
  color: rgba(255,255,255,.85);
  font-size: 2.1rem;
  line-height: 1;
  /* Standard: ausgeblendet – erst sichtbar, wenn JS 2+ Slides findet */
  display: none;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: color .25s ease, transform .25s ease;
}
.section-hero.is-slider .hero-arrow {
  display: flex;
}
.hero-arrow:hover { color: var(--color-gold); }
.hero-arrow--prev { left: clamp(.5rem, 1.6vw, 1.6rem); }
.hero-arrow--next { right: clamp(.5rem, 1.6vw, 1.6rem); }
.hero-arrow--prev:hover { transform: translateY(-50%) translateX(-3px); }
.hero-arrow--next:hover { transform: translateY(-50%) translateX(3px); }
@media (max-width: 575.98px) {
  .hero-arrow { font-size: 1.7rem; width: 2.6rem; height: 2.6rem; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .hero-slide__kb { animation: none; }
  .hero-reveal__bar {
    animation: none !important;
    opacity: 0;
  }
  .hero-scroll:hover { animation: none; }
}

/* ===================================================================
   Kleine Displays: Hochkant-„Kicker“ wird NICHT ausgeblendet, sondern
   horizontal über dem jeweiligen Section-Text angezeigt.
   =================================================================== */
@media (max-width: 991.98px) {
  .section-kicker {
    display: flex;
    position: static;
    flex-direction: row;
    align-items: center;
    gap: .8rem;
    inset: auto;
    transform: none;
    margin: 0 0 1.4rem;
  }
  .section-kicker__text {
    writing-mode: horizontal-tb;
    text-orientation: mixed;
    transform: none;
  }
  /* Kontakt-Kicker hat auf Desktop eine 180°-Drehung – hier neutralisieren */
  .section-contact .section-kicker__text {
    transform: none;
  }
  /* Linie von vertikal auf horizontal umstellen */
  .section-kicker__line {
    width: 2.4rem;
    height: 1px;
  }
}

/* ===================================================================
   Split-Section („Hair. Style. Identity.“) – größere Headline & Fließtext,
   Button-Hover mit weißer Schrift.
   =================================================================== */
.section-split__content h2 {
  font-size: clamp(2.7rem, 5.2vw, 4.9rem);
}
.section-split__content p {
  font-size: clamp(1.1rem, 1.4vw, 1.3rem);
  line-height: 1.6;
  margin: 0 0 1.2rem;
}
.section-split__content .btn-outline-brand {
  margin-top: .9rem;
}
.section-split__content .btn-outline-brand:hover,
.section-split__content .btn-outline-brand:focus {
  color: var(--color-white);
}

/* --- Split-Varianten ---------------------------------------------------
   .section-split--image-right  → Bild rechts / Text links
   .section-split--dark         → dunkler Hintergrund, weiße Schrift,
                                   Button im Social-Media-Stil (Gold-Outline)
   ----------------------------------------------------------------------- */
/* Spiegelung nur ab Desktop – auf Mobil bleibt das Bild oben gestapelt */
@media (min-width: 992px) {
  /* nur die direkte Bild/Text-Zeile spiegeln, nicht verschachtelte Rows */
  .section-split--image-right > .container-fluid > .row {
    flex-direction: row-reverse;
  }
  /* Kicker bei gespiegeltem Layout auf die andere Seite (links) holen */
  .section-split--image-right .section-split__content .section-kicker {
    right: auto;
    left: clamp(3.4rem, 5vw, 6rem);
  }
}

.section-split--dark {
  background: var(--color-black);
  color: var(--color-white);
}
.section-split--dark .section-split__content h2 {
  color: var(--color-white);
}
.section-split--dark .section-kicker {
  color: var(--color-gold);
}
.section-split--dark .btn-outline-brand {
  color: var(--color-gold);
  border-color: var(--color-gold);
  background: transparent;
}
.section-split--dark .btn-outline-brand:hover,
.section-split--dark .btn-outline-brand:focus {
  background: var(--color-gold);
  border-color: var(--color-gold);
  color: var(--color-white);
}

/* ===================================================================
   Social-Media-Slider – responsiv (Desktop 4 / Tablet 2 / Mobil 1),
   Schrittweite = sichtbare Anzahl. Karten: Eck-Badge (Ruhe) +
   gold-transparentes Overlay mit zentriertem Logo (Hover).
   =================================================================== */
.social-slider {
  --per: 4;
  position: relative;
  margin-top: 1.75rem;
  display: flex;
  align-items: center;
  gap: .75rem;
}
@media (max-width: 991.98px) { .social-slider { --per: 2; } }
@media (max-width: 575.98px) { .social-slider { --per: 1; } }

.social-slider__viewport {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
}
.social-slider__track {
  display: flex;
  transition: transform .55s cubic-bezier(.4, 0, .2, 1);
  will-change: transform;
}
.social-slide {
  flex: 0 0 calc(100% / var(--per));
  max-width: calc(100% / var(--per));
  padding: 0 .5rem;
  box-sizing: border-box;
}

.ms-card {
  position: relative;
  display: block;
  overflow: hidden;
  text-decoration: none;
}
.ms-card img {
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  display: block;
}
/* Eck-Badge im Ruhezustand */
.ms-card__badge {
  position: absolute;
  right: .65rem;
  bottom: .65rem;
  z-index: 2;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, .62);
  color: #fff;
  font-size: .95rem;
  transition: opacity .35s ease;
}
/* Gold-transparentes Overlay + zentriertes Logo bei Hover/Fokus */
.ms-card__overlay {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(165, 122, 44, .82);
  color: #fff;
  font-size: clamp(2.2rem, 3vw, 3rem);
  opacity: 0;
  transition: opacity .35s ease;
}
.ms-card:hover .ms-card__overlay,
.ms-card:focus-visible .ms-card__overlay {
  opacity: 1;
}
.ms-card:hover .ms-card__badge,
.ms-card:focus-visible .ms-card__badge {
  opacity: 0;
}

/* Pfeile – konturlos, untereinander rechts neben den Bildern (Hero-Stil) */
.social-slider__nav {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.social-slider__arrow {
  width: 2.6rem;
  height: 2.6rem;
  border: 0;
  background: transparent;
  color: rgba(255, 255, 255, .85);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.9rem;
  line-height: 1;
  cursor: pointer;
  transition: color .25s ease, opacity .25s ease;
}
.social-slider__arrow:hover {
  color: var(--color-gold);
}
.social-slider__arrow[disabled] {
  opacity: .25;
  cursor: default;
  pointer-events: none;
}
/* Wenn alle Elemente sichtbar sind: Pfeile ausblenden */
.social-slider.is-static .social-slider__nav {
  display: none;
}

/* Hinweis-/Disclaimer-Zeile in der Preisliste (z. B. „zzgl. Haarschnitt …“) */
.price-list__note {
  margin: 0 0 2rem;
  font-size: 1rem;
  line-height: 1.4;
  color: rgba(0, 0, 0, .55);
}

/* ===================================================================
   Galerie – klickbare Thumbnails (Button) mit Gold-Hover-Overlay + Lupe,
   „Weitere laden" in 8er-Schritten, plus Lightbox für Bild/Video.
   =================================================================== */
.gallery-item {
  position: relative;
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  overflow: hidden;
  cursor: pointer;
  line-height: 0;
}
.gallery-item img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  display: block;
}
.gallery-item__overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(165, 122, 44, .82);
  color: #fff;
  font-size: clamp(1.6rem, 2.4vw, 2.2rem);
  opacity: 0;
  transition: opacity .35s ease;
}
.gallery-item:hover .gallery-item__overlay,
.gallery-item:focus-visible .gallery-item__overlay {
  opacity: 1;
}
.gallery-item.is-hidden { display: none; }

.gallery-more {
  text-align: center;
  margin-top: 2.5rem;
}
.section-gallery .gallery-more__btn {
  color: var(--color-gold);
}
.section-gallery .gallery-more__btn:hover,
.section-gallery .gallery-more__btn:focus {
  background: var(--color-gold);
  border-color: var(--color-gold);
  color: var(--color-black);
}

/* Lightbox */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(1rem, 4vw, 3rem);
  background: rgba(2, 2, 2, .92);
}
.lightbox[hidden] { display: none; }
.lightbox__stage {
  display: flex;
  max-width: 92vw;
  max-height: 86vh;
}
.lightbox__stage img,
.lightbox__stage video {
  max-width: 92vw;
  max-height: 86vh;
  width: auto;
  height: auto;
  display: block;
  object-fit: contain;
}
.lightbox__close {
  position: absolute;
  top: clamp(1rem, 3vw, 2rem);
  right: clamp(1rem, 3vw, 2rem);
  width: 3rem;
  height: 3rem;
  border: 0;
  background: transparent;
  color: rgba(255, 255, 255, .85);
  font-size: 2rem;
  line-height: 1;
  cursor: pointer;
  transition: color .25s ease;
}
.lightbox__close:hover { color: var(--color-gold); }

/* Lightbox – Vor/Zurück-Pfeile (konturlos, Hero-Stil) */
.lightbox__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  width: 3.5rem;
  height: 3.5rem;
  border: 0;
  background: transparent;
  color: rgba(255, 255, 255, .85);
  font-size: 2.4rem;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: color .25s ease;
}
.lightbox__nav:hover { color: var(--color-gold); }
.lightbox__nav--prev { left: clamp(.5rem, 2vw, 2rem); }
.lightbox__nav--next { right: clamp(.5rem, 2vw, 2rem); }
@media (max-width: 575.98px) {
  .lightbox__nav { font-size: 1.9rem; width: 2.8rem; height: 2.8rem; }
}

/* Mehr Innenabstand zwischen vertikalem Kicker und Text in der Split-Section
   (nur Desktop – auf Mobil ist der Kicker horizontal über dem Text). */
@media (min-width: 992px) {
  .section-split__content {
    padding-right: clamp(6rem, 10vw, 9.5rem);
  }
  .section-split--image-right .section-split__content {
    padding-right: clamp(4rem, 8vw, 7rem);
    padding-left: clamp(6rem, 10vw, 9.5rem);
  }
}

/* Kicker: auf hellem Hintergrund dunkles Gold (Kontrast), auf dunklem das
   hellere Gold (steckt in den Basis-Regeln). */
.section-split:not(.section-split--dark) .section-kicker,
.section-services .section-kicker {
  color: var(--color-gold-dark);
}

/* ===================================================================
   Kontakt-Inhalt jetzt in heller Split-Section (statt Gold-Panel):
   Farben von Weiß auf dunkel/gold umstellen.
   =================================================================== */
.contact-content {
  max-width: none;
  margin: 0;
}
.contact-address,
.contact-hours-wrap h3,
.opening-hours {
  color: var(--color-black);
}
.contact-address a,
.contact-map-link,
.contact-social a {
  color: var(--color-gold-dark);
  text-decoration: none;
}
.contact-address a:hover,
.contact-map-link:hover,
.contact-social a:hover {
  color: var(--color-black);
}

/* ===================================================================
   Footer – Navigation (Impressum/Datenschutz) + Social-Icons,
   zweite Zeile (Credit) mit goldener Trennlinie (Containerbreite).
   =================================================================== */
.footer-right {
  display: flex;
  align-items: center;
  gap: clamp(1.25rem, 3vw, 2.5rem);
  flex-wrap: wrap;
}
.footer-social {
  display: flex;
  align-items: center;
  gap: .9rem;
}
.footer-social a {
  color: var(--color-gold);
  font-size: 1.15rem;
  line-height: 1;
  transition: color .25s ease;
}
.footer-social a:hover { color: var(--color-white); }
.site-footer nav a:hover { color: var(--color-gold); }

.footer-credit {
  border-top: 1px solid var(--color-gold);
  margin-top: 1.5rem;
  padding-top: 1.2rem;
}
.footer-credit p {
  margin: 0;
  font-size: .82rem;
  letter-spacing: .02em;
  color: rgba(247, 244, 239, .8);
}
.footer-credit a {
  color: var(--color-gold);
  text-decoration: none;
  text-transform: none;
  letter-spacing: 0;
  font-size: inherit;
}
.footer-credit a:hover { text-decoration: underline; }

/* ===================================================================
   Kontakt: „Termin online buchen" als Button + DSGVO-Consent-Map.
   Iframe lädt erst nach Zustimmung (sessionStorage); davor Kartenbild
   mit dunklem Layer und Datenschutztext.
   =================================================================== */
.contact-booking {
  margin-top: 1.6rem;
}

.consent-container {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  min-height: 560px;
  background: url('../img/karte.jpg') center / cover no-repeat #000000;
  color: #fff;
  overflow: hidden;
}
.consent-container::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(2, 2, 2, .72);
  z-index: 0;
}
.consent-container.is-loaded::before { display: none; }
.consent-inhalt {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 36rem;
  padding: 2rem clamp(1.5rem, 4vw, 3rem);
  text-align: center;
}
.consent-container p {
  margin: 0 0 1.6rem;
  color: #fff;
  font-size: .95rem;
  line-height: 1.6;
}
.consent-container a {
  color: var(--color-gold);
  text-decoration: underline;
}
.accept-consent {
  border: 1px solid var(--color-gold);
  background: var(--color-gold);
  color: var(--color-black);
  padding: .9rem 1.6rem;
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
  transition: background-color .25s ease, color .25s ease;
}
.accept-consent:hover,
.accept-consent:focus {
  background: transparent;
  color: var(--color-gold);
}
.consent-container iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

/* Kontakt: rechte (Nicht-Kicker-)Seite schmaler padden, damit Adresse +
   Öffnungszeiten nebeneinander Platz haben; Uhrzeiten nicht umbrechen. */
@media (min-width: 992px) {
  #contact .section-split__content {
    padding-right: clamp(2rem, 3.5vw, 3.5rem);
  }
}
#contact .opening-hours {
  grid-template-columns: auto 1fr;
  gap: .15rem 1rem;
}
#contact .opening-hours dd {
  white-space: nowrap;
}

/* ===================================================================
   Responsive-Fix 992–1199 px (lg): Container ist hier noch fluid (kein
   zentriertes max-width), und .section-inner setzt horizontal 0 → Inhalt
   klebt am Rand. Hier explizit Seitenabstand geben.
   =================================================================== */
@media (min-width: 992px) and (max-width: 1199.98px) {
  .container-xl,
  .section-inner {
    padding-left: clamp(1.75rem, 4vw, 3rem);
    padding-right: clamp(1.75rem, 4vw, 3rem);
  }
}

/* Kontakt: Adresse + Öffnungszeiten passen erst ab ~1400 px nebeneinander
   in die halbe Spalte. Darunter sauber untereinander stapeln (sonst
   überlappen die Uhrzeiten mit der Karte). */
@media (max-width: 1399.98px) {
  #contact .contact-info-row > [class*="col-"] {
    flex: 0 0 100%;
    max-width: 100%;
  }
}

/* Kontakt-Feinschliff: Öffnungszeiten-Schriftgewicht & Überschrift */
.opening-hours dt {
  font-weight: inherit;
}
.contact-hours-wrap h3 {
  font-weight: 400;
  text-transform: none;
}

/* Beim Umbruch (mobil/gestapelt) soll die Karte UNTER dem Text erscheinen */
@media (max-width: 991.98px) {
  #contact .section-split__map {
    order: 1;
  }
}

/* Beim Umbruch (Öffnungszeiten unter der Adresse) etwas mehr Abstand oben */
@media (max-width: 1399.98px) {
  #contact .contact-hours-wrap {
    margin-top: 1.5rem;
  }
}

/* Kalender-Icon vor den Termin-Buttons: Abstand Icon↔Text */
.btn-booking,
.btn-outline-brand {
  gap: .55rem;
}

/* Social-Eck-Badge größer */
.ms-card__badge {
  width: 3.5rem;
  height: 3.5rem;
  font-size: 1.85rem;
}

/* Social-Buttons auf kleinen Screens kompakter */
@media (max-width: 575.98px) {
  .btn-social {
    min-height: 2.25rem;
    padding: 0.05rem 0.5rem;
    font-size: 1rem;
    gap: .55rem;
  }
}

/* ===================================================================
   Unterseiten (Impressum/Datenschutz): schmaler Vollbreite-Hero mit
   Overlay (wie Startseite, aber begrenzte Höhe) + heller Textbereich.
   =================================================================== */
.section-subhero {
  position: relative;
  width: 100%;
  height: 400px;
  max-height: 400px;
  background: url('../img/hero-2.jpg') center/cover no-repeat;
}
.section-subhero::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(0,0,0,.5), rgba(0,25,23,.4)),
    linear-gradient(0deg, rgba(0,0,0,.45), rgba(0,0,0,.18));
}
@media (max-width: 575.98px) {
  .section-subhero { height: 280px; max-height: 280px; }
}

.section-legal {
  background: var(--color-paper);
  color: var(--color-black);
  padding: clamp(3rem, 6vw, 5.5rem) 0 clamp(4rem, 8vw, 7rem);
}
.legal { max-width: 60rem; }
.legal h1 {
  font-family: var(--font-text);
  font-weight: 300;
  font-size: clamp(2.2rem, 5vw, 3.4rem);
  color: var(--color-gold-dark);
  margin: 0 0 1.75rem;
}
.legal h2 {
  font-size: clamp(1.2rem, 2.2vw, 1.55rem);
  font-weight: 600;
  margin: 2.5rem 0 .6rem;
}
.legal h3 {
  font-size: 1.08rem;
  font-weight: 600;
  margin: 1.6rem 0 .4rem;
}
.legal p,
.legal li {
  font-size: 1rem;
  line-height: 1.7;
  margin: 0 0 1rem;
}
.legal ul { margin: 0 0 1rem; padding-left: 1.3rem; }
.legal li { margin-bottom: .4rem; }
.legal a { color: var(--color-gold-dark); text-decoration: underline; }
.legal a:hover { color: var(--color-black); }

/* Burger-Menü: Linien fahren bei Hover/Fokus auf volle Breite */
.menu-toggle__line {
  transition: width .28s cubic-bezier(.4, 0, .2, 1), background-color .25s ease;
}
.menu-toggle:hover .menu-toggle__line,
.menu-toggle:focus-visible .menu-toggle__line {
  width: 1.9rem;
}
.menu-toggle:hover {
  color: var(--color-white);
}

/* Skip-Link-Ziele (fokussierbare Container) ohne störenden Vollflächen-Rahmen –
   die Fokusverlagerung + das Scrollen sind der Indikator. */
.section-intro[tabindex="-1"]:focus,
.section-legal[tabindex="-1"]:focus {
  outline: none;
}

/* Auto-zugeschnittene/responsive Bilder: height:auto, damit CSS-aspect-ratio die HTML-height/width-Attribute überstimmt */
.gallery-grid img{height:auto}
.ms-card img{aspect-ratio:3/4;height:auto;object-fit:cover}

/* Footer-Textlinks: sanfter Farb-Übergang beim Hover */
.site-footer a{transition:color .25s}

/* Sehr schmale Displays (< 430px): Header-Button + Innenabstände kompakter */
@media (max-width: 429.98px) {
  .site-header__actions .btn-booking {
    min-height: 2.2rem;
    padding: .4rem 0.4rem;
  }
  .site-header__inner {
    gap: 1.2rem;
    padding: 1.5rem clamp(0.7rem, 3vw, 3rem) 0;
  }
}

/* Rechtstext-Überschriften: normale Schriftstärke */
.legal h2{font-weight:400}

/* Rechtstext-Überschriften gold wie im RTE-Editor (h2/h3/h4 waren schwarz) */
.legal h1,.legal h2,.legal h3,.legal h4{color:var(--color-gold-dark)}

/* Ankündigungsband (Neueröffnung) – volle Breite oben, Gold; verschwindet wenn Element verborgen (:empty) */
:root{--announcement-h:2.5rem}
.announcement-bar{position:absolute;top:0;left:0;right:0;height:var(--announcement-h);background:var(--color-gold);color:#1c1400;display:flex;align-items:center;justify-content:center;overflow:hidden;z-index:1041}
.announcement-bar:empty{display:none}
.announcement-bar__inner{display:inline-flex;align-items:center;gap:.45rem;white-space:nowrap;padding:0 1rem;font-size:clamp(.76rem,2.7vw,.92rem);font-weight:400;letter-spacing:.02em;text-decoration:none;color:#1c1400;max-width:100%}
.announcement-bar__inner:hover{color:#000;text-decoration:underline;text-underline-offset:.2em}
.announcement-bar__inner strong{font-weight:700}
.announcement-bar__star{color:#5a3d00}
.announcement-bar:not(:empty)+.site-header{top:var(--announcement-h)}

/* Kontakt: Parkhinweis unter der Adresse */
.contact-parking{margin:.9rem 0 1.4rem;line-height:1.55}
.contact-parking p{margin:0}