.ausblenden {
    display: none !important;
}

/* Textumbruch & Silbentrennung */
/* 1) Fließtext: saubere Silbentrennung */
:where(p, li) {
  hyphens: auto;               /* braucht lang="de" */
  overflow-wrap: break-word;
  word-break: break-word;
}

/* 2) Headlines: keine Silbentrennung, dafür balancierte Zeilen */
:where(h1, h2, h3, h4, h5, h6) {
  hyphens: auto;                /* optional, aber sauber */
  word-break: break-word;       /* bricht nur zwischen Silben */
  overflow-wrap: break-word;    /* keine zerstörten Wörter mehr */
  text-wrap: balance;           /* schöne Zeilen */
}

/* 3) UI-Texte (Buttons, Menü-Optionen etc.): niemals trennen */
:where(span.brx-option-text,
       span.bricks-button,
       li.repeater-item) {
  hyphens: none;
  overflow-wrap: normal;
  word-break: keep-all;        /* nur an Leerzeichen umbrechen */
  white-space: nowrap;
}

/* 4) Optional: Nur auf sehr schmalen Containern hyphenieren */
@container (inline-size < 45ch) {
  :where(p, li) { hyphens: auto; }
}

/* Coming Soon Label für Header & Footer */
.label-coming-soon {
    font-size: 0.75rem;
    background-color: var(--bricks-color-icwgki);
    color: var(--bricks-color-aarely);
    border-radius: 5px;
    padding-right: 5px;
    padding-left: 5px;
    font-weight: 300;
}

.label-coming-soon__white {
    font-size: 0.75rem;
    background-color: var(--bricks-color-aarely);
    color: var(--bricks-color-icwgki);
    border-radius: 5px;
    padding-right: 5px;
    padding-left: 5px;
    font-weight: 300;
}

/* ============================
   Footer-Menü: Animierte Unterlinie beim Hover
   ============================ */

.footer-container__nav .bricks-nav-menu li a {
  position: relative;
  display: inline-block;
  color: inherit;
  text-decoration: none;
  padding-bottom: 2px; /* etwas Platz für die Linie */
}

/* Unterstrich */
.footer-container__nav .bricks-nav-menu li a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 4px; /* Linie leicht nach oben versetzt (z. B. 4px über dem Rand) */
  width: 100%;
  height: 1px;
  background-color: var(--bricks-color-yczowt);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1); /* sanfte, dynamische Bewegung */
}

/* Hover-Effekt: animiert von links nach rechts */
.footer-container__nav .bricks-nav-menu li a:hover::after {
  transform: scaleX(1);
}