/* Block «contact band» — loaded only when the block is on the page. A centred
   call to action with direct contact routes (tel/mailto) and the primary button.
   All through classes — no inline style (CSP). */

.block-contact-cta { padding: var(--size-8) var(--size-6); text-align: center;
    border-block: 1px solid var(--border); }
.block-contact-cta :is(h1, h2) { margin: 0 0 var(--size-3); font-size: clamp(1.6rem, 3.5vw, 2.2rem); }
.contact-cta-inner { max-width: 44rem; margin-inline: auto; }
.contact-cta-text { margin: 0 0 var(--size-4); color: var(--muted); line-height: 1.6; }

/* Kontaktwege: Telefon + E-Mail nebeneinander, mobil untereinander. */
.contact-cta-lines { list-style: none; margin: 0 0 var(--size-5); padding: 0;
    display: flex; flex-wrap: wrap; justify-content: center; gap: var(--size-3) var(--size-6); }
.contact-cta-lines li { display: inline-flex; align-items: center; gap: .5rem; }
.contact-cta-icon { flex: none; color: var(--accent-fg); }
.contact-cta-lines a { color: var(--ink); font-weight: var(--font-weight-6); text-decoration: none; }
.contact-cta-lines a:hover, .contact-cta-lines a:focus-visible { text-decoration: underline; }

.contact-cta-action { margin: 0; }

/* «Buttons»: text on the left, phone and e-mail as buttons on the right, from a
   container of 761px (the viewport's 800px at the top level); stacked below. */
.contact-cta--buttons { text-align: left; display: flex; flex-wrap: wrap; align-items: center;
    justify-content: space-between; gap: var(--size-5); }
.contact-cta--buttons .contact-cta-inner { margin: 0; max-width: 40rem; }
.contact-cta--buttons .contact-cta-text { margin: 0; }
.contact-cta-actions { display: flex; flex-wrap: wrap; gap: var(--size-3); }
/* The second button is the outlined one; `color` in base AND hover rule, or the
   hover inherits the ground's (ButtonHoverContrastTest). */
.contact-cta-mail { color: var(--ink); border-color: var(--border); }
.contact-cta-mail:hover, .contact-cta-mail:focus-visible { color: var(--ink); border-color: var(--ink); }
@container (max-width: 760px) {
    .contact-cta--buttons { flex-direction: column; align-items: stretch; }
    .contact-cta-actions { display: grid; }
}