@font-face {
  font-family: "Antonio";
  src: url("fonts/Antonio-wght.woff2") format("woff2");
  font-weight: 100 700;
  font-display: swap;
}

:root {
  /* Tempo der Einschaltsequenz: 1 = ca. 1,1 s, 0.7 = schneller, 1.5 = langsamer */
  --boot: 1;
  --bg: #000;
  --peach: #ff9966;
  --orange: #ff8800;
  --lilac: #cc99ff;
  --gold: #ffcc66;
  --sky: #99ccff;
  --rose: #dd6688;
  --tan: #cc9966;
  --red: #ff3344;
  --side: 150px;
  --bar: 34px;
  --gap: 6px;
  --radius: 60px;
}

* { box-sizing: border-box; }

html, body { margin: 0; background: var(--bg); }

body {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 16px;
  color: #000;
  font-family: "Antonio", "Oswald", "Bebas Neue", "Roboto Condensed", "Arial Narrow", sans-serif;
  font-stretch: condensed;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.frame {
  width: 100%;
  max-width: 900px;
  display: grid;
  grid-template-columns: var(--side) 1fr;
  grid-template-rows: auto 1fr auto;
  column-gap: var(--gap);
}

/* Ellbogen: farbige Ecke mit innen ausgeschnittener Rundung */
.elbow {
  position: relative;
  height: calc(var(--bar) + var(--radius));
  background: var(--orange);
}
.elbow::after {
  content: "";
  position: absolute;
  left: calc(var(--side) * 0.62);
  right: calc(-1 * var(--gap));
  background: var(--bg);
}
.elbow-top { border-top-left-radius: var(--radius); }
.elbow-top::after {
  top: var(--bar);
  bottom: 0;
  border-top-left-radius: calc(var(--radius) * 0.55);
}
.elbow-bottom { border-bottom-left-radius: var(--radius); background: var(--lilac); }
.elbow-bottom::after {
  top: 0;
  bottom: var(--bar);
  border-bottom-left-radius: calc(var(--radius) * 0.55);
}

.bar {
  display: flex;
  gap: var(--gap);
  height: var(--bar);
}
.bar-top { align-self: start; }
.bar-bottom { align-self: end; }

.seg { height: 100%; }
.seg-a { flex: 3; background: var(--orange); }
.seg-b { flex: 1; background: var(--peach); }
.seg-c { flex: 4; background: var(--lilac); }
.seg-d { flex: 1; background: var(--sky); border-radius: 0 999px 999px 0; }

h1 {
  margin: -8px 0 0;
  padding: 0 4px 0 10px;
  color: var(--peach);
  font-size: 2.6rem;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.12em;
  background: var(--bg);
}

.side {
  display: flex;
  flex-direction: column;
  gap: var(--gap);
  width: calc(var(--side) * 0.62);
  padding: var(--gap) 0;
}
.block {
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
  min-height: 56px;
  padding: 4px 8px;
  font-size: 0.85rem;
  font-weight: 600;
}
.b1 { background: var(--peach); }
.b2 { background: var(--tan); min-height: 90px; }
.b3 { background: var(--sky); }
.b4 { background: var(--rose); }
.b5 { background: var(--lilac); }
.fill { flex: 1; min-height: 20px; }

.content { padding: 22px 0 28px 18px; }

.readout {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 2px 10px;
  font-family: ui-monospace, "DejaVu Sans Mono", Menlo, monospace;
  font-size: 0.78rem;
  letter-spacing: 0.04em;
}
.cell {
  padding: 1px 3px;
  text-align: right;
  border-radius: 3px;
  transition: background .2s, color .2s;
}
.cell.t1 { color: var(--peach); }
.cell.t2 { color: var(--sky); }
.cell.t3 { color: var(--lilac); }
.cell.t4 { color: var(--gold); }
.cell.t5 { color: #8a8a8a; }
.cell.blink { animation: blink .5s ease-out; }
.cell.hot {
  background: var(--gold);
  color: #000;
}
.cell.hot.blink { animation-name: blink-hot; }
@keyframes blink {
  0%   { color: #fff; }
  100% { }
}
@keyframes blink-hot {
  0%   { background: #fff; }
  100% { }
}

.status {
  margin: 10px 0 18px;
  padding-left: 2px;
  color: var(--sky);
  font-size: 1rem;
  letter-spacing: 0.14em;
  min-height: 1.4em;
}
.status.busy { color: var(--gold); }
.status.busy::after {
  content: " ▮";
  animation: caret 1s steps(2, start) infinite;
}
@keyframes caret { to { visibility: hidden; } }

.clock {
  align-self: center;
  padding: 0 10px;
  color: var(--sky);
  font-size: 1.6rem;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.1em;
  font-variant-numeric: tabular-nums;
}

.buttons {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px 18px;
}

.buttons a {
  --c: var(--peach);
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
  height: 64px;
  padding: 0 22px 8px;
  background: var(--c);
  color: #000;
  border-radius: 999px;
  text-decoration: none;
  font-size: 1.35rem;
  font-weight: 600;
  transition: filter .15s, transform .15s;
}
.buttons a:hover,
.buttons a:focus-visible {
  outline: none;
  filter: brightness(1.18);
  transform: translateX(4px);
}
.buttons a:active { filter: brightness(0.85); }

.buttons { counter-reset: btn; }
.buttons li { counter-increment: btn; }
.buttons a { position: relative; }
.buttons a::before {
  content: counter(btn, decimal-leading-zero);
  position: absolute;
  left: 46px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 0.85rem;
  opacity: 0.55;
}

.sound {
  border: 0;
  padding: 0 14px;
  color: #000;
  font: inherit;
  font-size: 0.85rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  text-align: right;
  cursor: pointer;
}
.sound:hover, .sound:focus-visible { filter: brightness(1.15); outline: none; }
.sound[aria-pressed="true"] { background: var(--gold); }
.lamp {
  position: absolute;
  left: 22px;
  top: 50%;
  width: 14px;
  height: 14px;
  margin-top: -7px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.25);
  box-shadow: inset 0 0 0 2px rgba(0, 0, 0, 0.55);
}
.buttons a[data-state="up"] .lamp {
  background: #33ff99;
  box-shadow: inset 0 0 0 2px rgba(0, 0, 0, 0.55), 0 0 8px #33ff99;
}
.buttons a[data-state="pending"] .lamp,
.buttons a[data-state="maintenance"] .lamp { background: #fff; }
.buttons a[data-state="down"] .lamp {
  background: var(--red);
  box-shadow: inset 0 0 0 2px rgba(0, 0, 0, 0.55), 0 0 10px var(--red);
  animation: pulse 1s ease-in-out infinite;
}
@keyframes pulse { 50% { opacity: 0.25; } }

body.alert .elbow,
body.alert .seg-a,
body.alert .seg-c { background: var(--red); animation: alert 2s ease-in-out infinite; }
body.alert .status { color: var(--red); }
@keyframes alert { 50% { filter: brightness(0.6); } }

.buttons .c-peach { --c: var(--peach); }
.buttons .c-lilac { --c: var(--lilac); }
.buttons .c-gold  { --c: var(--gold); }
.buttons .c-sky   { --c: var(--sky); }
.buttons .c-rose  { --c: var(--rose); }
.buttons .c-tan   { --c: var(--tan); }

/* ── Einschaltsequenz ─────────────────────────────────────────────── */
.elbow       { animation: boot-fade calc(var(--boot) * 150ms) ease-out backwards; }
.seg         { transform-origin: left center; animation: boot-sweep calc(var(--boot) * 250ms) ease-out backwards; }
.seg-a       { animation-delay: calc(var(--boot) * 50ms); }
.seg-b       { animation-delay: calc(var(--boot) * 110ms); }
.seg-c       { animation-delay: calc(var(--boot) * 80ms); }
.seg-d       { animation-delay: calc(var(--boot) * 140ms); }
h1, .clock   { animation: boot-fade calc(var(--boot) * 200ms) ease-out calc(var(--boot) * 300ms) backwards; }
.block       { animation: boot-drop calc(var(--boot) * 200ms) ease-out backwards; }
.b1          { animation-delay: calc(var(--boot) * 150ms); }
.b2          { animation-delay: calc(var(--boot) * 210ms); }
.b3          { animation-delay: calc(var(--boot) * 270ms); }
.b4          { animation-delay: calc(var(--boot) * 330ms); }
.b5          { animation-delay: calc(var(--boot) * 390ms); }
.readout     { animation: boot-flicker calc(var(--boot) * 350ms) steps(1) calc(var(--boot) * 350ms) backwards; }
.status      { animation: boot-fade calc(var(--boot) * 150ms) ease-out calc(var(--boot) * 450ms) backwards; }
.buttons li  { animation: boot-slide calc(var(--boot) * 220ms) ease-out backwards; }
.buttons li:nth-child(1) { animation-delay: calc(var(--boot) * 500ms); }
.buttons li:nth-child(2) { animation-delay: calc(var(--boot) * 570ms); }
.buttons li:nth-child(3) { animation-delay: calc(var(--boot) * 640ms); }
.buttons li:nth-child(4) { animation-delay: calc(var(--boot) * 710ms); }
.buttons li:nth-child(5) { animation-delay: calc(var(--boot) * 780ms); }
.buttons li:nth-child(6) { animation-delay: calc(var(--boot) * 850ms); }

@keyframes boot-fade    { from { opacity: 0; } }
@keyframes boot-sweep   { from { transform: scaleX(0); } }
@keyframes boot-drop    { from { opacity: 0; transform: translateY(-10px); } }
@keyframes boot-slide   { from { opacity: 0; transform: translateX(-16px); } }
@keyframes boot-flicker {
  0%   { opacity: 0; }
  20%  { opacity: 0.6; }
  35%  { opacity: 0; }
  55%  { opacity: 1; }
  70%  { opacity: 0.3; }
  100% { opacity: 1; }
}

@media (max-width: 600px) {
  :root { --side: 90px; --bar: 26px; --radius: 40px; }
  h1 { font-size: 1.8rem; }
  .block { font-size: 0.7rem; min-height: 44px; }
  .b2 { min-height: 60px; }
  .content { padding-left: 10px; }
  .readout { grid-template-columns: repeat(6, minmax(0, 1fr)); font-size: 0.7rem; }
  .readout .cell:nth-child(n+31) { display: none; }
  .clock { font-size: 1.1rem; }
  .buttons { grid-template-columns: 1fr; gap: 10px; }
  .buttons a { height: 52px; font-size: 1.15rem; }
}

@media (prefers-reduced-motion: reduce) {
  .elbow, .seg, h1, .clock, .block, .readout, .status, .buttons li { animation: none; }
  .buttons a, .cell { transition: none; }
  .buttons a:hover, .buttons a:focus-visible { transform: none; }
  .status.busy::after { animation: none; }
  .buttons a[data-state="down"] .lamp,
  body.alert .elbow, body.alert .seg-a, body.alert .seg-c { animation: none; }
}