/* ============================================================
   COMPUTERSESSION - Homepage im Stil von 1996
   Best viewed with Netscape Navigator 3.0 ;-)
   ============================================================ */

body{
  background-color:#000000;
  background-image:url('../images/stars.png');   /* sparsame, grosse Kachel */
  color:#ffff00;                 /* knallgelb auf schwarz */
  font-family:"Times New Roman",Times,serif;
  font-size:17px;
  margin:0;
  padding:10px 6px 40px;
}

/* Links - klassische Netscape-Farben */
a{color:#00ffff;font-weight:bold;}
a:visited{color:#ff66ff;}
a:hover{color:#ffffff;background:#0000aa;}

b{color:#ffffff;}

/* ===== Laufschrift ===== */
.marq{
  background:#0000aa;color:#ffff00;
  font-family:"Comic Sans MS","Comic Sans",cursive;
  font-weight:bold;font-size:15px;
  border-top:2px ridge #00ffff;border-bottom:2px ridge #00ffff;
  padding:5px 0;margin:0 0 14px;
}

/* ===== Titel ===== */
.logo{
  font-family:"Comic Sans MS","Comic Sans",cursive;
  font-size:46px;font-weight:bold;letter-spacing:2px;
  color:#ff0000;
  text-shadow:3px 3px 0 #ffff00, 6px 6px 0 #00ffff;
  margin:6px 0 2px;
}
.tagline{
  font-family:"Comic Sans MS",cursive;font-size:16px;color:#00ff00;margin:0 0 12px;
}

/* ===== Under Construction ===== */
.construction{
  display:inline-block;
  background:repeating-linear-gradient(45deg,#ffcc00 0 14px,#000000 14px 28px);
  color:#000;font-family:"Arial Black",Arial,sans-serif;font-weight:bold;font-size:15px;
  padding:7px 16px;border:3px outset #ffcc00;margin:4px 0 12px;
  -webkit-text-stroke:0.5px #fff;
}
.construction .cone{ -webkit-text-stroke:0; }

/* ===== Regenbogen-Trenner (kurz, nicht durchgezogen) ===== */
hr.rainbow{
  height:6px;border:0;margin:18px auto;
  width:clamp(140px,38%,360px);     /* nicht ueber die ganze Breite */
  border-radius:3px;
  background:linear-gradient(90deg,#ff0000,#ff9900,#ffff00,#00ff00,#00ffff,#0066ff,#cc00ff,#ff0000);
}

/* ===== Hero-Bild ===== */
.hero96{position:relative;display:inline-block;margin:6px 0;}
.hero96 img{
  border:6px ridge #00ffff;max-width:90%;height:auto;
}
.newflag{
  position:absolute;top:8px;right:-8px;
  background:#ff0000;color:#ffff00;font-family:"Arial Black",sans-serif;font-weight:bold;
  font-size:18px;padding:3px 8px;border:2px solid #ffff00;transform:rotate(8deg);
}
.caption{color:#00ff00;font-style:italic;font-size:14px;margin:4px 0 0;}

/* ===== Inhalts-"Boxen" (Tabellen-Look) ===== */
table.box{
  margin:14px auto;border-collapse:separate;
  background:#000080;
  border:4px ridge #00ffff;
  max-width:760px;
}
table.box td{padding:14px 20px;color:#ffffaa;}
table.box p{margin:10px 0;line-height:1.5;}

h2{
  font-family:"Comic Sans MS",cursive;
  color:#00ff00;font-size:22px;margin:4px 0 12px;
  text-shadow:2px 2px 0 #000;
}

.opa{font-size:20px;color:#ffffff;font-style:italic;}
.opa-cite{font-size:14px;color:#00ffff;font-style:normal;}
.small{font-size:13px;color:#aaaaaa;}

/* ===== LED-Countdown ===== */
.led-clock{display:flex;justify-content:center;gap:10px;flex-wrap:wrap;margin:14px 0;}
.led-unit{
  background:#1a0000;border:3px inset #660000;border-radius:4px;
  padding:10px 12px 6px;min-width:74px;
}
.led-num{
  display:block;
  font-family:"Courier New",monospace;font-weight:bold;
  font-size:42px;line-height:1;color:#ff2200;
  text-shadow:0 0 6px #ff0000,0 0 12px #ff3300;
  letter-spacing:2px;
}
.led-label{display:block;font-family:Arial,sans-serif;font-size:11px;color:#ff8866;margin-top:4px;letter-spacing:2px;}
.target{font-family:"Comic Sans MS",cursive;color:#ffff00;font-size:18px;margin:8px 0 0;}

/* ===== Neuigkeiten-Liste ===== */
ul.news96{text-align:left;list-style:none;padding:0;margin:0;}
ul.news96 li{
  padding:6px 0 6px 26px;border-bottom:1px dashed #4488ff;color:#ffffaa;
  background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='18' height='18'><text y='14' font-size='14'>%F0%9F%94%A5</text></svg>") left 4px no-repeat;
}
ul.news96 li time{color:#00ffff;font-weight:bold;margin-right:8px;}

/* ===== Cool-Links-Sektion ===== */
table.box h3{font-family:"Comic Sans MS",cursive;color:#ff9900;font-size:16px;margin:16px 0 6px;}
ul.lanlinks{text-align:left;list-style:none;padding:0;margin:0 0 6px;}
ul.lanlinks li{padding:4px 0;line-height:1.4;}
ul.lanlinks li::before{content:"\25BA ";color:#00ff00;}
.ll-meta{color:#cccc88;font-size:13px;}
.ll-hot{color:#ff4444;font-weight:bold;}

/* ===== Button ===== */
.btn96{
  display:inline-block;text-decoration:none;
  font-family:"Comic Sans MS",cursive;font-size:19px;font-weight:bold;
  color:#000 !important;background:#00ff00;
  border:4px outset #00cc00;padding:10px 22px;margin:6px 0;
}
.btn96:hover{background:#33ff33;color:#000 !important;border-style:inset;}
.btn96:visited{color:#000 !important;}

/* ===== Besucherz&auml;hler (Odometer) ===== */
.counter-block{margin:16px 0;}
.counter-label{font-family:"Comic Sans MS",cursive;color:#ffffff;font-size:18px;margin:0 0 6px;}
.odometer{display:inline-flex;gap:3px;padding:5px;background:#222;border:3px inset #888;}
.odometer .digit{
  display:inline-block;width:26px;
  font-family:"Courier New",monospace;font-weight:bold;font-size:30px;
  color:#33ff33;background:#000;border:1px solid #006600;
  text-align:center;line-height:1.25;
  text-shadow:0 0 4px #00ff00;
}

/* ===== Badges ===== */
.badges{margin:14px auto;line-height:2.4;}
.badge{
  display:inline-block;font-family:Arial,Helvetica,sans-serif;font-size:9px;font-weight:bold;
  line-height:1.15;text-align:center;color:#fff;
  padding:4px 8px;margin:3px;border:2px outset #999;vertical-align:middle;
}
.badge b{font-size:11px;color:#fff;}
.bg-blue{background:#000088;} .bg-gray{background:#666;} .bg-black{background:#111;}
.bg-green{background:#007700;} .bg-red{background:#aa0000;}

/* ===== Links / Footer ===== */
.links96{font-family:"Comic Sans MS",cursive;font-size:18px;margin:14px 0;}
.footer96{font-size:13px;color:#888;margin:24px 0 0;line-height:1.7;}

/* ===== Blink ===== */
.blink{animation:blink 1s steps(1) infinite;}
.blink-slow{animation:blink 1.4s steps(1) infinite;}
@keyframes blink{50%{opacity:0;}}

/* ===== Mobil (gab's 1996 nicht, aber egal) ===== */
@media(max-width:560px){
  body{font-size:16px;}
  .logo{font-size:32px;text-shadow:2px 2px 0 #ffff00,4px 4px 0 #00ffff;}
  .led-num{font-size:32px;}
  .led-unit{min-width:58px;padding:8px 8px 5px;}
  .odometer .digit{width:20px;font-size:24px;}
  table.box td{padding:12px 12px;}
  .hero96 img{border-width:4px;}
}