/* styles.css */
body {
    margin: 0;
    padding: 0;
    font-family: Arial, sans-serif;
    color: #333;
    line-height: 1.8;
    background-color: #f4f4f4;
    font-size: 16px;
}

a {
    text-decoration: none;
    color: inherit;
    transition: color 0.3s ease;
}

a:hover {
    color: #e74c3c;
    text-decoration: underline;
}

ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

h1, h2 { 
    margin: 0 0 0.5rem 0;
}

/* Container für zentrale Inhalte */
.content {
    max-width: 800px;
    margin: 3rem auto;
    padding: 2rem;
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 6px 10px rgba(0, 0, 0, 0.1);
    text-align: left;
}

/* Mobile Optimierung */
@media (max-width: 600px) {
    .content {
        padding: 1rem;
        margin: 1rem;
    }
    body {
        font-size: 14px;
    }
}

.spacer {
    height: 100vh; /* Platz für Scrollen */
    background: transparent; /* Unsichtbarer Platzhalter */
}

/* ===== Globales ===== */
* { box-sizing: border-box; }
html, body { margin: 0; }
body { overflow-x: hidden; }

/* ================= NAVBAR BASIS ================= */
.navbar {
  position: fixed;
  inset: 0 0 auto 0;          /* top:0; left:0; right:0 */
  background: rgba(0,0,0,0.85);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  padding: 0.8rem 1.5rem;
  box-shadow: 0 4px 8px rgba(0,0,0,0.2);
  z-index: 1000;
  transform: translateY(-100%);
  transition: transform .4s ease-in-out, opacity .4s ease-in-out;
}
.navbar.visible {
  transform: translateY(0);
  opacity: 1;
}

.navbar-container {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding-right: 1rem;
  overflow: visible;
}

.navbar-logo a {
  font-size: 1.8rem;
  font-weight: bold;
  color: #3498db;
  text-decoration: none;
}
.navbar-logo a:hover { color: #e74c3c; }

/* ================= DESKTOP NAV (≥769px) ================= */
.nav-rechts {
  display: flex;
  flex-direction: row;
  gap: 1.2rem;
  align-items: center;
  list-style: none;
  margin: 0;
  padding: 0;
  background: transparent;
  position: static;
}
.nav-rechts > li { position: relative; }

.nav-rechts .nav-link {
  display: inline-block;
  padding: .5rem .9rem;
  border-radius: 10px;
  color: #fff;
  font-weight: 700;
  text-decoration: none;
  transition: background .2s ease, transform .15s ease;
}
.nav-rechts .nav-link:hover,
.nav-rechts .nav-link:focus-visible {
  background: rgba(255,255,255,.08);
  transform: translateY(-1px);
}

/* ===== Dropdown Desktop (stabil, ohne Hover-Gap) ===== */
.has-dropdown {
  position: relative;
}

/* Hover-Bridge: unsichtbarer 10px-Streifen zwischen Linkzeile und Menü,
   damit beim diagonalen Fahren nichts "abbricht" */
@media (min-width: 769px) {
  .has-dropdown::after {
    content: "";
    position: absolute;
    left: 0; right: 0;
    top: 100%;
    height: 10px;              /* Brücke */
  }
}

.has-dropdown .dropdown {
  position: absolute;
  top: 100%;
  margin-top: 10px;            /* Abstand = Höhe der Bridge */
  right: 0;
  min-width: 220px;
  background: rgba(20,28,45,.88);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 12px;
  box-shadow: 0 10px 24px rgba(0,0,0,.35);
  padding: .5rem 0;
  display: none;
  z-index: 1500;
  backdrop-filter: blur(10px);
}
.has-dropdown.open > .dropdown { display: block; }

.has-dropdown .dropdown a {
  display: block;
  padding: .6rem 1rem;
  color: #fff;
  border-radius: 8px;
  text-decoration: none;
}
.has-dropdown .dropdown a:hover { background: rgba(255,255,255,.08); }

/* ================= CARET BUTTON ================= */
.caret {
  background: none;
  border: 0;
  color: #fff;
  cursor: pointer;
  margin-left: .25rem;
  line-height: 1;
  padding: 0;
}
.caret::before {
  content: "▾";
  font-size: .9rem;
  display: inline-block;
  transition: transform .2s ease;
}
.has-dropdown.open > .caret::before { transform: rotate(-180deg); }

/* ================= HAMBURGER ================= */
.hamburger {
  display: none;
  flex-direction: column;
  justify-content: space-around;
  width: 30px;
  height: 30px;
  background: none;
  border: none;
  cursor: pointer;
  z-index: 2001;
}
.hamburger div {
  width: 100%;
  height: 3px;
  background: #fff;
  border-radius: 3px;
  transition: all 0.3s ease;
}
.hamburger.active div:nth-child(1) { transform: rotate(45deg) translate(5px, 5px); }
.hamburger.active div:nth-child(2) { opacity: 0; }
.hamburger.active div:nth-child(3) { transform: rotate(-45deg) translate(5px, -5px); }

/* ================= MOBILE NAV (≤768px) ================= */
@media (max-width: 768px) {
  .hamburger { display: flex; }

  .nav-rechts {
    position: absolute;
    top: 60px;
    left: 0;
    right: 0;
    display: none !important;      /* Standard versteckt */
    flex-direction: column;
    align-items: stretch;
    gap: .25rem;
    padding: .8rem;
    background: rgba(0,0,0,.85);
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 12px;
    box-shadow: 0 10px 26px rgba(0,0,0,.35);
    backdrop-filter: blur(10px);
    max-width: 95%;
    margin: 0 auto;
  }
  .nav-rechts.open { display: flex !important; }

  .nav-rechts .nav-link {
    width: 100%;
    padding: .6rem .8rem;
    border-radius: 10px;
  }

  /* Partner-Zeile: Link + Caret nebeneinander, Dropdown darunter */
  .nav-rechts > li.has-dropdown {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .25rem;
  }
  .nav-rechts > li.has-dropdown > .nav-link {
    flex: 1 1 auto;
  }
  .nav-rechts > li.has-dropdown > .dropdown {
    position: static;
    order: 2;
    width: 100%;
    margin-top: .3rem;
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 10px;
    background: rgba(255,255,255,.06);
    box-shadow: none;
    padding: .4rem 0;
  }

  /* Standard: geschlossen; auf via .open */
  .has-dropdown .dropdown { display: none; }
  .has-dropdown.open .dropdown { display: block; }

  /* Caret sichtbar mobil */
  .caret {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
  }

  /* :hover auf Touch deaktivieren */
  .has-dropdown:hover .dropdown { display: none; }
}

/* ================= DESKTOP EXTRAS ================= */
@media (min-width: 769px) {
  .caret { display: none; } /* Caret nur mobil */
  /* Dekorativer kleiner Pfeil am Partner-Link auf Desktop */
  .has-dropdown > .nav-link::after {
    content: "▾";
    font-size: .65rem;
    margin-left: .35rem;
    opacity: .85;
  }
}


/* ================= FOOTER ================= */

.site-footer{
  background:
    radial-gradient(ellipse at top, rgba(124,243,255,.08), transparent 70%),
    radial-gradient(ellipse at bottom, rgba(176,124,255,.08), transparent 70%),
    #0b0f14;
  color: #e7ecf2;
  padding: 2.2rem 1.2rem;
  border-top: 1px solid rgba(255,255,255,.08);
}

.footer-inner{
  max-width: 1200px; margin: 0 auto;
}

.footer-brand{
  text-align: center; margin-bottom: 1.6rem;
}
.footer-brand .brand{
  font-weight: 900; font-size: 1.6rem; letter-spacing: .5px;
  color: #7cf3ff; text-decoration: none;
  text-shadow: 0 0 12px rgba(124,243,255,.35);
}
.footer-brand .brand:hover{ text-decoration: none; filter: brightness(1.1); }
.footer-brand .tag{ margin:.3rem 0 0; color:#a9b4c0; }

.footer-grid{
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1.2rem;
  margin-bottom: 1.6rem;
}
.footer-col{
  background:
    linear-gradient(rgba(20,28,45,0.85), rgba(20,28,45,0.9)) padding-box,
    linear-gradient(135deg, rgba(255,255,255,.22), rgba(255,255,255,.08)) border-box;
  border: 1px solid transparent;
  border-radius: 14px;
  padding: 1rem;
  box-shadow: 0 10px 24px rgba(0,0,0,.35);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.footer-col h4{
  margin: 0 0 .6rem; font-size: 1rem; letter-spacing: .3px; color: #a5e3fc;
}
.footer-col ul li + li{ margin-top: .3rem; }
.footer-col a{
  color:#e7ecf2; text-decoration:none; padding:.2rem .1rem; border-radius:8px; display:inline-block;
}
.footer-col a:hover{
  background: rgba(255,255,255,.08); text-decoration:none;
}

/* Meta-Zeile */
.footer-meta{
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  border-top: 1px solid rgba(255,255,255,.08);
  padding-top: 1rem;
}
.footer-meta .social a{
  display:inline-grid; place-items:center; width:36px; height:36px;
  border-radius:10px; background: rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.14);
  margin-right: .4rem; color:#e7ecf2;
  transition: transform .18s ease, background .18s ease;
}
.footer-meta .social a:hover{ transform: translateY(-2px) scale(1.04); background: rgba(255,255,255,.12); }
.footer-meta .copy{ color:#a9b4c0; margin:0; }

/* Responsive Footer */
@media (max-width: 960px){
  .footer-grid{ grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px){
  .footer-grid{ grid-template-columns: 1fr; }
  .footer-meta{ flex-direction: column; align-items: center; gap:.6rem; }
}