/* PACKAGES — .db-packages  (corporate-events, landing = 3)
   Scroll-snap rail on mobile, three-column grid from 861px. */
.db-packages { background: var(--sand); }
.db-packages .db-packages__inner { display: flex; flex-direction: column; gap: 32px; padding-block: 40px; }
.db-packages__title { font-size: clamp(2rem, 9vw, 5rem); text-align: center; line-height: 1.1; }
.db-packages .db-packages__grid { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.db-packages .db-packages__grid::-webkit-scrollbar { display: none; }
/* The cards are NOT white boxes. [Figma 368:647] the three columns sit flush
   against each other on the sand ground, all transparent except the middle one,
   which is filled #CABAAA so it reads as a highlighted band running the full
   height of the row. The prototype agrees (.lp-pkg has no background or border;
   only .lp-pkg--featured is filled). */
.db-packages__pkg {
	flex: 0 0 300px; scroll-snap-align: start;
	display: flex; flex-direction: column; gap: 24px;
	padding: 24px; background: transparent; border: 0;
}

.db-packages__pkg--featured { background: #CABAAA; }

.db-packages__pkg h3 { font-size: 1.5rem; line-height: 1.25; }

/* group = a subtitle over its bulleted list; groups stack 24px apart */
.db-packages__groups { display: flex; flex-direction: column; gap: 24px; }
.db-packages__group  { display: flex; flex-direction: column; gap: 8px; }

/* The subtitle is body-font sentence case, not the uppercase display face the
   headings use — it is an h4, which the global h1-h3 rule does not reach. */
.db-packages__subtitle {
	margin: 0;
	font-family: var(--font-body); font-weight: 400;
	font-size: 16px; line-height: 1.5; text-transform: none; color: var(--ink);
}

.db-packages .db-packages__list { display: flex; flex-direction: column; gap: 8px; margin: 0; padding: 0; list-style: none; }
.db-packages .db-packages__list li { position: relative; padding-left: 18px; }
.db-packages .db-packages__list li::before {
	content: ""; position: absolute; left: 0; top: 9px;
	width: 6px; height: 6px; border-radius: 50%; background: var(--gold);
}

/* Price then "pro Person", sharing a baseline.
   Both selectors are doubled up on purpose. `.db-packages__pkg p` below is
   (0,1,1) and would win the font-size/colour on a bare `.db-packages__price`,
   and core emits its own `align-items: flex-end` for the flex block's
   verticalAlignment — so the section class has to be in front of both. */
.db-packages .db-packages__foot { display: flex; align-items: baseline; gap: 8px; }
.db-packages .db-packages__price { font-family: var(--font-display); text-transform: uppercase; font-size: 1.5rem; line-height: 1.2; color: var(--ink); margin: 0; }
.db-packages .db-packages__per { font-size: 16px; color: var(--muted); margin: 0; }

.db-packages__pkg p, .db-packages__pkg li { font-size: 16px; line-height: 1.6; color: var(--muted); }
@media (min-width: 861px) {
	.db-packages .db-packages__inner { padding-block: 60px 120px; gap: 60px; }
	/* gap 0 on purpose: the featured column's fill is meant to butt up against
	   its neighbours as a single band. A gap would leave it floating. */
	.db-packages .db-packages__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; overflow: visible; }
	.db-packages__pkg { flex: initial; padding: 48px; }
}

/* --- variant: example packages  (.db-packages--examples) ------------------
   /event-ausstattung-muenchen/'s "Event Ausstattung - Beispiele"
   [Figma 368:1891, mobile 368:6112].

   ⚠️ THIS ONE IS A REAL VARIANT, and the evidence is two frames rather than the
   prototype. Three variant sets came out of this file's neighbours this week
   because someone read a prototype difference as a design difference (§9.36,
   §9.38, §9.40) — so, explicitly: the landing page's frame [368:647] has
   TRANSPARENT cards sitting flush with one #CABAAA column highlighted, and this
   frame has ALL THREE cards filled #EFE5DC with a 16px gap between them. Two
   frames, two treatments. Not drift.

   Other real differences: 44px card padding (not 48), a flat bulleted list with
   no group subtitles, and a centred footnote under the row that the base has no
   slot for. Mobile stacks the cards at gap 10 [368:6116] rather than railing
   them, which is the opposite of the base — also from the frame, not the port. */
.db-packages--examples .db-packages__pkg {
	background: #EFE5DC;
	padding: 20px 16px;
	gap: 20px;
}

/* cards + note, 32 apart on mobile and 40 on desktop [368:1894 / 368:6115] */
.db-packages--examples .db-packages__body {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 32px;
}

/* stacked, not railed: no overflow, no scroll-snap, no fixed card width */
.db-packages--examples .db-packages__grid {
	display: flex;
	flex-direction: column;
	gap: 10px;
	overflow: visible;
}
.db-packages--examples .db-packages__pkg { flex: 1 1 auto; }

/* 12 for every card. Figma is inconsistent here — card one's list is gap 12
   [368:1898], cards two and three are gap 4 [EL-5473bef8] — which reads as the
   designer nudging one frame rather than three intentions. Took the roomier
   value; worth a word with them if they disagree. */
.db-packages--examples .db-packages__list { gap: 12px; }

.db-packages__note {
	font-size: 14px;
	line-height: 1.5714;
	text-align: center;
	color: var(--muted);
	max-width: 590px;
	margin-inline: auto;
}
/* the leading asterisk is gold, the phone number ink [368:1975] */
.db-packages__note .db-packages__star { color: var(--gold); }
.db-packages__note a { color: var(--ink); }
.db-packages__note a:hover { color: var(--gold); }

@media (min-width: 861px) {
	/* 120 top as well as bottom [368:1891 padding "120px 40px"]. The base is
	   60/120, from the landing frame — a genuine per-frame difference. */
	.db-packages--examples .db-packages__inner { padding-block: 120px; }

	.db-packages--examples .db-packages__body { gap: 40px; }

	/* a real 16px gutter, unlike the base's deliberate gap: 0 band */
	.db-packages--examples .db-packages__grid {
		display: flex;
		flex-direction: row;
		align-items: stretch;
		gap: 16px;
	}
	.db-packages--examples .db-packages__pkg { flex: 1; padding: 44px; gap: 24px; }
}