.has-megamenu {
  position: relative;
}

.megamenu {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%) translateY(8px);
  width: min(920px, 92vw);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  padding: var(--space-xl);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.15s ease, transform 0.15s ease;
  z-index: 200;
}

.has-megamenu:hover .megamenu,
.has-megamenu:focus-within .megamenu {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}

.has-megamenu:hover .nav-chevron,
.has-megamenu:focus-within .nav-chevron {
  transform: rotate(180deg);
}

.megamenu-inner {
  display: flex;
  gap: var(--space-xl);
  align-items: flex-start;
  min-width: 0;
}

.megamenu-columns {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  column-gap: var(--space-xl);
  row-gap: var(--space-lg);
  flex: 1;
  min-width: 0;
}

.megamenu-col {
  min-width: 0;
}

.megamenu-col h4 {
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-accent-dark);
  font-weight: 700;
  margin-bottom: 0.7rem;
  overflow-wrap: break-word;
  hyphens: auto;
}

.megamenu-col a {
  display: block;
  font-size: var(--fs-sm);
  color: var(--color-text);
  padding: 0.35rem 0;
}

.megamenu-col a:hover {
  color: var(--color-accent-dark);
}

.megamenu-promo {
  position: relative;
  width: 200px;
  flex-shrink: 0;
  background: var(--color-bg-alt);
  border-radius: var(--radius-md);
  padding: var(--space-md);
  text-align: center;
  transition: background 0.15s ease;
}

/* Die ganze Karte klickbar: Der CTA-Link wird ueber die Karte gespannt,
   statt Bild und Text einzeln zu verlinken. Verschachtelte Links waeren
   ungueltiges Markup, und ein zweiter Link um dieselbe Kachel wuerde
   Screenreadern dasselbe Ziel doppelt vorlesen. */
.megamenu-promo__cta::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: var(--radius-md);
}

.megamenu-promo:hover {
  background: #ece5d9;
}

.megamenu-promo:hover .megamenu-promo__cta {
  background: var(--color-accent-dark);
}

.megamenu-promo:hover img {
  transform: scale(1.04);
}

.megamenu-promo-badge {
  display: inline-block;
  background: var(--color-bg-dark);
  color: var(--color-text-inverse);
  font-size: 0.65rem;
  font-weight: 700;
  padding: 0.25rem 0.6rem;
  border-radius: 999px;
  margin-bottom: 0.6rem;
}

.megamenu-promo img {
  max-width: 100px;
  height: auto;
  margin: 0 auto 0.6rem;
  transition: transform 0.15s ease;
}

.megamenu-promo h5 {
  font-size: var(--fs-sm);
  margin-bottom: 0.2rem;
}

.megamenu-promo p {
  font-size: 0.7rem;
  color: var(--color-text-muted);
  margin-bottom: 0.5rem;
}

.megamenu-promo strong {
  display: block;
  font-size: var(--fs-md);
  margin-bottom: 0.7rem;
}

.megamenu-promo .btn {
  padding: 0.6rem 0.8rem;
  font-size: var(--fs-xs);
}

@media (max-width: 860px) {
  .megamenu {
    display: none;
  }
}

/* Der CTA ist der Abschluss der Kachel und darf deutlicher auftreten -
   vorher ging er zwischen Preis und Rand unter. */
.megamenu-promo__cta {
  padding: 0.7rem 1rem;
  font-size: var(--fs-sm);
  font-weight: 700;
}