/* MEDIA CAROUSEL — .db-carousel  (index, jobs, landing, event-catering = 5)
   Scroll-snap rail: drag and swipe work natively with no JavaScript. The
   prev/next buttons are progressive enhancement (assets/js/rail.js) and are
   hidden when the script has not run. */
.db-carousel .db-carousel__inner { display: flex; flex-direction: column; gap: 32px; padding-block: 40px; }
.db-carousel__title { font-size: clamp(2rem, 9vw, 5rem); line-height: 1.1; }
.db-carousel .db-rail {
	display: flex; gap: 16px; overflow-x: auto;
	scroll-snap-type: x mandatory; scroll-behavior: smooth; scrollbar-width: none;
}
.db-carousel .db-rail::-webkit-scrollbar { display: none; }
.db-carousel .db-rail > * { flex: 0 0 82%; scroll-snap-align: start; margin: 0; }
.db-carousel .db-rail img { width: 100%; height: 420px; object-fit: cover; }
.db-rail-nav { display: none; gap: 16px; }
.db-rail-nav.is-ready { display: flex; }
.db-rail-nav button {
	width: 56px; height: 56px; border: 1px solid var(--line2); border-radius: 50%;
	background: transparent; color: var(--ink); cursor: pointer;
	display: inline-flex; align-items: center; justify-content: center; font-size: 20px;
}
.db-rail-nav button:hover { background: var(--sand); }
.db-rail-nav button[disabled] { opacity: .35; cursor: default; }
@media (min-width: 861px) {
	.db-carousel .db-carousel__inner { padding-block: 120px; gap: 48px; }
	.db-carousel__title { font-size: 5rem; }
	.db-carousel .db-rail > * { flex: 0 0 480px; }
	.db-carousel .db-rail img { height: 680px; }
}

/* --- variant: split grid  (.db-carousel--split) ---------------------------
   The homepage gallery is NOT the stacked carousel. On desktop it is a two
   column grid: heading top-left, arrows bottom-left, the scroll track filling
   the right column.

     grid-template-columns: minmax(360px, 480px) 1fr
     grid-template-rows:    auto 1fr
     areas:  "title  track"
             "arrows track"

   Found while diffing the homepage — the single carousel pattern was covering
   three genuinely different layouts (this grid, the jobs 3-up, and the landing
   4-up category rails). Do not fold them back together. */
.db-carousel--split { background: var(--sand); }

.db-carousel--split .db-carousel__inner {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 24px;
	padding-block: 40px;
}
.db-carousel--split .db-carousel__title { text-align: center; font-size: clamp(1.5rem, 6vw, 5rem); line-height: 1.1; }
.db-carousel--split .db-rail { gap: 12px; width: 100%; padding-bottom: 4px; }
.db-carousel--split .db-rail > * { flex: 0 0 auto; width: 300px; }
.db-carousel--split .db-rail img { width: 300px; height: 425px; }

@media (min-width: 861px) {
	.db-carousel--split .db-carousel__inner {
		display: grid;
		grid-template-columns: minmax(360px, 480px) 1fr;
		grid-template-rows: auto 1fr;
		grid-template-areas:
			"title  track"
			"arrows track";
		align-items: start;
		gap: 32px 48px;
		padding-block: 120px;
	}
	.db-carousel--split .db-carousel__title { grid-area: title; text-align: left; font-size: 5rem; align-self: start; }
	.db-carousel--split .db-rail          { grid-area: track; gap: 16px; }
	.db-carousel--split .db-rail-nav      { grid-area: arrows; align-self: end; }
	.db-carousel--split .db-rail > *      { width: 480px; }
	.db-carousel--split .db-rail img      { width: 480px; height: 680px; }
}

/* --- variant: 3-up portrait rail  (.db-carousel--thirds) ------------------
   The jobs "Das sind wir" rail, and the third layout the note above warned
   about. Centred heading; three portrait frames visible from 861px with
   anything beyond that swiping. Mobile is a fixed 300x425 card so the next one
   peeks in; desktop divides the track into thirds and switches to a 3/4 aspect
   ratio so the images scale with the column instead of a fixed height. */
/* The section closes with the same hairline the other page-enders use. */
.db-carousel--thirds { border-bottom: 1px solid var(--line); }
.db-carousel--thirds .db-carousel__inner { align-items: center; gap: 24px; }
.db-carousel--thirds .db-carousel__title { font-size: clamp(1.5rem, 8vw, 5rem); text-align: center; }
.db-carousel--thirds .db-rail { gap: 10px; width: 100%; }
.db-carousel--thirds .db-rail > * { flex: 0 0 300px; scroll-snap-align: center; }
.db-carousel--thirds .db-rail img { width: 300px; height: 425px; }
.db-carousel--thirds .db-rail-nav { gap: 12px; }

@media (min-width: 861px) {
	.db-carousel--thirds .db-carousel__inner { gap: 60px; padding-block: 60px 120px; }
	.db-carousel--thirds .db-carousel__title { font-size: 5rem; line-height: 88px; }
	.db-carousel--thirds .db-rail { gap: 16px; justify-content: flex-start; }
	/* 480x680 fixed, not a third of the track (368:3155). Three of them plus the
	   gaps come to 1583 against a 1360 column, which is the point — it is a rail,
	   and the third frame is meant to sit half off the edge. Dividing the track
	   into thirds gave 443x590 and no reason to scroll. */
	/* ⚠️ The rail BLEEDS to the right screen edge, like --cats does. The frame
	   runs 480 | 591 | 480 with 16px gaps — 1583 against a 1360 column — so the
	   third frame is meant to be cut by the VIEWPORT, roughly half showing. Ending
	   the track at the page gutter instead left a 40px strip of cream beside a
	   fully visible third frame, which is what the client reported.

	   Safe as a plain negative margin for the same reason as --cats: the rail is
	   two levels below `.is-layout-constrained`, so core's
	   `margin-inline: auto !important` (Trap 25) does not reach it. */
	.db-carousel--thirds .db-rail {
		/* `align-items: center` on the inner column would centre the rail's
		   shortened margin box and put the bleed on the wrong side — 20px of it
		   at each end instead of 40 on the right. */
		align-self: stretch;
		/* ⚠️ `width: auto` matters. The base sets `width: 100%`, which pins the box
		   to the container's 1360 and leaves the negative margin nowhere to grow —
		   the track still clipped at the page gutter with a 40px strip of cream
		   beside it. With auto, stretch + the negative margin give a 1400 box that
		   ends on the viewport edge. */
		width: auto;
		margin-right: calc(-1 * var(--pad));
		padding-right: var(--pad);
	}
	/* The middle frame of every three is the wide one. Written as a repeating
	   rhythm rather than per-tile widths so the rail keeps working whatever the
	   client puts in it. */
	.db-carousel--thirds .db-rail > * { flex: 0 0 480px; }
	.db-carousel--thirds .db-rail > :nth-child(3n+2) { flex-basis: 591px; }
	.db-carousel--thirds .db-rail img { width: 100%; height: 680px; aspect-ratio: auto; object-fit: cover; }
}

/* --- variant: category rails  (.db-carousel--cats) ------------------------
   The third layout the note above warned about, and the one that was never
   built: the landing page's "Menü" block [Figma title 368:871 + rails 368:873,
   mobile 368:4738 / component 368:4812]. NOT one carousel — a ruled title band
   over THREE independent sliders, each with its own heading, its own arrow pair
   and four captioned frames.

   Desktop [368:874]            Mobile [368:4812]
     title ......... arrows       title
     ---- rule ----------         rail   (300x300 frames, gap 10)
     rail (420x368, gap 20)       arrows (below, left-aligned)

   The arrows move from beside the heading to underneath it, so the DOM is
   written in MOBILE order (title, rail, nav) and desktop lifts the nav back up.
   `.db-cat__head` is `display: contents` on mobile — it has no rule there, so it
   does not need to be a box, and dissolving it lets its children take part in
   .db-cat's own grid where `order` can place them. Desktop turns it back into a
   real flex row so it can carry the 1px rule under the heading AND the arrows. */
/* Title band [368:871 / mobile 368:4739]: centred "Menü" over a rule that runs
   the full width of the section, exactly like .db-menu__head. The block carries
   align:full for the same reason it does there — core's constrained layout insets
   anything unaligned through a selector no single-class theme rule can beat
   (§9.23 Trap 25) — so the padding is re-applied here to put the title back on
   the page column. */
.db-carousel--cats .db-carousel__head {
	padding-block: 16px;
	padding-inline: var(--wp--style--root--padding-left);
	border-bottom: 1px solid var(--line2);
}
.db-carousel--cats .db-carousel__title { text-align: center; }

.db-carousel--cats .db-carousel__body {
	display: flex; flex-direction: column; gap: 40px; padding-block: 40px;
}

.db-cat { display: grid; row-gap: 16px; }
.db-cat__head { display: contents; }
.db-cat__title { order: 1; margin: 0; font-size: 1.125rem; line-height: 1.556; }
/* The rail BLEEDS to the right screen edge — the cut-off frame is clipped by the
   viewport, not by the page column [368:4741 mobile; desktop 368:873 renders the
   4th frame and its caption running off the 1440 edge]. Left stays on the column,
   so only the right side is pulled out.

   The heading rule above it deliberately does NOT bleed: it stops at the column,
   which is what both renders show.

   `padding-right` restores the inset at the far end of the scroll, so the last
   frame comes to rest the same distance from the edge as the first one starts —
   without it the track ends flush against the screen and reads as clipped.

   Safe as a plain negative margin because `.db-carousel__body` is a flow layout,
   not a constrained one: core's `margin-inline: auto !important` (Trap 25, §9.23)
   only reaches direct children of `.is-layout-constrained`, and the rail is two
   levels below it. */
.db-carousel--cats .db-rail {
	order: 2; gap: 10px;
	margin-right: calc(-1 * var(--wp--style--root--padding-right));
	padding-right: var(--wp--style--root--padding-right);
}
/* 16px grid gap + 8px = the design's 24px between rail and arrows [368:4812] */
.db-carousel--cats .db-rail-nav { order: 3; gap: 12px; margin-top: 8px; }
.db-carousel--cats .db-rail-nav button { width: 46px; height: 46px; }

/* The frames are core/image blocks so the caption stays editable as an ordinary
   image caption rather than becoming a second hand-built element. */
.db-carousel--cats .db-rail > * {
	flex: 0 0 300px; scroll-snap-align: start;
	display: flex; flex-direction: column; gap: 12px; margin: 0;
}
.db-carousel--cats .db-rail img { width: 100%; height: 300px; object-fit: cover; }
.db-carousel--cats .db-rail figcaption {
	margin: 0; padding-right: 32px; text-align: left;
	font-size: 16px; line-height: 1.75; color: rgba(0, 0, 0, .6);
}

@media (min-width: 861px) {
	.db-carousel--cats .db-carousel__head { padding-block: 60px; }
	.db-carousel--cats .db-carousel__body { gap: 60px; padding-block: 60px; }

	.db-cat { row-gap: 32px; }
	.db-cat__head {
		display: flex; align-items: center; justify-content: space-between; gap: 120px;
		padding-bottom: 24px; border-bottom: 1px solid var(--line2);
	}
	/* order is reset on all three: the head is a box again, so the grid only sees
	   head then rail, in source order. */
	.db-cat__title { order: 0; font-size: 1.5rem; line-height: 1.333; }
	.db-carousel--cats .db-rail { order: 0; gap: 20px; } /* bleed inherited from the base rule */
	.db-carousel--cats .db-rail-nav { order: 0; margin-top: 0; }

	.db-carousel--cats .db-rail > * { flex: 0 0 420px; gap: 16px; }
	.db-carousel--cats .db-rail img { height: 368px; }
	.db-carousel--cats .db-rail figcaption { padding-right: 68px; }
}

/* --- the /ueber-uns/ location slider -------------------------------------
   "Eine Location für Ihre Momente" [Figma 368:3653]. It had been built as
   `db-gallery` — a static 3-up grid — which is what the client queried: the
   frame is a SLIDER. 368:3656 holds three 480x680 frames in a hug row (so the
   track overflows 1360 by design) and 368:3663 puts TWO 46x46 circular arrows,
   12px apart, CENTRED underneath.

   The base carousel already carries 480/680 on desktop, so only the title
   alignment and the arrow treatment are new. Both scoped away from
   `--split` (the homepage instance), which has its own frame. */
.db-carousel:not(.db-carousel--split) .db-carousel__title { text-align: center; }

.db-carousel:not(.db-carousel--split) .db-rail-nav.is-ready {
	display: flex;
	justify-content: center;
	gap: 12px;
}
.db-carousel:not(.db-carousel--split) .db-rail-nav button {
	/* 46, not the 56 the other rails use [EL-03a42e4b] */
	width: 46px;
	height: 46px;
	font-size: 18px;
	border-color: var(--line2);
}