/* ---------- Top-Buttons (Übersetzen / Alle Funktionen aktivieren) ---------- */
#google_translate_element, #translate-button, #enable-features {
  position: fixed;
  right: 10px;
  z-index: 2147483647; /* ganz nach oben */
  background: #fff;
  pointer-events: auto; /* Klicks sicherstellen */
}

/* Gemeinsame Button-Basis: perfekte Zentrierung */
#translate-button, #enable-features {
  top: 10px;
  border: none;
  padding: 6px 10px;
  font-size: .7rem;
  color: #000;
  cursor: pointer;
  box-shadow: 0 2px 6px rgba(0,0,0,.15);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  white-space: nowrap;
  user-select: none;
}

#translate-button:hover, #enable-features:hover { background-color: #f0f0f0; }
#enable-features.hide { display: none !important; }

#google_translate_element {
  display: none;
  top: 50px;
  border-radius: 8px;
  box-shadow: 0 4px 14px rgba(0,0,0,.2);
  padding: 8px 12px;
  font-size: .9rem;
}

/* Mobile Tuning – beide Buttons kompakter, Aktivieren-Button noch kleiner */
@media (max-width: 600px){
  #translate-button, #enable-features {
    top: 2px;
    right: 6px;
    padding: 4px 8px;
    font-size: .65rem;
    min-height: 26px;
  }
  #enable-features {
    top: 5px;
    right: 6px;
    padding: 5px 6px;
    font-size: .55rem;
    min-height: 22px;
    min-width: auto;
    font-weight: 1000;
  }
}

/* Header weich „aufpolstern“, damit Platz für die Buttons bleibt */
#header {
  transition: padding-top .35s ease;
  padding-top: calc(.5em + var(--consent-offset, 0px)) !important;
}

/* Wenn Cookies abgelehnt wurden: nur auf Mobile zusätzliches Polster */
@media (max-width: 600px){
  body.consent-declined #header {
    --consent-offset: 15px; /* genug Platz für Button oben rechts */
  }
}

/* Sicherheit: Google versucht manchmal, top/margin-top zu setzen */
body { top:0 !important; margin-top:0 !important; }
html { margin-top: 0 !important; }
body, .skiptranslate body { position: static !important; top: 0 !important; margin-top: 0 !important; }

/* Header unten eng machen: verhindert Extra-Lücke */
#header { padding-bottom: 0 !important; margin-bottom: 0 !important; }

/* ---------- Global Language Panel (floating) ---------- */
#lang-toggle {
  position: fixed;
  top: 10px;              /* bei Bedarf anpassen */
  right: 10px;
  z-index: 2147483647;
  background: #fff;
  border: none;
  padding: 6px 10px;
  font-size: .9rem;
  color: #000;
  cursor: pointer;
  box-shadow: 0 2px 6px rgba(0,0,0,.15);
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  border-radius: 10px;
  line-height: 1;
}
#lang-toggle:hover { background: #f0f0f0; }

#lang-panel {
  position: fixed;
  top: 50px;              /* unter dem Toggle */
  right: 10px;
  z-index: 2147483647;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  box-shadow: 0 8px 24px rgba(0,0,0,.18);
  padding: .35rem;
  min-width: 200px;
  max-height: 75vh;
  overflow: auto;
  transform: translateX(16px);
  opacity: 0;
  pointer-events: none;
  transition: transform .22s ease, opacity .22s ease;
}
#lang-panel.open {
  transform: translateX(0);
  opacity: 1;
  pointer-events: auto;
}
#lang-panel ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
#lang-panel li {
  display: flex;
  align-items: center;
  gap: .55rem;
  padding: .48rem .6rem;
  border-radius: 8px;
  cursor: pointer;
  font-size: .94rem;
  white-space: nowrap;
}
#lang-panel li:hover { background: #f3f4f6; }
#lang-panel li.active { background: #eef2ff; font-weight: 600; }
#lang-panel .flag { font-size: 1.05rem; line-height: 1; }

@media (max-width: 600px){
  #lang-toggle {
    top: 2px; right: 6px; padding: 4px 8px; font-size: .7rem; min-height: 26px;
  }
  #lang-panel { top: 40px; right: 6px; min-width: 170px; }
}

/* Sicherheit gegen Google-Banner-Layout-Schubserei */
html, body { margin-top:0 !important; }
body, .skiptranslate body { position: static !important; top:0 !important; }