/*
 * Section block: a full-width surface (background colour, gradient or image from
 * the block's colour and background settings) around a content column of the
 * chosen width. Shared by the frontend and the iframed editor. Widths and spacing
 * are steps of the design tokens, so the rhythm can change without touching content.
 */
.ts-section { --ts-width: var(--wrap); --ts-inset: var(--gutter); position: relative; background-size: cover; background-position: center; }
.ts-section__inner { width: min(100% - 2 * var(--ts-inset), var(--ts-width)); margin-inline: auto; }
.ts-section--text { --ts-width: var(--measure); }
.ts-section--medium { --ts-width: var(--wrap-medium); }
.ts-section--full { --ts-width: 100%; }
.ts-section--inset-none { --ts-inset: 0px; }
.ts-section--inset-large { --ts-inset: calc(2 * var(--gutter)); }
/* Version 1 classes, until every section has been saved again (tools/migrate-block-editor-concept.php). */
.ts-section--narrow { --ts-width: var(--measure); }
.ts-section__inner > * { margin-block-start: 0; }
.ts-section__inner > * + * { margin-block-start: var(--wp--style--block-gap, 1.5rem); }
/* Text rhythm inside a section follows the text pages: more room above a sub-heading than below it. */
.ts-section__inner > :is(h2, h3) { margin-block-start: var(--space-sub); }
.ts-section__inner > :first-child:is(h2, h3) { margin-block-start: 0; }
.ts-section__inner > :is(h2, h3) + * { margin-block-start: 1rem; }
.ts-section__inner > h2:not(.sec-title, .is-style-abschnittstitel, .club__big, .support__title) { font-size: var(--fs-h2); line-height: 0.95; }
.ts-section__inner > * + .wp-block-buttons { margin-block-start: 1.5rem; }
:is(.ts-section--text, .ts-section--narrow) .ts-section__inner > :is(p, ul, ol) a:not(.wp-block-button__link) { color: var(--blue-hi); text-underline-offset: 3px; }
:is(.ts-section--text, .ts-section--narrow) .ts-section__inner > :is(ul, ol):not(.is-style-linkliste, .ts-link-list) { padding-left: 1.25rem; }

/* Spacing steps: 0, XS, S, M, L, XL of the section spacing, top and bottom separately. */
.ts-section--top-none { padding-top: 0; }
.ts-section--top-xs { padding-top: calc(var(--space-section) * 0.25); }
.ts-section--top-s { padding-top: calc(var(--space-section) * 0.4); }
.ts-section--top-m { padding-top: calc(var(--space-section) * 0.7); }
.ts-section--top-l { padding-top: var(--space-section); }
.ts-section--top-xl { padding-top: calc(var(--space-section) * 1.4); }
.ts-section--bottom-none { padding-bottom: 0; }
.ts-section--bottom-xs { padding-bottom: calc(var(--space-section) * 0.25); }
.ts-section--bottom-s { padding-bottom: calc(var(--space-section) * 0.4); }
.ts-section--bottom-m { padding-bottom: calc(var(--space-section) * 0.7); }
.ts-section--bottom-l { padding-bottom: var(--space-section); }
.ts-section--bottom-xl { padding-bottom: calc(var(--space-section) * 1.4); }
.ts-section--space-none { padding-block: 0; }
.ts-section--space-small { padding-block: calc(var(--space-section) * 0.4); }
.ts-section--space-medium { padding-block: calc(var(--space-section) * 0.7); }
.ts-section--space-large { padding-block: var(--space-section); }

/* Darkening over a background image, so text on it stays readable. */
.ts-section.has-overlay::before { content: ""; position: absolute; inset: 0; background: rgb(10 12 16 / var(--ts-section-overlay, 0)); pointer-events: none; }
.ts-section.has-overlay > .ts-section__inner { position: relative; }

/* Two plain sections in a row share one surface: the spacing between them is not doubled.
   The homepage event list ends with its own bottom spacing, so it counts as one too. */
:is(.ts-section:not(.has-background), .wp-block-theaterstuebchen-event-feed:has(> .programme.upcoming)) + .ts-section:not(.has-background, [style*="background"]) { padding-top: 0; }
/* A plain section straight after a full-width image starts with its normal spacing. */

/* A chosen text colour applies to everything inside, including headings and labels. */
.ts-section.has-text-color :where(h1, h2, h3, h4, h5, h6, p, li, .eyebrow, .is-style-dachzeile) { color: inherit; }
.ts-section.has-text-color :is(.eyebrow, .is-style-dachzeile)::before { background: currentColor; }

/* Buttons stay visible on the brand blue: white with blue text. */
.ts-section.has-brand-background-color .wp-block-button:not(.is-style-kontur, .ts-button-ghost) .wp-block-button__link { background: #fff; color: var(--blue-deep); }
.ts-section.has-brand-background-color .wp-block-button:not(.is-style-kontur, .ts-button-ghost) .wp-block-button__link:hover { background: var(--blue-soft); }
.ts-section.has-brand-background-color :is(.is-style-linkliste, .ts-link-list) { border-color: rgba(255, 255, 255, 0.3); }
.ts-section.has-brand-background-color :is(.is-style-linkliste, .ts-link-list) li { border-color: rgba(255, 255, 255, 0.3); }
.ts-section.has-brand-background-color :is(.is-style-linkliste, .ts-link-list) a::after { color: #fff; }