/* Gemeinsame Retro-Bausteine aller Jahrgänge: Laufschrift, Baustelle,
   Besucherzähler, 88x31-Buttons, Jahrgangswahl. Wird von 98/, xp/ und y2k5/ geladen. */

/* Laufschrift */
.marquee {
  overflow: hidden;
  white-space: nowrap;
  margin: 0 0 10px;
  padding: 3px 0;
  background: #000;
  color: #00ff00;
  font-family: "Fixedsys", "Lucida Console", "Courier New", monospace;
  font-size: 13px;
  box-shadow: inset 1px 1px grey, inset -1px -1px #fff;
}
.marquee span {
  display: inline-block;
  padding-left: 100%;
  animation: marquee 24s linear infinite;
}
@keyframes marquee { to { transform: translateX(-100%); } }

/* Baustelle */
.construction {
  margin: 0 0 10px;
  padding: 6px;
  text-align: center;
  background: repeating-linear-gradient(-45deg, #ffcc00 0 14px, #000 14px 28px);
}
.construction span {
  display: inline-block;
  padding: 2px 8px;
  background: #ffcc00;
  color: #000;
  font-weight: bold;
  border: 1px solid #000;
}

/* Besucherzähler */
.counter-line { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.counter {
  display: inline-flex;
  gap: 2px;
  padding: 2px;
  background: #000;
  border: 1px solid #444;
}
.counter span {
  padding: 0 4px;
  background: #111;
  color: #33ff33;
  font-family: "Courier New", monospace;
  font-weight: bold;
  font-size: 14px;
  line-height: 18px;
  border: 1px solid #2a2a2a;
}
.blink { color: #ff0000; font-weight: bold; animation: blink 1s steps(1) infinite; }
@keyframes blink { 50% { visibility: hidden; } }

/* 88x31-Buttons */
.b88s { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; }
.b88 {
  box-sizing: border-box;
  width: 88px;
  height: 31px;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border: 1px solid #000;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 9px;
  line-height: 1.1;
  font-weight: bold;
  text-align: center;
}
.b88 small { font-size: 8px; font-weight: normal; }
.b88.netscape { background: linear-gradient(#1a3f8f, #0b2452); color: #fff; }
.b88.res      { background: #000; color: #00ff00; font-family: "Courier New", monospace; }
.b88.notepad  { background: #fff; color: #000080; }
.b88.html     { background: #e34c26; color: #fff; }
.b88.nojs     { background: #ffcc00; color: #000; }
.b88.css      { background: #264de4; color: #fff; }
.b88.linux    { background: #dcdcdc; color: #000; }
.b88.apache   { background: #cc0000; color: #fff; }
.b88.ie6      { background: linear-gradient(#5aa9f5, #1d5fbf); color: #fff; }
.b88.winxp    { background: linear-gradient(#3c9a3c, #245edb); color: #fff; }
.b88.xpcss    { background: #ece9d8; color: #0046d5; border-color: #0831d9; }
.b88.firefox  { background: linear-gradient(#ffb347, #e05a00); color: #fff; }
.b88.y2k5     { background: linear-gradient(#0e6ba8, #003d66); color: #fff; }
.b88.kaffee   { background: #6f4e37; color: #fff; }
.b88.frames   { background: #808080; color: #fff; }
.b88.midi     { background: #000; color: #ffff00; border-color: #ffff00; }

/* Jahrgangswahl */
.versions { margin: 8px 0 0; font-size: 11px; }
.versions b { color: #000; }

@media (prefers-reduced-motion: reduce) {
  .marquee span { animation: none; padding-left: 0; }
  .blink { animation: none; }
}