/* ===============================
   Glossar: Grundabstände & Anker
   =============================== */
#glossar {
  /* margin-top / scroll-margin-top optional */
  /*scroll-margin-top: 180px;*/
}

.glossar-section {
  margin-top: 32px;
  margin-bottom: 9px;
  /* Desktop mit fixer Navigation */
  scroll-margin-top: 404px;
}

@media (max-width: 991.98px) {
  .glossar-section {
    /* Mobile mit fixer Navigation */
    scroll-margin-top: 450px;
  }
}

/* ==========================================
   Buttons: "Mehr Informationen" nur im Glossar
   ========================================== */
#glossar .open-modal-btn.btn-outline-primary.btn-sm {
  font-family: 'Roboto', sans-serif !important;
  font-weight: 500 !important;
  font-size: 0.875rem !important;     /* 14px (btn-sm) */
  line-height: 1.4 !important;

  border: 1px solid #004c97 !important;
  color: #004c97 !important;
  background-color: #fff !important;
  border-radius: 0.25rem !important;

  padding: 0.25rem 0.75rem !important; /* 4px 12px */
  height: 31px !important;             /* fixe Höhe wie Original */
  min-width: 143px !important;         /* fixe Breite wie Original */
  text-align: center;
  transition: all 0.2s ease-in-out;
}

#glossar .open-modal-btn.btn-outline-primary.btn-sm:hover {
  background-color: #004c97 !important;
  color: #fff !important;
  border-color: #004c97 !important;
}

/* ======================================
   Karteninhalte (nur im Glossar-Bereich)
   ====================================== */
#glossar .card .card-text.truncate-text {
  font-family: "Roboto Flex", sans-serif !important;
  font-weight: 500 !important;
}

/* Abstand im Card-Body wiederherstellen */
#glossar .card .card-body {
  padding: 1rem !important;
}

/* Card-Titel im Header */
#glossar .card .card-header .card-title {
  font-size: 1.25rem !important;
  font-family: 'Roboto', sans-serif !important;
  font-weight: 800;
  margin: 0;
  line-height: 1.2;
}

/* ==========================================
   Zielkarten-Highlight (Pulse) bei Ansprung
   – auf #glossar gescopet, damit global nichts
     unerwartet pulst.
   ========================================== */

/* :target-Variante */
#glossar .card[id]:target {
  position: relative;
  animation: cardPulse 1.2s ease-out;
}

/* Klassen-Variante (per JS setz-/entfernbar) */
#glossar .card.is-target {
  position: relative;
  animation: cardPulse 1.2s ease-out;
}

@keyframes cardPulse {
  0% {
    box-shadow: 0 0 0 0 rgba(0, 76, 151, 0.35);
    outline: 2px solid #004c97;
    outline-offset: 2px;
  }
  40% {
    box-shadow: 0 0 0 12px rgba(0, 76, 151, 0.16);
    outline: 2px solid #004c97;
  }
  70% {
    box-shadow: 0 0 0 4px rgba(0, 76, 151, 0.10);
    outline: 1px solid rgba(0, 76, 151, 0.5);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(0, 76, 151, 0);
    outline: none;
  }
}