/* =============================================================================
   Box mit Button (ACF: acf/box-with-button)
   -----------------------------------------------------------------------------
   Kompakte, linksbündige Info-Karte auf hellblauem Grund: Titel, Freitext und
   Button. Universell (Stellen, Hinweise, CTA). Der Sektions-Rhythmus kommt aus
   .section (layout.css), der Button aus .button (layout.css) — hier nur die
   Karte selbst.
   ========================================================================== */

@scope (.box-with-button) {
  .box-with-button__card {
    width: 100%;

    /* Fester Innenabstand, NICHT --inner-padding: das ist der clamp() Seitenrand,
       der auf Mobil auf 16px zusammenfaellt und die Karte an den Text kleben liess. */
    padding: 3.125rem; /* 50px */
    border-radius: var(--radius-lg);
    background-color: var(--color-blue-light);
    text-align: start;

    /* Auf Mobile wirkt der feste Innenabstand im Verhaeltnis zur schmalen Karte
       zu grosszuegig -> enger setzen. */
    @media (width <= 767px) {
      padding: 1.25rem; /* 20px */
    }
  }

  .box-with-button__title {
    margin-block-start: 0;
    font-size: var(--h3-size);
    font-weight: var(--font-weight-bold);
    text-shadow: none;
  }

  /* Aufzaehlungszeilen (kurze, gleichrangige Zeilen) sollen enger stehen als
     Flaechentext. Der Redakteur erreicht das im Editor ueber die Struktur der
     Eingabe: entweder als Liste, oder als eigener Absatz, der KOMPLETT fett ist —
     bewusst an "ganzer Absatz fett" gebunden, damit eine Hervorhebung mitten im
     Flaechentext den Absatzabstand nicht veraendert. */
  .box-with-button__text {
    --box-line-gap: 15px;
    --box-para-gap: 34px;

    & ul {
      list-style: none;
      padding-inline-start: 0;
    }

    /* Hoehere Spezifitaet als .inner ul:not([class]) aus layout.css noetig, sonst
       gewinnt dessen Einzug auch auf schmalen Screens. */
    @media (width <= 767px) {
      .box-with-button__card & ul {
        padding-inline-start: 0;
      }
    }

    & ul li {
      margin-block-end: var(--box-line-gap);
      font-weight: 500;

      /* Stellenbezeichnungen kommen aus dem Editor als <strong> und wuerden sonst
         das globale WYSIWYG-Fett (700) erben — hier auf 500 gehalten. */
      & :is(strong, b) {
        font-weight: 500;
      }

      &:last-child {
        margin-block-end: 0;
      }
    }

    /* Absatz, dessen GESAMTER Inhalt hervorgehoben ist = Aufzaehlungszeile. */
    & p:has(> strong:only-child) {
      margin-block-end: var(--box-line-gap);

      & > strong {
        font-weight: 500;
      }
    }

    /* Zurueck zum vollen Abstand, sobald wieder Flaechentext folgt. Der Wert
       sitzt am folgenden Absatz, da benachbarte Margins sonst zum Maximum statt
       zur Summe kollabieren. */
    & p:has(> strong:only-child) + p:not(:has(> strong:only-child)) {
      margin-block-start: var(--box-para-gap);
    }
  }

  .box-with-button__button {
    margin-block-start: 1.5rem;
  }
}