/* ==========================================================================
   DR. BILDIR – Hero Carousel
   Version 0.5.0 · komplett neu aufgebaut (2026-09-02)

   Architekturprinzipien:
   1. Alle Slides liegen im selben CSS-Grid-Feld (kein position:absolute).
      -> Die Hoehe des Heros ergibt sich automatisch aus dem laengsten Slide,
         alle vier Slides sind dadurch exakt gleich hoch.
   2. Der Copy-Block ist ein Grid mit benannten Bereichen. CTA und Dermatest
      teilen sich eine feste Zeile -> sie koennen sich nie ueberlappen und
      reagieren automatisch auf unterschiedlich lange Texte.
   3. Fuer die Steuerung ist unten Platz reserviert (Padding), sie ueberdeckt
      daher niemals Text.
   4. Genau DREI Breakpoint-Bloecke (Desktop / <=980px / <=767px).
      Keine angehaengten Patch-Media-Queries mehr.
   ========================================================================== */

.drb-hero {
	--drb-ink: #111;
	--drb-teal: #087681;
	--drb-paper: #f4efeb;
	--drb-gutter: clamp(28px, 6vw, 112px);
	--drb-seal: 62px;
	--drb-controls-h: 36px;
	--drb-controls-gap: 26px;

	position: relative;
	isolation: isolate;
	overflow: hidden;
	width: 100%;
	background: var(--drb-paper);
	color: var(--drb-ink);
	font-family: "DM Sans", Arial, sans-serif;
}

.drb-hero * {
	box-sizing: border-box;
}

/* --------------------------------------------------------------------------
   1 · Slide-Stapel
   Alle Slides im selben Grid-Feld: gleiche Hoehe, keine Absolutwerte.
   -------------------------------------------------------------------------- */

.drb-hero__viewport {
	position: relative;
	z-index: 1;
	display: grid;
	grid-template-columns: 1fr;
	min-height: clamp(560px, 46vw, 720px);
}

.drb-hero__slide {
	grid-area: 1 / 1;
	display: grid;
	grid-template-columns: minmax(0, 46%) minmax(0, 54%);
	align-items: center;
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition: opacity .34s ease;
}

.drb-hero__slide.is-active {
	z-index: 2;
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
}

/* Hintergrundmotiv – liegt auf dem Desktop vollflaechig hinter allem */
.drb-hero__composition {
	position: absolute;
	z-index: 0;
	inset: 0;
	display: block;
}

.drb-hero__composition img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}

/* --------------------------------------------------------------------------
   2 · Textspalte
   Grid mit festen Bereichen. Die letzte Zeile traegt CTA + Dermatest.
   -------------------------------------------------------------------------- */

.drb-hero__copy {
	position: relative;
	z-index: 3;
	grid-column: 1;
	grid-row: 1;
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	grid-template-areas:
		"eyebrow eyebrow"
		"headline headline"
		"body body"
		"cta trust";
	align-content: center;
	justify-items: start;
	max-width: 760px;
	padding:
		48px
		clamp(16px, 2.5vw, 36px)
		calc(var(--drb-controls-h) + var(--drb-controls-gap) + 34px)
		var(--drb-gutter);
	text-align: left;
}

.drb-hero__eyebrow {
	grid-area: eyebrow;
	margin: 0 0 16px;
	color: var(--drb-teal);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: .17em;
	text-transform: uppercase;
}

.drb-hero__headline {
	grid-area: headline;
	max-width: 12ch;
	margin: 0 0 18px;
	font-family: Georgia, "Times New Roman", serif;
	font-size: clamp(40px, 4vw, 68px);
	font-weight: 400;
	line-height: 1.02;
	letter-spacing: -.04em;
	text-wrap: balance;
}

.drb-hero__body {
	grid-area: body;
	max-width: 46ch;
	margin: 0 0 28px;
	font-size: clamp(15px, 1.1vw, 18px);
	line-height: 1.45;
}

.drb-hero__cta {
	grid-area: cta;
	align-self: center;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 50px;
	padding: 13px 24px;
	border: 1px solid var(--drb-teal);
	border-radius: 0;
	background: var(--drb-teal);
	color: #fff !important;
	font-size: 15px;
	font-weight: 700;
	text-decoration: none !important;
	transition: background .2s, color .2s;
}

.drb-hero__cta:hover,
.drb-hero__cta:focus-visible {
	background: #fff;
	color: var(--drb-teal) !important;
	outline: 2px solid var(--drb-teal);
	outline-offset: 3px;
}

/* Dermatest sitzt in derselben Zeile wie der Button – nie darunter, nie darauf */
.drb-hero__trust {
	grid-area: trust;
	align-self: center;
	justify-self: start;
	display: flex;
	align-items: center;
	gap: 12px;
	min-height: calc(var(--drb-seal) / 0.76); /* reserviert die Siegelhoehe auch auf Slide 4 */
	margin-left: clamp(16px, 2vw, 28px);
	font-size: 13px;
	line-height: 1.3;
}

.drb-hero__trust--placeholder {
	visibility: hidden;
}

.drb-hero__seal {
	display: block;
	flex: 0 0 auto;
	width: var(--drb-seal);
	height: auto;
}

.drb-hero__trust strong {
	font-weight: 700;
}

/* Der erklaerende Text neben dem Siegel nur dort, wo wirklich Platz ist */
@media (max-width: 1199px) {
	.drb-hero__trust span {
		display: none;
	}
}

@media (min-width: 1200px) {
	.drb-hero__trust {
		font-size: 12.5px;
	}

	.drb-hero__trust span {
		max-width: 15ch;
	}
}

/* --------------------------------------------------------------------------
   3 · Bildspalte
   -------------------------------------------------------------------------- */

.drb-hero__visual {
	position: relative;
	z-index: 2;
	grid-column: 2;
	grid-row: 1;
	align-self: stretch;
	min-width: 0;
	height: 100%;
}

.drb-hero__ayse-link {
	position: absolute;
	z-index: 5;
	bottom: 0;
	left: -8%;
	display: block;
	width: min(52%, 520px);
	height: 100%;
}

.drb-hero .drb-hero__ayse {
	display: block;
	width: 100% !important;
	height: 100% !important;
	max-height: none;
	object-fit: contain;
	object-position: center bottom;
	filter: drop-shadow(0 18px 22px rgba(55, 35, 20, .12));
}

.drb-hero__ayse-link:focus-visible {
	outline: 3px solid var(--drb-teal);
	outline-offset: -3px;
}

.drb-hero__product-link {
	position: absolute;
	z-index: 4;
	right: 3%;
	bottom: 6%;
	width: 44%;
	height: 82%;
}

.drb-hero__slide[data-slide="inner"] .drb-hero__product-link {
	right: 2%;
	width: 48%;
}

/* --------------------------------------------------------------------------
   4 · Steuerung
   Desktop: unten links, im reservierten Padding der Textspalte.
   -------------------------------------------------------------------------- */

.drb-hero__controls {
	position: absolute;
	z-index: 8;
	bottom: var(--drb-controls-gap);
	left: var(--drb-gutter);
	display: flex;
	align-items: center;
	gap: 13px;
	height: var(--drb-controls-h);
}

.drb-hero__pager {
	display: contents;
}

.drb-hero__counter {
	min-width: 50px;
	color: var(--drb-teal);
	font-size: 13px;
	font-weight: 700;
}

.drb-hero__dots {
	display: flex;
	align-items: center;
	gap: 11px;
}

.drb-hero .drb-hero__dots button,
.drb-hero .drb-hero__dots button:hover,
.drb-hero .drb-hero__dots button:focus,
.drb-hero .drb-hero__dots button:active {
	width: 9px;
	height: 9px;
	padding: 0;
	border: 0 !important;
	border-radius: 50%;
	background: #b8b4b1 !important;
	box-shadow: none !important;
	outline: 0;
	cursor: pointer;
}

.drb-hero .drb-hero__dots button.is-active,
.drb-hero .drb-hero__dots button.is-active:hover,
.drb-hero .drb-hero__dots button.is-active:focus,
.drb-hero .drb-hero__dots button.is-active:active {
	background: var(--drb-teal) !important;
	transform: scale(1.22);
}

.drb-hero .drb-hero__dots button:focus-visible {
	outline: 2px solid var(--drb-teal) !important;
	outline-offset: 4px;
}

.drb-hero__arrow,
.drb-hero__arrow:hover,
.drb-hero__arrow:focus,
.drb-hero__arrow:focus-visible,
.drb-hero__arrow:active {
	display: grid;
	width: 36px;
	height: 36px;
	padding: 0;
	place-items: center;
	border: 0 !important;
	border-radius: 0;
	background: transparent !important;
	color: var(--drb-teal) !important;
	box-shadow: none !important;
	font-size: 30px;
	line-height: 1;
	cursor: pointer;
}

.drb-hero__arrow:focus-visible {
	outline: 2px solid var(--drb-teal) !important;
	outline-offset: 2px;
}

.drb-hero__arrow span {
	display: block !important;
	font-size: 34px !important;
	font-weight: 400 !important;
	line-height: .75 !important;
	transform: translateY(-1px);
}

.drb-hero__toggle,
.drb-hero__toggle:hover,
.drb-hero__toggle:focus,
.drb-hero__toggle:focus-visible,
.drb-hero__toggle:active {
	display: grid;
	width: 34px;
	height: 36px;
	padding: 0;
	place-items: center;
	border: 0 !important;
	background: transparent !important;
	color: var(--drb-teal) !important;
	box-shadow: none !important;
	outline: 0 !important;
	cursor: pointer;
}

.drb-hero__toggle span::before {
	content: "";
	display: block;
	width: 10px;
	height: 10px;
	background: linear-gradient(90deg, var(--drb-teal) 0 35%, transparent 35% 65%, var(--drb-teal) 65% 100%);
}

.drb-hero__toggle[aria-pressed="true"] span::before {
	width: 0;
	height: 0;
	background: none;
	border-top: 5px solid transparent;
	border-bottom: 5px solid transparent;
	border-left: 9px solid var(--drb-teal);
}

.drb-hero__toggle:active span {
	opacity: .58;
}

/* ==========================================================================
   BREAKPOINT · Tablet / schmaler Desktop
   ========================================================================== */

@media (max-width: 980px) {
	.drb-hero {
		--drb-seal: 54px;
	}

	.drb-hero__slide {
		grid-template-columns: minmax(0, 52%) minmax(0, 48%);
	}

	.drb-hero__headline {
		max-width: 14ch;
		font-size: clamp(34px, 4.6vw, 50px);
	}

	.drb-hero__copy {
		padding-right: 12px;
	}

	.drb-hero__ayse-link {
		left: -12%;
		width: min(78%, 420px);
	}
}

/* ==========================================================================
   BREAKPOINT · Mobil (ein einziger Block – keine Patch-Kaskade)

   Aufbau des Slides:
     Zeile 1 (auto)            -> Copy: Kategorie, Headline, Text, CTA+Siegel
     Zeile 2 (--drb-media)     -> Produktmotiv + Ayse, feste Hoehe
   Die Steuerung liegt exakt auf der Kante zwischen beiden Zeilen.
   ========================================================================== */

@media (max-width: 767px) {
	.drb-hero {
		/* 100vw: die Mobil-Motive sind quadratisch (768x768). Eine quadratische
		   Bildzeile zeigt sie vollstaendig, ohne Beschnitt oben und unten. */
		--drb-media: 100vw;
		--drb-gutter: 20px;
		--drb-seal: 48px;
		touch-action: pan-y pinch-zoom;
	}

	.drb-hero__viewport {
		min-height: 0;
	}

	.drb-hero__slide {
		grid-template-columns: 1fr;
		grid-template-rows: auto var(--drb-media);
		align-items: stretch;
	}

	/* Zwei flexible Leerzeilen verteilen die Hoehendifferenz zwischen den
	   Slides gleichmaessig nach oben und ueber den Button. Dadurch stehen
	   CTA und Siegel auf allen vier Slides exakt auf derselben Hoehe. */
	.drb-hero__copy {
		grid-column: 1;
		grid-row: 1;
		grid-template-rows: minmax(0, 1fr) auto auto auto minmax(0, 1fr) auto;
		grid-template-areas:
			". ."
			"eyebrow eyebrow"
			"headline headline"
			"body body"
			". ."
			"cta trust";
		align-content: stretch;
		max-width: none;
		padding: 14px var(--drb-gutter) 26px;
	}

	.drb-hero__eyebrow {
		margin: 0 0 9px;
		font-size: 10.5px;
	}

	/* Keine max-width: eine Zeilenbegrenzung bricht die Headline auf manchen
	   Geraeten auf 4-5 Zeilen um und blaeht den Hero auf. Volle Spaltenbreite
	   haelt alle vier Slides bei zwei Zeilen. */
	.drb-hero__headline {
		max-width: none;
		margin: 0 0 10px;
		font-size: clamp(27px, 7.4vw, 33px);
		line-height: 1.06;
	}

	.drb-hero__body {
		max-width: none;
		margin: 0 0 14px;
		font-size: 13.5px;
		line-height: 1.32;
	}

	.drb-hero__cta {
		min-height: 44px;
		padding: 10px 16px;
		font-size: 13.5px;
	}

	/* Siegel: gleiche Zeile wie der Button, mittig im freien Raum rechts
	   daneben - nicht hart an der rechten Kante. */
	.drb-hero__trust {
		justify-self: center;
		gap: 0;
		margin-left: 0;
	}

	/* Bildzeile: Hintergrundmotiv und Overlay teilen sich dieselbe Zelle */
	.drb-hero__composition,
	.drb-hero__visual {
		position: relative;
		z-index: auto;
		grid-column: 1;
		grid-row: 2;
		inset: auto;
		width: 100%;
		/* --drb-media entspricht der Hero-Breite -> exakt quadratisch.
		   Feste Zeilenhoehe statt aspect-ratio, weil ein gestrecktes Grid-Item
		   sein Seitenverhaeltnis sonst verliert. */
		height: var(--drb-media);
		overflow: hidden;
	}

	.drb-hero__composition {
		z-index: 0;
		background: var(--drb-paper);
	}

	.drb-hero__composition img {
		object-fit: cover;
		object-position: center center;
	}

	.drb-hero__visual {
		z-index: 2;
	}

	.drb-hero__ayse-link {
		right: 0;
		bottom: 0;
		left: auto;
		width: 170px;
		height: 100%;
	}

	.drb-hero .drb-hero__ayse {
		object-position: right bottom;
		filter: none;
	}

	.drb-hero__product-link,
	.drb-hero__slide[data-slide="inner"] .drb-hero__product-link {
		right: 0;
		bottom: 0;
		width: 100%;
		height: 100%;
	}

	/* Steuerung: sitzt auf der Kante zwischen Copy und Bild.
	   Pfeile aussen, Punkte + Play/Pause als mittige Einheit. */
	.drb-hero__controls {
		right: 12px;
		bottom: calc(var(--drb-media) - 22px);
		left: 12px;
		justify-content: space-between;
		gap: 0;
		height: 44px;
	}

	.drb-hero__counter {
		display: none;
	}

	.drb-hero__arrow,
	.drb-hero__arrow:hover,
	.drb-hero__arrow:focus,
	.drb-hero__arrow:focus-visible,
	.drb-hero__arrow:active {
		width: 44px;
		height: 44px;
		border: 1px solid rgba(8, 118, 129, .3) !important;
		/* eckig: das Theme erzwingt global border-radius:0 auf Buttons */
		border-radius: 0;
		background: rgba(249, 247, 244, .95) !important;
		box-shadow: 0 4px 14px rgba(24, 20, 18, .14) !important;
	}

	.drb-hero__arrow:active {
		background: rgba(8, 118, 129, .16) !important;
		transform: scale(.94);
	}

	.drb-hero__pager {
		display: flex;
		align-items: center;
		height: 30px;
		padding: 0 2px 0 12px;
		border: 1px solid rgba(8, 118, 129, .3);
		border-radius: 0;
		background: rgba(249, 247, 244, .95);
		box-shadow: 0 4px 14px rgba(24, 20, 18, .12);
		overflow: hidden;
	}

	.drb-hero__dots {
		gap: 9px;
		padding-right: 10px;
	}

	.drb-hero .drb-hero__dots button,
	.drb-hero .drb-hero__dots button:hover,
	.drb-hero .drb-hero__dots button:focus,
	.drb-hero .drb-hero__dots button:active {
		width: 8px;
		height: 8px;
	}

	.drb-hero .drb-hero__toggle,
	.drb-hero .drb-hero__toggle:hover,
	.drb-hero .drb-hero__toggle:focus,
	.drb-hero .drb-hero__toggle:focus-visible,
	.drb-hero .drb-hero__toggle:active {
		width: 28px;
		height: 28px;
		border: 0 !important;
		border-left: 1px solid rgba(8, 118, 129, .28) !important;
		border-radius: 0 !important;
		background: transparent !important;
		box-shadow: none !important;
	}

	.drb-hero__toggle span::before {
		width: 9px;
		height: 9px;
	}

	.drb-hero__toggle[aria-pressed="true"] span::before {
		border-top-width: 4px;
		border-bottom-width: 4px;
		border-left-width: 8px;
	}
}

/* Kleine Geraete: etwas flacheres Bild, damit der Hero kompakt bleibt */
@media (max-width: 390px) {
	.drb-hero {
		--drb-seal: 44px;
	}

	.drb-hero__headline {
		font-size: 27px;
	}

	.drb-hero__ayse-link {
		width: 150px;
	}
}

/* Wo Container-Query-Einheiten unterstuetzt werden, haengt die Steuerung an
   der echten Hero-Breite statt an 100vw. Ohne Unterstuetzung bleibt 100vw. */
@supports (width: 1cqw) {
	@media (max-width: 767px) {
		.drb-hero__viewport,
		.drb-hero__controls {
			--drb-media: 100cqw;
		}
	}
}

/* ==========================================================================
   BREAKPOINT · Querformat auf flachen Bildschirmen (gedrehtes Handy)

   Ohne diesen Block ist der Hero 560px hoch, das Fenster aber nur ~410px.
   Der Hero passt dann nicht auf den Bildschirm und Ayses Kopf wird von der
   Hero-Oberkante abgeschnitten.
   ========================================================================== */

@media (orientation: landscape) and (max-height: 520px) and (min-width: 768px) {
	.drb-hero__viewport {
		min-height: min(560px, 94vh);
	}

	.drb-hero__copy {
		padding-top: 22px;
		padding-bottom: 74px;
	}

	.drb-hero__headline {
		margin-bottom: 12px;
		font-size: clamp(26px, 3.2vw, 40px);
	}

	.drb-hero__body {
		margin-bottom: 18px;
		font-size: 14px;
	}

	.drb-hero__cta {
		min-height: 44px;
	}

	/* etwas Luft nach oben, damit der Kopf nicht an der Oberkante klebt */
	.drb-hero__ayse-link {
		height: 88%;
	}
}

@media (prefers-reduced-motion: reduce) {
	.drb-hero__slide {
		transition: none;
	}
}