/*
 * Block styles editors choose in the sidebar ("Stile"), registered in
 * inc/editor.php. They replace class names typed into "Zusätzliche CSS-Klassen".
 * The old class names stay in the selectors until every installation has run
 * tools/migrate-block-editor-concept.php. Shared by the frontend and the editor.
 */

/* ---------- Buttons: Kontur and Hell (core's own Füllung/Kontur styles are hidden, see src/index.ts) ---------- */
:is(.wp-block-button.is-style-kontur, .ts-button-ghost) .wp-block-button__link { border: 2px solid rgba(255, 255, 255, 0.3); background: transparent; color: #fff; }
:is(.wp-block-button.is-style-kontur, .ts-button-ghost) .wp-block-button__link:hover { border-color: #fff; background: transparent; }
:is(.wp-block-button.is-style-hell, .ts-button-light) .wp-block-button__link { background: #fff; color: #000; }
:is(.wp-block-button.is-style-hell, .ts-button-light) .wp-block-button__link:hover { background: var(--blue-soft); }

/* ---------- Paragraphs: Dachzeile, Einleitung, Leitsatz ---------- */
.is-style-dachzeile { display: flex; align-items: center; gap: 0.6rem; color: var(--blue-hi); font: 700 var(--fs-label)/1 var(--font-display); letter-spacing: 0.01em; }
.is-style-dachzeile::before { content: ""; flex: none; width: 1.4rem; height: 0.55rem; background: var(--blue); }
:is(.is-style-leitsatz, .ts-claim) { color: var(--text); font: 800 var(--fs-h2)/0.95 var(--font-display); letter-spacing: 0.005em; text-wrap: balance; }
:is(.is-style-einleitung, .ts-lead) { max-width: var(--measure); color: var(--text); font-size: var(--fs-lead); line-height: 1.55; }
:is(.is-style-leitsatz, .ts-claim) + :is(.is-style-einleitung, .ts-lead) { margin-block-start: clamp(1rem, 0.8rem + 0.6vw, 1.5rem); }

/* ---------- List: Linkliste ---------- */
:is(.is-style-linkliste, .ts-link-list) { display: grid; gap: 0; padding: 0; list-style: none; border-top: 1px solid var(--line); }
:is(.is-style-linkliste, .ts-link-list) li { border-bottom: 1px solid var(--line); }
:is(.is-style-linkliste, .ts-link-list) a { display: flex; justify-content: space-between; gap: 1rem; padding: 0.9rem 0; color: var(--text); font: 700 1.375rem/1.1 var(--font-display); letter-spacing: 0.01em; text-decoration: none; transition: color 0.15s; }
:is(.is-style-linkliste, .ts-link-list) a::after { content: "→"; color: var(--blue-hi); transition: transform 0.15s; }
:is(.is-style-linkliste, .ts-link-list) a:hover { color: var(--blue-hi); }
:is(.is-style-linkliste, .ts-link-list) a:hover::after { transform: translateX(3px); }

/* ---------- Heading: Abschnittstitel, running into a bar to the screen edge ---------- */
.wp-block-heading.is-style-abschnittstitel { display: flex; align-items: flex-end; gap: clamp(0.75rem, 2vw, 1.5rem); margin-bottom: var(--space-head); font-size: var(--fs-display); line-height: 0.88; text-wrap: balance; }
.wp-block-heading.is-style-abschnittstitel::after { content: ""; flex: 1; height: var(--bar); margin-bottom: 0.4rem; margin-right: calc(-1 * var(--bleed)); background: var(--blue); }

/* ---------- Groups: Kachel and Kachel · Markenblau (slugs karte, karte-blau) ---------- */
.wp-block-group:is(.is-style-karte, .is-style-karte-blau) { display: flex; flex-direction: column; gap: 1rem; padding: clamp(1.25rem, 0.9rem + 1.5vw, 2.25rem); background: var(--card); }
.wp-block-group:is(.is-style-karte, .is-style-karte-blau) > * { margin-block: 0; }
:is(.is-style-karte, .is-style-karte-blau) :is(h2, h3, h4) { font-size: var(--fs-h3); }
:is(.is-style-karte, .is-style-karte-blau) ul { display: grid; gap: 0.9rem; margin: 0; padding: 0; list-style: none; }
:is(.is-style-karte, .is-style-karte-blau) li { position: relative; padding-left: 1.4rem; }
:is(.is-style-karte, .is-style-karte-blau) li::before { content: ""; position: absolute; left: 0; top: 0.62em; width: 0.7rem; height: 0.35rem; background: var(--blue); }
:is(.is-style-karte, .is-style-karte-blau) strong { color: var(--text); font-weight: 600; }
:is(.is-style-karte, .is-style-karte-blau) a:not(.wp-block-button__link) { color: var(--blue-hi); text-underline-offset: 3px; }
:is(.is-style-karte, .is-style-karte-blau) .wp-block-buttons { margin-top: auto; }
.wp-block-group.is-style-karte-blau { background: var(--blue); color: #fff; }
.is-style-karte-blau :is(h2, h3, h4, strong) { color: #fff; }
.is-style-karte-blau p { color: var(--blue-soft); }
.is-style-karte-blau p:has(> strong:only-child) { color: #fff; }
.is-style-karte-blau a:not(.wp-block-button__link) { color: #fff; }
.is-style-karte-blau li::before { background: #fff; }
.is-style-karte-blau .wp-block-button:not(.is-style-kontur) .wp-block-button__link { background: #fff; color: var(--blue-deep); }
.is-style-karte-blau .wp-block-button:not(.is-style-kontur) .wp-block-button__link:hover { background: var(--blue-soft); }
/* A large paragraph in a card (the address) is set in the display face. */
:is(.is-style-karte, .is-style-karte-blau) p.has-x-large-font-size { font-family: var(--font-display); line-height: 0.95; }
:is(.is-style-karte, .is-style-karte-blau) p.has-x-large-font-size strong { font-weight: 800; }

/* ---------- Group: Logoreihe (pattern "Förderer und Partner") ---------- */
.wp-block-group.is-style-logoreihe { gap: 1rem 2rem; }
.is-style-logoreihe > .is-style-dachzeile { flex-basis: 100%; }
.is-style-logoreihe .wp-block-image { margin: 0; }
.is-style-logoreihe .wp-block-image img { width: auto; max-width: 11rem; max-height: 4rem; object-fit: contain; }