/* Lazy Windsheimers — Komponenten. Alles aus tokens.css, Präfix .lw- */

/* Button: eckig, Versalien, harter Schatten */
.lw-btn { font-family:var(--font-stencil); font-weight:800; font-size:15px; letter-spacing:.12em; text-transform:uppercase;
  padding:var(--space-3) var(--space-5); border:2px solid var(--lacquer); border-radius:var(--radius-none);
  background:var(--lacquer); color:var(--on-lacquer); cursor:pointer; box-shadow:4px 4px 0 var(--lacquer-deep);
  transition:transform .08s, box-shadow .08s; }
.lw-btn:hover { transform:translate(-1px,-1px); box-shadow:5px 5px 0 var(--lacquer-deep); }
.lw-btn:active { transform:translate(3px,3px); box-shadow:1px 1px 0 var(--lacquer-deep); background:var(--lacquer-deep); }
.lw-btn:focus-visible { outline:2px solid var(--led); outline-offset:3px; box-shadow:var(--glow-led); }
.lw-btn--ghost { background:transparent; color:var(--bone); border-color:var(--seam); box-shadow:4px 4px 0 var(--seam); }
.lw-btn--ghost:active { background:var(--grille); }
.lw-btn[disabled] { background:var(--grille); color:var(--chrome); border-color:var(--seam); box-shadow:none; cursor:not-allowed; transform:none; }

/* Badge: kleine Plakette mit LED */
.lw-badge { display:inline-flex; align-items:center; gap:var(--space-2); font-family:var(--font-stencil); font-weight:800; font-size:13px;
  letter-spacing:.14em; text-transform:uppercase; padding:4px var(--space-2); border:1px solid var(--seam); border-radius:var(--radius-screw);
  color:var(--bone-muted); background:var(--amp); }
.lw-badge::before { content:""; width:8px; height:8px; border-radius:var(--radius-eye); background:var(--chrome); }
.lw-badge--live { color:var(--bone); border-color:var(--led); }
.lw-badge--live::before { background:var(--led); box-shadow:var(--glow-led); animation:lw-blink 1.6s steps(2,end) infinite; }
.lw-badge--info::before { background:var(--standby); }
.lw-badge--sold { background:var(--lacquer); color:var(--on-lacquer); border-color:var(--lacquer); }
.lw-badge--sold::before { background:var(--on-lacquer); }
@keyframes lw-blink { 50% { opacity:.25; } }
@media (prefers-reduced-motion: reduce) { .lw-badge--live::before { animation:none; } }

/* Gig-Karte */
.lw-gig { color:var(--bone); display:grid; grid-template-columns:auto 1fr auto; gap:var(--space-5); align-items:center; padding:var(--space-5);
  background:var(--amp); border:1px solid var(--seam); box-shadow:var(--drop-box); max-width:640px; }
.lw-gig__date { font-family:var(--font-readout); font-size:44px; line-height:.9; color:var(--led); text-align:center; min-width:64px; }
.lw-gig__date small { display:block; font-size:20px; color:var(--bone-muted); }
.lw-gig__title { font-family:var(--font-stencil); font-weight:800; font-size:22px; letter-spacing:.03em; text-transform:uppercase; margin:0 0 4px; }
.lw-gig__meta { font-size:14px; line-height:20px; color:var(--bone-muted); margin:0; }
@media (max-width:480px) { .lw-gig { grid-template-columns:auto 1fr; } .lw-gig > :last-child { grid-column:1 / -1; } }

/* VU-Meter: LED-Kette */
.lw-vu { display:inline-flex; gap:var(--space-1); padding:var(--space-2); background:var(--coffin); border:1px solid var(--seam); }
.lw-vu i { width:10px; height:22px; background:var(--grille); }
.lw-vu i.on { background:var(--bone-muted); }
.lw-vu i.on.hot { background:var(--lacquer); }
.lw-vu i.on.peak { background:var(--led); box-shadow:var(--glow-led); }
.lw-vu__label { font-family:var(--font-readout); font-size:20px; color:var(--bone-muted); }

/* Error-Panel: der Running Gag */
.lw-error { padding:var(--space-5); background:var(--coffin); border:2px dashed var(--lacquer); max-width:520px; }
.lw-error__code { font-family:var(--font-readout); font-size:56px; line-height:1; color:var(--led); margin:0; }
.lw-error__text { font-family:var(--font-readout); font-size:20px; color:var(--bone-muted); margin:var(--space-2) 0 var(--space-4); text-transform:uppercase; }