/* =====================================================
   IAPaa – Optimized Design System (DE + EN)
   ===================================================== */

/* =========================
   ROOT COLORS
========================= */
:root{
  --bg-dark: #020617;
  --glass: rgba(255,255,255,0.08);
  --border: rgba(255,255,255,0.15);
  --accent: #38bdf8;
}

/* =========================
   BASE
========================= */
*{
  box-sizing: border-box;
}

body{
  margin:0;
  position: relative; /* für Overlay */
  font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  color:white;
  background: url("../images/Hintergrund.png") center/cover no-repeat fixed;
  min-height:100vh;
  overflow-x:hidden;
}

/* Overlay */
body::before{
  content:"";
  position: fixed;
  inset:0;
  background: linear-gradient(180deg, rgba(2,6,23,0.6), rgba(2,6,23,0.3));
  z-index:0;
  pointer-events: none;
}

/* =========================
   NAVIGATION (DESKTOP)
========================= */

.menu{
  position:fixed;
  top:20px;
  left:50%;
  transform:translateX(-50%);
  display:flex;
  gap:28px;
  padding:12px 26px;
  background:var(--glass);
  backdrop-filter: blur(16px);
  border:1px solid var(--border);
  border-radius:40px;
  z-index:20;
}

.menu a{
  display: flex;   /* wichtig! sichtbar auf Desktop */
  color:white;
  text-decoration:none;
  font-size:14px;
  opacity:0.85;
  transition:0.2s;
}

.menu a:hover{
  opacity:1;
  color:var(--accent);
}

.menu .login-btn {
  margin-left: 15px;
}

.menu a.active {
  color: var(--accent);
  opacity: 1;
}

/* =========================
   HAMBURGER (MOBILE)
========================= */
.hamburger{
  display:none; /* Desktop hidden */
  position:fixed;
  top:18px;
  left:20px;       /* links oben */
  font-size:28px;
  cursor:pointer;
  z-index:1001;    /* über Logo */
}

/* =========================
   MOBILE MENU
========================= */
.mobile-menu{
  display:none;
  position:fixed;
  top:65px;
  right:10px;
  flex-direction:column;
  gap:14px;
  padding:15px;
  background:#0f172a;
  border:1px solid var(--border);
  border-radius:16px;
  z-index:1000;
}

.mobile-menu a{
  /*display: none;  /* nur hier ausblenden */
  color:white;
  text-decoration:none;
  font-size:14px;
}

.mobile-menu a:hover{
  color:var(--accent);
}

.mobile-menu.active {
  display: flex; 
}

/* =========================
   BUTTONS
========================= */
.button{
  padding:14px 32px;
  border-radius:40px;
  border:1px solid var(--border);
  background:rgba(255,255,255,0.08);
  backdrop-filter:blur(12px);
  color:white;
  font-size:15px;
  cursor:pointer;
  margin-top:60px;
  transition:0.3s;
}

.button:hover{
  transform:translateY(-2px);
  background:rgba(255,255,255,0.18);
}

/* =========================
   HERO
========================= */
.hero{
  position: relative;
  z-index:2; /* über Overlay */
  display:flex;
  justify-content:center;
  align-items:center;
  text-align:center;
  padding:160px 20px 100px 20px;
}

.hero h1{
  font-weight:300;
  font-size:42px;
  line-height:1.25;
  margin:0;
}

.hero p{
  font-size:16px;
}

.logo-center{
  width:260px;
  max-width:75%;
  margin-bottom:35px;
  opacity:0;
  animation:fadeIn 1.4s ease forwards;
}

/* =========================
   POPUP
========================= */
.popup{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,0.7);
  display:flex;
  justify-content:center;
  align-items:center;
  opacity:0;
  pointer-events:none;
  transition:0.3s;
  z-index:100;
}

.popup.active{
  opacity:1;
  pointer-events:auto;
}

.popup-box{
  background:#0f172a;
  border:1px solid var(--border);
  padding:40px;
  border-radius:16px;
  max-width:520px;
  width:90%;
  line-height:1.6;
  color:#f8fafc;
}

.popup-box a{
  color:var(--accent);
  text-decoration:underline;
  font-weight:500;
}

.popup-box a:hover{
  color:#7dd3fc;
}

.popup-box hr{
  border:0;
  height:1px;
  background:rgba(255,255,255,0.15);
  margin:20px 0;
}

.close{
  margin-top:20px;
  cursor:pointer;
  opacity:0.8;
}

.close:hover{
  opacity:1;
}

/* =========================
   ANIMATIONEN
========================= */
@keyframes fadeIn{
  from{opacity:0; transform:translateY(20px);}
  to{opacity:1; transform:translateY(0);}
}

/* =========================
   ACCESSIBILITY
========================= */
a:focus,
button:focus{
  outline:2px solid var(--accent);
  outline-offset:3px;
}

/* =========================
   LOGO TOP RIGHT
========================= */
.logo-top{
  position:fixed;
  top:18px;
  right:20px;
  width:80px;
  height:auto;
  z-index:1000;    /* unter Hamburger */
  transition:transform 0.4s ease, filter 0.4s ease;
}

.logo-top:hover{
  transform:scale(1.05);
  filter:drop-shadow(0 0 10px rgba(255,255,255,0.6));
}

/* Logo auf der Startseite ausblenden */
body.home .logo-top{
  display:none !important;
}

/* =========================
   LANGUAGE SWITCH
========================= */
/* Desktop */
.lang-switch{
  position: fixed;
  top: 15px;       /* Abstand von oben */
  right: 5%;       /* Abstand vom rechten Rand */
  transform: none; /* Keine Verschiebung */
  z-index: 1000;
  font-size: 12px;
  color: white;    /* Weiß */
  opacity: 0.8;
  cursor: pointer;
}

.lang-switch a{
  margin:0 5px;
  cursor:pointer;
  color: white !important;  /* erzwingt weiß */
  text-decoration: none; /* optional */
}

.lang-switch a:hover{
  opacity:1;
  color: white !important;  /* auch beim Hover */
  text-decoration:underline;
}

/* Mobile (<768px) */
@media (max-width: 768px) {

  .lang-switch {
    top: 15px;
    right: 50%;
    transform: translateX(50%);
    font-size: 12px;
  }

  .menu {
    display: none;
  }
  .login-btn {
    position: static;      /* normale Flussposition */
    margin-top: 10px;
    width: 100%;           /* volle Breite unter Menü-Links */
    border-radius: 20px;
    text-align: center;
    padding: 8px 0;
  }

  .login-btn img {
    width: 18px;
    height: 18px;
  }
}

/* =========================
   FADE-IN ANIMATION
========================= */
.fade-in {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.fade-in.visible {
  opacity: 1;
  transform: translateY(0);
}

/* =========================
   MOBILE RESPONSIVE
========================= */
@media(max-width:768px){
  body {
    background-attachment: scroll; /* Fixed problematisch auf Mobile */
  }

  .hamburger {
    display: block;  /* jetzt sichtbar auf Mobile */
    top: 18px;       /* Höhe von oben */
    left: 15px;      /* Abstand von links – hier kannst du es anpassen */
    right: auto;     /* verhindert, dass Desktop right noch greift */
  }
  

  .login-btn img {
    width: 18px;
    height: 18px;
  }
  .hero{
    padding-top:120px;
    padding-left:15px;
    padding-right:15px;
  }

  .hero h1{
    font-size:26px;
  }

  .hero p{
    font-size:14px;
    line-height:1.5;
  }

  .button{
    font-size:14px;
    padding:12px 24px;
    margin-top:30px;
  }

  .logo-center{
    width:180px;
  }

  .logo-top{
    width:80px;
    top:18px;
    right:20px;
  }

  .mobile-menu{
    top:65px;
    right:10px;
    padding:15px;
    gap:14px;
  }

  .hamburger{
    display:block;
  }

  .lang-switch{
    top:15px;
    right:50%;
    transform: translateX(50%);
    font-size:12px;
  }
}

/* =========================
   LOGIN-Button
========================= */
/* Login-Button aus Menü heraus */
.login-btn {
  position: fixed;
  top: 18px;       /* gleiche Höhe wie das Menü */
  right: 20px;     /* Abstand vom rechten Rand */
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8px 12px;
  border-radius: 50%;       /* rundes Icon */
  background: rgba(255,255,255,0.08);
  border: 1px solid var(--border);
  cursor: pointer;
  z-index: 1001;            /* über allem */
  transition: 0.3s;
}

.login-btn:hover {
  background: rgba(255,255,255,0.18);
}

/* =========================
   LOGIN-Button MOBILE
========================= */
@media (max-width: 768px) {
  .login-btn {
    position: static;      /* Fluss innerhalb des mobilen Menüs */
    margin-top: 10px;
    width: auto;           /* nicht 100%, sondern nur so breit wie nötig */
    border-radius: 20px;   /* abgerundet, nicht rund */
    text-align: center;
    padding: 8px 12px;
  }

  .login-btn img {
    width: 18px;
    height: 18px;
  }
}