/* STORY — .db-story   (index, about, landing = 4)
   Rebuilt against the prototype's .story. Three things the first pass missed:
     - a real .db-story__divider element between media and text
       (was faked with border-left on the text column)
     - .db-story__body wrapping the copy + a "Mehr erfahren" link-underline
     - text column is justify:space-between and stretches, so the link sits on
       the bottom edge of the image rather than floating under the paragraph
   Markup order is media -> divider -> text. */

.db-story { padding-block: 40px; }

.db-story .db-story__inner { display: flex; flex-direction: column; gap: 32px; }

.db-story__media img { width: 100%; height: 320px; object-fit: cover; }

.db-story__divider { display: none; }

.db-story .db-story__text { display: flex; flex-direction: column; gap: 24px; }
.db-story__text h2 { font-size: clamp(1.5rem, 6vw, 5rem); line-height: 1.1; }

.db-story .db-story__body { display: flex; flex-direction: column; gap: 16px; align-items: flex-start; }
.db-story__body p { font-size: 16px; line-height: 1.75; color: var(--muted); margin: 0; }

@media (min-width: 861px) {
	.db-story { padding-block: 96px; }
	.db-story .db-story__inner { flex-direction: row; align-items: center; justify-content: center; gap: 60px; }
	/* Figma 368:4011 has BOTH the media and the text column as `fill` — equal
	   columns, (1360 - 60 - 1 - 60) / 2 = 619.5px each at the 1440 design width.
	   The prototype instead hard-codes `flex: 1 1 55%` / `flex: 1 1 40%`, whose
	   bases (748 + 544) overflow the 1239px track and shrink proportionally to
	   ~704 / ~534 — the image ~85px too wide, the copy ~85px too narrow.

	   Equal bases, and deliberately NO min-width:0. The text column's automatic
	   minimum size is the min-content width of "GESCHICHTE" at 80px (~534px),
	   and that floor is load-bearing below ~1230px: it keeps the headline on one
	   word and lets the image absorb the shortfall, which is what the prototype
	   does. Adding min-width:0 lets the column shrink to 392px at 1000px, where
	   the h2 then breaks mid-word — the global `overflow-wrap: break-word` turns
	   the overflow into an ugly break rather than preventing it. (break-word does
	   not shrink min-content; only `anywhere` would.) */
	.db-story__media { flex: 1 1 0; }
	.db-story__media img { height: 500px; }
	.db-story__divider { display: block; width: 1px; align-self: stretch; background: var(--line); flex: 0 0 1px; }
	.db-story .db-story__text { flex: 1 1 0; align-self: stretch; justify-content: space-between; gap: 48px; }

	/* Figma 368:4017 gaps the paragraph and the "Mehr erfahren" link by 32px;
	   the prototype leaves it at the 16px mobile value. */
	.db-story .db-story__body { gap: 32px; }
	.db-story__text h2 { font-size: 5rem; }
}