/* Gemeinsame Basis: Schriften, Reset, Wand, Icons, Bedienelemente im Show-Stil.
   Keine Farbwerte hier – alles kommt aus theme.css. */
@font-face { font-family: "Bungee"; src: url("fonts/bungee-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Barlow Condensed"; src: url("fonts/barlow-condensed-latin-600-normal.woff2") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Barlow Condensed"; src: url("fonts/barlow-condensed-latin-700-normal.woff2") format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Permanent Marker"; src: url("fonts/permanent-marker-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-display: swap; }

*, *::before, *::after { box-sizing: border-box; }
html { margin: 0; scrollbar-width: thin; scrollbar-color: var(--ink) var(--cream-deep); }
body {
  margin: 0; min-height: 100vh; color: var(--ink);
  font: 600 1.25rem/1.2 var(--font-body);
  background:
    repeating-conic-gradient(from 0deg at 50% 36%, var(--wall-a) 0 5deg, var(--wall-b) 5deg 10deg);
  background-color: var(--wall-a);
  transition: --wall-a .4s ease, --wall-b .4s ease, --cab .4s ease, --sign .4s ease, --board .4s ease, --board-frame .4s ease, --chalk .4s ease, --chalk-hi .4s ease;
  -webkit-tap-highlight-color: transparent;
}
/* Papier-/Rauschtextur über allem */
body::before {
  content: ""; position: fixed; inset: 0; z-index: 100; pointer-events: none;
  background: url("noise.svg"); opacity: .22; mix-blend-mode: multiply;
}
[hidden] { display: none !important; }
a { color: inherit; }
button { font: inherit; color: inherit; }
::selection { background: var(--yellow); color: var(--ink); }

/* eigene Scrollbars */
::-webkit-scrollbar { width: 1.1rem; height: 1.1rem; }
::-webkit-scrollbar-track { background: var(--cream-deep); border-left: .2rem solid var(--ink); }
::-webkit-scrollbar-thumb { background: var(--red); border: .2rem solid var(--ink); }
::-webkit-scrollbar-thumb:hover { background: var(--red-light); }

/* eigener Fokus-Ring: harter Doppelring */
:focus { outline: none; }
html :focus-visible {
  outline: none;
  box-shadow: var(--sh, 0 0 0 0 transparent), 0 0 0 .22rem var(--ink), 0 0 0 .5rem var(--yellow), 0 0 0 .72rem var(--ink);
}

/* ---------- Icons ---------- */
.ic { display: block; width: 1em; height: 1em; overflow: visible; }
.ig { fill: none; stroke: var(--ink); stroke-width: 3; stroke-linejoin: round; stroke-linecap: round; }
.ig .fr { fill: var(--red); } .ig .fy { fill: var(--yellow); } .ig .ft { fill: var(--petrol); }
.ig .fc { fill: var(--cream); } .ig .fk { fill: var(--ink); } .ig .fm { fill: var(--chrome-2); }
.ig .sr { stroke: var(--red); } .ig .sy { stroke: var(--yellow); } .ig .sc { stroke: var(--cream); }
.ig .pt1 { stroke-width: 11; } .ig .pt2 { stroke: var(--yellow); stroke-width: 5; }

/* ---------- Metall / Schrauben / Birnen ---------- */
.chrome {
  background: linear-gradient(180deg, var(--chrome-hi) 0 10%, var(--chrome-1) 10% 46%, var(--chrome-3) 46% 52%, var(--chrome-2) 52% 100%);
}
.screw {
  position: absolute; width: 1.2rem; height: 1.2rem; border-radius: 50%; border: .17rem solid var(--ink);
  background: radial-gradient(circle at 34% 30%, var(--chrome-hi) 0 14%, var(--chrome-1) 15% 52%, var(--chrome-2) 53%);
  transform: rotate(var(--r, 25deg)); pointer-events: none;
}
.screw::after { content: ""; position: absolute; left: 14%; right: 14%; top: calc(50% - .09rem); height: .18rem; background: var(--ink); }
.screw.tl { top: .7rem; left: .7rem; } .screw.tr { top: .7rem; right: .7rem; }
.screw.bl { bottom: .7rem; left: .7rem; } .screw.br { bottom: .7rem; right: .7rem; }

.bulbs { position: absolute; pointer-events: none; }
.bulb {
  position: absolute; width: 1.05rem; height: 1.05rem; border-radius: 50%; transform: translate(-50%, -50%);
  background: var(--bulb-off); border: .15rem solid var(--ink);
}
.bulb.on { background: var(--bulb-on); box-shadow: 0 0 0 .2rem var(--bulb-halo); }

/* ---------- Tooltips (eigene, kein title-Attribut) ---------- */
[data-tip] { position: relative; }
[data-tip]::after {
  content: attr(data-tip); position: absolute; left: 50%; bottom: calc(100% + .9rem); transform: translateX(-50%);
  padding: .35rem .8rem; background: var(--ink); color: var(--cream); border: .16rem solid var(--yellow);
  font: 400 .85rem/1.2 var(--font-display); letter-spacing: .04em; text-transform: uppercase; white-space: nowrap;
  opacity: 0; pointer-events: none; z-index: 50; transition: opacity .12s;
}
[data-tip]:hover::after, [data-tip]:focus-visible::after { opacity: 1; }

/* ---------- Tasten ---------- */
.btn {
  --sh: .32rem .32rem 0 var(--ink);
  appearance: none; -webkit-appearance: none; position: relative; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; gap: .6rem;
  padding: .7rem 1.3rem; min-height: 3.2rem;
  background: var(--cream); color: var(--ink); border: .25rem solid var(--ink); border-radius: .35rem;
  font: 400 1.05rem/1 var(--font-display); letter-spacing: .04em; text-transform: uppercase; text-decoration: none;
  box-shadow: var(--sh); user-select: none; -webkit-user-select: none; touch-action: manipulation;
  transition: transform .06s, box-shadow .06s, background-color .1s;
}
.btn .ic { width: 1.5rem; height: 1.5rem; flex: none; }
.btn:hover { background-color: var(--yellow-light); }
.btn:active, .btn.is-down { --sh: .06rem .06rem 0 var(--ink); transform: translate(.26rem, .26rem); }
.btn:disabled, .btn[aria-disabled="true"] {
  cursor: not-allowed; color: var(--ink-a30); --sh: .12rem .12rem 0 var(--ink-a30); border-color: var(--ink-a30);
  background: repeating-linear-gradient(135deg, var(--cream-deep) 0 .5rem, var(--cream) .5rem 1rem);
}
.btn:disabled:hover { background-color: var(--cream); }
.btn.red { background-color: var(--red); color: var(--cream); }
.btn.red:hover { background-color: var(--red-light); }
.btn.yellow { background-color: var(--yellow); }
.btn.yellow:hover { background-color: var(--yellow-light); }
.btn.petrol { background-color: var(--petrol); color: var(--cream); }
.btn.petrol:hover { background-color: var(--petrol-light); }