/* =========================================================
   Cookie-Banner – isolierte Regeln für den Adventskalender (Schwedisch)
   Werte aus /styles/main.css (vokabeln2go.de, #cookie-banner,
   .cookie-buttons), damit der Kalender das globale Stylesheet
   nicht laden muss. Alle Selektoren sind auf #cookie-banner
   begrenzt; Farben sind fest gesetzt, damit die Kalender-
   Variablen (--text, --line …) keinen Einfluss haben.
   Wer den Banner in main.css ändert, zieht diese Datei mit.
   ========================================================= */

#cookie-banner{
  position:fixed;
  bottom:24px;
  left:50%;
  transform:translateX(-50%);
  width:min(92%,560px);
  max-height:calc(100vh - 48px);
  overflow:auto;
  box-sizing:border-box;
  margin:0;
  padding:18px 22px;
  border-radius:22px;
  background:rgba(255,255,255,0.78);
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
  border:1px solid rgba(0,0,0,0.08);
  box-shadow:0 18px 50px rgba(0,0,0,0.12);
  color:#1d1d1f;
  z-index:5000;
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  font-size:0.95rem;
  font-weight:400;
  line-height:1.45;
  letter-spacing:normal;
  text-align:left;
  text-transform:none;
  -webkit-font-smoothing:antialiased;
  transition:bottom .3s ease;
  display:none;
}

#cookie-banner p{
  margin:0;
  font:inherit;
  color:inherit;
}

#cookie-banner a{
  color:inherit;
  text-decoration:underline;
  text-underline-offset:2px;
}

#cookie-banner .cookie-buttons{
  margin-top:14px;
  display:flex;
  flex-wrap:wrap;
  gap:10px;
}

#cookie-banner .cookie-buttons button{
  margin:0;
  padding:8px 16px;
  border-radius:999px;
  font:inherit;
  font-size:0.9rem;
  font-weight:600;
  text-transform:none;
  letter-spacing:normal;
  cursor:pointer;
  border:1px solid rgba(0,0,0,0.08);
  background:#fff;
  color:#1d1d1f;
  box-shadow:none;
  transition:background .2s ease,transform .15s ease,box-shadow .15s ease;
}

#cookie-banner .cookie-buttons button:hover{
  transform:translateY(-1px);
  box-shadow:0 6px 16px rgba(0,0,0,0.08);
}

#cookie-banner #accept-cookies{
  background:#0071e3;
  color:#fff;
  border:none;
}

#cookie-banner #accept-cookies:hover{
  background:#0077ed;
}

#cookie-banner #decline-cookies{
  background:transparent;
}

/* Tastaturfokus: eigene, auf dem Banner gut sichtbare Markierung */
#cookie-banner a:focus-visible,
#cookie-banner .cookie-buttons button:focus-visible{
  outline:3px solid #0071e3;
  outline-offset:2px;
}

#cookie-banner:focus{
  outline:none;
}

#cookie-banner:focus-visible{
  outline:3px solid #0071e3;
  outline-offset:3px;
}

/* Touch-Geräte: Buttons mindestens 44 px hoch */
@media (pointer:coarse){
  #cookie-banner .cookie-buttons button{
    min-height:44px;
  }
}

/* Während eines Seiten-Intros (body.intro-running) sitzt der Banner
   auf schmalen Bildschirmen über dem „Intro überspringen“-Button. */
@media (max-width:900px){
  body.intro-running #cookie-banner{
    bottom:calc(max(22px, env(safe-area-inset-bottom, 0px)) + 58px);
  }
}

/* Kurzer Hinweis, wenn ein Fenster erst nach der Cookie-Entscheidung öffnet */
#cookie-banner.cookie-banner--hinweis{
  animation:cookie-banner-hinweis .6s ease;
}

@keyframes cookie-banner-hinweis{
  0%,100%{transform:translateX(-50%) translateY(0)}
  30%{transform:translateX(-50%) translateY(-6px)}
  60%{transform:translateX(-50%) translateY(0)}
  80%{transform:translateX(-50%) translateY(-2px)}
}

@media (prefers-color-scheme: dark){

  #cookie-banner{
    background:rgba(35,40,52,0.88);
    border:1px solid rgba(255,255,255,0.08);
    box-shadow:0 18px 50px rgba(0,0,0,0.45);
    color:#f5f5f7;
  }

  #cookie-banner .cookie-buttons button{
    background:rgba(255,255,255,0.06);
    color:#f5f5f7;
    border:1px solid rgba(255,255,255,0.08);
  }

  #cookie-banner #accept-cookies{
    background:#0071e3;
    color:#fff;
    border:none;
  }

  #cookie-banner #accept-cookies:hover{
    background:#0077ed;
  }

  #cookie-banner a:focus-visible,
  #cookie-banner .cookie-buttons button:focus-visible,
  #cookie-banner:focus-visible{
    outline-color:#8ab8ff;
  }

}

@media (prefers-reduced-motion: reduce){
  #cookie-banner,
  #cookie-banner .cookie-buttons button{
    transition:none;
  }
  #cookie-banner.cookie-banner--hinweis{
    animation:none;
  }
}