/* ==========================================================================
   WAVE 165 - DER STUHL, DEN NIEMAND BESETZT
   ========================================================================== */

.kc-page .kc__stage { position: relative; width: 100%; max-width: 900px; margin: 0 auto; }
.kc__svg { display: block; width: 100%; height: auto; overflow: visible; }
.kc__layer { position: absolute; inset: 0; }

.kc__hint {
  margin: 1.1rem 0 0;
  text-align: center;
  color: rgba(246, 241, 231, .42);
  font: 700 .58rem/1 "JetBrains Mono", ui-monospace, monospace;
  letter-spacing: .2em;
  text-transform: uppercase;
}

/* -- the table ------------------------------------------------------------ */
.kc-table__rim {
  stroke: #e6b84f;
  stroke-width: 1.2;
  filter: drop-shadow(0 0 7px rgba(230, 184, 79, .4));
}

.kc-cut {
  stroke: #d8503f;
  stroke-width: 2.6;
  stroke-linecap: round;
  filter: drop-shadow(0 0 8px rgba(216, 80, 63, .85));
}

/* -- the chairs ----------------------------------------------------------- */
.kc-chair { transition: opacity .26s ease; }

.kc-chair__back,
.kc-chair__seat {
  fill: #16233a;
  stroke: rgba(226, 237, 252, .30);
  stroke-width: 1.2;
  transition: fill .24s ease, stroke .24s ease;
}
.kc-chair__back { fill: #1b2c46; }

.kc-chair__arm,
.kc-chair__stem,
.kc-chair__base,
.kc-chair__seam {
  fill: none;
  stroke: rgba(226, 237, 252, .28);
  stroke-width: 1.2;
  stroke-linecap: round;
  transition: stroke .24s ease;
}
.kc-chair__seam { stroke: rgba(226, 237, 252, .16); }

.kc-chair__shadow { fill: rgba(0, 0, 0, .55); }

.kc-chair.is-on .kc-chair__back  { fill: #2a3f5c; stroke: #f0c765; }
.kc-chair.is-on .kc-chair__seat  { fill: #23364e; stroke: #f0c765; }
.kc-chair.is-on .kc-chair__arm,
.kc-chair.is-on .kc-chair__stem,
.kc-chair.is-on .kc-chair__base  { stroke: rgba(240, 199, 101, .8); }

/* the empty one: it is not red, it is simply not there */
.kc-chair.is-empty { opacity: .16; }
.kc-chair.is-empty .kc-chair__back,
.kc-chair.is-empty .kc-chair__seat { fill: none; stroke-dasharray: 4 5; }
.kc-chair.is-empty .kc-chair__shadow { fill: rgba(0, 0, 0, .2); }
.kc-chair.is-empty.is-on { opacity: .3; }

/* -- labels and bubbles --------------------------------------------------- */
.kc-btn {
  position: absolute;
  transform: translate(-50%, 0) scale(var(--s, 1));
  transform-origin: 50% 0;
  width: max-content;
  max-width: 130px;
  padding: 4px;
  border: 0;
  background: none;
  color: rgba(246, 241, 231, .56);
  font: 700 .56rem/1.35 "JetBrains Mono", ui-monospace, monospace;
  letter-spacing: .13em;
  text-transform: uppercase;
  text-align: center;
  cursor: pointer;
  transition: color .2s ease;
}
.kc-btn:hover, .kc-btn:focus-visible, .kc-btn.is-on { color: #fff; outline: none; }
.kc-btn.is-empty { color: rgba(216, 80, 63, .82); letter-spacing: .2em; }
.kc-btn.is-empty:hover, .kc-btn.is-empty.is-on { color: #e8705c; }

.kc-bubble {
  position: absolute;
  z-index: 6;
  width: max-content;
  max-width: 240px;
  padding: .66rem .8rem;
  border: 1px solid rgba(236, 196, 120, .28);
  border-radius: 3px;
  background: linear-gradient(180deg, rgba(10, 18, 31, .98), rgba(5, 10, 18, .98));
  box-shadow: 0 16px 40px rgba(0, 0, 0, .55);
  color: rgba(246, 241, 231, .9);
  font-size: .82rem;
  line-height: 1.5;
  opacity: 0;
  visibility: hidden;
  transform: translate(-50%, -104%) scale(.97);
  transition: opacity .18s ease, transform .18s ease, visibility 0s linear .18s;
  pointer-events: none;
}
.kc-bubble b {
  display: block;
  margin-bottom: .28rem;
  color: #e6b84f;
  font: 700 .54rem/1 "JetBrains Mono", ui-monospace, monospace;
  letter-spacing: .18em;
}
.kc-bubble.is-empty { border-color: rgba(216, 80, 63, .4); }
.kc-bubble.is-empty b { color: #e8705c; }
.kc-bubble.is-on {
  opacity: 1; visibility: visible;
  transform: translate(-50%, -112%) scale(1);
  transition: opacity .2s ease, transform .2s cubic-bezier(.2,.8,.3,1), visibility 0s;
}

/* -- the argument --------------------------------------------------------- */
.kc-why { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; border-top: 1px solid rgba(226, 237, 252, .12); }
.kc-why > div { padding: clamp(1.3rem, 2.4vw, 2rem) clamp(1.2rem, 2.2vw, 2rem) 0 0; }
.kc-why > div + div { padding-left: clamp(1.2rem, 2.2vw, 2rem); border-left: 1px solid rgba(226, 237, 252, .07); }
.kc-why h3 {
  margin: 0 0 .7rem;
  color: #f6f1e7;
  font-size: clamp(1.02rem, 1.35vw, 1.2rem);
  line-height: 1.25;
}
.kc-why p { margin: 0; color: rgba(246, 241, 231, .62); font-size: .94rem; line-height: 1.65; }
.kc-why span {
  display: block; margin-bottom: .6rem;
  color: #e6b84f; font: 700 .58rem/1 "JetBrains Mono", ui-monospace, monospace;
  letter-spacing: .2em;
}

.kc-claim {
  max-width: 22ch;
  margin: 0 0 1.1rem;
  color: #f6f1e7;
  font-size: clamp(1.9rem, 3.4vw, 3rem);
  line-height: 1.1;
  letter-spacing: -.01em;
}
.kc-claim em { font-style: normal; color: #e6b84f; }

@media (max-width: 900px) {
  .kc-why { grid-template-columns: minmax(0, 1fr); }
  .kc-why > div + div { padding-left: 0; border-left: 0; border-top: 1px solid rgba(226, 237, 252, .07); }
  .kc-bubble { max-width: 200px; font-size: .76rem; }
  .kc-btn { font-size: .5rem; max-width: 96px; }
}

@media (prefers-reduced-motion: reduce) {
  .kc-chair, .kc-bubble, .kc-btn { transition: none; }
}