/* ============================================================
   INDUSTRIENACHT 2026 – Retro-Arcade-Look
   Nur für industrienacht.html, wird nach style.css geladen und
   greift ausschliesslich unter body.arcade. Farben und Pixel-
   Grammatik folgen dem Foodstand (thingware-foodstand, pixel.css):
   harte Kanten, Pixel-Schatten, Bewegung in ganzen Schritten.
   Pixelschrift nur für Titel, Zahlen und Etiketten – Fliesstext
   bleibt lesbar.
   ============================================================ */

body.arcade {
  --bg:      #1a1f2e;
  --bg-deep: #10141e;
  --ink:     #f2f4ff;
  --muted:   #9ba8bb;
  --accent:  #6ea8fe;
  --amber:   #ffd83d;
  --green:   #6df2a4;
  --red:     #ff5c5c;
  --panel:   #232a3d;
  --magenta: #ff3df2;
  --cyan:    #3df2ff;
  --violet:  #9b5cff;
  --pixel: 'Press Start 2P', monospace;

  background: var(--bg); color: var(--ink);
  /* feines Pixelraster, wie auf der Bestellseite */
  background-image: linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px),
                    linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px);
  background-size: 8px 8px;
}
body.arcade :focus-visible { outline: 3px solid var(--amber); outline-offset: 2px; }
.px { font-family: var(--pixel); line-height: 1.6; letter-spacing: .02em; text-transform: uppercase; }

/* ---------- Kopfzeile und Fusszeile im Dunkeln ---------- */
body.arcade .header {
  background: rgba(16, 20, 30, 0.94);
  border-bottom: 3px solid var(--accent);
}
body.arcade .header.scrolled { box-shadow: 0 4px 0 var(--bg-deep); }
body.arcade .nav-links a { color: var(--muted); }
body.arcade .nav-links a:hover { color: var(--ink); }
body.arcade .nav-links a::after { background: var(--amber); border-radius: 0; }
body.arcade .nav-event { color: var(--amber); font-family: var(--pixel); font-size: .62rem; }
body.arcade .lang-btn { color: var(--muted); border-radius: 0; }
body.arcade .lang-btn:hover { border-color: var(--amber); color: var(--amber); }
body.arcade .lang-btn.active { background: var(--amber); color: var(--bg-deep); box-shadow: 2px 2px 0 var(--bg-deep); }
body.arcade .menu-toggle span { background: var(--ink); border-radius: 0; }
body.arcade .footer { background: var(--bg-deep); border-top: 3px solid var(--accent); color: var(--muted); }
body.arcade .footer-logo { filter: none; opacity: .85; }
@media (max-width: 768px) {
  body.arcade .nav-links {
    background: rgba(16, 20, 30, 0.97);
    border-bottom: 3px solid var(--accent); box-shadow: 0 6px 0 var(--bg-deep);
  }
}

/* ---------- Grundgerüst ---------- */
.arcade-page { padding-top: 120px; padding-bottom: 80px; }
body.arcade .legal-back { color: var(--accent); font-family: var(--pixel); font-size: .58rem; text-transform: uppercase; margin-bottom: 36px; }
body.arcade .legal-back:hover { color: var(--amber); text-decoration: none; }

.panel { background: var(--panel); border: 3px solid var(--bg-deep); box-shadow: 6px 6px 0 var(--bg-deep); }

/* UV-Lichtstreifen: ein Trenner zwischen den Abschnitten, drei Neonlinien */
.uv {
  height: 12px; margin: 64px 0; border: 0;
  background: repeating-linear-gradient(90deg,
    var(--magenta) 0 24px, transparent 24px 32px,
    var(--cyan) 32px 56px, transparent 56px 64px,
    var(--violet) 64px 88px, transparent 88px 96px);
  box-shadow: 0 0 18px rgba(255, 61, 242, .35), 0 0 32px rgba(61, 242, 255, .2);
  opacity: .9;
}

/* ---------- Buttons ---------- */
body.arcade .btn {
  font-family: var(--pixel); font-size: .68rem; text-transform: uppercase; line-height: 1.5;
  border-radius: 0; border: 3px solid var(--bg-deep); box-shadow: 4px 4px 0 var(--bg-deep);
  padding: 14px 20px; transition: none;
}
body.arcade .btn:active { transform: translate(3px, 3px); box-shadow: 1px 1px 0 var(--bg-deep); }
body.arcade .btn-primary { background: var(--amber); color: var(--bg-deep); }
body.arcade .btn-primary:hover { background: #ffe680; transform: none; box-shadow: 4px 4px 0 var(--bg-deep); }
body.arcade .btn-secondary { background: transparent; color: var(--ink); border-color: var(--accent); box-shadow: 4px 4px 0 var(--accent); }
body.arcade .btn-secondary:hover { background: rgba(110, 168, 254, .12); border-color: var(--accent); }
body.arcade .btn-primary::before { content: '▶ '; animation: blink-step 1s steps(2, start) infinite; }
@keyframes blink-step { to { visibility: hidden; } }

/* ---------- Einstieg ---------- */
.ar-hero { max-width: 820px; }
.ar-badge {
  display: inline-flex; align-items: center; gap: 10px;
  background: var(--panel); border: 3px solid var(--bg-deep); box-shadow: 4px 4px 0 var(--bg-deep);
  color: var(--green); font-family: var(--pixel); font-size: .6rem; text-transform: uppercase;
  padding: 10px 14px; margin-bottom: 26px;
}
.ar-badge svg { width: 14px; height: 14px; flex: none; }
.ar-hero h1 {
  font-family: var(--pixel); text-transform: uppercase;
  font-size: clamp(1.25rem, 3.6vw, 2.3rem); line-height: 1.45;
  color: var(--amber); text-shadow: 5px 5px 0 var(--bg-deep);
  margin-bottom: 22px;
}
.ar-hero h1 em { font-style: normal; color: var(--cyan); }
.ar-lead { font-size: 1.08rem; color: var(--muted); line-height: 1.8; margin-bottom: 28px; }
.ar-cta { display: flex; gap: 16px; flex-wrap: wrap; margin-bottom: 14px; }
.ar-hint { font-family: var(--pixel); font-size: .55rem; color: var(--muted); text-transform: uppercase; line-height: 1.8; margin-bottom: 56px; }
.ar-hint .cursor { animation: blink-step 1s steps(2, start) infinite; }

/* Rückblick-Kasten: der Anlass ist vorbei */
.ar-over { padding: 20px 22px; margin-bottom: 26px; border-left: 6px solid var(--red); }
.ar-over h2 {
  font-family: var(--pixel); text-transform: uppercase; font-size: .72rem; line-height: 1.6;
  color: var(--red); text-shadow: 3px 3px 0 var(--bg-deep); margin-bottom: 12px;
}
.ar-over p { color: var(--muted); line-height: 1.75; margin: 0; max-width: 72ch; }
.ar-over p b { color: var(--ink); }

/* ---------- Bilder ---------- */
.ar-figure { margin: 0 0 56px; }
.ar-figure img, .ar-gallery img {
  width: 100%; height: auto; display: block;
  border: 3px solid var(--bg-deep); box-shadow: 8px 8px 0 var(--bg-deep);
  image-rendering: auto;
}
.ar-figure figcaption, .ar-gallery figcaption {
  font-size: .88rem; color: var(--muted); margin-top: 14px; line-height: 1.6;
}
.ar-figure figcaption b, .ar-gallery figcaption b { color: var(--ink); font-weight: 600; }
.ar-gallery { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 28px; margin: 36px 0 8px; }
.ar-gallery figure { margin: 0; }

/* Fotos vom Abend: Hochformat, deshalb schmalere Spalten als die Pixel-Galerie */
.ar-photos { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 22px; margin-top: 26px; }
.ar-photos figure { margin: 0; }
.ar-photos img {
  width: 100%; height: auto; display: block;
  border: 3px solid var(--bg-deep); box-shadow: 6px 6px 0 var(--bg-deep);
}
.ar-photos figcaption { font-size: .84rem; color: var(--muted); margin-top: 12px; line-height: 1.6; }
@media (max-width: 560px) {
  .ar-photos { grid-template-columns: 1fr 1fr; gap: 14px; }
  .ar-photos img { box-shadow: 4px 4px 0 var(--bg-deep); }
  .ar-photos figcaption { font-size: .78rem; margin-top: 8px; }
}

/* ---------- Eckdaten ---------- */
.ar-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 20px; margin-bottom: 8px; }
.ar-facts > div { padding: 20px 22px; }
.ar-fact-l { font-family: var(--pixel); font-size: .55rem; text-transform: uppercase; color: var(--accent); margin-bottom: 12px; }
.ar-fact-v { color: var(--ink); font-weight: 500; line-height: 1.65; }

/* ---------- Abschnitte ---------- */
/* style.css gibt jeder <section> 88px Luft – hier trennen die UV-Streifen, nicht der Abstand */
body.arcade section { padding: 0; }
.ar-section { margin-bottom: 8px; }
.ar-eyebrow { display: inline-block; font-family: var(--pixel); font-size: .55rem; text-transform: uppercase; color: var(--green); margin-bottom: 14px; }
.ar-section h2 {
  font-family: var(--pixel); text-transform: uppercase;
  font-size: clamp(.95rem, 2.2vw, 1.4rem); line-height: 1.5;
  color: var(--ink); text-shadow: 4px 4px 0 var(--bg-deep); margin-bottom: 18px;
}
.ar-section h2 em { font-style: normal; color: var(--amber); }
.ar-section > p, .ar-text p { color: var(--muted); line-height: 1.8; margin-bottom: 18px; max-width: 72ch; }
.ar-section p b { color: var(--ink); font-weight: 600; }
.ar-text a { color: var(--amber); text-decoration: underline; }

/* Levels: Nummer links, Text rechts, Boss-Level in Rot */
.ar-levels { display: grid; gap: 14px; margin: 8px 0 12px; counter-reset: level; }
.ar-levels li { display: grid; grid-template-columns: 74px 1fr; gap: 18px; align-items: start; padding: 18px 20px 18px 16px; }
.ar-levels .lv {
  font-family: var(--pixel); font-size: .5rem; line-height: 1.6; text-align: center; text-transform: uppercase;
  color: var(--bg-deep); background: var(--cyan); border: 3px solid var(--bg-deep);
  padding: 8px 4px; align-self: center;
}
.ar-levels .lv b { display: block; font-size: 1.1rem; margin-top: 4px; }
.ar-levels h3 { font-family: var(--pixel); font-size: .62rem; text-transform: uppercase; color: var(--ink); line-height: 1.7; margin-bottom: 8px; }
.ar-levels p { color: var(--muted); line-height: 1.7; margin: 0; }
.ar-levels li.boss .lv { background: var(--red); color: var(--ink); }
.ar-levels li.boss h3 { color: var(--red); }
.ar-levels li.boss a { color: var(--amber); text-decoration: underline; }

/* Kasten zur Level-App: Text links, Knopf rechts */
.ar-app { display: grid; grid-template-columns: 1fr auto; gap: 20px; align-items: center; padding: 20px 22px; margin-top: 18px; border-left: 6px solid var(--green); }
.ar-app h3 { font-family: var(--pixel); font-size: .62rem; text-transform: uppercase; color: var(--green); margin-bottom: 8px; }
.ar-app p { color: var(--muted); line-height: 1.7; margin: 0; }
.ar-app p b { color: var(--ink); }
@media (max-width: 640px) { .ar-app { grid-template-columns: 1fr; } }

.ar-meta { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 24px; margin-top: 36px; }
.ar-meta h3 { font-family: var(--pixel); font-size: .55rem; text-transform: uppercase; color: var(--accent); margin-bottom: 8px; }
.ar-meta p { color: var(--muted); margin: 0; font-size: .94rem; line-height: 1.7; }

/* ---------- Foodstand ---------- */
.ar-food .ar-eyebrow { color: var(--amber); }
.ar-menu { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 22px; margin: 28px 0 24px; }
.ar-menu li { display: grid; grid-template-columns: 72px 1fr; gap: 16px; align-items: center; padding: 18px 20px; }
.ar-menu .name { font-family: var(--pixel); font-size: .62rem; text-transform: uppercase; color: var(--ink); line-height: 1.7; }
.ar-menu .sub { font-size: .84rem; color: var(--muted); margin-top: 4px; line-height: 1.5; }
.ar-menu .price { font-family: var(--pixel); font-size: .8rem; color: var(--amber); margin-top: 10px; }
.ar-menu .price small { font-size: .5rem; color: var(--muted); margin-left: 6px; }
.ar-food-note { display: grid; grid-template-columns: auto 1fr; gap: 16px; align-items: start; padding: 18px 22px; margin-top: 8px; }
.ar-food-note svg { width: 26px; height: 26px; color: var(--green); flex: none; margin-top: 2px; }
.ar-food-note p { margin: 0; max-width: none; }

/* Sprites: zwei Frames, im Pixeltakt versetzt (übernommen aus pixel.css) */
.spr { position: relative; display: inline-block; image-rendering: pixelated; }
.spr svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.spr .f2 { opacity: 0; }
.spr .f1 { animation: frame-a 1.4s steps(1) infinite var(--d, 0s); }
.spr .f2 { animation: frame-b 1.4s steps(1) infinite var(--d, 0s); }
@keyframes frame-a { 0%, 55% { opacity: 1; } 55.1%, 100% { opacity: 0; } }
@keyframes frame-b { 0%, 55% { opacity: 0; } 55.1%, 100% { opacity: 1; } }

/* ---------- TWANG32 ---------- */
.ar-twang .ar-eyebrow { color: var(--red); }
.ar-twang-grid { display: grid; grid-template-columns: 1.3fr 1fr; gap: 40px; align-items: start; }
.ar-prize { padding: 20px 22px; border-left: 6px solid var(--amber); margin-top: 8px; }
.ar-prize h3 { font-family: var(--pixel); font-size: .62rem; text-transform: uppercase; color: var(--amber); margin-bottom: 10px; }
.ar-prize p { margin: 0; max-width: none; }

/* Demo: drei Bahnen, jede Zelle eine LED. Leuchtende Punkte bekommen einen Glow. */
.twang-demo { padding: 18px 18px 14px; }
.twang-demo-label { font-family: var(--pixel); font-size: .5rem; text-transform: uppercase; color: var(--muted); text-align: center; margin-bottom: 14px; line-height: 1.7; }
.twang-strips { display: flex; justify-content: center; gap: 34px; }
.twang-strip { display: flex; flex-direction: column-reverse; gap: 3px; padding: 6px 5px; background: var(--bg-deep); border: 2px solid #2c3550; }
.twang-strip i { display: block; width: 12px; height: 7px; background: #262d40; }
.twang-strip i.p { background: var(--green); box-shadow: 0 0 8px var(--green); }
.twang-strip i.e { background: var(--red); box-shadow: 0 0 8px var(--red); }
.twang-strip i.g { background: var(--accent); box-shadow: 0 0 8px var(--accent); }
.twang-strip i.x { background: var(--amber); box-shadow: 0 0 10px var(--amber); }
.twang-legend { display: flex; justify-content: center; gap: 18px; flex-wrap: wrap; margin-top: 14px; font-family: var(--pixel); font-size: .48rem; text-transform: uppercase; color: var(--muted); }
.twang-legend i { display: inline-block; width: 10px; height: 10px; vertical-align: -1px; margin-right: 6px; }
.twang-legend .p i { background: var(--green); } .twang-legend .e i { background: var(--red); } .twang-legend .g i { background: var(--accent); }
.twang-score { display: flex; justify-content: space-between; gap: 12px; margin-top: 12px; font-family: var(--pixel); font-size: .5rem; color: var(--amber); text-transform: uppercase; }
.twang-score span:last-child { color: var(--muted); }

/* ---------- Gut zu wissen ---------- */
.ar-note { padding: 20px 24px; border-left: 6px solid var(--cyan); }
.ar-note ul { display: grid; gap: 12px; }
.ar-note li { color: var(--muted); line-height: 1.7; padding-left: 22px; position: relative; }
.ar-note li::before { content: '▸'; position: absolute; left: 0; color: var(--cyan); font-family: var(--pixel); font-size: .6rem; top: 4px; }

/* ---------- Bewegung aus, wenn gewünscht ---------- */
@media (prefers-reduced-motion: reduce) {
  body.arcade * { animation: none !important; transition: none !important; }
}

/* ---------- Schmale Bildschirme ---------- */
@media (max-width: 900px) {
  .ar-twang-grid { grid-template-columns: 1fr; }
  .twang-demo { max-width: 360px; margin: 0 auto; }
}
@media (max-width: 560px) {
  .arcade-page { padding-top: 96px; padding-bottom: 56px; }
  .uv { margin: 44px 0; }
  .ar-hero h1 { font-size: 1.15rem; }
  .ar-facts > div { padding: 16px 18px; }
  .ar-levels li { grid-template-columns: 62px 1fr; gap: 14px; padding: 14px 14px 14px 12px; }
  .ar-menu li { padding: 14px 16px; }
  .ar-figure img, .ar-gallery img { box-shadow: 5px 5px 0 var(--bg-deep); }
  .ar-gallery { gap: 20px; }
  .twang-strips { gap: 24px; }
  .ar-food-note { grid-template-columns: 1fr; gap: 8px; }
}