/* PHILOSOPHY — .db-philosophy   (index, about, jobs = 3)
   Head band with a bottom rule, then 3 columns divided by vertical rules. */
.db-philosophy__head { padding: 16px; border-bottom: 1px solid var(--line2); }
.db-philosophy__head h2 { font-size: clamp(1.75rem, 6vw, 5rem); text-align: center; line-height: 1.1; }
/* An intro paragraph under the title: same treatment as service-cols.css
   (Figma's centred intro: centred, max 840, 16px under the title). Torten and
   Mittagessen startseite carry one. RELAUNCH-NOTES §9.94. */
.db-philosophy__head > p { max-width: 840px; margin: 16px auto 0; text-align: center; font-weight: 300; font-size: 16px; line-height: 1.75; color: var(--muted); }
.db-philosophy .db-philosophy__grid { display: flex; flex-direction: column; gap: 20px; padding: 20px 0 40px; }
.db-philosophy__item { display: flex; flex-direction: column; gap: 12px; padding-bottom: 20px; border-bottom: 1px solid var(--line); }
.db-philosophy__item:last-child { border-bottom: none; padding-bottom: 0; }
.db-philosophy__item h3 { font-size: clamp(1.125rem, 3.5vw, 1.5rem); }
.db-philosophy__item p { font-size: 16px; line-height: 1.75; color: var(--muted); }
@media (min-width: 861px) {
	.db-philosophy__head { padding: 60px 0; }
	.db-philosophy__head h2 { font-size: 5rem; }
	.db-philosophy .db-philosophy__grid { flex-direction: row; gap: 0; padding: 60px 0 120px; }
	.db-philosophy__item { flex: 1; padding: 0 48px; border-bottom: none; border-left: 1px solid var(--line); justify-content: space-between; }
	.db-philosophy__item:first-child { padding-left: 0; border-left: none; }
	.db-philosophy__item:last-child { padding-right: 0; }
	.db-philosophy__item h3 { font-size: 1.5rem; }
}

/* --- variant: jobs  (.db-philosophy--jobs) --------------------------------
   Three prototype instances, three treatments. The base above is the homepage
   `.philosophy`; this is `.jb-philo`, which differs in five ways:

     head rule      kept at desktop        -> removed
     title          centred at all widths  -> left from 861px
     title clamp    1.75rem, 6vw, 5rem     -> 1.5rem, 8vw, 5rem
     item gap       12px, none at desktop  -> 8px -> 32px
     item rules     --line                 -> --line2
     name           natural height         -> min-height 2.6em at desktop

   `.ab-phil` (ueber-uns) is a third treatment again — sand background, a
   discrete divider element, 48px grid gap and an 861-1099.98 re-stack. It still
   needs its own variant; see the cross-page audit notes. */
.db-philosophy--jobs .db-philosophy__head { padding: 40px 0; }
.db-philosophy--jobs .db-philosophy__head h2 { font-size: clamp(1.5rem, 8vw, 5rem); }
.db-philosophy--jobs .db-philosophy__grid { gap: 24px; padding: 40px 0; }
/* Mobile draws a rule BETWEEN the three, not under the last one (368:5549 /
   368:5551 are separators between the instances, and there is none after the
   third). The base has that :last-child reset; the variant lost it by restating
   `border-bottom` at higher specificity. */
.db-philosophy--jobs .db-philosophy__item {
	gap: 8px;
	padding-bottom: 24px;
	border-bottom: 1px solid var(--line2);
}
.db-philosophy--jobs .db-philosophy__item:last-child { border-bottom: none; padding-bottom: 0; }
.db-philosophy--jobs .db-philosophy__item h3 { line-height: 1.3; }

@media (min-width: 861px) {
	/* 368:3137: the section runs 120 above and 60 below, with 48 between the
	   heading and the columns, and the heading is centred like the page's other
	   80/88 headings — not left, which was carried over from the prototype. */
	.db-philosophy--jobs .db-philosophy__head { padding: 120px 0 0; border-bottom: none; }
	.db-philosophy--jobs .db-philosophy__head h2 { text-align: center; line-height: 88px; }
	/* 96, not 48: the frame's row has 48px gaps AND a 1px divider element
	   between the columns, so the rule sits in the middle of 96px of air. */
	.db-philosophy--jobs .db-philosophy__grid { gap: 96px; padding: 48px 0 60px; }
	.db-philosophy--jobs .db-philosophy__item {
		position: relative;
		gap: 32px;
		padding-bottom: 0;
		/* ⚠️ Desktop has NO horizontal rule — only the vertical ones between the
		   columns (368:3139). The base clears `border-bottom` at this width, but
		   the variant re-set it above at higher specificity, so it survived into
		   the desktop layout and drew a line under all three columns. */
		border-bottom: none;
		border-left: none;
		justify-content: flex-start;
	}
	/* The rule is centred in the 96px gap rather than drawn on the column's own
	   edge, so the air either side of it is equal — the frame draws it as a
	   separate element between the columns. */
	.db-philosophy--jobs .db-philosophy__item + .db-philosophy__item::before {
		content: "";
		position: absolute;
		left: -48px;
		top: 0;
		bottom: 0;
		width: 1px;
		background: var(--line2);
	}
	/* reserve two lines so every description starts on the same baseline */
	.db-philosophy--jobs .db-philosophy__item h3 { min-height: 2.6em; line-height: 32px; }
}

/* --- variant: about  (.db-philosophy--about) ------------------------------
   `.ab-phil`, the third of the three treatments. Unlike the base and --jobs it
   separates the columns with a DISCRETE divider element rather than a
   border-left, so the 48px gap falls on both sides of the rule instead of
   hugging one column — the same approach as .db-about-pair__divider.

   It is also the only philosophy that re-stacks between 861 and 1100, where
   three 40px-gapped columns plus two rules leave the copy unreadably narrow. */
.db-philosophy--about { background: var(--sand); }
.db-philosophy--about .db-philosophy__head { padding: 40px 0; }
.db-philosophy--about .db-philosophy__grid { gap: 24px; padding: 40px 0; }
.db-philosophy--about .db-philosophy__item {
	gap: 24px;
	padding-bottom: 0;
	border-bottom: none;
}
.db-philosophy--about .db-philosophy__item h3 { font-size: clamp(1.125rem, 4vw, 1.5rem); line-height: 1.25; }
.db-philosophy--about .db-philosophy__divider { height: 1px; width: 100%; background: var(--line); }

@media (min-width: 861px) {
	.db-philosophy--about .db-philosophy__head { padding: 60px 0; }
	.db-philosophy--about .db-philosophy__head h2 { text-align: left; }
	.db-philosophy--about .db-philosophy__grid { align-items: stretch; gap: 48px; padding: 60px 0 120px; }
	.db-philosophy--about .db-philosophy__item {
		gap: 40px;
		padding: 0;
		border-left: none;
		min-width: 0;
		justify-content: flex-start;
	}
	.db-philosophy--about .db-philosophy__divider {
		width: 1px;
		height: auto;
		background: var(--line2);
		align-self: stretch;
		flex: 0 0 1px;
	}
}

@media (min-width: 861px) and (max-width: 1099.98px) {
	.db-philosophy--about .db-philosophy__grid { flex-direction: column; gap: 24px; }
	.db-philosophy--about .db-philosophy__divider { width: 100%; height: 1px; align-self: stretch; flex: 0 0 1px; }
}

/* The divider is a bare core/group: no aria-hidden. core/group's save() does not
   emit arbitrary attributes, so `aria-hidden="true"` in the saved markup fails
   block validation ("Expected attributes … instead saw …"). An empty div with no
   text content is already ignored by assistive tech. Same for every other
   __divider in this theme. */

/* --- four or more values  (Torten "Optionen für Deine …") -------------------
   The Torten product pages' option lists (4–6 short items, icon boxes on the old
   site) use this section. The import had put them into Leistungen, whose Figma
   frame is exactly four columns, so six came out as thin strips with the copy
   pushed to the bottom.
   - 4+ items: copy sits straight under its title (flex-start, not the base's
     space-between). With one-sentence items, a one-line sentence next to a
     two-line one was otherwise pushed to the bottom of the row.
   - 5+ items: rows of three, each row ruled like the base. Four stay one row.
   Every Philosophie before this had exactly three items, so none of them is
   affected. 2026-10-07, RELAUNCH-NOTES §9.81. */
@media (min-width: 861px) {
	.db-philosophy .db-philosophy__grid:has(> .db-philosophy__item:nth-child(4)) > .db-philosophy__item { justify-content: flex-start; }
	.db-philosophy .db-philosophy__grid:has(> .db-philosophy__item:nth-child(5)) { flex-wrap: wrap; row-gap: 60px; }
	.db-philosophy .db-philosophy__grid:has(> .db-philosophy__item:nth-child(5)) > .db-philosophy__item { flex: 0 0 33.3333%; padding: 0 48px; border-left: 1px solid var(--line); }
	.db-philosophy .db-philosophy__grid:has(> .db-philosophy__item:nth-child(5)) > .db-philosophy__item:nth-child(3n+1) { padding-left: 0; border-left: none; }
	.db-philosophy .db-philosophy__grid:has(> .db-philosophy__item:nth-child(5)) > .db-philosophy__item:nth-child(3n) { padding-right: 0; }
}