/* =============================================================================
   Zweispaltiger Text — zwei WYSIWYG-Spalten nebeneinander (ACF: acf/two-column-text)
   -----------------------------------------------------------------------------
   Zentrierter Lesebereich. Sektions-Rhythmus (.section) und Lesebreite (.inner)
   kommen aus styles/layout.css; hier nur das Zwei-Spalten-Raster.
   Auf schmalen Screens (< 768px) fallen die Spalten untereinander.
   ========================================================================== */

@scope (.two-column-text) {
  /* Diese Sektion steht oft direkt vor dem schräg abschliessenden Footer —
     der Standard-.section-Rhythmus reicht dann nicht, der Text kaeme zu nah an
     die Schräge. Der untere Puffer ist deshalb fix groesser; der obere folgt
     separat unten, da er von der Block-Reihenfolge abhaengt. */
  :scope {
    padding-block-end: clamp(var(--space-block), 9vw, 240px);
  }

  /* Nur wenn oben wirklich eine Schräge anschliesst (Bild-Sektion oder geskewter
     Block), braucht der Kopf denselben grossen Puffer. */
  .image-section + :scope,
  .skew + :scope {
    padding-block-start: clamp(var(--space-block), 9vw, 240px);
  }

  :scope > .inner > .grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--grid-gap);
  }

  /* Letztes Element jeder Spalte ohne Abstand nach unten. */
  .col > :last-child {
    margin-block-end: 0;
  }

  /* Sprechzeiten-Tabelle (Kontakt): Selektor bewusst ohne .hours-Klasse, da die
     Tabelle aus dem WYSIWYG kommt und keine Klasse mitbringt (nur <td class="day">). */
  table {
    border-collapse: collapse;
    margin-block-end: 1.25rem; /* 20px */
  }

  td.day {
    inline-size: 2.5rem; /* 40px */
    font-weight: var(--font-weight-medium);
    text-align: start;
    vertical-align: baseline;
  }

  td {
    vertical-align: baseline;
  }

  /* Absatz direkt nach der Tabelle schliesst ohne Leerzeile an. */
  table + p {
    margin-block-start: 0;
  }

  /* Schmale Screens: Spalten untereinander stapeln. */
  @media (width <= 767px) {
    :scope > .inner > .grid {
      grid-template-columns: 1fr;
    }
  }
}