/* Schnipp & Schnapp, Barbershop im Comic-Stil. Erst der Laden von außen, ein Klick auf die Tür bringt einen hinein
   auf den Friseurstuhl: links den Schnitt wählen, rechts die Preise, in der Mitte ändert sich bei jeder Wahl die Frisur
   (Stuhl, Kunde, Frisuren und der Arm des Friseurs sind gezeichnet). Maße in cqw der Bildbreite. */
:root {
  --bg: #1B2A4A; --ink: #111; --paper: #FFF6DC; --yellow: #FFD23F; --red: #C8202B; --blue: #2F5FB0; --sky: #5FB4E5;
  --impact: Impact, Haettenschweiler, "Arial Narrow Bold", "Franklin Gothic Heavy", sans-serif;
  --comic: Bangers, "Comic Sans MS", "Chalkboard SE", "Marker Felt", "Comic Neue", "Segoe Print", cursive;
  --sans: "Avenir Next", "Segoe UI", system-ui, -apple-system, Roboto, sans-serif;
  --gut: clamp(1.25rem, 5vw, 4rem); --max: 1200px;
  --ease: cubic-bezier(.65, 0, .2, 1);
}
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
button { font-family: inherit; }

/* ---------- Raum und Bühne ---------- */
.room { position: relative; isolation: isolate; display: grid; place-items: center; min-height: calc(100svh - 2.7rem); background: var(--bg); overflow: hidden; }
.room::before { content: ""; position: absolute; inset: -4%; z-index: -1; background: url("../assets/barber-aussen.webp") 50% 50% / cover; filter: blur(18px) brightness(.55) saturate(1.2); }
.stage { position: relative; container-type: inline-size; width: min(100vw, calc((100svh - 2.7rem) * 1.7872)); aspect-ratio: 1344 / 752; }
.view { position: absolute; inset: 0; overflow: hidden; background: #2a3f66; }
.scene { position: absolute; inset: 0; overflow: hidden; }
.bg { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; }
.room[data-state="out"] .scene--in, .room[data-state="in"] .scene--out { visibility: hidden; }
.room[data-state="out"] .cuts, .room[data-state="out"] .prices, .room[data-state="out"] .back { display: none; }

/* ---------- außen: die Tür ---------- */
.door { position: absolute; left: 64.1%; top: 41.5%; width: 13.8%; height: 43.6%; margin: 0; padding: 0; border: 0; border-radius: .5cqw; background: none; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.door::before { content: ""; position: absolute; inset: -.5cqw; border-radius: 1cqw; border: .38cqw solid var(--yellow); box-shadow: 0 0 2.2cqw rgba(255, 210, 63, .9); opacity: .0; animation: ring 2s ease-out infinite; }
.door:hover::before, .door:focus-visible::before { animation: none; opacity: 1; }
.door:focus-visible { outline: 3px solid var(--yellow); outline-offset: 6px; }
@keyframes ring { 0% { opacity: .95; transform: scale(.96); } 70%, 100% { opacity: 0; transform: scale(1.14); } }
.bubble { position: absolute; left: 50%; bottom: calc(100% + 1.6cqw); translate: -50% 0; padding: .6cqw 1.4cqw; border: .3cqw solid var(--ink); border-radius: 1.6cqw; background: #fff; color: var(--ink); font: 400 max(1rem, 2.1cqw)/1 var(--comic); letter-spacing: .03em; text-transform: uppercase; white-space: nowrap; box-shadow: .4cqw .4cqw 0 var(--ink); rotate: -3deg; animation: wob 2.2s ease-in-out infinite; }
.bubble::after { content: ""; position: absolute; left: 44%; top: 100%; width: 1.6cqw; height: 1.6cqw; background: #fff; border-right: .3cqw solid var(--ink); border-bottom: .3cqw solid var(--ink); transform: translateY(-.8cqw) rotate(45deg) skew(10deg, 10deg); }
@keyframes wob { 0%, 100% { rotate: -3deg; translate: -50% 0; } 50% { rotate: 2deg; translate: -50% -.5cqw; } }

/* ---------- Geräuschwolken ---------- */
.sfx { position: absolute; left: 50%; top: 24%; z-index: 9; margin: 0; opacity: 0; pointer-events: none; filter: drop-shadow(.35cqw 0 0 #111) drop-shadow(-.35cqw 0 0 #111) drop-shadow(0 .35cqw 0 #111) drop-shadow(0 -.35cqw 0 #111); }
.sfx span { display: grid; place-items: center; width: 22cqw; height: 15cqw; background: var(--yellow); color: var(--red); font: 400 4.2cqw/1 var(--impact); letter-spacing: .02em; text-transform: uppercase; clip-path: polygon(50% 0, 61% 17%, 82% 7%, 80% 29%, 100% 36%, 85% 53%, 97% 76%, 74% 73%, 66% 96%, 50% 81%, 34% 96%, 26% 73%, 3% 76%, 15% 53%, 0 36%, 20% 29%, 18% 7%, 39% 17%); text-shadow: .2cqw .2cqw 0 #fff; }
.sfx.pop { animation: pop 1.1s cubic-bezier(.2, .9, .3, 1.4) both; }
@keyframes pop { 0% { opacity: 0; scale: .2; rotate: -14deg; } 18% { opacity: 1; scale: 1.12; rotate: 6deg; } 30% { scale: .96; rotate: -4deg; } 78% { opacity: 1; scale: 1; } 100% { opacity: 0; scale: 1.1; rotate: 4deg; } }
.sfx--ding { left: 55%; top: 16%; }
.scene--in .sfx { left: 29%; top: 20%; translate: 0 0; }

/* ---------- innen: Stuhl, Kunde, Friseur ---------- */
.chair { position: absolute; left: 50%; bottom: 3%; height: 90%; width: auto; translate: -50% 0; overflow: visible; }
.hs { display: none; }
.hs.on { display: inline; }
.hs.on > * { animation: hair .65s cubic-bezier(.2, .9, .3, 1.35) both; transform-box: fill-box; transform-origin: 50% 100%; }
@keyframes hair { 0% { transform: scale(.55, .3); opacity: 0; } 60% { transform: scale(1.1, 1.14); opacity: 1; } 100% { transform: none; opacity: 1; } }
.beard { opacity: 0; transition: opacity .45s ease; }
.person.bearded .beard { opacity: 1; }
.pup { transition: transform .3s ease; }
.person.cutting .pup { transform: translate(4px, -2px); }
.sp { opacity: 0; transform-box: fill-box; transform-origin: center; }
.person.shine .sp { animation: spark 1.2s ease both; }
.person.shine .s2 { animation-delay: .15s; } .person.shine .s3 { animation-delay: .3s; }
@keyframes spark { 0% { opacity: 0; transform: scale(.2) rotate(0); } 30% { opacity: 1; transform: scale(1.15) rotate(30deg); } 100% { opacity: 1; transform: scale(1) rotate(45deg); } }
.arm { opacity: 0; transform: translate(420px, -40px) rotate(6deg); }
.arm.cut { animation: armcut 1.5s ease-in-out both; }
@keyframes armcut {
  0% { opacity: 0; transform: translate(420px, -40px) rotate(6deg); }
  12% { opacity: 1; transform: translate(70px, -12px) rotate(0); }
  26% { transform: translate(-2px, -6px); } 36% { transform: translate(8px, 8px); } 46% { transform: translate(-6px, -4px); }
  56% { transform: translate(8px, 6px); } 66% { transform: translate(-4px, -10px); } 76% { transform: translate(6px, 0); }
  88% { opacity: 1; transform: translate(80px, -10px); } 100% { opacity: 0; transform: translate(420px, -40px) rotate(6deg); }
}
.tool { display: none; }
.arm[data-tool="clip"] .tool--clip, .arm[data-tool="sc"] .tool--sc { display: inline; }
.buzz { animation: buzz .12s steps(2) infinite; }
@keyframes buzz { 0% { opacity: 1; } 100% { opacity: .1; } }
.bl1 { animation: snip1 .24s steps(2, jump-none) infinite alternate; } .bl2 { animation: snip2 .24s steps(2, jump-none) infinite alternate; }
@keyframes snip1 { from { transform: rotate(-16deg); } to { transform: rotate(3deg); } }
@keyframes snip2 { from { transform: rotate(16deg); } to { transform: rotate(-3deg); } }
.arm:not(.cut) .buzz, .arm:not(.cut) .bl1, .arm:not(.cut) .bl2 { animation: none; }
.bit { opacity: 0; }
.bits.go .bit { animation: fall 1.4s ease-in both; animation-delay: var(--d); }
@keyframes fall { 0% { opacity: 0; transform: translate(0, 0) rotate(0); } 12% { opacity: 1; } 100% { opacity: 0; transform: translate(var(--x), 380px) rotate(var(--r)); } }

.say { position: absolute; left: 57.5%; top: 4.5%; z-index: 6; max-width: 15cqw; margin: 0; padding: .9cqw 1.4cqw; border: .3cqw solid var(--ink); border-radius: 1.8cqw; background: #fff; color: var(--ink); font: 400 max(.95rem, 1.75cqw)/1.2 var(--comic); letter-spacing: .02em; box-shadow: .45cqw .45cqw 0 var(--ink); rotate: 1.5deg; }
.say::after { content: ""; position: absolute; right: 12%; top: 100%; width: 1.8cqw; height: 1.8cqw; background: #fff; border-right: .3cqw solid var(--ink); border-bottom: .3cqw solid var(--ink); transform: translateY(-.9cqw) rotate(45deg); }

/* ---------- Schnittwahl links, Preistafel rechts ---------- */
.cuts, .prices { position: absolute; top: 4.4cqw; z-index: 7; padding: 1.5cqw; border: .32cqw solid var(--ink); background: var(--paper); box-shadow: .6cqw .6cqw 0 var(--ink); }
.cuts { left: 2.2cqw; width: 23.5cqw; rotate: -1.2deg; background-image: radial-gradient(rgba(200, 32, 43, .18) 1.1px, transparent 1.5px); background-size: .8cqw .8cqw; }
.prices { right: 2.2cqw; width: 24.5cqw; rotate: 1deg; background-color: var(--yellow); background-image: radial-gradient(rgba(17, 17, 17, .13) 1.1px, transparent 1.5px); background-size: .8cqw .8cqw; }
.prices::before, .prices::after { content: ""; position: absolute; top: -5cqw; width: .5cqw; height: 5cqw; background: repeating-linear-gradient(#111 0 .55cqw, transparent .55cqw .95cqw); }
.prices::before { left: 16%; } .prices::after { right: 16%; }
.cuts h2, .prices h2 { display: inline-block; margin: -2.6cqw 0 .9cqw -.4cqw; padding: .35cqw 1.2cqw; border: .28cqw solid var(--ink); background: var(--red); color: #fff; font: 400 max(1.1rem, 2.5cqw)/1 var(--impact); letter-spacing: .04em; text-transform: uppercase; rotate: -2.5deg; box-shadow: .35cqw .35cqw 0 var(--ink); }
.prices h2 { background: var(--blue); }
.cutlist { display: grid; gap: .65cqw; }
.cut { display: flex; align-items: baseline; justify-content: space-between; gap: .8cqw; padding: .55cqw 1cqw; border: .26cqw solid var(--ink); background: #fff; color: var(--ink); font: 400 max(.92rem, 1.7cqw)/1.1 var(--comic); letter-spacing: .03em; text-align: left; cursor: pointer; box-shadow: .38cqw .38cqw 0 var(--ink); transition: translate .12s ease, box-shadow .12s ease, background .12s ease; }
.cut:hover { background: #fff1b5; }
.cut[aria-checked="true"] { background: var(--yellow); translate: .38cqw .38cqw; box-shadow: 0 0 0 var(--ink); }
.cut[aria-checked="true"] .cn::before { content: "✂ "; }
.cm { color: #5b4a30; font: 700 max(.66rem, .85cqw)/1 var(--sans); letter-spacing: .04em; white-space: nowrap; }
.cut:focus-visible, .ex:focus-visible, .book:focus-visible, .back:focus-visible { outline: 3px solid var(--red); outline-offset: 3px; }
.plist { margin: 0; padding: 0; list-style: none; }
.plist li { display: flex; align-items: baseline; gap: .6cqw; padding: .3cqw .8cqw; font: 400 max(.9rem, 1.7cqw)/1.15 var(--comic); letter-spacing: .02em; transition: background .2s ease, color .2s ease; }
.plist i { flex: 1 1 .8cqw; min-width: .8cqw; border-bottom: .22cqw dotted rgba(17, 17, 17, .55); translate: 0 -.25cqw; }
.plist b { font: 400 max(1rem, 1.9cqw)/1 var(--impact); letter-spacing: .02em; }
.plist li.on { margin-inline: -.9cqw; padding-inline: 1.7cqw; background: var(--red); color: #fff; box-shadow: .3cqw .3cqw 0 var(--ink); }
.plist li.on .pn::before { content: "▶ "; }
.extras { display: grid; gap: .55cqw; margin-top: .9cqw; padding-top: .9cqw; border-top: .28cqw dashed var(--ink); }
.ex { display: flex; justify-content: space-between; align-items: baseline; gap: .6cqw; padding: .45cqw .9cqw; border: .26cqw solid var(--ink); background: #fff; color: var(--ink); font: 400 max(.85rem, 1.55cqw)/1.1 var(--comic); text-align: left; cursor: pointer; box-shadow: .32cqw .32cqw 0 var(--ink); transition: translate .12s ease, box-shadow .12s ease, background .12s ease; }
.ex b { font: 400 max(.9rem, 1.55cqw)/1 var(--impact); }
.ex[aria-pressed="true"] { background: #b8e986; translate: .32cqw .32cqw; box-shadow: 0 0 0 var(--ink); }
.ex[aria-pressed="true"] span::before { content: "✔ "; }
.sum { display: flex; align-items: baseline; justify-content: space-between; margin: .9cqw 0 0; font: 400 max(1rem, 1.9cqw)/1 var(--comic); }
.sum b { color: var(--red); font: 400 max(1.8rem, 4.2cqw)/1 var(--impact); letter-spacing: .02em; text-shadow: .2cqw .2cqw 0 var(--ink); }
.book { display: block; width: 100%; margin-top: .8cqw; padding: .8cqw 1cqw; border: .3cqw solid var(--ink); background: var(--red); color: #fff; font: 400 max(1.1rem, 2.1cqw)/1 var(--impact); letter-spacing: .06em; text-transform: uppercase; cursor: pointer; box-shadow: .45cqw .45cqw 0 var(--ink); rotate: -1.5deg; transition: translate .12s ease, box-shadow .12s ease; }
.book:hover { translate: .2cqw .2cqw; box-shadow: .2cqw .2cqw 0 var(--ink); }
.hours { margin: .8cqw 0 0; font: 700 max(.7rem, .98cqw)/1.35 var(--sans); }
.back { position: absolute; left: 2.2cqw; bottom: 2.2cqw; z-index: 7; padding: .7cqw 1.4cqw; border: .3cqw solid var(--ink); background: #fff; color: var(--ink); font: 400 max(.95rem, 1.75cqw)/1 var(--comic); letter-spacing: .03em; cursor: pointer; box-shadow: .4cqw .4cqw 0 var(--ink); rotate: 1deg; }
.back:hover { background: var(--yellow); }

.static { display: none; }
.flash { position: absolute; inset: 0; z-index: 20; background: #fff; opacity: 0; pointer-events: none; }

.ft { padding-block: 1.6rem; border-top: 4px solid var(--ink); background: #0f1830; }
.ft .wrap { display: flex; justify-content: center; }
.ft .note { margin: 0; max-width: 46rem; color: #cfd6ea; font-size: .88rem; text-align: center; }

/* ---------- schmale Schirme: Bild oben, darunter Auswahl und Preise ---------- */
@media (max-width: 899px) {
  .room { display: flex; flex-direction: column; justify-content: center; min-height: calc(100svh - 2.7rem); }
  .room:not([data-state="out"]) { justify-content: flex-start; min-height: 0; }
  .room::before { display: none; }
  .stage { width: 100%; aspect-ratio: auto; container-type: normal; display: flex; flex-direction: column; background: #2a3f66; }
  .view { position: relative; inset: auto; aspect-ratio: 1344 / 752; }
  .room[data-state="in"] .view { aspect-ratio: 4 / 5; }
  .scene--in .bg { object-position: 50% 70%; }
  .chair { height: 90%; bottom: -2%; }
  .sfx span { width: 9.5rem; height: 6.6rem; font-size: 1.7rem; }
  .scene--in .sfx { left: 4%; top: 12%; }
  .say { left: auto; right: 3%; top: 2.5%; max-width: 12rem; padding: .5rem .8rem; border-width: 3px; border-radius: 1rem; box-shadow: 3px 3px 0 var(--ink); font-size: .95rem; }
  .bubble { padding: .3rem .8rem; border-width: 3px; box-shadow: 3px 3px 0 var(--ink); font-size: .9rem; }
  .door::before { border-width: 3px; }
  .cuts, .prices { position: relative; inset: auto; width: auto; margin: 1.6rem var(--gut) 0; padding: 1.1rem; border-width: 3px; box-shadow: 5px 5px 0 var(--ink); rotate: 0deg; }
  .prices { margin-bottom: 1.6rem; }
  .prices::before, .prices::after { display: none; }
  .cuts h2, .prices h2 { margin-top: -2rem; padding: .3rem 1rem; border-width: 3px; font-size: 1.5rem; box-shadow: 3px 3px 0 var(--ink); }
  .cutlist { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem; }
  .cut { padding: .55rem .7rem; border-width: 3px; box-shadow: 3px 3px 0 var(--ink); font-size: 1.05rem; flex-direction: column; align-items: flex-start; gap: .1rem; }
  .cut[aria-checked="true"] { translate: 3px 3px; }
  .cm { font-size: .72rem; }
  .plist li { font-size: 1.05rem; }
  .plist b { font-size: 1.15rem; }
  .plist li.on { margin-inline: -.6rem; padding-inline: 1rem; box-shadow: 3px 3px 0 var(--ink); }
  .extras { gap: .5rem; border-top-width: 3px; }
  .ex { font-size: .98rem; border-width: 3px; box-shadow: 3px 3px 0 var(--ink); padding: .5rem .7rem; }
  .ex[aria-pressed="true"] { translate: 3px 3px; }
  .sum { font-size: 1.1rem; margin-top: .9rem; }
  .sum b { font-size: 2.2rem; }
  .book { font-size: 1.3rem; padding: .7rem 1rem; border-width: 3px; box-shadow: 4px 4px 0 var(--ink); margin-top: .8rem; }
  .hours { font-size: .8rem; margin-top: .8rem; }
  .back { position: relative; inset: auto; align-self: flex-start; margin: 1rem var(--gut) 0; padding: .55rem 1rem; border-width: 3px; box-shadow: 3px 3px 0 var(--ink); font-size: 1rem; order: -1; }
  .room[data-state="in"] .back { order: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .door::before, .bubble { animation: none; }
  .door::before { opacity: .9; }
  .hs.on > * { animation: none; }
  .sfx.pop { animation: none; opacity: 1; }
  .arm.cut { animation: none; }
  .bits.go .bit { animation: none; }
}