/* ═══ Baustein Abschluss ════════════════════════════════════
   Der einzige dunkle Moment vor dem Fuss.
   ═══════════════════════════════════════════════════════════ */

.ende {
	--mu: var(--mu-hell);
	position: relative;
	overflow: hidden;
	display: flex;
	align-items: center;
	color: var(--we);
}

.ende > img {
	position: absolute;
	inset: 0;
	height: 100%;
	object-fit: cover;
}

.ende::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(90deg, rgba(17, 19, 24, .8), rgba(17, 19, 24, .3));
}

/* Ohne Bild kein Verlauf. Ein dunkler Verlauf ueber nichts ist ein
   schwarzer Kasten, und weisse Schrift darauf waere unlesbar, sobald
   der Verlauf faellt. Beides haengt deshalb am Bild. */
.ende--hell { --mu: var(--mu-papier); color: var(--tx); }
.ende--hell::after { display: none; }

.ende .in {
	position: relative;
	z-index: var(--z-inhalt);
	width: 100%;
	/* Innen --s5 am Handy, --s6 ab 760, wie .ende in idee-soelden,
	   idee-buchen und idee-appartement. Keine Mindesthoehe mehr, die
	   Hoehe kommt aus dem Inhalt. */
	padding-block: var(--s5);
}
@media (min-width: 760px) {
	.ende .in { padding-block: var(--s6); }
}

/* Der Titel, eine Groesse fuer beide Formen, aus denselben drei
   Referenzen: clamp(1.5rem, 2.6vw, 2.25rem). idee-start.html hatte
   2.75rem, das war Drift, die Datei ist nachgezogen. */
.ende__titel {
	margin: 0;
	max-width: 18ch;
	font-size: clamp(1.5rem, 2.6vw, 2.25rem);
	font-weight: var(--gw-normal);
	letter-spacing: -.03em;
	line-height: 1.05;
}
.ende__titel em {
	font-style: normal;
	font-weight: var(--gw-normal);
	color: var(--mu);
}

.ende .btns {
	display: flex;
	gap: var(--s2);
	flex-wrap: wrap;
	margin-top: var(--s5);
}

/* Auf dem dunklen Band traegt Schwarz nicht, und Markenblau misst
   dort nur 2,62 zu 1. Deshalb die helle Fassung des Akzents mit
   dunkler Schrift: derselbe Aufruf, lesbar auf dem Foto. */
.ende .kn {
	background: var(--knt);
	color: var(--dk);
}
.ende .kn.leer {
	background: none;
	color: var(--we);
	box-shadow: inset 0 0 0 1px var(--we45);
}
.ende .kn.leer:hover { box-shadow: inset 0 0 0 1px var(--we); }

/* Die knappe Fassung der Startseite: kein Foto, kein halber
   Bildschirm Hoehe, Ueberschrift und Knopf in einer Zeile. Vorbild:
   03_Design/final/idee-start.html */
.ende--knapp {
	display: block;
	background: var(--dk);
}
.ende--knapp::after { display: none; }
.ende--knapp .ende__g {
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
	gap: var(--s5);
}
.ende--knapp .kn {
	flex: 0 0 auto;
	background: var(--pa);
	color: var(--tx);
}

@media (max-width: 61.25rem) {
	.ende--knapp .ende__g {
		flex-direction: column;
		align-items: flex-start;
	}
}

/* Textverweis statt Knopf. Auf /buchen/ gehoert die Farbe dem
   Kalender: ein zweiter Akzentknopf waere ein zweiter Aufruf.
   Die Haarlinie ist heller als --ln, sie liegt auf --dk. */
.ende__tl {
	box-shadow: inset 0 -1px 0 var(--ln-hell);
}

.ende__tl:hover {
	box-shadow: inset 0 -1px 0 currentColor;
}