/* Regina Beauty & Care – gemeinsame Styles. Layout-Details stehen wie in der Vorlage inline im HTML. */

/* Schriften lokal (keine Verbindung zu Google) */
/* Bodoni Moda – latin-ext */
@font-face {
  font-family: 'Bodoni Moda';
  font-style: normal;
  font-weight: 400 500;
  font-display: swap;
  src: url(../fonts/bodoni-moda-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Bodoni Moda – latin */
@font-face {
  font-family: 'Bodoni Moda';
  font-style: normal;
  font-weight: 400 500;
  font-display: swap;
  src: url(../fonts/bodoni-moda-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Hanken Grotesk – latin-ext */
@font-face {
  font-family: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url(../fonts/hanken-grotesk-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Hanken Grotesk – latin */
@font-face {
  font-family: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url(../fonts/hanken-grotesk-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Pinyon Script – latin-ext */
@font-face {
  font-family: 'Pinyon Script';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/pinyon-script-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Pinyon Script – latin */
@font-face {
  font-family: 'Pinyon Script';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/pinyon-script-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Aus der Vorlage (Website-B.dc.html) */
body{margin:0;background:#F5ECE8}
*{box-sizing:border-box}
a{color:#B4536D}a:hover{color:#8A3A51}
a:focus-visible,button:focus-visible,input:focus-visible{outline:2px solid #B4536D;outline-offset:3px}
.pic{position:relative;overflow:hidden;background:#E9D3D0}
.pic>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.ov-l{margin-left:-140px}.ov-r{margin-right:-140px}
/* Bewegung: ein Auftakt im Hero, sanftes Einzoomen beim Scrollen, Rückmeldung bei Klicks */
@keyframes heroImg{from{scale:1.08}to{scale:1}}
@keyframes heroIn{from{opacity:0;translate:0 18px}to{opacity:1;translate:0 0}}
@keyframes zoomIn{from{scale:1.12}to{scale:1}}
@keyframes riseIn{from{opacity:0;translate:0 48px}to{opacity:1;translate:0 0}}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
.hero-img{animation:heroImg 2.6s cubic-bezier(.2,.7,.2,1) both}
.in{animation:heroIn .9s cubic-bezier(.2,.7,.2,1) both}
.in1{animation-delay:.25s}.in2{animation-delay:.45s}.in3{animation-delay:.6s}.in4{animation-delay:.75s}
.row-in{animation:fadeIn .35s ease both}
a,button{transition:filter .2s ease,background-color .2s ease,color .2s ease,border-color .2s ease}
a[style*="999px"]:hover,button[style*="999px"]:hover{filter:brightness(.9)}
a[style*="999px"]:active,button[style*="999px"]:active{scale:.97}
.sel-bar{transition:left .4s cubic-bezier(.2,.7,.2,1),width .4s cubic-bezier(.2,.7,.2,1)}
@media (prefers-reduced-motion:reduce){
*,*::before,*::after{animation:none!important;transition:none!important}
}
@media (max-width:900px){.ov-l,.ov-r{margin:-64px 16px 0}.navlinks{display:none}}
/* Ergänzt: Inline-display der Navigation überstimmen; Fieldsets nicht breiter als der Bildschirm (Tagesleiste scrollt) */
@media (max-width:900px){.navlinks{display:none!important}}
fieldset{min-width:0}

/* Scroll-Animationen: booking.js setzt .is-in, sobald ein Element sichtbar wird.
   Ohne JavaScript (kein .js an <html>) bleibt alles sofort sichtbar. */
.js .zoom>img{scale:1.12}
.js .zoom.is-in>img{animation:zoomIn 1.8s cubic-bezier(.2,.7,.2,1) both}
.js .rise{opacity:0}
.js .rise.is-in{animation:riseIn .9s cubic-bezier(.2,.7,.2,1) .15s both}
@media (prefers-reduced-motion:reduce){.js .zoom>img{scale:1}.js .rise{opacity:1}}

/* Buchung */
.hp{position:absolute!important;left:-10000px;top:auto;width:1px;height:1px;overflow:hidden}
.bk-spin{display:inline-block;width:18px;height:18px;border:2px solid #E2CBC7;border-top-color:#B4536D;border-radius:50%;animation:bkspin .8s linear infinite;vertical-align:-3px}
@keyframes bkspin{to{rotate:360deg}}
@media (prefers-reduced-motion:reduce){.bk-spin{animation:bkspin 1.6s linear infinite!important}}
.bk-days{scrollbar-width:thin}
button[disabled]{opacity:1}