/* ============================================================
   CASO · MEDIOS — vídeos de un caso y demo para tocar
   ------------------------------------------------------------
   18.10.2026, caso Aura Living (/projekte/aura-living/).
   Va APARTE de css/sitio.css a propósito: sitio.css tiene un techo de
   90 KB (css/componentes/LEEME.md) y esto solo lo necesitan las fichas
   que lo declaran en su "assets" (junto a css/sitio.css).
   El HTML lo escribe tools/generar-sitio.mjs (resolverVideo y
   resolverDemo); el comportamiento, js/caso-medien.js.
   ============================================================ */

/* -- Vídeo -------------------------------------------------------
   Con `breit` y `hoch` salen dos <video>: uno para pantallas anchas
   y otro vertical para el móvil. El oculto lleva preload="none" y no
   se descarga. */
.video-caso {
  display: block;
  inline-size: 100%;
  block-size: auto;
  border-radius: var(--radius-card);
  background: var(--black-pure);
  box-shadow: var(--shadow-card);
}
.video-caso--hoch {
  inline-size: min(100%, 23rem);
  margin-inline: auto;
}
.bloque__media--video figcaption { text-align: center; }
@media (max-width: 699px) {
  .video-caso--solo-ancho { display: none; }
}
@media (min-width: 700px) {
  .video-caso--solo-movil { display: none; }
}

/* -- Demo para tocar ----------------------------------------------
   Sin JavaScript se ve la lista de pasos (.demo-caso__liste). Con
   JavaScript, js/caso-medien.js monta encima la cabecera, los tres
   aparatos y los botones, y añade .ist-bereit. */
.demo-caso {
  margin-block-start: var(--sp-6);
}
.demo-caso__liste {
  display: grid;
  gap: var(--sp-3);
  padding-inline-start: 1.25em;
}
.demo-caso.ist-bereit .demo-caso__liste { display: none; }

.demo-caso__kopf {
  max-inline-size: 44rem;
  margin-block-end: var(--sp-5);
  min-block-size: 7.5em; /* el texto de cada paso no mueve los aparatos */
}
.demo-caso__zaehler {
  margin: 0 0 var(--sp-2);
  font-size: var(--fs-micro);
  letter-spacing: var(--ls-xl);
  text-transform: uppercase;
  color: var(--gold);
}
.bloque-claro .demo-caso__zaehler { color: var(--gold-ink); }
.demo-caso__titulo {
  margin: 0 0 var(--sp-2);
  font-size: var(--fs-h3);
  line-height: var(--lh-snug);
}
.demo-caso__text { margin: 0; }

/* Bühne: los tres aparatos a la vez en pantallas anchas. */
.demo-caso__buehne {
  display: grid;
  grid-template-columns: minmax(0, 0.82fr) minmax(0, 0.82fr) minmax(0, 2.5fr);
  gap: clamp(var(--sp-4), 2.4vw, var(--sp-6));
  align-items: center;
}
.demo-caso__geraet {
  margin: 0;
  transition: opacity var(--dur-base) var(--ease-silk), transform var(--dur-base) var(--ease-silk);
}
.demo-caso__geraet:not(.ist-aktiv) { opacity: 0.62; }
.demo-caso__name {
  margin-block-end: var(--sp-2);
  font-size: var(--fs-micro);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--grey);
  text-align: center;
}
.bloque-claro .demo-caso__name { color: var(--muted-on-light); }
.demo-caso__geraet.ist-aktiv .demo-caso__name { color: var(--gold-bright); }
.bloque-claro .demo-caso__geraet.ist-aktiv .demo-caso__name { color: var(--gold-ink); }

/* El marco: un móvil o la pantalla de la Zentrale. */
.demo-caso__rahmen {
  padding: 7px;
  border-radius: 30px;
  background: var(--black-pure);
  border: 1px solid var(--hair);
  box-shadow: var(--shadow-card);
  transition: box-shadow var(--dur-base) var(--ease-silk), border-color var(--dur-base) var(--ease-silk);
}
.demo-caso__geraet--zentrale .demo-caso__rahmen { border-radius: 16px; padding: 9px; }
.demo-caso__geraet.ist-aktiv .demo-caso__rahmen {
  border-color: var(--gold-dim);
  box-shadow: 0 0 0 1px var(--gold-dim), 0 22px 48px -26px rgba(201, 169, 110, 0.55);
}
.demo-caso__schirm {
  position: relative;
  overflow: hidden;
  border-radius: 23px;
  background: #f4efe6;
}
.demo-caso__geraet--zentrale .demo-caso__schirm { border-radius: 8px; }
.demo-caso__schirm img {
  display: block;
  inline-size: 100%;
  block-size: auto;
}

/* El sitio que hay que tocar: un rectángulo dorado que late sobre el botón real. */
.demo-caso__ziel {
  position: absolute;
  z-index: 1;
  padding: 0;
  border: 2px solid var(--gold-bright);
  border-radius: 10px;
  background: rgba(201, 169, 110, 0.16);
  cursor: pointer;
}
.demo-caso__ziel::before { /* zona de toque más grande que el botón dibujado */
  content: '';
  position: absolute;
  inset: -10px;
}
.demo-caso__ziel:focus-visible {
  outline: 3px solid var(--gold-bright);
  outline-offset: 3px;
}
.demo-caso__ziel[hidden] { display: none; }

/* La alarma del móvil del camarero. */
.demo-caso__geraet.ist-alarm .demo-caso__rahmen {
  border-color: #e6a23c;
  box-shadow: 0 0 0 2px rgba(230, 162, 60, 0.75), 0 22px 48px -26px rgba(230, 162, 60, 0.6);
}

@media (prefers-reduced-motion: no-preference) {
  .demo-caso__ziel { animation: demo-caso-latido 1.6s var(--ease-soft) infinite; }
  .demo-caso__geraet.ist-alarm .demo-caso__rahmen { animation: demo-caso-alarma 1.6s ease-in-out infinite; }
  .demo-caso__schirm img.ist-neu { animation: demo-caso-entra var(--dur-fast) var(--ease-silk); }
}
@keyframes demo-caso-latido {
  0%, 100% { box-shadow: 0 0 0 0 rgba(226, 199, 146, 0.55); }
  55% { box-shadow: 0 0 0 9px rgba(226, 199, 146, 0); }
}
@keyframes demo-caso-alarma {
  0%, 100% { box-shadow: 0 0 0 2px rgba(230, 162, 60, 0.75), 0 0 0 0 rgba(230, 162, 60, 0.45); }
  50% { box-shadow: 0 0 0 2px rgba(230, 162, 60, 0.75), 0 0 0 12px rgba(230, 162, 60, 0); }
}
@keyframes demo-caso-entra {
  from { opacity: 0.35; }
  to { opacity: 1; }
}

/* Los botones de abajo. */
.demo-caso__steuer {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  margin-block-start: var(--sp-5);
}
.demo-caso__steuer .btn[hidden] { display: none; }
.demo-caso__steuer .btn:disabled { opacity: 0.4; cursor: default; }

/* En el móvil se ve un aparato cada vez: el que tiene la acción. Arriba, tres pestañas. */
.demo-caso__reiter { display: none; }
@media (max-width: 999px) {
  .demo-caso__reiter {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--sp-2);
    margin-block-end: var(--sp-4);
  }
  .demo-caso__reiterknopf {
    min-block-size: 44px;
    padding: var(--sp-2) var(--sp-3);
    border: 1px solid var(--hair);
    border-radius: 999px;
    background: transparent;
    color: inherit;
    font: inherit;
    font-size: var(--fs-small);
    cursor: pointer;
  }
  .bloque-claro .demo-caso__reiterknopf { border-color: var(--border-on-light); }
  .demo-caso__reiterknopf[aria-pressed='true'] {
    border-color: var(--gold);
    background: var(--gold-glow);
  }
  .demo-caso__reiterknopf.hat-aktion::after { /* punto: aquí pasa algo ahora */
    content: '';
    display: inline-block;
    inline-size: 0.5em;
    block-size: 0.5em;
    margin-inline-start: 0.45em;
    border-radius: 50%;
    background: var(--gold-bright);
    vertical-align: 0.1em;
  }
  .demo-caso__buehne { display: block; }
  .demo-caso__geraet { display: none; opacity: 1; }
  .demo-caso__geraet.ist-sichtbar { display: block; }
  /* El móvil dibujado cabe entero en la pantalla junto a la cabecera y los botones:
     su alto (ancho / 0,462) no pasa del alto visible menos unos 17rem. */
  .demo-caso__geraet--gast,
  .demo-caso__geraet--service { max-inline-size: min(22rem, calc((100svh - 17rem) * 0.462)); margin-inline: auto; }
  .demo-caso__geraet .demo-caso__name { display: none; }
  /* La Zentrale es una pantalla de 1280 px: encogida al ancho del móvil no se lee. Se pinta a
     56rem dentro de un marco que se desplaza en horizontal; el JS centra el botón que toca. */
  .demo-caso__geraet--zentrale .demo-caso__rahmen {
    overflow-x: auto;
    overscroll-behavior-x: contain;
  }
  .demo-caso__geraet--zentrale .demo-caso__schirm { inline-size: 56rem; }
}