/* ============================================================
   styles.css - Überarbeitet & komplett kommentiert
   Für: Das Konsolenmuseum
   Enthält: Header-Logo (klein), Index-Logo (groß + fade/glow),
            Image-Map Click Areas, Counter, Fonts, Kommentare
   ============================================================ */

/* -----------------------------
   0) Variablen (schnelle Anpassung)
   ----------------------------- */
:root{
  --green: #107c10;
  --green-glow: #209520;
  --logo-max-header: 700px;   /* Max-Breite im Header */
  --logo-max-index: 700px;    /* Max-Breite auf Index */
  --index-padding-top: 120px; /* Abstand vom oberen Rand auf Index */
  --counter-gap: 200px;        /* Abstand zwischen Logo und Counter */
  --topline-height: 3px;      /* Dicke horizontale Linien (Index) */
  --topline-width: 130px;     /* Länge horizontale Linien (Index) */
  --topline-vert-long: 35px;  /* Länge äußere vertikale Linien (Index) */
  --topline-vert-short: 20px; /* Länge innere vertikale Linien (Index) */
  --logo-line-width: 55px;    /* Länge der unteren Linien (Index) */
  --logo-line-height: 3px;    /* Dicke der unteren Linien (Index) */
}

/* ============================================================
   1) Reset & Basis
   ============================================================ */
* { box-sizing: border-box; margin:0; padding:0; }
html,body { height:100%; }
body{
  background-image: url('/bilder/logo/background.png');
  background-repeat: no-repeat;
  background-position: center top;
  background-attachment: fixed;
  background-size: cover;
  background-color: #000;
  font-family: 'Roboto', sans-serif;
  font-size: 16px;
  color: var(--green);
  line-height: 1.6;
  overflow-x: hidden;
}

/* ============================================================
   2) Lokale Fonts
   ============================================================ */
@font-face { font-family: 'Orbitron'; src: url('../fonts/orbitron/Orbitron-Regular.ttf') format('truetype'); font-weight:400; }
@font-face { font-family: 'Orbitron'; src: url('../fonts/orbitron/Orbitron-Bold.ttf') format('truetype'); font-weight:700; }
@font-face { font-family: 'Roboto'; src: url('../fonts/roboto/Roboto-Regular.ttf') format('truetype'); font-weight:400; }
@font-face { font-family: 'Roboto'; src: url('../fonts/roboto/Roboto-Bold.ttf') format('truetype'); font-weight:700; }

/* ============================================================
   3) Allgemeine Typographie & Links
   ============================================================ */
h1,h2,h3 { font-family: 'Orbitron', sans-serif; color:var(--green); margin-bottom:1rem; }
p, li, dd, dt { font-family: 'Roboto', sans-serif; color:var(--green); }
a { color: var(--green); text-decoration: none; transition: color .18s ease; }
a:hover { color: #15a915; text-decoration: underline; }

/* ============================================================
   4) Header (kleines Logo, kein hover-glow, Punkte leuchten)
   ============================================================ */
header.site-header {
  background: transparent;
  padding: 14px 0;
  text-align: center;
}

/* Grundstruktur des CSS-Logos (wird im Header skaliert) */
#logo-css-version {
  display:inline-block;
  text-align:center;
  font-family:'Orbitron',sans-serif;
  color:var(--green);
  position:relative;
  width:100%;
  max-width: var(--logo-max-index); /* Default max width; overridden in header */
  margin:0 auto;
  padding:0;
}

/* Header: kompakte Darstellung - kein hover auf ganzes Logo */
header #logo-css-version{
  width:100%;
  max-width: var(--logo-max-header);
  transform: scale(1.00);
  transform-origin: top center;
}

/* Header: Texte etwas kleiner, kein glow shadow */
header .text-top-header,
header .text-main-header {
  font-size: 2.1em;
  letter-spacing: 3px;
  text-shadow: none;
}
header .text-sub-header { font-size:1em; margin-top:-2px; }

/* Header: Linien schmaler und vertikale Linien kürzer */
header .top-line { height:2px; width:95px; background:var(--green); } /* obere Linien bei "DAS" */
header .logo-line-header { height:2px; width:35px; background:var(--green); } /* untere Linien bei "KONSOLENMUSEUM" */

/* Header: vertikale Linien kürzen */
header .top-line::before, header .top-line::after {
  width:2px; background:var(--green);
}
header .top-line:first-child::before,
header .top-line:last-child::after { height:20px; } /* äußere senkrechte Linien */
header .top-line:first-child::after,
header .top-line:last-child::before { height:10px; } /* innere senkrechte Linie */

/* Header: Punkte (die dürfen glow haben) */
header .logo-line-header.left::before,
header .logo-line-header.right::after {
  content:''; position:absolute; display:block;
  width:10px; height:10px; border:2px solid var(--green);
  border-radius:50%; top:-5px;
  box-shadow: 0 0 8px var(--green-glow), 0 0 16px var(--green-glow);
}

/* Kein hover-glow auf komplettes Header-Logo */
header #logo-css-version:hover { filter:none; transform: scale(1.00); }

/* ============================================================
   5) CSS-Logo - komplette Struktur (Index + Header benutzen)
   ============================================================ */
/* große Schrift / default */
.text-top-header,
.text-main-header { 
  font-weight:700; 
  font-size:2.8em; 
  letter-spacing:4px; 
  white-space:nowrap;
  text-shadow: 0 0 5px rgba(16,124,16,.45);
}

/* Obere Reihe (DAS) */
.top-line-connector { display:flex; align-items:center; justify-content:center; margin:10px 0 -20px 0; }
.top-line {
  height: var(--topline-height);
  width: var(--topline-width);
  background: var(--green);
  position:relative;
}
.text-top-header { padding:0 5px 0 10px }

/* Vertikale verbindungen (links/rechts von DAS) */
.top-line::before, .top-line::after {
  content:''; position:absolute; width:var(--topline-height); background:var(--green); top:0;
}
.top-line:first-child::before { left:0; height: var(--topline-vert-long); }
.top-line:first-child::after  { right:0; transform:translateX(-30px); height: var(--topline-vert-short); }
.top-line:last-child::before  { left:0; transform:translateX(30px); height: var(--topline-vert-short); }
.top-line:last-child::after   { right:0; height: var(--topline-vert-long); }

/* Untere Reihe (KONSOLENMUSEUM) */
.main-logo-line-container-header { display:flex; align-items:center; justify-content:center; margin-top:-20px; }
.text-main-header { padding:0 10px 0 15px; }

/* horizontale "Punktlinien" + Punkte */
.logo-line-header {
  height: var(--logo-line-height);
  width: var(--logo-line-width);
  background: var(--green);
  position:relative;
  flex-shrink:0;
}
.logo-line-header.left::before,
.logo-line-header.right::after {
  content:''; display:block; width:10px; height:10px; border:2px solid var(--green);
  border-radius:50%; position:absolute; top:-5px;
  box-shadow: 0 0 8px var(--green-glow), 0 0 16px var(--green-glow);
}
.logo-line-header.left::before { left:-6px; }
.logo-line-header.right::after { right:-6px; }

/* Untertitel */
.text-sub-header { display:block; font-size:1.3em; font-weight:400; margin-top:-3px; letter-spacing:1px; }

/* ============================================================
   6) INDEX-SEITE: großes Logo (fade-in + hover-glow + counter)
   ============================================================ */
.index-logo-wrapper{
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  height:100vh; text-align:center;
  padding-top: var(--index-padding-top); /* <-- hier anpassen: verschiebt Logo weiter runter */
}

/* Auf Index: größeres Logo */
.index-logo-wrapper #logo-css-version {
  max-width: var(--logo-max-index);
  width: 90%;
}

/* Fade-In (bleibt sichtbar) - benutzbar durch class "logo-index" */
#logo-css-version.logo-index {
  opacity:0; transform:translateY(-20px) scale(.95);
  animation: logoFadeIn 2.5s ease-out forwards;
  transition: filter .32s ease, transform .32s ease;
}
@keyframes logoFadeIn {
  from { opacity:0; transform:translateY(-20px) scale(.95); filter:brightness(.7); }
  to   { opacity:1; transform:translateY(0) scale(1); filter:brightness(1); }
}

/* Hover auf Index: Glow + leichte Vergrößerung
   -> wir setzen filter + transform. Wenn Du die alte Header-Regel mit !important
   noch drin hast, überschreibt sie; in dem Fall: lösche die alte Regel oder
   aktiviere die nächste Zeile (mit !important). */
.index-logo-wrapper #logo-css-version.logo-index:hover {
  filter: drop-shadow(0 0 18px rgba(16,124,16,0.95)) brightness(1.28) !important;
  transform: scale(1.06) !important;
  /* Falls die alte Header-Regel noch !important benutzt, kannst du testweise:
     filter: drop-shadow(0 0 18px rgba(16,124,16,0.95)) brightness(1.28) !important;
     aber langfristig: entferne das !important aus der Header-Regel. */
}

/* Verhindere Unterstreichung beim Hover auf Link / Logo */
#intro-link, #intro-link:hover, #intro-link:focus { text-decoration:none !important; color:inherit; outline:none; }

/* Counter unter Logo (zentrale Position, Abstand variabel) */
.counter-container {
  margin-top: var(--counter-gap); /* <-- hier anpassen */
  text-align:center;
  font-family: 'Orbitron', sans-serif;
  font-size: 18px;
  color:var(--green);
}
.since-date { font-family:'Orbitron',sans-serif; font-size: 18px; display:block; margin-top:6px; }

/* ============================================================
   7) Image-map & klickbare Bereiche (wichtig: du hattest "rahmen" für Links)
   ============================================================ */
.image-map-container {
  position:relative;
  max-width:1900px; /* maximale Breite deiner großen GIF/JPG Karte */
  width:100%;
  margin:30px auto;
}
.responsive-map { display:block; width:100%; height:auto; }

/* klickbare Flächen (unsichtbar, aber erreichbar) */
/* Falls du sichtbare Rahmen zum Debuggen willst, entkommentiere border */
.image-map-link {
  position:absolute; z-index:5; display:block; text-indent:-9999px; overflow:hidden; cursor:pointer;
  /* border: 2px dashed rgba(16,124,16,0.35); */ /* Debug: sichtbare Flächen */
}

/* Beispiele: ersetze / ergänze deine Klassen (R-Zone usw.) */
.rzone-link { top:9%; left:1%; width:9.5%; height:25%; }
.xboxoneperipherie1-link { top:61%; left:11%; width:13%; height:5.5%; }
.xboxone-link { top:66.5%; left:9%; width:17%; height:7%; }
.spf-link { top:56.5%; left:26%; width:14%; height:17.5%; }
.xboxoneperipherie2-link { top:55%; left:41.5%; width:8%; height:11%; }
.gioteck-link { top:65%; left:40%; width:14.5%; height:9.5%; }

/* Bild in Container (sorgt dafür, dass max-width greift) */
.image-map-container img { display:block; width:100%; height:auto; max-width:1900px; }

/* ============================================================
   8) Inhalt & Footer (Willkommen / Impressum / Seiten)
   ============================================================ */
main { padding-top:40px; text-align:center; }
.content-container { max-width:1000px; margin: 0 auto 40px; padding: 0 18px; text-align:left; color:var(--green); }

/* Footer */
footer { padding:20px; text-align:center; background:transparent; }
footer a { color:var(--green); }
footer a:hover { color:#00ff00; text-decoration:underline; }

/* ============================================================
   9) Hilfs-Styles / Responsive Feinheiten
   ============================================================ */
@media (max-width: 1000px){
  :root{ --logo-max-index: 520px; --index-padding-top: 80px; }
  header #logo-css-version { transform: scale(1.00); }
  header .text-top-header, header .text-main-header { font-size:1.8em; }
}
@media (max-width: 600px){
  :root{ --index-padding-top: 40px; --logo-max-index: 380px; }
  .text-top-header, .text-main-header { font-size:1.6em; letter-spacing:2px; }
  .top-line { width:80px; }
}

/* ============================================================
   10) WILLKOMMEN-SEITE (Layout, Bild, Text)
   ============================================================ */
.content-container h1,
.image-info-text { text-align: center; }

.image-map-container {
  max-width: 1500px;
  width: 100%;
  margin: 30px auto;
}

/* ============================================================
   11) Angebote-Seite (Sonderlayout)
   ============================================================ */

/* Zentriert nur h1 & h2 auf der Seite angebote.php */
body.angebote h1,
body.angebote h2 {
  text-align: center;
}

/* ============================================================
   12) News-Seite (Sonderlayout)
   ============================================================ */

/* Zentriert nur h1 & h2 auf der Seite news.php */
body.news h1,
body.news h2 {
  text-align: center;
}