/* Link dynamisch erweitern */
.expand-link {
  outline: 2px solid transparent;
  outline-offset: 3px;
  transition: outline-color .4s ease-out;
}

/* Styling nur, wenn ein Link mit href im Inneren existiert */
.expand-link:has(a[href]) {
  position: relative; /* Wichtig für das absolute ::before */
  isolation: isolate; /* Schafft neuen Stapelkontext */
  cursor: pointer;
}

/* Falls andere Links/Buttons im Container sind, müssen diese klickbar bleiben */
.expand-link :is(button, a:not(.expand-link a[href])) {
  position: relative;
  z-index: 2;
}

/* Hover-Effekt nur bei vorhandenem Link */
.expand-link:has(a[href]):hover {
  outline: 1px solid currentColor;
}

/* Der unsichtbare Klick-Bereich */
.expand-link a[href]::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
}

/* Fokus-Visualisierung für Barrierefreiheit */
.expand-link:has(a[href]):focus-within {
  outline: 2px dashed color-mix(in srgb, currentColor 30%, transparent);
  outline-offset: 0.2em;
}

/* Fallback: Entferne Standard-Focus vom Link selbst, da die Box den Fokus visuell übernimmt */
.expand-link a[href]:focus {
  outline: none;
}


/* Focus für Accessibility */
body.bricks-is-frontend : focus-visible, .expand-link: focus-within {
  outline-offset: 0.2em;
  outline: 2px dashed var(--primary-30);
}
.expand-link *: focus {
  outline: none !important;
}



/* Standardmäßig bei Grid Klasse auch die Grid-Gap anwenden */
:where(.brxe-container[class*="grid-"]), : where(.brxe-block[class*="grid-"]) {
  gap: var(--grid-gap);
}

:where([class*="grid-min-"] > *) {
  min-width:0;
}
/* wenn wir sauberes HTML machen, dann verwenden wir den container als ul und die grid-elemente als li => Styles resetten */
ul.brx-grid, ul.brxe-container, ul.brxe-block {
  list-style: none;
  padding-left: 0;
}