/* SECTION INTRO — .db-intro-band   (drinks-catering .dc-thirst = 1)
   Reclassified out of Banner: no image, solid sand, title + muted text. */
.db-intro-band { background: var(--sand); }
.db-intro-band .db-intro-band__inner { display: flex; flex-direction: column; gap: 24px; padding-block: 40px; }
.db-intro-band__title { font-size: clamp(1.75rem, 8vw, 3.75rem); line-height: 1.12; max-width: 882px; }
.db-intro-band__text { font-weight: 300; font-size: 16px; line-height: 1.75; color: var(--muted); max-width: 882px; }

/* --- variant: with a call to action --------------------------------------
   [Figma 368:554] the intro is a text group (heading + copy, 24px apart, 882px
   wide) with a gold CTA 32px below it — left-aligned, unlike the --centered
   treatment. Landing page uses this. The gap only changes when the group is
   present, so the plain intro bands are untouched. */
.db-intro-band__text-group { display: flex; flex-direction: column; gap: 24px; max-width: 882px; }
.db-intro-band .db-intro-band__inner:has(> .db-intro-band__text-group) { gap: 32px; }
.db-intro-band .db-intro-band__inner > .wp-block-buttons { margin: 0; }
@media (min-width: 861px) {
	.db-intro-band .db-intro-band__inner { padding-block: 120px; gap: 24px; }
	.db-intro-band__title { font-size: 3.75rem; }
}

/* --- variant: centred with a CTA  (.db-intro-band--centered) --------------
   The jobs page's "Wen suchen wir?" is a different design from .dc-thirst,
   which the base implements. Five prototype instances were folded into one
   pattern and they are really four treatments:

     .ce-intro .lp-intro   transparent, left, 3.75rem, 882px   (base, minus bg)
     .dc-thirst            as above + sand background          (base as built)
     .jb-intro             transparent, CENTRED, 5rem, 840px, + gold CTA  (here)
     .ab-quote             a display-font uppercase pull quote — not an intro
                           band at all; see the ueber-uns notes

   The base therefore paints sand on three instances that should be
   transparent. Not corrected here because it would change three pages that
   have not been diffed yet. */
.db-intro-band--centered { background: none; }
.db-intro-band--centered .db-intro-band__inner { align-items: center; }

/* Title and copy sit in their own 16px wrapper so the CTA lands 24px below the
   pair (32px on desktop) rather than sharing the tighter text gap. */
.db-intro-band--centered .db-intro-band__text-group {
	display: flex;
	flex-direction: column;
	gap: 16px;
	max-width: 840px;
}

.db-intro-band--centered .db-intro-band__title {
	font-size: clamp(1.5rem, 8vw, 2.5rem);
	line-height: 1.1;
	text-align: center;
	max-width: none;
}
.db-intro-band--centered .db-intro-band__text { text-align: center; max-width: none; }

@media (min-width: 861px) {
	.db-intro-band--centered .db-intro-band__inner { gap: 32px; }
	.db-intro-band--centered .db-intro-band__title { font-size: 5rem; }
}