/* Trommel „Aufladen": the drum owns the left half of the black paper, all copy and the form sit on the right.
   Every field charges the bachi, the charged submit button releases the blow; after sending, the camera
   closes in on the drum, everything else fades away, and both bachi strike. */

@property --tb-spin {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}

.booking.tb-booking {
  --tb-charge: 0;
  position: relative;
  isolation: isolate;
  overflow: clip;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 560px);
  grid-template-rows: auto auto auto;
  align-content: center;
  column-gap: min(6vw, 110px);
  row-gap: 0;
  align-items: start;
  min-height: clamp(820px, calc(var(--page-vh, 1svh) * 100), 1080px); /* above 1080 px the drum would outgrow the form */
  padding-block: 80px 60px;
  color: var(--paper);
  background:
    linear-gradient(#0005, #0005),
    #121211 var(--black-paper) repeat 0 0 / 620px 620px;
}
.tb-booking .booking-copy {
  grid-column: 2;
  grid-row: 1;
  position: relative;
  z-index: 3;
}
/* ---------- the form: ink lines on the black paper (from Variante 3 „Tuschezug") ---------- */
.tb-booking {
  --v3-red: #c81016;
  --v3-hot: #ef443b;
  --v3-ash: #ada597;
  --v3-ease: cubic-bezier(0.65, 0, 0.25, 1);
  --v3-swipe: url("ink/swipe.webp");
  --v3-cream: linear-gradient(#f1e7d2f0, #f1e7d2f0), #f1e7d2 var(--black-paper) repeat 0 0 / 520px 520px;
  color-scheme: dark;
}
.tb-sheet {
  grid-column: 2;
  grid-row: 2;
  position: relative;
  z-index: 3;
  margin-top: 44px;
}
.v3-pair,
.v3-more-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 32px;
}
.v3-field {
  position: relative;
  display: block;
  margin: 0 0 30px;
  font-size: 16px;
}
.v3-label {
  display: block;
  font-size: 16px;
  font-weight: 700;
  color: var(--paper);
  transition: color 0.25s;
}
.v3-field input,
.v3-field select,
.v3-field textarea {
  display: block;
  width: 100%;
  min-height: 52px;
  margin: 0;
  padding: 11px 0;
  border: 0;
  border-bottom: 1px solid #f1e7d266;
  border-radius: 0;
  background: transparent;
  color: var(--paper);
  font-size: 20px;
  line-height: 1.4;
}
.v3-field textarea {
  min-height: 104px;
  resize: vertical;
}
.v3-field select {
  -webkit-appearance: none;
  appearance: none;
  padding-right: 40px;
  cursor: pointer;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='12' viewBox='0 0 18 12' fill='none'%3E%3Cpath d='M1 1.5l8 8 8-8' stroke='%23f1e7d2' stroke-width='2'/%3E%3C/svg%3E") right 4px center / 18px 12px no-repeat;
}
.v3-field select option {
  background: #121211;
  color: var(--paper);
}
.v3-field input::placeholder,
.v3-field textarea::placeholder {
  color: #8f877b;
  opacity: 1;
}
.v3-field :is(input, select, textarea):focus,
.v3-field :is(input, select, textarea):focus-visible {
  outline: none;
}
.v3-field :is(input, select, textarea):user-invalid {
  border-bottom-color: var(--v3-hot);
}
/* Focus paints a red brush underline; a field that has landed keeps it (one stroke per charge). */
.v3-ink {
  position: absolute;
  left: -8px;
  right: -8px;
  bottom: -10px;
  height: 20px;
  background: var(--v3-hot);
  -webkit-mask: var(--v3-swipe) left center / 100% 100% no-repeat;
  mask: var(--v3-swipe) left center / 100% 100% no-repeat;
  clip-path: inset(0 100% 0 0);
  transition: clip-path 0.45s var(--v3-ease);
  pointer-events: none;
}
.v3-field:focus-within .v3-ink,
.v3-field.is-filled .v3-ink {
  clip-path: inset(0);
}
.v3-field:focus-within .v3-label,
.v3-field.is-filled .v3-label {
  color: var(--v3-hot);
}
.v3-more {
  margin: -6px 0 28px;
}
.v3-more summary {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  min-height: 48px;
  font-size: 18px;
  font-weight: 700;
  cursor: pointer;
  list-style: none;
}
.v3-more summary::-webkit-details-marker {
  display: none;
}
.v3-more summary::before {
  content: "";
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
  background:
    linear-gradient(var(--v3-hot), var(--v3-hot)) center / 100% 3px no-repeat,
    linear-gradient(var(--v3-hot), var(--v3-hot)) center / 3px 100% no-repeat;
  transition: rotate 0.35s var(--v3-ease);
}
.v3-more[open] summary::before {
  rotate: 45deg;
}
.v3-more summary:focus-visible {
  outline: 3px solid var(--paper);
  outline-offset: 4px;
}
.v3-more-grid {
  padding-top: 18px;
}
.v3-submit {
  display: flex;
  align-items: center;
}
.v3-submit .ink-button {
  font-size: 18px;
}
.tb-booking #form-status {
  font-size: 16px;
  color: var(--v3-hot);
}
.tb-booking #form-status:empty {
  display: none;
}
/* ---------- after sending: a short confirmation in the same ink; the thanks becomes the headline ---------- */
.tb-booking[data-free] .booking-copy {
  display: none;
}
.tb-booking[data-free] .tb-sheet {
  margin-top: 0;
}
#prepared.tb-sent h3 {
  position: relative;
  display: inline-block;
  font-size: clamp(48px, 4.6vw, 72px);
  line-height: 1.02;
  letter-spacing: -0.045em;
  outline: none;
}
/* a red brush stroke paints itself under the thanks */
#prepared.tb-sent h3::after {
  content: "";
  position: absolute;
  left: -10px;
  right: -14px;
  bottom: -16px;
  height: 26px;
  background: var(--v3-hot);
  -webkit-mask: var(--v3-swipe) left center / 100% 100% no-repeat;
  mask: var(--v3-swipe) left center / 100% 100% no-repeat;
  clip-path: inset(0 100% 0 0);
  animation: tb-paint 0.7s var(--v3-ease) 0.25s forwards;
}
@keyframes tb-paint {
  to { clip-path: inset(0); }
}
#prepared.tb-sent p {
  margin: 0;
  font-size: 20px;
  line-height: 1.5;
  color: var(--v3-ash);
}
#prepared.tb-sent .tb-sent-lead {
  margin-top: 40px;
  font-size: clamp(24px, 2vw, 30px);
  font-weight: 700;
  line-height: 1.25;
  color: var(--paper);
}
.tb-again {
  margin-top: 34px;
  min-height: 44px;
  padding: 0;
  background: none;
  border: 0;
  color: var(--paper);
  font: 700 18px/1.2 Arial, Helvetica, sans-serif;
  cursor: pointer;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 6px;
}
.tb-again:focus-visible {
  outline: 2px solid var(--paper);
  outline-offset: 6px;
}
@media (hover: hover) {
  .tb-again:hover {
    text-decoration-color: var(--v3-hot);
    text-decoration-thickness: 3px;
  }
}

/* ---------- the stage: the canvas spans the section, the drum is framed in the left half ---------- */
.tb-stage {
  grid-column: 2;
  grid-row: 3;
  position: static;
  z-index: 3;
}
.tb-host {
  position: absolute;
  /* on very wide screens the stage stays with the content column instead of drifting to the window edge */
  inset: 0 calc(var(--gutter) - 5vw);
  z-index: 1;
}
/* warm stage light behind the drum; grows with the charge */
.tb-host::before {
  content: "";
  position: absolute;
  left: 2%;
  width: 50%;
  top: 22%;
  bottom: 0;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(closest-side, #c81016 0%, #c8101666 42%, #c8101600 100%);
  opacity: calc(0.12 + var(--tb-charge) * 0.32);
  transition: opacity 0.6s;
}
.tb-booking[data-ready] .tb-host::before {
  opacity: 0.68;
  background: radial-gradient(closest-side, #f0461f 0%, #c81016aa 38%, #c8101600 100%);
}
.tb-canvas,
.tb-fallback {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}
.tb-canvas {
  cursor: default;
  touch-action: manipulation;
  transition: filter 0.6s;
}
/* after sending, the drum is free to play */
.tb-booking[data-free] .tb-canvas {
  cursor: pointer;
}
.tb-booking[data-ready] .tb-canvas {
  filter: saturate(1.18) brightness(1.08);
}
.tb-fallback {
  inset: auto auto 4% 3%;
  width: min(44%, 620px);
  height: auto;
  aspect-ratio: 1;
  object-fit: cover;
  -webkit-mask-image: radial-gradient(closest-side, #000 60%, #0000);
  mask-image: radial-gradient(closest-side, #000 60%, #0000);
}

/* ---------- controls ---------- */
.tb-caption {
  position: relative;
  z-index: 3;
  padding-top: 18px;
}
.tb-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.tb-controls {
  display: flex;
  align-items: center;
}
.tb-controls[hidden] {
  display: none;
}
.tb-sound {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 48px;
  padding: 12px 4px;
  font: 700 17px/1.2 Arial, Helvetica, sans-serif;
  color: var(--paper);
  background: transparent;
  border: 0;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 5px;
  text-decoration-thickness: 1px;
}
.tb-sound::before {
  content: "";
  width: 14px;
  height: 14px;
  border: 2px solid currentColor;
  border-radius: 50%;
  transition: background 0.2s;
}
.tb-sound[aria-pressed="true"]::before {
  background: var(--red);
  border-color: var(--red);
  box-shadow: 0 0 0 3px #f1e7d2;
}
.tb-sound:focus-visible {
  outline: 2px solid var(--paper);
  outline-offset: 6px;
}
@media (hover: hover) {
  .tb-sound:hover {
    text-decoration-thickness: 2px;
  }
}

/* ---------- the brush button carries the charge ---------- */
/* glow follows the brush shape (drop-shadow), growing with every field */
.tb-booking .tb-submit {
  filter:
    drop-shadow(0 0 calc(var(--tb-charge) * 10px) #ff4a22aa)
    drop-shadow(0 0 calc(var(--tb-charge) * 26px) #c8101688);
  transition: color 0.25s, transform 0.25s cubic-bezier(0.3, 1.6, 0.5, 1), filter 0.8s;
}
/* fully charged: glowing lava flows through the stroke, the label glows */
.tb-booking[data-ready] .tb-submit::before {
  background:
    linear-gradient(90deg, #a50b10, #e3301c 18%, #ff7a2e 30%, #ffd08a 36%, #ff7a2e 42%, #e3301c 56%, #a50b10 72%, #e3301c 86%, #a50b10) 0 0 / 220% 100%;
  animation: tb-flow 1.6s linear infinite;
}
.tb-booking[data-ready] .tb-submit {
  text-shadow: 0 0 10px #ffcf99, 0 0 2px #fff8;
  animation: tb-charged 1.2s ease-in-out infinite;
}
.tb-booking[data-ready] .tb-submit svg {
  filter: drop-shadow(0 0 6px #ffcf99);
}
/* pointing at it: the stroke turns white-hot and trembles – this is the blow */
.tb-booking .tb-submit::after {
  background: linear-gradient(90deg, #fff1cf, #ffd9a0 45%, #ffb36b);
}
.tb-booking[data-primed] .tb-submit {
  color: #2a0a06;
  text-shadow: none;
  transform: translateY(-2px) scale(1.04);
}
.tb-booking[data-primed] .tb-submit::after {
  clip-path: inset(0);
}
.tb-booking[data-primed][data-ready] .tb-submit {
  animation: tb-primed 0.12s linear infinite;
  filter:
    drop-shadow(0 0 14px #ffb36bdd)
    drop-shadow(0 0 40px #ff4a22cc);
}
@keyframes tb-flow {
  to { background-position: -220% 0; }
}
@keyframes tb-charged {
  0%, 100% {
    filter:
      drop-shadow(0 0 10px #ff4a22aa)
      drop-shadow(0 0 26px #c8101688);
  }
  50% {
    filter:
      drop-shadow(0 0 16px #ff6a2add)
      drop-shadow(0 0 44px #e3301caa);
  }
}
@keyframes tb-primed {
  0%, 100% { translate: 0 0; }
  25% { translate: 0.8px -0.8px; }
  75% { translate: -0.8px 0.6px; }
}

/* ---------- the finale: everything fades, the camera closes in on the drum ---------- */
.tb-booking .booking-copy,
.tb-booking .tb-sheet,
.tb-booking .tb-caption {
  transition: opacity 0.35s ease, translate 0.35s ease;
}
.tb-booking.tb-finale .booking-copy,
.tb-booking.tb-finale .tb-sheet,
.tb-booking.tb-finale .tb-caption {
  opacity: 0;
  translate: 0 16px;
  pointer-events: none;
}
.tb-booking.tb-finale-full .tb-host {
  position: fixed;
  inset: 0;
  z-index: 85;
  background: radial-gradient(ellipse at 50% 55%, #241614, #070606 70%);
}
.tb-booking.tb-finale-full .tb-host::before {
  left: 20%;
  width: 60%;
  top: 30%;
  bottom: 0;
  opacity: 0.8;
}
.tb-blackout {
  position: fixed;
  inset: 0;
  z-index: 88;
  background: #000;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.28s ease;
}
.tb-blackout.is-on {
  opacity: 1;
}

/* ---------- page-wide strike layers (created by the script) ---------- */
.tb-shock {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 90;
}
.tb-flash {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 89;
  opacity: 0;
  background: radial-gradient(circle at var(--fx, 50%) var(--fy, 50%), #c8101655, #c8101600 45%);
}
.tb-flash.is-on {
  animation: tb-flash 0.5s ease-out;
}
/* the decisive blow: a white-hot core in the flash */
.tb-flash.is-hard {
  background: radial-gradient(circle at var(--fx, 50%) var(--fy, 50%), #fff4dcee, #ff6a3a88 18%, #c8101655 40%, #c8101600 70%);
}
@keyframes tb-flash {
  0% { opacity: 0; }
  12% { opacity: 1; }
  100% { opacity: 0; }
}
.tb-booking [data-resonate].jolt {
  animation: tb-jolt 0.5s cubic-bezier(0.2, 0.8, 0.3, 1) var(--jd, 0ms) both;
}
@keyframes tb-jolt {
  0% { transform: none; }
  18% { transform: translate(calc(var(--jx, 0) * 1px), calc(var(--jy, 0) * 1px)); }
  46% { transform: translate(calc(var(--jx, 0) * -0.35px), calc(var(--jy, 0) * -0.35px)); }
  100% { transform: none; }
}

/* ---------- tablet ---------- */
@media (max-width: 1000px) {
  .booking.tb-booking {
    grid-template-columns: minmax(0, 0.8fr) minmax(0, 1fr);
    column-gap: 4vw;
  }
}

/* ---------- phones and portrait tablets: the drum band stays in view above a compact form ---------- */
@media (max-width: 900px) {
  .booking.tb-booking {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    min-height: 0;
    padding-block: 52px 36px;
  }
  .tb-booking .booking-copy h2 {
    font-size: 44px;
  }
  .tb-booking .booking-copy p {
    margin: 14px 0 10px;
  }
  .tb-stage {
    order: 2;
    position: relative;
    height: clamp(210px, calc(var(--page-vh, 1svh) * 32), 300px);
    margin: 0 calc(-1 * max(4vw, 22px)); /* full bleed: the section's side padding */
  }
  .tb-host {
    inset: -90px 0 0;
  }
  .tb-host::before {
    left: 10%;
    width: 80%;
    top: 30%;
  }
  .tb-canvas {
    -webkit-mask-image: linear-gradient(#000 80%, #0000);
    mask-image: linear-gradient(#000 80%, #0000);
  }
  .tb-booking.tb-finale-full .tb-canvas {
    -webkit-mask-image: none;
    mask-image: none;
  }
  .tb-caption {
    position: absolute;
    left: max(4vw, 22px);
    bottom: 4px;
    padding: 0;
    white-space: nowrap;
  }
  .tb-sheet {
    order: 3;
    margin-top: 6px;
  }
  .v3-pair,
  .v3-more-grid {
    gap: 0 16px;
  }
  .v3-field {
    margin-bottom: 16px;
  }
  .v3-field input,
  .v3-field select,
  .v3-field textarea {
    min-height: 42px;
    padding: 7px 0;
    font-size: 18px;
  }
  .v3-field textarea {
    min-height: 0;
    height: 64px;
  }
  .v3-ink {
    bottom: -8px;
    height: 16px;
  }
  .v3-more {
    margin: -4px 0 8px;
  }
  .v3-more summary {
    font-size: 17px;
  }
  .v3-submit .ink-button {
    min-height: 62px;
    padding: 18px 30px;
  }
  #prepared.tb-sent .tb-sent-lead {
    margin-top: 30px;
  }
  .tb-fallback {
    inset: auto auto 0 50%;
    width: min(70%, 300px);
    translate: -50% 0;
  }
}

/* portrait tablets: same stack, a taller drum band */
@media (min-width: 600px) and (max-width: 900px) {
  .tb-stage {
    height: clamp(300px, calc(var(--page-vh, 1svh) * 34), 420px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .tb-canvas,
  .tb-host::before,
  .tb-booking .tb-sheet,
  .v3-ink,
  .tb-booking .tb-submit,
  .tb-booking .booking-copy,
  .tb-booking .tb-caption {
    transition: none;
  }
  .tb-flash.is-on,
  .tb-booking [data-resonate].jolt,
  .tb-booking .tb-submit,
  .tb-booking .tb-submit::before,
  .tb-booking .tb-submit::after {
    animation: none;
  }
  #prepared.tb-sent h3::after {
    animation: none;
    clip-path: inset(0);
  }
}

/* spam trap: invisible to people, filled by bots; requests with it set are dropped */
.tb-hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  opacity: 0;
}