/* Block «columns» — loaded only when the block is on the page. Curated ratios as
   fixed classes (CSP, no style=); minmax(0, …) prevents overflow from long
   content. Below the width «Nebeneinander ab» names (cols-from-*) the columns
   stack: «Tablet» from a 680px container, «Desktop» from 940px, «Mobil» never.
   Measured at the top level under the widest gutters («Klar»): an iPad mini
   upright (744px) gives 685px, a 1024px screen 944px — the old single switch
   at 760px stacked them on every tablet held upright. */

.block-columns { display: grid; gap: var(--size-6); align-items: start; }

/* Every column is a query container: a child block's `@container` rule measures
   the column, not the screen — a form in a 25 % column is ~330px wide on a
   1400px screen and takes its narrow layout.
   ⚠️ `container-type` brings layout containment: the column becomes the
   containing block of a `position: fixed` descendant. The lightbox is a
   `<dialog>` in the top layer and does not care; a new fixed element in a child
   block would be pinned to the column, not the screen. */
.block-columns > .col { min-width: 0; container-type: inline-size; }
/* A word longer than its column breaks rather than pushing the page sideways —
   «Mobil» keeps a 33 % column on a phone, about 105px, and an e-mail address in
   the contact box ran 60px past the screen. Only where a word does not fit. */
.block-columns > .col { overflow-wrap: anywhere; }

/* Child blocks: the column rhythm takes over the spacing. */
.block-columns .block { margin-bottom: var(--size-5); }
.block-columns .col > .block:last-child { margin-bottom: 0; }

.cols--50-50    { --cols: repeat(2, minmax(0, 1fr)); }
.cols--33-66    { --cols: minmax(0, 1fr) minmax(0, 2fr); }
.cols--66-33    { --cols: minmax(0, 2fr) minmax(0, 1fr); }
.cols--25-75    { --cols: minmax(0, 1fr) minmax(0, 3fr); }
.cols--33-33-33 { --cols: repeat(3, minmax(0, 1fr)); }
.cols--50-25-25 { --cols: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr); }
.cols--25-50-25 { --cols: minmax(0, 1fr) minmax(0, 2fr) minmax(0, 1fr); }

.cols-from-mobile { grid-template-columns: var(--cols); }
@container (min-width: 680px) { .cols-from-tablet { grid-template-columns: var(--cols); } }
@container (min-width: 940px) { .cols-from-desktop { grid-template-columns: var(--cols); } }