/* Small opt-in foundation. Existing branding tokens and legacy blocks stay intact. */
:root {
 --itwinkel-content-width: 1100px;
 --itwinkel-section-padding-top: 70px;
 --itwinkel-section-padding-bottom: 70px;
 --itwinkel-section-padding-x: 20px;
 --itwinkel-title-size: var(--itwinkel-h1-size, 38px);
 --itwinkel-title-line-height: var(--itwinkel-h1-line-height, 1.15);
 --itwinkel-subtitle-size: var(--itwinkel-body-size, 16px);
 --itwinkel-text-size: var(--itwinkel-body-size, 16px);
 --itwinkel-small-size: 14px;
 --itwinkel-label-size: 12px;
 --itwinkel-card-padding: 28px;
 --itwinkel-card-radius: 0px;
 --itwinkel-card-border: 1px solid var(--itwinkel-line);
 --itwinkel-gap-small: 12px;
 --itwinkel-gap-medium: 24px;
 --itwinkel-gap-large: 36px;
}
/* The existing section/card names opt into the new appearance via .itwinkel-inner. */
.itwinkel-section:has(> .itwinkel-inner) {
 width: 100%; padding: var(--itwinkel-section-padding-top) var(--itwinkel-section-padding-x) var(--itwinkel-section-padding-bottom);
}
.itwinkel-inner {
 width: 100%; max-width: var(--itwinkel-content-width); margin-inline: auto;
 color: var(--itwinkel-base-text); min-width: 0;
}
.itwinkel-label { display: inline-block; color: var(--itwinkel-muted); font-size: var(--itwinkel-label-size); font-weight: 600; text-transform: uppercase; letter-spacing: .12em; line-height: 1.5; }
.itwinkel-title { font-family: var(--itw-font-heading, var(--itwinkel-font)); color: var(--itw-heading-color); font-size: var(--itwinkel-title-size); line-height: var(--itwinkel-title-line-height); font-weight: 700; margin: 0 0 var(--itwinkel-gap-medium); }
.itwinkel-subtitle { font-size: var(--itwinkel-subtitle-size); color: var(--itwinkel-base-text); line-height: var(--itwinkel-body-line-height, 1.6); margin: 0 0 var(--itwinkel-gap-medium); }
.itwinkel-text { font-size: var(--itwinkel-text-size); color: var(--itwinkel-base-text); line-height: var(--itwinkel-body-line-height, 1.6); }
.itwinkel-small { font-size: var(--itwinkel-small-size); color: var(--itwinkel-muted); line-height: 1.5; }
.itwinkel-inner .itwinkel-card { padding: var(--itwinkel-card-padding); border: var(--itwinkel-card-border); border-radius: var(--itwinkel-card-radius); background: var(--itw-section-background); box-shadow: none; min-width: 0; }
.itwinkel-card-title { font-family: var(--itw-font-heading, var(--itwinkel-font)); font-size: var(--itwinkel-h3-size, 22px); line-height: var(--itwinkel-h3-line-height, 1.25); color: var(--itw-heading-color); margin: 0 0 var(--itwinkel-gap-small); font-weight: 600; }
.itwinkel-grid-2, .itwinkel-grid-3 { display: grid; gap: var(--itwinkel-gap-medium); }
.itwinkel-grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.itwinkel-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.itwinkel-divider { border: 0; border-top: 1px solid var(--itwinkel-line); margin-block: var(--itwinkel-gap-medium); }
.itwinkel-stack { display: flex; flex-direction: column; gap: var(--itwinkel-gap-medium); }
.itwinkel-stack > * { margin-block: 0; }
.itwinkel-text-center { text-align: center; }
.itwinkel-text-left { text-align: left; }
@media (max-width: 800px) {
 .itwinkel-section:has(> .itwinkel-inner) { padding-top: min(var(--itwinkel-section-padding-top), 40px); padding-bottom: min(var(--itwinkel-section-padding-bottom), 40px); padding-inline: min(var(--itwinkel-section-padding-x), 16px); }
 .itwinkel-title { font-size: min(var(--itwinkel-title-size), var(--itwinkel-h1-size-mobile, 32px)); }
 .itwinkel-subtitle { font-size: min(var(--itwinkel-subtitle-size), var(--itwinkel-body-size-mobile, 16px)); }
 .itwinkel-grid-2, .itwinkel-grid-3 { grid-template-columns: minmax(0, 1fr); }
}

.itwinkel-inner .itwinkel-card--soft { background: var(--itw-section-background-soft); }

/* Opt-in cards: existing page markup and legacy classes remain unchanged. */
.itw-card { box-sizing: border-box; position: relative; min-width: 0; max-width: 100%; overflow-wrap: anywhere; }
.itw-card-grid, .itw-card-grid-1, .itw-card-grid-2, .itw-card-grid-2-1, .itw-card-grid-1-2, .itw-card-grid-3, .itw-card-grid-4 {
 display: grid; grid-template-columns: minmax(0, 1fr);
 gap: var(--itw-card-gap, var(--itwinkel-gap-medium, 24px)); align-items: stretch;
}
.itw-card-grid-1 { grid-template-columns: minmax(0, 1fr); }
.itw-card-grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.itw-card-grid-2-1 { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
.itw-card-grid-1-2 { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); }
.itw-card-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.itw-card-grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.itw-card-grid > *, .itw-card-grid-1 > *, .itw-card-grid-2 > *, .itw-card-grid-2-1 > *, .itw-card-grid-1-2 > *, .itw-card-grid-3 > *, .itw-card-grid-4 > * { min-width: 0; }
.itw-card-flex { display: flex; flex-direction: column; }
.itw-card-flex > :is(.button, .itwinkel-button, .wp-block-button__link, .wp-block-button, .wp-block-buttons, .itw-card-actions, button[type="submit"], input[type="submit"]):last-child {
 margin-top: auto; align-self: flex-start;
}
@media (max-width: 900px) {
 .itw-card-grid-3, .itw-card-grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
 .itw-card-grid-2, .itw-card-grid-2-1, .itw-card-grid-1-2, .itw-card-grid-3, .itw-card-grid-4 { grid-template-columns: minmax(0, 1fr); }

}

@media (max-width: 700px) {
 .itwinkel-card-title { font-size: var(--itwinkel-h3-size-mobile, 21px); }
 .itwinkel-text { font-size: min(var(--itwinkel-text-size), var(--itwinkel-body-size-mobile, 16px)); }
}

/* Adjacent card/grid blocks share the grid gap; grid children and card contents are excluded. */
:where(:not(.itw-card-grid, .itw-card-grid-1, .itw-card-grid-2, .itw-card-grid-2-1, .itw-card-grid-1-2, .itw-card-grid-3, .itw-card-grid-4, .itwinkel-grid-2, .itwinkel-grid-3, .itwinkel-stack, .is-layout-grid, .is-layout-flex)):not(:where(.itw-card, .itw-card-block, .itw-card-topline, .itw-card-block-icon, .itw-card-media, .itwinkel-card)):not(:where(.itw-card, .itw-card-block, .itw-card-topline, .itw-card-block-icon, .itw-card-media, .itwinkel-card) *) > :is(.itw-card-block, .itw-card-topline, .itw-card-block-icon, .itw-card-media, .itw-card, .itw-card-grid) + :is(.itw-card-block, .itw-card-topline, .itw-card-block-icon, .itw-card-media, .itw-card, .itw-card-grid) {
 margin-top: var(--itw-card-gap, var(--itwinkel-gap-medium, 24px));
}

/* Grid gap supplies all spacing between direct card items, including intro/final cards. */
:is(.itw-card-grid, .itw-card-grid-1, .itw-card-grid-2, .itw-card-grid-2-1, .itw-card-grid-1-2, .itw-card-grid-3, .itw-card-grid-4) > :is(.itw-card, .itw-card-block, .itw-card-topline, .itw-card-block-icon, .itw-card-media, .itw-card-grid) {
 margin-block: 0;
}