/* Fluid layer – Haarstudio Starke-Stassi
   Direkte Rückmeldung, federnde Bewegung, Materialien, Typografie.
   Wird nach den Seitenstilen geladen und verfeinert sie. */

:root{
  /* Kritisch gedämpfte Feder (kein Überschwingen) und eine leicht federnde Variante */
  --spring: cubic-bezier(.22,1,.36,1);
  --spring-soft: cubic-bezier(.34,1.32,.64,1);
  --press: 90ms;
  --settle: 420ms;
}

/* ---------- Typografie ---------- */
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{font-kerning:normal;text-rendering:optimizeLegibility;font-optical-sizing:auto}
p,li{text-wrap:pretty}
h1{letter-spacing:-.022em;line-height:.96}
h2{letter-spacing:-.016em;line-height:1.02}
h3{letter-spacing:-.005em}
.kicker{letter-spacing:.01em}
.stats b,.phone,.motto{letter-spacing:-.01em}
small,.hb-tip,.note,.s{letter-spacing:.005em}

/* ---------- Touch: sofortige Reaktion ---------- */
a,button,label,.chip,.btn,summary{-webkit-tap-highlight-color:transparent;touch-action:manipulation}

/* Rückmeldung beim Drücken: sofort, beim Loslassen federnd zurück */
.btn,.menu-toggle,.copy,.chip span,.mat-tabs button,.faq-item .pm,.tcard,.svc,.hb-banner .go,.hb-drop,.mobile-bar a{
  transition-property:transform,background-color,border-color,color,box-shadow,opacity;
  transition-duration:var(--settle);
  transition-timing-function:var(--spring);
}
.btn:active,.menu-toggle:active,.copy:active,.mobile-bar a:active,.hb-banner a:active .go{transform:scale(.96);transition-duration:var(--press);transition-timing-function:ease-out}
.chip:active span,.mat-tabs button:active,.faq-item button:active .pm{transform:scale(.95);transition-duration:var(--press);transition-timing-function:ease-out}
.tcard:active,.svc:active,.hb-drop:active{transform:scale(.985);transition-duration:var(--press);transition-timing-function:ease-out}

/* Hover-Effekte nur bei echter Maus, kein „klebender“ Hover auf dem Handy */
@media (hover:none){
  .btn:hover,.tcard:hover,.svc:hover,.hb-banner a:hover .go{transform:none;box-shadow:none}
  .zoom:hover img,.arches figure:hover img{transform:none}
  .circles figure:hover img{transform:scale(1.1)}
}
@media (hover:hover){
  .btn:hover{transform:translateY(-1px)}
  .zoom img,.arches img{transition:transform 1.1s var(--spring)}
}

/* Bilder: Ruhe statt Dauerbewegung */
.float-card{animation:none}

/* ---------- Material: Kopfzeile ---------- */
.site-header{
  background:rgba(252,248,247,.72);
  -webkit-backdrop-filter:saturate(180%) blur(20px);
  backdrop-filter:saturate(180%) blur(20px);
  border-bottom-color:transparent;
  transition:box-shadow .3s ease,background-color .3s ease,border-color .3s ease;
}
/* Statt harter Linie: weicher Übergang, sobald Inhalt darunter liegt */
.site-header.compact{
  background:rgba(252,248,247,.78);
  border-bottom-color:rgba(234,214,216,.6);
  box-shadow:0 10px 24px -20px rgba(43,29,32,.45);
}
.site-header .wrap,.brand .fig,.brand .word{transition-timing-function:var(--spring);transition-duration:var(--settle)}

/* ---------- Mobiles Menü als Blatt, verankert am Menü-Knopf ---------- */
@media (max-width:1320px){
  .site-header.open nav.main{
    background:var(--paper);
    box-shadow:0 30px 60px -30px rgba(43,29,32,.45);
    border-radius:0 0 24px 24px;
    transform-origin:top right;
    animation:sheet-in var(--settle) var(--spring) both;
  }
  .site-header.open nav.main a:not(.btn){animation:item-in .5s var(--spring) both}
  .site-header.open nav.main a:nth-child(2){animation-delay:20ms}
  .site-header.open nav.main a:nth-child(3){animation-delay:40ms}
  .site-header.open nav.main a:nth-child(4){animation-delay:60ms}
  .site-header.open nav.main a:nth-child(5){animation-delay:80ms}
  .site-header.open nav.main a:nth-child(6){animation-delay:100ms}
  .site-header.open nav.main a:nth-child(7){animation-delay:120ms}
}
@keyframes sheet-in{from{opacity:0;transform:translateY(-10px) scale(.98)}to{opacity:1;transform:none}}
@keyframes item-in{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
/* Abgedunkelter Hintergrund hinter dem offenen Menü */
.menu-scrim{position:fixed;inset:0;z-index:40;background:rgba(43,29,32,.28);opacity:0;pointer-events:none;transition:opacity .3s ease}
body.menu-open .menu-scrim{opacity:1;pointer-events:auto}
body.menu-open .site-header{background:rgba(252,248,247,.97)}
body.menu-open{overflow:hidden}

/* ---------- Haararten: horizontale Leiste am Handy rastet ein ---------- */
@media (max-width:860px){
  .mat-tabs{scroll-snap-type:x mandatory;scroll-padding-inline:2px;-webkit-mask-image:linear-gradient(90deg,#000 85%,transparent);mask-image:linear-gradient(90deg,#000 85%,transparent)}
  .mat-tabs button{scroll-snap-align:start}
}
.mat-panel.swap{animation:swap .5s var(--spring)}
@keyframes swap{from{opacity:.2;transform:translateY(10px) scale(.99)}to{opacity:1;transform:none}}

/* FAQ: Antwort öffnet federnd */
.faq-item .a{transition:grid-template-rows var(--settle) var(--spring)}
.faq-item .pm{transition-duration:var(--settle)}

/* ---------- Formular: Schritte gleiten in Richtung der Bewegung ---------- */
.hb-form fieldset.enter-fwd{animation:step-fwd .48s var(--spring) both}
.hb-form fieldset.enter-back{animation:step-back .48s var(--spring) both}
@keyframes step-fwd{from{opacity:0;transform:translateX(28px)}to{opacity:1;transform:none}}
@keyframes step-back{from{opacity:0;transform:translateX(-28px)}to{opacity:1;transform:none}}
.hb-steps li::before{transition:background-color .3s var(--spring),border-color .3s var(--spring),color .3s var(--spring),transform .3s var(--spring-soft)}
.hb-steps li.on::before{transform:scale(1.08)}
.hb-f input,.hb-f select,.hb-f textarea{transition:border-color .2s ease,box-shadow .2s ease}
.hb-f.err input,.hb-f.err select,.hb-f.err textarea{animation:nudge .32s var(--spring)}
@keyframes nudge{0%{transform:translateX(0)}30%{transform:translateX(-5px)}60%{transform:translateX(4px)}100%{transform:none}}
.hb-thumb{animation:pop .45s var(--spring-soft) both}
@keyframes pop{from{opacity:0;transform:scale(.7)}to{opacity:1;transform:none}}
.hb-done:not([hidden]) .ok{animation:pop .55s var(--spring-soft) both}

/* ---------- Mobile Aktionsleiste (Material) ---------- */
.mobile-bar{display:none}
@media (max-width:860px){
  .mobile-bar{
    display:flex;gap:10px;position:fixed;left:12px;right:12px;bottom:calc(12px + env(safe-area-inset-bottom,0px));z-index:45;
    padding:8px;border-radius:999px;
    background:rgba(252,248,247,.74);
    -webkit-backdrop-filter:saturate(180%) blur(20px);backdrop-filter:saturate(180%) blur(20px);
    border:1px solid rgba(255,255,255,.7);
    box-shadow:0 18px 40px -18px rgba(43,29,32,.5),inset 0 1px 0 rgba(255,255,255,.8);
    transform:translateY(140%);opacity:0;
    transition:transform .5s var(--spring),opacity .3s ease;
  }
  .mobile-bar.show{transform:none;opacity:1}
  .mobile-bar a{flex:1 1 0;display:flex;align-items:center;justify-content:center;gap:8px;min-height:48px;border-radius:999px;font:600 15.5px var(--sans);text-decoration:none;color:var(--wine);background:rgba(255,255,255,.7)}
  .mobile-bar a.pri{background:var(--red);color:#fff}
  .mobile-bar svg{width:18px;height:18px}
  footer{padding-bottom:calc(84px + env(safe-area-inset-bottom,0px))}
}

/* ---------- Barrierefreiheit ---------- */
@media (prefers-reduced-motion:reduce){
  .site-header.open nav.main,.site-header.open nav.main a,.hb-form fieldset.enter-fwd,.hb-form fieldset.enter-back,.mat-panel.swap,.hb-thumb,.hb-done .ok{animation:fade .2s ease both!important}
  .mobile-bar{transition:opacity .2s ease!important;transform:none!important}
  .btn:active,.chip:active span,.tcard:active,.svc:active{transform:none!important}
}
@keyframes fade{from{opacity:0}to{opacity:1}}
@media (prefers-reduced-transparency:reduce){
  .site-header,.site-header.compact,.site-header.open nav.main,.mobile-bar{background:var(--paper);-webkit-backdrop-filter:none;backdrop-filter:none}
}
@media (prefers-contrast:more){
  .site-header,.mobile-bar{background:#fff;border-color:var(--ink)}
  .chip span,.hb-f input,.hb-f select,.hb-f textarea{border-color:var(--ink-soft)}
}