/* Hero mit Holz-Abdeckung, Schere aus dem «M», Öffnungszeiten */

/* ---------- Hero ---------- */
.hz { position: relative; height: 100vh; height: 100svh; min-height: 540px; background: #0d0907; }
.hz-sticky { position: relative; height: 100%; overflow: hidden; contain: layout paint; }
.hz-defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.hz-photo { position: absolute; inset: 0; transform: scale(1.12); will-change: transform; }
.hz-photo img { width: 100%; height: 100%; object-fit: cover; object-position: center 55%; filter: saturate(.9) brightness(.82); }
.hz-shade { position: absolute; inset: 0; opacity: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(13,9,7,.62) 0%, rgba(13,9,7,.38) 38%, rgba(13,9,7,.93) 100%), linear-gradient(90deg, rgba(13,9,7,.82), rgba(13,9,7,.12) 72%); }

/* Abdeckung aus zwei gleichen Hälften, die per clip-path entlang des Schnitts getrennt werden */
.hz-half { position: absolute; inset: 0; will-change: transform, clip-path; }
.hz-half.top { clip-path: polygon(0 0, 100% 0, 100% 50%, 0 50%); transform-origin: 0% 50%; }
.hz-half.bot { clip-path: polygon(0 50%, 100% 50%, 100% 100%, 0 100%); transform-origin: 0% 50%; }
.hz-cover {
  --L: min(820px, 60vw, 112svh); --LH: calc(var(--L) * .2461);
  position: absolute; inset: 0; background-color: #1a110b;
  background-image: url(/img/holz.jpg); background-image: image-set(url(/img/holz.webp) type('image/webp'), url(/img/holz.jpg) type('image/jpeg'));
  background-size: cover; background-position: center;
}
.hz-cover::before { content: ''; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse 60% 45% at 50% 48%, rgba(212,166,74,.13), transparent 70%), radial-gradient(ellipse at 50% 50%, transparent 35%, rgba(0,0,0,.62) 100%); }
@media (max-width: 760px) { .hz-cover { --L: min(82vw, 420px); } }

/* Schriftzug samt Schere mittig: um 53.5 Logo-Einheiten nach links versetzt (siehe hero.js) */
.hz-logo { position: absolute; left: 50%; top: 50%; width: var(--L); height: var(--LH); margin: calc(var(--LH) / -2) 0 0 calc(var(--L) * -.5363); overflow: visible;
  filter: drop-shadow(0 18px 26px rgba(0,0,0,.55)); opacity: 0; transform: translateY(22px) scale(.96); }
.hz-go .hz-logo { animation: hzLogoIn 1.3s .3s cubic-bezier(.2,.75,.2,1) forwards; }
@keyframes hzLogoIn { 0% { opacity: 0; transform: translateY(22px) scale(.96); filter: blur(8px) drop-shadow(0 18px 26px rgba(0,0,0,.55)); } 100% { opacity: 1; transform: none; filter: blur(0) drop-shadow(0 18px 26px rgba(0,0,0,.55)); } }
.hz-shine { transform: translateX(0); }
.hz-go .hz-shine { animation: hzShine 6.5s 1.9s cubic-bezier(.5,0,.3,1) infinite; }
@keyframes hzShine { 0% { transform: translateX(0); } 22%, 100% { transform: translateX(2000px); } }

.hz-head { position: absolute; left: 0; right: 0; bottom: calc(50% + var(--LH) / 2 + clamp(24px, 4.2vh, 46px)); display: grid; justify-items: center; padding: 0 16px; }
.hz-welcome { display: flex; align-items: center; gap: 18px; }
.hz-wtext { font: 600 clamp(11.5px, 1.1vw, 14px)/1 var(--sans); letter-spacing: .38em; text-transform: uppercase; color: #f3ead9; opacity: 0; filter: blur(12px); transform: scale(1.4); }
.hz-bar { width: clamp(36px, 8vw, 120px); height: 1px; background: linear-gradient(90deg, transparent, var(--gold)); opacity: 0; position: relative; }
.hz-bar.r { background: linear-gradient(90deg, var(--gold), transparent); }
.hz-bar::after { content: ''; position: absolute; top: -3px; width: 7px; height: 7px; background: var(--gold); transform: rotate(45deg); right: -3px; }
.hz-bar.r::after { right: auto; left: -3px; }
.hz-tag { position: absolute; left: 0; right: 0; top: calc(50% + var(--L) * .2803 + clamp(24px, 4vh, 44px)); text-align: center; font: 600 clamp(11px, 1vw, 13px)/1 var(--sans); letter-spacing: .36em; text-transform: uppercase; color: var(--gold); opacity: 0; }
.hz-go .hz-wtext { animation: hzBlur 1.3s .1s cubic-bezier(.2,.7,.2,1) forwards; }
.hz-go .hz-bar { animation: hzBarL 1.1s .5s cubic-bezier(.2,.7,.2,1) forwards; }
.hz-go .hz-bar.r { animation-name: hzBarR; }
.hz-go .hz-tag { animation: hzUp 1s 2.1s ease forwards; }
@keyframes hzBlur { to { opacity: 1; filter: blur(0); transform: scale(1); } }
@keyframes hzBarL { from { opacity: 0; transform: translateX(-60px); } to { opacity: 1; transform: none; } }
@keyframes hzBarR { from { opacity: 0; transform: translateX(60px); } to { opacity: 1; transform: none; } }
@keyframes hzUp { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@media (max-width: 560px) { .hz-welcome { gap: 10px; } .hz-wtext { letter-spacing: .26em; } .hz-tag { letter-spacing: .26em; } }

/* Schnittlinie mit Glanz, Funken und Haarschnipsel */
.hz-line { position: absolute; top: 50%; left: 100%; height: 2px; width: 0; margin-top: -1px; pointer-events: none; opacity: 0;
  background: linear-gradient(90deg, #fff7e0, var(--gold-2) 6%, rgba(212,166,74,.7) 55%, rgba(212,166,74,.3));
  box-shadow: 0 0 10px rgba(240,206,128,.85), 0 0 26px rgba(212,166,74,.45); }
.hz-sparks { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.hz-spark { position: absolute; width: 3px; height: 3px; border-radius: 50%; background: #f6dda0; box-shadow: 0 0 8px #e9c46f; animation: hzSpark .9s ease-out forwards; }
.hz-spark.fall { width: 15px; height: 1.8px; background: linear-gradient(90deg, rgba(240,220,174,0), #f0dcae 45%, #c9a46a); animation-timing-function: cubic-bezier(.45,.05,.85,.6) !important; }
.hz-spark.fall:nth-child(3n) { width: 19px; background: linear-gradient(90deg, rgba(160,120,70,0), #a9845a); }
.hz-spark.fall:nth-child(4n) { width: 9px; }
.hz-spark.hair { width: 12px; height: 1.5px; border-radius: 1px; background: linear-gradient(90deg, rgba(243,217,163,0), #ead3a3); box-shadow: none; animation-timing-function: cubic-bezier(.3,.2,.6,1); }
@keyframes hzSpark { to { transform: translate(var(--dx), var(--dy)) rotate(var(--r)); opacity: 0; } }

/* Schere (Overlay über allem) */
.hz-sc { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; opacity: 0; }
.hz-sc use { pointer-events: none; }
.hz-sc .sc-metal { opacity: var(--m, 0); }
.hz-sc .sc-grind, .hz-sc .sc-hole { opacity: calc(1 - var(--m, 0)); }
#scTrail use { opacity: 0; }
.hz-rz { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; opacity: 0; }
@media (pointer: coarse) { #rzWrap { filter: none; } }

.hz-hint { position: absolute; left: 0; right: 0; bottom: max(26px, env(safe-area-inset-bottom)); display: grid; justify-items: center; gap: 12px; font: 600 10.5px/1 var(--sans); letter-spacing: .32em; text-transform: uppercase; color: rgba(243,234,217,.62); pointer-events: none; }
.hz-hint > * { opacity: 0; }
.hz-go .hz-hint > * { animation: hzUp 1s 2.4s ease forwards; }
.hz-hint i { width: 1px; height: 44px; background: linear-gradient(var(--gold), transparent); position: relative; overflow: hidden; }
.hz-hint i::after { content: ''; position: absolute; left: 0; top: -40%; width: 1px; height: 40%; background: #fff; animation: hzHint 1.8s ease-in-out infinite; }
@keyframes hzHint { to { top: 110%; } }

/* Ende: Titel links, rechts die Schnellbuchung mit freien Zeiten (auf dem Handy darunter) */
.hz-final { position: absolute; inset: 0; display: grid; grid-template-columns: minmax(0, 1fr); place-items: center; padding: 96px var(--pad, 24px) 48px; opacity: 0; pointer-events: none; }
.hz-final.on { pointer-events: auto; }
.hf-in { width: 100%; min-width: 0; max-width: 1320px; display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr); gap: clamp(40px, 5vw, 90px); align-items: center; }
.hf-text { text-align: left; min-width: 0; container-type: inline-size; }
.hf-in > .qb { min-width: 0; }
.hz-flogo { display: block; width: clamp(140px, 12vw, 190px); height: auto; overflow: visible; margin: 0 0 30px; filter: drop-shadow(0 12px 22px rgba(0,0,0,.5)); }
#flSc { opacity: 0; }
.hz.docked #flSc { opacity: 1; }
.hz-final h1 { margin: 0; font: 700 clamp(48px, 6.4vw, 108px)/.95 'Inter Tight', 'Inter', system-ui, sans-serif; letter-spacing: -.055em; text-transform: none; color: #fff; }
.hz-final .hf-sub { max-width: 480px; margin: 38px 0 0; font-size: clamp(17px, 1.35vw, 19px); line-height: 1.5; letter-spacing: -.01em; color: rgba(245,241,234,.78); }
.hf-ctas { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 32px; }
.hz.done .hz-photo img { animation: kenburns 22s ease-out both; }
@keyframes kenburns { from { transform: scale(1.08); } to { transform: scale(1); } }
.hz-shade { background: linear-gradient(90deg, rgba(11,10,8,.86) 0%, rgba(11,10,8,.55) 50%, rgba(11,10,8,.72) 100%), linear-gradient(180deg, rgba(11,10,8,.45), rgba(11,10,8,.1) 40%, rgba(11,10,8,.9)); }

/* Titel: «Dein [Haarstil] sitzt.» Der Stil wechselt, jeder Wechsel wird mit einer Goldlinie durchgeschnitten */
.hz-final .hf-eyebrow { display: inline-flex; align-items: center; gap: 12px; margin: 0 0 20px; font: 600 15px/1 'Inter', system-ui, sans-serif; letter-spacing: -.005em; color: #e6c06e; }
.hf-eyebrow::before { content: ''; width: 30px; height: 1px; background: currentColor; opacity: .8; }
/* Schrift nie breiter als die Spalte: längste Zeile «Dein French Crop» ist 7,05 Schriftgrössen breit */
.hz-final h1 { font-size: min(clamp(44px, 5.3vw, 90px), calc(100cqw / 7.4)); line-height: 1; white-space: nowrap; }
.hz-final h1 .rot { position: relative; }
.rot-box { position: relative; display: inline-block; vertical-align: bottom; transition: width .65s cubic-bezier(.2,.7,.1,1); }
.rot-word { display: inline-block; white-space: nowrap; padding: .04em .04em .24em 0; margin: -.04em -.04em -.24em 0; color: transparent; background: linear-gradient(100deg, #f8e2a6 0%, #dcb05a 42%, #b68a38 100%); -webkit-background-clip: text; background-clip: text; }
.rot-half { position: absolute; left: 0; top: 0; pointer-events: none; will-change: transform, opacity; }
.rot-slash { position: absolute; left: -6%; right: -6%; top: 52%; height: max(3px, .055em); border-radius: 2px; pointer-events: none; transform-origin: 0 50%; transform: scaleX(0);
  background: linear-gradient(90deg, rgba(255,248,224,0), #fff8e0 18%, #f1d38a 60%, rgba(212,166,74,0)); box-shadow: 0 0 14px rgba(241,211,138,.9); }
.hz-final h1 .rot .cutline { bottom: -.06em; }

/* Schnellbuchung */
.qb { justify-self: end; width: 100%; max-width: 540px; padding: 32px; border-radius: 32px; text-align: left; color: #f5f1ea;
  background: linear-gradient(180deg, rgba(24,20,15,.78), rgba(14,12,9,.82)); -webkit-backdrop-filter: saturate(160%) blur(26px) !important; backdrop-filter: saturate(160%) blur(26px) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08), inset 0 0 0 1px rgba(245,241,234,.1), 0 50px 100px -40px rgba(0,0,0,.85);
  opacity: 0; transform: translateY(34px); transition: opacity .9s ease .35s, transform 1.2s cubic-bezier(.2,.7,.1,1) .35s; }
.hz-final.on .qb, .hz.static .qb { opacity: 1; transform: none; }
.qb[hidden] { display: none; }
.qb-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding-bottom: 22px; margin-bottom: 22px; border-bottom: 1px solid rgba(245,241,234,.09); }
.qb-head h2 { margin: 0; font: 700 clamp(24px, 2vw, 30px)/1 'Inter Tight', 'Inter', system-ui, sans-serif; letter-spacing: -.035em; color: #fff; }
.hz-final .qb-head p { margin: 8px 0 0; font-size: 14px; color: rgba(245,241,234,.58); }
.qb-sec + .qb-sec { margin-top: 20px; }
.hz-final .qb-lab { display: flex; justify-content: space-between; margin: 0 0 10px; font: 600 12.5px/1 'Inter', system-ui, sans-serif; letter-spacing: .02em; color: rgba(245,241,234,.5); }
.qb-lab span { font-weight: 500; color: rgba(245,241,234,.45); }
.qb-svc { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.qb-svc button { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; padding: 14px 16px; border: 0; border-radius: 16px; background: rgba(245,241,234,.06); color: inherit; cursor: pointer; text-align: left; box-shadow: inset 0 0 0 1px rgba(245,241,234,.05); transition: background .3s, color .3s, box-shadow .3s; }
.qb-svc button:hover { background: rgba(245,241,234,.1); }
.qb-svc b { font: 600 15.5px/1.15 'Inter', system-ui, sans-serif; letter-spacing: -.012em; }
.qb-svc span { font-size: 13px; color: rgba(245,241,234,.58); font-variant-numeric: tabular-nums; }
.qb-svc button[aria-selected="true"] { background: #f5f1ea; color: #15120e; box-shadow: none; }
.qb-svc button[aria-selected="true"] span { color: #6a6258; }
.qb-days { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; min-height: 58px; }
.qb-days button { display: grid; align-content: center; gap: 5px; padding: 11px 2px; border: 0; border-radius: 14px; background: transparent; box-shadow: inset 0 0 0 1px rgba(245,241,234,.12); color: inherit; cursor: pointer; text-align: center; transition: box-shadow .3s, background .3s; }
.qb-days button:hover { background: rgba(245,241,234,.05); }
.qb-days b { font: 600 14.5px/1 'Inter', system-ui, sans-serif; }
.qb-days span { font-size: 12px; color: rgba(245,241,234,.55); }
.qb-days button[aria-selected="true"] { background: rgba(212,166,74,.14); box-shadow: inset 0 0 0 1.5px #d4a64a; }
.qb-days button[aria-selected="true"] span { color: #f1d38a; }
.qb-slots { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; min-height: 172px; align-content: start; }
.qb-slots button { height: 52px; border: 0; border-radius: 14px; background: rgba(245,241,234,.07); color: inherit; font: 600 17px/1 'Inter Tight', 'Inter', system-ui, sans-serif; letter-spacing: -.02em; font-variant-numeric: tabular-nums; cursor: pointer; transition: background .25s, color .25s, transform .4s cubic-bezier(.2,.7,.1,1); animation: chipIn .55s cubic-bezier(.2,.7,.1,1) both; animation-delay: calc(var(--ci, 0) * 45ms); }
.qb-slots button:hover { background: #d4a64a; color: #15120e; transform: translateY(-2px); }
.qb-slots > span { height: 52px; border-radius: 14px; background: linear-gradient(90deg, rgba(245,241,234,.05), rgba(245,241,234,.1), rgba(245,241,234,.05)); background-size: 200% 100%; animation: skel 1.4s infinite; }
.hz-final .qb-note { grid-column: 1 / -1; margin: 0; padding: 14px 0; color: rgba(245,241,234,.7); font-size: 14.5px; line-height: 1.5; }
.qb-note a { color: #f1d38a; }
.hz-final .qb-foot { margin: 18px 0 0; font-size: 13.5px; line-height: 1.5; color: rgba(245,241,234,.55); }
.qb-all { --bh: 54px; margin-top: 18px; }

@media (max-width: 1023px) {
  .hf-in { grid-template-columns: minmax(0, 1fr); gap: 30px; max-width: 640px; }
  .qb { justify-self: stretch; max-width: none; }
}
@media (max-width: 760px) {
  .hz-final { place-items: end stretch; padding: 76px 14px max(14px, env(safe-area-inset-bottom)); }
  .hf-in { gap: 18px; }
  .hf-text { padding: 0 6px; }
  .hz-flogo { width: 112px; margin-bottom: 14px; }
  .hf-sub, .hf-ctas { display: none; }
  .qb { padding: 20px; border-radius: 26px; }
  .qb-head { padding-bottom: 14px; margin-bottom: 14px; }
  .qb-head h2 { font-size: 22px; }
  .hz-final .qb-head p { display: none; }
  .hz-final .qb-lab { display: none; }
  .qb-sec + .qb-sec { margin-top: 10px; }
  .qb-svc { gap: 6px; }
  .qb-svc button { padding: 10px 12px; gap: 4px; border-radius: 14px; }
  .qb-svc b { font-size: 14px; }
  .qb-svc span { font-size: 12px; }
  .qb-days { gap: 5px; min-height: 48px; }
  .qb-days button { padding: 8px 1px; border-radius: 12px; }
  .qb-days b { font-size: 13px; }
  .qb-days span { font-size: 10.5px; }
  .qb-slots { gap: 6px; min-height: 144px; }
  .hz-final .qb-foot { margin-top: 12px; font-size: 12.5px; }
  .qb-slots button, .qb-slots > span { height: 44px; border-radius: 12px; font-size: 15.5px; }
  .qb-all { --bh: 50px; margin-top: 14px; }
  .hz-final h1 { font-size: min(44px, calc(100cqw / 7.4)); }
  .hz-final .hf-eyebrow { margin-bottom: 12px; font-size: 13px; }
  .hz-photo img { object-position: 40% 12%; }
  .hz-shade { background: linear-gradient(180deg, rgba(11,10,8,.2) 0%, rgba(11,10,8,.05) 22%, rgba(11,10,8,.75) 48%, rgba(11,10,8,.96) 70%); }
}
@media (max-width: 760px) and (max-height: 740px) {
  .hz-flogo { width: 88px; margin-bottom: 10px; }
  .hz-final h1 { font-size: min(32px, calc(100cqw / 7.4)); }
  .hz-final .hf-eyebrow { display: none; }
  .qb-slots { min-height: 94px; }
  .qb-slots button:nth-child(n+9), .qb-slots > span:nth-child(n+9) { display: none; }
  .hz-final .qb-foot { display: none; }
}
@media (min-width: 761px) and (max-height: 760px) {
  .hz-final { padding-top: 80px; padding-bottom: 28px; }
  .hz-flogo { width: 130px; margin-bottom: 20px; }
  .hz-final h1 { font-size: min(clamp(40px, 5vw, 80px), calc(100cqw / 7.4)); }
  .qb { padding: 24px; }
  .qb-head { padding-bottom: 16px; margin-bottom: 16px; }
  .hz-final .qb-head p { display: none; }
  .qb-sec + .qb-sec { margin-top: 14px; }
  .qb-svc button { padding: 11px 14px; }
  .qb-slots { min-height: 148px; }
  .qb-slots button, .qb-slots > span { height: 44px; }
  .qb-all { margin-top: 18px; }
}

/* Titel: Wörter gleiten herein, «perfekt.» wird golden, darunter eine gestrichelte Schnittlinie */
.hz-final h1 .w { display: inline-block; opacity: 0; transform: translateY(.5em); }
.hz-final h1.play .w { animation: hzWord .8s cubic-bezier(.2,.7,.2,1) forwards; animation-delay: calc(var(--i) * 90ms); }
@keyframes hzWord { to { opacity: 1; transform: none; } }
.hz-final h1 em { font-style: normal; position: relative; display: inline-block; }
.hz-final h1 em .w { color: transparent; background: linear-gradient(90deg, var(--gold-2) 0, var(--gold) 25%, #f6dc9a 40%, var(--gold) 50%, #fff 50%, #fff 100%); background-size: 205% 100%; background-position: 100% 0; -webkit-background-clip: text; background-clip: text; }
.hz-final h1.play em .w { animation: hzWord .8s cubic-bezier(.2,.7,.2,1) calc(var(--i) * 90ms) forwards, hzInk .8s cubic-bezier(.6,.1,.3,1) .7s forwards; }
@keyframes hzInk { to { background-position: 0 0; } }
.cutline { position: absolute; left: 0; right: 0; bottom: -.1em; width: 100%; height: .12em; overflow: visible; clip-path: inset(0 100% 0 0); }
.cutline path { fill: none; stroke: var(--gold); stroke-width: 3; stroke-dasharray: .045 .028; vector-effect: non-scaling-stroke; }
.hz-final h1.play .cutline { animation: hzCut .9s 1.2s cubic-bezier(.5,0,.2,1) forwards; }
@keyframes hzCut { to { clip-path: inset(0 0 0 0); } }

/* Fertig oder ohne Animation: Endzustand */
.hz.done .hz-half, .hz.done .hz-sc, .hz.done .hz-rz, .hz.done .hz-line, .hz.done .hz-hint, .hz.done .hz-sparks { display: none; }
.hz.done .hz-photo { transform: none; }
.hz.done .hz-shade, .hz.done .hz-final { opacity: 1; }
.hz.done .hz-final { pointer-events: auto; }
.hz.static .hz-final h1 .w { opacity: 1; transform: none; }
.hz.static .hz-final h1 em .w { background-position: 0 0; }
.hz.static .cutline { clip-path: none; }
.hz.static #flSc { opacity: 1; }


/* Handy: weniger Rechenarbeit */
.hz-half, .hz-photo { backface-visibility: hidden; }
@media (pointer: coarse) {
  #scWrap { filter: none; }
  #scTrail { display: none; }
  .hz-logo { filter: none; }
  .hz-go .hz-logo { animation-name: hzLogoInM; }
  .hz-line { box-shadow: 0 0 8px rgba(240,206,128,.8); }
  .hz-spark { box-shadow: none; }
}
@keyframes hzLogoInM { 0% { opacity: 0; transform: translateY(22px) scale(.96); } 100% { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
  .hz-final h1 .w { opacity: 1 !important; transform: none !important; animation: none !important; }
  .hz-final h1 em .w { background-position: 0 0 !important; }
  .cutline { clip-path: none !important; animation: none !important; }
}