/*
  BASIS-RESET & VARIABLEN
  -----------------------
  - Vereinheitlicht Standardabstände
  - Definiert Farb-/Größenvariablen zur leichten Anpassung
*/
:root {
  --color-bg: #0f172a;        /* Seitenhintergrund dunkel */
  --color-surface: #004f0d;   /* Header/Footer-Hintergrund */
  --color-text: #d2d2d2;      /* Standard-Textfarbe */
  --color-accent: #ffe201;    /* Akzent (Buttons, Hover) */
  --color-accent-2: #ffe201;  /* hellere Akzentvariante */
  --color-button: #5a5a5a;  /* farbe buttons */
  --max-width: 1100px;        /* max. Inhaltsbreite */
  --header-height: 64px;      /* Höhe des fixen Headers */
  --radius: 10px;             /* abgerundete Ecken */
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }
body {
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, Arial, sans-serif;
  background: var(--color-bg);
  color: var(--color-text);
  line-height: 1.6;
}

/* Zentrierter Inhaltscontainer */
.container {
  max-width: var(--max-width);
  margin-inline: auto;
  padding-inline: 16px;
}

/* FESTER HEADER
   ------------- */
.site-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: var(--header-height);
  background: var(--color-surface);
  border-bottom: 1px solid rgba(255,255,255,0.08);
  box-shadow: 0 6px 20px rgba(0,0,0,0.25);
  z-index: 1000; /* über dem Inhalt */
}

/* Flex-Layout: Logo links, Navigation rechts */
.nav-container {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.logo {
  margin-left: -5px; /* schiebt das Logo nach links über den Container-Rand */
  display: flex;
  align-items: center;   /* Text und Icon vertikal mittig */
  gap: 16px;              /* Abstand zwischen Icon und Text */
  color: var(--color-text);
  text-decoration: none;
  font-weight: 700;      /* Text fett */
  letter-spacing: 0.5px;
  font-size: 1.2rem;     /* etwas größer als normaler Text */
}

.logo:hover { 
  color: var(--color-accent-2); 
}

.logo-img {
  width: 48px;   /* Icon-Größe */
  height: 48px;
  display: block;
}


/* NAVIGATION
   ---------- */
.main-nav .menu {
  margin-right: -5px; /* schiebt das Logo nach rechts über den Container-Rand */
  list-style: none;
  display: flex;
  align-items: center;
  gap: 24px;
}

.menu-link {
  color: var(--color-text);
  text-decoration: none;
  padding: 8px 4px;
  display: inline-block;
}
.menu-link:hover { transform: translateY(-1px); color: var(--color-accent); }

/* Menüpunkt als Bezug für Dropdown */
.menu-item { position: relative; }

/* Dropdown zunächst unsichtbar */
.dropdown {
  position: absolute;
  right: 0;                 /* rechtsbündig unter dem Menüpunkt */
  top: calc(100% + 10px);
  min-width: 220px;
  background: #0b1220;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: var(--radius);
  padding: 8px;
  list-style: none;
  box-shadow: 0 12px 30px rgba(0,0,0,0.35);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity .18s ease, transform .18s ease, visibility .18s ease;
}

/* Dropdown-Links */
.dropdown > li > a {
  display: block;
  padding: 10px 12px;
  border-radius: 8px;
  color: var(--color-text);
  text-decoration: none;
}
.dropdown > li > a:hover {
  background: color-mix(in srgb, var(--color-accent) 20%, transparent);
  color: var(--color-accent-2);
  transform: translateY(-1px);
}

/* Dropdown beim Hover einblenden */
.has-dropdown:hover > .dropdown {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

/* Dekorativer Pfeil unter dem Menüpunkt (optional) */
.has-dropdown:hover::after {
  content: "";
  position: absolute;
  right: 12px; top: 100%;
  border: 8px solid transparent;
  border-bottom-color: #0b1220; /* gleiche Farbe wie Dropdown-Hintergrund */
}

/* Abstandshalter unter dem fixen Header */
.header-spacer { height: var(--header-height); }

/* HAUPTBEREICH */
.site-main { padding-block: 32px 80px; }

.content-block {
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: var(--radius);
  padding: 24px;
}

/* BUTTONS (oben & unten) */
.button-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-block: 16px 24px;
}

.btn {
  display: inline-block;
  padding: 2px 14px;
  background: var(--color-button);
  color: white;
  text-decoration: none;
  border-radius: 999px;
  font-weight: 600;
  transition: transform .12s ease, background .12s ease;
}
.btn:hover { transform: translateY(-1px); background: var(--color-accent-2); color: black; }
.btn:active { transform: translateY(0); }

/* FOOTER */
.site-footer {
  background: var(--color-surface);
  border-top: 1px solid rgba(255,255,255,0.08);
  padding-top: 24px;      /* oben normaler Abstand */
  padding-bottom: 8px;    /* unten kleines Polster */
  text-align: center;
}

.footer-text { 
  opacity: 0.85; 
  margin-bottom: 12px; 
}

.footer-buttons {
  justify-content: center;
  margin-bottom: 0;  /* keine zusätzliche Lücke */
}


/* DRUCKANSICHT
   ------------
   - Dropdowns sichtbar machen, damit sie gedruckt werden
   - Header relativ, damit nichts abgeschnitten wird
*/
@media print {
  :root { --color-text: #000; }
  body { background: #fff; color: #000; }

  .site-header { position: relative; box-shadow: none; }
  .header-spacer { display: none; }

  /* Alle Dropdowns sichtbar & statisch */
  .dropdown {
    position: static;
    opacity: 1; visibility: visible; transform: none;
    box-shadow: none; border-color: #ccc; background: #fff;
    margin-top: 4px;
  }
  .has-dropdown::after { display: none; }

  .content-block, .site-footer { background: #fff; border: 1px solid #ccc; }
  .btn { color: #000; background: #eee; border: 1px solid #ccc; }
}

/* RESPONSIVE */
@media (max-width: 720px) {
  .main-nav .menu { gap: 12px; }
  .dropdown { right: auto; left: 0; min-width: 200px; }
}