/* ===== Pixelbude – eine Designsprache =====
   Farben:   Schwarz, Weiss, Gruen (#00ff00) – sonst nichts
   Schriften: Press Start 2P (Titel, Menue, Knoepfe)  +  VT323 (Fliesstext)
   Formen:    eckig, 2px weisser Rahmen, Pixel-Icons im 4px-Raster
*/

@font-face { font-family: "Press Start 2P"; src: url("fonts/PressStart2P.ttf") format("truetype"); font-display: swap; }
@font-face { font-family: "VT323"; src: url("fonts/VT323.ttf") format("truetype"); font-display: swap; }

:root {
  --green: #00ff00;
  --white: #fff;
  --black: #000;
  --panel: rgba(0, 0, 0, 0.8);
  --px: "Press Start 2P", monospace;
  --txt: "VT323", "Courier New", monospace;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  min-height: 100vh;
  background: #000 url("images/02-34-11-741_512.gif") repeat;
  color: var(--white);
  font-family: var(--txt);
  font-size: 23px;
  line-height: 1.3;
}

a { color: var(--green); text-underline-offset: 3px; }
a:hover { color: var(--white); }

img { image-rendering: pixelated; max-width: 100%; }
.g { color: var(--green); }

.wrap { width: min(900px, 100% - 24px); margin-inline: auto; }

/* ---------- Kopf ---------- */
header.top { padding: 24px 0 0; text-align: center; }
header.top img { display: block; margin: 0 auto; width: 424px; height: auto; }

/* ---------- Menue: Kacheln mit Pixel-Icon ---------- */
nav.main { margin: 22px 0 0; }
nav.main ul {
  list-style: none;
  margin: 0 auto;
  padding: 0;
  width: min(900px, 100% - 24px);
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
}
nav.main a.item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  width: 112px;
  height: 92px;
  padding: 10px 6px 10px;
  background: var(--panel);
  border: 2px solid var(--white);
  color: var(--green);
  text-decoration: none;
  font-family: var(--px);
  font-size: 9px;
  line-height: 1;
}
nav.main a.item img { display: block; height: 40px; width: auto; }
nav.main a.item:hover,
nav.main a.item[aria-current="page"] { background: var(--green); color: var(--black); border-color: var(--green); }
nav.main a.item:hover img,
nav.main a.item[aria-current="page"] img { filter: brightness(0); } /* Icon wird schwarz auf gruenem Grund */

/* ---------- Trennlinie & Lauftext ---------- */
.line {
  height: 4px;
  width: 100%;
  max-width: 760px;
  margin: 22px auto;
  background: repeating-linear-gradient(90deg, var(--green) 0 8px, transparent 8px 12px);
}

.marq {
  margin: 0 0 26px;
  background: var(--panel);
  color: var(--green);
  font-family: var(--px);
  font-size: 10px;
  border: 2px solid var(--white);
}
.marq marquee { display: block; padding: 10px 0; }

/* ---------- Inhalt ---------- */
main { padding: 4px 0 30px; }

h1, h2, h3 { font-family: var(--px); font-weight: normal; line-height: 1.7; margin: 0 0 20px; }
h1 { font-size: 20px; text-align: center; color: var(--white); text-shadow: 3px 3px 0 var(--black); }
h1 .sub { font-size: 13px; }
h2 { font-size: 13px; color: var(--green); }

/* Box: das eine Container-Element */
.box {
  background: var(--panel);
  padding: 22px 24px;
  margin: 0 0 28px;
  border: 2px solid var(--white);
}
.box > :last-child { margin-bottom: 0; }
.box p { margin: 0 0 12px; }

.box .label {
  display: block;
  margin: -22px -24px 20px;
  padding: 8px 14px;
  background: var(--black);
  border-bottom: 2px solid var(--white);
  color: var(--green);
  font-family: var(--px);
  font-size: 9px;
  letter-spacing: 1px;
}
.box .label::before { content: "\25A0  "; color: var(--white); }

.center { text-align: center; }
.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); gap: 24px; }
.grid .box { margin-bottom: 0; }
.hint { color: #b8b8b8; font-size: 20px; }
.hint.top { margin-top: 12px; }
.grid.mid { align-items: center; }

/* Medien: gleiche Rahmen, Bilder im gleichen Gruenton */
.frame, .framed { display: block; width: 100%; border: 2px solid var(--white); background: var(--black); }
.framed { display: inline-block; width: auto; }
video.frame { max-height: 70vh; }
iframe.frame { height: 600px; background: #fff; }
.duo { filter: grayscale(1) sepia(1) hue-rotate(55deg) saturate(4) brightness(0.95); }

/* Knoepfe: ein Stil fuer alles */
.btn, #music-toggle {
  display: inline-block;
  font-family: var(--px);
  font-size: 10px;
  line-height: 1;
  letter-spacing: 0.5px;
  text-decoration: none;
  color: var(--green);
  background: var(--black);
  padding: 12px 14px;
  border: 2px solid var(--green);
  cursor: pointer;
  margin: 0 10px 10px 0;
}
.btn:hover, #music-toggle:hover { background: var(--green); color: var(--black); }
.btn:active, #music-toggle:active { transform: translateY(2px); }
.btn.big { font-size: 12px; padding: 16px 20px; margin: 0 0 10px; }

#music-toggle { position: fixed; right: 14px; bottom: 14px; z-index: 60; margin: 0; font-size: 9px; }

/* Datenschutz-Fliesstext: gleiche Schriften, nur hell hinterlegt */
.box.paper { background: #fff; color: #000; font-size: 21px; overflow-wrap: anywhere; }
.box.paper .label { background: #000; }
.box.paper a { color: #006b00; }
.box.paper a:hover { color: #000; background: var(--green); }
.box.paper h1, .box.paper h2, .box.paper h3, .box.paper h4 {
  font-family: var(--px);
  font-weight: normal;
  color: #000;
  text-shadow: none;
  text-align: left;
  line-height: 1.7;
  margin: 24px 0 10px;
}
.box.paper h1 { font-size: 14px; margin-top: 0; }
.box.paper h2 { font-size: 12px; }
.box.paper h3 { font-size: 10px; }
.box.paper h4 { font-size: 9px; }
.box.paper ul { padding-left: 24px; }

/* ---------- Fuss ---------- */
footer.bottom { text-align: center; padding: 0 12px 76px; font-family: var(--txt); font-size: 21px; color: #b8b8b8; }
footer.bottom p { margin: 10px 0 0; }
footer.bottom a { font-family: var(--px); font-size: 9px; text-decoration: none; margin: 0 8px; }
footer.bottom p a[href^="https"] { font-family: var(--txt); font-size: inherit; text-decoration: underline; margin: 0; }
footer.bottom span { color: var(--white); }

/* ---------- Handy ---------- */
@media (max-width: 640px) {
  body { font-size: 22px; }
  h1 { font-size: 15px; }
  .box { padding: 18px 16px; }
  .box .label { margin: -18px -16px 16px; }
  nav.main ul { gap: 6px; }
  nav.main li { width: calc(33.33% - 6px); max-width: 112px; }
  nav.main a.item { width: 100%; height: 84px; }
  header.top img { width: 300px; }
  iframe.frame { height: 520px; }
}

@media (prefers-reduced-motion: reduce) { .marq marquee { display: none; } }