/* =========================================================
   A11y helper – eigene Klasse, kein Konflikt mit Drupal Core
   ========================================================= */
.ico-visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  clip: rect(0 0 0 0); overflow: hidden;
}

/* =========================================================
   Fix für eingeloggte Admins: Contextual Buttons & Links
   ========================================================= */

/* Trigger (Button) bleibt unsichtbar wie im Core */
.contextual .trigger.visually-hidden {
  position: absolute !important;
  clip: rect(1px, 1px, 1px, 1px);
  height: 1px;
  width: 1px;
  overflow: hidden;
  white-space: nowrap;
}

/* Contextual Links standardmäßig ausblenden */
.contextual .contextual-links {
  display: none;
}

/* Sichtbar nur, wenn geöffnet */
.contextual.open .contextual-links,
.contextual .trigger[aria-pressed="true"] + .contextual-links {
  display: block;
}



/* ###################################### */
//* Contextual Links: sichtbar nur bei Hover/Fokus (Admin bleibt nutzbar) */

/* Trigger-Button (Zahnrad) soll sichtbar werden, wenn man den Block "anfasst" */
.contextual-region {
  position: relative;
}

/* Trigger initial verstecken (nicht display:none, sonst nicht nutzbar) */
.contextual .trigger {
  opacity: 0;
  pointer-events: none;
  transition: opacity 150ms ease;
}

/* Wenn Block hovered/focused → Trigger zeigen */
.contextual-region:hover .contextual .trigger,
.contextual-region:focus-within .contextual .trigger {
  opacity: 1;
  pointer-events: auto;
}

/* Links bleiben zu, bis Drupal sie öffnet (dein Fix bleibt gültig) */
.contextual .contextual-links { display: none; }
.contextual.open .contextual-links,
.contextual .trigger[aria-pressed="true"] + .contextual-links { display: block; }





/* =========================================================
   Burger-Button
   ========================================================= */
.burger {
  position: relative;
  width: 44px;
  height: 44px;
  border: 0;
  background: transparent;
  cursor: pointer;
  display: none; /* Desktop aus */
  color: currentColor;
  z-index: 1000; /* über dem Nav */
}

.burger__bar {
  position: absolute;
  left: 10px; right: 10px;
  height: 2px;
  top: 50%;
  transform: translateY(-50%);
  transition: transform 200ms ease, opacity 200ms ease;
  background: currentColor;
}
.burger__bar:nth-child(1) { transform: translateY(-10px); }
.burger__bar:nth-child(2) { transform: translateY(-50%); }
.burger__bar:nth-child(3) { transform: translateY(8px); }

/* Geöffnet -> Kreuz */
.burger[aria-expanded="true"] .burger__bar:nth-child(1) {
  transform: translateY(-50%) rotate(45deg);
}
.burger[aria-expanded="true"] .burger__bar:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] .burger__bar:nth-child(3) {
  transform: translateY(-50%) rotate(-45deg);
}

/* =========================================================
   Desktop - different ID´s on theme change -> -main-menu vs. -main-navigation
   ========================================================= */
@media (min-width: 768px) {
  nav.block-plugin-system_menu_block-main .burger { display: none; }
  nav.block-plugin-system_menu_block-main ul {
    height: auto !important;
    overflow: visible;
  }
}

/* =========================================================
   Mobile
   ========================================================= */
@media (max-width: 767.98px) {
  nav.block-plugin-system_menu_block-main .burger { display: inline-block; }

  nav.block-plugin-system_menu_block-main ul {
    height: 0;               /* wird per JS animiert */
    overflow: hidden;
    transition: height 280ms ease;
    will-change: height;
    margin: 0;
    padding: 0;
    list-style: none;
  }

  nav.block-plugin-system_menu_block-main.is-open ul {
    /* JS setzt inline die px-Höhe, CSS braucht hier nichts */
  }

  nav.block-plugin-system_menu_block-main ul > li {
    border-top: 1px solid rgba(0,0,0,.08);
  }

  nav.block-plugin-system_menu_block-main ul a {
    display: block;
    padding: 12px 16px;
    text-decoration: none;
  }
}