/* Jahrgang 1999: Sternenhimmel, Comic Sans, Tabellen-Layout, Regenbogenlinien.
   Kein Framework, 1999 gab es keins. Laufschrift, Baustelle, Zähler und
   88x31-Buttons kommen aus ../css/common.css. */

html { scroll-behavior: smooth; }

body {
  margin: 0;
  min-height: 100vh;
  color: #fff;
  font-family: "Times New Roman", Times, serif;
  font-size: 16px;
  line-height: 1.5;
  /* das gekachelte Sternen-GIF, nur als SVG */
  background: #000 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Crect width='160' height='160' fill='%23000'/%3E%3Cg fill='%23fff'%3E%3Ccircle cx='12' cy='18' r='1.2'/%3E%3Ccircle cx='47' cy='9' r='.8'/%3E%3Ccircle cx='83' cy='31' r='1'/%3E%3Ccircle cx='131' cy='14' r='1.4'/%3E%3Ccircle cx='151' cy='52' r='.7'/%3E%3Ccircle cx='27' cy='63' r='.9'/%3E%3Ccircle cx='68' cy='77' r='1.3'/%3E%3Ccircle cx='104' cy='58' r='.8'/%3E%3Ccircle cx='9' cy='108' r='1'/%3E%3Ccircle cx='58' cy='121' r='.7'/%3E%3Ccircle cx='121' cy='101' r='1.1'/%3E%3Ccircle cx='143' cy='139' r='.9'/%3E%3Ccircle cx='38' cy='149' r='1.2'/%3E%3Ccircle cx='92' cy='147' r='.8'/%3E%3C/g%3E%3Cg fill='%23fff' opacity='.5'%3E%3Ccircle cx='75' cy='40' r='.6'/%3E%3Ccircle cx='120' cy='80' r='.6'/%3E%3Ccircle cx='20' cy='130' r='.6'/%3E%3Ccircle cx='100' cy='120' r='.6'/%3E%3C/g%3E%3C/svg%3E") repeat;
}

a { color: #00ff00; }
a:visited { color: #ff00ff; }
a:hover { color: #ffff00; }

.page {
  max-width: 800px;
  margin: 0 auto;
  padding: 12px 16px 24px;
  box-sizing: border-box;
}

/* ---------- Kopf ---------- */

.kopf { text-align: center; }
.hinweis { margin: 0 0 10px; font-family: Arial, Helvetica, sans-serif; font-size: 12px; color: #c0c0c0; }

.regenbogen {
  margin: 0;
  font-family: "Comic Sans MS", "Comic Sans", "Chalkboard SE", "Comic Neue", cursive;
  font-size: 44px;
  font-weight: bold;
  letter-spacing: 1px;
  text-shadow: 2px 2px 0 #000, 3px 3px 0 #444;
  text-wrap: balance;
}
.regenbogen span:nth-child(7n+1) { color: #ff0000; }
.regenbogen span:nth-child(7n+2) { color: #ff8000; }
.regenbogen span:nth-child(7n+3) { color: #ffff00; }
.regenbogen span:nth-child(7n+4) { color: #00ff00; }
.regenbogen span:nth-child(7n+5) { color: #00ffff; }
.regenbogen span:nth-child(7n+6) { color: #4080ff; }
.regenbogen span:nth-child(7n+7) { color: #ff00ff; }

.untertitel {
  margin: 6px 0 12px;
  font-family: "Comic Sans MS", "Comic Sans", "Chalkboard SE", "Comic Neue", cursive;
  font-size: 18px;
  color: #00ffff;
}
.marquee.geo {
  background: #000;
  color: #ffff00;
  font-family: "Comic Sans MS", "Comic Sans", "Chalkboard SE", "Comic Neue", cursive;
  font-size: 15px;
  border-top: 1px solid #444;
  border-bottom: 1px solid #444;
  box-shadow: none;
}

/* die Regenbogen-Linie, früher ein 600x6-GIF */
hr.linie {
  height: 6px;
  margin: 14px 0;
  border: 0;
  background: linear-gradient(90deg, #ff0000, #ff8000, #ffff00, #00ff00, #00ffff, #4080ff, #ff00ff);
  box-shadow: 0 0 6px rgba(255, 255, 255, .35);
}

/* ---------- Tabellen-Layout ---------- */

.layout { width: 100%; border-collapse: collapse; }
.layout > tbody > tr > td { vertical-align: top; }
.nav-spalte { width: 180px; padding: 0 14px 0 0; }
.inhalt { padding: 0 0 0 10px; }

/* linke Spalte: graue Kästen mit Rahmen, wie ein Navigations-Frame */
.box {
  margin: 0 0 12px;
  padding: 6px 8px 8px;
  background: #c0c0c0;
  color: #000;
  border: 3px outset #dcdcdc;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 13px;
}
.box h2 {
  margin: 0 0 6px;
  padding-bottom: 2px;
  font: bold 14px Arial, Helvetica, sans-serif;
  color: #000080;
  text-align: center;
  border-bottom: 1px solid #808080;
}
.box p { margin: 0; }
.box a { color: #000080; }
.box a:visited { color: #800080; }
.box a:hover { color: #ff0000; }
.box.mitte { text-align: center; }
.navi { list-style: none; margin: 0; padding: 0; }
.navi li { margin: 3px 0; }
.navi li::before { content: "» "; color: #ff0000; }
.box .klein { margin-top: 4px; color: #404040; }
.klein { font-family: Arial, Helvetica, sans-serif; font-size: 11px; }
.klein.aussen { color: #c0c0c0; }
.webring { font-weight: bold; }

/* ---------- Inhalt ---------- */

.inhalt h2 {
  margin: 0 0 10px;
  font-family: "Comic Sans MS", "Comic Sans", "Chalkboard SE", "Comic Neue", cursive;
  font-size: 26px;
  color: #ffff00;
}
.inhalt h2::before {
  content: "★";
  display: inline-block;
  margin-right: 8px;
  color: #ffff00;
  animation: drehen 4s linear infinite;
}
.inhalt h3 {
  margin: 14px 0 6px;
  font-family: "Comic Sans MS", "Comic Sans", "Chalkboard SE", "Comic Neue", cursive;
  font-size: 18px;
  color: #00ffff;
}
.inhalt p { margin: 0 0 10px; }
.inhalt section > :last-child { margin-bottom: 0; }
@keyframes drehen { to { transform: rotate(360deg); } }

/* Baustellen-Streifen laufen */
.inhalt .construction { background-size: 39.6px 39.6px; animation: streifen 1s linear infinite; }
@keyframes streifen { to { background-position: 39.6px 0; } }

/* Datentabellen mit Wulst-Rahmen (border=3 cellspacing=2) */
.daten {
  border: 3px outset #c0c0c0;
  border-collapse: separate;
  border-spacing: 2px;
  margin: 0 0 10px;
  background: #000;
}
.daten th, .daten td {
  padding: 4px 8px;
  border: 1px inset #c0c0c0;
  text-align: left;
  vertical-align: top;
}
.daten th { background: #000080; color: #fff; white-space: nowrap; }
.daten td { background: #1a1a1a; }

/* Kugel-Aufzählungszeichen, früher rote/grüne/blaue Ball-GIFs */
.kugeln { list-style: none; margin: 0 0 10px; padding: 0; }
.kugeln li { margin: 4px 0; padding-left: 22px; position: relative; }
.kugeln li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: .45em;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #fff 0, #ff0000 55%, #600 100%);
}
.kugeln li:nth-child(4n+2)::before { background: radial-gradient(circle at 35% 35%, #fff 0, #00ff00 55%, #060 100%); }
.kugeln li:nth-child(4n+3)::before { background: radial-gradient(circle at 35% 35%, #fff 0, #4080ff 55%, #026 100%); }
.kugeln li:nth-child(4n+4)::before { background: radial-gradient(circle at 35% 35%, #fff 0, #ffff00 55%, #660 100%); }

.versions { color: #c0c0c0; }
.versions b { color: #ffff00; }

.gb-links { font-weight: bold; }
.gb-leer {
  padding: 10px;
  border: 2px inset #c0c0c0;
  background: rgba(255, 255, 255, .06);
  color: #c0c0c0;
  font-style: italic;
}

/* ---------- Fuß ---------- */

.fuss { text-align: center; color: #c0c0c0; font-family: Arial, Helvetica, sans-serif; font-size: 13px; }
.fuss p { margin: 0 0 6px; }

/* ---------- Kleine Bildschirme ---------- */

@media (max-width: 700px) {
  .page { padding: 10px 10px 20px; }
  .layout, .layout > tbody, .layout > tbody > tr, .layout > tbody > tr > td { display: block; width: 100%; box-sizing: border-box; }
  .nav-spalte, .inhalt { padding: 0; }
  .regenbogen { font-size: 30px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .inhalt h2::before { animation: none; }
  .inhalt .construction { animation: none; }
}