/*
 * Zertifikate-Übersichtsseite ([zwcl_zertifikate]).
 * Ruhige, vertrauensbildende Optik gemäß Zweisam-Designwelt.
 */

.zwcl-certpage {
	max-width: 1100px;
	margin: 0 auto;
	padding: 0 1rem;
}

/* „Zurück" oben, gut erkennbar. */
.zwcl-certpage__back {
	display: inline-flex;
	align-items: center;
	gap: 0.4em;
	margin: 0.5rem 0 1.25rem;
	padding: 0.5rem 0.95rem;
	border: 1px solid var(--zcf-border, #d9d6cf);
	border-radius: 999px;
	background: var(--zcf-white, #fff);
	color: inherit;
	font-weight: 600;
	font-size: 0.95rem;
	text-decoration: none;
	transition: box-shadow 0.15s ease, background 0.15s ease;
}

.zwcl-certpage__back:hover,
.zwcl-certpage__back:focus-visible {
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
}

.zwcl-certpage__back-arrow {
	font-size: 1.1em;
	line-height: 1;
}

/* -------- Hero -------- */

.zwcl-certpage__hero {
	position: relative;
	border-radius: 14px;
	overflow: hidden;
	margin-bottom: 2rem;
	background: var(--zcf-sand, #efece4);
}

.zwcl-certpage__hero-media img {
	display: block;
	width: 100%;
	height: auto;
}

.zwcl-certpage__hero-text {
	padding: 1.4rem 1.25rem 1.6rem;
}

.zwcl-certpage__headline {
	font-family: inherit;
	font-weight: 800;
	font-size: clamp(1.6rem, 4vw, 2.6rem);
	line-height: 1.15;
	margin: 0 0 0.5rem;
}

.zwcl-certpage__lead {
	font-size: clamp(1rem, 2vw, 1.2rem);
	line-height: 1.5;
	margin: 0;
	max-width: 46ch;
}

/*
 * Ab Tablet: Text in den ruhigen linken 45 % über dem Bild (das Hero-Motiv
 * lässt diesen Bereich frei). Ohne Foto bleibt der Text schlicht im Fluss.
 */
@media (min-width: 768px) {
	.zwcl-certpage__hero.has-photo .zwcl-certpage__hero-text {
		position: absolute;
		inset: 0 auto 0 0;
		width: 48%;
		display: flex;
		flex-direction: column;
		justify-content: center;
		padding: 2rem 2.2rem;
	}

	/* Sanfter Aufheller, damit die Headline auf dem Foto sicher lesbar ist. */
	.zwcl-certpage__hero.has-photo .zwcl-certpage__hero-text::before {
		content: "";
		position: absolute;
		inset: 0;
		background: linear-gradient(90deg, rgba(255, 255, 255, 0.86) 55%, rgba(255, 255, 255, 0));
		z-index: -1;
	}
}

/* -------- Zertifikate-Liste -------- */

.zwcl-certpage__list {
	list-style: none;
	margin: 0 0 1.5rem;
	padding: 0;
	display: grid;
	gap: 1rem;
}

@media (min-width: 680px) {
	.zwcl-certpage__list {
		grid-template-columns: repeat(2, 1fr);
	}
}

.zwcl-certpage__cert {
	display: flex;
	gap: 1rem;
	align-items: flex-start;
	padding: 1.1rem 1.2rem;
	background: var(--zcf-white, #fff);
	border: 1px solid var(--zcf-border, #d9d6cf);
	border-radius: 10px;
}

.zwcl-certpage__cert-logo img {
	display: block;
	width: 56px;
	height: 56px;
	object-fit: contain;
}

.zwcl-certpage__cert-name {
	font-family: inherit;
	font-size: 1.05rem;
	font-weight: 700;
	margin: 0 0 0.35rem;
	line-height: 1.3;
}

.zwcl-certpage__cert-desc {
	margin: 0;
	font-size: 0.95rem;
	line-height: 1.5;
	color: var(--zcf-muted, #5f5c55);
}

.zwcl-certpage__note {
	font-size: 0.92rem;
	color: var(--zcf-muted, #5f5c55);
	margin: 0 0 2rem;
}