/* Bremedy website v3: uitklapmenu (21-10, keuze Bas: uitklapmenu met inhoud, geen Home-knop, logo is home).
   Werkt op elke pagina, ook de homepage. Panelen hangen onder de kopbalk; open bij hover, focus of klik op het pijltje.
   Ronde 3 (21-10): sneller en lichter (geen vervaging achter het menu), compacter.
   Ronde 4 (21-10): elk paneel dezelfde opbouw, donkere kaart links en keuzes rechts; de kaart vult de hoogte. */
.menu .heeft { display: inline-flex; align-items: center; gap: 4px; }
.menu .heeft .pijl { width: 14px; height: 14px; transition: transform .25s var(--gemak, ease); opacity: .7; }
.menu .heeft[aria-expanded="true"] { color: var(--tekst); background: var(--kaart); box-shadow: 0 1px 2px rgba(20,20,23,.06); }
.menu .heeft[aria-expanded="true"] .pijl { transform: rotate(180deg); }

.mega { position: absolute; left: 0; right: 0; top: 100%; z-index: 25; pointer-events: none; }
.mega .paneel { background: var(--kaart); border-bottom: 1px solid var(--lijn); box-shadow: 0 30px 60px -30px rgba(20,20,23,.35); opacity: 0; transform: translateY(-4px); visibility: hidden; transition: opacity .14s ease, transform .18s var(--gemak, ease), visibility 0s linear .18s; }
.mega .paneel.open { opacity: 1; transform: none; visibility: visible; pointer-events: auto; transition: opacity .14s ease, transform .18s var(--gemak, ease), visibility 0s; }
/* wisselen tussen panelen zonder opnieuw in te vliegen */
.mega .paneel.direct { transform: none !important; transition: opacity .12s ease !important; }
.mega .paneel.direct .stagger > * { animation: none !important; }
.mega .paneel[hidden] { display: none; }
.mega .paneel > .binnen { display: grid; gap: 22px 28px; padding-block: 22px 22px; }
.mega-sluier { position: fixed; inset: 0; z-index: 15; background: rgba(20,20,23,.18); opacity: 0; pointer-events: none; transition: opacity .18s; }
.mega-sluier.aan { opacity: 1; }
@media (max-width: 999px) { .mega, .mega-sluier { display: none; } }

/* oplossingen: hub links, producten in groepen, kleine voetregel eronder */
.p-oplossingen > .binnen { grid-template-columns: 280px minmax(0, 1fr); }
.hubkaart { background: var(--scherm); color: var(--op-scherm); border-radius: 18px; padding: 16px 18px 18px; display: grid; gap: 6px; grid-template-rows: minmax(118px, 1fr) auto auto auto; align-content: stretch; align-self: stretch; text-decoration: none; position: relative; overflow: hidden; }
.hubkaart::before { content: ""; position: absolute; inset: 0; background-image: radial-gradient(rgba(255,255,255,.07) 1px, transparent 1.2px); background-size: 16px 16px; -webkit-mask-image: radial-gradient(ellipse at 50% 40%, #000, transparent 75%); mask-image: radial-gradient(ellipse at 50% 40%, #000, transparent 75%); }
.hubkaart > * { position: relative; }
.hub { position: relative; min-height: 118px; }
.hub .kern { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 46px; height: 46px; border-radius: 14px; background: #fff; color: #141417; display: grid; place-items: center; box-shadow: 0 0 0 8px rgba(255,255,255,.06), 0 0 0 16px rgba(255,255,255,.03); }
.hub .kern .lucide { width: 20px; height: 20px; }
.hub .sys { position: absolute; left: calc(50% + var(--x)); top: calc(50% + var(--y)); transform: translate(-50%, -50%); display: inline-flex; align-items: center; gap: 4px; font-size: 10.5px; font-weight: 800; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.14); border-radius: 99px; padding: 3px 8px; white-space: nowrap; }
.hub .sys .lucide { width: 11px; height: 11px; }
.hub svg.lijnen { position: absolute; inset: 0; width: 100%; height: 100%; }
.hub svg.lijnen line { stroke: rgba(255,255,255,.18); stroke-width: 1; stroke-dasharray: 3 4; }
.hubkaart b { font-size: 15px; font-weight: 900; letter-spacing: -0.015em; line-height: 1.25; }
.hubkaart small { color: var(--scherm-zacht); font-size: 12.5px; line-height: 1.45; }
.hubkaart .naar { display: inline-flex; gap: 6px; align-items: center; font-size: 13.5px; font-weight: 800; }
.hubkaart .naar .lucide { width: 15px; height: 15px; transition: transform .2s; }
.hubkaart:hover .naar .lucide { transform: translateX(3px); }
@media (prefers-reduced-motion: no-preference) {
  .paneel.open .hub line { animation: stroom .9s var(--gemak, ease) both; }
  @keyframes stroom { from { stroke-dashoffset: 40; opacity: 0; } to { stroke-dashoffset: 0; opacity: 1; } }
}

.groepen { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 22px; align-content: start; }
.groep h4 { margin: 0 0 6px; font-size: 12px; font-weight: 800; color: var(--zacht); letter-spacing: .02em; }
.groep a { display: grid; grid-template-columns: 32px minmax(0, 1fr); gap: 0 10px; align-items: center; text-decoration: none; padding: 8px; margin: 0 -8px; border-radius: 12px; transition: background .15s; }
.groep a:hover, .groep a:focus-visible { background: var(--vlak); }
.groep a .ik { grid-row: span 2; width: 32px; height: 32px; border-radius: 9px; background: var(--vlak); display: grid; place-items: center; transition: background .15s, color .15s; }
.groep a:hover .ik { background: var(--donker); color: var(--op-donker); }
.groep a .ik .lucide { width: 16px; height: 16px; }
.groep a b { font-size: 14.5px; font-weight: 800; display: flex; gap: 6px; align-items: center; }
.groep a b em { font-style: normal; font-size: 10.5px; font-weight: 800; border-radius: 99px; padding: 2px 7px; background: var(--vlak); color: var(--zacht); }
.groep a small { font-size: 12.5px; color: var(--zacht); line-height: 1.35; }

.voetregel { grid-column: 1 / -1; margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 18px; padding-top: 14px; border-top: 1px solid var(--lijn); font-size: 13px; color: var(--zacht); }
.voetregel span { margin-right: auto; }
.voetregel b { color: var(--tekst); font-weight: 800; }
.voetregel a { display: inline-flex; gap: 5px; align-items: center; font-weight: 800; color: var(--tekst); text-decoration: none; }
.voetregel a .lucide { width: 14px; height: 14px; transition: transform .2s; }
.voetregel a:hover .lucide { transform: translateX(3px); }

/* succesverhalen en over ons: donkere kaart links, twee kolommen met rijen zoals bij Oplossingen (ronde 5, Bas: netter) */
.p-verhalen > .binnen { grid-template-columns: 280px repeat(2, minmax(0, 1fr)); column-gap: 28px; }
.allekaart { display: grid; gap: 6px; align-content: start; align-self: stretch; text-decoration: none; background: var(--scherm); color: var(--op-scherm); border-radius: 18px; padding: 18px; position: relative; overflow: hidden; }
.allekaart::before { content: ""; position: absolute; inset: 0; background-image: radial-gradient(rgba(255,255,255,.07) 1px, transparent 1.2px); background-size: 16px 16px; -webkit-mask-image: radial-gradient(ellipse at 80% 0%, #000, transparent 70%); mask-image: radial-gradient(ellipse at 80% 0%, #000, transparent 70%); }
.allekaart > * { position: relative; }
.allekaart .ik { width: 36px; margin-bottom: 10px; height: 36px; border-radius: 10px; background: rgba(255,255,255,.1); display: grid; place-items: center; }
.allekaart .ik .lucide { width: 18px; height: 18px; }
.allekaart b { font-size: 17px; font-weight: 900; letter-spacing: -0.015em; }
.allekaart small { color: var(--scherm-zacht); font-size: 13px; line-height: 1.45; }
.allekaart .naar { display: inline-flex; gap: 6px; align-items: center; font-size: 13.5px; font-weight: 800; margin-top: 6px; }
.allekaart .naar .lucide { width: 15px; height: 15px; transition: transform .2s; }
.allekaart:hover .naar .lucide { transform: translateX(3px); }
.p-verhalen .groep { display: grid; gap: 4px; align-content: start; }

@media (prefers-reduced-motion: no-preference) {
  .paneel.open .stagger > * { animation: menuin .22s var(--gemak, ease) both; animation-delay: calc(var(--k, 0) * 25ms); }
  @keyframes menuin { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
}
@media (prefers-reduced-motion: reduce) { .mega .paneel, .mega-sluier, .menu .heeft .pijl { transition: none; } }

/* mobiel: producten onder Oplossingen */
.mobiel .sub { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 6px 12px; border-bottom: 1px solid var(--lijn); }
.mobiel .sub a { font-size: 13.5px; font-weight: 700; padding: 6px 11px; border: 1px solid var(--lijn); border-radius: 99px; background: var(--kaart); }

/* het paneel hangt in de kopbalk: kopbalkregels (hoogte 68px, flex, logohoogte) niet laten doorwerken */
.kopbalk .mega .paneel > .binnen { display: grid; height: auto; align-items: start; }
.kopbalk .mobiel .binnen { display: grid; height: auto; gap: 2px; align-items: stretch; }